/* ============================================================
   蝦夷YOSAKOI連「倭屋」公式サイト
   デザイン：淡い青の和風。動きは「思いきり」寄り。

   動きの約束：
     ・動かすのは transform と opacity だけ（端末が苦しくならないため）
     ・端末の「動きを減らす」設定が入っている人には、全部止める
       （→ いちばん下の prefers-reduced-motion のところ）
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-main: #6699CC;   /* 淡い青 */
    --color-dark: #004466;   /* 濃い青 */
    --color-accent: #fcfcfc; /* 白 */
    --color-bg: #f8fcfc;     /* ごく淡い背景 */
    --color-gold: #b8860b;   /* 受賞の色 */
    --header-h: 64px;
    --banner-h: 34px;        /* 上下の募集バナーの高さ */
}

html {
    scroll-behavior: smooth;
    /* バナーとヘッダーに隠れないように、見出しの手前で止める */
    scroll-padding-top: calc(var(--banner-h) + var(--header-h) + 12px);
}

body {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: var(--color-bg);
    overflow-x: hidden;
    /* 下のバナーに、フッターが隠されないように場所をあけておく */
    padding-bottom: var(--banner-h);
}

a { text-decoration: none; color: #006699; }
ul { list-style: none; }
img { max-width: 100%; }


/* ===== 日本語の改行をきれいにする ============================
   困っていたこと：
     日本語は「どこでも改行できる」ので、画面が狭いと
     「道東地／域」「YOSAKOIソー／ラン」のように
     言葉のまん中でぶつ切りになり、とても読みにくかった。

   ここでやっていること：
     ・言葉の切れめ（文節）で折り返す
     ・行のあたまに「、」「。」が来ないようにする
     ・最後の行に1文字だけ取り残さない

   ※ 新しめの端末だけが対応している指定。
     対応していない端末では、ただ無視されるだけなので害はない。 */
body {
    line-break: strict;        /* 行あたまの句読点を防ぐ（禁則処理） */
    text-wrap: pretty;         /* 最後の行に1文字だけ残さない */
}

/* ★これが本命★
   「言葉のかたまり」。この中では、ぜったいに改行されない。
   見出しや短い文は、HTMLの中でこの印をつけて区切ってある。
     例）ミニゲーム ／ 「流氷ランナー」
   こうしておくと「ミニゲーム「流／氷ランナー」」のように
   言葉のまん中で切れることがなくなる。

   なぜこの方法か：
     下の word-break: auto-phrase は Chrome しか対応しておらず、
     iPhone（Safari）では効かなかった。
     この方法なら、**どの端末でも同じように効く。**

   注意：かたまりとかたまりの間に、スペースや改行を入れないこと。
         入れると、文字の間にすき間ができてしまう。 */
.nb { display: inline-block; }

/* ラベル（「活動内容:」「練習:」など）も、ひとかたまり扱いにする。
   これが無いと「活動／内容:」「練／習:」のように割れてしまう */
.recruit-details strong { display: inline-block; }

/* 言葉の切れめで折り返す補助。
   ※ Chrome だけが対応している指定。iPhone（Safari）では効かない。
     本命は上の .nb なので、これは「効けば なおよい」くらいの位置づけ。

   【注意】ここに text-wrap: balance（行の長さをそろえる）は入れないこと。
     .nb のかたまりは途中で切れないため、balance と組み合わせると
     行の幅を縮めすぎて「活動／内容:」のようにラベルが割れる。
     2026-10-08 に実際そうなった。 */
.section-title,
.hero h2,
.hero .catch-copy,
.recruit-message,
.game-message,
.game-note,
.gallery-hint,
.history-item h2,
.history-item p,
.recruit-details p,
.btn-primary,
.btn-secondary,
.game-cover span {
    word-break: auto-phrase;
}

/* 長い文章は「両端そろえ」。
   日本語は1文字ずつの幅がそろっているので、
   両端をそろえるといちばん整って見える（本や新聞と同じ）。
   ここで言葉の切れめ折り返しを使わないのは、
   行ごとの長さの差が大きくなり、字の間が間のびするため */
.about .content-box > p:first-of-type {
    text-align: justify;
    word-break: normal;
}


/* ===== 上下の募集バナー ======================================
   画面の上と下に貼りついて、スクロールしても動かない。
   色あいは「非常事態の警告」のイメージ（赤＋黒の斜め縞）。
   文字は左右に流れつづける。 */
.alert-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: var(--banner-h);
    z-index: 1500;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #0a0603;
    /* 黒地に、琥珀色の斜め縞（非常用のテープのイメージ）。
       2枚かさねている：
         1枚目＝まん中を暗くする帯。縞の上でも文字が読めるように
         2枚目＝斜めの縞そのもの。上下のふちで、しっかり見える */
    background-image:
        linear-gradient(to bottom,
            rgba(8, 5, 2, 0) 0%,
            rgba(8, 5, 2, 0.92) 30%,
            rgba(8, 5, 2, 0.92) 70%,
            rgba(8, 5, 2, 0) 100%),
        repeating-linear-gradient(-45deg,
            rgba(255, 170, 0, 0.62) 0 10px,
            rgba(255, 105, 0, 0.26) 10px 15px,
            transparent 15px 30px);
    color: #ffbe10;
    /* 文字がぼうっと光って見えるように */
    text-shadow: 0 0 5px rgba(255, 150, 0, 0.9), 0 0 13px rgba(255, 80, 0, 0.6);
    font-weight: 900;
    font-size: clamp(0.7rem, 2.5vw, 0.88rem);
    letter-spacing: 0.08em;
    white-space: nowrap;
    user-select: none;
    animation: alertPulse 1.6s ease-in-out infinite;
}

