@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

:root {
    --content-width: 402px;
    --ink: #1a1a1a;
    --white: #fff;
    --mobileites: #0D8B80;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    color: var(--ink);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    background:
        url("../images/footer_gradation.png") center bottom / 100% auto no-repeat,
        #e9e7e0 url("../images/body_backgraudimage.png") center top / 100% auto;
    vertical-align: bottom;
    position: relative;
}

.header-grad {
    top: 0;
    left: 0;
    width: 100%;
    /* 横幅いっぱいに広げる */
    /* z-indexはHTMLの記述順で自動的に決まるため不要です */
}

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

li {
    list-style: none;
}

button {
    font: inherit;
}

main {
    width: min(100%, var(--content-width));
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}



/* =========================================================
    Nav
========================================================= */
.nav-menu {
    position: fixed;
    right: clamp(10px, 5vw, 30px);
    top: 25%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
}

.nav-menu ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: clamp(100px, 20vw, 250px);
}

.nav-menu a {
    display: block;
    padding: 12px 30px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    background-color: rgb(74, 74, 74, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 25px;
    text-align: center;
    transition: background-color 0.3s;
}

.nav-menu a:hover {
    background-color: #333;
    scale: 1.05;
    transition: scale 0.3s;
}

/* 706px以下のメディアクエリ */
@media (max-width: 706px) {
    .nav-menu {
        display: none;
    }
}

/* =========================================================
    ハンバーガーメニュー（通常時は非表示）
========================================================= */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 10000;
    /* メニューより手前に配置 */
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    opacity: 0;
    /* 初期状態は透明 */
    pointer-events: none;
    /* 透明な時はクリック不可にする */
    transition: opacity 0.5s ease-in-out;
    /* ふんわり表示させる */
}

/* JSで付与する表示用クラス */
.hamburger.is-visible {
    opacity: 1;
    pointer-events: auto;
    /* クリック可能に戻す */
}

.hamburger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--ink, #333);
    /* 必要に応じて色を変更 */
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 10px;
}

.hamburger span:nth-child(3) {
    top: 20px;
}

/* ハンバーガーがクリックされた時（×印になる）のアニメーション */
.hamburger.active span:nth-child(1) {
    top: 10px;
    transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    top: 10px;
    transform: rotate(-45deg);
}

/* =========================================================
    レスポンシブ対応（706px以下） - メニューの挙動
========================================================= */
@media screen and (max-width: 706px) {
    .hamburger {
        display: block;
        /* スマホでボタンを表示 */
    }

    /* メニューを画面全体に被せる設定 */
    .nav-menu {
        position: fixed !important;
        /* 親要素の制限を強制解除 */
        top: 0 !important;
        left: 0 !important;
        width: 100vw;
        /* 画面幅いっぱい */
        height: 100vh;
        height: 100dvh;
        /* スマホのアドレスバー分を考慮した高さ */
        background-color: rgba(243, 238, 227, 0.98);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* rightでの移動ではなく、transformを使って滑らかにスライド */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    /* アクティブ時に画面内にスライドイン */
    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 子要素（li）を中央揃え */
        gap: 20px;
        /* ボタン同士の間隔（お好みで調整してください） */
        padding: 0 !important;
        /* ブラウザ標準の左余白を消去 */
        margin: 0;
        width: 100%;
    }

    .nav-menu ul li {
        list-style: none;
    }

    .nav-menu ul li a {
        display: block;
        width: 200px;
        padding: 16px 20px;
        background-color: #6a6a6a;
        color: #ffffff;
        text-decoration: none;
        border-radius: 50px;
        font-weight: bold;
        font-size: 16px;
        letter-spacing: 1.5px;
        box-sizing: border-box;
        text-align: center;
    }
}

/* =========================================================
    ポップアップ（モーダル）のスタイル
========================================================= */
.map-zoom-img {
    cursor: pointer;
    /* クリックできることを指マークで示す */
}

.modal {
    display: none;
    /* 初期状態は非表示 */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* JavaScriptで .show が付いたときにフェードイン */
.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}

/* =========================================================
    Header
========================================================= */
header {
    position: relative;
    z-index: 3;
    height: 62px;
    background: url("../images/headerimage.png") center / cover no-repeat;
}

header h1 {
    width: 100%;
}

header h1 img {
    width: 100%;
}

