/* =========================================================
   hokuroboy.com Stylesheet (single-file / organized)
   Structure:
   00 Reset
   10 Tokens
   20 Base
   30 Layout
   40 Utilities / Effects
   50 Components
   60 Patterns
   70 Pages
   75 Responsive (All device responsive gathered here)
   80 Live Special (260322)
   ========================================================= */

/* =========================================================
   00 Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* =========================================================
   10 Design Tokens
   ========================================================= */
:root{
  --nav-offset: 72px;
  --content-max: 800px;

  --fade-dy: 20px;
  --fade-dur: .8s;

  --nav-max: 1200px;
  --nav-pad-y: 25px;
  --nav-pad-x: 20px;

  --btn-bd: rgba(255,255,255,.15);
  --btn-bg: rgba(255,255,255,.04);
  --btn-radius: 10px;

  --panel-bg: rgba(0,0,0,.92);
  --panel-blur: 2px;
  --tap-size: 44px;

  --live-gap: 4rem;

  --sp-heading-size: clamp(4rem, 8vw + .5rem, 5rem);
  --sp-heading-line: 1.1;
  --sp-heading-letter: 0;
  --sp-heading-weight: 700;

  --sp-nav-size: clamp(3.2rem, 6.6vw + .4rem, 4.2rem);
  --sp-nav-line: 1.1;
  --sp-nav-letter: 0;
  --sp-nav-weight: 700;

  --fv-top-pad: clamp(2.6rem, 5.2vh, 3.8rem);
  --fv-title-size: clamp(3.2rem, 7vw, 5.6rem);
  --fv-title-line: 1.05;
  --fv-title-letter: .06em;

  --fv-media-maxw: 450px;
  --flyer-w: 450px;
  --fv-media-aspect: 210 / 297;
  --fv-media-maxh: calc(100svh - var(--nav-offset) - 220px);

  --fv-title-inset: 44px;
  --fv-hero-pad-x: 20px;
  --fv-hero-pad-b: 1.25rem;
  --fv-hero-gap: 1.2rem;

  --fv-title-top: 44px;
  --fv-scroll-bot: 18px;
  --fv-side-pad: 20px;

  --fv-pad-top-pc: clamp(18px, 3.2vh, 38px);
  --fv-pad-bot-pc: clamp(14px, 2.4vh, 28px);
  --fv-gap-1-pc: clamp(10px, 1.6vh, 16px);
  --fv-gap-2-pc: clamp(10px, 1.6vh, 16px);
  --fv-media-frame-radius: 12px;

  --cta-max: 560px;
  --cta-gap: 18px;

  --cta-bg: rgba(255,255,255,.08);
  --cta-bd: rgba(255,255,255,.16);
  --cta-bg-hover: rgba(255,255,255,.12);
  --cta-bd-hover: rgba(255,255,255,.24);
  --cta-radius: 999px;

  /* Flyer (A4) */
  --flyer-ratio: 210 / 297;
  --flyer-gap: 1.5rem;
  --flyer-radius: 14px;
}

/* =========================================================
   20 Base
   ========================================================= */
body{
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #000;
  color: #fff;
  font-family: "Hiragino Mincho ProN", serif;
  overflow-x: clip;
}

@supports not (overflow-x: clip){
  body{ overflow-x: hidden; }
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: #000 center/contain no-repeat url('/png/black.png');
  opacity: .2;
  z-index: -1;
}

h1{
  margin: 0;
  overflow-wrap: anywhere;
}

a{ color: inherit; }

main a{
  color: #ccc;
  text-decoration: none;
}

/* タイトルリンク（h1内のa等） */
.page-title a,
.page-title a:visited,
.page-title a:hover{
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   30 Layout
   ========================================================= */
main{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(var(--nav-offset) + env(safe-area-inset-top, 0px));
}

/* =========================================================
   Section Stack (vertical rhythm controller)
   ========================================================= */
.section-stack{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.section-stack > .page-body{ margin-bottom: 0; }
.section-stack > .contact-copy{ margin: 0; }

/* =========================================================
   40 Utilities / Effects
   ========================================================= */
.fade-in{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .fade-in{ opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   50 Components
   ========================================================= */

/* ---------- Global Nav ---------- */
.global-nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1500;
  margin: 0;
  padding: 0;
}

.global-nav .global-nav-inner{
  max-width: var(--nav-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-pad-y) var(--nav-pad-x);
}

.global-nav .brand{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.25rem;
  letter-spacing: .05em;
  text-decoration: none;
  color: #fff;
}

.global-nav .nav-list{
  list-style: none;
  display: flex;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
}

.global-nav .nav-link{
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: .05em;
}
.global-nav .nav-link:hover{ text-decoration: underline; }

.global-nav .hamburger{
  display: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: #fff;
  border-radius: var(--btn-radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
}
.global-nav .hamburger:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Mobile Panel ---------- */
body > .mobile-panel{
  --panel-pad-top: calc(var(--nav-offset) + env(safe-area-inset-top, 0px));

  position: fixed;
  inset: 0;
  z-index: 2000;

  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  padding-top: var(--panel-pad-top);

  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));

  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

body > .mobile-panel.is-visible{
  display: flex;
  pointer-events: auto;
}

body > .mobile-panel.open{
  transform: translateX(0);
  opacity: 1;
}

body > .mobile-panel .mobile-link{
  color: #fff;
  text-decoration: none;
  font-size: clamp(2.4rem, 7vw, 4rem);
  letter-spacing: .06em;
}

body > .mobile-panel .mobile-close{
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;

  width: var(--tap-size);
  height: var(--tap-size);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--btn-radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 24px;

  cursor: pointer;
  z-index: 2100;
}
body > .mobile-panel .mobile-close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.no-scroll{ overflow: hidden; }

@media (prefers-reduced-motion: no-preference){
  body > .mobile-panel{ transition: transform .43s ease, opacity .43s ease; }
}

/* Page Title (works with or without .page-hero) */
.page-title{
  width: min(92vw, var(--content-max));
  margin: 0;
  text-align: center;
  overflow-wrap: anywhere;

  font-size: var(--fv-title-size);
  line-height: var(--fv-title-line);
  letter-spacing: var(--fv-title-letter);

  text-wrap: balance;
}

/* ---------- Content Blocks ---------- */
.page-body,
.page-link{
  width: min(92vw, var(--content-max));
  margin: 0 auto;
  padding: 0;
}

.page-body{
  text-align: center;
  overflow-wrap: anywhere;
  margin-bottom: 3rem;
}

.page-body p{
  font-size: clamp(.98rem, 1vw + .7rem, 1.12rem);
  line-height: 1.8;
  margin: 0;
  float: none;
  width: 100%;
}

p.dropcap{ text-align: left; }
p.dropcap::first-letter{
  float: left;
  font-size: 3em;
  line-height: 1;
  padding-right: .1em;
  font-weight: 700;
}

p.center{ text-align: center; }

.page-body h2{
  font-size: clamp(1.1rem, 1.4vw + .7rem, 1.6rem);
  letter-spacing: .08em;
  margin: 2.2rem 0 .8rem;
}

.page-body ul{
  margin: .6rem auto 0;
  padding-left: 1.2em;
  text-align: left;
}

.page-body li{
  font-size: clamp(.98rem, 1vw + .7rem, 1.12rem);
  line-height: 1.8;
  margin: .3rem 0;
}

.page-body hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 2rem 0;
}

.page-link{
  text-align: center;
  font-size: 4em;
  white-space: nowrap;
  word-break: keep-all;
}

.page-link a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .1em .4em;
}

.sp-br{ display: none; }

/* ---------- CTA System (unified) ---------- */
.cta,
.cta-stack{
  width: min(92vw, var(--cta-max));
  margin: 0 auto;
  display: grid;
  gap: var(--cta-gap);
  justify-items: stretch;
  align-items: start;
}

.cta.is-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1rem;
}

.cta a,
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 48px;

  padding: .62em .98em;

  background: var(--cta-bg);
  border: 1px solid var(--cta-bd);
  border-radius: var(--cta-radius);

  color: #fff;
  text-decoration: none;
  font: inherit;

  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .02s ease-in-out;
}

