/* ==========================================================
   &PRO LP (/page/lp/01/b/) スタイル
   デザイントークン：docs 参照（design_handoff_andpro_lp/README.md）
   ブレークポイント：SP <=760px ／ タブレット 761-1080px ／ PC >=1081px
   ========================================================== */

:root {
  --c-main: #01503D;        /* メイン（ディープエメラルド） */
  --c-dark: #003F31;        /* ダークグリーン */
  --c-mid: #1A8876;         /* ミドルグリーン */
  --c-light: #58C588;       /* ライトグリーン */
  --c-yellow: #F8DB46;      /* アクセント */
  --c-yellow-dark: #d9bc2c; /* ボタン押下用 */
  --c-bg-green: #F3F8F5;    /* 薄グリーン */
  --c-bg-gray: #EDF3F0;     /* 薄グレーグリーン */
  --c-text: #1D2925;        /* 本文 */
  --c-text-sub: #5D6B66;    /* 補足 */
  --c-line: #DCE7E2;        /* 罫線 */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;
  --sec-pad: clamp(56px, 6.5vw, 100px);
  --col-gap: clamp(24px, 3vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-jp);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-main); text-decoration: none; }
ul { list-style: none; }
input, textarea, button { font-family: var(--font-jp); }
/* ヘッダーは FV＋CTAバンドを過ぎるとスクロールアウトするため、アンカー余白は最小限 */
section[id] { scroll-margin-top: 8px; }

@keyframes andpro-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- 共通パーツ ---------- */
.container { max-width: 1200px; margin: 0 auto; }
.container-narrow { max-width: 1000px; margin: 0 auto; }

.section-head { text-align: center; }
.section-label {
  font: 700 11.5px/1 var(--font-en);
  letter-spacing: .2em;
  color: var(--c-mid);
  margin-bottom: 14px;
}
.section-title { font: 900 clamp(22px, 2.8vw, 36px)/1.55 var(--font-jp); color: var(--c-text); }
.section-title > span { display: inline-block; }
.section-lead {
  margin: 16px auto 0;
  font: 400 clamp(14.5px, 1.05vw, 16px)/1.95 var(--font-jp);
  color: var(--c-text-sub);
}

.marker { font-style: normal; background: linear-gradient(transparent 62%, var(--c-yellow) 62%); padding: 0 2px; }
.marker-dark { font-style: normal; color: #fff; background: linear-gradient(transparent 62%, rgba(248,219,70,.32) 62%); padding: 0 2px; }
.strong-green { font-style: normal; color: var(--c-main); }

.pill-yellow {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 14px; border-radius: 999px;
  background: var(--c-yellow);
  font: 800 12px/1 var(--font-jp); color: var(--c-dark); white-space: nowrap;
}
.pill-yellow.sq { border-radius: 6px; padding: 0 13px; }
.pill-gray {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 13px; border-radius: 6px;
  background: var(--c-bg-gray);
  font: 700 12px/1 var(--font-jp); color: var(--c-text-sub); white-space: nowrap;
}
.pill-green {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 11px; border-radius: 5px;
  background: var(--c-main);
  font: 800 11.5px/1 var(--font-jp); color: var(--c-yellow); white-space: nowrap;
}

.stripe-overlay { position: relative; overflow: hidden; }
.stripe-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px);
  pointer-events: none;
}

.bob-triangle {
  display: block; width: 0; height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-top: 19px solid var(--c-light);
  animation: andpro-bob 2.4s ease-in-out infinite;
}
.bob-arrow {
  font: 400 30px/1 var(--font-en);
  color: var(--c-light);
  animation: andpro-bob 2.4s ease-in-out infinite;
}

.pc-only { display: inline; }
.sp-only { display: none; }
@media (max-width: 760px) { .pc-only { display: none; } .sp-only {display: initial;}}

/* スクロール表示アニメーション（JSが .is-visible を付与） */
.reveal, .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible, .reveal-item.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-item { opacity: 1; transform: none; transition: none; }
  .bob-triangle, .bob-arrow { animation: none; }
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  height: 72px; padding: 0 24px;
  display: flex; align-items: center; gap: 20px;
}
.header-logo { 
  display: flex; 
  align-items: baseline; 
  flex: none; 
  flex-direction: column;
}
.header-logo>h1{
  font-size: 11px;
}
.header-logo-mark { font: 800 25px/1 var(--font-en); color: var(--c-main); letter-spacing: -.03em; }
.header-logo-sub { font: 500 11.5px/1 var(--font-jp); color: var(--c-text-sub); white-space: nowrap; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.header-nav a { font: 500 13.5px/1 var(--font-jp); color: var(--c-text); white-space: nowrap; }
.header-nav a:hover { color: var(--c-mid); }
.header-right { display: flex; align-items: center; gap: 10px; flex: none; }
.header-cta {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 52px; padding: 0 22px; border-radius: 8px;
  background: var(--c-main);
}
.header-cta:hover { background: var(--c-dark); }
.header-cta-main { font: 700 15px/1 var(--font-jp); color: #fff; white-space: nowrap; }
.header-cta-sub { font: 400 10px/1 var(--font-jp); color: var(--c-light); white-space: nowrap; }
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line); border-radius: 8px; background: #fff;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
}
.menu-toggle:hover { background: var(--c-bg-green); }
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--c-text); }
.sp-menu {
  display: none;
  border-top: 1px solid var(--c-line);
  background: #fff;
  padding: 6px 24px 20px;
  flex-direction: column;
}
.sp-menu a { padding: 16px 4px; font: 500 15px/1 var(--font-jp); color: var(--c-text); border-bottom: 1px solid var(--c-bg-gray); }
.sp-menu .sp-menu-cta {
  margin-top: 16px; height: 56px; border-radius: 8px; border-bottom: none;
  background: var(--c-main); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--font-jp);
}
.site-header.is-open .sp-menu { display: flex; }

