/* ============================================================
   DESIGN TOKENS — 湘南国際アカデミー準拠
============================================================ */
:root {
  /* Colors */
  --color-black: #333333;
  --color-white: #fff;
  --color-primary: #166bb2;
  --color-primary-light: #51c5ff;
  --color-primary-light-thin: #dcf0ff;
  --color-accent-orange: #f88649;
  --color-accent-yellow: #e4aa08;
  --color-accent-pink: #ed909c;
  --color-accent-green: #3aa366;
  --color-text-black: var(--color-black);
  --color-text-white: var(--color-white);
  --color-text-primary: var(--color-primary);
  --color-text-accent-yellow: var(--color-accent-yellow);
  --color-text-accent-green: var(--color-accent-green);
  --color-text-accent-orange: var(--color-accent-orange);
  --color-text-gray: #999999;
  --color-bg-white: var(--color-white);
  --color-bg-primary: var(--color-primary);
  --color-bg-primary-light: var(--color-primary-light);
  --color-bg-gray-light: #f7f7f7;
  --color-bg-gray-light2: #e8e8e8;
  --color-border-gray: #dddddd;
  --color-border-gray-dark: #8d8d8d;
  /* Typography */
  --ffEn: "Montserrat";
  --ffJa: "Noto Sans JP";
  /* Layout */
  --header-h: 100px;
  --border-radius-default: 10px;
  --border-radius-medium: 6px;
  --border-radius-small: 3px;
  --shadow-default: 0px 0px 10px 0px #ddd;
  --easing-default: cubic-bezier(0.17, 0.56, 0.58, 1);
}
@media screen and (max-width: 767px) {
  :root { --header-h: 60px; }
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ffEn), var(--ffJa), "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--color-text-black);
  background-color: var(--color-bg-white);
  line-height: 1.7;
  font-size: clamp(14px, 16 / 1440 * 100vw, 16px);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .8; }

/* ============================================================
   LAYOUT UTILITIES
============================================================ */
.l-container {
  margin: 0 auto;
  padding: 0 clamp(16px, 30 / 1440 * 100vw, 30px);
}
.u-pt80 { padding-top: 80px; }
.u-pt60 { padding-top: 60px; }
.u-pb80 { padding-bottom: 80px; }
.u-pb60 { padding-bottom: 60px; }
.u-mt50 { margin-top: 50px; }
.u-mt40 { margin-top: 40px; }
.u-mt30 { margin-top: 30px; }
.u-mt20 { margin-top: 20px; }
.u-mt15 { margin-top: 15px; }
.u-center { text-align: center; }

/* ============================================================
   TYPOGRAPHY COMPONENTS
============================================================ */
.c-headingXXL {
  color: var(--color-text-primary);
  font-weight: bold;
  line-height: 1.5;
  font-size: clamp(24px, 30 / 1440 * 100vw, 30px);
}
.c-headingXL {
  color: var(--color-text-primary);
  font-weight: bold;
  line-height: 1.5;
  font-size: clamp(22px, 28 / 1440 * 100vw, 28px);
}
.c-headingL {
  color: var(--color-text-primary);
  font-weight: bold;
  line-height: 1.5;
  font-size: clamp(20px, 25 / 1440 * 100vw, 25px);
}
.c-headingM {
  color: var(--color-text-primary);
  font-weight: bold;
  line-height: 1.5;
  font-size: clamp(18px, 22 / 1440 * 100vw, 22px);
}
.c-headingLine {
  position: relative;
  display: grid;
  grid-template-columns: 20px max-content;
  gap: 10px;
  align-items: center;
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  width: max-content;
  font-size: 18px;
  font-weight: bold;
}
.c-headingLine::before {
  display: block;
  content: "";
  height: 4px;
  border-radius: 2px;
  background-color: currentColor;
}
.c-txtDesc {
  font-size: clamp(15px, 18 / 1440 * 100vw, 18px);
  line-height: 1.8;
}
.c-txtDescM { font-size: clamp(14px, 16 / 1440 * 100vw, 16px); }
.c-heading--black { color: var(--color-text-black); }
.c-heading--center { text-align: center; }
.c-heading--yellow { color: var(--color-text-accent-yellow); }
.c-heading--green { color: var(--color-text-accent-green); }

/* ============================================================
   BUTTON COMPONENTS
============================================================ */
/* c-btnA — 塗りつぶし丸ボタン */
.c-btnA {
  display: inline-block;
  background-color: var(--color-bg-primary);
  border-radius: calc(1px * infinity);
  color: var(--color-text-white);
  font-weight: bold;
  padding: 8px 32px;
  transition: scale .3s ease;
  font-size: clamp(14px, 16 / 1440 * 100vw, 16px);
  cursor: pointer;
  border: 2px solid var(--color-primary);
}
.c-btnA:hover { scale: 1.05; opacity: 1; }

