@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.3
*/

/* ========== 基礎（表示したくない要素） ========== */
/* 固定ページ：日付・著者非表示 */
.page .posted-on,
.page .date-tags { display: none; }
.page .author-info,
.page .byline,
.page .author { display: none !important; }

/* ヘッダー類を完全に消す＋上余白ゼロ */
.site-header, #header, #navi, .navi, .header-container { display: none !important; }
#container, .main, .entry, .article { margin-top: 0 !important; padding-top: 0 !important; }

/* ========== Cocoonの余白・枠を除去（固定ページ） ========== */
#main.main { margin: 0 !important; padding: 0 !important; }

#content.content,
#content.content.cf,
#content.content.wrap,
#content.content.in.wrap {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.post, .page, article.post, article.page {
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.entry-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* テンプレ側の保険（まれに当たるクラス） */
.article-header, .entry-header, .article .article-header,
.l-contents, .content { margin-top: 0 !important; padding-top: 0 !important; }

/* ========== フロント専用（管理画面には効かせない） ========== */
body:not(.wp-admin) {

  /* --- フル幅ブロックを画面端まで（Cocoon対策） --- */
  .entry-content .alignfull,
  .wp-block-image.alignfull,
  .wp-block-cover.alignfull,
  .wp-block-group.alignfull {
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* 画像ブロックのデフォ余白を除去 */
  .wp-block-image { margin: 0 !important; }

  /* ========== メインビジュアル（画像2枚の切替） ========== */
  .mv-pc { display: block; }
  .mv-sp { display: none; }
  @media (max-width: 768px) {
    .mv-pc { display: none; }
    .mv-sp { display: block; }
  }

  /* （カバーを使う場合のみ） */
  .mv-cover { min-height: clamp(520px, 80vh, 880px); }
  .mv-cover .wp-block-cover__image-background,
  .mv-cover img { object-fit: cover; object-position: 30% 50%; }
  @media (max-width: 768px) {
    .mv-cover { min-height: 90vh; }
    .mv-cover .wp-block-cover__image-background,
    .mv-cover img { object-position: 20% 50%; }
  }

  /* ========== CTA：テキスト＋巨大ボタンの帯（.cta-promo） ========== */
  .cta-promo{
    /* 帯本体 */
    background: #F5F5F5;
    padding: 12px 0 !important;
    margin: 0 !important;

    /* Gutenberg の子ブロック間余白を無効化 */
    --wp--style--block-gap: 0 !important;

    /* 完全中央寄せ */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center !important;
  }
  .cta-promo.is-layout-constrained > * + * { margin-top: 0 !important; }

  /* テキスト（段落/見出しどちらでも） */
  .cta-promo .cta-note,
  .cta-promo h1, .cta-promo h2, .cta-promo .wp-block-heading{
    margin: 0px 0 0px !important;
    padding: 0 !important;
    color: #0B0B0B !important;
    font-weight: 700 !important;
    font-size: clamp(16px, 2.2vw, 22px) !important;
    letter-spacing: .02em;
    text-align: center !important;
  }

  /* ボタン行を中央に */
  .cta-promo .wp-block-buttons{ justify-content: center !important; margin: 0 !important; }
  .cta-promo .cta-big{ margin: 0 auto !important; }

  /* 巨大ボタン（どの付け方にも対応） */
  .cta-promo .cta-big .wp-block-button__link,
  .cta-promo .wp-block-button.cta-big .wp-block-button__link,
  .cta-promo .wp-block-buttons.cta-big .wp-block-button__link{
    display: inline-block;
    background: linear-gradient(180deg,#2E76B5 0%,#1E4E8E 100%) !important;
    color:#fff !important;
    border-radius:14px !important;
    padding: clamp(12px,2.4vw,18px) clamp(20px,4.6vw,40px) !important;
    font-weight:800 !important;
    font-size: clamp(16px,2.4vw,22px) !important;
    letter-spacing:.02em;
    text-decoration:none !important;
    box-shadow:0 8px 18px rgba(0,0,0,.25) !important;
    border:1px solid rgba(0,0,0,.15) !important;
    transition: all .2s ease;
    margin: 6px auto !important;
  }
  .cta-promo .cta-big .wp-block-button__link:hover,
  .cta-promo .wp-block-button.cta-big .wp-block-button__link:hover,
  .cta-promo .wp-block-buttons.cta-big .wp-block-button__link:hover,
  .cta-promo .cta-big .wp-block-button__link:focus-visible,
  .cta-promo .wp-block-button.cta-big .wp-block-button__link:focus-visible,
  .cta-promo .wp-block-buttons.cta-big .wp-block-button__link:focus-visible{
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:0 10px 22px rgba(0,0,0,.28);
  }
  .cta-promo .cta-big .wp-block-button__link:active,
  .cta-promo .wp-block-button.cta-big .wp-block-button__link:active,
  .cta-promo .wp-block-buttons.cta-big .wp-block-button__link:active{
    transform: translateY(0);
    box-shadow:0 6px 14px rgba(0,0,0,.22);
  }

  @media (max-width: 768px){
    .cta-promo .cta-big .wp-block-button__link,
    .cta-promo .wp-block-button.cta-big .wp-block-button__link,
    .cta-promo .wp-block-buttons.cta-big .wp-block-button__link{
      width: min(92vw, 540px);
    }
  }
}

body:not(.wp-admin) {

  /* 巨大CTAボタン */
  .cta-promo .cta-big .wp-block-button__link,
  .cta-promo .wp-block-button.cta-big .wp-block-button__link,
  .cta-promo .wp-block-buttons.cta-big .wp-block-button__link {
    display: inline-block;
    /* グラデーションをFigmaの値に変更 */
    background: linear-gradient(180deg, #1E4278 0%, #1560B7 50%, #1C4980 100%) !important;
    color:#fff !important;
    border-radius:14px !important;
    padding: clamp(12px,2.4vw,18px) clamp(20px,4.6vw,40px) !important;
    font-weight:800 !important;
    font-size: clamp(16px,2.4vw,22px) !important;
    letter-spacing:.02em;
    text-decoration:none !important;
    box-shadow:0 8px 18px rgba(0,0,0,.25) !important;
    border:1px solid rgba(0,0,0,.15) !important;
    transition: all .2s ease;
    margin: 6px auto !important;
  }

  /* 補足テキスト（span などで囲むのが理想） */
  .cta-promo .cta-big .wp-block-button__link small,
  .cta-promo .cta-big .wp-block-button__link span.sub {
    font-size: 0.7em;    /* 親文字の70% */
    opacity: 0.9;        /* ほんのり薄め */
  }
}
body:not(.wp-admin) {
  @media (max-width: 480px) {
    /* ボタン文字サイズをさらに縮小 */
    .cta-promo .cta-big .wp-block-button__link,
    .cta-promo .wp-block-button.cta-big .wp-block-button__link,
    .cta-promo .wp-block-buttons.cta-big .wp-block-button__link {
      font-size: 13px !important;     /* ← 固定で小さめに */
      padding: 10px 16px !important;  /* ボタンも少しコンパクトに */
      line-height: 1.3 !important;    /* 高さ調整 */
      white-space: normal !important; /* 改行は許容 */
    }

    /* 補足テキスト（小さく表示） */
    .cta-promo .cta-big .wp-block-button__link small,
    .cta-promo .cta-big .wp-block-button__link span.sub {
      font-size: 11px !important;
      display: inline-block;
      margin-left: 2px;
    }
  }
}

body:not(.wp-admin){
  /* 下のグレー帯だけ上マージンをゼロ＆密着 */
  .cta-sub{
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Gutenbergの子ブロック間の自動余白も無効化 */
    --wp--style--block-gap: 0 !important;
  }
  .cta-sub.is-layout-constrained > * + *{ margin-top: 0 !important; }

  /* 念のため：内側テキスト/ボタンの上下余白も詰める */
  .cta-sub p,
  .cta-sub h1,.cta-sub h2,.cta-sub .wp-block-heading,
  .cta-sub .wp-block-buttons,.cta-sub .wp-block-button{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

body:not(.wp-admin){
    .cta-promo .cta-big .wp-block-button__link,
    .cta-promo .wp-block-button.cta-big .wp-block-button__link,
    .cta-promo .wp-block-buttons.cta-big .wp-block-button__link
	{
      margin-top: 0px !important;     /* ← 0 でもOK。まずは4pxで自然に */
      line-height: 1.2 !important;      /* 行間も詰める */
    }

    /* 価格の小さい行がある場合（<small> or .sub） */
    .cta-promo .cta-big .wp-block-button__link small,
    .cta-promo .cta-big .wp-block-button__link .sub
	{
      font-size: 11px !important;
      margin-top: 2px !important;       /* 上の余白も最小に */
    }
}


/* ====== お問い合わせ CTA（あなたのHTML用） ====== */
:root{
  --navy:#0b2b56;
  --navy-d:#081f3f;
  --yellow:#FEE016;
  --panel:#0f2d54;
  --white:#F5F5F5;
  --text:#333;
  --orange-top:#FFA31A;
  --orange-mid:#E67600;
  --orange-btm:#D45700;
}

/* 全体箱 */
.inquiry-section{
  margin: clamp(24px,4vw,48px) auto;
  max-width: min(1100px, 92vw);
}
.inquiry-card{
  border:6px solid var(--navy);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 4px 0 rgba(11,43,86,.25);
}

/* ヘッダー帯（横並び） */
.inquiry-head{
  display:flex;
  align-items:flex-end;            /* 文字の下端を揃える */
  gap: clamp(10px,1.8vw,18px);
  padding: clamp(18px,2.8vw,28px) clamp(20px,3.4vw,36px);
  background: linear-gradient(180deg, var(--panel) 0%, var(--navy) 100%);
}
.inquiry-head .head-spacer{ flex:1; } /* 右側に余白を逃がす */

.now{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  justify-content:flex-end;
  line-height:1.05;
}
.now-text{
  color:var(--white);
  font-weight:800;
  letter-spacing:.02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  font-size: clamp(24px,3.2vw,44px);
  padding-bottom:.22em;            /* 下線ぶんの逃げ */
}
.now-underline{
  position:absolute;
  left:-2px;                       /* 気持ち左に張り出す */
  bottom:-.06em;
  width:115%;
  height:auto;
  pointer-events:none;
}

/* 「無料相談」だけ黄色 / 「実施中！」は白 */
.headline{
  margin:0;
  display:flex;
  align-items:flex-end;
  gap:.35em;
  letter-spacing:.02em;
  line-height:1.05;
  font-size: clamp(28px,4.2vw,58px);
  font-weight:800;
  color:#fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.headline-strong{
  color:var(--yellow);
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.12);
}

/* 本文 */
.inquiry-body{
  position:relative;
  padding: clamp(22px,3.6vw,40px) clamp(20px,3.6vw,40px) clamp(34px,4.2vw,48px);
}
.inquiry-body .lead{
  margin: 0 0 clamp(18px,2.4vw,24px);
  text-align:center;
  color:#2a2a2a;
  font-weight:700;
  font-size: clamp(16px,2.3vw,22px);
}

/* フォーム */
.apply-form{ margin:0; }
.form-grid{ display:grid; gap: clamp(12px,2.6vw,18px); }
.form-row{
  display:grid;
  grid-template-columns: max-content 1fr;
  align-items:center;
  gap: clamp(12px,2.6vw,18px) clamp(14px,2.8vw,20px);
}
.form-row label{
  color:#0d2342;
  font-weight:800;
  letter-spacing:.02em;
  font-size: clamp(16px,2.6vw,26px);
  white-space:nowrap;
}
.form-row input{
  width:100%;
  font-size: clamp(16px,2.2vw,20px);
  padding: clamp(10px,1.8vw,14px) clamp(12px,2.2vw,16px);
  border:2px solid #9fb3cc;
  border-radius:6px;
  outline:none;
  background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.form-row input::placeholder{ color:#9aa7b5; }

/* CTAラップ（リボンをかぶせる） */
.cta-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  padding-top: clamp(20px,3.6vw,28px); /* リボンの分だけ上に余白 */
}
.qa-badge{
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%, -48%); /* ボタン側へ少しかぶせる */
  width: clamp(260px, 36vw, 420px);
  height:auto;
  pointer-events:none;
  z-index:3;
}

/* 大ボタン（1行死守＆グラデ・影・矢印） */
.cta-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap: clamp(10px,1.8vw,14px);
  border-radius:14px;
  border: 1px solid rgba(0,0,0,.15);
  padding: clamp(14px,2.6vw,18px) clamp(22px,4.6vw,40px);
  background: linear-gradient(180deg, var(--orange-top) 0%, var(--orange-mid) 52%, var(--orange-btm) 100%);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;                          /* ←スマホでも改行しない */
  font-size: clamp(18px,2.8vw,28px);
  box-shadow:
    0 12px 24px rgba(212,87,0,.28),
    inset 0 2px 0 rgba(255,255,255,.25);
  cursor:pointer;
}
.cta-button span{ display:inline-block; }

/* 疑似要素で白い三角矢印を描く */
.cta-button::after{
  content:"";
  width: 0; height: 0;
  border-left: clamp(12px,1.8vw,16px) solid #fff;
  border-top:  clamp(7px,1vw,9px) solid transparent;
  border-bottom: clamp(7px,1vw,9px) solid transparent;
  display:inline-block;
}

/* ホバー/クリック */
.cta-button:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px rgba(212,87,0,.34),
    inset 0 2px 0 rgba(255,255,255,.25);
}
.cta-button:active{
  transform:none;
  box-shadow:
    0 10px 18px rgba(212,87,0,.25),
    inset 0 2px 0 rgba(255,255,255,.25);
}

/* スマホ最適化 */
@media (max-width: 768px){
  .form-row{ grid-template-columns: 1fr; }
  .form-row label{ font-size: 16px; }
  .cta-button{ font-size: clamp(16px,4.2vw,22px); }  /* 1行維持のため少し縮む */
}

/* =========================================
   問い合わせヘッダー：横並び & 完全センター
   ========================================= */
:root{
  --nrfx-navy: #0D2B53;   /* 濃紺（帯の背景） */
  --nrfx-yellow: #FEE016; /* 黄色 */
}

/* ヘッダーバー全体 */
.inquiry-section .inquiry-head{
  background: var(--nrfx-navy) !important; /* CocoonのH2背景を完全無効化 */
  display: grid;
  grid-template-columns: auto 1fr auto;    /* 左：今なら  中央：見出し  右：ダミー */
  align-items: center;
  column-gap: clamp(10px, 2.5vw, 22px);
  padding: clamp(12px, 2.8vw, 22px) clamp(16px, 3.5vw, 28px);
  border-radius: 14px 14px 0 0;
}

/* Cocoon標準H2の装飾を打ち消す（背景帯を濃紺に統一） */
.inquiry-section .headline{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* 中央セルで縦横センター */
  grid-column: 2;
  justify-self: center;
  align-self: center;
  text-align: center;

  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  font-size: clamp(28px, 4.2vw, 64px);
}

/* 「無料相談」を強調（黄色＆軽いシャドウ） */
.inquiry-section .headline-strong{
  color: var(--nrfx-yellow);
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}

/* 「実施中！」だけ0.8倍 */
.inquiry-section .headline-sub{
  font-size: .8em;
}

/* 左端 “今なら” */
.inquiry-section .now{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.inquiry-section .now-text{
  color: #F5F5F5;
  font-weight: 800;
  line-height: 1;
  font-size: clamp(20px, 3.2vw, 40px);
  letter-spacing: .02em;
  white-space: nowrap;
}
.inquiry-section .now-underline{
  position: absolute;
  left: .35em;                 /* テキストに自然に添わせる */
  bottom: -.35em;
  width: clamp(110px, 18vw, 220px);
  height: auto;
  pointer-events: none;
}

/* 右ダミー（グリッドの3カラム目） */
.inquiry-section .head-spacer{ height: 1px; }

/* 幅が狭くなっても中央に貼り付く（レイアウト崩れ防止） */
@media (max-width: 560px){
  .inquiry-section .inquiry-head{
    grid-template-columns: auto 1fr auto;
    row-gap: 6px;
  }
  .inquiry-section .headline{
    font-size: clamp(24px, 7vw, 34px);
  }
  .inquiry-section .now-text{
    font-size: clamp(16px, 5.5vw, 26px);
  }
}

/* =========================================
   フォーム：ラベル/入力の左端を上下で完全に揃える
   ========================================= */
.apply-form .form-grid{
  display: grid;
  /* ラベル幅は可変、入力は残りを使用 */
  grid-template-columns: clamp(96px, 18vw, 210px) 1fr;
  column-gap: clamp(12px, 2.4vw, 24px);
  row-gap: clamp(12px, 2vw, 20px);
  align-items: center;
}

.apply-form .form-row{ display: contents; }

.apply-form .form-row > label{
  grid-column: 1;
  align-self: center;
  font-weight: 800;
  color: var(--nrfx-navy);
  white-space: nowrap;
}

.apply-form .form-row > input{
  grid-column: 2;
  width: 100%;
  box-sizing: border-box;
}

/* スマホは縦積み（でも入力の左端は画面左基準で揃う） */
@media (max-width: 640px){
  .apply-form .form-grid{
    grid-template-columns: 1fr;
  }
  .apply-form .form-row > label{
    grid-column: 1;
    margin-bottom: 6px;
  }
  .apply-form .form-row > input{
    grid-column: 1;
  }
}

/* =========================================
   「ご質問にもお答えします！」バッジ：ボタンに重ねる
   ========================================= */
.cta-wrap{
  position: relative;
  margin-top: clamp(12px, 2.5vw, 18px);
}
.qa-badge{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* ボタンの縁に気持ち重ねる（数値はデザインに合わせて微調整） */
  top: calc(-1 * clamp(18px, 3vw, 26px));
  width: clamp(260px, 46vw, 420px);
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.12));
  pointer-events: none;
}

/* 参考：オレンジボタンのタイポ微調整（1行保持） */
.cta-button .wp-element-button,
.cta-button span{
  font-size: clamp(16px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 重なりの基準にする */
.cta-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: clamp(12px, 2.5vw, 18px);
}

/* ボタンは下層（クリック優先） */
.cta-button{
  position: relative;
  z-index: 1;
}

/* ←ココを置き換え：バッジの重なりを“安定化” */
.qa-badge{
  position: absolute;
  left: 50%;
  bottom: 100%;                     /* ボタンのちょうど上端基準 */
  transform: translate(-50%, 130%);  /* 画像高さの約4割だけ下げて跨がせる */
  width: clamp(260px, 46vw, 420px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.12));
}


/* 置き換え：カード外周ラインを内側に描画 */
.inquiry-card{
  position: relative;
  border: none !important;
  border-radius: 18px;                  /* デザインのRに合わせて調整 */
  box-shadow: inset 0 0 0 8px #0D2B53;  /* 内側ストローク（太さは8px例） */
  overflow: hidden;                      /* 角のはみ出し防止・見た目が締まる */
  background: #fff;                      /* 念のため */
}

/* =========================================================
   理想の環境セクション（#ideal）
   HTMLは各行を .ideal-row（2行目と4行目に .reverse ）
   PC：左右交互／SP：画像→テキスト固定、矢印非表示
   ========================================================= */
/* ===== IDEAL section — clean override (for #ideal only) ===== */

:root{
  --ideal-navy:#12335a;
  --ideal-light:#ECF4FF;
  --ideal-shadow:0 12px 28px rgba(16,34,64,.12);
}

/* 旧CSSで残っている矢印系を無効化（#ideal内だけ） */
#ideal .ideal-bubble::before,
#ideal .ideal-bubble.arrow-left::before,
#ideal .ideal-bubble.arrow-right::before{
  content:none !important;
}

