@charset "UTF-8";

/* =========================================================================
   lp_electronics.css ── 電子回路入門講座（electronics）専用LPスタイル
   作成: 2026-09-06
   複製元: lp_kiriki.css（機械力学入門・2026-09-05時点／追加ブロックA〜O反映済み）
   　　　　（系統: zairyou → machining → sheetmetal → kiso → kiriki → electronics）
   ─────────────────────────────────────────────────────────────────────────
   対象ページ（テストサイト monoweb.org）:
     LP 44857 electronics_top ／ お申込み 44874 electronics_paidseminar-order
     ／ お問い合わせ 45124 electronics_ask
   その他: サンプル動画 44860 electronics_sample ／ お客様の声 44862 ／
   　　　よくある質問 44868（スラッグは electronics_qa。electronics_faq は404）
   商品ID: 一括 195(course15_p) ／ 6回分割 197(course15_p6) ／ 法人 196(course15_com)

   複製時に変えたところ:
     1. #kiriki-order → #electronics-order ／ #kiriki → #electronics
     2. el- ← kr-（クラス・カスタムプロパティとも）
        ★接頭辞 `el-` の残存チェックは `\bel-`（語頭）で行うこと。
        　`model-` `panel-` などの部分一致が拾われるため。
        ★進行中の他講座と重複しない: kiso `ki-` ／ kiriki `kr-` ／ ryuriki `ry-` ／
        　neturiki `nt-` ／ vibration `vb-` ／ heattransfer `ht-`
     3. .faqm-theme--kiriki → .lp-body .faqm-theme--electronics（#0099cc / #007AA3）
     4. アクセント色6変数を #0099cc 系に（旧 style_electronics.css の主色・実測40回）
     5. filter 2式を再計算（下記。元色が違うので式を使い回さないこと）
     6. ヘッダーと講座依存コメントを電子回路用に更新

   ★変更していないもの:
     ・curriculum スライドの aspect-ratio 760/428
     　（electronics 第1〜8章の32枚すべて 760×428・実測。規格外の章は無い）

   ★セクション背景の交互配色は、機械力学の値をアクセント比率のまま #0099cc 系へ移した:
     　#E8F1EF → #E8F4F9 ／ #F7FAFA → #F7FBFD
     　（あわせて直書きの pale #F2F8F8 → #F2FAFC ／ line #C7E3E0 → #C7E9F4 ／
     　 mid #9ECECA → #9ED8EC ／ カリキュラム見出し #D9EDEA → #D9F1F7）
     　→ 白カードとの差は実機で必ず実測すること（手順書 §12-3 の事故）

   ★electronics 固有の注意:
     ・旧LPには <div id="electronics"> のラッパーが【無い】。.entry-content 直下に
     　24要素がベタ置きされている。本文移植のときに必ずラップし直すこと。
     　ラップするまで #electronics 配下のルール（暫定ブロック含む）は一切効かない。
     ・カリキュラムは全8章・スライド32枚がすべて 760×428 で揃っている。
     　kiriki 第9章のような規格外画像は無い（追加ブロックA の専用枠は未使用のまま残す）。
     ・アクセントが明るい青（#0099cc）なので、橙（#ef6c19）との対比は kiriki より強い。
     　強調に橙を使いすぎないこと。

   ★アクセント色を変えるときは 3890行付近の6変数と、filter 2式（2900行 / 5940行）を
     必ずセットで直すこと。
   ★新セクション用CSS（.el-hero / .el-need / .el-worry / .el-scope / .el-order /
     .el-axis / .el-ans / .el-reason）は kiriki から引き継いだもの。
     使わないセクションが確定したら、仕上げのタイミングで棚卸しして削除する。
   ========================================================================= */

*, *::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 table th {
  background-color: #28788C;
  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 で実測して総当たりで求めた。
   → electronics は #0989B1 → #0099cc（実SVG 3枚を canvas に描いて実測・2026-09-06。
     　ico-contact01/02/03 の3枚とも目標色との距離 0）。
     ★kiriki の式（#007d73 用の saturate(437%) hue-rotate(-14deg) brightness(55%)）は
     　流用できない。目標色が違うため作り直した。
   ★★`.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(314%) hue-rotate(-1deg) brightness(81%);
}

.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;
}
.cp_bar {
  width: 100%;
  background: #28788C;
  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:      #0099cc;  /* 主アクセント（旧LP style_electronics.css の主色・実測40回。機械力学の #007d73 より明るい青） */
  --lp-accent-dark: #007AA3;  /* ホバー・濃      （accent × 0.8） */
  --lp-accent-soft: #E7F5FA;  /* 見出し薄帯・面  （白 90.41%混色。zairyou の比率を踏襲） */
  --lp-accent-pale: #F2FAFC;  /* 最も薄い面      （白 94.98%混色） */
  --lp-accent-line: #C7E9F4;  /* 罫線            （白 78.08%混色） */
  --lp-accent-mid:  #9ED8EC;  /* 中間色（数字等）（白 62.10%混色） */
}
/* 共通色（講座で変えない）: 紺 #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; }
}

/* =========================================================================
   演習の章をアコーディオンの外に出す（.curriculum-accordion__exercise）  2026-08-26
   ─────────────────────────────────────────────────────────────────────────
   移植元：切削部品設計入門講座（machining）の同名クラス一式。
   このCSSを複製した 2026-08-17 時点の machining にはまだ無かったぶん。
   ★演習の章は「開いて読む」ものではなく「最後にこれをやる」と見せる章なので、
     アコーディオンの項目から外し、`__inner` の末尾に橙の枠で置く。
   ★板金は演習が【第6章の1つだけ】。切削は第10章＋第11章の2つあり、
     あいだを `__ex-plus`（＋の印）でつないでいる。板金では使わない。
   ========================================================================= */
.lp-body .curriculum-accordion__exercise {
  margin: 30px 0 0; padding: 26px 24px 24px;
  background: #FFF9F4; border: 2px solid #F2D6BC; border-radius: 14px;
  box-sizing: border-box;
}
.lp-body .curriculum-accordion__exercise-ttl {
  margin: 0 0 8px; color: #C25A00; font-size: 20px; font-weight: 900; line-height: 1.5; text-align: center;
}
.lp-body .curriculum-accordion__exercise-lead {
  margin: 0 0 22px; color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8; text-align: center;
}
.lp-body .curriculum-accordion__ex {
  margin: 0; padding: 20px 22px 22px;
  background: #FFFFFF; border: 1px solid #F2D6BC; border-radius: 12px; box-sizing: border-box;
}
.lp-body .curriculum-accordion__ex-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px;
}
.lp-body .curriculum-accordion__ex-no {
  flex: 0 0 auto; color: #EF6C19; font-size: 16px; font-weight: 900; line-height: 1.4;
}
.lp-body .curriculum-accordion__ex-ttl { color: #123F6D; font-size: 20px; font-weight: 900; line-height: 1.45; }
.lp-body .curriculum-accordion__ex-sum {
  margin: 0 0 16px; color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
}
/* 演習が2つある講座で、あいだに出す＋の印（板金では未使用） */
.lp-body .curriculum-accordion__ex-plus { position: relative; height: 46px; }
.lp-body .curriculum-accordion__ex-plus::before,
.lp-body .curriculum-accordion__ex-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #EF6C19; border-radius: 2px;
}
.lp-body .curriculum-accordion__ex-plus::before { width: 28px; height: 4px; transform: translate(-50%, -50%); }
.lp-body .curriculum-accordion__ex-plus::after { width: 4px; height: 28px; transform: translate(-50%, -50%); }
@media screen and (max-width: 767px) {
  .lp-body .curriculum-accordion__exercise { padding: 20px 14px 18px; border-radius: 12px; margin-top: 22px; }
  .lp-body .curriculum-accordion__exercise-ttl { font-size: 17px; }
  .lp-body .curriculum-accordion__exercise-lead { font-size: 13px; margin-bottom: 18px; text-align: left; }
  .lp-body .curriculum-accordion__ex { padding: 16px 14px 18px; }
  .lp-body .curriculum-accordion__ex-ttl { font-size: 17px; }
  .lp-body .curriculum-accordion__ex-sum { font-size: 13px; margin-bottom: 12px; }
  .lp-body .curriculum-accordion__ex-plus { height: 36px; }
}

/* ---- 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;
  min-width: 68px;
  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(9, 137, 177, .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%;
  /* sheetmetal は「個別画像方式」（machining / motor と同じ）。第1〜5章は各4枚・
     第6章は9枚の img_cur_0X_0Y.png で、29枚すべて 760×428（2026-08-20 実測・404なし）。
     ★zairyou は「帯画像方式」で 900x164 を4分割 → 1コマ 225x164 だった。
     ★スライドの元画像サイズ・方式を変えたら、この比も必ず合わせること */
  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 {
    min-width: 58px;
    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;
  }
}

@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(9, 137, 177, .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() は変数を使えないため koso-basic の #0989B1 / #097A96 を直値で書いている。
   共通色（変えない）: オレンジ #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; }
}
/* 追加ブロック（kiriki 由来） D ── PC専用の改行  2026-08-26
   ★machining が 2026-08-24 に追加した汎用ユーティリティ。
     sheetmetal のCSSは 08-20 に複製したため入っていなかったので、ここで足す。
     PCで入れた <br> に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(9, 137, 177, .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(9, 137, 177, .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; }
.lp-body .apply-v2-step-text br { display: none; }
.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 → #electronics-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(#electronics-order) header.l-header.p-header .p-header__inner__bottom,
.lp-body:has(#electronics-order) header.l-header.p-header .p-header__float { display: none !important; }

.lp-body:has(#electronics-order) .order-back-bar { position: absolute; top: 28px; left: max(40px, calc(50% - 520px)); z-index: 2; background: transparent; padding: 0; }
.lp-body:has(#electronics-order) .order-back-bar__inner { max-width: none; margin: 0; padding: 0; }
.lp-body:has(#electronics-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(#electronics-order) .order-back-bar a:hover,
.lp-body:has(#electronics-order) .order-back-bar a:focus { text-decoration: none; }
.lp-body:has(#electronics-order) .order-back-bar a::before { content: "←"; margin-right: 6px; text-decoration: none; }

.lp-body:has(#electronics-order) .lp-low { background: var(--lp-accent-pale); position: relative; margin-bottom: 0; padding: 34px 20px 26px; height: auto; }
.lp-body:has(#electronics-order) .lp-low img { display: none; }
.lp-body:has(#electronics-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(#electronics-order) .lp-low .ttl::before { content: ""; display: block; width: 52px; height: 4px; background: var(--lp-accent); margin: 0 auto 16px; }
.lp-body:has(#electronics-order) .lp-low .order-title-row { display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; }
.lp-body:has(#electronics-order) .lp-low .order-course-title,
.lp-body:has(#electronics-order) .lp-low .order-page-title { display: block; }
.lp-body:has(#electronics-order) .lp-low .order-course-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; }
.lp-body:has(#electronics-order) .lp-low .order-page-title { font-size: inherit; line-height: 1.4; }
.lp-body:has(#electronics-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; }
#electronics-order > section:first-child { padding-top: 42px; }

/* 4ステップ */
#electronics-order .opf-heading { text-align: center; color: #17324d; font-size: 24px; font-weight: 800; margin: 0 0 30px; }
#electronics-order .opf-heading::before { content: none !important; display: none !important; }
#electronics-order .opf-steps { display: flex; max-width: 760px; margin: 0 auto; }
#electronics-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; }
#electronics-order .opf-step::before { content: ""; position: absolute; top: 55px; left: -50%; width: 100%; height: 2px; background: var(--lp-accent-line); z-index: 0; }
#electronics-order .opf-step:first-child::before { display: none; }
#electronics-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; }
#electronics-order .opf-step--current .opf-circle { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; }
#electronics-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; }
#electronics-order .opf-badge::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--lp-accent); }
#electronics-order .opf-name { margin-top: 12px; font-size: 15px; font-weight: 800; color: #17324d; line-height: 1.4; }
#electronics-order .opf-sub { margin-top: 4px; font-size: 12px; font-weight: 600; color: #8a94a6; line-height: 1.5; }

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

/* ご購入前の確認事項 */
#electronics-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; }
#electronics-order .opn p { margin: 0 !important; }
#electronics-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; }
#electronics-order .opn__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#electronics-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; }
#electronics-order .opn__card--warning { border-color: var(--lp-accent-line); background: #fff; }
#electronics-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; }
#electronics-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"); }
#electronics-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"); }
#electronics-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"); }
#electronics-order .opn__ttl { font-size: 15px; font-weight: 800; color: var(--lp-accent); margin: 0 0 8px !important; }
#electronics-order .opn__txt { font-size: 12px; color: #3c4453; line-height: 1.7; }
#electronics-order .opn__card--warning .opn__ttl { color: var(--lp-accent); }

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

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

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

/* --- 旧ブロックの共通の器（置き換え完了後に削除する） --- */
.lp-body #electronics > div,
.lp-body #electronics > p {
  width: min(1000px, 100%);
  margin-left: auto;
  margin-right: auto;
}
/* 全幅で見せる新デザインのバンド・position:fixed の要素は上の指定から除外 */
.lp-body #electronics > .el-hero,
.lp-body #electronics > .lp-mv,
.lp-body #electronics > .cp_bar,
.lp-body #electronics > .lp-cta-sec {
  width: auto;
  max-width: none;
}
.lp-body #electronics > .popup {
  width: 100%;
  max-width: none;
  margin: 0;
}
.lp-body #electronics > .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 → #electronics だけ。
   バッジのオレンジ #EF6C19 と見出しの紺 #17324D は講座共通色なので据え置き。
   アイコンはCSSマスク方式なので画像の色替え不要（--lp-accent で塗られる）。
   ========================================================================= */
.lp-body #electronics .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 #electronics .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 #electronics .biz-intro__title {
  margin: 0 0 16px; color: #17324D;
  font-size: 32px; font-weight: 900; line-height: 1.45; letter-spacing: .01em;
}
.lp-body #electronics .biz-intro__lead {
  margin: 0 0 26px; color: #3d4a63; font-size: 16px; font-weight: 500; line-height: 1.85;
}
.lp-body #electronics .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 #electronics .biz-intro__card {
  display: flex; align-items: flex-start; gap: 14px; margin: 0;
  padding: 20px 18px; background: #fff; border-radius: 12px;
}
.lp-body #electronics .biz-intro__ico {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
}
.lp-body #electronics .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 #electronics .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 #electronics .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 #electronics .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 #electronics .biz-intro__body { min-width: 0; }
.lp-body #electronics .biz-intro__ttl {
  margin: 0 0 5px; color: #17233f; font-size: 17px; font-weight: 800; line-height: 1.4;
}
.lp-body #electronics .biz-intro__txt {
  margin: 0; color: #4a5670; font-size: 13px; font-weight: 500; line-height: 1.6;
}
.lp-body #electronics .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 #electronics .biz-intro__note span:not(:last-child) {
  padding-right: 18px; border-right: 1px solid #c3cbdd;
}
@media screen and (max-width: 767px) {
  .lp-body #electronics .biz-intro { margin: 36px auto 32px; padding: 26px 16px 22px; border-radius: 12px; }
  .lp-body #electronics .biz-intro__badge { margin-bottom: 14px; padding: 6px 16px; font-size: 13px; }
  .lp-body #electronics .biz-intro__title { font-size: 21px; margin-bottom: 12px; }
  .lp-body #electronics .biz-intro__lead { font-size: 14px; line-height: 1.8; margin-bottom: 20px; text-align: left; }
  /* SPは3列だと1枚あたりが狭すぎるため1列に積む */
  .lp-body #electronics .biz-intro__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
  .lp-body #electronics .biz-intro__card { padding: 16px 14px; gap: 12px; }
  .lp-body #electronics .biz-intro__ico { width: 36px; height: 36px; }
  .lp-body #electronics .biz-intro__ico::before { width: 36px; height: 36px; }
  .lp-body #electronics .biz-intro__ttl { font-size: 16px; }
  .lp-body #electronics .biz-intro__note { gap: 4px 14px; font-size: 12px; }
  .lp-body #electronics .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()` から作り直す。electronics は black → #0099cc に一致
   　（faq1〜5.svg の5枚とも距離0・実測 2026-09-06）。kiriki の式（black → #007d73）は流用不可。
   ★アクセント色を変えたら再計算すること。求め方（元色が黒の場合）:
     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(47%) saturate(670%) hue-rotate(148deg) brightness(90%) contrast(134%);
}

/* =========================================================================
   受講者の声（#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 は自前の幅を持たない。#electronics 直下は全幅ラッパーなので
     ここで960pxに絞る（yoso と同じ理由・同じ値）。
     暫定ブロックの `#electronics > div, > p` は div/p 限定のため section には効かない。
   ========================================================================= */
.lp-body #electronics > #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;
}

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

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

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

/* =========================================================================
   モーター選定でよくある悩み（.el-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 .el-worry {
  --el-sec-bg: #EDF4F6;   /* .el-conc__arrow が罫線を隠すのに使う。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 44px;
  /* ヒーローのグラデーション終点 #E8F4F6 と同系の薄い青緑。
     パネルを白にして浮かせるため、ここは必ず白以外にすること。
     ★var(--lp-accent-pale) は使わない。motor のアクセントはグレー(#505050)なので
       pale が #F7F7F7 の無彩色になり、白パネルとの差が消える（mechatro で実際に起きた） */
  background: #EDF4F6;
  box-sizing: border-box;
}
.lp-body .el-worry__inner { width: min(1000px, 100%); margin: 0 auto; }
/* ★2026-08-13 アース指示：見出しの上は「小さい文字のラベル」ではなく
   構想設計入門講座（機能設計編）と同じ【横線】にする。
   本文から <p class="el-worry__eyebrow"> は削除済み。万一残っていても出さない。
   線の仕様は .section-title::before / .pv2-title::before と同じ 52×4px・角丸。 */
