@charset "UTF-8";

/* =========================================================================
   lp_sheetmetal.css ── 板金部品設計入門講座（sheetmetal）専用LPスタイル
   作成: 2026-08-20 ／ 複製元: lp_machining.css（切削部品設計入門・2026-08-17時点）
   　　　　　　　　　　（さらにその元は lp_zairyou.css／機械材料入門）
   ─────────────────────────────────────────────────────────────────────────
   対象ページ（テストサイト monoweb.org）:
     LP 47310 sheetmetal_top ／ お申込み 47326 sheetmetal_paidseminar-order
     ／ お問い合わせ 47328 sheetmetal_ask
   その他: サンプル動画 47312 ／ お客様の声 47314 ／ よくある質問 47320（スラッグは sheetmetal_qa）
   商品ID: 一括 205(course16_p) ／ 6回分割 207(course16_p6) ／ 法人 206(course16_com)

   複製時に変えたところ（着手メモ §2）:
     1. #machining-order → #sheetmetal-order ／ #machining → #sheetmetal
     2. ma- → sm-（クラス・カスタムプロパティとも。941箇所）
     3. .faqm-theme--machining → .lp-body .faqm-theme--sheetmetal（#009193 / #007476）
     4. ヘッダーと講座依存コメントを板金用に更新

   ★変更していないもの（板金と切削はアクセント色が同一 #009193 のため／2026-08-20 アース判断）:
     ・--lp-accent* 6変数（#009193 系）
     ・filter 2式（.lp-form .ttl img は #0989B1 から／#faq-sec .faq-icon は black から。
       元色が違うので式は別物。使い回さないこと）
     ・curriculum スライドの aspect-ratio 760/428（板金の29枚すべて 760×428・実測）
     ・セクション背景の交互配色（白 / #E8F3F3 / #F7FBFB）

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

*, *::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 で実測して総当たりで求めた。
   → sheetmetal は #0989B1 → #009193（目標 #009193 との差 0。machining と同一色のため式を流用）。
   ★★`.faq-icon` とは【別式】。あちらの元色は **black** で、黒は彩度0のため
     hue-rotate/saturate が効かず、invert から作る必要がある（2026-08-16 判明）。
   ★アクセント色を変えたら、この filter と .faq-icon の filter を
     **それぞれの元色（#0989B1 / black）から**再計算すること。式を使い回さないこと。 */
.lp-body .lp-form .ttl img {
  filter: hue-rotate(-16deg) saturate(1.1) brightness(0.99);
}

.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:      #009193;  /* 主アクセント（旧LP style_sheetmetal.css の主色・実測30回。切削machiningと同一色） */
  --lp-accent-dark: #007476;  /* ホバー・濃      （accent × 0.8） */
  --lp-accent-soft: #E7F4F5;  /* 見出し薄帯・面  （白 90.41%混色。zairyou の比率を踏襲） */
  --lp-accent-pale: #F2F9FA;  /* 最も薄い面      （白 94.98%混色） */
  --lp-accent-line: #C7E7E7;  /* 罫線            （白 78.08%混色） */
  --lp-accent-mid:  #9ED5D6;  /* 中間色（数字等）（白 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; }
}

/* PC専用の改行ユーティリティ。768px以上でだけ改行される。
   ★以前は .sm-reason__note の中でしか効かなかったので、全体で使えるようにした（2026-08-28） */
