/* ═══════════════════════════════════════════════════════════════
   KASANÉ — LP v2  stylesheet
   色は4色のみ（Pearl / Noir / Antique Gold / Stone Taupe）。
   ほかの色は上記4色の rgba 派生だけで作る。新しい HEX を足さないこと。
   → 02_marketing/brand/BRAND.md §2
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── ブランド4色。ここ以外に HEX を書かない ── */
  --pearl:#F7F3EE;
  --noir:#22201E;
  --gold:#B79B6C;
  --taupe:#B7A99A;

  /* ── 4色からの派生（rgba のみ） ── */
  --ink:rgba(34,32,30,1);
  --muted:rgba(34,32,30,.64);
  --faint:rgba(34,32,30,.44);
  --line:rgba(183,169,154,.52);
  --line-soft:rgba(183,169,154,.28);
  --wash:rgba(183,169,154,.13);
  --wash-deep:rgba(183,169,154,.22);
  --gold-soft:rgba(183,155,108,.16);
  --shadow:0 18px 44px rgba(34,32,30,.09);
  --shadow-soft:0 10px 26px rgba(34,32,30,.06);

  --serif:"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;

  --wrap:1120px;
  --gutter:20px;
}

/* ── base ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--pearl)}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.95;
  letter-spacing:.02em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── 背景 ────────────────────────────────────────────────────
   最初は格子＋動きを入れたが「うるさい」ため撤去。
   いまは動かさない。金と砂色のごく薄い光を2つ置くだけにしてある。
   ⚠ 格子やアニメーションを戻さないこと。面が騒がしくなる。          */
