/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white:#ffffff;
@black:#191919;
@l_black:#333333;
@gray:#d9d9d9;
@l_gray:#eeeeee;
@d_gray:#aaaaaa;
@dd_gray:#777777;
@red:#d85656;
@d_red:#a53a3a;
@yellow:#e5a82e;
@d_yellow:#bb8210;
@blue:#00539b;
@d_blue:#163b84;
@green:#59b559;
@d_green:#287528;
@violet:#8243c4;
@d_violet:#58278c;
@sky:#5ec2d2;
@brown:#926834;


/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
	font-family:YuGothic, 'Yu Gothic', sans-serif;
	font-size:14px;
	color:@black;
	background-color:@black;
	letter-spacing:0.5px;
	box-sizing:border-box;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a{
	font-size:14px;
	color:@black;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
img{
	vertical-align:bottom;
}
ul{
	margin:0;
	padding:0;
	
	li{
		list-style:none
	}
}

/*---------- デフォルトスタイルのリセット ----------*/
input, textarea{
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
select, button{
	border:none;
	border-radius:0;
	cursor:pointer;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

/*---------- disabled ----------*/
input:disabled, textarea:disabled, select:disabled{
	background-color:@gray;
}

/*---------- scrollbar ----------*/
::-webkit-scrollbar{
	width:5px;
	height:5px;
}
::-webkit-scrollbar-track{
	background:@white;
}
::-webkit-scrollbar-thumb{
	background:@dd_gray;
	/*box-shadow:inset 0 0 0 1px @gray;*/
}

/*---------- text-select ----------*/
::selection{
	color:@dd_gray;
	background:none;
}
::-moz-selection{
	color:@dd_gray;
    background:none;
}

/*---------- loading ----------*/
.loading{
	display:none;
}	
.loading.active{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.5);
	z-index:500;
	
	span{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:100%;
		text-align:center;

		i{
			font-size:50px;
			color:@white;
		}
	}
}

/*---------- responsive ----------*/
@media(max-width:768px){
	.pc{
		display:none !important;
	}
}
@media(min-width:769px){
	.sp{
		display:none !important;
	}	
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
header:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:-webkit-gradient(linear, top left, bottom left, from(rgba(25, 25, 25, 0.9)), color-stop(0%, transparent));
	background:-webkit-linear-gradient(top, rgba(25, 25, 25, 0.9) 0%, transparent);
	background:-moz-linear-gradient(top, rgba(25, 25, 25, 0.9) 0%, transparent);
	background:-o-linear-gradient(top, rgba(25, 25, 25, 0.9) 0%, transparent);
	background:linear-gradient(to bottom, rgba(25, 25, 25, 0.9) 0%, transparent);
}

.head_contents{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	max-width:1200px;
	height:100px;
	margin:0 auto;
	padding:0 30px;
	/* box-sizing:border-box; */
	z-index:100;
}

/*---------- header->logo ----------*/
.head_logo{
	a{
		display:block;

		img{
			height:80px;
		}
	}
}

/*---------- header->option ----------*/
.head_option{
	display:flex;
	align-items:center;
	grid-gap:30px;
}

/*---------- header->lang ----------*/
.head_lang{
	display:flex;
	align-items:center;
	grid-gap:5px;
	padding-bottom:5px;
	border-bottom:1px solid @white;

	i{
		display:block;
		font-size:14px;
		color:@white;
	}
	select{
		font-size:12px;
		line-height:1;
		color:@white;
		background:none;
		border:none;

		option{
			background-color:@black;
		}
	}
}

/*---------- header->hambueger ----------*/
.head_hamburger{
	display:block;
	position:relative;
	width:50px;
	height:20px;
	margin-bottom:1px;
	cursor:pointer;
	z-index:100;

	span{
		position:absolute;
		left:0;
		width:100%;
		height:1px;
		background-color:@white;
		animation-duration:0.3s;
		animation-iteration-count:1;
		animation-timing-function:linear;
	}
	span.top{
		top:0;
		transform:rotate(0deg);
	}
	span.middle{
		top:50%;
		transform:rotate(0deg);
	}
	span.bottom{
		top:100%;
		transform:rotate(0deg);
	}
}

/*---------- header->nav ----------*/
.head_nav{
	display:block;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	width:100%;
	background-color:@black;
	overflow:auto;
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:90;
}
.head_nav_area{
	max-width:1200px;
	height:100%;
	margin:0 auto;
	padding:0 30px;

	.contents{
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:1fr 70px;
		grid-gap:50px;
		align-items:center;
		height:100%;
		
		.img{
			width:100%;
			height:300px;
			background-image:url('/images/common/nav_img.jpg');
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
		}
		.link{
			li{
				display:block;
				margin-bottom:20px;
	
				a{
					display:inline-block;
					position:relative;
					padding:0 5px;
					font-family:YuMincho, 'Yu Mincho', serif;
					font-size:24px;
					color:@white;
					transition:0.3s;
				}
				a:before{
					content:'';
					position:absolute;
					top:48%;
					left:0;
					width:0;
					border-top:1px solid @white;
					transition:0.3s;
				}
				a:hover{
					color:@d_gray;
				}
				a:hover:before{
					width:100%;
				}
			}
			li:last-child{
				margin:0;
			}
		}
		.sns{
			display:flex;
			justify-content:flex-start;
			align-items:center;
	
			a{
				display:block;
				margin-right:15px;
				
				i{
					display:flex;
					justify-content:center;
					align-items:center;
					width:30px;
					height:30px;
					font-size:20px;
					color:@black;
					background-color:@white;
					border-radius:50%;
					transition:0.3s;
				}
				i:hover{
					background-color:@d_gray;
				}
			}
		}
		.copy{
			font-size:12px;
			color:@white;
			text-align:right;
		}
	}
}


/*---------- header->sp_nav->open ----------*/
body.nav_open{
	overflow:hidden;

	.head_nav{
		opacity:1;
		visibility:visible;
	}
	.head_hamburger{
		span.top{
			top:50%;
			transform:rotate(30deg);
		}
		span.middle{
			opacity:0;
		}
		span.bottom{
			top:50%;
			transform:rotate(-30deg);
		}
	}
}

/*---------- hamburger-animation ----------*/
@keyframes nav_open_top{
	0%{
		top:0;
		transform:rotate(0deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:50%;
		transform:rotate(30deg);
	}
}
@keyframes nav_open_middle{
	0%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:0;
	}
}
@keyframes nav_open_bottom{
	0%{
		top:100%;
		transform:rotate(0deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:50%;
		transform:rotate(-30deg);
	}
}
@keyframes nav_close_top{
	0%{
		top:50%;
		transform:rotate(30deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:0;
		transform:rotate(0deg);
	}
}
@keyframes nav_close_middle{
	0%{
		opacity:0;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes nav_close_bottom{
	0%{
		top:50%;
		transform:rotate(-30deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:100%;
		transform:rotate(0deg);
	}
}


/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
footer{
	padding-top:100px;
	background-color:@black;
}
.foot_contents{
	max-width:1200px;
	margin:0 auto;
	padding:0 0 20px;

	/*---------- footer->logo ----------*/
	.logo{
		margin-bottom:30px;
		text-align:center;

		img{
			width:100px;
		}
	}

	/*---------- footer->info ----------*/
	.info{
		max-width:600px;
		margin:0 auto 30px;
		padding:0 20px;

		dl{
			display:grid;
			grid-template-columns:120px 1fr;
			align-items:flex-start;
			margin:0;
			padding:10px 0;
			font-size:12px;
			color:@white;
			border-top:1px solid @d_gray;

			dd{
				margin:0;

				a{
					font-size:12px;
					color:@white;
				}
			}
		}
		dl:last-child{
			border-bottom:1px solid @d_gray;
		}
	}

	/*---------- footer->qrcode ----------*/
	.qrcode{
		display:flex;
		justify-content:center;
		align-items:center;
		flex-wrap:wrap;
		grid-gap:30px;
		margin-bottom:30px;
		text-align:center;

		img{
			// width:100px;
			height:100px;
			transition:0.3s;
		}
		img:hover{
			opacity:0.7;
		}
	}

	/*---------- footer->sns ----------*/
	.sns{
		display:flex;
		justify-content:center;
		align-items:center;
		margin-bottom:20px;

		a{
			display:block;
			position:relative;
			margin:0 10px;
			
			/*---------- Insights対策 ----------*/
			span{
				position:absolute;
				opacity:0;
				/* visibility:hidden; */
			}
			i{
				display:flex;
				justify-content:center;
				align-items:center;
				width:30px;
				height:30px;
				font-size:20px;
				color:@black;
				background-color:@white;
				border-radius:50%;
				transition:0.3s;
			}
			i:hover{
				background-color:@d_gray;
			}
		}
	}

	/*---------- footer->copyright ----------*/
	.copy{
		font-size:12px;
		color:@white;
		text-align:center;
	}
}



/*---------- footer->nav ----------*/
.footer_nav{
	padding:30px;

	li{
		display:block;
		margin-bottom:5px;

		a{
			color:@white;

			span{
				font-size:12px;
			}
			span:before{
				content:'-';
				margin-right:5px;
			}
		}
	}
	li:last-child{
		margin:0;
	}
}

/*---------- footer->topへ戻る ----------*/
.footer_return{
	position:fixed;
	right:30px;
	bottom:30px;
	width:40px;
	height:40px;
	background-color:@d_gray;
	border-radius:50%;
	cursor:pointer;
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:200;

	span{
		position:absolute;
		top:0px;
		right:4px;
		width:17px;
		height:3px;
		background-color:@white;
		transition:0.3s;
	}
	.t_left{
		transform:translateX(-13px) translateY(17px) rotate(315deg);
	}
	.t_right{
		transform:translateX(-3px) translateY(17px) rotate(225deg);
	}
	.b_left{
		transform:translateX(-13px) translateY(17px) rotate(315deg);
	}
	.b_right{
		transform:translateX(-3px) translateY(17px) rotate(225deg);
	}
}
.footer_return.active{
	opacity:1;
	visibility:visible;
}
.footer_return:hover{
	.t_left{
		transform:translateX(-13px) translateY(12px) rotate(315deg);
	}
	.t_right{
		transform:translateX(-3px) translateY(12px) rotate(225deg);
	}
	.b_left{
		transform:translateX(-13px) translateY(22px) rotate(315deg);
	}
	.b_right{
		transform:translateX(-3px) translateY(22px) rotate(225deg);
	}
}


/*-----------------------------------------------------*/
/*-------------------- grid-system --------------------*/
/*-----------------------------------------------------*/
.grid_container{
	display:flex;
	flex-wrap:wrap;
	margin:-15px;
}
.grid_container:after{
	content:'';
	display:block;
	clear:both;
}
.grid_column{
	float:left;
	padding:15px;
	box-sizing:border-box;

	img{
		width:100%;
	}
}
/*---------- sm-ver ----------*/
.grid_container.sm{
	margin:-5px;
}
.grid_container.sm .grid_column{
	padding:5px;
}

/*---------- column-size ----------*/
.grid_column.col1{width:8.333%;}
.grid_column.col2{width:16.666%;}
.grid_column.col3{width:25%;}
.grid_column.col4{width:33.333%;}
.grid_column.col5{width:41.665%;}
.grid_column.col6{width:50%;}
.grid_column.col7{width:58.335%;}
.grid_column.col8{width:66.667%;}
.grid_column.col9{width:75%;}
.grid_column.col10{width:83.334%;}
.grid_column.col11{width:91.667%;}
.grid_column.col12{width:100%;}
.grid_column.col2-6{width:16.666%;}
.grid_column.col2-12{width:16.666%;}
.grid_column.col3-12{width:25%;}


/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	display:block;
	margin:30px 0 0;
	font-size:0;
	text-align:center;
	
	li{
		display:inline-block;
		margin-right:5px;
		
		span{
			display:block;
			padding:5px 15px;
			font-size:14px;
			color:@white;
			border:1px solid @dd_gray;
		}
		a{
			display:block;
			padding:5px 15px;
			font-size:14px;
			color:@white;
			border:1px solid @dd_gray;
		}
		a:hover{
			background-color:@dd_gray;
		}
	}
	li.active{
		span{
			color:@white !important;
			background-color:@dd_gray !important;
			border:1px solid @dd_gray !important;
		}
	}
	li:last-child{
		margin:0;
	}
}


/*---------------------------------------------------*/
/*-------------------- container --------------------*/
/*---------------------------------------------------*/
.main_container{
	position:relative;
	background-color:@black;
	z-index:10;
}
/*
.main_container:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:repeating-linear-gradient(135deg, #0c0c0c, #0c0c0c 8px, transparent 8px, transparent 10px);
	opacity:0.5;
}
*/

.section_area{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:100px 30px;
	box-sizing:border-box;
}
.section_area.blog{
	padding-top:0;
}
.section_area.blog_article{
	padding:0px 30px;
	background:repeating-linear-gradient(135deg, @white, @white 3px, transparent 3px, transparent 6px);
}


/*-----------------------------------------------*/
/*-------------------- modal --------------------*/
/*-----------------------------------------------*/
.modal_area{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.85);
	overflow:auto;
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:100;
}
.modal_area.active{
	opacity:1;
	visibility:visible;
}
.modal_window{
	position:absolute;
	background-color:@white;
	backface-visibility:hidden;
	overflow:auto;
}
/*---------- modal-size ----------*/
.modal_window.lg{
	width:100%;
	max-width:1200px;
}
.modal_window.md{
	width:100%;
	max-width:800px;
}
.modal_window.sm{
	width:100%;
	max-width:500px;
}

.modal_close{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	bottom:50px;
	left:50%;
	transform:translateX(-50%);
	width:50px;
	height:50px;
	background-color:@white;
	border-radius:50%;
	line-height:1;
	box-sizing:border-box;
	cursor:pointer;
	transition:0.3s;
	
	i{
		font-size:20px;
		color:@black;
	}
}
.modal_close:hover{
	background-color:@d_gray;
}

/*---------- ギャラリー用のmodal ----------*/
.modal_img_area{
	img{
		width:100%;
	}
}

/*---------- 動画用のmodal ----------*/
.modal_video_area{
	video{
		width:100%;
		vertical-align:bottom;
	}
}


/*----------------------------------------------------*/
/*-------------------- slider-pro --------------------*/
/*----------------------------------------------------*/
.sp-fade-arrows{
	opacity:1 !important;
	z-index:2;
}
.sp-horizontal .sp-arrows{
	top:auto !important;
	bottom:-20px !important;
}
.sp-horizontal .sp-previous-arrow{
	left:43% !important;
}
.sp-horizontal .sp-next-arrow, .sp-horizontal.sp-rtl .sp-previous-arrow{
	right:43% !important;
}
.sp-next-arrow:after, .sp-next-arrow:before, .sp-previous-arrow:after, .sp-previous-arrow:before{
	width:20% !important;
}


/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*---------------------------------------- ここからカスタマイズ ----------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/


/*---------------------------------------------------*/
/*-------------------- top-start --------------------*/
/*---------------------------------------------------*/

/*---------- main_visual ----------*/
.mv_area{
	position:relative;
	height:100%;
}

/*---------- main_visual->video ----------*/
.mv_video{
	position:relative;
	height:100%;

	video{
		width:100%;
		height:100%;
		object-fit:cover;
	}
}
.mv_video:before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	width:100%;
	height:13vw;
	max-height:150px;
	background-image:url('/images/top/mv_logo.svg');
	background-position:center;
	background-repeat:repeat;
	background-size:contain;
	z-index:3;
}
.mv_video:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:@black;
	opacity:0.7;
	z-index:2;
}

/*---------- main_visual->back_img ----------*/
.mv_back{
	position:relative;
	width:100%;
	height:100%;
	background-image:url('/images/top/mv_img.webp');
	background-position:center;
	background-size:cover;
	z-index:10;
}
.mv_back:before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	width:100%;
	height:150px;
	background-image:url('/images/top/mv_logo.svg');
	background-position:center;
	background-repeat:repeat;
	background-size:contain;
	z-index:3;
}
.mv_back:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:@black;
	opacity:0.7;
	z-index:2;
}

/*---------- main_visual->side_text ----------*/
.mv_side{
	position:absolute;
	bottom:0;
	left:10px;
	width:100px;
	height:150px;
	background-image:url('/images/top/side_scroll.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	cursor:pointer;
	overflow:hidden;
	z-index:20;
}

/*---------- main_visual->video_play ----------*/
.mv_play{
	position:absolute;
	right:30px;
	bottom:30px;
	width:50px;
	height:50px;
	background-color:@dd_gray;
	border-radius:50%;
	cursor:pointer;
	transition:0.3s;
	z-index:30;

	i{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		font-size:20px;
		color:@white;
		vertical-align:bottom;
	}
}
.mv_play:hover{
	background-color:@l_black;
}

/*---------- top->wrapper ----------*/
.top_wrapper{
	position:relative;	
}
.top_wrapper:before{
	content:'';
	position:absolute;
	top:0;
	left:10px;
	width:100px;
	height:100%;
	background-image:url('/images/top/side_border.webp');
	background-position:center;
	background-size:contain;
	z-index:10;
}

/*---------- top->section ----------*/
.top_section{
	position:relative;
	padding-top:150px;
	
	.side{
		position:absolute;
		top:100px;
		left:10px;
		width:100px;
		z-index:1;

		img{
			width:100%;
		}
	}
}

/*---------- top->title ----------*/
.top_title{
	position:relative;
	margin-bottom:50px;
	text-align:center;
	z-index:1;

	h2{
		display:inline-block;
		position:relative;

		img{
			height:50px;
		}
	}
	h2:before{
		content:'';
		position:absolute;
		top:50%;
		right:-50px;
		left:-50px;
		border-top:1px solid @white;
	}
}

/*---------- top->about ----------*/
.top_about{
	position:relative;
}
.top_about_text{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:0 30px;
	z-index:20;

	.contents{
		width:50%;

		h2{
			margin-bottom:30px;
			font-family:YuMincho, 'Yu Mincho', serif;
			font-size:28px;
			color:@white;
			line-height:36px;
		}
		p{
			margin-bottom:30px;
			font-family:YuMincho, 'Yu Mincho', serif;
			font-size:18px;
			color:@white;
			line-height:26px;

			span{
				display:block;
				height:15px;
			}
		}
		.more{
			display:block;
			position:relative;
			margin-left:50%;
			text-align:right;

			span{
				display:inline-block;
				position:relative;
				font-size:14px;
				color:@white;
				z-index:2;
				transition:0.3s;
			}
		}
		.more:before{
			content:'';
			position:absolute;
			top:50%;
			right:90px;
			width:70%;
			border-top:1px solid @white;
			z-index:1;
		}
		.more:hover{
			span{
				color:@d_gray;
			}
		}
		.more:hover:before{
			animation-duration:0.5s;
			animation-iteration-count:1;
			animation-timing-function:linear;
			animation-name:about_more;
		}
		@keyframes about_more{
			0%{
				right:90px;
				width:70%;
			}
			50%{
				right:90px;
				width:0;
			}
			100%{
				left:0;
				width:70%;
			}
		}
	}
}

.top_about_img{
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	width:50%;
	height:350px;
	background-image:url('/images/top/about_img.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.top_about_img:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background:-webkit-gradient(linear, top left, top right, from(rgba(25, 25, 25, 1)), color-stop(30%, transparent));
	background:-webkit-linear-gradient(left, rgba(25, 25, 25, 1) 30%, transparent);
	background:-moz-linear-gradient(left, rgba(25, 25, 25, 1) 30%, transparent);
	background:-o-linear-gradient(left, rgba(25, 25, 25, 1) 30%, transparent);
	background:linear-gradient(to right, rgba(25, 25, 25, 1) 30%, transparent);
}

/*---------- top->map ----------*/
.top_map{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:0 30px;
	z-index:20;

	.contents{
		padding:20px;
		border:1px solid @white;

		a{
			display:block;
			position:relative;
			height:400px;
			overflow:hidden;

			img{
				width:100%;
				height:100%;
				object-fit:cover;
			}
		}
		a:before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background:rgba(0, 0, 0, 0.2);
			transition:0.3s;
			z-index:1;
		}
		a:after{
			content:'Google MAP';
			display:flex;
			justify-content:center;
			align-items:center;
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			font-family:YuMincho, 'Yu Mincho', serif;
			font-size:30px;
			font-weight:bold;
			color:@white;
			transition:0.3s;
			opacity:0;
			z-index:2;
		}
		a:hover:before{
			background:rgba(0, 0, 0, 0.7);
		}
		a:hover:after{
			opacity:1;
		}

		/* iframe{
			width:100%;
			height:400px;
			border:none;
			vertical-align:bottom;
		}
		iframe, object, embed{
			-webkit-filter:grayscale(100%);
			-moz-filter:grayscale(100%);
			-ms-filter:grayscale(100%);
			-o-filter:grayscale(100%);
			filter:grayscale(100%);
			-webkit-transition:all 0.5s ease;
			-moz-transition:all 0.5s ease;
			-o-transition:all 0.5s ease;
			transition:all 0.5s ease;
		}
		iframe:hover, object:hover, embed:hover{
			-webkit-filter: grayscale(0%);
			-moz-filter: grayscale(0%);
			-ms-filter: grayscale(0%);
			-o-filter: grayscale(0%);
			filter: grayscale(0%);
		} */
	}
	/*---------- map->住所 ----------*/
	.address{
		max-width:600px;
		margin:50px auto 0;
		
		dl{
			display:grid;
			grid-template-columns:100px 1fr;
			align-items:flex-start;
			margin:0;
			padding:10px 0;
			font-size:12px;
			color:@white;
			border-top:1px solid @white;

			dd{
				margin:0;

				a{
					font-size:12px;
					color:@white;
				}
			}
		}
		dl:last-child{
			border-bottom:1px solid @d_gray;
		}
	}
}

/*---------- top->blog ----------*/
.top_blog{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:0 30px 50px;
	z-index:20;

	.contents{
		padding:20px;
		border-left:1px solid @white;

		a{
			display:block;
			position:relative;
			transition:0.3s;

			time{
				display:inline-block;
				margin-bottom:5px;
				font-family:YuMincho, 'Yu Mincho', serif;
				font-size:16px;
				color:@white;
			}
			.img{
				width:100%;
				height:200px;
				margin-bottom:20px;
				overflow:hidden;
				/* background-image:url('/images/blog_img.jpg');
				background-position:center;
				background-repeat:no-repeat;
				background-size:cover; */

				img{
					width:100%;
					height:100%;
					object-fit:cover;
				}
			}
			h3{
				margin-bottom:30px;
				font-family:YuMincho, 'Yu Mincho', serif;
				font-size:14px;
				color:@white;
			}
			.more{
				display:block;
				position:relative;
				margin-left:25%;
				text-align:right;
	
				span{
					display:inline-block;
					position:relative;
					font-size:14px;
					color:@white;
					z-index:2;
				}
			}
			.more:before{
				content:'';
				position:absolute;
				top:50%;
				right:80px;
				width:70%;
				border-top:1px solid @white;
				z-index:1;
			}
		}
		a:before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:@black;
			opacity:0;
			z-index:10;
			transition:0.3s;
		}
		a:hover{
			.more:before{
				animation-duration:0.5s;
				animation-iteration-count:1;
				animation-timing-function:linear;
				animation-name:blog_more;
			}
		}
		a:hover:before{
			opacity:0.5;
		}
		@keyframes blog_more{
			0%{
				right:80px;
				width:70%;
			}
			50%{
				right:80px;
				width:0;
			}
			100%{
				left:0;
				width:70%;
			}
		}
	}
}

/*---------- top->gallery ----------*/
.top_gallery{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:0 30px;
	z-index:20;

	.more{
		display:block;
		position:relative;
		width:30%;
		margin:50px 0 0 auto;
		text-align:right;

		span{
			display:inline-block;
			position:relative;
			font-size:14px;
			color:@white;
			z-index:2;
			transition:0.3s;
		}
	}
	.more:before{
		content:'';
		position:absolute;
		top:50%;
		right:90px;
		left:0;
		border-top:1px solid @white;
		z-index:1;
	}
	.more:hover{
		span{
			color:@d_gray;
		}
	}
	.more:hover:before{
		animation-duration:0.5s;
		animation-iteration-count:1;
		animation-timing-function:linear;
		animation-name:gallery_more;
	}
	@keyframes gallery_more{
		0%{
			right:90px;
			left:0;
		}
		50%{
			right:90px;
			left:100%
		}
		51%{
			right:100%;
			left:0;
		}
		100%{
			right:90px;
			left:0;
		}
	}
}
.top_gallery_container{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-gap:2px;
}
.top_gallery_box{
	height:13vw;
	max-height:180px;
	overflow:hidden;

	img{
		width:100%;
		height:100%;
		object-fit:cover;
	}
}

/*---------- top->sns ----------*/
.top_sns_banner{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:10px;
	align-items:center;
	position:relative;
	max-width:1200px;
	margin:0 auto 50px;
	padding:0 30px;
	z-index:20;

	.link{
		margin:0 10px;

		a{
			display:flex;
			justify-content:space-between;
			align-items:center;
			position:relative;
			max-width:300px;
			margin:0 auto;
			padding:10px;
			font-size:24px;
			color:@white;
			border:1px solid @white;
			border-radius:50px 0 0 50px;
			text-align:right;
			transition:0.3s;

			i{
				display:flex;
				justify-content:center;
				align-items:center;
				position:relative;
				width:50px;
				height:50px;
				font-size:30px;
				color:@black;
				background-color:@white;
				border-radius:50%;
				transition:0.3s;
			}
		}
		a:before{
			content:'';
			position:absolute;
			top:50%;
			right:0;
			width:100%;
			height:1px;
			background-color:@white;
			transition:0.3s;
		}
		a:hover{
			color:@d_gray;

			i{
				background-color:@d_gray;
			}
		}
		a:hover:before{
			animation-duration:0.6s;
			animation-iteration-count:1;
			animation-timing-function:linear;
			animation-name:link_load;
		}
		@keyframes link_load{
			0%{
				right:0;
				width:100%;
			}
			50%{
				right:0;
				width:0%;
			}
			100%{
				left:0;
				width:100%;
			}
		}
		a.facebook{
			border-color:#1877f2;
		}
		a.twitter{
			border-color:#1d9bf0;
		}
		a.line{
			border-color:#00b900;
		}
	}
}

.top_sns_full{
	a{
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:100%;
		height:400px;
		font-size:30px;
		color:@white;
		background-image:url('/images/top/sns_insta_back.webp');
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;

		i{
			margin-right:10px;
			font-size:40px;
		}
	}
	a:before{
		content:'';
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:@black;
		opacity:0;
		transition:0.3s;
	}
	a:hover:before{
		opacity:0.5;
	}
}


/*-------------------------------------------------*/
/*-------------------- top-end --------------------*/
/*-------------------------------------------------*/


/*--------------------------------------------------------*/
/*-------------------- sub-page-start --------------------*/
/*--------------------------------------------------------*/
.sub_section{
	position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:150px 30px 0;
}
.sub_section.full{
	max-width:none;
	padding:150px 0 0;
}

/*---------- fadein-animation ----------*/
.sub_fadein{
	animation-duration:1.2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:sub_fadein;
}
@keyframes sub_fadein{
	0%{
		transform:translateY(0);
		opacity:0;
	}
	50%{
		transform:translateY(50px);
		opacity:0;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
}

/*---------- sub_section->title ----------*/
.sub_title{
	position:relative;
	margin-bottom:50px;
	text-align:center;

	h1{
		display:inline-block;
		position:relative;

		img{
			height:50px;
		}	
	}
	h1:before{
		content:'';
		position:absolute;
		top:50%;
		right:-50px;
		left:-50px;
		border-top:1px solid @white;
	}
}


/*-------------------- about --------------------*/
.about_row{
	position:relative;
	height:500px;
	margin-bottom:100px;
}
.about_row:last-child{
	margin:0;
}

.about_contents{
	position:relative;
	max-width:1000px;
	height:100%;
	margin:0 auto;
	padding:0 30px;
	box-sizing:border-box;
	z-index:2;

	.text{
		position:absolute;
		top:50%;
		left:30px;
		transform:translateY(-50%);
		width:60%;
		padding:40px;
		background:rgba(50, 50, 50, 0.85);
		box-sizing:border-box;

		h2{
			margin-bottom:15px;
			font-family:YuMincho, 'Yu Mincho', serif;
			font-size:24px;
			color:@white;
			line-height:34px;
		}
		p{
			font-family:YuMincho, 'Yu Mincho', serif;
			font-size:14px;
			color:@white;
			line-height:24px;
		}
	}
	.text:before{
		content:'';
		position:absolute;
		top:10px;
		right:10px;
		bottom:10px;
		left:10px;
		border:1px solid @dd_gray;
	}
	.img{
		width:70%;
		height:500px;
		margin-left:auto;
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;
	}
	.img.img1{
		background-image:url('/images/about/about_img1.jpg');
	}
	.img.img2{
		background-image:url('/images/about/about_img2.jpg');
		background-position:bottom;
	}
	.img.img3{
		background-image:url('/images/about/about_img3.jpg');
	}
	.img.img4{
		background-image:url('/images/about/about_img4.jpg');
	}
}
.about_back{
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background:repeating-linear-gradient(135deg, @l_black, @l_black 3px, transparent 3px, transparent 8px);
	opacity:0.5;
}

.about_row.even{
	.about_contents{
		.text{
			right:30px;
			left:auto;
		}
		.img{
			margin-right:auto;
			margin-left:0;
		}
	}
	.about_back{
		right:0;
		left:auto;
	}
}


/*-------------------- menu --------------------*/
.menu_category{
	margin-bottom:100px;

	h2{
		margin-bottom:10px;
		font-family:YuMincho, 'Yu Mincho', serif;
		font-size:20px;
		color:@white;
	}
	ul{
		li{
			display:grid;
			grid-template-columns:300px 1fr;
			align-items:flex-start;
			grid-gap:30px;
			padding:30px 0;
			border-top:1px solid @l_black;

			.img{
				img{
					width:100%;
				}
			}
			.text{
				h3{
					margin-bottom:10px;
					font-family:YuMincho, 'Yu Mincho', serif;
					font-size:18px;
					color:@white;
				}
				p{
					font-family:YuMincho, 'Yu Mincho', serif;
					font-size:14px;
					color:@white;
					line-height:24px;
				}
			}
		}
		li:last-child{
			border-bottom:1px solid @l_black;
		}
	}
}

.menu_container{
	position:relative;
	padding-left:100px;
}
.menu_container:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:100%;
	background-image:url('/images/top/side_border.webp');
	background-position:center;
	background-size:contain;
	z-index:10;
}

.menu_row{
	position:relative;
	margin-bottom:50px;
	background-color:@l_black;
	overflow:hidden;

	.contents{
		position:relative;
		padding:30px 30px 100px;
		z-index:3;

		h3{
			margin-bottom:20px;
			padding-bottom:5px;
			font-family:YuMincho, 'Yu Mincho', serif;
			font-size:20px;
			color:@white;
			border-bottom:1px solid @dd_gray;
		}
		.lists{
			margin:0 -15px;

			dl{
				float:left;
				display:flex;
				justify-content:space-between;
				align-items:center;
				position:relative;
				width:50%;
				margin:0 0 15px;
				padding:0 15px;
				box-sizing:border-box;
		
				dt{
					position:relative;
					padding-right:10px;
					color:@white;
					background-color:@l_black;
					z-index:2;
				}
				dd{
					position:relative;
					margin:0;
					padding-left:10px;
					color:@white;
					background-color:@l_black;
					z-index:2;
				}
			}
			dl:last-child{
				margin:0;
			}
			dl:before{
				content:'';
				position:absolute;
				top:50%;
				right:15px;
				left:15px;
				border-top:1px dashed @dd_gray;
				z-index:1;
			}
		}
		.lists:after{
			content:'';
			display:block;
			clear:both;
		}
	}
	.side{
		position:absolute;
		right:-5px;
		bottom:-5px;
		z-index:2;

		img{
			height:100px;
		}
	}
}
.menu_row:last-child{
	margin:0;
}


/*-------------------- ギャラリー --------------------*/
.gallery_container{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-gap:2px;
}
.gallery_box{
	position:relative;
	height:13vw;
	max-height:180px;
	overflow:hidden;
	cursor:pointer;
	transition:0.3s;

	img{
		width:100%;
		height:100%;
		object-fit:cover;
	}
}
.gallery_box:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:@black;
	opacity:0;
	transition:0.3s;
}
.gallery_box:hover:before{
	opacity:0.5;
}


