@charset "UTF-8";
/* =========================================================================
   A案｜ブラッシュアップ第1回（2026-08-11）
   -------------------------------------------------------------------------
   ★このファイルの読み込み1行を外せば、下の4点がすべて元に戻る。
     style.css / font-d.css / font-e.css は一切書き換えていない。
     （ただし index.html のマークアップは戻らない。下の「HTML側の変更」参照）

   このファイルで変えていること
     1. 選ばれる理由 …… D案の特集ブロック型（巨大な輪郭数字＋英字＋写真）に変更
     2. 制作の流れ …… 5ステップを横1列にしてアイコンと矢印を追加
     3. サービス内容 …… 写真に差し替えたことによる表示調整
     4. プロフィール …… 背景が主色ベタで「青すぎる」ため淡色面に変更＋文字色を反転
     5. 文字色のルール …… 見出しのオレンジを廃止して黒に。値段の数字だけピンク
     6. 写真化にともなう object-fit の調整

   HTML側の変更（このCSSを外しても戻らない部分）
     ・選ばれる理由を .reason カードから .rfeat（特集ブロック）に組み替え
     ・.flow から .flow__head を廃止し、.flow__icon を追加
     ・FVのスライドを4枚→3枚（images/photo/fv-0N.jpg）
     ・サービス3枚・選ばれる理由3枚の画像を images/photo/*.jpg に変更

   画像について
     images/gen/ の11点は Codex（ImageGen）で新規生成したもの。
     背景色は #eef8f9 で統一されているので、CSSの下地も同じ色を敷いて
     画像の矩形が見えないようにしている（--c-illust-bg）。
   ========================================================================= */

:root{
  /* 生成イラストの背景色。画像側のベタ塗りと同値にすること */
  --c-illust-bg: #eef8f9;
  /* D案から持ってきた「ぼかし0のベタ影」。D案は影を必ずぼかさない流儀 */
  --c-hard-shadow: color-mix(in srgb, var(--c-brand) 18%, transparent);
}


/* =========================================================================
   1. 選ばれる理由（D案＝13-split の #feature-a / #feature-b と同じ組み立て）
   -------------------------------------------------------------------------
   ★2026-08-11に作り直し。前は「白カード3枚を横並べ」だったが、
     D案の特集ブロック（巨大な輪郭数字＋英字2行＋小見出し＋主色の大見出し）に変更した。
     カード時代のCSSは残していない。

   D案から持ってきたもの
     ・背景に置く巨大な輪郭数字（塗りなし・線だけのSVG）
     ・英字2行の見出し（Josefin Sans／font-d.css で入れた --font-en）
     ・小見出しの左に短い横線
     ・その下の大見出しだけ主色にする（.lead-ja 相当）
     ・写真を左右交互に置く
   A案側に合わせたもの
     ・写真の角丸20px（D案は角丸ゼロ）
     ・出現アニメは A案の js-scroll-anime のまま
   ========================================================================= */

/* カード3枚並べ用のグリッドを解除して、1本ずつの帯に戻す */
.sec-reason__list {
  display: block;
  margin-top: 40px;
}

@media(min-width:960px) {
  .sec-reason__list {
    display: block;
    margin-top: min(5.46875vw, 70px);
  }
}

.rfeat {
  position: relative;
  display: grid;
  gap: 24px;
}

.rfeat+.rfeat {
  margin-top: 64px;
}

@media(min-width:960px) {
  .rfeat {
    grid-template-columns: 1fr 1fr;
    gap: min(4.6875vw, 60px);
    align-items: center;
  }

  .rfeat+.rfeat {
    margin-top: min(9.375vw, 120px);
  }

  /* ★既定は「文字が左・写真が右」（D案の #feature-a と同じ）。
     HTMLは media が先に来るので、既定側で order を送っておくこと。
     これを入れ忘れると、reverse も非reverse も両方とも写真が左になる。 */
  .rfeat__media {
    order: 2;
  }

  /* 偶数番だけ写真を左に。D案の #feature-b と同じ */
  .rfeat--reverse .rfeat__media {
    order: 0;
  }
}

/* ★巨大な輪郭数字は「文字側」の背景に置く。
   .rfeat 全体の背景にすると、写真の裏に回り込んで見えなくなる（実際に消えた）。 */
.rfeat__body {
  background-repeat: no-repeat;
  background-position: left -14px top -22px;
  background-size: 140px auto;
}

@media(min-width:960px) {
  .rfeat__body {
    background-position: left -24px top -40px;
    background-size: min(17.1875vw, 220px) auto;
  }
}

.rfeat--n1 .rfeat__body {
  background-image: url(../images/num-01.svg);
}

.rfeat--n2 .rfeat__body {
  background-image: url(../images/num-02.svg);
}

.rfeat--n3 .rfeat__body {
  background-image: url(../images/num-03.svg);
}

/* ★カード3枚のときは巨大な淡色円がちょうど背景に収まっていたが、
   縦に長い帯3本になると途中で円が切れて、背景が2色に割れて見える。 */
.sec-reason__circle {
  display: none;
}

/* --- 写真 --- */
.rfeat__media {
  border-radius: 20px;
  overflow: hidden;
}

@media(min-width:960px) {
  .rfeat__media {
    border-radius: min(1.5625vw, 20px);
  }
}

.rfeat__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 640;
  object-fit: cover;
}

/* --- 文字側 --- */
.rfeat__body {
  position: relative;
  z-index: 1;
}

/* 英字2行。D案の .ttl-en は 50px／line-height 1.0／letter-spacing .05em */
.rfeat__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-brand);
}

@media(min-width:960px) {
  .rfeat__en {
    font-size: min(3.90625vw, 50px);
  }
}

/* 小見出し。D案の .ttl-ja は左に線アイコンが入る。ここは疑似要素で引いている */
.rfeat__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text);
}

.rfeat__label::before {
  content: "";
  width: 26px;
  height: 2px;
  background-color: var(--c-brand);
  flex-shrink: 0;
}

@media(min-width:960px) {
  .rfeat__label {
    font-size: min(1.25vw, 16px);
    margin-top: min(1.5625vw, 20px);
  }
}

/* ★ここだけ主色。D案の .lead-ja と同じ扱い
   （見出しは原則すべて黒。色を変えるのはこの1行だけ、という取り決め） */
.rfeat__title {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--c-brand);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .rfeat__title {
    font-size: min(2.1875vw, 28px);
    margin-top: min(1.09375vw, 14px);
  }
}

.rfeat__text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 2;
  color: var(--c-text);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .rfeat__text {
    font-size: min(1.25vw, 16px);
    margin-top: min(1.5625vw, 20px);
    max-width: 30em;
  }
}


/* =========================================================================
   2. 制作の流れ（アイコン＋矢印で「順番」を見せる）
   -------------------------------------------------------------------------
   変更前の問題
     3カラム固定だったため、5ステップが「3枚＋2枚」に割れて
     どの順に進むのかが見た目から読み取れなかった。
   変更後
     PC  … 5カラム横1列。カードとカードの間に白い矢印を置く
     SP  … 縦1列。カードの上に下向き矢印を置く
     矢印は擬似要素で作った山形（border 2辺＋rotate）。画像は使っていない。
   ========================================================================= */

.sec-flow__list{
  --flow-gap: 26px;
  grid-template-columns: 1fr;
  gap: var(--flow-gap);
}
@media(min-width:960px){
  .sec-flow__list{
    --flow-gap: min(2.8125vw,36px);
    grid-template-columns: repeat(5,1fr);
  }
}

.flow{
  position: relative;
  text-align: center;
  padding: 24px 18px 26px;
  border-radius: 16px;
}
@media(min-width:960px){
  .flow{
    border-radius: min(1.25vw,16px);
    padding: min(2.5vw,32px) min(1.09375vw,14px) min(2.1875vw,28px);
  }
}

/* --- 矢印（カードとカードの隙間の中央に置く） --- */
.flow + .flow::before{
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--c-base);
  border-bottom: 3px solid var(--c-base);
  /* SP：カードの上、隙間のちょうど真ん中に下向きで置く */
  left: 50%;
  top: calc(-1 * var(--flow-gap) / 2);
  transform: translate(-50%,-50%) rotate(45deg);
}
@media(min-width:960px){
  .flow + .flow::before{
    /* PC：カードの左、隙間のちょうど真ん中に右向きで置く。
       高さはアイコンの中心あたりに合わせている */
    left: calc(-1 * var(--flow-gap) / 2);
    top: min(7.03125vw,90px);
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}

/* --- 番号：丸バッジをやめて、上に小さく置くラベルに変更 --- */
.flow__num{
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-brand) 10%, transparent);
  color: var(--c-brand);
  padding: 3px 14px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .08em;
}
@media(min-width:960px){
  .flow__num{
    width: auto;
    height: auto;
    font-size: min(1.25vw,16px);
    padding: min(.3125vw,4px) min(1.25vw,16px);
  }
}

/* --- アイコン --- */
.flow__icon{ margin-top: 12px; }
@media(min-width:960px){ .flow__icon{ margin-top: min(1.5625vw,20px); } }
.flow__icon img{
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto;
  object-fit: contain;
}
@media(min-width:960px){
  .flow__icon img{ width: min(6.09375vw,78px); height: min(6.09375vw,78px); }
}

.flow__title{ margin-top: 12px; }
@media(min-width:960px){
  /* 5カラムになって1枚あたりが狭くなるので、見出しを1段落とす */
  .flow__title{ font-size: min(1.40625vw,18px); margin-top: min(1.09375vw,14px); }
}
@media(min-width:960px){
  .flow__text{ font-size: min(1.015625vw,13px); }
}


/* =========================================================================
   3. サービス内容（生成イラストへの差し替えに伴う調整）
   -------------------------------------------------------------------------
   既定は object-fit:cover ＋ height:200px。
   生成イラストは主役が中央に寄っているので cover だと上下が切れる。
   contain に変えて、余白は画像と同じ #eef8f9 で埋める。
   ========================================================================= */

.card-service{
  /* 選ばれる理由と同じ理由。画像エリアの下地がセクション面と近く、
     線が無いとカード上半分の輪郭が消えるため罫線を足す */
  border: 1px solid var(--c-line);
}
.card-service__image{
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: contain;
  background-color: var(--c-illust-bg);
  border-bottom: 1px solid var(--c-line);
}
@media(max-width:959px){
  .card-service__image{ height: auto; }
}


