:root{
  --pink:#f56d8d;
  --pink-soft:rgba(245,109,141,.12);
  --yellow:#ffcf2a;
  --blue:#4ad2d0;
  --periwinkle:#90b4ff;
  --deep-green:#123f3d;
  --ink:#1d2430;
  /* 見出しやモーダルで使う濃紺。9箇所で直書きされていたので変数化。 */
  --navy:#12325f;
  --muted:#667085;
  --line:#e7edf0;
  --paper:#fffdf7;
  --white:#fff;
  /* ヘッダーの寸法。--header-height は scroll-padding-top と .page の
     上余白に使うので、実物より小さいと見出しがヘッダーに隠れ、大きいと
     余白が空く。手で数えた値を置くとロゴやボタンを変えたときにズレたまま
     残るため、下の4つから組み立てる。幅を変えるときはこの4つだけ触る。
     いちばん高い中身は PC がロゴ、SP がメニューボタン。メニューボタンは
     PC では非表示だが、そこではロゴの方が高いので max() で問題ない。 */
  --nav-pad-y:16px;
  --nav-pad-x:36px;
  --nav-logo-h:60px;
  --nav-toggle-size:44px;
  --nav-border:1px;
  --header-height:calc(
    var(--nav-pad-y) * 2 + max(var(--nav-logo-h), var(--nav-toggle-size)) + var(--nav-border)
  );
  --page-width:1200px;
  /* サイズ指定の基準幅。ページ本体は --page-width で止まるのに vw はウィンドウ
     幅を見続けるため、1200pxを超えると器が固定なのに中身だけ膨らみ、しかも
     clamp の上限に達する幅が指定ごとに違うので比率が崩れる。vw の代わりに
     これを使うと、1200px以下は vw と完全に同値で、1200px以上は固定される。

     ファイル内に vw のままの指定が残っているのは未対応ではなく、clamp の上限に
     1200px以下で到達する（＝すでに固定されている）か、1200pxから上限までの差が
     2px未満で目視できないものだけを残した結果。新しく vw を書くときは、
     12 × 係数 が上限を下回るなら --pw を使うこと。 */
  --pw:min(100vw, var(--page-width));
  /* PC時の左右余白。セクションの padding-x と中身の幅上限の両方がこれを見る。 */
  --gutter:36px;
  /* PC時の中身の幅。どのセクションも同じ位置で左右が揃うよう、
     --page-width から左右の余白を引いた値を計算で出す。 */
  --content-w:calc(var(--page-width) - var(--gutter) * 2);
  --font-base:"Noto Sans JP","Noto Sans",sans-serif;
  /* せのびゴシックは配布がローカルインストール前提で、持っている人だけ別の
     書体になってしまうため、フォント名としては指定しない。代わりに、その
     直系の親である M PLUS 1p を読み込み、--hero-senobi で長体化して再現する。 */
  --font-display:"M PLUS 1p","Noto Sans JP",sans-serif;
  --section-gray:#f4f4f4;
  --section-teal:#92e4e3;
  --section-mint:#e8f8f9;
  --section-warm:#fffdf9;
  --section-paper:#f5f7f7;
  --section-hero:#f5fbff;
  /* セクションの上下余白。しっぽ(section-tail)は「次セクションの色」で塗るため、
     その直下に来るセクションは既に40〜50pxぶんの余白を受け取っている。
     二重に空けないよう、しっぽの下だけ --section-pad-y-tail を使う。 */
  --section-pad-y:clamp(34px,calc(var(--pw) * .038),52px);
  --section-pad-y-tail:clamp(8px,calc(var(--pw) * .012),16px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-height);
}

body{
  width:100%;
  max-width:var(--page-width);
  margin:0 auto;
  font-family:var(--font-base);
  color:var(--ink);
  background:#f5f7f7;
  line-height:1.7;
}

a{ color:inherit; text-decoration:none; }

/* フォーム系要素は UA スタイルのフォントが当たり body の font-family を
   継承しない。指定のない箇所は必ず --font-base(Noto Sans JP) に揃える。 */
button,
input,
select,
textarea{
  font-family:inherit;
}

.page{
  width:100%;
  max-width:var(--page-width);
  min-height:100vh;
  margin:0 auto;
  padding-top:var(--header-height);
  background:var(--white);
  border:0;
  border-radius:0;
  overflow-x:hidden;
  box-shadow:none;
}

section{
  --section-pad-x:var(--gutter);
  position:relative;
  padding:var(--section-pad-y) var(--section-pad-x);
  border-bottom:0;
}

.lp-section{
  position:relative;
  padding-bottom:0;
}

/* 下辺を角丸で抜き、右寄り(73%)に下向きのしっぽを出す共通つなぎ。
   塗りは「次セクションの色」で、パネル側は透過して現セクションの背景を見せる。 */
/* width は必ず明示する。viewBox 付き SVG は width:auto だと「高さ×縦横比」で
   幅が決まり、コンテナ幅を無視して右にはみ出す（= 右下の角丸が切れる）。
   左右の padding 分を足し戻してセクション幅ぴったりの全幅にする。 */
.section-tail{
  display:block;
  width:calc(100% + var(--section-pad-x, 0px) * 2);
  height:auto;
  aspect-ratio:1200 / 80;
  /* しっぽ先端が次セクションと接する境界で 1px の白線が出るのを防ぐ。 */
  margin:0 calc(-1 * var(--section-pad-x, 0px)) -2px;
  color:var(--section-tail-next, var(--white));
  pointer-events:none;
  flex-shrink:0;
  vertical-align:top;
}

.section-tail__fill{
  fill:currentColor;
}

/* 角丸＋曲線のしっぽを持つ形。左右はしっぽの位置(74.7% / 26.1%)だけが違う。
   viewBox の縦横比を aspect-ratio で固定し、幅に応じて高さを決める。
   clamp の下限があると狭い画面で比率が崩れ PC と別デザインになる。 */
.section-tail--bubble-right,
.section-tail--bubble-left{
  aspect-ratio:1024 / 87;
}

/* しっぽが横に広い版。左右はしっぽの位置(74.7% / 25.2%)だけが違う。 */
.section-tail--bubble-result,
.section-tail--bubble-solution{
  aspect-ratio:1024 / 94;
}

/* ヒーローの寸法基準。中身は --pw と同じだが、ヒーロー内の指定が何を基準に
   しているかを名前で示すために別名を残している。 */
.hero{
  --hero-w:var(--pw);
  /* 字面を横に詰める倍率。文字サイズもこの値で割って高さを保つ。 */
  --hero-condense:.92;
  /* せのびゴシック相当の長体率。せのびゴシックは M+ FONTS を機械的に70%へ
     詰めた派生フォントなので、M PLUS 1p を同じ率で詰めると字幅が一致する。
     ★これは font-size の割り戻しには絶対に混ぜない。長体は「同じ文字サイズで
     横だけ細い」状態であり、高さを戻す必要がないため。混ぜると文字サイズが
     1.4倍に膨らんで clamp の上限に張り付く。 */
  --hero-senobi:.7;
  /* 各行の文字サイズ＝ページ幅に対する比率。1行の大きさを変えたいときは
     ここだけ触る。clamp の上限を別に持たない理由は font-size 側のコメント。 */
  --hero-kicker-ratio:.0234;
  --hero-h1-ratio:.0767;
  --hero-sub-ratio:.015;
  /* 字間。見出しは margin-right の打ち消しと必ず同じ値になるよう共有する。 */
  --hero-h1-tracking:.08em;
  --hero-sub-tracking:0;
  /* 見えている文字幅に対するCTAボタンの横幅。この値だけでボタンの長さを
     調整できる。100%未満にしないと文字幅と同じ長さになる。 */
  --hero-cta-w:74%;
  /* カンプのテキスト左端はページ幅の約8.6%。 */
  --section-pad-x:clamp(var(--gutter), calc(var(--hero-w) * .086), 104px);
}
.problem-board{ --section-tail-next:var(--section-teal); }
.problem-section{ --section-tail-next:var(--white); }
.result-section{ --section-tail-next:var(--white); }
.solution-section{ --section-tail-next:var(--section-teal); }
.problem-board > .section-tail{
  position:relative;
  z-index:2;
}

.tag{ display:none; }

.center{ text-align:center; }

.mt{ margin-top:22px; }

.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  max-width:var(--page-width);
  margin:0 auto;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:var(--nav-pad-y) var(--nav-pad-x);
  border-bottom:var(--nav-border) solid var(--line);
  background:var(--white);
}

.logo{
  display:flex;
  align-items:center;
  gap:18px;
}

.logo-item{
  display:block;
  height:var(--nav-logo-h);
  width:auto;
  object-fit:contain;
  object-position:center;
}

.logo-text{
  font-size:20px;
  font-weight:900;
  color:var(--deep-green);
  letter-spacing:.02em;
}

.menu{
  display:flex;
  gap:22px;
  align-items:center;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}

/* 狭い幅でだけ出すメニュー開閉ボタン。3本線は中央のバーを実体、
   上下を ::before / ::after で描き、開いた時に×へ組み替える。 */
.nav-toggle{
  display:none;
  position:relative;
  flex:0 0 auto;
  width:var(--nav-toggle-size);
  height:var(--nav-toggle-size);
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  position:absolute;
  left:50%;
  width:24px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
  content:"";
}

.nav-toggle__bars{
  top:50%;
  transform:translate(-50%,-50%);
}

.nav-toggle__bars::before{ top:-7px; transform:translateX(-50%); }
.nav-toggle__bars::after{ top:7px; transform:translateX(-50%); }

.nav.is-open .nav-toggle__bars{
  background:transparent;
}

.nav.is-open .nav-toggle__bars::before{
  top:0;
  transform:translateX(-50%) rotate(45deg);
}

.nav.is-open .nav-toggle__bars::after{
  top:0;
  transform:translateX(-50%) rotate(-45deg);
}

.menu a:not(.menu-cta){
  color:var(--ink);
  letter-spacing:.04em;
  transition:color .2s ease;
}

.menu a:not(.menu-cta):hover{ color:var(--pink); }

.menu-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  margin-left:8px;
  padding:0 18px;
  border-radius:999px;
  background:var(--pink);
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.2;
  box-shadow:0 8px 18px rgba(245,109,141,.28);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.menu-cta:hover{
  transform:translateY(-1px);
  background:#e85a7d;
  color:#fff;
  box-shadow:0 10px 22px rgba(245,109,141,.34);
}

.menu-cta svg{
  flex:0 0 auto;
}

/* リンクが8本あるので、1200px を下回るとロゴ＋メニュー＋ボタンが1行に
   収まらなくなる。ハンバーガーへ切り替わる 820px までの区間だけ、ロゴと
   メニューを一段小さくして凌ぐ。 */
@media (max-width:1100px){
  :root{
    --nav-pad-y:14px;
    --nav-pad-x:24px;
    --nav-logo-h:46px;
  }
  .nav{ gap:16px; }
  .logo{ gap:12px; }
  .menu{
    gap:13px;
    font-size:13px;
  }
  .menu-cta{
    min-height:38px;
    margin-left:4px;
    padding:0 13px;
    font-size:12px;
  }
}

/* 高さはカンプの比率（幅:高さ = 1.97:1）から算出する。 */
.hero{
  min-height:calc(var(--pw) / 1.97);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  padding:clamp(28px,4.5vh,52px) var(--section-pad-x) 0;
  overflow:hidden;
  color:#123c8f;
  background-color:var(--section-hero);
  background-image:url("assets/hero_1.png");
  background-position:right center;
  background-size:auto 100%;
  background-repeat:no-repeat;
}

.hero::before{
  display:none;
}

.hero::after{
  display:none;
}

/* 列幅を最も広い子に合わせる。CTA の中央寄せの基準はここではなく
   .hero-sub-group。

   max-width は写真と干渉させないための保険。長体は見た目だけを縮めて
   レイアウト上の幅は縮まないので、この上限は「見えている字幅」より
   かなり大きい値でよい。現在の --hero-h1-ratio では見出しのレイアウト幅が
   ヒーロー内容幅の約52%、実際に見えている字幅は約33%。写真は .hero の
   背景画像なので、ここを広げても写真の位置は動かない。 */
.hero-copy{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:flex-start;
  width:fit-content;
  max-width:56%;
  text-align:left;
}

.hero-kicker,
.hero-copy h1{
  font-family:var(--font-display);
  font-feature-settings:"palt" 1;
}

/* 指定は「カンプの比率 ÷ --hero-condense」。横に圧縮したぶんを font-size で
   戻すと、字面の高さはカンプどおりで幅だけ縦長になる。圧縮率を変えたときに
   3つの比率を手で再計算しないよう、割り算を calc に持たせる。
   上限を clamp で持たないのは --hero-w が min(100vw, --page-width) で
   すでに頭打ちになっていて、上限値を書くと比率と二重管理になるため。
   max() の第1引数は下限のみ。 */
.hero-kicker{
  color:#000;
  font-size:max(23px, calc(var(--hero-w) * var(--hero-kicker-ratio) / var(--hero-condense)));
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.3;
}

