/* =========================================================
   meme LP — タブレット以下（〜1199px）
   PC（style.css）は Figma の絶対座標で組んでいるので、ここで通常フローに組み直す。
   基準幅: SP 393 / TB 768（1rem = デザイン 10px）。TB/SP のデザインは無いので PC を基に自作。
   読み込みは <link media="(max-width: 1199px)">。PC には一切影響しない。
   ========================================================= */

html { font-size: calc(100vw / 393 * 10); }
@media (min-width: 768px) { html { font-size: calc(100vw / 768 * 10); } }

:root { --gx: 1.6rem; --hill-arc: 7vw; }   /* 左右の余白（SP 16px / TB 48px） / 山なりの高さ（幅に比例） */

/* ---------- 共通: 絶対配置をやめて縦に並べる ---------- */
.page { display: block; }
.sec { position: relative; left: auto; top: auto; width: 100%; height: auto; padding-left: var(--gx); padding-right: var(--gx); }
.stage { position: relative; left: auto; top: auto; width: auto; height: auto; scale: none; }
.bg-light, .bg-sol { display: none; }
.label .tsvg { height: calc(var(--h) * .07rem); }   /* 英字ラベルは 7 割 */

/* 山なり: 幅に対して同じ丸みになるよう vw で。次のセクションは --hill-arc だけ重ねる */
.hill::before { width: 360vw; height: 360vw; left: -130vw; }
.hill::after { top: var(--hill-arc); }

/* ---------- ローディング / ヘッダー / 固定 CTA ---------- */
.loader-box { width: 16rem; height: 16rem; }
.loader-num { font-size: 2.4rem; }
.header { top: 1.6rem; left: var(--gx); right: var(--gx); height: 3.6rem; }
.logo { width: 13.6rem; top: .8rem; }   /* SP: 少し大きく・少し下へ */
.btn-grp { gap: .6rem; height: 3.2rem; }
.btn { height: 3.2rem; font-size: 1.3rem; }   /* SP: ヘッダー右のボタンは小さめ */
.btn-demo, .btn-contact { display: none; }   /* SP はメニュー内にあるので隠す */
.btn-menu { width: 10rem; padding: 0 1.2rem 0 1rem; gap: .8rem; font-size: 1.1rem; }
.fix-btn { left: 50%; right: auto; width: 32rem; margin-left: -16rem; height: 5.2rem; padding: 0 2rem; font-size: 1.5rem; border-radius: 1rem 1rem 0 0; }   /* ボタン自体を画面のセンターに（中身は PC と同じ左右振り分け） */
body.is-loading { overflow: hidden; }

/* ---------- 目: セクションごとに置き直す ---------- */
/* 目の間隔は PC と同じ比率（中心間 = 幅の 5.47 倍）。左目の left = 50% - 幅×3.235、右目の left = 50% + 幅×2.235 */
:root { --eye-w: 5.6rem; --hero-eye: 5.8rem; }   /* ヒーローの目: 両端 2.4rem。中心間は TB と同じ比率（目の幅 × 4.9）になる大きさ */
.eye { width: var(--eye-w); height: calc(var(--eye-w) * 1.1); }

/* ---------- 01 hero ---------- */
.sec-hero { height: 100svh; min-height: 56rem; overflow: hidden; }
.sec-hero .stage { display: flex; align-items: center; justify-content: center; height: 100%; }
.hero-title { position: static; text-align: center; font-size: 4.6rem; line-height: 1.25; translate: 2.3rem -1rem; }   /* 目はコピーの上に置くので大きく。1 行目の「る」が画面中央: 文字半分ぶん右へ */   /* 左右の目と同じ高さに置くので、目に当たらない幅に。句読点ぶん少し右へ */
.hero-wave { position: absolute; left: -118.9%; right: auto; top: calc(50svh + 11.5rem); bottom: auto; width: 300%; height: auto; }   /* 1 つ目のループ（画像の 56.3% の位置）が画面中央に来る: 50% - 300% × .563。上端はコピー下端（50svh + 1.75rem）+ 4rem（目とコピーの間隔と同じ）*/
/* ヒーローの目: 固定せず、ヒーローの中に置く（JS の is-fixed / is-parked は無視） */
.eye-hero-l, .eye-hero-r { position: absolute !important; top: calc(50svh - 1rem - 5.75rem - 4rem - var(--hero-eye) * 1.1) !important;   /* コピー（2 行 11.5rem、-1rem）の上端から 4rem 上 */   /* コピーと一緒に 4rem 上へ（センターから 1.5rem 下 - 4rem） */ width: var(--hero-eye) !important; height: calc(var(--hero-eye) * 1.1) !important; z-index: 5; }
.eye-hero-l { left: 2.4rem !important; }
.eye-hero-r { left: auto !important; right: 2.4rem !important; }

/* ---------- 02 what we do ---------- */
.sec-what { padding-top: 8rem; padding-bottom: 6rem; }   /* SP は高さ成り行き（TB は画面 1 枚ぶん） */
.sec-what .stage { display: grid; grid-template-columns: 1fr 1fr; }
.what-label, .what-title, .what-cloud, .what-marquee { position: static; grid-column: 1 / -1; }
.what-label { text-align: center; }
.what-label .tsvg { margin-inline: auto; }
.what-title { margin-top: 1.6rem; font-size: 2.8rem; line-height: 1.3; }
.what-cloud { position: relative; left: auto; top: auto; width: 120%; max-width: none; height: auto; margin: 2.4rem 0 0 -10%; }   /* SP は雲を画面から少しはみ出させて文字を大きく（relative なので PC の left/top は必ず打ち消す） */
.what-cloud img { height: auto; }
.what-text { left: 50%; top: calc(50% - .6rem); width: 74.3%; translate: -50% -50%; }   /* 雲（＝画面）の中央より少し上。行数が変わっても同じ位置関係 */
/* 丸は PC と同じく雲の左上・右上に重ねる */
.ball-1 { left: 8.3%; top: 0; width: 9rem; height: 9rem; }   /* 雲がはみ出すぶん内側（画面の左端に合わせる） */
.ball-1 .l1 { top: 1.3rem; font-size: 1.8rem; }
.ball-1 .l2 { top: 3.1rem; font-size: 1rem; }
.ball-1 .l3 { top: 4.5rem; font-size: 1.3rem; }
.ball-1 .l4 { top: 6rem; font-size: 1.3rem; }
.ball-2 { left: auto; right: 8.3%; top: 0; width: 7.7rem; height: 7.7rem; }
.ball-2 .l1 { top: 1.7rem; font-size: 1.7rem; }
.ball-2 .l2 { top: 4rem; font-size: 1.15rem; }
.what-marquee { left: auto; width: calc(100% + var(--gx) * 2); margin: 3.2rem calc(var(--gx) * -1) 0; height: 5rem; }
.what-track img { width: 104rem; }
@keyframes what-flow { from { transform: translateX(0); } to { transform: translateX(-104rem); } }

/* ---------- 03 3つ ---------- */
.sec-three { padding-top: 10rem; padding-bottom: 12rem; }   /* 前後の余白は広め */
.three-title { position: static; display: flex; align-items: center; justify-content: center; width: auto; height: auto; }
.three-title .t1, .three-title .t2, .three-title .t3 { position: static; font-size: 2.6rem; }
.three-title .t2 { width: auto; height: 5.2rem; margin: 0 .4rem; }
.three-illust { left: calc(50% + 13.1rem); right: auto; top: -1.6rem; width: 2.6rem; }   /* 「3」の右上（見出しは中央揃えなので、中央から 3 の右端までを計算） */
.three-diagram { display: none; }   /* SP は矢印なしの丸 3 つ（.three-circles） */
.three-circles { display: flex; flex-direction: column; align-items: center; gap: 2rem; margin-top: 3.2rem; }
.three-circles img { width: 27rem; height: auto; }