/* c-btnB — アウトラインボタン（矢印付き） */
.c-btnB {
  background-color: var(--color-bg-white);
  color: var(--color-text-primary);
  border-radius: calc(1px * infinity);
  border: 1px solid var(--color-primary);
  font-weight: bold;
  line-height: 1.4;
  font-size: clamp(15px, 18 / 1440 * 100vw, 18px);
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 16px;
  width: fit-content;
  padding: 18px 36px;
  transition: all .3s ease;
  cursor: pointer;
}
.c-btnB:hover { opacity: 1; background-color: var(--color-primary-light-thin); }
.c-btnB__txt { padding-top: 0.2px; }
.c-btnB__iconR { width: 100%; transition: transform .3s ease; }
.c-btnB:hover .c-btnB__iconR { transform: translateX(4px); }

/* c-hoverUp */
.c-hoverUp {
  display: inline-block;
  transition: translate .4s ease;
}
.c-hoverUp:hover { translate: 0 -5px; opacity: 1; }

/* ============================================================
   CARD COMPONENT
============================================================ */
.c-point {
  background-color: var(--color-bg-white);
  border-radius: var(--border-radius-default);
  border: 1px solid var(--color-border-gray);
  padding: clamp(20px, 30 / 1440 * 100vw, 30px) clamp(16px, 30 / 1440 * 100vw, 30px);
  box-shadow: var(--shadow-default);
}
.c-point__ttl {
  font-weight: bold;
  font-size: clamp(14px, 18 / 1440 * 100vw, 18px);
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

/* ============================================================
   HEADER — 白背景固定ナビ（サイト標準）
============================================================ */
.l-header {
  z-index: 10000;
  position: fixed;
  top: 0; left: 0;
  display: grid;
  align-content: center;
  background-color: var(--color-bg-white);
  height: var(--header-h);
  width: 100%;
  padding: 5px clamp(17px, 30 / 1440 * 100vw, 30px);
  transition: translate .5s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.l-header.isHide { translate: 0 -110%; }
.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.l-header__logo img {
  height: clamp(38px, 55 / 1440 * 100vw, 55px);
  width: auto;
}
.l-header__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.l-header__tel-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.l-header__tel-num {
  font-family: var(--ffEn);
  font-size: clamp(18px, 22 / 1440 * 100vw, 22px);
  font-weight: 900;
  color: var(--color-text-primary);
  line-height: 1;
}
.l-header__tel-time { font-size: 11px; color: var(--color-text-gray); }

@media screen and (max-width: 767px) {
  .l-header__tel-wrap { display: none; }
  .l-header__cta { gap: 8px; }
}

/* ============================================================
   HERO / KV — サイトのKVスタイルを基調に
============================================================ */
.p-lp-kv {
  position: relative;
  padding-top: var(--header-h);
  overflow: hidden;
  background-color: var(--color-bg-white);
}
/* 右側のライトブルー背景（サイト標準KVパターン）*/
.p-lp-kv::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, #fff 10%, var(--color-primary-light-thin) 45%);
  z-index: 0;
}
/* 左から白でフェード */
.p-lp-kv::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, #fff 0%, #fff 65%, rgba(255,255,255,0) 100%);
  z-index: 1;
}
.p-lp-kv__inner {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 60px 0 80px;
}
.p-lp-kv__text { grid-column: 1; }
.p-lp-kv__visual { grid-column: 2; position: relative; }

/* 右カラム：受講写真ラッパー */
.p-lp-kv__photo-wrap {
  position: relative;
  animation: lp-fadeUp .7s .3s ease both;
}
.p-lp-kv__photo {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(22,107,178,.22);
  display: block;
  object-fit: cover;
}

/* 吹き出しバッジ（写真右上） */
.p-lp-kv__scene-speech {
  position: absolute;
  top: -14px; right: 16px;
  background: var(--color-accent-yellow);
  color: var(--color-text-black);
  font-size: 12px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: calc(1px * infinity);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(228,170,8,.4);
  z-index: 10;
  animation: lp-fadeUp .6s .7s ease both;
}

/* マナリエプラスバッジ（写真下） */
.p-lp-kv__manarie-badge {
  margin-top: 14px;
  background: rgba(58,163,102,.1);
  border: 1.5px solid rgba(58,163,102,.4);
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: lp-fadeUp .6s .8s ease both;
}
.p-lp-kv__manarie-logo { height: 36px; width: auto; }
.p-lp-kv__manarie-txt {
  font-size: 12px;
  font-weight: bold;
  color: var(--color-text-black);
  line-height: 1.6;
}
.p-lp-kv__manarie-txt span { color: var(--color-accent-green); }

@media screen and (max-width: 900px) {
  .p-lp-kv__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .p-lp-kv__text { grid-column: 1; }
  .p-lp-kv__visual { grid-column: 1; max-width: 400px; margin: 0 auto; width: 100%; }
}
@media screen and (max-width: 767px) {
  .p-lp-kv::before { width: 100%; background: linear-gradient(180deg, #fff 5%, var(--color-primary-light-thin) 100%); }
  .p-lp-kv::after { display: none; }
  .p-lp-kv__inner { min-height: auto; padding: 36px 0 48px; gap: 28px; }
  .p-lp-kv__visual { display: none; }
}

/* バッジ */
.p-lp-kv__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-accent-yellow);
  color: var(--color-text-black);
  font-weight: bold;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: calc(1px * infinity);
  margin-bottom: 20px;
  animation: lp-fadeUp .5s ease both;
}
.p-lp-kv__badge::before { content: '★'; color: var(--color-text-black); font-size: 11px; }

