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



    .pcnav {
        display: none;
    }

    .pc{
        display: none;
    }

    .sp{
        display: block;
    }

    .navwrap__sp {
        display: block;
        height: 50px;
    }


    
/* ====================spnav===================== */


.hamburger {
    position: absolute;
    right: 20px;
    top: 38%;
    width: 5rem;
    height: 4rem;
    cursor: pointer;
    z-index: 1001;
}

.ham_line {
    position: absolute;
    width: 36px;
    height: 3px;
    right: 0;
    background-color: #fff;
    transition: all 0.5s;
}


.ham_line.change-color {
    background-color:#171717;
}

.open .ham_line.change-color {
    background-color:#171717;
}


.ham_line-1 {
    top: 1px;
}

.ham_line-2 {
    top: 10px;
}

.ham_line-3 {
    top: 20px;
}


.open .ham_line-1 {
    transform: rotate(-45deg);
    top: 11px;
}

.open .ham_line-2 {
    opacity: 0;
}

.open .ham_line-3 {
    transform: rotate(45deg);
    top: 11px;
}


/* 
  spnav(ナビ)
  =================================== */
.spnav {
    position: fixed;
    right: -100%;
    top: 0;
    width: 70%;
    height: 100vh;
    background-color: rgba(27,30,31,0.9);
    color: #fff;
    transition: all 0.5s;
    z-index: 200;
    overflow-y: auto;
}


.open .spnav {
    right: 0;
}



.black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    cursor: pointer;
    z-index: 100;
}

.open .black-bg {
    opacity: 0.3;
    visibility: visible;
}

.spwrap {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding: 0 4rem;
}

.spnav ul {
    width: 100%;
}

.spnav ul li {
    margin: 0 0 10% 0;
    position: relative;
    border-bottom: 1px solid #171717;
    transition: .2s;
}

.spnav ul li a {
    display: block;
}

.spnav ul li:hover {
    color: #5d700b;
    border-bottom: 1px solid #171717;
}




.spnavbtn {
    width: 100%;
    padding: 5%;
    background-color: #fff;
    border: 1px solid #171717;
    color: #171717;
    text-align: center;
    font-weight: bold;
    transition: .2s;
}

.spnavbtn:hover {
    border: 1px solid #5d700b;
    background-color: #5d700b;
    color: #fff;
}

.spnavbtn>a {
    display: block;
    width: 100%;
    height: auto;
}
        
/* ====================header===================== */



.headerwrap{
    justify-content: left;
    width: 100%;
    padding: 2% 3%;
}


.headerlogo img {
    max-width: 100%;
}

.sp-headbtn{
    display: block;
}



/* ====================news===================== */



.newsBanner{
    padding: 0 0% 10%;
}



/* ====================information===================== */


.backColor{
    margin-bottom: 1%;
}


}




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

    


    h2 {
        font-size: clamp(1rem, 0.924rem + 0.43vw, 1.25rem);
    }

    .titlebox{
        padding:0;
    }

    .is-pc{
        display: none;
    }
    









   
/* ====================aboutbox======================== */

#wrapper{
    display: block;/*display:flex;を解除*/
  }
  

.about{
    height: auto;
}

    .abouttitle {
        padding: 0 0 30px 0;
    
}

.aboutbox{
    height: auto;
    flex-direction: column;
}

.aboutimg {
    height: clamp(18.75rem, 14.205rem + 22.73vw, 31.25rem);
    float:none;
    width: 100%;
    margin: 0 auto; 
    display: block;
    position:relative!important;/*position stickyを解除*/
}




.abouttext {
    padding: 130px 0 0 0;
    float: none; 
    width: 100%;
    min-height:auto;
}

.abouttext::before{
    font-size: 140px;
    opacity: 0.1;
    top: 100px;
    left: 0;
    writing-mode: vertical-lr;
}


    
    #aboutcontainer{
      width:100%;
      padding-left: 0;
    }
    





/* ====================feature======================== */



.feature::before{
    top: -280px;
}

.featuretext {
    padding: 13%;
    width: 100%;
}

.feature1,
.feature2,
.feature3{
    margin-bottom: 200px;
    z-index: 2;
}


.right, .left {
    width: 100%;
}


.feature1 .featuretext {
    float: none;
    margin-right: 0;
    position: relative;
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
}



