/* Hallmark · v2.0.0 · redesign: full · theme: studio · deal: manual (Node なし) · genre: editorial · shape: Ledge hero + 案件インデックス · signature: 月額「0円」を校正紙に大きく刷った価格シート · built: 手書き HTML/CSS · sweep: sloplint 未実行（Node 未導入） */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R4 V4 · weakest: E, 自動チェックが回せないため Floor は目視で確認。日本語の見出しは Hedvig に字形がないので Zen Old Mincho で受け、数字だけ Hedvig */
/* Hallmark · waive 8 · 内容の順番はユーザーが作ってきた構成をそのまま残し、組み方だけ変えた · 本人が言いたいことの順番なので */

/* ============ トークン（色と文字はすべてここ） ============ */
:root{
  --color-paper: oklch(97.2% 0.006 215);
  --color-paper-2: oklch(94% 0.009 215);
  --color-paper-3: oklch(90.5% 0.011 215);
  --color-paper-hi: oklch(99% 0.004 215);
  --color-ink: oklch(16% 0.032 250);
  --color-ink-2: oklch(34% 0.022 245);
  --color-muted: oklch(49% 0.018 240);
  --color-rule: oklch(84% 0.010 225);
  --color-accent: oklch(68% 0.172 50);
  --color-accent-ink: oklch(16% 0.032 250);
  --color-focus: oklch(52% 0.15 48);
  --color-on-ink: oklch(94% 0.009 215);
  --color-on-ink-2: oklch(80% 0.012 225);
  --color-dot: color-mix(in oklab, var(--color-ink) 20%, transparent);
  --color-mark: color-mix(in oklab, var(--color-ink) 72%, transparent);
  --color-mark-on-ink: color-mix(in oklab, var(--color-on-ink) 60%, transparent);
  --color-shadow: color-mix(in oklab, var(--color-ink) 32%, transparent);
  --color-shadow-2: color-mix(in oklab, var(--color-ink) 7%, transparent);

  --font-display: "Hedvig Letters Serif", "Zen Old Mincho", ui-serif, serif;
  --font-display-ja: "Zen Old Mincho", "Hedvig Letters Serif", ui-serif, serif;
  --font-body: "Geist", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;

  --radius-card: 3px;
  --rule-hair: 1px;
  --shadow-sheet: 1px 2px 0 var(--color-shadow-2), 10px 18px 36px -14px var(--color-shadow);
  --tracking-display: -0.01em;
  --dur-short: .18s;
  --ease-out: cubic-bezier(.2,.7,.2,1);

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --gap: clamp(16px, 2.2vw, 32px);
  --sec-y: clamp(96px, 12vw, 168px);
}

/* ============ 土台 ============ */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink-2);font-family:var(--font-body);font-size:16px;line-height:1.85;word-break:auto-phrase;line-break:strict;font-feature-settings:"palt"}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--font-display-ja);font-weight:500;letter-spacing:var(--tracking-display);color:var(--color-ink);line-height:1.3;overflow-wrap:break-word;min-width:0}
p{margin:0 0 1em}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-optical-sizing:auto}
.note{font-size:13px;color:var(--color-muted);line-height:1.75}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;transition:none}

/* 校正紙の点の地（上と下だけ） */
.proof{background-color:var(--color-paper);background-image:radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px);background-size:24px 24px}

/* トンボ（印刷物の四隅の線） */
.crop{position:relative;--l:8px;--o:12px;margin:0}
.crop::before{content:"";position:absolute;inset:calc(-1 * var(--o));pointer-events:none;
  background:
   linear-gradient(var(--color-mark),var(--color-mark)) 0 var(--o)/var(--l) 1px no-repeat,
   linear-gradient(var(--color-mark),var(--color-mark)) var(--o) 0/1px var(--l) no-repeat,
   linear-gradient(var(--color-mark),var(--color-mark)) 100% var(--o)/var(--l) 1px no-repeat,
   linear-gradient(var(--color-mark),var(--color-mark)) calc(100% - var(--o)) 0/1px var(--l) no-repeat,
   linear-gradient(var(--color-mark),var(--color-mark)) 0 calc(100% - var(--o))/var(--l) 1px no-repeat,
   linear-gradient(var(--color-mark),var(--color-mark)) var(--o) 100%/1px var(--l) no-repeat,
   linear-gradient(var(--color-mark),var(--color-mark)) 100% calc(100% - var(--o))/var(--l) 1px no-repeat,
   linear-gradient(var(--color-mark),var(--color-mark)) calc(100% - var(--o)) 100%/1px var(--l) no-repeat}
