body{
  background: #fff;
}
img{
  max-width: 100%;
  vertical-align: bottom;
}
sup{
  font-size: 1em;
  vertical-align: inherit;
}
section .inner{
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}
.flex{
  display: -webkit-flex;
  display: flex;
}
header{
  height: 84px;
}
header h1{
}
header h1 img{
  width: 250px;
  padding: 16px 0;
}
@media(max-width:767px){
  header{
    display: flex;
    align-items: center;
    height: 12vw;
  }
  header .inner{
    margin: 0;
  }
  header h1{
    width: auto;
    text-align: left;
  }
  header h1 img{
    width: 40vw;
    padding: 0;
  }
}
#main{
  background: #fff;
  position: relative;
}
#main:after{
  content:"";
  display: block;
  width: 50%;
  height: 100%;
  background: #d1d1d1;
  position: absolute;
  right: 0;
  top:0;
  z-index: 0;
}
#main .inner{
  text-align: center;
  position: relative;
  z-index: 1;
}
#main h2{
  width: 43.75%;
  position: absolute;
  top:50%;
  left:0;
  transform: translate(0,-50%);
}
@media(max-width:767px){
  #main h2{
    width: 74.666666667vw;
    margin: 0 auto;
    top: 17.6vw;
    left: 50%;
    transform: translate(-50%,0);
  }
}
#main .btn{
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22.5%;
  max-width: 360px;
  height: 70px;
  color: #18739f;
  font-size: 1.2vw;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  line-height: 1;
  background: #fff;
  position: absolute;
  top: 72.666%;
  left: 18.5625%;
  z-index:10;
  border: 1px solid #18739f;
  box-sizing: border-box;
  padding-right: 30px;
}
#main .btn:after{
  content: url("../img/arrow.png");
  display: inline-block;
  width: 13px;
  height: 23px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
#main .btn:hover{
  opacity: 0.8;
}
@media(max-width:767px){
  #main .btn{
    position: relative;
    width: 89.333333333vw;
    height: 16vw;
    margin-top: 6vw;
    left: auto;
    font-size: 1.8rem;
    z-index:10;
  }
  #main .btn:after{
    right: 4vw;
  }
  #main:after{
    background: #fff;
  }
}

.esentaBg{
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(24,115,159,0.1) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(24,115,159,0.1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(24,115,159,0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a18739f',GradientType=0 );
}

#esentaIntro{
  padding: 0 30px;
  background: url("../img/bg.jpg") no-repeat center calc(50% + 100px)/cover;
}
#esentaIntro .inner{
  max-width: 1000px;
  text-align: center;
}
#esentaIntro .inner:first-child{
  padding-top: 90px;
  padding-bottom: 10px;
}
#esentaIntro p{
  font-size: 20px;
  line-height: 2.0;
  letter-spacing: 0.05em;
  text-align: center;
}
#esentaIntro .logoEsenta{
  display: inline-block;
  margin: 18px auto;
  font-weight: bold;
}
#esentaIntro .logoEsenta figcaption{
  margin-bottom: 0.75em;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: 0.44em;
  text-align: center;
}
#esentaIntro .esentaPackage{
  transform: translateY(-25px);
}
.esentaBanner a:hover{
  opacity: 0.75;
}
@media(max-width:767px){
  #esentaIntro{
    padding: 0;
    background: url("../img/bg.jpg") no-repeat center calc(50% + 29vw)/cover;
  }
  #esentaIntro .inner:first-child{
    height: 160vw;
    padding-top: 9.333333333vw;
    padding-bottom: 0;
  }
  #esentaIntro p{
    margin: -0.5em auto;
    font-size: 1.8rem;
  }
  #esentaIntro .esentaBanner{
    padding: 0 2.666666667vw;
  }
  .logoEsenta{
    width: 45.333333333vw;
  }
  #esentaIntro .logoEsenta{
    margin: 4vw auto 5vw;
  }
  #esentaIntro .logoEsenta figcaption{
    font-size: 1.2rem;
  }
  #esentaIntro .esentaPackage {
    transform: translateY(-3vw);
  }
}

