/* ===== Tokens ===== */
:root{
  --brand:#B01717;
  --brand-light:#E8A7A7;
  --brand-ink:#ffffff;

  --ink:#333333;
  --muted:#6b7280;
  --surface:#f7f8fa;
  --bd:#e5e7eb;

  --maxw:860px;

  /* Spacing scale */
  --space-lg:60px;  /* 大セクション */
  --space-md:40px;  /* 通常セクション */
  --space-gap:20px; /* 段落間・小セクション */
  --grid-gap:15px;

  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font:400 16px/24px "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ width:min(100% - 32px, var(--maxw)); margin-inline:auto }

/* セクション余白（レール） */
.section{ padding:var(--space-md) 0 }      /* 40px */
.section--lg{ padding:var(--space-lg) 0 }  /* 60px */
.section--sm{ padding:var(--space-gap) 0 } /* 20px */

/* ===== Typography ===== */
h1,.h1{
  margin:0 0 var(--space-gap);
  font-weight:700; font-size:24px; line-height:29px;
}
h2,.h2{
  margin:0 0 calc(var(--space-gap)*.8);
  font-weight:700; font-size:22px; line-height:29px;
}
p{ margin:0 0 var(--space-gap) }
/* ===== 全ての法務以外の h2 を左に20pxインデント ===== */
h2:not(.section--legal h2) {
  padding-left: 20px;
}
/* ===== Buttons ===== */
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:var(--brand); color:var(--brand-ink); border:1px solid var(--brand);
  font-weight:700;
}
.btn:hover{ filter:brightness(.95); text-decoration:none }

/* ===== Utilities ===== */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.mt-40{ margin-top:40px }
.mt-20{ margin-top:20px !important }
.mt-0{ margin-top:0 !important;
padding-top::0 !important }
.no-margin{ margin-bottom:0 }
.muted{ color:var(--muted) }
.text-red {
  color: #FF0000 ;
  font-weight: 700; 
}
.bold { font-weight: 700 !important; }

/* ===== Hero ===== */
.hero-image{ padding:10px 15px 0 }
.hero-image__wrap{ max-width:1260px; margin:0 auto }
.hero-image__img{ width:100%; height:auto; display:block }
@media (min-width:960px){
  .hero-image__img{ aspect-ratio:2520/1018 }
}
@media (max-width:959px){
  .hero-image{ padding:10px 10px 0 }
  .hero-image__img{ aspect-ratio:1700/1018 }
}

/* ヒーロー下の告知帯→CTAは20pxずつ */
.hero-note{
  text-align:center; font-weight:700;
  margin-top:20px; line-height:1.6;
  font-size:clamp(16px, 2.2vw, 24px);
}
.text-red-sm{ color:var(--brand); font-weight:700; font-size:24px }

.hero-cta{ margin-top:20px }
.hero-cta .container{ text-align:center }
.hero-cta .btn-image{ display:inline-block }
.hero-cta .btn-image img{
  display:block; width:478px; max-width:100%; height:auto;
}

/* ===== 見出し装飾 ===== */
.heading-split{ position:relative; padding-bottom:10px }
.heading-split::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(to right, var(--brand) 0 30%, var(--brand-light) 30% 100%);
}