@media (max-width: 1080px) {
  .header-nav { display: none; }
  .header-right { margin-left: auto; }
  .header-cta { display: none; }
  .header-logo-sub { display: none; }
  .menu-toggle { display: flex; }
}
@media (max-width: 760px) {
  .site-header { position: static; }
  .header-inner { height: 80px; padding: 0 14px; }
  .header-logo-mark { font-size: 21px; }
  .sp-menu { padding: 6px 14px 20px; }
}

/* ---------- 1. ファーストビュー ---------- */
/* 背景画像（文字なし）の上に、実テキストの見出しを重ねる。
   PC は 2078×757、SP は 1122×1402 の原寸を基準に、
   すべての数値を vw／％ に換算して画像と同じ比率で拡縮させる。 */
.fv { background: var(--c-main); }
.fv img { width: 100%; height: auto; }
/* 100vw はスクロールバー幅を含むので、画像実幅の 1% をコンテナクエリ単位で取る。
   未対応ブラウザは vw のフォールバック。 */
.fv-inner { position: relative; --fvu: 1vw; }
@supports (container-type: inline-size) {
  .fv-inner { container-type: inline-size; }
  .fv-copy { --fvu: 1cqw; }
}
.fv-copy {
  position: absolute;
  left: 13.86%;   /* 288 / 2078 */
  top: 15.61%;    /* 118 / 757 */
  width: 80%;
  color: #fff;
}
.fv-title {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: calc(var(--fvu) * 4.235);   /* 88 / 2078 */
  line-height: 1.368em;    /* 120.4 / 88 ※emで固定し、文字サイズ差で行送りが変わらないようにする */
  letter-spacing: .022em;
  color: #fff;
}
.fv-title-row { display: block; white-space: nowrap; }
/* 行内の span は line-height:0 にして、行ボックスを親の strut（＝120.4px相当）に固定する。
   これを省くと、小さいかな・大きい数字の分だけ行送りが伸びてしまう。 */
