/* =====================================================================
   Fandam テンプレート — 共有コンポーネント
   色はoklchで定義。フォントはシステムフォント＋ウェイトコントラストで格を出す。
   WFフェーズ: グレースケール + 機能アクセント2色のみ。
   ===================================================================== */

/* ---------- 0. トークン ---------- */
:root{
  /* color — oklch */
  --c-bg:         oklch(99% 0.004 80);       /* ほぼ白・微かに暖色 */
  --c-ink:        oklch(18% 0.015 265);      /* 主テキスト・微青み */
  --c-ink-2:      oklch(50% 0.012 265);      /* 副テキスト */
  --c-ink-3:      oklch(68% 0.008 265);      /* 補助テキスト */
  --c-line:       oklch(92% 0.006 265);      /* 細い境界 */
  --c-line-2:     oklch(85% 0.008 265);      /* 強い境界 */
  --c-fill:       oklch(96.5% 0.004 80);     /* 面・微暖色 */
  --c-fill-2:     oklch(91% 0.007 265);      /* 強めの面 */
  --c-primary:    oklch(18% 0.015 265);      /* CTA（WFはインクと同色。Phase5でIP色へ） */
  --c-on-primary: oklch(99% 0.004 80);
  --c-urgent:     oklch(48% 0.18 32);        /* 締切・残りわずか */
  --c-urgent-bg:  oklch(97% 0.035 60);
  --c-urgent-line:oklch(86% 0.07 52);

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* PC 共通カラム（中央に1本・中身は左揃え。フルブリードはヒーロー等のみ） */
  --pc-shell-max:1100px;
  --pc-shell-pad:48px;

  /* radius — フレンドリー */
  --r1:8px; --r2:12px; --r3:20px; --r-pill:999px;

  /* type scale */
  --t-xs:11px; --t-sm:13px; --t-md:14px; --t-lg:17px; --t-xl:22px; --t-2xl:28px;

  /* weight */
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; --w-black:800;

  /* elevation */
  --sh-1: 0 1px 3px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04);
  --sh-2: 0 4px 14px oklch(0% 0 0 / 0.09), 0 2px 4px oklch(0% 0 0 / 0.05);
  --sh-3: 0 12px 36px oklch(0% 0 0 / 0.13), 0 4px 10px oklch(0% 0 0 / 0.07);
}

*{box-sizing:border-box;}
.ui{
  font-family:
    "Hiragino Kaku Gothic ProN","Hiragino Sans",
    "YuGothic","Yu Gothic",
    "Noto Sans JP",
    -apple-system,sans-serif;
  color:var(--c-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 1. アプリバー ---------- */
.appbar{
  display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s4);height:56px;
  background:oklch(99% 0.004 80 / 0.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--c-line);
  position:sticky;top:0;z-index:20;
}
.appbar__logo{
  flex:1;min-width:0;
  font-weight:var(--w-black);font-size:var(--t-lg);letter-spacing:.04em;
}
.appbar__logo small{
  display:block;font-weight:var(--w-medium);font-size:9px;
  color:var(--c-ink-3);letter-spacing:.14em;margin-top:1px;
}
/* アクションボタンのグループ（カート・ハンバーガー） */
.appbar__actions{display:flex;gap:var(--s2);flex:0 0 auto;margin-left:auto;}

.iconbtn{
  width:36px;height:36px;
  border:1px solid var(--c-line-2);border-radius:var(--r1);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--c-ink-2);background:var(--c-bg);
  position:relative;flex:0 0 auto;cursor:pointer;
}
.badge{
  position:absolute;top:-7px;right:-7px;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--c-primary);color:var(--c-on-primary);
  font-size:9px;font-weight:var(--w-black);
  border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--c-bg);
}

/* ---------- 1b. セクションタブ（追従） ---------- */
.sectabs{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  background:var(--c-bg);border-bottom:1px solid var(--c-line);
  position:sticky;z-index:18;
  -webkit-overflow-scrolling:touch;
}
.sectabs::-webkit-scrollbar{display:none;}
.sectab{
  flex:0 0 auto;padding:var(--s3) var(--s4);
  font-size:var(--t-sm);font-weight:var(--w-bold);
  color:var(--c-ink-3);white-space:nowrap;
  border-bottom:2px solid transparent;position:relative;cursor:pointer;
}
.sectab--active{color:var(--c-ink);border-bottom-color:var(--c-ink);}
.sectab__dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--c-urgent);margin-left:4px;vertical-align:middle;
  margin-bottom:1px;
}

/* ---------- 1c. ヒーロー ---------- */
.hero{
  position:relative;aspect-ratio:16/10;
  background:
    linear-gradient(180deg,oklch(0% 0 0 / 0) 40%,oklch(0% 0 0 / .5) 100%),
    repeating-linear-gradient(
      -45deg,
      oklch(88% 0.007 265) 0,
      oklch(88% 0.007 265) 6px,
      oklch(92% 0.005 265) 6px,
      oklch(92% 0.005 265) 12px
    );
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__tag{
  position:absolute;top:var(--s4);left:var(--s4);
  font-size:var(--t-xs);font-weight:var(--w-bold);
  background:oklch(99% 0.004 80 / .92);border:1px solid var(--c-line);
  padding:3px 10px;border-radius:var(--r1);color:var(--c-ink-2);
  letter-spacing:.06em;
}
.hero__title{
  color:#fff;font-size:var(--t-xl);font-weight:var(--w-black);
  line-height:1.25;padding:0 var(--s4);
  text-shadow:0 2px 6px oklch(0% 0 0 / .4);
}
.hero__sub{
  color:oklch(100% 0 0 / .88);font-size:var(--t-sm);
  padding:3px var(--s4) 0;
  text-shadow:0 1px 4px oklch(0% 0 0 / .4);
}
.hero__cta{margin:var(--s3) var(--s4) var(--s5);}
.hero__dots{
  position:absolute;bottom:var(--s3);left:50%;transform:translateX(-50%);
  display:flex;gap:5px;
}
.hero__dots i{width:6px;height:6px;border-radius:50%;background:oklch(100% 0 0 / .5);}
.hero__dots i.on{background:#fff;width:18px;border-radius:3px;}

/* ---------- 1d. セクション ---------- */
.section{padding:var(--s5) var(--s4) var(--s6);border-bottom:6px solid var(--c-fill);}
.section--tight{padding-bottom:var(--s4);}
.section__head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--s4);
}
.section__title{
  font-size:var(--t-lg);font-weight:var(--w-black);letter-spacing:.01em;
  display:flex;align-items:center;gap:var(--s2);
}
.section__title .auto{
  font-size:9px;font-weight:var(--w-bold);color:var(--c-ink-3);
  border:1px solid var(--c-line);padding:2px 7px;border-radius:var(--r1);
}
.section__more{font-size:var(--t-sm);color:var(--c-ink-2);font-weight:var(--w-bold);white-space:nowrap;}

/* ---------- 1e. レイアウト：横スクロール / グリッド ---------- */
.scroller{
  display:flex;gap:var(--s3);overflow-x:auto;scrollbar-width:none;
  margin:0 calc(var(--s4)*-1);padding:0 var(--s4) var(--s2);
  -webkit-overflow-scrolling:touch;
}
.scroller::-webkit-scrollbar{display:none;}
.grid{display:grid;gap:var(--s3);}
.grid--2col{grid-template-columns:1fr 1fr;}
.grid--3col{grid-template-columns:1fr 1fr 1fr;}

/* PC コンテンツカラム（中央に1本・中身は左揃え。フルブリードはヒーロー等のみ） */
.pc-shell{
  max-width:var(--pc-shell-max);
  margin:0 auto;
  padding-left:var(--pc-shell-pad);
  padding-right:var(--pc-shell-pad);
  width:100%;
  box-sizing:border-box;
}
/* shell 内の横スクロールはネガティブマージンでタイトル左端を崩さない */
.pc-shell .scroller{
  margin-left:0;margin-right:0;
  padding-left:0;padding-right:0;
}

/* ---------- 2. カード基底 ---------- */
.card{position:relative;background:var(--c-bg);}

/* 画像プレースホルダー：細い斜めストライプで「WFのPH」感を表現 */
.card__media{
  position:relative;aspect-ratio:1/1;
  border-radius:var(--r2);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--c-fill) 0, var(--c-fill) 5px,
      var(--c-fill-2) 5px, var(--c-fill-2) 10px
    );
  border:1px solid var(--c-line);overflow:hidden;
}
.card__media--wide{aspect-ratio:16/10;}

/* イベント/くじの種別タグは画像内に残す（イベント写真の上に乗るUI想定）*/
.card__badges{
  position:absolute;top:var(--s2);left:var(--s2);right:var(--s2);
  display:flex;flex-wrap:wrap;gap:4px;pointer-events:none;z-index:2;
}

/* カードのボディ：適切な余白で窮屈さを解消 */
.card__body{padding:var(--s3) var(--s1) var(--s2);}
/* くじ一覧は幅が広いので、グッズ小カード用の狭い左右余白だと足りない */
.card--kuji .card__body{padding:var(--s3) var(--s4) var(--s4);}

/* 商品タグ（card__bodyの中に入れる・画像に置かない） */
.card__tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:6px;}

.card__title{
  font-size:var(--t-sm);font-weight:var(--w-semibold);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__price{font-size:var(--t-md);font-weight:var(--w-black);margin-top:4px;}
.card__price small{font-size:var(--t-xs);font-weight:var(--w-semibold);color:var(--c-ink-2);}
.card__meta{font-size:var(--t-xs);color:var(--c-ink-2);margin-top:4px;line-height:1.5;}
/* くじはタイトル → 販売期間 → 価格。期間のあとに価格を少し離す */
.card--kuji .card__price{margin-top:8px;}

.card--soldout .card__media::after{
  content:"完売";position:absolute;inset:0;
  background:oklch(99% 0 0 / .72);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--w-black);color:var(--c-ink-2);font-size:var(--t-sm);
}

/* ---------- 2a. カードサイズバリアント（種類 × サイズ） ----------
   compact  … 密度高め。グッズのレールなど
   regular  … 標準の発見・プレビュー。ポータルのイベント／くじレールなど
   featured … 主役・一覧で選ばせる。ホーム／一覧のグリッド、大きめレール
   同じ種類 × 同じバリアントなら、どの画面でも同じ寸法。
   グリッド内ではセル幅に追従（固定幅はレール時のみ）。
   --------------------------------------------------------------- */
.card--compact,
.card--regular,
.card--featured{max-width:100%;box-sizing:border-box;}

/* レール（.scroller）内の固定幅 */
.scroller .card--compact{flex:0 0 136px;width:136px;}
.scroller .card--regular{flex:0 0 200px;width:200px;}
.scroller .card--featured{flex:0 0 240px;width:240px;}
.pc-shell .scroller .card--compact{flex-basis:152px;width:152px;}
.pc-shell .scroller .card--regular{flex-basis:220px;width:220px;}
.pc-shell .scroller .card--featured{flex-basis:260px;width:260px;}

/* グリッド内はセルに合わせて伸ばす（バリアント差は列数で出す） */
.pc-card-grid--2 > .card,
.pc-card-grid--4 > .card,
.grid--2col > .card,
.grid--4col > .card{
  flex:none;width:auto;min-width:0;
}

/* 旧 w-* はバリアントへのエイリアス（段階的削除用） */
.card.w-sm{flex:0 0 136px;}
.card.w-md{flex:0 0 200px;}
.card.w-lg{flex:0 0 240px;}
.pc-shell .scroller .card.w-sm{flex-basis:152px;}
.pc-shell .scroller .card.w-md{flex-basis:220px;}
.pc-shell .scroller .card.w-lg{flex-basis:260px;}

/* アーティストカード（ポータルピックアップ：低めメディアで縦を抑える） */
.card--artist{
  border:1px solid var(--c-line);border-radius:var(--r2);overflow:hidden;background:var(--c-bg);
}
.card--artist .card__media{
  aspect-ratio:2/1;border-radius:0;border:none;border-bottom:1px solid var(--c-line);
}
.card--artist .card__body{padding:10px 12px 12px;}
.card--artist .card__title{font-weight:var(--w-black);-webkit-line-clamp:1;}
.scroller .card--artist.card--regular{flex:0 0 180px;width:180px;}
.pc-shell .scroller .card--artist.card--regular{flex-basis:200px;width:200px;}

/* ポータル内アーティストセクションのレール */
.rail{margin-bottom:var(--s4);}
.rail:last-child{margin-bottom:0;}
.rail__label{
  font-size:11px;font-weight:var(--w-bold);color:var(--c-ink-3);
  letter-spacing:.06em;margin-bottom:var(--s2);
}
.section--artist-rail{padding-top:var(--s5);padding-bottom:var(--s2);}
.section--artist-rail .section__head{margin-bottom:var(--s3);}

/* ---------- 2b. くじ：残数プログレス ---------- */
.progress{margin-top:8px;}
.progress__bar{
  height:5px;border-radius:var(--r-pill);
  background:var(--c-fill-2);overflow:hidden;
}
.progress__bar i{display:block;height:100%;background:var(--c-ink);}
.progress__label{
  font-size:var(--t-xs);color:var(--c-ink-2);
  margin-top:4px;display:flex;justify-content:space-between;
}

