/* ==========================================================
   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 {
  --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;
  --gray-mv: #ECECEC;
  --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倍 */
}
/* 見出し右肩の「ちょんちょん」装飾は廃止（2026-08-29 みどり指示。入れるなら本人の手描き画像で） */
.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: 6px; border: 0; background: var(--brown); color: var(--white);
  font-family: var(--font-maru); font-weight: 700; font-size: 14px; letter-spacing: 0.1em;
  transition: filter .25s ease;
}
.btn:hover, .btn:active { filter: 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><path d='M2 2 L8 8 L2 14' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") 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 { } /* 旧バリエーションは型に吸収（クラスは互換のため残す） */
.btn--beige { background: var(--coral); color: var(--white); } /* CONTACT＝コーラル（v2） */
.btn--small { 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; }

/* ロゴ＝本人の手描き「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); }
.header__nav.is-open {
  display: block; position: fixed; inset: 0; background: rgba(248,242,236,0.97);
  padding-top: 110px;
}
.header__nav.is-open ul { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.header__nav.is-open a { font-family: var(--font-en); font-size: 22px; letter-spacing: 0.25em; color: var(--brown); }

/* ---------- 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(--gray-mv);
  /* 画面いっぱいの高さにして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; }
.is-tall .hero { min-height: 0; } /* 検品用（?tall=1）：全長キャプチャでMVが膨らまないように */ /* MVの上に乗る層（各セクションは自前の背景を持つこと） */
/* SP: ステージは画面高まで縦に伸びるが上限720px（伸ばしすぎると隙間が間延びする）。それ以上の端末ではABOUTのアーチが初画面下に覗く＝続きの合図 */
.hero__stage { min-height: min(100svh, 720px); } /* 各パーツのopacity/margin-topはJS「hero recede」がスクロール連動で上書き（transformは出現アニメが使うためmargin-topで流す） */
.hero__stage {
  position: relative; width: 100%; aspect-ratio: 390 / 640; margin: 0 auto;
  overflow: hidden;
}
.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--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×640基準・%） */
.hero__il--03 { left: 5.6%;  top: 11.3%; width: 46.2%; }  /* 額縁＋テーブルの二人＋観葉植物 */
.hero__il--02 { left: 53%;   top: 7%;    width: 43%; }  /* ペンダントライト＋カウンター（コピーとの間を5%空ける） */
.hero__il--04 { left: 11.5%; top: 67.5%; width: 45%; }    /* カフェの二人 */
.hero__il--05 { left: 75%;   top: 63.5%; width: 18%; }    /* 歩く人（足をカフェの二人の椅子脚と揃える） */
.hero__il--06 { left: 12.8%; top: 88.5%; width: 25%; }    /* 寝ている犬（二人と1呼吸分の隙間） */
.hero__copy {
  position: absolute; left: 6.4%; top: 51.5%; width: 50%;
  padding: 2.5% 0; border-top: 1px solid var(--brown); border-bottom: 1px solid var(--brown);
  opacity: 0; transition: opacity 1s ease .9s;
}
.hero.is-shown .hero__copy { opacity: 1; }
.hero__catch img { width: 100%; }
.hero__catch { padding: 2% 0 0; }
.hero__sub { margin-top: 3.5%; font-family: var(--font-en); font-size: clamp(9px, 2.7vw, 12px); letter-spacing: 0.12em; line-height: 1.6; color: var(--brown-2); white-space: nowrap; }

.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 - 60px)); margin-left: calc(50% - min(165px, 50vw - 30px)); } /* v2実測：ピル幅330（inner316より広い） */
.check-pill {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: 999px; min-height: 42px; padding: 8px 20px 8px 22px;
  font-family: var(--font-maru); font-weight: 700; font-size: 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: 19px; 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;
  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: 72px; z-index: 1; }