#esentaFeature{
  padding: 0 30px;
}
#esentaFeature .inner{
  max-width: 1000px;
  padding: 150px 0 100px;
}
#esentaFeature h3{
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 80px;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1;
}
#esentaFeature h3 .logoEsenta{
  display: inline-block;
  margin-right: 5px;
  transform: translateY(-5px);
  text-align: center;
}
#esentaFeature .logoEsenta figcaption{
  margin-bottom: 0.75em;
  font-size: 16px;
}
#esentaFeature ul{
  justify-content: space-between;
  margin-bottom: 70px;
  font-size: 20px;
  font-weight: bold;
}
#esentaFeature ul li{
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  padding-top: calc(34% + 25px);
  text-align: center;
  position: relative;
}
#esentaFeature ul li:before{
  content:"";
  width: 100%;
  height: 0;
  padding-top: 113.333333333%;
  position: absolute;
  top: 0;
  left: 0;
}
#esentaFeature ul li.feature1:before{
  background: url("../img/feature1.png") no-repeat center/contain;
}
#esentaFeature ul li.feature2:before{
  background: url("../img/feature2.png") no-repeat center/contain;
}
#esentaFeature ul li.feature3:before{
  background: url("../img/feature3.png") no-repeat center/contain;
}
#esentaFeature .sup{
  font-size: 14px;
  text-align: right;
}

#esentaFeature .btn_area{
  text-align: center;
  margin: 40px auto;
}
#esentaFeature .btn{
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48%;
  max-width: 400px;
  height: 70px;
  color: #18739f;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  line-height: 1;
  background: #fff;
  position: relative;
  z-index:10;
  border: 1px solid #18739f;
  box-sizing: border-box;
}
#esentaFeature .btn:after{
  content: url("../img/arrow.png");
  display: inline-block;
  width: 13px;
  height: 23px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
#esentaFeature .btn:hover{
  opacity: 0.8;
}
@media(max-width:767px){
  #esentaFeature{
    padding: 0;
  }
  #esentaFeature .inner{
    padding: 20.8vw 0 16vw;
  }
  #esentaFeature h3{
    margin-bottom: 10.4vw;
    font-size: 2.5rem;
  }
  #esentaFeature h3 .logoEsenta{
    margin-right: 1vw;
    transform: translateY(-1vw);
  }
  #esentaFeature h3 .logoEsenta figcaption{
    font-size: 1.2rem;
  }
  #esentaFeature ul{
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(10.4vw - 0.25em);
    font-size: 1.8rem;
    line-height: 1.5;
  }
  #esentaFeature ul li{
    width: 100%;
    padding-top: calc(69.333333333vw + 4.8vw);
  }
  #esentaFeature ul li:before{
    width: 60vw;
    padding-top: 69.333333333vw;
    top: 0;
    left: 20vw;
  }
  #esentaFeature ul li:not(:last-child){
    margin-bottom: calc(10.4vw - 0.25em);
  }
  #esentaFeature ul li.feature1:before{
    background: url("../img/feature1_sp.png") no-repeat center/contain;
  }
  #esentaFeature ul li.feature2:before{
    background: url("../img/feature2_sp.png") no-repeat center/contain;
  }
  #esentaFeature ul li.feature3:before{
    background: url("../img/feature3_sp.png") no-repeat center/contain;
  }
  #esentaFeature .sup{
    padding: 0 2.666666667vw;
    font-size: 1.4rem;
    text-align: left;
  }
  #esentaFeature .btn{
    width: 89.333333333vw;
    height: 16vw;
    font-size: 1.8rem;
    z-index:10;
  }
  #esentaFeature .btn:after{
    right: 4vw;
  }

}

