/* =====================
   加トフェス PORTAL
   styles.css 統合版
===================== */


/* =====================
   基本設定
===================== */

:root {

  --bg: #f4f6ed;

  --paper: #fffdf7;

  --ink: #27352a;

  --accent: #4f7b56;

  --accent-dark: #31523a;

  --line: #d6dfce;

  --muted: #6c786b;

  --shadow:
    0 18px 50px
    rgba(40,65,45,.12);

}


* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  color:
    var(--ink);

  background:
    var(--bg);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:
    1.7;

}


button,
input,
textarea {

  font:
    inherit;

}


button {

  cursor:
    pointer;

}


.hidden {

  display:
    none !important;

}



/* =====================
   オープニング
===================== */

.splash-screen {

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  width:
    100%;

  height:
    100dvh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #111;

  overflow:
    hidden;

  opacity:
    1;

  visibility:
    visible;

  transition:
    opacity .8s ease,
    visibility .8s ease;

}


.splash-screen > img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  display:
    block;

}


.splash-overlay {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-end;

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

  pointer-events:
    none;

}


.splash-question {

  margin:
    0
    0
    14px;

  padding:
    7px
    16px;

  color:
    white;

  background:
    rgba(0,0,0,.68);

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

  border-radius:
    999px;

  font-size:
    clamp(
      .9rem,
      3.5vw,
      1.05rem
    );

  font-weight:
    800;

  text-align:
    center;

  text-shadow:
    0 2px 6px
    rgba(0,0,0,.8);

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.25);

}


.splash-buttons {

  display:
    flex;

  gap:
    14px;

  pointer-events:
    auto;

}


.splash-button {

  min-width:
    115px;

  padding:
    12px
    24px;

  border:
    2px solid
    rgba(255,255,255,.95);

  border-radius:
    999px;

  background:
    rgba(0,0,0,.72);

  color:
    white;

  font-size:
    1rem;

  font-weight:
    900;

  letter-spacing:
    .05em;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.35);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;

}


.splash-button:hover {

  background:
    rgba(79,123,86,.95);

  transform:
    translateY(-2px)
    scale(1.04);

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.4);

}


.splash-button:active {

  transform:
    scale(.96);

}


.splash-screen.hide {

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

}



/* =====================
   BGMボタン
===================== */

.bgm-toggle {

  position:
    fixed;

  top:
    16px;

  right:
    16px;

  z-index:
    5000;

  padding:
    9px
    14px;

  border:
    1px solid
    rgba(255,255,255,.65);

  border-radius:
    999px;

  background:
    rgba(35,65,42,.78);

  color:
    white;

  font-size:
    .78rem;

  font-weight:
    800;

  letter-spacing:
    .04em;

  backdrop-filter:
    blur(8px);

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.16);

  transition:
    background .2s ease,
    transform .2s ease;

}


.bgm-toggle:hover {

  background:
    rgba(32,80,44,.95);

  transform:
    translateY(-1px);

}


.bgm-toggle.playing {

  background:
    rgba(79,123,86,.92);

}



/* =====================
   合言葉画面
===================== */

.login-screen {

  min-height:
    100dvh;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(79,123,86,.12),
      transparent 30%
    ),

    radial-gradient(
      circle at 80% 80%,
      rgba(82,107,79,.10),
      transparent 35%
    ),

    var(--bg);

}


.login-card {

  width:
    min(
      100%,
      430px
    );

  background:
    var(--paper);

  border:
    1px solid
    var(--line);

  border-radius:
    24px;

  padding:
    34px;

  box-shadow:
    var(--shadow);

}


.badge,
.eyebrow,
.kicker {

  letter-spacing:
    .16em;

  font-size:
    .76rem;

  font-weight:
    800;

  color:
    var(--accent);

}


.login-card h1 {

  margin:
    8px
    0
    4px;

  font-size:
    2rem;

}


.login-card label,
.contact-form label {

  display:
    grid;

  gap:
    8px;

  font-weight:
    700;

}


input,
textarea {

  width:
    100%;

  border:
    1px solid
    var(--line);

  background:
    white;

  border-radius:
    12px;

  padding:
    13px
    14px;

  outline:
    none;

}


input:focus,
textarea:focus {

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(79,123,86,.12);

}


button,
.hero-button {

  border:
    0;

  background:
    var(--accent);

  color:
    white;

  border-radius:
    12px;

  padding:
    12px
    18px;

  font-weight:
    800;

  text-decoration:
    none;

  display:
    inline-block;

}


