/* ============================================================================
   ギフト対応 選択パーツ  スタイル  ver.1.00
   gift-option-effect.js と対で使います。
   gbx- 接頭辞で、他のCSSと衝突しないようにしています。

   ※ 文字サイズはすべて 16px 以上にしています。
   ============================================================================ */

.gbx{
  /* 配色（ここだけ変えれば全体の色が変わります） */
  --gbx-accent:#F0921F;      /* 見出し帯・ボタンの色 */
  --gbx-accent-dark:#D97C0B; /* 濃いめのアクセント */
  --gbx-on-accent:#FFFFFF;   /* 帯の上に乗る文字色 */
  --gbx-bg:#FFFFFF;          /* 全体の背景 */
  --gbx-soft:#FFF8EC;        /* うすいオレンジの下地 */
  --gbx-ink:#3B3A31;         /* 本文 */
  --gbx-ink2:#7C7768;        /* 補助の文字 */
  --gbx-line:#F0C98A;        /* 枠線 */
  --gbx-line2:#EFE7D6;       /* うすい罫線 */

  box-sizing:border-box;
  margin:18px 0 22px;
  padding:0 0 16px;
  border:2px solid var(--gbx-line);
  border-radius:14px;
  background:var(--gbx-bg);
  overflow:hidden;
  font-family:inherit;
  color:var(--gbx-ink);
  /* 画面幅ではなく、このパーツ自身の横幅でレイアウトを切り替えます */
  container-type:inline-size;
}
.gbx *{box-sizing:border-box;}

/* ---- いちばん上の見出し ---- */
.gbx__head{
  padding:12px 16px;
  background:var(--gbx-accent);
  text-align:center;
}
.gbx__headTitle{
  font-size:19px;font-weight:700;letter-spacing:.06em;line-height:1.4;
  color:var(--gbx-on-accent);
}

/* ---- ご選択中のまとめ ---- */
.gbx__summary{
  margin:0;padding:11px 16px;
  background:var(--gbx-soft);
  border-bottom:1px solid var(--gbx-line2);
  font-size:16px;font-weight:700;line-height:1.6;
  color:var(--gbx-accent-dark);
  text-align:center;
}
.gbx__summary:empty{display:none;}

/* ---- 区切り（1つのまとまり） ---- */
.gbx__sec{
  padding:16px 14px 4px;
  border-bottom:1px dashed var(--gbx-line2);
}
.gbx__sec:last-of-type{border-bottom:0;}

