:root {
    /* Boy Scout Official Brand Colors */
    --color-primary: #00664B;        /* Deep Green - BS (Boy Scout) */
    --color-secondary: #E8EB38;      /* Yellow - Scout Badge */
    --color-accent: #FFBA20;         /* Sunflower - CS (Cub Scout) */

    /* Department Colors */
    --color-bvs: #74B2E0;            /* Sky Blue - BVS (Beaver Scout) */
    --color-cs: #FFBA20;             /* Sunflower - CS (Cub Scout) */
    --color-bs: #00664B;             /* Deep Green - BS (Boy Scout) */
    --color-vs: #064583;             /* Navy Blue - VS (Venture Scout) */
    --color-rs: #C22D47;             /* Crimson - RS (Rover Scout) */

    /* Base Colors */
    --color-forest: #0E3B2E;         /* 深い森 - 見出し・フッター */
    --color-ink: #2B3B34;            /* 本文 */
    --color-muted: #56655E;          /* 補足テキスト */
    --color-paper: #F4F7F3;          /* 樹氷の白 - ページ背景 */
    --color-mist: #E4EDE6;           /* 霧 - セクションの切り替え */
    --color-line: #CBD8CF;
    --color-white: #FFFFFF;

    /* Typography */
    --font-display: 'Zen Kaku Gothic New', sans-serif;
    --font-body: 'Zen Kaku Gothic New', sans-serif;

    /* Layout */
    --gutter: max(1.25rem, 5vw, (100% - 1200px) / 2);
    --section-space: clamp(5rem, 10vw, 8rem);
    --radius-photo: 8px;
    --radius-card: 16px;
    --radius-block: 32px;

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

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

html {
    scroll-padding-top: 5rem;
}

html:has(dialog[open]) {
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--color-ink);
    background-color: var(--color-paper);
    overflow-x: clip;
}

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

:focus-visible {
    outline: 3px solid var(--color-forest);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--color-accent);
}

.hero :focus-visible,
.navbar :focus-visible,
.sns-section :focus-visible,
.footer :focus-visible {
    outline-color: var(--color-accent);
    box-shadow: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 写真の角丸（ヒーローの全面写真と声カードを除く） */
.about-photo,
.season-photo,
.snapshot,
.sns-card-icon {
    border-radius: var(--radius-photo);
}

/* Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem var(--gutter);
    color: var(--color-white);
}

/* 背景色は ::before の不透明度で切り替える（スクロール連動アニメーション非対応時は常に表示） */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-primary);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.15), 0 2px 20px rgb(14 59 46 / 0.2);
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.navbar-brand {
    font-size: 1.125rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    letter-spacing: 0.04em;
}

.navbar-toggle {
    display: none;
}

/* デスクトップでは popover の既定スタイルを打ち消して横並びにする */
.navbar-menu {
    display: flex;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
    list-style: none;
    align-items: center;
    gap: 2rem;
}

.navbar-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    padding: 0.5rem 0;
    background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left bottom / 0 2px;
    transition: background-size 0.3s var(--ease-out-quart);
}

.navbar-link:hover {
    background-size: 100% 2px;
}

/* どの位置からでも入団の入口に行けるよう、ナビの右端にボタンを置く */
.navbar-brand,
.navbar-cta {
    white-space: nowrap;
}

.navbar-cta {
    display: inline-block;
    padding: 0.5rem 1.125rem;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--color-forest);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.navbar-cta:hover {
    background-color: #FFC94D;
}

/* メニューボタンに切り替わる幅でだけ、メニューの外に出す入団ボタン */
.navbar-cta--bar {
    display: none;
}

/* Hero Section */
.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: 7rem var(--gutter) clamp(8rem, 19vw, 17rem);
    color: var(--color-white);
    overflow: clip;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgb(14 59 46 / 0.55), transparent 22%),
        linear-gradient(to top, rgb(14 59 46 / 0.7), transparent 60%),
        linear-gradient(to right, rgb(14 59 46 / 0.75), rgb(14 59 46 / 0.3) 55%, transparent 80%);
}

.hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.hero-content {
    max-width: min(50em, 100% - 9rem); /* 1文目のメッセージが1行に収まり、右の縦書き見出しとも重ならない幅 */
}

.hero-title {
    font-weight: 900;
}

.hero-motto {
    position: absolute;
    top: 6.5rem;
    right: var(--gutter);
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 9.5svh, 6.5rem);
    line-height: 1;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 24px rgb(14 59 46 / 0.35);
}

.hero-motto span {
    display: inline-block;
}

.hero-lead,
.hero-description {
    text-shadow: 0 1px 16px rgb(14 59 46 / 0.55);
}

/* 1文目はメッセージとして大きく見せる */
.hero-lead {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.75rem, 3.2vw, 2.625rem);
    line-height: 1.45;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

/* 折り返すときは読点の後ろだけで改行する */
.hero-lead span {
    display: inline-block;
}

.hero-description {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 2;
    color: rgb(255 255 255 / 0.9);
    margin-bottom: 2.25rem;
    word-break: auto-phrase;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn {
    display: inline-block;
    padding: 1rem 2.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: transform 0.3s var(--ease-out-quart), background-color 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-forest);
}

.btn-primary:hover {
    background-color: #FFC94D;
}

.btn-ghost {
    border-color: rgb(255 255 255 / 0.8);
    color: var(--color-white);
}

.btn-ghost:hover {
    background-color: rgb(255 255 255 / 0.12);
}

/* 山並みのシルエット */
.hero-ridge,
.sns-ridge {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(64px, 12vw, 180px);
    fill: var(--color-paper);
    pointer-events: none;
}

.hero-ridge {
    bottom: -1px;
    z-index: -1; /* 山並みがボタンや文字の上に重ならないようにする */
    height: clamp(96px, 18vw, 270px);
}

/* 奥の山ほど淡くして遠近感を出す。手前の層（#ridge）はページ背景色で次のセクションにつなげる */
.range--far { fill: rgb(255 255 255 / 0.12); }
.range--mid { fill: rgb(255 255 255 / 0.24); }

/* 共通セクション */
main > section {
    position: relative;
    overflow-x: clip; /* 画面外から飛び込んでくる写真で横スクロールが出ないようにする */
    padding: var(--section-space) var(--gutter);
}

.section-header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    word-break: auto-phrase; /* 対応ブラウザでは文節の途中で改行しない */
}

.section-header > * {
    grid-column: 2;
    max-width: 56em;
}

/* 見出し脇の縦書きラベル（ヒーローの縦書き見出しと対応させる） */
.section-label {
    grid-column: 1;
    grid-row: 1 / span 3;
    writing-mode: vertical-rl;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-primary);
    padding-left: 0.875rem;
    border-left: 4px solid var(--color-accent);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.3;
    color: var(--color-forest);
    margin-bottom: 1rem;
}

/* 見出しの行頭にくる「 の空きぶん左へ出して、ほかの見出しと左端をそろえる */
.section-title .phrase,
.closing-title .phrase,
.hero-description .phrase {
    display: inline-block;
}

.hang-bracket {
    margin-left: -0.5em;
}

.section-description {
    font-size: 1.0625rem;
    color: var(--color-muted);
}

/* About Section */
.about-rows {
    display: grid;
    gap: clamp(3.5rem, 8vw, 6rem);
}

.about-row {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.about-row:nth-child(even) {
    grid-template-columns: 5fr 7fr;
}

.about-row:nth-child(even) .about-photo {
    order: 2;
}

.about-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 写真の出典 */
.photo-credit {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.about-card-title {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-forest);
    margin-bottom: 1rem;
    word-break: auto-phrase;
}

.about-card-text {
    max-width: 30em;
    word-break: auto-phrase;
}

.text-link {
    display: inline-block;
    margin-top: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    text-underline-offset: 0.3em;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-accent);
}

