/* =====================================================================
   教育タイムコーディネート LP — styles.css
   モバイルファースト。色・余白・フォント・最大幅は :root の変数で一括調整。
   ===================================================================== */

/* ---------- デザイントークン（ここを変えると全体が変わります） ---------- */
:root {
  /* 配色（ハニーイエロー系 / 暖色ベース） */
  --color-primary: #c08321;        /* ゴールド：リンク・アウトラインボタン */
  --color-primary-dark: #6b4d23;   /* 深いアンバー：見出し・CTA・フッター背景 */
  --color-primary-light: #fcefd2;  /* 淡いハニー：ヒーロー/コールアウト背景 */
  --color-accent: #b07a16;         /* ハニー（文字に使える濃さ）：小見出し・装飾 */

  /* 公式LINEボタン用（淡いLINEグリーン＋濃緑の文字） */
  --color-line: #82e3aa;        /* 淡いLINEグリーン（背景） */
  --color-line-dark: #6dd99b;   /* ホバー時 */
  --color-line-text: #0a6336;   /* ボタン文字（濃い緑） */

  /* 背景・文字 */
  --color-bg: #fffbf2;             /* クリーム */
  --color-surface: #fdf6e8;        /* 淡クリーム（面） */
  --color-surface-2: #f4e8cd;      /* やや濃いクリーム */
  --color-text: #5f5143;           /* ウォームブラウン */
  --color-muted: #897962;          /* 補助文字（薄いブラウン） */
  --color-border: #ebdfc4;         /* 暖色のボーダー */
  --color-on-primary: #ffffff;

  /* タイポグラフィ */
  --font-base: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", sans-serif;
  --fs-base: 1rem;          /* 16px */
  --lh-base: 1.85;
  --fw-bold: 700;
  --fs-scale: 0.8;          /* 見出し(fs-*クラス)の倍率。モバイルは0.8で自動縮小、640px以上で1.0 */

  /* レイアウト */
  --maxw: 1080px;
  --maxw-narrow: 760px;
  --gutter: 1.25rem;        /* 左右の余白（モバイル） */
  --header-h: 60px;

  /* 余白スケール */
  --space-section: 4rem;    /* セクション上下（モバイル） */
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;

  /* 装飾 */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(107, 77, 35, 0.12);
  --shadow-sm: 0 4px 14px rgba(107, 77, 35, 0.10);

  --transition: 0.25s ease;
}

/* ---------- リセット・ベース ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: light;   /* OSのダーク設定に追従せず、常にライト表示で固定 */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  word-break: normal;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); }

h1, h2, h3 { line-height: 1.4; font-weight: var(--fw-bold); }

ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* スキップリンク（キーボード操作補助） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- レイアウト共通 ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section {
  padding-block: var(--space-section);
}
.section--surface { background: var(--color-surface); }

.section__title {
  font-size: clamp(1.5rem, 5vw, 2rem);
  text-align: center;
  margin: 0 0 var(--space-lg);
  color: var(--color-primary-dark);
}
.section__title--left { text-align: left; }

