/* =========================================================
   YUKINON FINAL POLISH
   Ver.1.0
   Main Site
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
}

body{
  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;
}


/* =========================================================
   INTERACTION
   ========================================================= */

a,
button,
input,
select,
textarea{
  -webkit-tap-highlight-color:
    transparent;
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:
    3px solid
    rgba(238,102,173,.48);

  outline-offset:4px;
}


button,
a{
  touch-action:
    manipulation;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  transition:
    height .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.nav-link{
  transition:
    color .2s ease,
    opacity .2s ease;
}


.nav-link::after{
  transition:
    width .24s ease;
}


/* =========================================================
   CARD CONSISTENCY
   ========================================================= */

.profile-card,
.concept-card,
.stream-next-card,
.stream-upcoming,
.stream-archives,
.gallery-feature,
.gallery-card,
.schedule-week-card,
.schedule-next-card,
.schedule-list-section,
.schedule-footer-note,
.news-card,
.bonus-portal-card,
.social-portal,
.brand-guide-link,
.link-message-card,
.contact-shell{
  transition:
    transform .24s ease,
    border-color .24s ease,
    background .3s ease,
    box-shadow .3s ease,
    color .25s ease;
}


/* =========================================================
   DAY TEXT CONTRAST
   ========================================================= */

html:not([data-theme="night"])
.section-heading > p:last-child,

html[data-theme="day"]
.section-heading > p:last-child,

html:not([data-theme="night"])
.concept-card > p:not(.concept-quote),

html[data-theme="day"]
.concept-card > p:not(.concept-quote),

html:not([data-theme="night"])
.gallery-feature-copy
> p:not(.gallery-feature-kicker),

html[data-theme="day"]
.gallery-feature-copy
> p:not(.gallery-feature-kicker){

  color:#6b5f6f !important;
}


/* =========================================================
   NIGHT TEXT CONTRAST
   ========================================================= */

html[data-theme="night"]
.section-heading > p:last-child,

html[data-theme="night"]
.concept-card
> p:not(.concept-quote),

html[data-theme="night"]
.gallery-feature-copy
> p:not(.gallery-feature-kicker),

html[data-theme="night"]
.schedule-week-note,

html[data-theme="night"]
.schedule-next-copy,

html[data-theme="night"]
.news-card p,

html[data-theme="night"]
.social-portal-copy em,

html[data-theme="night"]
.brand-guide-copy em,

html[data-theme="night"]
.contact-lead,

html[data-theme="night"]
.contact-note{
  color:
    #ddd0dc !important;

  opacity:1 !important;
}


/* =========================================================
   NIGHT HEADINGS
   ========================================================= */

html[data-theme="night"]
.section-heading h2,

html[data-theme="night"]
.profile-card h3,

html[data-theme="night"]
.concept-card h3,

html[data-theme="night"]
.schedule-card-head h3,

html[data-theme="night"]
.schedule-list-head h3{
  color:
    #fff8fc !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.contact-button,
.hero-button,
.gallery-feature-button,
.gallery-filter,
.schedule-next-button,
.stream-watch-button,
.contact-main-button{
  min-height:
    44px;
}


.gallery-filter,
.gallery-feature-button,
.schedule-next-button,
.contact-main-button{
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


@media(hover:hover){

  .gallery-feature-button:hover,
  .schedule-next-button:hover,
  .contact-main-button:hover{
    transform:
      translateY(-2px);
  }

}


/* =========================================================
   IMAGES
   ========================================================= */

.profile-image-wrap img,
.gallery-feature-media img,
.gallery-card-media img,
.contact-visual img{
  backface-visibility:
    hidden;

  transform:
    translateZ(0);
}


/* =========================================================
   SECTION ANCHORS
   ========================================================= */

#about,
#stream,
#gallery,
#schedule,
#news,
#bonus,
#links,
#contact{
  scroll-margin-top:
    calc(
      var(--header-h)
      + 14px
    );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:780px){

  .profile-card,
  .concept-card,
  .gallery-feature,
  .schedule-week-card,
  .schedule-next-card,
  .schedule-list-section,
  .contact-shell{
    border-radius:
      24px;
  }


  .section-heading > p:last-child{
    font-size:.82rem;

    line-height:1.85;
  }


  .concept-card
  > p:not(.concept-quote){
    font-size:.78rem;

    line-height:1.95 !important;
  }


  .gallery-feature-copy
  > p:not(.gallery-feature-kicker){
    font-size:.78rem;

    line-height:1.9;
  }


  .contact-lead{
    line-height:1.9;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:430px){

  .contact-button,
  .gallery-feature-button,
  .schedule-next-button,
  .contact-main-button{
    min-height:
      46px;
  }


  .section-heading h2{
    text-wrap:
      balance;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:
  reduce
){

  *,
  *::before,
  *::after{
    scroll-behavior:
      auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

}


/* =========================================================
   YUKINON NIGHT FINAL OVERRIDE V1.1
   Last-loaded authoritative NIGHT surfaces
   ========================================================= */

html[data-theme="night"]{
  --yn-night-card:#2c2134;
  --yn-night-card-deep:#211925;
  --yn-night-card-soft:#382941;

  --yn-night-text:#fff8fc;
  --yn-night-muted:#dacbd8;

  --yn-night-pink:#f39bc8;
  --yn-night-lav:#d5b9e8;

  --yn-night-border:
    rgba(232,188,224,.20);

  --yn-night-shadow:
    0 24px 65px
    rgba(5,2,8,.24);
}


/* =========================================================
   1. STREAM / NEXT STREAM
   ========================================================= */

html[data-theme="night"]
.stream-next-card{
  color:
    var(--yn-night-text) !important;

  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(238,102,173,.09),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #34263d,
      #241b2d
    ) !important;

  border:
    1px solid
    var(--yn-night-border) !important;

  box-shadow:
    var(--yn-night-shadow) !important;
}


html[data-theme="night"]
.stream-next-card::after{
  color:
    rgba(244,155,197,.07) !important;
}


html[data-theme="night"]
.stream-next-title{
  color:
    #fff8fc !important;
}


html[data-theme="night"]
.stream-next-description{
  color:
    #ddcedb !important;
}


html[data-theme="night"]
.stream-next-label{
  color:
    #d8b8e8 !important;
}


html[data-theme="night"]
.stream-status-chip{
  color:
    #f0cde7 !important;

  background:
    rgba(210,155,207,.12) !important;

  border:
    1px solid
    rgba(232,188,224,.14) !important;
}


html[data-theme="night"]
.stream-meta-list > div{
  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid
    rgba(232,188,224,.13) !important;
}


html[data-theme="night"]
.stream-meta-list span{
  color:
    #cdb0d1 !important;
}


html[data-theme="night"]
.stream-meta-list strong{
  color:
    #fff6fc !important;
}


/* =========================================================
   2. GALLERY FEATURE COPY
   ========================================================= */

html[data-theme="night"]
.gallery-feature{
  background:
    linear-gradient(
      145deg,
      #2d2235,
      #211925
    ) !important;

  border:
    1px solid
    var(--yn-night-border) !important;

  box-shadow:
    var(--yn-night-shadow) !important;
}


html[data-theme="night"]
.gallery-feature-copy{
  color:
    var(--yn-night-text) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(200,175,232,.09),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #30243a,
      #211925
    ) !important;
}


html[data-theme="night"]
.gallery-feature-kicker{
  color:
    #d6b7e8 !important;
}


html[data-theme="night"]
.gallery-feature-tag{
  color:
    #ecd9eb !important;

  background:
    rgba(200,155,205,.12) !important;

  border:
    1px solid
    rgba(232,188,224,.16) !important;
}


html[data-theme="night"]
.gallery-feature-copy h3{
  color:
    #fff8fc !important;
}


html[data-theme="night"]
.gallery-feature-copy
> p:not(.gallery-feature-kicker){
  color:
    #dacbd8 !important;
}


html[data-theme="night"]
.gallery-feature-button{
  color:
    #f5e6f2 !important;

  background:
    rgba(255,255,255,.055) !important;

  border-color:
    rgba(232,188,224,.22) !important;
}


/* =========================================================
   3. SCHEDULE / EMPTY STATE
   ========================================================= */

html[data-theme="night"]
.schedule-empty-state{
  color:
    var(--yn-night-text) !important;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(200,175,232,.06),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      #30243a,
      #241b2d
    ) !important;

  border:
    1px dashed
    rgba(232,188,224,.22) !important;

  box-shadow:
    none !important;
}


html[data-theme="night"]
.schedule-empty-symbol{
  color:
    #ff91c4 !important;

  background:
    rgba(238,102,173,.12) !important;

  border:
    1px solid
    rgba(244,155,197,.15) !important;
}


html[data-theme="night"]
.schedule-empty-state strong{
  color:
    #fff8fc !important;
}


html[data-theme="night"]
.schedule-empty-state p{
  color:
    #d6c6d4 !important;
}


/* =========================================================
   4. NEWS EMPTY / CARD
   ========================================================= */

html[data-theme="night"]
#news .news-card,

html[data-theme="night"]
#news [data-news-list],

html[data-theme="night"]
#news [data-news-empty],

html[data-theme="night"]
#news [class*="news-empty"],

html[data-theme="night"]
#news [class*="empty"]{
  color:
    var(--yn-night-text) !important;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(238,102,173,.06),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #2e2237,
      #211925
    ) !important;

  border-color:
    rgba(232,188,224,.20) !important;

  box-shadow:
    var(--yn-night-shadow) !important;
}