.bg-pattern{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(closest-side,rgba(183,155,108,.07),transparent 70%),
    radial-gradient(closest-side,rgba(183,169,154,.09),transparent 70%);
  background-size:82vmax 82vmax,68vmax 68vmax;
  background-position:2% 4%,98% 74%;
  background-repeat:no-repeat,no-repeat;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.wrap-narrow{width:min(760px,100% - var(--gutter)*2);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:8px;z-index:1000;padding:10px 16px;background:var(--pearl);border:1px solid var(--line);transform:translateY(-160%)}
.skip-link:focus-visible{transform:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── typography helpers ─────────────────────────────────────── */
.eyebrow{
  margin:0 0 14px;color:var(--gold);
  font:600 10px/1 var(--sans);letter-spacing:.34em;
}
.lead{color:var(--muted);font-size:14px}
.note{color:var(--faint);font-size:12px;line-height:1.9}

.section{padding:76px 0}
.section-head{margin-bottom:38px}
.section-head h2{
  font:400 clamp(25px,6.4vw,38px)/1.5 var(--serif);
  letter-spacing:.06em;
}
.section-head h2 + p{margin-top:14px;color:var(--muted);font-size:14px;max-width:34em}
.section-head.center{text-align:center}
.section-head.center h2 + p{margin-inline:auto}

/* 見出しの上の飾り。英字ラベルの代わりに、金の細い罫と小さな菱形を置く */
.rule{
  position:relative;width:56px;height:1px;margin:0 0 24px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);border:0;
}
.rule::after{
  content:"";position:absolute;top:-2.5px;left:50%;
  width:6px;height:6px;margin-left:-3px;
  background:var(--gold);transform:rotate(45deg);
}
.section-head.center .rule{margin-inline:auto}

/* ── 賑やかさのための小物 ───────────────────────────────── */

/* 金のマーカー（本文の要点に引く）。折り返しても各行に引かれるようにする */
.mark{
  background:linear-gradient(transparent 58%,rgba(183,155,108,.55) 58%,rgba(183,155,108,.55) 94%,transparent 94%);
  padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* 吹き出し。**現在どこからも使っていない**（2026-08-26 に全箇所やめた）。
   また使いたくなったときのために定義だけ残してある。使うなら <p class="bubble"> だけでよい。 */
.bubble{
  position:relative;display:inline-block;
  margin:18px 0 0;padding:15px 19px;
  background:var(--pearl);border:1px solid var(--gold);border-radius:16px;
  color:var(--ink);font-size:13px;line-height:1.95;
  box-shadow:0 8px 22px rgba(34,32,30,.07);
}
/* しっぽ：正方形を45°回して2辺だけ枠線を出す。
   三角形（border trick）だと片側にしか線が出ないため、この作り方にしている。
   疑似要素は本体の border より後に描かれるので、吹き出し下辺の線は自然に隠れる。 */
.bubble::after{
  content:"";position:absolute;left:26px;bottom:-8px;
  width:14px;height:14px;background:var(--pearl);
  border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  transform:rotate(45deg);
}
.bubble.small{margin-top:13px;padding:11px 15px;font-size:12px;border-radius:13px}
.bubble.small::after{left:20px;width:12px;height:12px;bottom:-7px}

/* 通し番号のタグ */
.badge{
  display:inline-grid;place-content:center;
  min-width:34px;height:26px;padding:0 9px;
  background:var(--gold);color:var(--pearl);
  font:600 11px/1 var(--sans);letter-spacing:.14em;
}
.scene-card figure .badge{
  position:absolute;top:0;left:0;z-index:2;height:30px;
  background:rgba(34,32,30,.86);
  border-right:1px solid rgba(183,155,108,.6);
  border-bottom:1px solid rgba(183,155,108,.6);
}

/* ── button ─────────────────────────────────────────────────── */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:58px;padding:0 30px;width:100%;
  background:var(--noir);color:var(--pearl);
  font:600 14px var(--sans);letter-spacing:.1em;
  border:1px solid var(--noir);cursor:pointer;
  transition:background .25s,color .25s,transform .25s;
}
.button:hover{background:transparent;color:var(--noir);transform:translateY(-1px)}
.button .arrow{transition:transform .25s}
.button:hover .arrow{transform:translateX(4px)}
.button.ghost{background:transparent;color:var(--noir)}
.button.ghost:hover{background:var(--noir);color:var(--pearl)}
.button[aria-disabled="true"]{
  background:var(--wash-deep);border-color:var(--line);color:var(--faint);
  cursor:default;transform:none;
}
.button[aria-disabled="true"]:hover{background:var(--wash-deep);color:var(--faint);transform:none}
.textlink{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
  white-space:nowrap;border-bottom:1px solid var(--gold);padding-bottom:2px;
}

/* ── header ─────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:200;height:62px;
  background:rgba(247,243,238,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  width:min(1240px,100% - 32px);height:100%;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-logo{width:106px;height:auto}
.brand small{
  display:none;color:var(--muted);font-size:9px;letter-spacing:.16em;white-space:nowrap;
}
.menu-button{
  display:grid;place-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;
}
.menu-button i{display:block;width:20px;height:1px;background:var(--noir);transition:.22s}
.menu-button[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-button[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-button[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.global-nav{
  position:fixed;inset:62px 0 auto;display:none;flex-direction:column;
  padding:8px 20px 24px;background:var(--pearl);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.global-nav.is-open{display:flex}
.global-nav a{padding:15px 2px;font-size:14px;border-bottom:1px solid var(--line-soft)}
.global-nav .nav-cta{
  margin-top:18px;border:0;background:var(--noir);color:var(--pearl);
  text-align:center;padding:17px;font-weight:600;letter-spacing:.08em;
}

/* ── hero ───────────────────────────────────────────────────
   横長の実物写真を敷き、墨のグラデーションを重ねた上に文言を置く。
   スマホ＝下寄せ・縦グラデ／PC＝左寄せ・横グラデ。
   ─────────────────────────────────────────────────────────── */
/* スマホ：横長写真を切らずに全部見せ、その下端に文言を重ねる。
   写真いっぱいに文字を載せると額縁が切れてしまうため、重なりは下2割だけにする。 */
.hero{position:relative;isolation:isolate;background:var(--noir);color:var(--pearl)}
.hero-media{position:relative;z-index:0}
.hero-media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center}
/* 透過の墨。下から立ち上げて文字を読ませる */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,
      rgba(34,32,30,.97) 0%,
      rgba(34,32,30,.90) 12%,
      rgba(34,32,30,.55) 26%,
      rgba(34,32,30,.20) 42%,
      rgba(34,32,30,.04) 60%,
      rgba(34,32,30,0) 100%);
}
.hero-body{position:relative;z-index:1;width:100%;margin-top:-22%;padding:0 0 44px;color:var(--pearl)}
.hero-logo{width:min(260px,72%);height:auto;margin:0 0 22px}
.hero h1{
  font:400 clamp(27px,7.4vw,44px)/1.6 var(--serif);
  letter-spacing:.05em;
  text-shadow:0 2px 20px rgba(34,32,30,.5);
}
/* 「素材」のような語の途中で折り返さない（対応ブラウザのみ効く） */
.hero-sub,.hero h1,.section-head h2,.about-lead p,.scene-card p,.flow-body p,
.product-title,.product-sub,.include-list p,.guide-list span,.cta h2,.cta p{
  word-break:auto-phrase;
}
.hero-sub{
  margin-top:16px;color:rgba(247,243,238,.86);
  font-size:13.5px;line-height:2;max-width:30em;
  text-shadow:0 1px 12px rgba(34,32,30,.5);
}
.hero-spec{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;
  font-size:11px;letter-spacing:.06em;color:var(--pearl);
}
.hero-spec li{
  padding:6px 12px;
  border:1px solid rgba(247,243,238,.42);
  background:rgba(34,32,30,.28);
  backdrop-filter:blur(3px);
}
.hero-spec span{margin-left:4px;opacity:.7;font-size:10px}
.hero-actions{margin-top:26px;display:grid;gap:16px;justify-items:start}
/* 扉のボタンは反転（Pearl 地に Noir 文字）で最前面に立たせる */
.hero .button{
  background:var(--pearl);color:var(--noir);border-color:var(--pearl);
  box-shadow:0 10px 30px rgba(34,32,30,.35);
}
.hero .button:hover{background:transparent;color:var(--pearl)}
.textlink.light{color:var(--pearl);border-bottom-color:rgba(247,243,238,.7)}

