/* MONO塾「初めて訪れる方へ」（/first/・固定ページ3509）用CSS（モック v14・2026-10-11）。header.php の is_page( 3509 ) の枝で読む
   旧 style_first.css は使わない（旧本文の中で読んでいた） */

/* ===== 初めて訪れる方へ（/first/）v12 ===== 参考：shadcn/ui × Seline。配色は MONO塾（ネイビー＝構造と選択中／オレンジ＝小さな差し色／緑＝無料会員登録だけ） */
body.page-id-3509 #page {
  background-image: none;
}

/* #page の地模様は本文列の外だけ色がずれて見えるので消す（追従目次をやめたので overflow の上書きは不要） */
body.page-id-3509 #main,
body.page-id-3509.custom-background,
body.page-id-3509 {
  background-color: #fafaf9;
}

body.page-id-3509 #breadcrumb {
  display: none;
}

/* 2026-10-13 パンくずを出さない（/el/・無料会員登録の案内ページと同じ。冒頭が48px上がる） */
body.page-id-3509 #primary {
  margin-top: 0;
}

/* 2026-10-13 メニューと冒頭の間のグレー（テーマの上マージン24px）を消す。トップと同じくメニューの真下から始める */
body.page-id-3509 .entry-header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

body.page-id-3509 #post-3509 {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 2026-10-13 フッターの上のグレーの帯（58px）を消す。最後の白い区画をフッターに直接つなぐ */
body.page-id-3509 #post-3509>.entry-meta {
  display: none;
}

#fp {
  /* 色 */
  --canvas: #fafaf9;
  --paper: #fff;
  --wash: #f5f5f4;
  --line: #e8e6e5;
  --line-2: #d6d3d1;
  --ink: #0f1f33;
  --txt: #292524;
  --mute: #6b6560;
  --navy: #264c73;
  --navy-d: #1c3a5a;
  --navy-wash: #eaf0f7;
  --navy-line: #cfdbe8;
  --org: #ed5901;
  --org-tx: #b34200;
  --org-wash: #fff1e7;
  /* 文字のオレンジは #b34200（#fff1e7 の上で 5.1:1。#c24800 は 4.5 にわずかに届かない） */
  --green: #15803d;
  --green-h: #166534;
  --green-wash: #e8f5ec;
  --green-tx: #13702f;
  /* 形 */
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --sh-card: 0 0 0 1px rgba(12,10,9,.02),0 1px 2px rgba(12,10,9,.04);
  --sh-lift: 0 1px 2px rgba(15,31,51,.05),0 20px 40px -22px rgba(15,31,51,.32);
  --sh-float: 0 1px 2px rgba(15,31,51,.04),0 12px 45px rgba(17,12,46,.12);
  --ease: cubic-bezier(.2,.75,.2,1);
  /* 字 */
  --jp: "Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  --num: "Helvetica Neue","Segoe UI",Arial,sans-serif;
  /* スクロールバーの幅（全幅の区画用。JSが入れる） */
  --sbw: 0px;
  font-family: var(--jp);
  color: var(--txt);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .01em;
  interpolate-size: allow-keywords;
  -webkit-font-smoothing: antialiased;
}

/* --- テーマのスタイルを打ち消す（指定していないプロパティは素通りするので、使う要素はここで初期化） --- */
#fp *,
#fp *::before,
#fp *::after {
  box-sizing: border-box;
}

#fp h2,
#fp h3,
#fp p,
#fp ul,
#fp dl,
#fp dt,
#fp dd,
#fp picture,
#fp blockquote,
#fp nav,
#fp section,
#fp details,
#fp summary {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

#fp .fp-sec:focus {
  outline: 0;
}

/* ページ内移動で区画にフォーカスを移す（読み上げの位置合わせ）。枠は出さない */
#fp blockquote::before,
#fp blockquote::after,
#fp h2::before,
#fp h2::after,
#fp h3::before,
#fp h3::after {
  content: none;
  display: none;
}

#fp ul {
  list-style: none;
}

#fp li {
  margin: 0;
  padding: 0;
}

#fp li::before {
  content: none;
}

#fp img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

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

#fp a:hover img {
  opacity: 1;
}

#fp a:focus:not(:focus-visible) {
  outline: 0;
}

#fp :focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 8px;
}

#fp .fp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#fp .fp-num {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

#fp .fp-nw {
  white-space: nowrap;
}

#fp p {
  text-wrap: pretty;
}

#fp :is(.fp-h1,.fp-h2,.fp-subh,.fp-free-name,.fp-way-name,.fp-way-goal,.fp-issue-q,.fp-origin-tx b,.fp-next-who,.fp-faq-qtx,.fp-faq-more,.fp-corp-note,.fp-site dd,.fp-guide-say) {
  font-feature-settings: "palt";
  word-break: auto-phrase;
}

/* --- 骨組み：区画は画面幅いっぱい。白とグレーの交互＋境目に1pxの罫線（トップ v37 と同じ） --- */
#fp .fp-sec {
  width: calc(100vw - var(--sbw));
  margin-left: calc(50% - 50vw + var(--sbw) / 2);
  margin-right: calc(50% - 50vw + var(--sbw) / 2);
  padding: 104px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  text-align: left;
}

@media screen and (min-width:801px) {
  #fp .fp-sec {
    scroll-margin-top: 49px;
  }
}

