@charset "UTF-8";

/* =========================================================================
   lp_kiso.css ── 工学知識きその基礎講座（kiso）専用LPスタイル
   作成: 2026-08-26 ／ 複製元: lp_jusi.css（樹脂部品設計入門・2026-08-25完成版）
   ─────────────────────────────────────────────────────────────────────────
   対象ページ（テストサイト monoweb.org）:
     LP 9903 kiso_top ／ お申込み 9937 kiso_paidseminar-order
     ／ お問い合わせ 9933 kiso_ask
   商品ID: 個人（一括）29(course05_p) ／ 法人・人数指定 30(course05_com)
   ※関連ページ: サンプル動画 kiso_sample ／ 受講者の声 kiso_voice
     ／ よくある質問 kiso_qa（★スラッグは `kiso_faq` ではない・404）
     ／ カリキュラム詳細 9912 kiso_curriculum

   複製時に変えたところ:
     1. #jusi-order → #kiso-order ／ #jusi → #kiso
     2. 複製元の接頭辞 → ki-（クラス・カスタムプロパティとも）。
        実行前に、接頭辞の直前が英数字の箇所が0件であることを確認済み
     3. --lp-accent* 6変数を #468cff（青）系に。
        旧LP style_kiso.css の主色で、色ヒストグラム実測24回と最多だった
        （濃い側の #2a6ddb も旧CSSに実在するので --lp-accent-dark に流用）
     4. filter 2式を青用に再計算（.lp-form .ttl img は #0989B1 から／
        #faq-sec .faq-icon は black から。元色が違うので式は別物。使い回さないこと）
        canvas に実SVGを描いて総当たり検証済み・目標色との距離0（8ファイルすべて）
     5. .faqm-theme--jusi → .lp-body .faqm-theme--kiso（#468cff / #2a6ddb）
     6. セクション背景を薄青の交互配色に
     7. rgba(0,166,74,α)（複製元アクセントの薄い影・罫線・フォーカスリング）を
        rgba(70,140,255,α) に
     8. カリキュラム図は複製元ゆずりの `.ki-cur__fig`（<picture> でPC/SP出し分け）。
        kiso も 1章 = PC 998×444 ＋ SP 640×1093 の【ペア方式】で
        複製元と寸法が完全に一致するため、そのまま使える（実測・2026-08-26）
        4枚横並びの `.curriculum-accordion__slide-strip` 一式はデッドコード
     9. `.curriculum-accordion__number` の min-width は複製元のまま 88px（SP 74px）。
        kiso は枝番が無い（第1〜6章）ので 68px でも足りるが、揃えて残してある

   ★アクセント色を変えるときは6変数と filter 2式を必ずセットで直すこと。

   ★このLP特有の前提（着手メモ §1 ／ 2026-08-26 アース判断）── 他14講座と違う点:
     ・【割引ゼロ】定価＝販売価格＝4,378円（税別3,980円）。
       cp_bar の「定価より20%OFF」帯と追従カートの `期間限定[discount_rate]` は
       【出さない】。追従カートは価格1本のみ
     ・【分割払いの商品が存在しない】。#price は 一括＋法人の【2カード】。
       旧LPのFAQにも「本商品は一括払いのみ」と明記されている
     ・【実質0円クーポン】が本講座最大の訴求。購入者用メルマガで4,378円分の
       クーポンを配布し、他の有料サービスに使えば実質0円になる。
       また他のすべての有料サービスには本講座が特典として付属している。
       → ヒーロー直下に専用バンド `.ki-coupon` を置く（アース判断）
     ・カリキュラムは【全6章】（単位／規格／数学／力学／形状／道具）
     ・カリキュラム画像のファイル名は `curiculum1.png` 〜 `curiculum6.png`
       （r が1つ足りないタイポ。サーバー上の実ファイル名なので直さない）
     ・サンプル動画は【4本】（第1・3・4・5章）
   ========================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

a {
  transition: all .1s ease-in-out;
}

/* 260722 ヘッダーのキャッチコピーを本文テキストへ移設（案A）／260724 レイアウト確定
   本文先頭の .lp-hero を CSS order で最上部へ。旧 is-pc/is-sp は本文から削除済み、講座名帯(.lp-mv h2)は据置。
   PC: 左の大コピー(40px・3行)を画像の上に重ね、右にイラスト(高さ434px=企画発想編と同高)。青/白の斜め背景(54%)で区切る。
   旧背景画像 bg_mv.png は .lp-mv から除去。色は 強調#0989B1・「！」#E8552A・地#EFF7FC・ピル#E9EEF1。
   スマホ(767以下)は縦積みにリセット（★実機確認要）。 */
.lp-body main > .lp-hero{ order: -2; }
.lp-hero{
  position:relative;
  background:
    linear-gradient(
      112deg,
      #EFF7FC 0%,
      #EFF7FC 42%,
      rgba(239,247,252,.92) 50%,
      rgba(247,251,253,.55) 61%,
      rgba(255,255,255,0) 72%
    ),
    repeating-linear-gradient(0deg, rgba(70,110,140,.10) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(70,110,140,.10) 0 1px, transparent 1px 28px),
    #ffffff;
}  /* 左=薄水色／中央=柔らかな移行／右=白＋CAD風グリッド(28px) */
.lp-hero__inner{ position:relative; max-width:960px; margin:0 auto; display:flex; justify-content:flex-end; align-items:flex-end; padding:30px 14px 0; box-sizing:border-box; }
.lp-hero__illust{ flex:0 0 auto; align-self:flex-end; }  /* z-index無し: スマホでカートバー(.float_cart_sp z:auto)より前面に出る不具合を回避。PCの重ねは .lp-hero__text z-index:2 で成立 */
.lp-hero__illust img{ display:block; height:434px; width:auto; max-width:none; }
.lp-hero__text{ position:absolute; left:14px; top:24px; bottom:62px; width:760px; max-width:calc(100% - 28px); display:flex; flex-direction:column; justify-content:center; padding-bottom:24px; transform:translateY(-20px); z-index:2; }
.lp-hero__lead{ font-size:19px; line-height:1.75; font-weight:700; color:#3d4b5a; margin:0 0 22px; text-align:left; }
.lp-hero__title{ font-size:42px; line-height:1.5; font-weight:800; color:#16223a; margin:0; text-align:left; }
.lp-hero__title .hl{ color:var(--lp-accent); }
.lp-hero__title .ex{ color:#E8552A; }
.lp-hero__note{ position:absolute; left:calc(50% - 466px); bottom:30px; display:inline-block; background:#E9EEF1; color:#3d4b5a; font-size:17px; font-weight:700; padding:12px 22px; border-radius:12px; margin:0; z-index:3; }  /* 左寄せ: 960中央基準で左端+14pxに合わせる */
.lp-mv{ background-image:none; padding-top:0; }
@media (max-width:767px){
  .lp-hero{ background:#EFF7FC; }
  .lp-hero__inner{ display:block; padding:20px 16px 0; }
  .lp-hero__text{ position:static; width:auto; max-width:none; padding:0; transform:none; }
  .lp-hero__title{ font-size:24px; line-height:1.5; }
  .lp-hero__lead{ font-size:15px; margin:0 0 14px; }
  .lp-hero__illust{ text-align:center; }
  .lp-hero__illust img{ height:auto; width:auto; max-width:78%; margin:8px auto 0; }
  .lp-hero__note{ position:static; transform:none; margin:12px 0 16px; font-size:14px; padding:10px 16px; }
}

@media screen and (min-width: 768px) {
  .is-sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .is-pc {
    display: none;
  }
}

.lp-body {
  background-color: #FFF;
}

.lp-body h4::after {
  display: none;
}

.head-img {
  width: 80%;
  margin: 9rem auto 0 auto;
}

.head-img img {
  width: 100%;
}

.l-header {
  position: relative;
  width: 100%;
  z-index: 100;
  background: #fff;
}

/* トップページと同じ最上部の細い帯（サイト説明バー） */
.l-header::before {
  content: "機械設計スキルをステップ式で身につける、eラーニング中心のWeb学習塾";
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: var(--lp-accent);
  color: #fff;
  font-size: 11px;
  text-align: left;
  padding-left: max((100% - 960px) / 2, 10%);
  box-sizing: border-box;
}

.p-header__inner {
	width: 80%;
	max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  background-color: #FFF;
  margin: 0 auto;
  box-sizing: border-box;
  height: 80px;
  /*padding: 0 100px 0 10px;*/
}

/* @media screen and (max-width: 950px) {
  .p-header__inner {
    height: 86px;
    width:100%;
    padding: 0 100px 0 10px;
  }
} */

@media screen and (max-width: 767px) {
  .p-header__inner {
    height: 86px;
    width:100%;
    padding: 0 10px;
  }
}

@media screen and (min-width: 767px) and (max-width: 950px) {
  .p-header__list {
    margin-right: calc(30px - 1%);
  }
}

@media screen and (min-width: 1250px) {
  .p-header__inner {
    padding: 0;
  }
}

.p-header__logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-left: -16px;
}

@media screen and (max-width: 950px) {
  .p-header__logo-container {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    margin-left: 0;
  }
}

.p-header__logo {
  width: 210px;
  height: fit-content;
}

@media screen and (max-width: 950px) {
  .p-header__logo {
    width: 180px;
  }
}

.p-header__logo img {
  width: 100%;
  height: auto;
}

.p-header__logo-text {
  font-size: 12px;
  text-align: left;
}

@media screen and (max-width: 950px) {
  .p-header__logo-text {
    font-size: 10px;
    margin-top: -7px;
    white-space: nowrap;
  }
}

/* ロゴ下の説明文をタブレット以下で非表示（base-design パリティ） */
@media screen and (max-width: 1024px) {
  .p-header__logo-text {
    display: none !important;
  }
}

.p-header__list {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 950px) {
  .p-header__list {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

.p-header__list a {
  font-size: 16px;
  text-decoration: none;
  color: #3A3A3A;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 24px;
}

@media screen and (max-width: 950px) {
  .p-header__list a {
    font-size: 12px;
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .p-header__list a {
    font-size: 11px;
  }
}

@media screen and (min-width: 951px) {
  .p-header__list li:first-of-type {
    border-right: 1px solid #3A3A3A;
  }
}

.p-header__item-link:hover {
  background-color: #f0f4f9;
}

.p-header__item-icon {
  width: 24px;
  height: 24px;
}

.p-header__item-icon2 {
  width: 21px;
  height: 21px;
}

.p-header__item-icon img {
  width: 100%;
}

/* ===== ヘッダーナビ: 色のみ（構造は lp_editor.css に集約 2026-07-20）。色はLPごとに変更可 ===== */
.p-header__inner__bottom {
  background-color: var(--lp-accent-soft);      /* 260721 メニュー背景を少し濃く */
  border-bottom: 1px solid var(--lp-accent-mid); /* 260721 メニュー下に1px線 */
}

body.lp-fixed .p-header__inner__bottom {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--lp-accent-line);
  box-shadow: 0 2px 6px rgba(20, 60, 90, .06);
}
body.lp-fixed .p-header__inner__bottom .nav-current {
  color: var(--lp-accent);
}
body.lp-fixed .p-header__inner__bottom .nav-current::after {
  background: var(--lp-accent);
}

.p-header__inner__bottom a {
  color: var(--lp-accent);
}

@media screen and (max-width: 950px) {
  .p-header__list__bottom {
    background: var(--lp-accent-pale);
  }
}

.p-header__list__bottom a {
  color: #3A3A3A;
}

.p-header__list__bottom a:hover {
  color: #ff0000;
}

/* .p-header__float（お見積もり依頼ボタン）一式 → lp_editor.css へ集約(260724・全LP共通化) */

.lp-mv {
	width: 100%;
	text-align:center;
	padding:0;
}
/* 260724 旧ヘッダー背景 bg_mv.png を除去（新ヒーロー .lp-hero へ移行済み・講座名帯の水色残りを解消）。旧値: background:url(.../plan/bg_mv.png) no-repeat center; background-size:100% 100%; padding:15px 0 0; */

@media screen and (max-width: 767px) {
  .lp-mv {
		background:none;
		padding:0;
  }
}

.lp-mv img {
	width: 80%;
	max-width:1200px;
}

@media screen and (max-width: 767px) {
.lp-mv img {
	width: 100%;
}
}

.lp-mv h2 {
  color: var(--lp-accent);
  background-color: var(--lp-accent-soft);
  /*font-size: 72px;*/
  font-size: clamp(28px, 4vw, 56px);
  margin-top: -6px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .lp-mv h2 {
    font-size: 32px;
    padding: .3em 0;
    line-height: 1.4;
  }
}

.lp-mv h2 span {
  /*font-size: 44px;*/
  font-size: clamp(21px, 3vw, 42px);
}

@media screen and (max-width: 767px) {
  .lp-mv h2 span {
    font-size: 24px;
    display: block;
  }
}
.bnr_sale{
	margin-bottom:0;
	line-height:1;
}
.bnr_sale img{
	width:100%;
	vertical-align: bottom;
}
.lp-cta-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F5F5F5;
  padding: 46px 0 40px 0;
}

.cta-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 680px;
	text-align: center;
	margin:0 auto;
}

@media screen and (max-width: 767px) {
  .cta-box {
    width: calc(100% - 20px);
  }
}

.cta-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.over-cta {
  font-size: 29px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #E9682C;
  margin-bottom: 23px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .over-cta {
    background: linear-gradient(transparent 50%,#FFF242 50%,#FFF242 100%);
    font-size: clamp(14px, -0.202rem + 5.38vw, 21px);
  }
}

@media screen and (max-width: 400px) {
  .over-cta {
    font-size: clamp(16px, 0.5rem + 2.5vw, 18px);
  }
}

@media screen and (min-width: 768px) {
  .over-cta:before, .over-cta:after {
    color: #3A3A3A;
    position: absolute;
  }

  .over-cta:before {
    content: '＼';
    margin-left: -1.1em;
    transform: rotate(20deg);
  }

  .over-cta:after {
    content: '／';
    margin-left: -.2em;
    transform: rotate(-20deg);
  }
}


/* .lp-cta / :hover / スマホ指定 → lp_editor.css へ集約(260724・ABテスト用に全LP共通化) */

.popup-text {
  text-align: left;
  padding: 1% 2%;
  box-sizing: border-box;
}

.popup-text h3 {
  color: #BB261A;
  font-size: 18px;
  font-weight: 600;
  line-height: 2;
}

.popup-text ul {
  line-height: 2;
  margin-bottom: 20px;
}

.popup-text p {
  line-height: 2;
  margin: 15px auto;
}

.off {
  background: #cc0000;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  padding: 0 3px !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.075em;
}

@media screen and (max-width: 800px) {
  .visible-phone .buy {
    display: block;
  }
}

/* .lp-cta のスマホ font-size(22px/17px) → lp_editor.css へ集約(260724) */

/* .info-btn / :hover / ::after / スマホ / span → lp_editor.css へ集約(260724・スマホ高さは85px→60pxに縮小) */

.feature-container {
  background-color: #FFF;
  padding: 80px 0;
}

@media screen and (max-width: 767px) {
  .feature-container {
    padding: 30px 0;
  }
}

.box-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 80%;
  max-width: 960px;
  row-gap: 32px;
}

@media screen and (max-width: 679px) {
  .box-list {
    flex-direction: row;
    gap: 18px;
  }
}

@media screen and (min-width: 680px) and (max-width: 767px) {
  .box-list {
    flex-direction: row;
    gap: 10px;
  }
}

.box-list li {
  width: 32%;
  background-color: var(--lp-accent);
  color: #FFF;
  border-radius: 10px;
  text-align: center;
  height: 222px;
  padding: 21px 0;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .box-list li {
    width: 70%;
    height: 175px;
    padding: 40px 15px 20px;
    position: relative;
    margin: 0 auto 30px;
    min-width: 250px;
  }
}

@media screen and (min-width: 680px) and (max-width: 767px) {
  .box-list li {
    width: calc(100% / 2 - 10px);
  }
}

.box-list li:last-of-type {
  background-color: #EFF8FB;
  color: #243746;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 21px 20px;
  width: 100%;
  height: auto;
}

.box-list li:last-of-type p {
  font-size: 18px;
  font-weight: bold;
}

.box-list li:last-of-type span {
  display: block;
  font-size: 16px;
  font-weight: normal;
}

@media screen and (min-width: 768px) {
  .box-list li:last-of-type p {
    padding-left: 20px;
  }
}

@media screen and (max-width: 767px) {
  .box-list li:last-of-type {
    width: 70%;
    height: auto;
    padding: 30px 20px;
    font-size: 16px;
  }
  .box-list li:last-of-type p {
    font-size: 16px;
  }
  .box-list li:last-of-type span {
    font-size: 14px;
  }
}

@media screen and (max-width: 680px) {
  .box-list li:last-of-type {
    flex-direction: column;
    height: auto;
    padding: 30px 20px;
    font-size: 16px;
  }
}

@media screen and (min-width: 680px) and (max-width: 767px) {
  .box-list li:last-of-type {
    flex-direction: row;
    width: calc(100% / 2 - 10px);
    padding: 40px 15px 20px;
  }
}

.box-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 17px;
}

@media screen and (max-width: 767px) {
  .box-title {
    font-size: 24px;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 10px 0;
    color: var(--lp-accent);
    border: 3px solid;
    padding: 0 10px;
    white-space: nowrap;
    width: 120px;
  }
}

.box-txt {
  font-size: clamp(14px, 0.163rem + 1.48vw, 21px);
  letter-spacing: 2px;
  line-height: 1.8;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.box-txt b {
  font-size: 48px;
}

@media screen and (max-width: 767px) {
  .box-txt b {
    font-size: 40px;
  }
}

@media screen and (max-width: 767px) {
  .box-txt {
    font-size: 16px;
  }
}

.box-txt span {
  font-size: 28px;
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .box-txt span {
    font-size: 24px;
  }
}

.feature-icon {
  width: 40px;
}

.feature-icon img {
  width: 100%;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .feature-icon {
    width: 32px;
  }
  .feature-bottom-icon {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 10px 0;
    color: #EAEAEA;
    border: 3px solid;
    padding: 0 10px;
    white-space: nowrap;
    width: 120px;
    text-align: center;
  }
  .feature-bottom-icon img {
    width: 70%;
    padding-top: 5px;
  }
}

.box-title p {
  font-size: 19px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .box-title p {
    font-size: 18px;
  }
}

.feature-number {
  background-color: var(--lp-accent-pale);
  padding: 60px 0;
}

.feature-number h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #3A3A3A;
  text-align: center;
  margin: 0 auto 38px auto;
}

@media screen and (max-width: 767px) {
  .feature-number h3 {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .feature-number ul + h3 {
    font-size: 14px;
  }
}

.number-box {
  display: flex;
  justify-content: space-between;
  width: 80%;
  max-width: 960px;
  margin: 0 auto 63px auto;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .number-box li {
    width: 33%;
  }
}

.number-box p {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .number-box {
    flex-direction: column;
    gap: 70px;
  }
}

.number-box li h4 {
  font-size: clamp(18px, -0.375rem + 3.13vw, 24px);
  color: #607D8B;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .number-box li h4 {
    font-size: 18px;
  }
}

.stat-item {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 遅延アニメーション - 中央から左右へ */
.stat-item:nth-child(2) {
  transition-delay: 0.1s; /* 中央が最初 */
}

.stat-item:nth-child(1) {
  transition-delay: 0.4s; /* 左が後 */
}

.stat-item:nth-child(3) {
  transition-delay: 0.4s; /* 右が後（同時） */
}

.stat-item.float-in {
  opacity: 1;
  transform: translateY(0);
}

.stat-number {
  font-size: clamp(40px, -0.879rem + 7.04vw, 69px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #F26700;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .stat-number {
    font-size: 60px;
  }
}

.stat-unit {
  font-size: clamp(20px, -0.265rem + 3.16vw, 33px);
  font-weight: bold;
  color: #000;
}

@media screen and (max-width: 767px) {
  .stat-unit {
    font-size: 20px;
  }
}

.under-num {
  padding: 0 10px;
  font-size: clamp(16px, 0.534rem + 0.97vw, 20px);
  color: #607D8B;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .under-num {
    font-size: 16px;
  }
}

.feature-number-img {
  margin: 0 auto 20px auto;
  width: fit-content;
}

.feature-number-img img {
  max-width: 100%;
}

.feature-number-txt {
  font-size: 14px;
  line-height: 2;
  color: #707070;
  letter-spacing: 1.5px;
  margin: 0 auto;
  width: 62%;
  max-width: 960px;
}

@media screen and (max-width: 767px) {
  .feature-number-txt {
    font-size: 12px;
    width: auto;
    margin: 0 20px;
  }
}

/* 企業採用セクション */
.companies-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out 0.2s;
  text-align: center;
}

.companies-section.float-in {
  opacity: 1;
  transform: translateY(0);
}

.feature-about {
  padding: 70px 0;
}

.lined {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #3A3A3A;
  margin: 0 auto 64px auto;
  text-align: center;
  position: relative;
  width: fit-content;
}

@media screen and (max-width: 767px) {
  .lined {
    font-size: 18px;
    margin: 0 auto 30px;
  }
}

.lined::before {
  content: "";
  width: 80px;
  height: 6px;
  background-color: var(--lp-accent);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .lined::before {
    height: 4px;
    width: 48px;
    top: -20px;
  }
}

.about-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 65px auto;
  width: 80%;
  max-width: 960px;
}

@media screen and (max-width: 767px) {
  .about-link {
    flex-direction: column;
    gap: 20px;
  }
}

.about-link a {
  width: clamp(200px, 2.5rem + 20.83vw, 240px);
  height: clamp(110px, 8.5vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E7F6FB;
  text-align: center;
  text-decoration: none;
  font-size: clamp(20px, 0.25rem + 2.08vw, 24px);
  font-weight: 600;
  letter-spacing: 2px;
  color: #3A3A3A;
  border: 1px solid #C4E6F0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  position: relative;
  box-sizing: border-box;
  padding-bottom: 22px;
}

.about-link a::after {
  content: "";
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid #3A3A3A;
  border-bottom: 2px solid #3A3A3A;
}

@media screen and (max-width: 767px) {
  .about-link a {
    height: 100px;
    font-size: 20px;
  }
}

.about-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 80%;
  max-width: 960px;
  gap: 150px;
}

@media screen and (max-width: 767px) {
  .about-container {
    width: 100%;
    gap: 70px;
  }
}

.about-container li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .about-container li {
    flex-direction: column;
    gap: 20px;
  }
}

@media screen and (min-width: 768px) {
  .about-container li:nth-child(2) {
    flex-direction: row-reverse;
  }
}

.about-txt-box {
  width: 67%;
}

@media screen and (max-width: 767px) {
  .about-txt-box {
    width: calc(100% - 40px);
  }
}

.about-img {
	width: 30%;
}
@media screen and (max-width: 767px) {
  .about-img {
    width: calc(100% - 40px);
  }
}

.about-img img {
  width: 100%;
	border-radius:5px;
}

.about-num {
  font-size: 100px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(12, 134, 172, 0.16);
  line-height: 1;
}

.about-txt-box h4 {
  font-size: 28px;
  color: var(--lp-accent);
  font-weight: 600;
  letter-spacing: 2px;
  text-wrap: balance;
  margin-top: 10px;
  margin-bottom: 37px;
}

.about-txt {
  font-size: 18px;
  line-height: 1.7;
  color: #3a3a3ae8;
  letter-spacing: 1.5px;
}

.about-txt span{
	font-weight:bold;
}

.onayami {
  background-color: #F0F0F0;
  padding: 80px 0 40px 0;
}

@media screen and (max-width: 767px) {
  .onayami {
    padding: 80px 20px 40px;
  }
}
.onayami-list-box{
	display:flex;
	width:90%;
	max-width:960px;
	margin: 0 auto;
	align-items: center;
}
.onayami-list-box > p{
	width:30%;
	height:100%;
	padding:5% 6% 5% 10%;
	box-sizing:border-box;
}
.onayami-list-box > p img{
	width:100%;
}
.onayami-list {
	width:70%;
}

.onayami-list li {
  font-size: 18px;
  letter-spacing: 2px;
  margin: 2rem auto 2rem 2rem;
  text-align: left;
  position: relative;
}

@media screen and (max-width: 767px) {
.onayami-list-box{
		width:100%;
		flex-direction: column-reverse;
	}
.onayami-list {
	width:100%;
	}
.onayami-list-box > p{
	width:40%;
		padding:0;
		margin:0 auto;
}
  .onayami-list li {
    font-size: 14px;
  }
}

.onayami-list li::before {
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("../images/check.png");
  background-size: contain;
  position: absolute;
  top: 0;
  left: -50px;
}

@media screen and (max-width: 767px) {
  .onayami-list li::before {
    width: 24px;
    height: 24px;
    left: -35px;
  }
}

.tate-line {
  width: 3px;
  height: 52px;
  background-color: #3D87AD;
  border-radius: 2px;
  margin: 40px auto 28px;
  position: relative;
}

.tate-line::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #3D87AD;   /* 下向き三角（塗りつぶし） */
}

@media screen and (max-width: 767px) {
  .tate-line {
    height: 44px;
  }
}

.onayami h4 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--lp-accent);
  margin: 0 auto 40px auto;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .onayami h4 {
    font-size: 18px;
  }
}

.onayami-img-box {
  display: flex;
  align-items: center;
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .onayami-img-box {
    width: auto;
    flex-direction: column;
  }
}

.onayami-box {
  width: 85%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .onayami-box {
    width: auto;
  }
}

.onayami-box ul {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .onayami-box ul {
    flex-direction: column;
    gap: 30px;
    width: 195px;
    margin: 0 auto;
  }
}

.onayami-box ul li {
  background-color: #F1F6F8;
  color: #243746;
  border: 1px solid #BED8E4;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  width: 32%;
  border-radius: 16px;
  word-break: auto-phrase;
  text-align: center;
  padding: 60px 25px 20px 25px;
  box-sizing: border-box;
  position: relative;
}

@media screen and (max-width: 767px) {
  .onayami-box ul li {
    width: 100%;
    font-size: 14px;
    padding: 35px 15px 20px;
  }
  .onayami-box ul li br {
    display: none;
  }
}

.onayami-box ul li::before {
  content: "";
  background-image: url("../images/onayami-icon.png");
  background-size: contain;
  width: 80px;
  height: 80px;
  position: absolute;
  top: -40px;
  left: 30%;
}

@media screen and (max-width: 767px) {
  .onayami-box ul li::before {
    width: 40px;
    top: -20px;
    height: 40px;
    left: calc(50% - 20px);
  }
}

.onayami-img {
  width: 25%;
}

@media screen and (max-width: 767px) {
  .onayami-img {
    width: 135px;
    margin-left: auto;
  }
}

.onayami-img img {
  width: 100%;
}

.onayami-img-box p {
  font-size: 14px;
  letter-spacing: 2px;
  margin: 20px 0;
}

@media screen and (max-width: 767px) {
  .onayami-img-box p {
    margin: 20px 0 0;
  }
}

.process {
  text-align: center;
  background-color: #CEEFFD;
  padding: 70px 0 45px 0;
}

.process p {
  font-size: 18px;
  margin-top: -35px;
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .process {
    text-align: center;
    background-color: #CEEFFD;
    padding: 70px 20px 45px;
  }
  .process p {
    margin: 0 0 30px;
    font-size: 16px;
  }
}

.process-img {
  width: 80%;
  max-width: 960px;
  margin: 0 auto 53px auto;
}

@media screen and (max-width: 767px) {
  .process-img {
  width: 100%;
  margin: 0 auto;
  }
}

.process-img img {
  width: 100%;
}

.learn-about {
  background-color: var(--lp-accent-pale);
  width: 100%;
  padding-top: 80px;
  padding-bottom: 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.learn-about .triangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-top: 80px solid #ceeffd;
	border-bottom: 0;
	margin-top:-100px;
	margin-bottom:40px;
}
@media screen and (max-width: 767px) {
  .learn-about {
    padding: 40px 20px 30px;
	}
.learn-about .triangle{
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
  border-top: 60px solid #ceeffd;
	margin-top:-40px;
	margin-bottom:20px;
}
}

.learn-about h3 {
  color: var(--lp-accent);
  font-size: 28px;
  width: 80%;
  max-width: 960px;
	margin-bottom: 70px;
	text-align:center;
}

@media screen and (max-width: 767px) {
  .learn-about h3 {
    width: 100%;
    font-size: 20px;
    margin-bottom: 30px;
  }
}

.learning-element {
  display: flex;
  width: 80%;
  max-width: 960px;
	margin-bottom: 60px;
	gap:50px;
}
.learning-element li{
	text-align:center;
}
.learning-element li img{
	width: 100%;
	margin-bottom:15px;
}
.learning-element li p{
	background:var(--lp-accent);
	color:#fff;
	border-radius:10px;
	font-size:24px;
	font-weight:bold;
	padding:20px 0;
}
@media screen and (max-width: 767px) {
.learning-element {
		width: 100%;
		flex-direction:column;
	margin-bottom: 40px;
	gap:10px;
	}
.learning-element li{
		display: flex;
		align-items: center;
	gap:10px;
	}
	.learning-element li figure{
		width:40%;
		height:auto;
	}
	.learning-element li figure img{
	margin-bottom:0;
}
	.learning-element li p{
		width:60%;
		font-size:16px;
		padding: 10px 0;
}
}
.learning-list {
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 960px;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .learning-list {
    width: 100%;
  }
}

.learning-box {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 5%;
}

@media screen and (max-width: 767px) {
  .learning-box {
    gap: 20px;
  }
}

.left-box {
  background-color: #FFF;
  border: 4px solid var(--lp-accent);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  border-radius: 4px;
  text-align: center;
	padding: 5% 0;
	flex-direction: column;
}
.left-box span{
	color:#999;
}

@media screen and (max-width: 767px) {
  .left-box {
    width: 90px;
    font-size: 16px;
  }
}

.right-box {
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .right-box {
    width: calc(100% - 110px);
  }
}

.learn-txt {
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 2;
  margin-bottom: 20px;
}
.learn-txt span{
	font-weight:bold;
	color:var(--lp-accent);
}
@media screen and (max-width: 767px) {
  .learn-txt {
    font-size: 14px;
  }
}

.plus-mark {
  font-size: 72px;
  font-weight: 600;
  color: var(--lp-accent);
  padding-left: 6%;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .plus-mark {
    font-size: 56px;
  }
}

.right-box h4 {
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 2;
  color: var(--lp-accent);
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .right-box h4 {
    font-size: 15px;
    line-height: 1.5;
  }
}

.tool-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-bottom: 20px;
}

.tool-list li {
  background-color: var(--lp-accent);
  color: #FFF;
  font-size: 15px;
  letter-spacing: 1px;
  border-radius: 4px;
  padding: 1%;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .tool-list li {
    font-size: 13px;
  }
}

.learn-about-bottom {
  display: flex;
  align-items: center;
  width: 70%;
  max-width: 960px;
	justify-content: center;
	gap:20px;
}

@media screen and (max-width: 767px) {
  .learn-about-bottom {
    width: 100%;
  }
}

.learn-about-txt {
  display: inline-block;
  position: relative;
  background-color: #0B819E;
  padding: 10px 15px;
  border-radius: 10px;
  line-height: 2;
  color: #FFF;
  width: 80%;
  font-size: 18px;
  padding: 3% 4%;
  box-sizing: border-box;
  overflow: visible;
}

@media screen and (max-width: 767px) {
  .learn-about-txt {
    font-size: 14px;
    z-index: 0;
    width: calc(100% - 170px);
  }
}

.learn-about-txt::after {
  content: "";
  position: absolute;
  top: 20px;
  left: -18px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 25px solid #0B819E;
}

@media screen and (max-width: 767px) {
  .learn-about-txt::after {
    border-right: 35px solid #0B819E;
    left: -15px;
    z-index: -1;
    top: 10px;
  }
}

.learn-img {
  width: 20%;
}

@media screen and (max-width: 767px) {
  .learn-img {
    width: 155px;
    margin-right: -20px;
  }
}

.learn-img img {
  width: 100%;
}

#skill {
  padding: 80px 0;
  background-color: #FFF;
}

.skill-inner {
  height: 150px;
}

@media screen and (max-width: 767px) {
  .skill-inner {
    height: auto;
  }
}

.skill-num {
  font-size: 52px;
  color: rgba(12, 134, 172, 0.16);
  letter-spacing: 2px;
  line-height: 1;
  font-weight: 600;
}

.skill-box h4 {
  font-size: 21px;
  font-weight: 600;
  color: var(--lp-accent);
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .skill-box h4 {
    font-size: 19px;
    margin-bottom: 1em;
  }
}

.skill-txt {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .skill-txt {
    font-size: 14px;
  }
}

.lined-under {
  font-size: 18px;
  width: 80%;
  max-width: 900px;
  letter-spacing: 2px;
  margin: 0 auto 20px;
	line-height: 1.7;
}
.lined-under span{
	font-weight:bold;
}

@media screen and (max-width: 767px) {
  .lined-under {
    width: auto;
    margin: 0 20px 30px;
    font-size: 14px;
  }
}
#skill .image{
	display:flex;
	justify-content: center;
	gap:30px;
	width: 60%;
	max-width:600px;
	margin: 0 auto 30px;
}
#skill .image figure img{
	width:100%;
}
#skill .image figcaption{
	text-align:center;
	font-size:16px;
	margin-top:-20px;
}
@media screen and (max-width: 767px) {
#skill{
		padding-bottom:20px;
}
#skill .image{
	width: 90%;
	}
#skill .image figcaption{
	font-size:inherit;
	margin-top:-10px;
}
}
#program {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #CEEFFD;
}

.section-title {
  width: 100%;
  color: var(--lp-accent);
  background-color: var(--lp-accent-soft);
  font-size: 36px;
  margin-top: -1px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 1.6;
  padding: 30px 20px 48px;
  margin-bottom: 80px;
}

/* 大きな章の切り替わり見出しに、上へ短い罫線を入れる（2026-07-18） */
.section-title::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  background: var(--lp-accent);
  border-radius: 2px;
  margin: 0 auto 20px;
}

/* =========================================================================
   2026-08-04 旧デザインCSSの一括削除（P3〜P7 の本文差し替え完了にともなう）
   6,933行 → 5,547行（−1,386行）。削除対象は 3ページ（_top / _paidseminar-order /
   _ask）の実描画DOMで使用0件を確認したクラスのみ。移植パック（下部）は無変更。
   残置: .pace / .dailystudies / .program-bottom-box / .openVideo / .cta-box /
         .price-txt_intax / #price table td.discount / .hp_justify / .section-title /
         .red-txt / .y-bg / .box-txt / .onayami*（いずれも現役）
   ========================================================================= */

/* .tokuten .section-title（青帯）は 2026-08-04 に削除（P7 で benefit-v2 の __title へ移行） */

@media screen and (max-width: 767px) {
  .section-title {
    font-size: 24px;
    margin-bottom: 50px;
	}
}

/* 旧カリキュラムの章まわり（.program-head / .program-num / .program-title / .slide-box /
   .program-h4 / .slide-inner / .slide-txt-box）は 2026-08-04 に削除
   （P3 で curriculum-accordion ＋ __slide-strip へ移行し未使用）。
   ★ .openVideo（サンプル動画ボタン）は現役なので残す */

.openVideo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 80%;
  max-width: 670px;
  background-color: var(--lp-accent);
  color: #FFF;
  border-radius: 6px;
  font-size: 22px;
  padding: 1%;
  box-sizing: border-box;
  margin: 20px auto 35px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.33);
  margin-bottom: 100px;
  gap: 20px;
}

@media screen and (max-width: 400px) {
  .openVideo {
    font-size: 15px;
    gap: 15px;
  }
}

@media screen and (min-width: 401px) and (max-width: 767px) {
  .openVideo {
    font-size: 16px;
    gap: 10vw;
  }
}

@media screen and (max-width: 767px) {
  .openVideo {
    justify-content: center;
    width: calc(100% - 40px);
    padding: 10px 0;
  }
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.popup.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  position: relative;
  width: 560px;
  max-width: 90%;
  max-height: 90vh;
  max-height: 90dvh; /* iOSのURLバー分を考慮 */
  overflow-y: auto;  /* はみ出した内容をスクロール可能に（スマホで下が切れる件の対策） */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.popup-content > iframe {
  width: 100%;
  margin-bottom: -8px;
  height: 270px;
}


.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

.v-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

@media screen and (max-width: 400px) {
  .v-right {
    gap: 8px;
  }
}

@media screen and (min-width: 401px) and (max-width: 767px) {
  .v-right {
    gap: 15px;
  }
}

/* 旧カリキュラム（.program-list / .txt-list / .program-margin）は 2026-08-04 に削除
   （P3 で curriculum-accordion の __learning-list ＋ .cur-terms へ移行し未使用）。
   ★ .program-bottom-box は現役なので残す（basic で一度消して復元した要素） */

.program-bottom-box {
  background-color: #F5F5F5;
  width: 80%;
  max-width: 960px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3% 1%;
  box-sizing: border-box;
  margin: 60px auto;
}

.program-bottom-box p {
  font-size: 18px;
  letter-spacing: 1.5px;
  line-height: 2;
  width: 95%;
}

@media screen and (max-width: 767px) {
  .program-bottom-box {
    width: calc(100% - 40px);
    padding: 30px 20px;
  }
  .program-bottom-box p {
    font-size: 14px;
  }
}

.pace {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFF;
}

/* 旧学習ペース一式（.pace-top / .pace-txt / .pace-img / .pace-style / .pace-box /
   .pace-icon / .pace-under-icon / .pace-txt-bottom）は 2026-08-04 に削除
   （P4 で study-sec ＋ ss-cards へ移行し未使用。.pace と .dailystudies は現役なので残す） */

.dailystudies {
  width: 80%;
}

#price {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F3F9FB;
  padding-bottom: 86px;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  #price {
    padding-bottom: 20px;
  }
}

/* 旧キャンペーン枠一式（.price-img / .off-txt-box / .off-sub-txt / .zan-capsule / .off-txt）は
   2026-08-04 に削除（P5 で price-v2 の pv2-campaign／pv2-sale-label へ移行し未使用） */

/* 旧 .price-txt（80px の価格表示）は 2026-08-04 に削除（P5 で pv2-sale-price へ移行し未使用）。
   .price-txt_intax は price-v2 の税込表示で現役なので残す */

.price-txt_intax, .price-txt_intax_bunkatsu, .price-txt_intax_bunkatsu + p{
	font-size:18px;
	line-height:2;
}
@media screen and (max-width: 767px) {
.price-txt_intax, .price-txt_intax_bunkatsu, .price-txt_intax_bunkatsu + p{
	font-size:18px;
	line-height:1.6;
}
}
/* 旧料金ボックス一式（.sub-price / .ttl_sub-price / .sub-price-txt / .price-box / .line-through）は
   2026-08-04 に削除（P5 で price-v2 へ移行し未使用） */

#price h4 {
	font-size: 28px;
	margin-bottom:30px;
	text-align:center;
  /*color: #0989B1;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 80%;
  max-width: 704px;
  margin-bottom: 24px;*/
}
#price h4::before{
	content:"";
	display:block;
	background:#3d87ad;
	width:60px;
	height:5px;
	margin: 0 auto 25px;
}

@media screen and (max-width: 767px) {
  #price h4 {
    font-size: 20px;
  }
}
/* 旧「講座の仕様」一式（.spec / .spec_list / .spec_tokuten / .spec .cta-box）は
   2026-08-04 に削除（P5 で price-v2 の pv2-course-list ＋ pv2-metric へ移行し未使用） */
.group{
	padding: 50px 0;
	background:#f2fafd;
	width:100%;
}
.group h4 + p{
	text-align:center;
	font-size:18px;
	margin-bottom:20px;
}
#price table {
  width: 80%;
	max-width: 700px;
	margin:0 auto;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  #price table {
    width: calc(100% - 40px);
  }
}

/* ★この旧 #price テーブルの指定は、新デザイン(#price.price-v2)の
   `.lp-body #price ... th{background:var(--lp-accent)}` に上書きされていて画面には出ない
   （2026-08-25 実測：グループ割引表の th は #00A64A）。
   旧アクセントの青緑が残っていると事故のもとなので緑に揃えておく。仕上げ工程で削除候補。 */
#price table th {
  background-color: #2a6ddb;
  color: #FFF;
}

#price table th,
#price table td {
  padding: 2% 5%;
  font-size: 16px;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  #price table th,
  #price table td {
    font-size: 14px;
	}
}

tbody tr:nth-child(odd) {
  background-color: #fff;
}

tbody tr:nth-child(even) {
  background-color: #fff;
}

.group tbody tr:nth-child(odd) {
  background-color: #F8FCFE;
}

.group tbody tr:nth-child(even) {
  background-color: #DFF2F9;
}

.group tbody td:nth-child(1),
.group tbody td:nth-child(3) {
  color: #243746;
}
td {
  color: #3A3A3A;
  font-size: 16px;
}
#price table td.discount{
	color:#E9682C;
	font-weight:600;
	font-size:21px;
}

/* .under-table は 2026-08-04 に削除（P5 で price-v2 へ移行し未使用） */
/* 旧 .moushikomi（width/padding）は 2026-08-04 に削除。
   余白は移植パックの .lp-body .moushikomi.apply-v2 が持つ（P6） */

@media screen and (max-width: 767px) {
#price table td.discount {
  font-size: 18px;
}
}

/* 旧ステッパー一式（.stepper / .step / .circle / .step-label / .step-icon）は
   2026-08-04 に削除（P6 で apply-v2 の4ステップへ移行し未使用になったため） */

/* =========================================================================
   260804 P7 移植にともなう削除: 旧「今だけの限定特典」一式
   （#anc_tokuten の offset hack / .tokuten / .tokuten-box / .tokuten-txt-box /
     .tokuten-txt-box-2 / .tokuten_triz / .triz_merit / .tokuten-haguruma /
     .tokuten-title / .tokuten-num / .tokuten-title-txt / .tokuten-title-box /
     .tokuten-txt / .tokuten-list / .tokuten-img / .b-box）
   位置合わせは benefit-v2 側の scroll-margin-top に移行済み（basic §13-2 と同じ）
   ========================================================================= */

/* 旧特典の tokuten-num / tokuten-title-txt / tokuten-title-box / tokuten-txt / tokuten-list は
   2026-08-04 に削除（P7 で benefit-v2 へ移行し未使用になったため） */

/* 旧特典の tokuten-img / b-box（6分野）は 2026-08-04 に削除（P7 で benefit-v2 のモーダルへ移行） */

.y-bg {
  font-size: 18px;
  font-weight: 600;
  position: relative;
  display: inline;
  background: #FFF242 no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
}

.red-txt {
  color: #ED2E2E;
  font-weight: 600;
}

#voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--lp-accent-pale);
}

.voice-txt {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 48px;
  position: relative;
}

.voice-txt:before, .voice-txt:after {
  content: 'ー';
}

@media screen and (max-width: 767px) {
  .voice-txt.a {
    padding: 0 2em;
  }
  .voice-txt.a:before, .voice-txt.a:after {
    position: absolute;
    top: 1em;
  }
  .voice-txt.a:before {
    left: 0;
  }
  .voice-txt.a:after {
    right: 0;
  }
}

@media screen and (max-width: 767px) {
  .voice-txt {
    padding: 0 20px;
    font-size: 18px;
  }
}

.voice-box {
  background-color: #FFF;
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 5%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .voice-box {
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-bottom: 20px;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
  }
}

@media screen and (max-width: 767px) {
  .voice-txt-box {
    width: calc(100% - 100px);
  }
}

.voice-img {
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

@media screen and (max-width: 767px) {
  .voice-img {
    width: 80px;
    height: 80px;
  }
}

.voice-img img {
  width: 120%;
}

.voice-comment {
  font-size: 21px;
  letter-spacing: 2px;
  line-height: 1.8;
  margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
  .voice-comment {
    font-size: 14px;
  }
}

.attribute {
  font-size: 21px;
  color: #828282;
}

@media screen and (max-width: 767px) {
  .attribute {
    font-size: 16px;
  }
}

.voice-detail {
  width: 100%;
  background-color: #FFF;
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 70px;
}

@media screen and (max-width: 767px) {
  .voice-detail {
    margin-top: 30px;
  }
}

.voice-detail-txt {
  font-size: 26px;
  color: var(--lp-accent);
  letter-spacing: 2px;
  font-weight: 600;
  width: 70%;
  max-width: 650px;
  margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
  .voice-detail-txt {
    width: calc(100% - 40px);
    font-size: 16px;
    margin-bottom: 30px;
  }
}

.detail-box {
  width: 80%;
  max-width: 900px;
  background-color: #D9D9D9;
  height: 776px;
  margin-bottom: 70px;
}

@media screen and (max-width: 767px) {
  .detail-box {
    width: calc(100% - 40px);
    height: auto;
    aspect-ratio: 340 / 221;
    margin-bottom: 30px;
  }
}

#faq-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFF;
}

.faq {
  width: 80%;
  max-width: 900px;
}

@media screen and (max-width: 767px) {
  .faq {
    width: calc(100% - 40px);
  }
}

.faq-header {
  background-color: var(--lp-accent-pale);
  display: flex;
  align-items: center;
  border-radius: 8px;
  gap: 12px;
  padding: 2% 4%;
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .faq-header {
    margin-bottom: 20px;
  }
}

.faq-icon {
  width: 36px;
  height: 36px;
  display: block;
}

.faq-icon {
  filter: invert(48%) sepia(39%) saturate(784%) hue-rotate(148deg) brightness(87%) contrast(121%);
}

.faq-header h3 {
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 1.5;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .faq-header h3 {
    font-size: 16px;
  }
}

.faq-content {
  display: none;
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 15px 21px;
  border-bottom: 1px solid #ccc;
  position: relative;
}

.faq-header::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--lp-accent);
  border-bottom: 2px solid var(--lp-accent);
  transform: rotate(45deg);
  margin-left: auto;
}

.faq-header.active::after {
  border: none;
  border-top: 2px solid var(--lp-accent);
  border-left: 2px solid var(--lp-accent);
}

.faq-sub-item .faq-answer {
  display: none;
  /* 初期非表示 */
  padding: 15px 0 8px 0;
  line-height: 1.5;
}

.faq-txt-under {
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 2;
  margin: 45px auto 24px auto;
  max-width: 620px;
}

/* 2階層目のサブアイテム */
.faq-sub-item {
  background: #F0F0F0;
  padding: 20px;
  margin-bottom: 18px;
  font-size: 16px;
  border-radius: 8px;
}

/* 質問部分 */
.faq-question {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  position: relative;
  font-weight: bold;
	line-height: 2;
	padding-right: 10px;
}

.faq-question span,
.faq-answer span {
  color: var(--lp-accent);
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
  margin-right: 10px;
}

/* 矢印 */
.faq-question::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--lp-accent);
  border-bottom: 2px solid var(--lp-accent);
  transform: rotate(45deg);
	margin-left: auto;
	position: absolute;
  right: 0;
}

.faq-question.active::after {
  border: none;
  border-top: 2px solid var(--lp-accent);
  border-left: 2px solid var(--lp-accent);
}

/* 回答部分 */
.faq-answer {
  display: none;
  /* 初期非表示 */
  padding: 10px 16px;
  line-height: 1.5;
  border-top: 1px solid #b9b9b9;
  margin-top: 10px;
  padding-top: 15px;
}

@media screen and (max-width: 767px) {
  .faq-txt-under {
    margin: 0 20px 30px;
    font-size: 16px;
    line-height: 1.85;
  }
}

.faq-cta {
  width: 80%;
  max-width: 620px;
  margin-bottom: 50px;
}

.faq-cta a:hover {
  background-color: var(--lp-accent-dark);
}

@media screen and (max-width: 767px) {
  .faq-cta {
    width: calc(100% - 40px);
  }
}

.faq-cta a {
  background-color: #0B92B5;
  color: #FFF;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  width: 100%;
  height: 82px;
  padding: 0 30px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
  text-decoration: none;
  transition: background-color .2s;
}

@media screen and (max-width: 767px) {
  .faq-cta a {
    font-size: 17px;
    letter-spacing: 0;
    width: auto;
  }
}

.bottom-img {
  width: 90%;
  max-width: 1200px;
}

@media screen and (max-width: 767px) {
  .bottom-img {
    width: calc(100% - 40px);
  }
}

.bottom-img img {
  width: 100%;
}

.dailystudies {
  display: flex;
  flex-direction: column;
}

.dailystudies h2 {
  font-size: 2.4rem;
  font-weight: bold;
  background: none;
  color: inherit;
  margin: 50px 0 30px;
  padding: 0;
  text-align: center;
}

.arrow img {
  width: 100%;
}

.btn_purchase a {
  text-decoration: none;
}

.c_anchor {
  position: absolute;
  left: 0;
  width: 100%;
  margin-top: -4.5vw;
}

@media screen and (max-width: 767px) {
  .c_anchor {
    margin-top: -76px;
  }
}

html {
  scroll-behavior: smooth;
}

.l-footer {
  background: var(--lp-accent);
}

.l-footer * {
  color: #fff;
}

.l-footer a {
  text-decoration: none;
}

/* フッター下部の2本の帯。旧アクセント(#0989B1)の暗色版 #06627E / #03313F が
   直書きで残っていて青いままだった（varize スクリプトの置換対象9色に無いため
   自動では直らない。移行のたびに手で直す必要がある）。 */
.f-nav {
  background: var(--lp-accent-dark, #3A3A3A);
}

/* フッター: 法人トライアルの色を #F26700 に・「まずはお気軽に」で改行（is-spをPCでも表示） */
.f-inner .f-link li:first-child a {
  background: #F26700;
}
.f-inner.a p .is-sp {
  display: inline;
}

.f-inner {
  width: 960px;
  margin: 0 auto;
  max-width: calc(100% - 40px);
}

.f-inner p {
  font-weight: bold;
  font-size: 24px;
}

.f-inner.a p span {
  font-size: 14px;
  display: inline-block;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .f-inner > ul {
    width: 50%;
    margin: 0 auto 0 20px;
  }
}

@media screen and (max-width: 767px) {
  .f-inner {
    font-size: 14px;
  }
  .f-inner > ul {
    width: 50%;
    margin: 0 auto 0 20px;
  }
  .f-inner p {
    font-size: 24px;
  }
}

@media screen and (min-width: 951px) {
  .f-inner p {
    margin-top: 2em;
  }
}

.f-inner.a {
  display: flex;
  justify-content: space-between;
  padding: 45px 0;
}

@media screen and (max-width: 950px) {
  .f-inner.a {
    flex-direction: column;
    padding: 50px 0;
    gap: 20px;
  }
}

@media screen and (min-width: 951px) {
  .f-inner.a p {
    width: calc(100% - 600px);
  }
  .f-inner.a .right {
    width: 560px;
  }
}

.f-link {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.f-link li {
  width: calc(50% - 10px);
}

.f-link li:nth-child(3) {
  width: 100%;
}

.f-link a {
  display: block;
  border: solid 3px #fff;
  border-radius: .5em;
  font-size: 20px;
  background: #06627E;
  padding: .8em 0;
  position: relative;
  font-weight: bold;
  position: relative;
}

.f-link a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 767px) {
  .f-link a {
    font-size: 18px;
  }
}

.f-link a:before {
  content: '';
  position: absolute;
  width: .5em;
  height: .5em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  right: 1em;
  top: 1.2em;
  transform: rotate(45deg);
}

.f-tel {
  text-align: left;
}

.f-tel a {
  font-size: 32px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .f-tel a {
    font-size: clamp(1.75rem, 1.124rem + 3.13vw, 2rem);
  }
}

.f-tel img {
  width: 1.13em;
  vertical-align: middle;
  margin-right: .5em;
}

.f-tel small {
  display: block;
  font-size: 20px;
  text-align: left;
  padding-left: 70px;
}

@media screen and (max-width: 767px) {
  .f-tel small {
    font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem);
    padding-left: clamp(3.125rem, 2.678rem + 2.24vw, 3.75rem);
  }
}

.f-nav {
  padding: 30px 0;
  font-size: 18px;
}

.f-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2em;
}

.f-copy {
  text-align: center;
  background: #262626; /* 旧 #03313F（青系）。f-nav よりさらに一段暗いグレー */
  padding: 1em;
  font-size: 12px;
  font-weight: bold;
}

.img1 {
  margin-top: 10px;
}

.lp-low {
  position: relative;
  margin-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .lp-low {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 950px) {
  .lp-low {
    margin-top: 62px;
  }
}

@media screen and (max-width: 767px) {
  .lp-low {
    margin-top: 142px;
  }
}

.lp-low .ttl {
  text-align: center;
  color: #fff;
  position: absolute;
  width: 100%;
  bottom: 4vw;
  font-size: 36px;
}

@media screen and (max-width: 950px) {
  .lp-low .ttl {
    font-size: 30px;
    bottom: 50%;
    transform: translateY(50%);
  }
}

.lp-low img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width: 950px) {
  .lp-low img {
    height: 150px;
  }
}

.lp-inner {
  width: 840px;
  margin: 0 auto;
  max-width: calc(100% - 40px);
  color: #3A3A3A;
}

.lp-form section {
  border-top: solid 1px #C2C2C2;
  padding: 60px 0 20px;
}

.lp-form section:first-of-type {
  padding-top: 0;
  border: none;
}

.lp-form .ttl {
  font-weight: bold;
  color: var(--lp-accent);
  display: flex;
  gap: 1em;
  align-items: center;
  font-size: 24px;
  margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
  .lp-form .ttl {
    font-size: 18px;
  }
}

.lp-form .ttl img {
  width: 1.66em;
}

/* ★2026-08-13 アース指示：お問い合わせページの見出しアイコンを緑（テーマカラー）にする。
   ico-contact01〜03.svg は <img> で読み込む共有ファイルで、中身が fill="#0989B1" の
   直書き。全LPが同じファイルを見ているので SVG 自体は触らず、per-LP の filter で色を回す。
   canvas に #0989B1 を ctx.filter 付きで塗り、getImageData で実測して総当たりで求めた。
   → kiso は #0989B1 → #468cff（ico-contact01〜03 の3枚とも目標との差 0・2026-08-26 実測）。
   ★★`.faq-icon` とは【別式】。あちらの元色は **black** で、黒は彩度0のため
     hue-rotate/saturate が効かず、invert から作る必要がある（2026-08-16 判明）。
   ★アクセント色を変えたら、この filter と .faq-icon の filter を
     **それぞれの元色（#0989B1 / black）から**再計算すること。式を使い回さないこと。 */
.lp-body .lp-form .ttl img {
  filter: saturate(100%) hue-rotate(36deg) brightness(120%) contrast(120%);
}

.lp-form p {
  font-size: 16px;
  line-height: 2;
}

@media screen and (max-width: 767px) {
  .lp-form p {
    font-size: 14px;
  }
}

.lp-form p b {
  font-weight: bold;
  font-size: 1.33em;
}

.lp-form p em {
  display: block;
  font-style: normal;
  font-size: 24px;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .lp-form p em {
    font-size: 20px;
    margin-bottom: .5em;
  }
}

@media screen and (max-width: 767px) {
  .lp-form p small {
    display: block;
  }
}

.lp-form table {
  margin-top: 30px;
  width: 100%;
}

.lp-form th {
  font-weight: bold;
  font-size: 16px;
  position: relative;
  padding-bottom: .5em;
}

@media screen and (min-width: 768px) {
  .lp-form th {
    font-size: 18px;
    width: 300px;
  }
}

.lp-form td {
  padding: 0 0 2em;
}

@media screen and (max-width: 767px) {
  .lp-form th, .lp-form td {
    float: left;
    width: 100%;
  }
}

.lp-form .haveto, .lp-form .any {
  position: absolute;
  right: 5em;
  font-size: 13px;
  color: #fff;
  background: #8C8C8C;
  border-radius: .2em;
  padding: .2em .5em .1em;
  font-weight: normal;
}

@media screen and (max-width: 767px) {
  .lp-form .haveto, .lp-form .any {
    right: 0;
  }
}

.lp-form .wpcf7-form-control-wrap {
  display: inline-block;
  margin-right: 5px;
}

.lp-form .haveto {
  background: #FF6D00;
}

.lp-form td input, .lp-form td textarea {
  width: 100%;
  background: #F2F2F2;
  border: solid  1px #C7C7C7;
  padding: .8em 1em;
  box-sizing: border-box;
}

.lp-form #formbtn {
  display: block;
  margin: 35px auto;
  background: #FF6D00;
  width: 691px;
  max-width: 100%;
  color: #fff;
  font-weight: bold;
  border: none;
  font-size: 20px;
  padding: .8em 0;
}

.lp-form .wpcf7 {
  text-align: center;
}

.lp-envi {
  margin-bottom: 80px;
}

.lp-envi p {
  font-size: 16px;
  line-height: 2;
}

@media screen and (max-width: 767px) {
  .lp-envi p {
    font-size: 14px;
  }
}

.lp-envi .ttl {
  color: var(--lp-accent);
  font-weight: bold;
  font-size: 24px;
  position: relative;
  padding-left: 1.3em;
  margin: 1.5em 0 .6em;
}

@media screen and (max-width: 767px) {
  .lp-envi .ttl {
    font-size: 22px;
  }
}

.lp-envi .ttl:before {
  content: '';
  position: absolute;
  background: var(--lp-accent);
  width: 1em;
  height: .25em;
  top: .5em;
  left: 0;
}

.lp-envi dl {
  background: #F5F5F5;
  padding: 35px 55px;
  border-radius: 8px;
  margin: 20px 0 50px;
}

@media screen and (max-width: 767px) {
  .lp-envi dl {
    padding: 35px 20px;
  }
}

.lp-envi dl.a dd + dt {
  border-top: solid 1px #D9D9D9;
  padding-top: 25px;
  margin-top: 20px;
}

.lp-envi dt {
  color: var(--lp-accent);
  font-weight: bold;
  font-size: 20px;
  padding-bottom: .5em;
}

@media screen and (max-width: 767px) {
  .lp-envi dt {
    font-size: 19px;
  }
}

.lp-envi dd {
  line-height: 2;
}

.lp-envi dd + dt {
  margin-top: 40px;
}

.lp-app {
  margin-bottom: 80px;
}

@media screen and (min-width: 768px) {
  .lp-app {
    width: 1118px;
  }
}

.lp-app * {
  box-sizing: border-box;
}

.lp-app .ttl {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  letter-spacing: .08em;
  margin-bottom: 1.2em;
}

@media screen and (max-width: 767px) {
  .lp-app .ttl {
    font-size: 20px;
  }
}

.lp-app .ttl:before {
  content: '';
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: -1em;
  width: 3.33em;
  height: .25em;
  background: var(--lp-accent);
}

.lp-app .msg {
  text-align: center;
  max-width: 723px;
  background: #F5F5F5;
  margin: 0 auto 40px;
  padding: 20px;
  display: flex;
  align-items: center;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: .08em;
  gap: 1em;
  padding-left: 10%;
}

@media screen and (max-width: 767px) {
  .lp-app .msg {
    font-size: 22px;
    padding: 20px;
  }
}

.lp-app .msg em {
  color: #FF6D00;
}

.lp-app .msg img {
  width: 2.57em;
}

.lp-app .list {
  display: flex;
  gap: 60px;
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .lp-app .list {
    flex-direction: column;
  }
}

.lp-app .list dl {
  border-radius: 10px;
  background: #F5F5F5;
  position: relative;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .lp-app .list dl {
    width: calc(23% - 30px);
  }
}

.lp-app .list dl:first-child:before {
  content: none;
}

@media screen and (min-width: 768px) {
  .lp-app .list dl:last-child {
    width: calc(26% - 30px);
  }
}

.lp-app .list dl:last-child dt {
  background: #FF6D00;
}

.lp-app .list dl:last-child:before {
  background: #FF6D00;
}

.lp-app .list dl:before {
  content: '';
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  height: 55px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: var(--lp-accent);
  left: -40px;
}

@media screen and (max-width: 767px) {
  .lp-app .list dl:before {
    left: 50%;
    translate: -50% 0;
    top: -40px;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    width: 55px;
    height: 20px;
  }
}

.lp-app .list dt {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: var(--lp-accent);
  letter-spacing: .08em;
  text-align: center;
  border-radius: 10px 10px 0 0;
  padding-top: .3em;
}

.lp-app .list dt i {
  font-style: normal;
  font-size: 1.4em;
}

.lp-app .list dd {
  padding: 20px 15px;
}

.lp-app .list dd p {
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 1em;
}

.lp-app .list dd small {
  font-size: 14px;
  display: block;
  margin-top: 2em;
}

.lp-app .note {
  font-size: 14px;
  line-height: 1.9;
}

.lp-app figure {
  margin: 60px 0 80px;
}

.lp-app figure img {
  width: 100%;
}

.lp-app tbody tr:nth-child(even) {
  background: none;
}

.lp-app table {
  width: 100%;
}

.lp-app .ttl2 {
  background: var(--lp-accent);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: .5em 1em;
  position: relative;
  gap: 1em;
  padding-right: 55px;
  margin-bottom: 18px;
  cursor: pointer;
}

.lp-app .ttl2:before {
  content: '';
  position: absolute;
  font-size: 18px;
  width: .8em;
  height: .8em;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  right: 38px;
  top: 50%;
  transform: rotate(45deg) translateY(-0.8em);
}

.lp-app .ttl2.open + .qa {
  display: block;
}

.lp-app .qa {
  display: none;
}

.lp-app .qa > dl {
  background: #F0F0F0;
  padding: 20px;
  margin-bottom: 18px;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .lp-app .qa > dl {
    font-size: 14px;
  }
}

.lp-app .qa > dl > dt, .lp-app .qa > dl > dd {
  position: relative;
}

.lp-app .qa > dl > dt:before, .lp-app .qa > dl > dd:before {
  content: 'Q';
  position: absolute;
  color: var(--lp-accent);
  font-weight: bold;
  left: 0;
  font-size: 24px;
  top: 0;
  line-height: 1;
}

.lp-app .qa > dl > dt {
  font-weight: bold;
  padding-left: 32px;
  cursor: pointer;
  padding-right: 38px;
}

.lp-app .qa > dl > dt.open:after {
  border: none;
  border-top: 2px solid var(--lp-accent);
  border-left: 2px solid var(--lp-accent);
  margin-top: .35em;
}

.lp-app .qa > dl > dt.open + dd {
  display: block;
}

.lp-app .qa > dl > dt:after {
  content: '';
  position: absolute;
  font-size: 18px;
  width: .8em;
  height: .8em;
  border-bottom: 2px solid var(--lp-accent);
  border-right: 2px solid var(--lp-accent);
  right: 18px;
  top: 50%;
  transform: rotate(45deg) translateY(-0.8em);
}

.lp-app .qa > dl > dd {
  border-top: solid 1px #B9B9B9;
  padding: 15px 0;
  padding-left: 32px;
  margin-top: 15px;
}

.lp-app .qa > dl > dd:before {
  top: 16px;
  content: 'A';
}

.lp-app .qa .toggle {
  border: solid 1px #BEBEBE;
  padding: 1em;
  font-size: 14px;
  margin-top: 1em;
}

@media screen and (max-width: 767px) {
  .lp-app .qa .toggle {
    font-size: 13px;
  }
}

.lp-app .qa .toggle dt {
  color: #0944B1;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.lp-app .qa .toggle dt.open + dd {
  display: block;
  margin-top: 1em;
  line-height: 2;
}

.lp-app .qa dd dt:before, .lp-app .qa dd dd:before {
  content: none;
}

.lp-app .qa dd {
  display: none;
}

.lp-app .more, .lp-app .qa_more {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .lp-app .more {
    font-size: 18px;
  }
}

.float_cart_sp .buy {
  line-height: 55px !important;
  margin-top: 0 !important;
}

.hp_justify {
    text-align: justify;
	word-break: break-all;
}

#about .hp_justify {
	margin-bottom:20px;
}
#about .hp_justify:last-child {
	margin-bottom:0;
}
/*# sourceMappingURL=lp.css.map */

.float_cart_title {
  margin-bottom: 5px;
}


/* 旧特典（tokuten-haguruma / tokuten-img / tokuten-txt-box / tokuten-list）は
   2026-08-04 に削除（P7 で benefit-v2 へ移行し未使用になったため） */


.f-link a {
  color: var(--lp-accent);
}
.f-link li:last-child a::before {
  border-top: 2px solid var(--lp-accent);
  border-right: 2px solid var(--lp-accent);
}

/* ============================================================
   2026-07-20 基礎編（lp_koso-basic.css）からの横展開・追加ブロック
   ※ 対応する本文HTML（cp_bar / tk-cards / pbb-note / lc-cards /
      pw-cards）が本番へ反映されるまでは描画されない準備用スタイル。
      本文差し替え時に有効化される（CSSのみ先行整備）。
   ============================================================ */

/* --- キャンペーン帯（cp_bar）※キャンペーン実施中のみ本文で表示 --- */
.cp_flag.hp-pc_only {
  display: none !important;
}
/* ★帯の地色。既定は青緑 #28788C（koso-func / machining / motor / zairyou）だが、
   講座のアクセントと系統を合わせるため lp_<course>.css ごとに持っている。
   jusi は緑 #2A7F55、kiso は濃い青 #2a6ddb（＝--lp-accent-dark と同値）。
   ★他LPには影響しない。アクセント色を変えるときはこの帯も一緒に見直すこと。

   ★★2026-08-26 kiso：**この帯は本文に置かない**（アース判断）。
     kiso は定価＝販売価格＝4,378円で【割引が無い】ため、
     「定価より20%OFF」の文言が成立しない。CSSは他LPと揃えて残してあるだけ。
     追従カートの `期間限定[discount_rate]` も同じ理由で本文に入れない。 */
.cp_bar {
  width: 100%;
  background: #2a6ddb;
  color: #fff;
  padding: 24px 16px;
  box-sizing: border-box;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .cp_bar.hp-pc_only { display: block; }
}
.cp_bar__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  white-space: nowrap;
}
.cp_bar__label {
  font-size: 17px;
  background: #fff;
  color: #555;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 1px;
}
.cp_bar__main { font-size: 24px; }
.cp_bar__main b { font-size: 36px; color: #FFE24D; margin-left: 6px; }
.cp_bar__sep { width: 1px; height: 34px; background: rgba(255, 255, 255, .5); }
.cp_bar__date { font-size: 24px; font-weight: 800; }
.cp_bar__days {
  font-size: 18px;
  background: #FFE24D;
  color: #8A5700;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 800;
}

/* 特典見出しカッコ（tk-paren）・特典カード（spec_tokuten .tk-*）は
   2026-08-04 に削除（P5・P7 で price-v2／benefit-v2 へ移行し未使用になったため） */

/* --- 本講座注記（pbb-note）※本文を pbb-lead＋pbb-series に差し替えて使用 --- */
.program-bottom-box .pbb-note {
  width: 95%;
  text-align: left;
}
.program-bottom-box .pbb-lead {
  font-size: 18px;
  letter-spacing: 1.5px;
  line-height: 1.7;
  text-indent: -1em;
  padding-left: 1em;
  margin: 0 0 16px;
  width: auto;
  word-break: auto-phrase;
}
.program-bottom-box .pbb-series {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.program-bottom-box .pbb-series li {
  font-size: 18px;
  letter-spacing: 1.5px;
  line-height: 1.55;
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 14px;
  word-break: auto-phrase;
}
.program-bottom-box .pbb-series li:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .program-bottom-box .pbb-lead,
  .program-bottom-box .pbb-series li {
    font-size: 14px;
  }
}

/* --- 「3つの力」lc-cards ※本文を lc-cards 構成に差し替えて使用 --- */
.lc-cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 960px;
  margin: 24px auto 22px;
  flex-wrap: nowrap;
}
.learn-about h3 .lc-lead {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #2A3B44;
  margin-bottom: 4px;
}
.lc-card {
  flex: 1 1 0;
  background: transparent;
  border: none;
  border-radius: 16px;
  box-shadow: none;
  padding: 28px 26px 26px;
  position: relative;
  box-sizing: border-box;
}
.lc-num {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--lp-accent-mid);
  margin-bottom: 18px;
}
.lc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 2px auto 14px;
  background: transparent;
  border-radius: 0;
}
/* 260722 3つの力の画像をアイコン(92px正方形)→解説幅いっぱいの図版に拡大。
   機能設計編で図解画像に差し替えたため。width:100%(=カード解説幅)・height:autoで縦横比維持。 */
.lc-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(20, 60, 90, .20));
}
.lc-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #008DB5;
  margin: 0 0 12px;
}
.lc-badge {
  display: table;
  margin: -4px auto 12px;
  background: #EA6B26;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  padding: 4px 16px;
}
.lc-badge--ghost {
  visibility: hidden;
}
.lc-desc {
  font-size: 14px;
  line-height: 1.9;
  color: #4A5A64;
  text-align: left;
  margin: 0;
}
.lc-plus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: #8FC3D8;
  padding: 0 14px;
  flex: 0 0 auto;
  overflow: visible;
}
.lc-plus::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: #CFE2EC;
}
.lc-plus::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 144px;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 60, 90, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6FA0B6;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}
@media screen and (max-width: 950px) {
  .lc-cards {
    flex-direction: column;
    max-width: calc(100% - 24px);
    margin: 30px auto 16px;
  }
  .lc-plus {
    justify-content: center;
    padding: 8px 0;
    font-size: 34px;
  }
  .lc-plus::before,
  .lc-plus::after {
    display: none;
  }
}

/* --- 「2つの力」01/02 カード（pw-cards）※本文を pw-cards 構成に差し替えて使用 --- */
.pw-cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 74.3%;
  max-width: 892px;
  margin: 40px auto 40px;
}
.pw-card {
  flex: 1 1 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20, 60, 80, 0.06);
  padding: 34px 32px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}
.pw-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 92px solid #B4DBEA;
  border-left: 92px solid transparent;
  pointer-events: none;
}
.two-power .pw-card-title::before,
.two-power .pw-card-title::after,
.two-power .pw-item-title::before,
.two-power .pw-item-title::after {
  content: none !important;
  display: none !important;
}
.pw-num {
  display: block;
  position: relative;
  font-size: 56px;
  font-weight: 700;
  color: #B4DBEA;
  line-height: 1;
}
.two-power .pw-card-title {
  position: relative;
  font-size: 30px;
  font-weight: 700;
  color: #1580A8;
  margin: 8px 0 26px;
  padding-left: 14px;
  border-left: 5px solid #7FC0D8;
  line-height: 1.25;
}
.pw-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.pw-item--single {
  margin-top: 14px;
}
.pw-item-icon {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-item-icon img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.two-power .pw-item-body {
  text-align: left;
}
.two-power .pw-item-title {
  font-size: 20px;
  font-weight: 700;
  color: #22394A;
  margin: 4px 0 6px;
}
.two-power .pw-item-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #5A6A74;
}
.pw-divider {
  border-top: 1px solid #E4EEF3;
  margin: 22px 0;
}
.pw-multiply {
  display: flex;
  align-items: center;
  padding: 0 16px;
  flex: 0 0 auto;
}
.pw-multiply img {
  width: 56px;
  height: 56px;
}
@media screen and (max-width: 950px) {
  .pw-cards {
    flex-direction: column;
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    align-items: stretch;
  }
  .pw-multiply {
    justify-content: center;
    padding: 12px 0;
  }
  .pw-card {
    padding: 28px 22px;
    flex: 0 0 auto;
    width: 100%;
  }
  .two-power .pw-card-title {
    font-size: 24px;
  }
}

/* --- 個別フォントサイズ調整（基礎編 5636〜5642 に対応） --- */
/* 「2つの力」カード内の詳細解説 → 16px（pw-cards 有効化時） */
.two-power .pw-item-desc { font-size: 16px !important; }
/* 考え方／進め方／ツールの使い方 の下の説明 → 16px（lc-cards 有効化時） */
.lc-desc { font-size: 16px !important; }

/* --- タイポグラフィ調整（基礎編 5526〜5648 に対応）本文・見出し・箇条書きの底上げ --- */
/* h3見出し 24px → 28px */
/* 見出しサイズ(.feature-number h3 / .lined = 28px)は lp_editor.css に集約（!important撤去 2026-07-20） */

/* 本文18px: lp_editor.css の --font-size-txt:18px で定義（!important撤去 2026-07-20・機能設計編のみ先行） */
/* スマホ本文3セクション16pxは lp_editor.css に集約（2026-07-20） */

/* お悩み箇条書き（PC18px/スマホ16px）は lp_editor.css に集約（!important撤去 2026-07-20・機能設計編のみ先行） */

/* カリキュラム内箇条書き（PC17px/スマホ16px）は lp_editor.css に集約（!important撤去 2026-07-20・機能設計編のみ先行） */

/* 個別調整 */
/* .onayami-bottom（PC18px/スマホ16px）は lp_editor.css に集約（!important撤去 2026-07-20・機能設計編のみ先行） */
.learn-about-txt { font-size: 16px !important; }
/* .faq-txt-under はベースを直接 PC18px/スマホ16px に変更（!important撤去 2026-07-20・機能設計編のみ先行）。text-wrap/letter-spacing は維持 */
.faq-txt-under { text-wrap: pretty; }
@media screen and (max-width: 767px) {
  .faq-txt-under { letter-spacing: 1px; }
}

/* --- 業種アイコン ind-list（基礎編から移植。本文 feature-number-img 内を .ind-list に差し替えて使用） --- */
/* .ind-list/.ind-item/.ind-icon/.ind-label（業種アイコン）は lp_editor.css に集約（アイコンPC80px 2026-07-20） */

/* 専門用語アコーディオン term-acc／カリキュラム折りたたみ pl-toggle は
   2026-08-04 に削除（P3 で curriculum-accordion ＋ .cur-terms へ移行し未使用になったため） */

/* =========================================================================
   ここから新デザイン移植パック（2026-08-03 開始）
   移植元: lp_kousa.css L3842〜5593（kousa は lp_kyoudo.css 2026-07-28完成版から移植）
   方針  : 既存ルールは全て単一クラス（0,1,0〜0,2,0）なので、
           .lp-body スコープ（0,3,0）で確実に上書きする。旧ルールは残置し、
           3ページ（LP・お申込み・お問い合わせ）実機確認後にまとめて削除する。
   ========================================================================= */

/* ---- 講座アクセント色（この6行を書き換えるだけで他講座へ展開できる） ---- */
.lp-body {
  --lp-accent:      #468cff;  /* 主アクセント（旧LP style_kiso.css の主色・実測24回） */
  --lp-accent-dark: #2a6ddb;  /* ホバー・濃      （旧LPにも同値あり・実測5回） */
  --lp-accent-soft: #EDF4FF;  /* 見出し薄帯・面  （白 90.41%混色。zairyou の比率を踏襲） */
  --lp-accent-pale: #F6F9FF;  /* 最も薄い面      （白 94.98%混色） */
  --lp-accent-line: #D6E6FF;  /* 罫線            （白 78.08%混色） */
  --lp-accent-mid:  #B9D3FF;  /* 中間色（数字等）（白 62.10%混色） */
  /* ★kiso のアクセントは他LPより明るい青。--lp-accent-pale(#F6F9FF) と白カード(#FFF)の
     差は (9,6,0) で、B成分が同値。手順書 §12-3 の「カードが見えなくなる」事故を避けるため、
     pale の上に白カードを重ねる箇所は実機で境目が見えるか必ず確認すること。 */
}
/* 共通色（講座で変えない）: 紺 #17324D/#122D4F ／ 橙 #EF6C19/#F08300
   ／ CTA赤 #cc0000 ／ 価格赤 #e0261f */

/* ---- P1-① ファーストCTA「講座に申し込む」 ---- */
.lp-body .lp-cta-sec .lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  min-height: 64px;
  height: auto;
  margin: 0 auto;
  padding: 14px 28px;
  border: 0;
  border-radius: 10px;
  background: #cc0000 !important;
  box-shadow: 0 3px 0 #990000;
  color: #fff !important;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .035em;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}
.lp-body .lp-cta-sec .lp-cta:hover,
.lp-body .lp-cta-sec .lp-cta:focus {
  background: #b30000 !important;
  transform: translateY(1px);
  box-shadow: 0 3px 0 #990000;
}
@media screen and (max-width: 767px) {
  .lp-body .lp-cta-sec .lp-cta {
    min-height: 56px;
    height: auto;
    padding: 12px 18px;
    /* ★SPのCTA文字サイズの【最終決定箇所】（詳細度0-3-0で最強）。
       上方にある旧 .lp-cta の 22px / 17px はこれに負けるデッドコード。
       SP最適化で文字サイズを変えるときは、必ずこの行を編集すること。 */
    font-size: 16px;
    line-height: 1.45;
  }
}

/* ---- P1-② 「よくあるご質問・講座情報を見る」テキストリンク ---- */
.lp-body .lp-cta-sec .info-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: none;
  height: auto;
  margin: 10px 0 0;
  padding: 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lp-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.lp-body .lp-cta-sec .info-btn::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.lp-body .lp-cta-sec .info-btn::after { content: none; }
.lp-body .lp-cta-sec .info-btn:hover {
  color: var(--lp-accent-dark);
  text-decoration: underline;
  opacity: 1;
}
.lp-body .lp-cta-sec .info-btn span { display: none; }
@media screen and (max-width: 767px) {
  .lp-body .lp-cta-sec .info-btn {
    width: auto;
    height: auto;
    margin-top: 10px;
    padding: 8px 0;
    font-size: 14px;
    /* 320px幅で枠いっぱいになりはみ出すため、
       余白が足りないときだけ2行に折り返す（375px以上では1行のまま）。 */
    max-width: calc(100% - 32px);
    white-space: normal;
  }
}

/* ---- P2-③④ 特徴3カード＋閲覧環境（feature-overview） ----
   本文側の要件: <section class="feature-sec feature-overview"> と
   <ul class="box-list feature-overview__list"> の2クラス併記が必須。
   アイコンは白丸の上に載るため、白いPNGでは見えない。
   → /images/koso-basic/f-icon1〜3.svg（color="#0989B1"）を使う。 */
.lp-body .feature-sec.feature-overview .feature-container {
  box-sizing: border-box;
  padding: 54px 20px 64px;
  background: #fff;
}
.lp-body .feature-overview .feature-overview__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(1010px, 100%);
  margin: 0 auto;
}
.lp-body .feature-overview .feature-overview__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  min-height: 224px;
  margin: 0;
  padding: 26px 24px 24px;
  color: #fff;
  text-align: center;
  background: var(--lp-accent);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.lp-body .feature-overview .feature-overview__label {
  position: static;
  top: auto;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  margin: 0 0 13px;
  padding: 0;
  color: #fff;
  white-space: normal;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: none;
}
.lp-body .feature-overview .feature-overview__label .feature-icon {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.lp-body .feature-overview .feature-overview__label .feature-icon img,
.lp-body .feature-overview .feature-overview__label .feature-icon svg {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
/* 共通アイコン（images/icons/badge-*.svg）はインラインSVGで貼り、
   色は currentColor 経由で講座アクセント色にする。
   ※ <img> で読み込むと color が届かず既定の #333333 になる（images/icons/README.md ③参照） */
.lp-body .feature-overview .feature-overview__label .feature-icon svg {
  color: var(--lp-accent);
}
.lp-body .feature-overview .feature-overview__label p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.lp-body .feature-overview .feature-overview__main {
  margin: 0 0 16px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
}
.lp-body .feature-overview .feature-overview__desc {
  width: 100%;
  margin: auto 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
}
.lp-body .feature-overview .feature-overview__devices {
  box-sizing: border-box;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: auto;
  min-height: 126px;
  margin: 8px 0 0;
  padding: 22px 44px;
  color: #122D4F;
  text-align: left;
  background: var(--lp-accent-soft);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.lp-body .feature-overview .feature-overview__devices .feature-bottom-icon {
  position: static;
  flex: 0 0 174px;
  width: 174px;
  transform: none;
}
.lp-body .feature-overview .feature-overview__devices .feature-bottom-icon img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.lp-body .feature-overview .feature-overview__device-copy,
.lp-body .feature-overview .feature-overview__devices p {
  margin: 0;
}
.lp-body .feature-overview .feature-overview__device-title {
  color: #122D4F;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.lp-body .feature-overview .feature-overview__device-note {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
}
.lp-body .feature-overview .feature-overview__device-note strong {
  flex: 0 0 auto;
  color: var(--lp-accent);
  font-size: 15px;
}
.lp-body .feature-overview .feature-overview__device-note span {
  display: inline;
  margin: 0;
  color: #5F6C75;
  font-size: 14px;
  font-weight: 400;
}
.feature-overview__mobile-break { display: none; }

@media screen and (max-width: 900px) and (min-width: 681px) {
  .lp-body .feature-overview .feature-overview__list { gap: 16px; }
  .lp-body .feature-overview .feature-overview__card { padding-right: 16px; padding-left: 16px; }
  .lp-body .feature-overview .feature-overview__main { font-size: 25px; }
  .lp-body .feature-overview .feature-overview__desc { font-size: 14px; }
}

@media screen and (max-width: 680px) {
  .lp-body .feature-sec.feature-overview .feature-container { padding: 36px 16px 44px; }
  .lp-body .feature-overview .feature-overview__list {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }
  .lp-body .feature-overview .feature-overview__card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "icon label"
      "icon main"
      "icon desc";
    gap: 2px 14px;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 18px 20px;
    text-align: left;
  }
  .lp-body .feature-overview .feature-overview__label { display: contents; }
  .lp-body .feature-overview .feature-overview__label .feature-icon {
    grid-area: icon;
    align-self: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .lp-body .feature-overview .feature-overview__label .feature-icon img,
  .lp-body .feature-overview .feature-overview__label .feature-icon svg {
    width: 40px;
    height: 40px;
  }
  .lp-body .feature-overview .feature-overview__label p {
    grid-area: label;
    justify-self: start;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
  }
  .lp-body .feature-overview .feature-overview__main {
    grid-area: main;
    margin: 0;
    font-size: 25px;
    line-height: 1.3;
    text-align: left;
  }
  .lp-body .feature-overview .feature-overview__desc {
    grid-area: desc;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
  }
  .lp-body .feature-overview .feature-overview__devices {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 24px 18px;
    text-align: center;
  }
  .lp-body .feature-overview .feature-overview__devices .feature-bottom-icon {
    flex-basis: auto;
    width: 138px;
  }
  .lp-body .feature-overview .feature-overview__device-title { font-size: 18px; }
  .lp-body .feature-overview .feature-overview__device-note {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 7px;
  }
  .feature-overview__mobile-break { display: initial; }
}

/* ---- P3-③ 理解が深まる専門用語（cur-terms）----
   移植元: lp_sokusen.css L4316〜（製図LP seizu と同デザイン）
   旧「専門用語を見る」開閉式（.term-acc 一式）は廃止し、常時表示のピル型カードにする。
   ※ .term-acc 系のCSSは本文から参照が無くなり次第、まとめて削除する。 */
.lp-body .cur-terms {
  margin: 20px 0 0;
  padding: 18px 20px 20px;
  background: #FFF;
  border: 1px solid var(--lp-accent-line);
  border-radius: 10px;
}
.lp-body .cur-terms__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--lp-accent);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}
/* ラベル左の短い縦線（seizu・sokusen と同じ） */
.lp-body .cur-terms__label::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 15px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .cur-terms__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-body .cur-terms__list li {
  margin: 0;
  padding: 5px 12px;
  background: var(--lp-accent-soft);
  border-radius: 999px;
  color: var(--lp-accent-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.lp-body .cur-terms__list li::before,
.lp-body .cur-terms__list li::after { content: none; display: none; }

@media screen and (max-width: 767px) {
  .lp-body .cur-terms { padding: 14px 14px 16px; }
  .lp-body .cur-terms__list { gap: 6px; }
  .lp-body .cur-terms__list li { padding: 4px 10px; font-size: 12px; }
}

/* =========================================================================
   P3 カリキュラム・アコーディオン（全7章）※PC基本部分
   移植元: lp_kousa.css L4203〜4563（kousa は lp_kyoudo.css からの移植）
   除外  : L4565〜4599 kousa独自の専門用語カード（→ 当LPは .cur-terms を採用済み）
   決定  : 全章を閉じた状態で開始する（既定で開く章は作らない）
   ★未移植: SP用@media（lp_kousa.css L4650付近〜4806）／サンプル動画ボタン／専用JS
   ※本文が旧構造（.program-head / .slide-box）の間はこのCSSは一切発動しない
   ========================================================================= */

.lp-body .curriculum-accordion,
.lp-body .curriculum-accordion * { box-sizing: border-box; }

/* 旧 #program（flex・薄水色背景）を打ち消す。#program.curriculum-accordion = 1,2,0 */
.lp-body #program.curriculum-accordion {
  display: block;
  background: #FFF;
}

.lp-body .curriculum-accordion {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 0 0 84px;
  overflow: clip;
  background: #FFF;
  color: #122D4F;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.lp-body .curriculum-accordion__header {
  width: 100%;
  padding: 32px 20px 30px;
  background: var(--lp-accent-soft);
  border-bottom: 1px solid var(--lp-accent-line);
}
.lp-body .curriculum-accordion__header-inner { width: min(1000px, 100%); margin: 0 auto; }
.lp-body .curriculum-accordion__inner { width: min(1040px, 100%); margin: 24px auto 0; padding: 0 20px; }

.lp-body .curriculum-accordion .curriculum-accordion__title {
  position: relative;
  width: auto;
  margin: 0;
  padding: 30px 10px 0;
  background: transparent;
  border: 0;
  color: var(--lp-accent);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .03em;
  text-align: center;
}
.lp-body .curriculum-accordion .curriculum-accordion__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 52px;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  background: var(--lp-accent);
  transform: translateX(-50%);
}
.lp-body .curriculum-accordion__lead {
  margin: 12px auto 0;
  color: #53667E;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.lp-body .curriculum-accordion__controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 12px;
}
.lp-body .curriculum-accordion__control {
  min-height: 38px;
  padding: 7px 15px;
  appearance: none;
  background: #FFF;
  border: 1px solid var(--lp-accent-mid);
  border-radius: 6px;
  color: var(--lp-accent-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.lp-body .curriculum-accordion__control:hover { background: var(--lp-accent-soft); }

.lp-body .curriculum-accordion__list { display: grid; gap: 9px; }
.lp-body .curriculum-accordion__item {
  overflow: hidden;
  background: #FFF;
  border: 1px solid var(--lp-accent-line);
  border-radius: 9px;
  transition: background-color .2s ease, border-color .2s ease;
}
.lp-body .curriculum-accordion__item.is-open {
  background: var(--lp-accent-pale);
  border-color: var(--lp-accent-mid);
  border-left: 4px solid var(--lp-accent);
}

.lp-body .curriculum-accordion__toggle {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 12px 16px 12px 13px;
  appearance: none;
  background: transparent;
  border: 0;
  color: #122D4F;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lp-body .curriculum-accordion__toggle:hover { background: var(--lp-accent-pale); }

.lp-body .curriculum-accordion__number {
  display: inline-flex;
  /* ★jusi は章に枝番があり、バッジの文字数が揃わない（`第1章` と `第5章-1`）。
     `.curriculum-accordion__toggle` の1列目は `auto` なので、そのままだと
     項目ごとにバッジ幅が変わり、章タイトルの左端が縦に揃わない。
     いちばん長い `第5章-1`（14px太字で実測 約73px＋左右padding24px）が収まる幅を
     下限に固定して揃える。他講座は 68px。 */
  min-width: 88px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--lp-accent);
  color: #FFF;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  grid-column: 1;
  grid-row: 1 / 3;
}
.lp-body .curriculum-accordion__heading { display: block; min-width: 0; grid-column: 2; grid-row: 1; }
.lp-body .curriculum-accordion__chapter-title {
  display: block;
  color: #122D4F;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}
.lp-body .curriculum-accordion__summary {
  display: block;
  grid-column: 2;
  grid-row: 2;
  margin-top: -4px;
  color: #596B80;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.lp-body .curriculum-accordion__icon {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lp-accent-soft);
  color: var(--lp-accent);
  flex: 0 0 auto;
  grid-column: 3;
  grid-row: 1 / 3;
}
.lp-body .curriculum-accordion__icon::before,
.lp-body .curriculum-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.lp-body .curriculum-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.lp-body .curriculum-accordion__toggle[aria-expanded="true"] .curriculum-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.lp-body .curriculum-accordion__toggle:focus-visible,
.lp-body .curriculum-accordion__control:focus-visible,
.lp-body .curriculum-accordion__slide:focus-visible,
.lp-body .curriculum-lightbox__close:focus-visible {
  outline: 3px solid rgba(70, 140, 255,.28);
  outline-offset: 3px;
}

.lp-body .curriculum-accordion__panel { background: var(--lp-accent-pale); }
.lp-body .curriculum-accordion__panel[hidden] { display: none; }
/* JSが動かない環境では全章を開いたまま見せる（内容が読めなくならないように） */
.lp-body .curriculum-accordion.is-no-js .curriculum-accordion__panel[hidden] { display: block !important; }
.lp-body .curriculum-accordion.is-no-js .curriculum-accordion__controls { display: none; }

.lp-body .curriculum-accordion__content {
  padding: 24px 30px 30px;
  border-top: 1px solid var(--lp-accent-line);
}
.lp-body .curriculum-accordion__detail-title {
  position: relative;
  margin: 0 0 14px;
  padding-left: 14px;
  color: var(--lp-accent-dark);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}
.lp-body .curriculum-accordion__detail-title::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 4px;
  border-radius: 3px;
  background: var(--lp-accent);
}
.lp-body .curriculum-accordion__note {
  margin-left: 10px;
  color: #6B7B8E;
  font-size: 12px;
  font-weight: 500;
}

.lp-body .curriculum-accordion__learning-list { margin-bottom: 24px; }
.lp-body .curriculum-accordion__learning-list ul {
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 46px;
  list-style: none;
}
.lp-body .curriculum-accordion__learning-list li {
  position: relative;
  break-inside: avoid;
  margin: 0 0 9px;
  padding-left: 19px;
  color: #334B65;
  font-size: 15px;
  line-height: 1.75;
}
.lp-body .curriculum-accordion__learning-list li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-accent);
}

.lp-body .curriculum-accordion__slide-strip { width: 100%; overflow: hidden; }
.lp-body .curriculum-accordion__slide-fallback {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.lp-body .curriculum-accordion__slide-fallback img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--lp-accent-line);
  border-radius: 6px;
}
.lp-body .curriculum-accordion__slide-strip.is-enhanced .curriculum-accordion__slide-fallback { display: none; }
.lp-body .curriculum-accordion__slide-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.lp-body .curriculum-accordion__slide {
  display: block;
  width: 100%;
  /* ★★jusi では、この `.curriculum-accordion__slide-strip` 一式を【使っていない】。
     jusi のカリキュラム図は1章あたり PC 998×444 が1枚・SP 640×1093 が1枚の
     ペア方式で、4枚横並びの strip には収まらない（2026-08-25 アース判断：B案）。
     代わりに `.ki-cur__fig`（下の「カリキュラム図」ブロック）で <picture> 出し分けする。
     → strip 一式は現状デッドコード。仕上げ工程で未使用を確認してから削除すること。
     ★JS側の注意（lp_curriculum_accordion.js 実測）:
       strip に `data-slide-srcs` も `.curriculum-accordion__slide-fallback img` も
       置かなければ enhanceSlides() は早期 return して何もしない。だから
       `.ki-cur__fig` を content 直下に置くぶんには JS の改修は要らない。
       逆に fallback img を1枚だけ置くと、既定 count=4 で【スプライトとみなされ
       4分割】されて左1/4しか出ないので置かないこと。
     ★以下の比は machining（個別画像方式・760×428）から引き継いだ値。
       strip を復活させるなら元画像の実寸に合わせ直すこと。 */
  aspect-ratio: 760 / 428;
  padding: 0;
  appearance: none;
  background-color: #FFF;
  background-image: var(--slide-image);
  background-repeat: no-repeat;
  background-position: var(--slide-position) center;
  background-size: var(--slide-size);
  border: 1px solid var(--lp-accent-line);
  border-radius: 6px;
  cursor: default; /* クリック拡大は廃止（kousa 260730 の判断を踏襲） */
}

/* ---- P3 カリキュラム・アコーディオン SP（移植元: lp_kousa.css L4694〜4805）----
   除外: `.curriculum-accordion__terms` / `__terms-list` のSP指定（当LPは .cur-terms を採用）
   除外: ライトボックス（.curriculum-lightbox 一式）。クリック拡大を使わないため不要 */
@media screen and (max-width: 767px) {
  .lp-body .curriculum-accordion { padding: 0 0 60px; }
  .lp-body .curriculum-accordion__header { padding: 30px 14px 26px; }

  .lp-body .curriculum-accordion__inner {
    width: 100%;
    margin-top: 18px;
    padding: 0 14px;
  }

  .lp-body .curriculum-accordion .curriculum-accordion__title {
    padding: 25px 0 0;
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: .015em;
  }
  .lp-body .curriculum-accordion .curriculum-accordion__title::before {
    width: 44px;
    height: 3px;
  }

  .lp-body .curriculum-accordion__lead { margin: 10px 0 0; font-size: 13px; }
  .lp-body .curriculum-accordion__controls { justify-content: flex-end; }
  .lp-body .curriculum-accordion__control {
    flex: 0 1 auto;
    min-height: 40px;
    padding: 8px 13px;
    font-size: 12px;
  }

  .lp-body .curriculum-accordion__toggle {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }
  .lp-body .curriculum-accordion__number {
    /* PC と同じ理由で枝番ぶん広げる（他講座は 58px） */
    min-width: 74px;
    min-height: 34px;
    padding: 7px 9px;
    font-size: 13px;
  }
  .lp-body .curriculum-accordion__chapter-title { font-size: 16px; line-height: 1.45; }

  /* SPでは概要を番号バッジの下に回り込ませ、1行あたりの文字数を稼ぐ */
  .lp-body .curriculum-accordion__summary {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
  }
  .lp-body .curriculum-accordion__heading { grid-column: 2; grid-row: 1; }
  .lp-body .curriculum-accordion__number,
  .lp-body .curriculum-accordion__icon { grid-row: 1; }
  .lp-body .curriculum-accordion__icon { width: 32px; height: 32px; }

  .lp-body .curriculum-accordion__content { padding: 20px 17px 24px; }
  .lp-body .curriculum-accordion__detail-title { font-size: 16px; }
  .lp-body .curriculum-accordion__note {
    display: block;
    margin: 4px 0 0;
    font-size: 11px;
  }

  /* 学習内容はSPで1段組に */
  .lp-body .curriculum-accordion__learning-list ul { columns: 1; }
  .lp-body .curriculum-accordion__learning-list li { font-size: 14px; line-height: 1.72; }

  /* スライドはSPで横スクロール＋スナップ */
  .lp-body .curriculum-accordion__slide-strip {
    width: calc(100% + 34px);
    margin-left: -17px;
    padding: 0 17px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }
  .lp-body .curriculum-accordion__slide-track {
    display: flex;
    width: max-content;
    gap: 12px;
  }
  .lp-body .curriculum-accordion__slide {
    width: min(82vw, 330px);
    flex: 0 0 min(82vw, 330px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* =========================================================================
   .ki-cur__fig  カリキュラム図（PC/SP 出し分け）  2026-08-25 新設
   ─────────────────────────────────────────────────────────────────────────
   ★jusi で新設。machining / sheetmetal には無い。**kiso もこの方式**。
   経緯：jusi・kiso のカリキュラム図は 1章あたり PC 1枚 ＋ SP 1枚の【ペア】で、
   同じ内容をPC用・SP用に組み直したもの。寸法は両講座で完全に一致する。
     jusi PC /wp/wp-content/uploads/2021/06/curiculum_0X.png     998×444（横長）
     jusi SP /wp/wp-content/uploads/2021/06/curiculum_0X_sp.png  640×1093（縦長）
     kiso PC /wp/wp-content/uploads/2019/03/curiculumN.png       998×444（N=1〜6）
     kiso SP /wp/wp-content/uploads/2019/03/curiculumN_sp.png    640×1093
   ★kiso はアンダースコアもゼロ埋めも無い（`curiculum1.png`）。jusi と綴りが違うので注意。
   4枚横並びの `.curriculum-accordion__slide-strip` には収まらないため、
   `<picture>` で出し分ける専用枠を新設した（2026-08-25 アース判断・B案）。
   ※PC画像だけを375px幅に縮めると高さ167pxになり中の文字が読めない。
     SP画像を捨てる案（A案・C案）を採らなかったのはこのため。
   ※ファイル名の綴りは `curiculum`（r が1つ足りない）。旧LP由来のタイポだが
     サーバー上の実ファイル名なので【直さずそのまま使う】こと。

   本文側の書き方（`.curriculum-accordion__content` の直下に置く）:
     <div class="ki-cur__fig">
       <picture>
         <source media="(max-width:767px)" srcset="…/curiculum1_sp.png">
         <img src="…/curiculum1.png" alt="第1章 単位の基礎を学ぶ の講義スライド"
              width="998" height="444" loading="lazy">
       </picture>
     </div>
   ★`.curriculum-accordion__slide-strip` の中には入れないこと（JSが4分割する）。
   ========================================================================= */
.lp-body .ki-cur__fig {
  margin: 0 0 24px;
  text-align: center;
}
.lp-body .ki-cur__fig picture { display: block; }
/* セレクタに #kiso が要る理由は .ki-worry__hero img のコメント参照
   （旧CSS由来の `#kiso img` 系ルールに幅を奪われるため） */
.lp-body #kiso .ki-cur__fig img {
  display: block;
  width: 100%;
  max-width: 998px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--lp-accent-line);
  border-radius: 6px;
}
/* 図が複数ある章（現状は無いが、枝番をまとめる運用に変えたときのため）は縦に積む */
.lp-body .ki-cur__fig + .ki-cur__fig { margin-top: -8px; }

@media screen and (max-width: 767px) {
  .lp-body .ki-cur__fig { margin-bottom: 18px; }
  /* SP画像は 640×1093 の縦長。画面幅いっぱいに広げると縦に伸びすぎるので上限を掛ける */
  .lp-body #kiso .ki-cur__fig img { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-body .curriculum-accordion__item,
  .lp-body .curriculum-accordion__icon::before,
  .lp-body .curriculum-accordion__icon::after {
    transition: none;
  }
}

/* ---- ライトボックス（拡大表示）----
   クリック拡大は使わない方針だが、JS が
   <div class="curriculum-lightbox" id="curriculumLightbox" hidden> の存在を前提にしているため、
   要素とスタイルは残しておく（hidden のまま表示されない）。 */
.curriculum-lightbox[hidden] { display: none !important; }
.curriculum-lightbox {
  position: fixed;
  z-index: 100001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}
.curriculum-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 28, 42, .78);
  border: 0;
  cursor: zoom-out;
}
.curriculum-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(1100px, 96vw);
  max-height: 92vh;
  align-items: center;
  justify-content: center;
  padding: 50px 22px 22px;
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.curriculum-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 72px);
  width: auto;
  height: auto;
  margin: 0;
}
.curriculum-lightbox__close {
  position: absolute;
  top: 10px;
  right: 12px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  appearance: none;
  background: var(--lp-accent-soft);
  border: 0;
  border-radius: 50%;
  color: var(--lp-accent);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
body.curriculum-lightbox-open { overflow: hidden; }

@media screen and (max-width: 767px) {
  .curriculum-lightbox { padding: 12px; }
  .curriculum-lightbox__dialog { width: 100%; padding: 48px 10px 14px; }
}

/* ---- P3-④ サンプル動画ボタン（既存の .openVideo を再スタイル）----
   移植元: lp_sokusen.css L4363〜4412
   koso-basic は openVideo1〜7 ＋ videoPopup1〜7 の開閉JSが既に動いているため、
   kyoudo の .sample-video-btn[data-video] には置き換えず、既存要素の見た目だけ変える。
   （アース決定 2026-08-03：即戦力LPと同じ方式にする） */
.lp-body .curriculum-accordion__content .openVideo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: none;
  margin: 18px 0 4px;
  padding: 11px 22px;
  background: var(--lp-accent);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(70, 140, 255,.25);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.lp-body .curriculum-accordion__content .openVideo:hover {
  background: var(--lp-accent-dark);
}
.lp-body .curriculum-accordion__content .openVideo > p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}
.lp-body .curriculum-accordion__content .openVideo .v-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.lp-body .curriculum-accordion__content .openVideo .v-right img {
  width: 18px;
  height: auto;
  margin: 0;
}
/* 再生時間のバッジ */
.lp-body .curriculum-accordion__content .openVideo .v-right p {
  margin: 0;
  padding: 2px 9px;
  background: rgba(255, 255, 255, .22);
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* =========================================================================
   260803 P4 移植: study-sec「あなたのペースで、無理なく学習できます」＋日々の学習イメージ
   移植元: lp_kousa.css L4807〜5035（kyoudo → kousa の順に受け継がれたブロック）
   色は kousa のリテラルを var(--lp-accent*) に置換:
     #009999→--lp-accent / #007A7A→--lp-accent-dark / #F1F9F9→--lp-accent-pale
     #E1F3F3・#E8F6F6→--lp-accent-soft / #D6EAEA→--lp-accent-line
   rgba() は変数を使えないため直値で書いている（jusi では rgba(0,166,74,α)＝#00A64A に置換済み）。
   共通色（変えない）: オレンジ #E96512 ／ 紺 #122D4F ／ グレー #4A5568 #53667E #708090
                       スライダー土台 #E7ECEF ／ ドット #C7D2CE

   セクションは <section class="pace study-sec"> のまま。既存の .pace（flex・白背景）は
   詳細度で .lp-body .study-sec に負けるため残置して問題ない。
   旧 .pace-top / .pace-txt / .pace-style / .pace-box / .pace-icon / .pace-txt-bottom
   （L2347〜2514）は本文から消えたあとに削除する。
   ========================================================================= */
.mobile-copy-break { display: none; }

/* スマホ専用の改行ユーティリティ。本文に <br class="sp-break"> を置くと767px以下でだけ改行される */
.sp-break { display: none; }
@media screen and (max-width: 767px) {
  .sp-break { display: inline; }
}

/* PC専用の改行ユーティリティ。本文に <br class="pc-break"> を置くと768px以上でだけ改行される。
   `sp-break` のちょうど裏返し。
   ★2026-10-07 新設（アース指示「`.ki-need__note` の改行位置を整えて」）。
     素の <br> で改行位置を決めると、スマホ側でその位置が固定されてしまう。
     実測: `.ki-need__note` を意味の切れ目で3つに割ると 765 / 419 / 508px（PC・本文幅1000px）。
     これを 375px（SPは13px・左揃え・本文幅343px）に持っていくと、2つ目の塊が
     363px になって **343px をわずか20pxだけ超え、行末に1〜2文字の孤立行ができる**。
     → PCでだけ改行させ、SPは自然に流す。 */
.pc-break { display: inline; }
@media screen and (max-width: 767px) {
  .pc-break { display: none; }
}

.lp-body .study-sec {
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  padding: 60px max(20px, calc((100vw - 960px) / 2));
  box-sizing: border-box;
  background: var(--lp-accent-pale);
}
.lp-body .study-sec > * { max-width: 960px; margin-left: auto; margin-right: auto; }
/* 見出し（既存 section-title のライン・中央を流用、サイズと余白のみ調整） */
.lp-body .study-sec .section-title { width: auto; background: none; font-size: 33px; margin: 0 0 12px; padding-top: 0; }
.lp-body .study-sec .ss-lead { text-align: center; font-size: 16px; color: #4A5568; line-height: 1.7; margin: 0 0 44px; }
/* 3つの特徴（カード枠なし・アイコン左／見出しと説明文を右） */
.lp-body .study-sec .ss-cards {
  display: flex;
  gap: 0;
  margin: 0 auto 28px;
  padding: 0;
  list-style: none;
}
.lp-body .study-sec .ss-card {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 12px 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.lp-body .study-sec .ss-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 1px;
  background: rgba(70, 140, 255,.14);
}
.lp-body .study-sec .ss-ico {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--lp-accent-soft);
}
/* アイコン本体：SVGをマスクにしてアクセント色で塗る（薄い円の中央に配置）。カードごとにマスク画像を指定 */
.lp-body .study-sec .ss-ico::before { content: ""; position: absolute; top: 11px; left: 11px; right: 11px; bottom: 11px; background-color: var(--lp-accent); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.lp-body .study-sec .ss-card:nth-child(1) .ss-ico::before { -webkit-mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_time.svg); mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_time.svg); }
.lp-body .study-sec .ss-card:nth-child(2) .ss-ico::before { -webkit-mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_player.svg); mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_player.svg); }
.lp-body .study-sec .ss-card:nth-child(3) .ss-ico::before { -webkit-mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_replay.svg); mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_replay.svg); }
.lp-body .study-sec .ss-body { flex: 1 1 auto; min-width: 0; }
.lp-body .study-sec .ss-card-ttl {
  margin: 0 0 5px;
  color: var(--lp-accent);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}
.lp-body .study-sec .ss-card-desc {
  margin: 0;
  color: #53667E;
  font-size: 15px;
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
/* スライダー見出し（小＝オレンジ左右線／メイン＝濃紺） */
.lp-body .study-sec .ss-slider-head { text-align: center; margin: 34px auto 20px; }
.lp-body .study-sec .ss-sub { display: inline-flex; align-items: center; gap: 10px; color: #E96512; font-size: 14px; font-weight: 700; }
.lp-body .study-sec .ss-sub::before,
.lp-body .study-sec .ss-sub::after { content: ""; display: inline-block; width: 24px; height: 2px; background: #E96512; }
.lp-body .study-sec .ss-main { font-size: 25px; font-weight: 800; color: #122D4F; margin: 6px 0 0; }
/* 既存スライダー：内部の見出し・矢印画像は隠して自前見出しに置換 */
.lp-body .study-sec .dailystudies > h2,
.lp-body .study-sec .dailystudies > p.arrow { display: none; }
/* オレンジの矢印が一瞬表示される問題の対策。
   共通の lp.js が全ての .slider を img の矢印でslick初期化するため、本文のJSが
   unslick→再slick して自前の矢印（button.ss-arrow）に差し替えるまでの一瞬、
   テーマ側のオレンジ矢印が見えていた。img.slick-arrow だけを狙って常時非表示にする。 */
.lp-body .study-sec .dailystudies img.slick-arrow { display: none !important; }
.lp-body .study-sec .dailystudies { width: 100%; max-width: 860px; margin: 0 auto; }
/* スライダー土台の背景をグレー(#E7ECEF)に。中の画像カードは白のままなので画像の輪郭がはっきりする */
.lp-body .study-sec .dailystudies .slider { position: relative; background: #E7ECEF; border-radius: 14px; padding: 22px 0; }
/* 旧背景を打ち消して白地に。1枚表示とし、前後のスライドは見せない */
.lp-body .study-sec .dailystudies .slick-slide,
.lp-body .study-sec .dailystudies .box_ds { background: transparent; }
.lp-body .study-sec .dailystudies .box_ds { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0 8px; box-sizing: border-box; }
.lp-body .study-sec .dailystudies .slick-slide { opacity: 0; transition: opacity .3s; }
.lp-body .study-sec .dailystudies .slick-slide.slick-active,
.lp-body .study-sec .dailystudies .slick-center { opacity: 1; }
.lp-body .study-sec .box_ds .num { display: none; }
/* スライド内タイトル：画像に重ねず画像の上へ独立配置（全スライド同一位置・全スライド表示） */
.lp-body .study-sec .box_ds .title { order: 1; align-self: center; position: static; transform: none; z-index: auto; display: inline-block; background: var(--lp-accent-dark); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; padding: 5px 16px; border-radius: 999px; margin: 0 0 12px; }
.lp-body .study-sec .slick-slide:not(.slick-center) .box_ds .title { opacity: 1; }
/* 画像：白ボックス＋薄い枠 */
.lp-body .study-sec .box_ds .img { order: 2; align-self: center; width: 68%; margin: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--lp-accent-line); }
.lp-body .study-sec .slick-center .box_ds .img { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.lp-body .study-sec .box_ds .img img { width: 100%; height: auto; display: block; object-fit: contain; }
/* 画像下の説明文 */
.lp-body .study-sec .box_ds .txt { order: 3; display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 1.75; color: #4A5568; word-break: keep-all; }
.lp-body .study-sec .box_ds .txt .emp { font-weight: 700; color: #122D4F; }
.lp-body .study-sec .box_ds .txt .small { display: inline-block; font-size: 12.5px; color: #708090; }
/* 旧2カラム名残の p.txt{width:45%・text-align:left等} を打ち消し全幅・中央揃え */
.lp-body .study-sec .dailystudies .slider p.txt { width: 100%; max-width: 100%; float: none; text-align: center; margin: 12px 0 0; }

/* 画像下の箇条書きを中央配置＋左揃え */
.lp-body .study-sec .dailystudies .slider .txt.ss-point-copy {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 12px auto 0;
  text-align: left;
}
.lp-body .study-sec .ss-point-list { width: fit-content; margin: 0 auto; padding: 0; list-style: none; }
.lp-body .study-sec .ss-point-list li {
  position: relative;
  margin: 0;
  padding-left: 1em;
  color: #4a5568;
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}
.lp-body .study-sec .ss-point-list li::before { content: "・"; position: absolute; top: 0; left: 0; color: #4a5568; }
.lp-body .study-sec .txt.ss-point-copy .small {
  display: block;
  margin: 3px 0 0;
  padding: 0;
  color: #708090;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .lp-body .study-sec .ss-point-list li { font-size: 13px; }
  .lp-body .study-sec .txt.ss-point-copy .small { font-size: 11.5px; }
}
/* 矢印（白丸＋太いリング＋三角＝再生ボタン風） */
.lp-body .study-sec .dailystudies .slider .ss-arrow { width: 60px; height: 60px; display: flex !important; padding: 0; } /* !important: slickがインラインでdisplay:blockを書くため */
.lp-body .study-sec .ss-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; background: #fff; border: 8px solid var(--lp-accent); color: transparent; font-size: 0; line-height: 0; cursor: pointer; box-shadow: 0 3px 8px rgba(9, 122, 150, .20); transition: background .2s, border-color .2s; }
.lp-body .study-sec .ss-arrow:hover { background: var(--lp-accent-soft); border-color: var(--lp-accent-dark); }
.lp-body .study-sec .ss-arrow::before { content: ""; display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.lp-body .study-sec .ss-arrow:hover::before { border-right-color: var(--lp-accent-dark); border-left-color: var(--lp-accent-dark); }
.lp-body .study-sec .ss-prev { left: 60px; }
.lp-body .study-sec .ss-prev::before { border-right: 15px solid var(--lp-accent); margin-right: 4px; }
.lp-body .study-sec .ss-next { right: 60px; }
.lp-body .study-sec .ss-next::before { border-left: 15px solid var(--lp-accent); margin-left: 4px; }
/* ループ無効（infinite:false）：先頭で左矢印・末尾で右矢印を非表示 */
.lp-body .study-sec .ss-arrow.slick-disabled { display: none !important; }
/* ドット（選択中は横長） */
.lp-body .study-sec .dailystudies .slick-dots { position: static; display: flex; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; }
.lp-body .study-sec .dailystudies .slick-dots li { width: auto; height: auto; margin: 0; }
.lp-body .study-sec .dailystudies .slick-dots li button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #C7D2CE; }
.lp-body .study-sec .dailystudies .slick-dots li button::before { display: none; }
.lp-body .study-sec .dailystudies .slick-dots li.slick-active button { width: 22px; border-radius: 999px; background: var(--lp-accent); }
/* スライダー下 説明 */
.lp-body .study-sec .ss-slider-desc { text-align: center; font-size: 14px; color: #4A5568; line-height: 1.7; margin: 18px auto 0; }
.lp-body .study-sec .ss-slider-desc b { color: var(--lp-accent); }
/* スマホ（767px以下） */
@media screen and (max-width: 767px) {
  .lp-body .study-sec { padding: 40px 16px; }
  .lp-body .study-sec .section-title { font-size: 25px; }
  .lp-body .study-sec .ss-lead { margin-bottom: 30px; font-size: 14px; }
  .lp-body .study-sec .ss-cards { flex-direction: column; gap: 0; }
  .lp-body .study-sec .ss-card {
    flex: 0 0 auto;
    min-height: 0;
    gap: 14px;
    padding: 18px 10px;
  }
  .lp-body .study-sec .ss-card:not(:last-child)::after {
    top: auto;
    right: 10px;
    bottom: 0;
    left: 10px;
    width: auto;
    height: 1px;
  }
  .lp-body .study-sec .ss-ico { width: 52px; height: 52px; }
  .lp-body .study-sec .ss-ico::before { top: 11px; right: 11px; bottom: 11px; left: 11px; }
  .lp-body .study-sec .ss-card-ttl { white-space: normal; }
  .lp-body .study-sec .ss-main { font-size: 22px; }
  .lp-body .study-sec .dailystudies .slider { padding: 16px 0; }
  .lp-body .study-sec .dailystudies .box_ds { padding: 0 4px; }
  .lp-body .study-sec .box_ds .title { font-size: 12px; padding: 4px 12px; margin-bottom: 9px; }
  .lp-body .study-sec .box_ds .txt { font-size: 13px; }
  .lp-body .study-sec .box_ds .img { width: 100%; }
  .lp-body .study-sec .dailystudies .slider .ss-arrow { width: 50px; height: 50px; }
  .lp-body .study-sec .ss-arrow { border-width: 6px; }
  .lp-body .study-sec .ss-prev { left: 8px; } /* PC向け60pxをスマホでは端寄せにする */
  .lp-body .study-sec .ss-next { right: 8px; }
  .lp-body .study-sec .ss-prev::before,
  .lp-body .study-sec .ss-next::before { border-top-width: 8px; border-bottom-width: 8px; }
  .lp-body .study-sec .ss-prev::before { border-right-width: 12px; }
  .lp-body .study-sec .ss-next::before { border-left-width: 12px; }
}

/* =========================================================================
   260803 P5 移植: 料金・申込方法（price-v2）
   移植元: lp_kousa.css L5037〜5235（kyoudo → kousa の順に受け継がれたブロック）

   ★このブロックの色は、先頭の --pv2-* 変数だけで切り替わる設計。
     講座を増やすときは変数値の6行を書き換えれば済む（リテラルを探す必要がない）。
     kousa の teal #009999 系 → koso-basic の #0989B1 系に読み替えた。

   適用条件: 本文を <section id="price" class="price-v2"> にすること。
             price-v2 を付けるまでは既存の料金セクションに一切影響しない。
   ========================================================================= */
.lp-body #price.price-v2 {
  --pv2-teal: var(--lp-accent);       /* kousa #009999 */
  --pv2-teal-dark: var(--lp-accent-dark);  /* kousa #007a7a */
  --pv2-teal-soft: var(--lp-accent-soft);  /* kousa #e6f5f5 */
  --pv2-teal-pale: var(--lp-accent-pale);  /* kousa #f2fafa */
  --pv2-navy: #17324d;
  --pv2-text: #405266;
  --pv2-muted: #718096;
  --pv2-line: var(--lp-accent-line);       /* kousa #cfe5e5 */
  --pv2-orange: #ef6c19;
  --pv2-orange-soft: #fff7ed;
  --pv2-red: #df2f2f;
  --pv2-red-dark: #c92323;
  --pv2-white: #fff;
  position: relative;
  display: block; /* 旧 #price{display:flex} の打ち消し */
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  padding: 64px max(20px, calc((100vw - 960px) / 2)) 58px;
  box-sizing: border-box;
  background: var(--pv2-white);
  color: var(--pv2-text);
}
.lp-body #price.price-v2,
.lp-body #price.price-v2 *,
.lp-body #price.price-v2 *::before,
.lp-body #price.price-v2 *::after { box-sizing: border-box; }

.lp-body #price.price-v2 .pv2-title { width: auto; margin: 0 auto 8px; padding: 0; background: none; color: var(--pv2-teal); font-size: 32px; font-weight: 800; line-height: 1.4; text-align: center; }
.lp-body #price.price-v2 .pv2-title::before { content: ""; display: block; width: 52px; height: 4px; margin: 0 auto 20px; border-radius: 999px; background: var(--pv2-teal); }
.lp-body #price.price-v2 .pv2-lead { max-width: 760px; margin: 0 auto 44px; color: var(--pv2-text); font-size: 15px; font-weight: 600; line-height: 1.75; text-align: center; }
.lp-body #price.price-v2 .pv2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; width: 100%; max-width: 960px; margin: 0 auto 24px; align-items: stretch; }
.lp-body #price.price-v2 .pv2-card { min-width: 0; overflow: hidden; border: 1px solid var(--pv2-line); border-radius: 14px; background: var(--pv2-white); box-shadow: 0 4px 16px rgba(9, 90, 120, .07); }

/* 講座内容カード */
.lp-body #price.price-v2 .pv2-course { display: flex; flex-direction: column; padding: 28px 26px 24px; }
.lp-body #price.price-v2 .pv2-card-title { margin: 0 0 18px; color: var(--pv2-navy); font-size: 21px; font-weight: 800; line-height: 1.45; }
.lp-body #price.price-v2 .pv2-course-list { margin: 0; }
.lp-body #price.price-v2 .pv2-course-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid #E5EDF2; }
.lp-body #price.price-v2 .pv2-course-row:first-child { padding-top: 0; }
.lp-body #price.price-v2 .pv2-course-row:last-child { border-bottom: 0; }
.lp-body #price.price-v2 .pv2-course-row dt,
.lp-body #price.price-v2 .pv2-course-row dd { margin: 0; }
.lp-body #price.price-v2 .pv2-course-row dt { color: var(--pv2-teal); font-size: 14px; font-weight: 800; line-height: 1.65; }
.lp-body #price.price-v2 .pv2-course-row dd { color: var(--pv2-text); font-size: 14px; font-weight: 600; line-height: 1.65; }
.lp-body #price.price-v2 .pv2-inline-link { color: var(--pv2-teal); font-weight: 800; text-decoration: none; }
.lp-body #price.price-v2 .pv2-inline-link:hover { text-decoration: underline; }
.lp-body #price.price-v2 .pv2-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: auto 0 0; padding-top: 20px; }
.lp-body #price.price-v2 .pv2-metric { min-width: 0; padding: 14px 8px 12px; border-radius: 9px; background: var(--pv2-teal-soft); text-align: center; }
.lp-body #price.price-v2 .pv2-metric strong { display: block; margin: 0 0 3px; color: var(--pv2-teal); font-size: 21px; font-weight: 800; line-height: 1.25; }
.lp-body #price.price-v2 .pv2-metric span { display: block; color: var(--pv2-muted); font-size: 11px; font-weight: 700; line-height: 1.45; }
.lp-body #price.price-v2 .pv2-metric--time strong { font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }

/* 料金・申込みカード */
.lp-body #price.price-v2 .pv2-purchase { display: flex; flex-direction: column; background: #fffaf3; border-color: #f1dcc4; }
.lp-body #price.price-v2 .pv2-campaign { margin: 0; padding: 13px 18px; background: var(--pv2-orange); color: var(--pv2-white); font-size: 15px; font-weight: 800; line-height: 1.5; text-align: center; }
.lp-body #price.price-v2 .pv2-purchase-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 24px 22px; text-align: center; }
.lp-body #price.price-v2 .pv2-campaign-status { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px; }
.lp-body #price.price-v2 .pv2-campaign-period { margin: 0; color: var(--pv2-teal); font-size: 13px; font-weight: 800; line-height: 1.55; }
.lp-body #price.price-v2 .pv2-campaign-remain { margin: 0; padding: 4px 12px; border-radius: 999px; background: #fff0c9; color: var(--pv2-orange); font-size: 13px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.lp-body #price.price-v2 .pv2-regular-price { margin: 0 0 5px; color: #707070; font-size: 14px; line-height: 1.6; text-decoration: line-through; text-decoration-thickness: 1px; }
.lp-body #price.price-v2 .pv2-sale-label { margin: 0 0 2px; color: var(--pv2-navy); font-size: 13px; font-weight: 800; }
/* 割引が無いときは「定価（税抜）」、割引中は「販売価格（税抜）」に出し分ける。
   割引中かどうかは、[check_discount] の中でだけ出力される .pv2-campaign-status の有無で判定する。 */
.lp-body #price.price-v2 .pv2-sale-label::before { content: "定価（税抜）"; }
.lp-body #price.price-v2 .pv2-purchase-body:has(.pv2-campaign-status) .pv2-sale-label::before { content: "販売価格（税抜）"; }
.lp-body #price.price-v2 .pv2-sale-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 0 0 3px; color: var(--pv2-red); font-weight: 800; line-height: 1; white-space: nowrap; }
.lp-body #price.price-v2 .pv2-sale-price strong { font-size: 48px; letter-spacing: -1px; }
.lp-body #price.price-v2 .pv2-sale-price span { font-size: 18px; }
/* 税込価格は「（税込◯◯円）」を1行・18px・赤・800 で表示（他LPと統一）。
   金額は本文末尾のスクリプトが $(".pv2-tax .sale-in") に書き込むので span は残すこと。
   gap:0 は、括弧・金額・「円」が別フレックスアイテムになり隙間が入るのを防ぐため。 */
.lp-body #price.price-v2 .pv2-tax { display: inline-flex; align-items: baseline; align-self: center; gap: 0; margin: 3px auto 16px; padding: 5px 12px; border-radius: 7px; background: #fff0e5; color: var(--pv2-red); font-size: 18px; font-weight: 800; line-height: 1.4; }
.lp-body #price.price-v2 .pv2-tax span { color: inherit; font-size: inherit; font-weight: inherit; }
@media screen and (max-width: 767px) {
  .lp-body #price.price-v2 .pv2-tax { font-size: 16px; }
}
/* 申込ボタンは他のCTA（.lp-cta / .apply-v2-primary）と同じ #cc0000 で統一 */
.lp-body #price.price-v2 .pv2-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin: 0 0 10px; padding: 12px 18px; border: 0; border-radius: 7px; background: #CC0000; box-shadow: 0 3px 0 #990000; color: var(--pv2-white); font-size: 17px; font-weight: 800; line-height: 1.45; text-decoration: none; transition: background-color .2s, transform .2s; }
.lp-body #price.price-v2 .pv2-primary:hover { background: #B30000; transform: translateY(1px); }
.lp-body #price.price-v2 .pv2-payment-note { margin: auto 0 14px; padding-top: 14px; border-top: 1px solid #eadfce; color: var(--pv2-muted); font-size: 11px; line-height: 1.65; }
.lp-body #price.price-v2 .pv2-payment-note strong { color: var(--pv2-orange); }
.lp-body #price.price-v2 .pv2-installment { padding: 15px 16px 14px; border-radius: 10px; background: var(--pv2-teal-soft); color: var(--pv2-teal); }
.lp-body #price.price-v2 .pv2-installment-label { display: inline-block; margin: 0 0 3px; padding: 3px 12px; border-radius: 999px; background: var(--pv2-teal); color: var(--pv2-white); font-size: 11px; font-weight: 800; }
.lp-body #price.price-v2 .pv2-installment-price { margin: 0 0 2px; color: var(--pv2-teal); font-size: 14px; font-weight: 800; line-height: 1.4; }
.lp-body #price.price-v2 .pv2-installment-price strong { font-size: 27px; }
.lp-body #price.price-v2 .pv2-installment-note { margin: 0; color: var(--pv2-muted); font-size: 10px; line-height: 1.55; }

/* グループ割引 */
.lp-body #price.price-v2 .pv2-group { width: 100%; max-width: 960px; margin: 0 auto 20px; padding: 20px 20px 14px; border: 1px solid var(--pv2-line); border-radius: 12px; background: var(--pv2-teal-pale); }
.lp-body #price.price-v2 .pv2-subtitle { margin: 0 0 3px; color: var(--pv2-teal); font-size: 24px; font-weight: 800; line-height: 1.45; text-align: center; }
.lp-body #price.price-v2 .pv2-sublead { margin: 0 0 8px; color: var(--pv2-muted); font-size: 13px; font-weight: 600; line-height: 1.65; text-align: center; }
.lp-body #price.price-v2 .pv2-group-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.lp-body #price.price-v2 .pv2-group-badges span { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 14px; border: 1px solid var(--pv2-teal); border-radius: 999px; background: var(--pv2-white); color: var(--pv2-teal); font-size: 11px; font-weight: 800; line-height: 1.3; }
.lp-body #price.price-v2 .pv2-table-wrap { overflow: hidden; border: 1px solid var(--pv2-line); border-radius: 9px; background: var(--pv2-white); }
.lp-body #price.price-v2 .pv2-table { width: 100%; max-width: none; margin: 0; border-collapse: collapse; table-layout: fixed; background: var(--pv2-white); }
.lp-body #price.price-v2 .pv2-table th,
.lp-body #price.price-v2 .pv2-table td { height: auto; padding: 9px 14px; border: 0; border-bottom: 1px solid #E5EEF2; color: var(--pv2-text); font-size: 14px; line-height: 1.55; text-align: center; vertical-align: middle; }
.lp-body #price.price-v2 .pv2-table th { background: var(--pv2-teal); color: var(--pv2-white); font-size: 13px; font-weight: 800; }
.lp-body #price.price-v2 .pv2-table tbody tr:last-child td { border-bottom: 0; }
.lp-body #price.price-v2 .pv2-table tbody tr:nth-child(even) { background: var(--pv2-teal-pale); }
.lp-body #price.price-v2 .pv2-discount { color: var(--pv2-orange); font-weight: 800; }
.lp-body #price.price-v2 .pv2-quote-button { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 390px); min-height: 46px; padding: 10px 22px; border-radius: 8px; background: var(--pv2-orange); color: var(--pv2-white); font-size: 14px; font-weight: 800; line-height: 1.4; text-decoration: none; transition: background-color .2s; }
.lp-body #price.price-v2 .pv2-quote-button:hover { background: #d75a0d; }
.lp-body #price.price-v2 .pv2-table-contact { color: var(--pv2-teal-dark); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lp-body #price.price-v2 .pv2-table-contact:hover,
.lp-body #price.price-v2 .pv2-table-contact:focus { color: var(--pv2-orange); }
.lp-body #price.price-v2 .pv2-quote-action { margin: 16px 0 0; text-align: center; }
.lp-body #price.price-v2 .pv2-quote-action p { margin: 7px 0 0; color: var(--pv2-muted); font-size: 10px; line-height: 1.55; }
.lp-body #price.price-v2 .pv2-group-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.lp-body #price.price-v2 .pv2-group-notes li { margin: 0; color: var(--pv2-muted); font-size: 10px; line-height: 1.55; }

/* ご購入前の確認事項 */
.lp-body #price.price-v2 .pv2-notes { width: 100%; max-width: 960px; margin: 0 auto; padding: 22px 22px 20px; border: 1px solid var(--pv2-line); border-radius: 14px; background: #F7FBFD; }
.lp-body #price.price-v2 .pv2-notes-title { margin: 0 0 16px; color: var(--pv2-navy); font-size: 20px; font-weight: 800; line-height: 1.45; text-align: center; }
.lp-body #price.price-v2 .pv2-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lp-body #price.price-v2 .pv2-note-card { position: relative; min-width: 0; min-height: 126px; margin: 0; padding: 18px 16px 16px 56px; border: 1px solid #E2EDF3; border-radius: 10px; background: var(--pv2-white); }
.lp-body #price.price-v2 .pv2-note-card--warning { border-color: #f2c99f; background: var(--pv2-orange-soft); }
.lp-body #price.price-v2 .pv2-note-icon { position: absolute; top: 18px; left: 16px; width: 28px; height: 28px; background-color: var(--pv2-teal); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.lp-body #price.price-v2 .pv2-note-card--invoice .pv2-note-icon { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_invoice.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_invoice.svg"); }
.lp-body #price.price-v2 .pv2-note-card--receipt .pv2-note-icon { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_receipt.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_receipt.svg"); }
.lp-body #price.price-v2 .pv2-note-card--warning .pv2-note-icon { background-color: var(--pv2-orange); -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_note.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_note.svg"); }
.lp-body #price.price-v2 .pv2-note-heading { margin: 0 0 7px; color: var(--pv2-teal); font-size: 15px; font-weight: 800; line-height: 1.45; text-align: left; }
.lp-body #price.price-v2 .pv2-note-heading::before,
.lp-body #price.price-v2 .pv2-note-heading::after { content: none; display: none; }
.lp-body #price.price-v2 .pv2-note-card--warning .pv2-note-heading { color: var(--pv2-orange); }
.lp-body #price.price-v2 .pv2-note-text { margin: 0; color: var(--pv2-text); font-size: 12px; font-weight: 600; line-height: 1.7; text-align: left; }
.lp-body #price.price-v2 .pv2-refund-link { display: inline-flex; align-items: center; margin-top: 7px; color: var(--pv2-teal); font-size: 11px; font-weight: 800; line-height: 1.5; text-decoration: none; }
.lp-body #price.price-v2 .pv2-refund-link::after { content: " →"; margin-left: 3px; }
.lp-body #price.price-v2 .pv2-refund-link:hover { text-decoration: underline; }
.lp-body #price.price-v2 a:focus-visible { outline: 3px solid rgba(70, 140, 255,.35); outline-offset: 3px; }

/* 768〜959px: PC/タブレット境界の安全調整 */
@media screen and (max-width: 959px) {
  .lp-body #price.price-v2 { padding-right: 24px; padding-left: 24px; }
  .lp-body #price.price-v2 .pv2-top { gap: 18px; }
  .lp-body #price.price-v2 .pv2-course,
  .lp-body #price.price-v2 .pv2-purchase-body { padding-right: 20px; padding-left: 20px; }
  .lp-body #price.price-v2 .pv2-course-row { grid-template-columns: 92px minmax(0, 1fr); }
}

@media screen and (max-width: 767px) {
  .lp-body #price.price-v2 { padding: 42px 16px 38px; }
  .lp-body #price.price-v2 .pv2-title { font-size: 24px; }
  .lp-body #price.price-v2 .pv2-lead { margin-bottom: 24px; font-size: 14px; text-align: left; }
  .lp-body #price.price-v2 .pv2-top { grid-template-columns: minmax(0, 1fr); }
  .lp-body #price.price-v2 .pv2-course { padding: 22px 18px 20px; }
  .lp-body #price.price-v2 .pv2-card-title { font-size: 19px; }
  .lp-body #price.price-v2 .pv2-course-row { grid-template-columns: 86px minmax(0, 1fr); gap: 9px; }
  .lp-body #price.price-v2 .pv2-course-row dt,
  .lp-body #price.price-v2 .pv2-course-row dd { font-size: 13px; }
  .lp-body #price.price-v2 .pv2-metrics { gap: 7px; }
  .lp-body #price.price-v2 .pv2-metric { padding: 12px 5px 10px; }
  .lp-body #price.price-v2 .pv2-metric strong { font-size: 18px; }
  .lp-body #price.price-v2 .pv2-metric--time strong { font-size: 15px; }
  .lp-body #price.price-v2 .pv2-purchase-body { padding: 18px 16px 20px; }
  .lp-body #price.price-v2 .pv2-campaign-status { gap: 8px; }
  .lp-body #price.price-v2 .pv2-campaign-period,
  .lp-body #price.price-v2 .pv2-campaign-remain { font-size: 12px; }
  .lp-body #price.price-v2 .pv2-sale-price strong { font-size: clamp(38px, 13vw, 48px); }
  .lp-body #price.price-v2 .pv2-primary { font-size: 16px; }
  .lp-body #price.price-v2 .pv2-group { padding: 18px 10px 14px; }
  .lp-body #price.price-v2 .pv2-group-badges { margin-bottom: 12px; }
  .lp-body #price.price-v2 .pv2-subtitle { font-size: 21px; }
  .lp-body #price.price-v2 .pv2-table-wrap { overflow: visible; border: 0; background: transparent; }
  .lp-body #price.price-v2 .pv2-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0 8px; table-layout: auto; background: transparent; }
  .lp-body #price.price-v2 .pv2-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .lp-body #price.price-v2 .pv2-table tbody { display: block; }
  .lp-body #price.price-v2 .pv2-table tbody tr,
  .lp-body #price.price-v2 .pv2-table tbody tr:nth-child(even) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, auto); gap: 3px 12px; padding: 11px 13px; background: var(--pv2-white); border: 1px solid var(--pv2-line); border-radius: 8px; }
  .lp-body #price.price-v2 .pv2-table td { display: block; width: auto; padding: 0; border: 0; font-size: 13px; line-height: 1.5; text-align: left; }
  .lp-body #price.price-v2 .pv2-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 800; }
  .lp-body #price.price-v2 .pv2-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--pv2-orange); font-size: 12px; font-weight: 800; }
  .lp-body #price.price-v2 .pv2-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 800; text-align: right; }
  .lp-body #price.price-v2 .pv2-group-notes { display: block; }
  .lp-body #price.price-v2 .pv2-group-notes li { margin-bottom: 4px; }
  .lp-body #price.price-v2 .pv2-notes { padding: 20px 14px 16px; }
  .lp-body #price.price-v2 .pv2-notes-title { font-size: 19px; }
  .lp-body #price.price-v2 .pv2-note-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-body #price.price-v2 .pv2-note-card { min-height: 0; }
}

/* =========================================================================
   260803 P6 移植: お申込みからご利用開始まで（apply-v2）
   移植元: lp_kousa.css L5237〜5291（kyoudo → kousa の順に受け継がれたブロック）

   ★色はすべて --lp-accent* 変数を参照する。リテラルは共通色のみ。
     kousa の #009999 系 → koso-basic の #0989B1 系（変数で自動）。

   適用条件: 本文を <div class="moushikomi apply-v2"> にすること。
             apply-v2 を付けるまでは発動しない。
   ★このブロックの前提: .moushikomi は </section>（#price）の外に置く。
     旧 .stepper 一式（.step / .circle / .step-label / .step-icon）は
     L3006 付近で削除済み。
   アイコンはテーマ共通の apply_form / apply_payment / apply_mail /
   apply_start.svg を CSS mask で使う（4点ともサーバーに存在・実測済み）。
   ========================================================================= */
.lp-body .moushikomi.apply-v2 { width: 100%; padding: 50px 0 64px; background: #fff; }
.lp-body .apply-v2-panel { width: 100%; max-width: 960px; margin: 0 auto; padding: 42px 32px 34px; border: 1px solid var(--lp-accent-line); border-radius: 18px; background: var(--lp-accent-pale); box-sizing: border-box; }
.lp-body .moushikomi.apply-v2 h2.apply-v2-title { width: auto; margin: 0 0 10px; padding: 0; background: none; color: var(--lp-accent); font-size: 32px; font-weight: 800; line-height: 1.45; text-align: center; }
.lp-body .moushikomi.apply-v2 h2.apply-v2-title::before { content: ""; display: block; width: 52px; height: 4px; margin: 0 auto 18px; border-radius: 999px; background: var(--lp-accent); }
.lp-body .apply-v2-lead { margin: 0 0 44px; color: #405266; font-size: 15px; font-weight: 600; line-height: 1.75; text-align: center; }
.lp-body .apply-v2-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.lp-body .apply-v2-steps::before { content: ""; position: absolute; top: 83px; right: 12.5%; left: 12.5%; z-index: 0; height: 2px; background: var(--lp-accent-mid); }
.lp-body .apply-v2-step { position: relative; z-index: 1; min-width: 0; min-height: 0; margin: 0; padding: 0 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.lp-body .apply-v2-step:not(:last-child)::after { content: none; }
.lp-body .apply-v2-number { position: relative; top: auto; left: auto; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; margin: 0 auto 10px; padding: 0; border-radius: 50%; background: var(--lp-accent); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; letter-spacing: .04em; transform: none; box-sizing: border-box; }
.lp-body .apply-v2-icon { position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: var(--lp-accent-soft); box-shadow: none; overflow: visible; }
.lp-body .apply-v2-icon::before { content: ""; display: block; width: 38px; height: 38px; background-color: var(--lp-accent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.lp-body .apply-v2-icon--form::before { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_form.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_form.svg"); }
.lp-body .apply-v2-icon--payment::before { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_payment.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_payment.svg"); }
.lp-body .apply-v2-icon--mail::before { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_mail.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_mail.svg"); }
.lp-body .apply-v2-icon--start::before { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_start.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/apply_start.svg"); }
.lp-body .apply-v2-step-title { margin: 0 0 6px; color: var(--lp-accent); font-size: 19px; font-weight: 800; line-height: 1.45; }
.lp-body .apply-v2-step-text { margin: 0; color: #607181; font-size: 14px; font-weight: 600; line-height: 1.75; }
/* ★このコンポーネントは本文に素の <br> を持っているが、PCだと改行位置が合わないため
   まとめて殺してある。ただしそれだと**PCで改行位置を指定できない**ので、
   `pc-break` を付けた <br> だけは生かす（2026-10-07 アース指示「改行調整して」）。
   詳細度は .lp-body .apply-v2-step-text br = (0,2,1) なので、
   .pc-break (0,1,0) では勝てない。**必ずこの専用ルールで上書きすること。** */
.lp-body .apply-v2-step-text br { display: none; }
.lp-body .apply-v2-step-text br.pc-break { display: inline; }
@media screen and (max-width: 767px) {
  .lp-body .apply-v2-step-text br.pc-break { display: none; }
  /* SPは1枠が約160pxしかなく、PCとは違う位置で割る必要がある。
     素の <br> は上のルールで殺されているので、`sp-break` も明示的に生かす */
  .lp-body .apply-v2-step-text br.sp-break { display: inline; }
}
.lp-body .apply-v2-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 32px auto 0; }
.lp-body .apply-v2-cta .over-cta { position: static; margin: 0 0 2px; padding: 0; background: none; color: #ef6c19; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; text-align: center; }
.lp-body .apply-v2-cta .over-cta::before,
.lp-body .apply-v2-cta .over-cta::after { content: none; }
.lp-body .apply-v2-primary { display: inline-flex; align-items: center; justify-content: center; height: auto; margin: 0 auto; border: 0; width: 100%; max-width: 480px; min-height: 64px; padding: 14px 28px; border-radius: 10px; background: #cc0000; box-shadow: 0 3px 0 #990000; color: #fff !important; font-size: 20px; font-weight: 800; letter-spacing: .035em; line-height: 1.45; text-decoration: none; box-sizing: border-box; transition: background-color .2s, transform .2s; }
.lp-body .apply-v2-primary:hover { background: #b30000; transform: translateY(1px); }
.lp-body .apply-v2-cta .info-btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: auto; max-width: none; height: auto; margin: 10px 0 0; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; color: var(--lp-accent); font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; text-align: center; text-decoration: none; white-space: nowrap; }
.lp-body .apply-v2-cta .info-btn::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lp-accent); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.lp-body .apply-v2-cta .info-btn::after { content: none; }
.lp-body .apply-v2-cta .info-btn:hover { color: var(--lp-accent-dark); text-decoration: underline; opacity: 1; }
.lp-body .apply-v2-cta .info-btn span { display: none; }

@media screen and (max-width: 767px) {
  .lp-body .moushikomi.apply-v2 { padding: 36px 16px 46px; }
  .lp-body .apply-v2-panel { padding: 34px 18px 28px; }
  .lp-body .moushikomi.apply-v2 h2.apply-v2-title { font-size: 24px; }
  .lp-body .apply-v2-lead { margin-bottom: 28px; font-size: 14px; text-align: left; }
  .lp-body .apply-v2-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .apply-v2-steps::before { top: 19px; right: auto; bottom: 19px; left: 18px; width: 2px; height: auto; }
  .lp-body .apply-v2-step { display: grid; grid-template-columns: 40px 58px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: start; min-height: 0; padding: 0 0 28px; text-align: left; }
  .lp-body .apply-v2-step:last-child { padding-bottom: 0; }
  .lp-body .apply-v2-number { grid-column: 1; grid-row: 1 / 3; align-self: start; width: 38px; min-width: 38px; height: 38px; margin: 0; }
  .lp-body .apply-v2-icon { grid-column: 2; grid-row: 1 / 3; width: 56px; height: 56px; margin: 0; }
  .lp-body .apply-v2-icon::before { width: 30px; height: 30px; }
  .lp-body .apply-v2-step-title { grid-column: 3; grid-row: 1; margin: 0 0 4px; font-size: 18px; }
  .lp-body .apply-v2-step-text { grid-column: 3; grid-row: 2; }
  .lp-body .apply-v2-primary { min-height: 56px; padding: 12px 18px; font-size: 16px; }
  .lp-body .apply-v2-cta .info-btn { width: auto; height: auto; margin-top: 10px; padding: 8px 0; font-size: 14px; max-width: calc(100% - 8px); white-space: normal; }
}

/* =========================================================================
   260803 P7 移植: 受講特典（benefit-v2）＋詳細モーダル
   移植元: lp_kousa.css L5292〜5401（kyoudo → kousa の順に受け継がれたブロック）

   ★モーダルはCSSの :target のみで動作（JS不要）。
   ★色はすべて --lp-accent* 変数を参照する。オレンジ #EF6C19 とクリーム系
     （#FFF5E8 / #FFFCF7 / #EED7BC 等）は全講座共通なのでリテラルのまま。
   ★koso-basic は特典3件なので --2 修飾子は使わない（既定の3カラム）。
     使うのは koso-plan の4件（2×2）のみ。

   適用条件: 本文を <section class="benefit-v2" id="tokuten"> にすること。
   旧 .tokuten 一式は L3006 付近で削除済み。
   ========================================================================= */
.lp-body .benefit-v2,
.lp-body .benefit-v2 * { box-sizing: border-box; }

.lp-body .benefit-v2 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 80px 20px 74px;
  background: #FFF5E8;
  color: #172B49;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.lp-body .benefit-v2__inner { width: min(1120px, 100%); margin: 0 auto; }
.lp-body .benefit-v2 .benefit-v2__title { position: relative; width: auto; margin: 0; padding: 30px 20px 0; color: var(--lp-accent); background: transparent; border: 0; font-size: 34px; font-weight: 800; line-height: 1.45; letter-spacing: .04em; text-align: center; }
.lp-body .benefit-v2 .benefit-v2__title::before { content: ""; position: absolute; top: 0; left: 50%; width: 52px; height: 4px; border-radius: 999px; background: var(--lp-accent); transform: translateX(-50%); }
.lp-body .benefit-v2__lead { margin: 14px auto 44px; color: #44566C; font-size: 16px; line-height: 1.8; letter-spacing: .02em; text-align: center; }
.lp-body .benefit-v2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
/* 特典2点用（公差LP）／4点なら plan で 2×2 に使う。3点は既定のまま */
.lp-body .benefit-v2__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(760px, 100%); margin: 0 auto; }
/* scroll-margin-top: モーダルを閉じたとき、開いたカードの位置に戻すための調整。
   閉じるリンクは各カードの id を指す。固定表示は上部32pxのバーのみ
   （html側に scroll-padding-top:32px あり）なので実効オフセットは 32＋24＝56px。 */
.lp-body .benefit-v2-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: #FFF; border: 1px solid #EED7BC; border-radius: 12px; box-shadow: 0 6px 20px rgba(23, 43, 73, .06); scroll-margin-top: 24px; }
.lp-body #anc_tokuten { scroll-margin-top: 24px; }
.lp-body .benefit-v2-card__number { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; width: 66px; height: 66px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #EF6C19; color: #FFF; font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: .02em; box-shadow: 0 3px 10px rgba(239, 108, 25, .22); }
.lp-body .benefit-v2-card__number small { margin-bottom: 4px; color: inherit; font-size: 12px; font-weight: 700; }
.lp-body .benefit-v2-card__image { position: relative; display: flex; height: auto; aspect-ratio: 16 / 9; align-items: center; justify-content: center; overflow: hidden; padding: 0; background: #FFFCF7; border-bottom: 1px solid #F3E4D3; order: 1; }
.lp-body .benefit-v2-card__image img { display: block; width: 100%; max-width: 100%; height: 100%; margin: 0; object-fit: contain; }
.lp-body .benefit-v2-card__body { display: flex; flex: 1; flex-direction: column; order: 3; padding: 0 24px 24px; text-align: center; }
.lp-body .benefit-v2-card__heading { order: 2; padding: 22px 24px 0; text-align: center; }
.lp-body .benefit-v2-card__catch { min-height: 1.6em; margin: 0 0 8px; color: #EF6C19; font-size: 15px; font-weight: 800; line-height: 1.6; letter-spacing: .01em; }
.lp-body .benefit-v2-card h3 { margin: 0; padding: 0; color: #172B49; background: transparent; border: 0; font-size: 22px; font-weight: 800; line-height: 1.45; letter-spacing: .01em; }
.lp-body .benefit-v2-card h3::before,
.lp-body .benefit-v2-card h3::after { display: none; content: none; }
.lp-body .benefit-v2-card__format { margin: 7px 0 13px; color: #EF6C19; font-size: 15px; font-weight: 800; line-height: 1.5; }
.lp-body .benefit-v2-card__description { margin: 0 0 20px; color: #526275; font-size: 15px; line-height: 1.85; letter-spacing: .01em; text-align: left; }
.lp-body .benefit-v2-card__detail { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 5px; margin: auto auto 0; padding: 8px 12px; appearance: none; background: transparent; border: 0; color: var(--lp-accent); font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1.5; cursor: pointer; text-decoration: none; }
.lp-body .benefit-v2-card__detail:hover,
.lp-body .benefit-v2-card__detail:focus-visible { color: var(--lp-accent-dark); text-decoration: underline; }
.lp-body .benefit-v2-card__detail:focus-visible,
.lp-body .benefit-v2-modal__close:focus-visible { outline: 3px solid rgba(239, 108, 25, .35); outline-offset: 3px; }
.lp-body .benefit-v2__note { margin: 24px 0 0; color: #6D7887; font-size: 13px; line-height: 1.7; text-align: center; }
.lp-body .benefit-v2__no-break { white-space: nowrap; }

.benefit-v2-modal { position: fixed; z-index: 100000; inset: 0; display: none; place-items: center; padding: 24px; }
.benefit-v2-modal:target { display: grid; }
.benefit-v2-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 31, 44, .72); }
.benefit-v2-modal__dialog { position: relative; z-index: 1; width: min(920px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 34px 38px 38px; background: #FFF; border-radius: 16px; box-shadow: 0 20px 70px rgba(0, 0, 0, .28); color: #172B49; outline: none; }
.benefit-v2-modal__close { position: absolute; top: 14px; right: 16px; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; appearance: none; background: var(--lp-accent-soft); border: 0; border-radius: 50%; color: var(--lp-accent); font-size: 28px; line-height: 1; cursor: pointer; text-decoration: none !important; }
.benefit-v2-modal__close:hover,
.benefit-v2-modal__close:focus,
.benefit-v2-modal__close:visited { color: var(--lp-accent); text-decoration: none !important; }
.benefit-v2-modal__eyebrow { margin: 0 0 4px; color: #EF6C19; font-size: 14px; font-weight: 800; text-align: center; }
.benefit-v2-modal__title { margin: 0 0 28px; color: var(--lp-accent); font-size: 28px; font-weight: 800; line-height: 1.5; text-align: center; }
.lp-body .benefit-v2-modal .benefit-v2-modal__title { width: auto; margin: 0 0 28px; padding: 0; background: transparent; color: var(--lp-accent); font-size: 28px; line-height: 1.5; letter-spacing: .02em; text-align: center; }
.lp-body .benefit-v2-modal .benefit-v2-modal__title::before,
.lp-body .benefit-v2-modal .benefit-v2-modal__title::after { display: none; content: none; }
.benefit-v2-modal__panel { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.25fr); gap: 30px; align-items: center; }
.benefit-v2-modal__visual { display: flex; height: auto; aspect-ratio: 1 / 1; align-items: center; justify-content: center; overflow: hidden; padding: 0; background: #FFF9F0; border: 1px solid #F0DECA; border-radius: 10px; }
.benefit-v2-modal__visual img { display: block; width: 100%; max-width: 100%; height: 100%; margin: 0; object-fit: contain; }
.benefit-v2-modal__number { margin: 0 0 6px; color: #EF6C19; font-size: 14px; font-weight: 800; }
.benefit-v2-modal__content h3 { margin: 0 0 14px; color: #172B49; font-size: 25px; font-weight: 800; line-height: 1.45; }
.benefit-v2-modal__content > p:not(.benefit-v2-modal__number) { margin: 0 0 20px; color: #4A5D72; font-size: 15px; line-height: 1.9; }
.benefit-v2-modal__content dl { margin: 0; }
.benefit-v2-modal__content dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 13px 0; border-top: 1px solid var(--lp-accent-line); }
.benefit-v2-modal__content dt { color: var(--lp-accent); font-size: 14px; font-weight: 800; }
.benefit-v2-modal__content dd { margin: 0; color: #4A5D72; font-size: 14px; line-height: 1.75; }

@media screen and (max-width: 900px) {
  .lp-body .benefit-v2__grid,
  .lp-body .benefit-v2__grid--2 { grid-template-columns: 1fr; width: min(520px, 100%); margin: 0 auto; }
  .lp-body .benefit-v2-card__image { height: auto; }
}

@media screen and (max-width: 767px) {
  .lp-body #anc_tokuten { scroll-margin-top: 64px; }
  .lp-body .benefit-v2 { padding: 58px 16px 54px; }
  .lp-body .benefit-v2 .benefit-v2__title { padding: 25px 0 0; font-size: 26px; line-height: 1.5; letter-spacing: .02em; }
  .lp-body .benefit-v2 .benefit-v2__title::before { width: 44px; height: 3px; }
  .lp-body .benefit-v2__lead { margin: 12px 0 28px; font-size: 14px; line-height: 1.8; }
  .lp-body .benefit-v2__grid { gap: 18px; }
  .lp-body .benefit-v2-card__number { top: 14px; left: 14px; width: 60px; height: 60px; font-size: 24px; }
  .lp-body .benefit-v2-card__body { padding: 0 20px 22px; }
  .lp-body .benefit-v2-card__heading { order: 1; padding: 78px 20px 16px; }
  .lp-body .benefit-v2-card__image { order: 2; height: auto; }
  .lp-body .benefit-v2-card__catch { min-height: 0; font-size: 14px; }
  .lp-body .benefit-v2-card h3 { font-size: 21px; }
  .lp-body .benefit-v2-card__format,
  .lp-body .benefit-v2-card__description,
  .lp-body .benefit-v2-card__detail { font-size: 14px; }
  .benefit-v2-modal { align-items: end; padding: 12px; }
  .benefit-v2-modal__dialog { width: 100%; max-height: calc(100vh - 24px); padding: 28px 20px 26px; border-radius: 14px; }
  .benefit-v2-modal__close { top: 10px; right: 10px; }
  .benefit-v2-modal__title { margin-bottom: 20px; padding: 0 38px; font-size: 22px; }
  .benefit-v2-modal__panel { grid-template-columns: 1fr; gap: 20px; }
  .benefit-v2-modal__visual { height: auto; }
  .benefit-v2-modal__content h3 { font-size: 21px; }
  .benefit-v2-modal__content dl > div { grid-template-columns: 72px minmax(0, 1fr); }
}

/* =========================================================================
   260803 P8 移植: お申込みページ専用（opf- / opp- / opn__）
   移植元: lp_kousa.css L5403〜5598（kyoudo → kousa の順に受け継がれたブロック）

   ★スコープを #kousa-order → #kiso-order に読み替えている。
     本文の申込ページ（koso-basic_paidseminar-order）のラッパーIDを
     必ず id="koso-basic-order" にすること。付けるまで一切発動しない。
   ★色は --lp-accent* 変数を参照。共通色（紺 #17324d／橙 #f08300／
     価格赤 #e0261f／カート赤 #c00／グレー系）はリテラルのまま。
     kousa の #EEF7F7 と #F2FAFA はどちらも極薄なので pale に寄せた。
   アイコンはテーマ共通の gai_invoice / gai_receipt / gai_note.svg を
   CSS mask で使う（3点ともサーバーに存在・実測済み）。
   ========================================================================= */
.lp-body:has(#kiso-order) header.l-header.p-header .p-header__inner__bottom,
.lp-body:has(#kiso-order) header.l-header.p-header .p-header__float { display: none !important; }

.lp-body:has(#kiso-order) .order-back-bar { position: absolute; top: 28px; left: max(40px, calc(50% - 520px)); z-index: 2; background: transparent; padding: 0; }
.lp-body:has(#kiso-order) .order-back-bar__inner { max-width: none; margin: 0; padding: 0; }
.lp-body:has(#kiso-order) .order-back-bar a { display: inline-flex; align-items: center; color: var(--lp-accent); font-weight: 700; font-size: 14px; text-decoration: none; }
.lp-body:has(#kiso-order) .order-back-bar a:hover,
.lp-body:has(#kiso-order) .order-back-bar a:focus { text-decoration: none; }
.lp-body:has(#kiso-order) .order-back-bar a::before { content: "←"; margin-right: 6px; text-decoration: none; }

.lp-body:has(#kiso-order) .lp-low { background: var(--lp-accent-pale); position: relative; margin-bottom: 0; padding: 34px 20px 26px; height: auto; }
.lp-body:has(#kiso-order) .lp-low img { display: none; }
.lp-body:has(#kiso-order) .lp-low .ttl { position: static; color: #17324d; transform: none; bottom: auto; width: auto; font-size: 32px; font-weight: 800; text-align: center; }
.lp-body:has(#kiso-order) .lp-low .ttl::before { content: ""; display: block; width: 52px; height: 4px; background: var(--lp-accent); margin: 0 auto 16px; }
.lp-body:has(#kiso-order) .lp-low .order-title-row { display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; }
.lp-body:has(#kiso-order) .lp-low .order-course-title,
.lp-body:has(#kiso-order) .lp-low .order-page-title { display: block; }
.lp-body:has(#kiso-order) .lp-low .order-course-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; }
.lp-body:has(#kiso-order) .lp-low .order-page-title { font-size: inherit; line-height: 1.4; }
.lp-body:has(#kiso-order) .lp-low .op-sub { max-width: 600px; margin: 10px auto 0; color: #718096; font-size: 14px; font-weight: 600; line-height: 1.7; text-align: center; }
#kiso-order > section:first-child { padding-top: 42px; }

/* 4ステップ */
#kiso-order .opf-heading { text-align: center; color: #17324d; font-size: 24px; font-weight: 800; margin: 0 0 30px; }
#kiso-order .opf-heading::before { content: none !important; display: none !important; }
#kiso-order .opf-steps { display: flex; max-width: 760px; margin: 0 auto; }
#kiso-order .opf-step { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 34px; }
#kiso-order .opf-step::before { content: ""; position: absolute; top: 55px; left: -50%; width: 100%; height: 2px; background: var(--lp-accent-line); z-index: 0; }
#kiso-order .opf-step:first-child::before { display: none; }
#kiso-order .opf-circle { position: relative; z-index: 1; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--lp-accent-mid); background: #fff; color: var(--lp-accent); font-size: 18px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; }
#kiso-order .opf-step--current .opf-circle { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; }
#kiso-order .opf-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--lp-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 3px 10px; border-radius: 6px; white-space: nowrap; }
#kiso-order .opf-badge::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--lp-accent); }
#kiso-order .opf-name { margin-top: 12px; font-size: 15px; font-weight: 800; color: #17324d; line-height: 1.4; }
#kiso-order .opf-sub { margin-top: 4px; font-size: 12px; font-weight: 600; color: #8a94a6; line-height: 1.5; }

/* 料金カード3枚 */
#kiso-order .opp-sec { background: var(--lp-accent-pale); padding: 44px 20px 48px; margin: 0 0 32px; width: 100vw; margin-left: calc(50% - 50vw); }
#kiso-order .opp-sec__head { text-align: center; margin: 0 0 30px; }
#kiso-order .opp-sec__head h3.opp-title { color: #17324d; font-size: 26px; font-weight: 800; margin: 0; text-align: center; background: none !important; background-image: none !important; border: none !important; padding: 0 !important; }
#kiso-order .opp-sec__head h3.opp-title::before { content: ""; display: block; width: 52px; height: 4px; background: var(--lp-accent); margin: 0 auto 16px; }
#kiso-order .opp-sec__head p.opp-lead { color: #718096; font-size: 14px; font-weight: 600; margin: 10px 0 0; text-align: center; }
#kiso-order .opp-wrap { display: flex; gap: 20px; max-width: 900px; margin: 0 auto; align-items: stretch; }
#kiso-order .opp-card { flex: 1 1 0; min-width: 0; background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(23, 50, 77, .08); }
#kiso-order .opp-card--c { position: relative; z-index: 2; overflow: visible; }
#kiso-order .opp-card--c .opp-card__head { border-radius: 14px 14px 0 0; }
#kiso-order .opp-card--c .opp-card__body { border-radius: 0 0 14px 14px; }
#kiso-order .opp-card__head { padding: 15px 12px; text-align: center; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .02em; }
#kiso-order .opp-card--a .opp-card__head,
#kiso-order .opp-card--b .opp-card__head { background: var(--lp-accent); }
#kiso-order .opp-card--c .opp-card__head { background: #f08300; }
#kiso-order .opp-card__body { padding: 20px 36px 22px; display: flex; flex-direction: column; flex: 1; text-align: center; }
#kiso-order .opp-camp { display: none; }
#kiso-order .opp-priceblock { display: grid; grid-template-columns: max-content max-content; grid-template-areas: "meta meta" "label badge" "price price" "tax tax"; justify-content: center; align-items: center; column-gap: 4px; }
#kiso-order .opp-meta { grid-area: meta; color: #8a94a6; font-size: 14px; font-weight: 600; line-height: 1.6; }
#kiso-order .opp-card__body .opp-meta { margin: 0 0 14px !important; }
#kiso-order .opp-meta .opp-reg { text-decoration: line-through; text-decoration-thickness: 1px; }
#kiso-order .opp-label { grid-area: label; display: block; justify-self: start; text-align: left; font-size: 12px; font-weight: 600; color: #8a94a6; line-height: 1.5; }
#kiso-order .opp-card__body .opp-label { margin: 0 0 3px !important; }
/* 割引が無いときのラベルは全講座「定価」に統一（アース指定・260802） */
#kiso-order .opp-label::before { content: "定価"; }
#kiso-order .opp-wrap:has(.opp-camp) .opp-label::before { content: "販売価格"; }
#kiso-order .opp-wrap:has(.opp-camp) .opp-card--c .opp-label::before { content: "販売価格（1名あたり）"; }
#kiso-order .opp-label--b::before { content: "月々のお支払い" !important; }
#kiso-order .opp-card--a .opp-priceblock,
#kiso-order .opp-card--c .opp-priceblock { padding-bottom: 6px; }
#kiso-order .opp-pill { grid-area: badge; display: inline-flex; align-items: center; justify-self: start; align-self: center; padding: 2px 7px; border: 1px solid #f1d0ad; border-radius: 999px; background: #fff8f0; color: #b76018; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .03em; white-space: nowrap; }
#kiso-order .opp-card__body .opp-pill { margin: 0 0 3px !important; }
#kiso-order .opp-card--a .opp-pill { transform: translateX(-38px); }
#kiso-order .opp-card--b .opp-pill { transform: translateX(-42px); }
#kiso-order .opp-price { grid-area: price; line-height: 1.25; }
#kiso-order .opp-card__body .opp-price { margin: 0 !important; line-height: 1.25 !important; }
#kiso-order .opp-price .price01,
#kiso-order .opp-price .price03 { display: inline !important; font-size: 30px !important; font-weight: 800 !important; }
#kiso-order .opp-card--a .opp-price .price01 { color: #e0261f; }
#kiso-order .opp-card--b .opp-price .price03 { color: var(--lp-accent); }
#kiso-order .opp-card--c .opp-price .price01 { color: #f08300; }
#kiso-order .opp-card--c .opp-price br { display: none; }
#kiso-order .opp-card--c .opp-price .price01::after { content: "（税別）"; font-size: 14px; font-weight: 700; color: #5b6472; }
#kiso-order .opp-price .opp-tax { font-size: 14px; font-weight: 700; color: #5b6472; margin-left: 2px; }
#kiso-order .opp-price .price02,
#kiso-order .opp-price .price04 { display: block !important; color: #606469; font-size: 15px; font-weight: 600; margin-top: 2px; }
#kiso-order .opp-monthly { font-size: 16px; white-space: nowrap; }
#kiso-order .opp-card__body .opp-monthly { margin: 0 !important; }
#kiso-order .opp-permonth { font-size: 16px !important; font-weight: 700 !important; color: var(--lp-accent) !important; }
#kiso-order .opp-taxline { grid-area: tax; color: #606469; font-size: 15px; font-weight: 600; line-height: 1.25 !important; }
#kiso-order .opp-taxline .price02,
#kiso-order .opp-taxline .price04 { display: inline !important; }
#kiso-order .opp-card__body .opp-taxline { margin: 2px 0 0 !important; }
#kiso-order .opp-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--lp-accent); color: var(--lp-accent); font-size: 11px; font-weight: 800; line-height: 1; cursor: help; }
#kiso-order .opp-info::before { content: "i"; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
#kiso-order .opp-tip { position: absolute; bottom: calc(100% + 9px); right: -4px; left: auto; background: #17324d; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.7; padding: 10px 12px; border-radius: 6px; width: max-content; max-width: 300px; white-space: normal; text-align: left; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 5; }
#kiso-order .opp-tip b { font-weight: 700; color: #ffd28a; }
#kiso-order .opp-tip::after { content: ""; position: absolute; top: 100%; right: 10px; border: 5px solid transparent; border-top-color: #17324d; }
#kiso-order .opp-info:hover .opp-tip,
#kiso-order .opp-info:focus .opp-tip { opacity: 1; visibility: visible; }
#kiso-order .opp-list { list-style: none !important; text-align: left; border-top: 1px solid var(--lp-accent-line); }
#kiso-order .opp-card__body .opp-list { margin: 14px 0 0 !important; padding: 14px 0 0 !important; }
#kiso-order .opp-list li { list-style: none !important; position: relative; padding: 0 0 0 20px; font-size: 13px; font-weight: 600; color: #3c4453; line-height: 1.6; }
#kiso-order .opp-card__body .opp-list li { margin: 0 0 8px !important; }
#kiso-order .opp-list li::marker { content: ""; }
#kiso-order .opp-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; }
#kiso-order .opp-card--a .opp-list li::before,
#kiso-order .opp-card--b .opp-list li::before { background: var(--lp-accent); }
#kiso-order .opp-card--c .opp-list li::before { background: #f08300; }
#kiso-order .opp-cart { margin-top: auto; margin-left: -14px; margin-right: -14px; }
#kiso-order .opp-card__body .opp-cart { padding-top: 10px !important; }
#kiso-order .opp-card__body .opp-cart p.cart { margin: 0 !important; text-align: center; }
#kiso-order .opp-qty { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; color: #3c4453; }
#kiso-order .opp-card__body .opp-cart p.cart.opp-qty { margin: 0 0 20px !important; }
#kiso-order .opp-cart input.product_quantity { width: 56px; text-align: center; padding: 6px; border: 1px solid #d5dbe2; border-radius: 6px; font-size: 14px; }
#kiso-order .opp-cart input.product_cart { width: 90%; -webkit-appearance: none; appearance: none; border: none !important; border-radius: 8px !important; padding: 14px 6px; background: #c00 !important; background-image: none !important; color: #fff !important; font-weight: 800; font-size: 13px; line-height: 1.4; cursor: pointer; box-shadow: none !important; transition: opacity .2s; }
#kiso-order .opp-cart input.product_cart:hover { opacity: .75; border: none !important; border-radius: 8px !important; box-shadow: none !important; background: #c00 !important; }
#kiso-order .opp-cart input.product_cart:focus,
#kiso-order .opp-cart input.product_cart:active { opacity: .6; border: none !important; border-radius: 8px !important; outline: none !important; box-shadow: none !important; background: #c00 !important; }

/* ご購入前の確認事項 */
#kiso-order .opn { max-width: 900px; margin: 32px auto 0; background: #f8fbfb; border: 1px solid var(--lp-accent-line); border-radius: 16px; padding: 26px 22px 20px; text-align: left; }
#kiso-order .opn p { margin: 0 !important; }
#kiso-order .opn p.opn__title { margin: 0 0 18px !important; font-size: 20px; font-weight: 800; color: #17324d; line-height: 1.45; text-align: center; }
#kiso-order .opn__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#kiso-order .opn__card { position: relative; min-width: 0; min-height: 0; padding: 18px 16px 16px 56px; border: 1px solid var(--lp-accent-line); border-radius: 10px; background: #fff; }
#kiso-order .opn__card--warning { border-color: var(--lp-accent-line); background: #fff; }
#kiso-order .opn__card-icon { position: absolute; top: 18px; left: 16px; width: 27px; height: 27px; background-color: var(--lp-accent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
#kiso-order .opn__card--invoice .opn__card-icon { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_invoice.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_invoice.svg"); }
#kiso-order .opn__card--receipt .opn__card-icon { -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_receipt.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_receipt.svg"); }
#kiso-order .opn__card--warning .opn__card-icon { background-color: var(--lp-accent); -webkit-mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_note.svg"); mask-image: url("/wp/wp-content/themes/fantomsemi/images/gai_note.svg"); }
#kiso-order .opn__ttl { font-size: 15px; font-weight: 800; color: var(--lp-accent); margin: 0 0 8px !important; }
#kiso-order .opn__txt { font-size: 12px; color: #3c4453; line-height: 1.7; }
#kiso-order .opn__card--warning .opn__ttl { color: var(--lp-accent); }

@media screen and (max-width: 767px) {
  .lp-body:has(#kiso-order) .order-back-bar { position: static; margin: 0 0 18px; text-align: left; }
  .lp-body:has(#kiso-order) .order-back-bar a { font-size: 13px; }
  .lp-body:has(#kiso-order) .lp-low { padding: 28px 16px 22px; margin-top: 0; }
  .lp-body:has(#kiso-order) .lp-low .ttl { font-size: 24px; }
  .lp-body:has(#kiso-order) .lp-low .order-course-title { margin: 0; font-size: 15px; }
  .lp-body:has(#kiso-order) .lp-low .order-title-row { gap: 7px; }
  #kiso-order > section:first-child { padding-top: 30px; }
  #kiso-order .opf-steps { flex-wrap: wrap; row-gap: 24px; }
  #kiso-order .opf-step { flex: 0 0 50%; }
  #kiso-order .opf-step:nth-child(3)::before { display: none; }
  #kiso-order .opf-heading { font-size: 22px; letter-spacing: .04em; }
  #kiso-order figure.entry-content { margin-top: 44px; margin-bottom: 48px; }
  #kiso-order .opp-sec { width: 100vw; padding: 36px 16px 40px; margin-bottom: 24px; }
  #kiso-order .opp-sec__head { margin-bottom: 24px; }
  #kiso-order .opp-sec__head h3.opp-title { font-size: 22px; line-height: 1.45; }
  #kiso-order .opp-sec__head h3.opp-title::before { width: 46px; height: 3px; margin-bottom: 14px; }
  #kiso-order .opp-sec__head p.opp-lead { margin-top: 8px; font-size: 13px; line-height: 1.7; }
  #kiso-order .opp-wrap { flex-direction: column; gap: 18px; width: 100%; }
  #kiso-order .opp-card { flex: none; width: 100%; min-height: 0; }
  #kiso-order .opp-card__head { padding: 14px 12px; font-size: 17px; line-height: 1.45; }
  #kiso-order .opp-card__body { padding: 20px 24px 22px; }
  #kiso-order .opp-meta { font-size: 13px; }
  #kiso-order .opp-card--a .opp-pill,
  #kiso-order .opp-card--b .opp-pill { transform: none; }
  #kiso-order .opp-price .price01,
  #kiso-order .opp-price .price03 { font-size: 30px !important; }
  #kiso-order .opp-monthly { font-size: 15px; white-space: normal; }
  #kiso-order .opp-list { margin-top: 16px !important; padding-top: 16px !important; }
  #kiso-order .opp-list li { font-size: 14px; }
  #kiso-order .opp-cart { margin-right: 0; margin-left: 0; }
  #kiso-order .opp-card__body .opp-cart { padding-top: 14px !important; }
  #kiso-order .opp-card__body .opp-cart p.cart.opp-qty { margin-bottom: 18px !important; }
  #kiso-order .opp-qty { flex-wrap: wrap; gap: 7px; font-size: 14px; }
  #kiso-order .opp-cart input.product_cart { width: 100%; min-height: 50px; padding: 14px 10px; font-size: 14px; }
  #kiso-order .opp-tip { right: -8px; width: max-content; max-width: min(300px, calc(100vw - 40px)); }
  #kiso-order .opn { margin-top: 24px; padding: 20px 14px 16px; }
  #kiso-order .opn__title { font-size: 19px; }
  #kiso-order .opn__grid { grid-template-columns: minmax(0, 1fr); }
  #kiso-order .opn__card { min-height: 0; }
  #kiso-order figure.entry-content > table.visible-phone { display: none !important; }
  #kiso-order p.more a { white-space: nowrap; }
}

@media screen and (max-width: 340px) {
  .lp-body:has(#kiso-order) header.l-header.p-header .p-header__logo { width: 160px; flex: 0 0 160px; }
  .lp-body:has(#kiso-order) header.l-header.p-header .p-header__logo img { width: 160px; height: auto; }
}

/* =========================================================================
   ★暫定★ 旧テンプレートから移行する間の補正（2026-08-06）
   旧 style_lp.css / style_mechatro.css を読まなくなったことで失われる指定の受け皿。
   本文を新デザインへ置き換えていく間だけ必要。

   ★ PC/SP出し分けユーティリティは、置き換えが終わっても
     カリキュラムの図やカートが使っているので残ること（yosoで確認済み）。
   ★ `#kiso > div` の一括幅指定は、直下に足す要素を片っ端から巻き込む。
     yosoではヒーロー・追従カート・動画モーダルの3つで事故を起こしたので、
     除外ルールを最初から書いてある。新しいセクションを足すときは
     「全幅で見せたいか」「position:fixed か」を必ず確認すること。
   ★ 旧ブロックの置き換えが全部終わったら、この幅指定と除外ルールは
     まとめて削除する（yosoでは削除して問題なかった）。
   ========================================================================= */
/* --- PC/SP出し分け（常設。削除しないこと） --- */
@media screen and (min-width: 768px) {
  .lp-body #kiso .visible-phone { display: none !important; }
}
@media screen and (max-width: 767px) {
  .lp-body #kiso .hidden-phone { display: none !important; }
}

/* --- 旧ブロックの画像まわり --- */
.lp-body #kiso img {
  max-width: 100%;
  height: auto;
}
.lp-body #kiso p > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.lp-body #kiso .mv { margin: 0; text-align: center; }
.lp-body #kiso .mv img { display: block; width: min(1000px, 100%); margin: 0 auto; }

/* --- 旧ブロックの共通の器（置き換え完了後に削除する） --- */
.lp-body #kiso > div,
.lp-body #kiso > p {
  width: min(1000px, 100%);
  margin-left: auto;
  margin-right: auto;
}
/* 全幅で見せる新デザインのバンド・position:fixed の要素は上の指定から除外 */
.lp-body #kiso > .ki-hero,
.lp-body #kiso > .lp-mv,
.lp-body #kiso > .cp_bar,
.lp-body #kiso > .lp-cta-sec {
  width: auto;
  max-width: none;
}
.lp-body #kiso > .popup {
  width: 100%;
  max-width: none;
  margin: 0;
}
.lp-body #kiso > .float_cart {
  width: 180px;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================================
   カリキュラム・アコーディオンの mechatro 追加分（2026-08-06 / yoso から移植）
   機能設計編は文字だけだが、メカトロ編は旧LPが各章にスライド図と専門用語を
   持っていたので、それを引き継ぐ。サンプル動画は /mechatro_sample/ の5本。
   ★用語ピル（.cur-terms）の本体スタイルは L4198 付近の共通指定を使う。
   ========================================================================= */
/* 章一覧の上に置く概要図 */
.lp-body .curriculum-accordion__overview {
  margin: 0 0 24px;
  text-align: center;
}
.lp-body .curriculum-accordion__overview img {
  display: block;
  width: min(900px, 100%);
  height: auto;
  margin: 0 auto;
}
/* 各章のスライド例。パネルを開いたときに最初に出る */
.lp-body .curriculum-accordion__figure {
  margin: 0 0 20px;
  text-align: center;
}
.lp-body .curriculum-accordion__figure img {
  display: block;
  width: min(760px, 100%);
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--lp-accent-line);
  border-radius: 8px;
}
/* サンプル動画ボタン（第1/3/4/6-1/7章の5つ）
   機能設計編と同じ .openVideo ＋ .popup 方式。クリックで videog.jp の
   プレーヤーがその場で開く（ページ遷移しない）。開閉は lp.js が担当。 */
.lp-body .curriculum-accordion__movie {
  margin: 20px 0 0;
}
.lp-body .curriculum-accordion__movie + .openVideo {
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 12px 20px;
  font-size: 17px;
  cursor: pointer;
}
.lp-body .curriculum-accordion__movie + .openVideo:hover { background-color: var(--lp-accent-dark); }
.lp-body .curriculum-accordion__movie + .openVideo p { margin: 0; font-weight: 700; }
.lp-body .curriculum-accordion__movie + .openVideo .v-right { display: flex; align-items: center; }
.lp-body .curriculum-accordion__movie + .openVideo .v-right img { width: 26px; height: auto; }
@media screen and (max-width: 767px) {
  .lp-body .curriculum-accordion__overview { margin-bottom: 18px; }
  .lp-body .curriculum-accordion__figure { margin-bottom: 16px; }
  .lp-body .curriculum-accordion__movie + .openVideo { width: 100%; padding: 11px 14px; font-size: 15px; }
  .lp-body .curriculum-accordion__movie + .openVideo .v-right img { width: 22px; }
}

/* =========================================================================
   法人の教育担当者様へ（.biz-intro）  2026-08-06
   yoso（元は seizu）から移植。旧 .message_intro の置き換え。
   移植時に変えたのはスコープ #yoso → #kiso だけ。
   バッジのオレンジ #EF6C19 と見出しの紺 #17324D は講座共通色なので据え置き。
   アイコンはCSSマスク方式なので画像の色替え不要（--lp-accent で塗られる）。
   ========================================================================= */
.lp-body #kiso .biz-intro {
  width: 100%; max-width: 960px; margin: 56px auto 48px;
  padding: 36px 32px 30px; box-sizing: border-box;
  background: var(--lp-accent-soft); border-radius: 16px; text-align: center;
}
.lp-body #kiso .biz-intro__badge {
  display: inline-block; margin: 0 0 18px; padding: 7px 22px;
  background: #EF6C19; border-radius: 999px;
  color: #fff; font-size: 15px; font-weight: 800; line-height: 1.4;
}
.lp-body #kiso .biz-intro__title {
  margin: 0 0 16px; color: #17324D;
  font-size: 32px; font-weight: 900; line-height: 1.45; letter-spacing: .01em;
}
.lp-body #kiso .biz-intro__lead {
  margin: 0 0 26px; color: #3d4a63; font-size: 16px; font-weight: 500; line-height: 1.85;
}
.lp-body #kiso .biz-intro__cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 0 0 22px; padding: 0; list-style: none; text-align: left;
}
.lp-body #kiso .biz-intro__card {
  display: flex; align-items: flex-start; gap: 14px; margin: 0;
  padding: 20px 18px; background: #fff; border-radius: 12px;
}
.lp-body #kiso .biz-intro__ico {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
}
.lp-body #kiso .biz-intro__ico::before {
  content: ""; display: block; width: 42px; height: 42px;
  background-color: var(--lp-accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lp-body #kiso .biz-intro__ico--std::before {
  -webkit-mask-image: url(/wp/wp-content/themes/fantomsemi/images/apply_form.svg);
  mask-image: url(/wp/wp-content/themes/fantomsemi/images/apply_form.svg);
}
.lp-body #kiso .biz-intro__ico--time::before {
  -webkit-mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_time.svg);
  mask-image: url(/wp/wp-content/themes/fantomsemi/images/study_time.svg);
}
.lp-body #kiso .biz-intro__ico--know::before {
  -webkit-mask-image: url(/wp/wp-content/themes/fantomsemi/images/seizu/denkyu.svg);
  mask-image: url(/wp/wp-content/themes/fantomsemi/images/seizu/denkyu.svg);
}
.lp-body #kiso .biz-intro__body { min-width: 0; }
.lp-body #kiso .biz-intro__ttl {
  margin: 0 0 5px; color: #17233f; font-size: 17px; font-weight: 800; line-height: 1.4;
}
.lp-body #kiso .biz-intro__txt {
  margin: 0; color: #4a5670; font-size: 13px; font-weight: 500; line-height: 1.6;
}
.lp-body #kiso .biz-intro__note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 18px;
  margin: 0; color: #59637d; font-size: 14px; font-weight: 600; line-height: 1.6;
}
.lp-body #kiso .biz-intro__note span:not(:last-child) {
  padding-right: 18px; border-right: 1px solid #c3cbdd;
}
@media screen and (max-width: 767px) {
  .lp-body #kiso .biz-intro { margin: 36px auto 32px; padding: 26px 16px 22px; border-radius: 12px; }
  .lp-body #kiso .biz-intro__badge { margin-bottom: 14px; padding: 6px 16px; font-size: 13px; }
  .lp-body #kiso .biz-intro__title { font-size: 21px; margin-bottom: 12px; }
  .lp-body #kiso .biz-intro__lead { font-size: 14px; line-height: 1.8; margin-bottom: 20px; text-align: left; }
  /* SPは3列だと1枚あたりが狭すぎるため1列に積む */
  .lp-body #kiso .biz-intro__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
  .lp-body #kiso .biz-intro__card { padding: 16px 14px; gap: 12px; }
  .lp-body #kiso .biz-intro__ico { width: 36px; height: 36px; }
  .lp-body #kiso .biz-intro__ico::before { width: 36px; height: 36px; }
  .lp-body #kiso .biz-intro__ttl { font-size: 16px; }
  .lp-body #kiso .biz-intro__note { gap: 4px 14px; font-size: 12px; }
  .lp-body #kiso .biz-intro__note span:not(:last-child) { padding-right: 14px; }
}

/* =========================================================================
   FAQ の色をテーマカラーへ（2026-08-06 / yoso から移植）
   ★ FAQは共通パーツ [common_parts slug=faq-elearning] が
     ページ末尾に <style>（約2,500字）を注入する作りで、そこに
     #0989b1（Q/Aバッジ・矢印・CTA）と #f0fafe（見出し帯）が直書きされている。
     このstyleは全LP共通なので触らず、per-LP側で詳細度を上げて打ち消す。
     インラインstyleは文書の最後に出るため、同じ詳細度では勝てない。
     → id を含む `.lp-body #faq-sec ...`（1,2,0〜1,3,0）で確実に上書きする。
   ★ .faq-icon は <img>（faq1.svg 等）で色を持つ画像。CSSで塗り替えられないため
     filter で色を変えている。**元色は black なので invert から作る**（hue-rotate は効かない）。
   ★ アクセント色を変える場合はこの filter を再計算すること。
     canvas に【元色】を ctx.filter 付きで塗り、getImageData で実測して総当たりすると早い。
   ★ 元色はファイルごとに違う。faq1〜5.svg は black、ico-contact01〜03.svg は #0989B1。
   ========================================================================= */
.lp-body #faq-sec .faq-header { background-color: var(--lp-accent-soft); }
.lp-body #faq-sec .faq-header::after {
  border-right-color: var(--lp-accent);
  border-bottom-color: var(--lp-accent);
}
.lp-body #faq-sec .faq-header.active::after {
  border-top-color: var(--lp-accent);
  border-left-color: var(--lp-accent);
}
.lp-body #faq-sec .faq-question span,
.lp-body #faq-sec .faq-answer span { color: var(--lp-accent); }
.lp-body #faq-sec .faq-question::after {
  border-right-color: var(--lp-accent);
  border-bottom-color: var(--lp-accent);
}
.lp-body #faq-sec .faq-question.active::after {
  border-top-color: var(--lp-accent);
  border-left-color: var(--lp-accent);
}
.lp-body #faq-sec .faq-cta a { background-color: var(--lp-accent); }
.lp-body #faq-sec .faq-cta a:hover { background-color: var(--lp-accent-dark); }
/* ★★2026-08-16 修正：ここは【黒からの変換】でないと効かない。
   `faq1〜5.svg` の中身は **fill="black"**（`ico-contact01〜03.svg` の #0989B1 とは別物）。
   黒は彩度0なので `hue-rotate()` も `saturate()` も何も起こらず、
   `hue-rotate(-76deg) saturate(.9) brightness(1.05)` では**黒のまま**だった（実測で確認）。
   → `invert()` から作り直す。kiso は black → rgb(70,140,255)（目標 #468cff との差 0。
     faq1〜5.svg の5枚すべてで最頻色が一致することを canvas 実測で確認・2026-08-26）。
   ★アクセント色を変えたら再計算すること。求め方（元色が黒の場合）:
     canvas に #000000 を ctx.filter 付きで塗り、getImageData で実測しながら
     invert / sepia / saturate / hue-rotate / brightness / contrast の6値を
     ランダム再スタート＋座標降下で最適化する。
   ★`.lp-form .ttl img`（お問い合わせページ）は元色が #0989B1 なので**別式**。混同しないこと。 */
.lp-body #faq-sec .faq-icon {
  filter: invert(50%) sepia(75%) saturate(861%) hue-rotate(200deg) brightness(91%) contrast(194%);
}

/* =========================================================================
   受講者の声（#sec-survey）  2026-08-06 / yoso から移植
   ★ 経緯：旧LPは共通パーツ [common_parts slug=lp-voice-mechatro] で
     .uservoice / .u_voice / .container / .voice-wrap という旧クラスを出していたが、
     これらを定義していた themes/fantomsemi/css/style_lp.css は現在404で存在しない。
     新テンプレートでは lp_voice.css の .voice-card2 系しかスタイルが無いため、
     共通パーツを使うとCSSが1つも当たらず素のHTMLとして崩れる（実測で確認）。
     → 移行済み全LPと同じく、本文に .voice-card2 を直書きする方式へ統一した。
     ※以後この声を差し替えるときは共通パーツではなく【本文】を編集すること。
   ★ 幅：#sec-survey は自前の幅を持たない。#kiso 直下は全幅ラッパーなので
     ここで960pxに絞る（yoso と同じ理由・同じ値）。
     暫定ブロックの `#kiso > div, > p` は div/p 限定のため section には効かない。
   ========================================================================= */
.lp-body #kiso > #sec-survey {
  width: min(960px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* 「※ 受講後にメールアンケートにて…」の注記。
   .voice-detail-more-wrap（text-align:center）の中に置いているが、
   lp_voice.css の .voice-detail-remain は p 想定で span だと改行しないため
   ここで block にしてリンクの上に1行で乗せる */
.lp-body #sec-survey .voice-detail-more-wrap .voice-detail-remain {
  display: block;
}

/* =========================================================================
   セクションの結論（.ki-conc）共通  2026-08-10
   ki-worry / ki-tool / ki-cat / ki-reason（03の締め）で共用する。
   （ki-easy と ki-funnel も使っていたが、両セクションとも 2026-08-11〜12 に削除）

   ★経緯（アース指摘 2026-08-10）
     以前は結論の見た目がセクションごとに4種類あった
     （薄い青の帯／濃紺の帯／白いカード／枠なしテキスト）。
     各セクションは既に「白い図版パネル」というカードを持っているため、
     その直下にもう1枚カードを置くとカードが二重になり、
     ページ全体が「カードだらけ」に見えていた。
     → 結論は【枠なし・背景なしのテキスト】に統一し、
       オレンジの罫線と下向きシェブロンだけで区切る。
       カードは図版パネルだけになり、視線の階層が1つに整理される。

   ★使い方（この順に3つ並べる）
       <p class="ki-conc">…結論…</p>
       <p class="ki-conc__note">…補足（任意）…</p>
       <div class="ki-conc__rule"></div>
       <div class="ki-conc__arrow"></div>
   ★シェブロンは罫線に重ねているので、背景色でその部分を隠している。
     セクションの背景が白と薄い青緑で交互になるため、
     各セクションに --ki-sec-bg を必ず定義すること（未定義だと白になる）。
   ========================================================================= */
.lp-body .ki-conc {
  margin: 26px 0 0;
  color: #123F6D; font-size: 24px; font-weight: 800; line-height: 1.5;
  text-align: center;
}
.lp-body .ki-conc b { color: #EF6C19; font-weight: 900; }
/* 手順を「→」でつなぐときの矢印。<i> で入れる */
.lp-body .ki-conc i {
  display: inline-block; vertical-align: middle;
  width: 26px; height: 20px; margin: 0 12px;
  background: #123F6D;
  clip-path: polygon(0 34%, 55% 34%, 55% 0, 100% 50%, 55% 100%, 55% 66%, 0 66%);
}
.lp-body .ki-conc__note {
  margin: 10px 0 0; color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.7;
  text-align: center;
}
.lp-body .ki-conc__rule {
  width: 100%; height: 2px; margin: 18px 0 0; background: #EF6C19; border-radius: 1px;
}
.lp-body .ki-conc__arrow {
  width: 34px; height: 34px; margin: -17px auto 0;
  border-right: 4px solid #EF6C19; border-bottom: 4px solid #EF6C19; border-radius: 3px;
  background: var(--ki-sec-bg, #FFFFFF);
  transform: rotate(45deg);
}
@media screen and (max-width: 900px) {
  .lp-body .ki-conc { font-size: 18px; }
  .lp-body .ki-conc i { width: 22px; height: 17px; margin: 0 8px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-conc { font-size: 15px; line-height: 1.6; }
  .lp-body .ki-conc__note { font-size: 13px; }
  .lp-body .ki-conc i { width: 18px; height: 14px; margin: 0 6px; }
  .lp-body .ki-conc__arrow { width: 26px; height: 26px; margin-top: -13px; border-width: 3px; }
}

/* =========================================================================
   モーター選定でよくある悩み（.ki-worry）  2026-08-09
   「機械設計に特化した日本最大級のeラーニング」（.feature-sec）の直後、
   旧 #problem の位置に置く。

   ★メカトロ編（.mc-worry）とは別デザイン。
     メカトロ：イラスト付きカード4枚を横並び
     モーター：白パネル1枚の中を左右2カラム（左＝イラスト＋ひとこと、
               右＝チェックリスト5行）＋下にCTA帯＋下向き矢印
     .bat で lp_mechatro.css から再生成すると【4枚カード版に戻る】ので、
     再生成したらこのブロックを貼り直すこと。

   ★通し番号（01〜05）は付けない（アース指示 2026-08-09。
     チェックボックスがあれば並列だと分かり、数字は情報量を増やすだけ）。
   ========================================================================= */
.lp-body .ki-worry {
  --ki-sec-bg: #EAF1FD;   /* .ki-conc__arrow が罫線を隠すのに使う。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 44px;
  /* ヒーローのグラデーション終点 #EAF1FD と同系の薄い青緑。
     パネルを白にして浮かせるため、ここは必ず白以外にすること。
     ★var(--lp-accent-pale) は使わない。motor のアクセントはグレー(#505050)なので
       pale が #F7F7F7 の無彩色になり、白パネルとの差が消える（mechatro で実際に起きた） */
  background: #EAF1FD;
  box-sizing: border-box;
}
.lp-body .ki-worry__inner { width: min(1000px, 100%); margin: 0 auto; }
/* ★2026-08-13 アース指示：見出しの上は「小さい文字のラベル」ではなく
   構想設計入門講座（機能設計編）と同じ【横線】にする。
   本文から <p class="ki-worry__eyebrow"> は削除済み。万一残っていても出さない。
   線の仕様は .section-title::before / .pv2-title::before と同じ 52×4px・角丸。 */
.lp-body .ki-worry__eyebrow { display: none; }
.lp-body .ki-worry__title {
  margin: 0 0 28px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em; text-align: center;
}
.lp-body .ki-worry__title::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .ki-worry__hl { color: #EF6C19; }

@media screen and (max-width: 900px) {
  .lp-body .ki-worry__title { font-size: 26px; margin-bottom: 22px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-worry { padding: 40px 16px 32px; }
  .lp-body .ki-worry__eyebrow { font-size: 14px; }
  .lp-body .ki-worry__title { font-size: 21px; line-height: 1.55; margin-bottom: 18px; }
}

/* =========================================================================
   お申込み前のよくあるご質問モーダル（.faqm）のテーマ色  2026-08-16
   ─────────────────────────────────────────────────────────────────────────
   本体は共通パーツ `[common_parts slug="faq-before-order"]` が
   **ページ末尾に <style> を注入する**作りで、講座ごとのテーマは
   `.faqm-theme--kyoudo` `.faqm-theme--kousa` … という修飾クラスで切り替えている。
   ★kiso 用の修飾クラスは共通パーツ側に無いので、ここで定義する。
   ★`.lp-body` を付けて詳細度を (0,2,0) にすること。
     共通パーツの `.faqm-theme{--faqm-accent:#083866}` は (0,1,0) だが
     文書の最後に出るため、同じ詳細度では負けて紺のままになる。 */
.lp-body .faqm-theme--kiso {
  --faqm-accent: #468cff;
  --faqm-accent-dark: #2a6ddb;
}

/* =========================================================================
   カリキュラム上部のサンプル動画（.cv-one 一式）  2026-08-16
   ─────────────────────────────────────────────────────────────────────────
   公差設定入門講座（kousa）と同じ形式。**CSSの本体は lp_editor.css（全LP共通）にあり、
   `var(--lp-accent*)` を使っているので jusi でも緑で出る。ここに書くのは差分だけ。**

   ★クリックの仕組み：`lp.js` は **`.openVideo[data-popup]` しか拾わない**（実測 2026-08-16）。
     kousa は `.sample-video-btn` / `.cv-thumb` 用のスクリプトを別に持っているが、
     machining では**スクリプトを足さず、サムネとボタンに `openVideo` クラスを併記**して
     既存の lp.js に任せている。そのぶん `.openVideo` の既定スタイル
     （緑のベタ塗り・幅80%・下マージン100px／1794行〜）が効いてしまうので、ここで打ち消す。
   ========================================================================= */
/* サムネイル：.openVideo の見た目を全部消して、画像の器に戻す */
.lp-body .cv-hero .cv-thumb.openVideo {
  display: block;
  width: auto; max-width: none;
  margin: 0; padding: 0;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
  font-size: 0;
  cursor: pointer;
}
/* ボタン：.openVideo をカード内向けのコンパクトな形に */
.lp-body .cv-hero__body .openVideo {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 10px;
  width: auto; max-width: none;
  margin: 14px 0 4px; padding: 11px 22px;
  background: var(--lp-accent);
  border-radius: 8px;
  color: #FFF; font-size: 16px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(36, 151, 36, .25);
  transition: background .2s;
}
.lp-body .cv-hero__body .openVideo:hover { background: var(--lp-accent-dark); }
/* ★`.openVideo::before`（緑の丸に白い▶／42px）が既に付くので、
   kousa の markup が持つ `.svb-ico` の▶は消す。残すと再生マークが2つ並ぶ（実測 2026-08-16） */
.lp-body .cv-hero__body .openVideo .svb-ico { display: none; }

/* ★サムネイル画像が届くまでの仮枠。
   `.cv-thumb` は中に .cv-playicon を持つので :empty が使えない。
   そのため【実体クラス `--todo`】で仮枠にしている。
   ★<img> を入れたら `cv-thumb--todo` を手で外すこと（§12-6 の例外）。
   ★サムネイルURLは videog の管理画面から取得する。プレイヤーIDからは導けない
     （kousa の例：プレイヤー mq0aEr9ajcjN ／ サムネ .../sTwWP_FqLQdI/o.jpg で無関係）。 */
.lp-body .cv-hero .cv-thumb--todo {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
  border: 2px dashed #F08300;
  background: rgba(255, 248, 240, .6);
  font-size: 13px;
}
.lp-body .cv-hero .cv-thumb--todo::after {
  content: "サムネイル準備中";
  color: #B45900; font-size: 13px; font-weight: 700;
}

/* =========================================================================
   .ki-need  なぜ製品によって使われる材料が違うのか  2026-08-16
   ─────────────────────────────────────────────────────────────────────────
   位置：社会的証明（.feature-sec）と 悩み（.ki-worry）のあいだ。
   構成：見出し → リード3行 → 【図版1枚】 → 結論ボックス → 次への一文

   ★図版（製品4点 → 「製品に求められる条件が違う」 → 特性6項目）は
     アース支給の画像1枚。写真と細かい線・アイコンの集合体なのでCSSでは作らない。
     空のあいだは :empty の仮枠が出て、<img> を入れると自動で消える。
   ★このセクションのクラス名は .ki-need。motor 時代の「なぜ〜難しいのか」ブロック
     （旧 za-why 一式）は machining 化の際に削除済みなので、名前の衝突はもう無い。
   ★背景は【白＋方眼】。上の .feature-sec も白なので、方眼のテクスチャで区切りを作っている。
     薄い色にすると下の .ki-worry（#EAF1FD）とRGB差が10未満になり境目が消える（§12-3）。
   ========================================================================= */
.lp-body .ki-need {
  position: relative;
  padding: 56px 20px 48px;
  background: #FFFFFF;
  overflow: hidden;
}
.lp-body .ki-need::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(105% 80% at 50% 50%, transparent 0%, transparent 46%, #000 82%);
  mask-image: radial-gradient(105% 80% at 50% 50%, transparent 0%, transparent 46%, #000 82%);
  pointer-events: none;
}
.lp-body .ki-need__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .ki-need__title {
  margin: 0 0 18px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.5;
  letter-spacing: .01em; text-align: center;
}
/* 見出しの上の横線（構想設計 機能設計編と同じ 52×4px・角丸） */
.lp-body .ki-need__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .ki-need__hl { color: #EF6C19; }
.lp-body .ki-need__lead {
  margin: 0 0 26px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.9;
  text-align: center;
}

/* ---- 図版（アース支給の画像1枚） ---- */
/* ★PC/SPで別の画像を出す（2026-08-16）。
   ★★jusi 用の画像は【未手配】。machining の値をそのまま引き継いでいるので、
     アースから図版が届いたら本文の src と下の実測コメントを差し替えること。
   machining: PC img_machining_need.png（1920×712・表示960の2倍）／
              SP img_machining_need_sp.webp（750×1125・縦長）
   （zairyou は img_zairyou4.png / img_zairyou4_sp.webp だった）
   `.is-pc` / `.is-sp` の2枚出しではなく <picture> にしている。
   出さない方の画像をダウンロードしないぶん軽い。
   ★<picture> は既定で inline なので block にしないと下に余白が出る。 */
/* ★2026-09-26 アース指摘「詰まって見える／ごちゃごちゃして見える」への対応。
   ki-need は〈リード文4行〉〈電車の図〉〈6項目〉〈結論ボックス〉〈注記〉〈リフターの図〉と
   6つの塊が縦に並ぶ、このLPでいちばん要素の多いセクション。
   塊どうしの間が 28px で一定だったため、どこが一区切りなのかが読み取れなかった。
   → 塊の切れ目だけを広げて、区切りを目で分かるようにする（28px → 40〜44px）。 */
.lp-body .ki-need__fig { margin: 0 0 40px; text-align: center; }
.lp-body .ki-need__fig picture { display: block; }
/* セレクタに #kiso が要る理由は .ki-worry__hero img のコメント参照 */
/* ★2026-09-26 kiso：max-width を 960px → **768px**（＝80%）に縮小（アース指示）。
   `kiso-knowledge-train.png`（電車の連結部の図・2172×724）を入れたところ
   960×320 で表示され、本文幅いっぱいに広がって大きすぎた。
   768×256 にすると、下の6項目（単位／規格／数学／力学／形状／道具）や
   結論ボックスとの釣り合いが取れる。実測 2026-09-26（PC 1905px・inner 1000px）。
   ★SP（375px）は表示幅343pxで、もともとどちらの上限にも当たらないので影響しない。
   ★`.ki-need__diagram` 方式（jusi の3ブロック図）に戻すときは、
     下にある同じ詳細度(1,2,1)の上書きが効くので、この値を変えても支障はない。 */
.lp-body #kiso .ki-need__fig img {
  display: block;
  width: 100%; max-width: 768px;
  height: auto;
  margin: 0 auto;
}
.lp-body .ki-need__fig:empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 340px;
  border: 2px dashed #F08300; border-radius: 12px;
  background: rgba(255, 248, 240, .5);
}
.lp-body .ki-need__fig:empty::before {
  /* ★仮枠の文言＝アースへの発注内容。欲しい図の中身を具体的に書いておく。
     2026-08-26 kiso：旧LP `div.lifter` の「リフター設計」の図をそのまま使えるかもしれない
     （`/wp/wp-content/uploads/2019/03/` 配下。骨格移植では未使用）。 */
  content: "図版準備中（リフター設計の例：最大荷重 →【機械力学】でモーター容量を決める →【材料力学】で強度を確かめる →【製図】で図面にする）";
  color: #B45900; font-size: 13px; font-weight: 700;
}

/* =========================================================================
   .ki-need__diagram  図版の中身を3ブロックで組む  2026-08-25 新設
   ─────────────────────────────────────────────────────────────────────────
   アース支給のモックに合わせて、1枚絵ではなく
     左 ＝ 金属部品→樹脂部品（イラストは保留。枠だけ確保）
     中 ＝ 自動車の透視イラスト（jusi-car-resin-parts.webp・1200×658・120KB／実測 2026-08-25。
          当初の car_plustics.png は 1536×1024・2,276KB だったのでWebPに差し替えた）
     右 ＝ 樹脂の利点6つ（★CSSで作る。画像にしない／手順書 §12「幾何学的な形はCSSで描く」）
   の3列で構成する。
   ★左のイラストは `.ki-need__swap-fig` を空にしておくと :empty の仮枠が出る。
     <img> を入れた瞬間に枠が自動で消えるので消し忘れが起きない（手順書 §12-6）。
   ★中央の <img> は上の `.lp-body #kiso .ki-need__fig img { max-width:960px }` に
     当たってしまうので、同じ詳細度(1,2,1)の指定を【この下＝あとの行】に書いて上書きしている。
     ★セレクタから #kiso を外すと詳細度が下がって効かなくなる。
   ========================================================================= */
.lp-body .ki-need__diagram {
  display: grid;
  /* ★右カラムの幅は「量産しやすい」が1行に収まる値で決めている（実測 2026-08-25）。
     330px だとカード1枚の文字幅が87pxしか取れず、6文字（90px）が折り返した。
     352px で文字幅98pxを確保して1行に収まる。★文言を長くするときは測り直すこと。 */
  grid-template-columns: 264px minmax(0, 1fr) 352px;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  text-align: left;
}

/* ---- 左：金属部品 → 樹脂部品 ---- */
.lp-body .ki-need__swap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px 18px 18px;
  background: #FFFFFF;
  border: 1px solid var(--lp-accent-line); border-radius: 16px;
  box-sizing: border-box;
}
.lp-body .ki-need__swap-ttl {
  margin: 0;
  color: #123F6D; font-size: 17px; font-weight: 900; line-height: 1.5; text-align: center;
}
.lp-body .ki-need__swap-ttl b { color: var(--lp-accent); font-weight: 900; }
/* 縦に伸びて、上の見出しと下のバッジのあいだを埋める */
.lp-body .ki-need__swap-fig {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto;
  width: 100%; min-height: 150px;
}
.lp-body #kiso .ki-need__swap-fig img {
  display: block;
  width: auto; max-width: 100%;
  height: auto; max-height: 190px;
  margin: 0;
}
.lp-body .ki-need__swap-fig:empty {
  border: 2px dashed #F08300; border-radius: 10px;
  background: rgba(255, 248, 240, .6);
  box-sizing: border-box; padding: 0 12px;
}
.lp-body .ki-need__swap-fig:empty::before {
  content: "イラスト準備中（金属部品 → 樹脂部品）";
  color: #B45900; font-size: 12px; font-weight: 700; line-height: 1.7; text-align: center;
}
.lp-body .ki-need__swap-badge {
  margin: 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: #FFF1E3;
  color: #C2610F; font-size: 14px; font-weight: 800; line-height: 1.4;
}

/* ---- 中央：自動車の透視イラスト ---- */
.lp-body .ki-need__car {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 0;
}
.lp-body .ki-need__car-label {
  margin: 0;
  padding: 7px 20px;
  border-radius: 999px;
  background: var(--lp-accent-soft);
  color: var(--lp-accent-dark); font-size: 15px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-need__car-fig {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto;
  width: 100%; min-height: 180px;
}
.lp-body #kiso .ki-need__car-fig img {
  display: block;
  width: 100%; max-width: 100%;
  height: auto;
  margin: 0;
}
.lp-body .ki-need__car-fig:empty {
  border: 2px dashed #F08300; border-radius: 10px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-need__car-fig:empty::before {
  content: "自動車イラスト準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}

/* ---- 右：樹脂の利点6つ（画像を使わずCSSで作る） ---- */
/* ★2026-08-26 kiso：jusi では図版の右カラム（幅の狭い場所）に置いていたので2列だったが、
   kiso は図版と切り離して本文幅いっぱい（1000px）に置くので【3列×2行】にした。
   6項目＝全6章と一対一で対応する（単位／規格／数学／力学／形状／道具）。
   ★項目数を6以外にするならこの列数も見直すこと。 */
.lp-body .ki-need__merits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 44px; padding: 0;   /* 28px → 44px（結論ボックスとの区切り・2026-09-26） */
  list-style: none;
  align-content: center;
}
.lp-body .ki-need__merit {
  display: flex; align-items: center; gap: 12px;
  margin: 0;
  padding: 14px 10px 14px 12px;
  background: #FFFFFF;
  border: 1px solid var(--lp-accent-line); border-radius: 12px;
  box-sizing: border-box;
}
/* 旧CSSの li 装飾（・や番号）が乗らないように打ち消す */
.lp-body .ki-need__merit::before,
.lp-body .ki-need__merit::after { content: none; display: none; }
.lp-body .ki-need__merit-ico {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--lp-accent);
  color: #FFFFFF; font-size: 16px; font-weight: 900; line-height: 1;
}
.lp-body .ki-need__merit-txt {
  min-width: 0;
  color: #2D344B; font-size: 15px; font-weight: 800; line-height: 1.4;
  /* 6枚の高さを揃えるため折り返させない。幅は上のグリッドで確保している */
  white-space: nowrap;
}

@media screen and (max-width: 900px) {
  /* 3列は入らないので縦積みに。右の6カードは2列のまま */
  .lp-body .ki-need__diagram { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-body .ki-need__swap { padding: 18px 16px 16px; }
  .lp-body #kiso .ki-need__car-fig img { max-width: 420px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-need__swap-ttl { font-size: 16px; }
  .lp-body .ki-need__car-label { font-size: 14px; padding: 6px 16px; }
  .lp-body .ki-need__merits { gap: 10px; }
  .lp-body .ki-need__merit { padding: 12px 8px 12px 10px; gap: 10px; }
  .lp-body .ki-need__merit-ico { width: 34px; height: 34px; font-size: 15px; }
  .lp-body .ki-need__merit-txt { font-size: 14px; }
}

/* ---- 結論ボックス ----
   .ki-worry の結論は【橙の枠】。ここで同じ枠を使うと2つ続けて同じ強さになるので、
   こちらは【薄い面＋細い罫線】にして、下の .ki-worry へ強さが上がる並びにしている */
.lp-body .ki-need__concl {
  padding: 22px 26px;
  /* 2026-08-26 kiso：緑がかった地色 #F6F9F3 / 罫線 #DCE6D6 を青系に付け替えた */
  background: var(--lp-accent-pale);
  border: 1px solid var(--lp-accent-line); border-radius: 14px;
  box-sizing: border-box;
}
.lp-body .ki-need__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 24px; font-weight: 900; line-height: 1.55;
  text-align: center;
}
.lp-body .ki-need__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-need__note {
  margin: 26px 0 0;   /* 18px → 26px（結論ボックスと注記の区切り・2026-09-26） */
  color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
  text-align: center;
}

@media screen and (max-width: 900px) {
  .lp-body .ki-need__title { font-size: 25px; }
  .lp-body .ki-need__lead { font-size: 15px; }
  .lp-body .ki-need__concl-lead { font-size: 19px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-need { padding: 40px 16px 34px; }
  .lp-body .ki-need__title { font-size: 20px; line-height: 1.55; }
  .lp-body .ki-need__lead { font-size: 14px; line-height: 1.85; text-align: left; margin-bottom: 20px; }
  .lp-body .ki-need__fig:empty { min-height: 200px; }
  .lp-body .ki-need__fig:empty::before { font-size: 12px; padding: 0 16px; text-align: center; }
  .lp-body .ki-need__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .ki-need__concl-lead { font-size: 17px; }
  .lp-body .ki-need__note { font-size: 13px; text-align: left; }
}

/* =========================================================================
   .ki-order  だから、この講座では機械設計者が使う順番で学びます  2026-08-16
   ─────────────────────────────────────────────────────────────────────────
   位置：悩み（.ki-worry）の直後。
   構成：見出し → リード3行 → 【01〜06 の丸＋説明】 → 結論ボックス → 次への一文＋下向き矢印

   ★丸・番号・矢印・結論ボックス・背景の方眼はすべてCSS。画像は【丸の中のイラスト6点だけ】。
     手順書 §3-2「幾何学的な形はCSS、絵柄は画像」に沿っている。
   ★矢印の並べ方はモックのS字（右端から回り込んで左端へ戻る）をやめた。
     理由：①折り返す幅では線が破綻する（§12-8）②回り込みの線が長く、視線が一度左へ戻る
     → 【3列×2行。行の中は「→」、行と行のあいだは中央に「↓」1本】にした。
     900px以下は1列縦積みにして、各ステップのあいだを「↓」でつなぐ。
   ========================================================================= */
.lp-body .ki-order {
  position: relative;
  /* 白 → 薄青緑 → 白 → 薄青緑 の交互（手順書 §12-4）。
     上の .ki-scope が白なので、ここは最も薄い青緑にして境目を作る */
  --ki-sec-bg: #F5F9FF;
  padding: 56px 20px 46px;
  background: #F5F9FF;
  overflow: hidden;
}
.lp-body .ki-order::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(105% 82% at 50% 50%, transparent 0%, transparent 44%, #000 80%);
  mask-image: radial-gradient(105% 82% at 50% 50%, transparent 0%, transparent 44%, #000 80%);
  pointer-events: none;
}
.lp-body .ki-order__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .ki-order__title {
  margin: 0 0 18px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .ki-order__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .ki-order__hl { color: #EF6C19; }
.lp-body .ki-order__lead {
  margin: 0 0 34px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.9;
  text-align: center;
}

/* ---- 01〜06 の並び（3列×2行） ---- */
.lp-body .ki-order__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 30px;
  margin: 0; padding: 0;
  list-style: none;
}
.lp-body .ki-order__step {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
/* 各行の中をつなぐ横矢印。軸＋三角を clip-path 1つで描く（§13-7「三角だけだと矢印に見えない」） */
.lp-body .ki-order__step::after {
  content: "";
  position: absolute; top: 50%; right: -30px;
  width: 30px; height: 12px;
  transform: translateY(-50%);
  background: var(--lp-accent);
  clip-path: polygon(0 34%, 58% 34%, 58% 0, 100% 50%, 58% 100%, 58% 66%, 0 66%);
}
.lp-body .ki-order__step:nth-child(3n)::after { content: none; }

.lp-body .ki-order__circle {
  position: relative;
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 150px; height: 150px;
  border: 3px solid var(--lp-accent); border-radius: 50%;
  background: #FFFFFF;
  box-sizing: border-box;
}
.lp-body .ki-order__num { color: #EF6C19; font-size: 28px; font-weight: 900; line-height: 1; }
/* イラストの枠。空のあいだは仮枠が出て、<img> を入れると :empty が外れて消える。
   ★支給された6点はすべて 256×256 の正方キャンバス（2026-08-16 実測）。
     枠を 90×62 の横長にすると高さ62pxで頭打ちになり、横に28px余って小さく見える。
     → 画像に合わせて【正方形 78×78】にした。番号28px＋gap4＋78＝110px で 150px の円に収まる。
   ★中身のbboxは6点でばらつく（例: step01 208×138 ／ step03 138×208＝縦長のJISタグ）。
     ただしキャンバスが同一なので、同じ指定で見た目の大きさが揃う。
     画像を差し替えるときも【キャンバスサイズを6点で揃える】こと。 */
.lp-body .ki-order__ico {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px;
}
.lp-body #kiso .ki-order__ico img {
  display: block; flex: none;
  width: auto; max-width: 100%;
  height: auto; max-height: 100%;
}
.lp-body .ki-order__ico:empty {
  border: 1px dashed #F08300; border-radius: 6px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-order__ico:empty::before { content: "図版"; color: #B45900; font-size: 11px; font-weight: 700; }

.lp-body .ki-order__txt {
  margin: 0;
  color: #2D344B; font-size: 15px; font-weight: 700; line-height: 1.7;
}

/* ---- 行と行のあいだの折り返し線（2026-08-16 アース指示で差し替え） ----
   ★以前は中央に下向き矢印1本（.ki-order__down）だったが、
     02 の真下に出るため「02 → 05」と読めてしまい分かりにくかった。
     → **03 の下から左へ走らせて 04 の上で矢印にする「折り返し線」**にした。
   ★座標の根拠（inner 1000px）：列幅＝(1000 − 30×2) ÷ 3 ＝ 313.33。
     丸は各ステップの左端で150px幅なので、丸の中心は 75 / 418 / **762**。
     線は x=762 から下りて、y=36 で左へ、x=75 で下りて矢印。
   ★viewBox は 1000×64 で inner と等倍。preserveAspectRatio="none" だが
     901〜1000px の範囲で横に1割縮むだけなので、角の丸みの歪みは見えない。
   ★900px以下は縦積みになるので線を消す。代わりに 03 の下向き矢印を復活させる（下の @media 参照）。 */
.lp-body .ki-order__turn {
  position: relative;
  height: 64px;
  margin: 16px 0 8px;
  color: var(--lp-accent);
}
.lp-body .ki-order__turn svg { display: block; width: 100%; height: 100%; }

/* ---- 結論ボックス（.ki-worry と同じ橙の枠） ---- */
.lp-body .ki-order__concl {
  margin: 34px 0 0;
  padding: 20px 26px;
  background: #FFFFFF;
  border: 2px solid #EF6C19; border-radius: 14px;
  box-sizing: border-box;
}
/* ★22px だと1行に収まらず「身につけま／す。」で折れる（実測：必要966px ＞ 使える944px）。
   20px（878px）なら1行に収まる。1040px以下ではさらに18px（790px）へ落とす。 */
.lp-body .ki-order__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 20px; font-weight: 900; line-height: 1.6;
  text-align: center;
}
.lp-body .ki-order__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-order__note {
  margin: 20px 0 0;
  color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
  text-align: center;
}
.lp-body .ki-order__arrow-down {
  width: 24px; height: 24px;
  margin: 14px auto 0;
  border-right: 5px solid var(--lp-accent);
  border-bottom: 5px solid var(--lp-accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

@media screen and (max-width: 1040px) {
  .lp-body .ki-order__concl-lead { font-size: 18px; }
}
@media screen and (max-width: 900px) {
  /* ★2列にはしない。横矢印と縦矢印が混在して意味が読めなくなるため、
     900px以下は【1列縦積み＋各ステップのあいだを ↓ でつなぐ】に切り替える（§12-8） */
  .lp-body .ki-order__title { font-size: 25px; }
  .lp-body .ki-order__lead { font-size: 15px; margin-bottom: 26px; }
  .lp-body .ki-order__flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .ki-order__step { padding: 0 0 40px; }
  /* ★下余白を消すのは【2つめの ol の最後＝06】だけ。
     `:last-child` だけだと 03（1つめの ol の最後）の下余白まで無くなり、
     03→04 の矢印が丸の上に重なって出る（2026-08-16 アース指摘・実測） */
  .lp-body .ki-order__flow:last-of-type .ki-order__step:last-child { padding-bottom: 0; }
  /* 横矢印 → 下向き矢印に置き換える。
     ★`:nth-child(3n)`（PCで矢印を消していた分）は【content の復活だけ】に留めること。
       位置まで一緒に書くと詳細度が (0,3,1) になり、767px以下の
       `.lp-body .ki-order__step::after { left:59px }`（0,2,1）に勝ってしまう。
       その結果 03 と 06 の矢印だけ 14px 右へずれる（2026-08-16 アース指摘・実測）。 */
  .lp-body .ki-order__step:nth-child(3n)::after { content: ""; }
  .lp-body .ki-order__step::after {
    content: "";
    top: auto; bottom: 4px; right: auto; left: 73px;
    width: 26px; height: 30px;
    transform: translateX(-50%);
    clip-path: polygon(34% 0, 66% 0, 66% 60%, 100% 60%, 50% 100%, 0 60%, 34% 60%);
  }
  /* ★縦積みでは折り返し線が意味を持たないので消す。
     そのぶん 03 の下向き矢印を出す必要があるため、
     「矢印を消すのは【2つめの ol の最後＝06】だけ」に限定する。
     `:last-child` だけだと 03（1つめの ol の最後）まで消えて 03→04 が途切れる */
  .lp-body .ki-order__turn { display: none; }
  .lp-body .ki-order__flow:last-of-type .ki-order__step:last-child::after { content: none; }
  .lp-body .ki-order__concl-lead { font-size: 18px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-order { padding: 40px 16px 34px; }
  .lp-body .ki-order__title { font-size: 20px; line-height: 1.55; }
  .lp-body .ki-order__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .ki-order__circle { width: 118px; height: 118px; border-width: 2px; }
  .lp-body .ki-order__num { font-size: 22px; }
  .lp-body .ki-order__ico { width: 62px; height: 62px; }
  .lp-body .ki-order__txt { font-size: 14px; }
  .lp-body .ki-order__step::after { left: 59px; }
  .lp-body .ki-order__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .ki-order__concl-lead { font-size: 16px; }
  .lp-body .ki-order__note { font-size: 13px; text-align: left; }
}

/* =========================================================================
   ★.ki-order 4カード方式（.ki-order__steps 一式）  2026-08-25 アース支給モック
   ─────────────────────────────────────────────────────────────────────────
   01〜06 を「STEP 1〜4」の4枚のカードにまとめ直したもの。
     STEP 1 全体をつかむ      … 01
     STEP 2 材料と形を考える   … 02 / 03  ← 講座の中心なのでカードだけ薄橙で強調
     STEP 3 金型と不良を理解する … 04 / 05
     STEP 4 設計へ落とし込む   … 06
   ★上の .ki-order__flow / __step / __circle / __num / __ico / __txt / __turn
     （150pxの円を3列×2行で並べる方式）は、この方式に置き換えたので【未使用】。
     本文からは外したが、CSSは残してある（作り変えの可能性があるため）。
   ★カードの幅比は 1 : 1.62 : 1.62 : 1（モックの 240 : 390 : 390 : 240 に相当）。
     中に入る項目数（1個／2個）に合わせてある。項目を増減するならここも直すこと。
   ★イラストは `.ki-order__fig` を空にしておくと :empty の仮枠が出る。
     <img> を入れた瞬間に枠が自動で消える（手順書 §12-6）。
   ★カードの高さは grid の align-items:stretch で揃う。
     `.ki-order__fig` を flex:1 にして余りを吸わせているので、
     項目のタイトルが1行と2行で混ざっても図の上端が揃う。 */
.lp-body .ki-order__steps {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 26px minmax(0, 1.62fr) 26px minmax(0, 1.62fr) 26px minmax(0, 1fr);
  align-items: stretch;
  margin: 30px 0 0;
}
.lp-body .ki-order__step-card {
  display: flex; flex-direction: column;
  padding: 16px 12px 18px;
  background: #FFFFFF;
  border: 1px solid #E3EDE6; border-radius: 16px;
  box-shadow: 0 2px 12px rgba(23, 50, 77, .06);
  box-sizing: border-box;
}
/* 講座の中心になる STEP 2 だけ地色を変えて視線を止める */
.lp-body .ki-order__step-card--accent {
  background: #FFF6EC;
  border-color: #F3DCC4;
}
.lp-body .ki-order__step-label {
  margin: 0 0 4px;
  color: var(--lp-accent); font-size: 13px; font-weight: 800;
  letter-spacing: .08em; text-align: center;
}
.lp-body .ki-order__step-name {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E3EDE6;
  color: #123F6D; font-size: 17px; font-weight: 900; line-height: 1.4; text-align: center;
}
.lp-body .ki-order__step-card--accent .ki-order__step-name { border-bottom-color: #F0DAC2; }
.lp-body .ki-order__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
}
.lp-body .ki-order__items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-body .ki-order__item {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
  padding: 0 8px;
}
/* 2項目カードの真ん中の縦罫 */
.lp-body .ki-order__item + .ki-order__item { border-left: 1px solid #E3EDE6; }
.lp-body .ki-order__step-card--accent .ki-order__item + .ki-order__item { border-left-color: #F0DAC2; }
.lp-body .ki-order__no {
  margin: 0 0 6px;
  color: #EF6C19; font-size: 26px; font-weight: 900; line-height: 1;
}
.lp-body .ki-order__item-ttl {
  width: 100%;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E9EFEA;
  color: #2D344B; font-size: 13px; font-weight: 800; line-height: 1.5; text-align: center;
}
.lp-body .ki-order__step-card--accent .ki-order__item-ttl { border-bottom-color: #F0DAC2; }
.lp-body .ki-order__fig {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto;
  width: 100%; min-height: 110px;
}
/* ★★支給された6枚は【縦横比がばらばら】（2026-08-25 実測）:
     01/02/03/06 … 1536×1024＝3:2 ／ 04 … 249×282＝0.88 ／ 05 … 351×369＝0.95
   `width:auto; max-height:○○px` で置くと、横長は横幅で頭打ち・縦長は高さで頭打ちになり
   【カードごとに絵の大きさが変わって見える】（手順書の頻出事故）。
   → 枠を固定して object-fit:contain で中に収める。これで比が違っても
     6枚が同じ面積の中に収まり、大きさが揃って見える。
   ★元画像を切り取らない（cover ではなく contain）。余白は枠が吸う。 */
.lp-body #kiso .ki-order__fig img {
  display: block;
  align-self: stretch;
  width: 100%; max-width: 100%;
  height: 100%; max-height: none;
  margin: 0;
  object-fit: contain; object-position: center;
}
.lp-body .ki-order__fig:empty {
  border: 2px dashed #F08300; border-radius: 8px;
  background: rgba(255, 248, 240, .5);
}
.lp-body .ki-order__fig:empty::before {
  content: "図版"; color: #B45900; font-size: 11px; font-weight: 700;
}
/* カード間の矢印。軸＋三角を clip-path 1つで描く（手順書 §13-5「三角だけだと矢印に見えない」） */
.lp-body .ki-order__arrow {
  align-self: center; justify-self: center;
  width: 22px; height: 14px;
  background: var(--lp-accent);
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}

@media screen and (max-width: 900px) {
  /* 4列は入らないので縦積みにし、矢印も下向きへ回す */
  .lp-body .ki-order__steps { grid-template-columns: minmax(0, 1fr); }
  .lp-body .ki-order__arrow { transform: rotate(90deg); margin: 12px 0; }
  .lp-body .ki-order__step-name { font-size: 16px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-order__steps { margin-top: 22px; }
  .lp-body .ki-order__step-card { padding: 14px 10px 16px; }
  .lp-body .ki-order__item { padding: 0 6px; }
  .lp-body .ki-order__no { font-size: 23px; }
  .lp-body .ki-order__item-ttl { font-size: 12px; }
  .lp-body .ki-order__fig { min-height: 92px; }
}

/* =========================================================================
   .ki-axis  材料の知識が、選ぶための判断軸に変わります  2026-08-16
   ─────────────────────────────────────────────────────────────────────────
   位置：.ki-order（使う順番で学びます）の直後、.ki-ans（受講前の不安）の前。
   末尾の「とはいえ、化学が苦手でも…」が次の .ki-ans へつながる。

   構成：見出し → リード2行 → 【受講前 →(矢印)→ 判断の流れ →(矢印)→ 受講後】
         → 結論ボックス → 次への一文＋下向き矢印

   ★アース判断（2026-08-16）：中央6ステップは【番号＋テキストだけ】。アイコンは作らない。
     番号で順序は十分伝わり、文言の修正も楽なため。画像は左右の2点だけ。
   ★大きな矢印・⚠・?・✓・ステップ間の矢印と丸は、すべてCSS（clip-path / border）。
   ========================================================================= */
.lp-body .ki-axis {
  position: relative;
  --ki-sec-bg: #FFFFFF;
  padding: 56px 20px 46px;
  background: #FFFFFF;
  overflow: hidden;
}
.lp-body .ki-axis::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(100% 78% at 50% 50%, transparent 0%, transparent 48%, #000 84%);
  mask-image: radial-gradient(100% 78% at 50% 50%, transparent 0%, transparent 48%, #000 84%);
  pointer-events: none;
}
.lp-body .ki-axis__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .ki-axis__title {
  margin: 0 0 18px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .ki-axis__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .ki-axis__hl { color: #EF6C19; }
.lp-body .ki-axis__lead {
  margin: 0 0 30px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.9;
  text-align: center;
}

/* ---- 受講前 → 判断の流れ → 受講後 の3カラム ----
   ★列のあいだに矢印用の列（46px）を挟んだ5列グリッドにしている。
     矢印を絶対配置にすると、縦積みへ切り替えたときに位置の付け替えが要るため。 */
.lp-body .ki-axis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.18fr) 46px minmax(0, 1fr);
  align-items: center;
  gap: 0 6px;
}
.lp-body .ki-axis__col { min-width: 0; box-sizing: border-box; }
.lp-body .ki-axis__col--before,
.lp-body .ki-axis__col--after {
  padding: 22px 20px 26px;
  border-radius: 56px;
  text-align: center;
}
.lp-body .ki-axis__col--before { background: linear-gradient(180deg, #FFF1E2 0%, #FFF9F3 100%); }
.lp-body .ki-axis__col--after  { background: linear-gradient(180deg, #EBF5E9 0%, #F6FBF5 100%); }
.lp-body .ki-axis__col-ttl {
  margin: 0 0 14px;
  font-size: 19px; font-weight: 900; line-height: 1.4;
}
.lp-body .ki-axis__col--before .ki-axis__col-ttl { color: #EF6C19; }
.lp-body .ki-axis__col--flow .ki-axis__col-ttl { color: #123F6D; }
.lp-body .ki-axis__col--after .ki-axis__col-ttl { color: var(--lp-accent); }

/* イラスト（アース手配・左右2点だけ）。空のあいだは仮枠が出る */
.lp-body .ki-axis__fig {
  display: flex; align-items: center; justify-content: center;
  height: 150px; margin: 0 0 18px;
}
.lp-body #kiso .ki-axis__fig img {
  display: block; flex: none;
  width: auto; max-width: 100%;
  height: auto; max-height: 100%;
}
.lp-body .ki-axis__fig:empty {
  border: 2px dashed #F08300; border-radius: 12px;
  background: rgba(255, 255, 255, .5);
}
.lp-body .ki-axis__fig:empty::before { content: "図版準備中"; color: #B45900; font-size: 12px; font-weight: 700; }

/* ---- 左右の箇条書き ---- */
.lp-body .ki-axis__list { margin: 0; padding: 0; list-style: none; text-align: left; }
.lp-body .ki-axis__item {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px;
  color: #2D344B; font-size: 14px; font-weight: 700; line-height: 1.6;
}
.lp-body .ki-axis__item:last-child { margin-bottom: 0; }
.lp-body .ki-axis__item::before,
.lp-body .ki-axis__item::after { content: none; display: none; }
.lp-body .ki-axis__mark {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  margin-top: 1px;
}
/* ⚠ 三角＋! */
.lp-body .ki-axis__mark--warn { background: #E8552A; clip-path: polygon(50% 2%, 100% 98%, 0 98%); }
.lp-body .ki-axis__mark--warn::before {
  content: "!"; margin-top: 5px; color: #FFFFFF; font-size: 13px; font-weight: 900; line-height: 1;
}
/* ? 丸 */
.lp-body .ki-axis__mark--q { background: #F0912F; border-radius: 50%; }
.lp-body .ki-axis__mark--q::before {
  content: "?"; color: #FFFFFF; font-size: 14px; font-weight: 900; line-height: 1;
}
/* ✓ 丸（既存 .ki-after__ico と同じ描き方） */
.lp-body .ki-axis__mark--ok { background: var(--lp-accent); border-radius: 50%; }
.lp-body .ki-axis__mark--ok::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 11px; margin: -7px 0 0 -3px;
  border-right: 2.5px solid #FFFFFF; border-bottom: 2.5px solid #FFFFFF;
  transform: rotate(45deg);
}

/* ---- 中央：判断の流れ（番号＋テキストのみ） ---- */
.lp-body .ki-axis__steps { margin: 0; padding: 0; list-style: none; }
.lp-body .ki-axis__step {
  position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 34px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #DCE8DF; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(23, 50, 77, .05);
  color: #2D344B; font-size: 14px; font-weight: 700; line-height: 1.6;
  box-sizing: border-box;
}
.lp-body .ki-axis__step:last-child { margin-bottom: 0; }
.lp-body .ki-axis__no { flex: none; color: #123F6D; font-weight: 900; }
/* ステップ間の丸＋下向き矢印 */
.lp-body .ki-axis__step:not(:last-child)::before {
  content: "";
  position: absolute; left: 50%; bottom: -13px;
  width: 9px; height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--lp-accent);
}
.lp-body .ki-axis__step:not(:last-child)::after {
  content: "";
  position: absolute; left: 50%; bottom: -30px;
  width: 14px; height: 16px;
  transform: translateX(-50%);
  background: var(--lp-accent);
  clip-path: polygon(36% 0, 64% 0, 64% 52%, 100% 52%, 50% 100%, 0 52%, 36% 52%);
}

/* ---- 列と列をつなぐ大きな矢印 ---- */
.lp-body .ki-axis__bridge {
  align-self: center;
  width: 46px; height: 116px;
  clip-path: polygon(0 24%, 60% 24%, 60% 0, 100% 50%, 60% 100%, 60% 76%, 0 76%);
}
.lp-body .ki-axis__bridge--before { background: linear-gradient(90deg, #FBD9B6 0%, #F4A257 100%); }
.lp-body .ki-axis__bridge--after  { background: linear-gradient(90deg, #CCE4C7 0%, #86BC7E 100%); }

/* ---- 結論ボックス・次への一文 ---- */
.lp-body .ki-axis__concl {
  margin: 34px 0 0;
  padding: 20px 26px;
  background: #FFFFFF;
  border: 2px solid #EF6C19; border-radius: 14px;
  box-sizing: border-box;
}
/* ★19px だと1行に収まらず「ように／なります。」で折れる（実測: 必要984px ＞ 使える944px）。
   17px（880px）なら余裕をもって1行に収まる。1100px以下は16pxへ落とす。 */
.lp-body .ki-axis__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 17px; font-weight: 900; line-height: 1.6;
  text-align: center;
}
.lp-body .ki-axis__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-axis__note {
  margin: 20px 0 0;
  color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
  text-align: center;
}
.lp-body .ki-axis__arrow-down {
  width: 24px; height: 24px;
  margin: 14px auto 0;
  border-right: 5px solid var(--lp-accent);
  border-bottom: 5px solid var(--lp-accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

@media screen and (max-width: 1100px) {
  .lp-body .ki-axis__title { font-size: 27px; }
  .lp-body .ki-axis__lead { font-size: 15px; }
  .lp-body .ki-axis__concl-lead { font-size: 16px; }
  .lp-body .ki-axis__col--before,
  .lp-body .ki-axis__col--after { padding: 20px 14px 22px; border-radius: 40px; }
  .lp-body .ki-axis__item { font-size: 13px; }
  .lp-body .ki-axis__step { font-size: 13px; padding: 10px 12px; }
}
@media screen and (max-width: 900px) {
  /* ★3列を縦積みにする。横向きの大矢印は下向きに描き替える（§12-8） */
  .lp-body .ki-axis__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .ki-axis__col--before,
  .lp-body .ki-axis__col--after { padding: 24px 20px 26px; border-radius: 32px; }
  .lp-body .ki-axis__bridge {
    width: 46px; height: 54px;
    margin: 18px auto;
    clip-path: polygon(24% 0, 76% 0, 76% 60%, 100% 60%, 50% 100%, 0 60%, 24% 60%);
  }
  .lp-body .ki-axis__bridge--before { background: linear-gradient(180deg, #FBD9B6 0%, #F4A257 100%); }
  .lp-body .ki-axis__bridge--after  { background: linear-gradient(180deg, #CCE4C7 0%, #86BC7E 100%); }
  .lp-body .ki-axis__col--flow { padding: 4px 0; }
  .lp-body .ki-axis__list { max-width: 420px; margin: 0 auto; }
  .lp-body .ki-axis__steps { max-width: 480px; margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-axis { padding: 40px 16px 34px; }
  .lp-body .ki-axis__title { font-size: 20px; line-height: 1.55; }
  .lp-body .ki-axis__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .ki-axis__col-ttl { font-size: 17px; }
  .lp-body .ki-axis__fig { height: 120px; }
  .lp-body .ki-axis__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .ki-axis__concl-lead { font-size: 15px; }
  .lp-body .ki-axis__note { font-size: 13px; text-align: left; }
}

/* =========================================================================
   .ki-worry 全面刷新（2026-08-14 アース支給のモックに合わせる）
   ─────────────────────────────────────────────────────────────────────────
   構成：見出し → リード文 → 【中央に人物写真＋まわりに3枚のカード＋接続線】
         → 結論ボックス（橙の枠＋右向きシェブロン）
   この1セクションで、旧 .ki-worry（悩み4点）と .ki-why（なぜ難しいのか）の
   両方を兼ねる。→ 本文から .ki-why 一式は削除した。

   ★CSSで描いたもの：カードの枠・影、接続線（インラインSVG）、端点の丸、
     結論ボックスの枠、右向きシェブロン、背景の方眼（製図用紙のイメージ）。
   ★画像で用意するもの：中央の人物（実写・アース手配）と3つのアイコン。
     いずれも :empty の仮枠にしてあるので、<img> を入れた瞬間に枠が消える。

   ★旧 .ki-worry__panel / __figcol / __fig / __cap / __list / __item / __check と
     .ki-why 一式は machining 化の際に【削除済み】（2026-08-17）。
     上に残っているのは .ki-worry 本体・__inner・__eyebrow・__title・__hl だけ。
   ========================================================================= */
.lp-body .ki-worry {
  position: relative;
  --ki-sec-bg: #EAF1FD;   /* 背景色と必ず同じ値に */
  padding: 56px 20px 52px;
  /* jusi のアクセント(#00A64A)と同系の薄い緑。machining は薄い青緑(#E8F3F3)だった */
  background: #EAF1FD;
  overflow: hidden;
}
/* 背景の方眼（製図用紙のイメージ）。中央は mask で抜いて人物を邪魔しない。
   ★歯車・定規・ワイヤーフレームの線画は「絵柄」なので画像側で用意する */
.lp-body .ki-worry::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 90, 45, .055) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(36, 90, 45, .055) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(115% 88% at 50% 46%, transparent 0%, transparent 40%, #000 76%);
  mask-image: radial-gradient(115% 88% at 50% 46%, transparent 0%, transparent 40%, #000 76%);
  pointer-events: none;
}
.lp-body .ki-worry__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .ki-worry__lead {
  margin: 0 0 28px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.8;
  text-align: center;
}

/* ---- 中央＝人物、左右＝カード。接続線はSVGを重ねる ---- */
.lp-body .ki-worry__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 288px) minmax(0, 1fr) minmax(0, 330px);
  grid-template-rows: auto auto;
  align-items: center;
  /* ★column-gap を 8px にすると、左カードと人物のあいだに接続線を引く隙間が無くなり
     線が人物の枠に隠れて「点だけ」に見える（実測 2026-08-14）。22px 以上にすること。
     カラム幅は 288 ＋ 22 ＋ 人物 ＋ 22 ＋ 330 ＝ 1000px。SVGのviewBoxもこの数値に合わせてある */
  column-gap: 22px;
  row-gap: 24px;
  margin: 0 0 30px;
}
.lp-body .ki-worry__hero { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: flex; align-items: flex-end; justify-content: center; }
/* ★セレクタに #kiso が要る（2026-08-16 実測）。
   このCSSの上の方に `.lp-body #kiso img { max-width:100% }`（詳細度1,1,0）があり、
   `.lp-body .ki-worry__hero img`（0,3,1）では負けて max-width:100% のままになる。
   motor の §4-3「テーマの img に何度もやられた」と同じ型。
   ★flex:none も要る。親が display:flex なので、既定の flex-shrink:1 のままだと
     列幅（338px）まで縮められて max-width:none が効かない。
   ★人物写真 nayami.png は 1536×1024（横長）。列幅どおりに収めると 338×225 で小さすぎるため、
     高さ400px基準（=600px幅）で【列からはみ出させて】いる。左右の机・図面はカード
     （z-index:2）の下へ潜り込むが、人物本体は列の中に収まる。 */
.lp-body #kiso .ki-worry__hero img {
  display: block;
  flex: none;
  width: auto; max-width: none;
  height: auto; max-height: 400px;
}
/* 写真が来るまでの仮枠。<img> を入れたら :empty が外れて自動的に消える */
/* ★背景は塗らないこと。接続線が人物の領域を横切る設計なので、
   仮枠に色を敷くと線が見えなくなる（実測 2026-08-14）。枠線だけにする */
.lp-body .ki-worry__hero:empty {
  min-height: 380px;
  border: 2px dashed #F08300; border-radius: 12px;
  background: transparent;
  align-items: center;
}
.lp-body .ki-worry__hero:empty::before {
  content: "エンジニアの写真 準備中";
  color: #B45900; font-size: 13px; font-weight: 700;
}

.lp-body .ki-worry__card {
  position: relative; z-index: 2;
  padding: 20px 22px 22px;
  background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(23, 50, 77, .10);
  box-sizing: border-box;
}
.lp-body .ki-worry__card--start { grid-column: 1; grid-row: 1 / span 2; }
.lp-body .ki-worry__card--book  { grid-column: 3; grid-row: 1; }
.lp-body .ki-worry__card--work  { grid-column: 3; grid-row: 2; }

/* ★★machining では、この下の実測値・例外指定は【zairyou の画像に対するもの】。
   構成案 §3 で img_machining1〜3.png は「キャンバスを3枚とも同一に・660px幅」と
   指定しているので、画像が届いたら bbox を実測し直し、
   .ki-worry__card--start の max-height:100% と --work の -10px 例外が
   まだ必要かどうかを判断すること（不要なら両方消して既定に揃える）。

   ★アイコンの箱は【高さ固定＋overflow:hidden＋カード端まで負のマージンで広げる】。
   zairyou の3枚は「余白の持ち方」がばらばらで、同じ指定では大きさが揃わなかった（2026-08-16 実測）。

   | ファイル | 画像 | 中身 | 中身の高さ割合 |
   |---|---|---|---|
   | img_zairyou1.png 学び始め   | 1254×1254 | 1252×1252 | **100%**（透過0%・全面） |
   | img_zairyou2.png 参考書     | 1536×1024 | 1384×414  | 40% |
   | img_zairyou3.png 実務への接続 | 1672×941  | 1614×372  | 40% |

   img2・img3 に max-height を与えると、見えている絵は高さの40%しか無く極端に小さくなる
   （96px制限のとき実測39px）。→ **既定を幅基準（max-height:none）にし、
   全面画像の img1 だけ高さ基準に戻す。** はみ出した透明余白は overflow:hidden で隠す。

   さらに、箱をカードのパディング分だけ左右へ広げて（margin 0 -22px）絵を大きく見せている。
   実測（箱120px）: img1 120×120 ／ img2 の絵 297×89 ／ img3 の絵 318×73。
   ★motor §4-5「2枚の画像で余白の持ち方が違うと身長が揃わない」と同じ型。
     画像を差し替えたら中身のbboxをcanvasで実測し、どちらの型かを判断し直すこと。 */
.lp-body .ki-worry__ico {
  display: flex; align-items: center; justify-content: center;
  height: 120px; overflow: hidden;
  margin: 0 -22px 12px;   /* ← .ki-worry__card の左右パディングと同じ値 */
}
/* セレクタに #kiso が要る理由は .ki-worry__hero img のコメント参照 */
.lp-body #kiso .ki-worry__ico img {
  display: block; flex: none;
  width: auto; max-width: 100%;
  height: auto; max-height: none;
}
/* 中身が全面の画像（透明余白なし）だけ高さ基準に戻す */
.lp-body #kiso .ki-worry__card--start .ki-worry__ico img { max-height: 100%; }
/* ★img_zairyou3.png は絵が画像幅の97%を占めるため、カード端まで広げると
   左右のすき間が6pxしか残らず窮屈になる（2026-08-16 アース指摘・実測）。
   負のマージンを -22px → -10px に緩めて、すき間を17pxにした。
   （参考書カードは絵が画像幅の90%なので、-22px のままで16px空いている＝ほぼ同じ）
   ★画像を差し替えたら「絵が画像幅の何%か」を実測して、この値を決め直すこと。 */
.lp-body .ki-worry__card--work .ki-worry__ico { margin-left: -10px; margin-right: -10px; }
.lp-body .ki-worry__ico:empty {
  border: 2px dashed #F08300; border-radius: 10px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-worry__ico:empty::before { content: "図版準備中"; color: #B45900; font-size: 12px; font-weight: 700; }

.lp-body .ki-worry__cat { margin: 0 0 6px; color: #EF6C19; font-size: 17px; font-weight: 800; line-height: 1.5; }
.lp-body .ki-worry__txt { margin: 0; color: #2D344B; font-size: 15px; font-weight: 600; line-height: 1.75; }

/* ---- 人物とカードを結ぶ線（インラインSVG） ----
   ★viewBox は 1000×520。ステージの実寸と比が違うので preserveAspectRatio="none" で伸ばすが、
     path に vector-effect="non-scaling-stroke" を付けているので線の太さは一定に保たれる。
   ★カードが縦積みになる 900px 以下では線が意味を持たないので消す。 */
.lp-body .ki-worry__links {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  /* SVG側は stroke="currentColor" / fill="currentColor"。色はここ1箇所で決まる */
  color: var(--lp-accent);
  pointer-events: none;
}

/* ---- 結論ボックス ---- */
.lp-body .ki-worry__concl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: #FFFFFF;
  border: 2px solid #EF6C19; border-radius: 14px;
  box-sizing: border-box;
}
.lp-body .ki-worry__concl-lead {
  margin: 0 0 8px;
  color: #123F6D; font-size: 26px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .ki-worry__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-worry__concl-sub {
  margin: 0;
  color: #2D344B; font-size: 18px; font-weight: 700; line-height: 1.65;
  text-align: center;
}
/* ---- 次のセクションへの橋渡し（2026-08-16 アース指示） ----
   結論ボックスで「教材が少ないから」と言い切ったあと、
   「そこで本講座では〜」で受けて次のセクションへ渡す。
   下向きシェブロンは、この design system の「結論 → 次へ」の合図（.ki-conc__arrow と同じ役割）。 */
.lp-body .ki-worry__bridge {
  max-width: 840px;
  margin: 26px auto 0;
  color: #123F6D; font-size: 20px; font-weight: 800; line-height: 1.7;
  text-align: center;
}
.lp-body .ki-worry__bridge b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-worry__bridge-arrow {
  width: 24px; height: 24px;
  margin: 16px auto 0;
  border-right: 5px solid var(--lp-accent);
  border-bottom: 5px solid var(--lp-accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

/* 右向きのシェブロン。画像ではなく border 2辺＋45度回転で描く */
.lp-body .ki-worry__concl-chev {
  justify-self: center;
  width: 18px; height: 18px;
  border-top: 4px solid var(--lp-accent);
  border-right: 4px solid var(--lp-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

@media screen and (max-width: 900px) {
  .lp-body .ki-worry__links { display: none; }
  .lp-body .ki-worry__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 18px;
  }
  .lp-body .ki-worry__hero,
  .lp-body .ki-worry__card--start,
  .lp-body .ki-worry__card--book,
  .lp-body .ki-worry__card--work { grid-column: 1; grid-row: auto; }
  .lp-body .ki-worry__hero { order: -1; }
  /* ★縦積みになったら、はみ出しをやめて画面幅に収める。
     max-width:none のままだと 375px 幅で 600px になり横スクロールが出る */
  .lp-body #kiso .ki-worry__hero img { max-width: 100%; max-height: 340px; }
  .lp-body .ki-worry__concl-lead { font-size: 21px; }
  .lp-body .ki-worry__concl-sub { font-size: 15px; }
  .lp-body .ki-worry__bridge { font-size: 17px; margin-top: 22px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-worry__lead { font-size: 14px; margin-bottom: 22px; text-align: left; }
  .lp-body .ki-worry__card { padding: 18px 18px 20px; border-radius: 14px; }
  /* ★カードのパディングを 22px → 18px に変えたので、アイコンの箱の負のマージンも合わせる。
     -22px のままだと左右に4pxずつはみ出す */
  .lp-body .ki-worry__ico { height: 104px; margin: 0 -18px 10px; }
  .lp-body .ki-worry__cat { font-size: 15px; }
  .lp-body .ki-worry__txt { font-size: 14px; }
  .lp-body .ki-worry__hero:empty { min-height: 240px; }
  .lp-body .ki-worry__concl { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .lp-body .ki-worry__concl-lead { font-size: 18px; }
  .lp-body .ki-worry__concl-sub { font-size: 14px; }
  .lp-body .ki-worry__concl-chev { transform: rotate(135deg); }
  .lp-body .ki-worry__bridge { font-size: 15px; line-height: 1.75; margin-top: 18px; text-align: left; }
  .lp-body .ki-worry__bridge-arrow { width: 18px; height: 18px; border-width: 4px; margin-top: 12px; }
}

/* =========================================================================
   ★.ki-worry 3カード方式（.ki-worry__list 一式）  2026-08-25
   ─────────────────────────────────────────────────────────────────────────
   machining の `.ma-worry__list`（2026-08-25 完成）と同じ方式。写真を上に置いた
   3枚のカードを横に並べる。
   ★上の .ki-worry__stage / __links / __hero / __card / __cat / __txt / __ico
     （中央に人物写真＋周囲に3カード＋接続線＝zairyou 方式）は
     **この方式に置き換えたので未使用**。本文からは外したが、CSSは残してある。
   ★ピルの色は LP共通の橙 #EF6C19。同じページ内に2種類の橙があると濁るため、
     モックの #F45000 は使っていない（machining と同じ判断）。
   ★写真は3枚とも【同一キャンバス】で用意すること。
     1枚だけ余白の持ち方が違うと、その1枚だけ大きく（小さく）見える（手順書の頻出事故）。
     表示は最大約306px幅なので、書き出しは2倍の 640×480・各120KB以下。
   ★枠の比は【支給写真の実物に合わせる】こと。cover なので比がずれると切り取られる。
     jusi の jusi-problem-01〜03 は **960×640＝3:2**（3枚とも同一・2026-08-25 実測）なので
     `aspect-ratio: 3 / 2` にした。machining は 1448×1086＝4:3 だったので 4/3。
     写真を差し替えるときは、ここを必ず実物の比に直すこと
     （4/3 のままだと 3:2 の写真は左右が約11%切り取られる）。 */
.lp-body .ki-worry__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  /* ★下の余白を必ず持たせること。.ki-worry__concl 側は margin を持っていないので、
     ここを 0 にするとカードと橙の結論ボックスがくっついて見える */
  margin: 30px 0 34px; padding: 0;
  list-style: none;
}
.lp-body .ki-worry__item {
  margin: 0;
  padding: 8px 8px 24px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(23, 50, 77, .07);
  text-align: center;
  box-sizing: border-box;
}
/* 旧テンプレートの li に付く装飾（中黒など）を消す */
.lp-body .ki-worry__item::before,
.lp-body .ki-worry__item::after { content: none; display: none; }
/* 写真枠。比率で高さを固定しておくので、写真が届く前後でレイアウトが動かない */
.lp-body .ki-worry__ph {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0 0 16px;
  border-radius: 10px;
  overflow: hidden;
  background: #F2F5F7;
}
/* セレクタに #kiso が要る理由は .ki-worry__hero img のコメント参照 */
.lp-body #kiso .ki-worry__ph img {
  display: block;
  width: 100%; height: 100%;
  margin: 0;
  object-fit: cover; object-position: center;
}
/* 写真が届くまでの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .ki-worry__ph:empty {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #F08300;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-worry__ph:empty::before {
  content: "写真準備中（960×640）";
  color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .ki-worry__no {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 18px;
  border-radius: 999px;
  background: #EF6C19;
  color: #FFFFFF; font-size: 14px; font-weight: 800; line-height: 1.4; letter-spacing: .04em;
}
/* ★font-size の決め方（2026-08-25 実測）。
   カード幅320px − カードのパディング16px − ここの左右パディング4px ＝ 内寸300px。
   jusi でいちばん長い見出しは「金属と同じ考えで進めてしまう」の14文字。
   18px なら 252px で1行に収まる（48px の余裕）。
   ★見出しを16文字より長くするときは measureText で測り直すこと。 */
.lp-body .ki-worry__h3 {
  margin: 0 0 12px;
  padding: 0 2px;
  color: #123F6D; font-size: 18px; font-weight: 900; line-height: 1.5;
}
.lp-body .ki-worry__desc {
  margin: 0;
  padding: 0 6px;
  color: #4A5568; font-size: 14px; font-weight: 600; line-height: 1.8;
}
@media screen and (max-width: 900px) {
  .lp-body .ki-worry__list { gap: 14px; }
  .lp-body .ki-worry__h3 { font-size: 17px; }
  .lp-body .ki-worry__desc { font-size: 13px; }
}
@media screen and (max-width: 767px) {
  /* 3列のままだと1枚100px弱になり写真も見出しも潰れるので1列に積む */
  .lp-body .ki-worry__list { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; }
  .lp-body .ki-worry__item { padding: 8px 8px 20px; }
  .lp-body .ki-worry__h3 { font-size: 18px; }
  .lp-body .ki-worry__desc { font-size: 14px; }
}

/* =========================================================================
   選定ツールがあれば十分、ではありません（.ki-tool）  2026-08-10
   .ki-worry の直後。旧 #trouble（「選定するための計算ツールも、知識がないと
   有効活用できません」）を置き換えたもの。

   構成：ラベル → 見出し → リード文 →
         3ステップの流れ（01 条件を整理する → 02 ツールで計算する →〔?〕→ 03 結果を判断する）
         → 注意3枚 → 結論の帯

   ★01〜03 の図版はアース手配。.ki-tool__fig に <img> を入れるだけでよい。
     空のあいだは :empty で破線の仮枠が出て、入れると自動的に消える。
   ★矢印・「?」・「!」は画像ではなくCSSで描いている。
     チェック・矢印・三角・丸・番号のような幾何学的な形は、アップロードが要らず、
     404で消える事故も起きず、色やサイズをCSS側だけで変えられるため。
     画像にするのは人・製品・工具のような「絵柄」だけ。
   ========================================================================= */
.lp-body .ki-tool {
  --ki-sec-bg: #FFFFFF;   /* .ki-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  /* 上の .ki-worry が #EAF1FD なので、こちらは白にして切れ目をつくる */
  background: #FFFFFF;
  box-sizing: border-box;
}
.lp-body .ki-tool__inner { width: min(1000px, 100%); margin: 0 auto; }
/* 読者の反論の吹き出し（アース指示 2026-08-10）。
   直前の .ki-why の結論帯「だから、選定に必要な知識を順番に整理することが大切です」から
   いきなりツールの話に移ると唐突なので、話題を持ち出す主体を読者側にする。
   ★下向きのしっぽは三角を2枚重ねて枠線を作っている
     （紺の三角の上に、ひと回り小さい白い三角を重ねる）。 */
.lp-body .ki-tool__ask {
  position: relative;
  width: fit-content; max-width: 100%;
  margin: 0 auto 34px; padding: 15px 34px;
  background: #FFFFFF; border: 2px solid #123F6D; border-radius: 999px;
  color: #123F6D; font-size: 20px; font-weight: 800; line-height: 1.5;
  text-align: center; box-sizing: border-box;
}
.lp-body .ki-tool__ask::before {
  content: ""; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  width: 28px; height: 16px; background: #123F6D;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.lp-body .ki-tool__ask::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
  width: 20px; height: 11px; background: #FFFFFF;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.lp-body .ki-tool__title {
  margin: 0 0 14px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em; text-align: center;
}
.lp-body .ki-tool__hl { color: #EF6C19; }
.lp-body .ki-tool__lead {
  margin: 0 0 24px; color: #4A5568; font-size: 16px; font-weight: 500; line-height: 1.8;
  text-align: center;
}

/* ---- 3ステップの流れ ---- */
.lp-body .ki-tool__flow {
  display: grid;
  /* 連結部（矢印）は固定幅。ステップは等分。
     02→03 の間にあった「?」は削除したので、2か所とも同じ 52px（2026-08-10） */
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center; gap: 0;
  padding: 24px 26px;
  background: #F2F7FC; border: 1px solid #DCE8F2; border-radius: 16px;
  box-sizing: border-box;
}
.lp-body .ki-tool__step { display: flex; flex-direction: column; }
.lp-body .ki-tool__stepttl {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin: 0 0 12px;
  color: #123F6D; font-size: 19px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-tool__num { color: #EF6C19; font-size: 24px; font-weight: 900; }
/* ★min-height と中央寄せは、3枚の図の比率がバラバラでも
   キャプションの高さを揃えるために必要（2026-08-10）。
   01=1.67／02=1.00／03=1.43 と比率が違うため、指定がないと
   表示高さが168/210/197pxとバラつき、下のキャプションの位置がずれる。 */
.lp-body .ki-tool__fig {
  display: flex; align-items: center; justify-content: center;
  min-height: 210px; margin: 0;
}
.lp-body .ki-tool__fig img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 210px;
  margin: 0 auto;
}
/* 図版が入るまでの仮枠。<img> を入れたら :empty が外れて消える */
.lp-body .ki-tool__fig:empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 190px;
  border: 2px dashed #F08300; border-radius: 10px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-tool__fig:empty::before {
  content: "図版準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .ki-tool__cap {
  margin: 12px 0 0; color: #3D4A5C; font-size: 14px; font-weight: 700;
  line-height: 1.6; text-align: center;
}
/* 連結部（矢印と「?」）。上下は中央ではなく図版の高さに合わせて少し下げる */
.lp-body .ki-tool__conn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  align-self: center; padding-top: 20px;
}
.lp-body .ki-tool__arrow {
  flex: 0 0 auto; width: 30px; height: 26px;
  background: #EF6C19;
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}

/* ---- フローから降りる矢印＋注意の箇条書き ----
   ★以前は3枚のカードを横に並べていたが、上の 01/02/03 と1対1で対応しているように
     見えてしまっていた（アース指摘 2026-08-11）。実際は
       1枚目＝01の話／2枚目＝03の話／3枚目＝工程の外（レビュー）
     と対応がずれている。
   ★そこで「フロー全体から降りてくる1つのまとまり」に変更した。
     3列を崩して縦の箇条書きにし、水色ボックスの下端から矢印を1本だけ出している。
   ★項目ごとにカードを付けないこと。付けると再び3つの独立要素に見えてしまう。 */
/* 矢印は「軸＋三角」で描く。
   ★三角だけ（旧34×20px）だと矢印に見えなかった（アース指摘 2026-08-11）。
     軸を足して縦長にし、サイズも60pxに上げている。
   ★色は水色ボックスの枠色 #DCE8F2 から濃紺へ落とすグラデーション。
     ボックスから流れ落ちてくる感じを出すため、上端はボックスと同系色にしている。 */
.lp-body .ki-tool__down {
  width: 60px; height: 60px; margin: 10px auto 0;
  background: linear-gradient(180deg, #C9DEEE 0%, #7FA6C4 48%, #2E5C82 100%);
  clip-path: polygon(36% 0, 64% 0, 64% 55%, 92% 55%, 50% 100%, 8% 55%, 36% 55%);
}
/* ★枠も地色も付けないこと（アース指摘 2026-08-11）。
     上の水色ボックスに続けてもう1枚箱を置くと、箱の入れ子に見えて重くなる。
     3項目が1つのまとまりに見えるかどうかは、縦積み＋点線の区切りで足りている。 */
.lp-body .ki-tool__risk { margin: 6px 0 0; }
.lp-body .ki-tool__riskttl {
  margin: 0 0 8px;
  color: #123F6D; font-size: 20px; font-weight: 800; line-height: 1.5;
  text-align: center;
}
/* リストは幅いっぱいに広げず、最長の項目に合わせて中央に置く */
.lp-body .ki-tool__warns {
  display: table; margin: 0 auto; padding: 0; list-style: none;
}
.lp-body .ki-tool__warn {
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 13px 0;
  color: #17233F; font-size: 16px; font-weight: 700; line-height: 1.6;
}
.lp-body .ki-tool__warn + .ki-tool__warn { border-top: 1px dashed #D5DFE8; }
/* 旧テンプレートの li に付く装飾（中黒など）を消す */
.lp-body .ki-tool__warn::before,
.lp-body .ki-tool__warn::after { content: none; display: none; }
/* オレンジの三角＋白い「!」 */
.lp-body .ki-tool__ex {
  flex: 0 0 auto; position: relative;
  width: 34px; height: 30px;
  background: #EF6C19;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lp-body .ki-tool__ex::after {
  content: "!"; position: absolute; left: 0; right: 0; bottom: 1px;
  color: #FFFFFF; font-size: 16px; font-weight: 900; line-height: 1; text-align: center;
}

/* 結論は共通の .ki-conc を使う（かつてここに .ki-tool__conc の帯があった） */

@media screen and (max-width: 900px) {
  .lp-body .ki-tool__ask { font-size: 16px; padding: 13px 24px; border-radius: 30px; }
  .lp-body .ki-tool__title { font-size: 26px; }
  .lp-body .ki-tool__lead { font-size: 15px; }
  /* 3列が窮屈になるので、ステップを縦積みにして連結部は下向きに倒す */
  .lp-body .ki-tool__flow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 18px; }
  .lp-body .ki-tool__conn { padding-top: 0; }
  .lp-body .ki-tool__arrow { transform: rotate(90deg); }
  .lp-body .ki-tool__down { width: 48px; height: 48px; }
  .lp-body .ki-tool__riskttl { font-size: 17px; }
  .lp-body .ki-tool__conc { font-size: 18px; gap: 14px; padding: 13px 20px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-tool { padding: 40px 16px 34px; }
  /* SPは1行に収まらず折り返すので、ピル型（999px）だと形が崩れる。角丸を控えめに */
  .lp-body .ki-tool__ask { font-size: 14px; padding: 12px 18px; border-radius: 16px; margin-bottom: 28px; }
  .lp-body .ki-tool__title { font-size: 21px; line-height: 1.55; }
  .lp-body .ki-tool__lead { font-size: 13px; }
  .lp-body .ki-tool__stepttl { font-size: 16px; }
  .lp-body .ki-tool__num { font-size: 20px; }
  .lp-body .ki-tool__cap { font-size: 13px; }
  .lp-body .ki-tool__down { width: 40px; height: 40px; }
  .lp-body .ki-tool__riskttl { font-size: 15px; }
  /* SPは幅が足りないので table をやめて幅いっぱいに戻す */
  .lp-body .ki-tool__warns { display: block; }
  .lp-body .ki-tool__warn { font-size: 13px; padding: 11px 0; gap: 11px; }
  .lp-body .ki-tool__ex { width: 28px; height: 25px; }
  .lp-body .ki-tool__ex::after { font-size: 14px; }
  /* SPは1行に収まらないので、矢印を上・文言を下の縦積みにする */
  .lp-body .ki-tool__conc { flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; }
}

/* =========================================================================
   ※ .ki-easy（種類が違っても、見るところは同じです）はセクションごと削除した
      （アース判断 2026-08-12）。
      理由：残っていた中身が「観点は3つで共通」という主張と4種モーターの図の
            2つだけになり、1セクション分の内容ではなくなっていたため。
      行き先：4種モーターの図は .ki-cat の冒頭（.ki-cat__types）へ移設。
              「原理は共通」の一文は .ki-cat のリード文に統合。
      あわせて .ki-tool の結論を「選定の考え方から学ぶ」→「モーターの原理から学ぶ」に
      変更している。原理→カタログが読める、と語が一直線につながるようにするため。
   ========================================================================= */

/* =========================================================================
   原理が分かれば、カタログの数字が読める（.ki-cat）  2026-08-10
   .ki-tool の直後（間にあった .ki-easy は 2026-08-12 に削除）。

   構成：ラベル → 見出し → リード文 → 4種モーターの図 → バッジ →
         カタログ表（10列×4行）＋虫眼鏡＋右の3ラベル → 紺の帯 → 締めの一文

   ★背景は #EAF1FD。.ki-funnel の削除（2026-08-12）にともない白→薄青に変更した。
     これで worry(青)→tool(白)→cat(青)→reason(白)→ans(青) の交互が揃っている。

   ★虫眼鏡はアース手配の透過PNG（レンズ内側まで完全透明）。
     .ki-cat__lens に <img> を入れるだけでよい。空のあいだは仮枠が出る。
   ★モックアップではレンズ内の文字が拡大されているが、CSSでは再現できない
     （表ごと1枚画像にすればできるが、SPで読めず数値も直せなくなる）。
     そのため虫眼鏡は「拡大鏡」ではなく【注目枠】として使い、
     定格3列にオレンジの着色を入れて視線を集めている。
   ★10列の表はSPに入らないので、SPでは横スクロールにし、虫眼鏡は隠す。
   ========================================================================= */
.lp-body .ki-cat {
  --ki-sec-bg: #EAF1FD;   /* .ki-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  background: #EAF1FD;
  box-sizing: border-box;
}
.lp-body .ki-cat__inner { width: min(1000px, 100%); margin: 0 auto; }
/* ラベル。中央の文字の左右に短い罫線 */
.lp-body .ki-cat__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 10px;
}
.lp-body .ki-cat__eyebrow::before,
.lp-body .ki-cat__eyebrow::after {
  content: ""; flex: 0 0 auto; width: 40px; height: 2px; background: #17324D;
}
.lp-body .ki-cat__eyebrow span {
  color: #17324D; font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: .04em;
}
.lp-body .ki-cat__title {
  margin: 0 0 12px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .02em; text-align: center;
}
.lp-body .ki-cat__hl { color: #EF6C19; }
.lp-body .ki-cat__lead {
  margin: 0 0 18px; color: #4A5568; font-size: 16px; font-weight: 500; line-height: 1.8;
  text-align: center;
}
/* ---- 4種モーターの図（旧 .ki-easy から移設 2026-08-12） ----
   「種類やメーカーは多くても、原理は共通」の根拠として見せる。
   ここでは主役ではなく橋渡しなので、ki-easy 時代の330pxより小さい260pxに抑える */
.lp-body .ki-cat__types { margin: 0 0 26px; text-align: center; }
.lp-body .ki-cat__types img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 260px;
  margin: 0 auto;
}
.lp-body .ki-cat__badge {
  display: block; width: fit-content; margin: 0 auto 14px; padding: 8px 22px;
  background: #17324D; border-radius: 6px;
  color: #FFFFFF; font-size: 16px; font-weight: 800; line-height: 1.4;
}

/* ---- 表＋虫眼鏡＋右の注記 ---- */
.lp-body .ki-cat__body {
  display: grid; grid-template-columns: minmax(0, 1fr) 168px;
  align-items: center; gap: 0;
}
/* ★padding-bottom は虫眼鏡の持ち手のための逃げ（実測 2026-08-10）。
   レンズの円は表の行の中央に合わせているが、持ち手は円の中心から
   画像幅の 0.53 倍（幅340pxなら181px）下まで伸びる。
   表の下端までは118pxしかないため、63pxはみ出して下の紺の帯に重なった。
   92px 確保すると、持ち手の先から帯まで26pxの余裕ができる（実測）。
   ★虫眼鏡のサイズを変えたら、この値と .ki-cat__lens の top の calc の
     両方を同じ数値に直すこと（目安：幅×0.53 −（表の高さ÷2）＋余裕）。 */
.lp-body .ki-cat__tablewrap { position: relative; padding-bottom: 92px; }
.lp-body .ki-cat__table {
  width: 100%; border-collapse: collapse; margin: 0;
  background: #FFFFFF;
}
.lp-body .ki-cat__table th {
  padding: 7px 4px; border: 1px solid #C8D6E2; background: #DCE7F0;
  color: #17324D; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: center;
  vertical-align: middle;
}
.lp-body .ki-cat__table td {
  padding: 9px 4px; border: 1px solid #C8D6E2; background: #FFFFFF;
  color: #17324D; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center;
}
/* 定格の3列（電流・回転速度・トルク）に着色して視線を集める。
   ★列番号は 5〜7。品番/出力/電圧/周波数 のあとに来る。
     表の列を増減したらこの数字も直すこと。 */
.lp-body .ki-cat__table th.is-rated,
.lp-body .ki-cat__table tbody td:nth-child(n+5):nth-child(-n+7) {
  background: #FCEBD9;
}
.lp-body .ki-cat__table thead tr:first-child th.is-rated { background: #F6D9BE; }
/* 虫眼鏡。定格3列の上に重ねる。
   ★motor_catalog_magnifier_transparent.png は 600×600 だが、
     レンズの円は画像の中心(300,300)ではなく【中心(239,230)・外径半径205px】にある
     （持ち手が右下に伸びているぶん、円は左上に寄っている。実測 2026-08-10）。
     そのため translate だけで中央に置くと円が左上へズレる。
     ズレの打ち消し：X = (300-239)/600 × 幅 = +35px、Y = (300-230)/600 × 幅 = +40px（幅340px時）
     さらに定格3列は表の中央より右にあるので、+30px 右へ寄せている（合計 +65px）。
   ★top は 50% ではなく calc((100% - 92px)/2)。
     親の .ki-cat__tablewrap に持ち手のための padding-bottom:92px を入れているため、
     50% にすると円の中心が表の中心より46px下へズレる（実測 2026-08-10）。
     この 92px は padding-bottom と必ず同じ値にすること。
   ★幅を変えたら、上の +35 / +40 も同じ比率で計算し直すこと。
   ★実測（幅340px時）：円の中心 = 定格3列の中心と縦横ともに一致（誤差1px）。 */
.lp-body .ki-cat__lens {
  position: absolute; z-index: 2;
  top: calc((100% - 92px) / 2); left: 50%;
  transform: translate(calc(-50% + 65px), calc(-50% + 40px));
  width: 340px; pointer-events: none;
}
.lp-body .ki-cat__lens img { display: block; width: 100%; height: auto; }
.lp-body .ki-cat__lens:empty {
  display: flex; align-items: center; justify-content: center;
  width: 260px; height: 260px; border-radius: 50%;
  border: 3px dashed #F08300; background: rgba(255, 248, 240, .45);
}
.lp-body .ki-cat__lens:empty::before {
  content: "虫眼鏡 準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}
/* 右の3つの注記。表の右端から引き出し線を伸ばす。
   ★padding-left / ::before の left・width / ::after の left は連動している。
     丸(7px)の右端が文字に触れないよう、::after の left は -14px 以下にすること
     （-6px だと丸の右端が文字開始位置に1px食い込む。実測 2026-08-10）。 */
.lp-body .ki-cat__notes { margin: 0; padding: 0 0 0 34px; list-style: none; }
.lp-body .ki-cat__notes li {
  position: relative; margin: 0 0 18px; padding: 0;
  color: #17324D; font-size: 14px; font-weight: 800; line-height: 1.5;
}
.lp-body .ki-cat__notes li:last-child { margin-bottom: 0; }
.lp-body .ki-cat__notes li::before {
  content: ""; position: absolute; left: -34px; top: 50%;
  width: 20px; height: 2px; background: #EF6C19;
}
.lp-body .ki-cat__notes li::after {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #EF6C19;
}

/* 結論は共通の .ki-conc を使う（かつてここに .ki-cat__conc の濃紺の帯があった） */

@media screen and (max-width: 900px) {
  .lp-body .ki-cat__title { font-size: 26px; }
  .lp-body .ki-cat__lead { font-size: 15px; }
  /* 注記を表の下へ回す */
  .lp-body .ki-cat__body { grid-template-columns: minmax(0, 1fr); }
  .lp-body .ki-cat__notes {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
    margin: 16px 0 0; padding: 0;
  }
  .lp-body .ki-cat__notes li { margin: 0; padding-left: 15px; }
  .lp-body .ki-cat__notes li::before { content: none; }
  .lp-body .ki-cat__notes li::after { left: 0; }
  .lp-body .ki-cat__conc { font-size: 19px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-cat { padding: 40px 16px 34px; }
  .lp-body .ki-cat__eyebrow span { font-size: 14px; }
  .lp-body .ki-cat__eyebrow::before,
  .lp-body .ki-cat__eyebrow::after { width: 24px; }
  .lp-body .ki-cat__title { font-size: 21px; line-height: 1.55; }
  .lp-body .ki-cat__lead { font-size: 13px; }
  .lp-body .ki-cat__types { margin-bottom: 18px; }
  .lp-body .ki-cat__types img { max-height: 170px; }
  .lp-body .ki-cat__badge { font-size: 13px; padding: 6px 16px; }
  /* ★10列の表は375pxに入らない。横スクロールにする。
     虫眼鏡はスクロールすると表とズレるので隠す（着色だけ残る）。 */
  /* 虫眼鏡を隠すので、持ち手のための逃げ（padding-bottom）も戻す */
  .lp-body .ki-cat__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
  .lp-body .ki-cat__table { min-width: 640px; }
  .lp-body .ki-cat__table th { font-size: 11px; padding: 5px 3px; }
  .lp-body .ki-cat__table td { font-size: 13px; padding: 6px 3px; }
  .lp-body .ki-cat__lens { display: none; }
  .lp-body .ki-cat__notes li { font-size: 13px; }
  .lp-body .ki-cat__conc { font-size: 15px; padding: 13px 16px; line-height: 1.6; }
  .lp-body .ki-cat__after { font-size: 13px; }
}

/* =========================================================================
   ※ .ki-funnel（候補を絞り込みながら近づける）はセクションごと削除した
      （アース判断 2026-08-12）。
      理由：「絞り込み」の話が .ki-cat の締め → .ki-funnel → .ki-reason のリード文と
            3連続で出ており、前後と同じことを言う中間セクションになっていたため。
      行き先：主張は .ki-cat の結論「カタログを読む力が、候補を絞り込む力になる」と
              .ki-reason のリード文（候補の比較・絞り込みまでを一つの流れで学ぶ）が引き取る。
      図版 motor_selection_funnel_transparent.png（1711×919）は未使用になった。
      あわせて .ki-cat の背景を白→#EAF1FD に変更し、
      worry(青)→tool(白)→cat(青)→reason(白)→ans(青) の交互を復元している。
   ========================================================================= */

/* =========================================================================
   なぜMONO塾なら選定する力が身につくのか（.ki-reason）  2026-08-10
   .ki-cat の直後（間にあった .ki-funnel は 2026-08-12 に削除）。
   旧 #reason（理由1〜3）を置き換えていく。
   ※ まず 01 だけを実装。02・03 は追って追加する。
   ※ 旧 #reason の末尾にはQ&A（初心者ですが大丈夫でしょうか？ ほか）が入っている。
      03まで作り終えてから、Q&Aの扱いを決めて #reason を削除すること。

   ★01の設計判断（アース確認 2026-08-10）
     GPT案では「基礎知識→種類・しくみ→負荷計算→モーター選定」の4ステップ図と、
     「1〜2章／3〜7章／8章」の章マップが左右に並んでいたが、
     この2つはほぼ同じことを言っているので【1本の流れに統合】した。
     さらにGPT案は8章で止まっており「モーター選定」に対応する章が無かったため、
     第9章（モーターの選定事例紹介）を4つ目に置いて流れを完結させている。
   ★8章の中身（旧 img_reason_01.png の下半分）は、
     「計算で扱う要素（運転パターン・トルク）」と
     「対応する機構（一般用途・ベルト・ボールねじ・ラック&ピニオン）」に分けた。
     旧画像では6つが混在していて、性質の違うものが並んで見えていた。
   ★図は6枚に分けて用意してもらう（ラベルはCSS側で載せる）。
     1枚画像のままだとSPで6図が潰れる。
   ========================================================================= */
/* ★2026-08-26 kiso：白 → 薄青 #EAF1FD に変更。
   理由：kiso は `ki-ans` を作らない構成なので `ki-axis`（白）と `ki-reason`（白）が
   隣り合い、セクションの境目が消えていた（手順書 §12-4 の背景の交互／板金 地雷6 と同じ）。
   実測（PC 2048px）した並びは
     hero(グラデ) → coupon(#FFF7E8) → need(白) → worry(#EAF1FD)
     → order(#F5F9FF) → axis(白) → reason(**#EAF1FD**)
   ★`--ki-sec-bg` は `.ki-conc__arrow` が罫線を隠すのに使うので、背景色と必ず同じ値にすること。 */
.lp-body .ki-reason {
  --ki-sec-bg: #EAF1FD;   /* .ki-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  background: #EAF1FD;
  box-sizing: border-box;
}
.lp-body .ki-reason__inner { width: min(1000px, 100%); margin: 0 auto; }
.lp-body .ki-reason__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 10px;
}
.lp-body .ki-reason__eyebrow::before,
.lp-body .ki-reason__eyebrow::after {
  content: ""; flex: 0 0 auto; width: 40px; height: 2px; background: #EF6C19;
}
.lp-body .ki-reason__eyebrow span {
  color: #EF6C19; font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: .04em;
}
.lp-body .ki-reason__title {
  margin: 0 0 12px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em; text-align: center;
}
.lp-body .ki-reason__hl { color: #EF6C19; }
.lp-body .ki-reason__lead {
  margin: 0 0 30px; color: #4A5568; font-size: 16px; font-weight: 500; line-height: 1.8;
  text-align: center;
}

/* ---- 理由1つ分のブロック ----
   ★01〜03の区切りが弱いという指摘への対応（アース指摘 2026-08-10）。
     原因は間隔。01の締めの注記から02の見出しまで34pxしかなく、
     ブロックの終わりと始まりが同じ密度で並んでいた。
     見出しに色の面を敷く案もあったが、それでは「カード」が戻ってしまうため、
     【間隔を広げる＋細い区切り線1本】で処理している。
     線は2つ目以降にだけ付く（先頭に線が出ると見出しから浮く）。 */
.lp-body .ki-reason__item { margin: 0 0 44px; }
.lp-body .ki-reason__item + .ki-reason__item {
  padding-top: 40px; border-top: 1px solid #DCE8EC;
}
.lp-body .ki-reason__item:last-child { margin-bottom: 0; }
/* 「01 ｜ 一連の流れで学ぶ」 */
.lp-body .ki-reason__h3 {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 8px;
  color: #123F6D; font-size: 26px; font-weight: 900; line-height: 1.4;
}
.lp-body .ki-reason__no {
  flex: 0 0 auto; position: relative; padding-right: 18px;
  color: #EF6C19; font-size: 40px; font-weight: 900; line-height: 1;
}
/* 番号と見出しのあいだの縦罫 */
.lp-body .ki-reason__no::after {
  content: ""; position: absolute; right: 0; top: 2px; bottom: 2px;
  width: 2px; background: #C9D8E4;
}
.lp-body .ki-reason__sub {
  margin: 0 0 18px; color: #EF6C19; font-size: 17px; font-weight: 800; line-height: 1.6;
}

/* ---- 4ステップの流れ ---- */
/* ★position:relative は .ki-flow__fig（モーター＋ボールねじの図）を
   2〜3列目にまたがって重ねるための基準（2026-08-10） */
.lp-body .ki-flow {
  position: relative;
  display: flex; align-items: stretch; justify-content: center; gap: 0;
  margin: 0; padding: 0; list-style: none;
}
/* ★padding-bottom:150px は図を重ねるための余白。
   4つとも同じ高さになるので、1列目と4列目の下も空く（モックアップどおり）。
   図をやめる場合はこの余白も戻すこと。 */
.lp-body .ki-flow__step {
  flex: 1 1 0; min-width: 0; margin: 0; padding: 14px 8px 150px;
  background: #F4F8FC; border: 2px solid #C9D8E4; border-radius: 10px;
  text-align: center; box-sizing: border-box;
}
/* 旧テンプレートの li に付く装飾（中黒など）を消す */
.lp-body .ki-flow__step::before,
.lp-body .ki-flow__step::after { content: none; display: none; }
.lp-body .ki-flow__ch {
  display: block; margin: 0 0 4px;
  color: #5A6675; font-size: 13px; font-weight: 700; line-height: 1.3;
}
.lp-body .ki-flow__name {
  display: block; color: #123F6D; font-size: 19px; font-weight: 900; line-height: 1.35;
}
/* 各段で何を扱うかの箇条書き。
   ★旧 img_reason_01.png は各ブロックの中身を箇条書きで見せていた。
     8章だけオレンジ枠で中身を出して他が空白だとバランスが悪いので、
     4段すべてに3〜4項目ずつ入れている（アース指示 2026-08-10）。 */
.lp-body .ki-flow__list {
  margin: 9px 0 0; padding: 9px 0 0; list-style: none;
  border-top: 1px dashed #C9D8E4;
}
.lp-body .ki-flow__list li {
  margin: 0 0 3px; padding: 0;
  color: #5A6675; font-size: 12px; font-weight: 600; line-height: 1.5;
}
.lp-body .ki-flow__list li:last-child { margin-bottom: 0; }
.lp-body .ki-flow__list li::before,
.lp-body .ki-flow__list li::after { content: none; display: none; }
/* 3つ目（負荷計算）＝この講座の中心。オレンジで強調 */
.lp-body .ki-flow__step.is-key {
  background: #FFF3E9; border-color: #F2B183;
}
.lp-body .ki-flow__step.is-key .ki-flow__name { color: #C25A0F; }
.lp-body .ki-flow__step.is-key .ki-flow__list { border-top-color: #F2B183; }
.lp-body .ki-flow__step.is-key .ki-flow__list li { color: #B45900; }
/* 4つ目（モーター選定）＝到達点。
   ★ベタ塗り（#17324D）はやめた（アース指摘 2026-08-10）。
     4つの中で1つだけ濃い面になり、薄い色調の並びから浮いていた。
     強調は【枠線の濃さ】で表す。地は他と同系の薄い青にする。 */
.lp-body .ki-flow__step.is-goal {
  background: #EAF0F7; border-color: #17324D;
}
.lp-body .ki-flow__step.is-goal .ki-flow__ch { color: #5A6675; }
.lp-body .ki-flow__step.is-goal .ki-flow__name { color: #123F6D; }
.lp-body .ki-flow__step.is-goal .ki-flow__list { border-top-color: #C0CEDC; }
.lp-body .ki-flow__step.is-goal .ki-flow__list li { color: #5A6675; }
/* ステップの間の矢印 */
.lp-body .ki-flow__arw {
  flex: 0 0 auto; align-self: center; width: 26px; height: 20px; margin: 0 8px;
  background: #123F6D;
  clip-path: polygon(0 34%, 55% 34%, 55% 0, 100% 50%, 55% 100%, 55% 66%, 0 66%);
}
.lp-body .ki-reason__note {
  margin: 14px 0 0; color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.7;
}

/* ====== I. 3つの理由の図版（旧LPの img_reason_01〜03 を再利用） ==========
   2026-09-26 アース指示。旧 d-monoweb.com/kiso_top/ の #reason にあった
   図版3点が、新LPの理由01〜03の内容とそのまま一致していたため流用する。
   ・01 → img_reason_01（6つの基礎知識だけにしぼる）
   ・02 → img_reason_02（モーメントを複数の視点でつなげて理解する）
   ・03 → img_reason_03（★1→★5へ段階的にレベルを上げる）
   ★PC版とSP版で絵の組み方が違う（SPは縦積みに作り直されている）ため、
     ki-need と同じく <picture> で出し分ける。CSSは幅だけを見る。
   ★地色が白の図なので、セクション地（#EAF1FD）から浮くよう白カード化する。 */
.lp-body .ki-reason__fig {
  margin: 22px auto 0;
  width: min(780px, 100%);
  background: #fff;
  border: 1px solid var(--lp-accent-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(18, 63, 109, .06);
}
.lp-body .ki-reason__fig img {
  display: block; width: 100%; height: auto;
}
@media (max-width: 767px) {
  .lp-body .ki-reason__fig { margin-top: 18px; border-radius: 10px; }
}

/* ---- ki-need の注記（リフターの例）に付く図版 ----
   2026-09-26 アース指示。旧LP `DIV.lifter` の図をそのまま流用する。
   ★`.ki-need__fig`（電車＝連結部の比喩）とは役割が違う。
     こちらは「リフター設計で実際にどの基礎知識を使うか」という具体例なので、
     `.ki-need__note` の文章の直後に置く。
   ★`ki-need` の地色は白。図の地色も白なので、薄い罫線だけで囲って図の範囲を示す。 */
.lp-body .ki-need__fig2 {
  margin: 16px auto 0;
  width: min(820px, 100%);
  background: #fff;
  border: 1px solid var(--lp-accent-line);
  border-radius: 12px;
  overflow: hidden;
}
.lp-body .ki-need__fig2 img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .lp-body .ki-need__fig2 { margin-top: 14px; border-radius: 10px; }
}

/* ---- モーター＋ボールねじの図（2〜3列目にまたがって重ねる） ----
   ★狙い：図の中の縦の区切り線が「3〜7章」と「8章」の境目に重なることで、
     3〜7章まで＝モーター側 ／ 8章＝負荷側 という対応が絵で伝わる。
     これが「モーター側と負荷側をつなげて理解する」という主張の裏づけになる。
   ★left:50% は、2列目と3列目の間（＝2本目の矢印の中心）がちょうど50%だから。
     4列＋3矢印で 4w + 3×42px = 1000px → w=218.5px。
     列の並びが変わったらこの値も計算し直すこと。
   ★かつてここに作業者イラストと吹き出しがあったが、
     吹き出しの文言が下の注記と重複していたため削除した（アース指示 2026-08-10）。 */
.lp-body .ki-flow__fig {
  position: absolute; z-index: 2;
  left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 44%; margin: 0; text-align: center; pointer-events: none;
}
.lp-body .ki-flow__fig img { display: block; width: 100%; height: auto; }
.lp-body .ki-flow__fig:empty {
  display: flex; align-items: center; justify-content: center;
  height: 140px;
  border: 2px dashed #F08300; border-radius: 10px;
  background: rgba(255, 248, 240, .75);
}
.lp-body .ki-flow__fig:empty::before {
  content: "モーター＋ボールねじの図 準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}

/* ---- 8章のボックスからオレンジ枠へ下ろすくさび ----
   ★上辺の 52%〜74% は「3列目（8章）」の左右端。
     4列＋3矢印の計算から、3列目は 521px〜739.5px＝52.1%〜73.95%。
     列の並びを変えたらここも直すこと。
   ★これが無いと、下のオレンジ枠が8章と無関係にただ置かれているように見える。
   ★色は #F2B183（8章カードの枠線と同色）。
     当初 #EF6C19 にしていたが、8章のカード（地 #FFF3E9・枠 #F2B183）より濃く、
     くさびだけが浮いていた（アース指摘 2026-08-10）。
     8章のカードから下のオレンジ枠へ「つながる中間の色」にするのが正しい。 */
.lp-body .ki-flow-wedge {
  width: 100%; height: 40px; margin: 0;
  background: #F2B183;
  clip-path: polygon(52% 0, 74% 0, 100% 100%, 0 100%);
}

/* ---- 8章で扱う内容（オレンジ枠） ---- */
.lp-body .ki-load {
  position: relative; margin: 0; padding: 30px 24px 22px;
  border: 3px solid #EF6C19; border-radius: 14px;
  box-sizing: border-box;
}
/* 枠の上辺に載せる見出し */
.lp-body .ki-load__ttl {
  position: absolute; top: -15px; left: 24px;
  margin: 0; padding: 3px 16px;
  background: #EF6C19; border-radius: 999px;
  color: #FFFFFF; font-size: 14px; font-weight: 800; line-height: 1.6;
}
/* ★左は【1列2行】、右は【2列2行】。左を細くして右に幅を回している（アース指示 2026-08-10）。
   経緯：当初 1fr : 2fr ＋ 右4列 → 図が 138〜148 × 86px しかなく判読できなかった
         → 1fr : 1fr ＋ 右2×2 で 約220px
         → 左を1列にして 300px 固定にし、右を 約292px まで広げた
   ★6図を3列2行に並べる案もあったが、
     「計算で扱う要素（2つ）」と「対応する機構（4つ）」は性質が違うため、
     2と4のグループ分けを保てる今の形を選んだ。
     それでも小さいと感じる場合は、グループ分けを捨てて3列2行にする。 */
.lp-body .ki-load__cols {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px;
}
/* 左（計算で扱う要素）は2つを縦に積む */
.lp-body .ki-load__group--calc .ki-load__list { grid-template-columns: minmax(0, 1fr); }
/* 2つのグループの間の仕切り */
.lp-body .ki-load__group + .ki-load__group {
  padding-left: 24px; border-left: 2px dashed #F2C3A0;
}
/* 左は1行・右は2行になるので、見出しの高さを揃えたうえで
   図のかたまりを上下中央に置く */
.lp-body .ki-load__group { display: flex; flex-direction: column; }
.lp-body .ki-load__gttl {
  margin: 0 0 12px; color: #123F6D; font-size: 15px; font-weight: 800; line-height: 1.4;
  text-align: center;
}
.lp-body .ki-load__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px;
  margin: 0; padding: 0; list-style: none;
  flex: 1 1 auto; align-content: center;
}
.lp-body .ki-load__list li { margin: 0; padding: 0; text-align: center; }
.lp-body .ki-load__list li::before,
.lp-body .ki-load__list li::after { content: none; display: none; }
/* 高さ86px → 130px（アース指示 2026-08-10）。
   ★.ki-load__cols の列配分（1fr:1fr）と .ki-load__list の2列がセット。
     どれかを変えると6図の大きさが揃わなくなる。 */
.lp-body .ki-load__fig {
  display: flex; align-items: center; justify-content: center;
  height: 130px; margin: 0 0 8px;
}
/* ★width:auto / height:auto は必須。
   テーマ側に img { width:100% } 相当の指定があり、これが無いと幅が100%で確定してしまう。
   そこへ max-height が高さだけを制限するため、縦に潰れた絵になる
   （実測 2026-08-10：元の比率1.52に対し表示は2.31）。
   このファイル内の他の図（.ki-easy__fig / .ki-tool__fig / .ki-ba__fig ほか）は
   すべて width:auto を入れてある。新しく図を追加するときも必ず入れること。 */
.lp-body .ki-load__fig img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 130px; margin: 0 auto;
}
.lp-body .ki-load__fig:empty {
  border: 2px dashed #F08300; border-radius: 8px; background: rgba(255, 248, 240, .6);
}
.lp-body .ki-load__fig:empty::before {
  content: "図"; color: #B45900; font-size: 11px; font-weight: 700;
}
.lp-body .ki-load__cap {
  display: block; color: #17233F; font-size: 13px; font-weight: 700; line-height: 1.4;
}

/* ---- 02：事例（.ki-case） ----
   ★画像は旧LPの img_reason_02_* をそのまま使う（加工なし）。
     実際の教材の演習問題そのものなので、描き起こした図より証拠になる。

   ★設計の経緯（アース指摘 2026-08-10）
     最初は「メイン1事例＋サブ2事例」を1枚のカードに入れ子にしたが、
       ・カード左上の装置名ラベルが、どの画像を指すのか分からない
       ・右の画像が演習問題だと分からない
       ・サブ2事例がメイン事例の中に入っているように見える
       ・サブの画像が小さすぎて何の装置か判別できない
     という問題が出た。原因は入れ子構造そのもの。
     → 【3事例を対等な3枚のカード】に変更。メイン/サブの区別をやめた。

   ★カード内の役割分担
     左＝装置図（その真下に装置名。これで対応関係が分かる）
     右＝演習画面（左上に「演習問題」のチップ）
   ★大きさの配分（アース指示 2026-08-10 で見直し）
     当初は「演習画面を大きく＝式が読めること」を優先して 300px / 640px にしていたが、
     実物を見て【演習問題の中身までは読ませなくてよい】と判断。
     「演習問題」のチップがあれば演習だと伝わり、
     装置図が大きい方が、どの事例かを早く判別できる。
     → 装置図を約1.3倍（表示 240×199 → 326×270）に拡大し、演習画面を550pxに縮小。
     ★列幅(390px)だけ広げても装置図は大きくならない。
       max-height:210px で高さ側が上限になっているため、必ず両方を直すこと。 */
.lp-body .ki-case {
  display: grid; grid-template-columns: 390px minmax(0, 1fr);
  align-items: center; gap: 20px;
  margin: 0 0 16px; padding: 20px;
  background: #FFFFFF; border: 1px solid #DCE8EC; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(23, 50, 77, .05);
  box-sizing: border-box;
}
.lp-body .ki-case:last-of-type { margin-bottom: 0; }
.lp-body .ki-case__machine { margin: 0; text-align: center; }
/* max-height が実質の大きさを決めている（3枚とも高さ270pxで揃う）。
   横長の1063×880は326×270、縦長の654×880は200×270になる */
.lp-body .ki-case__machine img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 270px; margin: 0 auto;
}
/* 装置名は図の真下。カードの左上ではなくここに置くこと（対応関係が読めなくなる） */
.lp-body .ki-case__name {
  display: block; margin: 10px 0 0;
  color: #123F6D; font-size: 16px; font-weight: 800; line-height: 1.4; text-align: center;
}
/* ★背景は #F0F0F0。演習画像そのものの地の色と同じ値にしている（実測 2026-08-10）。
   白のままだと、グレーの画像の周囲に8pxの白い縁が出て浮いて見えた（アース指摘）。
   ★カード全体（.ki-case）をグレーにしてはいけない。
     左の装置図（img_reason_02_*_1.png）は透過ではなく【白背景】なので、
     カードをグレーにすると今度は装置図の周りに白い四角が出る。
   ★演習画像を差し替えるときは、地の色が #F0F0F0 のままか確認すること。 */
.lp-body .ki-case__sheet {
  position: relative; margin: 0; padding: 8px;
  background: #F0F0F0; border: 1px solid #D8E3EC; border-radius: 8px;
}
.lp-body .ki-case__sheet img { display: block; width: 100%; height: auto; }
/* 「演習問題」のチップ。枠の左上に載せる */
.lp-body .ki-case__tag {
  position: absolute; top: -12px; left: 14px;
  margin: 0; padding: 3px 14px;
  background: #EF6C19; border-radius: 999px;
  color: #FFFFFF; font-size: 13px; font-weight: 800; line-height: 1.6;
}
.lp-body .ki-case__note {
  margin: 12px 0 0; color: #7A8798; font-size: 12px; font-weight: 600; line-height: 1.6;
  text-align: right;
}

/* ---- 03：Before / After（.ki-ba） ----
   ★画像は2点とも既存のものを流用。新規制作なし。
     Before ＝ img_reason_03_1.png（旧LP。困った表情の作業者・背景透過）
     After  ＝ motor_course_fig07_worker_pointing.png（01で作った指を立てる作業者）
   ★旧LPの img_reason_03_2.jpg は使わない。
     写真合成のJPGで背景が入っており、フラットな線画で統一したこのLPでは浮くため。
   ★After側の文言は旧LPの「なぜそれを入力しているのかがわかる」を採用した。
     GPT案の「入力値の意味が分かる」より一段踏み込んでいて強い。 */
.lp-body .ki-ba {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch; gap: 0;
  margin: 18px 0 0;
}
.lp-body .ki-ba__col {
  padding: 18px 20px 20px; border-radius: 14px; box-sizing: border-box;
}
.lp-body .ki-ba__col--before { background: #F1F4F7; border: 1px solid #DCE3EA; }
.lp-body .ki-ba__col--after { background: #FFF3E9; border: 1px solid #F2B183; }
.lp-body .ki-ba__label {
  display: inline-block; margin: 0 0 12px; padding: 4px 18px;
  border-radius: 999px;
  color: #FFFFFF; font-size: 14px; font-weight: 800; line-height: 1.5; letter-spacing: .06em;
}
.lp-body .ki-ba__col--before .ki-ba__label { background: #5A6675; }
.lp-body .ki-ba__col--after .ki-ba__label { background: #EF6C19; }
/* 高さ190px → 240px（アース指示 2026-08-10）。
   ★カード幅は472pxあるのに図が190pxしかなく、上にも横にも余白が目立っていた。
     詰めるより広げる方向で解決している。 */
/* 吹き出しを上に置いたので、図の余白は下ではなく上に付ける（2026-08-11） */
.lp-body .ki-ba__fig {
  display: flex; align-items: flex-end; justify-content: center;
  height: 240px; margin: 20px 0 0;
}
.lp-body .ki-ba__fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: 240px; }
/* ★After だけ上限を下げているのは、2枚の画像で「余白の割合」が違うため。
     Before（540×540）は人物の高さが442pxで、上下に18%の余白がある
     After （360×460）は人物の高さが456pxで、余白がほぼ無い
   同じ max-height を与えると After の人物だけ大きく描画される
   （190px指定時：Before 155px に対し After 188px。実測 2026-08-10）。
   枠240pxのとき、Afterを198pxにすると人物の高さが約196pxで揃う。
   ★枠の高さ（.ki-ba__fig の height）を変えたら、この値も必ず計算し直すこと。
     計算式：After の上限 ＝ 枠の高さ × 0.826
     （0.826 ＝ Before の人物比率 442/540 ÷ After の人物比率 456/460） */
.lp-body .ki-ba__col--after .ki-ba__fig img { max-height: 198px; }
/* ---- セリフの吹き出し（.ki-ba__say）2026-08-11 ----
   ★以前は人物画像の下に ×／✓ の箇条書き（.ki-ba__list / .ki-ba__mk）を置いていたが、
     人物と文が別々の要素に見えて「この人がそう思っている」という結びつきが伝わらなかった
     （アース指摘）。頭上の吹き出し＋一人称のセリフに変更している。
   ★横並び（人物を左・吹き出しを右）ではなく頭上にしたのは、
     人物イラストを縮めずに済み、PC・SPで同じ組みのまま出せるため。
   ★×／✓ の丸は廃止。セリフに記号は付かないため。
     Before/After の対比はカードの地色（青灰／薄橙）とラベルで取っている。 */
.lp-body .ki-ba__say {
  position: relative; margin: 0; padding: 14px 18px;
  background: #FFFFFF; border: 2px solid #C3CCD6; border-radius: 12px;
}
.lp-body .ki-ba__col--after .ki-ba__say { border-color: #EF6C19; }
.lp-body .ki-ba__say p {
  margin: 0 0 8px; padding: 0;
  color: #17233F; font-size: 15px; font-weight: 700; line-height: 1.6;
}
.lp-body .ki-ba__say p:last-child { margin-bottom: 0; }
.lp-body .ki-ba__say p::before,
.lp-body .ki-ba__say p::after { content: none; display: none; }
.lp-body .ki-ba__say b { color: #C25A0F; font-weight: 900; }
/* 尻尾。枠色の三角の上に一回り小さい白い三角を重ねて、縁取り付きの三角にしている。
   ★内側(::after)を外側(::before)より小さくしないと縁が出ない。
     幅は11px→9px、高さは14px→12px、位置は3px上。 */
.lp-body .ki-ba__say::before,
.lp-body .ki-ba__say::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0;
}
.lp-body .ki-ba__say::before {
  bottom: -14px; margin-left: -11px;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 14px solid #C3CCD6;
}
.lp-body .ki-ba__say::after {
  bottom: -11px; margin-left: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 12px solid #FFFFFF;
}
.lp-body .ki-ba__col--after .ki-ba__say::before { border-top-color: #EF6C19; }
/* 中央の矢印 */
.lp-body .ki-ba__arrow {
  align-self: center; justify-self: center;
  width: 40px; height: 30px; background: #EF6C19;
  clip-path: polygon(0 32%, 58% 32%, 58% 0, 100% 50%, 58% 100%, 58% 68%, 0 68%);
}

@media screen and (max-width: 900px) {
  .lp-body .ki-reason__title { font-size: 26px; }
  .lp-body .ki-reason__lead { font-size: 15px; }
  .lp-body .ki-reason__h3 { font-size: 21px; gap: 14px; }
  /* Before/After は縦積みにし、矢印を下向きに倒す */
  .lp-body .ki-ba { grid-template-columns: minmax(0, 1fr); }
  .lp-body .ki-ba__arrow {
    width: 30px; height: 40px; margin: 12px 0;
    clip-path: polygon(32% 0, 68% 0, 68% 58%, 100% 58%, 50% 100%, 0 58%, 32% 58%);
  }
  .lp-body .ki-ba__fig { height: 150px; margin-top: 16px; }
  .lp-body .ki-ba__fig img { max-height: 150px; }
  .lp-body .ki-ba__col--after .ki-ba__fig img { max-height: 124px; }
  /* 装置図と演習画面は横に並べると演習画面が潰れるので縦積みにする */
  .lp-body .ki-case { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-body .ki-case__machine img { max-height: 150px; }
  .lp-body .ki-reason__no { font-size: 32px; padding-right: 14px; }
  /* 4ステップは横に入らないので2列に折り返す。矢印は消す */
  .lp-body .ki-flow { flex-wrap: wrap; gap: 10px; }
  /* 折り返すと列の位置が変わり、図を重ねる前提が崩れる。
     余白を戻し、図はボックスの下に通常配置する */
  .lp-body .ki-flow__step { flex: 1 1 44%; padding-bottom: 14px; }
  .lp-body .ki-flow__arw { display: none; }
  .lp-body .ki-flow__fig {
    position: static; transform: none; width: 100%; margin: 14px 0 0;
  }
  .lp-body .ki-flow__fig:empty { height: 110px; }
  /* 上辺の位置も列の並びに合わせられないので、中央から広がる形にする */
  .lp-body .ki-flow-wedge { height: 30px; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
  .lp-body .ki-load__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* 1カラムになったら、左も2列に戻す（縦に積む意味がなくなるため） */
  .lp-body .ki-load__group--calc .ki-load__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-body .ki-load__group + .ki-load__group {
    padding-left: 0; padding-top: 18px; border-left: 0; border-top: 2px dashed #F2C3A0;
  }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-reason { padding: 40px 16px 34px; }
  .lp-body .ki-reason__eyebrow span { font-size: 14px; }
  .lp-body .ki-reason__eyebrow::before,
  .lp-body .ki-reason__eyebrow::after { width: 24px; }
  .lp-body .ki-reason__title { font-size: 21px; line-height: 1.55; }
  .lp-body .ki-reason__lead { font-size: 13px; }
  .lp-body .ki-reason__item { margin-bottom: 32px; }
  .lp-body .ki-reason__item + .ki-reason__item { padding-top: 28px; }
  .lp-body .ki-reason__h3 { font-size: 17px; }
  .lp-body .ki-reason__no { font-size: 26px; }
  .lp-body .ki-reason__sub { font-size: 14px; }
  .lp-body .ki-flow__name { font-size: 16px; }
  .lp-body .ki-flow__ch { font-size: 11px; }
  .lp-body .ki-reason__note { font-size: 13px; }
  .lp-body .ki-reason__balloon { font-size: 13px; padding: 11px 14px; }
  .lp-body .ki-reason__person { width: 88px; }
  .lp-body .ki-load { padding: 26px 14px 18px; }
  .lp-body .ki-load__fig { height: 100px; }
  .lp-body .ki-load__fig img { max-height: 100px; }
  .lp-body .ki-load__cap { font-size: 12px; }
  .lp-body .ki-case { padding: 16px; }
  .lp-body .ki-case__sheet { padding: 5px; }
  .lp-body .ki-case__name { font-size: 14px; }
  .lp-body .ki-case__tag { font-size: 11px; padding: 2px 11px; top: -10px; left: 10px; }
  .lp-body .ki-ba__col { padding: 14px 14px 16px; }
  .lp-body .ki-ba__label { font-size: 13px; padding: 3px 14px; }
  .lp-body .ki-ba__fig { height: 120px; margin-top: 14px; }
  .lp-body .ki-ba__fig img { max-height: 120px; }
  .lp-body .ki-ba__col--after .ki-ba__fig img { max-height: 99px; }
  .lp-body .ki-ba__say { padding: 11px 14px; }
  .lp-body .ki-ba__say p { font-size: 13px; }
}

/* =========================================================================
   受講前の不安にお答えします（.ki-ans）  2026-08-10
   .ki-reason の直後。旧 #reason の末尾にあったQ&A2つを置き換えたもの。

   ★このセクションの役割は【対象読者を広げること】。
     Q1＝初心者の不安を消す ／ Q2＝「自分の担当ではない」と思っている人を引き込む
     旧LPの「電気技術者はモーターの選定や制御はできるが、機械部品は設計できない」を
     「動かすのは電気でも、決めるのは機械設計」と言い換えている。
   ★旧LPのQ1にあった「先輩に断られる」「カタログが分からない」等は削除した。
     冒頭の悩みセクションと重複しており、ネガティブな記述が二重になるため。
     残したのは「事前に学んでおくべき知識はありません」の一点だけ。
   ★モーター＋ボールねじの図は使わない（.ki-reason の01で使用済み）。
     代わりに左右2列の対比にして、担当領域を項目名で具体的に示している。
   ========================================================================= */
.lp-body .ki-ans {
  --ki-sec-bg: #EAF1FD;   /* .ki-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  background: #EAF1FD;
  box-sizing: border-box;
}
.lp-body .ki-ans__inner { width: min(1000px, 100%); margin: 0 auto; }
/* =========================================================================
   .ki-ans 全面刷新（2026-08-16 アース支給のモックに合わせる）
   ─────────────────────────────────────────────────────────────────────────
   構成：見出し → リード2行 → 【Q&A 3組の白パネル（左にアイコン）】
         → 緑の結論バンド → 下向き矢印
   ★アイコン3点だけ画像（アース手配）。Q/Aのバッジ・✓・オレンジのピルはCSS。
   ★旧 .ki-qa / .ki-side 一式は machining 化の際に【削除済み】（2026-08-17）。
   ========================================================================= */
.lp-body .ki-ans {
  position: relative;
  --ki-sec-bg: #EAF1FD;
  padding: 56px 20px 46px;
  /* ★上の .ki-axis が白なので、ここは薄い青緑にして境目を作る。
     近い色にするとRGB差が10未満になり境目が消える（§12-3） */
  background: #EAF1FD;
  overflow: hidden;
}
.lp-body .ki-ans::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(36, 90, 45, .05) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(102% 80% at 50% 50%, transparent 0%, transparent 46%, #000 82%);
  mask-image: radial-gradient(102% 80% at 50% 50%, transparent 0%, transparent 46%, #000 82%);
  pointer-events: none;
}
.lp-body .ki-ans__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .ki-ans__hl { color: #EF6C19; }
.lp-body .ki-ans__lead {
  margin: 0 0 26px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.9;
  text-align: center;
}

/* ---- Q&A 3組の白パネル ---- */
.lp-body .ki-ans__panel {
  padding: 6px 30px;
  background: #FFFFFF;
  border: 1px solid #DDE6D6; border-radius: 18px;
  box-shadow: 0 4px 18px rgba(23, 50, 77, .06);
  box-sizing: border-box;
}
.lp-body .ki-ans__row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 26px 0;
}
.lp-body .ki-ans__row + .ki-ans__row { border-top: 1px solid #E6ECE0; }
/* 丸いイラスト枠。空のあいだは仮枠が出て、<img> を入れると自動で消える */
.lp-body .ki-ans__ico {
  display: flex; align-items: center; justify-content: center;
  width: 118px; height: 118px; margin: 0;
  border-radius: 50%;
  background: #F5F9F1;
  overflow: hidden;
}
.lp-body #kiso .ki-ans__ico img {
  display: block; flex: none;
  width: auto; max-width: 100%;
  height: auto; max-height: 100%;
}
.lp-body .ki-ans__ico:empty { border: 2px dashed #F08300; }
.lp-body .ki-ans__ico:empty::before { content: "図版"; color: #B45900; font-size: 12px; font-weight: 700; }

.lp-body .ki-ans__body { min-width: 0; }
.lp-body .ki-ans__badge {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: #FFFFFF; font-size: 17px; font-weight: 900; line-height: 1;
}
.lp-body .ki-ans__badge--q { background: #1B3A6B; }
.lp-body .ki-ans__badge--a { background: var(--lp-accent); }
.lp-body .ki-ans__q {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
  color: #123F6D; font-size: 21px; font-weight: 900; line-height: 1.5;
}
.lp-body .ki-ans__a { display: flex; align-items: flex-start; gap: 14px; }
.lp-body .ki-ans__a p {
  margin: 4px 0 0;
  color: #2D344B; font-size: 15px; font-weight: 600; line-height: 1.85;
}
.lp-body .ki-ans__a b { color: var(--lp-accent); font-weight: 800; }

/* ---- 緑の結論バンド ---- */
.lp-body .ki-ans__concl {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 22px 0 0;
  padding: 18px 26px;
  background: var(--lp-accent); border-radius: 10px;
  color: #FFFFFF; font-size: 19px; font-weight: 800; line-height: 1.6;
  text-align: left;
  box-sizing: border-box;
}
/* 白い丸＋白いレ点（画像ではなくCSS） */
.lp-body .ki-ans__check {
  position: relative; flex: none;
  width: 32px; height: 32px;
  border: 2px solid #FFFFFF; border-radius: 50%;
}
.lp-body .ki-ans__check::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 14px; margin: -9px 0 0 -4px;
  border-right: 3px solid #FFFFFF; border-bottom: 3px solid #FFFFFF;
  transform: rotate(45deg);
}
/* 「全9章」のオレンジのピル */
.lp-body .ki-ans__pill {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 14px;
  background: #EF6C19; border-radius: 999px;
  color: #FFFFFF; font-weight: 900;
}
.lp-body .ki-ans__arrow-down {
  width: 24px; height: 24px;
  margin: 16px auto 0;
  border-right: 5px solid var(--lp-accent);
  border-bottom: 5px solid var(--lp-accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

@media screen and (max-width: 900px) {
  .lp-body .ki-ans__lead { font-size: 15px; }
  .lp-body .ki-ans__panel { padding: 4px 20px; }
  .lp-body .ki-ans__row { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
  .lp-body .ki-ans__ico { width: 88px; height: 88px; }
  .lp-body .ki-ans__q { font-size: 18px; }
  .lp-body .ki-ans__concl { font-size: 16px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-ans { padding: 40px 16px 34px; }
  .lp-body .ki-ans__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .ki-ans__panel { padding: 4px 16px; border-radius: 14px; }
  /* ★横並びをやめてアイコンを上に置く。88pxの列を残すと本文が240px未満になり、
     見出しが4行以上に折れて読みにくくなる（375px幅） */
  .lp-body .ki-ans__row { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; }
  .lp-body .ki-ans__ico { width: 76px; height: 76px; }
  .lp-body .ki-ans__body { width: 100%; }
  .lp-body .ki-ans__badge { width: 28px; height: 28px; font-size: 15px; }
  .lp-body .ki-ans__q { font-size: 16px; gap: 10px; margin-bottom: 12px; }
  .lp-body .ki-ans__a { gap: 10px; }
  .lp-body .ki-ans__a p { font-size: 14px; }
  .lp-body .ki-ans__concl { gap: 12px; padding: 16px; font-size: 14px; border-radius: 8px; }
  .lp-body .ki-ans__check { width: 26px; height: 26px; }
  .lp-body .ki-ans__check::before { width: 7px; height: 12px; margin: -8px 0 0 -3px; border-width: 2.5px; }
}

/* ★2026-08-13 アース指示：小さい文字のラベルをやめ、横線にする（ki-worry と同じ） */
.lp-body .ki-ans__eyebrow { display: none; }
.lp-body .ki-ans__title {
  margin: 0 0 30px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em; text-align: center;
}
.lp-body .ki-ans__title::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}

@media screen and (max-width: 900px) {
  .lp-body .ki-ans__title { font-size: 25px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-ans { padding: 40px 16px 34px; }
  .lp-body .ki-ans__eyebrow { font-size: 13px; }
  .lp-body .ki-ans__title { font-size: 20px; line-height: 1.55; margin-bottom: 22px; }
}

/* =========================================================================
   機械設計者が理解すべき範囲（.ki-scope）  2026-08-06
   お悩みセクション（.ki-worry・薄い青緑）の直後に置く。
   背景を白にしてセクションの切れ目をつくる。
   見出し／リード／バッジ／4ステップ（矢印つき）／締めのボックス。

   ★バッジの位置（アース相談 2026-08-06）
     モックでは見出しの【上】にあったが、下記の理由で【リードの下・カードの直上】に置いた。
       ・バッジの文言「機械設計者が理解すべき範囲」が指しているのは4枚のカードそのもの。
         カードの直前に置くと、そのままカード群の見出しとして読める。
       ・見出しが「〜ではありません」という否定文なので、
         上にバッジがあると「範囲」→「否定」と話が一度折り返して読みにくい。
         否定（見出し）→ 言い換え（リード）→ 範囲の提示（バッジ）→ 中身（カード）
         の順にすると一本道になる。
     ★上に戻す場合は、本文で <p class="ki-scope__badge"> を <h2> の前へ移すだけでよい
       （CSSは位置に依存していない。margin だけ調整すること）。

   ★イラストは .ki-scope__fig の中に <img> を入れるだけ。
     空のあいだは :empty で破線の仮枠が出て、<img> を入れると自動的に消える。
   ========================================================================= */
.lp-body .ki-scope {
  width: 100%;
  padding: 56px 20px 48px;
  /* 上の .ki-worry が #EAF1FD なので、こちらは白にして切れ目をつくる */
  background: #FFFFFF;
  box-sizing: border-box;
}
.lp-body .ki-scope__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
.lp-body .ki-scope__title {
  margin: 0 0 12px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em;
}
/* 見出しの上の細い線（サイト共通 .section-title::before と同じ 52×4px） */
.lp-body .ki-scope__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 18px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .ki-scope__hl { color: #EF6C19; }
.lp-body .ki-scope__lead {
  margin: 0 0 22px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.8;
}
.lp-body .ki-scope__badge {
  display: inline-block; margin: 0 0 26px; padding: 7px 22px;
  border: 2px solid #EF6C19; border-radius: 999px; background: #fff;
  color: #EF6C19; font-size: 15px; font-weight: 800; line-height: 1.4;
}

/* ---- 4ステップ ---- */
.lp-body .ki-scope__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  /* 項目間の矢印を置くぶんの隙間。gap を詰めると矢印がカードに重なる。
     ★この 26px は下の .ki-scope__arrows でも同じ値を使っている。
       矢印をカードの真下に揃えるため、変えるときは必ず両方直すこと */
  gap: 0 26px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .ki-scope__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin: 0; padding: 16px 12px 14px;
  border: 1px solid #DCE8EC; border-radius: 12px; background: #fff;
  box-shadow: 0 2px 8px rgba(23, 50, 77, .05);
}
/* 旧テンプレートの li に付く装飾（中黒など）を消す */
.lp-body .ki-scope__item::before,
.lp-body .ki-scope__item::after { content: none; display: none; }

/* 項目間のオレンジの矢印。最後の項目には出さない */
.lp-body .ki-scope__arw {
  position: absolute; top: 50%; right: -20px; z-index: 2;
  width: 12px; height: 12px;
  border-right: 3px solid #EF6C19; border-bottom: 3px solid #EF6C19;
  transform: translateY(-50%) rotate(-45deg);
}
.lp-body .ki-scope__item:last-child .ki-scope__arw { display: none; }

/* 見出し行「01 検知する」 */
.lp-body .ki-scope__no {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 0 0 12px;
  color: #123F6D; font-size: 15px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-scope__no b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 3px 6px;
  background: #17324D; border-radius: 6px;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.lp-body .ki-scope__fig {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 110px; margin: 0 0 12px;
}
.lp-body .ki-scope__fig img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 110px;
}
/* イラスト未作成のあいだの仮枠。<img> を入れたら :empty が外れて消える */
.lp-body .ki-scope__fig:empty {
  border: 2px dashed #F08300;
  border-radius: 10px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-scope__fig:empty::before {
  content: "イラスト準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}
/* 部品名のチップ */
.lp-body .ki-scope__cap {
  width: 100%; margin: auto 0 0; padding: 7px 6px; box-sizing: border-box;
  background: #EEF3F6; border-radius: 6px;
  color: #17324D; font-size: 13px; font-weight: 700; line-height: 1.4;
}

/* ---- 4枚目「動作を実現する」の強調 ----
   4つの要素の到達点なので、.ki-solve の05と同じ考え方でオレンジにする
   （アース指示 2026-08-06） */
.lp-body .ki-scope__item--goal { border: 2px solid #EF6C19; }
.lp-body .ki-scope__item--goal .ki-scope__no b { background: #EF6C19; }
.lp-body .ki-scope__item--goal .ki-scope__cap { background: #FFF1E6; color: #C25A00; }

/* ---- 人体にたとえる解説（.ki-scope__analogy） ----
   4枚のカードの下。左に講義資料の図、右に対応表。
   ★左の図（img_08.png 980×586）は既存アップロード済みの資料をそのまま使う。
     白背景の不透明PNGなので、枠の背景も白にして境目が出ないようにしている。 */
.lp-body .ki-scope__flowttl {
  margin: 28px 0 16px; color: #17324D; font-size: 17px; font-weight: 800; line-height: 1.5;
}
.lp-body .ki-scope__analogy {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center; gap: 28px;
  margin: 0 0 24px; padding: 24px;
  background: #fff; border-radius: 14px; text-align: left;
  box-shadow: 0 2px 10px rgba(23, 50, 77, .06);
}
.lp-body .ki-scope__shot { position: relative; margin: 0; }
.lp-body .ki-scope__shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid #DCE8EC; border-radius: 10px;
}
/* 図の左上に重ねる「実際の講義資料」ラベル */
.lp-body .ki-scope__shot-tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  margin: 0; padding: 5px 14px;
  background: #17324D; border-radius: 6px;
  color: #fff; font-size: 12px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-scope__ana-ttl {
  margin: 0 0 16px; color: #17324D; font-size: 24px; font-weight: 900; line-height: 1.45;
}
/* 対応表。左が用語、右が人体のたとえ */
.lp-body .ki-scope__map { margin: 0 0 16px; padding: 0; list-style: none; }
.lp-body .ki-scope__map li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 14px minmax(0, 1fr);
  align-items: center; gap: 0 8px;
  margin: 0 0 12px; padding: 0;
  color: #17324D; font-size: 14px; font-weight: 700; line-height: 1.6;
}
.lp-body .ki-scope__map li:last-child { margin-bottom: 0; }
.lp-body .ki-scope__map li::before,
.lp-body .ki-scope__map li::after { content: none; display: none; }
/* 行頭の丸。4行目（メカニクス）だけオレンジにしてカード04と対応させる */
.lp-body .ki-scope__dot {
  width: 11px; height: 11px; border-radius: 50%; background: #2E9CC0;
}
.lp-body .ki-scope__map li:last-child .ki-scope__dot { background: #EF6C19; }
.lp-body .ki-scope__eq { color: #9AA7B5; font-weight: 700; text-align: center; }
.lp-body .ki-scope__body-part { color: #4A5568; font-weight: 600; }
/* 「初心者でも役割と関係を直感的に理解」の帯 */
.lp-body .ki-scope__ana-note {
  margin: 0; padding: 10px 16px;
  background: #EEF3F6; border-radius: 8px;
  color: #17324D; font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center;
}
/* ---- 締めの1行 ---- */
.lp-body .ki-scope__foot {
  margin: 0; color: #4A5568; font-size: 14px; font-weight: 600; line-height: 1.8;
}

/* ---- （旧）4枚の下の下向き矢印。2026-08-06 に人体のたとえへ差し替えたため未使用 ----
   ★経緯（2026-08-06 アース指示）
     最初は「丸4つ＋横線」でつないでいたが、パッと見て流れが伝わらないため、
     各カードの真下に太い矢印を1本ずつ出す形に変更した。
   ★列の作りは .ki-scope__list と完全に同じにすること（4列・gap 26px）。
     そろえておくと矢印が各カードの中心に自動で並ぶ。
   ★矢印は画像ではなく clip-path で描いている。
     polygon は「軸の左上→軸の右上→軸の右下→傘の右→先端→傘の左→軸の左下」の順。
     太さを変えるなら 34%/66%（軸の幅）と 52%（傘の位置）を触る。 */
.lp-body .ki-scope__arrows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 26px;
  margin: 18px 0 20px;
}
.lp-body .ki-scope__down {
  justify-self: center;
  width: 46px; height: 40px;
  background: linear-gradient(180deg, #CBDDEE 0%, #8FB3D4 100%);
  clip-path: polygon(34% 0, 66% 0, 66% 52%, 100% 52%, 50% 100%, 0 52%, 34% 52%);
}

/* ---- 締めのボックス ----
   左にオレンジの太い縦線。中身は［アイコン］［バッジ＋大見出し］［説明文］の3つ。 */
.lp-body .ki-scope__concl {
  display: flex; align-items: center; gap: 24px;
  margin: 0; padding: 22px 28px 22px 24px;
  background: #EBF2FD; border-left: 6px solid #EF6C19;
  border-radius: 10px; text-align: left;
}
/* 左の丸アイコン（白い角丸の中に図を置く） */
.lp-body .ki-scope__concl-ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px;
  background: #fff; border-radius: 14px;
}
.lp-body .ki-scope__concl-ico svg,
.lp-body .ki-scope__concl-ico img { display: block; width: 56px; height: 56px; }
.lp-body .ki-scope__concl-main { flex: 0 0 auto; }
.lp-body .ki-scope__concl-label {
  display: inline-block; margin: 0 0 8px; padding: 4px 16px;
  background: #FFE6CF; border-radius: 999px;
  color: #C25A00; font-size: 12px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-scope__concl-lead {
  margin: 0; color: #17324D; font-size: 26px; font-weight: 900; line-height: 1.4;
  letter-spacing: .01em;
}
.lp-body .ki-scope__concl-txt {
  flex: 1 1 auto; margin: 0;
  color: #17324D; font-size: 15px; font-weight: 600; line-height: 1.9;
}
/* 「電気・制御担当者と連携」の下線。text-decoration だと文字に近すぎるので
   border-bottom で少し離して引いている */
.lp-body .ki-scope__concl-u {
  border-bottom: 2px solid #EF6C19; padding-bottom: 2px;
}

@media screen and (max-width: 900px) {
  /* 4列だとカードが狭くなりすぎるので2列。矢印は右端の列で消す */
  .lp-body .ki-scope__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .lp-body .ki-scope__item:nth-child(2n) .ki-scope__arw { display: none; }
  .lp-body .ki-scope__title { font-size: 26px; }
  /* カードが2列になるので、矢印も2本にして列の中心へ揃える。
     3本目・4本目は行がずれて対応が取れなくなるため出さない */
  .lp-body .ki-scope__arrows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
  .lp-body .ki-scope__down:nth-child(n+3) { display: none; }
  /* 締めのボックスは横並びだと窮屈なので縦積みにする */
  .lp-body .ki-scope__concl { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lp-body .ki-scope__concl-lead { font-size: 22px; }
  /* 人体のたとえも縦積み（図を先に、対応表を下に） */
  .lp-body .ki-scope__analogy { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-body .ki-scope__ana-ttl { font-size: 20px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-scope { padding: 40px 16px 34px; }
  /* SPは矢印1本だけ中央に出す */
  .lp-body .ki-scope__arrows { grid-template-columns: minmax(0, 1fr); margin: 14px 0 16px; }
  .lp-body .ki-scope__down:nth-child(n+2) { display: none; }
  .lp-body .ki-scope__down { width: 38px; height: 32px; }
  .lp-body .ki-scope__concl { padding: 18px 16px 18px 14px; gap: 12px; }
  .lp-body .ki-scope__concl-ico { width: 64px; height: 64px; }
  .lp-body .ki-scope__concl-ico svg,
  .lp-body .ki-scope__concl-ico img { width: 42px; height: 42px; }
  .lp-body .ki-scope__concl-lead { font-size: 19px; }
  .lp-body .ki-scope__flowttl { font-size: 14px; margin: 22px 0 12px; }
  .lp-body .ki-scope__analogy { padding: 16px; margin-bottom: 18px; }
  .lp-body .ki-scope__shot-tag { font-size: 11px; padding: 4px 10px; left: 8px; top: 8px; }
  .lp-body .ki-scope__ana-ttl { font-size: 17px; margin-bottom: 12px; }
  /* 用語が長いので、狭い画面では列幅を詰める */
  .lp-body .ki-scope__map li { grid-template-columns: 12px minmax(0, 1fr) 12px minmax(0, 1fr); font-size: 12px; gap: 0 6px; margin-bottom: 9px; }
  .lp-body .ki-scope__dot { width: 9px; height: 9px; }
  .lp-body .ki-scope__ana-note { font-size: 12px; padding: 9px 12px; }
  .lp-body .ki-scope__foot { font-size: 12px; line-height: 1.75; }
  .lp-body .ki-scope__title { font-size: 21px; line-height: 1.55; }
  .lp-body .ki-scope__lead { font-size: 14px; margin-bottom: 18px; }
  .lp-body .ki-scope__badge { margin-bottom: 20px; padding: 6px 15px; font-size: 13px; }
  .lp-body .ki-scope__list { gap: 18px 14px; margin-bottom: 22px; }
  .lp-body .ki-scope__item { padding: 12px 8px 10px; }
  .lp-body .ki-scope__no { font-size: 13px; gap: 6px; margin-bottom: 8px; }
  .lp-body .ki-scope__fig { height: 84px; margin-bottom: 8px; }
  .lp-body .ki-scope__fig img { max-height: 84px; }
  .lp-body .ki-scope__cap { font-size: 12px; padding: 6px 4px; }
  .lp-body .ki-scope__concl { padding: 16px 14px 16px 18px; }
  .lp-body .ki-scope__concl-txt { font-size: 14px; line-height: 1.7; }
}

/* =========================================================================
   本講座の解決方法（.ki-solve）  2026-08-06
   .ki-scope（白）の直後。背景を薄い青にして切れ目をつくる。
   見出し／リード／題材カード／5ステップ／学び方の比較／締めの1行。

   ★バッジ「本講座の解決方法」は置いていない（アース判断で削除 2026-08-06）
     理由は3つ。
       ・すぐ上の .ki-scope でバッジを見出しの【下】に置いたので、
         ここで【上】に出すと2セクション続けて作法が変わって見える。
       ・このセクションには既にラベルが3つある
         （題材カードの「講座オリジナル題材」／ステップ上の「要求確認から〜」／
           比較表の「学び方の違い」）。見出しの上にもう1つ足すと過剰。
       ・見出し自体が「1つの題材を通して〜実践的に学びます」で解決方法を述べており、
         バッジが無くても意味が通る。
     ★戻す場合は <h2> の前に <p class="ki-solve__badge">本講座の解決方法</p> を入れる。
       スタイルは .ki-scope__badge と同じものを下に用意してある。

   ★題材カードの図版は .ki-solve__fig の中に <img> を入れるだけ。
     空のあいだは :empty で破線の仮枠が出て、<img> を入れると自動的に消える。
   ========================================================================= */
.lp-body .ki-solve {
  width: 100%;
  padding: 56px 20px 48px;
  /* 上の .ki-scope が白なので、こちらは薄い青。
     .ki-worry(#EAF1FD) とも少し変えて、3セクションが順に切り替わるようにしている */
  background: #EBF2FD;
  box-sizing: border-box;
}
.lp-body .ki-solve__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
.lp-body .ki-solve__badge {
  display: inline-block; margin: 0 0 18px; padding: 7px 22px;
  border: 2px solid #EF6C19; border-radius: 999px; background: #fff;
  color: #EF6C19; font-size: 15px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-solve__title {
  margin: 0 0 12px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em;
}
.lp-body .ki-solve__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 18px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .ki-solve__hl { color: #EF6C19; }
.lp-body .ki-solve__lead {
  margin: 0 0 26px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.8;
}

/* ---- 題材カード（左＝図版／右＝説明） ---- */
.lp-body .ki-solve__hero {
  display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; gap: 28px;
  margin: 0 0 32px; padding: 26px;
  background: #fff; border-radius: 14px; text-align: left;
  box-shadow: 0 2px 10px rgba(23, 50, 77, .06);
}
.lp-body .ki-solve__fig {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 240px;
  /* 図版の背景に薄い方眼。ヒーローと同じ考え方（製品図を置く場所の合図） */
  background-image:
    repeating-linear-gradient(0deg, rgba(23, 50, 77, .06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(23, 50, 77, .06) 0 1px, transparent 1px 24px);
  border-radius: 10px;
}
.lp-body .ki-solve__fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: 300px; }
/* 図版が未作成のあいだの仮枠。<img> を入れたら :empty が外れて消える */
.lp-body .ki-solve__fig:empty {
  border: 2px dashed #F08300;
  background-color: rgba(255, 248, 240, .6);
}
.lp-body .ki-solve__fig:empty::before {
  content: "リフターの図版が入ります";
  color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .ki-solve__tag {
  display: inline-block; margin: 0 0 14px; padding: 5px 16px;
  background: #FFE6CF; border-radius: 999px;
  color: #C25A00; font-size: 12px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-solve__name {
  margin: 0 0 12px; color: #17324D; font-size: 26px; font-weight: 900; line-height: 1.4;
}
.lp-body .ki-solve__desc {
  margin: 0 0 16px; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.9;
}
.lp-body .ki-solve__chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.lp-body .ki-solve__chips li {
  margin: 0; padding: 6px 16px;
  background: #EEF3F6; border-radius: 6px;
  color: #17324D; font-size: 13px; font-weight: 700; line-height: 1.4;
}
.lp-body .ki-solve__chips li::before,
.lp-body .ki-solve__chips li::after { content: none; display: none; }

/* ---- 5ステップ ---- */
.lp-body .ki-solve__flowttl {
  margin: 0 0 16px; color: #17324D; font-size: 17px; font-weight: 800; line-height: 1.5;
}
.lp-body .ki-solve__steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch; gap: 0 20px;
  margin: 0 0 30px; padding: 0; list-style: none;
}
.lp-body .ki-solve__step {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin: 0; padding: 16px 10px 14px;
  background: #fff; border: 1px solid #DCE8EC; border-radius: 12px;
}
.lp-body .ki-solve__step::before,
.lp-body .ki-solve__step::after { content: none; display: none; }
/* 最後の「仕様を共有する」だけオレンジで強調（ゴールだから） */
.lp-body .ki-solve__step--goal { border: 2px solid #EF6C19; }
.lp-body .ki-solve__no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; margin: 0 0 10px; padding: 3px 7px;
  background: #17324D; border-radius: 6px;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.lp-body .ki-solve__step--goal .ki-solve__no { background: #EF6C19; }
.lp-body .ki-solve__stt {
  margin: 0 0 10px; color: #17324D; font-size: 15px; font-weight: 800; line-height: 1.5;
}
.lp-body .ki-solve__sdd {
  margin: auto 0 0; color: #5B6B7F; font-size: 12px; font-weight: 500; line-height: 1.7;
}
/* ステップ間の矢印。最後には出さない */
.lp-body .ki-solve__arw {
  position: absolute; top: 50%; right: -15px; z-index: 2;
  width: 10px; height: 10px;
  border-right: 3px solid #C6A98F; border-bottom: 3px solid #C6A98F;
  transform: translateY(-50%) rotate(-45deg);
}
.lp-body .ki-solve__step:last-child .ki-solve__arw { display: none; }

/* ---- 講義内容の紹介（.ki-solve__lec）  2026-08-06 ----
   5ステップの下。既存LPの資料画像をそのまま見せて、講義の中身を伝える。
   ★画像は uploads/2020/12/ の既存ファイルを参照している（新規アップロード不要）。
     img_12.png 980×964（個別機器→装置内の使用例）… 講義内容01
     img_10.png 924×616（メカトロ設計全体の流れ）  … 講義内容02
   ★どちらも白背景の不透明PNGなので、カードの背景も白にして境目を出さない。 */
.lp-body .ki-solve__lecttl {
  margin: 36px 0 6px;
  color: #123F6D; font-size: 22px; font-weight: 900; line-height: 1.5;
}
.lp-body .ki-solve__leclead {
  margin: 0 0 18px; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.8;
}
.lp-body .ki-solve__lec {
  margin: 0; padding: 24px;
  background: #fff; border-radius: 14px; text-align: left;
  box-shadow: 0 2px 10px rgba(23, 50, 77, .06);
}
.lp-body .ki-solve__lecbadge {
  display: inline-block; margin: 0 0 16px; padding: 6px 18px;
  border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.4;
}
/* 01はオレンジ系、02は青系。2つの講義内容を色で区別する */
.lp-body .ki-solve__lecbadge--01 { background: #FFE6CF; color: #C25A00; }
.lp-body .ki-solve__lecbadge--02 { background: #DCEBF7; color: #1B5E8C; }
.lp-body .ki-solve__lec img {
  display: block; width: min(880px, 100%); height: auto; margin: 0 auto;
}

/* ---- （旧）学び方の違い。2026-08-06 に講義内容の紹介へ差し替えたため未使用 ---- */
.lp-body .ki-solve__cmp {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  margin: 0 0 26px; background: #fff; border-radius: 12px; overflow: hidden;
  text-align: left;
}
.lp-body .ki-solve__cmp-h {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 12px; background: #E3EDF4;
  color: #17324D; font-size: 14px; font-weight: 800; line-height: 1.5; text-align: center;
}
.lp-body .ki-solve__cmp-col { padding: 20px 22px; }
/* 本講座のほうだけ淡いオレンジにして差を見せる */
.lp-body .ki-solve__cmp-col--ours { background: #FFF6EF; }
.lp-body .ki-solve__cmp-ttl {
  margin: 0 0 8px; color: #5B6B7F; font-size: 14px; font-weight: 800; line-height: 1.5;
}
.lp-body .ki-solve__cmp-col--ours .ki-solve__cmp-ttl { color: #C25A00; }
.lp-body .ki-solve__cmp-txt {
  margin: 0; color: #17324D; font-size: 13px; font-weight: 500; line-height: 1.9;
}
/* ---- 締めの1行 ---- */
.lp-body .ki-solve__concl {
  margin: 26px 0 0; color: #4A5568; font-size: 15px; font-weight: 700; line-height: 1.7;
}

@media screen and (max-width: 900px) {
  .lp-body .ki-solve__title { font-size: 26px; }
  /* 題材カードは縦積み */
  .lp-body .ki-solve__hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* 5列は狭すぎるので3列。3の倍数の位置で矢印を消す */
  .lp-body .ki-solve__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .lp-body .ki-solve__step:nth-child(3n) .ki-solve__arw { display: none; }
  /* 比較表は見出しを上に出して2列 */
  .lp-body .ki-solve__cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-body .ki-solve__cmp-h { grid-column: 1 / -1; padding: 12px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-solve { padding: 40px 16px 34px; }
  .lp-body .ki-solve__title { font-size: 21px; line-height: 1.55; }
  .lp-body .ki-solve__lead { font-size: 14px; margin-bottom: 20px; }
  .lp-body .ki-solve__hero { padding: 18px; margin-bottom: 24px; }
  .lp-body .ki-solve__fig { min-height: 170px; }
  .lp-body .ki-solve__fig img { max-height: 220px; }
  .lp-body .ki-solve__name { font-size: 20px; }
  .lp-body .ki-solve__desc { font-size: 13px; line-height: 1.8; }
  /* SPは2列。偶数番の矢印を消す */
  .lp-body .ki-solve__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .lp-body .ki-solve__step:nth-child(3n) .ki-solve__arw { display: block; }
  .lp-body .ki-solve__step:nth-child(2n) .ki-solve__arw { display: none; }
  .lp-body .ki-solve__stt { font-size: 13px; }
  .lp-body .ki-solve__sdd { font-size: 11px; }
  .lp-body .ki-solve__cmp { grid-template-columns: minmax(0, 1fr); }
  .lp-body .ki-solve__cmp-col { padding: 16px 16px; }
  .lp-body .ki-solve__concl { font-size: 13px; margin-top: 20px; }
  .lp-body .ki-solve__lecttl { font-size: 17px; margin-top: 26px; }
  .lp-body .ki-solve__leclead { font-size: 12px; margin-bottom: 14px; }
  .lp-body .ki-solve__lec { padding: 14px; }
  .lp-body .ki-solve__lecbadge { font-size: 11px; padding: 5px 14px; margin-bottom: 12px; }
}

/* =========================================================================
   受講後にできるようになること（.ki-after）  2026-08-06
   .ki-solve（薄い青）の直後。上半分は白、カードの帯だけ淡いオレンジにして、
   「講座の中身」から「受講後の姿」へ話が変わったことを色で示す。

   ★バッジはモックどおり見出しの【上】に置いている。
     .ki-scope はバッジを見出しの下、.ki-solve はバッジ無しなので作法が揃っていない。
     ここだけ上にしているのは、文言「受講後にできるようになること」が
     見出し「受講後は、〜」と続き読みになるため（アース提供のモックの意図）。
     揃えたい場合は <h2> の後ろへ移すだけでよい（CSSは位置に依存していない）。

   ★チェックアイコンは画像ではなくCSSで描いている。
     丸＝background、レ点＝border-right/bottom を45度回したもの。
     色を変えるなら .ki-after__ico の background 1か所でよい。
   ========================================================================= */
.lp-body .ki-after {
  width: 100%;
  padding: 56px 0 0;
  background: #FFFFFF;
  box-sizing: border-box;
}
.lp-body .ki-after__head {
  width: min(960px, 100%); margin: 0 auto; padding: 0 20px 32px;
  box-sizing: border-box; text-align: center;
}
.lp-body .ki-after__badge {
  display: inline-block; margin: 0 0 18px; padding: 7px 22px;
  border: 2px solid #EF6C19; border-radius: 999px; background: #fff;
  color: #EF6C19; font-size: 15px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-after__title {
  margin: 0 0 12px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em;
}
/* 見出しの上の細い線（サイト共通 .section-title::before と同じ 52×4px） */
.lp-body .ki-after__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 18px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .ki-after__lead {
  margin: 0; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.8;
}
/* カードを載せる淡いオレンジの帯。section が全幅なのでそのまま背景色を敷ける */
.lp-body .ki-after__band {
  width: 100%; padding: 40px 20px 34px;
  background: #FFF6EF;
  box-sizing: border-box;
}
.lp-body .ki-after__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
.lp-body .ki-after__cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch; gap: 20px;
  margin: 0 0 26px; padding: 0; list-style: none;
}
.lp-body .ki-after__card {
  display: flex; flex-direction: column; align-items: center;
  margin: 0; padding: 24px 16px 20px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(23, 50, 77, .06);
}
.lp-body .ki-after__card::before,
.lp-body .ki-after__card::after { content: none; display: none; }
/* オレンジの丸＋白いレ点 */
.lp-body .ki-after__ico {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; margin: 0 0 16px;
  background: #EF6C19; border-radius: 50%;
}
.lp-body .ki-after__ico::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 17px; margin: -11px 0 0 -5px;
  border-right: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}
.lp-body .ki-after__ttl {
  margin: 0 0 12px; color: #17324D; font-size: 16px; font-weight: 800; line-height: 1.55;
}
.lp-body .ki-after__dd {
  margin: auto 0 0; color: #5B6B7F; font-size: 12px; font-weight: 500; line-height: 1.7;
}
.lp-body .ki-after__foot {
  margin: 0; color: #17324D; font-size: 14px; font-weight: 700; line-height: 1.7;
}

@media screen and (max-width: 900px) {
  .lp-body .ki-after__title { font-size: 26px; }
  .lp-body .ki-after__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-after { padding-top: 40px; }
  .lp-body .ki-after__head { padding-bottom: 24px; }
  .lp-body .ki-after__badge { margin-bottom: 14px; padding: 6px 15px; font-size: 13px; }
  .lp-body .ki-after__title { font-size: 21px; line-height: 1.55; }
  .lp-body .ki-after__lead { font-size: 13px; }
  .lp-body .ki-after__band { padding: 28px 16px 26px; }
  .lp-body .ki-after__cards { gap: 14px; margin-bottom: 20px; }
  .lp-body .ki-after__card { padding: 18px 12px 16px; }
  .lp-body .ki-after__ico { width: 36px; height: 36px; margin-bottom: 12px; }
  .lp-body .ki-after__ico::before { width: 7px; height: 14px; margin: -9px 0 0 -4px; border-width: 2.5px; }
  .lp-body .ki-after__ttl { font-size: 13px; margin-bottom: 8px; }
  .lp-body .ki-after__dd { font-size: 11px; }
  .lp-body .ki-after__foot { font-size: 12px; }
}

/* =========================================================================
   監修・制作体制（.ki-super）  2026-08-06
   移植元: lp_yoso.css L6159〜6286（.yo-super）。変更したのはクラス名だけ。
   旧 .kanshu（設計歴40年のベテラン設計者【監修】）の置き換えにあたる。
   ★写真は旧LPと同じ /wp/wp-content/uploads/2019/10/img_teacher_01.jpg。
     元画像が 300×148px しかないため、枠は aspect-ratio: 300/148 に合わせている。
     高解像度に差し替える場合は、この aspect-ratio を実寸に合わせて直すこと。
   ★旧 .kanshu はまだ本文に残っている（削除は保留中）。
     旧ブロックを消すときに、監修者情報が二重になっていないか確認すること。
   ========================================================================= */
.lp-body .ki-super {
  width: 100%;
  padding: 56px 20px 56px;
  /* 直後のカリキュラム（白地）と地色が近く境目が曖昧になるため、
     下に50pxの白い余白を空けて切り離す */
  margin: 0 0 50px;
  background: #EAEFF5;
  box-sizing: border-box;
}
.lp-body .ki-super__inner { width: min(1000px, 100%); margin: 0 auto; text-align: center; }
.lp-body .ki-super__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 10px;
  color: #EF6C19; font-size: 14px; font-weight: 800; letter-spacing: .08em;
}
.lp-body .ki-super__eyebrow::before,
.lp-body .ki-super__eyebrow::after {
  content: ""; display: inline-block; width: 26px; height: 2px; background: #EF6C19;
}
.lp-body .ki-super__title {
  margin: 0 0 10px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.45; letter-spacing: .01em;
}
.lp-body .ki-super__hl { color: #EF6C19; }
.lp-body .ki-super__lead {
  margin: 0 0 30px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.8;
}
/* ---- 白いカード（左に青の縦アクセント） ---- */
.lp-body .ki-super__card {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px;
  padding: 30px 32px;
  background: #fff;
  border-left: 6px solid #1F6FA5;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(20, 60, 90, .07);
  text-align: left;
}
/* ---- 左：プロフィール ---- */
.lp-body .ki-super__profile {
  padding: 18px 18px 18px;
  background: #F4F7FA; border-radius: 6px; text-align: center;
}
.lp-body .ki-super__photo {
  position: relative; margin: 0;
  border-radius: 6px; overflow: visible;
}
.lp-body .ki-super__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 300 / 148;
  object-fit: cover; border-radius: 6px;
}
.lp-body .ki-super__badge {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px;
  white-space: nowrap;
  display: inline-block; padding: 7px 16px;
  background: #EF6C19; border-radius: 30px;
  color: #fff; font-size: 13px; font-weight: 800; line-height: 1.2;
  box-shadow: 0 2px 6px rgba(180, 89, 0, .25);
}
.lp-body .ki-super__org {
  margin: 30px 0 2px; color: #5A6675; font-size: 13px; font-weight: 700; line-height: 1.5;
}
.lp-body .ki-super__name {
  margin: 0 0 6px; color: #123F6D; font-size: 18px; font-weight: 800; line-height: 1.5;
}
.lp-body .ki-super__role {
  margin: 0; color: #5A6675; font-size: 12px; font-weight: 600; line-height: 1.7;
}
/* ---- 右：本文 ---- */
.lp-body .ki-super__label {
  margin: 0 0 8px; color: #1F6FA5; font-size: 13px; font-weight: 800; letter-spacing: .04em;
}
.lp-body .ki-super__h3 {
  position: relative; margin: 0 0 20px; padding: 0 0 18px;
  color: #123F6D; font-size: 26px; font-weight: 900; line-height: 1.5;
}
.lp-body .ki-super__h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 4px; background: #EF6C19; border-radius: 2px;
}
.lp-body .ki-super__text {
  margin: 0 0 22px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.9;
}
/* ---- 右下：3つの小カード ---- */
.lp-body .ki-super__points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .ki-super__point {
  margin: 0; padding: 15px 12px 13px;
  background: #F2F6FA; border-radius: 6px;
}
.lp-body .ki-super__point::before,
.lp-body .ki-super__point::after { content: none; display: none; }
.lp-body .ki-super__point--accent { background: #FEF4EA; }
.lp-body .ki-super__ph { display: flex; align-items: center; gap: 8px; }
.lp-body .ki-super__ico {
  flex: 0 0 auto; display: block; width: 24px; height: 24px; color: #1F6FA5;
}
.lp-body .ki-super__point--accent .ki-super__ico { color: #EF6C19; }
/* ★ 3列に収まる文字量が限界。13px を上げると <br> の行が1文字はみ出して割れる */
.lp-body .ki-super__pt {
  margin: 0; color: #123F6D; font-size: 13px; font-weight: 800; line-height: 1.45;
}
.lp-body .ki-super__pd {
  display: block; margin: 11px 0 0; color: #5A6675; font-size: 12px; font-weight: 600; line-height: 1.55;
}
@media screen and (max-width: 900px) {
  .lp-body .ki-super__card { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lp-body .ki-super__profile { width: min(340px, 100%); margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-super { padding: 40px 16px 40px; }
  .lp-body .ki-super__title { font-size: 21px; line-height: 1.55; }
  .lp-body .ki-super__lead { font-size: 14px; margin-bottom: 22px; }
  .lp-body .ki-super__card { padding: 22px 18px; }
  .lp-body .ki-super__h3 { font-size: 20px; }
  .lp-body .ki-super__text { font-size: 14px; }
  .lp-body .ki-super__points { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* =========================================================================
   講座名バンド（.lp-mv）の「（メカトロ編）」を小さくする  2026-08-06
   h2 全体は56px（テーマ共通）。副題の「（メカトロ編）」はそれより小さくする。
   ★構想3LPと同じ見え方に揃える（アース指示 2026-08-06）。
     lp_koso-basic.css の `.lp-mv h2 span { font-size: clamp(21px, 3vw, 42px) }`
     を実測して、同じ clamp をそのまま採用した。
     PC（1000px超）で42px、狭い画面では3vwで縮み、下限21pxで止まる。
     ※最初 52px を指定したが、56pxとの差が4pxしかなく効果が分からなかった。
       固定値ではなく構想LPと同じ clamp にしている理由は、
       SPで括弧が大きすぎて2行に折れるのを防ぐため。
   ※本文側で <span class="lp-mv__sub"> で囲っている。
     構想LPはクラス無しの素の span だが、mechatro は他の span と
     区別できるようクラスを付けている。
   ========================================================================= */
.lp-body #kiso .lp-mv .lp-mv__sub {
  font-size: clamp(21px, 3vw, 42px);
}

/* =========================================================================
   ファーストビュー（.ki-hero）  2026-08-06
   -------------------------------------------------------------
   旧FVは文字を焼き込んだ1枚画像（img_mv.jpg 998×688）だった。
   拡大でぼやける・文言修正のたびに画像を作り直す・講座名が焼き込まれていて
   直下の .lp-mv と二重になる、という問題があったためテキスト化した。
   移植元: lp_yoso.css L5581〜5779（.yo-hero）。変更したのは次の2点だけ。
     ・クラス名 yo-hero → ki-hero（LPごとに固有名にする既存の運用に合わせる。
       seizu の sz-hero → yoso の yo-hero と同じ流れ）
     ・右カラムを 36% → 31%（アース指示で見出しを45pxにするため 2026-08-06）。
       yosoと同じ45pxだと最長行「装置全体を見渡せる設計者へ」が589px必要で、
       36%のときの左カラム565pxには収まらなかった。
       31%にすると左カラムが611pxになり22px余る。
       ★右カラムを狭めても画像は小さくならない。画像は縦長(0.67)で
         max-height:450px が先に効くため、表示幅は300px固定。
         367pxの枠に対して左右に33pxずつ余るだけ（実測で確認済み）。
       ★見出しは本文側で3行に改行している（機械・電気・制御の／つながりを学び、／
         装置全体を見渡せる設計者へ）。改行を変えるときは各行が611pxを
         超えないか必ず実測すること。45pxでの実測は 408 / 363 / 589px。
   ★右の写真は準備中（アース手配）。用意でき次第 .ki-hero__photo の中の
     .ki-hero__ph（破線の仮枠）を <img class="ki-hero__img"> に差し替える。
     仮枠は :empty ではなく実体クラスなので、img を入れたら手で消すこと。
   ========================================================================= */
/* ★背景（2026-08-06 アース指示で全面変更）
   旧：即戦力LPの写真 bg_mv.jpg（歯車・ベアリング）＋白いグラデーションの覆い。
   新：写真をやめ、白→ごく薄い青緑の3段グラデーションにした。
       左 #FFFFFF（コピーを読みやすく）／中央 #F5F9FE（自然につなぐ）／
       右 #EAF1FD。
   ※ 歯車・ベアリングの写真はメカトロの題材（リフター・コンベヤ）と
     合わないため削除した。bg_mv.jpg 自体は即戦力LPが使っているので消さないこと。 */
.lp-body .ki-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --ki-pad: 20px;
  background: linear-gradient(90deg, #FFFFFF 0%, #F5F9FE 50%, #EAF1FD 100%);
}
/* 製品の後ろにだけ入れる薄いグリッド（方眼）。
   ★左のコピーに掛かるとノイズになるので、マスクで右半分だけに出している。
     45%まで完全に透明→62%で不透明、という段階で自然に現れる。
   ★z-index:0。テキストと画像は .ki-hero__inner（z-index:1）なので上に乗る。
   ★線を濃くしたいときは rgba の .07 を上げる。マス目の大きさは 28px の方。 */
.lp-body .ki-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(23, 50, 77, .07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(23, 50, 77, .07) 0 1px, transparent 1px 28px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, #000 62%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, #000 62%, #000 100%);
  pointer-events: none;
}
.lp-body .ki-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31%;
  align-items: stretch;
  gap: 24px;
  /* ★2026-08-14 アース指示：ヒーローの3バッジ（.ki-hero__points）を本文から削除し、
     見出しも4行→3行になったため、余った分だけ高さを詰めた。
     実測（PC 1250px幅）: 中身の自然高さ 437px（badge40 + 18 + title196 + 36 + note60 ＋ padding64）。
     500px のままだと下に63pxの空白が残る。→ 440px にして 546px → 440px（−106px）。
     ★見出しの行数やバッジを戻すときは、この値も測り直すこと。
     ★2026-08-16：3カードへの引き出し線を入れたため 440px → 470px に戻した。
       440pxだとプラスチックのカードの上に、線を引くだけの余白（14px以上）が取れない。
       高さを H とすると「シルエット下端から カード上端 までのすき間 ＝ H/2 − 191」。
       470px で 44px 確保できる。**この値を変えたら引き出し線の座標も測り直すこと。** */
  min-height: 470px;
  width: 100%; max-width: 960px; margin: 0 auto;
  padding: 0 var(--ki-pad);
  box-sizing: border-box;
}
.lp-body .ki-hero__text { align-self: center; padding: 24px 0 40px; }

/* ---- 左：テキスト ---- */
/* ★バッジは紺（見出し本体と同色）。オレンジにしないこと。
   オレンジは見出しの強調語（.ki-hero__hl）に使っており、
   バッジまでオレンジにすると強調が3か所に散って見出しが目立たなくなる
   （アース指示 2026-08-09。メカトロ編はオレンジのままなので注意） */
.lp-body .ki-hero__badge {
  display: inline-block; margin: 0 0 18px; padding: 7px 20px;
  border: 2px solid #123F6D; border-radius: 999px; background: #fff;
  color: #123F6D; font-size: 16px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-hero__title {
  /* 下余白でキャッチコピー群（バッジ＋見出し）と補足群（説明＋3項目）を離す。
     .ki-hero__text は align-self:center なので、ここを広げると
     上のかたまりが上へ・下のかたまりが下へ均等に動く */
  margin: 0 0 36px;
  color: #123F6D; font-size: 45px; font-weight: 800; line-height: 1.45;
  letter-spacing: .01em; word-break: normal;
}
.lp-body .ki-hero__hl { color: #EF6C19; }
.lp-body .ki-hero__note {
  margin: 0 0 24px; color: #4A5568; font-size: 17px; font-weight: 500; line-height: 1.75;
  /* ★2026-08-16：右下に3カードを絶対配置したので、リード文が下へ潜り込まないよう幅を絞る。
     420px にすると1行目（実測425px）が入りきらず「製品の要求と／と」で折れる。440px にすること */
  max-width: 440px;
}

/* ---- 右下の3カード（鉄鋼／非鉄金属／プラスチック）  2026-08-16 アース支給のモック ----
   ★グリッドの列を増やさず【.ki-hero__inner に対する絶対配置】で置いている。
     理由：左のテキスト列（1fr＝約611px）にも右の写真列（31%）にも収まらず、
     列を触ると見出し45pxが折り返す／写真の大きさが変わる、という副作用が出るため。
     .ki-hero__inner は position:relative、写真は z-index:1 なので z-index:3 で前に出す。
   ★色帯だけ講座の3分類で変え、見出しの文字色は3枚とも紺で揃えている
     （モックはプラスチックだけ青字だが、1枚だけ色が違うと不揃いに見えるため）。 */
.lp-body .ki-hero__cards {
  position: absolute; right: 0; bottom: 30px; z-index: 3;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  /* ★幅は 478px より広げないこと（実測 2026-08-16）。
     リード文は左端20px＋max-width440px＝460pxまで伸びる。
     560px にするとカードが 403px から始まってリード文に重なる。
     478px なら 482px から始まり、22px のすき間が空く。
     カード1枚は150pxで、いちばん長い「プラスチック」（17px＝102px）も1行に収まる。 */
  width: min(478px, 52%);
  margin: 0; padding: 0;
  list-style: none;
}
.lp-body .ki-hero__card {
  margin: 0; padding: 14px 12px 16px;
  background: #FFFFFF; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(23, 50, 77, .10);
  text-align: center;
}
.lp-body .ki-hero__card::before,
.lp-body .ki-hero__card::after { content: none; display: none; }
.lp-body .ki-hero__card-bar {
  display: block; width: 40px; height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #7A8794;   /* 既定＝グレー */
}
/* ★2026-08-26 kiso：3カードは【全6章を2章ずつ束ねた3領域】。
   単位・規格／数学・力学／形状・道具 の順で、カリキュラムの並びと一致させている。
   色は 単位・規格＝アクセントの青／数学・力学＝橙（見出しの強調語と同じ）／
   形状・道具＝濃い青。3本並べたときに役割が見分けられる配色にしている。
   ★旧 --material / --mold / --design（jusi の材料・金型・部品設計）は未使用。
     旧 --nonferrous / --plastic（zairyou 由来）も未使用。仕上げでまとめて削除する。 */
.lp-body .ki-hero__card--unit  .ki-hero__card-bar { background: var(--lp-accent); }
.lp-body .ki-hero__card--math  .ki-hero__card-bar { background: #EF6C19; }
.lp-body .ki-hero__card--shape .ki-hero__card-bar { background: #2E6FB0; }
.lp-body .ki-hero__card-ttl {
  margin: 0 0 4px;
  color: #123F6D; font-size: 17px; font-weight: 800; line-height: 1.4;
}
.lp-body .ki-hero__card-sub {
  margin: 0;
  color: #5B6B7F; font-size: 13px; font-weight: 600; line-height: 1.5;
}

/* ---- 電動ドライバーから3カードへの引き出し線（2026-08-16 アース指示） ----
   ★線は【画像に接続しない】。接続すると、その1点が指し示す部品と受け取られてしまい、
     実際の部位とずれて見えるため（アース指摘）。シルエットの下端から14px以上離して描き始める。
   ★viewBox は .ki-hero__inner の実寸 960×470 と1:1。preserveAspectRatio="none" だが
     デスクトップでは等倍なので歪まない。線の太さは vector-effect="non-scaling-stroke" で一定。
   ★z-index は 2。写真(1)より前、カード(3)より後ろ。
   ★カードが通常フローへ回る 960px 以下では線の意味が無くなるので消す。
   ★座標の求め方：canvas で fv.png の各列の「最下端の不透明ピクセル」を取り、
     表示座標へ変換してシルエット下端を出す。実測値（inner 960×470・カード上端349）は
       x620→238 ／ 650→241 ／ 720→248 ／ 760→254 ／ 800→248 ／ 840→249 ／ 870→282 ／ 900→311
     写真を差し替えたら必ず測り直すこと。 */
.lp-body .ki-hero__leads {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  color: #17324D;
  pointer-events: none;
}
/* ---- 左：講座の価値3点 ----
   ★yoso は CSSマスク（::before に mask-image ＋ background-color で着色）だが、
     mechatro 専用に描き起こした3点（scope / lifter-conveyor / communication）は
     線画で、白抜きの部分を持つ。マスクにすると
     「アルファがあるところ＝塗る」ため、白い部分まで塗り潰されて
     ベタ塗りの図形になってしまう。そのため <img> で置いている。
   ★色はSVG側の style="color:var(--icon-color,#17324D)" が決める。
     custom property は img 越しには継承されないので #17324D（紺）で出る。
     色を変えたいときはSVGファイル側を直すこと。CSSからは変えられない。
   ★文字16px・アイコン26px・間隔14pxのままだと、3項目の合計が575pxとなり
     枠565pxを10pxはみ出した（2026-08-06 実測）。
     文字15px・アイコン22px・間隔10pxに詰めて合計521px（44px余る）にしている。 */
.lp-body .ki-hero__points {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 10px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .ki-hero__point {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: #17233f; font-size: 15px; font-weight: 700; line-height: 1.45;
  white-space: nowrap;
}
.lp-body .ki-hero__point:not(:last-child) {
  padding-right: 10px; border-right: 1px solid #D3D6DA;
}
.lp-body .ki-hero__icon {
  flex: 0 0 auto; width: 22px; height: 22px; display: block;
}

/* ---- 右：写真スロット ---- */
.lp-body .ki-hero__photo {
  position: relative;
  align-self: stretch;
  /* ★hidden にしないこと。画像を translateX(-180px) で列の外（左）へ
     はみ出させているので、hidden だと左側が切り落とされる（2026-08-09） */
  overflow: visible;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ★右へのはみ出し量を -82px → -240px に拡大（motor 2026-08-09）。
     写真の列は 31%（=285px）が上限。これ以上広げると左のテキスト列が
     611px を切り、見出し45pxの1行目「モーターの種類・特性から、」が
     途中で折り返してしまう（実測：40%で折り返し発生）。
     そこで列幅は31%のまま、コンテナ外（右の余白）へはみ出させて
     画像の表示サイズだけを 367px → 525px に広げている。
     clamp なので 100vw が 960px 以下になると 0 に戻り、はみ出さない。 */
  margin: 0 clamp(-240px, calc((960px - 100vw) / 2), 0px) 0 0;
}
/* ヒーロー画像が未アップロードのあいだの仮枠（2026-08-12 zairyou）。
   <img> を入れた瞬間に :empty が外れて自動的に消えるので、枠の消し忘れが起きない。
   ★実体クラスで仮枠を作らないこと（手で消す必要が出る／手順書 §12-6） */
.lp-body .ki-hero__photo:empty {
  min-width: 240px;
  min-height: 360px;
  border: 2px dashed #F08300;
  border-radius: 10px;
  background: rgba(255, 248, 240, .6);
  align-items: center;
  justify-content: center;
  /* ★2026-08-25 jusi 追記：仮枠のときだけ、上の負マージン（右へ240pxはみ出す指定）を
     打ち消して列幅に収める。実測 2026-08-25（PC 2048px）:
       右カラム 285.2px ／ 仮枠は 525px になり、右へ240pxはみ出していた。
       さらに align-self:stretch で高さ470pxいっぱいに伸び、
       bottom:30px に絶対配置した .ki-hero__cards（上端349px）と重なっていた。
     → 列幅に収め、上寄せ＋高さ300pxにして 20+300=320 < 349 でカードと衝突しない。
     ★画像を入れれば :empty が外れ、この打ち消しも自動的に無効になる
       （＝はみ出しレイアウトは本番の見た目のまま。手で戻す必要はない）。 */
  align-self: start;
  width: 100%;
  min-width: 0;
  max-width: 285px;
  min-height: 300px;
  margin: 20px 0 0 0;
}
.lp-body .ki-hero__photo:empty::before {
  content: "ヒーロー画像 準備中";
  color: #B45900;
  font-size: 13px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  /* SPは1カラムなので、上で入れた列幅の上限（285px）を解除して横いっぱいに広げる */
  .lp-body .ki-hero__photo:empty { min-height: 200px; max-width: none; margin-top: 0; }
}
/* ★★高さの指定に % を使わないこと。
   グリッドの行の高さが確定しないため height:100% が解決できず、
   画像本来の比率で高さが決まって枠からはみ出す（yoso で実際に起きた）。
   そのため max-height を px で指定している。
   ヒーローの min-height 500px の90%＝450px。 */
.lp-body .ki-hero__photo img {
  width: auto; max-width: 100%;
  height: auto; max-height: 450px;
  object-fit: contain;
  /* ★左へ大きく寄せて、キャッチコピーの【背面】に潜り込ませる（アース指示 2026-08-09）。
     header_motor.png は背景透過なので、重なってもコピーは読める。
     -180px の根拠（実測 2026-08-09・viewport 2048px）
       画像の中身は左に9%（525px表示で48px）の余白を持つため、
       -48px までは「余白が詰まるだけ」で見た目は動かない。
       -120px … ステッピングモーターが見出し1行目の末尾あたりに来る（まだ空く）
       -180px … 見出し3行目「具体的な選定事例まで」の右横に並ぶ。採用
     ★これ以上寄せると、3項目（全9章／4つの事例／初心者向け）の右端に
       ステッピングモーターが重なる（3項目の右端は 988px、画像の中身左端は 1059px）。 */
  transform: translateX(-180px);
}

/* ★★★2026-08-25 jusi：ヒーロー画像の【縁をグラデーションで溶かす】（アース指示）
   ─────────────────────────────────────────────────────────────────────────
   jusi の fv.png の実測（2026-08-25）:
     ・1254×1254 の【正方形】（zairyou の fv.png は 1594×987 の横長）
     ・透明ピクセル 0%（＝不透明）
     ・緑の角丸フレーム付き
   地色は #EFF8F4〜#F8FBFA で、ヒーローの背景（白→#F5F9FE→#EAF1FD）とは
   RGB差2〜6しかないので【地は溶ける】。だが **フレームの線と、画像内側の
   角丸パネルの縁が残る** ため、四角い板が貼ってあるように見えてしまう。
   さらに上の translateX(-180px) で見出しの背面に潜り込むので、
   枠線が「その形を金型で成り立たせる」を横切っていた（アース指摘）。

   → 画像自体に mask をかけて四辺をフェードさせ、背景に溶かす。
     こうすると【見出しに重なる左側は透明になって消える】ので、
     重なりの問題も同時に解消する（テキストを避けるのではなく、絵を溶かす）。

   ★フェード幅の決め方（実測で追い込んだ 2026-08-25）:
     15%/85% … フレームの線が薄く残り、角丸の縁が見える → NG
     24%/76% … 縁が消える。採用ライン
     `object-fit:cover` で先に枠を切り落とす案も試したが、
     **切り口が直線になって余計に目立った**ので不採用。
   ★`mask-composite:intersect` は「2枚のマスクの重なりだけを残す」指定。
     これが無いと2枚が足し算（union）になり、四辺のうち2辺しかフェードしない。
   ★`-webkit-mask-composite` を【一緒に書かないこと】。Chromeにも解釈されて
     画像が丸ごと消える（2026-08-25 実測）。古いSafari用は @supports で分ける。
   ★画像を差し替えるときは、まず透明度と縦横比を実測すること。
     透過した横長画像に戻すなら、このブロックごと削除して元の指定に戻せばよい。 */
.lp-body #kiso .ki-hero__photo img {
  max-height: 450px;
  transform: translateX(-150px);
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 25%, #000 75%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 23%, #000 77%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 25%, #000 75%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 23%, #000 77%, transparent 100%);
  mask-composite: intersect;
}
/* 古いSafari（標準の mask-composite を持たない）用のフォールバック。
   Chrome では @supports が真にならないのでこの指定は読まれない＝事故らない */
@supports not (mask-composite: intersect) {
  .lp-body #kiso .ki-hero__photo img { -webkit-mask-composite: source-in; }
}
/* ★保険：万一マスクの効かない環境で絵が見出しに重なっても読めるように、
   白いにじみを敷く。背景がほぼ白なので、絵に重なった所でだけ効く。 */
.lp-body .ki-hero__title,
.lp-body .ki-hero__note {
  text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 32px rgba(255, 255, 255, .9);
}
@media screen and (max-width: 767px) {
  /* SPは1カラム。左へ寄せる必要がないので打ち消し、絵も小さくする */
  .lp-body #kiso .ki-hero__photo img { max-height: 260px; transform: none; }
}

/* 重なりの前後関係。テキストが必ず画像の上に来るようにする。
   ★両方とも同じ .ki-hero__inner（z-index:1）の子で position が付いていないと
     「後ろに書いた figure が上に乗る」ため、指定しないと画像がコピーを隠す。 */
.lp-body .ki-hero__text { position: relative; z-index: 2; }
/* 写真が入るまでの仮枠。<img> に差し替えたらこの要素ごと削除する */
.lp-body .ki-hero__photo .ki-hero__ph {
  display: flex; align-items: center; justify-content: center;
  /* ★ width:100% が要る。親が flex なので、中身が空だと
     パディング分（46px）まで潰れる（motor で実測 2026-08-09） */
  width: 100%;
  height: 100%; min-height: 300px; padding: 20px; box-sizing: border-box;
  border: 3px dashed #F08300; border-radius: 12px;
  /* 半透明にして、後ろの背景写真の出方を今のうちに確認できるようにしている */
  background: rgba(255, 248, 240, .55);
  color: #B45900; font-size: 14px; font-weight: 700; line-height: 1.7; text-align: center;
}

@media screen and (max-width: 960px) {
  .lp-body .ki-hero { --ki-pad: 18px; }
  .lp-body .ki-hero__inner { grid-template-columns: minmax(0, 1fr) 31%; gap: 20px; }
  .lp-body .ki-hero__text { padding: 34px 0 30px; }
  .lp-body .ki-hero__title { font-size: 34px; }
  .lp-body .ki-hero__note { font-size: 15px; margin-bottom: 20px; }
  /* ★絶対配置をやめて、リード文の下へ通常のフローで置く。
     960px以下は見出しも写真も縮むので、右下に重ねると写真とカードが競合する */
  .lp-body .ki-hero__cards {
    position: static; width: auto; margin-top: 4px;
    grid-column: 1 / -1;
  }
  .lp-body .ki-hero__note { max-width: none; }
  /* カードが通常フローへ回るので、引き出し線は意味を失う */
  .lp-body .ki-hero__leads { display: none; }
  .lp-body .ki-hero__points { gap: 0 8px; }
  .lp-body .ki-hero__point { font-size: 13px; }
  .lp-body .ki-hero__point:not(:last-child) { padding-right: 8px; }
  .lp-body .ki-hero__icon { width: 20px; height: 20px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-hero { --ki-pad: 16px; }
  .lp-body .ki-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-body .ki-hero__text { align-self: auto; padding: 24px 0 0; }
  .lp-body .ki-hero__badge { margin-bottom: 14px; padding: 6px 15px; font-size: 13px; }
  /* yoso は clamp(23px,6.6vw,28px) だが、1行目が17文字と長いため
     375px幅で3行になった（実測：21px で 357px ＞ 枠327px）。
     18.6px なら2行に収まるので、下限と係数を落としている（2026-08-06 実測） */
  .lp-body .ki-hero__title { font-size: clamp(18px, 5.2vw, 24px); margin-bottom: 16px; }
  .lp-body .ki-hero__note { font-size: 14px; margin-bottom: 18px; }
  .lp-body .ki-hero__cards { gap: 8px; }
  .lp-body .ki-hero__card { padding: 10px 6px 12px; border-radius: 8px; }
  .lp-body .ki-hero__card-bar { width: 28px; height: 3px; margin-bottom: 7px; }
  .lp-body .ki-hero__card-ttl { font-size: 14px; }
  .lp-body .ki-hero__card-sub { font-size: 11px; }
  /* ★ flex-wrap の指定が要る。既定の nowrap のままだと3項目が1行に押し込まれ、
     375px幅で8pxはみ出した（実測 scrollWidth 335 ＞ clientWidth 327）。
     直下の gap の行方向9px も、折り返す前提の値なので nowrap では効かない。
     ※移植元の lp_yoso.css も nowrap のままなので、yoso 側にも同じ問題がある */
  .lp-body .ki-hero__points { flex-wrap: wrap; gap: 9px 16px; }
  .lp-body .ki-hero__point { font-size: 13px; gap: 7px; }
  .lp-body .ki-hero__icon { width: 22px; height: 22px; }
  /* SPでは3項目が折り返すため、行末に縦罫が残って不自然になる。区切り線は消す */
  .lp-body .ki-hero__point:not(:last-child) { padding-right: 0; border-right: 0; }
  .lp-body .ki-hero__photo { margin: 0 calc(-1 * var(--ki-pad)); overflow: visible; text-align: center; }
  .lp-body .ki-hero__photo img {
    width: auto; height: auto; max-width: 100%; max-height: 50vh; margin: 0 auto;
    object-fit: contain; object-position: center;
    /* SPは1カラムで画像が中央に来るため、PC用の左寄せは打ち消す */
    transform: none;
  }
  /* SPは画像が下段に回るので、グリッドを右半分に出す意味がない。
     画面全体に薄く敷いて、下端へ向かって消す */
  .lp-body .ki-hero::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
  }
  .lp-body .ki-hero__photo .ki-hero__ph { min-height: 200px; }
}

/* ==========================================================================
   ※ かつてここに「第9章（演習）の暫定スタイル」があった（2026-08-09〜08-10）
   --------------------------------------------------------------------------
   第9章だけアコーディオンに入れず旧デザインのまま表示していた期間、
   style_motor.css から #kiso .box_curriculum 系の約50ルールを移植していた。
   （style_motor.css は lp_template.php では読み込まれないため）

   2026-08-10 に第9章をアコーディオンへ統一し、旧マークアップを削除したため、
   移植したルールも参照されなくなったので全て削除した（約5.3KB）。

   ★もし第9章を旧デザインに戻す必要が生じたら、
     style_motor.css（/wp-content/themes/fantomsemi/style_motor.css）から
     #kiso .box_curriculum を含むルールを再度移植すること。
   ========================================================================== */


/* ==========================================================================
   kiso 固有ブロック（2026-08-26 追加）
   他14講座と違う3点への対応をここにまとめる。移植元へ持ち帰らないこと。
     A. 実質0円クーポンの説明バンド `.ki-coupon`（ヒーロー直下・アース判断）
     B. 申込ページの料金プランを【2枚】にする（分割払いの商品が存在しない）
     C. 割引が無いので「定価」の打ち消し線・OFF表示を出さない
   ========================================================================== */

/* ---- A. .ki-coupon ── 実質0円クーポンの説明バンド --------------------------
   置き場所：`.ki-hero` の直後、`.lp-mv` より前。
   旧LPの `div.coupon3980` と `div.flow` 内にあった説明を1か所にまとめたもの。
   ★本文の書き方:
     <section class="ki-coupon">
       <div class="ki-coupon__inner">
         <p class="ki-coupon__badge">ご購入前に必ずご確認ください</p>
         <h2 class="ki-coupon__title">この講座は<em>実質0円</em>で受けられます</h2>
         <ul class="ki-coupon__list">
           <li>…（購入者用メルマガで4,378円分のクーポンを差し上げます）</li>
           <li>…（他の有料サービスには本講座が特典として付属しています）</li>
         </ul>
       </div>
     </section>
   ★手順書 §5-2 の暫定ブロック（`#kiso > div` の一括幅指定）に巻き込まれないよう、
     全幅で見せたい場合は `> .ki-coupon` を除外リストに足すこと。 */
.lp-body .ki-coupon {
  --ki-sec-bg: #FFF7E8;              /* 橙系。前後の青系セクションと明確に切り替わる */
  background: var(--ki-sec-bg);
  border-top: 1px solid #F3DCB4;
  border-bottom: 1px solid #F3DCB4;
  padding: 34px 20px 32px;
}
.lp-body .ki-coupon__inner {
  width: min(960px, 100%);
  margin-inline: auto;
}
.lp-body .ki-coupon__badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #EF6C19;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.lp-body .ki-coupon__title {
  margin: 0 0 16px;
  color: #17324D;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.5;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.lp-body .ki-coupon__title em {
  font-style: normal;
  color: #C8500E;
}
.lp-body .ki-coupon__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.lp-body .ki-coupon__list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.85;
  color: #333;
}
/* チェックはCSSで描く（手順書 §12「幾何学的な形は画像にしない」） */
.lp-body .ki-coupon__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 6px;
  height: 12px;
  border-right: 2px solid #EF6C19;
  border-bottom: 2px solid #EF6C19;
  transform: rotate(45deg);
}
.lp-body .ki-coupon__note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: #6B6357;
}
@media screen and (max-width: 767px) {
  .lp-body .ki-coupon { padding: 26px 16px 24px; }
  .lp-body .ki-coupon__title { font-size: 21px; }
  .lp-body .ki-coupon__list li { font-size: 14px; padding-left: 24px; }
}

/* ---- B. 申込ページの料金プランを2枚にする ----------------------------------
   `.opp-wrap` は flex なのでカードを1枚減らすだけで2枚になるが、
   max-width 900px のままだと1枚が約440pxになって間延びする。
   ★カードは `.opp-card--a`（個人・一括）と `.opp-card--c`（法人・人数指定）を使う。
     `--b`（6回分割）は本文に置かない。 */
#kiso-order .opp-wrap { max-width: 700px; }
@media screen and (max-width: 767px) {
  #kiso-order .opp-wrap { max-width: 100%; }
}

/* ---- C. 割引が無いので「定価」行と OFF 表示を出さない ----------------------
   定価＝販売価格＝4,378円（税込）なので、打ち消し線つきの定価を出すと
   同じ金額が2回並ぶ。`.opp-meta`（定価行）は本文に置かず、CSSでも保険で消す。
   ★将来キャンペーンを始めるときは、この2ルールを消して本文に定価行を戻せば
     他LPと同じ見た目に戻る。 */
#kiso-order .opp-meta { display: none; }
#kiso-order .opp-label { display: none; }

/* ---- D. キャンペーン帯（cp_bar）を出さない ---------------------------------
   2026-08-26 実測で判明したこと:
   **`[check_discount]` はサイト全体のキャンペーン期間フラグで、
     その商品が実際に値引きされているかは見ていない。**
   kiso は 定価＝販売価格＝4,378円（税込）なので、放っておくと
     ・cp_bar「期間限定 受講料20％OFF 8/31まで 残り5日」
     ・#price「期間限定｜定価より20％OFF」＋「定価 3,980円（税込4,378円）」
     ・追従カート「期間限定20％OFF」
   が出て、**同じ金額が定価と販売価格に2回並ぶ**という破綻が起きた。

   → 本文側の `[check_discount]…[/check_discount]` 5ブロックは削除済み。
     ただし **cp_bar だけは `lp_template.php` が出力していて本文に無い**ため、
     ここで隠す。`.cp_bar` 単体(0,1,0)より強い (1,2,0) にしてある。
   ★将来 kiso 単体でキャンペーンを打つときは、このルールを消し、
     本文に `[check_discount]` ブロックを戻すこと。 */
.lp-body #kiso > .cp_bar { display: none; }

/* ★★2026-10-08 本番移行中に発覚：**申込ページでキャンペーン帯が出ていた。**
   上のルールはラッパーが `#kiso` のLP本体にしか効かない。
   申込ページのラッパーは **`#kiso-order`**、お問い合わせページは `.lp-form` なので
   素通りして「期間限定 受講料20％OFF」が表示されていた（テスト・本番とも）。
   → `lp_kiso.css` は kiso の3ページにしか読み込まれないので、
     **ページを限定せず `.cp_bar` 全体を隠す**のが正しい。
   ★★もう1つ、**SPでしか出ない `.cp_flag`** がある。
     `hp-pc_none` が付いていてPCでは非表示なので、**PCの実機確認では一生見つからない。**
     `<main>` 直下にあり `.cp_bar` の中でもないので、上のルールでも隠れない。
     375pxで「期間限定｜20％OFF（残り◯日）」が出ていた（LP・申込ページとも）。
   ★`.pv2-discount`（3〜5名 10％OFF …）は**法人の人数割引で正しい表示**。隠さないこと。
   ★将来 kiso 単体でキャンペーンを打つときは、ここと上の1行を消す。 */
.lp-body .cp_bar,
.lp-body .cp_flag { display: none; }


/* ==========================================================================
   F. ヒーロー画像の位置とマスク（kiso-hero.webp 用）  2026-09-12 アース指示
   --------------------------------------------------------------------------
   複製元（jusi）の指定は2つとも **jusi の fv.png 専用**で、kiso の絵には合わなかった。

   1) `transform: translateX(-150px)` … 絵を左へ寄せて見出しの背面へ潜り込ませる指定。
      kiso の絵は【横長の黒板＋右端に講師】なので、左へ寄せると黒板が見出しに当たり、
      下端が右下の3カード（.ki-hero__cards）にも 456×61 で重なっていた。
   2) 四辺フェードのマスク … 横 25〜75%・縦 23〜77% しか不透明にならないため、
      **黒板の木枠と講師がごっそり溶けて「見づらい」状態**になっていた
      （jusi の絵は正方形＋不要なフレーム付きで、溶かすことが目的だった）。

   → kiso は **右上へ寄せて、マスクは外す**。
   　 マスクを外す判断はアース（2026-09-12）:「グラデーションを入れると見えなくなるので、
   　 そのまま表示するのが良い」。**透過画像なので、そもそもフェードは要らない。**

   位置は **アースがスクリーンショットに描いた枠**に合わせた（2026-09-12）。
   枠を inner（960px）基準に読み取ると 左544px / 右1070px / 上42px。

   実測（PC 1905px・inner 960px at x473〜1433・hero top 213）:
   | | 変更前 | 変更後 |
   |---|---|---|
   | 画像の位置 | x 977〜1503 ／ y 273〜623 | **x 1017〜1543 ／ y 255〜605** |
   | inner基準 | — | **左544 ／ 右1070 ／ 上42**（＝アースの枠と一致） |
   | 見出しの実際の文字との距離 | 重なっていた | **25px のすき間**（下記） |
   | 3カードとの重なり | 456×61 | 枠は 416×43 重なるが、**絵の中身は y551 で終わるのでカード(y562)に当たらない** |
   | 上の切れ | 0 | なし |

   ★**見出しとのすき間は 1000〜1905px のどの幅でも 25px で一定**（実測）。
   　 レイアウトが比例して縮むため。901px では 99px に開く。横スクロールもどの幅でも無し。
   　 `.ki-hero__title` の【要素の幅】は611pxあるが、実際の文字はそこまで届かない
   　 （最長行「設計に必要な工学知識が」＝500px）。**要素の矩形ではなく文字の右端で見ること。**

   ★SP（767px以下）は別指定で `transform:none` / `max-height:260px` なので影響しない。
   ★**画像を差し替えても、このルールはそのままでよい。**
   ========================================================================== */
.lp-body #kiso .ki-hero__photo img {
  transform: translate(-110px, -18px);
  -webkit-mask-image: none;
  mask-image: none;
}


/* ==========================================================================
   G. .ki-order を【機械力学入門講座（振動編）と同じSTEPパネル】に差し替え
      2026-09-26 アース指示
   --------------------------------------------------------------------------
   変更前：01〜06 の丸を3列×2行に並べ、行のあいだを折り返し線でつなぐ形（zairyou 由来）。
   変更後：**STEPパネルを横1列に並べ、あいだを矢印でつなぐ**形。
           パネルの中に「第◯章」のピル＋章タイトル＋説明＋イラストが入る。

   移植元は `lp_vibration.css` の `.vb-order` 一式。
   ★**lp_vibration.css には世代の違う `.vb-order` が重なって入っている**（12セレクタが重複）。
     丸ごとコピーすると古い定義を持ち込むので、実ページの CSSOM から
     「実際にマッチするルール」を**ソース順のまま**取り出して移植した。
     重複していたものは後勝ちの結果を手でマージしてある
     （`__steps` / `__arw2` / `__cell-ttl` / `__cell-txt` など）。

   ★kiso は **3パネル（各2章）**にした（アース判断 2026-09-26）。
     単位・規格 ／ 数学・力学 ／ 形状・道具 ＝ **ヒーローの3カードと同じ区切り**。
     そのため `__steps` の列は 7列（4パネル）ではなく **5列（3パネル＋矢印2本）**。

   ★色だけ kiso 用に変えた:
       セクション地色 `#F7FAFA` → **`#F5F9FF`**（従来の .ki-order と同じ薄青）
       方眼の線 `rgba(36,90,45,.05)` → **`rgba(70,140,255,.06)`**
     `--key` パネルの橙系（#FFF9F4 / #F2D6BC / #E8CDB4）はそのまま。kiso でも橙が差し色。

   ★旧レイアウト（`__flow` / `__step` / `__circle` / `__num` / `__ico` / `__txt` / `__turn`）は
     **本文から要素ごと無くなる**ので打ち消し不要。CSSは上のほうに残っているので、
     未使用CSSの削除のときにまとめて消すこと。
   ========================================================================== */
.lp-body .ki-order {
  position: relative;
  --ki-sec-bg: #F5F9FF;   /* .ki-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 46px;
  background: #F5F9FF;
  overflow: hidden;
  box-sizing: border-box;
}
.lp-body .ki-order::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(70, 140, 255, .06) 0, rgba(70, 140, 255, .06) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(70, 140, 255, .06) 0, rgba(70, 140, 255, .06) 1px, transparent 1px, transparent 26px);
  -webkit-mask-image: radial-gradient(105% 82%, transparent 0%, transparent 44%, #000 80%);
  mask-image: radial-gradient(105% 82%, transparent 0%, transparent 44%, #000 80%);
  pointer-events: none;
}
.lp-body .ki-order__inner {
  position: relative;
  z-index: 1;
  width: min(1000px, 100%);
  margin: 0 auto;
}
.lp-body .ki-order__title {
  margin: 0 0 18px;
  color: #123F6D;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
.lp-body .ki-order__title::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .ki-order__hl { color: #EF6C19; }
.lp-body .ki-order__lead {
  margin: 0 0 34px;
  color: #4A5568;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
  text-align: center;
}

/* ---- STEPパネルの並び ----
   ★列は【1fr 矢印 1fr 矢印 1fr】の5列。パネルを増減するならここを直す。
     振動編は4パネルなので7列（1fr auto 1fr auto 1fr auto 1fr）。 */
.lp-body .ki-order__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin: 30px 0 0;
}
/* パネルのあいだの矢印。軸＋三角を clip-path 1つで描く（画像は使わない） */
.lp-body .ki-order__arw2 {
  align-self: center;
  width: 30px;
  height: 26px;
  margin: 0 6px;
  background: var(--lp-accent);
  clip-path: polygon(0 30%, 58% 30%, 58% 0, 100% 50%, 58% 100%, 58% 70%, 0 70%);
}
.lp-body .ki-order__panel {
  display: flex;
  flex-direction: column;
  padding: 18px 16px 20px;
  background: #FFFFFF;
  border: 1px solid var(--lp-accent-line);
  border-radius: 12px;
  box-sizing: border-box;
}
/* 1枚だけ強調するときに付ける。kiso は「数学・力学」のパネルに付けている */
.lp-body .ki-order__panel--key {
  background: #FFF9F4;
  border-color: #F2D6BC;
}
.lp-body .ki-order__step-no {
  margin: 0 0 2px;
  color: var(--lp-accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: center;
}
.lp-body .ki-order__step-ttl {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--lp-accent-line);
  color: #123F6D;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}
.lp-body .ki-order__panel--key .ki-order__step-ttl { border-bottom-color: #F2D6BC; }
.lp-body .ki-order__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-body .ki-order__cell {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 8px 6px;
  min-width: 0;
  box-sizing: border-box;
}
/* 旧CSSの li 装飾（・や番号）が乗らないように打ち消す */
.lp-body .ki-order__cell::before,
.lp-body .ki-order__cell::after { content: none; display: none; }
.lp-body .ki-order__cell-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
}
.lp-body .ki-order__panel--key .ki-order__cell-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
}
/* 「第◯章」はピル。数字を大きく出す旧デザインからの変更 */
.lp-body .ki-order__cell-no {
  flex: 0 0 auto;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--lp-accent);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.lp-body .ki-order__cell-ttl {
  display: block;
  color: #123F6D;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}
.lp-body .ki-order__cell-txt {
  color: #2D344B;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
/* 同じパネル内の2章目は破線で区切る */
.lp-body .ki-order__panel:not(.ki-order__panel--key) .ki-order__cell + .ki-order__cell {
  border-top: 1px dashed var(--lp-accent-line);
  padding-top: 14px;
}
.lp-body .ki-order__panel--key .ki-order__items { grid-template-columns: minmax(0, 1fr); }
.lp-body .ki-order__panel--key .ki-order__cell {
  display: block;
  padding: 12px 6px;
  border-top: 1px dashed #E8CDB4;
  border-left: 0;
}
.lp-body .ki-order__panel--key .ki-order__cell:first-child { border-top: 0; }

/* ---- 章のイラスト ----
   ★2026-09-26 アース指摘「説明文と画像の区分けがつかない」への対応。
     図の地色が白／パネルの地色も白なので、図がどこからどこまでなのかが
     目で分からなかった。図だけを薄い地色の枠で囲って「ここから図」と示す。
   ★地色はパネルごとに変える。STEP1・3（白パネル）は淡い青、
     STEP2（`--accent`・クリーム地）は一段濃いクリーム。
     どちらも「パネルの地色より少しだけ濃い」関係にしてある。 */
.lp-body .ki-order__ico2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 150px;
  margin-top: 12px;
  padding: 12px 10px;
  background: var(--lp-accent-pale);
  border: 1px solid var(--lp-accent-line);
  border-radius: 10px;
}
.lp-body .ki-order__panel--key .ki-order__ico2 {
  background: #FDF1E3;
  border-color: #F0DAC2;
}
/* セレクタに #kiso が要る理由は .ki-need__fig img のコメント参照 */
.lp-body #kiso .ki-order__ico2 img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 150px;
  margin: 0 auto;
}
.lp-body .ki-order__panel--key .ki-order__ico2 { height: auto; min-height: 150px; margin-top: 12px; }
.lp-body #kiso .ki-order__panel--key .ki-order__ico2 img { max-height: 150px; }
/* イラストが届くまでの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .ki-order__ico2:empty {
  border: 1px dashed #F08300;
  border-radius: 6px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-order__ico2:empty::before {
  content: "図版";
  color: #B45900;
  font-size: 11px;
  font-weight: 700;
}

/* ---- 結論と次への橋渡し ---- */
.lp-body .ki-order__concl {
  margin: 34px 0 0;
  padding: 20px 26px;
  background: #FFFFFF;
  border: 2px solid #EF6C19;
  border-radius: 14px;
  box-sizing: border-box;
}
.lp-body .ki-order__concl-lead {
  margin: 0;
  color: #123F6D;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
}
.lp-body .ki-order__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-order__note {
  margin: 20px 0 0;
  color: #4A5568;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
}
.lp-body .ki-order__arrow-down {
  width: 24px;
  height: 24px;
  margin: 14px auto 0;
  border-right: 5px solid var(--lp-accent);
  border-bottom: 5px solid var(--lp-accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

@media screen and (max-width: 1040px) {
  .lp-body .ki-order__panel { padding: 16px 12px 18px; }
  .lp-body .ki-order__cell-ttl { font-size: 14px; }
  .lp-body .ki-order__cell-txt { font-size: 12px; }
  .lp-body .ki-order__ico2 { min-height: 120px; }
  .lp-body #kiso .ki-order__ico2 img { max-height: 120px; }
  .lp-body .ki-order__arw2 { width: 22px; height: 20px; margin: 0 6px; }
  .lp-body .ki-order__concl-lead { font-size: 18px; }
}

@media screen and (max-width: 900px) {
  /* 横1列は入らないので縦積みに。矢印は90度回して下向きにする */
  .lp-body .ki-order__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .ki-order__arw2 { transform: rotate(90deg); margin: 10px auto; }
  .lp-body .ki-order__ico2 { min-height: 110px; }
  .lp-body #kiso .ki-order__ico2 img { max-height: 110px; }
  .lp-body .ki-order__title { font-size: 25px; }
  .lp-body .ki-order__lead { font-size: 15px; margin-bottom: 26px; }
  .lp-body .ki-order__concl-lead { font-size: 18px; }
  .lp-body .ki-order__cell-no { padding: 4px 8px; font-size: 12px; }
  .lp-body .ki-order__cell-txt { font-size: 12px; }
}

@media screen and (max-width: 767px) {
  .lp-body .ki-order { padding: 40px 16px 34px; }
  .lp-body .ki-order__title { font-size: 20px; line-height: 1.55; }
  .lp-body .ki-order__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .ki-order__step-no { font-size: 12px; }
  .lp-body .ki-order__step-ttl { font-size: 16px; margin-bottom: 12px; padding-bottom: 10px; }
  .lp-body .ki-order__cell-no { padding: 4px 9px; font-size: 12px; }
  .lp-body .ki-order__cell-ttl { font-size: 15px; }
  .lp-body .ki-order__cell-txt { font-size: 13px; }
  .lp-body .ki-order__arw2 { margin: 10px auto; }
  .lp-body .ki-order__ico2 { min-height: 150px; }
  .lp-body #kiso .ki-order__ico2 img { max-height: 150px; }
  .lp-body .ki-order__panel--key .ki-order__ico2 { height: auto; min-height: 150px; }
  .lp-body #kiso .ki-order__panel--key .ki-order__ico2 img { max-height: 150px; }
  .lp-body .ki-order__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .ki-order__concl-lead { font-size: 16px; }
  .lp-body .ki-order__note { font-size: 13px; text-align: left; }
}


/* ==========================================================================
   H. .ki-axis を【流体力学入門講座（ryuriki）と同じレイアウト】に差し替え
      2026-09-26 アース指示
   --------------------------------------------------------------------------
   変更前：受講前｜判断の流れ｜受講後 の【3カラム横並び】（zairyou/jusi 由来）。
           中央の流れが縦に6つ並ぶため、セクションが縦に伸びていた。
   変更後：**上段に受講前／受講後の2カード（あいだに橙の矢印）、
           下段に「判断の流れ」を3列×2行のヘビ順（→→↓←←）で並べる**形。

   ★移植元 `lp_ryuriki.css` の `.ry-axis` は、
     **kiso が持っていた `.ki-axis`（＝第1世代）に第2世代を重ねた構造**だった
     （`__bridge` `__step` `__fig` `__steps` `__no` は kiso 側と完全に同一。
       `__grid` / `__col` を捨てて `__ba` / `__card` / `__flow-ttl` を足している）。
     そのため CSSOM から取り出した87ルールを**ソース順のまま追記**している。
     第1世代ぶんが上のほうと重複するが、**順番を崩さないことを優先した**。
     未使用CSSの削除のときに、上の `.ki-axis__grid` / `__col` ごと整理すること。

   ★色だけ kiso 用に変えた:
       背景の方眼 `rgba(36,90,45,.05)` → `rgba(70,140,255,.06)`
     受講前カードの橙（#FFF7F0 / #F3C9A6）と矢印のグラデーションはそのまま。
     受講後カードは `var(--lp-accent-pale)` / `--lp-accent-line` なので自動で青になる。

   ★イラストは **全LP共通の `images/before_eng.png`（584×772・98KB）と
     `images/after_eng.png`（584×784・148KB）**。流体LPと同じものを使う（アース指示）。
     kiso 専用の手配は不要。
   ========================================================================== */
.lp-body .ki-axis {
  position: relative;
  --ki-sec-bg: #FFFFFF;
  padding: 56px 20px 46px;
  background: #FFFFFF;
  overflow: hidden;
}
.lp-body .ki-axis::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(70, 140, 255, .06) 0, rgba(70, 140, 255, .06) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(70, 140, 255, .06) 0, rgba(70, 140, 255, .06) 1px, transparent 1px, transparent 26px);
  -webkit-mask-image: radial-gradient(100% 78%, transparent 0%, transparent 48%, #000 84%);
  mask-image: radial-gradient(100% 78%, transparent 0%, transparent 48%, #000 84%);
  pointer-events: none;
}
.lp-body .ki-axis__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .ki-axis__title {
  margin: 0 0 18px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.5; text-align: center;
}
.lp-body .ki-axis__title::before {
  content: ""; display: block; width: 52px; height: 4px;
  margin: 0 auto 20px; border-radius: 999px; background: var(--lp-accent);
}
.lp-body .ki-axis__hl { color: #EF6C19; }
.lp-body .ki-axis__lead {
  margin: 0 0 30px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.9; text-align: center;
}

/* ---- 受講前／受講後の2カード ---- */
.lp-body .ki-axis__ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  align-items: stretch;
  gap: 0 8px;
  margin: 30px 0 0;
}
.lp-body .ki-axis__card { position: relative; padding: 30px 18px 22px; border-radius: 16px; box-sizing: border-box; }
.lp-body .ki-axis__card--before { background: #FFF7F0; border: 1px solid #F3C9A6; }
.lp-body .ki-axis__card--after { background: var(--lp-accent-pale); border: 1px solid var(--lp-accent-line); }
/* カードの上辺にまたがるバッジ */
.lp-body .ki-axis__card-badge {
  position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  margin: 0; padding: 7px 22px; border-radius: 999px;
  color: #FFFFFF; font-size: 15px; font-weight: 800; line-height: 1.4; white-space: nowrap;
}
.lp-body .ki-axis__card--before .ki-axis__card-badge { background: #EF6C19; }
.lp-body .ki-axis__card--after .ki-axis__card-badge { background: var(--lp-accent); }
/* セレクタに #kiso が要る理由は .ki-need__fig img のコメント参照 */
.lp-body #kiso .ki-axis__card-body {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  align-items: center; gap: 0 12px; margin-top: 10px;
}
.lp-body .ki-axis__fig { display: flex; align-items: center; justify-content: center; height: 150px; margin: 0 0 18px; }
.lp-body #kiso .ki-axis__fig img {
  display: block; flex: 0 0 auto;
  width: auto; max-width: 100%; height: auto; max-height: 100%;
}
.lp-body #kiso .ki-axis__card .ki-axis__fig { height: 160px; margin: 0; }
.lp-body .ki-axis__list { margin: 0; padding: 0; list-style: none; text-align: left; }
.lp-body .ki-axis__item {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px;
  color: #2D344B; font-size: 14px; font-weight: 700; line-height: 1.6;
}
.lp-body .ki-axis__item:last-child { margin-bottom: 0; }
/* 旧CSSの li 装飾を打ち消す */
.lp-body .ki-axis__item::before,
.lp-body .ki-axis__item::after { content: none; display: none; }
.lp-body #kiso .ki-axis__card .ki-axis__item { font-size: 13px; gap: 8px; margin-bottom: 12px; }
/* 印はCSSで描く。受講前＝橙の三角に「!」／受講後＝アクセント色の丸にチェック */
.lp-body .ki-axis__mark {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-top: 1px;
}
.lp-body .ki-axis__mark--warn { background: #E8552A; clip-path: polygon(50% 2%, 100% 98%, 0 98%); }
.lp-body .ki-axis__mark--warn::before {
  content: "!"; margin-top: 5px; color: #FFFFFF; font-size: 13px; font-weight: 900; line-height: 1;
}
.lp-body .ki-axis__mark--ok { background: var(--lp-accent); border-radius: 50%; }
.lp-body .ki-axis__mark--ok::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 11px; margin: -7px 0 0 -3px;
  border-right: 2.5px solid #FFFFFF; border-bottom: 2.5px solid #FFFFFF;
  transform: rotate(45deg);
}

/* ---- 2カードのあいだの橋渡し（文字＋橙の矢印） ----
   ★旧 `.ki-axis__bridge`（clip-path だけの矢印）を下の指定で上書きしている。
     `background:none; clip-path:none` を必ず残すこと。消すと三角が二重に出る。 */
.lp-body .ki-axis__bridge {
  align-self: center; width: 46px; height: 116px;
  clip-path: polygon(0 24%, 60% 24%, 60% 0, 100% 50%, 60% 100%, 60% 76%, 0 76%);
}
.lp-body #kiso .ki-axis__bridge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: auto;
  background: none; border: 0; clip-path: none;
}
.lp-body #kiso .ki-axis__bridge-txt {
  margin: 0; color: #E8552A;
  font-size: 14px; font-weight: 900; line-height: 1.5; text-align: center; white-space: nowrap;
}
.lp-body #kiso .ki-axis__bridge-arw {
  width: 100%; height: 42px;
  background: linear-gradient(90deg, #FCE3CE 0%, #F6B98D 100%);
  clip-path: polygon(0 26%, 66% 26%, 66% 0, 100% 50%, 66% 100%, 66% 74%, 0 74%);
}

/* ---- 「判断の流れ」の見出し（左右に罫線） ---- */
.lp-body .ki-axis__flow-ttl {
  display: flex; align-items: center; gap: 18px;
  margin: 40px 0 0;
  color: #123F6D; font-size: 21px; font-weight: 900; line-height: 1.4;
}
.lp-body .ki-axis__flow-ttl::before,
.lp-body .ki-axis__flow-ttl::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--lp-accent-line);
}

/* ---- 判断の流れ：3列×2行のヘビ順（1→2→3 ／ 6←5←4） ----
   ★`grid-area` で4〜6番を右から左へ置いている。**6項目が前提**。
     数を変えるなら nth-child の割り当てと矢印の向きを作り直すこと。 */
.lp-body .ki-axis__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 46px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.lp-body .ki-axis__step:nth-child(4) { grid-area: 2 / 3; }
.lp-body .ki-axis__step:nth-child(5) { grid-area: 2 / 2; }
.lp-body .ki-axis__step:nth-child(6) { grid-area: 2 / 1; }
.lp-body .ki-axis__step {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 13px 18px;
  background: #FFFFFF;
  border: 1px solid var(--lp-accent-line); border-radius: 14px;
  box-shadow: 0 2px 8px rgba(23, 50, 77, .05);
  color: #2D344B; font-size: 14px; font-weight: 700; line-height: 1.5;
  box-sizing: border-box;
}
.lp-body .ki-axis__no {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lp-accent);
  color: #FFFFFF; font-size: 14px; font-weight: 900; line-height: 1;
}
/* 旧レイアウトの縦つなぎ（丸＋下向き矢印）を消す */
.lp-body .ki-axis__step:not(:last-child)::before { content: none; display: none; }
/* 矢印：1〜2は右向き、3は下向き、4〜5は左向き、6は無し */
.lp-body #kiso .ki-axis__step::after {
  content: ""; position: absolute; display: block;
  width: 24px; height: 16px;
  background: var(--lp-accent); border: 0; border-radius: 0;
}
.lp-body #kiso .ki-axis__step:nth-child(1)::after,
.lp-body #kiso .ki-axis__step:nth-child(2)::after {
  inset: 50% -35px auto auto; transform: translateY(-50%);
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}
.lp-body #kiso .ki-axis__step:nth-child(3)::after {
  inset: auto auto -32px 50%; width: 16px; height: 24px; transform: translateX(-50%);
  clip-path: polygon(30% 0, 70% 0, 70% 55%, 100% 55%, 50% 100%, 0 55%, 30% 55%);
}
.lp-body #kiso .ki-axis__step:nth-child(4)::after,
.lp-body #kiso .ki-axis__step:nth-child(5)::after {
  inset: 50% auto auto -35px; transform: translateY(-50%);
  clip-path: polygon(100% 30%, 45% 30%, 45% 0, 0 50%, 45% 100%, 45% 70%, 100% 70%);
}
.lp-body #kiso .ki-axis__step:nth-child(6)::after { content: none; display: none; }

/* ---- 結論と次への橋渡し ---- */
.lp-body .ki-axis__concl {
  margin: 34px 0 0; padding: 20px 26px;
  background: #FFFFFF; border: 2px solid #EF6C19; border-radius: 14px; box-sizing: border-box;
}
.lp-body .ki-axis__concl-lead {
  margin: 0; color: #123F6D; font-size: 17px; font-weight: 900; line-height: 1.6; text-align: center;
}
.lp-body .ki-axis__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-axis__note {
  margin: 20px 0 0; color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8; text-align: center;
}
.lp-body .ki-axis__arrow-down {
  width: 24px; height: 24px; margin: 14px auto 0;
  border-right: 5px solid var(--lp-accent); border-bottom: 5px solid var(--lp-accent);
  border-radius: 3px; transform: rotate(45deg);
}

@media screen and (max-width: 1100px) {
  .lp-body .ki-axis__title { font-size: 27px; }
  .lp-body .ki-axis__lead { font-size: 15px; }
  .lp-body .ki-axis__concl-lead { font-size: 16px; }
  .lp-body .ki-axis__item { font-size: 13px; }
  .lp-body .ki-axis__step { font-size: 13px; padding: 10px 12px; }
}

@media screen and (max-width: 900px) {
  /* 2カードは縦積み。あいだの矢印は下向きに置き換える */
  .lp-body .ki-axis__ba { grid-template-columns: minmax(0, 1fr); gap: 26px 0; }
  .lp-body #kiso .ki-axis__bridge { flex-direction: row; gap: 14px; }
  .lp-body #kiso .ki-axis__bridge-arw {
    width: 46px; height: 34px;
    clip-path: polygon(26% 0, 26% 66%, 0 66%, 50% 100%, 100% 66%, 74% 66%, 74% 0);
  }
  .lp-body .ki-axis__list { max-width: 420px; margin: 0 auto; }
  /* 判断の流れは1列に。矢印はすべて下向き */
  .lp-body .ki-axis__steps { grid-template-columns: minmax(0, 1fr); gap: 30px 0; max-width: 480px; margin: 26px auto 0; }
  .lp-body .ki-axis__step:nth-child(4),
  .lp-body .ki-axis__step:nth-child(5),
  .lp-body .ki-axis__step:nth-child(6) { grid-area: auto / 1; }
  .lp-body #kiso .ki-axis__step:nth-child(1)::after,
  .lp-body #kiso .ki-axis__step:nth-child(2)::after,
  .lp-body #kiso .ki-axis__step:nth-child(3)::after,
  .lp-body #kiso .ki-axis__step:nth-child(4)::after,
  .lp-body #kiso .ki-axis__step:nth-child(5)::after {
    inset: auto auto -27px 50%; width: 16px; height: 20px; transform: translateX(-50%);
    clip-path: polygon(30% 0, 70% 0, 70% 55%, 100% 55%, 50% 100%, 0 55%, 30% 55%);
  }
}

@media screen and (max-width: 767px) {
  .lp-body .ki-axis { padding: 40px 16px 34px; }
  .lp-body .ki-axis__title { font-size: 20px; line-height: 1.55; }
  .lp-body .ki-axis__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .ki-axis__fig { height: 120px; }
  .lp-body .ki-axis__card { padding: 26px 14px 20px; }
  .lp-body .ki-axis__card-badge { font-size: 14px; padding: 6px 18px; }
  .lp-body #kiso .ki-axis__card-body { grid-template-columns: 100px minmax(0, 1fr); gap: 0 10px; }
  .lp-body #kiso .ki-axis__card .ki-axis__fig { height: 130px; }
  .lp-body #kiso .ki-axis__card .ki-axis__item { font-size: 13px; }
  .lp-body .ki-axis__flow-ttl { font-size: 17px; gap: 12px; }
  .lp-body .ki-axis__step { font-size: 13px; padding: 12px 14px; }
  .lp-body .ki-axis__no { width: 25px; height: 25px; font-size: 13px; }
  .lp-body .ki-axis__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body #kiso .ki-axis__concl-lead { font-size: 14px; }
  .lp-body .ki-axis__note { font-size: 13px; text-align: left; }
}


/* ==========================================================================
   E. .ki-worry を【機械力学入門講座（kiriki）と同じレイアウト】に差し替え
      2026-09-11 アース指示
   --------------------------------------------------------------------------
   変更前：写真つきカード3枚を横並び（jusi / machining 系）。写真が3枚必要だった。
   変更後：白い角丸パネルの中に【左＝写真1枚 ／ 右＝悩み3件の縦リスト】。
           lp_kiriki.css の `.kr-worry` 一式から、**実際に効いている定義だけ**を
           CSSOM で抽出して移植した（lp_kiriki.css には世代の違う .kr-worry が
           3組入っていて、最後のものだけが効いている。丸ごとコピーしないこと）。

   ★移植にあたって変えたのは色だけ:
       セクション地色  #E8F1EF（緑寄り）→ #EAF1FD（kiso の薄青）
       方眼の線        rgba(36,90,45,.055) → rgba(70,140,255,.06)
     `--lp-accent` を使っている箇所（見出し上の横線・橋渡しの矢印）は
     そのままで kiso の青になる。

   ★**素材の手配が3枚 → 1枚に減った。** 必要なのは
     `.ki-worry__photo` の写真1枚だけ（4:3・640×480 以上）。

   ★このブロックは【あとから足した打ち消し】なので、
     旧レイアウト（`.ki-worry__list` の3列グリッド、`.ki-worry__item` のカード装飾、
     `.ki-worry__ph`）は上のほうに残ったままになっている。
     未使用CSSの削除をするときに、旧 .ki-worry 一式もまとめて消すこと。
   ========================================================================== */

/* ---- 旧レイアウト（カード3枚）の打ち消し ----
   下の kiriki 由来のルールが宣言していないプロパティだけを戻している。
   ここを消すと 3列グリッドとカードの影が復活するので注意。 */
.lp-body .ki-worry__list {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.lp-body .ki-worry__item {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
.lp-body .ki-worry__h3,
.lp-body .ki-worry__desc {
  padding: 0;
}

/* ---- ここから kiriki 由来のレイアウト ---- */
.lp-body .ki-worry {
  position: relative;
  --ki-sec-bg: #EAF1FD;   /* .ki-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 52px;
  background: #EAF1FD;
  overflow: hidden;
  box-sizing: border-box;
}
/* 背景の方眼。中央を抜いて周縁だけ薄く見せる */
.lp-body .ki-worry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(70, 140, 255, .06) 0, rgba(70, 140, 255, .06) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(70, 140, 255, .06) 0, rgba(70, 140, 255, .06) 1px, transparent 1px, transparent 26px);
  -webkit-mask-image: radial-gradient(115% 88% at 50% 46%, transparent 0%, transparent 40%, #000 76%);
  mask-image: radial-gradient(115% 88% at 50% 46%, transparent 0%, transparent 40%, #000 76%);
  pointer-events: none;
}
.lp-body .ki-worry__inner {
  position: relative;
  z-index: 1;
  width: min(1000px, 100%);
  margin: 0 auto;
}
.lp-body .ki-worry__title {
  margin: 0 0 28px;
  color: #123F6D;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .01em;
  text-align: center;
}
.lp-body .ki-worry__title::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .ki-worry__lead {
  margin: 0 0 28px;
  color: #4A5568;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
}

/* ---- 白いパネル：左に写真1枚、右に悩みリスト ---- */
.lp-body .ki-worry__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 30px 0 28px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(23, 50, 77, .07);
  box-sizing: border-box;
}
.lp-body .ki-worry__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #F2F5F7;
}
/* セレクタに #kiso が要る理由は .ki-need__fig img のコメント参照
   （旧CSS由来の `#kiso img` 系ルールに幅を奪われるため） */
.lp-body #kiso .ki-worry__photo img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
}
/* 写真が届くまでの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .ki-worry__photo:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #F08300;
  background: rgba(255, 248, 240, .6);
}
.lp-body .ki-worry__photo:empty::before {
  content: "写真準備中（4:3・640×480以上／悩んでいる若手設計者）";
  color: #B45900;
  font-size: 12px;
  font-weight: 700;
}
.lp-body .ki-worry__list {
  margin: 0;
  padding: 0 6px 0 0;
  list-style: none;
}
/* 1件＝「悩み 0X」のピル（左・2行ぶんぶち抜き）＋ 見出し ＋ 説明 */
.lp-body .ki-worry__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 12px;
  margin: 0;
  padding: 16px 0;
}
.lp-body .ki-worry__item + .ki-worry__item {
  border-top: 1px solid #E4EDEF;
}
.lp-body .ki-worry__no {
  grid-area: 1 / 1 / span 2;
  align-self: start;
  margin: 2px 0 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: #EF6C19;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .04em;
  white-space: nowrap;
}
.lp-body .ki-worry__h3 {
  grid-area: 1 / 2;
  margin: 0 0 4px;
  color: #123F6D;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
}
.lp-body .ki-worry__desc {
  grid-area: 2 / 2;
  margin: 0;
  color: #4A5568;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.75;
}

/* ---- 結論 ＋ 次のセクションへの橋渡し ---- */
.lp-body .ki-worry__concl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 14px 26px;
  background: #FFF8F2;
  border: 1px solid #F3C9A6;
  border-radius: 14px;
  box-sizing: border-box;
}
.lp-body .ki-worry__concl-lead {
  margin: 0 0 6px;
  color: #123F6D;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
.lp-body .ki-worry__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .ki-worry__concl-sub {
  margin: 0;
  color: #2D344B;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
}
.lp-body .ki-worry__bridge {
  max-width: 840px;
  margin: 26px auto 0;
  color: #123F6D;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}
.lp-body .ki-worry__bridge b { color: #EF6C19; font-weight: 900; }
/* 下向きのシェブロン（CSSで描く。画像にしない） */
.lp-body .ki-worry__bridge-arrow {
  width: 24px;
  height: 24px;
  margin: 16px auto 0;
  border-right: 5px solid var(--lp-accent);
  border-bottom: 5px solid var(--lp-accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

@media screen and (max-width: 900px) {
  /* 2列に写真＋リストは入らないので縦積みに */
  .lp-body .ki-worry__title { font-size: 26px; margin-bottom: 22px; }
  .lp-body .ki-worry__panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-body .ki-worry__list { padding: 0; }
  .lp-body .ki-worry__h3 { font-size: 18px; }
  .lp-body .ki-worry__desc { font-size: 14px; }
  .lp-body .ki-worry__concl-lead { font-size: 21px; }
  .lp-body .ki-worry__concl-sub { font-size: 15px; }
  .lp-body .ki-worry__bridge { font-size: 17px; margin-top: 22px; }
}

@media screen and (max-width: 767px) {
  .lp-body .ki-worry { padding: 40px 16px 32px; }
  .lp-body .ki-worry__title { font-size: 21px; line-height: 1.55; margin-bottom: 18px; }
  .lp-body .ki-worry__lead { font-size: 14px; margin-bottom: 22px; text-align: left; }
  .lp-body .ki-worry__panel { margin-top: 22px; padding: 12px; border-radius: 14px; }
  .lp-body .ki-worry__item { padding: 14px 0; gap: 0 10px; }
  .lp-body .ki-worry__no { font-size: 12px; padding: 4px 12px; }
  .lp-body .ki-worry__h3 { font-size: 16px; }
  .lp-body .ki-worry__desc { font-size: 13px; }
  .lp-body .ki-worry__concl { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .lp-body .ki-worry__concl-lead { font-size: 18px; }
  .lp-body .ki-worry__concl-sub { font-size: 14px; }
  .lp-body .ki-worry__bridge { font-size: 15px; line-height: 1.75; margin-top: 18px; text-align: left; }
  .lp-body .ki-worry__bridge-arrow { width: 18px; height: 18px; border-width: 4px; margin-top: 12px; }
  /* ★SPは1列。ピルを見出しの上へ独立させる（横に並べると見出しが2〜3行に割れる） */
  .lp-body #kiso .ki-worry__item { grid-template-columns: minmax(0, 1fr); gap: 6px 0; }
  .lp-body #kiso .ki-worry__no { grid-area: auto / 1; justify-self: start; margin: 0; }
  .lp-body #kiso .ki-worry__h3,
  .lp-body #kiso .ki-worry__desc { grid-area: auto / 1; }
  .lp-body #kiso .ki-worry__concl-lead { font-size: 16px; }
}

/* 260927 お客様の声（代表カード＋シート駆動の原文カード）の配色と打ち消し（kiso）。
   テーマ色 var(--lp-accent)（.lp-body で #468cff のブルー系）に追従させる。
   淡背景もテーマ定義済みの var(--lp-accent-soft)（#EDF4FF）を使い、色変更に自動追従させる。
   ※幅（960px）とスマホ余白は .lp-body #kiso > #sec-survey で対応済みのため、ここでは触らない。
   ※このブロックはファイルの一番最後に貼る。 */
.lp-body #sec-survey { --voice-accent: var(--lp-accent); --voice-accent-bg: var(--lp-accent-soft); }

/* 既存の .lp-body #kiso img { max-width:100%; height:auto } (1,1,1) が lp_voice.css の
   .avatar { height: 64px } (0,1,0) に勝ち、アバター（元画像120×130の非正方形）が
   64×69の縦長楕円になるのを打ち消す（kyoudo〜vibration と同じ症状）。
   実測：この1行が無いと 64×69、あると 64×64 の正円になる。 */
.lp-body #kiso #sec-survey .avatar { height: 64px; }


/* =========================================================================
   基礎LP 仕上げ（2026-09-28）  リフターの例／3つの理由をカード化
   ・yoso_top（.yo-lifter / .yo-reason）の組み方に合わせた
   ・図の中の文字は読めなくなるので画像に入れない。文字はすべてHTML側
   ・旧 .ki-need__fig2 / .ki-reason__item / __h3 / __sub / __note / __fig は
     本文から消えるので未使用になる（残っていても表示に影響なし）
   ========================================================================= */

/* ---- J. リフターの例（.ki-lifter） ---- */
.lp-body .ki-lifter {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px;
  width: min(960px, 100%); margin: 18px auto 0; box-sizing: border-box;
}
.lp-body .ki-lifter__fig {
  display: flex; flex-direction: column; justify-content: center;
  margin: 0; padding: 16px 16px 12px;
  background: #fff; border: 1px solid var(--lp-accent-line); border-radius: 12px;
  box-sizing: border-box;
}
.lp-body .ki-lifter__fig img { display: block; width: 100%; height: auto; }
.lp-body .ki-lifter__cap {
  margin: 10px 0 0; color: #5A6675; font-size: 13px; font-weight: 600; line-height: 1.6; text-align: center;
}
.lp-body .ki-lifter__panel {
  padding: 22px 22px 20px;
  background: #F4F8FC; border: 1px solid #DCE8EC; border-radius: 12px; box-sizing: border-box;
}
.lp-body .ki-lifter__label {
  margin: 0 0 10px; color: #123F6D; font-size: 16px; font-weight: 900; line-height: 1.5;
}
.lp-body .ki-lifter__label.is-need {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed #C9D8E4;
}
.lp-body .ki-lifter__checks,
.lp-body .ki-lifter__chips { margin: 0; padding: 0; list-style: none; }
.lp-body .ki-lifter__checks li {
  position: relative; margin: 0 0 6px; padding: 0 0 0 28px;
  color: #17324D; font-size: 15px; font-weight: 700; line-height: 1.6;
}
.lp-body .ki-lifter__checks li:last-child { margin-bottom: 0; }
/* チェック印（オレンジの角丸＋白いレ点） */
.lp-body .ki-lifter__checks li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 4px; background: #EF6C19;
}
.lp-body .ki-lifter__checks li::after {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lp-body .ki-lifter__checks li span {
  margin-left: 6px; color: #5A6675; font-size: 13px; font-weight: 600;
}
.lp-body .ki-lifter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-body .ki-lifter__chips li {
  margin: 0; padding: 5px 16px;
  background: #123F6D; border-radius: 999px;
  color: #fff; font-size: 15px; font-weight: 800; line-height: 1.5;
}
.lp-body .ki-lifter__chips li::before,
.lp-body .ki-lifter__chips li::after { content: none; display: none; }
.lp-body .ki-lifter__units {
  margin: 14px 0 0; color: #4A5568; font-size: 13px; font-weight: 600; line-height: 1.7;
}
/* 「荷重 N」などを1かたまりで折り返す */
.lp-body .ki-lifter__units span {
  display: inline-block; margin: 6px 6px 0 0; padding: 1px 8px;
  background: #fff; border: 1px solid #DCE8EC; border-radius: 4px;
  color: #17324D; white-space: nowrap;
}
@media screen and (max-width: 900px) {
  .lp-body .ki-lifter { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-lifter { margin-top: 14px; }
  .lp-body .ki-lifter__fig { padding: 10px 10px 8px; border-radius: 10px; }
  .lp-body .ki-lifter__panel { padding: 18px 16px 16px; border-radius: 10px; }
  .lp-body .ki-lifter__checks li { font-size: 14px; }
  .lp-body .ki-lifter__chips li { font-size: 14px; padding: 4px 14px; }
}

/* ---- K. 3つの理由をカード化（.ki-reason__cards） ----
   セクション地が薄青（#EAF1FD）なので、カードは白。角のカギ括弧は yoso と同じ */
.lp-body .ki-reason__cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  margin: 0; padding: 0; list-style: none; text-align: left;
}
/* 見出し・説明・画像の3段を subgrid で横にそろえる（説明文の行数が違っても画像の上端がそろう） */
.lp-body .ki-reason__card {
  position: relative;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin: 0;
  padding: 26px 20px 22px;
  background: #fff; border-radius: 6px;
  box-shadow: 0 2px 10px rgba(18, 63, 109, .06);
  box-sizing: border-box;
}
.lp-body .ki-reason__card::before,
.lp-body .ki-reason__card::after {
  content: ""; position: absolute; top: 0;
  display: block; width: 22px; height: 22px;
  border-top: 3px solid #EF6C19; background: none;
}
.lp-body .ki-reason__card::before { left: 0; border-left: 3px solid #EF6C19; }
.lp-body .ki-reason__card::after { right: 0; border-right: 3px solid #EF6C19; }
.lp-body .ki-reason__head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.lp-body .ki-reason__num {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--lp-accent-soft);
  color: var(--lp-accent-dark); font-size: 11px; font-weight: 800; line-height: 1.1; text-align: center;
}
.lp-body .ki-reason__num b { display: block; font-size: 16px; font-weight: 900; line-height: 1.1; }
.lp-body .ki-reason__ttl {
  margin: 0; padding: 0; border: 0; background: none;
  color: #123F6D; font-size: 20px; font-weight: 900; line-height: 1.45;
}
.lp-body .ki-reason__desc {
  margin: 0 0 16px; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.8;
}
.lp-body .ki-reason__panel {
  margin: 0; padding: 14px 14px 12px; align-self: start;
  background: #F4F7FA; border-radius: 6px;
}
.lp-body .ki-reason__shot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4 / 5; margin: 0 0 10px;
  background: #fff; border-radius: 4px; overflow: hidden;
}
.lp-body .ki-reason__shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-body .ki-reason__shot:empty { border: 2px dashed #F08300; background: rgba(255, 248, 240, .6); }
.lp-body .ki-reason__shot:empty::before { content: "画像準備中"; color: #B45900; font-size: 12px; font-weight: 700; }
.lp-body .ki-reason__cap {
  margin: 0; color: #5A6675; font-size: 13px; font-weight: 600; line-height: 1.6; text-align: center;
}
@media screen and (max-width: 900px) {
  .lp-body .ki-reason__cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-body .ki-reason__panel { width: 100%; max-width: 328px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
  .lp-body .ki-reason__shot { max-width: 300px; margin-left: auto; margin-right: auto; }
}
@media screen and (max-width: 767px) {
  .lp-body .ki-reason__card { padding: 20px 16px 18px; }
  .lp-body .ki-reason__ttl { font-size: 18px; }
  .lp-body .ki-reason__desc { font-size: 14px; }
}

/* ---- L. 実質0円の注意書き（.ki-coupon）を講座タイトルの下・申込ボタンの上の囲み枠に ----
   本文【F】で .lp-mv の直後へ移動。地は下の .lp-cta-sec と同色にして、
   「講座名 → 注意書きの枠 → 申込ボタン」を1つのまとまりに見せる */
.lp-body .ki-coupon {
  background: #F3F9FB; border: 0; padding: 40px 20px 0;
}
.lp-body .ki-coupon__inner {
  position: relative;
  width: min(900px, 100%); margin-inline: auto; box-sizing: border-box;
  padding: 34px 36px 26px;
  background: #fff; border: 2px solid #EF6C19; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(239, 108, 25, .10);
}
/* バッジは枠の上辺にのせる */
.lp-body .ki-coupon__badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 6px 18px; white-space: nowrap; font-size: 14px;
}
.lp-body .ki-coupon__title {
  margin: 0 0 18px; font-size: 30px; text-align: center;
}
.lp-body .ki-coupon__title em {
  font-size: 1.3em; color: #E0560A;
  background: linear-gradient(transparent 68%, #FFE1C7 68%);
  padding: 0 .08em;
}
.lp-body .ki-coupon__note {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed #F3CFB0;
}
@media screen and (max-width: 767px) {
  .lp-body .ki-coupon { padding: 32px 16px 0; }
  .lp-body .ki-coupon__inner { padding: 28px 16px 20px; border-radius: 10px; }
  .lp-body .ki-coupon__badge { font-size: 13px; padding: 5px 14px; top: -15px; }
  .lp-body .ki-coupon__title { font-size: 21px; }
}

.lp-body .ki-need__merit-ico svg { display: block; width: 26px; height: 26px; }
@media screen and (max-width: 767px) {
  .lp-body .ki-need__merit-ico svg { width: 22px; height: 22px; }
}
/* ---- N. SPのヒーロー画像が左へずれる不具合の修正（2026-09-30） ---- */
@media screen and (max-width: 767px) {
  .lp-body #kiso .ki-hero__photo img { transform: none; }
}

/* ---- O. SPの6分野カード：2列・アイコン上・文字中央（2026-09-30） ---- */
@media screen and (max-width: 767px) {
  .lp-body .ki-need__merits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lp-body .ki-need__merit {
    flex-direction: column; justify-content: center; gap: 8px;
    padding: 14px 8px 12px; text-align: center;
  }
  .lp-body .ki-need__merit-txt {
    white-space: normal; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere;
  }
}

/* ---- P. SP改行の仕上げ：改行だけでは収まらない4か所の文字サイズ（2026-10-07） ----
   アースから14点の指摘。ほとんどは本文の <br class="sp-break"> で直したが、
   次の4つは**意味の切れ目で割っても1行が枠を超える**ので文字サイズを下げた。
   実測は375pxのiframe（実効幅372px）。「現状 → 必要」の順に併記する。 */
@media screen and (max-width: 767px) {
  /* 講座名バー。11文字 × 32px ＋ 字間4px×11 = 396px ＞ 枠357px。
     ★1語なので改行で割れない。**文字サイズを下げるしか手が無い。**
     27px なら 297+44 = 341px。★講座名がこれより長いLPでは同じ現象が起きる */
  .lp-body .lp-mv h2 { font-size: 27px; }

  /* 「この講座で学ぶのは、／専門知識を積み上げるための土台です。」
     2行目 304px ＞ 枠291px（13px超過）。16px にすると 286px */
  .lp-body .ki-need__concl-lead { font-size: 16px; }

  /* 「土台があれば、…専門分野でも、」294px ＞ 枠290px（4pxだけ超過）。
     13px にすると 273px。3行とも切れ目で割れる */
  /* ★セレクタに #kiso が要る。10579行目に
     `.lp-body #kiso .ki-axis__concl-lead { font-size: 14px }`（詳細度 1,2,0）があり、
     `.lp-body .ki-axis__concl-lead`（0,2,0）では**後ろに書いても負ける**。実測で判明。 */
  .lp-body #kiso .ki-axis__concl-lead { font-size: 13px; }

  /* 特典カードのキャッチ。「よく使う「単位・公式」をラクに調べられる」が
     283px ＝ 枠283px でちょうど。1pxの誤差で3行に割れるため 13px にする（263px） */
  .lp-body .benefit-v2-card__catch { font-size: 13px; }
}