.lp-body .el-worry__eyebrow { display: none; }
.lp-body .el-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 .el-worry__title::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .el-worry__hl { color: #EF6C19; }

@media screen and (max-width: 900px) {
  .lp-body .el-worry__title { font-size: 26px; margin-bottom: 22px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-worry { padding: 40px 16px 32px; }
  .lp-body .el-worry__eyebrow { font-size: 14px; }
  .lp-body .el-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` … という修飾クラスで切り替えている。
   ★electronics 用の修飾クラスは共通パーツ側に無いので、ここで定義する。
   ★`.lp-body` を付けて詳細度を (0,2,0) にすること。
     共通パーツの `.faqm-theme{--faqm-accent:#083866}` は (0,1,0) だが
     文書の最後に出るため、同じ詳細度では負けて紺のままになる。 */
.lp-body .faqm-theme--electronics {
  --faqm-accent: #0099cc;
  --faqm-accent-dark: #007AA3;
}

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

   ★クリックの仕組み：`lp.js` は **`.openVideo[data-popup]` しか拾わない**（実測 2026-08-16）。
     kousa は `.sample-video-btn` / `.cv-thumb` 用のスクリプトを別に持っているが、
     sheetmetal では**スクリプトを足さず、サムネとボタンに `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;
}

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

   ★図版（製品4点 → 「製品に求められる条件が違う」 → 特性6項目）は
     アース支給の画像1枚。写真と細かい線・アイコンの集合体なのでCSSでは作らない。
     空のあいだは :empty の仮枠が出て、<img> を入れると自動で消える。
   ★このセクションのクラス名は .el-need。motor 時代の「なぜ〜難しいのか」ブロック
     （旧 za-why 一式）は machining 化の際に削除済みなので、名前の衝突はもう無い。
   ★背景は【白＋方眼】。上の .feature-sec も白なので、方眼のテクスチャで区切りを作っている。
     薄い色にすると下の .el-worry（#E8F4F9）とRGB差が10未満になり境目が消える（§12-3）。
   ========================================================================= */
.lp-body .el-need {
  position: relative;
  padding: 56px 20px 48px;
  background: #FFFFFF;
  overflow: hidden;
}
.lp-body .el-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 .el-need__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .el-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 .el-need__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .el-need__hl { color: #EF6C19; }
.lp-body .el-need__lead {
  margin: 0 0 26px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.9;
  text-align: center;
}

/* ---- 図版（アース支給） ---- */
/* ★sheetmetal は【写真3枚（設計／製作／検査）の横並び】にしている（2026-08-20）。
   zairyou / machining は1枚絵＋SP用の縦長を <picture> で出し分ける作りだったが、
   板金は支給画像が3枚組だったので、下の .el-need__flow でグリッドとして組み、
   SPは縦積みにして出し分けの画像を不要にした。
   （zairyou は img_zairyou4.png / img_zairyou4_sp.webp、
     machining は img_machining_need.png 1920×712 / _sp.webp 750×1125）
   ★<picture> を使う作りに戻す場合は既定で inline なので block にすること。 */
.lp-body .el-need__fig { margin: 0 0 28px; text-align: center; }
.lp-body .el-need__fig picture { display: block; }
/* セレクタに #electronics が要る理由は .el-worry__hero img のコメント参照 */
.lp-body #electronics .el-need__fig img {
  display: block;
  width: 100%; max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.lp-body .el-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 .el-need__fig:empty::before {
  content: "図版準備中（力を求める → 機械要素を選ぶ → 強度・動きを評価する ／ どれも土台は力学）";
  color: #B45900; font-size: 13px; font-weight: 700;
}

/* ---- 設計 → 製作 → 検査 の3枚組  2026-08-20 ----
   ★ラベル（設計／製作／検査）は【画像に焼き込まない】。
     支給画像には橙のピルが写真の上に焼き込まれていたので、ピルの手前で切り出し、
     ここで丸ラベルとして描き直している（構成案 §3。焼き込むとSPで潰れ、文言も直せない）。
   ★★支給画像は3枚とも比が違う（2026-08-20 実測：design-cad 582×665=0.88 ／
     manufacturing 801×665=1.20 ／ inspection 670×665=1.01）。
     そのまま並べると【1枚だけ高さが変わって下端がガタつく】（zairyou §6-8 の教訓）。
     → aspect-ratio: 6/5 ＋ object-fit: cover で高さをそろえる。
       6/5(=1.20) にした理由：manufacturing が無加工で収まり、他の2枚の切り取りが最小になる。
       1.0 にすると manufacturing の左右を、1.5 にすると design-cad の上下を大きく削ることになる。
     ★差し替えるときは3枚の比を実測し直すこと。3枚とも同じ比で書き出してもらえるなら
       この aspect-ratio と object-fit は外してよい。
   ★矢印は入れない。横に3枚並ぶだけで流れは読み取れるうえ、
     SPで縦積みになると横向きの矢印が意味を失う（手順書 §12-8）。 */
.lp-body .el-need__flow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 14px;
  width: min(960px, 100%);
  margin: 0 auto; padding: 0;
  list-style: none;
}
.lp-body .el-need__flow-item { position: relative; margin: 0; }
.lp-body #electronics .el-need__flow-item img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover; object-position: center;
  border-radius: 10px;
}
.lp-body .el-need__flow-label {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  margin: 0; padding: 6px 24px;
  border-radius: 999px;
  background: #EF6C19; color: #FFFFFF;
  font-size: 18px; font-weight: 800; line-height: 1.4;
  white-space: nowrap;
}
@media screen and (max-width: 900px) {
  .lp-body .el-need__flow-label { font-size: 16px; padding: 5px 20px; }
}
@media screen and (max-width: 767px) {
  /* ★SPは縦積みにする。3列のままだと1枚あたり110pxになり、写真の中身が読めない */
  .lp-body .el-need__flow { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
  .lp-body .el-need__flow-label { font-size: 15px; bottom: 10px; }
}

/* ---- 結論ボックス ----
   .el-worry の結論は【橙の枠】。ここで同じ枠を使うと2つ続けて同じ強さになるので、
   こちらは【薄い面＋細い罫線】にして、下の .el-worry へ強さが上がる並びにしている */
/* ★2026-08-20 sheetmetal: 結論ボックスの地色を青緑系にそろえた。
   zairyou 由来の #F6F9F3 / #DCE6D6（薄い緑）はアクセント #009193 と系統が合わなかった。
   値は --lp-accent-pale / --lp-accent-line と同じ。 */
.lp-body .el-need__concl {
  padding: 22px 26px;
  background: #F2FAFC;
  border: 1px solid #C7E9F4; border-radius: 14px;
  box-sizing: border-box;
}
.lp-body .el-need__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 24px; font-weight: 900; line-height: 1.55;
  text-align: center;
}
.lp-body .el-need__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .el-need__note {
  margin: 18px 0 0;
  color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
  text-align: center;
}

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

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

   ★丸・番号・矢印・結論ボックス・背景の方眼はすべてCSS。画像は【丸の中のイラスト6点だけ】。
     手順書 §3-2「幾何学的な形はCSS、絵柄は画像」に沿っている。
   ★矢印の並べ方はモックのS字（右端から回り込んで左端へ戻る）をやめた。
     理由：①折り返す幅では線が破綻する（§12-8）②回り込みの線が長く、視線が一度左へ戻る
     → 【3列×2行。行の中は「→」、行と行のあいだは中央に「↓」1本】にした。
     900px以下は1列縦積みにして、各ステップのあいだを「↓」でつなぐ。
   ========================================================================= */
.lp-body .el-order {
  position: relative;
  /* 白 → 薄青緑 → 白 → 薄青緑 の交互（手順書 §12-4）。
     上の .el-scope が白なので、ここは最も薄い青緑にして境目を作る */
  --el-sec-bg: #F7FBFD;
  padding: 56px 20px 46px;
  background: #F7FBFD;
  overflow: hidden;
}
.lp-body .el-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 .el-order__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .el-order__title {
  margin: 0 0 18px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .el-order__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .el-order__hl { color: #EF6C19; }
.lp-body .el-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 .el-order__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 30px;
  margin: 0; padding: 0;
  list-style: none;
}
.lp-body .el-order__step {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
/* 各行の中をつなぐ横矢印。軸＋三角を clip-path 1つで描く（§13-7「三角だけだと矢印に見えない」） */
.lp-body .el-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 .el-order__step:nth-child(3n)::after { content: none; }

.lp-body .el-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 .el-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 .el-order__ico {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px;
}
.lp-body #electronics .el-order__ico img {
  display: block; flex: none;
  width: auto; max-width: 100%;
  height: auto; max-height: 100%;
}
.lp-body .el-order__ico:empty {
  border: 1px dashed #F08300; border-radius: 6px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .el-order__ico:empty::before { content: "図版"; color: #B45900; font-size: 11px; font-weight: 700; }

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

/* ---- 行と行のあいだの折り返し線（2026-08-16 アース指示で差し替え） ----
   ★以前は中央に下向き矢印1本（.el-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 .el-order__turn {
  position: relative;
  height: 64px;
  margin: 16px 0 8px;
  color: var(--lp-accent);
}
.lp-body .el-order__turn svg { display: block; width: 100%; height: 100%; }

/* =========================================================================
   .el-order を【STEPパネル4枚】に組み替え  2026-08-20（アース支給モック）
   ─────────────────────────────────────────────────────────────────────────
   移植元：切削部品設計入門講座（machining 33882）の .ma-order__panel 一式。
   もとは zairyou 由来の「丸6つ＋折り返し」だったが、モックに合わせて
   【STEP 1〜4 のパネル＋あいだに矢印】にした。
   ★これに伴い次の指定は使わなくなった（本文からも要素ごと削除済み）:
     .el-order__flow / __step / __circle / __num / __ico / __txt / __turn
     仕上げの棚卸しでまとめて削除すること。
   ★矢印（.el-order__arw2）は【軸のある通常の矢印】。三角だけにしないこと（アース指示）。
     clip-path の polygon は「軸の左上→軸の右上→傘の上→先端→傘の下→軸の右下→軸の左下」の順。
   ★列幅：STEP3 だけ中身が3つあるので広くしている。machining は STEP2 が2列だったため
     配分が違う（1.18/2.15/1/1.09）。板金は 1/1/1.7/1。
   ========================================================================= */
.lp-body .el-order__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.7fr auto 1fr;
  align-items: stretch; gap: 0;
  margin: 30px 0 0;
}
.lp-body .el-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;
}
.lp-body .el-order__panel--key { background: #FFF9F4; border-color: #F2D6BC; }
.lp-body .el-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 .el-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 .el-order__panel--key .el-order__step-ttl { border-bottom-color: #F2D6BC; }
.lp-body .el-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 .el-order__cell {
  display: flex; flex-direction: column;
  margin: 0; padding: 8px 6px; min-width: 0; box-sizing: border-box;
}
.lp-body .el-order__cell::before,
.lp-body .el-order__cell::after { content: none; display: none; }
/* ★STEP3 は中身が【縦に3つ】。machining は2列だったが、モックは縦積みで
   あいだに破線を引く形（アース支給モック 2026-08-20）。
   セルの中は「文字が左・イラストが右」の2列にする。 */
/* ★イラスト列を 132px → 104px に詰めた（2026-08-20 実測）。
   132px だと文字側が123pxしか残らず、番号(30px)＋すき間(7px)を引くと見出しは86px。
   「切断・穴あけ」は15pxで90px あるので「切断・穴あ／け」と折り返していた。
   104px なら文字側155px・見出し118pxで、STEP3 の3つとも1行に収まる。
   ★見出しの文言を長くするときは、この列幅を測り直すこと。 */
.lp-body .el-order__panel--key .el-order__cell {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center; gap: 0 10px;
  padding: 12px 6px;
  border-top: 1px dashed #E8CDB4;
}
.lp-body .el-order__panel--key .el-order__cell:first-child { border-top: 0; }
.lp-body .el-order__cell-head { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 8px; }
.lp-body .el-order__panel--key .el-order__cell-head { margin: 0; align-items: center; }
.lp-body .el-order__cell-no {
  flex: 0 0 auto; color: #EF6C19; font-size: 24px; font-weight: 900; line-height: 1;
}
/* 追加ブロック（kiriki 由来） C ── 章番号が範囲（02-04 / 08-09）のセル  2026-08-26
   ★kiriki は9章を4つのSTEPに束ねるため、1セルが複数章にまたがる。
     既定の 24px のままだと番号が欄幅を食って、右のタイトルが1文字ずつ折り返す。 */
.lp-body .el-order__cell-no--range { font-size: 17px; align-self: center; letter-spacing: -.02em; }
.lp-body .el-order__cell-ttl { display: block; color: #123F6D; font-size: 15px; font-weight: 900; line-height: 1.45; }
.lp-body .el-order__cell-txt { color: #2D344B; font-size: 13px; font-weight: 600; line-height: 1.6; }
.lp-body .el-order__ico2 {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; width: 100%; min-height: 150px; margin-top: 4px;
}
.lp-body .el-order__panel--key .el-order__ico2 { height: 96px; min-height: 0; margin: 0; }
.lp-body #electronics .el-order__ico2 img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 150px; margin: 0 auto;
}
.lp-body #electronics .el-order__panel--key .el-order__ico2 img { max-height: 96px; }
/* イラスト未作成のあいだの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .el-order__ico2:empty {
  flex: 0 0 auto; height: 150px; width: 100%; margin: auto;
  border: 1px dashed #F08300; border-radius: 8px; background: rgba(255, 248, 240, .6);
}
.lp-body .el-order__panel--key .el-order__ico2:empty { height: 96px; margin: 0; }
.lp-body .el-order__ico2:empty::before { content: "イラスト"; color: #B45900; font-size: 11px; font-weight: 700; }
.lp-body .el-order__arw2 {
  align-self: center;
  width: 30px; height: 26px; margin: 0 9px;
  background: var(--lp-accent);
  clip-path: polygon(0 30%, 58% 30%, 58% 0, 100% 50%, 58% 100%, 58% 70%, 0 70%);
}
@media screen and (max-width: 1040px) {
  .lp-body .el-order__panel { padding: 16px 12px 18px; }
  .lp-body .el-order__cell-no { font-size: 20px; }
  .lp-body .el-order__cell-ttl { font-size: 14px; }
  .lp-body .el-order__cell-txt { font-size: 12px; }
  .lp-body .el-order__ico2 { min-height: 120px; }
  .lp-body #electronics .el-order__ico2 img { max-height: 120px; }
  .lp-body .el-order__panel--key .el-order__cell { grid-template-columns: minmax(0, 1fr) 84px; }
  .lp-body .el-order__panel--key .el-order__ico2 { height: 80px; }
  .lp-body #electronics .el-order__panel--key .el-order__ico2 img { max-height: 80px; }
  .lp-body .el-order__arw2 { width: 22px; height: 20px; margin: 0 6px; }
}
@media screen and (max-width: 900px) {
  /* ★1列に折り返す。矢印は90度回して縦向きにする */
  .lp-body .el-order__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .el-order__arw2 { transform: rotate(90deg); margin: 10px auto; }
  .lp-body .el-order__ico2 { min-height: 110px; }
  .lp-body #electronics .el-order__ico2 img { max-height: 110px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-order__step-ttl { font-size: 16px; margin-bottom: 12px; padding-bottom: 10px; }
  .lp-body .el-order__step-no { font-size: 12px; }
  .lp-body .el-order__cell-no { font-size: 20px; }
  .lp-body .el-order__cell-ttl { font-size: 15px; }
  .lp-body .el-order__cell-txt { font-size: 13px; }
  .lp-body .el-order__ico2 { min-height: 92px; }
  .lp-body #electronics .el-order__ico2 img { max-height: 92px; }
  .lp-body .el-order__panel--key .el-order__ico2 { height: 76px; }
  .lp-body #electronics .el-order__panel--key .el-order__ico2 img { max-height: 76px; }
}

/* ---- 結論ボックス（.el-worry と同じ橙の枠） ---- */
.lp-body .el-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 .el-order__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 20px; font-weight: 900; line-height: 1.6;
  text-align: center;
}
.lp-body .el-order__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .el-order__note {
  margin: 20px 0 0;
  color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
  text-align: center;
}
/* 追加ブロック（kiriki 由来） B ── 学ぶ範囲の但し書き（振動学は含まれない）  2026-08-26
   ★他14講座に該当なし。kiriki は「機械力学入門講座（振動編）」が別講座として
     存在するため、受講前に範囲の線引きを示しておく必要がある（アース判断 2026-08-26）。
     置き場所は el-order の末尾＝「ここまでが本講座の範囲」と読める位置。 */
.lp-body .el-order__note--scope {
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 10px 18px;
  border: 1px solid var(--lp-accent-line);
  border-radius: 8px;
  background: var(--lp-accent-pale);
  color: #4A5568; font-size: 13px; font-weight: 600; line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .lp-body .el-order__note--scope { padding: 10px 14px; font-size: 12px; text-align: left; }
}
.lp-body .el-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 .el-order__concl-lead { font-size: 18px; }
}
@media screen and (max-width: 900px) {
  /* ★2列にはしない。横矢印と縦矢印が混在して意味が読めなくなるため、
     900px以下は【1列縦積み＋各ステップのあいだを ↓ でつなぐ】に切り替える（§12-8） */
  .lp-body .el-order__title { font-size: 25px; }
  .lp-body .el-order__lead { font-size: 15px; margin-bottom: 26px; }
  .lp-body .el-order__flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .el-order__step { padding: 0 0 40px; }
  /* ★下余白を消すのは【2つめの ol の最後＝06】だけ。
     `:last-child` だけだと 03（1つめの ol の最後）の下余白まで無くなり、
     03→04 の矢印が丸の上に重なって出る（2026-08-16 アース指摘・実測） */
  .lp-body .el-order__flow:last-of-type .el-order__step:last-child { padding-bottom: 0; }
  /* 横矢印 → 下向き矢印に置き換える。
     ★`:nth-child(3n)`（PCで矢印を消していた分）は【content の復活だけ】に留めること。
       位置まで一緒に書くと詳細度が (0,3,1) になり、767px以下の
       `.lp-body .el-order__step::after { left:59px }`（0,2,1）に勝ってしまう。
       その結果 03 と 06 の矢印だけ 14px 右へずれる（2026-08-16 アース指摘・実測）。 */
  .lp-body .el-order__step:nth-child(3n)::after { content: ""; }
  .lp-body .el-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 .el-order__turn { display: none; }
  .lp-body .el-order__flow:last-of-type .el-order__step:last-child::after { content: none; }
  .lp-body .el-order__concl-lead { font-size: 18px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-order { padding: 40px 16px 34px; }
  .lp-body .el-order__title { font-size: 20px; line-height: 1.55; }
  .lp-body .el-order__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .el-order__circle { width: 118px; height: 118px; border-width: 2px; }
  .lp-body .el-order__num { font-size: 22px; }
  .lp-body .el-order__ico { width: 62px; height: 62px; }
  .lp-body .el-order__txt { font-size: 14px; }
  .lp-body .el-order__step::after { left: 59px; }
  .lp-body .el-order__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .el-order__concl-lead { font-size: 16px; }
  .lp-body .el-order__note { font-size: 13px; text-align: left; }
}

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

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

   ★アース判断（2026-08-16）：中央6ステップは【番号＋テキストだけ】。アイコンは作らない。
     番号で順序は十分伝わり、文言の修正も楽なため。画像は左右の2点だけ。
   ★大きな矢印・⚠・?・✓・ステップ間の矢印と丸は、すべてCSS（clip-path / border）。
   ========================================================================= */
.lp-body .el-axis {
  position: relative;
  --el-sec-bg: #FFFFFF;
  padding: 56px 20px 46px;
  background: #FFFFFF;
  overflow: hidden;
}
.lp-body .el-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 .el-axis__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .el-axis__title {
  margin: 0 0 18px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .el-axis__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .el-axis__hl { color: #EF6C19; }
.lp-body .el-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 .el-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 .el-axis__col { min-width: 0; box-sizing: border-box; }
.lp-body .el-axis__col--before,
.lp-body .el-axis__col--after {
  padding: 22px 20px 26px;
  border-radius: 56px;
  text-align: center;
}
.lp-body .el-axis__col--before { background: linear-gradient(180deg, #FFF1E2 0%, #FFF9F3 100%); }
.lp-body .el-axis__col--after  { background: linear-gradient(180deg, #EBF5E9 0%, #F6FBF5 100%); }
.lp-body .el-axis__col-ttl {
  margin: 0 0 14px;
  font-size: 19px; font-weight: 900; line-height: 1.4;
}
.lp-body .el-axis__col--before .el-axis__col-ttl { color: #EF6C19; }
.lp-body .el-axis__col--flow .el-axis__col-ttl { color: #123F6D; }
.lp-body .el-axis__col--after .el-axis__col-ttl { color: var(--lp-accent); }

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

/* ---- 左右の箇条書き ---- */
.lp-body .el-axis__list { margin: 0; padding: 0; list-style: none; text-align: left; }
.lp-body .el-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 .el-axis__item:last-child { margin-bottom: 0; }
.lp-body .el-axis__item::before,
.lp-body .el-axis__item::after { content: none; display: none; }
.lp-body .el-axis__mark {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  margin-top: 1px;
}
/* ⚠ 三角＋! */
.lp-body .el-axis__mark--warn { background: #E8552A; clip-path: polygon(50% 2%, 100% 98%, 0 98%); }
.lp-body .el-axis__mark--warn::before {
  content: "!"; margin-top: 5px; color: #FFFFFF; font-size: 13px; font-weight: 900; line-height: 1;
}
/* ? 丸 */
.lp-body .el-axis__mark--q { background: #F0912F; border-radius: 50%; }
.lp-body .el-axis__mark--q::before {
  content: "?"; color: #FFFFFF; font-size: 14px; font-weight: 900; line-height: 1;
}
/* ✓ 丸（既存 .el-after__ico と同じ描き方） */
.lp-body .el-axis__mark--ok { background: var(--lp-accent); border-radius: 50%; }
.lp-body .el-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 .el-axis__steps { margin: 0; padding: 0; list-style: none; }
.lp-body .el-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 .el-axis__step:last-child { margin-bottom: 0; }
.lp-body .el-axis__no { flex: none; color: #123F6D; font-weight: 900; }
/* ステップ間の丸＋下向き矢印 */
.lp-body .el-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 .el-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 .el-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 .el-axis__bridge--before { background: linear-gradient(90deg, #FBD9B6 0%, #F4A257 100%); }
.lp-body .el-axis__bridge--after  { background: linear-gradient(90deg, #CCE4C7 0%, #86BC7E 100%); }

/* ---- 結論ボックス・次への一文 ---- */
.lp-body .el-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 .el-axis__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 17px; font-weight: 900; line-height: 1.6;
  text-align: center;
}
.lp-body .el-axis__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .el-axis__note {
  margin: 20px 0 0;
  color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
  text-align: center;
}
.lp-body .el-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 .el-axis__title { font-size: 27px; }
  .lp-body .el-axis__lead { font-size: 15px; }
  .lp-body .el-axis__concl-lead { font-size: 16px; }
  .lp-body .el-axis__col--before,
  .lp-body .el-axis__col--after { padding: 20px 14px 22px; border-radius: 40px; }
  .lp-body .el-axis__item { font-size: 13px; }
  .lp-body .el-axis__step { font-size: 13px; padding: 10px 12px; }
}
@media screen and (max-width: 900px) {
  /* ★3列を縦積みにする。横向きの大矢印は下向きに描き替える（§12-8） */
  .lp-body .el-axis__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .el-axis__col--before,
  .lp-body .el-axis__col--after { padding: 24px 20px 26px; border-radius: 32px; }
  .lp-body .el-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 .el-axis__bridge--before { background: linear-gradient(180deg, #FBD9B6 0%, #F4A257 100%); }
  .lp-body .el-axis__bridge--after  { background: linear-gradient(180deg, #CCE4C7 0%, #86BC7E 100%); }
  .lp-body .el-axis__col--flow { padding: 4px 0; }
  .lp-body .el-axis__list { max-width: 420px; margin: 0 auto; }
  .lp-body .el-axis__steps { max-width: 480px; margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-axis { padding: 40px 16px 34px; }
  .lp-body .el-axis__title { font-size: 20px; line-height: 1.55; }
  .lp-body .el-axis__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .el-axis__col-ttl { font-size: 17px; }
  .lp-body .el-axis__fig { height: 120px; }
  .lp-body .el-axis__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .el-axis__concl-lead { font-size: 15px; }
  .lp-body .el-axis__note { font-size: 13px; text-align: left; }
}

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

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

   ★旧 .el-worry__panel / __figcol / __fig / __cap / __list / __item / __check と
     .el-why 一式は machining 化の際に【削除済み】（2026-08-17）。
     上に残っているのは .el-worry 本体・__inner・__eyebrow・__title・__hl だけ。
   ========================================================================= */
.lp-body .el-worry {
  position: relative;
  --el-sec-bg: #E8F4F9;   /* 背景色と必ず同じ値に */
  padding: 56px 20px 52px;
  /* machining のアクセント(#009193)と同系の薄い青緑。zairyou は薄い緑(#EFF4EC)だった */
  background: #E8F4F9;
  overflow: hidden;
}
/* 背景の方眼（製図用紙のイメージ）。中央は mask で抜いて人物を邪魔しない。
   ★歯車・定規・ワイヤーフレームの線画は「絵柄」なので画像側で用意する */
.lp-body .el-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 .el-worry__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .el-worry__lead {
  margin: 0 0 28px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.8;
  text-align: center;
}

/* ---- 中央＝人物、左右＝カード。接続線はSVGを重ねる ---- */
.lp-body .el-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 .el-worry__hero { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: flex; align-items: flex-end; justify-content: center; }
/* ★セレクタに #electronics が要る（2026-08-16 実測）。
   このCSSの上の方に `.lp-body #electronics img { max-width:100% }`（詳細度1,1,0）があり、
   `.lp-body .el-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 #electronics .el-worry__hero img {
  display: block;
  flex: none;
  width: auto; max-width: none;
  height: auto; max-height: 400px;
}
/* 写真が来るまでの仮枠。<img> を入れたら :empty が外れて自動的に消える */
/* ★背景は塗らないこと。接続線が人物の領域を横切る設計なので、
   仮枠に色を敷くと線が見えなくなる（実測 2026-08-14）。枠線だけにする */
.lp-body .el-worry__hero:empty {
  min-height: 380px;
  border: 2px dashed #F08300; border-radius: 12px;
  background: transparent;
  align-items: center;
}
.lp-body .el-worry__hero:empty::before {
  content: "エンジニアの写真 準備中";
  color: #B45900; font-size: 13px; font-weight: 700;
}

.lp-body .el-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 .el-worry__card--start { grid-column: 1; grid-row: 1 / span 2; }
.lp-body .el-worry__card--book  { grid-column: 3; grid-row: 1; }
.lp-body .el-worry__card--work  { grid-column: 3; grid-row: 2; }

/* ★★sheetmetal でも、この下の実測値・例外指定は【zairyou の画像に対するもの】のまま。
   板金用の3枚（キャンバスを3枚とも同一に・660px幅）が届いたら bbox を実測し直し、
   .el-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 .el-worry__ico {
  display: flex; align-items: center; justify-content: center;
  height: 120px; overflow: hidden;
  margin: 0 -22px 12px;   /* ← .el-worry__card の左右パディングと同じ値 */
}
/* セレクタに #electronics が要る理由は .el-worry__hero img のコメント参照 */
.lp-body #electronics .el-worry__ico img {
  display: block; flex: none;
  width: auto; max-width: 100%;
  height: auto; max-height: none;
}
/* 中身が全面の画像（透明余白なし）だけ高さ基準に戻す */
.lp-body #electronics .el-worry__card--start .el-worry__ico img { max-height: 100%; }
/* ★img_zairyou3.png は絵が画像幅の97%を占めるため、カード端まで広げると
   左右のすき間が6pxしか残らず窮屈になる（2026-08-16 アース指摘・実測）。
   負のマージンを -22px → -10px に緩めて、すき間を17pxにした。
   （参考書カードは絵が画像幅の90%なので、-22px のままで16px空いている＝ほぼ同じ）
   ★画像を差し替えたら「絵が画像幅の何%か」を実測して、この値を決め直すこと。 */
.lp-body .el-worry__card--work .el-worry__ico { margin-left: -10px; margin-right: -10px; }
.lp-body .el-worry__ico:empty {
  border: 2px dashed #F08300; border-radius: 10px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .el-worry__ico:empty::before { content: "図版準備中"; color: #B45900; font-size: 12px; font-weight: 700; }

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

/* =========================================================================
   .el-worry を【写真つき3カード】に組み替え  2026-08-20（アース支給モック）
   ─────────────────────────────────────────────────────────────────────────
   もとは zairyou 由来の「中央に人物写真＋まわりに3カード＋接続線SVG」だったが、
   モックに合わせて【横並び3カード（写真／悩み番号／見出し／説明）】にした。
   ★これに伴い次の指定は使わなくなった（本文からも要素ごと削除済み）:
     .el-worry__stage / __hero / __links / __ico / __cat /
     .el-worry__card--start / --book / --work
     仕上げの棚卸しでまとめて削除すること。
   ========================================================================= */
.lp-body .el-worry__cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  /* ★下の結論ボックスとのすき間。0 だとカードの底面と結論の枠線が接触する
     （2026-08-20 アース指摘）。34px は .el-worry__lead の下マージン(28px)より
     わずかに広く取り、「カード群」と「結論」が別のかたまりに見えるようにしている */
  margin: 0 0 34px; padding: 0; list-style: none;
}
.lp-body .el-worry__cards .el-worry__card {
  display: flex; flex-direction: column;
  padding: 14px 14px 26px;
  text-align: center;
}
/* 写真：支給は3枚とも 1200×820（比 1.46・2026-08-20 実測）。
   ★aspect-ratio は 60/41（＝1200/820）にして【切り取りゼロ】にしている。
     3/2 にすると上下が3%欠ける。差し替えるときは実寸を測ってこの比を合わせること。
   ★比の違う画像が混ざっても高さがそろうよう object-fit: cover で受けている。 */
.lp-body .el-worry__ph { margin: 0; }
.lp-body #electronics .el-worry__ph img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 60 / 41;
  object-fit: cover; object-position: center;
  border-radius: 8px;
}
.lp-body .el-worry__ph:empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 60 / 41;
  border: 2px dashed #F08300; border-radius: 8px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .el-worry__ph:empty::before {
  content: "写真 準備中"; color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .el-worry__no {
  align-self: center;
  margin: 18px 0 0; padding: 5px 20px;
  border-radius: 999px;
  background: #EF6C19; color: #FFFFFF;
  font-size: 14px; font-weight: 800; line-height: 1.4;
  white-space: nowrap;
}
.lp-body .el-worry__ttl {
  margin: 14px 0 10px;
  color: #123F6D; font-size: 18px; font-weight: 800; line-height: 1.5;
}
.lp-body .el-worry__cards .el-worry__txt {
  color: #5B6B7F; font-size: 14px; font-weight: 600; line-height: 1.8;
}
@media screen and (max-width: 900px) {
  .lp-body .el-worry__cards { gap: 0 16px; }
  .lp-body .el-worry__ttl { font-size: 16px; }
  .lp-body .el-worry__cards .el-worry__txt { font-size: 13px; }
}
@media screen and (max-width: 767px) {
  /* ★SPは縦積み。3列のままだと写真が110px幅になり、人物の表情が読めない */
  .lp-body .el-worry__cards { grid-template-columns: minmax(0, 1fr); gap: 16px 0; }
  .lp-body .el-worry__ttl { font-size: 17px; }
  .lp-body .el-worry__cards .el-worry__txt { font-size: 14px; }
}

/* ---- 人物とカードを結ぶ線（インラインSVG） ----
   ★viewBox は 1000×520。ステージの実寸と比が違うので preserveAspectRatio="none" で伸ばすが、
     path に vector-effect="non-scaling-stroke" を付けているので線の太さは一定に保たれる。
   ★カードが縦積みになる 900px 以下では線が意味を持たないので消す。 */
.lp-body .el-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 .el-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 .el-worry__concl-lead {
  margin: 0 0 8px;
  color: #123F6D; font-size: 26px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .el-worry__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .el-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 の「結論 → 次へ」の合図（.el-conc__arrow と同じ役割）。 */
.lp-body .el-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 .el-worry__bridge b { color: #EF6C19; font-weight: 900; }
.lp-body .el-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 .el-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 .el-worry__links { display: none; }
  .lp-body .el-worry__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 18px;
  }
  .lp-body .el-worry__hero,
  .lp-body .el-worry__card--start,
  .lp-body .el-worry__card--book,
  .lp-body .el-worry__card--work { grid-column: 1; grid-row: auto; }
  .lp-body .el-worry__hero { order: -1; }
  /* ★縦積みになったら、はみ出しをやめて画面幅に収める。
     max-width:none のままだと 375px 幅で 600px になり横スクロールが出る */
  .lp-body #electronics .el-worry__hero img { max-width: 100%; max-height: 340px; }
  .lp-body .el-worry__concl-lead { font-size: 21px; }
  .lp-body .el-worry__concl-sub { font-size: 15px; }
  .lp-body .el-worry__bridge { font-size: 17px; margin-top: 22px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-worry__lead { font-size: 14px; margin-bottom: 22px; text-align: left; }
  .lp-body .el-worry__card { padding: 18px 18px 20px; border-radius: 14px; }
  /* ★カードのパディングを 22px → 18px に変えたので、アイコンの箱の負のマージンも合わせる。
     -22px のままだと左右に4pxずつはみ出す */
  .lp-body .el-worry__ico { height: 104px; margin: 0 -18px 10px; }
  .lp-body .el-worry__cat { font-size: 15px; }
  .lp-body .el-worry__txt { font-size: 14px; }
  .lp-body .el-worry__hero:empty { min-height: 240px; }
  .lp-body .el-worry__concl { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .lp-body .el-worry__concl-lead { font-size: 18px; }
  .lp-body .el-worry__concl-sub { font-size: 14px; }
  .lp-body .el-worry__concl-chev { transform: rotate(135deg); }
  .lp-body .el-worry__bridge { font-size: 15px; line-height: 1.75; margin-top: 18px; text-align: left; }
  .lp-body .el-worry__bridge-arrow { width: 18px; height: 18px; border-width: 4px; margin-top: 12px; }
}

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

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

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

/* ---- 3ステップの流れ ---- */
.lp-body .el-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 .el-tool__step { display: flex; flex-direction: column; }
.lp-body .el-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 .el-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 .el-tool__fig {
  display: flex; align-items: center; justify-content: center;
  min-height: 210px; margin: 0;
}
.lp-body .el-tool__fig img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 210px;
  margin: 0 auto;
}
/* 図版が入るまでの仮枠。<img> を入れたら :empty が外れて消える */
.lp-body .el-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 .el-tool__fig:empty::before {
  content: "図版準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .el-tool__cap {
  margin: 12px 0 0; color: #3D4A5C; font-size: 14px; font-weight: 700;
  line-height: 1.6; text-align: center;
}
/* 連結部（矢印と「?」）。上下は中央ではなく図版の高さに合わせて少し下げる */
.lp-body .el-tool__conn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  align-self: center; padding-top: 20px;
}
.lp-body .el-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 .el-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 .el-tool__risk { margin: 6px 0 0; }
.lp-body .el-tool__riskttl {
  margin: 0 0 8px;
  color: #123F6D; font-size: 20px; font-weight: 800; line-height: 1.5;
  text-align: center;
}
/* リストは幅いっぱいに広げず、最長の項目に合わせて中央に置く */
.lp-body .el-tool__warns {
  display: table; margin: 0 auto; padding: 0; list-style: none;
}
.lp-body .el-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 .el-tool__warn + .el-tool__warn { border-top: 1px dashed #D5DFE8; }
/* 旧テンプレートの li に付く装飾（中黒など）を消す */
.lp-body .el-tool__warn::before,
.lp-body .el-tool__warn::after { content: none; display: none; }
/* オレンジの三角＋白い「!」 */
.lp-body .el-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 .el-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;
}

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

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

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

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

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

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

   ★虫眼鏡はアース手配の透過PNG（レンズ内側まで完全透明）。
     .el-cat__lens に <img> を入れるだけでよい。空のあいだは仮枠が出る。
   ★モックアップではレンズ内の文字が拡大されているが、CSSでは再現できない
     （表ごと1枚画像にすればできるが、SPで読めず数値も直せなくなる）。
     そのため虫眼鏡は「拡大鏡」ではなく【注目枠】として使い、
     定格3列にオレンジの着色を入れて視線を集めている。
   ★10列の表はSPに入らないので、SPでは横スクロールにし、虫眼鏡は隠す。
   ========================================================================= */
.lp-body .el-cat {
  --el-sec-bg: #EDF4F6;   /* .el-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  background: #EDF4F6;
  box-sizing: border-box;
}
.lp-body .el-cat__inner { width: min(1000px, 100%); margin: 0 auto; }
/* ラベル。中央の文字の左右に短い罫線 */
.lp-body .el-cat__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 10px;
}
.lp-body .el-cat__eyebrow::before,
.lp-body .el-cat__eyebrow::after {
  content: ""; flex: 0 0 auto; width: 40px; height: 2px; background: #17324D;
}
.lp-body .el-cat__eyebrow span {
  color: #17324D; font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: .04em;
}
.lp-body .el-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 .el-cat__hl { color: #EF6C19; }
.lp-body .el-cat__lead {
  margin: 0 0 18px; color: #4A5568; font-size: 16px; font-weight: 500; line-height: 1.8;
  text-align: center;
}
/* ---- 4種モーターの図（旧 .el-easy から移設 2026-08-12） ----
   「種類やメーカーは多くても、原理は共通」の根拠として見せる。
   ここでは主役ではなく橋渡しなので、el-easy 時代の330pxより小さい260pxに抑える */
.lp-body .el-cat__types { margin: 0 0 26px; text-align: center; }
.lp-body .el-cat__types img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 260px;
  margin: 0 auto;
}
.lp-body .el-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 .el-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の余裕ができる（実測）。
   ★虫眼鏡のサイズを変えたら、この値と .el-cat__lens の top の calc の
     両方を同じ数値に直すこと（目安：幅×0.53 −（表の高さ÷2）＋余裕）。 */
.lp-body .el-cat__tablewrap { position: relative; padding-bottom: 92px; }
.lp-body .el-cat__table {
  width: 100%; border-collapse: collapse; margin: 0;
  background: #FFFFFF;
}
.lp-body .el-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 .el-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 .el-cat__table th.is-rated,
.lp-body .el-cat__table tbody td:nth-child(n+5):nth-child(-n+7) {
  background: #FCEBD9;
}
.lp-body .el-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)。
     親の .el-cat__tablewrap に持ち手のための padding-bottom:92px を入れているため、
     50% にすると円の中心が表の中心より46px下へズレる（実測 2026-08-10）。
     この 92px は padding-bottom と必ず同じ値にすること。
   ★幅を変えたら、上の +35 / +40 も同じ比率で計算し直すこと。
   ★実測（幅340px時）：円の中心 = 定格3列の中心と縦横ともに一致（誤差1px）。 */
.lp-body .el-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 .el-cat__lens img { display: block; width: 100%; height: auto; }
.lp-body .el-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 .el-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 .el-cat__notes { margin: 0; padding: 0 0 0 34px; list-style: none; }
.lp-body .el-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 .el-cat__notes li:last-child { margin-bottom: 0; }
.lp-body .el-cat__notes li::before {
  content: ""; position: absolute; left: -34px; top: 50%;
  width: 20px; height: 2px; background: #EF6C19;
}
.lp-body .el-cat__notes li::after {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #EF6C19;
}

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

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

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

/* =========================================================================
   なぜMONO塾なら選定する力が身につくのか（.el-reason）  2026-08-10
   .el-cat の直後（間にあった .el-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-20 背景を白 → 薄青緑 #E8F4F9 に変更。
   .el-ans（予備知識がなくても大丈夫）を削除したことで、
   その上の .el-axis（白）と直に隣り合い、境目が消えていたため（手順書 §13-2 の型：
   「セクションが減ると背景の交互が崩れる。残ったセクションの背景を付け替えて交互を復元する」）。
   切削（machining）の .ma-reason も同じ #E8F4F9。
   並びは 白(need) → #EDF4F6(worry) → #F7FBFD(order) → 白(axis) → #E8F4F9(reason)。 */
.lp-body .el-reason {
  --el-sec-bg: #E8F4F9;   /* .el-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  background: #E8F4F9;
  box-sizing: border-box;
}
.lp-body .el-reason__inner { width: min(1000px, 100%); margin: 0 auto; }
.lp-body .el-reason__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 10px;
}
.lp-body .el-reason__eyebrow::before,
.lp-body .el-reason__eyebrow::after {
  content: ""; flex: 0 0 auto; width: 40px; height: 2px; background: #EF6C19;
}
.lp-body .el-reason__eyebrow span {
  color: #EF6C19; font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: .04em;
}
.lp-body .el-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 .el-reason__hl { color: #EF6C19; }
.lp-body .el-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 .el-reason__item { margin: 0 0 44px; }
.lp-body .el-reason__item + .el-reason__item {
  padding-top: 40px; border-top: 1px solid #DCE8EC;
}
.lp-body .el-reason__item:last-child { margin-bottom: 0; }
/* 「01 ｜ 一連の流れで学ぶ」 */
.lp-body .el-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 .el-reason__no {
  flex: 0 0 auto; position: relative; padding-right: 18px;
  color: #EF6C19; font-size: 40px; font-weight: 900; line-height: 1;
}
/* 番号と見出しのあいだの縦罫 */
.lp-body .el-reason__no::after {
  content: ""; position: absolute; right: 0; top: 2px; bottom: 2px;
  width: 2px; background: #C9D8E4;
}
.lp-body .el-reason__sub {
  margin: 0 0 18px; color: #EF6C19; font-size: 17px; font-weight: 800; line-height: 1.6;
}

/* ---- 本文・図版・ギャラリー  2026-08-20 ----
   切削部品設計入門講座（machining）の .ma-reason__txt / __fig / __gallery 一式を移植。
   このCSSを複製した 2026-08-17 時点の machining にはまだ無かったぶん。
   ★図版は白い器に収める（枠 1px＋角丸12px）。写真は器いっぱいに、
     イラストは contain で余白を残す（--photo が付いた方だけ cover）。 */
.lp-body .el-reason__txt {
  margin: 0 0 18px; color: #3D4A5C; font-size: 16px; font-weight: 600; line-height: 1.9;
}
.lp-body .el-reason__txt:last-child { margin-bottom: 0; }
.lp-body .el-reason__txt b { color: #EF6C19; font-weight: 900; }
.lp-body .el-reason__fig {
  max-width: 740px; margin: 0 auto 18px; padding: 22px 26px;
  background: #FFFFFF; border: 1px solid #DCE8EC; border-radius: 12px;
  box-sizing: border-box; text-align: center;
}
.lp-body #electronics .el-reason__fig img {
  display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto;
  border: 0; border-radius: 0; background: transparent;
}
.lp-body .el-reason__fig-cap {
  margin: 12px 0 0; color: #7A8798; font-size: 13px; font-weight: 600; line-height: 1.6;
}
/* ★列数の経緯（2026-08-26）
   一度2列にしたが、【4列に戻した】（アース判断）。
   このギャラリーの役目は「写真・図解・動画が豊富にある」と一目で伝えることで、
   図の中の文字を読ませることではない、という判断。
   実測値：4列 → 1枚 165〜241px（説明図のラベルは読めない）
           2列 → 1枚 338〜494px（ラベルが読める）
   ★もし「図が潰れて見える」と感じたら、列数を変えるのではなく
     【文字ラベルの少ない図に差し替える】ほうが早い（例：p.23 の金型形状の図）。 */
.lp-body .el-reason__gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 1000px; margin: 0 auto 18px;
}
.lp-body .el-reason__shot {
  margin: 0; padding: 0; background: #FFFFFF; border: 0; border-radius: 10px;
  box-sizing: border-box; aspect-ratio: 5 / 3; overflow: hidden;
}
.lp-body #electronics .el-reason__shot img {
  display: block; width: 100%; height: 100%; max-width: 100%;
  object-fit: contain; margin: 0; border: 0; border-radius: 0; background: transparent;
}
.lp-body .el-reason__shot--photo { background: transparent; }
.lp-body #electronics .el-reason__shot--photo img { object-fit: cover; }
/* 図版・写真が未作成のあいだの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .el-reason__fig:empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  border: 2px dashed #F08300; background: rgba(255, 248, 240, .6);
}
.lp-body .el-reason__fig:empty::before {
  content: "図版準備中"; color: #B45900; font-size: 13px; font-weight: 700;
}
.lp-body .el-reason__shot:empty {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #F08300; background: rgba(255, 248, 240, .6);
}
.lp-body .el-reason__shot:empty::before {
  content: "写真"; color: #B45900; font-size: 12px; font-weight: 700;
}
@media screen and (max-width: 767px) {
  .lp-body .el-reason__txt { font-size: 14px; line-height: 1.85; margin-bottom: 14px; }
  .lp-body .el-reason__fig { margin-bottom: 14px; padding: 12px 12px; border-radius: 10px; }
  .lp-body .el-reason__fig:empty { min-height: 160px; }
  .lp-body .el-reason__fig-cap { font-size: 12px; margin-top: 9px; text-align: left; }
  .lp-body .el-reason__gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
  .lp-body .el-reason__shot { border-radius: 8px; }
}

/* ---- 4ステップの流れ ---- */
/* ★position:relative は .el-flow__fig（モーター＋ボールねじの図）を
   2〜3列目にまたがって重ねるための基準（2026-08-10） */
.lp-body .el-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 .el-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 .el-flow__step::before,
.lp-body .el-flow__step::after { content: none; display: none; }
.lp-body .el-flow__ch {
  display: block; margin: 0 0 4px;
  color: #5A6675; font-size: 13px; font-weight: 700; line-height: 1.3;
}
.lp-body .el-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 .el-flow__list {
  margin: 9px 0 0; padding: 9px 0 0; list-style: none;
  border-top: 1px dashed #C9D8E4;
}
.lp-body .el-flow__list li {
  margin: 0 0 3px; padding: 0;
  color: #5A6675; font-size: 12px; font-weight: 600; line-height: 1.5;
}
.lp-body .el-flow__list li:last-child { margin-bottom: 0; }
.lp-body .el-flow__list li::before,
.lp-body .el-flow__list li::after { content: none; display: none; }
/* 3つ目（負荷計算）＝この講座の中心。オレンジで強調 */
.lp-body .el-flow__step.is-key {
  background: #FFF3E9; border-color: #F2B183;
}
.lp-body .el-flow__step.is-key .el-flow__name { color: #C25A0F; }
.lp-body .el-flow__step.is-key .el-flow__list { border-top-color: #F2B183; }
.lp-body .el-flow__step.is-key .el-flow__list li { color: #B45900; }
/* 4つ目（モーター選定）＝到達点。
   ★ベタ塗り（#17324D）はやめた（アース指摘 2026-08-10）。
     4つの中で1つだけ濃い面になり、薄い色調の並びから浮いていた。
     強調は【枠線の濃さ】で表す。地は他と同系の薄い青にする。 */
.lp-body .el-flow__step.is-goal {
  background: #EAF0F7; border-color: #17324D;
}
.lp-body .el-flow__step.is-goal .el-flow__ch { color: #5A6675; }
.lp-body .el-flow__step.is-goal .el-flow__name { color: #123F6D; }
.lp-body .el-flow__step.is-goal .el-flow__list { border-top-color: #C0CEDC; }
.lp-body .el-flow__step.is-goal .el-flow__list li { color: #5A6675; }
/* ステップの間の矢印 */
.lp-body .el-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 .el-reason__note {
  margin: 14px 0 0; color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.7;
}

/* ---- モーター＋ボールねじの図（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 .el-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 .el-flow__fig img { display: block; width: 100%; height: auto; }
.lp-body .el-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 .el-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 .el-flow-wedge {
  width: 100%; height: 40px; margin: 0;
  background: #F2B183;
  clip-path: polygon(52% 0, 74% 0, 100% 100%, 0 100%);
}

/* ---- 8章で扱う内容（オレンジ枠） ---- */
.lp-body .el-load {
  position: relative; margin: 0; padding: 30px 24px 22px;
  border: 3px solid #EF6C19; border-radius: 14px;
  box-sizing: border-box;
}
/* 枠の上辺に載せる見出し */
.lp-body .el-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 .el-load__cols {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px;
}
/* 左（計算で扱う要素）は2つを縦に積む */
.lp-body .el-load__group--calc .el-load__list { grid-template-columns: minmax(0, 1fr); }
/* 2つのグループの間の仕切り */
.lp-body .el-load__group + .el-load__group {
  padding-left: 24px; border-left: 2px dashed #F2C3A0;
}
/* 左は1行・右は2行になるので、見出しの高さを揃えたうえで
   図のかたまりを上下中央に置く */
.lp-body .el-load__group { display: flex; flex-direction: column; }
.lp-body .el-load__gttl {
  margin: 0 0 12px; color: #123F6D; font-size: 15px; font-weight: 800; line-height: 1.4;
  text-align: center;
}
.lp-body .el-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 .el-load__list li { margin: 0; padding: 0; text-align: center; }
.lp-body .el-load__list li::before,
.lp-body .el-load__list li::after { content: none; display: none; }
/* 高さ86px → 130px（アース指示 2026-08-10）。
   ★.el-load__cols の列配分（1fr:1fr）と .el-load__list の2列がセット。
     どれかを変えると6図の大きさが揃わなくなる。 */
.lp-body .el-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）。
   このファイル内の他の図（.el-easy__fig / .el-tool__fig / .el-ba__fig ほか）は
   すべて width:auto を入れてある。新しく図を追加するときも必ず入れること。 */
.lp-body .el-load__fig img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 130px; margin: 0 auto;
}
.lp-body .el-load__fig:empty {
  border: 2px dashed #F08300; border-radius: 8px; background: rgba(255, 248, 240, .6);
}
.lp-body .el-load__fig:empty::before {
  content: "図"; color: #B45900; font-size: 11px; font-weight: 700;
}
.lp-body .el-load__cap {
  display: block; color: #17233F; font-size: 13px; font-weight: 700; line-height: 1.4;
}

/* ---- 02：事例（.el-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 .el-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 .el-case:last-of-type { margin-bottom: 0; }
.lp-body .el-case__machine { margin: 0; text-align: center; }
/* max-height が実質の大きさを決めている（3枚とも高さ270pxで揃う）。
   横長の1063×880は326×270、縦長の654×880は200×270になる */
.lp-body .el-case__machine img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 270px; margin: 0 auto;
}
/* 装置名は図の真下。カードの左上ではなくここに置くこと（対応関係が読めなくなる） */
.lp-body .el-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の白い縁が出て浮いて見えた（アース指摘）。
   ★カード全体（.el-case）をグレーにしてはいけない。
     左の装置図（img_reason_02_*_1.png）は透過ではなく【白背景】なので、
     カードをグレーにすると今度は装置図の周りに白い四角が出る。
   ★演習画像を差し替えるときは、地の色が #F0F0F0 のままか確認すること。 */
.lp-body .el-case__sheet {
  position: relative; margin: 0; padding: 8px;
  background: #F0F0F0; border: 1px solid #D8E3EC; border-radius: 8px;
}
.lp-body .el-case__sheet img { display: block; width: 100%; height: auto; }
/* 「演習問題」のチップ。枠の左上に載せる */
.lp-body .el-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 .el-case__note {
  margin: 12px 0 0; color: #7A8798; font-size: 12px; font-weight: 600; line-height: 1.6;
  text-align: right;
}

/* ---- 03：Before / After（.el-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 .el-ba {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch; gap: 0;
  margin: 18px 0 0;
}
.lp-body .el-ba__col {
  padding: 18px 20px 20px; border-radius: 14px; box-sizing: border-box;
}
.lp-body .el-ba__col--before { background: #F1F4F7; border: 1px solid #DCE3EA; }
.lp-body .el-ba__col--after { background: #FFF3E9; border: 1px solid #F2B183; }
.lp-body .el-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 .el-ba__col--before .el-ba__label { background: #5A6675; }
.lp-body .el-ba__col--after .el-ba__label { background: #EF6C19; }
/* 高さ190px → 240px（アース指示 2026-08-10）。
   ★カード幅は472pxあるのに図が190pxしかなく、上にも横にも余白が目立っていた。
     詰めるより広げる方向で解決している。 */
/* 吹き出しを上に置いたので、図の余白は下ではなく上に付ける（2026-08-11） */
.lp-body .el-ba__fig {
  display: flex; align-items: flex-end; justify-content: center;
  height: 240px; margin: 20px 0 0;
}
.lp-body .el-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で揃う。
   ★枠の高さ（.el-ba__fig の height）を変えたら、この値も必ず計算し直すこと。
     計算式：After の上限 ＝ 枠の高さ × 0.826
     （0.826 ＝ Before の人物比率 442/540 ÷ After の人物比率 456/460） */
.lp-body .el-ba__col--after .el-ba__fig img { max-height: 198px; }
/* ---- セリフの吹き出し（.el-ba__say）2026-08-11 ----
   ★以前は人物画像の下に ×／✓ の箇条書き（.el-ba__list / .el-ba__mk）を置いていたが、
     人物と文が別々の要素に見えて「この人がそう思っている」という結びつきが伝わらなかった
     （アース指摘）。頭上の吹き出し＋一人称のセリフに変更している。
   ★横並び（人物を左・吹き出しを右）ではなく頭上にしたのは、
     人物イラストを縮めずに済み、PC・SPで同じ組みのまま出せるため。
   ★×／✓ の丸は廃止。セリフに記号は付かないため。
     Before/After の対比はカードの地色（青灰／薄橙）とラベルで取っている。 */
.lp-body .el-ba__say {
  position: relative; margin: 0; padding: 14px 18px;
  background: #FFFFFF; border: 2px solid #C3CCD6; border-radius: 12px;
}
.lp-body .el-ba__col--after .el-ba__say { border-color: #EF6C19; }
.lp-body .el-ba__say p {
  margin: 0 0 8px; padding: 0;
  color: #17233F; font-size: 15px; font-weight: 700; line-height: 1.6;
}
.lp-body .el-ba__say p:last-child { margin-bottom: 0; }
.lp-body .el-ba__say p::before,
.lp-body .el-ba__say p::after { content: none; display: none; }
.lp-body .el-ba__say b { color: #C25A0F; font-weight: 900; }
/* 尻尾。枠色の三角の上に一回り小さい白い三角を重ねて、縁取り付きの三角にしている。
   ★内側(::after)を外側(::before)より小さくしないと縁が出ない。
     幅は11px→9px、高さは14px→12px、位置は3px上。 */
.lp-body .el-ba__say::before,
.lp-body .el-ba__say::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0;
}
.lp-body .el-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 .el-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 .el-ba__col--after .el-ba__say::before { border-top-color: #EF6C19; }
/* 中央の矢印 */
.lp-body .el-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 .el-reason__title { font-size: 26px; }
  .lp-body .el-reason__lead { font-size: 15px; }
  .lp-body .el-reason__h3 { font-size: 21px; gap: 14px; }
  /* Before/After は縦積みにし、矢印を下向きに倒す */
  .lp-body .el-ba { grid-template-columns: minmax(0, 1fr); }
  .lp-body .el-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 .el-ba__fig { height: 150px; margin-top: 16px; }
  .lp-body .el-ba__fig img { max-height: 150px; }
  .lp-body .el-ba__col--after .el-ba__fig img { max-height: 124px; }
  /* 装置図と演習画面は横に並べると演習画面が潰れるので縦積みにする */
  .lp-body .el-case { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-body .el-case__machine img { max-height: 150px; }
  .lp-body .el-reason__no { font-size: 32px; padding-right: 14px; }
  /* 4ステップは横に入らないので2列に折り返す。矢印は消す */
  .lp-body .el-flow { flex-wrap: wrap; gap: 10px; }
  /* 折り返すと列の位置が変わり、図を重ねる前提が崩れる。
     余白を戻し、図はボックスの下に通常配置する */
  .lp-body .el-flow__step { flex: 1 1 44%; padding-bottom: 14px; }
  .lp-body .el-flow__arw { display: none; }
  .lp-body .el-flow__fig {
    position: static; transform: none; width: 100%; margin: 14px 0 0;
  }
  .lp-body .el-flow__fig:empty { height: 110px; }
  /* 上辺の位置も列の並びに合わせられないので、中央から広がる形にする */
  .lp-body .el-flow-wedge { height: 30px; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
  .lp-body .el-load__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* 1カラムになったら、左も2列に戻す（縦に積む意味がなくなるため） */
  .lp-body .el-load__group--calc .el-load__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-body .el-load__group + .el-load__group {
    padding-left: 0; padding-top: 18px; border-left: 0; border-top: 2px dashed #F2C3A0;
  }
}
@media screen and (max-width: 767px) {
  .lp-body .el-reason { padding: 40px 16px 34px; }
  .lp-body .el-reason__eyebrow span { font-size: 14px; }
  .lp-body .el-reason__eyebrow::before,
  .lp-body .el-reason__eyebrow::after { width: 24px; }
  .lp-body .el-reason__title { font-size: 21px; line-height: 1.55; }
  .lp-body .el-reason__lead { font-size: 13px; }
  .lp-body .el-reason__item { margin-bottom: 32px; }
  .lp-body .el-reason__item + .el-reason__item { padding-top: 28px; }
  .lp-body .el-reason__h3 { font-size: 17px; }
  .lp-body .el-reason__no { font-size: 26px; }
  .lp-body .el-reason__sub { font-size: 14px; }
  .lp-body .el-flow__name { font-size: 16px; }
  .lp-body .el-flow__ch { font-size: 11px; }
  .lp-body .el-reason__note { font-size: 13px; }
  .lp-body .el-reason__balloon { font-size: 13px; padding: 11px 14px; }
  .lp-body .el-reason__person { width: 88px; }
  .lp-body .el-load { padding: 26px 14px 18px; }
  .lp-body .el-load__fig { height: 100px; }
  .lp-body .el-load__fig img { max-height: 100px; }
  .lp-body .el-load__cap { font-size: 12px; }
  .lp-body .el-case { padding: 16px; }
  .lp-body .el-case__sheet { padding: 5px; }
  .lp-body .el-case__name { font-size: 14px; }
  .lp-body .el-case__tag { font-size: 11px; padding: 2px 11px; top: -10px; left: 10px; }
  .lp-body .el-ba__col { padding: 14px 14px 16px; }
  .lp-body .el-ba__label { font-size: 13px; padding: 3px 14px; }
  .lp-body .el-ba__fig { height: 120px; margin-top: 14px; }
  .lp-body .el-ba__fig img { max-height: 120px; }
  .lp-body .el-ba__col--after .el-ba__fig img { max-height: 99px; }
  .lp-body .el-ba__say { padding: 11px 14px; }
  .lp-body .el-ba__say p { font-size: 13px; }
}

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

   ★このセクションの役割は【対象読者を広げること】。
     Q1＝初心者の不安を消す ／ Q2＝「自分の担当ではない」と思っている人を引き込む
     旧LPの「電気技術者はモーターの選定や制御はできるが、機械部品は設計できない」を
     「動かすのは電気でも、決めるのは機械設計」と言い換えている。
   ★旧LPのQ1にあった「先輩に断られる」「カタログが分からない」等は削除した。
     冒頭の悩みセクションと重複しており、ネガティブな記述が二重になるため。
     残したのは「事前に学んでおくべき知識はありません」の一点だけ。
   ★モーター＋ボールねじの図は使わない（.el-reason の01で使用済み）。
     代わりに左右2列の対比にして、担当領域を項目名で具体的に示している。
   ========================================================================= */
.lp-body .el-ans {
  --el-sec-bg: #EDF4F6;   /* .el-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  background: #EDF4F6;
  box-sizing: border-box;
}
.lp-body .el-ans__inner { width: min(1000px, 100%); margin: 0 auto; }
/* =========================================================================
   .el-ans 全面刷新（2026-08-16 アース支給のモックに合わせる）
   ─────────────────────────────────────────────────────────────────────────
   構成：見出し → リード2行 → 【Q&A 3組の白パネル（左にアイコン）】
         → 緑の結論バンド → 下向き矢印
   ★アイコン3点だけ画像（アース手配）。Q/Aのバッジ・✓・オレンジのピルはCSS。
   ★旧 .el-qa / .el-side 一式は machining 化の際に【削除済み】（2026-08-17）。
   ========================================================================= */
.lp-body .el-ans {
  position: relative;
  --el-sec-bg: #E8F4F9;
  padding: 56px 20px 46px;
  /* ★上の .el-axis が白なので、ここは薄い青緑にして境目を作る。
     近い色にするとRGB差が10未満になり境目が消える（§12-3） */
  background: #E8F4F9;
  overflow: hidden;
}
.lp-body .el-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 .el-ans__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .el-ans__hl { color: #EF6C19; }
.lp-body .el-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 .el-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 .el-ans__row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 26px 0;
}
.lp-body .el-ans__row + .el-ans__row { border-top: 1px solid #E6ECE0; }
/* 丸いイラスト枠。空のあいだは仮枠が出て、<img> を入れると自動で消える */
.lp-body .el-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 #electronics .el-ans__ico img {
  display: block; flex: none;
  width: auto; max-width: 100%;
  height: auto; max-height: 100%;
}
.lp-body .el-ans__ico:empty { border: 2px dashed #F08300; }
.lp-body .el-ans__ico:empty::before { content: "図版"; color: #B45900; font-size: 12px; font-weight: 700; }

.lp-body .el-ans__body { min-width: 0; }
.lp-body .el-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 .el-ans__badge--q { background: #1B3A6B; }
.lp-body .el-ans__badge--a { background: var(--lp-accent); }
.lp-body .el-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 .el-ans__a { display: flex; align-items: flex-start; gap: 14px; }
.lp-body .el-ans__a p {
  margin: 4px 0 0;
  color: #2D344B; font-size: 15px; font-weight: 600; line-height: 1.85;
}
.lp-body .el-ans__a b { color: var(--lp-accent); font-weight: 800; }

/* ---- 緑の結論バンド ---- */
.lp-body .el-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 .el-ans__check {
  position: relative; flex: none;
  width: 32px; height: 32px;
  border: 2px solid #FFFFFF; border-radius: 50%;
}
.lp-body .el-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 .el-ans__pill {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 14px;
  background: #EF6C19; border-radius: 999px;
  color: #FFFFFF; font-weight: 900;
}
.lp-body .el-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 .el-ans__lead { font-size: 15px; }
  .lp-body .el-ans__panel { padding: 4px 20px; }
  .lp-body .el-ans__row { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
  .lp-body .el-ans__ico { width: 88px; height: 88px; }
  .lp-body .el-ans__q { font-size: 18px; }
  .lp-body .el-ans__concl { font-size: 16px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-ans { padding: 40px 16px 34px; }
  .lp-body .el-ans__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  .lp-body .el-ans__panel { padding: 4px 16px; border-radius: 14px; }
  /* ★横並びをやめてアイコンを上に置く。88pxの列を残すと本文が240px未満になり、
     見出しが4行以上に折れて読みにくくなる（375px幅） */
  .lp-body .el-ans__row { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; }
  .lp-body .el-ans__ico { width: 76px; height: 76px; }
  .lp-body .el-ans__body { width: 100%; }
  .lp-body .el-ans__badge { width: 28px; height: 28px; font-size: 15px; }
  .lp-body .el-ans__q { font-size: 16px; gap: 10px; margin-bottom: 12px; }
  .lp-body .el-ans__a { gap: 10px; }
  .lp-body .el-ans__a p { font-size: 14px; }
  .lp-body .el-ans__concl { gap: 12px; padding: 16px; font-size: 14px; border-radius: 8px; }
  .lp-body .el-ans__check { width: 26px; height: 26px; }
  .lp-body .el-ans__check::before { width: 7px; height: 12px; margin: -8px 0 0 -3px; border-width: 2.5px; }
}

/* ★2026-08-13 アース指示：小さい文字のラベルをやめ、横線にする（el-worry と同じ） */
.lp-body .el-ans__eyebrow { display: none; }
.lp-body .el-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 .el-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 .el-ans__title { font-size: 25px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-ans { padding: 40px 16px 34px; }
  .lp-body .el-ans__eyebrow { font-size: 13px; }
  .lp-body .el-ans__title { font-size: 20px; line-height: 1.55; margin-bottom: 22px; }
}

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

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

   ★イラストは .el-scope__fig の中に <img> を入れるだけ。
     空のあいだは :empty で破線の仮枠が出て、<img> を入れると自動的に消える。
   ========================================================================= */
.lp-body .el-scope {
  width: 100%;
  padding: 56px 20px 48px;
  /* 上の .el-worry が #EDF4F6 なので、こちらは白にして切れ目をつくる */
  background: #FFFFFF;
  box-sizing: border-box;
}
.lp-body .el-scope__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
.lp-body .el-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 .el-scope__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 18px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .el-scope__hl { color: #EF6C19; }
.lp-body .el-scope__lead {
  margin: 0 0 22px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.8;
}
.lp-body .el-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 .el-scope__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  /* 項目間の矢印を置くぶんの隙間。gap を詰めると矢印がカードに重なる。
     ★この 26px は下の .el-scope__arrows でも同じ値を使っている。
       矢印をカードの真下に揃えるため、変えるときは必ず両方直すこと */
  gap: 0 26px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .el-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 .el-scope__item::before,
.lp-body .el-scope__item::after { content: none; display: none; }

/* 項目間のオレンジの矢印。最後の項目には出さない */
.lp-body .el-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 .el-scope__item:last-child .el-scope__arw { display: none; }

/* 見出し行「01 検知する」 */
.lp-body .el-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 .el-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 .el-scope__fig {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 110px; margin: 0 0 12px;
}
.lp-body .el-scope__fig img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 110px;
}
/* イラスト未作成のあいだの仮枠。<img> を入れたら :empty が外れて消える */
.lp-body .el-scope__fig:empty {
  border: 2px dashed #F08300;
  border-radius: 10px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .el-scope__fig:empty::before {
  content: "イラスト準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}
/* 部品名のチップ */
.lp-body .el-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つの要素の到達点なので、.el-solve の05と同じ考え方でオレンジにする
   （アース指示 2026-08-06） */
.lp-body .el-scope__item--goal { border: 2px solid #EF6C19; }
.lp-body .el-scope__item--goal .el-scope__no b { background: #EF6C19; }
.lp-body .el-scope__item--goal .el-scope__cap { background: #FFF1E6; color: #C25A00; }

/* ---- 人体にたとえる解説（.el-scope__analogy） ----
   4枚のカードの下。左に講義資料の図、右に対応表。
   ★左の図（img_08.png 980×586）は既存アップロード済みの資料をそのまま使う。
     白背景の不透明PNGなので、枠の背景も白にして境目が出ないようにしている。 */
.lp-body .el-scope__flowttl {
  margin: 28px 0 16px; color: #17324D; font-size: 17px; font-weight: 800; line-height: 1.5;
}
.lp-body .el-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 .el-scope__shot { position: relative; margin: 0; }
.lp-body .el-scope__shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid #DCE8EC; border-radius: 10px;
}
/* 図の左上に重ねる「実際の講義資料」ラベル */
.lp-body .el-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 .el-scope__ana-ttl {
  margin: 0 0 16px; color: #17324D; font-size: 24px; font-weight: 900; line-height: 1.45;
}
/* 対応表。左が用語、右が人体のたとえ */
.lp-body .el-scope__map { margin: 0 0 16px; padding: 0; list-style: none; }
.lp-body .el-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 .el-scope__map li:last-child { margin-bottom: 0; }
.lp-body .el-scope__map li::before,
.lp-body .el-scope__map li::after { content: none; display: none; }
/* 行頭の丸。4行目（メカニクス）だけオレンジにしてカード04と対応させる */
.lp-body .el-scope__dot {
  width: 11px; height: 11px; border-radius: 50%; background: #2E9CC0;
}
.lp-body .el-scope__map li:last-child .el-scope__dot { background: #EF6C19; }
.lp-body .el-scope__eq { color: #9AA7B5; font-weight: 700; text-align: center; }
.lp-body .el-scope__body-part { color: #4A5568; font-weight: 600; }
/* 「初心者でも役割と関係を直感的に理解」の帯 */
.lp-body .el-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 .el-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本ずつ出す形に変更した。
   ★列の作りは .el-scope__list と完全に同じにすること（4列・gap 26px）。
     そろえておくと矢印が各カードの中心に自動で並ぶ。
   ★矢印は画像ではなく clip-path で描いている。
     polygon は「軸の左上→軸の右上→軸の右下→傘の右→先端→傘の左→軸の左下」の順。
     太さを変えるなら 34%/66%（軸の幅）と 52%（傘の位置）を触る。 */
.lp-body .el-scope__arrows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 26px;
  margin: 18px 0 20px;
}
.lp-body .el-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 .el-scope__concl {
  display: flex; align-items: center; gap: 24px;
  margin: 0; padding: 22px 28px 22px 24px;
  background: #EAF2F8; border-left: 6px solid #EF6C19;
  border-radius: 10px; text-align: left;
}
/* 左の丸アイコン（白い角丸の中に図を置く） */
.lp-body .el-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 .el-scope__concl-ico svg,
.lp-body .el-scope__concl-ico img { display: block; width: 56px; height: 56px; }
.lp-body .el-scope__concl-main { flex: 0 0 auto; }
.lp-body .el-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 .el-scope__concl-lead {
  margin: 0; color: #17324D; font-size: 26px; font-weight: 900; line-height: 1.4;
  letter-spacing: .01em;
}
.lp-body .el-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 .el-scope__concl-u {
  border-bottom: 2px solid #EF6C19; padding-bottom: 2px;
}

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

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

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

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

/* ---- 題材カード（左＝図版／右＝説明） ---- */
.lp-body .el-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 .el-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 .el-solve__fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: 300px; }
/* 図版が未作成のあいだの仮枠。<img> を入れたら :empty が外れて消える */
.lp-body .el-solve__fig:empty {
  border: 2px dashed #F08300;
  background-color: rgba(255, 248, 240, .6);
}
.lp-body .el-solve__fig:empty::before {
  content: "リフターの図版が入ります";
  color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .el-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 .el-solve__name {
  margin: 0 0 12px; color: #17324D; font-size: 26px; font-weight: 900; line-height: 1.4;
}
.lp-body .el-solve__desc {
  margin: 0 0 16px; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.9;
}
.lp-body .el-solve__chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.lp-body .el-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 .el-solve__chips li::before,
.lp-body .el-solve__chips li::after { content: none; display: none; }

/* ---- 5ステップ ---- */
.lp-body .el-solve__flowttl {
  margin: 0 0 16px; color: #17324D; font-size: 17px; font-weight: 800; line-height: 1.5;
}
.lp-body .el-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 .el-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 .el-solve__step::before,
.lp-body .el-solve__step::after { content: none; display: none; }
/* 最後の「仕様を共有する」だけオレンジで強調（ゴールだから） */
.lp-body .el-solve__step--goal { border: 2px solid #EF6C19; }
.lp-body .el-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 .el-solve__step--goal .el-solve__no { background: #EF6C19; }
.lp-body .el-solve__stt {
  margin: 0 0 10px; color: #17324D; font-size: 15px; font-weight: 800; line-height: 1.5;
}
.lp-body .el-solve__sdd {
  margin: auto 0 0; color: #5B6B7F; font-size: 12px; font-weight: 500; line-height: 1.7;
}
/* ステップ間の矢印。最後には出さない */
.lp-body .el-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 .el-solve__step:last-child .el-solve__arw { display: none; }

/* ---- 講義内容の紹介（.el-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 .el-solve__lecttl {
  margin: 36px 0 6px;
  color: #123F6D; font-size: 22px; font-weight: 900; line-height: 1.5;
}
.lp-body .el-solve__leclead {
  margin: 0 0 18px; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.8;
}
.lp-body .el-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 .el-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 .el-solve__lecbadge--01 { background: #FFE6CF; color: #C25A00; }
.lp-body .el-solve__lecbadge--02 { background: #DCEBF7; color: #1B5E8C; }
.lp-body .el-solve__lec img {
  display: block; width: min(880px, 100%); height: auto; margin: 0 auto;
}

/* ---- （旧）学び方の違い。2026-08-06 に講義内容の紹介へ差し替えたため未使用 ---- */
.lp-body .el-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 .el-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 .el-solve__cmp-col { padding: 20px 22px; }
/* 本講座のほうだけ淡いオレンジにして差を見せる */
.lp-body .el-solve__cmp-col--ours { background: #FFF6EF; }
.lp-body .el-solve__cmp-ttl {
  margin: 0 0 8px; color: #5B6B7F; font-size: 14px; font-weight: 800; line-height: 1.5;
}
.lp-body .el-solve__cmp-col--ours .el-solve__cmp-ttl { color: #C25A00; }
.lp-body .el-solve__cmp-txt {
  margin: 0; color: #17324D; font-size: 13px; font-weight: 500; line-height: 1.9;
}
/* ---- 締めの1行 ---- */
.lp-body .el-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 .el-solve__title { font-size: 26px; }
  /* 題材カードは縦積み */
  .lp-body .el-solve__hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* 5列は狭すぎるので3列。3の倍数の位置で矢印を消す */
  .lp-body .el-solve__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .lp-body .el-solve__step:nth-child(3n) .el-solve__arw { display: none; }
  /* 比較表は見出しを上に出して2列 */
  .lp-body .el-solve__cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-body .el-solve__cmp-h { grid-column: 1 / -1; padding: 12px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-solve { padding: 40px 16px 34px; }
  .lp-body .el-solve__title { font-size: 21px; line-height: 1.55; }
  .lp-body .el-solve__lead { font-size: 14px; margin-bottom: 20px; }
  .lp-body .el-solve__hero { padding: 18px; margin-bottom: 24px; }
  .lp-body .el-solve__fig { min-height: 170px; }
  .lp-body .el-solve__fig img { max-height: 220px; }
  .lp-body .el-solve__name { font-size: 20px; }
  .lp-body .el-solve__desc { font-size: 13px; line-height: 1.8; }
  /* SPは2列。偶数番の矢印を消す */
  .lp-body .el-solve__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .lp-body .el-solve__step:nth-child(3n) .el-solve__arw { display: block; }
  .lp-body .el-solve__step:nth-child(2n) .el-solve__arw { display: none; }
  .lp-body .el-solve__stt { font-size: 13px; }
  .lp-body .el-solve__sdd { font-size: 11px; }
  .lp-body .el-solve__cmp { grid-template-columns: minmax(0, 1fr); }
  .lp-body .el-solve__cmp-col { padding: 16px 16px; }
  .lp-body .el-solve__concl { font-size: 13px; margin-top: 20px; }
  .lp-body .el-solve__lecttl { font-size: 17px; margin-top: 26px; }
  .lp-body .el-solve__leclead { font-size: 12px; margin-bottom: 14px; }
  .lp-body .el-solve__lec { padding: 14px; }
  .lp-body .el-solve__lecbadge { font-size: 11px; padding: 5px 14px; margin-bottom: 12px; }
}

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

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

   ★チェックアイコンは画像ではなくCSSで描いている。
     丸＝background、レ点＝border-right/bottom を45度回したもの。
     色を変えるなら .el-after__ico の background 1か所でよい。
   ========================================================================= */
.lp-body .el-after {
  width: 100%;
  padding: 56px 0 0;
  background: #FFFFFF;
  box-sizing: border-box;
}
.lp-body .el-after__head {
  width: min(960px, 100%); margin: 0 auto; padding: 0 20px 32px;
  box-sizing: border-box; text-align: center;
}
.lp-body .el-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 .el-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 .el-after__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 18px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .el-after__lead {
  margin: 0; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.8;
}
/* カードを載せる淡いオレンジの帯。section が全幅なのでそのまま背景色を敷ける */
.lp-body .el-after__band {
  width: 100%; padding: 40px 20px 34px;
  background: #FFF6EF;
  box-sizing: border-box;
}
.lp-body .el-after__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
.lp-body .el-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 .el-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 .el-after__card::before,
.lp-body .el-after__card::after { content: none; display: none; }
/* オレンジの丸＋白いレ点 */
.lp-body .el-after__ico {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; margin: 0 0 16px;
  background: #EF6C19; border-radius: 50%;
}
.lp-body .el-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 .el-after__ttl {
  margin: 0 0 12px; color: #17324D; font-size: 16px; font-weight: 800; line-height: 1.55;
}
.lp-body .el-after__dd {
  margin: auto 0 0; color: #5B6B7F; font-size: 12px; font-weight: 500; line-height: 1.7;
}
.lp-body .el-after__foot {
  margin: 0; color: #17324D; font-size: 14px; font-weight: 700; line-height: 1.7;
}

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

/* =========================================================================
   監修・制作体制（.el-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 .el-super {
  width: 100%;
  padding: 56px 20px 56px;
  /* 直後のカリキュラム（白地）と地色が近く境目が曖昧になるため、
     下に50pxの白い余白を空けて切り離す */
  margin: 0 0 50px;
  background: #EAEFF5;
  box-sizing: border-box;
}
.lp-body .el-super__inner { width: min(1000px, 100%); margin: 0 auto; text-align: center; }
.lp-body .el-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 .el-super__eyebrow::before,
.lp-body .el-super__eyebrow::after {
  content: ""; display: inline-block; width: 26px; height: 2px; background: #EF6C19;
}
.lp-body .el-super__title {
  margin: 0 0 10px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.45; letter-spacing: .01em;
}
.lp-body .el-super__hl { color: #EF6C19; }
.lp-body .el-super__lead {
  margin: 0 0 30px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.8;
}
/* ---- 白いカード（左に青の縦アクセント） ---- */
.lp-body .el-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 .el-super__profile {
  padding: 18px 18px 18px;
  background: #F4F7FA; border-radius: 6px; text-align: center;
}
.lp-body .el-super__photo {
  position: relative; margin: 0;
  border-radius: 6px; overflow: visible;
}
.lp-body .el-super__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 300 / 148;
  object-fit: cover; border-radius: 6px;
}
.lp-body .el-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 .el-super__org {
  margin: 30px 0 2px; color: #5A6675; font-size: 13px; font-weight: 700; line-height: 1.5;
}
.lp-body .el-super__name {
  margin: 0 0 6px; color: #123F6D; font-size: 18px; font-weight: 800; line-height: 1.5;
}
.lp-body .el-super__role {
  margin: 0; color: #5A6675; font-size: 12px; font-weight: 600; line-height: 1.7;
}
/* ---- 右：本文 ---- */
.lp-body .el-super__label {
  margin: 0 0 8px; color: #1F6FA5; font-size: 13px; font-weight: 800; letter-spacing: .04em;
}
.lp-body .el-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 .el-super__h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 4px; background: #EF6C19; border-radius: 2px;
}
.lp-body .el-super__text {
  margin: 0 0 22px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.9;
}
/* ---- 右下：3つの小カード ---- */
.lp-body .el-super__points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .el-super__point {
  margin: 0; padding: 15px 12px 13px;
  background: #F2F6FA; border-radius: 6px;
}
.lp-body .el-super__point::before,
.lp-body .el-super__point::after { content: none; display: none; }
.lp-body .el-super__point--accent { background: #FEF4EA; }
.lp-body .el-super__ph { display: flex; align-items: center; gap: 8px; }
.lp-body .el-super__ico {
  flex: 0 0 auto; display: block; width: 24px; height: 24px; color: #1F6FA5;
}
.lp-body .el-super__point--accent .el-super__ico { color: #EF6C19; }
/* ★ 3列に収まる文字量が限界。13px を上げると <br> の行が1文字はみ出して割れる */
.lp-body .el-super__pt {
  margin: 0; color: #123F6D; font-size: 13px; font-weight: 800; line-height: 1.45;
}
.lp-body .el-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 .el-super__card { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lp-body .el-super__profile { width: min(340px, 100%); margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-super { padding: 40px 16px 40px; }
  .lp-body .el-super__title { font-size: 21px; line-height: 1.55; }
  .lp-body .el-super__lead { font-size: 14px; margin-bottom: 22px; }
  .lp-body .el-super__card { padding: 22px 18px; }
  .lp-body .el-super__h3 { font-size: 20px; }
  .lp-body .el-super__text { font-size: 14px; }
  .lp-body .el-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 #electronics .lp-mv .lp-mv__sub {
  font-size: clamp(21px, 3vw, 42px);
}

/* =========================================================================
   ファーストビュー（.el-hero）  2026-08-06
   -------------------------------------------------------------
   旧FVは文字を焼き込んだ1枚画像（img_mv.jpg 998×688）だった。
   拡大でぼやける・文言修正のたびに画像を作り直す・講座名が焼き込まれていて
   直下の .lp-mv と二重になる、という問題があったためテキスト化した。
   移植元: lp_yoso.css L5581〜5779（.yo-hero）。変更したのは次の2点だけ。
     ・クラス名 yo-hero → el-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。
   ★右の写真は準備中（アース手配）。用意でき次第 .el-hero__photo の中の
     .el-hero__ph（破線の仮枠）を <img class="el-hero__img"> に差し替える。
     仮枠は :empty ではなく実体クラスなので、img を入れたら手で消すこと。
   ========================================================================= */
/* ★背景（2026-08-06 アース指示で全面変更）
   旧：即戦力LPの写真 bg_mv.jpg（歯車・ベアリング）＋白いグラデーションの覆い。
   新：写真をやめ、白→ごく薄い青緑の3段グラデーションにした。
       左 #FFFFFF（コピーを読みやすく）／中央 #F4F9FA（自然につなぐ）／
       右 #E8F4F6。
   ※ 歯車・ベアリングの写真はメカトロの題材（リフター・コンベヤ）と
     合わないため削除した。bg_mv.jpg 自体は即戦力LPが使っているので消さないこと。 */
.lp-body .el-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --el-pad: 20px;
  background: linear-gradient(90deg, #FFFFFF 0%, #F4F9FA 50%, #E8F4F6 100%);
}
/* 製品の後ろにだけ入れる薄いグリッド（方眼）。
   ★左のコピーに掛かるとノイズになるので、マスクで右半分だけに出している。
     45%まで完全に透明→62%で不透明、という段階で自然に現れる。
   ★z-index:0。テキストと画像は .el-hero__inner（z-index:1）なので上に乗る。
   ★線を濃くしたいときは rgba の .07 を上げる。マス目の大きさは 28px の方。 */
.lp-body .el-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 .el-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バッジ（.el-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(--el-pad);
  box-sizing: border-box;
}
.lp-body .el-hero__text { align-self: center; padding: 24px 0 40px; }

/* ---- 左：テキスト ---- */
/* ★バッジは紺（見出し本体と同色）。オレンジにしないこと。
   オレンジは見出しの強調語（.el-hero__hl）に使っており、
   バッジまでオレンジにすると強調が3か所に散って見出しが目立たなくなる
   （アース指示 2026-08-09。メカトロ編はオレンジのままなので注意） */
.lp-body .el-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 .el-hero__title {
  /* 下余白でキャッチコピー群（バッジ＋見出し）と補足群（説明＋3項目）を離す。
     .el-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 .el-hero__hl { color: #EF6C19; }
.lp-body .el-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 アース支給のモック ----
   ★グリッドの列を増やさず【.el-hero__inner に対する絶対配置】で置いている。
     理由：左のテキスト列（1fr＝約611px）にも右の写真列（31%）にも収まらず、
     列を触ると見出し45pxが折り返す／写真の大きさが変わる、という副作用が出るため。
     .el-hero__inner は position:relative、写真は z-index:1 なので z-index:3 で前に出す。
   ★色帯だけ講座の3分類で変え、見出しの文字色は3枚とも紺で揃えている
     （モックはプラスチックだけ青字だが、1枚だけ色が違うと不揃いに見えるため）。 */
.lp-body .el-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 .el-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 .el-hero__card::before,
.lp-body .el-hero__card::after { content: none; display: none; }
.lp-body .el-hero__card-bar {
  display: block; width: 40px; height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #7A8794;   /* 既定＝静力学のグレー */
}
/* 2026-08-26 kiriki: 修飾クラスを機械力学の3分野に付け替えた
   （sheetmetal は --bend / --join ＝ 曲げ・展開／接合・仕上げだった）。
   色は据え置き。カードの並び順は 静力学 → 運動学 → 動力学 */
.lp-body .el-hero__card--kinematics .el-hero__card-bar { background: #EF6C19; }
.lp-body .el-hero__card--kinetics   .el-hero__card-bar { background: #2E6FB0; }
.lp-body .el-hero__card-ttl {
  margin: 0 0 4px;
  color: #123F6D; font-size: 17px; font-weight: 800; line-height: 1.4;
}
.lp-body .el-hero__card-sub {
  margin: 0;
  color: #5B6B7F; font-size: 13px; font-weight: 600; line-height: 1.5;
}

/* ---- 電動ドライバーから3カードへの引き出し線（2026-08-16 アース指示） ----
   ★線は【画像に接続しない】。接続すると、その1点が指し示す部品と受け取られてしまい、
     実際の部位とずれて見えるため（アース指摘）。シルエットの下端から14px以上離して描き始める。
   ★viewBox は .el-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 .el-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 .el-hero__points {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 10px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .el-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 .el-hero__point:not(:last-child) {
  padding-right: 10px; border-right: 1px solid #D3D6DA;
}
.lp-body .el-hero__icon {
  flex: 0 0 auto; width: 22px; height: 22px; display: block;
}

/* ---- 右：写真スロット ---- */
.lp-body .el-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 .el-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;
}
.lp-body .el-hero__photo:empty::before {
  content: "ヒーロー画像 準備中";
  color: #B45900;
  font-size: 13px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .lp-body .el-hero__photo:empty { min-height: 200px; }
}
/* ★★高さの指定に % を使わないこと。
   グリッドの行の高さが確定しないため height:100% が解決できず、
   画像本来の比率で高さが決まって枠からはみ出す（yoso で実際に起きた）。
   そのため max-height を px で指定している。
   ヒーローの min-height 500px の90%＝450px。 */
.lp-body .el-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-20 sheetmetal: ヒーロー画像は【透過ではなく、うすいグレーのスタジオ背景つき】。
   そのままだと四角い箱が地色から浮いて見える（実測：画像の縁 RGB(236,238,242) に対し
   ヒーローの地色は #E8F4F6。色差はわずかだが、灰紫と青緑で色みが違うため境目が見える）。
   → multiply で地色に溶かす。画像の背景は 235〜247 とほぼ白なので、
     掛け合わせても金属部の明度はほとんど落ちない（実測 約5%）。影もそのまま活きる。
   ★ヒーローの地色を濃い色に変えるときは、この指定を外して【透過画像】に差し替えること。
   ★透過PNGを支給された場合も、この指定は外してよい（付けたままでも実害はない）。

   ★左端のフェード（2026-08-20 アース指示）
     画像が見出しへ寄り添うように、左端だけマスクで消していく。
     8% の根拠（実測）：部品は画像の左 4.0% から始まる（展開図の取付タブ）。
       4%  … 余白だけが消える。効果がほとんど見えない
       5%  … タブは無傷。ごく控えめ
       8%  … タブの先端がわずかに薄くなるが、溶けていく感じが出る。採用
       12% … タブがはっきり薄くなり、部品が欠けて見える。行きすぎ
     ★画像を差し替えたら、部品までの左余白を測り直してこの値を決めること。 */
.lp-body .el-hero__img {
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%);
}

/* 重なりの前後関係。テキストが必ず画像の上に来るようにする。
   ★両方とも同じ .el-hero__inner（z-index:1）の子で position が付いていないと
     「後ろに書いた figure が上に乗る」ため、指定しないと画像がコピーを隠す。 */
.lp-body .el-hero__text { position: relative; z-index: 2; }
/* 写真が入るまでの仮枠。<img> に差し替えたらこの要素ごと削除する */
.lp-body .el-hero__photo .el-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 .el-hero { --el-pad: 18px; }
  .lp-body .el-hero__inner { grid-template-columns: minmax(0, 1fr) 31%; gap: 20px; }
  .lp-body .el-hero__text { padding: 34px 0 30px; }
  .lp-body .el-hero__title { font-size: 34px; }
  .lp-body .el-hero__note { font-size: 15px; margin-bottom: 20px; }
  /* ★絶対配置をやめて、リード文の下へ通常のフローで置く。
     960px以下は見出しも写真も縮むので、右下に重ねると写真とカードが競合する */
  .lp-body .el-hero__cards {
    position: static; width: auto; margin-top: 4px;
    grid-column: 1 / -1;
  }
  .lp-body .el-hero__note { max-width: none; }
  /* カードが通常フローへ回るので、引き出し線は意味を失う */
  .lp-body .el-hero__leads { display: none; }
  .lp-body .el-hero__points { gap: 0 8px; }
  .lp-body .el-hero__point { font-size: 13px; }
  .lp-body .el-hero__point:not(:last-child) { padding-right: 8px; }
  .lp-body .el-hero__icon { width: 20px; height: 20px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-hero { --el-pad: 16px; }
  .lp-body .el-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-body .el-hero__text { align-self: auto; padding: 24px 0 0; }
  .lp-body .el-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 .el-hero__title { font-size: clamp(18px, 5.2vw, 24px); margin-bottom: 16px; }
  .lp-body .el-hero__note { font-size: 14px; margin-bottom: 18px; }
  .lp-body .el-hero__cards { gap: 8px; }
  .lp-body .el-hero__card { padding: 10px 6px 12px; border-radius: 8px; }
  .lp-body .el-hero__card-bar { width: 28px; height: 3px; margin-bottom: 7px; }
  .lp-body .el-hero__card-ttl { font-size: 14px; }
  .lp-body .el-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 .el-hero__points { flex-wrap: wrap; gap: 9px 16px; }
  .lp-body .el-hero__point { font-size: 13px; gap: 7px; }
  .lp-body .el-hero__icon { width: 22px; height: 22px; }
  /* SPでは3項目が折り返すため、行末に縦罫が残って不自然になる。区切り線は消す */
  .lp-body .el-hero__point:not(:last-child) { padding-right: 0; border-right: 0; }
  .lp-body .el-hero__photo { margin: 0 calc(-1 * var(--el-pad)); overflow: visible; text-align: center; }
  .lp-body .el-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;
    /* ★左端フェードもPC専用。SPは画像が中央に来るので、片側だけ薄いと不自然になる。
       multiply（背景を地色に溶かす指定）はSPでも効かせたままにする */
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* SPは画像が下段に回るので、グリッドを右半分に出す意味がない。
     画面全体に薄く敷いて、下端へ向かって消す */
  .lp-body .el-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 .el-hero__photo .el-hero__ph { min-height: 200px; }
}

/* ==========================================================================
   ※ かつてここに「第9章（演習）の暫定スタイル」があった（2026-08-09〜08-10）
   --------------------------------------------------------------------------
   第9章だけアコーディオンに入れず旧デザインのまま表示していた期間、
   style_motor.css から #electronics .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）から
     #electronics .box_curriculum を含むルールを再度移植すること。
   ========================================================================== */

/* =========================================================================
   追加ブロック（kiriki 由来） A ── 第9章「設計事例の紹介」  2026-08-26
   ─────────────────────────────────────────────────────────────────────────
   第9章だけスライド4枚ではなく【設計事例2件（リフター／ロボットアーム）】で、
   画像が **600×500 と 600×388** と規格外（他章は 760×428）。
   760/428 のスライド枠に入れると白帯が出るため、
   `.curriculum-accordion__figure`（専用枠）を使い、さらに原寸600pxで止める。
   ★共通の `.curriculum-accordion__figure img` は width: min(760px,100%) なので、
     そのままだと 600px の画像を 760px に引き伸ばして眠くなる。ここで打ち消す。
   ========================================================================= */
.lp-body .curriculum-accordion__case {
  margin: 0 0 28px;
}
.lp-body .curriculum-accordion__case:last-child {
  margin-bottom: 0;
}
.lp-body .curriculum-accordion__case .curriculum-accordion__detail-title {
  margin-bottom: 12px;
}
.lp-body .curriculum-accordion__case .curriculum-accordion__figure img {
  /* ★600px（元画像の実寸）で置いていたが、枠903pxに対して大きすぎた
     （アース指摘 2026-09-02）。2枚合わせて889pxを占め、
     演習ブロック全体が1522pxになっていた。
     460px に落とすと 460×383 / 460×298 ＝ 合計681px。約23%圧縮できる。
     元画像が600pxなので、460pxは縮小のみ＝ぼやけない。
     ★大きさを戻すなら 600px、もっと詰めるなら 420px あたり。 */
  width: min(460px, 100%);
}
@media screen and (max-width: 767px) {
  .lp-body .curriculum-accordion__case { margin-bottom: 22px; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） E ── .el-worry を【切削(machining)版のレイアウト】に差し替え
   2026-09-02 ／ アース指示（machining_top のスクリーンショットを提示）
   ─────────────────────────────────────────────────────────────────────────
   複製元の板金(sheetmetal)は「写真つきカード3枚を横並び」だったが、
   切削(machining)は【白パネル1枚の中を左右2カラム】
   　左＝写真（4:3）／右＝悩み3行（橙のピル「悩み 01」＋見出し＋説明）
   というレイアウトになっている。kiriki はこちらに揃える。

   ★このブロックは **サーバー現行の lp_machining.css から .ma-worry 系54ルールを
     抜き出して `ma-` → `el-` に置換したもの**（コメントは kiriki 用に書き直した）。
     色は kiriki のアクセント比率に合わせて #EDF4F6 → #E8F4F9 に変換済み。

   ★**ファイル前半（5900〜7270行付近）にある板金版の .el-worry 系ルールは
     ここで上書きされる。** 詳細度は同じ (0,2,0) なので、後に書いたこちらが勝つ。
     板金版だけが持つクラス（`__cards` `__card` `__ph` `__ttl` `__txt`）は
     新しいマークアップに存在しないため、当たらないまま残っているだけ。
     掃除するなら前半のブロックごと消すこと（削除前後で `{`/`}` の数を実測）。

   ★写真は `<figure class="el-worry__photo"></figure>` を**空のまま**置くと
     `:empty` の破線仮枠と「写真準備中（640×480）」が出る。
     `<img>` を入れた瞬間に自動で消える。素材は 640×480（4:3）で用意すること。
   ========================================================================= */
.lp-body .el-worry {
  position: relative;
  --el-sec-bg: #E8F4F9;   /* .el-conc__arrow が罫線を隠すのに使う。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 52px;
  background: #E8F4F9;
  overflow: hidden;
  box-sizing: border-box;
}
/* 薄い方眼。中央だけ透かして、周辺にだけ罫線を出す */
.lp-body .el-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 .el-worry__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .el-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 .el-worry__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .el-worry__lead {
  margin: 0 0 28px;
  color: #4A5568; font-size: 16px; font-weight: 600; line-height: 1.8;
  text-align: center;
}

/* ---- 白パネル（左＝写真 ／ 右＝悩み3行） ---- */
.lp-body .el-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 .el-worry__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #F2F5F7;
}
.lp-body #electronics .el-worry__photo img {
  display: block; width: 100%; height: 100%; margin: 0;
  object-fit: cover; object-position: center;
}
/* 写真未手配のあいだの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .el-worry__photo:empty {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #F08300;
  background: rgba(255, 248, 240, .6);
}
.lp-body .el-worry__photo:empty::before {
  content: "写真準備中（640×480）";
  color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .el-worry__list { margin: 0; padding: 0 6px 0 0; list-style: none; }
.lp-body .el-worry__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 12px;
  margin: 0; padding: 16px 0;
}
.lp-body .el-worry__item + .el-worry__item { border-top: 1px solid #E4EDEF; }
.lp-body .el-worry__item::before,
.lp-body .el-worry__item::after { content: none; display: none; }
.lp-body .el-worry__no {
  grid-column: 1; grid-row: 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 .el-worry__h3 {
  grid-column: 2; grid-row: 1; margin: 0 0 4px;
  color: #123F6D; font-size: 17px; font-weight: 900; line-height: 1.5;
}
.lp-body .el-worry__desc {
  grid-column: 2; grid-row: 2; margin: 0;
  color: #4A5568; font-size: 13px; font-weight: 600; line-height: 1.75;
}

/* ---- 結論ボックス（橙の枠）と橋渡し ---- */
.lp-body .el-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 .el-worry__concl-lead {
  margin: 0 0 6px;
  color: #123F6D; font-size: 23px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .el-worry__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .el-worry__concl-sub {
  margin: 0;
  color: #2D344B; font-size: 18px; font-weight: 700; line-height: 1.65;
  text-align: center;
}
.lp-body .el-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 .el-worry__bridge b { color: #EF6C19; font-weight: 900; }
.lp-body .el-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) {
  .lp-body .el-worry__title { font-size: 26px; margin-bottom: 22px; }
  .lp-body .el-worry__panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-body .el-worry__list { padding: 0; }
  .lp-body .el-worry__h3 { font-size: 18px; }
  .lp-body .el-worry__desc { font-size: 14px; }
  .lp-body .el-worry__concl-lead { font-size: 21px; }
  .lp-body .el-worry__concl-sub { font-size: 15px; }
  .lp-body .el-worry__bridge { font-size: 17px; margin-top: 22px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-worry { padding: 40px 16px 32px; }
  .lp-body .el-worry__title { font-size: 21px; line-height: 1.55; margin-bottom: 18px; }
  .lp-body .el-worry__lead { font-size: 14px; margin-bottom: 22px; text-align: left; }
  .lp-body .el-worry__panel { margin-top: 22px; padding: 12px; border-radius: 14px; }
  .lp-body .el-worry__item { padding: 14px 0; gap: 0 10px; }
  .lp-body .el-worry__no { font-size: 12px; padding: 4px 12px; }
  .lp-body .el-worry__h3 { font-size: 16px; }
  .lp-body .el-worry__desc { font-size: 13px; }
  .lp-body .el-worry__concl { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .lp-body .el-worry__concl-lead { font-size: 18px; }
  .lp-body .el-worry__concl-sub { font-size: 14px; }
  .lp-body .el-worry__bridge { font-size: 15px; line-height: 1.75; margin-top: 18px; text-align: left; }
  .lp-body .el-worry__bridge-arrow { width: 18px; height: 18px; border-width: 4px; margin-top: 12px; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） F ── .el-order を「章のまとめ方」に合わせて作り直す
   2026-09-02 ／ アース指示
   ─────────────────────────────────────────────────────────────────────────
   ★直した理由（内容の誤り）:
     旧版は STEP2＝第2〜4章「質点の力学」／STEP3＝第5〜7章「剛体の力学」と
     束ねていたが、**本講座の章順は 質点と剛体が交互になっている**。

       第2章 質点の静力学 ／ 第3章 剛体の静力学
       第4章 質点の運動学 ／ 第5章 質点の動力学
       第6章 剛体の運動学 ／ 第7章 剛体の動力学

     旧版は第3章を「質点」、第5章を「剛体」として扱っており、実物とズレていた。
     → 学習の軸を【質点→剛体】ではなく【全体像 → 静止する力 → 動き → 設計】へ変更。
        4ステップのまま章構成と一致する。

   ★5ステップ案は採用しない。横一列の5カードは文字とイラストが小さくなり、
     SPでも縦に長くなりすぎる。STEP3 の中を上下2段（質点／剛体）にして吸収する。

   このブロックで変えるのは3点。
     1. パネル幅の配分を情報量に合わせる（18 / 23 / 34 / 25）
     2. 章番号を【章バッジ】にする
        （旧: 24px の裸の数字「02-04」。何を指す数字か伝わらない、というアース指摘）
     3. KEYパネルの中を2カラムにする

   ★★バッジは **切削(machining) と同じ「アクセント色・角丸6px・13px」** にすること。
     一度オレンジのピル型（999px）で作ったが誤り。理由は2つ。
       ・切削に合わせる指示だった（切削は `background: var(--lp-accent)` の角丸四角）
       ・橙はこのLPで「強調」に使う色（`.el-worry__no` / `<b>` / 矢印）。
         章ラベル7個を橙にすると強調が薄まる。バッジはラベルであって強調ではない。
   ========================================================================= */

/* ---- 1. 幅の配分 ----
   ★一度 18 / 23 / 34 / 25 にしたが、実測でうまくいかなかった。
     STEP3 を幅広（291px）にして中を2カラムにすると **1列 128px** しかなく、
     説明文が4行に割れ、イラスト枠も109pxまで痩せた。
     切削の幅広パネルは【6章を2×3で入れる】ためのもので、章名も短い（「材料の特性」等）。
     kiriki の STEP3 は**2セルしかない**ので、幅広＋2カラムにする意味がない。
   ★次に STEP1 だけ 0.8fr と狭くしたが、これも失敗。
     **STEP1 は中身が1セルだが、説明文はいちばん長い。**
     欄幅119pxに対し「静力学・運動学・動力学の違いと、」が223pxで4行に割れた。
   → **4パネルを均等**にする。あわせて矢印の左右マージンを 9px → 6px に詰めて、
     説明文の欄幅を 172px 確保する（14px の日本語で12文字＝168px が1行に収まる幅）。

   ★実測値（PC 2048px・コンテナ1000px）:
     パネル ≒ 218px ／ 説明文の欄 ≒ 172px ／ ステップ見出しは18px・10文字まで1行 */
.lp-body .el-order__steps {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}
.lp-body .el-order__arw2 { margin: 0 6px; }

/* ---- 2. 章バッジ。バッジを上、タイトルを下に積む（切削と同じ） ---- */
.lp-body .el-order__cell-head,
.lp-body .el-order__panel--key .el-order__cell-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
}
.lp-body .el-order__cell-no,
.lp-body .el-order__cell-no--range {
  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 .el-order__cell-ttl { font-size: 16px; }
.lp-body .el-order__cell-txt { font-size: 14px; font-weight: 700; line-height: 1.5; }

/* ---- 3. セルは全パネル1カラム。セル間は破線で区切る ----
   ★KEYパネルも2カラムにしない（上の §1 の理由）。
     地色（#FFF9F4）だけが他と違う「主役のステップ」であることを示す。 */
.lp-body .el-order__panel--key .el-order__items {
  grid-template-columns: minmax(0, 1fr);
}
.lp-body .el-order__panel--key .el-order__cell {
  display: block;
  padding: 12px 6px;
  border-top: 1px dashed #E8CDB4;
  border-left: 0;
}
.lp-body .el-order__panel--key .el-order__cell:first-child { border-top: 0; }
/* 通常パネルの区切りはアクセントの罫線 */
.lp-body .el-order__panel:not(.el-order__panel--key) .el-order__cell + .el-order__cell {
  border-top: 1px dashed var(--lp-accent-line);
  padding-top: 14px;
}
/* イラストはセルごと（切削と同じ）。KEYも通常と同じ高さでよい */
.lp-body .el-order__panel--key .el-order__ico2 { height: auto; min-height: 150px; margin-top: 4px; }
.lp-body .el-order__panel--key .el-order__ico2:empty { height: 150px; margin: auto; }
.lp-body #electronics .el-order__panel--key .el-order__ico2 img { max-height: 150px; }

@media screen and (max-width: 900px) {
  /* 1列に折り返す。幅の配分は無効になる */
  .lp-body .el-order__steps { grid-template-columns: minmax(0, 1fr); }
  .lp-body .el-order__cell-no,
  .lp-body .el-order__cell-no--range { padding: 4px 8px; font-size: 12px; }
  .lp-body .el-order__cell-txt { font-size: 12px; }
  .lp-body .el-order__panel--key .el-order__ico2:empty { height: 120px; }
}
@media screen and (max-width: 767px) {
  .lp-body .el-order__cell-no,
  .lp-body .el-order__cell-no--range { padding: 4px 9px; font-size: 12px; }
  .lp-body .el-order__cell-ttl { font-size: 15px; }
  .lp-body .el-order__panel--key .el-order__ico2:empty { height: 100px; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） G ── .el-axis を作り直す  2026-09-02 ／ アース支給モック
   ─────────────────────────────────────────────────────────────────────────
   旧: 3カラム（受講前 ／ 判断の流れ ／ 受講後）を横に並べる
   新: 上段に【受講前 →（判断の道筋が身につく）→ 受講後】の2カード、
       下段に【設計判断の流れ】の6ステップを 3×2 の蛇行で並べる

   ★このブロックは前半（8000行付近）の旧 .el-axis 系を**上書き**する。
     詳細度は同じ (0,2,0) なので後に書いたこちらが勝つ。
     旧レイアウト専用のクラス（`__grid` `__col` `__col-ttl` `__bridge--before/--after`）は
     新マークアップに無いので当たらないまま残る。掃除は別途。

   ★流用しているもの（旧のまま使える）:
     `__mark--warn`（橙の三角に「!」）／`__mark--ok`（アクセント色の丸にチェック）
     `__item`（アイコン＋テキストの行）／`__fig:empty`（破線の仮枠）
   ========================================================================= */

/* ★★詳細度の注意（2026-09-02 実際にハマった）
   前半に残る旧 .el-axis 系には **`#electronics` 付きのルール**（詳細度 1,2,0）がある。
   `.lp-body .el-axis__…`（0,2,0）で書くと**後に書いても負ける**。
   実害は2つ出た。
     ・`.el-axis__bridge` の width が旧の 46px のままで、中の文字が縦積みに潰れた
     ・矢印 `::after` に旧の `left` が残り、`right:-35px` が無視されて
       **チップの内側**に矢印が描かれた（left と right の両方が効くと left が勝つ）
   → このブロックでは **`#electronics` を付けて (1,2,0) にする**か、
     `left / right / top / bottom` を**4方向すべて明示**する。片方だけ書かない。 */

/* ---- 上段: Before → 矢印 → After ---- */
.lp-body .el-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 .el-axis__card {
  position: relative;
  padding: 30px 18px 22px;
  border-radius: 16px;
  box-sizing: border-box;
}
.lp-body .el-axis__card--before { background: #FFF7F0; border: 1px solid #F3C9A6; }
.lp-body .el-axis__card--after  { background: var(--lp-accent-pale); border: 1px solid var(--lp-accent-line); }
/* 見出しバッジ。カードの上辺にまたがせる */
.lp-body .el-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 .el-axis__card--before .el-axis__card-badge { background: #EF6C19; }
.lp-body .el-axis__card--after  .el-axis__card-badge { background: var(--lp-accent); }
/* 左に人物イラスト、右に箇条書き */
.lp-body #electronics .el-axis__card-body {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  margin-top: 10px;
}
.lp-body #electronics .el-axis__card .el-axis__fig { height: 160px; margin: 0; }
.lp-body #electronics .el-axis__card .el-axis__fig:empty::before { content: "人物イラスト準備中"; font-size: 11px; }
/* ★2026-09-02: 一度ここに `mix-blend-mode: multiply` を入れたが**誤りだったので削除**。
   before_eng.png / after_eng.png は**透過PNG**（canvas 実測：隅のアルファ0・透過率64%）。
   ブラウザの画像ビューアの背景をイラストの下地と見誤ったのが原因。
   → **透過かどうかは目視ではなく canvas で実測すること。**
     const d = ctx.getImageData(0,0,w,h).data;
     let tr=0; for(let i=3;i<d.length;i+=4) if(d[i]<250) tr++;   // 透過ピクセル数 */
/* 欄幅 238px。14px だと「必要な力・トルク・動力を見積もれる」(17字=238px) が
   アイコン24px＋gap12px に押されて折り返すので 13px にする */
.lp-body #electronics .el-axis__card .el-axis__item { font-size: 13px; gap: 8px; margin-bottom: 12px; }

/* ---- 中央の矢印（判断の道筋が身につく） ---- */
.lp-body #electronics .el-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 #electronics .el-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 #electronics .el-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 .el-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 .el-axis__flow-ttl::before,
.lp-body .el-axis__flow-ttl::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--lp-accent-line);
}
.lp-body .el-axis__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 46px;
  margin: 26px 0 0; padding: 0;
  list-style: none;
}
/* 2段目は右から左へ（蛇行） */
.lp-body .el-axis__step:nth-child(4) { grid-column: 3; grid-row: 2; }
.lp-body .el-axis__step:nth-child(5) { grid-column: 2; grid-row: 2; }
.lp-body .el-axis__step:nth-child(6) { grid-column: 1; grid-row: 2; }
.lp-body .el-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 .el-axis__no {
  flex: none;
  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 .el-axis__step:not(:last-child)::before { content: none; display: none; }
/* 矢印。1段目は右向き、3→4 は下向き、2段目は左向き
   ★4方向すべて明示すること（旧ルールの left が残ると内側に描かれる） */
.lp-body #electronics .el-axis__step::after {
  content: ""; position: absolute; display: block;
  width: 24px; height: 16px;
  background: var(--lp-accent);
  border: 0; border-radius: 0;
}
.lp-body #electronics .el-axis__step:nth-child(1)::after,
.lp-body #electronics .el-axis__step:nth-child(2)::after {
  left: auto; right: -35px; top: 50%; bottom: auto;
  transform: translateY(-50%);
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}
.lp-body #electronics .el-axis__step:nth-child(3)::after {
  left: 50%; right: auto; top: auto; bottom: -32px;
  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 #electronics .el-axis__step:nth-child(4)::after,
.lp-body #electronics .el-axis__step:nth-child(5)::after {
  left: -35px; right: auto; top: 50%; bottom: auto;
  transform: translateY(-50%);
  clip-path: polygon(100% 30%, 45% 30%, 45% 0, 0 50%, 45% 100%, 45% 70%, 100% 70%);
}
.lp-body #electronics .el-axis__step:nth-child(6)::after { content: none; display: none; }

