/* ===== Base ===== */
:root {
    --scene-max: 1360px;

    /* 位置合わせ用：%で調整する（レスポンシブでも崩れにくい） */
    --train-x: -25%;
    --train-y: 8%;
    --train-w: 26%;

    --car-x: -10%;
    --car-y: 58%;
    --car-w: 9%;

    --wind-x: 67.67%;
    --wind-y: 3.5%;
    --wind-w: 6.2%;

    --wind02-x: 72.1%;
    --wind02-y: 3.3%;
    --wind02-w: 4.6%;

    --wind03-x: 76%;
    --wind03-y: 2.45%;
    --wind03-w: 4%;
}

.p-header,
.pt-overlay,
.common-transition,
.p-footerContact,
.p-footer {
    display: none;
}

.hide-content .pt-overlay,
.hide-content .common-transition,
.hide-content .p-header,
.hide-content .p-footerContact,
.hide-content .p-footer {
    display: none !important;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
    background:
        radial-gradient(1100px 600px at 15% 15%,
            rgba(255, 150, 90, 0.22),
            transparent 60%),
        radial-gradient(800px 500px at 85% 25%,
            rgba(255, 200, 140, 0.18),
            transparent 55%),
        linear-gradient(145deg,
            #e8a36a,
            #ffd9a0 45%,
            #cfe6f2);
    color: #e9eef5;
}

body.is-modal-open {
    width: 100%;
    overflow: hidden;
    padding-right: var(--scrollbar-width);
}

.loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;

    background: linear-gradient(145deg,
            #f4c08b,
            #fff1c6 45%,
            #d7eef8);
}

.loading__inner {
    text-align: center;
}

.loading__mascot {
    width: 120px;
    margin: 0 auto 14px;
    animation: breathe 3.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.loading__mascot img,
.loading__mascot svg {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1) rotate(20deg);
        opacity: 0.95;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

.loading__text {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: rgba(0, 0, 0, 0.55);
}

.site-header {
    position: sticky;
    top: 2rem;
    background: rgba(255, 255, 255, 0.597);
    border-radius: 5rem;
    backdrop-filter: blur(8px);
    width: min(var(--scene-max), 96%);
    margin: 3rem auto 0;
    padding: 1.25rem 3rem 1.25rem 4.5rem;
    box-shadow: 0 2px 4px rgba(23, 23, 23, 0.145);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 9990;
    transform-origin: top left;
    will-change: transform;
}

.site-header .toplogo {
    width: 12rem;
}

.mascot {
    width: 11rem;
    position: absolute;
    left: -6%;
    top: -40%;
    animation: mascot 3.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

@keyframes mascot {

    0%,
    100% {
        transform: scale(1) rotate(20deg);
        opacity: 0.95;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

.mascot::after {
    content: "";
    width: 120%;
    height: 30%;
    transform: translateX(-50%) skewX(-12deg);
    background: rgba(0, 0, 0, 0.513);
    filter: blur(10px);
    z-index: -1;
}

.site-title {
    font-size: 30px;
    line-height: 0;
    text-align: center;
    margin: 0;
    font-weight: 650;
    letter-spacing: 0.06rem;
    color: #111;
}

.site-title img {
    width: 24rem;
}

@media screen and (max-width:767px) {
    .site-header {
        margin: 1rem auto 0;
        flex-direction: column-reverse;
        padding: 1.25rem 2rem 1.25rem 4.5rem;
    }

    .mascot {
        width: 7rem;
        left: 0rem;
        top: 50%;
        transform: translateY(-50%);
        animation: mascotsp 3s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
    }

    @keyframes mascotsp {

        0%,
        100% {
            transform: translateY(-50%) scale(1) rotate(20deg);
            opacity: 0.95;
        }

        50% {
            transform: translateY(-50%) scale(1.04);
            opacity: 1;
        }
    }

    .site-title img {
        width: 12rem;
    }
}

.controls__wrap {
    position: relative;
    z-index: 9999;
    width: fit-content;
    margin: 0rem 0 1rem auto;
    padding: 0.25rem 0.75rem 0.75rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 5px 4px rgba(26, 26, 26, 0.083);
}

@media screen and (max-width:767px) {
    .controls__wrap {
        margin: 0 auto;
        padding: 0.5rem 0.75rem 0.75rem;
    }
}

.controls {
    display: flex;
    gap: 8px;
}

.controls button {
    border: 0px solid rgba(255, 255, 255, 0.14);
    background: rgb(38, 134, 78);
    color: inherit;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.controls button:hover {
    background: rgba(26, 174, 127, 0.703);
}

.container {
    width: min(var(--scene-max), 96%);
    margin: 3rem auto 8rem;
    position: relative;
    padding-bottom: 3rem;
}

.description {
    position: relative;
    width: 100%;
    margin: 2rem auto 5rem;
}

@media screen and (max-width:767px) {
    .description {
        margin: 2rem auto 5rem;
    }
}

.description_content__wrap {
    position: relative;
}

.description_content {
    position: relative;
    font-family: "Zen Maru Gothic", system-ui, sans-serif;
    background-color: #ffffff;
    width: fit-content;
    border-radius: 1rem;
    padding: 1rem 2rem 1.5rem;
    color: #005DB3;
    margin: 0rem 0;
    box-shadow: 0 4px 8px rgba(26, 26, 26, 0.083),
        0 6px 8px rgba(42, 42, 42, 0.055);
}

.description .text {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 2.4;
    letter-spacing: 0.2rem;
}

.description .subtext {
    font-family: "Nunito", "Zen Maru Gothic", system-ui, sans-serif;
    color: #878787;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.18rem;
}

@media screen and (max-width:767px) {
    .description_content {
        padding: 1rem 1rem 1.5rem;
    }

    .description .text {
        font-size: 1rem;
        letter-spacing: 0.088rem;
    }

    .description .subtext {
        font-size: 0.96rem;
        letter-spacing: 0.135rem;
    }
}

.text_bg {
    overflow: hidden;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -10;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    width: calc(100vw - var(--scrollbar-width));
    left: 50%;
    transform: translateX(-50%);
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    will-change: transform;
    animation: marquee 30s linear infinite;
}

.marquee__item {
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 96px;
    color: rgba(255, 255, 255, 0.7);
    /* 背景に合わせて調整 */
}

/* 左に流れる */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

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

    /* ← “半分”動かすのがコツ */
}

/* 動きを止めたい人への配慮 */
@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }
}


.scene-scroll {
    position: relative;
    padding: .5rem;
    border-radius: 1rem;
    border-bottom-right-radius: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(26, 26, 26, 0.083),
        0 6px 8px rgba(42, 42, 42, 0.055);
}

@media screen and (max-width:767px) {
    .scene-scroll {
        border-bottom-right-radius: 1rem;
    }
}

/* ===== Scene ===== */
.scene {
    position: relative;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
}

.layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.layer.bg {
    border-radius: 0.8rem;
}

.scene-track {
    overflow: hidden;
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {

    .scene-clip {
        border-radius: 1rem;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.08);
    }

    .scene-track {
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .scene {
        width: 240vw;
        /* ← 横に広げる（調整ポイント） */
        min-width: 240vw;
        overflow: hidden;
    }

    /* スクロールバー非表示（任意） */
    .scene-track::-webkit-scrollbar {
        display: none;
    }
}

.scene-scroll::after {
    content: "←横にスワイプできます→";
    position: absolute;
    top: -5.5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    opacity: 0.7;
    color: #111;
}

@media (min-width: 769px) {
    .scene-scroll::after {
        display: none;
    }
}

.scroll-btn {
    position: absolute;
    bottom: -13.5%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* 左右配置 */
.scroll-btn.left {
    left: 8px;
}

.scroll-btn.right {
    right: 8px;
}

/* PCでは非表示 */
@media (min-width: 769px) {
    .scroll-btn {
        display: none;
    }
}

/* 動くものは inset 0 じゃなく、任意位置に置く */
.mover {
    inset: auto;
    height: auto;
    will-change: transform;
    transform: translateZ(0);
}

/* 列車 */
.train {
    left: var(--train-x);
    top: var(--train-y);
    width: var(--train-w);
    animation: moveRight 8s ease-in infinite;
}

/* 車 */
.car {
    left: var(--car-x);
    top: var(--car-y);
    width: var(--car-w);
    animation: moveLeft 7s ease-in-out infinite;
}

.car::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 80%;
    width: 120%;
    height: 30%;
    transform: translateX(-50%) skewX(-12deg);
    background: rgba(0, 0, 0, 0.28);
    filter: blur(10px);
    z-index: -1;
}

/* 風力 */
.wind {
    left: var(--wind-x);
    top: var(--wind-y);
    width: var(--wind-w);
    animation: rotate 7s ease-in-out infinite;
}

.wind.--02 {
    left: var(--wind02-x);
    top: var(--wind02-y);
    width: var(--wind02-w);
    animation: rotate 8s ease-in-out infinite;
}

.wind.--03 {
    left: var(--wind03-x);
    top: var(--wind03-y);
    width: var(--wind03-w);
    animation: rotate 5s ease-in-out infinite;
}

/* アニメ停止状態（JSで付け外し） */
.scene.is-paused .mover {
    animation-play-state: paused;
}

/* .scene:hover .mover{ animation-play-state: paused; } */

@keyframes moveRight {
    0% {
        transform: translate(0, 0);
    }

    44% {
        transform: translate(144%, 30%);
    }

    56% {
        transform: translate(144%, 30%);
    }

    80% {
        transform: translate(450%, 102%);
    }

    100% {
        transform: translate(450%, 102%);
    }
}

@keyframes moveLeft {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(1250%, 264%);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===== Hotspot (optional) ===== */
.hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -100%);
    pointer-events: none;
}

.hotspot__label {
    display: inline-block;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.hint {
    margin: 0;
    opacity: 0.8;
    font-size: 13px;
}

/* スマホ微調整 */
@media (max-width: 520px) {
    .site-title {
        font-size: 14px;
    }

    .controls button {
        padding: 7px 9px;
    }
}

/* ===== popup ===== */
.popup {
    pointer-events: auto;
    position: absolute;
    left: var(--popUpX);
    top: var(--popUpY);
    width: 5%;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 999;
    opacity: 0;
    cursor: pointer;
}

.popup__pos {
    display: block;
    transform: translate(-50%, -110%);
    will-change: transform;
}

.popup.--wind {
    width: 5.6%;
}

/* 文字 */
.popup__text {
    font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    display: block;
    line-height: 0;
    width: 100%;
    will-change: transform;
}

.popup__text img {
    display: block;
    height: auto;
    width: 100%;
    opacity: 0.88;
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center;
    backface-visibility: hidden;
    pointer-events: none;
}

.popup:hover .popup__text img {
    transform: scale(1.2);
    opacity: 1;
}

.popup:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 12px 30px rgba(0, 0, 0, 0.25);
}

@keyframes float {

    0%,
    100% {
        transform: translate(-50%, -110%)
    }

    50% {
        transform: translate(-50%, -116%)
    }
}

/* @media (prefers-reduced-motion: reduce) {
    .popup {
        animation: none;
    }
} */

/* modal root */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

/* overlay */
.modal__overlay {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.24);
    opacity: 0;
}

/* panel */
.modal__panel_wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    max-width: 94%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    overflow: hidden;
}

.modal__panel {

    width: 600px;
    max-width: 100%;
    max-height: 80vh;
    overflow-y: scroll;
    background: #2d43603f;
    border-radius: 1rem;
    border: 2px solid #fcf63f;
    opacity: 0;
    backdrop-filter: blur(12px);
    padding: 0 0 3rem;
}

.modal__panel::-webkit-scrollbar {
    width: 4px;
}

.modal__panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.modal__panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            #ffb36b,
            #ff8c42);
    border-radius: 8px;
}

