@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root {
  --yuyukoko-font: 'Zen Maru Gothic', sans-serif;
  --yuyukoko-english-font: 'Nunito', 'Zen Maru Gothic', sans-serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--yuyukoko-font);
}

h1, h2, h3, h4, h5, h6,
.hero-copy,
.about-copy,
.section-heading {
  font-family: var(--yuyukoko-font);
  font-weight: 700;
}

nav,
nav a,
.section-label,
.section-title,
.eyebrow {
  font-family: var(--yuyukoko-english-font);
}

/* YY SKY TYPOGRAPHY 20261103 */
html body,
html button,
html input,
html textarea,
html select {
  font-family: 'Zen Maru Gothic', sans-serif;
}
html .hero-copy h1,
html .section-heading h2,
html .brand-name {
  font-family: 'Nunito', 'Zen Maru Gothic', sans-serif !important;
  font-weight: 700;
}
html .global-nav a,
html .eyebrow {
  font-family: 'Nunito', 'Zen Maru Gothic', sans-serif !important;
}
html[data-font] {
  --sans: 'Zen Maru Gothic', sans-serif;
  --serif: 'Nunito', 'Zen Maru Gothic', sans-serif;
}


/* YY_SKY_DESIGN_20261103
   yuyukoko preview-only presentation overrides
*/

:root {
  --yy-sky: #DDF4FF;
  --yy-sky-light: #F5FBFF;
  --yy-white: #FFFFFF;
  --yy-blue: #A8DDF2;
  --yy-ink: #526F88;
  --yy-radius: 22px;
  --paper: var(--yy-sky-light);
  --paper-deep: var(--yy-sky);
  --ink: var(--yy-ink);
  --accent: var(--yy-blue);
  --tenant-radius: var(--yy-radius);
  --sans: "Zen Maru Gothic", sans-serif;
  --serif: "Nunito", "Zen Maru Gothic", sans-serif;
}

html,
body {
  background: var(--yy-sky-light);
  color: var(--yy-ink);
}

body,
button,
input,
textarea,
select {
  font-family: "Zen Maru Gothic", sans-serif;
}

.hero {
  background: linear-gradient(
    145deg,
    #B9E6FA 0%,
    #E3F6FF 55%,
    #FFFFFF 100%
  );
  color: #FFFFFF;
}

.hero-shade {
  background: linear-gradient(
    95deg,
    rgba(45, 95, 127, 0.42),
    rgba(127, 193, 222, 0.18)
  );
}

.hero-copy h1 {
  font-family: "Nunito", "Zen Maru Gothic", sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.045em;
  font-size: clamp(3.7rem, 11vw, 8rem);
}

.hero-tagline {
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 0.04em;
}

.section {
  color: var(--yy-ink);
}

.section-heading h2 {
  font-family: "Nunito", "Zen Maru Gothic", sans-serif !important;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -0.035em;
}

.section-heading p,
.about-copy,
.content-status {
  font-family: "Zen Maru Gothic", sans-serif;
}

.global-nav a,
.eyebrow,
.scroll-cue {
  font-family: "Nunito", "Zen Maru Gothic", sans-serif !important;
}

.work-image,
.media-image,
.goods-image,
.event-image,
.social-feed-image,
.about-photo img,
.live-image,
.instagram-card,
.video-frame {
  border-radius: var(--yy-radius);
}

.works-section,
.news-section,
.goods-section {
  background-color: var(--yy-sky-light);
}

.live-section,
.discography-section,
.about-section {
  background-color: var(--yy-sky);
}

a,
button {
  transition: background-color .2s ease,
              color .2s ease,
              box-shadow .2s ease;
}

@media (max-width: 767px) {
  .hero-copy h1 {
    font-size: clamp(3rem, 13vw, 5.5rem);
  }

  .section-heading h2 {
    font-size: clamp(2.3rem, 11vw, 3.8rem);
  }

  .section {
    overflow-wrap: anywhere;
  }
}


/* YY_SKY_POLISH_20261103
   yuyukoko-only typography, cards and buttons
*/

:root {
  --yy-card-bg: #FFFFFF;
  --yy-card-border: #D5EAF5;
  --yy-button: #71BDE4;
  --yy-button-hover: #4AA7D6;
  --yy-shadow: 0 10px 30px rgba(82, 111, 136, .10);
}