/* =========================================================================
   4. プロフィール（背景が「青すぎる」の対応）
   -------------------------------------------------------------------------
   原因
     直前の FLOW セクションが主色ベタ（#2da8b5）で、
     プロフィールも同じ主色ベタだったため、主色の壁が2枚続いていた。
   対応
     プロフィールを淡色面（--c-surface）に変え、白抜きだった文字を通常色に戻す。
     セクション上端の濃い区切り線（4px）は、FLOWとの境目として残す。
   ========================================================================= */

.sec-profile{
  background-color: var(--c-surface);
}

/* 見出し：heading1--white（白抜き前提）を淡色面用に反転 */
.sec-profile .heading1--white .heading1__label{
  color: var(--c-base);
  background-color: var(--c-brand);
  border-color: var(--c-brand);
}
.sec-profile .heading1--white .heading1__title{ color: var(--c-brand); }
.sec-profile .heading1--white .heading1__title em{ color: var(--c-accent); }

/* 名前まわり */
.sec-profile__role{ color: var(--c-brand); }
.sec-profile__name{ color: var(--c-text); }
.sec-profile__tagline{ color: var(--c-brand-dark); }

/* タグ：白地×主色文字 → 主色地×白文字（淡色面の上で沈まないように） */
.sec-profile__tags li{
  background-color: var(--c-brand);
  color: var(--c-base);
}

/* 本文 */
.sec-profile__text{ color: var(--c-text); }

/* 「この価格で提供している理由」の白カード：
   淡色面の上だと白カードが浮きにくいので、罫線とベタ影で分離する */
.sec-profile__career{
  border: 1px solid var(--c-line);
  box-shadow: 8px 8px 0 var(--c-hard-shadow);
}

/* 顔写真：淡色面の上なので、理由カードと同じベタ影で浮かせる */
.sec-profile__photo{
  box-shadow: 10px 10px 0 var(--c-hard-shadow);
}
@media(min-width:960px){
  .sec-profile__photo{
    box-shadow: min(.78125vw,10px) min(.78125vw,10px) 0 var(--c-hard-shadow);
  }
}


/* =========================================================================
   5. 文字色のルール（2026-08-11 第2回）
   -------------------------------------------------------------------------
   決めたこと
     ・見出しの強調（<em>）はオレンジをやめて、**原則すべて黒**にする
     ・色を変えるのは、そこが「強調そのもの」のときだけ。使う色はブランドの緑
     ・**値段の数字だけピンク**にする（値段だと一目で分かるようにするため）

   ★オレンジ（--c-accent #e8813c）は文字からは全部外したが、
     ボタンの面色などには残している。文字の話と面の話を混ぜないこと。
   ========================================================================= */

:root {
  /* 値段の数字の色。ここ1箇所でページ中の金額の色が変わる */
  --c-price: #ec5680;  /* ★本番サイト shudesign-web.com/hp_s/ で実際に使っている値を実測して採用 */
}

/* --- セクション見出しは全部黒。強調（<em>）だけ緑 ---
   ★既定は逆だった。地の文が主色の緑で、<em> がオレンジ。
     そのまま <em> だけ黒にしたら「サービス」が緑・「内容」が黒になって、
     強調していない側が目立つ状態になった（実際にそうなっていた）。
     地を黒に落として、強調だけ緑にする。 */
.sec-reason .heading1__title,
.sec-service .heading1__title,
.sec-voice .heading1__title,
.sec-gallery .heading1__title,
.sec-price .heading1__title,
.sec-faq .heading1__title,
.sec-access .heading1__title,
.sec-ai .heading1__title,
.sec-contact .heading1__title,
.heading1__title {
  color: var(--c-text);
}

.heading1__title em {
  color: var(--c-brand);
}

/* 色面の上に乗る見出しは、黒だと沈むので白のまま。強調は薄い主色で差をつける */
.heading1--white .heading1__title {
  color: var(--c-base);
}

.heading1--white .heading1__title em {
  color: var(--c-brand-light);
}

/* --- 値段の数字をピンクに --- */

/* FVのキャッチの「9,800円」。既定は黄色 */
.top-fv__catch em {
  color: var(--c-price);
}

/* FVバッジの数字（9,800 / 0 / 10）。既定は --c-figure のオレンジ黄 */
.badge__num,
.badge-solo__figure {
  color: var(--c-price);
}

/* 料金プランの金額・オファーパネルの数字 */
.plan-card__price-num,
.offer-panel__value {
  color: var(--c-price);
}


/* =========================================================================
   6. サービス内容を写真に差し替えたことによる調整
   -------------------------------------------------------------------------
   イラスト時代は「余白があるので object-fit:contain ＋ 淡色の下地」だったが、
   写真は画角いっぱいに使うので cover に戻す。下地も罫線も要らない。
   ========================================================================= */
.card-service__image {
  height: auto;
  aspect-ratio: 1000 / 640;
  object-fit: cover;
  background-color: transparent;
  border-bottom: 0;
}

@media(max-width:959px) {
  .card-service__image {
    height: auto;
  }
}

/* FVのスライドは写真になったので、上寄せをやめて中央に戻す
   （画面キャプチャ時代は上端を見せたかったので center top にしていた） */
.top-fv__slide-img {
  object-position: center center;
}


/* =========================================================================
   10. ABOUT（月額9,800円で、事業の信用を整える。）の背景を差し替え
   -------------------------------------------------------------------------
   前は images/real/benefit-photo.png。**PC画面に日本語が写り込んだ写真**で、
   オーバーレイを透けて本文と重なっていた。
   Adobe Stock 452418646（文字なし・自然光・コピースペースあり）に差し替え。
   ★書き出しは 2560×1707 / WebP / 品質82 ＝ **100KB**。
     原寸(6720×4480)のままWebPにすると **3.12MB** で、背景1枚には重すぎる。
     JPEG 2400px版は 260KB だったので、WebPにして解像度を上げつつ4割軽くなっている。
   ========================================================================= */
:root {
  --about-bg-image: url(../images/real/about-bg.webp);
  /* ★.64 まで上げたら写真がほぼ黒くなって、せっかくの素材が死んだ。
     この写真は文字が写り込んでいないので、前の写真ほど濃くする必要がない。 */
  --photo-overlay-opacity: .52;
}

/* 写真の左側（ブラインドの窓＝明るい側）を見せる。
   既定は center なので、暗い右側が正面に出ていた */
.sec-about__bg-inner {
  background-position: center center;

  /* ★「背景の写真がでかすぎる（寄りすぎ）」の真因はここだった。
     既定は top:-20% / bottom:-20% で、パララックス用に背景ボックスを
     セクションの1.4倍の高さに伸ばしている。
     cover は「ボックスを満たす最小倍率」なので、縦に伸ばすほど倍率が上がり、
     **横が切り落とされる**。実測で 2370px 描画に対して 945px（画像の40%）が画面外だった。
     上下のはみ出しを減らせば倍率が下がり、そのぶん引いた絵になる。
     ★はみ出し量はパララックスの移動量ぶんだけあればいいので、
       速度も 0.2 → 0.06 に落としてセットで下げている（index.html 側）。 */
  top: -5%;
  bottom: -5%;
}




/* =========================================================================
   7. FV を白地に組み直す（2026-08-11 第4回）
   -------------------------------------------------------------------------
   ★前は「写真スライドショー＋主色のベール＋白抜き文字」だった。
     本番サイト（shudesign-web.com/hp_s/）と同じ「白地・黒文字・右にモックアップ」に変更。

   HTML側で外したもの（このCSSを消しても戻らない）
     ・背景スライドショー（.top-fv__slider と写真3枚）
     ・主色のオーバーレイ（.top-fv__overlay）
     ・下端の波形SVG（.top-fv__wave）
     ・実績バッジ3点（.top-fv__badges）→ .fv-points に置き換え

   ★モックアップに影は付けていない（「シャドウかけてとかじゃなく普通に」）。
   ★images/photo/fv-01〜03.jpg は、この変更で使われなくなった。消してはいない。
   ========================================================================= */

.top-fv {
  height: auto;
  min-height: 0;
  background-color: var(--c-base);
  overflow: visible;
}

/* ★これが要る。PC用のメディアクエリに
     @media(min-width:960px){ .top-fv{ max-height:min(218.667vw,820px); min-height:670px } }
   があり、素の .top-fv{height:auto} では max-height が残ったままになる。
   結果、中身が820pxを超えた分だけ導線バーが下のセクションに重なった。
   ★メディアクエリで指定された値は、メディアクエリで打ち消す。 */
@media(min-width:960px) {
  .top-fv {
    max-height: none;
    min-height: 0;
  }
}

/* ★既定は .top-fv{height:100svh} の中で .top-fv__inner{flex:1; min-height:0} だった。
   高さを auto に変えると、min-height:0 のせいで inner が中身より小さく縮み、
   justify-content:center との合わせ技で **FVの中身がセクションの上下にはみ出す**。
   （実際にCTAが導線バーの下に飛び出した）
   高さで支える作りをやめたので、flex での伸縮も切って中身なりの高さに戻す。 */
.top-fv__inner {
  flex: 0 0 auto;
  min-height: auto;
  justify-content: flex-start;
  padding-top: 110px;
  padding-bottom: 40px;
}

@media(min-width:960px) {
  .top-fv__inner {
    padding-top: min(12.5vw, 160px);
    padding-bottom: min(4.6875vw, 60px);
  }
}

.top-fv__grid {
  display: grid;
  gap: 32px;
}

@media(min-width:960px) {
  .top-fv__grid {
    /* 文字より写真をわずかに大きく取る（本番サイトも写真側が大きい） */
    /* ★文字side を少し広く取る。1fr:1.08fr だと見出しが入りきらず
       「月額9,800円で始め／る、」と3行に割れた。
       金額の数字を大きくしたぶん、さらに 1.15fr → 1.22fr へ広げている。 */
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    gap: min(4.6875vw, 60px);
    align-items: center;
  }
}

/* 旧レイアウトは「下寄せ」だったので、本文を下へ押し出す余白が入っていた
   （PCで margin-top:180px）。中央配置に変えたので打ち消す */
.top-fv__body {
  margin-top: 0;
  padding-bottom: 0;
}

/* --- モックアップ。★影は付けない --- */
.top-fv__mockup img {
  display: block;
  width: 100%;
  height: auto;
}

@media(max-width:959px) {
  .top-fv__mockup {
    order: -1;
  }
}

/* --- 白地に合わせて文字色を反転 --- */
.top-fv__tagline {
  background-color: var(--c-surface-2);
  border-color: var(--c-surface-2);
  color: var(--c-brand-dark);
}

.top-fv__catch {
  color: var(--c-text);
}

