/* =========================================================
   Bright Me!! (brightme.jp) サイト共通スタイル
   LP型リデザイン 2026-07
   淡ミント地 × ミントグリーン / 明るくポップ・余白大きめ
   見出し・本文: Noto Sans JP(400/500/700/900)
   ========================================================= */

:root {
  --bg: #FFFFFF;
  --tint: #EAF7F1;
  --tint-strong: #D7EFE3;
  --tint-warm: #FFF6E3;
  --ink: #2B3A35;
  --muted: #5E6E68;
  --line: #DCEBE3;
  --primary: #14A085;
  --primary-deep: #0E7D68;
  --yellow: #FFD75E;
  --coral: #FF8A7A;
  --radius-l: 22px;
  --radius-m: 14px;
  --radius-s: 10px;
  --shadow-card: 0 10px 28px rgba(43, 58, 53, 0.10);
  --shadow-pop: 0 14px 34px rgba(20, 160, 133, 0.16);
  --font-head: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --header-h: 70px;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body.nav-open {
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1.45;
  margin: 0 0 0.8em;
}

p {
  margin: 0 0 1.2em;
}

p:last-child {
  margin-bottom: 0;
}

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

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

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

ul, ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

small {
  font-size: 0.8rem;
}

.container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container-wide {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* アンカー着地位置(固定ヘッダーぶん下げる) */
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---------- マーカー強調 ---------- */

.marker {
  background-image: linear-gradient(to bottom, transparent 52%, #FFFFFF 52%, #FFFFFF 94%, transparent 94%);
}

.marker-y {
  background-image: linear-gradient(to bottom, transparent 60%, var(--yellow) 60%, var(--yellow) 96%, transparent 96%);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  border: 2px solid var(--primary);
  box-shadow: 0 5px 0 var(--primary-deep);
}

.btn-primary:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: #FFFFFF;
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--primary-deep);
}

.btn-secondary {
  background: #FFFFFF;
  color: var(--primary-deep);
  border: 2px solid var(--primary);
  box-shadow: 0 5px 0 var(--tint-strong);
}

.btn-secondary:hover {
  background: var(--tint);
  color: var(--primary-deep);
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--tint-strong);
}

.btn-small {
  padding: 11px 22px;
  font-size: 0.88rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(43, 58, 53, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}

.brand {
  flex-shrink: 0;
}

.logo {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
  display: inline-block;
}

.logo:hover {
  opacity: 0.8;
}

.logo img {
  display: block;
  height: 38px;
  width: auto;
}

/* PC幅のヘッダー常設ナビ+CTA(参照型の骨格。SP幅はハンバーガー単独運用) */

.header-quick {
  display: none;
}

.header-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.header-nav a {
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav a[aria-current="page"] {
  color: var(--primary-deep);
}

.header-cta {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 941px) {
  .header-quick {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    min-width: 0;
  }
}

/* 941〜1080pxはCTAボタンを優先し、テキストリンクは非表示(全リンクはドロワーにあり) */
@media (max-width: 1080px) {
  .header-nav {
    display: none;
  }
}

/* ハンバーガー(全ページ・全幅共通。PC幅ではドロワーの補助導線) */

.nav-toggle {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head);
  cursor: pointer;
  color: var(--ink);
  position: relative;
  z-index: 220;
}

.nav-toggle:hover {
  color: var(--primary-deep);
}

.nav-toggle-bars {
  display: block;
  position: relative;
  width: 30px;
  height: 16px;
}

.nav-toggle-bars .bar,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

.nav-toggle-bars::before {
  top: 0;
}

.nav-toggle-bars .bar {
  top: 50%;
  margin-top: -1.5px;
}

.nav-toggle-bars::after {
  top: auto;
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars .bar {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.nav-toggle-label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* ドロワーナビ */

.global-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 210;
  height: 100dvh;
  width: min(86vw, 400px);
  background: #FFFFFF;
  padding: calc(var(--header-h) + 24px) 28px 40px;
  overflow-y: auto;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.32s ease, visibility 0.32s;
  border-radius: 26px 0 0 26px;
  box-shadow: -18px 0 40px rgba(43, 58, 53, 0.12);
}

.global-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.global-nav::after {
  content: "";
  display: block;
  margin-top: 34px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--primary) 0 40%, var(--yellow) 40% 70%, var(--coral) 70% 100%);
  opacity: 0.85;
}

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

.global-nav li {
  border-bottom: 1px solid var(--line);
}

.global-nav a {
  display: block;
  padding: 17px 34px 17px 6px;
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}

.global-nav a::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.global-nav a:hover,
.global-nav a[aria-current="page"] {
  color: var(--primary-deep);
}