/* ページ内移動で、サイトの固定メニュー（801px以上でスクロール後に固定・高さ49px＝テーマ style.css の .fixed）の下に区画の上端を合わせる */
#fp .fp-issues,
#fp #fp-paid,
#fp #fp-faq {
  background: var(--canvas);
}

#fp .fp-fv {
  border-top: 0;
}

#fp .fp-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- 見出し（大きく・字を詰める。色の帯は1語だけ） --- */
#fp .fp-head {
  max-width: 700px;
  margin-bottom: 48px;
}

#fp .fp-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

#fp .fp-head-row .fp-head {
  margin-bottom: 0;
}

#fp .fp-h1,
#fp .fp-h2 {
  color: var(--ink);
  font-weight: 700;
  text-wrap: balance;
}

#fp .fp-h2 {
  font-size: clamp(28px,1.9vw + 15px,42px);
  line-height: 1.28;
  letter-spacing: -.025em;
}

#fp .fp-lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--mute);
}

#fp .fp-hl {
  position: relative;
  z-index: 0;
  color: var(--navy);
  white-space: nowrap;
}

#fp .fp-hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.06em;
  right: -.06em;
  bottom: .02em;
  height: .48em;
  border-radius: .12em;
  background: var(--navy-wash);
}

/* 10/11 ユーザー「色の帯は文字の半分程度の方が見やすい」→ 文字の下半分だけ */
#fp .fp-subhead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
}

#fp .fp-subhead p {
  font-size: 14px;
  color: var(--mute);
}

#fp .fp-subh {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -.01em;
}

#fp .fp-note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mute);
}

#fp .fp-pre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--org-tx);
  letter-spacing: .08em;
  line-height: 1.5;
}

#fp .fp-pre::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--org);
}

/* --- カード（白・1px罫線・ほぼ影なし。押せるカードだけ持ち上がる） --- */
#fp .fp-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

#fp a.fp-card,
#fp .fp-stretch,
#fp .fp-issue {
  transition: transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}

#fp a.fp-card:hover,
#fp .fp-stretch:hover,
#fp .fp-issue:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lift);
}

#fp a.fp-card:hover {
  border-color: var(--line-2);
}

/* .fp-stretch・.fp-issue の枠の色は各区画で指定 */
#fp .fp-arr,
#fp .fp-ext {
  transition: transform .2s var(--ease);
}

#fp .fp-stretch :is(.fp-btn,.fp-go)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-lg);
}

/* カード全体を押せる（中のリンクは1つだけ） */
@supports selector(:has(*)) {
  #fp .fp-stretch:has(:is(.fp-btn,.fp-go):focus-visible) {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
  }
  #fp .fp-stretch :is(.fp-btn,.fp-go):focus-visible {
    outline: 0;
  }
}

/* :has が使えないブラウザではボタン自体に枠が出る */
#fp .fp-icbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--navy-wash);
  color: var(--navy);
}

/* 札：緑＝無料、オレンジ＝有料（文字は --org-tx #b34200 で 5.1:1） */
#fp .fp-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .04em;
}

#fp .fp-tag-free {
  background: var(--green-wash);
  color: var(--green-tx);
}

#fp .fp-tag-paid {
  background: var(--org-wash);
  color: var(--org-tx);
}

/* --- ボタン（すべてピル型。緑の塗りは無料会員登録＝無料テキストだけ） --- */
#fp .fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}

#fp .fp-btn .fp-arr,
#fp .fp-btn .fp-ext {
  flex: 0 0 auto;
}

#fp .fp-btn:hover .fp-arr,
#fp .fp-stretch:hover .fp-arr {
  transform: translateX(3px);
}

#fp .fp-btn:hover .fp-ext,
#fp .fp-stretch:hover .fp-ext {
  transform: translate(2px,-2px);
}

#fp .fp-btn-register {
  background: var(--green);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(21,128,61,.3),0 10px 24px -12px rgba(21,128,61,.8);
}

#fp .fp-btn-register:hover {
  background: var(--green-h);
  color: #fff;
}

#fp .fp-btn-navy {
  background: var(--navy);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -14px rgba(38,76,115,.9);
}

#fp .fp-btn-navy:hover {
  background: var(--navy-d);
  color: #fff;
}

#fp .fp-btn-secondary {
  background: var(--paper);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: var(--sh-card);
}

#fp .fp-btn-secondary:hover,
#fp .fp-stretch:hover .fp-btn-secondary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

#fp .fp-btn-ondark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.26);
  color: #fff;
}

#fp .fp-btn-ondark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

#fp .fp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(38,76,115,.35);
  transition: text-decoration-color .15s;
}

#fp .fp-textlink:hover {
  text-decoration-color: var(--navy);
}

#fp .fp-textlink:hover .fp-arr {
  transform: translateX(3px);
}

#fp p .fp-textlink {
  display: inline;
  font-weight: 600;
}

#fp p .fp-textlink .fp-arr {
  display: inline;
  vertical-align: -3px;
  margin-left: 2px;
}

#fp .fp-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

#fp a:hover .fp-go .fp-arr {
  transform: translateX(3px);
}

/* --- ハグミー（平らなまま。10/11 ユーザー「v10 のように立体ではなくペタッとした見た目に」→ 白いふちと影をやめた）と吹き出し --- */
#fp .fp-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

#fp .fp-guide-img {
  flex: 0 0 auto;
  width: auto;
  height: 84px;
}

#fp .fp-guide-say {
  position: relative;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(15,31,51,.28);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
}

#fp .fp-guide-say::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