.fv-title-row span { line-height: 0; }
.fv-title .kana { font-size: .75em; }      /* の・を・で は漢字より小さい */
.fv-title .sub  { font-size: .824em; }     /* 月額／構築 */
.fv-title .en   { letter-spacing: 0; }     /* IT・Web（欧文部分はベタ組み） */
.fv-title .dot  { margin: 0 -.336em; }     /* ・ を約1/3幅に詰める */
.fv-title .hl   { color: #FCD448; margin-left: .134em; }  /* 2万円 */
.fv-title .num  { font-size: 1.5em; margin-right: .0387em; }  /* 2 */
.fv-rule {
  display: block;
  width: calc(var(--fvu) * 30.17);       /* 627 / 2078 */
  height: 1px;
  margin: calc(var(--fvu) * .513) 0 0;   /* 10.67 / 2078 */
  /* 右側 40% が徐々に消える罫線（原画像の減衰カーブを近似） */
  background: linear-gradient(90deg,
    #01825C 0 60%,
    rgba(1,130,92,.85) 66%,
    rgba(1,130,92,.66) 72%,
    rgba(1,130,92,.47) 78.5%,
    rgba(1,130,92,.31) 85%,
    rgba(1,130,92,.19) 91%,
    rgba(1,130,92,.09) 97.5%,
    rgba(1,130,92,0) 100%);
}
.fv-lead {
  margin-top: calc(var(--fvu) * .871);   /* 18.1 / 2078 */
  font-weight: 400;
  font-size: calc(var(--fvu) * 1.3186);  /* 27.4 / 2078 */
  line-height: 1.476em;    /* 40.45 / 27.4 */
  letter-spacing: .022em;
  word-spacing: .18em;     /* 「IT PRO」の空きを原画像に合わせる */
  font-feature-settings: "palt" 1;  /* かな・約物を詰める（原デザインと同じ組み） */
  color: #fff;
}
.fv-br-sp { display: none; }

@media (max-width: 760px) {
  .fv-copy { left: 6.95%; top: 3.88%; }   /* 78 / 1122、54.4 / 1402 */
  .fv-title {
    font-size: calc(var(--fvu) * 9.626);   /* 108 / 1122 */
    line-height: 1.3625em; /* 147.15 / 108 */
  }
  .fv-rule {
    width: calc(var(--fvu) * 68.36);       /* 767 / 1122 */
    margin-top: calc(var(--fvu) * 1.261);  /* 14.15 / 1122 */
  }
  .fv-lead {
    margin-top: calc(var(--fvu) * 1.444);  /* 16.2 / 1122 */
    font-size: calc(var(--fvu) * 2.7629);  /* 31 / 1122 */
    line-height: 1.945em;  /* 60.3 / 31 */
    letter-spacing: .079em;
  }
  .fv-br-sp { display: inline; }
}

/* ---------- 2. CTAバンド ---------- */
.cta-band { background: #fff; border-bottom: 1px solid var(--c-line); padding: clamp(32px, 4vw, 52px) 24px; }
.cta-band-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta-band-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-cta-main {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 300px; min-height: 78px; padding: 12px 44px;
  border-radius: 12px; background: var(--c-main);
  border-bottom: 5px solid #003026;
}
.btn-cta-main:hover { background: var(--c-dark); }
.btn-cta-main:active { background: var(--c-dark); transform: translateY(2px); border-bottom-width: 3px; }
.btn-cta-main-label { font: 800 22px/1 var(--font-jp); color: #fff; white-space: nowrap; }
.btn-cta-main-sub { font: 500 12.5px/1 var(--font-jp); color: var(--c-light); white-space: nowrap; }
.btn-cta-sub {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 260px; min-height: 78px; padding: 12px 34px;
  border-radius: 12px; border: 1.5px solid var(--c-line); background: #fff;
  color: var(--c-main); font: 700 18px/1 var(--font-jp); white-space: nowrap;
}
.btn-cta-sub:hover { background: var(--c-bg-green); }
.btn-cta-sub:active { background: var(--c-bg-gray); }
.btn-cta-sub .arrow { color: var(--c-light); }
.cta-band-note { text-align: center; font: 600 clamp(13.5px, 1.15vw, 16px)/1.8 var(--font-jp); color: var(--c-text-sub); }
.cta-band-note > span { display: inline-block; }
@media (max-width: 760px) {
  .btn-cta-sub { display: none; }
  .cta-band-note > span { display: inline; }
}

/* ---------- 3. 課題提起 ---------- */
.problem { background: var(--c-bg-green); padding: var(--sec-pad) 24px clamp(28px, 4vw, 40px); }
.problem-title {
  margin: 0 -12px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(4px, 1.4vw, 14px);
  font: 900 clamp(18px, 5.2vw, 36px)/1.5 var(--font-jp);
  color: var(--c-text);
  white-space: nowrap; max-width: calc(100% + 24px);
}
.problem-title .slash { font: 400 clamp(15px, 3.8vw, 28px)/1 var(--font-en); color: var(--c-light); }
.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--col-gap);
  margin-top: clamp(32px, 3.6vw, 48px);
  align-items: stretch;
}
.problem-photo { position: relative; min-height: 320px; border-radius: 16px; overflow: hidden; background: var(--c-bg-gray); }
.problem-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.problem-list { display: grid; gap: 10px; min-width: 0; }
.problem-list li {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 20px 22px;
}
.problem-num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--c-main); color: #fff;
  font: 800 13px/1 var(--font-en);
}
.problem-body { min-width: 0; }
.problem-heading { display: block; font: 700 16px/1.6 var(--font-jp); color: var(--c-text); }
.problem-text { display: block; margin-top: 5px; font: 400 13.5px/1.85 var(--font-jp); color: var(--c-text-sub); }
@media (max-width: 760px) {
  .problem-grid { grid-template-columns: 1fr; gap: 16px; }
  .problem-photo { min-height: 220px; }
}

.problem-arrow { background: var(--c-bg-green); display: flex; justify-content: center; padding-bottom: 4px; }