html[data-theme="night"]
#news .news-card p,

html[data-theme="night"]
#news .news-card span,

html[data-theme="night"]
#news [class*="empty"] p,

html[data-theme="night"]
#news [class*="empty"] span{
  color:
    #d9cad7 !important;
}


/* =========================================================
   5. LINK / SNS PORTALS
   ========================================================= */

html[data-theme="night"]
.social-portal{
  color:
    var(--yn-night-text) !important;

  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(200,175,232,.08),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #31243a,
      #251c2e
    ) !important;

  border:
    1px solid
    var(--yn-night-border) !important;

  box-shadow:
    var(--yn-night-shadow) !important;
}


html[data-theme="night"]
.social-portal-icon{
  color:
    #efdbef !important;

  background:
    rgba(199,153,204,.12) !important;

  border:
    1px solid
    rgba(232,188,224,.16) !important;
}


html[data-theme="night"]
.social-portal-copy small{
  color:
    #d2a9d3 !important;
}


html[data-theme="night"]
.social-portal-copy strong{
  color:
    #fff8fc !important;
}


html[data-theme="night"]
.social-portal-copy em{
  color:
    #d4c5d3 !important;
}


html[data-theme="night"]
.social-portal-arrow{
  color:
    #efd9ed !important;

  border-color:
    rgba(232,188,224,.18) !important;
}


