@charset "utf-8";
/* CSS Document */
/* font link */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap');
@font-face {
	font-family: "gennei";
	src: url("../img/gennei.ttf") format("ttf"),url("../img/gennei.eot") format("eot"),url("../img/gennei.woff") format("woff"),url("../img/gennei.woff2") format("woff2");
}
.gennei{
	font-family: "gennei";
	font-weight: bold;
}
.Pop_400{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
}
.Pop_500{
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
}
.Pop_600{
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}
/*-----------------------------------------
				  全体
-----------------------------------------*/
body{
	background-color: #00050a;
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, sans-serif;
	z-index: 0;
}
body:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,rgba(0,180,235,0.10),rgba(135,185,30,0.10));
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
body:after{
	content: "";
	display: block;
	background-image: url(../img/dotte2.png), url(../img/dotte2.png), url(../img/dotte2.png), url(../img/dotte2.png), url(../img/dotte2.png);
	background-repeat: repeat-y;
	background-position: 10%,25%,50%,75%,90%;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: -1;
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/* CURSOR */
.cursor,.follower{
	border-radius: 50%;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
}
.cursor{
	width: 8px;
	height: 8px;
	z-index: 1001;
}
.follower{
	width: 40px;
	height: 40px;
	z-index: 1000;
	transition: 0.3s;
	opacity: 0.7;
	transition-property: transform,background;
}
.follower.is-active{
	background: transparent;
	border: solid 1px #00b4eb;
	transform: scale(1.5);
}
.cursor.is-active.more_move,.cursor.is-active.more_info{
	background-color: transparent;
}
.follower.is-active.more_move::before{
	content: url("../img/more1.png");
	width: 100px;
	height: 100px;
	position: relative;
	top: -34px;
	left: -34px;
}
/* BUTTON */
.more a{
	background: transparent;
	text-transform: uppercase;
	border-radius: 0;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg,rgba(0,180,235,0.70),rgba(135,185,30,0.90));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	border: none;
	width: 250px;
	box-sizing: border-box;
}
.more a:hover{
	color: #fff;
	background-position: 99% 50%;
}
#footer .more a{
	background: transparent;
	text-transform: uppercase;
	border-radius: 0;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg,rgba(0,180,235,0.70),rgba(0,5,10,0.60),rgba(0,5,10,0.80));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	border: none;
	width: 250px;
	box-sizing: border-box;
}
#footer .more a:hover{
	color: #fff;
	background-position: 99% 50%;
}
/* zoomup */
.zoomup img{
	vertical-align: top;
	-webkit-transition: all 2s ease-out;
	transition: all 2s ease-out;
}
.zoomup.square_img img,
.zoomup.rectangle_img img{
	position: absolute;
	top: 0;
	left: 0;
	-ms-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}
.zoomup .square_img img,
.zoomup .rectangle_img img{
	position: absolute;
	top: 0;
	left: 0;
	-ms-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}
.zoomup:hover img{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
/* others */
.under{ text-decoration: underline;}

/* header */
#nav_menu .bottom:before{
	content: "\A";
	white-space: pre;
}

/*-----------------------------------------
				  下層
-----------------------------------------*/
/* TOPへ戻る */
.scroll{
	bottom: 100px;
	right: 5%;
	z-index: 1;
}
.scr{
	display: inline-block;
	margin-top: 50px;
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.scroll_d{
	width: 1px;
	height: 100px;
	margin: auto;
}
.scroll_d > span{
	width: 1px;
	height: 100%;
	background-color: rgba(255,255,255,0.2);
}
.scroll_d > span::before{
	position:absolute;
	content: "";
	display: block;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
	animation: line 4s ease 0s infinite;
}
@keyframes line {
	0% {
		top: 100px;
		height: 0;
	}
	20% {
		top: 0;
		height: 100px;
	}
	40% {
		top: 0;
		height: 0;
	}
	100% {
		top: 0;
		height: 0;
	}
}
.page #header #logo{
	top: 5%;
	left: 3%;
	z-index: 3;
}
.page #header .more{
	top: 5%;
	right: 3%;
	z-index: 3;
}
.page #header #fix_title{
	top:50%;
	left: 0;
	-ms-transform: translate(0,-50%) rotate(270deg);
	-webkit-transform: translate(0,-50%) rotate(270deg);
	transform: translate(0,-50%) rotate(270deg);
	z-index: 3;
	width: 140px;
	text-align: center;
}
/* footer */
.page #footer{
	border-top: dotted 1px rgba(255,255,255,0.30);
}
#footer_btn span:after{
	content: "\A" ;
	white-space: pre ;
}
#footer_btn figure:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0,5,10,0.50);
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
#footer_btn h2{z-index: 2;}
#page_title{
	background-image: url("../img/page_title.png");
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
}
#page_title .title_wrap{
	top:50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

/* cate list */
#cate_list{justify-content: flex-start;}
#cate_list li{
	width: 21.25%;
	margin-right: 5%;
	margin-bottom: 30px;
	box-sizing: border-box;
}
#cate_list li:nth-of-type(4n){
	margin-right: 0;
}
#cate_list li:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f107";
	position: absolute;
	top: 0;
	right: 0;
	transition: 0.3s;
	color: #00b4eb;
}
#cate_list li:hover:before{
	color: #87b91e;
}
#cate_list li.active:before{
	color: #87b91e;
}