.bg-decorations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* width: 100% の代わりに左右を指定 */
    bottom: 0;
    /* height: 100% の代わりに bottom: 0 で一番下まで伸ばす */
    z-index: -1;
    overflow-x: hidden;
    pointer-events: none;
}

#header {
    position: relative;
    height: clamp(678px, 211.9vw, 852px);
    background: #f3eee3;
    overflow: hidden;
}

#header>p img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

#header>div {
    position: absolute;
    left: 0;
    width: 100%;
}

.herocontent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    /* 450pxの固定値から%に変更し、高さが縮んでも正しい位置をキープします */
    top: 52.8%;
    left: 0;
    width: 100%;
}

#header>div>p:first-child {
    flex: 0 0 auto;
}

#header>div>p:first-child img {
    width: clamp(198px, 61.9vw, 249px);
    margin: 0;
    transform: translateX(clamp(-40px, -9.9vw, -30px));
}

/* 親要素（ヒーローエリア）が基準になるよう設定されているか確認してください */
#hero,
.hero,
header {
    position: relative;
}

.herotext {
    /* 中央枠の「右下」を基準に配置して見切れを完全に防止 */
    position: absolute;
    right: 12px;
    bottom: 30px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: "Zen Old Mincho", serif;
    font-weight: 700;
    line-height: 0.98;
    z-index: 10;
}

.herotext p {
    font-size: 36px;
    /* 文字サイズ（維持） */
    line-height: 0.98;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.herotext span {
    font-size: 64px;
    /* 数字サイズ（維持） */
}

/* 右上の丸アイコン配置 */
.herotext p:first-child {
    width: 100%;
    margin-bottom: -18px;
    /* アイコンを日付テキストの右上に少し重ねる */
}

.herotext p:first-child img {
    margin-left: auto;
    width: 58px;
    height: auto;
    display: block;
}

/* 日付テキストの装飾 */
.herotext p:last-child {
    margin: 0;
    color: #ffffff;
    -webkit-text-stroke: 1px #000000;
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.4));
}


/* 矢印をまとめるラッパーの配置 */
.scroll-down-wrapper {
    position: absolute;
    bottom: 50px;
    right: max(100px, 12vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
}

/* 矢印同士の間隔設定（z-indexを有効化するため position: relative を追加） */
.scroll-arrow {
    position: relative;
    margin-top: -16px;
}

.scroll-arrow:first-child {
    margin-top: 0;
}

/* 【重要】上の矢印ほど手前に重なるよう z-index を設定 */
.arrow-1 {
    z-index: 3;
}

/* 一番上：最前面 */
.arrow-2 {
    z-index: 2;
}

/* 真ん中：中間 */
.arrow-3 {
    z-index: 1;
}

/* 一番下：最背面 */

/* 矢印画像のアニメーション設定 */
.arrow-1 img {
    width: 36px;
    height: auto;
    animation: arrow-scroll-1 2.5s infinite ease-in-out;
}

.arrow-2 img {
    width: 36px;
    height: auto;
    animation: arrow-scroll-2 2.5s infinite ease-in-out;
}

.arrow-3 img {
    width: 36px;
    height: auto;
    animation: arrow-scroll-3 2.5s infinite ease-in-out;
}

/* 1番目（一番上）：最初に登場してとどまる */
@keyframes arrow-scroll-1 {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    20%,
    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* 2番目（真ん中）：1番目の下へ重ねるように出現してとどまる */
@keyframes arrow-scroll-2 {

    0%,
    20% {
        opacity: 0;
        transform: translateY(-8px);
    }

    40%,
    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* 3番目（一番下）：2番目の下へ重ねるように出現し、最後全員で消える */
@keyframes arrow-scroll-3 {

    0%,
    40% {
        opacity: 0;
        transform: translateY(-8px);
    }

    60%,
    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}


/* =========================================================
//    section
//========================================================= */
section {
    position: relative;
}

.section-margin {
    height: 30px;
    background: #ddd;
}

.section-margin img {
    width: 100%;
    height: 30px;
}



/* =========================================================
    about
========================================================= */
#about {
    min-height: 824px;
    padding: 26px 0 55px;
    color: #fff;
    text-align: center;
    background: url("../images/about_backimage.png") center / cover no-repeat;
}

#about h2 {
    font-size: 36px;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    text-align: left;
    padding-left: 18px;
    letter-spacing: 2px;
    margin: 0;
    font-weight: 900;
}

/* リード文 */
.about-lead {
    text-align: left;
    padding-left: 18px;
    margin-top: 28px;
}

.about-lead p {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.25;
    margin: 0;
    letter-spacing: 1px;
}

/* 画像コンテナ */
.about-content {
    margin: 50px auto 50px;
    align-items: center;
    justify-content: center;
}

.about-content img {
    width: 190px;
    margin: 0 auto;
}

/* 枠付き説明テキスト（ガラスエフェクト再現） */
.about-description {
    width: 270px;
    margin: 0 auto 60px;
    padding: 18px 8px;
    border-radius: 11px;
    border: 1px solid #939393;
    box-sizing: border-box;
    background: rgba(35, 33, 26, 0.35);
    /* ガラスエフェクト（フロスト 4） */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Safari用 */
}

.about-description p {
    font-size: 13px;
    font-weight: normal;
    line-height: 2;
    margin: 0;
    letter-spacing: 1px;
}

/* 産学連携クレジット */
.about-partner {
    margin-bottom: 18px;
}

.about-partner .partner-title {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
}

.about-partner .partner-divider {
    width: 80%;
    max-width: 320px;
    border: none;
    border-top: 1px solid #fff;
    margin: 8px auto;
}

.about-partner .partner-text {
    font-size: 12px;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ボタンのリンク要素（中央寄せ用） */
.about-btn-link {
    display: inline-block;
    text-decoration: none;
}

/* ABOUTセクションのボタンだけグレー＆大きく上書き */
#about button.about-btn {
    min-width: 230px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: bold;
    background: #a0a0a0;
    color: #fff;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

#about button.about-btn:hover {
    background: #8c8c8c;
    opacity: 0.85;
    transform: translateY(-2px);
}

/* =========================================================
    story
========================================================= */
#story {
    position: relative;
    min-height: 811px;
    padding: 20px 20px;
    background: url("../images/story_backimage.png") center / cover no-repeat;
    overflow: hidden;
}

