@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: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Mayryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #303030;
  line-height: 1.5em;
}
@media screen and (min-width: 750px) {
  #lpbox,
  #lpfooter {
    font-size: 28px;
    max-width: 750px;
    margin: 0 auto;
  }
}
#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 .cta {
  margin: 0 auto 8%;
}
#lpbox .cta-box {
  margin: 0 auto;
  position: relative;
  width: 100%;
}
#lpbox .cta-btn {
  box-sizing: border-box;
  padding: 0 5%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#lpbox .cta-teiki + .cta-trial {
  margin-top: 8%;
}
#lpbox .pl {
  position: relative;
}
#lpbox .kotira-text {
  position: absolute;
  bottom: 12.1%;
  left: 22.2%;
  font-size: 0.7em;
  color: #183a57;
  text-decoration: underline;
}
/*---------------------------------*/

/*---------------------------------*/
#lpbox #fv {
  margin-bottom: 80px;
}
@media screen and (max-width: 750px) {
  #lpbox #fv {
    margin-bottom: 40px;
  }
}
#lpbox .product {
  color: #fff;
  margin: 0 auto;
  position: relative;
  background: #0e3770;
  padding-bottom: 8%;
}
#lpbox .product-img {
  display: block;
  position: relative;
  margin: 0 auto;
  z-index: 1;
}
#lpbox .product-box {
  box-sizing: border-box;
  position: relative;
  width: 93.75%;
  z-index: 2;
  margin: -8em auto 0;
}
#lpbox .product-name {
  font-size: 1.08em;
  padding: 1em 0;
  position: relative;
  text-align: center;
}
#lpbox .product-box dt {
  background-color: #0c1941;
  color: #fff;
  padding: 0.6em 0;
  position: relative;
  text-align: center;
}
#lpbox .product-box dd {
  padding: 0.8em 0;
  font-size: 0.88em;
  position: relative;
  text-align: left;
}
#lpbox .product-box dd p + p {
  margin-top: 1.5em;
}
/*-------------------------------------------
 form
-----------------------------------------------*/
#form-area {
  box-sizing: border-box;
  width: 100%;
  margin: 1em auto;
  padding: 0;
}

/*-------------------------------------------
 footer
-----------------------------------------------*/
#lpfooter {
  display: block;
  margin: 0 auto;
}
#lpfooter .footer-info {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8% 2.6% 4%;
  width: 100%;
}
#lpfooter .footer-info dt {
  background-color: #183a57;
  position: relative;
  color: #fff;
  padding: 0;
  margin: 0 auto;
}
#lpfooter .footer-info dt .footer-ic {
  display: block;
  z-index: 1;
}
#lpfooter .footer-info dt span {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  font-size: 1.06em;
  font-weight: bold;
  line-height: 1em;
  padding: 0.2em 0.2em 0.2em 11.5%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100%;
  z-index: 2;
}
#lpfooter .footer-info dd {
  box-sizing: border-box;
  color: #183a57;
  font-size: 0.9em;
  padding: 1em 0.4em 6%;
  margin: 0 auto;
  width: 100%;
}
#lpfooter .footer-info-btn {
  position: relative;
  margin: 2% -2% 0;
  text-align: center;
  display: block;
}
#lpfooter .footer-info-btn span {
  display: block;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.5em;
  margin: 0.3em auto 0;
}
#lpfooter .text-red {
  color: #e53225;
}
#lpfooter .footer-info-stitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  ms-flex-pack: justify;
  justify-content: space-between;
  margin: 1.5em auto 0;
}
#lpfooter .footer-info-stitle span {
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  min-width: 4em;
}
#lpfooter .footer-info-stitle span.internet {
  min-width: 8em;
}
#lpfooter .footer-info-stitle:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}
#lpfooter a.text-uline {
  text-decoration: underline;
  letter-spacing: -0.02em;
}
#lpfooter .footer-link {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
}
#lpfooter .footer-link li {
  font-size: 1em;
  margin-bottom: 1em;
}
#lpfooter .footer-link-obi {
  text-align: left;
  border-top: 1px solid #d9d9d9;
}
#lpfooter .footer-link-obi li {
  margin-bottom: 0;
}
#lpfooter .footer-link-obi li a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 1.1em 0.9em;
  position: relative;
  line-height: 1em;
  border-bottom: 1px solid #d9d9d9;
}
#lpfooter .footer-link-obi li a:after {
  content: "＞";
  font-weight: bold;
  color: #183a57;
  position: absolute;
  top: 50%;
  right: 0.5rem;
  margin-top: -0.5em;
  -webkit-transform: scaleX(0.7);
  -ms-transform: scaleX(0.7);
  -o-transform: scaleX(0.7);
  transform: scaleX(0.7);
}
#copy {
  text-align: center;
  font-size: 0.75em;
  color: #fff;
  background-color: #aaa;
  box-sizing: border-box;
  padding: 0.5em;
}