@media screen and (max-width: 900px) {
  .lp-body .el-axis__ba { grid-template-columns: minmax(0, 1fr); gap: 26px 0; }
  .lp-body #electronics .el-axis__bridge { flex-direction: row; gap: 14px; }
  .lp-body #electronics .el-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 .el-axis__steps { grid-template-columns: minmax(0, 1fr); gap: 30px 0; }
  /* 1列になったら蛇行をやめて素直に縦へ */
  .lp-body .el-axis__step:nth-child(4),
  .lp-body .el-axis__step:nth-child(5),
  .lp-body .el-axis__step:nth-child(6) { grid-column: 1; grid-row: auto; }
  .lp-body #electronics .el-axis__step:nth-child(1)::after,
  .lp-body #electronics .el-axis__step:nth-child(2)::after,
  .lp-body #electronics .el-axis__step:nth-child(3)::after,
  .lp-body #electronics .el-axis__step:nth-child(4)::after,
  .lp-body #electronics .el-axis__step:nth-child(5)::after {
    left: 50%; right: auto; top: auto; bottom: -27px;
    width: 16px; height: 20px; transform: translateX(-50%);
    clip-path: polygon(30% 0, 70% 0, 70% 55%, 100% 55%, 50% 100%, 0 55%, 30% 55%);
  }
}
/* =========================================================================
   追加ブロック（kiriki 由来） M ── SP 375px の孤立行をつぶす  2026-09-02
   ─────────────────────────────────────────────────────────────────────────
   375px の通し実測で孤立行（3文字以下の行）が18箇所出た。
   原因は大きく2つ。

   ① **PC用の2カラムがSPでも維持されていて、文字欄が狭すぎる**
      `.el-worry__item` の本文欄 = 227px ／ `.el-axis__item` の文欄 = 156px
      → SPでは1カラムに開く。これだけで `el-worry` の6件、`el-axis` の3件が消える。
   ② **欄幅をあと10〜30px超えて1〜3文字だけ落ちている**
      → 該当要素のSPフォントを1〜2px下げる。文言は変えない。

   ★実測値（375px）:
     el-hero__note 328px/14px … 24文字=336px → 13pxで312px
     el-hero__card-sub 92px/11px … 9文字=99px → 10pxで90px
     el-need__band-lead 296px/16px … 19文字=304px → 15pxで285px
     el-worry__concl-lead 294px/18px … 18文字=324px → 16pxで288px
     el-reason__fig-cap 328px/13px … 26文字=338px → 12pxで312px
   ========================================================================= */
