@charset "UTF-8";
/******************
 * リセット
 ******************/
/*!
 YUI 3.18.1 (build f7e7bcb)
 Copyright 2014 Yahoo! Inc. All rights reserved.
 Licensed under the BSD License.
 http://yuilibrary.com/license/
 */
/*************************************************/
/*背景表示の後、文字が表示される動き*/
/*isPlay.js*/
/*トップページ*/
/* 1つ目*/
.box-tesuto-top {
    width: 87%;
	height: auto;
	overflow: hidden;
}
@media screen and (max-width:991px) {
.box-tesuto-top {
	margin: 30px 0 0 0px;
    width: 80%;
}
}
@media screen and (max-width:767px) {
.box-tesuto-top {
    width: 100%;
	margin: 20px 0 0 0px;
}
}
@media screen and (max-width:320px) {
.box-tesuto-top {
    width: 100%;
}
}
/* 2つ目*/
.box-tesuto-top1 {
	width: 71%;
    height: auto;
	overflow: hidden;
}
@media screen and (max-width:1366px) {
.box-tesuto-top1 {
	width: 67%;
}
}
@media screen and (max-width:1199px) {
.box-tesuto-top1 {
    width: 72%;
}
}
@media screen and (max-width:991px) {
.box-tesuto-top1 {
    width: 67%;
}
}
@media screen and (max-width:767px) {
.box-tesuto-top1 {
	width: 85%;
    margin: 0px;
}
}
@media screen and (max-width:320px) {
.box-tesuto-top1 {
    width: 100%;
}
}

.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	width: 100%;
    color: #000;
    background: #ffaa23;
	font-size: 1.7vw;
	line-height: 1.943;
    padding: 0 10px;
}
@media screen and (max-width:991px) {
.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	font-size: 17px;
}
}
@media screen and (max-width:767px) {
.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	font-size: 44px;
    background: #ffcd1f;
}
}
@media screen and (max-width:576px) {
.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	font-size: 32px;
}
}
@media screen and (max-width:425px) {
.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	font-size: 22px;
}
}
@media screen and (max-width:411px) {
.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	font-size: 20px;
}
}
@media screen and (max-width:375px) {
.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	font-size: 18px;
}
}
@media screen and (max-width:320px) {
.box-tesuto-top .boxInner1,.box-tesuto-top1 .boxInner1{
	font-size: 15px;
}
}
.isPlay1 {
  animation-name: play;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
  
.isPlay1:before {
  animation-name: maskOut;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #ffaa23;
}
@media screen and (max-width:767px) {
.isPlay1:before {
  background:#ffcd1f;
}
}

@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}
/*カリナンは脱毛のプロ集団が認めたマシンです。*/
/* 1つ目*/
.box-tesuto {
    position: absolute;
    height: auto;
    font-size: 29px;
    line-height: 1.943;
    margin-top: -390px;
	overflow: hidden;
    margin-left: 400px;
	color: #ffffff;
	mix-blend-mode: multiply;
    z-index: 2;
}
@media screen and (max-width:1366px) {
.box-tesuto {
    width: 48%;
}
}
@media screen and (max-width:1199px) {
.box-tesuto {
    margin-top: -333px;
	margin-left: 360px;
}
}
@media screen and (max-width:1024px) {
.box-tesuto {
    margin-left: 375px;
    width: 54%;
}
}
@media screen and (max-width:991px) {
.box-tesuto {
    margin-top: -280px;
    margin-left: 289px;
    margin-right: 50px;
    width: 50%;
}
}
@media screen and (max-width:767px) {
.box-tesuto {
    margin-top: -48px;
    margin-left: 0px;
    position: static;
    margin-right: 0px;
     width: 100%;
}
}
.box-tesuto3_3 {
    position: absolute;
    height: auto;
    font-size: 29px;
    line-height: 1.943;
    margin-top: -390px;
	overflow: hidden;
    margin-left: 400px;
	color: #ffffff;
	mix-blend-mode: multiply;
    z-index: 2;
}
@media screen and (max-width:1366px) {
.box-tesuto3_3 {
    margin-top: -420px;
	margin-left: 360px;
	width: 51%;
}
}
@media screen and (max-width:1199px) {
.box-tesuto3_3 {
    margin-top: -380px;
	margin-left: 360px;
	width: 50%;
}
}
@media screen and (max-width:1024px) {
.box-tesuto3_3 {
    margin-left: 375px;
}
}
@media screen and (max-width:991px) {
.box-tesuto3_3 {
	margin-top: -310px;
	margin-left: 280px;
    margin-right: 50px;
}
}
@media screen and (max-width:767px) {
.box-tesuto3_3 {
    margin-top: -68px;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    position: static;
}
}
@media screen and (max-width:425px) {
.box-tesuto3_3 {
    margin-top: -66px;
}
}
.boxInner{
	width: 100%;
    color: #ffffff;
    background-color: rgb(178,132,73,0.9);
    font-size: 29px;
	line-height: 1.943;
    padding: 0 15px;
    margin-top: 20px;
    text-align: center;
}
@media (max-width: 1366px){
.boxInner{
    font-size: 25px;
}
}
@media (max-width: 1199px){
.boxInner{
    font-size: 22px;
}
}
@media (max-width: 991px){
.boxInner{
    font-size: 18px;
    text-align: left;
}
}
@media (max-width: 767px){
.boxInner{
    font-size: 20px;
    line-height: 1.6rem;
    padding: 5px 10px;
}
}