.eyebrow {
  text-align: center;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose--center { text-align: center; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    background-color var(--transition), color var(--transition);
  line-height: 1.3;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--line { background: var(--color-line); color: var(--color-line-text); box-shadow: var(--shadow-sm); }
.btn--line:hover { background: var(--color-line-dark); }
/* 文言先頭の吹き出しアイコン（currentColor 追従・全 btn--line に適用） */
.btn--line::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203C6.48%203%202%206.74%202%2011.35c0%202.62%201.46%204.96%203.74%206.49-.16%201.15-.6%202.2-1.3%203.06-.14.17-.02.43.2.42%201.6-.08%203.13-.6%204.4-1.5.9.22%201.86.34%202.96.34%205.52%200%2010-3.74%2010-8.35S17.52%203%2012%203z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203C6.48%203%202%206.74%202%2011.35c0%202.62%201.46%204.96%203.74%206.49-.16%201.15-.6%202.2-1.3%203.06-.14.17-.02.43.2.42%201.6-.08%203.13-.6%204.4-1.5.9.22%201.86.34%202.96.34%205.52%200%2010-3.74%2010-8.35S17.52%203%2012%203z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.btn--outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-on-primary); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.btn--outline-light:hover { background: #fff; color: var(--color-primary-dark); }

.btn--sm { padding: 0.5em 1.1em; font-size: 0.9rem; }
.btn--lg { padding: 1em 2em; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- ヘッダー／ナビ ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  line-height: 1.25;
}
.brand__name { font-weight: var(--fw-bold); font-size: 1.05rem; color: var(--color-primary-dark); }
.brand__sub { font-size: 0.72rem; color: var(--color-muted); }

/* ハンバーガーボタン（モバイルのみ表示） */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  margin-inline: auto;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}
/* 開いている時は×印に */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-menu a {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.nav-menu a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.nav-menu__cta { margin-top: 0.4rem; }
.nav-menu__cta a:hover { background: var(--color-line-dark); }
/* .nav-menu a の display:block が .btn の inline-flex を上書きするため、
   ナビCTAだけ flex を復活させて btn--line::before の吹き出しを表示（全幅は維持） */
.nav-menu .btn--line { display: flex; }

/* モバイル：JS有効時はメニューを折りたたみ（no-js時は常に表示してアクセス可能に） */
.js .nav {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transition), visibility var(--transition);
}
.js .nav.is-open {
  max-height: 80vh;
  visibility: visible;
  overflow-y: auto;
}
.js .nav-menu { padding: 0.75rem var(--gutter) 1.25rem; }

/* ---------- ヒーロー ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(74, 163, 199, 0.18), transparent 60%),
    linear-gradient(160deg, var(--color-primary-light), var(--color-bg) 70%);
  /* 画像を最上部に密着させるため上は0、下のみ余白 */
  padding-block: 0 clamp(1.5rem, 6vw, 3rem);
}
/* メインビジュアル（全幅・横長バナー） */
.hero__visual {
  width: 100%;
  height: auto;
  /* 画像とボタンの間隔 */
  margin-bottom: clamp(1.375rem, 4.5vw, 2.5rem);
}
.hero__inner { text-align: center; }
.hero__title {
  font-size: clamp(2rem, 9vw, 3.4rem);
  margin: 0.25rem 0 1.25rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.02em;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
  max-width: 360px;
  margin-inline: auto;
}

/* ---------- お悩み ---------- */
.problem-list {
  display: grid;
  gap: 0.85rem;
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}
.problem-list li {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.callout {
  max-width: var(--maxw-narrow);
  margin: var(--space-lg) auto 0;
  background: var(--color-primary-light);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  text-align: center;
}
.callout p { margin: 0 0 0.9rem; }
.callout p:last-child { margin-bottom: 0; }
.callout__strong {
  font-weight: var(--fw-bold);
  font-size: 1.2rem;
  color: var(--color-primary-dark);
}

/* ---------- 3つの考え方カード ---------- */
.cards {
  display: grid;
  gap: 1.25rem;
}
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.card__num {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: var(--fw-bold);
  color: var(--color-surface-2);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.card__title { font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--color-primary-dark); }
.card p { margin: 0; color: var(--color-muted); }

/* ---------- プロフィール ---------- */
.instructor {
  display: grid;
  gap: 1.75rem;
}
.instructor__eyebrow {
  text-align: left;
  margin-bottom: 0.75rem;
}
.instructor__eyebrow-role {
  font-size: 0.8em;
}
.instructor__header .section__title {
  margin-bottom: 0;
}
.instructor__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--color-primary-light), var(--color-surface-2));
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.instructor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- コース ---------- */
.courses {
  display: grid;
  gap: 1.5rem;
}
.course-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.course-card__lead {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 0.25em 0.9em;
  border-radius: 999px;
  margin: 0 0 0.4rem;
}
.course-card__no { font-size: 0.8rem; color: var(--color-muted); margin: 0; }
.course-card__title { font-size: 1.4rem; margin: 0.2rem 0 0.5rem; color: var(--color-primary-dark); }
.course-card__desc { margin: 0 0 1rem; color: var(--color-muted); }
.course-card__note {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: .25rem 0 2rem 0;
  font-size: 0.95rem;
}
.course-card__price {
  margin: 0.5rem 0 1rem;
  color: var(--color-primary-dark);
}
.course-card__amount { font-size: 2rem; font-weight: var(--fw-bold); }
.course-card__tax { font-size: 0.9rem; }
.course-card__price--ask { font-size: 1.05rem; font-weight: var(--fw-bold); }

