@charset "utf-8";

* {
	box-sizing: border-box;
}


/* スライドショー */
/* PCスライド */
#slide li img {
	width: 100%;
	height: 560px;
	object-fit: cover;
}

#slide {
	position: relative;
	overflow: hidden;
	height: 560px;
	margin-left: -45px;
}

#slide ul {
	position: relative;
}

#slide li {
	position: absolute;
	width: 100%;
}


/* スマホスライド */
#sp-slide li img {
	width: 100vw;
}

#sp-slide {
	position: relative;
	overflow: hidden;
	height: 60vh;
	margin-left: -40px;
}

#sp-slide ul {
	position: relative;
}

#sp-slide li {
	position: absolute;
	width: 100%;
	list-style-type: none;
}

#sp-slide li img {
	width: 100vw;
	height: 57vh;
	object-fit: cover;
}


/* 文字をふわっと出す */
/* フェードイン(初期値) */
.js-fadeUp {
	opacity: 0;
	/* 最初は非表示 */
	transform: translateY(30px);
	/* 下に30pxの位置から */
	transition: opacity .8s, transform .8s;
	/* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
	opacity: 1;
	/* 表示領域に入ったら表示 */
	transform: translateY(0);
	/* 30px上に移動する */
	transition-delay: .5s;
	/* フェード開始を0.5秒遅らせる */
}


/* ボタン */
.btn {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.5em 3em;
	text-decoration: none;
	color: #fff;
	background: #505050;
	border-radius: 15px;
	transition: .4s;
}

.btn:hover {
	background: #C2A2DA;
	color: #505050;
}

.btnbox {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


/* ページTOP戻るボタン */
#page_top {
	width: 60px;
	height: 60px;
	position: fixed;
	right: 0;
	bottom: 0;
	opacity: 0.6;
}

#page_top a {
	width: 60px;
	height: 60px;
	text-decoration: none;
}

#page_top a::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f139';
	font-size: 50px;
	color: #C2A2DA;
}


/* パンくずリスト */
#pankuzu ul {
	display: flex;
	position: fixed;
	width: 100%;
	list-style-type: none;
	margin-top: 0;
	margin-bottom: 0;
	background-color: #fff;
}

#pankuzu ul li a {
	font-family: 'Noto Sans JP', sans-serif;
}

#pankuzu ul li {
	font-size: 14px;
}





/* 共通 */
body {
	padding-top: 100px;
}

p {
	font-family: 'Noto Sans JP', sans-serif;
	color: #505050;
	font-size: 14px;
	line-height: 2em;
}

h2 {
	font-family: 'Kaisei Decol', serif;
	color: #505050;
	text-align: center;
	background: rgba(194, 162, 218, 0.5);
	box-shadow: 0px 0px 0px 5px rgba(194, 162, 218, 0.5);
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

#voice h3 {
	font-family: 'Kaisei Decol', serif;
	font-size: 16px;
	color: #fff;
	text-align: center;
	position: relative;
	padding: 0.6em;
	background: #C2A2DA;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

#voice h3:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #C2A2DA;
	width: 0;
	height: 0;
}

#main_header a {
	font-family: 'Kaisei Decol', serif;
}

.text {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

img {
	max-width: 100%;
	height: auto;
}

#logo {
	margin-left: 10px;
}

#logo img {
	height: 100px;
	padding-bottom: 30px;
}

.contents figure img {
	border-radius: 20%;
	/* box-shadow: 0 0 10px rgb(0 0 0 / 50%); */
}

#about {
	background-image: url(../img/bg1.jpg);
	background-size: cover;
	padding-top: 40px;
	padding-bottom: 40px;
}

#place {
	padding-top: 40px;
	padding-bottom: 40px;
}

#voice {
	background-color: rgba(255, 253, 223, 0.8);
	padding-top: 40px;
	padding-bottom: 40px;
}

#menu {
	margin-top: 40px;
	margin-bottom: 40px;
}

.menu-in h3 {
	text-align: center;
	font-family: 'Kaisei Decol', serif;
	font-size: 25px;
	color: #505050;
	margin-top: 20px;
}

.menu-in dl {
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	color: #505050;
	margin-bottom: 40px;
	margin-left: 20px;
	margin-right: 20px;
}