/* Seasons Section */
.seasons-section {
    background-color: var(--color-mist);
}

.seasons-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
}

.seasons-note {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

/* 季節の文字と説明文を横に並べ、その下に写真を置く（説明文は季節の文字の上下中央にそろえる）。
   説明文の行数が違っても写真の上端がそろうよう、行の高さは4枚で共有する */
.season {
    position: relative;
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.875rem;
    row-gap: 1rem;
}

.season-photo {
    grid-column: 1 / -1;
}

/* 季節ごとのアクセント色（春：桜／夏：夏山の緑／秋：紅葉／冬：雪空）と、
   スクロール時に浮かび上がり始めるずれ（春から順に、季節が進むように） */
.season:nth-child(1) { --season: #D9567A; --range-start: 0%; }
.season:nth-child(2) { --season: #2A8C3E; --range-start: 7%; }
.season:nth-child(3) { --season: #C8551E; --range-start: 14%; }
.season:nth-child(4) { --season: #4A7FAE; --range-start: 21%; }

.season-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* 人物が下端にいる写真は、横長に切り抜かれる幅でも人物が残るよう下寄せにする */
.season-photo--bottom {
    object-position: center bottom;
}

.season-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.5rem, 4.5vw, 3.75rem);
    line-height: 1;
    color: var(--season);
}

.season-text {
    font-size: 0.875rem;
    line-height: 1.8;
    word-break: auto-phrase;
}

/* 意味の切れ目でだけ改行する */
.season-text .phrase {
    display: inline-block;
}

/* Voices Section */
main > .voices-section {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* 見出しの「成長」を裏付ける保護者の声を、スカウトの声の下に大きな引用として置く */
.voice-feature {
    margin-top: 1.5rem;
}

.voice-card.voice-card--feature {
    display: grid;
    grid-template-columns: minmax(180px, 280px) 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    padding: 1.25rem;
}

.voice-card--feature .voice-card-image {
    grid-row: 1 / -1;
    margin-bottom: 0;
}

.voice-card--feature .voice-card-category {
    justify-self: start;
    margin-top: 0.5rem;
}

/* 本文から「成長」を語る一節を抜き出して大きく見せる（本文と重複するので読み上げは本文に任せる） */
.voice-card-pull {
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    font-weight: 900;
    line-height: 1.6;
    color: var(--color-forest);
    margin-bottom: 1rem;
    word-break: auto-phrase;
}

/* 一節に引くひまわり色のマーカー（折り返した各行に引く）。動きを減らす設定では最初から引いた状態 */
.voice-card-pull-mark {
    background: linear-gradient(transparent 62%, rgb(255 186 32 / 0.45) 62%, rgb(255 186 32 / 0.45) 92%, transparent 92%) no-repeat left / 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.voice-card--feature .voice-card-quote {
    -webkit-line-clamp: 2;
    margin-bottom: 0.75rem;
}

.voice-card--feature .voice-card-name {
    margin-top: 0;
}

.voice-card--feature .voice-card-more {
    justify-self: start;
    align-self: start;
}

.voices-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* スクロール時に、テーブルに放ったカードのように下からばらばらに集まる */
.voice-card:nth-child(1) { --from-x: -60px; --from-y: 140px; --from-r: -9deg; --range-start: 0%; }
.voice-card:nth-child(2) { --from-x: 30px; --from-y: 180px; --from-r: 6deg; --range-start: 8%; }
.voice-card:nth-child(3) { --from-x: -20px; --from-y: 120px; --from-r: -4deg; --range-start: 4%; }
.voice-card:nth-child(4) { --from-x: 50px; --from-y: 200px; --from-r: 8deg; --range-start: 12%; }

.voice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: 0.875rem 0.875rem 1.25rem;
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgb(14 59 46 / 0.06), 0 8px 24px rgb(14 59 46 / 0.06);
    transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
}

/* 「続きを読む」がない準備中のカードは押せないので浮かせない */
.voice-card:has(.voice-card-more):hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgb(14 59 46 / 0.08), 0 16px 32px rgb(14 59 46 / 0.12);
}

.voice-card-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-photo);
    margin-bottom: 1rem;
}

/* 顔が上寄りの写真は、横長に切り抜かれる幅でも顔が残るよう上寄せにする */
.voice-card-image--top {
    object-position: center top;
}

.voice-card-category,
.voice-modal-category {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--color-white);
    background-color: var(--color-bs);
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    margin-bottom: 0.875rem;
}