/* ---------- 2c. ニュース項目 ---------- */
.newslist{display:flex;flex-direction:column;}
.newsitem{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s4) 0;border-bottom:1px solid var(--c-line);
}
.newsitem:last-child{border-bottom:0;}
.newsitem__thumb{
  flex:0 0 58px;height:58px;border-radius:var(--r2);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--c-fill) 0, var(--c-fill) 5px,
      var(--c-fill-2) 5px, var(--c-fill-2) 10px
    );
  border:1px solid var(--c-line);
}
.newsitem__body{flex:1;min-width:0;}
.newsitem__title{
  font-size:var(--t-sm);font-weight:var(--w-semibold);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.newsitem__date{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:5px;}

/* ---------- 2d. 誘導バナー ---------- */
.banner{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border:1px solid var(--c-line-2);border-radius:var(--r2);background:var(--c-fill);
  box-shadow:var(--sh-1);
}
.banner__icon{
  flex:0 0 44px;height:44px;border-radius:var(--r2);
  background:var(--c-bg);border:1px solid var(--c-line);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.banner__text{flex:1;min-width:0;}
.banner__text b{font-size:var(--t-md);font-weight:var(--w-bold);}
.banner__text span{display:block;font-size:var(--t-xs);color:var(--c-ink-2);margin-top:3px;}

/* ---------- 3. タグ / バッジ / カウントダウン ---------- */
.tag{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:var(--w-bold);line-height:1;
  padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--c-line-2);
  background:oklch(99% 0.004 80 / .96);color:var(--c-ink);
}
.tag--benefit{background:var(--c-ink);color:var(--c-on-primary);border-color:var(--c-ink);}
.tag--preorder,.tag--mto,.tag--lottery,.tag--members{background:var(--c-bg);}
.tag--type{background:oklch(18% 0.015 265 / .8);color:#fff;border-color:transparent;}
.countdown{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:var(--w-black);
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--c-urgent-bg);color:var(--c-urgent);border:1px solid var(--c-urgent-line);
}
.lock{
  position:absolute;inset:0;z-index:1;
  background:oklch(99% 0 0 / .55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--c-ink-2);
}

/* ---------- 4. ボタン / チップ ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:var(--t-sm);font-weight:var(--w-bold);
  padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;
}
.btn--primary{background:var(--c-primary);color:var(--c-on-primary);}
.btn--outline{background:transparent;color:var(--c-ink);border-color:var(--c-line-2);}
.btn--ghost{
  background:oklch(99% 0.004 80 / .9);color:var(--c-ink);
  border-color:var(--c-line-2);
}
.btn--block{width:100%;border-radius:var(--r2);padding:14px;}

.chiprow{
  display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  margin:0 calc(var(--s4)*-1);padding:0 var(--s4);
  -webkit-overflow-scrolling:touch;
}
.chiprow::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;font-size:var(--t-sm);font-weight:var(--w-bold);
  padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--c-line-2);background:var(--c-bg);color:var(--c-ink);
  white-space:nowrap;display:flex;align-items:center;gap:5px;cursor:pointer;
}
.chip--on{background:var(--c-ink);color:var(--c-on-primary);border-color:var(--c-ink);}

/* ---------- 1f. アクションバー（詳細画面の固定CTA） ---------- */
.actionbar{
  position:sticky;bottom:0;display:flex;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--c-bg);
  border-top:1px solid var(--c-line);
}

/* ---------- 1g. フッター ---------- */
.footer{padding:var(--s6) var(--s4) var(--s7);background:var(--c-bg);}
.footer__sns{display:flex;gap:var(--s3);margin-bottom:var(--s4);}
.footer__sns i{
  width:36px;height:36px;border-radius:var(--r2);
  border:1px solid var(--c-line-2);display:inline-block;
}
.footer__links{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:var(--t-sm);color:var(--c-ink-2);font-weight:var(--w-medium);
}
.footer__links span{cursor:pointer;}
.footer__legal{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:var(--s4);line-height:1.8;}

/* =====================================================================
   5. ナビゲーション詳細画面（バック付き）
   appbar に以下 modifier を追加するだけ。.appbar 自体は変えない。
   ===================================================================== */
.appbar__back{
  width:36px;height:36px;margin-left:calc(var(--s2)*-1);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;color:var(--c-ink);
  background:transparent;border:none;cursor:pointer;flex:0 0 auto;
}
/* タイトルを視覚的中央に。left/right が非対称でも absolute で補正 */
.appbar__title{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:15px;font-weight:var(--w-bold);color:var(--c-ink);
  white-space:nowrap;pointer-events:none;
}
/* PC 用グローバルヘッダー（バーは全幅、中身は pc-shell と同じ幅） */
.site-header{
  background:var(--c-bg);border-bottom:1px solid var(--c-line);
  position:sticky;top:0;z-index:20;
}
.site-header__inner{
  max-width:var(--pc-shell-max);
  margin:0 auto;
  padding:0 var(--pc-shell-pad);
  height:60px;width:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;
}
.site-header__logo{font-size:16px;font-weight:var(--w-black);letter-spacing:.04em;}
.site-header__nav{display:flex;gap:var(--s6);font-size:var(--t-sm);color:var(--c-ink-2);}
.site-header__nav span{cursor:pointer;}
.site-header__actions{display:flex;gap:var(--s3);align-items:center;}

/* =====================================================================
   6. 商品詳細
   ===================================================================== */
/* ヒーロー画像プレースホルダー */
.product-hero{
  width:100%;aspect-ratio:4/3;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--c-fill) 0,var(--c-fill) 8px,
      var(--c-fill-2) 8px,var(--c-fill-2) 16px
    );
}
/* サムネイル列 */
.product-gallery{
  display:flex;gap:var(--s2);padding:var(--s2) var(--s4) var(--s1);
  overflow-x:auto;scrollbar-width:none;
}
.product-gallery::-webkit-scrollbar{display:none;}
.product-gallery__thumb{
  flex:0 0 52px;height:52px;border-radius:var(--r1);
  border:1.5px solid transparent;cursor:pointer;
  background-image:repeating-linear-gradient(
    -45deg,var(--c-fill) 0,var(--c-fill) 5px,var(--c-fill-2) 5px,var(--c-fill-2) 10px
  );
  background-color:var(--c-fill);
}
.product-gallery__thumb.is-on{border-color:var(--c-ink);}
/* 本文パディング（actionbar 分の bottom 余白確保） */
.product-body{padding:var(--s2) var(--s4) 96px;}
/* PC 用 2カラム */
.product-body--pc{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);
  padding:var(--s6) var(--s6) var(--s7);max-width:960px;margin:0 auto;
}
.product-title{
  font-size:17px;font-weight:var(--w-black);color:var(--c-ink);
  line-height:1.35;padding:var(--s2) 0 var(--s1);letter-spacing:-.02em;
}
.product-title--lg{font-size:20px;}
.product-price{
  font-size:21px;font-weight:var(--w-black);color:var(--c-ink);
  display:flex;align-items:baseline;gap:5px;padding:2px 0;
}
.product-price--lg{font-size:25px;}
.product-price small{font-size:12px;font-weight:var(--w-medium);color:var(--c-ink-3);}
/* フィールドラベル（カラー・サイズ等の小見出し） */
.field-label{
  font-size:10.5px;font-weight:var(--w-bold);color:var(--c-ink-3);
  letter-spacing:.08em;text-transform:uppercase;
  padding:var(--s4) 0 var(--s2);
}

/* =====================================================================
   7. フォームUI — 選択・入力
   ===================================================================== */
/* オプション選択ボタン群（カラー・サイズ等） */
.opts{display:flex;flex-wrap:wrap;gap:var(--s2);padding-bottom:var(--s2);}
.opt{
  padding:6px 14px;border:1.5px solid var(--c-line-2);border-radius:var(--r-pill);
  font-size:13px;font-weight:var(--w-medium);color:var(--c-ink-2);cursor:pointer;
}
.opt.is-on{border-color:var(--c-ink);background:var(--c-ink);color:var(--c-on-primary);}
.opt.is-out{opacity:.32;text-decoration:line-through;pointer-events:none;}
/* 数量コントロール */
.qty-ctrl{
  display:flex;align-items:center;
  border:1.5px solid var(--c-line-2);border-radius:var(--r1);
  overflow:hidden;height:40px;flex:0 0 auto;
}
.qty-ctrl__btn{
  width:40px;height:40px;background:var(--c-fill);border:none;cursor:pointer;
  font-size:18px;color:var(--c-ink-2);
  display:flex;align-items:center;justify-content:center;
}
.qty-ctrl__val{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:var(--w-bold);
  border-left:1.5px solid var(--c-line-2);border-right:1.5px solid var(--c-line-2);
}
.qty-row{display:flex;align-items:center;gap:var(--s3);margin:var(--s2) 0;}
/* テキスト入力 */
.input{
  width:100%;padding:11px var(--s3);
  border:1.5px solid var(--c-line-2);border-radius:var(--r1);
  font-size:var(--t-md);color:var(--c-ink);
  background:var(--c-bg);outline:none;
  font-family:inherit;
}
.input:focus{border-color:var(--c-ink);}
.input-group{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s4);}
.input-group label{font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--c-ink-2);}

/* =====================================================================
   8. インフォメーションボックス
   ===================================================================== */
/* 特典ボックス */
.benefit-box{
  background:oklch(97% 0.025 80);border:1px solid oklch(88% 0.05 70);
  border-radius:var(--r2);padding:var(--s3) var(--s4);margin:var(--s2) 0;
}
.benefit-box__label{
  font-size:10.5px;font-weight:var(--w-bold);color:oklch(46% 0.12 52);
  letter-spacing:.03em;margin-bottom:var(--s1);
}
.benefit-box__text{font-size:12px;color:var(--c-ink-2);line-height:1.6;}
/* 告知ボックス（締切・応募条件等） */
.notice-box{
  background:var(--c-urgent-bg);border:1px solid var(--c-urgent-line);
  border-radius:var(--r2);padding:var(--s3) var(--s4);margin:var(--s2) 0;
  font-size:12.5px;color:var(--c-ink-2);line-height:1.6;
}
/* 商品情報リスト（dot bullet） */
.info-list{display:flex;flex-direction:column;gap:5px;padding:var(--s1) 0 var(--s3);}
.info-list__item{
  font-size:12px;color:var(--c-ink-3);line-height:1.6;
  display:flex;align-items:flex-start;gap:6px;
}
.info-list__item::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--c-ink-3);margin-top:6px;flex:0 0 auto;
}

/* =====================================================================
   7. 一覧画面共通：フィルターバー・グリッド・インタラクティブカード
   ===================================================================== */

/* フィルターバー */
.filter-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:var(--s3) 0 var(--s4);flex-wrap:wrap;
}
.filter-chips{display:flex;gap:var(--s2);flex-wrap:nowrap;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.filter-chip{
  display:inline-flex;align-items:center;height:30px;padding:0 var(--s3);
  border:1.5px solid var(--c-line-2);border-radius:999px;
  font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--c-ink-2);
  cursor:pointer;white-space:nowrap;transition:all .12s;background:var(--c-bg);
}
.filter-chip--active{
  border-color:var(--c-ink);background:var(--c-ink);
  color:#fff;font-weight:var(--w-bold);
}
.filter-sort{
  display:flex;align-items:center;gap:5px;
  font-size:var(--t-sm);color:var(--c-ink-2);cursor:pointer;white-space:nowrap;
  padding:4px var(--s2);border:1px solid var(--c-line-2);border-radius:var(--r1);
}

/* グリッド (PC向け) — pc-shell 内で幅いっぱい・左揃え */
.grid--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);width:100%;}
.grid--3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);width:100%;}
.grid--4col{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);width:100%;}
.grid--2col .card, .grid--3col .card, .grid--4col .card{flex:none;width:auto;}
.pc-card-grid--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;}
.pc-card-grid--4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;}
.pc-card-grid--2 .card,
.pc-card-grid--4 .card{flex:none;width:auto;min-width:0;}

/* PC セクション（横パディングはS-00で指定） */
.pc-section{padding-top:var(--s5);padding-bottom:var(--s6);}
.pc-section + .pc-section{border-top:1px solid var(--c-line);}

/* クリッカブルカード（hover feedback） */
.card--clickable{cursor:pointer;transition:transform .12s,box-shadow .12s;}
.card--clickable:hover{transform:translateY(-2px);box-shadow:0 6px 20px oklch(0% 0 0 / .08);}
/* 水平カード（filter restore時にdisplay:flexを保持するためクラスで管理） */
.card--row{display:flex;flex-direction:row;}

/* ニュースリスト（PC版：横型レイアウト） */
.newslist--pc{width:100%;}
.newslist--pc .newsitem{
  display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s4) 0;border-bottom:1px solid var(--c-line);
}
.newslist--pc .newsitem__thumb{
  flex:0 0 120px;height:80px;border-radius:var(--r1);
  background:repeating-linear-gradient(-45deg,var(--c-fill) 0,var(--c-fill) 6px,var(--c-bg) 6px,var(--c-bg) 12px);
}
.newslist--pc .newsitem__body{flex:1;min-width:0;}
.newslist--pc .newsitem__title{
  font-size:var(--t-md);font-weight:var(--w-semibold);line-height:1.5;
  margin-top:5px;color:var(--c-ink);
}
.newslist--pc .newsitem__date{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:4px;}

