@charset "UTF-8";

/* LP 共通スタイル — 全LP共通 (SP専用 / 402px基準) */


/* レイアウト (l-*) */

.l-main {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  background-color: var(--color-white);
}


/* ヘッダー (l-header) — FV を 402px 幅制約＋中央寄せする wrapper */
.l-header {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* FV 上のロゴ (中央寄せ・白背景) */
.l-header__logo {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: var(--space-lg) var(--mobile-gutter);
  background-color: var(--color-white);
  line-height: 0;
}
.l-header__logo img {
  width: auto;
  height: 2rem;   /* 28px */
}

/* StepForm 継続中 (page 2 以降) は FV 内 CTA を非表示 (フォーム直下に出るため) */
.l-header--step .p-fv .c-button-wrap {
  display: none;
}


/* フッター (l-footer) */
.l-footer {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--space-2xl) var(--mobile-gutter) var(--space-2xl);
  background-color: var(--color-accent);
  color: var(--color-white);
  text-align: center;
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
}

.l-footer__copyright {
  font-size: var(--font-xs);
  color: var(--color-white);
}


/* セクション (l-section) — LP 共通セクション余白。l-main 外でも使うため max-width / 中央寄せを自前で持つ */
.l-section {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--space-5xl) var(--mobile-gutter);
}

/* アンカースクロール時、ジャンプ先が画面上端に張り付かないよう上に余白を確保。 */
.l-section,
.p-form {
  scroll-margin-top: var(--space-5xl);
}

/* 日時選択 (#seminar-date-select) はスロットから直接ジャンプするため、
   選択中の見出し・ラベルが隠れないよう特に手前 (大きめ) で止める。 */
#seminar-date-select {
  scroll-margin-top: 9rem;
}

/* 背景ありセクション。色は --color-section-bg で LP が上書き (default --color-sky) */
.l-section--tinted {
  background-color: var(--color-section-bg, var(--color-sky));
}

/* 背景ありセクションの薄い版 — 会話セクション等、控えめに区切りたい箇所に使用 */
.l-section--tinted-light {
  background-color: color-mix(in srgb, var(--color-section-bg, var(--color-sky)) 45%, var(--color-white));
}

.l-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  width: 100%;
}

/* 予約フォーム枠 (p-form) — l-section を使わず ss-schedule と同じフラットなセクション構造。
   横幅・左右ガターは自前で持ち、上下は l-section のパディング相当をマージンで確保する。 */
.p-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  margin-block: 0;
  padding: var(--space-5xl) var(--mobile-gutter);
}

.p-form .l-section__inner {
  gap: var(--space-lg);
}


/* 見出し (c-heading) 直下のリード文 — 全 LP 共通でセンター揃え */
.c-heading + p {
  text-align: center;
}


/* FV (p-fv) — <main> 外に描画されるため 402px 幅 + 中央寄せを強制 (装飾は各 LP で上書き) */
.p-fv {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* FV 訴求リスト (p-fv--copy) — <li><strong>ラベル</strong>本文</li> をラベル行 + 本文行の2行で表示 (全 LP 共通) */
.p-fv--copy .p-fv__copy ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-fv--copy .p-fv__copy li strong {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-accent);
}


/* Company (p-company) — セミナー運営 (全 LP 共通 / footer-lp.php) */
.p-company__title {
  padding-bottom: var(--space-md);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-gray-200);
}

.p-company__image {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--border-radius-md);
}

.p-company__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-company__table {
  margin: 0;
}

/* 運営会社下の横並びテキストリンク (プライバシーポリシー / 運営会社) */
.p-company__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-xl);
}

.p-company__link {
  font-size: var(--font-sm);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* Disclaimer (p-disclaimer) — 企業情報下の免責事項 (全 LP 共通) */
.p-disclaimer .l-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: 0;
  padding-bottom: 0;
}

.p-disclaimer__title {
  margin: 0;
  padding-bottom: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-gray-200);
}

.p-disclaimer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.p-disclaimer__item {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--font-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  text-align: left;
}

.p-disclaimer__item::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-ink);
}


/* Thanks (p-thanks) — 固定ページ page-thanks.php テンプレート用 */
.p-thanks__card {
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.p-thanks__title {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-ink);
}

.p-thanks__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
}