/* ===== 強調・リスト ===== */
.course-list{ list-style:none; padding:0; margin:0; font-size:20px; color:#FF0000; line-height:1.6 }
.course-list li{ margin-bottom:8px }

.marker{ box-shadow:inset 0 -0.45em 0 #FFF176; padding:0 .04em }
.nowrap{ white-space:nowrap }

.note{ font-size:14px; color:#333; margin-top:16px; margin-bottom:0 }
.em-red{ color:#FF0000; font-weight:700; font-size:24px }
.em-blue{ color:#235BC8; font-weight:700; font-size:24px }
.em-green{ color:#008000; font-weight:700; font-size:24px }


/* ===== notice帯（ブランド色コンテンツ幅） ===== */
.notice-band{ margin-top:0; background:transparent }
.notice-band .container{
  background:var(--brand); color:#fff; font-weight:bold; padding:12px 15px;
}
.notice-band__text{ margin:0 }

/* ===== バンド（ブランド色） ===== */
.band{ background:transparent; margin-top:0 }
.band .container{
  background:var(--brand); color:#fff; font-weight:bold; padding:14px 16px;
}
.band__text{ margin:0 0 8px }
.band__lead{ margin:4px 0 8px; font-size:20px }
.em-yellow{ color:#FFBD28; font-size:20px; font-weight:bold; margin:4px 0 8px }

/* ===== CTA画像 ===== */
.section--ctaimg{ padding: var(--space-gap) 0 } /* 20px */
.cta-img{ display:block; width:min(100%,600px); height:auto; margin:0 auto }
.cta-btn{ display:block; width:min(100%,705px); height:auto; margin:0 auto }
.cta-img-link:hover .cta-btn{ opacity:.95 }

/* ===== タグ（ブランド塗り） ===== */
.tag-outline{
  display:inline-block; font-size:22px; font-weight:700;
  color:#fff; background:var(--brand);
  border:none; border-radius:0; padding:16px 14px; margin:0 0 40px;
}

/* ===== フィギュア ===== */
.feature-fig{ margin:0; display:flex; justify-content:center }
.feature-fig img{ width:min(100%,400px); height:auto }

/* ===== Media + Text（PC2列／SP縦積み） ===== */
.media-text{ display:grid; gap:var(--grid-gap) }
@media (min-width:960px){
  .media-text{ grid-template-columns:1fr 1fr; align-items:start }
}
.media-text__media img{ display:block; width:100%; height:auto; border-radius:8px; max-width: 400px; /* ← PCと同じ最大幅に制限 */
  margin: 0 auto;   /* ← センター揃え */ }
.media-text__body p{ margin:0 0 var(--space-gap) }

/* ===== 補足 ===== */
.supplement{ margin-top:20px }

/* ===== アイコングリッド ===== */
.icon-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; justify-items:center; align-items:center; margin-top:30px;
}
.icon-item img{ width:100%; max-width:160px; height:auto; display:block }
@media (max-width:959px){
  .icon-grid{ grid-template-columns:repeat(2,1fr); gap:15px }
}

/* ===== Before / After ===== */
.ba-section{ padding-top:0; padding-bottom:0 } /* 上はこのまま、下は専用で40px確保 */
.ba-section .container{ margin-bottom:40px }   /* 次のCTAまでの間隔を保証 */

.ba-grid{
  display:grid; grid-template-columns:repeat(2,350px);
  gap:20px; justify-content:center; align-items:start;
}
.ba-item{ width:350px; margin:0 }
.ba-item img{ width:100%; height:auto; border-radius:8px; box-shadow:var(--shadow) }
@media (max-width:959px){
  .ba-grid{ grid-template-columns:1fr; justify-items:center }
  .ba-item{ width:min(100%,350px) }
}

/* ===== フィーチャーバナー ===== */
.feature-banner{ width:100%; margin:0 0 20px }
.feature-banner picture{ display:block; width:100% }
.feature-banner img{ display:block; width:100%; height:auto }

/* ===== 価格表 ===== */
.price-table{ width:100%; border-collapse:collapse }
.price-table th{
  background-color:var(--brand); color:#fff; font-weight:bold;
  padding:8px 12px; border:1px solid #D9D9D9; text-align:left; white-space:nowrap;
}
.price-table td{
  background-color:#fff; padding:8px 12px; border:1px solid #D9D9D9;
}

/* ===== 連絡先 ===== */
.contact-lead{ font-size:20px; font-weight:700; margin-bottom:20px; color:var(--ink) }
.contact-fig{ margin:0; display:flex; justify-content:center }
.contact-fig img{ width:min(100%,600px); height:auto }

/* ===== 法定表示 ===== */
.section--legal{
  padding:40px 0; background:transparent; color:var(--ink);
  padding-top: 20px;
}
.section--legal .container{ background:#f7f7f7; padding:24px }
.section--legal h2{ font-size:20px; font-weight:700; margin:32px 0 12px }
.section--legal p{ margin:0 0 12px }

/* === CTAバナー：上下の余白を撤去（セクション自体のpaddingを0） === */
.section--ctaimg { padding: 0; }

/* 追加CTA（.section.section--nmtop 内に CTA画像/ボタンのみ置いている箇所）もゼロ化
   ※ Chrome/Safari/Edge で使える :has() を利用。古い環境が不要ならこれだけでOK */
.section.section--nmtop:has(.cta-img), 
.section.section--nmtop:has(.cta-btn) {
  padding-bottom: 0;
}

/* --- 箱全体 --- */
.structure-box {
  background: #F5F5F5;
  border-radius: 0 30px 0 0; /* 右上だけ角丸 */
  padding: 24px;
  margin-top: 40px; /* 見出し下との距離 */
}

/* --- 2個目以降（subクラス） --- */
.structure-box--sub {
  margin-top: 0; /* 上余白をなくす */
}

/* --- 箱同士の間に入る矢印 --- */
.structure-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0; /* 上下6px */
  padding: 0;    /* 箱内余白を無効化 */
}
.structure-arrow img {
  width: 24px;
  height: 24px;
  display: block;
}

/* --- 2カラムレイアウト --- */
.structure-grid {
  display: grid;
  grid-template-columns: 30% 70%; /* 左右比率 */
  align-items: start;
  gap: 0;
}

/* --- 左カラム画像（共通） --- */
.structure-image {
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
  align-items: center;     /* 縦方向中央寄せ */
  height: 100%;            /* ← これが重要 */
}
.structure-image img {
  display: block;
  height: auto;
  margin: 0 auto;
}

/* --- 右カラムテキスト（共通） --- */
.structure-text {
  display: flex;
  flex-direction: column;
}
.structure-title {
  font-size: 20px;
  font-weight: 700;
  color: #616161;
  margin-top: 20px;
  margin-bottom: 0;
}
.structure-desc {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin: 0;
}

/* --- ライン（共通） --- */
.structure-line {
  width: 100%;
  height: 3px;
  position: relative;
  margin-top: 23px;
  margin-bottom: 18px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(to right, var(--brand) 0 30px, transparent 30px),
    repeating-linear-gradient(
      to right,
      #616161 0 6px,
      transparent 6px 12px
    );
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 3px;
}

/* --- 個別画像サイズ --- */
.structure-image--reserve img {  /* 1個目：事前受付 */
  width: 138px !important;
  max-width: none !important;
}
.structure-image--announce img { /* 2個目：銘柄発表 */
  width: 178px !important;
  max-width: none !important;
}
/* --- 3個目（継続フォロー） --- */
.structure-image--follow img {
  width: 159px !important;
  max-width: none !important;
}

/* --- 注記（3個目用） --- */
.structure-note {
  font-size: 14px;
  font-weight: 400; /* 太さ標準 */
  color: #333;
  margin-top: 12px;
  line-height: 1.6;
}

/* --- スマホ対応（縦積み） --- */
@media (max-width: 959px) {
  .structure-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .structure-image img {
    margin: 0 auto;
  }

  .structure-line {
    width: 100%;
    background-size: 100% 3px;
  }
}

.section--structure {
  padding-bottom: 0; /* 下の余白を削除 */
  margin-bottom: 0;  /* 万が一 .section に margin があっても削除 */
}
/* --- セクション内見出しブロック（特徴・保有期間・サポート方針） --- */
.section--feature .tag-outline {
  margin-top: 40px; /* 上に40pxの余白 */
}

/* --- サポート終了の考え方表 --- */
.support-table {
  width: 100%;
  max-width: 390px;      /* ★ 最大幅を390pxに制限 */
  border-collapse: collapse;
  margin: 0 auto;        /* ★ カラム内で中央寄せ */
}

.support-table th {
  background-color: var(--brand);
  color: #fff;
  font-weight: bold;
  padding: 12px;
  text-align: center;
  border: 1px solid #D9D9D9;
  font-size: 18px;
}

.support-table td {
  background-color: #fff;
  padding: 14px 12px;
  border: 1px solid #D9D9D9;
  font-size: 16px;
  color: #333;
  text-align: left;
  line-height: 1.6;
}

/* スマホでは縦並び */
@media (max-width: 959px) {
  .media-text {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* --- サポート終了の考え方・過去の代表例の上余白を削除 --- */
.section--support-end,
.section--past-example,
.section--price {
  margin-top: 20px !important;
  padding-top: 0 !important;
}

.section--target {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.section--faq {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.hero-cta a img,
.cta-img-link img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-cta a:hover img,
.cta-img-link:hover img {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.highlight-box {
  border: 2px solid #e60000; /* メイン赤 */
  border-radius: 8px;
  background-color: #fffafa;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}