/* 熨斗・メッセージカードの見出しは、文字の長さに合わせた札のかたちにします */
.gbx__secTitle{
  display:inline-block;
  width:100%;
  margin:0 0 14px;
  padding:10px 16px;
  border-radius:8px;
  background:var(--gbx-accent);
  color:var(--gbx-on-accent);
  font-size:17px;font-weight:700;line-height:1.45;letter-spacing:.03em;
}
/* 紙袋の見出しだけは、幅いっぱいの帯にします */
.gbx__sec--bag .gbx__secTitle{
  display:block;max-width:none;text-align:center;
}
/* futureshopの(必須)マークが帯の上でも読めるようにします */
.gbx__secTitle .fs-c-requiredMark{color:#FFF0D8;}

/* ---- 中身（入力欄とイメージの並び） ---- */
.gbx__body{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
/* 入力欄と注意書きをまとめた、左の列 */
.gbx__main{
  flex:1 1 auto;min-width:0;max-width:100%;
}
.gbx__fields{
  margin:0;
}

/* ---- 入力欄のすぐ下に出す注意書き ---- */
.gbx__fieldNote{
  margin:2px 0 12px;
  font-size:10px;line-height:1.7;
  color:var(--gbx-ink2);
}
.gbx__noteLine{
  display:block;
  /* 2行目以降が「※」の下にそろうように、ぶら下げます */
  padding-left:1em;
  text-indent:-1em;
}
/* 「※」で始まらない続きの行は、本文の位置にそろえます */
.gbx__noteLine--cont{
  padding-left:1em;
  text-indent:0;
}
/* 説明文が細切れに折り返さないよう、ゆとりのある幅にしています */
.gbx__figure{
  flex:0 0 168px;
  min-width:0;
  max-width:100%;
  margin:0;
  text-align:center;
}
.gbx__figBox{
  display:block;
  width:100%;
  max-width:100%;
  padding:6px;
  border:1px solid var(--gbx-line2);
  border-radius:8px;
  background:#FFFDF8;
  overflow:hidden;
}
.gbx__figBox:empty,
.gbx__figBox[hidden],
.gbx__figure[hidden]{
  display:none !important;
}
.gbx__figBox svg,
.gbx__figBox img{
  display:block;width:100%;height:auto;
}
.gbx__figCap{
  margin-top:6px;
  font-size:16px;line-height:1.45;
  color:var(--gbx-accent-dark);
  white-space:pre-line;   /* サイズ表記を改行して出すために使います */
}

/* ---- 画像そのものを「あり／なし」の切替ボタンにする ---------------- */
.gbx__figBtn{
  display:block;width:100%;
  margin:0;padding:0;
  border:0;background:none;
  font:inherit;color:inherit;text-align:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gbx__figBtn .gbx__figBox{
  transition:border-color .18s ease, box-shadow .18s ease;
}
.gbx__figBtn:hover .gbx__figBox{
  border-color:var(--gbx-accent);
  box-shadow:0 0 0 3px rgba(240,146,31,.16);
}
.gbx__figBtn:focus-visible{outline:none;}
.gbx__figBtn:focus-visible .gbx__figBox{
  border-color:var(--gbx-accent);
  box-shadow:0 0 0 3px #7EB6E8;
}
.gbx__figBtn:active .gbx__figBox{transform:scale(.985);}

/* 「ご利用中／ご利用なし」の表示 */
.gbx__figState{
  display:block;
  margin-top:6px;
  padding:5px 8px;
  border-radius:999px;
  background:#F2F1ED;
  color:#7C7768;
  font-size:15px;font-weight:700;line-height:1.4;
}
.gbx__figBtn.is-on .gbx__figState{
  background:var(--gbx-accent);
  color:var(--gbx-on-accent);
}

/* 「なし」のときに画像の代わりに出す案内 */
.gbx__figOff{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:104px;
  padding:14px 8px;
  border:2px dashed #E0D8C6;
  border-radius:6px;
  background:#FCFAF5;
  color:var(--gbx-ink2);
}
.gbx__figBtn:hover .gbx__figOff{
  border-color:var(--gbx-accent);
  background:#FFF8EC;
  color:var(--gbx-accent-dark);
}
.gbx__figOffIcon{
  font-size:26px;font-weight:700;line-height:1;
  color:var(--gbx-accent);
}
.gbx__figOffText{
  font-size:16px;font-weight:700;line-height:1.45;
}

/* 包装もほかの項目と同じく、プルダウンとイメージを並べます */
/* ---- 画像で選ぶ項目（包装・メッセージカード・紙袋）----------------
   イメージを中央に置き、入力欄はそのすぐ下に並べます。 */
.gbx__sec--wrap .gbx__body,
.gbx__sec--card .gbx__body,
.gbx__sec--bag  .gbx__body{
  flex-direction:column;
  align-items:center;
}
.gbx__sec--wrap .gbx__figure,
.gbx__sec--card .gbx__figure,
.gbx__sec--bag  .gbx__figure{
  order:-1;                    /* 入力欄より上に出します */
  flex:none;
  width:100%;
  max-width:230px;
  margin:0 auto 14px;
}
.gbx__sec--wrap .gbx__main,
.gbx__sec--card .gbx__main,
.gbx__sec--bag  .gbx__main{
  width:100%;
}
/* 「ご利用なし」のあいだは、入力欄を出しません */
.gbx__sec.is-off .gbx__fields{display:none;}
/* 入力欄が消えたぶん、イメージの下の余白を詰めます */
.gbx__sec.is-off .gbx__figure{margin-bottom:0;}

/* 熨斗は短冊なので、絵そのものは細めにします（説明文の幅は保ちます） */
.gbx__sec--noshi .gbx__figBox{max-width:90px;margin:0 auto;}
/* 仏事用の掛け紙は横に広いので、短冊より大きく表示します */
.gbx__sec--noshi.is-kakegami .gbx__figure{flex-basis:196px;}
.gbx__sec--noshi.is-kakegami .gbx__figBox{max-width:none;}
/* 紙袋も縦長なので、同じように絵だけ小さめにします */
.gbx__sec--bag .gbx__figBox{max-width:140px;margin:0 auto;}

/* ---- 包装の横並びボタン ---- */
.gbx__dd--choices{position:relative;}
.gbx .gbx__nativeSelect{
  position:absolute !important;
  width:1px !important;height:1px !important;
  margin:-1px !important;padding:0 !important;border:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}
.gbx__choices{
  display:flex;
  align-items:stretch;
  gap:8px;
  width:100%;
}
.gbx__choice{
  display:block;
  flex:1 1 0;
  min-width:0;
  min-height:54px;
  margin:0;
  padding:10px 8px;
  border:2px solid var(--gbx-line);
  border-radius:8px;
  background:#FFFDF8;
  color:var(--gbx-accent-dark);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  text-align:center;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.gbx__choice:hover{background:#FFF1DA;}
.gbx__choice.is-on{
  border-color:var(--gbx-accent);
  background:var(--gbx-accent);
  color:var(--gbx-on-accent);
}
.gbx__choice:focus-visible{outline:3px solid #7EB6E8;outline-offset:2px;}

/* ---- futureshopから移してきた行 ---- */
/* 項目名は、うすいグレーの帯にして入力欄と対にします */
.gbx__dt{
  margin:0 0 6px;
  padding:7px 10px;
  border-radius:4px;
  background:#F2F1ED;
  font-size:16px;font-weight:500;line-height:1.5;
  color:#5F5A4E;
}
.gbx__dt + .gbx__dd{margin-bottom:12px;}
.gbx__dd{margin:0 0 12px;}
.gbx .gbx__dd{padding:0;}
.gbx__dd:last-child{margin-bottom:12px;}

/* 見出し帯と同じ文言のラベルは、重複するので隠します（読み上げには残ります） */
.gbx__dt--hidden,
/* 画像クリックで選ぶ項目（包装・メッセージカードの有無・紙袋）は、
   プルダウンを隠します。ご注文時に送信されるよう、消さずに残しています。 */
.gbx__dd--hidden{
  position:absolute !important;width:1px !important;height:1px !important;
  margin:-1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ボタンで操作する行（包装）は隠しておきます。
   ご注文時に送信されるよう、消さずに残しています。 */
.gbx__fields--quiet{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* 移した行の中の入力欄を、この枠の中でも見やすくします。
   futureshop側の余白・Flex・overflow指定が混ざらないようにリセットします。 */
.gbx .fs-c-productSelection__field{
  display:block;
  width:100%;
  min-width:0;
}
.gbx .fs-c-dropdown{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
  flex:1 1 auto;
  line-height:normal;
  background:transparent;
}
.gbx .fs-c-dropdown__menu,
.gbx select,
.gbx input[type="text"],
.gbx textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:10px 12px;
  border:1px solid #CFC7B4;
  border-radius:6px;
  background:#fff;
  font-family:inherit;font-size:16px;line-height:1.5;
  color:var(--gbx-ink);
}
.gbx .fs-c-dropdown__menu,
.gbx select{padding-right:34px;appearance:none;-webkit-appearance:none;}
.gbx textarea{min-height:76px;resize:vertical;}
.gbx .fs-c-dropdown::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:50% !important;right:13px !important;bottom:auto !important;left:auto !important;
  width:0 !important;height:0 !important;
  /* 下向きの三角。下辺を0にすると箱の高さが5pxちょうどになるので、
     margin-top を高さの半分（-2.5px）にすれば上下の中央にぴたりと合います。
     （下辺を5px残すと箱が10pxになり、0.5pxぶん上にずれます） */
  margin:-2.5px 0 0 !important;
  padding:0 !important;
  border:5px solid transparent !important;
  border-bottom-width:0 !important;
  border-top-color:#8A8272 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-size:0 !important;
  line-height:0 !important;
  transform:none !important;
  opacity:1 !important;
  z-index:1;
  pointer-events:none !important;
}
.gbx select:focus,
.gbx input[type="text"]:focus,
.gbx textarea:focus{
  outline:3px solid #7EB6E8;outline-offset:1px;border-color:var(--gbx-accent);
}

/* ---- 自宅用（包装なし）を選んでいるとき ----
   熨斗・メッセージカード・紙袋は、お選びいただけない状態にします。 */
.gbx__sec.is-locked::before{
  content:"「自宅用」を選択中のため、こちらはご利用いただけません。";
  display:block;
  margin:0 0 12px;
  padding:9px 12px;
  border:1px solid #E3DED0;
  border-radius:6px;
  background:#F7F5EF;
  font-size:16px;font-weight:700;line-height:1.55;
  color:var(--gbx-ink2);
}
.gbx__sec.is-locked .gbx__secTitle{background:#CFC8B8;}
.gbx__sec.is-locked .gbx__secTitle .fs-c-requiredMark{color:#F2EEE4;}
.gbx__sec.is-locked .gbx__figure{display:none;}
.gbx__sec.is-locked .gbx__dt{background:#F5F4F1;color:#9A948A;}
.gbx__sec.is-locked .gbx__fieldNote{color:#A8A296;}
.gbx__sec.is-locked select,
.gbx__sec.is-locked input,
.gbx__sec.is-locked textarea,
.gbx__sec.is-locked .fs-c-dropdown{
  pointer-events:none;
  background:#F2F1ED;
  color:#9A948A;
  border-color:#DFDACD;
}
.gbx__sec.is-locked .fs-c-dropdown::after{border-top-color:#BDB7AA !important;}

/* ---- 下の注意書き ---- */
.gbx__note{
  margin:14px 14px 0;
  font-size:10px;line-height:1.65;
  color:var(--gbx-ink2);
}

/* ---- 行を全部移して空になった、元の選択欄 ----------------------------
   display:none にはしません。
   カート追従ボタン（cart-float-button.js）の「選択内容を変更する」は
   .fs-c-productSelection の位置までスクロールする作りのため、
   display:none にすると位置が取得できず（すべて0になり）、
   ボタンを押しても動かなくなってしまいます。
   高さ0で「場所だけ」残し、見た目の余白は出さないようにします。
   ※ この中にはfutureshopの productOptions[N].id（送信用の隠し項目）が
     入っているので、要素ごと消してはいけません。
   ---------------------------------------------------------------------- */
.fs-c-productSelection.gbx-emptied{
  display:block;
  height:0;min-height:0;
  margin:0;padding:0;border:0;
  overflow:hidden;
}
/* 「選択内容を変更する」で強調表示されたとき、すぐ下のパーツを光らせます */
.fs-c-productSelection.gbx-emptied.ino-fc-highlight + .gbx{
  animation:gbxHighlight 3.4s ease-out 1;
}
@keyframes gbxHighlight{
  0%,100%{box-shadow:0 0 0 0 rgba(240,146,31,0);}
  10%,60%{box-shadow:0 0 0 4px rgba(240,146,31,.45);}
}

/* ---- 幅がせまいとき（スマートフォンなど） ----------------------------
   横に並べるとせまくなるので、縦に積みます。
   このとき、イメージは見出し（gbx__secTitle）のすぐ下に置き、
   入力欄はその下にします。

   切り替える条件は次の2つで、どちらか一方でも当てはまれば縦積みです。
     ・画面の横幅が 532px 以下のとき
     ・このパーツ自身の横幅が 532px 以下のとき
       （画面は広くても、細い段組みの中に置かれた場合に効きます）
   ---------------------------------------------------------------------- */

/* 1) 画面の横幅で切り替え */
@media (max-width: 532px){
  .gbx__body{flex-direction:column;align-items:stretch;}
  .gbx__main{width:100%;max-width:100%;}
  .gbx__body > .gbx__figure{
    order:-1;                 /* 入力欄より先に＝見出しのすぐ下に出します */
    flex:0 0 auto !important;
    width:100%;height:auto;min-height:0;max-width:230px;
    margin:0 auto 14px;
  }
  .gbx__sec--noshi .gbx__figure{max-width:170px;}
  .gbx__sec--noshi.is-kakegami .gbx__figure{max-width:230px;}
  /* 「自宅用なのでギフト包装をしない★」が1行に収まるようにします */
  .gbx__choice{padding:10px 8px;}
}

/* 2) パーツ自身の横幅で切り替え（内容は上と同じです） */
@container (max-width: 532px){
  .gbx__body{flex-direction:column;align-items:stretch;}
  .gbx__main{width:100%;max-width:100%;}
  .gbx__body > .gbx__figure{
    order:-1;
    flex:0 0 auto !important;
    width:100%;height:auto;min-height:0;max-width:230px;
    margin:0 auto 14px;
  }
  .gbx__sec--noshi .gbx__figure{max-width:170px;}
  .gbx__sec--noshi.is-kakegami .gbx__figure{max-width:230px;}
  .gbx__choice{padding:10px 8px;}
}