/* コース内の公式LINEボタン上部に余白 */
.course-card .btn--line { margin-top: 3rem; }

.course-card__includes,
.course-card__points,
.course-card__outcomes {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.course-card__includes li { color: var(--color-text); }
.course-card__points li,
.course-card__outcomes li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-muted);
}
.course-card__points li::before,
.course-card__outcomes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-line);
  font-weight: var(--fw-bold);
}
.course-card__outcome-label {
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
  margin: 0 0 0.6rem;
}
.course-card .btn { margin-top: auto; }

/* ---------- 受講者の声 ---------- */
.voices {
  display: grid;
  gap: 1.25rem;
}
.voice-card {
  margin: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.voice-card blockquote {
  margin: 0 0 0.85rem;
  position: relative;
  padding-top: 1.75rem;
}
.voice-card blockquote::before {
  content: "“";
  position: absolute;
  top: -0.4rem;
  left: -0.2rem;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-surface-2);
  font-family: Georgia, serif;
}
.voice-card figcaption {
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
  text-align: right;
}

/* 注目の声（全幅・アバター付き） */
.voice-card--featured {
  grid-column: 1 / -1;
  background: var(--color-surface);
  padding: 2rem 1.75rem;
}
.voice-card--featured blockquote {
  margin-bottom: 1.5rem;
  padding-top: 2rem;
}
.voice-card--featured blockquote::before {
  font-size: 3.5rem;
  top: -0.6rem;
}
.voice-card__person {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  text-align: right;
}
.voice-card__avatar {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface-2);
  color: var(--color-primary-dark);
  font-weight: var(--fw-bold);
  font-size: 1.15rem;
}
.voice-card__meta {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  line-height: 1.4;
}
.voice-card__name {
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
}
.voice-card__role {
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: 0.75rem;
}
.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 1.1rem 1.25rem;
  font: inherit;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  cursor: pointer;
}
.faq-q:hover { color: var(--color-primary-dark); }
.faq-q__icon {
  flex: none;
  width: 16px;
  height: 16px;
  position: relative;
}
.faq-q__icon::before,
.faq-q__icon::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
  transition: transform var(--transition);
}
.faq-q__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-q__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-q[aria-expanded="true"] .faq-q__icon::after { transform: scaleY(0); }

.faq-a {
  padding: 0 1.25rem 1.1rem;
  color: var(--color-muted);
}
.faq-a p { margin: 0; }
/* 複数段落の回答は段落間に余白を入れる */
.faq-a p + p { margin-top: 0.9rem; }

/* JS有効時：回答を折りたたむ（no-js時は常に表示）
   回答の中身は .faq-a__inner 1要素にまとめ、グリッドの開閉対象を単一行に固定する
   （直下に複数 <p> を置くと行が均等分配され、短い段落に余分な空白が出るため） */
.js .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  padding-block: 0;
  transition: grid-template-rows var(--transition), padding var(--transition);
}
.js .faq-a > * { overflow: hidden; min-height: 0; }
.js .faq-a.is-open {
  grid-template-rows: 1fr;
  padding-bottom: 1.1rem;
}

