:root{
  --pink:#f56d8d;
  --pink-soft:rgba(245,109,141,.12);
  --yellow:#ffcf2a;
  --blue:#4ad2d0;
  --periwinkle:#90b4ff;
  --deep-green:#123f3d;
  --ink:#1d2430;
  --text:#111;
  --lead:#4b4b4b;
  --label:#5a636c;
  /* 見出しやモーダルで使う濃紺。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 から左右の余白を引いた値を計算で出す。 */
  /* 1200px以上は今までと同じ1128px。それより狭い窓では、固定の1200pxを
     引き算せず、実際のページ幅から余白を引く。 */
  --content-w:calc(var(--pw) - var(--gutter) * 2);
  --panel-radius:clamp(28px,calc(var(--pw) * .04),48px);
  --font-base:"Noto Sans JP","Noto Sans",sans-serif;
  --font-display:"Noto Sans JP","Noto Sans",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 のまま。 */
  --section-pad-top:clamp(24px,calc(var(--pw) * .028),40px);
  --section-pad-y-tail:clamp(6px,calc(var(--pw) * .008),12px);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-height);
  /* 1200pxの柱の外側。body の背景を画面全体へ広げない。
     100vw はスクロールバー幅を含むので、切らないと横に数pxはみ出す。 */
  overflow-x:clip;
  background:#fff;
}

/* 1200pxの柱より広い画面だけ、左右の余白をグレーにする。
   1200px以下は body が画面幅いっぱいなので、この色は見えない。 */
@media (min-width:1201px){
  html{ background:#d9dee2; }
}


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

/* ブラウザ標準の見出し・強調は太い。太くする箇所は、その部品の指定で 900 にする。 */
h1,
h3,
h4,
h5,
h6,
strong,
b,
button{
  font-weight:400;
}

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-top) var(--section-pad-x) var(--section-pad-y);
  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;
}

.section-tail__fill{
  fill:currentColor;
}

/* スマホでは画面幅に伸びるしっぽを隠し、その悩みと同じ固定サイズのしっぽを使う。 */
.section-tail__shape--flat,
.section-tail__point{
  display:none;
}

/* 角丸＋曲線のしっぽを持つ形。左右はしっぽの位置(74.7% / 26.1%)だけが違う。
   viewBox の縦横比を aspect-ratio で固定し、幅に応じて高さを決める。
   clamp の下限があると狭い画面で比率が崩れ PC と別デザインになる。 */
.section-tail.section-tail--bubble-right,
.section-tail.section-tail--bubble-result,
.section-tail.section-tail--bubble-solution{
  /* 1200px幅で半径100pxの円弧。高さまで指定しないと 80px 比率に潰れて角度が変わらない。 */
  aspect-ratio:1200 / 150;
  height:calc(var(--pw) * .125);
}

.problem-board{ --section-tail-next:var(--section-teal); }
.result-section{ --section-tail-next:var(--white); }
.solution-section{ --section-tail-next:var(--section-teal); }
.problem-board > .section-tail,
.solution-section > .section-tail{
  position:relative;
  z-index:2;
  opacity:0;
  filter:blur(12px);
}

@keyframes problemBubbleIn{
  from{
    opacity:0;
    filter:blur(12px);
  }
  to{
    opacity:1;
    filter:none;
  }
}

@keyframes problemPointIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.problem-board > .section-tail.is-visible,
.solution-section > .section-tail.is-visible,
.problem-same.is-visible{
  animation:problemBubbleIn 1.15s cubic-bezier(.22,1,.36,1) .3s both;
}

.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;
  flex:0 1 auto;
  min-width:0;
  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:400;
  color:var(--deep-green);
  letter-spacing:.02em;
}

.menu{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-end;
  /* 1200pxでは 22px / 14px。窓を狭めても同じ比率で縮み、1100px以下は
     下のメディアクエリがさらに詰める。 */
  gap:clamp(8px, calc(var(--pw) * .01833), 22px);
  align-items:center;
  font-size:clamp(12px, calc(var(--pw) * .01167), 14px);
  font-weight:400;
  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);
  font-weight:900;
  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:400;
  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;
  }
}

/* ファーストビューは herobk.jpg の縦横比に合わせる。余白を足すと背景の
   文字と人物の位置がずれるので、左右上下は 0。 */
.hero{
  display:block;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:#fff;
}

.hero-stage{
  position:relative;
  /* 人物の下端をグレー帯の下に潜らせる。帯より外には .hero の overflow で切る。 */
  overflow:visible;
  line-height:0;
  background:#fff;
}

.hero-stage picture{
  display:block;
  line-height:0;
}

.hero-bg{
  display:block;
  width:100%;
  height:auto;
}

/* 見出しは背景画像側にある。ここは支援技術向け。 */
.hero-title{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* 高さだけ背景に対する比率。幅は切り抜きの比率のまま。
   はみ出した下端はグレー帯が覆い、上端は .hero で切れる。 */
.hero-person{
  position:absolute;
  display:block;
  width:auto;
  max-width:none;
  pointer-events:none;
  user-select:none;
}

/* 上端は背景の天辺。下は帯に少しかかる。 */
.hero-person--main{
  z-index:1;
  top:calc(-3% - min(3.333vw, 40px));
  left:37%;
  height:108%;
}

/* 頭の少し上が背景の天辺で切れ、右上の角に置く。 */
.hero-person--top{
  z-index:2;
  top:-20%;
  right:calc(-2% + min(2.5vw, 30px));
  height:68%;
}

/* 右の葉先が背景の右端。第一ボタンが背景の下端に来るよう、下を帯に潜らせる。 */
.hero-person--sub{
  z-index:2;
  right:calc(-5% - min(0.8333vw, 10px));
  bottom:calc(-32% + min(2.5vw, 30px));
  height:72%;
}

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

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

@keyframes heroCtaIn{
  from{ opacity:0; translate:0 8px; }
  to{ opacity:1; translate:0 0; }
}

@keyframes heroBarIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

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

.hero-cta{
  position:absolute;
  z-index:6;
  left:6.7%;
  top:58%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:calc(var(--pw) * .26);
  min-height:calc(var(--pw) * .052);
  padding:.5em 1.55em .5em .5em;
  border-radius:16px;
  background:#3dcec8;
  color:#fff;
  font-size:clamp(15px, calc(var(--pw) * .017), 20px);
  font-weight:400;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:none;
  transition:transform .25s ease, background .25s ease;
  animation:heroCtaIn .8s ease-out .8s both;
}

.hero-cta-free{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.7em;
  padding:.55em .9em;
  border-radius:999px;
  background:#f489a4;
  color:#fff;
  font-size:.72em;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1;
}

.hero-cta-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.85em;
  width:100%;
}