/* イベントカード（PC 2col用） */
.card--event-row{
  display:flex;gap:var(--s4);
  background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--r2);overflow:hidden;
  cursor:pointer;transition:box-shadow .12s;
}
.card--event-row:hover{box-shadow:0 4px 16px oklch(0% 0 0 / .07);}
.card--event-row .card__media{
  flex:0 0 160px;height:120px;border-radius:0;aspect-ratio:unset;
}
.card--event-row .card__body{flex:1;padding:var(--s3);}
.card--event-row .card__title{font-size:var(--t-md);margin-top:var(--s2);}
.card--event-row .card__meta{font-size:var(--t-xs);color:var(--c-ink-2);margin-top:4px;}
.card__footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:var(--s3);gap:var(--s2);
}

/* =====================================================================
   カート・チェックアウト コンポーネント
   ===================================================================== */

/* カートセクション（配送 / 会場受取のグループ枠） */
.cart-section{border-top:6px solid var(--c-fill);background:var(--c-bg);}
.cart-section__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--c-line);
}
.cart-section__title{font-size:var(--t-md);font-weight:var(--w-black);}
.cart-section__count{font-size:var(--t-xs);color:var(--c-ink-3);}

/* BOPIS締切アラート */
.cart-deadline{
  margin:var(--s3) var(--s4) 0;padding:var(--s2) var(--s3);
  background:var(--c-urgent-bg);border:1px solid var(--c-urgent-line);border-radius:var(--r1);
  font-size:var(--t-xs);color:var(--c-urgent);font-weight:var(--w-bold);
  display:flex;align-items:center;gap:5px;
}
.cart-event-label{
  padding:var(--s2) var(--s4) 0;
  font-size:var(--t-xs);color:var(--c-ink-2);
}

/* カートアイテム行 */
.cart-item{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s4);border-bottom:1px solid var(--c-line);
  background:var(--c-bg);
}
.cart-item__img{
  flex:0 0 68px;width:68px;height:68px;
  border-radius:var(--r2);
  background:repeating-linear-gradient(
    -45deg,var(--c-fill) 0,var(--c-fill) 5px,var(--c-fill-2) 5px,var(--c-fill-2) 10px
  );
  border:1px solid var(--c-line);overflow:hidden;
}
.cart-item__img img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-item__body{flex:1;min-width:0;}
.cart-item__tags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px;}
.cart-item__name{font-size:var(--t-sm);font-weight:var(--w-semibold);line-height:1.45;}
.cart-item__var{font-size:var(--t-xs);color:var(--c-ink-2);margin-top:2px;}
.cart-item__note{
  display:inline-block;margin-top:5px;
  font-size:10px;color:var(--c-ink-2);
  background:var(--c-fill);border-radius:var(--r1);padding:2px 7px;
}
.cart-item__foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s2);}
.cart-item__price{font-size:var(--t-md);font-weight:var(--w-black);}
.cart-item__del{
  font-size:var(--t-xs);color:var(--c-ink-3);cursor:pointer;
  text-decoration:underline;background:none;border:none;padding:0;margin-top:var(--s2);
  display:flex;align-items:center;gap:3px;
}

/* 数量ステッパー */
.stepper{
  display:flex;align-items:center;
  border:1px solid var(--c-line-2);border-radius:var(--r1);overflow:hidden;
}
.stepper__btn{
  width:32px;height:32px;background:var(--c-fill);
  border:none;font-size:17px;font-weight:300;color:var(--c-ink-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.stepper__btn:active{background:var(--c-fill-2);}
.stepper__val{
  min-width:36px;height:32px;background:var(--c-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-sm);font-weight:var(--w-bold);
  border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);
}

/* 特典リマインダー */
.cart-benefit{
  margin:var(--s3) var(--s4) 0;padding:10px 12px;
  background:oklch(97% 0.012 265);
  border:1px solid oklch(88% 0.04 265);border-radius:var(--r2);
  border-left:3px solid var(--c-ink);
}
.cart-benefit__title{font-size:11px;font-weight:var(--w-bold);color:var(--c-ink-2);}
.cart-benefit__text{font-size:11px;color:var(--c-ink-2);margin-top:3px;line-height:1.6;}

/* カートサマリー */
.cart-sum{
  margin:var(--s4);
  border:1px solid var(--c-line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);background:var(--c-fill);
}
.cart-sum__row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-sm);padding:5px 0;
}
.cart-sum__row + .cart-sum__row{border-top:1px solid var(--c-line);}
.cart-sum__row--total{
  font-size:var(--t-md);font-weight:var(--w-black);
  padding-top:var(--s3);margin-top:var(--s1);
  border-top:2px solid var(--c-line-2)!important;
}
.cart-sum__row--total span{font-size:var(--t-lg);}
.cart-sum__note{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:var(--s2);}

/* 送料無料まで（カート・購入・商品詳細） */
.ship-meter{margin-top:var(--s2);}
.ship-meter--flush{margin-top:0;}
.ship-meter--compact .ship-meter__msg{font-size:12px;}
.ship-meter--compact .ship-meter__msg em{font-size:13px;}
.ship-meter__msg{
  font-size:13px;font-weight:var(--w-black);line-height:1.35;
  margin-bottom:8px;color:var(--c-ink);
}
.ship-meter__msg em{
  font-style:normal;font-size:15px;letter-spacing:-.02em;
}
.ship-meter__track{
  height:8px;border-radius:var(--r-pill);
  background:var(--c-fill-2);overflow:hidden;
}
.ship-meter__fill{
  display:block;height:100%;width:0;
  background:var(--c-ink);border-radius:var(--r-pill);
}
.ship-meter__foot{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;margin-top:6px;
  font-size:11px;color:var(--c-ink-3);
}
.ship-meter__ship{font-weight:var(--w-bold);color:var(--c-ink-2);}
.ship-meter.is-free .ship-meter__ship{color:var(--c-ink);}
.cart-sum .ship-meter{margin-top:var(--s3);}

/* 詳細ページ：送料の金額 + 無料条件（カート合計は出さない） */
.ship-note{margin-top:var(--s2);}
.ship-note--flush{margin-top:0;}
.ship-note__fee{font-size:13px;font-weight:var(--w-black);color:var(--c-ink);line-height:1.4;}
.ship-note__free{font-size:12px;color:var(--c-ink-3);margin-top:4px;line-height:1.45;}

.cart-cta{padding:0 var(--s4) var(--s5);}

/* 空カート */
.cart-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--s7) var(--s4);gap:var(--s3);background:var(--c-bg);
}
.cart-empty__icon{font-size:48px;opacity:.25;}
.cart-empty__title{font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--c-ink-2);}
.cart-empty__sub{font-size:var(--t-sm);color:var(--c-ink-3);text-align:center;line-height:1.7;}
.cart-empty__actions{display:flex;flex-direction:column;gap:var(--s2);width:100%;margin-top:var(--s2);}

/* PC カートレイアウト（旧サイドパネル型 — 互換のため残す） */
.cart-pc{display:flex;gap:var(--s6);align-items:flex-start;padding:0 var(--s6) var(--s6);}
.cart-pc__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s4);}
.cart-pc__side{flex:0 0 300px;position:sticky;top:80px;}
.cart-pc__section{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r2);overflow:hidden;}
.cart-pc__sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--c-line);background:var(--c-fill);}
.cart-pc__summary{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);}

/* PC カート新レイアウト（セクション内CTA統一・サイドパネルなし） */
.cart-pc-wrap{max-width:860px;margin:0 auto;padding:0 var(--s6) var(--s6);display:flex;flex-direction:column;gap:var(--s4);}
.cart-pc-sect{background:var(--c-bg);border-radius:var(--r2);border:1px solid var(--c-line);overflow:hidden;}
.cart-pc-sect__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  padding:var(--s4) var(--s5) var(--s3);border-bottom:1px solid var(--c-line);
  background:var(--c-fill);
}
/* アイテム行：横並び（画像 | 情報 | 数量+価格+削除） */
.cart-pc-item{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--c-line);}
.cart-pc-item__img{width:80px;height:80px;border-radius:var(--r2);background:var(--c-fill);overflow:hidden;flex-shrink:0;}
.cart-pc-item__img img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-pc-item__body{flex:1;min-width:0;}
.cart-pc-item__name{font-size:var(--t-sm);font-weight:var(--w-bold);line-height:1.4;margin:var(--s1) 0;}
.cart-pc-item__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);flex-shrink:0;padding-top:2px;}
/* セクションフッター：小計（左） + CTAボタン（右） */
.cart-pc-sect__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding:var(--s4) var(--s5);background:var(--c-fill);border-top:1px solid var(--c-line);
}
.cart-pc-sect__sumcol{flex:1;display:flex;flex-direction:column;gap:4px;}
.cart-pc-sect__sumrow{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--c-ink-2);}
.cart-pc-sect__sumrow--total{
  font-size:var(--t-md);font-weight:var(--w-black);color:var(--c-ink);
  padding-top:var(--s2);border-top:1px solid var(--c-line);margin-top:var(--s2);
}
.cart-pc-sect__ctacol{flex-shrink:0;min-width:200px;}

/* =====================================================================
   チェックアウト コンポーネント（S-41 / S-43 / S-35 共通）
   ===================================================================== */

/* ステップインジケーター */
.checkout-steps{
  display:flex;align-items:center;gap:0;
  padding:var(--s3) var(--s4);background:var(--c-bg);
  border-bottom:1px solid var(--c-line);font-size:11px;
}
.checkout-steps__item{
  display:flex;align-items:center;gap:5px;color:var(--c-ink-3);
  white-space:nowrap;
}
.checkout-steps__item.is-done{color:var(--c-ink-2);}
.checkout-steps__item.is-current{color:var(--c-ink);font-weight:var(--w-bold);}
.checkout-steps__dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--c-fill-2);color:var(--c-ink-3);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:var(--w-bold);flex-shrink:0;
}
.checkout-steps__item.is-done .checkout-steps__dot{background:var(--c-ink-2);color:#fff;}
.checkout-steps__item.is-current .checkout-steps__dot{background:var(--c-ink);color:#fff;}
.checkout-steps__sep{width:20px;height:1px;background:var(--c-line-2);flex-shrink:0;}

/* チェックアウトセクション（折りたたみ可能） */
.co-sect{background:var(--c-bg);border-top:6px solid var(--c-fill);}
.co-sect__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s4) var(--s3);
}
.co-sect__title{font-size:var(--t-md);font-weight:var(--w-black);}
.co-sect__edit{
  font-size:var(--t-xs);color:var(--c-ink-2);
  background:none;border:1px solid var(--c-line-2);border-radius:var(--r-pill);
  padding:3px 10px;cursor:pointer;
}
.co-sect__body{padding:0 var(--s4) var(--s4);}

/* 保存済み選択行（住所・カード） */
.co-option{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--c-line);
  cursor:pointer;
}
.co-option:last-child{border-bottom:none;}
.co-option__radio{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--c-line-2);background:#fff;
  flex-shrink:0;margin-top:2px;position:relative;
}
.co-option__radio.is-selected{border-color:var(--c-ink);}
.co-option__radio.is-selected::after{
  content:'';position:absolute;inset:3px;
  border-radius:50%;background:var(--c-ink);
}
.co-option__body{flex:1;}
.co-option__label{font-size:var(--t-sm);font-weight:var(--w-semibold);}
.co-option__sub{font-size:var(--t-xs);color:var(--c-ink-2);margin-top:2px;line-height:1.6;}
.co-option__tag{
  display:inline-block;font-size:10px;font-weight:var(--w-bold);
  background:var(--c-ink);color:#fff;border-radius:var(--r1);
  padding:1px 6px;margin-left:6px;vertical-align:middle;
}
.co-option__add{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);color:var(--c-ink-2);font-size:var(--t-sm);
  cursor:pointer;border-top:1px dashed var(--c-line-2);
}

