/* =================================================================
   声優教室アルシュピール 生徒募集LP / style.css
   ★ アニメ／マンガ風リデザイン版 ★
   - テイスト: 集中線×マンガ風（コマ枠・ハーフトーン・ベタ影・吹き出し）
   - バランス: FV／煽り／卒業生の声＝全開 / 料金・講師経歴・アクセス＝信頼感重視
   - ブランドカラー: オレンジ #F08300 / CTA: LINEグリーン #06C755（不変）
   - スマホファースト（375px基準）。PC時は max-width:480px 中央寄せ
   - 文言は変更なし（表現＝CSS/装飾のみで熱量を演出）
   ================================================================= */

:root {
  --orange: #f08300;
  --orange-dark: #d97400;
  --line-green: #06c755;
  --line-green-dark: #05a648;
  --base: #fffdf8;
  --cream: #fff4e3;
  --text: #2b2b2b;
  --text-soft: #6b6b6b;
  --white: #ffffff;
  --ink: #232323;        /* マンガの墨（枠線・ベタ影）*/
  --burst: #ffd23f;      /* 強調バースト */
  --pop: #ff5230;        /* 効果音的アクセント（ごく一部）*/
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --hard: 5px 5px 0 var(--ink);   /* マンガ風ベタ影 */
  --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text);
  background:
    radial-gradient(rgba(35,35,35,0.06) 1.4px, transparent 1.6px) 0 0 / 11px 11px,
    #efe6d8;
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* 縦長LPの定石：中央寄せカラム */
.page {
  max-width: 480px;
  margin: 0 auto;
  background: var(--base);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}

/* ====== マンガ表現の共通パーツ ============================= */

/* 集中線（焦点から放射）。高揚セクションの ::before に重ねる */
.hero__body::before,
.worry::before,
.voices::before,
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 42%,
    rgba(35, 35, 35, 0.06) 0deg 0.5deg,
    transparent 0.5deg 2.6deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 22%, #000 64%);
          mask-image: radial-gradient(circle at 50% 42%, transparent 22%, #000 64%);
  pointer-events: none;
  z-index: 0;
}

/* ハーフトーン（アミカケ）ドット背景 */
.fx-halftone {
  background-image: radial-gradient(rgba(240, 131, 0, 0.18) 22%, transparent 24%);
  background-size: 10px 10px;
}

/* コマ枠（ベタ影付きパネル） */
.panel {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--hard);
}

/* ====== セクション共通 ====== */
section { position: relative; padding: 3rem 1.4rem; }

.section-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  text-align: center;
  color: var(--orange-dark);
  margin-bottom: 1.6rem;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.section-title::before,
.section-title::after {
  content: "✦";
  color: var(--orange);
  font-size: 0.9em;
  margin: 0 0.4em;
  vertical-align: 0.06em;
}
/* 見出し下のマンガ風ブラシ下線 */
.section-title span.u,
.section-title { /* fallback */ }

/* =================================================================
   ① ファーストビュー（マンガ全開）
   ================================================================= */
.hero {
  padding: 0 0 2.2rem;
  background:
    radial-gradient(rgba(240,131,0,0.14) 22%, transparent 24%) 0 0 / 12px 12px,
    linear-gradient(180deg, var(--cream) 0%, var(--base) 100%);
}
.hero__img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 4px solid var(--ink);
}
.hero__body {
  position: relative;
  padding: 1.8rem 1.4rem 0;
  text-align: center;
  overflow: hidden;
}
.hero__title {
  position: relative;
  z-index: 1;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 1.1rem;
}
/* マンガの強調ゼリフ（アウトライン文字＋傾き） */
.fx-line {
  display: inline-block;
  font-family: "Reggae One", "Zen Maru Gothic", sans-serif;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--orange);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  transform: rotate(-3deg) scale(1.06);
  margin: 0.25em 0;
  text-shadow: 4px 4px 0 rgba(35, 35, 35, 0.18);
}
.hero__sub {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}

/* ---- CTAボタン（LINEグリーン・不変。マンガ風の枠＋シャイン）---- */
.cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 58px;
  padding: 0.9rem 1rem;
  background: var(--line-green);
  color: var(--white);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink), 0 8px 18px rgba(6, 199, 85, 0.3);
  overflow: hidden;
  animation: pulse 2.4s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
/* 斜めのシャイン（キラッ） */
.cta::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: rotate(8deg);
  animation: shine 3.4s ease-in-out infinite;
}
.cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
  background: var(--line-green-dark);
}
.cta__icon { display: inline-flex; position: relative; z-index: 1; }
.cta-note {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: var(--text);
  text-align: center;
  margin-top: 0.7rem;
  font-weight: 700;
}
.cta-note::before { content: "★ "; color: var(--orange); }
.cta-note::after { content: " ★"; color: var(--orange); }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes shine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta { animation: none; }
  .cta::after { display: none; }
}

/* =================================================================
   ② 悩み共感（吹き出し＝マンガ全開）
   ================================================================= */