.modal__panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            #ff9a4a,
            #ff6f1e);
}

@media screen and (max-width:767px) {
    .modal__panel {
        padding: 1rem 0 2rem;
        height: 79vh;
        max-height: 79vh;
        overflow-y: scroll;
    }
}

.modal__media img {
    width: 50%;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width:767px) {
    .modal__media img {
        width: 64%;
    }
}

.scroll-hint {
    position: relative;
    margin: 0.5rem 2.8rem 0 auto;
    pointer-events: none;
    display: none;
    /* JSで制御 */
    z-index: 5;
    height: 40px;
    width: 10px;
    border: 1px solid #fff;
    border-radius: 24px;
    padding: 28px 8px;
}

.scroll-hint__arrow {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(252, 255, 63);
    transform: translateX(-50%);
    animation: scrollArrow 1.6s ease-in-out infinite;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.scroll-hint::after {
    content: "scroll";
    position: absolute;
    top: 50%;
    left: 12px;
    font-size: 12px;
    letter-spacing: .05rem;
    display: block;
    transform: translateY(-50%) rotate(90deg);
}

/* 下に誘導するアニメーション */
@keyframes scrollArrow {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 28px);
        opacity: 0;
    }
}

/* PCでは使わない */
@media (min-width: 769px) {
    .scroll-hint {
        display: none !important;
    }
}