/*-------------------- ブログ一覧 --------------------*/
.blog_lists_box{
	display:block;
	position:relative;
	overflow:hidden;

	.img{
		width:100%;
		height:300px;
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;
		transition:0.5s;
	}
	.contents{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		padding:10px;
		background:rgba(0, 0, 0, 0.7);
		box-sizing:border-box;

		time{
			font-size:12px;
			color:@white;

			i{
				margin-right:5px;
			}
		}
		h3{
			font-size:16px;
			color:@white;
		}
	}
	.no_data{
		color:@white;
	}
}
.blog_lists_box:hover{
	.img{
		transform:scale(1.05);
		opacity:0.5;
	}
}

/*---------- ブログ一覧->タグ ----------*/
.tag_section{
	margin-bottom:50px;
	border-bottom:1px solid @gray;
}
.tag_header{
	display:flex;
	justify-content:left;
	align-items:center;
	margin-bottom:20px;

	h2{
		margin-right:20px;
		padding-right:20px;
		font-size:20px;
		font-weight:bold;
		color:@white;
		border-right:1px solid @gray;
	}
	ul{
		li{
			display:inline-block;
			position:relative;
			margin-right:15px;
	
			a{
				display:block;
				padding:2px 0;
				font-size:14px;
				color:@white;
				transition:0.3s;
			}
		}
		li:last-child{
			margin:0;
		}
		li:after{
			content:'';
			position:absolute;
			top:50%;
			left:0;
			width:0;
			border-top:1px solid @white;
			transition:0.3s;
		}
		li:hover{
			a{
				color:@d_gray;
			}
		}
		li:hover:after{
			width:100%;
		}
	}
}