/* フォーム（住所・カード入力） */
.co-form{padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3);}
.co-form__row{display:flex;gap:var(--s2);}
.co-form__field{display:flex;flex-direction:column;gap:5px;flex:1;}
.co-form__label{font-size:11px;font-weight:var(--w-bold);color:var(--c-ink-2);letter-spacing:.04em;}
.co-form__label span{color:var(--c-urgent);margin-left:2px;}
.co-form__input{
  height:44px;border:1.5px solid var(--c-line-2);border-radius:var(--r2);
  padding:0 var(--s3);font-size:var(--t-sm);background:var(--c-bg);
  color:var(--c-ink);outline:none;
}
.co-form__input:focus{border-color:var(--c-ink);}
.co-form__input--filled{background:var(--c-fill);border-color:var(--c-line);}
.co-form__hint{font-size:10px;color:var(--c-ink-3);}
.co-form__save{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--t-xs);color:var(--c-ink-2);cursor:pointer;
}
.co-form__checkbox{
  width:16px;height:16px;border:1.5px solid var(--c-line-2);
  border-radius:4px;background:var(--c-ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.co-form__checkbox::after{content:'✓';font-size:10px;color:#fff;font-weight:700;}

/* カード入力（Stripe embed 想定プレースホルダー） */
.co-card-embed{
  margin:0 var(--s4) var(--s4);
  border:1.5px solid var(--c-line-2);border-radius:var(--r2);
  padding:var(--s4);background:var(--c-fill);
}
.co-card-embed__label{font-size:11px;color:var(--c-ink-3);margin-bottom:var(--s3);letter-spacing:.04em;font-weight:var(--w-bold);}
.co-card-embed__row{display:flex;gap:var(--s3);margin-top:var(--s2);}
.co-card-field{
  flex:1;height:44px;border:1.5px solid var(--c-line-2);
  border-radius:var(--r2);background:var(--c-bg);
  display:flex;align-items:center;padding:0 var(--s3);
  font-size:var(--t-sm);color:var(--c-ink-3);
}
.co-card-brand{display:flex;gap:var(--s2);margin-top:var(--s3);}
.co-card-brand__item{
  height:22px;padding:0 8px;border-radius:4px;
  background:var(--c-fill-2);border:1px solid var(--c-line);
  display:flex;align-items:center;font-size:10px;font-weight:var(--w-bold);color:var(--c-ink-3);
}

/* 注文商品コンパクト一覧 */
.co-items{padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3);}
.co-item{display:flex;align-items:center;gap:var(--s3);}
.co-item__img{
  width:52px;height:52px;border-radius:var(--r2);
  background:var(--c-fill-2);overflow:hidden;flex-shrink:0;border:1px solid var(--c-line);
}
.co-item__img img{width:100%;height:100%;object-fit:cover;}
.co-item__body{flex:1;min-width:0;}
.co-item__name{font-size:var(--t-xs);font-weight:var(--w-semibold);line-height:1.45;}
.co-item__sub{font-size:10px;color:var(--c-ink-3);margin-top:2px;}
.co-item__price{font-size:var(--t-sm);font-weight:var(--w-bold);flex-shrink:0;}

/* チェックアウト合計・注文CTA */
.co-total{
  margin:var(--s3) var(--s4) 0;
  border:1px solid var(--c-line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);background:var(--c-fill);
}
.co-total__row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-sm);padding:5px 0;
}
.co-total__row + .co-total__row{border-top:1px solid var(--c-line);}
.co-total__row--grand{
  font-size:var(--t-md);font-weight:var(--w-black);
  padding-top:var(--s3);margin-top:var(--s1);
  border-top:2px solid var(--c-line-2)!important;
}
.co-total__row--grand span{font-size:var(--t-lg);}
.co-legal{
  padding:var(--s3) var(--s4) var(--s2);
  font-size:10px;color:var(--c-ink-3);line-height:1.7;text-align:center;
}
.co-cta{padding:var(--s4) var(--s4) var(--s5);}

/* PC チェックアウト レイアウト */
.co-pc{max-width:920px;margin:0 auto;padding:0 var(--s6) var(--s6);display:flex;gap:var(--s6);align-items:flex-start;}
.co-pc__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;}
.co-pc__side{flex:0 0 300px;position:sticky;top:80px;display:flex;flex-direction:column;gap:var(--s3);}
.co-pc__card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r2);overflow:hidden;}
.co-pc__card .co-sect{border-top:none;}

/* 注文完了 */
.co-complete{
  display:flex;flex-direction:column;align-items:stretch;
  padding:var(--s5) var(--s4) var(--s5);gap:var(--s3);
  background:var(--c-bg);
}
.co-complete__icon{
  width:60px;height:60px;border-radius:50%;align-self:center;
  background:var(--c-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
}
.co-complete__title{font-size:var(--t-xl);font-weight:var(--w-black);text-align:center;}
.co-complete__sub{font-size:var(--t-sm);color:var(--c-ink-2);text-align:center;line-height:1.7;}
.co-complete__order{
  border:1px solid var(--c-line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);background:var(--c-fill);
}
.co-complete__order-row{
  display:flex;align-items:baseline;gap:var(--s3);
  font-size:var(--t-xs);color:var(--c-ink-2);padding:5px 0;
  border-bottom:1px solid var(--c-line);
}
.co-complete__order-row:last-child{border-bottom:none;}
.co-complete__order-row span{flex:0 0 auto;color:var(--c-ink-3);}
.co-complete__order-row b{flex:1;color:var(--c-ink);word-break:break-all;}
/* QRプレースホルダー */
.co-qr{
  width:140px;height:140px;border-radius:var(--r2);
  background:var(--c-fill-2);border:1px solid var(--c-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);margin:var(--s3) auto 0;
}
.co-qr__pattern{
  display:grid;grid-template-columns:repeat(7,12px);gap:2px;
}
.co-qr__cell{width:12px;height:12px;border-radius:2px;}
.co-qr__label{font-size:10px;color:var(--c-ink-3);letter-spacing:.06em;font-weight:var(--w-bold);}
.co-complete__actions{display:flex;flex-direction:column;gap:var(--s2);}

/* 抽選完了バリアント（アイコンはデフォルトと同じ） */
/* 通知バナー（抽選日・結果通知など） */
.co-complete__notice{
  padding:var(--s4);background:var(--c-fill);
  border:1px solid var(--c-line);border-radius:var(--r2);
}
.co-complete--lottery .co-complete__notice{
  background:oklch(97% 0.04 280);border-color:oklch(85% 0.08 280);
}
.co-complete__notice-row{
  display:flex;align-items:flex-start;gap:var(--s3);
}
.co-complete__notice-row + .co-complete__notice-row{margin-top:var(--s3);}
.co-complete__notice-label{
  flex:0 0 64px;font-size:10px;font-weight:var(--w-bold);
  color:var(--c-ink-3);letter-spacing:.06em;padding-top:2px;
}
.co-complete--lottery .co-complete__notice-label{color:oklch(50% 0.1 280);}
.co-complete__notice-value{font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.7;}
.co-complete__notice-value--emphasis{font-size:var(--t-md);font-weight:var(--w-black);color:var(--c-ink);}
/* 次のステップリスト */
.co-complete__next-steps{
  padding:var(--s3) var(--s4);background:var(--c-fill);border-radius:var(--r2);
}
.co-complete__next-steps-title{
  font-size:10px;font-weight:var(--w-bold);color:var(--c-ink-3);
  letter-spacing:.06em;margin-bottom:var(--s3);
}
.co-complete__next-steps-list{display:flex;flex-direction:column;gap:var(--s3);}
.co-complete__next-steps-item{display:flex;gap:var(--s3);align-items:flex-start;}
.co-complete__next-steps-num{
  flex:0 0 20px;height:20px;border-radius:50%;
  background:var(--c-ink-2);color:#fff;
  font-size:10px;font-weight:var(--w-bold);
  display:flex;align-items:center;justify-content:center;
}
.co-complete__next-steps-text{
  font-size:var(--t-xs);color:var(--c-ink-2);line-height:1.7;padding-top:1px;
}

/* =====================================================================
   商品詳細 コンポーネント（S-11: 展開テキスト / アコーディオン / 関連グッズ）
   ===================================================================== */

/* 展開可能テキスト */
.exp-text{margin-bottom:var(--s3);}
.exp-text__body{overflow:hidden;line-height:1.8;font-size:var(--t-sm);color:var(--c-ink-2);}
.exp-text__body.is-clipped{max-height:9em;}
.exp-text__fade{
  height:3em;margin-top:-3em;
  background:linear-gradient(transparent,#fff);pointer-events:none;
  position:relative;z-index:1;
}
.exp-text__btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:var(--s3);padding:10px var(--s3);
  border:1.5px solid var(--c-line-2);border-radius:var(--r-pill);
  background:var(--c-bg);font-size:var(--t-xs);font-weight:var(--w-medium);
  color:var(--c-ink-2);cursor:pointer;
}
.exp-text__btn:hover{background:var(--c-fill);}
.exp-text__btn svg{transition:transform .2s;flex-shrink:0;}

/* アコーディオンセクション */
.acc-sect{border-top:1px solid var(--c-line);}
.acc-sect__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) 0;cursor:pointer;user-select:none;
}
.acc-sect__title{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink);}
.acc-sect__chevron{transition:transform .2s;color:var(--c-ink-3);flex-shrink:0;}
.acc-sect.is-open .acc-sect__chevron{transform:rotate(180deg);}
.acc-sect__body{display:none;padding-bottom:var(--s4);}
.acc-sect.is-open .acc-sect__body{display:block;}

/* スペック表 */
.spec-table{width:100%;border-collapse:collapse;font-size:12px;}
.spec-table tr{border-bottom:1px solid var(--c-line);}
.spec-table tr:last-child{border-bottom:none;}
.spec-table td{padding:var(--s2) var(--s1);vertical-align:top;line-height:1.7;}
.spec-table td:first-child{width:36%;color:var(--c-ink-3);white-space:nowrap;padding-right:var(--s3);}
.spec-table td:last-child{color:var(--c-ink-2);}

/* 関連グッズ横スクロール */
.rel-goods{padding:var(--s5) 0 var(--s4);border-top:1px solid var(--c-line);}
.rel-goods__title{font-size:var(--t-sm);font-weight:var(--w-bold);margin-bottom:var(--s3);color:var(--c-ink);}
.rel-goods__list{
  display:flex;gap:var(--s3);overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--s1);
}
.rel-goods__list::-webkit-scrollbar{display:none;}
.rel-goods__card{flex:0 0 120px;cursor:pointer;}
.rel-goods__thumb{
  width:120px;height:120px;border-radius:var(--r2);
  background:repeating-linear-gradient(-45deg,var(--c-fill) 0,var(--c-fill) 5px,var(--c-fill-2) 5px,var(--c-fill-2) 10px);
  overflow:hidden;border:1px solid var(--c-line);
}
.rel-goods__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.rel-goods__name{font-size:11px;font-weight:var(--w-medium);line-height:1.45;margin-top:6px;color:var(--c-ink);}
.rel-goods__price{font-size:11px;color:var(--c-ink-3);margin-top:2px;}

/* =====================================================================
   抽選応募 (S-12 / S-13)
   ===================================================================== */

/* 締切バー（makeDeadlineBar が生成・GD-02/GD-03 共用） */
.deadline-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:9px var(--s4);
  background:var(--c-urgent-bg);border:1px solid var(--c-urgent-line);border-radius:var(--r2);
  margin:var(--s2) 0;
}
.deadline-bar__main{display:flex;align-items:center;gap:var(--s2);}
.deadline-bar__key{
  font-size:10px;font-weight:var(--w-bold);color:var(--c-urgent);letter-spacing:.04em;
}
.deadline-bar__val{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink);}

/* 応募締切・抽選日バナー（GD-03 の lottery-banner 内で使用） */
.lottery-banner{
  margin:var(--s3) var(--s4);padding:var(--s3) var(--s4);
  background:oklch(97% 0.04 280);border:1px solid oklch(85% 0.08 280);
  border-radius:var(--r2);display:flex;flex-direction:column;gap:var(--s2);
}
.lottery-banner__row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.lottery-banner__label{
  font-size:10px;font-weight:var(--w-bold);color:oklch(50% 0.1 280);
  letter-spacing:.06em;flex:0 0 48px;
}
.lottery-banner__val{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink);}
.lottery-banner__note{font-size:var(--t-xs);color:oklch(50% 0.1 280);line-height:1.6;}

/* 当選時のみ課金 注意ボックス */
.lottery-billing-note{
  margin:0 var(--s4) var(--s4);padding:var(--s3) var(--s4);
  background:oklch(97% 0.03 145);border:1px solid oklch(85% 0.07 145);
  border-radius:var(--r2);font-size:var(--t-xs);color:oklch(38% 0.12 145);
  line-height:1.7;display:flex;gap:var(--s2);align-items:flex-start;
}