/* ---------- 04 problem（固定しない。カードは縦に並ぶ） ---------- */
.sec-problem { height: auto; padding: 0; background: var(--light2); }
.problem-pin { position: static; height: auto; padding: 10rem var(--gx) 8rem; overflow: visible; }   /* 「解決しよう！」の下の余白（次の山なりが重なる分も含む） */   /* 「解決しよう！」の下に余白（山なりが重なる分も含めて） */
.sec-problem .stage { display: flex; flex-direction: column; }   /* 見出し → イラスト → 本文 → カード → 解決しよう！ の順に */
.problem-stack { order: 1; display: flex; flex-direction: column; }
.problem-top { order: 1; display: flex; flex-direction: column; position: sticky; top: 6rem; isolation: isolate; }   /* 見出し・イラスト・本文は本文だけ残して止まり（位置は JS）、カードはその下に積み重なる。カードが終わると一緒に流れる */
.problem-head { order: 1; } .problem-illust { order: 2; } .problem-text { order: 3; } .pcards { order: 4; } .problem-solve { order: 5; }
.problem-wave { left: -96.1%; top: 36.2%; width: 260%; height: auto; translate: 0 -28%; z-index: -1; }   /* 1 つ目のループ（画像の x 56.2% / y 28%）がイラストの中心に来る: left = 50% - 260% × .562 */
.problem-head { position: static; }
.problem-title { font-size: 3.2rem; }
.problem-illust { position: static; width: 100%; max-width: 36rem; margin: 2.4rem auto 0; }
.problem-text { position: static; width: auto; margin-top: 2.4rem; font-size: 1.4rem; line-height: 1.9; }
/* スクロールで 1 枚ずつ積み重なる: 各カードを sticky にして、前のカードの上に次のカードがかぶさる。角度は PC と同じ */
.pcards { position: static; display: block; margin-top: 4rem; }   /* 本文との間 = 止まった時の間隔（JS の g）と同じにして、塊が止まった後にカードだけ動かないように */
.pcard { position: sticky; left: auto !important; display: flex; flex-wrap: wrap; justify-content: center; align-content: start; gap: .6rem; width: calc(100% - 2.4rem); height: auto; margin: 0 auto 4rem; padding: 3.2rem 2rem 2.4rem; transform: translateY(3rem); filter: none; transition: opacity .6s ease, transform .7s var(--ease-out); }
.pcards .pcard { top: calc(50svh - 25rem + var(--i) * 2rem); }   /* 画面中央より少し上で止まる。1 枚ごとに 2rem ずつ下にずらして重なりを見せる */
/* SP は傾いた角が画面からはみ出ないよう、幅を 33rem・角度を PC の 6 割に（33rem × cos3° + 高さ 56rem × sin3° ≒ 36rem = 画面幅 - 余白） */
.pcard { width: 33rem; transform-origin: 50% 50%; }   /* 中心で回す（PC は下端中心）。左右のはみ出しが対称になる */
.pcard-1 { --i: 0; rotate: 3deg; } .pcard-2 { --i: 1; rotate: -.3deg; } .pcard-3 { --i: 2; rotate: 1.8deg; } .pcard-4 { --i: 3; rotate: -2.4deg; }
.pcard:last-child { margin-bottom: 0; }
.pcard.is-in { transform: none; }
.pcard-label, .pcard-title, .pcard-tag, .pcard-icon { position: static; flex: 0 0 100%; }
.pcard-title { margin-top: 1.6rem; font-size: 2.4rem; }
.pcard-tag { max-width: 28rem; height: 3.4rem; margin: 1.6rem auto 0; font-size: 1.5rem; }
.pcard-icon { width: auto; height: 9rem; margin: 1.2rem auto 1.6rem; transform: none; }
.pcard-q { left: calc(50% + 2.9rem); right: auto; top: 18rem; width: 3.3rem; }   /* PC と同じくアイコンの右上に重ねる（アイコンは中央揃え・幅 7.9rem） */
/* チップは小さめの文字で、なるべく横に並べる（折り返しは行ごとにセンター） */
.pcard .chip { position: static; display: inline-flex; width: auto; height: 3.2rem; margin: 0; padding: 0 1rem; font-size: 1.15rem; line-height: 1; white-space: nowrap; }
/* 矢印 + 解決しよう！ をカードの下に横並び（矢印は PC と同じ向き） */
.problem-solve { position: relative; display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: -3rem; }   /* SP: カードのすぐ下に少し食い込ませて上へ */
.problem-arrow { position: static; left: auto; top: auto; width: 11rem; margin: 7rem 0 0 5rem; rotate: -10deg; transform-origin: 50% 50%; }   /* 見た目で時計回りに 10°（-10°）（transform に左右反転が入っているので符号は逆） */   /* SP: 右へ 50px・下へ 20px（上下中央揃えなので margin-top の半分だけ下がる） */
.problem-deco-layer { position: static; width: 16rem; margin: 10rem 0 0 -4rem; rotate: 6.6deg; }   /* SP: 文字だけ左へ 50px・下へ 50px（上下中央揃えなので margin-top の半分だけ下がる） */   /* SVG は右上がり約 9°。4 枚目のカード（SP -2.4°）と同じ角度に */

/* ---------- 05 solution（青い山なり） ---------- */
.sec-solution { height: auto; padding-top: 23rem; padding-bottom: 6rem; margin-top: calc(var(--hill-arc) * -1); isolation: isolate; overflow: clip; --hill: var(--blue); display: flex; flex-direction: column; }
.sec-solution::before { content: ""; position: absolute; left: -130vw; top: 0; width: 360vw; height: 360vw; border-radius: 50%; background: var(--hill); z-index: -1; }
.sec-solution::after { content: ""; position: absolute; left: 0; right: 0; top: var(--hill-arc); bottom: 0; background: var(--hill); z-index: -1; }
.eye-sol-l, .eye-sol-r { top: 11rem; }   /* 山なりの上端から 6.4rem、目の下（見出しまで）は約 4rem */
.eye-sol-l { left: calc(50% - var(--eye-w) * 3.235); }
.eye-sol-r { left: calc(50% + var(--eye-w) * 2.235); }
.sol-head { position: static; width: auto; order: 2; }   /* SP: モックアップの下に見出し */
.sol-title { font-size: 3.2rem; }
.sol-text { position: static; width: auto; margin-top: 3.2rem; font-size: 1.4rem; line-height: 1.9; order: 3; }   /* SP: モックアップの下 */
.sol-phone { position: static; width: 26rem; height: 47.4rem; margin: -4rem auto -5.6rem; order: 1; }   /* 画像の上下に透明の余白があるぶん、マイナスで詰める */   /* SP: 目の下にまずモックアップ（上下の余白は小さめ） */   /* 画像は横長を object-fit で切り抜いているので高さを指定 */
.scards { position: static; flex-direction: column; gap: 2rem; margin-top: 4rem; order: 4; }   /* SP: カード同士の間隔は詰める */
.scard { width: 100%; height: auto; }
.scard-num { left: calc(50% - 5rem); }
.scard-body { height: auto; padding: 4rem 2.4rem 2.8rem; border-radius: 2.8rem; }
.scard-icon { width: 6.4rem; height: 6.4rem; margin-bottom: 2rem; }
.scard h3 { font-size: 2rem; text-align: center; }
.scard p { font-size: 1.4rem; }
.box { position: static; width: auto; padding: 2.8rem 2rem; flex-direction: column; gap: 2.4rem; border-radius: 2.8rem; }
.box-ai { height: auto; margin-top: 4rem; order: 5; }
.box-sec { min-height: 0; margin-top: 3.2rem; order: 6; }
.box-left { width: auto; text-align: center; }
.box-ai .box-icon, .box-sec .box-icon { height: 10rem; margin: 0 auto 1.2rem; }
.box-left h3 { font-size: 2.4rem; }
.box-left p { font-size: 1.4rem; text-align: left; }
.pill-grid { grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0; }   /* SP: 2 列 */
.pill-grid li { height: 5.8rem; padding: 0 .8rem; border-radius: 1rem; font-size: 1.4rem; line-height: 1.35; font-feature-settings: "palt"; word-break: auto-phrase; }   /* 長い項目は 2 行に（文節で折り返す）。高さは固定で揃える */
.br-m { display: inline; }   /* 一覧の項目は「、」「？」の位置で改行 */
.pill-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }   /* 最後に 1 つ余る項目は中央に */
.sec-grid { grid-template-columns: 1fr; gap: 1.2rem; }
.sec-grid li { min-height: 0; padding: 2.4rem 2rem; }
.sec-grid h4 { font-size: 1.8rem; }
.sec-grid p { margin-top: 1.4rem; font-size: 1.4rem; }