.hero-cta-text{
  padding-right:.15em;
}

.hero-cta:hover{
  transform:translateY(-2px);
  background:#2fbfb8;
}

.hero-person--top{
  animation:heroPersonIn 1s ease-out .35s both;
}

.hero-person--sub{
  animation:heroPersonIn 1s ease-out .65s both;
}

.hero-bar{
  --hero-bar-pad:clamp(8px, calc(var(--pw) * .009), 12px);
  position:relative;
  z-index:4;
  overflow:hidden;
  /* 帯の高さぶん写真へ被せ、透過で背景と人物を見せる。 */
  margin-top:calc((var(--hero-bar-pad) * 2 + 1.5em) * -1);
  animation:heroBarIn .6s ease-out 1s both;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:.7em;
  row-gap:2px;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  padding:var(--hero-bar-pad) 16px;
  background:rgba(45,45,45,.55);
  color:#fff;
  font-size:clamp(15px, calc(var(--pw) * .017), 20px);
  font-weight:400;
  letter-spacing:.09em;
  line-height:1.5;
  text-align:center;
  text-shadow:none;
}

.hero-bar__crawl{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:.7em;
  max-width:100%;
}

.hero-bar__crawl > span{
  animation:heroCaption .7s ease-out 1.2s both;
}

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

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

@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。汎用の 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);
  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;
}

.operation-section h2::before,
.media-section h2::before{
  position:static;
  display:table;
  width:auto;
  margin:0 auto 16px;
  padding:0 0 7px .24em;
  border-radius:0;
  border-bottom:2px solid currentColor;
  background:transparent;
  color:#129c98;
  font-family:var(--font-base);
  font-size:clamp(14px, calc(var(--pw) * .015), 18px);
  font-weight:900;
  letter-spacing:.24em;
  line-height:1;
}

.problem-section h2::before,
.solution-section h2::before,
.service-section h2::before,
.target-section h2::before,
#column > .media-block:first-child h2::before,
#note 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;
}

