@charset "UTF-8";

*, *::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色に無かった）。
   ★他の旧タイプLPを展開するときも、この2箇所は手で直す必要がある（2026-08-05） */
.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;
}

.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:      #505050;  /* 主アクセント（kousa #009999） */
  --lp-accent-dark: #3A3A3A;  /* ホバー・濃      （kousa #007A7A） */
  --lp-accent-soft: #EDEDED;  /* 見出し薄帯・面  （kousa #E6F5F5） */
  --lp-accent-pale: #F7F7F7;  /* 最も薄い面      （kousa #F2FAFA） */
  --lp-accent-line: #DDDDDD;  /* 罫線            （kousa #CFE5E5） */
  --lp-accent-mid:  #BFBFBF;  /* 中間色（数字等）（kousa #A6D6D6） */
}
/* 共通色（講座で変えない）: 紺 #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;
  /* 2026-08-04 アース指示: グレー主色(#505050)だと3枚並んだとき暗く重いので、
     このカードだけ1段明るいグレーにする。文字は白のまま（コントラスト比 5.3:1）。 */
  background: #6B6B6B;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.lp-body .feature-overview .feature-overview__label {
  position: static;
  top: auto;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  margin: 0 0 13px;
  padding: 0;
  color: #fff;
  white-space: normal;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: none;
}
.lp-body .feature-overview .feature-overview__label .feature-icon {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.lp-body .feature-overview .feature-overview__label .feature-icon img,
.lp-body .feature-overview .feature-overview__label .feature-icon svg {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
/* 共通アイコン（images/icons/badge-*.svg）はインラインSVGで貼り、
   色は currentColor 経由で講座アクセント色にする。
   ※ <img> で読み込むと color が届かず既定の #333333 になる（images/icons/README.md ③参照） */
.lp-body .feature-overview .feature-overview__label .feature-icon svg {
  color: var(--lp-accent);
}
.lp-body .feature-overview .feature-overview__label p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.lp-body .feature-overview .feature-overview__main {
  margin: 0 0 16px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
}
.lp-body .feature-overview .feature-overview__desc {
  width: 100%;
  margin: auto 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
}
.lp-body .feature-overview .feature-overview__devices {
  box-sizing: border-box;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: auto;
  min-height: 126px;
  margin: 8px 0 0;
  padding: 22px 44px;
  color: #122D4F;
  text-align: left;
  background: var(--lp-accent-soft);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.lp-body .feature-overview .feature-overview__devices .feature-bottom-icon {
  position: static;
  flex: 0 0 174px;
  width: 174px;
  transform: none;
}
.lp-body .feature-overview .feature-overview__devices .feature-bottom-icon img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.lp-body .feature-overview .feature-overview__device-copy,
.lp-body .feature-overview .feature-overview__devices p {
  margin: 0;
}
.lp-body .feature-overview .feature-overview__device-title {
  color: #122D4F;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.lp-body .feature-overview .feature-overview__device-note {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
}
.lp-body .feature-overview .feature-overview__device-note strong {
  flex: 0 0 auto;
  color: var(--lp-accent);
  font-size: 15px;
}
.lp-body .feature-overview .feature-overview__device-note span {
  display: inline;
  margin: 0;
  color: #5F6C75;
  font-size: 14px;
  font-weight: 400;
}
.feature-overview__mobile-break { display: none; }

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

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

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

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

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

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

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

.lp-body .curriculum-accordion {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 0 0 84px;
  overflow: clip;
  background: #FFF;
  color: #122D4F;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
/* カリキュラムの見出し帯。薄いグレー地だと前後のセクションに埋もれて
   区切りに見えないため、紺→深緑の横グラデーションにして白抜き文字にする
   （2026-08-05 アース指定）。講座アクセント色に依存しない固定色。 */
.lp-body .curriculum-accordion__header {
  width: 100%;
  padding: 32px 20px 30px;
  background: linear-gradient(90deg, #123F6D 0%, #175A63 55%, #14573C 100%);
  border-bottom: 0;
}
.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: #FFFFFF; /* 帯がグラデーションなので白抜き */
  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: rgba(255, 255, 255, .85);
  transform: translateX(-50%);
}
.lp-body .curriculum-accordion__lead {
  margin: 12px auto 0;
  color: rgba(255, 255, 255, .9);
  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%;
  aspect-ratio: 225 / 164;
  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; }
}

.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 → #yoso-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(#yoso-order) header.l-header.p-header .p-header__inner__bottom,
.lp-body:has(#yoso-order) header.l-header.p-header .p-header__float { display: none !important; }

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

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

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

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

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

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

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

/* =========================================================================
   ファーストビュー（.yo-hero）  2026-08-05
   -------------------------------------------------------------
   旧FVは文字を焼き込んだ1枚画像（img_mv.jpg）だった。
   拡大でぼやける・文言修正のたびに画像を作り直す・講座名が焼き込まれていて
   直下の .lp-mv と二重になる、という問題があったためテキスト化した。
   移植元: lp_seizu.css L1953〜2142（.sz-hero）。変更したのは次の3点だけ。
     ・クラス名 sz-hero → yo-hero（seizu に影響させないため）
     ・var(--main-color)（seizu専用・yosoでは未定義）→ var(--lp-accent)
     ・製図の背景画像(::before)は yoso に該当画像が無いので使わない
   ★右の写真は準備中。用意でき次第 .yo-hero__photo の中の
     プレースホルダを <img class="yo-hero__img yo-hero__img--pc"> 等に差し替える。
   ========================================================================= */
.lp-body .yo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --yo-pad: 20px;
  /* ★背景は即戦力LP(/sokusen_top/)と同じ方式。写真を敷き、その上に
     グラデーションの覆いを重ねて左のコピーを読めるようにする。
     ★ bg_mv.jpg は即戦力LPから借りている（yoso専用の背景がまだ無いため）。
       yoso用が用意できたらこの1行の差し替えだけで済む。 */
  background: #fff url(/wp/wp-content/themes/fantomsemi/images/sokusen/bg_mv.jpg) no-repeat 100% 50% / cover;
}
/* 覆い。左は白でほぼ不透明（コピーの可読性）、右へ向かってごく薄い青みグレーへ抜ける。
   ::before に分離しているのは、.yo-hero 本体に opacity を掛けると
   文字や写真まで薄くなってしまうため。 */
.lp-body .yo-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .94) 0%,
    rgba(255, 255, 255, .74) 42%,
    rgba(234, 238, 243, .22) 100%);
  pointer-events: none;
}
.lp-body .yo-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  /* 右のイラストが小さく見えたため 32%→36% に広げ、そのぶん見出しを
     48px→44px に落として左カラム(550px)に収めている（12文字で約533px）。
     ★見出しを大きくするなら、右カラムを狭めるか文言を短くすること。 */
  grid-template-columns: minmax(0, 1fr) 36%;
  align-items: stretch;
  gap: 24px;
  /* 2026-08-16 FV統一: min-height:500px を解除。
     見出しの「設計者へ」削除と特徴3項目→1項目でテキスト列が縮み、
     高さを決めているのがこの固定値だけになって間延びしていた。
     解除後はテキスト列460px（画像450px）が高さを決める。実測 500px → 460px。
     motor(lp_motor.css)・sokusen(lp_sokusen.css)で同じ修正済み。
     ※スマホ用@media(max-width:767px)は1カラムなので影響なし */
  min-height: 0;
  width: 100%; max-width: 960px; margin: 0 auto;
  padding: 0 var(--yo-pad);
  box-sizing: border-box;
}
/* 高さは即戦力LP(/sokusen_top/)の470pxに合わせる（アース指示 2026-08-05）。
   上下paddingで調整しているので、文言を増減したらここで再調整する。
   ★上paddingを48→24pxに詰めた（バッジの上が空きすぎて見えたため 2026-08-05）。
     align-self:center なので、上paddingを縮めた分の半分だけバッジが上へ動く。 */