@media screen and (max-width: 767px) {
  /* ① el-worry の悩み3行を1カラムに。ピルを見出しの上へ */
  .lp-body #electronics .el-worry__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 0;
  }
  .lp-body #electronics .el-worry__no {
    grid-column: 1; grid-row: auto;
    justify-self: start;
    margin: 0;
  }
  .lp-body #electronics .el-worry__h3,
  .lp-body #electronics .el-worry__desc { grid-column: 1; grid-row: auto; }

  /* ① el-axis のカードも1カラムにする。
     ★ただし**この指定はここに書いても効かない。**
       追加ブロックG の `@media (max-width: 767px)` が
       このブロックより**後ろ**にあり、同じ詳細度で勝つため。
       → 実際の指定は**ブロックG側**に書いてある（2026-09-02 実測で判明）。
       ここに重複して書くと「直したのに効かない」の原因になるので置かない。 */

  /* ② あと少しで収まらないものはフォントを1〜2px下げる */
  .lp-body #electronics .el-hero__note { font-size: 12px; }  /* ★二次実測 13px=336px>328px。12pxで310px */
  .lp-body #electronics .el-hero__card-sub { font-size: 10px; }
  .lp-body #electronics .el-worry__concl-lead { font-size: 16px; }
  .lp-body #electronics .el-reason__h3 { font-size: 16px; }

  /* ★2026-09-02 二次実測: 理由02「現象をイメージしてから理論を学べる」が
     16pxで271px、見出し欄328px − 番号45px − gap14px = 269px で **2px** 足りず
     「る」が落ちていた。文字を小さくせず、番号の幅と間隔を詰めて欄を広げる。
       番号 26px→24px（29px）／padding-right 14px→10px ／ gap 14px→10px
       → 欄 328 − 39 − 10 = 279px ＞ 271px */
  .lp-body #electronics .el-reason__h3 { gap: 10px; }
  .lp-body #electronics .el-reason__no { font-size: 24px; padding-right: 10px; }

  /* ★下の2つは **このブロックでは効かない**（後方の追加ブロックI・Hが同詳細度で勝つ）。
     実際の指定はそちらに書いてある。ここに残すと「直したのに効かない」の原因になるので置かない。
       .el-need__band-lead            → 追加ブロックH の 767px（15px）
       .el-reason__cmp .el-reason__fig-cap → 追加ブロックI の 767px（12px） */
}