/* ===== ベース ===== */
#ideal{ padding:clamp(40px,7vw,96px) 0; background:#fff; }
#ideal .ideal-container{ width:min(1120px,92vw); margin:0 auto; }
#ideal .ideal-title{
  text-align:center; font-weight:800; line-height:1.35;
  font-size:clamp(22px,3.2vw,40px); margin:0 0 clamp(28px,6vw,56px);
}
#ideal .ideal-title .accent{ color:#1555A5; }

/* SP：画像→テキストの1列レイアウト（幅いっぱい） */
#ideal .ideal-row{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:"media" "bubble";
  align-items:center;
  justify-items:stretch;                 /* ← 幅いっぱいに */
  row-gap:clamp(12px,3vw,20px);
  margin:clamp(22px,6vw,60px) 0;
}
#ideal .ideal-media{ grid-area:media; }
#ideal .ideal-bubble{ grid-area:bubble; }

/* 画像カード（枠/影/角丸を統一） */
#ideal .ideal-media img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover;
  border-radius:16px; border:1px solid #dfe6f3;
  box-shadow:var(--ideal-shadow); background:#fff;
}

/* 吹き出し（色は変数 --bg に集約） */
#ideal .ideal-bubble{
  --bg: var(--ideal-navy);
  position:relative;
  text-align:center; line-height:1.65; font-weight:700;
  padding:clamp(14px,2vw,22px) clamp(18px,2.6vw,28px);
  border-radius:14px; box-shadow:var(--ideal-shadow);
  background:var(--bg); color:#fff;
}
#ideal .ideal-bubble.bubble-light{
  --bg: var(--ideal-light);
  color:#122F55;
}

/* ===== PC：2カラム＋2/4行は反転、カード幅を統一、矢印自動 ===== */
@media (min-width:1024px){
  #ideal .ideal-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"media bubble";
    column-gap:clamp(28px,5vw,60px);
    justify-items:center;               /* 子要素を中央寄せ */
  }
  #ideal .ideal-row.reverse{ grid-template-areas:"bubble media"; }

  /* 画像と吹き出しの横幅を完全一致（見た目の“サイズ感”を固定） */
  #ideal .ideal-media,
  #ideal .ideal-bubble{
    width: clamp(420px, 45vw, 560px);
    max-width: 100%;
  }

  /* 画像のある側へ三角を自動で向ける */
  #ideal .ideal-bubble::after{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    width:0; height:0; border:24px solid transparent; pointer-events:none;
  }
  /* 画像が左（通常行） → 左向き */
  #ideal .ideal-row:not(.reverse) .ideal-bubble::after{
    left:-47px; border-right-color: var(--bg);
  }
  /* 画像が右（.reverse行） → 右向き */
  #ideal .ideal-row.reverse .ideal-bubble::after{
    right:-47px; border-left-color: var(--bg);
  }
}

/* ===== SP：画像フル幅＆矢印オフ ===== */
@media (max-width:1023.98px){
  #ideal .ideal-bubble::after{ content:none !important; }
}

/* ===== PC版：吹き出しの文字を大きく（矢印サイズも追従） ===== */
@media (min-width: 1024px){
  #ideal .ideal-bubble{
    /* テキストを大きく＆読みやすく */
    font-size: clamp(20px, 1.9vw, 42px);
    line-height: 1.6;
    letter-spacing: .02em;
    padding: clamp(18px, 2.2vw, 28px) clamp(24px, 3vw, 40px);
    font-weight: 800;                 /* 見出し感を少し強める */
  }
}
  #ideal .ideal-bubble strong{ font-size: 1.06em; }  /* 強調の乗りをほんの少しUP */

/* ====== 理想の環境：右側ラインずれ修正 ====== */
#ideal{
  --colW: clamp(480px, 47vw, 560px);   /* PCでの左右カラム幅（お好みで微調整可） */
  --gap:  clamp(28px, 5vw, 60px);      /* 画像と吹き出しの間隔 */
  --arrowW: 14px;                       /* 三角の張り出し量（borderの太さと一致） */
}

/* PC：全行で同じ列幅に固定（行ごとに幅がブレないように） */
@media (min-width: 1024px){
  #ideal .ideal-row{
    display: grid;
    grid-template-columns: var(--colW) var(--colW);
    column-gap: var(--gap);
    align-items: center;
  }
  /* セルいっぱいに広げる（はみ出しの元を断つ） */
  #ideal .ideal-media,
  #ideal .ideal-bubble{
    width: 100%;
    justify-self: stretch;
    box-sizing: border-box;
  }
}

/* 画像の見た目を全行で統一（比率・トリミング・影） */
#ideal .ideal-media img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;   /* 必要なら 4/3 等に変更 */
  object-fit: cover;
  border: 1px solid #dfe6f3;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2,25,64,.12);
}

/* SP：画像は横幅フル・縦並び（既に設定済みでも上書きOK） */
@media (max-width: 1023.98px){
  #ideal .ideal-row{ grid-template-columns: 1fr; }
  #ideal .ideal-media img{ width: 100%; }
  #ideal .ideal-bubble{ width: 100%; }
  /* SPでは三角は非表示にする場合 */
  /* #ideal .ideal-bubble::after{ content: none !important; } */
}


/* ===============================
   動画ブロック（<figure class="wp-block-video ...">）
   =============================== */
:root{
  --video-radius: 14px;
  --video-border: #dfe6f3;
  --video-shadow: 0 16px 28px rgba(16,34,64,.12);
}

/* 器と中央寄せ */
.entry-content figure.wp-block-video{
  margin: clamp(16px, 4vw, 32px) auto;
  max-width: none; /* Cocoon/テーマ側の上限を無効化 */
}
.entry-content figure.wp-block-video.aligncenter{
  width: min(1100px, 92vw);
}

/* プレイヤー本体 */
.entry-content figure.wp-block-video video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  background:#000;
  border-radius: var(--video-radius);
  border:1px solid var(--video-border);
  box-shadow: var(--video-shadow);
  overflow:hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* “全幅”にしたい時だけ端から端まで */
.entry-content figure.wp-block-video.alignfull{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.entry-content figure.wp-block-video.alignfull video{ border-radius:0; }

/* ===============================
   宣言セクション（#vision）
   =============================== */

/* WPの“器幅制限”をこのセクションだけ解除（親が .is-layout-constrained でも無効化） */
.is-layout-constrained > #vision.vision-section{ 
  max-width: none !important;
}

/* セクション本体：背景を横幅いっぱいに（フルブリード） */
#vision.vision-section{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  --bg:#EEF3F8;
  --ink:#0B0B0B;
  --navy:#1555A5;
  --yellow:#FEE016;

  background: var(--bg);
  color: var(--ink);
  padding: clamp(32px, 7vw, 80px) 0;
  font-feature-settings: "palt";
}

/* 内側の器＋中央揃え */
#vision .vision-container{
  width: min(1100px, 92vw);
  margin-inline: auto;
  text-align: center;
}

/* 1行目 */
#vision .vision-kv{
  margin: 0 0 clamp(14px, 3.5vw, 24px);
  font-weight: 800;
  line-height: 1.35;
  font-size: clamp(22px, 3.4vw, 40px);
}
#vision .vision-kv .em{ font-weight: 900; }

/* 2行目（青い下線を強調） */
#vision .vision-lead{
  margin: 0 0 clamp(10px, 3vw, 22px);
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.5;
}
#vision .accent-underline{
  color: var(--navy);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: .18em;
  text-underline-offset: .18em;
}