.lp-body .yo-hero__text { align-self: center; padding: 24px 0 40px; }

/* ---- 左：テキスト ----
   ★文字の大きさ・太さ・行間・色は即戦力LPの .lp-hero に合わせている。
     見出し48px/800/1.4/#123F6D、補足文18px/#4A5568。 */
/* ★バッジは紺（見出し本体と同色）。オレンジにしないこと。
   オレンジは見出しの強調語（.yo-hero__hl）に使っており、
   バッジまでオレンジにすると強調が散って見出しが目立たなくなる
   （アース指示 2026-08-09。motor / mechatro も同じ扱いに統一） */
.lp-body .yo-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 .yo-hero__title {
  /* 下余白でキャッチコピー群（バッジ＋見出し）と補足群（説明＋3項目）を離す。
     .yo-hero__text は align-self:center なので、ここを広げると
     上のかたまりが上へ・下のかたまりが下へ均等に動く（2026-08-05 アース指定） */
  margin: 0 0 36px;
  /* 45px。1行目「機械要素を体系的に学び、」12文字で約545px、
     左カラム550pxに対して余裕は5pxしかない。これ以上大きくすると折り返す。 */
  color: #123F6D; font-size: 45px; font-weight: 800; line-height: 1.4;
  letter-spacing: .01em; word-break: normal;
}
.lp-body .yo-hero__hl { color: #EF6C19; }
.lp-body .yo-hero__note {
  margin: 0 0 24px; color: #4A5568; font-size: 18px; font-weight: 500; line-height: 1.75;
}
/* ---- 左：講座の特徴3点（アイコンはCSSマスクで主色に着色） ----
   ★PCでは必ず横一列。3項目の文字数が多く、seizu の値（14px・アイコン30px・
     余白18px）だと左カラム内で2段に折り返すため、詰めた値にしている。
     文言を長くするときはここが折り返さないか実測すること。 */
.lp-body .yo-hero__points {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 14px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .yo-hero__point {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: #17233f; font-size: 16px; font-weight: 700; line-height: 1.45;
  white-space: nowrap;
}
.lp-body .yo-hero__point:not(:last-child) {
  padding-right: 14px; border-right: 1px solid #D3D6DA;
}
.lp-body .yo-hero__point::before {
  content: ""; flex: 0 0 auto; width: 26px; height: 26px;
  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 .yo-hero__point--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 .yo-hero__point--term::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 .yo-hero__point--text::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);
}
/* 2026-08-16 FV統一: 特徴3項目を1項目（1台のリフターに使われる部品を、まるごと学ぶ）に統合した際に追加。
   従来の --time（時計）は「全10章」用で、題材の話に時計は合わないため歯車にした。
   ★このルールが無いと ::before が mask-image 無しの26px単色四角として出る。
     本文（--parts）とCSSは必ずセットで反映すること。 */
.lp-body .yo-hero__point--parts::before {
  -webkit-mask-image: url(/wp/wp-content/themes/fantomsemi/images/gear.svg);
  mask-image: url(/wp/wp-content/themes/fantomsemi/images/gear.svg);
}

/* ---- 右：写真スロット ---- */
.lp-body .yo-hero__photo {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  /* イラストは上下中央に置く（アース指示 2026-08-05。
     下端揃えだと上にだけ余白が寄って見えたため） */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 clamp(-82px, calc((960px - 100vw) / 2), 0px) 0 0;
}
.lp-body .yo-hero__img--sp { display: none; }
/* ★入っているのが「背景透過のイラスト」なので、写真前提の指定
   （cover で枠いっぱいに引き伸ばす＋左右を霧化するマスク）は使わない。
   contain で全体を見せ、下端を枠の底に合わせる。
   ★position:absolute にしているのは、img の縦横比(0.64)が
     ヒーローの高さを決めてしまうのを防ぐため（587pxまで伸びていた）。
   ★2026-08-05: 画像の透明余白を切り落として差し替えたので（600×761・絵が99.8%）、
     暫定で掛けていた transform:scale(1.18) は不要になったため削除した。
   ★★高さの指定に % を使わないこと。
     グリッドの行の高さが確定しないため height:100% が解決できず、
     画像本来の比率で高さが決まって枠から24pxはみ出した（2026-08-05）。
     そのため max-height を px で指定している。
     ヒーローの min-height は 500px。その90%の 450px にしている
     （枠いっぱいだと詰まって見えたためアース指示 2026-08-05）。
     大きさを変えるときはこの1行だけを触ればよい。 */
.lp-body .yo-hero__photo img {
  width: auto; max-width: 100%;
  height: auto; max-height: 450px;
  object-fit: contain;
}
/* 写真が入るまでの仮枠。<img> を入れたら :empty が外れて自動的に消える */
.lp-body .yo-hero__photo .yo-hero__ph {
  display: flex; align-items: center; justify-content: center;
  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;
}
/* キャプションは写真の右下に重ねる */
.lp-body .yo-hero__cap {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: inline-block; margin: 0; padding: 7px 16px;
  background: #fff; border: 1px solid #DCDFE3; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(40, 40, 40, .10);
  color: var(--lp-accent); font-size: 14px; font-weight: 700; line-height: 1.4;
}

@media screen and (max-width: 960px) {
  .lp-body .yo-hero { --yo-pad: 18px; }
  .lp-body .yo-hero__inner { grid-template-columns: minmax(0, 1fr) 34%; gap: 20px; }
  .lp-body .yo-hero__text { padding: 34px 0 30px; }
  .lp-body .yo-hero__title { font-size: 34px; }
  .lp-body .yo-hero__note { font-size: 16px; margin-bottom: 20px; }
  .lp-body .yo-hero__points { gap: 0 12px; }
  .lp-body .yo-hero__point:not(:last-child) { padding-right: 12px; }
  .lp-body .yo-hero__img--pc { display: none; }
  .lp-body .yo-hero__img--sp { display: block; }
}
@media screen and (max-width: 767px) {
  .lp-body .yo-hero { --yo-pad: 16px; }
  .lp-body .yo-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-body .yo-hero__text { align-self: auto; padding: 24px 0 0; }
  .lp-body .yo-hero__badge { margin-bottom: 14px; padding: 6px 15px; font-size: 13px; }
  .lp-body .yo-hero__title { font-size: clamp(23px, 6.6vw, 28px); margin-bottom: 16px; }
  .lp-body .yo-hero__note { font-size: 14px; margin-bottom: 18px; }
  .lp-body .yo-hero__points { gap: 9px 16px; }
  .lp-body .yo-hero__point { font-size: 13px; gap: 7px; }
  .lp-body .yo-hero__point::before { width: 24px; height: 24px; }
  /* SPでは3項目が折り返すため、行末に縦罫が残って不自然になる。区切り線は消す */
  .lp-body .yo-hero__point:not(:last-child) { padding-right: 0; border-right: 0; }
  .lp-body .yo-hero__photo { margin: 0 calc(-1 * var(--yo-pad)); overflow: visible; text-align: center; }
  .lp-body .yo-hero__photo img {
    width: auto; height: auto; max-width: 100%; max-height: 50vh; margin: 0 auto;
    object-fit: contain; object-position: center;
    -webkit-mask-image: none; mask-image: none;
  }
  .lp-body .yo-hero__photo .yo-hero__ph { min-height: 200px; }
  .lp-body .yo-hero__cap {
    right: auto; left: 50%; transform: translateX(-50%); bottom: 14px;
    font-size: 12px; padding: 6px 13px; white-space: nowrap;
  }
}

/* =========================================================================
   よくあるお悩み（.yo-worry）  2026-08-05
   「パソコン・タブレット・スマートフォンで閲覧できます」の直後に置く。
   見出し＋4枚のカード＋下向き矢印。カードのイラストは
   .yo-worry__fig の中に <img> を入れるだけ（仮枠は :has で自動的に消える）。
   ★旧の問題提起ブロック（.hukuzatu / .taisaku）は当面残す。
     アース確認後にまとめて削除する。
   ========================================================================= */
.lp-body .yo-worry {
  width: 100%;
  padding: 56px 20px 44px;
  /* 2026-08-16 背景の交互を motor に合わせた。
     旧: var(--lp-accent-pale)（無彩色の薄グレー #F7F7F7）。
     「上の feature-overview が白なので白だと境目が出ない」という 2026-08-05 の前提が
     現在は成立しておらず、直上の共通パーツ .feature-number が #F7F7F7 で
     同色になり境界が消えていた（アース指摘）。
     motor は同じ位置（.feature-number の直後）で .mo-worry を薄青にしており、
     そこから白／薄青の交互が続く。yoso もその並びに合わせる。
     以降 yo-step=白 / yo-lifter=薄青 / yo-reason=白 / yo-super=薄青 / curriculum=白。 */
  background: #EAEFF5;
  box-sizing: border-box;
}
.lp-body .yo-worry__inner { width: min(960px, 100%); margin: 0 auto; }
.lp-body .yo-worry__title {
  margin: 0 0 32px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.5;
  letter-spacing: .01em; text-align: center;
}
/* 見出しの上の細い線。サイト共通 .section-title::before（52×4px）に合わせる。
   独自クラスで作ったため共通の仕組みから外れていた（2026-08-05 アース指摘）。 */
.lp-body .yo-worry__title::before,
.lp-body .yo-step__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 18px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .yo-worry__hl { color: #EF6C19; }
.lp-body .yo-worry__cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .yo-worry__card {
  display: flex; flex-direction: column; align-items: center; margin: 0;
  padding: 22px 14px 20px; background: #F7F8FA; border-radius: 12px;
}
.lp-body .yo-worry__card::before,
.lp-body .yo-worry__card::after { content: none; display: none; }
.lp-body .yo-worry__fig {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 132px; margin: 0 0 14px;
}
.lp-body .yo-worry__fig img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 132px;
}
/* イラスト未作成のあいだの仮枠。<img> を入れたら :empty が外れて消える */
.lp-body .yo-worry__fig:empty {
  border: 2px dashed #F08300;
  border-radius: 10px;
  background: rgba(255, 248, 240, .6);
}
.lp-body .yo-worry__fig:empty::before {
  content: "イラスト準備中";
  color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .yo-worry__txt {
  margin: 0; color: #17233f; font-size: 15px; font-weight: 700;
  line-height: 1.7; text-align: center;
}
/* 下向きの矢印（次のセクションへの導線） */
.lp-body .yo-worry__arrow {
  width: 40px; height: 40px; margin: 34px auto 0;
  border-right: 5px solid #BFD0DE; border-bottom: 5px solid #BFD0DE;
  border-radius: 3px;
  transform: rotate(45deg);
}
@media screen and (max-width: 900px) {
  .lp-body .yo-worry__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .lp-body .yo-worry__title { font-size: 26px; margin-bottom: 26px; }
}
@media screen and (max-width: 767px) {
  .lp-body .yo-worry { padding: 40px 16px 32px; }
  .lp-body .yo-worry__title { font-size: 21px; line-height: 1.55; margin-bottom: 20px; }
  .lp-body .yo-worry__card { padding: 16px 10px 14px; }
  .lp-body .yo-worry__fig { height: 96px; margin-bottom: 10px; }
  .lp-body .yo-worry__fig img { max-height: 96px; }
  .lp-body .yo-worry__txt { font-size: 13px; line-height: 1.6; }
  .lp-body .yo-worry__arrow { width: 28px; height: 28px; border-width: 4px; margin-top: 24px; }
}

/* =========================================================================
   必要なのは「名称の暗記」ではありません（.yo-step）  2026-08-05
   お悩みセクション（.yo-worry・白地）の直後に置く。背景を薄い青みグレーに
   変えてセクションの切れ目を作る。
   バッジ／H2／リード／3ステップ（丸い写真）／濃紺の締め帯／下向き矢印。
   ★写真は step01〜03-bearing-photo-clean.png。丸くマスクして使う。
   ========================================================================= */
.lp-body .yo-step {
  width: 100%;
  padding: 56px 20px 48px;
  /* 2026-08-16 背景の交互を motor に合わせた。旧: #EAEFF5（薄青）。
     上の .yo-worry を薄青にしたため、こちらは白で受ける。 */
  background: #fff;
  box-sizing: border-box;
}
.lp-body .yo-step__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
.lp-body .yo-step__badge {
  display: inline-block; margin: 0 0 18px; padding: 7px 20px;
  border: 2px solid #EF6C19; border-radius: 999px; background: #fff;
  color: #EF6C19; font-size: 15px; font-weight: 800; line-height: 1.4;
}
.lp-body .yo-step__title {
  margin: 0 0 12px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em;
}
.lp-body .yo-step__lead {
  margin: 0 0 34px; color: #4A5568; font-size: 16px; font-weight: 500; line-height: 1.8;
}
/* ---- 3ステップ ---- */
.lp-body .yo-step__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0 8px;
  margin: 0 0 30px; padding: 0; list-style: none;
}
.lp-body .yo-step__item { position: relative; margin: 0; }
.lp-body .yo-step__item::before,
.lp-body .yo-step__item::after { content: none; display: none; }
/* 項目間の矢印 */
.lp-body .yo-step__item:not(:last-child) > .yo-step__arw {
  position: absolute; top: 46%; right: -14px; z-index: 2;
  width: 13px; height: 13px;
  border-right: 3px solid #EF6C19; border-bottom: 3px solid #EF6C19;
  transform: translateY(-50%) rotate(-45deg);
}
.lp-body .yo-step__no {
  margin: 0 0 6px; color: #4A6B8A; font-size: 15px; font-weight: 800; letter-spacing: .06em;
}
.lp-body .yo-step__no b { color: #EF6C19; font-size: 21px; font-weight: 900; }
/* 見出しは写真の上に置く（重ねると図が見えにくくなるため） */
.lp-body .yo-step__ttl {
  margin: 0 0 10px; color: #123F6D; font-size: 22px; font-weight: 900; line-height: 1.4;
}
.lp-body .yo-step__fig {
  display: flex; align-items: center; justify-content: center;
  width: min(210px, 100%); aspect-ratio: 1 / 1; margin: 0 auto 12px;
  overflow: hidden; border-radius: 50%;
  background: #fff; border: 2px solid #D6DEE7;
}
.lp-body .yo-step__fig img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.lp-body .yo-step__cap {
  margin: 0; color: #3d4a63; font-size: 14px; font-weight: 600; line-height: 1.6;
}
/* ---- 締めの帯 ---- */
.lp-body .yo-step__concl {
  margin: 0; padding: 18px 24px;
  background: #123F6D; border-radius: 10px;
  color: #fff; font-size: 21px; font-weight: 800; line-height: 1.5;
}
.lp-body .yo-step__arrow {
  width: 40px; height: 40px; margin: 30px auto 0;
  border-right: 5px solid #BFD0DE; border-bottom: 5px solid #BFD0DE;
  border-radius: 3px;
  transform: rotate(45deg);
}
@media screen and (max-width: 767px) {
  .lp-body .yo-step { padding: 40px 16px 34px; }
  .lp-body .yo-step__badge { margin-bottom: 14px; padding: 6px 15px; font-size: 13px; }
  .lp-body .yo-step__title { font-size: 21px; line-height: 1.55; }
  .lp-body .yo-step__lead { font-size: 14px; margin-bottom: 24px; }
  /* SPは縦積み。矢印は各項目の下へ回す */
  .lp-body .yo-step__list { grid-template-columns: minmax(0, 1fr); gap: 26px 0; margin-bottom: 22px; }
  .lp-body .yo-step__item:not(:last-child) > .yo-step__arw {
    top: auto; bottom: -20px; right: 50%;
    transform: translateX(50%) rotate(45deg);
  }
  .lp-body .yo-step__ttl { font-size: 19px; }
  .lp-body .yo-step__fig { width: min(170px, 62%); }
  .lp-body .yo-step__cap { font-size: 13px; }
  .lp-body .yo-step__concl { padding: 14px 16px; font-size: 15px; line-height: 1.6; }
  .lp-body .yo-step__arrow { width: 28px; height: 28px; border-width: 4px; margin-top: 22px; }
}

/* =========================================================================
   1台のリフターを題材に（.yo-lifter）  2026-08-05
   STEPセクション（青みグレー）の直後。背景は白にして切れ目をつくる。
   見出し／リード／中央の大きな図版／下に3枚の流れカード。
   ★カードのイラストは .yo-lifter__ico の中に <img> を入れるだけ。
     空のあいだは薄い破線の仮枠が出る（:empty で自動的に切り替わる）。
   ========================================================================= */
.lp-body .yo-lifter {
  width: 100%;
  padding: 56px 20px 48px;
  /* 2026-08-16 背景の交互を motor に合わせた。旧: #fff。 */
  background: #EAEFF5;
  box-sizing: border-box;
}
.lp-body .yo-lifter__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
.lp-body .yo-lifter__title {
  margin: 0 0 12px;
  color: #123F6D; font-size: 34px; font-weight: 900; line-height: 1.45;
  letter-spacing: .01em;
}
/* 見出しの上の細い線（.section-title::before と同じ 52×4px） */
.lp-body .yo-lifter__title::before {
  content: "";
  display: block;
  width: 52px; height: 4px;
  margin: 0 auto 18px;
  background: var(--lp-accent);
  border-radius: 2px;
}
.lp-body .yo-lifter__hl { color: #EF6C19; }
.lp-body .yo-lifter__lead {
  margin: 0 0 26px; color: #4A5568; font-size: 16px; font-weight: 500; line-height: 1.8;
}
.lp-body .yo-lifter__fig { margin: 0 0 30px; }
.lp-body .yo-lifter__fig img {
  display: block; width: min(920px, 100%); height: auto; margin: 0 auto;
}
/* ---- 下の3枚（流れ） ---- */
.lp-body .yo-lifter__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0 26px;
  margin: 0; padding: 0; list-style: none;
}
.lp-body .yo-lifter__step {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 18px 16px;
  border: 2px solid #DCE3EB; border-radius: 12px; background: #fff;
}
.lp-body .yo-lifter__step::before,
.lp-body .yo-lifter__step::after { content: none; display: none; }
/* カード間のオレンジの矢印 */
.lp-body .yo-lifter__step:not(:last-child) > .yo-lifter__arw {
  position: absolute; top: 50%; right: -20px; z-index: 2;
  width: 11px; height: 11px;
  border-right: 3px solid #EF6C19; border-bottom: 3px solid #EF6C19;
  transform: translateY(-50%) rotate(-45deg);
}
.lp-body .yo-lifter__ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
}
.lp-body .yo-lifter__ico img { display: block; max-width: 64px; max-height: 64px; width: auto; height: auto; }
.lp-body .yo-lifter__ico:empty {
  border: 2px dashed #F08300; border-radius: 8px; background: rgba(255, 248, 240, .6);
}
.lp-body .yo-lifter__ico:empty::before {
  content: "図"; color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .yo-lifter__txt {
  margin: 0; color: #17233f; font-size: 16px; font-weight: 800; line-height: 1.5; text-align: left;
}
@media screen and (max-width: 767px) {
  .lp-body .yo-lifter { padding: 40px 16px 34px; }
  .lp-body .yo-lifter__title { font-size: 21px; line-height: 1.55; }
  .lp-body .yo-lifter__lead { font-size: 14px; margin-bottom: 20px; }
  .lp-body .yo-lifter__fig { margin-bottom: 22px; }
  /* SPは縦積み。矢印は各カードの下へ回す */
  .lp-body .yo-lifter__flow { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .lp-body .yo-lifter__step:not(:last-child) > .yo-lifter__arw {
    top: auto; bottom: -17px; right: 50%;
    transform: translateX(50%) rotate(45deg);
  }
  .lp-body .yo-lifter__step { padding: 14px 14px; gap: 12px; }
  .lp-body .yo-lifter__ico { width: 52px; height: 52px; }
  .lp-body .yo-lifter__txt { font-size: 15px; }
}

/* =========================================================================
   初心者でも理解しやすい3つの理由（.yo-reason）  2026-08-05
   リフターのセクション（白）の直後。ごく薄い地色で切れ目をつくる。
   ★カードの中の画像は .yo-reason__shot の中に <img> を入れるだけ。
     空のあいだは破線の仮枠が出る（:empty で自動的に切り替わる）。
   ========================================================================= */
.lp-body .yo-reason {
  width: 100%;
  padding: 56px 20px 50px;
  /* 2026-08-16 背景の交互を motor に合わせた。旧: #F7F9FB。
     白との差が各チャンネル4〜8しかなく、上の .yo-lifter（当時は白）との境界が
     ほぼ見えていなかった。白／薄青の2色だけを使う方針に統一。 */
  background: #fff;
  box-sizing: border-box;
}
.lp-body .yo-reason__inner { width: min(960px, 100%); margin: 0 auto; text-align: center; }
/* 「選ばれる理由」＝左右に短い線を伸ばした小見出し */
.lp-body .yo-reason__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 10px;
  color: #EF6C19; font-size: 14px; font-weight: 800; letter-spacing: .08em;
}
.lp-body .yo-reason__eyebrow::before,
.lp-body .yo-reason__eyebrow::after {
  content: ""; display: inline-block; width: 26px; height: 2px; background: #EF6C19;
}
.lp-body .yo-reason__title {
  margin: 0 0 10px;
  color: #123F6D; font-size: 32px; font-weight: 900; line-height: 1.45; letter-spacing: .01em;
}
.lp-body .yo-reason__hl { color: #EF6C19; }
.lp-body .yo-reason__lead {
  margin: 0 0 30px; color: #4A5568; font-size: 15px; font-weight: 500; line-height: 1.8;
}
/* ---- 3カード ---- */
.lp-body .yo-reason__cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  margin: 0; padding: 0; list-style: none; text-align: left;
}
.lp-body .yo-reason__card {
  position: relative;
  display: flex; flex-direction: column; margin: 0;
  padding: 26px 20px 22px;
  background: #fff; border-radius: 4px;
}
/* 角の飾り（左上と右上のカギ括弧） */
.lp-body .yo-reason__card::before,
.lp-body .yo-reason__card::after {
  content: ""; position: absolute; top: 0;
  width: 22px; height: 22px; display: block;
  border-top: 3px solid #EF6C19;
}
.lp-body .yo-reason__card::before { left: 0; border-left: 3px solid #EF6C19; }
.lp-body .yo-reason__card::after { right: 0; border-right: 3px solid #EF6C19; }
.lp-body .yo-reason__head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.lp-body .yo-reason__no {
  flex: 0 0 auto;
  /* ★ display:grid + place-items:center にしてはいけない（2026-08-05）。
     「理由」と <b>01</b> が2つのグリッドアイテムになり、align-content の初期値
     stretch で行が44pxいっぱいに引き伸ばされ、各行の中央に配置される＝
     line-height をいくら詰めても隙間が消えなかった。
     flex の縦並び＋justify-content:center なら行が伸びず、行間だけで詰まる。 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--lp-accent-soft);
  color: var(--lp-accent); font-size: 11px; font-weight: 800; line-height: 1.1; text-align: center;
}
.lp-body .yo-reason__no b { display: block; font-size: 15px; font-weight: 900; line-height: 1.1; }
.lp-body .yo-reason__ttl {
  margin: 0; color: #123F6D; font-size: 20px; font-weight: 900; line-height: 1.45;
}
.lp-body .yo-reason__desc {
  margin: 0 0 16px; color: #4A5568; font-size: 14px; font-weight: 500; line-height: 1.8;
}
/* ---- カード内の画像パネル ---- */
.lp-body .yo-reason__panel {
  margin: auto 0 0; padding: 14px 14px 12px;
  background: #F4F7FA; border-radius: 6px;
}
.lp-body .yo-reason__shot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4 / 5; margin: 0 0 10px;
  background: #fff; border-radius: 4px; overflow: hidden;
}
.lp-body .yo-reason__shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-body .yo-reason__shot:empty {
  border: 2px dashed #F08300; background: rgba(255, 248, 240, .6);
}
.lp-body .yo-reason__shot:empty::before {
  content: "画像準備中"; color: #B45900; font-size: 12px; font-weight: 700;
}
.lp-body .yo-reason__cap {
  margin: 0; color: #5A6675; font-size: 12px; font-weight: 600; line-height: 1.6; text-align: center;
}
@media screen and (max-width: 900px) {
  .lp-body .yo-reason__cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-body .yo-reason__shot { aspect-ratio: 16 / 9; }
}
@media screen and (max-width: 767px) {
  .lp-body .yo-reason { padding: 40px 16px 36px; }
  .lp-body .yo-reason__title { font-size: 21px; line-height: 1.55; }
  .lp-body .yo-reason__lead { font-size: 14px; margin-bottom: 22px; }
  .lp-body .yo-reason__card { padding: 20px 16px 18px; }
  .lp-body .yo-reason__ttl { font-size: 18px; }
  .lp-body .yo-reason__desc { font-size: 13px; }
}

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

/* =========================================================================
   FAQ の色をテーマカラーへ（2026-08-05）
   ★ 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 でグレー化している（#0989B1 → grayscale → brightness .71 ≒ #505050）。
   ========================================================================= */
.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); }
.lp-body #faq-sec .faq-icon { filter: grayscale(1) brightness(.71); }

/* =========================================================================
   法人の教育担当者様へ（.biz-intro）  2026-08-04
   seizu（lp_seizu.css L1547〜1635）から移植。旧 .message_intro の置き換え。
   移植時に変えたのは3点だけ:
     ・スコープ  #seizu_nyumon → #yoso
     ・var(--main-color)（seizu専用の濃紺#1f285f。yosoでは未定義）→ var(--lp-accent)
     ・カード地の #EEF3FA（薄青）→ var(--lp-accent-soft)
   バッジのオレンジ #EF6C19 と見出しの紺 #17324D は講座共通色なので据え置き。
   アイコンはCSSマスク方式なので画像の色替え不要（--lp-accent で塗られる）。
   ========================================================================= */
.lp-body #yoso .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 #yoso .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 #yoso .biz-intro__title {
  margin: 0 0 16px; color: #17324D;
  font-size: 32px; font-weight: 900; line-height: 1.45; letter-spacing: .01em;
}
.lp-body #yoso .biz-intro__lead {
  margin: 0 0 26px; color: #3d4a63; font-size: 16px; font-weight: 500; line-height: 1.85;
}
.lp-body #yoso .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 #yoso .biz-intro__card {
  display: flex; align-items: flex-start; gap: 14px; margin: 0;
  padding: 20px 18px; background: #fff; border-radius: 12px;
}
.lp-body #yoso .biz-intro__ico {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
}
.lp-body #yoso .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 #yoso .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 #yoso .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 #yoso .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 #yoso .biz-intro__body { min-width: 0; }
.lp-body #yoso .biz-intro__ttl {
  margin: 0 0 5px; color: #17233f; font-size: 17px; font-weight: 800; line-height: 1.4;
}
.lp-body #yoso .biz-intro__txt {
  margin: 0; color: #4a5670; font-size: 13px; font-weight: 500; line-height: 1.6;
}
.lp-body #yoso .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 #yoso .biz-intro__note span:not(:last-child) {
  padding-right: 18px; border-right: 1px solid #c3cbdd;
}
@media screen and (max-width: 767px) {
  .lp-body #yoso .biz-intro { margin: 36px auto 32px; padding: 26px 16px 22px; border-radius: 12px; }
  .lp-body #yoso .biz-intro__badge { margin-bottom: 14px; padding: 6px 16px; font-size: 13px; }
  .lp-body #yoso .biz-intro__title { font-size: 21px; margin-bottom: 12px; }
  .lp-body #yoso .biz-intro__lead { font-size: 14px; line-height: 1.8; margin-bottom: 20px; text-align: left; }
  /* SPは3列だと1枚あたりが狭すぎるため1列に積む */
  .lp-body #yoso .biz-intro__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
  .lp-body #yoso .biz-intro__card { padding: 16px 14px; gap: 12px; }
  .lp-body #yoso .biz-intro__ico { width: 36px; height: 36px; }
  .lp-body #yoso .biz-intro__ico::before { width: 36px; height: 36px; }
  .lp-body #yoso .biz-intro__ttl { font-size: 16px; }
  .lp-body #yoso .biz-intro__note { gap: 4px 14px; font-size: 12px; }
  .lp-body #yoso .biz-intro__note span:not(:last-child) { padding-right: 14px; }
}

