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

html,body {
    width:100%;
	margin:0;
	padding:0;
    color:#000000;
	background-color:#FFFFFF;
    font-size: 16px;
    line-height: 180%;
/*    font-family: "Microsoft JhengHei","51379ED1 Pro","LiHei Pro",sans-serif;*/
    font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial",sans-serif;
    -moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}

.wrapper {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
}

img {
    width: 100%;
    margin:0;
    padding:0;
    line-height: 70%;
    pointer-events: none;
  -webkit-touch-callout: none;
}

a {
    color:#083aae;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.sp-no {
    display: inline;
}

.pc-no {
    display:none;
}

.header {
    width: 100%;
    margin:0;
    padding:0 0 10px;
    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:5px 0;
    position:relative;
    overflow: hidden;
}

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

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

.hdr-wrap .reservation {
    width: 55%;
    display: flex;
    float: right;
    margin: 10px 0;
    padding:0;
}

.hdr-wrap .reservation .reserve-btn {
    width: 48%;
    float: left;
    margin:0 0 0 2%;
    padding:0;
}





.main {
    width: 100%;
    min-height: 800px;
    margin:0 0 100px;
    padding:0;
    position:relative;
    overflow: hidden;
}

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

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


.rainbow-line {
    width: 90%;
    max-width: 1100px;
    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: 780px;
    margin:0 0 -100px;
    padding:0;
    position:relative;
    overflow: hidden;
    background-image: url("../img/overview_bk.png");
    background-size: cover;
    background-position: bottom;
}

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

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

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

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

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

#star-room {
    width: 60%;
}

#star-amenities{
    width: 70%;
}

#star-restaurant{
    width: 67%;
}

#star-coin-laundry{
    width: 70%;
}

#star-kids{
    width: 70%;
}

#star-bath {
    width: 70%;
}

#star-handy {
    width: 55%;
}

#star-selene {
    width: 73%;
}

#star-kanko {
    width: 74%;
}

#star-access {
    width: 74%;
}

#star-contact {
    width: 59%;
}

.main-wrap .main-mds {
    width: 80%;
    margin:0 auto 50px;
    padding:0;
    position:relative;
    overflow: hidden;
    font-size: 140%;
    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: 70%;
    margin:0 auto 100px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.rooms-area .room-wrap {
    width: 100%;
    max-width: 1100px;
    margin:0 auto;
    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: 90%;
    max-width: 1000px;
    margin:0 auto 30px;
    padding:0;
    position:relative;
    overflow: hidden;
}

.room-info{
    margin: 0 70px 50px;
    display: flex;
    align-items: center;
}

.room_dot{
    min-width: 60px;
}

.room-text{
    margin: 0 30px;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    line-height: 210%;
}

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

.room-maindescription .txt-r {
    width: 43%;
    float:left;
    margin:0;
    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_jpn-bk.png);
}**/

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

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

.room-maindescription .txt-l {
    width: 43%;
    float: right;
    margin:0 5% 0 0;
    padding:0 0 150px;
    background-position: bottom;
    background-size: cover;
}

.room-maindescription #jpn_bk {
    background-image: url("../img/02room_jpn-bk.png");
}
/***ここまで***/

.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: 90%;
    max-width: 1000px;
    margin:0 auto;
    padding:0;
    position:relative;
}

.room-subdescription .sub-l {
    width: 48%;
    float: left;
    margin:0 2% 0 0;
    padding:0;
}

.room-subdescription .sub-r {
    width: 48%;
    float: left;
    margin:0 0 0 2%;
    padding:0;
}

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

.room-subdescription table.sub-table {
    width: 100%;
    height: 270px;
    margin:0 auto;
    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;
    text-align: center;
    font-size: 100%;
}


/*****　AMENITY AREA *****/

.amenities_text{
    font-size: 120%;
    width: 90%;
    margin: 0 auto;
}

.amenities_photo{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 40px auto;
}

.amenities_photo img{
    width: 300px;
    margin: 10px;
}


/*****　RESTAURANT AREA *****/
.ex_text{
    width: 90%;
    max-width: 950px;
    margin: 0 auto;
    font-size: 140%;
    line-height: 210%;
}

.restaurant_photo{
    width: 100%;
    margin: 40px auto;
    display: flex;
    justify-content: center;

}

.restaurant_photo img{
    margin: 0 10px;
    width: 45%
}

.allergy_title{
    width: 400px;
    margin: 70px auto 20px;
}

.allergy_note{
    width: 80%;
    max-width: 800px;
    margin: 40px auto;
}


/***** COIN LAUNDRY *****/

