@charset "utf-8";


/* salon
-------------------------------------------------*/

#page{
	background:none;
}

#salon{
	position:relative;
	width: 1240px;
	margin: 3rem auto 8rem;
}
@media(max-width: 1240px){
	#salon{
		width:100%;
	}
}

.hd_salon{
	position:relative;
	padding:0 0 0 1rem;
	margin:0 auto 10rem;
}
	.hd_salon > div:first-child{
		position:relative;
		z-index: 1;
	}
	.m_salon{
		width:min(45%,300px);
	}
	.img_salon{
		position:absolute;
		right:0;
		top:0;
		width:min(90%,760px);
		z-index: 0;
	}
@media(max-width: 960px){
	.hd_salon{
		padding:0;
		margin:0 auto 6rem;
	}
	.hd_salon > div:first-child{
		text-align: center;
		margin:0 auto 2rem;
	}
	.hd_salon > div:first-child p{
		padding:0 2rem;
	}
	.hd_salon > div:first-child br{
		display: none;
	}
	.m_salon{
		width:min(45%,230px);
		margin:0 auto 2rem;
	}
	.img_salon{
		position:relative;
		right:inherit;
		top:inherit;
		width:min(90%,760px);
		margin:0 auto;
	}
}

.d_sched{
	position:relative;
	padding:2rem 3rem;
	background:var(--color-palegreen);
	border-radius: 2rem 0;
	margin:0 auto;
}
	.m_sched{
		position: relative;
		text-align: center;
		color:var(--color-green);
		font-size:min(2rem,34px);
		line-height: 1;
		margin:0 auto 1.5rem;
	}
	.d_sched div{
		display:block;
		padding:2vh 0;
		line-height: 1.6;
		border-bottom: 4px dotted #fff;
	}
	.d_sched .ttl{
		font-weight:bold;
	}

.d_rsv{
	position:relative;
	text-align: center;
	margin:0 auto;
}
	.m_rsv{
		position:relative;
		text-align: center;
		color:var(--color-green);
		font-size:min(2rem,34px);
		line-height: 1;
		margin:0 auto 1.5rem;
	}
	.m_moushikomiji{
		width:min(50%,196px);
		margin:0 auto 1rem;
	}
	.rsv_list{
		display:inline-block;
		padding:1.5rem 2rem;
		background:#f5edcb;
		margin:0 auto;
	}
	.rsv_list li{
		display:inline-block;
		padding:.5rem 0;
		line-height: 1.3;
		border-bottom:1px solid rgba(0 0 0 / .2);
		margin:0.5rem 1rem;
	}

.contact{
	display:flex;
	width: auto;
	flex-flow:row nowrap;
	justify-content:center;
	margin:0 auto;
}
	.contact > div{
		width:min(40%,320px);
		margin:0 1rem;
	}
	.contact > div > a{
		display: block;
		padding:1.1rem .3rem;
		background:var(--color-palegrn);
		border-radius: 3rem 0;
		transition:.3s;
	}
	.contact > div > a.hover{
		background:var(--color-yellow);
	}
	.contact > div p{
		color:var(--color-green);
		font-size:1.2rem;
		font-weight: bold;
		line-height: 1.6;
	}
@media(max-width: 600px){
	.contact{
		display:block;
	}
	.contact > div{
		width:min(60%,320px);
		margin:0 auto 1rem;
	}
}




/* chara */
.i_chara{
	position:absolute;
	display: block;
	z-index: 2;
}
.i_leaf{
	left:19%;
	top:-1vh;
	width:min(8%,63px);
	height:auto;
	z-index: 2;
}
.i_shiromoji{
	left:62%;
	top:-5%;
	width:min(13%,64px);
	height:auto;
}
@media(max-width: 820px){
	.i_shiromoji{
		left:75%;
		top:-2%;
	}
}
@media(max-width: 700px){
	.i_leaf{
		left:19%;
		top:-3vh;
		width:min(9%,63px);
	}
}