.worry {
  background: var(--cream);
  overflow: hidden;
}
.bubbles { list-style: none; display: flex; flex-direction: column; gap: 1.3rem; position: relative; z-index: 1; }
.bubble {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  box-shadow: var(--hard);
  font-size: 0.95rem;
  font-weight: 700;
  position: relative;
}
/* 吹き出しのシッポ（左下） */
.bubble::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -13px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}
.worry .bubble:nth-child(odd) { transform: rotate(-1deg); }
.worry .bubble:nth-child(even) { transform: rotate(1deg); }
.bubble__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}

/* =================================================================
   ③ 解決策（信頼寄り・落ち着かせる）
   ================================================================= */
.solution { background: var(--base); text-align: center; }
.solution__text {
  font-size: 1rem;
  text-align: left;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--hard);
  padding: 1.2rem 1.3rem;
  font-weight: 500;
}

/* =================================================================
   ④ 講師の権威性（信頼感最優先・装飾は控えめ）
   ================================================================= */
.teacher { background: var(--cream); }
.teacher__head { text-align: center; margin-bottom: 1.4rem; position: relative; z-index: 1; }
.teacher__img {
  width: auto;
  height: 248px;
  border-radius: 20px;
  margin: 0 auto 0.9rem;
  border: 4px solid var(--ink);
  box-shadow: var(--hard);
  background: var(--white);
  padding: 8px;
}
.teacher__name {
  display: inline-block;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  background: var(--ink);
  color: var(--white);
  padding: 0.25em 1em;
  border-radius: 999px;
}
.teacher__career {
  list-style: none;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 1.3rem 1.3rem;
  box-shadow: var(--hard);
  margin-bottom: 1.4rem;
}
.teacher__career li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
}
.teacher__career li:last-child { margin-bottom: 0; }
.teacher__career li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-size: 0.85em;
}
.teacher__career strong {
  color: var(--orange-dark);
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(240,131,0,0.28) 62%);
}

/* YouTube埋め込み（16:9）*/
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--hard);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =================================================================
   ⑤ 選ばれる3つの理由（コマ＋ナンバーバッジ）
   ================================================================= */
.cards { display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 1; }
.card {
  position: relative;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 1.5rem 1.2rem 1.2rem;
  box-shadow: var(--hard);
}
.card:nth-child(odd) { transform: rotate(-0.8deg); }
.card:nth-child(even) { transform: rotate(0.8deg); }
/* 星バーストのナンバーバッジ */
.card__num {
  position: absolute;
  top: -20px;
  left: -8px;
  width: 50px;
  height: 50px;
  background: var(--burst);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-family: "Reggae One", sans-serif;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 63% 25%, 90% 18%, 78% 45%, 100% 55%, 75% 65%, 84% 92%, 55% 78%, 38% 100%, 32% 70%, 5% 72%, 22% 48%, 0% 30%, 28% 30%);
}
.card__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.12rem;
  color: var(--orange-dark);
  margin: 0.4rem 0 0.5rem;
  font-weight: 700;
}

/* =================================================================
   ⑥ レッスン内容（フロー）
   ================================================================= */
.lesson { background: var(--cream); }
.flow { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.flow__step {
  width: 100%;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--hard);
  text-align: center;
}
.flow__label {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--orange);
  margin-bottom: 0.3rem;
}
.flow__detail { font-size: 0.92rem; color: var(--text-soft); }
.flow__arrow {
  color: var(--ink);
  font-size: 1.4rem;
  -webkit-text-stroke: 1px var(--ink);
}
.lesson__note {
  margin-top: 1.3rem;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-soft);
}

/* =================================================================
   ⑦ 卒業生の声（マンガ全開・傾き吹き出し）
   ================================================================= */
.voices { background: var(--base); overflow: hidden; }
.voices__tag {
  text-align: center;
  font-family: "Reggae One", sans-serif;
  color: var(--ink);
  background: var(--burst);
  border: 3px solid var(--ink);
  display: table;
  margin: 0 auto 1.4rem;
  padding: 0.2em 1.2em;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  transform: rotate(-2deg);
}
.bubble--voice {
  flex-direction: column;
  align-items: flex-start;
  font-weight: 700;
  font-size: 1rem;
}
.bubble--voice::before {
  content: "“";
  font-family: "Reggae One", serif;
  font-size: 2rem;
  color: var(--orange);
  line-height: 0.6;
  margin-bottom: 0.2rem;
}
.voices .bubble:nth-child(odd) { transform: rotate(1.2deg); }
.voices .bubble:nth-child(even) { transform: rotate(-1.2deg); }

/* =================================================================
   ⑧ 料金（信頼感重視・クリーンなコマ）
   ================================================================= */