/*-------------------- ブログ記事 --------------------*/
.blog_article_area{
	max-width:800px;
	margin:0 auto;

	.header{
		margin-bottom:50px;
		padding-bottom:20px;
		border-bottom:1px solid @white;

		time{
			font-size:14px;
			color:@white;

			i{
				margin-right:5px;
			}
		}
		h1{
			font-size:30px;
			color:@white;
		}
		ul{
			margin-top:10px;

			li{
				display:inline-block;
				margin-right:15px;
				
				a{
					display:block;
					position:relative;
					padding:2px 0;
					font-size:14px;
					color:@white;
					transition:0.3s;
				}
				a:after{
					content:'';
					position:absolute;
					top:50%;
					left:0;
					width:0;
					border-top:1px solid @white;
					transition:0.3s;
				}
				a:hover{
					color:@d_gray;
				}
				a:hover:after{
					width:100%;
				}
			}
			li:last-child{
				margin:0;
			}
		}
	}
	.thumbnail{
		margin-bottom:100px;
		text-align:center;

		img{
			width:100%;
			max-width:100%;
		}
	}
	.contents{
		margin-bottom:50px;

		p{
			margin-bottom:50px;
			color:@white;

			img{
				width:100%;
			}
			iframe{
				width:100%;
				height:400px;
			}
		}
		p:last-child{
			margin:0;
		}
	}
	.footer{
		max-width:300px;
		margin:0 auto;

		a{
			display:block;
			position:relative;
			padding:10px;
			color:@white;
			border:1px solid @white;
			text-align:center;

			span{
				position:relative;
				z-index:2;
				transition:0.4s;
			}
		}
		a:before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:0;
			height:100%;
			background-color:@l_black;
			opacity:0;
			transition:0.4s;
		}
		a:hover:before{
			width:100%;
			opacity:1;
			z-index:1;
		}
	}
}


/*------------------------------------------------------*/
/*-------------------- sub-page-end --------------------*/
/*------------------------------------------------------*/