@charset "UTF-8";

/* =========================================
top page
========================================= */

/* mv slider
--------------------------------------- */
#mv_warp *{
	font-size: 0;
}
#mv_warp {
	width: 100%;
	position: relative;
}
.mv_slider{
	display: none;
}
	.mv_slider.slick-initialized{
		display: block;
	}
/* dotsカスタム */
.slick-dots{
	bottom: 20px!important;
}
	.slick-dots li button {
		border: 0;
		background: transparent;
		display: block;
		height: 10px;
		width: 10px;
		outline: none;
		line-height: 0px;
		font-size: 0px;
		color: transparent;
		padding: 10px;
		cursor: pointer;
		position: relative;
	}
	.slick-dots li button:before {
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		font-size: 0!important;
		opacity: 1!important;
		border: 1px solid #4A4949;
		border-radius: 50%;
		width: 10px!important;
		height: 10px!important;
		line-height: 10px!important;
		text-align: center;
		-webkit-font-smoothing: antialiased;
	}
	.slick-dots li.slick-active button:before{
		content: "";
		background: #4A4949;
		border: 1px solid #4A4949;
	}

/* reservation
--------------------------------------- */
.reservation{
	background: #59b0bb;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	color: #fff;
	font-size: 20px;
	position: fixed;
	top: 34vw;
	right: 2vw;
	z-index: 100;
}
	.reservation a{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

/* concept
--------------------------------------- */
#concept .inner_wrap{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-right: 10vw;
}
#concept .img_wrap{
	display: block;
	background: url(/wp-content/themes/child/common/img/concept.jpg) no-repeat center/cover;
	height: 583px;
	width: 100%;
}
#concept .txt_wrap{
	max-width: 460px;
	width: 40%;
	padding: 150px 0;
	margin: 100px 0 0 80px;
	flex-shrink: 0;
	position: relative;
}
#concept .txt_wrap::before{
	content: "";
	background: #AEDCE2;
	height: 100%;
	width: calc(100% + 30vw);
	position: absolute;
	top: 0;
	right: -10vw;
	z-index: -1;
}
#concept .txt_wrap h2{
	margin: 0 0 30px;
	font-size: 28px;
	font-weight: 500;
}
#concept .txt_wrap p{
	line-height: 2;
}

/* gallery
--------------------------------------- */
.gallery_photo{
	width: 100%;
	padding-top: 76.5%;
}

/* style
--------------------------------------- */
#hair_style{

}
#hair_style .flex_box{
	display: flex;
	max-width: 13660px;
	width: 100;
	padding: 0 20px;
	margin: 0 auto;
}
#hair_style .style_large{
	width: 35.5%;
	flex-shrink: 0;
}
.style_list{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.style_list li{
	width: calc(100%/3);
	padding-top: 39%;
}

/* menu
--------------------------------------- */
#menu{
	background: #E2EEEF;
}
	#menu .flex_box{
		display: flex;
		justify-content: center;
		max-width: 1240px;
		width: 100%;
		padding: 0 20px;
		margin: 0 auto;
	}
	#menu .flex_box > div{
		width: 25%;
	}
	#menu .flex_box > div:not(:last-of-type){
		margin-right: 8%;
	}
	#menu .flex_box > div h3{
		margin: 0 0 30px;
		font-size: 26px;
		text-align: center;
		font-weight: 500;
	}
	#menu .flex_box .menu_list li{
		display: flex;
		justify-content: space-between;
	}
	#menu .flex_box .menu_list li:not(:last-child){
		margin-bottom: 10px;
	}
	#menu .flex_box .menu_list li small{
		display: block;
		font-size: 12px;
		width: 120%;
	}
	#menu .flex_box .menu_list li p:nth-of-type(2){
		flex-shrink: 0;
	}