/* ---------- CTA（再掲） ---------- */
.cta {
  background: linear-gradient(160deg, var(--color-primary-light), var(--color-surface-2));
  color: var(--color-text);
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-border);
}
.cta__inner { text-align: center; }
.cta__title { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 0.75rem; color: var(--color-primary-dark); }
.cta__text { margin: 0 auto 1.75rem; max-width: 36ch; opacity: 1; }
.cta__actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 360px;
  margin-inline: auto;
}

/* ---------- プロフィール（はじめまして） ---------- */
.profile__head {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.profile__title {
  margin: 0;
  color: var(--color-primary-dark);
  letter-spacing: 0.18em;
}

.profile-card {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 880px;
  margin-inline: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.profile-card__media {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 2rem);
}
/* #instructor の円形写真と同サイズ（モバイル220px / PC240px）の円に */
.profile-card__media img {
  width: min(220px, 60vw);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}
.profile-card__body {
  padding: clamp(1.5rem, 5vw, 2.5rem);
}
.profile-card__name {
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  color: var(--color-primary-dark);
  letter-spacing: 0.04em;
  margin: 0 0 0.3rem;
}
.profile-card__role {
  margin: 0 0 1.5rem;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* 経歴リスト（細い区切り線で整理） */
.profile-history {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--color-border);
}
.profile-history li {
  padding: 0.7rem 0.1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.profile-card__lead { color: var(--color-muted); }

/* note / Instagram のソフトなピルボタン */
.profile-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  font-weight: var(--fw-bold);
  font-size: 0.92rem;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition),
    transform var(--transition);
}
.btn-soft:hover {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}
/* note / Instagram の公式ロゴ＋メルマガの封筒（文言先頭・currentColor 追従でホバー色にも追随） */
.btn-soft--note::before,
.btn-soft--instagram::before,
.btn-soft--mail::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
  flex-shrink: 0;
  background-color: currentColor;
}
.btn-soft--note::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M0%20.279c4.623%200%2010.953-.235%2015.498-.117%206.099.156%208.39%202.813%208.468%209.374.077%203.71%200%2014.335%200%2014.335h-6.598c0-9.296.04-10.83%200-13.759-.078-2.578-.814-3.807-2.795-4.041-2.097-.235-7.975-.04-7.975-.04v17.84H0Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M0%20.279c4.623%200%2010.953-.235%2015.498-.117%206.099.156%208.39%202.813%208.468%209.374.077%203.71%200%2014.335%200%2014.335h-6.598c0-9.296.04-10.83%200-13.759-.078-2.578-.814-3.807-2.795-4.041-2.097-.235-7.975-.04-7.975-.04v17.84H0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.btn-soft--instagram::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228%201.3877-.6652.6677-1.075%201.3368-1.3802%202.127-.2954.7638-.4956%201.6365-.552%202.914-.0564%201.2775-.0689%201.6882-.0626%204.947.0062%203.2586.0206%203.6671.0825%204.9473.061%201.2765.264%202.1482.5635%202.9107.308.7889.72%201.4573%201.388%202.1228.6679.6655%201.3365%201.0743%202.1285%201.38.7632.295%201.6361.4961%202.9134.552%201.2773.056%201.6884.069%204.9462.0627%203.2578-.0062%203.668-.0207%204.9478-.0814%201.28-.0607%202.147-.2652%202.9098-.5633.7889-.3086%201.4578-.72%202.1228-1.3881.665-.6682%201.0745-1.3378%201.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982%201.33%2020.628.9208%2019.8378.6165%2019.074.321%2018.2017.1197%2016.9244.0645%2015.6471.0093%2015.236-.005%2011.977.0014%208.718.0076%208.31.0215%207.0301.0839m.1402%2021.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814%201.3783-.9003.423-.1651%201.0575-.3614%202.227-.4171%201.2655-.06%201.6447-.072%204.848-.079%203.2033-.007%203.5835.005%204.8495.0608%201.169.0508%201.8053.2445%202.228.408.5608.216.96.4754%201.3816.895.4217.4194.6816.8176.9005%201.3787.1653.4217.3617%201.056.4169%202.2263.0602%201.2655.0739%201.645.0796%204.848.0058%203.203-.0055%203.5834-.061%204.848-.051%201.17-.245%201.8055-.408%202.2294-.216.5604-.4763.96-.8954%201.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953%205.5864A1.44%201.44%200%201%200%2018.39%204.144a1.44%201.44%200%200%200-1.437%201.4424M5.8385%2012.012c.0067%203.4032%202.7706%206.1557%206.173%206.1493%203.4026-.0065%206.157-2.7701%206.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156%202.771-6.1496%206.1738M8%2012.0077a4%204%200%201%201%204.008%203.9921A3.9996%203.9996%200%200%201%208%2012.0077'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228%201.3877-.6652.6677-1.075%201.3368-1.3802%202.127-.2954.7638-.4956%201.6365-.552%202.914-.0564%201.2775-.0689%201.6882-.0626%204.947.0062%203.2586.0206%203.6671.0825%204.9473.061%201.2765.264%202.1482.5635%202.9107.308.7889.72%201.4573%201.388%202.1228.6679.6655%201.3365%201.0743%202.1285%201.38.7632.295%201.6361.4961%202.9134.552%201.2773.056%201.6884.069%204.9462.0627%203.2578-.0062%203.668-.0207%204.9478-.0814%201.28-.0607%202.147-.2652%202.9098-.5633.7889-.3086%201.4578-.72%202.1228-1.3881.665-.6682%201.0745-1.3378%201.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982%201.33%2020.628.9208%2019.8378.6165%2019.074.321%2018.2017.1197%2016.9244.0645%2015.6471.0093%2015.236-.005%2011.977.0014%208.718.0076%208.31.0215%207.0301.0839m.1402%2021.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814%201.3783-.9003.423-.1651%201.0575-.3614%202.227-.4171%201.2655-.06%201.6447-.072%204.848-.079%203.2033-.007%203.5835.005%204.8495.0608%201.169.0508%201.8053.2445%202.228.408.5608.216.96.4754%201.3816.895.4217.4194.6816.8176.9005%201.3787.1653.4217.3617%201.056.4169%202.2263.0602%201.2655.0739%201.645.0796%204.848.0058%203.203-.0055%203.5834-.061%204.848-.051%201.17-.245%201.8055-.408%202.2294-.216.5604-.4763.96-.8954%201.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953%205.5864A1.44%201.44%200%201%200%2018.39%204.144a1.44%201.44%200%200%200-1.437%201.4424M5.8385%2012.012c.0067%203.4032%202.7706%206.1557%206.173%206.1493%203.4026-.0065%206.157-2.7701%206.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156%202.771-6.1496%206.1738M8%2012.0077a4%204%200%201%201%204.008%203.9921A3.9996%203.9996%200%200%201%208%2012.0077'/%3E%3C/svg%3E") no-repeat center / contain;
}
.btn-soft--mail::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%204H4c-1.1%200-1.99.9-1.99%202L2%2018c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%204l-8%205-8-5V6l8%205%208-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%204H4c-1.1%200-1.99.9-1.99%202L2%2018c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%204l-8%205-8-5V6l8%205%208-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (min-width: 720px) {
  .profile-card { grid-template-columns: 300px 1fr; }
  .profile-card__media img { width: 240px; }
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--color-surface);
  color: var(--color-text);
  padding-block: 2.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
}
.site-footer__inner {
  display: grid;
  gap: 1.5rem;
}
.site-footer__name { font-weight: var(--fw-bold); font-size: 1.1rem; color: var(--color-primary-dark); margin: 0 0 0.25rem; }
.site-footer__tagline { margin: 0; font-size: 0.9rem; color: var(--color-muted); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.site-footer__nav a { color: var(--color-text); text-decoration: none; font-size: 0.9rem; }
.site-footer__nav a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.site-footer__copy {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 1.5rem 0 0;
}

/* ---------- スクロール表示アニメーション（フェードイン） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* JS無効時は常に表示（プログレッシブエンハンスメント） */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- フォントサイズ・ユーティリティ ----------
   使い方: 見出しなどの class に fs-NN を足すだけ。数値 = PC表示でのpx相当。
   例) <h2 class="section__title fs-28"> → PCで28px。
   モバイルでは :root の --fs-scale（=0.8）で自動的に小さくなります。
   サイズを変えたいときは class の数値を別の fs-NN に書き換えるだけ。
   全体のモバイル縮小度合いは --fs-scale を調整。 */
