@charset "utf-8";

* {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
}

#main h2 {
	display: block;
	-webkit-margin-before: 0.83em;
	-webkit-margin-after: 0.83em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	font-weight: bold;
}
#main h3 {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
#main h4 {
    display: block;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

.select_img a:hover img{
opacity: 0.8;}

/*----------------------------------------
ヘッダー＆フッター
----------------------------------------*/
#change-area,
.calendar-popup,
.modal-popup,
#adArea {
	display: none;
}
#footer .footer01 .body {
	width: 960px;
}
/*----------------------------------------
 印刷用
----------------------------------------*/
@media print{
	#wrap #header_nav,
	#wrap #footer_nav,
	#wrap #t-header,
	#wrap #all-footer,
	#wrap .smp-area,
	#adArea {
		display: none;
	}
}
/*----------------------------------------
 基本設定
----------------------------------------*/
body {min-width: 100%;overflow-x: hidden;margin: 0;}

#main{
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

/* リンク設定
--------------------*/
a:link {
	color: #1E51C6;
	text-decoration: none;
}
a:visited {
	color: #1E51C6;
	text-decoration: none;
}
a:hover {
	color: #00A8EC;
	text-decoration: underline;
}
a:active {
	color: #00A8EC;
	text-decoration: none;
}

/*----------------------------------------
 ナビゲーション
----------------------------------------*/
.contents nav{
	clear: both;
}



/* パンくず
--------------------*/

#breadcrumb{ color:#0058a0;}

/*----------------------------------------
 汎用セレクタ・クラス
----------------------------------------*/
.contents h1,.contents h2,.contents h3 {
	font-weight: bold;
	line-height: 1.2;
}
/* .contents p {
	margin-bottom: 2em;
} */
div {
	position: static;
}
.contents section {
	clear: both;
	text-align: left;
}
.contents small {
	font-size: .85em;
}
.clear {
	clear: both;
}
.txt_center {
	text-align: center;
}
.txt_right {
	text-align: right;
}
.txt_left {
	text-align: left;
}
/* パディングとボーダーを幅と高さに含める */
/**, *::before, *::after {
	box-sizing: border-box;
}*/
/* clearfix
--------------------*/
div:not(.cl)::after,
ul::after,
ol::after,
dl::after,
.cf::after {
	display: block;
	clear: both;
	content: "";
}



/* ボタン 標準（共通）
--------------------*/
.contents a.btn {
	display: inline-block;
	vertical-align: middle;
	border-radius: .2em;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	margin: .5em 0;
	padding: .5em 2em .5em 1em;
}
.contents a.btn:link,
.contents a.btn:visited {
	background : linear-gradient(to bottom, #ffffff, #e9e9e9);
	border: 1px solid #bbb;
	color: #555;
}
.contents a.btn:hover,
.contents a.btn:active {
	border:1px solid #bbb;
	background: #e9e9e9;
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.6);
	color: #aaa;
}
.contents a.btn:after {
	content: '\f054';
	font-family: "fontawesome";
	margin-left: .3em;
}
/* ボタン 紺 */
.contents a.btn-navy:link,
.contents a.btn-navy:visited {
	background : linear-gradient(to bottom, #004098, #013377);
	border: 1px solid #0664E6;
	color: #fff;
}
.contents a.btn-navy:hover,
.contents a.btn-navy:active {
	border:1px solid #0664E6;
	background: #013377;
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.6);
	color: #ddd;
}
/* ボタン 赤 */
.contents a.btn-red:link,
.contents a.btn-red:visited {
	background : linear-gradient(to bottom, #E94E37, #D6371F);
	border: 1px solid #FF6B55;
	color: #fff;
}
.contents a.btn-red:hover,
.contents a.btn-red:active {
	border:1px solid #FF6B55;
	background: #D6371F;
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.6);
	color: #eee;
}
/* ボタン 幅いっぱい */
.contents a.btn_block {
	display: block;
}
/* ボタン 大 */
.contents a.btn_large {
	font-size: 1.7em;
}
/* ボタン 中 */
.contents a.btn_middle {
	font-size: 1.3em;
}

/* フィルタ
--------------------*/
p.filter_tit {
	text-align: center;
	margin-bottom: 1em;
}
#filter {
	text-align: center;
}
#filter li {
	display: inline-block;
	cursor: pointer;
	background: #FF939B;
	border-radius: 20px;
	color: #fff;
	padding: 8px 20px;
	margin: 5px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	transition: .2s;
}
#filter li.active,
#filter li:hover {
	background: #d00;
	color: #fff;
	transform: scale(1.2);
}
#fairTour .filterlist div{
	width:960px;
	margin:1em auto;
	background:#CCC;
}
/* 横幅いっぱい 
.widearea {
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
}
*/

