@charset "utf-8";
/* =====================================================================
   redesign-v7.css ― 【齊藤先生】①デザイン修正（v7_qo84）
   ---------------------------------------------------------------------
   デザイン案のトーンを
   style.css / important.css の上に上書きする形で再現するレイヤー。
   既存の class 名・HTML構造・機能（フォーム／日程ボタン等）は一切変更せず、
   見た目（色・書体・形状）だけをこのファイルで上書きする。
   index.php / ya.php / ms.php / nlmt.php / smn.php すべてで共有。
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Outfit:wght@600;700&display=swap');

:root {
  --c-ink-navy: #0F2A55;
  --c-brand-navy: #1D4E9B;
  --c-brand-navy-dark: #12356B;
  --c-accent-yellow: #FFC93C;
  --c-accent-yellow-shadow: #E0A800;
  --c-marker: #FFE690;
  --c-pale-blue: #EEF4FC;
  --c-pale-blue-border: #DCE7F6;
  --c-cream: #FFF9EC;
  --c-cream-border: #F4E4BE;
  /* カード枠は1pxに細くしたため（2026-09-29 AIっぽさ抑え）、薄くなりすぎないよう1段濃い色を使う */
  --v7-card-line: #C9D8EE;
  --v7-card-line-cream: #EAD6A4;
  --c-body-text: #33517E;
  --c-label-text: #5C7699;
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Outfit", "Zen Kaku Gothic New", sans-serif;
}

/* ========================
   ベース
   ======================== */
body {
  font-family: var(--font-jp);
  color: var(--c-body-text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-brand-navy); }
a:hover { color: var(--c-brand-navy-dark); }

h2 {
  font-family: var(--font-jp);
  font-weight: 900;
  color: var(--c-ink-navy);
}
h2 span {
  font-family: var(--font-en);
  letter-spacing: 0.22em;
  color: var(--c-brand-navy);
  font-weight: 700;
  font-size: 46%;
}
h3 { font-family: var(--font-jp); font-weight: 900; color: var(--c-ink-navy); }

/* ========================
   セクション背景
   ======================== */