/* ---------- 06 tools ---------- */
.sec-tools { --tools-pt: 17.2rem; height: auto; padding-top: var(--tools-pt); padding-bottom: 10rem; }   /* PC と同じく、上下・目の下・スライダーの上をゆったり（前のボックスから目まで 11rem、目の下 6rem） */
.sec-tools > .eye:first-of-type { left: calc(50% - var(--eye-w) * 3.235); top: 5rem; }   /* 固定ヘッダーの下に隠れない位置 */
.sec-tools > .eye:first-of-type + .eye { left: calc(50% + var(--eye-w) * 2.235); top: 5rem; }
.tools-title { position: static; font-size: 2.8rem; line-height: 1.3; }
.tools-title .is-yellow { display: inline-block; }   /* 「つなげます。」の途中で折れないように */
.tools-illust { display: none; }   /* SP はびっくりなし */
.tools-text { position: static; width: auto; margin-top: 3.2rem; font-size: 1.4rem; line-height: 1.9; }
.logo-marquee { position: static; width: calc(100% + var(--gx) * 2); margin: 6rem calc(var(--gx) * -1) 0; }
.logo-track { gap: 1.2rem; }
.logo-track li { width: 10rem; height: 10rem; padding: 1.2rem; border-radius: 2.4rem; }
.logo-track img { width: 5.2rem; }
.logo-track li:nth-child(7) img, .logo-track li:nth-child(19) img { width: 8rem; }

/* ---------- 07〜 スタック（固定して重ねない。順に流れる） ---------- */
.stack { position: static; margin-top: 0; width: auto; }
.stack > .sec { position: relative !important; top: auto !important; }
/* PC と同じく、ゆとりをつくろう〜ゆとりができるまでは下端で止まり、次のセクションが重なってくる（止まる位置は JS が --stick-top に入れる） */
.stack > .sec-service, .stack > .svc-1, .stack > .svc-2, .stack > .sec-flow { position: sticky !important; top: var(--stick-top, 0) !important; }
.stack > .sec-contact, .stack > .footer { position: relative; }
.stack > .sec-contact { margin-top: calc(var(--hill-arc) * -1); }
.stack > .footer { margin-top: 0; }
.svc-2, .sec-flow, .stack > .sec-price { margin-top: calc(var(--hill-arc) * -1); }

/* Service 導入 */
.sec-service { height: auto; min-height: 100svh; padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; }   /* PC と同じく 1 画面ぶん、中身は縦中央 */
.eye-svc-l, .eye-svc-r { top: calc(50% - var(--svc-half) - 4rem - var(--hero-eye) * 1.1); width: var(--hero-eye); height: calc(var(--hero-eye) * 1.1); }   /* ヒーローと同じ大きさ・同じ置き方（中身の上 4rem） */
.sec-service { --svc-half: 6rem; }
.eye-svc-l { left: 2.4rem; }
.eye-svc-r { left: auto; right: 2.4rem; }
.svc-head { position: static; margin-top: 0; }
.svc-title { font-size: 3.6rem; }
.svc-tabs { position: static; justify-content: center; gap: 3.2rem; margin-top: 2.4rem; }
.svc-tabs a { font-size: 1.6rem; gap: 1rem; }
.svc-tabs .tsvg { height: 1.2rem; }
.tsvg-clip { width: 1.8rem; }

/* 01 / 02 共通 */
.svc-1, .svc-2 { height: auto; padding-top: calc(var(--hill-arc) + 6rem); padding-bottom: 6rem; display: flex; flex-direction: column; }
.svc-wave { left: -60%; width: 220%; height: auto; }
.svc-1 .svc-wave { top: 4rem; }
.svc-2 .svc-wave { top: 3rem; }
.svc > .eye:first-of-type { left: calc(50% - var(--eye-w) * 3.235); top: calc(var(--hill-arc) + 1.2rem); }
.svc > .eye:first-of-type + .eye { left: calc(50% + var(--eye-w) * 2.235); top: calc(var(--hill-arc) + 1.2rem); }
.svc-col { position: static; width: auto; margin-top: 7rem; }
.svc-h { font-size: 3.6rem; }
.svc-catch { font-size: 2.4rem; line-height: 1.4; }
.svc-1 .svc-catch, .svc-2 .svc-catch { margin-top: 2.4rem; white-space: normal; }
.svc-text { font-size: 1.4rem; line-height: 1.9; }
.svc-mockup { position: static; width: 100%; height: auto; margin-top: 3.2rem; }
.svc-demo { position: static; width: 20rem; height: 5.6rem; margin: 2.4rem auto 0; font-size: 2rem; }
.svc-demo-2 { margin-top: 3.2rem; }
/* 吹き出し: 折り返して並べる */
.bubbles { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; margin-top: 4rem; pointer-events: auto; }
.bubble { position: static; width: auto; height: auto; min-height: 4rem; padding: .8rem 1.6rem; font-size: 1.3rem; line-height: 1.4; white-space: normal; text-align: center; }
.bubble::before { display: none; }
/* 白いパネル */
.panel { position: static; width: calc(100% + var(--gx) * 2); margin: 4rem calc(var(--gx) * -1) 0; padding: 4rem var(--gx) 3.2rem; border-radius: 4rem 4rem 0 0; height: auto; }
.panel-1, .panel-2 { height: auto; padding-top: 4rem; }
.panel-title { font-size: 3rem; line-height: 1.3; }
.panel-lead { margin-top: 1.6rem; font-size: 1.4rem; line-height: 1.8; text-align: left; }
.panel-lead br { display: none; }
/* 3 つのゆとりカード */
.ycards { flex-direction: column; gap: 3.2rem; margin-top: 4rem; }
.ycard { width: 100%; height: auto; }
.ycard-en { position: relative; left: auto; top: auto; width: auto; z-index: 1; }
.ycard-h { position: relative; left: auto; top: auto; width: auto; margin-top: .8rem; font-size: 2.6rem; z-index: 1; }
.ycard-body { position: static; width: auto; height: auto; margin-top: -1.6rem; padding: 3.6rem 2rem 2rem; }
.ycard-chip { height: auto; min-height: 4rem; padding: .6rem 1.2rem; font-size: 1.5rem; }
.ycard-img { height: 22rem; margin-top: 2.4rem; }
.ycard-list { margin-top: 2.4rem; }
.ycard-list li b { font-size: 1.6rem; }
.ycard-list li p { font-size: 1.4rem; }
.ycard-kpi { position: static; height: auto; margin-top: 2.4rem; padding: 1.4rem 1rem; }
.ycard-kpi b { font-size: 2.6rem; }
/* 毎月のサイクル図: PC のまま縮める（幅 76rem を画面幅に合わせる） */
.cycle { --k: .475; position: relative; left: auto; top: auto; margin: 3.2rem 0 calc(50.4rem * (var(--k) - 1)); transform-origin: 0 0; scale: var(--k); }   /* 図の幅 76rem × k = 画面の中身の幅（39.3 - 4 = 35.3rem） */
/* 支援内容カード */
.mcards { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 3.2rem; }
.mcard { height: auto; padding: 2.8rem 2rem 2.4rem; }
.mcard h4 { font-size: 2.2rem; }
.mcard p { font-size: 1.4rem; }

