/* ==========================================================
   『夜送舟艇のプリン艇団祭り』特設アートギャラリー
   festival-gallery.css
   ========================================================== */


/* ----------------------------------------------------------
   0. 基本設定
---------------------------------------------------------- */

:root {
  --navy-950: #050817;
  --navy-900: #080d22;
  --navy-800: #101936;
  --navy-700: #17254b;

  --white: #ffffff;
  --white-soft: #eef2ff;
  --text-soft: #cbd4ee;

  --gold: #e8c875;
  --gold-light: #f8e7aa;
  --gold-dark: #a97f2d;

  --violet: #9f92ff;
  --violet-soft: #c8c0ff;

  --panel: rgba(7, 12, 31, 0.78);
  --panel-strong: rgba(6, 10, 26, 0.90);
  --panel-warm: rgba(19, 15, 34, 0.80);

  --border: rgba(239, 218, 154, 0.34);
  --border-soft: rgba(255, 255, 255, 0.16);

  --shadow: 0 18px 45px rgba(0, 0, 0, 0.36);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --max-width: 1180px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  min-width: 320px;
  color: var(--white-soft);
  background: var(--navy-950);
  font-family:
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    system-ui,
    sans-serif;
  line-height: 1.8;
}


/* ----------------------------------------------------------
   1. 最背面の星空壁紙

   ★ここを実際の背景画像へ差し替えてください。

   例：
   url("festival-bg.jpg")

   日本語ファイル名でも動作しますが、
   Web用には festival-bg.jpg のような半角英数字名を推奨します。
---------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;

  background-image: url("festival-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  transform: translateZ(0);
}


/* 星空の上に薄い濃紺フィルター */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      to bottom,
      rgba(3, 7, 23, 0.12) 0%,
      rgba(4, 8, 27, 0.40) 45%,
      rgba(3, 7, 22, 0.66) 100%
    );
  pointer-events: none;
}


img {
  display: block;
  max-width: 100%;
}


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


button {
  font: inherit;
}


a {
  color: inherit;
}


.festival-page {
  overflow: hidden;
}


/* ----------------------------------------------------------
   2. 共通コンテナ
---------------------------------------------------------- */

.section-shell {
  width: min(calc(100% - 40px), var(--max-width));
  margin-inline: auto;
}


.section-heading {
  margin-bottom: 32px;
}


.section-heading__kicker,
.feature-art__kicker,
.quiet-kicker {
  margin: 0 0 6px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
}


.section-heading h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.45;
}


.section-heading--center {
  text-align: center;
}


/* ----------------------------------------------------------
   3. ファーストビュー
---------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(860px, 94svh);
  display: grid;
  place-items: center;
  padding: 80px 20px;
  isolation: isolate;
}


/* タイトル付近だけ、文字を読みやすくする薄い霞 */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(
      circle at center,
      rgba(5, 9, 28, 0.12) 0%,
      rgba(5, 9, 28, 0.28) 42%,
      rgba(5, 9, 28, 0.52) 100%
    );
}


.hero__inner {
  width: min(920px, 100%);
  text-align: center;
}


.hero__eyebrow {
  margin: 0 0 14px;
  color: var(--gold-light);
  font-size: clamp(0.78rem, 1.7vw, 1rem);
  letter-spacing: 0.22em;
}


.hero__title {
  margin: 0;
  line-height: 1.1;
}


.hero__title-main,
.hero__title-jack {
  display: block;
}


.hero__title-main {
  color: var(--white);
  font-size: clamp(2.35rem, 6vw, 5.6rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(121, 138, 255, 0.28);
}


.hero__title-jack {
  margin-top: 10px;
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 6vw, 5.2rem);
  font-style: italic;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.62),
    0 0 28px rgba(232, 200, 117, 0.22);
}


.hero__subtitle {
  margin: 28px 0 0;
  color: var(--white);
  font-size: clamp(1.45rem, 3.4vw, 2.45rem);
  font-weight: 800;
  letter-spacing: 0.1em;
}


.hero__note {
  margin: 12px 0 30px;
  color: var(--text-soft);
}


/* ----------------------------------------------------------
   4. ボタン
---------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 22px;

  border: 1px solid var(--border);
  border-radius: 999px;

  text-decoration: none;
  font-weight: 700;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}


.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}


.button--escape {
  color: var(--white-soft);
  background: rgba(7, 12, 32, 0.70);
  backdrop-filter: blur(7px);
}


.button--escape:hover,
.button--escape:focus-visible {
  border-color: rgba(248, 231, 170, 0.72);
  background: rgba(12, 18, 44, 0.88);
}


.button--primary {
  min-height: 68px;
  padding-inline: 34px;

  color: #201705;
  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  border-color: rgba(255, 245, 197, 0.8);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  font-size: clamp(1.05rem, 2.3vw, 1.35rem);
}


.button--primary:hover,
.button--primary:focus-visible {
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.40),
    0 0 28px rgba(232, 200, 117, 0.20);
}


.button--secondary {
  color: var(--white-soft);
  background: rgba(7, 12, 32, 0.74);
}


/* ----------------------------------------------------------
   5. 冒頭案内
---------------------------------------------------------- */