/* 既定 56px。白地・2カラムだと収まらないので1段落とす。
   ★行の高さは 1.4 → 1.55 に上げている。金額の数字を1.38倍にしたぶん、
     1.4のままだと .top-fv__catch-line{overflow:hidden} に数字の下が切られる
     （実際に「9,800」の足が欠けた）。あの overflow は開幕演出（行を下から出す）に
     必要なので消せない。行の高さ側で逃がす。 */
@media(min-width:960px) {
  .top-fv__catch {
    font-size: min(3.59375vw, 46px);
    line-height: 1.55;
  }
}

@media(max-width:959px) {
  .top-fv__catch {
    line-height: 1.5;
  }
}

.top-fv__catch em {
  color: var(--c-price);
}

.top-fv__sub {
  color: var(--c-text);
}

.top-fv__note {
  margin-top: 16px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-text-sub);
}

@media(min-width:960px) {
  .top-fv__note {
    font-size: min(.859375vw, 11px);
    margin-top: min(1.5625vw, 20px);
  }
}

/* --- 旧バッジ3点の置き換え。値段ではなく「何がついてくるか」を並べる。
       ★モックアップの下に、丸いアイコン付きで横3つ --- */
.fv-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

@media(min-width:960px) {
  .fv-points {
    gap: min(1.5625vw, 20px);
    margin-top: min(2.1875vw, 28px);
  }
}

.fv-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* ★丸アイコン。中のSVGは currentColor なので、色は親で決まる */
.fv-point__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--c-surface-2);
  color: var(--c-brand);
  flex-shrink: 0;
}

.fv-point__icon svg {
  width: 26px;
  height: 26px;
}

@media(min-width:960px) {
  .fv-point__icon {
    width: min(4.6875vw, 60px);
    height: min(4.6875vw, 60px);
  }

  .fv-point__icon svg {
    width: min(2.34375vw, 30px);
    height: min(2.34375vw, 30px);
  }
}

.fv-point__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text-sub);
  line-height: 1.4;
}

@media(min-width:960px) {
  .fv-point__label {
    font-size: min(.9375vw, 12px);
  }
}

.fv-point__value {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-brand-dark);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .fv-point__value {
    font-size: min(1.171875vw, 15px);
  }
}

/* --- CTAまわり。白地に乗るので吹き出しの地色を変える --- */
.top-fv__cta {
  grid-template-columns: auto;
  justify-content: start;
  margin-top: 26px;
}

@media(min-width:960px) {
  .top-fv__cta {
    margin-top: min(2.8125vw, 36px);
  }
}

.btn__balloon {
  background-color: var(--c-surface-2);
  color: var(--c-brand-dark);
}

.btn__balloon::after {
  border-top-color: var(--c-surface-2);
}

/* --- 導線バー4分割。白抜きの罫線を主色に引き直す --- */
.top-fv__nav-item {
  border-top-color: var(--c-line);
  border-right-color: var(--c-line);
  border-bottom-color: var(--c-line);
}

.top-fv__nav-link {
  background-color: var(--c-surface);
  color: var(--c-brand-dark);
}

@media(min-width:960px) {
  .top-fv__nav-link:hover {
    background-color: var(--c-brand);
    color: var(--c-base);
  }
}


/* =========================================================================
   8. FVの背景に流れる英字／ヘッダーの影／CTAのオレンジ（2026-08-11 第5回）
   ========================================================================= */

/* --- FVの空気感（A：グレイン ／ B：ゆっくり動く光 ／ C：主役の微動）---
   ★英字マーキーは撤去した。大きい英字が動くとアパレル・イベントの記号になり、
     この商材にはポップすぎた。調べた範囲でも「高級に見せる動きは気づかせない動き」
     「過剰な動きは必死に見えて信用を損なう」で一致していたので、方針を変えた。
   ★白地が寂しく見えたのは、動きが足りないのではなく面の密度が足りなかったから。
     背景は質感で埋めて、動かすのは主役（モックアップ）1つだけにする。 */

.fv-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* --- B：ブランド色の淡い光。2つを別々の周期でゆっくり回す --- */
.fv-atmos__light {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

.fv-atmos__light--a {
  width: 46vw;
  height: 46vw;
  max-width: 660px;
  max-height: 660px;
  left: -8%;
  top: -12%;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--c-brand) 26%, transparent) 0%,
      color-mix(in srgb, var(--c-brand) 0%, transparent) 70%);
  animation: fv-drift-a 50s ease-in-out infinite;
}

.fv-atmos__light--b {
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  right: -10%;
  bottom: -24%;
  /* ★ピンクはやめた。値段の色として使っている色を面に流用すると、
     ブランドの色数が増えて印象が散る。2つとも青緑側で、濃さだけ変える。 */
  background: radial-gradient(circle,
      color-mix(in srgb, var(--c-brand-light) 30%, transparent) 0%,
      color-mix(in srgb, var(--c-brand-light) 0%, transparent) 70%);
  animation: fv-drift-b 64s ease-in-out infinite;
}

/* ★移動量は小さく。大きく動かすと「動いている」ことに気づかれてポップになる */
@keyframes fv-drift-a {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(6%, 5%) scale(1.08);
  }
}

@keyframes fv-drift-b {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-5%, -6%) scale(1.06);
  }
}

/* --- A：グレイン。動かさない。白い面に密度を出すためだけのもの ---
   SVGの feTurbulence をdata URIで敷いている（外部ファイル不要） */
/* ★グレイン＝紙のざらつき。写真のノイズと同じもので、
     拡大しないと粒は見えない。白ベタが「のっぺり」して見えるのを防ぐためだけの層。
     .05 だと存在がまったく分からなかったので .08 まで上げている。
     不要なら opacity を 0 にすればこの層だけ消える。 */
.fv-atmos__grain {
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* FVの中身は必ず背景より前に出す */
.top-fv__inner {
  z-index: 4;
}

/* --- C：主役だけ微かに浮かせる。7秒で3px --- */
.top-fv__mockup img {
  animation: fv-float 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes fv-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@media(prefers-reduced-motion: reduce) {

  .fv-atmos__light,
  .top-fv__mockup img {
    animation: none;
  }
}


/* --- ヘッダーを浮かせる ---
   白い角丸の帯なので、影が無いと白地のFVに溶けて境目が消える。 */
.header {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);
}


/* --- FVのCTAをオレンジに ---
   ★HTML側で .btn--cta-primary → .btn--cta-accent に変更している（FVの1本だけ）。
     他のCTA（中盤の帯・料金・最終・ヘッダー）は主色のまま。
     全部そろえるなら、その4箇所も同じクラスに変える。 */
.btn--cta-accent {
  --btn-dot-bg: var(--c-base);
  --btn-dot-arrow: var(--c-accent);
}


/* =========================================================================
   9. 見出しの金額と、3点の見せ方（2026-08-11 第6回）
   ========================================================================= */

/* --- 「9,800円」を 数字（欧文）＋円（和文・黒）に分ける ---
   数字は font-d.css で入れた --font-num（Oswald）。
   ページ中の他の金額（FVバッジ・料金プラン）と同じ書体なので揃う。 */
.catch-price {
  font-style: normal;
}

.catch-price__num {
  font-family: var(--font-num);
  font-weight: 700;
  /* ★見出しより一回り大きく。inline-block ＋ line-height で
     行の高さを押し広げずに文字だけ大きくしている */
  font-size: 1.38em;
  line-height: 1;
  letter-spacing: .005em;
  display: inline-block;
  vertical-align: -.04em;
  color: var(--c-price);
}

/* 「円」は黒・和文・見出しと同じ大きさ */
.catch-price__yen {
  font-family: var(--font-jp);
  font-size: .92em;
  color: var(--c-text);
  padding-left: .04em;
}

@media(max-width:959px) {
  .catch-price__num {
    font-size: 1.3em;
  }
}


/* --- モック下の3点をもっと目立たせる ---
   丸を淡色地→主色ベタにして、アイコンを白抜きに。値の文字も一段大きくした。 */
.fv-point__icon {
  background-color: var(--c-brand);
  color: var(--c-base);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-brand) 30%, transparent);
}

.fv-point__label {
  color: var(--c-text);
  letter-spacing: .04em;
}

.fv-point__value {
  font-size: 14px;
  color: var(--c-text);
}

@media(min-width:960px) {
  .fv-point__icon {
    width: min(5.46875vw, 70px);
    height: min(5.46875vw, 70px);
  }

  .fv-point__icon svg {
    width: min(2.734375vw, 35px);
    height: min(2.734375vw, 35px);
  }

  .fv-point__label {
    font-size: min(1.015625vw, 13px);
  }

  .fv-point__value {
    font-size: min(1.328125vw, 17px);
  }
}


/* =========================================================================
   11. 金額の数字を本番サイトと同じ書体に（2026-08-11 第8回）
   -------------------------------------------------------------------------
   本番 shudesign-web.com/hp_s/ を実測した結果：

     font-family : Jost, "Zen Kaku Gothic New", sans-serif
     font-weight : 700
     letter-spacing : -0.015em（9,800）／ -0.03em（0円の大きい数字）
     色          : 9,800 は主色 rgb(47,156,170) ／ 0円は rgb(236,86,128)

   Oswald（font-d.css で入れたD案の書体）はコンデンスドで、
   本番の Jost（幾何学サンセリフ）とは別物。**本番に合わせる。**
   ★--font-num を差し替えるだけで、FVバッジ・料金プラン・見出しの金額が全部揃う。
   ========================================================================= */

:root {
  --font-num: 'Jost', 'Futura', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
}

/* font-d.css が Oswald 前提で入れていた字間を、Jost 用に引き直す
   （Jost は幾何学サンセリフで字面が広いので、本番と同じマイナス字間にする） */
.badge__num,
.plan-card__price-num,
.offer-panel__value {
  letter-spacing: -.015em;
}

.catch-price__num {
  /* 本番の比率は 37.05px / 28.5px ＝ 1.3倍。それに合わせる
     （Oswald の 1.38倍のままだと、Jost は字面が広いので見出しが3行に割れる） */
  font-size: 1.3em;
  letter-spacing: -.02em;
}




/* =========================================================================
   12. ABOUT（役割）と WHY（価格の根拠）を、テンプレ01の作法で組み直す
       2026-08-11 第12回
   -------------------------------------------------------------------------
   ★指摘：「クオリティが下がってきている」
   実測すると、16セクション中「写真を全面に使った面」が **0個** になっていた。
   テンプレ01は「写真の面 → 主色ベタの面 → 淡い面」の落差でリズムを作る設計。
   その落差を自分で消していたのが、のっぺり見える原因だった。

   直し方
     ・ABOUT を**パララックス写真の面に戻す**（テンプレの署名）
       前回「見にくい」と言われたのは写真の上に本文を直接置いていたから。
       **見出しだけ白抜きで写真の上／読ませる部分は白カードの上**に分ける。
     ・WHY は、ABOUTが濃い面になったぶん**白地で軽く**する。
       強さは面ではなく**巨大数字**で出す（テンプレ01のバッジと同じ考え方）。
     ・2つの間に橋渡しを1つ置いて、「役割の話」→「じゃあいくら？」→「なんで安い？」を繋ぐ。
   ========================================================================= */