.crop img{width:100%;object-fit:cover}
.crop figcaption{font-size:13px;font-weight:500;color:var(--color-muted);margin-top:10px}
.sheet{background:var(--color-paper-hi);box-shadow:var(--shadow-sheet);border-radius:var(--radius-card)}

/* 罫線のセット：墨の線で始まり、細い線で区切る */
.set{list-style:none;padding:0;margin:0;border-top:var(--rule-hair) solid var(--color-ink)}
.set > *{border-bottom:var(--rule-hair) solid var(--color-rule)}

/* ボタン（主ボタンはオレンジ1種類だけ） */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:var(--rule-hair) solid var(--color-ink);border-radius:2px;background:var(--color-paper-hi);color:var(--color-ink);font-family:var(--font-body);font-weight:500;font-size:15px;text-decoration:none;transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.btn::after{content:"";position:absolute;inset:2px;border:var(--rule-hair) solid var(--color-mark);border-radius:1px;pointer-events:none}
.btn:hover{background:var(--color-paper-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-accent);color:var(--color-accent-ink)}
.btn-primary:hover{background:color-mix(in oklab, var(--color-accent) 88%, var(--color-ink))}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
.btn-lg{min-height:58px;padding:0 34px;font-size:17px}

/* ============ ナビ ============ */
.nav{position:sticky;top:0;z-index:40;border-bottom:var(--rule-hair) solid var(--color-rule)}
.nav-in{display:flex;align-items:center;gap:28px;height:68px}
.wordmark{font-family:var(--font-display-ja);font-weight:700;font-size:22px;text-decoration:none;color:var(--color-ink);margin-right:auto}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--color-ink-2)}
.nav-links a:hover{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:5px}

/* ============ 1. いちばん上 ============ */
.hero{padding-block:clamp(56px,8vw,104px) clamp(72px,9vw,120px);border-bottom:var(--rule-hair) solid var(--color-rule)}
.hero-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
.hero-copy{grid-column:1/8;padding-bottom:12px}
.hero h1{font-size:clamp(34px,4.8vw,68px);line-height:1.22}
.h1-push{display:inline-block;margin-left:2.2em;color:var(--color-ink);border-bottom:2px solid var(--color-accent);padding-bottom:2px}
.hero-lead{font-size:17px;color:var(--color-ink-2);margin:28px 0 30px;max-width:30em}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-sheet{grid-column:8/13;padding:30px 32px 26px;--o:16px;--l:10px;margin-bottom:-28px;transform:translateX(min(3vw,36px))}
.sheet-label{font-size:13px;font-weight:500;color:var(--color-muted);margin:0}
.zero{margin:0;display:flex;align-items:flex-end;line-height:.9;color:var(--color-ink)}
.zero-num{font-family:var(--font-display);font-size:clamp(150px,16vw,232px);letter-spacing:-.04em;line-height:.82}
.zero-yen{font-family:var(--font-display-ja);font-size:38px;margin:0 0 14px 6px}
.guide{display:block;height:var(--rule-hair);background:var(--color-accent);margin:10px -32px 18px}
.sheet-rows{margin:0;border-top:var(--rule-hair) solid var(--color-ink)}
.sheet-rows div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:var(--rule-hair) solid var(--color-rule);font-size:14px}
.sheet-rows dt{color:var(--color-muted)}
.sheet-rows dd{margin:0;font-weight:500;color:var(--color-ink)}