.global-nav a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
  margin-right: 8px;
  vertical-align: 0.1em;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(43, 58, 53, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s;
  cursor: pointer;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---------- フローティングCTA ---------- */

.floating-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.5;
  box-shadow: 0 10px 24px rgba(14, 125, 104, 0.38);
  border: 3px solid #FFFFFF;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.floating-cta::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid #FFFFFF;
}

.floating-cta:hover {
  background: var(--primary-deep);
  color: #FFFFFF;
  transform: translateY(-4px) scale(1.04);
}

@media (max-width: 600px) {
  .floating-cta {
    width: 84px;
    height: 84px;
    right: 12px;
    bottom: 12px;
    font-size: 0.62rem;
    padding: 8px;
  }
}

/* ---------- 写真プレースホルダ ---------- */

.ph-photo {
  position: relative;
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 215, 94, 0.28) 0, transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(255, 138, 122, 0.20) 0, transparent 36%),
    linear-gradient(135deg, var(--tint-strong) 0%, var(--tint) 55%, #F6FBF8 100%);
  border: 2px dashed rgba(20, 160, 133, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  width: 100%;
}

.ph-photo--portrait {
  aspect-ratio: 3 / 4;
}

.ph-photo--square {
  aspect-ratio: 1 / 1;
}

.ph-photo--wide {
  aspect-ratio: 16 / 9;
}

/* 実写を差し込んだ状態(枠線・地模様を消して写真で満たす) */
.ph-photo.has-img {
  border: 6px solid #FFFFFF;
  background: none;
}

.ph-photo.has-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-photo-note {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-deep);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
}

/* ---------- hero (top) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--tint);
  padding: 72px 0 96px;
}

/* 地模様: 淡いドットパターン */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20, 160, 133, 0.10) 2.5px, transparent 2.5px);
  background-size: 34px 34px;
  pointer-events: none;
}

/* 下端の白い波カーブ */
.hero::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -60px;
  width: 120%;
  height: 110px;
  background: #FFFFFF;
  border-radius: 50% 50% 0 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 文言順は h1 → 学び場の一文 → 入口の一文(DOM順維持、表示はeyebrowを上に) */
.hero-eyebrow {
  order: -1;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-deep);
  background: #FFFFFF;
  border: 1.5px solid var(--tint-strong);
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 26px;
  line-height: 1.7;
}

.hero h1 {
  order: 0;
  font-family: var(--font-head);
  /* 改行固定(11文字/行)がコピー欄からはみ出さない上限に調整 */
  font-size: clamp(1rem, 4.4vw, 2.85rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.45;
  margin-bottom: 0.6em;
}

/* 指定の位置以外では改行させない(幅がどれだけ狭くても2行を維持) */
.hero-title-line {
  display: block;
  white-space: nowrap;
}

.hero-lead {
  order: 1;
  font-size: 1.06rem;
  font-weight: 500;
  margin-bottom: 2em;
}

.hero-actions {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero-sublink {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ヒーロー: 扱うテーマのタグ(デイトラ型のカテゴリタグを参考にした一覧表示) */
.hero-tags {
  order: 3;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
}

.hero-tags li {
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--primary-deep);
  background: #FFFFFF;
  border: 1px solid var(--tint-strong);
  border-radius: 999px;
  padding: 6px 18px;
}

.hero-tag-note {
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.3em;
}

/* 写真コラージュ */

.hero-collage {
  position: relative;
  min-height: 470px;
}

.hero-collage .ph-photo {
  position: absolute;
  border: 6px solid #FFFFFF;
  box-shadow: var(--shadow-card);
}

.collage-photo-1 {
  width: 58%;
  top: 0;
  left: 0;
  transform: rotate(-4deg);
}

.collage-photo-2 {
  width: 44%;
  top: 90px;
  right: 0;
  transform: rotate(3.5deg);
}

.collage-photo-3 {
  width: 46%;
  bottom: 0;
  left: 12%;
  transform: rotate(-2deg);
}

/* ヒーロー写真コラージュの動き(狭幅では1枚静止表示に切り替わるため941px以上のみ) */
@keyframes collage-float-1 {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-22px); }
}

@keyframes collage-float-2 {
  0%, 100% { transform: rotate(3.5deg) translateY(0); }
  50% { transform: rotate(3.5deg) translateY(20px); }
}

@keyframes collage-float-3 {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-18px); }
}

@keyframes collage-tag-float {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-12px); }
}

@keyframes collage-dot-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -18px); }
}

@keyframes collage-dot-drift-rev {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 14px); }
}

@keyframes collage-photo-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