/* 本文行 */
#vision .vision-copy{
  margin: 0 0 clamp(8px, 2.6vw, 18px);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.65;
}

/* 最終行：黄色ハイライト（複数行でも切れない） */
#vision .vision-brand{
  margin: clamp(12px, 3.4vw, 24px) 0 0;
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#vision .hl-yellow{
  background: var(--yellow);
  display: inline;
  padding: .08em .35em;
  border-radius: .15em;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ===============================
   実績セクション（#milestone）
   =============================== */

/* 親が .is-layout-constrained でも幅制限を解除 */
.is-layout-constrained > #milestone.milestone-section{ 
  max-width: none !important;
}

/* セクション本体：背景を横いっぱい（フルブリード） */
#milestone.milestone-section{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fff;
  color: #0B0B0B;
  padding: clamp(48px, 8vw, 120px) 0;
  text-align: center;
  font-feature-settings: "palt";
}

/* 内側の器（中央寄せ） */
#milestone .milestone-container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* タイトル＆前置き */
#milestone .milestone-title{
  margin: 0 0 clamp(8px, 2vw, 16px);
  font-weight: 900;
  line-height: 1.35;
  font-size: clamp(24px, 3.4vw, 44px);
}
#milestone .milestone-sub{
  margin: 0 0 clamp(10px, 2.6vw, 20px);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.4;
}
#milestone .milestone-sub.b{
  font-size: clamp(20px, 2.8vw, 36px);
}

/* ドーンと数字 */
#milestone .count-line{
  margin: clamp(12px, 3vw, 28px) 0 clamp(10px, 2.4vw, 20px);
  line-height: 1;
  font-weight: 900;
}
#milestone .count{
  display: inline-block;
  font-size: clamp(72px, 16vw, 180px);
  letter-spacing: .02em;
  color: #E60000;
  text-shadow: 0 6px 18px rgba(230,0,0,.16);
}
#milestone .after{
  display: inline-block;
  margin-left: .25em;
  vertical-align: baseline;
  color: #E60000;
  font-weight: 900;
  font-size: clamp(22px, 4.2vw, 56px);
}

/* 注釈 */
#milestone .note{
  margin: 0 0 clamp(18px, 3vw, 30px);
  color: #475467;
  font-size: clamp(14px, 2.6vw, 18px);
  font-weight: 700;
}

/* しめのコピー（黄色ハイライト付き） */
#milestone .cta-intro{
  margin: clamp(18px, 3.6vw, 32px) 0 0;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.55;
}
#milestone .hl-yellow{
  background: var(--nrfx-yellow, #FEE016);
  display: inline;
  padding: .12em .38em .06em;
  border-radius: .14em;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ───────── スマホで“グループ幅を絞る”専用 ───────── */
@media (max-width: 768px){
  :root{ --sp-narrow: min(86vw, 520px); }   /* ← 好みで 80–90vw / pxに調整 */

  /* 通常のGroup */
  .entry-content .wp-block-group.sp-narrow{
    width: var(--sp-narrow) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 全幅(alignfull)を付けていても例外で中央寄せにする */
  .entry-content .wp-block-group.sp-narrow.alignfull{
    width: var(--sp-narrow) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 中の画像・figure はグループ幅にフィット（はみ出し防止）*/
  .entry-content .wp-block-group.sp-narrow .wp-block-image,
  .entry-content .wp-block-group.sp-narrow figure,
  .entry-content .wp-block-group.sp-narrow img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* ======================================
   TRUST（NEXT RISE FXの5つの安心）Clean CSS
   ※このブロックを既存の trust 用CSSと置き換え
   ====================================== */
:root{
  --trust-navy:  #0D2B53;  /* バッジ紺 */
  --trust-accent:#1555A5;  /* 強調青 */
  --trust-red:   #E60012;  /* 見出しの「5」 */
  --trust-card:  #F2F5FA;  /* 行の台紙 */
  --trust-line:  #E3EAF4;  /* 行の枠線 */
}

/* セクション器 */
#trust.trust-section{ background:#fff; padding:clamp(20px,5vw,40px) 0; }
#trust .trust-container{ width:min(1100px,92vw); margin:0 auto; }

/* ===== 見出し：常に1行 ===== */
#trust h2.trust-title{
  /* テーマの h2 を確実に上書き */
  font-size:clamp(18px,5.2vw,44px) !important;  /* 375px時 ≈18–19px */
  line-height:1.15;
  font-weight:800;
  letter-spacing:0;               /* 余白を増やさない */
  display:flex;
  align-items:center;
  justify-content:center;         /* PCは中央 */
  gap:0;
  white-space:nowrap;             /* ←改行禁止 */
  word-break:keep-all;
  overflow-wrap:normal;
  margin:0 0 clamp(14px,4.6vw,28px);
  text-align:center;
}
#trust .trust-title .title-text{ display:inline; } /* デフォルトのまま連結 */
#trust .trust-title .title-num{ color:var(--trust-red); font-weight:900; font-size:1em; }
#trust .trust-title .slash{ margin:0 .18em; opacity:.9; font-weight:700; }

/* PCでだけ数字を少し大きく・スラッシュ間隔も広げる */
@media (min-width:768px){
  #trust .trust-title .title-num{ font-size:1.12em; }
  #trust .trust-title .slash{ margin:0 .35em; }
}

/* ===== リスト（行） ===== */
#trust .trust-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(8px,1.8vw,14px);
}
#trust .trust-item{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  column-gap:clamp(10px,2vw,18px);
  background:var(--trust-card);
  border:1px solid var(--trust-line);
  border-radius:0;                                    /* 角丸なし */
  padding:clamp(10px,1.8vw,16px) clamp(14px,2.4vw,22px);
}

/* バッジ（テキスト実装/画像どちらでもOK） */
#trust .badge{
  display:grid; place-items:center;
  background:var(--trust-navy); color:#fff;
  box-shadow:0 3px 0 rgba(13,43,83,.28);
  border-radius:12px;
  padding:clamp(10px,2vw,14px) clamp(12px,2.4vw,18px);
  min-width:clamp(128px,18vw,180px);
}
#trust .badge .b-top,
#trust .badge .b-sub{
  margin:0; line-height:1.05; font-weight:800;
  font-size:clamp(15px,2.6vw,18px);   /* 同一サイズに統一 */
}

/* テキスト（上段の説明 + 下段の強調） */
#trust .copy{ line-height:1.65; }
#trust .copy .sub{
  margin:0 0 .15em; color:#182635; font-weight:700;
  font-size:clamp(13px,3.4vw,16px);   /* 375pxでも読みやすい最小値 */
}
#trust .copy .lead{
  margin:0; font-weight:800; color:var(--trust-accent);
  font-size:clamp(17px,4.6vw,24px);   /* 強調行の色とサイズを統一 */
}

/* SPのバランス調整（バッジ幅を少し狭めて本文を確保） */
@media (max-width:768px){
  #trust h2.trust-title{ justify-content:flex-start; } /* SPは左寄せにしたい場合は有効 */
  #trust .trust-item{ align-items:start; }
  #trust .badge{ min-width:clamp(106px,28vw,140px); }
}

/* ─ 5つを斜めにしない（完全にノンスラント） ─ */
#trust .trust-title .title-num,
#trust .trust-title .title-num em{
  font-style: normal !important;
  font-variation-settings: "slnt" 0;  /* 可変フォント対策 */
  transform: none !important;
}

/* ─ SP：バッジを行の高さまで伸ばす／縦中央 ─ */
@media (max-width: 768px){
  #trust .trust-item{
    /* 既存の align-items: start を上書きして等高に */
    align-items: stretch !important;      
    /* バッジ列の幅を少し確保（必要に応じて数値微調整OK） */
    grid-template-columns: minmax(118px, 28vw) 1fr;
  }
  #trust .badge{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* バッジ内テキストを縦中央 */
    align-items: center;
  }
  /* テキスト側も縦中央寄せ（見た目が揃います） */
  #trust .copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==============================
   TRUST（5つの安心）SPチューニング
   375pxでも崩れない & 見本寄せ
   ============================== */
@media (max-width: 480px){
  /* 行：バッジ列を細めに、右テキストを広く */
  #trust .trust-item{
    /* 左:バッジ列 / 右:本文列 */
    grid-template-columns: clamp(96px, 28vw, 120px) 1fr;
    column-gap: 12px;
    align-items: stretch;           /* 行の高さいっぱい使う */
    padding: 12px 14px;
  }

  /* バッジ：縦中央、行の高さにフィット＆少し細身に */
  #trust .badge{
    min-width: auto;
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 6px;
    padding: 14px 10px;             /* 横を少し絞る */
    border-radius: 18px;            /* （角丸のままにする場合） */
    box-shadow: 0 3px 0 rgba(13,43,83,.25);
  }
  /* バッジ内の2行は同サイズで統一（細身でも読みやすく） */
  #trust .badge .b-top,
  #trust .badge .b-sub{
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: 1.05;
    font-weight: 800;
  }

  /* 右側テキスト：サブはやや小さめ、リードは見出し級 */
  #trust .copy .sub{
    font-size: clamp(13px, 3.4vw, 15px);
    line-height: 1.55;
    margin: 0 0 .2em;
  }
  #trust .copy .lead{
    font-size: clamp(18px, 5.0vw, 22px); /* ←はみ出し防止しつつ存在感キープ */
    line-height: 1.55;
    word-break: keep-all;          /* 単語の途中改行を抑制 */
  }
  #trust .copy .lead .em{
    font-weight: 800;              /* 強調の太さを揃える */
  }
}

/* さらに狭い端末（〜360px）で微縮小して回り込み防止 */
@media (max-width: 360px){
  #trust .trust-item{
    grid-template-columns: clamp(92px, 30vw, 110px) 1fr;
  }
  #trust .badge .b-top,
  #trust .badge .b-sub{ font-size: clamp(12px, 3.8vw, 14px); }
  #trust .copy .lead{ font-size: clamp(17px, 4.8vw, 20px); }
}

/* ===== TRUST：SPの文字サイズ固定（はみ出し対策） ===== */
@media (max-width: 480px){
  /* 上の黒字（サブ行） → 10px */
  #trust .copy .sub{
    font-size: 11px !important;
    line-height: 1.6;
    margin: 0 0 .25em;
    word-break: normal;
    overflow-wrap: anywhere; /* 念のための保険 */
  }

  /* 下の太字（リード行） → 13px */
  #trust .copy .lead,
  #trust .copy .lead strong,
  #trust .copy .lead b,
  #trust .copy .lead .em,
  #trust .copy .lead a{
    font-size: 14px !important;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* PC only：安心ポイント①の行間だけ少し広げる */
@media (min-width: 1024px){
.b-sub {
    margin-top: 4px !important;
}
}

/* ====== WHO（入会者の属性） ====== */
:root{
  --who-navy: #0D2B53;   /* ヘッダーバー */
  --who-ink:  #0B0B0B;
  --who-dots: #9fb3cc;   /* 見出し下の点線 */
  --who-border:#dfe6f3;  /* 枠線 */
  --who-shadow: 0 12px 28px rgba(16,34,64,.10);
}

#who.who-section{
  background:#fff;
  padding: clamp(24px, 6vw, 64px) 0;
  font-feature-settings: "palt";
}

#who .who-card{
  width: min(1120px, 92vw);
  margin: 0 auto;
  border: 1px solid var(--who-border);
  border-radius: 10px;
  overflow: hidden;
  background:#fff;
  box-shadow: var(--who-shadow);
}

/* 紺のヘッダーバー */
#who .who-head{
  margin: 0;
  background: var(--who-navy);
  color:#fff;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing:.02em;
  font-size: clamp(18px, 3.2vw, 28px);
  padding: clamp(12px, 2.8vw, 18px) clamp(16px, 3.6vw, 24px);
}

/* 内側 */
#who .who-inner{
  padding: clamp(18px, 5vw, 40px) clamp(16px, 4vw, 40px);
}

/* リードテキスト */
#who .who-lead{
  margin: 0 0 clamp(18px, 5vw, 40px);
  text-align: center;
  color: var(--who-ink);
  font-weight: 700;
  line-height: 1.65;
  font-size: clamp(16px, 2.2vw, 24px);
}

/* レイアウト：SP=1列 / PC=3列 */
#who .who-grid{
  display: grid;
  gap: clamp(20px, 3.6vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  #who .who-grid{ grid-template-columns: repeat(3,1fr); }
}

/* 各カラム */
#who .who-col{
  display:flex;
  flex-direction: column;
  align-items: center;
}

/* 小見出し（点線） */
#who .who-title{
  margin: 0 0 clamp(10px, 2vw, 14px);
  font-weight: 800;
  letter-spacing:.02em;
  text-align:center;
  font-size: clamp(18px, 1.8vw, 22px);
}
#who .who-title span{
  display:inline-block;
  padding-bottom:.45em;
  border-bottom:2px dotted var(--who-dots);
}

/* 画像（グラフ） */
#who .who-chart{
  margin: 0;
  width: 100%;
  display:flex;
  justify-content:center;
}
#who .who-chart img{
  display:block;
  width: min(360px, 92%);
  height:auto;
  background:#fff;       /* pngでも白地に見せる */
  border-radius: 6px;    /* 不要なら0に */
}

/* スマホ時の区切り感（任意） */
@media (max-width: 979.98px){
  #who .who-col + .who-col{
    padding-top: clamp(12px, 4vw, 18px);
    border-top: 1px solid var(--who-border);
  }
}