/* ============ 共通 ============ */
.sec{padding-block:var(--sec-y)}
.sec h2{font-size:clamp(28px,3.4vw,48px)}
.band-paper2{background:var(--color-paper-2)}
.band-ink{background:var(--color-ink);color:var(--color-on-ink-2)}
.band-ink h2,.band-ink h3{color:var(--color-on-ink)}

/* ============ 2. お悩み（左右と上下をわざとずらす） ============ */
.worry-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.worry-h{grid-column:1/6;grid-row:1}
.worry-list{grid-column:7/13;grid-row:1;margin-top:96px;counter-reset:w}
.worry-list li{counter-increment:w;position:relative;padding:20px 0 20px 56px;font-size:15.5px}
.worry-list li::before{content:"0" counter(w);position:absolute;left:0;top:17px;font-family:var(--font-display);font-size:24px;color:var(--color-ink)}
.worry-list b{display:block;font-weight:500;color:var(--color-ink);font-size:16.5px}
.w-cat{grid-column:1/6;grid-row:2;margin-top:110px}
.w-cat img{aspect-ratio:16/10}
.w-man{grid-column:7/11;grid-row:2;margin-top:200px}
.w-man img{aspect-ratio:4/5;object-position:45% center}
.w-pc{grid-column:11/13;grid-row:2;margin-top:60px}
.w-pc img{aspect-ratio:3/5}
.worry-ans{grid-column:4/13;grid-row:3;margin:96px 0 0;text-align:right;font-family:var(--font-display-ja);font-size:clamp(24px,2.8vw,38px);color:var(--color-ink);line-height:1.5}
.worry-ans small{display:block;font-family:var(--font-body);font-size:14px;color:var(--color-muted);margin-top:6px}

/* ============ 3. ぶっちゃけ（墨の帯） ============ */
.honest-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.honest-h{grid-column:1/6;align-self:start;position:sticky;top:110px}
.honest-list{grid-column:6/13;display:grid;gap:0;border-top:var(--rule-hair) solid var(--color-on-ink)}
.h-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 20px;padding:30px 0;border-bottom:var(--rule-hair) solid color-mix(in oklab, var(--color-on-ink) 22%, transparent)}
.h-item:nth-child(even){padding-left:clamp(0px,5vw,72px)}
.h-no{grid-row:1/3;font-family:var(--font-display);font-size:64px;line-height:.9;color:var(--color-on-ink)}
.h-item h3{font-size:21px}
.h-item p{margin:0;font-size:15px}

/* ============ 4. 実績 ============ */
.works-h{max-width:14em}
.works-lead{color:var(--color-muted);margin-top:20px}
.wk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:120px;align-items:start}
.wk-shots{position:relative}
.wk-pc img{aspect-ratio:16/10;object-position:top;box-shadow:var(--shadow-sheet)}
.wk-sp{position:absolute;width:23%;--o:8px;--l:6px}
.wk-sp img{aspect-ratio:9/18;object-position:top;border-radius:14px;box-shadow:var(--shadow-sheet)}
.wk-tag{font-size:13px;font-weight:500;color:var(--color-muted);margin:0 0 8px}
.wk-text h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:18px}
.wk-text > p{font-size:15px}
.wk-text .set{margin:22px 0 34px}
.wk-text .set li{padding:10px 0;font-size:14.5px}
.wk-sub{max-width:300px;--o:10px;--l:7px}
.wk-sub img{aspect-ratio:16/10;object-position:top;box-shadow:var(--shadow-sheet)}
.wk-1 .wk-shots{grid-column:1/9}
.wk-1 .wk-sp{right:-5%;bottom:-14%}
.wk-1 .wk-text{grid-column:9/13;margin-top:110px}
.wk-2{margin-top:200px}
.wk-2 .wk-text{grid-column:1/5}
.wk-2 .wk-shots{grid-column:6/13;margin-top:70px}
.wk-2 .wk-sp{left:-9%;top:-12%}
.works-more{margin:140px 0 0 auto;max-width:36em;text-align:right;font-size:14px;color:var(--color-muted)}
.works-more a{color:var(--color-ink);font-weight:500;margin-left:20px;text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:5px}
.works-more a:hover{text-decoration-color:var(--color-accent)}