/* ---------------------------------------------------------------
   ABOUT：写真の面 ＋ 白カード
   --------------------------------------------------------------- */
:root {
  /* 白カードを置くので、写真は前より明るくてよい（前 .52） */
  --photo-overlay-opacity: .46;
}

/* ★上下の余白がおかしかった原因。
   テンプレの .sec-about が既に padding:175px 0（PC）を持っているのに、
   こちらで .sec-about__body にも 100px を足していて、**合計275px**になっていた。
   セクション側の余白だけ使う。 */
.sec-about__body {
  padding-top: 0;
  padding-bottom: 0;
}

/* ★読ませる部分は全部この白カードの中。写真の上に文字を直接置かない */
.role-card {
  margin-top: 32px;
  background-color: var(--c-base);
  border-radius: 20px;
  padding: 30px 22px 32px;
}

@media(min-width:960px) {
  .role-card {
    margin-top: min(4.6875vw, 60px);
    border-radius: min(1.5625vw, 20px);
    padding: min(4.375vw, 56px) min(5vw, 64px) min(4.6875vw, 60px);
  }
}

/* 問いかけ → 答え */
.role-card__ask {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-brand);
  font-feature-settings: "palt";
}

.role-card__answer {
  margin-top: 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--c-text);
  font-feature-settings: "palt";
}

.role-card__answer--warn {
  color: var(--c-price);
}

@media(min-width:960px) {
  .role-card__ask {
    font-size: min(1.25vw, 16px);
  }

  .role-card__answer {
    margin-top: min(.78125vw, 10px);
    font-size: min(2.8125vw, 36px);
  }
}

.role-card__text {
  margin-top: 22px;
  font-size: 14px;
  line-height: 2;
  color: var(--c-text);
  font-feature-settings: "palt";
}

.role-card__text--center {
  text-align: center;
}

@media(min-width:960px) {
  .role-card__text {
    margin-top: min(2.5vw, 32px);
    font-size: min(1.25vw, 16px);
    text-align: center;
  }
}

/* 「分からない」7項目。テンプレの罫線の作法（主色22%のライン）で仕切る */
.role-miss {
  margin: 26px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: 12px;
}

@media(min-width:960px) {
  .role-miss {
    margin-top: min(2.8125vw, 36px);
    padding-top: min(2.5vw, 32px);
    grid-template-columns: repeat(2, 1fr);
    column-gap: min(3.125vw, 40px);
    gap: min(1.09375vw, 14px) min(3.125vw, 40px);
  }
}

.role-miss li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-text);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .role-miss li {
    font-size: min(1.25vw, 16px);
  }
}

.role-miss li::before {
  content: "×";
  flex-shrink: 0;
  color: var(--c-price);
  font-weight: 700;
  line-height: 1.7;
}

/* 比較2枚は白カードの中。上に罫線を引いて区切る */
.role-card .sec-ai__cards {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--c-line);
}

@media(min-width:960px) {
  .role-card .sec-ai__cards {
    margin-top: min(3.125vw, 40px);
    padding-top: min(3.125vw, 40px);
  }
}

/* 「候補から外れます」の結論ブロック。カード内で面を変えて締める */
.role-card__result {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--c-line);
}

@media(min-width:960px) {
  .role-card__result {
    margin-top: min(3.125vw, 40px);
    padding-top: min(3.125vw, 40px);
  }
}


/* ---------------------------------------------------------------
   WHY：白地 ＋ 巨大数字 ＋ 主色ベタの締め
   --------------------------------------------------------------- */
.sec-ai {
  background-color: var(--c-base);
}

/* --- ABOUT からの橋渡し --- */
.why-bridge {
  text-align: center;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--c-line);
}

@media(min-width:960px) {
  .why-bridge {
    padding-bottom: min(3.75vw, 48px);
    margin-bottom: min(3.75vw, 48px);
  }
}

.why-bridge__q {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .why-bridge__q {
    font-size: min(1.5625vw, 20px);
  }
}

.why-bridge__a {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}

.why-bridge__a .catch-price__num {
  font-size: 56px;
  color: var(--c-price);
}

.why-bridge__a .catch-price__yen {
  font-size: 24px;
  color: var(--c-text);
}

.why-bridge__unit {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-sub);
}

@media(min-width:960px) {
  .why-bridge__a .catch-price__num {
    font-size: min(6.25vw, 80px);
  }

  .why-bridge__a .catch-price__yen {
    font-size: min(2.5vw, 32px);
  }

  .why-bridge__unit {
    font-size: min(1.25vw, 16px);
  }
}

/* --- 締め：主色ベタの帯。テンプレのCTA帯・FLOWと同じ作法 --- */
.why-close {
  margin-top: 32px;
  background-color: var(--c-brand);
  border-radius: 20px;
  padding: 30px 24px 32px;
  text-align: center;
}

@media(min-width:960px) {
  .why-close {
    margin-top: min(4.6875vw, 60px);
    border-radius: min(1.5625vw, 20px);
    padding: min(3.75vw, 48px) min(4.6875vw, 60px) min(4.0625vw, 52px);
  }
}

.why-close__lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--c-base);
  font-feature-settings: "palt";
}

.why-close__lead em {
  font-style: normal;
  color: var(--c-on-brand-em);
}

@media(min-width:960px) {
  .why-close__lead {
    font-size: min(2.1875vw, 28px);
  }
}

.why-close__text {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .4);
  font-size: 14px;
  line-height: 2;
  color: var(--c-base);
  font-feature-settings: "palt";
}

.why-close__text strong {
  color: var(--c-on-brand-em);
  font-size: 1.2em;
}

@media(min-width:960px) {
  .why-close__text {
    margin-top: min(2.1875vw, 28px);
    padding-top: min(2.1875vw, 28px);
    font-size: min(1.25vw, 16px);
  }
}

/* ★リードは写真の上に置くと読みにくいので、白カードの冒頭に移した。
   写真の上に置くのは「見出し」だけ、という切り分け。 */
.role-card__intro {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--c-line);
  text-align: center;
  font-size: 14px;
  line-height: 1.95;
  color: var(--c-text);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .role-card__intro {
    margin-bottom: min(2.8125vw, 36px);
    padding-bottom: min(2.34375vw, 30px);
    font-size: min(1.25vw, 16px);
  }
}


/* =========================================================================
   14. WHY の4項目：C（1枚の面を横罫で割る）× D（自分でやる/任せるの2列）
       2026-08-11 第14回
   -------------------------------------------------------------------------
   テンプレの比較表と同じ作法で組んでいる。
     ・1枚の白カードを罫線で4段に割る（料金表・比較表と同じ）
     ・**当社側の列だけ主色の淡い地で塗る**（比較表の .is-ours と同じ）
     ・番号は --c-figure（テンプレの巨大数字の色）
   これで「なぜ安いか」の説明が、そのまま提供価値の説明になる。
   ========================================================================= */

.whyx {
  margin-top: 34px;
  background-color: var(--c-base);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  overflow: hidden;
}

@media(min-width:960px) {
  .whyx {
    margin-top: min(4.6875vw, 60px);
    border-radius: min(1.5625vw, 20px);
  }
}

/* --- 見出し行。SPでは出さない（縦積みになるとかえって分かりにくい） --- */
.whyx__head {
  display: none;
}

@media(min-width:960px) {
  .whyx__head {
    display: grid;
    grid-template-columns: min(9.375vw, 120px) 1fr min(31.25vw, 400px);
    align-items: stretch;
  }

  .whyx__headNum {
    background-color: var(--c-surface);
  }

  .whyx__headSelf,
  .whyx__headOurs {
    padding: min(1.25vw, 16px) min(2.1875vw, 28px);
    font-size: min(1.25vw, 16px);
    font-weight: 700;
    letter-spacing: .04em;
  }

  .whyx__headSelf {
    background-color: var(--c-surface);
    color: var(--c-text-sub);
  }

  .whyx__headOurs {
    background-color: var(--c-brand);
    color: var(--c-base);
  }
}

/* --- 各段 --- */
.whyx__row {
  padding: 24px 20px 26px;
}

.whyx__row+.whyx__row {
  border-top: 1px solid var(--c-line);
}

@media(min-width:960px) {
  .whyx__row {
    display: grid;
    grid-template-columns: min(9.375vw, 120px) 1fr min(31.25vw, 400px);
    align-items: stretch;
    padding: 0;
  }
}

/* 番号 */
.whyx__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-figure);
}

@media(min-width:960px) {
  .whyx__num {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: min(5.46875vw, 70px);
    padding: min(2.34375vw, 30px) 0;
  }
}

/* 左：自分でやる場合 */
.whyx__self {
  margin-top: 10px;
}

@media(min-width:960px) {
  .whyx__self {
    margin-top: 0;
    padding: min(2.5vw, 32px) min(2.8125vw, 36px) min(2.5vw, 32px) min(1.5625vw, 20px);
  }
}

.whyx__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--c-text);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .whyx__title {
    font-size: min(1.71875vw, 22px);
  }
}

.whyx__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--c-text);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .whyx__text {
    margin-top: min(.9375vw, 12px);
    font-size: min(1.171875vw, 15px);
  }
}

/* 右：任せる場合。★ここだけ主色の淡い地（比較表の当社列と同じ扱い） */
.whyx__ours {
  margin-top: 16px;
  background-color: color-mix(in srgb, var(--c-brand) 8%, var(--c-base));
  border-radius: 12px;
  padding: 16px 18px 18px;
}

@media(min-width:960px) {
  .whyx__ours {
    margin-top: 0;
    border-radius: 0;
    padding: min(2.5vw, 32px) min(2.1875vw, 28px);
  }
}

.whyx__oursTitle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .03em;
  color: var(--c-brand-dark);
  font-feature-settings: "palt";
}

.whyx__oursTitle::before {
  content: "○";
  flex-shrink: 0;
  color: var(--c-brand);
}

@media(min-width:960px) {
  .whyx__oursTitle {
    font-size: min(1.40625vw, 18px);
  }
}