button:hover,
.hero-button:hover {

  background:
    var(--accent-dark);

}


.login-card button {

  width:
    100%;

  margin-top:
    14px;

}


.error {

  color:
    #a12f20;

  min-height:
    1.4em;

}


.small,
.muted,
.note {

  color:
    var(--muted);

  font-size:
    .92rem;

}



/* =====================
   メインビジュアル
===================== */

.hero {

  position:
    relative;

  min-height:
    68vh;

  display:
    grid;

  place-items:
    center;

  padding:
    70px
    24px;

  text-align:
    center;

  background-image:
    url("images/hero-bg.png");

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;

  overflow:
    hidden;

}


/* 白いぼかし */

.hero::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:

    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.72) 23%,
      rgba(255,255,255,.40) 42%,
      rgba(255,255,255,.12) 65%,
      rgba(255,255,255,.02) 82%
    );

  backdrop-filter:
    blur(1px);

}


/* 背景の色調整 */

.hero::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:

    linear-gradient(
      to bottom,
      rgba(31,58,39,.05),
      rgba(31,58,39,.08)
    );

  pointer-events:
    none;

}


.hero-inner {

  position:
    relative;

  z-index:
    2;

  max-width:
    820px;

  padding:
    38px
    45px;

}


.hero .eyebrow {

  color:
    #3c6549;

  font-size:
    .78rem;

  letter-spacing:
    .24em;

  font-weight:
    900;

  text-shadow:
    0 1px 8px
    rgba(255,255,255,1);

}


.hero h1 {

  margin:
    12px
    0
    10px;

  color:
    #254c33;

  font-size:
    clamp(
      3.6rem,
      11vw,
      7rem
    );

  font-weight:
    900;

  letter-spacing:
    .05em;

  text-shadow:
    0 3px 18px
    rgba(255,255,255,1);

}


.hero-copy {

  margin:
    0
    0
    28px;

  color:
    #344c39;

  font-size:
    clamp(
      1rem,
      3vw,
      1.3rem
    );

  font-weight:
    700;

  letter-spacing:
    .04em;

  text-shadow:
    0 2px 10px
    rgba(255,255,255,1);

}


.hero-button {

  background:
    #4f7b56;

  color:
    white;

  padding:
    13px
    26px;

  border-radius:
    999px;

  box-shadow:
    0 7px 20px
    rgba(41,74,49,.25);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;

}


.hero-button:hover {

  background:
    #31523a;

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(41,74,49,.32);

}



/* =====================
   セクション共通
===================== */

.section {

  width:
    min(
      1080px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding:
    72px 0;

}


.section.alt {

  width:
    100%;

  padding-left:
    max(
      16px,
      calc((100% - 1080px) / 2)
    );

  padding-right:
    max(
      16px,
      calc((100% - 1080px) / 2)
    );

  background:
    #e9efe3;

}


.section-head {

  margin-bottom:
    26px;

}


.section-head h2 {

  margin:
    4px
    0
    6px;

  font-size:
    clamp(
      1.8rem,
      5vw,
      2.7rem
    );

  color:
    #294331;

}


.section-head.row {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    16px;

  align-items:
    end;

}



/* =====================
   次回イベント
===================== */

.event-card,
.album-card,
.contact-form {

  background:
    var(--paper);

  border:
    1px solid
    var(--line);

  border-radius:
    20px;

  box-shadow:
    0 12px 28px
    rgba(40,65,45,.07);

}


.event-card {

  display:
    grid;

  grid-template-columns:
    150px
    1fr;

  gap:
    24px;

  padding:
    26px;

  align-items:
    center;

}


.event-date {

  text-align:
    center;

  border-right:
    1px solid
    var(--line);

  padding-right:
    24px;

}


.event-date span {

  display:
    block;

  font-size:
    .8rem;

  color:
    var(--muted);

  letter-spacing:
    .12em;

}


.event-date strong {

  display:
    block;

  margin:
    4px 0;

  font-size:
    1.6rem;

  color:
    var(--accent-dark);

}


.event-card h3 {

  margin-top:
    0;

  color:
    #294331;

}


.event-card h3 small {

  margin-left:
    6px;

  color:
    var(--muted);

  font-size:
    .65em;

  font-weight:
    700;

}


.event-note {

  margin:
    18px
    0
    0;

  color:
    var(--muted);

  font-size:
    .82rem;

}


.chips {

  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;

  margin-top:
    16px;

}


.chips > span {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  background:
    #edf2e8;

  border-radius:
    999px;

  padding:
    6px
    10px;

  font-size:
    .9rem;

}



/* =====================
   アルバム
===================== */

.album-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    20px;

}