/* 部門タグの下に添える対象年齢 */
.voice-card-age,
.voice-modal-age {
    margin: -0.5rem 0 0.875rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.voice-card-category.rs,
.voice-modal-category.rs {
    background-color: var(--color-rs);
}

/* 部門タグは部門色。空色とひまわり色は白文字だとコントラストが足りないため、文字色を濃くする */
.voice-card-category.bvs,
.voice-modal-category.bvs {
    background-color: var(--color-bvs);
    color: var(--color-forest);
}

.voice-card-category.cs,
.voice-modal-category.cs {
    background-color: var(--color-cs);
    color: var(--color-forest);
}

.voice-card-category.parent,
.voice-modal-category.parent {
    background-color: var(--color-mist);
    color: var(--color-forest);
}

.voice-card-quote {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.voice-card-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-forest);
    margin-top: auto;
}

/* カード全体をクリック範囲にする */
.voice-card-more {
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
    cursor: pointer;
}

.voice-card-more::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
}

.voices-cta {
    text-align: center;
    margin-top: 3.5rem;
}

.btn-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary);
    padding: 0.875rem 2rem;
    border: 2px solid var(--color-primary);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* 外部サイトへのリンクを示す矢印（文字の ↗ はスマホで絵文字になるため SVG で描く） */
.btn-link-text {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-link-note {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-muted);
}

.btn-link:hover {
    background-color: rgb(0 102 75 / 0.08);
}

/* Voice Modal */
.voice-modal {
    margin: auto;
    width: min(960px, 100% - 2rem);
    max-height: min(85svh, 100% - 2rem);
    border: 0;
    border-radius: var(--radius-block);
    background: var(--color-white);
    color: var(--color-ink);
    box-shadow: 0 24px 64px rgb(14 59 46 / 0.3);
}

.voice-modal::backdrop {
    background: rgb(14 59 46 / 0.6);
}

.voice-modal-inner {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.voice-modal-close {
    position: sticky;
    top: 0.75rem;
    z-index: 1;
    display: block;
    margin: -1rem -1rem -2.75rem auto;
    box-shadow: 0 2px 8px rgb(14 59 46 / 0.15);
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--color-paper);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-forest);
    cursor: pointer;
}

.voice-modal-body {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.voice-modal-image > * {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.voice-modal-quote {
    font-size: 1.0625rem;
    line-height: 2;
    margin-bottom: 1.5rem;
}

.voice-modal-name {
    font-weight: 700;
    color: var(--color-forest);
}

/* Snapshots Band */
main > .snapshots {
    padding: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.snapshots-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--gutter);
    margin-bottom: 1.25rem;
}

.snapshots-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-forest);
}

.marquee {
    overflow-x: auto;
}

.marquee-track {
    list-style: none;
    display: flex;
    width: max-content;
    padding-bottom: 1.5rem;
}

/* gap ではなく右余白で間隔を取り、-50% の移動で継ぎ目なくループさせる */
.marquee-track > li {
    margin-right: 1rem;
}

.marquee-track > li:nth-child(even) {
    transform: translateY(1.5rem);
}

.snapshot {
    width: clamp(200px, 22vw, 300px);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.marquee-toggle {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-forest);
    cursor: pointer;
}

