/* =============================================================
レスポンシブ
================================================================= */
@media only screen and (max-width: 1440px) {
    /*---幅-----------------------------------------------*/
    .container {
        width: 90%;
    }
}
@media only screen and (max-width: 1200px) {
    /* =============================================================
    コンセプト
    ================================================================= */
    .concept_block .block1 .enjoy_wrap,
    .concept_block .block1 .time_wrap {
        align-items: start;
    }
}




/*ナビ*/
@media only screen and (max-width: 1100px) {
    /* =============================================================
    header
    ================================================================= */
    .header_inner .right {
        gap: 0px;
    }
    .header_inner .right .main-nav {
        display: none;
    }
    .header_inner .right .language {
        margin-right: clamp(10px, 2.5vw, 20px);
    }
    /*ヘッダーハンバーガー*/
    .header_hamburger {
        display: block;
        position: relative;
        width: 80px;
        height: 80px;
        background: #00639d;
        aspect-ratio: 1;
        z-index: 2000;
    }
    button.header_hamburger:focus {
        outline: none;
        outline-offset: 0px;
    }

    .header_hamburger span {
        position: absolute;
        left: 50%;
            transform: translate(-50%);
        width: 55%;
        height: 2px;
        background: #fff;
        transition: .3s;
    }
    .header_hamburger span:nth-child(1) { top: 25px; }

    .header_hamburger span:nth-child(2) { top: 39px; }

    .header_hamburger span:nth-child(3) { top: 53px; }
    /* × */
    .header_hamburger.is-open span:nth-child(1) {
        top: 38px;
        transform: translateX(-50%) rotate(45deg);
    }
    .header_hamburger.is-open span:nth-child(2) {
        opacity: 0;
    }
    .header_hamburger.is-open span:nth-child(3) {
        top: 38px;
        transform: translateX(-50%) rotate(-45deg);
    }

    /* ===== 下部スクロール表示予約フォーム ===== */
    .reserve_fixed.is-show {
        flex-wrap: wrap;
    }
    #footer_wrap {
        padding: 40px 0 140px;
    }


    /* =============================================================
    アクセス
    ================================================================= */
    .access_block .howto_access_wrap {
        max-width: 600px;
        width: 95%;
        margin: 0 auto;
        grid-template-columns: 1fr;

    }


    /* =============================================================
    コンセプト
    ================================================================= */
    .concept_block .main_block .concept_wrap .box4 {
        min-height: 545px;
    }


}

@media only screen and (max-width: 990px) {

}

@media only screen and (max-width: 860px) {
    /* =============================================================
    コンセプト
    ================================================================= */
    .concept_block .main_block .concept_wrap .box4 {
        min-height: 450px;
    }
}