@media (min-width: 941px) {
  .collage-photo-1 { animation: collage-float-1 6s ease-in-out infinite; }
  .collage-photo-2 { animation: collage-float-2 7s ease-in-out infinite; }
  .collage-photo-3 { animation: collage-float-3 5.5s ease-in-out infinite; }
  .collage-tag { animation: collage-tag-float 4s ease-in-out infinite; }
  .collage-dot-a { animation: collage-dot-drift 5s ease-in-out infinite; }
  .collage-dot-b { animation: collage-dot-drift-rev 6.5s ease-in-out infinite; }
  .collage-dot-c { animation: collage-dot-drift 4.5s ease-in-out infinite reverse; }
  .hero-collage .ph-photo.has-img > img { animation: collage-photo-zoom 10s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .collage-photo-1,
  .collage-photo-2,
  .collage-photo-3,
  .collage-tag,
  .collage-dot-a,
  .collage-dot-b,
  .collage-dot-c,
  .hero-collage .ph-photo.has-img > img {
    animation: none;
  }
}

.collage-tag {
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 16%;
  background: #FFFFFF;
  color: var(--primary-deep);
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 900;
  padding: 8px 22px;
  border-radius: 999px;
  border: 2.5px solid var(--primary);
  box-shadow: var(--shadow-pop);
  transform: rotate(-6deg);
}

.collage-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.collage-dot-a {
  width: 34px;
  height: 34px;
  background: var(--yellow);
  top: -6px;
  right: 18%;
}

.collage-dot-b {
  width: 22px;
  height: 22px;
  background: var(--coral);
  left: 2%;
  bottom: 24%;
}

.collage-dot-c {
  width: 16px;
  height: 16px;
  border: 4px solid var(--primary);
  background: transparent;
  top: 44%;
  left: 46%;
}

@media (max-width: 940px) {
  .hero {
    padding: 52px 0 84px;
  }

  /* 幅を狭めても縦積みにしない: 常にコピー(左)・写真(右)の2カラムを維持し、比率だけ詰める */
  .hero-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 4vw;
    align-items: start;
  }

  /* 3枚重ねのコラージュは狭いカラムでは崩れるため、写真1枚のシンプル表示に切り替える */
  .hero-collage {
    min-height: 0;
    height: auto;
    width: 100%;
    align-self: center;
  }

  .collage-photo-2,
  .collage-photo-3,
  .collage-dot-a,
  .collage-dot-b,
  .collage-dot-c {
    display: none;
  }

  .hero-collage .ph-photo {
    position: static;
    width: 100%;
    transform: none;
    aspect-ratio: 3 / 4;
  }

  .collage-tag {
    position: static;
    display: inline-block;
    margin-top: 12px;
    transform: none;
    font-size: 0.78rem;
    padding: 5px 14px;
  }

  /* 狭い写真カラムでもラベルが枠内に収まるよう折り返し可に */
  .hero-collage .ph-photo-note {
    white-space: normal;
    text-align: center;
    font-size: 0.6rem;
    padding: 0.4em 0.7em;
    max-width: 88%;
    line-height: 1.4;
  }
}

/* ---------- page hero (下層ページ) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--tint);
  padding: 64px 0 84px;
  text-align: center;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20, 160, 133, 0.10) 2.5px, transparent 2.5px);
  background-size: 34px 34px;
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -50px;
  width: 120%;
  height: 90px;
  background: #FFFFFF;
  border-radius: 50% 50% 0 0;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: clamp(1.85rem, 4.6vw, 2.7rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  margin-bottom: 0.6em;
}

.page-hero-sub {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--primary-deep);
  background: #FFFFFF;
  border: 1.5px solid var(--tint-strong);
  border-radius: 999px;
  padding: 5px 18px;
  margin-bottom: 1.1em;
}

.page-hero-lead {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
}

.page-hero .hero-actions {
  margin-top: 1.8em;
  justify-content: center;
}

/* チップ(page-hero-sub)は表示のみ見出しの上へ(DOM順は維持) */

.page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-hero .page-hero-sub {
  order: -1;
}

.page-hero .hero-actions {
  flex-wrap: wrap;
}

/* 下層ヒーロー内の料金表示(Excelスクール) */

.page-hero .hero-price {
  background: #FFFFFF;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  margin-top: 20px;
  padding: 20px 32px;
  text-align: center;
}

/* 法的ページ: シンプル版ヒーロー */

.page-hero--plain {
  padding: 52px 0 64px;
  text-align: left;
}

.page-hero--plain::before {
  display: none;
}

.page-hero--plain h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

/* ---------- sections ---------- */

.section {
  padding: 88px 0;
  position: relative;
}

.section-tint {
  background: var(--tint);
}

.section-title {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 1.3em;
}

