@charset "UTF-8";

@import url("font-awesome.min.css");
@import url("font-notosansjp.css");
@import url("font-roboto.css");

html {
	font-family: 'Roboto','Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", san-serif;
	background: #2b8fe5;
	overflow-x: hidden;
	}

body {
	width: 100vw;
	height: auto;
	min-height: 100vh;
	color: #333;
	overflow-x: hidden;
	}

a {
	color: #6497e2;
	text-decoration: none;
	transition: .3s ease;
	}

a:hover {
	color: #ec6000;
	}






#wrap {
	position: relative;
	width: 100vw;
	height: auto;
	min-height: 100vh;
	overflow: hidden;
	}




/* header */
header {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 56.25%;
	background: #000;
	z-index: 10;
	}
@media screen and (max-width:767px){
header {
	height: 100vh;
	}
}

header #logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
	width: 530px;
	height: 255px;
	z-index: 12;
	}
@media screen and (max-width:767px){
header #logo {
	width: 300px;
	margin: 0 auto 50px auto;
	}
}

header #logo img {
	display: block;
	width: 100%;
	height: 100%;
	animation: logo_img 3s ease-out 2s both;
	}
@keyframes logo_img {
	0% { transform: translateY(30px); opacity: 0; }
	100% { transform: translateY(0px); opacity: 1; }
}

#youtube-movie {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	z-index: 1;
	}
 
#youtube-movie-content {
	position: relative;
	padding-top: 56.25%;
	width: 100%;
	}
@media screen and (max-width:767px){
#youtube-movie-content {
	display: none;
	}
}
 
#youtube-movie-content #youtube-movie-body,
#youtube-movie-content #youtube-movie-front {
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 999999999;
	}

.mvbg {
	display: none;
	}
@media screen and (max-width:767px){
.mvbg {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	}
}

.mvbg div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	}

