@CHARSET "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&family=Zen+Old+Mincho&display=swap');

/* COMMON */
*{
	box-sizing:border-box;
	word-break:break-all;
	color:#000;
	font-family:"Zen Maru Gothic", sans-serif;
	font-weight:600;
	margin:0;
	letter-spacing:2px;}
:root{
	--color-main:#C0966D;
	--color-sub:#603813;
	--color-thin:#edddce;
	--color-white:#FFF;}
::selection{
	background-color:var(--color-thin);}
html{
	scroll-behavior:smooth;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
	margin:0;
	padding:0;}
body{
	background:var(--color-white);}
address, caption, cite, code, dfn, em, strong, th, var{
	font-style:normal;}
ul{
	list-style:none;}
table{
	border-collapse:collapse;
	border-spacing:0;}
th, td{
	padding:12px 1.5em;
	vertical-align:middle;}
caption, th{
	text-align:left;}
q:before, q:after{
	content:'';}
a{
	transition:0.4s;}
object, embed{
	vertical-align:top;}
legend{
	display:none;}
h1, h2, h3, h4, h5, h6{
	font-size:1.5em;}
figure{
	margin:0;
	line-height:0;
	text-align:center;}
img, abbr, acronym, fieldset{
	border:0;}
p, th, td, li, dt, dd, a, figcaption{
	font-size:16px;
	line-height:2;}
img{
	height:auto;
	max-width:100%;}
.inner{
	max-width:1000px;
	margin:auto;}
.title-en{
	font-size:40px;
	position:relative;
	text-align:center;
	margin-bottom:12px;
	font-family:"Zen Old Mincho", serif;}
.title-en::after{
	content:'';
	position:absolute;
	bottom:-8px;
	left:0;
	right:0;
	margin:auto;
	width:30px;
	height:2px;}
.title-jp{
	font-size:14px;
	margin-bottom:20px;
	text-align:center;
	display:block;}
.sp_br{
	display:none;}
@media only screen and (max-width:480px){
	.pc_br{
		display:none;}
	.sp_br{
		display:block;}
}

/* HERO */
.hero{
	position:relative;
	width:100%;
	height:100vh;
	min-height:400px;
	background-image:url(../img/main.webp);
	background-repeat:no-repeat;
	background-position:left 25% center;
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:center;}
.hero-logo img{
	width:270px;
	filter:drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));}

/* MOTTO */
.motto-section{
	padding:40px 20px 40%;
	text-align:center;
	background-color:var(--color-white);
	background-image:url('../img/flower.svg');
	background-size:60%;
	background-repeat:no-repeat;
	background-position:right bottom;}
.motto-section .title-en{
	color:var(--color-main);}
.motto-section .title-en::after{
	background:var(--color-main);}
.motto-section .title-jp{
	color:var(--color-main);}
.motto-main{
	font-size:20px;
	color:var(--color-main);
	margin-bottom:20px;
	font-weight:bold;
	position:relative;
	line-height:1.8;}
.motto-text{
	display:table;
	margin:0 auto;
	text-align:left;}
@media screen and (min-width:768px){
	.motto-section{
		padding:40px 20px 65px;
		background-size:30%;}
	.motto-main{
		font-size:20px;
		margin:0 0 40px;}
	.motto-sub{
		font-size:1.2rem;}
	.motto-text{
		text-align:center;}
}
@media screen and (min-width:1024px){
	.motto-section{
		padding:60px 20px 85px;
		background-size:20%;}
}

/* SALON */
.salon-info-section{
	background-color:#f5f5f5;
	background-image:url('../img/brick.webp');
	padding:20px 20px 50px;}
.salon-info-section .title-en{
	color:var(--color-sub);}
.salon-info-section .title-en::after{
	background:var(--color-sub);}
.salon-info-section .title-jp{
	color:var(--color-sub);}
@media screen and (min-width:768px){
	.salon-info-section{
		padding:40px 20px 100px;}
}
@media screen and (min-width:768px){
	.salon-info-section{
		padding:60px 20px 150px;}
}

/* SHOP */
.shop-container{
	background:var(--color-white);
	padding:20px;
	max-width:800px;
	margin:auto;}
.shop-card{
	border-bottom:1px solid #ADADAD;
	margin-bottom:30px;
	padding-bottom:30px;}
.shop-card:last-child{
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;}
.shop-image{
	text-align:center;
	margin-bottom:10px;}
.shop-text{
	margin-bottom:10px;}
.shop-name{
	font-weight:bold;
	font-size:15px;
	margin-bottom:0;}
.shop-address{
	font-size:10px;
	line-height:1.4;}
.shop-tel{
	margin:10px;
	text-align:center;
	font-size:15px;
	color:#666;}
.btn-reserve a{
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:var(--color-main);
	color:var(--color-white);
	width:90px;
	height:30px;
	text-decoration:none;
	border:1px solid var(--color-main);
	font-size:12px;
	border-radius:4px;
	transition:opacity 0.3s;
	margin:0 0 0 auto;}
.btn-reserve a:hover{
	background-color:var(--color-white);
	color:var(--color-main);}
@media screen and (min-width:768px){
	.shop-container{
		padding:30px 20px;
		display:flex;
		flex-wrap:wrap;
		position:relative;
		margin:auto;}
	.shop-container::after{
		content:'';
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		width:1px;
		height:calc(100% - 60px);
		background:#ADADAD;}
	.shop-card{
		width:calc(50% - 20px);
		display:flex;
		border-bottom:none;
		margin-bottom:0;
		padding-bottom:0;}
	.shop-card:nth-child(odd){
		margin:30px 20px 0 0;}
	.shop-card:nth-child(even){
		margin:30px 0 0 20px;}
	.shop-card:nth-child(1){
		margin:0 20px 0 0;}
	.shop-card:nth-child(2){
		margin:0 0 0 20px;}
	.shop-image{
		width:calc(50% - 15px);
		margin-right:15px;
		margin-bottom:0;}
	.shop-details{
		flex:1;
		width:50%;
		display:flex;
		flex-direction:column;
		justify-content:space-between;}
	.shop-text{
		margin-bottom:0;}
	.btn-reserve a{
		margin:0;}
}
@media screen and (min-width:1024px){
	.shop-container{
		padding:30px;
		display:flex;
		flex-wrap:wrap;
		position:relative;}
	.shop-card{
		width:calc(50% - 25px);}
	.shop-card:nth-child(odd){
		margin:35px 25px 0 0;}
	.shop-card:nth-child(even){
		margin:35px 0 0 25px;}
	.shop-card:nth-child(1){
		margin:0 25px 0 0;}
	.shop-card:nth-child(2){
		margin:0 0 0 25px;}
	.shop-image{
		width:calc(50% - 20px);
		margin-right:20px;}
}

/* RECRUIT */
.recruit-box{
	max-width:800px;
	padding:10px 20px;
	margin:4em auto 0;
	border:1px solid var(--color-main);
	background:rgba(255,255,255,0.75);
	color:#8b5e3c;
	background:#f8f5f1;
	line-height:1.8;
	font-weight:500;
	text-align:center;
	backdrop-filter:blur(3px);
	box-shadow:0 8px 20px rgba(0,0,0,0.05);}
.recruit-box span{
	color:var(--color-sub);
	font-size:15px;
	letter-spacing:0.2em;}