/* メインタイトル */
.p-lp-kv__ttl {
  font-weight: 900;
  line-height: 1.35;
  font-size: clamp(28px, 48 / 1440 * 100vw, 52px);
  color: var(--color-text-black);
  margin-bottom: 10px;
  animation: lp-fadeUp .6s .1s ease both;
}
.p-lp-kv__ttl-em {
  color: var(--color-text-primary);
  display: block;
}
/* サブタイトル */
.p-lp-kv__sub {
  font-size: clamp(14px, 18 / 1440 * 100vw, 18px);
  color: var(--color-text-black);
  line-height: 1.8;
  margin-bottom: 36px;
  animation: lp-fadeUp .6s .2s ease both;
}

/* 実績バッジ群 */
.p-lp-kv__stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  animation: lp-fadeUp .6s .3s ease both;
}
.p-lp-kv__stat {
  background-color: var(--color-bg-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-default);
  padding: 14px 20px;
  text-align: center;
  min-width: 120px;
  box-shadow: var(--shadow-default);
}
.p-lp-kv__stat-num {
  font-family: var(--ffEn);
  font-size: clamp(26px, 32 / 1440 * 100vw, 32px);
  font-weight: 900;
  color: var(--color-text-primary);
  line-height: 1;
}
.p-lp-kv__stat-num sup { font-size: 14px; }
.p-lp-kv__stat-label {
  font-size: 11px;
  color: var(--color-text-black);
  margin-top: 5px;
  line-height: 1.4;
  font-weight: bold;
}

/* CTAボタン群 */
.p-lp-kv__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  animation: lp-fadeUp .6s .4s ease both;
}
.p-lp-kv__note {
  font-size: 12px;
  color: var(--color-text-gray);
  margin-top: 12px;
  animation: lp-fadeUp .6s .5s ease both;
}

/* ============================================================
   SECTION COMMON
============================================================ */
.lp-section {
  padding: 80px 0;
}
.lp-section--gray { background-color: var(--color-bg-gray-light); }
.lp-section--blue {
  background: linear-gradient(0deg, var(--color-primary), #0091d9);
  color: var(--color-text-white);
}
.lp-section--navy {
  background-color: #0f2044;
  color: var(--color-text-white);
}
.lp-section--primary-thin { background-color: var(--color-primary-light-thin); }

.lp-section__head {
  margin-bottom: 48px;
}
.lp-section__head--center { text-align: center; }
.lp-section__head--center .c-headingLine { margin: 0 auto; }

/* セクション見出し（白背景用） */
.lp-section__label {
  font-family: var(--ffEn);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  display: block;
  margin-bottom: 8px;
}
.lp-section__label--dark { color: rgba(255,255,255,.6); }

/* ============================================================
   PAIN POINTS（悩み共感）
============================================================ */
.lp-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .lp-pain-grid { grid-template-columns: 1fr; }
}
.lp-pain-card {
  background-color: var(--color-bg-white);
  border-radius: var(--border-radius-default);
  border: 1px solid var(--color-border-gray);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-default);
  transition: translate .4s ease;
}
.lp-pain-card:hover { translate: 0 -5px; }
.lp-pain-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
}
.lp-pain-icon { font-size: 36px; margin-bottom: 14px; }
.lp-pain-ttl {
  font-size: clamp(15px, 17 / 1440 * 100vw, 17px);
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--color-text-black);
  line-height: 1.5;
}
.lp-pain-desc { font-size: 14px; color: var(--color-text-gray); line-height: 1.7; }

/* ============================================================
   SOLUTION（解決策）
============================================================ */
.lp-solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .lp-solution-grid { grid-template-columns: 1fr; }
}
.lp-solution-card {
  background-color: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--border-radius-default);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: background .2s ease;
}
.lp-solution-card:hover { background-color: rgba(255,255,255,.15); }
.lp-solution-num {
  font-family: var(--ffEn);
  font-size: clamp(30px, 36 / 1440 * 100vw, 36px);
  font-weight: 900;
  color: var(--color-accent-yellow);
  line-height: 1;
  min-width: 44px;
}
.lp-solution-ttl {
  font-size: clamp(15px, 17 / 1440 * 100vw, 17px);
  font-weight: bold;
  color: var(--color-text-white);
  margin-bottom: 8px;
}
.lp-solution-desc { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.7; }