/* =========================================================================
   追加ブロック（kiriki 由来） L ── カリキュラム見出しの地色を白にして境目を作る
   2026-09-02 ／ アース指摘
   ─────────────────────────────────────────────────────────────────────────
   直前の `.el-reason`（#E8F4F9）と、`.curriculum-accordion__header` の
   `var(--lp-accent-soft)`（#E7F5FA）が **RGB差 (1,2,3)** しかなく、
   2つのセクションが地続きに見えていた。
   手順書 §12-3「セクション背景とカード背景は必ず実測して差を確認する」と同じ型。

   ★これは kiriki 固有ではない。**切削(machining)でも同じ**
     （`.ma-reason` #E8F3F3 ／ header `--lp-accent-soft` #E7F4F5 ＝ 差 (1,1,2)）。
     理由セクションのすぐ後ろにカリキュラムが来る並びになってから表面化した。
     板金・樹脂も同じ構成なら同様のはず。**別件として要確認。**

   → **帯を残す**方針（アース判断 2026-09-02）。白にせず、直前の `.el-reason` より
     はっきり濃い #D9F1F7 にして段差をつくる。
     `.el-reason` #E8F4F9 との差は **RGB (15, 8, 5)** で、地続きには見えない。
     見出しの下は白（`__inner`）なので、帯 → 白 の切り替わりも保たれる。
   ★白にする案もあった（手順書 §12-4 の「白 → 色 → 白 → 色」に戻す）。
     戻すなら `background: #FFFFFF` に変えるだけでよい。
   ========================================================================= */