.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 → #sheetmetal-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(#sheetmetal-order) header.l-header.p-header .p-header__inner__bottom,
.lp-body:has(#sheetmetal-order) header.l-header.p-header .p-header__float { display: none !important; }

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

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

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

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

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

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

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

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

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

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


/* =========================================================================
   モーター選定でよくある悩み（.sm-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 .sm-worry {
  --sm-sec-bg: #EDF4F6;   /* .sm-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 .sm-worry__inner { width: min(1000px, 100%); margin: 0 auto; }

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

/* =========================================================================
   カリキュラム上部のサンプル動画（.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;
}

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

   ★図版（製品4点 → 「製品に求められる条件が違う」 → 特性6項目）は
     アース支給の画像1枚。写真と細かい線・アイコンの集合体なのでCSSでは作らない。
     空のあいだは :empty の仮枠が出て、<img> を入れると自動で消える。
   ★このセクションのクラス名は .sm-need。motor 時代の「なぜ〜難しいのか」ブロック
     （旧 za-why 一式）は machining 化の際に削除済みなので、名前の衝突はもう無い。
   ★背景は【白＋方眼】。上の .feature-sec も白なので、方眼のテクスチャで区切りを作っている。
     薄い色にすると下の .sm-worry（#E8F3F3）とRGB差が10未満になり境目が消える（§12-3）。
   ========================================================================= */
.lp-body .sm-need {
  position: relative;
  padding: 56px 20px 48px;
  background: #FFFFFF;
  overflow: hidden;
}
.lp-body .sm-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 .sm-need__inner { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; }
.lp-body .sm-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 .sm-need__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--lp-accent);
}
.lp-body .sm-need__hl { color: #EF6C19; }
.lp-body .sm-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枚組だったので、下の .sm-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 .sm-need__fig { margin: 0 0 28px; text-align: center; }
.lp-body .sm-need__fig picture { display: block; }
/* セレクタに #sheetmetal が要る理由は .sm-worry__hero img のコメント参照 */
.lp-body #sheetmetal .sm-need__fig img {
  display: block;
  width: 100%; max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.lp-body .sm-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 .sm-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 .sm-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 .sm-need__flow-item { position: relative; margin: 0; }
.lp-body #sheetmetal .sm-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 .sm-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 .sm-need__flow-label { font-size: 16px; padding: 5px 20px; }
}
@media screen and (max-width: 767px) {
  /* ★SPは縦積みにする。3列のままだと1枚あたり110pxになり、写真の中身が読めない */
  .lp-body .sm-need__flow { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
  .lp-body .sm-need__flow-label { font-size: 15px; bottom: 10px; }
}

/* ---- 結論ボックス ----
   .sm-worry の結論は【橙の枠】。ここで同じ枠を使うと2つ続けて同じ強さになるので、
   こちらは【薄い面＋細い罫線】にして、下の .sm-worry へ強さが上がる並びにしている */
/* ★2026-08-20 sheetmetal: 結論ボックスの地色を青緑系にそろえた。
   zairyou 由来の #F6F9F3 / #DCE6D6（薄い緑）はアクセント #009193 と系統が合わなかった。
   値は --lp-accent-pale / --lp-accent-line と同じ。 */
.lp-body .sm-need__concl {
  padding: 22px 26px;
  background: #F2F9FA;
  border: 1px solid #C7E7E7; border-radius: 14px;
  box-sizing: border-box;
}
.lp-body .sm-need__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 24px; font-weight: 900; line-height: 1.55;
  text-align: center;
}
.lp-body .sm-need__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .sm-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 .sm-need__title { font-size: 25px; }
  .lp-body .sm-need__lead { font-size: 15px; }
  .lp-body .sm-need__concl-lead { font-size: 19px; }
}
@media screen and (max-width: 767px) {
  .lp-body .sm-need { padding: 40px 16px 34px; }
  .lp-body .sm-need__title { font-size: 20px; line-height: 1.55; }
  .lp-body .sm-need__lead { font-size: 14px; line-height: 1.85; text-align: left; margin-bottom: 20px; }
  .lp-body .sm-need__fig:empty { min-height: 200px; }
  .lp-body .sm-need__fig:empty::before { font-size: 12px; padding: 0 16px; text-align: center; }
  .lp-body .sm-need__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .sm-need__concl-lead { font-size: 17px; }
  .lp-body .sm-need__note { font-size: 13px; text-align: left; }
}

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

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


/* =========================================================================
   .sm-order を【STEPパネル4枚】に組み替え  2026-08-20（アース支給モック）
   ─────────────────────────────────────────────────────────────────────────
   移植元：切削部品設計入門講座（machining 33882）の .ma-order__panel 一式。
   もとは zairyou 由来の「丸6つ＋折り返し」だったが、モックに合わせて
   【STEP 1〜4 のパネル＋あいだに矢印】にした。
   ★これに伴い次の指定は使わなくなった（本文からも要素ごと削除済み）:
     .sm-order__flow / __step / __circle / __num / __ico / __txt / __turn
     仕上げの棚卸しでまとめて削除すること。
   ★矢印（.sm-order__arw2）は【軸のある通常の矢印】。三角だけにしないこと（アース指示）。
     clip-path の polygon は「軸の左上→軸の右上→傘の上→先端→傘の下→軸の右下→軸の左下」の順。
   ★2026-08-26 列幅を machining と同じ 1.18/2.15/1/1.09 にそろえた。
     STEPの並びを切削と共通化して、key（中身が多いパネル）が STEP2 になったため。
     08-20 は STEP3 が key だったので 1/1/1.7/1 にしていた。
   ========================================================================= */