.notice {
  margin-top: -70px;
  margin-bottom: 100px;
  padding: clamp(28px, 5vw, 52px);

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(8, 14, 35, 0.88),
      rgba(15, 18, 47, 0.76)
    );

  border: 1px solid var(--border);
  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  backdrop-filter: blur(8px);
}


.notice__ornament {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 1.5rem;
}


.notice__title {
  margin: 0 0 24px;
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}


.notice p {
  margin: 12px 0;
}


.notice strong {
  color: var(--gold-light);
}


.notice__warning {
  margin-top: 26px !important;
  color: #fff5d4;
}


.notice__small {
  margin-top: 28px !important;
  color: var(--text-soft);
  font-size: 0.9rem;
}


/* ----------------------------------------------------------
   6. ギャラリー共通
---------------------------------------------------------- */

.gallery-section,
.late-section,
.final-gallery {
  margin-bottom: 120px;
}


.art-grid {
  display: grid;
  gap: 24px;
}


.art-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


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


.art-card {
  min-width: 0;

  background:
    linear-gradient(
      155deg,
      rgba(8, 14, 35, 0.90),
      rgba(11, 17, 39, 0.76)
    );

  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);

  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28);

  overflow: hidden;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}


.art-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 200, 117, 0.48);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36);
}


.art-card__button {
  position: relative;
  width: 100%;
  padding: 0;

  background: #080c1d;
  border: 0;

  color: inherit;
  cursor: pointer;

  overflow: hidden;
}


.art-card__button img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;

  transition:
    transform 0.28s ease,
    filter 0.28s ease;
}


.art-card__button:hover img,
.art-card__button:focus-visible img {
  transform: scale(1.025);
  filter: brightness(1.05);
}


.art-card__number {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;

  min-width: 42px;
  padding: 4px 10px;

  color: #201705;
  background: rgba(248, 231, 170, 0.94);

  border-radius: 999px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.86rem;
  font-weight: 700;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}


.art-card__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;

  padding: 5px 9px;

  color: var(--white);
  background: rgba(2, 5, 16, 0.72);

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

  font-size: 0.72rem;

  opacity: 0;
  transform: translateY(5px);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}


.art-card__button:hover .art-card__zoom,
.art-card__button:focus-visible .art-card__zoom {
  opacity: 1;
  transform: translateY(0);
}


.art-card__body {
  padding: 20px 20px 22px;
}


.art-card__body h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
}


.art-card__body p {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 0.93rem;
}


/* ----------------------------------------------------------
   7. 14～19：家庭・騒動エリア
---------------------------------------------------------- */

.gallery-section--warm {
  padding-top: 74px;
  padding-bottom: 74px;

  border-top: 1px solid rgba(232, 200, 117, 0.18);
  border-bottom: 1px solid rgba(232, 200, 117, 0.18);
}


.art-card--warm {
  background:
    linear-gradient(
      155deg,
      rgba(21, 16, 39, 0.88),
      rgba(13, 15, 38, 0.78)
    );
}


.art-card--comic {
  background:
    linear-gradient(
      155deg,
      rgba(18, 15, 42, 0.90),
      rgba(10, 16, 39, 0.78)
    );
}


/* ----------------------------------------------------------
   8. 13：単独展示
---------------------------------------------------------- */

.feature-section {
  margin-top: 28px;
  margin-bottom: 128px;
}


.feature-section__line {
  width: min(480px, 70%);
  height: 1px;
  margin: 0 auto 60px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(232, 200, 117, 0.74),
      transparent
    );
}


.feature-art {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(28px, 6vw, 72px);

  padding: clamp(28px, 5vw, 58px);

  background:
    linear-gradient(
      145deg,
      rgba(8, 13, 34, 0.92),
      rgba(23, 19, 45, 0.76)
    );

  border: 1px solid rgba(232, 200, 117, 0.40);
  border-radius: var(--radius-lg);

  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.36);

  backdrop-filter: blur(8px);
}


.feature-art__number {
  margin: 0 0 6px;

  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}


.feature-art__text h2 {
  margin: 12px 0 18px;

  color: var(--white);
  font-size: clamp(1.55rem, 3.5vw, 2.6rem);
  line-height: 1.5;
}


.feature-art__text > p:last-child {
  color: var(--text-soft);
}


.feature-art__button {
  position: relative;

  padding: 0;

  background: #080c1d;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;

  cursor: pointer;
  overflow: hidden;

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}


.feature-art__button img {
  width: 100%;
  max-height: 680px;
  object-fit: cover;

  transition: transform 0.28s ease;
}


.feature-art__button:hover img,
.feature-art__button:focus-visible img {
  transform: scale(1.018);
}


.feature-art__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;

  padding: 7px 12px;

  color: var(--white);
  background: rgba(2, 5, 16, 0.76);

  border-radius: 999px;

  font-size: 0.78rem;
}