.featureimg
{
    height:clamp(15.625rem, 11.08rem + 22.73vw, 28.125rem);
    top: 0;
    left: 0;
    right: 0;
    background-attachment: inherit;
}


    
.featureimgb{
    background-image: url(../img/f2_sp.webp);

    background-position: center;
}


.feature1 .right{
    width: 100%;
}



.feature2 .featuretext{
    top: 0;
    height: auto;
}


.feature2 .featuretext p {
    width: 100%;
}

.f3{
    top: 0;
}


.feature3 .featuretext {
    width: 100%; 
    float: none;
    margin-left: 0;
    height: auto;
    top: 0;
}



.feature3 .right {
    margin-left: 0;
    width: 100%;
}


.feature_sub{
    margin-top: -0px;
}

#slide::before{
    font-size: 124px;
}


/* ====================room======================== */


.roombox{
    margin: 0;
    flex-direction: column;
}


.roomtext{
    width: 100%;
    flex-direction: row;
    padding: 15% 10%;
}


.roomboxB::after {
    text-align: end;
    writing-mode: vertical-rl;
    margin-left: -40px;
    color: #5d700b;
    z-index: 1;
    }


.roomboxA::after,
.roomboxB::after  {
    font-size:clamp(6.25rem, 5.795rem + 2.27vw, 7.5rem);
    margin-left: -60px;
    top: 520px;
}



.roomtext h2 {
    align-self: center;
    padding-right: 10%;
}

.roomtext h2::before{
font-size: 16px;
top: -30px;
width: 70%;
}

.roomtext h2 img {
    width: clamp(9.375rem, 7.473rem + 10.87vw, 15.625rem);
    align-self: center;
}

.roomname{
    padding: 5%;
}

.roombox img{
    width: 20%;
}

.kultaimg,.vettaimg{
height: clamp(18.75rem, 13.068rem + 28.41vw, 34.375rem);
}

.vettaimg{
    order: 1;
}

.roomboxB::after{
    top: 60%;
}

.roomboxB .roomtext{
    order: 2;
}
    

.room .title_2w{
    padding: 15% 0;
}

.roomtext h2{
    padding: 2% 10% 2% 0;
}




/* ====================information======================== */

.information{
    padding-bottom: 0;
}

.infoflex{
    flex-direction: column;
}

.extra,
.amenity{
    width: 100%;
}

.extra{
    padding: 0 0 10% 0;
}

.feecontent{
    flex-direction: column;
}

.roombase1, .roombase2 {
    width: 100%;
}

.vip .feeroom img,
.private .feeroom img{
    width: 15%;
}

.fExBox{
    flex-direction: column;
}

.triangle{
    transform: rotate(-90deg);
}


.fExcontent2{
    padding: 0 8%;
}


.fExcontent2 img {
    padding: 8% 0;
    width: 100%;
}

.feeExtitle img{
    width: 50%;
}

.fExBox li:first-child{
    padding: 8% 0;
}

.feeExtitle{
    flex-direction: column;
}


.fExcontent1{
    text-align: center;
}




}



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

    .spnav {
        width: 100%;
    }

    .title{
        font-size: 18px;
    }

    .splist{
        flex-direction: column;
        margin: 0 auto;
        text-align: center;
        padding-bottom: 20px;
    }



    .box{
        padding: 100px 0;
    }


/* ===================about======================== */


    .abouttitle {
        padding: 0 0 40px 0;
    }

    


/* ====================feature======================== */

.feature1, .feature2, .feature3 {
    margin-bottom: 100px;
}

.feature_sub{
    padding-top: 15%;
}


#slide::before{
    font-size: 100px;
    top: -40px;
}




/* ====================room======================== */

.room{
    height:100%;
}

.room1{
    margin-bottom: 100px;
}

.roomtext{
    flex-direction: column;
}

.roomtext h2 {
    padding: 0 0 5% 0;
    align-self: flex-start;
}

.roomboxA::after,
.roomboxB::after{

top: clamp(20rem, 13.636rem + 31.82vw, 37.5rem);
font-size: clamp(5rem, 4.091rem + 4.55vw, 7.5rem);
opacity: .1;
}



.roomtext h2::before{
    text-align:  start;
    width: 100%;
}



/* ====================information======================== */

.infoextra{
    padding: 50px 0 0;
}

.hour{
    padding: 0 0 10px 0;
}

.infoYearPc{
    display: none;
}