/* ── marquee ────────────────────────────────────────────────── */
.marquee{
  overflow:hidden;padding:14px 0;background:var(--wash);
  border-bottom:1px solid var(--line-soft);
}
.marquee-track{
  display:flex;gap:12px;width:max-content;
  animation:marquee 46s linear infinite;
}
.marquee-track img{
  width:210px;height:148px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line-soft);
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── about（どんなギフトか。素材の話と Before/After をひと続きに） ── */
.about{background:transparent}
.about .section-head h2{font:400 clamp(21px,5.5vw,32px)/1.7 var(--serif)}
.about-lead{max-width:38em;margin-inline:auto;text-align:center}
.about-lead p{color:var(--muted);font-size:14px;text-align:left}
.about-lead .bubble{text-align:left}
.about-visual{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:34px 0 46px;
}
.tile-cluster{
  width:150px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  transform:rotate(-3deg);
}
.tile-cluster img{
  aspect-ratio:1;object-fit:cover;
  border:4px solid var(--pearl);box-shadow:0 4px 12px rgba(34,32,30,.16);
}
.tile-cluster img:nth-child(2n){transform:translateY(11px) rotate(4deg)}
.about-arrow{
  flex:0 0 auto;display:grid;place-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  font-size:16px;line-height:1;background:var(--pearl);
}
.about-result{
  width:158px;aspect-ratio:297/210;object-fit:cover;
  border:6px solid var(--noir);box-shadow:0 14px 28px rgba(34,32,30,.18);
}