.fs-12 { font-size: calc(0.75rem  * var(--fs-scale)); }
.fs-14 { font-size: calc(0.875rem * var(--fs-scale)); }
.fs-16 { font-size: calc(1rem     * var(--fs-scale)); }
.fs-18 { font-size: calc(1.125rem * var(--fs-scale)); }
.fs-20 { font-size: calc(1.25rem  * var(--fs-scale)); }
.fs-22 { font-size: calc(1.375rem * var(--fs-scale)); }
.fs-24 { font-size: calc(1.5rem   * var(--fs-scale)); }
.fs-26 { font-size: calc(1.625rem * var(--fs-scale)); }
.fs-28 { font-size: calc(1.75rem  * var(--fs-scale)); }
.fs-30 { font-size: calc(1.875rem * var(--fs-scale)); }
.fs-32 { font-size: calc(2rem     * var(--fs-scale)); }
.fs-36 { font-size: calc(2.25rem  * var(--fs-scale)); }
.fs-40 { font-size: calc(2.5rem   * var(--fs-scale)); }
.fs-44 { font-size: calc(2.75rem  * var(--fs-scale)); }
.fs-48 { font-size: calc(3rem     * var(--fs-scale)); }
.fs-54 { font-size: calc(3.375rem * var(--fs-scale)); }
.fs-64 { font-size: calc(4rem     * var(--fs-scale)); }