.problem-section h2{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:none;
  margin:-0.55em 0 0;
  color:var(--text);
  font-size:clamp(24px,calc(var(--pw) * .03),36px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:.02em;
  opacity:0;
  animation:problemHeadIn .75s cubic-bezier(.22,1,.36,1) 1.7s both;
}

.problem-section .lead{
  position:relative;
  z-index:1;
  max-width:40em;
  margin:18px auto 0;
  padding:0;
  border:0;
  color:#8d939c;
  font-family:var(--font-base);
  font-size:clamp(13px,calc(var(--pw) * .013),15px);
  font-weight:400;
  line-height:1.75;
  text-align:center;
  opacity:0;
  animation:problemHeadIn .6s ease 2.05s both;
}

.problem-eyebrow,
.solution-eyebrow,
.service-eyebrow,
.target-eyebrow,
.column-eyebrow{
  position:relative;
  z-index:0;
  display:block;
  width:max-content;
  /* 見出し枠は中央寄せで左右に余白がある。left でセクション左端まで出し、
     margin の 0.05em は P の字の左アキ。箱だけ端でも字が浮く。 */
  margin-top:clamp(-16px,calc(var(--pw) * -.014),-8px);
  margin-left:-0.05em;
  left:clamp(-36px, calc((100% - min(100vw, var(--page-width))) / 2), 0px);
  padding:0;
  border:0;
  color:#d2f4f3;
  font-family:var(--font-base);
  font-size:clamp(64px,calc(var(--pw) * .118),132px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:.85;
  text-align:left;
  opacity:0;
  animation:problemKicker .55s ease 1.45s both;
}

.problem-eyebrow::before,
.solution-eyebrow::before,
.service-eyebrow::before,
.target-eyebrow::before,
.column-eyebrow::before{
  display:none;
}

/* 直前セクションのしっぽ先端から始める。PROBLEM見出し枠の上余白を打ち消す
   負の margin はここでは使わない。 */
.solution-eyebrow,
.service-eyebrow,
.target-eyebrow,
.column-eyebrow{
  margin-top:0;
}

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

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

@keyframes problemIndex{
  from{ opacity:0; }
  to{ opacity: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(--white);
  container-type:inline-size;
}

.problem-board__head{
  position:relative;
  max-width:var(--content-w);
  margin:0 auto;
  padding:clamp(36px,calc(var(--pw) * .04),56px) 0 clamp(28px,3vw,40px);
  text-align:center;
  overflow:visible;
}

.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;
  justify-content:flex-end;
  gap:clamp(14px,2vw,22px);
  text-align:center;
  opacity:0;
}

/* 画面に入ったら左→真ん中→右の順に、スライドなしのフェードイン。 */
@keyframes problemSceneIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.problem-scenes.is-visible .problem-scene{
  animation:problemSceneIn .7s ease both;
}
.problem-scenes.is-visible .problem-scene:nth-child(1){ animation-delay:0s; }
.problem-scenes.is-visible .problem-scene:nth-child(2){ animation-delay:.2s; }
.problem-scenes.is-visible .problem-scene:nth-child(3){ animation-delay:.4s; }

.problem-scene__icon{
  --frame:clamp(200px, 22vw, 260px);
  display:block;
  width:var(--frame);
  height:auto;
  transform:translateZ(0);
}

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

.problem-scene__caption .sp-break{
  display:none;
}

.problem-same{
  --band:clamp(18px,calc(var(--pw) * .03),44px);
  position:relative;
  z-index:2;
  width:100%;
  max-width:100%;
  margin:0;
  padding:var(--band);
  /* PROBLEMの白吹き出しと同じ円弧。viewBox半径100 / 幅1200。 */
  border-bottom-left-radius:calc(var(--panel-radius) + var(--band));
  border-bottom-right-radius:calc(var(--panel-radius) + var(--band));
  background:#92e4e3;
  opacity:0;
  filter:blur(12px);
}

.problem-same__frame{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

.problem-same__card{
  border-radius:var(--panel-radius);
  background:var(--white);
}

.problem-same__tail{
  position:absolute;
  left:26%;
  bottom:0;
  z-index:1;
  display:block;
  width:clamp(84px,calc(var(--pw) * .09),112px);
  height:auto;
  transform:translate(-50%, calc(100% - 1px));
  pointer-events:none;
}

.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:400;
  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;
  opacity:0;
  transform:translateY(16px);
}

.problem-same__flow.is-visible{
  animation:problemFlowIn .9s cubic-bezier(.22,1,.36,1) both;
}

@keyframes problemFlowIn{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:translateY(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;
}

.result-section{
  position:relative;
  /* 上の水色としっぽに写真が触れないよう、しっぽの高さぶん空ける。 */
  margin-top:calc(clamp(84px, var(--pw) * .09, 112px) * 46 / 112 + 20px);
  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-top) var(--section-pad-x) var(--section-pad-y);
}

.story-group > .story-step--problem{
  position:relative;
  padding:0;
  overflow:visible;
  /* 子の .problem-same と同じ水色だと、角丸で削った部分が同じ色で埋まって見えない。 */
  background:transparent;
}

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

.story-step--problem > .problem-same{
  z-index:3;
}

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

.story-step--result{
  padding:clamp(28px,calc(var(--pw) * .04),48px) clamp(22px,calc(var(--pw) * .04),56px) clamp(2px,.6vw,8px);
  text-align:center;
  background:transparent;
}

.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__dots{
  display:inline-block;
  margin-left:.08em;
  font-size:1.22em;
  letter-spacing:.2em;
  line-height:0;
  vertical-align:.02em;
}

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

/* 左列はマーカーだけをダイヤ側（右）に寄せ、テキストは右列と同じ左揃えに
   保つ。01と03、02と04は同じ横位置。番号が縦一列に揃う。 */
.result-point--01,
.result-point--03{
  right:calc(50% + var(--stack-half) + var(--point-line));
  flex-direction:row-reverse;
  text-align:left;
}

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

.result-point--01{
  --point-color:var(--result-01);
  /* 番号の高さはひし形の頂点より上。そこでの縁は外枠より内側なので、
     点線をその分だけ伸ばして縁に当てる。係数は viewBox 286 幅での空き。 */
  --point-reach:calc(var(--stack-w) * .182 + 2px);
  top:calc(10.4% - var(--point-marker) / 2);
}

.result-point--02{
  --point-color:var(--result-02);
  --point-reach:calc(var(--stack-w) * .164 + 2px);
  top:calc(32.2% - var(--point-marker) / 2);
}

.result-point--03{
  --point-color:var(--result-03);
  --point-reach:calc(var(--stack-w) * .062 + 2px);
  top:calc(57.9% - var(--point-marker) / 2);
}

.result-point--04{
  --point-color:var(--result-04);
  --point-reach:calc(var(--stack-w) * .061 + 2px);
  top:calc(79.6% - var(--point-marker) / 2);
}

.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:"Fredoka", var(--font-base);
  font-size:clamp(13px,1.35vw,15px);
  font-weight:400;
  letter-spacing:0;
  line-height:1;
}

.result-point__marker::after{
  --dot:4px;
  --pitch:10px;
  content:"";
  position:absolute;
  top:50%;
  height:var(--dot);
  width:calc(var(--point-line) + var(--point-shift, 0px) + var(--point-reach, 0px));
  transform:translateY(-50%);
  background-image:radial-gradient(circle, var(--point-color) calc(var(--dot) / 2 - .3px), transparent calc(var(--dot) / 2));
  background-size:var(--pitch) var(--dot);
  background-repeat:repeat-x;
  pointer-events:none;
}

/* ひし形側の端に点が乗る。タイルの中心にある点を、半径ぶん端へ寄せる。 */
.result-point--01 .result-point__marker::after,
.result-point--03 .result-point__marker::after{
  left:100%;
  background-position:calc(100% + (var(--pitch) - var(--dot)) / 2) 50%;
}

.result-point--02 .result-point__marker::after,
.result-point--04 .result-point__marker::after{
  right:100%;
  background-position:calc((var(--dot) - var(--pitch)) / 2) 50%;
}

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

.result-point__body h3{
  margin:0;
  color:var(--lead);
  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,.42);
  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);
}

/* 5年・▲38% は明るい写真の上に乗るため、同じ透明度でも帯が白く濃く見える。
   5.6万人／年・100万PV／月の見え方に合わせて、この2つだけ一段透かす。 */
.result-point--02 .result-metric,
.result-point--03 .result-metric{
  background:rgba(245,247,249,.28);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

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

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

/* ブロック内は詰めて、ブロック同士の間に空きを回す。 */
.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:var(--text);
  font-family:var(--font-base);
  font-size:clamp(10px,1.05vw,12px);
  font-weight:400;
  line-height:1.65;
}