.mvbg .mvbg1 {
	background: url(/img/mvbg1.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg2 {
	background: url(/img/mvbg2.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg3 {
	background: url(/img/mvbg3.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg4 {
	background: url(/img/mvbg4.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg5 {
	background: url(/img/mvbg5.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg6 {
	background: url(/img/mvbg6.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg7 {
	background: url(/img/mvbg7.jpg) right center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg8 {
	background: url(/img/mvbg8.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg9 {
	background: url(/img/mvbg9.jpg) center center no-repeat;
	background-size: auto 100%;
	}

.mvbg .mvbg1 {
	animation: mvbg1 45s infinite;
	}
@keyframes mvbg1 {
	0% { opacity: 1; transform: scale(1) }
	11% { opacity: 1; }
	12% { opacity: 0; transform: scale(1.1) }
	99% { opacity: 0; }
	100% { opacity: 1; }
	}

.mvbg .mvbg2 {
	animation: mvbg2 45s infinite;
	}
@keyframes mvbg2 {
	0% { opacity: 0; }
	10% { opacity: 0; }
	11% { opacity: 1; transform: scale(1) }
	22% { opacity: 1; }
	23% { opacity: 0; transform: scale(1.1) }
	100% { opacity: 0; }
	}

.mvbg .mvbg3 {
	animation: mvbg3 45s infinite;
	}
@keyframes mvbg3 {
	0% { opacity: 0; }
	22% { opacity: 0; }
	23% { opacity: 1; transform: scale(1) }
	34% { opacity: 1; }
	35% { opacity: 0; transform: scale(1.1) }
	100% { opacity: 0; }
	}

.mvbg .mvbg4 {
	animation: mvbg4 45s infinite;
	}
@keyframes mvbg4 {
	0% { opacity: 0; }
	34% { opacity: 0; }
	35% { opacity: 1; transform: scale(1) }
	46% { opacity: 1; }
	47% { opacity: 0; transform: scale(1.1) }
	100% { opacity: 0; }
	}

.mvbg .mvbg5 {
	animation: mvbg5 45s infinite;
	}
@keyframes mvbg5 {
	0% { opacity: 0; }
	46% { opacity: 0; }
	47% { opacity: 1; transform: scale(1) }
	58% { opacity: 1; }
	59% { opacity: 0; transform: scale(1.1) }
	100% { opacity: 0; }
	}

.mvbg .mvbg6 {
	animation: mvbg6 45s infinite;
	}
@keyframes mvbg6 {
	0% { opacity: 0; }
	58% { opacity: 0; }
	59% { opacity: 1; transform: scale(1) }
	71% { opacity: 1; }
	72% { opacity: 0; transform: scale(1.1) }
	100% { opacity: 0; }
	}

.mvbg .mvbg7 {
	animation: mvbg7 45s infinite;
	}
@keyframes mvbg7 {
	0% { opacity: 0; }
	71% { opacity: 0; }
	72% { opacity: 1; transform: scale(1) }
	83% { opacity: 1; }
	84% { opacity: 0; transform: scale(1.1) }
	100% { opacity: 0; }
	}

.mvbg .mvbg8 {
	animation: mvbg8 45s infinite;
	}
@keyframes mvbg8 {
	0% { opacity: 0; }
	83% { opacity: 0; }
	84% { opacity: 1; transform: scale(1) }
	91% { opacity: 1; }
	92% { opacity: 0; transform: scale(1.1) }
	100% { opacity: 0; }
	}

.mvbg .mvbg9 {
	animation: mvbg9 45s infinite;
	}
@keyframes mvbg9 {
	0% { opacity: 0; }
	91% { opacity: 0; }
	92% { opacity: 1; transform: scale(1) }
	99% { opacity: 1; }
	100% { opacity: 0; transform: scale(1.1) }
	}

header #fade {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: #2b8fe5;
	z-index: 1000000;
	animation: fade 10s ease 0s both;
	}
@media screen and (max-width: 767px) {
header #fade {
	animation: fade 3s ease 0s both;
	}
}
@keyframes fade {
	0% { opacity: 1; z-index: 1000000; }
	30% { opacity: 1; z-index: 1000000; }
	99% { opacity: 0; z-index: 1000000; }
	100% { opacity: 0; z-index: 1; }
	}




/* intro */
#intro {
	position: relative;
	padding: 80px 0;
	background: #fff;
	z-index: 10;
	}

#intro h2 {
	display: block;
	margin: 0 0 50px 0;
	color: #003366;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	}

#intro h2 span {
	display: block;
	font-size: 21px;
	}

#intro h3 {
	display: block;
	margin: 0 0 30px 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3em;
	text-align: center;
	}
@media screen and (max-width:767px){
#intro h3 {
	font-size: 24px;
	}
#intro h3 span {
	display: block;
	}
}

#intro p.txt_lead {
	position: relative;
	display: block;
	margin: 0 0 20px 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 2em;
	text-align: center;
	z-index: 99;
	transition: 2s ease;
	}
@media screen and (max-width:767px){
#intro p.txt_lead {
	padding: 0 20px;
	font-size: 18px;
	text-align: left;
	}
}

#intro p.txt_lead span {
	padding: 0 .25em;
	}
@media screen and (max-width:767px){
#intro p.txt_lead span {
	display: block;
	padding: 0;
	}
#intro p.txt_lead br {
	display: none;
	}
}

#intro .map {
	display: block;
	width: 225px;
	margin: 0 auto 40px auto;
	font-weight: 300;
	text-align: center;
	}

#intro .map img {
	display: block;
	width: 100%;
	margin: 0 0 10px 0;
	transform: translateY(30px);
	opacity: 0;
	transition: .3s ease .1s;
	}

#intro .map img.on {
	transform: translateY(0px);
	opacity: 1;
	}




/* #insta */
#insta_pc {
	display: block;
	width: 1000px;
	margin: 0 auto;
	padding: 50px 0;
	}
#insta_sp414,
#insta_sp375,
#insta_sp320 {
	display: none;
	}
