@charset "utf-8";
/* ============================================================================
   参加枠セレクト　【みかんピング（イベントチケット）商品ページ用】
   event-blocks.js とセットで使います。

   　STEP1  大人・子供　　（お申し込み内容をご選択ください。）
   　STEP2  日にち　　　　（10月17日／10月18日）
   　STEP3  時間　　　　　（9:30／10:20／…）

   生果（みかん）用の delivery-blocks.css とは別のファイルです。
   class 名も fsev- で始まるので、混ざっても影響し合いません。
   ============================================================================ */

.fsev {
  /* マウスオーバー・選択中・フォーカス枠は、すべてこの色にそろえています */
  --fsev-orange:      #f08300;
  --fsev-orange-dark: #d06f00;
  --fsev-orange-soft: #fff1dd;
  --fsev-ink:         #3b342c;
  --fsev-ink-soft:    #8b8177;
  --fsev-line:        #e8e1d6;
  --fsev-paper:       #ffffff;
  --fsev-sun:         #d4574a;
  --fsev-sat:         #3f7fb5;
  --fsev-closed-bg:   #faf9f7;
  --fsev-closed-line: #ded7cd;
  --fsev-closed-ink:  #a09589;

  /* 外枠なし・余白なしで、商品ページにそのまま馴染ませます */
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fsev-ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* 「画面の幅」ではなく「この欄自体の幅」で中身を調整するための指定。
     商品ページのカート欄は、画面が広いときほど細くなる（312px前後）ためです。
     未対応のブラウザでは、下のほうの「画面幅」の指定が効きます。 */
  container-type: inline-size;
  container-name: fsevbox;
}

.fsev *,
.fsev *::before,
.fsev *::after { box-sizing: border-box; }

/* ---------- 見出し ---------- */

.fsev__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 0 0 9px;
  border-bottom: 1px dashed var(--fsev-line);
}

/* STEP1 / STEP2 の丸バッジ */
.fsev__step {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fsev-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.fsev__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

.fsev__current {
  flex: 1 1 100%;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fsev-orange-soft);
  color: var(--fsev-orange-dark);
  font-size: 16px;
  font-weight: 700;
}

.fsev__current.is-empty {
  background: #f4f2ee;
  color: var(--fsev-ink-soft);
  font-weight: 400;
}

/* ---------- 小見出し（日にち／時間） ---------- */

.fsev__sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: var(--fsev-ink);
  font-size: 12px;
  font-weight: 700;
}

.fsev__sub + * { margin-bottom: 12px; }