.cta.is-row > a,
.cta.is-row > .cta-btn{ width: auto; }

.cta a:hover,
.cta-btn:hover{
  background: var(--cta-bg-hover);
  border-color: var(--cta-bd-hover);
}

.cta a:active,
.cta-btn:active{ transform: translateY(1px); }

.cta a:focus-visible,
.cta-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* backward compat */
.cta.is-stack a{ width: 100%; }

/* ---------- Letter accordion ---------- */
.letter-panel{
  width: 100%;
  box-sizing: border-box;

  border-radius: 24px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.14);

  display: grid;
  gap: 10px;

  max-height: 0;
  opacity: 0;
  overflow: hidden;

  padding: 0;
  border-width: 0;

  transition: max-height 320ms ease, opacity 220ms ease, padding 220ms ease, border-width 220ms ease;
}

.letter-panel.is-open{
  max-height: 260px;
  opacity: 1;
  padding: 14px 16px;
  border-width: 1px;
}

.letter-panel__item{
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: 14px 16px;
  border-radius: 9999px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.16);

  color: #fff;
  text-align: center;
  text-decoration: none;
  font: inherit;

  cursor: pointer;
}
.letter-panel__item:hover{ background: rgba(0,0,0,.22); }

/* ---------- Contact block ---------- */
.contact-copy{
  width: 100%;
  margin: 6rem 0 4rem;
  text-align: center;
}

.contact-copy .contact-title,
.contact-copy .cta,
.contact-copy .cta-stack{
  width: min(92vw, var(--cta-max));
  margin-inline: auto;
}

.contact-title{
  font-size: 1.4rem;
  letter-spacing: .2em;
  margin-bottom: 1rem;
}

.contact-cta{ gap: 10px; }
.contact-cta.is-open{ gap: var(--cta-gap); }

.contact-note{
  margin: .25rem auto 0;
  width: min(92vw, var(--cta-max));
  font-size: .85rem;
  line-height: 1.6;
  letter-spacing: .08em;
  opacity: .65;
  text-align: left;
}

.contact-note a{
  color: #ccc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover){
  .contact-note a:hover{ opacity: 1; }
}

/* ===== Back to Top FAB ===== */
.toTopFab{
  position: fixed;
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 50;

  display: grid;
  place-items: center;

  /* hidden by default */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity .22s ease,
    transform .22s ease;
}

.toTopFab.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toTopFab:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

.toTopFab__icon{
  width: 10px;
  height: 10px;
  border-left: 2px solid rgba(255,255,255,.85);
  border-top: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce){
  .toTopFab{
    transition: none;
  }
}


/* ---------- Footer ---------- */
footer{
  color: #ccc;
  position: relative;
  z-index: 1;
  background: transparent;
  font-size: 1.5em;
  padding: 2em 1em;
  text-align: center;
  margin-top: auto;
}

.footer-copy{ margin: 0 0 .5em; }

footer a{
  color: #ccc;
  text-decoration: none;
}
footer a:hover{ text-decoration: underline; }

/* =========================================================
   Flyers (shared component)
   ========================================================= */
/* wall: flyers are stacked vertically */
.flyer-wall{
  width: min(92vw, 980px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--flyer-gap);
}

/* card: same size everywhere (FV / ARCHIVE) */
.flyer-card{
  width: min(92vw, var(--flyer-w));
  aspect-ratio: var(--flyer-ratio);

  border-radius: var(--flyer-radius);
  overflow: hidden;

  display: block;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* normalize media */
.flyer-card picture,
.flyer-card img{
  width: 100%;
  height: 100%;
  display: block;
}

.flyer-card img{ object-fit: cover; }

/* CTA: just swap wrapper to <a> */
.flyer-card--cta{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

@media (hover:hover){
  .flyer-card--cta:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.30);
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 38px rgba(0,0,0,.35);
  }
}

/* pair: two flyers side-by-side (PC), stacked (SP) */
.flyer-pair{
  width: min(98vw, calc(var(--flyer-w) * 2 + var(--flyer-gap)));
  margin: 0 auto;

  display: flex;
  justify-content: center;
  gap: var(--flyer-gap);
}

.flyer-pair > .flyer-card{
  width: min(46vw, var(--flyer-w));
}

/* =========================================================
   60 Patterns
   ========================================================= */

/* ---------- Page Hero (mobile / base absolute layout) ---------- */
.page-hero{
  position: relative;
  width: 100%;
  height: calc(100svh - var(--nav-offset));
  padding-inline: var(--fv-side-pad);
  text-align: center;
}

.page-hero .page-title{
  position: absolute;
  top: var(--fv-title-top);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(92vw, var(--content-max));

  font-size: var(--fv-title-size);
  line-height: var(--fv-title-line);
  letter-spacing: var(--fv-title-letter);
}

.page-hero > :not(.page-title):not(.scroll-anchor){
  position: absolute;
  left: 50%;
  top: calc(var(--fv-title-top) + var(--fv-title-size) * 1.05 + 12px);
  transform: translateX(-50%);

  width: min(92vw, var(--content-max));
  max-height: calc(100% - (var(--fv-title-top) + 140px) - var(--fv-scroll-bot));
  overflow: hidden;
}

.page-hero .scroll-anchor{
  position: absolute;
  left: 50%;
  bottom: var(--fv-scroll-bot);
  transform: translateX(-50%);
  margin: 0;
  width: auto;
}

/* ---------- Scroll Anchor ---------- */
.scroll-anchor{
  width: 100%;
  display: flex;
  justify-content: center;

  text-align: center;
  margin-top: clamp(10px, 2.4vh, 22px);
  margin-bottom: clamp(6px, 1.6vh, 12px);
  padding-top: 0;
}

.scroll-anchor a{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;

  margin-inline: auto;

  color: rgba(255,255,255,.7);
  text-decoration: none;

  font-size: .8rem;
  letter-spacing: .22em;
  opacity: .85;
}

.scroll-anchor .arrow{ display: none; }

.scroll-anchor a::after{
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(255,255,255,.65);
  transform: rotate(45deg);
  opacity: .8;
}

@media (hover: hover){
  .scroll-anchor a:hover{
    color: rgba(255,255,255,.9);
    opacity: 1;
  }
}

/* ---------- Anchor offset (avoid fixed nav overlap) ---------- */
#content,
#archive,
#letter{
  scroll-margin-top: calc(var(--nav-offset) + env(safe-area-inset-top, 0px) + 1.5rem);
}

/* ---------- Flyers ---------- */
.flyer-heading{
  text-align: center;
  margin-bottom: 2rem;
}

/* =========================================================
   70 Pages
   ========================================================= */

/* ---------- TOP ---------- */
body.top{
  height: 100svh;
  overflow: hidden;
}

body.top main{
  height: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 0;
}

body.top h1{ margin-top: 0; }

body.top .hero-title{
  --hero-gap: .6rem;
  --hero-offset: 1.85rem;

  margin: 0;
  line-height: 1;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-gap);

  max-width: 92vw;
  padding-inline: 12px;

  transform: translateY(var(--hero-offset));
}

body.top .hero-title .line{
  display: block;
  white-space: nowrap;
}

body.top .hero-title .line1{
  font-size: clamp(1.6rem, 5.2vw, 3.6rem);
  font-weight: 400;
}

body.top .hero-title .line2{
  font-size: clamp(7.5rem, 7.2vw, 8.2rem);
  font-weight: 700;
}

/* ---------- LIVE ---------- */
body.live main{ --live-gap: 2rem; }

body.live .page-body{ margin-bottom: var(--live-gap); }
body.live .flyer{ margin-top: 0; }

/* LIVE ARCHIVE : text-based items */
body.live .archive-item--text{
  box-sizing: border-box;
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
  padding: 1.1rem 1.2rem;

  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  border-radius: 12px; 
}

