@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Hannari';
        src: url('../font/Hannari.otf');
}
@font-face {
    font-family: 'sawarabi';
        src: url('../font/sawarabi-mincho-medium.ttf');
}

#about_lino {
	background-image: url(../first/images/how_to_img01.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: none;
	margin: 0 0 5%;
}
#about_lino .cnt_box {
	max-width: 800px ;
	background: rgba(55,30,16,0.82);
	text-align: center;
	padding: 5% 2%;
	font-family:"Hannari","游明朝","sawarabi",  "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; 
}
#about_lino .cnt_box .ttl_img {
	max-width: 385px;
	margin: 0 auto 5%;
	width: 80%;
}
#about_lino .cnt_box p {
	font-size: 100%;
	color: #fff;
	margin: 0 0 1em;
	line-height: 200%;
}
h2.ttl_line {
	color: #462a19;
	font-size: 437.5%;
	border-bottom: 5px solid #462a19;
	line-height: 120%;
	display: inline-block;
	margin: 0 0 2%;
	font-family: 'Arima Madurai', Arial, sans-serif;
	letter-spacing: 5px;
	position: absolute;
	z-index: 100;

}
.cnt_box02 {
	max-width: 700px;
	width: 39%;
	text-align: center;
	overflow: hidden;
}
.cnt_box02 p {
	font-size: 100%;
	line-height: 180%;
	font-family:"Hannari","游明朝", "sawarabi", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; 
	letter-spacing: -1px;
}

#hyperknife_contents {
	background-image: url(../first/images/how_to_img02.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 61.1% auto;
	overflow: hidden;
	position: relative;
	margin: 0 0 5%;
}

#hyperknife_contents h2.ttl_line {
	left: 50.2%;
	top: 6%;
	padding: 0 10px;
}
#hyperknife_contents .cnt_box02 {
	float: right;
	padding: 11% 1% 6.2%;
}
#hyperknife_contents .ttl_box {
	margin:0 auto 3%;
	max-width: 294px;
}
#first_contetns .ttl_txt {
	font-family: "Hannari","游明朝", "sawarabi", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	color: #5b401c;
	font-size: 137.5%;
	font-weight: bold;
	text-align: center;
}
#first_contetns .ttl_txt:before {
	content: url(../first/images/ttl_icon.png);
	display: inline-block;
	margin: 0 5px 0 0;
	vertical-align: middle;
}
#salon_contents {
	background-image: url(../first/images/how_to_img03.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 61.1% auto;
	overflow: hidden;
	position: relative;
	margin: 0 0 5%;
}

#salon_contents h2.ttl_line {
	left: 30.3%;
	top: 6%;
	padding: 0 10px;
}
#salon_contents .cnt_box02 {
	float: left;
	padding: 11% 1% 6.3%;
}
#salon_contents .cnt_box02 p {
	
}
#salon_contents .ttl_box {
	margin:0 auto 3%;
	max-width: 294px;
}

#facial_contents {
	background-image: url(../first/images/how_to_img04.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 61.1% auto;
	overflow: hidden;
	position: relative;
	margin: 0 0 5%;
}

#facial_contents h2.ttl_line {
	left: 55.3%;
	top: 6%;
	padding: 0 10px;
}
#facial_contents .cnt_box02 {
	float: right;
	padding: 10% 1% 3%;
}
#facial_contents .ttl_box {
	margin: 0 auto 3%;
	max-width: 393px;
}


#body_contents {
	background-image: url(../first/images/how_to_img05.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 61.1% auto;
	overflow: hidden;
	position: relative;
	margin: 0 0 5%;
}

#body_contents h2.ttl_line {
	left: 31%;
	top: 6%;
	padding: 0 10px;
}
#body_contents .cnt_box02 {
	float: left;
	padding: 10% 1% 3.5%;
}
#body_contents .ttl_box {
	margin: 0 auto 5%;
	max-width: 427px;
}
a.more_btn{
	display: block;
	max-width: 260px;
	background: #3a1b14;
	margin: 5% auto 0;
	color: #fff !important;
	line-height: 50px;
	text-decoration: none !important;
	font-family: 'Arima Madurai', Arial, sans-serif;
}