.solution { background: var(--c-bg-green); padding: clamp(20px, 2.6vw, 28px) 24px clamp(56px, 6.5vw, 88px); }
.solution-box {
  max-width: 940px; margin: 0 auto;
  background: var(--c-main); border-radius: 16px;
  padding: clamp(28px, 3.6vw, 44px);
  text-align: center;
}
.solution-box p { position: relative; font: 900 clamp(18px, 2.2vw, 28px)/1.75 var(--font-jp); color: #fff; }
.solution-box p > span { display: inline-block; }
@media (max-width: 760px) { .solution-box p > span { display: inline; } }

/* ---------- 4. コンセプト ---------- */
.concept { background: #fff; padding: var(--sec-pad) 24px; }
.concept-sub { margin-top: 16px; font: 700 clamp(14.5px, 1.15vw, 16.5px)/1.9 var(--font-jp); color: var(--c-mid); }
.concept-top {
  margin-top: clamp(32px, 3.6vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  gap: var(--col-gap);
  align-items: stretch;
}
.concept-photo { position: relative; min-height: 320px; border-radius: 16px; overflow: hidden; background: var(--c-bg-gray); }
.concept-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.concept-card { min-width: 0; background: var(--c-main); border-radius: 16px; padding: clamp(26px, 3vw, 36px); }
.concept-card-title { margin: 14px 0 0; font: 900 clamp(18px, 2vw, 23px)/1.55 var(--font-jp); color: #fff; }
.concept-card-title .divider { color: rgba(255,255,255,.45); font-weight: 400; }
.concept-card-text { margin: 10px 0 18px; font: 400 13.5px/1.9 var(--font-jp); color: rgba(255,255,255,.78); }

.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-grid li {
  display: flex; gap: 8px; align-items: center;
  background: rgba(255,255,255,.08); border-radius: 8px;
  padding: 11px 13px;
  font: 500 13.5px/1.5 var(--font-jp); color: #fff;
}
.check-grid .check { flex: none; color: var(--c-light); font: 700 12px/1 var(--font-en); }
.check-grid.strong li { padding: 13px 14px; font-weight: 600; }
@media (max-width: 760px) { .check-grid { grid-template-columns: 1fr; } }

.concept-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0; }
.concept-mid-band {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  text-align: center; gap: 0 6px;
  min-height: 64px; padding: 14px 28px; border-radius: 12px;
  background: var(--c-main);
  font: 800 clamp(15px, 1.6vw, 21px)/1.7 var(--font-jp); color: #fff;
}
.concept-mid-band span { white-space: nowrap; }
.concept-mid-band .yellow { color: var(--c-yellow); }

.concept-bottom {
  background: var(--c-bg-green); border-radius: 16px;
  padding: clamp(20px, 2.2vw, 26px);
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, .74fr);
  gap: var(--col-gap);
  align-items: stretch;
}
.concept-bottom-text { min-width: 0; }
.concept-bottom-title { font: 900 clamp(18px, 2vw, 23px)/1.55 var(--font-jp); color: var(--c-text); }
.concept-bottom-title .divider { color: var(--c-text-sub); font-weight: 400; }
.concept-bottom-text > p { margin: 8px 0 14px; font: 400 13.5px/1.9 var(--font-jp); color: var(--c-text-sub); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list span {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 18px; border-radius: 8px;
  background: #fff; border: 1px solid var(--c-line);
  font: 600 14.5px/1 var(--font-jp); color: var(--c-text); white-space: nowrap;
}
.concept-bottom-photo { position: relative; min-height: 210px; border-radius: 14px; overflow: hidden; background: var(--c-bg-gray); }
.concept-bottom-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
.concept-closing {
  margin: clamp(26px, 3vw, 36px) auto 0;
  max-width: 820px; text-align: center;
  font: 600 clamp(14.5px, 1.05vw, 16px)/2.1 var(--font-jp); color: var(--c-text);
}
@media (max-width: 760px) {
  .concept-top { grid-template-columns: 1fr; gap: 16px; }
  .concept-photo { min-height: 220px; }
  .concept-bottom { grid-template-columns: 1fr; gap: 16px; }
  .concept-bottom-photo { min-height: 200px; }
}

/* ---------- 5. 仕組み ---------- */
/* 左（01〜05のステップ）は実テキスト、右（チャット画面＋下段カード）は画像。
   --u = パネル幅の 1%。PC は原デザインのカード幅 1411px、SP は画像幅 864px を
   基準に、各値を --u に換算しているので画像と同じ比率で拡縮する。 */
.how { background: var(--c-bg-gray); padding: var(--sec-pad) 24px; }
.how .section-head { margin-bottom: clamp(32px, 3.6vw, 48px); }
.how-panel {
  /* 100vw はスクロールバー幅を含むため、パネル実幅の 1% をコンテナクエリ単位で取る。
     未対応ブラウザは vw のフォールバック（数%ずれるが崩れはしない）。 */
  --u: calc(min(100vw - 48px, 1200px) / 100);
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
@supports (container-type: inline-size) {
  .how-panel { container-type: inline-size; }
  .how-steps { --u: 1cqw; }
}
.how-steps {
  position: relative;
  flex: 1 1 auto;
  padding-top: calc(var(--u) * 3.111);   /* 43.9 / 14.11 */
}
.how-steps::after {                       /* 中央の縦罫線 */
  content: '';
  position: absolute;
  right: 0;
  top: calc(var(--u) * 3.189);            /* 45 */
  height: calc(var(--u) * 48.263);        /* 681 */
  width: 1px;
  background: #ECECEC;
}
.how-visual { flex: 0 0 52.445%; }        /* 740 / 1411 */
.how-visual img { width: 100%; height: auto; }

.how-step { position: relative; padding-left: calc(var(--u) * 9.121); }  /* 128.7 */
.how-step + .how-step { margin-top: calc(var(--u) * 3.331); }            /* 47 */
.how-step-num {
  position: absolute;
  left: calc(var(--u) * 3.083);           /* 43.5 */
  top: calc(var(--u) * -0.078);
  width: calc(var(--u) * 3.685);          /* 52 */
  height: calc(var(--u) * 3.685);
  border-radius: 50%;
  background: var(--c-main);
  color: #fff;
  font: 700 calc(var(--u) * 1.488)/calc(var(--u) * 3.685) var(--font-jp);  /* 21 */
  text-align: center;
}
.how-step-icon { display: none; }
/* ステップ間をつなぐ縦線（solid → dashed → dotted → solid） */
.how-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--u) * 4.855);           /* 円の中心 69.5 − 線幅の半分 */
  top: calc(var(--u) * 3.607);
  bottom: calc(var(--u) * -3.253);
  width: calc(var(--u) * 0.142);          /* 2 */
  background: var(--c-main);
}
.how-step:nth-child(2)::after {
  background: repeating-linear-gradient(180deg,
    var(--c-main) 0 calc(var(--u) * .78), transparent calc(var(--u) * .78) calc(var(--u) * .921));
}
.how-step:nth-child(3)::after {
  background: repeating-linear-gradient(180deg,
    var(--c-main) 0 calc(var(--u) * .085), transparent calc(var(--u) * .085) calc(var(--u) * .184));
}
.how-step-title {
  font-weight: 700;
  font-size: calc(var(--u) * 2.055);      /* 29 */
  line-height: calc(var(--u) * 2.977);    /* 42 */
  color: var(--c-dark);
}
.how-step-title .dot { margin: 0 -.293em; }  /* 見出しの「・」だけ約4割幅に詰める */
.how-step-tag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: calc(var(--u) * 1.2);
  height: calc(var(--u) * 2.268);         /* 32 */
  padding: 0 calc(var(--u) * .833);       /* 11.75 */
  border-radius: calc(var(--u) * .425);   /* 6 */
  background: #FDF5B9;
  color: var(--c-dark);
  font-weight: 700;
  font-size: calc(var(--u) * 1.063);      /* 15 */
  letter-spacing: normal;
  white-space: nowrap;
}
.how-step-desc {
  margin-top: calc(var(--u) * .695);      /* 9.8 */
  font-size: calc(var(--u) * 1.467);      /* 20.7 */
  line-height: calc(var(--u) * 2.410);    /* 34 */
  color: #545A58;
}

