@charset "UTF-8";

/* 共通 */
html {
    font-size: 100%;
}

body {
    background-image: url(../img/bg.webp);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;



}

.a {
    color: #000;
}

h2 {
    line-height: 0;
}

.shippori-mincho-regular {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
}

img {
    max-width: 100%;
}

.fs48 {
    font-size: 3rem;
    color: #628646;
    text-align: center;
    margin: 20% auto 4%;
}

.fs24 {
    color: #7B4F36;
    margin-top: 30px;
    font-size: 1.5rem;

}

.container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.imgsp {
    display: none;
}

.white {
    margin-top: 200px;
    opacity: 0;
}


/* ===== アニメーション発火 ===== */
.js-animate.show .title {
    opacity: 1;
    transform: translateY(0);
}

.js-animate.show .hotspring-line {
    transform: scaleX(1);
}

.js-animate.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* ===== 左パターン ===== */
.hotspring-title-l .hotspring-line {
    margin-right: auto;
    margin-right: calc(50% - 50vw);
    transform-origin: left;
}

/* ===== 右パターン ===== */
.hotspring-title-r .hotspring-line {
    margin-left: auto;
    margin-right: calc(50% - 50vw);
    transform-origin: right;
}

.hotspring-line {
    height: 2px;
    width: 70vw;
    margin-left: calc(50% - 50vw);
    background: #628646;

    transform: scaleX(0);
    transition: transform 1s ease;
    margin-bottom: 20px;
}






/* ーーーーーーーーーーーーーー温泉ーーーーーーーーーーーーーーーー */

.video-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ビデオ */
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 温泉タイトル */
.video-container .ti {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 温泉タイトル画像 */
.video-container .ti img {
    display: block;
    width: auto;
    height: auto;
}

.ti img {
    text-align: center;
}

/* リスト */

li {
    list-style-type: none;
}


.list ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.list {
    margin: 100px auto 10px;
    width: 75%;
    max-width: 1350px;
}

.list img {
    display: block;
    max-width: 100%;
    height: auto;
    padding: 0;
}

.list li {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */


/* ーーーーーーーーーーーーーー雪見風呂ーーーーーーーーーーーーーーーー */

/* 雪見風呂写真 */
.ph {
    margin-top: 70px;
    margin-right: 30%;
    object-fit: cover;
    width: 100%;
}


.sr p {
    margin-top: 30px;
    margin-bottom: 10px;
}

.sr img {
    margin-left: 600px;
    margin-bottom: 5px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーー大浴場ーーーーーーーーーーーーーーー */


.Lb img {
    margin-top: 70px;
}


.ll p {

    margin-top: 30px;
    margin-bottom: 10px;
}

.ll img {
    margin-top: 50px;

}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */


/* ーーーーーーーーーーーーーーー貸切風呂ーーーーーーーーーーーーーーー */

/* 貸切風呂文字 */
.pr p {
    margin-top: 200px;
    margin-bottom: 10px;
}

/* 右ライン */
.pr img {
    width: 40%;
    margin-bottom: 10px;
}

/* 貸切風呂説明 */

.Pb {
    margin-left: 30%;
}

table {
    border-collapse: collapse;
    border: 1px solid #7B4F36;
    margin-top: 30px;
    width: 50%;
}

table td,
table th {
    border: 1px solid #7B4F36;
    margin: 1px;
    padding: 1px;
    white-space: nowrap;
    margin-right: 5px;
}

th {
    font-weight: normal;
}

table td div {
    padding: 5px;
}

.r {
    margin: 50px -30px 150px 0;
    object-fit: cover;
    width: 100%;
}

/* 翡翠 */
.l {
    margin: 50px -30px 150px 0;
    width: 100%;
}

.rs {
    margin-right: -30px;
    width: 100%;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* スマホ版 */
@media(max-width:800px) {

    /* 共通 */
    .fs48 {
        font-size: 1.6rem;
    }

    .fs24 {
        font-size: .5rem;
        margin-top: 10px;

    }

    /* sp版pc版 */
    .imgsp {
        display: block;
        width: 100%;
        height: auto;
    }

    .imgpc {
        display: none;
    }

    /* 温泉 */
    .video-container video {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }


    .video-container {
        height: auto;
    }

    /* ビデオ */
    .video-container video {
        width: 100%;
        height: auto;
        max-height: 100vh;
        object-fit: contain;
    }

    /* 温泉タイトル */
    .video-container .ti {
        width: 250px;
        max-width: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .list ul {
        flex-direction: column;
    }

    .list {
        margin: 10px auto;
        width: 100%;
    }

    .list img {
        padding: 20px;
        width: 90%;
        height: auto;
    }



    /* 雪見風呂 */
    /* 右ライン */
    .sr img {
        margin-top: 20px;
        margin-bottom: .5px;
    }

    /* 雪見風呂文字 */
    .sr p {
        margin-top: 80px;
        margin-bottom: .5px;
    }

    /* 雪見風呂写真 */
    .ph {
        margin-top: 20px;
        width: 100%;

    }

    /* 大浴場 */
    .ll img {
        margin-left: -70px;
        margin-bottom: 10px;
    }

    .Lb img {
        margin-top: 5px;
    }

    .ll p {
        margin-top: 80px;
        margin-bottom: .5px;



    }

    /* 貸切風呂 */

    /* 貸切風呂文字 */
    .pr p {
        margin-top: 50px;
        margin-bottom: .5px;
    }

    .pr img {
        margin-left: 150px;
        margin-bottom: 10px;
    }

    /* 貸切風呂説明 */
    .Pb {
        width: 70%;
        margin-left: 30%
    }

    .Pb p {
        margin-top: 1px;
        margin-bottom: .5px;
    }

    table {
        width: 50%;
        margin-top: 10px;
    }


    .r {
        margin-top: 30px;
        margin-bottom: 10px;
        width: 100%;
    }

    .l {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }

    .rs {
        width: 100%;
    }

    table td div {
        padding: 1px;
    }


}


/*  フッターーーーーーーーーーーーーーーーーーーーーーーーーーー */
footer p {
    color: #000;
}

.sitemap {
    color: #000;
    font-size: 24px;
}