.p-thanks__note {
  font-size: var(--font-sm);
  color: var(--color-ink);
  opacity: 0.7;
}


/* Seminar Form (p-form) — form.html / Thanks 兼用 */
.p-form .c-form__policy p,
.p-form .c-form__policy li {
  text-align: justify;
}


/* ボタン (c-button) — LP の CTA / フォーム submit 共通 */
.c-button-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.c-button-wrap__copy {
  position: relative;
  z-index: 2; /* hover 時の c-button より前面に保つ */
  display: inline-block;
  margin-bottom: calc(var(--space-2xl) * -1); /* 下のボタンに寄せる */
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 0.143rem solid var(--color-accent);
  border-radius: var(--border-radius-full);
}

/* 下向き吹き出しシッポ (::before=枠線 / ::after=塗り) */
.c-button-wrap__copy::before,
.c-button-wrap__copy::after {
  content: "";
  position: absolute;
  left: 50%;
  border-style: solid;
  border-color: transparent;
  transform: translateX(-50%);
}

.c-button-wrap__copy::before {
  bottom: -0.714rem;
  border-width: 0.714rem 0.571rem 0 0.571rem;
  border-top-color: var(--color-accent);
}

.c-button-wrap__copy::after {
  bottom: -0.429rem;
  border-width: 0.571rem 0.429rem 0 0.429rem;
  border-top-color: var(--color-white);
}

/* 送信ボタンが無効化されているとき、コピー吹き出しも連動してグレーアウト */
.c-button-wrap:has(button:disabled) .c-button-wrap__copy,
.c-button-wrap:has(button.is-disabled) .c-button-wrap__copy {
  color: var(--color-text-disabled);
  border-color: var(--color-disabled);
}
.c-button-wrap:has(button:disabled) .c-button-wrap__copy::before,
.c-button-wrap:has(button.is-disabled) .c-button-wrap__copy::before {
  border-top-color: var(--color-disabled);
}

/* ボタン下の参加条件など小さな注記。ボタン (3D 影あり) と密着しないよう余白を確保 */
.c-button-wrap__condition {
  margin-top: var(--space-sm);
  font-size: var(--font-xs);
  line-height: 1.5;
  color: var(--color-ink);
  opacity: 0.75;
  text-align: center;
}

/* CTA と submit は同一の見た目。詳細度を (0,2,1) に上げ base.css のリセット (0,1,1) を超える */
.c-button,
input[type="submit"].c-form__submit,
button.c-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 24.286rem; /* 340px */
  min-height: 4rem; /* 56px */
  margin-inline: auto;
  padding: var(--space-lg) var(--space-xl);
  font-family: inherit;
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-align: center;
  border: 0;
  border-radius: var(--border-radius-full);
  /* 下側に立体影 (ぼかし 0)。--c-button-shadow で色を上書き可 */
  box-shadow: 0 0.429rem 0 var(--c-button-shadow, rgba(0, 0, 0, 0.2));
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* box-shadow の補間は非合成アニメーションになるため、移動だけを補間する。 */
  transition: transform var(--transition-base);
}

/* hover / active: 影の底を固定したままボタンが沈む物理モデル (translateY = 影の差分) */
.c-button:hover,
input[type="submit"].c-form__submit:hover,
button.c-form__submit:hover {
  opacity: 1;
  animation: none; /* パルスを止めて沈み込み (translateY) を効かせる */
  transform: translateY(0.300rem);
  box-shadow: 0 0.129rem 0 var(--c-button-shadow, rgba(0, 0, 0, 0.2));
}

.c-button:active,
input[type="submit"].c-form__submit:active,
button.c-form__submit:active {
  animation: none;
  transform: translateY(0.358rem);
  box-shadow: 0 0.071rem 0 var(--c-button-shadow, rgba(0, 0, 0, 0.2));
}

/* 送信ボタン無効化 (必須未入力時) — グレーアウト + 立体影/グラデを解除 */
input[type="submit"].c-form__submit:disabled,
input[type="submit"].c-form__submit.is-disabled,
button.c-form__submit:disabled,
button.c-form__submit.is-disabled {
  background: var(--color-disabled) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

.c-button,
input[type="submit"].c-form__submit,
button.c-form__submit {
  background: var(--gradient-accent);
}

.c-button--accent  { background: var(--gradient-accent); }
.c-button--orange { background: var(--gradient-orange); }

/* CTA 注目アニメーション: ふわっと拡大縮小して注目を集める (pulse)。
   hover/active の沈み込み (translateY) と transform が競合するため、
   操作中は animation を停止して沈み込みを優先させる。 */
.c-button {
  animation: c-button-pulse 1.6s ease-in-out infinite;
}
@keyframes c-button-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .c-button { animation: none; }
}


