@charset "utf-8";
/* CSS Document */

@media screen and (min-width: 768px) {
	
.p1{ background: url(../img/top/background_img2.png) center top no-repeat; padding-bottom: 448px; }
.p2{ background: url(../img/top/background_img3.png) center top no-repeat; padding-bottom: 532px; }
.p3{ background: url(../img/top/background_img4.png) center top no-repeat; padding-bottom: 532px; }
.p4{ background: url(../img/top/background_img5.jpg) center top no-repeat; padding-bottom: 532px; }
.parallax-box{ height: auto; background-attachment: fixed; background-size: cover; clear: both; }

.gree{ width: 900px; margin: 0 auto;}
.parallax-box__bg_w{ background: url(../img/common/mainbg.png) left top repeat-y; background-size: 100% auto; padding:50px 0;}
.parallax-box__bg_w.pb0{ padding-bottom: 0; }
.parallax-box__cacth{ font-weight: bold; font-size: 2.4rem; margin-bottom: 15px; }	
.parallax-box__heading{ font-weight: bold; font-size: 2.4rem; text-align: center;}
.parallax-box__txt{float: left; text-align: left; font-size: 1.8rem; margin: 0 0 15px 0; line-height: 1.8; width: 500px;}
.parallax-box__txt_a_c{ float: left; text-align: center; margin: 0 auto; width: 400px;}
.parallax-box__img{ float: left; margin: 0 0 15px 0; width: 400px;}
	
	
	
/* mainArea */
.mainArea{ position: relative; min-width: 980px; line-height: 1.4; }
.main-img{width: 100%; height: auto;}
.mainArea-txt01, .mainArea-txt02, .mainArea-txt03, .mainArea-txt04{ position: absolute; }
.mainArea-txt01{ top:16px; right: 20px; font-size: 3.2rem; text-indent: -1.5em; }
.mainArea-txt01__fontbig{ font-size: 4.8rem; }
.mainArea-txt02{ bottom: 55px; left: 400px; font-size: 7.1rem; }
.mainArea-txt03{ bottom: 140px; left: 410px; font-size: 1.6rem; letter-spacing: 3.7em; letter-spacing: 80px; }
.mainArea-txt04{ bottom: 28px; left: 308px; font-size: 2.3rem; }

/* news */
.news-wrap{}
.news-list{ list-style: none; display: table; width: 100%; padding: 30px 0; border-bottom: 1px dotted #000;}
.news-list:first-child{ padding-top: 0; }
.news-list:last-child{ border-bottom: none; }
.news-list__date{ display: table-cell;  width: 8em; font-size: 2.2rem; padding-right: 20px; }
.news-list__txt{ font-size: 1.6rem; line-height: 1.8; }
.news-list__txt_head{ font-size: 2.2rem;  margin-bottom: 50px;}

/* Treatment Program */
.box01{ width: 500px; }
.box02{ width: 480px; }
.h3-title{ text-align: center; font-size: 5.1rem; font-weight: normal; margin-bottom: 10px; }
.tp{ margin-bottom: 50px; }
.tp__txt01{ font-size: 1.6rem; line-height: 1.8; width: 460px; margin: 0 auto 15px; }
/*.menu-box01{ float: right; }
.menu-box02{ float: left; }*/
	
.collbox1{text-align: center;}
.collbox1 img{margin: 20px;}
.collbox2{text-align: center;}
.collbox2 img{margin: 20px;}
.collbox3{text-align: center;}
.collbox3 img{margin: 20px;}
	
	
/* outlet */
.h4-title{ font-size: 2.2rem; font-weight: bold; margin-bottom: 20px; }
.outlet_box{ text-align: center; margin-bottom: 30px;　}

/*acsses*/
.h5-title{ text-align: center; font-size: 2.0rem; font-weight: bold; margin-bottom: 10px; }
.h6-title{ font-size: 1.0rem; margin-bottom: 8px; }

/*footer*/
.footer-bg_p{background-color: #46195a; padding: 20px; }
.txt_w{color: #fff; text-align: center; height: 50px;}
	
.reservation{ width: 106px; text-align: center; font-size: 1.6rem; border: 1px solid #000; border-radius:15px; padding: 38px 0; float:left; }
.reservation-detail{ float:right; width: 312px; }
.tel::before{ display: inline-block; content: ""; background:url(../img/common/icon_tel.gif) left bottom no-repeat; background-size: 44px 28px; margin-right: 7px; width: 44px; height: 28px;}
.tel{ font-size: 40px; line-height: 1.4; }
.reservation-detail__txt{ font-size:1.3rem; margin-bottom: 13px; }
.reservation-detail__btn{ font-size:1.4rem; text-align: center; color: #fff; background:#46195a url(../img/common/arrow_w_right.png) right 16px center no-repeat; display: block; line-height:60px;}
.reservation-detail__btn:hover{ background:#46195a url(../img/common/arrow_w_right.png) right 12px center no-repeat; transition: 0.3s; }
#map_custmomize{ margin-bottom: 20px; }
.access__txt{ font-size: 1.6rem; float: left; line-height: 1.2;}
.access__btn{ font-size:1.4rem; text-align: center; color: #fff; background:#46195a url(../img/common/arrow_w_right.png) right 16px center no-repeat; display: block; line-height:60px; width: 312px;}
.access__btn:hover{ background:#46195a url(../img/common/arrow_w_right.png) right 12px center no-repeat; transition: 0.3s; }
/*インスタグラム*/
#instafeed .insta-img{ float: left; margin-right: 34px; margin-bottom: 34px; width: 303px; display: block; }
#instafeed .insta-img:nth-child(3n){ margin-right: 0;}	
#instafeed .insta-img img { width: 100%; }

	
#wp-photo .wp-photo-img{ float: left; margin-right: calc(100% * 34 / 980); margin-bottom: 34px; width:calc(100% * 303 / 980); display: block; }
#wp-photo .wp-photo-img:nth-child(3n){ margin-right: 0;}	
#wp-photo .wp-photo-img img { width: 100%; }	
.popup{ padding: 20px; }	
.popup .popup-img{ text-align: center;}
.popup .popup-img img{ max-width: 100%; }
.popup-txt{ font-size: 14px; margin-top: 15px; }
	
}

@media screen and (max-width: 767px) { 


.parallax-box{ height: auto; background-attachment: fixed; background-size: cover; clear: both; }
.parallax-box__bg_w{ background: url(../img/sp/common/mainbg.png) left top no-repeat; background-size: 100% auto; padding:30px 10px; }
.parallax-box__bg_w2{background-size: 100% auto; padding:50px 0; }
.parallax-box__bg_w.pb0{ padding:30px 10px 0; }
.parallax-box__heading{ font-weight: bold; font-size: 3.4rem; text-align: center;}
.parallax-box__txt{ float: none; font-size: 3.4rem; margin-bottom: 15px; line-height: 1.8; }
.parallax-box__txt_a_c{ text-align: center; margin: 0 auto !important;}
.parallax-box__img{ float: none; max-width: 100%;}
	
/* mainArea */
.mainArea{}
.main-img{ width: 100%; height: 100%;}

/* news */
.news-wrap{}
.news-list{ list-style: none; padding: 8px 0; border-bottom: 1px dotted #000; }
.news-list:first-child{ padding-top: 0; }
.news-list:last-child{ border-bottom: none; }
.news-list__date{ text-align: center; font-size: 3.6rem; padding-right: 20px; }
.news-list__txt{ text-align: center; font-size: 2.4rem; line-height: 1.8; }
.news-list__txt_head{ font-size: 3rem; margin-bottom: 5%;}

/* Treatment Program */
.h3-title{ text-align: center; font-size: 5.9rem; font-weight: normal; margin-bottom: 10px; }
.tp{ margin-bottom: 25px; }
.tp__txt01{ font-size: 2.4rem; line-height: 1.8; margin-bottom: 10px; }
.menu-box01,.menu-box02{ text-align: center; }
.box02{ margin-bottom: 10px; }
	
/* collection */
/*.salon-img{ text-align: center; }*/
.h4-title{ font-size: 3rem; font-weight: bold; margin-bottom: 10px; }
.collection_txt{ font-size: 3.4rem; margin-bottom: 15px; }
.reservation{ text-align: center; font-size: 2.4rem; border: 1px solid #000; border-radius:10px; line-height: 30px; margin-bottom: 10px; }
.reservation-detail{ width: 312px; }
.tel::before{ display: inline-block; content: ""; background: url(../img/common/icon_tel.gif) left bottom no-repeat ; width: 27px; height: 17px;  background-size:27px 17px;  margin-right: 7px;}
.tel{ font-size: 4.8rem; line-height: 1.4; }
.reservation-detail__txt{ font-size:2.2rem; margin-bottom: 13px; }
.reservation-detail__btn{ width:180px;  font-size:2.2rem; text-align: center; color: #fff; background:#46195a url(../img/common/arrow_w_right.png) right 8px center no-repeat; background-size: 6px 11px; display: block; line-height:47px; margin-bottom:15px;}
#map_custmomize{ margin:0 0 20px; }
.access{ padding: 0 10px; }
.access__txt{ font-size: 2.4rem; line-height: 1.2; margin-bottom: 10px;}
.access__btn{ width:180px;  font-size:2.2rem; text-align: center; color: #fff; background:#46195a url(../img/common/arrow_w_right.png) right 8px center no-repeat; background-size: 6px 11px; display: block; line-height:47px;}
	
#wp-photo .wp-photo-img{ float:left; width:calc(50% - 20px); margin: 0 10px 20px; }
}

/* outlet */
.h4-title{ font-size: 3.2rem; font-weight: bold;}
.outlet_box{ text-align: center; margin-bottom: 45px;}

/*acsses*/
.h5-title{ text-align: center; font-size: 4.1rem; font-weight: bold; margin-bottom: 10px; }
.h6-title{ font-size: 3.0rem; margin-bottom: 8px;}


/*footer*/
.footer-bg_p{background-color: #46195a; padding: 20px; }
.txt_w{color: #fff; text-align: center; height: 50px;}

/*インスタグラム*/
#instafeed .insta-img{ display: block; margin-bottom: 20px; }
#instafeed .insta-img img { width: 100%; }

#wp-photo .wp-photo-img{ display: block; }
#wp-photo .wp-photo-img img { width: 100%; }
.popup{ padding: 20px; }	
.popup .popup-img{ text-align: center;}
.popup .popup-img img{ max-width: 100%; }
.popup-txt{ font-size: 14px; margin-top: 15px; }

.mainArea{
	background:url("./img/top/background_img1_3.jpg?20220824") center center/cover no-repeat;
	height:calc(100vw * 586 / 1200)
}
.mainArea2{ position:relative; }
.mainArea2 .bg{
	background:url("../img/top/background_img1_4.jpg") center center/cover no-repeat;
	height:calc(100vw * 586 / 1200);
}

.mainArea2 .t._1{ font-size:calc(100vw / 1200 * 35); letter-spacing:0.127em; position:absolute; left:calc(100vw / 1200 * 342); top:calc(100vw / 1200 * 418); }
.mainArea2 .t._2{ font-size:calc(100vw / 1200 * 60); letter-spacing:-0.01em; position:absolute; left:calc(100vw / 1200 * 331); top:calc(100vw / 1200 * 467); }

.mainArea2 .t span{ display:block; position:relative; overflow:hidden; color:#FFFFFF; }
.mainArea2 .t span:after,
.mainArea2 .t span:before{ content:attr(data-t); position:absolute; overflow:hidden; background-color:rgba(34, 34, 34, 0); color:#FFFFFF; clip:rect(0, 900px, 0, 0); white-space:nowrap; }
.mainArea2 .t span:before{ left:-1px; top:1px; animation:noise1 3s linear infinite alternate-reverse; }
.mainArea2 .t span:after { left:1px; top:-1px; animation:noise2 2s linear infinite alternate-reverse; }
@keyframes noise1{
	0%  { clip:rect(23px, 9999px, 58px, 0); }
	5%  { clip:rect(52px, 9999px, 82px, 0); }
	10% { clip:rect(91px, 9999px, 79px, 0); }
	15% { clip:rect(99px, 9999px, 18px, 0); }
	20% { clip:rect(76px, 9999px, 41px, 0); }
	25% { clip:rect(35px, 9999px, 52px, 0) ;}
	30% { clip:rect(85px, 9999px, 78px, 0); }
	35% { clip:rect(91px, 9999px, 47px, 0); }
	40% { clip:rect(97px, 9999px, 73px, 0); }
	45% { clip:rect(48px, 9999px, 61px, 0); }
	50% { clip:rect(56px, 9999px, 64px, 0); }
	55% { clip:rect(75px, 9999px, 6px, 0); }
	60% { clip:rect(98px, 9999px, 66px, 0); }
	65% { clip:rect(87px, 9999px, 60px, 0); }
	70% { clip:rect(48px, 9999px, 23px, 0); }
	75% { clip:rect(25px, 9999px, 88px, 0); }
	80% { clip:rect(22px, 9999px, 22px, 0); }
	85% { clip:rect(62px, 9999px, 13px, 0); }
	90% { clip:rect(95px, 9999px, 5px, 0); }
	95% { clip:rect(91px, 9999px, 9px, 0); }
	100%{ clip:rect(11px, 9999px, 6px, 0); }
}
@keyframes noise2{
	0%  { clip:rect(23px, 9999px, 71px, 0); }
	5%  { clip:rect(74px, 9999px, 77px, 0); }
	10% { clip:rect(90px, 9999px, 11px, 0); }
	15% { clip:rect(22px, 9999px, 67px, 0); }
	20% { clip:rect(3px, 9999px, 5px, 0); }
	25% { clip:rect(96px, 9999px, 21px, 0); }
	30% { clip:rect(93px, 9999px, 9px, 0); }
	35% { clip:rect(85px, 9999px, 79px, 0); }
	40% { clip:rect(85px, 9999px, 91px, 0); }
	45% { clip:rect(4px, 9999px, 87px, 0); }
	50% { clip:rect(49px, 9999px, 53px, 0); }
	55% { clip:rect(22px, 9999px, 69px, 0); }
	60% { clip:rect(33px, 9999px, 67px, 0); }
	65% { clip:rect(78px, 9999px, 24px, 0); }
	70% { clip:rect(85px, 9999px, 38px, 0); }
	75% { clip:rect(24px, 9999px, 88px, 0); }
	80% { clip:rect(84px, 9999px, 35px, 0); }
	85% { clip:rect(48px, 9999px, 55px, 0); }
	90% { clip:rect(97px, 9999px, 50px, 0); }
	95% { clip:rect(42px, 9999px, 11px, 0); }
	100%{ clip:rect(60px, 9999px, 38px, 0); }
}