/*
Theme Name: Allure Login Page
Description: アリュールチャットプロダクション キャストログインポータル
Author: Nana
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: allure-login
*/

:root {
  --pink: #ff87a3;
  --pink-strong: #ff7597;
  --pink-cta: #ff5c8a;
  --pink-cta-hover: #ff4075;
  --gold: #c6ab7e;
  --ink: #222;
  --ink-soft: #666;
  --bg: #f3e9f7;
  --line: #f2eef5;

  /* Fluid horizontal gutter used by every section */
  --gutter: clamp(14px, 4vw, 20px);
  --container: 1200px;

  /* Set/updated by script.js to the header's real rendered height, so
     sticky-header anchor scrolling doesn't hide section tops (§3). */
  --header-height: 70px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
html {
  width: 100%;
  min-height: 100vh;
  font-family: "Noto Sans JP", sans-serif;
  background-color: var(--bg);
  overflow-x: hidden; /* guards against any accidental horizontal scroll */
}

img,
svg,
video {
  max-width: 100%;
}

/* ==========================================================================
   Top Header Bar
   ========================================================================== */

header {
  background-color: var(--pink);
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px clamp(14px, 3vw, 24px);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.logo-image {
  height: clamp(30px, 5vw, 40px);
  width: auto;
  display: block;
}

.logo-text {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  color: #ffffff;
}

.logo-sub {
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.8vw, 20px);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 700;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  opacity: 0.8;
}

.nav-links a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Hamburger button — hidden on desktop, shown at <=900px.
   44x44 tap target (padding grows the hit area, inner bars stay visually
   the same size as before). */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 44px;
  padding: 13px 9px;
  background: transparent;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 110;
}