/* ----------------------------------------------------------
   9. 20・21
---------------------------------------------------------- */

.art-grid--late {
  align-items: stretch;
}


.art-card--quiet {
  background:
    linear-gradient(
      160deg,
      rgba(3, 7, 18, 0.97),
      rgba(8, 13, 30, 0.93)
    );

  border-color: rgba(192, 202, 226, 0.22);

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42);
}


.art-card--quiet .art-card__number {
  color: #202432;
  background: rgba(218, 224, 239, 0.94);
}


.art-card__body--quiet {
  padding-top: 32px;
  padding-bottom: 34px;
}


.art-card__body--quiet h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 500;
}


.art-card--support {
  background:
    linear-gradient(
      155deg,
      rgba(11, 17, 40, 0.90),
      rgba(28, 20, 42, 0.80)
    );

  border-color: rgba(232, 200, 117, 0.32);
}


.support-subtitle {
  margin-top: 0 !important;
  color: var(--gold-light) !important;
  font-size: 0.84rem !important;
}


/* ----------------------------------------------------------
   10. 22・23：最後の連続シーン
---------------------------------------------------------- */

.final-gallery {
  padding-top: 52px;
}


.art-grid--final {
  position: relative;
}


.art-grid--final::after {
  content: "→";
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 5;

  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  color: #201705;
  background: var(--gold-light);

  border-radius: 50%;

  font-size: 1.5rem;
  font-weight: 900;

  transform: translate(-50%, -50%);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}


.art-card--final {
  border-color: rgba(232, 200, 117, 0.32);
}


.sequence-label {
  display: inline-block;
  margin-top: 0 !important;
  margin-bottom: 8px !important;

  color: var(--gold-light) !important;
  font-weight: 800;
}


/* ----------------------------------------------------------
   11. 本編への乗船口
---------------------------------------------------------- */

.boarding {
  margin-top: 150px;
  margin-bottom: 110px;
  padding: clamp(42px, 8vw, 82px) clamp(24px, 6vw, 62px);

  text-align: center;

  background:
    linear-gradient(
      150deg,
      rgba(6, 11, 29, 0.93),
      rgba(18, 18, 46, 0.85)
    );

  border: 1px solid rgba(232, 200, 117, 0.45);
  border-radius: var(--radius-lg);

  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(9px);
}


.boarding__small {
  margin: 0 0 18px;
  color: var(--gold-light);
  letter-spacing: 0.08em;
}


.boarding h2 {
  margin: 0;

  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.55;
}


.boarding__joke {
  margin: 18px 0 36px;

  color: var(--violet-soft);
  font-size: clamp(1rem, 2vw, 1.22rem);
}


.boarding__subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;

  margin-top: 30px;
}


/* ----------------------------------------------------------
   12. フッター
---------------------------------------------------------- */

.festival-footer {
  padding: 24px 20px 46px;
  text-align: center;
}


.festival-footer a {
  color: var(--text-soft);
  font-size: 0.9rem;
  text-decoration: none;
}


.festival-footer a:hover,
.festival-footer a:focus-visible {
  color: var(--white);
  text-decoration: underline;
}


/* ----------------------------------------------------------
   13. キーボード操作の視認性
---------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}


/* ----------------------------------------------------------
   14. レスポンシブ
---------------------------------------------------------- */

@media (max-width: 900px) {

  .art-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-art {
    grid-template-columns: 1fr;
  }

  .feature-art__text {
    text-align: center;
  }

}


@media (max-width: 660px) {

  .section-shell {
    width: min(calc(100% - 24px), var(--max-width));
  }

  body::before {
    /*
      iOS Safari などでは fixed 背景が不安定なことがあるため、
      疑似要素自体を fixed にした方式を使っています。
    */
    background-position: center center;
  }

  .hero {
    min-height: 82svh;
    padding-top: 64px;
    padding-bottom: 86px;
  }

  .hero__eyebrow {
    letter-spacing: 0.12em;
  }

  .notice {
    margin-top: -42px;
    margin-bottom: 76px;
  }

  .gallery-section,
  .late-section,
  .final-gallery {
    margin-bottom: 86px;
  }

  .art-grid--three,
  .art-grid--two {
    grid-template-columns: 1fr;
  }

  .art-card__button img {
    aspect-ratio: 4 / 3;
  }

  .art-card__zoom {
    opacity: 1;
    transform: none;
  }

  .feature-section {
    margin-bottom: 92px;
  }

  .feature-art {
    padding: 22px;
  }

  .gallery-section--warm {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .art-grid--final::after {
    content: "↓";
    top: 50%;
    left: 50%;
  }

  .boarding {
    margin-top: 105px;
    margin-bottom: 76px;
  }

  .button {
    width: 100%;
  }

  .boarding__subnav {
    flex-direction: column;
  }
}


/* ----------------------------------------------------------
   15. 動きを減らしたい環境への配慮
---------------------------------------------------------- */

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

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

}