/* ============================================================
   山内 拓哉 公式サイト
   仕様は同階層の DESIGN.md（Refero Styles の Slash を翻案）
   守っていること:
   - 見出しはセリフ（28px以上専用）／UIはInter。この対比がブランド
   - 本文は 16px・400・行間1.5・Bone(#e2e3e9)。白は使わない
   - 白い塗りボタンは1画面に1つだけ（希少資源）
   - Copper(#cc9166) はカテゴリラベルと編集的リンクのみ
   - ドロップシャドウ禁止。段差は面の色差と1pxのhairlineで作る
   - 角丸: ボタン/入力/タグ 9999px ／ カード 10px ／ ナビ下線 2px
   ============================================================ */

:root{
  --obsidian:#08080a;  /* ページの地 */
  --onyx:    #040406;  /* カードの面。地より深い */
  --carbon:  #121317;  /* 持ち上げた面 */
  --graphite:#1c1d22;  /* hairline */
  --slate:   #2e3038;  /* 二次の枠線 */
  --smoke:   #464853;
  /* --ash は補足文・料金の但し書き・フッターなど「小さい文字」専用。
     旧値 #5e616e はコントラスト 3.02〜3.33:1 でWCAG AA（4.5:1）を下回っていた。
     用途が11箇所すべて文字色（枠線に使っていない）なので変数ごと引き上げた。
     現在 obsidian 5.75 / onyx 5.88 / carbon 5.33（2026-08-15 実測） */
  --ash:     #868996;
  --steel:   #777a88;
  --fog:     #9194a1;
  --mist:    #acafb9;
  --silver:  #c7c9d1;
  --bone:    #e2e3e9;  /* 本文の既定 */
  --white:   #ffffff;
  --copper:  #cc9166;  /* カテゴリラベルと編集的リンクだけ */

  --r-pill: 9999px;
  --r-card: 10px;

  --page-w: 1216px;
  --text-w: 900px;
  --gap-sec: 160px;

  /* 数字は必ずライニング＋等幅にする（Playfairの既定は旧字体で桁が揃わない） */
  --nums: lining-nums tabular-nums;

  --serif: "Playfair Display", "Shippori Mincho B1", "Hiragino Mincho ProN",
           "Yu Mincho", "YuMincho", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
           "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
           "Noto Sans JP", sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;background:var(--obsidian);}
body{
  margin:0;font-family:var(--sans);background:var(--obsidian);color:var(--bone);
  font-size:16px;line-height:1.5;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  line-break:strict;word-break:normal;overflow-wrap:normal;
}
img,video{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;}
/* figure のUA既定マージン（16px 40px）。リセットが無く、グリッドの各セル394pxに対して
   作例タイルが315pxまで縮んでいた（2026-08-17 実測。それ以前の版でも同じ状態） */
figure{margin:0;}

/* 日本語の折り返し */
h1,h2,h3,h4,.display,.h-lg,.h-md,.tagline,.statement{text-wrap:balance;}
p,li,dd,td,th{text-wrap:pretty;}
.nobr{white-space:nowrap;}
/* 文節。見出し・タグライン・ラベルの中でこれに包んだ単位でしか折り返さない。
   スマホで「実際にご依頼いた／だいた」のような語中折れを防ぐ（2026-08-19）。
   1文節が長すぎるとはみ出すので、375px幅に収まる長さで区切ること */
.w{display:inline-block;}

.wrap{width:min(100% - 44px, var(--page-w));margin-inline:auto;}
.text{width:min(100% - 44px, var(--text-w));margin-inline:auto;}

section{padding:calc(var(--gap-sec) / 2) 0;}
section.tight{padding:96px 0;}
.canvas,.white,.wash{background:var(--obsidian);}   /* 明るい面は作らない */
.deep{background:var(--onyx);}

/* ---------- 文字の型 ---------- */

/* 見出し＝セリフ。28px以上でしか使わない。字間は正（台帳の手触り） */
.display{
  font-family:var(--serif);font-weight:400;font-variant-numeric:var(--nums);
  font-size:clamp(2.6rem,1.6rem + 4vw,5rem);line-height:1.08;letter-spacing:.008em;
  color:var(--white);
}
.h-lg{
  font-family:var(--serif);font-weight:400;font-variant-numeric:var(--nums);
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1.2;letter-spacing:.008em;
  color:var(--white);
}
.h-md{
  font-family:var(--serif);font-weight:400;font-variant-numeric:var(--nums);
  font-size:clamp(1.65rem,1.3rem + 1.4vw,2rem);line-height:1.25;letter-spacing:.008em;
  color:var(--white);
}
/* 28px未満はサンスに戻す（セリフを小さく使わない） */
.h-sm{font-family:var(--sans);font-size:1.125rem;font-weight:500;line-height:1.4;letter-spacing:-.012em;color:var(--white);}

