@charset "utf-8";

/***************************************************************
style.css
***************************************************************/

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

/***********
 font size 
***********/
section.common-box h1.text-horizontal {
	font-size:3.6em;
}
section.content-box > h1,
section.info-box h1,
section.info-box h3 {
	font-size:3em;
}
section.common-box h1.text-vertical,
p.plan-reserve,
section.flow-box h1 {
	font-size:2.4em;
}
section.plan-box h1,
section.news-item h1,
section.plan-box-horizontal h1,
section.access-box h1 {
	font-size:2em;
}
footer#common-footer address,
footer#common-footer p#copyright,
section.common-box h2,
section.plan-box h2,
section.plan-box-horizontal h2,
div.guide-text table th,
div.guide-text table td,
section.info-box h2,
section.info-box table th,
section.info-box table td,
section.news-item h2,
section.price-box h1,
section.price-box h2,
dl.guide-list dt,
section.flow-box h2,
section.flow-box h3,
div.phone-number,
div.common-info {
	font-size:1.6em;
}
ul.item-list li,
dl.guide-list dd {
	font-size:1.4em;
}
div.warning-text {
	font-size:1.2em;
}


div.common-info {
}
i.material-icons {
	vertical-align:middle;
}
.phone-number,
.warning-text {
	font-weight:bold;
	display:inline;
}
.phone-number {
}
.warning-text {
	color:#C00;
}


/***********
 header
***********/
header#common-header {
}
header#common-header {
	position:relative;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	transition:.3s;
}
header#common-header.navi-fix {
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	background-color:rgba(255,255,255,0.9);
	-webkit-transition:all .4s ease 0s,background .6s ease .2s;
	transition:all .4s ease 0s,background .6s ease .2s;
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
	box-shadow:2px 2px 4px -2px #CCC;
	padding:0.2rem 0;
}

	header#common-header p#logo {
		width:200px;
		height:60px;
		float:left;
		margin:0 2em 0 0;
	}

/***********
 contents
***********/
div#contents {
	padding:3em 0;
}

/***********
 common-box
***********/
div#contents section.common-box {
	position:relative;
	width:100%;
}
	section.common-box div.common-box-item,
	section.common-box p.common-box-image {
		position:relative;
	}
	section.common-box p.common-box-image img {
		width:100%;
		height:100%;
		object-fit: cover;
	}
	section.common-box .common-box-20 {
	}
	section.common-box .common-box-40 {
	}
	section.common-box .common-box-60 {
	}
	section.common-box h1,
	section.common-box h2 {
		color:#004C66;
	}
	section.common-box h1.text-horizontal span {
		font-size:55%;
		display:block;
		border-bottom:1px solid #004C66;
		margin:3em 0 1.6em 0;
	}
	section.common-box h1.text-vertical {
	}
	section.common-box h2 {
		width:80%;
		text-align:left;
		margin:2em auto;
	}


/***********
 box width
***********/
section.content-box {
	max-width:1200px;
	width:100%;
	margin:6em auto;
}


/***********
 flex
***********/
div.flex-frame {
	width:100%;
	display:flex;
	flex-wrap:wrap;
}
div.flex-frame > section {
	margin-bottom:6em;
}


/***********
 content-box
***********/
section.content-box {
}
	section.content-box > h1 {
		margin:0 0 2em 0;
	}
	section.content-box > h1 span {
		display:block;
	}
	section.content-box > h1 span.title-image {
		width:70px;
		height:auto;
		margin:0.4em auto;
	}
	section.content-box > h1 span.title-sub {
		font-size:70%;
	}

/***********
 plan-reserve button
***********/
p.plan-reserve {
	background-color:#373737;
	color:#FFF;
	text-align:right;
	padding:0.3em 0.6em;
	position:relative;
}
	p.plan-reserve span::before {
		content:'';
		display:inline-block;
		width:18px;
		height:18px;
		background-image:url(../img/icons/08-arrow.png);
		background-size:contain;
		background-repeat:no-repeat;
		vertical-align:middle;
		margin:0 0.6em 0.2em 0;
	}
	p.plan-reserve span {
		border-right:4px dotted #FFF;
		padding:0 1em 0 0;
	}
	
	p.plan-reserve a {
		position:relative;
		display:block;
		width:100%;
		height:100%;
	}