/* タイトル「STORY」 */
#story h2 {
    font-size: 36px;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    letter-spacing: 2px;
    color: #000;
    margin: 0;
}

/* 縦書きエリア全体 */
.story-content {
    position: absolute;
    top: 75px;
    right: 20px;
    writing-mode: vertical-rl;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    color: #000;
}


/* 「異界」 */
.story-sub {
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 15px;
    margin-top: 25px;
    margin-right: -10px;
}

/* 「捌王子」 */
.story-main {
    font-size: 80px;
    font-weight: bold;
    letter-spacing: 4px;
    margin-top: 60px;
    /* カンプに合わせて少し拡大（異界より一段下げる） */
    margin-right: -10px;
    line-height: 1;
}

/* ルビ（ふりがな）の調整 */
.story-main ruby rt {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 11px;
}

/* 本文エリア */
.story-text {
    margin-top: 60px;
    margin-right: 20px;
}

.story-text p {
    font-family: "Tsukimi Rounded", sans-serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0;
    white-space: nowrap;
}

@media screen and (max-width: 360px) {
    .story-text p {
        font-size: 18px;
    }

    .story-text {
        margin-right: 10px;
    }
}

/* =========================================================
    STAMP
========================================================= */
#stamp {
    min-height: 737px;
    /* height を min-height に変更し、中身が溢れたら自動で伸びるようにします */
    padding: 43px 16px 50px;
    /* 下部にも50pxの余白を追加し、ボタンと下のセクションの間に隙間を作ります */
    color: #111;
    background: url("../images/mobilites_backimage.png") center / cover no-repeat;
}

/* タイトルを左寄せ・大きく */
#stamp h2 {
    font-size: 36px;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    text-align: left;
    padding-left: 10px;
    letter-spacing: 2px;
    color: #fff;
}

#stamp>div:first-of-type {
    margin-top: 30px;
    font-family: Arial, sans-serif;
    font-weight: 800;
    line-height: 1;
}

/* YAMAHA（赤文字＋黒フチ） */
#stamp>div:first-of-type p:first-child {
    color: #f24b4b;
    /* 画像に近い明るい赤 */
    font-size: 42px;
    letter-spacing: 2px;
    -webkit-text-stroke: 1.5px #111;
    /* 黒いフチドリを追加 */
    text-align: left;
    padding-left: 10px;
}

