/* kinoshitastudio.com ── 会社の困りごと窓口
   ⭐ 本店（kinoshita.studio）とは世界観を変える
   　 参考＝オリックス「バファローズってなんなん？」の【物が浮遊して、物ごとに一言＋矢印】の作りだけ借りる
   🔴 2026-10-02 木下「和で安くさい」「ちょっとださい」→ 明朝・金のグラデ・手描き風の時計や付箋・縦書きをやめた
   　 書体＝Noto Sans JP 900（和文）＋Inter（英数）／色＝白・墨・青1色／帯は黒 */
:root{
  --bg:#ffffff;
  --bg-soft:#f4f4f4;
  --ink:#0b0b0b;
  --ink-sub:#5f5f5f;
  --line:#0b0b0b;
  --line-soft:#e4e4e4;
  --dark:#0b0b0b;
  --dark-sub:#9a9a9a;
  --accent:#1f3cff;
  --sans:'Inter','Noto Sans JP',sans-serif;
  --jp:'Noto Sans JP',sans-serif;
  --wrap:1200px;
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-feature-settings:'palt' }
a{ color:inherit }
img{ max-width:100%; display:block }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px }
@media (max-width:640px){ .wrap{ padding:0 16px } }

/* 🔴 まだ決まっていない数字・文言＝黄色で塗って見つけやすくする。公開前に全部消す */
.tbd{ background:#fff1a8; border-radius:3px; padding:0 .2em; color:var(--ink) }

/* 小さな英字の札（物ごとに付ける：01 / WEBSITE） */
.tag{ font-family:'Inter',sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-sub) }
.on-dark .tag{ color:var(--dark-sub) }

/* ── ヘッダー ── */
.site-head{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft) }
.site-head .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:68px; gap:12px }
.head-l{ font-size:11px; line-height:1.5; color:var(--ink-sub) }
.head-l b{ display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--ink) }
/* 左上の名乗り＝「それナル」。和文なので書体は本文と同じものを使う */
.head-c{ font-family:var(--jp); font-weight:900; font-size:58px; line-height:1; letter-spacing:-.05em; text-decoration:none; white-space:nowrap; color:var(--ink);
  display:inline-flex; align-items:flex-start; gap:0 }
.head-c span{ color:var(--accent) }
/* 木下スタジオの印。右肩に小さく添えて「これは木下スタジオのサービス」と示す。
   🔴 元の線幅3は viewBox 500 に対するもの。この大きさでは消えるので太く描き直す */
.ks-mark{ width:.62em; height:.62em; flex:none; margin:.02em 0 0 -.1em; overflow:visible }
.ks-mark g line{ stroke:var(--ink); stroke-width:22 }
.ks-mark circle{ fill:var(--ink) }
.head-c:hover .ks-mark line{ stroke:var(--accent) }
.head-c:hover .ks-mark circle{ fill:var(--accent) }
/* 🔴 三本線とボタンを【1行に固定】する。名乗りを大きくすると中央列が広がって
   右列が狭くなり、折り返して三本線がボタンの下に落ちる */
.head-r{ justify-self:end; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap }
@media (max-width:720px){
  .site-head .wrap{ grid-template-columns:1fr auto; height:58px }
  .head-l{ display:none }
  .head-c{ font-size:48px }
}

