/* ============================================================
   mimi LP — First View (PC基準・モバイル対応)
   ① 変数 → ② ベース → ③ 共通(ユーティリティ/ボタン) → ④ セクション別
   ============================================================ */

/* ① 変数 ---------------------------------------------------- */
:root{
  --pink:#ff8fb8;
  --pink-border:#ffa1c3;
  --blue:#71c9ff;
  --text:#555555;       /* Gray-05 */
  --note:#b7b7b7;       /* Gray-02 */
  /* Figma：白16%オーバーレイ＋ピンク→ブルー(7.78%→90.63%)。新規登録=161°/ログイン=160° */
  --grad:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
    linear-gradient(161deg, #ff8fb8 7.78%, #71c9ff 90.63%);
  /* CTA はFigmaで角度のみ異なる(165°) */
  --grad-cta:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
    linear-gradient(165deg, #ff8fb8 7.78%, #71c9ff 90.63%);
  --content:1200px;
}

/* ② ベース -------------------------------------------------- */
html{scroll-behavior:smooth}   /* ナビ押下時はスムーズスクロール */
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  color:var(--text);
  background:#fff;
  /* Figma同様、固定幅ボックスで文字単位に詰めて折り返す（禁則は守る） */
  word-break:normal;
  line-break:strict;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* アンカー遷移先：固定ヘッダー(PC≈95px/SP≈77px)分のオフセットを確保 */
#feature,#howto,#safety,#price,#faq{scroll-margin-top:100px}
@media (max-width:1023px){
  #feature,#howto,#safety,#price,#faq{scroll-margin-top:84px}
}

/* ③ 共通：ユーティリティ ------------------------------------ */
.pc-only{display:block}
.sp-only{display:none}
@media (max-width:1023px){
  .pc-only{display:none}
  .sp-only{display:block}
}

/* ③ 共通：ボタン -------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:100px;
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:12px 24px;
  white-space:nowrap;
  transition:opacity .2s, transform .2s;
}
.btn:hover{opacity:.88}
.btn__icon{flex:none}
.btn--signup .btn__icon{width:19px;height:19px}
.btn--login .btn__icon{width:14px;height:18px}

.btn--signup{
  background:var(--grad);
  color:#fff;
}
.btn--login{
  /* Figma：枠線はピンク→ブルーのグラデ。白塗り(padding-box)＋グラデ枠(border-box) */
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad) border-box;
}
.btn--login__text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:600;
}
.btn--cta{
  background:var(--grad-cta);
  color:#fff;
  font-size:18px;
  padding:18px 40px;
}

/* ③ 共通：SP用フルスクリーンメニュー（既定は非表示） */
.spmenu{display:none}
.spmenu__list{list-style:none}