@media (max-width: 760px) {
  .how { padding-left: 16px; padding-right: 16px; }
  .how-panel {
    --u: 1vw;                             /* SP は画像幅 864px = パネル幅 */
    display: block;
    width: calc(100% + 32px);
    margin: 0 -16px;
    background: #F5F8F7;
    border-radius: 0;
  }
  .how-steps { padding-top: calc(var(--u) * 5.903); }  /* 51 */
  .how-steps::after { display: none; }
  .how-visual img { width: 100%; }

  .how-step {
    display: flex;
    align-items: center;
    margin-left: calc(var(--u) * 9.722);  /* 84 */
    margin-right: calc(var(--u) * 5.903); /* 51 */
    padding: calc(var(--u) * 3.009) 0 calc(var(--u) * 3.009) calc(var(--u) * 7.118);  /* 26 */
    background: #fff;
    border-radius: calc(var(--u) * 1.852);  /* 16 */
  }
  .how-step + .how-step { margin-top: calc(var(--u) * 2.199); }  /* 19 */
  .how-step-num {
    left: calc(var(--u) * -3.877);        /* カード左端より外側 84→50.5 */
    top: calc(var(--u) * -0.231);
    width: calc(var(--u) * 7.06);         /* 61 */
    height: calc(var(--u) * 7.06);
    font: 700 calc(var(--u) * 2.85)/calc(var(--u) * 7.06) var(--font-jp);
  }
  .how-step-icon {
    display: block;
    flex: none;
    width: calc(var(--u) * 12.153);       /* 105 */
    height: calc(var(--u) * 12.153);
    margin-right: calc(var(--u) * 3.762); /* 32.5 */
    background: url(../images/how-step-icons.webp) no-repeat 0 0;
    background-size: 100% 500%;
  }
  .how-step:nth-child(2) .how-step-icon { background-position: 0 25%; }
  .how-step:nth-child(3) .how-step-icon { background-position: 0 50%; }
  .how-step:nth-child(4) .how-step-icon { background-position: 0 75%; }
  .how-step:nth-child(5) .how-step-icon { background-position: 0 100%; }
  /* カード間の破線（PC の solid/dashed/dotted の出し分けはここで上書き） */
  .how-step:not(:last-child)::after {
    left: calc(var(--u) * -3.877 + var(--u) * 3.415);
    top: calc(var(--u) * 6.829);
    bottom: calc(var(--u) * -2.662);
    width: calc(var(--u) * 0.231);
    background: repeating-linear-gradient(180deg,
      var(--c-main) 0 calc(var(--u) * 1.389), transparent calc(var(--u) * 1.389) calc(var(--u) * 2.083));
  }
  .how-step-body { min-width: 0; }
  .how-step-title { font-size: calc(var(--u) * 3.356); line-height: calc(var(--u) * 4.4); }  /* 29 */
  .how-step-title .dot { margin: 0 -.17em; }
  /* SP のステップ03はタグを収めるため、原デザインでも字間が詰められている */
  .how-step:nth-child(3) .how-step-title { letter-spacing: -.059em; }
  .how-step-tag {
    margin-left: calc(var(--u) * 1.85);
    height: calc(var(--u) * 4.745);       /* 41 */
    padding: 0 calc(var(--u) * 1.157);
    border-radius: calc(var(--u) * .81);
    font-size: calc(var(--u) * 2.083);    /* 18 */
  }
  .how-step-desc {
    margin-top: calc(var(--u) * 1.157);
    font-size: calc(var(--u) * 2.604);    /* 22.5 */
    line-height: calc(var(--u) * 4.167);  /* 36 */
  }
}