/* ============================================================
   RESULTS（合格実績）
============================================================ */
.lp-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
}
.lp-result-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 599px) {
  .lp-result-row { flex-direction: column; gap: 10px; }
}
.lp-result-year {
  min-width: 80px;
  text-align: center;
  background-color: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: var(--border-radius-medium);
  padding: 10px 8px;
  flex-shrink: 0;
}
.lp-result-year--highlight {
  border-color: var(--color-accent-yellow);
  background-color: rgba(228,170,8,.12);
}
.lp-result-year-num {
  font-family: var(--ffEn);
  font-size: 22px;
  font-weight: 900;
  color: rgba(255,255,255,.9);
  line-height: 1;
}
.lp-result-year--highlight .lp-result-year-num { color: var(--color-accent-yellow); }
.lp-result-year-sub { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; }
.lp-result-card {
  flex: 1;
  background-color: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--border-radius-default);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.lp-result-card--highlight {
  border-color: rgba(228,170,8,.4);
  background-color: rgba(228,170,8,.1);
}
@media screen and (max-width: 599px) {
  .lp-result-card { flex-direction: column; gap: 8px; align-items: flex-start; }
}
.lp-result-rate {
  font-family: var(--ffEn);
  font-size: clamp(38px, 48 / 1440 * 100vw, 48px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-primary-light);
}
.lp-result-rate--gold { color: var(--color-accent-yellow); }
.lp-result-rate sup { font-size: 20px; }
.lp-result-detail { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.7; }
.lp-result-detail strong { color: #fff; font-size: 15px; display: block; margin-bottom: 4px; }

/* ============================================================
   VOICES（受講生の声）
============================================================ */
.lp-voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media screen and (max-width: 900px) {
  .lp-voices-grid { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
}
.lp-voice-card {
  background-color: var(--color-bg-white);
  border-radius: var(--border-radius-default);
  padding: 28px;
  box-shadow: var(--shadow-default);
  border: 1px solid var(--color-border-gray);
  position: relative;
  transition: translate .4s ease;
}
.lp-voice-card:hover { translate: 0 -5px; }
.lp-voice-card::before {
  content: '"';
  font-family: Georgia, serif;
  font-size: 80px;
  color: var(--color-primary-light-thin);
  position: absolute;
  top: 8px; right: 16px;
  line-height: 1;
}
.lp-voice-text { font-size: 14px; line-height: 1.8; color: var(--color-text-black); margin-bottom: 20px; position: relative; z-index: 1; }
.lp-voice-person { display: flex; align-items: center; gap: 12px; }
.lp-voice-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary-light-thin);
  border: 2px solid var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.lp-voice-name { font-size: 14px; font-weight: bold; color: var(--color-text-black); }
.lp-voice-origin { font-size: 12px; color: var(--color-text-gray); }
.lp-voice-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(58,163,102,.1);
  color: var(--color-accent-green);
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: calc(1px * infinity);
  margin-top: 4px;
  border: 1px solid rgba(58,163,102,.3);
}

/* ============================================================
   COURSES（コース）
============================================================ */
.lp-course-tabs {
  display: flex;
  gap: 0;
  margin-top: 36px;
  border-bottom: 2px solid var(--color-border-gray);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lp-course-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-text-gray);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
  background: none;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--ffEn), var(--ffJa), sans-serif;
}
.lp-course-tab:hover, .lp-course-tab.is-active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-primary);
}
.lp-course-panel { display: none; margin-top: 28px; }
.lp-course-panel.is-active { display: block; }

.lp-course-card {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
  align-items: start;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--border-radius-default);
  padding: 24px 28px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-default);
  transition: translate .3s ease;
}
.lp-course-card:hover { translate: 0 -3px; }
.lp-course-card--featured {
  border-color: var(--color-accent-yellow);
  border-width: 2px;
  position: relative;
}
.lp-course-card--featured::before {
  content: '★ 最人気コース';
  position: absolute;
  top: -1px; right: 20px;
  background-color: var(--color-accent-yellow);
  color: var(--color-text-black);
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 0 0 4px 4px;
}
@media screen and (max-width: 767px) {
  .lp-course-card { grid-template-columns: 1fr; }
}
.lp-course-cat {
  font-family: var(--ffEn);
  font-size: 11px;
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.lp-course-name {
  font-size: clamp(15px, 17 / 1440 * 100vw, 17px);
  font-weight: bold;
  color: var(--color-text-black);
  margin-bottom: 6px;
}
.lp-course-target { font-size: 13px; color: var(--color-text-gray); }
.lp-course-meta { font-size: 13px; color: var(--color-text-black); line-height: 1.9; }
.lp-course-price { text-align: right; white-space: nowrap; }
.lp-course-price-num {
  font-family: var(--ffEn);
  font-size: clamp(22px, 26 / 1440 * 100vw, 26px);
  font-weight: 900;
  color: var(--color-text-primary);
  line-height: 1;
}
.lp-course-price-sub { font-size: 12px; color: var(--color-text-gray); margin-top: 3px; }

/* ============================================================
   TEACHERS（講師）
============================================================ */
.lp-teachers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media screen and (max-width: 900px) { .lp-teachers-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px) { .lp-teachers-grid { grid-template-columns: 1fr; } }
.lp-teacher-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--border-radius-default);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-default);
  transition: translate .4s ease;
}
.lp-teacher-card:hover { translate: 0 -5px; }
.lp-teacher-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background-color: var(--color-primary-light-thin);
  border: 3px solid var(--color-primary);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  overflow: hidden;
}
.lp-teacher-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-teacher-name { font-size: 18px; font-weight: bold; color: var(--color-text-black); margin-bottom: 4px; }
.lp-teacher-title {
  font-size: 12px;
  color: var(--color-text-white);
  background-color: var(--color-bg-primary);
  display: inline-block;
  padding: 2px 10px;
  border-radius: calc(1px * infinity);
  margin-bottom: 14px;
  font-weight: bold;
}
.lp-teacher-bio { font-size: 13px; color: var(--color-text-black); line-height: 1.7; text-align: left; }
.lp-teacher-cert { font-size: 12px; color: var(--color-text-gray); margin-top: 8px; text-align: left; }