.whyx__oursText {
  margin-top: 8px;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text);
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .whyx__oursText {
    margin-top: min(.78125vw, 10px);
    font-size: min(1.09375vw, 14px);
  }
}


/* =========================================================================
   15. ABOUT：写真をやめて、丸い面＋淡いブルーにする（2026-08-11 第15回）
   -------------------------------------------------------------------------
   ★指摘：「被写体をもっと遠くにしたい」「圧迫感がありすぎる」「もう背景画像じゃなくてもいい。
     この形で普通に薄いブルーにしたらよくない？ この丸の形で。写真入れなくていいわ」

   何度やっても、この位置（縦に長いセクション）に横長写真を cover で入れると被写体が大きく出る。
   テンプレの**角丸240pxの「丸い面」の形だけ残して、中身を淡いブルーのベタ**にした。
   ========================================================================= */

.sec-about__bg-image {
  background-color: var(--c-surface-2);
}

/* 白抜き前提だった中身を、淡い面用に戻す */
.sec-about .heading1__title,
.sec-about .heading1__title em {
  color: var(--c-text);
}

.sec-about .heading1__lead {
  color: var(--c-text);
}

.sec-about .pull-quote {
  color: var(--c-text);
  border-top-color: var(--c-line);
}


/* =========================================================================
   16. 選ばれる理由：英字を小さく、日本語を主役に（2026-08-11 第15回）
   -------------------------------------------------------------------------
   ★指摘：「SMALL START とかの英語を大きくするのはいらない。微妙。
     ちゃんと"選ばれる理由"とかを大きくして、英語はちっちゃくでいい」
   ========================================================================= */

.rfeat__en {
  font-size: 13px;
  letter-spacing: .16em;
  color: color-mix(in srgb, var(--c-brand) 60%, transparent);
}

@media(min-width:960px) {
  .rfeat__en {
    font-size: min(1.09375vw, 14px);
  }
}

/* 「選ばれる理由 01」を1段上げる */
.rfeat__label {
  margin-top: 10px;
  font-size: 16px;
}

@media(min-width:960px) {
  .rfeat__label {
    margin-top: min(.78125vw, 10px);
    font-size: min(1.40625vw, 18px);
  }
}

/* 日本語の見出しが主役 */
.rfeat__title {
  font-size: 23px;
}

@media(min-width:960px) {
  .rfeat__title {
    font-size: min(2.5vw, 32px);
  }
}

/* 巨大な輪郭数字は、英字が小さくなったぶん重なりが目立つので薄くする */
.rfeat__body {
  background-size: 120px auto;
}

@media(min-width:960px) {
  .rfeat__body {
    background-size: min(14.0625vw, 180px) auto;
    background-position: left -18px top -26px;
  }
}

/* 英字は小さくしたので1行で置く（2行に折れると数字と重なって読めない） */
.rfeat__en {
  white-space: nowrap;
}


/* =========================================================================
   17. ABOUT の面を楕円にして、柄を敷く（2026-08-11 第16回）
   -------------------------------------------------------------------------
   ★指摘：「下が楕円になってない。楕円にしたい」「背景に柄を入れたい」
   既定は border-radius:240px の角丸長方形で、四隅は丸いが「楕円」には見えない。
   横は大きく・縦は浅い楕円コーナーにして、上下が弧を描く形にする。
   ========================================================================= */

.sec-about__bg-image {
  /* 横 50%（≒712px）× 縦 150px の楕円コーナー。上下が緩やかな弧になる */
  border-radius: 50% / 150px;
  overflow: hidden;
}

@media(min-width:960px) {
  .sec-about__bg-image {
    border-radius: 50% / min(15.625vw, 200px);
  }
}

/* --- 柄 ---
   テンプレ01は REASON の背後に「巨大な淡色円」を置く作法を持っている（.sec-reason__circle）。
   同じ考え方で、淡いブルーの面の上にさらに薄い円を2つ重ねる。
   ＋ 細かいドットを敷いて、ベタ1色の寂しさをなくす。 */
.sec-about__bg-image::before,
.sec-about__bg-image::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: var(--c-surface-2-lite);
  pointer-events: none;
}

.sec-about__bg-image::before {
  width: 620px;
  height: 620px;
  top: -140px;
  left: -180px;
}

.sec-about__bg-image::after {
  width: 460px;
  height: 460px;
  right: -140px;
  bottom: 60px;
}

@media(min-width:960px) {
  .sec-about__bg-image::before {
    width: min(70.3125vw, 900px);
    height: min(70.3125vw, 900px);
    top: min(-15.625vw, -200px);
    left: min(-19.53125vw, -250px);
  }

  .sec-about__bg-image::after {
    width: min(54.6875vw, 700px);
    height: min(54.6875vw, 700px);
    right: min(-15.625vw, -200px);
    bottom: min(3.90625vw, 50px);
  }
}

/* ドットの柄。主色の8%で、近づかないと粒が見えない濃さにする */
.sec-about__bg-image {
  background-image: radial-gradient(color-mix(in srgb, var(--c-brand) 14%, transparent) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
}


/* =========================================================================
   18. FVの3点：手書きSVGアイコンに合わせた調整（2026-08-11 第16回）
   ========================================================================= */

/* ★アイコンが画像（ImageGen）になったので、丸の地は敷かない。
   紙の質感に色面が重なると、せっかくの厚みと影が死ぬ。 */
.fv-point__icon {
  background-color: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
}

.fv-point__icon img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

@media(min-width:960px) {
  .fv-point__icon img {
    width: min(5.859375vw, 75px);
    height: min(5.859375vw, 75px);
  }
}

/* ラベルが長くなった（制作・サーバー・保守）ので、折り返しを許して字を詰める */
.fv-point__label {
  font-size: 10px;
  letter-spacing: .02em;
  line-height: 1.35;
}

@media(min-width:960px) {
  .fv-point__label {
    font-size: min(.9375vw, 12px);
  }
}



/* =========================================================================
   19. 限定オファーの見せ方（2026-08-11 第19回・合意のうえ実装）
   -------------------------------------------------------------------------
   ★ここは一度オレンジのベタ帯で実装して不採用になっている。
     以後この手の「目立たせ方」は、**実装前にサンプルを出して合意してから**入れる。

   決まったもの
     ・FV     … 丸バッジ b3-03（ピンク）をモックアップに重ねる
     ・料金   … カンプ c2-01 の形（淡い枠のボックスに「タグ｜初期制作費｜55,000円 → 0円」）

   ★バッジは Codex の **ImageGen（img2img・参照はFVのスクショ）** の出力そのもの。
     紙の質感・リボン・波形の縁は SVG作図では出ない。
     （最初コード作図のものが納品されて差し戻した。色数で判別できる＝
       コード作図はユニーク色1,000〜2,000/上位5色95%、ImageGenは16,000〜48,000/30〜50%）
   ========================================================================= */

/* --- 料金プランの限定オファー（カンプ c2-01） --- */
.plan-offer {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  background-color: color-mix(in srgb, var(--c-brand) 6%, var(--c-base));
  border: 1px solid var(--c-brand);
  border-radius: 12px;
  padding: 14px 18px;
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .plan-offer {
    margin-top: min(1.875vw, 24px);
    gap: min(1.25vw, 16px);
    border-radius: min(.9375vw, 12px);
    padding: min(1.40625vw, 18px) min(2.1875vw, 28px);
  }
}

.plan-offer__tag {
  background-color: var(--c-brand);
  color: var(--c-base);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media(min-width:960px) {
  .plan-offer__tag {
    font-size: min(1.09375vw, 14px);
    padding: min(.390625vw, 5px) min(1.40625vw, 18px);
  }
}

.plan-offer__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
}

@media(min-width:960px) {
  .plan-offer__name {
    font-size: min(1.40625vw, 18px);
  }
}

.plan-offer__del {
  font-family: var(--font-num);
  font-size: 18px;
  color: var(--c-text-sub);
  text-decoration: line-through;
}

@media(min-width:960px) {
  .plan-offer__del {
    font-size: min(1.71875vw, 22px);
  }
}

.plan-offer__arrow {
  color: var(--c-brand);
  font-size: 16px;
}

@media(min-width:960px) {
  .plan-offer__arrow {
    font-size: min(1.5625vw, 20px);
  }
}

/* 「0」だけ大きくピンク。ページの「値段はピンク」のルール通り */
.plan-offer__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--c-price);
}

@media(min-width:960px) {
  .plan-offer__num {
    font-size: min(4.375vw, 56px);
  }
}

.plan-offer__unit {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
}

@media(min-width:960px) {
  .plan-offer__unit {
    font-size: min(1.71875vw, 22px);
  }
}

.plan-card__offer-note {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--c-text-sub);
}

@media(min-width:960px) {
  .plan-card__offer-note {
    font-size: min(1.09375vw, 14px);
  }
}


/* =========================================================================
   20. FVの3点を「白いカード」で囲う（2026-08-12）
   -------------------------------------------------------------------------
   ★参考：生駒の丘のFVにある3枚の白カード（口コミ4.91／施術歴10年／完全予約制1名）。
     アイコン → 小さいラベル → 大きい値、の縦積みを白いカードで囲う形。
   ★丸バッジは不採用になったので削除済み。限定オファーはCTAの上の吹き出しに移した。
   ========================================================================= */

.fv-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

@media(min-width:960px) {
  .fv-points {
    gap: min(1.09375vw, 14px);
    margin-top: min(2.34375vw, 30px);
  }
}

.fv-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background-color: var(--c-base);
  border-radius: 16px;
  padding: 16px 8px 18px;
  text-align: center;
  /* ★カードを「浮かせる」ための影。
     最初 0 4px 14px / .06 でかけたが、FVの地が白〜淡色なので**浮いて見えなかった**。
     浮いて見えるところまで上げる。近い影＋遠い影の2枚重ねにすると、
     濃くしすぎずに立体感が出る（1枚で濃くすると汚れて見える）。 */
  box-shadow:
    0 12px 28px rgba(26, 60, 66, .13),
    0 3px 8px rgba(26, 60, 66, .07);
}

@media(min-width:960px) {
  .fv-point {
    border-radius: min(1.40625vw, 18px);
    padding: min(1.5625vw, 20px) min(.9375vw, 12px) min(1.71875vw, 22px);
    gap: min(.46875vw, 6px);
  }
}

.fv-point__icon img {
  width: 52px;
  height: 52px;
}

@media(min-width:960px) {
  .fv-point__icon img {
    width: min(4.6875vw, 60px);
    height: min(4.6875vw, 60px);
  }
}

.fv-point__label {
  font-size: 10.5px;
  color: var(--c-text-sub);
  letter-spacing: .02em;
  line-height: 1.35;
}

