/* ==========================================
   RB FIELD トップ・ご利用ガイド・プライバシーポリシー
   色は3つだけ:柔らかい黒・少し温かい白・ロゴの赤(赤は線・ボタン・強調だけ)
   ========================================== */
@font-face {
  /* 青柳衡山フォントT(武蔵システム・商用利用可)から「代表石川」の4文字だけを切り出したもの */
  font-family: "Kouzan Name";
  src: url("/fonts/kouzan-name.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #111110;
  --paper: #FAF8F4;
  --tint: #F2EEE6;          /* 白(少し濃いめ)のセクション */
  --red: #E8321F;
  --gold: #D9A54A;
  /* 文字の大きさの段階(トップ全体でこれだけを使う)。900pxを境に飛ばないよう、ひとつの式で大きくなる */
  --fs-h1: clamp(22px, calc(13px + 2.6vw), 50px);     /* ファーストビューの見出し */
  --fs-h2: clamp(23px, calc(14px + 3vw), 44px);       /* セクションの見出し */
  --fs-h3: clamp(20px, calc(12px + 2.4vw), 30px);     /* 小見出し・強調の一文 */
  --fs-h4: clamp(17px, calc(14px + 1.1vw), 22px);     /* 小さい見出し */
  --fs-lead: clamp(16px, calc(13px + 1vw), 20px);     /* リード */
  --fs-label: 12px;                                    /* 小さなラベル(PCは13px) */          /* 背景の写真の金色の光に合わせた色。③の見出しと⑥・⑥'だけで使う */
  --on-dark: rgba(250, 248, 244, .82);
  --on-dark-2: rgba(250, 248, 244, .5);
  --on-light: rgba(17, 17, 16, .8);
  --line-dark: rgba(250, 248, 244, .18);
  --line-light: rgba(17, 17, 16, .16);
  --serif: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --gutter: clamp(20px, 5vw, 64px);
  --sec: max(50svh, 300px);  /* セクションの間 */
  --head-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--head-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  /* 文節で折り返す。BudouX(top.js)が文節の切れ目に <wbr> を入れ、keep-all で言葉の途中では切らない */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
@supports (word-break: auto-phrase) { body { word-break: auto-phrase; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 16px; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.sp { display: inline; }
.pc { display: none; }
@media (min-width: 768px) { .sp { display: none; } .pc { display: inline; } }
.center { text-align: center; }
/* 文節のかたまり。inline-block にするのは、iPhoneのSafari(WebKit)が nowrap どうしの間で折り返さず、画面からはみ出すため */
.nw { white-space: nowrap; display: inline-block; }

/* ---------- セクション ---------- */
.sec { position: relative; padding-block: calc(var(--sec) / 2); }
.dark { background: var(--ink); color: var(--paper); }
.light { background: var(--paper); }
.tint { background: var(--tint); }
.wrap { width: min(100%, 1120px); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.narrow { width: min(100%, 760px); }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .08em;
  margin-bottom: clamp(40px, 7vw, 72px);
}
.h3 { font-size: clamp(18px, 4.6vw, 21px); font-weight: 600; line-height: 1.6; letter-spacing: .06em; }
.body { font-size: clamp(15px, 3.9vw, 17px); color: var(--on-light); line-height: 2.1; }
.dark .body { color: var(--on-dark); }
.note { font-size: 13px; color: var(--on-light); letter-spacing: .04em; }
.eyebrow { font-size: var(--fs-label); letter-spacing: .32em; color: var(--red); font-weight: 600; margin-bottom: 14px; }

/* ---------- ボタン・リンク(角は丸めない) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  border: 1px solid var(--red); color: var(--paper); text-decoration: none;
  font-weight: 600; letter-spacing: .14em; line-height: 1;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover { background: var(--red); color: var(--paper); }
.btn-lg { min-height: 60px; padding: 0 2.4em; font-size: 16px; background: var(--red); }
@media (max-width: 400px) { .btn-lg { padding: 0 1.6em; letter-spacing: .08em; } }
.btn { white-space: nowrap; }
.btn-lg:hover { background: transparent; }
.btn-sm { min-height: 40px; padding: 0 1.2em; font-size: 13px; }
@media (min-width: 900px) { .btn-sm { min-height: 46px; padding: 0 1.6em; font-size: 14px; } .head-link { font-size: 14px; } }
.arw { display: inline-block; transition: transform .35s var(--ease); font-family: system-ui, sans-serif; font-weight: 400; }
.btn:hover .arw { transform: translateX(4px); }
.tlink {
  display: inline-block; padding: 10px 2px; font-size: 15px; font-weight: 600; letter-spacing: .12em;
  text-decoration: none; background: linear-gradient(var(--red), var(--red)) left bottom / 100% 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.tlink:hover { background-size: 30% 1px; }

/* ---------- 赤い筆の線(ロゴの赤いラインを水平にしたもの) ---------- */
.brush {
  position: absolute; left: -4%; right: -4%; bottom: -.08em; height: .2em;
  background: var(--red);
  -webkit-mask: url("/images/brush.svg") center / 100% 100% no-repeat;
          mask: url("/images/brush.svg") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.6, .05, .25, 1) .25s;
  pointer-events: none;
}
.in .brush, .brush.in { clip-path: inset(0 0 0 0); }
.ul { position: relative; display: inline-block; font-weight: 700; z-index: 0; }
.ul .brush { bottom: -.02em; height: .3em; z-index: -1; opacity: .95; }

/* ---------- ふわっと浮き上がる ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.rise { opacity: 0; transform: translateY(16px); animation: rise 1s var(--ease) var(--d, 0s) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- ヘッダー ---------- */
.head {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: var(--gutter); padding-top: env(safe-area-inset-top);
  color: var(--paper);
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.head.solid[data-on="dark"] { background: rgba(17, 17, 16, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.head[data-on="light"] { background: rgba(250, 248, 244, .995); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 1px 0 var(--line-light); }
.head-logo { position: relative; display: block; width: clamp(118px, 30vw, 150px); }
.head-logo img { width: 100%; height: auto; transition: opacity .4s; }
.head-logo .logo-dark { position: absolute; inset: 0; opacity: 0; }
.head[data-on="light"] .logo-light { opacity: 0; }
.head[data-on="light"] .logo-dark { opacity: 1; }
.head-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); }
.head-link { white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-decoration: none; padding: 10px 0; }
@media (max-width: 360px) { .head-link, .head .btn-sm { letter-spacing: .04em; } .head-logo { width: 104px; } .head-nav { gap: 12px; } }
.head-link:hover { color: var(--red); }
@media (max-width: 419px) { .head-guide { display: none; } }
.head .btn-sm { white-space: nowrap; }
.head[data-on="light"] .btn-sm { color: var(--ink); }
.head[data-on="light"] .btn-sm:hover { color: var(--paper); }

/* ---------- ① ファーストビュー:夜の店先の写真。左側だけ黒くかぶせて、文字を読みやすくする ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; z-index: -2; animation: dawn 1.8s var(--ease) both; }
@keyframes dawn { from { opacity: .25; transform: scale(1.05); } to { opacity: 1; transform: none; } }
/* スマホ:写真の中のスマホを上に見せて、下ほど暗くする */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(17,17,16,.35) 0%, rgba(17,17,16,.2) 30%, rgba(17,17,16,.7) 55%, rgba(17,17,16,.94) 100%); }
.hero-inner { width: min(100%, 1120px); margin-inline: auto; padding: calc(var(--head-h) + 24px) var(--gutter) max(10svh, 56px); }
.hero-title { font-weight: 600; letter-spacing: .08em; line-height: 1.25; margin-bottom: clamp(28px, 4.5vw, 44px); }
.hero-title > span { display: block; }
.hero-l1, .hero-l2 { font-size: var(--fs-h1); white-space: nowrap; }
.hero-l2 { margin-top: .2em; }
/* 「いま」だけ大きく。筆の線は文字の下に離して引く(文字に被らない) */
.hero-ima { position: relative; display: inline-block; font-size: 2.8em; font-weight: 700; line-height: 1.1; letter-spacing: .04em; margin: 0 .06em .26em; }
.hero-ima .brush { left: -2%; right: -6%; top: calc(100% + .02em); bottom: auto; height: .17em; transition-delay: .45s; transition-duration: 1.1s; }
/* タブレット:写真の中のスマホが文字にかからないよう右へ逃がし、左側を暗くする */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-bg { object-position: 60% 50%; }
  .hero::after { background: linear-gradient(90deg, rgba(17,17,16,.88) 0%, rgba(17,17,16,.7) 45%, rgba(17,17,16,.15) 75%, rgba(17,17,16,0) 100%), linear-gradient(to bottom, rgba(17,17,16,0) 55%, rgba(17,17,16,.8) 100%); }
}
@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero::after { background: linear-gradient(90deg, rgba(17,17,16,.93) 0%, rgba(17,17,16,.8) 30%, rgba(17,17,16,.28) 58%, rgba(17,17,16,0) 75%); }
  .hero-inner { padding-block: calc(var(--head-h) + 48px) 72px; }
}
.hero-kicker { font-size: clamp(14px, 3.8vw, 18px); font-weight: 600; letter-spacing: .14em; color: var(--on-dark); margin-bottom: clamp(18px, 3vw, 28px); }
.hero-sub { font-size: var(--fs-lead); font-weight: 600; letter-spacing: .1em; line-height: 1.9; color: var(--paper); padding-top: clamp(18px, 3vw, 24px); border-top: 1px solid var(--line-dark); width: fit-content; max-width: 100%; }