/* ── proof / before-after（about の中に置く） ───────────────── */
.proof{background:var(--wash);border-block:1px solid var(--line-soft)}
.proof-slider{position:relative}
.ba{
  position:relative;overflow:hidden;aspect-ratio:1400/985;
  border:1px solid var(--line);background:var(--wash-deep);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;
}
.ba img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);
  width:46px;transform:translateX(-50%);
  background:none;border:0;padding:0;cursor:ew-resize;touch-action:none;
}
.ba-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-50%);background:var(--pearl);
  box-shadow:0 0 0 1px rgba(34,32,30,.18);
}
.ba-handle::after{
  content:"◀▶";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:grid;place-content:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--pearl);color:var(--noir);
  font-size:10px;letter-spacing:.06em;
  box-shadow:0 4px 16px rgba(34,32,30,.26);
}
.ba-label{
  position:absolute;top:12px;z-index:2;padding:5px 12px;
  background:rgba(34,32,30,.46);color:var(--pearl);
  font-size:10px;letter-spacing:.18em;pointer-events:none;
}
.ba-label.is-before{left:12px}
.ba-label.is-after{right:12px}
.proof-detail{margin-top:30px}
.proof-detail img{width:100%;border:1px solid var(--line)}
.proof-detail figcaption{margin-top:14px;color:var(--muted);font-size:13px}
.proof-detail figcaption b{color:var(--ink);font-weight:600}

/* ── scenes（贈る場面） ─────────────────────────────────────── */
.scenes{background:var(--wash);border-block:1px solid var(--line-soft)}
.scene-grid{display:grid;gap:34px}
.scene-card figure{position:relative;margin:0;overflow:hidden;background:var(--wash-deep)}
.scene-card img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s ease;
}
.scene-card:hover img{transform:scale(1.02)}
.scene-card img.pos-lower{object-position:center 46%}
.scene-card h3{
  margin-top:18px;font:400 19px/1.6 var(--serif);letter-spacing:.07em;
}
.scene-card h3::before{
  content:"";display:block;width:22px;height:1px;margin-bottom:14px;background:var(--gold);
}
.scene-card p{margin-top:9px;color:var(--muted);font-size:13px}
.scene-note{margin-top:36px;color:var(--faint);font-size:12px}

/* ── flow ───────────────────────────────────────────────────── */
.flow{background:transparent}
.flow-list{display:grid;gap:26px}
.flow-step{
  background:var(--pearl);border:1px solid var(--line);
  display:grid;grid-template-rows:auto 1fr;
}
.flow-visual{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--wash-deep);
  display:grid;place-items:center;
}
.flow-visual::after{
  content:attr(data-step);
  font:400 68px/1 var(--serif);color:rgba(183,155,108,.42);letter-spacing:.04em;
}
/* 写真が読み終わるまでは隠しておく。未着（404）のあいだは script.js が img ごと外し、
   ::after の番号だけの版が見えたままになる。壊れた画像アイコンを一瞬も出さないため。 */
.flow-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  visibility:hidden;
}
.flow-visual img.is-loaded{visibility:visible}
.flow-body{padding:22px 22px 26px;display:flex;gap:14px}
.flow-num{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-content:center;
  border:1px solid var(--gold);color:var(--gold);
  font:600 11px var(--sans);border-radius:50%;margin-top:4px;
}
.flow-body h3{font:400 19px/1.6 var(--serif);letter-spacing:.06em}
.flow-body p{margin-top:8px;color:var(--muted);font-size:13px}
.flow-body p b{color:var(--ink);font-weight:600}

/* ── UGC（初回公開では非表示） ──────────────────────────────── */
.ugc-grid{display:grid;gap:20px}
.ugc-card{margin:0}
.ugc-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.ugc-card figcaption{margin-top:10px;color:var(--muted);font-size:12px}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  position:relative;cursor:pointer;list-style:none;
  padding:20px 46px 20px 0;font-size:14px;font-weight:600;letter-spacing:.03em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{padding:0 8px 22px 0;color:var(--muted);font-size:13px}

/* ── CTA ────────────────────────────────────────────────────── */
.cta{background:var(--noir);color:var(--pearl)}
.cta .eyebrow{color:var(--gold)}
.cta h2{font:400 clamp(24px,6.2vw,36px)/1.6 var(--serif);letter-spacing:.06em}
.cta p{margin-top:18px;color:rgba(247,243,238,.72);font-size:14px}
.cta-figure{margin-top:34px;border:1px solid rgba(247,243,238,.18)}
.cta-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cta .button{
  margin-top:30px;background:var(--pearl);color:var(--noir);border-color:var(--pearl);
}
.cta .button:hover{background:transparent;color:var(--pearl)}
.cta-note{margin-top:16px;color:rgba(247,243,238,.5);font-size:12px}

