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


/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	letter-spacing:0;
}


/*----------------------------------------------------------------------*/
/*------------------------------ sp-start ------------------------------*/
/*----------------------------------------------------------------------*/
@media(max-width:768px){

/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
.head_contents{
	height:80px;
	padding:0 20px;
}

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

		img{
			height:60px;
		}
	}
}

/*---------- header->option ----------*/
.head_option{
	grid-gap:20px;
}

/*---------- header->lang ----------*/
.head_lang{
	grid-gap:3px;
}

/*---------- header->hambueger ----------*/
.head_hamburger{
	width:40px;
}

/*---------- header->nav ----------*/
.head_nav_area{
	padding:0;

	.contents{
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:1fr 50px 50px;
		grid-gap:0 20px;

		.img{
			height:200px;
		}
		.link{
			li{
				margin-bottom:15px;

				a{
					font-size:20px;
				}
			}
		}
		.sns{
			justify-content:center;
			grid-column:~'1/3';

			a{
				margin:0 8px;
			}
		}
		.copy{
			grid-column:~'1/3';
			text-align:center;
		}
	}
}
/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
.foot_contents{
	/*---------- footer->logo ----------*/
	.logo{
		img{
			width:80px;
		}
	}

	/*---------- footer->qrcode ----------*/
	.qrcode{
		gap:20px;

		img{
			// width:80px;
			height:80px;
		}
	}
}


/*-----------------------------------------------------*/
/*-------------------- grid-system --------------------*/
/*-----------------------------------------------------*/
.grid_column.col2{width:33.333%;}
.grid_column.col3{width:50%;}
.grid_column.col4{width:100%;}
.grid_column.col5{width:100%;}
.grid_column.col6{width:100%;}
.grid_column.col7{width:100%;}
.grid_column.col8{width:100%;}
.grid_column.col9{width:100%;}
.grid_column.col2-6{width:50%;}
.grid_column.col2-12{width:100%;}
.grid_column.col3-12{width:100%;}


/*---------------------------------------------------*/
/*-------------------- container --------------------*/
/*---------------------------------------------------*/
.section_area{
	padding:50px 20px;
}
.section_area.blog_article{
	padding:0px;
}


/*-----------------------------------------------*/
/*-------------------- modal --------------------*/
/*-----------------------------------------------*/
.modal_contents.modal_lg{
	right:3%;
	left:3%;
}
.modal_contents.modal_sm{
	width:auto;
	right:3%;
	left:3%;
	transform:none;
}

.modal_close{
	bottom:30px;
	width:40px;
	height:40px;

	i{
		font-size:18px;
	}
}


/*----------------------------------------------------*/
/*-------------------- slider-pro --------------------*/
/*----------------------------------------------------*/
.sp-horizontal .sp-previous-arrow{
	left:36% !important;
}
.sp-horizontal .sp-next-arrow, .sp-horizontal.sp-rtl .sp-previous-arrow{
	right:36% !important;
}



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


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

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

/*---------- main_visual->video ----------*/
.mv_video:before{
	height:120px;
	background-repeat:no-repeat;
	background-size:cover;
}

/*---------- main_visual->back_img ----------*/
.mv_back{
	background-image:url('/images/top/mv_img_sp.webp');
}
.mv_back:before{
	background-repeat:no-repeat;
	background-size:cover;
}

/*---------- main_visual->side_text ----------*/
.mv_side{
	left:0;
	width:75px;
	height:112.5px;
}

/*---------- main_visual->video_play ----------*/
.mv_play{
	right:20px;
	bottom:20px;
	width:40px;
	height:40px;

	i{
		font-size:18px;
	}
}

/*---------- top->wrapper ----------*/
.top_wrapper:before{
	left:0;
	width:75px;
}

/*---------- top->section ----------*/
.top_section{
	padding-top:100px;

	.side{
		top:50px;
		left:0;
		width:75px;
	}
}

/*---------- top->title ----------*/
.top_title{
	margin-bottom:30px;

	h2{
		img{
			height:35px;
		}
	}
	h2:before{
		right:-30px;
		left:-30px;
	}
}

/*---------- top->about ----------*/

.top_about_text{
	padding:0 20px;

	.contents{
		width:100%;

		h2{
			font-size:22px;
			line-height:30px;
		}
		p{
			font-size:16px;
			line-height:24px;
		}
		.more{
			margin-left:25%;
		}
	}
}

.top_about_img{
	left:50px;
	width:auto;
	height:300px;
}
.top_about_img:before{
	width:100%;
}

