/* =========================================================
   meme LP v3 — Figma "LP_new" フレーム（1920 × 20527）を再現
   基準幅 PC 1920（1rem = デザイン 10px）。TB/SP は未対応。
   各セクションは Figma の絶対座標で配置している。
   Problem（画面固定）以降は --off（= 固定分 + 画面ぴったり 4 画面ぶんの差分）だけ下にずれる。
   ========================================================= */

:root {
  --blue: #0066ff;        /* siteColor/mainCol */
  --yellow: #ffff00;      /* siteColor/accentCol */
  --light: #98d4e4;       /* siteColor/lightCol（Price） */
  --light2: #b2dfec;      /* Problem とその下の背景（Figma のノードの塗り） */
  --green: #36b665;       /* serv_1 */
  --red: #f2533b;         /* serv_3 */
  --purple: #b668ee;      /* serv_4 */
  --purple-d: #7e40aa;
  --red-d: #cd321a;
  --bubble: #7cf96b;
  --ink: #212121;
  --ink2: #333333;
  --white: #fff;
  --f-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --f-en: "Archivo", "Noto Sans JP", sans-serif;      /* Termina のあたり（wdth 125） */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --pin: 300rem;   /* Problem を画面に固定する間のスクロール量 */
  /* 画面ぴったりのセクション（Hero / What / 3つ / Problem）
     --fit: 1920×1080 の中身を画面の高さに収める倍率（head の script で設定。下限 0.75）
     --S  : セクションの高さ = 100vh。ただし中身が下限まで縮んでも収まらない画面では 108rem × 下限
     --dS : デザイン（108rem）との差。以降のセクションはこの差分だけずらす */
  --fit: 1;
  --S: max(100vh, 108rem * var(--fit));
  --dS: calc(var(--S) - 108rem);
  --stage-top: calc((var(--S) - 108rem * var(--fit)) / 2);   /* 縮めた中身を上下中央に */
  --off: calc(var(--pin) + var(--dS) * 4);                    /* Problem より下のセクションのずれ */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { font-size: calc(100vw / 1920 * 10); scroll-behavior: auto; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--f-jp); color: var(--ink); background: var(--blue); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.lp { display: contents; }   /* <main>: 本文の目印だけ。箱を作らないので絶対配置の基準は .page のまま */
.page { position: relative; display: flow-root; width: 100%; overflow: clip; background: var(--blue); }   /* flow-root: スタックの margin-top が .page の外へ抜けないように */   /* 高さはスタック（Service 導入〜フッター）の分だけ伸びる */

/* 共通: 絶対配置セクション */
.sec { position: absolute; left: 0; width: 192rem; }

/* ラベル（Termina 相当） */
.label { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; font-size: 2.1rem; line-height: 1; letter-spacing: .02em; }
.num { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; line-height: 1; }
.is-yellow { color: var(--yellow); }
.is-green { color: var(--green); }
.is-blue { color: var(--blue); }
.br-tb { display: none; }   /* タブレットだけ改行（mobile.css で表示） */
.br-m { display: none; }   /* TB/SP だけの改行（mobile.css で表示） */
.br-sp { display: none; }   /* SP だけの改行（mobile.css で表示） */

/* Figma のグリフ輪郭から起こしたテキスト SVG（Termina / Helvetica Now） */
.tsvg { display: block; height: calc(var(--h) * .1rem); width: auto; }
.label-center .tsvg { margin-inline: auto; }
.tsvg-clip { width: 2.6rem; object-fit: cover; object-position: left; }
.scard-num .tsvg { margin-inline: auto; }
.pcard-label .tsvg { margin-inline: auto; }

/* 山なり（次のセクションが丸い頂で前のセクションに重なる。Figma: 6042 の円の上端 158px を見せる） */
.hill { isolation: isolate; overflow: clip; }
.hill::before { content: ""; position: absolute; left: var(--hill-x, -206.1rem); top: 0; width: 604.2rem; height: 604.2rem; border-radius: 50%; background: var(--hill); z-index: -1; }
.hill::after { content: ""; position: absolute; left: 0; right: 0; top: 15.8rem; bottom: var(--belly, 0rem); background: var(--hill); z-index: -1; }

/* ---------- 背景 ---------- */
.bg { position: absolute; pointer-events: none; }
.bg-circle { width: 604.2rem; height: 604.2rem; border-radius: 50%; }
.bg-light { left: 0; top: calc(324.5rem + var(--dS) * 3); width: 192rem; height: calc(var(--S) + var(--pin) + 102.1rem); background: var(--light2); z-index: 0; }   /* Figma 'bg' 3208〜5346 */
.bg-sol { left: -237.9rem; top: calc(432.6rem + var(--off)); background: var(--blue); z-index: 1; }   /* Solution の青い山なり（頂は x=642） */

/* ---------- ローディング（LOADING と % → 消えてから見出し・一筆書き・目の順） ---------- */
.loader { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; background: var(--blue); color: var(--white); transition: opacity .6s ease; }
.loader.is-done { opacity: 0; pointer-events: none; }
.loader[hidden] { display: none; }
.loader:not(.is-fit) .loader-txt { visibility: hidden; }   /* LOADING は JS で数字の幅に合わせてから出す（大きさが変わって見えないように） */
/* 100 になったら文字が上に上がりながら消え、そのあと画面ごと消える */
.loader-txt, .loader-num { transition: opacity .8s ease, translate 1s cubic-bezier(.4, 0, .2, 1); }
.loader.is-out .loader-txt, .loader.is-out .loader-num { opacity: 0; translate: 0 -2.4rem; }
.loader.is-out .loader-ring { transition: opacity .7s ease .2s; opacity: 0; }
.loader-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; width: 24rem; height: 24rem; }
/* 読み込みに連動して、上から時計回りに白い線で円を描く */
.loader-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loader-ring circle { fill: none; stroke-width: .6; }   /* 約 0.7px */
.loader-ring .track { stroke: rgba(255, 255, 255, .15); }
.loader-ring .bar { stroke: var(--white); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; }   /* 2πr = 301.6 */
.loader-txt { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; font-size: 1.6rem; line-height: 1; letter-spacing: .05em; margin-right: -.05em; }   /* 幅は JS で数字に合わせる */
.loader-num { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.loader-num span { display: inline-block; min-width: 3ch; text-align: center; }
body.is-loading { overflow: hidden; }

/* ---------- header ---------- */
.header { position: fixed; top: 4.4rem; left: 4.8rem; right: 4.8rem; height: 4rem; z-index: 75; opacity: 0; translate: 0 -3rem; transition: opacity .7s ease, translate .8s var(--ease-out); }   /* 画面に固定。目が開くと同時に上からフェードイン */
.header.is-in { opacity: 1; translate: 0 0; }
.gnav { position: absolute; left: 0; top: .9rem; display: flex; gap: 3.2rem; font-size: 1.5rem; font-weight: 600; line-height: 2.2rem; color: var(--white); white-space: nowrap; }
.gnav a { position: relative; }
.gnav a::after { content: ""; position: absolute; left: 0; bottom: -.2rem; width: 100%; height: .15rem; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.gnav a:hover::after, .gnav a:focus-visible::after { transform: scaleX(1); }
.logo { position: absolute; left: 0; top: .6rem; width: 20rem; }   /* 左寄せ */
.btn-grp { position: absolute; right: 0; top: 0; display: flex; gap: .8rem; height: 4rem; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; height: 4rem; border-radius: .5rem; font-family: var(--f-jp); font-size: 1.4rem; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; border: 0; overflow: hidden; isolation: isolate; transition: color .3s; }
/* ホバー: 左から右へ塗りが流れ込む（上に動かさない） */
.btn::before { content: ""; position: absolute; inset: 0; background: var(--hover-bg); transform: translateX(-101%); transition: transform .5s var(--ease-out); z-index: -1; }
.btn:hover::before { transform: translateX(0); }
.btn-demo { width: 11.4rem; background: var(--yellow); color: var(--blue); font-size: 1.6rem; --hover-bg: var(--white); }
.btn-contact { width: 13.6rem; background: var(--white); color: var(--blue); font-size: 1.6rem; --hover-bg: var(--yellow); }
.btn-menu { width: 13rem; padding: 0 2rem 0 1.6rem; gap: 1.5rem; background: var(--blue); color: var(--white); border: .1rem solid var(--white); font-family: var(--f-en); font-variation-settings: "wdth" 110; font-weight: 600; font-size: 1.4rem; }
.menu-dots { display: flex; gap: .65rem; }
.menu-dots i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }   /* 文字と一緒に色が変わる */
.btn-menu { --hover-bg: var(--white); }
.btn-menu:hover, .btn-menu[aria-expanded="true"] { color: var(--blue); }
.btn-menu[aria-expanded="true"]::before { transform: translateX(0); }

/* ---------- 固定 CTA ---------- */
.fix-btn {
  position: fixed; right: 4.8rem; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  width: 39.6rem; height: 6rem; padding: 0 3.2rem;   /* ヘッダーのボタン群（11.4 + 13.6 + 13 + 隙間 .8×2）と同じ幅 */
  background: var(--yellow); color: var(--blue); border: .2rem solid var(--blue); border-bottom: 0; border-radius: 1rem 1rem 0 0;
  font-size: 1.8rem; font-weight: 800; line-height: 1; overflow: hidden; isolation: isolate;
  opacity: 0; translate: 0 3rem; transition: opacity .7s ease, translate .8s var(--ease-out);   /* ヘッダーと同時に下からフェードイン */
}
.fix-btn.is-in { opacity: 1; translate: 0 0; }
.fix-btn::before { content: ""; position: absolute; inset: 0; background: var(--white); transform: translateX(-101%); transition: transform .5s var(--ease-out); z-index: -1; }
.fix-btn:hover::before { transform: translateX(0); }
.fix-btn img { width: 1.8rem; height: 1.6rem; }
.fix-btn:hover img { animation: arrow-out-in .6s ease-in-out; }
/* 矢印: 右へ抜けて消え、左から戻ってくる（移動量を大きく、消えている間は不透明度 0） */
@keyframes arrow-out-in {
  0%   { transform: translateX(0); opacity: 1; }
  40%  { transform: translateX(2.4rem); opacity: 0; }
  41%  { transform: translateX(-2.4rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---------- 目（共通コンポーネント） ---------- */
.eye { position: absolute; display: block; left: calc(var(--x) * .1rem); top: calc(var(--y) * .1rem); width: calc(var(--w) * .1rem); height: calc(var(--h) * .1rem); z-index: 3; transform-origin: 0 0; }
.eye .eye-white, .eye .pupil, .eye .pupil-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.eye .pupil { will-change: transform; }
.eye .pupil-frame { opacity: 0; }
.eye .pupil-frame.is-on { opacity: 1; }
.eye { clip-path: var(--blink, polygon(0 0, 100% 0, 100% 100%, 0 100%)); transition: clip-path .035s linear; }   /* 白目と黒目を一枚のマスクで閉じる */
.eye.is-closed { clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); visibility: hidden; }
.eye.is-shut { visibility: hidden; }
.eye.is-opening { transition: clip-path .45s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 画面ぴったりセクションの中身（1920×1080 を --fit 倍して上下中央に） ---------- */
.stage { position: absolute; left: 0; top: var(--stage-top); width: 192rem; height: 108rem; transform-origin: 50% 0; scale: var(--fit); }

/* ---------- 01 hero ---------- */
.sec-hero { top: 0; height: var(--S); z-index: 2; }
.eye-hero-l { --x: 183; --y: 407; --w: 240; --h: 266; }
.eye-hero-r { --x: 1496; --y: 407; --w: 240; --h: 266; }
.eye-hero-l, .eye-hero-r { z-index: 70; }
.eye-hero-l.is-fixed, .eye-hero-r.is-fixed { position: fixed; }
.eye-hero-l, .eye-hero-r { left: calc(96rem + (var(--x) * .1rem - 96rem) * var(--fit)); top: calc(var(--stage-top) + var(--y) * .1rem * var(--fit)); width: calc(var(--w) * .1rem * var(--fit)); height: calc(var(--h) * .1rem * var(--fit)); }
.eye-hero-l.is-parked, .eye-hero-r.is-parked { top: calc(216.5rem + var(--dS) * 2 + var(--stage-top) + var(--y) * .1rem * var(--fit)); }
.hero-title { position: absolute; left: 70.5rem; top: 39.9rem; text-align: left; white-space: nowrap; font-size: 9.6rem; font-weight: 800; line-height: 1.2; color: var(--white); z-index: 4; }
.hero-title .line { display: block; }
.hero-wave { position: absolute; left: -32.6rem; top: calc(var(--stage-top) + 108rem * var(--fit) - 26.8rem); width: 226rem; height: 24.6rem; max-width: none; overflow: visible; }

/* 見出し 1 文字ずつ: 下から跳ねて着地 */
.reveal-chars .char { display: inline-block; opacity: 0; transform: translateY(6rem) scale(.5); transform-origin: 50% 100%; }
.reveal-chars.is-visible .char { animation: char-pop .7s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--d, 0s); }
@keyframes char-pop {
  0%   { opacity: 0; transform: translateY(6rem) scale(.5) rotate(-6deg); }
  55%  { opacity: 1; transform: translateY(-1.8rem) scale(1.12) rotate(2deg); }
  75%  { transform: translateY(.6rem) scale(.96) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 02 what we do ---------- */
.sec-what { top: calc(108.5rem + var(--dS)); height: var(--S); z-index: 2; }
.what-label { position: absolute; left: 72.1rem; top: 21.9rem; }
.what-title { position: absolute; left: 0; right: 0; top: 24.9rem; text-align: center; font-size: 4.8rem; font-weight: 800; line-height: 1; color: var(--white); }
.what-cloud { position: absolute; left: 62.5rem; top: 33.7rem; width: 67rem; height: 51.8rem; }
.what-cloud img { width: 100%; height: 100%; }
.what-text { position: absolute; left: 9.8rem; top: calc(50% - .8rem); translate: 0 -50%; width: 49.8rem; container-type: inline-size; text-align: center; font-weight: 600; color: var(--ink); }   /* 本文は HTML の文字（以前は画像）。大きさは幅に比例（cqw）なので TB/SP も同じ組み。行数が変わっても雲の上下中央（より .8rem 上）に */
.what-text .l { display: block; white-space: nowrap; font-size: calc(23.8 / 498 * 100cqw); line-height: calc(53 / 23.8); }   /* デザインの文字組み（幅 498 に 1 文字 23.8、行送り 53）に合わせた値 */
.what-text .l-ai { margin-top: calc(11 / 498 * 100cqw); }   /* 大きな AI の行だけ上を広く（デザインどおり） */
.what-text .is-red { color: #ff6464; }
.what-text .what-ai { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 700; font-size: calc(64 / 23.8 * 1em); line-height: 0; margin: 0 .3em 0 .18em; }
/* 丸の中の文字: Figma のグリフ位置どおり（AI 28px / × 16px / システム・開発 20px。赤は AI 27px / 導入支援 18px） */
.what-ball { position: absolute; display: block; border-radius: 50%; font-weight: 800; color: var(--white); white-space: nowrap; }
.what-ball i { position: absolute; left: 0; width: 100%; font-style: normal; line-height: 1; text-align: center; }
.ball-1 { left: 0; top: 0; width: 14rem; height: 14rem; background: #3bc66e; }   /* 雲（62.5, 33.7）基準 */
.ball-1 .l1 { top: 2rem; font-size: 2.8rem; }
.ball-1 .l2 { top: 4.9rem; font-size: 1.6rem; }
.ball-1 .l3 { top: 7rem; font-size: 2rem; }
.ball-1 .l4 { top: 9.4rem; font-size: 2rem; }
.ball-2 { left: 55rem; top: 0; width: 12rem; height: 12rem; background: #ef4444; }
.ball-2 .l1 { top: 2.6rem; font-size: 2.7rem; }
.ball-2 .l2 { top: 6.3rem; font-size: 1.8rem; }
.what-marquee { position: absolute; opacity: .3; left: calc(96rem - 96rem / var(--fit)); top: 92.3rem; width: calc(192rem / var(--fit)); height: 9.2rem; overflow: hidden; }
.what-track { display: flex; width: max-content; height: 100%; animation: what-flow 32s linear infinite; }
.what-track img { width: 192rem; height: 100%; flex: none; padding-right: 4rem; }
@keyframes what-flow { from { transform: translateX(0); } to { transform: translateX(-192rem); } }

/* ---------- 03 3つ ---------- */
.sec-three { top: calc(216.5rem + var(--dS) * 2); height: var(--S); z-index: 2; }
.three-title { position: absolute; left: 65.7rem; top: 13.8rem; width: 60.9rem; height: 9.6rem; color: var(--white); font-weight: 800; line-height: 1; white-space: nowrap; }
.three-title .t1 { position: absolute; left: 0; top: 2.4rem; font-size: 4.8rem; }
.three-title .t2 { position: absolute; left: 48rem; top: 0; width: 8.1rem; height: 9.6rem; margin: 0; }
.three-title .t3 { position: absolute; left: 56.1rem; top: 2.4rem; font-size: 4.8rem; }
.three-illust { position: absolute; left: 120.3rem; top: 11.6rem; width: 3.7rem; }   /* 3 の右上に少し離して */
.three-illust { opacity: 0; transform: scale(.3) rotate(-20deg); transform-origin: 20% 100%; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.three-title.is-visible ~ .three-illust { opacity: 1; transform: none; transition-delay: .9s; }
.three-diagram { position: absolute; left: 60rem; top: 26.5rem; width: 72rem; height: 66.6rem; }   /* 640 → 720。中心は 960 のまま */
.three-circles { display: none; }   /* SP だけ（mobile.css） */

/* ---------- 04 problem（画面固定 → カードが重なる） ---------- */
.sec-problem { top: calc(324.5rem + var(--dS) * 3); height: calc(var(--S) + var(--pin)); z-index: 2; }
.problem-pin { position: sticky; top: 0; height: var(--S); background: var(--light2); overflow: hidden; }   /* 下の背景と同じ色（ノイズなし） */
.problem-wave { position: absolute; left: -70.2rem; top: 35.2rem; width: 295.3rem; height: 32.2rem; max-width: none; }
.problem-illust { position: absolute; left: 30.1rem; top: 34.6rem; width: 50rem; z-index: 2; }   /* デザインの約 1.04 倍（1.2 倍から少し小さく）。左上はそのまま */
.pcard-q { position: absolute; left: 23.9rem; top: 23.8rem; width: 4.4rem; z-index: 2; rotate: 8deg; transform-origin: 0 0; }
.problem-arrow { --ax: -5.3; --ay: -4.8; --aw: 226.6; position: absolute; left: calc(106.1rem + var(--ax) * .1rem); top: calc(74rem + var(--ay) * .1rem); width: calc(var(--aw) * .1rem); z-index: 6; transform-origin: calc(var(--ax) * -.1rem) calc(var(--ay) * -.1rem); transform: matrix(-0.664, 0.747, 0.747, 0.664, 0, 0); opacity: 0; scale: .2; translate: 0 -8rem; transition: opacity .2s ease, scale .4s ease, translate .4s ease; }   /* 文字と一緒に上から落ちて「ぽよーん」と弾む（@keyframes poyon） */
.problem-deco-layer { position: absolute; left: 104.5rem; top: 88.6rem; width: 23.9rem;   /* 1.25 倍（中心はそのまま） */ z-index: 6; rotate: 5deg;   /* SVG は右上がり約 9°。「AIを導入したいが…」のカード（-4°）と同じ角度に */ transform-origin: 50% 50%; opacity: 0; scale: .2; transition: opacity .2s ease, scale .4s ease; }   /* 矢印と同時に「ぽよーん」と弾む（上下の動きは矢印だけ） */
.sec-problem.is-done .problem-arrow, .sec-problem.is-done .problem-deco-layer { opacity: 1; scale: 1; animation: poyon .6s cubic-bezier(.2, .6, .3, 1) both; }
.sec-problem.is-done .problem-arrow { translate: 0 0; animation-name: poyon-drop; }   /* 矢印だけ上から落ちる */
/* 大きく膨らむ → 縮む → 小さく戻る、の 2 段バウンド（文字） */
@keyframes poyon { 0% { scale: .2; } 45% { scale: 1.15; } 65% { scale: .93; } 82% { scale: 1.04; } 100% { scale: 1; } }
/* 同じバウンド + 上から落ちてくる（矢印） */
@keyframes poyon-drop {
  0% { scale: .2; translate: 0 -8rem; }
  45% { scale: 1.15; translate: 0 1.2rem; }
  65% { scale: .93; translate: 0 -.6rem; }
  82% { scale: 1.04; translate: 0 .3rem; }
  100% { scale: 1; translate: 0 0; }
}
.problem-head { position: absolute; left: 30.3rem; top: 14.7rem; z-index: 3; }
.problem-title { margin-top: .8rem; font-size: 6.4rem; font-weight: 800; line-height: 1.2; color: var(--ink2); }
.problem-text { position: absolute; left: 30.3rem; top: 78.4rem; width: 55.2rem; font-size: 1.8rem; font-weight: 400; line-height: 2; color: #000; z-index: 3; }

.pcards { position: absolute; inset: 0; z-index: 3; }
.pcard {
  position: absolute; width: 40rem; height: 60rem;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 2.4rem;
  box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .16);
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translate(10rem, 36rem) rotate(12deg) scale(.9);
  filter: blur(.6rem);
  transition: opacity .45s ease, filter .6s ease, transform .95s cubic-bezier(.22, 1.35, .36, 1);
}
.pcard.is-in { opacity: 1; transform: none; filter: blur(0); }
.pcard-1 { left: 122.5rem; top: 18.2rem; rotate: 5deg; }
.pcard-2 { left: 110.7rem; top: 20.9rem; rotate: -.5deg; }
.pcard-3 { left: 117.4rem; top: 23.4rem; rotate: 3deg; }
.pcard-4 { left: 112.9rem; top: 25.6rem; rotate: -4deg; }
.pcard-label { position: absolute; left: 0; right: 0; top: 4.9rem; }
.pcard-title { position: absolute; left: 0; right: 0; top: 8.1rem; text-align: center; font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--ink2); }
.pcard-tag { position: absolute; left: 4rem; top: 13.7rem; display: flex; align-items: center; justify-content: center; width: 32rem; height: 3.8rem; border-radius: 10rem; background: #e2d1ff; font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--ink2); }
.pcard-icon { position: absolute; left: 50%; top: 20.7rem; transform: translateX(-50%); height: 12rem; width: auto; }
.chip { position: absolute; left: calc(var(--x) * .1rem); top: calc(var(--y) * .1rem); width: calc(var(--w) * .1rem); height: 4.8rem; display: flex; align-items: center; justify-content: center; border-radius: 10rem; background: #eeeeee; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--ink2); white-space: nowrap; }

/* reveal（基本の出現） */
.reveal { opacity: 0; translate: 0 3rem; filter: blur(.4rem); transition: opacity .8s ease, translate .8s var(--ease-out), filter .8s ease; transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; translate: 0 0; filter: blur(0); }

/* ---------- 05 solution（Figma: スマホ画像の上端 4212 を基準） ---------- */
.sec-solution { top: calc(421.2rem + var(--off)); height: 252.2rem; z-index: 2; }
.eye-sol-l { --x: 302; --y: 219; --w: 95; --h: 105; rotate: -1deg; }
.eye-sol-r { --x: 822; --y: 211; --w: 95; --h: 105; rotate: -1deg; }
.sol-phone { position: absolute; left: 109.3rem; top: 0; width: 53.1rem; height: 96.9rem; object-fit: cover; z-index: 4; }
.sol-head { position: absolute; left: 30.3rem; top: 39rem; width: 76rem; }   /* 本文を 18px にして 6 行になった分、目・見出し・本文をまとめて 5.6rem 上へ（カードとの間は 5.6rem のまま） */
.sol-title { margin-top: 1.6rem; font-size: 7.2rem; font-weight: 800; line-height: 1.2; color: var(--white); }
.sol-text { position: absolute; left: 30.3rem; top: 53.6rem; width: 76rem; font-size: 1.8rem; font-weight: 400; line-height: 2; color: var(--white); }

.scards { position: absolute; left: 20rem; top: 83.8rem; display: flex; gap: 2.6rem; }
.scard { position: relative; width: 36rem; height: 45rem; padding-top: 3.6rem; }
.scard-num { position: absolute; left: 13rem; top: 0; width: 10rem; height: 10rem; border-radius: 50%; background: var(--white); padding-top: 2rem; text-align: center; clip-path: inset(0 0 6rem 0); z-index: 1; }
.scard-body { height: 41.4rem; padding: 4.8rem 4rem 4rem; border-radius: 4rem; background: var(--white); }
.scard-icon { width: 8rem; height: 8rem; margin: 0 auto 3.2rem; }
.scard h3 { font-size: 2.4rem; font-weight: 800; line-height: 1.4; color: var(--ink2); }
.scard p { margin-top: 1.6rem; font-size: 1.6rem; font-weight: 400; line-height: 1.6; color: var(--ink); }

.box { position: absolute; left: 20rem; width: 151.8rem; padding: 4.8rem; display: flex; gap: 4.8rem; border: .2rem solid var(--white); border-radius: 4rem; }
.box-ai { top: 140.8rem; height: 51.4rem; }
.box-sec { top: 198.6rem; min-height: 53.6rem; left: 20.1rem; }   /* 文章が長い項目に合わせて伸びる */
.box-left { width: 35.9rem; flex: none; }
.box-icon { height: 15.1rem; width: auto; margin: 0 auto 1.6rem; }
.box-ai .box-icon { margin-left: 11.3rem; }
.box-sec .box-icon { margin-left: 10.9rem; }
.box-left h3 { font-size: 3.6rem; font-weight: 800; line-height: 1.4; color: var(--white); }
.box-left p { margin-top: 1.6rem; font-size: 1.8rem; font-weight: 400; line-height: 1.8; color: var(--white); }
.pill-grid { display: grid; grid-template-columns: repeat(3, 32rem); gap: 1.6rem; align-content: start; margin-top: -.2rem; }
.pill-grid li { display: flex; align-items: center; justify-content: center; height: 7rem; border-radius: 10rem; background: var(--yellow); font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--blue); text-align: center; }
.sec-grid { display: grid; grid-template-columns: repeat(3, 32rem); gap: 1.6rem; align-content: start; }
.sec-grid li { min-height: 21rem; padding: 4rem 3.2rem; border-radius: 2.4rem; background: var(--white); }
.sec-grid h4 { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--blue); text-align: center; }
.sec-grid p { margin-top: 2.4rem; font-size: 1.6rem; font-weight: 400; line-height: 1.6; color: var(--ink); }

/* ---------- 06 tools（青の上・白いカードのロゴ列） ---------- */
.sec-tools { top: calc(693.4rem + var(--off)); height: 72.1rem; z-index: 2; }
.tools-illust { position: absolute; left: 138.5rem; top: 9.3rem; width: 6.1rem; opacity: 0; transform: scale(.3) rotate(-20deg); transform-origin: 20% 100%; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }   /* 見出しが出たあとに、ぴょこっと出る */
.tools-title.is-visible ~ .tools-illust { opacity: 1; transform: none; transition-delay: .9s; }
.tools-title { position: absolute; left: 0; right: 0; top: 13.3rem; text-align: center; font-size: 6.4rem; font-weight: 800; line-height: 1.1; color: var(--white); }
.tools-text { position: absolute; left: 60rem; top: 26.7rem; width: 72rem; font-size: 1.8rem; font-weight: 400; line-height: 2; color: var(--white); }
.logo-marquee { position: absolute; left: 0; top: 52.1rem; width: 192rem; overflow: hidden; }
.logo-track { display: flex; gap: 2.4rem; width: max-content; animation: logo-flow 40s linear infinite; }
.logo-track li { display: flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; padding: 2.4rem; border-radius: 4.8rem; background: var(--white); flex: none; }
.logo-track img { width: 10rem; height: auto; }
.logo-track li:nth-child(7) img, .logo-track li:nth-child(19) img { width: 16rem; }
@keyframes logo-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 07〜11 固定して重なるスタック ----------
   各セクションは画面の下端に着いたところで固定され、次のセクションが上に重なってくる（Service 導入は 1 画面ぶんなので上端で固定）。
   山なりの重なりぶんはマイナスの上余白で詰める */
.stack { position: relative; left: 0; margin-top: calc(781.4rem + var(--off)); width: 192rem; z-index: 2; }
.stack > .sec { position: sticky; z-index: auto; }
/* Contact とフッターはスタックの後ろに続く（FAQ を開いて Price が伸びても重ならない） */
.stack > .sec-contact, .stack > .footer { position: relative; top: auto; z-index: 4; }
.stack > .sec-contact { margin-top: -50.5rem; }   /* 水色の上に山なりで重なるぶん */
.stack > .footer { margin-top: -61.1rem; z-index: 5; }
.sec-service { top: calc(100vh - 108rem); height: 108rem; }
.svc-1 { top: calc(100vh - 313.6rem); }
.svc-2 { top: calc(100vh - 290.1rem); margin-top: -22.1rem; }   /* 赤の山なり 11809 は緑の終わり 12030 に重なる */
.sec-flow { top: calc(100vh - 152.8rem); margin-top: -15.8rem; }  /* 紫の山なりぶん */
.stack > .sec-price { position: relative; top: auto; margin-top: -15.8rem; }   /* 水色の山なりぶん。投資は固定せず、そのまま Contact・フッターへ続けてスクロール */
.eye-svc-l { --x: 183; --y: 407; --w: 240; --h: 266; }
.eye-svc-r { --x: 1496; --y: 407; --w: 240; --h: 266; }
.svc-head { position: absolute; left: 0; right: 0; top: 45.6rem; text-align: center; }
.svc-title { margin-top: 2.4rem; font-size: 7.2rem; font-weight: 800; line-height: 1.1; color: var(--white); }
.svc-tabs { position: absolute; left: 75.1rem; top: 64.6rem; display: flex; gap: 6.4rem; white-space: nowrap; }
.svc-tabs a { position: relative; display: flex; align-items: baseline; gap: 1.6rem; padding-bottom: .4rem; font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--white); }
.svc-tabs a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: .2rem; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.svc-tabs a:hover::after { transform: scaleX(1); }

/* ---------- 08/09 service 01・02（縦長。山なりで前のセクションに重なる） ---------- */
.svc-1 { height: 313.6rem; --hill: var(--green); --hill-x: -205.7rem; }
.svc-2 { height: 290.1rem; --hill: var(--red); --hill-x: -206.1rem; }
.svc-wave { position: absolute; left: -113.2rem; width: 343.3rem; height: 37.4rem; max-width: none; opacity: .2; pointer-events: none; }
.svc-1 .svc-wave { top: 46rem; }
.svc-2 .svc-wave { top: 42.3rem; }
.svc-col { position: absolute; left: 30.3rem; width: 56.1rem; }
.svc-1 .svc-col { top: 39rem; }
.svc-2 .svc-col { top: 39.9rem; }
.svc-h { margin-top: .8rem; font-size: 7.2rem; font-weight: 800; line-height: 1; color: var(--white); }
.svc-catch { font-size: 4rem; font-weight: 800; line-height: 1.4; color: var(--white); }
.svc-2 .svc-catch { white-space: nowrap; }
.svc-1 .svc-catch { margin-top: 9.9rem; }
.svc-2 .svc-catch { margin-top: 14.5rem; }
.svc-text { margin-top: 2.4rem; font-size: 1.8rem; font-weight: 400; line-height: 2; color: var(--white); }
.svc-mockup { position: absolute; left: 96rem; top: 38.9rem; width: 76rem; height: 49.3rem; z-index: 2; }
.svc-demo { position: absolute; display: flex; align-items: center; justify-content: center; width: 22.1rem; height: 6.4rem; border-radius: 20rem; background: var(--white); font-size: 2.7rem; font-weight: 800; line-height: 1; color: var(--green); overflow: hidden; isolation: isolate; transition: color .3s, opacity .8s ease, translate .8s var(--ease-out), filter .8s ease; transition-delay: 0s, var(--d, 0s), var(--d, 0s), var(--d, 0s); }   /* .reveal の出現アニメーションを打ち消さないよう一緒に指定 */
.svc-demo-1 { left: 85rem; top: 94.5rem; }
.svc-demo-2 { left: 84.9rem; top: 265.1rem; }
.svc-demo::before { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: translateX(-101%); transition: transform .5s var(--ease-out); z-index: -1; }
.svc-demo:hover::before { transform: translateX(0); }

/* 吹き出し（パネルの上に散らす） */
.bubbles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bubble { position: absolute; left: calc(var(--x) * .1rem); top: calc(var(--y) * .1rem); width: calc(var(--w) * .1rem); height: 6.1rem; padding: 0 2.4rem; display: flex; align-items: center; border-radius: 10rem; background: var(--bubble); color: var(--ink); font-size: 1.8rem; font-weight: 400; line-height: 1.6; white-space: nowrap; opacity: 0; transform: translateY(1.5rem) scale(.96); filter: drop-shadow(0 1.6rem .8rem rgba(0, 0, 0, .15)); transition: opacity .6s ease, transform .6s var(--ease-out); }
.bubble::before { content: ""; position: absolute; left: -.2rem; top: 0; width: 1.9rem; height: 1.8rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 19 18'%3E%3Cpath d='M17 6.11C17 6.11 5.01 7.2.06 0C.06 0-1.89 15.37 17 18L17 6.11Z' fill='%237cf96b'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.bubble.tail-r::before { left: auto; right: -.2rem; transform: scaleX(-1); }
.bubbles.is-visible .bubble { opacity: 1; transform: none; }

/* 白いパネル */
.panel { position: absolute; left: 20rem; width: 152rem; padding: 10rem; border-radius: 9.6rem; background: var(--white); z-index: 3; }
.panel-1 { top: 116.9rem; height: 138.6rem; }
.panel-2 { top: 116.8rem; height: 137.5rem; padding-top: 13.5rem; }
.panel-head { text-align: center; }
.panel-title { font-size: 6.4rem; font-weight: 800; line-height: 1.4; color: var(--ink2); }
.panel-lead { margin-top: 2.4rem; font-size: 1.8rem; font-weight: 600; line-height: 2; color: var(--ink2); }

/* 3 つのゆとりカード（Figma シンボル Frame 12975: 420×872） */
.ycards { display: flex; gap: 3rem; margin-top: 12rem; }
.ycard { position: relative; width: 42rem; height: 87.2rem; }
.ycard-en { position: absolute; left: 4rem; top: 0; width: 32rem; text-align: center; font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--green); z-index: 1; }
.ycard-h { position: absolute; left: 4rem; top: 3.2rem; width: 32rem; text-align: center; font-size: 3.6rem; font-weight: 800; line-height: 1; color: var(--ink2); z-index: 1; }
.ycard-body { position: absolute; left: 0; top: 5.5rem; width: 42rem; height: 82.4rem; padding: 4rem 2.4rem 2.4rem; border-radius: 2.4rem; background: #f5f5f5; }
.ycard-chip { display: flex; align-items: center; justify-content: center; height: 4.5rem; border: .2rem solid var(--green); border-radius: 4rem; background: var(--white); font-size: 1.8rem; font-weight: 800; line-height: 1.4; color: var(--green); text-align: center; }   /* スタイル: 塗り #FF / 枠・文字 serv_1 */
.ycard-img { height: 24.8rem; margin-top: 3.2rem; border-radius: 1rem; background: var(--white); }   /* Figma: 白い長方形（画像の入る場所） */
.ycard-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 3.2rem; }
.ycard-list li b { position: relative; display: block; padding-left: 2.6rem; font-size: 1.8rem; font-weight: 800; line-height: 1.6; color: var(--ink); }
.ycard-list li b::before { content: ""; position: absolute; left: 0; top: .6rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--green); }
.ycard-list li p { margin-top: .6rem; font-size: 1.6rem; font-weight: 400; line-height: 1.6; color: var(--ink); }
.ycard-kpi { position: absolute; left: 2.4rem; right: 2.4rem; top: 70rem; height: 10rem; padding-top: 1.6rem; border-radius: 1.6rem; background: var(--green); text-align: center; color: var(--white); }
.ycard-kpi span { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.ycard-kpi b { display: block; margin-top: 1.2rem; font-size: 3.2rem; font-weight: 800; line-height: 1; }

/* 毎月のサイクル図（Figma Frame 12985: 760×504） */
.cycle { position: absolute; left: 96rem; top: 38.7rem; width: 76rem; height: 50.4rem; z-index: 2; scale: .83; transform-origin: 50% 50%; }   /* PC は少し小さく（83%・位置は中心のまま）。TB/SP は mobile.css の scale が優先 */
.cycle-ring { position: absolute; left: 14rem; top: 1.2rem; width: 48rem; height: 48rem; animation: spin 60s linear infinite; }   /* 丸い点の点線 */
@keyframes spin { to { transform: rotate(360deg); } }
.cycle-center { position: absolute; left: 20rem; top: 7.2rem; width: 36rem; height: 36rem; border-radius: 50%; background: var(--red-d); display: grid; place-items: center; text-align: center; }
.cycle-center p { font-size: 4rem; font-weight: 800; line-height: 1.3; color: var(--white); }
.cnode { position: absolute; width: 24rem; height: 16.4rem; padding-top: 2.4rem; border-radius: 4rem; background: var(--white); text-align: center; }
.cnode-n { display: block; font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--red); }
.cnode p { margin-top: 1.6rem; font-size: 2.4rem; font-weight: 800; line-height: 1.4; color: var(--ink); }
.n1 { left: 0; top: 1.2rem; } .n2 { left: 52rem; top: 1.2rem; } .n3 { left: 52rem; top: 32.9rem; } .n4 { left: 0; top: 32.9rem; }
.cycle-arrow { position: absolute; width: 2.4rem; height: 2.4rem; background: var(--white); }
.cycle-arrow.a1 { left: 36.8rem; top: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }        /* 上: 右向き */
.cycle-arrow.a2 { left: 60.8rem; top: 24rem; clip-path: polygon(0 0, 100% 0, 50% 100%); }       /* 右: 下向き */
.cycle-arrow.a3 { left: 36.8rem; top: 48rem; clip-path: polygon(100% 0, 100% 100%, 0 50%); }    /* 下: 左向き */
.cycle-arrow.a4 { left: 12.8rem; top: 24rem; clip-path: polygon(50% 0, 100% 100%, 0 100%); }      /* 左: 上向き */

/* 支援内容カード（Figma シンボル Frame 12887: 413×451） */
.mcards { display: grid; grid-template-columns: repeat(3, 41.3rem); gap: 4rem; margin-top: 12rem; }
.mcard { height: 39.7rem; padding: 3.2rem 2.4rem; border-radius: 2.4rem; background: #f5f5f5; text-align: center; }
.mcard-n { display: block; font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--red); }
.mcard h4 { margin-top: 1.6rem; font-size: 2.7rem; font-weight: 800; line-height: 1; color: var(--ink2); }
.mcard-img { height: 20.9rem; margin-top: 2.6rem; border-radius: 1rem; background: var(--white); }   /* Figma: 白い長方形（画像の入る場所） */
.mcard p { margin-top: 2.7rem; font-size: 1.8rem; font-weight: 400; line-height: 1.6; color: var(--ink); text-align: left; }

/* ---------- 10 flow（紫） ---------- */
.sec-flow { height: 152.8rem; --hill: var(--purple); --hill-x: -206.1rem; }   /* 上の余白を 10rem 詰めた（中身も 10rem 上へ） */   /* 紫も山なりで赤に重なる */
.flow-wave { position: absolute; left: -66.6rem; top: 35rem; width: 284.7rem; height: 31rem; max-width: none; opacity: .15; pointer-events: none; }
.flow-head { position: absolute; left: 30.1rem; top: 26rem; }
.flow-title { margin-top: 2.4rem; font-size: 6.4rem; font-weight: 800; line-height: 1.1; color: var(--white); }
.flow-lead { margin-top: 4rem; font-size: 2.4rem; font-weight: 600; line-height: 2; color: var(--white); }
.flow-line { position: absolute; left: 20rem; top: 60.2rem; width: 152rem; height: 20rem; }
.steps { position: absolute; left: 20rem; top: 60.2rem; display: flex; }
.step { width: 28rem; margin-right: 3rem; text-align: center; }
.step.is-low { padding-top: 12rem; }
.step-c { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 11.6rem; height: 11.6rem; margin: 0 auto; border-radius: 50%; background: var(--yellow); color: var(--purple-d); font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; }   /* 黄色の丸に紫の文字 */
.step-c small { font-size: 1.2rem; line-height: 1; }
.step-c b { margin-top: .4rem; font-size: 4rem; font-weight: 600; line-height: 1; }
.step h3 { margin-top: 3.2rem; font-size: 2.4rem; font-weight: 800; line-height: 1.4; color: var(--white); }
.step p { margin-top: 1.6rem; font-size: 1.5rem; font-weight: 400; line-height: 1.5; color: var(--white); text-align: left; }
.phases { position: absolute; left: 20rem; top: 111rem; width: 152rem; height: 6rem; }
.phase { position: absolute; top: 0; height: 6rem; display: flex; align-items: center; gap: 1.6rem; padding-left: 2.9rem; border-radius: 20rem; }
.ph1 { left: 0; width: 92.5rem; background: var(--white); color: #000; border-radius: 20rem 0 0 20rem; }   /* 2 本で 1 本のピルに見せる（右端は角） */
.ph2 { left: 92.5rem; width: 59.5rem; background: var(--purple-d); color: var(--white); border-radius: 0 20rem 20rem 0; }
.ph-name { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.ph-sub { font-size: 1.4rem; font-weight: 600; line-height: 1; }
.ph-term { position: absolute; top: 1.3rem; display: flex; align-items: center; justify-content: center; gap: .8rem; width: 17.4rem; height: 3.4rem; border-radius: 10rem; line-height: 1; color: #000; white-space: nowrap; }
.ph-term small { font-size: 1.3rem; font-weight: 600; }
.ph-term b { font-size: 1.8rem; font-weight: 600; }
.ph1 .ph-term { right: 1.1rem; background: #dddddd; }
.ph2 .ph-term { right: 1.3rem; background: var(--white); }

/* ---------- 11 price（水色）+ FAQ ---------- */
.sec-price { display: flow-root; min-height: 372rem; padding-bottom: 70.5rem; --hill: var(--light); --hill-x: -206.1rem; }   /* FAQ の分だけ伸びる */
.price-wave { position: absolute; left: -64.4rem; top: 42.5rem; width: 284.7rem; height: 31rem; max-width: none; opacity: .4; pointer-events: none; }
.price-head { position: absolute; left: 73.6rem; top: 30.4rem; }
.price-head .label { margin-left: 18.3rem; }
.price-title { margin-top: 2.4rem; font-size: 6.4rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.price-lead { position: absolute; left: 60rem; top: 45.9rem; width: 72rem; font-size: 1.8rem; font-weight: 600; line-height: 2; color: var(--ink); }
.plans { position: absolute; left: 30.1rem; top: 69rem; display: flex; gap: 4rem; }   /* 3 プラン: 2 プラン時と同じ全幅 131.9rem */
.plan { position: relative; display: flex; flex-direction: column; width: 41.3rem; height: 62rem; padding: 4.8rem 3.2rem 3.2rem; border: .3rem solid transparent; border-radius: 4.8rem; background: var(--white); }
.plan.is-recommend { border-color: var(--blue); }   /* おすすめ: 青い枠 + 上にバッジ */
.plan-badge { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 0 2rem; height: 3.6rem; display: flex; align-items: center; border-radius: 10rem; background: var(--blue); font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--white); white-space: nowrap; }
.plan-sub { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--blue); text-align: center; }   /* スタイル mainCol（Termina → 日本語のため Noto） */
.plan-name { margin-top: 1.2rem; font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--ink); text-align: center; }
.plan-prices { display: flex; gap: 2.4rem; margin-top: 3.2rem; }
.pbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; flex: 1; height: 12rem; border-radius: 2rem; background: #f5f5f5; color: var(--ink); }
.pbox.is-main { background: var(--blue); color: var(--white); }   /* スタイル mainCol */
.pbox-l { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.pbox-v { display: flex; align-items: baseline; gap: .4rem; }
.pbox-v b { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 800; font-size: 4.8rem; line-height: 1; }
.pbox.is-main .pbox-v b { color: var(--yellow); }   /* スタイル accentCol */
.pbox-v small { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.plan-rows { margin-top: 3.2rem; display: flex; flex-direction: column; gap: 1.6rem; }
.plan-rows li { display: flex; justify-content: space-between; align-items: flex-start; height: 3.4rem; border-bottom: 1px dashed #999999; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--ink); }
.plan-rows li b { font-weight: 600; }   /* 内容（<b>）もリストと同じ太さ（標準の太字だと 800 になる） */
.plan-total { display: flex; align-items: center; justify-content: space-between; height: 9rem; margin-top: auto; padding: 0 2.4rem; border-radius: 2rem; background: var(--yellow); color: var(--ink); }   /* スタイル accentCol */
.plan-total > span:first-child { font-size: 1.5rem; font-weight: 800; }
.plan-total .pbox-v b { font-size: 4rem; }
.price-note { position: absolute; left: 30.1rem; top: 135rem; width: 131.9rem; font-size: 1.4rem; font-weight: 400; line-height: 1.8; color: var(--ink); text-align: center; }

/* シミュレーション（プランの下のサブコンテンツ。通常フローで置き、FAQ はその後に続く） */
.sim { position: relative; margin: 152rem 0 0 30.1rem; width: 131.9rem; color: var(--ink); }
.sim-label { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; font-size: 1.8rem; line-height: 1; color: var(--blue); }
.sim-head { text-align: center; }
.sim-title { margin-top: 1.6rem; font-size: 4.8rem; font-weight: 800; line-height: 1.1; }   /* よくある質問の見出しと同じサイズ */
.sim-formula { display: grid; grid-template-columns: 1fr 7.2rem 1fr 7.2rem 1fr; align-items: stretch; margin-top: 6.4rem; padding: 2rem; border-radius: 2.4rem; background: var(--white); }   /* 3 つの箱を等幅、記号の列も等幅にして等間隔に */
.sim-f { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2.4rem 1.6rem; border-radius: 1.6rem; background: #f5f5f5; text-align: center; }
.sim-f-l { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.sim-f-v { display: flex; align-items: baseline; gap: .6rem; }
.sim-f-v b { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 800; font-size: 6.4rem; line-height: 1; }
.sim-f-v small { font-size: 2rem; font-weight: 800; line-height: 1; }
.sim-f-s { font-size: 1.3rem; font-weight: 400; line-height: 1.4; color: #555; }
.sim-op { align-self: center; justify-self: center; font-family: var(--f-en); font-weight: 600; font-size: 3.2rem; line-height: 1; color: #333; }
.sim-f.is-result { padding: 2.4rem 3.2rem; border-radius: 1.6rem; background: var(--blue); color: var(--white); }   /* 答えは青い箱で計算と分ける（プランの月額ボックスと同じ配色） */
.sim-f.is-result .sim-f-v b { color: var(--yellow); }
.sim-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 4rem; }   /* 上の間隔 = 2 カラムの間隔 */
.sim-card { padding: 4.8rem 4.8rem 4rem; border-radius: 2.4rem; background: var(--white); }   /* 内側の余白は広め */
.sim-card h4 { padding-bottom: 1.2rem; border-bottom: .2rem solid var(--ink); font-size: 2.2rem; font-weight: 800; line-height: 1; }
.sim-card-sub { margin-top: 1.4rem; font-size: 1.3rem; font-weight: 400; line-height: 1.6; color: #555; }
.sim-card ul { margin-top: 1rem; }
.sim-card li { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.3rem 0; border-bottom: 1px solid #ddd; font-size: 1.6rem; line-height: 1.4; }
.sim-card li span { font-weight: 400; }
.sim-card li b { flex-shrink: 0; font-weight: 800; }
.sim-card li.is-plus { color: var(--blue); }
.sim-card li.is-plus span { font-weight: 800; }
.sim-note { margin-top: 2.4rem; font-size: 1.4rem; font-weight: 400; line-height: 1.8; text-align: center; }

.faq { position: relative; display: grid; grid-template-columns: 44.6rem 1fr; align-items: start; margin: 16rem 0 0 30rem; width: 132rem; }   /* シミュレーションの後に続く */
.faq-head { position: static; }
.faq-title { margin-top: 1.6rem; font-size: 4.8rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.faq-list { position: static; width: 87.4rem; display: flex; flex-direction: column; gap: 2.4rem; }
.faq details { border-radius: 4rem; background: var(--white); overflow: hidden; }
.faq summary { display: flex; align-items: center; gap: 2.4rem; min-height: 8rem; padding: 1.6rem 1.9rem; list-style: none; cursor: pointer; font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq .q { display: grid; place-items: center; flex: none; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--blue); font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 800; font-size: 2.1rem; color: var(--yellow); }
.faq .plus { flex: none; width: 4rem; height: 4rem; margin-left: auto; transition: transform .3s var(--ease-out); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq-body { overflow: hidden; height: 0; transition: height .45s var(--ease-out); }   /* 高さは JS で開閉 */
.faq details p { padding: 0 6rem 2.8rem 9.1rem; font-size: 1.6rem; font-weight: 400; line-height: 1.8; color: var(--ink2); }

/* ---------- 12 contact（青→白のグラデーションの山なり） ---------- */
.sec-contact { height: 176.4rem; --hill-x: -237.5rem; }
.sec-contact::before { background: linear-gradient(180deg, var(--blue) 6.43%, #71aaff 11.67%, var(--white) 18.07%); }   /* Figma: 円の高さに対する % */
.sec-contact::after { content: none; }
.contact-wave { position: absolute; left: -45.2rem; top: 78.6rem; width: 252.7rem; height: 27.6rem; max-width: none; opacity: .3; pointer-events: none; z-index: 1; }   /* 旧サイトの Contact の波（青い帯の中に置く） */
.contact-phone { position: absolute; left: 103.4rem; top: 18.1rem; width: 42.1rem; height: 76.9rem; object-fit: cover; z-index: 2; }
.eye-contact { rotate: 5.3deg; }
.contact-head { position: absolute; left: 56rem; top: 27.8rem; z-index: 3; }
.contact-head .label { font-size: 2.6rem; }
.contact-title { margin-top: 1.6rem; font-size: 5.4rem; font-weight: 800; line-height: 1.4; color: var(--white); }
.contact-text { position: absolute; left: 56rem; top: 49.2rem; width: 49.9rem; font-size: 1.6rem; font-weight: 400; line-height: 2; color: var(--white); z-index: 3; }
.contact-btn { position: absolute; left: 56rem; top: 68.8rem; z-index: 3; display: flex; align-items: center; justify-content: center; width: 49.4rem; height: 11.3rem; border-radius: 2rem; background: var(--green); color: var(--white); font-size: 2.7rem; font-weight: 800; line-height: 1.8; overflow: hidden; isolation: isolate; }   /* スタイル serv_1 */
.contact-btn::before { content: ""; position: absolute; inset: 0; background: var(--blue); transform: translateX(-101%); transition: transform .5s var(--ease-out); z-index: -1; }
.contact-btn:hover::before { transform: translateX(0); }

/* ---------- 13 footer（Figma: y19916〜20345） ---------- */
.footer { left: 0; width: 192rem; height: 61.1rem; color: #000; }
.footer a { transition: opacity .3s; }
.footer a:hover { opacity: .6; }
.footer-lead { position: absolute; left: 20rem; top: 0; }
.footer-copy { font-size: 9.6rem; font-weight: 800; line-height: 1.2; color: var(--ink2); white-space: nowrap; }   /* ヒーローの見出しと同じ組み */
.footer-copy .line { display: block; }
.footer-logo { position: absolute; left: 0; top: 37.6rem; width: 38.2rem; }
.footer-nav { position: absolute; right: 20rem; top: 0; display: flex; gap: 5.6rem; }   /* 4 列 × 3 行 */
.fcol { display: flex; flex-direction: column; gap: 3.2rem; font-size: 1.7rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.fcat { font-size: 1.7rem; font-weight: 600; line-height: 1; }
.fcol-svc ul { display: flex; flex-direction: column; gap: 3.2rem; }   /* 他の列と同じ大きさ・行間 */
.footer-company { position: absolute; right: 20rem; top: 24rem; text-align: right; }
.fc-name { display: flex; align-items: center; justify-content: flex-end; gap: 1.6rem; font-size: 1.8rem; font-weight: 600; line-height: 2rem; }
.fc-btn { display: inline-flex; align-items: center; height: 2.8rem; padding: 0 1.4rem; border: .1rem solid #000; border-radius: 10rem; font-size: 1.2rem; font-weight: 600; line-height: 1; transition: background .3s, color .3s; }
.fc-btn:hover { background: #000; color: var(--white); opacity: 1; }
.fc-addr { margin-top: 2.4rem; font-size: 1.4rem; font-weight: 400; line-height: 2.4rem; }
.footer-sns { position: absolute; right: 20rem; top: 34.5rem; display: flex; gap: 2.6rem; }
.footer-sns img { width: 3.6rem; height: 3.6rem; }
.footer-bottom { position: absolute; right: 20rem; top: 41.8rem; display: flex; gap: 3.2rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.1rem; font-weight: 400; line-height: 1; }
.footer-bottom small { font-size: inherit; }

/* ---------- 会社概要モーダル ---------- */
.fc-btn { background: transparent; cursor: pointer; font-family: inherit; }
.cmodal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 4rem; }
.cmodal[hidden] { display: none; }   /* display: grid が hidden 属性に勝ってしまうので明示（閉じている間はクリックを奪わない） */
.cmodal-bg { position: absolute; inset: 0; background: rgba(0, 40, 120, .55); backdrop-filter: blur(.4rem); opacity: 0; transition: opacity .35s ease; }
.cmodal-box { position: relative; width: 78rem; max-width: 100%; max-height: 100%; overflow: auto; padding: 6.4rem 7.2rem 5.6rem; border-radius: 4rem; background: var(--white); color: var(--ink); opacity: 0; translate: 0 3rem; scale: .97; transition: opacity .4s ease, translate .5s var(--ease-out), scale .5s var(--ease-out); }
.cmodal.is-open .cmodal-bg { opacity: 1; }
.cmodal.is-open .cmodal-box { opacity: 1; translate: 0 0; scale: 1; }
.cmodal-close { position: absolute; right: 2.4rem; top: 2.4rem; width: 4rem; height: 4rem; border: .1rem solid var(--ink); border-radius: .5rem; background: transparent; cursor: pointer; transition: background .3s; }
.cmodal-close i { position: absolute; left: 50%; top: 50%; width: 2rem; height: .2rem; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); transition: background .3s; }
.cmodal-close i + i { transform: translate(-50%, -50%) rotate(-45deg); }
.cmodal-close:hover { background: var(--ink); }
.cmodal-close:hover i { background: var(--white); }
.cmodal-label { font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; font-size: 1.8rem; line-height: 1; color: var(--blue); }
.cmodal-title { margin-top: 1.6rem; font-size: 4rem; font-weight: 800; line-height: 1.1; }
.cmodal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3.2rem; padding-right: 4rem; }   /* 見出しの右横にロゴ */
.cmodal-lead { margin-top: 2.4rem; font-size: 1.6rem; font-weight: 400; line-height: 2; }   /* 会社案内 p.2「memeについて」 */
.cmodal-list { margin-top: 3.2rem; }
.cmodal-list > div { display: grid; grid-template-columns: 14rem 1fr; gap: 2.4rem; padding: 2rem 0; border-bottom: 1px solid #ddd; font-size: 1.6rem; line-height: 1.8; }
.cmodal-list > div:first-child { border-top: 1px solid #ddd; }
.cmodal-list dt { font-weight: 800; color: var(--ink2); }
.cmodal-list dd { margin: 0; font-weight: 400; }
.cmodal-link { position: relative; color: var(--blue); font-weight: 800; }
.cmodal-link::after { content: ""; position: absolute; left: 0; bottom: -.2rem; width: 100%; height: .15rem; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.cmodal-link:hover::after { transform: scaleX(1); }
.cmodal-logo { display: block; flex: none; width: 20rem; margin-bottom: .4rem; }
body.is-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .logo-track, .what-track, .cycle-ring { animation: none; }
  .reveal, .reveal-chars .char, .bubble { transition: none; opacity: 1; translate: 0 0; transform: none; filter: none; }
}

/* =================== ゆとりを設計しよう／支援内容 の画像部分（service-design の図を移植） =================== */
.ycard-img { overflow: hidden; }
.ycard-img .ui { height: 100%; border-radius: 1rem; }
.ycard-img .ui-body { height: calc(100% - 3.6rem); padding: 1.2rem 1.4rem; }
.mcard-img { overflow: hidden; }
.mcard-img .fig { border-radius: 1rem; border: 0; }
.ui { border-radius: 1.6rem; border: .2rem solid #e3e8ef; background: #f7f9fc; overflow: hidden; font-family: "SFMono-Regular", Menlo, var(--f-jp); }
.ui-bar { display: flex; align-items: center; gap: .6rem; height: 3.6rem; padding: 0 1.4rem; background: #fff; border-bottom: .2rem solid #e3e8ef; }
.ui-bar i { width: 1rem; height: 1rem; border-radius: 50%; background: #ff6b5f; }
.ui-bar i:nth-child(2) { background: #ffbd2e; }
.ui-bar i:nth-child(3) { background: #28c940; }
.ui-bar span { margin-left: 1rem; font-size: 1.2rem; font-weight: 600; color: #8a94a6; white-space: nowrap; }
.ui-body { height: 24rem; padding: 1.6rem; font-family: var(--f-jp); }
.ui-row { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.2rem; margin-bottom: .8rem; border-radius: 1rem; background: #fff; }
.av { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; }
.a1 { background: var(--blue); } .a2 { background: var(--green); } .a3 { background: #ff9257; }
.nm { flex: 1; font-size: 1.4rem; font-weight: 800; line-height: 1.2; color: var(--ink); }
.nm small { display: block; font-size: 1.1rem; font-weight: 400; color: #8a94a6; }
.st { flex: none; padding: .4rem 1rem; border-radius: 10rem; font-size: 1.1rem; font-weight: 800; }
.st-w { background: #fff3a8; color: #7a6400; } .st-b { background: #dce9ff; color: var(--blue); } .st-g { background: #d9f5e3; color: var(--green-d); }
.ui-ai { display: flex; gap: .8rem; align-items: flex-start; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 1rem; background: var(--blue); font-size: 1.2rem; font-weight: 800; line-height: 1.5; color: #fff; }
.ui-ai b, .fl-ai b { flex: none; padding: .2rem .6rem; border-radius: .6rem; background: var(--yellow); font-family: var(--f-en); font-stretch: 125%; font-size: 1.1rem; color: var(--ink); }
.ui-flow { display: grid; grid-template-columns: 1fr 3rem 1fr 3rem 1fr; align-items: center; row-gap: 2rem; }
.fl-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.6rem .6rem; border-radius: 1.2rem; background: #fff; font-size: 1.2rem; font-weight: 800; color: var(--ink); text-align: center; }
.fl-ai { background: var(--blue); color: #fff; }
.fl-ai b { font-size: 1.6rem; padding: .6rem 1rem; }
.fl-doc { display: grid; gap: .5rem; width: 4rem; padding: .8rem; border: .2rem solid #c9d2df; border-radius: .4rem; }
.fl-doc i { height: .4rem; border-radius: .2rem; background: #c9d2df; }
.fl-grid { display: grid; grid-template-columns: repeat(2, 1.8rem); gap: .3rem; }
.fl-grid i { height: 1.2rem; border-radius: .2rem; background: #bfe8cf; }
.fl-arrow { height: .3rem; background: repeating-linear-gradient(90deg, var(--blue) 0 .6rem, transparent .6rem 1.1rem); background-size: 1.1rem 100%; animation: fl-move .8s linear infinite; position: relative; }
.fl-arrow::after { content: ""; position: absolute; right: -.2rem; top: -.5rem; border: .65rem solid transparent; border-left: .8rem solid var(--blue); border-right: 0; }
@keyframes fl-move { to { background-position: 1.1rem 0; } }
.fl-note { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: .8rem; padding: 1.2rem; border-radius: 1rem; background: #fff; font-size: 1.3rem; font-weight: 800; color: #8a94a6; }
.fl-note b { font-family: var(--f-en); font-stretch: 125%; font-size: 3.2rem; line-height: 1; color: var(--green-d); }
.fl-note span { color: var(--ink); }
.ch-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.ch-h span { font-size: 1.1rem; font-weight: 600; color: #8a94a6; }
.ch-bars { display: flex; align-items: flex-end; gap: 1.4rem; height: 13rem; margin-top: 1.2rem; padding: 0 .8rem; border-bottom: .2rem solid #e3e8ef; }
.ch-bars span { position: relative; flex: 1; height: var(--h); border-radius: .6rem .6rem 0 0; background: #cfe0ff; }
.ch-bars i { position: absolute; left: 25%; right: 25%; bottom: 0; height: var(--h); border-radius: .4rem .4rem 0 0; background: var(--blue); }
.ch-bars span:nth-child(4) i { background: #ff6b5f; }
.ch-legend { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; font-size: 1.1rem; font-weight: 800; color: #8a94a6; }
.ch-legend span::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .4rem; border-radius: .2rem; vertical-align: -.1rem; }
.lg1::before { background: #cfe0ff; } .lg2::before { background: var(--blue); }
.ch-legend .ch-alert { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #ff6b5f; color: #fff; font-size: 1.1rem; }
.ch-legend .ch-alert::before { display: none; }
.ch-legend em { font-style: normal; color: var(--ink); }
.ui-body { height: 25rem; }
.ui-row { padding: .8rem 1.2rem; margin-bottom: .6rem; }
.fig { position: relative; height: 100%; padding: 1.6rem; border-radius: 2rem; background: #fff; border: .2rem solid #f8d8d2; overflow: hidden; font-family: var(--f-jp); }
.f1 { display: flex; align-items: center; gap: 1.4rem; }
.f1-tools { display: grid; gap: .8rem; }
.f1-tools li { padding: .8rem 1.4rem !important; border-radius: 10rem; background: #fdeeeb !important; font-size: 1.3rem !important; font-weight: 800 !important; line-height: 1 !important; color: #a08a86 !important; white-space: nowrap; }
.f1-tools li.on { background: var(--red) !important; color: #fff !important; position: relative; }
.f1-tools li.on::after { content: "✓"; margin-left: .6rem; color: var(--yellow); }
.f1-line { flex: 1; height: .3rem; background: repeating-linear-gradient(90deg, var(--red) 0 .6rem, transparent .6rem 1.1rem); animation: fl-move .8s linear infinite; background-size: 1.1rem 100%; }
.f1-sys { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.6rem 1.4rem; border-radius: 1.4rem; background: #fdeeeb; font-size: 1.3rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.f1-plug { width: 4rem; height: 3rem; border-radius: .6rem; background: var(--blue); position: relative; }
.f1-plug::before, .f1-plug::after { content: ""; position: absolute; top: -1rem; width: .5rem; height: 1rem; border-radius: .2rem; background: var(--blue); }
.f1-plug::before { left: 1rem; } .f1-plug::after { right: 1rem; }
.sa { left: 50%; top: .4rem; margin-left: -2.8rem; background: var(--blue); }
.sb { right: 5rem; top: 50%; margin-top: -2.8rem; background: #ffcc33; }
.sc { left: 50%; bottom: .4rem; margin-left: -2.8rem; background: var(--green); }
.sd { left: 5rem; top: 50%; margin-top: -2.8rem; background: #ff9257; }
.f3-search { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; border-radius: 10rem; background: #fdeeeb; font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.f3-ico { width: 1.6rem; height: 1.6rem; border: .25rem solid var(--red); border-radius: 50%; position: relative; flex: none; }
.f3-ico::after { content: ""; position: absolute; right: -.7rem; bottom: -.6rem; width: .7rem; height: .25rem; background: var(--red); rotate: 45deg; }
.f3-ans { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.6rem; padding: 1.4rem 1.6rem; border-radius: 1.4rem; background: var(--red); color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.5; }
.f3-ans b { flex: none; padding: .2rem .6rem; border-radius: .6rem; background: var(--yellow); font-family: var(--f-en); font-stretch: 125%; font-size: 1.1rem; color: var(--ink); }
.f3-ans small { display: block; font-size: 1.1rem; font-weight: 600; opacity: .8; }
.f4-flow { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; }
.f4-flow span { flex: 1; padding: 2rem 0; border-radius: 1.2rem; background: #fdeeeb; text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.f4-flow i { flex: none; width: 2.4rem; height: .3rem; background: repeating-linear-gradient(90deg, var(--red) 0 .5rem, transparent .5rem .9rem); background-size: .9rem 100%; animation: fl-move .6s linear infinite; }
.f4-auto { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1.2rem 1.6rem; border-radius: 1.2rem; background: #ecf8f0; font-size: 1.3rem; font-weight: 800; color: var(--green-d); }
.f4-auto b { padding: .3rem .8rem; border-radius: .6rem; background: var(--green); font-family: var(--f-en); font-stretch: 125%; font-size: 1.1rem; color: #fff; }
.f5-row { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; }
.f5-l { flex: none; width: 5.4rem; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.f5-bars { flex: 1; display: grid; gap: .5rem; }
.f5-bars i { display: block; height: 1.6rem; width: var(--w); border-radius: .4rem; }
.f5-bars .bf { background: #f8d8d2; }
.f5-bars .af { background: var(--red); }
.f5-lg { display: flex; gap: 1.6rem; margin-top: 2rem; font-size: 1.1rem; font-weight: 800; color: #a08a86; }
.f5-lg span::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .4rem; border-radius: .2rem; vertical-align: -.1rem; }
.f6-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.f6-h b { font-family: var(--f-en); font-stretch: 125%; font-size: 3rem; line-height: 1; color: var(--red); }
.f6-h small { font-size: 1.4rem; }
.f6 svg { display: block; width: 100%; height: 8rem; margin-top: 1rem; }
.f6-x { display: flex; justify-content: space-between; margin-top: .6rem; font-size: 1.1rem; font-weight: 800; color: #a08a86; }
.sa { left: calc(50% - 7rem); top: 1.4rem; }
.sb { left: calc(50% + 2rem); top: 1.4rem; right: auto; }
.sc { left: calc(50% - 7rem); top: 12.6rem; bottom: auto; }
.sd { left: calc(50% + 2rem); top: 12.6rem; }
.f4-flow { margin-top: 0; }
.f4-flow span { padding: 1.6rem 0; }
.f4-auto { margin-top: 1.6rem; }
.f6 svg { height: 6.8rem; margin-top: .8rem; }
.f2-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.f2-h span { font-size: 1.1rem; font-weight: 800; color: #a08a86; }
.f2-agenda { margin-top: 1.2rem; display: grid; gap: .6rem; }
.f2-agenda time { flex: none; font-family: var(--f-en); font-stretch: 125%; font-size: 1.2rem; color: var(--red); }
.f2-agenda li.now time { color: var(--yellow); }
.f2-agenda em { margin-left: auto; padding: .2rem .8rem; border-radius: 10rem; background: var(--yellow); font-style: normal; font-size: 1rem; color: var(--ink); }

/* 移植で抜けていた指定と、カードに収めるための調整 */
.f2-agenda li { display: flex; align-items: center; gap: 1.2rem; padding: .9rem 1.4rem; border-radius: 1rem; background: #fdeeeb; font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.f2-agenda li.now { background: var(--red); color: #fff; }
.lg-b::before { background: #f8d8d2; }
.lg-a::before { background: var(--red); }
.ycard-img .ui-row { padding: .6rem 1.2rem; margin-bottom: .5rem; }
.ycard-img .ui-ai { margin-top: .6rem; padding: .8rem 1.2rem; }
.ycard-img .ui-flow { row-gap: 1.4rem; }
.ycard-img .ch-bars { height: 11rem; }

/* 移植した図の .a1〜.a3（顧客のアイコン色）がサイクルの矢印に当たらないように */
.cycle .cycle-arrow { background: var(--white); }

/* 支援内容の図: 赤系に統一。高さは図の平均に合わせる */
.mcard-img { height: 17.5rem; }
.mcard-img .fig { display: flex; flex-direction: column; justify-content: center; }
.f1-plug, .f1-plug::before, .f1-plug::after { background: var(--red); }
.f1-line { background: repeating-linear-gradient(90deg, var(--red) 0 .6rem, transparent .6rem 1.1rem); background-size: 1.1rem 100%; }
.f1-tools li.on::after { color: #fff; }
.f2-agenda li.now time { color: #ffd9d2; }
.f2-agenda em { background: #fff; color: var(--red); }
.f3-ans b { background: #fff; color: var(--red); }
.f4-flow i { background: repeating-linear-gradient(90deg, var(--red) 0 .5rem, transparent .5rem .9rem); background-size: .9rem 100%; }
.f4-auto { background: #fdeeeb; color: var(--red); }
.f4-auto b { background: var(--red); color: #fff; }
.f6 svg { height: 10rem; margin: 0; }

/* 01 の図は横並びのまま。中身を少し詰めて枠に収める */
.mcard-img { height: 18.5rem; }
.mcard-img .f1 { flex-direction: row; }
.mcard-img .f1-tools { gap: .5rem; }
.mcard-img .f1-tools li { padding: .6rem 1.2rem !important; font-size: 1.2rem !important; }
.mcard-img .f1-sys { padding: 1.2rem 1.2rem; font-size: 1.2rem; }

/* 06 使い続けられるように: 整えたもの（共有・マニュアル・ルール）が毎日の仕事に組み込まれる図 */
.mcard-img .f6 { flex-direction: row; align-items: center; gap: 1rem; }
.f6-list { display: grid; gap: .6rem; flex: none; }
.f6-list li { position: relative; padding: .6rem 1rem .6rem 3rem; border-radius: 10rem; background: #fdeeeb; font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--ink); white-space: nowrap; }
.f6-list li::before { content: ""; position: absolute; left: .8rem; top: .5rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--red); }
.f6-list li::after { content: ""; position: absolute; left: 1.25rem; top: .8rem; width: .4rem; height: .7rem; border: solid #fff; border-width: 0 .2rem .2rem 0; transform: rotate(45deg); }
.f6-arrow { flex: 1; height: .3rem; min-width: 1.6rem; background: repeating-linear-gradient(90deg, var(--red) 0 .5rem, transparent .5rem .9rem); background-size: .9rem 100%; animation: fl-move .6s linear infinite; position: relative; }
.f6-arrow::after { content: ""; position: absolute; right: -.2rem; top: -.5rem; border: .65rem solid transparent; border-left: .8rem solid var(--red); border-right: 0; }
.f6-week { flex: none; padding: 1rem 1.2rem; border-radius: 1.2rem; background: #fdeeeb; text-align: center; }
.f6-week p { font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--ink); }
.f6-week ul { display: flex; gap: .4rem; margin-top: .8rem; }
.f6-week li { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--red); font-size: 1.1rem; font-weight: 800; line-height: 1; color: #fff; }

.f2-agenda { margin-top: 0; }

/* 図の高さを中身に合わせて詰める（209 → 155px） */
.mcard-img { height: 15.5rem; }

/* 01 ツール選びと設定: 候補から選んだツールが、今のシステムにつながって「連携 ON」になる */
.mcard-img .f1 { gap: 1rem; }
.mcard-img .f1-tools li { position: relative; padding: .6rem 1.4rem .6rem 3rem !important; font-size: 1.2rem !important; }
.mcard-img .f1-tools li::before { content: ""; position: absolute; left: 1rem; top: .55rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: .2rem solid #f0c9c2; background: #fff; }
.mcard-img .f1-tools li.on::before { border-color: #fff; background: #fff; }
.mcard-img .f1-tools li.on::after { content: ""; position: absolute; left: 1.45rem; top: .8rem; width: .4rem; height: .7rem; border: solid var(--red); border-width: 0 .2rem .2rem 0; transform: rotate(45deg); margin: 0; }
.mcard-img .f1-sys { position: relative; gap: .6rem; padding: 0 0 1rem; border-radius: 1.2rem; background: #fff; border: .2rem solid #f8d8d2; overflow: hidden; }
.f1-win { display: flex; gap: .4rem; width: 100%; padding: .6rem .8rem; background: #fdeeeb; }
.f1-win i { width: .7rem; height: .7rem; border-radius: 50%; background: #f0a99c; }
.f1-win i:first-child { background: var(--red); }
.mcard-img .f1-sys b { display: block; padding: .6rem 1.2rem 0; font-size: 1.2rem; font-weight: 800; }
.f1-sys em { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .4rem; border-radius: 10rem; background: var(--red); font-style: normal; font-size: 1rem; font-weight: 800; color: #fff; }
.f1-sys em i { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; }
.f1-plug { display: none; }

/* 06 使い続けられるように: 04 と同じ 2 段のレイアウトで、部品は前のデザイン（✓ のピル ＋ 月〜金） */
.mcard-img .f6 { flex-direction: column; justify-content: center; gap: 1.6rem; }
.f6-flow { display: flex; align-items: center; gap: .6rem; }
.f6-flow span { position: relative; flex: 1; padding: .8rem .6rem .8rem 2.8rem; border-radius: 10rem; background: #fdeeeb; font-size: 1.15rem; font-weight: 800; line-height: 1; color: var(--ink); white-space: nowrap; }
.f6-flow span::before { content: ""; position: absolute; left: .8rem; top: .6rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--red); }
.f6-flow span::after { content: ""; position: absolute; left: 1.25rem; top: .9rem; width: .4rem; height: .7rem; border: solid #fff; border-width: 0 .2rem .2rem 0; transform: rotate(45deg); }
.f6-flow i { flex: none; width: 1.8rem; height: .3rem; background: repeating-linear-gradient(90deg, var(--red) 0 .5rem, transparent .5rem .9rem); background-size: .9rem 100%; animation: fl-move .6s linear infinite; }
.f6-week { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: .8rem 1.4rem; border-radius: 1.2rem; background: #fdeeeb; }
.f6-week p { font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--red); }
.f6-week ul { display: flex; gap: .4rem; margin: 0; }

/* 01 ツール選びと設定: 少し大きく */
.mcard-img .f1 { gap: 1.2rem; }
.mcard-img .f1-tools { gap: .6rem; }
.mcard-img .f1-tools li { padding: .8rem 1.6rem .8rem 3.4rem !important; font-size: 1.4rem !important; }
.mcard-img .f1-tools li::before { left: 1.1rem; top: .75rem; width: 1.6rem; height: 1.6rem; }
.mcard-img .f1-tools li.on::after { left: 1.6rem; top: 1rem; width: .45rem; height: .8rem; }
.mcard-img .f1-sys { padding-bottom: 1.2rem; border-radius: 1.4rem; }
.f1-win { padding: .7rem 1rem; gap: .5rem; }
.f1-win i { width: .8rem; height: .8rem; }
.mcard-img .f1-sys b { padding: .8rem 1.4rem 0; font-size: 1.4rem; }
.f1-sys em { padding: .4rem 1rem .4rem .5rem; font-size: 1.15rem; }
.f1-sys em i { width: 1.4rem; height: 1.4rem; }

/* 06 の「毎日の仕事に」を丸と同じ高さに揃える */
.f6-week p { line-height: 2.2rem; }
/* 05 ムダな支出: バーを太く */
.f5-bars i { height: 2.4rem; }
.f5-bars { gap: .6rem; }
.f5-row { margin-top: 1.8rem; }
.f5-l { font-size: 1.4rem; width: 6rem; }

/* 06: 点線なし・間隔は詰める・「毎日の仕事に」と曜日はセンターに・文字は大きく */
.f6-flow { gap: .6rem; }
.f6-flow i { display: none; }
.f6-flow span { padding: .9rem .4rem .9rem 2.9rem; font-size: 1.3rem; text-align: center; }
.f6-week { flex-direction: column; gap: .8rem; padding: 1rem 1.4rem; }
.f6-week p { font-size: 1.5rem; line-height: 1; }
.f6-week ul { gap: .6rem; justify-content: center; }
.f6-week li { width: 2.8rem; height: 2.8rem; font-size: 1.3rem; }
/* 05: 下がぎりぎりなので詰める */
.f5-row { margin-top: 1.4rem; }
.f5-row:first-child { margin-top: 0; }
.f5-bars i { height: 2rem; }
.f5-bars { gap: .5rem; }

.mcard-img .f6 { align-items: stretch; }   /* 毎日の仕事に の枠を横幅いっぱいに */

/* 図の枠は中身に合わせた高さにして、上下左右の余白を同じ 16px に */
.mcard-img { height: auto; }
.mcard-img .fig { height: auto; padding: 1.6rem; }
.mcard-img .f1-sys { padding-bottom: 1rem; }

/* 06: 「毎日の仕事に」と曜日は横並び、縦はセンター */
.f6-week { flex-direction: row; align-items: center; justify-content: center; gap: 1.2rem; }
.f6-week p { margin: 0; line-height: 2.8rem; }

/* 図の枠は 6 つとも同じ高さ（いちばん高い 04 に合わせる）。中身は上下中央、余白は四方 16px */
.mcard-img { height: 16.4rem; }
.mcard-img .fig { height: 100%; }

/* ゆとりを設計しよう の図: 緑ベースに統一 */
.ycard-img .ui { border-color: #dcefe3; background: #f3faf5; }
.ycard-img .ui-bar { border-bottom-color: #dcefe3; }
.ycard-img .ui-bar span { color: #6f9c82; }
.ycard-img .av.a1 { background: var(--green); }
.ycard-img .av.a2 { background: #107c41; }
.ycard-img .av.a3 { background: #9ad9b3; }
.ycard-img .nm small { color: #6f9c82; }
.ycard-img .st-w { background: #e6f5ec; color: #107c41; }
.ycard-img .st-b { background: #cfeedb; color: #107c41; }
.ycard-img .st-g { background: var(--green); color: #fff; }
.ycard-img .ui-ai { background: var(--green); }
.ycard-img .ui-ai b, .ycard-img .fl-ai b { background: #fff; color: #107c41; }
.ycard-img .fl-ai { background: var(--green); }
.ycard-img .fl-arrow { background: repeating-linear-gradient(90deg, var(--green) 0 .6rem, transparent .6rem 1.1rem); background-size: 1.1rem 100%; }
.ycard-img .fl-arrow::after { border-left-color: var(--green); }
.ycard-img .fl-doc { border-color: #b9dcc7; }
.ycard-img .fl-doc i { background: #b9dcc7; }
.ycard-img .fl-note { color: #6f9c82; }
.ycard-img .fl-note b { color: #107c41; }
.ycard-img .ch-h span, .ycard-img .ch-legend { color: #6f9c82; }
.ycard-img .ch-bars { border-bottom-color: #dcefe3; }
.ycard-img .ch-bars span { background: #cfeedb; }
.ycard-img .ch-bars i { background: var(--green); }
.ycard-img .ch-bars span:nth-child(4) i { background: #ff6b5f; }   /* 注意の案件だけ赤 */
.ycard-img .lg1::before { background: #cfeedb; }
.ycard-img .lg2::before { background: var(--green); }

/* サービスの 2 項目: 他と同じ 20px、左に短い横線 */
.fcol-svc li { font-size: 1.7rem; line-height: 1; }
.fcol-svc li a { position: relative; display: inline-block; padding-left: 2.4rem; }
.fcol-svc li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.6rem; height: .1rem; background: currentColor; }

/* ---------- メニュー（MENU ボタンで開く全画面ナビ） ---------- */
.mnav { position: fixed; inset: 0; z-index: 80; background: var(--blue); color: var(--white); overflow: auto; opacity: 0; transition: opacity .35s ease; }
.mnav.is-open { opacity: 1; }
.mnav-logo { position: absolute; left: 4.8rem; top: 5rem; width: 20rem; }
.mnav-close { position: absolute; right: 4.8rem; top: 4.4rem; width: 4rem; height: 4rem; border: .1rem solid var(--white); border-radius: .5rem; background: transparent; cursor: pointer; transition: background .3s; z-index: 2; }
.mnav-close i { position: absolute; left: 50%; top: 50%; width: 2rem; height: .2rem; background: var(--white); transform: translate(-50%, -50%) rotate(45deg); transition: background .3s; }
.mnav-close i + i { transform: translate(-50%, -50%) rotate(-45deg); }
.mnav-close:hover { background: var(--white); }
.mnav-close:hover i { background: var(--blue); }
/* 目（マウスを追う・瞬きする） */
.mnav-eyes { display: flex; justify-content: space-between; padding: 0 1rem; }   /* 上端はナビの上端に揃う */
.mnav-eye { position: relative; left: auto; top: auto; z-index: 1; opacity: 0; scale: .6; transition: opacity .5s ease .2s, scale .7s cubic-bezier(.3, 1.6, .5, 1) .2s; }
.mnav.is-open .mnav-eye { opacity: 1; scale: 1; }
.mnav-body { position: relative; display: grid; grid-template-columns: 1fr 60rem; gap: 8rem; align-items: stretch; align-content: center; padding: 16rem 12rem 14rem 12rem; min-height: 100%; }
/* 出てくるときは項目が 1 つずつ下から */
.mnav-col > li, .mnav-side > * { opacity: 0; translate: 0 2rem; transition: opacity .5s ease, translate .6s var(--ease-out); transition-delay: var(--d, 0s); }
.mnav.is-open .mnav-col > li, .mnav.is-open .mnav-side > * { opacity: 1; translate: 0 0; }
.mnav-col > li:nth-child(1) { --d: .05s; } .mnav-col > li:nth-child(2) { --d: .1s; } .mnav-col > li:nth-child(3) { --d: .15s; } .mnav-col > li:nth-child(4) { --d: .2s; } .mnav-col > li:nth-child(5) { --d: .25s; } .mnav-col > li:nth-child(6) { --d: .3s; }
.mnav-col + .mnav-col > li { transition-delay: calc(var(--d) + .05s); }
.mnav-side > * { --d: .4s; }
/* LP の順番どおりの一覧（2 列 × 6）。すべて同じ大きさ、サービスの 2 つはセクション色の丸を目印に */
/* 左右の列は同じ 6 行のグリッドに置いて、行の位置を揃える */
.mnav-list { display: grid; grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: 4.4rem 8rem; align-items: center; align-self: start; }
.mnav-col { display: contents; }
.mnav-list a { position: relative; display: inline-flex; align-items: baseline; gap: 1.6rem; font-size: 3.6rem; font-weight: 800; line-height: 1; white-space: nowrap; transition: opacity .3s ease; }
.mnav-list a:hover { opacity: .5; }   /* ホバーは線ではなく半透明に */
.mnav-list .n { position: relative; top: -.6rem; font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; font-size: 1.6rem; color: var(--yellow); }   /* 数字は文字の上寄り */
/* ゆとりをつくろう の下にサービス 2 つ（セクション色の丸を目印に） */
.mnav-sub { padding-left: 4rem; }
.mnav-sub a { position: relative; display: inline-block; padding-left: 3.2rem; font-size: 3.2rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.mnav-sub a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.8rem; height: 1.8rem; margin-top: -.9rem; border-radius: 50%; background: var(--green); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.mnav-sub a.svc-red::before { background: var(--red); }
.mnav-sub a:hover::before { transform: scale(1.5); }
/* 右: 目の下にボタン */
.mnav-side { display: flex; flex-direction: column; justify-content: space-between; }   /* 目は上、ボタンは下（ナビの上下に揃う） */
.mnav-btns { display: flex; gap: 1.6rem; }   /* 横並び。相談ボタンを広めに */
.mnav-contact { flex: 1 1 0; }
.mnav-demo { flex: 0 0 20rem; padding: 0 2rem; white-space: nowrap; }
.mnav-contact, .mnav-demo { position: relative; display: flex; align-items: center; justify-content: space-between; height: 8.4rem; padding: 0 3.6rem; border-radius: 1.2rem; font-size: 2.2rem; font-weight: 800; line-height: 1; overflow: hidden; isolation: isolate; transition: color .3s; }
.mnav-contact::before, .mnav-demo::before { content: ""; position: absolute; inset: 0; background: var(--hover-bg); transform: translateX(-101%); transition: transform .5s var(--ease-out); z-index: -1; }
.mnav-contact:hover::before, .mnav-demo:hover::before { transform: translateX(0); }
.mnav-contact { background: var(--yellow); color: var(--blue); --hover-bg: var(--white); }
.mnav-contact img { width: 1.8rem; height: 1.6rem; }
.mnav-contact:hover img { animation: arrow-out-in .6s ease-in-out; }
.mnav-demo { justify-content: center; border: .2rem solid var(--white); color: var(--white); --hover-bg: var(--white); }
.mnav-demo:hover { color: var(--blue); }
body.is-menu-open { overflow: hidden; }
@media (max-width: 767px) {
  .mnav-body { grid-template-columns: 1fr; gap: 6rem; padding: 14rem 6rem 16rem; }
  .mnav-eye { display: none; }
  .mnav-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 2.8rem; }
  .mnav-list a { font-size: 3.2rem; }
  .mnav-btns { flex-direction: column; }
  .mnav-contact, .mnav-demo { height: 9rem; font-size: 2.8rem; }
  .mnav-demo { flex: none; }
}