/* ============================================================
   FLOW（受講の流れ）
============================================================ */
.lp-flow {
  position: relative;
  margin-top: 48px;
}
.lp-flow::before {
  content: '';
  position: absolute;
  left: 29px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-light) 100%);
}
.lp-flow-step {
  display: flex;
  gap: 24px;
  margin-bottom: 36px;
  align-items: flex-start;
}
.lp-flow-num {
  min-width: 60px; height: 60px;
  border-radius: 50%;
  background-color: var(--color-bg-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ffEn);
  font-size: 20px;
  font-weight: 900;
  color: var(--color-text-white);
  flex-shrink: 0;
  position: relative; z-index: 1;
  box-shadow: 0 4px 12px rgba(22,107,178,.3);
}
.lp-flow-content { padding-top: 10px; }
.lp-flow-ttl {
  font-size: clamp(15px, 17 / 1440 * 100vw, 17px);
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}
.lp-flow-desc { font-size: 14px; color: var(--color-text-black); line-height: 1.7; }

/* ============================================================
   PRICE（料金）
============================================================ */
.lp-price-card {
  background-color: var(--color-bg-white);
  border-radius: var(--border-radius-default);
  padding: clamp(32px, 48 / 1440 * 100vw, 48px);
  box-shadow: 0 4px 24px rgba(22,107,178,.14);
  max-width: 680px;
  margin: 40px auto 0;
  border: 1px solid var(--color-border-gray);
  position: relative;
  overflow: hidden;
}
.lp-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
}
.lp-price-label { font-size: 13px; color: var(--color-text-gray); margin-bottom: 6px; }
.lp-price-amount {
  font-family: var(--ffEn);
  font-size: clamp(52px, 64 / 1440 * 100vw, 64px);
  font-weight: 900;
  color: var(--color-text-primary);
  line-height: 1;
}
.lp-price-amount span { font-size: 20px; color: var(--color-text-gray); }
.lp-price-tax { font-size: 13px; color: var(--color-text-gray); margin-top: 4px; }
.lp-price-features { margin-top: 24px; display: grid; gap: 10px; }
.lp-price-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.lp-price-feature::before {
  content: '✓';
  color: var(--color-accent-green);
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
}
.lp-price-cta { margin-top: 28px; }

/* キャッシュバックバナー */
.lp-cashback {
  background-color: rgba(228,170,8,.08);
  border: 1.5px solid rgba(228,170,8,.4);
  border-radius: var(--border-radius-default);
  padding: 20px 24px;
  max-width: 680px;
  margin: 16px auto 0;
  text-align: center;
}
.lp-cashback-label { font-size: 13px; font-weight: bold; color: var(--color-text-accent-yellow); margin-bottom: 6px; }
.lp-cashback-ttl { font-size: 17px; font-weight: bold; margin-bottom: 6px; }
.lp-cashback-ttl span { font-family: var(--ffEn); font-size: 24px; font-weight: 900; color: var(--color-text-accent-yellow); }
.lp-cashback-desc { font-size: 13px; color: var(--color-text-gray); }

/* ============================================================
   FOOTER CTA（サイト標準スタイル）
============================================================ */
.l-footerCta {
  background: linear-gradient(0deg, #166BB2, #0091D9);
  padding: 80px 0;
}
.l-footerCta__inner { text-align: center; }
.l-footerCta .c-headingLine {
  background: none;
  color: #fff;
  margin: 0 auto 12px;
}
.l-footerCta .c-headingXXL { color: #fff; }
.l-footerCta .c-txtDesc { color: rgba(255,255,255,.9); }
.l-footerCta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.l-footerCta__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--color-accent-yellow);
  color: var(--color-text-black);
  font-weight: 900;
  font-size: clamp(15px, 17 / 1440 * 100vw, 17px);
  padding: 18px 40px;
  border-radius: calc(1px * infinity);
  cursor: pointer;
  transition: scale .3s ease;
  border: 2px solid var(--color-accent-yellow);
}
.l-footerCta__btn-primary:hover { scale: 1.05; opacity: 1; }
.l-footerCta__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: clamp(15px, 16 / 1440 * 100vw, 16px);
  font-weight: bold;
  padding: 18px 32px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: calc(1px * infinity);
  transition: border-color .3s, background .3s;
}
.l-footerCta__btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.1); opacity: 1; }
.l-footerCta__note { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 16px; }