/*
 * MASTER GUIDEも同系統に固定
 */
html[data-theme="night"]
.brand-guide-link{
  color:
    var(--yn-night-text) !important;

  background:
    linear-gradient(
      135deg,
      #2d2235,
      #211925
    ) !important;

  border-color:
    var(--yn-night-border) !important;
}


html[data-theme="night"]
.brand-guide-copy strong{
  color:
    #ead3ea !important;
}


html[data-theme="night"]
.brand-guide-copy em{
  color:
    #d1c1cf !important;
}


/* =========================================================
   6. CONTACT
   ========================================================= */

html[data-theme="night"]
.contact-showcase{
  color:
    var(--yn-night-text) !important;

  background:
    radial-gradient(
      circle at 14% 34%,
      rgba(238,102,173,.055),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 68%,
      rgba(200,175,232,.07),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #1b1421,
      #251b2c 52%,
      #18111e
    ) !important;
}


html[data-theme="night"]
.contact-showcase::before{
  background:
    radial-gradient(
      circle at 20% 40%,
      rgba(200,175,232,.045),
      transparent 36%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(238,102,173,.035),
      transparent 30%
    ) !important;
}


html[data-theme="night"]
.contact-shell{
  background:
    #241b2c !important;

  border-color:
    rgba(232,188,224,.20) !important;

  box-shadow:
    0 30px 85px
    rgba(4,2,7,.30) !important;
}


html[data-theme="night"]
.contact-visual{
  background:
    #241b2c !important;
}


html[data-theme="night"]
.contact-visual img{
  filter:
    brightness(.82)
    saturate(.92)
    contrast(1.03) !important;
}


html[data-theme="night"]
.contact-visual-shade{
  background:
    linear-gradient(
      180deg,
      rgba(25,17,31,.02),
      rgba(32,21,39,.13) 50%,
      rgba(24,16,30,.48) 100%
    ) !important;
}


html[data-theme="night"]
.contact-panel{
  color:
    var(--yn-night-text) !important;

  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(200,175,232,.07),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #31243a,
      #251c2e
    ) !important;
}


html[data-theme="night"]
.contact-panel h2{
  color:
    #fff8fc !important;
}


html[data-theme="night"]
.contact-lead,

html[data-theme="night"]
.contact-note{
  color:
    #d8c9d6 !important;
}


html[data-theme="night"]
.contact-status{
  color:
    var(--yn-night-text) !important;

  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid
    rgba(232,188,224,.18) !important;
}


html[data-theme="night"]
.contact-status-icon{
  color:
    #f39bc8 !important;

  background:
    rgba(238,102,173,.13) !important;
}


html[data-theme="night"]
.contact-status small{
  color:
    #d3aad4 !important;
}


html[data-theme="night"]
.contact-status strong{
  color:
    #f8edf6 !important;
}


/* =========================================================
   MOBILE NIGHT
   ========================================================= */

@media(max-width:780px){

  html[data-theme="night"]
  .stream-next-card,

  html[data-theme="night"]
  .gallery-feature-copy,

  html[data-theme="night"]
  .schedule-empty-state,

  html[data-theme="night"]
  .social-portal,

  html[data-theme="night"]
  .contact-panel{
    box-shadow:
      0 16px 40px
      rgba(4,2,7,.18) !important;
  }

}