/* ミニラベル(装飾): 見出し上のカラーバー+ドット */
.section-title::before {
  content: "";
  display: block;
  width: 46px;
  height: 9px;
  border-radius: 5px;
  background: var(--primary);
  margin: 0 auto 18px;
  box-shadow: -62px 0 0 -1px var(--yellow), 62px 0 0 -1px var(--coral);
}

.section-lead {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 2.4em;
  text-align: center;
}

.text-block {
  max-width: 720px;
  margin-inline: auto;
}

.note-muted {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

/* 本文+写真の2カラム */

.media-block {
  max-width: 920px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 44px;
  align-items: center;
}

.media-block .text-block {
  margin-inline: 0;
}

.media-block--photo-small {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
}

@media (max-width: 800px) {
  .media-block,
  .media-block--photo-small {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .media-block .ph-photo {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* セクション内のボタン列は中央寄せ(トップヒーロー内は左寄せのまま) */
.section .hero-actions,
.final-cta .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* 単独写真(セクション中央に1枚) */
.photo-solo {
  max-width: 640px;
  margin: 0 auto 40px;
}

/* ブロック間の余白 */
.block-gap {
  margin-top: 36px;
}

/* タグライン強調 */
.lead-strong {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
}

.mission-quote {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* 中央寄せ文脈では、行ごとに幅をコンテンツに合わせてから中央寄せする */
.mission-quote .hero-title-line {
  width: fit-content;
  margin-inline: auto;
}

/* 箇条書き(チェックリスト調) */
ul.text-block {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
}

ul.text-block li {
  background: #FFFFFF;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 16px 20px 16px 56px;
  font-weight: 500;
  position: relative;
}

ul.text-block li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
}

ul.text-block li::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 9px;
  height: 5px;
  border-left: 2.5px solid #FFFFFF;
  border-bottom: 2.5px solid #FFFFFF;
  transform: translateY(-72%) rotate(-45deg);
}

/* 公開前に確定プレースホルダ(公開時にはすべて解消すること) */
.fix-note {
  display: inline-block;
  background: #FFF6DF;
  border: 1px solid #EBD9A8;
  border-radius: 8px;
  color: #7A621F;
  font-size: 0.85rem;
  padding: 2px 10px;
}

.fix-block {
  background: #FFF6DF;
  border: 1px solid #EBD9A8;
  border-radius: var(--radius-m);
  color: #7A621F;
  font-size: 0.9rem;
  padding: 16px 20px;
  max-width: 760px;
  margin-inline: auto;
}

/* ---------- 講座カード ---------- */

.course-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.course-card {
  background: #FFFFFF;
  border-radius: var(--radius-l);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

/* カード上端の飾り帯 */
.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--primary) 0 55%, var(--yellow) 55% 80%, var(--coral) 80% 100%);
}

.course-card h3 {
  order: 1;
  font-size: 1.18rem;
  font-weight: 900;
  margin: 0 0 0.4em;
}

/* 講座カード上部の画像(コーポレートの事業カードと共通のバナー) */
.course-card-photo {
  order: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  margin: 0 0 20px;
}

.course-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 価格表示(受講料+税表記)。/oneday/ /excel-school/ の詳細ページで使用 */
.price-block {
  background: var(--tint);
  border-radius: var(--radius-m);
  padding: 18px 22px;
  margin-bottom: 22px;
}

.price-label {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 900;
  color: #FFFFFF;
  background: var(--primary);
  border-radius: 999px;
  padding: 1px 14px;
  margin-bottom: 6px;
}

.price-number {
  display: block;
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--primary-deep);
  line-height: 1.3;
}

.price-number .price-tax {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.price-conditions {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}

/* トップの講座カードでは価格を出さないため、条件(オンライン/期間)だけをピルバッジで見出し直下に表示 */
.course-card > .price-conditions {
  order: 2;
  font-weight: 700;
  color: var(--primary-deep);
  background: var(--tint);
  display: inline-block;
  border-radius: 999px;
  padding: 3px 14px;
  margin-top: 0;
  margin-bottom: 18px;
}

.course-card-body {
  order: 3;
  flex-grow: 1;
}

.course-card-body p {
  margin-bottom: 0.8em;
}

.course-schedule {
  font-size: 0.88rem;
  background: var(--tint);
  border-radius: var(--radius-s);
  padding: 10px 16px;
}

.course-card-link {
  order: 4;
  margin-top: 18px;
}

.arrow-link {
  font-family: var(--font-head);
  font-weight: 900;
  text-decoration: none;
  color: var(--primary-deep);
}

.arrow-link::after {
  content: " →";
}

.arrow-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* 3カード横並び(講座一覧) */
.course-cards--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* カード3(法人・準備中): 同じ構造のまま、枠線と背景だけ控えめに */
.course-card--sub {
  background: rgba(255, 255, 255, 0.75);
  border: 2px dashed var(--tint-strong);
  box-shadow: none;
}

.course-card--sub::before {
  display: none;
}

.course-card-note {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.82em;
  margin-left: 0.3em;
}

@media (max-width: 900px) {
  .course-cards,
  .course-cards--3col {
    grid-template-columns: 1fr;
  }
}

/* ---------- 比較表 ---------- */

.table-scroll {
  overflow-x: auto;
  max-width: 860px;
  margin-inline: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.compare-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFFFF;
  font-size: 0.95rem;
}

.compare-table th,
.compare-table td {
  border-bottom: 1px solid var(--line);
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-weight: 900;
  border-bottom: none;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody th {
  background: var(--tint);
  font-family: var(--font-head);
  font-weight: 900;
  white-space: nowrap;
  width: 8em;
}

.compare-table tbody tr:nth-child(even) td {
  background: #FAFDFB;
}

/* ---------- 不安リスト ---------- */

.concern-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
}

.concern-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}