.fsev__subNo {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fsev-orange-soft);
  color: var(--fsev-orange-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ============================================================================
   STEP1　大人・子供
   ============================================================================ */

.fsev__tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fsev__ticket {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 10px;
  border: 1px solid var(--fsev-line);
  border-radius: 10px;
  background: var(--fsev-paper);
  color: var(--fsev-ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.fsev__ticket:hover:not(:disabled),
.fsev__ticket.is-hover:not(:disabled) {
  border-color: var(--fsev-orange);
  background: var(--fsev-orange-soft);
  color: var(--fsev-ink);
}

.fsev__ticket:focus-visible {
  outline: 2px solid var(--fsev-orange);
  outline-offset: 2px;
}

/* 選択中は、マウスを乗せてもオレンジ地・白文字のままにします
   （淡い背景に白文字が重なって読めなくなるのを防ぐため） */
.fsev__ticket.is-selected,
.fsev__ticket.is-selected:hover:not(:disabled) {
  border-color: var(--fsev-orange);
  background: var(--fsev-orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(240, 131, 0, .28);
}

.fsev__ticketName {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.fsev__ticketNote {
  display: block;
  margin-top: 1px;
  color: var(--fsev-ink-soft);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fsev__ticketPrice {
  display: block;
  margin-top: 4px;
  color: var(--fsev-orange-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.fsev__ticket.is-selected .fsev__ticketNote  { color: rgba(255, 255, 255, .9); }
.fsev__ticket.is-selected .fsev__ticketPrice { color: #fff; }

.fsev__ticketState {
  display: block;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #ece7e1;
  color: #8b8177;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fsev__ticketState.is-hidden { display: none; }

.fsev__ticket:disabled {
  border-style: dashed;
  border-color: var(--fsev-closed-line);
  background: var(--fsev-closed-bg);
  color: var(--fsev-closed-ink);
  cursor: not-allowed;
}

.fsev__ticket:disabled .fsev__ticketName  { text-decoration: line-through; }
.fsev__ticket:disabled .fsev__ticketPrice { color: var(--fsev-closed-ink); }

/* ============================================================================
   STEP2　日にち
   ============================================================================ */

.fsev__days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.fsev__day {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 8px;
  border: 1px solid var(--fsev-line);
  border-radius: 10px;
  background: var(--fsev-paper);
  color: var(--fsev-ink);
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.fsev__day:hover:not(:disabled) {
  border-color: var(--fsev-orange);
  background: var(--fsev-orange-soft);
  color: var(--fsev-ink);
}

.fsev__day:focus-visible {
  outline: 2px solid var(--fsev-orange);
  outline-offset: 2px;
}

/* 選んでいる日にち */
.fsev__day.is-active,
.fsev__day.is-active:hover:not(:disabled) {
  border-color: var(--fsev-orange);
  background: var(--fsev-orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(240, 131, 0, .28);
}

.fsev__dayMonth {
  display: block;
  color: var(--fsev-ink-soft);
  font-size: 10px;
  font-weight: 700;
}

.fsev__dayNum {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.fsev__dayUnit {
  font-size: 11px;
  font-weight: 700;
}

.fsev__dayWeek {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 700;
}

.fsev__dayWeek.is-sun { color: var(--fsev-sun); }
.fsev__dayWeek.is-sat { color: var(--fsev-sat); }

.fsev__day.is-active .fsev__dayMonth,
.fsev__day.is-active .fsev__dayWeek { color: rgba(255, 255, 255, .92); }

.fsev__dayState {
  display: block;
  margin-top: 4px;
  color: var(--fsev-ink-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fsev__day.is-active .fsev__dayState { color: rgba(255, 255, 255, .92); }

.fsev__day:disabled {
  border-style: dashed;
  border-color: var(--fsev-closed-line);
  background: var(--fsev-closed-bg);
  color: var(--fsev-closed-ink);
  cursor: not-allowed;
}

.fsev__day:disabled .fsev__dayMonth,
.fsev__day:disabled .fsev__dayWeek,
.fsev__day:disabled .fsev__dayState { color: var(--fsev-closed-ink); }

.fsev__day:disabled .fsev__dayNum { text-decoration: line-through; }

/* ============================================================================
   STEP3　時間
   ============================================================================ */

/* 時間は縦に1枠ずつ並べます（1行に1つ） */
.fsev__times {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fsev__time {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--fsev-line);
  border-radius: 9px;
  background: var(--fsev-paper);
  color: var(--fsev-ink);
  font-family: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.fsev__time.is-hidden { display: none; }

.fsev__time:hover:not(:disabled),
.fsev__time.is-hover:not(:disabled) {
  border-color: var(--fsev-orange);
  background: var(--fsev-orange-soft);
  color: var(--fsev-ink);
}

.fsev__time:focus-visible {
  outline: 2px solid var(--fsev-orange);
  outline-offset: 2px;
}

.fsev__time.is-selected,
.fsev__time.is-selected:hover:not(:disabled) {
  border-color: var(--fsev-orange);
  background: var(--fsev-orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(240, 131, 0, .28);
}

.fsev__timeClock {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.fsev__timeSuffix {
  flex: 0 0 auto;
  color: var(--fsev-ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.fsev__time.is-selected .fsev__timeSuffix { color: rgba(255, 255, 255, .92); }

/* 「残り○名」「受付を締め切りました。」は右端にそろえます */
.fsev__timeState {
  flex: 0 1 auto;
  margin-left: auto;
  padding-left: 6px;
  color: var(--fsev-ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.fsev__timeState:empty { display: none; }

/* 残りわずかのときだけ、色を変えます */
.fsev__timeState.is-few { color: var(--fsev-sun); }

.fsev__time.is-selected .fsev__timeState { color: rgba(255, 255, 255, .92); }

.fsev__time:disabled {
  border-style: dashed;
  border-color: var(--fsev-closed-line);
  background: var(--fsev-closed-bg);
  color: var(--fsev-closed-ink);
  cursor: not-allowed;
}

.fsev__time:disabled .fsev__timeClock  { text-decoration: line-through; }

.fsev__time:disabled .fsev__timeSuffix,
.fsev__time:disabled .fsev__timeState  { color: var(--fsev-closed-ink); text-decoration: none; }

/* その日の枠がひとつも無いとき（ふつうは出ません） */
.fsev__empty {
  padding: 12px;
  border: 1px dashed var(--fsev-closed-line);
  border-radius: 9px;
  background: var(--fsev-closed-bg);
  color: var(--fsev-ink-soft);
  font-size: 12px;
  text-align: center;
}

.fsev__empty.is-hidden { display: none; }

/* ---------- 足もと ---------- */

.fsev__foot {
  margin-top: 10px;
  text-align: right;
}

.fsev__toggle {
  margin: 0;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--fsev-ink-soft);
  font-family: inherit;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.fsev__toggle:hover { color: var(--fsev-orange); }

/* ============================================================================
   欄が狭いとき（パソコンの2カラム表示＝312px前後）
   ============================================================================ */

@container fsevbox (max-width: 340px) {
  .fsev__times { gap: 6px; }
  .fsev__time  { min-height: 44px; padding: 9px 10px; }
  .fsev__timeClock { font-size: 20px; }
  .fsev__timeState { font-size: 12px; }

  .fsev__days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsev__dayNum { font-size: 20px; }

  .fsev__ticketName  { font-size: 14px; }
  .fsev__ticketPrice { font-size: 12px; }
  .fsev__title { font-size: 13px; }
}

/* とても狭いときは、時刻の下に受付状況を折り返します */
@container fsevbox (max-width: 260px) {
  .fsev__time      { flex-wrap: wrap; }
  .fsev__timeState { flex-basis: 100%; margin-left: 0; padding-left: 0; text-align: left; }
  .fsev__tickets   { grid-template-columns: 1fr; }
}

/* container query に未対応のブラウザ向け（画面幅で同じ調整をします） */
@supports not (container-type: inline-size) {
  @media screen and (min-width: 1199px) {
    .fsev__times { gap: 6px; }
    .fsev__time  { min-height: 44px; padding: 9px 10px; }
    .fsev__timeClock { font-size: 15px; }
    .fsev__timeState { font-size: 10px; }
    .fsev__days  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fsev__dayNum { font-size: 20px; }
    .fsev__title { font-size: 13px; }
  }
}

/* ---------- スマートフォン ---------- */

@media screen and (max-width: 599px) {
  .fsev__head  { gap: 5px 8px; }
  .fsev__title { font-size: 13px; }
  .fsev__times { gap: 6px; }
  .fsev__days  { gap: 6px; }
}

/* ============================================================================
   もとのバリエーション欄
   消さずに隠しています。読み上げソフトやキーボード操作からも使えるよう、
   画面から見えない位置に置いているだけです。
   ============================================================================ */

.fsev-src > .fs-c-variationPanelList,
.fsev-src > .fs-c-variationRadioList,
.fsev-src > .fs-c-variationSelect,
.fsev-src > .fs-c-variationCart {
  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;
}

/* 「通常のリストで選ぶ」を押したとき */
.fsev-src--open > .fs-c-variationPanelList,
.fsev-src--open > .fs-c-variationRadioList,
.fsev-src--open > .fs-c-variationSelect,
.fsev-src--open > .fs-c-variationCart {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  .fsev__ticket,
  .fsev__day,
  .fsev__time { transition: none; }
}