/* カスタムカラー: 抽選（紫系）*/
:root{ --c-lottery: #7c3aed; }

/* =====================================================================
   CHECK（チケット購入 iframe）コンポーネント — .ck-*
   見た目は ecforce check 踏襲。色は --ck-* トークンのみ参照すること。
   ID対応: CK-T0 / CK-01〜14（情報設計ドキュメント参照）
   ===================================================================== */

:root{
  --ck-blue:        #0061ff;
  --ck-ink:         #202531;
  --ck-ink-2:       #777f98;
  --ck-ink-3:       #c6cad8;
  --ck-line:        #f0f2f7;
  --ck-line-2:      #c6cad8;
  --ck-line-blue:   #c5d8ff;
  --ck-fill:        #f7f9fa;
  --ck-fill-blue:   #e4f0fb;
  --ck-fill-blue-2: #f0f6ff;
  --ck-fill-mute:   #eef0f4;
  --ck-disabled:    #d3d5d6;
  --ck-disabled-ink:#b9babb;
  --ck-hold-bg:     #fff7e8;
  --ck-hold-line:   #f0e0c0;
  --ck-hold-ink:    #8a5a00;
  --ck-urgent:      #cf251f;
  --ck-iframe-bar:  #eef1f4;
  --ck-iframe-bd:   #d8dde6;
  --ck-shell-bg:    #f3f4f6;
  --ck-r:           4px;
  --ck-r2:          8px;
  --ck-font:        -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}

/* CK-15 ルート（ヘルパー外でも使えるよう先定義） */
.ck-root{
  background:var(--ck-fill);
  min-height:100%;
  font-family:var(--ck-font);
  color:var(--ck-ink);
  box-sizing:border-box;
}
.ck-root *,.ck-root *::before,.ck-root *::after{box-sizing:border-box;}

/* CK-01 ページタイトル帯 */
.ck-header{
  background:var(--ck-fill);
  padding:16px 20px;
  border-bottom:1px solid var(--ck-line);
}
.ck-header__title{
  margin:0;
  font-size:18px;font-weight:500;color:var(--ck-ink);
  text-align:center;line-height:1.5;
}

/* CK-02 ステップバー */
.ck-steps{
  display:flex;align-items:flex-start;justify-content:center;
  padding:12px 8px 10px;
  background:#fff;border-bottom:1px solid var(--ck-line);
}
.ck-steps__item{display:flex;align-items:center;}
.ck-steps__col{display:flex;flex-direction:column;align-items:center;gap:3px;}
.ck-steps__dot{
  width:24px;height:24px;border-radius:50%;
  background:var(--ck-line);color:var(--ck-ink-3);
  font-size:10px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
}
.ck-steps__dot--current{
  background:var(--ck-blue);color:#fff;
}
.ck-steps__dot--done{
  background:var(--ck-fill-blue);color:var(--ck-blue);
  border:2px solid var(--ck-blue);
}
.ck-steps__label{
  font-size:9px;color:var(--ck-ink-3);
  white-space:nowrap;text-align:center;
}
.ck-steps__label--current{color:var(--ck-blue);}
.ck-steps__line{
  height:1.5px;background:var(--ck-line);
  margin-bottom:12px;flex-shrink:0;
}

/* CK-03 取り置きバナー */
.ck-hold{
  background:var(--ck-hold-bg);border-bottom:1px solid var(--ck-hold-line);
  padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ck-hold__msg{font-size:12px;color:var(--ck-hold-ink);line-height:1.4;}
.ck-hold__time{
  font-size:13px;font-weight:600;color:var(--ck-urgent);
  white-space:nowrap;flex-shrink:0;
}

/* CK-04 注意事項 O-16c */
.ck-notice{
  border:1px solid #e0e4ec;border-radius:var(--ck-r2);
  background:var(--ck-fill);padding:14px 16px;
}
.ck-notice--ack{
  border:1.5px solid var(--ck-line-blue);
  background:var(--ck-fill-blue-2);
}
.ck-notice__head{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;
}
.ck-notice__badge{
  font-size:11px;font-weight:600;color:var(--ck-ink-2);
  background:var(--ck-fill-mute);padding:2px 8px;border-radius:var(--ck-r);
}
.ck-notice--ack .ck-notice__badge{
  font-weight:700;color:var(--ck-blue);background:var(--ck-fill-blue);
}
.ck-notice__title{font-size:13px;font-weight:600;color:var(--ck-ink);}
.ck-notice__hint{margin:0 0 8px;font-size:11px;color:var(--ck-ink-2);}
.ck-notice__body{font-size:12px;color:var(--ck-ink);line-height:1.65;}
.ck-notice__body p{margin:0 0 8px;}
.ck-notice__body p:last-child{margin:0;}
.ck-notice__ack{
  display:flex;align-items:flex-start;gap:10px;margin-top:12px;cursor:pointer;
}
.ck-notice__ack input{
  width:18px;height:18px;margin-top:2px;accent-color:var(--ck-blue);flex-shrink:0;
}
.ck-notice__ack-label{font-size:13px;color:var(--ck-ink);line-height:1.45;}

/* CK-05 出口ボタン */
.ck-exit{display:flex;flex-direction:column;gap:4px;}
.ck-exit__btn{
  width:100%;border-radius:var(--ck-r);padding:12px 24px;
  font-size:16px;font-weight:500;cursor:pointer;line-height:24px;
  font-family:inherit;box-sizing:border-box;
}
.ck-exit__btn--back{
  background:#fff;border:none;color:var(--ck-blue);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 1.5px rgba(0,0,0,.1);
}
.ck-exit__btn--abandon{
  background:#fff;border:1.5px solid var(--ck-line-2);color:var(--ck-ink);
}

/* CK-06 iframeフッター */
.ck-footer{
  background:var(--ck-fill);padding:40px 20px 48px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.ck-footer__links{
  display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.ck-footer__link{
  font-size:12px;font-weight:500;color:var(--ck-blue);cursor:pointer;
}
.ck-footer__copy{
  font-size:10px;color:var(--ck-ink-2);margin:0;text-align:center;
}

/* CK-07 セクション見出し */
.ck-sect{
  font-size:18px;font-weight:500;color:var(--ck-ink);
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid var(--ck-line);
}

/* CK-08 定義行 */
.ck-def{
  display:flex;gap:8px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--ck-line);
  --ck-label-w:96px;
}
.ck-def--noborder{border-bottom:none;}
.ck-def__label{
  font-size:12px;font-weight:500;color:var(--ck-ink-2);
  width:var(--ck-label-w);flex-shrink:0;
}
.ck-def__label--ink{color:var(--ck-ink);}
.ck-def__val{
  font-size:13px;color:var(--ck-ink);font-weight:400;line-height:1.5;flex:1;
}
.ck-def__val--accent{color:var(--ck-blue);font-weight:500;}
.ck-def__val--bold{font-weight:500;}

/* CK-09 金額行 */
.ck-money{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--ck-line);
}
.ck-money--noborder{border-bottom:none;}
.ck-money__label{font-size:12px;font-weight:500;color:var(--ck-ink-2);}
.ck-money__val{
  font-size:13px;color:var(--ck-ink);font-weight:500;text-align:right;
  font-variant-numeric:tabular-nums;
}
.ck-money__val--large{font-size:15px;}
.ck-money__val--accent{color:var(--ck-blue);}

/* CK-10 カード入力 */
.ck-field{margin-bottom:14px;}
.ck-field__label{
  font-size:12px;font-weight:500;color:var(--ck-ink-2);
  display:block;margin-bottom:6px;
}
.ck-input{
  width:100%;border:1.5px solid var(--ck-line-2);border-radius:var(--ck-r);
  padding:10px 12px;font-size:14px;color:var(--ck-ink);
  background:#fff;outline:none;font-family:inherit;
}
.ck-input:focus{border-color:var(--ck-blue);}
.ck-cardform__brands{
  display:flex;gap:6px;margin-bottom:14px;
}
.ck-cardform__brand{
  height:22px;padding:0 7px;border-radius:3px;
  display:flex;align-items:center;
}
.ck-cardform__brand span{
  font-size:8px;font-weight:800;color:#fff;letter-spacing:-.3px;white-space:nowrap;
}
.ck-cardform__row{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;
}

/* CK-11 完了ヒーロー */
.ck-complete-hero{
  display:flex;flex-direction:column;align-items:center;
  padding:0 20px;text-align:center;
}
.ck-complete-hero__icon{
  width:52px;height:52px;border-radius:50%;background:var(--ck-blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.ck-complete-hero__title{
  font-size:18px;font-weight:500;color:var(--ck-ink);margin:0 0 8px;
}
.ck-complete-hero__sub{
  font-size:14px;color:var(--ck-ink-2);margin:0;line-height:1.6;
}

/* CK-12 完了CTA */
.ck-complete-actions{
  padding:0 20px;display:flex;flex-direction:column;gap:8px;
}
.ck-btn{
  width:100%;border-radius:var(--ck-r);padding:12px 24px;
  font-size:16px;font-weight:500;cursor:pointer;font-family:inherit;
  border:none;line-height:24px;box-sizing:border-box;
}
.ck-btn--primary{background:var(--ck-blue);color:#fff;}
.ck-btn--primary.is-disabled,
.ck-btn--primary:disabled{
  background:var(--ck-disabled);color:var(--ck-disabled-ink);cursor:default;
}
.ck-btn--secondary{
  background:#fff;color:var(--ck-ink-2);
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 1px 1.5px rgba(0,0,0,.06);
}

/* CK-13 座席リスト */
.ck-seats__group{margin-bottom:0;}
.ck-seats__group + .ck-seats__group{margin-bottom:0;margin-top:10px;}
.ck-seats__area{font-size:12px;color:var(--ck-ink-2);margin-bottom:2px;line-height:1.4;}
.ck-seats__line{font-size:13px;color:var(--ck-ink);line-height:1.65;}

/* CK-14 購入シェル（iframe枠）。AppBar は既存 .appbar / .site-header */
.ck-shell{background:var(--ck-shell-bg);min-height:100%;}
.ck-shell__inner{max-width:960px;margin:0 auto;}
.ck-iframe{margin:0;}
.ck-iframe--pc{margin:16px 24px 32px;}
.ck-iframe__chrome{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;background:var(--ck-iframe-bar);
  border:1px solid var(--ck-iframe-bd);border-bottom:none;
  border-radius:var(--ck-r2) var(--ck-r2) 0 0;
}
.ck-iframe__chrome-label{
  font-size:10px;font-weight:600;color:var(--ck-ink-2);letter-spacing:.04em;
}
.ck-iframe__chrome-url{
  font-size:10px;color:#a0a6b5;font-family:ui-monospace,monospace;
}
.ck-iframe__body{
  border:1px solid var(--ck-iframe-bd);
  border-radius:0 0 var(--ck-r2) var(--ck-r2);
  overflow:hidden;background:var(--ck-fill);
}
.ck-iframe__body--pc{max-width:720px;margin:0 auto;}

/* ---------- CK-15〜30（画面直書き置換用） ---------- */

/* CK-16 白コンテンツ面 */
.ck-panel{
  background:#fff;padding:40px 0;
  display:flex;flex-direction:column;gap:32px;
}
.ck-panel--tight{padding:24px 0 40px;gap:24px;}
.ck-panel--gap36{gap:36px;}
.ck-panel--gap40{gap:40px;}
.ck-pad{padding:0 20px;}
/* 修飾クラスだけでも縦積みになること（ck-stack 無しの誤用を許容） */
.ck-stack,
.ck-stack--10,
.ck-stack--12{
  display:flex;flex-direction:column;
}
.ck-stack{gap:8px;}
.ck-stack--10{gap:10px;}
.ck-stack--12{gap:12px;}

/* CK-17 主CTA（有効／無効） */
.ck-cta{
  background:var(--ck-blue);border-radius:var(--ck-r);padding:12px 24px;
  text-align:center;cursor:pointer;
}
.ck-cta.is-disabled{
  background:var(--ck-disabled);cursor:default;
}
.ck-cta__text{
  font-size:16px;font-weight:500;line-height:24px;color:#fff;
}
.ck-cta.is-disabled .ck-cta__text{color:var(--ck-disabled-ink);}

/* CK-18 テキストリンク */
.ck-link{
  color:var(--ck-blue);cursor:pointer;
  background:none;border:none;padding:0;font-family:inherit;font-size:inherit;
}
.ck-link--sm{font-size:12px;}

/* CK-19 は CK-10 の .ck-field / .ck-input を共用 */

/* CK-20 必須バッジ */
.ck-badge-req{
  background:var(--ck-urgent);color:#fff;font-size:12px;line-height:16px;
  padding:2px 6px;border-radius:100px;
}
.ck-sect-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:8px;border-bottom:1px solid var(--ck-line);margin-bottom:0;
}
.ck-sect-head__title{
  font-size:18px;font-weight:500;color:var(--ck-ink);letter-spacing:.9px;
}

/* CK-21 選択肢ラジオカード */
.ck-choice{
  border:1.5px solid var(--ck-line-2);border-radius:var(--ck-r2);
  padding:14px 16px;background:#fff;cursor:pointer;
}
.ck-choice.is-selected{
  border-color:var(--ck-blue);background:var(--ck-fill-blue-2);
}
.ck-choice__row{display:flex;align-items:flex-start;gap:12px;}
.ck-choice__row--center{align-items:center;}
.ck-choice__radio{
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--ck-line-2);background:#fff;
  flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
}
.ck-choice__row--center .ck-choice__radio{margin-top:0;}
.ck-choice__radio.is-on,
.ck-choice.is-selected .ck-choice__radio{
  background:var(--ck-blue);border-color:var(--ck-blue);
}
.ck-choice__dot{
  width:8px;height:8px;border-radius:50%;background:#fff;display:block;
}
.ck-choice__body{flex:1;min-width:0;}
.ck-choice__title{
  margin:0;font-size:14px;font-weight:500;color:var(--ck-ink);line-height:1.4;
}
.ck-choice__price{margin:4px 0 0;font-size:14px;font-weight:500;color:var(--ck-ink);}
.ck-choice__sub{font-size:12px;color:var(--ck-ink-2);margin-top:2px;}
.ck-choice__badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.ck-chip{
  font-size:10px;font-weight:500;color:var(--ck-ink-2);background:var(--ck-line);
  padding:2px 8px;border-radius:100px;line-height:16px;
}

/* CK-21 展開付き（支払いアコーディオン） */
.ck-choice--expand{padding:0;overflow:hidden;}
.ck-choice__hd{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.ck-choice__detail{
  display:none;border-top:1px solid var(--ck-line);padding:16px;
}
.ck-choice.is-selected .ck-choice__detail{display:block;}

/* CK-22 枚数ステッパー */
.ck-qtyrow{
  background:#fff;border:1px solid var(--ck-line-2);border-radius:var(--ck-r2);
  padding:12px 16px;
}
.ck-qtyrow__inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ck-qtyrow__name{margin:0;font-size:14px;font-weight:500;color:var(--ck-ink);}
.ck-qtyrow__price{margin:4px 0 0;font-size:14px;color:var(--ck-ink);}
.ck-stepper{display:flex;align-items:center;gap:4px;}
.ck-stepper__btn{
  width:32px;height:32px;border-radius:var(--ck-r);border:none;
  background:var(--ck-fill-blue);cursor:pointer;color:var(--ck-blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;
}
.ck-stepper__btn.is-disabled{
  background:var(--ck-disabled);cursor:default;color:var(--ck-disabled-ink);
}
.ck-stepper__btn svg{display:block;}
.ck-stepper__btn line{stroke:currentColor;}
.ck-stepper__qty{
  width:32px;text-align:center;font-size:14px;font-weight:500;color:var(--ck-ink);
}

/* CK-23 発売枠インフォ */
.ck-frame{
  background:var(--ck-fill-blue-2);border:1px solid var(--ck-line-blue);
  border-radius:var(--ck-r2);padding:12px 14px;
}
.ck-frame__label{font-size:11px;font-weight:600;color:var(--ck-blue);margin-bottom:4px;}
.ck-frame__name{font-size:14px;font-weight:600;color:var(--ck-ink);}
.ck-frame__period{font-size:12px;color:var(--ck-ink-2);margin-top:4px;}

/* CK-24 公演情報 */
.ck-event__head{
  background:var(--ck-fill);padding:16px 20px;
  font-size:14px;font-weight:500;color:var(--ck-ink);line-height:20px;
}
.ck-event__row{
  display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid var(--ck-line);
}
.ck-event__label{
  font-size:12px;font-weight:500;color:var(--ck-ink);width:100px;flex-shrink:0;line-height:16px;
}
.ck-event__val{font-size:12px;color:var(--ck-ink);line-height:16px;}

/* CK-25 案内ボックス */
.ck-box{
  border-radius:var(--ck-r2);padding:16px 20px;
  font-size:14px;color:var(--ck-ink);line-height:1.5;
}
.ck-box--blue{background:var(--ck-fill-blue);}
.ck-box--mute{background:var(--ck-fill);}
.ck-box--sm{padding:16px;font-size:12px;line-height:1.7;}
.ck-box--pad{padding:14px 16px;font-size:13px;line-height:1.6;}

/* CK-26 小計 */
.ck-subtotal{
  margin:4px 0 0;font-size:14px;font-weight:500;color:var(--ck-ink);text-align:right;
}

/* CK-27 座席の選び方モーダル */
.ck-dialog-hd{padding:20px 20px 4px;position:relative;}
.ck-dialog-hd__close{
  position:absolute;top:12px;right:12px;background:none;border:none;
  font-size:18px;color:var(--ck-ink-2);cursor:pointer;line-height:1;padding:8px;
}
.ck-dialog-hd__title{
  margin:0 0 4px;font-size:18px;font-weight:600;color:var(--ck-ink);
  text-align:center;padding:0 28px;
}
.ck-dialog-hd__sub{
  margin:0 0 16px;font-size:12px;color:var(--ck-ink-2);text-align:center;line-height:1.5;
}
.ck-dialog-meta{padding:0 20px 8px;}
.ck-dialog-meta__name{margin:0;font-size:14px;font-weight:500;color:var(--ck-ink);}
.ck-dialog-meta__frame{margin:4px 0 0;font-size:11px;color:var(--ck-ink-2);}
.ck-dialog-meta__vars{margin:6px 0 0;font-size:13px;color:var(--ck-ink);}
.ck-dialog-actions{padding:12px 20px 24px;display:flex;flex-direction:column;gap:10px;}
.ck-choice-btn{
  display:block;width:100%;text-align:left;position:relative;
  border:1.5px solid var(--ck-line-2);border-radius:var(--ck-r2);padding:16px;
  background:#fff;cursor:pointer;font-family:inherit;box-sizing:border-box;
}
.ck-choice-btn--primary{
  border:2px solid var(--ck-blue);
  background:oklch(97% 0.025 255);
  box-shadow:0 2px 10px oklch(48% 0.14 255 / .14);
  padding:18px 16px;
}
.ck-choice-btn__badge{
  display:inline-block;margin-bottom:8px;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  color:#fff;background:var(--ck-blue);
  padding:3px 8px;border-radius:999px;
}
.ck-choice-btn--primary .ck-choice-btn__title{
  font-size:16px;color:var(--ck-ink);
}
.ck-choice-btn__title{font-size:15px;font-weight:600;color:var(--ck-ink);margin-bottom:4px;}
.ck-choice-btn__sub{font-size:12px;color:var(--ck-ink-2);line-height:1.5;}

/* CK-28 座席マップ */
.ck-map__prompt{margin:0 0 10px;font-size:13px;color:var(--ck-ink);font-weight:500;}
.ck-map__zones{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ck-map__zone{
  border:1.5px solid var(--ck-line-2);border-radius:var(--ck-r2);
  padding:20px 12px;background:#fff;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--ck-ink);font-family:inherit;
}

/* TK-04 会場図＋SVGホットスポット（viewBox 0–100 = 画像全体） */
.ck-vmap{margin:0;}
.ck-vmap__prompt{margin:0 0 8px;}
.ck-vmap__frame{
  position:relative;width:100%;aspect-ratio:3/2;
  overflow:hidden;border-radius:var(--ck-r2);
  background:#e8edf3;border:1px solid var(--ck-line-2);
  touch-action:manipulation;
}
.ck-vmap__scene{
  position:absolute;inset:0;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
/* img と svg を同じ contain で重ね、座標ズレを防ぐ */
.ck-vmap__img,
.ck-vmap__svg{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;user-select:none;
}
.ck-vmap__img{object-fit:contain;object-position:center;}
.ck-vmap__svg{overflow:hidden;}
.ck-vmap__poly{
  pointer-events:auto;cursor:pointer;
  fill:oklch(62% 0.14 255 / .28);
  stroke:oklch(45% 0.18 255 / .95);
  stroke-width:0.35;
  transition:fill .15s,stroke .15s;
}
.ck-vmap__poly:hover,
.ck-vmap__poly:focus{
  fill:oklch(62% 0.14 255 / .48);
  stroke:oklch(40% 0.2 255);
  outline:none;
}
.ck-vmap__label{
  fill:#fff;font-size:3.2px;font-weight:700;
  font-family:inherit;pointer-events:none;
  paint-order:stroke fill;
  stroke:oklch(25% 0.06 255 / .55);stroke-width:0.55px;
  text-anchor:middle;dominant-baseline:middle;
}
.ck-vmap__hint{
  margin:8px 0 0;font-size:11px;color:var(--ck-ink-2);line-height:1.45;
}

/* mapUi:list — 参考図（ズーム可）＋名前ボタン */
.ck-vmap__frame--ref{pointer-events:none;}
.ck-vmap-list{
  display:flex;flex-direction:column;gap:8px;margin-top:12px;
}
.ck-vmap-list__btn{
  width:100%;padding:14px 16px;text-align:left;
  border:1.5px solid var(--ck-line-2);border-radius:var(--ck-r2);
  background:#fff;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--ck-ink);
  transition:border-color .15s,background .15s;
}
.ck-vmap-list__btn:hover,.ck-vmap-list__btn:focus-visible{
  border-color:var(--ck-blue);background:oklch(97% 0.02 255);outline:none;
}

.ck-map__stage{
  text-align:center;font-size:11px;color:var(--ck-ink-2);
  margin-bottom:8px;padding:6px;background:var(--ck-line);border-radius:var(--ck-r);
}

/* 席選択ビューポート（枠内スクロール＋拡大縮小）
   ズームUIはスクロール枠の下（席と被らない位置）に置く */
.ck-seatview{margin:0;}
.ck-seatview__frame{
  height:min(52vh,360px);
  overflow:auto;
  border:1px solid var(--ck-line-2);
  border-radius:var(--ck-r2);
  background:#f3f5f8;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y;
}
.ck-seatview__sizer{position:relative;}
.ck-seatview__canvas{
  display:inline-block;
  transform-origin:0 0;
  padding:10px;
  background:#fff;
}
.ck-seatview__toolbar{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.ck-seatview__zoom{
  display:flex;align-items:center;gap:2px;
  padding:4px;
  background:#fff;
  border:1px solid var(--ck-line-2);
  border-radius:var(--ck-r1);
}
.ck-seatview__zoom-btn{
  width:32px;height:32px;padding:0;
  border:none;border-radius:6px;
  background:var(--ck-fill, #f0f2f5);
  color:var(--ck-ink);font-size:18px;font-weight:600;line-height:1;
  cursor:pointer;font-family:inherit;
}
.ck-seatview__zoom-btn:hover:not(:disabled){background:oklch(95% 0.02 255);color:var(--ck-blue);}
.ck-seatview__zoom-btn:disabled{opacity:.35;cursor:default;}
.ck-seatview__zoom-label{
  min-width:40px;text-align:center;
  font-size:11px;font-weight:700;color:var(--ck-ink-2);
}
.ck-seatview__hint{
  margin:8px 0 0;font-size:11px;color:var(--ck-ink-2);line-height:1.45;
}

/* 席選択: ステージ＝テキスト＋矢印（席の外の8方位スロット） */
.ck-seatmap{
  margin:0;
  display:grid;
  grid-template-columns:minmax(52px,auto) max-content minmax(52px,auto);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "tl   top    tr"
    "left seats  right"
    "bl   bottom br";
  gap:6px 4px;
  align-items:center;justify-items:center;
  width:max-content;
}
.ck-seatmap__cell--tl{grid-area:tl;}
.ck-seatmap__cell--top{grid-area:top;width:100%;}
.ck-seatmap__cell--tr{grid-area:tr;}
.ck-seatmap__cell--left{grid-area:left;}
.ck-seatmap__cell--seats{grid-area:seats;width:100%;justify-self:stretch;}
.ck-seatmap__cell--right{grid-area:right;}
.ck-seatmap__cell--bl{grid-area:bl;}
.ck-seatmap__cell--bottom{grid-area:bottom;width:100%;}
.ck-seatmap__cell--br{grid-area:br;}

.ck-seatmap__stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:4px 6px;min-width:44px;
  color:var(--ck-ink);text-align:center;line-height:1.15;
}
.ck-seatmap__stage-label{
  font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
}
.ck-seatmap__stage-arrow{
  font-size:16px;line-height:1;font-weight:700;color:var(--ck-blue);
}
.ck-seatmap__stage--left,
.ck-seatmap__stage--right{padding:6px 2px;}
.ck-seatmap__stage--top,
.ck-seatmap__stage--bottom{width:100%;}

.ck-map__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.ck-map__grid--wide{
  grid-template-columns:repeat(var(--ck-seat-cols,14),28px);
  gap:3px;width:max-content;
}
.ck-seat{
  aspect-ratio:1;border:1px solid var(--ck-line-2);border-radius:3px;
  background:#fff;color:var(--ck-ink);font-size:9px;cursor:pointer;padding:0;
  font-family:inherit;
}
.ck-map__grid--wide .ck-seat{
  width:28px;height:28px;aspect-ratio:auto;font-size:8px;
}
.ck-seat.is-selected{background:var(--ck-blue);border-color:var(--ck-blue);color:#fff;}
.ck-seat.is-taken{
  background:#e8eaef;border-color:var(--ck-disabled);color:var(--ck-disabled-ink);cursor:default;
}
.ck-map__legend{
  margin:10px 0 0;display:flex;gap:14px;font-size:11px;color:var(--ck-ink-2);
}
.ck-map__legend i{
  width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle;
}
.ck-map__legend i.on{background:var(--ck-blue);}
.ck-map__legend i.sold{background:#e8eaef;border:1px solid var(--ck-disabled);}
.ck-crumb{margin:6px 0 0;font-size:12px;line-height:1.5;}
.ck-crumb-bar{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.ck-crumb-bar__trail{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
  font-size:12px;line-height:1.5;
}
.ck-crumb__link{
  color:var(--ck-blue);cursor:pointer;background:none;border:none;
  padding:0;font:inherit;text-decoration:underline;text-underline-offset:2px;
}
.ck-crumb__here{color:var(--ck-ink);font-weight:600;}
.ck-crumb__sep{color:var(--ck-ink-3);}
.ck-map-back{
  align-self:flex-start;
  background:none;border:1px solid var(--ck-line-2);border-radius:var(--ck-r1);
  padding:8px 12px;font-size:13px;font-weight:600;color:var(--ck-ink);
  cursor:pointer;font-family:inherit;
}
.ck-map-back:hover,.ck-map-back:focus-visible{
  border-color:var(--ck-blue);color:var(--ck-blue);outline:none;
}
.ck-map__count{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--ck-blue);}
.ck-map__hint{margin:0;font-size:12px;color:var(--ck-ink-2);line-height:1.5;}

/* CK-29 支払い詳細内の小選択 */
.ck-radio-list{display:flex;flex-direction:column;gap:8px;}
.ck-radio-list__item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1.5px solid var(--ck-line-2);border-radius:6px;cursor:pointer;background:#fff;
}
.ck-radio-list__item input{width:16px;height:16px;accent-color:var(--ck-blue);flex-shrink:0;}
.ck-radio-list__item span{font-size:14px;color:var(--ck-ink);}
.ck-note{margin:0 0 12px;font-size:13px;color:var(--ck-ink-2);line-height:1.5;}
.ck-panel-card{
  border:1.5px solid var(--ck-line-2);border-radius:var(--ck-r2);
  padding:14px 16px;background:#fff;
}
.ck-panel-card__title{font-size:14px;font-weight:500;color:var(--ck-ink);}
.ck-panel-card__sub{font-size:12px;color:var(--ck-ink-2);margin-top:4px;line-height:1.5;}
.ck-paychip{
  display:flex;align-items:center;gap:10px;padding:4px 0 0;
}
.ck-paychip__logo{
  width:38px;height:26px;background:#1a1f71;border-radius:var(--ck-r);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ck-paychip__logo span{font-size:9px;font-weight:800;color:#fff;letter-spacing:-.5px;}
.ck-paychip__name{font-size:14px;font-weight:500;color:var(--ck-ink);}
.ck-paychip__meta{font-size:12px;color:var(--ck-ink-2);}

/* CK-30 内訳行 */
.ck-break{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--ck-line);
}
.ck-break__label{font-size:13px;color:var(--ck-ink);}
.ck-break__val{
  font-size:13px;font-weight:500;color:var(--ck-ink);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* 完了QR面など */
.ck-qrbox{
  background:var(--ck-fill);border-radius:var(--ck-r2);padding:20px;
  display:flex;flex-direction:column;align-items:center;
}
.ck-qrbox__hint{font-size:12px;color:var(--ck-ink-2);margin-bottom:14px;}
.ck-qrbox__frame{
  width:160px;height:160px;background:#fff;border:1px solid var(--ck-line-2);
  border-radius:var(--ck-r2);padding:12px;box-sizing:border-box;
}
.ck-qrbox__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:100%;height:100%;}
.ck-qrbox__cell{border-radius:1px;background:#fff;}
.ck-qrbox__cell.is-on{background:var(--ck-ink);}
.ck-qrbox__no{font-size:11px;color:var(--ck-ink-2);margin-top:12px;}
.ck-info-list{
  background:var(--ck-fill);border-radius:var(--ck-r2);padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.ck-info-list__row{display:flex;gap:12px;align-items:flex-start;}
.ck-info-list__k{
  font-size:12px;font-weight:500;color:var(--ck-ink-2);width:72px;flex-shrink:0;
}
.ck-info-list__v{font-size:13px;color:var(--ck-ink);line-height:1.55;}
.ck-info-list__v--accent{font-size:14px;font-weight:500;color:var(--ck-blue);}
.ck-ticket-meta__name{margin:0;font-size:16px;font-weight:500;color:var(--ck-ink);}
.ck-ticket-meta__frame{margin:4px 0 0;font-size:11px;color:var(--ck-ink-2);}
.ck-muted{font-size:12px;color:var(--ck-ink-2);line-height:1.5;}
.ck-muted--sm{font-size:11px;line-height:1.4;}
.ck-strong{color:var(--ck-ink);font-weight:500;}



/* =====================================================================
   Fandam 本編 — マイページ／チケット所持（.fm-*）
   トークンは :root の --c-*。CHECK（.ck-*）と混ぜない。
   ===================================================================== */

.fm-page{
  background:var(--c-fill);min-height:100%;font-size:14px;
  display:flex;flex-direction:column;
}
.fm-page__body{flex:1;padding:var(--s3) 0 var(--s7);}
.fm-page__body--flush{flex:1;padding:0 0 var(--s7);}
.fm-page__narrow{
  flex:1;max-width:720px;margin:0 auto;padding:var(--s6) var(--s6) 0;width:100%;
}
.fm-page__backrow{padding:var(--s3) var(--s4);}
.fm-page__title-wrap{padding:var(--s4) var(--s4) var(--s2);}
.fm-page__title-wrap--compact{padding:0 var(--s4) var(--s2);}

.fm-title{
  font-size:var(--t-xl);font-weight:var(--w-black);color:var(--c-ink);margin:0;
}
.fm-title--pc{margin-bottom:var(--s4);}
.fm-title--pc-lg{margin-bottom:var(--s5);}

.fm-back{
  background:none;border:none;padding:4px 0;margin:0;
  font-size:14px;color:var(--c-ink-2);cursor:pointer;font-family:inherit;
}
.fm-back--pc{padding:0;margin-bottom:var(--s3);font-size:13px;}

.fm-stack{display:flex;flex-direction:column;}
.fm-stack--2{display:flex;flex-direction:column;gap:var(--s2);}
.fm-stack--3{display:flex;flex-direction:column;gap:var(--s3);}
.fm-stack--4{display:flex;flex-direction:column;gap:var(--s4);}

.fm-pad{padding:var(--s4);}
.fm-pad-x{padding:0 var(--s4);}
.fm-pad-x-y2{padding:0 var(--s4) var(--s3);}

.fm-card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r2);overflow:hidden;
}
.fm-card--pad{padding:var(--s4);}
.fm-card--pad-sm{padding:var(--s3) var(--s4);}
.fm-card--inset{margin:var(--s3) var(--s4);}
.fm-card--flush-top{margin:0 0 var(--s3);border-radius:0;border-left:none;border-right:none;}
.fm-card--flush-top-pc{
  margin:0 0 var(--s3);border-radius:var(--r2);
  border:1px solid var(--c-line);overflow:hidden;
}

.fm-sect{
  font-size:13px;font-weight:var(--w-bold);color:var(--c-ink-3);
  letter-spacing:.04em;margin:0 0 10px;
}
.fm-sect--loose{margin:var(--s2) 0 var(--s2);}
.fm-sect--flat{margin:0;}
.fm-detail{padding-top:var(--s2);}

.fm-def{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--c-line);
}
.fm-def--noborder{border-bottom:none;}
.fm-def__label{
  font-size:12px;font-weight:var(--w-medium);color:var(--c-ink-3);
  width:var(--fm-label-w,100px);flex-shrink:0;
}
.fm-def__label--ink{color:var(--c-ink-2);}
.fm-def__val{font-size:13px;color:var(--c-ink);line-height:1.55;flex:1;min-width:0;}
.fm-def__val--accent{font-weight:var(--w-bold);color:var(--c-ink);}
.fm-def__val--bold{font-weight:var(--w-bold);}

.fm-menu-head{
  padding:var(--s3) var(--s4) var(--s2);
  font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--c-ink-3);
  letter-spacing:.08em;text-transform:uppercase;
}
.fm-menu-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);cursor:pointer;
}
.fm-menu-item--disabled{opacity:.45;pointer-events:none;}
.fm-menu-item__body{flex:1;min-width:0;}
.fm-menu-item__label{
  font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--c-ink);
}
.fm-menu-item__sub{
  font-size:var(--t-xs);color:var(--c-ink-3);margin-top:2px;
}
.fm-menu-item__chev{color:var(--c-ink-3);flex-shrink:0;}
.fm-menu-div{height:1px;background:var(--c-line);margin:0 var(--s4);}

.fm-badge{
  display:inline-block;font-size:10px;font-weight:var(--w-bold);
  padding:2px 7px;border-radius:var(--r-pill);flex-shrink:0;
}
.fm-badge--urgent{background:var(--c-urgent);color:#fff;}
.fm-badge--fc{
  background:var(--c-ink);color:#fff;padding:3px 10px;letter-spacing:.04em;
}
.fm-pill{
  display:inline-block;font-size:10px;font-weight:var(--w-bold);
  padding:2px 8px;border-radius:var(--r-pill);
}
.fm-pill--applying{
  background:oklch(96% 0.03 230);color:oklch(42% 0.14 230);
}
.fm-pill--won{
  background:oklch(95% 0.04 145);color:oklch(36% 0.12 145);
}
.fm-pill--lost{background:var(--c-fill);color:var(--c-ink-3);}

.fm-list{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);}
.fm-list-card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);cursor:pointer;
  display:flex;align-items:center;gap:var(--s3);
}
.fm-list-card__body{flex:1;min-width:0;}
.fm-list-card__title{
  font-size:15px;font-weight:var(--w-bold);color:var(--c-ink);margin-bottom:4px;
}
.fm-list-card__meta{
  font-size:var(--t-xs);color:var(--c-ink-2);line-height:1.7;
}
.fm-list-card__top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;
}
.fm-list-card__date{font-size:var(--t-xs);color:var(--c-ink-3);}
.fm-list-card__foot{font-size:var(--t-xs);margin-top:6px;}
.fm-list-card__foot--won{color:oklch(36% 0.12 145);}
.fm-list-card__chev{color:var(--c-ink-3);flex-shrink:0;}

.fm-empty{padding:var(--s7) var(--s4);text-align:center;}
.fm-empty__title{font-size:var(--t-sm);color:var(--c-ink-3);margin-bottom:var(--s3);}
.fm-empty__sub{font-size:var(--t-xs);color:var(--c-ink-3);margin-bottom:var(--s4);}
.fm-empty--no-cta .fm-empty__sub{margin-bottom:0;}
.fm-empty__cta{font-size:var(--t-sm);padding:10px var(--s5);}

.fm-account{padding:var(--s4);border-bottom:1px solid var(--c-line);}
.fm-account--guest{
  padding:var(--s5) var(--s4);border-bottom:1px solid var(--c-line);
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;
}
.fm-account--member{display:flex;align-items:center;gap:var(--s3);}
.fm-avatar{
  border-radius:50%;background:var(--c-fill-2);border:1.5px solid var(--c-line-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fm-avatar--lg{width:64px;height:64px;color:var(--c-ink-3);}
.fm-avatar--md{width:52px;height:52px;color:var(--c-ink-2);}
.fm-account__name{
  font-size:var(--t-md);font-weight:var(--w-black);color:var(--c-ink);
}
.fm-account__name--muted{
  font-size:var(--t-md);font-weight:var(--w-bold);color:var(--c-ink-2);
}
.fm-account__sub{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:2px;}
.fm-account__sub--guest{margin-top:4px;}
.fm-account__main{flex:1;min-width:0;}
.fm-account__aside{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;
}
.fm-account__cta{display:flex;gap:var(--s2);width:100%;max-width:280px;}
.fm-account__cta .btn{flex:1;font-size:var(--t-sm);padding:10px;}
.fm-edit-btn{
  background:none;border:1px solid var(--c-line);border-radius:var(--r1);
  font-size:10px;color:var(--c-ink-2);padding:3px 10px;cursor:pointer;font-family:inherit;
}

.fm-status{
  border:1px solid var(--c-line);border-radius:var(--r2);padding:var(--s3) var(--s4);
}
.fm-status--applying,
.fm-status--preparing{background:oklch(96% 0.03 230);}
.fm-status--won,
.fm-status--pickup{background:oklch(95% 0.04 145);}
.fm-status--shipping{background:oklch(97% 0.03 25);}
.fm-status--lost,
.fm-status--done,
.fm-status--picked,
.fm-status--ordered{background:var(--c-fill);}
.fm-status__label{font-size:12px;font-weight:var(--w-bold);margin-bottom:6px;}
.fm-status--applying .fm-status__label,
.fm-status--preparing .fm-status__label{color:oklch(42% 0.14 230);}
.fm-status--won .fm-status__label,
.fm-status--pickup .fm-status__label{color:oklch(36% 0.12 145);}
.fm-status--shipping .fm-status__label{color:var(--c-urgent);}
.fm-status--lost .fm-status__label,
.fm-status--done .fm-status__label,
.fm-status--picked .fm-status__label,
.fm-status--ordered .fm-status__label{color:var(--c-ink-3);}
.fm-status__note{font-size:13px;color:var(--c-ink);line-height:1.6;}
.fm-status__meta{
  display:inline-block;margin-top:10px;font-size:10px;font-weight:var(--w-bold);
  padding:2px 8px;border-radius:var(--r-pill);background:rgba(0,0,0,.06);color:var(--c-ink-2);
}
.fm-status .btn{margin-top:12px;width:100%;font-size:14px;padding:12px;}

.fm-item{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s2) 0;border-bottom:1px solid var(--c-line);
}
.fm-item--last{border-bottom:none;padding-bottom:0;}
.fm-item__thumb{
  width:56px;height:56px;border-radius:8px;background:var(--c-fill-2);
  flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.fm-item__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.fm-item__thumb-fallback{
  font-size:9px;color:var(--c-ink-3);text-align:center;line-height:1.3;font-weight:var(--w-bold);
}
.fm-item__body{flex:1;min-width:0;}
.fm-item__name{font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--c-ink);line-height:1.4;}
.fm-item__sub{font-size:var(--t-xs);color:var(--c-ink-3);margin-top:2px;}
.fm-item__price{font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--c-ink);flex-shrink:0;}

.fm-pickup-qr{
  margin-top:var(--s3);padding:var(--s3);background:var(--c-fill);border-radius:var(--r2);
  display:flex;align-items:flex-start;gap:var(--s3);
}
.fm-pickup-qr__code{flex-shrink:0;}
.fm-pickup-qr__title{font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--c-ink);margin-bottom:4px;}
.fm-pickup-qr__note{font-size:var(--t-xs);color:var(--c-ink-2);line-height:1.6;margin-bottom:var(--s2);}
.fm-pickup-qr .btn{font-size:var(--t-xs);padding:8px var(--s3);display:inline-flex;align-items:center;gap:6px;width:auto;}