#fp .fp-head-row > .fp-guide,
#fp .fp-guide.is-corp {
  flex-direction: row-reverse;
}

/* 見出しの右：吹き出し→ハグミー（右端から話す） */
#fp .fp-head-row > .fp-guide .fp-guide-say::before,
#fp .fp-guide.is-corp .fp-guide-say::before {
  left: auto;
  right: -7px;
  border-left: 0;
  border-bottom: 0;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

#fp .fp-guide.is-center {
  justify-content: center;
  margin-bottom: 16px;
}

#fp .fp-head-row.is-sub {
  align-items: center;
  margin: 64px 0 20px;
}

#fp .fp-head-row.is-sub .fp-guide-img {
  height: 68px;
}

#fp .fp-guide.is-faq {
  margin-top: 32px;
}

#fp .fp-guide.is-faq .fp-guide-img {
  height: 76px;
}

/* --- 表示の動き（画面に入ったら下から軽く。JSが無い・動きを減らす設定では最初から表示） --- */
#fp.fp-js .fp-rv {
  opacity: 0;
}

#fp.fp-js .fp-rv.is-in {
  opacity: 1;
  animation: fp-up .7s var(--ease) var(--d,0ms) backwards;
}

@keyframes fp-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== ファーストビュー（全幅の写真・右寄せ・左は白／実績は写真の下端に重ねた白いカード） ===== */
#fp .fp-fv {
  padding: 0;
  overflow: clip;
}

#fp .fp-hero {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 64px;
  background: var(--paper);
}

/* 10/10 深夜 ユーザー「右の画像の下が途切れて見える。もう少し伸ばして」→ 写真を実績カードの後ろ・FVの下端まで伸ばす（元の写真自体が下の歯車の途中で切れているため、区画の端で切れて見えるようにする） */
#fp .fp-hero-bg,
#fp .fp-hero-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

#fp .fp-hero-bg img {
  object-fit: cover;
  object-position: right center;
}

/* PCの写真は FV の全高に敷く。写真の大きさ（引き）と上下左右のぼかしは画像側（first_fv_pc_v16：写真はキャンバスの高さの66%・右寄せ）で決めている */
#fp .fp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 68%,rgba(255,255,255,.45) 82%,rgba(255,255,255,.88) 91%,#fff 97%),linear-gradient(90deg,#fff 0%,#fff 36%,rgba(255,255,255,.88) 46%,rgba(255,255,255,.45) 58%,rgba(255,255,255,.28) 72%,rgba(255,255,255,.3) 84%,rgba(255,255,255,.8) 94%,#fff 100%);
  pointer-events: none;
}

/* 下端の白への溶かしを 70%→86% からに（下の歯車まで見せる）。左右は v10 のまま */
@media screen and (min-width:1024px) {
  /* 10/11 夜 1024〜1199px の「写真の高さを 34vw まで」をやめ、1200px以上と同じ作りに（ユーザー「右の画像の上下幅が足りない。特に下」） */
  #fp .fp-hero-bg {
    right: calc(50% - 580px);
    width: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 90px),transparent);
    mask-image: linear-gradient(90deg,#000 calc(100% - 90px),transparent);
  }
  /* 写真の枠の右端を本文の右端（中央＋580px）で切り、最後の90pxを白へ溶かす（v12 は画面の右端まで伸び、画面が広いほど写真がサイトの枠の外へ出た） */
  #fp .fp-hero-bg img {
    left: auto;
    right: -144px;
    top: -6%;
    bottom: auto;
    width: auto;
    height: 116%;
  }
  /* 10/11 夜 ユーザー「右の画像の上下幅が足りない。特に下（実績カードの下まで）」「上側もあとちょっとだけ」→ 写真を 1.16倍にして上下へ伸ばす（写真＝FVの約17%〜94%） */
  /* 写真の大きさ・見せる範囲は v12 と同じ（FVの高さいっぱい）。歯車の右側が少し切れる（10/11 ユーザー「アップ目に・範囲は v12・歯車は少し見切れてよい」） */
  #fp .fp-hero::after {
    background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 72%,rgba(255,255,255,.5) 86%,rgba(255,255,255,.88) 94%,#fff 100%),linear-gradient(90deg,#fff calc(50% - 202px),rgba(255,255,255,.88) calc(50% - 58px),rgba(255,255,255,.45) calc(50% + 115px),rgba(255,255,255,.28) calc(50% + 317px),rgba(255,255,255,.3) calc(50% + 470px),#fff calc(50% + 600px));
  }
  /* 左の白への溶かしは v12（1440px）と同じ位置を中央からの距離で指定（画面幅に関係なく写真の同じ所で溶ける） */
}

@media screen and (min-width:1200px) {
  #fp .fp-hero-bg img {
    right: -254px;
  }
}

/* v14：写真を v13 より150px右へ（歯車が多めに切れ、コンパスが少し見える）。1024〜1199px は -144px（40px右）にとどめる＝同じだけずらすと歯車が画面の外に出る */
#fp .fp-hero-tx {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 36px;
}

#fp .fp-hero-tx > * {
  max-width: min(640px,58%);
}

#fp .fp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--sh-card);
}

#fp .fp-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--org);
  box-shadow: 0 0 0 3px var(--org-wash);
}

#fp .fp-h1 {
  margin-top: 18px;
  font-size: clamp(34px,2.6vw + 16px,56px);
  line-height: 1.2;
  letter-spacing: -.035em;
}