@media (min-width:821px){
  /* 写真を上の水色の吹き出しの裏まで伸ばす */
  .result-section > .result-section__photo{
    --photo-rise:calc(clamp(84px, var(--pw) * .09, 112px) * 46 / 112 + 20px + var(--pw) * .035);
    top:calc(-1 * var(--photo-rise));
    background:#f7fbfb;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--photo-rise) * .5));
    mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--photo-rise) * .5));
  }

  /* 写真の大きさと切り抜き位置 */
  .result-section__photo img{
    position:absolute;
    top:calc(var(--photo-rise) - var(--pw) * .211);
    left:calc(50% - var(--pw) * .789);
    width:calc(var(--pw) * 1.45);
    max-width:none;
    height:auto;
    object-fit:fill;
    transform-origin:center top;
  }

  .story-step--result{
    padding:calc(var(--pw) * .04) calc(var(--pw) * .04) 0;
  }

  .result-heading{
    width:100%;
    font-size:calc(var(--pw) * .03);
  }

  /* ひし形の大きさ */
  .result-stack{
    --stack-w:calc(var(--pw) * .313);
    --stack-h:calc(var(--pw) * .451);
    --stack-half:calc(var(--stack-w) / 2);
    --point-w:calc(var(--pw) * .24);
    --point-marker:calc(var(--pw) * .035);
    --point-line:calc(var(--pw) * .03);
    width:100%;
    margin-top:calc(var(--pw) * .046);
    padding-bottom:calc(var(--pw) * .035);
  }

  .result-stack__shapes{
    height:var(--stack-h);
  }

  /* 番号01〜04の位置と点線の長さ */
  .result-point--01{
    --point-reach:calc(var(--stack-w) * .233);
    top:calc(8.6% - var(--point-marker) / 2);
  }

  .result-point--02{
    --point-reach:calc(var(--stack-w) * .233);
    top:calc(30.3% - var(--point-marker) / 2);
  }

  .result-point--03{
    --point-reach:calc(var(--stack-w) * .233);
    top:calc(52% - var(--point-marker) / 2);
  }

  .result-point--04{
    --point-reach:calc(var(--stack-w) * .233);
    top:calc(73.7% - var(--point-marker) / 2);
  }

  .result-point{
    gap:calc(var(--pw) * .014);
  }

  .result-point__marker{
    font-size:calc(var(--pw) * .0146);
  }

  .result-point__body h3{
    font-size:calc(var(--pw) * .0204);
  }

  .result-metric{
    margin-top:calc(var(--pw) * .005);
  }

  .result-metric strong{
    font-size:calc(var(--pw) * .039);
  }

  .result-metric span{
    font-size:calc(var(--pw) * .0176);
  }

  .result-point__note{
    margin-top:calc(var(--pw) * .007);
    padding-top:calc(var(--pw) * .007);
    font-size:calc(var(--pw) * .0135);
  }
}

/* 左右に置けなくなる幅では、実績を縦並びにし、まとめて積んでいたひし形を
   各実績のマーカーへ分解する。 */
@media (max-width:820px){
  .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:14px;
  }
  .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 h3{
    font-size:16px;
  }
  .result-metric strong{
    font-size:32px;
  }
  .result-point__note{
    font-size:12px;
  }
}

.solution-section{
  position:relative;
  margin-top:0;
  /* その成果の写真下の吹き出し先端から英語を始める。 */
  padding-top:0;
  padding-bottom:0;
  background:var(--white);
  overflow:visible;
}

.solution-section h2{
  position:relative;
  z-index:1;
  margin-top:-0.42em;
}

.solution-layout{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  align-items:center;
  gap:28px;
  max-width:min(1000px, 100%);
  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(18px,calc(var(--pw) * .025),30px);
  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:8%;
  border-radius:13px;
  background:#f4f4f4;
  overflow:hidden;
}

.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:var(--text);
  font-family:var(--font-base);
  font-size:clamp(11px,1.1vw,13px);
  font-weight:400;
  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:4px solid var(--blue);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-size:clamp(14px,1.4vw,17px);
  font-weight:900;
  -webkit-text-stroke:0.6px currentColor;
  paint-order:stroke fill;
  line-height:1.3;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none;
  transition:transform .2s ease, background .2s ease, border-color .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:#f3fbfb;
  border-color:#1aa8a3;
  box-shadow:none;
}

.roadmap-trigger-note{
  margin:16px auto 0;
  color:var(--lead);
  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:400;
  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:400;
  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:400;
  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:400;
  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:400;
  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:400;
  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;
}

.service-section h2{
  position:relative;
  z-index:1;
  margin-top:-0.42em;
}

/* 上は直前の 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:var(--panel-radius);
  /* 下の左右は「その悩み、私たちも同じでした。」と同じ円弧。半径100 / 幅1200。 */
  background:var(--white);
}

.operation-lead{
  max-width:760px;
  margin:clamp(10px,1.3vw,16px) auto 0;
  color:var(--lead);
  font-family:var(--font-base);
  font-size:clamp(12px,1.15vw,14px);
  font-weight:400;
  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{
  display:none;
}

.operation-cycle__item{
  --badge:clamp(26px,2.4vw,34px);
  position:relative;
  display:grid;
  grid-template-rows:var(--plant-h) auto;
  row-gap:clamp(6px,.8vw,10px);
  justify-items:center;
  align-items:end;
}

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

/* ステップ間の矢印は出さない。番号の丸同士を、そのステップの色の線でつなぐ。 */
.operation-cycle__item:not(:last-child)::after{
  display:none;
}

/* 苗から木へ育つ並びなので、接地している下端を軸にせり上がらせる。
   左から順に出すのは 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:0;
  padding-top:calc(var(--badge) / 2 + clamp(8px,1vw,12px));
  border-top:0;
  text-align:center;
}

.operation-cycle__item:not(:last-child) .operation-cycle__body::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:50%;
  width:calc(100% + var(--col-gap));
  height:3px;
  background:#111;
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
}

.operation-cycle.is-visible .operation-cycle__item:not(:last-child) .operation-cycle__body::after{
  animation:cycleLineIn .95s cubic-bezier(.22,.7,.3,1) forwards;
}

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

@keyframes cycleLineIn{
  from{ transform:translateY(-50%) scaleX(0); }
  to{ transform:translateY(-50%) scaleX(1); }
}

/* 番号は木の真下、つながる線の上に乗せる。 */
.operation-cycle__body::before{
  display:none;
}

.operation-cycle__no{
  position:absolute;
  z-index:1;
  top:0;
  left:50%;
  display:grid;
  place-items:center;
  width:var(--badge);
  height:var(--badge);
  margin:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-family:var(--font-base);
  font-size:clamp(11px,1.1vw,13px);
  font-weight:900;
  letter-spacing:0;
  line-height:1;
  transform:translate(-50%, -50%);
}

.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:400;
  line-height:1.75;
}

