:root{
  /* 山崎実業（tower / tosca）系のトーン：無彩色・低コントラスト・彩度ゼロ。
     赤や金といった差し色を一切使わないのがこのブランドの肝で、
     一色でも彩度の高い色を入れると途端に「量販店のチラシ」に寄る。 */
  --bg:#f4f3f1; --card:#ffffff; --ink:#2b2a28; --ink-soft:#8d8a85;
  --line:#e4e2df; --accent:#2b2a28; --accent-ink:#ffffff;
  --ok:#4a5a50; --ok-bg:#eef0ed; --warn:#6b6156; --warn-bg:#f1eee9;
  --shadow:none;
  --tint:rgba(43,42,40,.04);
  --dot:transparent;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161615; --card:#1e1e1c; --ink:#eceae7; --ink-soft:#94918c;
    --line:#302f2d; --accent:#eceae7; --accent-ink:#161615;
    --ok:#a8bdb0; --ok-bg:#222a25; --warn:#c0b3a3; --warn-bg:#2a2621;
    --shadow:none;
    --tint:rgba(236,234,231,.05);
    --dot:transparent;
  }
}
*{box-sizing:border-box}
/* .btn 等有 display:block，会盖过 [hidden]。必须显式压回去，
   否则「已经是最高等级」时那个升级按钮还会露出来。 */
[hidden]{display:none !important}
body{
  margin:0;color:var(--ink);
  background:var(--bg);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,system-ui,sans-serif;
  line-height:1.95;-webkit-text-size-adjust:100%;
  letter-spacing:.04em;font-weight:400;
  /* 日本語は単語の区切りに空白がないので、放っておくと「いただけま／す。」のように
     語の途中で折り返される。auto-phrase は文節を見て折ってくれる。
     要素ごとに指定すると必ず書き漏れるので body にまとめて載せる。
     英数字の折り返し方は変わらない。対応していないブラウザでは無視されるだけ。 */
  word-break:auto-phrase;
}
/* ---------- 背景写真とファーストビュー ---------- */

/* ページ全体の背景。スクロールしても動かない。
   【スクリム（かぶせる薄い膜）が要る理由】どんな写真を入れられるか
   こちらでは決められない。暗い写真を入れられた瞬間に黒い文字が読めなくなるので、
   明るい膜を一枚かぶせて、文字の読みやすさを写真に依存させない。 */
.bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--hero, linear-gradient(160deg,#eceae6 0%,#dedbd5 55%,#d2cfc9 100%));
  background-size:cover;background-position:center;
}
.bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(244,243,241,.42) 0%, rgba(244,243,241,.72) 55%, rgba(244,243,241,.88) 100%);
}
@media (prefers-color-scheme:dark){
  .bg{background:var(--hero, linear-gradient(160deg,#2c2c2a 0%,#232322 55%,#1b1b1a 100%));
      background-size:cover;background-position:center}
  .bg::after{
    background:linear-gradient(180deg, rgba(22,22,21,.62) 0%, rgba(22,22,21,.82) 55%, rgba(22,22,21,.93) 100%);
  }
}
/* 背景が透けるように、ページ自体の地色は敷かない。 */
body{background:transparent}

.head{max-width:34rem;margin:0 auto;padding:6rem 1.4rem 2.4rem;text-align:center}
/* 店名。【为什么强制大写】原本这里写死的是「KENT BAHATI」，宽字距的设计
   就是照全大写做的。多店铺之后店名改成从后台读，店家可能写成
   「KENT Bahati」，混合大小写在这个字距下会显得松垮。
   强制大写让排版不依赖店家怎么敲键盘。日文店名没有大小写，不受影响。 */
.shop{
  margin:0;font-size:.7rem;letter-spacing:.34em;font-weight:500;
  color:var(--ink-soft);text-transform:uppercase;
}
.hero-en{
  margin:1.6rem 0 .9rem;font-size:.64rem;letter-spacing:.42em;
  font-weight:500;color:var(--ink-soft);
}
.head h1{
  margin:0 0 1.2rem;font-size:1.5rem;line-height:1.85;font-weight:500;letter-spacing:.2em;
}
.lead{margin:0;font-size:.76rem;line-height:2.1;color:var(--ink-soft);letter-spacing:.08em}

/* 入力欄への近道（2026-08-29）。
   説明を読みたい人のために入力欄を一番下へ移したぶん、
   もう決めている人が毎回ページ全体をスクロールする羽目になる。それを避ける。
   【塗りつぶさない理由】ページ内で本当に押してほしい決定ボタンは
   一番下の「ギフトを確認する」。ここを黒く塗ると主役が二つになる。 */
.hero-cta{
  display:inline-block;margin-top:1.9rem;padding:.85rem 2.1rem;
  font-size:.74rem;font-weight:500;letter-spacing:.16em;text-decoration:none;
  color:var(--ink);border:1px solid var(--line);border-radius:2px;
  background:rgba(255,255,255,.55);
}
@media (prefers-color-scheme:dark){ .hero-cta{background:rgba(30,30,28,.55)} }

/* 近道で飛んだとき、カードが画面の上端に貼りつかないよう少し余白を残す。 */
#order-form{scroll-margin-top:1.2rem}
/* 【scroll-behavior:smooth を入れない】このページはギフト写真が
   後から読み込まれるぶん、高さが少しずつ伸びる。そのあいだに
   なめらかスクロールを始めると途中で打ち切られ、ほとんど動かないまま止まる。
   実機で確認済み。押しても何も起きないボタンになるくらいなら、
   一瞬で飛んだほうがよい。 */

/* カードはわずかに透かす。完全な不透明にすると、
   スマホではカードが画面幅いっぱいになって背景がほとんど見えなくなる。
   透かしすぎると文字が読みにくくなるので .92 まで。 */
.card{background:rgba(255,255,255,.92)}
@media (prefers-color-scheme:dark){ .card{background:rgba(30,30,28,.92)} }

/* 申し込みの途中では、上の説明ぶんを畳んで入力欄を上に出す。背景写真はそのまま。
   【書き漏らし注意】ヘッダーに要素を足したら、ここにも足すこと。 */
body:not([data-step="step-order"]) .head{padding:2rem 1.4rem 1.1rem}
body:not([data-step="step-order"]) .hero-en,
body:not([data-step="step-order"]) .head h1,
body:not([data-step="step-order"]) .hero-cta,
body:not([data-step="step-order"]) .lead{display:none}

main{max-width:34rem;margin:0 auto;padding:0 1.25rem 3rem}
/* 影は使わない。山崎実業の面は「線と余白」で分ける。
   影を入れた瞬間に量販店っぽい立体感が出て、このトーンから外れる。 */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:2rem 1.4rem;margin-top:1rem;
}
.card.center{text-align:center}
h2{
  margin:0 0 1.4rem;font-size:.92rem;font-weight:500;
  letter-spacing:.16em;text-align:center;
}
.field{display:block;margin:0 0 1rem}
.label{display:block;font-size:.8rem;font-weight:700;margin-bottom:.35rem}
input{
  width:100%;padding:.9rem .8rem;font-size:1rem;font-family:inherit;
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:2px;letter-spacing:.04em;
}
input:focus{outline:1px solid var(--accent);outline-offset:1px}
.hint{display:block;margin-top:.35rem;font-size:.75rem;color:var(--ink-soft)}
.btn{
  display:block;width:100%;padding:1.05rem 1rem;margin-top:.75rem;
  font-size:.9rem;font-family:inherit;font-weight:500;letter-spacing:.16em;
  border-radius:2px;border:1px solid transparent;cursor:pointer;
}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:active{transform:translateY(1px)}
.badge{
  display:inline-block;margin:0 0 .75rem;padding:.25rem .8rem;border-radius:2px;
  font-size:.7rem;font-weight:500;letter-spacing:.1em;
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);
}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.big{margin:0 0 1rem;font-size:1rem}
.note{margin:0 0 1rem;font-size:.85rem;color:var(--ink-soft)}
.sub{margin:1rem 0 0;text-align:center;font-size:.85rem}
.sub a{color:var(--ink-soft)}
.err{margin:.75rem 0 0;font-size:.85rem;color:var(--accent)}
.tier-line{margin:0 0 .25rem;font-size:1.15rem}
.tier-line strong{font-size:1.9rem;color:var(--accent);vertical-align:-.1em}
.tier-why{margin:0 0 1.25rem;font-size:.8rem;color:var(--ink-soft)}
.ladder{list-style:none;margin:0 0 1rem;padding:0;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ladder li{display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;font-size:.85rem;border-top:1px solid var(--line)}
.ladder li:first-child{border-top:0}
.ladder li .n{
  flex:0 0 1.5rem;height:1.5rem;border-radius:50%;background:var(--line);color:var(--ink-soft);
  display:grid;place-items:center;font-size:.75rem;font-weight:700;
}
.ladder li .t{flex:1}
.ladder li .g{font-weight:700;color:var(--ink-soft)}
.ladder li.current{background:var(--ok-bg)}
.ladder li.current .n{background:var(--ok);color:var(--card)}
.ladder li.current .g{color:var(--ok)}
.ladder li.done{opacity:.45}
.count-line{margin:0 0 1rem;font-size:.9rem}
.count-line strong{font-size:1.4rem;color:var(--accent)}
/* 返回。放在卡片左上角，位置固定，客人不用找。 */
.back{
  display:inline-block;margin:-.4rem 0 .9rem -.35rem;padding:.3rem .35rem;
  background:none;border:0;font:inherit;font-size:.85rem;color:var(--ink-soft);cursor:pointer;
}
.back:hover{color:var(--ink)}
.gifts{display:grid;gap:.6rem;margin-bottom:1.25rem}
.gift{
  display:flex;align-items:center;gap:.55rem;
  padding:.7rem;border:1px solid var(--line);border-radius:2px;background:var(--bg);
}
.gift.on{border-color:var(--accent);background:var(--card)}
.gift .gtext{flex:1;min-width:0}
/* 長い名前でも右の個数ボタンを画面外へ押し出さない。
   カスタム商品は「カスタムキーホルダー」のように名前が長くなりがちで、
   折り返せないと＋ボタンが画面の外に出てしまう（375px で実際に起きた）。 */
.gift .gname{font-weight:700;font-size:.9rem;overflow-wrap:break-word}
.gift .gnote{display:block;font-size:.75rem;color:var(--ink-soft)}
.stepper{display:flex;align-items:center;gap:.1rem;flex:0 0 auto}
.stepper button{
  width:1.95rem;height:1.95rem;border-radius:2px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-size:1.15rem;line-height:1;cursor:pointer;
}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper .qty{
  min-width:1.6rem;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;
}
.gift.on .stepper .qty{color:var(--accent)}
.masked{
  margin:0 0 1rem;padding:.85rem;border-radius:2px;background:var(--bg);border:1px solid var(--line);
  text-align:center;font-size:1.35rem;font-weight:700;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.prefill{
  margin:0 0 1.25rem;padding:.85rem;border-radius:2px;
  background:var(--bg);border:1px solid var(--line);
}
.prefill-note{margin:0;font-size:.8rem;color:var(--ink-soft)}
.prefill .btn{margin-top:.6rem}
.confirm{
  margin:0 0 1rem;padding:1rem;border-radius:2px;
  background:var(--warn-bg);border:1px solid var(--line);
}
.confirm-q{margin:0 0 .75rem;font-size:.9rem;font-weight:700;color:var(--warn)}
.lock{margin:0 0 1rem;font-size:.78rem;color:var(--warn)}
.chosen{margin:0 0 1.25rem;padding:.75rem;border-radius:2px;background:var(--ok-bg);color:var(--ok);font-size:.85rem;font-weight:700}
.spinner{
  width:2rem;height:2rem;margin:0 auto 1rem;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}
.loading-text{margin:0;font-weight:700}
#status-result{margin-top:1rem;padding:1rem;border-radius:2px;background:var(--bg);border:1px solid var(--line);font-size:.9rem}
.foot{max-width:34rem;margin:0 auto;padding:0 1.25rem 3rem;text-align:center;font-size:.75rem;color:var(--ink-soft)}

/* ギフトのサムネイル（2026-08-29）。画像なしのギフトは枠だけ表示して、
   ある・ないで行の高さが変わらないようにする。 */
.gift .gthumb{
  flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:2px;
  background:var(--bg);border:1px solid var(--line);overflow:hidden;
}
.gift.on .gthumb{border-color:var(--accent)}
.gift .gthumb img{width:100%;height:100%;object-fit:cover;display:block}


/* ---------- トップ画面の各セクション ----------
   山崎実業（tower / tosca）のトーンに寄せた版。守っている決まりごと：
   ・彩度のある色を一切使わない（一色でも入ると量販店のチラシに寄る）
   ・影を使わない。面は「細い線」と「余白」だけで分ける
   ・欧文は大文字＋広い字間で小さく、和文はその下に控えめに
   ・写真は正方形で揃え、白背景。トリミングを揃えることが密度より効く */

.sec-sub{
  margin:-1rem 0 1.8rem;text-align:center;
  font-size:.74rem;letter-spacing:.1em;color:var(--ink-soft);
}

/* ごあいさつ。罫線も番号も使わず、余白と字間だけで作る。
   ここに枠や記号を足すと、下のギフト一覧より目立ってしまう。 */
.greet{text-align:center}
.greet-en{
  margin:0 0 1.2rem;font-size:.62rem;letter-spacing:.42em;
  font-weight:500;color:var(--ink-soft);
}
.greet-body{margin:0 0 .9rem;font-size:.88rem;line-height:2.1;letter-spacing:.08em}
.greet-note{margin:0;font-size:.74rem;line-height:2.05;color:var(--ink-soft);letter-spacing:.06em}

/* お申し込みの決まりごと。見出しと本文を上下に積む。
   .flow と違って番号がないので、左の欄を空けず全幅で使う。 */
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rules li{padding:1.15rem .2rem;border-bottom:1px solid var(--line)}
.rules .rt{display:block;font-size:.82rem;letter-spacing:.08em}
.rules .rd{
  display:block;margin-top:.3rem;
  font-size:.7rem;line-height:1.9;color:var(--ink-soft);letter-spacing:.06em;
}
#step-order > .card + .card{margin-top:1rem}

/* ギフト一覧。既定は「スマホ 2 列、画面が広ければ 3 列」「写真は正方形」。
   店舗は管理画面で列数と写真の比率を選べる（§62）。選んだときだけ
   .cols-1/2/3、.ratio-tall/wide が付き、既定より詳しいセレクタなので
   下の @media より強い —— つまり選んだ列数は画面幅で勝手に変わらない。 */
.lineup{
  --cols:2;--pratio:1;
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:1.5rem 1rem;
  margin:0;padding:0;list-style:none;
}
.lineup.cols-1{--cols:1}
.lineup.cols-2{--cols:2}
.lineup.cols-3{--cols:3}
.lineup.ratio-tall{--pratio:3/4}
.lineup.ratio-wide{--pratio:4/3}
/* 1 列は写真が大きく出る。画面が広いときに 1 枚で全幅を占めると
   写真というより背景に見えるので、そこだけ幅を抑えて中央に置く。 */
.lineup.cols-1{max-width:22rem;margin-inline:auto}
.lineup .pimg{
  aspect-ratio:var(--pratio);background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;
}
.lineup .pimg img{width:100%;height:100%;object-fit:cover;display:block}
/* 画像未登録の代わり。線だけで包みの形を描く。 */
.lineup .pimg .noimg{
  width:2rem;height:1.7rem;border:1px solid var(--line);position:relative;
}
.lineup .pimg .noimg::before{
  content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;
  background:var(--line);
}
.lineup .pname{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:.8rem;font-size:.76rem;line-height:1.75;font-weight:500;letter-spacing:.06em;
}
.lineup .pnote{
  display:block;margin-top:.25rem;font-size:.68rem;color:var(--ink-soft);letter-spacing:.06em;
}

/* もらえる数。罫線だけの表。数字は炭色のまま大きく。 */
.tiers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tiers li{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem .2rem;border-bottom:1px solid var(--line);
}
.tiers .tt{font-size:.82rem;letter-spacing:.08em}
.tiers .tg{display:flex;align-items:baseline;gap:.2rem}
.tiers .tg em{font-style:normal;font-size:1.8rem;font-weight:500;line-height:1;letter-spacing:0}
.tiers .tg small{font-size:.7rem;color:var(--ink-soft)}
.tiers-note{margin:1.4rem 0 0;font-size:.7rem;color:var(--ink-soft);text-align:center;letter-spacing:.06em}

/* 流れ。番号は欧文の小さな数字で、線で区切るだけ。 */
.flow{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.flow li{
  display:grid;grid-template-columns:2.4rem 1fr;gap:0 .9rem;align-items:baseline;
  padding:1.15rem .2rem;border-bottom:1px solid var(--line);
}
.flow .fn{font-size:.7rem;letter-spacing:.14em;color:var(--ink-soft)}
.flow .ft{font-size:.82rem;letter-spacing:.08em}
.flow .fd{
  grid-column:2;margin-top:.3rem;
  font-size:.7rem;line-height:1.9;color:var(--ink-soft);letter-spacing:.06em;
}

.foot{padding-top:2rem;letter-spacing:.06em}

@media (min-width:26rem){
  .head h1{font-size:1.7rem}
  .lineup{--cols:3}
}
@media (min-width:48rem){
  /* 画面が広いときは帯を薄くする。縦長の写真が画面いっぱいに出ると重い。 */
  .hero{aspect-ratio:21/9}
}

/* お写真のご登録（2026-08-29、カスタム商品）。
   スマホで撮った写真をその場で選ぶ画面なので、枠は大きめに取る ——
   小さいサムネイルだと「本当にこの写真で合っているか」が確認できない。 */
.pslots{display:grid;gap:.75rem;margin-bottom:1.25rem}
.pslot{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem;border:1px solid var(--line);border-radius:2px;background:var(--bg);
  /* grid の子は既定で「中身より狭くならない」。これがないと、中の三つを足した幅で
     枠を突き破り、カードの外まではみ出す（375px で実際に起きた）。 */
  min-width:0;
}
.pslot.filled{border-color:var(--ok);background:var(--card)}
.pslot .pthumb{
  flex:0 0 auto;width:3.4rem;height:3.4rem;border-radius:2px;
  background:var(--card);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--ink-soft);overflow:hidden;
}
.pslot.filled .pthumb{border-style:solid;border-color:var(--ok)}
.pslot .pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pslot .ptext{flex:1;min-width:0}
.pslot .pname{display:block;font-weight:700;font-size:.85rem;overflow-wrap:break-word}
.pslot .pstate{display:block;margin-top:.15rem;font-size:.75rem;color:var(--ink-soft)}
.pslot.filled .pstate{color:var(--ok)}
.pslot .pbtn{
  flex:0 0 auto;padding:.55rem .8rem;font:inherit;font-size:.78rem;
  border:1px solid var(--line);border-radius:2px;background:var(--card);
  color:var(--ink);cursor:pointer;
}
.pslot .pbtn:disabled{opacity:.4;cursor:progress}
.pnote{margin:0 0 1rem;font-size:.75rem;line-height:1.9;color:var(--ink-soft)}
/* カスタム商品の目印。選ぶ時点で「写真が要る」「時間がかかる」を伝える ——
   後の画面で初めて知らせると、選び直しになって体験が悪い。 */
.gtag{
  display:inline-block;margin:.25rem .25rem 0 0;padding:.1rem .4rem;
  font-size:.64rem;letter-spacing:0;border-radius:2px;
  background:var(--warn-bg);color:var(--warn);max-width:100%;
  /* 折り返さない。折り返すとギフト一件の高さが倍になり、一画面に入る数が減る。 */
  white-space:nowrap;
}

/* ---------- クーポン（2026-09-07）---------- */
/* ギフト一覧のタグ。既存の .gtag と同じ形。「クーポン」の一語だけにして折り返さない。 */
.gtag.coupon{background:var(--ok-bg);color:var(--ok)}
/* 完了画面のクーポン。リンクは「ボタンの形の a」。
   .btn は display:block なので a に載せるとそのまま幅いっぱいのボタンになる。 */
.coupons{margin:0 0 1.25rem;text-align:left}
.coupon{
  padding:1rem .95rem;margin-bottom:.75rem;
  border:1px solid var(--line);border-radius:2px;background:var(--bg);
}
.coupon .cname{display:block;font-weight:700;font-size:.92rem;overflow-wrap:break-word}
.coupon .cterms{display:block;margin-top:.15rem;font-size:.8rem;color:var(--ink-soft)}
.coupon .cperiod{display:block;margin-top:.35rem;font-size:.78rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.coupon .cwait{display:block;margin-top:.5rem;font-size:.8rem;color:var(--warn)}
a.btn{text-decoration:none;text-align:center;box-sizing:border-box}
.coupon a.btn{margin-top:.75rem}
.coupon-note{margin:.25rem 0 0;font-size:.75rem;line-height:1.9;color:var(--ink-soft);text-align:left}