body.live .archive-item--text .archive-title{
  margin: 0;
  font-size: clamp(1rem, 1.2vw + .9rem, 1.4rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  text-align: center;
}

body.live .archive-item--text .archive-meta{
  margin-top: .4rem;
  font-size: .9rem;
  letter-spacing: .08em;
  opacity: .75;
  text-align: center;
}

body.live .page-hero.live-fv .flyer-card{
  width: min(
    92vw,
    var(--flyer-w),
    calc(var(--fv-media-maxh) * (210 / 297))
  );
}

@media (hover: hover){
  body.live .archive-item--text:hover{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
  }
}

/* ---------- ABOUT ---------- */
.about-fv{
  position: relative;
  width: 100%;
  height: calc(100svh - var(--nav-offset));
  padding-inline: var(--fv-side-pad);
  text-align: center;
}

body.about .about-seq{
  --about-gap: 1.25rem;
  --about-img-max: 560px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--about-gap);
  margin: 0;
  padding: 0;
}

.about-fv-photos{
  width: min(92vw, 1200px);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.about-fv-photos figure{
  margin: 0;
  flex-shrink: 0;

  border-radius: 12px;
  overflow: hidden;

  border: 0;
  box-shadow: 0;

  aspect-ratio: 210 / 297;
}

.about-fv-photos picture,
.about-fv-photos img{
  width: 100%;
  height: 100%;
  display: block;
  object-position: 50% 50%;
  object-fit: cover;
}

body.about .about-fv-photos{ transform: translateY(-10px); }

/* ABOUT internal navigation */
body.about .about-nav{
  margin: 2.5rem auto 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;

  font-size: 1.1rem;
  letter-spacing: .18em;
}

body.about .about-nav__link{
  color: #fff;
  text-decoration: none;
  opacity: .85;
}

body.about .about-nav__sep{
  color: #fff;
  opacity: .35;
}

@media (hover: hover){
  body.about .about-nav__link:hover{
    opacity: 1;
    text-decoration: underline;
  }
}

/* ABOUT: content wrapper should be full width */
body.about .about-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- RADIO ---------- */
body.radio .radio-art{
  --radio-art-max: 480px;

  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

body.radio .radio-art picture,
body.radio .radio-art img{
  display: block;
  width: min(92vw, var(--radio-art-max));
  height: auto;
  aspect-ratio: 1 / 1;

  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
  background: rgba(255,255,255,.04);

  max-height: var(--fv-media-maxh);
  object-fit: cover;
}

body.radio .radio-art .cta{
  width: min(92vw, var(--radio-art-max));
}

body.radio .cta-stack{
  margin: 0 auto 2rem;
  width: min(92vw, 640px);
}

body.radio .contact-note{
  margin-top: -19px;
}

/* ---------- NEWS ---------- */
.news-wrap{
  width: min(92vw, 900px);
  margin: 0 auto;
  padding: 2.25rem 0 4rem;
}

/* Primary Tabs */
.news-tabs{
  width: 100%;
  margin: 0 auto 1.15rem;
  padding: .2rem 0;

  display: flex;
  justify-content: center;
  gap: 1.35rem;

  border-bottom: 1px solid rgba(255,255,255,.18);
}

.news-tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;

  padding: .9rem .25rem;
  letter-spacing: .14em;
  cursor: pointer;

  opacity: .62;
  position: relative;
}
.news-tab:hover{ opacity: .82; }

.news-tab.is-active{ opacity: 1; }

.news-tab.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: rgba(255,255,255,.92);
}

/* Panel spacing */
.news-panel{ margin-top: .85rem; }

/* Secondary Filter */
.news-controls{
  width: 100%;
  margin: 0 auto 1.5rem;
}

/* Tag buttons */
.news-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
}

.news-tag{
  appearance: none;
  border: 1px solid rgba(255,255,255,.24);
  background: transparent;
  color: inherit;
  font: inherit;

  padding: .48rem .85rem;
  border-radius: 999px;
  letter-spacing: .06em;
  cursor: pointer;

  opacity: .86;
  font-size: .92em;
}

.news-tag:hover{
  border-color: rgba(255,255,255,.5);
  opacity: .95;
}

.news-tag.is-active{
  border-color: rgba(255,255,255,.9);
  opacity: 1;
}

/* List / Items */
.news-list{
  display: grid;
  gap: 1.6rem;
}

.news-item{
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 1.25rem;
}

.news-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.news-date{
  opacity: .78;
  letter-spacing: .06em;
}

/* Chips */
.news-chips{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.news-chip{
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .12rem .5rem;
  font-size: .82em;
  opacity: .78;
  letter-spacing: .04em;
}

.news-title{
  margin: .65rem 0 .35rem;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}

.news-body{
  margin: 0;
  opacity: .9;
  line-height: 1.85;
}

/* Body links inside NEWS */
.news-body a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  opacity: .95;
}
.news-body a:hover{ opacity: 1; }

/* Empty */
.news-empty{
  text-align: center;
  opacity: .8;
  margin-top: 2.25rem;
}

/* Special chip */
.news-chip[data-tag="SOLOLIVE"]{
  border-color: rgba(255,255,255,.85);
  opacity: 1;
  letter-spacing: .08em;
}
.news-chip[data-tag="SOLOLIVE"]::before{
  content: "★";
  display: inline-block;
  margin-right: .35em;
  transform: translateY(-.02em);
  opacity: .95;
}

/* ---------- PRIVACY ---------- */
body.privacy .page-body{ text-align: left; }
body.privacy .page-body h2{ text-align: center; }

body.privacy .privacy-contact .letter-panel{
  display: grid;
  opacity: 1;
  max-height: none;
  pointer-events: auto;
}

.policy-date{
  text-align: center;
  margin-top: 2rem;
  font-size: .9rem;
  opacity: .7;
}