.tagline{font-size:1.125rem;line-height:1.6;font-weight:300;color:var(--mist);letter-spacing:-.01em;}
.lead{font-size:1rem;line-height:1.6;font-weight:400;color:var(--fog);margin:20px 0 0;}
.note{font-size:.8125rem;line-height:1.6;color:var(--ash);}

/* カテゴリラベル＝13px/600/Copper。銅色を使ってよい唯一の場所 */
.eyebrow{
  display:block;font-family:var(--sans);font-size:.8125rem;font-weight:600;
  letter-spacing:-.01em;color:var(--copper);margin:0 0 16px;
}
.eyebrow.muted{color:var(--fog);}
.center{text-align:center;}
strong{font-weight:500;color:var(--white);}

.sec-head{margin-bottom:56px;}
.sec-head.center .lead{margin-inline:auto;max-width:64ch;}

/* ---------- ボタン（すべて丸。影なし） ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:.875rem;font-weight:500;line-height:1.2;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
  white-space:nowrap;
}
/* 白塗り＝1画面に1つだけの希少資源 */
.btn-fill{background:var(--white);color:#000;}
.btn-fill:hover{opacity:.86;}
.btn-line{border-color:var(--white);color:var(--white);background:transparent;}
.btn-line:hover{background:rgba(255,255,255,.08);}
/* 二次的なピル。枠線は冷たいグレーで、白より一段下がって見える */
.btn-quiet{border-color:var(--steel);color:var(--bone);background:transparent;font-size:.8125rem;padding:8px 16px;}
.btn-quiet:hover{border-color:var(--bone);color:var(--white);}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.actions.center{justify-content:center;}

a.link{color:var(--copper);text-decoration:none;}
a.link:hover{text-decoration:underline;}

/* ---------- ナビ ---------- */

.site-header{
  position:sticky;top:0;z-index:60;background:rgba(8,8,10,.86);
  backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--graphite);
}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:60px;}
.brand{
  color:var(--white);text-decoration:none;font-family:var(--serif);
  font-size:1.125rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;
}
.nav{display:flex;gap:22px;margin-left:auto;}
.nav a{
  color:var(--fog);text-decoration:none;font-size:.875rem;font-weight:400;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--white);border-bottom-color:var(--white);}
.header-cta{padding:8px 18px;font-size:.8125rem;}

/* ---------- ヒーロー ---------- */

.hero{padding:104px 0 0;text-align:center;overflow:hidden;}
.hero .tagline{max-width:40ch;margin:20px auto 0;}
.hero .actions{margin-top:32px;}

/* Stat Display：数字はセリフ、ラベルはサンス14px */
.hero-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 56px;margin-top:56px;}
.hero-meta div{font-size:.875rem;color:var(--fog);}
.hero-meta b{
  display:block;font-family:var(--serif);font-weight:400;font-size:2rem;font-variant-numeric:var(--nums);
  line-height:1.1;letter-spacing:.008em;color:var(--white);margin-bottom:6px;
}

.hero-visual{
  margin-top:72px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  width:min(100% - 44px, var(--page-w));margin-inline:auto;
}
.hero-visual .cell{border-radius:var(--r-card);overflow:hidden;background:var(--onyx);}
.hero-visual video{width:100%;aspect-ratio:9/16;object-fit:cover;}

/* ---------- 悩み（hairlineの行） ---------- */

.list-plain{list-style:none;margin:0;padding:0;border-top:1px solid var(--graphite);}
.list-plain li{
  border-bottom:1px solid var(--graphite);padding:18px 0 18px 28px;position:relative;
  font-size:1rem;color:var(--bone);
}
.list-plain li::before{
  content:"";position:absolute;left:2px;top:1.5em;width:12px;height:1px;background:var(--smoke);
}

.statement{
  font-family:var(--serif);font-weight:400;font-variant-numeric:var(--nums);
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2rem);line-height:1.45;letter-spacing:.008em;
  color:var(--white);margin:56px 0 0;
}
.statement strong{color:var(--white);font-weight:500;}