/* ====== VOICE（入会者の声） ====== */
#voice{
  --navy:#0D2B53;
  --ink:#0B0B0B;
  --accent:#1555A5;
  --yellow:#FEE016;
  --line:#E5ECF4;
  --check:#17a673;
  color:var(--ink);
  font-feature-settings:"palt";
}
#voice *{box-sizing:border-box;}
#voice .sp{display:none;}
#voice .pc{display:inline;}

#voice .voice-ribbon{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--navy);
  color:#fff;
  text-align:center;
  font-weight:800;
  letter-spacing:.02em;
  padding: clamp(10px,2.5vw,16px) 0;
  font-size: clamp(14px,2.2vw,18px);
}
#voice .voice-container{
  width:min(1100px,92vw);
  margin:0 auto;
  padding: clamp(24px,6vw,56px) 0;
}

/* 見出し */
#voice .voice-title{
  margin:0 0 clamp(16px,4vw,28px);
  text-align:center;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.02em;
  font-size: clamp(20px,3.4vw,32px);
}
#voice .em-underline{
  color:var(--accent);
  font-weight:900;
  background:linear-gradient(transparent 60%, rgba(21,85,165,.16) 0);
  padding:0 .1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* チェック付きリスト */
#voice .voice-reasons{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(10px,2.6vw,18px);
  grid-template-columns:1fr;
}
#voice .voice-reasons li{
  position:relative;
  padding: .6em .8em .6em 2.2em;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  line-height:1.55;
  font-size: clamp(13px,2.2vw,16px);
}
#voice .voice-reasons li::before{
  content:"";
  position:absolute; left:.8em; top:50%; transform:translateY(-50%);
  width:1.1em; height:1.1em; border-radius:50%;
  background: var(--check);
  box-shadow: 0 0 0 2px rgba(23,166,115,.12);
}
#voice .voice-reasons li::after{
  content:""; position:absolute; left:calc(.8em + .24em); top:50%;
  width:.5em; height:.3em; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform: translateY(-55%) rotate(-45deg);
}

/* 強調コピー */
#voice .voice-quote{
  margin: clamp(16px,5vw,36px) 0 clamp(24px,6vw,52px);
  text-align:center;
  font-weight:700;
  line-height:1.8;
  font-size: clamp(14px,2.4vw,18px);
}
#voice .hl-yellow{
  background:var(--yellow);
  padding:.02em .25em;
  border-radius:.12em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* 結果ブロック */
#voice .voice-stats{
  display:grid;
  gap: clamp(18px,3.2vw,28px);
  grid-template-columns: 1fr;
  margin-top: clamp(10px,3.2vw,16px);
}
#voice .stat{
  border:1px solid var(--line);
  border-radius:12px;
  background:#F8FAFD;
  padding: clamp(12px,2.6vw,18px);
}
#voice .stat figcaption{
  margin:0 0 .5em;
  font-weight:800;
  color:#243447;
  font-size: clamp(14px,2.4vw,18px);
}
#voice .chart-img{ display:block; width:100%; height:auto; }

/* 満足度大きな画像 */
#voice .voice-score{
  display:flex; justify-content:center;
  margin: clamp(12px,4.5vw,32px) 0;
}
#voice .score-img{ width:min(720px, 92%); height:auto; }

/* まとめ */
#voice .voice-note{
  text-align:center;
  color:#2a2a2a;
  font-size: clamp(13px,2.2vw,16px);
  line-height:1.8;
}
#voice .voice-note .keyline{
  font-weight:800;
  background:linear-gradient(transparent 70%, rgba(254,224,22,.6) 0);
  padding:.04em .15em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* レスポンシブ */
@media (min-width: 1024px){
  #voice .voice-reasons{ grid-template-columns:1fr 1fr; }
  #voice .voice-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px){
  #voice .pc{display:none;}
  #voice .sp{display:inline;}
}

/* PCだけ拡大（スマホは現状維持） */
@media (min-width: 1024px){

  /* ① 青い帯：NEXT RISE FX 入会者に聞いた… */
  #survey .survey-cap,
  .survey-cap{
    font-size: clamp(28px, 2.2vw, 40px) !important;  /* だいたい28〜40pxの範囲で自動可変 */
    line-height: 1.25;
    letter-spacing: .02em;
  }

  /* ② 黄色マーカーの強調文（2行とも） */
  #survey .impact-quote,
  .impact-quote{
    font-size: clamp(32px, 3.2vw, 56px) !important;  /* だいたい32〜56pxの範囲で自動可変 */
    line-height: 1.35;
    letter-spacing: .01em;
  }
}

/* ========== Learn セクション（見出し＋リード＋“5つ”） ========== */
:root{
  --learn-navy: #143B69;   /* 見出しの紺 */
  --learn-red:  #E60012;   /* “5つ”の赤 */
}

body:not(.wp-admin) #learn.learn-section{
  background:#fff;
  padding: clamp(36px, 7vw, 88px) 0 clamp(22px, 5vw, 54px);
  color:#0B0B0B;
  font-feature-settings: "palt";
}

body:not(.wp-admin) #learn .learn-container{
  width: min(1100px, 92vw);
  margin: 0 auto;
  text-align: center;
}

/* 上段：NEXT RISE FXで学ぶ（PCでしっかり大きく） */
body:not(.wp-admin) #learn .learn-title{
  margin: 0 0 clamp(10px, 2.6vw, 18px);
  color: var(--learn-navy);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  font-size: clamp(28px, 4.4vw, 64px);
}

/* 中段：なぜ〜が出来るのか？ */
body:not(.wp-admin) #learn .learn-lead{
  margin: 0 0 clamp(12px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  font-size: clamp(16px, 2.6vw, 28px);
}

/* 下段：“5つ”のサービスをご紹介（“5つ”だけ赤く強調） */
body:not(.wp-admin) #learn .learn-sub{
  margin: 0;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .01em;
  font-size: clamp(22px, 3.4vw, 38px);
}
body:not(.wp-admin) #learn .learn-sub .num{
  color: var(--learn-red);
  font-weight: 900;
}

/* スマホの窮屈さ軽減（375px帯で微調整） */
@media (max-width: 375px){
  #learn .learn-title{ font-size: 7vw; }
  #learn .learn-lead { font-size: 4.2vw; }
  #learn .learn-sub  { font-size: 5vw; }
}

/* ========== 5つのサービス：外枠レイアウト ==========
   画像は <img> の src を差し替えればOK
==================================================== */

/* ===== Service 01 共通色 ===== */
:root{
  --svc-navy: #0D2B53;
  --svc-white: #ffffff;
}

/* ===== セクション外枠 ===== */
#svc1.svc{
  background: var(--svc-navy);
  color: var(--svc-white);
  padding: clamp(28px, 6vw, 72px) 0;
}
#svc1 .svc__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;                /* ← 左右中央揃え（お手本どおりの左右マージン） */
}

/* ===== 1) ヘッダー（中央揃え） ===== */
#svc1 .svc__head{
  text-align: center;
}
#svc1 .svc__badge{
  width: clamp(88px, 9vw, 120px);
  height: clamp(88px, 9vw, 120px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  margin: 0 auto clamp(12px, 2.5vw, 20px);
}
#svc1 .svc__badge-top{
  font-size: clamp(12px, 1.6vw, 18px);
  line-height: 1;
  opacity: .95;
}
#svc1 .svc__badge-num{
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.05;
}
#svc1 .svc__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 4.4vw, 52px);
}
#svc1 .svc__subtitle{
  margin: .6em 0 0;
  font-size: clamp(13px, 1.7vw, 18px);
  opacity: .92;
}
#svc1 .svc__rule{
  width: 88%;
  margin: clamp(14px, 3.2vw, 28px) auto 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.38);
}

/* ===== 2) 本文（2カラム→SPで縦積み） ===== */
#svc1 .svc__body{
  display: grid;
  grid-template-columns: 1.05fr 1fr;   /* 左テキスト・右画像 */
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  margin: clamp(24px, 5.5vw, 60px) 0;
}
#svc1 .svc__lead{
  margin: 0 0 .8em;
  font-weight: 800;
  line-height: 1.7;
  font-size: clamp(18px, 2.3vw, 28px);
}
#svc1 .svc__list{
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: clamp(14px, 1.8vw, 18px);
}
#svc1 .svc__list li{ margin: .4em 0; }
#svc1 .svc__thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ===== 3) 下段コールアウト（白長方形 + 内側に長方形の線） ===== */
#svc1 .svc__note{
  position: relative;
  background: var(--svc-white);
  color: var(--svc-navy);
  border-radius: 10px;
  padding: clamp(14px, 2.6vw, 22px);
  margin: clamp(16px, 3.6vw, 44px) 0 0;
}
#svc1 .svc__note::before{
  content: "";
  position: absolute;
  inset: clamp(12px, 2vw, 18px);       /* ← “白長方形の内側に” 線を引く */
  border: 3px solid var(--svc-navy);
  border-radius: 8px;
  pointer-events: none;
}
#svc1 .svc__note p{
  margin: 0;
  text-align: center;
  font-weight: 800;
  line-height: 1.6;
  font-size: clamp(14px, 2.2vw, 22px);
}

/* ===== SP最適化 ===== */
@media (max-width: 900px){
  #svc1 .svc__body{ grid-template-columns: 1fr; }
  #svc1 .svc__thumb{ order: 2; }       /* 画像を下に */
  #svc1 .svc__copy{ order: 1; }
  #svc1 .svc__rule{ width: 100%; }
}

/* =========================================
   SVC 01 共通レイアウト（背景・内側幅）
   ========================================= */
#svc1.svc--navy{
  background:#0D2B53;  /* ネイビー */
  color:#fff;
  padding:24px;
}
#svc1 .svc__inner{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

/* =========================================
   1) ヘッダー：バッジ／タイトル／サブコピー
   ========================================= */
#svc1 .svc__head{
  /* バッジ | タイトル | サブコピー の3カラム */
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:clamp(12px,2.2vw,24px);
  row-gap:clamp(10px,1.6vw,16px);
}

/* バッジ（丸） */
#svc1 .svc__badge{
  display:grid;
  place-items:center;
  width:clamp(72px,7.8vw,110px);
  height:clamp(72px,7.8vw,110px);
  border:2px solid rgba(255,255,255,.6);
  border-radius:9999px;
  font-weight:800;
}
#svc1 .svc__badge-top{ font-size:clamp(10px,1.2vw,14px); line-height:1; }
#svc1 .svc__badge-num{ font-size:clamp(22px,2.6vw,36px); line-height:1; }

/* タイトル：テーマのh2装飾を無効化してネイビーのみ見せる */
#svc1 .svc__title{
  margin:0;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff;
  font-weight:900;
  font-size:clamp(28px,4.2vw,56px);
}

/* サブコピーは右寄せ（PC） */
#svc1 .svc__subtitle{
  margin:0;
  text-align:right;
  font-size:clamp(12px,1.4vw,16px);
  opacity:.95;
}

/* 仕切り線は全幅に */
#svc1 .svc__rule{
  grid-column:1 / -1;
  width:100%;
  margin-top:4px;
  border:0;
  border-top:1px solid rgba(255,255,255,.35);
}

/* =========================================
   2) 本文：左テキスト / 右画像
   ========================================= */
#svc1 .svc__body{
  display:grid;
  grid-template-columns:1.1fr 1fr;   /* ほんの少しテキスト広め */
  gap:clamp(20px,4vw,48px);
  align-items:start;
  margin-top:clamp(20px,5vw,56px);
}

#svc1 .svc__lead{
  margin:0 0 .6em;
  font-size:clamp(18px,2.4vw,28px);
  font-weight:800;
  line-height:1.8;
}

#svc1 .svc__list{
  margin:0;
  padding-left:1.1em;
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.9;
}

#svc1 .svc__thumb img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* =========================================
   3) ボトム：白地の二重枠ボックス
   ========================================= */
#svc1 .svc__note{ margin-top:clamp(24px,6vw,72px); }

#svc1 .svc__note-inner{
  background:#fff;
  color:#0D2B53;
  padding:clamp(16px,3vw,26px) clamp(16px,3.2vw,34px);
  border:1px solid rgba(13,43,83,.35);   /* 外周の薄い線 */
  box-shadow: inset 0 0 0 3px #0D2B53;   /* 内側に濃い線（=二重枠） */
  border-radius:8px;
  text-align:center;
  font-weight:800;
  font-size:clamp(16px,2vw,26px);
  line-height:1.7;
}

/* =========================================
   SP最適化（〜900px）
   ========================================= */
@media (max-width:900px){
  /* ヘッダーは縦積み＆中央寄せ */
  #svc1 .svc__head{
    grid-template-columns:1fr;
    text-align:center;
  }
  #svc1 .svc__subtitle{ text-align:center; }

  /* 本文は縦積み。画像は下に回すなら order を明示 */
  #svc1 .svc__body{ grid-template-columns:1fr; }
  #svc1 .svc__thumb{ order:2; }
}

#svc1 .svc__badge{
  margin-inline: auto !important;
  margin-block-end: 0 !important;
}

#svc1 .svc__body{
  margin-block-start: clamp(10px, 2.0vw, 20px) !important;  /* 以前: 28〜56px */
  margin-block-end:   clamp(14px, 2.4vw, 24px) !important;  /* 以前: 28〜56px */
}

#svc1 .svc__note {
    margin-top: clamp(24px, 6vw, 36px) !important;
}

/* サービス① バッジ調整 */
#svc1 .svc__badge{
  /* 上下の離れを詰める（もともと gap が大きい場合） */
  display: flex;                 /* 念のため指定 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em !important;         /* 以前が .3〜.4em ならここで圧縮 */
}