@media(min-width:960px) {
  .fv-point__label {
    font-size: min(.9375vw, 12px);
  }
}

.fv-point__value {
  font-size: 15px;
  color: var(--c-brand-dark);
}

@media(min-width:960px) {
  .fv-point__value {
    font-size: min(1.40625vw, 18px);
  }
}


/* =========================================================================
   21. CTAまわり（2026-08-12）
   -------------------------------------------------------------------------
   ・吹き出しは「相談だけでも大丈夫です」→ 限定キャンペーンの告知に変更
   ・ボタンは**細長く**する（高さを下げて横幅を広げる）
   ========================================================================= */

.btn__balloon {
  background-color: var(--c-price);
  color: var(--c-base);
  font-size: 12px;
  padding: 5px 16px;
  white-space: nowrap;
}

.btn__balloon::after {
  border-top-color: var(--c-price);
}

@media(min-width:960px) {
  .btn__balloon {
    font-size: min(1.09375vw, 14px);
    padding: min(.46875vw, 6px) min(1.5625vw, 20px);
  }
}

/* ★細長く。
   ★padding を削るだけでは効かない。中の矢印の丸（.btn の疑似要素）が高さを押し上げていて、
     padding 38px + 文字27px = 65px のはずが **90px** になっていた。
     高さを直接決めて、padding は0にするのが確実。 */
.top-fv__cta {
  grid-template-columns: minmax(0, 400px);
}

@media(min-width:960px) {
  .top-fv__cta {
    grid-template-columns: minmax(0, min(33.59375vw, 430px));
  }
}

.top-fv .btn--cta-accent {
  width: 100%;
  height: 62px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@media(min-width:960px) {
  .top-fv .btn--cta-accent {
    height: min(5.46875vw, 70px);
  }
}


/* =========================================================================
   22. 中盤CTAのボタン（2026-08-12）
   ========================================================================= */

/* 白いボタン（.btn--white）をやめて、FVと同じオレンジ1本にそろえた。
   ★.cta__buttons はテンプレでは display:grid の1カラム。
     そのままだと親（.inner--narrow 最大900px）の幅いっぱいに伸びて、
     「大きいボタン」ではなく ただの全幅バー になる。
     幅を決めて中央に置かないと「真ん中にドーン」にならない。 */
/* ★max-width ＋ margin:auto では効かなかった。
   .cta__buttons は grid-template-columns の指定がなく、列幅が auto＝中身なり。
   そこに width:100% の子を置くと参照が循環して、ボタンは文字幅（289px）に縮む。
   列そのものの幅を決めて、列ごと中央に寄せるのが正解（FVのCTAと同じ直し方）。 */
.cta__buttons--single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

@media(min-width:960px) {
  .cta__buttons--single {
    grid-template-columns: minmax(0, min(43.75vw, 560px));
  }
}

.cta__buttons--single .btn--cta-accent {
  width: 100%;
  min-width: 0;
  /* 細長く＝高さは抑える。padding ではなく height で決める
     （中の矢印の丸が高さを押し上げるため。FVの時と同じ理由） */
  height: 66px;
  padding-top: 0;
  padding-bottom: 0;
}

@media(min-width:960px) {
  .cta__buttons--single .btn--cta-accent {
    /* FVのCTA（430px）より一回り大きく。ページ内で一番大きいボタンにする */
    max-width: min(43.75vw, 560px);
    height: min(6.09375vw, 78px);
    font-size: min(1.40625vw, 18px);
  }
}


/* =========================================================================
   23. 色と導線の整理（2026-08-12 第24回）
   ========================================================================= */

/* --- 23-1. FVの「9,800」をピンク → 緑（主色）に戻す ---
   ★ページ中の金額の色を決めている --c-price は触らない。
     料金プランの金額・比較表の金額はピンクのまま。FVの1箇所だけ緑にする。 */
.top-fv__catch em,
.top-fv .catch-price__num {
  color: var(--c-brand);
}


/* --- 23-2. ヘッダー右のCTAをオレンジの丸いボタンに ---
   既定は「白地×緑文字」。FV・中盤CTA・送信ボタンが全部オレンジになったので、
   ヘッダーもそろえる。角丸は 20px → 999px の完全な丸に。 */
.header__cta-btn {
  background-color: var(--c-accent);
  color: var(--c-base);
  border-radius: 999px;
}

@media(min-width:960px) {
  .header__cta-btn {
    border-radius: 999px;
  }

  /* hover は「濃いオレンジ」に。既定の brand-dark（緑）だと色が飛ぶ */
  .header__cta-btn:hover {
    background-color: #cf6b28;
    color: var(--c-base);
  }
}


/* --- 23-3. 右下の追従ボタンもオレンジに ---
   スクロール追従ヘッダー（.sticky-header）はHTMLごと削除した。
   追う導線はこの右下1本だけにする。 */
.cta-popup__item--line {
  background-color: var(--c-accent);
}


/* --- 23-4. お問い合わせは全部黒文字 ---
   見出しの強調・リード・注記まで、色を持っているものを全部 --c-text に落とす。
   このセクションで色を持つのは送信ボタンのオレンジだけ、という状態にする。 */
.sec-contact .heading1__title,
.sec-contact .heading1__title em,
.sec-contact .heading1__lead,
.sec-contact .cform__privacy,
.sec-contact .cform__label {
  color: var(--c-text);
}

/* 「必須」バッジ。既定はオレンジ地で、送信ボタンのオレンジとぶつかる。
   黒地×白文字にして、オレンジをボタン専用にする */
.sec-contact .cform__req {
  background-color: var(--c-text);
  color: var(--c-base);
}

.sec-contact .cform__any {
  background-color: var(--c-surface);
  color: var(--c-text);
}


/* --- 23-5. 送信ボタン ---
   .btn--primary（緑・角丸8px・左右パディング）から
   .btn--cta-accent（オレンジ）に差し替えたので、幅と高さを中盤CTAにそろえる。
   ★.cform__submit は flex なので、grid の時とちがって幅は max-width で決まる。 */
.cform__submit .btn--cta-accent {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  height: 66px;
  padding-top: 0;
  padding-bottom: 0;
}

@media(min-width:960px) {
  .cform__submit .btn--cta-accent {
    max-width: min(43.75vw, 560px);
    height: min(6.09375vw, 78px);
    font-size: min(1.40625vw, 18px);
  }
}


/* --- 23-6. プロフィールを、ページ全体のルールに戻す ---
   何が「1箇所だけ違う」状態だったか（実測）
     ・見出しが「制作者＝緑／プロフィール＝オレンジ」。
       他のセクションは全部「地＝黒／強調＝緑」なので、ここだけ配色ルールが別だった
     ・顔写真と「理由」カードに **ベタ影（8〜10pxのオフセット影）** がかかっていた。
       この影を使っているセクションはページ内でここだけ
   → 両方やめて、他のセクションと同じ見え方に戻す。
      背景の淡色面（--c-surface）はそのまま。主色ベタに戻すと
      直前のFLOWと主色の壁が2枚続く（2026-08-11に「青すぎ」と指摘された状態）。 */

.sec-profile .heading1--white .heading1__title {
  color: var(--c-text);
}

.sec-profile .heading1--white .heading1__title em {
  color: var(--c-brand);
}

/* ベタ影をやめる */
.sec-profile__career {
  box-shadow: none;
}

.sec-profile__photo {
  box-shadow: none;
}

@media(min-width:960px) {
  .sec-profile__photo {
    box-shadow: none;
  }
}


/* =========================================================================
   24. ROLE（役割とは）とPRICING（定額サービスの理由）の確定版（2026-08-12 第25回）
   -------------------------------------------------------------------------
   デザイン案 R-4 × W-4 を採用（_proposals/role-why-designs2.html）。
   ・ROLE＝既存の白カードのまま、リストの横に写真2枚（縁に掛ける写真は不採用）
   ・PRICING＝1枚のカードを罫で割る。番号なし・英字小ラベル・235,200円は本文サイズ
   ========================================================================= */

/* --- ROLE：問いのフックと否定の行 --- */
.role-card__hook {
  margin-top: 6px;
  text-align: center;
  font-size: 12.5px;
  color: var(--c-text-sub);
  font-feature-settings: "palt";
}

.role-card__deny {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  line-height: 2;
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .role-card__hook {
    font-size: min(1.09375vw, 14px);
  }

  .role-card__deny {
    margin-top: min(2.03125vw, 26px);
    font-size: min(1.21875vw, 15.5px);
  }
}

/* --- ROLE：答えの色。地は黒のまま、<em>だけ色を持つ ---
   ★既定の .role-card__answer--warn は「行全体がピンク」だったが、
     確定版は「他社を選ぶ、という結論」だけピンクにする。地の色を戻す。 */
.role-card__answer em {
  font-style: normal;
  color: var(--c-brand);
}

.role-card__answer--warn {
  color: var(--c-text);
}

.role-card__answer--warn em {
  color: var(--c-price);
}

/* --- ROLE：7項目リスト＋写真2枚の2段組 ---
   区切り罫はこのラッパーが持つ。中の .role-miss の罫・余白・2列指定は打ち消す。 */
.role-miss-wrap {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}

.role-miss-wrap .role-miss {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.role-miss-pics {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.role-miss-pics img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
}

@media(min-width:960px) {
  .role-miss-wrap {
    margin-top: min(2.8125vw, 36px);
    padding-top: min(2.5vw, 32px);
    display: grid;
    grid-template-columns: 1fr min(18.4375vw, 236px);
    gap: min(2.8125vw, 36px);
    align-items: center;
  }

  /* リストは1列に戻す（2列だと写真の分の幅がない） */
  .role-miss-wrap .role-miss {
    grid-template-columns: 1fr;
    gap: min(1.09375vw, 14px);
  }

  .role-miss-pics {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: min(1.09375vw, 14px);
  }

  .role-miss-pics img {
    height: min(10.9375vw, 140px);
    border-radius: min(.9375vw, 12px);
  }
}

/* --- PRICING：1枚のカードを罫で割る（番号なし） --- */
.pricing-card {
  margin-top: 32px;
  background-color: var(--c-base);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  padding: 6px 22px;
  /* FVの白カードと同じ2枚重ねの影（近い影＋遠い影） */
  box-shadow:
    0 12px 28px rgba(26, 60, 66, .07),
    0 3px 8px rgba(26, 60, 66, .04);
}

@media(min-width:960px) {
  .pricing-card {
    margin-top: min(4.6875vw, 60px);
    border-radius: min(1.5625vw, 20px);
    padding: min(1.25vw, 16px) min(5vw, 64px);
  }
}

.pricing-row {
  padding: 30px 0;
}

.pricing-row+.pricing-row {
  border-top: 1px solid var(--c-line);
}

@media(min-width:960px) {
  .pricing-row {
    padding: min(3.28125vw, 42px) 0;
  }
}

.pricing-row__tag {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--c-brand);
}

.pricing-row__title {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .03em;
  font-feature-settings: "palt";
}

.pricing-row__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 2.05;
  font-feature-settings: "palt";
}