.lp-body .sm-order__steps {
  display: grid;
  grid-template-columns: 1.18fr auto 2.15fr auto 1fr auto 1.09fr;
  align-items: stretch; gap: 0;
  margin: 30px 0 0;
}
.lp-body .sm-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 .sm-order__panel--key { background: #FFF9F4; border-color: #F2D6BC; }
.lp-body .sm-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 .sm-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 .sm-order__panel--key .sm-order__step-ttl { border-bottom-color: #F2D6BC; }
.lp-body .sm-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 .sm-order__cell {
  display: flex; flex-direction: column;
  margin: 0; padding: 8px 6px; min-width: 0; box-sizing: border-box;
}
.lp-body .sm-order__cell::before,
.lp-body .sm-order__cell::after { content: none; display: none; }
/* ★2026-08-26 STEPの並びを切削（machining）と共通化したのに合わせて、
   key パネルを【2列×2行】に戻した（machining と同じ形）。
   経緯：08-20 は STEP3 が key で中身3つだったので「縦積み＋文字左・イラスト右」にしていたが、
   　　　共通化で key が STEP2・中身4つになったため、2列のほうが縦に伸びない。
   ★セルの区切りは破線。1・2番目は上の線なし、偶数番目に左の線。 */
.lp-body .sm-order__panel--key .sm-order__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-body .sm-order__panel--key .sm-order__cell { border-top: 1px dashed #E8CDB4; }
.lp-body .sm-order__panel--key .sm-order__cell:nth-child(-n+2) { border-top: 0; }
.lp-body .sm-order__panel--key .sm-order__cell:nth-child(2n) { border-left: 1px dashed #E8CDB4; }
.lp-body .sm-order__cell-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 0 0 8px;
}
.lp-body .sm-order__cell-no {
  flex: 0 0 auto;
  padding: 5px 10px; border-radius: 6px;
  background: var(--lp-accent);
  color: #FFFFFF; font-size: 13px; font-weight: 800; line-height: 1;
}
.lp-body .sm-order__cell-ttl { display: block; color: #123F6D; font-size: 15px; font-weight: 900; line-height: 1.45; }
.lp-body .sm-order__cell-txt { color: #2D344B; font-size: 13px; font-weight: 600; line-height: 1.6; }
.lp-body .sm-order__ico2 {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; width: 100%; min-height: 150px; margin-top: 4px;
}
.lp-body .sm-order__panel--key .sm-order__ico2 { height: 96px; min-height: 0; margin: 0; }
.lp-body #sheetmetal .sm-order__ico2 img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 150px; margin: 0 auto;
}
.lp-body #sheetmetal .sm-order__panel--key .sm-order__ico2 img { max-height: 96px; }
/* イラスト未作成のあいだの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .sm-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 .sm-order__panel--key .sm-order__ico2:empty { height: 96px; margin: 0; }
.lp-body .sm-order__ico2:empty::before { content: "イラスト"; color: #B45900; font-size: 11px; font-weight: 700; }
.lp-body .sm-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 .sm-order__panel { padding: 16px 12px 18px; }
  .lp-body .sm-order__cell-no { padding: 4px 8px; font-size: 12px; }
  .lp-body .sm-order__cell-ttl { font-size: 14px; }
  .lp-body .sm-order__cell-txt { font-size: 12px; }
  .lp-body .sm-order__ico2 { min-height: 120px; }
  .lp-body #sheetmetal .sm-order__ico2 img { max-height: 120px; }
  .lp-body .sm-order__panel--key .sm-order__ico2 { height: 92px; }
  .lp-body #sheetmetal .sm-order__panel--key .sm-order__ico2 img { max-height: 80px; }
  .lp-body .sm-order__arw2 { width: 22px; height: 20px; margin: 0 6px; }
}
@media screen and (max-width: 900px) {
  /* ★1列に折り返す。矢印は90度回して縦向きにする */
  .lp-body .sm-order__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-body .sm-order__arw2 { transform: rotate(90deg); margin: 10px auto; }
  .lp-body .sm-order__ico2 { min-height: 110px; }
  .lp-body #sheetmetal .sm-order__ico2 img { max-height: 110px; }
}
@media screen and (max-width: 767px) {
  .lp-body .sm-order__step-ttl { font-size: 16px; margin-bottom: 12px; padding-bottom: 10px; }
  .lp-body .sm-order__step-no { font-size: 12px; }
  .lp-body .sm-order__cell-no { padding: 5px 10px; font-size: 13px; }
  .lp-body .sm-order__cell-ttl { font-size: 15px; }
  .lp-body .sm-order__cell-txt { font-size: 13px; }
  .lp-body .sm-order__ico2 { min-height: 92px; }
  .lp-body #sheetmetal .sm-order__ico2 img { max-height: 92px; }
  .lp-body .sm-order__panel--key .sm-order__ico2 { height: 76px; }
  .lp-body #sheetmetal .sm-order__panel--key .sm-order__ico2 img { max-height: 76px; }
}

/* ---- 結論ボックス（.sm-worry と同じ橙の枠） ---- */
.lp-body .sm-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 .sm-order__concl-lead {
  margin: 0;
  color: #123F6D; font-size: 20px; font-weight: 900; line-height: 1.6;
  text-align: center;
}
.lp-body .sm-order__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .sm-order__note {
  margin: 20px 0 0;
  color: #4A5568; font-size: 15px; font-weight: 600; line-height: 1.8;
  text-align: center;
}
.lp-body .sm-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 .sm-order__concl-lead { font-size: 18px; }
}
@media screen and (max-width: 900px) {
  /* ★2列にはしない。横矢印と縦矢印が混在して意味が読めなくなるため、
     900px以下は【1列縦積み＋各ステップのあいだを ↓ でつなぐ】に切り替える（§12-8） */
  .lp-body .sm-order__title { font-size: 25px; }
  .lp-body .sm-order__lead { font-size: 15px; margin-bottom: 26px; }
  
  
  
  
  
  
  
  .lp-body .sm-order__concl-lead { font-size: 18px; }
}
@media screen and (max-width: 767px) {
  .lp-body .sm-order { padding: 40px 16px 34px; }
  .lp-body .sm-order__title { font-size: 20px; line-height: 1.55; }
  .lp-body .sm-order__lead { font-size: 14px; line-height: 1.85; text-align: left; }
  
  
  
  
  
  .lp-body .sm-order__concl { padding: 18px 16px; border-radius: 12px; }
  .lp-body .sm-order__concl-lead { font-size: 16px; }
  .lp-body .sm-order__note { font-size: 13px; text-align: left; }
}

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

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

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

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

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

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

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

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

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


.lp-body .sm-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 .sm-worry__txt { margin: 0; color: #2D344B; font-size: 15px; font-weight: 600; line-height: 1.75; }

/* =========================================================================
   .sm-worry を【写真1枚＋悩み3つの横並び】に組み替え  2026-08-26（アース指示）
   ─────────────────────────────────────────────────────────────────────────
   移植元：樹脂部品設計入門講座（jusi）の .ju-worry__panel 一式。
   経緯：zairyou 由来の「中央に人物＋3カード＋接続線SVG」→ 08-20 に「写真つき3カード」→
   　　　08-26 に樹脂と同じ【1枚の写真＋右に悩み3つ】へ統一。
   ★写真は1枚だけ。3枚並べると同じ人物が3回出て、かえって散らかって見えた。
   ★これに伴い次の指定は使わなくなった（本文からも要素ごと削除済み）:
     .sm-worry__stage / __hero / __links / __ico / __cat / __cards / __card / __ph / __ttl /
     .sm-worry__card--start / --book / --work
   ========================================================================= */
.lp-body .sm-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;
}
/* 写真：1200×820（比 1.46）。比の違う画像が来ても枠は崩れない（cover で受ける） */
.lp-body .sm-worry__photo {
  margin: 0; aspect-ratio: 1200 / 820;
  border-radius: 12px; overflow: hidden; background: #F2F5F7;
}
.lp-body #sheetmetal .sm-worry__photo img {
  display: block; width: 100%; height: 100%; margin: 0;
  object-fit: cover; object-position: center;
}
.lp-body .sm-worry__photo:empty {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #F08300; background: rgba(255, 248, 240, .6);
}
.lp-body .sm-worry__photo:empty::before {
  content: "写真準備中（1440×960）"; color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .sm-worry__list { margin: 0; padding: 0 6px 0 0; list-style: none; }
.lp-body .sm-worry__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 12px; margin: 0; padding: 16px 0;
}
/* 2つ目以降だけ上に細い区切り線（先頭に線が出ると写真の上端から浮く） */
.lp-body .sm-worry__item + .sm-worry__item { border-top: 1px solid #DCE8EC; }
.lp-body .sm-worry__item::before,
.lp-body .sm-worry__item::after { content: none; display: none; }
.lp-body .sm-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 .sm-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 .sm-worry__desc {
  grid-column: 2; grid-row: 2; margin: 0;
  color: #4A5568; font-size: 13px; font-weight: 600; line-height: 1.75;
}
@media screen and (max-width: 900px) {
  /* ★900px以下は縦積み。横並びのままだと写真も文字も潰れる */
  .lp-body .sm-worry__panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-body .sm-worry__list { padding: 0; }
  .lp-body .sm-worry__h3 { font-size: 18px; }
  .lp-body .sm-worry__desc { font-size: 14px; }
}
@media screen and (max-width: 767px) {
  .lp-body .sm-worry__panel { margin-top: 22px; padding: 12px; border-radius: 14px; }
  .lp-body .sm-worry__item { padding: 14px 0; gap: 0 10px; }
  .lp-body .sm-worry__no { font-size: 12px; padding: 4px 12px; }
  .lp-body .sm-worry__h3 { font-size: 16px; }
  .lp-body .sm-worry__desc { font-size: 13px; }
}


/* ---- 結論ボックス ----
   ★2026-08-26 樹脂（jusi）と同じ【うすい橙の面＋細い罫線】に変更（アース指示）。
     以前は「白地＋橙2pxの枠＋右にシェブロン」だったが、
     上のパネルが白なので、白い箱が2つ続いて境目が弱かった。
     面に色を敷くと、パネル（白）→ 結論（うすい橙）→ 橋渡し（地色）と段が付く。
   ★シェブロン（.sm-worry__concl-chev）は使わなくなった。本文からも削除済み。 */
.lp-body .sm-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 .sm-worry__concl-lead {
  margin: 0 0 6px;
  color: #123F6D; font-size: 23px; font-weight: 900; line-height: 1.5;
  text-align: center;
}
.lp-body .sm-worry__concl-lead b { color: #EF6C19; font-weight: 900; }
.lp-body .sm-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 の「結論 → 次へ」の合図（.sm-conc__arrow と同じ役割）。 */
.lp-body .sm-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 .sm-worry__bridge b { color: #EF6C19; font-weight: 900; }
.lp-body .sm-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 .sm-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 .sm-worry__concl-lead { font-size: 21px; }
  .lp-body .sm-worry__concl-sub { font-size: 15px; }
  .lp-body .sm-worry__bridge { font-size: 17px; margin-top: 22px; }
}
@media screen and (max-width: 767px) {
  .lp-body .sm-worry__lead { font-size: 14px; margin-bottom: 22px; text-align: left; }
  .lp-body .sm-worry__card { padding: 18px 18px 20px; border-radius: 14px; }
  
  
  .lp-body .sm-worry__txt { font-size: 14px; }
  
  .lp-body .sm-worry__concl { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .lp-body .sm-worry__concl-lead { font-size: 18px; }
  .lp-body .sm-worry__concl-sub { font-size: 14px; }
  .lp-body .sm-worry__concl-chev { transform: rotate(135deg); }
  .lp-body .sm-worry__bridge { font-size: 15px; line-height: 1.75; margin-top: 18px; text-align: left; }
  .lp-body .sm-worry__bridge-arrow { width: 18px; height: 18px; border-width: 4px; margin-top: 12px; }
}


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

/* =========================================================================
   なぜMONO塾なら選定する力が身につくのか（.sm-reason）  2026-08-10
   .sm-cat の直後（間にあった .sm-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 背景を白 → 薄青緑 #E8F3F3 に変更。
   .sm-ans（予備知識がなくても大丈夫）を削除したことで、
   その上の .sm-axis（白）と直に隣り合い、境目が消えていたため（手順書 §13-2 の型：
   「セクションが減ると背景の交互が崩れる。残ったセクションの背景を付け替えて交互を復元する」）。
   切削（machining）の .ma-reason も同じ #E8F3F3。
   並びは 白(need) → #EDF4F6(worry) → #F7FBFB(order) → 白(axis) → #E8F3F3(reason)。 */
.lp-body .sm-reason {
  --sm-sec-bg: #E8F3F3;   /* .sm-conc__arrow 用。背景色と必ず同じ値に */
  width: 100%;
  padding: 56px 20px 48px;
  background: #E8F3F3;
  box-sizing: border-box;
}
.lp-body .sm-reason__inner { width: min(1000px, 100%); margin: 0 auto; }
.lp-body .sm-reason__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 10px;
}
.lp-body .sm-reason__eyebrow::before,
.lp-body .sm-reason__eyebrow::after {
  content: ""; flex: 0 0 auto; width: 40px; height: 2px; background: #EF6C19;
}
.lp-body .sm-reason__eyebrow span {
  color: #EF6C19; font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: .04em;
}
.lp-body .sm-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 .sm-reason__hl { color: #EF6C19; }
.lp-body .sm-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 .sm-reason__item { margin: 0 0 44px; }
.lp-body .sm-reason__item + .sm-reason__item {
  padding-top: 40px; border-top: 1px solid #DCE8EC;
}
.lp-body .sm-reason__item:last-child { margin-bottom: 0; }
/* 「01 ｜ 一連の流れで学ぶ」 */
.lp-body .sm-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 .sm-reason__no {
  flex: 0 0 auto; position: relative; padding-right: 18px;
  color: #EF6C19; font-size: 40px; font-weight: 900; line-height: 1;
}
/* 番号と見出しのあいだの縦罫 */
.lp-body .sm-reason__no::after {
  content: ""; position: absolute; right: 0; top: 2px; bottom: 2px;
  width: 2px; background: #C9D8E4;
}
.lp-body .sm-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 .sm-reason__txt {
  margin: 0 0 18px; color: #3D4A5C; font-size: 16px; font-weight: 600; line-height: 1.9;
}
.lp-body .sm-reason__txt:last-child { margin-bottom: 0; }
.lp-body .sm-reason__txt b { color: #EF6C19; font-weight: 900; }
.lp-body .sm-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 #sheetmetal .sm-reason__fig img {
  display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto;
  border: 0; border-radius: 0; background: transparent;
}
.lp-body .sm-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 .sm-reason__gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 1000px; margin: 0 auto 18px;
}
.lp-body .sm-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 #sheetmetal .sm-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 .sm-reason__shot--photo { background: transparent; }
.lp-body #sheetmetal .sm-reason__shot--photo img { object-fit: cover; }
/* 図版・写真が未作成のあいだの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .sm-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 .sm-reason__fig:empty::before {
  content: "図版準備中"; color: #B45900; font-size: 13px; font-weight: 700;
}
.lp-body .sm-reason__shot:empty {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #F08300; background: rgba(255, 248, 240, .6);
}
.lp-body .sm-reason__shot:empty::before {
  content: "写真"; color: #B45900; font-size: 12px; font-weight: 700;
}
@media screen and (max-width: 767px) {
  .lp-body .sm-reason__txt { font-size: 14px; line-height: 1.85; margin-bottom: 14px; }
  .lp-body .sm-reason__fig { margin-bottom: 14px; padding: 12px 12px; border-radius: 10px; }
  .lp-body .sm-reason__fig:empty { min-height: 160px; }
  .lp-body .sm-reason__fig-cap { font-size: 12px; margin-top: 9px; text-align: left; }
  .lp-body .sm-reason__gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
  .lp-body .sm-reason__shot { border-radius: 8px; }
}


/* ---- 3つの理由の締め ----
   ★2026-08-26 切削（machining）の .ma-reason__note に合わせた（アース指示）。
     以前はただのグレーの段落だったが、切削は【白い箱＋上向きの三角】で、
     3つの理由を受けて着地する見せ方になっている。
     三角は上から降りてくる合図で、色は --lp-accent-mid（板金は #9ED5D6）。
   ★上マージン88pxは三角（top:-53px）の分。詰めると三角が理由03に重なる。 */
.lp-body .sm-reason__note {
  position: relative;
  margin: 88px 0 0;
  padding: 24px 28px 22px;
  background: #FFFFFF;
  border-radius: 14px;
  color: #123F6D; font-size: 17px; font-weight: 800; line-height: 1.8;
  text-align: center;
}
.lp-body .sm-reason__note::before {
  content: "";
  position: absolute; left: 50%; top: -53px;
  transform: translateX(-50%);
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid var(--lp-accent-mid);
}
/* PCだけで効く改行。SPでは折り返し位置を字数に任せる */
.lp-body .sm-reason__note .pc-break { display: inline; }
@media screen and (max-width: 767px) {
  .lp-body .sm-reason__note .pc-break { display: none; }
}


@media screen and (max-width: 900px) {
  .lp-body .sm-reason__title { font-size: 26px; }
  .lp-body .sm-reason__lead { font-size: 15px; }
  .lp-body .sm-reason__h3 { font-size: 21px; gap: 14px; }
  
  
  
  
  
  
  
  .lp-body .sm-reason__no { font-size: 32px; padding-right: 14px; }
  
  
  
  
  
  
  
  
  
}
@media screen and (max-width: 767px) {
  .lp-body .sm-reason { padding: 40px 16px 34px; }
  .lp-body .sm-reason__eyebrow span { font-size: 14px; }
  .lp-body .sm-reason__eyebrow::before,
  .lp-body .sm-reason__eyebrow::after { width: 24px; }
  .lp-body .sm-reason__title { font-size: 21px; line-height: 1.55; }
  .lp-body .sm-reason__lead { font-size: 13px; }
  .lp-body .sm-reason__item { margin-bottom: 32px; }
  .lp-body .sm-reason__item + .sm-reason__item { padding-top: 28px; }
  .lp-body .sm-reason__h3 { font-size: 17px; }
  .lp-body .sm-reason__no { font-size: 26px; }
  .lp-body .sm-reason__sub { font-size: 14px; }
  
  
  .lp-body .sm-reason__note {
    margin-top: 64px; padding: 16px 16px 15px; border-radius: 12px;
    font-size: 14px; line-height: 1.75;
  }
  .lp-body .sm-reason__note::before {
    top: -40px;
    border-left-width: 14px; border-right-width: 14px; border-top-width: 14px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}


/* =========================================================================
   講座名バンド（.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 #sheetmetal .lp-mv .lp-mv__sub {
  font-size: clamp(21px, 3vw, 42px);
}

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

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


/* ---- 右：写真スロット ---- */
.lp-body .sm-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 .sm-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 .sm-hero__photo:empty::before {
  content: "ヒーロー画像 準備中";
  color: #B45900;
  font-size: 13px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .lp-body .sm-hero__photo:empty { min-height: 200px; }
}
/* ★★高さの指定に % を使わないこと。
   グリッドの行の高さが確定しないため height:100% が解決できず、
   画像本来の比率で高さが決まって枠からはみ出す（yoso で実際に起きた）。
   そのため max-height を px で指定している。
   ヒーローの min-height 500px の90%＝450px。 */
.lp-body .sm-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）。 */
  /* ★2026-08-26 板金：-180px → -100px（右へ80px）。アース指摘「キャッチコピーと画像が近い」。
     透過版に差し替わったので、画像の"中身"の左端を実測できるようになった（左余白49px）。
     見出しの右端は 1102px、画像の中身の左端は
       -180px … 1035px（見出しに **67px 食い込んでいた**）
       -120px … 1095px（ほぼ接触）
       -100px … 1115px（**すき間13px**。採用）
       -60px  … 1155px（離れすぎて右に寄る）
     ★1200 / 1440 / 1024px の幅でも横スクロールが出ないことを実測済み。 */
  transform: translateX(-100px);
}
/* ★2026-08-20 sheetmetal: ヒーロー画像は【透過ではなく、うすいグレーのスタジオ背景つき】。
   そのままだと四角い箱が地色から浮いて見える（実測：画像の縁 RGB(236,238,242) に対し
   ヒーローの地色は #E8F4F6。色差はわずかだが、灰紫と青緑で色みが違うため境目が見える）。
   → multiply で地色に溶かす。画像の背景は 235〜247 とほぼ白なので、
     掛け合わせても金属部の明度はほとんど落ちない（実測 約5%）。影もそのまま活きる。
   ★ヒーローの地色を濃い色に変えるときは、この指定を外して【透過画像】に差し替えること。
   ★★2026-08-26 追記：**透過版の fv.webp に差し替わったので multiply は外した。**
     実測：1100×924／46KB／完全透明70%・半透明1%・不透明29%、四隅とも alpha=0。
     透過画像に multiply を掛けたままだと、金属部まで地色と掛け合わさって
     わずかに暗く・青緑に寄る。外したほうが金属本来の明るさで出る。
     ★背景つきの画像に戻すときは `mix-blend-mode: multiply;` を足し直すこと。

   ★左端のフェード（2026-08-20 アース指示）
     画像が見出しへ寄り添うように、左端だけマスクで消していく。
     8% の根拠（実測）：部品は画像の左 4.0% から始まる（展開図の取付タブ）。
       4%  … 余白だけが消える。効果がほとんど見えない
       5%  … タブは無傷。ごく控えめ
       8%  … タブの先端がわずかに薄くなるが、溶けていく感じが出る。採用
       12% … タブがはっきり薄くなり、部品が欠けて見える。行きすぎ
     ★画像を差し替えたら、部品までの左余白を測り直してこの値を決めること。 */
.lp-body .sm-hero__img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%);
  /* ★薄い影（2026-08-26）。透過版になって元画像の接地影が無くなり、部品が浮いて見えたため。
     drop-shadow は【シルエットに沿って】落ちるので、四角い箱の影にはならない。
     ★不要なら次の1行を消すだけでよい。数値は 0 10px 18px / 不透明度18%。
       濃くしたい → 18px を 22px、.18 を .22 に。薄くしたい → 逆。 */
  filter: drop-shadow(0 10px 18px rgba(23, 50, 77, .18));
}

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

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


/* ==========================================================================
   SPの孤立行つぶし（2026-08-28・375pxで実測）
   --------------------------------------------------------------------------
   行末に1〜2文字だけ落ちる行を消すための最小調整。
   ★改行で割れるものは本文に <br class="sp-break"> を入れて対応済み。
     ここに置いたのは「数pxしか溢れておらず、改行を足すと逆に3行になる」ものだけ。
   ★数値はすべて iframe 375px（実効372px）での実測。カッコ内は
     「文字の実幅 ／ 使える幅」。letter-spacing 込みで測っている。
   ========================================================================== */
@media screen and (max-width: 767px) {

  /* ★SPだけヒーローの3カードと、下の講座名バー（.lp-mv h2）が接触していた。
     .lp-mv h2 には margin-top:-6px が入っていて（バー同士の継ぎ目を消すためのもの）、
     PCではヒーローの下にまだ余白があるので24px空くが、SPではカードがヒーローの最終要素に
     なるため、-6px がそのままカードへ食い込んでいた。
     ヒーロー側に30pxの下パディングを足して、PCと同じ24pxのすき間にそろえた（実測 2026-08-28）。
     ★h2側にmargin/paddingを足すと、水色のバーが上に伸びて見た目が変わる。ヒーロー側で空ける */
  .lp-body .sm-hero__inner { padding-bottom: 30px; }

  /* 「板金部品設計入門講座」10文字が 360px、枠は324px。
     講座名なので途中で改行できない。32px→28px で 320px に収まる（余裕4px）。
     ★letter-spacing 4px が効いているので、字数×フォントサイズだけで見積もらないこと。
     ★切削・材料など他の講座も同じ10文字なので、同じ問題が出ているはず */
  .lp-body .lp-mv h2 { font-size: 28px; }

  /* 「― 幅広い業界で採用されています ―」が 365px、枠は314px。
     20px→18px（333px）ではまだ足りず、末尾の「―」だけが次行に落ちた。
     ★前後の「―」は半角スペースで区切られていて、そこが折返し位置になる。
     16px（299px）で1行に収まる */
  .lp-body .companies-section h3 { font-size: 16px; }

  /* 「あなたのペースで、／無理なく学習できます」の2行目が 290px、枠は284px。
     6pxの超過で「す」だけが落ちていた。25px→23px（270px）。
     ★他の講座LPでも同じ見出し・同じ25pxなので、同じ症状が出ているはず */
  .lp-body .study-sec .section-title { font-size: 23px; }

  /* FAQの見出し。「法人のお申し込みについて」が 216px、枠は206px。
     16px→15px（204px）。他のFAQ見出しは元から収まっているが、揃えるため一律で下げる */
  .lp-body .faq-header h3 { font-size: 15px; }

  /* 「…このような悩みはありませんか？」が 317px、枠は316px。
     わずか1pxの超過で「か？」が落ちていた。21px→20px（302px） */
  .lp-body .sm-worry__title { font-size: 20px; }

  /* 悩みカードの見出し3本。224px に対して枠が215px（写真の右側なので狭い）。
     9pxの超過なので、改行を入れると2行目が1語だけになる。16px→15px（210px） */
  .lp-body .sm-worry__h3 { font-size: 15px; }

  /* 1文目が 656px。枠324pxの2行分（648px）にわずか8px足りず「す。」が落ちていた。
     14px→13px で 609px となり、読点位置の sp-break で 311/298 の2行に収まる */
  .lp-body .sm-need__lead { font-size: 13px; }

  /* 同じ理由。660px が 2行分（648px）を12px超過していた。
     13px→12px で 609px。sp-break と合わせて 299/310 の2行 */
  .lp-body .sm-order__note { font-size: 12px; }
}

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

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