/* ============================================================
   kirarina art stage — Top page
   ============================================================ */

:root {
  --stage-main-color: #bacf5d; /* hero / about の黄緑 */
  --footer-color: #c5cc3c;     /* フッターのオリーブ */
  --pink-key: #c8357a;         /* ラベル・見出しのピンク */
  --pink-dark: #87325e;        /* ボタン下線・メールリンク */
  --pink-accent: #ba4c7c;      /* SNS・矢印アクセント */
  --navy: #062b48;             /* ナビ文字 */
  --text: #1a1a1a;
  --text-muted: #888;
  --border-light: #e5e5e5;

  --content-max: 1280px;
  --pad-x: 80px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }

/* 共通ラベル + ディバイダー -------------------------------- */
.label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--pink-key);
}
.divider {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--pink-key);
}

/* ============================================================
   Header
   ============================================================ */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 60px 28px;
}
.header__logo--pc img { width: 153px; height: 77px; }
.header__logo--sp { display: none; }
.header__logo--sp img { width: 115px; height: 38px; }

/* SP用SNSアイコン（PCでは非表示） */
.header__sns { display: none; align-items: center; gap: 22px; }
.header__sns-link { display: inline-flex; transition: opacity .2s ease; }
.header__sns-link:hover { opacity: .6; }

.nav {
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 16px 21px 16px 37px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 33px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav__link {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: var(--navy);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.nav__link:hover { opacity: .6; }
.nav__sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--pink-accent);
  border-radius: 16px;
  transition: opacity .2s ease;
}
.nav__sns:hover { opacity: .85; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  background: var(--stage-main-color);
  overflow: hidden;
}
/* FVグラフィックはFV全体（全幅・全高）にカバー表示 */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.hero__bg--sp { display: none; }
.hero__inner {
  position: relative;
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__copy {
  width: 505px;
  margin-left: auto;
  margin-right: 119px; /* 1280 - 656 - 505 = 119 : デザインの右基準を保つ */
  display: flex;
  flex-direction: column;
  gap: 59px;
}
.hero__lead {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.67;
  letter-spacing: 4.8px;
  color: #fff;
}
.hero__logo { width: 505px; height: 411px; }

/* ============================================================
   Current Exhibition
   ============================================================ */
.exhibition { background: #fff; }
.exhibition__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 60px;
}
.exhibition__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  width: 364px;
  flex-shrink: 0;
  gap: 26px;
}
.exhibition__title { display: flex; flex-direction: column; gap: 6px; }
.exhibition__title h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.exhibition__subtitle {
  font-size: 18px;
  color: var(--pink-key);
}
.exhibition__desc {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text);
}
.exhibition__date { display: flex; flex-direction: column; gap: 4px; color: var(--pink-key); }
.exhibition__year {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
}
.exhibition__range {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.btn-readmore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 144px;
  height: 44px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  border-bottom: 1px solid var(--pink-dark);
  transition: gap .2s ease;
}
.btn-readmore__arrow { color: var(--pink-dark); }
.btn-readmore:hover { opacity: .7; }
.btn-readmore__label--sp { display: none; }

.exhibition__image {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1920 / 1080;
}
.exhibition__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   News
   ============================================================ */
.news { background: #fff; }
.news__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.news__item { border-bottom: 1px solid var(--border-light); }
.news__item:first-child { border-top: 1px solid var(--border-light); }
.news__item a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding-right: 16px;
  transition: opacity .2s ease;
}
.news__item a:hover { opacity: .6; }
.news__date {
  flex-shrink: 0;
  width: 80px;
  font-size: 13px;
  color: var(--text-muted);
}
.news__text {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 1.625;
  color: var(--text);
}
.news__arrow {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text);
}

/* ============================================================
   About
   ============================================================ */
.about {
  position: relative;
  background: var(--stage-main-color);
  overflow: hidden;
}
.about__deco {
  position: absolute;
  right: 0;
  top: -6px;
  width: 571px;
  height: 579px;
  pointer-events: none;
  user-select: none;
}
.about__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.about__body { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.about__heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.17;
}
.about__text {
  font-size: 16px;
  line-height: 1.625;
}
.about__credit {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: #fff;
}

/* ============================================================
   Access
   ============================================================ */
.access { background: #fff; }
.access__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 80px 40px 80px 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.access__body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 36px;
}
.access__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--text);
  flex-shrink: 0;
}
.access__name {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.125;
}
.access__routes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}
.access__map {
  display: block;
  width: 636px;
  max-width: 60%;
  flex-shrink: 1;
  transition: opacity .2s ease;
}
.access__map:hover { opacity: .85; }
.access__map img { width: 100%; height: auto; }