.concern-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
}

/* 不安カード内のイラスト枠(本人指定のイラストに差し替え) */
.concern-illust {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-m);
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 215, 94, 0.25) 0, transparent 36%),
    radial-gradient(circle at 85% 80%, rgba(255, 138, 122, 0.18) 0, transparent 40%),
    var(--tint);
  margin-bottom: 16px;
}

.concern-illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-m);
}

.concern-resolve {
  margin: 36px 0 0;
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  font-weight: 900;
  color: var(--primary-deep);
}

@media (max-width: 900px) {
  .concern-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- Bright Me!!とは ---------- */

.eyebrow-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--primary-deep);
  text-align: center;
  margin: 0;
}

.eyebrow-label + .section-title {
  margin-top: 0.4em;
}

.eyebrow-label + .section-title::before {
  margin-top: 0;
}

.mini-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
}

.mini-tags li {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-deep);
  background: #FFFFFF;
  border: 1px solid var(--tint-strong);
  border-radius: 999px;
  padding: 4px 14px;
}

/* キャラクター(エクセルお姉さんのアバターイラスト) */
.character-block {
  margin: 0;
  text-align: center;
  align-self: center;
}

.character-block img {
  width: min(240px, 70%);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 10px 24px rgba(43, 58, 53, 0.16));
}

.character-block figcaption {
  margin-top: 14px;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-deep);
}

/* セクション末尾の詳細リンク */
.section-more {
  margin-top: 28px;
  text-align: center;
}

/* ---------- 受講後の変化 ---------- */

.scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.scene {
  background: #FFFFFF;
  border-radius: var(--radius-l);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
  position: relative;
}

/* シーン札の飾りドット */
.scene::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  margin-bottom: 14px;
}

.scene:nth-child(2)::before {
  background: var(--yellow);
}

.scene:nth-child(3)::before {
  background: var(--coral);
}

.scene h3 {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 0.6em;
}

.scene p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .scenes {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }
}

/* ---------- Bright Me!!に含まれるもの ---------- */
/* SHElikesの「このプランに含まれる全てのサービス」を参考にしたカード形式(テキスト+写真) */

.included-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 32px 0 0;
  padding: 0;
}

.included-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  background: #FFFFFF;
  border-radius: var(--radius-l);
  padding: 30px 32px;
  box-shadow: var(--shadow-card);
}

.included-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.included-num {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 900;
  color: #FFFFFF;
  background: var(--primary);
  border-radius: 999px;
  padding: 3px 16px;
}

.included-card:nth-child(3n+2) .included-num {
  background: var(--coral);
}

.included-card:nth-child(3n) .included-num {
  background: var(--yellow);
  color: var(--ink);
}

.included-card-text p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;
}

.included-card--campaign {
  background: var(--tint);
  border: 2px dashed var(--primary);
  box-shadow: none;
}

.included-campaign-badge {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 900;
  color: #FFFFFF;
  background: var(--coral);
  border-radius: 999px;
  padding: 3px 14px;
}

@media (max-width: 720px) {
  .included-card {
    grid-template-columns: 1fr;
  }
}

/* ---------- 受講までの流れ ---------- */

.flow-list {
  list-style: none;
  counter-reset: flow;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: 18px;
}

.flow-list li {
  counter-increment: flow;
  background: #FFFFFF;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 22px 24px 22px 84px;
  position: relative;
  font-weight: 500;
}

.flow-list li::before {
  content: counter(flow);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 0 var(--primary-deep);
}

/* 番号をつなぐ縦点線 */
.flow-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 41px;
  bottom: -18px;
  width: 2px;
  height: 18px;
  background-image: linear-gradient(to bottom, var(--primary) 55%, transparent 55%);
  background-size: 2px 7px;
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 16px;
}

