@charset "utf-8";

body { color:#1f1f1f; font-family:"mplus","メイリオ", sans-serif;}

.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1000;}

.highlight { transition: .3s opacity ease-out; }
.highlight:hover { opacity: .6; }

.header { box-sizing: border-box; width: 100%; height: 60px; position: fixed; top: 0; left: 0; z-index: 100; transition: .5s all ease-out;}
.header.menuon,.header.on { background-color: rgba(0,0,0,.8); }
.header-menu { cursor: pointer; position: relative; width: 60px; height: 60px; float: left; transition: .5s all ease-out; z-index: 1;}
.header-menu:hover { background-color: #009dc5; }
.header.on .header-menu,.header-menu.menuon { background-color: #009dc5; }
.header-menu.menuon .header-menu-line{ animation: none; }
.header-menu-inner { width: 40px; height: 100%; position: relative; margin: 0 auto; transition: .5s all ease-out;}
.header-menu-line { width: 100%; height: 5px; background-color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; animation: 5s headerMenuLine ease infinite; transition: .5s all ease-out;}

.header-menu.menuon .header-menu-top { transform: rotate(-45deg); top: 0;}
.header-menu.menuon .header-menu-center { opacity: 0;}
.header-menu.menuon .header-menu-bottom { transform: rotate(45deg); top: 0;}
.header-menu.menuon .header-menu-inner { transform: rotate(360deg); }

.header-menu-top { top: -30px; }
.header-menu-center { animation-delay: .25s; }
.header-menu-bottom { animation-delay: .5s; top: 30px; }

@keyframes headerMenuLine {
	40% { width: 100%; left: 0; opacity:1;}
	50% { width: 0; opacity: 0; left:100%;}
	51% { left: 0; }
	60% { width: 100%; right: 100%; opacity:1;}
}

.header-logo { float: right; }
.header-icons { float: right; height: 100%; display: table;	padding-right: 30px;}
.header-icons-inner { display: table-cell; vertical-align: middle; }
.header-logo-img,.header-logo-txt { display: inline-block; }
/* ロゴを変更した場合用に残す20180906ueno .header-logo-img { width: 30px; height: 30px; } */
.header-logo-img { width: 50px; height: 30px; }
.header-logo-txt { width: 125px; height: 25px;}
.header-icons-logo { float: left; margin-right: 35px;	}
.header-icons-logo a{ display: block; }
.header-icons-sns { display: table; }
.header-icons-sns li { padding-right: 25px; display: table-cell;	vertical-align: middle;	}
.header-icons-sns li:last-of-type { padding-right: 0;	}

.header-icons-sns .twitter { width: 24px; height: 20px; }
.header-icons-sns .facebook { width: 14px; height: 27px; }
.header-icons-sns .line { width: 27px; height: 26px; }
.header-icons-sns .instagram { width: 27px; height: 27px; }
.header-icons-sns .tel { width: 27px; height: 27px; }

.menuContents { display: none; position: fixed; top: 60px; left: 0; width: 100%; background-color: rgba(0, 142, 182, .8); z-index: 100; padding:5%; height: calc(100% - 60px); box-sizing: border-box;}

.menuContents-list { float: left; width: 30%; margin-right: 5%;}
.menuContents-list:last-of-type { margin-right: 0; }
.menuContents-list li { font-size: 2em; line-height: 1; }
.menuContents-list a{ display: block; color: #fff; transition: .5s opacity ease-out; padding: 0 0 30px 30px; box-sizing: border-box; margin-bottom: 30px; border-bottom: 2px solid #68c5dd;}
.menuContents-list a:hover{ color: #fff; opacity: .5;}


/* .mainImg */
.mainImg { height: 100vh; position: relative; overflow: hidden;}
.mainImg-contents { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) ; animation: 15s mainImgAnim linear infinite alternate forwards;}
.mainImg-logoTxt { position: absolute;	top: 45%;	left: 50%;	transform: translate(-50%,-50%); z-index: 10;	color: #fff;}

/* ロゴを変更した場合用に残す20180906ueno .mainImg-logo { width: 136px;	height: 120px; margin: 0 auto 100px; } */
.mainImg-logo { width: 370px;	height: 120px; margin: 0 auto 100px; }
.mainImg-txt { font-size: 3.4em; line-height: 1;	}

@keyframes mainImgAnim {
	0%{ transform: translate(-50%,-50%) scale(1); }
	100%{ transform: translate(-50%,-50%) scale(1.25); }
}

.mainImg2 { position: relative;}
.mainImg2-contents { text-align: center; background-color: rgba(0,79,219,.7); position: absolute; bottom: 0; left: 0; width: 100%; padding: 3% 0; color: #fff;}
.mainImg2-ttl { font-size: 4.4em; display: block }
.mainImg2-txt { font-size: 1.7em; }

.mainImg3 { position: relative;}
.mainImg3-contents { text-align: center; background-color: rgba(0,79,219,.7); position: absolute; bottom: 0; left: 0; width: 100%; padding: 3% 0 0; color: #fff;}
.mainImg3-ttl { font-size: 4.4em; }
.mainImg3-txt { font-size: 1.7em; }

.mainImg4 { position: relative;}
.mainImg4-contents { text-align: center; background-color: rgba(0,79,219,.7); position: absolute; bottom: 0; left: 0; width: 100%; padding: 3% 0 1% 0; color: #fff;}
.mainImg4-ttl { font-size: 4.4em; display: block }
.mainImg4-txt { font-size: 1.7em; }

/* .contents */
.contents-outer { width: 100%; position: relative;}
.contents-inner0 { width: 1080px; margin: 0 auto; padding:70px 0;}
.contents-inner1 { width: 1080px; margin: 0 auto; padding:5% 0; z-index: 5; position: relative;}
.contents-inner2 { width: 1080px; margin: 0 auto; padding:2% 0 3%;}

/* .ttl */
.ttl1 { font-size: 4em; color: #fff; text-align: center;}
.ttl1.typeA { margin-bottom: 6%; }

.ttl2 {color: #d8ff00; font-weight: bold;}
.ttl2 .en,.ttl2 .ja { display: block; }
.ttl2 .en { font-size: 2.2em; position: relative;}
.ttl2 .en:before { content: ''; width: 100%; height: 8px; background: url('../img/line/line1.png') repeat-x; position: absolute; bottom: 0; left: 0; -webkit-background-size: contain; background-size: contain;}
.ttl2 .en .ttl2-big { font-size: 1.65em; }
.ttl2 .en.diver1:after { content: ''; position: absolute; bottom: -100%; right: 20px;  margin: auto; width: 157px; height: 136px; background: url('../img/illust/diver1.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 1;}
.ttl2 .en.fin-snorkel:after { content: ''; position: absolute; bottom: -100%; right: 0;  margin: auto; width: 151px; height: 108px; background: url('../img/illust/fin_snorkel.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 1;}
.ttl2 .ja { color: #fff; font-size: 1.15em; line-height: 2;}

.ttl3 {color: #d0ea42; font-weight: bold; text-align: center; width: 630px; margin: 0 auto;}
.ttl3 .en,.ttl3 .ja { display: block; }
.ttl3 .en { font-size: 2.2em; position: relative;}
.ttl3 .en:before { content: ''; width: 100%; height: 8px; background: url('../img/line/line2.png') repeat-x; position: absolute; bottom: 0; left: 0; -webkit-background-size: contain; background-size: contain;}
.ttl3 .en .ttl3-big { font-size: 1.65em; }

.ttl3 .en.diver2:after { content: ''; width: 122px; height: 156px; position: absolute; top: -80%; right: 0; background: url('../img/illust/diver2.png') no-repeat; -webkit-background-size: contain; background-size: contain;}

.ttl3 .ja { color: #00a4c4; font-size: 1.15em; line-height: 2;}
.ttl3.typeA { margin-bottom: 3%; }

.ttl4 {color: #d8ff00; font-weight: bold; text-align: center; width: 630px; margin: 0 auto;}
.ttl4 .en,.ttl4 .ja { display: block; }
.ttl4 .en { font-size: 2.2em; position: relative; }
.ttl4 .en:before { content: ''; width: 100%; height: 8px; background: url('../img/line/line1.png') repeat-x; position: absolute; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain;}
.ttl4 .en .ttl4-big { font-size: 1.65em; }
.ttl4 .en.diver3:after { content: ''; width: 96px; height: 180px; position: absolute; top: -60%; right: 10%; background: url('../img/illust/diver3.png') no-repeat; -webkit-background-size: contain; background-size: contain;}

.ttl4 .ja { color: #fff; font-size: 1.15em; }
.ttl4.typeA { margin-bottom: 3%; }

.ttl3 .ja,.ttl4 .ja {line-height: 2.3;}
.ttl3 .en,.ttl4 .en {line-height: 1.6;}
.ttl5 { position: relative; color: #00a4c4; font-weight: bold; text-align: center; width: 630px; margin: 0 auto 5%;}
.ttl5-ja1,.ttl5-ja2 { display: block; width: 80%;	}
.ttl5-ja1 { border: solid 1px #00a4c4; border-radius: 50px; font-size: 1.2em;	margin-bottom: 1%;	padding:.5% 0;}
.ttl5-ja2 { line-height: 1.8;	font-size: 2.7em;}
.ttl5-small { font-size: .58em;	 }
.ttl5:before { content: ''; width: 100%; height: 8px; background: url('../img/line/line3.png') repeat-x; position: absolute; bottom: 0; left: 0; -webkit-background-size: contain;
background-size: contain;}
.ttl5.sango:after { content: ''; position: absolute;	 bottom: 0;	 right: 0;	width: 105px;	height: 82px;	background: url('../img/illust/sango2.png') no-repeat; -webkit-background-size: 	contain; background-size: 	contain;}

.line-anim:before { animation: lineAnim 10s ease-out alternate infinite; background-position: 0 0;}

.line1:after {content: ''; width: 100%; height: 8px; background: url('../img/line/line1.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}

.line2:after {content: ''; width: 100%; height: 8px; background: url('../img/line/line2.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}

.line3:after {content: ''; width: 100%; height: 8px; background: url('../img/line/line3.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}

.line4:after {content: ''; width: 100%; height: 8px; background: url('../img/line/line4.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}

.line5:after {content: ''; width: 100%; height: 8px; background: url('../img/line/line5.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}



@keyframes lineAnim {
	0% { background-position: 0 0; }
	100% { background-position: 20% 0; }
}

.ttl6 { font-size: 1.85em; line-height: 1.2; color:#00a4c4;}
.ttl7 { font-size: 3.4em; color: #fff; }

.ttl8 { color: #fff; text-align: center;}
.ttl8.typeA { margin-bottom: 5%; }
.ttl8 .ja1,.ttl8 .ja2 { display: block; }
.ttl8 .ja1 {font-size: 3.6em; position: relative;}
.ttl8 .ja1:after { content: ''; width: 100%; height: 8px; background: url('../img/line/line1.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}
.ttl8 .ja2 {font-size: 1.1em; }

.ttl8 .ja3 { display: block; }
.ttl8 .ja3 {font-size: 1.6em; position: relative;}
.ttl8 .ja3:after { content: ''; width: 100%; height: 8px; background: url('../img/line/line1.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}

.ttl9 { color: #00a4c4; text-align: center; position: relative;}
.ttl9.typeA { margin-bottom: 5%; }
.ttl9 .ja1,.ttl9 .ja2 { display: block; }
.ttl9 .ja1 {font-size: 3em; position: relative;}
.ttl9 .ja1:after { content: ''; width: 100%; height: 8px; background: url('../img/line/line2.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}
.ttl9 .ja2 {font-size: 1.1em; }

.ttl9.fish1:after { content: ''; position: absolute; top: 10px; right: 20%; width: calc(162px / 2); height: calc(102px / 2); background: url('../img/illust/fish3.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.ttl9.fish2:after { content: ''; position: absolute; top: 5px; right: 20%; width: calc(140px / 2); height: calc(124px / 2); background: url('../img/illust/fish4.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.ttl9.fish3:after { content: ''; position: absolute; top: 10px; right: 20%; width: calc(166px / 2); height: calc(100px / 2); background: url('../img/illust/fish5.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.ttl9.fish4:after { content: ''; position: absolute; top: 10px; right: 20%; width: calc(184px / 2); height: calc(78px / 2); background: url('../img/illust/fish6.png') no-repeat; -webkit-background-size: contain; background-size: contain; }

.ttl10 { color: #fff; text-align: center;}
.ttl10.typeA { margin-bottom: 5%; }
.ttl10 .ja1,.ttl10 .ja2 { display: block; }
.ttl10 .ja1 {font-size: 3em; position: relative;}
.ttl10 .ja1:after { content: ''; width: 100%; height: 8px; background: url('../img/line/line1.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}
.ttl10 .ja2 {font-size: 1.1em; }
.ttl11 { display: inline-block; text-align: center; background-color: #00a4c4; color: #fff; border-radius: 10px; padding: 0 5%;}

.ttl12 { display: inline-block; background-color: #ec5d25; color: #fff; padding: 0.5% 6%; position: relative;}
.ttl12.green { background-color: #009dc5; }
.ttl12:before,.ttl12:after { content: ''; position: absolute; top: 0;}
.ttl12:before { border: solid 15px transparent; border-left: solid 15px #fff; left: -1px;}
.ttl12:after { border: solid 15px transparent; border-right: solid 15px #fff; right: -1px;}

.ttl13 { background-color: #ec5d25; box-sizing: border-box; padding: 1% 0 1% 3%; color: #fff;}
.ttl14 { margin-bottom: 30px; }
.ttl14-inner { text-align: center; background-color: #ec5d25; color: #fff; font-family: 'Rubik', sans-serif; padding:3% 0; font-weight: bold; font-size: 1.2em; letter-spacing: 1px; position: relative;}
.ttl14-inner:before {content: ''; position: absolute; width: 0; height: 0; bottom: -18px; left: 0; right: 0; border: 10px solid transparent; border-top: 10px solid #ec5d25; margin: auto;}
.ttl14-big { font-size: 1.5em; }
.ttl15 { font-size: 1.3em; color: #ec5d25; font-weight: bold;}
.ttl16 { text-align: center; padding: 2% 0; box-sizing: border-box; color: #2184f5; border: solid 1px #2184f5;}
.ttl16._a {border:none;}
.ttl17 { background-color: #ec5d25; display: inline-block;width: 100%; padding: 3% 0;color: #fff;text-align: center; font-weight: bold;}
.ttl18 { color: #fff; text-align: center; font-size: 2em;}
.ttl18:after { content: ''; width: 100%; height: 8px; background: url('../img/line/line5.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}

.ttl8.fin1 { position: relative; }
.ttl8.fin1:before { content: ''; position: absolute; bottom: 45px; right: 10%; margin: auto; width: calc(170px / 2); height: calc(132px / 2); background: url('../img/illust/fin1.png') no-repeat; -webkit-background-size: contain; background-size: contain; transition: .5s all ease-out;}

.ttl8.fin2 { position: relative; }
.ttl8.fin2:before { content: ''; position: absolute; bottom: 45px; right: 10%; margin: auto; width: calc(170px / 2); height: calc(132px / 2); background: url('../img/illust/fin2.png') no-repeat; -webkit-background-size: contain; background-size: contain; transition: .5s all ease-out;}

.link1 { color: #1ff2ff; font-size: 1.6em; text-decoration: underline;}
.link2 {text-decoration: underline; color: #ec5d25; }

.ph1 {border-radius: 5px;}

.diver4 {position: relative;}
.diver4:before { content: ''; position: absolute; bottom: 0; right: 20px; margin: auto; width: 113px; height: 143px; background: url('../img/illust/diver4.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 1;}

.diver5 {position: relative;}
.diver5:before { content: ''; position: absolute; bottom: 0; right: 0; margin: auto; width: calc(139px / 2); height: calc(256px / 2); background: url('../img/illust/diver5.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 1;}

.diver6 {position: relative;}
.diver6:before { content: ''; position: absolute; bottom: 0; right: 15%; margin: auto; width: calc(130px / 2); height: calc(242px / 2); background: url('../img/illust/diver6.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 1;}
.diver6.TypeD:before{bottom: -5%;}

.diver7 {position: relative;}
.diver7:before { content: ''; position: absolute; bottom: 0; right: 15%; margin: auto; width: calc(130px / 2); height: calc(242px / 2); background: url('../img/illust/diver7.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 1;}

.diver8 {position: relative;}
.diver8:before { content: ''; position: absolute; bottom: 0; right: 20px; margin: auto; width: 113px; height: 143px; background: url('../img/illust/diver8.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 1;}

.sango3 { position: relative; }
.sango3:before { content: ''; position: absolute;	 bottom: 0;	 right: 0;	width: calc(260px / 2);	height: calc(204px / 2);	background: url('../img/illust/sango3.png') no-repeat; -webkit-background-size: 	contain; background-size: 	contain;}

.fishs {position: relative;}
.fishs:before { content: ''; position: absolute; bottom: 0; right: 0; background: url('../img/illust/fishs.png') no-repeat; width: 614px; height: 180px; -webkit-background-size: contain;
background-size: contain;}

.ferry1,.ferry2,.ferry3 {position: relative;}
.ferry1:before,.ferry2:before,.ferry3:before { content: ''; position: absolute; bottom: 40px; right: 0; width: calc(454px / 2); height: calc(142px / 2); }
.ferry1:before { background: url('../img/illust/ferry1.png') no-repeat; -webkit-background-size: contain; background-size: contain;}
.ferry2:before { background: url('../img/illust/ferry2.png') no-repeat; -webkit-background-size: contain; background-size: contain;}
.ferry3:before { background: url('../img/illust/ferry.png') no-repeat; -webkit-background-size: contain; background-size: contain;}

.wetsuit {position: relative;}
.wetsuit:before { content: ''; position: absolute; background: url('../img/illust/wetsuit.png'); width: calc(215px / 2); height: calc(231px / 2); -webkit-background-size: contain; background-size: contain; top: 0; right: 15%; z-index: 1;}

.yadokari {position: relative;}
.yadokari:before { content: ''; position: absolute; background: url('../img/illust/yadokari.png'); width: calc(186px / 2); height: calc(184px / 2); -webkit-background-size: contain; background-size: contain; top: 0; right: 15%; z-index: 1;}
.yadokari.type2:before {  right: 1%; }
.umigame {position: relative;}
.umigame:before { content: ''; position: absolute; background: url('../img/illust/umigame.png'); width: calc(186px / 2); height: calc(184px / 2); -webkit-background-size: contain; background-size: contain; top: 0; right: 15%; z-index: 1;}


.arrow::before{content: '▶';display: inline-block;color:#00a4c4;padding-right: 10px;font-size: 0.9rem;}

/* .txt */
.txt1 { color: #fff; text-align: center; letter-spacing: 1px;}
.txt2 { color: #354148; line-height: 2;	}
.txt3 { color: #fff; font-size: 1.15em;}
.txt4 { color: #fff; font-size: 1.3em; text-align: center; color: #ec5d25; background-color: #fff; padding: 2% 0; box-sizing: border-box;}
.txt5 { color: #354148;	}
.txt6 { color: #fff; font-size:3.4em; font-family: "mplus","メイリオ", sans-serif;font-weight:normal; }

.txt4.border { border:solid 2px #ec5d25;}
.txt4-hitode{position: relative;}
.txt4-hitode:before,.txt4-hitode:after{content: ''; position: absolute; }
.txt4-hitode:before { background: url('../img/illust/hitode1.png'); width: 34.5px; height: 34.5px; -webkit-background-size: contain; background-size: contain; left: -50px; top: -5px;}
.txt4-hitode:after { background: url('../img/illust/hitode2.png'); width: 30.5px; height: 29.5px; -webkit-background-size: contain; background-size: contain; right: -30px; top: -5px;}

/* .frame */
.frame1 { display: block; background-color: #fff; }
.frame1:hover .frame1-ph-img { transform: translate(-50%,-50%) scale(1.1) rotate(5deg); }
.frame1-ph,.frame1-txts { float: left; }
.frame1-ph { width: 30%; position: relative; overflow: hidden;}
.frame1-ph-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: .5s all ease-out;}

.frame1-txts { width: 70%; box-sizing: border-box; background-color: #fff; padding: 5%;}
.frame1-ttl { color: #00a4c4; font-weight: bold; font-size: 1.6em; line-height: 1; margin-bottom: 5%;}
.frame1-txt { color: #6a8287; font-size: 1.1em;}

.frame2 { background-color: #38b8d1; box-sizing: border-box; padding: 5%; }
.frame2-outer { display: block; color: #fff; transition: .5s opacity ease-out; margin-bottom: 5%;}
.frame2-outer:hover { color: #fff; opacity: .5;}
.frame2-ttl { border-bottom: 2px dashed #62edf3; margin-bottom: 3%; padding-bottom: 3%;}
.frame2-ph,.frame2-txts { float: left; }
.frame2-ph { width: 25%; margin-right: 5%; }
.frame2-txts { width: 70%; }
.frame2-date,.frame2-ttl-txt {display: block;}
.frame2-txt { font-size: .9em; }
.frame2 .frame2-outer:last-of-type { margin-bottom: 0; }

.frame3 { background-color: #d0ea42; box-sizing: border-box; padding: 8%; }
.frame3-ttl {position: relative; z-index: 2; color: #00a4c4; font-weight: bold; font-size: 1.4em; line-height: 1.2; margin-bottom: 20px; }
.frame3-txt {position: relative; z-index: 2; color: #354148; font-size: .9em;}
.frame3-txt2 {position: relative; z-index: 2; color: #354148; font-size: .9em; height:100%;}
.frame3-num { font-family: Rubik, sans-serif; position: absolute; top: 0; right: 15px; font-size: 6.5em; color: #fffb7b; line-height: 1; font-weight: bold;}

.frame4 { background-color: #2184f5; box-sizing: border-box; padding: 5%; position: relative;}
.frame4:before { content: ''; width: 0; height: 0; border: solid 20px transparent ; border-right: solid 20px #2184f5; position: absolute; top: 20px; left: -40px; z-index: 1;}
.frame4.right:before { content: ''; width: 0; height: 0; border: solid 20px transparent ; border-left: solid 20px #2184f5; position: absolute; top: 20px; right: -40px; left: auto;}

.frame4-ttl { color: #d8ff00; font-size: 2em;	margin-bottom: 5%;	}
.frame4-ttl:after { content: ''; width: 100%; height: 8px; background: url('../img/line/line1.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}
.frame4-txt { color: #fff; }

.frame4.orenge { background-color: #ec5d25;}
.frame4.orenge:before { border: solid 20px transparent ; border-right: solid 20px #ec5d25; }
.frame4.orenge.right:before { border: solid 20px transparent ; border-left: solid 20px #ec5d25;}

.frame4.white { background-color: #fff;}
.frame4.white:before { border: solid 20px transparent ; border-right: solid 20px #fff; }
.frame4.white.right:before { border: solid 20px transparent ; border-left: solid 20px #fff;}

.frame4.white .frame4-ttl { color: #ec5d25; font-size: 2em;	margin-bottom: 5%;	}
.frame4.white .frame4-ttl:after { content: ''; width: 100%; height: 8px; background: url('../img/line/line4.png') repeat-x; position: relative; bottom: 0; left: 0;  -webkit-background-size: contain; background-size: contain; display: block; margin-bottom: 1%;}
.frame4.white .frame4-txt { color: #354148; }

.frame5 { box-sizing: border-box; border: 20px solid #add2fc; background-color: #fff; }
.frame5-inner { position: relative; padding:5%; box-sizing: border-box;}
.frame5-inner2 { position: relative; padding:5%; box-sizing: border-box;}
.frame5-ttl { color: #ec5d25; font-weight: bold; margin-bottom: 5%;}
.frame5-ttl .ja { font-size: 1.7em; }
.frame5-txt1 { color: #354148; font-size: .9em; display: inline-block;}
.frame5-txt2 { color: #00a4c4; font-size: .9em; display: inline-block;}
.frame5-profile-outer { height: 200px; padding-top: 5%;}
.frame5-profile { position: absolute; bottom: 30px; right: 30px; font-size: .7em;}
.frame5-ph { position: absolute; bottom: 0; left: 0;  }

.frame6 { box-sizing: border-box; background: rgba(123,182,249,.8) url('../img/illust/frame6-fish.png') no-repeat top left; padding: 1% 6% 6% 6%; }
.frame6-ttl1 { color: #ec5d25; font-size: 1.1em; font-weight: bold;}
.frame6-ttl2 { color: #fff; font-size: 1.8em; font-weight: bold; text-decoration: underline;}

.frame7 { box-sizing: border-box; background-color: rgba(123,208,224,.8); padding: 5%; }


.frame8 { box-sizing: border-box; border: 20px solid #7bd0e0; background-color: #fff; }
.frame8-inner { position: relative; padding:5%; box-sizing: border-box;}
.frame8-inner2 { position: relative; padding:5%; box-sizing: border-box;}
.frame8-ttl { color: #ec5d25; font-weight: bold; margin-bottom: 5%;}
.frame8-ttl .ja { font-size: 1.7em; }
.frame8-txt1 { color: #354148; font-size: .9em; display: inline-block;}
.frame8-txt2 { color: #00a4c4; font-size: .9em; display: inline-block;}
.frame8-profile-outer { height: 200px; padding-top: 5%;}
.frame8-profile { position: absolute; bottom: 30px; right: 30px; font-size: .7em;}
.frame8-ph { position: absolute; bottom: 0; left: 0;  }

.frame9{ box-sizing: border-box; background-color: #fff;    border: solid 1px #d3d3d3; border-radius: 15px;}
.frame9-ttl{color: #ec5d25; font-weight: bold;}

.access_time{background-color: #FFF; width: 100%; border-radius: 5px;}
.access_time_inner{padding: 5%}

/* .btn */
.btn0 { display: block;	border-radius: 50%;	padding: 45% 0 55%; background-color: #d0ea42; text-align: center; font-size: 1.5em;	 line-height: 1;	position: relative;	overflow: hidden;}
.btn0:before { content: ''; width: 96%; height: 96%; border: solid 2px #fff; position: absolute;	top: 0;	left: 0;	right: 0; bottom: 0;	margin: auto; border-radius: 	50%; box-sizing: border-box; z-index: 3;}
.btn0,.btn0:before,.btn0:after { transition: .5s all ease-out; }
.btn0:after { content: ''; position: absolute; z-index: 1;}

.btn0:hover { background-color: rgba(208,234,66,.8); }
.btn0.type1 {font-size: 1.1em;}

.btn0.fish:after { bottom: 0; right: 0; width: 176px; height: 116px; background: url('../img/illust/fish.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 2; }
.btn0.fish1:after { bottom: 10px; right: 0; width: calc(160px / 2); height: calc(90px / 2); background: url('../img/illust/fish3.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 2; }
.btn0.fish2:after { bottom: 10px; right: 0; width: calc(140px / 2); height: calc(105px / 2); background: url('../img/illust/fish4.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 2; }
.btn0.fish3:after { bottom: 15px; right: 0; width: calc(145px / 2); height: calc(80px / 2); background: url('../img/illust/fish5.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 2; }
.btn0.fish4:after { bottom: 20px; right: 0; width: calc(177px / 2); height: calc(70px / 2); background: url('../img/illust/fish6.png') no-repeat; -webkit-background-size: contain; background-size: contain; z-index: 2; }


.btn0.fish:hover:after { bottom: 10px; right: 15px;}

.btn0.fin:after { bottom: -20px; right: 0; left: 0; margin: auto; width: 149px; height: 147.5px; background: url('../img/illust/fin.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.fin:hover:after { bottom: -5px; right: -5px;}

.btn0.snorkeling:after { bottom: 10px; right: 0; left: 0; margin: auto; width: 123px; height: 127px; background: url('../img/illust/snorkeling.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.snorkeling:hover:after { bottom: 25px; transform: rotate(5deg);}

.btn0.sunset:after { bottom: -20px; right: 0; left: 0; margin: auto; width: 229px; height: 164px; background: url('../img/illust/sunset.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.sunset:hover:after { right: -25px; }

.btn0.whale:after { bottom: 20px; right: 0; left: 0; margin: auto; width: 145px; height: 84px; background: url('../img/illust/whale.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.whale:hover:after { bottom: 45px; transform: rotate(20deg);}

.btn0.diver1:after { bottom: -15px; right: -10px; left: 0; margin: auto; width: 157px; height: 136px; background: url('../img/illust/diver1.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.diver1:hover:after { bottom: 0; right: 0; }

.btn0.diver2:after { bottom: 15px; right: -53px; left: 0; margin: auto; width: 157px; height: 136px; background: url('../img/illust/diver2.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.diver2:hover:after { bottom: 0; right: -53px; }

.btn0.sango:after { bottom: 0; right: 0; left: 0; margin: auto; width: 172px; height: 104px; background: url('../img/illust/sango.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.sango:hover:after { bottom: 10px; right: 5px; }

.btn0.fee:after { bottom: 0; right: 0; left: 0; margin: auto; width: 130px; height: 130px; background: url('../img/illust/umigame.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.fee:hover:after { bottom: 10px; right: 5px; }

.btn0.diver4_1:after { bottom: 0; right: 0; left: 0; margin: auto; width: 130px; height: 130px; background: url('../img/illust/diver4.png') no-repeat; -webkit-background-size: contain; background-size: contain; }
.btn0.diver4_1:hover:after { bottom: 10px; right: 5px; }

.btn0-ttl { color: #0235c9; position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%); width: 100%; line-height: 1.2;}
.btn0-ttl.typeA { top: 34%;}


.btn1 { padding: 3px; box-sizing: border-box; display: block; background-color: #d0ea42; position: relative; transition: .5s all ease-out;}
.btn1-inner { display: block;	padding: 6% 0; font-size: 1.5em;	 line-height: 1;	position: relative;	overflow: hidden; box-shadow: 0 0 0 2px #fff inset;}
.btn1:hover { background-color: rgba(208,234,66,.8); }

.btn1.ferry { position: relative; }
.btn1.ferry:after { content: ''; position: absolute; bottom: 0; left: 60px; margin: auto; width: 268px; height: 84px; background: url('../img/illust/ferry.png') no-repeat; -webkit-background-size: contain; background-size: contain; transition: .5s all ease-out;}
.btn1.ferry:hover:after { left: 30px; }

.btn1.fin1 { position: relative; }
.btn1.fin1:before { content: ''; position: absolute; bottom: 0; right: 20px; margin: auto; width: calc(170px / 2); height: calc(132px / 2); background: url('../img/illust/fin1.png') no-repeat; -webkit-background-size: contain; background-size: contain; transition: .5s all ease-out;}

.btn1.fin2 { position: relative; }
.btn1.fin2:before { content: ''; position: absolute; bottom: 0; right: 20px; margin: auto; width: calc(170px / 2); height: calc(132px / 2); background: url('../img/illust/fin2.png') no-repeat; -webkit-background-size: contain; background-size: contain; transition: .5s all ease-out;}

.btn1-ttl { color: #0235c9; position: absolute; top: 50%; right: -10%; transform: translate(-50%,-50%);  }
.btn1-ttl2 { color: #0235c9; text-align: center;  }
.btn1-ttl2-s { font-size: 80%; margin-bottom: 2%; }

.btn2 {background-color: #152698; color: #fff; display: block; padding: 6%; box-sizing: border-box; text-align: center; font-size: 1.5em; letter-spacing: 2px; box-shadow: 0 4px 0 0 #d9d9d9; position: relative; }
.btn2:hover { color: #fff;}
.btn2:after { content: ''; width: 0; height: 0; border: 8px solid transparent; border-left: 8px solid #00edfc; position: absolute; top: 50%; right: -0.5%; transform: translate(-50%,-50%);}

.btn2.shadow1 { box-shadow: 0 4px 0 0 #008ca7; }
.btn2.skyblue {background-color: #2184f5; }
.btn2.orenge {background-color: #ec5d25; }
.btn2.orenge:after { content: ''; width: 0; height: 0; border: 8px solid transparent; border-left: 8px solid #edfc00; position: absolute; top: 50%; right: -0.5%; transform: translate(-50%,-50%);}

.btn3 { background-color: #fff; color: #2184f5;  display: block; padding:1%; box-sizing: border-box; position: relative;}
.btn3-inner { border: solid 2px #2184f5; box-sizing: border-box; padding: 3% 5%;}
.btn3-ttl { font-size: 1.8em; font-weight: bold;}
.btn3-txt { font-size: 1.1em; }
.btn3-small {display: block; font-size: 0.6em; line-height: 1;}

.btn4 { background-color: #d0ea42; text-align: center; display: table; color: #0235c9; font-size: 1.3em; width: 100%; padding: 2%; box-sizing:border-box;}
.btn4-inner {display: table-cell; padding: 10% 0;  border: solid 1px #fff; width: 100%; vertical-align: middle;}

.btn4.active { background-color: #ec5d25; color: #fff; position: relative;}
.btn4.active:before { content: ''; width: 0; height: 0; border: 20px solid transparent; border-top: 20px solid #ec5d25; position: absolute; bottom: -40px; right: 0; left: 0; margin: 0 auto; z-index: 1;}

.hotelBtn { text-align: center; display: block; border-radius: 50%; width: 130px; height: 130px; font-weight: bold; position: relative; float:right;}
.hotelBtn-inner { position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%); }
.hotelBtn-logo { width: 102px; margin: 0 auto;}
.hotelBtn:hover { color: #26369f; }
.hotelBtn-inner p {  }

.btns { width: 1080px; margin: 0 auto; position: relative; top: 50px; z-index: 1;}
.btns1 { width: 1080px; margin: 0 auto; position: relative; top: -40px; z-index: 5;}


.qa { color: #d8ff00; }
.qa-q-inner { border-bottom: dashed 2px #8ad5e4; padding-bottom: 1%;}
.qa-q-ttl {font-family: 'Rubik', sans-serif; font-size: 3.6em; font-weight: bold; display: inline-block; padding:0 1%;}
.qa-q-txt {display: inline-block; font-size: 1.45em;}
.qa-a-inner { border-bottom: dashed 2px #8ad5e4; padding: 1% 0 1% 30px;}
.qa-a-inner2 { border-bottom: dashed 2px #8ad5e4; padding: 1% 0 1% 75px;}
.qa-a-ttl { font-family: 'Rubik', sans-serif; font-size: 2.2em; font-weight: bold; display: inline-block; padding: 0 1% 0 1%; line-height: 1; box-sizing: border-box;}
.qa-a-txt { display: inline-block; line-height: 1; color: #fff; box-sizing: border-box; }

.calendar-ttl { color: #fff; }
.calendar-ttl-year { font-size: 1.3em; }
.calendar-ttl-month { font-size: 1.5em; }
.calendar-table { table-layout: fixed; background-color: #fff;}
.calendar-table th,.calendar-table td{ color: #152698; font-weight: bold; text-align: center; border: solid 1px #152698;}
.calendar-table td { padding: 15px; font-size: 1.2em; position: relative; z-index: 0;}
.calendar-table td.maru1:before,.calendar-table td.maru2:before { content: ''; position: absolute; width: 30px; height: 30px; border-radius: 50%; border: solid 3px #ec5e26; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

.calendar-table td.maru2:before { border: solid 3px #d0ea42; }
.calendar-table td.sankaku:before,.calendar-table td.sankaku:after { content: ''; width: 0; height: 0; border: solid 17px transparent; border-bottom:solid 33px #00c2d9; top: -45%; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; z-index: -1;}

.calendar-table td.sankaku:after { border: solid 10px transparent; border-bottom:solid 21px #fff; top: -25%; }

.calendar-table td.batu:before,.calendar-table td.batu:after { position: absolute; width: 35px; height: 4px; background-color: #ec5d25; content: ''; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1;}

.calendar-table td.batu:before { transform: rotate(45deg); }
.calendar-table td.batu:after { transform: rotate(-45deg); }

.reservationStatus { box-sizing: border-box; padding: 2%; background-color: #b2edf4; color: #152698;}
.reservationStatus-txt { font-size: .9em; box-sizing:border-box; padding-left: 3em; position: relative; line-height: 1;}
.reservationStatus .reservationStatus-inner:nth-of-type(3) { margin-bottom: 0; }
.reservationStatus-inner { margin-bottom: 3%; }

.reservationStatus-txt.maru1:before,.reservationStatus-txt.maru2:before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #ec5e26; top: -50%; left: 0;}

.reservationStatus-txt.maru2:before { border: solid 3px #d8ff00; }
.reservationStatus-txt.sankaku:before,.reservationStatus-txt.sankaku:after { content: ''; width: 0; height: 0; border: solid 15px transparent; border-bottom:solid 30px #00c2d9; top: -25px; left: 0;  position: absolute; z-index: 1;}

.reservationStatus-txt.sankaku:after { border: solid 10px transparent; border-bottom:solid 21px #b2edf4; top: -14px; left: 5px;}

.reservationStatus-txt.batu:before,.reservationStatus-txt.batu:after { position: absolute; width: 25px; height: 3px; background-color: #ec5d25; content: ''; top: 50%; left: 0; z-index: 1;}

.reservationStatus-txt.batu:before { transform: rotate(45deg); }
.reservationStatus-txt.batu:after { transform: rotate(-45deg); }


/* .bg */
.bg0 {background-color: #00a4c4;}
.bg1 {background-color: #fff;}
.bg2 {background-color: #00a4c4;}
.bg3 {background-color: #7fd1e1; }
.bg4 {background-color: #152698; }
.bg5 {background-color: #2184f5; }
.bg6 {background-color: #ec5d25; }
.bg7 {background-color: #5aa4f8; }
.bg8 {background-color: #f39774;}
.bg9 {background-color: #42bcd3;}
.bg10 {background-color: rgba(123,182,249,.8);}
.bg11	{background: linear-gradient(-135deg, #2184f5,#15549b,#0b2c51);}

/* .bgImg */
.bgimg1,.bgimg2,.bgimg3 { position: relative; }
.bgimg1:after,.bgimg2:after,.bgimg3:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .6;}

.bgimg1:after { background: url('../img/bgimg/bgimg1/img.png') repeat-y top right; z-index: 1;}

.bgimg2:after{ background-image: url('../img/bgimg/bgimg2/right.png'),url('../img/bgimg/bgimg2/left.png'); background-repeat: repeat-y, repeat-y; background-position: top right,top left;}

.bgimg3:after { background-image: url('../img/bgimg/bgimg3/img.png'); background-repeat: repeat-y; background-position: top right;}
.bgimg4{background-image: url('../img/bgimg/bgimg4/bgimg4.png');background-repeat: no-repeat;}
.bgimg5{background-image: url('../img/bgimg/bgimg5/bgimg5.png');background-repeat: no-repeat; background-size: cover;}

/* .photo */
.photo { position: relative; }
.photo-inner { float: left; width: 16.66%;}

.photo-waveTop { position: absolute; top: 0; left: 0; transform: rotateX(180deg); }
.photo-waveBottom { position: absolute; bottom: 0; left: 0;}

.photo-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; background-color: rgba(255,255,255,.8); padding: 1%; border-radius: 50%; width: 190px; height: 190px; box-sizing: border-box; box-shadow: 0 0 10px 0 #aaa; transition: all .5s ease-out; z-index: 1;}
.photo-btn:hover { box-shadow: 0 0 20px 0 #fff; }

.photo-btn:before,.photo-btn:after { content: ''; position: absolute; }
.photo-btn:before {  width: 114px; height: 58px;  top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('../img/illust/camera.png') no-repeat;  -webkit-background-size: contain; background-size: contain;}

.photo-btn:after { content: 'MORE'; position: absolute; color: #fff; background-color: #00a4c4; text-align: center; padding: 2% 5%; box-sizing: border-box; border-radius: 5px; font-size: 1.2em; font-family: 'Rubik', sans-serif; letter-spacing: 1px; line-height: 1; bottom: 15px; left: 50%; transform: translate(-50%,-50%);}
.photo-btn-anim { animation: 2s photoBtnAnim ease-out infinite alternate; }
.photo-btn-txt { position: relative; top: -10px; color: #00a4c4; font-size: 1.3em; font-weight: bold; text-align: center; letter-spacing: -1px;}

@keyframes photoBtnAnim {
	0% {top: 48%;}
	100% {top: 52%;}
}

/* .shop */
.shop { position: relative;}
.shop-inner { float: left; width: 20%}

.shop-waveTop { position: absolute; top: -1px; left: 0; transform: rotateX(180deg); }
.shop-waveBottom { position: absolute; bottom: 0; left: 0;}

.shop-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-40%); display: block; background-color: rgba(255,255,255,.8); padding: 1%; border-radius: 50%; width: 190px; height: 190px; box-sizing: border-box; box-shadow: 0 0 10px 0 #aaa; transition: all .5s ease-out; z-index: 1;}
.shop-btn:hover { box-shadow: 0 0 20px 0 #fff; }

.shop-btn:before,.shop-btn:after { content: ''; position: absolute; }
.shop-btn:before { width: 82px; height: 87px;  top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('../img/illust/sandals.png') no-repeat;  -webkit-background-size: contain; background-size: contain;}
.shop-btn:after { content: 'MORE'; position: absolute; color: #fff; background-color: #00a4c4; text-align: center; padding: 2% 5%; box-sizing: border-box; border-radius: 5px; font-size: 1.2em; font-family: 'Rubik', sans-serif; letter-spacing: 1px; line-height: 1; bottom: 10px; left: 50%; transform: translate(-50%,-50%);}
.shop-btn-anim { animation: 2s shopBtnAnim ease-out infinite alternate; }
.shop-btn-txt { position: relative; top: -10px; color: #00a4c4; font-size: 2em; font-weight: bold; text-align: center; }

.staff-btn { position: absolute; top: 50%; left: 37%; transform: translate(-50%,-70%); display: block; background-color: rgba(255,255,255,.8); padding: 1%; border-radius: 50%; width: 120px; height: 120px; box-sizing: border-box; box-shadow: 0 0 10px 0 #aaa; transition: all .5s ease-out;}
.staff-btn:hover { box-shadow: 0 0 20px 0 #fff; z-index: 1;}

.staff-btn:before,.staff-btn:after { content: ''; position: absolute; }
.staff-btn:after { content: 'MORE'; position: absolute; color: #fff; background-color: #00a4c4; text-align: center; padding: 2% 5%; box-sizing: border-box; border-radius: 5px; font-size: 1.2em; font-family: 'Rubik', sans-serif; letter-spacing: 1px; line-height: 1; bottom: 10px; left: 50%; transform: translate(-50%,-50%);}
.staff-btn-anim { animation: 2s staffBtnAnim ease-out infinite alternate; }
.staff-btn-txt { position: relative; top: 5%; color: #00a4c4; font-size: 1.4em;  text-align: center; line-height: 1.1;}

.saiyou-btn { position: absolute; top: 50%; left: 65%; transform: translate(-50%,-30%); display: block; background-color: rgba(255,255,255,.8); padding: 1%; border-radius: 50%; width: 120px; height: 120px; box-sizing: border-box; box-shadow: 0 0 10px 0 #aaa; transition: all .5s ease-out; z-index: 1;}
.saiyou-btn:hover { box-shadow: 0 0 20px 0 #fff; }

.saiyou-btn:before,.saiyou-btn:after { content: ''; position: absolute; }
.saiyou-btn:after { content: 'MORE'; position: absolute; color: #fff; background-color: #00a4c4; text-align: center; padding: 2% 5%; box-sizing: border-box; border-radius: 5px; font-size: 1.2em; font-family: 'Rubik', sans-serif; letter-spacing: 1px; line-height: 1; bottom: 10px; left: 50%; transform: translate(-50%,-50%);}
.saiyou-btn-anim { animation: 2s saiyouBtnAnim ease-out infinite alternate; }
.saiyou-btn-txt { position: relative; top: 20%; color: #00a4c4; font-size: 1.4em;  text-align: center; line-height: 1.3;}


@keyframes shopBtnAnim {
	0% {top: 48%;}
	100% {top: 52%;}
}

@keyframes staffBtnAnim {
	0% {top: 53%;}
	100% {top: 47%;}
}

@keyframes saiyouBtnAnim {
	0% {top: 53%;}
	100% {top: 47%;}
}

.weather { width: 50%; }
.weather-ttl { position: relative; background-color: #d0ea42; border-bottom: 2px solid #00a4c4; padding: 1% 3%; box-sizing:border-box;}
.weather-date { color: #0235c9; font-size: 1.15em;}
.weather-txt { position: absolute; top: 5px; right: 3%; color: #00a4c4; font-size: .85em;}
.weather-contents { text-align: center; background-color: #fff; padding: 5%; box-sizing: border-box;}
.weather-icon-outer {width: 180px; height: 70px; margin: 0 auto;}
.weather-icon { margin-bottom: 1%;}
.weather-update { text-align: right; }
.weather-temp { font-size: 1.1em; font-weight: bold; margin-bottom: 10%;}
.weather-low { color: #01c0ff;}
.weather-slash { color: #00a4c4; }
.weather-high { color: #ff6101; }
.weather-update { font-size: .8em; }

.blogContents { display: inline-block; text-align: center; width: 100%;}
.blogContents-more { position: relative;}
.blogContents-more-img { width: 156px; height: 47.5px;}
.blogContents-more-txt { position: absolute; top: 45%; left: 45%; transform: translate(-50%,-50%); color: #0235c9; font-weight: bold;}
.blogContents-facebook { width: 19px; height: 36px; }
.blogContents-twitter { width: 33px; height: 27px; }
.blogContents-instagram { width: 33px; height: 27px; }
.blogContents a { margin-right: 5%; display: inline-block; vertical-align: middle;}
.blogContents a:last-of-type { margin-right: 0; }

/* .footer */
.footer { width: 100%; height: 560px; background: url('../img/footer/bg.jpg') no-repeat; -webkit-background-size: contain;
background-size: cover; padding: 45px 0 0 0;}
.footer-inner { width: 1080px; margin: 0 auto; }
.footer-copy { text-align: center; color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0,0,0,.5); line-height: 1; padding: 20px 0;}
/* ロゴが変更した場合用に残す20180906ueno .footer-logo { width: 300px; height: 98px; margin-bottom: 10px;} */
.footer-logo { width: 200px; height: 98px; margin-bottom: 10px;}
.footer-info { color: #fff; float: left;}
.footer-txt1 { font-size: 1em; }
.footer-tel { font-size: 1.45em; }
.footer-links { float: right; }
.footer-links a { color: #fff; }
.footer-links .footer-links-list:last-of-type { margin:0; }
.footer-links-list { float: left; border-left: solid 1px rgba(255,255,255,.5); box-sizing: border-box; padding:15px 0 15px 15px; margin: 0 30px 0 0; font-size: .8em;}
.footer-links-list a {display: inline-block; position: relative; transition: .5s opacity ease-out; }
.footer-links-list a:hover { color: #fff; opacity:.6;}
.footer-links-list a:before { transition: .5s all ease-out; content: ''; position: absolute; bottom: -5px; left: auto; right: 0; height: 1px; background-color: #fff; width: 0;}
.footer-links-list a:hover:before { width: 100%; right: auto; left: 0;}

.footer-links-list li {line-height: 1; margin-bottom: 20px;}
.footer-links-list li:last-of-type { margin-bottom: 0; }

/* a:link { color:#0073be; } */
/* a:visited { color:#0073be; } */
a:hover { color:#00a4c4; }
/* a:active { color:#be0014; } */

.lb { padding-bottom:3px; }
.lb a:link { border-bottom:1px solid #0073be; }
.lb a:visited { border-bottom:1px solid #0073be; }
.lb a:hover { border-bottom:3px double #be0014; }
.lb a:active { border-bottom:3px double #be0014; }
.lb li { margin-bottom:5px; }
.lbh { padding-bottom:1px; }
.lbh a:hover { border-bottom:1px solid #be0014; }
.lbh a:active { border-bottom:1px solid #be0014; }
.lbh li { margin-bottom:1px; }

.nb a:link { border:none; }
.nb a:visited { border:none; }
.nb a:hover { border:none; }
.nb a:active { border:none; }

/* .topicpath { position:relative; width:100%; font-size:0.9em; }
.topicpath ol { position:relative; width:1200px; text-align:left; margin:0 auto; padding:1em 0; }
.topicpath ol li { float:left; }
.topicpath ol li em { padding:0 0.5em; } */
.overScroll{width: 100%; overflow-x: auto; overflow-y: hidden;}
.overScroll-inner{ width:1200px; }


.parallax {
	background-attachment:absolute;
	background-repeat: no-repeat;
	background-position: 50% 90%;
}
.parallax_inner { height:auto; }

.highlight { transition: .5s opacity cubic-bezier(0.39,0.58,0.57,1); }
.highlight:hover { opacity: .6;}

.c0 { color: #111 !important; } .c0 a { color: #111 !important; }
.c1 { color: #c50000 !important; } .c1 a { color: #c50000 !important; }
.c2 { color: #7d320c !important; } .c2 a { color: #7d320c !important; }
.c3 { color: #0182ac !important; } .c3 a { color: #0182ac !important; }
.c4 { color: #a18205 !important; } .c4 a { color: #a18205 !important; }
.c5 { color: #fff !important; } .c4 a { color: #fff !important; }
.c6 { color: #ec5d25 !important;}
.c7 { color: #ec5d25 !important;}
.c8 { color: #d8ff00 !important;}
.c9 { color: #61eeff !important;}
.c10 { color: #0cff4b !important;}
.c10 { color: #d8ff00 !important;}
.c11 { color: #e2ff22 !important;}
.c12 { color: #f1a53a !important;}
.c13 { color: #fd29c9 !important;}
.c14 { color: #df0000 !important;}

.wave { background: #2394f7 url('../img/bgimg/wave.png'); }
.wave2 { position: relative; }
.wave2:before { background: url('../img/bgimg/wave2.png') repeat-x; content: ''; width: 100%; height: 30px; position: absolute; bottom: -20px; left: 0; z-index: 1;}

.wave-anim { animation: weveAnim 5s ease-out alternate infinite; }
@keyframes weveAnim {
	0% { background-position: 0 0; }
	100% { background-position: 8% 0; }
}

.notice { color:#e8383d; }
.appeal { color:#6a609c; }
.accent { color:#26499d; }

.c_pc { color:#ea5404; font-family:Cinzel, 'NotoSans'; font-weight:bold; } /* PALM COTTAGE */
.c_mc { color:#c9151e; font-family:Cinzel, 'NotoSans'; font-weight:bold; } /* MAIN COTTAGE */
.c_gv { color:#005e3c; font-family:Cinzel, 'NotoSans'; font-weight:bold; } /* GARDEN VILLA */
.c_gc { color:#014099; font-family:Cinzel, 'NotoSans'; font-weight:bold; } /* GROUND COTTAGE */

.bg_pc { background-color:#ea5404; color:#ffffff; } /* PALM COTTAGE */
.bg_mc { background-color:#c9151e; color:#ffffff; } /* MAIN COTTAGE */
.bg_gv { background-color:#005e3c; color:#ffffff; } /* GARDEN VILLA */
.bg_gc { background-color:#014099; color:#ffffff; } /* GROUND COTTAGE */

.bgl_pc { background-color:#f8efe9; color:#231815; } /* PALM COTTAGE */
.bgl_mc { background-color:#f8eaeb; color:#231815; } /* MAIN COTTAGE */
.bgl_gv { background-color:#dff2e7; color:#231815; } /* GARDEN VILLA */
.bgl_gc { background-color:#e4edfa; color:#231815; } /* GROUND COTTAGE */

.en { font-family: 'Rubik', sans-serif; }
h1, h2, h3, h4, h5, h6, caption, dt { position:relative; line-height:1.3; }
h1 .en, h2 .en, h3 .en, h4 .en, h5 .en, h6 .en, caption .en, dt .en { font-family: 'Rubik', sans-serif; }
h1 .ja, h2 .ja, h3 .ja, h4 .ja, h5 .ja, h6 .ja, caption .ja, dt .ja { font-family: "mplus","メイリオ", sans-serif; }
h1.mb, h2.mb, h3.mb, h4.mb, h5.mb, h6.mb, caption.mb, dt.mb { margin-bottom:1em; }

/* .table */
.table1 { border-spacing: 0; border-collapse: collapse;color:#354148;}
.table1 th { vertical-align: top; text-align: left; color: #354148; background-color: #fff; border-bottom: 1px dashed #a4a4a4; font-size: .8em;}
.table1 td {  border-bottom: 1px dashed #a4a4a4; background-color: #fff;}
.table1 .table1-ttl {font-weight: bold; margin-bottom: 1%;}
.table1 .table1-txt {font-size: .8em;}

.table2 { border-spacing: 0; border-collapse: collapse;color:#fff;}
.table2 th,.table2 td{ border-top: solid 1px #fff; border-bottom: 1px solid #fff; letter-spacing: 2px;}

.table3 { border-spacing: 0; border-collapse: collapse; color:#fff; text-align: left;}
.table3 th,.table3 td{  border-bottom: 2px dashed #99c6fb; letter-spacing: 2px;}

.table4 { border-spacing: 0; border-collapse: collapse; color:#354148; text-align: left;}
.table4 th,.table4 td{ background-color: rgba(153,198,251,.8); border-bottom: 2px dashed #354148; border-top: 2px dashed #354148; letter-spacing: 2px;}

.table5 { border-spacing: 0; border-collapse: collapse;color:#354148;}
.table5 th,.table5 td{ border-top: solid 1px #354148; border-bottom: 1px solid #354148; letter-spacing: 2px; background-color: rgba(255,255,255,.8);}

.table6 { border-spacing: 0; border-collapse: collapse;color:#354148; font-size: .9em;}
.table6 th { word-break: keep-all; text-align: left; vertical-align: top;}
.table6 th,.table6 td{ border-bottom: 1px dashed #d1d1d1; letter-spacing: 2px; background-color: rgba(255,255,255,.8);}

.table7 { border-spacing: 0; border-collapse: collapse;color:#354148; font-size: .9em;}
.table7 th { word-break: keep-all; text-align: left; vertical-align: top;}
.table7 th,.table7 td{ border-top: 1px dashed #d1d1d1; border-bottom: 1px dashed #d1d1d1; letter-spacing: 2px; background-color: rgba(255,255,255,.8);}

.table8 { border-spacing: 0; border-collapse: collapse; font-size:.9em;background-color: #FFF;}
.table8 th{ word-break: keep-all; text-align: left; vertical-align: middle;background-color: #008ca7; color:#FFF; }
.table8 th:last-child{border-right: none;}
.table8 th,.table8 td{  letter-spacing: 2px;border-top: 1px solid #ccc;border-right: 1px solid #ccc; }
.table8 td{border-bottom: 1px solid #ccc;}

.table9{ border-spacing: 0; border-collapse: collapse; font-size:.9em;}
.table9 tr{border-top: 1px solid #FFF;border-bottom: 1px solid #FFF; box-sizing: border-box;}
.table9 tr.month_contents td{border-left: 2px solid #FFF;border-right: 2px solid #FFF; box-sizing: border-box;}
.table9 th{background-color: #FFF;color: #FFF; }
.table9 th.left{background-color: #005dbc;}
.table9 .month th{ border-spacing: 5px;width: 7%; }
.table9 .month span{border-radius: 15px; display: block ;background-color: #005dbc;padding: 10px 5px; }
.table9 td.bg1{background: #d0ea42;}
.table9 td.bg2{background: #f16f87;}
.table9 td.bg3{background: #75b0b3;}
.table9 td.bg4{background: #34bf68;}
.table9 td.bg5{background: #4cd0ff;}
.table9 td.bg6{background: #e8593e;}
.table9 td.bg7{background: #cadbdf;}
.table9 td.bg8{background: #FFF;}

.shopimfotable { font-size:90%; color:#212121; height:400px;}
.shopimfotable th, .shopimfotable td { border-top: solid #e6e6e6 1px; border-bottom: solid #e6e6e6 1px; }
.shopimfotable th { background-color: #f5f5f5; }
.shopimfotable td { background-color: #fff; }
@media screen and ( max-width: 736px ) {
	.shopimfotable { font-size:90%; color:#212121; height:100%;}
	.shopimfotable th, .shopimfotable td { border-top: solid #e6e6e6 1px; border-bottom: solid #e6e6e6 1px; }
.shopimfotable th { background-color: #f5f5f5; }
.shopimfotable td { background-color: #fff; }
}

.table-ttl1 { background-color: #ec5d25; display: inline-block; width: 100%; padding: 3% 0; color: #fff; text-align: center; letter-spacing: 1px;}

/* アイコン */
.external a, .external { background-image:url(../img/ico_external.gif) !important; background-repeat:no-repeat; background-position:right center; padding-left:0; padding-right:15px !important; }
.pdf a, .pdf { background-image:url(../img/ico_pdf.png) !important; background-repeat:no-repeat; background-position:right center; padding-left:0; padding-right:15px !important; }
@media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
.external a, .external { background-image:url(../img/ico_external@2x.gif) !important; background-size:11px 11px !important; }
.pdf a, .pdf { background-image:url(../img/ico_pdf@2x.png) !important; background-size:11px 11px !important; }
}

.cf:after { clear: both; }
.cf:before, .cf:after { display: table; content: ''; }

@media screen and ( max-width:1500px) {
	.menuContents-list li { font-size: 1.3em; }
	.menuContents-list a { padding: 0 0 5% 5%; margin-bottom: 15%;}
}

@media screen and ( max-width:1400px) {
	.staff-btn { left: 30%; }
	.saiyou-btn { left: 70%; }
}

@media screen and ( max-width:1200px) {
	.mainImg-txt,.ttl1 { font-size: 2em; }
	.btn0,.btn1 {font-size: 1.1em;}
	.btn0.fish:after { width: calc(176px / 1.2); height: calc(116px / 1.2);}
	.btn0.snorkeling:after { width: calc(123px / 1.2); height: calc(127px / 1.2);}
	.btn0.fin:after { width: calc(149px / 1.2); height: calc(147.5px / 1.2);}
	.btn0.sunset:after { width: calc(229px / 1.2); height: calc(164px / 1.2); }
	.btn0.whale:after { width: calc(145px / 1.2); height: calc(84px / 1.2);}
	.btn0.diver1:after { width: calc(157px / 1.2); height: calc(136px / 1.2);}
	.btn0.sango:after { width: calc(172px / 1.2); height: calc(104px / 1.2);}
	.btn1.ferry:after { width: calc(268px / 1.2); height: calc(84px / 1.2);}
	.ttl2 .en.diver1:after { width: calc(157px / 1.2); height: calc(136px / 1.2); }
	.ttl2 .en.fin-snorkel:after { width: calc(151px / 1.2); height: calc(108px / 1.2 );}
	.ttl3 .en.diver2:after { width: calc(122px / 1.2); height: calc(156px / 1.2);}
	.ttl4 .en.diver3:after { width: calc(96px / 1.2); height: calc(180px / 1.2);}
}

@media screen and ( max-width:1080px) {
	.contents-inner0,.contents-inner1,.contents-inner2,.footer-inner,.btns,.btns1 { width: 95%; margin: 0 auto;}
	.btns,.btns1 { top: 10px; }
	.frame1-ttl {font-size: 1.3em;}
}

@media screen and ( max-width:950px) {
	.menuContents-list li { font-size: 1em; }
	.ttl2 .en { font-size: 2em; }
	.footer-info { font-size: 80%; }
	.footer-info,.footer-links { float: none; }
}

/* iPad */
@media screen and ( max-width: 768px ) {

	.mainImg2 { height: 40vh; overflow: hidden; }
	.mainImg2-ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400% !important; }
	.mainImg3 { height: 40vh; overflow: hidden; }

	.ttl8 .ja1 { font-size: 2.5em; }
	.ttl9 .ja1 { font-size: 2.5em; top: 10px;	}
	.ttl10 .ja1 { font-size: 2.5em; }
	.btn3-ttl { font-size: 1.5em; }
	.wetsuit:before { top: -20px; }
	.ttl9.fish1:after,.ttl9.fish2:after,.ttl9.fish3:after,.ttl9.fish4:after,.ttl8.fin1:before,.ttl8.fin2:before,.diver6:before,.diver7:before,.wetsuit:before,.yadokari:before,.umigame:before {right: 5%; }
	.ferry1:before, .ferry2:before { width: calc(454px / 3); height: calc(142px / 3); }
	.btn0.fish:after { width: calc(176px / 1.35); height: calc(116px / 1.35);}
	.btn0.snorkeling:after { width: calc(123px / 1.35); height: calc(127px / 1.35);}
	.btn0.fin:after { width: calc(149px / 1.35); height: calc(147.5px / 1.35);}
	.btn0.sunset:after { width: calc(229px / 1.35); height: calc(164px / 1.35); }
	.btn0.whale:after { width: calc(145px / 1.35); height: calc(84px / 1.35);}
	.btn0.diver1:after { width: calc(157px / 1.35); height: calc(136px / 1.35);}
	.btn0.sango:after { width: calc(172px / 1.35); height: calc(104px / 1.35);}
	.btn1.ferry:after { width: calc(268px / 1.35); height: calc(84px / 1.35);}
	.ttl2 .en.diver1:after { width: calc(157px / 1.35); height: calc(136px / 1.35); }
	.ttl2 .en.fin-snorkel:after { width: calc(151px / 1.35); height: calc(108px / 1.3 );}
	.ttl3 .en.diver2:after { width: calc(122px / 1.35); height: calc(156px / 1.35);}
	.ttl4 .en.diver3:after { width: calc(96px / 1.35); height: calc(180px / 1.35);}
	.mainImg-contents { height: 105%; }
	.frame1-ttl { font-size: 1.1em; }
	.frame3-ttl { font-size: 1em; }
	.frame2-ttl-txt { font-size: .9em; }
	.staff-btn { left: 25%; }
	.saiyou-btn { left: 75%; }
	.footer-logo { margin: 0 auto 3%; }
	.footer-info { margin-bottom: 6%; display: inline-block; width: 100%; text-align: center;}
	.footer-links-list { width: 30%; }
	.ttl2 .en { font-size: 1.5em; }
	.photo-btn-txt { font-size: 1.2em; top: 0;}
	.staff-btn-txt { top: 15%; }
	.photo-outer { background-color: #00a4c4; }
	.photo-inner,.shop-inner { width: 50%; }
	.photo-waveTop { top: -1px; }
	.photo-waveBottom { bottom: -1px; }
	.ttl3 .en.diver2:after,.ttl4 .en.diver3:after { top: -40%; right: 0;}
	.btn1.ferry:after { left: 30px; }
	.ttl3,.ttl4,.ttl5 { width: 100%; }
	.header-menu-line { animation: none; }
	.header-menu:hover { background-color: transparent;}
	.header.on .header-menu,.header-menu.menuon { background-color: #009dc5; }
	.reservationStatus-txt.maru1:before,.reservationStatus-txt.maru2:before { top: -40%; }
.table8{width:100%;}
.table_scroll{overflow: auto;white-space: nowrap;}
.table_scroll::-webkit-scrollbar{height: 5px;}
.table_scroll::-webkit-scrollbar-track{background: #F1F1F1;}
.table_scroll::-webkit-scrollbar-thumb {background: #BCBCBC;}
.table9{width: 1050px!important;}
}
/* iPad 横向き */
@media screen and (min-width: 1024px) and (max-height: 768px) {}

/* iPhone6以降 */
@media screen and ( max-width: 736px ) {
	body { font-size: 95%; }
	.menuContents { padding: 5% 0 5% 5%; overflow-y: scroll; }
	.menuContents-inner { height: 90%; }
	.menuContents-list { float: none; width: 90%; margin: 0 0 0 auto;}
	.menuContents-list li { font-size: 1.6em; }
	.menuContents-list a { margin-bottom: 6%; padding: 0 0 6% 6%; }
	.contents-inner0 { padding: 10% 0; }
	.mainImg-logoTxt { width: 100%; text-align: center;}
	.header-icons { float: right; padding-right: 0;}
	.header-icons-logo { margin-right: 15px; }
	.header-icons-sns li { padding-right: 15px; }
	.header-icons-sns li:last-of-type { padding-right: 15px; }
	.mainImg-contents { left: 50%; }
	.mainImg-logo { margin: 0 auto 50px; width: 240px; }
	.footer-links { display: none; }
	.footer { height: 350px; }
	.photo-btn,.shop-btn { width: 120px; height: 120px; }
	.ttl2 .en,.ttl2 .ja { line-height: 2; }
	.ttl2 .en { font-size: 2.2em; }
	.ttl3,.ttl4 { text-align: left; }
	.ttl5-ja1 { width: 100%; }
	.ttl5-ja2 { font-size: 2em; text-align: left; line-height: 1.3;}
	.ttl5:before { bottom: -10px; }
	.ttl5.sango:after { bottom: -5px; }
	/*  ロゴが変更した場合用に残す20180906ueno .footer-logo { width: calc(300px / 1.2); height: calc(98px / 1.2);} */
	.footer-logo { width: calc(200px / 1.2); height: calc(98px / 1.2);}
	.footer-copy { font-size: .8em; }
	.footer-txt1 { font-size: 1.3em; }
	.ttl6 { text-align: center; }
	.txt { text-align: center; }
	.hotelBtn { float: none; margin: 0 auto; }
	.footer-logo { margin-bottom: 10%; }
	.reservationStatus-txt { padding-left: 4.5em; }
	.btn0,.btn0:before { border-radius: 0; }
	.weather { width: 100%; }
	.weather-contents { padding: 0; }
	.weather-contents-inner { padding: 5%; }
	.weather-icon-outer { width: 90px; height: 35px; margin: 0 auto 3%;}
	.weather-date { font-size: 1.5em; }
	.weather-temp { font-size: 1.5em; margin-bottom: 0;}
	.weather-update { box-sizing: border-box; padding: 0 5% 5% 0;}
	.btns .btn4 { font-size: 1em; }
	.btn4.active:before { border: 5px solid transparent; border-top: 5px solid #ec5d25; bottom: -10px;}
	.btn2 { font-size: 1.3em; }
	.btn2:after { content: ''; width: 0; height: 0; border: 5px solid transparent; border-left: 5px solid #00edfc; position: absolute; top: 50%; right: -0.5%; transform: translate(-50%,-50%);}
	.btn2.orenge:after { border: 5px solid transparent; border-left: 5px solid #edfc00; }

	.btn0.fish,.btn0.fish1,.btn0.fish2,.btn0.fish3,.btn0.fish4 { font-size: 1.8em; }


	.btn0.fish:after { width: calc(176px / 2.2); height: calc(116px / 2.2);}
	.btn0.snorkeling:after { width: calc(123px / 2.2); height: calc(127px / 2.2); bottom: 0;}
	.btn0.fin:after { width: calc(149px / 2.2); height: calc(147.5px / 2.2);}
	.btn0.sunset:after { width: calc(229px / 2.2); height: calc(164px / 2.2); }
	.btn0.whale:after { width: calc(145px / 2.2); height: calc(84px / 2.2); bottom: 0;}
	.btn0.diver1:after { width: calc(157px / 2.2); height: calc(136px / 2.2);}
	.btn0.sango:after { width: calc(172px / 2.2); height: calc(104px / 2.2);}
	.btn0.diver2:after { width: calc(172px / 2.2); height: calc(104px / 2.2);}
	.btn0.fee:after { width: calc(130px / 2.2); height: calc(130px / 2.2);}
	.btn0.diver4_1:after { width: calc(130px / 2.2); height: calc(130px / 2.2);}
	.btn1.ferry:after { width: calc(268px / 3.2); height: calc(84px / 3.2);}
	.ttl2 .en.diver1:after { width: calc(157px / 2.2); height: calc(136px / 2.2); bottom: -40%;}
	.ttl2 .en.fin-snorkel:after { width: calc(151px / 2.2); height: calc(108px / 2.2); bottom: -40%;}
	.ttl3 .en.diver2:after { width: calc(122px / 2.2); height: calc(156px / 2.2);}
	.ttl4 .en.diver3:after { width: calc(96px / 2.2); height: calc(180px / 2.2); top: -15%;}
	.ttl5.sango:after { width: calc(105px / 1.5); height: calc(82px / 1.5);}
	.photo-btn:before { width: calc(114px / 1.5); height: calc(58px / 1.5);}
	.shop-btn:before { width: calc(82px / 1.8); height: calc(87px / 1.8);}
	.fishs:before { width: calc(614px / 3); height: calc(180px / 3);}
	.ttl9.fish1:after { width: calc(162px / 3); height: calc(102px / 3);}
	.ttl9.fish1:after { width: calc(162px / 3); height: calc(102px / 3);}
	.ttl9.fish2:after { width: calc(140px / 3); height: calc(124px / 3);}
	.ttl9.fish3:after { width: calc(166px / 3); height: calc(100px / 3);}
	.ttl9.fish4:after { width: calc(184px / 3); height: calc(78px / 3); }
	.diver4:before { width: calc(113px / 2); height: calc(143px / 2); right: 0;}
	.diver8:before { width: calc(113px / 2); height: calc(143px / 2); right: 0;}
	.wetsuit:before { width: calc(215px / 4); height: calc(231px / 4); }
	.yadokari:before { width: calc(186px / 4); height: calc(184px / 4); }
	.umigame:before { width: calc(186px / 4); height: calc(184px / 4); }
	.ferry1:before, .ferry2:before { width: calc(454px / 5); height: calc(142px / 5); bottom: 25px;}
	.diver5:before { width: calc(139px / 3); height: calc(256px / 3); }
	.sango3:before { width: calc(260px / 3); height: calc(204px / 3); }
	.ttl9.fish1:after, .ttl9.fish2:after, .ttl9.fish3:after, .ttl9.fish4:after, .ttl8.fin1:before, .ttl8.fin2:before, .diver6:before, .diver7:before,.wetsuit:before, .yadokari:before, .umigame:before { right: 0;}
	.ttl9 .ja1:after,.ttl8 .ja1:after { margin-bottom: 5%; }
	.ttl8.fin1:before,.ttl8.fin2:before { width: calc(170px / 3); height: calc(132px / 3); bottom: 40px; right: 0;}
	.diver6:before {	width: calc(130px / 3); height: calc(242px / 3);}
	.diver7:before {	width: calc(130px / 3); height: calc(242px / 3);}
	.txt4-hitode {font-size: .8em; padding: 4% 0; display: block;}
	.txt4-hitode:before { left: 5px; top: 5px; }
	.txt4-hitode:after { right: 5px; top: 5px; }
	.staff-btn,.saiyou-btn { width: 80px; height: 80px; }
	.staff-btn { left: 15%; }
	.saiyou-btn { left: 85%; }
	.shop-btn-txt { top: 0; }
	.weveCommon {display: none;}
	.mainImg-contents { animation: none; }
	.ttl8 .ja1 { font-size: 1.5em; }
	.ttl9 .ja1 { font-size: 1.5em; top: 10px;	}
	.ttl10 .ja1 { font-size: 1.5em; }
	.ttl7 { font-size: 1.5em; }
	.btn3-ttl { font-size: 1.5em; }
	.frame5-profile { bottom: 10px; right: 10px; background-color: rgba(255,255,255,.7); box-sizing: border-box; padding:3%;}
	.qa-a-inner,.qa-a-inner2 { padding: 1% 0; }
	.reservationStatus { padding: 5% 3%; }
	.reservationStatus .reservationStatus-inner:nth-of-type(3),.reservationStatus-inner { margin-bottom: 10%; }

	.ttl12:before, .ttl12:after { top: -1px; }
	.ttl12:before { border: solid 10px transparent; border-left: solid 10px #fff; }
	.ttl12:after { border: solid 10px transparent; border-right: solid 10px #fff; }
	.calendar-table td.sankaku:before,.calendar-table td.sankaku:after { border: solid 15px transparent; border-bottom:solid 30px #00c2d9; top: -40%; }
	.calendar-table td.sankaku:after { border: solid 10px transparent; border-bottom:solid 21px #fff; top: -24%; }
	.calendar-table td.maru1:before, .calendar-table td.maru2:before { width: 25px; height: 25px; }
	.reservationStatus-txt.sankaku:before,.reservationStatus-txt.sankaku:after {top: -20px; }
	.reservationStatus-txt.sankaku:after { top: -9px; }
	.mainImg2{ height: 40vh; overflow: hidden;}
	.mainImg3{ height: auto; overflow: hidden;}
	.mainImg2-ttl,.mainImg3-ttl { font-size: 2em; }
	.mainImg2-txt,.mainImg3-txt { font-size: 1.2em; }
	.mainImg2-ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400% !important; }
	.mainImg3-contents { position: relative; }
	.btns { top: 0; padding: 3% 0; }

	/* ホエールスイム */
	.mainImg4-contents { text-align: center; background-color: rgba(0,79,219,.7); position: absolute; bottom: 0; left: 0; width: 100%; padding: 3% 0; color: #fff;}
	.mainImg4-ttl { font-size: 2.4em; display: block }
	.txt6 { color: #fff; font-size:1.5em; font-family: "mplus","メイリオ", sans-serif;font-weight:normal; }
}

/* iPhone5 */
@media screen and (max-width: 320px) {}

/* iphone */
@media screen and (max-width: 736px) and (max-height: 414px) {}