/* ---------- 10 flow ---------- */
.sec-flow { height: auto; padding-top: calc(var(--hill-arc) + 6rem); padding-bottom: 6rem; }
.flow-wave { left: -60%; top: 3rem; width: 220%; height: auto; }
.sec-flow > .eye:first-of-type { left: calc(50% - var(--eye-w) * 3.235); top: calc(var(--hill-arc) + 1.2rem); }
.sec-flow > .eye:first-of-type + .eye { left: calc(50% + var(--eye-w) * 2.235); top: calc(var(--hill-arc) + 1.2rem); }
.flow-head { position: static; margin-top: 7rem; }
.flow-title { font-size: 3.2rem; }
.flow-lead { margin-top: 2rem; font-size: 1.5rem; line-height: 1.8; }
.flow-lead br { display: none; }
.flow-line { display: none; }
.steps { position: static; flex-direction: column; gap: 3.2rem; margin-top: 4rem; }
.step { width: auto; margin-right: 0; display: grid; grid-template-columns: 8.8rem 1fr; column-gap: 1.6rem; align-items: start; text-align: left; }
.step.is-low { padding-top: 0; }
.step-c { width: 8.8rem; height: 8.8rem; margin: 0; grid-row: 1 / 3; }
.step-c small { font-size: 1rem; }
.step-c b { font-size: 3rem; }
.step h3 { margin-top: .4rem; font-size: 2rem; }
.step h3 br { display: none; }
.step p { margin-top: 1rem; font-size: 1.4rem; }
.phases { position: static; display: flex; flex-direction: column; gap: 1.2rem; width: auto; height: auto; margin-top: 4rem; }
.phase { position: relative; left: auto; flex: none; width: 100%; height: 6.4rem; border-radius: 20rem; padding-left: 2.4rem; }
.ph1, .ph2 { left: auto; width: 100%; border-radius: 20rem; }
.ph-name { font-size: 1.8rem; }
.ph-sub { display: none; }
.ph-term { right: 1.2rem; top: 1.5rem; width: auto; padding: 0 1.4rem; }

/* ---------- 11 price + シミュレーション + FAQ ---------- */
.sec-price { min-height: 0; padding: calc(var(--hill-arc) + 6rem) var(--gx) 6rem; display: flex; flex-direction: column; }
.price-wave { left: -60%; top: 3rem; width: 220%; height: auto; }
.sec-price > .eye:first-of-type { left: calc(50% - var(--eye-w) * 3.235); top: calc(var(--hill-arc) + 1.2rem); }
.sec-price > .eye:first-of-type + .eye { left: calc(50% + var(--eye-w) * 2.235); top: calc(var(--hill-arc) + 1.2rem); }
.price-head { position: static; margin-top: 7rem; text-align: center; }
.price-head .label { margin-left: 0; }
.price-head .tsvg { margin-inline: auto; }
.price-title { font-size: 3.2rem; }
.price-lead { position: static; width: auto; margin-top: 2rem; font-size: 1.4rem; line-height: 1.9; }
.plans { position: static; flex-direction: column; gap: 3.2rem; margin-top: 3.2rem; }
.plan { width: 100%; height: auto; padding: 4rem 2.4rem 2.4rem; border-radius: 3.2rem; }
.plan-name { font-size: 2.6rem; }
.pbox { height: 10rem; }
.pbox-v b { font-size: 4rem; }
.plan-rows { margin-top: 2.4rem; }
.plan-total { margin-top: 2.4rem; height: 8rem; }
.price-note { position: static; width: auto; margin-top: 2.4rem; font-size: 1.3rem; text-align: left; }
.sim { margin: 8rem 0 0; width: auto; }
.sim-title { font-size: 2.8rem; line-height: 1.3; }
.sim-formula { grid-template-columns: 1fr; row-gap: .8rem; margin-top: 3.2rem; padding: 1.6rem; }
.sim-f { padding: 2rem 1.6rem; }
.sim-f-v b { font-size: 4.8rem; }
.sim-op { font-size: 2.8rem; }
.sim-cards { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 2.4rem; }
.sim-card { padding: 2.8rem 2rem 2rem; }
.sim-card h4 { font-size: 1.9rem; }
.sim-card li { font-size: 1.4rem; gap: 1.2rem; }
.sim-note { font-size: 1.3rem; text-align: left; }
.faq { display: block; width: auto; margin: 8rem 0 0; }
.faq-head { text-align: center; }
.faq-head .tsvg { margin-inline: auto; }
.faq-title { font-size: 3.2rem; }
.faq-list { width: auto; margin-top: 2.4rem; gap: 1.6rem; }
.faq details { border-radius: 2.4rem; }
.faq summary { gap: 1.2rem; min-height: 6.4rem; padding: 1.4rem 1.6rem; font-size: 1.5rem; line-height: 1.4; }
.faq .q { width: 3.6rem; height: 3.6rem; font-size: 1.6rem; }
.faq .plus { width: 3rem; height: 3rem; }
.faq details p { padding: 0 2rem 2rem 6.4rem; font-size: 1.4rem; }