/* チャット吹き出し (c-chat) — LP の p-what セクション等で使用 */
.c-chat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
}

.c-chat--left  { flex-direction: row; }
.c-chat--right { flex-direction: row-reverse; }

.c-chat__avatar {
  flex-shrink: 0;
  width: 4.286rem; /* 60px */
  height: 4.286rem;
  border-radius: 50%;
  object-fit: cover;
}

.c-chat__balloon {
  position: relative;
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
}

.c-chat--left .c-chat__balloon::before {
  content: "";
  position: absolute;
  top: 1.143rem;
  left: -0.571rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.429rem 0.571rem 0.429rem 0;
  border-color: transparent var(--color-white) transparent transparent;
}

.c-chat--right .c-chat__balloon::before {
  content: "";
  position: absolute;
  top: 1.143rem;
  right: -0.571rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.429rem 0 0.429rem 0.571rem;
  border-color: transparent transparent transparent var(--color-white);
}

/* チャット吹き出し — 名前ラベル付きレイアウト (c-chat__body 構造の場合のみ適用)。
   アバター下揃え + 吹き出し上に名前 + 下端のしっぽ。旧構造 (balloon 直下) は上記の既定のまま。
   <li class="c-chat c-chat--left">
     <img class="c-chat__avatar" …>
     <div class="c-chat__body">
       <span class="c-chat__name">名前</span>
       <div class="c-chat__balloon"><p>本文</p></div>
     </div>
   </li> */
.c-chat:has(> .c-chat__body) {
  align-items: flex-end;
}

.c-chat__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.c-chat--left  .c-chat__body { align-items: flex-start; }
.c-chat--right .c-chat__body { align-items: flex-end; }

.c-chat__name {
  padding-inline: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  color: rgba(var(--color-ink-rgb), 0.75);
}

.c-chat__body .c-chat__balloon {
  flex: none;
  width: fit-content;
  max-width: 100%;
}

.c-chat--left  .c-chat__body .c-chat__balloon { border-bottom-left-radius: 0; }
.c-chat--right .c-chat__body .c-chat__balloon { border-bottom-right-radius: 0; }

/* しっぽ — 吹き出し下端の角からアバター側へ張り出す三角形 */
.c-chat--left .c-chat__body .c-chat__balloon::before {
  top: auto;
  bottom: 0;
  left: -0.786rem;
  width: 0.857rem;
  height: 1.143rem;
  border: 0;
  background-color: var(--color-white);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.c-chat--right .c-chat__body .c-chat__balloon::before {
  top: auto;
  bottom: 0;
  right: -0.786rem;
  width: 0.857rem;
  height: 1.143rem;
  border: 0;
  background-color: var(--color-white);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}


/* セミナースケジュール (ss-schedule) — plugin: seminar-schedule のフロント UI (accent は :root --color-accent) */

.ss-schedule [hidden] {
  display: none !important;
}

.ss-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  font-family: var(--font-family);
  color: var(--color-ink);
}


/* Intro */
.ss-schedule__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  text-align: center;
}

.ss-schedule__intro-lead {
  margin: 0;
  font-size: var(--font-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: var(--line-height-snug);
}

.ss-schedule__intro-notice {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-ink);
  line-height: var(--line-height-normal);
}


/* Heading */
.ss-schedule__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy, var(--color-ink));
  text-align: center;
  line-height: 1.3;
}

.ss-schedule__heading-arrow {
  color: var(--color-accent);
  font-size: var(--font-sm);
}


/* Tabs — 開催日ナビゲーション */
.ss-schedule__tabs {
  display: flex;
  gap: var(--space-sm);
  padding: 0 0 2px;
  margin: 0;
}

.ss-schedule__tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xs);
  background: var(--color-gray-100);
  border: 0;
  border-radius: var(--border-radius-md);
  color: var(--color-ink);
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.ss-schedule__tab:hover {
  background: var(--color-gray-200);
}