.box-tesuto3 .boxInner,.box-tesuto4 .boxInner,.box-tesuto5 .boxInner,.box-tesuto6 .boxInner,.box-tesuto7 .boxInner,.box-tesuto8 .boxInner{
	width: 100%;
    color: #ffffff;
    background-color: rgb(178,132,73,0.9);
    font-size: 29px;
	line-height: 1.943;
    padding: 0 10px;
}
@media (max-width: 1366px){
.box-tesuto .boxInner,.box-tesuto2 .boxInner,.box-tesuto3 .boxInner,.box-tesuto4 .boxInner,.box-tesuto5 .boxInner,.box-tesuto6 .boxInner,.box-tesuto7 .boxInner,.box-tesuto8 .boxInner{
    font-size: 25px;
}
}
@media (max-width: 1199px){
.box-tesuto .boxInner,.box-tesuto2 .boxInner,.box-tesuto3 .boxInner,.box-tesuto4 .boxInner,.box-tesuto5 .boxInner,.box-tesuto6 .boxInner,.box-tesuto7 .boxInner,.box-tesuto8 .boxInner{
    font-size: 22px;
}
}
@media screen and (max-width:991px) {
.box-tesuto .boxInner,.box-tesuto2 .boxInner,.box-tesuto3 .boxInner,.box-tesuto4 .boxInner,.box-tesuto5 .boxInner,.box-tesuto6 .boxInner,.box-tesuto7 .boxInner,.box-tesuto8 .boxInner{
    font-size: 18px;
    padding: 0 20px;
    text-align: left;
}
}
@media screen and (max-width:576px) {
.box-tesuto .boxInner,.box-tesuto2 .boxInner,.box-tesuto3 .boxInner,.box-tesuto4 .boxInner,.box-tesuto5 .boxInner,.box-tesuto6 .boxInner,.box-tesuto7 .boxInner,.box-tesuto8 .boxInner{
    font-size: 20px;
    line-height: 1.6rem;
    padding: 5px 10px;
}
}
@media screen and (max-width:425px) {
.box-tesuto .boxInner,.box-tesuto3 .boxInner,.box-tesuto5 .boxInner,.box-tesuto7 .boxInner{
    margin-top: 0px;
}
}
@media screen and (max-width:425px) {
.box-tesuto2 .boxInner,.box-tesuto4 .boxInner,.box-tesuto6 .boxInner,.box-tesuto8 .boxInner{
    margin-top: 33px;
}
}

.isPlay {
  animation-name: play;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
  
.isPlay:before {
  animation-name: maskOut;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #b28449;
}

@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}