/* ---------- サンプル ---------- */

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.tile{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--onyx);}
.tile video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;}
/* 横型（YouTube・HP・店頭モニター向け）の作例。縦型と同じ3列に置くが、比率だけ16:9にする */
.tiles.wide .tile video{aspect-ratio:16/9;}
.tile-label{
  position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
  padding:16px 18px 34px;color:var(--white);
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
  font-size:.8125rem;font-weight:500;letter-spacing:-.01em;
}
.sound-btn{
  position:absolute;right:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;
  /* 下地は映像なので、明るいフレームが来ても文字が沈まない濃さにする。
     .5 だと白いフレームの上で 2.92:1 まで落ちてAAを割っていた。
     .82 なら最悪ケース（純白）でも 9.70:1（2026-08-15 実測） */
  background:rgba(8,8,10,.82);border:1px solid var(--steel);color:var(--bone);
  font-family:inherit;font-size:.75rem;font-weight:500;letter-spacing:-.01em;
  backdrop-filter:blur(8px);
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
/* 見た目は変えずに、指で押せる範囲だけ44px角まで広げる */
.sound-btn::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}
.sound-btn:hover{border-color:var(--white);color:var(--white);}
.sound-btn svg{width:13px;height:13px;fill:currentColor;}
.sound-btn .on{display:none;}
.tile.is-loud .sound-btn{background:var(--white);border-color:var(--white);color:#000;}
.tile.is-loud .sound-btn .on{display:block;}
.tile.is-loud .sound-btn .off{display:none;}

.group{margin-top:64px;}
.group .h-sm{margin-bottom:6px;}
.group .note{margin:0 0 20px;max-width:72ch;}

/* ---------- 3分割（hairline） ---------- */

.cols-3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--graphite);}
.cols-3 > div{padding:32px 28px;border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);}
/* 3つの型の作例サムネイル。下の作例欄と同じポスター画像を16:9に切り出して使う */
.type-thumb{border-radius:var(--r-card);overflow:hidden;background:var(--onyx);aspect-ratio:16/9;margin:0 0 18px;}
.type-thumb img{width:100%;height:100%;object-fit:cover;}
.cols-3 > div:last-child{border-right:0;}
.cols-3 h3{font-family:var(--sans);font-size:1.125rem;font-weight:500;color:var(--white);letter-spacing:-.012em;margin-bottom:4px;}
.cols-3 .sub{font-size:.875rem;color:var(--copper);font-weight:600;margin:0 0 14px;letter-spacing:-.01em;}
.cols-3 p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--fog);}

/* ---------- 制作実績（枠線なし・余白だけで分ける） ---------- */

.works-head{display:flex;align-items:baseline;gap:14px;margin:48px 0 18px;flex-wrap:wrap;}
.works-head h3{font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--white);}
.works-head span{font-size:.8125rem;color:var(--ash);}
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.work{text-decoration:none;display:block;}
.work-thumb{
  position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--onyx);
  aspect-ratio:16/9;
}
.works.vertical .work-thumb{aspect-ratio:9/16;}
.work-thumb img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .3s ease,transform .5s ease;}
.work:hover .work-thumb img{opacity:1;transform:scale(1.03);}
.work-thumb::after{
  content:"";position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;
  background:rgba(8,8,10,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% 50%/17px no-repeat;
  border:1px solid var(--slate);
}
.work-role{margin-top:10px;font-size:.75rem;color:var(--ash);}

/* ---------- 料金（Data Table Row の型。カード容器を使わない） ---------- */

.plans{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--graphite);}
.plans > div{padding:32px 28px;border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);}
.plans > div:last-child{border-right:0;}
.plans h3{font-family:var(--sans);font-size:1.125rem;font-weight:500;color:var(--white);letter-spacing:-.012em;}
.plans .note{margin:8px 0 22px;}
.plan{display:grid;grid-template-columns:1fr auto;gap:3px 16px;padding:16px 0;border-top:1px solid var(--graphite);align-items:baseline;}
.plan-name{font-weight:500;font-size:.9375rem;color:var(--white);}
.plan-badge{
  font-size:.6875rem;font-weight:500;color:var(--bone);
  border:1px solid var(--steel);border-radius:var(--r-pill);
  padding:2px 9px;margin-left:8px;vertical-align:2px;
  /* スマホで価格に押されてピルの中身が「一番人／気」に割れていた */
  white-space:nowrap;display:inline-block;
}
.plan-price{
  font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.008em;
  font-variant-numeric:var(--nums);
  white-space:nowrap;color:var(--white);
}
.plan-price small{font-family:var(--sans);font-size:.6875rem;font-weight:400;color:var(--ash);margin-left:4px;letter-spacing:-.01em;}
.plan-desc{grid-column:1/-1;font-size:.8125rem;color:var(--ash);margin:0;line-height:1.55;}