/*SP*/
@media only screen and (max-width: 800px) {
    #footer_wrap {
        padding: 40px 0 180px;
    }
    /* =============================================================
    トップページ
    ================================================================= */
    #mv_wrap h1.pc {
        display: none;
    }
    #mv_wrap h1.sp {
        display: block;
        margin: 0;
    }
    #mv_wrap .mv_text {
        width: 90%;
        height: 50%;
        min-height: 180px;
        top: 50%;
        left: 50%;
            transform: translate(-50%, -50%);
    }
    #mv_wrap .mv_text .title {
        font-size: clamp(44px, 12.5vw, 90px);
        margin-bottom: clamp(15px, 6vw, 35px);
    }
    #mv_wrap .mv_text p {
        font-size: clamp(18px, 4vw, 32px);
    }

    /*---NEWS & TOPICS------------------*/
    .top_news_block .bg {
        background-size: clamp(215px, 39vw, 305px);
    }
    .top_news_block .container .news_wrap {
        grid-template-columns: 1fr 1fr;
    }
    /*---コンセプト------------------*/
    .top_concept_block .concept_wrap {
        grid-template-columns: 1fr;
    }
    .top_concept_block .concept_wrap .left img {
        min-height: 310px;
    }
    .top_concept_block .concept_wrap .right {
        padding: clamp(30px, 5vw, 50px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 50px);
    }
    .top_concept_block .concept_wrap .right .df_btn a {
        margin: 0 auto;
    }
    /*---ルーム------------------*/
    .top_rooms_block .rooms_wrap {
        grid-template-columns: 1fr;
    }
    .top_rooms_block .rooms_wrap .left img {
        min-height: 310px;
    }
    .top_rooms_block .rooms_wrap .right {
        padding: clamp(30px, 5vw, 50px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 50px);
    }
    .top_rooms_block .rooms_wrap .right .df_btn a {
        margin: 0 auto;
    }
    /*---ダイニング------------------*/
    .top_dining_block .dining_wrap {
        grid-template-columns: 1fr;
    }
    .top_dining_block .dining_wrap .left {
        padding: clamp(30px, 5vw, 50px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 50px);
        order: 2;
    }
    .top_dining_block .dining_wrap .left .df_btn a {
        margin: 0 auto;
    }
    .top_dining_block .dining_wrap .right img {
        min-height: 310px;
    }




    /*---館内施設------------------*/

    .top_facilities_block {

        background-image: url(../img/top_facilities_sp1.webp), url(../img/top_facilities_sp2.webp);
        background-repeat: no-repeat;
        background-position: top 60px center, bottom 60px center;
        background-size: 63%, 57%;
        padding: clamp(250px, 55vw, 420px) 0 clamp(250px, 55vw, 420px);
    }
    .top_facilities_block .facilities_wrap {
        max-width: 300px;
    }
    .top_facilities_block .facilities_wrap .title {
        font-size: clamp(25px, 8vw, 40px);

    }
    .top_facilities_block .facilities_wrap p {
        font-size: clamp(16px, 3vw, 20px);
    }

    /*---アクセス------------------*/
    .top_access_block .access_wrap {
        grid-template-columns: 1fr;
    }
    .top_access_block .access_wrap .left img {
        min-height: 310px;
    }
    .top_access_block .access_wrap .right {
        padding: clamp(30px, 5vw, 50px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 50px);
    }
    .top_access_block .access_wrap .right .df_btn a {
        margin: 0 auto;
    }
    /*---FAQ------------------*/
    .top_faq_block .faq_wrap {
        display: grid;
        row-gap: clamp(20px, 5vw, 40px);
        grid-template-columns: 1fr;
    }

    /*---スタッフブログ------------------*/
    .top_blog_block .container .blog_wrap {
        grid-template-columns: 1fr 1fr;
    }


    /* =============================================================
    施設のご紹介
    ================================================================= */
    .facilities_block .facilities_wrap {
        grid-template-columns: 1fr;
        gap: 0;
        row-gap: 40px;
    }
    /* =============================================================
    アクセス
    ================================================================= */
    .access_block .information_wrap {
        grid-template-columns: 1fr;
        gap: 0;
        row-gap: 40px;
    }
    /* =============================================================
    コンセプト
    ================================================================= */
    .concept_block .main_block .concept_wrap .box1,
    .concept_block .main_block .concept_wrap .box2,
    .concept_block .main_block .concept_wrap .box3,
    .concept_block .main_block .concept_wrap .box4 {
        width: 100%;
    }
    .concept_block .main_block .concept_wrap .box1 {
        display: flex;
        justify-content: center;
        align-items: center;
        order: 1;
    }
    .concept_block .main_block .concept_wrap .box2 {
        order: 2;
    }
    .concept_block .main_block .concept_wrap .box3 {
        order: 4;
    }
    .concept_block .main_block .concept_wrap .box4 {
        display: flex;
        justify-content: center;
        align-items: center;
        order: 3;
        min-height: auto;
    }
    .concept_block .main_block .concept_wrap .box1 span {
        position: static;
        transform: none;
    }
    .concept_block .main_block .concept_wrap .box4 span {
        position: static;
        transform: none;
    }

    .concept_block .block1 .enjoy_wrap,
    .concept_block .block1 .time_wrap {
        grid-template-columns: 1fr;
    }
    .concept_block .block1 .time_wrap .left {
        order: 2;
    }

    /* =============================================================
    お食事
    ================================================================= */
    .dining_block .block1 .breakfast_wrap,
    .dining_block .block1 .breakfastphoto_wrap,
    .dining_block .block2 .dinner_wrap2 {
        grid-template-columns: 1fr;
    }
    .dining_block .block2 .dinner_wrap1 {
        grid-template-columns: 100%;
    }
    .dining_block .block2 .dinner_wrap2 .left {
        order: 2;
    }
    .dining_block .block2 .dinner_wrap2 .right {
        order: 1;
    }
    /* =============================================================
    お部屋
    ================================================================= */
    .rooms_block .rooms_box .rooms_wrap {
        grid-template-columns: 100%;
    }
    .rooms_block .rooms_box .rooms_wrap .right table tr td:first-child {
        width: 23%;
        min-width: 120px;
    }
    .rooms_block .amenity_block .container .amenity_wrap {
        grid-template-columns: 1fr;
    }
    .rooms_block .amenityphoto_block {
        grid-template-columns: 1fr 1fr;
    }
    .rooms_block .amenityphoto_block img:nth-child(3){
        order: 4;
    }
    .rooms_block .amenityphoto_block img:nth-child(4){
        order: 3;
    }
    .rooms_block .rooms_info_block .container table tr td {
        display: block;
        width: 100%;
    }
    .rooms_block .rooms_info_block .container table tr td:first-child {
        border-bottom: none;
        padding-bottom: 0px;

    }
    .rooms_block .rooms_info_block .container table tr:first-child td:last-child {
        border-top: none;
    }
}


