/*=========レイアウト（基本）=========*/
table, tr, th, td {
  border-collapse:collapse;
  padding:0;
}

.left { float:left; }
.right { float:right; }
.center { margin:0 auto; }
.clear { clear:both; }
.clearfix {
overflow:hidden;
_zoom:1;/*ie6*/
}

/* display */
.d_i { display: inline !important; }
.d_ib { display: inline-block !important; }
.d_b { display: block !important; }

/*マージン：パディング*/
.m_auto { margin: 0 auto; }

.mt03 { margin-top: 3px!important; }
.mt05 { margin-top: 5px!important; }
.mt10 { margin-top:10px!important; }
.mt15 { margin-top:15px!important; }
.mt20 { margin-top:20px!important; }
.mt25 { margin-top:25px!important; }
.mt30 { margin-top:30px!important; }
.mt35 { margin-top:35px!important; }
.mt40 { margin-top:40px!important; }
.mt45 { margin-top:45px!important; }
.mt50 { margin-top:50px!important; }
.mt55 { margin-top:55px!important; }
.mt60 { margin-top:60px!important; }
.mt70 { margin-top:70px!important; }

.mb03 { margin-bottom: 3px!important; }
.mb05 { margin-bottom: 5px!important; }
.mb10 { margin-bottom:10px!important; }
.mb15 { margin-bottom:15px!important; }
.mb20 { margin-bottom:20px!important; }
.mb25 { margin-bottom:25px!important; }
.mb30 { margin-bottom:30px!important; }
.mb35 { margin-bottom:35px!important; }
.mb40 { margin-bottom:40px!important; }
.mb45 { margin-bottom:45px!important; }
.mb50 { margin-bottom:50px!important; }
.mb55 { margin-bottom:55px!important; }
.mb60 { margin-bottom:60px!important; }
.mb70 { margin-bottom:70px!important; }

.pt03 { padding-top: 3px!important; }
.pt05 { padding-top: 5px!important; }
.pt10 { padding-top:10px!important; }
.pt15 { padding-top:15px!important; }
.pt20 { padding-top:20px!important; }
.pt25 { padding-top:25px!important; }
.pt30 { padding-top:30px!important; }
.pt35 { padding-top:35px!important; }
.pt40 { padding-top:40px!important; }
.pt45 { padding-top:45px!important; }
.pt50 { padding-top:50px!important; }
.pt55 { padding-top:55px!important; }
.pt60 { padding-top:60px!important; }
.pt70 { padding-top:70px!important; }

.pb03 { padding-bottom: 3px!important; }
.pb05 { padding-bottom: 5px!important; }
.pb10 { padding-bottom:10px!important; }
.pb15 { padding-bottom:15px!important; }
.pb20 { padding-bottom:20px!important; }
.pb25 { padding-bottom:25px!important; }
.pb30 { padding-bottom:30px!important; }
.pb35 { padding-bottom:35px!important; }
.pb40 { padding-bottom:40px!important; }
.pb45 { padding-bottom:45px!important; }
.pb50 { padding-bottom:50px!important; }
.pb55 { padding-bottom:55px!important; }
.pb60 { padding-bottom:60px!important; }
.pb70 { padding-bottom:70px!important; }

.t10 {font-size:10px !important;}
.t11 {font-size:11px !important;}
.t12 {font-size:12px !important;}
.t13 {font-size:13px !important;}
.t14 {font-size:14px !important;}
.t15 {font-size:15px !important;}
.t16 {font-size:16px !important;}
.t17 {font-size:17px !important;}
.t18 {font-size:18px !important;}
.t19 {font-size:19px !important;}
.t20 {font-size:20px !important;}
.t21 {font-size:21px !important;}
.t22 {font-size:22px !important;}
.t23 {font-size:23px !important;}
.t24 {font-size:24px !important;}
.t25 {font-size:25px !important;}
.t26 {font-size:26px !important;}
.t27 {font-size:27px !important;}
.t28 {font-size:28px !important;}
.t29 {font-size:29px !important;}
.t30 {font-size:30px !important;}
.t_large { font-size:1.2em; }
.t_small { font-size:0.9em; }