/* 上下を赤い線で区切る（エヴァの非常事態画面のイメージ） */
.alert-bar.top {
    top: 0;
    border-bottom: 2px solid #ff1d00;
}

.alert-bar.bottom {
    bottom: 0;
    border-top: 2px solid #ff1d00;
}

/* 警告灯のように、ゆっくり明るくなったり暗くなったりする。
   目がチカチカしないよう、点滅ではなくゆっくりした明滅にしている */
@keyframes alertPulse {
    0%, 100% {
        background-color: #0a0603;
        box-shadow: inset 0 0 18px rgba(255, 140, 0, 0.22), 0 0 10px rgba(255, 30, 0, 0.45);
    }
    50% {
        background-color: #170c02;
        box-shadow: inset 0 0 28px rgba(255, 175, 0, 0.45), 0 0 22px rgba(255, 45, 0, 0.85);
    }
}

/* 流れる部分。同じ内容を2組ならべて、半分ぶん動かすと切れ目なくつながる */
.alert-track {
    display: flex;
    flex: none;
    animation: alertFlow 26s linear infinite;
    will-change: transform;
}

.alert-bar.bottom .alert-track { animation-direction: reverse; }

@keyframes alertFlow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.alert-group { display: flex; flex: none; }

.alert-item {
    flex: none;
    padding: 0 1.2em;
}

.alert-item::before {
    content: '⚠';
    margin-right: 0.5em;
    font-weight: normal;
    /* 本文の琥珀色より明るい黄色にして、印だけ浮き立たせる */
    color: #ffe84d;
    text-shadow: 0 0 6px rgba(255, 210, 0, 0.95), 0 0 14px rgba(255, 120, 0, 0.6);
    font-size: 1.15em;
}


/* ===== 読みすすみバー =========================================
   いまページのどこまで来たかが、細い線で分かる */
.progress-bar {
    position: fixed;
    top: var(--banner-h);
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--color-main), var(--color-dark));
    z-index: 1200;
    will-change: transform;
}


/* ===== ヘッダー ============================================== */
.header {
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-dark);
    padding: 14px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: var(--banner-h);   /* 上のバナーのぶんだけ下げる */
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 下にスクロールすると、ヘッダーがすこし縮む */
.header.shrink {
    padding: 7px 5%;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 18px rgba(0, 68, 102, 0.12);
}

.header h1 {
    font-size: 1.5em;
    font-family: 'Yu Mincho', serif;
    white-space: nowrap;
    transition: font-size 0.3s ease;
}

.header.shrink h1 { font-size: 1.25em; }

.nav ul { display: flex; gap: 18px; }