.price { background: var(--cream); }
.price__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--hard);
}
.price__table th,
.price__table td {
  padding: 1rem 1.1rem;
  text-align: left;
  border-bottom: 2px solid #efe2cc;
  font-size: 0.98rem;
}
.price__table tr:last-child th,
.price__table tr:last-child td { border-bottom: none; }
.price__table th {
  background: var(--cream);
  font-weight: 700;
  width: 52%;
  border-right: 2px solid #efe2cc;
}
.price__table td { color: var(--orange-dark); font-weight: 700; }
.price__note {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* =================================================================
   ⑨ FAQ アコーディオン
   ================================================================= */
.faq { background: var(--base); }
.accordion { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.accordion__item {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
}
.accordion__q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  padding: 1.1rem 3rem 1.1rem 2.4rem;
  position: relative;
  cursor: pointer;
  line-height: 1.5;
}
.accordion__q::before {
  content: "Q";
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--orange);
  font-family: "Reggae One", sans-serif;
  font-size: 1.05rem;
}
.accordion__mark {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
}
.accordion__mark::before,
.accordion__mark::after {
  content: "";
  position: absolute;
  background: var(--orange);
  transition: transform 0.25s ease;
}
.accordion__mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.accordion__mark::after { left: 6px; top: 0; width: 2px; height: 14px; }
.accordion__item.is-open .accordion__mark::after { transform: rotate(90deg); }
.accordion__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion__a p {
  padding: 0 1.1rem 1.1rem 2.4rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  position: relative;
}
.accordion__a p::before {
  content: "A";
  position: absolute;
  left: 1rem;
  top: 0;
  color: var(--line-green);
  font-family: "Reggae One", sans-serif;
  font-size: 1.05rem;
}

/* =================================================================
   ⑩ アクセス（信頼感重視）
   ================================================================= */
.access { background: var(--cream); }
.map {
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--hard);
  margin-bottom: 1.2rem;
  line-height: 0;
}
.access__addr { font-weight: 700; text-align: center; }
.access__note { text-align: center; font-size: 0.9rem; color: var(--text-soft); margin-bottom: 1.2rem; }
.access__img {
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--hard);
}

/* =================================================================
   ⑪ クロージングCTA（マンガ全開・集中線）
   ================================================================= */
.closing {
  background:
    linear-gradient(180deg, var(--base) 0%, var(--cream) 100%);
  text-align: center;
  overflow: hidden;
}
/* マスコット・ナビゲーター（お見送り演出） */
.closing__stage { position: relative; z-index: 1; margin-bottom: 1.6rem; }
.closing__msg {
  position: relative;
  display: block;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: var(--hard);
}
/* 吹き出しのシッポ（下向き＝キャラがしゃべっている）*/
.closing__msg::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.closing__chars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}
/* 身長をそろえて二人並び（チビ講師＋全身マスコット） */
.closing__teacher {
  height: clamp(150px, 44vw, 195px);
  width: auto;
  filter: drop-shadow(3px 4px 0 rgba(35, 35, 35, 0.25));
  animation: bob 3.6s ease-in-out infinite;
}
.closing__mascot {
  height: clamp(165px, 50vw, 215px);
  width: auto;
  filter: drop-shadow(3px 4px 0 rgba(35, 35, 35, 0.25));
  animation: bob 3s ease-in-out infinite 0.3s;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .closing__teacher, .closing__mascot { animation: none; }
}

/* =================================================================
   回遊用マスコット・アクセント（#3）
   ================================================================= */
/* セクション隅にちょこんと登場する案内役（海賊ネコ） */
.sec-mascot {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 64px;
  z-index: 2;
  transform: rotate(6deg);
  filter: drop-shadow(2px 3px 0 rgba(35, 35, 35, 0.22));
  animation: bob 3.2s ease-in-out infinite;
}
/* 追従バーから顔を出してLINEボタンを指し示すネコ */
.sticky-bar__cat {
  position: absolute;
  left: 8px;
  bottom: calc(100% - 6px);
  width: 58px;
  z-index: 1;
  transform: rotate(-6deg);
  filter: drop-shadow(2px 3px 0 rgba(35, 35, 35, 0.22));
  animation: bob 2.8s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sec-mascot, .sticky-bar__cat { animation: none; }
}

/* ---- フッター ---- */
.footer {
  background: var(--ink);
  color: #e8e8e8;
  text-align: center;
  padding: 2rem 1.4rem 6rem;
  font-size: 0.85rem;
  line-height: 2;
  border-top: 4px solid var(--orange);
}
.footer__name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.footer a { color: #ffd9a8; }
.footer__copy { margin-top: 1rem; font-size: 0.78rem; color: #aaa; }

/* =================================================================
   追従CTAバー
   ================================================================= */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.96);
  border-top: 3px solid var(--ink);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.sticky-bar.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sticky-bar__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 460px;
  min-height: 52px;
  background: var(--line-green);
  color: var(--white);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
}
.sticky-bar__btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(8deg);
  animation: shine 3.4s ease-in-out infinite;
}
.sticky-bar__btn:active { background: var(--line-green-dark); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

/* =================================================================
   登場アニメ（IntersectionObserver）＝マンガのコマがポンッと出る
   ================================================================= */
.fade-in {
  opacity: 0;
  transform: translateY(22px) scale(0.96) rotate(-1deg);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.85, 0.3, 1.25);
}
.fade-in.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .sticky-bar__btn::after { display: none; }
}