/* =========================================================
   YUKINON BONUS NIGHT FINAL FIX V1.2
   BONUS cards lower information bar
   ========================================================= */


/*
 * 代表的なBONUS案内系クラス
 */
html[data-theme="night"]
#bonus .bonus-note,

html[data-theme="night"]
#bonus .bonus-footer,

html[data-theme="night"]
#bonus .bonus-footer-note,

html[data-theme="night"]
#bonus .bonus-info,

html[data-theme="night"]
#bonus .bonus-guide,

html[data-theme="night"]
#bonus .bonus-message,

html[data-theme="night"]
#bonus .bonus-notice,

html[data-theme="night"]
#bonus .bonus-hint,

html[data-theme="night"]
#bonus .bonus-access,

html[data-theme="night"]
#bonus .bonus-access-note,

html[data-theme="night"]
#bonus .bonus-code-note,

html[data-theme="night"]
#bonus .bonus-status,

html[data-theme="night"]
#bonus .bonus-bar,

/*
 * カードグリッド直後の横長案内バーも直接対象
 */
html[data-theme="night"]
#bonus .bonus-portal-grid + *,

html[data-theme="night"]
#bonus .bonus-grid + *,

html[data-theme="night"]
#bonus .bonus-cards + *,

html[data-theme="night"]
#bonus .bonus-card-grid + *{
  color:
    #e9dce7 !important;

  background:
    radial-gradient(
      circle at 18% 50%,
      rgba(238,102,173,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 50%,
      rgba(200,175,232,.08),
      transparent 34%
    ),
    linear-gradient(
      110deg,
      #30243a,
      #241b2d
    ) !important;

  border:
    1px solid
    rgba(232,188,224,.20) !important;

  box-shadow:
    0 16px 42px
    rgba(5,2,8,.20) !important;
}


/* =========================================================
   クラス名に案内系語句を含む場合も拾う
   ========================================================= */

html[data-theme="night"]
#bonus [class*="bonus"][class*="note"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="info"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="guide"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="message"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="notice"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="hint"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="status"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="access"],

html[data-theme="night"]
#bonus [class*="bonus"][class*="bar"]{
  color:
    #e9dce7 !important;

  background:
    linear-gradient(
      110deg,
      #30243a,
      #241b2d
    ) !important;

  border-color:
    rgba(232,188,224,.20) !important;
}


/* =========================================================
   内部テキスト
   ========================================================= */

html[data-theme="night"]
#bonus .bonus-portal-grid + * p,

html[data-theme="night"]
#bonus .bonus-grid + * p,

html[data-theme="night"]
#bonus .bonus-cards + * p,

html[data-theme="night"]
#bonus .bonus-card-grid + * p,

html[data-theme="night"]
#bonus [class*="bonus"][class*="note"] p,

html[data-theme="night"]
#bonus [class*="bonus"][class*="info"] p,

html[data-theme="night"]
#bonus [class*="bonus"][class*="guide"] p,

html[data-theme="night"]
#bonus [class*="bonus"][class*="message"] p{
  color:
    #d9cad7 !important;

  opacity:1 !important;
}


html[data-theme="night"]
#bonus .bonus-portal-grid + * strong,

html[data-theme="night"]
#bonus .bonus-grid + * strong,

html[data-theme="night"]
#bonus .bonus-cards + * strong,

html[data-theme="night"]
#bonus .bonus-card-grid + * strong{
  color:
    #fff8fc !important;
}


/* =========================================================
   ハート / アイコン
   ========================================================= */

html[data-theme="night"]
#bonus .bonus-portal-grid + * svg,

html[data-theme="night"]
#bonus .bonus-grid + * svg,

html[data-theme="night"]
#bonus .bonus-cards + * svg,

html[data-theme="night"]
#bonus .bonus-card-grid + * svg,

html[data-theme="night"]
#bonus .bonus-portal-grid + * i,

html[data-theme="night"]
#bonus .bonus-grid + * i{
  color:
    #f39bc8 !important;
}


/*
 * 文字として配置されたハート等にも自然なアクセント
 */
html[data-theme="night"]
#bonus .bonus-portal-grid + *{
  --bonus-night-accent:
    #f39bc8;
}



/* =========================================================
   YUKINON DEVICE QA V1.3
   PC / iPhone / Android
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL OVERFLOW SAFETY
   --------------------------------------------------------- */

html,
body{
  width:100%;
  max-width:100%;
}

body{
  overflow-x:clip;
}

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

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

main,
section,
article,
div{
  min-width:0;
}


