/* tokens.css は各HTMLが先に読む。ここでは @import しない(取得が直列になり表示が遅れるため) */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--body);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  font-weight:400; line-height:1.85; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--accent-1); color:var(--card); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--mx); padding-right:var(--mx); }
.sec{ padding:72px 0; }
.sec-title{ font-size:clamp(21px,3.4vw,28px); font-weight:900; color:var(--ink); letter-spacing:.04em; line-height:1.45; margin-bottom:14px; }
.label{ display:block; font-size:11px; font-weight:700; color:var(--gray); letter-spacing:.14em; margin-bottom:10px; }
.lead{ font-size:15px; line-height:1.95; color:var(--body); }
.note{ font-size:12.5px; line-height:1.8; color:var(--sub); }

/* ボタン: 面で塗るのは錆朱のみ */
.btn{
  display:inline-block; background:var(--accent); color:var(--card);
  font-size:14px; font-weight:700; padding:13px 26px; border-radius:4px;
  border:1px solid var(--accent); transition:background .2s ease;
}
.btn:hover{ background:var(--accent-d); border-color:var(--accent-d); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn--ghost:hover{ background:var(--paper-2); }

.card{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:20px 20px 22px; box-shadow:var(--shadow); }

.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{ background:var(--paper-2); color:var(--ink); font-weight:700; text-align:left; }
.table th, .table td{ border:1px solid var(--line-2); padding:10px 12px; vertical-align:top; }

/* ヘッダー */
.site-head{ background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.site-head .brand{ font-weight:900; font-size:17px; color:var(--ink); letter-spacing:.05em; }
.site-head nav{ display:flex; gap:18px; font-size:13px; color:var(--sub); }
.site-head nav a.is-cta{ color:var(--accent); font-weight:700; }
@media (max-width:640px){ .site-head nav{ gap:12px; font-size:12px; } .site-head nav a:not(.is-cta){ display:none; } }

/* フッター */
.site-foot{ background:var(--paper-2); padding:36px 0; font-size:12.5px; color:var(--sub); }
.site-foot .brand{ font-weight:900; color:var(--ink); font-size:15px; margin-bottom:8px; }
.site-foot nav{ display:flex; flex-wrap:wrap; gap:14px; margin:12px 0; }
.site-foot .copy{ color:var(--gray); }

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

/* ---- v3.1 (2026-09-03) 追加部品 ---- */
/* 画面いっぱいに使うセクション */
.full{ min-height:92svh; display:flex; align-items:center; }
.full > .wrap{ width:100%; }

/* 写真プレースホルダ(実写真が入るまでの仮置き。撮影内容をラベルで示す) */
.ph{ background:var(--paper-2); border:1px dashed var(--line-2); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--gray); font-size:12px; line-height:1.8; padding:14px; }
.ph--43{ aspect-ratio:4/3; }
.ph--wide{ aspect-ratio:21/9; }
.ph--tall{ aspect-ratio:3/4; }

/* パンくず */
.crumb{ font-size:12px; color:var(--gray); padding:14px 0 0; }
.crumb a{ text-decoration:underline; }

/* 下層ページ: 写真が先、タイトルが後 */
.page-hero .ph{ margin-bottom:26px; }
.page-hero h1{ font-size:clamp(23px,4.2vw,32px); font-weight:900; color:var(--ink); line-height:1.45; letter-spacing:.04em; margin-bottom:12px; }

/* チェック付きリスト(困りごと・支援内容) */
.ck{ list-style:none; margin:0; padding:0; }
.ck li{ position:relative; padding:9px 0 9px 30px; font-size:14.5px; line-height:1.85; color:var(--body); border-bottom:1px solid var(--line); }
.ck li::before{ content:""; position:absolute; left:2px; top:16px; width:14px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* 折返し: 1〜2文字の孤立を防ぐ。.nw は文節を切り離さない。text-wrap は対応ブラウザで最終行の孤立を回避 */
.nw{ white-space:nowrap; }
p, li, summary, dd, td{ text-wrap:pretty; }
h1, h2, h3{ text-wrap:balance; }

/* ---- v3.2 (2026-09-05) 下層サービスページ共通部品 ----
   骨格: 写真 → 見出し → 困りごと → [用語の説明] → 困りごと → 具体的な支援例(項目ごとの説明文) → [進め方(個別開発型のみ)]
         → 実施内容(行ったこと/変わったこと + 実画面) → CTA
   「どう直すか」(設定値・文言・判断基準・操作手順)は書かない。 */
.sub-h2{ font-size:19px; font-weight:900; color:var(--ink); letter-spacing:.05em; margin-bottom:16px; }
.sub-lead{ font-size:14.5px; line-height:1.9; color:var(--sub); max-width:44em; }

/* 具体的な支援例: アイコン + 見出し + 説明文(1項目ずつ説明する。仕様表にしない) */
.ex-list{ display:grid; gap:14px; margin-top:22px; }
.ex{ background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:22px 24px; display:flex; gap:18px; align-items:flex-start; }
@media (max-width:480px){ .ex{ flex-direction:column; gap:12px; padding:20px; } }
.ex-icon{ flex:none; width:46px; height:46px; border-radius:50%; background:var(--x-fill); display:flex; align-items:center; justify-content:center; }
.ex-icon svg{ width:24px; height:24px; fill:none; stroke:var(--x-c); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ex h3{ font-size:16px; font-weight:900; color:var(--ink); line-height:1.5; letter-spacing:.02em; margin-bottom:6px; }
.ex p{ font-size:14px; line-height:1.9; color:var(--body); }
.ex p + p{ margin-top:8px; }
.x-map{ --x-c:var(--moss);  --x-fill:rgba(94,110,82,.12); }
.x-ai{  --x-c:var(--plum);  --x-fill:rgba(110,98,112,.12); }
.x-sns{ --x-c:var(--ochre); --x-fill:rgba(168,133,63,.12); }
.x-dev{ --x-c:var(--slate); --x-fill:rgba(78,96,104,.12); }

/* 用語の説明(「MEO対策とは」など): 白地の短い段落 */
.term{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:24px 26px; margin-top:18px; }
.term p{ font-size:14.5px; line-height:1.95; color:var(--body); }
.term p + p{ margin-top:10px; }

/* 進め方(個別開発型のみ): 縦ステップ。トップの「ご契約までの流れ」と同じ部品(線が伸びる) */
.steps-v{ position:relative; padding-left:34px; margin-top:22px; }
.steps-v::before{ content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px; background:var(--line-2); transform:scaleY(0); transform-origin:top; transition:transform 1.1s ease .2s; }
.steps-v.is-in::before{ transform:scaleY(1); }
.step-v{ position:relative; padding:0 0 30px; }
.step-v:last-child{ padding-bottom:0; }
.step-v::before{ content:""; position:absolute; left:-30px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--card); border:3px solid var(--accent); }
.step-v .s-no{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--accent); margin-bottom:3px; }
.step-v h3{ font-size:17px; font-weight:900; color:var(--ink); letter-spacing:.05em; margin-bottom:5px; }
.step-v p{ font-size:13.5px; line-height:1.9; color:var(--body); }
.rv{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.15s; } .rv-d2{ transition-delay:.3s; } .rv-d3{ transition-delay:.45s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } .steps-v::before{ transform:none; } }

