*{
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
	font-size: 100%;
	list-style: none;
}
html{
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
}
body{
	font-size: 2rem;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	line-height: 2;
	line-break: strict;
	overflow-wrap: break-word;
	word-wrap: break-word;
	position: relative;
}
amp-img,img{display:block;width:100%;height:auto;}
a{color:#4872fc;font-weight:bold;transition:0.2s;}
a:hover{cursor:pointer;opacity:50%;}
strong{background:linear-gradient(transparent 40%, #ffff66 0%);}
em{color:#dd3a5f;font-style:normal;font-weight:bold;}



header div{
	width: 100%;
	max-width: 1000px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px;
	background: #fff;
}
header h1{
	width: 350px;
}
header a{
	width: 250px;
}
header h1 a:hover{
	opacity: 1;
}
header picture{
	display: block;
	margin-top: -2%;
}



nav{
	background: #dd5171;
}
nav ul{
	width: 100%;
	max-width: 900px;
	height: 100px;
	margin: auto;
	display: flex;
}
nav li{
	display: block;
	width: calc(100% / 3);
	height: 100%;
	position: relative;
}
nav li::after{
	content: "";
	display: block;
	width: 1px;
	height: 70%;
	background: #fff;
	position: absolute;
	right: 0;
	top: 15%;
}
nav li:last-child::after{
	display: none;
}
nav li img{
	display: block;
	width: auto;
	height: 100px;
	margin: auto;
}
.fixed nav{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
}



.shadow{
	width: 100%;
	max-width: 900px;
	margin: auto;
	box-shadow:0 0 20px rgba(0,0,0,0.05);
}
main{
	background: #fff;
}



.cta{
	background: url(./images/bg-gold.jpg) repeat-y;
	background-size: 100% auto;
	padding: 80px 4%;
}
.cta h2{
	width: 90%;
	max-width: 700px;
	margin: 0 auto 20px;
}
.cta p{
	text-align: center;
	margin-top: 40px;
}



.btn{
	display: block;
	width: 100%;
	max-width: 800px;
	margin: auto;
	position: relative;
	overflow: hidden;
	animation: click 2s infinite;
	border-radius: 1000px;
}
.btn::after{
	content: "";
	display: block;
	width: 30px;
	height: 100%;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #fff;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect{
	0%{transform:scale(0)rotate(45deg);opacity:0;}
	80%{transform:scale(0)rotate(45deg);opacity:0.5;}
	81%{transform:scale(4)rotate(45deg);opacity:1;}
	100%{transform:scale(50)rotate(45deg);opacity:0;}
}
@keyframes click{
	30%{top:0;}
	35%{top:4px;}
	40%{top:0;}
	45%{top:4px;}
	50%{top:0;}
}
.btn:hover{
	cursor: pointer;
	opacity: 0.8;
}



.nayami{
	width: 92%;
	margin: 70px auto 0;
}



.hdr{
	width: 100%;
	background: #dd5171;
	color: #fff;
	font-size: 175%;
	line-height: 1.4;
	text-align: center;
	padding: 30px 4%;
	margin-bottom: 60px;
	position: relative;
}
.hdr::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: solid 20px transparent;
	border-top: solid 25px #dd5171;
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
}
.hdr span{
	display: block;
	font-size: 80%;
	color: #ffedc3;
}
.hdr-gold{
	background: #856700;
	background: linear-gradient(90deg, rgba(133, 103, 0, 1) 0%, rgba(196, 168, 77, 1) 50%, rgba(133, 103, 0, 1) 100%);
	font-family: serif;
}
.hdr-gold::after{
	border-top-color: #C4A84D;
}



.bg-violet{
	background: url(./images/bg-violet.jpg) repeat-y;
	background-size: 100% auto;
}



.outline{
	padding-bottom: 80px;
}
.outline > p{
	text-align: center;
	width: 92%;
	margin: 0 auto 60px;
}
.method figure{
	width: 92%;
	margin: 0 auto 80px;
}
.method a{
	display: block;
	width: 92%;
	margin: auto;
	border: solid 1px #dd5171;
}
.salon section{
	width :92%;
	margin: 0 auto 40px;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.salon section div{
	padding: 2em;
}
.salon figure{
	width: 92%;
	margin: 60px auto 0;
}
.salon figcaption{
	text-align: center;
	margin-top: 1em;
}



.koe{
	padding: 80px 4%;
	background: url(./images/bg-blue.jpg) repeat-y center top;
	background-size: 100% auto;
}
.koe h2,
.koe section{
	margin-bottom: 40px;
}
.koe section + h2{
	margin-top: 80px;
}
.koe h3{
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}
.koe section div{
	background: #fff;
	padding: 2em;
}



input{
	display: none;
}
label{
	display: block;
	position: relative;
	height: 8em;
	overflow: hidden;
	margin-top: -1em;
	transition: 0.2s;
}
input:checked + label{
	height: auto;
	margin-top: 0;
}
label::before{
	content: "";
	display: block;
	width: 100%;
	height: 80px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%);
}
label::after{
	content: "続きを読む";
	display: block;
	width: 7em;
	padding: 1em;
	color: #fff;
	background: #4872fc;
	text-align: center;
	line-height: 1;
	font-weight: bold;
	border-radius: 5px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
input:checked + label::before{
	display: none;
}
input:checked + label::after{
	position: static;
	content: "閉じる";
	transform: translate(0, 0);
	margin: 1em auto 0;
	background: #666;
}
label:hover{
	cursor: pointer;
}



.note{
	background-image:
		linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
		linear-gradient(180deg, #ccc 1px, transparent 1px);
	background-size: 8px 100%,100% 2em;
	line-height: 2em;
	padding-bottom: 1px;
}
.note > *{
	line-height: 1;
}



.media{
	padding: 80px 4%;
	margin: auto;
}
.media > *{
	margin-bottom: 40px;
}
.media > *:last-child{
	margin-bottom: 0;
}
.media h2{
	margin-bottom: 30px;
}
.media h3{
	margin-top: 60px;
}
.media figcaption{
	text-align: center;
	margin-top: 1em;
}



.flow{
	background: url(./images/bg-gold.jpg) repeat-y center top;
	background-size: 100% auto;
	padding-bottom: 80px;
}
.flow > *:nth-child(n+2){
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}
.flow div{
	position: relative;
}
.flow div p{
	position: absolute;
	width: 92%;
	left: 4%;
	top: 10.2%;
}
.flow > figure{
	margin: 60px auto;
}
.flow h3{
	background: #dd5171;
	color: #fff;
	border-radius: 10px 10px 0 0;
	text-align: center;
}
.flow ul{
	background: #fff;
	padding: 2em;
	font-size: 90%;
	line-height: 1.6;
}
.flow .caution{
	margin-top: 1.5em;
}
.caution li{
	margin-bottom: 1em;
}
.caution li:last-child{
	margin-bottom: 0;
}



#price{
	padding-bottom: 80px;
	background: #f3f3f3;
	text-align: center;
	line-height: 1.6;
}
table{
	display: table;
	width: 92%;
	border-radius: 10px 10px 0 0;
	border-collapse: collapse;
	margin: 0 auto 10px;
	background: #fff;
}
#price p{
	width: 92%;
	margin: 0 auto 40px;
	font-size: 90%;
}
th,td{
	padding: 0.5em;
}
th{
	background: #ffe3e9;
	width: 50%;
}
table tr:first-child th{
	width: 100%;
	border-radius: 10px 10px 0 0;
	background: #dd5171;
	color: #fff;
}
table tr:nth-child(3) th{
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
table tr:nth-child(3) td{
	border-top: solid 1px #ffe3e9;
	border-bottom: solid 1px #ffe3e9;
}
th span:first-child{
	color: #dd5171;
}
th span:nth-child(2){
	background: #dd5171;
	color: #fff;
	font-size: 90%;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0 5px;
}
th span:last-child{
	font-weight: normal;
}
td span{
	font-weight: bold;
}
.payment{
	margin-top: 40px;
}
.payment h3{
	color: #dd5171;
}



.BtoB{
	padding-bottom: 80px;
}
.BtoB h2 ~ *{
	width: 92%;
	margin: auto;
}
.BtoB p{
	margin-bottom: 60px;
}
.BtoB div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 30px auto 60px;
}
.BtoB div a{
	display: block;
	width: 24%;
	padding: 10px;
}
.BtoB div a:nth-child(2),
.BtoB div a:nth-child(5){
	margin-left: 8%;
	margin-right: 8%;
}
.BtoB figcaption{
	text-align: center;
}
.BtoB figure:last-child{
	margin-top: 60px;
}
.BtoB figure:last-child figcaption{
	margin-top: 1em;
}



.future{
	padding: 80px 4%;
	background: url(./images/bg-pink.jpg) repeat-y;
	background-size: 100% auto;
}



.faq{
	padding-bottom: 80px;
	background: #f3f3f3;
}
.faq section{
	width: 92%;
	margin: 30px auto 0;
}
.faq h3,
.faq p{
	line-height: 1.6;
	padding: 1em 2em 1em 2.75em;
	position: relative;
}
.faq h3{
	color: #fff;
	background: #dd5171;
	border-radius: 10px 10px 0 0;
}
.faq p{
	background: #fff;
}
.faq h3::before,
.faq p::before{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	position: absolute;
	left: 0.75em;
	top: 1em;
	font-weight: bold;
}
.faq h3::before{
	content: "Q";
	background: #333;
}
.faq p::before{
	content: "A";
	background: #dd5171;
	color: #fff;
}



aside{
	width: 92%;
	max-width: 1000px;
	margin: 80px auto 0;
	border: solid 1px #dd5171;
	padding: 2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
aside figure{
	width: 240px;
}
aside section{
	width: calc(100% - 280px);
	line-height: 1.6;
}
aside h2{
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: solid 1px #dd5171;
}
aside h2 em{
	font-size: 120%;
}
aside h2 span{
	display: block;
	font-weight: normal;
	font-size: 80%;
	color: #6d5238;
}
aside p{
	font-size: 80%;
	margin-bottom: 1.5em;
}
aside p a{
	display: block;
	margin-top: 0.5em;
}
.sns{
	display: flex;
}
.sns a{
	width: 50px;
	height: 50px;
	margin-right: 25px;
}
.sns a:last-child{
	margin-right: 0;
}



footer{
	padding: 60px 4% 290px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 75%;
	color: #333;
}
footer a{
	color: #333;
	margin: 0 0.25em;
	font-weight: normal;
	text-decoration: none;
}
footer small{
	width: 100%;
	text-align: center;
	margin-top: 1em;
}



.fixed button{
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 120px;
	right: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255,255,255,0.8);
	border: solid 1px rgba(211,81,113,0.6);
	border-right: 0;
}
.fixed button:hover{
	cursor: pointer;
}
.fixed button img{
	width: 30%;
}
.fixed .btn{
	width: 480px;
	height: 105px;
	position: fixed;
	left: calc(50% - 240px);
	bottom: 120px;
	animation: 0;
	z-index: 100;
}
.trigger{
	height: 1000px;
	position: absolute;
	top: 0;
	z-index: -100;
}



.sub,
.profile{
	padding: 80px 4% 0;
}
.sub h2,
.profile h2{
	font-size: 150%;
	text-align: center;
	color: #dd5171;
	margin-bottom: 2em;
}
.sub h3{
	font-size: 110%;
	line-height: 1.6;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	border-bottom: solid 1px #333;
}
.sub a{
	cursor: pointer;
}
.sub p{
	margin-bottom: 3em;
}
.sub figure{
	margin-bottom: 1em;
}
.sub > *:last-child{
	margin-bottom: 0;
}
.signature{
	font-size: 90%;
	text-align: right;
}



.profile > *{
	margin-bottom: 3em;
}

.clm{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.clm > *{
	width: 48%;
}

.sb{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sb::before{
	display: block;
	content: "";
	width: 120px;
	height: 120px;
	background: url(./images/prof-icon-sb.png) no-repeat;
	background-size: 120px 120px;
}
.sb span{
	background: #f6f6f6;
	padding: 1.5em;
	border-radius: 10px;
	display: block;
	width: calc(100% - 150px);
	position: relative;
}
.sb span::before{
	content: "";
	background: #f6f6f6;
	width: 20px;
	height: 20px;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
	position: absolute;
	left: -20px;
	top: calc(50% - 10px);
}
.sb-w span,
.sb-w span::before{
	background: #fff;
}

.index{
	border: solid 1px #ccc;
	padding: 2em;
}
.index span{
	display: block;
	text-align: center;
	padding-bottom: 0.5em;
	border-bottom: solid 1px #ccc;
	margin-bottom: 1em;
}
.index ol{
	font-size: 90%;
	counter-reset: item;
}
.index ol > li:before{
	counter-increment: item;
	content: counters(item, "-")". ";
}
.index ol ol{
	margin-left: 1em;
}
.index ol ol li{
	line-height: 1.6;
	margin-bottom: 0.5em;
}
.index a{
	font-weight: normal;
	text-decoration: none;
}

.profile h3{
	background: #dd5171;
	color: #fff;
	font-size: 120%;
	padding: 0.8em 1em;
	margin-bottom: 2em;
	line-height: 1.8;
}
.profile p{
	width: 96%;
	margin-left: auto;
	margin-right: auto;
}
.profile h4{
	font-size: 110%;
	color: #333;
	line-height: 1.6;
	margin-bottom: 2em;
	border-top: solid 1px #dd5171;
	border-bottom: solid 1px #dd5171;
	padding: 0.8em 2%;
}
.profile .box{
	padding: 1.5em 2em;
	background: #fff4f6;
}



/* Special Lesson */
.special h1{
	width: auto;
}
.special picture{
	margin-top: auto;
}

.special main{
	margin-top: 80px;
}

.special .lead{
	padding-bottom: 80px;
}
.special .lead h2 ~ *{
	width: 92%;
	margin: 0 auto 3em;
}
.special .lead p{
	width: 90%;
}
.special .lead > *:last-child{
	margin-bottom: 0;
}

.special .future{
	padding: 0;
}
.special .future figure{
	width: 92%;
	margin: auto;
}

.special .flow{
	background: #fff;
}
.special ul{
	background: #fff1f4;
	margin-bottom: 60px;
}

.special .schedule{
	padding-bottom: 80px;
}
.special .schedule > h2 ~ *{
	width: 92%;
	margin: auto;
	text-align: center;
}
.special .schedule p{
	font-size: 90%;
	margin-top: 1em;
}

.special footer{
	padding: 60px 4%;
}
.special footer small{
	margin-top: 0;
}






@media only screen and (max-width: 767px){
body{font-size: 1.6rem;}
strong{background:linear-gradient(transparent 50%, #ffff66 0%);}



header div{
	padding: 20px 15px;
}
header h1{
	width: 55%;
	max-width: 220px;
}
header a{
	width: 40%;
	max-width: 160px;
}
header picture{
	margin-top: -1.875vw;
}




nav ul{
	height: 50px;
}
nav li img{
	height: 50px;
}



.cta{
	padding: 30px 4%;
}
.cta h2{
	margin: 0 auto 10px;
}
.cta p{
	margin-top: 20px;
	line-height: 1.6;
}



@keyframes click{
	30%{top:0;}
	35%{top:2px;}
	40%{top:0;}
	45%{top:2px;}
	50%{top:0;}
}



.nayami{
	margin: 35px auto 0;
}



.hdr{
	font-size: 120%;
	padding: 15px 4%;
	margin-bottom: 30px;
}
.hdr::after{
	border: solid 10px transparent;
	border-top: solid 12px #dd5171;
	bottom: -20px;
}
.hdr span{
	font-size: 80%;
}
.hdr-gold::after{
	border-top-color: #C4A84D;
}



.outline{
	padding-bottom: 40px;
}
.outline > p{
	margin: 0 auto 30px;
}
.method figure{
	margin: 0 auto 40px;
}
.salon section{
	margin: 0 auto 20px;
}
.salon section div{
	padding: 1em;
}
.salon figure{
	margin: 30px auto 0;
}



.koe{
	padding: 40px 4%;
}
.koe h2,
.koe section{
	margin-bottom: 20px;
}
.koe section + h2{
	margin-top: 40px;
}
.koe h3{
	border-radius: 5px 5px 0 0;
}
.koe section div{
	padding: 1.5em 1em;
}



label::after{
	padding: 0.8em;
}



.media{
	padding: 40px 4%;
}
.media > *{
	margin-bottom: 20px;
}
.media h2{
	margin-bottom: 15px;
}
.media h3{
	margin-top: 30px;
}



.flow{
	padding-bottom: 40px;
}
.flow > figure{
	margin: 30px auto;
}
.flow ul{
	padding: 1.5em;
}



#price{
	padding-bottom: 40px;
}
#price p{
	margin: 0 auto 20px;
}
th{
	width: 60%;
}
th span:last-child{
	display: block;
}
td span{
	font-size: 120%;
}
.payment{
	margin-top: 20px;
}



.BtoB{
	padding-bottom: 40px;
}
.BtoB p{
	margin-bottom: 30px;
}
.BtoB div{
	margin: 15px auto 30px;
}
.BtoB div a{
	width: 30%;
}
.BtoB div a:nth-child(2),
.BtoB div a:nth-child(5){
	margin-left: 4%;
	margin-right: 4%;
}
.BtoB figure:last-child{
	margin-top: 30px;
}



.future{
	padding: 40px 4%;
}



.faq{
	padding-bottom: 40px;
}
.faq section{
	margin-top: 20px;
}
.faq h3,
.faq p{
	padding: 0.75em 1em 0.75em 2.75em;
}
.faq h3::before,
.faq p::before{
	top: 0.75em;
}



aside{
	padding: 1.5em;
	margin: 40px auto 0;
	display: block;
}
aside figure{
	width: 60%;
	margin: 0 auto 0.5em;
}
aside section{
	width: 100%;
}
aside h2 span,
aside p{
	font-size: 90%;
}
.sns{
	justify-content: center;
}
.sns a{
	width: 40px;
	height: 40px;
	margin-right: 20px;
}



footer{
	padding: 30px 4% 145px;
	font-size: 80%;
}



.fixed button{
	width: 40px;
	height: 40px;
	bottom: 60px;
}
.fixed .btn{
	width: 256px;
	height: 56px;
	left: calc(50% - 128px);
	bottom: 60px;
}
.trigger{
	height: 500px;
}



.sub,
.profile{
	padding: 40px 4% 0;
}
.sub h2,
.profile h2{
	margin-bottom: 1em;
}
.sub p{
	margin-bottom: 2em;
}



.profile > *,
.clm figure{
	margin-bottom: 2em;
}

.clm{
	display: block;
}
.clm > *{
	width: 100%;
}

.sb::before{
	width: 70px;
	height: 70px;
	background-size: 70px 70px;
}
.sb span{
	padding: 1em;
	width: calc(100% - 90px);
	line-height: 1.8;
}
.sb span::before{
	left: -15px;
}

.index{
	padding: 1em;
}
.index ol{
	font-size: 100%;
}
.profile .box{
	padding: 1em;
}



/* Special Lesson */
.special h1{
	width: 100%;
	max-width: 100%;
}

.special main{
	margin-top: 0;
}

.special .lead{
	padding-bottom: 40px;
}
.special .lead h2 ~ *{
	margin: 0 auto 2em;
}

.special ul{
	margin-bottom: 30px;
}

.special .schedule{
	padding-bottom: 40px;
}

.special footer{
	padding: 30px 4%;
}



}/* SP */



@media only screen and (min-width: 768px){
.sp{display:none;}
}
@media only screen and (max-width: 767px){
.pc{display:none;}
}