.infoYear{
    display: inline-block;
    margin: 0 0 5%;
}


.hourbox{
    flex-direction: column;
}

.feetable{
    width: 180%;
}


.exwrap{
    flex-direction: column;
}

.excontainer{
    width: 100%;
}

.excontainer:first-child{
    margin-bottom: 10px;

}

.fExcontent1{
    text-align: center;
}


.fExcontent1 img{
    width: 80%;
}



.fExcontent2{
    padding: 0;
}




.feeExtitle img {
    width: 80%;
}

.camTable{
    width: 100%;
}

/* ====================flow======================== */

.flowitems{
    flex-direction: column;
}


.flowitems p{
    font-size: 20px;
    width: 40px;
    height: 40px;
}

.flowitems span{
    width: 1px;
    height: 20px;
}

.flowitems dl{
    flex-direction: column;
    padding: 5% 5%;
    width: 100%;
}

.flowitems dt {
    width: 100%;
}

.flowitems dd {
    width: 100%;
    padding: 0;
}


/* ====================faq======================== */



.accordion-area dt::after {
    font-size: 1.5rem;
    width: 10%;
}

.accordion-area dt::before {
    font-size: min(4vw,2rem);
}



/* ====================reservation======================== */


.reservationbox{
    flex-direction: column;
}

.rsvbtn {
    padding: 5% 2%;
    width: 100%;
}


/* ====================access======================== */

.mapinner iframe{
    height: 300px;
}




/* ====================footer======================== */




.footlogo{
    width: clamp(6.25rem, 3.125rem + 15.63vw, 9.375rem);
}

.footertop {
    flex-direction: column;
    align-items: center;
}

.footermiddle ul{
    flex-direction: column;
    align-items: center;
}

.footermiddle ul:last-of-type{
    padding: 30px 0 30px;
}


.btnlist{
    padding: 8% 0 0;
    justify-content: center;
}


.footerlist {
    padding-bottom: 5%;
    flex-direction: column;

}


.footermiddle{
    padding: 10% 0;
    }



}






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

    .top{
        background-attachment: inherit;
    }

    @keyframes topSlide {


        15% {
            opacity: 1;
            }
        
        
            20% {
                background: url('../img/topimg_2.webp') no-repeat center / cover;
            
            }
            45% {
                opacity: 1;
            }
        
            50% {
        
                background: url('../img/topimg_3.webp') no-repeat center / cover;
            }
            65% {
                opacity: 1;
            }
         
            70% {
        
                background: url('../img/topimg_4_sp.webp') no-repeat center / cover;
            }
        
            85% {
                opacity: 1;
            }
        
    
    }
    
        

.newsBox {
    height: 200px;
    }

    .sp-headbtn{
        width: 130px;
    }
    
.hamburger {
    top: 32%;
}

.ham_line {
    width: 30px;
}


    /* ====================room======================== */


    .roomtext{
        padding: 25% 10%;
    }




/* ====================information======================== */

.information{
    padding: 100px 0 0;
}

.feeroom img {
    width: 20%;
}


.infoextra{
    padding: 10% 0;
}

.infoflex ul li{
    font-size: clamp(0.625rem, 0.549rem + 0.43vw, 0.875rem);
}

.ex{
    padding-top: 5%;
}

.exbox{
    flex-direction: column;
}

.exbox > div{
    width: 100%;
}

.vip .feeroom img,
.private .feeroom img{
    width: 20%;
}

.fExcontent1 img{
    width: 60%;
}

.fExcontainer:first-child{
    padding: 10% 0;
}

.fExcontainer:last-child{
    padding: 15% 0;
}

.is-pc2{
    display: none;
}

.is-sp,
.spBr{
    display: block;
}



.count tr{
    white-space: wrap;

}

.count tr td{
    vertical-align: middle;
    padding: 2%;
}


/* ====================flow======================== */


.flow{
    padding:100px 0 20% 0;
}


.btnlist li{
    width: 100%;
    justify-content: center;
}

.btnlist li:first-of-type {
    margin-bottom: 10px;
    margin-right: 0;
}



/* ====================faq======================== */

.faq{
    padding: 100px 0;
}


.reservation{
    padding: 100px 0;
}

.footer{
    padding: 20% 0 10%;
}


/* ====================footer======================== */





.footerlist li:first-child{
    margin: 0;
}

.btnlist li:nth-of-type(even){
    margin: 0;
}

}