.hero-copy h1{
  margin-top:2px;
  /* letter-spacing が最終文字の後ろにも入るので、その分を打ち消して
     列幅を実際の字面幅に一致させる。 */
  margin-right:calc(-1 * var(--hero-h1-tracking));
  color:#000;
  white-space:nowrap;
  /* 下限 48px はスマホ用の指定が効き始める 820px より下でしか働かない保険。
     比率を上げるときは .hero-copy の max-width との関係を確認する。 */
  font-size:max(48px, calc(var(--hero-w) * var(--hero-h1-ratio) / var(--hero-condense)));
  font-weight:900;
  letter-spacing:var(--hero-h1-tracking);
  line-height:1.06;
}

.hero-copy .hero-sub{
  margin-top:20px;
  color:#4b4b4b;
  font-family:var(--font-base);
  font-size:max(14px, calc(var(--hero-w) * var(--hero-sub-ratio) / var(--hero-condense)));
  font-weight:400;
  letter-spacing:var(--hero-sub-tracking);
  line-height:1.85;
}

/* キャッチ／サブキャッチは字面を横だけ詰めて縦長に見せる。
   transform ではなく scale プロパティを使うのは、.hero-copy > * の
   heroTextIn アニメーションが transform を占有していて上書きされるため。
   縦は等倍なので行が隣に食い込むこともない。 */
.hero-kicker,
.hero-copy h1,
.hero-copy .hero-sub{
  scale:var(--hero-squeeze) 1;
  transform-origin:left center;
}

/* サブキャッチは Noto Sans JP のままなので縦長化だけ。せのびゴシックを当てて
   いたキッカーと見出しには、さらに長体率を掛ける。 */
.hero-copy .hero-sub{
  --hero-squeeze:var(--hero-condense);
}

.hero-kicker,
.hero-copy h1{
  --hero-squeeze:calc(var(--hero-condense) * var(--hero-senobi));
}

.hero-copy > *,
.hero-copy .hero-sub{
  opacity:0;
  transform:translateY(14px);
  animation:heroTextIn .8s ease forwards;
}

/* サブキャッチと CTA を束ねるだけの枠。幅がサブキャッチの字幅そのものになる
   ので、CTA の中央寄せの基準になる。演出は中の2つが個別に持つ。 */
.hero-sub-group{
  width:fit-content;
  opacity:1;
  transform:none;
  animation:none;
}

.hero-copy .hero-sub{
  animation-delay:.18s;
}

/* 100% は .hero-sub-group の幅 = サブキャッチの字幅だが、これは scale で詰める
   前の値。そのまま中央寄せすると実際に見えている文字より右にずれるので、
   圧縮率を掛けて見た目の字幅に合わせ、その中でボタンを中央に置く。 */
.hero-cta-block{
  width:calc(100% * var(--hero-condense));
  margin-top:26px;
  text-align:center;
}

.hero-cta-block > *{
  opacity:0;
  transform:translateY(14px);
  animation:heroTextIn .8s ease forwards;
}

.hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* width ではなく min-width。ラベルは nowrap なので、字幅の見積りが外れた
     ときに width だとボタンからはみ出す。min-width なら必要な分だけ伸びる。 */
  min-width:var(--hero-cta-w);
  gap:clamp(6px,.85vw,10px);
  min-height:clamp(42px,4.6vw,55px);
  padding:0 clamp(9px,1.35vw,16px) 0 clamp(6px,.85vw,10px);
  border:0;
  border-radius:14px;
  background:var(--blue);
  color:#fff;
  font-size:clamp(12px,1.5vw,18px);
  font-weight:900;
  line-height:1.3;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(74,210,208,.32);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation-delay:.38s;
}

.hero-cta-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.hero-cta-free{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(28px,3.5vw,42px);
  min-height:clamp(19px,2vw,24px);
  padding:0 clamp(5px,.67vw,8px);
  border-radius:999px;
  background:var(--pink);
  color:#fff;
  font-size:clamp(9px,1.1vw,13px);
  font-weight:900;
  line-height:1;
}

.hero-cta-text{
  letter-spacing:.04em;
}

.hero-cta svg{
  flex:0 0 auto;
  width:clamp(12px,1.35vw,16px);
  height:auto;
}

.hero-cta:hover{
  transform:translateY(-2px);
  background:#35c4c2;
  box-shadow:0 14px 30px rgba(74,210,208,.4);
}

.hero-visual{
  position:relative;
  z-index:1;
  flex:1;
  align-self:stretch;
  min-width:0;
}

.hero-person{
  position:absolute;
  overflow:hidden;
  border:5px solid #fff;
  border-radius:50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.55), transparent 38%),
    linear-gradient(135deg, #b5d2df 0%, #eef6f7 43%, #b9d3dc 44% 54%, #e9f2f3 55%);
  box-shadow:0 12px 26px rgba(36,76,145,.12);
}

.hero-person::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16%;
  width:58%;
  height:67%;
  border-radius:46% 46% 0 0;
  background:linear-gradient(135deg, #fff 0 60%, #e7edf1 61%);
  transform:translateX(-50%);
}

.hero-person::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:38%;
  aspect-ratio:1;
  border-radius:48% 48% 45% 45%;
  background:#f1c7a9;
  box-shadow:0 -13px 0 5px #5b4034;
  transform:translateX(-50%);
}

.hero-person--main{
  right:13%;
  bottom:-8%;
  width:67%;
  aspect-ratio:1;
  border-radius:48% 48% 0 0;
  background:linear-gradient(135deg, #d5edf0 0%, #fff 51%, #bed9e1 52% 60%, #e9f3f5 61%);
}

.hero-person--main::before{
  width:66%;
  height:58%;
  background:#fff;
}

.hero-person--main::after{
  top:20%;
  width:39%;
  background:#f4cdb2;
  box-shadow:0 -18px 0 8px #4c3029;
}

.hero-person--top{
  top:7%;
  right:0;
  width:31%;
  aspect-ratio:1;
}

.hero-person--bottom{
  right:-2%;
  bottom:5%;
  width:29%;
  aspect-ratio:1;
}

.hero-bubble{
  position:absolute;
  z-index:2;
  padding:11px 17px;
  border-radius:24px;
  background:#e8f7ce;
  color:#36547d;
  font-size:11px;
  font-weight:900;
  line-height:1.5;
  text-align:center;
  box-shadow:0 5px 12px rgba(36,76,145,.08);
}

.hero-bubble--top{
  top:0;
  right:17%;
}

.hero-bubble--bottom{
  right:4%;
  bottom:4%;
  background:#ffedb7;
}

.hero-dots{
  position:absolute;
  z-index:0;
  width:84px;
  height:88px;
  background-image:radial-gradient(#216cf4 1.45px, transparent 1.45px);
  background-size:7px 7px;
  opacity:.85;
}

.hero-dots--top{ top:0; right:31%; }
.hero-dots--bottom{ bottom:1%; left:2%; }

.hero-spark{
  position:absolute;
  z-index:3;
  color:#fc7c37;
  font-size:27px;
  line-height:1;
}

.hero-spark--one{ top:46%; left:8%; }
.hero-spark--two{ right:35%; bottom:19%; color:#fa5c56; font-size:21px; }

.eyebrow{
  display:inline-block;
  margin-bottom:10px;
  padding:5px 14px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

h1{
  font-size:42px;
  font-weight:900;
  line-height:1.28;
  letter-spacing:.02em;
  color:var(--navy);
  white-space:nowrap;
  text-shadow:none;
}

@keyframes heroTextIn{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes sectionTitleIn{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

h2{
  position:relative;
  padding-top:26px;
  font-size:26px;
  font-weight:900;
  color:var(--ink);
  text-align:center;
  line-height:1.45;
  /* 折り返すとき行の長さを揃える。これがないと数px足りないだけで
     最後の1文字だけが次行に落ちる。 */
  text-wrap:balance;
  opacity:0;
  transform:translateY(12px);
}

h2.is-visible{
  animation:sectionTitleIn .7s ease forwards;
}

/* h2 ではないが節の見出しとして扱う2つ。h2 と同じ登場アニメーションを共有する。 */
.problem-same__title,
.result-heading{
  text-wrap:balance;
  opacity:0;
  transform:translateY(12px);
}

.problem-same__title.is-visible,
.result-heading.is-visible{
  animation:sectionTitleIn .7s ease forwards;
}

h2::before{
  content:attr(data-label);
  position:absolute;
  top:0;
  left:0;
  color:var(--deep-green);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  line-height:1;
}

h2::after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  margin:14px auto 0;
  border-radius:50%;
  background:var(--blue);
  box-shadow:16px 0 0 var(--yellow), 32px 0 0 var(--pink-soft);
  transform:translateX(-16px);
}

.problem-section h2,
.solution-section h2,
.operation-section h2,
.service-section h2,
.target-section h2,
.media-section h2{
  padding-top:0;
}

.solution-section h2,
.operation-section h2,
.service-section h2,
.target-section h2,
.media-section h2{
  color:var(--ink);
  font-size:clamp(22px,calc(var(--pw) * .024),30px);
  letter-spacing:.04em;
  line-height:1.55;
}

.solution-section h2::before,
.operation-section h2::before,
.service-section h2::before,
.target-section h2::before,
.media-section h2::before{
  position:static;
  display:block;
  width:auto;
  margin:0 auto 12px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--blue);
  font-family:var(--font-base);
  font-size:clamp(13px,1.2vw,15px);
  font-weight:900;
  letter-spacing:.22em;
  line-height:1;
}

.problem-section h2::before{
  display:none;
}

.problem-section h2::after,
.solution-section h2::after,
.operation-section h2::after,
.service-section h2::after,
.target-section h2::after,
.media-section h2::after{
  display:none;
}

.lead{
  font-size:15px;
  color:var(--muted);
  text-align:center;
  text-wrap:pretty;
  margin-top:10px;
}

.hero .lead{
  color:var(--muted);
  text-align:left;
  margin-top:6px;
}


.wide{
  max-width:760px;
  margin:12px auto 0;
}

.btn{
  display:inline-block;
  background:var(--blue);
  color:var(--deep-green);
  padding:13px 28px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(74,210,208,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(74,210,208,.36);
}

.btn.ghost{
  background:var(--white);
  color:var(--deep-green);
  border:2px solid var(--blue);
  padding:7px 16px;
  box-shadow:none;
}

.btn-light{
  background:var(--white);
  color:var(--deep-green);
  font-size:16px;
  padding:16px 44px;
  box-shadow:0 14px 34px rgba(29,36,48,.16);
}

.grid{
  display:grid;
  gap:16px;
  margin-top:28px;
}

.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.compact{ margin-top:0; }

.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px 18px;
  background:var(--white);
  box-shadow:0 14px 34px rgba(29,36,48,.06);
}

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:5px;
  border-radius:0 0 999px 999px;
  background:var(--blue);
}

.card .k{
  font-size:12px;
  color:var(--deep-green);
  font-weight:900;
  letter-spacing:.08em;
}

.card .t{
  font-size:17px;
  font-weight:900;
  margin-top:4px;
}

.card p{
  font-size:13px;
  color:var(--muted);
  margin-top:8px;
}

.problem-section h2{
  text-align:center;
  margin:10px 0 0;
  color:var(--ink);
  font-size:clamp(22px,calc(var(--pw) * .024),30px);
  font-weight:900;
  line-height:1.55;
  letter-spacing:.04em;
}

.problem-section h2::after{
  display:none;
}

.problem-section .lead{
  margin-top:14px;
  color:#4b4b4b;
  font-family:var(--font-base);
  font-size:clamp(14px,1.3vw,16px);
  font-weight:500;
  line-height:1.8;
}

.problem-eyebrow{
  margin:0;
  color:var(--blue);
  font-family:var(--font-base);
  font-size:clamp(13px,1.2vw,15px);
  font-weight:900;
  letter-spacing:.22em;
  line-height:1;
}

.story-group > .story-step--problem{
  padding:0;
  overflow:visible;
  background:var(--section-teal);
}

.story-step--problem > *{
  position:relative;
  z-index:1;
}

.story-step--problem::before,
.story-step--problem::after{
  display:none;
}

.problem-board{
  position:relative;
  z-index:2;
  width:100%;
  max-width:100%;
  margin:0 auto;
  background:var(--section-gray);
}

.problem-board__head{
  padding:clamp(48px,calc(var(--pw) * .06),80px) clamp(24px,calc(var(--pw) * .04),56px) clamp(20px,3vw,32px);
  text-align:center;
}

.problem-board__visual{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0 clamp(24px,calc(var(--pw) * .04),56px);
}

.problem-scenes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px,3vw,32px);
  width:min(960px, 100%);
  margin:0 auto;
  padding:clamp(8px,2vw,20px) 0 clamp(24px,3vw,36px);
  list-style:none;
}

.problem-scene{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,2vw,22px);
  text-align:center;
  opacity:0;
  transform:translateY(14px);
}

/* 左から順に出す（JS で親に is-visible を付与）。 */
.problem-scenes.is-visible .problem-scene{
  animation:sectionTitleIn .7s ease forwards;
}

.problem-scenes.is-visible .problem-scene:nth-child(2){ animation-delay:.18s; }
.problem-scenes.is-visible .problem-scene:nth-child(3){ animation-delay:.36s; }

/* モノクロ線画は problem_bk.png をスプライトとして円形に切り出して使う。
   --crop-* は元画像(1024x555)上の切り出し位置なので、ズレたらここだけ調整する。 */