/* ============ 5. 料金とくらべる ============ */
.plans{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:80px;align-items:start}
.plan{border-top:var(--rule-hair) solid var(--color-ink);padding-top:22px;font-size:14.5px}
.p-a{grid-column:1/4;margin-top:110px}
.p-b{grid-column:4/9;padding:36px 36px 34px;border-top:0;--o:14px;--l:10px}
.p-c{grid-column:10/13;margin-top:40px}
.plan-name{font-family:var(--font-display-ja);font-size:20px;color:var(--color-ink);margin-bottom:4px}
.plan-note{display:block;font-family:var(--font-body);font-size:12.5px;color:var(--color-muted);margin-top:2px}
.plan-price{color:var(--color-ink);margin-bottom:14px}
.plan-price .num{font-size:44px;letter-spacing:-.02em;margin-right:2px}
.p-b .plan-price .num{font-size:64px}
.plan-price small{font-size:12px;color:var(--color-muted);margin-left:6px}
.p-b .set{margin:8px 0 26px}
.p-b .set li{padding:9px 0}
.p-b .btn{width:100%}
.cmp-block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:150px;align-items:start}
.cmp-left{grid-column:1/5}
.cmp-h{font-size:clamp(24px,2.6vw,36px);line-height:1.4}
.cmp-big{display:block;font-size:2.1em;letter-spacing:-.03em;line-height:1.05;margin:6px 0 2px}
.bbq{margin-top:46px;max-width:300px;margin-left:clamp(0px,4vw,56px)}
.bbq img{aspect-ratio:4/3}
.cmp-right{grid-column:6/13;margin-top:46px}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--color-paper-hi)}
.cmp th,.cmp td{padding:14px 14px;text-align:left;border-bottom:var(--rule-hair) solid var(--color-rule);vertical-align:middle}
.cmp thead th{font-weight:500;color:var(--color-ink);border-bottom:var(--rule-hair) solid var(--color-ink);font-size:14px}
.cmp thead small{display:block;font-size:12px;font-weight:400;color:var(--color-muted)}
.cmp tbody th{font-weight:500;color:var(--color-ink-2);width:26%}
.cmp td{color:var(--color-muted)}
.cmp .me{color:var(--color-ink);font-weight:500;box-shadow:inset 3px 0 0 var(--color-accent)}
.cmp .sum th,.cmp .sum td{border-top:var(--rule-hair) solid var(--color-ink);font-size:16px}
.cmp-right .note{margin-top:14px}

/* ============ 6. 流れ ============ */
.flow-list{list-style:none;padding:0;margin:80px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.flow-list li{border-top:var(--rule-hair) solid var(--color-ink);padding-top:16px}
.flow-list li:nth-child(2){margin-top:56px}
.flow-list li:nth-child(3){margin-top:18px}
.flow-list li:nth-child(4){margin-top:84px}
.flow-list li:nth-child(5){margin-top:36px}
.flow-list .num{font-size:40px;color:var(--color-ink);line-height:1}
.flow-list h3{font-size:18px;margin:10px 0 6px}
.flow-list p{font-size:14px;margin:0}
.flow-for{margin:110px 0 0 auto;max-width:44em;font-size:15px;border-top:var(--rule-hair) solid var(--color-ink);padding-top:18px}

/* ============ 7. 作る人 ============ */
.about-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.about-photo{grid-column:1/6;grid-row:1}
.about-photo img{aspect-ratio:4/5;object-position:center 60%}
.about-text{grid-column:7/12;grid-row:1;align-self:center;padding-top:40px}
.about-text h2{margin-bottom:28px}
.about-text p{font-size:15.5px}
.snaps{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:120px;align-items:start}
.snaps-note{grid-column:1/4;font-size:14px;margin-top:40px;border-top:var(--rule-hair) solid var(--color-ink);padding-top:14px}
.snap{--o:10px;--l:7px}
.snap img{box-shadow:var(--shadow-sheet)}
.s1{grid-column:4/9}
.s1 img{aspect-ratio:4/3}
.s2{grid-column:9/11;margin-top:110px}
.s3{grid-column:11/13;margin-top:20px}
.s3 img{aspect-ratio:3/4}
.zoom{overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sheet)}
.zoom img{height:100%;box-shadow:none;transform:scale(3);transform-origin:50% 52%}