@media screen and (max-width:767px){
#insta_pc {
	display: none;
	}
#insta_sp414 {
	display: block;
	width: 414px;
	height: 690px;
	margin: 0 auto;
	}
}
@media screen and (max-width:375px){
#insta_sp414 {
	display: none;
	}
#insta_sp375 {
	display: block;
	width: 375px;
	height: 625px;
	margin: 0 auto;
	}
}
@media screen and (max-width:320px){
#insta_sp375 {
	display: none;
	}
#insta_sp320 {
	display: block;
	width: 320px;
	height: 533.333333333333333px;
	margin: 0 auto;
	}
}




/* pics */
#pics {
	position: relative;
	display: block;
	z-index: 10;
	}

#pics ul {
	display: block;
	}

#pics ul:after {
	display: block;
	content: "";
	clear: both;
	}

#pics li {
	position: relative;
	display: block;
	width: 25vw;
	height: 25vw;
	float: left;
	}
@media screen and (max-width:767px){
#pics li {
	width: 50vw;
	height: 50vw;
	}
}

#pics li img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
	width: 150%;
	height: 150%;
	opacity: 0;
	}

#pics li img.on {
	width: 100%;
	height: 100%;
	opacity: 1;
	}

#pics li img.pic1 { transition: .5s ease .5s }
#pics li img.pic2 { transition: .5s ease .1s }
#pics li img.pic3 { transition: .5s ease .3s }
#pics li img.pic4 { transition: .5s ease .8s }
#pics li img.pic5 { transition: .5s ease .2s }
#pics li img.pic6 { transition: .5s ease .4s }
#pics li img.pic7 { transition: .5s ease .1s }
#pics li img.pic8 { transition: .5s ease .5s }


/* Schedule */
#schedule {
	position: relative;
	display: block;
	padding: 80px 0;
	background: #fff;
	z-index: 10;
	}

#schedule h2 {
	display: block;
	margin: 0 0 50px 0;
	color: #003366;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	}

#schedule h2 span {
	display: block;
	font-size: 21px;
	}

#schedule h3 {
	display: block;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	}
@media screen and (max-width:767px){
#schedule h3 {
	margin: 0 0 20px 0;
	}
}

#schedule table {
	width: 460px;
	margin: 10px auto 30px auto;
	font-size: 16px;
	}
@media screen and (max-width:767px){
#schedule table {
	width: 100%;
	border-bottom: 1px solid #ccc;
	}
}

#schedule th {
	width: 150px;
	padding: 5px 10px;
	font-weight: 300;
	text-align: right;
	}
@media screen and (max-width:767px){
#schedule th {
	display: block;
	width: 100%;
	padding: 5px 0 0 0;
	text-align: center;
	border-top: 1px solid #ccc;
	}
}

#schedule td {
	padding: 5px;
	font-weight: 300;
	}
@media screen and (max-width:767px){
#schedule td {
	display: block;
	width: 100%;
	padding: 5px 0 10px 0;
	text-align: center;
	}
}

#schedule ul {
	position: relative;
	display: block;
	width: 800px;
	margin: 0 auto;
	}
@media screen and (max-width:767px){
#schedule ul {
	width: 280px;
	margin-bottom: 170px;
	}
}

#schedule ul li {
	position: absolute;
	top: 0;
	display: block;
	width: 150px;
	height: 150px;
	}
@media screen and (max-width:767px){
#schedule ul li {
	width: 130px;
	height: 130px;
	}
}

#schedule ul li:nth-of-type(1) {
	left: 0;
	}

#schedule ul li:nth-of-type(2) {
	right: 0;
	}

#schedule ul li img {
	display: block;
	width: 150%;
	height: 150%;
	transform: rotate(-360deg);
	border-radius: 50%;
	opacity: 0;
	}

#schedule ul li img.on {
	width: 100%;
	height: 100%;
	transform: rotate(0deg);
	opacity: 1;
	}