.nav a {
    color: var(--color-dark);
    padding: 5px 2px;
    position: relative;
    display: inline-block;
    transition: color 0.25s, transform 0.25s;
}

/* 下線が左からすーっと伸びる */
.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-main);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.28s ease;
}

.nav a:hover { color: var(--color-main); transform: translateY(-2px); }
.nav a:hover::after,
.nav a.current::after { transform: scaleX(1); }
.nav a.current { color: var(--color-main); font-weight: bold; }


/* ===== トップ（ヒーロー）===================================== */
.hero {
    /* 高さは「最低これだけ」。決め打ちにすると、画面の低い端末で
       中身が入りきらず、文字が切れてしまう。min- にしておけば伸びる */
    min-height: max(100svh, 420px);
    /* 縦に「中身」→「SCROLL」の順で並べる。
       SCROLLを浮かせて置くと、画面が低い端末で
       ボタンの上に重なってしまうため */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    /* 上はバナー＋ヘッダー、下はバナーのぶんだけ中身を内側に寄せる */
    padding-top: calc(var(--banner-h) + var(--header-h));
    padding-bottom: var(--banner-h);
    /* 本物の写真が届くまでの一瞬だけ出る、ごく小さいぼかし。
       HTMLに文字として埋めこんであるので、追加の通信は起きない */
    background: #0d2b3e url('data:image/webp;base64,UklGRoYAAABXRUJQVlA4IHoAAAAwBACdASoYABAAPsFQoUqnpKMhsAgA8BgJQBOkGQA+wlXzBcY6rjgnUAAA/qXteOCJh8BoF1Uz6YSaO/Phc7vHCVYma1ZPWGvcfE4GgjNlvYU2usvz7UQV/UIopGMSt2CpsB5KO0ld0EmtZ5Jq1aCu8WpLFt1AwwAAAA==') no-repeat center center/cover;
}

/* 本物の写真。img で置いているので、端末の幅に合う大きさだけが届く */
.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 1.1s ease;
}

/* 届いたら、ゆっくり寄りが戻っていく */
.hero-photo.loaded {
    opacity: 1;
    animation: heroZoom 26s ease-out forwards;
}

@keyframes heroZoom {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 20, 35, 0.55), rgba(0, 20, 35, 0.3) 45%, rgba(0, 20, 35, 0.6));
    z-index: 2;
}

/* 流氷と雪のつぶ。canvas で描いている */
.hero-snow {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 5;
    padding: 0 16px;
}

.hero h2 {
    /* 画面の幅に合わせて縮む。下限を決め打ちにすると、
       320pxなどの細い端末で「蝦夷YOSAKOI連」が入りきらず折れてしまう */
    font-size: clamp(1.7rem, 10.5vw, 4.4rem);
    margin: 14px 0 32px;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.75);
    font-family: 'Yu Mincho', serif;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: riseBlur 1s cubic-bezier(.2, .8, .2, 1) 0.9s forwards;
}

@keyframes riseBlur {
    from { opacity: 0; transform: translateY(26px); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.hero .catch-copy {
    font-size: clamp(1.05rem, 3.4vw, 1.6rem);
    letter-spacing: 0.12em;
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* キャッチコピーが1文字ずつ出てくる。--i は何番目の文字か（JSが入れる） */
.catch-copy .ch {
    display: inline-block;
    opacity: 0;
    animation: chIn 0.5s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: calc(0.25s + var(--i) * 0.045s);
}

@keyframes chIn {
    from { opacity: 0; transform: translateY(14px) rotate(6deg); }
    to   { opacity: 1; transform: translateY(0) rotate(0); }
}


/* ===== ボタン ================================================ */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;
    text-align: center;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(.2, .8, .2, 1), box-shadow 0.22s, background-color 0.3s, color 0.3s;
}

/* 表面を光がすーっと通る */
.btn-primary::after, .btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
}

.btn-primary:hover::after, .btn-secondary:hover::after {
    animation: shine 0.75s ease;
}

@keyframes shine {
    to { left: 140%; }
}

.btn-primary {
    background-color: var(--color-main);
    color: white;
    box-shadow: 0 8px 22px rgba(0, 68, 102, 0.35);
    animation: breathe 3.4s ease-in-out infinite;
}

/* ゆっくり呼吸するように動く（押せることに気づいてもらうため） */
@keyframes breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.03); }
}