.t_wht { color:#fff; }
.t_yel { color:#f90; }
.t_red { color:#f00; }
.t_gry { color:#666; }
.t_grn { color:#060; }
.t_brw { color:#600; }
.t_blu { color:#06f; }

.t_left { text-align:left; }
.t_right { text-align:right; }
.t_center { text-align:center; }

.t_bold { font-weight:bold; }
.t_normal { font-weight:normal; }
.t_u { text-decoration:underline; }
.t_s { text-decoration:line-through; }

.tm_yel { background: linear-gradient(transparent 60%, #FFDD00 30%); }
.tm_gry { background: linear-gradient(transparent 60%, #c4b9b1 30%); }

.t_indent {
  text-indent:-1em;
  margin-left:1em;
}

/* gridまたはflex */
.grid_flex {
  display: flex;
  flex-wrap: wrap;
}
.v_center { align-items: center; }/* grid_flexで縦の中央指定したい際に使用 grid_flexを付与している要素に一緒に付与 */
.w_center { justify-content:center; }/* grid_flexで横の中央指定したい際に使用 grid_flexを付与している要素に一緒に付与 */


/* お客様情報入力 メルマガ欄非表示 */
/*div.fs-c-agreementConfirmation:has(#fs_input_newsletterAgree){ display:none;}*/

/* 価格表下 補足表記 */
.kakaku_hosoku {
  background: #ddd;
  padding: 1px 5px;
  color: #444;
}


/* =========================
検索画面
========================= */
#kensaku_box {
  background-color:#f5f5f5;
  padding: 10px;
}
#kensaku_box .kensaku_box_contents > p { margin: 0; }
#kensaku_box .kensaku_box_contents ul {
  padding: 0;
  margin: 0;
}
#kensaku_box .kensaku_box_contents ul li {
  display: inline-block;
  margin-right: 25px;
}
#kensaku_box .kensaku_box_contents ul li label input { margin-right: 5px; }

/* デフォルトの三角マーカーを非表示 */
#kensaku_box_block summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 5px 10px 5px 30px;
  background-color: #999;
  color: #fff;
}

/* Safari用 */
#kensaku_box_block summary::-webkit-details-marker {
  display: none;
}

/* 閉じている状態：＋アイコン */
#kensaku_box_block summary::before {
  content: "+";
  position: absolute;
  left: 10px;
  top: 5px;
  font-weight: bold;
}

/* 開いている状態：−アイコン */
#kensaku_box_block[open] summary::before {
  content: "−";
}

/* 開閉のアニメーション */
#kensaku_box_block > div {
  overflow: hidden;
  transition: max-height 1s ease, opacity 1s ease;
}
#kensaku_box_block:not([open]) > div {
  max-height: 0;
  opacity: 0;
}
#kensaku_box_block[open] > div {
  max-height: 1000px;
  opacity: 1;
}

/* === PC時設定 === */
@media screen and (min-width: 481px) {
  #kensaku_box_block > div { width: 898px; }
}

/* === SP時設定 === */
@media screen and (max-width: 480px) {
  #kensaku_box_block > div { width: 100%; }

}




/* =========================
ラジオボタンにimg表示
========================= */

.form_select_radio_grid .fs-c-productOption__field {
  display: grid;
  gap: 12px;
}

.form_select_radio_grid .fs-c-radio {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form_select_img {
  width: 100%;
  max-width: 120px;
  cursor: pointer;
  border-radius: 4px;
}

.fs-c-radio__radioLabelText {
  margin-top: 3px;
  text-align: center;
  font-size: 15px;
}

.fs-c-radio:has(input[type="radio"]:checked) {
  outline: 2px solid #999;
  outline-offset: 2px;
  border-radius: 2px;
  /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); */
  /* transform: scale(1.05); */
}
.fs-c-radio__radioMark { display: none; }


/* 特定のラジオボタンの画像コマの大きさを変更する場合 */
/* オプション価格の説明分項目にidを設定したタグを記述し、それをベースに制御する */
dd:has(#test) .fs-c-radioGroup { grid-template-columns: repeat(2, 1fr); }


/* === PC時設定 === */
@media screen and (min-width: 481px) {
  /* PC：4列 × n行 */
  .form_select_radio_grid .fs-c-productOption__field {
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
}

/* === SP時設定 === */
@media screen and (max-width: 480px) {

  /* スマホ：9個以下（スクロールなし） */
  .form_select_radio_grid.no-scroll .fs-c-productOption__field {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    overflow-x: visible;
  }


  /* スマホ：10個以上（3行 × 横スクロール） */
  .form_select_radio_grid.is-scroll .fs-c-productOption__field {
    display: grid;

    /* ★ 列幅を固定 */
    grid-auto-columns: 25vw;

    /* ★ 3行固定 */
    grid-template-rows: repeat(3, auto);

    /* ★ 列単位で横に流す */
    grid-auto-flow: column;

    overflow-x: auto;
    padding-bottom: 12px;
    gap: 12px;
  }

  /* 右が少し見える余白（スクロールを示唆） */
  .form_select_radio_grid.is-scroll .fs-c-productOption__field::after {
    content: "";
    width: 20vw;
  }

  .form_select_radio_grid.is-scroll .fs-c-productOption__field {
    padding: 5px;
  }

}











/*=========スマホレイアウト=========*/
@media screen and (max-width: 480px) {
  .pc_on_b,.pc_on_i,.pc_on_ib { display: none !important; }
  .sp_on_b { display: block !important; }
  .sp_on_i { display: inline !important; }
  .sp_on_ib { display: inline-block !important; }
  .sp_t_left { text-align: left; }
  .sp_clear{clear:both;}

  .grid_flex .g01 {width:33.333%;}
  .grid_flex .g02 {width:33.333%;}
  .grid_flex .g03 {width:50%;}
  .grid_flex .g04 {width:100%;}
  .grid_flex .g05 {width:100%;}
  .grid_flex .g06 {width:100%;}
  .grid_flex .g07 {width:100%;}
  .grid_flex .g08 {width:100%;}
  .grid_flex .g09 {width:100%;}
  .grid_flex .g10 {width:100%;}
  .grid_flex .g11 {width:100%;}
  .grid_flex .g12 {width:100%;}

  .grid_flex .g01,.grid_flex .g02,.grid_flex .g03 {
    padding:0 5px;
  }
}

/*=========PCレイアウト=========*/
@media screen and (min-width: 481px) {
  .pc_on_b { display: block !important; }
  .pc_on_i { display: inline !important; }
  .pc_on_ib { display: inline-block !important; }
  .sp_on_b,.sp_on_i,.sp_on_ib { display: none !important; }

  .grid_flex .g01 {width:8.333%;}
  .grid_flex .g02 {width:16.666%;}
  .grid_flex .g03 {width:25%;}
  .grid_flex .g04 {width:33.333%;}
  .grid_flex .g05 {width:41.666%;}
  .grid_flex .g06 {width:50%;}
  .grid_flex .g07 {width:58.333%;}
  .grid_flex .g08 {width:66.666%;}
  .grid_flex .g09 {width:75%;}
  .grid_flex .g10 {width:83.33%;}
  .grid_flex .g11 {width:91.666%;}
  .grid_flex .g12 {width:100%;}

  .grid_flex .g01,.grid_flex .g02,.grid_flex .g03,.grid_flex .g04,.grid_flex .g05,.grid_flex .g06,
  .grid_flex .g07,.grid_flex .g08,.grid_flex .g09,.grid_flex .g10,.grid_flex .g11,.grid_flex .g12 {
    padding:0 5px;
  }
}

/*=========商品詳細ページ=========*/
.info_table th {
  background-color: #E5E5E5;
  font-weight: normal;
  white-space: nowrap;
}
.info_table td, .info_table th {
  border: 1px solid #BBB;
  padding: 3px 8px;
}