@charset "utf-8";
/* CSS Document */
#contents img {
	width:100%;
	max-width: 100%;
	height: auto;}
div, section{
	display:block;}
.mt20{
	margin-top: 20px;}
.mt30{
	margin-top: 30px;}
.mt40{
	margin-top: 40px;}
.mt50{
	margin-top: 50px;}
.mt60{
	margin-top: 60px;}
.mt150{
	margin-top: 150px !important;
	display: block;}
.mt500{
	margin-top: 500px;
	display: block;}
.space100{
	margin-top: 200px;
	display: block;}
.mb30{
	margin-bottom: 30px;}
.mb40{
	margin-bottom: 40px;}
.mb50{
	margin-bottom: 50px;}
.mb100{
	margin-bottom: 100px;}
.mb150{
	margin-bottom: 150px;}
.ml30{
	margin-left: 30px;}
.page_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
 	background: url(../room/img/room_icatch.jpg) center center / cover no-repeat;}
.left003{
	display:block;
	float:left;
	max-width:400px;
	width:100%;
	margin:1em 20px 1em 0; }
.right003{
	display:block;
	float:right;
	max-width:560px;
	width:100%;
	margin:1em 0; }
.large{
	color:#3F73AB;
	font-size:18px;
	font-weight:bold;}
.small{
	font-size: 0.7em;
	line-height: 1.2;}
.red{
	color:#f00;}
/*================================================
 * 館内施設
 ================================================*/
.page_facility{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/facility/facility.jpg) center center / cover no-repeat;
}
.facility{
	display: block;
	margin: 2em auto;
}
.left004{
	max-width:550px;
	margin-right: 30px;
	width: 100%;
	float:left;
}
.right004{
	max-width: 400px;
	width: 100%;
	float: right;
}

/*================================================
 * ライブビュー
 ================================================*/

.page_live{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/live.jpg) center center / cover no-repeat;
}
.sea{
	max-width: 854px !important;
	width: 100%;
	/*max-height: 480px;
	height: 90%;*/
	height: auto;
}
/*ユーチューブレスポ*/
.live{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.live iframe{
	position:absolute;
	top:0;
	left:0;
	/*max-width: 960px;*/
	width: 100% !important;
    height: 100% !important;
}
.bnr{
	max-width: 400px;
	width: 50%;
	text-align: center;
	margin: 1em auto 3em;
}
.bnr img {
	box-shadow: 2px 2px 2px #666;
}
.weather{
	max-width: 350px;
	width: 100%;
	height: auto;
	display: block;
	margin: 3em auto 5em !important;
}
#ppwj_388e9994-7bcd-42eb-9fb8-390170e28ec9{
	margin: 0 auto;
	max-width: 350px;
	width: 100%;
	height: auto;
}
.mb30{
	margin-bottom: 30px;
}
/*================================================
 * reservation
 ================================================*/

.page_reservation{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/reservation.jpg) center center / cover no-repeat;
}
/*================================================
 * contact
 ================================================*/

.page_contact{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/contact.jpg) center center / cover no-repeat;
}
/*================================================
 * access
 ================================================*/
.access{
	max-width: 750px;
	width: 100%;
	height: auto;
	margin: 3em auto;
}
.access img{
	max-width: 750px;
	width: 100%;
	height: auto;
}
.rentacar{
	margin: 3em auto;
}
.rentacar1{
	margin: 1em auto 2em;
}
.access a, .facility a{
	text-decoration: underline;
	color: #3F73AB;
}
.accesss a:hover, .facility a:hover {
	text-decoration: none;
	color:#FACA3A;
}
/*#contents img {
	width:100%;
	max-width: 100%;
	height: auto;
}*/
/*グーグルマップ*/
.google-maps {
position: relative;
padding-bottom: 30%; /* これが縦横比*/
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
@media (max-width: 767px) {

}
/*================================================
 * activity
 ================================================*/

.activity_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../activity/img/page_activity.jpg) center center / cover no-repeat;
}
.col_3 {
	overflow:hidden;
	max-width:100%
}
.col_3 ul {
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_3 li {
	list-style:none;
	float:left;
	width:31.2%;
	margin:0 2% 3% 0;
}
.col_3 li:nth-child(3n+1) {
	clear:both;
}
.col_3 li img {
	width:100%;
	margin-bottom:2.5%;
}
.fee{
	text-align: right;
}
/*================================================
 * tourist
 ================================================*/
.tourist_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/tourist/page_tourist.jpg) center center / cover no-repeat;
}

