@charset "UTF-8";
/* CSS Document */

.top_photo{
	position:relative;
	height:650px;
	width:1260px;
	margin:auto;
	margin-bottom:40px;
}
@media screen and (max-width: 1260px) {
	.top_photo {
		height:600px;
		width:100%; 
	}
}
@media screen and (max-width: 1000px) {
	.top_photo {
		height:480px; 
	}
}
@media screen and (max-width: 800px) {
	.top_photo {
		height:380px;
	}
}
@media screen and (max-width: 700px) {
	.top_photo {
		height:350px; 
	}
}
@media screen and (max-width: 600px) {
	.top_photo {
		height:300px;
		margin-bottom:20px;
	}
}
@media screen and (max-width: 500px) {
	.top_photo {
		height:240px;
	}
}
@media screen and (max-width: 400px) {
	.top_photo {
		height:200px; 
	}
}
.top_photo img{
	width:26.5%;
	border:#fff 3px solid;
	position:absolute;
	border-radius:3px;
}
.top1{
	top:-5px;
	left:20px;
	transform:rotate(-5deg)
}
.top2{
	top:-5px;
	left:25%;
	transform:rotate(-5deg)
}
.top3{
	top:-5px;
	left:49%;
	transform:rotate(3deg)
}
.top4{
	top:-5px;
	left:71%;
	transform:rotate(-5deg)
}
.top5{
	top:48%;
	left:30px;
	transform:rotate(8deg)
}
.top6{
	top:50%;
	left:24%;
	transform:rotate(-6deg)
}
.top7{
	top:50%;
	left:49%;
	transform:rotate(4deg)
}
.top8{
	top:49%;
	left:71%;
	transform:rotate(-8deg)
}
@media screen and (max-width: 800px) {
	.top1 {
		left:5px; 
	}
	.top5{
		left:10px;
	}
}
@media screen and (max-width: 500px) {
	.header-logo-right {
		margin-top: 5px;
		text-align: center;
	}
	.top_photo{
		margin-top:10px;
	}
}


.sns_box{
	margin:20px auto;
	width:960px;
}
.sns_box a{
	color:#fff;
	text-shadow:4px 4px 1px #000,4px -4px 1px #000,-4px 4px 1px #000,-4px -4px 1px #000,0px -4px 1px #000,0px 4px 1px #000,-4px 0px 1px #000,4px 0px 1px #000;
	letter-spacing:3px;
	font-family: "Rounded Mplus 1c";
	font-weight:800;
}
.sns_box ul li{
	background-color:#fff;
	margin:1%;
	float:left;
	width:25%;
	padding:30px;
	font-size:200%;
	line-height:50px;
}
.sns_box ul li img{
	width:50px;
	float:left;
	margin-right:10px;
}
.sns_box ul li:hover{
	background-color:rgba(255,255,255,0.7);
}
@media screen and (max-width: 1000px) {
	.sns_box ul li{
		width:40%;
	}
	.sns_box{
		width:760px;
	}
}
@media screen and (max-width: 800px) {
	.sns_box ul li{
		width:85%;
	}
	.sns_box{
		width:480px;
		margin-top:10px;
		margin-bottom:10px;
	}
}
@media screen and (max-width: 500px){
	.sns_box{
		width:320px;
	}
	.sns_box ul li{
		width:80%;
	}
}
.sns_box ul li{
	position:relative;
}
.sns_box ul li span{
	position:absolute;
	color:#5B4B4B;
	top:0px;
	left:100px;
	font-size:50%;
	font-weight:normal;
	text-shadow:none;
	letter-spacing:0;
}

.information-content ul{
	width:100%;
}

.course-image{
	background-color:#FFFFFF;
}
.images{
	width:100%;
}
.images img{
	float:left;
/*	border:#fff 5px solid;*/
	width:51%;
	position:relative;
}
.images img.img01{
	transform:rotate(-5deg);
}
.images img.img02{
	transform:rotate(3deg);
	margin-left:-3%;
	z-index:999;
}
.images img.img03{
	transform:rotate(3deg);
	margin-top:-2%;
	z-index:999;
}
.images img.img04{
	transform:rotate(-5deg);
	margin-top:-3%;
	margin-left:-3%;
}
@media screen and (max-width: 800px) {
	.images img{
		width:51%;
	}
}
@media screen and (max-width: 500px) {
	.images img{
		width:51%;
	}
}