.operation-cycle__loop{
  display:none;
}

.operation-layout{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 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:400;
  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:400;
  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:400;
  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:400;
  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:400;
  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:400;
  color:var(--navy);
  line-height:1.7;
}

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

.target-section h2{
  position:relative;
  z-index:1;
  margin-top:-0.42em;
}

.target-section{
  background:var(--white);
  color:var(--ink);
  /* 直前の service-section はしっぽを持たないので上は通常の余白。
     下は吹き出しなしなので lp-section の padding-bottom:0 を戻す。 */
  padding-top:var(--section-pad-top);
  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:400;
  letter-spacing:.08em;
  line-height:1.3;
}

.target-card__title{
  margin:clamp(12px,calc(var(--pw) * .016),22px) 0 0;
  color:var(--text);
  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:var(--text);
  font-family:var(--font-base);
  font-size:clamp(10.5px,1.05vw,13px);
  font-weight:400;
  line-height:1.6;
  text-align:center;
}

.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:var(--label);
  font-family:var(--font-base);
  font-size:clamp(9px,.85vw,11px);
  font-weight:400;
  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(--text);
  font-family:var(--font-base);
  font-size:clamp(9px,.95vw,12px);
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.35;
}

.plan-spec__value{
  color:var(--label);
  font-family:var(--font-base);
  font-size:clamp(8.5px,.85vw,11px);
  font-weight:900;
  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:400;
  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:400;
  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:400;
  line-height:1.7;
  text-align:left;
}

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

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

#column > .media-block:first-child h2{
  position:relative;
  z-index:1;
  margin-top:-0.42em;
}

.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:22px;
  transform:translateY(-50%);
  background:linear-gradient(180deg,
    rgba(29,36,48,0) 0%,
    rgba(29,36,48,.02) 40%,
    rgba(29,36,48,.035) 50%,
    rgba(29,36,48,.02) 60%,
    rgba(29,36,48,0) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 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:auto;
  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{
  display:flex;
  flex-direction:column;
  border:1px solid #dedede;
  border-radius:14px;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 8px 22px rgba(29,36,48,.04);
  height:100%;
}

.postthumb{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#eee;
  flex-shrink:0;
}

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

.postcard .postbody{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:16px 16px 18px;
}

.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 #d5d5d5;
  border-radius:999px;
  background:#fff;
  color:#444;
  font-size:11px;
  font-weight:400;
  line-height:1.4;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

.pill:hover{
  background:#f4f4f4;
  border-color:#b5b5b5;
  color:#222;
}

.posttitle{
  margin:0;
  font-size:15px;
  font-weight:400;
  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(4, minmax(0, 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:400;
  line-height:1.65;
  text-align:left;
}

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

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

/* 資料請求の下。コラム／noteとは別セクション。 */
.movie-section{
  background:var(--white);
  /* 吹き出しなしなので、lp-section の padding-bottom:0 をここで戻す。 */
  padding-bottom:clamp(48px,6vw,72px);
}

.movie-section .videolist{
  max-width:var(--content-w);
  margin-left:auto;
  margin-right:auto;
}

.videolist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
  padding:0;
  list-style:none;
}

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

.videothumb{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#eee;
}

.videothumb iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

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

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

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

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

.content-more a{
  display:inline-block;
  min-width:280px;
  padding:14px 40px;
  border:3px solid #40d4d2;
  border-radius:999px;
  background:#fff;
  color:#555;
  font-size:16px;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.4;
}

.content-more a:hover{
  background:#f4fffe;
  border-color:#2ec4c2;
  color:#555;
}

.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);
  /* 上のセクションと同じ円弧。半径100 / 幅1200。 */
  border-radius:var(--panel-radius);
  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:var(--lead);
  font-family:var(--font-base);
  font-size:clamp(10.5px,1.05vw,14px);
  font-weight:400;
  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:400;
  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:400;
}

.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 250px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px 16px 10px;
  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:60px;
  margin:0 auto;
}

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

.footer__logo-text{
  margin:14px 0 0;
  font-size:12px;
  font-weight:400;
  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-top:42px;
    --section-pad-y-tail:10px;
  }
  .page{ margin:0; border-radius:0; }
  /* ファーストビューの資料ボタンは出さない。代わりに画面下のフローティングCTAを最初から出す。 */
  .hero-cta{ display:none; }
  section{ --section-pad-x:22px; padding:var(--section-pad-top) var(--section-pad-x) var(--section-pad-y); }
  /* ロゴとボタンだけの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;
    justify-content:flex-start;
    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;
  }
 /* スマホの herobk_sp.jpg は、人物とキャッチコピーが入った1枚絵。
   コード側の人物と見出しを重ねると二重になるので、人物は出さず、
   見出しは PC と同じく支援技術向けに隠す。画像の縦横比で高さが決まる。 */