.ss-schedule__tab.is-active,
.ss-schedule__tab.is-active:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.ss-schedule__tab-date {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-sm);
  white-space: nowrap;
}

.ss-schedule__tab-day {
  font-size: var(--font-xl);
  line-height: 1;
}

.ss-schedule__tab-dow {
  font-size: var(--font-sm);
}


/* Panels — 日別スロット一覧 */
.ss-schedule__panel {
  display: none;
}

.ss-schedule__panel.is-active {
  display: block;
  animation: ss-schedule-fadein 0.2s ease-out;
}

@keyframes ss-schedule-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Slots — 時間枠カード */
.ss-schedule__slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-schedule__slot {
  list-style: none;
}

.ss-schedule__slot-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-sm) var(--space-md);
  font-family: inherit;
  font-size: var(--font-base);
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.ss-schedule__slot-link:hover {
  transform: translateY(-1px);
  border-color: var(--color-accent);
}

.ss-schedule__slot-link.is-selected,
.ss-schedule__slot-link.is-selected:hover {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.ss-schedule__slot-link.is-selected .ss-schedule__slot-mark {
  color: var(--color-white);
}

.ss-schedule__slot-link.is-disabled,
.ss-schedule__slot-link.is-disabled.is-selected,
.ss-schedule__slot-link.is-disabled.is-selected:hover {
  color: var(--color-gray-500, #888);
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* 満員 (is-disabled) マークは is-selected と共存しても accent 色を保つ */
.ss-schedule__slot-link.is-disabled .ss-schedule__slot-mark--full,
.ss-schedule__slot-link.is-disabled.is-selected .ss-schedule__slot-mark--full {
  color: var(--color-accent);
}

.ss-schedule__slot-time {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-medium, 500);
}


/* Marks — ○ 空きあり / △ 残席わずか / 満員御礼 */
.ss-schedule__slot-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.ss-schedule__slot-mark--available { color: var(--color-success); }
.ss-schedule__slot-mark--few       { color: var(--color-orange); }
.ss-schedule__slot-mark--full {
  color: var(--color-ink);
  font-size: var(--font-base);
  letter-spacing: 0.05em;
}


/* ============================================================
   003 共通レイアウト
   ------------------------------------------------------------
   body の .lp-layout-003 だけで切り替える。配色トークンは
   hcw/gmw/gow-assets-003.css に分離し、001・002へ影響させない。
   ============================================================ */

/* submit は solid ではなく gradient で (CTA と揃える) */
.lp-layout-003 input[type="submit"].c-form__submit,
.lp-layout-003 button.c-form__submit {
  background: var(--gradient-accent);
}


/* CTA 上の吹き出しコピー — ボタンと同じピンクで枠・シッポを揃える */
.lp-layout-003 .c-button-wrap__copy { border-color: var(--color-cta); }
.lp-layout-003 .c-button-wrap__copy::before { border-top-color: var(--color-cta); }


/* 共通コンポーネントの上書き — カードは deep 系の淡い影 (吹き出しの accent 系と色味を変える) */
.lp-layout-003 .c-card {
  box-shadow: 0 6px 20px rgba(var(--color-card-shadow-rgb, var(--color-accent-deep-rgb)), 0.16);
}

.lp-layout-003 .c-chat__balloon {
  box-shadow: 0 5px 16px rgba(var(--color-chat-shadow-rgb, var(--color-accent-rgb)), 0.28);
  color: var(--color-accent-deep); /* 吹き出し内テキストはプライマリー系 (deep) */
}

.lp-layout-003 .c-chat__avatar {
  width: 5.714rem; /* 80px */
  height: 5.714rem;
  border-radius: 0;
  object-fit: contain;
}

.lp-layout-003 .ss-schedule__slot-link {
  box-shadow: none;
}
.lp-layout-003 .ss-schedule__slot-link:hover {
  box-shadow: none;
}
.lp-layout-003 .ss-schedule__slot-link.is-selected,
.lp-layout-003 .ss-schedule__slot-link.is-selected:hover {
  box-shadow: none;
}


/* FV (p-fv) */
.lp-layout-003 .p-fv {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  /* width / max-width / margin-inline は lp-common.css で共通設定済み */
  background-color: var(--color-white);
}

.lp-layout-003 .p-fv__inner {
  position: relative; /* 画像下部に重ねる .c-button-wrap の配置基準 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
}

.lp-layout-003 .p-fv__catch {
  display: block;
  width: 100%;
  margin: 0;
  line-height: var(--line-height-none);
}

.lp-layout-003 .p-fv__catch img {
  width: 100%;
  height: auto;
}

/* CTA ボタンを画像最下部に重ねる (bottom / padding は画像差替時に微調整) */
.lp-layout-003 .p-fv .c-button-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  padding-inline: var(--mobile-gutter);
}

/* CTAボタン下の参加条件 — FV (画像オーバーレイ) では省スペースのためボタンに寄せる。
   汎用スタイル (font / color / 正の余白) は lp-common.css に定義。 */
.lp-layout-003 .p-fv .c-button-wrap__condition {
  margin-top: calc(var(--space-md) - var(--space-xl));
}


/* Voice (p-voice) — Swiper */
.lp-layout-003 .p-voice {
  padding-inline: 0;
}

.lp-layout-003 .p-voice__lead {
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-ink);
}

.lp-layout-003 .p-voice__swiper {
  --swiper-navigation-color: var(--color-accent);
  --swiper-navigation-size: 1.714rem;
  width: 100%;
  /* 横はセクションのガター内に収め、影が切れない最小限の余白を確保。
     縦の描画余白だけ負の margin で相殺する。 */
  margin: calc(var(--space-xl) * -1) 0;
  padding: var(--space-xl);
  position: relative;
}

.lp-layout-003 .p-voice__list {
  width: 100%;
  overflow: visible; /* base.css の ul overflow を打ち消し、カード影のクリップを防ぐ (クリップは .swiper 側に任せる) */
}

.lp-layout-003 .p-voice__item {
  display: flex; /* 全スライドの高さを揃える (swiper-wrapper の stretch に追従) */
  width: 100%;
  height: auto;
}

.lp-layout-003 .p-voice__item .p-voice__card {
  width: 100%;
}

.lp-layout-003 .p-voice__swiper .swiper-button-prev,
.lp-layout-003 .p-voice__swiper .swiper-button-next {
  width: 2.571rem;
  height: 2.571rem;
  margin-top: calc(var(--space-xl) * -1);
  background-color: var(--color-white);
  border-radius: var(--border-radius-full);
}

.lp-layout-003 .p-voice__swiper .swiper-button-prev::after,
.lp-layout-003 .p-voice__swiper .swiper-button-next::after {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
}

.lp-layout-003 .p-voice__swiper .swiper-button-prev { left: 0; }
.lp-layout-003 .p-voice__swiper .swiper-button-next { right: 0; }

.lp-layout-003 .p-voice > .l-section__inner > .p-what__list {
  padding-inline: var(--mobile-gutter);
}

.lp-layout-003 .p-voice__card {
  gap: var(--space-md);
  padding: var(--space-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.lp-layout-003 .p-voice__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.lp-layout-003 .p-voice__avatar {
  flex-shrink: 0;
  width: 5.714rem; /* 80px */
  height: 5.714rem;
  border-radius: var(--border-radius-full);
  object-fit: cover;
}

.lp-layout-003 .p-voice__person {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--font-sm);
  line-height: var(--line-height-snug);
  color: var(--color-ink);
}

.lp-layout-003 .p-voice__assets {
  display: grid;
  grid-template-columns: 40% 60%;
  row-gap: var(--space-2xs);
  padding: var(--space-md) 0;
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  border-top: 1px dashed var(--color-accent);
}

.lp-layout-003 .p-voice__assets dt {
  font-weight: var(--font-weight-normal);
  color: var(--color-ink);
}

.lp-layout-003 .p-voice__assets dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  text-align: right;
}

.lp-layout-003 .p-voice__comment {
  display: block;
  width: 100%;
  font-size: var(--font-sm);
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--color-ink);
}