.bg-sblue { background: var(--c-pale-blue); }
.bg-gray  { background: var(--c-cream); }
.seminar-benefits-bg { background: linear-gradient(to bottom, #FFFFFF, var(--c-pale-blue)); }

/* 講師ストーリー：濃紺〜紫のネオングラデーションをやめ、単色のInk Navyに */
.bg-gblue {
  background: var(--c-ink-navy);
  color: #ffffff;
}
.bg-gblue h2 { color: #ffffff; }
.bg-gblue h2 span { color: var(--c-accent-yellow); }

/* ========================
   カード類（角丸を統一・淡い枠に）
   ======================== */
.wbox, .cbox {
  background: #ffffff;
  color: var(--c-ink-navy);
  border: 1px solid var(--c-pale-blue-border);
  border-radius: 16px;
  box-shadow: none;
}
.cbox h3 { color: var(--c-ink-navy); }

.qabox {
  background: #ffffff;
  border: 1px solid var(--c-pale-blue-border);
  border-radius: 4px;
}
.qabox h3::before { color: var(--c-brand-navy); }
.qabox p::before { color: var(--c-accent-yellow-shadow); }

.ratebox {
  background: #ffffff;
  border: 1px solid var(--c-pale-blue-border);
  border-radius: 16px;
  padding: 18px 22px;
}

.story-panel {
  background: #ffffff;
  color: var(--c-body-text);
  border: 1px solid var(--c-pale-blue-border);
  border-radius: 18px;
}
.story-sub::before { background: var(--c-accent-yellow); }
.story-text .story-quote { color: var(--c-brand-navy); }
.story-text .story-key {
  background: var(--c-pale-blue);
  color: var(--c-brand-navy);
  border-radius: 16px;
}
.story-em {
  background: linear-gradient(transparent 60%, var(--c-marker) 60%);
  color: var(--c-ink-navy);
}
.story-text .story-sign { color: var(--c-brand-navy); }

.fit-item {
  background: #ffffff;
  border: 1px solid var(--c-pale-blue-border);
  border-radius: 16px;
}
.fit-item::before {
  background-color: var(--c-brand-navy);
}
.fit-item-title { color: var(--c-ink-navy); }
.fit-mark { background: linear-gradient(transparent 62%, var(--c-marker) 62%); color: var(--c-ink-navy); }
.fit-unfit { background: #F4F5F7; border-radius: 16px; }
.fit-unfit-em { background: linear-gradient(transparent 62%, #E2E5EA 62%); }
.fit-closing { border-top: 1px solid var(--c-pale-blue-border); border-bottom: 1px solid var(--c-pale-blue-border); }
.fit-closing-em { color: var(--c-brand-navy); }

/* ========================
   CTAボタン（黄色ピル1種類に統一・ベタ影のみ）
   ======================== */
.button-cta,
button.button-cta {
  border-radius: 999px;
}
.button-inner {
  background-color: var(--c-accent-yellow);
  box-shadow: 0px 5px 0px 0px var(--c-accent-yellow-shadow);
  border-radius: 999px;
}
.button-text {
  font-family: var(--font-jp);
  color: var(--c-ink-navy);
  font-weight: 900;
}
.button-arrow path { stroke: var(--c-ink-navy); }
.button-cta:hover .button-inner {
  background-color: #FFDA75;
  box-shadow: 0px 5px 0px 0px var(--c-accent-yellow-shadow);
}
.button-cta:active .button-inner {
  background-color: var(--c-accent-yellow-shadow);
  box-shadow: none;
}
.cta-note-imported { color: var(--c-label-text); font-family: var(--font-jp); }

/* ========================
   日程選択ボタン（Figma node 92:8047 準拠）
   ---------------------------------------------------------------------
   DOM構造（.button-date > .button-date-text + .button-date-action）は
   _shared/seminar.php の出力のまま変更していない。Figmaでは日付行と
   時刻行でフォントサイズが違うが、テキストは1ノード（<br>区切り）しかない。
   ---------------------------------------------------------------------
   2026-09-18修正：日付行だけ::first-lineで縮小する近似を試みていたが、
   .button-date-textがinline要素（<span>）のため::first-lineの適用対象外で
   挙動が不安定になり、ボタンによって文字サイズ・位置がバラついていた
   （安齋さんから指摘）。inline-blockにして::first-lineを機能させるのではなく、
   そもそも1ノードへの疑似的な行分けを諦め、全体を統一サイズにして
   ボタンごとの表示ブレを無くした（トーン優先・確実性を優先する調整）。
   ======================== */
.input-date { gap: 28px; margin: 32px 0; }
.button-date {
  background-color: #ffffff;
  border: 3px solid var(--c-brand-navy);
  border-radius: 22px;
  padding: 30px 32px;
  gap: 26px;
}
.button-date-text {
  display: block;
  color: var(--c-ink-navy);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.5;
  white-space: nowrap;
  text-align: center;
}
.button-date-action {
  width: 100%;
  background-color: var(--c-accent-yellow);
  box-shadow: 0px 5px 0px 0px var(--c-accent-yellow-shadow);
  color: var(--c-ink-navy);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 18px;
  padding: 12px 0;
}
.button-date-action svg path { stroke: var(--c-ink-navy) !important; }
/* 旧style.cssのピンク背景を上書きし、ページ内の薄い黄色に（2026-09-29） */
.button-date:hover, .v7-date-bar.navy .button-date:hover { border-color: var(--c-brand-navy-dark); background-color: #FFF3D6; }
.button-date:hover .button-date-action { background-color: #FFDA75; }
.button-date.selected {
  background-color: #FFF3D6;
  border-color: var(--c-accent-yellow-shadow);
}
.button-date.selected .button-date-action { background-color: var(--c-accent-yellow-shadow); color: #ffffff; }
.button-date.disabled .button-date-action { background-color: #C9D2DE; }

@media screen and (max-width: 700px) {
  .button-date { padding: 20px 22px; }
  .button-date-text { font-size: 20px; }
}

/* ========================
   FV下 参加情報＋日程見出し
   ======================== */
.fv-seminar-title { color: var(--c-ink-navy); font-family: var(--font-jp); }
.fv-info-label { background: var(--c-brand-navy); font-family: var(--font-jp); }
.fv-info-value { color: var(--c-ink-navy); font-family: var(--font-jp); }
.fv-info-free {
  color: var(--c-accent-yellow-shadow);
  background: linear-gradient(transparent 62%, var(--c-marker) 62%);
}
.date-heading { color: var(--c-ink-navy); }
.date-sub-heading { color: var(--c-label-text); }
.date-notes { color: var(--c-label-text); text-align: center; }

/* ========================
   講師紹介・実績・VOICE
   ======================== */
.name, .vname { color: var(--c-ink-navy); }
.vname span {
  background: var(--c-brand-navy);
  border-radius: 999px;
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}
.prof { border: 3px solid var(--c-pale-blue-border); }
.res img { border-radius: 12px; }

/* ========================
   フォーム入力
   ======================== */
input[type="text"],
input[type="tel"],
input[type="email"],
#sstringdef2o {
  border: 1px solid var(--c-pale-blue-border);
  border-radius: 12px;
  color: var(--c-ink-navy);
}
.req { background: var(--c-accent-yellow-shadow); border-radius: 999px; }

/* ========================
   フッター
   ======================== */
footer {
  background: var(--c-ink-navy);
  color: #ffffff;
}
footer a { color: #ffffff; }

/* ========================
   サイト全体の幅方針（2026-09-18改定）
   ---------------------------------------------------------------------
   Figma側のコンテナ幅は1024px（headerのmax-w-[1024px]で実測確認）。
   旧サイトは .wrap(600px)/.header_in(700px) の狭い1カラム構成だったが、
   安齋さんの指示によりFigma準拠の幅へサイト全体を統一する。
   新設の v7-*-in クラスと、既存の .wrap（MESSAGE以降の未着手セクションが
   継続使用）の両方をここで1024pxに揃える。
   ======================== */
:root { --v7-content-width: 1024px; --v7-content-pad: 40px; }
@media screen and (max-width: 700px) {
  :root { --v7-content-pad: 20px; } /* SPは左右20px（2026-09-18 安齋さん指示） */
}

/* 見出しは文節（HTML側の<wbr>）でしか改行しない。幅が足りない時だけ文節単位で折り返し、
   単語の途中で割れないようにする。1文節すら入らない極端な幅では overflow-wrap で保険をかける */
.v7-section-heading, .v7-message-greeting, .v7-message-sub, .v7-message-quote-text,
.v7-message-quote-em, .v7-message-closing-title, .v7-media-title, .v7-contents-title,
.v7-foryou-title, .v7-foryou-unfit-title, .v7-bonus-title, .qabox h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: var(--v7-content-width);
  padding: 70px var(--v7-content-pad);
  box-sizing: border-box;
}
@media screen and (max-width: 700px) {
  .wrap { padding: 10% 20px; }
}

/* ========================
   ヘッダー（ロゴ＋タグ2種＋CTA）
   ---------------------------------------------------------------------
   Figma node 92:9062 に準拠。ロゴ＋セミナー名／オンライン開催・参加費無料
   の2タグ／CTAボタンが横並び。1024px幅では全要素が収まるが、モバイル幅
   では2タグを折り返し・非表示にして機能（CTA到達）を優先する。
   ======================== */
.v7-header {
  background: #ffffff;
  border-bottom: 1px solid var(--c-pale-blue-border);
}
.v7-header-in {
  max-width: var(--v7-content-width);
  margin: 0 auto;
  padding: 0 var(--v7-content-pad);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}
.v7-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.v7-header-brand svg { flex-shrink: 0; }
.v7-header-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--c-ink-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v7-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.v7-header-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ボタンと誤認されないよう、塗りのピルではなく金額と同じ下半分マーカーで表現（2026-09-29 aun③） */
.v7-header-tag {
  padding: 0 2px;
  font-size: 16.8px;
  font-weight: 700;
  white-space: nowrap;
}
.v7-header-tags { gap: 14px; }
.v7-header-tag.online { background: linear-gradient(transparent 62%, var(--c-pale-blue) 62%); color: #2F5FA6; }
.v7-header-tag.free { background: linear-gradient(transparent 62%, #FFF3D6 62%); color: #8A6200; }
.v7-header-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-accent-yellow);
  color: var(--c-ink-navy);
  font-weight: 900;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--c-accent-yellow-shadow);
  text-decoration: none;
  white-space: nowrap;
}
.v7-header-cta:hover { color: var(--c-ink-navy); background: #FFDA75; }

/* SPでも「ロゴ＋セミナー名」と「CTA」は折り返さず1行に収める（375pxまで想定）。
   2タグは非表示、420px以下はロゴ・文字を縮め、CTAの矢印を省いて幅を確保する */
@media screen and (max-width: 700px) {
  .v7-header-in { height: 60px; flex-wrap: nowrap; gap: 10px; }
  .v7-header-title { font-size: 13px; }
  .v7-header-tags { display: none; }
  .v7-header-cta { font-size: 13px; padding: 10px 16px; }
}

@media screen and (max-width: 420px) {
  .v7-header-brand { gap: 8px; }
  .v7-header-brand svg { width: 24px; height: 24px; }
  .v7-header-title { font-size: 12px; letter-spacing: 0; }
  .v7-header-cta { font-size: 12px; padding: 9px 12px; }
  .v7-header-cta svg { display: none; }
}

/* ========================
   FVヒーロー（Figma node 92:8921 準拠）
   ---------------------------------------------------------------------
   バッジは中央揃え・紺塗りピル。見出し2行＋情報タグ3種＋イラスト、
   という構成はFigma通り。ただしFigmaは「見出し列の幅＝イラストの高さに
   連動するオート幅」で組まれており、そのままの数値(62px/80px等)だと
   1024px幅では見出しが折り返れてしまうため、比率は保ったまま全体を
   約0.78倍に縮小している（トーン優先の調整）。
   ======================== */
.v7-hero { background: #ffffff; padding: 56px var(--v7-content-pad) 0; }
.v7-hero-in { max-width: var(--v7-content-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.v7-hero-grid { display: grid; grid-template-columns: 1fr 460px; gap: 32px; align-items: center; width: 100%; }
@media screen and (max-width: 900px) {
  .v7-hero-grid { grid-template-columns: 1fr; }
}

/* 紺の塗りピルはボタンと誤認されるため、文字＋文字に被らない斜めストライプの下線に（2026-09-29 aun①） */
.v7-hero-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-brand-navy);
  line-height: 1.4;
  text-align: center;
}
.v7-hero-badge svg { flex-shrink: 0; }
/* 幅が足りない時は「」」の直後（<wbr>）でだけ改行する。極端に狭い時だけ overflow-wrap で保険 */
.v7-hero-badge-text { word-break: keep-all; overflow-wrap: anywhere; }
.v7-hero-badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7.5px;
  background-image: repeating-linear-gradient(-45deg, var(--c-brand-navy), var(--c-brand-navy) 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  backface-visibility: hidden;
}

.v7-hero-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--c-ink-navy);
}
.v7-hero-title-mk {
  display: inline-flex;
  align-items: baseline;
  background: var(--c-marker);
  padding: 3px 6px 5px;
  margin-left: 2px;
  font-size: 40px;
}
.v7-hero-title-mk em { font-style: normal; font-size: 1.18em; font-weight: 900; }
.v7-hero-title .navy { display: inline-block; margin-top: 4px; color: var(--c-brand-navy); font-size: 50px; }
/* 欧文(FX)はベースライン上に乗り、和文はその下まで字面があるため、拡大したFXだけ浮いて見える。
   行の高さを変えずに字面の中心を和文に揃えるため、position:relativeで下げる（2026-09-18） */
.v7-hero-title .navy em { font-style: normal; font-size: 1.28em; font-weight: 700; position: relative; top: 0.06em; }

.v7-hero-body {
  margin: 20px 0 0;
  font-size: 15.5px;
  line-height: 2;
  font-weight: 500;
  color: var(--c-body-text);
}
.v7-hero-underline {
  color: var(--c-ink-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-marker);
  text-decoration-thickness: 3px;
  text-underline-offset: 2px;
}

.v7-hero-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
/* 全周の枠はボタンに見えるため、左右に［ ］型の括弧だけを置き、上下の辺は閉じない（2026-09-29 aun②） */
.v7-hero-info-item {
  --bracket: var(--c-pale-blue-border);
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink-navy);
}
.v7-hero-info-item::before,
.v7-hero-info-item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  border: 2px solid var(--bracket);
}
.v7-hero-info-item::before { left: 0; border-right: none; }
.v7-hero-info-item::after { right: 0; border-left: none; }
/* 3つのバッジは常に横一列。幅が足りない時はバッジを折り返さず、バッジ内の区切り（<wbr>）で改行する（2026-09-29） */
.v7-hero-info { flex-wrap: nowrap; }
.v7-hero-info-item { flex: 0 1 auto; min-width: 0; }
.v7-hero-info-item svg { flex-shrink: 0; }
.v7-hero-info-text { word-break: keep-all; overflow-wrap: anywhere; text-align: center; line-height: 1.4; }
@media screen and (max-width: 360px) {
  .v7-hero-info { gap: 6px; }
  .v7-hero-info-item { padding: 10px 10px; font-size: 12px; }
}
.v7-hero-info-item.free {
  --bracket: #FFE0A0;
  font-weight: 900;
  color: #8A6200;
}

.v7-hero-illustration { width: 100%; }
.v7-hero-illustration img { width: 100%; height: auto; display: block; }

@media screen and (max-width: 900px) {
  .v7-hero-illustration { max-width: 420px; margin: 0 auto; }
}
@media screen and (max-width: 600px) {
  .v7-hero-badge { font-size: min(15.6px, 4.3vw); padding: 0 2px 14px; } /* 320px幅でも2行に収まるよう、狭い画面だけ文字を縮める */
  /* 2行とも改行させない。文字サイズは画面幅に比例させ、375pxでも1行に収まる大きさに抑える */
  .v7-hero-title { font-size: min(24px, 6.1vw); white-space: nowrap; }
  .v7-hero-title-mk { font-size: min(28px, 7.1vw); }
  .v7-hero-title .navy { font-size: min(34px, 8.6vw); }
}
/* FVのリード文：SPだけ「〜しまう／「負ける行動」と、／〜ための／「エグジット戦略」を特別公開。」の4行・中央揃え（2026-09-29） */
.v7-sp-br { display: none; }
@media screen and (max-width: 600px) {
  .v7-sp-br { display: inline; }
  .v7-hero-title { text-align: center; } /* 375pxより広いSPで左に寄って見えるため、リード文と同じく中央揃え */
}

/* ========================
   FV直下 SCHEDULE バー（1回目の日程選択）
   ---------------------------------------------------------------------
   既存の .input-date / .button-date（_shared/seminar.php 生成）は
   DOM構造・data属性とも一切変更していない。周囲の背景・見出しのみ追加。
   ======================== */
.v7-date-bar { background: var(--c-pale-blue); padding: 54px var(--v7-content-pad) 58px; margin-top: 40px; }
.v7-date-bar-in { max-width: var(--v7-content-width); margin: 0 auto; }
/* 汎用の見出しペア（英字アイキャッチ＋和文見出し）。SCHEDULE・BONUS等で共用 */
.v7-eyebrow {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-brand-navy);
  text-align: center;
  margin: 0;
}
.v7-section-heading {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-ink-navy);
  text-align: center;
}

/* ========================
   3大特典（BONUS） Figma node 92:8116 準拠
   ---------------------------------------------------------------------
   Figma実データは書影の写実イメージではなく、線画アイコン（本+プラス／
   本+チェック／ローソク足）を色付きボックスに乗せる構成。旧デザインの
   バナー画像から書影を切り出していたのは誤りだったため、Figmaのアイコン
   アセット（bonus-icon-1〜3）に差し替えた。
   ======================== */
.v7-bonus { padding: 64px var(--v7-content-pad) 72px; background: #ffffff; }
.v7-bonus-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-bonus-lead {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-label-text);
  text-align: center;
}
.v7-bonus-list {
  display: flex;
  gap: 26px;
  margin-top: 44px;
  align-items: stretch;
}
.v7-bonus-card {
  position: relative;
  flex: 1 0 0;
  border: 1px solid var(--v7-card-line);
  border-radius: 4px;
  padding: 40px 26px 30px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.v7-bonus-num {
  position: absolute;
  top: -28px;
  left: 24px;
  background: var(--c-brand-navy);
  color: var(--c-accent-yellow);
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  /* 楕円だとボタンに見えるため、幅＝高さの正円に固定（「学べること」の番号と同じ考え方。2026-09-29） */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
}
.v7-bonus-icon-box {
  width: 100%;
  height: 172px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v7-bonus-icon-box.bg-blue { background: var(--c-pale-blue); }
.v7-bonus-icon-box.bg-cream { background: var(--c-cream); }
.v7-bonus-icon-box img { width: 150px; height: 140px; object-fit: contain; }
.v7-bonus-body { text-align: left; }
.v7-bonus-label { font-size: 13px; font-weight: 700; color: #2F5FA6; }
.v7-bonus-title {
  margin-top: 6px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-ink-navy);
}
.v7-bonus-desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 500;
  color: #40587E;
  text-align: left;
}
@media screen and (max-width: 800px) {
  .v7-bonus-list { flex-direction: column; }
}

/* 汎用ユーティリティ（複数セクションで使い回す） */
.navy { color: var(--c-brand-navy); }
.dark { color: var(--c-ink-navy); font-weight: 900; }
.v7-eyebrow.gold { color: #B08A2E; }
.v7-heading-bar { margin: 16px auto 0; width: 56px; height: 5px; border-radius: 999px; background: var(--c-accent-yellow); }

/* ========================
   MESSAGE（講師ストーリー） Figma node 92:8163 準拠
   ---------------------------------------------------------------------
   旧実装は紺背景の単一パネルに全文を流し込んでいたが、Figma実データは
   クリーム背景＋複数カード（イントロ／引用ボックス／インサイトボックス／
   クロージングカード）で構成される。全面的に作り直した。
   ======================== */
.v7-message { background: var(--c-cream); padding: 66px var(--v7-content-pad) 76px; }
.v7-message-in { max-width: var(--v7-content-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 33px; }
.v7-message-head { width: 100%; text-align: center; }

/* width:100%＋padding＋borderで親より広がり、右にはみ出していたため border-box に（2026-09-18） */
.v7-message-intro, .v7-message-quote, .v7-message-key, .v7-message-closing { box-sizing: border-box; }
/* 写真＋自己紹介の段と、その続きの本文の段を同じカードに入れる（カード外に続くと別パートに見えるため。2026-09-29 aun⑤） */
.v7-message-intro {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--v7-card-line-cream);
  border-radius: 4px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* PCはテキスト左・写真右。下に続く本文とテキストの書き出し位置を左端でそろえる（2026-09-29 安齋さん指示） */
.v7-message-intro-row { display: flex; flex-direction: row-reverse; gap: 40px; align-items: center; }
.v7-message-intro .v7-message-body { max-width: none; }
/* figure要素のため、ブラウザ標準の margin（左右40px）を消す。SPで写真が右にずれてはみ出していた原因 */
.v7-message-photo { flex-shrink: 0; width: 280px; align-self: stretch; margin: 0; }
.v7-message-photo picture, .v7-message-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; }
.v7-message-intro-text { flex: 1 0 0; display: flex; flex-direction: column; gap: 17px; }
.v7-message-greeting { font-size: 24px; font-weight: 900; color: var(--c-body-text); margin: 0; }

.v7-message-p { font-size: 17px; line-height: 2.15; font-weight: 500; color: var(--c-body-text); margin: 0; }
.v7-message-p strong { font-weight: 700; color: var(--c-ink-navy); }
.v7-message-p strong.dark { font-weight: 900; }

.v7-message-body { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 23px; }

.v7-message-transition { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 25px; padding-top: 19px; }
.v7-message-transition picture, .v7-message-transition img { display: block; width: 100%; max-width: 480px; height: auto; }
.v7-message-sub { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.55; color: var(--c-ink-navy); text-align: center; }

.v7-message-quote {
  position: relative;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--c-accent-yellow-shadow);
  border-radius: 4px;
  padding: 33px 34px 30px;
}
.v7-message-quote-icon { position: absolute; top: -16px; left: 28px; }
.v7-message-quote-text { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.6; color: var(--c-ink-navy); }
.v7-message-quote-em { margin: 8px 0 0; font-size: 24px; font-weight: 900; line-height: 1.6; color: var(--c-ink-navy); }

.v7-message-key {
  width: 100%;
  background: var(--c-brand-navy);
  border-radius: 4px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.v7-message-key svg { flex-shrink: 0; }
.v7-message-key-label { margin: 0; font-size: 15px; font-weight: 700; color: #9FC1EC; }
.v7-message-key-value { margin: 4px 0 0; font-size: 24px; font-weight: 900; color: #ffffff; }

.v7-message-closing {
  width: 100%;
  max-width: 760px;
  padding-top: 16px; /* ボックスは削除し、上の本文と同じ左端から流す（2026-09-29 安齋さん指示） */
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.v7-message-closing-title { margin: 0; font-size: 24px; font-weight: 900; color: var(--c-ink-navy); text-align: left; }

@media screen and (max-width: 700px) {
  /* 白地ボックスの左右パディングはSPでは16pxに統一（安齋さん指定） */
  .v7-message-intro { gap: 20px; padding: 28px 16px; }
  .v7-message-intro-row { flex-direction: column; gap: 20px; }
  .v7-message-quote { padding: 30px 16px 26px; }
  .v7-message-key { padding: 20px 16px; }
  .v7-message-photo { width: 100%; height: 200px; }
  /* 「チャートを見るのをやめた」瞬間 が1行に収まるサイズ（「瞬間」だけが1行に残るのを防ぐ） */
  .v7-message-sub { font-size: min(20px, 5.3vw); }
  .v7-message-closing-title { font-size: min(20px, 5.3vw); }
  .v7-message-quote-text { font-size: 17px; }
  .v7-message-quote-em { font-size: 19px; }
}

/* ========================
   CONTENTS（あなたが学べること） Figma node 92:8222 準拠
   ======================== */
.v7-contents { background: #ffffff; padding: 64px var(--v7-content-pad); }
.v7-contents-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-contents-list { display: flex; flex-direction: column; gap: 24px; margin-top: 46px; }
.v7-contents-card {
  border-radius: 4px;
  padding: 34px 40px;
  display: flex;
  gap: 34px;
  align-items: center;
}
.v7-contents-card.bg-blue { background: var(--c-pale-blue); }
.v7-contents-card.bg-cream { background: var(--c-cream); }
.v7-contents-icon { flex-shrink: 0; width: 230px; display: flex; align-items: center; justify-content: center; }
.v7-contents-icon img { width: 100%; height: auto; display: block; }
.v7-contents-body { flex: 1 0 0; }
.v7-contents-tag { display: flex; align-items: center; gap: 10px; }
.v7-contents-num {
  background: var(--c-brand-navy);
  color: var(--c-accent-yellow);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  /* 楕円だとボタンに見えるため、幅＝高さの正円に固定（2026-09-29） */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.v7-contents-eyebrow { font-size: 14px; font-weight: 700; color: #2F5FA6; }
.v7-contents-eyebrow.gold { color: #B08A2E; }
.v7-contents-title { margin: 11px 0 0; font-size: 24px; font-weight: 900; line-height: 1.5; color: var(--c-ink-navy); text-align: left; }
.v7-contents-desc { margin: 6px 0 0; font-size: 15px; line-height: 1.85; font-weight: 500; color: var(--c-body-text); }
.v7-contents-desc strong { color: var(--c-ink-navy); font-weight: 700; }

@media screen and (max-width: 800px) {
  .v7-contents-card { flex-direction: column; padding: 28px 24px; }
  .v7-contents-icon { width: 160px; }
}

/* ========================
   中間CTAバナー（紺・大型） Figma node 102:9871 準拠
   ======================== */
.v7-cta-banner {
  background: var(--c-brand-navy);
  background-image: url('../img/cta-bg-lines.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 54px var(--v7-content-pad) 52px;
}
.v7-cta-banner-in { max-width: var(--v7-content-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.v7-cta-banner-eyebrow { margin: 0; font-size: 15px; font-weight: 700; color: #ffffff; }
.v7-cta-banner-eyebrow { word-break: keep-all; overflow-wrap: anywhere; font-size: min(15px, 3.9vw); } /* 改行は「学び、」の後（<wbr>）だけ。狭い画面では1行目が収まるよう文字を縮める */
.v7-cta-banner-heading { margin: 0; font-size: 26px; font-weight: 900; color: #ffffff; }
.v7-cta-banner-heading span { display: inline-block; } /* 改行は「無料。」の後だけ（各文は途中で折り返さない） */
.v7-cta-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--c-accent-yellow);
  color: var(--c-ink-navy);
  font-weight: 900;
  font-size: 20px;
  padding: 22px 56px;
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--c-accent-yellow-shadow);
  text-decoration: none;
}
.v7-cta-banner-btn:hover { color: var(--c-ink-navy); background: #FFDA75; }
.v7-cta-banner-note { margin: 0; font-size: 13px; font-weight: 500; color: #9FC1EC; }

@media screen and (max-width: 600px) {
  .v7-cta-banner-heading { font-size: 20px; }
  .v7-cta-banner-btn { font-size: 16px; padding: 18px 32px; }
}

/* ========================
   実績（RESULTS）カード（Figma node 92:8283 準拠・2026-09-18改訂）
   ---------------------------------------------------------------------
   氏名・FX歴・トレード期間・金額はテキストとしてコーディング。画像は
   安齋さんが人物ごとに用意する「きれいな画像」を個別ファイルで差し込む
   前提のプレースホルダー枠（旧・複合画像からの自動クロップは廃止）。
   Figma実データ通り、テキスト列（左・372px固定）＋写真列（右・可変）の
   横並び。写真枚数は人によって1〜4枚、4枚のときだけ2×2グリッド。
   ======================== */
.v7-results { padding: 48px var(--v7-content-pad) 56px; background: #ffffff; }
.v7-results-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-results-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}
.v7-result-card {
  background: #ffffff;
  border: 1px solid var(--v7-card-line);
  border-radius: 4px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start; /* テキスト列は固定・写真は常に同じ位置から左揃え。枚数が少ない人は右側が余白になる（スクロール時に文字位置がぶれないように。2026-09-18 安齋さん指示） */
  gap: 16px;
  overflow: hidden;
}
.v7-result-text {
  flex: 0 0 auto;
  width: 340px;
  padding: 28px 26px 28px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.v7-result-name {
  font-size: 21px;
  font-weight: 900;
  color: var(--c-ink-navy);
  margin: 0;
}
.v7-result-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.v7-result-tag { display: flex; align-items: center; gap: 12px; }
.v7-result-tag-label {
  flex-shrink: 0;
  background: linear-gradient(transparent 62%, var(--c-pale-blue) 62%);
  color: var(--c-brand-navy);
  font-family: var(--font-en);
  font-size: 13.2px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0 2px;
}
.v7-result-tag-value { font-size: 18px; font-weight: 700; color: #2F5FA6; }
.v7-result-amount { margin-top: 8px; }
.v7-result-days { font-size: 22px; font-weight: 900; color: var(--c-ink-navy); }
.v7-result-yen {
  display: inline-block;
  margin-top: 2px;
  font-size: 44px;
  font-weight: 900;
  color: var(--c-ink-navy);
  letter-spacing: 0.01em;
  background: linear-gradient(transparent 62%, var(--c-marker) 62%);
}
.v7-result-yen .unit { font-size: 22px; font-weight: 700; margin-left: 2px; }

/* 画像の幅は index.php 側で「共通の高さ×比率」を style="width" に出力している。
   1段（.v7-result-photo-row）に並べ、4枚の人は2段にする */
.v7-result-photos {
  flex: 0 1 auto; /* 幅はPHPがstyleで指定。狭い画面ではそこから縮む */
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  min-width: 0;
}
.v7-result-photo-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.v7-result-photo {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 200 / 334;
  border-radius: 2px;
  overflow: hidden;
  background: var(--c-pale-blue);
  border: 2px dashed #A9C3E6;
}
.v7-result-photos.grid-2x2 .v7-result-photo.is-empty { aspect-ratio: 200 / 250; }
.v7-result-photo picture, .v7-result-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* 画像が入った枠：トレードログは切り抜かず全体を見せたいので、枠の比率を解除して画像の縦横比のまま表示 */
.v7-result-photo:not(.is-empty) {
  aspect-ratio: auto;
  max-height: none;
  border: 1px solid #DCE6F3;
  background: #ffffff;
}
.v7-result-photo:not(.is-empty) picture,
.v7-result-photo:not(.is-empty) img { height: auto; }
/* 画像ファイルがまだ無い枠（onerrorでis-emptyが付く）はダッシュ枠のまま表示 */
.v7-result-photo img { background: transparent; }
.v7-result-photo.is-empty picture,
.v7-result-photo.is-empty img { display: none; }
.v7-result-photo.is-empty::after {
  content: "画像\5F85\6A5F";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #2F5FA6;
  text-align: center;
  writing-mode: horizontal-tb;
}

@media screen and (max-width: 800px) {
  .v7-result-card { flex-direction: column; }
  .v7-result-text { width: 100%; padding: 24px 22px 4px; }
  /* SPは縦積みで左寄せだと金額まわりの収まりが悪いため、「〇〇日間で」と金額だけ中央揃え（2026-09-19 安齋さん指示） */
  .v7-result-amount { text-align: center; }
  .v7-result-tags { gap: 0; }
  .v7-result-yen { line-height: 3rem; } /* 行の高さを詰め、トレード期間〜金額の縦の空きを減らす（2026-09-29） */
  .v7-result-photos { padding: 16px 22px 24px; align-self: center; }
}

/* 実績リストの末尾に入るMEDIA掲載カード（Figma node 92:8303） */
.v7-media-card {
  background: #ffffff;
  border-radius: 4px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.v7-media-card picture, .v7-media-card img { flex: 1 0 0; min-width: 0; border-radius: 2px; display: block; width: 100%; height: auto; }
.v7-media-body { flex: 1 0 0; min-width: 0; }
.v7-media-badge {
  display: inline-block;
  background: linear-gradient(transparent 62%, var(--c-marker) 62%);
  color: var(--c-brand-navy);
  font-size: 12px;
  font-weight: 900;
  padding: 0 2px;
}
.v7-media-title { margin: 11px 0 0; font-size: 22px; font-weight: 900; line-height: 1.6; color: var(--c-ink-navy); }
.v7-media-note { margin: 8px 0 0; font-size: 13px; color: var(--c-label-text); }
@media screen and (max-width: 700px) {
  .v7-media-card { flex-direction: column; }
  .v7-media-title { font-size: 19px; }
}

/* ========================
   HIGHLY RATED（参加者の声） Figma node 92:8313 準拠
   ======================== */
.v7-rated { background: #ffffff; padding: 62px var(--v7-content-pad) 66px; }
.v7-rated-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-rated-stars { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.v7-rated-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.v7-rated-card {
  background: #ffffff;
  border: 1px solid var(--v7-card-line);
  border-radius: 4px;
  padding: 24px;
}
.v7-rated-who { display: flex; align-items: center; gap: 12px; }
.v7-rated-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--c-pale-blue);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  display: inline-block;
}
.v7-rated-avatar::before { content: ""; display: block; width: 100%; height: 100%; }
.v7-rated-avatar.av1 { background-image: url('../img/rated-avatar-1.svg'); background-size: cover; }
.v7-rated-avatar.av2 { background-image: url('../img/rated-avatar-2.svg'); background-size: cover; }
.v7-rated-avatar.av3 { background-image: url('../img/rated-avatar-3.svg'); background-size: cover; }
.v7-rated-avatar.av4 { background-image: url('../img/rated-avatar-4.svg'); background-size: cover; }
.v7-rated-avatar.av5 { background-image: url('../img/rated-avatar-5.svg'); background-size: cover; }
.v7-rated-avatar.av6 { background-image: url('../img/rated-avatar-6.svg'); background-size: cover; }
.v7-rated-name { margin: 0; font-size: 15px; font-weight: 900; color: var(--c-ink-navy); }
.v7-rated-attr { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--c-label-text); }
.v7-rated-quote { margin: 14px 0 0; font-size: 15px; line-height: 1.95; font-weight: 500; color: var(--c-body-text); }
.v7-rated-quote strong { color: var(--c-ink-navy); font-weight: 700; }
.v7-rated-note { margin: 20px 0 0; font-size: 12.5px; color: var(--c-label-text); }

@media screen and (max-width: 900px) {
  .v7-rated-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
  .v7-rated-grid { grid-template-columns: 1fr; }
}

/* ========================
   PROFILE（講師紹介） Figma node 92:8416 準拠
   ======================== */
.v7-profile { background: #ffffff; padding: 64px var(--v7-content-pad) 70px; }
.v7-profile-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-profile-card {
  margin-top: 40px;
  background: #ffffff; /* 水色だとタグのオレンジ系とぶつかるため、白地＋オレンジ枠に（2026-09-29） */
  border: 1px solid var(--c-accent-yellow-shadow);
  border-radius: 4px;
  padding: 40px;
  display: flex;
  gap: 44px;
  align-items: center;
}
.v7-profile-photo-col { flex-shrink: 0; width: 300px; text-align: center; }
.v7-profile-photo-col picture, .v7-profile-photo-col img { width: 300px; height: 300px; object-fit: cover; border-radius: 2px; display: block; }
.v7-profile-kana { margin: 20px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #B08A2E; }
.v7-profile-name { margin: 4px 0 0; font-size: 28px; font-weight: 900; letter-spacing: 0.06em; color: var(--c-ink-navy); }
.v7-profile-body { flex: 1 0 0; }
/* 枠付きピルはボタンに見えるため、ヘッダータグと同じ下半分マーカー（クリーム）に（2026-09-29 aun⑥） */
.v7-profile-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; }
.v7-profile-tags span {
  background: linear-gradient(transparent 62%, #FFF3D6 62%); /* 白地のカードで見えるよう、ヘッダー「参加費 無料」と同じ濃いクリーム */
  padding: 0 2px;
  font-size: 16.2px;
  font-weight: 900;
  color: #8A6200;
}
.v7-profile-body .v7-message-p + .v7-message-p { margin-top: 16px; }

@media screen and (max-width: 700px) {
  .v7-profile-card { flex-direction: column; }
  .v7-profile-photo-col { width: 100%; }
  .v7-profile-photo-col picture, .v7-profile-photo-col img { width: 100%; max-width: 260px; height: auto; aspect-ratio: 1/1; margin: 0 auto; }
}

/* ========================
   VOICE（実践者の声） Figma node 92:8457 準拠
   ---------------------------------------------------------------------
   Figmaは紺色プレースホルダー＋再生アイコンだが、実際は既存のYouTube
   埋め込みが機能として存在するため、動画は維持しカード周りをFigma準拠に。
   ======================== */
.v7-voice { background: #ffffff; padding: 62px var(--v7-content-pad) 60px; }
.v7-voice-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-voice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.v7-voice-card .movie { border-radius: 4px; overflow: hidden; }
.v7-voice-name { margin: 8px 0 0; font-size: 18px; font-weight: 900; color: var(--c-ink-navy); }
.v7-voice-note { margin: 2px 0 0; font-size: 12.5px; color: var(--c-label-text); }

/* ========================
   FOR YOU（向き・不向き） Figma node 92:8489 準拠
   ======================== */
.v7-foryou { background: var(--c-pale-blue); padding: 62px var(--v7-content-pad) 70px; }
.v7-foryou-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-foryou-lead { margin: 12px 0 0; font-size: 16.5px; line-height: 2; font-weight: 500; color: var(--c-body-text); text-align: center; }
.v7-foryou-lead strong { color: var(--c-ink-navy); font-weight: 900; }
.v7-foryou-list { display: flex; gap: 24px; margin-top: 30px; }
.v7-foryou-card { flex: 1 0 0; background: #ffffff; border-radius: 4px; padding: 32px 28px; }
.v7-foryou-icon { display: flex; justify-content: center; align-items: center; height: 100px; }
.v7-foryou-icon img { max-width: 118px; max-height: 100px; width: auto; height: auto; }
/* アイコン1はPNG（236×200＝2・3のSVG 118×100の2倍・円込みで書き出し済み）。
   上の .v7-foryou-icon img の max-width/max-height で118×100に収まる */
.v7-foryou-icon picture { display: block; }
.v7-foryou-title { margin: 16px 0 0; font-size: 19px; font-weight: 900; line-height: 1.6; color: var(--c-ink-navy); text-align: left; }
.v7-foryou-desc { margin: 8px 0 0; font-size: 15px; line-height: 1.95; font-weight: 500; color: #40587E; }

.v7-foryou-unfit { margin-top: 26px; background: var(--c-cream); border-radius: 4px; padding: 34px 38px; }
/* ピルはボタンに見えるため、角ばった吹き出しにして下の見出しを指す縦並びに（2026-09-29 aun⑧） */
.v7-foryou-unfit-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.v7-foryou-unfit-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-accent-yellow-shadow);
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  padding: 12px 24px;
  white-space: nowrap;
}
.v7-foryou-unfit-badge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 28px;
  border-top: 12px solid var(--c-accent-yellow-shadow);
  border-right: 12px solid transparent;
}
.v7-foryou-unfit-title { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.65; color: var(--c-ink-navy); text-align: left; }
.v7-foryou-unfit-body { margin-top: 17px; display: flex; flex-direction: column; gap: 10px; }
.v7-foryou-unfit-body p { margin: 0; font-size: 15.5px; line-height: 2; font-weight: 500; color: #40587E; }
.v7-foryou-unfit-body strong { color: var(--c-ink-navy); font-weight: 700; }
.v7-foryou-unfit-closing { margin-top: 6px !important; font-size: 21px !important; font-weight: 900; line-height: 1.7 !important; color: var(--c-ink-navy); }
.v7-foryou-unfit-closing .navy { color: var(--c-brand-navy); }

@media screen and (max-width: 800px) {
  .v7-foryou-list { flex-direction: column; }
  .v7-foryou-unfit { padding: 26px 22px; }
  .v7-foryou-unfit-title { font-size: 19px; }
}

/* ========================
   2回目SCHEDULEバー（紺・#cv） Figma node 102:9920 準拠
   ---------------------------------------------------------------------
   FV下のSCHEDULEバー（.v7-date-bar 単体）はpale-blue背景だが、こちらは
   紺背景バージョン。.navy 修飾子で文字色だけ反転させる。
   ======================== */
.v7-date-bar.navy { background: var(--c-brand-navy); }
.v7-date-bar.navy .v7-eyebrow { color: #ffffff; }
.v7-date-bar.navy .v7-section-heading { color: #ffffff; }
.v7-date-bar.navy .date-notes p { color: #CFE0F7; }
.v7-date-bar.navy .button-date { background: #ffffff; }

/* ========================
   参加予約フォーム（RESERVATION） Figma node 92:8544 準拠
   ---------------------------------------------------------------------
   機能・DOM（name属性・hidden・select）は一切変更していない。
   参加回は指示によりFigmaのラジオカードではなく既存プルダウンを維持。
   ======================== */
.v7-form { background: var(--c-pale-blue); padding: 64px var(--v7-content-pad) 66px; }
.v7-form-in { max-width: var(--v7-content-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.v7-form-card {
  margin-top: 34px;
  width: 100%;
  max-width: 760px;
  background: #ffffff;
  border-radius: 4px;
  padding: 40px 44px 44px;
  box-sizing: border-box;
}
.v7-form-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } /* 縦1列（前のデザインと同じ並び。2026-09-29 aun⑦） */
.v7-form-field { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.v7-form-grid .v7-form-field { margin-top: 0; }
.v7-form-field:first-child, .v7-form-grid { margin-top: 0; }
.v7-form-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 900; color: var(--c-ink-navy); }
.v7-form-req {
  background: var(--c-accent-yellow);
  color: var(--c-ink-navy);
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 5px;
}
.v7-form-field input,
.v7-form-field select {
  height: 54px;
  border: 2px solid #CFDCEE;
  border-radius: 4px;
  padding: 0 18px;
  font-size: 15px;
  font-family: var(--font-jp);
  color: var(--c-ink-navy);
  box-sizing: border-box;
  width: 100%;
}
.v7-form-field-full { margin-top: 22px; }
.v7-form-submit { margin-top: 8px; }

@media screen and (max-width: 700px) {
  .v7-form-grid { grid-template-columns: 1fr; }
  .v7-form-card { padding: 32px 22px 34px; }
}

@media screen and (max-width: 800px) {
  .v7-voice-grid { grid-template-columns: 1fr; }
}

/* FAQ（Figma node 92:8600）は白背景。既存の.qaboxスタイルはそのまま流用 */
.v7-faq-bg { background: #ffffff; }

/* ========================
   VIDEO Figma node 92:8390 準拠
   ---------------------------------------------------------------------
   Figmaは動画埋め込みのプレースホルダーだが、実際は既存のYouTube
   埋め込みが機能として存在するため動画はそのまま、周囲をFigma準拠に。
   ======================== */
.v7-video { background: var(--c-pale-blue); padding: 62px var(--v7-content-pad) 60px; }
.v7-video-in { max-width: var(--v7-content-width); margin: 0 auto; }
.v7-video-row { display: flex; gap: 36px; align-items: center; margin-top: 34px; }
.v7-video-movie { flex-shrink: 0; width: 600px; border-radius: 4px; overflow: hidden; }
.v7-video-text { flex: 1 0 0; display: flex; flex-direction: column; gap: 20px; }
.v7-video-quote {
  background: #ffffff;
  border-left: 6px solid var(--c-accent-yellow);
  border-radius: 2px;
  padding: 20px 24px;
}
.v7-video-quote p { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.8; color: var(--c-ink-navy); }

@media screen and (max-width: 900px) {
  .v7-video-row { flex-direction: column; }
  .v7-video-movie { width: 100%; aspect-ratio: 16/9; }
  .v7-video-movie iframe { width: 100%; height: 100%; }
}

/* 動画セクション直後の簡易CTA（見出し無し・ボタンのみ） */
.v7-cta-banner.slim { padding: 40px var(--v7-content-pad); }

/* ========================
   SPの余白詰め（2026-09-29 指摘「スマホ版は余白が無駄に多いので詰めて」）
   各セクションの上下padding・見出し下の間隔をSPだけ縮める
   ======================== */
@media screen and (max-width: 700px) {
  .v7-hero { padding-top: 32px; }
  .v7-hero-in { gap: 20px; }
  .v7-hero-grid { gap: 20px; }
  .v7-date-bar { margin-top: 24px; padding-top: 36px; padding-bottom: 36px; }
  .v7-bonus, .v7-message, .v7-contents, .v7-results, .v7-rated,
  .v7-profile, .v7-voice, .v7-foryou, .v7-form, .v7-video { padding-top: 40px; padding-bottom: 40px; }
  .v7-cta-banner { padding-top: 36px; padding-bottom: 36px; }
  .v7-cta-banner.slim { padding-top: 28px; padding-bottom: 28px; }
  .wrap { padding-top: 40px; padding-bottom: 40px; }
  .v7-bonus-list { margin-top: 36px; gap: 36px; } /* 番号バッジがカード上辺からはみ出す分は確保 */
  .v7-contents-list { margin-top: 24px; gap: 16px; }
  .v7-results-list { margin-top: 20px; gap: 16px; }
  .v7-rated-grid { margin-top: 20px; gap: 12px; }
  .v7-foryou-list { margin-top: 20px; gap: 12px; }
  .v7-voice-grid { margin-top: 20px; gap: 20px; }
  .v7-video-row { margin-top: 20px; gap: 20px; }
  .v7-message-in { gap: 24px; }
  .v7-profile-card { margin-top: 24px; padding: 24px 16px; gap: 20px; }
  .v7-form-card { margin-top: 24px; }
  .v7-bonus-card { padding: 36px 20px 24px; }
  .v7-bonus-icon-box { height: 140px; }
  .v7-foryou-card { padding: 24px 20px; }
  .v7-rated-card { padding: 20px; }
}

/* ========================
   セクション見出しのバリエーション（2026-09-29 安齋さん指示・H1〜H13一覧に対応）
   全セクション同じ「英字＋見出し＋黄バー」の型だとテンプレ感が出るため、セクションごとに変える
   ======================== */
.v7-section-heading.is-lg { font-size: 28px; }                                 /* H2 H3 H5 H6 H7 H8 */
.v7-bonus .v7-section-heading .mk {                                             /* H2「3大特典」だけマーカー */
  padding: 0 2px;
  background: linear-gradient(transparent 62%, var(--c-accent-yellow) 62%);
}

/* H3 MESSAGE：2行をまるごと囲むカギ括弧（左上＋右下） */
.v7-section-heading.is-bracket { position: relative; display: inline-block; padding: 0.6em 1.4em; }
.v7-section-heading.is-bracket::before,
.v7-section-heading.is-bracket::after { content: ""; position: absolute; width: 32px; height: 32px; }
.v7-section-heading.is-bracket::before { top: 0; left: 0; border-top: 2px solid var(--c-brand-navy); border-left: 2px solid var(--c-brand-navy); }
.v7-section-heading.is-bracket::after { right: 0; bottom: 0; border-right: 2px solid var(--c-brand-navy); border-bottom: 2px solid var(--c-brand-navy); }

/* H4 RESULTS：見出し2行を左右から月桂冠で挟む（素材：月桂冠アイコン.svg を左右に分割・濃い茶色） */
.v7-heading-laurel { display: flex; justify-content: center; align-items: center; gap: 14px; }
.v7-heading-laurel img { flex-shrink: 0; width: auto; height: 80px; display: block; } /* 見出し2行（28px×1.5×2＝84px）に収まる高さ */
.v7-heading-laurel .v7-section-heading { margin: 0; font-size: 28px; }

/* H8 PROFILE：英字＋見出しの2行をまとめて左線でくくり、下の講師カードの左端にそろえる。
   線の高さを文字の上端〜下端に合わせるため行の高さを1にし、英字は上端を大文字の高さで削る。
   漢字は行の高さ1でほぼ字面いっぱいなので削らない（削ると字が線からはみ出す。2026-09-29） */
.v7-profile .v7-message-head { text-align: left; }
.v7-heading-leftline { display: inline-block; padding-left: 16px; border-left: 4px solid var(--c-brand-navy); text-align: left; }
.v7-heading-leftline .v7-eyebrow,
.v7-heading-leftline .v7-section-heading { text-align: left; line-height: 1; }
.v7-heading-leftline .v7-eyebrow { text-box: trim-start cap alphabetic; }
.v7-heading-leftline .v7-section-heading { margin-top: 10px; }

/* H9 VOICE：右に突起のある吹き出し（角丸なし） */
.v7-section-heading.is-bubble { position: relative; display: inline-block; padding: 8px 28px; background: var(--c-brand-navy); color: #ffffff; }
/* 突起は右辺の中央より少し下から、右下へ流れる向きに（真横・縦中央だと硬く見えるため。2026-09-29） */
.v7-section-heading.is-bubble::after {
  content: "";
  position: absolute;
  left: calc(100% - 1px);
  top: 55%;
  width: 11px;
  height: 13px;
  background: var(--c-brand-navy);
  clip-path: polygon(0 0, 100% 100%, 0 65%);
}

/* H10 FOR YOU：線の枠＋右下にずらした白地。
   文字は枠の中で上下左右とも中央に置く（枠を動かすと文字が枠の中央からずれて見えるため、ずらすのは白地側。2026-09-29） */
.v7-section-heading.is-frame { position: relative; z-index: 0; display: inline-block; padding: calc(0.6em + 3px) calc(1.6em + 3px); }
.v7-section-heading.is-frame::before,
.v7-section-heading.is-frame::after { content: ""; position: absolute; z-index: -1; }
.v7-section-heading.is-frame::before { top: 5px; left: 5px; right: -5px; bottom: -5px; background: #ffffff; } /* 右下に5pxずらした白地 */
.v7-section-heading.is-frame::after { inset: 0; border: 3px solid var(--c-brand-navy); }                  /* 枠は白地より手前 */
.v7-section-heading.is-frame + .v7-foryou-lead { margin-top: 22px; }

@media screen and (max-width: 700px) {
  .v7-section-heading.is-lg { font-size: 23px; }
  .v7-section-heading.is-bracket { padding: 0.5em 1em; }
  .v7-section-heading.is-bracket::before,
  .v7-section-heading.is-bracket::after { width: 24px; height: 24px; }
  .v7-heading-laurel { gap: 6px; }
  .v7-heading-laurel img { height: 60px; }
  .v7-heading-laurel .v7-section-heading { font-size: 21px; } /* 375pxで1行目が折り返さない最大サイズ。月桂冠は2行（63px）に収まる高さ */
  .v7-section-heading.is-frame { padding: calc(0.5em + 3px) calc(1em + 3px); font-size: 20px; }
}

/* フォーム送信ボタン（SP）：枠に対する左右の余白を詰めて幅を確保し、矢印を小さくして文字との間隔を保つ（2026-09-29） */
@media screen and (max-width: 700px) {
  .v7-form-submit .button-cta { max-width: 100%; }
  .v7-form-submit .button-inner { padding: 22px 24px 22px 28px; gap: 16px; }
  .v7-form-submit .button-arrow { width: 8px; height: 15px; }
  .v7-form-submit .button-text { font-size: min(18px, 5.2vw); white-space: nowrap; } /* 320px幅でも1行に収める */
}
@media screen and (max-width: 360px) {
  .v7-form-submit .button-inner { padding: 20px 18px 20px 20px; }
}

/* メッセージセクション（SP）：セクションの左右余白は20pxのまま、ボックスだけ画面端から8pxまで広げる。
   ボックス外の本文は20pxの位置に残し、ボックス内の文字と左端がそろうようにする（2026-09-29） */
@media screen and (max-width: 700px) {
  .v7-message-intro, .v7-message-quote, .v7-message-key { width: calc(100% + 24px); max-width: none; margin-left: -12px; margin-right: -12px; }
}

/* ボックスのあるセクション（SP）：セクションの左右余白は20pxのまま、ボックスだけ画面端から8pxまで広げる（2026-09-29）
   動画セクションの引用ボックスは対象外 */
@media screen and (max-width: 700px) {
  .v7-bonus-list, .v7-results-list, .v7-contents-list, .v7-rated-grid,
  .v7-profile-card, .v7-foryou-list, .v7-foryou-unfit, .v7-form-card,
  .v7-date-bar .input-date, .v7-faq-bg .qabox {
    width: calc(100% + 24px);
    max-width: none;
    margin-left: -12px;
    margin-right: -12px;
    box-sizing: border-box;
  }
}

/* SPのセクション間の縦余白を個別に調整（2026-09-29 安齋さんがDevToolsで確認した値） */
@media screen and (max-width: 700px) {
  .v7-contents { padding-top: 20px; padding-bottom: 20px; }
  .v7-profile { padding-top: 40px; padding-bottom: 20px; }
  .v7-voice { padding-top: 20px; padding-bottom: 20px; }
  .v7-faq-bg .wrap { padding-top: 20px; }
}

/* ========================
   aun指摘（2026-09-29 2回目）SP調整
   ①ヘッダーはSPで削除 ②FVイラストはSPで出さない（主張が強い・なくてもいい）
   ③開いた瞬間に日程の「参加する」ボタンが少なくとも1つ見えるよう、FV〜日程の余白を詰める
   ======================== */
@media screen and (max-width: 700px) {
  .v7-header { display: none; }
}
@media screen and (max-width: 600px) {
  .v7-hero { padding-top: 24px; }
  /* SPのイラスト：リード文を左に寄せ、右側に小さく重ねて置く（右端は少し画面外に切る）。
     .v7-hero-text を display:contents にして、見出し／リード文＋イラスト／情報タグの3段グリッドにする */
  .v7-hero-grid {
    /* リード文＋イラストの段だけ幅に上限（360px）を設けて中央に置く。
       大きい画面（Pro Max等）で文字とイラストの間が画面幅に合わせて開くのを防ぐ */
    grid-template-columns: 1fr minmax(0, 360px) 1fr;
    grid-template-areas: "title title title" ". body ." "info info info";
    gap: 0;
    row-gap: 8px;
  }
  .v7-hero-text { display: contents; }
  .v7-hero-title { grid-area: title; }
  .v7-hero-body { grid-area: body; align-self: center; position: relative; z-index: 1; margin-top: 0; text-align: left; font-size: 14px; line-height: 1.75; } /* 上マージンがあると文字がイラストに対して下にずれるため0（縦中央にそろえる） */
  .v7-hero-info { grid-area: info; margin-top: 4px; }
  /* イラストはリード文と同じ段に重ね、右端を少し画面外に出す（文字が上） */
  .v7-hero-illustration {
    grid-area: body;
    justify-self: end;
    align-self: center;
    width: 44%;
    max-width: none;
    margin: 0 -7% 0 0;
    position: relative;
    z-index: 0;
    pointer-events: none;
  }
  .v7-hero { overflow: hidden; }
  .v7-hero-in { gap: 20px; }
  .v7-date-bar { margin-top: 16px; padding-top: 18px; }
  .v7-date-bar > .v7-date-bar-in > .v7-eyebrow { display: none; }
  .v7-date-bar .v7-section-heading { margin-top: 0; font-size: 19px; }
  .v7-hero-info-item { padding-top: 6px; padding-bottom: 6px; }
  .v7-date-bar .input-date { margin-top: 14px; }
  .v7-date-bar .button-date { padding: 16px 20px; }
}
/* 360px未満は文字とイラストがぶつかるため、イラストを小さく・さらに右へ逃がす */
@media screen and (max-width: 359px) {
  .v7-hero-illustration { width: 38%; margin-right: -12%; }
  .v7-hero-body { font-size: 13px; }
}

/* 実績の折りたたみ（4人目以降）。開いたときも一覧と同じ間隔で並べる */
.v7-results-more { display: flex; flex-direction: column; gap: 24px; }
.v7-results-more[hidden] { display: none; }
.v7-results-more-btn {
  align-self: center;
  margin: 0;
  padding: 14px 28px;
  border: 1px solid var(--c-brand-navy);
  border-radius: 999px; /* 押せる要素は丸く（ページ内のルール） */
  background: #ffffff;
  color: var(--c-brand-navy);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.v7-results-more-btn:hover { background: var(--c-pale-blue); }
@media screen and (max-width: 700px) {
  .v7-results-more { gap: 16px; }
  .v7-results-more-btn { width: 100%; font-size: 15px; }
}