.faq-list details {
  background: #FFFFFF;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 60px 20px 24px;
  font-family: var(--font-head);
  font-weight: 900;
  position: relative;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* 開閉アイコン(丸+十字) */
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--primary), var(--primary)) center / 12px 3px no-repeat,
    linear-gradient(var(--primary), var(--primary)) center / 3px 12px no-repeat,
    var(--tint);
}

.faq-list details[open] summary::after {
  background:
    linear-gradient(var(--primary), var(--primary)) center / 12px 3px no-repeat,
    var(--tint);
}

.faq-list summary:hover {
  color: var(--primary-deep);
}

.faq-answer {
  padding: 0 24px 22px;
}

.faq-answer p {
  padding-top: 16px;
  margin-bottom: 0;
  border-top: 1.5px dashed var(--line);
}

/* ---------- 会社概要テーブル ---------- */

.company-table {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFFFF;
  font-size: 0.95rem;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: table;
}

.company-table th,
.company-table td {
  border-bottom: 1px solid var(--line);
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
}

.company-table tr:last-child th,
.company-table tr:last-child td {
  border-bottom: none;
}

.company-table th {
  background: var(--tint);
  font-family: var(--font-head);
  font-weight: 900;
  width: 11em;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .company-table th {
    width: 8em;
    white-space: normal;
  }
}

/* ---------- お知らせ ---------- */

.news-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
}

.news-list li {
  background: #FFFFFF;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}

.news-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--ink);
}

.news-list a:hover .news-title {
  color: var(--primary-deep);
  text-decoration: underline;
}

.news-date {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 7.5em;
}

.news-title {
  font-weight: 700;
}

.news-more {
  margin-top: 28px;
  text-align: center;
}

/* 記事ページ */

.article {
  max-width: 720px;
  margin-inline: auto;
}

.article-date {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 2em;
}

/* ---------- 最終CTA ---------- */
/* 参照型の地色リズムに合わせて淡クリーム地(ダーク地はフッターのみ) */

.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--tint-warm);
  padding: 96px 0;
  text-align: center;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20, 160, 133, 0.10) 2.5px, transparent 2.5px);
  background-size: 34px 34px;
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  z-index: 1;
}

.final-cta .section-title {
  margin-bottom: 0.9em;
}

.final-cta .hero-actions {
  justify-content: center;
}

.final-cta .btn-secondary {
  box-shadow: 0 5px 0 rgba(43, 58, 53, 0.14);
}

/* ---------- フォーム ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-form {
  background: #FFFFFF;
  border-radius: var(--radius-l);
  padding: 36px 30px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.contact-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--primary) 0 55%, var(--yellow) 55% 80%, var(--coral) 80% 100%);
}

.contact-form h2 {
  font-size: 1.25rem;
  font-weight: 900;
  margin: 4px 0 1.2em;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.form-required {
  display: inline-block;
  color: #FFFFFF;
  background: var(--coral);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 10px;
  margin-left: 8px;
  vertical-align: 0.1em;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #FDFEFD;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
  background: #FFFFFF;
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.contact-form .btn {
  width: 100%;
  cursor: pointer;
  font-family: var(--font-head);
}

/* ---------- 法的ページ ---------- */

.legal-body {
  max-width: 760px;
  margin-inline: auto;
}

.legal-body h2 {
  font-size: 1.15rem;
  font-weight: 900;
  margin: 2.4em 0 0.6em;
  padding-left: 14px;
  border-left: 5px solid var(--primary);
}

.legal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFFFF;
  font-size: 0.95rem;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.legal-table th,
.legal-table td {
  border-bottom: 1px solid var(--line);
  padding: 15px 18px;
  text-align: left;
  vertical-align: top;
}

.legal-table tr:last-child th,
.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table th {
  background: var(--tint);
  font-family: var(--font-head);
  font-weight: 900;
  width: 13em;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .legal-table th {
    width: 8em;
    white-space: normal;
  }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: #FFFFFF;
  padding: 0;
  font-size: 0.88rem;
}

/* ブランドストライプ */
.site-footer::before {
  content: "";
  display: block;
  height: 8px;
  background: linear-gradient(90deg, var(--primary) 0 50%, var(--yellow) 50% 78%, var(--coral) 78% 100%);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 40px;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.footer-logo {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.4rem;
  color: #FFFFFF;
  display: inline-block;
  margin-bottom: 8px;
}

.site-footer p {
  margin-bottom: 0.5em;
  color: rgba(255, 255, 255, 0.85);
}

.site-footer a {
  color: #BDE8DA;
  text-decoration: none;
}

.site-footer a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.footer-nav h2 {
  font-size: 0.8rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1em;
}

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

.footer-nav li {
  margin-bottom: 10px;
}

.footer-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 999px;
  padding: 2px 16px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 0;
  text-align: center;
}