/* ============ 8. 確認と質問 ============ */
.faq-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.faq-side{grid-column:1/6}
.faq-side h2{font-size:clamp(24px,2.6vw,36px);margin-bottom:30px}
.terms li{padding:12px 0;font-size:13.5px;line-height:1.8}
.terms b{display:block;font-weight:500;color:var(--color-ink)}
.faq-side .note{margin-top:14px}
.faq{grid-column:7/13;margin-top:84px}
.faq details{border-bottom:var(--rule-hair) solid var(--color-rule)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:500;color:var(--color-ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:13px;height:13px;margin-top:-6px;background:linear-gradient(var(--color-ink),var(--color-ink)) center/13px 1px no-repeat,linear-gradient(var(--color-ink),var(--color-ink)) center/1px 13px no-repeat;transition:transform var(--dur-short) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:-2px}
.faq details p{margin:0 0 22px;font-size:14.5px;padding-left:16px;box-shadow:inset 1px 0 0 var(--color-accent)}

/* ============ 9. 相談 ============ */
.cta-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.cta-big{grid-column:1/8;font-size:clamp(48px,7.4vw,112px) !important;line-height:1.08}
.cta-body{grid-column:6/11;grid-row:2;margin-top:48px;font-size:15.5px}
.cta-body .btn{margin:6px 0 16px}
.cta-dog{grid-column:10/13;grid-row:1;max-width:260px;justify-self:end;margin-top:20px;--o:10px;--l:7px}
.cta-dog img{aspect-ratio:1/1;box-shadow:var(--shadow-sheet)}

/* ============ フッター ============ */
.footer{padding-block:56px 40px;border-top:var(--rule-hair) solid var(--color-ink)}
.footer-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
.footer-mark{grid-column:1/7;margin:0;font-family:var(--font-display-ja);font-weight:700;font-size:clamp(56px,9vw,128px);line-height:1;color:var(--color-ink)}
.footer-links{grid-column:8/13;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;justify-content:flex-end}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:5px}
.footer-note{grid-column:1/-1;margin:28px 0 0;padding-top:16px;border-top:var(--rule-hair) solid var(--color-rule);font-size:12.5px;color:var(--color-muted)}

.sp-fixed{display:none}

/* ============ 動き（スクリプトが無くても全部見える） ============ */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.faq summary::after{transition:none}
}