.fm-card__cta{margin-top:var(--s3);width:100%;font-size:var(--t-xs);padding:8px var(--s3);}
.fm-actions-stack{display:flex;flex-direction:column;gap:var(--s2);}
.fm-actions-stack .btn{width:100%;font-size:var(--t-sm);padding:12px;}
.fm-btn-danger{color:var(--c-urgent);border-color:var(--c-urgent);}
.fm-policy{font-size:10px;color:var(--c-ink-3);line-height:1.7;padding:var(--s1) 0;}

/* くじ：購入確定後キャンセル不可 */
.fm-kuji-nocancel{font-size:11px;color:var(--c-ink-2);line-height:1.7;}
.fm-kuji-nocancel--inline{padding:12px 0 14px;font-size:11px;}
.fm-kuji-nocancel--muted{padding:var(--s2) 0;font-size:11px;color:var(--c-ink-3);}
.fm-kuji-nocancel--emphasis{
  margin-top:10px;padding:10px var(--s3);
  background:var(--c-fill);border:1px solid var(--c-line);border-radius:var(--r2);
}
.fm-kuji-nocancel__label{
  font-size:11px;font-weight:var(--w-bold);color:var(--c-ink);margin-bottom:4px;
}
.fm-kuji-nocancel__body{font-size:11px;color:var(--c-ink-2);line-height:1.7;}