.hamburger-btn span {
  display: block;
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.hamburger-btn.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ==========================================================================
   Hero Slider
   ========================================================================== */

.hero-container {
  width: 100%;
  padding: clamp(8px, 1.5vw, 16px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.slider-wrapper {
  width: 100%;
  max-width: 1400px;
  /* Fluid height: never shorter than 380px, never taller than 700px */
  height: clamp(380px, 52vw, 700px);
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(180, 140, 200, 0.2);
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
  background-color: var(--bg);
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Only slides with a real link URL get a pointer cursor + focus ring,
   so an empty slide never looks clickable (§4: a slide may have no link). */
.slide.slide--linked {
  cursor: pointer;
}

.slide.slide--linked:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -6px;
}

.slide-left {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.slide-left img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Slider navigation */
.slider-btn {
  position: absolute;
  bottom: clamp(12px, 2vw, 20px);
  width: clamp(38px, 4vw, 48px);
  height: clamp(38px, 4vw, 48px);
  background-color: var(--pink-strong);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition:
    background-color 0.2s,
    transform 0.2s;
  z-index: 10;
}

.slider-btn:hover {
  background-color: #e05e80;
  transform: scale(1.05);
}

.slider-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.slider-btn svg {
  width: clamp(16px, 1.8vw, 22px);
  height: clamp(16px, 1.8vw, 22px);
  fill: #ffffff;
}

.prev-btn {
  left: clamp(10px, 2vw, 20px);
}

.next-btn {
  right: clamp(10px, 2vw, 20px);
}

.slider-dots {
  position: absolute;
  bottom: clamp(14px, 2.2vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    transform 0.2s;
}

.slider-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.slider-dot.active {
  background: #ffffff;
  transform: scale(1.25);
}

/* ==========================================================================
   Shared section scaffolding
   ========================================================================== */

.site-login-section,
.site-home-section,
.manual-section,
.news-section,
.rankings-section {
  padding: clamp(36px, 6vw, 60px) var(--gutter);
  scroll-margin-top: var(--header-height);
}

.login-container,
.home-container,
.manual-container,
.news-container {
  max-width: var(--container);
  margin: 0 auto;
}

.rankings-container {
  max-width: 1250px;
  margin: 0 auto;
}

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 15px;
}

.login-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.login-subtitle {
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--ink);
}

.login-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.login-card-wrapper,
.home-card-wrapper {
  position: relative;
  background-image: url("images/card-full-frame.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 10px;
}

.login-card-wrapper--hr {
  grid-column: 4;
}

.login-card,
.home-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 2px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 190px; /* was a hard height — now grows if text wraps */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease;
  /* Whole card is now the link (§5: entire card must be clickable) */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.login-card:focus-visible,
.home-card:focus-visible {
  outline: 3px solid var(--pink-cta);
  outline-offset: 2px;
}

.login-card:hover,
.home-card:hover {
  transform: translateY(-2px);
}

.card-logo {
  min-height: 32px;
  display: flex;
  align-items: center;
}

.card-logo img {
  max-height: 28px;
  width: auto;
}

.icon-circle {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-name {
  font-size: clamp(14px, 1.4vw, 15px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.site-desc {
  font-size: 11px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.login-btn,
.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px; /* comfortable tap target */
  background-color: #ff87a3;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 8px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(255, 92, 138, 0.2);
  transition: background-color 0.2s;
}

.login-card:hover .login-btn,
.home-card:hover .home-btn {
  background-color: var(--pink-cta-hover);
}

.login-card-active {
  background-color: #ff6b93;
}

.login-card-active .site-name,
.login-card-active .site-desc {
  color: #ffffff;
}

.login-btn-white {
  background-color: #ffffff;
  color: var(--pink-cta);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.login-card-active:hover .login-btn-white {
  background-color: #fafafa;
}

/* ==========================================================================
   Site Home
   ========================================================================== */

.home-header {
  text-align: center;
  margin-bottom: clamp(26px, 4vw, 40px);
}

.home-title-en {
  font-family: "Merriweather", serif;
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.home-title-ja {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

/* ==========================================================================
   Manual
   ========================================================================== */

.manual-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 0 4px;
}

.manual-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.manual-subtitle {
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--ink);
}

.manual-box {
  background: linear-gradient(135deg, #9b7fd4 0%, var(--pink) 100%);
  border-radius: 4px;
  padding: 0 clamp(18px, 3vw, 30px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.manual-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 4.5vw, 50px) 0;
  text-decoration: none;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s ease;
}

.manual-row:last-child {
  border-bottom: none;
}

.manual-row:hover {
  opacity: 0.9;
}

.manual-row:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

.manual-left {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  min-width: 0;
}

.manual-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manual-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.manual-item-title {
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.manual-item-desc {
  font-size: 12px;
  opacity: 0.9;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   News
   ========================================================================== */

.news-header {
  text-align: center;
  margin-bottom: clamp(28px, 4.5vw, 45px);
}

.news-title-en {
  font-family: "Merriweather", serif;
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.news-title-ja {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
}

.news-item-wrapper {
  position: relative;
  margin-top: 12px;
}

.news-badge {
  position: absolute;
  top: -14px;
  left: clamp(16px, 3vw, 28px);
  background-color: var(--pink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(255, 117, 151, 0.2);
}

.news-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px double var(--pink-strong);
  border-radius: 0;
  padding: clamp(20px, 3vw, 30px);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.news-box:hover {
  background-color: #fffbfe;
  transform: translateY(-1px);
}

.news-box:focus-visible {
  outline: 2px solid var(--pink-strong);
  outline-offset: 2px;
}

.news-date {
  font-size: clamp(12px, 1.4vw, 14px);
  color: var(--pink-strong);
  font-weight: 600;
  margin-right: clamp(16px, 4vw, 50px);
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.news-text {
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--pink-strong);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Rankings
   ========================================================================== */

.rankings-header {
  text-align: center;
  margin-bottom: clamp(28px, 4.5vw, 45px);
}

.rankings-title-en {
  font-family: "Merriweather", serif;
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.rankings-title-ja {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.rankings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 16px);
}

.ranking-card {
  background: #ffffff;
  border: 1px solid #ffb6c1;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  min-width: 0;
}

.ranking-card-header {
  background: linear-gradient(300deg, #ffbfce 0%, #d6c2ff 70%, #afe7ff 100%);
  color: #ffffff;
  padding: clamp(12px, 1.6vw, 16px) 10px;
  text-align: center;
}

.ranking-card-header h3 {
  font-family: "Noto Serif JP", serif;
  /* Long JP titles stay on one line down to ~270px columns */
  font-size: clamp(14px, 1.45vw, 20px);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.ranking-list {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-grow: 1;
}

.ranking-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 16px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.ranking-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ranking-user-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.user-avatar {
  width: clamp(44px, 4.5vw, 54px);
  height: clamp(44px, 4.5vw, 54px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ffb6c1;
}

.rank-badge {
  background-color: var(--pink-strong);
  color: #ffffff;
  font-family: "Merriweather", serif;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ranking-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.user-name {
  font-size: clamp(13px, 1.3vw, 14px);
  font-weight: 700;
  color: #333;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.user-store {
  font-size: 10px;
  color: #777;
  margin-bottom: 2px;
  line-height: 1.35;
  /* Truncated in narrow 4-up columns, wraps freely once cards get wide */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-points {
  font-size: clamp(13px, 1.3vw, 14px);
  font-weight: 700;
  color: #333;
  letter-spacing: 0.02em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ranking-date {
  font-size: 9px;
  color: #aaa;
  letter-spacing: 0.03em;
}

.ranking-footer {
  padding: 16px 14px;
  background-color: #faf8fc;
  border-top: 1px solid var(--line);
}

/* .ranking-btn is a <button> (in-page expand, not navigation) — reset the
   native button chrome so it still looks identical to the old <a>. */
.ranking-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  background-color: var(--pink-strong);
  color: #ffffff;
  text-decoration: none;
  font-family: inherit;
  font-size: clamp(10px, 1.1vw, 11px);
  font-weight: 600;
  padding: 12px clamp(12px, 1.6vw, 18px);
  border: none;
  border-radius: 30px;
  box-shadow: 0 3px 6px rgba(255, 117, 151, 0.25);
  cursor: pointer;
  transition: background-color 0.2s;
}

.ranking-btn:hover {
  background-color: #ff5c85;
}

.ranking-btn:focus-visible {
  outline: 2px solid var(--pink-strong);
  outline-offset: 2px;
}

.btn-arrow {
  background-color: #ffffff;
  color: var(--pink-strong);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: #ff85a2;
  color: #ffffff;
  padding: clamp(24px, 4vw, 35px) clamp(18px, 4vw, 40px);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.footer-container {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-logo a {
  display: inline-block;
  line-height: 1;
}

.footer-logo-img {
  height: clamp(38px, 5vw, 52px);
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-copyright {
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 500;
  opacity: 0.9;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 35px);
}

.footer-nav-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}

.footer-nav-link:hover {
  opacity: 0.75;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- Ultra-wide screens: let the layout breathe --- */
@media (min-width: 1700px) {
  :root {
    --container: 1360px;
  }

  .rankings-container {
    max-width: 1440px;
  }

  .hero-container {
    height: 90vh;
    align-items: stretch;
  }

  .slider-wrapper {
    max-width: 1800px;
    height: 100%;
  }
}

/* --- Small laptops: 4 columns -> 3 --- */
@media (max-width: 1180px) {
  .login-grid,
  .home-grid,
  .rankings-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 9 items / 3 cols = 3 full rows, so item 9 already lands bottom-right */
  .login-card-wrapper--hr {
    grid-column: auto;
  }
}

/* --- Tablets landscape --- */
@media (max-width: 1024px) {
  .slider-wrapper {
    height: clamp(360px, 58vw, 560px);
  }
}

/* --- Mobile nav kicks in / 3 columns -> 2 --- */
@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    background-color: var(--pink);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  }

  .nav-links.open {
    max-height: 420px;
    padding: 8px clamp(14px, 3vw, 24px) 16px;
    overflow-y: auto;
  }

  .nav-links a {
    display: block;
    padding: 14px 0; /* 44px+ tap target */
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  .hamburger-btn {
    display: flex;
  }

  .login-grid,
  .home-grid,
  .rankings-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 9 items / 2 cols = rows of 2,2,2,2,1 — item 9 lands alone bottom-left,
     pin it to the right column instead */
  .login-card-wrapper--hr {
    grid-column: 2;
  }

  /* Hero fills the viewport on handheld-sized screens */
  .hero-container {
    height: 100vh;
    height: 100svh; /* accounts for mobile browser chrome */
    min-height: 480px;
    padding: 0;
  }

  .slider-wrapper {
    width: 100%;
    height: 100%;
    flex-shrink: 1;
    border-radius: 0;
  }

  .ranking-card-header h3 {
    font-size: 18px;
  }
}

/* --- Tablets portrait / large phones --- */
@media (max-width: 768px) {
  .manual-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 0;
  }

  .manual-box {
    padding: 0 20px;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* --- Phones: everything to a single column --- */
@media (max-width: 600px) {
  .login-grid,
  .home-grid,
  .rankings-grid {
    grid-template-columns: 1fr;
  }

  /* Single column — natural order is already correct */
  .login-card-wrapper--hr {
    grid-column: auto;
  }

  .login-header,
  .manual-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .news-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
  }

  .news-date {
    margin-right: 0;
  }

  /* Cards are full width now, so store names can wrap instead of truncating */
  .user-store {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .login-card,
  .home-card {
    min-height: 0;
  }

  .slider-btn {
    bottom: 15px;
  }

  .slider-dots {
    bottom: 12px;
  }
}

/* --- Small phones --- */
@media (max-width: 480px) {
  header {
    padding: 10px 14px;
  }

  .logo-image {
    height: 32px;
  }

  .ranking-list {
    padding: 14px 12px;
    gap: 16px;
  }

  .ranking-card-header h3 {
    font-size: 17px;
  }

  .news-badge {
    left: 16px;
    padding: 7px 14px;
  }
}

/* --- Very small phones (320–380px) --- */
@media (max-width: 380px) {
  .logo-text {
    font-size: 17px;
  }

  .logo-sub {
    display: none;
  }

  .ranking-item {
    gap: 10px;
  }

  .user-avatar {
    width: 42px;
    height: 42px;
  }

  .ranking-btn {
    padding: 11px 14px;
  }

  .login-card,
  .home-card {
    padding: 16px 14px;
  }
}

/* --- Phones in landscape: don't force a full-height hero --- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero-container {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .slider-wrapper {
    height: 92vh;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ranking Lock Section Styles */
.ranking-lock-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  padding: 40px 20px;
  border-radius: 12px;
  margin: 40px 0;
}

.ranking-lock-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.ranking-lock-content {
  flex: 1;
  min-width: 280px;
}

.lock-icon-box {
  width: 50px;
  height: 50px;
  background: #ffe6ed;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.lock-icon-box svg {
  width: 24px;
  height: 24px;
  fill: #ff4d79;
}

.ranking-lock-title {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.ranking-lock-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.ranking-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ranking-tag {
  background: #e8e3f5;
  color: #6c5ce7;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.ranking-form {
  display: flex;
  gap: 10px;
  max-width: 400px;
  margin-bottom: 12px;
}

.ranking-password-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f4f4f4;
  font-size: 14px;
  outline: none;
}

.ranking-password-input:focus {
  border-color: #ff4d79;
  background: #fff;
}

.ranking-submit-btn {
  background: #ff4d79;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.ranking-submit-btn:hover {
  background: #e03b65;
}

.ranking-note {
  font-size: 12px;
  color: #888;
}

.ranking-error-msg {
  color: #ff4d79;
  font-size: 13px;
  margin-bottom: 10px;
}


/* ==========================================================================
   ADDED — empty states and news body
   Appended only; no existing rule was modified.
   ========================================================================== */

.ranking-empty,
.manual-empty,
.news-empty {
  padding: 24px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.manual-empty {
  color: #ffffff;
}



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


/* ==========================================================================
   ADDED — 404 page
   Fully self-contained: every selector is scoped under .allure-404 so no
   imported theme rule can bleed into it. Uses the existing palette only.
   ========================================================================== */

.allure-404 {
  padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(56px, 9vw, 110px);
  display: flex;
  justify-content: center;
}

.allure-404-inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
}

/* Numeral + heart */
.allure-404-art {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(14px, 2.5vw, 22px);
  line-height: 1;
}

.allure-404 .allure-404-num {
  display: block;
  font-family: "Merriweather", "Noto Serif JP", serif;
  font-size: clamp(76px, 17vw, 150px);
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(300deg, #ffbfce 0%, #d6c2ff 55%, #afe7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.allure-404-heart {
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(26px, 5vw, 44px);
  height: auto;
  transform: translate(-50%, -50%) rotate(-8deg);
  color: var(--pink);
  opacity: 0.9;
}

/* Copy */
.allure-404 .allure-404-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(18px, 3vw, 27px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  margin: 0 0 14px;
  padding: 0;
}

.allure-404 .allure-404-text {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 2;
  color: var(--ink-soft);
  margin: 0 0 clamp(26px, 4.5vw, 40px);
}

/* Quick links */
.allure-404-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
  margin-bottom: clamp(28px, 4.5vw, 42px);
}

.allure-404-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 16px 10px;
  background: #ffffff;
  border: 1px solid #ffb6c1;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.allure-404-card:hover {
  transform: translateY(-3px);
  border-color: var(--pink-strong);
  box-shadow: 0 8px 18px rgba(255, 117, 151, 0.18);
}

.allure-404-card-en {
  font-family: "Merriweather", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.allure-404-card-ja {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.03em;
}

/* Primary button — same pill as .ranking-btn */
.allure-404-back {
  margin: 0 0 clamp(18px, 3vw, 26px);
}

.allure-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 13px 30px;
  border-radius: 30px;
  background-color: var(--pink-strong);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 8px rgba(255, 117, 151, 0.3);
  transition: background-color 0.2s;
}

.allure-404-btn:hover {
  background-color: #ff5c85;
}

.allure-404-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--pink-strong);
  font-size: 10px;
  font-weight: 700;
}

.allure-404 .allure-404-help {
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 600px) {
  .allure-404-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   ADDED — News detail page (single-news.php)

   Every selector is scoped under .allure-news-single. No bare element
   selectors are used, because the stylesheet styles `header` globally for
   the site navbar and anything matching it inherits a pink background.
   Palette and type are the existing ones only.
   ========================================================================== */

.allure-news-single {
  padding: clamp(26px, 5vw, 56px) var(--gutter) clamp(50px, 8vw, 96px);
  display: flex;
  justify-content: center;
}

.allure-news-inner {
  /* Matches the login/manual/news containers on the portal */
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* ---------- Breadcrumb ---------- */
.allure-news-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 3vw, 26px);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.allure-news-crumb a {
  color: var(--pink-strong);
  font-weight: 600;
  text-decoration: none;
}

.allure-news-crumb a:hover {
  text-decoration: underline;
}

.allure-news-crumb-sep {
  color: var(--pink);
}

.allure-news-crumb-current {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ---------- Article card ---------- */
.allure-news-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #ffb6c1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(180, 140, 200, 0.12);
}

/* Pastel ribbon along the top — same sweep as the ranking card headers */
.allure-news-card::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(300deg, #ffbfce 0%, #d6c2ff 70%, #afe7ff 100%);
}

.allure-news-head {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 54px) clamp(20px, 4vw, 52px) clamp(18px, 3vw, 30px);
  background: none;
  text-align: center;
}

.allure-news-eyebrow {
  display: block;
  font-family: "Merriweather", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 14px;
}

.allure-news-single .allure-news-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(19px, 3.1vw, 30px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.035em;
  color: var(--ink);
  background: none;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.allure-news-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.allure-news-date {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 20px;
  background: #fff1f5;
  color: var(--pink-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.allure-news-rule {
  display: block;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffbfce, #d6c2ff);
}

/* ---------- Body ---------- */
.allure-news-body {
  /* The card is full width, but a 1200px line of Japanese text is unreadable.
     Cap the measure and centre it inside the card. */
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px) clamp(30px, 5vw, 56px);
  font-size: clamp(14px, 1.5vw, 15px);
  line-height: 2.05;
  color: var(--ink);
}

.allure-news-body > *:first-child {
  margin-top: 0;
}

.allure-news-body p {
  margin: 0 0 1.3em;
}

.allure-news-body p:last-child {
  margin-bottom: 0;
}

.allure-news-body h2,
.allure-news-body h3,
.allure-news-body h4 {
  font-family: "Noto Serif JP", serif;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.6;
  background: none;
  margin: 1.9em 0 0.7em;
  padding-left: 12px;
  border-left: 3px solid var(--pink);
}

.allure-news-body h2 { font-size: clamp(16px, 2.1vw, 20px); }
.allure-news-body h3 { font-size: clamp(15px, 1.9vw, 18px); }
.allure-news-body h4 { font-size: clamp(14px, 1.7vw, 16px); }

.allure-news-body a {
  color: var(--pink-strong);
  font-weight: 600;
  text-underline-offset: 3px;
}

.allure-news-body ul,
.allure-news-body ol {
  margin: 1.1em 0;
  padding-left: 1.5em;
}

.allure-news-body li {
  margin-bottom: 0.45em;
}

.allure-news-body ul li::marker {
  color: var(--pink-strong);
}

.allure-news-body img {
  height: auto;
  border-radius: 4px;
  margin: 1.4em 0;
}

.allure-news-body blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  background: #fffafc;
  border-left: 3px solid var(--pink);
  font-size: 0.96em;
}

.allure-news-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.95em;
}

.allure-news-body th,
.allure-news-body td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
}

.allure-news-body th {
  background: #fff1f5;
  color: var(--ink);
  font-weight: 700;
}

.allure-news-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

.allure-news-nobody {
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
}

/* ---------- Prev / next ---------- */
.allure-news-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 18px);
  margin-top: clamp(22px, 4vw, 34px);
}

.allure-news-navlink {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 44px;
  padding: 15px 20px;
  background: #ffffff;
  border: 1px solid #ffb6c1;
  border-radius: 4px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.allure-news-navlink:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 117, 151, 0.16);
}

.allure-news-navlink.is-next {
  text-align: right;
}

.allure-news-navlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pink-strong);
}

.allure-news-navtitle {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------- Back button ---------- */
.allure-news-back {
  margin: clamp(26px, 4.5vw, 42px) 0 0;
  text-align: center;
}

.allure-news-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 13px 30px;
  border-radius: 30px;
  background-color: var(--pink-strong);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 8px rgba(255, 117, 151, 0.3);
  transition: background-color 0.2s;
}

.allure-news-btn:hover {
  background-color: #ff5c85;
}

.allure-news-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--pink-strong);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .allure-news-nav {
    grid-template-columns: 1fr;
  }

  .allure-news-navlink.is-next {
    text-align: left;
  }

  /* Hide the article name and its leading separator on narrow screens */
  .allure-news-crumb-current,
  .allure-news-crumb-current + .allure-news-crumb-sep,
  .allure-news-crumb-sep:nth-of-type(2) {
    display: none;
  }
}

/* --- News detail: wide-card refinements --- */
@media (min-width: 1024px) {
  .allure-news-card::before {
    height: 6px;
  }

  .allure-news-nav {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .allure-news-body,
  .allure-news-head {
    max-width: none;
  }
}

/* ==========================================================================
   ADDED — sticky footer

   body already had min-height:100vh, so on short pages (news detail, 404)
   the body background showed below the footer as an empty band. Making the
   body a flex column and pushing the footer down with margin-top:auto fills
   that space without affecting long pages.
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
}

.site-footer {
  margin-top: auto;
}

/* ==========================================================================
   ADDED — logo links (header + footer)
   The logos are now anchors back to the portal top. line-height:0 stops the
   inline-image gap from changing the header height.
   ========================================================================== */

.logo-link,
.footer-logo a {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo-link:hover,
.footer-logo a:hover {
  opacity: 0.85;
}

.logo-link:focus-visible,
.footer-logo a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ==========================================================================
   ADDED — contrast corrections (WCAG AA, §14)

   White text on the pastel ranking header was ~1.4:1 against a 4.5:1
   requirement the client raised specifically. The gradient is unchanged;
   only the text darkens. Appended last so it wins over earlier rules.
   ========================================================================== */

.ranking-card-header,
.ranking-card-header h3 {
  color: #3a2a33;
}

/* ==========================================================================
   ADDED — Ranking items as individual cards

   Restyles .ranking-item from a bordered row into a standalone card:
   rank badge pinned to the top-left, rounded-square avatar, info to the
   right. CSS only — the markup in inc/ranking-render.php is unchanged.
   Appended last so it overrides the earlier row styles.
   ========================================================================== */

.ranking-list {
  gap: 12px;
  padding: 12px;
}

.ranking-item {
  position: relative;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 14px;
  background: #ffffff;
  border: 1px solid #f6e6ec;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(180, 140, 200, 0.10);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ranking-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 117, 151, 0.16);
}

/* Undo the old row separators */
.ranking-item,
.ranking-item:last-child {
  border-bottom: 1px solid #f6e6ec;
  padding-bottom: 14px;
}

/* Avatar column: no longer stacks the badge underneath */
.ranking-user-col {
  display: block;
  flex: none;
}

.user-avatar {
  display: block;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 14px;          /* rounded square, not a circle */
  object-fit: cover;
  background: linear-gradient(145deg, #ffe3ec 0%, #e9ddfb 55%, #d8f0fd 100%);
}

/* Rank badge pinned to the card corner */
.rank-badge {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--pink-strong);
  color: #ffffff;
  font-family: "Merriweather", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  box-shadow: 0 2px 6px rgba(255, 117, 151, 0.35);
}

/* Top three get a deeper badge so the podium still reads */
.ranking-item:nth-child(1) .rank-badge { background-color: #e8407a; }
.ranking-item:nth-child(2) .rank-badge { background-color: #f0619a; }
.ranking-item:nth-child(3) .rank-badge { background-color: #f77fae; }

.ranking-info-col {
  gap: 3px;
  padding-top: 2px;
}

.user-name {
  font-size: 15px;
  line-height: 1.4;
}

.user-store {
  font-size: 10.5px;
  color: var(--ink-soft);
}

.user-points {
  font-size: 15px;
  letter-spacing: 0.01em;
}

.ranking-date {
  font-size: 10px;
  color: #8a8a8a;
}

@media (max-width: 380px) {
  .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   ADDED — Ranking lock section, responsive

   At narrow widths the input and button sat side by side and pushed the
   button off-screen. min-width:0 is the key part: a flex child defaults to
   min-width:auto and refuses to shrink below its content size.
   ========================================================================== */

.ranking-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.ranking-password-input {
  flex: 1 1 200px;
  min-width: 0;
  box-sizing: border-box;
}

.ranking-submit-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 46px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .ranking-lock-wrapper {
    flex-direction: column;
  }

  .ranking-lock-image,
  .ranking-lock-content {
    width: 100%;
    max-width: none;
  }

  .ranking-lock-image img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    object-position: top center;
  }
}

@media (max-width: 600px) {
  .ranking-form {
    flex-direction: column;
  }

  .ranking-password-input,
  .ranking-submit-btn {
    width: 100%;
    flex: 1 1 auto;
  }

  .ranking-lock-image img {
    max-height: 200px;
  }
}

/* ==========================================================================
   ADDED — Hero slider: show the whole POP image

   The viewport had a fixed height with object-fit:cover, so every image was
   cropped top and bottom. Switching to an aspect-ratio box means the frame
   follows the artwork instead of clipping it.

   Ratios match the sizes recommended to the client:
     PC  1600x700  (~16:7)
     SP  1080x810  (4:3)
   ========================================================================== */

/* The slides are position:absolute, so the wrapper needs an intrinsic size.
   The aspect ratio goes HERE, on .slider-wrapper — there is no
   .slider-viewport element in this markup. */
.slider-wrapper {
  height: auto;
  aspect-ratio: 16 / 7;
}

.slide-left img,
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fill the frame edge to edge */
  object-position: center center;
}

@media (max-width: 768px) {
  .slider-wrapper {
    aspect-ratio: 4 / 3;        /* matches the SP image ratio */
  }
}

@media (max-width: 900px) {
  .hero-container {
    height: auto;
    min-height: 0;
    padding: clamp(8px, 1.5vw, 16px);
  }

  .slider-wrapper {
    height: auto;
    border-radius: 16px;
  }
}

/* Landscape phones: the earlier 78vh rule would override the ratio. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .slider-wrapper {
    height: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   ADDED — drop the outer column card

   Each rank is now its own card, so the white panel behind them was a second
   layer of the same thing. The column keeps only its gradient header; the
   list below sits directly on the page background.
   ========================================================================== */

.ranking-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.ranking-card-header {
  border-radius: 12px 12px 0 0;
}

.ranking-list {
  padding: 16px 0 0;
  background: transparent;
  gap: 16px;
}

.ranking-footer {
  padding: 18px 0 0;
  background: transparent;
  border-top: none;
}

/* Empty state no longer sits inside a panel, so give it its own surface */
.ranking-empty {
  padding: 22px 14px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* --- Breathing room below the ranking columns --- */
.rankings-grid {
  row-gap: clamp(28px, 4vw, 40px);
}

.rankings-section {
  padding-bottom: clamp(48px, 7vw, 80px);
}

/* --- Supplementary text and update label on ranking cards --- */
.ranking-note {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  background: #fff1f5;
  color: var(--pink-strong);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ranking-updated {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #f3eefb;
  color: #6b52a8;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   ADDED — one container width for every section

   .rankings-container was 1250px while the login / home / manual / news
   containers were 1200px (var(--container)), so the ranking block sat wider
   than everything above it. At 1700px+ the mismatch was 1440 vs 1360.
   All sections now follow the same token.
   ========================================================================== */

.rankings-container {
  max-width: var(--container);
}

@media (min-width: 1700px) {
  .rankings-container {
    max-width: var(--container);
  }
}

/* ==========================================================================
   ADDED — each ranking column sizes to its own content

   Grid rows stretch every column to the tallest one, and .ranking-list had
   flex-grow:1, which pushed each footer to the bottom of that stretched
   height. Expanding one column therefore dragged the other three buttons
   down with it. Columns now start at the top and end where their content
   ends, so もっと見る stays directly under its own list.
   ========================================================================== */

.rankings-grid {
  align-items: start;
}

.ranking-list {
  flex-grow: 0;
}

/* ==========================================================================
   ADDED — hero matches every other section's width

   .slider-wrapper was capped at 1400px (1800px above 1700px) with its own
   padding, while every section container uses var(--container) and
   var(--gutter). The POP slider therefore sat wider than the content below
   it. Now it lines up with サイトログイン and the rest.
   ========================================================================== */

.hero-container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.slider-wrapper {
  max-width: var(--container);
}

@media (min-width: 1700px) {
  .slider-wrapper {
    max-width: var(--container);
  }
}

/* --- Hero focal point --------------------------------------------------
   With object-fit:cover the frame is filled and the overflow is cropped.
   Which part survives is set by object-position. Default is the centre;
   add one of these classes to the <img> to bias it:
     .pop-focus-top    keep the top (faces near the top of the artwork)
     .pop-focus-bottom keep the bottom
   ---------------------------------------------------------------------- */
.slide img.pop-focus-top {
  object-position: center top;
}

.slide img.pop-focus-bottom {
  object-position: center bottom;
}

/* ==========================================================================
   ADDED — full-height hero on mobile

   The slider fills the viewport below the sticky header. --header-height is
   kept in sync by script.js; the 70px fallback covers the moment before that
   first runs. svh is used so mobile browser chrome doesn't cause a jump, with
   a vh fallback for older browsers.
   ========================================================================== */

@media (max-width: 768px) {
  .hero-container {
    padding: 0;
  }

  .slider-wrapper {
    max-width: none;
    aspect-ratio: auto;
    height: calc(100vh - var(--header-height, 70px));
    height: calc(100svh - var(--header-height, 70px));
    border-radius: 0;
    box-shadow: none;
  }

  /* Controls sit inside the taller frame rather than at its extreme edge */
  .slider-btn {
    bottom: 28px;
  }

  .slider-dots {
    bottom: 26px;
  }
}

/* Landscape phones: a full-height hero would leave no room for anything
   else, so fall back to the banner ratio. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .slider-wrapper {
    height: auto;
    aspect-ratio: 16 / 7;
  }
}

/* --- Site-top card with no URL set yet --- */
.home-card.is-unset {
  opacity: 0.72;
  cursor: default;
}

.home-card.is-unset .home-btn {
  background-color: #c9bcc4;
  box-shadow: none;
}

.home-card.is-unset:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* --- Login card with no URL set yet --- */
.login-card.is-unset {
  opacity: 0.72;
  cursor: default;
}

.login-card.is-unset .login-btn {
  background-color: #c9bcc4;
  box-shadow: none;
}

.login-card.is-unset:hover {
  transform: none;
}

/* ==========================================================================
   ADDED — banner ratio on very large screens

   A separate 1300×525 artwork can be uploaded for 1920px and wider. That is
   roughly 2.48:1 rather than the 16:7 (2.29:1) used below, so the frame
   changes to match — otherwise the wider artwork would be cropped by cover.
   ========================================================================== */

@media (min-width: 1700px) {
  /* The original stylesheet set .hero-container{height:90vh} and
     .slider-wrapper{height:100%} here, which overrode the aspect ratio.
     Both are released so the ratio governs again. */
  .hero-container {
    height: auto;
    align-items: center;
  }

  .slider-wrapper {
    height: auto;
  }
}

@media (min-width: 1920px) {
  .slider-wrapper {
    height: auto;
    aspect-ratio: 1300 / 525;
  }
}

/* --- Consultation card icon ---------------------------------------------
   The SVG uses fill:currentColor, so the circle must set a colour. Without
   it the icon inherits the body's dark ink and renders black on the pink
   card. Scoped to the icon circle so nothing else is affected.
   ---------------------------------------------------------------------- */
.icon-circle {
  color: #ffffff;
}

.icon-circle svg {
  fill: currentColor;
}

/* ==========================================================================
   ADDED — fixed 700px slider height on desktop

   Replaces the ratio-based frame above 768px with an explicit height, as
   requested. Mobile keeps its full-viewport hero, and landscape phones keep
   the short banner.
   ========================================================================== */

@media (min-width: 769px) {
  .slider-wrapper {
    aspect-ratio: auto;
    height: 700px;
  }
}

@media (min-width: 1920px) {
  .slider-wrapper {
    aspect-ratio: auto;
    height: 700px;
  }
}

/* --- Card with no logo: don't reserve empty space --- */
.card-logo:empty {
  display: none;
}

/* ==========================================================================
   ADDED — stop flex children stretching the page

   body is a flex column (for the sticky footer). Flex items default to
   min-width:auto, so a wide child — the 4-column ranking grid, a long
   unbroken string — can force the body wider than the viewport instead of
   being constrained by it. That produces a page that looks squeezed into a
   narrow column with everything overflowing.
   ========================================================================== */

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body > * {
  min-width: 0;
  max-width: 100%;
}

.hero-container,
.site-login-section,
.site-home-section,
.manual-section,
.news-section,
.rankings-section,
.site-footer {
  width: 100%;
  min-width: 0;
}

/* Slider must never exceed its own frame */
.slider-wrapper {
  max-width: 100%;
  overflow: hidden;
}

.slide,
.slide-left {
  max-width: 100%;
}

/* ==========================================================================
   FIX — consultation card placement

   The stylesheet targeted .login-card-wrapper--hr, but index.php outputs
   .consult-wrapper, so none of the grid-column rules ever matched and the
   card fell wherever the grid put it.

   With 7 login cards + 1 consultation card = 8 items:
     4 columns -> item 8 is already bottom-right, nothing to do
     3 columns -> rows of 3/3/2, item 8 lands middle-bottom, so pin it
     2 columns -> four full rows, already right-hand column
     1 column  -> natural order
   ========================================================================== */

.consult-wrapper {
  grid-column: auto;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .consult-wrapper {
    grid-column: 3;
  }
}

/* Keep the old class working too, in case any markup still uses it */
.login-card-wrapper--hr {
  grid-column: auto;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .login-card-wrapper--hr {
    grid-column: 3;
  }
}

/* ==========================================================================
   ADDED — centre the サイトログイン and マニュアル headings

   Those two used flex space-between (title left, sub-text right) while
   SITE HOME PAGE / NEWS / ALLURE RANKINGS were centred. Client asked for
   all of them to match.
   ========================================================================== */

.login-header,
.manual-header {
  display: block;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.login-title,
.manual-title {
  display: block;
  margin-bottom: 6px;
}

.login-subtitle,
.manual-subtitle {
  display: block;
}

@media (max-width: 600px) {
  .login-header,
  .manual-header {
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   ADDED — larger ranking thumbnails

   Client asked for bigger cast photos. 56 -> 76px, scaling down on small
   screens so the card still fits.
   ========================================================================== */

.user-avatar {
  width: 76px;
  height: 76px;
  border-radius: 16px;
}

.avatar-wrap {
  width: 76px;
  height: 76px;
}

.ranking-item {
  gap: 14px;
}

@media (max-width: 1180px) {
  .user-avatar {
    width: 84px;
    height: 84px;
  }
}

@media (max-width: 380px) {
  .user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
}

/* ==========================================================================
   ADDED — hero height 1000px on 1920px+ screens (client request)
   ========================================================================== */

@media (min-width: 1920px) {
  .slider-wrapper {
    aspect-ratio: auto;
    height: 1200px;
  }
}

/* ==========================================================================
   ADDED — photo-first ranking cards

   Client: the thumbnails are still too small next to the current live page,
   and text may sit over the lower part of the photo on a translucent scrim
   rather than beside it.

   The photo now fills the card and the details overlay the bottom on a
   dark gradient. CSS only — the markup in inc/ranking-render.php is
   unchanged, so nothing in PHP needs touching.
   ========================================================================== */

.ranking-item {
  display: block;
  position: relative;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 16px;
  background: #f7eef3;
}

.ranking-item,
.ranking-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ranking-user-col {
  display: block;
  width: 100%;
}

.user-avatar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
}

/* Rank badge stays pinned to the corner of the photo */
.rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 4px 12px;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* Details sit over the lower part of the photo on a scrim */
.ranking-info-col {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 14px 12px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 38%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

.ranking-info-col .user-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ranking-info-col .user-store {
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ranking-info-col .user-points {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ranking-info-col .ranking-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ranking-info-col .ranking-note,
.ranking-info-col .ranking-updated {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  text-shadow: none;
}

.ranking-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(255, 117, 151, 0.22);
}

@media (max-width: 380px) {
  .ranking-info-col {
    padding: 22px 12px 10px;
  }

  .ranking-info-col .user-name,
  .ranking-info-col .user-points {
    font-size: 15px;
  }
}

/* ==========================================================================
   FIX — hero width back in line with the other sections

   A later "max-width: 100%" guard (added to stop flex children stretching
   the page) was overriding the container cap, so the banner went full-bleed
   again. min() keeps both: never wider than the container, never wider than
   the viewport.
   ========================================================================== */

.slider-wrapper {
  max-width: min(var(--container), 100%);
}

@media (max-width: 768px) {
  /* Mobile hero stays edge to edge */
  .slider-wrapper {
    max-width: 100%;
  }
}

/* ==========================================================================
   FIX — banner keeps its 1440px size on larger screens

   Above 1700px the container widens to 1360px and the banner was also
   getting a taller frame. The client wants it identical to how it looks at
   1440px, so the banner alone is pinned to 1200 x 700 from 1700px up.
   Other sections still use the wider container.
   ========================================================================== */

@media (min-width: 1700px) {
  .slider-wrapper {
    max-width: 1200px;
    height: 700px;
    aspect-ratio: auto;
  }
}

@media (min-width: 1920px) {
  .slider-wrapper {
    max-width: 1200px;
    height: 700px;
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   FIX — desktop banner shows the whole artwork, uncropped

   A fixed 700px frame plus object-fit:cover trimmed wide POP artwork, so
   text and QR codes at the edges were being cut off.

   The frame now takes its height from the first slide's natural proportions,
   and images are contained rather than cropped. Whatever the client supplies
   is shown in full, at any screen width.

   The first slide is in normal flow to give the wrapper a height; the rest
   stay absolutely positioned on top of it, as a crossfade carousel needs.
   ========================================================================== */

@media (min-width: 769px) {
  .slider-wrapper {
    height: auto;
    aspect-ratio: auto;
    background: transparent;
  }

  .slide:first-child {
    position: relative;
  }

  .slide:first-child .slide-left {
    position: relative;
    inset: auto;
    height: auto;
  }

  .slide-left img,
  .slide img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  /* Slides 2+ overlay the first, so they need to fill its box */
  .slide:not(:first-child) .slide-left {
    position: absolute;
    inset: 0;
  }

  .slide:not(:first-child) .slide-left img {
    height: 100%;
    object-fit: contain;
  }
}

/* Same at the largest sizes — height follows the artwork, width stays capped */
@media (min-width: 1700px) {
  .slider-wrapper {
    height: auto;
    aspect-ratio: auto;
  }
}

@media (min-width: 1920px) {
  .slider-wrapper {
    height: auto;
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   FIX — banner frame always matches the section width

   Taking the height from the first slide meant slides of a different shape
   were letterboxed at the sides, so the banner looked narrower than the
   content below it.

   The frame is now a fixed 16:7 box at the full container width — the same
   width as サイトログイン and every other section. Images are contained, so
   nothing is cropped; artwork of a different shape letterboxes top/bottom
   instead, and the width never changes.

   16:7 matches the 1600x700 size requested from the client.
   ========================================================================== */

@media (min-width: 769px) {
  .slider-wrapper {
    width: 100%;
    max-width: var(--container);
    height: auto;
    aspect-ratio: 16 / 7;
    background: #ffffff;
  }

  /* All slides sit in the frame the same way again */
  .slide:first-child,
  .slide:not(:first-child) {
    position: absolute;
    inset: 0;
  }

  .slide:first-child .slide-left,
  .slide:not(:first-child) .slide-left {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .slide-left img,
  .slide img,
  .slide:not(:first-child) .slide-left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

@media (min-width: 1700px) {
  .slider-wrapper {
    max-width: var(--container);
    aspect-ratio: 16 / 7;
    height: auto;
  }
}

@media (min-width: 1920px) {
  .slider-wrapper {
    max-width: var(--container);
    aspect-ratio: 16 / 7;
    height: auto;
  }
}

/* ==========================================================================
   ADDED — header content aligned to the section container

   The pink bar stays full width, but the logo and menu now sit on the same
   left and right edges as サイトログイン and every other section, instead of
   hugging the screen edges.

   Done with padding rather than an inner wrapper, so header.php needs no
   markup change: the padding grows to absorb whatever space is left once the
   container width is accounted for, and never drops below the gutter.
   ========================================================================== */

header {
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* The mobile dropdown spans the full bar, so indent its items to match */
@media (max-width: 900px) {
  .nav-links.open {
    padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  }
}

/* Footer already uses a centred container, but pin its padding the same way
   so the two bars line up with each other as well as with the content. */
.site-footer {
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* ==========================================================================
   ADDED — header content aligned to the page container

   The pink bar still spans the full viewport, but the logo and nav now sit
   inside the same column as every section below, instead of hugging the
   screen edges. The side padding grows to whatever is needed to centre a
   container-width content box, never dropping below the normal gutter.
   ========================================================================== */

header {
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* Below the mobile-nav breakpoint the dropdown is positioned against the
   header, so keep the simple gutter there. */
@media (max-width: 900px) {
  header {
    padding-left: clamp(14px, 3vw, 24px);
    padding-right: clamp(14px, 3vw, 24px);
  }
}

/* ==========================================================================
   ADDED — ranking revisions (client request)
     - all 30 shown, no「もっと見る」button
     - jump menu above the grid
     - phone order: 当月 → 歴代デイリー → 歴代マンスリー → 生涯
     - sticky TOP button back to the ranking heading
   ========================================================================== */

/* --- Jump menu --- */
.ranking-jump {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ranking-jump-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.ranking-jump-select {
  flex: 1 1 260px;
  max-width: 420px;
  min-height: 46px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--pink-strong);
  border-radius: 24px;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--pink-strong) 50%),
                    linear-gradient(135deg, var(--pink-strong) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.ranking-jump-select:focus-visible {
  outline: 3px solid var(--pink-strong);
  outline-offset: 2px;
}

/* Each column is an anchor target; keep it clear of the sticky header */
.ranking-card[id] {
  scroll-margin-top: calc(var(--header-height, 70px) + 16px);
}

/* --- Phone order --- */
@media (max-width: 900px) {
  /* The DOM order now matches the client's order at every width, so no
     CSS reordering is needed. Only the jump menu is pinned to the top. */
  .ranking-jump {
    order: 0;
  }
}

/* --- Sticky TOP button --- */
.rank-top-btn {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pink-strong);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 117, 151, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.rank-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rank-top-btn:hover {
  background: #ff5c85;
}

.rank-top-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.rank-top-arrow {
  font-size: 17px;
  line-height: 1;
}

.rank-top-text {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (min-width: 901px) {
  /* Desktop columns are short enough not to need it */
  .rank-top-btn {
    display: none;
  }
}

@supports (padding: max(0px)) {
  .rank-top-btn {
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
}

/* --- Jump menu is a phone feature -------------------------------------
   On desktop all four columns sit side by side at the same height, so
   jumping to one does nothing visible. Hidden above the stacking
   breakpoint to avoid a control that appears broken.
   ---------------------------------------------------------------------- */
@media (min-width: 901px) {
  .ranking-jump {
    display: none;
  }
}

/* --- Single column wherever the jump menu is shown ---------------------
   The client's requested order (当月 → 歴代デイリー → 歴代マンスリー →
   生涯獲得pt) only reads as a sequence in one stack. In two columns the
   four categories fill just two rows, so jumping to one barely moved the
   page and the control looked broken.
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .rankings-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Jump menu is phone-only (client request) ---------------------------
   「表示したいランキングを選択」is not wanted on PC: the four columns sit
   side by side there, so jumping to one barely moves the page. It now
   appears only below the stacking breakpoint, where the columns are in a
   single scrollable list and the control is genuinely useful.
   ---------------------------------------------------------------------- */

/* ==========================================================================
   ADDED — make the ranking login impossible to miss

   Client: casts scrolling past didn't notice it. The panel now has a pink
   border and tinted ground so it reads as an action area rather than a
   caption, with a much larger field and button.
   ========================================================================== */

.ranking-lock-wrapper {
  border: 2px solid var(--pink-strong);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff6fa 0%, #fdf1f7 100%);
  box-shadow: 0 10px 30px rgba(255, 117, 151, 0.18);
  overflow: hidden;
}

.ranking-lock-content {
  padding: clamp(24px, 4vw, 44px) clamp(20px, 3vw, 40px);
}

/* Lock icon: filled circle instead of a pale square */
.lock-icon-box {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--pink-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(255, 117, 151, 0.4);
  margin-bottom: 16px;
}

.lock-icon-box svg {
  width: 28px;
  height: 28px;
  fill: #ffffff;
}

.ranking-lock-title {
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 10px;
}

.ranking-lock-desc {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.9;
  color: var(--ink-soft);
}

/* The prompt directly above the field */
.ranking-lock-cta {
  margin: 22px 0 10px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  color: var(--pink-strong);
}

.ranking-lock-cta::before {
  content: "▼";
  margin-right: 8px;
  font-size: 11px;
}

/* Bigger, higher-contrast field and button */
.ranking-password-input {
  min-height: 56px;
  padding: 0 18px;
  border: 2px solid var(--pink);
  border-radius: 10px;
  background: #ffffff;
  font-size: 16px;
}

.ranking-password-input:focus {
  outline: none;
  border-color: var(--pink-strong);
  box-shadow: 0 0 0 4px rgba(255, 117, 151, 0.2);
}

.ranking-submit-btn {
  min-height: 56px;
  padding: 0 34px;
  border: none;
  border-radius: 10px;
  background: var(--pink-strong);
  color: #ffffff;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 117, 151, 0.4);
  transition: background-color 0.2s, transform 0.15s;
}

.ranking-submit-btn:hover {
  background: #ff4d7d;
  transform: translateY(-1px);
}

/* Chips a little stronger so the four categories register */
.ranking-tag {
  background: #ffffff;
  border: 1px solid var(--pink);
  color: var(--pink-strong);
  font-weight: 700;
}

/* A soft pulse on the border to catch the eye while scrolling past */
@media (prefers-reduced-motion: no-preference) {
  .ranking-lock-wrapper {
    animation: allure-lock-pulse 2.8s ease-in-out infinite;
  }

  @keyframes allure-lock-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(255, 117, 151, 0.18); }
    50%      { box-shadow: 0 10px 30px rgba(255, 117, 151, 0.42); }
  }
}

@media (max-width: 600px) {
  .ranking-submit-btn,
  .ranking-password-input {
    width: 100%;
  }
}

/* ==========================================================================
   ADDED — banner fills the frame on 1920px+ screens

   On very large screens the artwork was letterboxed inside the 16:7 frame.
   Switching to cover there fills it edge to edge; any overflow is trimmed
   rather than leaving bars. Smaller screens keep `contain`, so nothing is
   cropped where the frame is already close to the artwork's shape.
   ========================================================================== */

@media (min-width: 1920px) {
  .slide-left img,
  .slide img,
  .slide:not(:first-child) .slide-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* ==========================================================================
   ADDED — every slide fills the frame the same way

   The POP artwork is not all the exact same ratio, so `contain` letterboxed
   some slides at the sides while others filled the frame — they looked like
   different widths. `cover` on all desktop sizes makes every slide fill
   edge to edge; a few pixels are trimmed where a slide's ratio differs.
   ========================================================================== */

@media (min-width: 769px) {
  .slide-left img,
  .slide img,
  .slide:first-child .slide-left img,
  .slide:not(:first-child) .slide-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* ==========================================================================
   ADDED — lock panel without the photo, form at the top
   ========================================================================== */

.ranking-lock-wrapper {
  display: block;
  max-width: 640px;
  margin: 0 auto;
}

.ranking-lock-content {
  text-align: center;
}

.lock-icon-box {
  margin-left: auto;
  margin-right: auto;
}

.ranking-lock-title {
  margin-bottom: 18px;
}

.ranking-form {
  display: block;
  margin: 0 auto 18px;
  max-width: 460px;
}

.ranking-lock-cta {
  display: block;
  text-align: center;
  margin: 0 0 10px;
}

.ranking-form-row {
  display: flex;
  gap: 10px;
}

.ranking-form-row .ranking-password-input {
  flex: 1 1 auto;
  min-width: 0;
}

.ranking-lock-desc {
  margin-bottom: 16px;
}

.ranking-tags {
  justify-content: center;
}

@media (max-width: 600px) {
  .ranking-form-row {
    flex-direction: column;
  }
}

/* ==========================================================================
   ADDED — phones show 10, then reveal 11-30 on tap
   Desktop is unaffected: all 30 stay visible.
   ========================================================================== */

.ranking-more-wrap {
  display: none;
  padding: 14px 0 4px;
}

.ranking-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  border: 2px solid var(--pink-strong);
  border-radius: 28px;
  background: #ffffff;
  color: var(--pink-strong);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.ranking-more-btn:hover,
.ranking-more-btn:focus-visible {
  background: var(--pink-strong);
  color: #ffffff;
}

.ranking-more-icon {
  font-size: 10px;
  transition: transform 0.2s;
}

.ranking-more-btn[aria-expanded="true"] .ranking-more-icon {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .ranking-more-wrap {
    display: block;
  }

  /* Ranks 11+ hidden until the button is pressed */
  .ranking-card:not(.is-expanded) .ranking-list .ranking-item:nth-child(n + 11) {
    display: none;
  }
}

/* ==========================================================================
   ADDED — ranking login bar at the top of the page

   Shown only while locked. Casts were missing the login further down, so the
   field now appears before the banner. Disappears entirely once signed in.
   ========================================================================== */

.rank-topbar {
  background: linear-gradient(135deg, #ff7597 0%, #ff5c8a 100%);
  padding: 14px var(--gutter);
  box-shadow: 0 4px 14px rgba(255, 117, 151, 0.28);
}

.rank-topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rank-topbar-text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rank-topbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.rank-topbar-icon svg {
  width: 17px;
  height: 17px;
  fill: #ffffff;
}

.rank-topbar-title {
  color: #ffffff;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rank-topbar-form {
  display: flex;
  gap: 8px;
  flex: 1 1 340px;
  max-width: 460px;
  min-width: 0;
}

.rank-topbar-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* stops iOS zooming on focus */
}

.rank-topbar-input:focus {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 1px;
}

.rank-topbar-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: var(--pink-strong);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.rank-topbar-btn:hover,
.rank-topbar-btn:focus-visible {
  background: var(--ink);
  color: #ffffff;
}

.rank-topbar-error {
  max-width: var(--container);
  margin: 10px auto 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 700px) {
  .rank-topbar-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .rank-topbar-form {
    max-width: none;
  }

  .rank-topbar-text {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .rank-topbar-form {
    flex-direction: column;
  }

  .rank-topbar-btn {
    width: 100%;
  }
}

/* --- Top-bar button hover ----------------------------------------------
   The dark hover read as a foreign colour on the pink bar. It now deepens
   into the brand rose instead: pale pink ground, deep rose text (5.12:1,
   comfortably past AA). Also fixes the resting text, which was only
   2.55:1 against white.
   ---------------------------------------------------------------------- */

.rank-topbar-btn {
  color: #c2185b;
  transition: background-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.rank-topbar-btn:hover,
.rank-topbar-btn:focus-visible {
  background: #ffeaf1;
  color: #c2185b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.rank-topbar-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ==========================================================================
   ADDED — ログイン前の注意事項 page (page-login-warning.php)

   Scoped under .warn-page. No bare element selectors, because the stylesheet
   styles `header` globally for the site navbar.
   ========================================================================== */

.warn-page {
  padding: clamp(24px, 4vw, 52px) var(--gutter) clamp(50px, 8vw, 90px);
  display: flex;
  justify-content: center;
}

.warn-inner {
  width: 100%;
  max-width: 860px;
}

/* --- Breadcrumb --- */
.warn-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 3vw, 26px);
  font-size: 12px;
  color: var(--ink-soft);
}

.warn-crumb a {
  color: var(--pink-strong);
  font-weight: 600;
  text-decoration: none;
}

.warn-crumb a:hover {
  text-decoration: underline;
}

.warn-crumb-sep {
  color: var(--pink);
}

/* --- Heading --- */
.warn-head {
  text-align: center;
  margin-bottom: clamp(22px, 4vw, 36px);
}

.warn-page .warn-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: none;
  margin: 0 0 12px;
  padding: 0;
}

.warn-lead {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.9;
  color: var(--ink-soft);
}

.warn-dest {
  display: inline-block;
  margin: 0 0 16px;
  padding: 7px 22px;
  border-radius: 20px;
  background: #ffe3ec;
  color: #c2185b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- Notice illustration --- */
.warn-figure {
  margin: 0 0 clamp(22px, 4vw, 34px);
  text-align: center;
}

.warn-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--pink);
}

/* --- STOP banner --- */
.warn-stop {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff5c8a 0%, #e0447a 100%);
  margin-bottom: clamp(18px, 3vw, 26px);
  box-shadow: 0 6px 18px rgba(224, 68, 122, 0.3);
}

.warn-stop-badge {
  flex: none;
  padding: 5px 14px;
  border-radius: 6px;
  background: #ffffff;
  color: #e0447a;
  font-family: "Merriweather", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.warn-stop-text {
  color: #ffffff;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  line-height: 1.6;
}

/* --- Prohibition list --- */
.warn-rules {
  list-style: none;
  margin: 0 0 clamp(26px, 4.5vw, 40px);
  padding: 0;
  display: grid;
  gap: 10px;
}

.warn-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #ffd7e3;
  border-left: 4px solid var(--pink-strong);
  border-radius: 6px;
}

.warn-rule-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pink-strong);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.warn-rule-body {
  min-width: 0;
}

.warn-rule-title {
  display: block;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.warn-rule-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* --- Contract text --- */
.warn-terms {
  background: #ffffff;
  border: 1px solid var(--pink);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.warn-terms-title {
  margin: 0;
  padding: 16px 22px;
  background: linear-gradient(300deg, #ffbfce 0%, #d6c2ff 70%, #afe7ff 100%);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 600;
  color: #3a2a33;
  letter-spacing: 0.03em;
}

.warn-terms-body {
  /* Long legal text: scrollable so it doesn't bury the agree button */
  max-height: 460px;
  overflow-y: auto;
  padding: 22px clamp(18px, 3vw, 28px);
  font-size: 13px;
  line-height: 2;
  color: var(--ink);
  -webkit-overflow-scrolling: touch;
}

.warn-terms-body p + p {
  margin-top: 1.2em;
}

.warn-terms-body h3,
.warn-terms-body h4 {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 1.8em 0 0.5em;
  padding-left: 10px;
  border-left: 3px solid var(--pink);
}

.warn-terms-body ol,
.warn-terms-body ul {
  margin: 1em 0 1em 1.4em;
}

/* --- Agree + continue --- */
.warn-agree {
  padding: clamp(20px, 3.5vw, 30px);
  border: 2px solid var(--pink-strong);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff6fa 0%, #fdf1f7 100%);
  text-align: center;
}

.warn-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: clamp(13px, 1.5vw, 14px);
  line-height: 1.8;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 18px;
}

.warn-check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--pink-strong);
  cursor: pointer;
}

.warn-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 38px;
  border-radius: 30px;
  background: var(--pink-strong);
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(14px, 1.7vw, 16px);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(255, 117, 151, 0.4);
  transition: background-color 0.2s, transform 0.15s, opacity 0.2s;
}

.warn-go:hover {
  background: #ff4d7d;
  transform: translateY(-1px);
}

.warn-go.is-disabled {
  background: #d7c9d1;
  box-shadow: none;
  opacity: 0.75;
  pointer-events: none;
  cursor: not-allowed;
}

.warn-note,
.warn-missing {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.warn-missing {
  color: #b3261e;
  font-weight: 600;
}

.warn-contact {
  margin-top: clamp(22px, 4vw, 32px);
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.warn-contact a {
  color: var(--pink-strong);
  font-weight: 700;
}

@media (max-width: 600px) {
  .warn-go {
    width: 100%;
    padding: 0 20px;
  }

  .warn-terms-body {
    max-height: 340px;
  }
}

/* --- Notice page: STOP banner and contract refinements ------------------ */

.warn-figure img {
  width: 100%;
  max-width: 820px;
}

/* STOP badge sits as a tab on the banner, matching the prototype */
.warn-stop {
  position: relative;
  justify-content: flex-start;
  padding: 20px 24px 20px 22px;
  border-radius: 10px;
}

.warn-stop-badge {
  font-size: 15px;
  padding: 7px 16px;
  letter-spacing: 0.12em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.warn-stop-text {
  flex: 1 1 260px;
}

.warn-terms-intro {
  margin-bottom: 1.6em;
  padding-bottom: 1.2em;
  border-bottom: 1px dashed var(--pink);
  font-size: 13px;
  line-height: 2;
}

.warn-article {
  margin-bottom: 1.6em;
}

.warn-article:last-child {
  margin-bottom: 0;
}

.warn-terms-body .warn-article-title {
  margin: 0 0 0.5em;
  padding-left: 10px;
  border-left: 3px solid var(--pink-strong);
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  background: none;
}

.warn-article p {
  margin: 0 0 0.5em;
  font-size: 13px;
  line-height: 2;
}

.warn-article p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   ADDED — news list shows 3 items, the rest scroll

   Client: 最新3記事を表示し、4記事目以降は縦スクロール。
   The height is set from the item height so exactly three are visible, and
   the list only scrolls when there is a fourth.
   ========================================================================== */

.news-list {
  --news-item-h: 118px;   /* one row incl. its gap */
  max-height: calc(var(--news-item-h) * 3);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) transparent;
}

.news-list::-webkit-scrollbar {
  width: 8px;
}

.news-list::-webkit-scrollbar-track {
  background: #fdf2f7;
  border-radius: 4px;
}

.news-list::-webkit-scrollbar-thumb {
  background: var(--pink);
  border-radius: 4px;
}

.news-list::-webkit-scrollbar-thumb:hover {
  background: var(--pink-strong);
}

/* The first item's badge sits above the box, so give the list room for it */
.news-list > .news-item-wrapper:first-child {
  margin-top: 14px;
}

@media (max-width: 600px) {
  /* Items are slightly shorter here; keep exactly three in view */
  .news-list {
    --news-item-h: 112px;
  }
}

/* ==========================================================================
   ADDED — チャット上達ムービー page (page-allure-onepoint.php)

   Replaces the migrated page's Bootstrap grid. Everything is scoped under
   .op-page, and no bare element selectors are used, because the stylesheet
   styles `header` globally for the site navbar.
   ========================================================================== */

.op-page {
  padding: clamp(24px, 4vw, 52px) var(--gutter) clamp(50px, 8vw, 90px);
  display: flex;
  justify-content: center;
}

.op-inner {
  width: 100%;
  max-width: var(--container);
}

/* --- Breadcrumb --- */
.op-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 3vw, 26px);
  font-size: 12px;
  color: var(--ink-soft);
}

.op-crumb a {
  color: var(--pink-strong);
  font-weight: 600;
  text-decoration: none;
}

.op-crumb a:hover {
  text-decoration: underline;
}

.op-crumb-sep {
  color: var(--pink);
}

/* --- Heading --- */
.op-head {
  text-align: center;
  margin-bottom: clamp(22px, 4vw, 34px);
}

.op-kicker {
  font-family: "Merriweather", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 12px;
}

.op-page .op-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  margin: 0 0 14px;
  padding: 0;
}

.op-lead {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 2;
  color: var(--ink-soft);
}

/* --- Section jump links --- */
.op-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(26px, 4.5vw, 40px);
}

.op-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--pink);
  border-radius: 20px;
  background: #ffffff;
  color: var(--pink-strong);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s;
}

.op-nav-link:hover,
.op-nav-link:focus-visible {
  background: var(--pink-strong);
  color: #ffffff;
}

/* --- Sections --- */
.op-section {
  background: #ffffff;
  border: 1px solid #ffb6c1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: clamp(20px, 3.5vw, 30px);
  box-shadow: 0 4px 14px rgba(180, 140, 200, 0.1);
  scroll-margin-top: calc(var(--header-height, 70px) + 16px);
}

.op-section-head {
  background: linear-gradient(300deg, #ffbfce 0%, #d6c2ff 70%, #afe7ff 100%);
  padding: 16px clamp(18px, 3vw, 28px);
}

.op-page .op-section-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3a2a33;
  background: none;
  margin: 0;
  padding: 0;
}

.op-section-body {
  padding: clamp(18px, 3vw, 28px);
}

.op-section-lead {
  font-size: clamp(13px, 1.5vw, 14px);
  line-height: 2;
  color: var(--ink);
  margin-bottom: clamp(16px, 2.5vw, 24px);
}

/* --- Video grid --- */
.op-grid {
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
}

.op-grid.is-two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.op-movie {
  margin: 0;
  min-width: 0;
}

.op-movie-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.op-movie-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--pink-strong);
}

.op-movie-note {
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.op-movie-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #2e2430;
  aspect-ratio: 16 / 9;
}

.op-movie-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #2e2430;
}

/* --- Back button --- */
.op-back {
  margin-top: clamp(24px, 4vw, 36px);
  text-align: center;
}

.op-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 30px;
  background: var(--pink-strong);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(255, 117, 151, 0.35);
  transition: background-color 0.2s, transform 0.15s;
}

.op-back-btn:hover {
  background: #ff4d7d;
  transform: translateY(-1px);
}

.op-back-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--pink-strong);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 700px) {
  .op-grid.is-two-up {
    grid-template-columns: 1fr;
  }

  .op-back-btn {
    width: 100%;
    justify-content: center;
  }
}

/* A lone video shouldn't span the full 1200px container */
.op-grid:not(.is-two-up) .op-movie {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ==========================================================================
   ADDED — 超新人さんマニュアル (page-allure-manual.php)

   Scoped under .nm-page. No bare element selectors, because the stylesheet
   styles `header` globally for the site navbar.
   ========================================================================== */

.nm-page {
  padding: clamp(24px, 4vw, 52px) var(--gutter) clamp(50px, 8vw, 90px);
  display: flex;
  justify-content: center;
}

.nm-inner {
  width: 100%;
  max-width: var(--container);
}

/* --- Breadcrumb --- */
.nm-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 3vw, 26px);
  font-size: 12px;
  color: var(--ink-soft);
}

.nm-crumb a {
  color: var(--pink-strong);
  font-weight: 600;
  text-decoration: none;
}

.nm-crumb a:hover {
  text-decoration: underline;
}

.nm-crumb-sep {
  color: var(--pink);
}

/* --- Heading --- */
.nm-head {
  text-align: center;
  margin-bottom: clamp(22px, 4vw, 34px);
}

.nm-kicker {
  font-family: "Merriweather", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 12px;
}

.nm-page .nm-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  margin: 0 0 14px;
  padding: 0;
}

.nm-lead {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 2;
  color: var(--ink-soft);
}

/* --- Tabs --- */
.nm-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 14px);
  margin-bottom: clamp(22px, 4vw, 32px);
}

.nm-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 14px;
  border: 2px solid var(--pink);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.nm-tab:hover {
  border-color: var(--pink-strong);
  transform: translateY(-1px);
}

.nm-tab.is-active {
  background: var(--pink-strong);
  border-color: var(--pink-strong);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(255, 117, 151, 0.35);
}

.nm-tab-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: #fff1f5;
  color: var(--pink-strong);
  font-family: "Merriweather", serif;
  font-size: 13px;
  line-height: 1;
}

.nm-tab.is-active .nm-tab-no {
  background: #ffffff;
}

/* --- Panels --- */
.nm-panel-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(17px, 2.3vw, 23px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 clamp(18px, 3vw, 26px);
  background: none;
  padding: 0;
}

/* Without JavaScript every panel shows, separated clearly */
.nm-panel + .nm-panel {
  margin-top: clamp(34px, 6vw, 56px);
  padding-top: clamp(28px, 5vw, 44px);
  border-top: 2px dashed var(--pink);
}

/* Once JS runs, only the selected panel is shown */
.nm-js .nm-panel {
  display: none;
}

.nm-js .nm-panel.is-active {
  display: block;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* --- Intro --- */
.nm-intro {
  background: #ffffff;
  border: 1px solid #ffb6c1;
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  margin-bottom: clamp(16px, 2.5vw, 24px);
}

.nm-intro.has-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

.nm-intro-img img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.nm-intro-text p,
.nm-intro-after p {
  font-size: clamp(13px, 1.5vw, 14px);
  line-height: 2;
  color: var(--ink);
}

.nm-intro-text p + p,
.nm-intro-after p + p {
  margin-top: 1em;
}

.nm-intro-after {
  margin-bottom: clamp(20px, 3.5vw, 30px);
  padding: clamp(14px, 2.5vw, 20px) clamp(16px, 3vw, 24px);
  border-left: 4px solid var(--pink-strong);
  background: #fff6fa;
  border-radius: 0 6px 6px 0;
}

/* --- Sections --- */
.nm-section {
  background: #ffffff;
  border: 1px solid #ffb6c1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: clamp(16px, 3vw, 24px);
  box-shadow: 0 4px 14px rgba(180, 140, 200, 0.1);
}

.nm-section-head {
  padding: 14px clamp(16px, 3vw, 26px);
  background: linear-gradient(300deg, #ffbfce 0%, #d6c2ff 70%, #afe7ff 100%);
}

.nm-page .nm-section-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3a2a33;
  background: none;
  margin: 0;
  padding: 0;
}

/* 初級 / 上級 / アダルト / NG each get their own header tint */
.nm-section.tone-higher .nm-section-head {
  background: linear-gradient(300deg, #ffd9a8 0%, #ffc2d6 70%, #e3c8ff 100%);
}

.nm-section.tone-adult .nm-section-head {
  background: linear-gradient(300deg, #f0c2e4 0%, #d6b6f5 70%, #bcd4ff 100%);
}

.nm-section.tone-ng .nm-section-head {
  background: linear-gradient(300deg, #ffb3b3 0%, #ffc4c4 70%, #ffd9cf 100%);
}

.nm-section-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(18px, 3vw, 28px);
  align-items: start;
}

.nm-section-body.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.nm-section-info img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.nm-movies-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.nm-movies-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--pink-strong);
}

.nm-movie-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #2e2430;
  margin-bottom: 12px;
}

.nm-movie-frame:last-child {
  margin-bottom: 0;
}

.nm-movie-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #2e2430;
}

/* --- Summary --- */
.nm-summary {
  text-align: center;
  margin-top: clamp(18px, 3vw, 28px);
}

.nm-summary img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* --- Back button --- */
.nm-back {
  margin-top: clamp(26px, 4.5vw, 40px);
  text-align: center;
}

.nm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 30px;
  background: var(--pink-strong);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(255, 117, 151, 0.35);
  transition: background-color 0.2s, transform 0.15s;
}

.nm-back-btn:hover {
  background: #ff4d7d;
  transform: translateY(-1px);
}

.nm-back-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--pink-strong);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .nm-section-body,
  .nm-intro.has-image {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .nm-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .nm-tab {
    min-height: 52px;
    justify-content: flex-start;
  }

  .nm-back-btn {
    width: 100%;
    justify-content: center;
  }
}