#schedule img.schedule1 { transition: 1s ease .5s }
#schedule img.schedule2 { transition: 1s ease .1s }
#schedule img.schedule3 { transition: 1s ease .3s }
#schedule img.schedule4 { transition: 1s ease .2s }




/* Stay */
#stay {
	position: relative;
	display: block;
	padding: 80px 0;
	background: url(../img/bg_stay.jpg) no-repeat;
	background-size: cover;
	z-index: 10;
	}

#stay h2 {
	display: block;
	margin: 0 0 40px 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	}

#stay h2 span {
	display: block;
	font-size: 21px;
	}

#stay p {
	display: block;
	margin: 0 0 20px 0;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	line-height: 1em;
	text-align: center;
	}
@media screen and (max-width:767px){
#stay p {
	padding: 0 20px;
	font-size: 18px;
	line-height: 1.5em;
	}
}

#stay p.notice {
	margin: 0 0 80px 0;
	font-size: 12px;
	}

#stay ul {
	display: block;
	text-align: center;
	}

#stay li {
	position: relative;
	display: inline-block;
	width: 260px;
	height: 260px;
	margin: 0 20px;
	}
@media screen and (max-width:767px){
#stay li {
	display: block;
	margin: 0 auto 20px auto;
	}
}

#stay li img {
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translate(-50%,-50%);
	display: block;
	width: 10%;
	height: 10%;
	opacity: 0;
	}

#stay li img.on {
	top: 50%;
	width: 100%;
	height: 100%;
	opacity: 1;
	}

#stay li img.stay1 { transition: 1s ease .5s }
#stay li img.stay2 { transition: 1s ease .1s }
#stay li img.stay3 { transition: 1s ease .3s }




/* Charge */
#charge {
	position: relative;
	display: block;
	padding: 80px 0;
	background: #fff;
	z-index: 10;
	}

#charge h2 {
	display: block;
	margin: 0 0 20px 0;
	color: #003366;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	}

#charge h2 span {
	display: block;
	font-size: 21px;
	}

#charge p {
	display: block;
	margin: 0 0 20px 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 2em;
	text-align: center;
	}
@media screen and (max-width:767px){
#charge p {
	padding: 0 20px;
	font-size: 18px;
	line-height: 1.5em;
	}
}

#charge p span {
	font-weight: 600;
	border-bottom: 2px solid #c00;
	}

#charge table {
	width: 300px;
	margin: 30px auto;
	font-size: 20px;
	}

#charge th {
	padding: 5px;
	font-weight: 300;
	}

#charge td {
	padding: 5px;
	color: #c00;
	font-weight: 700;
	}

#charge table span {
	font-size: 12px;
	font-weight: 300;
	}

#charge table span.count {
	font-size: 24px;
	font-weight: 700;
	}

@media screen and (max-width:767px){
#charge ul {
	padding: 0 20px;
	}
}

#charge li {
	display: block;
	padding: 0 0 10px 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5em;
	text-align: center;
	}
@media screen and (max-width:767px){
#charge li {
	padding-left: 1em;
	text-align: left;
	text-indent: -1em;
	}
}




/* movie */
#movie {
	padding: 50px 0;
	}
@media screen and (max-width:767px){
#movie {
	padding: 20px;
	}
}

#movie h2 {
	display: block;
	margin: 0 0 20px 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	}

#movie h2 span {
	display: block;
	font-size: 21px;
	}

#movie img {
	display: block;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	cursor: pointer;
	}




/* footer */

footer {
	position: relative;
	display: block;
	padding: 140px 0 0 0;
	background: #fff;
	z-index: 10;
	}

footer ul {
	display: block;
	margin: 0 0 75px 0;
	text-align: center;
	}
footer ul li {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0 20px;
	}
footer ul a {
	display: block;
	width: 100%;
	height: 100%;
	}
footer ul a img {
	display: block;
	width: 100%;
	height: 100%;
	}