.marquee-toggle .icon-play,
.marquee-toggle[aria-pressed="true"] .icon-pause {
    display: none;
}

.marquee-toggle[aria-pressed="true"] .icon-play {
    display: block;
}

/* SNS Section */
.sns-section {
    background-color: var(--color-primary);
    color: var(--color-white);
}

main > .sns-section {
    padding-block: calc(var(--section-space) + clamp(64px, 12vw, 180px) * 0.6);
}

.sns-ridge--top {
    top: -1px;
}

.sns-ridge--bottom {
    bottom: -1px;
}

.sns-section .section-label {
    color: var(--color-white);
}

.sns-section .section-title {
    color: var(--color-white);
}

.sns-section .section-description {
    color: rgb(255 255 255 / 0.8);
}

.sns-join {
    font-size: 1.0625rem;
    font-weight: 700;
}

.sns-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
}

/* 山形県の地図と団の位置 */
.sns-map {
    position: sticky;
    top: 6rem;
    width: 100%;
    max-width: min(480px, (100svh - 8rem) * 0.63);
}

.sns-map-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.sns-map-region {
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.sns-map-region--shonai { fill: #E0ECE3; }
.sns-map-region--murayama { fill: #CFE3D6; }
.sns-map-region--mogami { fill: #B9D6C3; }
.sns-map-region--okitama { fill: #A5C9B1; }

.sns-map-region-names text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    fill: rgb(14 59 46 / 0.45);
}

.sns-map-pin {
    cursor: pointer;
}

.sns-map-pin circle {
    fill: var(--color-accent);
    stroke: var(--color-forest);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s var(--ease-out-quart);
}

.sns-map-pin .sns-map-hit {
    fill: transparent;
    stroke: none;
}

.sns-map-pin text {
    font-size: 16px;
    font-weight: 700;
    fill: var(--color-forest);
    stroke: rgb(255 255 255 / 0.85);
    stroke-width: 3px;
    paint-order: stroke;
}

.sns-map-pin:hover circle,
.sns-map-pin:focus-visible circle {
    transform: scale(1.4);
}

.sns-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* 写真と文字を1枚の面にまとめ、カード内の余白はカード同士の間隔より狭くする */
.sns-card {
    display: grid;
    grid-template-columns: clamp(112px, 30%, 200px) 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 1.25rem;
    padding: 0.625rem;
    border-radius: var(--radius-card);
    background-color: rgb(255 255 255 / 0.07);
}

/* 地図のピンで選んだカードを強調する（JS で付け外し、常に1枚だけ） */
.sns-card {
    scroll-margin-top: 1rem;
}

.sns-card.is-highlighted {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}

.sns-card-icon {
    grid-row: 1 / -1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 写真がまだないカードの代わりに置く灰色の枠 */
.sns-card-icon.is-pending {
    display: grid;
    place-items: center;
    background-color: #5F6663;
    color: rgb(255 255 255 / 0.85);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.sns-card-region {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #FFE29E;
}

/* 団によってはリンクが複数あるので、カード下端にまとめて縦に並べる */
.sns-card-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: end;
}

.sns-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.375rem;
}

.sns-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.5rem; /* タップしやすい高さを確保 */
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

.sns-card-link svg {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
}

.sns-card-link .dot {
    fill: var(--color-accent);
    stroke: none;
}

.sns-card-link:hover {
    color: var(--color-accent);
}

/* Instagram の URL がまだない団（押せない表示） */
.sns-card-link.is-disabled {
    color: rgb(255 255 255 / 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: default;
}

.sns-card-link.is-disabled svg {
    stroke: rgb(255 255 255 / 0.5);
}

.sns-card-link.is-disabled .dot {
    fill: rgb(255 255 255 / 0.5);
}

/* Supporters Section */
.supporters-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-forest);
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-line);
}

.supporters-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2.5rem;
    font-weight: 500;
    color: var(--color-forest);
}

/* 企業・団体は個人より一段大きく */
.supporters-list--org {
    font-size: 1.125rem;
}

.supporters-list + .supporters-heading {
    margin-top: 3rem;
}

/* Closing Section：読み終えたところで入団の入口に戻れるようにする */
main > .closing-section {
    padding-top: 0;
    padding-bottom: clamp(4rem, 8vw, 6rem);
}

.closing {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border-radius: var(--radius-block);
    overflow: hidden;
    border: 1px solid var(--color-line);
    background-color: var(--color-white);
}

.closing-join,
.closing-contact {
    padding: clamp(2rem, 5vw, 3.5rem);
}

.closing-join {
    background-color: var(--color-mist);
}

.closing-title {
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 900;
    line-height: 1.4;
    color: var(--color-forest);
    margin-bottom: 0.75rem;
    word-break: auto-phrase;
}

.closing-join p,
.closing-contact-address p {
    word-break: auto-phrase;
}

.closing-join p {
    color: var(--color-muted);
    margin-bottom: 1.75rem;
}

.closing-contact-address {
    font-style: normal;
}

.closing-contact-name {
    font-weight: 700;
    color: var(--color-forest);
}

.closing-contact-address a {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

/* Footer */
.footer {
    padding: 4rem var(--gutter) 2rem;
    background-color: var(--color-forest);
    color: rgb(255 255 255 / 0.7);
    border-top: 4px solid var(--color-accent);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.footer-brand p {
    max-width: 28em;
    word-break: auto-phrase;
}

.footer-section h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    text-align: center;
    font-size: 0.875rem;
}

/* ===== Motion ===== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    /* ヒーローの読み込み演出：写真 → 縦書き見出し → 説明文と CTA → 等高線 */
    .hero-photo {
        animation: hero-zoom 2.4s var(--ease-out-expo) backwards;
    }

    .hero-motto span {
        animation: motto-in 0.9s var(--ease-out-expo) backwards;
        animation-delay: calc(0.35s + var(--i) * 0.09s);
    }

    .hero-lead,
    .hero-description,
    .hero-cta {
        animation: rise 0.9s var(--ease-out-expo) backwards;
    }

    .hero-lead { animation-delay: 1s; }
    .hero-description { animation-delay: 1.1s; }
    .hero-cta { animation-delay: 1.2s; }

    /* 奥の山から順にせり上がる */
    .range--far,
    .range--mid {
        animation: range-rise 1.4s var(--ease-out-expo) backwards;
    }

    .range--far { animation-delay: 1s; }
    .range--mid { animation-delay: 1.2s; }

    /* 自動で流れる写真の帯（停止ボタンとホバーで一時停止） */
    .marquee {
        overflow-x: clip;
    }

    .marquee-track {
        animation: marquee 120s linear infinite;
    }

    .marquee:hover .marquee-track,
    .snapshots:has(.marquee-toggle[aria-pressed="true"]) .marquee-track {
        animation-play-state: paused;
    }

    /* モーダルの開閉 */
    .voice-modal,
    .voice-modal::backdrop {
        transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
    }

    .voice-modal:not([open]),
    .voice-modal:not([open])::backdrop {
        opacity: 0;
    }

    .voice-modal:not([open]) {
        transform: translateY(16px) scale(0.98);
    }

    @starting-style {
        .voice-modal[open],
        .voice-modal[open]::backdrop {
            opacity: 0;
        }

        .voice-modal[open] {
            transform: translateY(16px) scale(0.98);
        }
    }

    /* スクロール連動の演出（非対応ブラウザでは静止表示のまま） */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        .navbar::before {
            animation: fade-in linear both;
            animation-timeline: scroll();
            animation-range: 0 12svh;
        }

        .hero-media {
            animation: parallax linear both;
            animation-timeline: view();
            animation-range: exit;
        }

        /* 写真やカードは、それぞれ違う位置・角度から飛び込み、少し揺り戻して並ぶ。
           ある程度見えてから動き始め、画面の中ほどまでに並び終える。
           出発位置は各要素の --from-x / --from-y / --from-r、始まりのずれは --range-start で指定する */
        .about-photo {
            animation: fade-up linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 35%;
        }

        /* 四季は春から順に、前の季節と少し重なりながらゆっくり浮かび上がる。
           横スクロールの列になる幅では付けない */
        @media (min-width: 769px) {
            .season {
                animation: fade-in linear both;
                animation-timeline: view();
                animation-range: cover calc(10% + var(--range-start)) cover calc(25% + var(--range-start));
            }
        }

        /* 保護者の声は、4枚の上に最後の1枚として静かに置かれ、収まってから一節にマーカーが引かれる */
        .voice-card--feature {
            view-timeline: --voice-feature;
            animation: card-settle linear both;
            animation-timeline: --voice-feature;
            animation-range: entry 20% cover 40%;
        }

        .voice-card-pull-mark {
            animation: marker-draw linear both;
            animation-timeline: --voice-feature;
            animation-range: cover 25% cover 38%;
        }

        @media (min-width: 1101px) {
            .voices-grid .voice-card {
                animation: toss-in linear both;
                animation-timeline: view();
                animation-range: entry calc(25% + var(--range-start, 0%)) cover calc(45% + var(--range-start, 0%));
            }
        }

        /* スクロールで奥の山ほどゆっくり沈み、奥行きを出す（読み込み演出の transform とは別に translate を使う） */
        .hero-ridge {
            view-timeline: --hero-ridge;
        }

        .range--far,
        .range--mid {
            animation: range-rise 1.4s var(--ease-out-expo) backwards, range-sink linear both;
            animation-timeline: auto, --hero-ridge;
            animation-range: normal, exit;
        }

        .range--far { --sink: 70px; animation-delay: 1s, 0s; }
        .range--mid { --sink: 35px; animation-delay: 1.2s, 0s; }
    }
}