/* ---------- MEMBERS ---------- */
body.members main.page{
  min-height: calc(100svh - var(--nav-offset));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

body.members .members-form{
  width: min(90vw, 420px);
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
}

body.members .members-enter{ width: 100%; }

body.members .members-form input{
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: inherit;
  font: inherit;
  padding: 12px 14px;
  text-align: center;
  letter-spacing: .12em;
}

/* iOS対策：datetime-localだけは別扱いで安定させる */
body.members .members-form input[type="datetime-local"]{
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  display: block;

  /* iOSの専用UIに負けないように */
  -webkit-appearance: none;
  appearance: none;

  /* 見た目の高さを他inputに合わせる */
  padding: 12px 14px;
  min-height: 48px;        /* ←ここが効く */
  line-height: 1.2;

  /* 文字の見え方（必要なら） */
  text-align: center;
  letter-spacing: .12em;
}

/* iOSの中身表示の位置ズレ対策（効く端末だけ効く） */
body.members .members-form input[type="datetime-local"]::-webkit-date-and-time-value{
  text-align: center;
}

body.members .members-form label{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.members .page-body{ text-align: left; }
body.members .page-body h2{ text-align: center; }

.members-help{
  margin-top: 24px;
  text-align: center;
  font-size: .7rem;
  line-height: 1.6;
  opacity: .6;
  letter-spacing: .04em;
}

.members-help__link{
  display: inline-block;
  margin-top: 6px;
  font-size: .72rem;
  text-decoration: none;
}
.members-help__link:hover{
  opacity: 1;
  text-decoration: underline;
}

.members-alert{
  margin: 1.2em auto 1.6em;
  padding: .9em 1em;
  max-width: 28rem;
  font-size: .95em;
  line-height: 1.5;
  text-align: center;
}

.members-alert--error{
  color: #f5f5f5;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
}

.members-alert--info{
  color: #f5f5f5;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
}

/* MEMBERS placeholder */
.members-form input::placeholder{ color: rgba(255,255,255,.35); }
.members-form input::-webkit-input-placeholder{ color: rgba(255,255,255,.35); }
.members-form input:-ms-input-placeholder{ color: rgba(255,255,255,.35); }

/* MEMBERS内の注記は「contact-note」の幅指定を無効化する */
body.members .members-form .contact-note{
  width: 100%;
  margin: .6rem 0 0;
  text-align: left;
}

/* 念のため：flex内で子要素の幅に引っ張られないように */
body.members .members-form{ min-width: 0; }

/* =========================================================
   MEMBERS : index entry link
   ========================================================= */
body.members:not(.mypage) .members-entry{
  margin-top: 42px;
  text-align: center;
}

.members-entry__link{
  display: inline-block;
  padding: 14px 26px;

  font-size: 0.95rem;
  letter-spacing: .18em;

  color: #fff;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;

  background: transparent;

  transition:
    border-color .25s ease,
    background-color .25s ease,
    transform .25s ease;
}

.members-entry__link:hover{
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* =========================================================
   MEMBERS : MY PAGE (unified)
   ========================================================= */
body.members.mypage main.page{
  justify-content: flex-start;
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  gap: 22px;
}

/* ✅ 統一：カード柱(600px)に揃える */
body.members.mypage .mp-wrap{
  width: min(92vw, 600px);
  margin: 0 auto;
}

/* 見出しセクションの縦リズム */
body.members.mypage .mp-head{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.members.mypage .mp-subtitle{
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .22em;
  opacity: .75;
}

/* Profile */
.mp-profile{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;

  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

/* Profile：少し余白を足して “詰まり感” 解消 */
body.members.mypage .mp-profile{ padding-top: 6px; }

.mp-avatar{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
}

.mp-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mp-avatarBlock{
  display: grid;
  gap: 8px;
  justify-items: center;
}

/* アイコンをほんの少し左寄せ（“中心”から“左柱”へ） */
body.members.mypage .mp-avatarBlock{ justify-items: start; }

.mp-edit{
  font-size: .82rem;
  letter-spacing: .14em;
  opacity: .72;
  text-decoration: none;
  white-space: nowrap;
}
.mp-edit:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-edit--under{
  display: inline-block;
  opacity: .75;
}

.mp-profile__body{ min-width: 0; }
.mp-nameBlock{ padding: 8px 0; }

.mp-nameLabel{
  opacity: .6;
  letter-spacing: .14em;
  font-size: .85rem;
}

.mp-nameValue{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  font-size: clamp(1.25rem, 4.2vw, 1.9rem);
  letter-spacing: .06em;
  min-width: 0;
}

/* ホクロ★ネームを少し大きく */
body.members.mypage .mp-nameValue{
  font-size: clamp(1.35rem, 4.4vw, 2.05rem);
}

/* Card (3D / gloss / stable) */
.mp-card3d--big{
  aspect-ratio: 1.586 / 1;
  width: min(92vw, 600px);
  height: auto;

  margin: 0 auto;
  perspective: 1400px;
  border-radius: 18px;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mp-card3d__inner{
  position: relative;
  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;

  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}

.mp-card3d.is-flipped .mp-card3d__inner{
  transform: rotateY(180deg);
}

/* 表裏は「完全一致」 */
.mp-cardface{
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 18px;
  box-sizing: border-box;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: #0a0a0a;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 光沢 */
.mp-cardface--gloss{ overflow: hidden; }

.mp-cardface--gloss::before{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background:
    radial-gradient(closest-side at 30% 30%,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 60%),
    linear-gradient(120deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,0) 45%);
  transform: rotate(-8deg);
  pointer-events: none;
  opacity: .9;
}

.mp-cardface--gloss::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.10),
      rgba(255,255,255,0) 28%,
      rgba(0,0,0,0) 70%,
      rgba(255,255,255,.08)
    );
  pointer-events:none;
  opacity: .55;
}

/* 表 */
.mp-cardface--front{
  background: #0b0b0b;
  text-align: center;
}

.mp-cardface__kicker{
  font-size: .9rem;
  letter-spacing: .22em;
  opacity: .75;
}

.mp-cardface__id{
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: .25rem;
}

.mp-cardface__note{
  margin-top: .6rem;
  font-size: .85rem;
  letter-spacing: .18em;
  opacity: .6;
}

/* 裏 */
.mp-cardface--back{
  transform: rotateY(180deg);
  align-items: stretch;
  justify-content: flex-start;

  padding: 16px;
  gap: 10px;
  text-align: left;
}

.mp-cardface__note--back{
  margin-top: auto;
  text-align: center;
  opacity: .6;
}

/* DL（裏面情報） */
.mp-dl{ margin: 0; }

.mp-dl--tight{
  display: grid;
  gap: 10px;
}

.mp-dl--tight .mp-dl__row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}

.mp-dl--tight .mp-dl__row dt{
  opacity: .7;
  letter-spacing: .18em;
  font-size: .85rem;
  white-space: nowrap;
  text-transform: uppercase;
}

.mp-dl--tight .mp-dl__row dd{ margin: 0; }

.mp-dd{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.mp-dd__text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-dd .mp-edit{ flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce){
  .mp-card3d__inner{ transition: none; }
}

/* MEMBERS : Icon Picker */
.mp-iconForm{
  width: min(92vw, 720px);
  margin: 0 auto;
}

.mp-iconGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.mp-iconChoice{
  display: grid;
  justify-items: center;
  gap: 10px;

  padding: 14px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);

  cursor: pointer;
  user-select: none;
}

.mp-iconChoice input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mp-iconThumb{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.14);
}

.mp-iconThumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.mp-iconLabel{
  font-size: .82rem;
  letter-spacing: .12em;
  opacity: .75;
}

.mp-iconChoice:has(input:checked){
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
}

.mp-avatar--link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.mp-avatar--link:hover{ border-color: rgba(255,255,255,.35); }

@media (hover: hover){
  .mp-avatar--link:hover{ background: rgba(255,255,255,.06); }
}

/* =========================================================
   MEMBERS : checkbox fix（label block override）
   ========================================================= */
body.members .members-form label.members-checkbox{
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
}

body.members .members-form label.members-checkbox input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;

  width: 1.1em !important;
  height: 1.1em !important;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  background: transparent;
  border: 1px solid currentColor;
  border-radius: 3px;

  display: inline-grid;
  place-content: center;
}

body.members .members-form label.members-checkbox input[type="checkbox"]::before{
  content: "";
  width: 0.6em;
  height: 0.6em;
  transform: scale(0);
  transition: transform .15s ease;
  background-color: currentColor;
}

body.members .members-form label.members-checkbox input[type="checkbox"]:checked::before{
  transform: scale(1);
}

body.members .members-form label.members-checkbox span{
  display: inline;
}

/* iOS風トグル（notify） */
#notifyForm input[type="checkbox"][name="notify_email"],
#notifyForm #notifyPushToggle{
  -webkit-appearance: none;
  appearance: none;

  width: 52px;
  height: 32px;
  border-radius: 999px;

  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);

  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .2s ease, border-color .2s ease;
}

#notifyForm input[type="checkbox"][name="notify_email"]::before,
#notifyForm #notifyPushToggle::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);

  width: 26px;
  height: 26px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: left .2s ease;
}

#notifyForm input[type="checkbox"][name="notify_email"]:checked,
#notifyForm #notifyPushToggle:checked{
  background: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.85);
}

#notifyForm input[type="checkbox"][name="notify_email"]:checked::before,
#notifyForm #notifyPushToggle:checked::before{
  left: 23px;
  background: rgba(0,0,0,.9);
}

#notifyForm input[type="checkbox"][name="notify_email"]:focus-visible,
#notifyForm #notifyPushToggle:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}

#notifyForm .cta{ width: 100%; }

#notifyForm .cta-btn{
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

#notifyForm > label{
  width: min(92vw, var(--cta-max));
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 12px;
}

#notifyForm [data-push-setting] > div{
  width: min(92vw, var(--cta-max));
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 12px;
}

#notifyForm > label,
#notifyForm [data-push-setting] > div{
  width: min(calc(100% - 24px), var(--cta-max));
  margin-inline: auto;
}

/* admin/edit form が右にはみ出す対策（iOS Safari含む） */
body.members .members-form{
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

body.members .members-form label{
  display: block;
  width: 100%;
}

body.members .members-form input,
body.members .members-form textarea,
body.members .members-form select{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* =================================================
   MY PAGE : MENU → ROW LIST STYLE（案1）
================================================= */
body.members.mypage .mp-menuGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.members.mypage .mp-menuCard{
  position: relative;

  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;

  padding: 16px 44px 16px 18px;
  text-align: left;

  transition:
    border-color .2s ease,
    background-color .2s ease;
}

body.members.mypage .mp-menuCard:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.32);
}