/* ---------- 12 contact ---------- */
.sec-contact { height: auto; padding: calc(var(--hill-arc) + 6rem) var(--gx) 6rem; display: flex; flex-direction: column; }
.sec-contact::before { background: var(--blue); }
.sec-contact::after { content: ""; background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 55%, #71aaff 72%, var(--white) 92%); }
.contact-wave { left: -60%; top: auto; bottom: 30%; width: 220%; height: auto; }
.eye-contact { top: calc(var(--hill-arc) + 1.2rem); }
.sec-contact > .eye:first-of-type { left: calc(50% - var(--eye-w) * 3.235); }
.sec-contact > .eye:first-of-type + .eye { left: calc(50% + var(--eye-w) * 2.235); }
.contact-head { position: static; margin-top: 7rem; order: 1; }
.contact-head .label { font-size: 1.6rem; }
.contact-title { font-size: 3rem; line-height: 1.4; }
.contact-text { position: static; width: auto; margin-top: 2rem; font-size: 1.4rem; line-height: 1.9; order: 2; }
.contact-btn { position: static; width: 100%; height: 7.2rem; margin-top: 3.2rem; font-size: 2rem; order: 3; }
.contact-phone { position: static; width: 26rem; height: 47.5rem; margin: 4.8rem auto 0; order: 4; }

/* ---------- 13 footer ---------- */
.footer { width: auto; height: auto; padding: 6rem var(--gx) 10rem; background: var(--white); }   /* PC は Contact の白い裾に載っているが、SP は自前で白に */
.footer-lead { position: static; }
.footer-copy { font-size: 4rem; }
.footer-logo { position: static; width: 24rem; margin-top: 2.4rem; }
.footer-nav { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 2rem; margin-top: 5.6rem; }
.fcol { gap: 2rem; font-size: 1.5rem; }
.fcat { font-size: 1.5rem; }
.fcol-svc ul { gap: 2rem; }
.fcol-svc li { font-size: 1.5rem; }
.footer-company { position: static; margin-top: 5.6rem; text-align: left; }
.fc-name { justify-content: flex-start; font-size: 1.6rem; }
.fc-addr { margin-top: 1.2rem; font-size: 1.3rem; line-height: 1.6; }
.footer-sns { position: static; gap: 2rem; margin-top: 3.2rem; }
.footer-sns img { width: 3.2rem; height: 3.2rem; }
.footer-bottom { position: static; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-top: 3.2rem; font-size: 1.1rem; }

/* ---------- 会社概要モーダル ---------- */
.cmodal { padding: var(--gx); }
.cmodal-box { width: 100%; padding: 4.8rem 2.4rem 4rem; border-radius: 2.4rem; }
.cmodal-close { right: 1.6rem; top: 1.6rem; width: 3.6rem; height: 3.6rem; }
.cmodal-title { font-size: 2.8rem; }
.cmodal-lead { margin-top: 2rem; font-size: 1.4rem; line-height: 1.9; }
.cmodal-list { margin-top: 2.4rem; }
.cmodal-list > div { grid-template-columns: 8.4rem 1fr; gap: 1.6rem; padding: 1.6rem 0; font-size: 1.4rem; }
.cmodal-head { padding-right: 0; gap: 1.6rem; }
.cmodal-logo { width: 12rem; margin-top: 0; }

/* ---------- メニュー（SP は style.css の 767px 以下の指定を使う。ここは TB 以下共通の微調整） ---------- */
.mnav-logo { left: var(--gx); top: 2.1rem; width: 12rem; }
.mnav-close { right: var(--gx); top: 1.6rem; width: 3.6rem; height: 3.6rem; }
.mnav-body { grid-template-columns: 1fr; gap: 5rem; padding: 10rem var(--gx) 12rem; }
.mnav-eyes { display: none; }
.mnav-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 2rem; }
.mnav-list a { font-size: 2.2rem; gap: 1.2rem; }   /* SP: 少し小さく */
.mnav-list .n { font-size: 1.2rem; top: -.4rem; }
.mnav-sub { padding-left: 3rem; }
.mnav-sub a { font-size: 1.9rem; padding-left: 2.6rem; }
.mnav-sub a::before { width: 1.4rem; height: 1.4rem; margin-top: -.7rem; }
.mnav-btns { flex-direction: column; gap: 1.2rem; }
.mnav-contact, .mnav-demo { flex: none; height: 6.4rem; padding: 0 2.4rem; font-size: 1.7rem; }

/* =========================================================
   タブレット（768〜1199）: 1rem = 10px @768。SP より一回り大きく、並べられるものは 2 列
   ========================================================= */
