@charset "UTF-8";


/* Adobe TypeKit
https://typekit.com/kit_editor/kits/cba0xcg?popup=1
EL	"kozuka-gothic-pr6n"	200	normal	
L	"kozuka-gothic-pr6n"	300	normal	
R	"kozuka-gothic-pr6n"	400	normal	
M	"kozuka-gothic-pr6n"	500	normal	
B	"kozuka-gothic-pr6n"	700	normal	
H	"kozuka-gothic-pr6n"	900	normal

 */

/*==================
画面設計
768px をブレイクポイントとし
それ以上はPCレイアウト
767px以下はスマホレイアウトととする
@media screen and ( max-width:48rem) { }
==================*/



h1,th{
	font-weight: normal;
}
ul li{
	list-style: none;
}
html{
	background-color: #FFFFFF;
	color: #473a26;
	text-align: center;
	font-size: 16px;

	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 300;
}
img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

a,
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	color: #3c3c3c;
}
/*gMAp 表示バグフィックス*/
.gMAp label { width: auto; display: inline; }
.gMAp img { max-width: none; max-height: none; }

/* style */
@media ( max-width:48rem) {

}

.sectionTitle{
	width: 100%;
	min-height: 340px;
	background: url("../../image/title_headimg.png") no-repeat center 60px,
				url("../../image/title_bgstripe.gif") repeat center center;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.8;
	color: #FFFFFF;
	box-sizing: border-box;
	padding-top: 180px;
}


/* HEADER */
.sectionHead{
	background: url("../../image/section00_bgimage.jpg") no-repeat calc(50% - 400px) 100px;
}
.sectionHead .innerW1000{
	max-width: 1000px;
	min-height: 850px;
	margin: 0 auto;
	padding-top: 60px;
	position: relative;
}
.headerLogo{
	position: absolute;
	top: 80px;
	right: 10px;
}
.headerMainimg{
	position: absolute;
	/* top: 220px; */
	bottom: 120px;
	right: 0;
}
.sectionHead .goScroll{
	position: absolute;
	top: 743px;
	right: 70px;
	animation: fluffy1 3s ease infinite;
}
	@keyframes fluffy1 {
		0% { transform:translateY(0) }
		5% { transform:translateY(0) }
		10% { transform:translateY(0) }
		20% { transform:translateY(-15px) }
		25% { transform:translateY(0) }
		30% { transform:translateY(-15px) }
		50% { transform:translateY(0) }
		100% { transform:translateY(0) }
	}
.commonContactBox{
}
/*  */
.mediaBatch{
	position: absolute;
	top: 240px;
	right: 0;
}
/* メディア掲載情報 */
.mediaArea{
	padding: 80px 0;
	width: 100%;
	text-align: center;
	background-color: #E2EEE9;

	background-image: url(../../image/mediaback_left.png), url(../../image/mediaback_right.png);
	background-position: top 30% left, top 30% right;
	background-repeat: no-repeat;
	background-size: auto;
}
.mediaArea .sectionTitle{
	color: #333;
	font-size: 1.6rem;
	font-weight: 900;
	padding-top: 0;
	min-height: auto;
	background-image: none;
}
.mediaArea .sectionTitle .en{
	display: block;
	font-size: .8rem;
	margin-top: 0px;
}
.mediaArea .mediaArticleList{
	width: 100%;
	max-width: 760px;
	padding: 30px;
	box-sizing: border-box;
	background-color: #fff;
	text-align: left;
	margin: 40px auto 40px ;
	box-shadow: 10px 10px 0px 0px #A3D0C2;
}
.mediaArea .mediaArticleList li{
	padding: 10px 0;
	border-bottom: #eee 1px solid;
	font-size: 14px;
	line-height: 1.6;
}
.mediaArea .mediaArticleList li a:hover{
	text-decoration: underline;
}
.mediaArea .mediaArticleList li .date{
	color: #A3D0C2;
	white-space: nowrap;
}
.mediaArea .logos{
	width: 100%;
	max-width: 760px;
	padding: 30px;
	background-color: #fff;
	border-radius: 20px;
	margin: 20px auto 20px ;
	box-sizing: border-box;
}