body.members.mypage .mp-menuCard::after{
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);

  font-size: 24px;
  line-height: 1;
  opacity: .6;
}

body.members.mypage .mp-menuCard__title{
  display: block;
  font-size: 1.05rem;
  letter-spacing: .14em;
  margin-bottom: 4px;
}

body.members.mypage .mp-menuCard__desc{
  display: block;
  font-size: .85rem;
  opacity: .55;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce){
  body.members.mypage .mp-menuCard{ transition: none; }
}

/* =========================================================
   MEMBERS : ACCOUNT SETTINGS
   ========================================================= */
body.members.account-settings .mp-wrap{
  width: min(92vw, 600px);
}

body.members.account-settings .as-wrap{
  width: 100%;
  display: grid;
  gap: 14px;
  text-align: left;
}

body.members.account-settings .as-section{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 14px 14px;
  display: grid;
  gap: 10px;
}

body.members.account-settings .as-row{
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

body.members.account-settings .as-row--readonly{
  grid-template-columns: 140px 1fr;
}

body.members.account-settings .as-label{
  font-size: .78rem;
  letter-spacing: .18em;
  opacity: .7;
  white-space: nowrap;
}

body.members.account-settings .as-value{
  font-size: 1.05rem;
  letter-spacing: .06em;
  min-width: 0;
}

body.members.account-settings .as-value--ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.members.account-settings .as-ctaLink{
  white-space: nowrap;
  justify-self: end;
}

body.members.account-settings .as-row--icon{ align-items: start; }

body.members.account-settings .as-avatarLink{
  display: inline-flex;
  text-decoration: none;
  color: inherit;
}

body.members.account-settings .as-avatar{
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
}

body.members.account-settings .as-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.members.account-settings .as-avatarCta{
  position: absolute;
  inset: auto 8px 8px auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;
  padding: 0 12px;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;

  font-size: .78rem;
  letter-spacing: .14em;
  color: #fff;

  text-decoration: none;
}

@media (hover:hover){
  body.members.account-settings .as-avatar:hover{
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.06);
  }
}

body.members.account-settings .as-simpleCta{
  display: inline-block;
  width: fit-content;
  padding: 6px 0;
}

body.members.account-settings
.as-section[aria-label="その他"]{
  border: none;
  background: transparent;
  padding: 0;
  gap: 0;
  text-align: center;
}

body.members.account-settings
.as-section[aria-label="その他"] .as-simpleCta{
  display: block;
  margin: 6px auto;
}

body.members.account-settings .as-back{
  margin-top: 6px;
  text-align: center;
}

body.members.mypage,
body.members.account-settings{
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}


/* =========================================================
   MEMBERS / HISTORY (uses NEWS styles)
   ========================================================= */

/* controls：タグ左、並び替え右（NEWSは基本センター寄せなのでここだけ調整） */
body.members.mypage .history-controls{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Historyではタグを左寄せにする */
body.members.mypage #history-tags.news-tags{
  justify-content: flex-start;
}

/* sort */
body.members.mypage .history-sort{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
}
body.members.mypage .history-sort__label{
  font-size: .92em;
  opacity: .8;
  letter-spacing: .06em;
}
body.members.mypage .history-sort__select{
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;

  border: 1px solid rgba(255,255,255,.24); /* .news-tag と同系 */
  border-radius: 999px;
  padding: .48rem .85rem;                  /* .news-tag と同寸 */
  letter-spacing: .06em;
  cursor: pointer;

  opacity: .86;
  font-size: .92em;
}
body.members.mypage .history-sort__select:hover{
  border-color: rgba(255,255,255,.5);
  opacity: .95;
}

/* スタンプっぽく：少し太い縁・控えめな詰め */
body.members.mypage .news-chip.history-stamp{
  border-color: rgba(255,255,255,.38);
  border-width: 2px;
  opacity: .92;
  letter-spacing: .08em;
}

/* 未参加スタンプは薄く */
body.members.mypage .news-chip.history-stamp--muted{
  border-color: rgba(255,255,255,.18);
  opacity: .55;
}

/* 右側リンクチップ */
body.members.mypage .news-chip.history-link{
  opacity: .9;
}
body.members.mypage .news-chip.history-link a{
  color: inherit;
  text-decoration: none;
}
body.members.mypage .news-chip.history-link a:hover{
  text-decoration: underline;
  text-underline-offset: .18em;
}
/* =========================================================
   HISTORY stamps (circle)
   ========================================================= */

/* 既存のnews-chipを、Historyの来場/配信だけ円スタンプ化 */
body.members.mypage .news-chip.history-stamp{
  /* circle */
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;                    /* news-chipのpaddingを無効化 */
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* stamp vibe */
  border-width: 2px;
  border-style: solid;
  letter-spacing: .06em;
  font-size: .85rem;
  line-height: 1;
  user-select: none;
}

/* ON（参加済）＝濃い縁＋うっすら塗り */
body.members.mypage .news-chip.history-stamp.is-on{
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.10);
  opacity: .95;
}

/* OFF（未参加）＝空（枠だけ） */
body.members.mypage .news-chip.history-stamp.is-off{
  border-color: rgba(255,255,255,.22);
  background: transparent;
  opacity: .55;
}

/* リンクチップは従来の形のまま（丸にしない） */
body.members.mypage .news-chip.history-link{
  border-width: 1px;
  border-radius: 999px;
  padding: .35rem .75rem;
  height: auto;
  width: auto;
  transform: none;
}

/* HISTORY: link chips alignment fix */
body.members.mypage .news-chips{
  align-items: center; /* 念のため（NEWS側で未指定なら効く） */
}

/* 右側リンクチップも“円スタンプ行”に揃えて中央配置 */
body.members.mypage .news-chip.history-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  padding: .48rem .85rem;         /* history-sort と同系 */
  border-width: 1px;
  border-radius: 999px;

  transform: none;                /* stampの回転影響を遮断 */
  position: relative;
  top: 0;                         /* 念のため */
}

body.members.mypage .news-chip.history-link a{
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* =========================================
   HISTORY: red stamp + pressed feel (circle kept)
   ========================================= */

/* まず円スタンプ本体（既存の円設計は維持したまま“押した感”だけ追加） */
body.members.mypage .news-chip.history-stamp{
  transform-origin: 50% 50%;
}

/* ON（参加済）＝濃い赤スタンプ */
body.members.mypage .news-chip.history-stamp.is-on{
  background: transparent;      /* 濃い赤（深いワイン寄り） */
  border-color: #6a0000;  /* 赤みのある縁 */
  color: #6a0000;

  /* 少し“インクが乗ってる感” */
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(255,255,255,0.08);

  font-weight: 1000;
  letter-spacing: .08em;
  border-width: 3.5px;
}

/* OFF（未参加）＝現状のまま（枠だけ）を維持
   ※もしOFFも少し赤みを入れたいなら下のコメント解除 */
body.members.mypage .news-chip.history-stamp.is-off{
  /* border-color: rgba(255, 90, 90, 0.35); */
}

/* 管理ページのメッセージ共通 */
.admin-message{
  text-align: center;
  width: 100%;
  margin: 14px auto;
  opacity: .85;
}

/* 注意（編集不可など） */
.admin-message--note{
  opacity: .7;
}

/* --- event card --- */
.event-card{
  width: 100%;
  max-width: 560px;
  margin: 14px auto 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
}

.event-card__head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}

.event-card__id{
  font-weight: 700;
  letter-spacing: .06em;
}

.event-card__status{
  font-size: .95em;
  opacity: .9;
  text-align: right;
}

.event-card__scheduled{
  display: inline-block;
  margin-left: .35em;
  opacity: .8;
}

/* dlを表っぽく */
.event-dl{
  margin: 0;
  display: grid;
  gap: 10px;
}

.event-dl > div{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
}

.event-dl dt{
  margin: 0;
  opacity: .7;
  letter-spacing: .08em;
}