.btn-primary:hover {
    background-color: var(--color-dark);
    transform: translateY(-5px) scale(1.06);
    box-shadow: 0 14px 30px rgba(0, 68, 102, 0.45);
    animation-play-state: paused;
}

.btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
}

.btn-secondary:hover {
    transform: translateY(-4px) scale(1.04);
    background-color: var(--color-dark);
    color: white;
    box-shadow: 0 12px 26px rgba(0, 68, 102, 0.3);
}

.btn-primary:active, .btn-secondary:active { transform: translateY(0) scale(0.98); }


/* ===== 「下に続きます」のしるし =============================== */
.scroll-cue {
    /* 浮かせずに、中身のすぐ下に置く（重なり防止） */
    position: relative;
    z-index: 5;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: fadeIn 1s ease 1.8s both;
}

.scroll-cue span {
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent);
    animation: cueDrop 1.8s ease-in-out infinite;
}

@keyframes cueDrop {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* ===== セクション共通 ======================================== */
.section {
    padding: 90px 5%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.section-title {
    text-align: center;
    font-size: clamp(1.8rem, 5.5vw, 2.5rem);
    margin-bottom: 50px;
    color: var(--color-dark);
    position: relative;
    font-family: 'Yu Mincho', serif;
}

/* 見出しの下の青い線が、横に伸びる */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-main);
    margin: 12px auto 0;
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(.2, .8, .2, 1) 0.2s;
}

.section-title.on::after { transform: scaleX(1); }


/* ===== 波の区切り ============================================
   セクションの切れ目に、ゆっくり流れる波を置く */
.wave-divider {
    position: relative;
    width: 100%;
    height: 70px;
    overflow: hidden;
    line-height: 0;
}

.wave-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    animation: waveSlide 18s linear infinite;
}

.wave-divider svg.w2 {
    animation-duration: 26s;
    animation-direction: reverse;
    opacity: 0.55;
}

@keyframes waveSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.wave-divider.flip { transform: rotate(180deg); }

/* into-blue … 下が青い面に入っていくところ
   into-bg   … 青い面から、ふつうの背景に出ていくところ */
.wave-divider.into-blue { background-color: var(--color-bg); }
.wave-divider.into-blue svg { fill: #eef5f9; }
.wave-divider.into-bg { background-color: #eef5f9; }
.wave-divider.into-bg svg { fill: var(--color-bg); }


/* ===== チームの概要 ========================================== */
.about { text-align: center; }

.about .content-box {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 44px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 68, 102, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.about .content-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 68, 102, 0.14);
}

.about p {
    margin-top: 26px;
    color: #3a4a55;
    font-size: 1.08em;
    line-height: 1.9;
}

/* 理念の3行。うしろで大きな家紋がゆっくり回る */
.about .mission {
    --kamon: 320px;   /* うしろの家紋の大きさ */
    margin-top: 34px;
    font-weight: bold;
    color: var(--color-dark);
    font-size: 1.3em;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* 家紋が切れないだけの高さをとって、3行を中央に置く */
    min-height: calc(var(--kamon) + 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
}

.about .mission::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--kamon);
    height: var(--kamon);
    margin: calc(var(--kamon) / -2) 0 0 calc(var(--kamon) / -2);
    background: url('waya-kamon.webp') no-repeat center center/contain;
    opacity: 0.2;
    z-index: 1;
    animation: kamonSpin 70s linear infinite;
}

@keyframes kamonSpin {
    to { transform: rotate(360deg); }
}

/* 3行とも、左がわ（仲間との…）と右がわ（絆…）の幅をそろえている。
   そうすると漢字が縦にきれいに並ぶ */
.mission-line {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3em;
    letter-spacing: 0.1em;
    line-height: 1.5;
    /* 家紋の上でも読めるよう、文字のきわだけ白く浮かせる。
       強くしすぎると、文字のまわりが白い塊に見えてしまう */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.95);
}

.mission-line .lead {
    /* 「仲間との」「地域への」「踊りへの」はどれも4文字なので、
       幅の指定を入れなくても自然にそろう */
    text-align: right;
}