/* ---------- 6. 対応領域 ---------- */
.services { background: #fff; padding: var(--sec-pad) 24px; }
.services-flow {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px; margin-top: 20px;
  background: var(--c-bg-green); border-radius: 999px; padding: 10px 20px;
}
.services-flow span { font: 700 13px/1.6 var(--font-jp); color: var(--c-main); white-space: nowrap; }
.services-flow .arrow { font: 600 13px/1 var(--font-en); color: var(--c-light); }
.services-flow .sp-arrow { display: none; }
@media (max-width: 760px) {
  .services-flow { flex-direction: column; gap: 6px; border-radius: 16px; padding: 16px 26px; }
  .services-flow span { font-size: 14px; }
  .services-flow .pc-arrow { display: none; }
  .services-flow .sp-arrow { display: inline; font-size: 15px; }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 3.6vw, 48px);
  align-items: stretch;
}
.service-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 26px 24px;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 16px; align-content: start;
}
.service-card:hover { border-color: var(--c-light); }
.service-icon {
  grid-row: span 2; align-self: start;
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--c-bg-green);
  display: flex; align-items: center; justify-content: center;
}
.service-card h3 { font: 700 16px/1.55 var(--font-jp); color: var(--c-text); }
.service-card p { font: 400 13.5px/1.9 var(--font-jp); color: var(--c-text-sub); }
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr; gap: 12px; max-width: 900px; margin-left: auto; margin-right: auto; }
  .service-card { padding: 20px 24px; gap: 6px 18px; align-content: center; }
  .service-icon { width: 56px; height: 56px; align-self: center; }
}