/* くじ：ラストワン賞（賞ランク外の別枠） */
.fm-kuji-last{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px;background:var(--c-fill);
  border:1px solid var(--c-line);border-radius:var(--r2);
}
.fm-kuji-last__img{
  flex-shrink:0;border-radius:8px;overflow:hidden;
  border:1px solid var(--c-line);background:var(--c-fill-2);
  cursor:zoom-in;
}
.fm-kuji-last__img img{width:100%;height:100%;object-fit:cover;display:block;}
.fm-kuji-last--series .fm-kuji-last__img{width:120px;height:120px;}
.fm-kuji-last--box .fm-kuji-last__img{width:72px;height:72px;}
.fm-kuji-last__badge{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--c-ink);border:1px solid var(--c-ink);
  border-radius:999px;padding:2px 8px;margin-bottom:6px;
}
.fm-kuji-last__title{font-size:14px;font-weight:700;line-height:1.35;}
.fm-kuji-last__how{font-size:12px;color:var(--c-ink-2);margin-top:6px;line-height:1.6;}
.fm-kuji-last--ended{opacity:.55;}
.fm-kuji-last--ended .fm-kuji-last__how{color:var(--c-ink-3);}
.fm-kuji-last-row{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-top:1.5px solid var(--c-line-2);
}
.fm-kuji-last-row__img{
  width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;
  border:1px solid var(--c-line);background:var(--c-fill-2);
}
.fm-kuji-last-row__img img{width:100%;height:100%;object-fit:cover;display:block;}
.fm-kuji-last-row__name{font-size:13px;font-weight:800;color:var(--c-ink);}
.fm-kuji-last-row__sub{font-size:12px;color:var(--c-ink-2);margin-top:2px;}
.fm-kuji-last-row__tag{
  flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--c-ink);border:1px solid var(--c-ink);
  border-radius:999px;padding:3px 8px;white-space:nowrap;
}