/* 「サービス」を少し大きく、行高もタイトに */
#svc1 .svc__badge-top{
  font-size: clamp(13px, 1.25vw, 18px) !important;
  line-height: 1.05 !important;
  letter-spacing: .06em;         /* 読みやすさを保つ微調整（任意） */
}

/* ─────────────────────────
   SVC-1 ヘッダー：SPで1行横並び
   タイトル16px／サブコピー8px
   ───────────────────────── */
@media (max-width: 900px){

  /* ヘッダーを3カラム（バッジ／タイトル／サブ） */
  #svc1 .svc__head{
    display: grid !important;
    grid-template-columns: clamp(56px, 14vw, 72px) 1fr auto; /* バッジ / タイトル / サブ */
    align-items: center;
    column-gap: 8px;
  }

  /* バッジ（左） */
  #svc1 .svc__badge{
    grid-column: 1 / 2;
    margin: 0;
  }

  /* タイトル（中央） */
  #svc1 .svc__title{
    grid-column: 2 / 3;
    margin: 0;
    font-size: clamp(15px, 4.1vw, 36px);              /* 指定どおり */
    font-weight: 900;
	margin-left:8px;
    line-height: 1.2;
    padding: 4px 8px;                 /* 背景帯がある場合の最小余白 */
	white-space: nowrap;              /* 強制的に1行表示 */
  }

  /* サブコピー（右）— 1行化してタイトルと同列へ */
  #svc1 .svc__subtitle{
    grid-column: 3 / 4;
    margin: 0;
    font-size: clamp(8px, 2.2vw, 14px);               /* 指定どおり */
    line-height: 1.6;
	text-align:right;
  }

  /* 罫線は全幅で下に回す */
  #svc1 .svc__rule{
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

/* =============================
   SERVICE 02  — 配色（白地 × ネイビー）
   ※ 既存の #svc1 用CSSには影響しません
   ============================= */
:root{
  --svc2-ink:  #0D2B53;          /* 見出し／枠線などの濃紺 */
  --svc2-line: #D9E3F2;          /* 罫線の淡色 */
  --svc2-badge-ring: rgba(13,43,83,.18);
}

#svc2.svc{
  background:#fff;               /* ← ②は白背景 */
  color:var(--svc2-ink);
  padding: clamp(28px, 6vw, 72px) 0;
}
#svc2 .svc__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* ============= 1) ヘッダー ============= */
/* 3カラム： [バッジ] [タイトル] [サブコピー] */
#svc2 .svc__head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:clamp(12px, 2.2vw, 28px);
  row-gap:clamp(8px, 1.2vw, 14px);
}

/* バッジ（円）…①と同じ見え方。中央の詰め感を近づけ */
#svc2 .svc__badge{
  display:grid;
  place-items:center;
  width: clamp(88px, 9vw, 120px);
  height: clamp(88px, 9vw, 120px);
  border-radius: 9999px;
  background: var(--svc2-ink);   /* ②は塗りつぶし */
  color:#fff;
  gap:.18em;                      /* 「サービス」と数字の間を詰める */
  position: relative;
}
#svc2 .svc__badge::after{        /* 外側の淡いリング（お手本風） */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: 0 0 0 4px var(--svc2-badge-ring) inset;
}
#svc2 .svc__badge-top{ font-weight:800; line-height:1.05; font-size: clamp(12px, 1.4vw, 18px); letter-spacing:.02em; }
#svc2 .svc__badge-num{ font-weight:800; line-height:1.0; font-size: clamp(22px, 3.4vw, 40px); }

/* タイトル：背景帯は不要・常に1行で収まる */
#svc2 .svc__title{
  margin:0;
  background:none !important;    /* ← 背景色を消す */
  border:none !important;
  box-shadow:none !important;
  color:var(--svc2-ink);
  font-weight:900;
  font-size: clamp(26px, 4.4vw, 52px);
  white-space: nowrap;           /* ← PCでも改行させない */
}

/* サブコピー：通常改行OK（右に回す） */
#svc2 .svc__subtitle{
  margin:0;
  text-align:right;
  font-weight:700;
  font-size: clamp(7px, 1.4vw, 16px);
  line-height:1.6;
  white-space: normal;           /* ← “改行されない”状態を解除 */
}

/* 罫線 */
#svc2 .svc__rule{
  grid-column:1 / -1;
  width:100%;
  margin-top: clamp(8px, 1.8vw, 14px);
  border:0;
  border-top:1px solid var(--svc2-line);
}

/* ============= 2) 本文（画像 左 ／ テキスト 右） ============= */
#svc2 .svc__body{
  display:grid;
  grid-template-columns: 1fr 1.05fr;  /* 画像ちょい広め → お手本に近いバランスなら 1.05fr 1fr に変更可 */
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  margin: clamp(24px, 5.5vw, 60px) 0;
}
#svc2 .svc__thumb img{
  width:100%; height:auto; display:block; border-radius:10px;
}
#svc2 .svc__copy .svc__lead{
  margin:0 0 .6em;
  font-weight:800;
  line-height:1.8;
  font-size: clamp(18px, 2.4vw, 28px);
}
#svc2 .svc__copy .svc__list{
  margin:0; padding-left:1.1em;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.9;
}

/* ============= 3) ボトムのコールアウト（白地に二重枠） ============= */
#svc2 .svc__note{ margin-top: clamp(24px, 6vw, 72px); }
#svc2 .svc__note-inner{
  background:#fff; color:var(--svc2-ink);
  padding:clamp(16px,3vw,26px) clamp(16px,3.2vw,34px);
  border:1px solid rgba(13,43,83,.28);
  box-shadow: inset 0 0 0 3px var(--svc2-ink);
  border-radius:8px;
  text-align:center;
  font-weight:800;
  line-height:1.7;
  /* スマホで1行に収めたい時はフォントを可変に */
  font-size: clamp(13px, 2.6vw, 22px);
}

/* ============= SP最適化（～900px） ============= */
@media (max-width:900px){
  /* ヘッダー：①と同様、1行横並び（バッジ／タイトル／サブ） */

  /* 本文は縦積み。画像→テキストの順にしたいなら order 指定も可 */
  #svc2 .svc__body{
    grid-template-columns:1fr;
    gap: clamp(16px, 4vw, 28px);
  }
  /* #svc2 .svc__thumb{ order:2; }  #svc2 .svc__copy{ order:1; } ← 並び替えたい時だけ使う */
}

/* ===== SVC2 本文の並び順を「テキスト → 画像」に ===== */
#svc2 .svc__body{
  /* 左：テキストを少し広め / 右：画像 */
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas: "copy thumb";
}
#svc2 .svc__copy{  grid-area: copy;  }
#svc2 .svc__thumb{ grid-area: thumb; }

/* SPでは縦積みでも「テキスト → 画像」の順に */
@media (max-width: 900px){
  #svc2 .svc__body{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "thumb";
  }
}

/* バッジ（丸） */
#svc2 .svc__badge{
  display:grid;
  place-items:center;
  width:clamp(72px,7.8vw,110px);
  height:clamp(72px,7.8vw,110px);
  border-radius:9999px;
  font-weight:800;
}

#svc2 .svc__badge{
  /* 上下の離れを詰める（もともと gap が大きい場合） */
  display: flex;                 /* 念のため指定 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em !important;         /* 以前が .3〜.4em ならここで圧縮 */
}

/* 「サービス」を少し大きく、行高もタイトに */
#svc2 .svc__badge-top{
  font-size: clamp(13px, 1.25vw, 18px) !important;
  line-height: 1.05 !important;
  letter-spacing: .06em;         /* 読みやすさを保つ微調整（任意） */
}

@media (max-width: 900px) {
    #svc2 .svc__title {
        grid-column: 2 / 3;
        margin: 0;
        font-size: clamp(15px, 4.1vw, 36px);
        font-weight: 900;
        margin-left: 8px;
        line-height: 1.2;
        padding: 4px 8px;
        white-space: nowrap;
    }
}

#svc2 .svc__note p{
  margin: 0;
  text-align: center;
  font-weight: 800;
  line-height: 1.6;
  font-size: clamp(14px, 2.2vw, 28px);
}

/* ===== SVC3：左列3カード ===== */
#svc3 .svc3-cards{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(10px, 1.8vw, 16px);
}
#svc3 .svc3-card{
  background:#fff;
  color:#0D2B53;
  border-radius:8px;
  padding:clamp(12px, 1.8vw, 16px) clamp(14px, 2.2vw, 22px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
#svc3 .svc3-card__ttl{
  margin:0 0 .25em;
  font-weight:800;
  font-size:clamp(16px, 1.8vw, 22px);
  line-height:1.25;
}
#svc3 .svc3-card__sub{
  margin:0;
  font-size:clamp(12px, 1.2vw, 14px);
  line-height:1.6;
}

/* ===== セクション外枠 ===== */
#svc3.svc{
  background: var(--svc-navy);
  color: var(--svc-white);
  padding: clamp(28px, 6vw, 72px) 0;
}
#svc3 .svc__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;                /* ← 左右中央揃え（お手本どおりの左右マージン） */
}

/* ===== 1) ヘッダー（中央揃え） ===== */
#svc3 .svc__head{
  text-align: center;
}
#svc3 .svc__badge{
  width: clamp(88px, 9vw, 120px);
  height: clamp(88px, 9vw, 120px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  margin: 0 auto clamp(12px, 2.5vw, 20px);
}
#svc3 .svc__badge-top{
  font-size: clamp(12px, 1.6vw, 18px);
  line-height: 1;
  opacity: .95;
}
#svc3 .svc__badge-num{
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.05;
}
#svc3 .svc__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 4.4vw, 52px);
}
#svc3 .svc__subtitle{
  margin: .6em 0 0;
  font-size: clamp(13px, 1.7vw, 18px);
  opacity: .92;
}
#svc3 .svc__rule{
  width: 88%;
  margin: clamp(14px, 3.2vw, 28px) auto 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.38);
}

/* ===== 2) 本文（2カラム→SPで縦積み） ===== */
#svc3 .svc__body{
  display: grid;
  grid-template-columns: 1.05fr 1fr;   /* 左テキスト・右画像 */
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  margin: clamp(24px, 5.5vw, 60px) 0;
}
#svc3 .svc__lead{
  margin: 0 0 .8em;
  font-weight: 800;
  line-height: 1.7;
  font-size: clamp(18px, 2.3vw, 28px);
}
#svc3 .svc__list{
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: clamp(14px, 1.8vw, 18px);
}
#svc3 .svc__list li{ margin: .4em 0; }
#svc3 .svc__thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ===== 3) 下段コールアウト（白長方形 + 内側に長方形の線） ===== */
#svc3 .svc__note{
  position: relative;
  background: var(--svc-white);
  color: var(--svc-navy);
  border-radius: 10px;
  padding: clamp(14px, 2.6vw, 22px);
  margin: clamp(16px, 3.6vw, 44px) 0 0;
}
#svc3 .svc__note::before{
  content: "";
  position: absolute;
  inset: clamp(12px, 2vw, 18px);       /* ← “白長方形の内側に” 線を引く */
  border-radius: 8px;
  pointer-events: none;
}
#svc3 .svc__note p{
  margin: 0;
  text-align: center;
  font-weight: 800;
  line-height: 1.6;
  font-size: clamp(14px, 2.2vw, 22px);
}

/* ===== SP最適化 ===== */
@media (max-width: 900px){
  #svc3 .svc__body{ grid-template-columns: 1fr; }
  #svc3 .svc__thumb{ order: 2; }       /* 画像を下に */
  #svc3 .svc__copy{ order: 1; }
  #svc3 .svc__rule{ width: 100%; }
}

/* =========================================
   SVC 01 共通レイアウト（背景・内側幅）
   ========================================= */
#svc3.svc--navy{
  background:#0D2B53;  /* ネイビー */
  color:#fff;
  padding:24px;
}
#svc3 .svc__inner{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

/* =========================================
   1) ヘッダー：バッジ／タイトル／サブコピー
   ========================================= */
#svc3 .svc__head{
  /* バッジ | タイトル | サブコピー の3カラム */
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:clamp(12px,2.2vw,24px);
  row-gap:clamp(10px,1.6vw,16px);
}

/* バッジ（丸） */
#svc3 .svc__badge{
  display:grid;
  place-items:center;
  width:clamp(72px,7.8vw,110px);
  height:clamp(72px,7.8vw,110px);
  border:2px solid rgba(255,255,255,.6);
  border-radius:9999px;
  font-weight:800;
}
#svc3 .svc__badge-top{ font-size:clamp(10px,1.2vw,14px); line-height:1; }
#svc3 .svc__badge-num{ font-size:clamp(22px,2.6vw,36px); line-height:1; }

/* タイトル：テーマのh2装飾を無効化してネイビーのみ見せる */
#svc3 .svc__title{
  margin:0;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff;
  font-weight:900;
  font-size:clamp(28px,4.2vw,56px);
}

/* サブコピーは右寄せ（PC） */
#svc3 .svc__subtitle{
  margin:0;
  text-align:right;
  font-size:clamp(12px,1.4vw,16px);
  opacity:.95;
}

/* 仕切り線は全幅に */
#svc3 .svc__rule{
  grid-column:1 / -1;
  width:100%;
  margin-top:4px;
  border:0;
  border-top:1px solid rgba(255,255,255,.35);
}

/* =========================================
   2) 本文：左テキスト / 右画像
   ========================================= */
#svc3 .svc__body{
  display:grid;
  grid-template-columns:1.1fr 1fr;   /* ほんの少しテキスト広め */
  gap:clamp(20px,4vw,48px);
  align-items:start;
  margin-top:clamp(20px,5vw,56px);
}