#esentaProducts{
  padding: 0 30px;
  background: #f6fafb;
}
#esentaProducts .inner{
  max-width: 1000px;
  padding: 120px 0 100px;
}
#esentaProducts h3{
  margin-bottom: 60px;
  font-size: 46px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  text-align: center;
}
@media(max-width:767px){
  #esentaProducts{
    padding: 0;
  }
  #esentaProducts .inner{
    padding: 16vw 0;
  }
  #esentaProducts h3{
    margin-bottom: 10.4vw;
    font-size: 2.5rem;
  }
}
.esentaProductsBox{
  padding: 10%;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.06);
}
.esentaProductsBox:not(:last-child){
  margin-bottom: 80px;
}
.esentaProductsBox .flex{
  align-items: flex-end;
  margin-bottom: 60px;
}
.esentaProductsBox .flex.reverse {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.esentaProductsBox .reserve div:first-child{
  order:2;
}
.esentaProductsBox .reserve div:last-child{
  order:1;
}
.esentaProductsBox table{
  margin-top: 30px;
  border-spacing: 0;
  border-collapse: collapse;
  border-top: 1px solid #000;
}
.esentaProductsBox table caption{
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  letter-spacing: 0.05em;
  line-height: 2.0;
}
.esentaProductsBox thead{
  background: #dde8f2;
}
.esentaProductsBox tbody td{
  border-bottom: 1px solid #000;
}
.esentaProductsBox th,
.esentaProductsBox td{
  padding: 0.25em;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.05em;
  line-height: 1;
}
@media(max-width:767px){
  .esentaProductsBox{
    margin: 0 2.666666667vw;
    padding: 10.4vw 2.666666667vw;
  }
  .esentaProductsBox:not(:last-child){
    margin-bottom: 16vw;
  }
  .esentaProductsBox .flex{
    flex-direction: column;
    align-items: center;
    margin-bottom: 10.4vw;
  }
  .esentaProductsBox .flex.reverse {
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .esentaProductsBox .flex>div:first-child{
    margin-bottom: 2vw;
  }
  .esentaProductsBox .flex figure{
    margin: 0 5.333333333vw;
  }
  .esentaProductsBox table{
    width: 100%;
    margin-top: 5.333333333vw;
  }
  .esentaProductsBox table caption{
    font-size: 1.6rem;
  }
  .esentaProductsBox th,
  .esentaProductsBox td{
    padding: 0.5em 0.25em;
    font-size: 1.2rem;
  }
}
#esentaProducts h4{
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
  line-height: 2.0;
  text-align: center;
}
#esentaProducts .products1 h4{
  color: #5a147d;
  border-top: 1px solid #5a147d;
  border-bottom: 1px solid #5a147d;
}
#esentaProducts .products2 h4{
  color: #008276;
  border-top: 1px solid #008276;
  border-bottom: 1px solid #008276;
}
#esentaProducts h5{
  font-size: 18px;
  font-weight: bold;
  line-height: 2.0;
}
#esentaProducts ul,
#esentaProducts ol{
  margin-top: -0.25em;
  margin-bottom: -0.25em;
  position: relative;
}
#esentaProducts ul:not(:last-child),
#esentaProducts ol:not(:last-child){
  margin-bottom: calc(35px - 0.25em);
}
#esentaProducts li{
  padding-left: 1.95em;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