/*２つ目 横幅は、こちらのに変更*/
.box-tesuto2 {
	width: 66%;
	height: auto;
    overflow: hidden;
    position: relative;
    margin-top: 120px;
}
@media screen and (max-width:991px) {
.box-tesuto2 {
    width: 63%;
    margin-right: 0%;
    margin-left: 0px;
    margin-top: 130px;
}
}
@media screen and (max-width:767px) {
.box-tesuto2 {
	width: 100%;
	margin: 360px 0 0 0;
    z-index: 10;
}
}
@media screen and (max-width:425px) {
.box-tesuto2 {
    margin: 310px 0 0 0;
}
}
@media screen and (max-width:375px) {
.box-tesuto2 {
	width: 100%;
    margin: 280px 0 0 0;
}
}
@media screen and (max-width:360px) {
.box-tesuto2 {
    margin: 262px 0 0 0;
}
}
@media screen and (max-width:320px) {
.box-tesuto2 {
    margin: 240px 0 0 0;
}
}
@media screen and (max-width:991px) {
.box-tesuto2.box-tesuto2_6 {
    width: 50%;
}
}
@media screen and (max-width:767px) {
.box-tesuto2.box-tesuto2_6 {
    width: 100%;
    margin: 330px 0 0 0;
}
}
@media screen and (max-width:425px) {
.box-tesuto2.box-tesuto2_6 {
    margin: 300px 0 0 0;
}
}
@media screen and (max-width:375px) {
.box-tesuto2.box-tesuto2_6 {
    margin: 270px 0 0 0;
}
}
@media screen and (max-width:320px) {
.box-tesuto2.box-tesuto2_6 {
    margin: 230px 0 0 0;
}
}
.boxInner2{
    width: 100%;
	color: #ffffff;
    background-color: rgb(178,132,73,0.9);
    font-size: 29px;
	line-height: 1.943;
    padding: 0 15px;
    margin-top: 20px;
    z-index: 2;
    mix-blend-mode: multiply;
}
.box-tesuto3 {
	width: 66%;
	height: auto;
    overflow: hidden;
    position: relative;
    margin-top: 150px;
}
@media screen and (max-width:991px) {
.box-tesuto3 {
	width: 63%;
	margin-right: 0%;
    margin-left: 0px;
    margin-top: 150px;
}
}
@media screen and (max-width:767px) {
.box-tesuto3 {
	width: 100%;
    margin: 360px 0 0 0;
}
}
@media screen and (max-width:425px) {
.box-tesuto3 {
    margin: 320px 0 0 0;
}
}
@media screen and (max-width:375px) {
.box-tesuto3 {
	width: 100%;
    margin: 285px 0 0 0;
}
}
@media screen and (max-width:360px) {
.box-tesuto3 {
	margin: 270px 0 0 0;
}
}
@media screen and (max-width:320px) {
.box-tesuto3 {
	margin: 240px 0 0 0;
}
}
.boxInner2{
    width: 100%;
	color: #ffffff;
    background-color: rgb(178,132,73,0.9);
    font-size: 29px;
	line-height: 1.943;
    padding: 0 15px;
    margin-top: 20px;
    z-index: 2;
    mix-blend-mode: multiply;
}
@media screen and (max-width:1366px) {
.boxInner2{
	font-size: 25px;
}
}
@media screen and (max-width:1199px) {
.boxInner2{
	font-size: 22px;
}
}
@media screen and (max-width:991px) {
.boxInner2{
	font-size: 18px;
}
}
@media screen and (max-width:767px) {
.boxInner2{
    font-size: 20px;
    line-height: 1.6rem;
    padding: 5px 10px;
}
}
@media screen and (max-width:425px) {
.boxInner2{
    font-size: 20px;
    line-height: 1.6rem;
}
}
@media screen and (max-width:320px) {
.boxInner2{
    font-size: 19px;
    line-height: 1.6rem;
}
}
.isPlay2 {
  animation-name: play;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
  
.isPlay2:before {
  animation-name: maskOut;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #b28449;
}

@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}