@media screen and (max-width: 1280px) {
#about_lino {
	background-position: right top;
}
#about_lino .cnt_box {
	max-width: none ;
	width: 100%;
	padding: 5% 6% 3%;
}
h2.ttl_line {
	font-size: 287%;
	border-bottom: 3px solid #462a19;
}
.cnt_box02 {
	max-width: none;
	width: 50%;

}
#hyperknife_contents {
	background-size: 50% auto;
}
#hyperknife_contents h2.ttl_line {
	left: 40%;
	top: 6%;
	padding: 0 10px;
}
#hyperknife_contents .cnt_box02 {
	float: right;
	padding: 10% 2% 0%;
}
#hyperknife_contents .ttl_img {
	margin:0 auto 5%;
	max-width: 294px;
}
#salon_contents {
	background-size: 50% auto;
}

#salon_contents h2.ttl_line {
	left: 41.5%;
	top: 0%;
	padding: 0 10px;
}
#salon_contents .cnt_box02 {
	float: left;
	padding: 10% 2% 0%;
}
#facial_contents {
	background-size: 50% auto;
}

#facial_contents h2.ttl_line {
	left: 44%;
	top: 6%;
	padding: 0 10px;
}
#facial_contents .cnt_box02 {
	float: right;
	padding: 10% 2% 0%;
}
#body_contents {
	background-size: 50% auto;
}

#body_contents h2.ttl_line {
	left: 42.2%;
	top: 6%;
	padding: 0 10px;
}
#body_contents .cnt_box02 {
	float: left;
	padding: 10% 2% 0%;
}

}
@media screen and (max-width: 860px) {
.cnt_box02 {
	max-width: none;
	width: 92%;
	margin: 0% auto;
	float: none;
}
h2.ttl_line {
	font-size: 287%;
	border-bottom: 3px solid #462a19;
	position: static;
	margin: 0 0 3%;
}
#hyperknife_contents {
	text-align: center !important;
	background-position: center 70px;
	background-size: 100% auto;
	margin: 0 0 10%;
}

#hyperknife_contents .cnt_box02 {
	float: none;
	padding: 0% 2%;
}
#hyperknife_contents h2.ttl_line {
	left: 0%;
	top: 0%;
	padding: 0 10px;
	margin: 0 0 70%;
}
#hyperknife_contents .ttl_img {
	margin:0 auto 5%;
	max-width: 294px;
	width: 85%;
}
#salon_contents {
	text-align: center !important;
	background-position: center 70px;
	background-size: 100% auto;
	margin: 0 0 10%;
}


#salon_contents .cnt_box02 {
	float: none;
	padding: 0% 2%;
}
#salon_contents h2.ttl_line {
	left: 0%;
	top: 0%;
	padding: 0 10px;
	margin: 0 0 70%;
}

#salon_contents .ttl_img {
	margin:0 auto 5%;
	max-width: 294px;
	width: 75%;
}
#facial_contents {
	text-align: center !important;
	background-position: center 70px;
	background-size: 100% auto;
	margin: 0 0 10%;
}

#facial_contents h2.ttl_line {
	margin: 0 auto 70%;
}
#facial_contents .cnt_box02 {
	float: none;
	padding: 0% 2%;
}
#body_contents {
	text-align: center !important;
	background-position: center 70px;
	background-size: 100% auto;
	margin: 0 0 10%;
}