/* ============================================================
   FOOTER（サイト標準）
============================================================ */
.l-footer {
  background-color: #1a1a2e;
  padding: 48px 0 28px;
  color: rgba(255,255,255,.55);
}
.l-footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.l-footer__logo img { height: 42px; filter: brightness(0) invert(.7); margin-bottom: 10px; }
.l-footer__address { font-size: 12px; line-height: 1.9; }
.l-footer__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  padding-top: 50px;
}
.l-footer__links a { color: rgba(255,255,255,.45); }
.l-footer__links a:hover { color: rgba(255,255,255,.9); opacity: 1; }
.l-footer__copy {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 20px;
}

/* ============================================================
   FLOATING CTA（スマホ固定）
============================================================ */
.lp-float-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 10px 14px;
  background-color: rgba(255,255,255,.97);
  border-top: 1px solid var(--color-border-gray);
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.lp-float-cta a {
  display: block;
  text-align: center;
  background-color: var(--color-bg-primary);
  color: var(--color-text-white);
  font-weight: bold;
  font-size: 16px;
  padding: 14px;
  border-radius: calc(1px * infinity);
}
@media screen and (max-width: 767px) {
  .lp-float-cta { display: block; }
}

/* ============================================================
   SCROLL REVEAL
============================================================ */
@keyframes lp-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.lp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--easing-default), transform .6s var(--easing-default);
}
.lp-reveal.is-visible { opacity: 1; transform: translateY(0); }
.lp-reveal-d1 { transition-delay: .1s; }
.lp-reveal-d2 { transition-delay: .2s; }
.lp-reveal-d3 { transition-delay: .3s; }

/* ============================================================
   MISC
============================================================ */
.lp-section-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-primary-light-thin));
}

/* ============================================================
   MANARIE PLUS セクション
============================================================ */
/* 2本柱ビジュアル */
.lp-2pillars {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 48px;
}
.lp-pillar {
  background-color: var(--color-bg-white);
  border: 2px solid var(--color-border-gray);
  border-radius: var(--border-radius-default);
  padding: 32px 28px;
  box-shadow: var(--shadow-default);
  transition: translate .4s ease;
}
.lp-pillar:hover { translate: 0 -4px; }
.lp-pillar--zoom { border-color: var(--color-primary); }
.lp-pillar--manarie { border-color: var(--color-accent-green); }
.lp-pillar__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--ffEn);
  padding: 3px 10px;
  border-radius: calc(1px * infinity);
  margin-bottom: 14px;
}
.lp-pillar__tag--zoom {
  background-color: var(--color-primary-light-thin);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.lp-pillar__tag--manarie {
  background-color: rgba(58,163,102,.1);
  color: var(--color-accent-green);
  border: 1px solid rgba(58,163,102,.4);
}
.lp-pillar__icon { font-size: 40px; margin-bottom: 12px; }
.lp-pillar__ttl {
  font-size: clamp(17px, 20 / 1440 * 100vw, 20px);
  font-weight: 900;
  margin-bottom: 10px;
  line-height: 1.4;
}
.lp-pillar__ttl--zoom { color: var(--color-primary); }
.lp-pillar__ttl--manarie { color: var(--color-accent-green); }
.lp-pillar__desc { font-size: 14px; color: var(--color-text-black); line-height: 1.8; }
.lp-pillar__price {
  margin-top: 16px;
  font-size: 13px;
  font-weight: bold;
  color: var(--color-text-gray);
}
.lp-pillar__price span {
  font-family: var(--ffEn);
  font-size: 22px;
  font-weight: 900;
  color: var(--color-primary);
}
.lp-pillar__price-free {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: var(--color-accent-green);
  border: 1.5px solid var(--color-accent-green);
  border-radius: calc(1px * infinity);
  padding: 2px 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.lp-pillar-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.lp-pillar-plus__circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent-green));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--ffEn);
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(22,107,178,.25);
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .lp-2pillars {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 16px;
  }
  .lp-pillar-plus { padding: 0; justify-content: flex-start; }
  .lp-pillar-plus__circle { width: 40px; height: 40px; font-size: 18px; }
}

/* マナリエプラス コンテンツグリッド */
.lp-manarie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media screen and (max-width: 900px) { .lp-manarie-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 599px) { .lp-manarie-grid { grid-template-columns: 1fr; } }

.lp-manarie-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--border-radius-default);
  padding: 22px 20px;
  box-shadow: var(--shadow-default);
  transition: translate .4s ease;
  position: relative;
  overflow: hidden;
}
.lp-manarie-card:hover { translate: 0 -4px; }
.lp-manarie-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-color: var(--color-accent-green);
}
.lp-manarie-card--highlight::before { background: linear-gradient(90deg, var(--color-primary), var(--color-accent-green)); }
.lp-manarie-card__icon { font-size: 28px; margin-bottom: 10px; }
.lp-manarie-card__label {
  font-size: 10px;
  font-weight: 900;
  font-family: var(--ffEn);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-green);
  margin-bottom: 6px;
}
.lp-manarie-card__ttl {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-text-black);
  margin-bottom: 8px;
  line-height: 1.4;
}
.lp-manarie-card__desc { font-size: 13px; color: var(--color-text-gray); line-height: 1.7; }
.lp-manarie-card__num {
  font-family: var(--ffEn);
  font-size: 28px;
  font-weight: 900;
  color: var(--color-accent-green);
  line-height: 1;
  margin-bottom: 2px;
}
.lp-manarie-card__num-sub { font-size: 12px; color: var(--color-text-gray); }

