@charset "UTF-8";

/* 共通セレクター */
html {
    font-size: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Noto Serif Japanese", serif;
    background-image: url(../img/washi4.jpg);
    background-repeat: repeat;

}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

footer {
    color: #fff;
    background-color: #161C2D;
}

/* ----------------------- */

/* 予約ボタン */
img.yoyaku-buttan-2 {
    margin-top: 150px;
    width: 50px;
    position: fixed;
    right: 50px;
    transition: transform 0.3s ease;
}

img.yoyaku-buttan-2:hover {
    opacity: 0.5;
}

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

/* トップに戻るボタン */
.backToTop-img {
    margin-top: 150px;
    width: 50px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    transition: transform 0.3s ease;
}

.backToTop-img:hover {
    opacity: 0.5;
}

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

/* -----header------ */
header {
    background: #fff;
    height: 115px;
    position: sticky;
    top: 0;
    z-index: 100000;
}

.top-logo img {
    margin-top: 50px;
}

.top-logo a {
    margin-bottom: 30px;
    margin-left: 72px;
    width: 167px;
    height: 41px;
    transition: 1s ease;
}

.top-logo img:hover {
    opacity: 0.6;
}



div .top-header {
    display: flex;
}

/*firstview image*/
.fv {
    width: 78.8%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.fv img {
    width: 100%;
}

/* mov */
.mov {
    width: 78.8%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    margin-top: -60px;
}

.mov iframe {
    pointer-events: none;
    width: 100%;
    height: 100%;

}

/* ------------- */

/* スクロールアニメーション＝＝＝＝＝＝＝＝＝ */

/*スクロールダウン全体の場所*/
.t-scrolldown {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    bottom: 50px;
    left: 90%;
}

/*Scrollテキストの描写*/
.t-scrolldown span {
    /*描画位置*/
    position: absolute;
    left: 10px;
    bottom: 10px;
    /*テキストの形状*/
    color: #a58e60;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.t-scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    left: -4px;

    /*丸の形状*/
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a58e60;

    /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
        circlemove 1.6s ease-in-out infinite,
        cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
    0% {
        bottom: 80px;
    }

    100% {
        bottom: -5px;
    }
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1;
    }

    80% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}

/* 線の描写 */
.t-scrolldown:after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線の形状*/
    width: 1px;
    height: 100px;
    background: #a58e60;
}

/* ↑スクロールアニメーションここまで＝＝＝＝＝＝＝＝＝ */