.menu-in dt {
	font-size: 18px;
	font-weight: bold;
	line-height: 2em;

}

.menu-in dd {
	margin-left: 0;
}

#main_footer {
	background: rgba(194, 162, 218, 0.5);
	color: #505050;
	padding-bottom: 1rem;
}

#main_footer ul {
	margin-left: -80px;
}

#main_footer a {
	color: #505050;
	text-decoration: none;
}

#main_footer a.btn {
	color: #fff;
}

#main_footer dl {
	margin-bottom: 1.5em;
}

#main_footer dt {
	font-weight: bold;
	border-bottom: solid 2px #fff;
	padding: 0.75em 5.3333vw;
}

#main_footer dd a {
	display: block;
	border-bottom: dotted 1px #fff;
	padding: 0.75em 5.3333vw;
	position: relative;
}

#main_footer dd a:before,
#main_footer dd a:after {
	content: "";
	display: block;
	width: 10px;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	right: 5.3333vw;
	transform: rotate(45deg) translateY(-5px);
}

#main_footer dd li a:after {
	transform: rotate(-45deg) translateY(5px);
}

#main_footer dd li {
	list-style-type: none;
}

small {
	display: block;
	text-align: center;
	font-size: 75%;
}

#main_footer p {
	text-align: center;
}


/* 下層ページ */
/* 耳つぼケアとは */
.text ul {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	color: #505050;
	line-height: 2em;
	text-align: center;
	list-style-type: none;
	padding-left: 0px;
}

/* 施術風景 */
#placemain h3 {
	font-family: 'Kaisei Decol', serif;
	text-align: center;
	color: #505050;
}

#syoukai .contents figure img {
	border-radius: 50%;
}

#syoukai {
	margin-bottom: 40px;
}

/* お客様の声 */
#voicemain h2 {
	margin-bottom: 40px;
}

#voicemain h3 {
	font-family: 'Kaisei Decol', serif;
	text-align: center;

	position: relative;
	color: #AE79D6;
	font-size: 20px;
	padding: 10px 0;
	text-align: center;
	margin: 1.5em 0;
}

#voicemain h3:before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 150px;
	height: 58px;
	border-radius: 50%;
	border: 5px solid #C2A2DA;
	border-left-color: transparent;
	border-right-color: transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

#voicemain p {
	width: 100%;
	margin-bottom: 40px;
}

/* メニュー・料金 */
#menumain p {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

#menu p {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#menumain figure img {
	border-radius: 20%;
}

#menumain dl {
	height: 25%;
}

/* 2023年8月追加 */
#sikaku {
	padding-top: 20px;
}

/* 2025年8月追加 */
.center {
	text-align: center;
}

.sejyutu-menu {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#sejyutu {
	scroll-margin-top: 120px;
}







/* よくあるご質問 */
#qamain .wrapper {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.qa {
	padding-left: 20px;
}

#qamain dl {
	margin-left: 0.8333%;
	margin-right: 6.6666%;
	font-family: 'Noto Sans JP', sans-serif;
}

#qamain dl :nth-child(odd) {
	background-color: #FEFABE;
	border-radius: 10px;
}

#qamain dl :nth-child(even) {
	background-color: rgba(194, 162, 218, 0.5);
	border-radius: 10px;
}

#qamain dt {
	margin-bottom: 20px;
	display: inline-block;
	padding: 10px;
}

#qamain dd {
	margin-bottom: 40px;
	display: table;
	padding: 10px;
}

#qamain p {
	text-align: center;
}