/* blog
--------------------------------------- */
.blog_list{
	display: flex;
	max-width: 1240px;
	width: 100%;
	padding: 0 20px;
	margin: 0 auto 50px;
}
	.blog_list li{
		width: 23%;
	}
	.blog_list li:not(:last-child){
		margin-right: 3%;
	}
	.blog_list li a{
		display: block;
	}
	.blog_list li a:hover{
		opacity: .7;
	}
	.blog_list li .blog_photo{
		width: 100%;
		padding-top: 59.5%;
	}
	.blog_list li .blog_photo{
		background: url(/wp-content/themes/child/common/img/default.jpg)no-repeat center/cover;
	}
	.blog_list .date{
		color: #999;
		font-size: 12px;
		margin: 5px 0;
	}
	.blog_list h4{
		font-size: 18px;
		margin: 0 0 10px;
	}


/* recruit
--------------------------------------- */
#recruit{
	background: #E2EEEF;
}
	#recruit .box{
		background: rgba(255,255,255,.6);
		max-width: 890px;
		width: 100%;
		padding: 40px;
		margin: 0 auto;
	}
	#recruit .box p{
		text-align: center;
		margin: 0 0 50px;
	}


/* staff
--------------------------------------- */
#staff{
	display: flex;
	align-items: center;
	max-width: 890px;
	width: 100%;
	padding: 100px 20px;
	margin: 0 auto;
}
	#staff .photo{
		max-width: 300px;
		width: 100%;
		margin-right: 50px;
		flex-shrink: 0;
	}
	#staff h4{
		font-size: 22px;
		margin: 0 0 30px;
	}


/* blog section on top page - list style
--------------------------------------- */
#blog .blog_list{
	display: block;
	max-width: 900px;
	width: 100%;
	padding: 0 20px;
	margin: 0 auto 50px;
}
#blog .blog_list li{
	width: 100%;
	margin: 0;
	border-bottom: 1px solid #ddd;
}
#blog .blog_list li:first-child{
	border-top: 1px solid #ddd;
}
#blog .blog_list li a{
	display: flex;
	align-items: center;
	padding: 14px 10px;
	gap: 20px;
}
#blog .blog_photo{
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	background: none;
}
#blog .blog_photo img{
	display: block !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#blog .blog_list .date{
	font-size: 12px;
	color: #999;
	margin: 0 0 4px;
}
#blog .blog_list h2{
	font-size: 15px;
	margin: 0;
	line-height: 1.6;
	font-weight: 400;
}

/* =========================================
 blog
=========================================*/
#blog_top,
#blog_detail{
	padding: 100px 0;
}
#blog_top .blog_list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 2%;
	padding: 0;
	max-width: 1240px;
	width: 100%;
	margin: 0 auto 50px;
}
#blog_top .blog_list li{
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
}
#blog_top .blog_list li a{
	display: flex;
	flex-direction: column;
	height: 100%;
}
#blog_top .blog_photo{
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	background: none;
}
#blog_top .blog_photo img{
	display: block !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#blog_top .blog_list h2{
	font-size: 15px;
	margin: 8px 0 5px;
	flex: 1;
	line-height: 1.6;
}
#blog_detail .page_title{
	font-size: 32px;
	margin: 0 0 20px;
}
#blog_detail .photo_area{
	margin-bottom: 20px;
}
#blog_detail .txt_area{
	margin-bottom: 40px;
}
.single_nav{
	overflow: hidden;
}
.naviright{
	float: right;
}

.wp-pagenavi{
	text-align: center;
	margin: 0 auto;
}
.wp-pagenavi span,
.wp-pagenavi a{
	display: inline-block;
	margin: 0 10px;
}

.blog_photo img,
.gallery_photo img,
.style_large img,
.style_photo img{
	display: none;
}