.section-heading h2 {
  font-family: "Nunito", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(2.5rem, 5.8vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
}

.section-heading,
.section-heading p,
.about-copy,
.content-status {
  color: var(--yy-ink);
}

.work-card,
.live-card,
.goods-card,
.media-card,
.social-feed-card,
.instagram-card {
  background: var(--yy-card-bg);
  border: 1px solid var(--yy-card-border);
  border-radius: var(--yy-radius);
  box-shadow: var(--yy-shadow);
  overflow: hidden;
}

.work-card img,
.live-card img,
.goods-card img,
.media-card img {
  max-width: 100%;
}

.live-card a.button,
.live-card .button,
.goods-card .button,
a.ticket-button,
a.btn-primary {
  background: var(--yy-button);
  color: #FFFFFF;
  border: 1px solid var(--yy-button);
  border-radius: 999px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.live-card a.button:hover,
.live-card .button:hover,
.goods-card .button:hover,
a.ticket-button:hover,
a.btn-primary:hover {
  background: var(--yy-button-hover);
  border-color: var(--yy-button-hover);
  color: #FFFFFF;
}

.section-heading .eyebrow {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
}

@media (max-width: 767px) {
  .section-heading h2 {
    font-size: clamp(2rem, 8vw, 3.2rem);
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
  }

  .work-card,
  .live-card,
  .goods-card,
  .media-card,
  .social-feed-card {
    border-radius: 18px;
  }

  .section {
    overflow-x: clip;
  }
}


/* YY_SKY_DETAIL_FONT_20261103
   Detail pages: NEWS / LIVE / SNS / content pages
*/

main,
article,
section,
.content-page,
.content-detail,
.content-body,
.content-entry,
.detail-page,
.detail-content,
.news-detail,
.live-detail,
.sns-detail,
.post-detail,
.post-content {
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--yy-ink, #526F88);
}

main h1,
main h2,
main h3,
article h1,
article h2,
article h3,
.content-page h1,
.content-page h2,
.content-page h3,
.content-detail h1,
.content-detail h2,
.content-detail h3,
.detail-page h1,
.detail-page h2,
.detail-page h3,
.news-detail h1,
.live-detail h1,
.sns-detail h1,
.post-detail h1 {
  font-family: "Nunito", "Zen Maru Gothic", sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

main p,
main li,
main dd,
main dt,
main span,
main time,
article p,
article li,
article dd,
article dt,
article span,
article time,
.content-body p,
.content-body li,
.content-body dd,
.content-body dt,
.content-body span,
.content-body time,
.detail-content p,
.detail-content li,
.detail-content dd,
.detail-content dt,
.detail-content span,
.detail-content time {
  font-family: "Zen Maru Gothic", sans-serif !important;
  line-height: 1.9;
}

main a,
article a,
.content-page a,
.content-detail a,
.detail-page a,
.news-detail a,
.live-detail a,
.sns-detail a {
  font-family: "Zen Maru Gothic", sans-serif;
}

.breadcrumb,
.meta,
.post-meta,
.entry-meta,
.content-date,
.content-category,
.detail-date,
.detail-meta,
main .eyebrow,
article .eyebrow {
  font-family: "Nunito", "Zen Maru Gothic", sans-serif !important;
  letter-spacing: .04em;
}

@media (max-width: 767px) {
  main h1,
  article h1,
  .content-page h1,
  .content-detail h1,
  .detail-page h1,
  .news-detail h1,
  .live-detail h1,
  .sns-detail h1 {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
}


/* YY_DISCOGRAPHY_READABILITY_20261103 */

html[data-yy-page="discography"] main {
  color: #526F88;
}

html[data-yy-page="discography"] main
:is(p, [class*="description"], [class*="summary"]) {
  color: #526F88 !important;
  opacity: 1 !important;
  line-height: 1.85;
}

html[data-yy-page="discography"] main
:is(article, .discography-card, .release-card,
    .archive-card, .archive-item, .content-card)
:is(h2, h3, p, small, time,
    [class*="description"], [class*="meta"],
    [class*="title"]) {
  color: #526F88 !important;
  box-sizing: border-box;
  padding-inline: clamp(16px, 2vw, 28px);
  overflow-wrap: anywhere;
}

html[data-yy-page="discography"] main
:is(article, .discography-card, .release-card,
    .archive-card, .archive-item, .content-card)
> :is(div, section):not(:has(img)) {
  padding: clamp(16px, 2vw, 28px);
  box-sizing: border-box;
}

html[data-yy-page="discography"] main
:is(article, .discography-card, .release-card,
    .archive-card, .archive-item, .content-card)
:is(h2, h3) {
  font-family: "Zen Maru Gothic", sans-serif !important;
  line-height: 1.4;
}

@media (max-width: 767px) {
  html[data-yy-page="discography"] main
  :is(article, .discography-card, .release-card,
      .archive-card, .archive-item, .content-card)
  :is(h2, h3, p, small, time,
      [class*="description"], [class*="meta"],
      [class*="title"]) {
    padding-inline: 20px;
  }
}


/* YY_DISCOGRAPHY_CARD_FIX_20261103
   Actual archive renderer: .archive-card.discography-card
*/

html[data-yy-page="discography"] .archive-card.discography-card {
  background: #FFFFFF;
  border: 1px solid #D5EAF5;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(82,111,136,.08);
}

html[data-yy-page="discography"]
.archive-card.discography-card .archive-copy {
  box-sizing: border-box;
  width: 100%;
  padding: 24px 28px 28px;
  color: #526F88 !important;
}

html[data-yy-page="discography"]
.archive-card.discography-card .archive-copy > p:not(.content-label):not(.release-date) {
  color: #526F88 !important;
  opacity: 1 !important;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

html[data-yy-page="discography"]
.archive-card.discography-card .archive-copy > h3 {
  color: #526F88 !important;
  font-family: "Zen Maru Gothic", sans-serif !important;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html[data-yy-page="discography"]
.archive-card.discography-card .archive-copy > .release-date {
  color: #777064 !important;
  opacity: 1 !important;
}

html[data-yy-page="discography"]
.archive-card.discography-card .archive-copy > .content-label {
  color: #6E9DB7 !important;
}

@media (max-width: 767px) {
  html[data-yy-page="discography"]
  .archive-card.discography-card .archive-copy {
    padding: 20px;
  }
}


/* YY_NATIVE_DISCOGRAPHY_FIX_20261103
   Native Preview: #discography
*/

.discography-section .discography-card {
  background: #FFFFFF;
  color: #526F88;
}

.discography-section .discography-card .archive-copy {
  box-sizing: border-box;
  min-width: 0;
  padding: 24px 28px 28px !important;
  color: #526F88 !important;
}

.discography-section .discography-card .archive-copy > h3 {
  color: #526F88 !important;
  font-family: "Zen Maru Gothic", sans-serif !important;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.discography-section .discography-card .archive-copy > p {
  color: #526F88 !important;
  opacity: 1 !important;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.discography-section .discography-card
.archive-copy > .content-label {
  color: #777064 !important;
}

.discography-section .discography-card
.archive-copy > .release-date {
  color: #777064 !important;
}

@media (max-width: 767px) {
  .discography-section .discography-card .archive-copy {
    padding: 20px !important;
  }
}


/* YY_NATIVE_MEDIA_CARD_FIX_20261103
   Verified DOM: .discography-section .media-card .media-copy
*/

.discography-section .media-card {
  box-sizing: border-box;
  background: #FFFFFF;
  color: #526F88;
  border: 1px solid #D5EAF5;
  border-radius: 22px;
  overflow: hidden;
}

.discography-section .media-card .media-copy {
  box-sizing: border-box;
  min-width: 0;
  padding: 24px 28px 28px !important;
  color: #526F88 !important;
}

.discography-section .media-card .media-copy h3,
.discography-section .media-card .media-copy h2 {
  color: #526F88 !important;
  font-family: "Zen Maru Gothic", sans-serif !important;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.discography-section .media-card .media-copy p {
  color: #526F88 !important;
  opacity: 1 !important;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.discography-section .media-card .media-copy
:is(.content-label, .release-date, time) {
  color: #777064 !important;
}

@media (max-width: 767px) {
  .discography-section .media-card .media-copy {
    padding: 20px !important;
  }
}