/* SECTION 01  
エクランってどんなお店？
どんなところで施術するの？
*/
.section01{
	margin-bottom: 100px;
}
.section01 .innerW1000{
	max-width: 1000px;
	margin: 0 auto;
}
.introductionArea{
	margin: 80px 0;
	text-align: center;
}
.introductionArea p{
	margin-top: 60px;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.5;
}
.introductionArea p span{
	font-size: 2rem;
	font-weight: 700;
	color: #d72251;
	font-style: italic;
}
.introductionArea p span.min{
	font-size: 1.25rem;
}
.prArticleArea ul{
	padding:0 100px 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.prArticleArea img{
}
.prArticleArea li.textArea{
	width: 50%;
	position: relative;
}
.prArticleArea li.textArea .baroon{
	position: absolute;
	top: -30px;
	right: -30px;
}
.prArticleArea li.picL{
	width: 48%;
	margin-bottom: 30px;
}
.prArticleArea li.picS{
	width: 23%;
	margin-bottom: 30px;
	align-self: flex-end;
}
.prArticleArea li.textArea dl{
	padding: 10px 30px;
	text-align: left;
}
.prArticleArea li.textArea dt{
	color: #4cccbd;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 700;
	margin-bottom: 20px;
}
.prArticleArea li.textArea dd{
	font-size: 0.9rem;
	line-height: 1.5;
}
.section01 .osaeTextArea{
	font-size: 0.8rem;
	line-height: 1.8;
	text-align: center;
	margin-bottom: 50px;
}

/* SECTION 02
都度払い脱毛ってなに？
普通の脱毛と料金はどう違うの？
*/
.section02{
}
.section02 h3{
	padding: 80px 0;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.8;
	background: url(../../image/section02_bgwing_l.png) no-repeat calc(50% - 400px) center,
				url(../../image/section02_bgwing_r.png) no-repeat calc(50% + 400px) center;
}
.section02 h3 span{
	display: inline-block;
	padding: 3px;
	background: linear-gradient(transparent 60%, #fff4a1 0%);
}
.fourthPointArea{
	width: 100%;
	background: url(../../image/section02_bgdot.gif) repeat center center;
	padding: 40px 0;
}
.fourthPointArea h4{
	font-size: 1.8rem;
	color: #d72251;
	line-height: 1.6;
	margin-bottom: 50px;
}
.fourthPointWrapper{
	width: 800px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.fourthPointArea dl{
	width: 45%;
	background-color: #FFFFFF;
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 40px;
	box-sizing: border-box;
}
.fourthPointArea dl dt{
	margin-top: 10px;
	font-size: 1.4rem;
	font-weight: 700;
	color: #d72251;
	line-height: 1.4;
}
.fourthPointArea dl dd{
	margin-top: 20px;
	font-size: 1rem;
	line-height: 1.5;
}
.fourthPointArea .icon{
	display: block;
	margin-top: -40px;
}
.priceArea{
	padding: 50px 0;
}
.priceArea h4{
	padding-right: 160px;
	margin-bottom: 40px;
}
.priceArea .priceTable{
	padding: 50px 0;
	width: 800px;
	margin: 0 auto;
	position: relative;
}
.priceArea .priceTable .baroon1{
	position: absolute;
	top: 280px;
	left: -60px;
}
.priceArea .priceTable .baroon2{
	position: absolute;
	bottom: -30px;
	right: -60px;
}
.partsArea{
	width: 100%;
	padding: 50px 0;
	background: url(../../image/section02_bgdot2.gif) repeat center center;
}
.partsArea h4,
.partsArea .datsumoukasyo{
	width: 800px;
	margin: 0 auto;
	padding: 30px 0;
	background-color: #FFFFFF;
	box-sizing: border-box;
	border-radius: 20px;
}
.partsArea p{
	margin: 30px 0 20px;
}
.section02 .osae{
	padding: 50px 0 200px;
}



/* SECTION 03
どうやって脱毛するの？ 痛くないの？
安くてもちゃんと効果があるか心配・・・。
*/
.section03{
	margin-bottom: 100px;
}
.section03 h3{
	padding: 60px 0;
	width: 800px;
	margin: 0 auto;
	position: relative;
}
.section03 h3 span{
	display: block;
	position: absolute;
	top: 30px;
	right: -100px;
}
.section03 .batchBox1,
.section03 .batchBox2{
	width: 660px;
	margin: 50px auto;
	text-align: left;
	background-color: #FFFFFF;
	padding: 20px 20;
	box-sizing: border-box;
	border-radius: 20px;
	border: #4cccbd 5px solid;

	font-size: 1.2rem;
	line-height: 1.6;
	position: relative;
}
.section03 .batchBox1 .red,
.section03 .batchBox2 .red{
	color: #d72251;
}
.section03 .batchBox1 .batch{
	position: absolute;
	top: -50px;
	left: -150px;
}
.section03 .batchBox1 .baroon{
	position: absolute;
	top: 10px;
	right: 20px;
}
.section03 .batchBox1{
	padding: 20px 20px 20px 100px;
}
.section03 .batchBox2 .batch{
	position: absolute;
	top: -50px;
	right: -150px;
}
.section03 .batchBox2{
	padding: 20px 20px 20px 20px;
}
.section03 .mainTitle img{
	margin: 0 10px;
}
.section03 video{
	height: 300px;
	width: 500px;
	background-color: #000000;
	border-radius: 10px;
}
.section03 ul.datsumouStep{
	width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}
.section03 li{
	width:25%;
}
.section03 li span{
	padding: 0 20px 0 40px;
	display: block;
	font-size: 0.9rem;
	line-height: 1.8;
	text-align: left;
}
.section03 .bihakuArea{
	width: 700px;
	margin: 50px auto;
	text-align: left;
	background-color: #FFFFFF;
	padding: 20px 20;
	box-sizing: border-box;
	border-radius: 20px;
	border: #c4a168 5px solid;

	font-size: 1.2rem;
	line-height: 1.6;
	position: relative;
}
.bihakuArea .headCopy{
	text-align: left;
	font-size: 1rem;
	padding: 20px 0 20px 160px;
	position: relative;
}
.bihakuArea .headCopy .batch{
	position: absolute;
	top: -50px;
	left: -80px;
}
.bihakuArea .headCopy .baroon{
	position: absolute;
	top: -50px;
	right: -80px;
}
.bihakuArea h4{
	text-align: center;
	font-size: 1.5rem;
	letter-spacing: .5;
	font-weight: 700;
	color: #c4a168;
	padding: 20px 0;
	text-decoration: underline;
}
.bihakuArea .bodyCopy{
	text-align: center;
	font-size: 1.87rem;
	letter-spacing: .5;
	font-weight: 700;
	color: #c4a168;
	padding: 20px 0;
	background: url(../../image/section03_stripe.gif) repeat center center;
}
.bihakuArea .beforAfter{
	text-align: center;
	margin: 20px 0;
}
.bihakuArea .endCopy{
	text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: #d72251;
	margin-bottom: 30px;
}
.bihakuArea .endCopy span{
	font-size: 2rem;
}


/* SECTION 04
最も効果的に脱毛するには
どのくらい通えばいいの？
*/
.section04{
	margin-bottom: 100px;
}
.section04 ul{
	width: 700px;
	margin: 80px auto 60px;
	display: flex;
	justify-content: space-around;
}
.section04 ul li{
	width: 30%;
}
.section04 p{
	text-align: center;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.8;
}
.section04 p span{
	display: inline-block;
	padding: 3px;
	background: linear-gradient(transparent 60%, #fff4a1 0%);
}


/* SECTION 05
実際にどんなことをするの？
来店の手順は？
*/
.section05 {
	margin-bottom: 50px;
}
.section05 .flowArea{
	margin: 50px 0;
}
.section05 dl{
	width: 750px;
	margin: 0 auto ;
	padding: 10px 0;
	box-sizing: border-box;
	position: relative;
	clear: left;
	overflow: visible;
}
.section05 dt{
	float: left;
}
.section05 dd.title,
.section05 dd.description{
	text-align: left;
}
.section05 dd.title{
	padding-left: 240px;
	padding-top: 30px;
	font-size: 1.8rem;
	font-style: normal;
	font-weight: normal;
	font-weight: 400;
}
.section05 dd.description{
	padding-top: 30px;
	padding-left: 240px;
	font-size: 1rem;
	line-height: 1.6;
	font-style: normal;
	font-weight: normal;
	font-weight: 400;
}
.section05 dd.baroon{
	position: absolute;
	top: -50px;
	right: -40px;
}



/* SECTION 06
都度払い脱毛 ecrin を
ご利用いただいた方々の声
*/
.section06 {
	width: 100%;
	padding: 100px 0;
	background: url(../../image/section06_titlebg.jpg) repeat center center;
}
.section06 h2{
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: 600;
	color: #FFFFFF;
	margin-bottom: 40px;
}
.section06 h2 span.icon{
	display: block;
}
.section06 h2 span.min{
	display: block;
	margin-top: 10px;
	font-size: 1.4rem;
	font-weight: 400;
}
.section06 p.brLeft,
.section06 p.brRight {
	width: 800px;
	padding: 20px;
	margin: 20px auto;
	box-sizing: border-box;
	border-radius: 20px;
	background-color: #FFFFFF;
	font-size: 1.1rem;
	line-height: 1.5;
	text-align: left;
	position: relative;
}
.section06 p.brLeft:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #FFFFFF;
}
.section06 p.brRight:before{
	content: "";
	position: absolute;
	top: 50%;
	right: -30px;
 	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #FFFFFF;
}
.section06 p span{
	display: inline-block;
	padding: 3px;
	background: linear-gradient(transparent 60%, #f9dde5 0%);
}



/* SECTION 07
みんなの疑問を解決
よくある質問に答えます
*/
.section07 {
	width: 100%;
	padding: 100px 0;
	background: url(../../image/section07_bgimg.jpg) no-repeat center center;
	background-size: cover;
}
.section07 h2{
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: 600;
	color: #FFFFFF;
	margin-bottom: 60px;
}
.section07 h2 span.icon{
	display: block;
}
.section07 h2 span.min{
	display: block;
	margin-top: 10px;
	font-size: 1.4rem;
	font-weight: 400;
}
.section07 dl{
	width: 580px;
	margin: 0 auto;
	color: #FFFFFF;
	font-size: 0.9rem;
	font-weight: 100;
	text-align: left;
}
.section07 dl dt{
	border-bottom: #FFFFFF 1px solid;
	padding: 10px 0;
	cursor: pointer;
}
.section07 dl dt:hover{
	background-color:rgba(255,255,255,0.2);
}
.section07 dl dt:after{
	content: "▼";
	display: inline-block;
	float: right;
}
.section07 dl dd{
	padding: 20px 0 40px 40px;
	line-height: 1.6;
}



/* SECTION 08
みんなの疑問を解決
よくある質問に答えます
*/
.section08 {
	width: 100%;
	padding: 100px 0;
	background-color: #4cccbd;
}
.section08 h2{
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: 600;
	color: #FFFFFF;
	margin-bottom: 60px;
}
.section08 h2 span.icon{
	display: block;
}
.section08 h2 span.min{
	display: block;
	margin-top: 10px;
	font-size: 1.4rem;
	font-weight: 400;
}
.contactHead{
	text-align: center;
	margin-bottom: 50px;
}
.shopMenu{
	width: 800px;
	margin: 0 auto 100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.shopMenuMens{
	margin: 0 auto 200px;
}
.shopMenu li{
	width: auto;
	min-width: 40%;
	margin: 10px 5%;
}
.shopMenu li a{
	display: block;
	padding: 10px 10px;
	background-color: #95e4db;
	border-bottom: #598983 3px solid;
	border-radius: 5px;
}
.shopMenu li a:hover{
	background-color:rgba(255,255,255,0.2);
}
.shopMenu li.dead{
	width: 20%;
	padding: 10px 0;
	background-color: #59b6ab;
	border-bottom: none;
	border-radius: 5px;
	position: relative;
}
.shopMenu li.dead span{
	display: block;
	position: absolute;
	left: 10px;
	bottom: -20px;
}
.shopMenu li span.cap{
	display: block;
	padding-top: 5px;
	color: #FFFFFF;
}

.shopUnit{
	width: 800px;
	margin: 120px auto 40px;
}
.shopUnit .title{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
}
.shopUnit .title dt{
	width: 40%;
	text-align: left;
}
.shopUnit .title dd{
	width: 60%;
	text-align: right;
	color: #FFFFFF;
	font-size: 2.6rem;
}
.shopUnit .title dd.minText{
	font-size: 1.8rem;
}
.shopUnit .title dd span{
	display: inline-block;
	margin-right: 30px;
	font-size: 0.8rem;
}
.shopImgBox{
	display: flex;
	justify-content: space-between;
}
.shopImgBox li{
	width:25%;
}
.gMAp{
	width: 100%;
	/*height: 300px;*/
	margin: 10px 0;
	background-color:rgba(255,255,255,0.1);
}
.gMAp iframe{
	width: 100%;
}
.addressBox {
	width: 100%;
	padding-bottom: 30px;
	display: flex;
	justify-content: space-between;
}
.addressBox .left{
	width: 66%;
	text-align: left;
	line-height: 1.8;
}
.addressBox .right{
	width: 33%;
	text-align: right;
}
.lastContactBox{
	width: 100%;
	border: #FFFFFF 2px solid;
	border-radius: 5px;
	padding: 20px 0 10px;
	text-align: center;
	box-sizing: border-box;
}
.lastContactBox p{
	margin-bottom: 20px;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 1.6;
}
.lastContactBox p a{
	color: #ffffff;
	text-decoration: underline;
	display: inline-block;
	margin: 0 5px;
	font-size: 1.2rem;
}

.lastContactBox ul{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.lastContactBox ul li{
	width:25%;
}
/*.lastContactBox ul li:first-child{
	width:50%;
}*/
.telbox{
	display: none;
}
#flameLink{
	display: none;
}

footer{
	padding: 40px 0;
	font-size: 0.8rem;
	color: #FFFFFF;
	background-color: #4cccbd;
}


/**/
#newshopOpenTopBanner{
	position: absolute;
	top: 700px;
	right: 30px;
}
.newshopOpenBanner{
	width: 100%;
	padding: 20px 0;
	margin-bottom: 40px;
	border-top: #FFFFFF 2px solid;
	border-bottom: #FFFFFF 2px solid;
}
@media screen and ( max-width:48rem) {
	#newshopOpenTopBanner{
		width: 35%;
		position: absolute;
		top: 80%;
		right: 3%;
	}
}

.gotoMensPage a{
	width: 100%;
	display: block;
	padding: 10px 0;
	text-align: center;
	color: #4D7BAC;
	background-color: #FFFFFF;
	border-radius: 5px;
	margin: 20px auto;
	box-sizing: border-box;
	font-weight: bold;
}


/*コロナ追記*/
.coronaCaution{
	width: 100%;
	height: auto;
	padding: 20px;
	border: 5px solid;
	box-sizing: border-box;

	text-align: center;
	background-color: #FFFDDE;
}
.coronaCaution dl dt{
	font-weight: bold;
	margin-bottom: 20px;
}
.coronaCaution dl dd{
	line-height: 1.6;
	font-size: 0.8rem;
}
.coronaCaution dl dd span{
	font-weight: bold;
}

/* 機器紹介 */
#newMachinePR{
    background-color: #EEE4ED;
    width: 100%;
    padding: 50px 0;
    margin-bottom: 40px;
}
#newMachinePR .machineName{
    font-size: 80px;
    color: #ccc;
    font-family: serif;
    white-space: nowrap;
}