@charset "UTF-8";

/* =========================================================
   温泉ページ固有スタイル (css/onsen.css)
   foundation.css の変数・ルールに完全準拠
   ========================================================= */

/* =========================================================
   ヒーローセクション
   ========================================================= */
.p-onsen-hero {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}

.p-onsen-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 黒・乗算・30% の薄い暗幕 */
.p-onsen-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000;
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
}

/* =========================================================
   温泉イントロセクション
   ========================================================= */
.p-onsen-intro {
    padding: var(--space-xl) 0 100px;
}

.p-onsen-intro__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.p-onsen-intro__desc {
    font-size: var(--base-fs);
    line-height: var(--base-lh);
    letter-spacing: var(--base-ls);
    margin-bottom: 0;
}

.p-onsen-intro h2 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: var(--space-m);
}

/* =========================================================
   アンカーナビゲーション
   ========================================================= */
.p-onsen-nav {
    margin-top: var(--space-l);
}

.p-onsen-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.p-onsen-nav__list a {
    font-size: 20px;
    letter-spacing: 0.1em;
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 4px;
    line-height: 1.8;
    transition: opacity 0.3s;
}

.p-onsen-nav__list a:hover {
    opacity: 0.6;
}

/* =========================================================
   大浴場・風呂セクション（共通）
   ========================================================= */
.p-onsen-bath {
    padding: 20px 0;
}

/* セクション間マージン：20px */
#oboro + #tsukimachi,
#tsukimachi + #tsuru,
#tsuru + #overview {
    margin-top: 20px;
}

/* 最初の見出し */
.p-onsen-bath:first-child h2 {
    margin-top: 30px;
    font-weight: 600;
}


.p-onsen-bath__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.p-onsen-bath__photo {
    margin-top: var(--space-m);
}

.p-onsen-bath__photo img {
    width: 100%;
    height: auto;
    display: block;
}

.p-onsen-bath__time {
    margin-top: 50px;
    font-size: var(--base-fs);
    letter-spacing: var(--base-ls);
    text-align: center;
}

.p-onsen-bath__note {
    margin-top: 10px;
    font-size: 15px;
    letter-spacing: var(--base-ls);
    line-height: 2;
    text-align: center;
}

.p-onsen-bath__btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-l);
}

/* 縦積み2枚目以降の写真：上に隙間 */
.p-onsen-bath__photo + .p-onsen-bath__photo {
    margin-top: 6px;
}

/* ストリートビューリンク */
.p-onsen-bath__streetview {
    display: block;
    text-align: center;
    font-size: 15px;
    letter-spacing: var(--base-ls);
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 8px;
    transition: opacity 0.3s;
}

.p-onsen-bath__streetview:hover {
    opacity: 0.6;
}

/* ページ内画像グリッド（2枚並び） */
.p-onsen-bath__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: var(--space-m);
}

.p-onsen-bath__photos img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* =========================================================
   スパ・エステ バナー
   ========================================================= */
.p-onsen-spa-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
}

.p-onsen-spa-banner__link {
    position: relative;
    display: block;
    width: 100%;
    height: 275px;
    overflow: hidden;
    text-decoration: none;
}

.p-onsen-spa-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.p-onsen-spa-banner__link:hover .p-onsen-spa-banner__img {
    transform: scale(1.03);
}

/* バナー全体：縦中央寄せ */
.p-onsen-spa-banner__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    color: var(--white);
}

/* 1000pxコンテンツ幅に合わせて中央配置 */
.p-onsen-spa-banner__text-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 100px;
}

/* テキスト2行を縦積み・左揃え */
.p-onsen-spa-banner__text-group {
    text-align: left;
}

