/* =================================================
   共通変数
================================================= */
:root{
  --bike-accent:#B40000;
  --bike-border:#ccc;
  --bike-bg-light:#fafafa;
  --bike-heading:#555;
  --bike-overlay:rgba(0,0,0,.35);
  --bike-font:'Plus Jakarta Sans',sans-serif;
}

/* =================================================
   オーバーレイ
================================================= */
#bike-modal-overlay{
  position:fixed;
  inset:0;
  background:var(--bike-overlay);
  display:none;                 
  justify-content:center;
  align-items:center;
  padding:40px 20px;
  z-index:10000;
  font-family:var(--bike-font);
}
#bike-modal-overlay.open{display:flex;}
body.modal-open{overflow:hidden;}         

/* =================================================
   モーダル本体
================================================= */
#bike-modal-content{
  position:relative;
  background:#fff;
  width:100%;
  max-width:800px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  padding:30px;
  box-sizing:border-box;
}

/* =================================================
   × ボタン  (モーダル外・左上)
================================================= */
.bike-modal-close{
	  position: fixed;
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  background:#fff;
	  border:none;
	  padding:0;
	  z-index:10001;
}
.bike-modal-close .close-inner{
     display:grid;
     place-items:center;
     width:100%;
     height:100%;
     font-size:24px;
     line-height:1;
     color:var(--bike-accent);
	transform:translateY(-4px) !important;
}

.bike-modal-close {
  display: none !important;
}

/* =================================================
   画像
================================================= */
.bike-modal-image img{
  width:100%;
  height:auto;
  display:block;
}

/* =================================================
   セクション
================================================= */
.bike-section{
  margin-top:20px;
  padding:15px;
  border:1px solid var(--bike-border);
  border-radius:12px;
  background:var(--bike-bg-light);
}
.bike-section--square{border-radius:0;background:#fff;}
.bike-section__title{
  font-size:18px;
  margin-bottom:10px;
  padding-bottom:5px;
  border-bottom:1px solid #aaa;
  color:var(--bike-heading);
}

/* =================================================
   テーブル
================================================= */
.bike-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:14px;
  margin-top:15px;
  word-break:break-word;
}
.bike-table th,.bike-table td{
  border:1px solid var(--bike-border);
  padding:10px;
  text-align:center;
}
.bike-table th{
  background:var(--bike-heading);
  color:#fff;
  font-weight:normal;
}

/* =================================================
   仕様オプション（2段・左端そろえ）
================================================= */
.bike-options{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);   
  gap:10px;
  margin:0;
  padding:0;                             
}
.bike-options li{
  min-height:46px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 8px;
  border:2px solid #999;
  background:#f9f9f9;
  font-size:13px;
  text-align:center;
  transition:background .2s,border-color .2s,color .2s;
}
.bike-options li.active{
  background:#fff;
  border-color:var(--bike-accent);
  color:var(--bike-accent);
  font-weight:bold;
}

/* =================================================
   ナビ矢印
================================================= */
.bike-modal-arrow{           
  color: #B40000;                                         
  width: 100px;
  height: 100px; 
	font-size: 28px;
　font-weight: bold;　
 　display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
}
.bike-modal-arrow:hover{color:#900;}
.bike-modal-prev{left:30px;}
.bike-modal-next{right:30px;}



/* =================================================
   スマホ対応
================================================= */
@media (max-width: 768px) {
	
   #bike-modal-overlay {
    padding:50px 45px;
  }
	#bike-modal-content{
		padding:20px;
	}
  /* テーブル本体 */
  .bike-table {
    width: 100%;
    border-collapse: collapse; 
    table-layout: fixed;     
    border: 1px solid var(--bike-border); 
  }

  /* 行はブロック化 */
  .bike-table tr {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* th／td をブロック＆幅100％に、セル枠も復活 */
  .bike-table th,
  .bike-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--bike-border); 
    padding: 10px;
    text-align: left;
    min-height: 3em;                       
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 空セルにも高さを効かせるための不可視文字 */
  .bike-table td:empty::before {
    content: "\00a0";
    display: inline-block;
  }

  /* 見出しセルの背景色 */
  .bike-table th {
    background: var(--bike-heading);
    color: #fff;
    font-weight: normal;
  }

  /* 閉じるボタンを右上に */
  .bike-modal-close{
    display:block !important; /* ← flex ではなく block/grid 構成 */
    top: 8px !important;
    right: 8px !important;
    left:auto !important;
  }
	.bike-modal-prev{left:15px;}
    .bike-modal-next{right:15px;}
	.bike-modal-arrow{width: 20px; height: 20px;}
}



html {
  /* 縦スクロールバーの幅分、常に余白を確保する */
  scrollbar-gutter: stable;
}