/* ============ タブレット・スマホ ============ */
@media (max-width:960px){
  .nav-links{display:none}
  .hero-in,.worry-in,.honest-in,.wk,.plans,.cmp-block,.about-in,.snaps,.faq-in,.cta-in,.footer-in{grid-template-columns:minmax(0,1fr)}
  .hero-in > *,.worry-in > *,.honest-in > *,.wk > *,.plans > *,.cmp-block > *,.about-in > *,.snaps > *,.faq-in > *,.cta-in > *,.footer-in > *{grid-column:1 !important;grid-row:auto !important}
  .hero-sheet{transform:none;margin:30px 0 0 12%}
  .h1-push{margin-left:1.2em}
  .worry-list{margin-top:36px}
  .w-cat{margin-top:56px}
  .w-man{width:68%;margin:36px 0 0 auto}
  .w-pc{width:50%;margin-top:-50px}
  .worry-ans{margin-top:64px}
  .honest-h{position:static}
  .h-item:nth-child(even){padding-left:0}
  .h-item{grid-template-columns:52px minmax(0,1fr)}
  .h-no{font-size:48px}
  .wk{margin-top:72px}
  .wk-2{margin-top:110px}
  .wk-2 .wk-shots{order:-1;margin-top:0}
  .wk-shots{margin:0 6% 76px 0}
  .wk-1 .wk-text,.wk-2 .wk-text{margin-top:0}
  .wk-2 .wk-sp{left:auto;right:-5%;top:auto;bottom:-14%}
  .p-a,.p-c{margin-top:44px}
  .p-b{margin-top:44px}
  .cmp-block{margin-top:96px}
  .cmp-right{margin-top:20px}
  .flow-list{grid-template-columns:minmax(0,1fr);gap:0}
  .flow-list li{margin-top:0 !important;display:grid;grid-template-columns:64px minmax(0,1fr);padding:16px 0}
  .flow-list li .num{grid-row:1/3;font-size:32px}
  .flow-list h3{margin-top:0}
  .flow-for{margin-top:60px}
  .about-photo{width:86%}
  .about-text{padding-top:20px}
  .snaps{margin-top:70px}
  .snaps-note{margin-top:0}
  .s2{width:62%;margin:10px 0 0 auto}
  .s3{width:52%;margin-top:-80px}
  .faq{margin-top:20px}
  .cta-body{margin-top:24px}
  .cta-dog{justify-self:end;width:58%;margin-top:40px}
  .footer-links{justify-content:flex-start}
}
@media (max-width:600px){
  body{font-size:15px;padding-bottom:60px}
  .nav-in{height:58px}
  .hero h1{font-size:33px}
  .hero-sheet{margin-left:0;padding:24px 22px 20px}
  .guide{margin-inline:-22px}
  .zero-num{font-size:132px}
  .actions .btn{flex:1 1 100%}
  .cmp{font-size:12.5px}
  .cmp th,.cmp td{padding:10px 6px}
  .cmp .sum th,.cmp .sum td{font-size:13.5px}
  .p-b{padding:28px 22px}
  .p-b .plan-price .num{font-size:52px}
  .btn-lg{width:100%}
  .sp-fixed{display:flex;align-items:center;justify-content:center;position:fixed;left:0;right:0;bottom:0;z-index:50;min-height:56px;background:var(--color-accent);color:var(--color-accent-ink);font-weight:500;text-decoration:none;border-top:var(--rule-hair) solid var(--color-ink)}
  .sp-fixed:focus-visible{outline-offset:-4px}
}

/* ---- 見出しの行を、言葉の途中で折らない ---- */
.ln{display:block;white-space:nowrap}
.hero h1{font-size:clamp(30px,4.2vw,58px)}
.h1-push{display:inline-block;width:max-content}
.cta-big{grid-column:1/10 !important}
.cmp-line{display:block;margin:6px 0 2px}
.cmp-line .cmp-big{display:inline;margin:0 4px 0 0}
@media (max-width:600px){.hero h1{font-size:clamp(26px,7.6vw,33px)}.cta-big{font-size:clamp(40px,12vw,56px) !important}.worry-h{font-size:28px}}
@media (max-width:960px){.w-pc{margin-top:24px !important}}

/* ---- バランス調整：重なりは画像どうしだけ、文字には絶対にかぶせない ---- */
.wk-1 .wk-shots{grid-column:1/8}
.wk-1 .wk-sp{right:3%;bottom:-12%}
.wk-1 .wk-text{grid-column:9/13;margin-top:40px}
.wk-2 .wk-text{grid-column:1/5;margin-top:20px}
.wk-2 .wk-shots{grid-column:6/13;margin-top:40px}
.wk-2 .wk-sp{left:3%;top:auto;bottom:-12%}
.wk-text,.wk-shots{position:relative;z-index:1}
.wk-text{z-index:2}
/* ずらし幅を控えめに */
.w-cat{margin-top:64px}
.w-man{margin-top:120px}
.w-pc{margin-top:28px}
.worry-ans{margin-top:72px}
.p-a{margin-top:64px}
.p-c{margin-top:24px}
.wk{margin-top:96px}
.wk-2{margin-top:150px}
.works-more{margin-top:110px}
@media (max-width:960px){.wk-1 .wk-text,.wk-2 .wk-text{margin-top:0}.wk-2 .wk-sp{left:auto;right:3%}}
/* トンボを写真のすぐ外に（枠を伸ばさない） */
.w-cat,.w-man,.w-pc,.about-photo,.snap,.cta-dog,.bbq,.wk-sub{align-self:start}
.s2 img{aspect-ratio:3/4}
/* 写真が2枚になったので並びを詰める */
.s1{grid-column:4/10}
.s2{grid-column:10/13;margin-top:90px}
@media (max-width:960px){.s1,.s2{grid-column:1 !important}}