/* 2026-08-04: lp_editor.css 側の直書き青（.bar-cat / .voice-detail-txt / #voice背景）は
   var(--lp-accent, 従来値) のフォールバック付きに直したので、ここでの打ち消しは不要になった。
   → lp_editor.css と lp_yoso.css は必ずセットでアップロードすること。 */

/* =========================================================================
   旧テンプレート由来の補正（2026-08-04 追加 / 2026-08-06 整理）
   旧 style_yoso.css を読まなくなったことで失われた指定の受け皿。
   旧ブロックの置き換えが終わったので「器の幅」の仮当ては削除し、
   下記だけを常設として残す。
     ・PC/SP出し分けユーティリティ（カリキュラムの図・カート で現役）
     ・#yoso img の max-width / p > img の中央寄せ
     ・#sec-survey の幅（このセクションは自前の幅を持たないため）
   ========================================================================= */
/* =========================================================================
   カリキュラム・アコーディオンの yoso 追加分（2026-08-04）
   他4LPは文字だけだが、yoso は「全32種類の部品」を扱う講座のため
   各章のスライド図を残す（アース判断）。図・専門用語・サンプル動画の
   3つは他LPに無い要素なので、ここで追加する。
   ========================================================================= */
/* 章一覧の上に置く「全32種類」の一覧図 */
.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;
}
/* 理解が深まる専門用語は他LPと同じピル型カード（.cur-terms）を使う。
   スタイルは L4198 以降の共通指定。ここでは何も足さない。 */