/* ── ボタン ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding:0 24px; border-radius:999px; font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; transition:transform .15s, background .15s }
.btn:hover{ transform:translateY(-1px) }
.btn-line{ background:#06c755; color:#fff }
.btn-ink{ background:var(--ink); color:#fff }
.btn-accent{ background:var(--accent); color:#fff }
.btn-ghost{ border:1.5px solid currentColor }
.btn-sm{ min-height:38px; padding:0 16px; font-size:13px }

/* 青い丸の矢印 */
.arrow{ display:inline-grid; place-items:center; width:1.25em; height:1.25em; border-radius:50%; background:var(--accent); color:#fff; flex:none; vertical-align:-.12em }
.arrow::before{ content:''; width:.3em; height:.3em; border-top:.11em solid currentColor; border-right:.11em solid currentColor; transform:translateX(-.05em) rotate(45deg) }

/* ── 表紙の見出し ── */
.cover-head{ padding-top:44px }
.cover-head h1{ font-family:var(--jp); font-weight:900; font-size:clamp(46px,10.4vw,138px); line-height:1.05; letter-spacing:-.05em; margin:0; white-space:nowrap }
.cover-head h1 span{ color:var(--accent) }
.cover-head .lead{ font-weight:700; font-size:clamp(14px,1.6vw,18px); margin:0 0 14px }
.cover-head hr{ border:0; border-top:2px solid var(--line); margin:22px 0 0 }

/* 見出し直後の値段 ── 横1行のまま、金額だけ思い切り大きく。
   🔴 下の舞台は aspect-ratio で高さが決まっているので、ここの高さを増やしすぎると重なる */
/* 🔴 字下げ（縦罫・padding）は入れない。見出し・リード文と【左端が揃わなくなる】 */
.price-flash{
  margin:clamp(14px,2vw,22px) 0 0; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:clamp(8px,1.2vw,14px);
}
.price-flash .now{
  font-family:var(--jp); font-weight:700; font-size:clamp(12px,1.4vw,16px);
  color:#fff; background:var(--accent); padding:.34em .74em; letter-spacing:.02em;
}
/* 青い札のすぐ横。札と同じ行に並べたいので、金額より先に置く */
.price-flash .now-note{
  font-family:var(--jp); font-weight:700; font-size:clamp(11px,1.25vw,14px);
  color:var(--ink-sub); letter-spacing:0; white-space:nowrap;
}
.price-flash b{
  font-family:var(--jp); font-weight:900; letter-spacing:-.045em;
  font-size:clamp(28px,5vw,62px); line-height:1.02; color:var(--ink);
  font-feature-settings:'palt';
}
.price-flash b em{
  font-style:normal; font-family:'Inter',sans-serif; font-weight:900;
  font-size:1.3em; letter-spacing:-.06em; color:var(--accent);
}
.price-flash .cond{
  font-family:var(--jp); font-weight:500; font-size:clamp(11px,1.2vw,14px);
  color:var(--ink-sub); line-height:1.6;
}
/* 表紙の高さを増やさずに入口を1つ足す。舞台は aspect-ratio で位置が決まっているので、
   ここに行を増やすと下の舞台と重なる */
.price-flash .cond-link{ font-weight:800; color:var(--accent); text-decoration:none; white-space:nowrap }
.price-flash .cond-link:hover{ text-decoration:underline }
/* 🔴 これが無いと「1ページ／修正なし」が金額の横に回り込み、
   「し」1文字だけが次の行に落ちる */
@media (max-width:560px){
  .price-flash{ gap:5px 9px }
  .price-flash b{ font-size:7.4vw }
  .price-flash .cond{ width:100% }
}
@media (max-width:640px){ .cover-head h1{ font-size:9vw; letter-spacing:-.058em } }

/* ═══ 浮遊する舞台 ═══
   ⭐ 物の位置は「設計図のpx」で書く：PC＝幅1200の舞台／スマホ＝幅390の舞台
   　 --x --y --w（PC）／--mx --my --mw（スマホ）。文字も --fs / --mfs を同じ割合で縮める（cqw）
   　 ＝画面の幅が変わっても、コラージュがそのまま拡大縮小される */
.stage{ position:relative; width:100%; max-width:var(--wrap); margin:0 auto; container-type:inline-size; --W:1200 }
.stage.white{ --H:1180; aspect-ratio:1200/1180 }
.stage.dark{ --H:1240; aspect-ratio:1200/1240 }
/* 白い面＝方眼の点（参考の地の点と同じ役） */
.dots{ background-image:radial-gradient(#d6d6d6 1px,transparent 1.2px); background-size:22px 22px }
.band-dark{ background:var(--dark); color:#fff; padding:56px 0 }
@media (max-width:720px){
  .stage{ --W:390 }
  .stage.white{ --H:1360; aspect-ratio:390/1360 }
  .stage.dark{ --H:1500; aspect-ratio:390/1500 }
}
.it,.say,.deco,.tiny{ position:absolute; left:calc(var(--x) * 100% / var(--W)); top:calc(var(--y) * 100% / var(--H)) }
.it{ width:calc(var(--w) * 100% / var(--W)); text-decoration:none; color:inherit; display:block }
@media (max-width:720px){
  .it,.say,.deco,.tiny{ left:calc(var(--mx) * 100% / var(--W)); top:calc(var(--my) * 100% / var(--H)) }
  .it{ width:calc(var(--mw) * 100% / var(--W)) }
  .hide-sp{ display:none !important }
}
/* ⭐ スマホだけ折り返す。PCは1行のまま。
   🔴 この2行は上の @media より【後ろ】に置くこと。先に書くと打ち消される */
br.sp-br{ display:none }
@media (max-width:720px){ br.sp-br{ display:inline } }
.u{ font-size:calc(var(--fs,20) * 100cqw / var(--W)) }
@media (max-width:720px){ .u{ font-size:calc(var(--mfs,var(--fs,20)) * 100cqw / var(--W)) } }

/* 浮く：物ごとに周期と遅れをずらす */
.float{ animation:float var(--d,6s) ease-in-out infinite; animation-delay:var(--dl,0s) }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)) }
  50%{ transform:translateY(-12px) rotate(calc(var(--r,0deg) + 1deg)) }
}
@media (prefers-reduced-motion:reduce){ .float{ animation:none; transform:rotate(var(--r,0deg)) } }
.it:hover .float{ animation-play-state:paused }
.shadow{ filter:drop-shadow(0 22px 28px rgba(0,0,0,.28)) }

/* 一言 */
.say{ font-family:var(--jp); font-weight:900; line-height:1.3; letter-spacing:-.03em; text-decoration:none; color:inherit; z-index:3; white-space:nowrap }
.say .tag{ display:block; font-size:max(10px,.34em); letter-spacing:.14em; margin-bottom:.5em }
.say .arrow{ margin-left:.25em; font-size:.82em }
.say small{ display:block; font-weight:500; font-size:max(11px,.4em); line-height:1.75; letter-spacing:0; margin-top:.7em; max-width:22em; color:var(--ink-sub); white-space:normal }
.on-dark .say small{ color:var(--dark-sub) }
/* 🔴🔴 舞台は【見出しと絵】で見せる場所。見出しを大きくすると説明文がそのぶん下へ伸び、
   下に置いた札に必ずかぶる（07で94px・10で131px かぶっていた）。
   広い画面では出さない。同じ文は各サービスのページにある */
/* 🔴🔴 舞台の説明文は【見出しの中に入れない】。
   見出しを大きくするとそのぶん下へ伸びて、下に置いた札に必ずかぶるため。
   見出しから切り離し、ほかの物と同じ --x / --y で空いている所に自分で置く */