@media (min-width: 768px) {
  :root { --gx: 4.8rem; }
  .header { top: 2.4rem; left: 2.4rem; right: 2.4rem; height: 4rem; }   /* TB のヘッダーだけ左右 24px */
  .mnav-logo { left: 2.4rem; }
  .mnav-close { right: 2.4rem; }
  .logo { width: 16rem; top: .5rem; }   /* TB は元の位置のまま */
  .btn-grp { height: 3.4rem; gap: .6rem; }   /* ヘッダー右上のボタンは PC より少し小さく */
  .btn { height: 3.4rem; font-size: 1.2rem; }
  .btn-demo, .btn-contact { display: inline-flex; font-size: 1.3rem; }
  .btn-demo { width: 9.6rem; }
  .btn-contact { width: 11.4rem; }
  .btn-menu { width: 11.2rem; padding: 0 1.4rem 0 1.2rem; gap: 1rem; }   /* 点と MENU が収まる幅 */
  .fix-btn { width: 36rem; margin-left: -18rem; height: 5.6rem; font-size: 1.6rem; }
  :root { --eye-w: 6.4rem; --hero-eye: 12rem; }
  .eye-hero-l, .eye-hero-r { top: calc(50svh - var(--hero-eye) * .55 - 3rem) !important; }   /* コピーと同じ高さ（コピーと一緒に 4rem 上げた位置 + 1rem 上） */
  .eye-hero-l { left: 3rem !important; }
  .eye-hero-r { right: 3rem !important; }

  .hero-title { font-size: 6.4rem; translate: 3.2rem -4rem; }   /* TB は目とコピーが横並び */
  .hero-wave { left: -85.1%; width: 240%; top: auto; bottom: 16rem; }   /* 50% - 240% × .563 */

  .sec-what, .sec-three { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 8rem; }   /* TB は画面 1 枚ぶん。中身は上下中央 */
  .what-title, .tools-title { font-size: 3.6rem; }
  .what-cloud { width: 100%; max-width: 52rem; margin-left: auto; margin-right: auto; }
  .ball-1 { left: 0; }
  .ball-2 { right: 0; }
  .ball-1 { width: 11rem; height: 11rem; }
  .ball-1 .l1 { top: 1.6rem; font-size: 2.2rem; } .ball-1 .l2 { top: 3.8rem; font-size: 1.2rem; } .ball-1 .l3 { top: 5.5rem; font-size: 1.6rem; } .ball-1 .l4 { top: 7.4rem; font-size: 1.6rem; }
  .ball-2 { width: 9.4rem; height: 9.4rem; }
  .ball-2 .l1 { top: 2rem; font-size: 2.1rem; } .ball-2 .l2 { top: 4.9rem; font-size: 1.4rem; }
  .three-title .t1, .three-title .t2, .three-title .t3 { font-size: 3.4rem; }
  .three-title .t2 { height: 6.8rem; }
  .three-illust { left: calc(50% + 17.3rem); top: -2rem; width: 3.4rem; }
  .three-diagram { display: block; position: static; width: 100%; max-width: 56rem; height: auto; margin: 2.4rem auto 0; }   /* TB は 1 枚絵に戻す */
  .three-circles { display: none; }

  .problem-title, .sol-title, .flow-title, .price-title, .svc-h { font-size: 4rem; }
  .faq-title { font-size: 2.8rem; }   /* よくある質問は「いつ「ゆとり」に変わるのか？」と同じ大きさ */
  .faq-list { margin-top: 4.8rem; }   /* 見出しの下をゆったり */
  .faq details:not([open]) { border-radius: 10rem; }   /* 閉じているときは両端を丸く（開くと 2.4rem の角丸） */
  .br-tb { display: inline; }   /* 「業務に」で改行 */
  .problem-text, .sol-text, .tools-text, .svc-text, .price-lead, .contact-text { font-size: 1.5rem; }
  .problem-illust { max-width: 44rem; }
  .problem-wave { left: -84.9%; top: 39.6%; width: 240%; }   /* 50% - 240% × .562 */
  .pcards { max-width: 52rem; margin: 4rem auto 0; --stick: 8.5rem; }
  .pcard { width: calc(100% - 2.4rem); }
  .problem-top { top: 8rem; }
  .pcards .pcard { top: calc(50svh - 23.5rem + var(--i) * 2rem); }
  .pcard .chip { height: 3.6rem; font-size: 1.3rem; padding: 0 1.2rem; }
  .pcard-1 { rotate: 5deg; } .pcard-2 { rotate: -.5deg; } .pcard-3 { rotate: 3deg; } .pcard-4 { rotate: -4deg; }   /* TB は PC と同じ角度 */
  .problem-deco-layer { width: 20rem; margin: 0; rotate: 5deg; }   /* 4 枚目のカード（TB -4°）と同じ。TB は文字の位置そのまま */
  .problem-arrow { width: 14rem; }
  .problem-pin { padding-bottom: 18rem; }
  .problem-solve { gap: .4rem; margin-top: 8rem; }   /* 矢印と文字は近づけ、カードとの間は広く */
  .problem-arrow { margin-top: -2.4rem; margin-left: 7.2rem; rotate: 0deg; }   /* 右へ・少し下へ。TB は回転なし */   /* 矢印の見た目の重心（左下寄り）を文字の中央に合わせる（translate はバウンドのアニメに使われるので margin で） */

  /* TB: 説明文とモックアップを横並び */
  .sec-solution { display: grid; grid-template-columns: 1fr 22rem; column-gap: 3.2rem; align-items: start; padding-top: 28rem; }
  .scards, .box { grid-column: 1 / -1; }
  .sol-head { grid-column: 1; grid-row: 1; }
  .sol-text { grid-column: 1; grid-row: 2; align-self: end; }
  .sol-phone { grid-column: 2; grid-row: 1 / 3; width: 28rem; max-width: none; height: 51.2rem; margin: -11rem -4.8rem -9.4rem 0; justify-self: end; align-self: end; }   /* 画像下の透明部分（約 9.4rem）ぶん下げ、見た目の端末の下端を説明文の最終行に揃える */   /* 大きく。列幅（左エリア）は変えず、上と右にはみ出させる（上 11rem・右は余白いっぱい） */   /* 少し小さくして、見出しと説明文の間を詰める */   /* 見出しの横まで上げて、下端は説明文の下端に揃える */
  .scards { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 4rem 2.4rem; }   /* 2 段とも同じ高さ（4 枚すべて揃う） */
  .scard { display: flex; flex-direction: column; }
  .scard-body { flex: 1; }   /* TB: 同じ段のカードの高さを揃える */
  .scard h3 { font-size: 1.8rem; }   /* 「プロトタイプを試用しながら進行」が 1 行に収まる大きさ */
  .box { padding: 3.2rem 2.8rem; }
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .pill-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }   /* TB: 3 列 */
  .pill-grid li { height: 6.4rem; padding: 0 1rem; border-radius: 1rem; font-size: 1.7rem; }   /* 2 行に収まる最大の大きさ */   /* TB も 2 行になるので角丸 10px */
  .pill-grid li:last-child:nth-child(odd) { grid-column: auto; width: auto; }   /* TB は 3 列でちょうど割り切れる */
  .sec-tools { --tools-pt: 28.2rem; padding-bottom: 12rem; }   /* 前のボックスから目まで 20rem、目の下 7.2rem */
  .sec-tools > .eye:first-of-type, .sec-tools > .eye:first-of-type + .eye { top: 14rem; }
  .tools-text { margin-top: 4rem; }
  .logo-marquee { margin-top: 7.2rem; }
  .tools-illust { display: block; font-size: 3.6rem; left: calc(50% + 6.64em); right: auto; top: calc(var(--tools-pt) - .525em); width: .953em; }   /* PC と同じく「す。」の右上（見出しの文字サイズに比例） */
  .eye-svc-l, .eye-svc-r { top: calc(50% - var(--hero-eye) * .55 - .5rem); }   /* ヒーローと同じく、見出しの左右 */
  .eye-svc-l { left: 3rem; }
  .eye-svc-r { right: 3rem; }
  /* TB: システム開発・AI導入支援・ゆとりができるまで・ゆとりへの投資の上の余白は Solution と同じ（目 11rem・見出し 28rem） */
  .svc-1, .svc-2, .sec-flow, .sec-price { padding-top: 28rem; }
  .svc-1, .svc-2, .sec-flow { padding-bottom: 28rem; }   /* 緑・赤・紫の下はさらにゆったり（最後の要素から次の山まで 28rem） */
  .sec-price { padding-bottom: 20rem; }   /* よくある質問の下 */
  .svc > .eye:first-of-type, .svc > .eye:first-of-type + .eye,
  .sec-flow > .eye:first-of-type, .sec-flow > .eye:first-of-type + .eye,
  .sec-price > .eye:first-of-type, .sec-price > .eye:first-of-type + .eye { top: 11rem; }
  .svc-col, .flow-head, .price-head { margin-top: 0; }
  .svc-1 .svc-wave, .svc-2 .svc-wave { top: 33.7rem; left: -35.3%; }
  .flow-wave, .price-wave { top: 36.1rem; left: -35.3%; }   /* 波は見出しの下あたり。ループ（画像の 56.3%）は右寄り（680px 付近）に */
  .box-left h3 { font-size: 2.8rem; }
  .logo-track li { width: 13rem; height: 13rem; }
  .logo-track img { width: 6.4rem; }
  .logo-track li:nth-child(7) img, .logo-track li:nth-child(19) img { width: 9.6rem; }

  .svc-title { font-size: 4.4rem; }
  .svc-tabs a { font-size: 2rem; }
  .svc-catch { font-size: 3rem; }
  .svc-mockup { max-width: 60rem; margin: 6.4rem auto 0; }   /* メイン画像の上下をゆったり */
  .svc-demo-1 { margin-top: 4.8rem; }
  .panel-title { font-size: 3.6rem; }
  .panel { width: calc(100% + 4.8rem); margin-left: -2.4rem; margin-right: -2.4rem; padding-left: 2.4rem; padding-right: 2.4rem; border-radius: 4rem; }   /* TB: 画面の左右から 24px。中の文字は他と同じ 48px の位置 */
  .ycards { gap: 4rem; }   /* TB: 3 枚なので縦に並べる */
  .bubbles { position: relative; z-index: 4; margin-bottom: -10.6rem; }   /* よくある声（LINE 風の吹き出し）の最後の段を、下の白いパネルに重ねる */
  .panel-1, .panel-2 { padding-top: 16rem; }   /* 見出し＋説明文の上をゆったり（吹き出しの重なり約 8rem ＋ 8rem） */
  .panel-1 .panel-lead { width: 80%; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; word-break: auto-phrase; }   /* ゆとりを設計しよう: 説明文は幅 80% で中央 */
  .panel-2 .panel-lead { text-align: center; }
  .panel-2 .panel-lead br { display: inline; }   /* 支援内容: 「どう使うか。」で改行して中央寄せ */
  .panel-1 .ycards, .panel-2 .mcards { margin-top: 6.4rem; }   /* 見出し＋説明文の下もゆったり */
  .ycard-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.8rem; align-items: start; padding: 4rem 2.8rem 2.8rem; }   /* TB: カードの中は 2 カラム（左に図・右に説明、上にチップ・下にモノサシ） */
  .ycard-chip { grid-column: 1 / -1; }
  .ycard-img { grid-column: 1; grid-row: 2; height: 26rem; }   /* 図の下端（AI の一言・凡例）が切れない高さ */
  .ycard-list { grid-column: 2; grid-row: 2; }
  .ycard-kpi { grid-column: 1 / -1; grid-row: 3; }
  .cycle { --k: .707; margin-top: 6.4rem; margin-bottom: calc(50.4rem * (var(--k) - 1) + 3.2rem); margin-left: calc((67.2rem - 76rem * var(--k)) / 2); }   /* 中身の幅（67.2rem）の 8 割に縮めて中央に。上下をゆったり（下は吹き出しまで 7.2rem） */
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 中身の幅に引っぱられず、2 列を同じ幅に */
  .mcard { min-width: 0; padding-left: 1.6rem; padding-right: 1.6rem; }
  .mcard-img .fig { zoom: .85; }   /* 2 列だと図が横幅に入りきらない（最大 351px / 枠 292px）ので、6 枚そろえて縮小（切れない最大） */

  .steps { gap: 4.8rem; margin-top: 6.4rem; }   /* 丸どうしをつなぐ点線が見える長さに。説明文の下をゆったり */
  .price-lead { width: 80%; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; word-break: auto-phrase; }   /* ゆとりへの投資: 説明文は幅 80% で中央 */
  .flow-lead { width: 80%; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; word-break: auto-phrase; }   /* ゆとりができるまで: 説明文は幅 80% で中央 */
  .step { grid-template-columns: 10rem 1fr; column-gap: 2rem; }
  .step-c { width: 10rem; height: 10rem; }
  /* TB: ゆとりをつくろうから下は、ラベル・タイトル・見出しを中央寄せ（本文は左揃えのまま） */
  .svc-col .label, .svc-h, .svc-catch, .flow-head .label, .flow-title, .price-head, .sim-head, .faq-head, .contact-head { margin-left: 0; text-align: center; }
  .svc-col .label .tsvg, .flow-head .tsvg, .faq-head .tsvg, .contact-head .tsvg { margin-inline: auto; }
  .svc-1 .label .tsvg, .svc-2 .label .tsvg, .price-head .tsvg, .faq-head .tsvg { object-fit: cover; object-position: left; }   /* 画像の右側に余白があるので、文字の幅で切って見た目で中央に */
  .svc-1 .label .tsvg { width: calc(241 * .07rem); }
  .svc-2 .label .tsvg { width: calc(204 * .07rem); }
  .price-head .tsvg { width: calc(68 * .07rem); }
  .faq-head .tsvg { width: calc(56 * .07rem); }
  .step { position: relative; }
  .step:not(:last-child)::after { content: ""; position: absolute; left: 4.8rem; top: 10.6rem; bottom: -4.2rem; width: .4rem; background: radial-gradient(circle, var(--yellow) .2rem, transparent .22rem) center top / .4rem .9rem repeat-y; }   /* 黄色の丸どうしを点線でつなぐ（丸の下 .6rem 〜 次の丸の上 .6rem） */
  .step h3 { font-size: 2.2rem; }
  .step p { font-size: 1.5rem; }
  .phases { flex-direction: row; gap: 1.6rem; }
  .phase { flex: 1 1 0; width: auto; }
  .ph-sub { display: inline; }

  .plans { gap: 4rem; margin-top: 6.4rem; }   /* TB: 料金表は縦並び。説明文の下をゆったり */
  .sim-formula { grid-template-columns: 1fr 5rem 1fr 5rem 1fr; row-gap: 0; }
  .sim-f { padding: 2rem 1rem; }
  .sim-f-v b { font-size: 4rem; }
  .sim-f-v small { white-space: nowrap; }   /* 「万円」が折れないように */
  .sim-cards { grid-template-columns: 1fr 1fr; }

  /* TB: Contact は左に見出し・説明文・ボタン、右にモックの 2 カラム */
  .sec-contact { display: grid; grid-template-columns: 1fr 22rem; column-gap: 3.2rem; align-items: start; padding-top: 28rem; }   /* 列幅は Solution（業務に AIをプラス する）と同じ */
  .eye-contact { top: 11rem; }   /* 目・見出しの位置は他のセクションと同じ（目 11rem・見出し 28rem） */
  .contact-head { grid-column: 1; grid-row: 1; margin-top: 0; text-align: left; }
  .contact-head .tsvg { margin-inline: 0; }
  .contact-text { grid-column: 1; grid-row: 2; }
  .contact-btn { grid-column: 1; grid-row: 3; width: 100%; margin-left: 0; margin-right: 0; }
  .contact-phone { grid-column: 2; grid-row: 1 / 4; align-self: end; justify-self: end; width: 28rem; max-width: none; height: 51.2rem; margin: -11rem -4.8rem -9.4rem 0; }   /* Solution と同じ: 見出しの上まで伸ばし、端末の下端をボタンの下端に揃える。右は余白いっぱい */

  .footer-copy { font-size: 6.4rem; }
  .footer-nav { grid-template-columns: repeat(4, max-content); gap: 3.2rem; }
  /* TB: フッターは全体を中央寄せ。ロゴは会社名の前へ（HTML は PC の配置のため動かさず、並び順で入れ替え） */
  .footer { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer-lead { display: contents; }
  .footer-copy { order: 1; translate: .5em 0; }   /* 「る」「り」（3 文字目）が画面の中央に来るよう、半文字ぶん右へ */
  .footer-nav { order: 2; justify-content: center; }
  .fcol, .fcol-svc ul { align-items: center; }
  .footer-logo { order: 3; width: 25rem; margin-top: 11.2rem; }
  .footer-company { order: 4; margin-top: 6.4rem; text-align: center; }   /* ロゴの上下をゆったり */
  .fc-name { justify-content: center; }
  .footer-sns { order: 5; justify-content: center; margin-top: 5.6rem; }
  .footer-bottom { order: 6; justify-content: center; margin-top: 5.6rem; }   /* SNS の上下をゆったり */

  .mnav-body { padding: 12rem var(--gx) 12rem; }
  .mnav-eyes { display: flex; justify-content: center; gap: 40rem; }   /* PC と同じ間隔（幅 9rem × 4.47） */
  .mnav-eye { width: 9rem; height: 10rem; }
  .mnav-list { grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: 3.2rem 6rem; }
  .mnav-list a { font-size: 2.8rem; }
  .mnav-btns { flex-direction: row; }
  .mnav-contact { flex: 1 1 0; }
  .mnav-demo { flex: 0 0 18rem; }
}