/* ハンバーガーボタン */
.hum-button {
    width: 30px;
    height: 25px;
    position: fixed;
    top: 50px;
    right: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10000;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.line {
    display: block;
    position: absolute;
    height: 2px;
    width: 150%;
    background: #A58E60;
    border-radius: 1px;
    transition: all 0.3s ease;
    left: 0;
    transform-origin: center;
}

.hum-button.active .line {
    background: #fff;
}

.top-close {
    text-align: right;
    margin-right: 0.55rem;
}


.line1 {
    top: 0;
}

.line2 {
    top: 50%;
    transform: translateY(-50%);
}

.line3 {
    bottom: 0;
}


.hum-button.active .line1 {
    transform: rotate(45deg);
    top: 11px;
}

.hum-button.active .line2 {
    opacity: 0;
}

.hum-button.active .line3 {
    transform: rotate(-45deg);
    bottom: 11px;
}

/* ナビゲーションメニュー（非表示） */
.nav-menu {
    display: none;
    position: absolute;
    top: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffff;
    width: 280px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 99999;
}

.nav-menu.active {
    display: block;
}

/* メニューリスト */
.top-heder-nav {
    /* list-style: none; */
    padding: 0;
    margin: 20px 0 0 50px;

}

.top-heder-nav li {
    margin: 10px 0;
    font-size: 1.5rem;
}

.top-heder-nav li {
    margin-top: 10px;
    width: 160px;
}

.nav-menu {
    left: auto;
    width: 300px;
    height: 650px;
    color: #FFFFFF;
    padding: 60px 20px 20px;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    position: fixed;
    overflow-y: auto;
    z-index: 1000;
}


.reservation {
    list-style: none;

}




/* hovear */
.reservation a {
    color: #ffff;
    border-style: solid;
    border-width: 1px;
    padding: 5px 10px 5px 10px;
}

.reservation a:hover {
    color: #A58E60;
    border-style: solid;
    border-width: 1px;
    padding: 5px 10px 5px 10px;
}

/* -------------- */
/* ---hover----- */
.reservation-2 {
    border-bottom: 1px dashed #fff;
    transition: background-color 0.3s, color 0.3s;
}

.reservation-2:hover {
    border-bottom: 1px dashed #A58E60;
}

/* ------------------ */
.reservation-2 a {
    color: #FFFFFF;
    padding-bottom: 5px;
}

/* ---hober------- */
.menu-list li {
    border-bottom: 1px dotted #888;
    padding: 12px 0;
    list-style: none;
}


.menu-list li:last-child {
    border-bottom: none;
}

.menu-list li {
    border-bottom: 1px dotted #888;
    padding: 12px 0;
    list-style: none;
}

.menu-list li:last-child {
    border-bottom: none;
}

.top-img-logo {
    margin-top: 30px;
    margin-left: 60px;
}

.nfo-menu-qa-form {
    display: none;
}

.menu-logo img {
    margin-top: 10px;
}

.menu-logo img:hover {
    opacity: 0.5;
}


/*メニュー内のアコーディオン*/
.menu-sub {
    display: none;
}

.menu-sub table {
    width: 100%;
    margin-top: -10px;
}

.menu-sub table {
    display: flex;
    flex-direction: column;
}


/* ---hober--- */
.menu-sub a {
    color: #fff;
    transition: color 1s;
    font-size: 0.8rem;
    transition: background-color 1s, color 1s;
}

.menu-sub a:hover {
    font-size: 0.8rem;
    text-decoration: underline;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 3s ease;
}

.menu-sub a:hover::after {
    transform: scaleX(1);
}


/* -------------- */






/*footer*/
footer {
    background: #161C2D;
    color: #fff;
}

.f-container {
    max-width: 1280px;
    margin: 0 auto;
}

.footer-df {
    display: flex;
    justify-content: space-between;
}

.footer-address {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.footer-address {
    font-style: normal;
}

.address2 {
    white-space: nowrap;
}

.top-footer-sitemap {
    margin-top: 50px;
}

.top-footer-sitemap__column {
    display: flex;
    gap: 11.842%;
    white-space: nowrap
}

.top-footer-sitemap__column a {
    color: #fff;
}

/* ホバーフッターのカーソル合わせた際色が薄くなる */
.top-footer-content-title,
.top-footer-content-sub-title {
    color: #fff;
}


.top-footer-content-title:hover,
.top-footer-content-sub-title:hover {
    opacity: 0.6;
}

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

.top-footer-sitemap__column ul {
    margin: 0 0 2rem;
    padding: 0;
}

.top-footer-sitemap__column li {
    list-style-position: inside;
}

.top-footer-sitemap__column li:first-child {
    list-style-type: none;
}

.f-container h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}


.slider img {
    width: 100%;
    margin: 0 auto;
    height: auto;
    display: block;

}


/* -----main------ */

/* --コンセプト-- */
.top-concept {
    max-width: 1520px;
    margin: 0 auto;
}

.top-catchcopy {
    width: fit-content;
    margin: 300px auto;
}

.top-catchcopy h2 {
    display: inline-block;
    text-align: center;
    font-size: clamp(1.5rem, 1.333rem + 0.347vw, 1.75rem);
    font-weight: normal;
    line-height: 2;
}

.img-center {
    display: block;
    width: 75%;
    max-width: 1520px;
    height: auto;
    aspect-ratio: 3 / 2;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.top-room-concept {
    color: #fff;
    background-image: url(../img/top2_kuturogu.webp);
    max-width: 100%;
    height: 640px;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 150px;

}


.top-room-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 70px;
}


.top-room-text {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 70px;
}

.top-room-main-title,
.top-room-sub-title,
.top-room-sub-text {
    writing-mode: vertical-rl;
}


.top-room-button img {
    width: 200px;
    height: 110px;
}

.top-room-button:hover,
.top-eat-button:hover,
.top-enjoy-button:hover {
    filter: brightness(1.2);
    transition: filter 0.3s ease;
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.top-room-main-title {
    font-size: 5rem;
    font-weight: normal;

}

.top-room-sub-title {
    font-size: 1.75rem;
    font-weight: normal;
}

.top-room-sub-text {
    font-size: clamp(1rem, 0.333rem + 0.972vw, 1.25rem);
    ;
    font-weight: normal;
    letter-spacing: 4px;
    margin-top: 60px;
    line-height: 2;
}

/* 文字が上に少し上がるアニメーション　js */
.text-animate {
    opacity: 0;
    animation: fadeIn 5s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 10s ease, transform 5s ease;
}

.fade-in-up.visible {
    opacity: 0.1;
    transform: translateY(0);
}


/* ------ */

/* --eat-- */

.top-eat-concept {
    color: #fff;
    background-image: url(../img/top5_eat.webp);
    width: 100%;
    height: 640px;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 150px;
    margin-top: 300px;

}

.top-eat-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 70px;
}


.top-eat-text {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 70px;
}

.top-eat-main-title,
.top-eat-sub-title,
.top-eat-sub-text {
    writing-mode: vertical-rl;
}

.top-eat-button img {
    width: 200px;
    height: 110px;
}

.top-eat-main-title {
    font-size: 5rem;
    font-weight: normal;

}

.top-eat-sub-title {
    font-size: 28px;
    font-weight: normal;
}

.top-eat-sub-text {
    font-size: clamp(1rem, 0.333rem + 0.972vw, 1.25rem);
    font-weight: normal;
    letter-spacing: 4px;
    margin-top: 60px;
    line-height: 2;
}

/* ------------ */

/* ---enjoy--- */

.top-enjoy-concept {
    color: #fff;
    background-image: url(../img/top8_nami.webp);
    width: 100%;
    height: 640px;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 150px;
    margin-top: 300px;

}


.top-enjoy-concept img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}