#fp .fp-fv-desc {
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--mute);
}

#fp .fp-proof-wrap {
  position: relative;
  z-index: 3;
}

/* 写真の上に乗せる。下の余白は .fp-hero の padding（白い区画の中。v11 初版は目次の上の余白からグレーの地が見えていた） */
#fp .fp-proof {
  display: inline-grid;
  grid-template-columns: auto auto minmax(0,320px);
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-float);
  overflow: hidden;
}

#fp .fp-proof-stats {
  display: contents;
}

#fp .fp-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 16px 30px 15px;
}

#fp .fp-stat + .fp-stat {
  border-left: 1px solid var(--line);
}

#fp .fp-stat dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: .04em;
  line-height: 1.5;
}

#fp .fp-stat dd {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

#fp .fp-stat dd b {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.035em;
}

#fp .fp-proof-note {
  display: flex;
  align-items: center;
  padding: 14px 22px;
  border-left: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--mute);
}

/* 地は白のまま（10/10 深夜 ユーザー「グレーの背景を直して」） */
/* ===== お悩み（行き先3つ＝無料で学ぶ／有料講座／法人の方へ。各カードに悩みの声2つ＋行き先） ===== */
#fp .fp-issues {
  padding-top: 88px;
  padding-bottom: 88px;
}

#fp .fp-issues-h {
  text-align: center;
  font-size: clamp(24px,1.2vw + 15px,32px);
}

#fp .fp-issue-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 36px;
}

#fp .fp-issue-grid > li {
  display: flex;
}

#fp .fp-issue {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 24px 22px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

#fp .fp-issue-voices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

#fp .fp-issue-q {
  display: block;
  padding: 12px 16px;
  border-radius: 14px 14px 14px 4px;
  background: var(--canvas);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
}

/* 吹き出し風（左下だけ角を小さく） */
#fp .fp-issue-go {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

#fp .fp-issue-go .fp-icbox {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

#fp .fp-issue-to {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .02em;
}

#fp .fp-issue-arr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-wash);
  color: var(--navy);
  transition: background-color .2s,color .2s;
}

#fp .fp-issue:hover {
  border-color: var(--navy-line);
}

#fp .fp-issue:hover .fp-issue-arr {
  background: var(--navy);
  color: #fff;
}

#fp .fp-issue:hover .fp-issue-arr .fp-arr {
  transform: translateY(2px);
}

/* ===== 無料で学べるもの（無料テキストは横長の1枚、コラムとMONOWEBは画像なしの小さいカード2枚） ===== */
#fp .fp-free-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

#fp .fp-free {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

#fp .fp-free-vis {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
}

#fp .fp-free-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 20px 14px 12px;
}

/* ものコラム・MONOWEB：アイコン＋文字＋文字リンク（10/10 深夜 ユーザー「縦半分ぐらいに。画像はなくてもいい」） */
#fp .fp-free.is-mini {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 0 16px;
  padding: 22px 24px 20px;
}

#fp .fp-free.is-mini .fp-free-body {
  height: 100%;
  padding: 0;
}

#fp .fp-free.is-mini .fp-free-name {
  margin-top: 6px;
  font-size: 18px;
}

#fp .fp-free.is-mini .fp-free-tx {
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 1.75;
}

#fp .fp-free.is-mini .fp-go {
  margin-top: auto;
  align-self: flex-start;
}

#fp .fp-stretch:hover {
  border-color: var(--navy-line);
}

#fp .fp-free-cond {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
}

#fp .fp-free-name {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -.01em;
}

#fp .fp-free-tx {
  margin: 8px 0 20px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--txt);
}

#fp .fp-free .fp-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* 無料テキスト（＋メルマガ）：横幅いっぱい。左は方眼の上に表紙9冊の扇形 */
#fp .fp-free.is-main {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  border-color: var(--navy-line);
  box-shadow: 0 1px 2px rgba(15,31,51,.05),0 18px 40px -28px rgba(15,31,51,.35);
}

/* 主役（無料会員登録の入口）だけ一段目立たせる */
#fp .fp-free.is-main .fp-free-body {
  justify-content: center;
  padding: 28px 28px 28px 40px;
}

#fp .fp-free.is-main .fp-free-name {
  font-size: 24px;
}

#fp .fp-free-vis.is-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 300px;
  background-color: var(--navy-wash);
  background-image: radial-gradient(60% 55% at 50% 48%,rgba(255,255,255,.95),rgba(255,255,255,0)),linear-gradient(rgba(38,76,115,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(38,76,115,.07) 1px,transparent 1px);
  background-size: auto,24px 24px,24px 24px;
  background-position: center,-1px -1px,-1px -1px;
}

#fp .fp-fan {
  display: flex;
  align-items: flex-end;
  padding-top: 8px;
}

#fp .fp-cover {
  position: relative;
  display: block;
  width: 104px;
  aspect-ratio: 183/230;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  rotate: var(--r);
  translate: 0 var(--y);
  box-shadow: 0 1px 2px rgba(15,27,45,.16),0 12px 20px -10px rgba(15,27,45,.5);
  transition: translate .35s var(--ease);
}

#fp .fp-cover + .fp-cover {
  margin-left: -70px;
}

#fp .fp-cover img {
  position: absolute;
  top: 0;
  left: -45.9%;
  width: 194.54%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* 見開き画像の右半分＝表紙だけ */
#fp .fp-free.is-main:hover .fp-cover {
  translate: 0 calc(var(--y) - 4px);
}