/* サンプル動画ボタン（第0/1/2/3/6章の5つ）
   機能設計編と同じ .openVideo ＋ .popup 方式。クリックで videog.jp の
   プレーヤーがその場で開く（ページ遷移しない）。開閉は lp.js が担当。
   ★ .openVideo の見た目は L1794 の共通指定を使う。ここでは配置だけ整える。 */
.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 .v-right { display: flex; align-items: center; }
.lp-body .curriculum-accordion__movie .v-right img { width: 26px; height: auto; }
@media screen and (max-width: 767px) {
  .lp-body .curriculum-accordion__movie .openVideo { width: 100%; padding: 11px 14px; font-size: 15px; }
  .lp-body .curriculum-accordion__movie .v-right img { width: 22px; }
}
@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__terms { padding: 12px 13px; font-size: 13px; line-height: 1.8; }
  .lp-body .curriculum-accordion__movie a { padding: 10px 20px; font-size: 14px; }
}

/* ★ PC/SP出し分けユーティリティ（旧 style_yoso.css が持っていたもの）
   これが無いと PC で .visible-phone が、SP で .hidden-phone が出たままになり、
   同じ内容が2つ並ぶ（2026-08-04 実測: PCで28件・SPで27件が二重表示だった）。

   ★2026-08-06 追記: これは「暫定」ではなく常設。削除しないこと。
     旧ブロックを全部置き換えたあとも、以下が出し分けを使っている。
       ・カリキュラム各章のスライド図（PC用 curiculum_NN.png / SP用 _sp.png）11組
       ・ページ末尾の last_image.png / last_image_sp.png
       ・追従カート（.float_cart / .float_cart_sp）
     実測: このルールを外すと PC で SP用画像13件がそのまま表示される。 */