/* 動きを減らす設定では帯が流れないため、停止ボタンも不要 */
@media (prefers-reduced-motion: reduce) {
    .marquee-toggle {
        display: none;
    }
}

@keyframes hero-zoom {
    from { transform: scale(1.08); }
}

@keyframes motto-in {
    from {
        opacity: 0;
        transform: translateY(-0.35em);
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes range-rise {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
}

@keyframes range-sink {
    to { translate: 0 var(--sink); }
}

@keyframes card-settle {
    from {
        opacity: 0;
        translate: 0 72px;
        rotate: -2.5deg;
    }
    60% { opacity: 1; }
}

@keyframes marker-draw {
    from { background-size: 0% 100%; }
}

@keyframes fade-up {
    from {
        opacity: 0;
        translate: 0 32px;
    }
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes parallax {
    to { transform: translateY(30%); }
}

@keyframes toss-in {
    from {
        opacity: 0;
        translate: var(--from-x) var(--from-y);
        rotate: var(--from-r);
    }
    30% { opacity: 1; }
    75% {
        translate: calc(var(--from-x) * -0.04) 0;
        rotate: calc(var(--from-r) * -0.3);
    }
    to {
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
    }
}

@keyframes marquee {
    to { transform: translateX(-50%); }
}

/* Responsive Design */
@media (min-width: 769px) and (max-width: 1100px) {
    .voices-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voices-grid .voice-card-image {
        aspect-ratio: 4 / 3;
    }
}

/* [軽微14] タブレットの2列では縦長の写真が大きすぎるので横長に */
@media (min-width: 769px) and (max-width: 1024px) {
    .season-photo {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 768px) {
    .voices-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--gutter) * -1);
        padding: 0.5rem var(--gutter) 1.5rem;
        scroll-padding-inline: var(--gutter);
    }

    .voice-card {
        flex: 0 0 min(260px, 72vw);
        scroll-snap-align: start;
    }
}

@media (max-width: 1024px) {
    /* popover 対応ブラウザでは、メニューボタンで開くパネルにする */
    @supports selector(:popover-open) {
        .navbar-toggle {
            display: grid;
            place-items: center;
            width: 2.75rem;
            height: 2.75rem;
            border: 0;
            border-radius: 50%;
            background: rgb(255 255 255 / 0.12);
            color: inherit;
            cursor: pointer;
        }

        .navbar-menu:not(:popover-open) {
            display: none;
        }

        .navbar-menu:popover-open {
            position: fixed;
            inset: 4.5rem 1rem auto auto;
            flex-direction: column;
            gap: 0.25rem;
            min-width: 12rem;
            padding: 1rem 1.5rem;
            border-radius: var(--radius-card);
            background: var(--color-primary);
            color: var(--color-white);
            box-shadow: 0 16px 40px rgb(14 59 46 / 0.35);
            align-items: flex-start;
        }

        .navbar-cta--bar {
            display: inline-block;
            margin-left: auto;
        }

        .navbar-menu .navbar-cta {
            display: none;
        }
    }

    .seasons-list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2.5rem;
    }

    .sns-layout {
        grid-template-columns: 1fr;
    }

    .sns-map {
        position: static;
        width: min(100%, 300px);
        margin-inline: auto;
    }

    .voice-modal-body {
        grid-template-columns: 1fr;
    }

    .voice-modal-image {
        max-width: 280px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .navbar-menu {
        gap: 1rem;
    }

    .hero {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .navbar-cta {
        padding: 0.375rem 0.875rem;
        font-size: 0.875rem;
    }

    .voice-modal-close {
        margin-bottom: 0.5rem;
    }

    .voice-modal-quote {
        padding-right: 1.5rem;
    }

    .hero-content {
        max-width: none;
    }

    .hero-title {
        display: flex;
        flex-direction: column;
    }

    .hero-motto {
        position: static;
        align-self: flex-end;
        font-size: clamp(1.75rem, 4.2svh, 2.25rem);
        margin-bottom: 0.5rem;
    }

    .hero-description {
        margin-bottom: 1.5rem;
    }

    .btn {
        padding: 0.875rem 1.5rem;
    }

    /* 縦並びでは、写真と文章の間を詰め、行の間に線を引いて、どの文章がどの写真のものか分かるようにする */
    .about-rows {
        gap: 1.75rem;
    }

    .about-row + .about-row {
        padding-top: 1.75rem;
        border-top: 1px solid var(--color-line);
    }

    .about-row,
    .about-row:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .about-row:nth-child(even) .about-photo {
        order: 0;
    }

    .seasons-list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--gutter) * -1);
        padding: 0 var(--gutter) 1rem;
        scroll-padding-inline: var(--gutter);
        gap: 1rem;
    }

    .season {
        flex: 0 0 min(270px, 74vw);
        scroll-snap-align: start;
    }

    .sns-grid {
        grid-template-columns: 1fr;
    }

    .sns-map {
        width: min(100%, 320px);
    }

    .closing {
        grid-template-columns: 1fr;
    }

    .voice-card.voice-card--feature {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .voice-card--feature .voice-card-image {
        grid-row: auto;
        aspect-ratio: 3 / 2;
        object-position: center 30%;
        margin-bottom: 1rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .navbar-container {
        gap: 0.5rem;
    }

    .navbar-brand {
        font-size: 0.8125rem;
        letter-spacing: 0;
    }

    .navbar-cta {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }

    .section-header {
        column-gap: 0.75rem;
    }

    .section-title {
        font-size: clamp(1.625rem, 7.2vw, 3.25rem);
    }

    .sns-card {
        grid-template-columns: 96px 1fr;
        column-gap: 0.875rem;
    }
}