.album-card {

  overflow:
    hidden;

}


.album-cover {

  min-height:
    220px;

  display:
    grid;

  place-items:
    center;

  color:
    white;

  font-weight:
    900;

  letter-spacing:
    .15em;

  background:

    linear-gradient(
      rgba(33,66,42,.18),
      rgba(33,66,42,.36)
    ),

    linear-gradient(
      135deg,
      #6c9269,
      #9eb78c
    );

}


.album-cover.future {

  background:

    linear-gradient(
      135deg,
      #98a98c,
      #c9d4bd
    );

}


.album-body {

  padding:
    20px;

}


.album-body h3 {

  margin:
    0
    0
    4px;

  color:
    #294331;

}


.secondary {

  background:
    transparent;

  color:
    var(--accent-dark);

  border:
    1px solid
    var(--accent);

}


.secondary:hover {

  background:
    #eef4ea;

}



/* =====================
   写真
===================== */

.photo-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    14px;

}


figure {

  margin:
    0;

}


.photo-box {

  aspect-ratio:
    1 / 1;

  display:
    grid;

  place-items:
    center;

  background:

    linear-gradient(
      135deg,
      #cbd7c2,
      #92aa88
    );

  border-radius:
    14px;

  color:
    white;

  font-weight:
    900;

}


figcaption {

  padding:
    7px
    3px
    0;

  color:
    var(--muted);

  font-size:
    .9rem;

}



/* =====================
   問い合わせ
===================== */

.contact-form {

  max-width:
    700px;

  padding:
    24px;

  display:
    grid;

  gap:
    16px;

}


.contact-form button {

  justify-self:
    start;

}



/* =====================
   フッター
===================== */

footer {

  text-align:
    center;

  padding:
    34px
    16px
    48px;

  border-top:
    1px solid
    var(--line);

  color:
    var(--muted);

  background:
    #eef2e9;

}


.text-button {

  background:
    transparent;

  color:
    var(--muted);

  padding:
    6px
    10px;

  text-decoration:
    underline;

}


.text-button:hover {

  background:
    transparent;

  color:
    var(--ink);

}



/* =====================
   スマホ
===================== */

@media (max-width: 720px) {

  .hero {

    min-height:
      62vh;

    padding:
      50px
      18px;

    background-position:
      center center;

  }


  .hero-inner {

    padding:
      28px
      18px;

  }


  .hero h1 {

    font-size:
      clamp(
        3rem,
        16vw,
        5rem
      );

  }


  .hero-copy {

    font-size:
      1rem;

  }


  .event-card {

    grid-template-columns:
      1fr;

  }


  .event-date {

    border-right:
      0;

    border-bottom:
      1px solid
      var(--line);

    padding:
      0
      0
      18px;

  }


  .album-grid {

    grid-template-columns:
      1fr;

  }


  .photo-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

  }


  .section-head.row {

    align-items:
      start;

    flex-direction:
      column;

  }


  .splash-buttons {

    width:
      min(
        100%,
        300px
      );

  }


  .splash-button {

    flex:
      1;

    min-width:
      0;

  }


  .bgm-toggle {

    top:
      10px;

    right:
      10px;

    font-size:
      .7rem;

    padding:
      8px
      11px;

  }

}



/* =====================
   小さいスマホ
===================== */

@media (max-width: 420px) {

  .login-card {

    padding:
      26px
      20px;

  }


  .login-card h1 {

    font-size:
      1.7rem;

  }


  .section {

    padding:
      56px
      0;

  }


  .hero {

    min-height:
      60vh;

  }


  .hero .eyebrow {

    font-size:
      .66rem;

    letter-spacing:
      .16em;

  }


  .hero h1 {

    font-size:
      3.2rem;

  }


  .hero-copy {

    font-size:
      .95rem;

    line-height:
      1.8;

  }


  .splash-question {

    font-size:
      .88rem;

  }


  .splash-button {

    padding:
      11px
      18px;

    font-size:
      .95rem;

  }


  .chips {

    gap:
      6px;

  }


  .chips > span {

    font-size:
      .82rem;

  }

}