.stage-notes{
  list-style:none; margin:26px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid rgba(0,0,0,.14);
}
.stage-notes li{ padding:20px 34px 0 0; font-size:14px; line-height:1.95; color:var(--ink-sub) }
.stage-notes li:last-child{ padding-right:0 }
.stage-notes b{
  display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:9px;
}
.band-dark .stage-notes{ border-top-color:rgba(255,255,255,.22) }
.band-dark .stage-notes li{ color:var(--dark-sub) }
.band-dark .stage-notes b{ color:#fff }
@media (max-width:760px){
  .stage-notes{ grid-template-columns:1fr; margin-top:18px }
  .stage-notes li{ padding:16px 0 0 }
}
/* ── 画面下に貼りつく相談ボタン ──
   ⭐ 最初から出すと読む前にふさぐので、少し読んでから出す。
      ページ末尾の相談欄が見えたら引っ込める（同じボタンが2つ並ぶため） */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; gap:10px; justify-content:center;
  padding:12px clamp(12px,3vw,24px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93); backdrop-filter:blur(14px);
  border-top:1px solid rgba(0,0,0,.1);
  transform:translateY(130%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
body.cta-on .sticky-cta{ transform:none; pointer-events:auto }
.sticky-cta .btn{ min-height:52px; font-size:14px; font-weight:800; font-family:var(--jp) }
@media (max-width:560px){
  .sticky-cta{ gap:8px; padding-left:12px; padding-right:12px }
  .sticky-cta .btn{ flex:1 1 0; padding:0 10px; font-size:13px; min-width:0 }
}
/* メニューを開いているあいだは出さない */
body.menu-open .sticky-cta{ transform:translateY(130%) }

/* 舞台を見終わったところで、サービスの説明へ送る */
.stage-cta{ margin:34px 0 54px; display:flex; justify-content:center }
/* 🔴 幅いっぱいに伸びる帯に pill の角丸（999px）は効きすぎる。小さく取る */
.stage-cta .btn{ min-height:58px; padding:0 32px; font-size:15px; font-weight:800; font-family:var(--jp); border-radius:10px }
@media (max-width:560px){ .stage-cta{ margin-bottom:44px } .stage-cta .btn{ width:100%; padding:0 18px } }
a.say:hover{ color:var(--accent) }

/* 大きな字（参考の「得」）＝青いベタ */
.big{ font-family:var(--jp); font-weight:900; line-height:.9; letter-spacing:-.06em; color:var(--accent) }
.big.latin{ font-family:'Inter',sans-serif; letter-spacing:-.07em }
/* 輪郭だけの英字 */
.deco{ line-height:.9; pointer-events:none; white-space:nowrap }
.outline{ font-family:'Inter',sans-serif; font-weight:900; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:2px var(--ink) }
.on-dark .outline{ -webkit-text-stroke-color:#fff }
.tiny{ font-family:'Inter',sans-serif; font-size:10px; line-height:1.6; color:var(--ink-sub); letter-spacing:.16em; pointer-events:none; writing-mode:vertical-rl; text-transform:uppercase }
.on-dark .tiny{ color:var(--dark-sub) }
@media (max-width:720px){ .tiny{ display:none } }

/* ═══ 物 ═══ */
/* ノートPC */
.laptop .screen{ background:#111; border-radius:10px 10px 0 0; padding:3% 3% 3.4% }
.laptop .screen img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top }
.laptop .base{ height:0; padding-bottom:4.2%; background:linear-gradient(#e2e2e5,#a8a8ad); border-radius:0 0 14px 14px; margin:0 -7%; position:relative }
.laptop .base::after{ content:''; position:absolute; left:42%; right:42%; top:0; height:30%; background:#8d8d93; border-radius:0 0 6px 6px }
/* スマホ */
.phone{ background:#111; border-radius:20% / 9.5%; padding:5.5% 5% }
.phone img{ width:100%; aspect-ratio:9/19.5; object-fit:cover; object-position:left top; border-radius:15% / 7% }
.phone.center img{ object-position:center top }
/* 写真（白いふち） */
.photo{ background:#fff; padding:3.5% 3.5% 12%; position:relative }
.photo img{ width:100%; aspect-ratio:1; object-fit:cover }
.photo .tag{ position:absolute; left:3.5%; bottom:3.6%; color:#555; font-size:10px }
/* 問いのカード（付箋の代わり） */
.sticky{ background:#fff; color:var(--ink); border-radius:14px; padding:12% 12% 14%; font-family:var(--jp); font-weight:800; font-size:inherit; line-height:1.35; letter-spacing:-.02em; box-shadow:0 18px 30px rgba(0,0,0,.35) }
.sticky::before{ content:'Q.'; display:block; font-family:'Inter',sans-serif; font-weight:800; color:var(--accent); font-size:.8em; margin-bottom:.35em }
.sticky.b{ background:var(--accent); color:#fff } .sticky.b::before{ color:#fff }
/* 資料（スライド） */
.slide{ background:#fff; aspect-ratio:16/10; border-radius:6px; padding:6% 7%; color:var(--ink); display:flex; flex-direction:column; box-shadow:0 22px 34px rgba(0,0,0,.35); font-family:var(--jp) }
.slide .s-meta{ display:flex; justify-content:space-between; font-family:'Inter',sans-serif; font-weight:600; font-size:.62em; letter-spacing:.12em; color:#8a8a8a; text-transform:uppercase; border-bottom:1px solid #e6e6e6; padding-bottom:.6em }
.slide .s-h{ font-weight:900; font-size:1.55em; line-height:1.2; letter-spacing:-.04em; margin:.6em 0 auto }
.slide .s-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:4% }
.slide .s-steps span{ border-top:3px solid var(--ink); padding-top:.4em; font-weight:800; font-size:.8em }
.slide .s-steps span:last-child{ border-color:var(--accent); color:var(--accent) }
.slide ol{ margin:0; padding:0; list-style:none; counter-reset:s; display:grid; gap:.35em }
.slide ol li{ counter-increment:s; font-weight:700; font-size:.78em; display:flex; gap:.6em; align-items:baseline }
.slide ol li::before{ content:counter(s,decimal-leading-zero); font-family:'Inter',sans-serif; font-weight:800; color:var(--accent); font-size:.85em }
/* カード（ロゴ） */
.card img{ width:100%; border-radius:4px }

/* ═══ 下のタイル ═══ */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:72px 0 24px }
@media (max-width:860px){ .tiles{ grid-template-columns:1fr 1fr } }
.tile{ position:relative; aspect-ratio:1; border-radius:18px; overflow:hidden; text-decoration:none; color:#fff; display:block; background:var(--ink) }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s }
.tile:hover img{ transform:scale(1.05) }
.tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(0,0,0,.75)) }
.tile .tag{ position:absolute; left:16px; top:14px; z-index:1; color:rgba(255,255,255,.8) }
.tile span.lb{ position:absolute; left:16px; right:16px; bottom:14px; z-index:1; font-family:var(--jp); font-weight:900; letter-spacing:-.03em; font-size:clamp(16px,1.9vw,24px); line-height:1.25; display:flex; align-items:flex-end; justify-content:space-between; gap:8px }
.tile.solid{ background:var(--accent) } .tile.solid::after{ display:none }
.tile.solid b{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:900; letter-spacing:-.07em; font-size:clamp(70px,9vw,130px); padding-bottom:12% }
.tile.solid .arrow{ background:#fff; color:var(--accent) }

/* ═══ サービスのページ ═══ */
.svc-hero{ padding:44px 0 64px; border-bottom:2px solid var(--line) }
.crumb{ font-size:12px; color:var(--ink-sub); margin-bottom:28px }
.crumb a{ text-decoration:none }
.svc-hero .grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center }
@media (max-width:860px){ .svc-hero .grid{ grid-template-columns:1fr } }
/* 🔴 右に置くものが無いページでは、見出しを半分の幅に押し込めない。
   case の「予約が120%増えた。」が入りきらず3行に割れていた */
.svc-hero .grid > :only-child{ grid-column:1 / -1 }
.svc-hero .kicker{ font-family:'Inter',var(--jp); font-weight:700; font-size:13px; letter-spacing:.06em; margin:0 0 14px; color:var(--accent) }
.svc-hero h1{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,6vw,76px); line-height:1.2; letter-spacing:-.05em; margin:0 0 22px }
/* 🔴 em の既定は斜体。数字を強めたいだけなので、斜体は消して色で効かせる */
.svc-hero h1 em{ font-style:normal; color:var(--accent) }
.svc-hero p{ color:var(--ink-sub); margin:0 0 28px; max-width:34em }
.svc-hero .cta{ display:flex; flex-wrap:wrap; gap:10px }

section{ padding:80px 0 }
section.soft{ background:var(--bg-soft) }
section.dark{ background:var(--dark); color:#fff }
.sec-title{ font-family:var(--jp); font-weight:900; font-size:clamp(26px,3.6vw,44px); line-height:1.25; letter-spacing:-.04em; margin:0 0 10px }
.sec-sub{ color:var(--ink-sub); margin:0 0 36px }
section.dark .sec-sub{ color:var(--dark-sub) }

/* 困りごと → こうします */
.worries{ list-style:none; margin:0; padding:0; border-top:2px solid var(--line) }
.worries li{ display:grid; grid-template-columns:1fr 40px 1.2fr; gap:16px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line-soft) }
.worries .q{ font-family:var(--jp); font-weight:800; font-size:19px; letter-spacing:-.02em }
.worries .q::before{ content:'「' } .worries .q::after{ content:'」' }
.worries .a{ color:var(--ink-sub) }
@media (max-width:720px){ .worries li{ grid-template-columns:1fr; gap:6px } .worries li .arrow{ transform:rotate(90deg) } }

/* できること */
.can{ display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:0; padding:0; border-top:2px solid var(--line) }
@media (max-width:860px){ .can{ grid-template-columns:1fr } }
.can li{ padding:24px 24px 24px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-sub); font-size:14px }
.can b{ display:block; color:var(--ink); font-family:var(--jp); font-weight:800; font-size:19px; letter-spacing:-.02em; margin-bottom:6px }

/* 流れ */
/* 進め方 ── トップの語彙（.tag ＋ 太いゴシック）に揃える。
   番号は主役にしない。主役は「何をするか」の一語。
   罫は太く1本。最後の 04 だけ青＝ここで終わる、を罫で言う。 */

/* ── 問題 → 結論 → 木下スタジオなら → ゴール ──
   ページの頭で、読む人が自分の話だと分かるようにする。
   02（結論）だけ青＝ここが答え。他は地の色。 */

/* 事例を1本だけ ── 数字だけが主役。黒地に青の数字 */
.case-hero{ background:#0b0b0b; color:#fff; padding:76px 0 }
.case-hero .tag{ display:block; color:rgba(255,255,255,.55); margin-bottom:20px }
.case-hero h2{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(30px,5.6vw,66px); line-height:1.22; letter-spacing:-.05em;
  margin:0 0 22px;
}
.case-hero h2 em{
  font-style:normal; font-family:'Inter',sans-serif; font-weight:900;
  font-size:1.5em; letter-spacing:-.06em; color:var(--accent);
  line-height:0.9; display:inline-block; vertical-align:-.06em;
}
.case-hero p{ margin:0 0 30px; color:rgba(255,255,255,.7); font-size:14px; line-height:2; max-width:56ch }
.case-hero a{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em;
  padding:14px 24px; background:var(--accent); color:#fff; border-radius:999px;
  text-decoration:none; transition:background .25s,color .25s;
}
.case-hero a:hover{ background:#fff; color:var(--accent) }


/* 困りごとの顔 ── 写真と言葉を【左右に分ける】。顔の上に字を乗せない */
.face{ background:#0b0b0b; color:#fff; overflow:hidden }
.face .face-grid{
  max-width:1120px; margin:0 auto; display:grid;
  grid-template-columns:1fr 1fr; align-items:stretch; gap:0;
}
.face-in{
  display:flex; flex-direction:column; justify-content:center; container-type:inline-size;
  padding:clamp(40px,5vw,72px) clamp(24px,3.4vw,48px);
}
.face .q{
  font-family:var(--jp); font-weight:900; color:#fff; margin:0 0 22px;
  font-size:clamp(29px,4vw,58px); line-height:1.22; letter-spacing:-.05em;
}
/* 答えの帯。左から右へ1字ずつ大きくなる。
   🔴 白地は【帯ぜんぶで1枚】にする。字ごとに背景を持たせると、
      字の高さがそのまま縁の高さになって、上端がギザギザになる */
.face .a{
  /* 最初の字の大きさ。後ろの行（--fit＝最初の字の何個ぶんかをJSが数える）が欄の幅に収まるように決める */
  --fa:clamp(7px, calc((100cqi - 44px) / var(--fit, 46)), 18px);
  margin:0; align-self:flex-start;
  background:#fff; color:var(--accent); padding:.6em .8em;
  display:flex; flex-wrap:wrap; align-items:baseline;
  font-family:var(--jp); font-weight:800; letter-spacing:-.02em;
  line-height:1.2;
}
.face .a .br{ flex-basis:100%; height:0 }
.face .a span{
  background:none;
  /* ⭐ 後ろへ行くほど急に大きくする（木下「もっと急激に」）＝ i の3乗で加速。最後の字は約5倍 */
  font-size:calc(var(--fa) * (1 + var(--i,0) * 0.3 + var(--i,0) * var(--i,0) * var(--i,0) * 3.8));
}
/* 字に分ける前（JSが動かないとき）も、白地に青で読める形のまま */
.face .a:not(.split){ display:inline-block;
  font-size:clamp(13px,1.3vw,17px); line-height:1.75; padding:.5em .85em }
.face figure{ margin:0; position:relative; min-height:clamp(280px,34vw,440px) }
.face img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
@media (max-width:760px){
  .face .face-grid{ grid-template-columns:1fr }
  .face figure{ order:-1; min-height:260px }
  .face-in{ padding:32px 20px 40px }
}


.frame-sec{ padding:56px 0 8px }
.frame{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  list-style:none; margin:0; padding:0;
  border-top:3px solid var(--ink);
}
@media (max-width:900px){ .frame{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .frame{ grid-template-columns:1fr } }
.frame li{
  /* 🔴 罫の【両側】に余白を取る。右だけだと、次の列の文字が罫に貼りつく */
  padding:26px 32px 30px 32px; border-right:1px solid rgba(0,0,0,.12);
}
.frame li:first-child{ padding-left:0 }
.frame li:last-child{ border-right:0; padding-right:0 }
@media (max-width:900px){
  .frame li{ border-right:0; border-bottom:1px solid rgba(0,0,0,.12); padding:26px 0 30px }
  .frame li:nth-child(odd){ padding-right:32px; border-right:1px solid rgba(0,0,0,.12) }
  .frame li:nth-child(even){ padding-left:32px }
  .frame li:last-child{ border-bottom:0 }
}
@media (max-width:560px){ .frame li,
  .frame li:nth-child(odd),
  .frame li:nth-child(even){ padding:26px 0 30px; border-right:0 } }
.frame .tag{ display:block; margin-bottom:14px }
.frame b{
  display:block; font-family:var(--jp); font-weight:900;
  font-size:19px; line-height:1.4; letter-spacing:-.03em;
  color:var(--ink); margin-bottom:10px;
}
.frame p{ margin:0; font-size:14px; line-height:1.95; color:var(--ink-sub) }
/* 02 ＝ 結論。ここだけ青で、答えだと分かるようにする */
.frame li:nth-child(2) .tag,
.frame li:nth-child(2) b{ color:var(--accent) }
.frame li:nth-child(2) p{ color:var(--ink) }
/* 料金表のページ＝4つ並ぶが「結論」ではないので、2番目だけ青くする既定を止める */
.frame.plain li:nth-child(2) .tag{ color:var(--ink-sub) }
.frame.plain li:nth-child(2) b{ color:var(--ink) }
.frame.plain li:nth-child(2) p{ color:var(--ink-sub) }
.p-num{
  display:block; font-family:'Inter',var(--jp); font-weight:900;
  font-size:clamp(26px,3.2vw,34px); letter-spacing:-.035em;
  color:var(--ink); margin:0 0 10px; line-height:1.1;
}
/* 事例ページの画面写真。横幅いっぱいに置いて、下に一行そえる */
.case-shot{ margin:0 }
.case-shot img{
  display:block; width:100%; height:auto; border-radius:14px; background:#eee;
  box-shadow:0 18px 50px rgba(0,0,0,.14);
}
.case-shot figcaption{ margin-top:14px; font-size:13px; line-height:1.9; color:var(--ink-sub) }
/* スマホの画面は縦長なので、原寸で並べると画面を埋めてしまう。幅を抑える */
.case-shot.sp img{ max-width:300px; margin:0 auto }
.case-shot.sp figcaption{ text-align:center }
/* 2つを並べて比べる表。左の列（それナル）に薄い青地を敷いて、どちらの話か迷わせない */
.cmp{ width:100%; border-collapse:collapse; margin-top:6px }
.cmp th,.cmp td{ padding:18px 16px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; font-size:15px; line-height:1.8 }
.cmp th{ width:22%; font-family:var(--jp); font-weight:800; color:var(--ink-sub); font-size:13px }
.cmp td{ width:39% }
.cmp td.a{ background:rgba(31,60,255,.06) }
.cmp tr:first-child td{ font-family:var(--jp); font-weight:900; font-size:18px; letter-spacing:-.02em; border-bottom:2px solid var(--ink) }
.cmp tr:first-child td.a{ color:var(--accent) }
.cmp td small{ display:block; font-family:'Inter',var(--jp); font-weight:600; font-size:11px; letter-spacing:.06em; color:var(--ink-sub); margin-top:5px }
@media (max-width:620px){
  .cmp th,.cmp td{ padding:13px 9px; font-size:13px }
  .cmp tr:first-child td{ font-size:14px }
  .cmp th{ width:26% }
}
.p-link{ margin:24px 0 0; font-size:14px }
.p-link a{ font-family:var(--jp); font-weight:800; color:var(--accent); text-decoration:none }
.p-link a:hover{ text-decoration:underline }

.flow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  list-style:none; margin:40px 0 0; padding:0;
}
@media (max-width:860px){ .flow{ grid-template-columns:1fr 1fr; gap:24px } }
@media (max-width:520px){ .flow{ grid-template-columns:1fr; gap:20px } }
.flow li{
  border-top:2px solid var(--ink); padding:14px 0 0;
  font-size:14px; line-height:1.9; color:var(--ink-sub);
}
.flow li:last-child{ border-top-color:var(--accent) }
.flow .tag{ display:block; margin-bottom:12px }
.flow li:last-child .tag{ color:var(--accent) }
.flow b{
  display:block; font-family:var(--jp); font-weight:900;
  font-size:21px; line-height:1.35; letter-spacing:-.03em;
  color:var(--ink); margin:0 0 8px;
}
/* 暗い節に置いたときだけ色を反転する */
section.dark .flow li{ border-top-color:#fff; color:var(--dark-sub) }
section.dark .flow b{ color:#fff }
/* 最後を青くするのは【進め方】の到達点だから。並列に並べただけの列では止める */
#not-included .flow li:last-child{ border-top-color:#fff }
#not-included .flow li:last-child .tag{ color:var(--dark-sub) }

/* 料金 */
.price{ width:100%; border-collapse:collapse; border-top:2px solid var(--line) }
.price th,.price td{ padding:22px 0; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top }
.price th{ width:45%; font-family:var(--jp); font-weight:800; font-size:18px; padding-right:16px }
.price td{ font-family:'Inter',var(--jp); font-weight:800; font-size:24px; letter-spacing:-.02em }
.price td small{ display:block; font-family:var(--jp); font-weight:400; color:var(--ink-sub); font-size:13px; letter-spacing:0 }

/* 実績 */
.works{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:860px){ .works{ grid-template-columns:1fr 1fr } }
.works figure{ margin:0 }
.works img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:12px; background:#eee }
.works figcaption{ font-size:13px; color:var(--ink-sub); margin-top:8px }

/* よくある質問 */
.faq details{ border-bottom:1px solid var(--line-soft); padding:20px 0 }
.faq details:first-of-type{ border-top:2px solid var(--line) }
.faq summary{ font-family:var(--jp); font-weight:800; font-size:17px; cursor:pointer; list-style:none }
.faq summary::before{ content:'Q. '; font-family:'Inter',sans-serif; color:var(--accent) }
.faq details p{ margin:10px 0 0; color:var(--ink-sub) }

/* ── 相談の帯 ── */
.contact{ background:var(--accent); color:#fff; text-align:center; padding:88px 0 }
.contact h2{ font-family:var(--jp); font-weight:900; font-size:clamp(30px,5vw,60px); line-height:1.2; letter-spacing:-.05em; margin:0 0 14px }
.contact p{ color:rgba(255,255,255,.8); margin:0 0 32px }
.contact .cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
.contact .sub{ margin-top:24px; font-size:13px; color:rgba(255,255,255,.8) }
.contact .sub a{ color:#fff }

/* ── フッター ── */
.site-foot{ padding:32px 0 48px; font-size:12px; color:var(--ink-sub) }
.site-foot .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px }

/* 対応エリア ── 地域名の羅列にしない。「会って決められる」という価値と一緒に置く */
.site-foot .area{ display:block; border-top:1px solid rgba(0,0,0,.12); padding-top:26px; margin-bottom:26px }
.site-foot .area h2{
  font-family:'Inter',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-sub);
  margin:0 0 10px;
}
.site-foot .area h2::after{ content:' / AREA' }
.site-foot .area p{ margin:0; font-size:13px; line-height:2; color:var(--ink-sub); max-width:70ch }
.site-foot .area b{ color:var(--ink); font-weight:700 }

.site-foot a{ text-decoration:none }

/* ── サービスページの頭の右：浮かせる物 ── */
.hero-float{ position:relative; aspect-ratio:1/0.9; container-type:inline-size }
.hero-float > div{ position:absolute }
.hero-float .it-a{ left:0; top:8%; width:78% }
.hero-float .it-b{ right:2%; top:28%; width:24% }
.hero-float .it-c{ left:6%; top:4%; width:40% }
.hero-float .it-d{ left:44%; top:14%; width:44% }
.hero-float .it-e{ left:0; bottom:0; font-size:30cqw }
.hero-float .it-f{ left:0; top:6%; width:38%; font-size:5cqw }
.hero-float .it-g{ left:6%; top:44%; width:34%; font-size:5cqw }
.hero-float .it-h{ left:34%; top:68%; width:36%; font-size:5cqw }
.hero-float .it-i{ left:0; top:4%; width:76%; font-size:3.4cqw }
.hero-float .it-j{ left:20%; top:42%; width:76%; font-size:3.4cqw }
.hero-float .it-k{ right:0; bottom:0; font-size:26cqw }
/* 付箋の後ろに敷くイラスト（consul・meeting）。DOMで先に置く＝付箋が上に乗る */
.hero-float .it-p{ right:0; top:2%; width:62% }
.hero-float img{ width:100% }

/* ── 議題のカード（会議のメリハリ）── 実際に渡す「1枚」の形 */
.agenda{ background:#fff; color:var(--ink); border-radius:14px; padding:7% 7.5%; font-family:var(--jp); box-shadow:0 24px 40px rgba(0,0,0,.4) }
.agenda .a-meta{ display:flex; justify-content:space-between; font-family:'Inter',sans-serif; font-weight:600; font-size:.6em; letter-spacing:.12em; color:#8a8a8a; text-transform:uppercase }
.agenda .a-h{ font-weight:900; font-size:1.5em; letter-spacing:-.04em; line-height:1.2; margin:.35em 0 .7em }
.agenda dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.55em 1em; font-size:.82em; border-top:1px solid #e6e6e6; padding-top:.8em }
.agenda dt{ font-weight:800; color:var(--accent) }
.agenda dd{ margin:0; font-weight:700 }
.agenda .a-time{ display:flex; gap:3px; margin-top:1em; height:.5em }
.agenda .a-time i{ border-radius:2px; background:#d9d9d9 }
.agenda .a-time i:nth-child(2){ background:var(--accent) }
.agenda .a-legend{ display:flex; justify-content:space-between; font-size:.6em; color:#8a8a8a; margin-top:.4em; font-weight:700 }

/* ── やりとりの画面（速さ）── */
.chat{ background:#f2f2f4; color:var(--ink); border-radius:18px; padding:6%; font-family:var(--jp); display:grid; gap:.6em; box-shadow:0 24px 40px rgba(0,0,0,.4) }
.chat .c-head{ display:flex; justify-content:space-between; font-family:'Inter',sans-serif; font-weight:600; font-size:.6em; letter-spacing:.12em; color:#8a8a8a; text-transform:uppercase; padding:0 .2em .2em }
.chat .m{ max-width:82%; padding:.6em .8em; border-radius:14px; font-size:.78em; font-weight:500; line-height:1.55; background:#fff }
.chat .m.me{ justify-self:end; background:var(--accent); color:#fff }
.chat .t{ font-family:'Inter',sans-serif; font-size:.55em; color:#9a9a9a; margin-top:-.3em }
.chat .t.me{ justify-self:end }
.chat .file{ justify-self:end; display:flex; align-items:center; gap:.6em; background:#fff; border-radius:12px; padding:.55em .8em; font-family:'Inter',sans-serif; font-weight:700; font-size:.72em }
.chat .file::before{ content:'PDF'; font-size:.75em; color:#fff; background:#e5484d; border-radius:4px; padding:.2em .4em }

/* 黒いタイル */

/* タイル ── 5枚。写真は使わず、黒と青の地に大きな字だけ */
.tiles{ grid-template-columns:repeat(5,1fr) }
@media (max-width:1100px){ .tiles{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:720px){ .tiles{ grid-template-columns:1fr 1fr } }
/* 和字を大きく置くときは和文書体に。欧文の字詰めだと潰れる */
.tile b.jp{ font-family:var(--jp); letter-spacing:-.04em; font-size:clamp(62px,7.6vw,112px) }

.tile.ink{ background:#0b0b0b } .tile.ink::after{ display:none }
.tile.ink b{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:900; letter-spacing:-.07em; font-size:clamp(70px,9vw,130px); padding-bottom:12%; color:#fff }

/* 注（※） */
.note{ display:block; font-family:var(--jp); font-weight:500; font-size:max(11px,.36em); line-height:1.7; letter-spacing:0; color:var(--ink-sub); margin-top:.6em; white-space:normal; max-width:24em }

/* 🔴 iOSの自動ズームを止める ── viewportの maximum-scale では止まらない。
   　 iOSが寄るのは【文字を打つ欄の字が16px未満のとき】だけなので、16pxにする。
   　 つまみ・色・チェック・ファイルは寄らないので触らない（見た目を変えないため）。
   　 @media の中だけなので PC には1画素も効かない。 */
@media (max-width:760px), (pointer:coarse) and (max-width:1024px){
  input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]),
  select, textarea{ font-size:16px !important; }
}

/* ── ハンバーガー ── 線2本だけ。開くと×になる ── */
.burger{
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  display:block; position:relative; margin:0; padding:0; z-index:60; flex:0 0 44px;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--ink);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.burger span:nth-child(1){ top:18px } .burger span:nth-child(2){ top:25px }
body.menu-open .burger span{ background:#fff }
body.menu-open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
body.menu-open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }
/* 三本線は【どの画面でも】出す。広い画面だけ出口が無い、を作らない */
@media (max-width:860px){ .head-r .btn{ display:none } }

/* ── 開いた面 ── 黒ベタに特大の和字。番号はInterで小さく ── */
.menu{
  position:fixed; inset:0; z-index:50; background:#0b0b0b;
  opacity:0; pointer-events:none; transition:opacity .34s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
body.menu-open{ overflow:hidden }
body.menu-open .menu{ opacity:1; pointer-events:auto }
/* 🔴 メニューは画面全部を覆う（inset:0 / z-index:50）ので、ヘッダの三本線は押せない。
   閉じる手を【中に】置かないと、ブラウザの戻る以外で出られなくなる */
.menu-close{
  position:absolute; top:10px; right:clamp(10px,4vw,30px); z-index:3;
  width:54px; height:54px; display:grid; place-items:center;
  background:transparent; border:0; padding:0; cursor:pointer;
}
.menu-close::before,.menu-close::after{
  content:''; position:absolute; width:28px; height:2px; background:#fff; border-radius:1px;
  transition:transform .2s;
}
.menu-close::before{ transform:rotate(45deg) }
.menu-close::after{ transform:rotate(-45deg) }
.menu-close:hover::before{ transform:rotate(135deg) }
.menu-close:hover::after{ transform:rotate(45deg) }
.menu-in{ min-height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:92px clamp(20px,6vw,56px) 44px; max-width:860px; margin:0 auto }
.menu a{
  display:flex; align-items:baseline; gap:clamp(12px,2.4vw,22px);
  font-family:var(--jp); font-weight:900; color:#fff; text-decoration:none;
  font-size:clamp(28px,7.6vw,60px); line-height:1.18; letter-spacing:-.05em;
  padding:clamp(8px,1.4vw,14px) 0;
  opacity:0; transform:translateY(14px);
  transition:color .2s, transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s;
}
body.menu-open .menu a{ opacity:1; transform:none }
body.menu-open .menu a:nth-child(1){ transition-delay:.06s }
body.menu-open .menu a:nth-child(2){ transition-delay:.10s }
body.menu-open .menu a:nth-child(3){ transition-delay:.14s }
body.menu-open .menu a:nth-child(4){ transition-delay:.18s }
body.menu-open .menu a:nth-child(5){ transition-delay:.22s }
body.menu-open .menu a:nth-child(6){ transition-delay:.26s }
body.menu-open .menu a:nth-child(7){ transition-delay:.30s }
.menu a:hover{ color:var(--accent) }
.menu .n{
  font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(10px,1.5vw,13px);
  letter-spacing:.2em; color:rgba(255,255,255,.4); flex:none;
}
.menu-foot{
  margin-top:clamp(28px,5vw,52px); padding-top:clamp(20px,3vw,30px);
  border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  opacity:0; transition:opacity .5s .36s;
}
body.menu-open .menu-foot{ opacity:1 }
.menu-foot a{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em;
  padding:13px 22px; border-radius:999px; text-decoration:none; opacity:1; transform:none;
  display:inline-flex;
}
.menu-foot .m-line{ background:#06C755; color:#fff }
.menu-foot .m-mail{ background:var(--accent); color:#fff }
.menu-foot .m-line:hover,.menu-foot .m-mail:hover{ color:#fff; opacity:.84 }
.menu-foot p{ width:100%; margin:6px 0 0; color:rgba(255,255,255,.45); font-size:12px;
  font-family:'Inter',sans-serif; letter-spacing:.08em }

/* 金額に添える（税抜）。本体より小さく、折り返さない */
.tax{
  font-family:var(--jp); font-size:.6em; font-weight:500; letter-spacing:.02em;
  color:var(--ink-sub); margin-left:.3em; white-space:nowrap;
}
.price td .tax, .cmp td .tax{ font-size:12px; display:inline }
.price-flash b .tax{ font-size:.26em; margin-left:.4em; color:var(--ink-sub) }
.frame .tax, .flow .tax{ font-size:.72em }
section.dark .tax, .on-dark .tax{ color:var(--dark-sub) }

/* 3つ並べて比べる表。列が1つ増えるので見出し列を細くする */
.cmp.tri th{ width:19% }
.cmp.tri td{ width:27% }
@media (max-width:760px){
  .cmp.tri th,.cmp.tri td{ padding:12px 7px; font-size:12px }
  .cmp.tri tr:first-child td{ font-size:13px }
  .cmp.tri th{ width:22% }
  .cmp.tri td small{ font-size:10px }
}

/* 受付状況。安さを保ったまま「順番待ち」に切り替えるための1行。
   🔴 混んだら文言だけ替える。値段は動かさない */
.slots{
  display:inline-flex; align-items:center; gap:.7em; flex-wrap:wrap;
  margin:clamp(14px,1.8vw,20px) 0 0; padding:9px 15px;
  border:1px solid var(--line); border-radius:8px;
  font-family:var(--jp); font-weight:700; font-size:clamp(12px,1.25vw,14px);
  color:var(--ink); background:rgba(255,255,255,.6);
}
.slots b{
  font-weight:800; font-size:.86em; letter-spacing:.08em; color:#fff;
  background:var(--ink); padding:.3em .6em; border-radius:4px;
}
.slots em{ font-style:normal; font-weight:500; font-size:.86em; color:var(--ink-sub) }
section.dark .slots{ border-color:rgba(255,255,255,.3); background:transparent; color:#fff }
section.dark .slots b{ background:var(--accent) }
section.dark .slots em{ color:var(--dark-sub) }

/* 受付状況の数字と、絞っている理由 */
.slots strong{ font-family:'Inter',var(--jp); font-weight:900; font-size:1.3em; letter-spacing:-.02em; color:var(--accent); margin:0 .1em }
.slots-why{
  margin:10px 0 0; font-family:var(--jp); font-weight:500;
  font-size:clamp(11px,1.15vw,13px); line-height:1.8; color:var(--ink-sub); max-width:34em;
}
section.dark .slots-why{ color:var(--dark-sub) }

/* ═══ 2026-10-05 タイルに版画風のイラスト（黒・青・白の3色）═══
   元＝Midjourneyの写真 → 明るさのむらを消して3段に分け、輪郭を黒で足した（iCloud/道具/それナル/それナル_版画にする.py）
   大きな字は残すが、イラストの上で白抜きの輪郭にして主役をイラストに譲る */
.tile.pic{ background:var(--accent) }
.tile.pic::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 22%,transparent 45%,rgba(0,0,0,.85) 100%); display:block }
.tile.pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s }
.tile.pic:hover img{ transform:scale(1.06) }
.tile.pic b{ position:absolute; inset:auto 14px 64px auto; display:block; z-index:1; font-family:'Inter',sans-serif; font-weight:900; letter-spacing:-.07em; line-height:.9;
  font-size:clamp(34px,4vw,62px); color:transparent; -webkit-text-stroke:1.6px #fff; padding:0; opacity:.95 }
.tile.pic b.jp{ font-family:var(--jp); letter-spacing:-.04em; font-size:clamp(30px,3.6vw,56px) }
.tile.pic .tag{ color:#fff }
.tile.pic .arrow{ background:#fff; color:var(--accent) }

/* ── サービスページの頭の右：イラスト1枚だけのとき（2026-10-05 logo） ── */
.svc-hero .hero-ill{ display:flex; justify-content:center; align-items:center }
.svc-hero .hero-ill img{ width:100%; max-width:430px; height:auto; display:block }
/* 2枚重ね（about）：1枚目を大きく右上、2枚目を小さく左下に半分かぶせる */
.svc-hero .hero-ill.pair{ position:relative; display:block; min-height:clamp(320px,34vw,460px) }
.svc-hero .hero-ill.pair img{ position:absolute; max-width:none }
.svc-hero .hero-ill.pair img:first-child{ right:0; top:0; width:72% }
.svc-hero .hero-ill.pair img:last-child{ left:0; bottom:0; width:50%; z-index:1 }
@media (max-width:860px){
  /* 🔴 スマホでは1列になる。絵が見出しの上に来ると「何の話か」が遅れるので下に置いたまま、幅だけ締める */
  .svc-hero .hero-ill img{ max-width:300px }
}

/* ── 全ページ共通：画面に入ったら順に出す（js/motion.js が .rv / .in を付ける） ──
   ⭐ transform でなく translate を使う＝元から回している物（付箋・カード）の傾きを壊さない
   ⭐ 終わったら元の不透明度に戻る（animation の to を書かない） */
.rv:not(.in){ opacity:0 }
.rv.in{ animation:rv-in .6s cubic-bezier(.2,.75,.25,1) both; animation-delay:var(--rv-d,0ms) }
@keyframes rv-in{ from{ opacity:0; translate:0 24px } }
@media (prefers-reduced-motion:reduce){ .rv:not(.in){ opacity:1 } .rv.in{ animation:none } }

/* 注記（※）。約束に条件があるところに添える小さい一行 */
.fine{ font-size:12.5px; line-height:1.8; color:var(--ink-sub); margin:10px 0 0; max-width:46em }
.svc-hero .fine{ margin:-14px 0 24px }
.worries .a small{ display:block; font-size:12px; font-weight:500; color:var(--ink-sub); margin-top:4px; line-height:1.6 }