/* ============================================================
   Contact
   ============================================================ */
.contact { background: #fff; }
.contact__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 80px 80px 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.contact__desc {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text);
}
.contact__mail {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--pink-dark);
  border-bottom: 1px solid var(--pink-accent);
  border-radius: 4px;
  transition: background .2s ease;
}
.contact__mail:hover { background: #fdf3f7; }
.contact__arrow { color: var(--pink-accent); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--footer-color); color: #fff; }
.footer__top {
  display: flex;
  align-items: flex-start;
  padding: 48px 60px 32px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.footer__logo { width: 80px; height: 64px; flex-shrink: 0; }
.footer__logo img { width: 100%; height: 100%; object-fit: contain; }
.footer__social {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 20px;
  font-size: 12px;
}
.footer__spacer { flex: 1 1 auto; }
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  padding-left: 40px;
}
.footer__col-head { font-weight: 500; }
.footer__col a { transition: opacity .2s ease; }
.footer__col a:hover { opacity: .7; }
.footer__bottom {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 60px 24px;
}
.footer__bottom a {
  font-size: 11px;
  transition: opacity .2s ease;
}
.footer__bottom a:hover { opacity: .7; }

/* ============================================================
   下層ページ共通ヘッダー（緑バー）
   ============================================================ */
.subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--stage-main-color);
  padding: 40px 60px 28px;
}
.subheader__logo img { width: 153px; height: 77px; }
.subnav {
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 16px 21px 16px 37px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 33px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.subnav__link {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: var(--navy);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.subnav__link:hover { opacity: .6; }

/* ============================================================
   Exhibition 詳細ページ
   ============================================================ */
.detail { background: #fff; }
.detail__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.detail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.detail__title {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  font-weight: 400;
}
.detail__title-main {
  font-size: 48px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.detail__title-sub {
  font-size: 18px;
  color: var(--pink-key);
  padding-bottom: 6px;
}
.detail__date { display: flex; flex-direction: column; gap: 4px; color: var(--pink-key); }
.detail__year { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; }
.detail__range { font-size: 36px; font-weight: 700; line-height: 1.2; }

.detail__hero {
  width: 100%;
  aspect-ratio: 1920 / 1080;
}
.detail__hero img { width: 100%; height: 100%; object-fit: cover; }

.detail__lead { font-size: 16px; line-height: 26px; color: var(--text); }

.detail__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.detail__block-title {
  width: 100%;
  margin: 0;
  padding: 12px 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--pink-key);
  border-bottom: 1px solid var(--pink-dark);
}

/* OVERVIEW テーブル */
.overview { width: 100%; margin: 0; }
.overview__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
}
.overview__row dt {
  flex-shrink: 0;
  width: 80px;
  font-size: 13px;
  color: var(--pink-key);
  border-right: 1px solid var(--pink-key);
}
.overview__row dd {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  color: var(--text);
}
.overview__row dd a { color: var(--pink-dark); transition: opacity .2s ease; }
.overview__row dd a:hover { opacity: .7; }

/* Artists Profile */
.artist__name { margin: 0; font-size: 24px; font-weight: 700; line-height: 26px; color: #000; }
.artist__desc { font-size: 16px; line-height: 26px; color: #000; }
.artist__history {
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #949ea1;
  font-size: 16px;
  line-height: 26px;
  color: #000;
  white-space: pre-line;
}

/* ============================================================
   法的テキストページ（個人情報保護方針など）
   ============================================================ */
.legal {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
}
.legal p { margin: 0; }
.legal h2 {
  margin: 26px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}
.legal ul {
  margin: 0;
  padding-left: 1.5em;
  list-style: disc;
}
.legal a { color: var(--pink-key); text-decoration: underline; }
.legal a:hover { opacity: .7; }
.legal__date { margin-top: 26px !important; }

/* ============================================================
   NEWS 記事ページ
   ============================================================ */
.article__date {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: #bdbfc0;
}
.article__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  color: var(--text);
}
.article__body { width: 100%; font-size: 16px; line-height: 26px; color: var(--text); }
.article__body p { margin: 0; }
.article__body p + p { margin-top: 26px; }

/* ============================================================
   中間幅（769〜1024px）: PCレイアウトのまま余白だけ調整
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  :root { --pad-x: 48px; }
  .header { padding: 32px 40px 24px; }
}

/* ============================================================
   SP（〜768px）: SPデザインに準拠
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 14px; }

  /* ---- Header: SPロゴ + SNSアイコン ---- */
  .header { padding: 24px; }
  .header__logo--pc { display: none; }
  .header__logo--sp { display: block; }
  .nav { display: none; }
  .header__sns { display: flex; }

  /* ---- Hero: アート全面 + 縦書きタグライン ---- */
  .hero__bg--pc { display: none; }
  .hero__bg--sp { display: block; }
  .hero__copy {
    position: absolute;
    top: 129px;
    right: 24px;
    left: auto;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  .hero__lead {
    writing-mode: vertical-rl;
    height: 285px; /* 「アートと日常が」/「交わる場所。」の2列で改行させる */
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: 4.8px;
  }
  .hero__logo { display: none; }

  /* ---- Exhibition: 画像をタイトルと日付の間に差し込む ---- */
  .exhibition__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 40px 24px;
  }
  .exhibition__info { display: contents; } /* 子要素を inner の直下フレックスに昇格 */
  .exhibition .label        { order: 1; }
  .exhibition .divider      { order: 2; }
  .exhibition__title        { order: 3; }
  .exhibition__image        { order: 4; width: 100%; }
  .exhibition__date         { order: 5; }
  .exhibition__desc         { order: 6; }
  .exhibition .btn-readmore { order: 7; }

  .exhibition__title h2 { font-size: 40px; }
  .exhibition__subtitle { font-size: 16px; }
  .exhibition__year { font-size: 10px; letter-spacing: 0; }
  .exhibition__range { font-size: 28px; }
  .exhibition__desc { font-size: 12px; line-height: 1.6; }

  /* SPボタン: 全周ボーダー・中央寄せ・「詳しく見る」 */
  .btn-readmore__label--pc { display: none; }
  .btn-readmore__label--sp { display: inline; }
  .exhibition .btn-readmore {
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--text);
  }
  .exhibition .btn-readmore__arrow { color: var(--text); }

  /* ---- News ---- */
  .news__inner { padding: 40px 24px; }
  .news__text { font-size: 12px; }

  /* ---- About（装飾なし） ---- */
  .about__deco { display: none; }
  .about__inner { padding: 80px 24px; }
  .about__heading { font-size: 20px; line-height: 1.6; }
  .about__text { font-size: 12px; line-height: 2; }
  .about__credit { font-size: 12px; font-weight: 400; letter-spacing: 0; }

  /* ---- Access: 縦積み ---- */
  .access__inner { padding: 24px 40px 40px 24px; }
  .access__body {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 0;
  }
  .access__name { font-size: 20px; line-height: 1.8; }
  .access__routes { font-size: 12px; }
  .access__map { width: 100%; max-width: 100%; }

  /* ---- Contact ---- */
  .contact__inner { padding: 40px 24px; }
  .contact__desc { font-size: 12px; line-height: 2; }

  /* ---- Footer: ロゴ+SNS / 運営+協力 の2段 ---- */
  .footer__top {
    flex-wrap: wrap;
    gap: 24px;
    padding: 48px 12px 20px;
  }
  .footer__logo { width: 120px; height: 96px; }
  .footer__social { flex: 1 1 calc(100% - 144px); padding-left: 0; }
  .footer__spacer { display: none; }
  .footer__col { flex: 0 1 auto; padding-left: 0; }
  .footer__bottom { padding: 0 24px 24px; }

  /* ---- 下層ヘッダー ---- */
  .subheader { padding: 24px; }
  .subheader__logo img { width: 115px; height: 58px; }
  .subnav { gap: 14px; padding: 10px 14px 10px 20px; }
  .subnav__link { font-size: 14px; }

  /* ---- Exhibition 詳細 ---- */
  .detail__inner { padding: 40px 24px; gap: 32px; }
  .detail__title { flex-direction: column; align-items: flex-start; gap: 4px; }
  .detail__title-main { font-size: 32px; }
  .detail__title-sub { padding-bottom: 0; }
  .detail__range { font-size: 28px; }
  .detail__lead { font-size: 13px; }
  .detail__block-title { font-size: 24px; }
  .overview__row { padding: 12px 4px; gap: 12px; }
  .overview__row dt { width: 64px; }
  .artist__name { font-size: 20px; }
  .artist__desc { font-size: 13px; }
  .artist__history { font-size: 13px; line-height: 24px; }

  /* ---- 法的テキスト ---- */
  .legal { font-size: 14px; }
  .legal h2 { font-size: 14px; }

  /* ---- NEWS 記事 ---- */
  .article__title { font-size: 20px; }
  .article__body { font-size: 13px; }
}