:root {
  --color-bg: #f5f3ed;
  --color-surface: #fff;
  --color-surface-soft: #ecefe9;
  --color-text: #171b19;
  --color-text-muted: #626963;
  --color-accent: #276347;
  --color-accent-strong: #193f31;
  --color-accent-soft: #dfe9e1;
  --color-gojappe: #a63b32;
  --color-border: rgba(23, 27, 25, .14);
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4.5rem;
  --radius-sm: .5rem;
  --radius-md: .875rem;
  --radius-lg: 1.5rem;
  --content-width: 68.75rem;
  --content-width-wide: 76rem;

  /* Existing sections retain these aliases until their dedicated Phase 4 work. */
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --green: var(--color-accent);
  --green-dark: var(--color-accent-strong);
  --lime: #dceaa8;
  --cream: var(--color-bg);
  --sky: #e8eeeb;
  --white: var(--color-surface);
  --line: var(--color-border);
  --shadow: 0 12px 32px rgba(23, 27, 25, .08);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; color: var(--color-text); background: var(--color-bg); line-height: 1.75; overflow-wrap: anywhere; }
a { color: inherit; }
.site-header { height: 64px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: rgba(245,243,237,.94); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { font-size: 12px; letter-spacing: .08em; text-decoration: none; font-weight: 750; }
.brand span { color: var(--green); }

.hero { min-height: min(620px, calc(100svh - 64px)); padding: var(--space-xl) 20px; position: relative; overflow: hidden; display: grid; align-items: end; color: white; background: var(--color-accent-strong); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(118deg, #111815 0%, #193f31 62%, #275845 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; width: min(84vw, 470px); aspect-ratio: 1; right: -32%; top: -7%; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.025), 0 0 0 104px rgba(255,255,255,.018); }
.hero-inner { width: min(100%, var(--content-width-wide)); margin-inline: auto; }
.eyebrow, .section-kicker { font-weight: 750; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.hero .eyebrow { margin: 0 0 var(--space-md); color: #cedab7; }
.hero h1 { max-width: 900px; margin: 0 0 var(--space-lg); font-size: clamp(2rem, 9.5vw, 4.5rem); font-weight: 750; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.hero-story { max-width: 720px; margin: 0 0 var(--space-md); font-size: clamp(1.5rem, 6.6vw, 3rem); font-weight: 650; line-height: 1.32; letter-spacing: -.025em; color: white; }
.hero-copy { max-width: 600px; margin: 0 0 var(--space-xl); color: rgba(255,255,255,.72); font-size: clamp(.9375rem, 3.8vw, 1.0625rem); }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); }
.primary-action, .secondary-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 12px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; font-size: 13px; font-weight: 750; }
.primary-action { color: var(--color-text); background: #e5edc5; }
.secondary-action { color: white; border-color: rgba(255,255,255,.42); background: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #d5e78f; outline-offset: 3px; }

.section-shell { padding: var(--space-2xl) 20px; max-width: var(--content-width); margin: 0 auto; }
.section-kicker { color: var(--green); margin-bottom: 12px; }
h2 { font-size: clamp(28px, 7vw, 50px); line-height: 1.25; letter-spacing: -.04em; margin: 0 0 16px; }
.section-lead { color: var(--muted); max-width: 660px; margin: 0 0 34px; }

.course-intro { border-bottom: 1px solid var(--color-border); }
.editorial-label { margin-bottom: var(--space-lg); }
.course-intro-layout { display: grid; gap: var(--space-xl); }
.course-intro h2 { max-width: 720px; margin: 0; font-size: clamp(2rem, 9vw, 4.25rem); font-weight: 680; line-height: 1.14; text-wrap: balance; }
.course-intro-copy { max-width: 510px; padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.course-intro-copy p { margin: 0 0 var(--space-lg); color: var(--color-text-muted); font-size: 1rem; }
.course-intro-copy span { color: var(--color-accent); font-size: 10px; font-weight: 750; letter-spacing: .14em; }

.story-editorial { max-width: none; color: white; background: var(--color-text); }
.story-editorial > * { width: min(100%, var(--content-width)); margin-left: auto; margin-right: auto; }
.story-editorial .section-kicker { color: #cdd9b8; }
.story-editorial-layout { display: grid; gap: var(--space-xl); }
.story-editorial h2 { max-width: 700px; margin-bottom: var(--space-lg); font-size: clamp(2rem, 8vw, 3.75rem); font-weight: 650; line-height: 1.22; }
.story-summary { max-width: 680px; margin: 0; color: rgba(255,255,255,.68); font-size: .9375rem; }
.story-fact-list { margin: 0; border-top: 1px solid rgba(255,255,255,.22); }
.story-fact-list div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-md); padding: var(--space-lg) 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.story-fact-list dt { padding-top: 3px; color: #cdd9b8; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.story-fact-list dd { margin: 0; font-size: clamp(1.125rem, 5vw, 1.625rem); font-weight: 650; line-height: 1.35; }

.watch { max-width: none; background: white; }
.watch > * { max-width: 1060px; margin-left: auto; margin-right: auto; }
.part-list { border-top: 1px solid var(--color-border); }
.challenge-part { padding: 2rem 0; border-bottom: 1px solid var(--color-border); }
.part-header { display: flex; align-items: baseline; justify-content: flex-start; gap: .65rem; margin-bottom: var(--space-md); }
.part-header span { color: var(--color-accent); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; }
.part-header span::after { content: "｜"; margin-left: .65rem; color: var(--color-border); font-weight: 400; }
.part-header strong { color: var(--color-text-muted); font-size: .875rem; font-weight: 650; }
.part-content { display: grid; gap: var(--space-md); }
.part-video-link { display: block; align-self: start; }
.thumbnail-frame { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(145deg, #285f43, #86ad78); }
.thumbnail-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: white; text-align: center; }
.thumbnail-fallback span { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.thumbnail-fallback b { padding: 0 12px; font-size: 11px; }
.video-thumbnail { width: 100%; height: 100%; display: block; position: relative; z-index: 1; object-fit: cover; transition: transform .25s ease; }
.thumbnail-error .thumbnail-play { display: none; }
.part-video-link:hover .video-thumbnail, .other-thumbnail-link:hover .video-thumbnail { transform: scale(1.025); }
.thumbnail-play { width: 46px; height: 46px; display: grid; place-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; color: white; background: rgba(19,101,63,.9); box-shadow: 0 5px 20px rgba(0,0,0,.22); font-size: 14px; }
.featured-type { display: block; color: var(--green); font-size: .6875rem; font-weight: 800; letter-spacing: .13em; }
.part-display-title { margin: var(--space-xs) 0 var(--space-sm); font-size: clamp(1.25rem, 5.5vw, 1.625rem); font-weight: 680; line-height: 1.38; letter-spacing: -.02em; }
.part-youtube-title { max-width: 46rem; margin: 0 0 var(--space-md); color: var(--color-text-muted); font-size: .75rem; line-height: 1.65; }
.video-link, .short-link { min-height: 48px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--green); color: white; text-decoration: none; font-size: 12px; font-weight: 800; }
.short-link { background: white; color: var(--green-dark); border: 1px solid var(--line); }
.play-dot { font-size: 9px; }
details { width: 100%; }
.part-holes { margin-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.part-hole { min-width: 0; scroll-margin-top: 80px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.part-hole h3 { margin: 0; color: var(--color-accent-strong); font-size: 13px; line-height: 1; }
.part-hole h3 span { margin-right: 2px; font-size: 26px; font-weight: 700; }
.shorts-drawer { margin-top: var(--space-sm); }
.shorts-drawer summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--green); font-size: 12px; font-weight: 700; padding: 10px 0; list-style: none; }
.shorts-drawer summary b { font-weight: 800; }
.shorts-drawer summary::-webkit-details-marker { display: none; }
.short-list { display: grid; gap: 9px; padding: 0 0 var(--space-sm); }
.short-item { min-width: 0; display: grid; grid-template-columns: minmax(80px, 96px) minmax(0, 1fr); gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-size: 11px; line-height: 1.45; }
.short-thumbnail { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); }
.muted { color: #96a098; font-size: 12px; }
.story-progress { max-width: 520px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 9px; margin: 55px auto 0; color: var(--green); font-size: 11px; font-weight: 900; }
.story-progress i { height: 2px; background: linear-gradient(90deg, var(--green), var(--lime)); }
.story-progress strong { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--ink); }
.challenge-ended { text-align: center; padding: 15px 0 0; }
.end-line { width: 2px; height: 52px; background: var(--green); margin: 0 auto 18px; }
.end-kicker { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .18em; margin-bottom: 7px; }
.challenge-ended strong { display: block; font-size: clamp(29px, 7vw, 48px); line-height: 1.3; letter-spacing: -.03em; }
.challenge-ended p { max-width: 610px; margin: 17px auto; color: var(--muted); }
.ended-holes { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ended-holes span { padding: 8px 12px; border-radius: 999px; background: #e9ece8; color: #89918c; text-decoration: line-through; font-size: 12px; }

.other { max-width: none; background: var(--sky); }
.other > * { max-width: 1060px; margin-left: auto; margin-right: auto; }
.other-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.other-card { overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.88); border: 1px solid rgba(23,49,38,.08); }
.other-thumbnail-link { display: block; }
.other-card-body { padding: 16px; }
.other-card h3 { min-height: 4.5em; display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.5; margin: 10px 0 13px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tag { display: inline-block; padding: 4px 8px; color: var(--green); background: #e5f3e8; border-radius: 999px; font-size: 10px; font-weight: 900; }
.video-meta { font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.journey-copy { text-align: center; padding-bottom: 25px; }
.journey-copy span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.journey-copy p { max-width: 580px; margin: 0 auto; color: var(--muted); }
.plans { max-width: 980px; }
.conversion-block { text-align: center; }
.conversion-block h2 { margin: 0; font-size: clamp(24px, 4vw, 38px); line-height: 1.3; }
.conversion-copy { max-width: 610px; margin: 14px auto 0; color: var(--muted); }
.conversion-action { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; margin: 28px auto 0; padding: 13px 24px; border-radius: 999px; color: white; background: var(--green); text-decoration: none; font-size: 14px; font-weight: 900; }
.conversion-action-disabled { color: #78817b; background: #d6dbd7; }
.course-discovery-placeholder { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.course-discovery-placeholder > p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.course-discovery-options { display: grid; gap: 8px; }
.course-discovery-options > span { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border: 1px solid var(--line); color: #6f7973; background: rgba(255,255,255,.55); text-align: left; font-size: 12px; font-weight: 750; }
.course-discovery-options small { color: #929a95; font-size: 8px; letter-spacing: .12em; }
.manga-label { margin-bottom: 10px; color: #9f231f; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.manga-prologue { max-width: none; color: #17130f; background: #e9dfcf; }
.manga-prologue > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.manga-prologue h2 { font-family: Georgia, "Yu Mincho", serif; font-size: clamp(34px, 7vw, 64px); }
.prologue-lead { margin: 0 auto 28px; max-width: 800px; font-family: Georgia, "Yu Mincho", serif; font-weight: 700; }
.prologue-grid { display: grid; gap: 8px; }
.prologue-panel { display: grid; min-width: 0; overflow: hidden; border: 2px solid #211b16; background: #f2eadf; }
.prologue-panel img { width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: cover; filter: contrast(1.04) saturate(.82); }
.prologue-panel-copy { padding: 16px; border-top: 2px solid #211b16; }
.prologue-panel-copy > span { float: left; margin: 0 9px 4px 0; padding: 1px 7px; color: white; background: #9f231f; font-size: 15px; font-weight: 900; }
.prologue-panel h3 { margin: 0 0 10px; font-family: Georgia, "Yu Mincho", serif; font-size: 20px; line-height: 1.25; }
.prologue-panel p { clear: both; margin: 0; font-size: 12px; line-height: 1.75; }
.prologue-panel blockquote { margin: 13px 0 0; padding: 9px 12px; border: 1px solid #211b16; border-radius: 50%; background: white; text-align: center; font-size: 12px; font-weight: 800; }
.prologue-panel:nth-child(3) blockquote { border: 0; border-radius: 0; color: #9f231f; background: transparent; font-family: Georgia, serif; font-size: 25px; }
.watch { color: #181410; background: #eee4d5; }
.challenge-part[data-layout="manga"] { display: grid; gap: 8px; padding: 8px 0; border-bottom: 2px solid #211b16; }
.chapter-story, .part-feature { min-width: 0; border: 2px solid #211b16; background: #f4ede3; }
.chapter-story img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; filter: contrast(1.05) saturate(.78); }
.chapter-story-copy, .part-feature-copy { padding: 17px; }
.chapter-story-copy > span, .part-feature-copy > span { color: #a3201c; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.chapter-story h3, .part-feature h3 { margin: 5px 0 10px; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(23px, 4vw, 34px); line-height: 1.25; }
.chapter-story p, .part-feature p { margin: 0; font-size: 13px; line-height: 1.75; }
.part-feature .part-video-link { margin: 0 15px; border: 1px solid #211b16; }
.part-feature .part-details { padding: 13px 15px 17px; }
.part-feature .part-youtube-title { margin-bottom: 12px; font-size: 11px; }
.part-feature .video-link { background: #a3201c; }
.part-feature .shorts-drawer { margin-top: 12px; border-top: 1px solid rgba(33,27,22,.25); }
.hole-anchor { display: block; position: relative; top: -78px; visibility: hidden; }
.reservation { margin-top: 65px; margin-bottom: 65px; text-align: center; border-radius: 30px; background: linear-gradient(145deg, #fff 0%, #ebf4df 100%); box-shadow: var(--shadow); }
.reservation p { color: var(--muted); }
.reservation > a { display: inline-flex; align-items: center; gap: 14px; margin: 20px auto 0; padding: 13px 22px; border-radius: 999px; background: var(--green); color: white; text-decoration: none; font-size: 13px; font-weight: 900; }
footer { padding: 42px 20px; text-align: center; background: var(--ink); color: white; }
footer p { margin: 8px auto; color: rgba(255,255,255,.66); font-size: 12px; }
.rakuten-credit { margin-top: 18px; }
.rakuten-credit a { color: rgba(255,255,255,.78); font-size: 11px; }

@media (min-width: 700px) {
  .site-header { padding-left: 38px; padding-right: 38px; }
  .hero { min-height: 600px; padding: 58px 40px; }
  .hero-actions { flex-direction: row; align-items: center; }
  .primary-action, .secondary-action { min-width: 210px; }
  .course-intro-layout { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: end; }
  .course-intro-copy { padding-top: 0; padding-left: var(--space-xl); border-top: 0; border-left: 1px solid var(--color-border); }
  .story-editorial-layout { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: end; }
  .part-content { grid-template-columns: minmax(0, 38%) minmax(0, 62%); gap: 30px; align-items: start; }
  .challenge-part { padding: 30px 0; }
  .part-header { margin-bottom: 16px; }
  .part-header span { font-size: .875rem; }
  .part-header strong { font-size: .9375rem; }
  .featured-type { font-size: .75rem; }
  .part-display-title { margin-bottom: 7px; font-size: 1.4375rem; }
  .part-youtube-title { margin-bottom: 12px; font-size: .75rem; line-height: 1.55; }
  .part-holes { margin-top: 18px; }
  .part-hole { display: grid; grid-template-columns: minmax(58px, 82px) minmax(0, 1fr); align-items: center; padding: 4px 0; }
  .part-hole h3 span { font-size: 23px; }
  .shorts-drawer { margin-top: 0; }
  .shorts-drawer summary { padding: 0 2px; }
  .short-list { grid-column: 1 / -1; padding-top: 6px; }
  .other-grid { grid-template-columns: repeat(2, 1fr); }
  .course-discovery-options { grid-template-columns: 1fr 1fr; }
  .prologue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .challenge-part[data-layout="manga"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .section-shell { padding-top: 78px; padding-bottom: 78px; }
  .watch.section-shell { padding-top: 72px; }
}

@media (min-width: 1020px) {
  .hero { min-height: 610px; padding-top: 70px; padding-bottom: 66px; }
  .hero h1 { max-width: 980px; }
  .hero-story { max-width: 760px; }
  .part-content { grid-template-columns: minmax(0, 36%) minmax(0, 64%); gap: 36px; }
  .other-grid { grid-template-columns: repeat(3, 1fr); }
  .prologue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ==========================================================
   Phase 4.5.1
   Story Flow Compression + Early Booking CTA
   ========================================================== */

.early-booking-strip {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 26px;
  display: flex;
  justify-content: center;
}

.early-booking-action {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #a3201c;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(100, 24, 20, .16);
  transition: transform .16s ease, background .16s ease;
}

.early-booking-action:hover {
  transform: translateY(-1px);
  background: #861b18;
}

.early-booking-action-disabled {
  background: #b9b2aa;
  box-shadow: none;
  cursor: default;
}


/* Each CHAPTER + YouTube PART is one episode */
.challenge-part[data-layout="manga"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding: 22px 0;
}

.challenge-part[data-layout="manga"] > .chapter-story,
.challenge-part[data-layout="manga"] > .part-feature {
  align-self: start;
  height: auto;
}

.chapter-story,
.part-feature {
  min-height: 0;
}

.chapter-story-copy,
.part-feature-copy {
  padding: 14px 15px;
}

.chapter-story h3,
.part-feature h3 {
  margin-top: 4px;
  margin-bottom: 8px;
}

.chapter-story p,
.part-feature p {
  line-height: 1.65;
}

.part-feature .part-video-link {
  margin: 0 14px;
}

.part-feature .part-details {
  padding: 11px 14px 14px;
}

.part-feature .shorts-drawer {
  margin-top: 10px;
}

/* Compress the story section so every episode reads as a single unit. */
.watch .part-list {
  margin-top: 28px;
}

.watch .story-progress {
  margin-top: 36px;
}


@media (min-width: 700px) {
  .early-booking-strip {
    justify-content: flex-end;
    margin-top: 8px;
    margin-bottom: 30px;
  }

  .early-booking-action {
    min-height: 48px;
    padding: 11px 20px;
  }

  .challenge-part[data-layout="manga"] {
    grid-template-columns: minmax(0, 47%) minmax(0, 53%);
    gap: 14px;
    align-items: start;
    padding: 22px 0;
  }

  .chapter-story,
  .part-feature {
    align-self: start;
  }

  .chapter-story img {
    aspect-ratio: 16 / 9;
  }
}


@media (min-width: 1020px) {
  .challenge-part[data-layout="manga"] {
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    gap: 16px;
    padding: 24px 0;
  }

  .chapter-story-copy,
  .part-feature-copy {
    padding: 15px 17px;
  }
}



/* ==========================================================
   Phase 4.5.1b
   Episode alignment fix + expanded early booking CTA
   ========================================================== */

/* EARLY BOOKING CTA */
.early-booking-strip {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 34px;
  display: flex;
  justify-content: center;
}

.early-booking-action {
  width: auto;
  max-width: 100%;
  min-height: 56px;
  padding: 15px 30px;
  border-radius: 18px;
  white-space: normal;
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.45;
  font-weight: 900;
  background: #b4201b;
  color: #fff;
  box-shadow: 0 9px 24px rgba(116, 23, 18, .16);
}

.early-booking-action:hover {
  background: #941b17;
}


/* ----------------------------------------------------------
   STORY EPISODES
   CHAPTER と PART を必ず同じ1行として扱う
   ---------------------------------------------------------- */

.watch .part-list {
  display: block;
  width: 100%;
  margin-top: 24px;
}

.challenge-part[data-layout="manga"] {
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-bottom: 2px solid #211b16;
}

/* 古い配置指定が残っていても無効化 */
.challenge-part[data-layout="manga"] > .chapter-story,
.challenge-part[data-layout="manga"] > .part-feature {
  position: static !important;
  float: none !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
}

.chapter-story,
.part-feature {
  overflow: hidden;
}

.chapter-story img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.chapter-story-copy,
.part-feature-copy {
  padding: 14px 16px;
}

.chapter-story h3,
.part-feature h3 {
  margin: 5px 0 8px;
}

.chapter-story p,
.part-feature p {
  line-height: 1.6;
}

/* PART側を少しコンパクトに */
.part-feature .part-video-link {
  margin: 0 14px;
}

.part-feature .part-details {
  padding: 10px 14px 13px;
}

.part-feature .part-youtube-title {
  margin-bottom: 9px;
}

.part-feature .shorts-drawer {
  margin-top: 8px;
}


/* tablet / desktop */
@media (min-width: 700px) {
  .early-booking-strip {
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 38px;
  }

  .early-booking-action {
    padding-left: 36px;
    padding-right: 36px;
  }

  .challenge-part[data-layout="manga"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }

  .challenge-part[data-layout="manga"] > .chapter-story {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .challenge-part[data-layout="manga"] > .part-feature {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}


/* large desktop */
@media (min-width: 1020px) {
  .early-booking-action {
    min-height: 64px;
    padding: 16px 42px;
    font-size: clamp(16px, 1.35vw, 20px);
  }

  .challenge-part[data-layout="manga"] {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
    gap: 14px !important;
    padding: 12px 0 !important;
  }
}



/* ==========================================================
   Phase 4.5.2
   Slim Hero + Balanced Manga / YouTube Episodes
   ========================================================== */

/* ----------------------------------------------------------
   HERO + THE COURSE を1つに統合
   ---------------------------------------------------------- */

.hero {
  min-height: auto !important;
}

.hero-inner {
  padding-top: 18px;
  padding-bottom: 16px;
}

.hero-format {
  margin: 12px 0 0;
  color: #dfe8b6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
}

.hero .hero-actions {
  margin-top: 24px;
}

/* early booking をHERO内の第二導線として配置 */
.hero .early-booking-strip {
  width: 100%;
  margin: 20px 0 0;
  justify-content: flex-start;
}

.hero .early-booking-action {
  max-width: 850px;
  min-height: 58px;
  margin: 0;
  padding: 14px 28px;
  border-radius: 18px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.4;
}

/* 旧THE COURSEの余白を残さない */
.course-intro {
  display: none !important;
}


/* ----------------------------------------------------------
   STORY sectionを少し締める
   ---------------------------------------------------------- */

.watch.section-shell {
  padding-top: 50px;
  padding-bottom: 56px;
}

.watch .part-list {
  margin-top: 24px;
}


/* ----------------------------------------------------------
   CHAPTER + PART = 1 EPISODE
   ---------------------------------------------------------- */

.challenge-part[data-layout="manga"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100%;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 2px solid #211b16;
}

.challenge-part[data-layout="manga"] > .chapter-story,
.challenge-part[data-layout="manga"] > .part-feature {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  align-self: stretch !important;
  box-sizing: border-box;
}

/* 左右の画像の見た目を同じ比率へ */
.chapter-story img,
.part-feature .thumbnail-frame,
.part-feature .thumbnail-frame img,
.part-feature .video-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
}

/* 漫画画像 */
.chapter-story img {
  flex: 0 0 auto;
  display: block;
}

/* YouTube画像 */
.part-feature .part-video-link {
  display: block;
  margin: 0 14px;
}

.part-feature .thumbnail-frame {
  display: block;
  overflow: hidden;
}

/* 文章領域 */
.chapter-story-copy,
.part-feature-copy {
  padding: 14px 16px;
}

.chapter-story-copy {
  flex: 1 1 auto;
}

.chapter-story-copy > span,
.part-feature-copy > span {
  font-size: 12px;
}

.chapter-story h3,
.part-feature h3 {
  margin: 5px 0 8px;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.25;
}

.chapter-story p,
.part-feature p {
  font-size: 12px;
  line-height: 1.65;
}

/* YouTube側の冗長な正式タイトルは画面上では非表示 */
.part-feature .part-youtube-title {
  display: none;
}

/* CTA / Shortsはカード下部にコンパクトにまとめる */
.part-feature .part-details {
  margin-top: auto;
  padding: 11px 14px 13px;
}

.part-feature .video-link {
  min-height: 46px;
  padding: 10px 17px;
}

.part-feature .shorts-drawer {
  margin-top: 10px;
  padding-top: 9px;
}

/* 旧指定を上書き */
.challenge-part[data-layout="manga"] > .chapter-story {
  grid-column: auto !important;
  grid-row: auto !important;
}

.challenge-part[data-layout="manga"] > .part-feature {
  grid-column: auto !important;
  grid-row: auto !important;
}


/* ----------------------------------------------------------
   Tablet / PC
   ---------------------------------------------------------- */

@media (min-width: 700px) {
  .hero {
    min-height: auto !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .hero .early-booking-strip {
    justify-content: flex-start;
    margin: 22px 0 0;
  }

  .challenge-part[data-layout="manga"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 12px 0 !important;
  }

  .challenge-part[data-layout="manga"] > .chapter-story {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .challenge-part[data-layout="manga"] > .part-feature {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}


/* ----------------------------------------------------------
   Large PC
   ---------------------------------------------------------- */

@media (min-width: 1020px) {
  .hero {
    min-height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .hero-inner {
    max-width: 1180px;
  }

  .hero h1 {
    margin-bottom: 22px;
  }

  .hero-story {
    margin-top: 14px;
  }

  .challenge-part[data-layout="manga"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px 0 !important;
  }

  .chapter-story-copy,
  .part-feature-copy {
    padding: 15px 17px;
  }
}



/* ==========================================================
   Manga Hero C
   GOJAPPE-first compact hero
   ========================================================== */

.hero.hero-manga {
  position: relative;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  color: #fff;
  background: #24462f;
}

.hero-manga-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-manga-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(20, 50, 31, .97) 0%,
      rgba(20, 50, 31, .91) 32%,
      rgba(20, 50, 31, .52) 55%,
      rgba(20, 50, 31, .10) 78%,
      rgba(20, 50, 31, .04) 100%
    );
}

.hero-manga-visual img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hero-manga-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 32px));
  min-height: 430px;
  margin: 0 auto;
  padding: 48px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-manga-copy {
  max-width: 620px;
}

.hero-manga .eyebrow {
  margin-bottom: 12px;
  color: #d9e89c;
}

.hero-manga h1 {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}

.hero-manga .hero-story {
  margin: 18px 0 0;
  color: #fff;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.35;
}

.hero-manga .hero-copy {
  margin: 11px 0 0;
  color: rgba(255,255,255,.87);
  font-size: 14px;
  line-height: 1.65;
}

.hero-manga .hero-format {
  margin: 14px 0 0;
  color: #d9e89c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.hero-manga-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
}

.hero-manga .primary-action {
  min-width: 180px;
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.32);
  background: #2f603d;
  box-shadow: none;
}

.hero-manga .primary-action:hover {
  background: #397149;
}

/* HERO内の早期予約CTA */
.hero-manga .early-booking-strip {
  width: auto !important;
  margin: 0 !important;
  display: block;
}

.hero-manga .early-booking-action {
  width: auto;
  max-width: min(620px, 100%);
  min-height: 52px;
  margin: 0;
  padding: 13px 22px;
  border-radius: 12px;
  background: #b52a24;
  color: #fff;
  box-shadow: 0 7px 20px rgba(60, 8, 5, .22);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 900;
}

.hero-manga .early-booking-action:hover {
  background: #98211c;
}

/* HERO直後にPROLOGUEへつなげる */
.hero.hero-manga + #challenge .manga-prologue {
  margin-top: 0;
}


/* ==========================================================
   Mobile Manga Hero
   ========================================================== */

@media (max-width: 699px) {
  .hero-manga-visual {
    position: relative;
    height: 250px;
  }

  .hero-manga-visual::after {
    background: linear-gradient(
      0deg,
      rgba(25, 56, 35, .88) 0%,
      rgba(25, 56, 35, .18) 55%,
      rgba(25, 56, 35, .04) 100%
    );
  }

  .hero-manga-visual img {
    min-height: 0;
    height: 250px;
    object-position: center 35%;
  }

  .hero-manga-inner {
    min-height: 0;
    width: 100%;
    padding: 28px 20px 30px;
    background: #24462f;
  }

  .hero-manga h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .hero-manga .hero-story {
    font-size: 21px;
  }

  .hero-manga-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-manga .primary-action,
  .hero-manga .early-booking-strip,
  .hero-manga .early-booking-action {
    width: 100% !important;
    max-width: none;
  }
}


/* ==========================================================
   Desktop Manga Hero
   ========================================================== */

@media (min-width: 700px) {
  .hero.hero-manga {
    min-height: 470px !important;
  }

  .hero-manga-visual img {
    min-height: 470px;
    object-position: center 37%;
  }

  .hero-manga-inner {
    min-height: 470px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (min-width: 1020px) {
  .hero.hero-manga {
    min-height: 500px !important;
  }

  .hero-manga-visual img {
    min-height: 500px;
  }

  .hero-manga-inner {
    min-height: 500px;
  }
}



/* ==========================================================
   Phase 4.5.3
   C-style GOJAPPE Manga Hero Final
   ========================================================== */

.hero.hero-manga {
  position: relative;
  min-height: 430px !important;
  overflow: hidden;
  padding: 0 !important;
  color: #163d28;
  background:
    linear-gradient(105deg, #f4efe4 0%, #f4efe4 47%, #e8eadb 47%, #e8eadb 100%);
  border-bottom: 1px solid rgba(32, 45, 33, .18);
}

/* 右側の3人イラスト */
.hero-manga-visual {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto !important;
  width: 55%;
  height: 100%;
  overflow: hidden;
  background: #dfe8d4;
}

/* 以前の暗いオーバーレイを完全に解除 */
.hero-manga-visual::after {
  display: none !important;
}

.hero-manga-visual img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* 左側のHTML情報 */
.hero-manga-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  min-height: 430px !important;
  margin: 0 auto;
  padding: 42px 0 38px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent !important;
}

.hero-manga-copy {
  width: 43%;
  max-width: 560px;
}

.hero-manga .eyebrow {
  margin: 0 0 12px;
  color: #296246;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
}

.hero-manga h1 {
  max-width: 560px;
  margin: 0;
  color: #153c28;
  font-family: inherit;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -.05em;
  text-shadow: none !important;
}

.hero-manga .hero-story {
  margin: 18px 0 0;
  color: #234e36;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.35;
}

.hero-manga .hero-copy {
  margin: 10px 0 0;
  color: #53675a;
  font-size: 13px;
  line-height: 1.65;
}

.hero-manga .hero-format {
  margin: 13px 0 0;
  color: #296246;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
}

/* CTAを左エリアにまとめる */
.hero-manga-actions {
  width: 43%;
  max-width: 560px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.hero-manga .primary-action {
  min-width: 170px;
  min-height: 50px;
  margin: 0;
  padding: 11px 18px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: #245a3b;
  box-shadow: none;
}

.hero-manga .primary-action:hover {
  background: #1c4930;
}

/* 楽天GORA */
.hero-manga .early-booking-strip {
  width: 100% !important;
  margin: 0 !important;
  display: block;
}

.hero-manga .early-booking-action {
  width: 100% !important;
  max-width: none !important;
  min-height: 54px;
  margin: 0;
  padding: 13px 18px;
  border-radius: 12px;
  color: #fff;
  background: #c72b24;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 900;
  text-align: left;
}

.hero-manga .early-booking-action:hover {
  background: #a8231e;
}

/* HEROとPROLOGUEを完全分離 */
.hero.hero-manga + #challenge {
  position: relative;
  z-index: 1;
  clear: both;
}

.hero.hero-manga + #challenge .manga-prologue {
  margin-top: 0 !important;
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 699px) {
  .hero.hero-manga {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    background: #f4efe4;
  }

  .hero-manga-visual {
    position: relative !important;
    order: 1;
    width: 100%;
    height: 270px;
  }

  .hero-manga-visual img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    object-position: center 32%;
  }

  .hero-manga-inner {
    order: 2;
    width: 100%;
    min-height: 0 !important;
    padding: 28px 20px 30px !important;
  }

  .hero-manga-copy,
  .hero-manga-actions {
    width: 100%;
    max-width: none;
  }

  .hero-manga h1 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .hero-manga .hero-story {
    font-size: 20px;
  }

  .hero-manga-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-manga .primary-action,
  .hero-manga .early-booking-action {
    width: 100% !important;
  }
}


/* ==========================================================
   Large desktop
   ========================================================== */

@media (min-width: 1020px) {
  .hero.hero-manga {
    min-height: 450px !important;
  }

  .hero-manga-inner {
    min-height: 450px !important;
  }

  .hero-manga-visual {
    width: 57%;
  }

  .hero-manga-copy,
  .hero-manga-actions {
    width: 41%;
  }
}



/* ==========================================================
   Phase 4.5.4
   C-plan unified manga banner hero
   ========================================================== */

.hero-banner-c {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: 0;
  background: #dce8cf;
  border-bottom: 1px solid rgba(27, 63, 38, .18);
}

.hero-banner-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.75), transparent 28%),
    linear-gradient(180deg, #d7edf4 0%, #edf1d8 42%, #82a85e 100%);
}

.hero-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(245,240,224,.96) 0%, rgba(245,240,224,.90) 30%, rgba(245,240,224,.26) 52%, rgba(245,240,224,.04) 100%),
    repeating-linear-gradient(
      -14deg,
      rgba(25,59,37,.035) 0,
      rgba(25,59,37,.035) 1px,
      transparent 1px,
      transparent 8px
    );
}

.hero-banner-inner {
  position: relative;
  z-index: 2;
  width: min(1220px, calc(100% - 40px));
  min-height: 430px;
  margin: 0 auto;
}

.hero-banner-copy {
  position: absolute;
  left: 0;
  top: 50%;
  width: 42%;
  transform: translateY(-54%);
  z-index: 3;
}

.hero-banner-copy .eyebrow {
  margin: 0 0 10px;
  color: #285f42;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

.hero-banner-copy h1 {
  margin: 0;
  color: #173c28;
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: .98;
  letter-spacing: -.05em;
}

.hero-banner-copy .hero-story {
  margin: 16px 0 0;
  color: #214d34;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 800;
  line-height: 1.25;
}

.hero-banner-copy .hero-copy {
  margin: 5px 0 0;
  color: #445c4c;
  font-size: 13px;
  font-weight: 700;
}

.hero-banner-copy .hero-format {
  margin: 15px 0 0;
  color: #285f42;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.hero-banner-characters {
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero-banner-characters img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
  mix-blend-mode: multiply;
}

.hero-banner-actions {
  position: absolute;
  right: 0;
  top: 50%;
  width: 20%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 4;
}

.hero-challenge-action {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 14px;
  background: #24573a;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(22,60,38,.16);
}

.hero-challenge-action:hover {
  background: #1d4930;
}

.hero-banner-c .early-booking-strip {
  width: 100% !important;
  margin: 0 !important;
  display: block;
}

.hero-banner-c .early-booking-action {
  width: 100% !important;
  max-width: none !important;
  min-height: 64px;
  margin: 0;
  padding: 13px 16px;
  border-radius: 14px;
  background: #c62c24;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 20px rgba(95,22,18,.16);
}

.hero-banner-c .early-booking-action:hover {
  background: #a9241e;
}

/* PROLOGUE starts as a separate section */
.hero-banner-c + #challenge {
  position: relative;
  z-index: 1;
  clear: both;
}

.hero-banner-c + #challenge .manga-prologue {
  margin-top: 0 !important;
}


/* Mobile */
@media (max-width: 699px) {
  .hero-banner-c {
    min-height: 0;
    background: #f3eddf;
  }

  .hero-banner-inner {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .hero-banner-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    padding: 28px 20px 18px;
    order: 1;
  }

  .hero-banner-copy h1 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .hero-banner-copy .hero-story {
    font-size: 21px;
  }

  .hero-banner-characters {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 280px;
    order: 2;
  }

  .hero-banner-characters img {
    object-position: center 22%;
    mix-blend-mode: normal;
  }

  .hero-banner-actions {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    transform: none;
    order: 3;
    padding: 18px 20px 26px;
  }
}


/* Desktop */
@media (min-width: 700px) {
  .hero-banner-c {
    min-height: 450px;
  }

  .hero-banner-inner {
    min-height: 450px;
  }
}

@media (min-width: 1180px) {
  .hero-banner-c {
    min-height: 470px;
  }

  .hero-banner-inner {
    min-height: 470px;
  }

  .hero-banner-copy {
    width: 40%;
  }

  .hero-banner-characters {
    right: 9%;
    width: 52%;
  }

  .hero-banner-actions {
    width: 18%;
  }
}


/* ==========================================================
   Phase 4.5.4b
   C-plan hero — full bleed correction
   ========================================================== */

.hero-banner-c {
  position: relative;
  min-height: 440px !important;
  overflow: hidden;
  padding: 0 !important;
  background: #e9ecd9 !important;
}

/* 3人＋ゴルフ場画像を「箱」ではなくHERO全面へ */
.hero-banner-characters {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  z-index: 0;
}

.hero-banner-characters img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 64% 38% !important;
  mix-blend-mode: normal !important;
}

/* C案の左側を作るクリームのフェード */
.hero-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(247,242,226,.99) 0%,
      rgba(247,242,226,.97) 24%,
      rgba(247,242,226,.86) 37%,
      rgba(247,242,226,.35) 49%,
      rgba(247,242,226,.05) 62%,
      rgba(247,242,226,0) 72%
    ) !important;
}

.hero-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(222,235,195,.10)
    ) !important;
}

/* HERO内部 */
.hero-banner-inner {
  position: relative;
  z-index: 2;
  width: min(1260px, calc(100% - 48px));
  min-height: 440px !important;
  margin: 0 auto;
}

/* 左側コピー */
.hero-banner-copy {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 41% !important;
  max-width: 560px;
  transform: translateY(-52%) !important;
  z-index: 3;
}

.hero-banner-copy .eyebrow {
  color: #275c40 !important;
}

.hero-banner-copy h1 {
  color: #173d29 !important;
  font-size: clamp(42px, 4.8vw, 70px) !important;
  line-height: .98 !important;
}

.hero-banner-copy .hero-story {
  color: #214b34 !important;
  font-size: clamp(21px, 2.15vw, 31px) !important;
}

.hero-banner-copy .hero-copy {
  color: #445d4d !important;
}

.hero-banner-copy .hero-format {
  color: #275c40 !important;
}

/* 右側CTA */
.hero-banner-actions {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 215px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 4;
}

.hero-challenge-action {
  min-height: 56px !important;
  border-radius: 14px !important;
  background: #24583b !important;
  color: #fff !important;
  font-size: 14px !important;
}

.hero-banner-c .early-booking-strip {
  width: 100% !important;
  margin: 0 !important;
}

.hero-banner-c .early-booking-action {
  width: 100% !important;
  min-height: 72px !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
  background: #c72b24 !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* HERO終了後は完全にPROLOGUEへ */
.hero-banner-c + #challenge {
  position: relative;
  z-index: 5;
  clear: both;
}

.hero-banner-c + #challenge .manga-prologue {
  margin-top: 0 !important;
}

/* モバイルは無理に横構成にしない */
@media (max-width: 699px) {
  .hero-banner-c {
    min-height: 0 !important;
    background: #f5f0e3 !important;
  }

  .hero-banner-inner {
    width: 100%;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .hero-banner-characters {
    position: relative !important;
    order: 1;
    width: 100% !important;
    height: 270px !important;
  }

  .hero-banner-characters img {
    height: 270px !important;
    object-position: center 30% !important;
  }

  .hero-banner-bg {
    display: none !important;
  }

  .hero-banner-copy {
    position: relative !important;
    order: 2;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none;
    transform: none !important;
    padding: 25px 20px 16px;
    background: #f5f0e3;
  }

  .hero-banner-copy h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  .hero-banner-actions {
    position: relative !important;
    order: 3;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    padding: 0 20px 28px;
    background: #f5f0e3;
  }
}



/* ==========================================================
   Phase 4.5.5
   Final C-plan artwork hero
   ========================================================== */

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

.hero-final-art {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f3eddf;
}

/*
  完成画像にはPROLOGUEまで描かれているため、
  PCでは上側HERO部分だけを見せる。
*/
.hero-final-image {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: top center;
}

/*
  画像内のボタンの上に、実際のリンク領域だけ重ねる。
*/
.hero-final-actions {
  position: absolute;
  z-index: 5;
  top: 47%;
  right: 4.5%;
  width: min(250px, 18vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-final-challenge {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
  color: transparent;
  background: transparent;
  text-decoration: none;
}

.hero-final-art .early-booking-strip {
  width: 100% !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-action {
  display: block;
  width: 100% !important;
  min-height: 86px;
  padding: 0 !important;
  border-radius: 14px;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* HEROの直後から本物のPROLOGUE */
.hero-final-art + #challenge {
  clear: both;
}

.hero-final-art + #challenge .manga-prologue {
  margin-top: 0 !important;
}


/* Mobile */
@media (max-width: 699px) {
  .hero-final-image {
    height: auto;
    min-height: 0;
  }

  .hero-final-actions {
    position: static;
    width: auto;
    padding: 14px 18px 20px;
    background: #f3eddf;
  }

  .hero-final-challenge {
    min-height: 52px;
    color: #fff;
    background: #24583b;
    font-weight: 900;
  }

  .hero-final-art .early-booking-action {
    min-height: 58px;
    padding: 13px 16px !important;
    color: #fff !important;
    background: #c72b24 !important;
    text-align: center;
  }
}


/* ==========================================================
   Phase 4.5.7
   Remove duplicated mobile CTA block under hero artwork
   ========================================================== */

/*
  HERO完成画像内に
  ・この挑戦を見る
  ・楽天GORAで空き状況をチェック
  が既に描かれているため、
  モバイルでHTML側の追加CTAを再表示しない。
*/

@media (max-width: 699px) {
  .hero-final-actions {
    display: none !important;
  }

  .hero-final-art .early-booking-strip {
    display: none !important;
  }

  .hero-final-art .early-booking-action {
    display: none !important;
  }

  .hero-final-challenge {
    display: none !important;
  }
}


/* ==========================================================
   Phase 4.5.8
   Crop embedded prologue from final hero artwork
   ========================================================== */

/*
  hero-seve.png には下部にPROLOGUEまで描かれている。
  サイトではHTML版PROLOGUEを正式版として使うため、
  HERO部分だけを表示する。
*/

.hero-final-art {
  position: relative;
  width: 100%;
  overflow: hidden !important;
}

/* PC */
.hero-final-image {
  display: block;
  width: 100%;
  height: auto !important;
}

/* スマホでは画像全体を表示せず、HERO部分だけ切り出す */
@media (max-width: 699px) {
  .hero-final-art {
    height: auto !important;
    aspect-ratio: 2.43 / 1;
    overflow: hidden !important;
  }

  .hero-final-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
}

/* タブレット〜PCも画像内PROLOGUEを表示しない */
@media (min-width: 700px) {
  .hero-final-art {
    aspect-ratio: 2.43 / 1;
    overflow: hidden !important;
  }

  .hero-final-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
}


/* =========================================================
   HERO FINAL — finished artwork, no cropping
   hero-seve-final.png is already the complete hero artwork.
   ========================================================= */

.hero-final-art {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  clip-path: none !important;
  margin: 0 !important;
}

/* Buttons are already drawn into the artwork.
   Keep the HTML elements only as transparent click targets. */

.hero-final-actions {
  position: absolute !important;
  z-index: 5 !important;
  right: 1.1% !important;
  top: 60.5% !important;
  width: 23.5% !important;
  height: 36% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-challenge,
.hero-final-art .early-booking-strip,
.hero-final-art .early-booking-action {
  opacity: 0 !important;
}

.hero-final-challenge {
  display: block !important;
  width: 100% !important;
  height: 46% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-strip {
  display: block !important;
  width: 100% !important;
  height: 51% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-action {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* PROLOGUE starts normally after the finished hero image. */

.hero-final-art + #challenge {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 700px) {
  .hero-final-art {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-final-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .hero-final-actions {
    right: 1.1% !important;
    top: 60.5% !important;
    width: 23.5% !important;
    height: 36% !important;
  }
}


/* =========================================================
   HERO FINAL — finished artwork, no cropping
   hero-seve-final.png is already the complete hero artwork.
   ========================================================= */

.hero-final-art {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  clip-path: none !important;
  margin: 0 !important;
}

/* Buttons are already drawn into the artwork.
   Keep the HTML elements only as transparent click targets. */

.hero-final-actions {
  position: absolute !important;
  z-index: 5 !important;
  right: 1.1% !important;
  top: 60.5% !important;
  width: 23.5% !important;
  height: 36% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-challenge,
.hero-final-art .early-booking-strip,
.hero-final-art .early-booking-action {
  opacity: 0 !important;
}

.hero-final-challenge {
  display: block !important;
  width: 100% !important;
  height: 46% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-strip {
  display: block !important;
  width: 100% !important;
  height: 51% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-action {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* PROLOGUE starts normally after the finished hero image. */

.hero-final-art + #challenge {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 700px) {
  .hero-final-art {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-final-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .hero-final-actions {
    right: 1.1% !important;
    top: 60.5% !important;
    width: 23.5% !important;
    height: 36% !important;
  }
}


/* =========================================================
   HERO FINAL LOCK — desktop + mobile
   ========================================================= */

.hero-final-art {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f0e4 !important;
}

.hero-final-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Artwork already contains the visible buttons.
   These elements are click areas only. */

.hero-final-actions {
  position: absolute !important;
  z-index: 10 !important;
  right: 1.05% !important;
  top: 60.2% !important;
  width: 23.6% !important;
  height: 35.7% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3.5% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-challenge,
.hero-final-art .early-booking-strip,
.hero-final-art .early-booking-action {
  opacity: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-final-challenge {
  display: block !important;
  width: 100% !important;
  height: 46% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-strip {
  display: block !important;
  width: 100% !important;
  height: 50.5% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-action {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Finished hero connects directly to prologue */

.hero-final-art + #challenge {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   FINAL RESULT — no spoiler
   ========================================================= */

.challenge-ended-teaser {
  text-align: center;
}

.challenge-ended-teaser > strong {
  display: block;
  margin-top: 24px;
}

.challenge-ended-teaser p {
  margin-left: auto;
  margin-right: auto;
}

.final-watch-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin-top: 24px;
  padding: 0 30px;
  border-radius: 999px;
  background: #c9251c;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}

.final-watch-action:hover {
  transform: translateY(-2px);
  opacity: .92;
}

/* =========================================================
   MOBILE
   Keep hit areas aligned to buttons drawn into the artwork.
   Because both image and coordinates use percentages,
   they scale together.
   ========================================================= */

@media (max-width: 700px) {

  .hero-final-art {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .hero-final-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .hero-final-actions {
    right: 1.05% !important;
    top: 60.2% !important;
    width: 23.6% !important;
    height: 35.7% !important;
  }

  .challenge-ended-teaser > strong {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.25;
  }

  .challenge-ended-teaser p br {
    display: none;
  }

  .final-watch-action {
    width: min(100%, 360px);
    min-height: 58px;
    padding: 0 20px;
  }
}


/* =========================================================
   HERO FINAL LOCK — desktop + mobile
   ========================================================= */

.hero-final-art {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f0e4 !important;
}

.hero-final-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Artwork already contains the visible buttons.
   These elements are click areas only. */

.hero-final-actions {
  position: absolute !important;
  z-index: 10 !important;
  right: 1.05% !important;
  top: 60.2% !important;
  width: 23.6% !important;
  height: 35.7% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3.5% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-challenge,
.hero-final-art .early-booking-strip,
.hero-final-art .early-booking-action {
  opacity: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-final-challenge {
  display: block !important;
  width: 100% !important;
  height: 46% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-strip {
  display: block !important;
  width: 100% !important;
  height: 50.5% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-action {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Finished hero connects directly to prologue */

.hero-final-art + #challenge {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   FINAL RESULT — no spoiler
   ========================================================= */

.challenge-ended-teaser {
  text-align: center;
}

.challenge-ended-teaser > strong {
  display: block;
  margin-top: 24px;
}

.challenge-ended-teaser p {
  margin-left: auto;
  margin-right: auto;
}

.final-watch-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin-top: 24px;
  padding: 0 30px;
  border-radius: 999px;
  background: #c9251c;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}

.final-watch-action:hover {
  transform: translateY(-2px);
  opacity: .92;
}

/* =========================================================
   MOBILE
   Keep hit areas aligned to buttons drawn into the artwork.
   Because both image and coordinates use percentages,
   they scale together.
   ========================================================= */

@media (max-width: 700px) {

  .hero-final-art {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .hero-final-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .hero-final-actions {
    right: 1.05% !important;
    top: 60.2% !important;
    width: 23.6% !important;
    height: 35.7% !important;
  }

  .challenge-ended-teaser > strong {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.25;
  }

  .challenge-ended-teaser p br {
    display: none;
  }

  .final-watch-action {
    width: min(100%, 360px);
    min-height: 58px;
    padding: 0 20px;
  }
}


/* =========================================================
   Phase 4.5.9
   Final teaser + responsive hero click areas
   ========================================================= */

.challenge-ended-teaser {
  text-align: center;
}

.challenge-ended-teaser > strong {
  display: block;
  margin-top: 24px;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.25;
}

.challenge-ended-teaser p {
  max-width: 720px;
  margin: 24px auto 0;
}

.final-watch-action {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 0 30px;
  border-radius: 999px;
  background: #c9251c;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

/* PC：完成画像内の2ボタンを透明リンク化 */
@media (min-width: 701px) {
  .hero-final-actions {
    position: absolute !important;
    z-index: 10 !important;
    right: 1.05% !important;
    top: 60.2% !important;
    width: 23.6% !important;
    height: 35.7% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3.5% !important;
  }

  .hero-final-challenge,
  .hero-final-art .early-booking-strip,
  .hero-final-art .early-booking-action {
    opacity: 0 !important;
  }
}

/* スマホ：クリック領域を画像比率に追従 */
@media (max-width: 700px) {
  .hero-final-art {
    position: relative !important;
  }

  .hero-final-actions {
    position: absolute !important;
    z-index: 10 !important;
    right: 1.05% !important;
    top: 60.2% !important;
    width: 23.6% !important;
    height: 35.7% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3.5% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-final-challenge,
  .hero-final-art .early-booking-strip,
  .hero-final-art .early-booking-action {
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-final-challenge {
    display: block !important;
    width: 100% !important;
    height: 46% !important;
    min-height: 0 !important;
  }

  .hero-final-art .early-booking-strip {
    display: block !important;
    width: 100% !important;
    height: 50.5% !important;
    margin: 0 !important;
  }

  .hero-final-art .early-booking-action {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .challenge-ended-teaser > strong {
    font-size: 32px;
  }

  .challenge-ended-teaser p br {
    display: none;
  }

  .final-watch-action {
    width: min(100%, 360px);
    padding: 0 18px;
  }
}


/* =========================================================
   HERO FINAL FIX
   Keep the complete hero artwork visible on every screen size.
   ========================================================= */

.hero-final-art {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Transparent click targets stay on top of the buttons
   already drawn inside hero-seve-final.png */
.hero-final-actions {
  position: absolute !important;
  z-index: 10 !important;
  right: 1.05% !important;
  top: 60.2% !important;
  width: 23.6% !important;
  height: 35.7% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3.5% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-challenge,
.hero-final-art .early-booking-strip,
.hero-final-art .early-booking-action {
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-final-challenge {
  display: block !important;
  width: 100% !important;
  height: 46% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-strip {
  display: block !important;
  width: 100% !important;
  height: 50.5% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-final-art .early-booking-action {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  .hero-final-art {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-final-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}



/* =========================================================
   DISCOVERY PHASE 1 FINAL
   ========================================================= */

/* SEVE exit choices */

.course-discovery-options {
  display: grid;
  gap: 10px;
}

.course-discovery-link {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 17px;
  border: 1px solid rgba(54, 72, 61, .14);
  border-radius: 14px;
  color: #34463b;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.course-discovery-link span {
  display: grid;
  gap: 3px;
}

.course-discovery-link small {
  display: block;
  color: #738078;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.course-discovery-link b {
  font-size: 18px;
  font-weight: 700;
}

.discovery-link-cheap {
  background: #e5ede2;
}

.discovery-link-wide {
  background: #eee8da;
}

.course-discovery-link:hover {
  transform: translateY(-2px);
  border-color: rgba(54, 72, 61, .24);
  box-shadow: 0 8px 22px rgba(30, 45, 36, .08);
}


/* Discovery pages */

.discovery-page {
  background: #f5f1e7;
}

.discovery-hero {
  padding-top: 72px;
  padding-bottom: 52px;
  color: #26392f;
  background:
    linear-gradient(
      145deg,
      #f5f0e4 0%,
      #e9efdf 100%
    );
}

.discovery-hero h1 {
  max-width: 900px;
  margin: 8px 0 18px;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.discovery-hero > p {
  max-width: 720px;
  margin: 0;
  color: #65736a;
  font-size: 14px;
  line-height: 1.8;
}

.discovery-back {
  margin-top: 26px;
}

.discovery-back a {
  color: #516259;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.discovery-results {
  padding-top: 46px;
  padding-bottom: 80px;
}

.discovery-status {
  margin: 0 0 20px;
  color: #78827c;
  font-size: 11px;
}

.discovery-course-grid {
  display: grid;
  gap: 12px;
}

.discovery-course-card {
  display: grid;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(45, 63, 52, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
}

.discovery-course-card h2 {
  margin: 0;
  color: #273b30;
  font-size: clamp(18px, 4vw, 24px);
  line-height: 1.4;
}

.discovery-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.discovery-course-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef1eb;
  color: #68746c;
  font-size: 10px;
  font-weight: 750;
}

.discovery-rakuten-action {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 13px;
  background: #5a755f;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

.discovery-empty {
  padding: 54px 22px;
  border: 1px solid rgba(45, 63, 52, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  text-align: center;
}

.discovery-empty strong {
  display: block;
  color: #34493c;
  font-size: 20px;
}

.discovery-empty p {
  max-width: 560px;
  margin: 13px auto 0;
  color: #79827c;
  font-size: 12px;
  line-height: 1.8;
}

@media (min-width: 700px) {

  .course-discovery-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discovery-course-card {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(210px, 260px);
    align-items: center;
  }

  .discovery-rakuten-action {
    width: 100%;
  }
}

@media (max-width: 699px) {

  .course-discovery-options {
    grid-template-columns: 1fr;
  }

  .course-discovery-link {
    min-height: 62px;
  }

  .discovery-hero {
    padding-top: 52px;
    padding-bottom: 40px;
  }

  .discovery-results {
    padding-top: 32px;
    padding-bottom: 60px;
  }

  .discovery-rakuten-action {
    width: 100%;
  }
}



/* =========================================================
   GOJAPPE DISCOVERY / CHEAP STORY PAGE
   IBARAKI VALUE GOLF
   ========================================================= */

.discovery-cheap-page {
  --cheap-paper: #f1ead8;
  --cheap-paper-light: #faf7ee;
  --cheap-ink: #17261d;
  --cheap-green: #1f4b35;
  --cheap-green-dark: #163626;
  --cheap-red: #b62822;
  --cheap-pink: #d75587;
  --cheap-white: #f7f3e8;
  --cheap-line: rgba(29, 48, 37, .22);

  color: var(--cheap-ink);
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255,255,255,.42),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #f1ead8 0%,
      #f7f2e6 100%
    );
}


/* ---------- HERO ---------- */

.cheap-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(25, 56, 40, .18);
  background:
    linear-gradient(
      112deg,
      rgba(246,239,221,.98) 0%,
      rgba(235,228,208,.96) 48%,
      rgba(212,220,197,.9) 100%
    );
}

.cheap-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(31,75,53,.03) 0,
      rgba(31,75,53,.03) 1px,
      transparent 1px,
      transparent 4px
    );
}

.cheap-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 46px;
  padding-top: 64px;
  padding-bottom: 62px;
}

.cheap-hero-copy {
  max-width: 650px;
}

.cheap-hero-copy .section-kicker {
  color: var(--cheap-red);
  letter-spacing: .16em;
}

.cheap-hero-copy h1 {
  margin: 9px 0 20px;
  color: var(--cheap-green-dark);
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    Georgia,
    serif;
  font-size: clamp(46px, 8vw, 86px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
}

.cheap-hero-copy h1 span {
  color: var(--cheap-green);
}

.cheap-hero-tagline {
  margin: 0 0 22px;
  color: var(--cheap-red);
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 950;
  line-height: 1.25;
}

.cheap-hero-lead {
  max-width: 560px;
  margin: 0;
  color: #536158;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.9;
}

.cheap-hero-brand {
  display: inline-block;
  margin-top: 24px;
  padding: 8px 13px;
  border: 2px solid var(--cheap-green-dark);
  color: var(--cheap-green-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  transform: rotate(-1deg);
}

.cheap-hero-engine {
  margin-top: 15px;
  color: #738077;
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}


/* ---------- MEMBERS ---------- */

.cheap-members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-self: end;
}

.cheap-member {
  position: relative;
  min-width: 0;
  text-align: center;
}

.cheap-member-portrait {
  position: relative;
  display: grid;
  min-height: 210px;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--cheap-green-dark);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(214,220,200,.88)
    );
  box-shadow:
    6px 7px 0 rgba(23,54,38,.10);
  transform: rotate(-1deg);
}

.cheap-member:nth-child(2) .cheap-member-portrait {
  transform: rotate(1.3deg);
}

.cheap-member:nth-child(3) .cheap-member-portrait {
  transform: rotate(-.6deg);
}

.cheap-member-placeholder {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border: 3px solid var(--cheap-green-dark);
  border-radius: 50%;
  color: var(--cheap-green-dark);
  background: rgba(255,255,255,.55);
  font-family: Georgia, serif;
  font-size: 46px;
  font-weight: 900;
}

.cheap-cap {
  position: absolute;
  top: 38px;
  width: 88px;
  height: 24px;
  border: 3px solid #17261d;
  border-radius: 55% 55% 18% 18%;
  transform: rotate(-3deg);
}

.cheap-cap::after {
  content: "";
  position: absolute;
  right: -23px;
  bottom: -4px;
  width: 34px;
  height: 9px;
  border: 3px solid #17261d;
  border-left: 0;
  border-radius: 0 75% 75% 0;
  background: inherit;
}

.cheap-cap-pink {
  background: var(--cheap-pink);
}

.cheap-cap-white {
  background: var(--cheap-white);
}

.cheap-cap-red {
  background: var(--cheap-red);
}

.cheap-member strong {
  display: block;
  margin-top: 14px;
  color: var(--cheap-green-dark);
  font-size: 17px;
  font-weight: 950;
}

.cheap-member p {
  margin: 5px 0 0;
  color: #68746c;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.55;
}


/* ---------- STORY ---------- */

.cheap-story {
  padding-top: 76px;
  padding-bottom: 80px;
}

.cheap-story-heading {
  max-width: 760px;
  margin-bottom: 36px;
}

.cheap-story-heading .section-kicker {
  color: var(--cheap-red);
}

.cheap-story-heading h2 {
  margin: 9px 0 16px;
  color: var(--cheap-green-dark);
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    Georgia,
    serif;
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.cheap-story-heading p {
  margin: 0;
  color: #707970;
  font-size: 13px;
  line-height: 1.8;
}

.cheap-manga-grid {
  display: grid;
  gap: 18px;
}

.cheap-manga-panel {
  position: relative;
  overflow: hidden;
  min-height: 265px;
  padding: 22px;
  border: 3px solid var(--cheap-green-dark);
  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.82),
      rgba(232,227,211,.88)
    );
  box-shadow:
    8px 9px 0 rgba(24,53,38,.11);
}

.cheap-manga-number {
  position: absolute;
  top: 10px;
  left: 13px;
  z-index: 2;
  color: var(--cheap-red);
  font-family: Georgia, serif;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.cheap-manga-scene {
  display: flex;
  min-height: 165px;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 35px 4px 14px;
}

.cheap-dialogue {
  position: relative;
  max-width: 82%;
  padding: 12px 14px;
  border: 2px solid var(--cheap-green-dark);
  border-radius: 50%;
  color: #27392f;
  background: #fffef7;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
  box-shadow: 3px 4px 0 rgba(23,54,38,.09);
}

.cheap-dialogue:nth-child(even) {
  margin-left: auto;
}

.cheap-dialogue strong {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
}

.cheap-dialogue-pink strong {
  color: #c23e76;
}

.cheap-dialogue-white strong {
  color: #7a7569;
}

.cheap-dialogue-red strong {
  color: var(--cheap-red);
}

.cheap-manga-panel > p {
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(23,54,38,.18);
  color: #667269;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.65;
}


/* ---------- DATA INTRO ---------- */

.cheap-data-intro {
  position: relative;
  padding: 66px 0;
  color: #f6f1e3;
  background:
    linear-gradient(
      135deg,
      var(--cheap-green-dark),
      #285c40
    );
}

.cheap-data-intro .section-kicker {
  color: #d6c3a5;
}

.cheap-data-pretitle {
  margin: 14px 0 8px;
  color: #e7deca;
  font-size: 13px;
  font-weight: 850;
}

.cheap-data-intro h2 {
  max-width: 920px;
  margin: 0;
  color: #fffaf0;
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    Georgia,
    serif;
  font-size: clamp(30px, 5.2vw, 54px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.cheap-data-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
}

.cheap-data-stats > div {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.055);
}

.cheap-data-stats strong {
  display: block;
  overflow-wrap: anywhere;
  color: #fffdf5;
  font-size: clamp(18px, 3vw, 29px);
  font-weight: 950;
}

.cheap-data-stats span {
  display: block;
  margin-top: 4px;
  color: #bdc8bf;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* ---------- REAL COURSE LIST ---------- */

.discovery-cheap-page .discovery-results {
  padding-top: 55px;
  padding-bottom: 90px;
}

.discovery-cheap-page .discovery-status {
  margin: 0 0 24px;
  color: #6c776f;
  font-size: 11px;
  font-weight: 750;
}

.discovery-cheap-page .discovery-course-grid {
  display: grid;
  gap: 22px;
}

.discovery-cheap-page .discovery-course-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 22px;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(23,54,38,.15);
  border-radius: 4px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.82),
      rgba(243,238,225,.92)
    );
  box-shadow:
    5px 6px 0 rgba(23,54,38,.055);
}

.discovery-cheap-page .discovery-course-image-wrap {
  align-self: stretch;
  min-height: 165px;
  overflow: hidden;
  background: rgba(31,75,53,.08);
}

.discovery-cheap-page .discovery-course-image {
  width: 100%;
  height: 100%;
  min-height: 165px;
  display: block;
  object-fit: cover;
}

.discovery-cheap-page .discovery-course-copy {
  min-width: 0;
  padding: 22px 0;
}

.discovery-cheap-page .discovery-course-card h2 {
  margin: 0;
  color: var(--cheap-ink);
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    Georgia,
    serif;
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 900;
  line-height: 1.35;
}

.discovery-cheap-page .discovery-course-price {
  margin-top: 13px;
  color: var(--cheap-red);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 950;
  line-height: 1.2;
}

.discovery-cheap-page .discovery-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.discovery-cheap-page .discovery-course-meta span {
  padding: 6px 9px;
  border-radius: 3px;
  background: rgba(31,75,53,.08);
  color: #4b5e52;
  font-size: 10px;
  font-weight: 800;
}

.discovery-cheap-page .discovery-course-rating {
  color: var(--cheap-green-dark);
}

.discovery-cheap-page .discovery-rakuten-action {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-right: 20px;
  padding: 14px 18px;
  border-radius: 3px;
  background: var(--cheap-red);
  color: #fff;
  box-shadow: 4px 4px 0 rgba(88,20,17,.18);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.discovery-cheap-page .discovery-rakuten-action:hover {
  transform: translateY(-1px);
  filter: brightness(.96);
}

.cheap-back {
  padding-bottom: 64px;
}

.cheap-back a {
  color: #607066;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

@media (max-width: 899px) {
  .discovery-cheap-page .discovery-course-card {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
  }

  .discovery-cheap-page .discovery-course-image-wrap {
    grid-row: 1 / span 2;
    min-height: 180px;
  }

  .discovery-cheap-page .discovery-course-image {
    min-height: 180px;
  }

  .discovery-cheap-page .discovery-course-copy {
    padding: 18px 16px 4px 0;
  }

  .discovery-cheap-page .discovery-rakuten-action {
    margin: 0 16px 16px 0;
  }
}

@media (max-width: 599px) {
  .discovery-cheap-page .discovery-course-grid {
    gap: 18px;
  }

  .discovery-cheap-page .discovery-course-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .discovery-cheap-page .discovery-course-image-wrap {
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .discovery-cheap-page .discovery-course-image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .discovery-cheap-page .discovery-course-copy {
    padding: 18px 18px 8px;
  }

  .discovery-cheap-page .discovery-course-card h2 {
    font-size: 20px;
  }

  .discovery-cheap-page .discovery-course-price {
    font-size: 21px;
  }

  .discovery-cheap-page .discovery-rakuten-action {
    width: auto;
    margin: 10px 18px 18px;
  }
}


/* ---------- DESKTOP ---------- */

@media (min-width: 900px) {

  .cheap-hero-inner {
    grid-template-columns:
      minmax(0, .9fr)
      minmax(440px, 1.1fr);
    align-items: center;
    min-height: 650px;
  }

  .cheap-manga-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cheap-data-stats {
    grid-template-columns:
      .75fr .75fr .75fr 1.75fr;
  }
}


/* ---------- MOBILE ---------- */

@media (max-width: 899px) {

  .cheap-hero-inner {
    padding-top: 48px;
  }

  .cheap-members {
    gap: 7px;
  }

  .cheap-member-portrait {
    min-height: 165px;
  }

  .cheap-member-placeholder {
    width: 65px;
    height: 65px;
    font-size: 34px;
  }

  .cheap-cap {
    top: 29px;
    width: 70px;
    height: 20px;
  }
}


@media (max-width: 599px) {

  .cheap-hero-inner {
    gap: 34px;
    padding-bottom: 44px;
  }

  .cheap-hero-copy h1 {
    font-size: clamp(43px, 14vw, 67px);
  }

  .cheap-members {
    align-items: end;
  }

  .cheap-member-portrait {
    min-height: 125px;
    border-width: 2px;
  }

  .cheap-member-placeholder {
    width: 50px;
    height: 50px;
    border-width: 2px;
    font-size: 27px;
  }

  .cheap-cap {
    top: 20px;
    width: 54px;
    height: 16px;
    border-width: 2px;
  }

  .cheap-cap::after {
    right: -17px;
    width: 26px;
    height: 7px;
    border-width: 2px;
  }

  .cheap-member strong {
    margin-top: 10px;
    font-size: 13px;
  }

  .cheap-member p {
    font-size: 8px;
  }

  .cheap-story {
    padding-top: 58px;
    padding-bottom: 60px;
  }

  .cheap-manga-panel {
    min-height: 245px;
    padding: 18px;
  }

  .cheap-data-intro {
    padding: 52px 0;
  }

  .cheap-data-stats {
    grid-template-columns: 1fr 1fr;
  }
}



/* =========================================================
   CHEAP PROLOGUE / 4-COLUMN DESKTOP LAYOUT
   ========================================================= */

@media (min-width: 1100px) {

  .cheap-story {
    padding-top: 44px;
    padding-bottom: 46px;
  }

  .cheap-story-heading {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    max-width: none;
    margin-bottom: 22px;
    align-items: end;
  }

  .cheap-story-heading .section-kicker {
    grid-column: 1;
    align-self: start;
  }

  .cheap-story-heading h2 {
    grid-column: 2;
    margin: 0;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.05;
  }

  .cheap-story-heading p {
    grid-column: 2;
    margin-top: 8px;
  }

  .cheap-manga-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .cheap-manga-panel {
    min-height: 330px;
    padding: 14px;
    border-width: 2px;
    box-shadow: 4px 5px 0 rgba(24,53,38,.10);
  }

  .cheap-manga-number {
    top: 8px;
    left: 9px;
    font-size: 30px;
  }

  .cheap-manga-scene {
    min-height: 220px;
    gap: 10px;
    padding: 34px 0 12px;
    justify-content: flex-start;
  }

  .cheap-dialogue {
    max-width: 94%;
    padding: 10px 11px;
    font-size: 10px;
    line-height: 1.45;
  }

  .cheap-dialogue strong {
    font-size: 9px;
  }

  .cheap-manga-panel > p {
    min-height: 42px;
    padding-top: 10px;
    font-size: 9px;
    line-height: 1.45;
  }
}


@media (min-width: 700px) and (max-width: 1099px) {

  .cheap-manga-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 699px) {

  .cheap-manga-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   CHEAP CHARACTER / MANGA IMAGE ASSETS
   ========================================================= */

.cheap-member-photo {
  padding: 0;
}

.cheap-member-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center top;
}

.cheap-manga-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*
  漫画画像が正式配置された後に
  .cheap-manga-panel.has-image を付与すれば、
  会話CSSから画像主体へ切り替えられる構造。
*/

.cheap-manga-panel.has-image .cheap-manga-image {
  display: block;
}

.cheap-manga-panel.has-image .cheap-dialogue {
  display: none;
}


/* =========================================================
   CHEAP HERO / CANONICAL DESIGN
   GOJAPPE COURSE ENGINE
   ========================================================= */

.discovery-cheap-page .cheap-hero {
  overflow: hidden;
}

.discovery-cheap-page .cheap-hero-inner {
  display: grid;
  gap: 22px;
  padding-top: 28px;
  padding-bottom: 18px;
  align-items: center;
}

.discovery-cheap-page .cheap-hero-copy {
  max-width: 500px;
}

.discovery-cheap-page
.cheap-hero-copy
.section-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .16em;
}

.discovery-cheap-page .cheap-hero-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(42px, 4.15vw, 66px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.discovery-cheap-page .cheap-hero-tagline {
  margin: 0 0 15px;
  font-size: clamp(19px, 1.75vw, 26px);
  line-height: 1.28;
}

.discovery-cheap-page .cheap-hero-lead {
  margin: 0;
  color: #59675e;
  font-size: 14px;
  line-height: 1.72;
}

.discovery-cheap-page .cheap-hero-brand {
  display: block;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
}

.discovery-cheap-page .cheap-brand-logo {
  display: block;
  width: min(270px, 72%);
  height: auto;
  margin: 0;
  object-fit: contain;
}

.discovery-cheap-page .cheap-hero-engine {
  margin: 9px 0 0;
  color: #728078;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}

.discovery-cheap-page .cheap-hero-visual {
  min-width: 0;
  margin: 0;
  overflow: visible;
  align-self: center;
}

.discovery-cheap-page .cheap-hero-members-scene {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* members_scene.png 内に人物名と紹介があるためHTML側は不要 */
.discovery-cheap-page .cheap-hero-member-labels {
  display: none;
}


/* ---------- PC ---------- */

@media (min-width: 1100px) {

  .discovery-cheap-page .cheap-hero-inner {
    grid-template-columns:
      minmax(350px, 36%)
      minmax(0, 64%);
    gap: 10px;
    min-height: 0;
  }

  .discovery-cheap-page .cheap-hero-copy {
    padding-left: 0;
    align-self: center;
  }

  .discovery-cheap-page .cheap-hero-visual {
    width: 109%;
    max-width: 1020px;
    justify-self: start;
    transform: translateX(-3%);
  }
}


/* ---------- Tablet ---------- */

@media (min-width: 700px) and (max-width: 1099px) {

  .discovery-cheap-page .cheap-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .discovery-cheap-page .cheap-hero-copy {
    max-width: 620px;
  }

  .discovery-cheap-page .cheap-hero-visual {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
  }
}


/* ---------- Mobile ---------- */

@media (max-width: 699px) {

  .discovery-cheap-page .cheap-hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .discovery-cheap-page .cheap-hero-copy h1 {
    font-size: clamp(39px, 11vw, 55px);
  }

  .discovery-cheap-page .cheap-hero-tagline {
    font-size: 18px;
  }

  .discovery-cheap-page .cheap-hero-lead {
    font-size: 13px;
  }

  .discovery-cheap-page .cheap-hero-visual {
    order: 2;
  }

  .discovery-cheap-page .cheap-hero-brand {
    margin-top: 16px;
  }

  .discovery-cheap-page .cheap-brand-logo {
    width: min(260px, 80%);
  }
}



/* =========================================================
   CHEAP PROLOGUE / CANONICAL 3-MEMBER MANGA
   ========================================================= */

.discovery-cheap-page .cheap-story {
  padding-top: 30px;
  padding-bottom: 34px;
}

.discovery-cheap-page .cheap-story-heading {
  margin-bottom: 18px;
}

.discovery-cheap-page .cheap-story-heading h2 {
  font-size: clamp(30px, 2.8vw, 43px);
  line-height: 1.08;
}

.discovery-cheap-page .cheap-story-heading p {
  font-size: 11px;
  line-height: 1.6;
}

.discovery-cheap-page .cheap-manga-grid {
  display: grid;
  align-items: start;
  gap: 10px;
}

.discovery-cheap-page .cheap-manga-panel.has-image {
  display: block;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.discovery-cheap-page
.cheap-manga-panel.has-image
.cheap-manga-scene {
  display: block;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
}

.discovery-cheap-page
.cheap-manga-panel.has-image
.cheap-dialogue {
  display: none !important;
}

.discovery-cheap-page
.cheap-manga-panel.has-image
.cheap-manga-image {
  display: block !important;
  width: 100%;
  height: auto !important;
  margin: 0;
  padding: 0;
  border: 1.5px solid #173626;
  background: #f8f2e6;
  object-fit: contain;
  box-shadow: 3px 4px 0 rgba(23,54,38,.08);
}

.discovery-cheap-page
.cheap-manga-panel.has-image
> p {
  min-height: 0 !important;
  margin: 8px 2px 0;
  padding: 0 !important;
  border: 0 !important;
  color: #35463d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
}


/* ---------- Desktop: 横4コマ ---------- */

@media (min-width: 1100px) {

  .discovery-cheap-page .cheap-manga-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }
}


/* ---------- Tablet: 2×2 ---------- */

@media (min-width: 700px) and (max-width: 1099px) {

  .discovery-cheap-page .cheap-manga-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
}


/* ---------- Mobile: 縦1列 ---------- */

@media (max-width: 699px) {

  .discovery-cheap-page .cheap-manga-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .discovery-cheap-page
  .cheap-manga-panel.has-image
  > p {
    font-size: 11px;
  }
}



/* =========================================================
   CHEAP PROLOGUE / APPROVED HORIZONTAL STRIP
   ========================================================= */

.discovery-cheap-page .cheap-story {
  padding-top: 28px;
  padding-bottom: 30px;
}

.discovery-cheap-page .cheap-story-heading {
  margin-bottom: 16px;
}

.discovery-cheap-page .cheap-prologue-strip {
  width: 100%;
  margin: 0 auto;
}

.discovery-cheap-page .cheap-prologue-strip-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  object-fit: contain;
}

@media (min-width: 1100px) {

  .discovery-cheap-page .cheap-prologue-strip {
    width: 100%;
  }
}

@media (max-width: 1099px) {

  .discovery-cheap-page .cheap-prologue-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .discovery-cheap-page .cheap-prologue-strip-image {
    min-width: 980px;
  }
}

@media (max-width: 699px) {

  .discovery-cheap-page .cheap-story {
    padding-top: 24px;
    padding-bottom: 26px;
  }

  .discovery-cheap-page .cheap-prologue-strip-image {
    min-width: 900px;
  }
}



/* CHEAP PROLOGUE / FINAL EDITORIAL DESIGN 20260813 */

.discovery-cheap-page .cheap-story {
  padding-top: 38px;
  padding-bottom: 38px;
}

.discovery-cheap-page .cheap-story-heading {
  margin-bottom: 22px;
}

.discovery-cheap-page .cheap-story-heading .section-kicker {
  margin-bottom: 16px;
}

.discovery-cheap-page .cheap-story-heading h2 {
  margin: 0;
  color: #123b2d;
  font-size: clamp(42px, 4.2vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.discovery-cheap-page .cheap-story-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 25px 0 0;
  color: #171915;
  font-family:
    "Klee",
    "Klee One",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.discovery-cheap-page .cheap-story-lead-first {
  display: inline-block;
  position: relative;
  z-index: 0;
  font-size: clamp(22px, 1.75vw, 30px);
}

.discovery-cheap-page .cheap-story-lead-second {
  display: inline-block;
  position: relative;
  z-index: 0;
  font-size: clamp(21px, 1.6vw, 28px);
}

.discovery-cheap-page .cheap-story-lead-first::after,
.discovery-cheap-page .cheap-story-lead-second::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4px;
  right: -4px;
  bottom: 1px;
  height: 8px;
  border-radius: 8px;
  background: rgba(246, 194, 56, 0.58);
  transform: rotate(-0.4deg);
}

.discovery-cheap-page .cheap-prologue-strip {
  width: min(100%, 1500px);
  margin: 0 auto;
}

.discovery-cheap-page .cheap-prologue-strip-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Tablet */
@media (max-width: 1099px) {

  .discovery-cheap-page .cheap-story-heading h2 {
    font-size: clamp(36px, 5.1vw, 56px);
    white-space: normal;
  }

  .discovery-cheap-page .cheap-story-lead {
    margin-top: 20px;
  }
}

/* Mobile */
@media (max-width: 699px) {

  .discovery-cheap-page .cheap-story {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .discovery-cheap-page .cheap-story-heading {
    margin-bottom: 18px;
  }

  .discovery-cheap-page .cheap-story-heading h2 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.16;
    white-space: normal;
  }

  .discovery-cheap-page .cheap-story-lead {
    gap: 5px;
    margin-top: 18px;
  }

  .discovery-cheap-page .cheap-story-lead-first {
    font-size: 21px;
  }

  .discovery-cheap-page .cheap-story-lead-second {
    font-size: 18px;
  }
}


/* =========================================================
   CHEAP PROLOGUE / WIDE EDITORIAL MASTER
   ========================================================= */

/*
  STORYだけ通常section-shellの横幅制限を解除。
  ヒーローやREAL DATAには影響させない。
*/
.discovery-cheap-page .cheap-story.section-shell {
  width: min(94vw, 1540px) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 見出し全体 */
.discovery-cheap-page .cheap-story-heading {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px !important;
}

/* STORY / PROLOGUE */
.discovery-cheap-page .cheap-story-heading .section-kicker {
  margin: 0 0 12px !important;
}

/* メインタイトル */
.discovery-cheap-page .cheap-story-heading h2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  color: #123b2d !important;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    serif !important;

  font-size: clamp(46px, 4.25vw, 70px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;

  white-space: nowrap !important;
}

/* 導入コピー */
.discovery-cheap-page .cheap-story-heading p.cheap-story-lead {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: auto !important;
  max-width: none !important;

  gap: 2px !important;
  margin: 26px 0 0 !important;

  color: #171915 !important;

  font-family:
    "Klee",
    "Klee One",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    sans-serif !important;

  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: .015em !important;
}

/* 1行目 */
.discovery-cheap-page .cheap-story-lead-first {
  position: relative !important;
  display: inline-block !important;

  font-size: clamp(24px, 1.8vw, 31px) !important;
  font-weight: 800 !important;
}

/* 2行目 */
.discovery-cheap-page .cheap-story-lead-second {
  position: relative !important;
  display: inline-block !important;

  font-size: clamp(23px, 1.7vw, 29px) !important;
  font-weight: 800 !important;
}

/* 手描きマーカー */
.discovery-cheap-page .cheap-story-lead-first::after,
.discovery-cheap-page .cheap-story-lead-second::after {
  content: "" !important;

  position: absolute !important;
  z-index: -1 !important;

  left: -5px !important;
  right: -5px !important;
  bottom: 0 !important;

  height: 9px !important;

  background: rgba(246,194,56,.60) !important;
  border-radius: 10px 7px 9px 6px !important;

  transform: rotate(-.35deg) !important;
}

/* 漫画 */
.discovery-cheap-page .cheap-prologue-strip {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.discovery-cheap-page .cheap-prologue-strip-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto !important;
}


/* ---------- Tablet ---------- */

@media (max-width: 1099px) {

  .discovery-cheap-page .cheap-story.section-shell {
    width: calc(100% - 40px) !important;
  }

  .discovery-cheap-page .cheap-story-heading h2 {
    font-size: clamp(38px, 5.2vw, 55px) !important;
    white-space: normal !important;
  }
}


/* ---------- Mobile ---------- */

@media (max-width: 699px) {

  .discovery-cheap-page .cheap-story.section-shell {
    width: calc(100% - 28px) !important;
  }

  .discovery-cheap-page .cheap-story-heading h2 {
    font-size: clamp(32px, 9vw, 43px) !important;
    line-height: 1.14 !important;
    white-space: normal !important;
  }

  .discovery-cheap-page .cheap-story-heading p.cheap-story-lead {
    margin-top: 20px !important;
  }

  .discovery-cheap-page .cheap-story-lead-first {
    font-size: 21px !important;
  }

  .discovery-cheap-page .cheap-story-lead-second {
    font-size: 18px !important;
  }
}



/* =========================================================
   CHEAP PROLOGUE / LEGACY GRID RESET
   PC旧2カラムレイアウトを解除
   ========================================================= */

@media (min-width: 1100px) {

  .discovery-cheap-page .cheap-story-heading {
    display: block !important;
    grid-template-columns: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 28px !important;
  }

  .discovery-cheap-page .cheap-story-heading .section-kicker {
    display: block !important;
    margin: 0 0 12px !important;
  }

  .discovery-cheap-page .cheap-story-heading h2 {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-size: clamp(46px, 4.1vw, 68px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.055em !important;

    white-space: nowrap !important;
  }

  .discovery-cheap-page .cheap-story-heading p.cheap-story-lead {
    display: flex !important;
    flex-direction: column !important;

    width: fit-content !important;
    max-width: none !important;

    margin: 26px 0 0 !important;

    font-size: inherit !important;
    line-height: 1.35 !important;
  }

  .discovery-cheap-page
  .cheap-story-heading
  .cheap-story-lead-first {
    font-size: 29px !important;
    line-height: 1.35 !important;
  }

  .discovery-cheap-page
  .cheap-story-heading
  .cheap-story-lead-second {
    font-size: 27px !important;
    line-height: 1.4 !important;
  }
}



/* =========================================================
   CHEAP PROLOGUE / FINAL 4 PANEL GRID
   ========================================================= */

@media (min-width: 1100px) {

  .discovery-cheap-page .cheap-story-heading h2 {
    font-size: clamp(40px, 3.25vw, 56px) !important;
    white-space: nowrap !important;
  }

  .discovery-cheap-page .cheap-story-heading p.cheap-story-lead {
    margin-top: 24px !important;
  }

  .discovery-cheap-page .cheap-story-heading .cheap-story-lead-first {
    font-size: 30px !important;
  }

  .discovery-cheap-page .cheap-story-heading .cheap-story-lead-second {
    font-size: 28px !important;
  }
}


/* ---------- 4 PANEL GRID ---------- */

.discovery-cheap-page .cheap-prologue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
  margin: 0 auto;
}

.discovery-cheap-page .cheap-prologue-panel {
  min-width: 0;
  margin: 0;
}

.discovery-cheap-page .cheap-prologue-image-frame {
  width: 100%;
  aspect-ratio: 400 / 327;
  overflow: hidden;
  border: 2px solid #173a2c;
  background: #eee7d7;
}

.discovery-cheap-page .cheap-prologue-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.discovery-cheap-page .cheap-prologue-panel p {
  margin: 10px 2px 0 !important;

  color: #1b2c22 !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif !important;

  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;
}


/* ---------- Tablet ---------- */

@media (max-width: 1099px) {

  .discovery-cheap-page .cheap-prologue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .discovery-cheap-page .cheap-prologue-panel p {
    font-size: 16px !important;
  }
}


/* ---------- Mobile ---------- */

@media (max-width: 699px) {

  .discovery-cheap-page .cheap-prologue-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .discovery-cheap-page .cheap-prologue-panel p {
    margin-top: 9px !important;
    font-size: 16px !important;
  }
}



/* =========================================================
   CHEAP PROLOGUE V2 / ISOLATED FINAL
   ========================================================= */

.discovery-cheap-page .cheap-prologue-v2 {
  padding: 42px 0 48px;
}

.discovery-cheap-page .cheap-prologue-v2-shell {
  width: min(94vw, 1560px);
  margin: 0 auto;
}

.discovery-cheap-page .cheap-prologue-v2-kicker {
  margin: 0 0 14px;

  color: #b62822;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
}

.discovery-cheap-page .cheap-prologue-v2-title {
  margin: 0;

  color: #153b2d;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    serif;

  font-size: clamp(42px, 3.25vw, 58px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.055em;

  white-space: nowrap;
}

.discovery-cheap-page .cheap-prologue-v2-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 3px;
  margin: 28px 0 34px;
}

.discovery-cheap-page .cheap-prologue-v2-lead-line {
  position: relative;
  z-index: 0;

  display: inline-block;

  color: #17261d;

  font-family:
    "Klee",
    "Klee One",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    sans-serif;

  font-size: clamp(24px, 1.85vw, 31px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
}

.discovery-cheap-page .cheap-prologue-v2-lead-line::after {
  content: "";

  position: absolute;
  z-index: -1;

  left: -5px;
  right: -5px;
  bottom: 1px;

  height: 9px;

  border-radius: 10px 7px 9px 6px;
  background: rgba(246, 194, 56, .64);

  transform: rotate(-.35deg);
}

.discovery-cheap-page .cheap-prologue-v2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;

  width: 100%;
}

.discovery-cheap-page .cheap-prologue-v2-panel {
  min-width: 0;
  margin: 0;
}

.discovery-cheap-page .cheap-prologue-v2-image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 0;
  padding-top: 81.75%;

  position: relative;

  overflow: hidden;

  border: 2px solid #173a2c;
  background: #efe8d8;
}

.discovery-cheap-page .cheap-prologue-v2-image img {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;

  background: #efe8d8;
}

.discovery-cheap-page .cheap-prologue-v2-panel p {
  margin: 11px 4px 0;

  color: #173a2c;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  font-size: clamp(16px, 1.08vw, 18px);
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: .01em;
}


/* ---------- Tablet ---------- */

@media (max-width: 1099px) {

  .discovery-cheap-page .cheap-prologue-v2-shell {
    width: calc(100% - 40px);
  }

  .discovery-cheap-page .cheap-prologue-v2-title {
    white-space: normal;
  }

  .discovery-cheap-page .cheap-prologue-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }
}


/* ---------- Mobile ---------- */

@media (max-width: 699px) {

  .discovery-cheap-page .cheap-prologue-v2 {
    padding: 30px 0 36px;
  }

  .discovery-cheap-page .cheap-prologue-v2-shell {
    width: calc(100% - 28px);
  }

  .discovery-cheap-page .cheap-prologue-v2-title {
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.14;
    white-space: normal;
  }

  .discovery-cheap-page .cheap-prologue-v2-lead {
    margin: 22px 0 28px;
  }

  .discovery-cheap-page .cheap-prologue-v2-lead-line {
    font-size: 19px;
  }

  .discovery-cheap-page .cheap-prologue-v2-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .discovery-cheap-page .cheap-prologue-v2-panel p {
    font-size: 16px;
  }
}



/* =========================================================
   APPROVED PROLOGUE IMAGE / 20260813
   ========================================================= */

.discovery-cheap-page .cheap-prologue-approved {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f2e4;
}

.discovery-cheap-page .cheap-prologue-approved-shell {
  width: min(100%, 1920px);
  margin: 0 auto;
}

.discovery-cheap-page .cheap-prologue-approved-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}


/* Mobile:
   完成ビジュアルを壊さず、そのまま縮小表示 */
@media (max-width: 699px) {

  .discovery-cheap-page .cheap-prologue-approved {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .discovery-cheap-page .cheap-prologue-approved-shell {
    width: 100%;
    min-width: 760px;
  }
}



/* =========================================================
   APPROVED PROLOGUE IMAGE / 20260813
   ========================================================= */

.discovery-cheap-page .cheap-prologue-approved {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f2e4;
}

.discovery-cheap-page .cheap-prologue-approved-shell {
  width: min(100%, 1920px);
  margin: 0 auto;
}

.discovery-cheap-page .cheap-prologue-approved-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}



/* =========================================================
   WIDE PROLOGUE / APPROVED FINAL IMAGE
   ========================================================= */

.discovery-wide-page .wide-prologue-approved {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f1e3;
}

.discovery-wide-page .wide-prologue-approved-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.discovery-wide-page .wide-prologue-approved-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

/* WIDE hero headline:
   「フェアウェイ」を途中で割らない */
@media (min-width: 1100px) {

  .discovery-wide-page .cheap-hero-copy {
    width: 31%;
    max-width: none;
  }

  .discovery-wide-page .cheap-hero-visual {
    width: 66%;
  }

  .discovery-wide-page .cheap-hero-copy h1 {
    font-size: clamp(54px, 4.3vw, 82px);
    line-height: 1.03;
    letter-spacing: -0.04em;
  }

  .discovery-wide-page .cheap-hero-copy h1 span {
    white-space: nowrap;
    font-size: 0.82em;
  }
}

@media (max-width: 1099px) {

  .discovery-wide-page .wide-prologue-approved {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .discovery-wide-page .wide-prologue-approved-image {
    min-width: 980px;
  }
}

@media (max-width: 699px) {

  .discovery-wide-page .wide-prologue-approved-image {
    min-width: 900px;
  }
}



/* =========================================================
   WIDE HERO / RESTORE APPROVED CHEAP-BASED LAYOUT
   Keep prologue untouched
   ========================================================= */

@media (min-width: 1100px) {

  .discovery-wide-page .cheap-hero-inner {
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.9fr);
  }

  .discovery-wide-page .cheap-hero-copy {
    width: auto;
    max-width: none;
  }

  .discovery-wide-page .cheap-hero-visual {
    width: auto;
  }

  .discovery-wide-page .cheap-hero-copy .section-kicker {
    white-space: nowrap;
  }

  .discovery-wide-page .cheap-hero-copy h1 {
    font-size: clamp(54px, 4.2vw, 78px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .discovery-wide-page .cheap-hero-copy h1 span {
    display: block;
    white-space: nowrap;
    font-size: 0.72em;
    letter-spacing: -0.055em;
  }

  .discovery-wide-page .cheap-hero-tagline {
    white-space: normal;
  }

  .discovery-wide-page .cheap-hero-lead {
    white-space: normal;
  }
}


/* WIDE HERO / FINAL TITLE FIT */
@media (min-width: 1100px) {
  .discovery-wide-page .cheap-hero-copy h1 {
    font-size: clamp(50px, 3.5vw, 68px);
    line-height: 1.02;
  }

  .discovery-wide-page .cheap-hero-copy h1 span {
    font-size: 0.68em;
    white-space: nowrap;
  }
}



/* =========================================================
   WIDE STORY / FINAL APPROVED IMAGE
   ========================================================= */

.discovery-wide-page .wide-story-final {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f2e4;
}

.discovery-wide-page .wide-story-final-shell {
  width: min(100%, 1920px);
  margin: 0 auto;
}

.discovery-wide-page .wide-story-final-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}



/* =========================================================
   SEVE / FINAL NEXT COURSE
   ========================================================= */

.next-course-section {
  padding: 72px 20px 78px;
  background: #f5f1e7;
}

.next-course-shell {
  width: min(1060px, 100%);
  margin: 0 auto;
  text-align: center;
}

.next-course-section h2 {
  margin: 8px 0 0;
  color: #17261d;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.2;
}

.next-course-lead {
  margin: 14px auto 30px;
  color: #68756d;
  font-size: 13px;
  line-height: 1.8;
}

.next-course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.next-course-card {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 30px;
  border: 1px solid rgba(23, 38, 29, .12);
  border-radius: 24px;
  color: #17261d;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(23, 38, 29, .06);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.next-course-cheap {
  background:
    linear-gradient(
      145deg,
      #f4edda 0%,
      #e5eddf 100%
    );
}

.next-course-wide {
  background:
    linear-gradient(
      145deg,
      #eee7d7 0%,
      #dfe9df 100%
    );
}

.next-course-card small {
  margin-bottom: auto;
  color: #64746a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.next-course-quote {
  margin-bottom: 12px;
  color: #53645a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.next-course-card strong {
  display: block;
  max-width: 430px;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.22;
}

.next-course-action {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 900;
}

.next-course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 36px rgba(23, 38, 29, .11);
}

@media (max-width: 699px) {

  .next-course-section {
    padding: 54px 16px 60px;
  }

  .next-course-grid {
    grid-template-columns: 1fr;
  }

  .next-course-card {
    min-height: 240px;
    padding: 24px;
  }
}
.discovery-course-video{display:grid;grid-template-columns:120px 1fr;gap:12px;margin:0 20px 18px;padding:10px;border:1px solid rgba(17,55,43,.18);border-radius:12px;background:#f7f2e6;color:#17382d;text-decoration:none}.discovery-course-video img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.discovery-course-video span{display:flex;min-width:0;flex-direction:column;gap:4px}.discovery-course-video small{color:#b4231f;font-weight:900}.discovery-course-video strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:13px;line-height:1.4}.discovery-course-video b{color:#168458;font-size:13px}@media(max-width:560px){.discovery-course-video{grid-template-columns:96px 1fr;margin-inline:14px}.discovery-course-video img{width:96px}}