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

/*******************

LP style

********************/
html , body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* content
--------------------------------------------------*/
.lpbox , #lpfooter {
  font-size: 14px;
  font-size: 3.7333vw;
  font-family:'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:#303030;
  line-height:1.5em;
}

.lpbox a , #lpfooter a{
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}
.lpbox a:hover, #lpfooter a:hover{
  text-decoration: underline;
}
.lpbox span, #lpfooter span {
  font-size: inherit;
  font-weight: inherit;
}
.lpbox img ,
#lpfooter img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
.lpbox img.img-t ,
#lpfooter img.img-t {
  vertical-align: top;
}
/* cart css reset */

.lpbox header ,
.lpbox h1 ,
.lpbox h2 ,
.lpbox h3 ,
.lpbox p ,
.lpbox dl ,
.lpbox dt ,
.lpbox dd ,
.lpbox div ,
.lpbox section ,
.lpbox span {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter footer ,
#lpfooter div,
#lpfooter p {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter ul,
#lpfooter li {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
/*----------------------------------------*/

.lpbox .test_kit {
  position: relative;
}
.lpbox .test_kit__text {
  position: absolute;
  top: 3.8em;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 74%;
}


.lpbox .media {
  position: relative;
}
.lpbox .media__slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: calc(100 / 750 * 100%);
  background-image: url(../img/slider_media.png);
  background-repeat: repeat-x;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
}

.lpbox .risk {
  position: relative;
}
.lpbox .risk__text {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 74%;
}

.lpbox .reason {
  position: relative;
}
.lpbox .reason__text_01 {
  position: absolute;
  top: 6.3em;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 64%;
}
.lpbox .reason__text_02 {
  position: absolute;
  top: 6.8em;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 64%;
}
.lpbox .reason__text_03 {
  position: absolute;
  top: 7em;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 71%;
}

.lpbox .cta__box {
  position: relative;
}
.lpbox .cta__box__btn_01 {
  position: absolute;
  bottom: 1em;
  right: 2.9em;
  margin: 0 auto;
  width: 54%;
}
.lpbox .cta__box__btn_02 {
  position: absolute;
  bottom: 1em;
  right: 2.9em;
  margin: 0 auto;
  width: 54%;
}
.lpbox .cta__box__btn_03 {
  position: absolute;
  bottom: 1em;
  right: 2.9em;
  margin: 0 auto;
  width: 54%;
}

.lpbox .faq dt,
.lpbox .faq dd{
  position: relative;
}
.lpbox .faq dt:before {
  content: "";
  background: url(../img/ar.png) no-repeat;
  background-position: 50% 50%;
  background-size: 100%;
  width: .8em;
  height: .8em;
  display: block;
  position: absolute;
  top: 50%;
  right: 10%;
  margin-top: .4em;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.lpbox .faq dt.acd-open:before {
  content: "";
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}





.lpbox .acd__btn {
  position: relative;
  display: block;
  cursor: pointer;
}
.lpbox .acd__btn:before {
  content: "▲";
  background: transparent no-repeat 50% 50%;
  -webkit-background-size: contain;
  background-size: contain;
  position: absolute;
  top: calc(50% - .5em);
  right: 14.2%;
  width: 1em;
  height: 1em;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.lpbox .acd__btn--open:before {
  content: "";
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

/*----------------------------------------*/

.lpbox #fixbtn {
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 999;
  width: 100%;
  overflow: hidden;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
  background-color: rgba(255,255,255,0.7);
}
.lpbox #fixbtn.fixbtn--visible {
  bottom: 0;
}
.lpbox #fixbtn .fixbtn__box {
  position: relative;
  bottom: 0;
  display: block;
  margin: 0 auto;
  position: relative;
  max-width: 750px;
}
.lpbox #fixbtn .fixbtn__item {
  display: block;
  box-sizing: border-box;
  padding: 1.66% 1.66% 1% 2.66%;
}

/*-------------------------------------------
footer
-----------------------------------------------*/
#lpfooter {
  background: #fff;
}
#lpfooter .footer__link {
  text-align: center;
  box-sizing: border-box;
  display: block;
  padding: 2.5em 1em;
}
#lpfooter .footer__link li{
  font-size: 1.07em;
  background: no-repeat 0% 50%;
  -webkit-background-size: 0.8em auto;
  background-size: 0.8em auto;
  box-sizing: border-box;
}
#lpfooter .footer__link li + li {
  margin-top: 1.5em;
}
#lpfooter #copy {
  text-align: center;
  font-size: .75em;
  color: #fff;
  background-color: #f27186;
  box-sizing: border-box;
  padding: .8em 0;
  letter-spacing: 0.1em;
}