#esentaProducts li:before{
  display: inline-block;
  width: 1.95em;
  margin-left: -1.95em;
}
#esentaProducts .check li{
  margin: 0.35em 0;
}
#esentaProducts .check li:before{
  transform: translateY(0.15em);
}
#esentaProducts .products1 .check li:before{
  content: url("../img/check1.png");
}
#esentaProducts .products2 .check li:before{
  content: url("../img/check2.png");
}
#esentaProducts .disc li{
  margin: 0.5em 0;
}
#esentaProducts .disc li:before{
  content: "●";
  text-align: center;
}
#esentaProducts .products1 .disc li:before{
  color: #5a147d;
}
#esentaProducts .products2 .disc li:before{
  color: #008276;
}
#esentaProducts .products1 ol.spray:after,
#esentaProducts .products2 ol.wipe:after{
  content:"";
  display: block;
  width: 260px;
  height: 140px;
  position: absolute;
  right:0;
  top:-30px;
  z-index: 0;
}
#esentaProducts .products1 ol.spray:after{
  background: url("../img/spray.png") no-repeat center/contain;
}
#esentaProducts .products2 ol.wipe:after{
  background: url("../img/wipe.png") no-repeat center/contain;
}
#esentaProducts ol li:before{
  transform: translateY(0.35em);
}
#esentaProducts .products1 ol li:nth-of-type(1):before{
  content:url("../img/num1-1.png");
}
#esentaProducts .products1 ol li:nth-of-type(2):before{
  content:url("../img/num1-2.png");
}
#esentaProducts .products1 ol li:nth-of-type(3):before{
  content:url("../img/num1-3.png");
}
#esentaProducts .products2 ol li:nth-of-type(1):before{
  content:url("../img/num2-1.png");
}
#esentaProducts .products2 ol li:nth-of-type(2):before{
  content:url("../img/num2-2.png");
}
#esentaProducts .products2 ol li:nth-of-type(3):before{
  content:url("../img/num2-3.png");
}
#esentaProducts .sup{
  margin-top: calc(-35px + 0.25em);
  font-size: 14px;
  line-height: 2.0;
}
#esentaProducts .sup:not(:last-child){
  margin-bottom: calc(35px - 0.25em);
}
@media(max-width:767px){
  #esentaProducts h4{
    margin-bottom: 5.333333333vw;
    font-size: 2.0rem;
  }
  #esentaProducts h5{
    font-size: 1.8rem;
  }
  #esentaProducts ul:not(:last-child),
  #esentaProducts ol:not(:last-child){
    margin-bottom: calc(10vw - 0.25em);
  }
  #esentaProducts .products1 ol.spray:after,
  #esentaProducts .products2 ol.wipe:after{
    width: 89.333333333vw;
    height: 48vw;
    margin-top: 4vw;
    position: static;
  }
  #esentaProducts .products1 ol.spray:after{
    background: url("../img/spray_sp.png") no-repeat center/contain;
  }
  #esentaProducts .products2 ol.wipe:after{
    background: url("../img/wipe_sp.png") no-repeat center/contain;
  }
  #esentaProducts li{
    font-size: 1.6rem;
  }
  #esentaProducts li:not(:last-child){
    margin-bottom: 0.5em;
  }
  #esentaProducts .sup{
    line-height: 1.5;
  }
}