.lp-layout-003 .p-voice__comment .c-mark {
  display: inline;
}

.lp-layout-003 .p-voice__note {
  font-size: 0.643rem; /* 他LP(gow/gmw)と統一の極小注記 ≒ 9px */
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-500);
}

/* 会話セクション内の※注記 (図版の出典・試算条件) — p-voice__note と同じ極小注記 */
.lp-layout-003 .p-what__note p {
  font-size: 0.643rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-500);
}


/* What (p-what) */
.lp-layout-003 .p-what__catch {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--border-radius-lg);
}

.lp-layout-003 .p-what__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}

.lp-layout-003 .p-what__closing {
  padding: var(--space-xl) 0;
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  border-top: 1px dashed var(--color-gray-300);
  border-bottom: 1px dashed var(--color-gray-300);
}


/* セクションの境目 — 同系色の背景が続いても区切りが分かる薄いライン */
.lp-layout-003 .l-main > section + section {
  border-top: 1px solid rgba(var(--color-accent-deep-rgb), 0.12);
}

.lp-layout-003 .l-footer {
  background-color: var(--color-footer-bg, var(--color-accent));
}

/* Achievement (p-achievement) — ご相談実績の画像 (p-consultant から分離) */
.lp-layout-003 .p-achievement {
  background-color: var(--color-white);
}