.problem-scene__icon{
  --icon-size:clamp(140px,17.5vw,206px);
  --sprite-w:1024;
  --sprite-h:555;
  --crop:219;
  --crop-x:130;
  --crop-y:288;
  display:block;
  width:var(--icon-size);
  height:var(--icon-size);
  border-radius:50%;
  background-color:#fff;
  background-image:url("assets/problem_bk.png");
  background-repeat:no-repeat;
  background-size:calc(var(--icon-size) * var(--sprite-w) / var(--crop)) calc(var(--icon-size) * var(--sprite-h) / var(--crop));
  background-position:calc(-1 * var(--icon-size) * var(--crop-x) / var(--crop)) calc(-1 * var(--icon-size) * var(--crop-y) / var(--crop));
}

.problem-scene:nth-child(2) .problem-scene__icon{ --crop-x:403; }
.problem-scene:nth-child(3) .problem-scene__icon{ --crop-x:675; }

.problem-scene__caption{
  margin:0;
  color:#4b4b4b;
  font-family:var(--font-base);
  font-size:clamp(14px,1.45vw,18px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
}

.problem-same{
  position:relative;
  z-index:1;
  width:100%;
  max-width:100%;
  margin:0;
  padding:clamp(20px,calc(var(--pw) * .032),44px) 0;
  background:var(--section-teal);
}

.problem-same__frame{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0 clamp(18px,calc(var(--pw) * .03),44px);
}

.problem-same__card{
  border-radius:clamp(20px,calc(var(--pw) * .026),40px);
  background:var(--white);
}

.problem-same__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:clamp(40px,calc(var(--pw) * .055),72px) clamp(24px,calc(var(--pw) * .05),72px) clamp(36px,calc(var(--pw) * .045),60px);
  text-align:center;
}

.problem-same__title{
  margin:0;
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(24px,calc(var(--pw) * .028),36px);
  font-weight:900;
  letter-spacing:.1em;
  line-height:1.5;
}

.problem-same__title span{
  color:var(--blue);
}

.problem-same__lead{
  max-width:760px;
  margin:18px auto 0;
  color:#4a5562;
  font-family:var(--font-base);
  font-size:clamp(13px,1.25vw,16px);
  font-weight:500;
  line-height:1.9;
}

/* カンプ実測比（横幅920pxを基準）: パネル44%×2 + ブリッジ12%、吹き出しは
   19.5% でブリッジより広くパネルの上へ張り出す。padding-top はその吹き出しを
   置く領域で、% は幅基準に解決されるので比率が崩れない。 */
/* Before/After は1枚の画像。PC/SP で別ファイルを picture で出し分ける。
   高さは画像の比率任せなので、こちらでは幅の上限だけを決める。 */
.problem-same__flow{
  width:100%;
  max-width:920px;
  margin:clamp(28px,4vw,42px) auto 0;
}

.problem-same__flow picture{
  display:block;
}

.problem-same__flow img{
  display:block;
  width:100%;
  height:auto;
}

.problem-same__closing{
  margin:clamp(28px,4vw,40px) 0 0;
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(18px,2.1vw,26px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.6;
}

.problem-section .grid{
  gap:20px;
  margin-top:34px;
}

.problem-section .card{
  min-height:390px;
  border:2px solid #dedede;
  border-radius:26px;
  box-shadow:none;
  padding:30px 28px;
  background:#f7f7f7;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.problem-section .card::before{ display:none; }

.problem-icon{
  width:128px;
  height:128px;
  border:2px solid #dedede;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  background:var(--white);
  color:var(--ink);
  font-size:34px;
  font-weight:900;
  line-height:1;
}

.problem-icon img{
  display:block;
  width:94px;
  height:94px;
  object-fit:contain;
}

.problem-no{
  color:#777;
  font-size:34px;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
}

.problem-section .card .t{
  width:100%;
  margin-top:14px;
  padding-bottom:18px;
  border-bottom:1px solid #dedede;
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
}

.problem-section .card p{
  margin-top:18px;
  color:#777;
  font-size:14px;
  line-height:1.85;
  text-align:center;
}

.section-tint{
  background:#fff;
  text-align:left;
}

.section-tint h2{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:92px;
  padding:18px 28px;
  border-radius:10px;
  background:#050505;
  color:var(--white);
  font-size:24px;
  letter-spacing:.03em;
}

.section-tint h2::before{
  position:static;
  margin-bottom:8px;
  color:var(--blue);
}

.section-tint h2::after{
  display:block;
  margin-top:12px;
}

.result-section{
  position:relative;
  padding:0;
  background:#f7fbfb;
}

/* 背景写真は白っぽく起こしてダイヤと文字を読ませる。
   しっぽははみ出すので overflow は写真レイヤだけにかける。 */
.result-section > .result-section__photo{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.result-section__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transform:scale(.88);
  transform-origin:center center;
}

/* 見出し・ひし形と同じく、画面内に入ったときに再生する。 */
.result-section__photo.is-visible img{
  animation:resultPhotoIn 1.4s ease forwards;
}

@keyframes resultPhotoIn{
  from{
    opacity:0;
    transform:scale(.88);
  }
  to{
    opacity:.26;
    transform:scale(1);
  }
}

.result-section > *{
  position:relative;
  z-index:1;
}

.section1-group,
.story-group{
  position:relative;
  overflow:visible;
}

.story-group::after{
  display:none;
}

.story-group > section{
  --section-pad-x:0px;
  padding:0;
}

.story-step{
  position:relative;
  padding:var(--section-pad-y) var(--section-pad-x);
}

.story-group > .story-step--problem{
  padding:0;
  overflow:visible;
  background:var(--section-teal);
}

.story-step--problem > *{
  position:relative;
  z-index:1;
}

.story-step--problem::before,
.story-step--problem::after{
  display:none;
}

.story-step--approach{
  padding:0;
  background:linear-gradient(180deg, #e0f2ef 0%, #e0f2ef 52%, #d8eee8 100%);
}

.story-step--approach::before{
  display:none;
}

.story-step--result{
  /* 直前の problem-section のしっぽの下だが、見出しが窮屈になるため
     しっぽ用の詰めた値ではなく個別に広めを取る。 */
  padding:clamp(18px,calc(var(--pw) * .03),40px) clamp(22px,calc(var(--pw) * .04),56px) clamp(2px,.6vw,8px);
  text-align:center;
  background:transparent;
}

.result-story-visual{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
}

.result-story-visual::before,
.result-story-visual::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  width:100%;
  height:clamp(64px, 9vw, 108px);
  pointer-events:none;
}

.result-story-visual::before{
  top:0;
  background:linear-gradient(
    180deg,
    #e0f2ef 0%,
    rgba(224,242,239,.78) 28%,
    rgba(224,242,239,.28) 68%,
    rgba(224,242,239,0) 100%
  );
}

.result-story-visual::after{
  bottom:0;
  background:linear-gradient(
    180deg,
    rgba(232,248,249,0) 0%,
    rgba(232,248,249,.28) 32%,
    rgba(232,248,249,.78) 72%,
    #e8f8f9 100%
  );
}

.result-story-visual img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:1536 / 1024;
  margin:0;
  object-fit:cover;
}

.result-section h2{
  display:block;
  min-height:0;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--navy);
  font-size:26px;
  letter-spacing:.04em;
}

.result-section h2::before,
.result-section h2::after{
  display:none;
}

.result-heading{
  display:block;
  width:min(960px, 100%);
  min-height:0;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(20px,2.3vw,28px);
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.4;
  text-align:center;
  box-shadow:none;
}

.result-heading::before,
.result-heading::after{
  display:none;
}

/* 中央にダイヤを積み、左右に 01〜04 を絶対配置する。バッジの縦位置は
   ダイヤ1枚(168)と重なりピッチ(104)から出した比率で、SVGの viewBox(286x480)
   と対応。ピッチを変えたら top の % も引き直す。ダイヤ1枚が縦長寄りなので、
   スタック幅は抑えて全体の高さが膨らみすぎないようにしている。 */
.result-stack{
  /* 01/03 と 02/04 は同じ側に並ぶので、縦の間隔は図の高さの 43.5%。
     ラベル1つは約182pxなので、この幅で上下に約40pxの空きが残る。
     ここを削るとブロックの境目が分からなくなる。 */
  --stack-w:clamp(240px,calc(var(--pw) * .226),304px);
  --stack-half:calc(var(--stack-w) / 2);
  --point-w:clamp(166px,18vw,216px);
  --point-marker:clamp(26px,2.6vw,32px);
  --point-line:clamp(24px,3.4vw,42px);
  /* ひし形と、そこへ点線でつながる番号マーカーの共有色。ひし形は SVG の
     <use>、マーカーは CSS と出どころが違うので、ここで1本にまとめる。
     上から下の並び順と 01〜04 の番号は必ず対応させる。 */
  --result-01:var(--blue);
  --result-02:var(--yellow);
  --result-03:var(--pink);
  --result-04:var(--periwinkle);
  position:relative;
  width:min(1060px, 100%);
  margin:clamp(8px,1.2vw,14px) auto 0;
  padding-bottom:clamp(4px,.8vw,8px);
}

.result-stack__inner{
  position:relative;
  width:100%;
}

/* グループ不透過で背景写真を透かす。重なりの混色は isolate されたグループ
   内で処理されるので、写真そのものは暗くならない。overflow:visible は最下段
   の板が落とす影を SVG の枠でクリップさせないため。 */
.result-stack__shapes{
  display:block;
  width:var(--stack-w);
  height:auto;
  margin:0 auto;
  overflow:visible;
  isolation:isolate;
  opacity:.76;
}

.result-stack__shapes use{
  mix-blend-mode:multiply;
  opacity:0;
}

.result-stack__shapes use:nth-of-type(1){ fill:var(--result-01); }
.result-stack__shapes use:nth-of-type(2){ fill:var(--result-02); }
.result-stack__shapes use:nth-of-type(3){ fill:var(--result-03); }
.result-stack__shapes use:nth-of-type(4){ fill:var(--result-04); }

/* セクションが視界に入ったら一番下の板から順に出す（JS で is-visible を付与）。
   nth-of-type の1番目が最上段なので、遅延は逆順に振る。4番目＝最下段が 0s。 */
.result-stack__shapes.is-visible use{
  animation:resultDiamondIn .9s cubic-bezier(.22,.7,.3,1) forwards;
}

.result-stack__shapes.is-visible use:nth-of-type(1){ animation-delay:.84s; }
.result-stack__shapes.is-visible use:nth-of-type(2){ animation-delay:.56s; }
.result-stack__shapes.is-visible use:nth-of-type(3){ animation-delay:.28s; }

