@charset "UTF-8";
/* CSS Document */

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

.sp-no {
    display: none;
}

.pc-no {
    display:inline;
}




.header {
    width: 100%;
    margin:0;
    padding:0;
    position:fixed;
    overflow: hidden;
    background-color:#FFFFFF;
    line-height: 0%;
    z-index: 1000;
    opacity: 0.9;
    transition: 0.3s;
    background-image:url("../img/line_rainbow.png");
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
}

.hdr-wrap {
    width:98%;
    max-width: 1100px;
    margin:0 auto;
    padding:10px 0;
    position:relative;
    overflow: hidden;
}

.hdr-wrap .mainlogo {
    width: 70%;
    float: left;
    margin:0 0 10px;
    padding:0;
}

.hdr-wrap .mainlogo img {
    width: 100%;
    margin:0;
    padding:0;
    position: relative;
    overflow: hidden;
    display:block;
}

.hdr-wrap .totop-btn {
    width: 30%;
    float: right;
    margin:0 0 10px;
    padding:0;
}


.hdr-wrap .totop-btn img {
    width: 80%;
    margin:10px auto 0;
    padding:0;
    position: relative;
    overflow: hidden;
    display:block;
}

.hdr-wrap .reservation {
    width: 100%;
    float: none;
    margin:0 auto;
    padding:0;
    position: relative;
    overflow: hidden;
}

.hdr-wrap .reservation .reserve-btn {
    width: 40%;
    float: left;
    margin: 0 1%;
    padding:0;
    position: relative;
    overflow: hidden;
}

.main {
    width: 100%;
    margin:0 0 50px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.main .mainimg{
    width: 100%;
    margin:30% 0 0;
    padding:0;
    position:relative;
    overflow: hidden;
    
}

.mainimg .mainimg-item {
    width:100%;
    min-height: 300px;
    margin:0;
    padding:0;
    background-size: cover;
    background-position: center;
}

.rainbow-line {
    width: 100%;
    margin:100px auto;
    padding:0;
    height: 5px;
    background-image: url("../img/line_rainbow.png");
    background-size: contain;
    background-position: center;
}

.overview-area {
    width: 100%;
    height: 350px;
    margin:0 0 -30px;
    padding:0;
    position:relative;
    overflow: hidden;
    background-image: url("../img/overview_bk.png");
    background-size: cover;
    background-position: bottom;
}

.overview-area .overview-hdr {
    width: 100%;
    margin:0 auto 30px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.overview-area .overview-txt {
    width: 90%;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
    font-size: 100%;
    line-height: 210%;
    font-weight: bold;
    text-align: center;
    color:#959595;
}

.main-wrap  {
    width: 98%;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
}

h4 {
    width: 80%;
    margin: 30px 0;
}

/*****ADJUST THE WIDTH OF EACH STAR HEADER HERE*****/

.star-hdr {
    margin:0 auto 30px;
    padding:0;
    position:relative;
    overflow: hidden;
}

#star-room {
    width: 100%;
}

#star-amenities{
    width: 100%;
}
  
#star-restaurant{
    width: 100%;
}
    
#star-coin-laundry{
    width: 100%;
}
 
#star-kids{
    width: 100%;
}
    
#star-bath {
     width: 100%;
}

#star-handy {
    width: 100%;
}

#star-selene {
     width: 100%;
}

#star-kanko {
     width: 100%;
}

#star-access {
     width: 100%;
}

#star-contact {
     width: 100%;
}

.main-wrap .main-mds {
    width: 90%;
    margin:0 auto 30px;
    padding:0;
    position:relative;
    overflow: hidden;
    font-size: 110%;
    font-weight: bold;
    line-height: 210%;
    text-align: center;
}

/***** ROOMS AREA *****/