.event-dl dd{
  margin: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

/* SCHEDULE入力だけ反転UI */
body.members .members-form input[type="datetime-local"]{
  background: #ffffff;
  color: #000000;
  border: 1px solid #cccccc;

  /* 他inputと揃える */
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;

  /* iOS/Chrome両対応 */
  color-scheme: light;
}

/* =========================================================
   75 Responsive (All device responsive gathered here)
   ========================================================= */

/* ---------- SP : max-width 768px ---------- */
@media (max-width: 768px){
  :root{
    --fv-media-maxh: calc(100svh - var(--nav-offset) - 200px);
    --fv-title-inset: 44px;
    --fv-title-top-sp: 44px;
  }

  .global-nav .nav-list{ display: none !important; }
  .global-nav .hamburger{ display: inline-flex !important; }

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

  body > .mobile-panel .mobile-link{
    font-size: var(--sp-nav-size);
    line-height: var(--sp-nav-line);
    letter-spacing: var(--sp-nav-letter);
    font-weight: var(--sp-nav-weight);
  }

  .sp-br{ display: block; height: 0; }

  body.top .hero-title{
    --hero-offset: 1.25rem;
    transform: translateY(var(--hero-offset));
  }

  body.top .hero-title .line2{
    font-size: clamp(3.2rem, 7.2vw, 5.2rem);
  }

  .page-body,
  .page-link{ padding: 0 1rem; }

  p.dropcap::first-letter{ font-size: 3em; }

  /* flyer pair stacked */
  .flyer{ width: min(92vw, 450px); }

  .flyer-pair{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
  }

  .flyer-pair > .flyer-card{
    width: 100%;
    max-width: var(--flyer-w);
  }

  footer{
    font-size: clamp(.9rem, 1.8vw + .4rem, 1.05rem);
    line-height: 1.5;
    padding: 1.25rem 1rem;
  }
  .footer-copy{ font-size: 0.75em; margin: 0 0 .5rem; }
  footer a{ font-size: inherit; }

/* ABOUT SP : auto slideshow only (fade / no manual swipe) */
body.about .about-fv{
  width: 100%;
  max-width: 100vw;
  overflow: hidden; /* FV内は横も縦もはみ出さない */
}

/* フルブリード（左右いっぱい） */
body.about .about-fv-photos-wrap{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;

  overflow: hidden;    /* スワイプでズレない */
  touch-action: pan-y; /* 横スワイプを無効化（縦スクロールのみ） */
}

/* FV内の「使える高さ」を明示して下切れを止める
   - title位置はそのまま、写真だけ “余白いっぱい” でフィット */
body.about .page-hero.about-fv .about-fv-photos-wrap{
  /* generic(.page-hero > :not...) の max-height(140px固定) を上書き */
  max-height: calc(
    100% -
    (var(--fv-title-top-sp) + (var(--fv-title-size) * 1.05) + 12px) -
    (var(--fv-scroll-bot) + 34px + 16px)
  );
  height: 100%;
}

/* フェード舞台：figureを重ねる（transform帯はやめる） */
body.about #aboutLoop.about-fv-photos{
  position: relative;
  width: 100%;
  height: 100%;

  /* 旧：display:flex + transform 切替 → 不要 */
  display: block;
  transform: none;
  transition: none;

  /* 手動スライド要素は全部殺す */
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: none;
  scroll-snap-type: none;
  touch-action: pan-y;
}

/* 3枚を同じ場所に重ね、activeだけ表示 */
body.about #aboutLoop.about-fv-photos figure{
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;

  border-radius: 12px; /* 画面いっぱいでOKなら角丸なし */
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease; /* フェード速度 */
}

body.about #aboutLoop.about-fv-photos figure.is-active{
  opacity: 1;
}

body.about .about-fv-photos-wrap picture,
body.about .about-fv-photos-wrap img{
  display: block;
  width: 100%;
  height: 100%;
}

body.about .about-fv-photos-wrap img{
  object-fit: cover;
  object-position: center 20%;
}

  /* FV title top (SP) */
  .page-hero .page-title{ top: var(--fv-title-top-sp); }

  body:not(.top) main > h1{
    margin-top: 0;
    padding-top: var(--fv-title-top-sp);
  }

  /* RADIO SP (FV) */
  body.radio .page-hero.radio-fv .radio-art{
    max-height: calc(
      100svh
      - var(--nav-offset)
      - var(--fv-title-top)
      - var(--fv-title-size)
      - 96px
    );

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  body.radio .page-hero.radio-fv > .radio-art{
    overflow: visible !important;
    max-height: none !important;
  }

  body.radio .page-hero.radio-fv .radio-art picture,
  body.radio .page-hero.radio-fv .radio-art img{
    max-height: calc(var(--fv-media-maxh) - 110px);
    height: auto !important;
  }

  body.radio .page-hero.radio-fv .radio-art{ --radio-side: min(calc(var(--fv-media-maxh) - 110px), 92vw); }

  body.radio .page-hero.radio-fv .radio-art picture{
    width: var(--radio-side) !important;
    height: var(--radio-side) !important;
    aspect-ratio: 1 / 1 !important;

    border-radius: 12px;
    overflow: hidden;
  }

  body.radio .page-hero.radio-fv .radio-art img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  /* NEWS SP */
  .news-tabs{
    gap: 1.05rem;
    margin-bottom: 1rem;
  }

  .news-tab{
    padding: .8rem .15rem;
    letter-spacing: .12em;
  }

  .news-tag{ padding: .44rem .75rem; }

  /* Tag row: 1-line horizontal scroll */
  .news-tags{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    gap: .6rem;
    padding: .25rem .25rem .4rem;
    margin: 0 auto;

    width: 100%;

    scrollbar-width: none;
  }
  .news-tags::-webkit-scrollbar{ display: none; }

  .news-tag{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .news-title{
font-size: clamp(1.2rem, 5vw, 1.6rem);
line-height: 1.35;
  }



  /* MEMBERS SP */
  .members-subnav{
    gap: 12px;
    margin: 10px auto 18px;
    font-size: .9rem;
  }
  .members-subnav__link{ padding: 10px 10px; }

  .mp-profile{ grid-template-columns: 72px 1fr; }
  .mp-avatar{ width: 72px; height: 72px; }

  /* card sizing (SP) */
  body.members.mypage .mp-card3d--big{
    --card-h: clamp(220px, 34svh, 300px);
    width: min(92vw, 520px, calc(var(--card-h) * 1.586));
    height: auto;
    overscroll-behavior: contain;
  }

  .mp-dl--tight .mp-dl__row{ grid-template-columns: 96px 1fr; }

  /* icon picker SP */
  .mp-iconGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-iconThumb{ width: 78px; height: 78px; }

  body.edit-email .members-help{ margin-top: -0.75rem; }

  body.members.mypage .history-controls{
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
  }
  body.members.mypage .history-sort{
    justify-content: flex-end;
  }
  body.members.mypage .news-chip.history-stamp{
    width: 2.8rem;
    height: 2.8rem;
    font-size: .82rem;
  }

  body.members.mypage .news-chip.history-stamp{
    translate(1px, 1px);
  }

  body.members.mypage #history-list .news-item{
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }

  /* metaはレイアウト崩さないため contents に */
  body.members.mypage #history-list .news-meta{
    display: contents;
  }

  /* 並び順 */
  body.members.mypage #history-list .news-date{
    order: 1;
  }

  body.members.mypage #history-list .news-title{
    order: 2;
  }

  body.members.mypage #history-list .news-chips{
    order: 3;
    width: auto;               /* PC用固定幅を解除 */
    justify-content: flex-start;
  }

  .event-card{ padding: 14px 14px; }
  .event-card__head{ flex-direction: column; align-items: flex-start; }
  .event-card__status{ text-align: left; }

  .event-dl > div{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .event-dl dd{ padding-bottom: 2px; }

}