#fp .fp-free-count {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 28px;
  box-shadow: var(--sh-card);
}

#fp .fp-free-count::before {
  content: "全";
}

#fp .fp-free-count b {
  font-size: 16px;
  font-weight: 700;
}

#fp .fp-free-mail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--canvas);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--txt);
}

#fp .fp-free-mail-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--navy);
}

#fp .fp-free-mail b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

/* MONOWEB と MONO塾 の違い */
/* 10/11 ユーザー「ボタンのように見えてしまう」→ 枠・地の色・ピル型の札をやめ、罫線で区切った2列の説明に（押せる物に見せない） */
#fp .fp-sites {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

#fp .fp-sites-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

#fp .fp-sites-h svg {
  color: var(--org);
}

#fp .fp-sites-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-top: 16px;
}

#fp .fp-site {
  padding: 4px 32px 4px 0;
}

#fp .fp-site + .fp-site {
  padding: 4px 0 4px 32px;
  border-left: 1px solid var(--line);
}

#fp .fp-site dt {
  display: flex;
  align-items: flex-end;
  gap: 8px 14px;
  flex-wrap: wrap;
}

#fp .fp-site-logo {
  display: block;
  width: auto;
  height: 34px;
}

#fp .fp-site-logo.is-web {
  height: 42px;
}

#fp .fp-site-kind {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
  line-height: 1.6;
}

#fp .fp-site-kind.is-here {
  color: var(--navy);
}

#fp .fp-site dd {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--txt);
}

#fp .fp-site dd b {
  color: var(--ink);
  font-weight: 700;
}

/* ===== 有料講座（3枚とも同じ形。写真の台は方眼＋淡いネイビー） ===== */
#fp .fp-ways-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

#fp .fp-way {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

#fp .fp-way-vis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--navy-wash);
  background-image: radial-gradient(70% 70% at 50% 40%,rgba(255,255,255,.9),rgba(255,255,255,0)),linear-gradient(rgba(38,76,115,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(38,76,115,.06) 1px,transparent 1px);
  background-size: auto,20px 20px,20px 20px;
  background-position: center,-1px -1px,-1px -1px;
}

#fp .fp-way-vis img {
  width: auto;
  max-width: 80%;
  max-height: 82%;
  transition: transform .5s var(--ease);
}

#fp .fp-way-vis img.is-photo {
  max-width: 70%;
  max-height: 70%;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 14px 28px -14px rgba(15,31,51,.5);
}

#fp .fp-way:hover .fp-way-vis img {
  transform: translateY(-4px);
}

#fp .fp-way-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 14px 12px;
  container-type: inline-size;
}

@container (max-width:276px) {
  #fp .fp-way-count {
    width: 100%;
    margin-left: 0;
  }
}

/* カードが狭いとき（1024px前後）は3枚とも講座数を名前の下へ（1枚だけ折れて行がずれるのを防ぐ） */
#fp .fp-way-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#fp .fp-way-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.01em;
}

#fp .fp-way-count {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  white-space: nowrap;
}

#fp .fp-way-count b {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 1px;
  line-height: 1;
}

#fp .fp-way-goal {
  flex: 1;
  margin: 10px 0 20px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--txt);
  line-height: 1.75;
}

#fp .fp-way .fp-btn {
  width: 100%;
}

/* ===== 法人の方へ（薄いネイビーの方眼の地＋白いパネル） ===== */
#fp .fp-corp {
  background-color: #e9f0f7;
  background-image: linear-gradient(rgba(38,76,115,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(38,76,115,.06) 1px,transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  border-top-color: #d3dfeb;
}

#fp .fp-corp-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 48px;
  align-items: center;
  padding: 48px;
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid #c9d6e4;
  box-shadow: 0 1px 2px rgba(15,31,51,.05),0 32px 64px -40px rgba(15,31,51,.45);
}

#fp .fp-guide.is-corp {
  position: absolute;
  top: -60px;
  right: 40px;
}

#fp .fp-corp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
}

#fp .fp-corp-main .fp-h2 {
  margin-top: 18px;
  font-size: clamp(26px,1.5vw + 15px,36px);
}

#fp .fp-corp-main .fp-lead {
  margin-top: 14px;
}

#fp .fp-corp-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px 18px;
  margin: 24px 0 30px;
}

#fp .fp-corp-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

#fp .fp-corp-list li:last-child {
  grid-column: 1 / -1;
}

#fp .fp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy-wash);
  color: var(--navy);
}

/* 10/11 ユーザー「右側は有料ライセンスだけ、さらっと」→ 右に一覧とボタン、その下に注記1行（比較の箱はやめた） */
#fp .fp-corp-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#fp .fp-corp-body .fp-corp-list {
  width: 100%;
  margin: 0 0 28px;
}

#fp .fp-corp-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-2);
  font-size: 13px;
  line-height: 1.75;
  color: var(--mute);
}

#fp .fp-corp-note svg {
  flex: 0 0 16px;
  margin-top: 3px;
  color: var(--mute);
}

/* ===== 教材をつくる人・会員の声 ===== */
#fp .fp-about-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 14px;
}

#fp .fp-about-lead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 14px;
}

/* カードの上の短い紹介文（10/11 ユーザー「紹介文が軽く上にあるとクリックしやすい」） */
#fp .fp-about-lead .fp-subh {
  font-size: 17px;
}

#fp .fp-about-lead p {
  font-size: 14px;
  color: var(--mute);
}