.rooms-area {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.rooms-area .review-box {
    width: 100%;
    margin:0 0 30px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.rooms-area .room-wrap {
    width: 100%;
    margin:0 auto 0;
    padding:50px 0;
    position:relative;
    overflow: hidden;
    border-bottom:solid .5px #d9d9d9;
}

.rooms-area .room-wrap:last-child {
    padding:50px 0 0;
    border-bottom:none;
}

.room-wrap .room-maindescription {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.room-info {
    margin: 0 0 20px;
}
    
.room_dot {
    min-width: 50px;
}
    
.room-text {
    margin: 20px auto;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    line-height: 210%;
}

.room-txt {
    width: 95%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    font-size: 100%;
    line-height: 210%;
}


/*****洋式・デラックス用*****/
.room-maindescription .img-l {
    width: 100%;
    float: none;
    margin:0;
}

.room-maindescription .txt-r {
    width: 100%;
    float: none;
    margin:0 0 10px;
    padding:0 0 70px;
    background-position: bottom;
    background-size:cover;
}

.room-maindescription #western_bk {
    background-image:url("../img/02room_western-bk.png");
}

/**.room-maindescription #deluxe_bk {
    background-image:url("../img/02room_deluxe-bk.png");
}**/

/***ここまで***/

/*****和式用*****/
.room-maindescription .img-r {
    width: 100%;
    float: none;
    margin:0;
    
}

.room-maindescription .txt-l {
    width: 100%;
    float: none;
    margin:0 0 10px;
    padding:0 0 100px;
    background-position: bottom;
    background-size: cover;
}

.room-maindescription #jpn_bk {
    background-image: url("../img/02room_jpn-bk.png");
}
    
.deluxe_room{
    display: block;
     margin-top: -80px;   
}
    
    
/***ここまで***/

.room-maindescription .roomimg-wrap {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.roomimg-wrap .roomimg {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.room-subdescription {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.room-subdescription .sub-l {
    width: 100%;
    float: none;
    margin:0 0 10px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.room-subdescription .sub-r {
    width: 100%;
    float: none;
    margin:0 0 10px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.room-subdescription .sub-title {
    width: 100%;
    margin:0 0 10px;
    padding:0;
    position:relative;
    overflow: hidden;
    text-align: center;
    font-size: 160%;
    font-weight: bold;
    line-height: 180%;
}

.room-subdescription table.sub-table {
    width: 90%;
    height: auto;
    margin:0 auto 30px;
    padding:0;
    position:relative;
    overflow: hidden;
    background-color:#d9d9d9;
    border-spacing:1px;
}

table.sub-table th,td {
    padding:5px 10px;
    font-size: 90%;
    color:#000000;
    text-align: left;
    background-color:#FFFFFF;
}

table.sub-table th.subtab-l{
    width: 28%;
}

table.sub-table td.subtab-r {
    width: 72%;
}

table.sub-table td.subtab-all {
    width: 100%;
    height: 270px;
    padding: 0 10px;
    text-align: center;
    font-size: 100%;
}


/*****　AMENITY AREA *****/
.amenities_text {
    font-size: 100%;
    width: 90%;
    margin: 0 auto;
}
    
.amenities_photo{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px auto 0;
}

.amenities_photo img{
    width: 49%;
    margin: 0 0 10px;
}   
    

/***** RESTAURANT AREA *****/
.ex_text{
    font-size: 100%;  
}
    
.restaurant_photo {
    width: 95%;
    margin: 30px auto 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
.restaurant_photo img{
    width: 49%;
    margin: 0;
    padding: 0;
}

 .allergy_title{
    width: 310px;
    margin: 70px auto 20px;
}   
    
.allergy_note{
    width: 90%;
    margin: 40px auto 0px;
}  
    
    
/***** COIN RAUNDRY *****/
.laundry_explanation{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.laundry_photo{
    width: 90%;
    margin: 0 auto 20px;
}

.laundry_text{
    width: 90%;
    margin: 0 auto;
}
    
    
/***** KIDS SPACE AREA *****/
.kids_photo1,.kids_photo2{
    width: 95%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px auto;
    gap: 0 5px;
} 
    
.kids_photo1 img,.kids_photo2 img {
    width: 45%;
    min-width: unset;
    margin: 0 0 5px;
}
    
.kids_photo2{
    margin: 40px auto 0;
} 
 
    
/***** BATH AREA *****/
.bath-area {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.bath-wrap {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
    border:none;
    background-color:#FFFFFF;
}

.bath-wrap .bath-imgarea {
    width: 100%;
    float: none;
    margin:0 0 10px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.bath-wrap .bath-txtarea {
    width: 100%;
    float: none;
    margin:0 0 10px;
    padding:0;
    position:relative;
}

.bath-wrap .bath-mds {
    width: 80%;
    margin:10px 0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.bath-wrap .bath-txt {
    width: 95%;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
    font-size: 110%;
    line-height:210%;
}

    
/***** HANDY AREA *****/
    
.handy-area {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

.handy-wrap {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
    background-color: #FFFFFF;
}

    
/***** SELENE AREA *****/

.selene-area {
    width: 100%;
    margin:0 auto;
    padding:0;
    position: relative;
    overflow: hidden;
}

.selene-area .selene-img {
    width:98%;
    margin:0 auto 30px;
    padding:0;
    position:relative;
    overflow: hidden;
    display: flex;
}

.selene-img .mainimg-item {
    width: 100%;
    float: none;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
    line-height: 0;
}

ul.selene-gallery {
    width: 98%;
    margin:0 auto 10px;
    padding:0;
    position:relative;
    overflow: hidden;
    list-style: none;
    line-height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

ul.selene-gallery li {
    width: 32%;
    margin: 0 0 8px;
}
ul.selene-gallery li img {
}

ul.selene-gallery li:nth-child(3n+3) {
    margin:0;
}


ul.selene-gallery li:nth-child(6n+6) {
    margin:0;
}

.selene-area .selene-wrap {
    width: 98%;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
}

.selene-wrap .selene-l {
    width: 100%;
    float: none;
    margin:0 0 10px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.selene-wrap .selene-r {
     width: 100%;
    float: none;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
}

/***** KANKO AREA *****/

.kanko-area {
    width: 100%;
    margin:0;
    padding:0;
    position: relative;
    overflow: hidden;
}

ul.kanko-imgarea {
    width: 100%;
    margin:0 auto 20px;
    padding:0;
    position:relative;
    overflow: hidden;
    list-style:none;
}

ul.kanko-imgarea li.k-imgitem {
    width: 330%;
    line-height: 70%;
    margin: 0 0 10px;
}

ul.kanko-imgarea li.k-imgitem:last-child {
    margin: 0;
}

.tchcha-site{
    margin: 0;
    font-size: 18px;
    line-height: 40px;
    text-align: left;
}
    
.tchcha-site a{
    word-wrap: break-word;     
}
    
    
/***** ACCESS AREA *****/

.access-area {
    width: 100%;
    margin:0;
    padding:0;
    position: relative;
    overflow: hidden;
}

.access-area .access-wrap {
    width: 100%;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
}

.access-wrap .access-l {
    width:100%;
    float:none;
    margin:0 auto 10px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.access-wrap .access-l iframe {
    width: 100%;
}

.access-wrap table.access-r {
    width:100%;
    float:none;
    margin:0 auto 10px;
    padding:0;
    position:relative;
    overflow: hidden;
    background-color:#FFFFFF;
}

table.access-r th,td {
    padding:20px 10px;
}

table.access-r th {
    width: 30%;
}

table.access-r td {
    width: 70%;
}

/***** CONTACT AREA *****/

.contact-area {
    width: 100%;
    margin:0;
    padding:0;
    position: relative;
    overflow: hidden;
}

.contact-area .contact-wrap {
    width:80%;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
}

 .contact-wrap .contact-item {
     width:100%;
    float:none;
    margin:10px 0;
    padding:0;
    position:relative;
    overflow: hidden;
}


/***** FOOTER AREA *****/

.footer {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
    background-color: #eeeeee;
    line-height: 0%;
    background-image:url("../img/line_rainbow.png");
    background-size:contain;
    background-repeat: repeat-x;
    background-position: top;
}

.footer .footer-wrap {
    width: 98%;
    max-width: 1000px;
    margin:0 auto 30px;
    padding:50px 0 0;
    position:relative;
    overflow: hidden;
    text-align: center;
    font-size: 100%;
    line-height: 160%;
}

.footer-wrap .footer-logo {
    width:70%;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow:hidden;
}

.footer-wrap .footer-name {
    font-size: 100%;
    font-weight:normal;
    margin:0 0 30px;
    -moz-font-feature-settings: "pkna";
    -webkit-font-feature-settings: "pkna";
    font-feature-settings: "pkna";
}

.footer-wrap .footer-addr {
    font-size: 90%;
    font-weight:normal;
}

.footer .copyright{
    width: 100%;
    margin:0;
    padding:10px 0;
    position:relative;
    overflow: hidden;
    font-size: 70%;
    text-align: center;
}


.yanase-cp {
    width: 100%;
    margin: 0;
    padding: 60px 0 30px;
    position: relative;
    overflow: hidden;
    text-align: center;    
}




}