/* ---------- WebGLの背景(top-fx.js)。描けたら下の写真と入れかえる ---------- */
/* 写真(z-index:-2)の上、文字を読みやすくする暗いかぶせ(::after)の下に重ねる */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
.fx-on > .fx { opacity: 1; }

/* ---------- ② 過去・いま・未来 ----------
   図は top.js の drawTime() が描く。セクションの途中で画面に止まり(sticky)、
   スクロールした分だけ赤い筆の線が伸びて、いま → 過去 → 未来 の順に円が出てくる */
.time { position: relative; padding-bottom: calc(var(--sec) / 2); overflow-x: clip; }
.time-pin { position: relative; }
.js .time-pin { height: 190svh; }
.time-stage { display: grid; place-items: center; padding: calc(var(--head-h) + 12px) var(--gutter) 20px; }
.js .time-stage { position: sticky; top: 0; height: 100svh; }
.time-title { position: absolute; top: calc(var(--head-h) + 14px); left: 0; right: 0; margin: 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .5em; color: var(--on-dark-2); }
.time-svg { display: block; width: 100%; height: calc(100svh - var(--head-h) - 40px); max-width: 1240px; overflow: visible; }
.time-text { display: grid; gap: 40px; text-align: center; padding: 15svh 0; }
.time-text dt { font-size: 32px; font-weight: 700; letter-spacing: .2em; }
.time-text dd { margin: 8px 0 0; color: var(--on-dark); }
.js .time-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
.time-svg text { font-family: var(--serif); fill: var(--paper); text-anchor: middle; }
.t-orbit { fill: none; stroke: rgba(250, 248, 244, .2); stroke-width: 1; }
.t-brush { fill: var(--red); }
.t-ring { fill: none; stroke: rgba(250, 248, 244, .3); stroke-width: 1; }
.t-edge { fill: none; stroke: rgba(250, 248, 244, .55); stroke-width: 1; }
.t-label { font-weight: 700; letter-spacing: .22em; }
.t-cap { font-weight: 500; letter-spacing: .1em; fill: rgba(250, 248, 244, .78) !important; }
.t-node { opacity: 0; transform: translateY(18px) scale(.96); transform-box: fill-box; transform-origin: center; transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.t-node.on { opacity: 1; transform: none; }
.t-node .t-photo { transform: scale(1.08); transform-box: fill-box; transform-origin: center; transition: transform 2.4s var(--ease); }
.t-node.on .t-photo { transform: none; }
.t-rip { fill: none; stroke: rgba(250, 248, 244, .85); stroke-width: 1.3; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.t-ripples.on .t-rip { animation: t-rip 5.4s cubic-bezier(.2, .6, .3, 1) calc(var(--i) * 1.8s) infinite; }
@keyframes t-rip { 0% { transform: scale(1); opacity: 0; } 10% { opacity: .75; } 100% { transform: scale(var(--k)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .t-ripples { display: none; } }
.t-text { opacity: 0; transition: opacity 1.2s var(--ease) .35s; }
.t-node.on .t-text { opacity: 1; }
.time-after { margin-top: clamp(40px, 8vw, 80px); }
.time-close { text-align: center; font-size: clamp(16px, 4.2vw, 22px); line-height: 2.3; color: var(--on-dark); }
.time-close .ul { color: var(--paper); }

/* ---------- ③ お悩み → 解決 ---------- */
/* ---------- ④ 目的 ---------- */
/* 目的の小見出し(AIのセクションの中。上に区切りの線を引く) */
.purpose { margin-top: clamp(72px, 10vw, 120px); padding-top: clamp(56px, 8vw, 88px); border-top: 1px solid var(--line-light); }
.purpose-h { text-align: center; font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; letter-spacing: .08em; margin-bottom: clamp(32px, 6vw, 56px); }
.purpose-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); margin-bottom: clamp(48px, 8vw, 72px); }
.purpose-list li { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(28px, 6vw, 48px) 10px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); text-align: center; font-size: clamp(15px, 3.9vw, 17px); font-weight: 600; line-height: 1.6; }
/* 筆の挿絵(top.js の「④ 目的の挿絵」が描く) */
.ink { width: clamp(84px, 23vw, 116px); height: auto; aspect-ratio: 1; overflow: visible; }
.ink-s { fill: var(--ink); }
.ink-dot { fill: var(--ink); opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease), transform .7s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--d, 0s) + .6s + var(--o, 0s)); }
.ink-dot.red { fill: var(--red); }
.ink-m { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.55, .05, .3, 1) calc(var(--d, 0s) + var(--o, 0s) + .15s); }
.in .ink-m { stroke-dashoffset: 0; }
.in .ink-dot { opacity: 1; transform: none; }
@media (min-width: 900px) { .purpose-list { grid-template-columns: repeat(4, 1fr); } }