/***********
 plan-box
***********/
section.plan-box {
	width:96%;
	margin:0 auto;
	background-color:#FFF;
	color:#004C66;
}
	section.plan-box p.plan-box-image {
		width:100%;
		max-height:220px;
	}
	section.plan-box h1,
	section.plan-box h2 {
		width:90%;
		text-align:left;
		margin:1.2em auto;
	}

/***********
 plan-box-horizontal
***********/
section.plan-box-horizontal {
	width:100%;
	display:table;
	margin:0 0 4em 0;
	background-color:#FFF;
	color:#004C66;
}
	section.plan-box-horizontal p.plan-box-h-image,
	section.plan-box-horizontal div.plan-box-text {
		display:table-cell;
		vertical-align:middle;
	}
	section.plan-box-horizontal p.plan-box-h-image {
		width:16%;
	}
	section.plan-box-horizontal div.plan-box-text {
		width:70%;
	}
	section.plan-box-horizontal h1,
	section.plan-box-horizontal h2 {
		width:90%;
		text-align:left;
		margin:1.4em auto;
	}


/***********
 item-list
***********/
ul.item-list {
	width:96%;
	margin:2em auto;
}
	ul.item-list li {
		text-align:left;
	}
	ul.item-list li span.item-icons {
		display:inline-block;
		width:30px;
		height:30px;
	}
	ul.item-list li span.season-name {
		font-size:76%;
		display:inline-block;
		border:1px solid #006666;
		border-radius:6px;
		padding:0 0.2em;
		margin:0 0.6em;
	}

/***********
 info-list
***********/
ul.info-list {
	width:90%;
	margin:0 auto;
}
	ul.info-list li {
		list-style-type:disc;
		list-style-position:outside;
	}
	ul.info-list li span {
		display:block;
		font-size:80%;
	}

/***********
 guide-list
***********/
dl.guide-list {
	width:96%;
	margin:0 auto;
}
	dl.guide-list dt,
	dl.guide-list dd {
		padding:0.4em;
		color:#666;
		margin:0 0 0.4em 0;
	}
	dl.guide-list dt {
		background:#BBDB98;
		box-shadow:0px 0px 0px 5px #BBDB98;
		border:dashed 1px #FFF;
		padding:0.2em 0.5em;
		color: #454545;
	}
	dl.guide-list dd {
		margin:0 0 1.6em 0;
	}


/***********
 guide-box
***********/
div.guide-box {
	width:100%;
}
	div.guide-box div.guide-text {
		background-color:#FFF;
		padding:1em 2em;
	}
		div.guide-text table {
			width:100%;
			margin:4em auto;
		}
		div.guide-text table th,
		div.guide-text table td {
			padding:0.6em 1em;
		}
		div.guide-text table th {
			border-bottom:4px solid #004C66;
		}
		div.guide-text table th span {
			font-size:80%;
		}
		div.guide-text table td {
			text-align:left;
			border-bottom:4px solid #B2C9D1;
		}

/***********
 info-box
***********/
section.info-box {
	max-width:1100px;
	width:90%;
	margin:6em auto;
	border:2px solid #006666;
	background-color:#FFF;
	padding:0 0.6em;
}
	section.info-box h1 {
		margin:0 0 1em 0;
	}
	section.info-box h1 span {
		display:block;
	}
	section.info-box h1 span.info-title-image {
		width:70px;
		height:70px;
		margin:0.4em auto;
	}
	section.info-box table {
		width:90%;
		margin:1em auto;
	}
		section.info-box table th,
		section.info-box table td {
			padding:1em;
		}
		section.info-box table th {
			background-color:#006666;
			color:#FFF;
			font-weight:bold;
			text-align:center;
		}
		section.info-box table td {
			text-align:left;
		}
	section.info-box h3 {
		margin:0 0 1em 0;
	}

/***********
 news-box
***********/
div.news-box {
	border-top:2px solid #BADC98;
}
	div.news-box section.news-item {
		border-bottom:2px solid #BADC98;
		padding:3em;
	}
	section.news-item p.news-item-image {
	}
	section.news-item h1 {
		margin:0 0 1em 0;
	}
	section.news-item h1 span {
		display:block;
		color:#777;
		margin:0 0 1em 0;
	}
	section.news-item h1,
	section.news-item h2 {
		text-align:left;
	}