/* 30日無料バナー */
.lp-manarie-free-banner {
  background: linear-gradient(135deg, rgba(58,163,102,.08), rgba(22,107,178,.06));
  border: 2px solid rgba(58,163,102,.35);
  border-radius: var(--border-radius-default);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.lp-manarie-free-banner__icon { font-size: 48px; flex-shrink: 0; }
.lp-manarie-free-banner__body { flex: 1; min-width: 200px; }
.lp-manarie-free-banner__ttl {
  font-size: clamp(16px, 20 / 1440 * 100vw, 20px);
  font-weight: 900;
  margin-bottom: 6px;
  line-height: 1.4;
}
.lp-manarie-free-banner__ttl em {
  color: var(--color-accent-green);
  font-style: normal;
}
.lp-manarie-free-banner__desc { font-size: 14px; color: var(--color-text-gray); line-height: 1.7; }
.lp-manarie-free-banner__price {
  font-size: 13px;
  font-weight: bold;
  margin-top: 8px;
}
.lp-manarie-free-banner__price span {
  font-family: var(--ffEn);
  font-size: 18px;
  font-weight: 900;
  color: var(--color-primary);
}

/* ============================================================
   SCHEDULE VISUAL（スケジュール図）
============================================================ */
.lp-schedule {
  margin-top: 40px;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--border-radius-default);
  padding: 28px;
  box-shadow: var(--shadow-default);
}
.lp-schedule__title {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-text-primary);
  margin-bottom: 16px;
  text-align: center;
}
.lp-schedule__grid {
  display: grid;
  grid-template-columns: 80px repeat(4,1fr);
  gap: 6px;
  font-size: 13px;
}
.lp-schedule__head {
  background-color: var(--color-bg-primary);
  color: #fff;
  text-align: center;
  padding: 8px 4px;
  border-radius: var(--border-radius-small);
  font-weight: bold;
  font-size: 12px;
}
.lp-schedule__time {
  background-color: var(--color-bg-gray-light);
  text-align: center;
  padding: 10px 4px;
  border-radius: var(--border-radius-small);
  font-weight: bold;
  font-size: 12px;
  color: var(--color-text-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-schedule__cell {
  border-radius: var(--border-radius-small);
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.lp-schedule__cell--blue {
  background-color: var(--color-primary-light-thin);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: bold;
}
.lp-schedule__cell--green {
  background-color: rgba(58,163,102,.1);
  border: 1px solid rgba(58,163,102,.4);
  color: var(--color-accent-green);
  font-weight: bold;
}
.lp-schedule__cell--empty {
  background-color: var(--color-bg-gray-light);
  color: var(--color-text-gray);
}
.lp-schedule__note {
  font-size: 12px;
  color: var(--color-text-gray);
  text-align: center;
  margin-top: 12px;
  line-height: 1.7;
}
.lp-schedule__multi-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  background: rgba(228,170,8,.1);
  border: 1.5px solid rgba(228,170,8,.4);
  border-radius: var(--border-radius-default);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: bold;
  color: var(--color-text-black);
}
@media screen and (max-width: 599px) {
  .lp-schedule__grid { grid-template-columns: 60px repeat(4,1fr); font-size: 11px; gap: 4px; }
  .lp-schedule__head { font-size: 10px; padding: 6px 2px; }
  .lp-schedule__cell { font-size: 10px; padding: 6px 2px; }
}

/* ============================================================
   CYCLE（サイクル型学習）
============================================================ */
.lp-cycle {
  margin-top: 48px;
  background: linear-gradient(135deg, var(--color-primary-light-thin) 0%, rgba(255,255,255,0) 60%);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--border-radius-default);
  padding: 36px 32px;
}
.lp-cycle__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .lp-cycle__inner { grid-template-columns: 1fr; gap: 24px; }
  .lp-cycle { padding: 24px 20px; }
}
.lp-cycle__img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.lp-cycle__text-ttl {
  font-size: clamp(18px, 22 / 1440 * 100vw, 22px);
  font-weight: 900;
  color: var(--color-text-primary);
  margin-bottom: 14px;
  line-height: 1.4;
}
.lp-cycle__text-ttl em {
  font-style: normal;
  background: linear-gradient(transparent 60%, rgba(228,170,8,.4) 60%);
}
.lp-cycle__text-desc {
  font-size: 14px;
  color: var(--color-text-black);
  line-height: 1.9;
}
.lp-cycle__points {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.lp-cycle__point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
}
.lp-cycle__point-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background-color: var(--color-bg-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   TEACHERS（楽しいトーン）
============================================================ */
.lp-teacher-hobby {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  background-color: rgba(228,170,8,.1);
  border: 1px solid rgba(228,170,8,.3);
  border-radius: calc(1px * infinity);
  padding: 2px 10px;
  margin-bottom: 10px;
  color: var(--color-text-black);
}
.lp-teacher-message {
  font-size: 13px;
  color: var(--color-text-black);
  line-height: 1.8;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--color-primary-light-thin);
  border-radius: var(--border-radius-medium);
  border-left: 3px solid var(--color-primary);
  position: relative;
}
.lp-teacher-message::before {
  content: '💬';
  position: absolute;
  top: -10px; left: 10px;
  font-size: 16px;
}