/* 行の終わりの漢字。言葉のイメージに合う色で、大きく出す */
.mission-line .kanji {
    /* inline のままだと大きさを変える動きが効かないので、inline-block にする */
    display: inline-block;
    font-family: 'Yu Mincho', serif;
    font-style: normal;
    font-size: 1.9em;
    font-weight: bold;
    letter-spacing: 0.05em;
    min-width: 2.1em;   /* 「絆」1文字でも「感謝」2文字でも、幅をそろえる */
    text-align: left;
    animation: kanjiGlow 4.5s ease-in-out infinite;
}

.mission-line .kizuna {
    color: #c0304a;   /* 紅 … 結びつき */
    text-shadow: 0 0 5px rgba(255,255,255,0.95), 0 3px 12px rgba(192, 48, 74, 0.35);
}

.mission-line .kansha {
    color: #b8831c;   /* 金 … ありがたさ */
    text-shadow: 0 0 5px rgba(255,255,255,0.95), 0 3px 12px rgba(184, 131, 28, 0.35);
    animation-delay: 1.5s;
}

.mission-line .jounetsu {
    color: #e04a18;   /* 炎 … 情熱 */
    text-shadow: 0 0 5px rgba(255,255,255,0.95), 0 3px 12px rgba(224, 74, 24, 0.4);
    animation-delay: 3s;
}

/* ゆっくり大きさが変わって、ほんのり息づいて見える */
@keyframes kanjiGlow {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}


/* ===== 活動実績 ============================================== */
.history { background-color: #eef5f9; max-width: none; }
.history > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* 枚数が増えても勝手に並びが決まるようにしている。
   広い画面では4枚、狭くなると3枚→2枚→1枚と自然に折り返す */
/* 並べる枚数は、画面の広さで決め打ちにしている。
   なぜ「自動」をやめたか：
     自動にまかせると、スマホくらいの幅でも3枚並んでしまい、
     1枚1枚が細くなって、中の文字がとても読みにくくなるため。
   1枚 → 2枚 → 4枚 の3段階だけにして、3枚並びは作らない。 */
.history-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    /* 書いてある量が違っても、カードの高さはそろえる（そのほうが整って見える） */
    align-items: stretch;
}

@media (min-width: 620px) {
    .history-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1150px) {
    .history-grid { grid-template-columns: repeat(4, 1fr); }
}

.history-item {
    background-color: white;
    padding: 32px 26px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 68, 102, 0.07);
    text-align: center;
    border-top: 5px solid var(--color-main);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s;
}

.history-item:hover {
    transform: translateY(-12px) rotate(-0.6deg);
    box-shadow: 0 22px 44px rgba(0, 68, 102, 0.18);
}

/* 触ると上から色が差す */
.history-item::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 0;
    background: linear-gradient(to bottom, rgba(102, 153, 204, 0.14), transparent);
    transition: height 0.45s ease;
}

.history-item:hover::before { height: 100%; }

.history-item h3 {
    color: var(--color-main);
    margin-bottom: 10px;
    font-size: 1.35em;
    letter-spacing: 0.06em;
    position: relative;
}

/* 演舞の題名。4枚並ぶとカードが細いので、
   『為るがまま』くらいの長さまで1行に収まる大きさにしている */
.history-item h2 {
    font-family: 'Yu Mincho', serif;
    font-size: 1.55em;
    letter-spacing: -0.02em;
    color: var(--color-dark);
    margin-bottom: 14px;
    position: relative;
}

.history-item p { color: #51606b; position: relative; }

/* 「YOSAKOIソーラン祭り：映像参加企画」の行。
   カードが細いので、折り返すなら「：」のところで折り返したい。
   中身を2つのかたまりに分けて、それぞれは途中で切れないようにしている */
.history-item .fes { font-size: 0.95em; line-height: 1.7; }
.history-item .fes span { display: inline-block; }

/* 受賞の行だけ金色で、ゆっくり光が通る */
.history-item .award {
    margin-top: 8px;
    font-weight: bold;
    color: var(--color-gold);
    display: inline-block;
    background: linear-gradient(100deg, var(--color-gold) 35%, #f6e27a 50%, var(--color-gold) 65%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldSweep 4.5s linear infinite;
}

@keyframes goldSweep {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}


/* ===== フォトギャラリー ====================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.photo-item {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 68, 102, 0.12);
    cursor: zoom-in;
    position: relative;
    aspect-ratio: 3 / 2;
    transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s;
    /* スクロールに合わせた斜めの動きは translate で付ける。
       transform（触ったときの浮き上がり）と別の場所なので、ぶつからない */
    translate: 0 0;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}

.photo-item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 68, 102, 0.25); }
.photo-item:hover img { transform: scale(1.12); }