/***********
 price-box
***********/
section.price-box {
	width:100%;
}
	section.price-box div.price-box-inner {
		padding:0.6em;
	}
	div.price-box-inner.price-box-inner-20 {
	}
	div.price-box-inner.price-box-inner-80 {
	}
	section.price-box h1 {
		width:100%;
		height:auto;
		border-radius:20px;
		color:#FFF;
		font-weight:bold;
		padding:1em;
		background-color:#004C66;
	}
	section.price-box h1 span {
		display:block;
		width:70px;
		height:auto;
		margin:0 auto;
	}
	section.price-box h2 {
		text-align:left;
		position:relative;
		background-color:#DCE8E2;
		padding:1em 2em;
		color:#333;
		margin:0 2em;
	}
	section.price-box h2::before {
		content:"";
		position:absolute;
		border:20px solid transparent;
	}
	section.price-box h2 span {
		display:block;
		font-size:80%;
	}

	p.price-plus {
		width:50px;
		height:50px;
		margin:0.4em auto;
	}

/***********
 access-box
***********/
p.access-image {
	width:90%;
	max-width:700px;
	margin:3em auto;
}

/***********
 flow-box
***********/
section.flow-box {
	width:96%;
	margin:0 auto 3em auto;
}
	section.flow-box h1,
	section.flow-box h2,
	section.flow-box h3 {
		text-align:left;
		margin:0 0 0.6em 0;
	}
	section.flow-box h1 {
		color:#006666;
	}
	section.flow-box h1 span {
		width:50px;
		height:50px;
		background-color:#006666;
		display:inline-block;
		border-radius:50%;
		margin:0 0.4em 0 0;
		color:#FFF;
		font-weight:bold;
		text-align:center;
		line-height:50px;
	}
	section.flow-box h2 {
	}
	section.flow-box p.flow-map {
		width:96%;
		margin:2em auto;
		max-width:800px;
	}


/***********
 footer
***********/
footer#common-footer {
	background-color:#373737;
	padding:2em;
}
	footer#common-footer address,
	footer#common-footer p#copyright {
		color:#FFF;
	}
	footer#common-footer address {
	}
	footer#common-footer p#copyright {
		margin:2em 0 1em 0;
	}


/****************************
***　[CASE] min-width 768px
****************************/
@media only screen and (min-width: 768px) {


/***********
 common-box
***********/
div#contents section.common-box {
	display:flex;
}
	section.common-box .common-box-20 {
		width:20%;
	}
	section.common-box .common-box-40 {
		width:40%;
	}
	section.common-box .common-box-60 {
		width:60%;
	}
	section.common-box h1.text-vertical {
		height:100%;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-align:left;
		position:absolute;
		top:20%;
		left:50%;
		transform:translate(-50%, -10%);
	}


/***********
 plan-box
***********/
section.plan-box {
	width:42%;
	margin:0 4%;
}
section.plan-box.plan-box-horizontal {
	width:100%;
}


/***********
 guide-box
***********/
div.guide-box {
	display:flex;
}
	div.guide-box p.guide-box-image {
		width:40%;
	}
	div.guide-box div.guide-text {
		width:60%;
	}


/***********
 news-box
***********/
	section.news-item p.news-item-image {
		width:30%;
		height:auto;
		max-width:300px;
		float:left;
		margin:0 3em 0 0;
	}

/***********
 price-box
***********/
section.price-box {
	display:flex;
}
	div.price-box-inner.price-box-inner-20 {
		width:20%;
		min-width:160px;
	}
	div.price-box-inner.price-box-inner-80 {
		width:80%;
	}
	section.price-box h2::before {
		border-right:20px solid #DCE8E2;
		top:20%;
		left:-40px;
	}

/***********
 item-list
***********/
ul.item-list {
	display:table;
}
	ul.item-list li {
		display:table-cell;
		vertical-align:middle;
	}

}

/****************************
***　[CASE] max-width 767px
****************************/
@media only screen and (max-width: 767px) {

/***********
 guide-box
***********/
	div.guide-box div.guide-box-image,
	div.guide-box div.guide-text {
		width:100%;
	}

/***********
 info-box
***********/
		section.info-box table th,
		section.info-box table td {
			display:block;
			width:100%;
		}
		section.info-box table tr:last-child td {
			border-bottom:1px solid #006666;
		}

/***********
 news-box
***********/
	section.news-item p.news-item-image {
		width:90%;
		margin:0 auto 2em auto;
	}

/***********
 price-box
***********/
	div.price-box-inner.price-box-inner-20,
	div.price-box-inner.price-box-inner-80 {
		width:90%;
		margin:0 auto;
	}
	section.price-box h2::before {
		border-bottom:20px solid #DCE8E2;
		left:20%;
		top:-40px;
	}


}