/* about */
#about .description1{}
#about .cate_img1{
	min-width: 600px;
	float: left;
}
#about .description2{
	background-color: rgba(0,5,10,0.80);
	min-width: 300px;
	margin-top: -25%;
	float: right;
	z-index: 0;
}
#about .description2:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,rgba(0,180,235,0.10),rgba(135,185,30,0.10));
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#about .cate_box .box_item.img_none{
	padding: 0!important;
}
/* gallery */
.page #gallery .cate_box{
	width: 22.75%;
	margin-right: 3%;
	margin-bottom: 5%;
}
.page #gallery .cate_box:nth-of-type(4n){
	margin-right: 0;
}
.page #gallery .cate_box .box_img1{z-index: 0;}
.page #gallery .cate_box .box_title1{
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 0;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
	width: 100%;
}
.page #gallery .cate_box:hover .box_title1{
	bottom: -30px;
	opacity: 1;
}
/* attraction */
#attraction .box_wrap{counter-reset: number 0;}
#attraction .box_item:before{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	counter-increment: number 1;
	content: counter(number,decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 30px;
	opacity: 0.3;
}
/* info */
#map iframe{
	width: 100%;
	height: 400px;
}
/* contact */
#contact #mail_wrap{
}
#contact #mail_contact li:before{
	content: "■";
	font-weight: 900;
	position: absolute;
	top: 0;
	left: 5px;
}
#contact #form_box .box input::-webkit-input-placeholder,#contact #form_box .box textarea::-webkit-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
	color: rgba(255,255,255,0.70);
}
#contact #form_box .box input:-moz-placeholder,#contact #form_box .box textarea:-moz-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
	color: rgba(255,255,255,0.70);
}
#contact #form_box .box input:-ms-input-placeholder,#contact #form_box .box textarea:-ms-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
	color: rgba(255,255,255,0.70);
}
#contact #form_box .box input,#contact #form_box .box textarea{
	outline: none;
	border-style: none;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	color: white;
}
#contact #form_box .box{
	border-bottom: 1px dotted rgba(255,255,255,0.30);
}
#contact #form_box .box:last-of-type{
	border-bottom: none;
}
#contact #form_box .box input{height: 35px;}
#contact #form_box .box textarea{height: 150px;}
#contact input[type="submit"].btn,
#contact input[type="reset"].btn{
	-webkit-appearance: none;
	background: transparent;
	border-radius: 0;
	outline: none;
	border: 1px solid;
	cursor: pointer;
}
#contact input[type="submit"].btn:disabled{
    cursor: default;
}
.g-recaptcha > div{
	margin: 0;
}
#sitemap_wrap{
	justify-content: flex-start;
}
#sitemap .more{
	width: 30%;
	margin-right: 5%;
	box-sizing: border-box;
}
#sitemap .more:nth-of-type(3n){
	margin-right: 0;
}
#sitemap .more a{
	width: auto;
}


/*IEのみ
---------------------------------------------------------------------------*/
@media all and (-ms-high-contrast: none) {
	/* information */
	.page #info .cate_box{padding-bottom: 26px;}
	/*-------- contact --------*/
    #mail_contact ul{
		padding-top: 25px;
	}
	#form_box .box h3{
		padding-top: 5px;
	}
	
	#contact input[type="submit"],
	#contact input[type="reset"]{
		padding-bottom: 11px;
	}
	#sitemap .more a{padding-bottom: 6px;}
}


/* PCのみ */
@media screen and (min-width: 769px){
	
}
/*ここからタブレット用（768px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	#wrap{cursor: auto;}
	a{cursor: pointer;}
	.cursor,.follower{
		display: none;
	}
	/*-----------------------------------------
					  下層
	-----------------------------------------*/
	/* cate_list */
	#cate_list li{
		width: 30%;
	}
	#cate_list li:nth-of-type(3n){
		margin-right: 0;
	}
	#cate_list li:nth-of-type(4n){
		margin-right: 5%;
	}
	.page #header #fix_title{
		width: 115px;
		left: -20px;
	}
	#about .cate_img1{
		min-width: auto;
		float: none;
	}
	#about .description2{
		min-width: auto;
		margin-top: -10%;
		float: none;
	}
	/*-------- gallery --------*/
	.page #gallery .cate_box{
		width: 30%;
		margin-right: 5%;
		margin-bottom: 10%;
	}
	.page #gallery .cate_box:nth-of-type(4n){
		margin-right: 5%;
	}
	.page #gallery .cate_box:nth-of-type(3n){
		margin-right: 0;
	}
	.page #gallery .cate_box:hover .box_title1{
		bottom: -25px;
	}
	/*-------- attraction --------*/
	/*-------- contact --------*/
	.g-recaptcha > div{
		margin: 0 auto;
	}
	/*-------- sitemap --------*/
	#sitemap .more{
		width: 47.5%;
	}
	#sitemap .more:nth-of-type(3n){
		margin-right: 5%;
	}
	#sitemap .more:nth-of-type(2n){
		margin-right: 0;
	}
}
/*ここからスマホ用（667px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
	/* TOPへ戻る */
	.scroll{
		bottom: 50px;
		right: -22px;
	}
	/* cate_list */
	#cate_list li{
		width: 100%;
		margin-right: 0;
	}
	#cate_list li:nth-of-type(4n){
		margin-right: 0;
	}
	.page #header #fix_title{
		width: 115px;
		left: -41px;
	}
	/*-------- gallery --------*/
	.page #gallery .cate_box{
		width: 47.5%;
	}
	.page #gallery .cate_box:nth-of-type(3n){
		margin-right: 5%;
	}
	.page #gallery .cate_box:nth-of-type(2n){
		margin-right: 0;
	}
	/*-------- sitemap --------*/
	#sitemap .more{
		width: 100%;
		margin-right: 0;
	}
	#sitemap .more:nth-of-type(3n){
		margin-right: 0%;
	}
}