.lp-body #electronics .curriculum-accordion__header {
  background: #D9F1F7;
}

/* =========================================================================
   追加ブロック（kiriki 由来） K ── .el-order を【2列×2段の蛇行】にして図を大きくする
   2026-09-02 ／ アース指示
   ─────────────────────────────────────────────────────────────────────────
   ★直した理由:
     横4列だと1列 219px しかなく、教材画像の描画幅が **173px** まで潰れて
     図中の記号や文字が読めなかった。さらに `.el-order__ico2 img` の
     `max-height: 150px` が効いて、**縦長の step1_overview.png は 100×150px**
     までしか出ていなかった（枠は419pxあり、下に大きな空白ができていた）。

   ★コンテナ幅は **1000px のまま**（アース判断 2026-09-02）。
     実測すると el-hero と #price は 960px、今回作った5セクション
     （need / worry / order / axis / reason）は 1000px で、
     LP全体が960pxで統一されているわけではない。
     el-order だけ960pxにすると上下のセクションと左右が20pxズレるため、
     **1000px を維持して5セクションの並びを優先**した。

   ★配置（DOM順は panel1 → 矢印 → panel2 → 矢印 → panel3 → 矢印 → panel4）:

       col1        col2(48px)     col3
     ┌─────────┐   →矢印      ┌─────────┐
     │ STEP 1  │              │ STEP 2  │   row1
     └─────────┘              └─────────┘
                              ↓矢印          row2(72px)
     ┌─────────┐   ←矢印      ┌─────────┐
     │ STEP 4  │              │ STEP 3  │   row3
     └─────────┘              └─────────┘

     矢印は **グリッドのセルに置く**（絶対座標を使わない）ので、
     幅が変わってもカードや文字に重ならない。
   ========================================================================= */
.lp-body #electronics .el-order__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  grid-template-rows: auto 72px auto;
  align-items: stretch;
  gap: 0;
  margin: 30px 0 0;
}
/* 1段目 */
.lp-body #electronics .el-order__steps > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.lp-body #electronics .el-order__steps > *:nth-child(2) { grid-column: 2; grid-row: 1; }
.lp-body #electronics .el-order__steps > *:nth-child(3) { grid-column: 3; grid-row: 1; }
/* 2段目へ降りる矢印 */
.lp-body #electronics .el-order__steps > *:nth-child(4) { grid-column: 3; grid-row: 2; }
/* 2段目（右→左） */
.lp-body #electronics .el-order__steps > *:nth-child(5) { grid-column: 3; grid-row: 3; }
.lp-body #electronics .el-order__steps > *:nth-child(6) { grid-column: 2; grid-row: 3; }
.lp-body #electronics .el-order__steps > *:nth-child(7) { grid-column: 1; grid-row: 3; }

/* 矢印。既定は右向き。4番目を下向き、6番目を左向きに回す */
.lp-body #electronics .el-order__arw2 {
  align-self: center; justify-self: center;
  width: 30px; height: 26px; margin: 0;
  background: var(--lp-accent);
  clip-path: polygon(0 30%, 58% 30%, 58% 0, 100% 50%, 58% 100%, 58% 70%, 0 70%);
}
.lp-body #electronics .el-order__steps > *:nth-child(4) { transform: rotate(90deg); }
.lp-body #electronics .el-order__steps > *:nth-child(6) { transform: rotate(180deg); }

/* ---- カードの内側 ---- */
.lp-body #electronics .el-order__panel { padding: 28px 30px 30px; }
.lp-body #electronics .el-order__cell { padding: 4px 0 0; }
.lp-body #electronics .el-order__panel--key .el-order__cell { padding: 4px 0 0; }
.lp-body #electronics .el-order__cell + .el-order__cell {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px dashed var(--lp-accent-line);
}
.lp-body #electronics .el-order__panel--key .el-order__cell + .el-order__cell {
  border-top-color: #E8CDB4;
}
/* ★章バッジと章名を【横並び】にする（アース指示 2026-09-02）。
   追加ブロックF では横4列で1列219pxしかなく、縦積みにしないと
   章名が1文字ずつ折り返していた。2列×2段にして欄が414pxになったので、
   「第1章｜力学の基本」を1行に置ける。 */
.lp-body #electronics .el-order__cell-head {
  flex-direction: row;
  align-items: center;
  gap: 0 12px;
  margin: 0 0 8px;
}
.lp-body #electronics .el-order__cell-no,
.lp-body #electronics .el-order__cell-no--range { align-self: center; margin-top: 0; }
.lp-body #electronics .el-order__cell-ttl { font-size: 17px; }
.lp-body #electronics .el-order__cell-txt { font-size: 14px; line-height: 1.7; }

/* ---- 教材画像。max-height の制限を外して章ブロック幅いっぱいに ---- */
/* ★セルを縦フレックスにして、画像の枠に余った高さを吸わせる。
   STEP1 は章が1つしかないため、同じ段の STEP2 に高さを合わせたぶんの余白が
   **画像の下だけ**に溜まっていた（アース指摘 2026-09-02）。
   `flex: 1 1 auto` ＋ `align-items: center` で、余白を画像の上下へ均等に配る。
   ★追加ブロックF で `--key` のセルを `display: block` にしていたので、
     ここで縦フレックスに戻す。 */
.lp-body #electronics .el-order__cell,
.lp-body #electronics .el-order__panel--key .el-order__cell {
  display: flex;
  flex-direction: column;
}
.lp-body #electronics .el-order__ico2,
.lp-body #electronics .el-order__panel--key .el-order__ico2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 18px 0 0;   /* 説明文との間隔。12px → 18px（アース指示 2026-09-02） */
  overflow: visible;
}
.lp-body #electronics .el-order__ico2 img,
.lp-body #electronics .el-order__panel--key .el-order__ico2 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* ★縦長の図の頭打ち。**画像ごとの倍率指定の代わりに、この1本で揃える**
     （アース判断 2026-09-02）。

     7枚は縦横比が 0.83〜3.08 とばらばらで、図の形なりに高さが変わるのは正しい。
     問題だったのは「ほぼ同じ形の縦長図なのに倍率が違う」状態。
       step3_point_motion（比0.83）＝ 70%指定で 290px幅
       step4_force_transfer（比0.85）＝ 指定なしで 414px幅
     70%の指定は、この画像が **1200×1000 の横長だった頃**に入れたもので、
     514×617 の縦長に差し替わったあとも残っていたのが原因。

     → 倍率ではなく **高さの上限**で抑えれば、同じ形の図は同じ扱いになり、
       画像を差し替えるたびに倍率を見直す必要もなくなる。
     実測（欄幅414px）: 縦長3枚が 315×380 / 346×380 / 324×380 に揃い、
     横長4枚（比1.5〜3.1）は380px未満なので影響を受けない。 */
  max-height: 380px;
  object-fit: contain;
  margin: 0 auto;
}
/* ★画像ごとの微調整（アース指示 2026-09-02）
   step1_overview.png（1240×750）は、他の6枚より図そのものが大きく描かれていて
   1枚だけ迫って見える。**この画像だけ 85%** に落とし、説明文との間も少し空ける。
   ★セレクタを **ファイル名** に紐づけているのは、調整の理由が
     「この画像の余白の取り方」にあるため。図を書き出し直したら、
     このルールが当たらなくなる（＝自動的に既定の100%に戻る）。 */
.lp-body #electronics .el-order__ico2 img[src$="step1_overview.png"] {
  max-width: 85%;
  margin-top: 8px;
}
/* ★STEP3の2枚に入れていた `max-width: 70%` は **削除した**（2026-09-02）。
   指定を入れた時点では 1200×1000 の横長だったが、514×617 の縦長へ差し替わり、
   ほぼ同じ形の step4_force_transfer（比0.85）が100%のままだったため、
   同じ形の図で倍率が食い違っていた。
   → 上の `max-height: 380px` で縦長図をまとめて抑えるようにしたので不要。
   ★戻す場合はここに `max-width: 70%` のルールを復活させる。 */
/* 素材待ちの仮枠だけは高さを持たせる */
.lp-body #electronics .el-order__ico2:empty,
.lp-body #electronics .el-order__panel--key .el-order__ico2:empty {
  height: 180px; margin: 12px 0 0;
  border: 1px dashed #F08300; border-radius: 8px;
  background: rgba(255, 248, 240, .6);
}

/* ---- タブレット（901〜1100px）は2列のまま。コンテナが縮むので自動で追従 ---- */

/* ---- 900px以下は1列。DOM順どおりに縦へ ---- */
@media screen and (max-width: 900px) {
  .lp-body #electronics .el-order__steps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 0;
  }
  .lp-body #electronics .el-order__steps > *:nth-child(1),
  .lp-body #electronics .el-order__steps > *:nth-child(2),
  .lp-body #electronics .el-order__steps > *:nth-child(3),
  .lp-body #electronics .el-order__steps > *:nth-child(4),
  .lp-body #electronics .el-order__steps > *:nth-child(5),
  .lp-body #electronics .el-order__steps > *:nth-child(6),
  .lp-body #electronics .el-order__steps > *:nth-child(7) {
    grid-column: 1; grid-row: auto;
  }
  /* 矢印はすべて下向き */
  .lp-body #electronics .el-order__arw2,
  .lp-body #electronics .el-order__steps > *:nth-child(4),
  .lp-body #electronics .el-order__steps > *:nth-child(6) {
    transform: rotate(90deg);
    margin: 16px auto;
  }
  .lp-body #electronics .el-order__ico2 img { max-height: 380px; }
}
@media screen and (max-width: 767px) {
  .lp-body #electronics .el-order__panel { padding: 22px 20px 24px; }
  .lp-body #electronics .el-order__cell + .el-order__cell { margin-top: 18px; padding-top: 18px; }
  .lp-body #electronics .el-order__cell-ttl { font-size: 16px; }
  .lp-body #electronics .el-order__cell-txt { font-size: 13px; }
  .lp-body #electronics .el-order__ico2 img { max-height: 320px; }
  .lp-body #electronics .el-order__ico2:empty { height: 140px; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） I ── 理由01の対比図を【左右2枚】にする
   2026-09-02 ／ アース指摘
   ─────────────────────────────────────────────────────────────────────────
   理由01は「専門書 ／ 本教材」の対比なので、**並べて見比べる図**。
   `.el-reason__fig` は1枚ずつ縦に積む器（理由02・03のギャラリーとは別）なので、
   そのまま2枚置くと 740×730 が縦に2つ＝**1,460px** も使っていた。
   → 2枚を `.el-reason__cmp` で包み、2カラムに並べて1枚あたり440pxで頭打ちにする。

   ★クラス名は新規。`.el-reason__gallery`（理由02・03の4列）とは用途が違うので分ける。
   ========================================================================= */
.lp-body #electronics .el-reason__cmp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 24px;
  margin: 18px 0 0;
}
.lp-body #electronics .el-reason__cmp .el-reason__fig {
  width: 100%;
  margin: 0;
}
.lp-body #electronics .el-reason__cmp .el-reason__fig img {
  display: block;
  width: auto; max-width: min(100%, 440px); height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .lp-body #electronics .el-reason__cmp { grid-template-columns: minmax(0, 1fr); gap: 20px 0; }
  .lp-body #electronics .el-reason__cmp .el-reason__fig img { max-width: 100%; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） J ── 「3つの理由」の見え方をそろえる
   2026-09-02 ／ アース指摘
   ─────────────────────────────────────────────────────────────────────────
   ★指摘の要点: **理由01だけが大きく見え、02・03が小さく見える**ため、
     01が最重要項目のように読めてしまう。3つは並列なので重みをそろえる。

   直したこと:
     1. 理由01の対比図を **17%低く**（440px → 360px。実測 434×413 → 360×342）
     2. 対比図のキャプションを **13px → 14px** に上げて読ませる
     3. 理由02のギャラリー4枚に **短い名称**を付ける（`__gcap`）
     4. 理由03は **小さな教材画面4枚 → 大きな図2枚** に絞る（`__cmp--lg`）
        教材のスクリーンショットが小さく並ぶと内容が読めず、
        「画面が並んでいる」だけに見えてしまうため
   ========================================================================= */