@media(min-width:960px) {
  .pricing-row__tag {
    font-size: min(.9765625vw, 12.5px);
  }

  .pricing-row__title {
    margin-top: min(.46875vw, 6px);
    font-size: min(1.640625vw, 21px);
  }

  .pricing-row__text {
    margin-top: min(1.09375vw, 14px);
    font-size: min(1.1328125vw, 14.5px);
  }
}

/* 235,200円。太字＋数字書体だけで示す。大きくしない（高く感じるため） */
.pricing-money {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.12em;
  letter-spacing: -.01em;
}


/* =========================================================================
   25. FVの目立たせ・CTAアニメ・各所の色調整（2026-08-12 第27回）
   ========================================================================= */

/* --- 25-1. キャンペーンラベルの「初期制作費0円」を黄色に ---
   ラベルの面はピンク（--c-price）なので、黄色は面の上で一番飛ぶ色。 */
.balloon-zero {
  font-style: normal;
  color: #ffe14d;
  font-weight: 900;
}

/* --- 25-2. CTAボタンのアニメーション ---
   2つ重ねる：①ゆっくり呼吸する拡縮 ②3.6秒ごとに光が走る。
   ★.btn の ::before/::after は矢印の丸で使用済みなので、
     光はHTML側に足した <i class="btn-shine"> でやる（.btn は overflow:hidden 済み）。
   ★.btn は js-scroll-anime で GSAP がインラインの transform を触るが、
     実行中のCSSアニメーションはインラインスタイルより優先されるので共存できる。 */
@keyframes cta-breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

@keyframes cta-shine {
  0% {
    left: -80%;
  }

  55%,
  100% {
    left: 130%;
  }
}

.btn--anim {
  animation: cta-breathe 2.6s ease-in-out infinite;
  will-change: transform;
}

.btn-shine {
  position: absolute;
  top: -20%;
  left: -80%;
  width: 46%;
  height: 140%;
  background: linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, .55) 50%,
      transparent 100%);
  transform: skewX(-18deg);
  animation: cta-shine 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* 視差効果を切っている人には動かさない */
@media (prefers-reduced-motion: reduce) {

  .btn--anim,
  .btn-shine {
    animation: none;
  }
}

/* --- 25-3. ROLEの写真：2枚 → 1枚ドーン --- */
.role-miss-pics--single {
  grid-template-columns: 1fr;
}

.role-miss-pics--single img {
  height: 180px;
}

@media(min-width:960px) {

  /* 1枚なので幅も一回り広く取る */
  .role-miss-wrap:has(.role-miss-pics--single) {
    grid-template-columns: 1fr min(23.4375vw, 300px);
  }

  .role-miss-pics--single img {
    height: min(23.4375vw, 300px);
  }
}

/* --- 25-4. 制作の流れ：見出しを全部白に、注記をひかえめに --- */
.sec-flow .heading1--white .heading1__title,
.sec-flow .heading1--white .heading1__title em {
  color: var(--c-base);
}

.sec-flow__note {
  font-size: 11.5px;
  opacity: .85;
}

@media(min-width:960px) {
  .sec-flow__note {
    font-size: min(.9765625vw, 12.5px);
  }
}

/* --- 25-5. プロフィール：見出しを全部黒に、英字ラベルを他セクションと同じに ---
   前（4番・23-6）で「制作者＝黒／プロフィール＝緑」にしたが、
   「全部黒字でいい・ラベルは白抜きに青文字で他と揃える」の指示で更新。 */
.sec-profile .heading1--white .heading1__label {
  color: var(--c-brand);
  background-color: var(--c-base);
  border-color: var(--c-brand);
}

.sec-profile .heading1--white .heading1__title,
.sec-profile .heading1--white .heading1__title em {
  color: var(--c-text);
}


/* =========================================================================
   26. CTAバルーンの横展開と文言調整の補助（2026-08-12 第28回）
   ========================================================================= */

/* 中盤CTA・送信ボタンの上にもキャンペーンバルーンを置いた。
   .btn-cta-wrap は flex column（テンプレ既定）なので、
   ボタンが width:100% を効かせられるようにラッパーの幅を確保する。 */
.cta__buttons--single .btn-cta-wrap,
.cform__submit .btn-cta-wrap {
  width: 100%;
}

.cta__buttons--single .btn-cta-wrap .btn--cta-accent,
.cform__submit .btn-cta-wrap .btn--cta-accent {
  align-self: center;
}

/* お問い合わせのリードに足したキャンペーンの一文。地の文と差をつける */
.sec-contact .heading1__lead strong {
  font-weight: 700;
}


/* =========================================================================
   27. FVボタン位置・ROLEリスト中央化・1年計算（2026-08-12 第29回）
   ========================================================================= */

/* --- 27-1. FVのCTAを下げて、右の3カードと下端を近づける --- */
@media(min-width:960px) {
  .top-fv__cta {
    margin-top: min(3.90625vw, 50px);
  }
}

/* --- 27-2. ROLE：写真をやめたので、リストを中央のブロックとして据える ---
   罫線の間にリストだけを置き、左右の余白で「ここが本体」と分からせる。 */
.role-miss-wrap--nopic {
  display: block;
}

.role-miss-wrap--nopic .role-miss {
  max-width: 560px;
  margin: 0 auto;
}

@media(min-width:960px) {
  .role-miss-wrap--nopic {
    display: block;
  }

  .role-miss-wrap--nopic .role-miss {
    max-width: min(43.75vw, 560px);
  }
}


/* =========================================================================
   28. バルーン拡大・ホバー・お問い合わせ・右下追従・開幕ロゴ（2026-08-12 第30回）
   ========================================================================= */

/* --- 28-1. キャンペーンバルーンをボタンと同じ幅に（FV・中盤CTA） --- */
.btn-cta-wrap {
  width: 100%;
}

.btn-cta-wrap .btn__balloon {
  width: 100%;
  text-align: center;
  padding: 8px 14px;
  font-size: 13px;
}

@media(min-width:960px) {
  .btn-cta-wrap .btn__balloon {
    padding: min(.78125vw, 10px) min(1.09375vw, 14px);
    font-size: min(1.171875vw, 15px);
  }
}

/* --- 28-2. オレンジのCTAのホバーは「少し暗くなるだけ」に ---
   既定は 白地×オレンジ文字への反転で、面が白いセクションだと
   ボタンが消えたように見えていた。 */
@media(min-width:960px) {
  .btn--cta-accent:hover {
    background-color: #cf6b28;
    color: var(--c-base);
    border-color: transparent;
    --btn-dot-bg: var(--c-base);
    --btn-dot-arrow: #cf6b28;
  }
}

/* --- 28-3. 「必須」バッジを黒 → ピンクに --- */
.sec-contact .cform__req {
  background-color: var(--c-price);
  color: var(--c-base);
}

/* --- 28-4. お問い合わせのリードを中央揃えに --- */
.sec-contact .heading1__lead {
  text-align: center;
}

/* --- 28-5. ROLE：リストの上の「よくある事例」タイトル --- */
.role-miss__title {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-brand);
  margin-bottom: 14px;
}

@media(min-width:960px) {
  .role-miss__title {
    font-size: min(1.25vw, 16px);
    margin-bottom: min(1.40625vw, 18px);
  }
}