/* Mobilit.E.S（Jersey 10フォント＋右寄せ） */
#stamp>div:first-of-type p:nth-child(2) {
    font-family: 'Jersey 10', sans-serif;
    /* 追加したフォントを適用 */
    font-size: 64px;
    text-align: right;
    padding-right: 10px;
    margin-top: -10px;
    /* YAMAHAに少し近づける */
}

/* モビリテス */
#stamp>div:first-of-type p:last-child {
    font-size: 20px;
    text-align: right;
    padding-right: 15px;
    margin-top: -10px;
}

#stamp>div:nth-of-type(2) {
    margin-top: 35px;
}

/* 2カラムレイアウトの設定 */
#stamp ul {
    display: flex;
    gap: 10px;
    align-items: stretch;
    /* 左右の高さを揃える */
}

/* 左カラム（スマホ画像エリア） */
#stamp li:first-child {
    flex: 0 0 45%;
}

#stamp li:first-child img {
    width: 100%;
    background-color: #FBF6E3;
    /* ご指定のスマホ背景色 */
    padding: 10px;
    /* 画像の周りに余白を作る */
    border: none;
    box-sizing: border-box;
}

/* 出典などの小さい文字 */
#stamp li:first-child p,
#stamp li:last-child p:last-child {
    margin-top: 5px;
    font-size: 8px;
    color: #fff;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* 右カラム（テキストエリア） */
#stamp li:last-child {
    flex: 1;
    background-color: #6a7171;
    /* グレーの背景ボックス */
    padding: 10px 5px;
    color: #fff;
    font-size: 14px;
    line-height: 1.8;
}

#stamp li:last-child p:first-child {
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

/* 下部ボタン */
.stamp-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 280px;
    margin: 60px auto 0;
    /* 上マージン60px ＆ 左右中央揃え */
    padding: 16px 20px;
    background: #1c1c1c;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 12px;
    box-sizing: border-box;
    transition: opacity 0.2s, transform 0.2s;
}

#stamp a:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}


/* =========================================================
    MAP
========================================================= */
#map {
    padding: 12px 16px 40px;
    background: url("../images/map_backimage.png") center / cover no-repeat;
}

.map-header {
    margin-bottom: 20px;
    padding: 0 4px;
}

/* タイトル「MAP」 */
#map h2 {
    font-size: 36px;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    letter-spacing: 2px;
    color: #000;
    line-height: 1;
    margin: 0;
}

/* 右上の深緑ラベル */
.maptitle {
    margin-left: auto;
    /* 右寄せ配置 */
    width: fit-content;
    /* 幅を中身のテキスト長さに制限 */
    margin-top: 6px;
    background-color: #05240F;
    color: #ffffff;
    padding: 5px 16px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.maptitle span {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 20px;
    font-weight: medium;
    letter-spacing: 1px;
}

.maptitle p {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 15px;
    font-weight: medium;
    letter-spacing: 1px;
    margin: 0;
}

/* 2. マップ画像エリア */
.map-image-wrap {
    text-align: center;
    margin-bottom: 30px;
}

.map-image-wrap img {
    width: 100%;
    max-width: 386px;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    /* 画像まわりの影 */
}

.map-area-info {
    margin-top: 10px;
    font-size: 11px;
    color: #000;
    text-align: center;
}

/* 3. ボタンエリア */
.map-btn-wrap {
    text-align: center;
    margin-top: 30px;
}

.map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(260px, 80%, 320px);
    padding: 16px 20px;
    background-color: #000000;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    /* 完全な丸み */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s, transform 0.2s;
}

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

/* =========================================================
   Archive
========================================================= */
#archive {
    padding: 12px 16px 40px;
    background: url("../images/map_backimage.png") center / cover no-repeat;
    border-top: 1px solid #000;
}

#archive h2 {
    font-size: 36px;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    letter-spacing: 2px;
    color: #000;
    text-align: left;
    padding-left: 4px;
}

/* リード文 */
.archive-lead {
    margin: 15px 0 28px 4px;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: #000;
    justify-content: center;
}

/* 2列グリッド配置 */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px 12px;
}

/* カード共通スタイル */
.archive-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, opacity 0.2s;
}

/* 解放済み（アクティブ）ボタン */
.archive-card.active {
    background-color: #ffffff;
    border: 2px solid #0D8B80;
    color: #0D8B80;
}