/*================================================
 * plan
 ================================================*/
.big{
	font-size: 1.2em;
	font-weight: bolder;
	color:#3F73AB;
}
.private_img{
	max-width: 940px;
	width:100%;
	height: auto;
	text-align: center;
	margin: 3.5em auto;
}
.time_img{
	width: 100%;
  	height: 0;
  	/*padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/tourist/page_tourist.jpg) center center / cover no-repeat;*/
	padding-top: calc(330 / 2048 * 100%); 
	background: url(../plan/img/time.jpg) center center / cover no-repeat;
}
.space{
	max-width:900px;
	width:100%;
	height:auto;
	margin:2em auto;
}
.photo img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
/* 吹き出し本体 - 左右の中心 */
.flow{
  position: relative;
  padding: 20px;
  min-height: 180px;
  /*background-color:#F2F2F2;*/
  margin:2em auto;
  text-align:center;
  font-weight:bold;
  /*border-radius:10px;*/
  font-size:1.2em;
  background: #ffffff;
  box-shadow: inset 0 0 30px rgba(230,220,228,0.8);
  display: block;
  /*border:solid 1px #686868; */
}
/* 三角アイコン - 左右の中心 */
.flow::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #F2F2F2;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.last{
	position: relative;
	padding: 20px;
	min-height: 180px;
	background-color:#Fff;
	margin:2em auto 6em;
	font-size:1.2em;
	box-shadow: inset 0 0 30px rgba(230,220,228,0.8);
  	display: block;
}
.item{
	max-width: 800px;
	width: 90%;
	padding: 20px;
	min-height: 180px;
	margin:1em auto;
	font-weight:bold;
	font-size:1.2em;
	display: block;
	border-bottom:dotted 6px #87b5de;
}

.time{
	max-width: 500px;
	width: 100%;
	display: block;
	position: absolute;
	left:20px;
	top:20px;
}
.photo{
	max-width: 300px;
	width: 100%;
	display: block;
	position: absolute;
	right:20px;
	top:20px;
}
.time2{
	max-width: 430px;
	width: 100%;
	height: auto;
	display: block;
	float: left;
}
.photo2{
	max-width: 300px;
	width: 100%;
	height: auto;
	display: block;
	float: right;
}

.time h1, .item h1{
	font-size: 24px;
	margin: 0 0 15px;
	color: #87b5de;
	/*color:#3F73AB;*/
	text-align: left;
}
.time p, .item p{
  margin: 0 0 10px;
  text-align: left;
  max-width: 550px;
}
.detail{
	font-size: 0.85em;
	max-width: 500px;
	display: block;
}
.application li{
	list-style-type: none;
	float: left;
	margin-right: 20px;
}
.download li a{
	text-decoration: underline;
	font-size: 1.1em;
	margin: 1em auto;
	line-height: 2.4;
	padding: 2px;
	
}
.download li a:hover{
	text-decoration: none;
	background-color:#FBCA3B;
	color:#3F73AB;
}
.butler{
	border-top:dashed 1px #3F73AB;
	padding-top: 14px;
	width: 80%;
	margin-bottom: 2em;
}
.large_b{
	font-weight: bold;
	color:#3F73AB;
}
/*================================================
 * Planのページだけデザインを変更　おかしい
 ================================================*/