/* flexbox */
.flexbox {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
/* 3要素ずつ並べる時に必要。足りない時に要素を追加して真ん中が空くのを防ぐ
.flexbox:after{
	content:"";
	display: block;
	width: 31.3%;
} */
/* safari7以下用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .flexbox {
				display: block;
	}
	::i-block-chrome, .flex-item {
		display: inline-block;
		vertical-align: top;
	}
}





/*----------------------------------------
特集用　▼ここから記述
----------------------------------------*/



/* 共通
------------------------------*/
.content{
/*	margin-bottom: -30px;*/
}
#meinbg{
	float: right;
	width: 50%;
	background-color: rgba(255,255,255,0.8);
}
.pointImg{
	width: 100%;
	margin: 0;
	padding: 0;
	letter-spacing: -.4em;
}
.pointImg li{
	display: inline-block;
	margin: 3% 1%;
	width: 31%;
	list-style: none;
	text-align: center;
	line-height: 100%;
	padding-bottom: 5px;
	letter-spacing: normal;
	position: relative;
	transform: scale(0, 0);
	z-index: 1;
}
.pointImg li::after,.pointImg li::before{
	content:"";
	position: absolute;
	background: url(../images/awa.png) center center no-repeat;
	background-size: cover;
	width: 62.5px;
	height: 40.5px;
	z-index: -1;
}
.pointImg li::after{
	bottom: -15px;
	right: -15px;
	transform: scale(-1, -1);
}
.pointImg li::before{
	top: -15px;
    left: -15px;
}
.pointImg li img{
	width: 100%;
	transition: .8s;
}

.imgMove{
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1.5s;
	-ms-animation-duration:1.5s;
	animation-duration:1.5s;
	-webkit-animation-name:imgMove;
	-ms-animation-name: imgMove;
	animation-name: imgMove;
	visibility: visible !important;
}

@-webkit-keyframes imgMove {
	0% { opacity: 0; -webkit-transform: scale(0, 0); }
	95% { opacity: 1; -webkit-transform: scale(1.01, 1.01); }
	100% { opacity: 1; -webkit-transform: scale(1, 1); }
}
@keyframes imgMove {
	0% { opacity: 0; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); }
	95% { opacity: 1; -webkit-transform: scale(1.01, 1.01); -ms-transform: scale(1.01, 1.01); transform: scale(1.01, 1.01); }
	100% { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }
}

.pointImg li p{
	font-size: 13px;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	width: 100%;
	position: absolute;
	bottom: 5px;
	left: 0;
	margin: 0;
	padding: 5px 0;
}
.no_text{
	padding-bottom:0 !important;
}

#contentBox{
	padding: 20% 5% 5%;
	color:#000;
}
.point{
	counter-reset: number 0;
}

#contentBox h2{
	text-align: center;
	font-size: 35px;
}
#contentBox h2 span{
	background: linear-gradient(transparent 60%, #ffff66 60%);
}
#contentBox h3 {
	display: flex;
	align-items: center;
	font-size: 25px;
}
#contentBox h3:before,
#contentBox h3:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
}
#contentBox h3:before {
	margin-right: 1rem;
}
#contentBox h3:after {
	margin-left: 1rem;
}
#contentBox h4{
	font-size: 24px;
	padding-left:1.5em;
	text-indent:-1.5em;
}
#contentBox h4::before {
	counter-increment: number 1; 
	content: "0"counter(number) ".";
	font-size: 30px;
}
#contentBox h4 span{
	background: linear-gradient(transparent 60%, #ffff66 60%);
}
.point_box{
	margin: 50px 0 100px;
    font-size: 16px;
    line-height: 180%;
}

.notes{
	font-size: 12px;
}
#other{
	margin: 50px 0;
    font-size: 16px;
    line-height: 180%;
}
#other > ul{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	display:flex;
}
#other ul li{
	margin: 10px;
	list-style: none;
	width: 100%;
	max-width: 480px;
}
#other ul li img{
	width: 100%;
}
#tel{
	width: 100%;
	background: #fff;
}
#telbox{
	max-width: 960px;
	padding: 50px 0;
	margin: 30px auto 0; 
}

/* ナビ
------------------------------*/
#fixedBox{
	margin: 0;
}
#navbox{
	background:#0077BE;
	border-top: 5px solid #FFCB22;
	width: 100%;
	height: 42px;
	padding: 0;
	margin: 0;
	position: relative;
}
#navbox::after{
	content:"";
	background: url(../images/wave02.png) center center repeat-x;
	width: 100%;
	display: block;
	position: absolute;
	height: 17px;
	bottom: -16px;
	left: 0;
}
#navbox ul{
	width: 960px;
	margin: 0 auto ;
	display: flex;
	padding: 0;
}