/* ---------- SP だけ: タイトル・見出しは中央寄せ（本文は左揃えのまま） ---------- */
@media (max-width: 767px) {
  .what-label, .what-title, .problem-head, .sol-head, .svc-col .label, .svc-h, .svc-catch, .flow-head, .price-head, .sim-head, .faq-head, .contact-head { margin-left: 0; text-align: center; }
  .problem-head .tsvg, .sol-head .tsvg, .svc-col .label .tsvg, .flow-head .tsvg, .price-head .tsvg, .faq-head .tsvg, .contact-head .tsvg { margin-inline: auto; }
  .sol-head .tsvg, .svc-1 .label .tsvg, .svc-2 .label .tsvg, .price-head .tsvg, .faq-head .tsvg { object-fit: cover; object-position: left; }   /* 画像の右側に余白があるので、文字の幅で切って見た目で中央に */
  .sol-head .tsvg { width: calc(109 * .07rem); }
  /* 今使っているツール: 目のセット（2 つの目＋間隔）を縦横比を保ったまま 82% に縮める */
  .sec-tools > .eye { scale: .82; transform-origin: 50% 50%; }
  .sec-tools > .eye:first-of-type { left: calc(50% - var(--eye-w) * 2.735 * .82 - var(--eye-w) / 2); }
  .sec-tools > .eye:first-of-type + .eye { left: calc(50% + var(--eye-w) * 2.735 * .82 - var(--eye-w) / 2); }
  /* 緑・赤・紫・水色: 目は「今使っているツール」と同じ（目のセットを 82%）。上は目と見出しを下げてゆったり、下は広めに */
  .svc > .eye, .sec-flow > .eye, .sec-price > .eye, .sec-contact > .eye { scale: .82; transform-origin: 50% 50%; }
  .svc > .eye:first-of-type, .sec-flow > .eye:first-of-type, .sec-price > .eye:first-of-type, .sec-contact > .eye:first-of-type { left: calc(50% - var(--eye-w) * 2.735 * .82 - var(--eye-w) / 2); top: calc(var(--hill-arc) + 4.8rem); }
  .svc > .eye:first-of-type + .eye, .sec-flow > .eye:first-of-type + .eye, .sec-price > .eye:first-of-type + .eye, .sec-contact > .eye:first-of-type + .eye { left: calc(50% + var(--eye-w) * 2.735 * .82 - var(--eye-w) / 2); top: calc(var(--hill-arc) + 4.8rem); }
  .svc-col, .flow-head, .price-head, .contact-head { margin-top: 10.4rem; }   /* Contact も同じ */
  .svc-1, .svc-2, .sec-flow, .sec-price { padding-bottom: 14rem; }
  /* 波はタブレットと同じ関係: 上端を見出しの下端に、ループは画面幅の約 88% の位置（文字にかからない右寄り） */
  .svc-1 .svc-wave, .svc-2 .svc-wave { top: 24.5rem; left: -35.3%; }
  .flow-wave, .price-wave { top: 26.3rem; left: -35.3%; }
  /* ステップ: 黄色の丸は小さく（8.8rem → 7.2rem）、丸どうしを点線でつなぐ */
  .br-sp { display: inline; }   /* SP だけの改行 */
  .faq-title { font-size: 2.8rem; }   /* よくある質問は「いつ「ゆとり」に変わるのか？」と同じ大きさ */
  .faq-list { margin-top: 4rem; }   /* 見出しの下をゆったり */
  .price-lead { width: 95%; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; word-break: auto-phrase; }   /* ゆとりへの投資: 説明文は幅 95% で中央 */
  .plans { margin-top: 5.6rem; }   /* 説明文の下を少しゆったり */
  .faq summary { gap: 1rem; min-height: 5.6rem; padding: 1rem 1.2rem; }   /* 白いバーの内側を少し詰める */
  .faq details p { padding: 0 1.2rem 1.6rem 5.8rem; }   /* 答えの左は質問の文字（Q の後ろ）、右は × の右端まで */
  .step { grid-template-columns: 7.2rem 1fr; position: relative; }
  .step-c { width: 7.2rem; height: 7.2rem; }
  .step-c small { font-size: .9rem; }
  .step-c b { font-size: 2.4rem; }
  .step:not(:last-child)::after { content: ""; position: absolute; left: 3.4rem; top: 7.8rem; bottom: -2.6rem; width: .4rem; background: radial-gradient(circle, var(--yellow) .2rem, transparent .22rem) center top / .4rem .9rem repeat-y; }
  /* 緑・赤の白いパネルは画面の左右から 16px（中の文字はさらに 16px 内側） */
  .panel { width: auto; margin: 4rem 0 0; padding: 14rem 1.6rem 3.2rem; border-radius: 3.2rem; }   /* 内側の上をゆったり（吹き出しの重なり 6rem ＋ 8rem） */
  /* よくある声（LINE 風の吹き出し）: 左右にランダムに散らし、最後の段を白いパネルに重ねる */
  .bubbles { position: relative; z-index: 4; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .6rem; margin-bottom: -10rem; }
  .bubble { align-self: flex-start; max-width: 92%; text-wrap: balance; word-break: auto-phrase; }   /* 2 行になるものは文節で均等に折り返す */
  .bubble.tail-r { align-self: flex-end; }
  .bubble::before { display: block; }   /* しっぽを表示 */
  .bubble:nth-child(1) { margin-left: .8rem; }
  .bubble:nth-child(2) { margin-right: 2.4rem; }
  .bubble:nth-child(3) { margin-left: 0; }
  .bubble:nth-child(4) { margin-right: .4rem; margin-left: 2.8rem; }
  .bubble:nth-child(5) { margin-left: 3.6rem; margin-right: 1.2rem; }
  .bubble:nth-child(6) { margin-right: 1.6rem; margin-left: 1.2rem; }
  .bubble:nth-child(7) { margin-left: 1.6rem; }
  .bubble:nth-child(8) { margin-right: 3.2rem; }
  .bubble:nth-child(9) { margin-left: 2.4rem; }
  .bubble:nth-child(10) { margin-right: .8rem; }
  .svc-1 .bubble:nth-child(3) { display: none; }   /* 「お客様の情報が散らばって…」は SP では非表示 */
  .svc-1 .bubble:nth-child(2) { order: -1; }   /* 「前任者のマクロ…」を一番上へ */
  .svc-2 .bubble:nth-child(7), .svc-2 .bubble:nth-child(8) { display: none; }   /* 2 行になる吹き出し（ChatGPT…／社内にAIに詳しい人…）は SP では非表示 */
  .panel-lead { width: 95%; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; word-break: auto-phrase; }   /* 最初の説明文は幅 95% で中央 */
  .panel-1 .ycards, .panel-2 .mcards { margin-top: 8rem; }   /* 説明文の下をゆったり */
  .mcards { grid-template-columns: minmax(0, 1fr); }   /* 図の中身の幅に引っぱられてパネルからはみ出さないように */
  .mcard { min-width: 0; padding-left: 1.6rem; padding-right: 1.6rem; }
  .mcard-img .fig { zoom: .82; }   /* いちばん幅の広い図（351px）がカードの中（297px）に収まるよう、6 枚そろえて縮小 */
  .svc-1 .label .tsvg { width: calc(241 * .07rem); }
  .svc-2 .label .tsvg { width: calc(204 * .07rem); }
  .price-head .tsvg { width: calc(68 * .07rem); }
  .faq-head .tsvg { width: calc(56 * .07rem); }
}