#svc3 .svc__lead{
  margin:0 0 .6em;
  font-size:clamp(18px,2.4vw,28px);
  font-weight:800;
  line-height:1.8;
}

#svc3 .svc__list{
  margin:0;
  padding-left:1.1em;
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.9;
}

#svc3 .svc__thumb img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* =========================================
   3) ボトム：白地の二重枠ボックス
   ========================================= */
#svc3 .svc__note{ margin-top:clamp(24px,6vw,72px); }

#svc3 .svc__note-inner{
  background:#fff;
  color:#0D2B53;
  padding:clamp(13px,3vw,26px) clamp(16px,3.2vw,34px);
  border:1px solid rgba(13,43,83,.35);   /* 外周の薄い線 */
  box-shadow: inset 0 0 0 3px #0D2B53;   /* 内側に濃い線（=二重枠） */
  border-radius:8px;
  text-align:center;
  font-weight:800;
  font-size:clamp(16px,2vw,26px);
  line-height:1.7;
}

/* =========================================
   SP最適化（〜900px）
   ========================================= */
@media (max-width:900px){
  /* ヘッダーは縦積み＆中央寄せ */
  #svc3 .svc__head{
    grid-template-columns:1fr;
    text-align:center;
  }
  #svc3 .svc__subtitle{ text-align:center; }

  /* 本文は縦積み。画像は下に回すなら order を明示 */
  #svc3 .svc__body{ grid-template-columns:1fr; }
  #svc3 .svc__thumb{ order:2; }
}

#svc3 .svc__badge{
  margin-inline: auto !important;
  margin-block-end: 0 !important;
}

#svc3 .svc__body{
  margin-block-start: clamp(10px, 2.0vw, 20px) !important;  /* 以前: 28〜56px */
  margin-block-end:   clamp(14px, 2.4vw, 24px) !important;  /* 以前: 28〜56px */
}

#svc3 .svc__note {
    margin-top: clamp(24px, 6vw, 36px) !important;
}

/* サービス① バッジ調整 */
#svc3 .svc__badge{
  /* 上下の離れを詰める（もともと gap が大きい場合） */
  display: flex;                 /* 念のため指定 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em !important;         /* 以前が .3〜.4em ならここで圧縮 */
}

/* 「サービス」を少し大きく、行高もタイトに */
#svc3 .svc__badge-top{
  font-size: clamp(13px, 1.25vw, 18px) !important;
  line-height: 1.05 !important;
  letter-spacing: .06em;         /* 読みやすさを保つ微調整（任意） */
}

/* ─────────────────────────
   SVC-1 ヘッダー：SPで1行横並び
   タイトル16px／サブコピー8px
   ───────────────────────── */
@media (max-width: 900px){

  /* ヘッダーを3カラム（バッジ／タイトル／サブ） */
  #svc3 .svc__head{
    display: grid !important;
    grid-template-columns: clamp(56px, 14vw, 72px) 1fr auto; /* バッジ / タイトル / サブ */
    align-items: center;
    column-gap: 8px;
  }

  /* バッジ（左） */
  #svc3 .svc__badge{
    grid-column: 1 / 2;
    margin: 0;
  }

  /* タイトル（中央） */
  #svc3 .svc__title{
    grid-column: 2 / 3;
    margin: 0;
    font-size: clamp(15px, 4.1vw, 36px);              /* 指定どおり */
    font-weight: 900;
    margin-left:8px;
    line-height: 1.2;
    padding: 4px 8px;                 /* 背景帯がある場合の最小余白 */
    white-space: nowrap;              /* 強制的に1行表示 */
  }

  /* サブコピー（右）— 1行化してタイトルと同列へ */
  #svc3 .svc__subtitle{
    grid-column: 3 / 4;
    margin: 0;
    font-size: clamp(8px, 2.2vw, 14px);               /* 指定どおり */
    line-height: 1.6;
    text-align:right;
  }

  /* 罫線は全幅で下に回す */
  #svc3 .svc__rule{
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

/* =============================
   SERVICE 04  — 配色（白地 × ネイビー）
   ※ 既存の #svc1 用CSSには影響しません
   ============================= */
:root{
  --svc4-ink:  #0D2B53;          /* 見出し／枠線などの濃紺 */
  --svc4-line: #D9E3F2;          /* 罫線の淡色 */
  --svc4-badge-ring: rgba(13,43,83,.18);
}

#svc4.svc{
  background:#fff;               /* ← ④は白背景 */
  color:var(--svc4-ink);
  padding: clamp(28px, 6vw, 72px) 0;
}
#svc4 .svc__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* ============= 1) ヘッダー ============= */
/* 3カラム： [バッジ] [タイトル] [サブコピー] */
#svc4 .svc__head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:clamp(12px, 2.2vw, 28px);
  row-gap:clamp(8px, 1.2vw, 14px);
}

/* バッジ（円）…①と同じ見え方。中央の詰め感を近づけ */
#svc4 .svc__badge{
  display:grid;
  place-items:center;
  width: clamp(88px, 9vw, 120px);
  height: clamp(88px, 9vw, 120px);
  border-radius: 9999px;
  background: var(--svc4-ink);   /* ④は塗りつぶし */
  color:#fff;
  gap:.18em;                      /* 「サービス」と数字の間を詰める */
  position: relative;
}
#svc4 .svc__badge::after{        /* 外側の淡いリング（お手本風） */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: 0 0 0 4px var(--svc4-badge-ring) inset;
}
#svc4 .svc__badge-top{ font-weight:800; line-height:1.05; font-size: clamp(12px, 1.4vw, 18px); letter-spacing:.02em; }
#svc4 .svc__badge-num{ font-weight:800; line-height:1.0; font-size: clamp(22px, 3.4vw, 40px); }

/* タイトル：背景帯は不要・常に1行で収まる */
#svc4 .svc__title{
  margin:0;
  background:none !important;    /* ← 背景色を消す */
  border:none !important;
  box-shadow:none !important;
  color:var(--svc4-ink);
  font-weight:900;
  font-size: clamp(26px, 4.4vw, 52px);
  white-space: nowrap;           /* ← PCでも改行させない */
}

/* サブコピー：通常改行OK（右に回す） */
#svc4 .svc__subtitle{
  margin:0;
  text-align:right;
  font-weight:700;
  font-size: clamp(7px, 1.4vw, 16px);
  line-height:1.6;
  white-space: normal;           /* ← “改行されない”状態を解除 */
}

/* 罫線 */
#svc4 .svc__rule{
  grid-column:1 / -1;
  width:100%;
  margin-top: clamp(8px, 1.8vw, 14px);
  border:0;
  border-top:1px solid var(--svc4-line);
}

/* ============= 2) 本文（画像 左 ／ テキスト 右） ============= */
#svc4 .svc__body{
  display:grid;
  grid-template-columns: 1fr 1.05fr;  /* 画像ちょい広め → お手本に近いバランスなら 1.05fr 1fr に変更可 */
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  margin: clamp(24px, 5.5vw, 60px) 0;
}
#svc4 .svc__thumb img{
  width:100%; height:auto; display:block; border-radius:10px;
}
#svc4 .svc__copy .svc__lead{
  margin:0 0 .6em;
  font-weight:800;
  line-height:1.8;
  font-size: clamp(18px, 2.4vw, 28px);
}
#svc4 .svc__copy .svc__list{
  margin:0; padding-left:1.1em;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.9;
}

/* ============= 3) ボトムのコールアウト（白地に二重枠） ============= */
#svc4 .svc__note{ margin-top: clamp(24px, 6vw, 72px); }
#svc4 .svc__note-inner{
  background:#fff; color:var(--svc4-ink);
  padding:clamp(16px,3vw,26px) clamp(16px,3.2vw,34px);
  border:1px solid rgba(13,43,83,.28);
  box-shadow: inset 0 0 0 3px var(--svc4-ink);
  border-radius:8px;
  text-align:center;
  font-weight:800;
  line-height:1.7;
  /* スマホで1行に収めたい時はフォントを可変に */
  font-size: clamp(13px, 2.6vw, 22px);
}

/* ============= SP最適化（～900px） ============= */
@media (max-width:900px){
  /* ヘッダー：①と同様、1行横並び（バッジ／タイトル／サブ） */

  /* 本文は縦積み。画像→テキストの順にしたいなら order 指定も可 */
  #svc4 .svc__body{
    grid-template-columns:1fr;
    gap: clamp(16px, 4vw, 28px);
  }
  /* #svc4 .svc__thumb{ order:2; }  #svc4 .svc__copy{ order:1; } ← 並び替えたい時だけ使う */
}

/* ===== SVC4 本文の並び順を「テキスト → 画像」に ===== */
#svc4 .svc__body{
  /* 左：テキストを少し広め / 右：画像 */
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas: "copy thumb";
}
#svc4 .svc__copy{  grid-area: copy;  }
#svc4 .svc__thumb{ grid-area: thumb; }

/* SPでは縦積みでも「テキスト → 画像」の順に */
@media (max-width: 900px){
  #svc4 .svc__body{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "thumb";
  }
}

/* バッジ（丸） */
#svc4 .svc__badge{
  display:grid;
  place-items:center;
  width:clamp(72px,7.8vw,110px);
  height:clamp(72px,7.8vw,110px);
  border-radius:9999px;
  font-weight:800;
}

#svc4 .svc__badge{
  /* 上下の離れを詰める（もともと gap が大きい場合） */
  display: flex;                 /* 念のため指定 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em !important;         /* 以前が .3〜.4em ならここで圧縮 */
}

/* 「サービス」を少し大きく、行高もタイトに */
#svc4 .svc__badge-top{
  font-size: clamp(13px, 1.25vw, 18px) !important;
  line-height: 1.05 !important;
  letter-spacing: .06em;         /* 読みやすさを保つ微調整（任意） */
}

@media (max-width: 900px) {
  #svc4 .svc__title {
    grid-column: 2 / 3;
    margin: 0;
    font-size: clamp(15px, 4.1vw, 36px);
    font-weight: 900;
    margin-left: 8px;
    line-height: 1.2;
    padding: 4px 8px;
    white-space: nowrap;
  }
}

#svc4 .svc__note p{
  margin: 0;
  text-align: center;
  font-weight: 800;
  line-height: 1.6;
  font-size: clamp(14px, 2.2vw, 28px);
}

/* ===== セクション外枠 ===== */
#svc5.svc{
  background: var(--svc-navy);
  color: var(--svc-white);
  padding: clamp(28px, 6vw, 72px) 0;
  margin-bottom:0px;
}
#svc5 .svc__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;                /* ← 左右中央揃え（お手本どおりの左右マージン） */
}

/* ===== 1) ヘッダー（中央揃え） ===== */
#svc5 .svc__head{
  text-align: center;
}
#svc5 .svc__badge{
  width: clamp(88px, 9vw, 120px);
  height: clamp(88px, 9vw, 120px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  margin: 0 auto clamp(12px, 2.5vw, 20px);
}
#svc5 .svc__badge-top{
  font-size: clamp(12px, 1.6vw, 18px);
  line-height: 1;
  opacity: .95;
}
#svc5 .svc__badge-num{
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.05;
}
#svc5 .svc__title{
  text-align:left;
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 4.4vw, 48px);
}
#svc5 .svc__subtitle{
  margin: .6em 0 0;
  font-size: clamp(13px, 1.7vw, 18px);
  opacity: .92;
}
#svc5 .svc__rule{
  width: 88%;
  margin: clamp(14px, 3.2vw, 28px) auto 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.38);
}

/* ===== 2) 本文（2カラム→SPで縦積み） ===== */
#svc5 .svc__body{
  display: grid;
  grid-template-columns: 1.05fr 1fr;   /* 左テキスト・右画像 */
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  margin: clamp(24px, 5.5vw, 60px) 0;
}
#svc5 .svc__lead{
  margin: 0 0 .8em;
  font-weight: 800;
  line-height: 1.7;
  font-size: clamp(18px, 2.3vw, 28px);
}
#svc5 .svc__list{
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: clamp(14px, 1.8vw, 18px);
}
#svc5 .svc__list li{ margin: .4em 0; }
#svc5 .svc__thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ===== 3) 下段コールアウト（白長方形 + 内側に長方形の線） ===== */
#svc5 .svc__note{
  position: relative;
  background: var(--svc-white);
  color: var(--svc-navy);
  border-radius: 10px;
  padding: clamp(14px, 2.6vw, 22px);
  margin: clamp(16px, 3.6vw, 44px) 0 0;
}
#svc5 .svc__note::before{
  content: "";
  position: absolute;
  inset: clamp(12px, 2vw, 18px);       /* ← “白長方形の内側に” 線を引く */
  border-radius: 8px;
  pointer-events: none;
}
#svc5 .svc__note p{
  margin: 0;
  text-align: center;
  font-weight: 800;
  line-height: 1.6;
  font-size: clamp(14px, 2.2vw, 22px);
}

/* ===== SP最適化 ===== */
@media (max-width: 900px){
  #svc5 .svc__body{ grid-template-columns: 1fr; }
  #svc5 .svc__thumb{ order: 2; }       /* 画像を下に */
  #svc5 .svc__copy{ order: 1; }
  #svc5 .svc__rule{ width: 100%; }
}

/* =========================================
   SVC 01 共通レイアウト（背景・内側幅）
   ========================================= */
#svc5.svc--navy{
  background:#0D2B53;  /* ネイビー */
  color:#fff;
  padding:24px;
}
#svc5 .svc__inner{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