.archive-card.active:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* 未解放（グレーアウト）ボタン */
.archive-card.disabled {
    background-color: #B2B2B2;
    border: 2px solid #6b6b6b;
    color: #555555;
    cursor: not-allowed;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* サブタイトル（創世編） */
.archive-card .sub-title {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 2px;
}

.archive-card.active .sub-title {
    color: #0D8B80;
}

.archive-card.disabled .sub-title {
    color: #616161;
}

/* メインタイトル（エリア名） */
.archive-card .main-title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
}

.archive-card.disabled .main-title {
    color: #4a4a4a;
}

/* 下部注釈文 */
.archive-note {
    margin-top: 35px;
    text-align: center;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 12px;
    font-weight: 600;
    color: #000;
}

/* =========================================================
   トースト通知 (未解放エリアポップアップ)
========================================================= */
.toast {
    position: fixed;
    bottom: -60px;
    /* 初期位置（画面外） */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: bottom 0.3s ease, opacity 0.3s ease;
    white-space: nowrap;
}

/* 表示時のクラス */
.toast.show {
    bottom: 40px;
    /* 下からふわっと浮き出る位置 */
    opacity: 1;
}

/* =========================================================
    注意事項セクション (NOTICE)
========================================================= */
#notice {
    min-height: 390px;
    padding: 30px 20px;
    /* 上下の余白を少し増やして調整 */
    color: #fff;
    background: #414141;
}

/* タイトル「注意事項」と左右の線 */
#notice h3 {
    margin-bottom: 30px;
    /* リストとの間隔を広げる */
    text-align: center;
    font-size: 28px;
    /* カンプに合わせて大きく */
    font-weight: bold;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* 線と文字の隙間 */
}

/* 左右の線をCSSで描画 */
#notice h3::before,
#notice h3::after {
    content: "";
    display: inline-block;
    width: 60px;
    /* 線の長さ */
    height: 1px;
    background-color: #fff;
}

/* リスト全体 */
#notice ul {
    width: 90%;
    margin: 0 auto;
    /* 中央寄せ */
}

/* リストの各項目 */
#notice li {
    font-size: 15px;
    /* カンプに合わせて大きく */
    line-height: 1.6;
    margin-bottom: 12px;
    /* 項目間の余白 */
    font-weight: bold;
    position: relative;
    padding-left: 20px;
    /* 記号（※）の分のスペースを空ける */
    text-indent: -20px;
    /* 2行目以降をインデントして揃えるための設定 */
}

/* 
※ HTML側に元から「※」が含まれているため、
インデント設定（text-indent: -20px と padding-left: 20px）だけで
2行目が綺麗に揃うようになります。
*/

#notice br {
    display: block;
    height: 0;
    /* 元の不要な隙間を無くす */
    content: "";
}


/* =========================================================
   アンケートセクション (SURVEY)
========================================================= */
#survey {
    background-color: #FDF5EE;
    /* 背景色 */
    padding: 25px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 上部テキスト：「＼1〜2分で終わります！／」 */