#lpfooter #logo {
  width: 28%;
  display: block;
  margin: 1em auto;
}
#lpfooter #copy {
  text-align: center;
  font-size: 0.75em;
  color: #505050;
  box-sizing: border-box;
  padding: 0.5em;
}

/*-------------------------------------------
 accordion
---------------------------------------------*/

.accordion {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px !important;
  margin-bottom: 40px !important;
  max-width: 95%;
  position: relative;
  width: 100%;
}
.accordion-title {
  color: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  padding: 20px 40px 20px 30px !important;
}
@media screen and (min-width: 750px) {
  .accordion-title {
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 28px;
    padding: 20px 40px 20px 30px !important;
  }
}
.accordion-content {
  display: none;
  padding: 20px 20px 10px 20px !important;
}
.accordion-content p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px !important;
}
/* タイトルの背景色 */
.accordion-item:nth-of-type(1) .accordion-title {
  background-color: #ff8a16 !important;
}
/* コンテンツボックスの枠線 */
.accordion-item:nth-of-type(1) .accordion-content {
  border-bottom: 2px solid #ff8a16 !important;
  border-left: 2px solid #ff8a16 !important;
  border-right: 2px solid #ff8a16 !important;
}
/* 矢印 */
.accordion-title {
  position: relative;
}
.accordion-title::after {
  border-right: solid 2px #fff;
  border-top: solid 2px #fff;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
  width: 8px;
}
.accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}


/*-------------------------------------------
 画像内URLリンク
---------------------------------------------*/
.cta_link_item {
  position: absolute;
}

.cta-box .cta_link_item {
    width: 76%;
    height: 5%;
    top: 69%;
    left: 7%;
    z-index: 1;
}

.tokuten {
  position: relative;
}

.tokuten .cta_link_item {
    width: 73%;
    height: 1%;
    top: 92%;
    z-index: 10;
    left: 9%;
}

.cta_link_item > a {
  display: block;
  /* background-color: rgba(0,0,0,0.5); */
  height: 100%;
  width: 100%;
}


#lpbox .check__list {
  background: url(../img/webp/check_bg.webp) repeat top left;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: calc( 20 / 750 * 100% * 0.5) calc((750 - 610 ) / 750 * 100% * 0.5);
}
#lpbox .check__item {
  display: block;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  padding: calc( 20 / 610 * 100% * 0.5) 0;
}
#lpbox .check__item input {
  display: none;
}
#lpbox .check__item input + span {
  position: relative;
  display: block;
}
#lpbox .check__item input + span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0.1em;
  left: 0.3em;
  width: 1.1em;
  height: 1.1em;
  background: url(../img/webp/chk_ic.webp) no-repeat 50% 50%;
  -webkit-background-size: contain;
  background-size: contain;
  opacity: 0;
  transform: translate3d(0,-.3em,0);
  transition: all .5s ease;
}
#lpbox .check__item input:checked + span:before {
  content: "";
  opacity: 1;
  transform: translate3d(0,0,0);
}
#lpbox .check__result {
  position: relative;
  z-index: 3;
  margin: -3.6em auto 0;
}
#lpbox .check__resultbtn {
  display: block;
  position: relative;
  z-index: 3;
  width: calc(660 / 750 * 100%);
  cursor: pointer;
}
#lpbox .check__resultbox {
  display: block;
  position: relative;
  padding: calc(50 / 750 * 100%) calc(20 / 750 * 100%);
}

#lpbox .check__resultbox--01,
#lpbox .check__resultbox--02 {
  display: none;
  position: relative;
}
#lpbox .check__resultbox--01.check__resultbox--active,
#lpbox .check__resultbox--02.check__resultbox--active {
  display: block;
}
#lpbox .slider__area {
  position: relative;
  display: block;
  margin: 0 auto;
}
#lpbox .slider__box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
#lpbox .slider__item {
  display: block;
  box-sizing: border-box;
  widows: 100%;
  padding: 0 calc(20 / 750 * 100%);
}
#lpbox .slider__box .owl-prev {
  position: absolute;
  top: 50%;
  left: 0;
  background: url(../img/webp/nav_l.webp) no-repeat top left;
  -webkit-background-size: contain;
  background-size: contain;
  width: 1.2em;
  height: 2.4em;
  overflow: hidden;
  text-indent: -999px;
}
#lpbox .slider__box .owl-next {
  position: absolute;
  top: 50%;
  right: 0;
  background: url(../img/webp/nav_r.webp) no-repeat top right;
  -webkit-background-size: contain;
  background-size: contain;
  width: 1.2em;
  height: 2.4em;
  overflow: hidden;
  text-indent: -999px;
}