/* ── footer ─────────────────────────────────────────────────── */
.site-footer{background:var(--noir);color:rgba(247,243,238,.66);padding:52px 0 26px;font-size:12px}
.footer-grid{display:grid;gap:32px}
.footer-logo{width:112px;height:auto;margin-bottom:16px}
.footer-tagline{color:rgba(247,243,238,.66);line-height:2}
.site-footer h3{margin-bottom:12px;color:var(--pearl);font-size:11px;letter-spacing:.16em;font-weight:600}
.site-footer nav a{display:block;padding:5px 0;color:rgba(247,243,238,.66)}
.site-footer nav a:hover{color:var(--pearl)}
.footer-bottom{
  margin-top:40px;padding-top:18px;border-top:1px solid rgba(247,243,238,.14);
  display:grid;gap:8px;color:rgba(247,243,238,.42);font-size:11px;
}

/* ═══ order.html ═══════════════════════════════════════════════ */
.product{padding:34px 0 0}
.product-grid{display:grid;gap:30px}
.product-main{border:1px solid var(--line);background:var(--wash)}
.product-main img{width:100%;aspect-ratio:1400/985;object-fit:cover}
.product-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.product-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.product-title{font:400 clamp(23px,6vw,29px)/1.55 var(--serif);letter-spacing:.05em}
.product-sub{margin-top:14px;color:var(--muted);font-size:14px}
.price{display:flex;align-items:baseline;gap:10px;margin:26px 0 4px}
.price b{font:400 34px var(--serif);letter-spacing:.03em}
.price span{color:var(--muted);font-size:12px}
.spec-list{margin-top:24px;border-top:1px solid var(--line)}
.spec-list div{
  display:grid;grid-template-columns:6.5em 1fr;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:13px;
}
.spec-list dt{color:var(--faint);font-size:12px;letter-spacing:.06em}
.spec-list dd{color:var(--ink)}
.buy{margin-top:28px}
.buy-note{margin-top:14px;padding:14px 16px;border:1px solid var(--gold);background:var(--gold-soft);color:var(--muted);font-size:12px;line-height:1.9}

.include-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.include-list li{background:var(--pearl);padding:22px 22px 24px}
.include-list .badge{margin-bottom:12px}
.include-list h3{font:400 17px var(--serif);letter-spacing:.05em}
.include-list p{margin-top:7px;color:var(--muted);font-size:13px}

.guide-list{display:grid;gap:18px}
.guide-list li{padding-left:26px;position:relative;font-size:14px}
.guide-list li::before{
  content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--gold);
}
.guide-list b{display:block;font-weight:600}
.guide-list span{display:block;margin-top:5px;color:var(--muted);font-size:13px}

.req-table{width:100%;border-collapse:collapse;font-size:13px}
.req-table th,.req-table td{
  padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;
}
.req-table th{width:8.5em;color:var(--faint);font-size:12px;font-weight:600;letter-spacing:.05em}
.req-table tr:first-child th,.req-table tr:first-child td{border-top:1px solid var(--line)}
/* 左端は他セクションと揃えたうえで、行長だけ読みやすい幅に抑える */
.req-scroll{overflow-x:auto;max-width:780px}

.after-buy{display:grid;gap:20px;counter-reset:ab;max-width:780px}
.after-buy li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  font-size:14px;
}
.after-buy li::before{
  counter-increment:ab;content:counter(ab);
  width:24px;height:24px;display:grid;place-content:center;
  border:1px solid var(--gold);border-radius:50%;
  color:var(--gold);font-size:11px;font-weight:600;margin-top:3px;
}
.after-buy span{display:block;margin-top:5px;color:var(--muted);font-size:13px}

.backlink{padding:34px 0 0}