/* ============================================================
   FAQ（やさしい日本語）
============================================================ */
.lp-faq { margin-top: 40px; display: grid; gap: 16px; }
.lp-faq-item {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--border-radius-default);
  overflow: hidden;
  box-shadow: var(--shadow-default);
}
.lp-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  color: var(--color-text-black);
  line-height: 1.6;
  user-select: none;
}
.lp-faq-q-badge {
  min-width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--color-bg-primary);
  color: #fff;
  font-family: var(--ffEn);
  font-size: 14px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-faq-q-text { flex: 1; padding-top: 4px; }
.lp-faq-q-arrow {
  font-size: 12px;
  color: var(--color-text-gray);
  margin-top: 6px;
  transition: transform .3s;
  flex-shrink: 0;
}
.lp-faq-item.is-open .lp-faq-q-arrow { transform: rotate(180deg); }
.lp-faq-a {
  display: none;
  padding: 0 20px 18px 64px;
  font-size: 14px;
  color: var(--color-text-black);
  line-height: 1.8;
  border-top: 1px solid var(--color-border-gray);
}
.lp-faq-item.is-open .lp-faq-a { display: block; padding-top: 14px; }
.lp-faq-a-badge {
  display: inline-block;
  font-family: var(--ffEn);
  font-size: 13px;
  font-weight: 900;
  color: var(--color-accent-green);
  margin-right: 6px;
}

/* ============================================================
   PRICE（初月無料・コスト計算）
============================================================ */
.lp-price-campaign {
  background: linear-gradient(135deg, rgba(228,170,8,.12), rgba(248,134,73,.08));
  border: 2px solid var(--color-accent-yellow);
  border-radius: var(--border-radius-default);
  padding: 20px 24px;
  max-width: 680px;
  margin: 16px auto 0;
  text-align: center;
}
.lp-price-campaign__label {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-accent-orange);
  margin-bottom: 6px;
}
.lp-price-campaign__ttl {
  font-size: clamp(18px, 22 / 1440 * 100vw, 22px);
  font-weight: 900;
  color: var(--color-text-black);
  margin-bottom: 6px;
}
.lp-price-campaign__ttl em {
  font-style: normal;
  color: var(--color-accent-orange);
}
.lp-price-campaign__desc { font-size: 13px; color: var(--color-text-gray); }
.lp-price-calc {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--border-radius-default);
  padding: 20px 24px;
  max-width: 680px;
  margin: 12px auto 0;
  box-shadow: var(--shadow-default);
}
.lp-price-calc__ttl {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-text-gray);
  margin-bottom: 12px;
  text-align: center;
}
.lp-price-calc__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
  text-align: center;
  line-height: 1.8;
  color: var(--color-text-black);
}
.lp-price-calc__highlight {
  font-family: var(--ffEn);
  font-size: 26px;
  font-weight: 900;
  color: var(--color-text-primary);
}

/* ============================================================
   PC横幅修正 — lp-jp-btc.css への追記用
   ・コンテンツ幅: 1200px
   ・セクション背景色: 画面幅いっぱいに広がる
   lp-jp-btc.css の末尾に追記してください
============================================================ */

/* ---- コンテナ最大幅を 1200px に統一 ---- */
.l-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* ---- ヘッダー内幅も同様に ---- */
.l-header__inner {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* ============================================================
   背景を画面幅いっぱいに広げる
   ── 親要素の幅に縛られず 100vw に広げるテクニック ──
   section 自体を左に50%引き戻し width:100vw に設定する
============================================================ */

/* ---- KVセクション ---- */
.p-lp-kv {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.p-lp-kv__inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* ---- 各セクション（背景あり）---- */
.lp-section,
.lp-section--gray,
.lp-section--blue,
.lp-section--navy,
.lp-section--primary-thin,
.lp-section-divider,
.l-footerCta,
.l-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

/* ---- セクション内コンテナ：コンテンツを1200pxに制限 ---- */
.lp-section .l-container,
.l-footerCta .l-container,
.l-footer .l-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* ---- タブレット（1280px以下）：パディング縮小 ---- */
@media (max-width: 1280px) {
  .l-container,
  .l-header__inner,
  .p-lp-kv__inner,
  .lp-section .l-container,
  .l-footerCta .l-container,
  .l-footer .l-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ---- スマホ（768px以下）：全幅・パディング縮小 ---- */
@media (max-width: 768px) {
  .l-container,
  .l-header__inner,
  .p-lp-kv__inner,
  .lp-section .l-container,
  .l-footerCta .l-container,
  .l-footer .l-container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .p-lp-kv,
  .lp-section,
  .lp-section--gray,
  .lp-section--blue,
  .lp-section--navy,
  .lp-section--primary-thin,
  .lp-section-divider,
  .l-footerCta,
  .l-footer {
    width: 100%;
    left: 0;
    transform: none;
  }
}