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

/*scroll
---------------------------------------------*/
.scroll-line {
    font-family: 'Lato', sans-serif;
    display: block;
    position: absolute;
    bottom: 20px;
    left: 3%;
    padding-bottom: 220px;
    font-size: 12px;
    letter-spacing: 0.3em;
	z-index: 50;
	color: #383838;
	transition: .3s;
}
.scroll-line span {
    display: inline-block;
    transform: rotate(90deg);
}
.scroll-line:hover {
	opacity: .7;
}
.scroll-line:after {
    content: '';
    display: block;
    position: absolute;
    left: 49px;
	bottom: 30px;
    width: 1px;
	height: 110px;
    background-color: #888;
    animation-name: lineMove;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	z-index: 50;
}
@keyframes lineMove {
	0% {
		bottom: 130px;
		height: 30px;
	}
	20% {
		bottom: 0px;
		height: 130px;
	}
	40% {
		bottom: 0;
		height: 0px;
	}
	100% {
		bottom: 0;
		height: 0px;
	}
}

/** main
---------------------------------------------------------------------------------*/
.top_header{
	background-image: url("../img/common/bg_01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
    background-position-y: 300px;
	padding-bottom: 70px;
	margin-bottom: 60px;
}
.main_wrapper{
	padding-top: 88px;
	position: relative;
}
.main{
	position: relative;
	width: 85%;
    margin: 0 0 0 auto;
}
.main_img{
}
.main p img{
	width: 100%;
}
.copy{
	position: absolute;
	width: 45%;
	left: 10%;
	top: 50%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}
.copy img{
	width: 100%;
	height: auto;
}
.salon_phlox{
	position: absolute;
	width: 60%;
	right: 0px;
	bottom: -20px;
}
.salon_phlox img{
	width: 100%;
	height: auto
}


/*news
---------------------------------------------*/
.news_wrapper{
	display: flex;

	align-items: center;
	width: 800px;
	margin: 0 auto;
	padding: 30px;
	border-top: solid 1px #888;
	border-bottom: solid 1px #888;
	margin-top: 70px;
}
.news_wrapper h2{
	padding: 10px 50px 10px 0;
	border-right: solid 1px #888;
	margin-right: 50px;
}
.news_box{
	display: flex;
	width: 820px;
	margin: 0 auto;
	margin-top: 100px;
}
.cms_box{
	width: 600px;
	margin-left: 90px;
}
.cms{
	width: 600px;
	height: 100px;
}
.news_readmore{
	width: 820px;
	margin: 0 auto;
	text-align: right;
	margin-bottom: 80px;
	height: 64px;
}


/** about phlox
---------------------------------------------------------------------------------*/
.about_wrapper{
	max-width: 1800px;
    margin: 0 auto;
}
.skin_clinic{
    display: block;
    width: 640px;
    height: auto;
    margin: 0 auto;
	margin-bottom: 70px;
}
.about_flex{
	display: flex;
	justify-content: center;
	margin-bottom: 130px;
}
.about_left{
	position: relative;
	width: 50%;
}
.about_us{
	text-align: right;
}
.about_us img{
	width: 100%;
	max-width: 460px;
	height: auto;
}
.calligraphy_about{
	position: absolute;
    width: 80%;
	min-width: 625px;
    left: 0;
    bottom: -20px;
}
.calligraphy_about img{
	width: 100%;
	height: auto;
}
.about_right{
	width: 50%;
}
.about_text_wrapper{
	margin-left: 50px;
    padding-right: 20px;
    width: auto;
    max-width: 440px;
    box-sizing: border-box;;
}
.about_text_wrapper>div p:first-child{
	padding-bottom: 15px;
}
.about_text_wrapper>div p:nth-child(2){
	padding-bottom: 35px;
}


/** special price
---------------------------------------------------------------------------------*/
.special_price_wrapper{
	background-color: #F8F4F5;
	margin: 0 20px;
	padding: 70px 0;
}
.special_price{
	width: 800px;
	margin: 0 auto;
}
.special_price h2{
	padding-bottom: 10px;
	border-bottom: solid 1px #707070;
	margin-bottom: 30px;
}
.special_price h2 span{
	display: inline-block;
	padding: 0 0 0 15px;
	margin: 0;
}
.special_price>p{
	padding-bottom: 30px;
}
.special_price_img{
	width: auto;
	height: 243px;
}
.special_price_flex{
	display: flex;
	margin-bottom: 20px;
	box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 20%);
}
.special_price_detail{
	background-color: #fff;
	padding: 34px 35px;
	height: 243px;
	box-sizing: border-box;
}
.course{
	font-size: 18px;
	font-weight: 400;
}
.course span{
	font-size: 14px;
	display: block;
	padding-bottom: 8px;
}
.course_flex{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 15px;
	border-bottom: solid 1px #707070;
	margin-bottom: 12px;
}
.price{
	line-height: 1em;
	font-size: 20px;
	font-weight: 500;
}
.price span{
	font-size: 12px;
	font-weight: normal;
}
.add_detail{
	display: inline-block!important;
	padding: 0!important;
}
.special_hair{
	font-weight: 500;
}
.special_hair span{
	font-weight: 400;
}