#body_contents .cnt_box02 {
	float: none;
	padding: 0% 2%;
}
#body_contents h2.ttl_line {
	left: 0%;
	top: 0%;
	padding: 0 10px;
	margin: 0 0 70%;
}
a.more_btn{
	display: block;
	max-width: none;
	width: 50%;
}

}
@media screen and (max-width: 480px) {
#about_lino .cnt_box p {font-size: 87.5%;	letter-spacing: -1px}
h2.ttl_line {font-size: 187.5%;margin: 0 0 3%;}
.cnt_box02 p {font-size: 14px;line-height: 180%;}
#first_contetns .ttl_txt {font-size: 125%;}
#hyperknife_contents {background-position: center 50px;}
#hyperknife_contents .cnt_box02 {padding: 0% 3%;}
#hyperknife_contents .cnt_box02 p { letter-spacing: -1px;}
#hyperknife_contents h2.ttl_line {padding: 0 10px;margin: 0 0 78%;}
#salon_contents {background-position: center 50px;}
#salon_contents .cnt_box02 {padding: 0% 3%;}
#salon_contents .cnt_box02 p { letter-spacing: -2px;}
#salon_contents h2.ttl_line {padding: 0 10px;margin: 0 0 78%;}
#facial_contents {background-position: center 50px;}
#facial_contents h2.ttl_line {margin:0 auto 78%;}
#facial_contents .cnt_box02 {float: none;padding: 0% 3%;}
#facial_contents .cnt_box02 p { letter-spacing: -2px;}
#body_contents {background-position: center 50px;}
#body_contents .cnt_box02 {padding: 0% 3%;}
#body_contents .cnt_box02 p { letter-spacing: -2px;}
#body_contents h2.ttl_line {padding: 0 10px;margin: 0 0 78%;}
a.more_btn{	display: block;max-width: none;width: 80%;}
}
@media screen and (max-width: 414px) {
#about_lino .cnt_box {padding: 5% 7% 3%;}
#about_lino .cnt_box p {font-size: 14px;	letter-spacing: -1px}
#about_lino .cnt_box p span { display: block;}
.cnt_box02 p {font-size: 15px;line-height: 180%;}
.cnt_box02 p span{display: block;}
#first_contetns .ttl_txt {font-size: 112.5%;}
#hyperknife_contents .cnt_box02 {padding: 0% 3%;}
#hyperknife_contents .cnt_box02 p { letter-spacing: 0px;}
#hyperknife_contents h2.ttl_line {padding: 0 10px;margin: 0 0 80%;}

#salon_contents {background-position: center 50px;}
#salon_contents .cnt_box02 {padding: 0% 3%;}
#salon_contents .cnt_box02 p { letter-spacing: 0px;}
#salon_contents h2.ttl_line {padding: 0 10px;margin: 0 0 80%;}
#facial_contents h2.ttl_line {margin:0 auto 80%;}
#facial_contents .cnt_box02 {float: none;padding: 0% 3%;}
#facial_contents .cnt_box02 p { letter-spacing: 0px;}
#body_contents .cnt_box02 {padding: 0% 3%;}
#body_contents .cnt_box02 p { letter-spacing: 0px;}
#body_contents h2.ttl_line {padding: 0 10px;margin: 0 0 80%;}

}
@media screen and (max-width: 360px) {
#about_lino .cnt_box {padding: 5% 5%;}
#about_lino .cnt_box p {font-size: 15px;letter-spacing: 0px; line-height: 160%;}
#hyperknife_contents .cnt_box02 {padding: 0% 3%;}
#hyperknife_contents .cnt_box02 p { letter-spacing: -1px;}
#salon_contents .cnt_box02 {padding: 0% 3%;}
#salon_contents .cnt_box02 p { letter-spacing: -1px;}
#facial_contents h2.ttl_line {margin: 0 0 78%;}
#facial_contents .cnt_box02 {float: none;padding: 0% 3%;}
#facial_contents .cnt_box02 p { letter-spacing: -1px;padding: 0% 0%;}
#body_contents .cnt_box02 {padding: 0% 3%;}
#body_contents .cnt_box02 p { letter-spacing: 0px; word-break:break-all; }
#body_contents h2.ttl_line {padding: 0 10px;margin: 0 0 78%;}

}
.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}