.hero{
  --section-pad-x:0px;
  padding:0;
  overflow:hidden;
  background:#fff;
}
.hero-person{
  display:none;
}
.hero-title{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* PCと同じく、帯は画像の下端に重ねて半透明で透かす。
   重ねる量は帯の高さそのもの：上下padding 16px + 2行ぶん 3em + 行間 2px。
   2文は1文ずつ。長い方（27文字）が幅に収まる字間・字サイズにする。 */
.hero-bar{
  margin-top:calc(-3em - 18px);
  padding:8px 14px;
  /* PC（.55）より少しだけ濃くして、後ろの画像の透けを抑える。 */
  background:rgba(45,45,45,.65);
  font-size:clamp(10px, calc((100vw - 28px) / 28.2), 16px);
  letter-spacing:.02em;
}
.hero-bar__crawl{
  flex-direction:column;
  align-items:center;
  row-gap:2px;
}
.hero-bar__crawl > span{
  white-space:nowrap;
}
  /* 「特に、こんな企業に選ばれています」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;
  }
  .plan-grid{
    grid-template-columns:1fr;
    max-width:400px;
    gap:16px;
    margin-top:26px;
  }
  .target-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    max-width:none;
    gap:8px;
    margin-top:22px;
  }
  .target-card{
    --shape-shift:6px;
  }
  .target-visual__type{
    padding:3px 5px;
    font-size:9px;
    letter-spacing:.04em;
  }
  .target-card__title{
    font-size:12px;
    letter-spacing:0;
    line-height:1.35;
  }
  .target-card__text{
    font-size:10px;
    line-height:1.45;
  }
  .cta{
    padding:24px var(--section-pad-x);
  }
  .cta-panel{
    padding:26px 20px 24px;
    border-radius:var(--panel-radius);
  }
  .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__icon{ width:18px; }
  .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:22px; }
  .problem-eyebrow,
  .solution-eyebrow,
  .service-eyebrow,
  .target-eyebrow,
  .column-eyebrow{
    margin-top:-10px;
    font-size:48px;
  }
  .solution-eyebrow,
  .service-eyebrow,
  .target-eyebrow,
  .column-eyebrow{
    margin-top:0;
  }
  .problem-board__head{
    padding:36px 0 20px;
  }
  /* 3段に積むと縦に長くなる。1行に並べ、絵を枠幅に収めて高さを1段分にする。 */
  .problem-scenes{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    padding-bottom:4px;
  }
  .problem-scene,
  .problem-scenes.is-visible .problem-scene{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    padding:0;
    text-align:center;
    opacity:1;
    transform:none;
    animation:none;
  }
  .problem-scene + .problem-scene{
    border-top:0;
  }
  .problem-scene__icon{
    --frame:min(92px, 24vw);
  }
  .problem-scene__caption{
    font-size:14px;
    line-height:1.45;
    letter-spacing:0;
    min-height:2.9em;
  }
  .problem-scene__caption .sp-break{
    display:block;
  }
  .problem-same{
    --band:16px;
    padding:56px 16px 16px;
  }
  .problem-same__frame{
    margin:0;
    padding:0;
  }
  .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:28px -32px 0;
  }
  .problem-same__closing{
    margin-top:24px;
    font-size:16px;
  }
  /* その悩みのしっぽ（下限84px）に、他セクションのしっぽを揃える。
     幅いっぱいの図に入っている小さいしっぽは出さず、同じ形を重ねる。 */
  .section-tail__shape:not(.section-tail__shape--flat){
    display:none;
  }
  .section-tail__shape--flat{
    display:inline;
  }
  /* 上から PROBLEM(5) → その悩み(4) → 成果(3) → 解決策(2)。
     成果の写真をその悩みの裏へ伸ばすので、その悩みは成果より手前に置く。 */
  .story-step--problem > .problem-board{
    z-index:5;
  }
  .story-step--problem > .problem-same{
    z-index:4;
  }
  .problem-board,
  .result-section,
  .solution-section{
    --tail-point-w:clamp(84px,calc(var(--pw) * .09),112px);
    --tail-point-h:calc(var(--tail-point-w) * 42 / 108);
  }
  .result-section{
    z-index:3;
    --point-w:clamp(84px,calc(var(--pw) * .09),112px);
    --point-h:calc(var(--point-w) * 42 / 108);
    --point-over:calc(var(--pw) * .04);
    --point-hang:calc(var(--point-h) - var(--point-over));
    --tail-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 42'%3E%3Cpath fill='%23fff' d='M0 0H108C80 0 62 21 54 42C46 21 28 0 0 0Z'/%3E%3C/svg%3E");
  }
  .solution-section{
    z-index:2;
  }
  .problem-board > .section-tail__point,
  .result-section > .section-tail__point,
  .solution-section > .section-tail__point{
    display:block;
    position:absolute;
    z-index:6;
    width:var(--tail-point-w);
    height:var(--tail-point-h);
    aspect-ratio:108 / 42;
    bottom:calc(var(--pw) * .04 - var(--tail-point-h));
    color:var(--white);
    pointer-events:none;
    overflow:visible;
  }
  .section-tail__point path{
    fill:currentColor;
  }
  .result-section > .section-tail__point{
    left:calc(74.7% - var(--section-pad-x, 0px) - var(--tail-point-w) / 2);
    transform:none;
  }
  /* 成果のしっぽは単色を塗らず、同じ写真をこの形に切り抜く。白ふちより手前。 */
  .result-section > .section-tail__point{
    z-index:5;
    overflow:visible;
    background:none;
  }
  .result-section > .section-tail__point image{
    opacity:0;
  }
  .result-section__photo.is-visible ~ .section-tail__point image{
    opacity:.26;
  }
  .solution-section > .section-tail__point{
    left:25.2%;
    bottom:calc(var(--pw) * .04 + 1px);
    transform:translate(-50%, calc(100% - 1px));
  }
  .problem-board > .section-tail__point{
    left:74.7%;
    bottom:calc(var(--pw) * .04 - 2px);
    transform:translate(-50%, calc(100% - 1px));
  }
  .problem-board::after,
  .solution-section::after{
    content:"";
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    bottom:-3px;
    height:6px;
    background:var(--section-teal);
    pointer-events:none;
  }
  .problem-board > .section-tail__point,
  .solution-section > .section-tail__point{
    opacity:0;
  }
  .problem-board > .section-tail.is-visible + .section-tail__point,
  .solution-section > .section-tail.is-visible + .section-tail__point{
    animation:problemPointIn 1.15s cubic-bezier(.22,1,.36,1) .3s both;
  }
  .story-group > .story-step--problem{
    padding:0;
  }
  .result-section{
    padding:0;
  }
  .story-step{
    padding:44px 22px;
  }
  .story-step--result{
    padding:28px 8px 32px;
  }
  /* 写真はセクション全面＋PCと同じく上へ伸ばし、その悩みのしっぽの裏に潜らせる。
     下のしっぽの写真は JS がこの箱を基準に合わせる。 */
  .result-section > .result-section__photo{
    --photo-rise:calc(clamp(84px, var(--pw) * .09, 112px) * 46 / 112 + 20px + var(--pw) * .035);
    position:absolute;
    inset:calc(-1 * var(--photo-rise)) 0 0;
    height:auto;
    aspect-ratio:auto;
    background:#f7fbfb;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--photo-rise) * .5));
    mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--photo-rise) * .5));
  }
  /* SP用写真は女性2人が左〜中央、男性が右端。男性を入れず女性2人を中心にするため、
   高さを幅の1.11倍に抑えて切り抜き範囲（横約60%）を広げ、左寄せにする。
   しっぽの裏まで伸びる上端はそのまま。下端は背景色へ溶かす。 */
  .result-section__photo img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(var(--pw) * 1.11);
    object-position:25% 40%;
    -webkit-mask-image:linear-gradient(180deg, #000 84%, transparent);
    mask-image:linear-gradient(180deg, #000 84%, transparent);
  }
  /* 900px 以下の縦積みを戻し、PCと同じ中央ひし形＋左右の実績にする。
     幅に収まるよう図と文字だけ縮める。注釈は左右が重なるのでスマホでは出さない。 */
  .result-stack{
    --stack-w:26%;
    --point-w:36%;
    --point-marker:22px;
    --point-line:6px;
    width:100%;
    margin-top:8px;
    /* 04 は番号の下にテキストが続くので、ひし形の下端より下まで伸びる。その分を空ける。 */
    padding-bottom:64px;
  }
  /* 縦に伸ばして実績同士の間隔を空ける。SVG は preserveAspectRatio="none" なので
     高さだけ指定すればひし形が縦に伸びる。幅の 2 倍（元は 480/286＝1.68 倍）。
     8px×2 は .story-step--result の左右余白。番号の top% は高さ比なので追従する。 */
  .result-stack__shapes{
    display:block;
    height:calc((var(--pw) - 16px) * .26 * 2);
  }
  .result-points{
    display:block;
    margin-top:0;
  }
  /* 番号は4つともテキストの左上。ひし形とのつながりは色だけで示す。
     テキストは番号の下に回り、--point-w の幅を丸ごと使える。 */
  .result-point--01,
  .result-point--03{
    position:absolute;
    width:var(--point-w);
    right:calc(50% + var(--stack-half) + var(--point-line));
    left:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    text-align:left;
  }
  .result-point--02,
  .result-point--04{
    position:absolute;
    width:var(--point-w);
    left:calc(50% + var(--stack-half) + var(--point-line));
    right:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    text-align:left;
  }
  .result-point__body{
    width:100%;
  }
  /* 縦に番号＋2行＋数字の札で約96px。同じ列の下の項目は、上の項目の
     位置から104px下げて重ならないようにする（% だと狭い端末で詰まる）。 */
  .result-point--03{
    top:calc(10.4% - var(--point-marker) / 2 + 104px);
  }
  .result-point--04{
    top:calc(32.2% - var(--point-marker) / 2 + 104px);
  }
  .result-point__marker{
    width:var(--point-marker);
    height:var(--point-marker);
    border-radius:50%;
    background:var(--point-color);
    font-size:11px;
    box-shadow:0 0 0 2px rgba(255,255,255,.85);
  }
  .result-point__marker::before{
    content:none;
  }
  .result-point__marker::after{
    display:none;
  }
  /* 1行は <br> で区切った最長9文字。幅が足りないと「の」だけ落ちるので折り返さず、
     文字の方を幅に合わせて縮める（上限12px）。幅は --point-w(36%) をそのまま使える。 */
  .result-point__body h3{
    font-size:min(12px, calc((var(--pw) - 16px) * .36 / 9.3));
    line-height:1.35;
    white-space:nowrap;
  }
  /* 写真の上では黄色・水色の数字が沈むので、白い札に載せて色を少し締める。
     色相は番号・ひし形と同じまま、濃さだけ上げる。
     .result-point を付けて、PC用の 02/03 だけ薄くする指定より強くする。 */
  .result-point .result-metric{
    margin-top:4px;
    padding:.1em .38em .14em;
    border-radius:6px;
    background:rgba(255,255,255,.86);
    box-shadow:0 2px 8px rgba(29,36,48,.1);
    color:color-mix(in srgb, var(--point-color) 72%, #1d2430);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* 「100万PV／月」が一番長い。狭い端末では幅に合わせて縮める（上限26px）。 */
  .result-metric strong{
    font-size:min(26px, calc(var(--pw) * .068));
    font-weight:700;
  }
  .result-metric span{
    font-size:11px;
    font-weight:700;
  }
  .result-point__note{
    display:none;
  }
  .story-group::after{
    height:110px;
  }
  /* 写真はセクションの高さで大きさが決まるので、余白を詰めると写真ごと上がり
     顔との位置関係が変わらない。見出しだけを relative でずらす。 */
  .result-heading{
    position:relative;
    top:-24px;
    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;
  }
  .solution-section{
    padding-top:56px;
  }
  .operation-section{
    padding:56px var(--section-pad-x) 21px;
  }
  .operation-panel{
    margin-bottom:22px;
    padding:30px 18px 32px;
    border-radius:var(--panel-radius);
  }
  .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;
  }
  /* 左から番号・木・本文。木は行ごとに育つので、縦並びでも上から下へ成長が読める。 */
  .operation-cycle__item{
    position:relative;
    grid-template-columns:auto var(--plant-w) minmax(0, 1fr);
    grid-template-rows:auto auto;
    column-gap:12px;
    justify-items:start;
    row-gap:2px;
    align-items:center;
    padding:14px 0;
  }
  /* 枠が小さいので、22% だと 01 の芽が点になる。順に育つ差は残して底上げする。 */
  .operation-cycle__item--01{ --plant-scale:32%; }
  .operation-cycle__item--02{ --plant-scale:48%; }
  .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 / span 2;
    grid-column:2;
    width:var(--plant-w);
    height:var(--plant-h);
  }
  /* 番号を項目の左端に出すため、本文の箱は外して中身を行のグリッドに参加させる。 */
  .operation-cycle__body{
    display:contents;
    margin-top:0;
    padding-top:0;
    border-top:0;
    text-align:left;
  }
  .operation-cycle__body::before,
  .operation-cycle__body::after{
    display:none;
  }
  .operation-cycle__no{
    position:static;
    grid-column:1;
    grid-row:1 / span 2;
    align-self:center;
    justify-self:start;
    width:24px;
    height:24px;
    margin:0;
    padding:0;
    border-radius:50%;
    background:#111;
    color:#fff;
    font-size:11px;
    line-height:1;
    transform:none;
  }
  .operation-cycle__name{
    grid-column:3;
    grid-row:1;
    align-self:end;
    justify-self:start;
    text-align:left;
    margin:0;
  }
  .operation-cycle__desc{
    grid-column:3;
    grid-row:2;
    align-self:start;
    margin:0;
    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:36px;
  }
  .footer__logo-item:first-child img{
    max-height:40px;
  }
  .footer__logo-text{
    margin-top:8px;
    font-size:11px;
  }
  .notelist{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:18px;
    padding:0;
  }
  .notecard{
    width:auto;
    min-width:0;
  }
  .notetitle{
    padding:10px 10px 12px;
    font-size:13px;
  }
  .videolist{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:18px;
  }
  .videotitle{
    padding:10px 10px 12px;
    font-size:13px;
  }
  .postlist--3col{
    grid-template-columns:1fr;
  }
  .post-carousel .post-carousel__track .postcard{
    flex-basis:260px;
    width:260px;
    height:auto;
    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:var(--section-pad-top) var(--section-pad-x) 36px; }
  .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:auto var(--plant-w) minmax(0, 1fr);
    column-gap:10px;
  }
  .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-bg,
  .hero-person--main,
  .hero-person--top,
  .hero-person--sub,
  .hero-bar,
  h2,
  h2.is-visible,
  .problem-same__title,
  .problem-same__title.is-visible,
  .result-heading,
  .result-heading.is-visible,
  .problem-eyebrow,
  .solution-eyebrow,
  .service-eyebrow,
  .target-eyebrow,
  .column-eyebrow,
  .problem-section h2,
  .problem-section .lead,
  .problem-scene,
  .problem-scenes.is-visible .problem-scene,
  .problem-same__flow,
  .problem-same__flow.is-visible,
  .problem-board > .section-tail,
  .problem-board > .section-tail.is-visible,
  .solution-section > .section-tail,
  .solution-section > .section-tail.is-visible,
  .problem-same,
  .problem-same.is-visible,
  .operation-cycle__plant,
  .operation-cycle.is-visible .operation-cycle__plant,
  .operation-cycle__body::after,
  .operation-cycle.is-visible .operation-cycle__item:not(:last-child) .operation-cycle__body::after,
  .result-stack__shapes use,
  .result-stack__shapes.is-visible use{
    opacity:1;
    transform:none;
    animation:none;
  }

  .problem-board > .section-tail,
  .problem-board > .section-tail.is-visible,
  .solution-section > .section-tail,
  .solution-section > .section-tail.is-visible,
  .problem-same,
  .problem-same.is-visible{
    filter:none;
  }

  .section-tail__point{
    opacity:1;
    animation:none;
    filter:none;
  }

  /* 番号間の線は縦位置を translate で保っている。動きを止めるときは引き終わった位置に戻す。 */
  .operation-cycle__body::after,
  .operation-cycle.is-visible .operation-cycle__item:not(:last-child) .operation-cycle__body::after{
    transform:translateY(-50%) scaleX(1);
  }

  /* 背景写真は元から薄い。1 に戻すと本文が読めなくなるので濃度は保つ。 */
  .result-section__photo img,
  .result-section__photo.is-visible img,
  .result-section > .section-tail__point image{
    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));
  }

  /* 動きを省くときは、導入なしで完成状態を出す。帯は透過のまま。
     非表示のまま止まらないよう、透明度と切り抜きも戻す。 */
  .hero-bg,
  .hero-person--main,
  .hero-person--top,
  .hero-person--sub,
  .hero-bar,
  .hero-bar__crawl > span,
  .hero-cta,
  .hero-cta-inner,
  .hero-cta-free{
    animation:none;
    transform:none;
    filter:none;
    opacity:1;
    clip-path:none;
    transition:none;
  }

  .hero-cta:hover{
    transform:none;
  }
}
/* 月額広告費 ASK */
.plan-card__ad-value {
  font-size: 24px;
  font-weight: 700;
  color: #000;
}

/* 料金注記 */
.plan-card__ask-note {
  margin: 4px 0 6px;
  font-size: 11px;
  color: #ff3333;
  text-align: center;
}
/* 月額運用費 ASK */
.plan-card--light .plan-card__price strong {
  color: #f66588;
}

.plan-card--standard .plan-card__price strong {
  color: #ffcc29;
}

.plan-card--full .plan-card__price strong {
  color: #47caca;
}