#navbox li{
	list-style: none;
	width: 25%;
	font-weight: bold;
	text-align: center;
	border-left: 1px dotted #fff;
	box-sizing: border-box;
}
#navbox li img{
	width: 100%;
}
#navbox li a{
	font-size:16px;	
	width: 100%;
	padding: 10px 0;
	display: block;
	position: relative;
	color: #fff;
	text-decoration: none;
}
#navbox li a:hover{
	color: #ffff66;
	text-decoration: none;
}
#navbox li.nav-on a{
	color: #ffff66;
	text-decoration: none;
}

#navbox li:nth-last-child(1){
	border-right: 1px dotted #fff;
	opacity: 1 !important;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}


/* 各ページ設定
------------------------------*/
/**トップ**/
#top{
	background: url(../images/top/bg.png) center center / cover no-repeat fixed;
	padding: 0;
	counter-reset: number 0; 
}
.ipad #top{
	background: none;
}
.ipad #top::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(../img/top/bg.png) center/cover no-repeat; 
	-webkit-background-size:cover;
}


#toptext{
	padding: 50px 0;
	margin:  0 auto;
	width: 960px;
}
#toptext h2{
	text-align: center;
    font-size: 35px;
}
#topSelect{
	width: 100%;
	background-color: rgba(255,255,255,0.6);
	padding: 20px;
}

#topSelect ul{
	display: flex;
	min-width: 960px;
	max-width: 1400px;
	margin:  0 auto;
	padding: 20px 0;
}
#topSelect ul li{
	width: 23%;
	margin: 1%;
}
#topSelect ul li img{
	width: 100%;
}
#topSelect ul li:nth-child(odd){
	transform: translateY(-5%);
}
#topSelect ul li:nth-child(even){
	transform: translateY(5%);
}

.select_title{
	font-size: 24px;
	padding-left:2em;
	text-indent:-2em;
	line-height: 120%;
}
.select_title::before {
	counter-increment: number 1; 
	content: "0"counter(number) ".";
	font-size: 30px;
}
.select_title span{
	background: linear-gradient(transparent 60%, #ffff66 60%);
}
.select_text{
	line-height: 150%;
}
.select_img{
	position: relative;
}
.select_img::after{
	content: "詳しくはこちら\00a0\0bb";
    background: #333333;
    position: absolute;
    bottom: 10px;
    right: 30px;
    color: #fff;
    padding: 5px 20px;
}

/**グルメ**/
#gourmet{
	background: url(../images/gourmet/bg.jpg) center center / cover no-repeat fixed;
}

.ipad #gourmet{
	background: none;
}
.ipad #gourmet::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(../images/gourmet/bg.jpg) center/cover no-repeat; 
	-webkit-background-size:cover;
}
/**エンターてーメント**/
#entertainment{
	background: url(../images/entertainment/bg.jpg) center center / cover no-repeat fixed;
}

.ipad #entertainment{
	background: none;
}
.ipad #entertainment::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(../images/entertainment/bg.jpg) center/cover no-repeat; 
	-webkit-background-size:cover;
}
/**スパ**/
#relax{
	background: url(../images/relax/bg.jpg) center center / cover no-repeat fixed;
}

.ipad #relax{
	background: none;
}
.ipad #relax::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(../images/relax/bg.jpg) center/cover no-repeat; 
	-webkit-background-size:cover;
}
/**客室とサービス**/
#facilities{
	background: url(../images/facilities/bg.jpg) center center / cover no-repeat fixed;
}
.ipad #facilities{
	background: none;
}
.ipad #facilities::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(../images/facilities/bg.jpg) center/cover no-repeat; 
	-webkit-background-size:cover;
}
#sabNav{
	max-width: 660px;
	margin: 50px auto;
	letter-spacing: -.4em;
}
#sabNav li{
	display: inline-block;
	letter-spacing: normal;
	box-sizing: border-box;
	margin: 0 0 0 15px;
	font-size: 14px;
}
#sabNav li a{
	text-decoration: underline;
}
#sabNav li a::before{
	content:"\025bc";
	display: inline-block;
	margin: 0 5px;
}
.point_table{
	max-width: 580px;
	margin: 0 auto;
	border-collapse: collapse;
}
.point_table th{
	border: 1px solid #ccc;
	background: #f5f5f5;
	width: 15%;
}
.point_table td{
	border: 1px solid #ccc;
	width: 85%;
	padding: 3%;
}
.point_table_text{
	
}
.point_table_benefits{
	font-weight: bold;
	margin: 0;
	padding: 0;
}
.point_table_circle{
	margin: 0;
	padding: 0;
	padding-left:0.5em;
	text-indent:-0.5em;
}
.point_table_circle::before{
	content: "\02022";
    display:inline-block;
    color: #fed627;
}