/* --- 28-6. 右下の追従ボタン：大きく＋上にキャンペーンの吹き出し --- */
.cta-popup {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cta-popup__balloon {
  background-color: var(--c-price);
  color: var(--c-base);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  font-feature-settings: "palt";
  box-shadow: 0 4px 14px rgba(26, 60, 66, .18);
}

/* ボタン本体を大きく（左へ伸ばす） */
.cta-popup__item {
  font-size: 15px;
  padding: 16px 28px;
}

@media(min-width:960px) {
  .cta-popup__item {
    font-size: min(1.25vw, 16px);
    padding: min(1.40625vw, 18px) min(2.5vw, 32px);
  }
}

/* --- 28-7. 開幕演出を「白地にロゴだけ」のシンプル版に ---
   円のマスクと主色の幕はやめる。動きはJS側（app.js initSplash）も書き換え済み。 */
.splash {
  background-color: var(--c-base);
}

.splash__bg {
  display: none;
}

.splash__circle {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  scale: 1;
}

.splash__circle-inner {
  width: auto;
  height: auto;
  background: none;
  scale: 1;
  overflow: visible;
}

.splash__logo {
  translate: 0 0;
}


/* =========================================================================
   29. 右下追従の寸法直し・必須バッジ青緑・実写差し替え（2026-08-12 第31回）
   ========================================================================= */

/* --- 29-1. 右下追従：バルーンとボタンの幅をそろえる ---
   ★28-6の padding 追加は、テンプレ側の width:150px（固定幅）とぶつかって
     ボタンが縮んで見えていた。固定幅をやめて「バルーンと同じ幅に伸ばす」。 */
.cta-popup {
  align-items: stretch;
  padding: 0 16px;
}

.cta-popup__balloon {
  text-align: center;
}

.cta-popup__container {
  justify-content: stretch;
}

.cta-popup__item {
  width: 100%;
  height: 60px;
  font-size: 15px;
  padding: 0 20px;
}

@media(min-width:960px) {
  .cta-popup {
    padding: 0;
  }

  .cta-popup__item {
    width: 100%;
    height: min(5vw, 64px);
    font-size: min(1.25vw, 16px);
    padding: 0 min(2.03125vw, 26px);
  }
}

/* --- 29-2. 「必須」バッジ：ピンク → いつもの青緑 --- */
.sec-contact .cform__req {
  background-color: var(--c-brand);
  color: var(--c-base);
}


/* =========================================================================
   30. 選ばれる理由の背景を白に（2026-08-12 第32回）
   -------------------------------------------------------------------------
   「定額サービスの理由」（白地）を削除した結果、
   ROLE（淡ブルーの楕円面）と選ばれる理由（淡水色面）が隣り合って
   淡い色面が2連続になったため。飾りの大円はさらに薄い面として残す。
   ========================================================================= */

.sec-reason {
  background-color: var(--c-base);
}

/* 大円は白地の上では --c-surface-2-lite だと強いので、さらに淡く */
.sec-reason__circle {
  background-color: color-mix(in srgb, var(--c-brand) 5%, var(--c-base));
}


/* =========================================================================
   31. 選ばれる理由の見出し・バルーンの文字を大きく（2026-08-13 第33回）
   ========================================================================= */

/* バルーン：「キャンペーン中」を取った分、文字を大きく */
.btn-cta-wrap .btn__balloon {
  font-size: 14px;
}

@media(min-width:960px) {
  .btn-cta-wrap .btn__balloon {
    font-size: min(1.328125vw, 17px);
  }
}

.cta-popup__balloon {
  font-size: 13.5px;
  padding: 7px 18px;
}

/* 見出しが2行の長文になったので、行間だけ少し詰める */
.sec-reason .heading1__title {
  line-height: 1.55;
}

/* ★見出しが長文になったので、このセクションだけ一回り小さく。
   36pxのままだと1行目が入りきらず「が」だけが2行目に落ちていた（実測）。 */
.sec-reason .heading1__title {
  font-size: 24px;
}

@media(min-width:960px) {
  .sec-reason .heading1__title {
    font-size: min(2.34375vw, 30px);
  }
}


/* =========================================================================
   32. 右下追従を本番LP（lp_meta .flbtn）型に（2026-08-17 第34回）
   -------------------------------------------------------------------------
   参考実装（実測）: position:fixed; right:0; bottom:0; width:300px;
   background rgba(0,168,181,.7); border-radius:20px 0 0 0;
   ＝「半透明の主色面が右下にドッキングして、面ごとついてくる」形。
   ========================================================================= */

.cta-popup {
  right: 0;
  bottom: 0;
  left: auto;
  width: 100%;
  padding: 10px 14px 14px;
  background-color: color-mix(in srgb, var(--c-brand) 72%, transparent);
  border-radius: 0;
  align-items: stretch;
  gap: 8px;
}

@media(min-width:960px) {
  .cta-popup {
    right: 0;
    bottom: 0;
    width: 320px;
    padding: 12px 16px 16px;
    border-radius: 20px 0 0 0;
  }
}

/* 煽り行：ピンクのピルをやめて、面の上の白文字「＼〜／」に */
.cta-popup__balloon {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: var(--c-base);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
  white-space: nowrap;
}

@media(min-width:960px) {
  .cta-popup__balloon {
    font-size: min(1.09375vw, 14px);
  }
}

/* ボタン：面の上で立つオレンジに（緑面×緑ボタンだと沈む） */
.cta-popup__item--line {
  background-color: var(--c-accent);
  border-radius: 8px;
}

@media(min-width:960px) {
  .cta-popup__item--line:hover {
    background-color: #cf6b28;
  }
}


/* =========================================================================
   33. スマホ幅の総直し（2026-08-18 第35回）
   -------------------------------------------------------------------------
   実機確認で「崩れまくり」の指摘。SPは大改修後一度も見ていなかった。
   ========================================================================= */

@media(max-width:959px) {

  /* --- 33-1. ヘッダー：ハンバーガーを右端に --- */
  .header__hamburger {
    margin-left: auto;
  }

  /* --- 33-2. FVの並び：文字 → モック＋3点 → ボタン ---
     テンプレSPは「モックが先」だが、指定は
     タグライン → キャッチ → サブ → 3点カード → CTA。
     ★.top-fv__body を display:contents にして、子をグリッドの直接の子として
       order で並べ替える（HTMLはPCと共通のまま）。 */
  .top-fv__grid {
    display: flex;
    flex-direction: column;
  }

  .top-fv__body {
    display: contents;
  }

  .top-fv__tagline {
    order: 1;
  }

  .top-fv__catch {
    order: 2;
  }

  .top-fv__sub {
    order: 3;
  }

  .top-fv__mockup {
    order: 4;
    margin-top: 18px;
  }

  .top-fv__cta {
    order: 5;
    margin-top: 22px;
  }

  /* --- 33-3. キャッチ：1行に収まるサイズに --- */
  .top-fv__catch {
    font-size: 27px;
    letter-spacing: .02em;
  }

  /* --- 33-4. バルーンとボタン：改行させない --- */
  .btn-cta-wrap .btn__balloon {
    white-space: nowrap;
    font-size: 12.5px;
    padding: 7px 10px;
  }

  .top-fv .btn--cta-accent,
  .cta__buttons--single .btn--cta-accent {
    height: 58px;
    font-size: 15px;
    white-space: nowrap;
  }

  /* --- 33-5. FVの3点カード：縦に間延びしない寸法に --- */
  .fv-point {
    padding: 12px 4px 14px;
    gap: 4px;
  }

  .fv-point__label {
    font-size: 10.5px;
  }

  .fv-point__value {
    font-size: 15px;
  }

  /* --- 33-6. 選ばれる理由の見出し（長文）はSPは自然に折る --- */
  .sec-reason .heading1__title {
    font-size: 19px;
    line-height: 1.7;
  }

  /* --- 33-7. 料金オプション表の寸法 --- */
  .price-table--sub th,
  .price-table--sub td {
    padding: 10px 8px;
    font-size: 12.5px;
    line-height: 1.7;
  }

  .price-table--sub th {
    width: 52%;
  }

  /* --- 33-8. プロフィール写真：全幅はでかすぎる --- */
  .sec-profile__photo {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* --- 33-9. フッター簡素化（PC・SP共通） ---
   ページ内アンカー一覧を撤去したので、中央寄せの縦積みに。 */
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer__brand {
  justify-content: center;
}

.footer__menu--slim {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}

/* ★display:contents化の副作用：タグラインがflexアイテムになって全幅に伸びる。
   中身の幅で止める。 */
@media(max-width:959px) {
  .top-fv__tagline {
    align-self: flex-start;
    width: fit-content;
  }
}

/* スリム版フッターのリンクは「●」なしのプレーンなテキストリンクに */
.footer__menu--slim a::before {
  display: none;
}

.footer__menu--slim a {
  padding-left: 0;
}


/* =========================================================================
   34. SP第2弾：FVの縦圧縮・見出しの折り返し（2026-08-18 第36回）
   ========================================================================= */

@media(max-width:959px) {

  /* --- FVの縦を圧縮して、1画面でボタン付近まで見えるように --- */
  .top-fv__inner {
    padding-top: 16px;
  }

  .top-fv__tagline {
    margin-top: 0;
  }

  .top-fv__catch {
    margin-top: 10px;
  }

  /* サブコピー：小さすぎたので一回り大きく */
  .top-fv__sub {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.85;
  }

  /* モックの写真だけ縮める（3点カードは中に入っているので img だけ対象に） */
  .top-fv__mockup {
    margin-top: 10px;
  }

  .top-fv__mockup>img {
    max-width: 72%;
    margin: 0 auto;
  }

  .fv-points {
    margin-top: 10px;
  }

  .top-fv__cta {
    margin-top: 16px;
  }

  /* --- ROLEの答え2つ：1行に収まるサイズに --- */
  .role-card__answer {
    font-size: 20px;
    line-height: 1.7;
  }
}

/* ★ヘッダーはabsoluteでFVに重なる（下端72px）。padding-top:16pxだと
   タグラインがヘッダーの裏に隠れた。ヘッダー分＋余白を確保する。 */
@media(max-width:959px) {
  .top-fv__inner {
    padding-top: 88px;
  }
}

/* さらに詰める：ボタンが1画面目にほぼ入るところまで */
@media(max-width:959px) {
  .top-fv__catch {
    margin-top: 6px;
  }

  .top-fv__sub {
    margin-top: 8px;
  }

  .top-fv__mockup {
    margin-top: 6px;
  }

  .top-fv__mockup>img {
    max-width: 62%;
  }

  .fv-points {
    margin-top: 8px;
  }

  .top-fv__cta {
    margin-top: 12px;
  }
}

/* ★ROLEカードの内側は 375-40-44=291px。20pxでは
   「役割は、信頼を担保すること。」(14字≒291px)が折れる。18pxで1行に収める */
@media(max-width:959px) {
  .role-card__answer {
    font-size: 18px;
  }
}

/* ★見出しを「shu designが選ばれる3つの理由」に短縮したので、
   縮小指定（30px/19px）を戻して他セクションと同じ大きさに */
.sec-reason .heading1__title {
  font-size: 24px;
  line-height: 1.6;
}

@media(min-width:960px) {
  .sec-reason .heading1__title {
    font-size: min(2.8125vw, 36px);
  }
}

/* ★キャッチ上下の隙間の残り＝タグライン側のmargin-bottomとサブ側の別指定。
   実測 38px/40px → 12px前後へ。詳細度を上げて確実に効かせる */
@media(max-width:959px) {
  .top-fv .top-fv__tagline {
    margin-bottom: 0;
  }

  .top-fv .top-fv__catch {
    margin: 12px 0 0;
  }

  .top-fv .top-fv__sub {
    margin-top: 12px;
  }
}

/* ★真犯人＝テンプレの .top-fv__grid { gap:32px }。flex column化で
   全子要素の間に32pxが入っていた。gapを殺して margin だけで組む */
@media(max-width:959px) {
  .top-fv__grid {
    gap: 0;
  }

  .top-fv__mockup {
    margin-top: 16px;
  }

  .top-fv__cta {
    margin-top: 18px;
  }
}


/* =========================================================================
   36. SPのヘッダーを上部固定の帯に（2026-08-19 第39回）
   -------------------------------------------------------------------------
   PCの「浮いた角丸バー」はそのまま。SPだけ、よくある「上部に貼りついた
   長方形」に変える（スマホでは浮かせる意味がない、の指摘）。
   ========================================================================= */

@media(max-width:959px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: 60px;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(26, 60, 66, .10);
  }

  .header__inner {
    height: 100%;
    padding: 0 16px;
  }

  /* 固定ヘッダーの下にFVが潜り込まないよう、その分だけ上を空ける
     （旧：absoluteヘッダー(22px+50px)ぶんの88px → 固定60px＋余白） */
  .top-fv__inner {
    padding-top: 76px;
  }
}


/* =========================================================================
   35. 本番用：フォーム送信完了の表示と隠しiframe（アップ用のみ）
   ========================================================================= */

.cform-thanks {
  margin-top: 32px;
  background-color: var(--c-base);
  border-radius: 20px;
  padding: 44px 24px;
  text-align: center;
}

.cform-thanks__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-brand-dark);
}

.cform-thanks__body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 2;
}

.cform-thanks__body a {
  color: var(--c-brand);
  text-decoration: underline;
}

.cform-iframe-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}