/* くじ：フラット賞の種類グリッド（KJ-02 ラインナップ / KJ-04 BOX内） */
.fm-kuji-flat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);
}
.fm-kuji-flat-item{text-align:center;min-width:0;}
.fm-kuji-flat-item__img{
  aspect-ratio:1;border-radius:8px;overflow:hidden;
  border:1px solid var(--c-line);background:var(--c-fill-2);
}
.fm-kuji-flat-item__img img{width:100%;height:100%;object-fit:cover;display:block;}
.fm-kuji-flat-item__no{font-size:9px;color:var(--c-ink-3);font-weight:600;margin-top:4px;}
.fm-kuji-flat-item__name{font-size:10px;color:var(--c-ink);font-weight:700;line-height:1.3;}
.fm-kuji-flat-item__meta{font-size:10px;color:var(--c-ink);font-weight:800;margin-top:2px;}
.fm-kuji-flat-item.is-gone{opacity:.45;}
.fm-kuji-flat-item.is-gone .fm-kuji-flat-item__img img{filter:grayscale(1);}
.fm-kuji-flat-item.is-gone .fm-kuji-flat-item__meta{color:var(--c-ink-3);font-weight:700;}
.fm-kuji-flat-item.is-low .fm-kuji-flat-item__meta{color:#b94040;font-weight:800;}

/* くじ：BOX詳細の在庫注意（残数のずれ） */
.fm-kuji-stock-note{
  margin-top:14px;padding:10px 12px;
  background:#fff6e4;border:1.5px solid #e0b45a;border-radius:var(--r2);
}
.fm-kuji-stock-note__head{display:flex;align-items:flex-start;gap:8px;}
.fm-kuji-stock-note__label{
  flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.06em;
  color:#fff;background:#9a6700;border-radius:4px;padding:3px 7px;line-height:1.2;
}
.fm-kuji-stock-note__body{font-size:12px;font-weight:650;color:var(--c-ink);line-height:1.55;}
.fm-kuji-stock-note__refresh{
  margin-top:10px;display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--c-line);border-radius:99px;
  padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;color:var(--c-ink);
}
.fm-kuji-stock-note__refresh:disabled{opacity:.5;cursor:default;}

.fm-unit{display:flex;flex-direction:column;}
.fm-unit__idx{
  font-size:13px;font-weight:var(--w-bold);color:var(--c-ink);margin-bottom:6px;
}
.fm-unit__name{
  font-size:14px;font-weight:var(--w-medium);color:var(--c-ink);margin-bottom:2px;
}
.fm-unit__meta{font-size:13px;color:var(--c-ink-2);line-height:1.6;}
.fm-unit .btn{
  margin-top:var(--s4);width:100%;font-size:13px;padding:10px;
}
.fm-unit__note{margin-top:var(--s4);font-size:12px;color:var(--c-ink-3);}

.fm-event-head{padding:0 var(--s4) var(--s3);}
.fm-event-head__name{font-size:15px;font-weight:var(--w-bold);color:var(--c-ink);}
.fm-event-head__meta{
  font-size:12px;color:var(--c-ink-2);margin-top:4px;line-height:1.6;
}

.fm-note{font-size:12px;color:var(--c-ink-3);margin-bottom:10px;}
.fm-muted{font-size:var(--t-xs);color:var(--c-ink-3);}

.fm-actions{margin:var(--s3) var(--s4) var(--s2);}
.fm-logout{
  width:100%;padding:12px;background:none;border:1px solid var(--c-line);
  border-radius:var(--r2);font-size:var(--t-sm);color:var(--c-ink-2);
  cursor:pointer;font-family:inherit;
}
.fm-withdraw-wrap{text-align:center;margin-bottom:var(--s5);}
.fm-withdraw{
  background:none;border:none;font-size:var(--t-xs);color:var(--c-ink-3);
  cursor:pointer;text-decoration:underline;font-family:inherit;
}

.fm-inline-link{
  background:none;border:none;padding:0;margin:0;text-align:left;
  font:inherit;font-size:inherit;color:var(--c-ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;font-family:inherit;
  line-height:1.5;
}

/* くじ：券演出（KJ-07）／開封（KJ-08） */
.kj-reveal{
  --kj-card-w:108px;
  position:relative;height:100%;min-height:100%;overflow:hidden;
  background:#07060c center/cover no-repeat;
  color:#fff;display:flex;flex-direction:column;
}
.kj-reveal--pc{--kj-card-w:148px;min-height:680px;}
.kj-reveal--pc .kj-reveal__foot{padding:16px 20px 88px;min-height:132px;}
.kj-reveal__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,6,14,.42) 0%,rgba(4,6,14,.18) 40%,rgba(4,6,14,.62) 100%);
  pointer-events:none;transition:background .8s ease;
}
.kj-reveal.is-enter .kj-reveal__veil{background:rgba(4,6,14,.9);}
.kj-reveal.is-enter .kj-reveal__stage{opacity:0;}
.kj-reveal.is-enter .kj-reveal__foot{opacity:0;}
.kj-reveal__stage{transition:opacity .7s ease .08s;}
.kj-reveal__foot{transition:opacity .55s ease .2s;}
.kj-reveal__skip,.kj-peel-page__skip{
  position:absolute;top:14px;right:16px;z-index:5;
  background:none;border:none;padding:0;
  color:rgba(255,255,255,.62);font-size:12px;font-weight:650;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit;
}
.kj-reveal__stage{position:relative;flex:1;display:flex;align-items:center;min-height:0;overflow:hidden;}
.kj-reveal__guide{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--kj-card-w) + 18px);height:calc(var(--kj-card-w) * 1.5 + 18px);
  border:1.5px solid rgba(255,255,255,.38);border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 40px rgba(255,255,255,.08);
  pointer-events:none;z-index:2;
}
.kj-reveal__viewport{width:100%;overflow:hidden;}
.kj-reveal.is-zooming .kj-reveal__viewport{overflow:visible;}
.kj-reveal.is-zooming .kj-reveal__guide{opacity:0;transition:opacity .2s;}
.kj-reveal__track{
  display:flex;align-items:center;gap:14px;width:max-content;
}
.kj-reveal__track.is-running{
  animation-name:kj-reveal-marquee;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes kj-reveal-marquee{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
.kj-reveal-card{
  flex:0 0 var(--kj-card-w);width:var(--kj-card-w);aspect-ratio:2/3;
  border-radius:10px;overflow:hidden;background:#0b0c14;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.kj-reveal-card img{width:100%;height:100%;object-fit:cover;display:block;}
.kj-reveal-card.is-red{
  box-shadow:0 0 0 1px #ff4d4d,0 0 16px #ff2a2acc,0 0 36px #ff3b3b88,0 8px 22px rgba(0,0,0,.45);
}
.kj-reveal-card.is-gold{
  box-shadow:0 0 0 1px #f3d06a,0 0 16px #e8b84dcc,0 0 36px #f0c14b88,0 8px 22px rgba(0,0,0,.45);
}
.kj-reveal-card.is-zoom{
  transform:scale(1.78);z-index:6;position:relative;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.kj-reveal.is-zooming .kj-reveal-card:not(.is-zoom){opacity:.22;transition:opacity .4s;}
.kj-reveal__foot{
  position:relative;z-index:3;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;
  padding:12px 20px 32px;
}
.kj-reveal__stop{
  min-width:168px;padding:13px 36px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.82);background:rgba(8,8,12,.55);
  color:#fff;font-size:16px;font-weight:800;letter-spacing:.12em;
  cursor:pointer;font-family:inherit;
  animation:kj-stop-breathe 1.7s ease-in-out infinite;
}
.kj-reveal__stop:disabled{
  opacity:.4;cursor:default;animation:none;transform:none;
}
@keyframes kj-stop-breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.055);}
}

.kj-peel-page{
  position:relative;height:100%;min-height:100%;overflow:hidden;
  background:#07060c center/cover no-repeat;
  color:#fff;display:flex;flex-direction:column;
}
.kj-peel-page--pc{min-height:680px;}
.kj-peel-page--pc .kj-peel-page__foot{padding:12px 20px 88px;min-height:132px;}
.kj-peel-page__veil{
  position:absolute;inset:0;
  background:rgba(4,6,14,.46);pointer-events:none;
}
.kj-peel-page__body{
  position:relative;z-index:1;flex:1;min-height:0;overflow:visible;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:48px 20px 12px;
}
.kj-peel-page__prog{position:relative;z-index:2;font-size:12px;font-weight:650;color:rgba(255,255,255,.62);min-height:18px;}
.kj-peel-page__hint{position:relative;z-index:2;font-size:14px;font-weight:750;text-align:center;line-height:1.5;}
.kj-peel-page__foot{
  position:relative;z-index:6;flex-shrink:0;
  display:flex;justify-content:center;align-items:center;
  min-height:72px;padding:4px 20px 28px;
  background:linear-gradient(180deg,transparent,rgba(4,6,14,.5) 36%);
}
.kj-peel-page__next{
  display:none;min-width:168px;padding:13px 28px;border-radius:999px;border:none;
  background:#fff;color:#111;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;
}
.kj-peel-page.is-opened .kj-peel-page__next{display:inline-flex;justify-content:center;}
.kj-peel-page.is-opened .kj-peel-page__hint{opacity:.55;font-weight:650;font-size:12px;}

.kj-peel{position:relative;z-index:0;width:196px;height:294px;flex-shrink:0;}
.kj-peel-page--pc .kj-peel{width:240px;height:360px;}
.kj-peel__halo{
  position:absolute;left:50%;top:50%;
  width:340%;aspect-ratio:1/1;height:auto;
  transform:translate(-50%,-50%);
  border-radius:50%;overflow:hidden;
  opacity:0;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(circle,#000 12%,#000 32%,transparent 72%);
  mask-image:radial-gradient(circle,#000 12%,#000 32%,transparent 72%);
}
.kj-peel__halo-rays{
  position:absolute;inset:-30%;
  background:
    radial-gradient(circle,var(--kj-halo,#f0c14b) 0%,transparent 36%),
    repeating-conic-gradient(from 0deg,var(--kj-halo,#f0c14b) 0 8deg,transparent 8deg 20deg);
  filter:blur(4px);
}
.kj-peel.is-celeb .kj-peel__halo{opacity:.9;}
.kj-peel.is-celeb .kj-peel__halo-rays{animation:kj-halo-spin 8s linear infinite;}
@keyframes kj-halo-spin{to{transform:rotate(360deg);}}
.kj-peel__card{
  position:relative;z-index:1;width:100%;height:100%;
  border-radius:12px;overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  touch-action:none;cursor:grab;
}
.kj-peel__face,.kj-peel__back{
  position:absolute;inset:0;border-radius:12px;overflow:hidden;
}
.kj-peel__face{background:#101018;display:flex;flex-direction:column;}
.kj-peel__photo{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:16px 16px 8px;background:#0c0c12;
}
.kj-peel__photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.kj-peel__meta{flex-shrink:0;padding:8px 14px 16px;text-align:center;}
.kj-peel__rank{font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-bottom:4px;}
.kj-peel__name{font-size:15px;font-weight:800;line-height:1.35;}
.kj-peel__sub{font-size:11px;color:rgba(255,255,255,.55);margin-top:4px;}
.kj-peel__back{
  background:#0b0c14;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.kj-peel__back img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.kj-peel.is-locked .kj-peel__card{cursor:default;pointer-events:none;}