#fp .fp-about-lead:not(:first-child) {
  margin-top: 26px;
}

#fp .fp-origin {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: stretch;
  overflow: hidden;
}

#fp .fp-origin-vis {
  min-height: 220px;
  background: #e9e2d6;
  overflow: hidden;
}

#fp .fp-origin-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform .6s var(--ease);
}

#fp .fp-origin:hover .fp-origin-vis img {
  transform: scale(1.04);
}

#fp .fp-origin-tx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 40px;
}

#fp .fp-origin-tx b {
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: -.01em;
}

#fp .fp-expert {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 16px 28px;
  padding: 20px 28px;
}

#fp .fp-expert-faces {
  display: flex;
}

#fp .fp-expert-faces img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 3px solid var(--paper);
  background: var(--wash);
  box-shadow: 0 2px 6px -2px rgba(15,31,51,.3);
}

#fp .fp-expert-faces img + img {
  margin-left: -14px;
}

#fp .fp-expert-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-left: -14px;
  border-radius: 50%;
  border: 3px solid var(--paper);
  background: var(--navy-wash);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

#fp .fp-expert-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.6;
}

#fp .fp-expert-tx b {
  font-size: 17px;
  color: var(--ink);
}

#fp .fp-expert-tx span {
  font-size: 14px;
  color: var(--mute);
}

#fp .fp-voices {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

#fp .fp-voices-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* 上の段＝無料テキスト、下の段＝メルマガ（10/11） */
#fp .fp-voices-h svg {
  color: var(--navy);
}

#fp .fp-voices + .fp-swipe-hint + .fp-voices-h {
  margin-top: 28px;
}

#fp .fp-voice {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
}

#fp .fp-voice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#fp .fp-voice-mark {
  display: block;
  height: 26px;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 60px;
  line-height: .85;
  color: var(--org);
}

#fp .fp-voice-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--wash);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

#fp .fp-voice-q {
  flex: 1;
  margin-top: 14px;
  font-style: normal;
  quotes: none;
}

#fp .fp-voice-q p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  font-style: normal;
}

#fp .fp-voice-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mute);
}

#fp .fp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wash);
  border: 1px solid var(--line);
  color: var(--mute);
}

#fp .fp-swipe-hint {
  display: none;
}

/* ===== よくある質問 ===== */
#fp .fp-faq-in {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.45fr);
  gap: 56px;
  align-items: start;
}

#fp .fp-faq-side .fp-head {
  margin-bottom: 20px;
}

#fp .fp-faq-more {
  font-size: 14.5px;
}

#fp .fp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#fp .fp-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--sh-card);
  transition: border-color .2s,box-shadow .2s;
}

#fp .fp-faq-item:hover {
  border-color: var(--line-2);
}

#fp .fp-faq-item[open] {
  border-color: var(--navy-line);
  box-shadow: 0 12px 28px -20px rgba(15,31,51,.35);
}

#fp .fp-faq-q {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 18px 18px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}

#fp .fp-faq-q::-webkit-details-marker {
  display: none;
}

#fp .fp-faq-q::marker {
  content: "";
}

#fp .fp-faq-qmark {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--org);
}

#fp .fp-faq-qtx {
  flex: 1;
}

#fp .fp-faq-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink);
  background: var(--paper);
  transition: transform .3s var(--ease),background-color .2s,color .2s,border-color .2s;
}

#fp .fp-faq-item[open] .fp-faq-ic {
  transform: rotate(45deg);
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

#fp .fp-faq-a {
  padding: 0 60px 20px 45px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--txt);
}

#fp .fp-faq-item::details-content {
  height: 0;
  overflow: clip;
  transition: height .35s var(--ease),content-visibility .35s allow-discrete;
}

#fp .fp-faq-item[open]::details-content {
  height: auto;
}

/* ===== 次の一歩（濃紺パネル） ===== */
#fp .fp-next-panel {
  position: relative;
  overflow: hidden;
  padding: 64px 56px 56px;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg,#264c73 0%,#132c49 100%);
  color: #d7dde5;
  box-shadow: 0 40px 80px -48px rgba(15,31,51,.8);
}

#fp .fp-next-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 320px at 92% -10%,rgba(140,185,230,.3),transparent 70%),radial-gradient(520px 280px at -5% 110%,rgba(237,89,1,.16),transparent 70%);
  pointer-events: none;
}

#fp .fp-next-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg,#000,transparent 75%);
  mask-image: linear-gradient(180deg,#000,transparent 75%);
  pointer-events: none;
}

#fp .fp-next-panel > * {
  position: relative;
  z-index: 1;
}

#fp .fp-head-ondark .fp-h2 {
  color: #fff;
}

#fp .fp-head-ondark .fp-hl {
  color: #ffc199;
}

#fp .fp-head-ondark .fp-hl::before {
  background: rgba(255,255,255,.12);
}

#fp .fp-head-ondark .fp-lead {
  color: rgba(255,255,255,.72);
}

#fp .fp-next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#fp .fp-next-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) 300px;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  transition: background-color .2s,border-color .2s;
}

#fp .fp-next-card:not(.is-pick):hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}

#fp .fp-next-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: #fff;
}

#fp .fp-next-who {
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.45;
}

#fp .fp-next-note {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

#fp .fp-next-card > .fp-btn {
  width: 100%;
}

#fp .fp-next-card.is-multi {
  grid-template-columns: auto minmax(0,1fr) auto;
}