/* ③ 共通：SP固定フッターCTA（Figma SP版 node 4001:8028。既定は非表示） */
.sp-cta{display:none}
.sp-cta__btn{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px;
  font-size:15px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.sp-cta__btn img{flex:none}
/* Figma：新規登録=共通グラデ(161°)＋白文字／ログイン=白背景＋ピンクの上下ボーダー＋グラデ文字 */
.sp-cta__btn--signup{
  background:var(--grad);
  color:#fff;
}
.sp-cta__btn--login{
  /* Figma：枠は「左上ピンク→右下ブルー」の対角グラデ。上線=上端(ピンク→中間紫)、下線=下端(中間紫→ブルー) */
  background:
    linear-gradient(90deg, #ffa1c3, #c4b9e1) top/100% 1px no-repeat,
    linear-gradient(90deg, #c4b9e1, #88d1ff) bottom/100% 1px no-repeat,
    #fff;
}
.sp-cta__login-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ④ ヘッダー ------------------------------------------------ */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  border-bottom:1px solid #fff;
  box-shadow:0 0 8px rgba(0,0,0,.08);
}
/* Figma：白の極薄グラデ(13.8%→8.7%)＋20pxブラーのすりガラス。
   ロゴ等のコンテンツがbackdrop-filterのレイヤー内に入るとSP(高DPR)で
   ぼやけるため、ぼかし＋背景は専用レイヤー(::before)に分離する。 */
.header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(91deg, rgba(255,255,255,.138) 0%, rgba(255,255,255,.087) 100%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 50px;
}
.header__logo img{width:104px}

.gnav{display:flex;align-items:center;gap:24px}
.gnav__list{display:flex;align-items:center;gap:20px}
.gnav__list a{font-size:15px;font-weight:600;color:var(--text)}
.gnav__list a:hover{color:var(--pink)}
.gnav__actions{display:flex;align-items:center;gap:12px}

/* ハンバーガー（SPのみ。Figmaはグラデ円＋白線の画像）。既定は非表示 → モバイルで表示 */
.header__burger{display:none;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.header__burger img{display:block;width:48px;height:48px}

/* ④ ファーストビュー（ヒーロー） ----------------------------
   PC：テキスト（左）＋スマホ（右）の横並び。背景はコラージュ(PC版)。
   コラージュ画像にグラデの円が含まれるため、装飾グラデは重ねない。 */
.hero{
  position:relative;
  /* 高さは背景画像(1440×968)の比率に追従。上限キャップは設けないため、
     画面が広いほどFVも縦に伸び、背景が途中で切れない。
     下限715pxはテキスト群の最小高さ確保用。 */
  min-height:max(715px, 67.2vw);
  overflow:hidden;
  /* 背景コラージュは1枚画像(collage-pc.png=1440×968)。横幅いっぱい(100%)＋高さauto で
     アスペクト比を保持。hero高さ(67.2vw)＝画像高さ(幅×968/1440=67.2vw)で一致するため、
     比率そのまま・上下クロップなしで目一杯表示される（左右の余白も無し）。 */
  background:#fff url(../images/fv/collage-pc.png) center top / 100% auto no-repeat;
}
/* 背景コラージュ（Figma node 4001:10430）を1枚画像でなく要素分解で配置。
   写真は個別画像div・円グラデはCSSで再現し、各要素を画面の左右端へアンカー。
   → 1440px超でも拡大/クロップせず、写真が端へ自然に広がる（鮮明） */
.hero__bg{
  /* PC背景は.heroの1枚画像(collage-pc.png)に統一したため、
     旧・写真バラ配置(.cp/.cg)は使用しない。HTMLは残置しCSSで非表示。 */
  display:none;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
/* 円形グラデ（Ellipse 2/184/185）：FigmaのSVG（グラデ＋ブラー＋opacityを保持）をそのまま配置。
   サイズはブラー込みの自然サイズ、位置は円中心がカンプと一致するよう算出。 */
.hero__bg .cg{position:absolute;max-width:none}
.hero__bg .cg2  {width:869px;height:auto;right:-16px;top:-2px}
.hero__bg .cg184{width:401px;height:401px;left:40px;top:-90px;transform:rotate(180deg);filter:saturate(1.7)}  /* 草原写真(p2781)の右あたり・円の上1/3をヘッダーに重ねる。Figma準拠でグラデ180°回転＋発色を濃く */
.hero__bg .cg185{width:618px;height:618px;left:-269px;top:320px;transform:rotate(135deg)}  /* 左下の写真(p2789)の左側・やや下。Figma実レンダリングに合わせグラデを135°回転（青=左下/ピンク=右上） */
/* 写真サムネ共通（下端基準でクロップ） */
.hero__bg .cp{
  position:absolute;
  background-position:center bottom;
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:12px;
}
.hero__bg .cp--blur{filter:blur(2.5px)}
.hero__bg .cp--shadow{box-shadow:0 0 10px rgba(0,0,0,.1)}
/* 左側グループ（左端アンカー） */
.hero__bg .cp2781{left:20px;top:124px;width:153px;height:102px;border-radius:15px;z-index:2;background-image:url(../images/fv/collage/p2781.png)}
.hero__bg .cp2784{left:85px;top:186px;width:147px;height:106px;background-image:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),url(../images/fv/collage/p2784.png)}
.hero__bg .cp2780{left:143px;top:591px;width:140px;height:100px;border-radius:8px;background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url(../images/fv/collage/p2780.png)}
.hero__bg .cp2789{left:18px;top:511px;width:180px;height:130px;background-image:url(../images/fv/collage/p2789.png)}
.hero__bg .cp2782{left:549px;top:116px;width:150px;height:108px;z-index:2;background-image:url(../images/fv/collage/p2782.png)}
.hero__bg .cp2783{left:550px;top:498px;width:180px;height:130px;background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url(../images/fv/collage/p2783.png)}
.hero__bg .cp2787{left:655px;top:194px;width:108px;height:78px;background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url(../images/fv/collage/p2787.png)}
/* 右側グループ（右端アンカー） */
.hero__bg .cp2779{right:604px;top:585px;width:180px;height:130px;background-image:url(../images/fv/collage/p2779.png)}
.hero__bg .cp2788{right:404px;top:181px;width:108px;height:78px;background-position:center;background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url(../images/fv/collage/p2788.png)}
.hero__bg .cp2786{right:50px;top:130px;width:150px;height:110px;background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url(../images/fv/collage/p2786.png)}
.hero__bg .cp2785{right:25px;top:502px;width:200px;height:160px;background-image:url(../images/fv/collage/p2785.png)}
.hero__inner{
  position:relative;
  z-index:1;
  /* 1440px超は背景が全幅で拡大するのに合わせ、コンテンツも幅比で拡大（PC版の配置を等倍で維持）。
     1440px以下は max() がpx側を選ぶため現状と完全に同じ。 */
  max-width:max(1440px,100%);
  margin-inline:auto;
  padding:max(161px,11.18vw) 24px max(90px,6.25vw);   /* Figma：スマホ top y161（1440基準でvw化） */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:max(56px,7.4vw);  /* Figma：テキスト群とスマホの間隔（上限cap撤廃で1440超も拡大） */
}
/* テキストブロック（ラベル → キャッチ → 注釈 → CTA） */
.hero__text{
  flex:0 1 max(480px,33.33vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero__label img{width:max(398px,27.64vw);max-width:100%}
.hero__catch{margin-top:max(10px,0.69vw)}              /* Figma：ラベル→キャッチ 10px */
.hero__catch img{width:max(480px,33.33vw);max-width:100%}
.hero__note{
  margin-top:max(10px,0.69vw);              /* Figma：キャッチ→注釈 10px */
  font-size:max(11px,0.76vw);
  font-weight:400;
  line-height:1.65;
  color:var(--note);
}
.hero .btn--cta{margin-top:max(40px,2.78vw)}            /* Figma：注釈→CTA 40px */
/* スマホ画像（phones.pngは影込み。本体≒524になるよう影分を足した幅554） */
.hero__visual{
  flex:0 0 auto;
  width:max(380px,38.5vw);          /* Figma本体 w524 / 1440（上限cap撤廃で1440超も拡大） */
}
.hero__visual img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.14));
}

/* ⑤ 紹介セクション（mimiとは） -------------------------------- */
.intro{
  position:relative;
  padding:90px 24px;
  background:#fff;
}
/* 装飾ブロブ（Figma node 4002:1198）：右上＋左下のグラデ円。
   背景だとボックス上端でクリップされ右上の円が途切れるため、::afterで配置し
   上方向のはみ出しを許可（円が常に完全表示）。下端基準・幅に応じて自動高さ。 */
.intro::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  aspect-ratio:1440 / 623;       /* blob-pcの自然比。幅に追従して高さ自動 */
  background:url(../images/intro/blob-pc.png) center bottom / 100% auto no-repeat;
  pointer-events:none;
  z-index:0;
}
.intro__inner{
  position:relative;
  z-index:1;
  max-width:1080px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:120px;
}
.intro__body{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
}
.intro__logo img{width:174px}
.intro__text{
  text-align:center;
  color:var(--text);
  font-size:15px;
  font-weight:600;
  line-height:30px;
  letter-spacing:.75px;
  white-space:nowrap;       /* Figma：各行は折り返さない */
}
.intro__sub{margin-top:30px}
/* 「出逢いの機会」：白タグ＋手書きグラデ文字 */
.intro__deai{
  display:inline-block;
  background:#fff;
  border:.5px solid #9b9b9b;
  box-shadow:1px 1px 2px rgba(0,0,0,.14);
  line-height:0;
  vertical-align:-5px;
}
.intro__deai img{width:114px;display:block}
.intro__visual{flex:0 0 auto;width:340px}
.intro__visual img{width:100%;height:auto;display:block}

/* ⑥ 特徴セクション（mimiの特徴） ------------------------------ */
.feature{
  position:relative;
  overflow:hidden;
  padding:96px 24px;
  /* 装飾円（Figma node 4001:10339）：横中央・カード背面。本体560pxはぼかし込みで960px */
  background:#fff url(../images/feature/ellipse.png) center 52% / 960px auto no-repeat;
}
.feature__inner{max-width:1200px;margin-inline:auto}
.feature__head{text-align:center;margin-bottom:60px}
.feature__title{
  font-size:40px;
  font-weight:600;
  line-height:44px;
  letter-spacing:2px;
  color:var(--text);
}
.feature__sub{
  display:inline-block;        /* グラデをテキスト幅に収める（全幅だと中央=中間色になる） */
  margin-top:16px;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:1;
  letter-spacing:.6px;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.feature__cards{
  display:flex;
  justify-content:center;
  gap:63px;
}
.feature__card{
  width:358px;                              /* 中身310px＋余白24px×2 */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  padding:24px;
  /* Figma：枠線はピンク→ブルーのグラデ（左上#ffa1c3→右下#88d1ff）。白塗り＋グラデ枠 */
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, #ffa1c3, #88d1ff) border-box;
  border-radius:20px;
  box-shadow:0 0 5px rgba(0,0,0,.12);        /* ソフト影 */
}
.feature__card-img{width:100%;height:auto;display:block}
.feature__card-text{display:flex;flex-direction:column;gap:16px;width:100%}
.feature__card-title{font-size:24px;font-weight:600;line-height:22px;color:var(--text);text-align:center}
.feature__card-desc{font-size:15px;font-weight:400;line-height:26px;color:var(--text);text-align:justify}
.feature__note{margin-top:40px;text-align:center;font-size:12px;color:var(--note)}

/* ⑦ 使い方セクション（背景ボックス／Figma node 4001:9571・6911） ----- */
.howto{
  /* PC：全幅・角丸60px・青20%→ピンク20%の淡いグラデ */
  background:linear-gradient(-75.6deg, rgba(162,207,239,.2) 5.76%, rgba(246,216,236,.2) 84.91%);
  border-radius:60px;
}
.howto__inner{
  max-width:1200px;
  margin-inline:auto;
  padding:136px 24px;
}
.howto__head{text-align:center;margin-bottom:60px}
.howto__title{font-size:40px;font-weight:600;line-height:44px;letter-spacing:2px;color:var(--text)}
.howto__sub{
  display:inline-block;
  margin-top:16px;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:20px;font-weight:600;line-height:1;letter-spacing:.6px;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.howto__steps{display:flex;justify-content:center;gap:81px}
.howto__step{display:flex;flex-direction:column;align-items:center;width:346px}
.howto__step-img{width:284px;height:auto;display:block}
.howto__step-num{
  margin-top:32px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 20px;
  border-radius:100px;
  background:var(--grad);
  color:#fff;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:18px;font-weight:500;line-height:1;letter-spacing:.54px;
}
.howto__step-title{margin-top:24px;font-size:24px;font-weight:600;line-height:22px;color:var(--text);text-align:center;width:100%}
.howto__step-desc{margin-top:16px;font-size:15px;font-weight:400;line-height:26px;color:var(--text);text-align:justify;width:100%}

/* ⑧ 安心安全に使える理由セクション（Figma node 4001:9607） -------- */
.safety{padding:96px 24px;background:#fff}
.safety__inner{max-width:1200px;margin-inline:auto}
.safety__head{text-align:center;margin-bottom:60px}
.safety__title{font-size:40px;font-weight:600;line-height:44px;letter-spacing:2px;color:var(--text)}
.safety__sub{
  display:inline-block;
  margin-top:16px;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:20px;font-weight:600;line-height:1;letter-spacing:.6px;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* 上段3枚＋下段2枚（中央寄せ）。346×3＋81×2＝1200で1段3枚ぴったり */
.safety__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:60px 81px}
.safety__card{width:346px;display:flex;flex-direction:column;align-items:center}
.safety__card-img{width:250px;height:auto;display:block}
.safety__card-body{margin-top:24px;display:flex;flex-direction:column;gap:24px;width:100%}
.safety__card-title{font-size:22px;font-weight:600;line-height:22px;color:var(--text);text-align:center}
.safety__card-desc{font-size:15px;font-weight:400;line-height:26px;color:var(--text);text-align:justify}

/* ⑨ 料金プランセクション（Figma node 4001:10221） --------------- */
.price{
  /* 全幅・角丸60px・青20%→ピンク20%の淡いグラデ（使い方と同系統） */
  background:linear-gradient(-73.27deg, rgba(162,207,239,.2) 5.76%, rgba(246,216,236,.2) 84.91%);
  border-radius:60px;
}
.price__inner{
  position:relative;
  max-width:1200px;margin-inline:auto;
  padding:136px 24px;
  display:flex;flex-direction:column;align-items:center;gap:40px;
}
/* 「女性は永久無料！」スタンプ（Figma：右上・8°傾きはSVGに焼き込み済み） */
.price__badge{position:absolute;top:78px;right:90px;width:147px;height:auto;z-index:2}
.price__head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.price__title{font-size:40px;font-weight:600;line-height:44px;letter-spacing:2px;color:var(--text)}
.price__sub{
  display:inline-block;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:20px;font-weight:600;line-height:1;letter-spacing:.6px;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price__lead{font-size:15px;font-weight:400;line-height:26px;color:var(--text);text-align:center}
.price__body{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.price__tables{
  display:flex;justify-content:center;gap:48px;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.08));   /* Figma：テーブル全体のソフト影 */
}
.price__note{width:100%;max-width:1000px;font-size:11px;font-weight:400;line-height:18px;color:var(--note)}

/* プランテーブル */
.ptable{width:476px;display:flex;flex-direction:column}
.ptable--light{--pc:#ff8490;--mb:#fff5f6}
.ptable--platinum{--pc:#ffc64d;--mb:#fffaf0}
.ptable__head{
  display:flex;flex-direction:column;gap:2px;align-items:center;
  padding:18px;border-radius:15px 15px 0 0;color:#fff;text-align:center;
}
.ptable--light .ptable__head{background:#ff8490}
.ptable--platinum .ptable__head{background:linear-gradient(127.86deg,#ffc64d 0%,#ffb007 100%)}
.ptable__badge{font-size:11px;font-weight:600;line-height:16px}
.ptable__name{font-size:24px;font-weight:600;line-height:26px}
.ptable__rows{
  border:1px solid var(--pc);border-top:0;
  border-radius:0 0 15px 15px;overflow:hidden;
}
.ptable__row{display:grid;grid-template-columns:160px 1fr}
.ptable__row + .ptable__row{border-top:1px solid var(--pc)}
.ptable__month{
  display:flex;align-items:center;justify-content:center;
  padding:28px 20px;
  background:var(--mb);border-right:1px solid var(--pc);
  font-size:20px;font-weight:600;line-height:18px;color:var(--text);text-align:center;
}
.ptable__price{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:18px 28px;background:#fff;
}
.ptable__amount{font-size:20px;font-weight:600;line-height:18px;color:var(--text)}
.ptable__save{font-size:11px;font-weight:600;line-height:normal}
.ptable--light .ptable__save{color:#ff8490}
.ptable--platinum .ptable__save{
  display:inline-block;
  background:linear-gradient(154.78deg,#ffc64d 0%,#ffb007 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ⑩ よくある質問セクション（Figma node 4001:10157） ------------- */
/* position/z-index：CTAの背面グロー(上方向はみ出し)が最後のQ&Aに被るのを防ぐ */
/* glow.pngを透過化したため、CTAの背面グローがFAQに被っても薄く色づくだけで
   文字は隠れない。z-indexで持ち上げると境界でグローが切れて段差になるため外す。 */
.faq{padding:136px 24px;background:#fff}
.faq__inner{
  max-width:1200px;margin-inline:auto;
  display:flex;gap:clamp(48px,16vw,230px);align-items:flex-start;
}
.faq__head{flex:none;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.faq__title{font-size:40px;font-weight:600;line-height:44px;letter-spacing:2px;color:var(--text);white-space:nowrap}
.faq__sub{
  display:inline-block;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:20px;font-weight:600;line-height:1;letter-spacing:.6px;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.faq__list{flex:1 1 auto;max-width:720px;display:flex;flex-direction:column;gap:32px}
.faq__item{display:flex;flex-direction:column;gap:12px}
.faq__divider{width:100%;height:0;border:0;border-top:1px solid #e9e9e9;margin:0}
.faq__q{display:flex;gap:16px;align-items:center}
.faq__question{font-size:18px;font-weight:600;line-height:22px;color:var(--text)}
.faq__a{display:flex;gap:16px;align-items:flex-start}
.faq__answer{font-size:15px;font-weight:400;line-height:24px;color:var(--text);text-align:justify}
/* Q/A バッジ（Roboto・グラデ／白） */
.faq__badge{
  flex:none;width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:20px;font-weight:600;line-height:1;letter-spacing:.6px;
}
/* Figma：FAQバッジは共通--grad(161°)ではなく対角寄りのグラデ（Q=133.9°／A=128.4°） */
.faq__badge--q{
  background:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
    linear-gradient(133.9deg, #ff8fb8 7.78%, #71c9ff 90.63%);
  color:#fff;
}
/* Figma：Aバッジの枠は単色ではなくピンク→ブルーのグラデ（左上#ffa1c3→右下#88d1ff）。白塗り＋グラデ枠 */
.faq__badge--a{
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, #ffa1c3, #88d1ff) border-box;
}
.faq__badge--a i{
  font-style:normal;
  background:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
    linear-gradient(128.4deg, #ff8fb8 7.78%, #71c9ff 90.63%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ⑪ 最終CTAセクション（Figma node 4001:10288） ----------------- */
/* overflow-x:clip で横スクロールは抑えつつ、背面グローの上下はみ出しを許可（Figma同様スマホ周囲に広がる） */
.cta{padding:120px 24px;background:#fff;overflow-x:clip;isolation:isolate}
.cta__inner{
  max-width:1138px;margin-inline:auto;
  display:flex;align-items:center;justify-content:center;gap:147px;
}
/* 左：スマホ2台＋背面グロー */
.cta__visual{position:relative;z-index:1;flex:none;width:301px;height:364px}
/* 背面グロー（Figma Ellipse 187：ぼかし込み840px・スマホ群に対し左-281/上-238px） */
.cta__glow{
  position:absolute;left:-281px;top:-238px;
  width:840px;height:840px;max-width:none;z-index:0;pointer-events:none;
}
.cta__phone{position:absolute;width:165.6px;height:auto}
.cta__phone--r{left:135.4px;top:0;z-index:1}
.cta__phone--l{left:0;top:24.7px;z-index:2}
/* 右：キャッチ＋CTA */
.cta__text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:32px;width:376.5px}
.cta__lead{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.cta__label{width:360px;max-width:100%;line-height:0}
.cta__label img{width:100%;height:auto;display:block}
.cta__catch{width:100%;height:auto;display:block}
.cta__action{display:flex;flex-direction:column;align-items:center;gap:12px;width:269px}
.cta__btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:18px 40px;border-radius:100px;
  background:var(--grad-cta);
  color:#fff;font-weight:600;font-size:18px;line-height:21px;white-space:nowrap;
  transition:opacity .2s;
}
.cta__btn:hover{opacity:.88}
.cta__login{display:inline-flex;align-items:center;gap:8px;color:var(--note);font-size:15px;line-height:17px}
.cta__login:hover{color:var(--pink)}
.cta__arrow{
  width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}

/* ⑫ フッター（Figma node 4001:10337） -------------------------- */
.footer{
  position:relative;z-index:1;       /* CTAの背面グローのはみ出しより前面に */
  background:#fff;
  border-top:1px solid #e9e9e9;
  padding:56px 24px 32px;
  display:flex;flex-direction:column;align-items:center;gap:56px;
}
.footer__logo img{width:148px;height:auto;display:block}
.footer__divider{width:100%;max-width:800px;height:1px;background:#e9e9e9}
.footer__bottom{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}
.footer__links{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 20px;max-width:840px;
}
.footer__links a{font-size:15px;line-height:22px;color:var(--text);white-space:nowrap}
.footer__links a:hover{color:var(--pink)}
.footer__sep{width:1px;height:18px;background:#d9d9d9;flex:none}
/* 行区切り：PCは4/4、SPは3/2/2/1（Figma準拠）に強制改行 */
.footer__sep--b{flex-basis:100%;width:0;height:0;background:none}        /* PCで改行 */
.footer__note{font-size:11px;line-height:18px;color:#9b9b9b;text-align:center}
.footer__copy{font-size:11px;line-height:22px;color:#9b9b9b;text-align:center}

/* ⑬ テキストページ（プライバシーポリシー等／Figma node 2218:25512・2235:30988） --- */
.policy{
  background:#fff;
  /* 固定ヘッダー分＋Figmaのタイトル位置(y230)上余白／本文→フッター136px下余白 */
  padding:230px 24px 136px;
}
.policy__inner{max-width:1000px;margin-inline:auto}
/* 見出しブロック（タイトル＋英字サブ・中央寄せ） */
.policy__head{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;margin-bottom:136px;   /* Figma：見出し→本文 136px */
}
.policy__title{font-size:40px;font-weight:600;line-height:35px;letter-spacing:2px;color:var(--text)}
.policy__sub{
  display:inline-block;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:20px;font-weight:600;line-height:1;letter-spacing:.6px;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* 本文（条文を40px間隔で縦積み） */
.policy__body{display:flex;flex-direction:column;gap:40px;color:var(--text);text-align:justify}
.policy__lead{font-size:15px;font-weight:400;line-height:26px}
.policy__article{display:flex;flex-direction:column;gap:16px}   /* Figma：見出し→本文 16px */
.policy__article-title{font-size:24px;font-weight:600;line-height:1.4;color:var(--text);text-align:left}
.policy__article-body{font-size:15px;font-weight:400;line-height:26px}
.policy__article-body p{margin:0}
/* 空行（Figmaの空白行）に相当する26px間隔のグループ積み */
.policy__stack{display:flex;flex-direction:column;gap:26px}
/* 箇条書き（・） */
.policy__list{list-style:disc;padding-left:24px}
.policy__list li{font-size:15px;line-height:26px}
/* 番号付き（1. 2. …） */
.policy__olist{list-style:decimal;padding-left:24px}
.policy__olist li{font-size:15px;line-height:26px}

/* 特定商取引法テーブル（項目240px｜内容＋区切り線／Figma node 2235:30918） */
.sct{display:flex;flex-direction:column;gap:32px;width:100%}
.sct__row{display:flex;gap:40px;align-items:flex-start;font-size:15px;line-height:22px;color:var(--text)}
.sct__label{flex:0 0 240px;font-weight:600}
.sct__value{flex:1 1 auto;font-weight:400}
.sct__divider{width:100%;height:1px;background:#e9e9e9}

/* ============================================================
   タブレット〜モバイル対応（〜1023px）
   縦積み：スマホ → ラベル → キャッチ → 注釈 → CTA（Figma SP版に準拠）
   背景はSP版コラージュ(縦長)に差し替え、cover の過剰ズームを回避。
   ============================================================ */
@media (max-width:1023px){
  /* ナビ⇔ハンバーガー切替（コンポーネント規則を確実に上書き） */
  .gnav{display:none}
  .header__burger{display:flex}

  /* SP固定フッターCTAを画面下部に表示。バー高さ分の余白を本文下に確保 */
  .sp-cta{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
  }
  body{padding-bottom:60px}

  .header__inner{padding:12px 20px}
  .header__logo img{width:88px}

  /* 背景コラージュ(Figma node 4002:1146)：フレーム375基準。
     幅は画面いっぱい（上限480px）。コラージュは縦長比1.741のため、
     heroの高さを「78px(上余白)＋コラージュ幅×1.741」に追従させ、下部が切れないようにする。
     （375px固定だと広いスマホで背景が幅いっぱいにならず両側が空くため幅追従に変更） */
  .hero{
    min-height:max(735px, calc(78px + min(100vw, 480px) * 1.741));
    background:#fff url(../images/fv/collage-sp.png) center 78px / min(100%,480px) auto no-repeat;
  }
  .hero__inner{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;  /* heroが高くなっても内容は上寄せ（コラージュと位置を合わせる） */
    gap:15px;                 /* スマホ箱(影込み308)＋gap15でテキスト群をy416に */
    padding:93px 20px 56px;   /* スマホ箱top=93→本体上端y109(影余白16) */
    max-width:480px;
  }
  /* スマホ画像を先頭へ。phones.pngは影込みのため、本体268になるよう影分を足した幅298で指定。 */
  .hero__visual{order:-1;width:min(298px,79.5vw)}   /* Figma本体w268＋影余白 */
  .hero__text{flex:0 1 auto;width:100%;align-items:center;text-align:center}
  .hero__label img{width:min(228px,60.8vw)}   /* SPは2行ラベル w227 */
  .hero__catch{margin-top:6px}                 /* ラベル→キャッチ(Figma 452→458=6) */
  .hero__catch img{width:min(303px,80.8vw)}    /* キャッチ w303 */
  .hero__note{margin-top:6px;font-size:10px}   /* キャッチ→注釈(Figma ≒6px) */
  .hero .btn--cta{margin-top:45px;width:208px;padding:18px 34px;font-size:16px}  /* Figma CTA x84 y664 w208 h53 */

  /* 紹介セクション：縦積み（ロゴ＋テキスト → スマホ） */
  .intro{
    padding:56px 20px;
    /* 装飾ブロブ（Figma node 4002:1197）に差し替え */
    background:#fff url(../images/intro/blob-sp.png) center top / 100% auto no-repeat;
  }
  .intro::after{display:none}   /* SPは従来通り背景blob-spを使用 */
  .intro__inner{flex-direction:column;gap:28px}
  .intro__body{width:auto;gap:24px}
  .intro__logo img{width:119px}
  .intro__visual{width:180px}

  /* 特徴セクション：カードを縦積み（装飾円は本体560px＝画像960pxのまま、横中央） */
  .feature{padding:60px 20px;background-position:center 51%}
  .feature__head{margin-bottom:40px}
  .feature__title{font-size:28px;line-height:1.3;letter-spacing:1.5px}
  .feature__sub{font-size:16px}
  .feature__cards{flex-direction:column;align-items:center;gap:40px}
  /* SPはカード幅と画像→テキストの余白のみ調整（枠・背景はベース共通） */
  .feature__card{
    width:min(310px,86vw);
    gap:24px;
  }
  .feature__card-title{font-size:20px}
  .feature__card-desc{font-size:14px;line-height:24px}
  .feature__note{margin-top:32px}

  /* 使い方セクション：SPは角丸なし・グラデ(-88°)、ステップ縦積み */
  .howto{
    background:linear-gradient(-88.08deg, rgba(162,207,239,.2) 5.76%, rgba(246,216,236,.2) 84.91%);
    border-radius:30px;   /* 料金プランと同様、SPも角丸30px */
    overflow:hidden;
  }
  .howto__inner{padding:64px 20px}
  .howto__head{margin-bottom:40px}
  .howto__title{font-size:28px;line-height:1.3;letter-spacing:1.5px}
  .howto__sub{font-size:16px}
  .howto__steps{flex-direction:column;align-items:center;gap:48px}
  .howto__step{width:min(346px,90vw)}
  .howto__step-img{width:min(284px,76vw)}
  .howto__step-title{font-size:20px}
  .howto__step-desc{font-size:14px;line-height:24px}

  /* 安心安全セクション：SPは1カラム・イラスト左＋テキスト右の横並び */
  .safety{padding:60px 16px}
  .safety__head{margin-bottom:40px}
  .safety__title{font-size:28px;line-height:1.4;letter-spacing:1.5px}
  .safety__sub{font-size:16px}
  .safety__grid{flex-direction:column;flex-wrap:nowrap;gap:24px;max-width:360px;margin-inline:auto}
  .safety__card{width:100%;flex-direction:row;align-items:center;gap:24px}
  .safety__card-img{width:120px}
  .safety__card-body{margin-top:0;gap:8px}
  .safety__card-title{text-align:left;font-size:18px;line-height:1.4}
  .safety__card-desc{text-align:justify;font-size:13px;line-height:22px}

  /* 料金プラン：SPもPC同様に角丸（SPは30px）・左揃え・2テーブル縦積み（Figma node 4001:6910） */
  .price{border-radius:30px;overflow:hidden}
  .price__inner{padding:64px 32px;gap:40px;align-items:stretch}
  .price__head{align-items:flex-start;text-align:left;gap:8px}
  .price__title{font-size:28px;line-height:1.4;letter-spacing:1.5px}
  .price__sub{font-size:16px}
  .price__lead{font-size:13px;line-height:24px;text-align:left}
  .price__body{align-items:stretch;gap:16px}
  .price__tables{flex-direction:column;gap:24px;width:100%}
  .ptable{width:100%;max-width:none;margin:0}
  .ptable__name{font-size:22px}
  .ptable__row{grid-template-columns:126px 1fr}
  .ptable__month{padding:18px 8px;font-size:16px}
  .ptable__price{padding:14px 16px}
  .ptable__amount{font-size:16px}
  .price__note{max-width:none;width:100%}
  .price__badge{width:106px;top:50px;right:2px}

  /* よくある質問：SPはタイトル中央・Q&A縦積み */
  .faq{padding:64px 16px}
  .faq__inner{flex-direction:column;gap:40px;align-items:stretch}
  .faq__title{font-size:28px;line-height:1.4;letter-spacing:1.5px}
  .faq__sub{font-size:16px}
  .faq__list{max-width:none;width:100%;gap:24px}
  .faq__badge{width:32px;height:32px;font-size:18px}
  .faq__question{font-size:16px;line-height:1.5}
  .faq__answer{font-size:14px}

  /* 最終CTA：SPは縦積み（スマホ→キャッチ→ボタン）中央寄せ */
  .cta{padding:64px 16px}
  .cta__inner{flex-direction:column;gap:32px;align-items:center;max-width:none}
  .cta__visual{width:212.75px;height:257.4px}
  .cta__glow{left:50%;top:50%;transform:translate(-50%,-50%);width:594px;height:594px}
  .cta__phone{width:117px}
  .cta__phone--r{left:95.7px;top:0}
  .cta__phone--l{left:0;top:17.4px}
  .cta__text{width:302px;gap:32px}
  .cta__label{width:227.6px}
  .cta__action{width:248px}
  .cta__btn{font-size:16px;padding:16px 40px}

  /* テキストページ：SPは上余白・側余白・見出しを縮小（Figma SP node 2235:30988） */
  /* Figma：見出しブロックは側16px(343px)、本文は側32px(311px)と幅が異なる */
  .policy{padding:180px 16px 88px}           /* Figma：タイトル y180／見出しは側16px／下88px */
  .policy__body{padding-inline:16px}         /* 本文だけ追加16px＝側32px */
  .policy__head{gap:10px;margin-bottom:88px} /* Figma：サブ間10px／見出し→本文88px */
  .policy__title{font-size:32px;line-height:35px;letter-spacing:1.6px}
  .policy__sub{font-size:16px;letter-spacing:.48px}
  .policy__article-title{font-size:20px}
  /* 特商法テーブル：SPは項目→内容を縦積み */
  .sct{gap:20px}
  .sct__row{flex-direction:column;gap:6px}
  .sct__label{flex:none}

  /* フッター：SPは余白・文字を縮小、リンクは3/2/2/1で改行 */
  .footer{padding:48px 24px 32px;gap:40px}
  .footer__note{text-align:left}   /* SPのみ注記を左揃え（PCは中央） */
  .footer__bottom{gap:28px}
  .footer__links{gap:8px 12px}
  .footer__links a{font-size:13px}
  .footer__sep--a{flex-basis:100%;width:0;height:0;background:none}      /* SPで改行 */
  .footer__sep--b{flex-basis:auto;width:1px;height:18px;background:#d9d9d9} /* SPは区切り線に戻す */

  /* ===== ハンバーガーメニュー（開いた状態・全画面） ===== */
  body.menu-open{overflow:hidden}
  body.menu-open .sp-cta{display:none}      /* 開いている間は固定バーを隠す */
  body.menu-open .spmenu{
    display:flex;
    position:fixed;
    inset:0;
    z-index:45;                              /* ヘッダー(z50)の下＝ロゴ＋✕は上に残る */
    flex-direction:column;
    align-items:center;
    justify-content:center;
    /* 背景が不透明グラデのためbackdrop-filterは見た目に効かず、
       メニュー文字をぼかすだけになるため指定しない（SP鮮明化）。 */
    background:linear-gradient(135deg,#fdf6fa 0%,#f4f6fb 50%,#ebf4fb 100%);
  }
  .spmenu__list{display:flex;flex-direction:column;align-items:center;gap:30px}
  .spmenu__list a{font-size:16px;font-weight:600;color:var(--text)}
  .spmenu__list a:hover{color:var(--pink)}
  .spmenu__actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:36px}
  /* Figma node 4001:9181：ボタンは188×53固定 */
  .spmenu__actions .btn{width:188px;height:53px}

  /* ハンバーガー → ✕（グラデ円＋白×） */
  body.menu-open .header__burger{
    width:48px;height:48px;border-radius:50%;
    background:var(--grad);position:relative;
  }
  body.menu-open .header__burger img{display:none}
  body.menu-open .header__burger::before,
  body.menu-open .header__burger::after{
    content:"";position:absolute;top:50%;left:50%;
    width:20px;height:2px;background:#fff;border-radius:2px;
  }
  body.menu-open .header__burger::before{transform:translate(-50%,-50%) rotate(45deg)}
  body.menu-open .header__burger::after{transform:translate(-50%,-50%) rotate(-45deg)}
}

/* ============================================================
   タブレット（700〜1023px）：特徴・使い方・安心安全を2カラム表示
   （PC=3カラム／スマホ=1カラムの中間レイアウト）
   ============================================================ */
/* ============================================================
   FV背景：481px以上は SP版コラージュ(縦長)を cover で全幅充填。
   480px以下は幅いっぱい(min(100%,480px)=100%)なので、481px以上で
   480px固定→中央寄せになり両側に白帯が出る問題を解消する。
   下端は白へフェードして次セクションへ滑らかに繋ぐ。
   ============================================================ */
@media (min-width:481px) and (max-width:1023px){
  .hero{
    min-height:735px;
    background-size:cover;
    background-position:center top;
  }
  .hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:180px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events:none;
    z-index:0;
  }
}

@media (min-width:700px) and (max-width:1023px){
  /* 特徴（3枚→上2・下1中央） */
  .feature__cards{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    gap:40px;
  }
  .feature__card{width:min(310px,44vw)}

  /* 使い方（3ステップ→上2・下1中央） */
  .howto__steps{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    gap:48px 40px;
  }
  .howto__step{width:min(346px,44vw)}

  /* 安心安全（5枚→2・2・1。SPの横並びカードを2カラムに） */
  .safety__grid{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    max-width:none;
    gap:24px 32px;
  }
  .safety__card{
    width:auto;
    flex:0 1 calc(50% - 16px);
    max-width:360px;
  }
}