.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; } /* 出現フェードはスタック側の動きに任せる */
.strength-card__inner {
  position: absolute; inset: 8.4cqw 8cqw 10.6cqw; /* 358px基準：上30（POINTラベルぶん上げ）・左右29・下38 */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0;
}
.strength-card__point { 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.59cqw; line-height: 1.4; letter-spacing: 0.02em; } /* 20px・字間ほぼなし（カンプ実測） */
.strength-card__text { margin-top: 4.2cqw; font-size: 4.47cqw; line-height: 1.625; letter-spacing: 0.02em; } /* 16px・行送り26px */
.strength-card__img { width: 46cqw; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } /* 背景色なし＝線画を白カードに直置き（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: 0; padding: 0; gap: 3cqw;
  border: 0; border-radius: 0; background: none; color: var(--brown);
  font-size: 3.35cqw; 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><path d='M2 2 L8 8 L2 14' fill='none' stroke='%23E28072' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><path d='M2 2 L8 8 L2 14' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); 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; }
.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,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'><path d='M0 2 Q3 0 6 2 T12 2' fill='none' stroke='%23C7BBB5' stroke-width='1.3'/></svg>") 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: -34px; top: -14px; width: 28px; }
.marquee { overflow: hidden; padding: 38px 0 36px; /* 上の波線→企業名→下の波線＝101px（カンプ実測） */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'><path d='M0 2 Q3 0 6 2 T12 2' fill='none' stroke='%23C7BBB5' stroke-width='1.3'/></svg>") 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;
  background-position: 0 0, 0 0, 0 10px, 10px 0;
}
.works__clip { position: absolute; right: 24px; top: -4px; width: 54px; z-index: 2; } /* 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: -6px; top: -44px; width: 64px; }
.polaroid__peek--r { right: -46px; top: 40%; width: 72px; }
.polaroid__peek--bl { left: -58px; bottom: -6px; width: 74px; z-index: 1; } /* カードの裏側の層（2026-08-29 みどり指示「後ろから出てくる」） */
.polaroid__peek--tr { right: -16px; top: -48px; width: 66px; }
/* 覗きイラストの演出（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.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; }

/* ---------- 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 124px; /* 下余白＝CONTACTの丸（半分72px）が食い込む分＋納品の注記との間 */
}
.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; /* 白丸＋細い茶の輪郭（カンプ準拠） */
}
.flow__icon img { width: 70%; }
.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 {
  margin-top: 10px; background: var(--brown); color: var(--white); border-radius: 6px; /* 茶ベタ＋白文字（カンプ準拠。薄ピンク案は試して戻した・2026-08-29） */
  padding: 8px 12px; font-size: 11px; line-height: 1.7;
}
.flow__note::before { content: "！ "; }

/* ---------- S7 contact ---------- */
.contact { position: relative; background: var(--brown); color: var(--white); padding: 96px 20px 60px; margin-top: 0; text-align: center; } /* SERVICEのベージュ面に直結。丸が境目にまたがる（カンプ準拠） */
.contact__badge {
  position: absolute; left: 50%; top: -68px; transform: translateX(-50%);
  width: 136px; height: 136px; border-radius: 50%; /* カンプ実測≒画面幅35% */
  background: var(--brown); border: 1.5px solid var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.contact__badge::before { /* 内側の白い円（カンプ準拠の二重線） */
  content: ""; position: absolute; inset: 6px; 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: 12px; letter-spacing: 0.12em; margin-top: 4px; line-height: 1; }

.contact__badge-il { position: relative; width: 76px; height: 62px; margin-top: 6px; } /* 絵が丸の7割＝主役 */
.contact__badge-il img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: invert(1) brightness(1.6) contrast(1.3); /* ラフの黒線→白線。清書は白抜きで来る想定＝そのときは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: 28px; }

/* ---------- 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; justify-content: center; gap: 8px; margin-top: 20px; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.08em; color: var(--brown); }
.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 svg { width: 32px; height: 32px; border: 1px solid var(--brown); border-radius: 50%; padding: 6px; }
.footer__sns span { font-size: 9px; letter-spacing: 0.05em; }
.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; }
  .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--02 { left: 71.9%; top: 10%;    width: 17.2%; }  /* 上10%＝ヘッダー帯を避けてコードを吊る */
  .hero__il--04 { left: 13.3%; top: 58.8%;  width: 25.8%; }
  .hero__il--05 { left: 60.9%; top: 55%;    width: 9.2%; }
  .hero__il--06 { left: 77.3%; top: 71.3%;  width: 14.8%; }
  .hero__copy { left: 39%; top: 33%; width: 24%; padding: 1.6% 0; }
  .hero__sub { font-size: clamp(10px, 1vw, 13px); letter-spacing: 0.18em; margin-top: 10px; }

  .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; }
  .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: 36px; right: -44px; }
  .marquee__list li { font-size: 15px; padding: 0 36px; }

  .works { padding: 90px 0 110px; }
  .works__clip { right: 5%; top: -5px; width: 66px; }
  .works::before { left: 16px; right: 16px; }
  .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; }
  .works .btn { max-width: 340px; }

  .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; }

  .contact { padding: 116px 40px 80px; margin-top: 0; }
  .contact__badge { width: 160px; height: 160px; top: -80px; }
  .contact__badge::before { inset: 7px; }
  .contact__badge-en { font-size: 14px; }
  .contact__badge-il { width: 90px; height: 74px; }
  .contact__inner { max-width: 560px; }
  .contact__lead { font-size: 16px; margin-bottom: 34px; }
  .contact .btn { max-width: 380px; margin: 0 auto; }

  .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; }
}