@media screen and (min-width: 768px) {
  .lp-body #yoso .visible-phone { display: none !important; }
}
@media screen and (max-width: 767px) {
  .lp-body #yoso .hidden-phone { display: none !important; }
}

.lp-body #yoso img {
  max-width: 100%;
  height: auto;
}
/* 段落の中に画像だけが入っている旧マークアップを中央へ */
.lp-body #yoso p > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* ヒーロー画像（img_mv.jpg 998px / img_mv_sp.jpg 640px） */
.lp-body #yoso .mv { margin: 0; text-align: center; }
.lp-body #yoso .mv img { display: block; width: min(1000px, 100%); margin: 0 auto; }
/* 【削除済み 2026-08-06】旧ブロックの共通の器
   　　.lp-body #yoso > div { width: min(1000px,100%); margin: 0 auto; }
   旧ブロックを全部置き換えたので不要になった。同時に、この指定の巻き添えを
   避けるための除外ルール（.yo-hero / .lp-mv / .cp_bar / .lp-cta-sec）と、
   .float_cart・.popup の幅を戻すルールも削除した。
   ★このルールは #yoso 直下に追加される要素を片っ端から巻き込むため、
     ヒーロー・追従カート・動画モーダルの3つで実際に事故を起こしている。
     復活させないこと。幅が要る要素には個別に指定する。
   ※現在 #yoso 直下に残る div は .yo-hero / .lp-mv / .cp_bar / .lp-cta-sec /
     .c_anchor×4 / .popup×5 / .moushikomi / .float_cart のみで、
     いずれも自前の幅を持つか幅の指定が不要。 */