.lp-body #electronics .el-reason__cmp-item {
  display: flex; flex-direction: column;
}
/* 1. 理由01の図を低くする（追加ブロックI の 440px を上書き） */
.lp-body #electronics .el-reason__cmp .el-reason__fig img {
  max-width: min(100%, 360px);
}
/* 2. キャプションを少し大きく */
.lp-body #electronics .el-reason__cmp .el-reason__fig-cap {
  margin: 10px 0 0;
  color: #5A6A7D; font-size: 14px; font-weight: 600; line-height: 1.7;
  text-align: center;
}
/* 3. ギャラリーの名称 */
.lp-body #electronics .el-reason__gcap {
  margin: 8px 0 0;
  color: #5A6A7D; font-size: 13px; font-weight: 700; line-height: 1.5;
  text-align: center;
}
/* 4. 理由03は大きな図2枚
   ★2枚の縦横比が違う（beam_forces 1.57 ／ shear_moment 2.45）ため、
     幅100%で置くと高さが 288px と 184px になり、左のカードだけ背が高くなった
     （アース指摘 2026-09-02）。
   → **図の枠の高さを固定し、その中で各画像を最大表示**する。
     ・左（1.57）は高さが先に効いて 389×248 ＝ 幅452px から約14%小さくなる
     ・右（2.45）は幅が先に効いて 452×184 のまま、枠の中で上下中央に置かれる
     結果として2枚の枠の高さが揃い、カードの高さとキャプションの位置も揃う。
   ★`object-fit: cover` は使わない（図が切れるため）。あくまで縮小のみ。 */
.lp-body #electronics .el-reason__cmp--lg .el-reason__fig {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 286px;          /* 内側248px ＋ padding18px×2 ＋ border1px×2 */
  padding: 18px;
  box-sizing: border-box;
}
.lp-body #electronics .el-reason__cmp--lg .el-reason__fig img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
.lp-body #electronics .el-reason__cmp--lg .el-reason__fig:empty { height: 286px; }
@media screen and (max-width: 767px) {
  .lp-body #electronics .el-reason__cmp--lg .el-reason__fig { height: 200px; padding: 12px; }
}

@media screen and (max-width: 767px) {
  /* ★2026-09-02 二次実測: 13pxだと 26文字=338px > 欄328px で「ら」が孤立。12pxで312px。
     （ブロックM側にも 12px と書いてあるが、Mはこのブロックより前にあり同詳細度で負ける。
       直すならここ。M側の指定は無効なので触っても効かない） */
  .lp-body #electronics .el-reason__cmp .el-reason__fig-cap { font-size: 12px; text-align: left; }
  .lp-body #electronics .el-reason__gcap { font-size: 12px; }
  .lp-body #electronics .el-reason__cmp--lg .el-reason__fig:empty { min-height: 200px; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） H ── .el-need の図版を3ステップの工程図にする
   2026-09-02 ／ アース支給モック
   ─────────────────────────────────────────────────────────────────────────
   旧: `.el-need__fig` に図版1枚（板金から引き継いだ3枚組の器）
   新: STEP 01〜03 を横に並べ、下に結論バンドを敷く

   ★クラス名は **すべて新規（`__proc-*` / `__band-*`）**。
     `.el-need__flow` `__flow-item` `__flow-label` は板金の3枚組で使われていた名前で、
     同じ名前を再利用すると旧ルールと詳細度で競合する（el-axis で実際にハマった）。
     新しい見た目を作るときは**新しい名前を付ける**のがいちばん安全。

   ★STEPバッジ・矢印・区切り線はすべてCSSで描く（画像にしない）。
     中のイラストだけ `:empty` の仮枠で場所を空けてある。
   ========================================================================= */
.lp-body #electronics .el-need__proc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 46px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin: 34px 0 0;
}
.lp-body #electronics .el-need__proc-item {
  display: flex; flex-direction: column;
  padding: 0 18px;
  box-sizing: border-box;
}
/* 列のあいだの細い区切り線（モックの縦線） */
.lp-body #electronics .el-need__proc-item + .el-need__proc-item { border-left: 1px solid var(--lp-accent-line); }
/* ★見出しは3列とも【バッジ＝左 ／ タイトル＝右】の2カラム固定にする。
   flex + wrap にしていたら、タイトルが長い STEP 02 だけバッジの下へ回り込み、
   1と3は横並び・2は下、とレイアウトがバラついた（アース指摘 2026-09-02）。
   grid にすればタイトルが2行になっても**バッジの右**に留まる。
   さらに head と sub に min-height を持たせて、3列のイラストの開始位置を揃える。 */
.lp-body #electronics .el-need__proc-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 10px;
  min-height: 54px;      /* タイトル2行ぶん（18px × 1.4 × 2 = 50px） */
  margin: 0 0 4px;
}
.lp-body #electronics .el-need__proc-no {
  align-self: start;
  margin-top: 3px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #EF6C19; color: #FFFFFF;
  font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: .06em;
  white-space: nowrap;
}
.lp-body #electronics .el-need__proc-ttl {
  color: #123F6D; font-size: 18px; font-weight: 900; line-height: 1.4;
}
.lp-body #electronics .el-need__proc-sub {
  min-height: 38px;      /* 補足2行ぶん（12px × 1.6 × 2 = 38px） */
  margin: 0 0 10px;
  color: #4A5568; font-size: 12px; font-weight: 600; line-height: 1.6;
}
/* ★イラストは【同じ高さの枠に下揃え】。
   支給PNGは縦横比が 0.55 / 0.95 / 0.74 とばらばらなので、
   高さを揃えるだけだと横幅が変わる。枠を固定して下端で揃える。 */
/* ★3つのイラストに薄い地色を敷いて、工程の区切りを分かりやすくする
   （アース指摘 2026-09-02）。セクションは白なので、`--lp-accent-pale` を敷けば
   3枚が独立したパネルとして読める。列の縦罫線は文字側の区切りとして残す。
   ★高さは 240 → 264px に上げてある。padding 12px を足したぶんを吸収して、
     図そのものの表示サイズ（最大240px）を変えないため。 */
.lp-body #electronics .el-need__proc-fig {
  display: flex; align-items: flex-end; justify-content: center;
  flex: 0 0 auto;
  width: 100%; height: 264px; margin: 0;
  padding: 12px;
  background: var(--lp-accent-pale);
  border-radius: 10px;
  box-sizing: border-box;
}
.lp-body #electronics .el-need__proc-fig img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: 0;
}
.lp-body #electronics .el-need__proc-fig:empty {
  flex: 0 0 auto;
  border: 2px dashed #F08300; border-radius: 10px;
  background: rgba(255, 248, 240, .5);
}
.lp-body #electronics .el-need__proc-fig:empty::before {
  content: "図版準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}
/* 工程のあいだの矢印 */
.lp-body #electronics .el-need__proc-arw {
  align-self: center;
  width: 26px; height: 15px;
  background: #EF6C19;
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}

/* ---- 結論バンド ---- */
.lp-body #electronics .el-need__band {
  margin: 30px 0 0;
  padding: 22px 26px 18px;
  background: var(--lp-accent-pale);
  border-radius: 16px;
  text-align: center;
}
.lp-body #electronics .el-need__band-lead {
  margin: 0;
  color: #123F6D; font-size: 21px; font-weight: 900; line-height: 1.6;
}
.lp-body #electronics .el-need__band-lead b { color: #EF6C19; font-weight: 900; }
.lp-body #electronics .el-need__band-tags {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0 18px;
  margin: 12px 0 0;
  color: #4A5568; font-size: 13px; font-weight: 700; line-height: 1.5;
}
.lp-body #electronics .el-need__band-tags span { position: relative; padding: 0 9px; }
.lp-body #electronics .el-need__band-tags span + span::before {
  content: ""; position: absolute; left: -9px; top: 50%;
  width: 1px; height: 14px; margin-top: -7px;
  background: var(--lp-accent-line);
}

@media screen and (max-width: 900px) {
  .lp-body #electronics .el-need__proc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body #electronics .el-need__proc-item { padding: 0; }
  .lp-body #electronics .el-need__proc-item + .el-need__proc-item { border-left: 0; }
  .lp-body #electronics .el-need__proc-arw {
    width: 34px; height: 22px; margin: 16px auto;
    clip-path: polygon(30% 0, 70% 0, 70% 55%, 100% 55%, 50% 100%, 0 55%, 30% 55%);
  }
  .lp-body #electronics .el-need__band-lead { font-size: 18px; }
}
@media screen and (max-width: 767px) {
  .lp-body #electronics .el-need__proc-ttl { font-size: 16px; }
  .lp-body #electronics .el-need__proc-head { min-height: 0; }
  .lp-body #electronics .el-need__proc-sub { min-height: 0; }
  .lp-body #electronics .el-need__proc-fig { height: 216px; padding: 10px; }
  .lp-body #electronics .el-need__band { padding: 18px 16px 14px; border-radius: 14px; }
  /* ★2026-09-02 二次実測: 16pxだと 19文字=302px > 欄296px で「す。」が孤立。15pxで284px。
     （ブロックM側にも 15px と書いてあるが、Mはこのブロックより前で負ける。直すならここ） */
  .lp-body #electronics .el-need__band-lead { font-size: 15px; text-align: left; }
  .lp-body #electronics .el-need__band-tags { font-size: 12px; gap: 0 12px; }
}

@media screen and (max-width: 767px) {
  .lp-body .el-axis__card { padding: 26px 14px 20px; }
  .lp-body .el-axis__card-badge { font-size: 14px; padding: 6px 18px; }
  /* ★2026-09-02: 2カラムのままだと文欄が **156px** しかなく、
     「公式は知っていても、／どの場面で使うか判断でき／ない」のように
     3文字以下の行が出た。SPでは**1カラム**にしてイラストを上、箇条書きを下へ。
     ★この指定は追加ブロックMにも書いたが、Mはこのブロックより**前**にあるため
       同じ詳細度で負けていた。**効かせたい側をここで直す。** */
  .lp-body #electronics .el-axis__card-body { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
  .lp-body #electronics .el-axis__card .el-axis__fig { height: 150px; }
  .lp-body #electronics .el-axis__card .el-axis__item { font-size: 13px; }
  .lp-body .el-axis__flow-ttl { font-size: 17px; gap: 12px; }
  .lp-body .el-axis__step { font-size: 13px; padding: 12px 14px; }
  .lp-body .el-axis__no { width: 25px; height: 25px; font-size: 13px; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） N ── SP375px 三次実測ぶんの孤立行つぶし
   2026-09-02
   ─────────────────────────────────────────────────────────────────────────
   ★このブロックは **ファイル末尾**に置く。
     ブロックM→I→H→G と「後から書いたほうが勝つ」で3回つまずいたので、
     以降のSP微調整は必ずここに追記すること（前に挿し込まない）。

   ★欄幅は border-box ではなく **content-box（padding を引いた幅）** で見る。
     .section-title は padding 0 20px なので 325px ではなく **285px**。
     letter-spacing がある要素は 1文字あたり (font-size + letter-spacing)。

   実測（375px・content幅／必要幅→是正後）:
     el-order__cell-txt            283px ／ 22字×13=286 → 12pxで264
     curriculum-accordion__summary 303px ／ 26字×12=312 → 11.5pxで299
     section-title（ペース）        285px ／ 10字×(25+4)=290 → ls 3pxで280
     companies-section h3          325px ／ 16字×(20+2)=352 → 18pxで320
     faq-header h3（法人）          207px ／ 12字×(16+2)=216 → 15pxで204
     benefit-v2__note              → 12px
   ========================================================================= */
@media screen and (max-width: 767px) {
  /* 新セクション側 */
  .lp-body #electronics .el-order__cell-txt { font-size: 12px; }

  /* 旧テンプレ由来のセクション。#electronics 配下だけに効くので他講座のLPには波及しない */
  /* ★章要約はフォントを下げない方針に変更（2026-09-02）。
     欄は307px。最長は30〜36文字あり、収めようとすると11px以下まで落ちて読みにくい。
     代わりに**本文側で意味の切れ目に `<br class="sp-break">` を入れて**2行に割った。
     割ったあとの各行は最長20文字＝240px なので 12px（既定）のままで収まる。
     → ここでのフォント指定は不要。指定を足すと本文側の改行と二重に効いて崩れるので置かない。 */
  .lp-body #electronics .section-title { letter-spacing: 3px; }
  /* ★見出しは「― 幅広い業界で採用されています ―」で、**前後に半角スペースが入っている**。
     文字だけ数えて16字=319pxと見て18pxにしたが、スペース2つぶんで欄328pxを超えていた。
     文字数を数えるときは空白も勘定に入れること。17pxで収まる。 */
  .lp-body #electronics .companies-section h3 { font-size: 17px; }
  /* ★.info-btn は flex で、::before に「?」アイコン（22px）が入る。
     テキストが使えるのは 287px ではなく約 250px。14px→13px。 */
  .lp-body #electronics .info-btn { font-size: 13px; }
  .lp-body #electronics .faq-header h3 { font-size: 15px; }
  .lp-body #electronics .benefit-v2__note { font-size: 12px; }

  /* ★アース指摘: 3カード（静力学／運動学／動力学）と講座名の見出しが接触していた。
     実測 — .el-hero__cards の下端 910px に対し .lp-mv h2 の上端が 904px で **6px 重なり**。
     原因は .lp-mv h2 の margin-top: -6px（PC用の詰め）がSPでも効いていたこと。
     SPだけ正のマージンに戻して 16px 空ける。 */
  .lp-body #electronics .lp-mv h2 { margin-top: 16px; }
}

/* =========================================================================
   追加ブロック（kiriki 由来） O ── 章見出しの「サンプル動画」バッジ
   2026-09-02 ／ アース指示（既存LPと同仕様）
   ─────────────────────────────────────────────────────────────────────────
   切削（machining）が持っている `.cv-badge` 一式を移植。
   板金(sheetmetal)のCSSを複製した時点では存在しなかったため kiriki には無かった。
   ★色は machining のベタ値ではなく kiriki のアクセント変数を使う
     （--lp-accent-soft #E7F5FA ／ --lp-accent-mid #9ED8EC ／ --lp-accent-dark #007AA3）。

   本文側の書き方（machining と同じ）:
     <span class="curriculum-accordion__heading">
       <span class="curriculum-accordion__chapter-title">章タイトル</span>
       <span class="cv-badge"><span class="cv-badge__ico">▶</span>サンプル動画<span class="cv-badge__time">9:14</span></span>
     </span>
   ========================================================================= */
.lp-body .cv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  background: var(--lp-accent-soft, #E7F5FA);
  border: 1px solid var(--lp-accent-mid, #9ED8EC);
  border-radius: 999px;
  color: var(--lp-accent-dark, #007AA3);
  font-size: 12px; font-weight: 800; line-height: 1.5;
  white-space: nowrap;
}
.lp-body .cv-badge__ico { font-size: 9px; }
.lp-body .cv-badge__time {
  padding-left: 7px;
  border-left: 1px solid var(--lp-accent-mid, #9ED8EC);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.lp-body .curriculum-accordion__heading:has(.cv-badge) {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .lp-body .cv-badge { padding: 2px 9px 2px 7px; font-size: 11px; }
  .lp-body .curriculum-accordion__heading:has(.cv-badge) { gap: 8px; }
}

/* 260905 お客様の声（集計＋代表カード＋シート駆動の原文カード）の配色と打ち消し。
   テーマ色 var(--lp-accent)（.lp-body で #0099cc）に追従させる。
   淡背景もテーマ定義済みの var(--lp-accent-soft)（#E7F5FA）を使い、色変更に自動追従させる。
   ※幅（960px）とスマホ余白は .lp-body #electronics > #sec-survey で対応済みのため、ここでは触らない。
   ※このブロックはファイルの一番最後に貼る。
   ★2026-09-06 注記: このブロックは **Drive の lp_kiriki.css には入っておらず、
   　サーバー現行の lp_kiriki.css にだけ存在した**（Drive の控えが1回ぶん古い）。
   　サーバー版から取り込んで electronics 用に書き換えた。 */
.lp-body #sec-survey { --voice-accent: var(--lp-accent); --voice-accent-bg: var(--lp-accent-soft); }

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

/* =========================================================================
   追加ブロック P ── el-hero の写真を【写真向け】に直す  2026-10-06
   ★複製元（kiriki）のヒーロー画像は【背景が透過したイラスト】で、
   　`.el-hero__photo img` に `transform: translateX(-180px)` と `max-height: 450px` が
   　当たっている。文字の上に重ねて馴染ませるための指定。
   ★electronics は**四角い写真**（uploads/2023/12/img_reason_02_01.jpg）を使うため、
   　この重ねを打ち消さないと **見出しの3行目が写真の下に隠れる**（実測で発生）。
   → 重なりをやめて右上に置き、角丸＋影でカードとして見せる。
   ★透過イラストが支給されたら、このブロックを削除して複製元の重ね表示に戻す。
   ========================================================================= */
.lp-body .el-hero__photo {
  align-self: start;
  margin: 36px 0 0 0;
}
.lp-body .el-hero__photo img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(18, 63, 109, .14);
  transform: none;
}
@media screen and (max-width: 767px) {
  .lp-body .el-hero__photo { margin: 16px 0 0; }
  .lp-body .el-hero__photo img { max-height: 180px; }
}

/* =========================================================================
   追加ブロック Q ── SP375px の追い込み（lp-sp-kaigyou）  2026-10-08
   ★1. 申込み4ステップの説明文は、共通コンポーネント側に
   　  `.lp-body .apply-v2-step-text br { display: none; }`（詳細度 0,2,1）があり、
   　  本文に入っている `<br>` が **PC・SPとも殺されている**。
   　  そのため幅まかせの折り返しになり「必要事／項」「メー／ルで」「始／められます」と
   　  語の途中で割れていた（SP実測・欄幅164px）。
   　  → 本文の改行位置はPC（約196px）・SP（164px）とも適切なので、**両方で有効化**する。
   　  ★この症状は**全LP共通**。他講座でも同じ対処が要る。
   ★2. SPではヒーローの3カードが `static` に戻り、セクション下端と同じ位置で終わるため、
   　  直下の講座名バー（.lp-mv）との間が **16px** しかなく接触して見えた
   　  （kiriki は 46px）。→ ヒーローに下余白を足して 40px にする。
   ========================================================================= */
.lp-body .apply-v2-step-text br { display: inline; }

@media screen and (max-width: 767px) {
  .lp-body .el-hero { padding-bottom: 24px; }
}

/* ★3.（2026-10-09 追記）「日々の学習イメージ」3カードの説明文が、PCで
   　「少しず／つ学習を」「自分の／ペースで」と語の途中で割れていた。
   　原因は `.ss-card-desc` の幅が **shrink-to-fit**（中身に追従）で、
   　文言を短くすると枠も一緒に縮み、孤立行が解消しないこと（実測で 206→181→149px と変動）。
   　→ PCだけ幅を固定して、本文の `<br>` の位置どおりに2行で割れるようにする。
   　　（SPは枠が広く問題ないので 768px 以上に限定）
   ★この症状も**全LP共通**。kiriki でも「少しず／つ学習を」と割れている（実測 2026-10-09）。 */
@media screen and (min-width: 768px) {
  .lp-body .ss-card .ss-card-desc { width: 210px; max-width: 100%; }
}

/* =========================================================================
   追加ブロック R ── el-need の3ステップ図版（2026-10-09 アース支給）
   ★複製元（kiriki）の step1〜3 は**背景が透過したイラスト**だったが、
   　electronics は **1:1 の不透明な写真**（1254/512/1254px・透過率0%・実測）。
   　枠（264px・下揃え・薄アクセント地）にそのまま置くと角が立つので、
   　写真側に角丸を付けて枠の `border-radius: 10px` と馴染ませる。
   ★3枚とも正方形なので、枠内では 240×240 で横並びが揃う（実測）。
   ========================================================================= */
.lp-body #electronics .el-need__proc-fig img { border-radius: 6px; }

/* =========================================================================
   追加ブロック S ── .el-order を【横4列1段】に戻してコンパクトにする
   2026-10-09 ／ アース指示（流体力学 /ryuriki_top/ と同じ見せ方にしたい）
   ─────────────────────────────────────────────────────────────────────────
   ★経緯: 複製元 kiriki の**追加ブロックK（2列×2段の蛇行）**を引き継いでいたため、
   　セクション高さが **2,245px** あった（ryuriki は 1,187px）。
   　K は「教材画像を大きく見せる」ための改変だが、electronics は章ごとの
   　イラストが未手配で、大きな枠が空くだけだった。
   → ryuriki（＝追加ブロックF の素の形）に合わせて **1fr auto 1fr auto 1fr auto 1fr の1段**へ戻す。
   　K のルールは消さず、このブロックで後ろから打ち消している（同詳細度 1,2,0 で後勝ち）。

   ★実測（PC 1920px）: セクション 2,245px → **1,045px**／パネル 476px → **219px**
   　SP（375px）: 3,340px → **2,044px**

   ★`.el-order__cell-txt` は 14px だと 172px の欄で読点の前に折り返したため **13px** にした
   　（ryuriki と同値）。8本とも `<br class="pc-break">` の位置どおりに2行で割れることを実測済み。
   ★イラスト未手配のあいだ `:empty` の仮枠は**出さない**（8枠ぶん縦に伸びるため）。
   　`<img>` を入れれば自動的に枠が復活して表示される。
   ========================================================================= */
@media screen and (min-width: 768px) {
  .lp-body #electronics .el-order__steps {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    grid-template-rows: auto;
  }
  .lp-body #electronics .el-order__steps > *:nth-child(1),
  .lp-body #electronics .el-order__steps > *:nth-child(2),
  .lp-body #electronics .el-order__steps > *:nth-child(3),
  .lp-body #electronics .el-order__steps > *:nth-child(4),
  .lp-body #electronics .el-order__steps > *:nth-child(5),
  .lp-body #electronics .el-order__steps > *:nth-child(6),
  .lp-body #electronics .el-order__steps > *:nth-child(7) {
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }
  .lp-body #electronics .el-order__arw2 { align-self: center; justify-self: center; margin: 0 6px; }
  .lp-body #electronics .el-order__panel { padding: 18px 16px 20px; }
  .lp-body #electronics .el-order__cell,
  .lp-body #electronics .el-order__panel--key .el-order__cell { padding: 8px 6px; }
  .lp-body #electronics .el-order__cell + .el-order__cell,
  .lp-body #electronics .el-order__panel--key .el-order__cell + .el-order__cell {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--lp-accent-line);
  }
  .lp-body #electronics .el-order__panel--key .el-order__cell + .el-order__cell { border-top-color: #E8CDB4; }
  .lp-body #electronics .el-order__cell-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 8px;
  }
  .lp-body #electronics .el-order__cell-ttl { font-size: 16px; }
  .lp-body #electronics .el-order__cell-txt { font-size: 13px; line-height: 1.6; }
  .lp-body #electronics .el-order__ico2,
  .lp-body #electronics .el-order__panel--key .el-order__ico2 {
    flex: 1 1 auto;
    min-height: 150px;
    height: auto;
    margin: 4px 0 0;
  }
  .lp-body #electronics .el-order__ico2 img,
  .lp-body #electronics .el-order__panel--key .el-order__ico2 img {
    width: auto;
    max-width: 100%;
    max-height: 150px;
    margin: 0 auto;
  }
  .lp-body #electronics .el-order__panel--key .el-order__ico2 { min-height: 96px; }
  .lp-body #electronics .el-order__panel--key .el-order__ico2 img { max-height: 96px; }
}