#fp .fp-next-btns {
  display: flex;
  gap: 8px;
}

#fp .fp-next-btns .fp-btn {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
}

#fp .fp-next-card.is-pick {
  background: var(--paper);
  border-color: var(--paper);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.6);
}

#fp .fp-next-card.is-pick .fp-next-ic {
  background: var(--navy-wash);
  color: var(--navy);
}

/* 緑は登録ボタンだけ */
#fp .fp-next-card.is-pick .fp-next-who {
  color: var(--ink);
}

#fp .fp-next-card.is-pick .fp-next-note {
  color: var(--mute);
}

@media (prefers-reduced-motion:reduce) {
  #fp *,
  #fp *::before,
  #fp *::after,
  #fp .fp-faq-item::details-content {
    transition: none!important;
    animation: none!important;
  }
  #fp a.fp-card:hover,
  #fp .fp-stretch:hover,
  #fp .fp-issue:hover {
    transform: none;
  }
}

/* ===== 幅 ===== */
@media screen and (max-width:1023px) {
  #fp .fp-hero::after {
    background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 72%,#fff 100%),linear-gradient(90deg,#fff 0%,#fff 40%,rgba(255,255,255,.85) 48%,rgba(255,255,255,.35) 60%,rgba(255,255,255,.28) 86%,#fff 100%);
  }
  #fp .fp-hero-bg {
    bottom: auto;
    height: min(100%,44vw);
    -webkit-mask-image: linear-gradient(180deg,#000 72%,transparent);
    mask-image: linear-gradient(180deg,#000 72%,transparent);
  }
  /* タブレットは写真の高さを抑え、下端を白へ溶かす（全高に敷くと歯車が大きくなりすぎる） */
  #fp .fp-proof {
    grid-template-columns: auto auto;
  }
  #fp .fp-proof-note {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 10px 22px;
  }
  #fp .fp-issue {
    padding: 20px 18px 18px;
  }
  #fp .fp-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 32px;
  }
  #fp .fp-head-row > .fp-guide,
  #fp .fp-guide.is-corp {
    flex-direction: row;
  }
  #fp .fp-head-row > .fp-guide .fp-guide-say::before,
  #fp .fp-guide.is-corp .fp-guide-say::before {
    left: -7px;
    right: auto;
    border-right: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  #fp .fp-guide.is-corp {
    position: static;
    margin-bottom: -4px;
  }
  #fp .fp-guide-img {
    height: 68px;
  }
  #fp .fp-ways-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #fp .fp-way {
    display: grid;
    grid-template-columns: 240px minmax(0,1fr);
    gap: 0 8px;
  }
  #fp .fp-way-vis {
    aspect-ratio: auto;
    height: 100%;
    min-height: 150px;
  }
  #fp .fp-way-body {
    padding: 14px 14px 10px 16px;
  }
  #fp .fp-way .fp-btn {
    width: auto;
    align-self: flex-start;
  }
  #fp .fp-corp-panel {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
    padding: 36px;
  }
  #fp .fp-swipe {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    margin: 0 -24px;
    padding: 14px 24px 18px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  #fp .fp-swipe::-webkit-scrollbar {
    display: none;
  }
  #fp .fp-swipe > li {
    flex: 0 0 min(82%,340px);
    scroll-snap-align: start;
  }
  #fp .fp-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mute);
  }
  #fp .fp-next-card {
    grid-template-columns: auto minmax(0,1fr) 260px;
  }
  #fp .fp-next-card.is-multi {
    grid-template-columns: auto minmax(0,1fr);
  }
  #fp .fp-next-btns {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
}

@media screen and (max-width:860px) {
  #fp .fp-sec:not(.fp-fv) {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  /* FV の余白（0）はそのまま */
  #fp .fp-head {
    margin-bottom: 32px;
  }
  #fp .fp-pcbr {
    display: none;
  }
  #fp .fp-issues {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  #fp .fp-issue-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #fp .fp-free-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #fp .fp-free.is-main {
    grid-template-columns: 1fr;
  }
  #fp .fp-free.is-main .fp-free-body {
    padding: 22px 14px 12px;
  }
  #fp .fp-free-vis.is-text {
    min-height: 240px;
  }
  #fp .fp-faq-in {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #fp .fp-origin {
    grid-template-columns: 1fr;
  }
  #fp .fp-origin-vis {
    min-height: 0;
    aspect-ratio: 1000/270;
  }
  #fp .fp-origin-tx {
    padding: 24px;
  }
  #fp .fp-expert {
    grid-template-columns: minmax(0,1fr);
    padding: 20px 22px;
  }
  #fp .fp-next-panel {
    padding: 44px 28px 32px;
    border-radius: 24px;
  }
  #fp .fp-head-row.is-sub {
    margin-top: 48px;
  }
}