.plan002_img{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../plan2/img/plan002.jpg) center center / cover no-repeat;
}
.h002{
	text-align: center;
	font-size: 20px;
	border: none;
	font-weight: bold;
}
.cr{
	font-size: 30px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	text-align: center;
	margin-bottom: 1.5em;
	font-weight: bold;
}
.text-center{
	text-align: center;
    vertical-align: middle;
}
.blue{
	color:#3F93DF;
}
.waku002{
	max-width: 980px;
	width: 100%;
	display: block;
	margin: 3em auto 4em;
}
.plan002{
	margin: 10em auto ;
	display: block;

}
.plan002 li{
	box-sizing: border-box;
	background-color:#EAE9E4;
	padding: 20px;
	max-width: 320px;
	width: 30.8%;
}
.plan002 li:last-child{
	margin-right: 0px;
}
.h004{
	border:none;
	color:#333;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size: 26px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}
.space002{
	margin: 3em auto;
}
/*================================================
 * Plan2 private plan 20200211
 ================================================*/
.h2003{
	border:none;
	border-left: 12px solid #3F73AB;
	font-size: 36px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-weight: bold;
	line-height: 0.8;
	padding-left: 0.3em;
	margin: 1em 0 0.6em; 
	}
.h2004{
	border:none;
	border-left: 10px solid #3F73AB;
	border-top: solid 1px #3F73AB;
	font-size: 30px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-weight: bold;
	line-height: 0.8;
	padding-left: 0.3em;
	margin: 1.5em 0 0.25em; 
}
.cre{
	font-weight: 500;
	font-size: 15px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}
.space003{
	line-height: 1.6;
}
.butler001{
	background:#EAE9E4;
	padding:1.5em;
	margin-top: 40px;
	margin-bottom: 36px;
	display: block;
}
.large_b002{
	font-size: 24px;
	font-weight: bold;
	color:#3F73AB;
}
.h3002{
	color:#3F73AB;
	background-color:#FFFFFF;
	font-size: 20px;
}
.table001 {
	max-width:600px;
	margin-bottom:4em;
	border-collapse:collapse;
	border:2px solid #fff;
	background:#fff;
}
.table001 th {
	padding:10px;
	text-align:left;
	vertical-align:middle;
	border:2px solid #fff;
	background:#EAE9E4;
	font-size: 1.1em;
	font-weight: bold;
	width: 20%;
}
.table001 td {
	padding:10px;
	text-align:left;
	border:2px solid #fff;
}
.large002{
	font-size: 30px;
	font-weight: bold;
}
.waku005{
	max-width: 980px;
	width: 100%;
	height: auto;
	display: block;
}
.left005{
	/*max-width:475px;*/
	width: 47.5% !important;
	height: auto;
	display: block;
	float: left;
	margin-right: 4.5%;
	background:#fff;
}
.right005{
	/*max-width:475px;*/
	width: 47.5%;
	height: auto;
	display: block;
	float: right;
}
.smk{
	max-width: 60px !important;
	height: auto;
	vertical-align:text-bottom;
}
.small_h3002{
	font-size: 0.8em;
	font-weight: bold;
}
.ul100 li{
	background:#EFEDE9;
	padding: 0.8em}
.ul100 li img{
	max-width: 209px;
	width: 100%;
	height: auto;
}

.top_btn002{
	width: 100%;
	height: 40px;
	text-align: center;
	color:#fff;
	font-weight: bold;
	background:#3F73AB;
	line-height:3 !important;
	margin: 0 auto;
	display: block
}
.top_btn002 a{
	color:#fff;
	display: block
}
.hr{
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	width: 90%;
	margin: 1em auto;
}
.another{
	width:680px;
	margin: 1em auto 6em;
}
.another li{
	/*max-width:350px; */
	list-style:none;
	display: block;
	font-size: 1.2em;
	height: 35px;
	text-align: center;
	line-height:3 !important;
	float: left;
	/*padding: 1em 3em;*/
}
.another li a{
	/*list-style:none;
	color:#3F73AB;
	background-color: #fff;
	border:solid 4px #3F73AB;
	display: block;
	padding: 10px 14px;
	text-decoration: none;
	font-size: 1em;
	margin-top: 16px;
	max-width:300px;
	width: 100%;
	text-align: center;
	font-weight: bold;*/
	background: #3F73AB;
	/*display: inline-block;*/
	padding: 0.8em 1em;
	text-decoration: none;
	color: #fff;
	border: solid 3px #3F73AB;
	border-radius: 3px;
	transition: .4s;
	font-weight: bold;
}
.another li a:hover{
	background: #fff;
	border: solid 3px #3F73AB;
    color:#3F73AB;
}
.plan_bottom{
	width: 550px;
	margin: 1em auto 6em;
}
.plan_bottom li{
	/*max-width:350px; */
	list-style:none;
	display: block;
	font-size: 1.2em;
	height: 35px;
	text-align: center;
	line-height:3 !important;
	float: left;
	/*padding: 1em 3em;*/
}
.plan_bottom li a{
	/*list-style:none;
	color:#3F73AB;
	background-color: #fff;
	border:solid 4px #3F73AB;
	display: block;
	padding: 10px 14px;
	text-decoration: none;
	font-size: 1em;
	margin-top: 16px;
	max-width:300px;
	width: 100%;
	text-align: center;
	font-weight: bold;*/
	display: inline-block;
	padding: 0.3em 1em !important;
	text-decoration: none;
	color: #3F73AB;
	border: solid 3px #3F73AB;
	border-radius: 3px;
	transition: .4s;
	font-weight: bold;
}
.plan_bottom li a:hover{
	background: #3F73AB;
    color: white;
}
.waku006{
	max-width: 980px;
	width: 100%;
	height: auto;
	display: block;
	margin: 1em auto 5em;
}

/*================================================
 * 一棟貸し　スライダー
 ================================================*/
.slider_space{
	max-width: 980px;
	width: 100%;
	height: 480px;
	margin: 2em auto;
	display: block;
}

/*================================================
 * plan 7ページの方
 ================================================*/

.col_4 {
	overflow:hidden;
	max-width:100%
}
.col_4 ul {
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_4 li {
	list-style:none;
	float:left;
	width:21%;
	margin:0 1% 3% 0;
}
.col_4 li:nth-child(4n+1) {
	clear:both;
}
.col_4 li img {
	width:100%;
	margin-bottom:2.5%;
}
.fee{
	text-align: right;
}
.smaii_h4{
	font-size: 0.9em;
}
.page_private05{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/adv.jpg) center center / cover no-repeat;
}
.page_private07{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/hashikui.jpg) center center / cover no-repeat;
}