.laundry_explanation{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.laundry_photo{
    width: 45%;
}

.laundry_text{
    width: 50%;
}


/***** KIDS SPACE AREA *****/
.kids_photo1,.kids_photo2{
    width: 90%;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.kids_photo1 img,.kids_photo2 img{
    width: 33%;
}

.kids_photo2{
    margin: 40px auto 0;    
}

/***** BATH AREA *****/

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

.bath-wrap {
    width: 90%;
    max-width: 850px;
    margin:0 auto;
    padding:30px 4%;
    position:relative;
    overflow: hidden;
    border:solid 10px #f6f6f6;
    background-color:#FFFFFF;
}

.bath-wrap .bath-imgarea {
    width: 50%;
    float: left;
    margin:0 5% 0 0;
    padding:0;
}

.bath-wrap .bath-txtarea {
    width: 45%;
    float: left;
    margin:0;
    padding:0;
}

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

.bath-wrap .bath-txt {
    width: 100%;
    margin:0;
    padding:0;
    position:relative;
    overflow: hidden;
    font-size: 100%;
    line-height:180%;
}

/***** HANDY AREA *****/

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

.handy-wrap {
    width: 90%;
    max-width: 800px;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
    background-color: #FFFFFF;
}

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

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

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

.selene-img .mainimg-item {
    width: 50%;
    float: left;
    margin:0;
    padding:0;
}

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

ul.selene-gallery li {
    width: 16%;
}

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

.selene-wrap .selene-l {
    width: 48%;
    float: left;
    margin:0 2% 0 0;
    padding:0;
}

.selene-wrap .selene-r {
    width: 48%;
    float: left;
    margin:0 0 0 2%;
    padding:0;
}

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

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

ul.kanko-imgarea {
    width: 80%;
    max-width: 800px;
    margin:0 auto 30px;
    padding:0;
    position:relative;
    overflow: hidden;
    list-style:none;
    display: flex;
    justify-content: space-between;
}

ul.kanko-imgarea li.k-imgitem {
    width: 33%;
}

.tchcha-site{
    font-size: 22px;
    line-height: 40px;
    position: relative;
    overflow: hidden;
    display: block;
    text-align: center;
}
.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: 90%;
    max-width: 1000px;
    margin:0 auto;
    padding:0;
    position:relative;
    overflow: hidden;
}

.access-wrap .access-l {
    width:53%;
    float:left;
    margin:0 2% 0 0;
    padding:0;
}

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

.access-wrap table.access-r {
    width:45%;
    float:left;
    margin:0;
    padding:0;
    background-color:#FFFFFF;
}

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

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

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

/***** 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: 40%;
     margin:0 auto;
     padding:0;
     float: none;
     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:30%;
    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: 80%;
    text-align: center;
}




/***** CONTACT FORM AREA *****/
    
    .mailform-wrap {
        width: 95% !important;
		max-width: 1000px;
        margin:0 auto 100px !important;
        padding:0 !important;
        position:relative !important;
        overflow: hidden !important;
        display: block !important;
    }

	.contactPage .formBox .inputBox>p::after {
		content: '必填';
        font-size:80% !important;
	}
    article#mailform .topText {
        font-size: 100% !important;
        padding: 150px 0 0;
    }
    article#mailform .formBox {
        font-size: 100% !important;
        border: solid 1px #d6d6d6;
    }
    .contactPage .formBox .inputBox>p {
        font-size: 100% !important;
    }
    .contactPage .formBox .inputBox select, .contactPage .formBox .inputBox input[type=text], .contactPage .formBox .inputBox input[type=email] {
        font-size: 100% !important;
    }
    .ch-submitbtn {
        width: 40%;
        margin:50px auto 0;
        padding:20px 0;
        position:relative;
        overflow: hidden;
        background-color:#FF5659;
        border:none;
        border-radius: 10px;
        color: #FFFFFF;
        font-size: 110%;
        text-align: center;    
        display: block;
        opacity: 1.0;
        transition: .2s ease-in;
            -moz-transition: .2s ease-in;
            -webkit-transition: .2s ease-in;
            -o-transition: .2s ease-in;
    }
    
    .ch-submitbtn:hover {
        opacity: 0.5;
    }
    
    .ch-btnwrap {
        width: 80%;
        margin:50px auto 0;
        padding:0;
        positon:relative;
        overflow: hidden;
    }
    
    .ch-btnwrap .ch-backbtn {
        width:40%;
        margin:0 5%;
        padding:10px 0;
        float: left;
        border:none;
        border-radius: 10px;
        background-color:#aeddff;
        color: #000000;
        font-size: 110%;
        text-align: center;    
        display: block;
        opacity: 1.0;
        transition: .2s ease-in;
            -moz-transition: .2s ease-in;
            -webkit-transition: .2s ease-in;
            -o-transition: .2s ease-in;
    }
    
    .ch-btnwrap .ch-backbtn:hover {
        opacity: 0.5;
    }
    
    .ch-btnwrap .ch-okbtn {
        width:40%;
        margin:0 5%;
        padding:10px 0;
        float: left;
        border:none;
        border-radius: 10px;
        background-color:#FF5659;
        color: #FFFFFF;
        font-size: 110%;
        text-align: center;    
        display: block;
        opacity: 1.0;
        transition: .2s ease-in;
            -moz-transition: .2s ease-in;
            -webkit-transition: .2s ease-in;
            -o-transition: .2s ease-in;
    }
    
.yanase-cp {
    width: 100%;
    margin: 0;
    padding: 100px 0 30px;
    position: relative;
    overflow: hidden;
    text-align: center;    
}