.services-more {
  margin: 20px auto 0;
  background: var(--c-bg-green); border: 1px dashed var(--c-light); border-radius: 16px;
  padding: clamp(24px, 3vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px; text-align: center;
}
.services-more .h3 { margin-top: 0; font: 800 clamp(16px, 1.7vw, 20px)/1.6 var(--font-jp); color: var(--c-main); }
.services-more p { margin-top: 8px; font: 400 13.5px/1.9 var(--font-jp); color: var(--c-text-sub); }
@media (max-width: 760px) { .services-more { max-width: 900px; } }

.btn-green-sm {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 26px; border-radius: 10px;
  background: var(--c-main); color: #fff;
  font: 700 15.5px/1 var(--font-jp); white-space: nowrap;
  border-bottom: 4px solid #003026;
}
.btn-green-sm:hover { background: var(--c-dark); color: #fff; }
.btn-green-sm:active { background: var(--c-dark); transform: translateY(2px); border-bottom-width: 2px; }

/* ---------- 7. 料金 ---------- */
.pricing { background: var(--c-bg-green); padding: var(--sec-pad) 24px; }
.pricing-grid {
  margin-top: clamp(32px, 3.6vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pricing-main { background: var(--c-main); border-radius: 18px; padding: clamp(26px, 3.2vw, 40px); }
.pricing-main-inner { position: relative; }
.pricing-main h3 { margin: 14px 0 0; font: 900 clamp(18px, 2vw, 24px)/1.6 var(--font-jp); color: #fff; }
.pricing-price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.price-num { font: 800 clamp(40px, 4.8vw, 60px)/.9 var(--font-en); color: var(--c-yellow); letter-spacing: -.03em; }
.price-unit { font: 600 15px/1 var(--font-jp); color: rgba(255,255,255,.85); padding-bottom: 6px; }
.pricing-tax-note { margin: 0 0 22px; font: 400 12.5px/1.8 var(--font-jp); color: rgba(255,255,255,.65); }
.pricing-main .check-grid { border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; }
.btn-yellow {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; margin: 26px auto 0;
  height: 58px; padding: 0 30px; border-radius: 10px;
  background: var(--c-yellow); color: var(--c-dark);
  font: 800 17px/1 var(--font-jp); white-space: nowrap;
  border-bottom: 4px solid var(--c-yellow-dark);
}
.btn-yellow:hover { background: #ffe45f; color: var(--c-dark); }
.btn-yellow:active { background: #e8cc3c; transform: translateY(2px); border-bottom-width: 2px; }

.pricing-side { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: clamp(24px, 2.8vw, 34px); }
.pricing-side h3 { margin: 14px 0 0; font: 800 clamp(17px, 1.9vw, 21px)/1.6 var(--font-jp); color: var(--c-text); }
.pricing-quote { margin: 14px 0 6px; font: 800 clamp(22px, 2.4vw, 28px)/1.35 var(--font-jp); color: var(--c-main); }
.pricing-side-note { margin: 0 0 20px; font: 400 13px/1.85 var(--font-jp); color: var(--c-text-sub); }
.dot-list { display: grid; border-top: 1px solid var(--c-line); }
.dot-list li {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 2px; border-bottom: 1px solid var(--c-bg-gray);
  font: 400 14px/1.6 var(--font-jp); color: var(--c-text);
}
.dot-list li:last-child { border-bottom: none; }
.dot-list li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--c-line); }
@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.benefits { margin-top: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: clamp(24px, 3.2vw, 38px); }
.benefits-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.benefits-copy { font: 700 14.5px/1.6 var(--font-jp); color: var(--c-text); }
.benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.benefit-card { background: var(--c-bg-green); border-radius: 12px; padding: 22px; }
.benefit-num { font: 800 clamp(23px, 2.4vw, 30px)/1 var(--font-en); color: var(--c-main); }
.benefit-num .marker { background: linear-gradient(transparent 60%, var(--c-yellow) 60%); }
.benefit-card p { margin-top: 12px; font: 400 13px/1.85 var(--font-jp); color: var(--c-text-sub); }
.benefits-note { margin-top: 20px; font: 600 13.5px/1.95 var(--font-jp); color: var(--c-main); }
@media (max-width: 1080px) { .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .benefits-grid { grid-template-columns: 1fr; } }

/* ---------- 8. 比較表 ---------- */
.comparison { background: #fff; padding: var(--sec-pad) 24px; }
.cmp { margin-top: clamp(32px, 3.6vw, 48px); display: grid; gap: 10px; }
.cmp-header {
  display: grid;
  grid-template-columns: 190px repeat(3, minmax(0, 1fr));
  gap: 10px; align-items: end; padding: 0 6px;
}
.cmp-header-other { text-align: center; padding: 0 12px 6px; font: 600 14px/1.6 var(--font-jp); color: var(--c-text-sub); }
.cmp-header-andpro {
  position: relative; text-align: center;
  padding: 16px 12px 10px;
  border-radius: 12px 12px 0 0;
  background: var(--c-main);
  font: 800 18px/1.4 var(--font-en); color: #fff;
}
.cmp-osusume {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--c-yellow);
  font: 800 11.5px/1 var(--font-jp); color: var(--c-dark); white-space: nowrap;
}
.cmp-row {
  display: grid;
  grid-template-columns: 190px repeat(3, minmax(0, 1fr));
  gap: 10px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 6px;
}
.cmp-item { display: flex; align-items: center; padding: 14px 18px; font: 700 15px/1.6 var(--font-jp); color: var(--c-main); }
.cmp-val {
  display: flex; flex-wrap: wrap; align-items: center;
  padding: 14px 18px;
  font: 400 13.5px/1.8 var(--font-jp); color: var(--c-text-sub);
}
.cmp-val.andpro {
  border-radius: 10px;
  background: var(--c-bg-green);
  border: 1.5px solid var(--c-light);
  font: 600 14.5px/1.8 var(--font-jp); color: var(--c-main);
}
.mark-s { flex: none; font: 700 15px/1 var(--font-en); color: var(--c-text-sub); margin-right: 10px; }
.mark-g { flex: none; font: 700 16px/1 var(--font-en); color: var(--c-mid); margin-right: 10px; }
.cmp-tag { display: none; }
@media (max-width: 1080px) {
  .cmp-header { display: none; }
  .cmp-row { grid-template-columns: 1fr; }
  .cmp-item { padding-bottom: 4px; }
  .cmp-tag { display: block; width: 100%; font: 700 11.5px/1 var(--font-jp); color: var(--c-text-sub); margin-bottom: 8px; }
  .cmp-tag.green { color: var(--c-mid); font-family: var(--font-en); font-weight: 800; }
}

/* ---------- 9. 活用シーン ---------- */
.cases { background: var(--c-bg-green); padding: var(--sec-pad) 24px; }
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 3.6vw, 48px);
  align-items: stretch;
}
.case-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.case-photo { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--c-bg-gray); overflow: hidden; }
.case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.case-head { display: flex; align-items: center; gap: 12px; background: var(--c-main); padding: 16px 22px; }
.case-num { flex: none; font: 800 11.5px/1 var(--font-en); letter-spacing: .12em; color: var(--c-yellow); }
.case-head h3 { font: 700 clamp(15px, 1.5vw, 17.5px)/1.6 var(--font-jp); color: #fff; }
.case-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }
.case-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.case-flow .step {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 13px; border-radius: 6px;
  background: var(--c-bg-green);
  font: 600 12.5px/1 var(--font-jp); color: var(--c-main); white-space: nowrap;
}
.case-flow .arrow { color: var(--c-light); font: 700 13px/1 var(--font-en); }
.case-body > p { margin: 16px 0 18px; font: 400 13.5px/1.9 var(--font-jp); color: var(--c-text-sub); }
.case-gain { margin-top: auto; border-top: 1px dashed var(--c-line); padding-top: 16px; }
.case-gain-title { font: 700 12px/1 var(--font-jp); color: var(--c-mid); margin-bottom: 12px; }
.case-gain ul { display: grid; gap: 8px; }
.case-gain li { display: flex; gap: 9px; align-items: center; font: 500 13.5px/1.7 var(--font-jp); color: var(--c-text); }
.case-gain .check { flex: none; color: var(--c-light); font: 700 12.5px/1 var(--font-en); }
@media (max-width: 760px) {
  .cases-grid { grid-template-columns: 1fr; }
  .case-photo { order: 2; }
  .case-head { order: 1; }
  .case-body { order: 3; }
}

/* ---------- 10. 利用開始までの流れ ---------- */
.start { background: #fff; padding: clamp(56px, 6.5vw, 92px) 24px; }
.start-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 40px);
}
.start-step { background: var(--c-bg-green); border-radius: 12px; padding: 24px 20px; text-align: center; }
.start-num { font: 800 12px/1 var(--font-en); color: var(--c-mid); margin-bottom: 10px; }
.start-name { font: 700 15px/1.6 var(--font-jp); color: var(--c-text); }
.start-step.last { background: var(--c-main); }
.start-step.last .start-num { color: var(--c-yellow); }
.start-step.last .start-name { color: #fff; }
@media (max-width: 760px) { .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 11. 最終CTA・フォーム ---------- */
.contact { background: var(--c-main); padding: clamp(56px, 6.5vw, 96px) 24px; }
.contact.stripe-overlay::before {
  background-image: repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
}
.contact-inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: var(--col-gap);
  align-items: start;
}
.contact-copy { min-width: 0; }
.contact-copy h2 { margin: 18px 0 0; font: 900 clamp(22px, 2.9vw, 36px)/1.55 var(--font-jp); color: #fff; }
.contact-copy h2 > span { display: inline-block; }
.contact-lead { margin: 20px 0 0; max-width: 500px; font: 400 clamp(14.5px, 1.05vw, 16px)/1.95 var(--font-jp); color: rgba(255,255,255,.86); }
.contact-note { margin: 18px 0 0; font: 500 13px/1.85 var(--font-jp); color: rgba(255,255,255,.7); }
.contact-photo {
  margin-top: 24px;
  position: relative; width: 100%; max-width: 480px;
  aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  background: var(--c-dark);
}
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 1080px) {
  .contact-inner { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 760px) {
  .contact-copy h2 > span { display: inline; }
}

.contact-form {
  min-width: 0;
  background: #fff; border-radius: 18px;
  padding: clamp(22px, 2.8vw, 32px);
  display: grid; gap: 16px;
}
.contact-form-title { font: 800 18px/1.6 var(--font-jp); color: var(--c-text); }
.form-field { display: grid; gap: 8px; }
.form-field label { font: 600 13px/1.5 var(--font-jp); color: var(--c-text); }
.req-tag {
  display: inline-block; margin-left: 4px;
  padding: 2px 7px; border-radius: 4px;
  background: var(--c-main); color: #fff;
  font: 700 10.5px/1 var(--font-jp); vertical-align: 1px;
}
.form-field input, .form-field textarea {
  border: 1px solid var(--c-line); border-radius: 8px;
  font: 400 15px/1 var(--font-jp); color: var(--c-text);
  background: #fff; width: 100%;
}
.form-field input { padding: 11px 14px; line-height: 1; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #9AA8A2; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-field textarea { padding: 12px 14px; line-height: 1.8; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--c-mid); outline: none; }
.field-error { display: none; font: 400 12px/1.5 var(--font-jp); color: #c0392b; }
.form-field.has-error .field-error { display: block; }
.form-field.has-error input, .form-field.has-error textarea { border-color: #c0392b; }
.form-consent { display: flex; align-items: flex-start; gap: 8px; font: 400 13px/1.7 var(--font-jp); color: var(--c-text); cursor: pointer; }
.form-consent input { margin-top: 4px; }
.form-consent a { text-decoration: underline; }
.form-consent.has-error { color: #c0392b; }
.form-turnstile.has-error .field-error { display: block; text-align: center; }
.btn-form-submit {
  height: 58px; border: none; border-radius: 10px;
  background: var(--c-main); color: #fff;
  font: 800 17px/1 var(--font-jp); cursor: pointer;
  border-bottom: 4px solid #003026;
}
.btn-form-submit:hover { background: var(--c-dark); }
.btn-form-submit:active { background: var(--c-dark); transform: translateY(2px); border-bottom-width: 2px; }
.btn-form-submit[disabled] { opacity: .6; cursor: default; }

/* ---------- 12. フッター ---------- */
.site-footer { background: var(--c-dark); padding: clamp(40px, 5.5vw, 64px) 24px 32px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.footer-brand { min-width: 0; }
.footer-logo { font: 800 24px/1 var(--font-en); color: #fff; letter-spacing: -.03em; }
.footer-brand p { margin-top: 14px; max-width: 280px; font: 400 13px/1.9 var(--font-jp); color: rgba(255,255,255,.7); }
.footer-col { display: grid; gap: 13px; min-width: 0; }
.footer-col a { font: 400 13.5px/1.5 var(--font-jp); color: rgba(255,255,255,.85); }
.footer-col a:hover { color: var(--c-light); }
.footer-bottom {
  margin-top: clamp(26px, 3.6vw, 40px); padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  font: 400 12px/1.8 var(--font-en); color: rgba(255,255,255,.55);
}
.footer-fixed-space { display: none; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-fixed-space { display: block; height: 84px; }
}

/* ---------- SP画面下固定CTA ---------- */
.sp-fixed-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--c-line);
  padding: 12px 16px;
}
.sp-fixed-cta a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 56px; border-radius: 8px;
  background: var(--c-main);
  border-bottom: 3px solid #003026;
}
.sp-fixed-cta-main { font: 800 16px/1 var(--font-jp); color: var(--c-yellow); white-space: nowrap; }
.sp-fixed-cta-sub { font: 500 10.5px/1 var(--font-jp); color: rgba(255,255,255,.8); white-space: nowrap; }
.sp-fixed-cta a:active { transform: translateY(1px); }
@media (max-width: 760px) {
  .sp-fixed-cta { display: block; }
}