@charset "UTF-8";

@media screen and (max-width:1100px){
    /*ハンバーガー*/
    .ham_content01{
        flex-direction: column-reverse;
        gap:50px;
    }
    .ham_rightArea{
        flex-direction: column;
    }
    .ham_list{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ham_list li{
        width:150px;
        height:150px;
        aspect-ratio: 1 / 1;
    }
    .ham_list a{
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .ham_other_list li a{
        flex-direction: column;
    }
    .ham_other_list li a img{
        width:45px;
    }
    .ham_other_list li a img{
        margin-right:0;
    }

    /*アクセス*/
    .top_ac_wrapper{
        flex-direction: column;
    }
    .top_ac_map{
        max-width:100%;
    }
    .top_ac_txtArea{
        width:100%;
    }

    /*フッター*/
    .f_content01{
        flex-direction: column;
        gap:40px;
    }
    .f_sns_list{
        margin-bottom:40px;
    }

    .f_rightArea{
        gap:50px;
    }

    .f_underArea{
        flex-direction: column-reverse;
        padding-top:30px;
        gap:40px;
    }
    .f_add{
        flex-direction: column;
        gap:30px;
    }
    .pagetop{
        margin-left:auto;
    }
}

@media screen and (max-width:1000px){
    /*本日のお風呂　スマホ表示*/
    .mv_txtArea03{
        display:none;
    }
    .mv_txtArea03-sp{
        display:flex;
        padding:40px;
        justify-content: center;
    }
}

@media screen and (max-width:800px){
    /*ヘッダー*/
    .gnav{
        display:none;
    }


    .ham_sp_logo{
        display:block;
        margin-bottom:50px;
    }
    .ham_sp_logo img{
        max-width:180px;
    }

    /*ハンバーガー*/
    #hamburger-window{
        padding:50px;
    }
    #hamburger-window .g_honyaku{
        display:block;
    }

    .ham_add{
        gap:20px;
    }
    .ham_pc_logo{
        display:none;
    }
    .ham_info{
        margin-top:30px;
    }
}

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

    /*ハンバーガー*/
    .ham_add{
        gap:50px;
        flex-direction: column;
    }

    #hamburger-window .ham_logo img {
        width: 180px;
    }

    /*.g_honyaku{
        position:absolute;
        left:20px;
        top:80px;
    }*/
    

    /*お知らせ*/
    .news_item a{
        flex-direction: column;
        align-items: flex-start;
        gap:.5em;
        padding:15px 15px 15px 0;
    }
    .news_other{
        flex-direction: column-reverse;
        gap:40px;
    }

    /*トップタイトル*/
    .top_ttl{
        max-width:300px;
        height:100px;
    }
    .top_ttl > h2::before{
        top:-85px;
    }
    .top_ttl > h2.visible::before{
        height:80px;
    }

    /*本館・新館*/
    .bath_info{
        flex-direction: column;
        gap:0;
    }
    .bath_name{
        width:100%;
        padding:20px 0;
        font-size:1.2em;
    }
    .bath_desult{
        gap:20px;
    }
    .bath_desult01{
        flex-direction: column;
        align-items: flex-start;
        gap:.5em;
    }
    .bath_info2{
        align-items: center;
    }

    .overlapSwiper {
        aspect-ratio: 4 / 3;
    }

    /*ご利用案内*/
    .top_guide_time{
        flex-direction: column;
        gap:20px;
        padding:30px;
    }
    .top_guide_desult{
        width:100%;
    }

    .fee_ttl{
        position:static;
    }
    .fee{
        flex-direction: column;
        gap:20px;
        padding:30px;
    }
    .fee_desult{
        gap:50px;
        width:100%;
    }
    .fukushi_btn a{
        margin-bottom:40px;
    }

    /*フッター*/
    .f_info{
        display:none;
    }
    .f_leftArea{
        display:flex;
        flex-direction: column;
        align-items: center;
    }
    .f_rightArea{
        display:none;
    }
    .copyright{
        text-align: center;
        margin-top:50px;
    }

    /**
    下層ページ
    **/

    /*温泉案内*/
    .content_bg{
        width:100%;
        /*border-radius:10px 10px 0 0;*/
    }
    .about01_content{
        flex-direction: column;
        margin:0;
        padding:40px;
    }
    .about01_content2{
        flex-direction: column;
    }
    .about01_img{
        width:100%;
    }

    .about01-2_item{
        align-items: flex-start;
        border-bottom:none;
        flex-direction: column;
    }
    .about01-2_item > dt{
        padding:20px 0;
        width:100%;
    }
    .about01-2_item > dd{
        width:100%;
        padding:20px;
    }

    .about01-3_content1_inner,
    .about01-3_content2_inner{
        flex-direction: column;
    }
    .about01-3_content1_inner > h2,
    .about01-3_content2_inner > h2{
        writing-mode: unset;
    }
    .about01-3_content1_inner > p,
    .about01-3_content2_inner > p{
        width:100%;
    }

    /*フロアマップ*/
    .floormap_photo{
        min-height:500px;
    }
    .floormap_photo object{
        position:static;
        width:auto;
        height:100%;
    }


    /*ご利用ガイド*/
    .guide_item{
        flex-direction: column;
        border-top:none;
        border-bottom:none;
    }
    .guide_item > dt{
        width:100%;
        padding:20px 0;
    }
    .guide_item > dd{
        width:100%;
        padding:20px;
    }
    .guide_item2 > dd{
        padding:20px 0;
    }

    .guide_fee_item > dt,
    .guide_fee_item > dd{
        padding:20px 0;
    }

    .faq_cate_list{
        grid-template-columns: repeat(5,1fr);
    }
    .access_img::after{
        width:2em;
        height:2em;
        background-size:20px;
    }

    /*楽しみ方・周辺観光*/
    .ss_map_list{
        gap:6vw;
    }

    .in_spot_list{
        grid-template-columns: repeat(1,1fr);
        column-gap: 0;
        row-gap:8vw;
    }

    .climbs_mountains{
        display:flex;
        flex-wrap: wrap;
        gap:8vw;
    }
    .climbs_mountains .mountain_item{
        flex:auto;
    }

    /*採用情報*/
    .person_list{
        grid-template-columns: repeat(1,1fr);
    }
    .work_point_list{
        flex-direction: column;
    }

    .bl_tabList li a{
        padding:20px 10px;
    }
    .bl_tabContent{
        padding:40px;
    }
    .rec_list > dl{
        padding:15px 0;
        gap:10px;
        flex-direction: column;
    }
    .rec_list > dl > dt{
        width:100%;
    }

    .slider{
        font-size:7em;
    }

    /*ライブカメラ*/
    .mv_img3{
        width:100%;
    }
    #sound_button{
        width:auto;
        padding:10px 30px;
        font-size:.8em;
    }
    #sound_button::before{
        width:16px;
        height:16px;
    }
}

@media screen and (max-width:650px){
    /*イベカレ*/
    .calender_list{
        grid-template-columns: repeat(1,1fr);
    }
}