@charset "utf-8";

/* Reset Style
==================================================*/

* { margin: 0; padding: 0; font-size: 100%; box-sizing: border-box;}
html { height: 100%; margin: 0; padding: 0; line-height: 1; zoom: 1;}
body { height: 100%; margin: 0; padding: 0; font-family:'Noto Sans Japanese', Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 1em; zoom: 1; color: #333333;}

.yu_go{font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
.Oswald{font-family:'Oswald', sans-serif;}

hr { display: none; }
img { border: none; line-height: 0; vertical-align: bottom; }
div, dl, dt, dd, form, input, ul, ol, li, p, select, textarea, span, th, td { margin: 0; padding: 0; }
li { list-style-type: none; border: 0; outline: 0; }
address, th, caption, em, dfn { font-style: normal; font-weight: normal; font-size: 100%; }
strong{font-weight: bold;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; font-size: inherit; }
/* table　-------------------*/
table {border-collapse:collapse;margin-bottom:10px;}
td,th {line-height:1.8em;padding: 3px;}


a { color: #fff; text-decoration: none;
}
a:link { color: #fff; text-decoration: none;}
a:visited {}
a:hover { text-decoration: underline;opacity: 0.8;}
a:active { text-decoration: underline;}

img{width: 100%; height: auto;}
p{line-height: 1.5;}
/* clearfix
============================= */
.clearfix:after {
content: "" ;
display: block ;
clear: both ;
height: 0 ;
visibility: hidden ;
font-size: 0.1em;
line-height: 0;
}
.clearfix { min-height: 1px;}
* html .clearfix {height: 1px;}

/*----------------------------------------------------------------------------
 ***                                                                    共通
----------------------------------------------------------------------------*/
.pcNone{ display:none!important;}
.spNone{ display:block!important;}
.dispFlex{ display: flex;}
.posiR{ position: relative;}
.posiA{ position: absolute;}

.tac{ text-align:center;}
.tar{ text-align:right;}
.tal{ text-align:left;}

.txtColorWh{ color: #ffffff;}
.txtColorOr{ color: #E84709;}
.txtColorBl{ color: #0C3484;}
.txtColorGld{ color: #E2B41E;}
.bgColorWh{ background-color: #ffffff;}
.bgColorOr{ background-color: #E84709;}
.bgColorGr{ background-color: #F7F7F7;}
.bgColorBl{ background-color: #0C3484}
.bgColorGld{ background-color: #E2B41E;}

.radius10{ border-radius: 10px;}

.floatR{ float:right;}
.floatL{ float:left;}
.imgfloatR{ float:right;}
.imgfloatL{ float:left;}


#suite-room{background: #222425;}
/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
/*header*/
#pageHeader{background:#000;position: sticky;top: 0;z-index: 100;}
#pageHeader .headerInner{padding:0 1%;position: relative;}
#pageHeader .headerInner h1{ float:left;width: 4%;}
#pageHeader .headerInner h1 img{padding:15px 0 0;width: 100%;}
#pageHeader .headerInner ul{display: flex;justify-content: flex-end;float: left;align-items: center;padding: 23px 0 23px 1%;width: 96%;}
#pageHeader .headerInner li{border-right: 1px #fff solid; padding: 0 1.5%;}
#pageHeader .headerInner li.bordernone{border-right: none; padding: 0 0 0 1.5%;}
#pageHeader .headerInner li a img{width: 100%;}
#pageHeader .headerInner li a:hover{opacity: 0.8;}
#pageHeader .headerInner li.headerapply{border-right: none; padding: 0 0.5%; width: 13%; max-width: 180px;}

.back_topbg{position: fixed; z-index: 100; bottom: 2%; right: 1%; width: 25%;}
.back_top{display: flex;}
.back_top p{margin: 0 0.5em;}

/*----------------------------------------------------------------------------
 ***                                                                  section
----------------------------------------------------------------------------*/
.mainBox{background: url(/files/user/_/suite-room25-26/img/img_bg01.jpg); background-size: 100%;background-repeat: no-repeat; background-position: bottom center;}
.mainBox h2{padding:1% 0% 2% 0%;font-size: 35px;text-align: center;margin: auto;color: #fff;line-height: 1.6; width: 50%;}

/*----------------------------------------------------------------------------
 ***                                                                mainImgBox
----------------------------------------------------------------------------*/
/*#inner_linkBox*/
#inner_linkBox{display: flex; justify-content: space-around; align-items: center; max-width: 1000px; margin: 5em auto; width: 90%;}
#inner_linkBox div{width: calc(85% / 3); margin: 0.4em 0;}

/*#vipBox*/
#vipBox{width: 90%; max-width: 1200px; margin: 0 auto 5em; background: #000; position: relative; padding: 1.5em;}
#vipBox h3{position: absolute; width: 80%; right: 0; left: 0; margin: 0 auto; top: 0;}
#vipBox .innerBox{padding: 8em 2.5em; border: solid 2px #e04709;}
#vipBox .firstBox .flexBox{display: flex; color: #fff; justify-content: center; font-size: 120%; font-weight: bold; margin-bottom: 1em;}
#vipBox .firstBox .flexBox p{background: #3e3a39; padding: 0.5em 1em; margin: 0 0.4em;}
#vipBox .firstBox .txt{text-align: center; color: #fff;}

#vipBox .slideBox{margin-top: 2em;}
#vipBox .slideBox li{margin: 0 2em;}
#vipBox .slideBox li img{width: 100%; height: auto; display: block; max-width: 100%;}
#vipBox .slide-arrow{width: 25px; height: 49px; position: absolute; border: none ;z-index: 90;cursor: pointer; top: 50%; transform: translateY(-50%);}
#vipBox .prev-arrow {background: url("../img/btn_slide.png"); left: 8.7%; background-size: cover;}
#vipBox .next-arrow {background: url("../img/btn_slide02.png"); right: 8.7%; background-size: cover;}
/*ドットナビゲーションの設定*/
#vipBox .slick-dots {text-align:center;margin:2em 0 0.5em 0;}
#vipBox .slick-dots li{display:inline-block;margin:0 5px;transform:skew(-25deg,0deg);}
#vipBox .slick-dots button {
    color: transparent;
    outline: none;
    width:30px;/*ドットボタンのサイズ*/
    height:30px;/*ドットボタンのサイズ*/
    display:block;
    background:#ffffff;/*ドットボタンの色*/
	border: none;
}
.slick-slider {
        -ms-touch-action: auto!important;
        touch-action: auto!important;
}


#vipBox .overviewBox{margin: 8em auto 0;}
#vipBox .overviewBox .flexBox{display: flex; justify-content: space-between;}
#vipBox .overviewBox .flexBox .imgBox{width: 45%;}
#vipBox .overviewBox .flexBox .txtBox{width: 50%; color: #fff;}
#vipBox .overviewBox .flexBox .txtBox h4{font-size: 250%; font-weight: bold; border-bottom: solid 1px #fff; padding-bottom: 1em;}
#vipBox .overviewBox .flexBox .txtBox dl{display: flex; align-items: center; border-bottom: solid 1px #fff; padding: 2em 1em; line-height: 1.5;}
#vipBox .overviewBox .flexBox .txtBox dl span{display: inline-block; background: #826b41; padding: 0.3em 0.5em; margin-top: 5px;}
#vipBox .overviewBox .flexBox .txtBox dl dt{width: 25%; font-weight: bold;}
#vipBox .overviewBox .flexBox .txtBox .txt{margin-top: 2em;}

#vipBox .benefitBox{width: 80%; margin: 8em auto 0;}
#vipBox .benefitBox h4{font-size: 250%; font-weight: bold; color: #fff; text-align: center; background: #434244; padding: 0.4em; margin-bottom: 0.8em;}
#vipBox .benefitBox .flexBox{display: flex; justify-content: space-between;}
#vipBox .benefitBox .flexBox div{width: 48%; background: #434244; padding: 1em;}
#vipBox .benefitBox .flexBox div p{text-align: center; color: #fff;}
#vipBox .benefitBox .flexBox div .img{width: 20%; margin: 0 auto;}
#vipBox .benefitBox .flexBox div .number{font-size: 200%; font-weight: bold; margin: 0.2em auto;}
#vipBox .benefitBox .txt{width: 55%; margin: 2em auto; color: #fff; text-align: center;}

#vipBox .applyBox{width: 80%; margin: 8em auto 0;}
#vipBox .applyBox h4{font-size: 250%; font-weight: bold; color: #fff; text-align: center; background: #434244; padding: 0.4em; margin-bottom: 0.8em;}
#vipBox .applyBox .txt{text-align: center; color: #fff;}
#vipBox .applyBox .btn{text-align: center; margin: 1em auto 3em; font-size: 145%;}
#vipBox .applyBox .btn a{background: #e04709; display: inline-block; font-weight: bold; padding: 0.3em 3em 0.7em;}
#vipBox .applyBox .btn a span{font-size: 65%;}
#vipBox .applyBox .note{color: #fff;}
#vipBox .applyBox .note .ttl{margin-bottom: 2em;}


/*#suiteABOX*/
#suiteABOX{width: 90%; max-width: 1200px; margin: 0 auto 5em; background: #000; position: relative; padding: 1.5em;}
#suiteABOX h3{position: absolute; width: 80%; right: 0; left: 0; margin: 0 auto; top: 0;}
#suiteABOX .innerBox{padding: 8em 2.5em; border: solid 2px #e04709;}
#suiteABOX .firstBox .flexBox{display: flex; color: #fff; justify-content: center; font-size: 120%; font-weight: bold; margin-bottom: 1em;}
#suiteABOX .firstBox .flexBox p{background: #3e3a39; padding: 0.5em 1em; margin: 0 0.4em;}
#suiteABOX .firstBox .txt{text-align: center; color: #fff;}

#suiteABOX .slideBox{margin-top: 2em;}
#suiteABOX .slideBox li{margin: 0 2em;}
#suiteABOX .slideBox li img{width: 100%; height: auto; display: block; max-width: 100%;}
#suiteABOX .slide-arrow{width: 25px; height: 49px; position: absolute; border: none ;z-index: 90;cursor: pointer; top: 50%; transform: translateY(-50%);}
#suiteABOX .prev-arrow {background: url("../img/btn_slide.png"); left: 8.7%;bottom: 0; background-size: cover;}
#suiteABOX .next-arrow {background: url("../img/btn_slide02.png"); right: 8.7%; bottom: 0; background-size: cover;}
/*ドットナビゲーションの設定*/
#suiteABOX .slick-dots {text-align:center;margin:2em 0 0.5em 0;}
#suiteABOX .slick-dots li{display:inline-block;margin:0 5px;transform:skew(-25deg,0deg);}
#suiteABOX .slick-dots button {
    color: transparent;
    outline: none;
    width:30px;/*ドットボタンのサイズ*/
    height:30px;/*ドットボタンのサイズ*/
    display:block;
    background:#ffffff;/*ドットボタンの色*/
	border: none;
}


#suiteABOX .overviewBox{margin: 8em auto 0;}
#suiteABOX .overviewBox .flexBox{display: flex; justify-content: space-between;}
#suiteABOX .overviewBox .flexBox .imgBox{width: 45%;}
#suiteABOX .overviewBox .flexBox .txtBox{width: 50%; color: #fff;}
#suiteABOX .overviewBox .flexBox .txtBox h4{font-size: 250%; font-weight: bold; border-bottom: solid 1px #fff; padding-bottom: 1em;}
#suiteABOX .overviewBox .flexBox .txtBox dl{display: flex; align-items: center; border-bottom: solid 1px #fff; padding: 2em 1em; line-height: 1.5;}
#suiteABOX .overviewBox .flexBox .txtBox dl dt span{display: inline-block; background: #826b41; padding: 0.3em 0.5em; margin-top: 5px;}
#suiteABOX .overviewBox .flexBox .txtBox dl dt{width: 25%; font-weight: bold;}
#suiteABOX .overviewBox .flexBox .txtBox dl dd span{font-size: 90%;}
#suiteABOX .overviewBox .flexBox .txtBox .txt{margin-top: 1em;}

#suiteABOX .benefitBox{width: 80%; margin: 8em auto 0;}
#suiteABOX .benefitBox h4{font-size: 250%; font-weight: bold; color: #fff; text-align: center; background: #434244; padding: 0.4em; margin-bottom: 0.8em;}
#suiteABOX .benefitBox .flexBox{display: flex; justify-content: space-between;}
#suiteABOX .benefitBox .flexBox div{width: 31%; background: #434244; padding: 1em;}
#suiteABOX .benefitBox .flexBox div p{text-align: center; color: #fff;}
#suiteABOX .benefitBox .flexBox div .img{width: 20%; margin: 0 auto;}
#suiteABOX .benefitBox .flexBox div .number{font-size: 200%; font-weight: bold; margin: 0.2em auto;}
#suiteABOX .benefitBox .txt{width: 64%; margin: 2em auto; color: #fff;}

#suiteABOX .applyBox{width: 80%; margin: 8em auto 0;}
#suiteABOX .applyBox h4{font-size: 250%; font-weight: bold; color: #fff; text-align: center; background: #434244; padding: 0.4em; margin-bottom: 0.8em;}
#suiteABOX .applyBox .txt{text-align: center; color: #fff;}
#suiteABOX .applyBox .redtxt{text-align: center; color: #e84709; font-weight: bold; font-size: 130%; margin-top: 1em;}
#suiteABOX .applyBox .btn{text-align: center; margin: 1em auto 3em; font-size: 145%;}
#suiteABOX .applyBox .btn a{display: inline-block; font-weight: bold; padding: 0.5em 2em 0.7em; border: solid 1px #fff;}
#suiteABOX .applyBox .note{color: #fff;}
#suiteABOX .applyBox .note .ttl{margin-bottom: 2em;}


/*#suiteBBOX*/
#suiteBBOX{width: 90%; max-width: 1200px; margin: 0 auto 5em; background: #000; position: relative; padding: 1.5em;}
#suiteBBOX h3{position: absolute; width: 80%; right: 0; left: 0; margin: 0 auto; top: 0;}
#suiteBBOX .innerBox{padding: 8em 2.5em; border: solid 2px #e04709;}
#suiteBBOX .firstBox .flexBox{display: flex; color: #fff; justify-content: center; font-size: 120%; font-weight: bold; margin-bottom: 1em;}
#suiteBBOX .firstBox .flexBox p{background: #3e3a39; padding: 0.5em 1em; margin: 0 0.4em;}
#suiteBBOX .firstBox .txt{text-align: center; color: #fff;}

#suiteBBOX .slideBox{margin-top: 2em;}
#suiteBBOX .slideBox li{margin: 0 2em;}
#suiteBBOX .slideBox li img{width: 100%; height: auto; display: block; max-width: 100%;}
#suiteBBOX .slide-arrow{width: 25px; height: 49px; position: absolute; border: none ;z-index: 90;cursor: pointer; top: 50%; transform: translateY(-50%);}
#suiteBBOX .prev-arrow {background: url("../img/btn_slide.png"); left: 8.7%;bottom: 0; background-size: cover;}
#suiteBBOX .next-arrow {background: url("../img/btn_slide02.png"); right: 8.7%; bottom: 0; background-size: cover;}
/*ドットナビゲーションの設定*/
#suiteBBOX .slick-dots {text-align:center;margin:2em 0 0.5em 0;}
#suiteBBOX .slick-dots li{display:inline-block;margin:0 5px;transform:skew(-25deg,0deg);}
#suiteBBOX .slick-dots button {
    color: transparent;
    outline: none;
    width:30px;/*ドットボタンのサイズ*/
    height:30px;/*ドットボタンのサイズ*/
    display:block;
    background:#ffffff;/*ドットボタンの色*/
	border: none;
}


#suiteBBOX .overviewBox{margin: 8em auto 0;}
#suiteBBOX .overviewBox .flexBox{display: flex; justify-content: space-between;}
#suiteBBOX .overviewBox .flexBox .imgBox{width: 45%;}
#suiteBBOX .overviewBox .flexBox .txtBox{width: 50%; color: #fff;}
#suiteBBOX .overviewBox .flexBox .txtBox h4{font-size: 250%; font-weight: bold; border-bottom: solid 1px #fff; padding-bottom: 1em;}
#suiteBBOX .overviewBox .flexBox .txtBox dl{display: flex; align-items: center; border-bottom: solid 1px #fff; padding: 2em 1em; line-height: 1.5;}
#suiteBBOX .overviewBox .flexBox .txtBox dl dt span{display: inline-block; background: #826b41; padding: 0.3em 0.5em; margin-top: 5px;}
#suiteBBOX .overviewBox .flexBox .txtBox dl dt{width: 25%; font-weight: bold;}
#suiteBBOX .overviewBox .flexBox .txtBox dl dd span{font-size: 90%;}
#suiteBBOX .overviewBox .flexBox .txtBox .txt{margin-top: 1em;}

#suiteBBOX .benefitBox{width: 80%; margin: 8em auto 0;}
#suiteBBOX .benefitBox h4{font-size: 250%; font-weight: bold; color: #fff; text-align: center; background: #434244; padding: 0.4em; margin-bottom: 0.8em;}
#suiteBBOX .benefitBox .flexBox{display: flex; justify-content: space-between;}
#suiteBBOX .benefitBox .flexBox div{width: 31%; background: #434244; padding: 1em;}
#suiteBBOX .benefitBox .flexBox div p{text-align: center; color: #fff;}
#suiteBBOX .benefitBox .flexBox div .img{width: 20%; margin: 0 auto;}
#suiteBBOX .benefitBox .flexBox div .number{font-size: 200%; font-weight: bold; margin: 0.2em auto;}
#suiteBBOX .benefitBox .txt{width: 64%; margin: 2em auto; color: #fff;}

/*#entranceBOX*/
#entranceBOX{width: 90%; max-width: 1200px; margin: 0 auto 5em; background: #000; position: relative; padding: 1.5em;}
#entranceBOX h3{position: absolute; width: 80%; right: 0; left: 0; margin: 0 auto; top: 0;}
#entranceBOX .innerBox{padding: 8em 2.5em; border: solid 2px #e04709;}
#entranceBOX .firstBox {width: 80%; margin: 0 auto;}
#entranceBOX .firstBox .txt{text-align: center; color: #fff;}
#entranceBOX .firstBox .img{margin-top: 2em;}

/*#restroomBOX*/
#restroomBOX{width: 90%; max-width: 1200px; margin: 0 auto 5em; background: #000; position: relative; padding: 1.5em;}
#restroomBOX h3{position: absolute; width: 80%; right: 0; left: 0; margin: 0 auto; top: 0;}
#restroomBOX .innerBox{padding: 8em 2.5em; border: solid 2px #e04709;}
#restroomBOX .firstBox {width: 80%; margin: 0 auto;}
#restroomBOX .firstBox .txt{text-align: center; color: #fff;}
#restroomBOX .firstBox .img{margin-top: 2em;}

/*#faqBOX*/
#faqBOX{width: 90%; max-width: 1200px; margin: 0 auto 5em; background: #000; position: relative; padding: 1.5em;}
#faqBOX .innerBox{padding: 8em 12em; border: solid 2px #e04709;}
#faqBOX .innerBox h3{color: #fff; font-weight: bold; font-size: 280%; margin-bottom: 1em;}
#faqBOX .toggle {display: none;}
#faqBOX .Label {padding: 1.5em 3em;; display: block; color: #fff; border-radius: 5px; width: 100%; margin: 10px auto 0; background: #3e3a39;}
#faqBOX .Label p{color: #fff; font-weight: bold; font-size: 120%;}
#faqBOX .Label p::before{content: ""; display: inline-block; background-image: url("../img/img_icon04.png"); background-size: cover; background-repeat: no-repeat; width: 20px; height: 28px; margin-right: 1em; vertical-align: bottom;}
/*#faqBOX .Label::before{content:""; width: 20px; height: 20px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 25px; transform: rotate(135deg);}*/
#faqBOX .Label::before {content: ""; width: 20px; height: 20px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; top: 45%; right: 25px; transform: translateY(-50%) rotate(135deg); /* ←デフォルトは「＞」 */ transition: transform 0.3s ease; /* 開閉アニメーション用 */}
/* 開いたときの矢印 */
#faqBOX .Label.open::before {transform: translateY(-50%) rotate(-45deg); /* ↓に変更 */}
#faqBOX .Label,
#faqBOX .content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
#faqBOX .content {height: 0; margin-bottom:25px; padding:0 20px; overflow: hidden;}
#faqBOX .toggle:checked + .Label + .content {height: auto; padding:20px ; transition: all .3s;}
#faqBOX .toggle:checked + .Label::before {transform: rotate(-45deg) !important;}
#faqBOX .content li{margin: 0 auto; padding: 1em 0; width: 100%; font-weight: bold; color: #fff; line-height: 1.5;}
#faqBOX .content li a{color: #333333;}
/*----------------------------------------------------------------------------
 ***                                                                 footer
----------------------------------------------------------------------------*/

/* linkbox */
#linkBox{background: url(/files/user/_/suite-room25-26/img/img_bg02.jpg);background-position: bottom center;background-size: cover;background-repeat: no-repeat;padding: 2em 0;}
#linkBox dt{  margin:0 auto 1em;text-align: center;}
#linkBox dd{ font-weight:bold; line-height:2em; text-align:center; color:#FFF;font-size: 130%;}
#linkBox dd img{ padding:0 0.5em; height:auto;}
#linkBox .ftShBtn{ padding-top:40px;}
#linkBox .shTxt{ color:#FFF; text-align:center; font-size:90%; font-weight:bold;}
#linkBox ul{ text-align:center;}
#linkBox li p{ display:inline-block;}
#linkBox .fb-share-button,
#linkBox .tw-share-button{ font-size:80%; padding:1em 20px 0 20px; line-height:0.8em;}
#linkBox .insImgLi{ padding-top:10px;}
#linkBox .insImgLi img{ width:130px;}


/* footer */
#pageFooter{ background:#000;}
#pageFooter .footerInner{ padding:1% 1%;}
#pageFooter dl{ float:left; width:60%;}
#pageFooter dt{ width:7%; float:left;}
#pageFooter dd{ float:left; font-size:80%; color:#FFF; padding:3% 0 0 2%;}
#pageFooter  p{ float:right; font-size:80%; color:#FFF; padding-top:1.5%;}



@media screen and (max-width: 1200px) and (min-width: 951px){
	#pageHeader .headerInner ul{padding: 0px 0 0px 2%;}
	#pageHeader .headerInner li{padding:3% 2%; }
    
    #inner_linkBox div{width: calc(95% / 3);margin: 0.4em 0;}
    
    #vipBox .slick-slider .slick-list{padding:0 calc(66% - 350px) 0 calc(66% - 350px)!important}
}