/* pc ------------------------------------------------- */

.pcside {
  display: none;
}
.pcdec {
  display: none;
}
.pcbox {
  background-color: #fff;
}
@media screen and (min-width:750px){
  .lpbox , #lpfooter {
    font-size: 18px;
    margin: 0 auto;
  }
  .pcdec {
    display: block;
  }
  .pccover {
    background: url(../img/pc_background.png) repeat-x top center;
    background-size: 100%;
    background-attachment: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .pcbox {
    width: 500px;
    background-color: #fff;
    position: relative;
    z-index: 10;
  }
  .pcside {
    display: block;
    width: calc(100% - 500px);
    position: relative;
  }
  /* half-color
  .pccover:before {
  content: "";
  position: fixed;
  display: block;
  background-color: #ffdbfc;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}*/
  .pcnav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .pcnav__box {
    box-sizing: border-box;
    display: block;
    padding: 10px 10px;
    z-index: 10;
  }
  .pcnav__logo {
    box-sizing: border-box;
    display: block;
    padding: 90px 0px;
  }
  .pcnav__link {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  .pcnav__linkitem {
    margin-bottom: 2em;
  }
  .pcnav__link a {
    text-decoration: none;
    padding: .3em .2em .2em;
    box-sizing: border-box;
    display: inline-block;
    color: #4a4a4a;
    position: relative;
  }
/*   .pcnav__link a:before {
    content: "";
    display: block;
    width: 0%;
    height: .2em;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    -webkit-transition: all .5s  ease;
    -o-transition: all .5s  ease;
    transition: all .5s  ease; 
  } */
  .pcnav__link a:hover {
    opacity: .7;
  }

/*   .pcnav__link a:hover:before {
    content: "";
    width: 100%;
  } */
  .pcnav__link span {
    position: relative;
    display: inline-block;
    z-index: 3;
    box-sizing: border-box;
    line-height: 1.5em;
  }

  .lpbox #fixbtn .fixbtn__box {
    max-width: 400px;
  }


}
@media screen and (min-width:960px){
  .lpbox , #lpfooter {
    font-size: 16px;
    max-width: 750px;
    margin: 0 auto;
  }
  .pccover {
    display: block;
  }
  .pcbox {
    width: 400px;
    margin: 0 auto;
    box-shadow: 4px 4px 20px rgba(100, 21, 21, 0.2);
  }
  .pcside {
    position: fixed;
    top: 15%;
    right: 0;
    display: block;
    /*     width: calc((100% - 500px ) / 2); */
    width: calc((100% - 600px ) / 2);
    height: 100%;
    z-index: 3;
  }
  .pcnav {
    position: sticky;
    top: 0;
    left: 0;
    max-width: 360px;
    margin-left: 0;
    margin-right: auto;
    text-align: center;
  }
  .pcnav__link {
    font-size: 16px;
  }

}



/* bgloop */
.bgloop {
  -webkit-animation-name: bgloop;
  -moz-animation-name: bgloop;
  -o-animation-name: bgloop;
  animation-name: bgloop;
  -webkit-animation-duration: 60s;
  -moz-animation-duration: 60s;
  -o-animation-duration: 60s;
  animation-duration: 60s;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-position: 0 0;
}
@-webkit-keyframes bgloop {
  from, 0% {
    background-position: 0 0;
  }
  to, 100% {
    background-position: calc(2280 / 750 * 100%) 0;
  }
}
@keyframes bgloop {
  from, 0% {
    background-position: 0 0;
  }
  to, 100% {
    background-position: calc(2280 / 750 * 100%) 0;
  }
}

.lpbox .fadein {
  display: block;
  opacity: 1;
  -webkit-transform:translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-filter: blur(0);
  -o-filter: blur(0);
  filter: blur(0);
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}
.lpbox .animhide .fadein {
  display: block;
  opacity: 0;
  -webkit-transform:translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  -webkit-filter: blur(0.5em);
  -o-filter: blur(0.5em);
  filter: blur(0.5em);
}

/* expand */
.expand {
  display: block;
  -webkit-animation-name: expand;
  -moz-animation-name: expand;
  -o-animation-name: expand;
  animation-name: expand;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes expand {
  from, 0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
  }
  to, 100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes expand {
  from, 0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
  }
  to, 100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}


.hidden {
 animation: fade .2s ease-in-out forwards;
 pointer-events: none;
}

@keyframes fade {
 from {
  opacity: 1;
 }

 to {
  opacity: 0;
 }
}

.visible {
 animation: fadeOut .2s ease-in-out forwards;
 pointer-events:all;
}

@keyframes fadeOut {
 from {
  opacity: 0;
 }

 to {
  opacity: 1;
 }
}