.footer-bottom small {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- responsive tweaks ---------- */

@media (max-width: 600px) {
  .section {
    padding: 60px 0;
  }

  .page-hero {
    padding: 48px 0 68px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .final-cta {
    padding: 68px 0;
  }

  .course-card,
  .contact-form {
    padding: 28px 20px 24px;
  }

  .section-lead,
  .note-muted {
    text-align: left;
  }

  .flow-list li {
    padding: 18px 18px 18px 68px;
  }

  .flow-list li::before {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
    left: 16px;
  }

  .flow-list li:not(:last-child)::after {
    left: 33px;
  }
}

/* =========================================================
   2026-07 リッチ化アップデート
   スクロール出現 / ヒーロー入場 / セクション英字ラベル /
   カードのホバー・リボン / CTA強化 / 装飾ドット
   (既存ルールの上書きはこのブロックが後勝ちであることを利用)
   ========================================================= */

/* ---------- スクロール出現(JSが .rv を付与。JS無効時は常時表示) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0;
    transform: translateY(28px);
  }

  .rv.is-in {
    opacity: 1;
    transform: none;
  }
}
/* 注: .rvのtransitionは、ホバー用transition(.course-card等)より確実に勝たせるため
   ファイル末尾で .rv.rv として宣言している */

/* ---------- セクション英字ラベル ---------- */

.section-eyebrow {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--primary);
  text-align: center;
  margin: 0 0 6px;
}

/* ---------- セクション地色のリズム(ミント/クリーム/白の交互) ---------- */

.section-warm {
  background: var(--tint-warm);
}

/* 装飾ドットが本文に重ならないよう、コンテナを前面レイヤーに */
.section > .container {
  position: relative;
  z-index: 1;
}

.deco-dots {
  position: absolute;
  z-index: 0;
  width: 160px;
  height: 104px;
  background-image: radial-gradient(var(--tint-strong) 4px, transparent 4.5px);
  background-size: 26px 26px;
  pointer-events: none;
}

.deco-dots--a {
  top: 44px;
  right: 3%;
}

.deco-dots--b {
  bottom: 52px;
  left: 3%;
  background-image: radial-gradient(rgba(255, 215, 94, 0.75) 4px, transparent 4.5px);
}

.deco-dots--c {
  top: 44px;
  left: 3%;
  background-image: radial-gradient(rgba(255, 138, 122, 0.55) 4px, transparent 4.5px);
}

@media (max-width: 820px) {
  .deco-dots {
    display: none;
  }
}

/* ---------- ボタン強化(矢印+ホバーで前進) ---------- */

.btn-primary:not(.btn-small)::after,
.btn-secondary:not(.btn-small)::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.2s ease;
}

.btn-primary:not(.btn-small):hover::after,
.btn-secondary:not(.btn-small):hover::after {
  transform: translateX(5px);
}

.arrow-link::after {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

/* ---------- ヒーロー入場アニメーション ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero .hero-copy > * {
    opacity: 0;
    animation: hero-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .hero .hero-copy .hero-eyebrow { animation-delay: 0.05s; }
  .hero .hero-copy h1 { animation-delay: 0.16s; }
  .hero .hero-copy .hero-lead { animation-delay: 0.3s; }
  .hero .hero-copy .hero-actions { animation-delay: 0.42s; }
  .hero .hero-copy .hero-note { animation-delay: 0.5s; }
  .hero .hero-copy .hero-tags { animation-delay: 0.58s; }

  .hero .hero-collage {
    opacity: 0;
    animation: hero-enter-collage 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
  }

  /* 黄色マーカーを左から引くスイープ */
  .hero .marker-y {
    background-size: 0% 100%;
    background-repeat: no-repeat;
    animation: marker-sweep 0.8s ease 1s forwards;
  }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-enter-collage {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes marker-sweep {
  to {
    background-size: 100% 100%;
  }
}

/* ヒーローの補足コピー */

.hero-lead {
  font-size: 1.02rem;
}

.hero-note {
  order: 2;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  margin: 12px 0 0;
}

/* ---------- 不安 → 解決の流れ ---------- */

.concern-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.concern-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-pop);
}

/* 下向き矢印(不安カードから解決コピーへ視線を送る) */
.concern-arrow {
  width: 0;
  height: 0;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-top: 28px solid var(--primary);
  margin: 40px auto 30px;
  opacity: 0.92;
}

.concern-resolve {
  position: relative;
  margin-top: 0;
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  /* flexにすることで、テキストが折り返しても左右の勢い線が孤立行にならない */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* 左右の勢い線 */
.concern-resolve::before,
.concern-resolve::after {
  content: "";
  flex: none;
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--primary);
}