.p-onsen-spa-banner__sub {
    display: block;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.p-onsen-spa-banner__title {
    display: block;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   温泉概要セクション（カード形式）
   ========================================================= */
.p-onsen-overview {
    padding: var(--space-xl) 0 130px;
}

.p-onsen-overview__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

/* 概要カード */
.p-onsen-overview__card {
    background-color: #ccc3b4;
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
    padding: 80px var(--space-l) 110px;
    text-align: center;
}

/* カード内h2：padding-topで制御するためmarginをリセット */
.p-onsen-overview__card h2 {
    margin-top: 0;
}

/* 【泉質】【効能】リスト */
.p-onsen-overview__list {
    margin-top: var(--space-m);
}

.p-onsen-overview__list dt {
    font-size: var(--base-fs);
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-top: var(--space-s);
}

.p-onsen-overview__list dt:first-child {
    margin-top: 0;
}

.p-onsen-overview__list dd {
    font-size: var(--base-fs);
    line-height: var(--base-lh);
    letter-spacing: var(--base-ls);
    margin: 6px 0 0 0;
}

/* =========================================================
   スマホ版（768px以下 / 650pxカンプ基準）
   ========================================================= */
@media screen and (max-width: 768px) {

    /* ヒーロー */
    .p-onsen-hero {
        aspect-ratio: auto;
        height: 61.54vw;
    }

    /* SP共通：左右余白 40px = 6.15vw（650pxカンプ換算） */

    /* イントロ */
    .p-onsen-intro {
        padding: var(--sp-space-l) 0 10vw;
    }

    .p-onsen-intro__inner {
        padding: 0 6.15vw;
    }

    .p-onsen-intro__desc {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
        text-align: center;
    }

    .p-onsen-intro h2 {
        font-size: 6.15vw;
    }

    /* アンカーナビ：スマホでは縦並び・中央揃え */
    .p-onsen-nav {
        margin-top: var(--sp-h2-mt);
    }

    .p-onsen-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .p-onsen-nav__list a {
        font-size: var(--sp-base-fs);
        line-height: 2;
    }

    /* 大浴場・風呂セクション */
    .p-onsen-bath {
        padding: 10vw 0;
    }

    /* sectionのpadding-topがあるのでh2の上マージンは不要 */
    .p-onsen-bath h2 {
        margin-top: 0;
    }

    .p-onsen-bath__inner {
        padding: 0 6.15vw;
    }

    .p-onsen-bath__photo {
        margin-top: var(--sp-h2-mb);
    }

    /* 温泉画像：570×382px カンプ比率 */
    .p-onsen-bath__photo img {
        aspect-ratio: 570 / 382;
        width: 100%;
        object-fit: cover;
    }

    .p-onsen-bath__time {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
        text-align: center;
    }

    .p-onsen-bath__note {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
        text-align: center;
    }

    /* 2枚縦積み */
    .p-onsen-bath__photos {
        grid-template-columns: 1fr;
        gap: 3.08vw;
    }

    .p-onsen-bath__photos img {
        aspect-ratio: 570 / 382;
    }

    /* スパバナー */
    .p-onsen-spa-banner__link {
        aspect-ratio: 32 / 7;
        height: auto;
    }

    .p-onsen-spa-banner__text {
        display: none;
    }

    .p-onsen-spa-banner__link picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .p-onsen-spa-banner__img {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    .p-onsen-spa-banner__text-inner {
        padding-left: 6.15vw;
        padding-right: 6.15vw;
    }

    .p-onsen-spa-banner__sub {
        font-size: 4vw;
    }

    .p-onsen-spa-banner__title {
        font-size: 8vw;
    }

    /* 温泉概要 */
    .p-onsen-overview {
        padding: var(--sp-space-l) 0;
    }

    .p-onsen-overview__inner {
        padding: 0 6.15vw;
    }

    .p-onsen-overview__card {
        padding: 6.15vw 6.15vw;
    }

    /* カード内h2の上マージンをリセット（カードpaddingで制御） */
    .p-onsen-overview__card h2 {
        margin-top: 0;
    }

    .p-onsen-overview__list dt,
    .p-onsen-overview__list dd {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
    }

    /* SP：イントロのPC用改行を非表示 */
    .p-onsen-intro__desc .u-pc-br {
        display: none;
    }
}