/* ---------- ⑤ 見つけてもらう工夫:お客さんの言葉を見出しに、用語は赤い小さな札で ---------- */
.find-head .h2 { margin-bottom: 0; }
.find-head { margin-bottom: clamp(40px, 8vw, 64px); }
.find-row { position: relative; display: grid; gap: 16px; padding: clamp(32px, 7vw, 48px) 0; border-top: 1px solid var(--line-light); }
.find-row:last-child { border-bottom: 1px solid var(--line-light); }
.find-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.6, .05, .25, 1) calc(var(--d, 0s) + .2s); }
.find-row.in::before { transform: scaleX(.16); }
.find-term { display: flex; align-items: baseline; gap: 14px; line-height: 1; }
.find-no { flex: none; font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; color: var(--on-light); }
.find-word { flex: none; font-size: var(--fs-label); font-weight: 700; letter-spacing: .3em; color: var(--red); }
.find-body .h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: .08em; margin-bottom: 14px; }
.find-body p { font-size: clamp(15px, 3.9vw, 17px); color: var(--on-light); line-height: 2.05; }
.find-more { margin-top: 36px; }
@media (min-width: 900px) {
  .find-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .find-head { position: sticky; top: calc(var(--head-h) + 48px); }
}
@media (min-width: 1200px) {
  .find-row { grid-template-columns: 120px minmax(0, 1fr); gap: 32px; }
  .find-term { flex-direction: column; gap: 12px; padding-top: .55em; }
}

/* ---------- ⑥ 料金・⑥' 紹介特典:背景の光や糸の位置に、文字を合わせる舞台 ----------
   舞台は画像と同じ縦横比。画面が狭いときは高さ(--min)を保ち、画像の左右を切り落とす。
   どちらでも「画像の高さ=舞台の高さ」なので、文字の上下の位置は % で画像に合う。
   --iw は画面に出ている画像の幅。文字の大きさをこれに比例させると、横の広がりも画像に合う */