/* ---------- PC : min-width 769px ---------- */
@media (min-width: 769px){
  body.about .page-hero.about-fv,
  body.live  .page-hero.live-fv,
  body.radio .page-hero.radio-fv{
    height: calc(100svh - var(--nav-offset));
    padding: var(--fv-pad-top-pc) var(--fv-side-pad) var(--fv-pad-bot-pc);

    display: grid;
    grid-template-rows:
      auto
      var(--fv-gap-1-pc)
      minmax(0, 1fr)
      var(--fv-gap-2-pc)
      auto;

    justify-items: center;
    align-items: start;
    text-align: center;
    overflow: hidden;
  }

  body.about .page-hero.about-fv .page-title,
  body.about .page-hero.about-fv .scroll-anchor,
  body.about .page-hero.about-fv .about-fv-photos-wrap,
  body.live  .page-hero.live-fv  .page-title,
  body.live  .page-hero.live-fv  .scroll-anchor,
  body.live  .page-hero.live-fv  .flyer-card--cta,
  body.radio .page-hero.radio-fv .page-title,
  body.radio .page-hero.radio-fv .scroll-anchor,
  body.radio .page-hero.radio-fv .radio-art{
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 1) max-height縛りだけは全員から外す */
  body.about .page-hero.about-fv > :not(.page-title):not(.scroll-anchor),
  body.live  .page-hero.live-fv  > :not(.page-title):not(.scroll-anchor),
  body.radio .page-hero.radio-fv > :not(.page-title):not(.scroll-anchor){
    max-height: none !important;
  }

  /* 2) overflowは「窓役」には触らない */
  body.about .page-hero.about-fv > :not(.page-title):not(.scroll-anchor):not(.about-fv-photos-wrap),
  body.live  .page-hero.live-fv  > :not(.page-title):not(.scroll-anchor):not(.flyer-card--cta),
  body.radio .page-hero.radio-fv > :not(.page-title):not(.scroll-anchor):not(.radio-art){
    overflow: visible !important;
  }

  /* 3) width:auto も「主役＋CTA群」には触らない */
  body.about .page-hero.about-fv > :not(.page-title):not(.scroll-anchor):not(.about-fv-photos-wrap),
  body.live  .page-hero.live-fv  > :not(.page-title):not(.scroll-anchor):not(.flyer-card--cta):not(.cta-stack),
  body.radio .page-hero.radio-fv > :not(.page-title):not(.scroll-anchor):not(.radio-art):not(.cta-stack){
    width: auto !important;
  }

  body.about .about-fv-photos img{
    object-fit: cover;
    display: block;
  }

  body.about .page-hero.about-fv .page-title,
  body.live  .page-hero.live-fv  .page-title,
  body.radio .page-hero.radio-fv .page-title{
    grid-row: 1;
    width: min(92vw, var(--content-max));
    margin: 0;
  }

  body.about .page-hero.about-fv .scroll-anchor,
  body.live  .page-hero.live-fv  .scroll-anchor,
  body.radio .page-hero.radio-fv .scroll-anchor{
    grid-row: 5;
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
  }

  /* ABOUT PC : FV photos fix */
  body.about .page-hero.about-fv .about-fv-photos-wrap{
    grid-row: 3;

    width: min(92vw, 980px);
    height: 100%;
    min-height: 0;

    overflow: hidden;

    border-radius: var(--fv-media-frame-radius);
    background: rgba(255,255,255,.04);

    display: grid;
    place-items: center;

    padding: 0 !important;
  }

  /* JSループの横ズレをPCだけ殺す */
  body.about .page-hero.about-fv #aboutLoop.about-fv-photos{
    transform: none !important;
    translate: none !important;
  }

  body.about .page-hero.about-fv .about-fv-photos{
    --about-gap: clamp(14px, 1.2vw, 22px);

    width: 100%;
    height: 100%;
    min-height: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--about-gap);
    align-items: stretch;

    margin: 0;
    padding: 0;
  }

  body.about .page-hero.about-fv .about-fv-photos figure{
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;

    border-radius: 12px;
    overflow: hidden;
  }

  body.about .page-hero.about-fv .about-fv-photos picture,
  body.about .page-hero.about-fv .about-fv-photos img{
    width: 100%;
    height: 100%;
    display: block;
  }

  body.about .page-hero.about-fv .about-fv-photos img{
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* LIVE PC : FV media (flyer) */
  body.live .page-hero.live-fv .flyer-card--cta{
    grid-row: 3;
    height: 100%;
    min-height: 0;
    max-height: var(--fv-media-maxh);
    width: auto;
    max-width: min(92vw, var(--flyer-w));
    overflow: hidden;
  }

  body.live .page-hero.live-fv .flyer-card--cta picture,
  body.live .page-hero.live-fv .flyer-card--cta img{
    width: 100%;
    height: 100%;
    display: block;
  }
  body.live .page-hero.live-fv .flyer-card--cta img{ object-fit: cover; }

  /* RADIO PC */
  body.radio .page-hero.radio-fv .radio-art{
    grid-row: 3;

    width: min(92vw, 880px);
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    overflow: hidden;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  body.radio .page-hero.radio-fv .radio-art picture{
    flex: 1 1 auto;
    min-height: 0;

    height: 100%;
    max-height: calc(100% - 140px);

    aspect-ratio: 1 / 1;

    width: auto;
    max-width: 100%;

    border-radius: var(--fv-media-frame-radius);
    overflow: hidden;
    background: rgba(255,255,255,.04);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    display: grid;
    place-items: center;
  }

  body.radio .page-hero.radio-fv .radio-art img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none !important;
    background: rgba(255,255,255,.02);
  }

  body.radio .page-hero.radio-fv .radio-art .cta{
    width: min(92vw, var(--radio-art-max));
    margin: 0 auto;
    flex: 0 0 auto;
  }

  body.no-fv main{
    padding-top: calc(
      var(--nav-offset)
      + env(safe-area-inset-top, 0px)
      + var(--fv-pad-top-pc)
    );
  }

  body.members .members-help{ margin-bottom: 3rem; }

  /* MY PAGE menu grid on PC (2 cols) */
  body.members.mypage .mp-menuGrid{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  body.members.mypage .mp-menuCard{
    padding: 18px 52px 18px 20px;
    border-radius: 16px;
  }

  body.members.mypage .mp-menuCard::after{
    right: 18px;
    font-size: 26px;
  }

  body.members.mypage .mp-menuCard__title{ font-size: 1.1rem; }

  body.about .page-body,
  body.live  .page-body,
  body.radio .page-body{
    width: min(92vw, 680px);
  }

  .footer-copy{
    font-size: .75rem;
  }

/* =========================================================
   HISTORY: stamp column alignment on PC
   ========================================================= */
  /* meta行を左右2カラムにする：左=日付/会場 右=スタンプ群 */
  body.members.mypage .news-item .news-meta{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1.25rem;
  }

  /* 右側エリアを固定幅にして、行ごとに開始位置を揃える */
  body.members.mypage .news-item .news-chips{
    width: 22rem;                 /* 好みで調整（後述） */
    justify-content: flex-start;  /* 右端基準ではなく左端で揃える */
    align-items: center;
    gap: .75rem;                  /* 丸とリンクの間隔 */
  }

}

/* =========================================================
   80 LIVE SPECIAL : 260322
   ========================================================= */
body.live-special .live-special-main{
  display: block;
  text-align: center;
}

body.live-special .live-special-fv{
  width: 100%;

  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  height: 100dvh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  gap: clamp(.7rem, 1.6vh, 1.2rem);

  --padTop: clamp(10px, 2vh, 22px);
  --padBot: clamp(10px, 2vh, 22px);

  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: calc(var(--padTop) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--padBot) + env(safe-area-inset-bottom, 0px));

  position: relative;
}

body.live-special .live-special-fv > *{
  width: 100%;
  max-width: 980px;
}

body.live-special.is-thanks .live-special-fv{
  --padTop: clamp(8px, 1.6vh, 18px);
  --padBot: clamp(8px, 1.6vh, 18px);
}

body.live-special .live-special-links{
  display: flex;
  justify-content: center;
  gap: 1.4rem;

  padding: 1.2rem 0 .6rem;
  margin: 0;
  opacity: .8;
}