.rate{width:100%;border-collapse:collapse;font-size:.9375rem;}
.rate th,.rate td{text-align:left;padding:16px 0;border-bottom:1px solid var(--graphite);vertical-align:top;}
.rate tr:first-child th,.rate tr:first-child td{border-top:1px solid var(--graphite);}
.rate th{font-weight:400;width:64%;color:var(--bone);}
.rate td{
  text-align:right;white-space:nowrap;
  font-family:var(--serif);font-weight:400;font-size:1.125rem;letter-spacing:.008em;color:var(--white);
  font-variant-numeric:var(--nums);
}
.rate .sub{display:block;font-family:var(--sans);font-size:.75rem;color:var(--ash);margin-top:4px;line-height:1.55;font-weight:400;}

/* ---------- 声 ---------- */

.quotes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--graphite);}
.quotes blockquote{margin:0;padding:32px 28px;border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);}
.quotes blockquote:nth-child(even){border-right:0;}
.quotes .who{font-size:.8125rem;font-weight:600;color:var(--copper);margin:0 0 12px;letter-spacing:-.01em;}
.quotes p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--bone);}
.quotes details{margin-top:14px;}
.quotes summary{cursor:pointer;list-style:none;font-size:.8125rem;color:var(--fog);}
.quotes summary::-webkit-details-marker{display:none;}
.quotes summary:hover{color:var(--white);}
.quotes summary::after{content:" ＋";}
.quotes details[open] summary::after{content:" －";}
.quotes details p{margin-top:12px;font-size:.875rem;color:var(--mist);}

/* ---------- 流れ ---------- */

.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--graphite);counter-reset:s;}
.steps > div{padding:28px 24px;border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);}
.steps > div:last-child{border-right:0;}
.steps > div::before{
  counter-increment:s;content:"0" counter(s);
  display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;
  letter-spacing:.008em;color:var(--copper);margin-bottom:14px;font-variant-numeric:var(--nums);
}
.steps h3{font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--white);margin-bottom:8px;}
.steps p{margin:0;font-size:.8125rem;color:var(--fog);line-height:1.6;}

/* ---------- 2分割 ---------- */

.cols-2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--graphite);}
.cols-2 > div{padding:32px 28px;border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);}
.cols-2 > div:last-child{border-right:0;}
.cols-2 h3{font-family:var(--sans);font-size:1.125rem;font-weight:500;color:var(--white);letter-spacing:-.012em;margin-bottom:10px;}
.price-line{
  font-family:var(--serif);font-size:1.25rem;font-weight:400;letter-spacing:.008em;color:var(--white);
  font-variant-numeric:var(--nums);
  margin:18px 0;padding:16px 0;border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);
}
.price-line span{display:block;font-family:var(--sans);font-size:.75rem;font-weight:400;color:var(--ash);margin-top:8px;line-height:1.55;letter-spacing:-.01em;}
.ticks{list-style:none;margin:0;padding:0;font-size:.875rem;}
.ticks li{padding-left:18px;position:relative;margin-bottom:10px;color:var(--fog);line-height:1.6;}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--smoke);}

/* ---------- 運営者 ---------- */

.owner{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;}
.owner-photo{border-radius:var(--r-card);overflow:hidden;background:var(--onyx);}
.owner-photo img{filter:grayscale(1) contrast(1.04);transition:filter .5s ease;}
.owner-photo:hover img{filter:grayscale(0);}
.owner .ruby{display:block;font-family:var(--sans);font-size:.75rem;color:var(--ash);letter-spacing:.08em;margin-bottom:8px;}
.owner h2{font-family:var(--serif);font-size:2.25rem;font-weight:400;letter-spacing:.008em;color:var(--white);font-variant-numeric:var(--nums);}
.owner-role{font-size:.875rem;color:var(--copper);font-weight:600;margin:12px 0 24px;letter-spacing:-.01em;}
.owner p{font-size:1rem;line-height:1.7;margin:0 0 18px;color:var(--bone);}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding:0;list-style:none;}
.tags li{font-size:.75rem;border:1px solid var(--slate);border-radius:var(--r-pill);padding:5px 14px;color:var(--fog);}

/* ---------- FAQ ---------- */

.faq{border-top:1px solid var(--graphite);}
.faq details{border-bottom:1px solid var(--graphite);}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:1rem;font-weight:500;color:var(--white);position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--copper);}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:1px;background:var(--steel);}
.faq summary::before{content:"";position:absolute;right:11px;top:50%;width:1px;height:11px;margin-top:-5px;background:var(--steel);transition:opacity .2s ease;}
.faq details[open] summary::before{opacity:0;}
.faq .answer{padding:0 0 24px;color:var(--fog);font-size:.9375rem;line-height:1.7;margin:0;}