/* min-width:0 … aspect-ratio は min-height から最小の幅も作ってしまうので、それを止める(止めないとスマホで横にはみ出す) */
.stage { --min: 520px; position: relative; width: 100%; min-width: 0; aspect-ratio: 1680 / 944; min-height: var(--min); overflow: hidden; isolation: isolate; container-type: inline-size; text-align: center; color: var(--paper); }
.stage > :not(.stage-bg) { --iw: max(100cqw, var(--min) * 1680 / 944); position: absolute; left: 0; right: 0; margin: 0; padding-inline: var(--gutter); }
.stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: -1; }
/* 画像の下の端を、下に続く帯の色へなじませる(つなぎ目の線を見せない) */
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; z-index: -1; background: linear-gradient(rgba(10, 9, 8, 0), #0a0908); pointer-events: none; }
/* 舞台の下に続く黒い帯。色は背景の画像の下の端に合わせる */
.band { background: #0a0908; color: var(--paper); text-align: center; padding: 8px var(--gutter) calc(var(--sec) / 2); }

/* 料金:光の柱の中に、見出しと金額。床の丸い光だまり(画像の76〜88%)には何も置かない */
.stage-price { --min: 560px; }
.st-h { top: 13%; font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; letter-spacing: .14em; }
.st-k { top: 33%; font-size: clamp(15px, 1.5vw, 21px); font-weight: 700; letter-spacing: .3em; color: var(--gold); }
.st-yen { top: 39%; display: flex; justify-content: center; align-items: baseline; gap: .15em; line-height: 1; white-space: nowrap; text-shadow: 0 6px 40px rgba(0, 0, 0, .6); }
.st-yen b { font-size: min(calc(var(--iw) * .113), 19cqw); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.st-yen small { font-size: clamp(16px, 1.8vw, 26px); font-weight: 600; letter-spacing: .1em; }
.st-sub { top: 63%; font-size: clamp(18px, 2vw, 28px); font-weight: 700; letter-spacing: .12em; color: var(--on-dark); white-space: nowrap; }
.st-sub b { font-size: 1.5em; font-weight: 700; margin: 0 .15em 0 .3em; color: var(--paper); }
.band-lead { padding-top: 32px; font-size: clamp(15px, 3.9vw, 17px); line-height: 2.2; color: var(--on-dark); position: relative; }
.band-lead::before { content: ""; position: absolute; top: 0; left: 50%; width: min(560px, 100%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* 料金に含まれるもの(トップでは舞台のすぐあと、料金プランのページでは黒い札のあと) */
.incl { display: grid; margin-top: clamp(48px, 8vw, 72px); }
.price-more .incl, .panel-plan .incl { margin-top: 0; }
.panel.panel-plan { padding-top: 0; }
.panel-plan .wrap { padding-top: clamp(48px, 7vw, 88px); }
.panel-plan .band { padding-bottom: clamp(56px, 7vw, 88px); }
.sec.price-more { padding-top: clamp(40px, 6vw, 80px); }
/* 料金一覧の見出し:「追加料金なし。」だけ赤い帯の上に白い文字 */
.incl-head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.incl-h1 { font-size: clamp(30px, calc(18px + 4.2vw), 64px); font-weight: 800; line-height: 1.5; letter-spacing: .06em; }
.redband { display: inline-block; background: var(--red); color: #FFF; padding: .02em .28em .1em .4em; margin-left: .1em; }
.incl-h2 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.8; letter-spacing: .08em; margin-top: clamp(14px, 2vw, 22px); }
.incl-group { padding: 28px 0; border-top: 1px solid var(--line-light); }
.incl-group h3 { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 700; letter-spacing: .14em; margin-bottom: 12px; }
.incl-group h3::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--red); }
.incl-group li { position: relative; padding-left: 1.1em; font-size: 15px; line-height: 1.9; color: var(--on-light); }
.incl-group li + li { margin-top: 4px; }
.incl-group li::before { content: ""; position: absolute; left: 0; top: .95em; width: .45em; height: 1px; background: var(--ink); opacity: .5; }
@media (min-width: 600px) and (max-width: 899px) { .incl { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 900px) { .incl { grid-template-columns: repeat(4, 1fr); column-gap: 36px; } }
.promise { display: grid; gap: 14px; margin: clamp(40px, 7vw, 64px) 0 clamp(48px, 8vw, 72px); }
.promise li { border: 1px solid var(--line-light); padding: 22px 24px; font-size: 14px; line-height: 1.9; color: var(--on-light); }
.promise b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.7; margin-bottom: 6px; }
@media (min-width: 900px) { .promise { grid-template-columns: repeat(3, 1fr); } }
.price .tlink { margin: 14px 0 0; }

/* ---------- ⑥' 紹介特典(料金プランのページ):白い場面の中に黒い大きな札を置き、金額を大きく見せる ---------- */
.gift { background: var(--ink); color: var(--paper); padding: clamp(48px, 10vw, 96px) clamp(20px, 6vw, 80px); text-align: center; }
.gift-label { display: inline-flex; align-items: center; gap: 14px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .3em; color: var(--paper); margin-bottom: clamp(20px, 4vw, 28px); }
.gift-label::before, .gift-label::after { content: ""; width: 28px; height: 1px; background: var(--red); }
.gift-title { font-size: clamp(19px, 5vw, 30px); font-weight: 600; line-height: 1.7; letter-spacing: .08em; }
.gift-num { display: block; margin: .18em 0 .2em; font-size: clamp(56px, 19vw, 156px); font-weight: 700; line-height: 1.15; letter-spacing: .02em; white-space: nowrap; }
.gift-num .ul .brush { height: .16em; bottom: .02em; }
.gift-num small { font-size: .3em; font-weight: 700; margin-left: .1em; }
.gift-cols { display: grid; gap: 14px; margin: clamp(36px, 7vw, 56px) auto 0; max-width: 820px; text-align: left; }
.gift-col { border: 1px solid var(--line-dark); padding: 24px clamp(20px, 4vw, 28px); }
.gift-who { font-size: var(--fs-label); letter-spacing: .14em; color: var(--on-dark); }

/* ---------- ⑥' 紹介特典(トップ):2つの灯籠をつなぐ赤い糸。
   金色の20,000円は、数字の下の端(ベースライン)を糸のたるみ(画像の64.5%)に乗せる ---------- */
.stage-ref { --min: 460px; }
.stage-ref .gift-label { top: 8%; display: flex; justify-content: center; margin: 0; font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; letter-spacing: .3em; }
.stage-ref .gift-label::before, .stage-ref .gift-label::after { width: 40px; }
/* 見出しは3つに分けて、それぞれを舞台の高さに合わせて置く */
.stage-ref .gift-title { position: static; padding: 0; font-weight: 700; }
.stage-ref .gift-title > span { position: absolute; left: 0; right: 0; padding-inline: var(--gutter); }
.gift-l1 { top: 17%; font-size: var(--fs-h2); line-height: 1.5; }
/* 糸の高さ(画像を測った値):中央 65.5%・左右へ行くほど上がる(画像の20%の位置で 54.5%)。
   数字の下の端(ベースライン)を 64.5% に置き、たるみに乗せる。ベースラインは要素の下の端から .067em 上にある */
.stage-ref .gift-num { display: block; bottom: calc(35.5% - .067em); margin: 0; font-size: min(calc(var(--iw) * .165), 24cqw); line-height: 1; color: #F6CF82; text-shadow: 0 0 30px rgba(242, 180, 80, .5), 0 0 90px rgba(232, 52, 28, .35); }
.stage-ref .gift-num small { font-size: .15em; margin-left: .1em; }
.gift-l2 { top: 72%; font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; }
.band .gift { max-width: 820px; margin: 0 auto; padding: 0; background: none; }
.band .gift-cols { margin-top: 0; }
.band .gift-col { border-color: rgba(217, 165, 74, .35); background: rgba(250, 248, 244, .02); }
.band .gift-who { color: var(--gold); font-size: 14px; }
.band .gift-what { font-size: var(--fs-h3); }
.band .gift-sub { font-size: 16px; }
.band .gift-notes li { font-size: 14px; }
.band .gift-act .btn-lg { font-size: 17px; }
@media (min-width: 900px) { .band .gift-sub { font-size: 17px; } .band .gift-notes li { font-size: 15px; } }
.gift-what { font-size: var(--fs-h4); font-weight: 700; line-height: 1.6; margin-top: 6px; }
.gift-sub { font-size: 14px; color: var(--on-dark); line-height: 1.9; margin-top: 8px; }
.gift-notes { max-width: 820px; margin: 28px auto 0; text-align: left; }
.gift-notes li { position: relative; padding-left: 1.3em; font-size: 13px; line-height: 1.9; color: var(--on-dark); }
.gift-notes li::before { content: "※"; position: absolute; left: 0; }
.gift-act { margin-top: clamp(36px, 6vw, 48px); }
@media (min-width: 768px) { .gift-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- ⑦ 公開してからが本番:朝の光の写真の上に、左の白い壁へ文字を置く ---------- */
.along { overflow: hidden; isolation: isolate; color: #2B2318; padding-block: clamp(64px, 9vw, 120px); }
.along-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; z-index: -2; }
.along::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(250, 246, 238, .6), rgba(250, 246, 238, .15) 70%, transparent); }
.along-in { width: min(100%, 1120px); margin-inline: auto; padding-inline: var(--gutter); }
.along-body { max-width: 680px; }
.along-h { color: #2B2318; margin-bottom: clamp(20px, 3vw, 28px); }
.along-lead { font-size: var(--fs-lead); font-weight: 600; line-height: 2; color: #4A3C2C; margin-bottom: clamp(36px, 5vw, 56px); }
.flows { display: grid; gap: clamp(22px, 3vw, 30px); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0; }
.flow-from { display: grid; gap: 6px; min-width: 0; }
.flow-who { font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; color: #8A7A62; }
.flow-bubble { position: relative; background: #FFF; border-radius: 18px 18px 18px 4px; padding: 14px 20px; font-size: 16px; font-weight: 600; line-height: 1.7; box-shadow: 0 10px 28px rgba(120, 80, 20, .12); }
/* 吹き出しとカードを結ぶ金色の細い線。右端に小さな金色の丸 */
.flow-line { position: relative; width: 1px; height: 28px; margin-left: 28px; background: linear-gradient(#D9A54A, #C48A2A); }
.flow-line::after { content: ""; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: #C48A2A; }
.flow-card { position: relative; background: #FFF; border: 1px solid rgba(196, 138, 42, .3); padding: 18px 22px; box-shadow: 0 10px 28px rgba(120, 80, 20, .12); }
.flow-tag { display: inline-block; background: var(--ink); color: #FFF; font-size: 12px; font-weight: 600; letter-spacing: .1em; line-height: 1; padding: 6px 10px; margin-bottom: 10px; }
.flow-t { font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; }
.flow-d { font-size: 15px; line-height: 1.8; color: #5C5246; margin-top: 2px; }
@media (min-width: 700px) {
  .flow { grid-template-columns: minmax(0, 5fr) minmax(36px, 1fr) minmax(0, 6fr); align-items: center; justify-items: stretch; }
  .flow-line { width: auto; height: 1px; margin: 0; background: linear-gradient(90deg, rgba(217, 165, 74, .35), #C48A2A); }
  .flow-line::after { left: auto; right: -3px; bottom: auto; top: -3px; }
}
.along-count { margin-top: clamp(32px, 5vw, 48px); font-size: var(--fs-h4); font-weight: 700; line-height: 1.6; }
.along-count b { font-size: 2.6em; font-weight: 800; line-height: 1; color: #C48A2A; margin: 0 .06em; vertical-align: -.08em; }

/* ---------- ⑧ 制作例:右から左へ流れ続ける ---------- */
.works .h2 { text-align: center; }
.marquee {
  overflow: hidden; padding: 12px 0 clamp(36px, 6vw, 48px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: clamp(20px, 4vw, 40px); width: max-content; animation: flow 90s linear infinite; } /* 9枚で、前の6枚と同じ速さになる長さ */
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes flow { to { transform: translateX(calc(-50% - clamp(20px, 4vw, 40px) / 2)); } }
.phone { width: clamp(170px, 46vw, 236px); flex: none; border: 7px solid var(--ink); border-radius: 30px; overflow: hidden; background: var(--ink); box-shadow: 0 24px 40px -24px rgba(17, 17, 16, .45); }
.phone img { width: 100%; height: auto; border-radius: 23px; }

/* ---------- ⑨ 代表からひと言 ---------- */
.message { overflow: hidden; isolation: isolate; }
/* 夜の店先。扉からこぼれる明かりが、締めの「相談してみる」の後ろに来るように、下の端に合わせる */
.message-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; z-index: -2; }
/* PC:扉の中の明かりは写真の上から73〜87%。写真を下の端にそろえて高さ1480pxにすると、明かりはセクションの下から190〜400pxに来る。
   締めの見出しがそこに重なるよう、下の余白を詰める(上は写真が切れるが、夜空で真っ暗なので気にならない) */
@media (min-width: 900px) {
  .message { padding-bottom: 72px; }
  .message-bg { top: auto; bottom: 0; height: 1480px; }
}
.message::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10,9,8,.9), rgba(10,9,8,.4) 45%, rgba(10,9,8,.1) 72%, rgba(10,9,8,.45)); }
.message-grid { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(18px, 4vw, 40px); align-items: start; width: min(100%, 920px); }
.owner { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.owner-face { --s: clamp(64px, 19vw, 112px); width: var(--s); height: var(--s); flex: none; border-radius: 50%; border: 1px solid var(--red); padding: 3px; background: var(--paper); object-fit: cover; }
.owner-name { font-family: "Kouzan Name", "Yuji Syuku", var(--serif); display: flex; align-items: baseline; gap: .2em; line-height: 1; white-space: nowrap; }
.owner-name span:first-child { font-size: clamp(14px, 3.6vw, 18px); }
.owner-family { font-size: clamp(28px, 7.5vw, 40px); }
.message-head .h2 { margin-bottom: 0; font-size: clamp(17px, 5.4vw, var(--fs-h2)); }
@media (max-width: 360px) { .message-head .h2 { letter-spacing: .03em; } }
.message-body { grid-column: 1 / -1; margin-top: clamp(40px, 7vw, 64px); color: var(--on-dark); font-size: clamp(16px, 4.2vw, 19px); line-height: 2.35; }
.message-body p + p { margin-top: 1.6em; }
.message-body .ul { color: var(--paper); }
@media (min-width: 768px) {
  .owner { grid-row: 1 / 3; }
  .message-body { grid-column: 2; }
}

/* ---------- ⑩ 締め ---------- */
.closing { margin-top: clamp(56px, 8vw, 104px); }
.closing .h2 { line-height: 1.8; }
.closing .body { margin-bottom: clamp(32px, 5vw, 44px); text-shadow: 0 0 14px rgba(10, 9, 8, .95), 0 0 30px rgba(10, 9, 8, .8); } /* 扉の明かりの上でも読めるように */

/* ---------- フッター ---------- */
.foot { padding: 48px var(--gutter) calc(40px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid var(--line-dark); }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-bottom: 32px; }
.foot-nav a { font-size: 13px; letter-spacing: .1em; text-decoration: none; color: var(--on-dark); padding: 10px 0; }
.foot-nav a:hover { color: var(--paper); }
.foot-copy { font-size: 12px; color: var(--on-dark-2); letter-spacing: .1em; }

/* ---------- ③ 探し方の変化:見出しと「これまで/これから」を同じ背景の上に置く ----------
   背景は「光の線を消した、破れた紙と黒」を上下ミラーでつないだ1枚(1526×1472)。画像の幅に合わせて広げ、
   破れ目はいつも画面の真ん中を通る。上のセクションの頭から下まで途切れず続く。
   金色の光の線は背景ではなくCSSで描く(下の .split-b の上の端)ので、中身の高さが変わっても、見出しと「WEB検索・AI検索」のちょうど間に来る */
.shiftwrap { position: relative; background: #050505 url("/images/top/shift-mirror.webp") 50% 0 / max(100%, 1100px) auto repeat-y; overflow: hidden; }
/* 左右の列を同じ2×2のマスに並べる(列ごとに高さが変わって、光の線が左右でずれないように) */
.split { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; min-width: 0; }
.split-col { display: contents; }
.split-l > * { grid-column: 1; }
.split-r > * { grid-column: 2; }
.split-col > .split-h { grid-row: 1; }
.split-col > .split-b { grid-row: 2; }
/* 見出しは上から140pxほどの位置。破れ目は左右に10pxほど波打つので、そこから文字までは広めに空ける */
.split-h { align-self: end; padding-top: clamp(72px, 9.7vw, 140px); margin-bottom: clamp(44px, 5vw, 72px); font-size: clamp(20px, 3vw, var(--fs-h2)); font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
.split-l .split-h { text-align: right; padding-right: clamp(24px, 4.4vw, 72px); padding-left: var(--gutter); color: #2B2318; }
.split-r .split-h { text-align: left; padding-left: clamp(24px, 4.4vw, 72px); padding-right: var(--gutter); }
.split-k { display: block; font-size: clamp(15px, 1.8vw, 26px); font-weight: 700; letter-spacing: .3em; line-height: 1.5; margin-bottom: clamp(8px, 1vw, 14px); }
.split-l .split-k { color: #6E604C; margin-right: -.3em; }
.split-r .split-k { color: var(--gold); margin-right: -.3em; }
/* 下の段は、紙の側・黒の側それぞれの真ん中に、大きな言葉と画像を置く。上の端に金色の光の線を引く */
.split-b { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.8vw, 26px); padding: clamp(44px, 5vw, 72px) var(--gutter) clamp(20px, 2.4vw, 32px); min-width: 0; text-align: center; }
.split-b::before { content: ""; position: absolute; top: -1px; height: 3px; pointer-events: none; }
.split-b::after { content: ""; position: absolute; top: -70px; width: 38%; height: 140px; pointer-events: none; }
.split-l .split-b::before { left: 14%; right: 0; background: linear-gradient(90deg, transparent, rgba(255, 205, 110, .85)); box-shadow: 0 0 10px rgba(255, 190, 80, .6); }
.split-r .split-b::before { left: 0; right: 0; background: linear-gradient(90deg, #FFD98A, #FFAA33 18%, rgba(255, 160, 50, .6) 55%, transparent); box-shadow: 0 0 14px rgba(255, 160, 50, .7); }
.split-l .split-b::after { right: 0; background: radial-gradient(ellipse at right center, rgba(255, 200, 100, .5), transparent 70%); }
.split-r .split-b::after { left: 0; background: radial-gradient(ellipse at left center, rgba(255, 170, 60, .55), transparent 70%); }
.split-was, .split-now { font-weight: 800; line-height: 1; white-space: nowrap; }
.split-was { font-size: clamp(28px, 6.4vw, 104px); letter-spacing: .02em; color: #7D6C55; }
.split-was s { text-decoration-thickness: .07em; text-decoration-color: rgba(110, 88, 62, .75); }
.split-now { font-size: clamp(34px, 8.6vw, 140px); letter-spacing: .04em; color: #F6CF82; text-shadow: 0 0 28px rgba(242, 180, 80, .55), 0 0 80px rgba(242, 160, 60, .35), 0 0 140px rgba(242, 160, 60, .2); }
/* 画像の縁は、楕円のぼかしで背景になじませる。紙の側は重ねて(乗算)、黒の側は光だけを足して(スクリーン)、四角い境目を消す */
.split-img { width: min(100%, max(200px, 27vw), 420px); height: auto; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.split-img-web { mix-blend-mode: multiply; }
.split-img-ai { mix-blend-mode: screen; }
@media (max-width: 599px) { .split-k { letter-spacing: .2em; margin-right: -.2em; } .split-b { padding-inline: 16px; } }
/* 320px前後:真ん中で割ると右の列が160pxしかないので、「変わりはじめて」が入る大きさにする */
@media (max-width: 374px) { .split-h { font-size: 17px; } .split-k { font-size: 13px; } .split-l .split-h { padding: 0 16px 0 12px; } .split-r .split-h { padding: 0 12px 0 16px; } .split-b { padding-inline: 12px; } }

/* ---------- ③ これまで/これから:スマホを1台ずつ ---------- */
.cmp { display: grid; }
.cmp-old, .cmp-new { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 7vw, 56px); padding: clamp(64px, 12vw, 96px) var(--gutter); min-width: 0; }
.cmp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cmp-old::before, .cmp-new::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.cmp-old { color: #2B2620; }
.cmp-old::before { background: linear-gradient(rgba(247, 244, 238, .55), rgba(247, 244, 238, .15) 45%, rgba(247, 244, 238, .55)); }
.cmp-new .cmp-bg { object-position: 50% 100%; }
.cmp-new::before { background: linear-gradient(rgba(8, 8, 10, .2), rgba(8, 8, 10, 0) 60%, rgba(8, 8, 10, .35)); }
.cmp-text { width: 100%; max-width: 460px; text-align: center; }
/* 「これまで」「これから」は大きく太く、左右それぞれの真ん中に。上の絵(虫眼鏡・光のカード)の真下に来る */
.cmp-tag { text-align: center; font-size: clamp(28px, 3.1vw, 40px); font-weight: 800; letter-spacing: .24em; margin: 0 -.24em clamp(14px, 2vw, 20px) 0; line-height: 1.3; }
.cmp-old .cmp-tag { color: #4A3C2C; }
.cmp-new .cmp-tag { color: #F6CF82; text-shadow: 0 0 22px rgba(242, 180, 80, .7), 0 0 56px rgba(242, 160, 60, .4); }
/* 見出しは「小さい1行目+大きい2行目」で左右を対にする。2行目は、左が濃い茶色・右が金色 */
.cmp-title { font-weight: 700; letter-spacing: .1em; }
.cmp-sm { display: block; font-size: var(--fs-h4); font-weight: 600; line-height: 1.6; letter-spacing: .14em; margin-bottom: .4em; }
.cmp-bg-t { display: block; font-size: var(--fs-h2); line-height: 1.3; }
.cmp-old .cmp-sm { color: #6E6152; }
.cmp-old .cmp-bg-t { color: #2B2318; }
.cmp-new .cmp-sm { color: #CFC6B4; }
.cmp-new .cmp-bg-t { color: #F6CF82; text-shadow: 0 0 24px rgba(242, 180, 80, .35); }
@media (min-width: 900px) {
  .cmp { grid-template-columns: 1fr 1fr; }
  .cmp-bg, .cmp-old::before, .cmp-new::before { display: none; }
  .cmp-old, .cmp-new { padding-block: 40px 56px; overflow: visible; }
}
.cmp-old, .cmp-new { gap: clamp(28px, 4vw, 40px); }
/* 同じ文を2つ重ね、左半分は濃い茶色・右半分は白で表示する。切り替わる位置は、要素の真ん中=破れ目 */
.halves { display: grid; text-align: center; padding-inline: var(--gutter); position: relative; }
.halves .half { grid-area: 1 / 1; display: block; min-width: 0; }
.halves .half-l { color: #2B2318; clip-path: inset(0 50% 0 0); }
.halves .half-r { color: #FFF; clip-path: inset(0 0 0 50%); }
.cmp-big { margin-top: clamp(8px, 2vw, 24px); font-size: clamp(26px, 4.2vw, 60px); font-weight: 800; line-height: 1.5; letter-spacing: .08em; }
/* 「そのホームページ、最後に更新したのは、いつですか?」はページの中でいちばん大きな問いかけ。赤い筆の線を引く */
.cmp-ask { margin-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(88px, 12vw, 160px); font-weight: 800; letter-spacing: .06em; line-height: 1.25; }
.ask-sm { display: block; font-size: clamp(16px, 2.2vw, 28px); font-weight: 600; letter-spacing: .24em; margin-bottom: .9em; opacity: .85; }
.ask-big { display: block; font-size: clamp(30px, 7.2vw, 104px); }
.ask-big + .ask-big { margin-top: .12em; }
.ask-big .ul .brush { height: .16em; bottom: -.12em; }
.spread-note { margin-top: 0; }
.shift { padding-top: 20px; }

/* スマホ本体:チタン調の縁、側面のボタン、黒い縁、ダイナミックアイランド、ガラスの映り込み、床に落ちる影 */
.dev {
  position: relative; width: min(280px, 100%); aspect-ratio: 71.5 / 147; flex: none;
  border-radius: 15.5% / 7.6%;
  background: linear-gradient(135deg, #D8D4CC 0%, #8F8A82 18%, #3A3835 50%, #7D7870 82%, #CFCAC1 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 3px rgba(0, 0, 0, .25), 0 40px 70px -20px rgba(30, 20, 10, .55);
}
.dev-dark {
  background: linear-gradient(135deg, #6A5A3E 0%, #2C2720 20%, #121110 50%, #2A251D 80%, #8A7449 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .25), 0 0 0 1px rgba(0, 0, 0, .6), 0 50px 90px -20px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(220, 150, 50, .18);
}
.dev-key { position: absolute; width: 1.2%; border-radius: 2px; background: linear-gradient(90deg, #5A5650, #A9A49B); }
.dev-dark .dev-key { background: linear-gradient(90deg, #2A251D, #7A6642); }
.k1 { left: -1%; top: 17%; height: 4%; } .k2 { left: -1%; top: 24%; height: 8%; } .k3 { left: -1%; top: 34%; height: 8%; } .k4 { right: -1%; top: 27%; height: 12%; }
.dev-bezel { position: absolute; inset: 3.4%; border-radius: 12.6% / 6.1%; background: #050505; padding: 2.4%; }
/* 画面の中は、本物のアプリに見えるようにスマホ標準の書体にする(サイトの明朝体とは別) */
.dev-scr {
  position: relative; height: 100%; overflow: hidden; border-radius: 11% / 5.2%;
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  font-weight: 400; letter-spacing: 0; line-height: 1.5; word-break: normal; line-break: auto; font-feature-settings: normal;
}
.dev-scr::before { content: ""; position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%); width: 32%; height: 3.6%; border-radius: 20px; background: #000; z-index: 3; }
.dev-scr::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%); }
.dev-bar { flex: none; display: flex; justify-content: space-between; align-items: center; height: 7%; padding: 4.5% 8% 0; font-size: 11px; font-weight: 600; }
.dev-icons { display: flex; align-items: center; gap: 4px; }
.dev-icons svg { width: auto; height: 9px; fill: currentColor; }
.dev-home { position: absolute; bottom: 1.4%; left: 50%; transform: translateX(-50%); width: 36%; height: 4px; border-radius: 3px; background: currentColor; z-index: 3; }

/* これまで:明るい検索結果の画面。お店のホームページは、広告やまとめサイトの下に埋もれている */
.scr-old { background: #FFF; color: #202124; }
.srch { flex: none; display: flex; align-items: center; gap: 7px; margin: 6px 12px; padding: 8px 12px; border-radius: 22px; font-size: 11.5px; box-shadow: 0 1px 6px rgba(32, 33, 36, .18); }
.srch svg { flex: none; width: 12px; height: 12px; }
.chips { flex: none; display: flex; gap: 6px; padding: 4px 12px 8px; font-size: 9.5px; overflow: hidden; border-bottom: 1px solid #EBEBEB; }
.chips b, .chips span { padding: 3px 9px; border: 1px solid #DADCE0; border-radius: 12px; white-space: nowrap; color: #3C4043; font-weight: 400; }
.chips b { background: #E8EAED; border-color: #E8EAED; font-weight: 600; }
.results { flex: 1; overflow: hidden; }
.results li { padding: 9px 13px; border-bottom: 6px solid #F1F3F4; }
.r-ad { font-size: 9px; font-weight: 700; margin-bottom: 4px; }
.r-src { display: flex; align-items: center; gap: 6px; font-size: 8.5px; line-height: 1.3; color: #4D5156; }
.r-src i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 8px; font-style: normal; font-weight: 700; color: #FFF; }
.r-src b { display: block; font-size: 9.5px; font-weight: 500; color: #202124; }
.r-t { margin: 5px 0 3px; font-size: 12px; font-weight: 500; line-height: 1.35; color: #1A0DAB; }
.r-d { font-size: 9px; line-height: 1.5; color: #4D5156; }
.r-star { font-size: 9px; letter-spacing: -.5px; color: #E7711B; }
.r-star em { font-style: normal; letter-spacing: 0; margin-left: 3px; color: #70757A; }

/* これから:暗い画面に、問いかけと、ひとつの答えと、お店の写真 */
.scr-new { background: #0E0E10; color: #ECECEC; }
.scr-new .dev-home { background: #E5E5E5; }
.ai { flex: 1; display: flex; flex-direction: column; gap: 11px; padding: 8px 13px 0; overflow: hidden; font-size: 10.5px; line-height: 1.65; }
.ai-q { align-self: flex-end; max-width: 82%; padding: 8px 12px; border-radius: 16px 16px 5px 16px; background: #26262B; }
.ai-a { display: flex; flex-direction: column; gap: 9px; }
.ai-who { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #A7A7AD; }
.ai-who i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F2C879, #B07A2A); }
.ai-a b { font-weight: 700; color: #FFF; }
.ai-a ul { display: grid; gap: 2px; margin-top: -4px; }
.ai-a li { display: flex; gap: 6px; color: #D6D6DA; }
.ai-a li::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: 7px; border-radius: 50%; background: var(--gold); }
.ai-shop { border-radius: 12px; overflow: hidden; background: #18181B; border: 1px solid #2A2A2E; }
.ai-shop img { width: 100%; height: auto; }
.ai-shop p { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; }
.ai-shop b { font-size: 10.5px; }
.ai-shop small { display: block; font-size: 8.5px; color: #9A9AA0; }
.ai-shop em { font-style: normal; font-size: 8.5px; color: #7FD18B; }
.ai-acts { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; }
.ai-acts span { padding: 6px 0; border: 1px solid #3A3A40; border-radius: 20px; text-align: center; font-size: 9.5px; color: #DDD; }
.ai-acts .go { background: var(--red); border-color: var(--red); color: #FFF; font-weight: 700; }
.ai-input { flex: none; display: flex; justify-content: space-between; align-items: center; margin: 10px 12px 22px; padding: 8px 8px 8px 13px; border: 1px solid #2C2C31; border-radius: 20px; background: #1C1C20; font-size: 9.5px; color: #7A7A80; }
.ai-input i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ECECEC; }
.ai-input svg { width: 10px; height: 10px; }
/* 答えは、問いかけのあとに少し遅れて届く */
.dev-dark .ai-q, .dev-dark .ai-a { opacity: 0; transform: translateY(8px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.dev-dark.in .ai-q { opacity: 1; transform: none; transition-delay: .6s; }
.dev-dark.in .ai-a { opacity: 1; transform: none; transition-delay: 1.4s; }

.vs-key { text-align: center; margin-top: clamp(72px, 12vw, 120px); }
.vs-key-main { line-height: 1.7; margin-bottom: 20px; }

.check { border: 1px solid var(--ink); padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 44px); margin: clamp(48px, 8vw, 72px) 0 24px; }
.check-head { font-size: var(--fs-h4); font-weight: 700; line-height: 1.7; letter-spacing: .06em; margin: 0 0 22px; }
.check-list li { position: relative; padding-left: 2em; font-size: clamp(14px, 3.8vw, 16px); line-height: 1.9; }
.check-list li + li { margin-top: 12px; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 1.05em; height: 1.05em; border: 1px solid var(--ink); }
.check-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-light); font-size: var(--fs-h4); font-weight: 700; line-height: 1.8; }

/* ---------- ⑤ の注意書き・⑦ の更新回数 ---------- */
.find-note { margin-top: 28px; line-height: 1.9; }

/* ---------- 料金プランのページ:タブで切り替える(JSがないときは全部並べる) ---------- */
.tabs { position: sticky; top: var(--head-h); z-index: 20; background: rgba(250, 248, 244, .99); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-light); }
.tabs-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(14px, 4vw, 36px); padding-block: 4px; }
/* スマホ:タブは1行に収め、収まらないときは横にずらして選ぶ(2段に折り返して、画面の上を広く塞がないように) */
@media (max-width: 599px) { .tabs-in { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs-in::-webkit-scrollbar { display: none; } .tab { flex: none; } }
.tab { appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--on-light); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .1em; min-height: 44px; padding: 0 2px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; transition: color .3s, border-color .3s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.panel { padding-block: clamp(56px, 10vw, 96px); }
.panel + .panel { border-top: 1px solid var(--line-light); }
.js-tabs .panel + .panel { border-top: 0; }
.panel[hidden] { display: none; }
.panel-title { font-size: clamp(22px, 5.6vw, 32px); font-weight: 600; line-height: 1.6; letter-spacing: .08em; text-align: center; margin-bottom: clamp(32px, 6vw, 56px); }
.panel-lead { text-align: center; margin-bottom: clamp(32px, 6vw, 48px); }
.rows { border-top: 1px solid var(--line-light); margin: 0; }
.rows > div { display: grid; gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--line-light); }
.rows dt { font-size: 16px; font-weight: 700; line-height: 1.7; }
.rows dt small { display: block; font-size: 13px; font-weight: 500; color: var(--on-light); margin-top: 2px; line-height: 1.8; }
.rows dd { margin: 0; font-size: 16px; font-weight: 700; white-space: nowrap; }
@media (min-width: 600px) { .rows > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } .rows dd { text-align: right; } }
.rows-note { margin-top: 20px; line-height: 1.9; }
.panel-sub { font-size: 18px; font-weight: 700; letter-spacing: .1em; margin: clamp(56px, 9vw, 80px) 0 16px; }
.terms h3 { font-size: 17px; font-weight: 700; margin: 44px 0 10px; padding-left: 14px; border-left: 1px solid var(--red); line-height: 1.6; }
.terms h3:first-of-type { margin-top: 0; }
.terms p, .terms li { font-size: 15px; line-height: 2; color: var(--on-light); }
.terms li { position: relative; padding-left: 1.2em; }
.terms li + li { margin-top: 4px; }
.terms li::before { content: "・"; position: absolute; left: 0; }
.calc { margin-top: 14px; padding: 18px 20px; background: var(--tint); font-size: 14px !important; line-height: 1.9; }
.calc b { font-weight: 700; color: var(--ink); }
.faq-item { border-top: 1px solid var(--line-light); }
.faq-item:last-child { border-bottom: 1px solid var(--line-light); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; gap: 14px; align-items: baseline; padding: 22px 36px 22px 0; position: relative; font-size: 16px; font-weight: 700; line-height: 1.7; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; flex: none; color: var(--red); font-weight: 700; }
.faq-item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translateY(-75%) rotate(45deg); transition: transform .3s var(--ease); }
.faq-item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-item p { padding: 0 0 24px 1.9em; font-size: 15px; line-height: 2; color: var(--on-light); }
/* 各ページの締め:トップの代表メッセージと同じ、扉から明かりがこぼれる夜の店先 */
.page-cta { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(72px, 10vw, 120px); }
.page-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; z-index: -2; }
.page-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 46% 26% at 50% 66%, rgba(10, 9, 8, .6), transparent), linear-gradient(to bottom, rgba(10, 9, 8, .8), rgba(10, 9, 8, .3) 45%, rgba(10, 9, 8, .12)); }
/* PC:扉の明かりが見出しの後ろに来るよう、写真を下の端にそろえて大きく置く(トップの代表メッセージと同じ) */
@media (min-width: 900px) { .page-cta-bg { top: auto; bottom: 0; height: 1480px; } }
.page-cta .h2 { margin-bottom: 20px; line-height: 1.8; }
.page-cta .body { margin-bottom: 32px; font-weight: 600; text-shadow: 0 0 6px rgba(10, 9, 8, .95), 0 0 16px rgba(10, 9, 8, .95), 0 0 34px rgba(10, 9, 8, .85); }

/* ---------- ご相談のページ ---------- */
.form-sec { padding-block: 12svh 20svh; }
.form-grid { display: grid; gap: 56px; }
@media (min-width: 900px) { .form-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; } .side { position: sticky; top: calc(var(--head-h) + 32px); } }
.cf-field { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.cf-field > label, .cf-field > legend { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.req, .opt { font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 3px 7px; line-height: 1.2; }
.req { background: var(--red); color: var(--paper); }
.opt { border: 1px solid var(--line-light); color: var(--on-light); }
.cf-field input[type=text], .cf-field input[type=email], .cf-field input[type=tel], .cf-field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line-light); border-radius: 0; padding: 14px 16px; line-height: 1.7;
  transition: border-color .25s;
}
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cf-help { font-size: 13px; color: var(--on-light); margin-top: 8px; line-height: 1.8; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line-light); background: #fff; font-size: 15px; line-height: 1.6; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.choice input { flex: none; width: 18px; height: 18px; accent-color: var(--red); margin: 0; }
.has-error input[type=text], .has-error input[type=email], .has-error textarea, .has-error .choice { border-color: var(--red); }
.field-error { color: #B3200F; font-size: 13px; font-weight: 600; margin-top: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy-note { font-size: 13px; color: var(--on-light); margin-bottom: 24px; }
.cform button[type=submit] { min-height: 60px; padding: 0 3em; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .14em; cursor: pointer; background: var(--red); color: var(--paper); border: 1px solid var(--red); border-radius: 0; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.cform button[type=submit]:hover { background: var(--ink); border-color: var(--ink); }
.cform button[disabled] { opacity: .6; cursor: wait; }
.form-status { margin-top: 16px; font-size: 14px; }
.form-status.err { color: #B3200F; font-weight: 600; }
.side > div + div { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-light); }
.side h2 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.side p { font-size: 14px; line-height: 2; color: var(--on-light); }
.mail-addr { appearance: none; background: none; border: 1px solid var(--line-light); padding: 12px 16px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; width: 100%; overflow-wrap: anywhere; }
.mail-addr small { font-size: 12px; color: var(--on-light); }
.thanks h2 { font-size: clamp(22px, 5.6vw, 32px); font-weight: 600; line-height: 1.7; margin-bottom: 20px; }
.thanks p { color: var(--on-light); margin-bottom: 32px; }

/* ---------- ご利用ガイド・プライバシーポリシー ---------- */
.page-head { padding: calc(var(--head-h) + 18svh) 0 12svh; }
/* 背景の写真つきの見出し(ご利用ガイド・料金プラン・ご相談)。写真の左側は暗く空いているので、見出しと説明文を左に乗せる */
.page-head-img { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(440px, 39vw, 560px); padding: calc(var(--head-h) + 40px) 0 72px; }
.page-head-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, 70% 50%); z-index: -2; }
/* 文字が読みにくいところだけ、左から黒を薄く重ねる(スマホは文字が写真の上に乗るので、全体を少し暗くする) */
.page-head-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 9, 8, .78) 0%, rgba(10, 9, 8, .5) 38%, rgba(10, 9, 8, 0) 68%); }
.page-head-img .wrap:not(.narrow) { width: min(100%, 1120px); }
.page-head-img .wrap > * { max-width: 600px; }
@media (max-width: 899px) { .page-head-img::after { background: linear-gradient(90deg, rgba(10, 9, 8, .85) 0%, rgba(10, 9, 8, .7) 60%, rgba(10, 9, 8, .55) 100%); } }
.page-head .h2 { margin-bottom: 20px; font-size: clamp(22px, 6.6vw, 46px); }
.page-head .body { color: var(--on-dark); }
.doc { padding-block: 12svh 20svh; }
.doc h2 { font-size: clamp(20px, 5vw, 26px); font-weight: 700; line-height: 1.6; margin: 72px 0 20px; padding-top: 24px; border-top: 1px solid var(--line-light); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 17px; font-weight: 700; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--on-light); font-size: 15px; line-height: 2.1; }
.doc ul { margin-top: 8px; }
.doc li { padding-left: 1.2em; position: relative; }
.doc li::before { content: "・"; position: absolute; left: 0; }
.doc .note { margin-top: 20px; }
.doc p .tlink, .doc li .tlink { display: inline; padding: 0; font-size: inherit; letter-spacing: inherit; background-position: left bottom; background-size: 100% 1px; padding-bottom: 2px; }
.doc .draft { border: 1px solid var(--red); padding: 16px 20px; font-size: 13px; margin-bottom: 48px; }


/* ---------- PC:本文を一回り大きく ---------- */
@media (min-width: 900px) {
  body { font-size: 17px; }
  .body { font-size: 18px; }
  .note { font-size: 14px; }
  .find-body p, .band-lead, .purpose-list li { font-size: 18px; }
  :root { --fs-label: 13px; }
  .incl-group li, .promise li, .check-list li, .vs-steps li { font-size: 16px; }
  .promise b, .incl-group h3 { font-size: 18px; }
  .gift-sub { font-size: 16px; } .gift-notes li { font-size: 14px; }
  .doc p, .doc li, .terms p, .terms li, .faq-item p, .side p { font-size: 17px; }
  .rows dt small { font-size: 14px; }
  .faq-item summary, .rows dt, .rows dd { font-size: 17px; }
  .head-link, .head .btn-sm { font-size: 15px; }
  .foot-nav a { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}