/** service
---------------------------------------------------------------------------------*/
.service_wrapper{
	background-image: url("../img/common/calligraphy_service.png");
	background-repeat: no-repeat;
	background-size: 550px auto;
	background-position: top 10px right 0;
	max-width: 1800px;
	margin: 0 auto;
}
.service{
	padding: 80px 0; 
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.service h2{
	padding-left: 10%;
}
.service_flex{
	display: flex;
	justify-content: space-between;
}
.service_flex a{
	color: #654C41;
	font-size: 18px;
	border-top: solid 1px #654C41;
	border-bottom: solid 1px #654C41;
	padding: 20px 0;
	text-align: center;
	margin: 15px 14px;
	position: relative;
	transition: .15s;
	width: 50%;
}

.service_flex a span{
	font-size: 12px;
	vertical-align: middle;
	padding-bottom: 3px;
	padding-left: 15px;
	display: inline-block;
}
.service_flex a::before,
.service_flex a::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  box-sizing: border-box;
}
.service_flex a:hover {
  color: #C32C71;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.service_flex a:hover::before,
.service_flex a:hover::after {
  width: 100%;
  height: 100%;
}
.service_flex a:hover::before {
  border-top-color: #C32C71;
  transition: width .35s;
}
.service_flex a:hover::after {
  border-bottom-color: #C32C71;
  transition: width .35s;
}


/** access
---------------------------------------------------------------------------------*/
.example{
	margin: 0 20px 80px 20px;
	box-sizing: border-box;
}
.example img{
	width: 100%;
	height: auto;
}
.access_wrapper{
	margin-bottom: 80px;
}
.access_02{
	text-align: right;
}
.access_02 img{
	width: 430px;
	height: auto;
}
.access_text{
	width: 260px;
	margin: 0 0 0 auto;
}
.access_text p{
	padding-bottom: 30px;
}
.access_detail{
	max-width: 900px;
	margin: 0 auto;
	background-image: url("../img/top/access_01.jpg");
	background-size: 64% auto;
	background-repeat: no-repeat;
	position: relative;
}
.top_access_btn{
	margin: 0;
	margin-bottom: 55px;
}
.access{
}
.calligraphy_access{
	position: absolute;
	left: -90px;
	bottom: 80px;
}
.calligraphy_access img{
	width: 470px;
	height: auto;
}


@media print, screen and (max-width: 880px) {
.main_wrapper {
    padding-top: 68px;
    position: relative;
}	

	
/*scroll
---------------------------------------------*/
.scroll-line {
	display: none
}
	
/** main
---------------------------------------------------------------------------------*/
.top_header{
    background-position-y: 180px;
	padding-bottom: 45px;
	margin-bottom: 45px;
}
.salon_phlox {
    position: absolute;
    width: 82%;
    right: 0px;
    bottom: -4%;
}	
.copy {
    position: absolute;
    width: 75%;
    right: 10%;
    bottom: 15%;
    transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
}
	
/*news
---------------------------------------------*/
.news_wrapper{
    display: block;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
    margin-top: 35px;
    box-sizing: border-box;
}
.news_wrapper h2{
	padding: 10px 0px 10px 0;
	border-right: none;
	margin-right: 0px;
}
.news_box{
	display: block;
	width: auto;
	margin: 0 auto;
	margin-top: 100px;
}
.cms_box{
	width: auto;
	margin-left: 90px;
}
.cms{
	width: 100%;
}
	
	
/** about phlox
---------------------------------------------------------------------------------*/
.skin_clinic{
    display: block;
    max-width: 640px;
    width: auto;
	margin-bottom: 65px;
	text-align: center;
}
.doc_support{
	max-width: 640px;
	width: 95%;
}	
.about_flex{
	display: block;
	max-width: 600px;
	margin: 0 auto;
	margin-bottom: 45px;
}
.about_left{
	position: relative;
	width: 100%;
}
.about_us{
	margin-bottom: 30px;
}
.about_us img{
	width: 85%;
	max-width: 460px;
	height: auto;
}
.calligraphy_about{
	position: absolute;
    width: 80%;
	min-width: 0;
    right: 0;
    top: -30px;
}
.calligraphy_about img{
	width: 100%;
	height: auto;
}
.about_right{
	width: 100%;
}
.about_text_wrapper{
	margin-left: 20px;
    padding-right: 20px;
    width: auto;
    max-width: 440px;
    box-sizing: border-box;;
}
.about_text_wrapper>div p:first-child{
	padding-bottom: 15px;
}
.about_text_wrapper>div p:nth-child(2){
	padding-bottom: 35px;
}
	
	
/** special price
---------------------------------------------------------------------------------*/
.special_price_wrapper{
	margin: 0;
	padding: 35px 15px;
}
.special_price{
	width: auto;
	margin: 0 auto;
	max-width: 600px;
}
.special_price h2{
	padding-bottom: 10px;
	margin-bottom: 30px;
}
.special_price h2 span{
	display: inline-block;
	padding: 0 0 0 15px;
	margin: 0;
}
.special_price>p{
	padding-bottom: 30px;
}
.special_price_img{
	width: 100%;
	height: auto;
}
.special_price_flex{
	display: block;
	margin-bottom: 20px;
}
.special_price_flex>p{
	border: solid 15px #fff;
}
.special_price_detail{
	padding: 5px 15px 20px 15px;
	height: auto;
}
.course{
	font-size: 18px;
	font-weight: 400;
	padding-bottom: 15px;
}
.course span{
	font-size: 14px;
	display: block;
	padding-bottom: 8px;
}
.course_flex{
	display: block;
	padding-bottom: 15px;
	border-bottom: solid 1px #707070;
	margin-bottom: 12px;
}
.price{
	line-height: 1em;
	font-size: 20px;
	font-weight: 500;
	text-align: right;
}
.price span{
	font-size: 12px;
	font-weight: normal;
}
.add_detail{
	display: inline-block!important;
	padding: 0!important;
}
.special_hair{
	font-weight: 500;
	padding-bottom: 0;
}
.special_hair span{
	font-weight: 400;
}
	
	
/** service
---------------------------------------------------------------------------------*/
.service_wrapper{
	background-size: 75% auto;
	background-position: top 5px right 0;
}
.service{
	padding: 80px 0 40px; 
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.service h2{
	padding-left: 10%;
}
.service_flex{
	display: block;
	margin: 0 25px;
}
.service_flex a{
	max-width: 500px;
	margin: 0 auto;
	color: #654C41;
	font-size: 18px;
	border-top: solid 1px #654C41;
	border-bottom: solid 1px #654C41;
	padding: 20px 0;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
	position: relative;
	transition: .15s;
	display: block;
}
.service_flex:first-child a{
	display: block;
	width: 100%;
}
.service_flex:last-child a{
	width: 100%;
}
.service_flex:last-child a:last-child{
	width: 100%;
	font-size: 15px;
}
.service_flex a span{
	font-size: 12px;
	vertical-align: middle;
	padding-bottom: 3px;
	padding-left: 15px;
	display: inline-block;
}


/** access
---------------------------------------------------------------------------------*/
.example{
	margin: 0 0px 40px 0px;
	box-sizing: border-box;
}
.example img{
	width: 100%;
	height: auto;
}
.access_wrapper{
	margin-bottom: 50px;
}
.access_02{
	width: 100%;
	display: block;
	margin: 0 0 0 auto;
	max-width: 900px;
    background-image: url(../img/top/access_01.jpg);
    background-size: 64% auto;
    background-repeat: no-repeat;
    position: relative;
}
.access_02 img{
	width: 45%;
	height: auto;
	padding-top: 35%;
}
.access_text{
	width: auto;
	margin: 0 0 0 15%;
}
.access_text p{
	padding-bottom: 40px;
}
.access_detail{
	background-size: 80% auto;
	background-image: none;
	}
.top_access_btn{
	margin: 0;
	margin-bottom: 55px;
}
.calligraphy_access{
	position: absolute;
	left: -10px;
	bottom: 0px;
}
.calligraphy_access img{
	width: 60%;
	height: auto;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}