.top-enjoy-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 70px;
}


.top-enjoy-text {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 70px;
}


.top-enjoy-main-title,
.top-enjoy-sub-title,
.top-enjoy-sub-text {
    writing-mode: vertical-rl;
}

.top-enjoy-button img {
    width: 200px;
    height: 110px;
}

.top-enjoy-main-title {
    font-size: 5rem;
    font-weight: normal;

}

.top-enjoy-sub-title {
    font-size: 28px;
    font-weight: normal;
}

.top-enjoy-sub-text {
    font-size: clamp(1rem, 0.333rem + 0.972vw, 1.25rem);
    font-weight: normal;
    letter-spacing: 4px;
    margin-top: 60px;
    line-height: 2;
}

/* --------------- */

/* ---slider----- */

.slider {
    position: relative;
    z-index: 1;
}

.slider img {
    margin: 300px 0;
    max-width: 300px;
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.slider img:hover {
    filter: grayscale(0%);
}

.top-slider {
    overflow-x: hidden;
}

/* -------------- */

/* 共通画像ホバー */
.top-img-hover {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.top-img-hover:hover {
    /* transform: scale(0.9) */
    filter: grayscale(0%);
}

/* ーーーーーーー */

/* ---footer--- */

.top-footer {
    margin-top: 300px;
}

.top-footer-nav {
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    gap: 11.842%;
}

.top-footer-logo {
    max-width: 30%;
}



.top-footer-logo img {
    margin-top: 80px;
    margin-bottom: 50px;
}

.top-footer-logo img:hover {
    opacity: 0.5;
}


.top-footer-sitemap {
    max-width: 70%;
    margin-bottom: 140px;
    width: 60%;
}


.top-footer-content-title {
    font-size: 2rem;
    line-height: 5rem;
    font-weight: normal;

}

.top-footer-content-sub-title li {
    font-size: 1rem;
    line-height: 2rem;
    font-weight: normal;
    list-style: none;
}

.top-footer-content-sub-title a {
    text-decoration: none;
}

.top-footer-logo {
    padding-bottom: 80px;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}


/* ------------ */

/*modaalを使ったモーダル表示用*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
    display: none;
}

.modaal-wrapper {
    z-index: 2000000;
}

.modaal-close {
    position: absolute;
    top: 0;
    right: 0;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
    background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
    font-size: 1.2rem;
    text-align: center;
    margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
    padding: 0;
}

.rizabt a {
    display: block;
    background: #000;
    color: #fff;
    height: 50px;
    text-align: center;
    padding: 10px 0 10px 0;
    font-size: 1rem;
    font-weight: normal;
    transition: background-color 0.3s, color 0.3s;
}


.rizabt a:hover {
    background-color: #A58E60;
}


/* ---------------------- */




/* ---客室予約ページ--- */
.yoyaku-h2,
.yoyaku-h3,
.yoyaku-p {
    text-align: center;
    font-weight: normal;

}

.yoyaku-h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.yoyaku-h3 {
    font-size: 1rem;
    margin-top: 25px;
}

.yoyaku-text {
    border-top: solid 1px;
    background-color: rgba(239, 224, 197, 0.3);
}

.yoyaku-buttan {
    margin-top: 50px;
    margin-bottom: 20px;
    height: 50px;
    text-align: center;

}

.jyaran,
.rakuten {
    padding: 20px 50px 20px 50px;
    color: #fff;
    background-color: #161C2D;
    border: solid #fff 1rem;
    transition: background-color 0.3s, color 0.3s;

}

.jyaran:hover,
.rakuten:hover {
    background-color: #888;


}


.jyaran {
    margin-right: 100px;
}

.yoyaku-p-a {
    border-bottom: solid 1px #fff;
    color: #000;
}

.yoyaku-p-a:hover {
    border-bottom: solid 1px #161C2D;
}

/* ------------------ */


@media (max-width:896px) {
    .pc-only {
        display: none;
    }

    /* 予約ボタンオフ */
    img.yoyaku-buttan-2 {
        display: none;
    }


    .top-logo {
        padding-top: 0px;
    }

    .top-logo a {
        margin-left: 0px;
    }

    /* ---hedear--- */

    header {
        height: 92.5px;
    }

    /* メニュー */
    .hum-button {
        top: 15px;
    }

    .nav-menu {
        top: -2px;
    }


    /* ーーーーーー */

    /* ---yoyaku-buttan--- */
    .yoyaku-buttan {

        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .jyaran,
    .rakuten {
        width: 300px;
        margin-right: 0px;
    }



    /* ------------------- */
    .fv,
    .mov {
        width: 100%;
    }

    .top-logo {
        text-align: center;

    }

    .top-logo img {
        margin-top: 10px;
        margin-bottom: 0;
        margin-left: 0;
    }

    .top-catchcopy {
        margin: 0 auto;
    }


    .top-catchcopy h2 {
        font-size: clamp(14px, 16px, 24px);
        line-height: 3;
    }


    /* ----------------- */

    /* ---main--- */

    .top-room-concept {
        background-image: url(../img/top_kuturogu_sp.webp);
    }

    .msg-mb {
        display: block;
        margin: 0 auto 100px;
        text-align: center;
    }

    .sp-only-1 {
        margin-bottom: 100px;
        line-height: 2rem;
    }

    .sp-only-1 h2 {
        font-size: clamp(16px, 1.75rem, 2rem);
        font-weight: normal;
        letter-spacing: 4px;
        line-height: 2;

    }

    .sp-only-1 h3 {
        font-size: clamp(14px, 1.5rem, 24px);
        line-height: 3;
        font-weight: normal;
        letter-spacing: 4px;
        /* white-space: nowrap; */
    }

    .sp-only-1 p {
        line-height: 2.5;
    }

    .top-catchcopy h2 {
        text-align: center;
    }

    .top-catchcopy {
        margin: 150px auto 130px;
    }

    .inner {
        padding-left: 50px;
        padding-right: 50px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .top-concept-img img {
        max-width: 70%;
        display: block;
        margin: 100px auto;
    }

    .top-concept {
        margin: 0 20px;
    }

    .top-sp-title,
    .top-sp-title-sav {
        text-align: center;

    }

    .top-text-sp {
        font-size: 1.5rem;
        margin-top: 3.125rem;
        margin-bottom: 3.125rem;
    }

    .top-sp-title-sav {
        font-size: 1rem;
        line-height: 2rem;
        margin-bottom: 3.125rem;
    }

    /* ーーースマホ時非表示テキストーーー */
    .top-room-text,
    .top-eat-text,
    .top-enjoy-text {
        display: none;
    }



    .slider img {
        max-width: 80%;
        margin: 300px auto 0;
        text-align: center;
    }

    .top-eat-concept {
        background-image: url(../img/top_eat-m.webp);
    }



    /* ---------- */

    /* ---fodear--- */


    .top-footer-sitemap {
        width: 0;
    }

    .top-footer-sitemap__column {
        display: none;
    }

    .footer-df {
        justify-content: center;
    }

    .top-footer-logo {
        margin-top: 70px;
    }

    .top-footer-nav {
        gap: 0;
    }


    .footer-address {
        text-align: center;
    }

    .address {
        line-height: 2;
    }


}

/* --pc版--- */
@media (min-width:897px) {

    /* --menu--- */
    .hum-button {
        top: 50px;
        right: 80px;
    }

    .top-close {
        text-align: right;
        margin-right: 3rem;
    }

    /* --------------- */
    .img-center {
        max-width: 70%;
        height: 640px;
        margin: 0 auto;
        object-fit: cover;
        text-align: center;
        margin-bottom: 600px;
    }

    .top-room-sp,
    .top-eat-sp,
    .top-enjoy-sp,
    .sp-only {
        display: none;
    }

}

@media (max-width:884px) {
    .top-footer-nav {
        gap: 5%;
    }

    .top-footer-logo img {
        max-width: 100%;
    }


    .top-footer-sitemap__column {
        gap: 25px;
    }

    .top-footer-content-title {
        font-size: 1rem;
    }


    .top-footer-content-sub-title {
        font-size: 0.8rem;
    }
}



@media (max-width:1370px) {
    .top-footer-nav {
        gap: 5%;
    }

    .top-footer-sitemap__column {
        gap: 30px;
    }

    .top-footer-content-title {
        font-size: 1.5rem;
    }


    .top-footer-content-sub-title {
        font-size: 0.9rem;
    }
}