.lp-layout-003 .p-achievement__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--border-radius-lg);
}

/* 見出し下の実績注記 (gow と統一) */
.lp-layout-003 .p-achievement__note {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-accent);
}


/* Reason (p-consultant) — 講師紹介 */
.lp-layout-003 .p-consultant__card {
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.lp-layout-003 .p-consultant__title {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-accent);
}

.lp-layout-003 .p-consultant__profile {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
}

.lp-layout-003 .p-consultant__avatar {
  flex-shrink: 0;
  width: 7.143rem;   /* 100px */
  height: 7.143rem;
  object-fit: cover;
  border-radius: var(--border-radius-full);
}

.lp-layout-003 .p-consultant__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.lp-layout-003 .p-consultant__qual {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-accent-deep);
}

.lp-layout-003 .p-consultant__name {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-ink);
}

.lp-layout-003 .p-consultant__label {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-ink);
}

.lp-layout-003 .p-consultant__creds {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--font-sm);
  line-height: var(--line-height-normal);
  color: var(--color-ink);
}

.lp-layout-003 .p-consultant__creds li {
  position: relative;
  padding-left: var(--space-md);
}

.lp-layout-003 .p-consultant__creds li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.357rem;
  height: 0.357rem;
  background-color: var(--color-accent);
  border-radius: var(--border-radius-full);
}

.lp-layout-003 .p-consultant__career {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
}

.lp-layout-003 .p-consultant__body {
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
}

.lp-layout-003 .p-consultant__scene {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

/* WP エディタが class を落とすケース用に要素セレクタにも適用 */
.lp-layout-003 .p-consultant__scene-caption,
.lp-layout-003 .p-consultant__scene > p {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-accent);
}

.lp-layout-003 .p-consultant__scene-img,
.lp-layout-003 .p-consultant__scene > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-md);
}


/* Trouble (p-trouble) — 画像のみなので左右 padding は解除、上下のみ確保 */
.lp-layout-003 .p-trouble.l-section {
  padding: var(--space-3xl) 0; /* 32px */
}

.lp-layout-003 .p-trouble__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}


/* Recommend (p-recommend) — 統合画像とカードリストの両構造に対応 */
.lp-layout-003 .p-recommend > .l-section__inner > .p-recommend__img {
  display: block;
  width: 100%;
  max-width: 28.714rem;
  height: auto;
  margin: 0 auto;
}

.lp-layout-003 .p-recommend__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  width: 100%;
}

.lp-layout-003 .p-recommend__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
}

.lp-layout-003 .p-recommend__list .p-recommend__img {
  display: block;
  width: 80%;
  max-width: 8.571rem;
  height: 8.571rem;
  object-fit: contain;
}

.lp-layout-003 .p-recommend__text {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-ink);
}


/* Learn (p-learn) */
.lp-layout-003 .p-learn__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.lp-layout-003 .p-learn__item {
  position: relative;
  padding: 0 0 var(--space-md) var(--space-3xl);   /* アイコン幅 + 余白 */
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.18);
}

.lp-layout-003 .p-learn__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lp-layout-003 #flow-17 .p-learn__item {
  color: var(--color-accent);
}

.lp-layout-003 .p-learn__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.429rem;
  height: calc(1em * var(--line-height-relaxed));
  background-image: var(--learn-check-image);
  background-position: left center;
  background-size: 1.429rem 1.429rem;
  background-repeat: no-repeat;
}