/* イラストが入るまで仮枠は出さない（<img> を入れた瞬間に枠ごと表示される） */
.lp-body #electronics .el-order__ico2:empty,
.lp-body #electronics .el-order__panel--key .el-order__ico2:empty { display: none; }

/* 2026-10-09 追記: SPでも矢印を出さない（アース指示）。
   縦積みでも STEP 1〜4 の番号で順序は伝わるため、PCと見せ方を揃える。
   矢印（26×30 ＋ 上下マージン16px＝58px）が抜けたぶん、`row-gap: 28px` で間隔を確保する。
   実測: セクション 2,400px → 2,310px／パネル間 28px／横スクロールなし */
@media screen and (max-width: 767px) {
  .lp-body #electronics .el-order__arw2 { display: none; }
  .lp-body #electronics .el-order__steps { row-gap: 28px; }
}

/* =========================================================================
   追加ブロック T ── .el-order を「見出しのみ ＋ STEPごとに図版1枚」にする
   2026-10-09 ／ アース判断
   ─────────────────────────────────────────────────────────────────────────
   ★変更の意図:
     ・章ごとの説明文（.el-order__cell-txt ×8）を本文から削除し、章見出しだけにした。
     　詳しい内容は直下の #program（全8章のアコーディオン「この章で学ぶこと」）が持っている。
     ・章ごとのイラスト8枚ではなく、**STEPごとに1枚**（計4枚）に減らす。
     ・PCでは矢印を出さない。STEP 1〜4 の番号で順序は伝わるため
     　（アース指示 2026-10-09）。**SPは縦積みなので下向き矢印を残す**。

   ★2026-10-09 追記（アース指示）:
     章を1つずつ並べるのではなく、**「第1章〜第3章：電気の全体像・直流回路・交流回路」の1行**
     にまとめ、その下にSTEPの図版を1枚置く形にした（本文も `.el-order__range` に差し替え）。
     → 図版枠が **201×190** 取れるようになり、1枚で3章ぶんを表せる。

   ★実測（PC 1920px）: セクション 2,245px →（4列に戻して）1,045px → **958px**
   　パネル 219px → **237px**（矢印3本ぶんの48px×3が横幅に回った）
   　SP（375px）: 3,340px → **2,483px**（図版4枚ぶんを含む）

   ★図版の仕様: **600×480 前後の WebP・各40KB以下**。
   　未挿入のあいだは破線の仮枠「イラスト（600×480）」が出て、`<img>` を入れると自動で消える。
   ========================================================================= */

/* ---- PC: 矢印を出さず4列均等に並べる ---- */
@media screen and (min-width: 768px) {
  .lp-body #electronics .el-order__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 18px;
  }
  .lp-body #electronics .el-order__arw2 { display: none; }
}

/* ---- STEPがカバーする章（1行にまとめる） ---- */
.lp-body #electronics .el-order__range {
  margin: 10px 0 0;
  color: #2D344B;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.lp-body #electronics .el-order__range b {
  display: block;
  margin: 0 0 2px;
  color: #EF6C19;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
/* STEP1 だけ章名が3行になるため、4枚の図版の上端が21pxずれていた。
   章名の欄に最小高さを与えて図版の開始位置を揃える（実測で4枚とも同じ y になった） */
@media screen and (min-width: 768px) {
  .lp-body #electronics .el-order__range { min-height: 63px; }
}

/* ---- STEPごとの図版枠（新クラス。既存クラスの流用はしない） ----
   ★2026-10-09: 当初は薄アクセント色の地（var(--lp-accent-pale)）＋ padding 10px を敷いていたが、
   　支給された図版が**白地のイラスト**だったため、余白だけが水色に見えて浮いた（アース指摘）。
   　→ 地色と余白をやめ、パネルの白地に直接置く。el-need の3枚（追加ブロックU ②）と同じ扱い。 */
.lp-body #electronics .el-order__panel-fig {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}
.lp-body #electronics .el-order__panel-fig img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 170px;
  object-fit: contain;
  border-radius: 6px;
}
/* 素材が届くまでの仮枠。<img> を入れた瞬間に消える（手順書 §12-6 の :empty 方式） */
.lp-body #electronics .el-order__panel-fig:empty {
  display: flex;
  height: 190px;
  border: 1px dashed #F08300;
  background: rgba(255, 248, 240, .6);
}
.lp-body #electronics .el-order__panel-fig:empty::before {
  content: "イラスト（600×480）";
  color: #B45900;
  font-size: 11px;
  font-weight: 700;
}

/* =========================================================================
   追加ブロック U ── 画像まわりの見え方を整える  2026-10-09 ／ アース指摘
   ─────────────────────────────────────────────────────────────────────────
   ① ヒーロー写真が他講座（kiriki など）より小さい
      → 右カラムを 31% → 34% に広げ、さらに**右へはみ出させる**。
        複製元 kiriki は透過イラストを文字に重ねて大きく見せていた（translateX(-180px)）。
        electronics は四角い写真なので**重ねずに右へ逃がす**（追加ブロックP の方針を踏襲）。
        実測 285×190 → **483×322**。見出しの右端1076px／写真の左端1100px で重なりなし。
   ② el-need の3枚に薄アクセント色の枠が付いていた（透過イラスト前提の名残）
      → 枠をやめて写真そのものを見せる。実測 240×240 → **264×264**
   ③ 理由01・03 の図版に白カード（枠線＋余白）が付いていた
      → 写真なのでカードを外し、全面で見せる
   ④ 理由02 のギャラリーだけ、白い枠に対して画像の余白がゼロで窮屈だった
      → padding 8px ＋ 枠線を入れる（回路図なので白地の余白があった方が読める）
   ★②③④は SP でも同じ見え方にしたいのでメディアクエリで囲わない。
   ========================================================================= */

/* ① ヒーロー写真（PCのみ。SPは縦積みなので触らない） */
@media screen and (min-width: 768px) {
  .lp-body .el-hero__inner { grid-template-columns: minmax(0, 1fr) 34%; }
  .lp-body .el-hero__photo { margin: 28px clamp(-170px, calc((960px - 100vw) / 2), 0px) 0 0; }
  .lp-body .el-hero__photo img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
  }
}

/* ② el-need の3枚：枠をやめる */
.lp-body #electronics .el-need__proc-fig {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.lp-body #electronics .el-need__proc-fig img { border-radius: 10px; }

/* ③ 理由01・03 の図版：白カードを外す */
.lp-body #electronics .el-reason__fig {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ④ 理由02 のギャラリー：画像の内側に余白を入れる */
.lp-body #electronics .el-reason__shot {
  padding: 8px;
  border: 1px solid #DCE8EC;
  background: #FFFFFF;
}

/* =========================================================================
   追加ブロック V ── 「設計で回路を考える流れ」を3段の縦読みに作り替える
   2026-10-09 ／ アース支給モック（モック/electronics-design-flow-compact-20261009.html）
   ─────────────────────────────────────────────────────────────────────────
   ★作り替えた理由:
     旧 `.el-axis__steps` は「上段が左→右、下段が右→左」の蛇行で、1〜6 の読み順が追いにくかった。
     → **左に段階の見出し／右に手順2つ**の3段構成にし、1〜6 を上から下へ読ませる。
       6個の囲み枠と大きな方向矢印は廃止し、番号＋細い縦線と薄い横線で段階を示す。

   ★★クラス名は `.el-dflow`（design flow）。
     最初 `.el-flow` で作ったところ、**複製元 kiriki から引き継いだ未使用の `.el-flow` 一式（34ルール）**
     に当たってレイアウトが崩れた（`.el-flow { display:flex }` ほか）。
     → 手順書 §12-5「新しい見た目には新しいクラス名を付ける」。
       **未使用セクションのCSSが残っているLPでは、名前の衝突を必ず先に grep すること。**
     残っている未使用接頭辞: scope / solve / ans / tool / cat / super / ba / flow / after / load / case / conc

   ★`text-align: left` を明示しているのは、親から中央寄せが継承されるため（実測で右寄りに見えた）。
   ★実測（PC 1920px）: `.el-dflow` 1000×640／段 1000×117 ×3／番号6個とも左端 689px で一直線
   　SP（375px）: 838px・1→6 の順に縦並び・孤立行0件・横スクロールなし

   ★★2026-10-09 追記（アース判断）: **3段6手順は本文から削除した。**
   　理由: 直前の `el-order`（STEP1〜4）と「順番」の役割が重なり、内容も
   　　　　「要求を整理 → 構成を検討 → 図面で共有」と一般的で、この講座ならではの価値ではないため。
   　→ 本文に残したのは **`__takeaway`（結論帯）と `__bridge`（次セクションへの接続文）だけ**。
   　　`__eyebrow` / `__title` / `__lead` / `__phases` / `__phase` / `__step` / `__num` / `__tag` の
   　　ルールは**在庫として残してある**（本文にマークアップを戻せばそのまま効く）。
   　★他4講座（機械力学・流体・振動・伝熱）には6ステップが入ったまま。**電子回路だけ構成が違う。**
   　実測: `.el-axis` 1,242px → **762px**／ページ全体 18,281px → **17,802px**
   ========================================================================= */
.lp-body #electronics .el-dflow { margin: 34px 0 0; }
.lp-body #electronics .el-dflow__eyebrow { text-align: left; margin: 0 0 6px; color: var(--lp-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.lp-body #electronics .el-dflow__title { text-align: left; margin: 0 0 8px; color: #123F6D; font-size: 24px; font-weight: 900; line-height: 1.5; letter-spacing: .025em; }
.lp-body #electronics .el-dflow__lead { text-align: left; margin: 0 0 18px; color: #536B7A; font-size: 14px; font-weight: 600; line-height: 1.8; }
.lp-body #electronics .el-dflow__phases { margin: 0; }
.lp-body #electronics .el-dflow__phase { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 26px; padding: 16px 0; border-top: 1px solid var(--lp-accent-line); }
.lp-body #electronics .el-dflow__phase-head { align-self: start; padding: 4px 0 4px 14px; border-left: 3px solid var(--lp-accent); text-align: left; }
.lp-body #electronics .el-dflow__tag { display: block; color: var(--lp-accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.lp-body #electronics .el-dflow__phase-ttl { margin: 5px 0 0; color: #123F6D; font-size: 17px; font-weight: 900; line-height: 1.55; }
.lp-body #electronics .el-dflow__steps { margin: 0; padding: 0; list-style: none; }
.lp-body #electronics .el-dflow__step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 13px; margin: 0; padding: 5px 0 7px; }
.lp-body #electronics .el-dflow__step::before,
.lp-body #electronics .el-dflow__step::after { content: none; }
.lp-body #electronics .el-dflow__step + .el-dflow__step::before { content: ""; position: absolute; left: 14px; top: -14px; height: 20px; width: 2px; background: #CBE7F0; }
.lp-body #electronics .el-dflow__num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lp-accent); color: #FFFFFF; font-size: 13px; font-weight: 800; line-height: 1; }
.lp-body #electronics .el-dflow__step-txt { text-align: left; margin: 0; color: #123F6D; font-size: 14px; font-weight: 700; line-height: 1.7; }
.lp-body #electronics .el-dflow__phase--last .el-dflow__phase-head { border-left-color: #EF6C19; }
.lp-body #electronics .el-dflow__phase--last .el-dflow__tag { color: #EF6C19; }
.lp-body #electronics .el-dflow__phase--last .el-dflow__num { background: #123F6D; }
.lp-body #electronics .el-dflow__takeaway { margin: 18px 0 0; padding: 14px 20px; background: #FFF6ED; border-left: 4px solid #EF6C19; }
.lp-body #electronics .el-dflow__takeaway-lead { text-align: left; margin: 0; color: #123F6D; font-size: 16px; font-weight: 900; line-height: 1.7; }
.lp-body #electronics .el-dflow__takeaway-sub { text-align: left; margin: 4px 0 0; color: #657583; font-size: 13px; font-weight: 600; line-height: 1.8; }
.lp-body #electronics .el-dflow__bridge { margin: 20px 0 0; color: #577183; font-size: 13px; font-weight: 600; line-height: 1.9; text-align: center; }
.lp-body #electronics .el-dflow__bridge strong { display: block; margin-top: 4px; color: #123F6D; font-size: 15px; font-weight: 900; }

@media screen and (max-width: 767px) {
  .lp-body #electronics .el-dflow { margin: 26px 0 0; }
  .lp-body #electronics .el-dflow__title { font-size: 21px; }
  .lp-body #electronics .el-dflow__lead { font-size: 13px; margin-bottom: 14px; }
  .lp-body #electronics .el-dflow__phase { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; }
  .lp-body #electronics .el-dflow__phase-head { padding: 0 0 0 12px; }
  .lp-body #electronics .el-dflow__phase-ttl { font-size: 16px; }
  .lp-body #electronics .el-dflow__step-txt { font-size: 13px; }
  .lp-body #electronics .el-dflow__takeaway { padding: 14px 16px; }
  .lp-body #electronics .el-dflow__takeaway-lead { font-size: 15px; }
  .lp-body #electronics .el-dflow__bridge { font-size: 12px; }
  .lp-body #electronics .el-dflow__bridge strong { font-size: 13px; }
}

/* =========================================================================
   追加ブロック W ── ファーストビュー3カードの「対象者」が枠からあふれていた
   2026-10-09 ／ アース指摘
   ─────────────────────────────────────────────────────────────────────────
   ★症状（実測・PC 1920px）:
     ・見出し「機械・電気の設計者」が 30px で **276px**。カードの内寸は **256px** のため
     　「者」1文字が2行目に落ちていた
     ・説明文が3行になり、カード（min-height 224px 固定）から **30px はみ出していた**
   ★原因: 他講座の対象者は1行で収まる文字数（例: 機械力学「初心者〜中堅」）。
     　　　electronics は**機械設計者と電気設計初心者の2本立て**で文字数が多い（§1-11）。
   → カード3枚目だけに修飾クラスを付けて、見出しの文字サイズと説明文の字間を詰める。
     あわせて本文の説明文を2行に収まる長さへ（「電気設計初心者の方」→「電気設計者」。
     0〜3年未満という条件で初心者であることは伝わる）。
   ★実測（修正後）: 見出し 239px で1行／説明文 234・245px の2行／はみ出し 0
   　SP 375px: 見出し 202px で1行（22px）／説明文 207・217px ／はみ出し 0
   ========================================================================= */
.lp-body #electronics .feature-overview__main--sm { font-size: 26px; }
.lp-body #electronics .feature-overview__desc--sm { letter-spacing: 1.2px; }

@media screen and (max-width: 767px) {
  .lp-body #electronics .feature-overview__main--sm { font-size: 22px; }
}

/* =========================================================================
   追加ブロック X ── el-need の3枚の間の矢印をPCでは出さない
   2026-10-09 ／ アース指摘「矢印が小さくて違和感がある」
   ─────────────────────────────────────────────────────────────────────────
   ★矢印の実測は **26×15px**。写真が 264×264 と大きいため、相対的に小さく見えていた。
     STEP 01〜03 のバッジで順序は伝わるので、**PCでは矢印を出さず**、
     空いた46px×2の列を写真の幅に回す（el-order と同じ判断・追加ブロックT）。
   ★**SPは縦積みなので下向き矢印を残す**（本文からは削除していない）。
   ★実測: 写真 264×264（変わらず）／各列 303px → **316px**／セクション 1,668px(SP)・903px(PC)
   ========================================================================= */
@media screen and (min-width: 768px) {
  .lp-body #electronics .el-need__proc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 26px;
  }
  .lp-body #electronics .el-need__proc-arw { display: none; }
}

/* 2026-10-09 追記: SPでも矢印を出さない（アース確認）。
   縦積みでも STEP 01〜03 のバッジで順序は伝わるため、PCと見せ方を揃える。
   矢印（34×22＋上下マージン16px＝54px）が抜けたぶん、`row-gap: 28px` で間隔を確保する。
   実測: セクション 1,668px → 1,616px／カード間 28px／横スクロールなし */
@media screen and (max-width: 767px) {
  .lp-body #electronics .el-need__proc-arw { display: none; }
  .lp-body #electronics .el-need__proc { row-gap: 28px; }
}

/* =========================================================================
   追加ブロック Y ── ヒーロー写真を「角丸＋影のカード」から【縁フェード】へ
   2026-10-16 ／ アース指摘「他のLPと体裁が違う。縁をフェードでなじませたい」
   ─────────────────────────────────────────────────────────────────────────
   ★他講座のFV画像を実測したところ、**全て背景が透過した切り抜き画像**だった。
       kiriki   : img_hero_robot_dynamics_transparent.webp（object-fit: contain／角丸0・影なし）
       ryuriki  : fv_ryuriki.webp（同上）
     つまり**ハウススタイルは「枠も影もない、背景に溶けた画像」**。
     electronics だけ四角い写真なので、追加ブロックP で角丸14px＋影を付けて
     「カード」として見せていた。これが浮いて見えていた原因。
   ★切り抜き画像を作り直さずにハウススタイルへ寄せるため、
     **4辺を透明へフェードさせるマスク**で縁を消す。写真の矩形が見えなくなり、
     背景のグリッドが縁から透ける＝透過イラストと同じ見え方になる。
   ★マスクは【2枚のリニアグラデーションの積（intersect）】で作る。
     radial-gradient 1枚だと中央だけ残って四隅が大きく欠け、横長写真では
     被写体まで削れる（実測で確認）。4辺リニアなら矩形のまま縁だけ溶ける。
   ★`mask-composite: intersect` 非対応の古い環境では、重なりが既定の add になり
     「上下だけフェード」で描画される。破綻はしないので fallback は置かない。
   ★SPの `.el-hero__photo img` には複製元(kiriki)の下方向フェード
     （linear-gradient 180deg／9566行付近）が当たっているが、
     `#electronics` 付き (1,2,0) でこちらが勝つ。メディアクエリで囲まないこと。
   ★実測: PC 483×322・SP 328×180（サイズは変えていない）／横スクロールなし
   ★透過イラストが支給されたら、このブロックと追加ブロックP を削除して
     複製元の重ね表示（translateX(-180px)）に戻す。
   ========================================================================= */
.lp-body #electronics .el-hero__photo img {
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
          mask-image:
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* 2026-10-16 追記: アース指示「ほんの少し左へ／画像を10%大きく」。
   ★`width` ではなく **transform: scale(1.1) + transform-origin: left center** で拡大する。
     width を 110% にすると図版が左右へ均等に広がり、**見出しとのすき間が
     62px → 10px** まで詰まる（実測）。origin を left にすると右へだけ伸びるので、
     左の余白を食わずに10%大きくできる。
   ★左への移動は **1100px 以上のときだけ**。見出しと写真のすき間の実測値は
     1100px以上で62px、**768pxでは24pxしかない**ため、狭い幅で左へ寄せると接触する。
   ★`translateX(-24px) scale(1.1)` の順序が重要。translate を先に書くと
     移動量が拡大率の影響を受けず、指定どおり24pxになる。
   ★SPは触らない（@media min-width:768px で囲う）。SPは1カラム中央寄せのため
     拡大すると右へはみ出して横スクロールが出る。
   ★実測（すき間／写真サイズ／横スクロール）
       1920px: 38px ／ 531×354 ／ なし      1280px: 38px ／ 512×341 ／ なし
       1100px: 38px ／ 413×275 ／ なし      1024px: 62px ／ 371×247 ／ なし
        900px: 82px ／ 318×211 ／ なし       768px: 24px ／ 268×179 ／ なし
        375px: 変更なし（328×180）          414px: 変更なし（367×180） */
@media screen and (min-width: 768px) {
  .lp-body #electronics .el-hero__photo img {
    transform-origin: left center;
    transform: scale(1.1);
  }
}
@media screen and (min-width: 1100px) {
  .lp-body #electronics .el-hero__photo img {
    transform: translateX(-24px) scale(1.1);
  }
}

/* =========================================================================
   追加ブロック Z ── FV3カードを写真の真下へ移し、リード文を削除する
   2026-10-16 ／ アース指摘「3つのカードを画像の下に整列させた方が見栄えが良い」
   ─────────────────────────────────────────────────────────────────────────
   【本文側も変更している】`<p class="el-hero__note">`（リード文2行）を削除した。
     見出しだけにして、写真＋3カードの右カラムと視覚的に釣り合わせる狙い。
   ★`.el-hero__cards` は複製元(kiriki)から **position: absolute（right:0 / bottom:30px、
     基準は .el-hero__inner）** を引き継いでいる。だから写真が
     ネガティブマージンで右へはみ出しても**カードだけ内側(1433px)で止まり**、
     写真とズレて見えていた。これが原因。
   → **absolute をやめて通常のグリッドアイテムに戻し**、写真と同じ
     「col2・右へはみ出すマージン」を与えて左右端を一致させる。
     text を `grid-row: 1 / span 2` で縦に通し、col2 に 写真(row1) → カード(row2) を積む。
   ★**1280px 以上限定**にしている。これより狭いと col2 が細く、
     3カード各132px以下になって「信号処理とマイコン」が2行に折り返す（1200pxで実測）。
     1280px未満は従来どおり（absolute／960px以下は静的な全幅）。
   ★`align-items: start` が要る。既定の stretch だと row1 が text の高さまで伸び、
     カードが写真のはるか下に落ちる。text 側は `align-self: center` で元の見え方を保つ。
   ★`margin-top` は **20px**。写真は scale(1.1) で見た目が箱より16px下まで伸びるため、
     20px 指定で視覚的な間隔が約28pxになる（実測）。
   ★実測（写真の箱／カードの箱／間隔／カード幅／副文の行数／横スクロール）
       1920px: 1092→1575 ／ 1092→1575 ／ 28px ／ 152px ／ 1行 ／ なし
       1280px:  780→1245 ／  780→1245 ／ 29px ／ 146px ／ 1行 ／ なし
       1279px以下: 従来の配置（変更なし）
   ========================================================================= */
@media screen and (min-width: 1280px) {
  .lp-body #electronics .el-hero__inner { align-items: start; }
  .lp-body #electronics .el-hero__text {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .lp-body #electronics .el-hero__photo { grid-column: 2; grid-row: 1; }
  .lp-body #electronics .el-hero__cards {
    position: static;
    grid-column: 2;
    grid-row: 2;
    width: auto;
    margin: 20px clamp(-170px, calc((960px - 100vw) / 2), 0px) 0 0;
  }

  /* 2026-10-16 追記①: リード文を【1文＝1行】の2行に収める（アース指示）。
     ★`.el-hero__note` の `max-width: 440px` は、**3カードが右下に絶対配置だった頃**に
       「リード文がカードの下へ潜り込まないよう幅を絞る」ために入れた制約
       （元ルールのコメント参照）。上でカードを右カラムへ移したので**制約は不要になった**。
     ★canvas measureText で必要幅を実測: 1文目 510px／2文目 542px。
       左カラムは583pxあるので **560px** で両方1行に収まる。
     ★実測（1920px）: 1行目 508px ／ 2行目 542px ／ 高さ 119px → **60px**（4行→2行）
     ★1279px以下は従来どおり440pxのまま（カードが絶対配置に戻るため制約が生きる） */
  .lp-body #electronics .el-hero__note { max-width: 560px; }

  /* 2026-10-16 追記②: カードと下の「電子回路入門講座」帯の接触を防ぐ（アース指摘）。
     ★`.lp-mv`（帯）は `.el-hero` に **6px 食い込んでいる**。従来はリード文4行ぶんの
       高さでヒーローが稼げていたので表面化しなかったが、カードを右カラム下端へ
       移し、さらにリード文が2行になって**ヒーローが562px→533pxに縮み**、
       カードの下端が帯に触れた（実測 すき間 -6px）。
     ★ヒーローの下に 30px の余白を確保して解消する。
     ★実測: 1920px **33px** ／ 1280px **39px** ／ 1279px以下 24px（従来どおり） */
  .lp-body #electronics .el-hero__inner { padding-bottom: 30px; }
}