/* ===== 下層ページ: メインビジュアル ===== */
.sub-mv {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.sub-mv__inner,
.sub-mv__bg {
    height: 100%;
}

.sub-mv__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sub-mv__copy {
    position: absolute;
    display: flex;
    right: 12%;
    top: 45%;
    width: 354px;
    height: 100px;
    z-index: 1;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.4s ease, transform 1.1s ease-out;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.sub-mv__copy.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sub-mv__title {
    font-size: 36px;
    color: #fff;
}

/* メッセージセクション */
.sub-message {
    position: relative;
    background: #fff;
    min-height: 100vh;
    padding: 200px 20px 400px;
    --wave-lift: 30px;
}

.sub-message__wave {
    position: absolute;
    left: 0;
    top: calc(-119px - var(--wave-lift));
    width: 100%;
    height: 120px;
    fill: #fff;
    pointer-events: none;
}

.sub-message::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--wave-lift) + 4px);
    background: #fff;
    pointer-events: none;
}

.sub-message__inner {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.sub-message__pin {
    display: contents;
}

.sub-message__title {
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    font-size: 26px;
    margin: 0;
    text-align: center;
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    z-index: 50;
    pointer-events: none;
}

.sub-message__title.is-visible {
    opacity: 1;
    transform: translateY(-50%);
}

.sub-message__text {
    font-size: 20px;
    line-height: 80px;
    margin-top: 100vh;
    margin-left: calc(50% - 50vw + 20px);
    margin-right: calc(50% - 50vw + 20px);
}

/* ===== カードスワイプ（TOPの .guide__* と同仕様）===== */
.guide__image-container {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
}

.guide__background-box {
    position: absolute;
    bottom: -10px;
    left: -10px;
    z-index: 1;
    width: 100%;
}

.guide__stack {
    position: relative;
    width: 100%;
    aspect-ratio: 872 / 546;
    z-index: 2;
}

.guide__card {
    --tilt: 0deg;
    position: absolute;
    inset: 0;
    transform-origin: 100% 100%;
    transform: rotate(0deg);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}

.guide__card.is-top {
    transform: rotate(var(--tilt));
}

.guide__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.guide__card.is-dragging {
    cursor: grabbing;
    transition: none;
}

.guide__card.is-animating {
    transition: transform 1s ease, opacity 1s ease;
}

.has-guide-cursor .guide__card {
    cursor: none;
}

.guide-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    pointer-events: none;
    will-change: transform;
}