/* 実施内容: 左=3層(見たところ/変わったこと/お渡ししたもの) 右=実画面 */
.done{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:28px 32px; align-items:start; background:var(--card); border:1px solid var(--line-2); border-radius:8px; padding:28px; margin-top:22px; }
@media (max-width:760px){ .done{ grid-template-columns:1fr; padding:22px 20px; gap:20px; } }
.done--solo{ grid-template-columns:1fr; max-width:760px; }
.done h3{ font-size:17px; font-weight:900; color:var(--ink); line-height:1.5; margin-bottom:14px; letter-spacing:.02em; }
.layer{ padding:12px 0; border-top:1px solid var(--line); }
.layer .lbl{ display:block; font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--gray); margin-bottom:4px; }
.layer p{ font-size:14px; line-height:1.9; color:var(--body); }
.layer p + p{ margin-top:6px; }
.done .by{ margin-top:14px; font-size:12.5px; color:var(--gray); line-height:1.7; }
.shot{ background:var(--paper-2); border:1px dashed var(--line-2); border-radius:6px; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; color:var(--gray); font-size:12px; line-height:1.8; }
.shot--a4{ aspect-ratio:1/1.2; }
.shot--tall{ aspect-ratio:3/4; }
.shot--wide{ aspect-ratio:10/3; }
.shot--chat{ aspect-ratio:738/1400; max-width:250px; margin-inline:auto; }
.shot--phone{ aspect-ratio:390/844; max-width:230px; margin-inline:auto; }
.shot img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.shot img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.shot-cap{ font-size:12px; color:var(--gray); margin-top:8px; line-height:1.7; }
.shot-cap + .shot{ margin-top:14px; }
.honest{ font-size:12.5px; line-height:1.8; color:var(--sub); margin-top:12px; }


.cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- v3.3 (2026-09-07) 下層ページ冒頭の場面。1ページ1場面・6秒ループ・CSS/SVGのみ ----
   既定のスタイル=最終コマ。だから prefers-reduced-motion では静止画として成立する。
   ページ側は .hs の中にSVGを1枚置き、そのページの @keyframes だけを書く。 */
.hs{ --T:6s; --t:0s; position:relative; aspect-ratio:21/9; background:var(--paper-1); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:26px; }
.hs *{ animation-duration:var(--T); animation-iteration-count:infinite; animation-fill-mode:both; animation-delay:var(--t); }
.hs.is-off *, .hs.is-frozen *{ animation-play-state:paused; }
.hs .sv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hs .sv text{ font-family:inherit; }
.hs .grid{ stroke:var(--line-2); fill:none; stroke-width:1; }
.hs .card{ fill:var(--card); stroke:var(--line-2); stroke-width:1; }
.hs .lbl{ fill:var(--gray); font-size:13px; font-weight:700; letter-spacing:.06em; }
.hs .txt{ fill:var(--ink); font-size:15px; font-weight:700; }
.hs .sml{ fill:var(--gray); font-size:12.5px; }
.hs .bar{ fill:var(--gray-1); }
.hs .hit{ fill:var(--accent); }
.hs .ln{ stroke:var(--line-2); stroke-width:1; fill:none; }
.hs .ck{ stroke:var(--accent); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion:reduce){ .hs *{ animation:none !important; } }