/* ── tablet ─────────────────────────────────────────────────── */
@media(min-width:700px){
  body{font-size:16px}
  :root{--gutter:32px}
  .section{padding:96px 0}
  .brand small{display:block}
  /* タブレット以上：写真を全面に敷き、その上に文言を載せる */
  .hero{
    min-height:min(84svh,700px);
    display:flex;align-items:flex-end;
  }
  .hero-media{position:absolute;inset:0}
  .hero-media img{height:100%;aspect-ratio:auto;object-position:70% 40%}
  .hero-media::after{
    background:
      linear-gradient(to top,
        rgba(34,32,30,.92) 0%,
        rgba(34,32,30,.76) 24%,
        rgba(34,32,30,.40) 50%,
        rgba(34,32,30,.12) 76%,
        rgba(34,32,30,.04) 100%);
  }
  .hero-body{margin-top:0;padding:80px 0 56px}
  .hero-logo{width:300px}
  .hero-sub{font-size:15px}
  .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
  .hero-actions .button{width:auto;min-width:min(300px,100%)}
    .about-visual{gap:40px;margin:44px 0 56px}
  .tile-cluster{width:200px;gap:8px}
  .about-result{width:230px}
  .about-arrow{width:48px;height:48px;font-size:20px}
  .scene-grid{grid-template-columns:1fr 1fr;gap:40px 30px}
  .flow-list{grid-template-columns:1fr 1fr;gap:24px}
  .ugc-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr}
  .footer-bottom{grid-template-columns:1fr auto;align-items:center}
  .product-grid{grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
  .include-list{grid-template-columns:1fr 1fr}
  .guide-list{grid-template-columns:1fr 1fr;gap:26px 34px}
}

/* ── desktop ────────────────────────────────────────────────── */
@media(min-width:1000px){
  :root{--gutter:40px}

  /* PC：文言を左に寄せ、グラデーションも左からに切り替える */
  .hero{min-height:min(86svh,780px);align-items:center}
  .hero-media img{object-position:64% 42%}
  .hero-media::after{
    background:
      linear-gradient(to right,
        rgba(34,32,30,.90) 0%,
        rgba(34,32,30,.78) 26%,
        rgba(34,32,30,.44) 48%,
        rgba(34,32,30,.10) 72%,
        rgba(34,32,30,0) 100%),
      linear-gradient(to top, rgba(34,32,30,.34) 0%, rgba(34,32,30,0) 34%);
  }
  .hero-body{padding:0}
  .hero-body .wrap > *{max-width:min(560px,54%)}
  .hero-logo{width:340px}
  .hero h1{font-size:clamp(32px,3.6vw,44px)}
  .hero-sub{font-size:15px;line-height:2.05}

  .marquee-track img{width:280px;height:196px}
  .scene-grid{gap:52px 36px}
  .flow-list{grid-template-columns:repeat(4,1fr);gap:20px}
  .flow-body{padding:24px 20px 28px;display:block}
  .flow-num{margin:0 0 12px}
  .cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .cta-figure{margin-top:0}
  .proof-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:start}
  .proof-detail{margin-top:0}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
}

/* ── 横並びナビが1行に収まる幅から。1000px台では折り返すのでハンバーガーのまま ── */
@media(min-width:1120px){
  .menu-button{display:none}
  .site-header{height:74px}
  .global-nav{
    position:static;display:flex;flex-direction:row;align-items:center;gap:24px;
    padding:0;background:none;border:0;box-shadow:none;
  }
  .global-nav a{padding:0;font-size:12.5px;border:0;position:relative;white-space:nowrap}
  .global-nav a:not(.nav-cta)::after{
    content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
    background:var(--gold);transition:right .28s;
  }
  .global-nav a:not(.nav-cta):hover::after{right:0}
  .global-nav .nav-cta{margin:0;padding:13px 22px;font-size:12px}
  .brand-logo{width:118px}
}

/* ── motion ─────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}

  /* ⚠ カルーセルだけは例外。**自動で流れることが要件**（2026-08-26 指示）。
     OSの「アニメーション効果」をOFFにしている端末（Windowsでは既定でOFFのことがある）でも
     止めない。ただし速度は半分以下に落として、目に障らないようにしている。
     この2行を消すと、その環境では作品が1枚も動かなくなる。 */
  .marquee-track{animation-name:marquee!important;animation-duration:96s!important}
}