@keyframes resultDiamondIn{
  from{
    opacity:0;
    transform:translateY(-20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.result-points{
  margin:0;
  padding:0;
  list-style:none;
}

.result-point{
  position:absolute;
  display:flex;
  align-items:flex-start;
  gap:clamp(7px,.9vw,11px);
  width:var(--point-w);
}

/* 左列はマーカーだけをダイヤ側（右）に寄せ、テキストは右列と同じ左揃えに
   保つ。右揃えにすると行頭が不揃いになり、4つの幅が違って見える。
   --point-shift は個別に外側へ逃がす量。点線の長さにも同じ値を足すので、
   ブロックを外へ動かしても点線の内側の端（ひし形側）は動かない。 */
.result-point--01,
.result-point--03{
  right:calc(50% + var(--stack-half) + var(--point-line) + var(--point-shift, 0px));
  flex-direction:row-reverse;
  text-align:left;
}

.result-point--02,
.result-point--04{
  left:calc(50% + var(--stack-half) + var(--point-line) + var(--point-shift, 0px));
  text-align:left;
}

.result-point--01{
  --point-color:var(--result-01);
  top:calc(10.4% - var(--point-marker) / 2);
}

.result-point--02{
  --point-color:var(--result-02);
  top:calc(32.2% - var(--point-marker) / 2);
}

.result-point--03{
  --point-color:var(--result-03);
  top:calc(53.9% - var(--point-marker) / 2);
}

.result-point--04{
  --point-color:var(--result-04);
  top:calc(75.6% - var(--point-marker) / 2);
}

/* 下段の2つだけ外側へ逃がす。01/02 は既定の 0px のまま。ずらす量を変えるのは
   ここだけでよく、位置と点線の長さが連動して動く。 */
.result-point--03,
.result-point--04{
  --point-shift:clamp(14px,calc(var(--pw) * .018),22px);
}

.result-point__marker{
  position:relative;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:var(--point-marker);
  height:var(--point-marker);
  border-radius:50%;
  background:var(--point-color);
  color:#fff;
  font-family:var(--font-base);
  font-size:clamp(10px,1.05vw,12px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:1;
}

.result-point__marker::after{
  content:"";
  position:absolute;
  top:50%;
  width:calc(var(--point-line) + var(--point-shift, 0px));
  border-top:2px dotted var(--point-color);
}

.result-point--01 .result-point__marker::after,
.result-point--03 .result-point__marker::after{
  left:100%;
}

.result-point--02 .result-point__marker::after,
.result-point--04 .result-point__marker::after{
  right:100%;
}

.result-point__body{
  flex:1 1 auto;
  min-width:0;
}

.result-point__body h4{
  margin:0;
  color:#4b4b4b;
  font-family:var(--font-base);
  font-size:clamp(13px,1.4vw,17px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.5;
}

/* 数値はマーカーとひし形と同じ色。番号・ひし形・数値が一色で紐づく。
   写真背景の上では黄色・薄いティールが沈むので、数字行だけに半透明の帯を
   載せる。見出し・注釈・セクション背景には当てない。 */
.result-metric{
  display:inline-block;
  margin:clamp(2px,.5vw,6px) 0 0;
  padding:.18em .42em .2em;
  border-radius:.28em;
  background:rgba(245,247,249,.82);
  box-shadow:0 1px 0 rgba(29,36,48,.05);
  color:var(--point-color);
  line-height:1.1;
  white-space:nowrap;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.result-metric strong{
  font-family:var(--font-base);
  font-size:clamp(28px,calc(var(--pw) * .035),44px);
  font-weight:900;
  letter-spacing:-.03em;
}

.result-metric span{
  margin-left:2px;
  font-size:clamp(11px,1.25vw,15px);
  font-weight:900;
}

/* ブロック内は詰めて、ブロック同士の間に空きを回す。 */
.result-point__note{
  margin:clamp(5px,.7vw,8px) 0 0;
  padding-top:clamp(5px,.7vw,8px);
  border-top:1px solid rgba(29,36,48,.2);
  color:#4f5866;
  font-family:var(--font-base);
  font-size:clamp(10px,1.05vw,12px);
  font-weight:500;
  line-height:1.65;
}

/* 左右に置けなくなる幅では、実績を縦並びにし、まとめて積んでいたひし形を
   各実績のマーカーへ分解する。 */
@media (max-width:900px){
  .result-stack{
    padding-bottom:0;
  }
  /* 4枚のひし形は番号から点線でつないで初めて意味を持つ図。縦並びでは
     その線を引けず、高さ500px近い装飾だけが残ってしまう。 */
  .result-stack__shapes{
    display:none;
  }
  .result-points{
    display:grid;
    gap:clamp(20px,3.4vw,30px);
    margin-top:clamp(22px,3.4vw,32px);
  }
  .result-point,
  .result-point--01,
  .result-point--02,
  .result-point--03,
  .result-point--04{
    position:static;
    width:100%;
    flex-direction:row;
    text-align:left;
  }
  /* マーカー自体をひし形にして、番号・色・数値のつながりを残す。 */
  .result-point__marker{
    width:58px;
    height:34px;
    border-radius:0;
    background:transparent;
    font-size:12px;
  }
  .result-point__marker::before{
    content:"";
    position:absolute;
    inset:0;
    /* 数値より奥に置く。マーカー自体の背景は透明にしてある。 */
    z-index:-1;
    background:var(--point-color);
    /* 元の SVG と同じ 286:168 の平たい菱形。 */
    clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }
  .result-point__marker::after{
    display:none;
  }
  .result-point__body h4{
    font-size:16px;
  }
  .result-metric strong{
    font-size:32px;
  }
  .result-point__note{
    font-size:12px;
  }
}

.result-layout{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:18px;
  margin-top:18px;
}

.result-stats-panel,
.result-story,
.result-box{
  border:2px solid #dedede;
  border-radius:10px;
  background:var(--white);
}

.result-stats-panel{
  padding:28px;
}

.result-stats-panel .grid{
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:0;
}

.result-story{
  border-color:var(--blue);
  padding:38px 32px;
  display:flex;
  align-items:center;
}

.result-story .lead{
  margin:0;
  color:#666;
  text-align:left;
  font-size:15px;
  font-weight:700;
  line-height:2.05;
 }

.result-story .wide{
  max-width:none;
}

.stat{
  min-height:138px;
  background:#fffdf1;
  border-color:#dedede;
  border-radius:16px;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.stat:nth-child(1){ background:var(--pink-soft); }
.stat:nth-child(2){ background:#fffdf1; }
.stat:nth-child(3){ background:#f1fffe; }
.stat:nth-child(4){ background:#f4f7ff; }

.stat::before{ display:none; }

.stat-icon{
  flex:0 0 auto;
}

.stat-value{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.stat-icon img{
  display:block;
  width:62px;
  height:62px;
  object-fit:contain;
}

.stat .n2{
  margin:0;
}

.result-stats-panel .stat{
  opacity:0;
  transform:translateY(18px);
}

.result-stats-panel.is-visible .stat{
  animation:stat-card-in .55s cubic-bezier(.22,1,.36,1) forwards;
}

.result-stats-panel.is-visible .stat:nth-child(1){ animation-delay:.1s; }
.result-stats-panel.is-visible .stat:nth-child(2){ animation-delay:.35s; }
.result-stats-panel.is-visible .stat:nth-child(3){ animation-delay:.6s; }
.result-stats-panel.is-visible .stat:nth-child(4){ animation-delay:.85s; }

@keyframes stat-card-in{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.n2{
  font-size:36px;
  font-weight:900;
  color:#050505;
  line-height:1.2;
}

.n2 span{
  font-size:14px;
  color:var(--muted);
}

.hl{
  font-size:24px;
  font-weight:900;
  color:var(--deep-green);
}

.result-box{
  max-width:none;
  margin:18px auto 0;
  padding:28px;
}

.result-title{
  font-size:17px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:18px;
  text-align:left;
}

.result-impact{
  gap:14px;
  align-items:stretch;
}

.result-impact > div{
  display:flex;
  flex-direction:column;
  min-height:340px;
  height:100%;
  padding:18px 16px 20px;
  border:1px solid #dedede;
  border-radius:14px;
  background:#fafafa;
  text-align:center;
}

.result-chart-wrap{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  margin-bottom:12px;
  padding:8px;
  border-radius:10px;
  background:#eee;
}

.result-chart{
  display:block;
  width:100%;
  max-height:220px;
  height:auto;
  margin:0;
  border-radius:6px;
  object-fit:contain;
  object-position:bottom center;
}

.result-chart-svg{
  max-height:190px;
  aspect-ratio:400 / 220;
}

.result-chart-svg svg{
  display:block;
  width:100%;
  height:auto;
}

.result-chart-svg .axis-line{
  stroke:#b8b8b8;
  stroke-width:1.5;
}

.result-chart-svg .bar-group{
  transform-box:fill-box;
  transform-origin:bottom center;
  transform:scaleY(0);
  opacity:0;
}

.result-chart-svg .bar-label,
.result-chart-svg .year-label,
.result-chart-svg .chart-annotation{
  opacity:0;
}

.result-chart-svg .line-point{
  transform-box:fill-box;
  transform-origin:center center;
  transform:scale(0);
  opacity:0;
}

.result-chart-svg .line-segment{
  stroke-dasharray:var(--seg-len, 120);
  stroke-dashoffset:var(--seg-len, 120);
  opacity:0;
}

.result-chart-svg.is-visible .bar-group{
  animation:result-bar-grow .65s cubic-bezier(.22,1,.36,1) forwards;
}

.result-chart-svg.is-visible .bar-group[data-order="0"]{ animation-delay:.15s; }
.result-chart-svg.is-visible .bar-group[data-order="1"]{ animation-delay:.45s; }
.result-chart-svg.is-visible .bar-group[data-order="2"]{ animation-delay:.75s; }
.result-chart-svg.is-visible .bar-group[data-order="3"]{ animation-delay:1.05s; }

.result-chart-svg.is-visible .line-point{
  animation:result-point-pop .4s cubic-bezier(.22,1,.36,1) forwards;
}

.result-chart-svg.is-visible .line-point[data-order="0"]{ animation-delay:.15s; }
.result-chart-svg.is-visible .line-point[data-order="1"]{ animation-delay:.45s; }
.result-chart-svg.is-visible .line-point[data-order="2"]{ animation-delay:.75s; }
.result-chart-svg.is-visible .line-point[data-order="3"]{ animation-delay:1.05s; }

.result-chart-svg.is-visible .line-segment{
  animation:result-line-draw .5s ease forwards;
}

.result-chart-svg.is-visible .line-segment[data-order="0"]{ animation-delay:.45s; }
.result-chart-svg.is-visible .line-segment[data-order="1"]{ animation-delay:.75s; }
.result-chart-svg.is-visible .line-segment[data-order="2"]{ animation-delay:1.05s; }

.result-chart-svg.is-visible .bar-label,
.result-chart-svg.is-visible .year-label{
  animation:result-label-fade .35s ease forwards;
}

.result-chart-svg.is-visible .bar-group[data-order="0"] .bar-label,
.result-chart-svg.is-visible .year-label[data-order="0"]{ animation-delay:.55s; }
.result-chart-svg.is-visible .bar-group[data-order="1"] .bar-label,
.result-chart-svg.is-visible .year-label[data-order="1"]{ animation-delay:.85s; }
.result-chart-svg.is-visible .bar-group[data-order="2"] .bar-label,
.result-chart-svg.is-visible .year-label[data-order="2"]{ animation-delay:1.15s; }
.result-chart-svg.is-visible .bar-group[data-order="3"] .bar-label,
.result-chart-svg.is-visible .year-label[data-order="3"]{ animation-delay:1.45s; }

.result-chart-svg.is-visible .chart-annotation{
  animation:result-label-fade .45s ease forwards;
  animation-delay:1.65s;
}

@keyframes result-bar-grow{
  to{
    transform:scaleY(1);
    opacity:1;
  }
}

@keyframes result-point-pop{
  to{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes result-line-draw{
  to{
    stroke-dashoffset:0;
    opacity:1;
  }
}

@keyframes result-label-fade{
  to{ opacity:1; }
}

.result-impact p{
  margin:0;
  flex-shrink:0;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:900;
  color:var(--ink);
  line-height:1.65;
}

.ph{
  border:2px dashed var(--blue);
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  background:#f9ffff;
}

.solution-section{
  position:relative;
  margin-top:0;
  /* 直前の result-section のしっぽの下。 */
  padding-top:var(--section-pad-y-tail);
  padding-bottom:0;
  background:var(--white);
}

.solution-layout{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  align-items:center;
  gap:48px;
  max-width:var(--content-w);
  margin:42px auto 0;
}

.solution-flow{
  margin:0;
  padding:0;
  list-style:none;
}

.solution-step{
  --step-color:#35c6c0;
  display:grid;
  grid-template-columns:clamp(72px,7.9vw,96px) minmax(0, 1fr);
  column-gap:clamp(12px,1.5vw,18px);
  align-items:center;
  padding:clamp(12px,1.5vw,18px) 0;
  text-align:left;
}

.solution-step + .solution-step{
  border-top:1px solid #e4e8ea;
}

.solution-step--01{ --step-color:#f4586e; }
.solution-step--02{ --step-color:#e8b21c; }
.solution-step--03{ --step-color:#35c6c0; }

.solution-step__icon{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  padding:clamp(3px,.4vw,5px);
  border-radius:13px;
  background:#f4f4f4;
}

.solution-step__icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.solution-step__title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 clamp(7px,1vw,12px);
  margin:0;
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(14px,1.35vw,16px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.4;
}

.solution-step__no{
  color:var(--step-color);
  font-size:clamp(11px,1.05vw,12px);
  font-weight:900;
  letter-spacing:.12em;
}

.solution-step__note{
  margin:clamp(4px,.6vw,7px) 0 0;
  color:#6b7480;
  font-family:var(--font-base);
  font-size:clamp(11px,1.1vw,13px);
  font-weight:500;
  line-height:1.7;
}

.roadmap-trigger{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.6vw,20px);
  width:min(100%, 460px);
  margin:clamp(26px,3.4vw,42px) auto 0;
  padding:clamp(10px,1.2vw,14px) clamp(18px,2.2vw,26px);
  border:2px solid var(--blue);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-size:clamp(14px,1.4vw,17px);
  font-weight:900;
  line-height:1.3;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.roadmap-trigger::after{
  content:"";
  flex:0 0 auto;
  width:0;
  height:0;
  border-style:solid;
  border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent var(--blue);
}

.roadmap-trigger__preview{
  display:block;
  box-sizing:border-box;
  flex:0 0 clamp(66px,7.6vw,92px);
  width:clamp(66px,7.6vw,92px);
  height:auto;
  aspect-ratio:16 / 10;
  padding:2px;
  border:1px solid rgba(74,210,208,.5);
  border-radius:4px;
  overflow:hidden;
  object-fit:cover;
  object-position:center;
  background:#f4fdfd;
}

.roadmap-trigger:hover{
  transform:translateY(-2px);
  background:#f4fdfd;
  box-shadow:0 10px 22px rgba(74,210,208,.26);
}

.roadmap-trigger-note{
  margin:16px auto 0;
  color:#4b4b4b;
  font-family:var(--font-base);
  font-size:13px;
  font-weight:400;
  line-height:1.7;
  text-align:center;
}

.solution-operation-visual{
  max-width:none;
  margin:0;
  text-align:center;
}

.solution-operation-visual img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}

.roadmap-modal{
  width:min(960px, calc(100% - 32px));
  max-height:min(88vh, 850px);
  margin:auto;
  padding:0;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
  overflow:auto;
}

.roadmap-modal::backdrop{
  background:rgba(10,24,35,.65);
  backdrop-filter:blur(3px);
}

.roadmap-modal__content{
  position:relative;
  padding:36px;
}

.roadmap-modal__title{
  margin:0 44px 20px 0;
  color:var(--navy);
  font-size:20px;
  font-weight:900;
  line-height:1.5;
}

.roadmap-modal__hint{
  margin:-10px 44px 16px 0;
  color:#6b7480;
  font-family:var(--font-base);
  font-size:12.5px;
  font-weight:500;
  line-height:1.6;
}

.roadmap-modal__hint-hover{
  display:none;
}

@media (hover:hover) and (pointer:fine){
  .roadmap-modal__hint-hover{
    display:inline;
  }
  .roadmap-modal__hint-tap{
    display:none;
  }
}

/* ピンとポップアップの座標基準。クリップは内側の __clip が持つので、
   ホバー時の吹き出しは図の上辺より外へはみ出して表示できる。 */
.roadmap-figure{
  position:relative;
}

/* 拡大した図をこの枠でクリップする。ピンは図の子ではなく兄弟なので、
   図に scale をかけてもピンの座標は動かない。 */
.roadmap-figure__clip{
  overflow:hidden;
  border-radius:10px;
  background:#f4f7fa;
}

/* object-fit を使うと縦が余ったときレターボックスが出て、% 指定のピンが
   実際の絵とズレる。height:auto で常に絵と枠を一致させる。 */
.roadmap-figure__image{
  display:block;
  width:100%;
  height:auto;
  transition:transform .4s ease;
}

/* 番号は表示しない。図の吹き出しに重ねた透明な当たり判定だけを置き、
   ホバー／クリックでポップアップと拡大を起こす。番号を出すと図の絵と
   競合して位置合わせが常に破綻するため、当たり判定に徹する。 */
.roadmap-pin{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  /* 親幅に連動させて、吹き出しとの相対位置がブラウザ幅でズレないようにする。 */
  /* 11.5% は隣の吹き出し（2と4、9と10）の当たり判定が重ならない上限。 */
  width:11.5%;
  height:6.4%;
  min-width:64px;
  min-height:22px;
  padding:0;
  border:0;
  background:transparent;
  /* 番号の文字は消すが、支援技術向けに要素自体は残す。 */
  color:transparent;
  font-size:clamp(9px,1.35vw,12px);
  font-weight:900;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  /* style の left/top は吹き出し左辺の中央。当たり判定の左辺をそこに合わせ、
     右へ吹き出しを覆う形に伸ばす。 */
  transform:translate(0, -50%);
  transition:opacity .25s ease;
}

/* キーボード操作時だけは対象が分かるように輪郭を出す。 */
.roadmap-pin:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:2px;
  border-radius:6px;
}

/* ホバー時に出る吹き出し。ポインタで操作できる環境だけに限定し、
   タップだとホバーが残って消えない端末では出さない。 */
/* 右へのずらし量は px ではなく「図の幅に対する％」で持つ必要があるため、
   transform ではなく JS が left に加算している（POPUP_SHIFT_PERCENT）。
   transform の % は自分自身の幅（196px 固定）基準なので、ここに書くと
   ブラウザ幅が変わってもずらし量が固定され、図の縮小に追従しない。 */
.roadmap-pop{
  display:none;
}

@media (hover:hover) and (pointer:fine){
  .roadmap-pop{
    display:block;
    position:absolute;
    z-index:3;
    width:196px;
    height:140px;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:contain;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    /* 下端を吹き出しの真上に置き、そこからせり上がる。 */
    transform:translate(-50%, calc(-100% - 8px)) scale(.3);
    transform-origin:bottom center;
    transition:opacity .3s ease-out, transform .3s ease-out;
  }
  .roadmap-pop.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, calc(-100% - 8px)) scale(1);
  }
}

/* 拡大中は選択中の1つ以外を無効化する。見た目は元から透明なので
   opacity ではなく当たり判定だけを落とす。 */
.roadmap-pin.is-hidden{
  pointer-events:none;
}

.roadmap-notes{
  margin-top:18px;
}

/* 説明は常に1件だけ。非表示側を display:none で詰めて高さを持たせない。 */
.roadmap-note{
  display:none;
  margin:0;
}

.roadmap-note.is-active{
  display:block;
}

.roadmap-note img{
  display:block;
  width:100%;
  max-width:440px;
  height:auto;
  margin:0 auto;
}

.roadmap-modal__close{
  position:absolute;
  top:14px;
  right:16px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:26px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
}

.solution-steps{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}

.solution-card{
  flex:1;
  max-width:380px;
  min-height:220px;
  border:1px solid #dedede;
  border-radius:18px;
  padding:20px 18px 22px;
  background:var(--white);
  box-shadow:0 8px 22px rgba(29,36,48,.05);
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.solution-card::before{
  display:none;
}

.solution-step-label{
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--step-color, var(--pink));
  text-align:center;
  margin-bottom:16px;
}

.solution-card-body{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
}

.solution-icon-ph{
  flex:0 0 96px;
  min-height:auto;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.solution-icon-ph img{
  display:block;
  width:96px;
  height:96px;
  object-fit:contain;
}

.solution-card-text{
  flex:1;
  min-width:0;
}

.solution-card .t{
  font-size:17px;
  font-weight:900;
  color:var(--ink);
  margin:0;
  padding:0;
  line-height:1.5;
  text-align:left;
}

.solution-divider{
  width:100%;
  height:3px;
  margin:12px 0 14px;
  border-radius:999px;
  background:var(--step-color, var(--pink));
}

.solution-card p{
  margin:0;
  font-size:13px;
  color:#666;
  line-height:1.8;
  text-align:left;
  padding:0;
}

.solution-card--pink{ --step-color:var(--pink); }
.solution-card--yellow{ --step-color:var(--yellow); }
.solution-card--blue{ --step-color:var(--blue); }

.solution-arrow{
  flex:0 0 auto;
  align-self:center;
  font-size:28px;
  font-weight:700;
  color:#ccc;
  line-height:1;
  padding:0 4px;
}

.strategy-visual{
  margin-top:30px;
  text-align:center;
}

.strategy-visual img{
  display:block;
  width:100%;
  max-width:860px;
  margin:0 auto;
  border:3px solid var(--blue);
  border-radius:24px;
  background:var(--white);
}

/* 次の target-section も白なので、しっぽを置いても白×白で見えず
   80px の空白になるだけ。しっぽは持たず直線で繋ぐ。 */
.service-section{
  background:#fff;
  padding-bottom:0;
}

/* 上は直前の solution-section のしっぽの下なので詰める。
   下端は角丸なしの直線で次セクションへ繋ぐため section-tail を持たない。
   下パディングは、その tail が占めていた高さ分をそのまま引き継いだもの。 */
.operation-section{
  background:var(--section-teal);
  text-align:center;
  padding:var(--section-pad-y-tail) var(--section-pad-x) clamp(16px,3.2vw,38px);
}

.operation-section h2::before{ display:none; }

.operation-panel{
  max-width:1440px;
  margin:0 auto clamp(18px,calc(var(--pw) * .024),34px);
  padding:clamp(26px,calc(var(--pw) * .034),50px) clamp(18px,calc(var(--pw) * .032),52px) clamp(26px,calc(var(--pw) * .032),46px);
  border-radius:clamp(20px,calc(var(--pw) * .026),36px);
  background:var(--white);
}

.operation-lead{
  max-width:760px;
  margin:clamp(10px,1.3vw,16px) auto 0;
  color:#5b6672;
  font-family:var(--font-base);
  font-size:clamp(12px,1.15vw,14px);
  font-weight:500;
  line-height:1.8;
  text-align:center;
}

.operation-cycle-title{
  margin:clamp(16px,calc(var(--pw) * .021),28px) 0 0;
  color:var(--ink);
  font-size:clamp(16px,1.75vw,22px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.5;
  text-align:center;
}

.operation-cycle{
  --col-gap:clamp(8px,calc(var(--pw) * .015),26px);
  --row-gap:clamp(8px,calc(var(--pw) * .011),16px);
  --plant-h:clamp(70px,calc(var(--pw) * .094),126px);
  --loop-h:clamp(22px,calc(var(--pw) * .03),40px);
  --cycle-line:#dfe5e8;
  /* 苗が接地している点線の高さ。ステップ間の矢印もこの線上に乗せる。 */
  --ground:var(--plant-h);
  position:relative;
  max-width:1040px;
  margin:clamp(14px,calc(var(--pw) * .018),24px) auto 0;
}

.operation-cycle__list{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  column-gap:var(--col-gap);
  margin:0;
  list-style:none;
}

.operation-cycle__list::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--ground);
  border-top:1px dotted #c3cfd4;
}

.operation-cycle__item{
  --step:#3cc8c3;
  position:relative;
  display:grid;
  grid-template-rows:var(--plant-h) auto;
  row-gap:var(--row-gap);
  justify-items:center;
  align-items:end;
}

/* --step は本文上の区切り線の色。--plant-scale は木の表示高さで、
   05 を 100% とした相対値（詳細は .operation-cycle__plant img のコメント）。
   育ち方の緩急を変えたいときはこの5行だけ触る。 */
.operation-cycle__item--01{ --step:#3cc8c3; --plant-scale:22%; }
.operation-cycle__item--02{ --step:#f0729d; --plant-scale:42%; }
.operation-cycle__item--03{ --step:#58c9a6; --plant-scale:63%; }
.operation-cycle__item--04{ --step:#edc02f; --plant-scale:87%; }
.operation-cycle__item--05{ --step:#f4586e; --plant-scale:100%; }

.operation-cycle__item:not(:last-child)::after{
  content:"";
  position:absolute;
  left:100%;
  top:var(--ground);
  width:clamp(16px,calc(var(--pw) * .022),32px);
  height:clamp(6px,.75vw,9px);
  transform:translate(-50%, -50%);
  background:#a9b3ba;
  clip-path:polygon(0 40%, 68% 40%, 68% 0, 100% 50%, 68% 100%, 68% 60%, 0 60%);
}

/* 苗から木へ育つ並びなので、接地している下端を軸にせり上がらせる。
   左から順に出すのは JS が list へ is-visible を付けてから。
   枠は5つとも --plant-h の高さで、中の絵を下端に寄せる。枠を共通にすることで
   株元が必ず点線（--ground）に乗る。 */
.operation-cycle__plant{
  grid-row:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  height:100%;
  opacity:0;
  transform:scale(.7);
  transform-origin:bottom center;
}

.operation-cycle.is-visible .operation-cycle__plant{
  animation:cyclePlantIn .95s cubic-bezier(.22,.7,.3,1) forwards;
}

.operation-cycle.is-visible .operation-cycle__item:nth-child(2) .operation-cycle__plant{ animation-delay:.32s; }
.operation-cycle.is-visible .operation-cycle__item:nth-child(3) .operation-cycle__plant{ animation-delay:.64s; }
.operation-cycle.is-visible .operation-cycle__item:nth-child(4) .operation-cycle__plant{ animation-delay:.96s; }
.operation-cycle.is-visible .operation-cycle__item:nth-child(5) .operation-cycle__plant{ animation-delay:1.28s; }

@keyframes cyclePlantIn{
  from{
    opacity:0;
    transform:scale(.7);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* イラストは1枚ずつ輪郭ぴったりで切り出されているため、そのまま並べると
   苗と木が同じ高さになり「育っていく」表現が消える。枠に対する表示高さを
   段階ごとに指定して、大きさの差をこちら側で作る。
   幅は高さに追従させる（絵ごとに縦横比が違うので固定しない）。 */
.operation-cycle__plant img{
  display:block;
  width:auto;
  max-width:100%;
  height:var(--plant-scale, 100%);
  /* 絵が横長で max-width に引っかかったときの保険。縮めた上で下端に寄せ、
     株元が点線から浮かないようにする。 */
  object-fit:contain;
  object-position:bottom center;
}

.operation-cycle__body{
  position:relative;
  grid-row:2;
  width:100%;
  margin-top:calc(var(--loop-h) + clamp(6px,.9vw,12px));
  padding-top:clamp(6px,.9vw,11px);
  border-top:2px solid var(--step);
  text-align:center;
}

/* 区切り線の中央に乗せるドット。top:-1px は 2px の border の中心線。 */
.operation-cycle__body::before{
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  width:clamp(7px,.8vw,10px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--step);
  transform:translate(-50%, -50%);
}

.operation-cycle__no{
  margin:0;
  color:var(--step);
  font-family:var(--font-base);
  font-size:clamp(12px,1.25vw,15px);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.2;
}

.operation-cycle__name{
  margin:clamp(2px,.3vw,4px) 0 0;
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(11px,1.25vw,15px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.4;
}

.operation-cycle__desc{
  margin:clamp(5px,.7vw,9px) 0 0;
  color:#7c858f;
  font-family:var(--font-base);
  font-size:clamp(9px,.92vw,11px);
  font-weight:500;
  line-height:1.75;
}

.operation-cycle__loop{
  position:absolute;
  top:calc(var(--ground) + var(--row-gap));
  left:calc((100% - 4 * var(--col-gap)) / 10);
  right:calc((100% - 4 * var(--col-gap)) / 10);
  height:var(--loop-h);
  border:1px solid #b8c2c9;
  border-top:0;
  border-radius:0 0 8px 8px;
  pointer-events:none;
}

.operation-cycle__loop::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 4.5px 8px 4.5px;
  border-color:transparent transparent #b8c2c9 transparent;
  transform:translateX(-50%);
}

.operation-layout{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(360px, 1.1fr);
  align-items:center;
  gap:48px;
  max-width:var(--content-w);
  margin:0 auto;
}

.operation-copy h2{
  display:inline-block;
  padding:0;
  border-bottom:0;
  color:var(--navy);
  font-size:28px;
  text-align:left;
}

.operation-copy h2::before,
.operation-copy h2::after{
  display:none;
}

.operation-eyebrow{
  display:table;
  margin:0 0 10px;
  padding:4px 12px;
  border-radius:4px;
  background:#00a99d;
  color:#fff;
  font-family:var(--font-base);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.2;
}

.operation-intro{
  margin:24px 0 0;
  color:#263945;
  font-family:var(--font-base);
  font-size:15px;
  font-weight:500;
  line-height:2;
}

.operation-steps{
  display:grid;
  gap:10px;
  max-width:320px;
  margin-top:26px;
}

.operation-steps div{
  --step-color:#00a99d;
  position:relative;
  padding:13px 18px 13px 60px;
  border:1.5px solid var(--step-color);
  border-radius:10px;
  background:#fff;
  color:var(--navy);
  font-size:14px;
  font-weight:900;
  line-height:1.4;
  box-shadow:4px 4px 0 rgba(18,50,95,.08);
}

.operation-steps div::before{
  content:"01";
  position:absolute;
  top:50%;
  left:14px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--step-color);
  color:#fff;
  font-family:var(--font-base);
  font-size:11px;
  font-weight:900;
  line-height:1;
  transform:translateY(-50%);
}

.operation-steps div:nth-child(2){
  --step-color:var(--pink);
}

.operation-steps div:nth-child(2)::before{
  content:"02";
}

.operation-steps div:nth-child(3){
  --step-color:#4f7fd8;
}

.operation-steps div:nth-child(3)::before{
  content:"03";
}

.operation-visual{
  position:relative;
  min-height:340px;
}

.operation-visual-image{
  position:absolute;
  top:0;
  right:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.operation-desktop-placeholder{
  position:absolute;
  right:0;
  top:32px;
  width:82%;
  aspect-ratio:16 / 10;
  border:5px solid #39434c;
  border-radius:13px 13px 8px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, #eef7f7, #fff);
  box-shadow:0 12px 22px rgba(29,36,48,.14);
}

.operation-desktop-placeholder::before{
  content:"";
  position:absolute;
  top:-5px;
  left:0;
  right:0;
  height:22px;
  border-radius:8px 8px 0 0;
  background:#39434c;
}

.operation-desktop-placeholder span,
.operation-mobile-placeholder span{
  color:#82909a;
  font-size:12px;
  font-weight:700;
  text-align:center;
}

.operation-mobile-placeholder{
  position:absolute;
  left:2%;
  bottom:0;
  z-index:1;
  width:26%;
  aspect-ratio:9 / 18;
  border:5px solid #39434c;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow:0 12px 22px rgba(29,36,48,.16);
}

.operation-grid{
  gap:22px;
  margin-top:32px;
}

.operation-card{
  border:1px solid #dedede;
  border-radius:14px;
  padding:28px 24px 30px;
  background:var(--white);
  box-shadow:0 8px 24px rgba(29,36,48,.05);
  text-align:left;
  min-height:168px;
}

.operation-card::before{
  display:none;
}

.operation-card-title{
  margin-bottom:16px;
  font-size:18px;
  font-weight:900;
  color:var(--ink);
  line-height:1.55;
}

.operation-card p{
  margin:0;
  font-size:14px;
  color:#666;
  line-height:1.9;
}

.operation-message{
  max-width:820px;
  margin:38px auto 0;
  text-align:center;
}

.operation-message-main{
  margin:0 0 14px;
  font-size:18px;
  font-weight:900;
  color:var(--navy);
  line-height:1.7;
}

.operation-message-sub{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--navy);
  line-height:1.95;
}

.target-section{
  background:var(--white);
  color:var(--ink);
  /* 直前の service-section はしっぽを持たないので上は通常の余白。
     下は吹き出しなしなので lp-section の padding-bottom:0 を戻す。 */
  padding-top:var(--section-pad-y);
  padding-bottom:clamp(48px,6vw,72px);
}

.target-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px,calc(var(--pw) * .018),26px);
  max-width:var(--content-w);
  margin:clamp(24px,calc(var(--pw) * .032),44px) auto 0;
}

.target-card{
  --target-color:var(--pink);
  /* 色面と写真のずれ量。上下左右の4辺すべてがこの値を見る。 */
  --shape-shift:clamp(10px,calc(var(--pw) * .014),18px);
}

.target-card--01{ --target-color:var(--pink); }
.target-card--02{ --target-color:var(--yellow); }
.target-card--03{ --target-color:var(--blue); }

/* 色面と写真を同じ量だけ斜めにずらす。色面が上と右、写真が下と左に出る。
   4辺すべて --shape-shift で決まるので、ずれ量を変えるのは1箇所でよい。
   色面の bottom を 0 にすると下にも色帯が出て、斜めのずれに見えなくなる。 */
.target-visual{
  position:relative;
  padding:var(--shape-shift) var(--shape-shift) 0 0;
}

.target-visual__shape{
  position:absolute;
  top:0;
  right:0;
  bottom:var(--shape-shift);
  left:var(--shape-shift);
  border-radius:clamp(10px,1.3vw,16px);
  background:var(--target-color);
}

.target-visual__photo{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:clamp(8px,1.1vw,14px);
  object-fit:cover;
  object-position:center;
}

/* 写真の左端から半ステップぶん外へ出す。--shape-shift に連動させているので、
   ずれ量を変えてもタグのはみ出しだけが取り残されることがない。 */
.target-visual__type{
  position:absolute;
  top:clamp(3px,.45vw,6px);
  left:calc(-1 * var(--shape-shift) / 2);
  z-index:2;
  padding:clamp(4px,.52vw,6px) clamp(9px,1.15vw,15px);
  border-radius:4px;
  background:#1c1c1e;
  color:var(--white);
  font-family:var(--font-base);
  font-size:clamp(11px,1.1vw,14px);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.3;
}

.target-card__title{
  margin:clamp(12px,calc(var(--pw) * .016),22px) 0 0;
  color:var(--ink);
  font-size:clamp(13px,1.35vw,17px);
  font-weight:900;
  letter-spacing:.03em;
  line-height:1.4;
  text-align:center;
}

.target-card__text{
  margin:clamp(5px,.7vw,9px) 0 0;
  color:#6b7480;
  font-family:var(--font-base);
  font-size:clamp(10.5px,1.05vw,13px);
  font-weight:500;
  line-height:1.6;
  text-align:center;
}

.strategy-placeholder{
  margin-top:28px;
  min-height:320px;
  padding:24px;
  flex-direction:column;
  text-align:center;
}

.ph-title{
  font-size:16px;
  color:var(--ink);
  font-weight:900;
}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(9px,1.2vw,16px);
  max-width:var(--content-w);
  margin:clamp(24px,calc(var(--pw) * .032),44px) auto 0;
  text-align:left;
}

.plan-grid__defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.plan-card{
  --plan-color:var(--blue);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:clamp(8px,1vw,12px);
  background:var(--white);
  box-shadow:0 2px 12px rgba(29,36,48,.07);
}

.plan-card--light{ --plan-color:var(--pink); }
.plan-card--standard{ --plan-color:var(--yellow); }
.plan-card--full{ --plan-color:var(--blue); }

.plan-card__name{
  margin:0;
  padding:clamp(9px,1.1vw,14px) 12px;
  background:var(--plan-color);
  color:var(--white);
  font-size:clamp(14px,1.5vw,19px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.3;
  text-align:center;
}

.plan-card__label{
  margin:0;
  color:#8b939c;
  font-family:var(--font-base);
  font-size:clamp(9px,.85vw,11px);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.3;
  text-align:center;
}

.plan-card__fee{
  padding:clamp(10px,1.3vw,16px) 12px clamp(9px,1.2vw,15px);
}

.plan-card__price{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  margin:clamp(3px,.4vw,6px) 0 0;
  color:var(--ink);
  font-family:var(--font-base);
  line-height:1.1;
}

.plan-card__price strong{
  font-size:clamp(22px,2.7vw,30px);
  font-weight:900;
  letter-spacing:-.01em;
}

.plan-card__price span{
  font-size:clamp(10px,1vw,12px);
  font-weight:900;
}

/* カード幅いっぱいにせず両サイドを空ける。左右の余白は .plan-spec の
   padding と同値にして、灰色枠の端が下の区切り線と縦に揃うようにする。 */
.plan-card__ad{
  margin:0 clamp(8px,1vw,13px);
  padding:clamp(8px,1vw,13px) 12px clamp(9px,1.1vw,14px);
  background:#f4f4f4;
}

.plan-card__ad-value{
  margin:clamp(2px,.3vw,4px) 0 0;
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(10.5px,1.1vw,14px);
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.3;
  text-align:center;
}

.plan-spec{
  flex:1 1 auto;
  margin:0;
  padding:0 clamp(8px,1vw,13px);
  list-style:none;
}

.plan-spec li{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:clamp(5px,.7vw,9px);
  padding:clamp(7px,.95vw,12px) 0;
}

.plan-spec li + li{
  border-top:1px solid #edeff1;
}

/* アイコンは currentColor で描かれているので、色はここだけで切り替わる。 */
.plan-spec__icon{
  display:block;
  width:clamp(13px,1.4vw,18px);
  color:var(--ink);
}

.plan-spec__icon svg{
  display:block;
  width:100%;
  height:auto;
}

.plan-spec__label{
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(9px,.95vw,12px);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.35;
}

.plan-spec__value{
  color:#5b6672;
  font-family:var(--font-base);
  font-size:clamp(8.5px,.85vw,11px);
  font-weight:600;
  line-height:1.35;
  text-align:right;
  white-space:nowrap;
}

.plan-card__foot{
  padding:clamp(9px,1.2vw,16px) 12px clamp(11px,1.4vw,18px);
  background:var(--plan-color);
  text-align:center;
}

/* ピル型。border-radius:999px は高さがいくら変わっても常に半円の端になる。 */
.plan-card__foot-tag{
  display:inline-block;
  padding:clamp(3px,.4vw,5px) clamp(10px,1.1vw,15px);
  border-radius:999px;
  background:var(--white);
  color:var(--plan-color);
  font-family:var(--font-base);
  font-size:clamp(9px,.85vw,11px);
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.4;
}

.plan-card__foot-text{
  margin:clamp(5px,.7vw,9px) 0 0;
  color:var(--white);
  font-family:var(--font-base);
  font-size:clamp(12px,1.35vw,16.5px);
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.55;
}

.plan-note{
  max-width:var(--content-w);
  margin:clamp(10px,1.3vw,16px) auto 0;
  padding:clamp(8px,1vw,13px) clamp(10px,1.2vw,16px);
  border:1px solid #dfe4e8;
  border-radius:4px;
  background:var(--white);
  color:#8b939c;
  font-family:var(--font-base);
  font-size:clamp(8.5px,.78vw,10px);
  font-weight:500;
  line-height:1.7;
  text-align:left;
}

.note{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-top:14px;
}

.media-section{
  background:var(--section-gray);
  /* 吹き出しなしなので、lp-section の padding-bottom:0 をここで戻す。 */
  padding-bottom:clamp(48px,6vw,72px);
}

.media-block + .media-block{
  position:relative;
  margin-top:clamp(44px,calc(var(--pw) * .054),78px);
  padding-top:clamp(44px,calc(var(--pw) * .054),78px);
}

/* コラムと note の区切り。厚みと濃度を上げると横一線の滲みとして目立って
   しまうので、細く薄いグラデーションに留める。 */
.media-block + .media-block::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(-1 * var(--section-pad-x));
  right:calc(-1 * var(--section-pad-x));
  height:clamp(9px,1vw,14px);
  transform:translateY(-50%);
  background:linear-gradient(180deg,
    rgba(29,36,48,0) 0%,
    rgba(29,36,48,.03) 48%,
    rgba(29,36,48,.03) 52%,
    rgba(29,36,48,0) 100%);
  pointer-events:none;
}

/* section 要素なので section{padding:58px 56px} を拾ってしまい、ul を直に置く
   note 側より余白が広くなる。padding を落として note と同じ間隔に揃える。 */
.media-section .content{
  margin-top:28px;
  padding:0;
}

.postlist,
.notelist{
  list-style:none;
  margin:0;
  padding:0;
}

.postlist{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.postlist--3col{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.post-carousel{
  width:100%;
  overflow:hidden;
  padding:8px 0 14px;
}

.post-carousel .post-carousel__track{
  display:flex;
  flex-direction:row;
  width:max-content;
  gap:0;
  margin:0;
  animation:post-carousel-scroll 100s linear infinite;
  will-change:transform;
}

.post-carousel .post-carousel__track .postcard{
  flex:0 0 310px;
  width:310px;
  height:200px;
  margin-right:18px;
}

.post-carousel:hover .post-carousel__track,
.post-carousel:focus-within .post-carousel__track{
  animation-play-state:paused;
}

@keyframes post-carousel-scroll{
  to{ transform:translateX(-50%); }
}

.postcard{
  border:1px solid #dedede;
  border-radius:14px;
  background:var(--white);
  box-shadow:0 8px 22px rgba(29,36,48,.04);
  height:100%;
}

.postcard--no-thumb .postbody{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:22px 20px;
}

.postbody .meta{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
  min-height:56px;
  margin:0 0 12px;
  flex-shrink:0;
}

.pill{
  display:inline-block;
  padding:4px 10px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--pink-soft);
  color:var(--pink);
  font-size:11px;
  font-weight:800;
  line-height:1.4;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.pill:hover{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(245,109,141,.28);
}

.posttitle{
  margin:0;
  font-size:15px;
  font-weight:900;
  line-height:1.65;
  text-align:left;
}

.posttitle a{
  color:var(--ink);
}

.posttitle a:hover{
  color:var(--deep-green);
}

.notelist{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px;
}

.notecard{
  border:1px solid #dedede;
  border-radius:14px;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 8px 22px rgba(29,36,48,.04);
}

.notethumb{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#eee;
}

.notethumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.notetitle{
  margin:0;
  padding:16px 16px 18px;
  font-size:15px;
  font-weight:900;
  line-height:1.65;
  text-align:left;
}

.notetitle a{
  color:var(--ink);
}

.notetitle a:hover{
  color:var(--deep-green);
}

.content-more{
  margin:22px 0 0;
  text-align:center;
}

.content-more a{
  display:inline-block;
  padding:10px 22px;
  border:2px solid var(--blue);
  border-radius:999px;
  color:var(--deep-green);
  font-size:13px;
  font-weight:900;
}

.content-more a:hover{
  background:var(--blue);
}

.cta{
  background:var(--section-teal);
  color:var(--ink);
  padding:clamp(26px,calc(var(--pw) * .032),48px) var(--section-pad-x);
}

.cta-panel{
  max-width:var(--content-w);
  margin:0 auto;
  padding:clamp(28px,calc(var(--pw) * .036),54px) clamp(22px,calc(var(--pw) * .034),56px) clamp(26px,calc(var(--pw) * .034),50px);
  border-radius:clamp(24px,calc(var(--pw) * .034),46px);
  background:var(--white);
}

.cta-panel__main{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 36%;
  align-items:center;
  gap:clamp(18px,calc(var(--pw) * .028),44px);
}

/* 上限の25pxは 1200px 時の 2.1vw（25.2px）に合わせてある。1190px で上限に
   達するので、それ以上広い画面でも値は動かない。 */
.cta-kicker{
  margin:0;
  color:var(--ink);
  font-family:var(--font-base);
  font-size:clamp(17px,2.1vw,25px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.5;
}

.cta h2{
  margin:clamp(8px,1.1vw,15px) 0 0;
  padding-top:0;
  color:var(--ink);
  font-size:clamp(30px,3.8vw,46px);
  letter-spacing:.03em;
  line-height:1.45;
  text-align:left;
}

.cta h2::before,
.cta h2::after{
  display:none;
}

.cta .lead{
  margin:clamp(6px,.9vw,12px) 0 0;
  color:#5b6672;
  font-family:var(--font-base);
  font-size:clamp(10.5px,1.05vw,14px);
  font-weight:500;
  line-height:1.75;
  text-align:left;
}

.cta-cover{
  justify-self:end;
  width:100%;
  text-decoration:none;
}

.cta-cover img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #eceff1;
  border-radius:3px;
  box-shadow:0 9px 24px rgba(29,36,48,.17);
  transition:transform .2s ease, box-shadow .2s ease;
}

.cta-cover:hover img,
.cta-cover:focus-visible img{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(29,36,48,.22);
}

.cta-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1vw,14px);
  width:min(100%, 410px);
  margin:clamp(22px,calc(var(--pw) * .03),44px) auto 0;
  padding:clamp(12px,calc(var(--pw) * .0155),22px) clamp(20px,calc(var(--pw) * .024),34px);
  border-radius:999px;
  background:#f0739b;
  color:var(--white);
  font-size:clamp(14px,calc(var(--pw) * .016),23px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.3;
  box-shadow:0 10px 24px rgba(240,115,155,.32);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cta-button svg{
  flex:0 0 auto;
  width:clamp(15px,calc(var(--pw) * .016),23px);
  height:auto;
}

.cta-button:hover{
  transform:translateY(-3px);
  background:#e85d8b;
  box-shadow:0 16px 32px rgba(240,115,155,.42);
}

/* 白の光彩。border:3px solid #fff を外側へ柔らかく延長する扱いで、写真や
   水色セクションの上に来たときにボタンを背景から浮かせる。オフセット 0 の
   影を半径違いで重ね、近いほど濃く遠いほど薄くして縁が出ないようにする。 */
.scroll-top,
.floating-cta{
  --cta-glow:
    0 0 8px rgba(255,255,255,.6),
    0 0 18px rgba(255,255,255,.4),
    0 0 34px rgba(255,255,255,.22);
  --cta-glow-hover:
    0 0 11px rgba(255,255,255,.75),
    0 0 23px rgba(255,255,255,.5),
    0 0 42px rgba(255,255,255,.3);
}

.scroll-top{
  position:fixed;
  right:24px;
  bottom:32px;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  box-shadow:var(--cta-glow);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease, box-shadow .2s ease;
}

.scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top:hover{
  background:#3bc4c2;
  transform:translateY(-3px);
  box-shadow:var(--cta-glow-hover);
}

.scroll-top.is-visible:hover{
  transform:translateY(-3px);
}

.floating-cta{
  position:fixed;
  right:90px;
  bottom:32px;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:54px;
  padding:0 22px;
  border:3px solid #fff;
  border-radius:16px;
  background:#f0739b;
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  box-shadow:var(--cta-glow);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease, box-shadow .2s ease, background .2s ease;
}

.floating-cta.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.floating-cta-text{
  display:flex;
  align-items:center;
  gap:9px;
}

.floating-cta-free{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:26px;
  padding:0 7px;
  border-radius:7px;
  background:#fff;
  color:#f0739b;
  font-size:13px;
  font-weight:900;
}

.floating-cta svg{
  flex:0 0 auto;
}

.floating-cta:hover{
  transform:translateY(-3px);
  background:#e85d8b;
  box-shadow:var(--cta-glow-hover);
}

.container{
  width:100%;
  margin:0 auto;
  padding-left:56px;
  padding-right:56px;
}

.footer{
  padding:0;
  margin:0;
  background:var(--white);
  text-align:left;
}

.footer__logos{
  padding:48px 0 42px;
  background:var(--white);
}

.footer__logos-inner{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(20px,calc(var(--pw) * .03),44px);
}

.footer__logo-item{
  display:flex;
  flex:0 1 300px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /* ロゴを大きくしたぶん上下の余白を削り、枠の高さは元のまま保つ。 */
  padding:14px 20px 12px;
  border:1px solid #dfe4ea;
  border-radius:14px;
  background:var(--white);
  box-shadow:0 2px 10px rgba(19,37,57,.06);
  text-align:center;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.footer__logo-item:hover{
  border-color:#c3ccd6;
  box-shadow:0 6px 18px rgba(19,37,57,.1);
}

.footer__logo-item a{
  display:inline-block;
}

.footer__logo-item img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:74px;
  margin:0 auto;
}

.footer__logo-item:first-child img{
  max-height:80px;
}

.footer__logo-text{
  margin:14px 0 0;
  font-size:12px;
  font-weight:700;
  color:#333;
  line-height:1.5;
}

.footer__copyright{
  padding:22px 0 28px;
  background:#000;
  text-align:center;
}

.footer__copyright small{
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:1.6;
}

@media (max-width:820px){
  /* セクション上下余白は PC と同じ2変数の体系をスマホでも使う。
     .target-section などはクラス指定で padding-top を持ち、詳細度で
     section{} に勝つため、ここで数値を直書きすると一部だけ効かず
     セクションごとに値がバラつく。変数側を差し替えて全体を揃える。 */
  :root{
    --nav-pad-y:12px;
    --nav-pad-x:20px;
    --nav-logo-h:40px;
    --section-pad-y:44px;
    --section-pad-y-tail:12px;
  }
  .page{ margin:0; border-radius:0; }
  section{ --section-pad-x:22px; padding:var(--section-pad-y) var(--section-pad-x); }
  /* ロゴとボタンだけの1行に固定する。メニューを縦積みすると
     ヘッダーが200px近くなり、固定ヘッダーが本文に被る。 */
  .nav{
    gap:12px;
    align-items:center;
    flex-direction:row;
  }
  .logo{ gap:10px; }
  .nav-toggle{ display:block; }
  /* 開くまで高さを持たせない。visibility も切らないとリンクに
     タブで入れてしまう。 */
  .menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 20px;
    border-bottom:1px solid var(--line);
    background:var(--white);
    box-shadow:0 14px 24px rgba(15,22,32,.08);
    opacity:0;
    visibility:hidden;
    max-height:0;
    overflow:hidden;
    transition:opacity .25s ease, max-height .3s ease, visibility .25s ease;
  }
  .nav.is-open .menu{
    opacity:1;
    visibility:visible;
    max-height:calc(100svh - var(--header-height));
    padding:6px 20px 18px;
    overflow-y:auto;
  }
  .menu a:not(.menu-cta){
    padding:14px 2px;
    border-bottom:1px solid var(--line);
    font-size:15px;
  }
  .menu-cta{
    margin:16px 0 0;
    min-height:48px;
  }
  /* スマホ専用キービジュアル。hero_sp.png は 1000x500（2:1）。 */
  .hero{
    --section-pad-x:24px;
    --hero-art-h:calc(100vw / 2);
    position:relative;
    display:block;
    height:auto;
    min-height:var(--hero-art-h);
    padding:0;
    overflow:visible;
    background-color:#f8f8f8;
    background-image:url("assets/hero_sp.png");
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:100% auto;
  }
  .hero-copy{
    position:relative;
    z-index:2;
    /* hero_sp.png の人物は右約45%。左の空きにコピーを閉じ込める。 */
    width:min(52%, 210px);
    max-width:52%;
    margin:0;
    padding:24px 0 16px var(--section-pad-x);
  }
  /* スマホFVはキービジュアル上にコピーだけ。CTAはフローティング／下部へ。 */
  .hero-cta-block{
    display:none;
  }
  /* ここから3つの font-size は、PC 側と違って --hero-condense で割っていない。
     スマホのコピー欄は人物を避けるため実質171px（375px端末）しかなく、
     8%拡大すると「Bellbiz HR」が2行に折れてFVが崩れる余地がある。
     PC と揃えて割り戻す場合は、実機で1行に収まることを確認してから行う。 */
  .hero-kicker{
    font-size:clamp(13px, 3.6vw, 16px);
  }
  /* 基底の nowrap を解除する。解除しないと 50px の見出しが 390px 幅を
     はみ出し、.page の overflow-x:hidden で右側が見切れる。 */
  .hero-copy h1{
    white-space:normal;
    font-size:clamp(26px, 7.2vw, 34px);
  }
  /* 狭い左カラムでは詰めすぎると読みにくいので、PC より字間を残す。 */
  .hero-copy .hero-sub{
    --hero-sub-tracking:.04em;
    margin-top:8px;
    font-size:12px;
    line-height:1.65;
  }
  /* 固定改行だと狭い左カラムで人物側にはみ出すので、幅に任せて折り返す。 */
  .hero-copy .hero-sub br{
    display:none;
  }
  /* 「特に、こんな企業に選ばれています」16文字が1行に収まる値。22px だと
     必要 366px に対し使える幅が 358px で、最後の「す」だけが落ちる。 */
  .solution-section h2,
  .service-section h2,
  .target-section h2,
  .media-section h2{
    font-size:clamp(19px, 5.2vw, 26px);
  }
  .lead{ font-size:13.5px; }
  /* 日本語を文節で折り返す。「自社メディ／ア採用」のような語中での分断を
     防ぐ。Chrome 系のみ有効で、非対応ブラウザは既定の折り返しに戻る。 */
  h2,
  .lead,
  .problem-same__title,
  .result-heading{
    word-break:auto-phrase;
  }
  .g3,.g4{ grid-template-columns:1fr; }
  .plan-grid{
    grid-template-columns:1fr;
    max-width:400px;
    gap:16px;
    margin-top:26px;
  }
  .target-grid{
    grid-template-columns:1fr;
    max-width:400px;
    gap:26px;
    margin-top:26px;
  }
  .target-card{
    --shape-shift:14px;
  }
  .target-card__title{ font-size:17px; }
  .target-card__text{ font-size:13px; }
  .cta{
    padding:24px var(--section-pad-x);
  }
  .cta-panel{
    padding:26px 20px 24px;
    border-radius:24px;
  }
  .cta-panel__main{
    grid-template-columns:1fr;
    gap:20px;
  }
  .cta-cover{
    justify-self:center;
    max-width:320px;
  }
  /* 「まずは資料をダウンロード」12文字が1行に収まる値。26px だと
     必要 321px に対し使える幅が 318px で、最後の「ド」だけが落ちる。 */
  .cta h2{ font-size:clamp(24px, 6.4vw, 34px); }
  .cta-kicker{ font-size:clamp(15px, 4.3vw, 21px); }
  .cta .lead{ font-size:12.5px; }
  .cta-button{
    width:100%;
    margin-top:22px;
    font-size:15px;
  }
  .plan-spec__label{ font-size:13px; }
  .plan-spec__value{ font-size:12px; }
  .plan-note{
    max-width:400px;
    font-size:11px;
  }
  .problem-section h2{ font-size:20px; }
  .problem-section .card{
    min-height:auto;
    padding:28px 22px;
  }
  .problem-board__head{
    padding:36px 16px 16px;
  }
  /* 242px の円を3つ縦に積むと約960px 使う。イラストを左・文言を右の
     横並びにして、1行あたりの高さを絵のサイズまで詰める。 */
  .problem-scenes{
    grid-template-columns:1fr;
    gap:0;
    padding-bottom:24px;
  }
  .problem-scene{
    flex-direction:row;
    align-items:center;
    gap:18px;
    padding:16px 0;
    text-align:left;
  }
  .problem-scene + .problem-scene{
    border-top:1px solid rgba(29,36,48,.12);
  }
  .problem-scene__icon{
    --icon-size:min(110px, 30vw);
    flex:0 0 auto;
  }
  .problem-scene__caption{
    font-size:15px;
  }
  .problem-same{
    padding:16px 0 28px;
  }
  .problem-same__frame{
    margin-top:0;
    padding:0 14px;
  }
  .problem-same__content{
    padding:40px 16px 32px;
  }
  .problem-same__title{
    font-size:20px;
  }
  .problem-same__lead{
    margin-top:12px;
    font-size:12px;
    line-height:1.75;
  }
  .problem-same__lead br{
    display:none;
  }
  .problem-same__flow{
    margin-top:28px;
  }
  .problem-same__closing{
    margin-top:24px;
    font-size:16px;
  }
  .story-group > .story-step--problem{
    padding:0;
  }
  .result-layout{
    grid-template-columns:1fr;
  }
  .result-stats-panel{
    padding:18px;
  }
  .result-stats-panel .grid{
    grid-template-columns:1fr;
  }
  .result-story{
    padding:24px 20px;
  }
  .section-tint h2{
    font-size:20px;
    text-align:center;
  }
  .result-section{
    padding:0;
  }
  .story-step{
    padding:44px 22px;
  }
  .story-step--approach{
    padding:0;
  }
  .result-story-visual{
    width:100%;
    max-width:none;
    padding:0;
  }
  .result-story-visual img{
    aspect-ratio:1536 / 1024;
  }
  .story-step--result{
    padding:32px 22px 28px;
  }
  .story-group::after{
    height:110px;
  }
  .result-heading{
    margin-top:0;
    width:100%;
    min-height:0;
    padding-bottom:0;
    font-size:21px;
  }
  .solution-steps{
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  .solution-card{
    max-width:100%;
    width:100%;
    min-height:auto;
  }
  .solution-card-body{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .solution-card-text{
    width:100%;
  }
  .solution-card .t,
  .solution-card p{
    text-align:center;
  }
  .solution-arrow{
    transform:rotate(90deg);
    padding:0;
  }
  .solution-layout{
    grid-template-columns:1fr;
    gap:32px;
    margin-top:30px;
  }
  .solution-flow{
    max-width:430px;
    width:100%;
    margin:0 auto;
  }
  .solution-step{
    grid-template-columns:84px minmax(0, 1fr);
    column-gap:14px;
    padding:14px 0;
  }
  .solution-step__title{
    font-size:15px;
  }
  .solution-step__no{
    font-size:11px;
  }
  .solution-step__note{
    font-size:12px;
  }
  .roadmap-trigger{
    margin-top:28px;
    max-width:400px;
    gap:14px;
    padding:12px 18px;
    font-size:14px;
  }
  .roadmap-trigger__preview{
    flex-basis:74px;
    width:74px;
  }
  /* 図を極力大きく見せたいので、SPではほぼ全画面に広げて内側の余白も削る。 */
  .roadmap-modal{
    width:calc(100% - 8px);
    max-height:96vh;
    border-radius:12px;
  }
  .roadmap-modal__content{
    padding:14px 8px 12px;
  }
  .roadmap-modal__title{
    margin:0 40px 10px 0;
    font-size:15px;
  }
  .roadmap-modal__hint{
    margin:0 0 10px;
    font-size:11px;
  }
  .roadmap-modal__close{
    top:10px;
    right:10px;
  }
  .roadmap-pin{
    min-width:44px;
    min-height:18px;
  }
  .roadmap-notes{
    margin-top:14px;
  }
  .operation-section{
    padding:20px var(--section-pad-x) 21px;
  }
  .operation-panel{
    margin-bottom:22px;
    padding:30px 18px 32px;
    border-radius:20px;
  }
  .operation-lead{
    text-align:left;
  }
  .operation-lead br{
    display:none;
  }
  .operation-cycle{
    --plant-w:52px;
    --plant-h:62px;
    margin-top:22px;
  }
  .operation-cycle__list{
    position:relative;
    grid-template-columns:1fr;
    padding-top:0;
  }
  .operation-cycle__list::before,
  .operation-cycle__loop,
  .operation-cycle__item:not(:last-child)::after{
    display:none;
  }
  /* 「木・本文」の2列。木は行ごとに育っていくので、縦並びでも
     上から下へ成長が読める。 */
  .operation-cycle__item{
    position:relative;
    grid-template-columns:var(--plant-w) minmax(0, 1fr);
    grid-template-rows:auto;
    column-gap:10px;
    align-items:center;
    padding:14px 0;
  }
  .operation-cycle__item + .operation-cycle__item{
    border-top:1px solid var(--cycle-line);
  }
  /* 絵は枠の下端基準なので、height を 100% にすると行の高さぶん枠が伸びて
     株元が行の底まで落ちる。固定値で持たせて行の縦中央に置く。
     display は基底の flex（下端寄せ）をそのまま使う。 */
  .operation-cycle__item > .operation-cycle__plant{
    grid-row:1;
    grid-column:1;
    width:var(--plant-w);
    height:var(--plant-h);
  }
  .operation-cycle__body{
    grid-row:1;
    grid-column:2;
    margin-top:0;
    padding-top:0;
    border-top:0;
    text-align:left;
  }
  .operation-cycle__body::before{
    display:none;
  }
  .operation-cycle__desc{
    font-size:12px;
  }
  .operation-cycle__desc br{
    display:none;
  }
  .operation-card{
    min-height:auto;
    padding:24px 20px;
  }
  .operation-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .operation-copy{
    text-align:center;
  }
  .operation-copy h2{
    font-size:22px;
    text-align:center;
  }
  .operation-eyebrow{
    margin-left:auto;
    margin-right:auto;
  }
  .operation-intro{
    font-size:14px;
    text-align:center;
  }
  .operation-steps{
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
  }
  .operation-visual{
    min-height:250px;
    max-width:460px;
    width:100%;
    margin:0 auto;
  }
  .operation-message-main{
    font-size:16px;
  }
  .operation-message-sub{
    font-size:14px;
  }
  .container{
    padding-left:22px;
    padding-right:22px;
  }
  .footer__logos{
    padding:36px 0 32px;
  }
  /* 2枠を横並びのまま画面幅で等分する。flex-basis を 0 にしないと
     PC の 300px が効いて2枠で 600px を要求し、折り返してしまう。 */
  .footer__logos-inner{
    align-items:stretch;
    gap:12px;
  }
  .footer__logo-item{
    flex:1 1 0;
    min-width:0;
    padding:12px 10px 10px;
  }
  /* 枠が半分の幅になるので、ロゴも収まる高さまで落とす。横長の Bellbiz は
     max-width:100% 側が先に効いて、高さはこれより低くなる。 */
  .footer__logo-item img{
    max-height:44px;
  }
  .footer__logo-item:first-child img{
    max-height:48px;
  }
  .footer__logo-text{
    margin-top:8px;
    font-size:11px;
  }
  /* 3枚を縦に積むと note だけで画面2〜3個分の高さになる。横スワイプの
     カルーセルにして1画面に収める。カード幅を80%にして次の1枚を覗かせ、
     横に送れることが分かるようにする。上下の padding はカードの影が
     スクロール枠で切られるのを防ぐぶん。 */
  .notelist{
    display:flex;
    gap:12px;
    margin-top:18px;
    padding:6px 0 14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
  }
  .notecard{
    flex:0 0 80%;
    scroll-snap-align:start;
  }
  .postlist--3col{
    grid-template-columns:1fr;
  }
  .post-carousel .post-carousel__track .postcard{
    flex-basis:260px;
    width:260px;
    height:190px;
    margin-right:14px;
  }
  .posttitle{
    font-size:16px;
  }
  .scroll-top{
    right:16px;
    bottom:20px;
    width:46px;
    height:46px;
  }
  .floating-cta{
    right:78px;
    bottom:20px;
    min-height:46px;
    gap:8px;
    padding:0 15px;
    border-radius:13px;
    font-size:13px;
  }
  .floating-cta-text{ gap:7px; }
  .floating-cta-free{
    min-width:36px;
    min-height:21px;
    border-radius:6px;
    font-size:11px;
  }
  .floating-cta svg{
    width:17px;
    height:17px;
  }
  .floating-cta.is-visible:hover{
    transform:translateY(-3px);
  }
}

/* スマホ幅。820px のブロックはタブレット寄りの値なので、ここでは
   固定幅で collapse しきれない箇所と、左右の余白を詰める。 */
@media (max-width:600px){
  :root{
    --nav-pad-y:10px;
    --nav-pad-x:16px;
    /* ロゴ2枚は約3.2:1。40px だと 2枚で 256px になりボタンと競合する。
       ここではメニューボタン(44px)の方が高いのでヘッダー高は変わらない。 */
    --nav-logo-h:31px;
  }
  section{ --section-pad-x:16px; padding:36px var(--section-pad-x); }
  .logo{ gap:8px; }
  .menu{ padding:0 16px; }
  .nav.is-open .menu{ padding:6px 16px 16px; }
  .hero{ --section-pad-x:18px; }
  .container{ padding-left:16px; padding-right:16px; }

  /* 縦積み後も固定幅が残っていて、狭い幅で中身が溢れるもの。 */
  .plan-grid,
  .target-grid,
  .plan-note,
  .roadmap-trigger{ max-width:none; }
  .operation-steps{ max-width:none; }

  /* 木の列を細くして本文に幅を回す。 */
  .operation-cycle{ --plant-w:44px; --plant-h:52px; }
  .operation-cycle__item{
    grid-template-columns:var(--plant-w) minmax(0, 1fr);
    column-gap:8px;
  }
  .solution-step{
    grid-template-columns:64px minmax(0, 1fr);
    column-gap:10px;
  }

  /* 縦に積むと本文を2段で覆うので横に並べる。CTA は約200px、
     ページトップは46px で 390px 幅にも収まる。 */
  .scroll-top{ right:14px; bottom:16px; }
  .floating-cta{ right:72px; bottom:16px; }
}

/* ==========================================================================
   動きを抑える設定（OS の「視差効果を減らす」）
   --------------------------------------------------------------------------
   スクロール連動の演出をすべて止め、完成した状態を最初から見せる。
   打ち消す側は元の指定より後ろになければ効かないので、ファイル末尾に集約する。
   アニメーションを足したら、必ずここにも1行足すこと。

   .is-visible 付きの指定と詳細度が並ぶよう、素の状態と .is-visible の両方を
   セレクタに書いている。片方だけだと詳細度で負けて演出が復活する。
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero-copy > *,
  .hero-copy .hero-sub,
  .hero-cta-block > *,
  h2,
  h2.is-visible,
  .problem-same__title,
  .problem-same__title.is-visible,
  .result-heading,
  .result-heading.is-visible,
  .problem-scene,
  .problem-scenes.is-visible .problem-scene,
  .operation-cycle__plant,
  .operation-cycle.is-visible .operation-cycle__plant,
  .result-stack__shapes use,
  .result-stack__shapes.is-visible use,
  .result-stats-panel .stat,
  .result-stats-panel.is-visible .stat,
  .result-chart-svg .bar-group,
  .result-chart-svg.is-visible .bar-group,
  .result-chart-svg .line-point,
  .result-chart-svg.is-visible .line-point,
  .result-chart-svg .bar-label,
  .result-chart-svg.is-visible .bar-label,
  .result-chart-svg .year-label,
  .result-chart-svg.is-visible .year-label,
  .result-chart-svg .chart-annotation,
  .result-chart-svg.is-visible .chart-annotation{
    opacity:1;
    transform:none;
    animation:none;
  }

  /* 折れ線は線を描く演出なので、止めるだけだと引かれないまま残る。
     破線のずらしを 0 にして描画済みの状態にする。 */
  .result-chart-svg .line-segment,
  .result-chart-svg.is-visible .line-segment{
    opacity:1;
    stroke-dashoffset:0;
    animation:none;
  }

  /* 背景写真は元から薄い。1 に戻すと本文が読めなくなるので濃度は保つ。 */
  .result-section__photo img,
  .result-section__photo.is-visible img{
    opacity:.26;
    transform:none;
    animation:none;
  }

  /* 自動で流れるカルーセルは止めて、手でスクロールできるようにする。 */
  .post-carousel .post-carousel__track{
    animation:none;
    transform:none;
  }

  .post-carousel{
    overflow-x:auto;
  }

  /* ロードマップは拡大とポップインをやめ、表示・非表示だけ切り替える。 */
  .roadmap-figure__image,
  .roadmap-pop{
    transition:none;
  }

  .roadmap-pop,
  .roadmap-pop.is-visible{
    transform:translate(-50%, calc(-100% - 8px));
  }
}