/* ---------- CTA ---------- */

.cta{background:var(--onyx);text-align:center;}
.cta .points{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin-top:28px;font-size:.8125rem;color:var(--ash);}

/* ---------- フッター ---------- */

.site-footer{background:var(--obsidian);border-top:1px solid var(--graphite);padding:32px 0 40px;font-size:.75rem;color:var(--ash);}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;}
.site-footer a{color:var(--fog);text-decoration:none;}
/* ヘッダーのナビは1000px未満で消える。消えるとページをまたぐ導線（/lab/ など）が
   サイト内から到達できなくなるので、フッターに全幅で常設する（2026-08-15） */
.foot-nav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 24px;margin-bottom:6px;}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--silver);font-size:.8125rem;}
.foot-nav a:hover{color:var(--white);}
.site-footer a:hover{color:var(--copper);}
.site-footer .copy{margin-left:auto;}

/* ============================================================
   広告用LP
   ============================================================ */

.lp-bar{background:var(--onyx);color:var(--fog);padding:11px 0;font-size:.75rem;text-align:center;border-bottom:1px solid var(--graphite);}
/* .form-embed は2026-08-17に削除。LPはフォームを埋め込まずボタンで開く */

.compare{width:100%;border-collapse:collapse;font-size:.9375rem;border-top:1px solid var(--graphite);}
.compare th,.compare td{padding:16px 18px;border-bottom:1px solid var(--graphite);text-align:left;}
.compare thead th{font-size:.8125rem;font-weight:600;color:var(--fog);}
.compare tbody th{font-weight:500;width:26%;color:var(--white);}
.compare td{color:var(--fog);}
.compare .ours{color:var(--bone);background:var(--carbon);}
.compare thead .ours{color:var(--copper);}

.sticky-cta{display:none;}

/* ---------- レスポンシブ ---------- */

@media (max-width:1000px){
  :root{--gap-sec:112px;}
  section.tight{padding:72px 0;}
  .hero{padding:80px 0 0;}
  .hero-visual{grid-template-columns:repeat(3,1fr);}
  .tiles{grid-template-columns:repeat(3,1fr);gap:10px;}
  .cols-3,.cols-2,.plans,.quotes{grid-template-columns:1fr;}
  .cols-3 > div,.cols-2 > div,.plans > div,.quotes blockquote{border-right:0;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .works{grid-template-columns:repeat(2,1fr);}
  .owner{grid-template-columns:1fr;gap:32px;}
  .owner-photo{max-width:220px;}
  .nav{display:none;}
}

@media (max-width:640px){
  :root{--gap-sec:88px;}
  section.tight{padding:56px 0;}
  /* PCの2行組用の<br>。スマホでは二重折り返しになるので消し、文節（.w）に任せる */
  br.pc{display:none;}
  /* 31px超だと「実際にご依頼いただいた」(11字)が375px幅に入らない。
     28pxなら入る（セリフは28px以上、のルール内） */
  .h-lg{font-size:1.75rem;}
  .hero-visual{grid-template-columns:repeat(2,1fr);}
  .tiles{grid-template-columns:1fr 1fr;gap:8px;}
  /* 16:9を半分の幅に入れると高さ84pxまで潰れて何も読めなくなるので、横型だけ1列にする */
  .tiles.wide{grid-template-columns:1fr;gap:12px;}
  .works{grid-template-columns:1fr 1fr;gap:10px;}
  .steps{grid-template-columns:1fr;}
  .actions{flex-direction:column;}
  .actions .btn{width:100%;}
  .hero-meta{gap:12px 32px;}
  .rate th{width:56%;}
  .compare,.compare thead,.compare tbody,.compare th,.compare td,.compare tr{display:block;}
  .compare thead{display:none;}
  .compare tbody th{background:var(--carbon);border-bottom:0;}

  .is-lp .sticky-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(8,8,10,.94);backdrop-filter:blur(16px);border-top:1px solid var(--graphite);
    transition:transform .25s ease;
  }
  .is-lp .sticky-cta .btn{width:100%;}
  .is-lp .sticky-cta.is-hidden{transform:translateY(130%);}
  .is-lp .sticky-cta{transform:translateY(130%);}
  .is-lp .sticky-cta:not(.is-hidden){transform:none;}
  .is-lp .site-footer{padding-bottom:96px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}