/*----------2018年3月追加分----------*/
.howto{
	background-color:#F79800;
	padding:10px 0;
	border-radius:5px;
	color:#494C62;
}
.howto div{
	margin:0 10px;
	background-color:#fff;
	padding:10px;
	border-radius:3px;
}
.howto h3{
	border:#FDC624 1px solid;
	border-radius:20px;
	padding:20px 5px;
	text-align:center;
	background-color:#FFF483;
	font-size:180%;
}
.howto p{
	margin:10px 20px 20px;
	line-height:160%;
	font-size:96%;
	letter-spacing:0;
}
@media screen and (max-width: 800px) {
	.howto h3{
		font-size:150%;
		line-height:150%;
		padding:10px 5px;
	}
}
@media screen and (max-width: 500px) {
	.howto h3{
		font-size:120%;
		line-height:120%;
	}
}

/*--- 2020.3.16  --*/
.bg{
	background-position:center center;
	background-size:cover;
	color:#fff;
	text-shadow:#000 0 0 10px,#000 0 0 10px,#000 0 0 10px,#000 0 0 10px,#000 0 0 10px;
}
.bg_cave{
	background-image:url(../images/bg_cave.jpg);
}
.bg_mabo{
	background-image:url(../images/bg_mabo.jpg);
}
@media screen and (max-width: 1000px){
	.container,.sns_box{
		width:90%;
	}
}
@media screen and (max-width: 500px){
	.container,.sns_box{
		width:90%;
	}
}
@media screen and (max-width:800px){
	.sns_box ul li{
		/*width:90%;*/
	}
}

/*--  2020.3.18  --*/
.bg_marine{
	background-image:url(../images/bg_marine.jpg)
}
.bg_staff{
	background-image:url(../images/bg_staff2.jpg);
}
.bg_shop{
	background-image:url(../images/bg_shop.jpg);
}

@media screen and (max-width: 800px){
	.movie-left, .movie-right{
		width:100%;
	}
	.movie-left iframe{
		width:100%;
	}
}

/*--  2020.3.23  --*/
.review{
	margin:10px 0;
	width:90%;
}
.review img{
	width:50px;
	float:left;
	margin-right:10px;
}
.review a{
	display:block;
	/*background-color:#fff;
	padding:30px;*/
	font-size:200%;
	line-height:50px;
	/*width:90%;*/
	color:#fff;
	text-shadow:4px 4px 1px #000,4px -4px 1px #000,-4px 4px 1px #000,-4px -4px 1px #000,0px -4px 1px #000,0px 4px 1px #000,-4px 0px 1px #000,4px 0px 1px #000;
	letter-spacing:3px;
	font-family: "Rounded Mplus 1c";
	font-weight:800;
}
.review:hover{
	opacity:80%;
}
/*@media screen and (max-width: 900px){
	.review{
		width:90%;
	}
}
@media screen and (max-width: 660px){
	.review{
		width:86%;
	}
}
@media screen and (max-width: 480px){
	.review{
		width:84%;
	}
}*/

/*--  2020.3.27  --*/
/*.review{
	float:right;
	margin:0;
	margin-bottom:20px;
	padding:0;
	width:560px;
}
.review a{
	padding:10px 20px;
	margin:0;
	border-radius:10px;
	width:91%;
	background-color:rgba(0,0,0,0);
	border:1px solid #fff;
}
.review a:hover{
	background-color:rgba(255,255,255,0.1);
}*/
.review a p{
	width:250px;
	margin:auto;
}
@media screen and (max-width:1000px){
	.review{
		width:460px;
	}
	/*.review a{
		width:89%;
	}*/
}
@media screen and (max-width:800px){
	.review{
		width:100%;
		float:none;
	}
	/*.review a{
		width:91%;
		margin:10px;
		padding:20px;
	}*/
}
/*@media screen and (max-width:700px){
	.review a{
		width:90%;
	}
}
@media screen and (max-width:600px){
	.review a{
		width:88%;
	}
}
@media screen and (max-width:500px){
	.review a{
		width:86%;
	}
}*/

.slider-pro{
	width:100% !important;
	border:#fff 2px solid;
	overflow:hidden;
}
.information a img{
	cursor:pointer;
}

/*--  2020.3.31  --*/

