@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);
}

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

.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-inline: var(--mobile-gutter);
}


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


/* 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: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.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;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* hover / active: 影の底を固定したままボタンが沈む物理モデル (translateY = 影の差分) */
.c-button:hover,
input[type="submit"].c-form__submit:hover,
button.c-form__submit:hover {
  opacity: 1;
  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 {
  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); }


/* チャット吹き出し (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);
}


/* セミナースケジュール (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;
}