#esentaVoice{
  padding: 0 30px;
  background: #e7f1f5;
}
#esentaVoice .inner{
  max-width: 800px;
  padding: 120px 0 100px;
}
#esentaVoice h3{
  margin: 0 auto 70px;
  font-size: 46px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  text-align: center;
  line-height: 1;
}
#esentaVoice .voice{
  justify-content: space-between;
  align-items: flex-end;
}
#esentaVoice .voice:not(:last-child){
  margin-bottom: 90px;
}
#esentaVoice .voice:nth-child(2n+1) figure{
  order: 2;
}
#esentaVoice .voice figure{
  width: 18.75%;
  max-width: 150px;
  margin: 0 10px -15px;
}
#esentaVoice .voice p{
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 1.7;
}
#esentaVoice .voice1,
#esentaVoice .voice2,
#esentaVoice .voice3{
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  max-width: 600px;
  height: 160px;
  margin: 0 10px;
  border-radius: 20px;
  position: relative;
}
#esentaVoice .voice1{
  background: #18739f;
}
#esentaVoice .voice2{
  background: #3fc08c;
}
#esentaVoice .voice3{
  background: #18739f;
}
#esentaVoice .voice1:after,
#esentaVoice .voice2:after,
#esentaVoice .voice3:after{
  content:"";
  display: block;
  width: 40px;
  height: 15px;
  position: absolute;
  bottom: -15px;
}
#esentaVoice .voice1:after{
  left: 30px;
  background: url("../img/f1.png") no-repeat center bottom/cover;
}
#esentaVoice .voice2:after{
  right: 30px;
  background: url("../img/f2.png") no-repeat center bottom/cover;
}
#esentaVoice .voice3:after{
  left: 30px;
  background: url("../img/f3.png") no-repeat center bottom/cover;
}
@media(max-width:767px){
  #esentaVoice{
    padding: 0;
  }
  #esentaVoice .inner{
    padding: 16vw 2.666666667vw;
  }
  #esentaVoice h3{
    margin-top: -0.25em;
    margin-bottom: calc(10.4vw - 0.25em);
    font-size: 2.5rem;
    line-height: 1.5;
  }
  #esentaVoice .voice{
    align-items: flex-start;
  }
  #esentaVoice .voice:not(:last-child){
    margin-bottom: 8vw;
  }
  #esentaVoice .voice figure{
    width: 20vw;
    max-width: inherit;
    margin: 0;
  }
  #esentaVoice .voice p{
    font-size: 1.5rem;
  }
  #esentaVoice .voice br{
    display: none;
  }
  #esentaVoice .voice1,
  #esentaVoice .voice2,
  #esentaVoice .voice3{
    width: 72vw;
    max-width: inherit;
    height: 26.666666667vw;
    margin: 0;
    padding: 4vw;
    border-radius: 2.666666667vw;
  }
  #esentaVoice .voice2{
    height: 32.8vw;
  }
  #esentaVoice .voice1:after,
  #esentaVoice .voice2:after,
  #esentaVoice .voice3:after{
    content:"";
    display: block;
    width: 6.666666667vw;
    height: 2.666666667vw;
    position: absolute;
    bottom: 6.666666667vw;
  }
  #esentaVoice .voice1:after{
    left: -4vw;
    transform: rotate(90deg);
  }
  #esentaVoice .voice2:after{
    right: -4vw;
    transform: rotate(-90deg);
  }
  #esentaVoice .voice3:after{
    left: -4vw;
    transform: rotate(90deg);
  }
}

#esentaSample{
  background: #f5f5f5;
  position: relative;
}
#esentaSample:after{
  content:"";
  display: block;
  width: 50%;
  height: 100%;
  background: #dee0e5;
  position: absolute;
  right: 0;
  top:0;
  z-index: 0;
}
#esentaSample figure{
  position: relative;
  z-index: 1;
}
#esentaSample .btn{
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48%;
  max-width: 400px;
  height: 70px;
  color: #18739f;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  line-height: 1;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 50%;
  z-index:10;
  transform: translate(0%,-50%);
  border: 1px solid #18739f;
  box-sizing: border-box;
}
#esentaSample .btn:after{
  content: url("../img/arrow.png");
  display: inline-block;
  width: 13px;
  height: 23px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
#esentaSample .btn:hover{
  opacity: 0.8;
}
@media(max-width:767px){
  #esentaSample .btn{
    width: 89.333333333vw;
    height: 16vw;
    font-size: 1.8rem;
    top: 10.4vw;
    right: 50%;
    z-index:10;
    transform: translate(50%,0%);
  }
  #esentaSample .btn:after{
    right: 4vw;
  }
}

#esentaSocial{
  background: #fff;
}
#esentaSocial .inner{
  padding: 80px 0;
  text-align: center;
}
#esentaSocial .logo{
  width: 400px;
  margin: 0 auto;
}
#esentaSocial .logo img{
  width: 100%;
  max-width: inherit;
}
#esentaSocial ul{
  justify-content: center;
  margin-top: 40px;
}
#esentaSocial ul li{
  width: 36px;
  margin: 0 10px;
}
@media(max-width:767px){
  #esentaSocial .inner{
    padding: 10.4vw 0;
  }
  #esentaSocial .logo{
    width: 66.666666667vw;
  }
  #esentaSocial ul{
    margin-top: 6.666666667vw;
  }
  #esentaSocial ul li{
    width: 9.6vw;
    margin: 0 2.666666667vw;
  }
}