/* 触ると「大きく見る」が浮き出る */
.photo-item::after {
    content: '🔍 大きく見る';
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 10px 12px;
    font-size: 0.86rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 30, 50, 0.8), transparent);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s, transform 0.3s;
}

.photo-item:hover::after { opacity: 1; transform: translateY(0); }

.gallery-hint {
    text-align: center;
    color: #6b7c8a;
    font-size: 0.92em;
    margin-top: 18px;
}


/* ===== 写真を大きく見る窓 ==================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 10, 20, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lbFade 0.25s ease;
}

.lightbox[hidden] { display: none; }

@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lb-stage { display: flex; align-items: center; justify-content: center; }

.lb-stage img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.7);
    animation: lbPop 0.35s cubic-bezier(.2, .9, .2, 1);
}

@keyframes lbPop {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.lightbox button {
    position: absolute;
    /* 暗い写真の上でも見えるよう、少し濃いめにしている */
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    border: 0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 28px;
    line-height: 48px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.lightbox button:hover { background: rgba(255, 255, 255, 0.45); }
.lightbox button:active { transform: scale(0.94); }

.lb-close { top: 16px; right: 16px; font-size: 22px !important; }
.lb-close:hover { transform: scale(1.12) rotate(90deg); }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.12); }
.lb-next:hover { transform: translateY(-50%) scale(1.12); }

.lb-count {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
}


/* ===== メンバー募集 ========================================== */
.recruit { text-align: center; }

.recruit-message {
    font-size: 1.3em;
    margin-bottom: 36px;
    color: var(--color-dark);
    font-weight: bold;
}

.recruit-details {
    margin-top: 10px;
    padding: 34px;
    display: inline-block;
    border-radius: 14px;
    background: #fff;
    position: relative;
    box-shadow: 0 8px 26px rgba(0, 68, 102, 0.08);
    text-align: left;
}

/* ふちの点線が、ゆっくり流れる */
.recruit-details::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: repeating-linear-gradient(115deg, var(--color-main) 0 14px, transparent 14px 28px);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: dashFlow 3.5s linear infinite;
    pointer-events: none;
}

@keyframes dashFlow {
    to { background-position: 200% 0; }
}

.recruit-details p { margin-bottom: 12px; }
.recruit-details .btn-secondary { margin-top: 16px; display: block; text-align: center; }


/* ===== ミニゲーム ============================================ */
.game { text-align: center; }

.game-message {
    font-size: 1.15em;
    margin-bottom: 28px;
    color: var(--color-dark);
    line-height: 1.9;
}

.game-frame {
    position: relative;
    max-width: 900px;
    margin: 0 auto 18px;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0, 68, 102, 0.25);
    background: #0b1a33;
}

.game-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 遊ぶ前にかけておく幕 */
.game-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    cursor: pointer;
    color: white;
    font-size: 1.4em;
    font-weight: bold;
    background: rgba(6, 18, 40, 0.55);
    transition: opacity 0.25s, background 0.3s;
    font-family: inherit;
}

.game-cover:hover { background: rgba(6, 18, 40, 0.38); }
.game-cover.off { opacity: 0; pointer-events: none; }

/* 氷が、ふわふわ浮いている */
.game-cover-icon {
    font-size: 2.4em;
    animation: floatIce 3s ease-in-out infinite;
}

@keyframes floatIce {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}

.game-cover small { font-size: 0.6em; font-weight: normal; opacity: 0.85; }