.review{
	margin-top:20px;
	padding:10px 20px;
	border-radius:10px;
	width:91%;
	border:2px solid #fff;
}
.review:hover{
	background-color:rgba(255,255,255,0.1);
}
.review a{
}
/*@media screen and (max-width:800px){
	.review{
		margin-left:-10px;
	}
}*/
@media screen and (max-width:800px){
	.review{
		width:93%;
	}
}
@media screen and (max-width:650px){
	.review{
		width:91%;
	}
}
@media screen and (max-width:500px){
	.review{
		width:90%;
	}
}
@media screen and (max-width:450px){
	.review{
		width:86%;
	}
}
@media screen and (max-width:350px){
	.review a p{
		width:80%;
	}
	.review a{
		font-size:130%;
	}
	.review img{
		width:40px;
	}
	.review{
		padding:5px;
		width:94%;
	}
}

/*-- 2020.8.24 --*/
.bg_kame{
	background-image:url(../images/bg_kame.jpg);
}
.bg_sunset{
	background-image:url("../images/bg_sunset.jpg");
}

.images img{
	/*border:5px solid #f7e7c1;
	width: 49%;*/
	box-shadow:0 0 2px #999999
}
@media screen and (max-width:400px){
	.images img{
		border: 3px solid #f7e7c1;
		width: 47%;
	}
}
@media screen and (max-width:200px){
	.images img{
		border: 2px solid #f7e7c1;
		width: 46%;
	}
}

/*-- 2020.8.25 --*/
.vertical_photo li{
	position: relative;
	overflow: hidden;
	padding-top: 74%;
	border:5px solid #f7e7c1;
}
.vertical_photo img{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
.vertical_photo li.img01{
	transform: rotate(-2deg)
}
.vertical_photo li.img02{
	transform: rotate(2deg)
}
.vertical_photo li.img03{
	transform: rotate(-2deg)
}
.vertical_photo li.img04{
	transform: rotate(2deg)
}

/*-- 2020.10.24 --*/
.staff_in{
	overflow: hidden;
	margin-bottom: 15px;
}
.staff_in li{
	width: 49.5%;
	float:left;
	position: relative;
}
.staff_in li:first-child{
	margin-right: 1%;
}
.staff_in li img{
	width: 100%;
}
.staff_in li p{
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #fff;
}
.bg_staff_kame{
	background-image:url(../images/bg_staff_kame2.jpg);
}

/*--　2021.3.3　--*/
.movie-left{
	width: 45%;
}
.movie-left div{
	width: 100%;
	height: 0;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
}
.movie-left iframe{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
.movie-right{
	width: 55%
}
.movie-right-catch{
	margin-top: 15px;
}
.review{
	width: 98%;
	padding: 1%;
}
@media screen and (max-width:800px){
	.movie-left,.movie-right{
		width: 100%;
	}
}

/*-------------------------------------------------------------
　　　　　　以下、レスポンシブ化設定し直し（2021.3.8）
-------------------------------------------------------------*/
.header-logo{
	overflow: hidden
}
.header-logo-left,
.header-logo-right{
	float: left;
	width: 40%;
	margin: 0 5%;
}
.header-logo-left img,
.header-logo-right img{
	width: 100%;
}
@media screen and (max-width:1000px){
	.header-logo-left,.header-logo-right{
		width: 50%;
		margin: 0;
	}
}
@media screen and (max-width:600px){
	.header-logo-left,.header-logo-right{
		width: 100%;
	}
}

.menu ul li{
	margin-top: 5px;
	width: 49.8%;
}
@media screen and (max-width:800px){
	.menu ul li{
		width: 100%;
	}
}

.bg{
	font-size:20px;
	line-height: 170%;
	padding:5% 7%;
}
.course-description p{
	padding-top: 5px;
}
.vertical_photo{
	overflow: hidden;
	padding: 2%;
}
.vertical_photo li{
	width: 47%;
	float: left;
	margin-left: 1%;
	padding-top: 35%;
}
@media screen and (max-width:1000px){
	.bg{
		font-size: 18px;
		padding: 2% 4%;
	}
}
@media screen and (max-width:800px){
	.bg{
		font-size: 14px;
	}
	.vertical_photo{
		padding: 1%;
		padding-bottom: 2%;
	}
	.vertical_photo li{
		width: 97%;
		padding-top: 70%;
	}
}