.lp-layout-003 .p-learn__closing {
  padding: var(--space-xl) 0;
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  border-top: 1px dashed var(--color-gray-300);
  border-bottom: 1px dashed var(--color-gray-300);
}


/* Need (p-need) — 人生の3つの備え (なぜ今備えるか) */
.lp-layout-003 .p-need__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
  width: 100%;
}

.lp-layout-003 .p-need__item {
  position: relative;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  text-align: center;
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.lp-layout-003 .p-need__num {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  font-family: var(--ff-en);
  font-size: clamp(3.5rem, 14vw, 4rem);
  font-weight: var(--font-weight-black);
  line-height: 0.8;
  color: var(--color-accent);
}

.lp-layout-003 .p-need__title {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}

.lp-layout-003 .p-need__item p {
  font-size: var(--font-sm);
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--color-ink);
}

.lp-layout-003 .p-need__closing {
  padding: var(--space-xl) 0;
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  border-top: 1px dashed var(--color-gray-300);
  border-bottom: 1px dashed var(--color-gray-300);
}


/* FAQ (p-faq) */
.lp-layout-003 .p-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.lp-layout-003 .p-faq__item {
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.lp-layout-003 .p-faq__dl { margin: 0; }

.lp-layout-003 .p-faq__dt {
  position: relative;
  padding: var(--space-lg) var(--space-3xl) var(--space-lg) var(--space-5xl);
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-accent);
  cursor: pointer;
}

.lp-layout-003 .p-faq__dt::before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: var(--space-md);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.714rem;
  height: 1.714rem;
  font-size: var(--font-sm);
  color: var(--color-white);
  background-color: var(--color-accent);
  border-radius: var(--border-radius-full);
}

.lp-layout-003 .p-faq__icon {
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
}

.lp-layout-003 .p-faq__icon::before,
.lp-layout-003 .p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.143rem;
  background-color: var(--color-accent);
  border-radius: 1px;
}

.lp-layout-003 .p-faq__icon::after {
  transform: rotate(90deg);
  transition: opacity var(--transition-fast);
}

.lp-layout-003 .p-faq__item.is-open .p-faq__icon::after {
  opacity: 0;
}

.lp-layout-003 .p-faq__dd {
  max-height: 0;
  margin: 0;
  padding: 0 var(--space-lg) 0 var(--space-5xl);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  overflow: hidden;
  transition: max-height var(--duration-base) var(--easeOutCubic),
              padding var(--duration-fast) var(--easeOutCubic);
}

.lp-layout-003 .p-faq__item.is-open .p-faq__dd {
  max-height: 32rem;
  padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-5xl);
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.15);
}


/* チャットの名前ラベル — 吹き出し内テキストと同じ deep で統一し視認性を上げる */
.lp-layout-003 .c-chat__name {
  color: var(--color-accent-deep);
}

/* 事例カードの Before / After ラベル行 (本番でも効くようテーマ側に定義) */
.lp-layout-003 .p-voice__label {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
  border-radius: var(--border-radius-md);
  background: var(--color-section-bg);
}

.lp-layout-003 .p-voice__label strong {
  color: var(--color-accent-deep);
}

/* Before / After ラベルの色分け — Before は控えめ、After は成果としてアクセントカラーで強調 */
.lp-layout-003 .p-voice__label--before {
  background: rgba(var(--color-ink-rgb), 0.06);
}

.lp-layout-003 .p-voice__label--before strong {
  color: var(--color-gray-500);
}

.lp-layout-003 .p-voice__label--after {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-white));
}

.lp-layout-003 .p-voice__label--after strong {
  color: var(--color-accent-deep);
}

/* CTA セクションの背景 — 淡いCTAカラーで申込ブロックをひと目で識別できるようにする */
.lp-layout-003 .l-section--cta {
  background-color: color-mix(in srgb, var(--color-cta) 10%, var(--color-white));
}

/* 学習項目・参加の流れはリスト全体を1枚のカードとして見せる */
.lp-layout-003 .p-learn__list,
.lp-layout-003 .p-faq__item {
  box-shadow: 0 6px 20px rgba(var(--color-card-shadow-rgb, var(--color-accent-deep-rgb)), 0.16);
}