/*---------- top->map ----------*/
.top_map{
	padding:0 20px;

	.contents{
		padding:10px;

		a{
			height:55vw;

			img{
				transform:scale(1.5);
			}
		}
		a:after{
			font-size:18px;
		}
	}
	/*---------- map->住所 ----------*/
	.address{
		margin-top:30px;

		dl{
			grid-template-columns:80px 1fr;
		}
	}
}

/*---------- top->blog ----------*/
.top_blog{
	padding:0 20px 50px;

	.contents{
		a{
			.img{
				height:40vw;
			}
		}
	}
}

/*---------- top->gallery ----------*/
.top_gallery{
	.more{
		width:75%;
		margin-top:30px;
	}
}
.top_gallery_container{
	grid-template-columns:repeat(3, 1fr);
	grid-gap:1px;
}
.top_gallery_box{
	height:27vw;
	max-height:none;
}

/*---------- top->sns ----------*/
.top_sns_banner{
	grid-template-columns:1fr;
	grid-gap:20px;

	.link{
		margin:0;

		a{
			font-size:20px;
		}
	}
}
.top_sns_full{
	a{
		height:200px;
		font-size:20px;
		background-image:url('/images/top/sns_insta_back_sp.webp');
		
		i{
			font-size:30px;
		}
	}
}

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


/*--------------------------------------------------------*/
/*-------------------- sub-page-start --------------------*/
/*--------------------------------------------------------*/
.sub_section{
	padding:130px 20px 0;
}

/*---------- sub_section->title ----------*/
.sub_title{
	margin-bottom:30px;
	
	h1{
		img{
			height:35px;
		}
	}
	h1:before{
		right:-30px;
		left:-30px;
	}
}


/*-------------------- about --------------------*/
.about_row{
	height:300px;
}

.about_contents{
	padding:0;

	.text{
		left:0;
		width:90%;
		padding:20px;

		h2{
			font-size:18px;
			line-height:30px;
		}
		p{
			line-height:22px;
		}
	}
	.text:before{
		top:5px;
		right:5px;
		bottom:5px;
		left:5px;
	}
	.img{
		width:100%;
		height:300px;
	}
}
.about_back{
	display:none;
}

.about_row.even{
	.about_contents{
		.text{
			right:0;
		}
	}
}


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

	h2{
		margin-bottom:10px;
		font-family:YuMincho, 'Yu Mincho', serif;
		font-size:20px;
		color:@white;
	}
	ul{
		li{
			display:block;
			padding:20px 0;

			.img{
				margin-bottom:10px;
			}
			.text{
				h3{
					margin-bottom:5px;
				}
				p{
					line-height:22px;
				}
			}
		}
		li:last-child{
			border-bottom:1px solid @l_black;
		}
	}
}

.menu_container{
	padding-left:0;
}
.menu_container:before{
	content:none;
}
.menu_row{
	.contents{
		position:relative;
		padding:15px 15px 50px;

		h3{
			margin-bottom:15px;
			font-size:18px;
		}
		.lists{
			margin:0 -15px;

			dl{
				width:100%;
				margin-bottom:5px;
				font-size:12px;

				dd{
					white-space:nowrap;
				}
			}
		}
	}
	.side{
		img{
			height:10vw;
			max-height:50px;
		}
	}
}


/*-------------------- ギャラリー --------------------*/
.gallery_container{
	grid-template-columns:repeat(3, 1fr);
	grid-gap:1px;
}
.gallery_box{
	height:27vw;
	max-height:none;
}


/*-------------------- ブログ一覧 --------------------*/
.blog_lists_flex{
	display:block;
	
	.img{
		width:100%;
	}
	.contents{
		width:100%;
		padding:10px;
	}
}

/*---------- ブログ一覧->タグ ----------*/
.tag_section{
	margin-bottom:30px;
}
.tag_header{
	display:block;

	h2{
		margin:0 0 5px;
		padding:0;
		font-size:20px;
		border:none;
	}
	ul{
		li{
			margin-right:10px;
		}
	}
}


/*-------------------- ブログ記事 --------------------*/
.blog_article_area{
	.header{
		margin-bottom:30px;

		time{
			font-size:12px;
		}
		h1{
			font-size:24px;
		}
	}
	.thumbnail{
		margin-bottom:50px;
	}
	.contents{
		p{
			margin-bottom:20px;

			iframe{
				height:250px;
			}
		}
	}
	.footer{
		max-width:200px;

		a{
			padding:5px 10px;
			font-size:12px;
		}
	}
}


/*-------------------- @media(max-width:768px)->end --------------------*/
}
/*--------------------------------------------------------------------*/
/*------------------------------ sp-end ------------------------------*/
/*--------------------------------------------------------------------*/