.game-note { font-size: 0.92em; color: #b03a2e; margin-bottom: 22px; }


/* ===== SNS =================================================== */
.sns { background-color: #eef5f9; text-align: center; max-width: none; }
.sns > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

.sns-links {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sns-icon {
    font-size: 1.1em;
    padding: 13px 26px;
    border-radius: 999px;
    display: inline-block;
    color: white;
    font-weight: bold;
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s;
}

.sns-icon:hover {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    animation: wobble 0.6s ease;
}

/* 触るとちょっと揺れる */
@keyframes wobble {
    0%, 100% { rotate: 0deg; }
    25%      { rotate: -4deg; }
    75%      { rotate: 4deg; }
}

.sns-icon.youtube   { background-color: #FF0000; }
.sns-icon.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.sns-icon.twitter   { background-color: #111; }


/* ===== フッター ============================================== */
.footer {
    background-color: var(--color-dark);
    color: white;
    text-align: center;
    /* 右下の「上に戻る」ボタンと重ならないように、下を広めにとる */
    padding: 26px 76px 44px;
    font-size: 0.9em;
}


/* ===== 上に戻るボタン ======================================== */
.to-top {
    position: fixed;
    right: 18px;
    bottom: calc(var(--banner-h) + 14px);   /* 下のバナーに重ならない高さ */
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--color-dark);
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background 0.3s;
    box-shadow: 0 8px 20px rgba(0, 68, 102, 0.4);
}

.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top.show:hover { background: var(--color-main); transform: translateY(-4px) scale(1.08); }


/* ===== スクロールで出てくる仕掛け ============================
   仕組み：
     1. 最初は .reveal が付いていて、見えない＋ずれている
     2. 画面に入ったらJSが「ずれ」の指定だけを外す → すーっと元の位置へ
     3. 出終わったらJSが .reveal 自体を外す
   なぜ3が必要か：
     .reveal の「うつり変わりの速さ」が残っていると、
     ボタンや写真を触ったときの動きまで、もっさり遅くなってしまう。

   ここは、他の見た目の指定よりも後に書くこと（後に書いたほうが勝つため）*/
.reveal {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(.2, .8, .2, 1),
                transform 0.75s cubic-bezier(.2, .8, .2, 1),
                filter 0.75s ease;
    transition-delay: var(--d, 0s);
    will-change: transform, opacity;
}

.reveal.on { opacity: 1; }

/* 出てくる前の「ずれ」。JSがこのクラスを外すと、元の位置に戻る */
.reveal.reveal-up    { transform: translateY(42px); }
.reveal.reveal-left  { transform: translateX(-46px); }
.reveal.reveal-right { transform: translateX(46px); }
.reveal.reveal-zoom  { transform: scale(0.88); }
.reveal.reveal-flip  { transform: perspective(900px) rotateY(-24deg) translateY(28px); }
.reveal.reveal-blur  { transform: translateY(30px); filter: blur(12px); }


/* ===== 指で触る画面では、文字を大きく ========================= */
@media (pointer: coarse) and (max-width: 768px) {
    /* 文字の「もと」ごと大きくする。こうすると見出し・本文・ボタンの
       大小の関係を保ったまま、全体が読みやすい大きさになる */
    html { font-size: 17.5px; }
    body { font-size: 1.24rem; }   /* 約21.7px */
}


/* ===== スマホなのに「横幅が広い」と扱われているとき ===========
   何が起きているか：
     Chromeの「PC版サイト」などが入っていると、6インチの画面なのに
     「横幅980px」のつもりでページが作られる。
     するとパソコン用の見た目になり、**全部の文字がとても小さく**なる。
     （メニューが1行に並んでしまうのが、その印）

   見分けかた：
     「指で触る画面」なのに「横幅が760pxより広い」とき。
     JSが <html> に wide-touch を付けている（index.html の中）。

   やること：
     文字の大きさを画面の幅に対する割合（vw）で決めて、
     ふつうのスマホで見たときと同じくらいの見え方にする。
     並びもスマホと同じ（縦1列・メニューは下）に寄せる。 */
/* いちばん効くのがこれ。
   文字の大きさの「もと」を、画面の幅に合わせてまるごと大きくする。
   --scale は JS が入れる（画面の幅 ÷ 390。ふつうのスマホの幅が390）。
   こうすると見出し・本文・ボタンの大小の関係が崩れないまま、
   ふつうのスマホで見たときとそっくり同じ見え方になる。 */
.wide-touch {
    font-size: calc(16px * var(--scale, 1));
    --banner-h: 1.875rem;
}

.wide-touch body { font-size: 1.24rem; }

/* 並びもスマホと同じにする（メニューは下の段、縦1列） */
.wide-touch .header { flex-direction: column; gap: 0.35rem; padding: 0.5rem 5%; }
.wide-touch .header h1 { font-size: 1.2rem; }
.wide-touch .header.shrink h1 { font-size: 1.1rem; }
.wide-touch .nav ul { flex-wrap: wrap; justify-content: center; gap: 0.62rem; font-size: 0.86rem; }

.wide-touch .section { padding: 3.5rem 5%; }
.wide-touch .section-title { margin-bottom: 2rem; }

.wide-touch .hero { min-height: max(78svh, 440px); }

.wide-touch .about .content-box { padding: 1.6rem; }
.wide-touch .about .mission { --kamon: 14.4rem; padding: 1.5rem 0.6rem; }

.wide-touch .history-grid { grid-template-columns: 1fr; }
.wide-touch .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.62rem; }

.wide-touch .game-frame { aspect-ratio: 3 / 4; }
.wide-touch .sns-icon { display: block; width: 86%; margin: 0 auto; }

.wide-touch .to-top { width: 3rem; height: 3rem; font-size: 1.25rem; }

/* カードが横に広いと、「めくれて出てくる」回転が枠からはみ出す。
   この場合だけ、下から出てくる動きに差しかえる */
.wide-touch .reveal.reveal-flip { transform: translateY(42px); }


/* ===== 画面が狭いとき ======================================== */
@media (max-width: 900px) {
    .nav ul { gap: 12px; font-size: 0.92em; }
}

@media (max-width: 768px) {
    :root { --header-h: 96px; --banner-h: 30px; }

    .header { flex-direction: column; padding: 8px 5%; gap: 6px; }
    .header.shrink { padding: 6px 5%; }
    .header h1 { font-size: 1.2em; }
    .header.shrink h1 { font-size: 1.1em; }
    .nav ul { gap: 10px; justify-content: center; flex-wrap: wrap; font-size: 0.86em; }

    .hero { min-height: max(78svh, 440px); }

    .section { padding: 56px 5%; }
    .section-title { margin-bottom: 32px; }

    .about .content-box { padding: 26px 16px; }
    .about .mission { --kamon: 15rem; padding: 1.3rem 0; }
    .mission-line { letter-spacing: 0.06em; }
    .mission-line .kanji { font-size: 1.6em; }

    .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

    .game-frame { aspect-ratio: 3 / 4; }   /* スマホは縦長のほうが遊びやすい */

    .sns-icon { display: block; width: 86%; margin: 0 auto; }

    .lightbox button { width: 40px; height: 40px; font-size: 24px; line-height: 40px; }
    .lb-stage img { max-width: 100vw; max-height: 80vh; border-radius: 0; }

    .wave-divider { height: 44px; }
}


/* ===== 「動きを減らす」設定の人には、全部止める ===============
   目が回る・気分が悪くなる人がいるため。ここは消さないこと */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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

    .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    .section-title::after { transform: scaleX(1) !important; }
    .hero-photo { opacity: 1; transform: none; animation: none !important; }
    .catch-copy .ch { opacity: 1; }
    .hero h2 { opacity: 1; }
    .hero-snow { display: none; }
    .wave-divider svg { animation: none !important; }
    .progress-bar { display: none; }

    /* 募集バナーは残すが、流れるのと明滅は止めて、真ん中に出す */
    .alert-bar {
        animation: none !important;
        background-color: #0a0603;
        box-shadow: inset 0 0 18px rgba(255, 140, 0, 0.22);
        justify-content: center;
    }
    .alert-track { animation: none !important; transform: none !important; }
    .alert-group:nth-child(2) { display: none; }
    .alert-group .alert-item:not(:first-child) { display: none; }

    .history-item .award {
        animation: none !important;
        background: none;
        -webkit-text-fill-color: var(--color-gold);
    }
}