@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
}





/* ================================================================================

	メイン画像

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		position: relative;

	}
	.main_top_in {
		position: relative;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;

	}
	.main_top_in {
		position: relative;
	}
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	当サロンについて

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#topMain{
		background:url("../img/top/topMain_bg.jpg") no-repeat center / cover;
		padding-top:108px;
		padding-bottom: 140px;
		text-align: center;
	}
	
	#topMain h2{
		color:#113D5C;
		font-size: 36px;
		margin-bottom: 0.85em;
		font-weight: 400;
		line-height: 1.55em;
	}
	
	#topMain p{
		font-size: 16px;
	}
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#topMain{
		background:url("../img/top/topMain_bg.jpg") no-repeat center / cover;
		    padding: 11vw 4.6vw 22vw;
	}
	
	#topMain h2{
		color:#113D5C;
		font-size: 5vw;
		margin-bottom: 1em;
		font-weight: 400;
		line-height: 1.45em;
		text-align: center;
	}
	
	#topMain p{
		color:#113D5C;
		letter-spacing: 0.05em;
	}
	
	
}





/* ================================================================================

	ボタン

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.button_common{}
	.button_common a{
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 274px;
		height: 60px;
		background-color:rgba(176,140,89,1.00);
		color: rgba(255,255,255,1.00);
		font-size:20px;
		padding: 10px 14.2px 10px 40px;
		margin-left: auto;margin-right: auto;
	}
	.button_common a::after{
		content: url("../img/top/arrow.png");
		display: block;
		transform: translate( 0 , -15% );
		transition: .2s ease-in;
	}
	.button_common a:hover::after{
		transform: translate( 8px , -15% );	
	}
	
	#topMain .button_common{
		margin-top:28px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.button_common{}
	.button_common a{
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 60vw;
		height: 15vw;
		background-color:rgba(176,140,89,1.00);
		color: rgba(255,255,255,1.00);
		font-size:3.5vw;
		padding: 3vw 3vw 3vw 8vw;
		margin-left: auto;margin-right: auto;
	}
	.button_common a::after{
		content: url("../img/top/arrow.png");
		display: block;
		transform: translateY(-15%);
	}
	
	#topMain .button_common{
		margin-top:10vw;
	}
	
}





/* ================================================================================

	初めてご利用される方へ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
	#flow_area{
		padding-top: 165px;
		position: relative;
	}
	
	#flow_title{
		width: 100%;
		max-width: 800px;
		position: absolute;
		top:0;
		left: 50%;
		display: flex;
		transform: translate(-50%,calc(-160px - 50%));
	}
	
	#flow_title.elementor-section.elementor-section-boxed > .elementor-container{
		width: 100%;
	}
	#flow_title a{
		width: 100%;
		height: 170px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0.6em;
		box-shadow: 5px 5px 30px rgba(54,37,18,.29); 
		background: url("../img/top/flowmain_img.png") no-repeat center #142D4F;
	}

	#flow_title h2{
		font-size: 30px;
		margin-top: -.2em;
		margin-bottom: 0.01em;
		text-align: center;
		font-weight: 400;
	}

	#flow_title p{
		font-size: 18px;
		text-align: center;
		margin-top: 0;
	}
	#flow_title h2,#flow_title p{
		position:relative;
		z-index: 2;
		color:#FFFFFF;
		line-height: 1.55em;
	}
	
	#flow_subtitle{
		position: relative;
		margin-bottom: 83px;
	}
	#flow_subtitle::after{
		content: url("../img/top/flowsub_bg.png");
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-49%);
		z-index: -1;
	}
	#flow_subtitle h3{
		font-size: 33.5px;
		text-align: center;
		font-weight: 400;
		letter-spacing: .25em;
	}
	#flow_subtitle p{
		font-size: 20px;
		text-align: center;
		line-height: 1.65em;
	}
	
	#coupon_list{
		padding-bottom: 98px;
	}
	
	#coupon_list .coupon_item{
		display: flex;
		align-items: center;
		padding: 7% 3.9% 6% 6%;
		background-color: #EBE6E1;
		box-shadow: 5px 5px 13px rgba(54,37,18,.29);
	}
	#coupon_list .coupon_item .coupon_item_img{
		width: 47%;
	}
	#coupon_list .coupon_item .coupon_item_exp{
		width: 53%;
		padding-left: 3.9%;
		text-align: center;
	}
	
	#coupon_list .coupon_item .coupon_item_exp > h4{
		font-size: 19px;
		font-weight: 500;
		color: #113D5C;
		line-height: 1.3em;
	}
	#coupon_list .coupon_item .coupon_item_exp > span{
		font-size: 10.5px;
		padding: 0.1em 1em 0.01em;
		color: #FFFFFF;
		background-color: #142E55;
		min-width: 65.24%;
		display: inline-block;
		letter-spacing: 0.1em;
	}
	
	#coupon_list .coupon_item .coupon_item_exp .coupon_item_subexp{
		margin-top: 5%;
	}
	
	#coupon_list .coupon_item .coupon_item_exp .coupon_item_subexp p{
		font-size: 21px;
		letter-spacing: 0.03em;
	}
	
	#coupon_list .coupon_item .coupon_item_exp .coupon_item_subexp a{
		font-size: 14px;
		color: #2E2E2E;
	}
	
	#campain_list{
		background-color: #142D4F;
		padding-top: 65px;
		padding-bottom: 68px;
	}
	
	#campain_list .campain_item{
		height: 167px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background-color: #FFEEBF;
		border-radius: 7px;
		position: relative;
		box-shadow: 10px 3px 31px #000E15;
	}
	
	#campain_list .campain_item.campain_thin{
		background-color: #FFF9E8;
	}
	
	#campain_list .campain_item h4{
		font-size: 16px;
		background-color: #113D5C;
		color: #FFFFFF;
		padding: .01em 1em .08em;	
		display: inline-block;
		font-weight: 400;
		min-width: 207.69px;
	}
	
	#campain_list .campain_item p{
		line-height: 1.35em;
		font-weight: 300;
	}
	
	#campain_list .campain_item p:not(:first-child){
		margin-top: 0;
	}
	
	#campain_list .campain_item p.campain_price{
		margin-top: 0.7em;
		margin-bottom: 0.3em;
		font-family: 'EB Garamond', serif;
		font-size: 29px;	
		letter-spacing: .1em;
	}
	#campain_list .campain_item p.campain_price > span{
		display: inline-block;
		font-size: 57px;
		color: #E3851E;
		margin-right: 0.1em;
		letter-spacing: .05em;
		font-family: 'Noto Serif JP', serif;
		text-shadow: 3px 2px 5px rgba(170,154,137,.52);
	}
	#campain_list .campain_item p.campain_exp{
		font-size: 13px;
	}
	#campain_list .campain_item p.campain_exp span{
		color: #113D5C;
	}
	
	#campain_list .campain_item::before,#campain_list .campain_item::after{
		content: "";
		width: 102px;
		height: 102px;
		background: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/campain_star.png') no-repeat center / 100%;
		display: block;
		position: absolute
	}
	#campain_list .campain_item::before{
		top:0;
		left: 0;
		transform: translate(-50%,-18%);
	}
	#campain_list .campain_item::after{
		bottom:0;
		right: 0;
		transform: translate(50%,18%);
	}
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
	#flow_area{
		padding-top: 140px;
		position: relative;
	}
	
	#flow_title{
		position: absolute;
		top:0;
		left: 50%;
		transform: translate(-50%,calc(-140px - 50%));
	}
	
	#flow_title a{
		width: calc(100% - 40px);
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 5px 5px 30px rgba(54,37,18,.29); 
		background: url("../img/top/flowmain_img.png") no-repeat center / cover #142D4F;
	}

	#flow_title h2{
		font-size: 6vw;
		margin-top: -.2em;
		margin-bottom: 5px;
		text-align: center;
		font-weight: 400;
		
		
	}
	#flow_title p{
		font-size: 4vw;
		text-align: center;
		margin-top: 0;
	}
	#flow_title h2,#flow_title p{
		position:relative;
		z-index: 2;
		color:#FFFFFF;
		line-height: 1.55em;
	}
	
	#flow_subtitle{
		position: relative;
		margin-bottom: 22vw;
	}
	#flow_subtitle::after{
		content: url("../img/top/flowsub_bg.png");
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-48%);
		z-index: -1;
	}
	#flow_subtitle h3{
		font-size: 7vw;
		text-align: center;
		font-weight: 400;
		letter-spacing: .2em;
	}
	#flow_subtitle p{
		font-size: 4vw;
		text-align: center;
	}
	
	#coupon_list{
		width: 100%;
		padding-bottom:50px;
	}
	
	#coupon_list .elementor-column.elementor-col-50:first-of-type{
		margin-bottom: 10vw;
	}
	
	#coupon_list .coupon_item{
		padding: 6vw;
		background-color: #EBE6E1;
		box-shadow: 1vw 1vw 5vw rgba(54,37,18,.29);
	}
	#coupon_list .coupon_item .coupon_item_img{
		margin-bottom: 2vw;
	}
	#coupon_list .coupon_item .coupon_item_exp{
		text-align: center;
	}
	
	#coupon_list .coupon_item .coupon_item_exp > h4{
		font-size: 6vw;
		font-weight: 500;
		color: #113D5C;
	}
	#coupon_list .coupon_item .coupon_item_exp > span{
		font-size: 3.2vw;
		padding: .3em 1em .35em;
		color: #FFFFFF;
		background-color: #142E55;
	}
	
	#coupon_list .coupon_item .coupon_item_exp .coupon_item_subexp{
		margin-top: 6vw;
	}
	
	#coupon_list .coupon_item .coupon_item_exp .coupon_item_subexp p{
		font-size: 6vw;
	}
	
	#coupon_list .coupon_item .coupon_item_exp .coupon_item_subexp a{
		font-size: 3.5vw;
		color: #2E2E2E;
	}
	
	
	#campain_list{
		background-color: #142D4F;
		padding-top: 9vw;
		padding-bottom: 9vw;
	}
	
	#campain_list .campain_item{
		padding: 5vw 4vw;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background-color: #FFEEBF;
		border-radius: 3vw;
		position: relative;
		box-shadow: 1vw 1vw 5vw #000E15;
	}
	
	#campain_list .elementor-column:not(:first-of-type){
		margin-top: 10vw;
	}
	
	#campain_list .campain_item.campain_thin{
		background-color: #FFF9E8;
	}
	
	#campain_list .campain_item h4{
		font-size: 6vw;
		background-color: #113D5C;
		color: #FFFFFF;
		padding: .01em 1em .01em;	
		display: inline-block;
		font-weight: 400;
	}
	
	#campain_list .campain_item p{
		line-height: 1.35em;
		font-weight: 300;
	}
	
	#campain_list .campain_item p:not(:first-child){
		margin-top: 0;
	}
	
	#campain_list .campain_item p.campain_price{
		margin-top: 5vw;
		margin-bottom: 2vw;
		font-family: 'EB Garamond', serif;
		font-size: 5vw;	
		letter-spacing: -.0001em;
	}
	#campain_list .campain_item p.campain_price > span{
		display: inline-block;
		font-size: 14vw;
		color: #E3851E;
		font-family: 'Noto Serif JP', serif;
		text-shadow: 1vw 1vw 5vw rgba(170,154,137,.52);
	}

	#campain_list .campain_item p.campain_exp span{
		color: #113D5C;
	}
	
	#campain_list .campain_item::before,#campain_list .campain_item::after{
		content: "";
		width: 20vw;
		height: 20vw;
		background: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/campain_star.png') no-repeat center / 100%;
		display: block;
		position: absolute
	}
	#campain_list .campain_item::before{
		top:0;
		left: 0;
		transform: translate(-50%,-18%);
	}
	#campain_list .campain_item::after{
		bottom:0;
		right: 0;
		transform: translate(50%,18%);
	}
	
}


/* ================================================================================

	施術/お客様の声

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.deco{
		padding: 3.58% 3.8%;
		background:url("https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/deco_bc.png") no-repeat center / cover;
		display: flex;
		align-items: center;
	}
	.decoTitle{}
	.decoTitle span{
		display: block;
		font-family: 'EB Garamond', serif;
		font-size: 40px;
		line-height: 1em;
		letter-spacing: .18em;
		font-weight: 300;
	}
	.decoTitle h2{
		color: #113D5C;
		font-size: 20px;
		font-weight: 500;
		line-height: 1.5em;
	}
	.deco p{
		padding-left: 4.1%;
		max-width: 508px;
	}
	.deco p:not(:first-child) {
		margin-top: 1.2em;
	}
	.deco .button_common{
		margin-top: 5.8%;
	}
	.deco .button_common a{
		margin-left: inherit;
		padding-left: 65px;
	}
}




/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.deco{
		padding: 7vw 4.6vw;
		background:url("https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/deco_bc.png") no-repeat center / cover;
	}
	.decoTitle{}
	.decoTitle span{
		display: block;
		font-family: 'EB Garamond', serif;
		font-size: 8vw;
		line-height: .9em;
		letter-spacing: .2em;
		font-weight: 300;
	}
	.decoTitle h2{
		color: #113D5C;
		font-size: 4vw;
		font-weight: 500;
	}
	.deco p{
		padding-left: 5vw;
	}
	.deco .button_common{
		margin-top: 5.8vw;
	}
	

	
}


/* ================================================================================

	予約

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#topReserve{
		background: url(../img/site_bg.jpg) repeat top center;
		color:#FFFFFF;
		padding-top: 92px;
		padding-bottom: 119px;
	}
	

}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#topReserve{
		background: url(../img/site_bg.jpg) repeat top center;
		color:#FFFFFF;
		    padding-top: 12vw;
		padding-bottom: 12vw;
	}
	
	.reserve_title {
		text-align: center;
	}
	.reserve_title span{
		display: block;
		font-size: 8vw;
		font-family: 'EB Garamond', serif;
		line-height: .9em;
		letter-spacing: .2em;
	}
	.reserve_title h2{
		font-size: 4vw;
		font-weight: 400;
	}
	
	.reserve_title::after{
		content: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/reserveTitle_icon.png');
		display: block;
		margin-top: 2vw;
		margin-left: auto;
		margin-right: auto;
	}
	
	.reserve_tel{
		text-align: center;
	}
	.reserve_tel a{
		color: #FFFFFF;
		font-size: 8vw;
		line-height: 1.2em;
	}
	
	.reserve_tel p{
		margin-top: 0;
	}
	
	.reserve_exp{
		text-align: center;
	}
	.reserve_exp p{
		line-height: 1.45em!important;
	}
	
	#sns_area{
		margin-top: 6vw;
	}
	
	#sns_area .elementor-column:not(:first-of-type){
		margin-top: 7vw;
	}
	.snsBanner{ 
		box-shadow: 1vw 1vw 5vw #000E15;
	}

	
}


/* ================================================================================

	アクセス

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
	#accsee_area{
		margin-top: 90px;
		padding-top: 75px;
		position: relative;
	}
	#accsee_area::before{
		content: "";
		position: absolute;
		top:0;
		left:50%;
		width: 94%;
		border-top: 1px solid #FFFFFF;
		transform: translateX(-50%);
	}
	#accsee_area .elementor-widget-wrap{
		display: flex;
	}
	
	#accsee_area .elementor-widget-wrap .access_info{
		width: 47.2%;
	}
	
	#accsee_area .elementor-widget-wrap .access_map{
		width: 52.8%;
	}
	
	#accsee_area .decoTitle h2{
		color: #FFFFFF;
	}
	#accsee_area p:not(:first-child) {
		 margin-top: 1.2em;
		 font-size: 18px;
	}
	#accsee_area dl{
		font-size: 18px;
		display: flex;
		flex-wrap: wrap;
		margin-top: 1.25em;
		line-height: 1.62em;
	}
	#accsee_area dl dt{
		width: 5em;
	}
	#accsee_area dl dd{
		width: calc(100% - 5em);
	}
	
	
	#accsee_area .elementor-widget-google_maps iframe{
		 height: 289px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
	#accsee_area{
		margin-top: 45px;
		padding-top: 35px;
		position: relative;
	}
	#accsee_area::before{
		content: "";
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		border-top: 1px solid #FFFFFF;
	}

	
	#accsee_area .decoTitle h2{
		color: #FFFFFF;
	}
	#accsee_area p:not(:first-child) {
		 margin-top: 0.8em;
		 font-size: 18px;
	}
	#accsee_area dl{

		display: flex;
		flex-wrap: wrap;
	}
	#accsee_area dl dt{
		width: 6em;
	}
	#accsee_area dl dd{
		width: calc(100% - 6em);
	}
	
	#accsee_area .elementor-widget-wrap .access_map{
		height: 90vw;
	}
	
	#accsee_area .access_info,#accsee_area .access_map{
		margin-top: 5vw;
	}
	
}

/* ================================================================================

	Instagram

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#instagram_area{ 
		padding-top: 108px;
		padding-bottom: 124px;
	}
	
	#instagram_area h2{
		font-size:40px;
		font-family: 'EB Garamond', serif;
		letter-spacing: .2em;
		text-align: center;
		margin-bottom: 96px;
		font-weight: 400;
	}
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#instagram_area{ 
		padding-top: 13vw;
		padding-bottom: 13vw;
	}
	
	#instagram_area h2{
		font-size:7vw;
		font-family: 'EB Garamond', serif;
		letter-spacing: .15em;
		text-align: center;
		margin-bottom: 7vw;
		font-weight: 400;
	}
}


/* ================================================================================

	〇〇

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
}