/* =========================================
   1) ヘッダー：バッジ／タイトル／サブコピー
   ========================================= */
#svc5 .svc__head{
  /* バッジ | タイトル | サブコピー の3カラム */
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:clamp(12px,2.2vw,24px);
  row-gap:clamp(10px,1.6vw,16px);
}

/* バッジ（丸） */
#svc5 .svc__badge{
  display:grid;
  place-items:center;
  width:clamp(72px,7.8vw,110px);
  height:clamp(72px,7.8vw,110px);
  border:2px solid rgba(255,255,255,.6);
  border-radius:9999px;
  font-weight:800;
}
#svc5 .svc__badge-top{ font-size:clamp(10px,1.2vw,14px); line-height:1; }
#svc5 .svc__badge-num{ font-size:clamp(22px,2.6vw,36px); line-height:1; }

/* タイトル：テーマのh2装飾を無効化してネイビーのみ見せる */
#svc5 .svc__title{
  text-align:left;
  margin:0;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff;
  font-weight:900;
  font-size:clamp(28px,4.2vw,48px);
}

/* サブコピーは右寄せ（PC） */
#svc5 .svc__subtitle{
  margin:0;
  text-align:right;
  font-size:clamp(12px,1.4vw,16px);
  opacity:.95;
}

/* 仕切り線は全幅に */
#svc5 .svc__rule{
  grid-column:1 / -1;
  width:100%;
  margin-top:4px;
  border:0;
  border-top:1px solid rgba(255,255,255,.35);
}

/* =========================================
   2) 本文：左テキスト / 右画像
   ========================================= */
#svc5 .svc__body{
  display:grid;
  grid-template-columns:1.1fr 1fr;   /* ほんの少しテキスト広め */
  gap:clamp(20px,4vw,48px);
  align-items:start;
  margin-top:clamp(20px,5vw,56px);
}

#svc5 .svc__lead{
  margin:0 0 .6em;
  font-size:clamp(18px,2.4vw,28px);
  font-weight:800;
  line-height:1.8;
}

#svc5 .svc__list{
  margin:0;
  padding-left:1.1em;
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.9;
}

#svc5 .svc__thumb img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* =========================================
   3) ボトム：白地の二重枠ボックス
   ========================================= */
#svc5 .svc__note{ margin-top:clamp(24px,6vw,72px); }

#svc5 .svc__note-inner{
  background:#fff;
  color:#0D2B53;
  padding:clamp(16px,3vw,26px) clamp(16px,3.2vw,34px);
  border:1px solid rgba(13,43,83,.35);   /* 外周の薄い線 */
  box-shadow: inset 0 0 0 3px #0D2B53;   /* 内側に濃い線（=二重枠） */
  border-radius:8px;
  text-align:center;
  font-weight:800;
  font-size:clamp(16px,2vw,26px);
  line-height:1.7;
}

/* =========================================
   SP最適化（〜900px）
   ========================================= */
@media (max-width:900px){
  /* ヘッダーは縦積み＆中央寄せ */
  #svc5 .svc__head{
    grid-template-columns:1fr;
    text-align:center;
  }
  #svc5 .svc__subtitle{ text-align:center; }

  /* 本文は縦積み。画像は下に回すなら order を明示 */
  #svc5 .svc__body{ grid-template-columns:1fr; }
  #svc5 .svc__thumb{ order:2; }
}

#svc5 .svc__badge{
  margin-inline: auto !important;
  margin-block-end: 0 !important;
}

#svc5 .svc__body{
  margin-block-start: clamp(10px, 2.0vw, 20px) !important;  /* 以前: 28〜56px */
  margin-block-end:   clamp(14px, 2.4vw, 24px) !important;  /* 以前: 28〜56px */
}

#svc5 .svc__note {
    margin-top: clamp(24px, 6vw, 36px) !important;
}

/* サービス① バッジ調整 */
#svc5 .svc__badge{
  /* 上下の離れを詰める（もともと gap が大きい場合） */
  display: flex;                 /* 念のため指定 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em !important;         /* 以前が .3〜.4em ならここで圧縮 */
}

/* 「サービス」を少し大きく、行高もタイトに */
#svc5 .svc__badge-top{
  font-size: clamp(13px, 1.25vw, 18px) !important;
  line-height: 1.05 !important;
  letter-spacing: .06em;         /* 読みやすさを保つ微調整（任意） */
}

/* ─────────────────────────
   SVC-1 ヘッダー：SPで1行横並び
   タイトル16px／サブコピー8px
   ───────────────────────── */
@media (max-width: 900px){

  /* ヘッダーを3カラム（バッジ／タイトル／サブ） */
  #svc5 .svc__head{
    display: grid !important;
    grid-template-columns: clamp(56px, 14vw, 72px) 1fr auto; /* バッジ / タイトル / サブ */
    align-items: center;
    column-gap: 8px;
  }

  /* バッジ（左） */
  #svc5 .svc__badge{
    grid-column: 1 / 2;
    margin: 0;
  }

  /* タイトル（中央） */
  #svc5 .svc__title{
	text-align:left;
    grid-column: 2 / 3;
    margin: 0;
    font-size: clamp(15px, 4.1vw, 36px);              /* 指定どおり */
    font-weight: 900;
    margin-left:8px;
    line-height: 1.2;
    padding: 4px 8px;                 /* 背景帯がある場合の最小余白 */
    white-space: nowrap;              /* 強制的に1行表示 */
  }

  /* サブコピー（右）— 1行化してタイトルと同列へ */
  #svc5 .svc__subtitle{
    grid-column: 3 / 4;
    margin: 0;
    font-size: clamp(8px, 2.2vw, 14px);               /* 指定どおり */
    line-height: 1.6;
    text-align:right;
  }

  /* 罫線は全幅で下に回す */
  #svc5 .svc__rule{
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

/* =============================
   PRICING (2 sections)
   ※ 既存CSSに干渉しないよう .plan-* でプレフィックス統一
   ============================= */
:root{
  --plan-ink: #0D2B53;
  --plan-bg:  #EAF2F9;      /* セクションの淡いブルー */
  --plan-white: #fff;
  --plan-red: #E60012;      /* 価格の赤 */
  --plan-line: rgba(13,43,83,.35);
}

.plan-section{
  background: var(--plan-bg);
}
.plan__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* 各カード（2つ） */
.plan-card{
  color: var(--plan-ink);
}
.plan-card:last-of-type{
  border-bottom: none;
}

/* 見出し：中央タイトル＋左右の細線 */
.plan-card__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  margin-bottom: clamp(16px, 3vw, 24px);
}
.plan-card__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 40px);
  letter-spacing: .02em;
  white-space: nowrap; /* PCで折り返さない */
}
.plan-card__hr{
  height: 1px;
  background: var(--plan-line);
  display: block;
}

/* 価格ブロック（白い帯） */
.plan-card__hero{
  background: rgba(255,255,255,.72);
  border-radius: 6px;
  padding: clamp(14px, 2.6vw, 24px) clamp(16px, 3vw, 30px);
  margin: clamp(12px, 2.6vw, 24px) 0 clamp(16px, 3vw, 28px);
}
.plan-row{
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1.4vw, 16px);
  line-height: 1.15;
}
.plan-row + .plan-row{ margin-top: clamp(10px, 1.8vw, 16px); }

.plan-row__label{
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 32px);
}
.plan-row__price{
  font-weight: 900;
  color: var(--plan-red);
  font-size: clamp(32px, 6.6vw, 80px);
  letter-spacing: .02em;
}
.plan-row__price em{
  font-style: normal;
  font-size: 1.0em;
}
.plan-row__tax{
  font-size: clamp(12px, 1.4vw, 16px);
  margin-left: .25em;
}

/* 小見出し */
.plan-card__sub{
  margin: clamp(12px, 2.2vw, 18px) 0 clamp(10px, 2vw, 16px);
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
}

/* 特徴リスト：2カラム（SPも2カラムのまま） */
.plan-features{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.6vw, 14px) clamp(18px, 3vw, 28px);
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.6;
}
.plan-features li{
  position: relative;
  padding-left: 1.1em;
}
.plan-features li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* ============ SP最適化（〜900px） ============ */
@media (max-width: 900px){
  .plan-card__title{ font-size: clamp(18px, 5vw, 26px); }
  .plan-card__head{ gap: 10px; }

  /* SPでも特徴は2カラムのままお手本寄せ */
  .plan-features{
    gap: 10px 22px;
    font-size: clamp(14px, 4.2vw, 18px);
  }
}

/* plans セクション内の見出しだけ装飾オフ */
#plans h3.plan-card__title,
#plans h4.plan-card__sub{
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(20px, 3.2vw, 44px);
}

/* ← plans セクションだけに効かせる */
#plans .plan-card__head{
  display: flex;               /* 横並び */
  align-items: center;         /* 子要素を上下中央に */
  gap: clamp(12px, 2vw, 24px);
}

/* 左右の細線 */
#plans .plan-card__hr{
  flex: 1 1 auto;              /* 伸びる線にする（等間隔）*/
  height: 1px;
  background: var(--plan-line);
  align-self: center;          /* 念のため、個別にも中央に */
  /* 視覚的な微調整が必要なら下の1行を 0〜0.1em 程度で調整 */
  /* transform: translateY(.06em); */
}

/* 見出しテキスト */
#plans .plan-card__title{
  margin: 0;
  line-height: 1.1;            /* 行高を詰めると“中心”がより自然に見える */
  font-weight: 900;
}

/* 既存の全体色は消して、カードごとに全幅背景を敷く */
.plan-section{
  background: transparent;   /* ← ここを透明に */
}

/* 色の定義（好みで調整可） */
:root{
  --plan-bg-top:    #EAF2F9; /* 上の淡いブルー */
  --plan-bg-bottom: #DCE8F2; /* 下の少し濃いブルー */
}

/* カードを擬似要素の基準にする */
.plan-card{
  position: relative;
  z-index: 0;
}

/* カードごとに“画面幅”の背景を敷く（左右いっぱい） */
.plan-card::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;                 /* 画面幅ちょうど */
  transform: translateX(-50%);  /* センタリング */
  background: var(--card-bg, var(--plan-bg-top));
  z-index: -1;                  /* 本体の背面に */
  pointer-events: none;
}

/* 各カードの色を指定（IDは今のHTMLに合わせて） */
#plan-basic{
	--card-bg: var(--plan-bg-top); 
	padding-top:40px;
	padding-bottom:40px;
}
#plan-plus { 
	--card-bg: var(--plan-bg-bottom); 
	padding-top:40px;
	padding-bottom:40px;
}

/* （お好みで）カード間の境界線が要らなければ消す */
.plan-card:last-of-type{ border-bottom: none; }

/* タイトル行の線を常にテキスト“中央”に合わせる（念のため） */
.plan-card__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;          /* ← 垂直センターでhrと見出しを揃える */
  gap: clamp(12px, 2vw, 24px);
}
.plan-card__hr{
  height: 2px;                  /* 少し太めの方が見えやすい */
  background: var(--plan-line);
  display: block;
  align-self: center;           /* 念押しで中央合わせ */
}

.plan-features{
	margin-bottom:0px !important;
}

/* =========== 勉強会の流れ（flow） =========== */
:root{
  --flow-ink:   #0D2B53;                 /* 文字色 */
  --flow-blue:  #13527F;                 /* 左パネルのブルー */
  --flow-navy:  #0D2B53;                 /* 濃紺（枠線など） */
  --flow-line:  rgba(13,43,83,.30);      /* 薄い枠線 */
  --flow-white: #fff;
}

.flow-section{
  background:#fff;
  color:var(--flow-ink);
}
.flow__inner{
  width:min(1100px, 92vw);
  margin-inline:auto;
}
.flow__title{
  margin:0 0 clamp(16px,3vw,24px);
  text-align:center;
  font-weight:900;
  font-size: clamp(24px, 4.4vw, 48px) !important;
  letter-spacing:.02em;
}

/* カード本体：PCは左右2カラム、SPは縦積み */
.flow-card{
  display:grid;
  grid-template-columns: 0.42fr 1fr;  /* 左少し狭め */
  gap: clamp(14px, 3vw, 26px);
  align-items: stretch;
  margin-top: clamp(18px, 3.6vw, 28px);
}

/* 左パネル（ブルー） */
.flow-card__panel--left{
  position:relative;
  border-radius: 10px;
  padding: clamp(16px, 2.8vw, 22px);
  color:#fff;
  background: linear-gradient(180deg, var(--flow-blue) 0%, var(--flow-navy) 100%);
  overflow:hidden;
}
.flow-card__heading{
  margin:0;
  text-align:center;
  font-weight:900;
  font-size: clamp(20px, 2.8vw, 30px);
  letter-spacing:.08em;
}
.flow-card__heading::after{
  content:"";
  display:block;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.35);
  margin: clamp(8px,1.4vw,10px) 0 clamp(10px,1.8vw,14px);
}
.flow-card__sub{
  margin:0 0 clamp(6px,1.6vw,10px);
  text-align:center;
  opacity:.9;
  font-size: 14px;
}
.flow-card__thumb{
  position:absolute;
  right: clamp(8px,1.6vw,14px);
  bottom: clamp(8px,1.6vw,14px);
  width: min(46%, 210px);
}
.flow-card__thumb img{
  display:block;
  width:100%;
  height:auto;
}

/* 右パネル（白ボックス） */
.flow-card__panel--right{
  background: var(--flow-white);
  border: 1px solid var(--flow-line);
  box-shadow: inset 0 0 0 2px var(--flow-navy);
  border-radius: 10px;
  padding: clamp(14px, 2.6vw, 22px);
}