/* 受講者の声（#sec-survey）は kyoudo では960px幅の親の中にあるため
   セクション自体が幅を持っていない。yoso は全幅ラッパー直下なので
   ここで960pxに絞る（2026-08-05）。 */
.lp-body #yoso > #sec-survey {
  width: min(960px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
/* 割引バッジが2つ（期間限定10%OFF／クーポン配布中!）並ぶと inline-block のまま
   横に連なって幅を押し広げるため、カート内だけ縦積みにする。
   ★他LPに合わせて左揃え。auto にすると中央寄せになる（2026-08-05） */
.lp-body .float_cart .off {
  display: block;
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
}

/* 260811 お客様の声（シート駆動の集計＋原文カード）の配色。
   スタッフのスロットコメントの指定どおり、テーマ色 var(--lp-accent)（.lp-body で #505050）に追従させる。
   テーマカラーを将来変えても声セクションの色は自動で揃う。
   ※幅（960px）とスマホ余白は .lp-body #yoso > #sec-survey で対応済みのため、ここでは触らない。
   ※このブロックはファイルの一番最後に貼る。 */
.lp-body #sec-survey { --voice-accent: var(--lp-accent); --voice-accent-bg: #F0F0F0; }

@media screen and (max-width: 900px) {
  .lp-body .yo-reason__panel {
    width: 100%;
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-body .yo-reason__shot {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 4 / 5;
    margin-left: auto;
    margin-right: auto;
  }
}