/* ---------- SP だけ: フッターはタブレットの組み方を踏襲（全体中央寄せ・ロゴは会社名の前） ---------- */
@media (max-width: 767px) {
  .footer { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: .8rem; }   /* コピーの上を詰める */
  .sec-contact { padding-bottom: 3rem; }
  .contact-phone { margin-bottom: -6rem; }   /* 画像下の透明な部分を詰める */
  .contact-wave { bottom: 18.9rem; left: -47.5%; }   /* 波の中心をスマホ（端末）の縦の中心に。ループは少し右（画面の約 76%） */
  .footer-lead { display: contents; }
  .footer-copy { order: 1; font-size: 5.2rem; translate: .5em 0; }   /* 「る」「り」（3 文字目）が画面の中央に来るよう、半文字ぶん右へ */
  .footer-nav { display: none; }   /* SP はフッターのナビなし（メニューにあるため） */
  .fcol, .fcol-svc ul { align-items: center; }
  .footer-logo { order: 3; width: 20rem; margin-top: 6rem; }
  .footer-company { order: 4; margin-top: 4.8rem; text-align: center; }
  .fc-name { justify-content: center; }
  .footer-sns { order: 5; justify-content: center; margin-top: 4rem; }
  .footer-bottom { order: 6; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: 4rem; }   /* Privacy Policy とコピーライトは縦並び */
}