/*================================================
 * 花火　に追加
 ================================================*/

/* --YouTubeサイズ調整-- */
.video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}



/*================================================
 * キャンセル規定　プラン2　に追加
 ================================================*/
.waku400{
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;}
.cancel{
    height: 0.2em;
}
/*================================================
 * privacypolicy
 ================================================*/
.page_privacy{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2480 * 100%); 
 	background: url(../img/privacy.jpg) center center / cover no-repeat;
}

/*================================================
 * メールフォーム
 ================================================*/
.page_form{
	width: 100%;
  	height: 0;
  	padding-top: calc(348 / 1920 * 100%); 
 	background: url(../contact/img/contact.jpg) center center / cover no-repeat;
}
.page_thanks{
	width: 100%;
  	height: 0;
  	padding-top: calc(400 / 2207 * 100%); 
 	background: url(../contact/img/thanks.jpg) center center / cover no-repeat;
}
.top_page{
	max-width: 300px;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 12em auto;
}
.top_logo01{
	margin-top: 1em;
	display: block;
}
.slider li{
	list-style-type: none;
}

/*================================================
 * メディアクエリ
 ================================================*/

@media screen and (max-width: 768px){
	.page_img, .page_facility, .activity_img, .tourist_img, .page_privacy{
		padding-top: calc(600 / 2480 * 100%);
	}
	.left003, .right003{
		float: none;
		margin: 1em auto 2em;
		text-align: center;
	}
	.left003 img{
		margin: 1em auto 3em;
	}
/*access*/
/*グーグルマップ*/
.google-maps {
padding-bottom: 40%; /* これが縦横比*/
	}
/*PLAN**************************************/
.detail{
	font-size: 0.85em;
	max-width:200px !important;
	}
	/*================================================
	 * plan 7ページの方
	 ================================================*/

	.col_4 li {
		width:20%;
	}
}