/*ナビ②*/
@media only screen and (max-width: 680px) {


    .header_inner {

        padding-top: clamp(10px, 2vw, 20px);
        padding-bottom: clamp(10px, 2vw, 20px);
    }

/* ===== ヘッダー、予約、ハンバーガー、スクロール表示ハンバーガー、予約を非表示 ===== */
    .header_inner .right .reserve_pc,
    .header_hamburger,
    .hamburger,
    .reserve_fixed {
        display: none !important;
    }
    #header_wrap {
        /*height: clamp(60px, 10.5vw, 70px);*/
    }
/* ===== 下部SPナビ ===== */
    .nav_sp {
        display: grid;
        grid-template-columns: 1fr 70px;
        background-color: #00639d;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 70px;
        z-index: 2000;
    }
    .nav_sp .left {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2px;
        padding-top: 2px;
        text-align: center;
    }
    .nav_sp .right {

    }
    .nav_sp .left a {
        position: relative;
        background-color: #fff;
        font-size: clamp(12px, 2vw, 16px);
        font-weight: bold;
    }
    .nav_sp .left a span {
        position: absolute;
        top: 50%;
        left: 50%;
            transform: translate(-50%, -50%);
    }
    .nav_sp .left a span img {
        max-width: 24px;
        margin-bottom: 5px;
    }

    /*下部ハンバーガー*/
    .bottom-nav_hamburger {
        display: block;
        position: relative;
        width: 70px;
        height: 70px;
        background: #00639d;
        aspect-ratio: 1;
        z-index: 2000;
    }
    button.bottom-nav_hamburger:focus {
        outline: none;
        outline-offset: 0px;
    }

    .bottom-nav_hamburger span {
        position: absolute;
        left: 50%;
            transform: translate(-50%);
        width: 55%;
        height: 2px;
        background: #fff;
        transition: .3s;
    }
    .bottom-nav_hamburger span:nth-child(1) { top: 23px; }

    .bottom-nav_hamburger span:nth-child(2) { top: 37px; }

    .bottom-nav_hamburger span:nth-child(3) { top: 51px; }
    /* × */
    .bottom-nav_hamburger.is-open span:nth-child(1) {
        top: 36px;
        transform: translateX(-50%) rotate(45deg);
    }
    .bottom-nav_hamburger.is-open span:nth-child(2) {
        opacity: 0;
    }
    .bottom-nav_hamburger.is-open span:nth-child(3) {
        top: 36px;
        transform: translateX(-50%) rotate(-45deg);
    }
    #footer_wrap {
        padding: 40px 0 100px;
    }



}

@media only screen and (max-width: 580px) {
    html body {
        font-size: 15px !important;
    }
    #footer_reserve {
        min-height: 350px;
    }
    /* =============================================================
    トップページ
    ================================================================= */
    /*---NEWS & TOPICS------------------*/
    .top_news_block .bg {
        background-position: top -30px left -55px, top -85px right -20px;
    }
    /*---館内施設------------------*/

    .top_facilities_block {
        background-size: 90%, 86%;
        background-position: top 40px center, bottom 40px center;
        padding: clamp(250px, 79vw, 440px) 0 clamp(250px, 79vw, 440px);
    }

    /* =============================================================
    アクセス
    ================================================================= */
    .access_block .information_wrap .right table tr td {
        display: block;
        width: 100%;
    }
    .access_block .information_wrap .right table tr td:first-child {
        border-bottom: none;
        padding-bottom: 0px;

    }
    .access_block .information_wrap .right table tr:first-child td:last-child {
        border-top: none;
    }
    .access_block .gmap {
        padding-bottom: 76.25%;
        min-height: auto;
    }
    /* =============================================================
    お部屋
    ================================================================= */
    .rooms_block .amenity_block p {
        text-align: left;
    }
    .rooms_block .amenity_block p br {
        display: none;
    }
    .rooms_block .amenity_block .container .amenity_box .inner {
        flex-wrap: wrap;
        gap: 0;
    }
    .rooms_block .amenity_block .container .amenity_box ul {
        width: 100%;
    }



}

@media only screen and (max-width: 450px) {
    #footer_wrap .footer_inner .address br {
        display: inline;
    }
    /* =============================================================
    アクセス
    ================================================================= */
    .access_block .howto_access_wrap h3 br {
        display: inline;
    }

}