/* 箇条書き（・を擬似要素で） */
.flow-card__list{
  margin:0;
  padding:0;
  list-style:none;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height:1.9;
  padding-left:0px !important;
}
.flow-card__list li{
  position:relative;
  padding-left: 1.2em;
}
.flow-card__list li + li{ margin-top:.25em; }
.flow-card__list li::before{
  content:"・";
  position:absolute;
  left:0; top:0;
}

/* 小さめの注釈ラベル */
.flow-card__note{
  display:inline-block;
  margin-top: clamp(10px, 1.8vw, 14px);
  padding: .4em .9em;
  border: 1px solid var(--flow-navy);
  border-radius: 6px;
  font-size: clamp(12px, 1.6vw, 14px);
  background:#fff;
}

/* 余白最終調整 */
.flow-card:first-of-type{ margin-top: clamp(20px, 4vw, 32px); }

/* --------------- SP（〜900px） --------------- */
@media (max-width:900px){
  .flow-card{
    grid-template-columns: 1fr;
  }
  .flow-card__thumb{
    position:static;
    width:min(60%, 220px);
    margin: clamp(6px,2vw,10px) auto 0;
  }
  .flow-card__panel--right{
    padding: clamp(12px, 4vw, 18px);
  }
}

.flow-card__heading {
    border-left: none !important;
    border-right: none !important; 
    border-top: none !important; 
    border-bottom: none !important; 
	margin-bottom:0px !important;
	font-size: clamp(18px, 4vw, 36px);
}

/* ===== Curriculum section ===== */
:root{
  --curr-ink:  #0D2B53;
  --curr-line: rgba(13,43,83,.45);
  --curr-white:#fff;
}

.curr-section{
  /* ページ背景に合わせて余白のみ付与（背景色は触らない） */
  padding: clamp(28px, 6vw, 72px) 0;
  color: var(--curr-ink);
}

.curr__inner{
  width: min(1100px, 92vw);
  margin-inline: auto;
}

/* 見出し：中央 + 左右細線（お手本の「— 〜 —」の見た目） */
.curr__title{
  margin: 0 0 clamp(16px, 3vw, 24px);
  text-align: center;
  font-weight: 900;
  font-size: clamp(16px, 4.2vw, 36px) !important;
  letter-spacing: .02em;
  display: inline-grid;                  /* 疑似要素の左右線を揃える */
  grid-auto-flow: column;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  width:100%;
}

.curr__title::before,
.curr__title::after{
  content: "";
  height: 2px;
  width: clamp(64px, 12vw, 160px);
  background: var(--curr-line);
  display: block;
}

/* ===== course section ===== */
:root{
  --course-ink:  #0D2B53;
  --course-line: rgba(13,43,83,.45);
}

.course-section{
  padding: clamp(28px, 6vw, 72px) 0;
  color: var(--course-ink);
}
.course__inner{
  width: min(1100px, 92vw);
  margin-inline: auto;
}

/* 見出し：中央 + 左右細線 */
.course__title{
  margin: 0 0 clamp(16px, 3vw, 24px);
  text-align: center;
  font-weight: 900;
  font-size: clamp(22px, 4.2vw, 40px) !important;
  letter-spacing: .02em;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  width:100%;
}
.course__title::before,
.course__title::after{
  content:"";
  height: 2px;
  width: clamp(64px, 12vw, 160px);
  background: var(--course-line);
  display:block;
}

/* 本文：テキスト + 画像 */
.course__body{
  display: grid;
  grid-template-columns: 1fr 1.15fr; /* 右（画像）を少し広め */
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}
.course-section.is-reverse .course__body{
  grid-template-columns: 1.15fr 1fr; /* 画像→テキストの順にしたい時 */
}
.course-section.is-reverse .course__text{ order: 2; }
.course-section.is-reverse .course__figure{ order: 1; }

.course__lead{
  margin: 0 0 .6em;
  font-weight: 800;
  line-height: 1.8;
  font-size: clamp(16px, 2.2vw, 22px) !important;
}
.course__points{
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.9;
  font-size: clamp(14px, 1.8vw, 18px) !important;
}

/* SP：縦積み */
@media (max-width: 900px){
  .course__body{
    grid-template-columns: 1fr;
  }
  .course-section.is-reverse .course__text{ order: 0; }
  .course-section.is-reverse .course__figure{ order: 0; }
}

.course-section{
	background-color:var(--course-ink);
}

/* ===== Mission section ===== */
:root{
  --mission-ink: #0D2B53;
  --mission-gray: #4A4A4A;
  --mission-muted: #6F7A85;
  --mission-accent: #F4831F;   /* 見出しオレンジ */
  --mission-blue:  #2E5AA3;
  --mission-green: #20A16C;
  --mission-orange:#F2993A;
  --mission-red:   #E2544A;
}

.mission{
  background:#fff;
  color:var(--mission-ink);
}
.mission__inner{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

/* キャッチ */
.mission__catch{
  margin:0 0 .6em;
  color:var(--mission-accent);
  font-weight:900;
  line-height:1.35;
  font-size: clamp(22px, 3.6vw, 36px);
  letter-spacing:.01em;
}
.mission__credit{
  margin:0 0 clamp(16px, 2.6vw, 24px);
  text-align:right;
  color:var(--mission-muted);
  font-size: clamp(11px, 1.4vw, 14px);
}

/* リード（左の短い線は擬似要素） */
.mission__lead{
  position:relative;
  padding-left: clamp(44px, 6vw, 64px);
  color:#222;
  font-size: clamp(13px, 1.8vw, 18px);
  line-height:1.9;
  margin: 0 0 clamp(18px, 3vw, 28px);
}
.mission__lead::before{
  content:"";
  position:absolute;
  left:0; top:.85em;
  width: clamp(38px, 5vw, 56px);
  height:2px;
  background:#1B2B3C;
}

/* 強調コピー */
.mission__strong{
  text-align:center;
  font-weight:900;
  line-height:1.55;
  font-size: clamp(18px, 2.8vw, 26px);
  margin: 0 0 clamp(14px, 2.6vw, 22px);
}

/* 下線付きコピー（長めの青アンダーライン） */
.mission__underline{
  position:relative;
  font-weight:700;
  text-align:left;
  line-height:1.8;
  font-size: clamp(14px, 2vw, 18px);
  margin: 0 0 clamp(22px, 4vw, 34px);
}
.mission__underline::after{
  content:"";
  display:block;
  height:3px;
  width: clamp(280px, 55vw, 620px);  /* 画像の“長めの下線”感 */
  background:#1F62C7;
  margin-top:6px;
}

/* 丸バッジ 4つ */
.mission__pillset{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2.6vw, 24px);
  justify-items:center;
  align-items:start;
}
.pill{
  display:grid;
  place-items:center;
  width: clamp(110px, 15vw, 160px);
  aspect-ratio:1/1;
  border-radius:9999px;
  color:#fff;
  text-align:center;
  line-height:1.35;
  box-shadow: 0 6px 14px rgba(0,0,0,.12), inset 0 0 0 3px rgba(255,255,255,.18);
}
.pill span{
  font-weight:900;
  font-size: clamp(14px, 2.1vw, 18px);
}
.pill--blue{   background: var(--mission-blue); }
.pill--green{  background: var(--mission-green); }
.pill--orange{ background: var(--mission-orange); }
.pill--red{    background: var(--mission-red); }

.mission__note{
  text-align:center;
  color:var(--mission-muted);
  font-size: clamp(12px, 1.7vw, 14px);
  margin: clamp(16px, 3vw, 24px) 0 clamp(20px, 4vw, 36px);
}

/* クローズ */
.mission__closing{
  text-align:center;
  font-weight:900;
  line-height:1.6;
  font-size: clamp(18px, 2.8vw, 26px);
  margin: 0 0 clamp(14px, 2.4vw, 22px);
}
.mission__footer{
  text-align:center;
  font-size: clamp(16px, 2.2vw, 20px);
}

/* SP最適化 */
@media (max-width: 900px){
  .mission__pillset{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   MISSION セクション：見た目チューニング（上書き用）
   ========================================= */

/* 全体の横幅をやや絞って情報密度UP */
#mission .mission__inner{ width:min(980px, 92vw); }

/* 1) オレンジ見出し：行間と幅を整えて中央にドン */
#mission .mission__catch{
  max-width: 28ch;               /* 見出し幅を絞って読みやすく */
  margin: 0 auto .5em;           /* 中央寄せ */
  line-height: 1.4;
  letter-spacing: .01em;
  font-size: clamp(18px, 3.4vw, 34px);
}

/* 右肩クレジットは見出しと同じ列幅で右寄せ */
/* MISSION：クレジットを右端に寄せる */
#mission .mission__credit{
  width: auto;                 /* 固定幅を解除 */
  margin: .25rem 0 1.75rem auto; /* 右端へ（左を自動 / 右0） */
  text-align: right;           /* 文字も右寄せ */
  display: block;
}


/* 2) リード文：幅を制限・色も少し濃すぎないトーンに */
#mission .mission__lead{
  width: min(62ch, 92vw);
  margin: 0 auto 1.6rem;
  color: #3b4350;
  line-height: 1.9;
}
/* 左の短い罫線を薄めのブルーで上品に */
#mission .mission__lead::before{
  left: -6px;
  top: .9em;
  width: clamp(32px, 7vw, 60px);
  height: 2px;
  background: #9fb3c8;
}

/* 3) 中央の強調コピー：幅を絞り、濃紺でキリッと */
#mission .mission__strong{
  width: min(32ch, 92vw);
  margin: 0 auto 1.2rem;
  color: #173c78;
  letter-spacing: .01em;
  line-height: 1.55;
}

/* 4) 下線コピー：本文幅で中央に。下線は100%でスッと */
#mission .mission__underline{
  width: min(62ch, 92vw);
  margin: 0 auto 2rem;
}
#mission .mission__underline::after{
  width: 100%;
  height: 2px;
  background: #2f6bdc;
  opacity: .85;
}

/* 5) 丸バッジ：サイズ/影/間隔を調整して整列感アップ */
#mission .mission__pillset{
  width: min(980px, 92vw);
  margin: 0 auto;
  gap: clamp(18px, 3vw, 32px);
}
#mission .pill{
  width: clamp(120px, 14vw, 160px);
  box-shadow:
    0 10px 20px rgba(8,25,48,.12),
    inset 0 0 0 2px rgba(255,255,255,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
#mission .pill span{ font-size: clamp(14px, 1.8vw, 18px); }
@media (hover:hover){
  #mission .pill:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(8,25,48,.18),
                inset 0 0 0 2px rgba(255,255,255,.12);
  }
}

/* 6) 補足文/締めのコピー：中央揃えで読みやすい幅に */
#mission .mission__note{
  width: min(62ch, 92vw);
  margin: 18px auto 32px;
  color: #6f7a85;
}
#mission .mission__closing,
#mission .mission__footer{
  width: min(40ch, 92vw);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* SP最適化：丸バッジは2列にして詰まりすぎを回避 */
@media (max-width: 900px){
  #mission .mission__pillset{ grid-template-columns: repeat(2, 1fr); }
}

/* =============================
   FAQ — 基本トークン（既存があれば自動で拾う）
   ============================= */
:root{
  --faq-ink:  var(--svc-navy, #0D2B53);
  --faq-line: var(--plan-line, rgba(13,43,83,.28));
  --faq-bg:   #fff;
  --faq-dot:  rgba(13,43,83,.25);
  --faq-a:    #F4A200;  /* Aバッジ */
  --faq-q:    #BFC7D5;  /* Qバッジ(薄グレー) */
}

/* 外枠は既存セクションと同等の幅・余白に */
.faq{ background: transparent; }
.faq__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* 見出し */
.faq__title{
  margin: 0 0 clamp(16px, 3.2vw, 24px);
  text-align: center;
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 40px);
  letter-spacing: .02em;
  color: var(--faq-ink);
}

/* リスト */
.faq__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(12px, 2.4vw, 20px);
}

/* カード */
.faq__item{
  background: var(--faq-bg);
  border: 2px solid var(--faq-line);
  border-radius: 10px;
  padding: clamp(14px, 2.6vw, 22px);
}

/* Q 行 */
.faq__q{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(10px, 2vw, 14px);
  padding-bottom: clamp(8px, 1.8vw, 12px);
  border-bottom: 1px dotted var(--faq-dot); /* スクショの細い罫線 */
}
.faq__qtext{
  margin: 0;
  font-weight: 800;
  font-size: clamp(16px, 2.6vw, 22px);
  color: var(--faq-ink);
}

/* A 行 */
.faq__a{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: clamp(10px, 2vw, 14px);
  padding-top: clamp(10px, 2vw, 14px);
}
.faq__atext{
  line-height: 1.9;
  font-size: clamp(14px, 2.2vw, 18px);
  color: #1a1a1a;
}

/* Q/A バッジ（丸） */
.faq__badge{
  display: grid; place-items: center;
  width: clamp(28px, 4.6vw, 36px);
  height: clamp(28px, 4.6vw, 36px);
  border-radius: 9999px;
  font-weight: 900;
  color: #fff;
}
.faq__badge.is-q{ background: var(--faq-q);  color:#fff; }
.faq__badge.is-a{ background: var(--faq-a);  color:#fff; }

/* SP 微調整 */
@media (max-width: 900px){
  .faq__title{ font-size: clamp(20px, 5.8vw, 28px); }
}

.faq__qtext {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
	margin-bottom:0px !important;
}

.faq__list{
	padding-left:0px !important;
}

.faq__qtext{
	padding-left:0px !important;
}