#lpbox .improvement {
  margin-bottom: 80px;
}

@media screen and (max-width: 750px) {
  #lpbox .improvement {
    margin-bottom: 40px;
  }
}

#lpbox .cta__attbox {
  position: relative;
}
#lpbox .cta__attbox a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
	color: #000;
}

#lpbox .cta__attbox__in {
  position: absolute;
  bottom: 3%;
  color: #000;
  display: block;
  font-size: clamp(19px,calc(22 / 750 * 100vw),18px);
  padding: 0 5%;
}

#lpbox .cta__attbox__in a{
  word-break: keep-all;
}

@media screen and (max-width: 768px) {
  #lpbox .cta__attbox__in {
     bottom: 2.8%;
    font-size: clamp(8px,calc(19 / 750 * 100vw),22px);
  }
}

.box29 {
  background: #fff !important;
}
.box29 .box-title {
  font-size: 16px;
  background: #212c76 !important;
  padding: 8px !important;
  text-align: center;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box29 p {
  padding: 15px 15px !important;
  font-size: 16px;
  margin: 0;
  text-align: center;
  line-height: 1.8;
}

.box29 a {
  color: #0c2595 !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.size60 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
  width: 60%;
}

.box29 .info_box {
  background: #b4f6b9 !important;
}

.box29 .info_box2 {
  background: #81ceff !important;
}

.box29 .info_box p,.box29 .info_box2 p {
  text-align: left;
  font-size: .7em;
}

@media screen and (min-width: 750px) {
  .box29 .box-title {
    font-size: .8em;
  }
  .box29 p {
    font-size: .6em;
  }
  
  .box29 .info_box p,.box29 .info_box2 p {
    font-size: .5em;
  }
}



.box29 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* デフォルトは100%で親要素に合わせる */
  max-width: 30%; /* SP用の最大幅 */
  height: auto;
}

/* PC用（画面幅768px以上のとき） */
@media screen and (min-width: 768px) {
  .box29 img {
    max-width: 25%;
  }
}

#lpbox .product__box {
  box-sizing: border-box;
  display: block;
  padding: calc(10 / 750 * 100%) calc(30 / 750 * 100%);
  color: #006124;
}
#lpbox .product--01 {
  background:#fcf4ec url(../img/webp/product_01_02.webp) no-repeat top left ;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
#lpbox .product--02 {
  background:#3b82ac url(../img/webp/product_02_02.webp) no-repeat top left ;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  color: #fff;
}

#lpbox .product__text {
  text-align: center;
  font-size: clamp(13px,calc(26 / 750 * 100vw),26px);
  margin-bottom: 1em;
}



#lpbox .product__dl {
  display: block;
  margin: 0 auto;
}
#lpbox .product__dl dt {
  font-size: clamp(13px,calc(26 / 750 * 100vw),26px);
  text-align: center;
  background: #006124;
  color: #fff;
  box-sizing: border-box;
  padding: .6em .5em .4em;
}
#lpbox .product--02 .product__dl dt {
  background-color: #092086;
}
#lpbox .product__dl dd {
  text-align: center;
  box-sizing: border-box;
  font-size: clamp(12px,calc(24 / 750 * 100vw),22px);
  padding: 1em .5em 2em;
}
#lpbox .product__dl dd p {
  text-align: left;
  
}
#lpbox .product__dl dd p + p {
  margin-top: 1em;
}

#lpbox .product__acdbtn {
  display: block;
  margin: 0% auto 8%;
  position: relative;
  cursor: pointer;
}

#lpbox .product__acdbtn:before {
  content: "";
  width: 1.2em;
  height: 2px;
  background: #0d279c;
  position: absolute;
  top: 50%;
  right: 8%;
  transition: all .5s ease;
  transform: rotate(0deg);
}

#lpbox .product__acdbtn:after {
  content: "";
  width: 1.2em;
  height: 2px;
  background: #0d279c;
  position: absolute;
  top: 50%;
  right: 8%;
  transition: all .5s ease;
  transform: rotate(90deg);
}
#lpbox .product--open:before {
  content: "";
  transform: rotate(90deg);
  opacity: 0;
}

#lpbox .product--open:after {
  content: "";
  transform: rotate(180deg);
}