/*追加*/
.li-left{
    position: relative;
/*    z-index: 1;*/
}
img.feature-c2-1img {
    margin-top: 100px;
}
img.con3_1_t {
    margin-left: 95px;
}
@media screen and (max-width:1366px) {
img.con3_1_t {
    margin-left: 0px;
    width: 60%;
	height: auto;
}
}
@media screen and (max-width:767px) {
img.con3_1_t {
    margin-left: 42%;
    width: 60%;
    height: auto;
    margin-top: 0px;
}
}
@media screen and (max-width:425px) {
img.con3_1_t {
    margin-left: 39%;
    margin-top: 28px;
    margin-bottom: 10px;
}
}
.li-right {
    position: absolute;
    left: 53%;
    margin-top: -200px;
	z-index: 1;
}
@media screen and (max-width:767px) {
.li-right {
    margin-top: -280px;
	left: 0%;
    z-index: 1;
}
}
@media screen and (max-width:425px) {
.li-right {
    margin-top: -220px;
}
}
@media screen and (max-width:375px) {
.li-right {
    margin-top: -186px;
}
}
@media screen and (max-width:360px) {
.li-right {
	margin-top: -175px;
}
}
@media screen and (max-width:320px) {
.li-right {
    margin-top: -146px;
}
}
.li-right2 {
    position: absolute;
    left: 53%;
    margin-top: -200px;
	z-index: 1;
}
@media screen and (max-width:767px) {
.li-right2 {
	margin-top: -497px;
	left: 10%;
    z-index: 1;
}
}
@media screen and (max-width:425px) {
.li-right2 {
    margin-top: -365px;
	left: 0%;
}
}
@media screen and (max-width:375px) {
.li-right2 {
   margin-top: -330px;
}
}
@media screen and (max-width:360px) {
.li-right2 {
   margin-top: -318px;
}
}
@media screen and (max-width:320px) {
.li-right2 {
   margin-top: -288px;
}
}
.li-left.li-left_3 {
	margin-top: 380px;
}
@media screen and (max-width:991px) {
.li-left.li-left_3 {
    margin-top: 260px;
}
}
@media screen and (max-width:767px) {
.li-left.li-left_3 {
    margin-top: 180px;
}
}
@media screen and (max-width:425px) {
.li-left.li-left_3 {
    margin-top: 160px;
	position: static;
}
}
@media screen and (max-width:425px) {
.li-left.li-left_3.li-left_3_a {
    margin-top: 220px;
}
}
.li-left.li-left_4 {
	margin-top: 380px;
}
@media screen and (max-width:991px) {
.li-left.li-left_4 {
    margin-top: 320px;
}
}
@media screen and (max-width:767px) {
.li-left.li-left_4 {
    margin-top: 190px;
}
}
@media screen and (max-width:425px) {
.li-left.li-left_4 {
	margin-top: 250px;
	position: static;
}
}
img.feature-c2-1img_3 {
    margin-top: 130px;
}
img.con3_1_t3 {
    position: relative;
    left: 65%;
}
@media screen and (max-width:1366px) {
img.con3_1_t3 {
    left: 68%;
    width: 29%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 10px;
}
}
@media screen and (max-width:425px) {
img.con3_1_t3 {
    margin-top: 42px;
    margin-bottom: 0px;
}
}
@media screen and (max-width:375px) {
img.con3_1_t3 {
    width: 27%;
}
}
@media screen and (max-width:1366px) {
img.con3_1_t5 {
    width: 60%;
    height: auto;
}
}
@media screen and (max-width:767px) {
img.con3_1_t5 {
    width: 82%;
    height: auto;
    margin-left: 16%;
}
}
@media screen and (max-width:425px) {
img.con3_1_t5 {
    margin-left: 16%;
    margin: 27px 0px 10px 16%;
}
}
@media screen and (max-width:375px) {
img.con3_1_t5 {
    margin: 27px 0px 10px 27%;
    width: 72%;
}
}