/* ======================================================
responsive 768px〜
====================================================== */
@media screen and (max-width: 768px) {

	/* =========================================
	top page
	========================================= */
	/* mv slider
	--------------------------------------- */
	/* dotsカスタム */
	.slick-dots{
		bottom: -20px!important;
	}
	.slick-dots li{
		width: 12px;
		height: 12px;
	}
		.slick-dots li button {
			border: 0;
			background: transparent;
			display: block;
			height: 10px;
			width: 10px;
			outline: none;
			line-height: 0px;
			font-size: 0px;
			color: transparent;
			padding: 7px;
			margin: 0;
			cursor: pointer;
			position: relative;
		}
		.slick-dots li button:before {
			position: absolute;
			top: 0;
			left: 0;
			content: "";
			font-size: 0!important;
			opacity: 1!important;
			border: 1px solid #4A4949;
			border-radius: 50%;
			width: 10px!important;
			height: 10px!important;
			line-height: 10px!important;
			text-align: center;
			-webkit-font-smoothing: antialiased;
		}
		.slick-dots li.slick-active button:before{
			content: "";
			background: #4A4949;
			border: 1px solid #4A4949;
		}

	/* reservation
	--------------------------------------- */
	.reservation{
		width: 70px;
		height: 70px;
		font-size: 14px;
		top: auto;
		right: 10px;
		bottom: 10px;
	}

	/* concept
	--------------------------------------- */
	#concept .inner_wrap{
		display: block;
		padding-right: 0;
	}
	#concept .img_wrap{
		display: block;
		background: url(/wp-content/themes/child/common/img/concept.jpg) no-repeat center/cover;
		height: 210px;
		width: 90%;
	}
	#concept .txt_wrap{
		max-width: 100%;
		width: 90%;
		padding: 50px 20px;
		margin: 0 0 0 10%;
		flex-shrink: 0;
		position: relative;
	}
	#concept .txt_wrap::before{
		content: "";
		background: #AEDCE2;
		height: calc(100% + 100px);
		width: 100%;
		top: -100px;
		left: 0;
		right: auto;
	}
	#concept .txt_wrap h2{
		margin: 0 0 20px;
		font-size: 20px;
	}


	/*  gallery
	--------------------------------------- */
	.gallery_slide.slick-initialized .slick-slide{
		margin: 0 10px;
	}


	/* style
	--------------------------------------- */
	#hair_style{

	}

	/* menu
	--------------------------------------- */
	#menu{
		background: #E2EEEF;
	}
		#menu .flex_box{
			display: block;
			padding: 0 20px;
			margin: 0 auto;
		}
		#menu .flex_box > div{
			width: 100%;
		}
		#menu .flex_box > div:not(:last-of-type){
			margin: 0 0 50px;
		}
		#menu .flex_box > div h3{
			margin: 0 0 20px;
			font-size: 20px;
		}


	/* blog
	--------------------------------------- */
	.blog_list{
		display: flex;
		flex-wrap: wrap;
		margin: -20px auto 50px;
	}
		.blog_list li{
			width: 48%;
			margin: 20px 0 0;
		}
		.blog_list li:not(:last-child){
			margin-right: 0;
		}
		.blog_list li:nth-child(odd){
			margin-right: 4%;
		}
		.blog_list .date{
			font-size: 12px;
			margin: 3px 0;
		}
		.blog_list h4{
			font-size: 16px;
			margin: 0 0 5px;
		}


	/* blog section on top page
	--------------------------------------- */
	#blog .blog_list{
		padding: 0 15px;
	}
	#blog .blog_photo{
		width: 65px;
		height: 65px;
	}
	#blog .blog_list h2{
		font-size: 13px;
	}

	/* recruit
	--------------------------------------- */
	#recruit{
		background: #E2EEEF;
		padding: 50px 20px
	}
		#recruit .box{
			background: rgba(255,255,255,.6);
			max-width: 890px;
			width: 100%;
			padding: 40px 20px;
			margin: 0 auto;
		}
		#recruit .box p{
			text-align: center;
			margin: 0 0 50px;
		}


	/* staff
	--------------------------------------- */
	#staff{
		display: block;
		width: 100%;
		padding: 50px 20px;
	}
		#staff .photo{
			max-width: 250px;
			width: 100%;
			margin: 0 auto 20px;
		}
		#staff h4{
			font-size: 20px;
			margin: 0 0 20px;
		}


	/* =========================================
	 blog
	========================================= */
	#blog_top,
	#blog_detail{
		padding: 80px 0;
	}
	#blog_top .blog_list{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 4%;
		margin-top: 0;
	}
	#blog_top .blog_list li{
		margin: 0;
	}
	#blog_detail .page_title{
		font-size: 26px;
		margin: 0 0 20px;
	}
	#blog_detail .photo_area{
		margin-bottom: 20px;
	}
	#blog_detail .txt_area{
		margin-bottom: 30px;
	}
}