.concern-resolve::before {
  transform: rotate(-26deg);
}

.concern-resolve::after {
  transform: rotate(26deg);
}

/* ---------- Bright Me!!とは: キャッチライン ---------- */

.block-catch {
  font-family: var(--font-head);
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--primary-deep);
  margin-bottom: 1em;
}

/* ---------- 講座カード: ホバー・リボン・ボタン ---------- */

.course-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-pop);
}

.course-ribbon {
  position: absolute;
  top: 20px;
  right: -46px;
  z-index: 2;
  transform: rotate(38deg);
  background: var(--coral);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 6px 52px;
  box-shadow: 0 3px 10px rgba(43, 58, 53, 0.16);
}

.course-ribbon--primary {
  background: var(--primary);
}

.course-card-link .btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 0.95rem;
}

/* ---------- サポート/変化カード: 連番バッジ ---------- */

.scenes {
  counter-reset: scene;
}

.scene {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.scene:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}

.scene::before {
  counter-increment: scene;
  content: counter(scene, decimal-leading-zero);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.95rem;
  color: #FFFFFF;
  background: var(--primary);
  margin-bottom: 16px;
  box-shadow: 0 3px 0 var(--primary-deep);
}

.scene:nth-child(2)::before {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 3px 0 #E3B93B;
}

.scene:nth-child(3)::before {
  background: var(--coral);
  color: #FFFFFF;
  box-shadow: 0 3px 0 #E06A59;
}

/* ---------- Bright Me!!に含まれるもの: 白地対応+交互レイアウト ---------- */

.included-card:not(.included-card--campaign) {
  border: 1.5px solid var(--line);
}

.included-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

.included-card:nth-child(even) .included-card-text {
  order: 2;
}

.included-card:nth-child(even) .included-card-photo {
  order: 1;
}

@media (max-width: 720px) {
  .included-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .included-card:nth-child(even) .included-card-text {
    order: 0;
  }

  .included-card:nth-child(even) .included-card-photo {
    order: 1;
  }
}

/* ---------- FAQ: Q/Aバッジ ---------- */

.faq-list summary {
  padding-left: 66px;
}

.faq-list summary::before {
  content: "Q";
  position: absolute;
  left: 20px;
  top: 19px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.faq-answer {
  position: relative;
  padding: 0 24px 22px 66px;
}

.faq-answer::before {
  content: "A";
  position: absolute;
  left: 20px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--coral);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- お知らせ: ホバー ---------- */

.news-list li {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-list li:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-pop);
}

/* ---------- 最終CTA: 強化 ---------- */

.final-cta .section-title {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.cta-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
}

.cta-chips li {
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--primary-deep);
  background: #FFFFFF;
  border: 1.5px solid var(--tint-strong);
  border-radius: 999px;
  padding: 6px 18px;
}

.cta-chips li::before {
  content: "✓";
  font-weight: 900;
  color: var(--primary);
  margin-right: 7px;
}

.cta-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cta-blob-a {
  width: 220px;
  height: 220px;
  background: rgba(255, 215, 94, 0.35);
  top: -70px;
  left: -60px;
}

.cta-blob-b {
  width: 150px;
  height: 150px;
  background: rgba(20, 160, 133, 0.14);
  bottom: -40px;
  right: 6%;
}

/* ---------- フローティングCTA: パルスリング ---------- */

@media (prefers-reduced-motion: no-preference) {
  .floating-cta::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    opacity: 0;
    animation: cta-ring 2.8s ease-out infinite;
    pointer-events: none;
  }
}

@keyframes cta-ring {
  0% {
    transform: scale(1);
    opacity: 0.65;
  }
  70% {
    transform: scale(1.32);
    opacity: 0;
  }
  100% {
    transform: scale(1.32);
    opacity: 0;
  }
}

/* ---------- 検証後の修正パッチ ---------- */

/* .rvのtransition(ホバー用transitionを持つカードでも出現フェードが効くよう、
   .rv.rv の特異度(0,2,0)で .news-list li 等(0,1,1)に勝たせる。
   box-shadowも含めることで、出現直後のホバーでも影が滑らかに動く */
@media (prefers-reduced-motion: no-preference) {
  .rv.rv {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
  }
}

/* 印刷時は未出現要素も必ず表示 */
@media print {
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 狭幅でCTAボタンが矢印ぶんで2行に折り返さないよう、余白と文字を少し詰める */
@media (max-width: 480px) {
  .hero-actions .btn {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 0.92rem;
  }
}

/* 期間限定プレゼント(旧・含まれるもの章から独立させたカード) */
.present-solo {
  max-width: 860px;
  margin-inline: auto;
}