/* =========================================================
   スマホの文字組みの調整（読みやすさ優先）
   ========================================================= */
.worry-h{font-size:clamp(26px,2.9vw,42px)}
@media (max-width:960px){
  .cta-big{grid-column:1 !important}
  .cta-body,.cta-dog{grid-column:1 !important}
}
@media (max-width:600px){
  :root{--sec-y:76px;--gap:16px}
  body{line-height:1.8}
  .sec h2{font-size:26px;line-height:1.4}
  p,li,dd{font-size:15px}
  .note{font-size:12.5px}
  /* いちばん上 */
  .hero{padding-block:40px 56px}
  .hero-lead{font-size:15.5px;margin:20px 0 24px}
  .hero-sheet{margin-top:44px}
  /* お悩み */
  .worry-h{font-size:24px}
  .worry-list{margin-top:28px}
  .worry-list li{padding:16px 0 16px 46px}
  .worry-list li::before{font-size:20px;top:14px}
  .worry-list b{font-size:15.5px}
  .w-cat{margin-top:40px}
  .w-man{margin-top:28px;width:72%}
  .w-pc{margin-top:20px !important;width:56%}
  .worry-ans{margin-top:44px;font-size:22px;text-align:left}
  /* ぶっちゃけ */
  .h-item{grid-template-columns:36px minmax(0,1fr);padding:24px 0;gap:4px 12px}
  .h-no{font-size:34px}
  .h-item h3{font-size:17px;line-height:1.55;margin-bottom:6px}
  .h-item p{font-size:14.5px}
  /* 実績 */
  .works-lead{font-size:14.5px}
  .wk{margin-top:48px}
  .wk-2{margin-top:72px}
  .wk-shots{margin:0 4% 56px 0}
  .wk-text h3{font-size:22px}
  .wk-sub{max-width:240px}
  .works-more{margin-top:56px;text-align:left}
  .works-more a{display:inline-block;margin:10px 18px 0 0}
  /* 料金 */
  .plans{margin-top:36px}
  .p-a,.p-b,.p-c{margin-top:32px}
  .plan-price .num{font-size:38px}
  .p-b .plan-price .num{font-size:46px}
  .cmp-block{margin-top:64px}
  .cmp-h{font-size:22px}
  .bbq{margin:28px 0 0;max-width:none}
  /* 流れ */
  .flow-list{margin-top:32px}
  .flow-list li{grid-template-columns:52px minmax(0,1fr);padding:14px 0}
  .flow-list li .num{font-size:28px}
  .flow-list h3{font-size:16.5px}
  .flow-for{margin-top:40px;font-size:14.5px}
  /* 作る人 */
  .about-photo{width:100%}
  .about-text h2{margin-bottom:18px}
  .snaps{margin-top:48px;gap:24px}
  .s1{width:100%}
  .s2{width:64%;margin:0 0 0 auto !important}
  /* 確認と質問 */
  .faq-side h2{font-size:24px;margin-bottom:20px}
  .faq summary{font-size:15px;padding:16px 36px 16px 0}
  /* 相談 */
  .cta{padding-block:72px 84px}
  .cta-big{font-size:40px !important;line-height:1.2}
  .cta-body{margin-top:24px}
  .cta-dog{width:64%;max-width:none;margin:36px 0 0 auto}
  /* フッター */
  .footer-mark{font-size:56px}
  .footer-links{gap:8px 18px}
}

/* =========================================================
   改行のルール（iPhone の Safari でも言葉の途中で折れないように）
   文節の区切りに <wbr> を入れてあり、そこでだけ改行する
   ========================================================= */
body{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media (max-width:600px){.ln{white-space:normal}}