#grade,#type{
	counter-reset: number 0;
}
.cabin{
	letter-spacing: -.4em; 
}
.cabin h4{
	margin: 0 0 1.4em;
}
.cabin > div{
	width: 58%;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	margin: 1%;
}
.cabin > ul{
	width: 38%;
	display: inline-block;
	letter-spacing: normal;
	margin: 1%;
}
.cabin li{
	width: 100%;
}
#suiteBox{
	width: 100%;
}
#suite{
	letter-spacing: -.4em; 
	font-size: 14px;
}
#suite p{
	box-sizing: border-box;
	margin: 0;
	padding: 5px;
	line-height: 150%;
}
#suite li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 31%;
	margin: 1%;
	box-sizing: border-box;
	border: 1px solid #000;
	background: #fff;
}
#suite li img{
	width: 100%;
}
.suite_title{
	width: 100%;
	background: #000;
	color: #fff;
	text-align: center;
}
.supplement{
	text-align: right;
	font-size: 12px;
}
.suiteBox{
	padding: 5px;
	border-top: 1px solid #ccc;
}
.suiteBox p{
	font-size: 13px;
}
.suiteBox p span{
	font-weight: bold;
}
.suiteBox p.notes{
	font-size: 12px;
	border-top: 1px solid #ccc;
	margin: 10px 0 0;	
}
#planBtn{
	width: 240px;
    text-align: center;
    font-weight: bold;
}
#planBtn a{
	display: block;
    padding: 10px 0;
    background: #fff;
    color: #333333;
    border-radius: 3px;
    border: 1px solid #ccc;
	width: 100%;
	position: relative;
}
#planBtn a::after{
	content:"\0bb";
	display: inline-block;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right: 3%;
}
.serviceBox{
	background: #fff;
	padding: 10px;
	margin: 20px 0;
}
.serviceBox > div{
	display: flex;
}
.serviceBox  > div > p:nth-child(1){
	width: 38%;
	margin: 1%;
}
.serviceBox  > div > p:nth-child(1) img{
	width: 100%;
}
.serviceBox  > div > div:nth-child(2){
	width: 58%;
	margin: 0 1%;
}
.serviceBox  > div > div:nth-child(2) > h4{
	margin: 0;
	padding: 0;
}

.serviceBox table{
	width: 100%;
	border-collapse: collapse;
}
.serviceBox table th{
	vertical-align: middle;
	text-align: center;
	width: 25%;
	border: 1px solid #ccc;
}
.serviceBox table td{
	vertical-align: middle;
	padding: 2%;
	width: 75%;
	border: 1px solid #ccc;
}
.serviceBox table td p.point_table_circle{
	display: inline-block;
	margin: 0 1%;
}
#sameBox{
	display: block;
	width: 100%;
	padding: 5%;
}
#sameBox dt{
	font-weight: bold;
}
#sameBox dd{
	margin-bottom: 10px;
}
.same{
	margin: 0;
	padding: 0;
	padding-left:0.5em;
	text-indent:-0.5em;
}
.same::before{
	content: "\025c6";
    display:inline-block;
    color: #006fb9;
}
#sameBox p{
	width: 100% !important;
	margin: 0;
}
#facility li{
	margin: 0;
	padding: 0;
	padding-left:0.5em;
	text-indent:-0.5em;
}
#facility li::before{
	content: "\02022";
    display:inline-block;
    color: #fed627;
}
/* ページトップ
------------------------------*/
#pagetop{
    display: none;
    position: fixed;
    right: 25px;
    bottom: 35px;
    filter:alpha(opacity=80); 
    opacity:0.8;
    z-index: 1500;
	width: 100px;
}
#pagetop img{
	width: 100%;
}
#pagetop:hover{
    filter:alpha(opacity=50); 
    opacity:0.5;
}


/* 必ずお読みください
------------------------------*/
#notice {
	background: #fff;
	border: 1px solid #ccc;
	margin-bottom: 2em;
}
#notice h4 {
	background: #eee;
}
#notice ul {
	margin: .5em 20px 1.5em;
}
#notice li {
	list-style-type: disc;
	margin-left: 1.5em;
}
#notice p {
	margin: .5em 20px 1.5em;
}
#header #header_Right #accountMenu{padding:0;}
#header #header_Right #accountMenu03{top:0;}


/* ie11
------------------------------*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #header #header_Right #accountMenu03{
    top:10px;
  }
}

#footer{margin-top: 0;}