/* ============ レスポンシブ（タブレット） ============ */
@media (min-width: 640px) {
  :root { --space-section: 5rem; --gutter: 1.75rem; --fs-scale: 1; }

  .hero__actions,
  .cta__actions { flex-direction: row; justify-content: center; max-width: none; }
  .hero__actions .btn,
  .cta__actions .btn { min-width: 220px; }

  .cards { grid-template-columns: repeat(3, 1fr); }
  .courses { grid-template-columns: repeat(2, 1fr); }
  .voices { grid-template-columns: repeat(2, 1fr); }
}

/* ============ レスポンシブ（PC） ============ */
@media (min-width: 880px) {
  :root { --space-section: 6rem; }

  /* ナビを横並びに、ハンバーガーは隠す */
  .nav-toggle { display: none; }
  .js .nav,
  .nav {
    position: static;
    max-height: none;
    visibility: visible;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .nav-menu {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0 !important;
  }
  .nav-menu a { padding: 0.5rem 0.85rem; }
  .nav-menu__cta { margin-top: 0; margin-left: 0.5rem; }

  /* プロフィール：ヘッダー全幅 + 画像｜本文の2カラム */
  .instructor {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "header header"
      "photo  body";
    column-gap: 2.5rem;
    row-gap: 2rem;
    align-items: center;
  }
  .instructor__header { grid-area: header; }
  .instructor__photo  { grid-area: photo; align-self: start; }
  .instructor__body   { grid-area: body; }

  .voices { grid-template-columns: repeat(3, 1fr); }
}

/* ============ アニメーション抑制設定への配慮 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}