@media screen and (max-width:600px) {
  #fp .fp-in {
    padding: 0 18px;
  }
  #fp .fp-sec:not(.fp-fv) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  #fp .fp-swipe {
    margin: 0 -18px;
    padding-left: 18px;
    padding-right: 18px;
    scroll-padding: 0 18px;
  }
  /* FV：上に文字、下に写真（縦長の別切り出し） */
  #fp .fp-hero {
    padding-bottom: 36px;
  }
  #fp .fp-hero-bg {
    bottom: 110px;
    height: auto;
  }
  /* 写真は実績カードの中ほどで終える（カードの下まで敷くと写真がカードに隠れる） */
  #fp .fp-hero-bg img {
    object-position: center bottom;
  }
  #fp .fp-hero::after {
    background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.95) 36%,rgba(255,255,255,.1) 54%,rgba(255,255,255,0) 100%);
  }
  /* 上に文字、その下に写真 */
  #fp .fp-hero-tx {
    padding-top: 24px;
    padding-bottom: 150px;
  }
  #fp .fp-hero-tx > * {
    max-width: none;
  }
  #fp .fp-h1 {
    margin-top: 14px;
    font-size: clamp(30px,8.6vw,36px);
    letter-spacing: -.03em;
  }
  #fp .fp-fv-desc {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.85;
  }
  #fp .fp-proof {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  #fp .fp-stat {
    padding: 14px 16px 12px;
  }
  #fp .fp-stat dt {
    font-size: 11.5px;
  }
  #fp .fp-stat dd b {
    font-size: 26px;
  }
  #fp .fp-proof-note {
    padding: 10px 16px;
    font-size: 11px;
  }
  /* お悩み：1列・横長 */
  #fp .fp-issues-h {
    text-align: left;
  }
  #fp .fp-guide.is-center {
    justify-content: flex-start;
  }
  #fp .fp-issue-grid {
    gap: 12px;
    margin-top: 24px;
  }
  #fp .fp-issue {
    gap: 16px;
    padding: 18px 16px 16px;
  }
  #fp .fp-issue-q {
    padding: 10px 14px;
    font-size: 14.5px;
  }
  #fp .fp-issue-go {
    padding-top: 14px;
  }
  #fp .fp-issue-to {
    font-size: 16px;
  }
  /* 無料・有料 */
  #fp .fp-free,
  #fp .fp-free.is-main,
  #fp .fp-way {
    padding: 8px;
  }
  #fp .fp-free-body,
  #fp .fp-free.is-main .fp-free-body {
    padding: 18px 10px 10px;
  }
  #fp .fp-free.is-main .fp-free-name {
    font-size: 21px;
  }
  #fp .fp-free-vis.is-text {
    min-height: 210px;
    gap: 14px;
  }
  #fp .fp-cover {
    width: 66px;
  }
  #fp .fp-cover + .fp-cover {
    margin-left: -46px;
  }
  #fp .fp-free .fp-btn {
    align-self: stretch;
  }
  #fp .fp-free.is-mini {
    gap: 0 14px;
    padding: 18px 16px 16px;
  }
  #fp .fp-free.is-mini .fp-icbox {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  #fp .fp-sites {
    margin-top: 28px;
    padding-top: 20px;
  }
  #fp .fp-sites-grid {
    grid-template-columns: 1fr;
  }
  #fp .fp-site {
    padding: 0 0 16px;
  }
  #fp .fp-site + .fp-site {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  /* 有料：写真は左に小さく、名前と一文を右、ボタンは下（3枚を短い縦の長さで見比べられる） */
  #fp .fp-way {
    grid-template-columns: 104px minmax(0,1fr);
    gap: 0;
  }
  #fp .fp-way-vis {
    grid-row: 1 / span 2;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    align-self: start;
    border-radius: 10px;
  }
  #fp .fp-way-vis img {
    max-width: 88%;
    max-height: 88%;
  }
  #fp .fp-way-vis img.is-photo {
    max-width: 84%;
    max-height: 70%;
    border-width: 2px;
    border-radius: 5px;
  }
  #fp .fp-way-body {
    display: contents;
  }
  #fp .fp-way-top {
    grid-column: 2;
    align-self: end;
    padding: 2px 2px 0 14px;
    gap: 6px;
  }
  #fp .fp-way-name {
    font-size: 17px;
  }
  #fp .fp-way-count {
    width: 100%;
    margin-left: 0;
  }
  #fp .fp-way-count b {
    font-size: 20px;
  }
  #fp .fp-way-goal {
    grid-column: 2;
    margin: 4px 0 0;
    padding: 0 2px 0 14px;
    font-size: 13.5px;
    line-height: 1.65;
  }
  #fp .fp-way .fp-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 12px;
  }
  /* 法人 */
  #fp .fp-corp-panel {
    padding: 26px 18px;
    border-radius: 22px;
  }
  #fp .fp-corp-list {
    grid-template-columns: 1fr;
  }
  #fp .fp-corp-main .fp-btn {
    width: 100%;
  }
  /* 声・FAQ・次の一歩 */
  #fp .fp-origin-tx b {
    font-size: 18px;
  }
  #fp .fp-faq-q {
    padding: 16px 14px 16px 16px;
    font-size: 15.5px;
    gap: 12px;
  }
  #fp .fp-faq-a {
    padding: 0 16px 18px 39px;
  }
  #fp .fp-next-panel {
    margin: 0 -6px;
    padding: 40px 18px 20px;
  }
  #fp .fp-next-card,
  #fp .fp-next-card.is-multi {
    grid-template-columns: auto minmax(0,1fr);
    gap: 12px 14px;
    padding: 18px;
  }
  #fp .fp-next-card > .fp-btn,
  #fp .fp-next-btns {
    grid-column: 1 / -1;
  }
  #fp .fp-next-btns {
    flex-direction: column;
  }
  #fp .fp-next-btns .fp-btn {
    width: 100%;
  }
  #fp .fp-next-ic {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width:360px) {
  #fp .fp-h2 {
    font-size: 25px;
  }
  #fp .fp-stat dd b {
    font-size: 23px;
  }
}