.guide-cursor__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    background: rgba(62, 149, 168, 0.75);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    opacity: 0;
    transform: scale(0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.guide-cursor.is-active .guide-cursor__circle {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .guide-cursor__circle {
        transition: opacity 0.3s ease;
        transform: scale(1);
    }
}

.message__window {
    width: 20%;
    height: 240px;
    border-radius: 100px;
    overflow: hidden;
    margin: 0 auto 40px 0;
    position: relative;
    z-index: 1;
    -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side at center, #000 30%, transparent 100%);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.message__window.is-active {
    opacity: 1;
}

.sub-message__inner>.message__window:first-of-type {
    position: fixed;
    left: 100px;
    top: 25vh;
    margin: 0;
    z-index: 5;
}

.sub-message__img01 {
    width: 180%;
    height: 100%;
}

.sub-message__img01 img {
    object-fit: cover;
    display: block;
}

.sub-message__inner>.message__window:last-of-type {
    position: fixed;
    right: 100px;
    top: 50vh;
    margin: 0;
    z-index: 5;
}

.sub-message__img02 {
    width: 180%;
    height: 100%;
    position: absolute;
    left: -190px;
}

.sub-message__img02 img {
    object-fit: cover;
    display: block;
}

.sub-message__img01 {
    transition: transform 2.5s ease;
    transform: translateX(0);
}

.message__window.is-active .sub-message__img01 {
    transform: translateX(-30px);
}

.sub-message__img02 {
    transition: transform 2.5s ease;
    transform: translateX(60px);
}

.message__window.is-active .sub-message__img02 {
    transform: translateX(30px);
}

.shop {
    position: relative;
}

.shop__wave01 {
    position: absolute;
    left: 0;
    top: -90px;
    width: 100%;
    height: 120px;
    fill: #3E95A8;
    z-index: 2;
    pointer-events: none;
}

.shop {
    background-color: #3E95A8;
}

.shop__inner {
    width: 100%;
}

.shop__contents01,
.shop__contents02 {
    display: flex;
    width: min(878px, calc(100% - 40px));
    margin: 0 auto;
}

.shop__contents01 {
    position: sticky;
    top: 0;
    min-height: 100vh;
    align-items: center;
}

/* ===== 2枚のパネルは「入りは時間 / 出はスクロール」で切り替える ===== */
.shop {
    --fade-out: 0.25;
    --fade-in-dur: 1.5s;
}

.shop__contents01 .shop__text-container,
.shop__contents01 .shop__img-container,
.shop__contents02 .shop__text-container,
.shop__contents02 .shop__img-container {
    opacity: 0;
    transition: opacity var(--fade-in-dur) ease;
}

.shop__contents01.is-visible .shop__text-container,
.shop__contents01.is-visible .shop__img-container,
.shop__contents02.is-visible .shop__text-container,
.shop__contents02.is-visible .shop__img-container {
    opacity: 1;
}

.shop__contents01 {
    opacity: calc((1 - var(--p1, 0)) / var(--fade-out));
}

.shop__contents02 {
    position: sticky;
    top: 0;
    min-height: 100vh;
    align-items: center;
    z-index: 1;
    opacity: calc((1 - var(--p2, 0)) / var(--fade-out));
}

@media (prefers-reduced-motion: reduce) {

    .shop__contents01 .shop__text-container,
    .shop__contents01 .shop__img-container,
    .shop__contents02 .shop__text-container,
    .shop__contents02 .shop__img-container {
        transition: none;
    }
}

/* ===== 各パネルを固定したまま見せておく距離（＝演出の尺） ===== */
.shop__contents01-spacer {
    height: 90vh;
}

.shop__contents02-spacer {
    height: 200vh;
}

.shop__text-container {
    width: 50%;
}

.shop__text {
    color: #fff;
    line-height: 62px;
    text-align: center;
}

.shop__contents03 .shop__text {
    padding-bottom: 340px;
}

.shop__img-container {
    width: 50%;
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop__logo-img01 {
    margin: 0 auto;
}

.shop__logo-img02 {
    display: block;
    width: 44%;
    margin: 0 auto;
}

.shop__wave03 {
    --wave03-top: #3E95A8;
    --wave03-bottom: #fff;
    background: linear-gradient(to bottom, var(--wave03-top) calc(100% - 2px), var(--wave03-bottom) calc(100% - 2px));
    fill: #fff;
    transition: --wave03-top var(--aqua-dur) ease;
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

.shop__contents03 {
    background-color: #fff;
    width: 100%;
    position: relative;
    top: 0px;
    z-index: 1;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== 最後の白い帯の上だけ、マウスポインタを船にする ===== */
.shop__contents03 {
    cursor: url(../image/boat-cursor-right.png) 48 22, auto;
}

.shop__contents03.is-sailing-left {
    cursor: url(../image/boat-cursor-left.png) 48 22, auto;
}

.shop__sakura {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.shop__color-text {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 1;
}

.shop__text-last1,
.shop__text-last2 {
    color: #3E95A8;
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.shop__text-last1.is-visible,
.shop__text-last2.is-visible {
    opacity: 1;
}

/* ===== 最後のメッセージ(.shop__contents03)が見えている間、周囲をロゴの水色に ===== */
:root {
    --aqua: #A1D6D9;
    --aqua-dur: 1.2s;
}

.header {
    transition: background-color var(--aqua-dur) ease, color 0.4s ease, opacity 0.4s ease;
}

.header__bar {
    transition: transform 0.5s ease, background-color var(--aqua-dur) ease;
}

.shop,
.footer {
    transition: background-color var(--aqua-dur) ease;
}

.header__wave,
.shop__wave01,
.footer__wave {
    transition: fill var(--aqua-dur) ease;
}

@property --wave03-top {
    syntax: "<color>";
    inherits: false;
    initial-value: #3E95A8;
}

@property --wave03-bottom {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff;
}

html.is-aqua {
    background-color: var(--aqua);
}

.is-aqua .header,
.is-aqua .header__bar,
.is-aqua .shop,
.is-aqua .footer {
    background-color: var(--aqua);
}

.is-aqua .header__wave,
.is-aqua .shop__wave01,
.is-aqua .footer__wave {
    fill: var(--aqua);
}

.is-aqua .header.is-dark .header__wave {
    fill: var(--aqua);
}

.is-aqua .shop__wave03 {
    --wave03-top: var(--aqua);
}

/* ===== フッターの波を海のうねりのように動かす（このページのみ） ===== */
.footer {
    overflow-x: clip;
}

.footer__wave {
    --swell-x: 6vw;
    --swell-y: 20px;
    width: calc(100% + (var(--swell-x) + 10px) * 2);
    left: calc((var(--swell-x) + 10px) * -1);
    transform-origin: bottom center;
    animation: footerWaveSwell01 7s ease-in-out infinite;
}

.footer__wave--02 {
    --swell-x: 8vw;
    --swell-y: 12px;
    animation: footerWaveSwell02 11s ease-in-out infinite;
}

.footer__wave--03 {
    --swell-x: 9vw;
    --swell-y: 15px;
    animation: footerWaveSwell03 15s ease-in-out infinite;
}

@keyframes footerWaveSwell01 {

    0%,
    100% {
        transform: translate3d(calc(var(--swell-x) * -1), 0, 0) scaleY(1);
    }

    50% {
        transform: translate3d(var(--swell-x), calc(var(--swell-y) * -1), 0) scaleY(1.18);
    }
}

@keyframes footerWaveSwell02 {

    0%,
    100% {
        transform: translate3d(var(--swell-x), calc(var(--swell-y) * -0.7), 0) scaleY(1.12);
    }

    50% {
        transform: translate3d(calc(var(--swell-x) * -1), var(--swell-y), 0) scaleY(0.9);
    }
}

@keyframes footerWaveSwell03 {

    0%,
    100% {
        transform: translate3d(calc(var(--swell-x) * -1), var(--swell-y), 0) scaleY(0.94);
    }

    50% {
        transform: translate3d(var(--swell-x), calc(var(--swell-y) * -1), 0) scaleY(1.16);
    }
}

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

    .footer__wave--02,
    .footer__wave--03 {
        display: none;
    }
}

@media (max-width: 768px) {

    /* ===== SVGの波（全4種）: SPでもPCと同じ比率を保つ ===== */
    .sub-message__wave,
    .shop__wave01 {
        height: 8.333vw;
    }

    .shop__wave01 {
        top: -6.25vw;
    }

    .footer__wave {
        --swell-y: 1.389vw;
    }

    .footer__wave--02 {
        --swell-y: 0.833vw;
    }

    .footer__wave--03 {
        --swell-y: 1.042vw;
    }

    .sub-message__wave {
        top: -19.444vw;
    }

    .sub-message::before {
        top: auto;
        bottom: 100%;
        height: calc(11.111vw + 4px);
    }

    /* ===== フォントサイズ: TOP（css/style.css）のSP縮小率に合わせる ===== */

    .sub-mv {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }

    .sub-mv__inner,
    .sub-mv__bg {
        height: 100%;
    }

    .sub-mv__bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100lvh;
        z-index: -1;
    }

    .sub-mv__bg img {
        height: 100%;
        object-fit: cover;
        object-position: 40% center;
    }

    .sub-mv__copy {
        z-index: 1;
    }

    .sub-mv__title {
        font-size: 50px;
    }

    .sub-mv__copy {
        top: 78%;
        left: 50%;
        right: auto;
        transform: translate(-50%, 40px);
    }

    .sub-mv__copy.is-visible {
        transform: translate(-50%, -50px);
    }

    .sub-message__pin {
        --pin-p: 0;
        --pin-top: calc(65px + 6.944vw + 12px);
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 24px;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        transform: translateY(calc((50vh - 50%) * (1 - var(--pin-p)) + var(--pin-top) * var(--pin-p)));
        z-index: 40;
        pointer-events: none;
    }

    .sub-message__title {
        font-size: 20px;
        position: static;
        opacity: 0;
        transition: opacity 0.8s ease;
        margin-top: 20px;
    }

    .sub-message__title.is-visible {
        opacity: 1;
        transform: none;
    }

    .guide__image-container {
        width: 76%;
        max-width: 440px;
        margin: 0;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    .guide__image-container.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .sub-message__text {
        font-size: 16px;
        line-height: 60px;
    }

    .shop__text {
        font-size: 14px;
        line-height: 40px;
    }

    .shop__contents01,
    .shop__contents02 {
        width: 90%;
    }

    .shop__contents01-spacer {
        height: 140vh;
    }

    .shop__contents02-spacer {
        height: 300vh;
    }

    .shop__text-container {
        width: 100%;
    }

    .shop__text-last1,
    .shop__text-last2 {
        font-size: 16px;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .shop__text {
        font-size: 15px;
        line-height: 50px;
    }

    .shop__text-last2 {
        line-height: 180%;
    }

}