/* ==========================================================
milk portfolio — style.css
SP（〜767px）= みなみデザイン忠実 / PC = 768px〜の拡張
========================================================== */
/* 英字見出し＝クラフト明朝（Craft Mincho / Atelier Kotatu・BOOTH配布）
assets/fonts/ に woff2 を置くと有効。未配置の間は Shippori Mincho（Google Fonts）で代替 */
@font-face {
font-family: "Craft Mincho";
src: url("../assets/fonts/CraftMincho-latin.woff2") format("woff2");
font-weight: 400; font-display: swap;
unicode-range: U+0020-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
/* 英数のみのサブセット（約数十KB）。日本語で使う時は CraftMincho.woff2（全字・1.7MB）を別@font-faceで足す */
}
@font-face { /* 見出しの一部をクラフト明朝にする語だけのサブセット（伝わり方・もっと・実績企業・ご依頼の流れ＝2026-08-29 みどり指示）。語を足すときは pyftsubset で再生成し unicode-range も足す */
font-family: "Craft Mincho";
src: url("../assets/fonts/CraftMincho-jasub.woff2") format("woff2");
font-weight: 400; font-display: swap;
unicode-range: U+4F1D, U+308F, U+308A, U+65B9, U+3082, U+3063, U+3068, U+5B9F, U+7E3E, U+4F01, U+696D, U+3054, U+4F9D, U+983C, U+306E, U+6D41, U+308C; /* 伝 わ り 方 も っ と 実 績 企 業 ご 依 頼 の 流 れ */
}
:root {
/* CONTACTの丸（2026-09-13 UI設計で整理）＝直径1つから中身と周りの余白を全部計算する。
文字は12px未満にしない（可読性の下限）。余白は8の倍数：丸の上56（ベージュ面の中）／丸→リード32／リード→ボタン32（PC40）／ボタン→帯の下56 */
--badge-d: 120px;
--fs-badge: 12px;
--ivory: #F8F2EC;
--ivory-2: #F3ECE4;
--pink: #E2BDAF; /* v2実測 */
--pink-light: #EFD9CF;
--pink-grid: #F1DCD4;
--beige: #E8DFD4;
--beige-2: #F0E8DE;
--brown: #695C52; /* v2実測（旧#5C4B41） */
--beige-btn: #E9DED2; /* v2 ボタン/サービスカードのベージュ */
--coral: #E28072; /* v2 CONTACTボタン */
--brown-2: #7A6759;
--text: #4A3F38;
--text-light: #8A7B70;
--ph: #CFCFCF;
--white: #FFFFFF;
--line: #C9B9AD;
--font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
--font-maru: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; /* 見出し用（変数名は据え置き） */
--font-en: "Craft Mincho", "Shippori Mincho", "Hiragino Mincho ProN", serif;
--w-inner: 340px;
--w-pc: 1080px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-ja);
color: var(--text);
background: var(--white); /* v2＝白地（v1のアイボリーから変更・2026-08-29） */
line-height: 1.9;
font-size: 14px;
letter-spacing: 0.04em;
overflow-x: hidden; overflow-x: clip; /* iOS Safariはhiddenでも横スクロールするのでclip */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.ph { /* 画像プレースホルダ */
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
color: #9a9a9a; font-size: 11px; letter-spacing: 0.15em;
}
.is-tbd { position: relative; }
.is-tbd::after { /* 要確認マーク（本番では削除） */
content: "要確認"; position: absolute; top: -0.9em; right: -0.2em;
font-size: 9px; color: #c0392b; letter-spacing: 0.1em; font-weight: 700;
}
/* ---------- common parts ---------- */
.sec-title { text-align: center; margin-bottom: 22px; }
.sec-title__en {
display: inline-block; position: relative;
font-family: var(--font-en); font-weight: 500;
font-size: 34px; letter-spacing: 0.18em; color: var(--brown); /* v2＝約1.5倍 */
}
/* 見出しの「ちょんちょん」＝みなみ書き出しのPNG（2026-09-11 受領）。2026-08-29に「入れるなら本人の手描き画像で」と保留していたもの。
ABOUT＝茶・見出しの左上／STRENGTH＝白・見出しの右上（カンプ実測） */
.sec-title__deco { position: absolute; height: auto; pointer-events: none; }
/* 2026-09-13 みどり「もう少し小さく・いい感じに」→ PDFカンプを実測して em 指定に直した。
カンプの見出しはキャップ高33-35px＝実装(40px/キャップ33.6px)とほぼ同寸なので、カンプの実寸をそのままemに換算できる。
ABOUT＝幅27px・文字左端から-20px・キャップ上端から-22px ／ STRENGTH＝幅25px・文字右端から+22px・キャップ上端から-16px。
emなのでSP(34px)/PC(40px)で自動的に同じ比率になる＝ブレークポイントごとのpx上書きは不要（旧: 35/42px と 30/36px＝カンプの約1.5倍で大きすぎた） */
.sec-title__deco--left { width: 0.675em; left: -0.5em; top: -0.065em; }
.sec-title__deco--right { width: 0.6em; right: -0.54em; top: 0.09em; }
.sec-title__en--small { font-size: 13px; letter-spacing: 0.3em; }
.sec-title__ja {
display: block; font-family: var(--font-en); font-weight: 400; /* クラフト明朝（ご依頼の流れ・2026-08-29 みどり指示） */
font-size: 22px; letter-spacing: 0.1em; color: var(--brown); margin-top: 2px;
}
.sec-title--light .sec-title__en { color: var(--white); }
.bracket-title {
position: relative; text-align: center;
font-family: var(--font-maru); font-weight: 700;
font-size: 18px; line-height: 1.75; letter-spacing: 0.06em; color: var(--brown);
padding: 10px 22px; margin: 0 auto 22px; max-width: var(--w-inner);
}
.bracket-title::before, .bracket-title::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 12px;
border: 1px solid var(--line);
}
.bracket-title::before { left: 0; border-right: 0; }
.bracket-title::after { right: 0; border-left: 0; }
.bracket-title--light { color: var(--brown); } /* v2＝ピンク地でも茶文字（2026-08-29 みどり指定。白は不採用） */
.bracket-title--light::before, .bracket-title--light::after { border-color: var(--brown); }
.ff-craft { font-family: var(--font-en); font-weight: 400; font-size: 1.12em; letter-spacing: 0.06em; } /* 見出し内でクラフト明朝にする語（STRENGTH「伝わり方」・ABOUT「もっと」・2026-08-29 みどり指示） */
/* ボタン＝v2カンプ準拠（2026-08-29「これに合わせて」）：角丸6・高さ60・幅264。色の階層＝茶塗り（標準）／コーラル（CONTACT）／ベージュ（小）。
G案の「矢印スワップ」だけ残す（塗りボタンなので色の流れ込みは廃止）。第3階層＝STRENGTHの「事例をみる →」下線リンク（.btn--small） */
.btn {
position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: space-between;
width: 100%; max-width: 264px; min-height: 60px; padding: 0 22px 0 26px;
border-radius: 8px; border: 1px solid var(--brown); background: var(--brown); color: var(--white);
box-shadow: 3px 4px 0 -1px var(--white), 3px 4px 0 0 var(--brown); /* 2026-09-15 みなみ「インスタボタン同様ぽこっと」→同日みどり「影を真っ白にして枠だけ茶色」＝白い影＋茶1pxの線（1枚目の影を-1px縮めた白で塗り、2枚目の茶が1pxの縁として残る）。インスタピル（白地＋茶枠＋茶影）と白と茶が反転した対の見た目。旧＝濃い茶#3E3530の塗り影 */
font-family: var(--font-maru); font-weight: 700; font-size: 14px; letter-spacing: 0.1em;
transition: filter .25s ease;
}
/* ホバー＝押し込み（下の「ボタンの押し込み」）に統一。旧＝明るくするだけ（brightness 1.08） */
.btn__arrow { /* 矢印スワップ：::beforeが右へ抜け、::afterが左から入る */
position: relative; flex: none; width: 18px; height: 18px; overflow: hidden; font-size: 0; line-height: 0;
}
.btn__arrow::before, .btn__arrow::after {
content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px;
background: url("data:image/svg+xml;utf8,") center / 9px 15px no-repeat; transition: transform .4s cubic-bezier(.7,0,.3,1);
} /* 矢印＝細い線のシェブロン（先端丸・SVG）。文字の「>」は使わない（2026-08-29 みどり「オシャレなのに」） */
.btn__arrow::after { transform: translateX(-140%); }
.btn:hover .btn__arrow::before, .btn:active .btn__arrow::before, .btn.is-hov .btn__arrow::before { transform: translateX(140%); }
.btn:hover .btn__arrow::after, .btn:active .btn__arrow::after, .btn.is-hov .btn__arrow::after { transform: none; }
.btn--outline, .btn--fill { } /* 旧バリエーションは型に吸収（クラスは互換のため残す） */
/* CONTACTのボタン＝Instagramピルと同じ作り（1px枠＋右3/下4のずらし影）。塗りはコーラル・枠と影と文字は白
（2026-09-13 みどり案を採用）。**白塗り＋コーラル枠も試したが不採用**＝理由は3つ：
①茶帯(#695C52)の上ではコーラル塗りのほうが「押す場所」として一段強く、白塗りだとInstagramピル（案内＝副次）と同じ見え方になり主従が消える
②コーラルと茶の明度差は2.3:1しかなく、白の枠と影がないと輪郭が茶に溶ける
③コーラル文字/白地(2.8:1)より白文字/コーラル地のほうが太く見えて読みやすい（数値は同じでも白抜き文字は視覚的に強い）
※どちらの配色もWCAGのコントラスト基準(4.5:1)には届かない。ブランド色を変えずに満たすのは不可能なので、文字は700・16pxを下回らせない */
.btn--beige {
background: var(--coral); color: var(--white);
border: 1px solid var(--white); border-radius: 8px;
box-shadow: 3px 4px 0 var(--white);
}
.btn--small { box-shadow: none; min-height: 34px; padding: 0 12px; font-size: 11px; font-weight: 500; border: 1px solid var(--brown); background: var(--white); color: var(--brown); border-radius: 3px; max-width: 220px; width: auto; gap: 24px; overflow: visible; }
.btn--small:hover, .btn--small:active { color: var(--brown); filter: none; }
.btn--small .btn__arrow { position: static; width: auto; height: auto; overflow: visible; font-size: 15px; line-height: 1; }
.btn--small .btn__arrow::before, .btn--small .btn__arrow::after { content: none; }
.btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 26px; }
/* ボタンの押し込み（2026-09-15 みどり「全部ボタン沈む感じのがホバーの動きとして良さそう」）：
ずらし影（右3・下4）をつけたボタンは全部、ホバーで本体が影のぶん右下へ沈み、影がゼロになる＝浮いている物を押した見え方。
影の数と色は各ボタンの通常時と同じにして、影が縮むだけの動きにする（色が変わると一瞬にじむ）。
ホバーできる端末だけ :hover（スマホはタップ後に :hover が残るので沈んだままになる）／タップ中は :active で同じ動き */
.btn:not(.btn--small), .ig-pill { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
.btn:not(.btn--small):hover, .ig-pill:hover { transform: translate(3px, 4px); }
.btn:not(.btn--small):hover { box-shadow: 0 0 0 -1px var(--white), 0 0 0 0 var(--brown); }
.ig-pill:hover, .gnav__cta.btn:not(.btn--small):hover, .btn--submit.btn:not(.btn--small):hover { box-shadow: 0 0 0 var(--brown); } /* 上の .btn 共通より強い指定にする（同じ強さだと白＋茶の2重影が勝つ） */
.btn--beige.btn:not(.btn--small):hover { box-shadow: 0 0 0 var(--white); }
}
.btn:not(.btn--small):active, .ig-pill:active { transform: translate(3px, 4px); }
.btn:not(.btn--small):active { box-shadow: 0 0 0 -1px var(--white), 0 0 0 0 var(--brown); }
.ig-pill:active, .gnav__cta.btn:not(.btn--small):active, .btn--submit.btn:not(.btn--small):active { box-shadow: 0 0 0 var(--brown); }
.btn--beige.btn:not(.btn--small):active { box-shadow: 0 0 0 var(--white); }
@media (prefers-reduced-motion: reduce) { .btn:not(.btn--small), .ig-pill { transition: none; } }
/* ロゴ＝本人の手描き「milk」（milkillust.com のサイトロゴを取得・assets/img/milk-logo.png）／アイコン＝同サイトのサイトアイコン（白→透過・assets/img/milk-icon.png）2026-08-29 */
.logo-img { display: block; width: 58px; height: auto; }
.header__logo .logo-img { width: 58px; } /* ヘッダーはv1の寸法（v2の88pxは白帯とセットで不採用） */
/* ---------- S0 loading ---------- */
.loading {
position: fixed; inset: 0; z-index: 1000;
background: var(--white);
display: flex; flex-direction: column; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
.loading.is-done { opacity: 0; visibility: hidden; }
.loading__circle {
width: 120px; height: 120px; border-radius: 50%;
background: var(--white); border: 1px solid var(--line); position: relative;
display: flex; align-items: center; justify-content: center;
}
.loading__circle img { border-radius: 50%; }
.loading__ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px dotted var(--line); border-top-color: transparent; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading__dog { width: 88%; animation: nod 1.2s ease-in-out infinite; }
@keyframes nod { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(-3deg); } }
.loading__text { margin-top: 14px; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.35em; color: var(--text-light); }
/* ---------- header ---------- */
.header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; pointer-events: none; /* v2の白い帯は不採用（2026-08-29 みどり「元の方がいい」）＝透過でロゴが絵の上に乗る */
}
.header > * { pointer-events: auto; }
.header__logo { line-height: 1; }
.header__nav { display: none; }
.header__menu {
width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 4px;
background: rgba(255,255,255,0.7); /* v1の寸法に戻す */
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.header__menu span { display: block; width: 16px; height: 1.4px; background: var(--brown); transition: transform .3s, opacity .3s; }
.header__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.7px) rotate(45deg); }
.header__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.7px) rotate(-45deg); }
/* SPドロワー（2026-09-13 みどり決定＝B案「ベージュの左揃えリスト」・比較=_案_ドロワー_3案_2026-09-13.png）
不透明のアイボリー面（旧＝97%で後ろのイラストが透けて読みにくかった）＋ロゴと×は面の上に出す／
項目＝英字＋日本語の添え字を横並び・行ごと全幅タップ（高さ76px）・右端にシェブロン／
CONTACTは一覧から外す（下の「お問い合わせへ」と重複するため・PCナビには残す）／
下にCTA（コーラル塗り＋茶1px枠＋茶のずらし影＝IGピルと同じ作り）＋SNSアイコン（丸枠なし＝PCフッターと同じ） */
.gnav__ja, .gnav__foot { display: none; }
@media (max-width: 767px) {
.header__logo, .header__menu { position: relative; z-index: 1; }
.header__nav.is-open {
display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 0; overflow-y: auto;
background: var(--ivory); padding: 96px 32px calc(36px + env(safe-area-inset-bottom));
}
.header__nav.is-open .gnav__list { border-top: 1px solid var(--line); }
.header__nav.is-open .gnav__list li { border-bottom: 1px solid var(--line); }
.header__nav.is-open .gnav__contact { display: none; }
.header__nav.is-open .gnav__list a { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 0 4px; color: var(--brown); }
.header__nav.is-open .gnav__list a::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 6px; border-top: 1px solid var(--brown); border-right: 1px solid var(--brown); transform: rotate(45deg); }
.gnav__en { font-family: var(--font-en); font-size: 22px; letter-spacing: 0.2em; line-height: 1; }
.header__nav.is-open .gnav__list a[aria-current="page"] { opacity: 1; } /* pages.css の「現在ページ＝55%」はPCナビ用。ドロワーでは押せない項目に見えるので打ち消す */
.header__nav.is-open a:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; border-radius: 4px; } /* キーボード操作時だけ。ブラウザ標準の青を茶に */
.header__nav.is-open .gnav__ja { display: block; margin-right: auto; font-family: var(--font-ja); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; line-height: 1; color: var(--text-light); }
.header__nav.is-open .gnav__foot { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: auto; padding-top: 40px; }
.gnav__cta.btn { max-width: 264px; background: var(--coral); color: var(--white); border: 1px solid var(--brown); border-radius: 8px; box-shadow: 3px 4px 0 var(--brown); }
.gnav__sns { display: flex; justify-content: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.gnav__sns a { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 44px; color: var(--brown); } /* タップ範囲44px以上 */
.gnav__sns img { width: 24px; height: 24px; object-fit: contain; }
.gnav__sns span { font-size: 10px; letter-spacing: 0.05em; line-height: 1; }
/* 2026-09-18 みどり「WORKSの下の隙間にSNSが出た方がいい？」→ SNSをメニューのすぐ下へ・お問い合わせは親指の届く一番下に残す。
HTMLは変えず、.gnav__foot を display:contents にして中身（CTA・SNS）をドロワーの縦並びに直接参加させ、order で SNS→CTA の順に。
小見出し「CONNECT」はPCフッターと同じ作り（クラフト明朝・字間0.24em・コーラル）。背の低い画面では自動の余白が縮み、SNSとボタンの間は最低40px */
.header__nav.is-open .gnav__foot { display: contents; }
.header__nav.is-open .gnav__sns { order: 1; flex-wrap: wrap; margin: 40px 0 36px; }
.header__nav.is-open .gnav__sns img { width: 26px; height: 26px; }
.header__nav.is-open .gnav__sns::before { /* 小見出し＋左右の細線（メニューの罫線とつなげる） */
content: "CONNECT"; flex: 0 0 100%; margin-bottom: 20px; text-align: center; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.24em; line-height: 1; color: var(--coral);
background: linear-gradient(var(--line), var(--line)) calc(50% - 88px) 50% / 48px 1px no-repeat, linear-gradient(var(--line), var(--line)) calc(50% + 88px) 50% / 48px 1px no-repeat;
}
/* 空いたところに「名刺」＝milk のアイコン（白い丸の上）＋手描きキャッチ1行（2026-09-18 みどり 3案からC）。画像の飾りなのでHTMLは足さず ::after で描く */
.header__nav.is-open::after {
content: ""; order: 2; flex: none; align-self: center; width: 240px; height: 108px; margin: auto 0; pointer-events: none; /* 上下 auto＝SNSとボタンのちょうど真ん中（大きい画面でボタンにくっつかない） */
background: url("../assets/img/milk-icon.png") no-repeat center top / 56px 56px,
radial-gradient(circle 32px at 50% 28px, var(--white) 97%, transparent 100%) no-repeat,
url("../assets/illust/catch.png") no-repeat center bottom / 220px auto;
}
.header__nav.is-open .gnav__cta { order: 3; margin-top: 24px; align-self: center; width: 100%; }
}
@media (max-width: 767px) and (max-height: 700px) { /* 背の低い画面（iPhone SE等）は名刺を出さない＝ボタンを押し下げない */
.header__nav.is-open::after { display: none; }
.header__nav.is-open .gnav__cta { margin-top: auto; }
}
/* ---------- S1 hero ---------- */
/* MV＝固定比率の「ステージ」にパーツを%配置し、画面幅で丸ごと拡縮する。
SP＝390×640（みなみカンプの構図）／PC＝1280×800（横長の一枚絵として再構成）
画像は tools/trim_mv.py で余白を落とした assets/illust/mv/ を使う */
.hero {
/* MVは画面に固定し、ABOUT以降が上に重なってせり上がる（sticky overlap・2026-08-29 みどり案）。
.page は overflow-x: clip なので sticky が効く（hidden にすると効かなくなる） */
position: sticky; top: 0; z-index: 0; background: var(--white); /* 2026-09-13 みどり「SPもPCに合わせて白」＝旧SPはみなみv2カンプの灰#ECECEC */
/* 画面いっぱいの高さにしてMVの下に地色の帯（つなぎ）を出さない。ステージ(最大720/800px)は縦中央に置く（2026-08-29） */
min-height: 100svh; display: flex; align-items: center; justify-content: center;
}
.page > section:not(.hero) { position: relative; z-index: 1; }
/* SP：初画面の下にABOUTの丘の頂上を --hill-peek だけ覗かせる＝続きの合図（2026-09-13 みどり「下に余白がありすぎる場合はおやまをちょこっと」）。
52px＝.about::before の top（丘の頂上はABOUT上端から52px下）。ステージ(390×600比)より低くはならない＝背の低い端末では覗く量が自然に減る */
@media (max-width: 767px) { .hero { --hill-peek: 80px; min-height: calc(100svh - 52px - var(--hill-peek)); padding-top: 66px; } } /* padding-top 66px＝ヘッダーの高さ（上下14＋メニュー38）＝milkロゴとイラストを重ねない（2026-09-13 みどり指示）。背の低い端末では丘の覗きより重ならないことを優先 */
.is-tall .hero { min-height: 0; } /* 検品用（?tall=1）：全長キャプチャでMVが膨らまないように */ /* MVの上に乗る層（各セクションは自前の背景を持つこと） */
/* SP: ステージは画面高まで縦に伸びるが上限720px（伸ばしすぎると隙間が間延びする）。それ以上の端末ではABOUTのアーチが初画面下に覗く＝続きの合図 */
.hero__stage { min-height: 0; } /* 2026-09-13 B案：SPもステージはカンプ比率390×600で固定（旧＝min(100svh,720px)で縦に伸ばしていた→390×844ではパーツの間だけ広がり間延び）。余りの高さはヒーロー内で上下の余白になる */ /* 各パーツのopacity/margin-topはJS「hero recede」がスクロール連動で上書き（transformは出現アニメが使うためmargin-topで流す） */
.hero__stage {
position: relative; width: 100%; aspect-ratio: 390 / 600; margin: 0 auto;
overflow: hidden; container-type: inline-size; /* cqw＝ステージ幅（歩く人の縦位置計算に使う） */
}
.hero__il { position: absolute; opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
.hero.is-shown .hero__il { opacity: 1; transform: translateY(0); }
.hero.is-shown .hero__il--03 { transition-delay: .1s; }
.hero.is-shown .hero__il--03f { transition-delay: .15s; }
.hero.is-shown .hero__il--03p { transition-delay: .2s; }
.hero.is-shown .hero__il--02 { transition-delay: .35s; }
.hero.is-shown .hero__il--04 { transition-delay: .6s; }
.hero.is-shown .hero__il--05 { transition-delay: .85s; }
.hero.is-shown .hero__il--06 { transition-delay: 1.1s; }
/* 足あとが出始めたら寝ている犬は消える（起きて出かけた）。清書で06がベッド/犬+ボールの2レイヤーになったら犬レイヤーだけ消す */
.hero.is-shown .hero__il--06.is-gone { opacity: 0; transform: translateY(6px); transition-delay: 0s; transition-duration: .7s; }
/* SP配置（ステージ390×600基準・%）＝新カンプ「SP｜TOPデザインカンプ(1).ai」の表紙バランスに合わせて再配置（2026-08-31 みどり指示・テンプレートマッチングで実測） */
.hero__il--03 { left: 10.6%; top: 5.0%; width: 35.63%; } /* 窓＋テーブルの二人（清書3-1）。旧合成03（3-1+3-2+3-3・左10.6/上5.0/幅48.2）を層別に分解＝見た目は同じ（2026-09-11） */
.hero__il--03f { left: 29.35%; top: 5.03%; width: 29.45%; } /* 額縁（清書3-2）＝旧合成と同じ位置 */
.hero__il--03p { left: 2.2%; top: 14.6%; width: 13.4%; } /* 鉢植え＝窓の左手前（みなみ2026-09-10「植物を反対側へ」・比較画像から実測） */
.hero__il--02 { left: 52.0%; top: 0.3%; width: 43.1%; } /* ペンダントライト＋カウンター（コードは画面上端から） */
.hero__il--04 { left: 13.1%; top: 41.8%; width: 42.1%; } /* 丸テーブルの二人 */
.hero__il--05 { left: 63.8%; top: calc(89.2% - 39.3cqw); width: 28.7%; } /* 歩く人。靴の下端を犬のベッド下端に揃える（みなみ2026-09-10「頭1つ分下げる」）＝犬top89.2%＋犬高16.6cqw−人高55.9cqw。ステージ高が端末で変わっても揃う */
.hero__il--06 { left: 8.6%; top: 89.2%; width: 22.6%; } /* 寝ている犬（左下） */
.hero__il--06bed { left: 8.6%; top: 89.2%; width: 22.6%; } /* ベッドだけの層（06と同座標・同サイズ。犬が丘へ移った後に残る） */
.hero.is-shown .hero__il--06bed { transition-delay: 1.1s; }
.hero__copy {
position: absolute; left: 7%; top: 69%; width: 44%; /* 2026-09-13 キャッチ2行・左揃え（v3カンプ準拠）＝catch-sp.png。旧＝1行 left10.3/top70.6/width58（歩く人のカップに当たっていた） */
opacity: 0; transition: opacity 1s ease .9s; /* 上下の罫線は新カンプに無いので削除（2026-08-31） */
}
.hero.is-shown .hero__copy { opacity: 1; }
.hero__catch img { width: 100%; }
.hero__catch { padding: 2% 0 0; }
.hero__frame, .strength__body, .polaroid--pc, .polaroid__peek--pc, .footer__desc, .hero__il--05pc { display: none; } /* PCカンプ（2026-09-10）由来の要素はSPでは出さない＝SPはみなみ承認済みの状態を保つ */
.hero__sub { text-align: left; margin-top: 2%; font-family: var(--font-en); font-size: clamp(7.5px, 2.4vw, 11px); letter-spacing: 0.1em; line-height: 1.6; color: var(--brown-2); white-space: nowrap; } /* 1行（新カンプ）＝どの端末幅でも枠内に収まるよう幅追従（2026-08-31） */
.hero.is-settled .hero__il, .hero.is-settled .hero__copy { transition: none; } /* 出現後はJS「hero recede」のスクロール連動を即時反映 */
/* ---------- S2 about ---------- */
.about {
position: relative; padding: 176px 0 247px; overflow-x: clip; /* 下余白230＝STRENGTHの弧（-90-95px）が食い込む分を確保し、境目に下地が見えないようにする */
background: transparent; /* アーチの外側は塗らない＝固定されたMVがそのまま透ける（2026-08-29 みどり指示。白背景は不採用） */
clip-path: inset(-260px 0 0 0); /* 上だけ開ける＝丘の上の犬がヒーロー側に頭を出せる。左右下は切る */
}
.about::before { /* 上部のアーチ＝「上だけ丸い丘」。犬がこの縁に乗る。セクション下端までベージュが続く（カンプ準拠） */
--arch-r: 85vw; /* 半径＝幅の半分（SP: 幅170vw） */
content: ""; position: absolute; left: 50%; top: 52px; bottom: 0; transform: translateX(-50%);
width: calc(var(--arch-r) * 2);
border-radius: var(--arch-r) var(--arch-r) 0 0;
/* グレイン（ざらつき）は試作→「不吉に見える」で不採用（2026-08-29 みどり判断）。滑らかなグラデのみ */
background: linear-gradient(180deg, #FBF5F4 0%, #F7F1ED calc(var(--arch-r) * 0.5), #F7F1ED 100%); /* カンプ実測：上=#FBF5F4 → 本文帯=#F7F1ED */
pointer-events: none;
}
/* 丘の縁の手描き線（about rim）＝ペンで描かれる演出。線の長さはJSがdasharrayに入れる */
.about__rim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.about__rim path { fill: none; stroke: var(--brown-2); stroke-width: 1.3; stroke-linecap: round; opacity: .75; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1); }
.about__rim.is-drawn path { stroke-dashoffset: 0 !important; }
.is-static .about__rim path { transition: none; }
.about__dog { position: absolute; left: 12.8%; top: -40px; width: 25%; z-index: 2; visibility: hidden; pointer-events: none; } /* 丘の犬（寝る→走る→座る）。位置・幅・状態はJS「hill dog」が制御 */
.about__dog.is-on { visibility: visible; }
.about__dog img { display: none; width: 100%; height: auto; }
.about__dog[data-state="sleep"] img[data-state="sleep"],
.about__dog[data-state="run"] img[data-state="run"],
.about__dog[data-state="sit"] img[data-state="sit"] { display: block; }
.about__dog.is-flip img[data-state="run"] { transform: scaleX(-1); } /* 走る絵は左向き＝右へ進むときは反転 */
.hero__il--06.is-handed { opacity: 0 !important; transition: none !important; } /* 丘側の犬に交代した瞬間、MV側は消す */
.about__inner { position: relative; max-width: var(--w-inner); margin: 0 auto; padding: 0 20px; text-align: center; }
.about__body { text-align: left; font-size: 15px; line-height: 1.8; color: #524C45; letter-spacing: 0.04em; } /* v2実測：15px・行送り27px */
.about__body p + p { margin-top: 0.8em; }
.about__figure { width: 240px; margin: 28px auto 30px; }
.about__inner .btn-wrap { margin-top: 60px; } /* v2実測：ピル→ボタン60px（旧26）。下＝ABOUT下余白+17でボタン→弧の頂点62px */
.about__points { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; width: min(330px, calc(100vw - 40px)); margin-left: calc(50% - min(165px, 50vw - 20px)); } /* v2実測：ピル幅330（inner316より広い）。狭い端末では画面幅-40まで広げる（2026-08-31） */
.check-pill {
display: flex; align-items: center; gap: 0.8em;
background: var(--white); border-radius: 999px; min-height: 42px; padding: 0.55em 1.35em 0.55em 1.45em;
/* nowrapのまま端末幅に収めるため、文字とgap/paddingを幅追従（em）に。390px以上は従来どおり15px（2026-08-31） */
font-family: var(--font-maru); font-weight: 700; font-size: clamp(12.4px, 3.95vw, 15px); letter-spacing: 0.03em; color: var(--brown); white-space: nowrap;
box-shadow: 0 3px 10px rgba(105,92,82,0.10); /* v2実測：高さ42・幅330・文字16px太字・薄い影 */
}
.check-pill__mark { font-size: 1.27em; font-weight: 700; color: var(--brown); line-height: 1; }
.check-pill__text { display: inline; }
.check-pill em { font-style: normal; color: var(--coral); font-weight: 700; } /* 強調＝コーラル#E28072（v2） */
/* ---------- S3 strength ---------- */
.strength {
position: relative; background: var(--pink); color: var(--white); /* overflow-x: clip は外した（2026-09-18）：中の sticky（見出し・カード）と組み合わさると iPhone でカード切り替え時に画面ごと揺れた（みどり実機で ?dbg=noclip だけ揺れが止まる→確定）。横はみ出し（弧130vw等）は .page の clip が切る */
margin-top: -90px; padding: 110px 0 0; /* ABOUTのベージュに弧を重ねる＝隙間なし */
}
.strength::before { /* 上辺の大きな円弧 */
content: ""; position: absolute; left: 50%; top: -95px; transform: translateX(-50%);
width: 130vw; height: 200px; background: var(--pink);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.strength__inner { position: relative; max-width: var(--w-inner); margin: 0 auto; padding: 0 12px; }
.strength__list {
display: block; margin-top: 48px; /* 見出し→カードの余白（30→48・2026-08-29 みどり「もう少し広く」） */
/* カンプ実測：カード直径358px（=画面幅390−左右16px）。inner(316px)より広いので中央基準ではみ出させる */
width: min(358px, calc(100vw - 32px));
margin-left: calc(50% - min(179px, 50vw - 16px));
}
.strength-card {
position: relative; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 40px;
background: url("../assets/img/scallop.svg") no-repeat center / 100% 100%; /* 22山・高低差4.5px（カンプ実測） */
color: var(--brown);
container-type: inline-size; /* 内側はカード幅基準(cqw)で拡縮＝どの端末幅でもカンプと同じ収まり */
transform-origin: 50% 0;
}
.strength-card:last-child { margin-bottom: 0; }
/* ---- SP 縦スタック（2026-08-29 みどりGO → 同日「見出しを見せ続ける」「最後に見出しへ潜り込まない」で改良）----
JSが html.has-stack を付けた時だけ有効。見出し＋カード置き場を1つの「ステージ」として top:72px に固定し、
カード3枚は同じ場所に absolute で重ね、スクロール量に応じて下から滑り込ませる（JS）。
セクションの終わりはステージごと抜けるので、カードが見出しの下に潜る動きは起きない。
?static=1 検品・reduce-motion・PC幅では has-stack が付かず、普通の縦並び */
.has-stack .strength__stage { position: sticky; top: var(--stack-top, 72px); z-index: 1; } /* 止まる位置＝JS layoutStack が --stack-top に入れる（ヘッダー下の残り空間で縦中央）。varが無い時だけ72px */
.strength__runway { display: none; } .has-stack .strength__runway { display: block; height: var(--runway, 900px); } /* 走路（stickyの拘束範囲にpaddingは入らないので実体で確保） */
.has-stack .strength__list { position: relative; aspect-ratio: 1 / 1; }
.has-stack .strength-card { position: absolute; inset: 0 auto auto 0; margin: 0; will-change: transform; }
.has-stack .strength-card:nth-child(2) { z-index: 2; } .has-stack .strength-card:nth-child(3) { z-index: 3; }
.has-stack .strength-card.reveal { opacity: 1; transition: none; transform: none; } /* 出現フェードはスタック側の動きに任せる。transform:none＝2026-09-15 追加：.reveal の translateY(18px) が残り、SPでは3枚目が着地後に18px下へずれて02の上端が見えていた（JSが着地時に style.transform を空にすると .reveal の値が効く。PCは出現判定が先に済むので起きなかった） */
/* スクロール連動アニメーション版（2026-09-18 みどり「携帯で強み123の切り替えのとき画面が揺れる」）。
JS(main.js)が対応ブラウザだけ html.stack-sda を付け、各カードに「動き始め/終わりのスクロール位置」を変数で入れる。
動きはスクロールと同じ描画で進む＝JSの1コマ遅れによる震えが出ない。滑り込み＝translate／下のカードの縮み＝scale（別プロパティなので同じカードで両立） */
@keyframes stk-in { from { translate: 0 var(--stk-from, 100vh); } to { translate: 0 0; } }
@keyframes stk-shrink { from { scale: 1; } to { scale: 0.94; } }
.stack-sda.has-stack .strength-card {
will-change: translate, scale;
animation-name: stk-in, stk-shrink; animation-duration: auto, auto; animation-timing-function: linear, linear; animation-fill-mode: both, both;
animation-timeline: scroll(root), scroll(root);
animation-range: var(--stk-in-a) var(--stk-in-b), var(--stk-sh-a) var(--stk-sh-b);
}
.stack-sda.has-stack .strength-card.stk-first { animation-name: none, stk-shrink; }
.stack-sda.has-stack .strength-card.stk-last { animation-name: stk-in, none; }
/* ---- SP（〜767px）の重なり＝CSSの sticky だけで動かす（2026-09-18 みどり「携帯の実機だと1→2→3と切り替わる時に震える」） ----
旧方式（ステージを固定→カードをJS/アニメーションで下から滑り込ませる）は、端末によってスクロールとカードの動きが1コマずれて震えた。
→ カードそのものを position: sticky にして、スクロールで普通に上がってきたカードが見出しの下で止まり、前のカードに重なる形に。
動きはブラウザのスクロールそのもの＝どのiPhoneでもずれない。JSは寸法（--stack-top/--stk-top-h/--stk-d/--stk-hold）を入れるだけ＋下のカードの0.94倍縮み。
見出しのまとまり .strength__top も sticky。margin-bottom を「間隔(--stk-gap)＋カード直径」にして、リスト側を −直径 で戻す（flexなので相殺・見た目の間隔は48px）
＝ sticky の外枠（margin込み）がカードの下端とそろい、見出しとカードが同じタイミングで一緒に抜ける（見出しの下にカードが潜らない）。
リストの ::after の高さ（--stk-hold）が「3枚目が重なってから止まる」時間。 */
.strength__top { display: flow-root; }
@media (max-width: 767px) {
.has-stack.stack-css .strength__stage { position: static; display: flex; flex-direction: column; }
.has-stack.stack-css .strength__top { position: sticky; top: var(--stack-top, 72px); z-index: 1; margin-bottom: calc(var(--stk-gap, 48px) + var(--stk-d, 358px)); }
.has-stack.stack-css .strength__list { position: relative; aspect-ratio: auto; display: flex; flex-direction: column; gap: 40px; margin-top: calc(-1 * var(--stk-d, 358px)); }
/* カードの間隔は gap・止まる時間は ::after の空き。margin にすると sticky はその分だけ早く外れる（margin込みで枠内に収めるため）＝3枚目がすぐ抜け、1・2枚目が上にずれた */
.has-stack.stack-css .strength__list::after { content: ""; flex: none; height: var(--stk-hold, 240px); margin-top: -40px; }
.has-stack.stack-css .strength-card { position: sticky; inset: auto; top: calc(var(--stack-top, 72px) + var(--stk-top-h, 0px) + var(--stk-gap, 48px)); flex: none; margin: 0; will-change: auto; }
.has-stack.stack-css .strength__runway { display: none; }
.stack-css.stack-sda.has-stack .strength-card { animation-name: none, stk-shrink; }
.stack-css.stack-sda.has-stack .strength-card.stk-last { animation-name: none, none; }
}
@media (min-width: 768px) { .strength__top { display: contents; } } /* PC・タブレット＝従来のグリッド/並びのまま（見出しと帯がステージの直接の子として振る舞う） */
/* 2026-09-13 みどり「ストレングス1・2・3のデザインをPCに合わせて」→ カード内は全幅でPCカンプの組み（数字画像＋下線・コーラルの見出し・横長のイラスト枠）。
中身はすべてカード幅基準(cqw)なので、PCと同じ値をそのまま当てればSP(358px)・タブレットでも同じ比率で縮む。旧SP＝「POINT 1」の文字・茶の見出し・正方形46cqwの絵（SPカンプv2） */
.strength-card__inner {
position: absolute; inset: 0 8cqw;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0;
}
.strength-card__num { display: block; width: 16.5cqw; height: auto; margin: 4.4cqw auto 4cqw; padding: 0 4cqw 1.8cqw; border-bottom: 1px solid #C9BDB4; } /* PCカンプの飾り数字＋下線（全幅） */
/* 数字画像の大きさをそろえる（2026-09-15 みなみ「01・02と03の余白が違う」→みどり「数字のマージン/パディングの取り方が違いそう」）。
原因＝みなみ書き出しのPNGが 01=84×59／02=87×59／03=86×57px と1枚ずつ違うのに、全部を同じ幅(16.5cqw)に合わせていた
→ 横に広い02・03は数字が縮み（01だけ一回り大きい）、高さも変わって下線が01→02→03と1pxずつ上がっていた。
中の「0」は3枚とも高さ56px・画像の下端が「0」の下端＝元の1pxを同じ倍率で出せば数字の大きさがそろう。
倍率＝8.5cqw÷84（01基準）。⚠️ box-sizing:border-box なので width 16.5cqw には左右の padding 4cqw×2 が含まれる＝数字そのものの幅は8.5cqw。
03は画像が2px低いぶん上に足して、数字の下端と下線の位置を01・02とそろえる。
属性セレクタ(0,2,0)なので、ブレークポイントごとの width/padding 上書き（0,1,0）より常に優先される */
.strength-card__num[src$="num-02.png"] { width: calc(8cqw + 8.5cqw * 87 / 84); }
.strength-card__num[src$="num-03.png"] { width: calc(8cqw + 8.5cqw * 86 / 84); padding-top: calc(8.5cqw * 2 / 84); }
.strength-card__point { display: none; font-family: var(--font-maru); font-weight: 700; font-size: 3.35cqw; letter-spacing: 0.14em; color: var(--coral); line-height: 1; margin-bottom: 2.2cqw; } /* v2「POINT 1」＝コーラル#E28072・12px（実測グリフ9px/幅50px） */
.strength-card__title { font-family: var(--font-maru); font-weight: 700; font-size: 5.79cqw; line-height: 1.4; letter-spacing: 0.02em; color: var(--coral); } /* PCカンプ：コーラルの見出し（全幅） */
.strength-card__text { margin-top: 3cqw; font-size: 3.97cqw; line-height: 1.55; letter-spacing: 0.02em; } /* PCカンプ実測の比率（全幅） */
.strength-card__img { width: 58cqw; height: 38cqw; margin-top: 3cqw; display: flex; align-items: center; justify-content: center; } /* PCと同じ横長の枠（全幅） */ /* 背景色なし＝線画を白カードに直置き（2026-08-29 みどり決定・カンプの灰四角はプレースホルダ） */
.strength-card__img img { width: 100%; height: 100%; object-fit: contain; }
/* 「事例で詳しくみる」＝文字＋薄コーラルの小さな丸にコーラルの細シェブロン（2026-08-29 みどり「オシャレに・コーラルは薄め」・UIUX最終）。
行動の色を保ちつつ主役の言葉より前に出ない濃さ。カード全体がタップ可。ホバーで丸がコーラルに、線が白に */
.strength-card { cursor: pointer; }
.strength-card .btn--small {
margin-top: 3cqw; width: auto; max-width: none; min-height: 8cqw; padding: 0 2.6cqw; gap: 3cqw;
border: 0; border-radius: 0; background: none; color: var(--brown);
font-size: 3.88cqw; font-weight: 700; letter-spacing: 0.08em; justify-content: center;
}
.strength-card .btn--small:hover, .strength-card:hover .btn--small { background: none; color: var(--brown); }
.strength-card .btn__arrow {
position: relative; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; overflow: hidden; font-size: 0; flex: none;
background: #F5DAD4; /* コーラルの薄い色（約30%） */ transition: background .25s ease, transform .25s ease;
}
.strength-card .btn__arrow::before, .strength-card .btn__arrow::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,") center / 2.3cqw 3.7cqw no-repeat; transition: opacity .25s ease; transform: none; width: auto; height: auto; }
.strength-card .btn__arrow::after { background-image: url("data:image/svg+xml;utf8,"); opacity: 0; }
.strength-card:hover .btn__arrow { background: var(--coral); transform: translateX(2px); }
.strength-card:hover .btn__arrow::before { opacity: 0; } .strength-card:hover .btn__arrow::after { opacity: 1; }
/* スマホ・タブレット＝「見た目はPC、大きさはスマホ用」（2026-09-13 みどり「携帯の方が見やすい？」→ 組み合わせ案で決定）。
PCから持ってくる＝数字画像＋下線・コーラルの見出し（基本ブロックのまま）。スマホ用に戻す＝本文16px（4.47cqw）・イラストの大きさ（幅46cqw）。
PCの比率（本文3.97cqw・枠58×38cqw）は円551pxが前提で、358pxに縮めると本文14px・絵が小さくなって読みにくかった。
数字画像は「POINT 1」の文字より背が高いので、そのぶん番号まわりの余白と絵の高さで吸収して円の中に収める */
@media (max-width: 1023px) {
.strength-card__num { margin: 4cqw auto 2.6cqw; }
.strength-card__title { font-size: 5.59cqw; }
.strength-card__text { margin-top: 2.6cqw; font-size: 4.47cqw; line-height: 1.625; }
.strength-card__img { width: 46cqw; height: 44cqw; margin-top: 1cqw; }
.strength-card .btn--small { margin-top: 2cqw; min-height: 0; padding: 0; font-size: 3.6cqw; }
}
.strength__wave { display: block; width: 100%; line-height: 0; margin-top: 60px; transform: translateY(1px); }
.strength__wave svg { width: 100%; height: 50px; display: block; background: var(--white); } /* 波形＝カンプ実測（左が高く右が低い・高低差48px）。下はページ色のアイボリー＝白い隙間を作らない */
/* ---------- S4 clients ---------- */
.clients { background: var(--white); padding: 92px 0 60px; } /* v2＝白 */ /* 背景はページ色（カンプ＝透明）。白にすると波の下に「白い隙間」が出る */
.clients__inner { max-width: 371px; margin: 0 auto; padding: 0 11px; } /* 波線の幅349px（カンプ実測 x19〜368） */
.clients__title {
position: relative; display: flex; align-items: flex-end; gap: 14px;
font-family: var(--font-maru); font-weight: 700; font-size: 22px; letter-spacing: 0.12em; color: var(--brown); /* カンプ実測≒22px（2026-08-29） */
padding-bottom: 8px; line-height: 1.2;
background: url("data:image/svg+xml;utf8,") repeat-x left bottom; /* 波線＝周期12px・#C7BBB5・約1.5px（カンプ実測） */
}
.clients__title-text { font-family: var(--font-en); font-weight: 400; position: relative; }
/* 実績企業の右肩「ちょんちょん」は廃止（装飾は足さない方針・2026-08-29） */
.clients__deco { position: relative; display: block; width: 110px; margin-bottom: 2px; }
.clients__flowers { width: 100%; }
.clients__butterfly { position: absolute; right: -39px; top: -15px; width: 34px; } /* 2026-09-13 みどり「ちょうちょ少し大きく」2回目＝28→34px（絵の左端・上端が動かないよう right/top 補正） */
.marquee { overflow: hidden; padding: 38px 0 36px; /* 上の波線→企業名→下の波線＝101px（カンプ実測） */
background: url("data:image/svg+xml;utf8,") repeat-x left bottom; }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; }
.marquee__list li {
white-space: nowrap; font-size: 15px; letter-spacing: 0.12em; color: var(--brown);
padding: 0 26px; position: relative;
}
.marquee__list li::after { content: "|"; position: absolute; right: -4px; color: var(--line); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.clients__note { margin-top: 8px; font-size: 10px; color: var(--text-light); text-align: right; letter-spacing: 0.1em; }
/* ---------- S5 works ---------- */
.works {
position: relative; padding: 48px 0 80px; overflow-x: clip; /* 上は格子が端まで来るので詰める */
background: var(--white); /* v2＝白地に格子 */
}
.works::before, .service::before { /* 格子＝カンプ実測：20pxの濃い格子＋その中央に10pxの細い薄線（交互）。左右8pxの内側・上下は端まで */
content: ""; position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; pointer-events: none;
background-image:
linear-gradient(rgba(220,185,174,0.42) 1px, transparent 1px),
linear-gradient(90deg, rgba(220,185,174,0.42) 1px, transparent 1px),
linear-gradient(rgba(220,185,174,0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(220,185,174,0.12) 1px, transparent 1px);
background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px;
/* 横線(1・3枚目)だけ --gy で縦にずらす。縦線(2・4枚目)はy位置が効かないので固定。
WORKSとSERVICEは別要素なので格子が境目で位相リセットする→JS「grid phase」が --gy を入れて繋ぐ（2026-09-13） */
background-position: 0 var(--gy, 0px), 0 0, 0 calc(10px + var(--gy, 0px)), 10px 0;
}
.works__clip { position: absolute; right: 24px; top: 0; width: 54px; z-index: 2; } /* 2026-09-16 みるくちゃん「スマホでクリップが少し見切れる」：旧 top:-4px＝セクションの上に4pxはみ出していた。.works の overflow-x:clip が iOS Safari の一部バージョンでは縦にも効き、はみ出した上端が切れる→はみ出さない位置に（見た目の差4px） */ /* v2カンプ(4x)切り出しPNG・実測位置（2026-08-29）。みなみのベクター書き出しで差し替え予定 */
.works__inner { max-width: var(--w-inner); margin: 0 auto; padding: 0 12px; }
.works__grid { display: flex; flex-direction: column; gap: 34px; margin-top: 46px; }
.polaroid { position: relative; width: 270px; margin: 0 auto; }
.polaroid--1 { transform: rotate(-1deg); }
.polaroid--2 { transform: rotate(1.2deg); }
.polaroid--3 { transform: rotate(-0.6deg); }
.polaroid--4 { transform: rotate(2.6deg); }
.polaroid__link { position: relative; z-index: 2; /* 裏から出る犬(--bl)より前 */
position: relative; display: block; background: var(--white); padding: 14px 14px 16px;
transition: transform .3s ease;
}
/* 手描きのペン線（カンプ準拠）＝インラインSVGの曲線パス（.polaroid__frame）。
4辺それぞれがゆるく弧を描き、角で出会わない。preserveAspectRatio=none でカードに伸縮、線幅は非スケール＝どの端末でも滑らか */
.polaroid__frame { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.polaroid__frame path { fill: none; stroke: var(--brown); stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
/* カードごとに向きを変えて、同じ線に見せない */
.polaroid--2 .polaroid__frame { transform: scaleX(-1); }
.polaroid--3 .polaroid__frame { transform: scaleY(-1); }
.polaroid--4 .polaroid__frame { transform: scale(-1, -1); }
.polaroid__link:hover { transform: translateY(-6px); }
.polaroid__img { aspect-ratio: 4 / 3.1; background: var(--ph); border-radius: 12px; overflow: hidden; }
.polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
.tag {
display: inline-block; margin-top: 14px; padding: 5px 16px; border-radius: 999px;
background: #F5ECE8; color: var(--brown); font-size: 11px; letter-spacing: 0.1em; /* 薄ピンク（カンプ準拠） */
}
.polaroid__peek { position: absolute; z-index: 3; pointer-events: none; } /* カード(z2)より前。裏から出る3枚目(--bl)だけz1 */
.polaroid__peek--tl { left: -14px; top: -70px; width: 96px; } /* 2026-09-15 みなみ「WORKSのわんこをもう少し大きく」＝64→96px（1.5倍）。13.pngは絵の実体が幅の51%しかなく、走る人(77%)・スケボー(84%)と並ぶと見た目が約6割だった。足元（絵の下端＝カードの上端+7px）と絵の左端は据え置きで top/left を補正 */
.polaroid__peek--r { right: -46px; top: 40%; width: 72px; }
.polaroid__peek--bl { left: -70px; bottom: -7px; width: 89px; z-index: 1; } /* カードの裏側の層（2026-08-29 みどり指示「後ろから出てくる」） */
.polaroid__peek--tr { right: -16px; top: -48px; width: 66px; }
.polaroid__peek--br { right: -30px; bottom: -14px; width: 78px; } /* PC＝2枚目の右下からスケボー（PCカンプ2026-09-10） */
/* 覗きイラストの演出（2026-08-29）：カードが現れた0.45秒後に、写真の縁からひょこっと顔を出す（一回きり・少し行き過ぎて戻るバネ）。ホバーで首をかしげる */
.polaroid__peek { opacity: 0; transition: transform .75s cubic-bezier(.34,1.56,.64,1) .45s, opacity .35s ease .45s; transform-origin: 50% 100%; }
.polaroid__peek--tl { transform: translateY(40px) scale(.8); }
.polaroid__peek--r { transform: translateX(-48px) scale(.8); transform-origin: 0 50%; }
.polaroid__peek--bl { transform: translateX(70px); transform-origin: 100% 50%; } /* 写真の裏（右側）から左へ走り出る */
.polaroid__peek--tr { transform: translateY(44px) scale(.8); }
.polaroid__peek--br { transform: translateY(-40px) scale(.8); transform-origin: 50% 0; }
.polaroid.is-in .polaroid__peek { opacity: 1; transform: none; }
.polaroid.is-in:hover .polaroid__peek { animation: peekTilt .7s ease; }
@keyframes peekTilt { 0%, 100% { transform: none; } 30% { transform: rotate(-6deg) translateY(-4px); } 65% { transform: rotate(4deg); } }
.is-static .polaroid__peek { transition: none; }
@media (prefers-reduced-motion: reduce) { .polaroid__peek { transition: none; opacity: 1; transform: none; } }
.ig-pill {
position: relative; z-index: 2; /* 格子(.works::before)より上＝中塗りの白が見える（2026-08-29） */
display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 264px; min-height: 60px;
background: var(--white); border: 1px solid var(--brown); border-radius: 8px; padding: 4px 18px 4px 12px;
box-shadow: 3px 4px 0 var(--brown); /* v2＝白塗り＋茶枠＋茶のずらし影（右3・下4） */
font-family: var(--font-maru); font-size: 14px; letter-spacing: 0.06em; color: var(--brown);
}
.ig-pill__icon { width: 40px; height: 40px; object-fit: contain; }
/* SPはアイコンを右に（2026-09-13 みどり指示）。HTMLの順番は変えない＝PCは左のまま。
真下の「もっと実績をみる」と縦の線をそろえる：文字の頭＝左26px（枠1pxぶん引いて25）／アイコンの中心＝矢印の中心（右31px）＝右padding10＋枠1＋半径20 */
@media (max-width: 767px) {
.ig-pill { flex-direction: row-reverse; justify-content: space-between; padding: 4px 10px 4px 25px; }
}
/* ---------- S6 service ---------- */
.service { position: relative; padding: 40px 12px 0; background: var(--white); overflow-x: clip; } /* 地＝WORKSと同じ（格子は .works::before と共有） */
.service__panel {
position: relative; z-index: 1; /* 格子（::before）の上に乗せる */
max-width: var(--w-inner); margin: 0 auto; background: var(--beige); border-radius: 22px 22px 0 0;
padding: 44px 22px calc(var(--badge-d) / 2 + 56px); /* 下余白＝CONTACTの丸の半径（食い込む分）＋注記との間56px */
}
.flow { position: relative; margin-top: 30px; padding-left: 2px; }
/* 縦の細い茶線＝丸から次の丸まで区間ごとに引く（最後の「納品」で線が止まる＝v2カンプ準拠・2026-08-29） */
.flow__step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 1px; background: var(--brown); }
.flow__step { position: relative; display: flex; gap: 16px; padding-bottom: 34px; }
.flow__step:last-child { padding-bottom: 0; }
.flow__icon {
position: relative; z-index: 1; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
background: var(--white); border: 1px solid var(--brown); display: flex; align-items: center; justify-content: center; /* 白丸＋細い茶の輪郭（カンプ準拠） */
}
/* アイコンの大きさ＝PCカンプ実測に合わせる（2026-09-13）。清書PNGは1000×1000の中で絵の占める割合がバラバラ（17=62%・18=38%・19=57%・20=56%）＝一律%だと絵の実寸が揃わないので、ステップごとに指定する */
.flow__icon img { width: 90%; max-width: none; flex: none; } /* 18（耳）は円より大きい107%＝グローバルの img{max-width:100%} を外す。絵の実体は円の内側に収まる */
.flow__step:nth-child(2) .flow__icon img { width: 107%; }
.flow__step:nth-child(3) .flow__icon img { width: 97%; }
.flow__step:nth-child(4) .flow__icon img { width: 88%; }
.flow__body { flex: 1; font-size: 12.5px; line-height: 1.9; padding-top: 4px; }
.flow__title { font-family: var(--font-maru); font-weight: 700; font-size: 17px; letter-spacing: 0.08em; color: var(--brown); margin-bottom: 4px; }
.flow__note { /* 2026-09-13 みどり「PCの色と揃えて」＝SPも茶ベタ→PCカンプの薄い箱＋コーラルの縦線（旧＝SPカンプv2の茶ベタ＋白文字＋「！」） */
position: relative; margin-top: 10px; background: #F8F0EB; color: var(--text-body, #524C45); border-radius: 4px;
padding: 10px 12px 10px 24px; font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; /* 12px＝可読性の下限（旧11px） */
}
.flow__note::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 3px; background: var(--coral); } /* 縦線＝PC(左15px・4px幅)をSPの箱に比例で縮小 */
/* ---------- S7 contact ---------- */
.contact { position: relative; background: var(--brown); color: var(--white); padding: calc(var(--badge-d) / 2 + 32px) 20px 56px; margin-top: 0; text-align: center; } /* SERVICEのベージュ面に直結。丸が境目にまたがる（カンプ準拠） */
.contact__badge {
position: absolute; left: 50%; top: calc(var(--badge-d) / -2); transform: translateX(-50%);
width: var(--badge-d); height: var(--badge-d); border-radius: 50%; /* SP120／タブレット136／PC144〜168px */
background: var(--brown); border: 1.5px solid var(--white);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--badge-d) * 0.05);
}
.contact__badge::before { /* 内側の白い円（カンプ準拠の二重線） */
content: ""; position: absolute; inset: calc(var(--badge-d) * 0.045); border-radius: 50%; border: 1px solid rgba(255,255,255,0.9); pointer-events: none;
}
.contact__badge-en { font-family: var(--font-en); font-size: var(--fs-badge); letter-spacing: 0.06em; padding-left: 0.06em; line-height: 1; } /* 2026-09-15 みなみ「CONTACTが円に対して少しきつめ」＝字間0.12→0.06em（円の内側の線との間に余裕を作る） */ /* padding-left＝末尾の字間ぶんを左にも足して光学的に中央へ */
.contact__badge-il { position: relative; width: 56%; aspect-ratio: 90 / 74; } /* 絵が主役＝直径の56% */
.contact__badge-il img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
/* 2026-09-09 清書21-23は白抜きで受領＝白線化filterは撤去 */
opacity: 0; transition: opacity .5s ease;
}
.contact__badge-il img.is-active { opacity: 1; }
.contact__inner { max-width: var(--w-inner); margin: 0 auto; }
.contact__lead { font-family: var(--font-maru); font-weight: 500; font-size: 13.5px; line-height: 2.1; letter-spacing: 0.08em; margin-bottom: 32px; }
/* ---------- footer ---------- */
.footer { background: var(--white); padding: 40px 20px 30px; text-align: center; }
.footer__logo { display: inline-flex; align-items: center; gap: 12px; }
.footer__icon { width: 52px; height: 52px; object-fit: contain; }
.footer__logo .logo-img { width: 86px; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; font-family: var(--font-en); font-size: clamp(10px, 3.1vw, 11px); letter-spacing: 0.08em; color: var(--brown); } /* 320px端末でも収まるよう折返し＋幅追従（2026-08-31） */
.footer__nav a + a::before { content: "|"; margin-right: 8px; color: var(--line); }
.footer__sns { display: flex; justify-content: center; gap: 22px; margin-top: 24px; }
.footer__sns a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--brown); }
.footer__sns img { width: 32px; height: 32px; object-fit: contain; padding: 6px; background: radial-gradient(circle closest-side, transparent calc(100% - 1.2px), var(--brown) calc(100% - 1px), var(--brown) 100%, transparent 100%); } /* アイコン＝カンプPDF（PC_TOP.pdf）のベクターをSVG書き出し（2026-09-13・旧＝みなみ書き出しPNG51px＝縮小でにじみInstagramの角が四角っぽくなった）。丸枠は背景で描く＝imgにborder-radiusを付けると絵そのものが円形に切り抜かれて角が欠ける（2026-09-13） */
.footer__sns span { font-size: 9px; letter-spacing: 0.05em; }
.footer__head, .footer__ja { display: none; } /* 列の小見出し・日本語はPC(1024px〜)だけ */
.footer__copy { margin-top: 30px; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.15em; color: var(--text-light); }
/* ---------- page / about dog（足あと演出は2026-08-29廃止） ---------- */
.page { position: relative; overflow-x: clip; } /* 横はみ出し（円・弧・足あと・はみ出す犬）を画面幅で切る。縦は切らない */
/* ---- ABOUT→STRENGTH スタッキング（2026-08-29 みどり案）----
MV→ABOUTと同じ文法をもう1段。ABOUTは画面より背が高いので「上端で止める」と下半分が見られない
→ 下端が画面の底に着いた位置で止める（top = 画面高 − ABOUT高。JS「about pin」が --about-pin に入れる）。
その上にSTRENGTHのピンクの弧がせり上がる。以降のセクションは z-index 2 でABOUTの上を通る（ABOUTは止まったまま隠れる） */
.page > section.about { position: sticky; top: var(--about-pin, 0px); z-index: 1; }
.page > section:not(.hero):not(.about) { z-index: 2; }
/* ---------- 浮きCONTACT（B案・2026-08-29 みどり決定）：白丸＋本人の手描き紙飛行機。
振る舞い（JS「float contact」）：MVでは出ない→ABOUTが画面半分まで上がったら出る（初回3秒だけ「お問い合わせ」つきピル→丸に縮む）
→CONTACTセクションが見えている間は消える→タップで紙飛行機が飛んでからCONTACTへ。static検品・モーダル中は非表示 ---------- */
.float-contact {
position: fixed; right: 12px; bottom: 22px; z-index: 90;
display: flex; align-items: center; height: 56px; max-width: 56px; padding: 0; overflow: hidden;
border-radius: 999px; background: var(--white); border: 1.2px solid var(--brown); color: var(--brown);
box-shadow: 0 4px 14px rgba(105,92,82,.18);
opacity: 0; transform: translateY(12px); pointer-events: none;
transition: opacity .35s ease, transform .35s ease, max-width .45s cubic-bezier(.2,.7,.2,1), padding .45s ease;
}
.float-contact.is-on { opacity: 1; transform: none; pointer-events: auto; }
.float-contact.is-wide { max-width: 240px; padding-right: 18px; }
.float-contact__ic { flex: none; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.float-contact__ic img { width: 36px; height: auto; transition: transform .5s cubic-bezier(.3,0,.2,1), opacity .4s ease; }
.float-contact__tx { font-family: var(--font-maru); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; opacity: 0; transition: opacity .3s ease .15s; }
.float-contact.is-wide .float-contact__tx { opacity: 1; }
.float-contact:hover .float-contact__ic img { transform: translate(2px,-2px) rotate(-6deg); }
.float-contact.is-fly .float-contact__ic img { transform: translate(34px,-34px) rotate(-22deg); opacity: 0; }
body.is-modal .float-contact, .is-static .float-contact { display: none; }
/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open { display: flex; }
.modal__bg { position: absolute; inset: 0; background: rgba(225,185,169,0.92); } /* カンプ＝ピンク地の上に浮く */
.modal__panel {
position: relative; width: 100%; max-width: 340px; max-height: 90vh; overflow: auto;
background: var(--white); border-radius: 22px; padding: 44px 24px 26px; text-align: center; color: var(--brown);
animation: pop .3s ease;
}
@keyframes pop { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__label { /* 上端中央から垂れる濃茶タブ・白抜きサンセリフ（カンプ準拠） */
position: absolute; left: 50%; top: 0; transform: translateX(-50%);
background: #685C54; color: var(--white); padding: 5px 30px 6px; border-radius: 0 0 7px 7px;
font-family: var(--font-maru); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; line-height: 1.3;
}
.modal__client { font-size: 13px; letter-spacing: 0.12em; display: inline-block; padding: 0 22px 3px; border-bottom: 1px solid #D9D2CC; margin-bottom: 8px; } /* 下線は文字より長く */
.modal__title { font-family: var(--font-maru); font-weight: 500; font-size: 13.5px; letter-spacing: 0.06em; margin-bottom: 18px; }
.modal__img { aspect-ratio: 372 / 212; background: var(--ph); border-radius: 0; margin: 0 -24px 20px; overflow: hidden; } /* v2＝パネル端まで */
.modal__img img { width: 100%; height: 100%; object-fit: cover; }
.modal__text { text-align: left; font-size: 13px; line-height: 1.85; }
.modal__close { display: block; margin: 26px auto 0; font-family: var(--font-ja); font-weight: 500; font-size: 15px; letter-spacing: 0.06em; }
.modal__close:hover { opacity: .6; }
/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ==========================================================
PC（768px〜）拡張。SPを崩さず widen する
========================================================== */
@media (min-width: 768px) {
body { font-size: 15px; }
:root { --w-inner: 720px; }
.header { padding: 22px 40px; }
.header__nav { display: block; }
.header__nav ul { display: flex; gap: 34px; }
.header__nav a { font-family: var(--font-en); font-size: 14px; letter-spacing: 0.22em; color: var(--brown); position: relative; }
.header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--brown); transform: scaleX(0); transition: transform .3s; transform-origin: left; }
.header__nav a:hover::after { transform: scaleX(1); }
.header__menu { display: none; }
.header__logo .logo-img { width: 72px; }
.sec-title__en { font-size: 40px; }
/* ちょんちょんは em 指定に統一（2026-09-13）＝PC用のpx上書きは廃止 */
/* MVの歩く人＝白枠版に入れ替え（カウンターに重なるため） */
.hero__il--05sp { display: none; }
.hero__il--05pc { display: block; }
/* STRENGTHカード＝飾り数字（カンプ）に。POINTラベルは隠す */
/* STRENGTHカードの数字・見出し・絵は 2026-09-13 から全幅共通（基本ブロック）＝タブレットの上書きは不要 */
.footer__icon { width: 64px; height: 64px; }
.footer__logo .logo-img { width: 104px; }
/* PC配置（ステージ1280×800基準・%）。ステージは最大1440pxで中央寄せ。PCは画面高に合わせない（ステージの高さ＝ヒーローの高さ） */
.hero__stage { aspect-ratio: 1280 / 800; width: min(100%, 1440px); min-height: 0; }
.hero__il--03 { left: 10.2%; top: 12.5%; width: 26.6%; }
.hero__il--03p { left: 3.6%; top: 27%; width: 7%; } /* 鉢植え＝窓の左（PCカンプ2026-09-10・仮） */
.hero__il--02 { left: 71.9%; top: 10%; width: 17.2%; } /* 上10%＝ヘッダー帯を避けてコードを吊る */
.hero__il--04 { left: 13.3%; top: 54%; width: 21%; } /* 清書04は全身（縦長 0.94）＝ラフ(1.40)の座標だと下が切れる→幅22%・上50%で下端をラフと同じ約700pxに（2026-09-09） */
.hero__il--05 { left: 60.9%; top: 55%; width: 9.2%; }
.hero__il--06 { left: 77.3%; top: 71.3%; width: 14.8%; }
.hero__il--06bed { left: 77.3%; top: 71.3%; width: 14.8%; }
.hero__copy { left: 39%; top: 33%; width: 24%; padding: 1.6% 0; }
.hero__sub { text-align: center; font-size: clamp(10px, 1vw, 13px); letter-spacing: 0.18em; margin-top: 10px; } /* 768px〜はキャッチ1行＋英字中央（2026-09-12指示）。SPは2行キャッチに合わせて左揃え */
.about { padding: 220px 0 280px; } /* 下余白＝STRENGTHの弧（-90-120px）が食い込む分＋ボタンとの間60px */
.about::before { --arch-r: 75vw; top: 64px; }
.about__inner { max-width: 820px; display: grid; grid-template-columns: 1fr 300px; column-gap: 48px; align-items: start; }
.about__inner .sec-title, .about__inner .bracket-title { grid-column: 1 / -1; }
.about__body { font-size: 16px; grid-column: 1; }
.about__points { width: auto; margin-left: 0; }
.check-pill { font-size: 15px; }
.about__figure { grid-column: 2; grid-row: 3 / span 2; width: 100%; margin: 0; }
.about__points { grid-column: 1; max-width: 360px; }
.about__inner .btn-wrap { grid-column: 1 / -1; }
.strength { padding-top: 130px; }
.strength::before { top: -120px; height: 260px; }
.strength__inner { max-width: var(--w-pc); padding: 0 40px; }
.strength__list { display: flex; flex-direction: row; gap: 24px; margin-top: 40px; align-items: stretch; width: auto; margin-left: 0; }
.strength-card { flex: 1; margin-bottom: 0; } /* PC＝スタックなし・3枚横並び。1枚≒344px＝SPとほぼ同径（has-stackはSP幅でしか付かない） */
.strength__wave svg { height: 90px; }
.clients { padding: 60px 0 80px; }
.clients__inner { max-width: var(--w-pc); padding: 0 40px; }
.clients__title { font-size: 26px; }
.clients__deco { width: 150px; }
.clients__butterfly { width: 58px; right: -62px; top: -18px; } /* 2026-09-13 みどり「ちょうちょだけほんの少し大きく」＝36→46px→同日「少し大きく」2回目で58px。right/top は蝶の“絵の位置”が動かないように再計算（素材12.pngは左16%・上16.8%が透明余白）。カンプ実寸は78pxだが、そこまで大きくすると花との釣り合いが変わるので不採用 */
.marquee__list li { font-size: 15px; padding: 0 36px; }
/* 方眼＝みなみ書き出し（WORKS_マス目背景単体.png・2x）の実測に合わせる：濃線#F0DED7と薄線#F4EEE8が20px交互＝各40pxピッチ・線幅2px。
SPは20pxピッチのまま（SPカンプv2実測・みどり確認済み） */
.works::before, .service::before {
background-image:
linear-gradient(#F0DED7 2px, transparent 2px),
linear-gradient(90deg, #F0DED7 2px, transparent 2px),
linear-gradient(#F4EEE8 2px, transparent 2px),
linear-gradient(90deg, #F4EEE8 2px, transparent 2px);
background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px;
background-position: 0 var(--gy, 0px), 0 0, 0 calc(20px + var(--gy, 0px)), 20px 0;
}
.works { padding: 90px 0 110px; }
.works__clip { right: 5%; top: 0; width: 66px; } /* はみ出さない（SPと同じ理由・Mac Safariも同系） */
.works::before, .service::before { left: 16px; right: 16px; } /* 左右の食い込みはWORKSとSERVICEで揃える＝揃えないと境目で格子の端が8px段差になる（2026-09-13） */
.works__inner { max-width: var(--w-pc); padding: 0 40px; }
.works__grid { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 60px 70px; margin-top: 60px; }
.polaroid { width: 380px; margin: 0; }
.btn-wrap { flex-direction: row; justify-content: center; gap: 24px; margin-top: 60px; }
/* 2026-09-13 みどり「同じボタンの長さの方がいい？」→ カンプ実測でも2つは同寸（IGピル267.5×62.5 / ボタン263.5×60・間隔136.5px）。
ボタンを340→264px＝ピルと同じにし、間はカンプに合わせて広げる（狭い画面では詰まるのでclamp） */
.works .btn { max-width: 264px; }
.works .btn-wrap { gap: clamp(24px, 2.8vw, 40px); } /* カンプ実測は136pxだったが 2026-09-13 みどり「ボタン詰めて」→1440時40pxに */
/* Instagramピルの文字＝隣の「もっと実績をみる」と同じ大きさ・太さに（2026-09-13 みどり「もう少し大きく・太く？」）。
カンプでも2つのラベルは同寸・同じ太さで並んでいる。SP(14px/400)はSPカンプ準拠なので据え置き */
.ig-pill { font-size: var(--fs-btn); font-weight: 700; }
/* 「公開中」右上のちょんちょん＝カンプにはあるが 2026-09-13 みどり「なしにしちゃおう」で不採用。
復活させるなら：.ig-pill::after に deco-brown.png を background（幅7.5%・left86.9%・top22%・aspect-ratio 51/47）＋ transform: scaleX(-1)（カンプは右下がり） */
.service { padding: 60px 40px 0; }
.service__panel { max-width: var(--w-pc); padding: 64px 60px 150px; border-radius: 28px 28px 0 0; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 0; }
.flow__step:not(:last-child)::before { left: calc(50% + 40px); right: calc(-50% + 8px); top: 36px; bottom: auto; height: 1px; width: auto; } /* 横線＝丸の右端から次の丸の左端まで（gap28px込み） */
.flow__step { flex-direction: column; align-items: center; text-align: center; padding-bottom: 0; }
.flow__icon { width: 72px; height: 72px; }
.flow__body { font-size: 13px; }
.flow__note { text-align: left; }
:root { --badge-d: 136px; --fs-badge: 13px; }
.service__panel { padding-bottom: calc(var(--badge-d) / 2 + 56px); }
.contact { padding: calc(var(--badge-d) / 2 + 32px) 40px 56px; margin-top: 0; }
.contact__inner { max-width: 560px; }
.contact__lead { font-size: 16px; margin-bottom: 32px; }
.contact .btn { max-width: 264px; margin: 0 auto; } /* サイト標準のボタン幅（SPと同じ）。380pxは丸136pxに対して横長すぎた */
.footer { padding: 60px 40px 36px; }
.footer__nav { gap: 14px; font-size: 12px; letter-spacing: 0.2em; }
.footer__nav a + a::before { margin-right: 14px; }
.footer__sns { gap: 36px; }
}
/* ==========================================================
PC＝みなみのPC版TOPカンプ（PC_TOP.pdf・2026-09-10受領・案1 額縁）を反映（2026-09-11）
採寸はカンプ1440px＝1:1。SPのルールは触らず、ここで上書きする
========================================================== */
@media (min-width: 768px) {
/* ヘッダー＝高さ100の白帯（MVは額縁の下から始まる）。ロゴ113px・ナビ17px */
.header { height: 100px; padding: 0 clamp(40px, 8.3vw, 120px); } /* 背景は透過のまま（MV上部の白帯100pxが下地になる。スクロール後は絵の上に軽く乗る＝SPと同じ思想） */
.header__logo .logo-img { width: 112px; }
.header__nav ul { gap: 48px; }
.header__nav a { font-size: 17px; letter-spacing: 0.12em; }
/* MV＝白地＋ベージュの額縁（外帯15px・内側に4pxの線）。ステージは額縁の内側に収める */
.hero { background: var(--white); min-height: 0; padding: 100px 0 0; align-items: flex-start; }
.hero__frame { display: block; position: absolute; left: 0; right: 0; top: 100px; bottom: 0; z-index: 3; pointer-events: none; border: 15px solid var(--beige-btn); }
.hero__frame::after { content: ""; position: absolute; inset: 8px; border: 4px solid var(--beige-btn); }
/* 鉢植え＝窓の左手前（PCカンプ実測：x 85-195 / y 315-575 of 1440×900）※ステージ1280×800基準の% */
.hero__il--03p { left: 6.2%; top: 24.1%; width: 7.8%; }
.hero__il--03 { left: 13.5%; top: 11.6%; width: 20.5%; }
.hero__il--03f { left: 35.9%; top: 13.3%; width: 14.9%; }
.hero__il--04 { left: 38.6%; top: 30.1%; width: 22%; } /* 中央テーブルの二人。カンプ実測は left40.4/top33.2/width18.5 だが、みどり指示で段階的に拡大（9/13：18.5→20.5→**22%**）。さらに同日「もう少し下」で top 28.4→**30.1%**（約12px下げ）。**中心（ステージ1120×700基準で x556 / y331）を固定したまま拡大**＝見た目の位置は変えずに大きさだけ変わる。キャッチをカンプ位置に戻して下に余白ができたぶんを使った＝下端463・キャッチ上端490で間隔27px（カンプは31px）。これ以上はキャッチに当たる＝限界は約23.5% */
.hero__il--02 { left: 65.8%; top: -5.1%; width: 21.7%; } /* コードの上端は額縁の外（カンプどおり上で切れる） */
.hero__il--05 { left: 68.8%; top: 41.2%; width: 15.6%; } /* 歩く人＝みなみPCカンプの位置。2026-09-12「香りがカウンターと被る」→一度 top50.4%/幅14.2% まで下げたが「下すぎ・みなみのデザインに従って」で撤回。代わりに香りの3点へ頭と同じ白フチを入れて解決（mv/05w.png・上に16px余白を足したので top は 36.7→35.8% に補正＝図の見た目位置はカンプのまま） */
.hero__il--06 { left: 12.5%; top: 67.2%; width: 14.1%; }
.hero__il--06bed { left: 12.5%; top: 67.2%; width: 14.1%; }
.hero__copy { left: 32.1%; top: 69.1%; width: 34.9%; padding: 0; } /* カンプ位置。2026-09-13 に一度「20px上へ」としたが同日「元の位置に戻す」で撤回＝中央テーブルを大きくする余白を確保するため */
.hero__sub { font-size: clamp(11px, 1.05vw, 15px); letter-spacing: 0.16em; margin-top: 14px; }
/* ABOUT＝左に人物イラスト（440px）・右に本文＋チェック3行＋ボタン（カンプ：図 x265-695／文 x750-1180） */
.about { margin-top: -140px; } /* アーチの頂点を額縁の下端に重ねる（カンプ：額縁内でアーチが始まる） */
.about__inner { max-width: 960px; grid-template-columns: 430px 1fr; column-gap: 56px; }
.about__inner .bracket-title { font-size: 31px; padding: 0; margin-bottom: 40px; max-width: none; white-space: nowrap; }
.about__inner .bracket-title::before, .about__inner .bracket-title::after { display: none; }
.about__inner .bracket-title br { display: none; }
.about__figure { grid-column: 1; grid-row: 3 / span 3; width: 100%; margin: 10px 0 0; }
.about__body { grid-column: 2; }
.about__points { grid-column: 2; max-width: 430px; }
.about__inner .btn-wrap { grid-column: 2; margin-top: 44px; }
/* WORKS＝3列×2行（カード幅315・列間40・行間60）。PC専用の5・6枚目と覗きを出す */
.works__inner { max-width: 1120px; }
.works__grid { gap: 64px 40px; margin-top: 64px; }
.polaroid { width: 315px; }
.polaroid--pc { display: block; }
.polaroid__peek--pc { display: block; }
.polaroid__peek--sp { display: none; }
.polaroid--5 { transform: rotate(0.8deg); }
.polaroid--6 { transform: rotate(-1.4deg); }
.polaroid--5 .polaroid__frame { transform: scaleX(-1); }
.polaroid--6 .polaroid__frame { transform: scaleY(-1); }
.polaroid__peek--tl { left: -21px; top: -94px; width: 126px; } /* 84→126px（1.5倍・2026-09-15 みなみ）。足元と左端は据え置き */
.polaroid__peek--br { right: -40px; bottom: -22px; width: 100px; }
.polaroid__peek--bl { left: -84px; bottom: -10px; width: 115px; } /* 2026-09-13 みどり「WORKSの犬を一回り大きく」＝SP74→89・PC96→115（1.2倍）。left/bottomも1.2倍＝写真の裏から出ている割合は同じ */
.polaroid__peek--r { right: -80px; top: 44%; width: 92px; }
/* 注意書き＝PCカンプ（2026-09-10みなみ）で茶ベタ→薄い箱＋コーラルの縦線に変更（2026-09-13からSPも同じ作り）。
実測：地#F8F0EB・縦線#E18071を左から15pxの位置に4px幅で箱の高さいっぱい・「！」なし・文字16px */
.flow__note { position: relative; text-align: left; background: #F8F0EB; color: var(--text-body, #524C45); border-radius: 4px; padding: 15px 20px 15px 33px; margin: 12px -6px 0; font-size: 16px; line-height: 1.5; letter-spacing: 0.05em; } /* 箱は本文より6px外に出る（カンプ実測：本文左299・箱左293） */
.flow__note::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 4px; background: var(--coral); }
}
/* 768〜1099px（タブレット・小さいノート）＝PCカンプの組みは入らないので、SPの構造を広げたままにする（2026-09-11） */
@media (min-width: 768px) and (max-width: 1023px) {
.hero { padding-top: 80px; } /* ヘッダー実測76px＋余白＝milkロゴ・ナビとイラストを重ねない（2026-09-13 みどり指示。旧0＝ロゴが窓、ナビが額縁・ランプに乗っていた） */
.hero__frame { display: none; } /* 額縁は1100px以上のカンプ組みだけ */
.header { height: auto; padding: 22px 40px; }
.about { margin-top: 0; }
.about__inner { max-width: 820px; grid-template-columns: 1fr 300px; column-gap: 48px; }
.about__figure { grid-column: 2; grid-row: 3 / span 2; margin: 0; }
.about__body, .about__points, .about__inner .btn-wrap { grid-column: 1; }
.about__inner .bracket-title { white-space: normal; font-size: 22px; }
.about__inner .bracket-title br { display: block; }
/* ===== iPad幅（768〜1023px）の最終調整（2026-09-17 みどり「iPadぐらいのサイズの見え方が微妙・他は崩さないように」）。この範囲だけに効く＝SP・PCは不変 ===== */
/* STRENGTH：旧＝3枚横並び（1枚231px・本文とボタンが9px前後で読めなかった）→ 縦に1列・1枚440px。
カード内はcqw指定なので、SP(358px)と同じ組みのまま一回り大きくなるだけ。縦スタックの演出はJSがこの幅を除外しているので普通の縦並び */
.strength__list { flex-direction: column; align-items: center; gap: 36px; width: 100%; margin-left: 0; }
.strength-card { flex: none; width: 440px; max-width: 100%; }
.strength__head .bracket-title { max-width: 440px; } /* カッコが画面の両端まで離れていた */
/* 小見出しの英字（TOPのFLOW／ABOUTのFIELD・ENVIRONMENT／CONTACTのFLOW・FAQ）：768pxブロックの .sec-title__en{40px} が
.sec-title__en--small{13px} を上書きし、この幅だけ大見出しと同じ大きさになっていた。PC(1024px〜)は --fs-svc-en で別に直っている */
.sec-title__en--small { font-size: 18px; letter-spacing: 0.24em; }
/* WORKS：6枚目の右から出る走る人（.polaroid__peek--r・PC位置 right:-80px）が、768pxで画面の右端を34px（820pxで5px）はみ出して切れていた→この幅だけ内側へ */
.polaroid__peek--r { right: -38px; }
/* SERVICE＝4列だと注意書きが1行5文字まで潰れる→2列2段に */
.flow { grid-template-columns: repeat(2, 1fr); gap: 48px 36px; }
.flow__step:not(:last-child)::before { display: none; } /* 2列では横の連結線がつながらない */
.flow__body { font-size: 14px; }
.flow__note { font-size: 14px; padding: 14px 16px 14px 30px; }
.flow__note::before { left: 13px; }
}
/* 1100px〜＝みなみのPC版TOPカンプ（PC_TOP.pdf・2026-09-10）の組み。1:1で採寸した値 */
@media (min-width: 1024px) {
.hero__stage { padding: 0; width: auto; max-width: 100%; height: clamp(680px, 100svh - 100px, 900px); } /* 画面高に合わせて縮める（額縁は全幅のまま）＝キャッチと犬が初画面に入る。上限＝カンプ実寸900 */
/* STRENGTH＝2列ステージ：左に見出し（マーカー風の帯）＋本文、右にカード（直径520）がスクロールで重なる（SPと同じ縦スタックをPCでも有効化） */
.strength__inner { max-width: 1180px; }
.strength__stage { display: grid; grid-template-columns: 1fr 480px; column-gap: 90px; align-items: center; } /* カード直径480＝見出し込みでステージ約560px→縦723pxの画面でも1枚が収まる */
.strength__title { grid-column: 1 / -1; margin-bottom: 36px; }
.strength__head { grid-column: 1; align-self: start; padding-top: 40px; } /* 非スタック（static/reduce-motion）＝上寄せ */
.has-stack .strength__head { align-self: center; padding-top: 0; } /* スタック中＝カード（520px）の縦中央 */
.strength__head .bracket-title { text-align: left; font-size: 30px; line-height: 1.55; padding: 0; margin: 0; }
.strength__head .bracket-title::before, .strength__head .bracket-title::after { display: none; } /* PC＝ブラケットではなく帯 */
.strength__head .bracket-title .hl { display: inline-block; background: #F7F1ED; padding: 4px 22px; margin-bottom: 8px; }
.strength__body { display: block; margin-top: 40px; font-size: 15px; line-height: 2; letter-spacing: 0.04em; color: #524C45; }
.strength__list { grid-column: 2; width: 480px; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.has-stack .strength__list { display: block; }
.strength-card { flex: none; width: 100%; margin-bottom: 0; }
.strength-card__title { color: var(--coral); } /* PCカンプ：色付きイラストと並ぶので見出しをオレンジに（みなみ） */
.has-stack .strength__stage { top: var(--stack-top, 90px); }
/* SERVICE＝中央の縦線にステップが左右交互（ジグザグ）。パネル幅1190・角丸50 */
.service__panel { max-width: 1190px; padding: 70px 68px 160px; border-radius: 50px 50px 0 0; } /* 左右68＝内側1054px＝フロー実測幅（カンプ193〜1247） */
/* カンプ実測：左端193〜右端1247（パネル中央720基準）。1ステップ＝200pxの等間隔で左右が食い違い、
はみ出した本文・注意書きは反対側の空き列に重なる（＝ブロック積みにすると間延びする） */
.flow { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; column-gap: 0; max-width: 1054px; margin: 70px auto 0; padding: 0; counter-reset: step; } /* column-gap:0＝768pxブロックの gap:28px が残っていて、左列の丸(右端-14px)は縦線より14px左・右列の丸は14px右にずれていた（2026-09-15 みなみ「点線と円がズレている」） */
.flow::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 140px; width: 2px; margin-left: -1px; background: var(--brown); }
.flow__step, .flow__step:not(:last-child) { display: block; position: relative; width: auto; padding: 0 90px 0 0; text-align: left; }
.flow__step:not(:last-child)::before { display: none; }
.flow__step:nth-child(odd) { grid-column: 1; }
.flow__step:nth-child(even) { grid-column: 2; padding: 0 0 0 90px; }
/* 1ステップ＝1行（自動配置だと1・2が同じ行に入って詰まる）。ステップ数が変わったらここも足す */
.flow__step:nth-child(1) { grid-row: 1; }
.flow__step:nth-child(2) { grid-row: 2; }
.flow__step:nth-child(3) { grid-row: 3; }
.flow__step:nth-child(4) { grid-row: 4; }
.flow__step::after { content: ""; position: absolute; top: 48px; width: 28px; height: 28px; border-radius: 50%; background: var(--brown); } /* 行が200px＝丸も200px間隔（カンプ実測） */
.flow__step:nth-child(odd)::after { right: -14px; }
.flow__step:nth-child(even)::after { left: -14px; }
.flow__icon { position: absolute; top: 0; width: 100px; height: 100px; flex: none; }
.flow__step:nth-child(odd) .flow__icon { left: 0; }
.flow__step:nth-child(even) .flow__icon { right: 0; }
.flow__body { padding: 0; margin: 0 0 0 106px; font-size: 17px; line-height: 1.75; letter-spacing: 0.04em; } /* カンプ実測：本文左端299・1行17文字・行送り30px */
.flow__step:nth-child(even) .flow__body { margin: 0 106px 0 0; } /* 98pxまで広げると見出しがアイコンの丸に触れる＝106pxで止める */
.flow__step:nth-child(even) .flow__note { margin: 12px -6px 0; }
.flow__title { position: relative; font-size: 20px; padding-bottom: 12px; margin-bottom: 16px; }
/* STEPラベル＝みなみ書き出しPNG（2026-09-11・カンプの袋文字）。旧はCSSカウンタの文字 */
.flow__title::before { content: ""; display: block; width: 68px; height: 15px; margin-bottom: 6px; background: no-repeat left center / contain; }
.flow__step:nth-child(1) .flow__title::before { background-image: url("../assets/img/step-1.png"); }
.flow__step:nth-child(2) .flow__title::before { background-image: url("../assets/img/step-2.png"); }
.flow__step:nth-child(3) .flow__title::before { background-image: url("../assets/img/step-3.png"); }
.flow__step:nth-child(4) .flow__title::before { background-image: url("../assets/img/step-4.png"); }
.flow__step:nth-child(even) .flow__title::before { margin-left: auto; background-position: right center; }
.flow__title::after { content: ""; position: absolute; bottom: 0; left: 0; right: -90px; border-top: 2px dotted var(--brown); } /* 見出し下の点線＝中央の丸まで */
.flow__step:nth-child(even) .flow__title { text-align: right; }
.flow__step:nth-child(even) .flow__title::after { left: -90px; right: 0; }
/* フッター＝3列（ブランド／ナビ／SNS）・左揃え。コピーライトは下段中央 */
/* PCフッター（2026-09-15 作り直し・みなみ「なんとなく見にくい」→あやみさんサイトの「列ごとに英字の小見出し」方式）。
旧＝見出しなしの3列を中央寄せ・ナビとSNSが同じ大きさの文字で並び、どれが何の列か分からなかった。
新＝最大1100px幅に 紹介文(広め)｜SITE MAP｜CONNECT。小見出しはコーラルの英字＋細い線、ナビは英字＋日本語の2段、最下部に区切り線とコピーライト */
.footer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 72px; max-width: 1180px; margin: 0 auto; align-items: start; text-align: left; padding: 96px 40px 36px; }
.footer__brand { display: grid; grid-template-columns: 96px 1fr; column-gap: 24px; align-items: start; max-width: 470px; }
.footer__logo { display: contents; }
.footer__icon { grid-column: 1; grid-row: 1 / span 2; width: 96px; height: 96px; }
.footer__logo-img { display: none; }
.footer__desc { display: block; grid-column: 2; }
.footer__name { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: 0.04em; color: var(--brown); }
.footer__name .logo-img { width: 92px; }
.footer__tagline { margin-top: 10px; font-family: var(--font-ja); font-weight: 500; font-size: 18px; letter-spacing: 0.04em; color: var(--brown); } /* 2026-09-13 みどり「ここだけ明朝体なの変」→カンプ実測＝Zen Kaku Gothic New Medium・字間0.04em */
.footer__text { margin-top: 14px; font-size: 12px; line-height: 2.1; letter-spacing: 0.04em; color: #524C45; }
.footer__head { display: block; width: 100%; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-family: var(--font-en); font-size: 13px; letter-spacing: 0.24em; color: var(--coral); line-height: 1; }
.footer__nav { flex-direction: column; align-items: stretch; gap: 0; margin-top: 4px; font-size: 16px; letter-spacing: 0.1em; }
.footer__nav a + a::before { content: none; }
.footer__nav a { display: grid; grid-template-columns: 7.3em 1fr; align-items: baseline; column-gap: 14px; padding: 9px 0; transition: opacity .25s; } /* 英字の列幅をCONTACTに合わせて固定＝日本語の頭が3行そろう */
.footer__nav a:hover { opacity: .6; }
.footer__en { font-family: var(--font-en); letter-spacing: 0.14em; white-space: nowrap; }
.footer__ja { display: inline; font-family: var(--font-ja); font-size: 13px; letter-spacing: 0.06em; color: #524C45; }
.footer__sns { flex-direction: column; align-items: stretch; gap: 0; margin-top: 4px; }
.footer__sns a { flex-direction: row; align-items: center; gap: 12px; padding: 8px 0; transition: opacity .25s; }
.footer__sns a:hover { opacity: .6; }
.footer__sns img { width: 24px; height: 24px; object-fit: contain; padding: 0; background: none; }
.footer__sns span { font-size: 15px; letter-spacing: 0.04em; }
.footer__copy { grid-column: 1 / -1; text-align: center; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13px; }
}
/* 1024〜1199px＝カンプ組みのまま横幅だけ詰める（2026-09-12）。
WORKSは315×3＋列間40＝1025pxで内側944pxに入らず2列に落ちるので、この帯だけカードと列間を縮める。
STRENGTHの右カード480px固定も、左カラムが本文3行で折り返すので少し細くする */
@media (min-width: 1024px) and (max-width: 1199px) {
.works__inner { max-width: 100%; padding: 0 28px; }
.works__grid { gap: 56px 24px; }
.polaroid { width: 288px; }
.strength__inner { padding: 0 28px; }
.strength__stage { column-gap: 56px; } /* カード幅は --card-d（画面高にも追従）に任せる */
.service__panel { padding: 70px 48px 160px; }
.flow { max-width: 920px; }
.flow__step { padding: 0 66px 0 0; }
.flow__step:nth-child(even) { padding: 0 0 0 66px; }
.flow__title::after { right: -66px; }
.flow__step:nth-child(even) .flow__title::after { left: -66px; }
.flow__body { font-size: 16px; margin-left: 88px; }
.flow__step:nth-child(even) .flow__body { margin: 0 88px 0 0; }
.flow__icon { width: 84px; height: 84px; }
.footer { column-gap: 44px; padding: 90px 28px 36px; }
}
/* ============================================================
PCの文字サイズ＝みなみのPCカンプ(PC_TOP.pdf)実測に合わせる（2026-09-12 みどり「PCのフォントサイズを最終調整」）
方針：カンプは1440px幅で 44/40/24/20/18/16 の階層。この階層をそのまま採用し、
固定pxではなく 1024px時=カンプの85% → 1440px時=カンプ100% の流体値(clamp)で入れる。
あわせて行送りもカンプ実測に詰める（サイズだけ上げると間延びする）：
ABOUT本文33/20=1.65・STRENGTH本文33/20=1.65・SERVICE本文30/20=1.5・フッター紹介文25/16=1.56
円（STRENGTHカード・CONTACTバッジ）は中身がcqw/比例なので直径ごとカンプに合わせる
＝カード520px（カンプ実測551は山の外径・係数は520基準で作ってある）／CONTACT丸248px（実測）
============================================================ */
@media (min-width: 1024px) {
:root {
--fs-nav: clamp(18px, 0.721vw + 10.62px, 21px);
--fs-mvsub: clamp(18px, 0.721vw + 10.62px, 21px);
--fs-h2ja: clamp(34px, 1.442vw + 19.23px, 40px);
--fs-h2ja-em: clamp(37px, 1.683vw + 19.77px, 44px);
--fs-lead: clamp(17px, 0.721vw + 9.62px, 20px);
--fs-pill: clamp(15px, 0.721vw + 7.62px, 18px);
--fs-btn: clamp(14px, 0.481vw + 9.08px, 16px);
--fs-clients: clamp(37px, 1.683vw + 19.77px, 44px);
--fs-logo: clamp(25px, 1.202vw + 12.69px, 30px);
--fs-tag: clamp(14.5px, 0.601vw + 8.35px, 17px); /* WORKSのタグ。2026-09-13 みどり「全体的に小さい方がバランスいい」→ 20px(1440時)→17pxに。パディング(7/18)と行送りは据え置き＝ピルの高さ56→46pxになり、カンプのピル高さ/カード幅の比0.14に一致する（20pxのときは0.17で厚ぼったかった） */
--fs-svc-en: clamp(20px, 0.962vw + 10.15px, 24px);
--fs-svc-ja: clamp(37px, 1.683vw + 19.77px, 44px);
--fs-step: clamp(20px, 0.962vw + 10.15px, 24px);
--fs-note: clamp(15px, 0.721vw + 7.62px, 18px);
--fs-badge: clamp(13px, 0.481vw + 8.08px, 15px); /* 丸の中の「CONTACT」＝直径の約9%（21→18→15px） */
--fs-foot-name: clamp(19px, 0.962vw + 9.15px, 23px);
--fs-foot-text: clamp(14px, 0.481vw + 9.08px, 16px);
--fs-foot-nav: clamp(18px, 0.721vw + 10.62px, 21px);
--fs-copy: clamp(15px, 0.721vw + 7.62px, 18px);
--fs-foot-tag: clamp(18px, 0.721vw + 10.62px, 21px);
--fs-card-cta: clamp(17px, 0.721vw + 9.62px, 20px);
--card-d: max(420px, min(clamp(468px, 19.952vw + 263.70px, 551px), calc(100svh - 230px)));
/* カンプ実測＝円の外径551px（山の頂点まで）。cqwの基準＝この幅。
縦スタックはsticky(top90)＋見出し76pxぶんを足して1画面に収める必要があるので、画面高でも上限をかける
（画面高700pxのノートPCでも円が1枚まるごと入る）。中身はcqwなので縮んでも崩れない */
--badge-d: clamp(144px, 5.769vw + 84.92px, 168px); /* 2026-09-13 248→210→168px（1024時144）。中身と余白はこの値から計算 */
}
/* ヘッダー・MV */
.header__nav a { font-size: var(--fs-nav); }
/* MV英字サブ＝みなみのPCカンプ実測に一致させる（2026-09-13 みどり「文字が細い・カンプに合わせて」）。
カンプは ADS-shiokaze 21px で 文字幅347.2px／文字高16.5px／色#514C46（1440px時・PDFから実測）。
このフォントは未入手でクラフト明朝で代用しているが、代用フォントは同じ字面高でカンプより字幅が広い。
そのため nominal の --fs-mvsub(21px) ではなく「見た目の字面高と総幅がカンプと一致する値」を入れる＝
font-size 1.362cqw（ステージ1440px時≒19.6px）／字間 -0.073em。旧値(21px・字間0.16em)は幅576pxでカンプの1.66倍だった。
単位が vw でなく cqw なのは、ステージが画面の高さで縮む（height:clamp(...)）ため＝
vw だと画面が低いときに文字だけ縮まず絵に対して大きくなる。cqw ならカンプの比率が常に保たれる。 */
.hero__sub { font-size: 1.362cqw; letter-spacing: -0.073em; color: #514C46; }
/* ABOUT */
.about__inner .bracket-title { font-size: var(--fs-h2ja); }
.about__inner .bracket-title .ff-craft { font-size: var(--fs-h2ja-em); }
.about__body { font-size: var(--fs-lead); line-height: 1.65; }
.check-pill { font-size: var(--fs-pill); min-height: 50px; }
.btn { font-size: var(--fs-btn); }
/* STRENGTH＝円の直径ごとカンプへ（中身はcqwで自動追従） */
.strength__stage { grid-template-columns: 1fr var(--card-d); }
.strength__list { width: var(--card-d); }
.strength__head .bracket-title { font-size: var(--fs-h2ja); }
.strength__head .bracket-title .ff-craft { font-size: var(--fs-h2ja-em); }
.strength__body { font-size: var(--fs-lead); line-height: 1.65; }
/* カード内は円の外径基準(cqw)＝pxで入れると円から溢れる。カンプ実測（円551px）：
番号36px=6.53cqw・下線91px=16.5cqw／タイトル31.9=5.79／本文21.9=3.97（行送り34px=1.55）／CTA21.4=3.88 */
/* 縦の積み上げもカンプ実測（円上端から：番号4.4／タイトル18.5／本文28.1／イラスト44.5-68.1／CTA81.9cqw） */
.strength-card__inner { inset: 0 8cqw; }
.strength-card__num { width: 16.5cqw; margin: 4.4cqw auto 4cqw; padding: 0 4cqw 1.8cqw; }
.strength-card__title { font-size: 5.79cqw; }
.strength-card__text { font-size: 3.97cqw; line-height: 1.55; margin-top: 3cqw; }
/* カンプ実測：絵は幅227×高さ130（円551基準）。清書PNGは1000×1000の中に横長の絵（08＝比1.4）が入っていて
上下に透明の余白があるため、枠は正方形33cqwのまま縮める＝絵の実寸が約33×23.6cqwになりカンプと一致する。
ここで aspect-ratio を横長にしても子の img(height:100%) に押し負けて効かない（高さ=幅のまま溢れた）→ 高さを明示する */
/* 2026-09-13 みどり「イラストがもっと目立った方がいい」→C案（4案比較=_案_STRENGTHイラストの大きさ_4案_2026-09-13.png）。
枠は幅58×高さ38cqw＝絵は高さで効いて幅293px（カンプ227pxの1.3倍・旧182px）。番号下/本文上/ボタン上の余白を各1cqw前後詰めて捻出している */
.strength-card__img { width: 58cqw; height: 38cqw; aspect-ratio: auto; margin-top: 3cqw; }
.strength-card .btn--small { font-size: 3.88cqw; margin-top: 3cqw; min-height: 8cqw; max-width: none; width: auto; padding: 0 2.6cqw; }
/* .btn__arrow に font-size は当てない＝丸の中はSVG矢印で、HTMLの「>」は font-size:0 で隠す設計（2026-09-13 矢印が2つ出た原因） */
/* 実績企業 */
.clients__title { font-size: var(--fs-clients); padding-bottom: 12px; }
.marquee__list li { font-size: var(--fs-logo); padding: 0 40px; }
/* WORKS */
.tag { font-size: var(--fs-tag); padding: 7px 18px; margin-top: 18px; }
/* SERVICE */
.sec-title__en--small { font-size: var(--fs-svc-en); letter-spacing: 0.22em; }
.sec-title__ja { font-size: var(--fs-svc-ja); margin-top: 6px; }
.flow__title { font-size: var(--fs-step); }
.flow__body { font-size: var(--fs-lead); line-height: 1.5; }
.flow__note { font-size: var(--fs-note); line-height: 1.55; }
/* CONTACT＝丸ごとカンプの直径に */
/* 2026-09-13 みどり「CONTACT デカすぎない？」→ カンプ実測と突き合わせ。
丸248pxはカンプ(約245px)どおりでOK。ズレていたのは**リード文(20→18px)**と**ボタン幅(380→266px)**＝カンプはボタン266×64 */
/* 縦のリズム（2026-09-13 全面調整）。**旧: 丸がリードに8px食い込み・下に80px余る**という上下が逆の詰まり方だった。
padding-topを「丸の半径＋34px」の式にして、丸の大きさを変えても食い込まない＝再発しない作りにする。
間隔は下にいくほど広げる（34 / 40 / 50px）＝カンプの取り方（45/60/71）と同じ考え方で、一回り小さくした分だけ詰めた値 */
.service__panel { padding-bottom: calc(var(--badge-d) / 2 + 56px); } /* 丸の上＝56px（SP・タブレットと共通） */
.contact { padding: calc(var(--badge-d) / 2 + 32px) 40px 56px; } /* 丸→リード32／ボタン→帯の下56＝丸の上56と対称 */
.contact__lead { font-size: clamp(15px, 0.481vw + 10.07px, 17px); line-height: 1.7; margin-bottom: 40px; }
.contact .btn { max-width: 240px; } /* カンプ266px。一回り小さくで240px。高さ60pxは維持＝タップ領域を確保 */
.contact__inner { max-width: 700px; }
/* フッター */
.footer__name { font-size: var(--fs-foot-name); }
.footer__tagline { font-size: var(--fs-foot-tag); }
.footer__text { font-size: var(--fs-foot-text); line-height: 1.56; }
.footer__nav { font-size: var(--fs-foot-nav); }
.footer__sns span { font-size: var(--fs-btn); }
.footer__copy { font-size: var(--fs-copy); }
}
/* 事例モーダルのPC対応（2026-09-12 点検で発覚）。カンプにモーダルはないため、
TOPの他の要素と重さを揃える＝パネル幅はSTRENGTHの円と同じ 551px・文字はPCの階層（20/16px）に乗せる。
SPは従来（340px・13px）のまま＝みなみ承認済みの状態を保つ */
@media (min-width: 1024px) {
.modal__panel { max-width: 551px; border-radius: 26px; padding: 58px 34px 34px; }
.modal__label { font-size: 15px; padding: 7px 36px 8px; }
.modal__client { font-size: 16px; padding: 0 26px 4px; margin-bottom: 12px; }
.modal__title { font-size: var(--fs-lead); margin-bottom: 24px; }
.modal__img { margin: 0 -34px 26px; }
.modal__text { font-size: var(--fs-foot-text); line-height: 1.75; }
.modal__close { font-size: 16px; margin-top: 30px; }
}
/* MVを過ぎたらヘッダーに薄い白地（2026-09-12 実機点検＝実績企業の流れる社名がヘッダーの文字と重なって読めなかった）。
MV上では従来どおり透過のまま＝みどり決定「白い帯は不採用」を保つ。SPは現状維持でPCのみ */
@media (min-width: 1024px) {
.header { transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.header.is-solid { background-color: rgba(255,255,255,.92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(105,92,82,.08); }
}
/* ==========================================================
iPad幅（768〜1023px）の最終調整 その2（2026-09-17 みどり「途中横から出てくる犬が隠れる・STRENGTHのカード切り替えができていない・FLOWの点線がない」）
ファイル末尾＝768pxブロック・タブレットブロックより後ろで上書きする。この範囲だけに効く＝SP・PCは不変
========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
/* WORKSの覗きイラスト：タブレットは2列なのにPC（3列）の出し方をしていた→4枚目（2列だと右の列）の裏から左へ走り出る犬が、隣の3枚目の裏に隠れていた。
2列用に作ってあるSPの出し方（1犬tl／2スケボーr／3犬bl／4走る人tr）に切り替える。PC専用の5・6枚目のカードはそのまま出す */
.polaroid__peek--pc { display: none; }
.polaroid__peek--sp { display: block; }
/* 3枚目（左の列）の裏から左へ走り出る犬が768pxで画面の左端を35px（820pxで9px）はみ出していた→カードを315→300pxにして左右の余白を広げ、出る位置も内側へ */
.polaroid { width: 300px; }
.polaroid__peek--bl { left: -56px; }
/* STRENGTH：重なりの演出（JSが html.has-stack を付ける）をタブレットでも。カード置き場を1枚ぶんの正方形にして3枚を重ねる */
.has-stack .strength__list { display: block; width: 440px; max-width: 100%; margin: 40px auto 0; }
.has-stack .strength-card { width: 100%; }
/* FLOW：PCと同じ「中央の縦線＋丸・見出し下の点線でつなぐ左右ジグザグ」をタブレットの寸法で（旧＝2列2段で線なし） */
.flow { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: 0; max-width: 700px; margin: 56px auto 0; padding: 0; }
.flow::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 140px; width: 2px; margin-left: -1px; background: var(--brown); }
.flow__step, .flow__step:not(:last-child) { display: block; position: relative; width: auto; padding: 0 40px 0 0; text-align: left; }
.flow__step:not(:last-child)::before { display: none; }
.flow__step:nth-child(odd) { grid-column: 1; }
.flow__step:nth-child(even) { grid-column: 2; padding: 0 0 0 40px; }
.flow__step:nth-child(1) { grid-row: 1; }
.flow__step:nth-child(2) { grid-row: 2; }
.flow__step:nth-child(3) { grid-row: 3; }
.flow__step:nth-child(4) { grid-row: 4; }
.flow__step::after { content: ""; position: absolute; top: 40px; width: 22px; height: 22px; border-radius: 50%; background: var(--brown); }
.flow__step:nth-child(odd)::after { right: -11px; }
.flow__step:nth-child(even)::after { left: -11px; }
.flow__icon { position: absolute; top: 0; width: 64px; height: 64px; flex: none; }
.flow__step:nth-child(odd) .flow__icon { left: 0; }
.flow__step:nth-child(even) .flow__icon { right: 0; left: auto; }
.flow__body { padding: 0; margin: 0 0 0 76px; text-align: left; }
.flow__step:nth-child(even) .flow__body { margin: 0 76px 0 0; }
.flow__title { position: relative; font-size: 17px; padding-bottom: 10px; margin-bottom: 12px; }
.flow__title::before { content: ""; display: block; width: 56px; height: 13px; margin-bottom: 5px; background: no-repeat left center / contain; }
.flow__step:nth-child(1) .flow__title::before { background-image: url("../assets/img/step-1.png"); }
.flow__step:nth-child(2) .flow__title::before { background-image: url("../assets/img/step-2.png"); }
.flow__step:nth-child(3) .flow__title::before { background-image: url("../assets/img/step-3.png"); }
.flow__step:nth-child(4) .flow__title::before { background-image: url("../assets/img/step-4.png"); }
.flow__step:nth-child(even) .flow__title { text-align: right; }
.flow__step:nth-child(even) .flow__title::before { margin-left: auto; background-position: right center; }
.flow__title::after { content: ""; position: absolute; bottom: 0; left: 0; right: -40px; border-top: 2px dotted var(--brown); } /* 見出し下の点線＝中央の丸まで */
.flow__step:nth-child(even) .flow__title::after { left: -40px; right: 0; }
.flow__body p { font-size: 14px; }
.flow__step:nth-child(even) .flow__note { margin: 12px -6px 0; }
}
/* 実機の切り分け用（?dbg=…の時だけ・main.js 冒頭参照・2026-09-18）。原因が分かったら消す */
.dbg-nopin .page > section.about { position: relative; top: auto; }
.dbg-nohero .hero { position: relative; }
.dbg-noclip .page, .dbg-noclip .about, .dbg-noclip .strength { overflow-x: visible; }