body.live-special .live-special-links .link{
  font-size: 2.05rem;
  letter-spacing: .12em;
  text-decoration: none;
  color: #bbb;
}
body.live-special .live-special-links .link:hover{ text-decoration: underline; }

body.live-special .live-special-title,
body.live-special .live-special-title h1{ margin: 0; }

body.live-special .live-special-title .line{ display: block; }

body.live-special .live-special-title .line1{
  font-size: clamp(1.2rem, 2.8vw, 1.8rem);
  letter-spacing: .12em;
  font-weight: 400;
}

body.live-special .live-special-title .line2{
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: .08em;
}

body.live-special .live-special-title .line3{
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .12em;
  margin-top: .15em;
}

body.live-special .live-special-countdown,
body.live-special #countdown-timer,
body.live-special #countdown-timer *{
  font-family: inherit;
}

body.live-special #countdown-timer{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-template-rows: auto auto;
  justify-content: center;
  justify-items: center;
  align-items: baseline;

  column-gap: 1rem;
  row-gap: .55rem;
  letter-spacing: .02em;
}

body.live-special #countdown-timer span[id^="cd-"]{
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  color: #fff;
}

body.live-special #cd-days{
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;

  font-size: clamp(7rem, 18vw, 9.5rem);
  position: relative;
}

body.live-special #cd-days::before{ content: "あと"; margin-right: .38em; }
body.live-special #cd-days::after{ content: "日"; margin-left: .38em; }

body.live-special #cd-days::before,
body.live-special #cd-days::after{
  font-size: .20em;
  letter-spacing: .12em;
  opacity: .55;
  display: inline-block;
  position: relative;
  top: -.22em;
}

body.live-special #cd-hours{ grid-column: 1; }
body.live-special #cd-mins{ grid-column: 2; }
body.live-special #cd-secs{ grid-column: 3; }

body.live-special #cd-hours,
body.live-special #cd-mins,
body.live-special #cd-secs{
  font-size: clamp(2rem, 5.5vw, 3.5rem);
}

body.live-special #cd-hours::after,
body.live-special #cd-mins::after,
body.live-special #cd-secs::after{
  font-size: .30em;
  letter-spacing: .12em;
  margin-left: .25em;
  opacity: .75;
}

body.live-special #cd-hours::after{ content: "時間"; }
body.live-special #cd-mins::after{ content: "分"; }
body.live-special #cd-secs::after{ content: "秒"; }

body.live-special #cd-days::before,
body.live-special #cd-days::after,
body.live-special #cd-hours::after,
body.live-special #cd-mins::after,
body.live-special #cd-secs::after{
  font-family:
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho",
    "MS Mincho",
    serif;
}

body.live-special.is-thanks #countdown-timer{ display: none !important; }

body.live-special #countdown-thanks{
  width: 100%;
  text-align: center;
}

body.live-special #countdown-thanks .thanks{
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: .2em;
  margin: 0;
}

body.live-special .live-special-info .date{
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin: 0;
}

body.live-special .live-special-info .place{
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  opacity: .85;
  margin: .25rem 0 0;
}

body.live-special .live-special-ticket{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
}

body.live-special .ticket-button{
  display: inline-block;
  padding: .75em 2em;
  border-radius: 999px;
  border: 1px solid #fff;
  color: #000;
  background: #fff;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: .12em;
}
body.live-special .ticket-button:hover{ opacity: .9; }

body.live-special .ticket-button.is-disabled{
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

body.live-special .ticket-note{
  font-size: .8rem;
  opacity: .6;
  margin: 0;
}

body.live-special .live-special-rewatch{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  padding: clamp(40px, 8vh, 90px) 1rem;
  text-align: center;
}

body.live-special .rewatch-title{
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  letter-spacing: .14em;
  font-weight: 400;
  margin: 0 0 1rem;
  opacity: .9;
}

body.live-special .yt-wrap{
  width: 100%;
  max-width: 860px;
  margin: 0 auto;

  aspect-ratio: 16 / 9;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
}

body.live-special .yt-embed{
  width: 100%;
  height: 100%;
  display: block;
}

body.live-special .rewatch-note{
  font-size: .9rem;
  opacity: .6;
  margin: .9rem 0 0;
}

/* Teaser overlay */
#teaser-overlay{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
}

.teaser-video{
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
}

.teaser-video iframe{
  width: 100%;
  height: 100%;
}

#teaser-close{
  position: absolute;
  top: 20px;
  right: 20px;

  font-size: 32px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

body.teaser-open .fade-in,
body.teaser-open .fade-in.visible{
  opacity: 0 !important;
}

#teaser-sound{
  position: absolute;
  top: 22px;
  right: 70px;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: .15em;
  color: #fff;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
}

/* =========================================================
   LIVE SPECIAL Responsive (gathered)
   ========================================================= */
@media (max-width: 768px){
  body.live-special .live-special-fv{
    justify-content: flex-start;
    gap: clamp(.9rem, 1.8vh, 1.25rem);

    --padTop: clamp(54px, 8vh, 84px);
    --padBot: clamp(12px, 2.2vh, 22px);

    height: auto;
    min-height: 0;

    padding-bottom: clamp(8px, 1.6vh, 14px);
    margin-bottom: clamp(100px, 30vh, 180px);
  }

  body.live-special .live-special-rewatch{ padding-top: clamp(7px, 2vh, 18px); }

  body.live-special .live-special-title .line1{ font-size: clamp(1rem, 3.2vw, 1.35rem); }
  body.live-special .live-special-title .line2{ font-size: clamp(2.45rem, 9vw, 3.35rem); }
  body.live-special .live-special-title .line3{
    font-size: clamp(1.6rem, 5.6vw, 2.25rem);
    margin-top: .08em;
  }

  body.live-special #countdown-timer{
    column-gap: .55rem;
    row-gap: .35rem;
  }

  body.live-special #cd-days{ font-size: clamp(4.6rem, 20.8vmin, 7rem); }

  body.live-special #cd-hours,
  body.live-special #cd-mins,
  body.live-special #cd-secs{
    font-size: clamp(2rem, 5.5vw, 3.5rem);
  }

  body.live-special .live-special-info .date{ font-size: clamp(1rem, 3.8vw, 1.2rem); }
  body.live-special .live-special-info .place{
    font-size: clamp(.95rem, 3.4vw, 1.1rem);
    margin-top: .15rem;
  }

  body.live-special .ticket-button{
    padding: .62em 1.65em;
    font-size: .95rem;
  }
  body.live-special .ticket-note{ font-size: .72rem; }

  body.live-special .live-special-rewatch{
    padding-top: clamp(10px, 2.5vh, 18px);
    padding-bottom: clamp(34px, 7vh, 70px);
  }

  body.live-special .yt-wrap{ border-radius: 14px; }
  body.live-special .rewatch-note{ font-size: .82rem; }

  body.live-special .live-special-links{
    padding: .9rem 0 .35rem;
    gap: 1.2rem;
  }
  body.live-special .live-special-links .link{ font-size: 2rem; }
}

@media (max-width: 768px) and (max-height: 700px){
  body.live-special .live-special-fv{
    gap: clamp(.9rem, 1.2vh, .85rem);
    --padTop: clamp(40px, 7vh, 70px);
    --padBot: clamp(8px, 1.6vh, 16px);
  }
}

@media (min-width: 769px) and (max-height: 820px){
  body.live-special .live-special-fv{
    gap: clamp(.45rem, 1.1vh, .9rem);
    --padTop: clamp(20px, 3.2vh, 44px);
    --padBot: clamp(10px, 1.6vh, 20px);
  }
}

@media (max-width: 768px) and (display-mode: standalone){
  body.live-special .live-special-fv{
    --pwa-shift: clamp(14px, 2.4vh, 28px);
    padding-top: calc(var(--padTop) + env(safe-area-inset-top, 0px) + var(--pwa-shift));
  }
}

@media (max-width: 768px) and (-webkit-touch-callout: none){
  body.live-special .live-special-fv{
    --pwa-shift: clamp(14px, 2.4vh, 28px);
    padding-top: calc(var(--padTop) + env(safe-area-inset-top, 0px) + var(--pwa-shift));
  }
}