/* スマホ */
@media screen and (max-width: 845px) {

	#logo img {
		padding-left: 30.4438%;
		/*ロゴ真ん中に*/
	}

	#main_header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		background: #fff;
		z-index: 100;
		padding-left: 5.3333vw;
		padding-right: 5.3333vw;
	}

	#mv {
		height: 57vh;
		overflow: hidden;
	}

	.sp_n {
		display: none;
	}

	/* スマホの時のみbodyのpaddingを取り、.fullのmargin,paddingを無効に */
	/* そのかわり左右の余白は.wrapperで */
	.wrapper {
		padding-left: 5.3333vw;
		padding-right: 5.3333vw;
	}

	/* ハンバーガーメニュー */
	#hbm {
		width: 60px;
		height: 60px;
		position: absolute;
		top: 0;
		right: 0;
	}

	#hbm a {
		display: block;
		height: 100%;
	}

	#hbm a:before,
	#hbm a:after {
		content: "";
		display: block;
		width: 30px;
		height: 4px;
		background: #666;
		position: absolute;
		top: 50%;
		margin-top: -9px;
		left: 15px;
		transition: transform .3s;
	}

	#hbm a:after {
		margin-top: 5px;
	}

	#hbm a:hover:before,
	#hbm a:hover:after {
		margin-top: -2px;
		transform: rotate(45deg);
	}

	#hbm a:hover:after {
		transform: rotate(-45deg);
	}


	/* メニュー枠 */
	.menu-flex {
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px;
		margin-bottom: 40px;
		/* padding: 30px; */
		/* background: url(../img/waku1.png), url(../img/waku2.png), url(../img/waku3.png), url(../img/waku4.png);
		background-position: left top, right top, left bottom, right bottom;
		background-repeat: no-repeat;
		background-size: 15%; */
	}

	.menu-in {
		background: url(../img/waku1.png), url(../img/waku2.png), url(../img/waku3.png), url(../img/waku4.png);
		background-position: left top, right top, left bottom, right bottom;
		background-repeat: no-repeat;
		background-size: 15%;
		padding: 10%;
		margin-bottom: 10%;
	}

	.menu-p {
		padding-right: 10%;
		padding-left: 10%;
	}

	#main_footer dt {
		padding-top: 55px;
	}
}



/* 845以上のデバイス向け PC用*/
@media screen and (min-width: 845px) {

	#mv {
		height: 560px;
		/* margin-bottom: 10px; */
		position: relative;
	}

	#svgmoji {
		position: absolute;
		bottom: 110px;
		right: 70px;
	}

	.pc_n {
		display: none;
	}

	.wrapper {
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	.full {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	#main_header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		background: #fff;
		z-index: 100;
		padding-left: 3.333%;
		padding-right: 3.3333%;
		/* 40/1200=3.3333% */
	}

	#main_header .wrapper {
		width: 100%;
	}

	#logo {
		position: absolute;
		margin-left: 3.4448%;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	#gn ul {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 90px;
		list-style-type: none;
	}

	#gn li {
		margin-left: 2em;
	}

	#gn a {
		text-decoration: none;
		font-weight: bold;
		color: #505050;
	}

	#gn a:hover {
		background: #FEFABE;
		border-radius: 50%;
		color: #505050;
	}

	.contents {
		display: flex;
		width: 100%;
	}

	#place .contents {
		display: flex;
		flex-direction: row-reverse;
	}

	.text p {
		padding: 0 12.5% 0 12.5%;
		line-height: 3.5em;
	}

	#voice figure img {
		width: 80%;
	}

	.menu-flex {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px;
		margin-bottom: 40px;
		padding: 30px;
		/* background: url(../img/waku1.png), url(../img/waku2.png), url(../img/waku3.png), url(../img/waku4.png);
		background-position: left top, right top, left bottom, right bottom;
		background-repeat: no-repeat;
		background-size: 10%; */
		width: 70%
	}

	.menu-in {
		width: 40%;
		background: url(../img/waku1.png), url(../img/waku2.png), url(../img/waku3.png), url(../img/waku4.png);
		background-position: left top, right top, left bottom, right bottom;
		background-repeat: no-repeat;
		background-size: 10%;
	}

	.menu-p {
		padding-right: 10%;
		padding-left: 10%;
	}

	#menu .wrapper {
		width: 100%;
	}

	#main_footer img {
		margin-top: 10px;
	}


	/* 下層ページ */
	/* お客様の声 */
	.koe {
		width: 33%;
		padding-left: 35px;
		padding-right: 35px;
	}

	#voicemain {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.qa {
		width: 73.2064%;
		margin-left: auto;
		margin-right: auto;
	}


	/* メニュー・料金ページ　2023年8月追加 */
	#sikaku {
		display: flex;
		justify-content: center;
		padding-left: 10%;
		padding-right: 10%;
	}
}