/* close */
.modal__close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
}

/* text */
.modal__city {
    margin-top: 6px;
    opacity: 0.9;
}

.modal__body {
    padding: 0rem 1.6rem 0rem;
    max-height: min(70vh, 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.modal__body h2 {
    margin-top: 1rem;
}

.modal__title {
    margin: 6px 0 10px;
    font-size: 18px;
}

.modal__desc {
    margin: 0 0 12px;
    opacity: 0.9;
    line-height: 1.6;
}

.modal__actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal__btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.526);
    background: rgba(255, 255, 255, 0.633);
    color: inherit;
    text-decoration: none;
}

.grad-btn {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    width: 180px;
    height: 52px;
    border-radius: 999px;
    overflow: hidden;
    transition: transform 0.4s;
}

/* 回転するグラデーション */
.grad-btn::before {
    content: "";
    position: absolute;
    inset: -150%;
    background: conic-gradient(from 0deg,
            #ff5f6d,
            #ffc371,
            #47c9ff,
            #7b6cff,
            #ff5f6d);
    animation: spin 3s linear infinite;
    z-index: -1;
}

/* 白い中身 */
.grad-btn__inner {
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: inherit;
    display: grid;
    place-items: center;

    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #111;
    z-index: 99;
}

/* 回転アニメ */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* hoverで少し強調（任意） */
.grad-btn:hover {
    transform: scale(0.9);
}

/* 押下 */
.grad-btn:active .grad-btn__inner {
    transform: scale(0.98);
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
    .grad-btn::before {
        animation: none;
    }
}


.toGallery {
    display: flex;
    justify-content: center;
    margin: 6rem 0 0;
}

.toGallery a {
    margin: 0 auto;
    text-align: center;
    width: 500px;
    max-width: 100%;
}

.toGallery .back-btn::before {
    inset: -400%;
}

/* ===== curved divider ===== */
.curve-divider {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    margin-top: -1px;
    /* 隙間防止 */
}

.curve-divider::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 24px;

    box-shadow: 0 -5px 2px rgba(0, 0, 0, 0.389);
    pointer-events: none;
    z-index: 2;
}

.curve-divider svg {
    transform: scaleY(-1);
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

/* ===== bottom area ===== */
.bottom-actions {
    background: #ffffff;
    padding: 40px 16px 64px;
    text-align: center;
}

/* 戻るボタン */
.back-btn {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;

    width: 270px;
    height: 64px;
    border-radius: 999px;
    /* ← 形状はここ */
    overflow: hidden;
    /* ← クリップ */
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.back-btn::before {
    content: "";
    position: absolute;
    inset: -200%;
    /* 少し大きめにして回転で欠けないように */
    background: conic-gradient(from 0deg,
            #ff5f6d,
            #ffc371,
            #47c9ff,
            #7b6cff,
            #ff5f6d);
    animation: spin 3s linear infinite;
}

.back-btn__inner {
    position: absolute;
    inset: 3px;
    /* ← 枠の太さ */
    background: #ffffff;
    border-radius: inherit;
    display: grid;
    place-items: center;

    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: #111;
    z-index: 1;
}

.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.footer .logo {
    width: 32%;
    margin: 6rem auto 3rem;
}

@media screen and (max-width:767px) {
    .footer .logo {
        width: 76%;
        margin: 4rem auto 2rem;
    }
}