footer div {
	display: block;
	margin: 0 auto 50px auto;
	width: 250px;
	text-align: center;
	}
footer div.tresen {
	width: 600px;
	}
@media screen and (max-width:767px){
footer div.tresen {
	width: 100%;
	}
}

footer div h3 {
	display: block;
	margin: 0 0 20px 0;
	font-weight: 300;
	text-align: center;
	}
footer div a {
	display: block;
	width: 100%;
	height: 100%;
	color: #333;
	font-size: 20px;
	}
footer div a img {
	display: block;
	width: 100%;
	height: auto;
	}

footer address {
	display: block;
	width: 100%;
	padding: 50px 0;
	color: #4d2a1e;
	font-size: 16px;
	font-weight: 300;
	line-height: 1em;
	text-align: center;
	z-index: 10;
	}




/* トップへ戻るボタン */

.totop {
	position: fixed;
	right: 20px;
	bottom: 80px;
	display: block;
	width: 50px;
	height: 50px;
	z-index: 99999999;
	}
@media screen and (max-width:414px){
.totop {
	right: 15px;
	width: 40px;
	height: 40px;
	}
}

.totop a {
	display: block;
	width: 50px;
	height: 50px;
	background: url("../img/totop.png") center center no-repeat #6497e2;
	background-size: 20px 11px;
	overflow: hidden;
	text-indent: 100%;
	font-size: 0;
	border-radius: 50px;
	box-sizing: border-box;
	}
@media screen and (max-width:414px){
.totop a {
	width: 40px;
	height: 40px;
	}
}

.totop a:hover {
	opacity: .8;
	}




/* お問い合わせ */
#contact {
	position: relative;
	display: block;
	padding: 80px 0 0 0;
	background: #003366;
	z-index: 10;
	}

#contact h2 {
	display: block;
	margin: 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	}

#contact h2 span {
	display: block;
	font-size: 21px;
	}

#contact form {
	position: relative;
	width: 600px;
	margin: 0 auto;
	padding: 50px 0;
	}
@media screen and (max-width:767px){
#contact form {
	width: 100%;
	padding: 50px 20px;
	}
}

#contact div.req {
	position: relative;
	padding: 15px;
	border: 3px solid #ccc;
	border-radius: 10px;
	margin-bottom: 20px;
	background: #fff;
	}

#contact .req:before {
	position: absolute;
	top: 50%;
	right: 10px;
	padding: 7px 10px;
	transform: translateY(-50%);
	content: '必 須';
	color: #fff;
	font-size: 14px;
	line-height: 1em;
	background-color: #CC0000;
	border-radius: 5px;
	}

#contact input,
#contact textarea {
	width: 100%;
	margin: 0;
	padding: 10px;
	font-size: 16px;
	line-height: 1em;
	border: 0;
	}

#contact .linkbtn {
	margin: 50px 0;
	text-align: center;
	}

#contact .linkbtn input {
	display: block;
	padding: 25px 0;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 2px;
	background: #8fb500;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: .3s ease;
	}

#contact .linkbtn input:hover {
	background: #b3cd53;
	}




/* Thanks */

#thanks {
	position: relative;
	width: 600px;
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
	z-index: 10;
	}
@media screen and (max-width:767px){
#thanks {
	width: 100%;
	padding: 50px 20px;
	}
}

#thanks h1 {
	display: block;
	margin: 0 0 30px 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1em;
	text-align: center;
	}

#thanks p {
	display: block;
	margin: 0 0 70px 0;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	line-height: 2em;
	text-align: center;
	}
@media screen and (max-width:767px){
#thanks p {
	font-size: 18px;
	text-align: left;
	}
#thanks p br {
	display: none;
	}
}

#thanks p a {
	display: block;
	width: 250px;
	margin: 0 auto;
	padding: 25px 0;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1;
	text-align: center;
	background: #3285ff;
	border-radius: 10px;
	transition: .3s ease;
	}