@media screen and (max-width: 610px){
	/* 吹き出し本体 - 左右の中心 */
	.flow{
	  position: relative;
	  padding: 15px;
	  min-height: 340px;
	  margin:2em auto;
	  font-size:1em;
	}
	.last{
		position: relative;
		padding: 15px;
		min-height: 340px;
		margin:2em auto 6em;
	}
	.time{
		max-width: 500px;
		width: 100%;
		position: absolute;
		left:20px;
		top:20px;
	}
	.photo{
		max-width: 300px;
		width: 100%;
		display: block;
		position: absolute;
		top:160px;
	   right:0px;
	   bottom:0px;
	   left:0px;
	   margin:auto auto;
	}
	.time h1, .time h1{
		font-size: 18px;
		margin: 0 0 8px;
	}
	.time p, .item p{
	  margin: 0 0 4px;
	  max-width: 550px;
	}
	.detail{
		font-size: 18px;
		max-width: 320px !important;
		width: 100%;
		display: block;
	}
	/*================================================
	 * plan 
	 ================================================*/

	.col_4 {
		overflow:hidden;
		max-width:100%
	}
	.col_4 ul {
		overflow:hidden;
		margin:2% -2% 0 0;
	}
	.col_4 li {
		list-style:none;
		float:left;
		width:43%;
		margin:0 2% 3% 0;
	}
	.another{
		width:610px;
		margin: 1em auto 6em;
	}
	.another li{
		font-size: 1.2em;
		height: 35px;
		line-height:3 !important;
		float: none;
		margin:0 auto 2.5em;
	}
	.plan_bottom{
		width: 550px;
		margin: 1em auto 6em;
	}
}

@media screen and (max-width: 550px){
	.col_3 li {
		float:none;
		width:100%;
		margin:0 2% 3% 0;
	}
	.col_3 li:nth-child(3n+1) {
		clear:both;
	}
	.col_3 li img {
		width:100%;
		margin-bottom:2.5%;
	}
}
@media screen and (max-width: 480px){
	.tourist .top_btn{
		display: block;
		margin-bottom: 3em !important;
	}
	.photo{
		position: absolute;
		top:180px;
	   right:0px;
	   bottom:0px;
	   left:0px;
	   margin:auto auto;
	}
	.waku005{
		max-width: 480px;
		width: 100%;
		height: auto;
	}
	.left005{
		width: 100% !important;
		float: none;
		margin-right: 0%;
	}
	.right005{
		width: 100%;
		float: none;
	}
	.h2004{
		font-size: 24px;
	}
	/*================================================
	 * plan 
	 ================================================*/

	.col_4 li {
		float:none;
		width:90% !important;
		margin:0 auto 3% ;
	}
	/******プラントップページ*****/
	.waku002{
		max-width: 480px;
		width: 100%;
		display: block;
		margin: 2em auto 3em;
	}
	.plan002{
		margin: 5em auto ;
		display: block;
	}
	.plan002 li{
		box-sizing: border-box;
		padding: 5%;
		max-width: 360px;
		width: 75%;
		margin: 2em auto;
	}
	.plan002 li:last-child{
		margin: 0px auto;
	}
	.h004{
		font-size: 20px;
		margin-bottom: 10px;
	}
	.space002{
		margin: 3em auto;
	}
	.another{
		max-width:320px;
		margin: 0.5em auto 1em;
	}
	.another li{
		font-size: 1.1em;
		height: 35px;
		line-height:3 !important;
		float: none;
		margin: 2em auto !important;
	}
	.plan_bottom{
		max-width: 340px;
		width: 100%;
		margin: 1em auto 2em;
	}
	.plan_bottom li{
		font-size: 0.8em !important;
		float: left !important;
	}
	.plan_bottom li a{
		padding: 0.3em 1em !important;
		color: #3F73AB;
		border: solid 3px #3F73AB;
		border-radius: 3px;
		transition: .4s;
		font-weight: bold;
	}
	.plan_bottom li a:hover{
		background: #3F73AB;
		color: white;
	}
}
@media screen and (max-width: 400px){
	.flow{
	  position: relative;
	  padding: 15px;
	  min-height: 360px;
	  margin:2em auto;
	  font-size:1em;
	}
	.photo{
		position: absolute;
		top:180px;
	   right:0px;
	   bottom:0px;
	   left:0px;
	   margin:auto auto;
	}
	.photo img{
	max-width: 260px;
	width: 90%;
	height: auto;
	}
	.detail{
		font-size: 0.85em;
		max-width: 270px !important;
		width: 90%;
	}
	/******プラントップページ*****/
	.cr{
		font-size: 24px;
	}
	.waku002{
		max-width: 480px;
		width: 100%;
		margin: 1.5em auto 2em;
	}
		.plan002{
			margin: 5em auto;
			display: block;
		}
		.plan002 li{
			box-sizing: border-box;
			padding: 5%;
			max-width: 400px;
			width: 96%;
			margin: 2em auto;
		}
}