.survey-lead {
    color: #0D8B80;
    font-size: clamp(18px, 5vw, 19px);
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

/* ボタンラッパー */
.survey-btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

/* 緑色カプセルボタン */
.survey-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: clamp(270px, 90%, 330px);
    padding: 16px 20px;
    background-color: #0D8B80;
    /* ボタン背景色 */
    color: #FFFFFF;
    /* 文字色 */
    font-size: clamp(18px, 5vw, 20px);
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    /* 完全な丸み（ピルシェイプ） */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    /* ボタン下の自然な影 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* 右矢印 「＞」 */
.survey-btn span {
    font-family: Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

/* ホバー時のアニメーション */
.survey-btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

/* 下部説明文 */
.survey-desc {
    color: #1a1a1a;
    font-size: 13px;
    line-height: 1.7;
    font-weight: medium;
}



/* =========================================================
   フッター
========================================================= */
footer {
    padding: 40px 20px 40px;
    text-align: center;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. タイトル「八王子市彫刻巡りスタンプラリー SNS」 */
footer>p:first-child {
    font-size: 12px;
    font-weight: 500;
    color: #000;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
}

/* 2. SNSアイコン (左: X / 右: Instagram) */
.sns-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-bottom: 42px;
    flex-direction: row-reverse;
    /* HTMLの記述順を反転しXを左配置 */
}

.sns-icon p {
    margin: 0;
    padding: 0;
}

.sns-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* 3. 連携ロゴ3種（縦並び・中央配置・十分な余白） */
.footericon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    /* 各ロゴ同士の上下間隔 */
    width: 100%;
    margin-bottom: 45px;
}

.footericon a {
    width: 240px;
    /* カンプに合わせたロゴサイズ */
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.sns-icon a:hover img {
    opacity: 0.7;
}

.footericon a:hover img {
    opacity: 0.7;
}

/* 4. 黒い区切り線 ＆ コピーライト */
.copyright {
    color: #000;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-top: 35px;
    border-top: 1.5px solid #000;
    /* くっきりとした黒の直線 */
    width: 90%;
    margin: 0 auto;
    text-align: center;
}



@media (min-width: 403px) {
    main {
        box-shadow: 0 0 18px rgba(0, 0, 0, .16);
    }
}

@media (min-width: 403px) {
    main {
        box-shadow: 0 0 18px rgba(0, 0, 0, .16);
    }
}










/* =========================================================
   PC用背景装飾（相対配置）
========================================================= */
/* コンテナ全体を絶対配置にし、z-indexでメインコンテンツの背面に置く */
.bg-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    /* 横スクロールバーが出るのを防ぐ */
    pointer-events: none;
    /* 画像をクリックできないようにし、操作の邪魔をしない */
}

/* 個別の装飾画像を相対的に（%やvwで）配置 */
.decor-img {
    position: absolute;
    /* 基準幅を画面幅（vw）や親要素（%）にすることで、画面サイズに応じて伸縮します */
}

/* 
  【配置の調整について】
  以下の top（上からの位置）や left/right（左右の位置）、
  width（画像の大きさ）の数値（% や vw）をカンプに合わせて微調整してください。
*/

.sc-1 {
    top: 17%;
    left: 12%;
    width: 30vw;
    z-index: 1;
}

.sc-2 {
    top: 38%;
    left: 3%;
    width: 25vw;
    z-index: 2;
}

.sc-3 {
    top: 12%;
    right: 3%;
    width: 31vw;
}

.sc-4 {
    top: 58%;
    right: 7%;
    width: 26vw;
}

.sc-5 {
    top: 3%;
    left: -5%;
    width: 45vw;
}

.sc-6 {
    top: 85%;
    left: 15%;
    width: 18vw;
}

.sc-6 {
    top: 69%;
    left: -10%;
    width: 48vw;
}

.sc-7 {
    top: 51%;
    right: 35%;
    width: 70vw;
    z-index: 3;
}

.sc-8 {
    top: auto;
    /* 上からの位置指定をリセット */
    bottom: 0;
    /* エリアの一番下にぴったり配置 */
    right: 0;
    /* 横位置はデザインに合わせて調整 */
    width: 50vw;
}

.station-bg {
    top: 0%;
    left: 0%;
    width: 38vw;
    z-index: -1;
    opacity: 0.8;
}

.map-bg {
    top: 0;
    right: 0;
    width: 33vw;
    /* マップ背景は画面幅いっぱいに広げる */
    z-index: -1;
}

.stamp-bg {
    top: 38%;
    left: 0;
    width: 30vw;
    /* スタンプ背景も画面幅いっぱいに広げる */
    z-index: -1;
}

.about-bg {
    top: 57%;
    right: 0%;
    width: 36vw;
    /* ABOUT背景も画面幅いっぱいに広げる */
    z-index: -1;
}

/* =========================================================
   レスポンシブ対応（706px以下）
========================================================= */
@media screen and (max-width: 706px) {
    .decor-img:not(.header-grad) {
        display: none;
    }
}



/* =========================================================
    Loading Screen
========================================================= */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-inner {
    width: min(80%, 260px);
    text-align: center;
}

.loading-icon {
    margin: 0 auto 20px;
}

.loading-title {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: var(--ink);
    margin-bottom: 28px;
}

.loading-bar-wrap {
    width: 100%;
    height: 4px;
    background: rgba(26, 26, 26, 0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
}

.loading-bar {
    width: 0%;
    height: 100%;
    background: var(--ink);
    border-radius: 2px;
}

.loading-percent {
    font-family: 'Jersey 10', sans-serif;
    font-size: 30px;
    letter-spacing: 0.05em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.loading-percent span {
    font-size: 16px;
}

body.is-loading {
    overflow: hidden;
}