/* 長い文字列でも横にはみ出させない */

p,
h1,
h2,
h3,
h4,
strong,
em,
span{
  overflow-wrap:anywhere;
}


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

@media(min-width:1021px){

  .site-header{
    padding-left:
      max(
        24px,
        env(safe-area-inset-left)
      );

    padding-right:
      max(
        24px,
        env(safe-area-inset-right)
      );
  }

}


/* =========================================================
   TABLET / MOBILE NAV
   <= 1020px
   ========================================================= */

@media(max-width:1020px){

  .site-header{
    padding-left:
      max(
        18px,
        env(safe-area-inset-left)
      ) !important;

    padding-right:
      max(
        18px,
        env(safe-area-inset-right)
      ) !important;
  }


  /*
   * svhだけでなくdvhにも対応。
   * iOS Safariのアドレスバー伸縮対策。
   */
  .global-nav{
    width:100%;

    height:100svh;
    min-height:100svh;

    overflow-y:auto;

    padding-top:
      max(
        92px,
        calc(
          env(safe-area-inset-top)
          + 76px
        )
      );

    padding-right:
      max(
        18px,
        env(safe-area-inset-right)
      );

    padding-bottom:
      max(
        30px,
        env(safe-area-inset-bottom)
      );

    padding-left:
      max(
        18px,
        env(safe-area-inset-left)
      );

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  @supports(height:100dvh){

    .global-nav{
      height:100dvh;
      min-height:100dvh;
    }

  }


  .nav-link{
    flex:0 0 auto;

    min-width:
      min(
        280px,
        84vw
      );

    min-height:48px;

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


  .menu-button{
    flex:0 0 auto;

    min-width:44px;
    min-height:44px;
  }


  .profile-card,
  .concept-card,
  .stream-feature-grid,
  .stream-content-grid,
  .gallery-feature,
  .schedule-top-grid,
  .link-sub-grid,
  .contact-shell{
    min-width:0;
    max-width:100%;
  }

}


/* =========================================================
   PHONE
   <= 640px
   ========================================================= */

@media(max-width:640px){

  html{
    scroll-padding-top:
      calc(
        var(--header-h)
        + 8px
      );
  }


  .site-header{
    width:100%;

    padding-left:
      max(
        13px,
        env(safe-area-inset-left)
      ) !important;

    padding-right:
      max(
        13px,
        env(safe-area-inset-right)
      ) !important;
  }


  .brand{
    flex:0 1 auto;

    max-width:
      calc(
        100vw
        - 86px
        - env(safe-area-inset-left)
        - env(safe-area-inset-right)
      );
  }


  .menu-button{
    flex:0 0 44px;
  }


  /* HERO */

  .hero{
    width:100%;
    overflow:hidden;
  }


  .hero-left,
  .hero-right{
    width:100%;
    min-width:0;
  }


  .hero-copy{
    width:100%;
    max-width:100%;
  }


  .hero-title{
    max-width:100%;
  }


  .hero-description{
    width:100%;
    max-width:360px;
    margin-inline:auto;
  }


  .favorite-row{
    width:100%;
    max-width:360px;
    margin-inline:auto;
  }


  .favorite-item{
    flex:
      1 1 0;

    min-width:0 !important;
  }


  /* GENERAL SECTIONS */

  .section,
  .stream-showcase,
  .gallery-showcase,
  .schedule-showcase,
  .link-hub,
  .contact-showcase{
    max-width:100%;
  }


  .stream-shell,
  .gallery-shell,
  .schedule-shell,
  .link-shell{
    max-width:
      calc(
        100vw
        - 26px
      ) !important;
  }


  /* STREAM */

  .stream-feature-grid,
  .stream-content-grid{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .stream-hero-card,
  .stream-next-card,
  .stream-upcoming,
  .stream-archives{
    width:100%;
    max-width:100%;
  }


  .stream-meta-list{
    min-width:0;
  }


  .stream-meta-list > div{
    min-width:0;
  }


  /* GALLERY */

  .gallery-feature{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .gallery-feature-media,
  .gallery-feature-copy{
    width:100%;
    max-width:100%;
  }


  /* SCHEDULE */

  .schedule-top-grid{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .schedule-week-card,
  .schedule-next-card,
  .schedule-list-section{
    width:100%;
    max-width:100%;
  }


  /*
   * 7日分はスクロールさせず
   * 幅の中に収める。
   */
  .schedule-week{
    width:100%;
    min-width:0;
  }


  .schedule-day{
    min-width:0;
  }


  /* LINK */

  .social-portal-grid,
  .link-sub-grid{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .social-portal,
  .brand-guide-link,
  .link-message-card{
    width:100%;
    max-width:100%;
  }


  /* CONTACT */

  .contact-shell{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .contact-visual,
  .contact-panel{
    width:100%;
    max-width:100%;
  }


  /* FOOTER */

  .footer-inner{
    padding-left:
      max(
        16px,
        env(safe-area-inset-left)
      );

    padding-right:
      max(
        16px,
        env(safe-area-inset-right)
      );

    padding-bottom:
      max(
        24px,
        env(safe-area-inset-bottom)
      );
  }


  .footer-nav{
    justify-content:center;
  }


  .footer-share-actions{
    flex-wrap:wrap;
  }

}


/* =========================================================
   SMALL PHONE
   iPhone SE / 360px Android
   <= 390px
   ========================================================= */

@media(max-width:390px){

  .section{
    padding-left:14px;
    padding-right:14px;
  }


  .stream-shell,
  .gallery-shell,
  .schedule-shell,
  .link-shell{
    max-width:
      calc(
        100vw
        - 22px
      ) !important;
  }


  .hero-title{
    font-size:
      clamp(
        1.72rem,
        8.7vw,
        2rem
      ) !important;
  }


  .favorite-row{
    gap:2px !important;
  }


  .favorite-icon{
    width:38px !important;
    height:38px !important;
  }


  .favorite-item{
    font-size:.58rem !important;
  }


  .social-portal{
    grid-template-columns:
      46px
      minmax(0,1fr)
      30px !important;

    gap:10px !important;
  }


  .social-portal-icon{
    width:46px !important;
    height:46px !important;
  }

}


/* =========================================================
   SHORT LANDSCAPE
   iPhone / Android 横向き
   ========================================================= */

@media(
  max-width:1020px
)
and
(
  max-height:560px
)
and
(
  orientation:landscape
){

  .global-nav{
    justify-content:flex-start !important;

    gap:2px !important;

    padding-top:
      max(
        74px,
        calc(
          env(safe-area-inset-top)
          + 66px
        )
      ) !important;
  }


  .nav-link{
    min-height:40px !important;

    padding:
      5px 20px !important;
  }


  .nav-link small{
    font-size:.58rem !important;
  }


  .hero-left{
    min-height:
      max(
        330px,
        88dvh
      ) !important;
  }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media(hover:none) and (pointer:coarse){

  a,
  button,
  .gallery-feature-media,
  .gallery-filter,
  .favorite-item{
    -webkit-tap-highlight-color:
      transparent;
  }


  .nav-link,
  .mini-social,
  .contact-button,
  .gallery-filter,
  .schedule-next-button,
  .social-portal-arrow,
  .brand-guide-arrow{
    min-height:44px;
  }


  /*
   * hoverが残るAndroid対策
   */
  .social-portal:hover,
  .brand-guide-link:hover,
  .gallery-feature-button:hover{
    transform:none;
  }

}


/* =========================================================
   DEVICE SAFE AREA
   ========================================================= */

@supports(
  padding:max(
    0px,
    env(safe-area-inset-bottom)
  )
){

  body{
    padding-left:
      env(safe-area-inset-left);

    padding-right:
      env(safe-area-inset-right);
  }


  /*
   * fixed headerはbody paddingの影響を
   * 二重に受けないよう全幅維持。
   */
  .site-header{
    left:0;
    right:0;
  }

}



/* =========================================================
   YUKINON MOBILE NIGHT HERO FIX V1.4
   iPhone / Android / Tablet
   ========================================================= */

@media(max-width:1020px){

  /*
   * TOP全体
   */
  html[data-theme="night"] .hero{
    color:#fff8fc !important;

    background:
      radial-gradient(
        circle at 85% 32%,
        rgba(164,108,177,.13),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #1a131f 0%,
        #241a2b 48%,
        #17111c 100%
      ) !important;
  }


  /*
   * 画像下端に入っていた
   * 白いフェードをNIGHT用へ変更
   */
  html[data-theme="night"] .hero-left-wash{
    background:
      linear-gradient(
        to bottom,
        transparent 62%,
        rgba(28,20,34,.28) 76%,
        rgba(26,19,32,.84) 92%,
        rgba(26,19,32,.99) 100%
      ) !important;
  }


  /*
   * スマホ時に白固定されていた
   * 右側コピー領域
   */
  html[data-theme="night"] .hero-right{
    color:#fff8fc !important;

    background:
      radial-gradient(
        circle at 50% 5%,
        rgba(238,102,173,.08),
        transparent 32%
      ),
      radial-gradient(
        circle at 85% 65%,
        rgba(200,175,232,.09),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        #1a141f 0%,
        #241a2b 48%,
        #19121e 100%
      ) !important;
  }


  /*
   * HERO上部の手書きコピー
   */
  html[data-theme="night"] .hero-hand-top{
    color:#f19bc8 !important;

    text-shadow:
      0 2px 14px
      rgba(238,102,173,.12) !important;
  }


  html[data-theme="night"] .hero-overline{
    color:#d8b9e7 !important;
  }


  /*
   * メインタイトル
   */
  html[data-theme="night"] .hero-title{
    color:#fff8fc !important;
  }


  html[data-theme="night"] .hero-title span{
    color:#fff8fc !important;
  }


  html[data-theme="night"] .hero-title em{
    color:#f18abe !important;
  }


  html[data-theme="night"] .title-stroke{
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(238,102,173,.85),
        rgba(200,175,232,.65),
        transparent
      ) !important;
  }


  /*
   * 説明文
   */
  html[data-theme="night"] .hero-description{
    color:#d8cad7 !important;

    opacity:1 !important;
  }


  /*
   * 好きなものアイコン
   */
  html[data-theme="night"] .favorite-item{
    color:#d9cbd8 !important;
  }


  html[data-theme="night"] .favorite-icon{
    color:#f4dff0 !important;

    background:
      linear-gradient(
        145deg,
        rgba(97,67,108,.72),
        rgba(55,41,67,.84)
      ) !important;

    border:
      1px solid
      rgba(230,184,222,.18) !important;

    box-shadow:
      0 8px 22px
      rgba(5,2,8,.18) !important;
  }


  /*
   * PROFILE / STREAMボタン
   */
  html[data-theme="night"] .hero-button{
    border:
      1px solid
      rgba(235,188,226,.15) !important;

    box-shadow:
      0 14px 34px
      rgba(5,2,8,.20) !important;
  }


  html[data-theme="night"] .hero-button.primary{
    color:#fff !important;

    background:
      linear-gradient(
        115deg,
        #db65a3,
        #aa659d
      ) !important;
  }


  html[data-theme="night"] .hero-button.secondary{
    color:#fff !important;

    background:
      linear-gradient(
        115deg,
        #5c4869,
        #7a5879
      ) !important;
  }


  html[data-theme="night"] .hero-button strong,
  html[data-theme="night"] .hero-button small{
    color:inherit !important;
  }


  /*
   * HERO内の余計な白発光を防止
   */
  html[data-theme="night"] .hero-copy{
    background:
      transparent !important;

    box-shadow:
      none !important;
  }

}


/* =========================================================
   PHONE PRECISION
   ========================================================= */

@media(max-width:640px){

  html[data-theme="night"] .hero-left-wash{
    background:
      linear-gradient(
        to bottom,
        transparent 68%,
        rgba(27,20,33,.34) 80%,
        rgba(27,20,33,.90) 94%,
        #1b1421 100%
      ) !important;
  }


  html[data-theme="night"] .hero-right{
    padding-top:
      30px !important;

    background:
      linear-gradient(
        180deg,
        #1b1421 0%,
        #211827 52%,
        #17111c 100%
      ) !important;
  }


  html[data-theme="night"] .hero-description{
    color:#d9cdd8 !important;
  }

}


/* =========================================================
   YUKINON MOBILE NIGHT MENU COLOR FIX V1.5.1
   Preserve existing drawer geometry
   ========================================================= */

@media(max-width:1020px){

  /*
   * IMPORTANT:
   * position / inset / width / height は変更しない。
   * 現在の「左に元ページが見える」構成をそのまま使用。
   */
  html[data-theme="night"]
  .global-nav{
    color:#fff8fc !important;

    background:
      radial-gradient(
        circle at 20% 15%,
        rgba(238,102,173,.10),
        transparent 31%
      ),
      radial-gradient(
        circle at 85% 80%,
        rgba(200,175,232,.10),
        transparent 34%
      ),
      linear-gradient(
        145deg,
        rgba(32,23,39,.985),
        rgba(44,31,52,.985) 55%,
        rgba(27,20,34,.99)
      ) !important;

    border-color:
      rgba(232,188,224,.14) !important;

    box-shadow:
      -18px 0 54px
      rgba(5,2,8,.28) !important;

    backdrop-filter:
      blur(22px) !important;

    -webkit-backdrop-filter:
      blur(22px) !important;
  }


  /* メニュー文字 */

  html[data-theme="night"]
  .global-nav
  .nav-link{
    color:
      #f4eaf3 !important;

    background:
      transparent !important;
  }


  html[data-theme="night"]
  .global-nav
  .nav-link span{
    color:
      #f8eef7 !important;

    opacity:1 !important;
  }


  html[data-theme="night"]
  .global-nav
  .nav-link small{
    color:
      #c6b4c5 !important;

    opacity:1 !important;
  }


  /* 選択中 */

  html[data-theme="night"]
  .global-nav
  .nav-link.active span,

  html[data-theme="night"]
  .global-nav
  .nav-link[aria-current="page"] span{
    color:
      #ff93c5 !important;
  }


  html[data-theme="night"]
  .global-nav
  .nav-link.active small,

  html[data-theme="night"]
  .global-nav
  .nav-link[aria-current="page"] small{
    color:
      #e2bfdc !important;
  }


  html[data-theme="night"]
  .global-nav
  .nav-link::after{
    background:
      linear-gradient(
        90deg,
        transparent,
        #ef83bb,
        #cda7e3,
        transparent
      ) !important;
  }


  /* メニュー内の区切りがある場合 */

  html[data-theme="night"]
  .global-nav
  .nav-link{
    border-color:
      rgba(232,188,224,.07) !important;
  }


  /* ハンバーガー / 閉じるボタン */

  html[data-theme="night"]
  .menu-button{
    color:
      #fff4fb !important;

    background:
      rgba(67,48,79,.78) !important;

    border:
      1px solid
      rgba(232,188,224,.18) !important;

    box-shadow:
      0 8px 24px
      rgba(5,2,8,.22) !important;
  }


  html[data-theme="night"]
  .menu-button span{
    background:
      #f7eaf4 !important;
  }

}



/* =========================================================
   YUKINON MOBILE HEADER CONTROLS V1.5.2
   Theme toggle + hamburger separation
   Drawer geometry is NOT changed
   ========================================================= */

@media(max-width:1020px){

  /*
   * ヘッダーを基準座標にするだけ。
   * global-nav の位置・幅には触れない。
   */
  .site-header{
    position:fixed;
  }


  /* =======================================================
     HAMBURGER
     右端固定
     ======================================================= */

  .site-header .menu-button{
    position:absolute !important;

    top:50% !important;

    right:
      max(
        13px,
        env(safe-area-inset-right)
      ) !important;

    left:auto !important;

    margin:0 !important;

    transform:
      translateY(-50%) !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;
    min-height:42px !important;

    z-index:104 !important;
  }


  /*
   * メニューOPEN時のX変形は
   * span側なので、このtransformとは競合しない
   */


  /* =======================================================
     DAY / NIGHT TOGGLE
     ハンバーガーの左へ固定
     ======================================================= */

  .site-header [data-theme-toggle],
  .site-header [data-theme-button],
  .site-header .theme-toggle,
  .site-header .theme-toggle-button,
  .site-header .theme-button,
  .site-header .theme-switch,
  .site-header button[aria-label*="テーマ"],
  .site-header button[aria-label*="theme" i]{
    position:absolute !important;

    top:50% !important;

    /*
     * hamburger:
     * right 13px + width 42px
     *
     * theme:
     * その左へ約8px空ける
     */
    right:
      max(
        63px,
        calc(
          env(safe-area-inset-right)
          + 63px
        )
      ) !important;

    left:auto !important;

    margin:0 !important;

    transform:
      translateY(-50%) !important;

    z-index:104 !important;
  }


  /* 円形アイコンタイプの場合 */

  .site-header [data-theme-toggle],
  .site-header [data-theme-button],
  .site-header .theme-toggle,
  .site-header .theme-toggle-button,
  .site-header .theme-button,
  .site-header .theme-switch{
    min-width:38px;
    min-height:38px;

    flex:0 0 auto;
  }


  /* =======================================================
     BRAND
     右側2ボタンの領域へ侵入しない
     ======================================================= */

  .site-header .brand{
    max-width:
      calc(
        100vw
        - 126px
        - env(safe-area-inset-left)
        - env(safe-area-inset-right)
      ) !important;
  }

}


/* =========================================================
   PHONE PRECISION
   ========================================================= */

@media(max-width:640px){

  .site-header .menu-button{
    right:
      max(
        12px,
        env(safe-area-inset-right)
      ) !important;
  }


  .site-header [data-theme-toggle],
  .site-header [data-theme-button],
  .site-header .theme-toggle,
  .site-header .theme-toggle-button,
  .site-header .theme-button,
  .site-header .theme-switch,
  .site-header button[aria-label*="テーマ"],
  .site-header button[aria-label*="theme" i]{
    right:
      max(
        61px,
        calc(
          env(safe-area-inset-right)
          + 61px
        )
      ) !important;
  }

}


/* =========================================================
   VERY SMALL PHONE
   360 / 375px class
   ========================================================= */

@media(max-width:390px){

  .site-header .brand{
    max-width:
      calc(
        100vw
        - 118px
        - env(safe-area-inset-left)
        - env(safe-area-inset-right)
      ) !important;
  }

}