@charset "UTF-8";
/* ---------------------------------------------
  reset
--------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* 解析タグの隙間対策 */
body > img {
  display: none;
}

.lp_main div, .lp_main span, .lp_main iframe, .lp_main h1, .lp_main h2, .lp_main h3, .lp_main h4, .lp_main h5, .lp_main h6, .lp_main p, .lp_main address, .lp_main img, .lp_main small, .lp_main strong, .lp_main sub, .lp_main sup, .lp_main dl,
.lp_main dt, .lp_main dd, .lp_main ol, .lp_main ul, .lp_main form, .lp_main label, .lp_main table, .lp_main caption, .lp_main tbody, .lp_main tfoot, .lp_main thead, .lp_main tr, .lp_main th, .lp_main td, .lp_main article,
.lp_main aside, .lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section, .lp_main video, .bl_floatArea p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
  background: transparent;
}
.lp_main article, .lp_main aside, .lp_main details, .lp_main figcaption, .lp_main figure,
.lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section {
  display: block;
}
.lp_main ol, .lp_main ul {
  list-style: none;
}
.lp_main :focus {
  outline: 0;
}
.lp_main table {
  border-collapse: collapse;
  border-spacing: 0;
}
.lp_main *,
.lp_main *::before,
.lp_main *::after {
  box-sizing: border-box;
}
.lp_main img,
.bl_floatArea img {
  display: block;
  height: auto;
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
}
.lp_main svg,
.lp_main video {
  width: 100%;
  height: auto;
}


/* ---------------------------------------------
  common
--------------------------------------------- */
/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

.lp_main, .footerArea {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* positionで配置したい要素の外側に使用 */
.lp_main .p_box {
  position: relative;
}

.lp_main .caution {
  font-size: min(calc(16 / 750 *100vw) ,16px);
  font-weight: 400;
  line-height: 1.2;
  font-family:"Noto Sans JP", sans-serif;
  color: #4d4d4d;
}

.lp_main .footer {
  font-size: min(calc(18 / 750 *100vw) ,18px);
  font-weight: 400;
  line-height: 1.2;
  font-family:"Noto Sans JP", sans-serif;
  color: #fff;
  background-color: #000;
}

/* ---------------------------------------------
  sec_fv
--------------------------------------------- */
.lp_main .sec_fv .fv_item01 {
  position: absolute;
  top: 45.5%;
  right: 2.5%;
  width: min(calc(167 / 750 *100%) ,167px);
}

.lp_main .sec_fv .fv_item02 {
  position: absolute;
  top: 66.9%;
  right: 2.5%;
  width: min(calc(167 / 750 *100%) ,167px);
}

.lp_main .sec_fv .fv_item03 {
  position: absolute;
  top: 0;
  right: 4.5%;
  width: min(calc(679 / 750 *100%) ,679px);
}

.lp_main .sec_fv .fv_item04 {
  position: absolute;
  top: 50%;
  right: 11%;
  width: min(calc(588 / 750 *100%) ,588px);
}


/* ---------------------------------------------
  sec_material
--------------------------------------------- */
.lp_main .sec_material .material_item01 {
  position: absolute;
  top: 39%;
  left: 23.5%;
  width: min(calc(400 / 750 *100%) ,400px);
}


/* ---------------------------------------------
  sec_product
--------------------------------------------- */
.lp_main .sec_product .product_item01 {
  position: absolute;
  top: 10.5%;
  left: 7.5%;
  width: min(calc(634 / 750 *100%) ,634px);
}

.lp_main .sec_product .product_item02 {
  position: absolute;
  top: 19.5%;
  left: 4%;
  width: min(calc(674 / 750 *100%) ,674px);
}


/* ---------------------------------------------
  sec_cv
--------------------------------------------- */
.lp_main .sec_cv {
  padding-bottom: min(calc(47 / 750 *100%) ,47px);
  background-color: #000;
}

.lp_main .sec_cv .cv_btn {
  position: absolute;
  top: 53%;
  left: 8%;
  width: min(calc(663 / 750 *100%) ,663px);
}

.lp_main .sec_cv .caution_area {
  padding: min(calc(5 / 750 *100%) ,5px) min(calc(62 / 750 *100%) ,62px) min(calc(41 / 750 *100%) ,41px) min(calc(62 / 750 *100%) ,62px);
  background-image: url(../img/cv_bg.gif);
  background-size: contain;
  background-repeat: repeat-y;
}


/* ---------------------------------------------
  sec_worries
--------------------------------------------- */
.lp_main .sec_worries .worries_item01 {
  position: absolute;
  top: 54.8%;
  left: 4%;
  width: min(calc(690 / 750 *100%) ,690px);
}

.lp_main .sec_worries .worries_item02 {
  margin: 0 auto min(calc(-32 / 750 *100%) ,-32px);
  padding-top: min(calc(56 / 750 *100%) ,56px);
  width: min(calc(691 / 750 *100%) ,691px);
}


/* ---------------------------------------------
  sec_point
--------------------------------------------- */
.lp_main .sec_point .point_item01 {
  position: absolute;
  top: 16.7%;
  left: 3.9%;
  width: min(calc(689 / 750 *100%) ,689px);
}

.lp_main .sec_point .point_item02 {
  position: absolute;
  top: 14.7%;
  left: 3.9%;
  width: min(calc(689 / 750 *100%) ,689px);
}

.lp_main .sec_point .point_item03 {
  position: absolute;
  top: 26.8%;
  left: 3.9%;
  width: min(calc(689 / 750 *100%) ,689px);
}


/* ---------------------------------------------
  sec_use
--------------------------------------------- */
.lp_main .sec_use .use_item01 {
  position: absolute;
  top: 11.4%;
  left: 11.9%;
  width: min(calc(527 / 750 *100%) ,527px);
}

.lp_main .sec_use .use_item02 {
  position: absolute;
  top: 39%;
  left: 11.9%;
  width: min(calc(571 / 750 *100%) ,571px);
}

.lp_main .sec_use .use_item03 {
  position: absolute;
  top: 66.8%;
  left: 12%;
  width: min(calc(574 / 750 *100%) ,574px);
}


/* ---------------------------------------------
  sec_faq
--------------------------------------------- */
.lp_main .sec_faq .faq_area {
  padding-bottom: min(calc(25 / 750 *100%) ,25px);
  background-color: #c3273e;
}

.lp_main .sec_faq .accordion {
  margin-bottom: min(calc(39 / 750 *100%) ,39px);
}

.lp_main .sec_faq .question {
  cursor: pointer;
  position: relative;
  width: min(calc(690 / 750 *100%) ,690px);
  margin: 0 auto;
}

.lp_main .sec_faq .question:before {
  content: '';
  position: absolute;
  display: inline-block;
  top: 42%;
  right: 4.5%;
  width: min(calc(25 / 690 *100%) ,25px);
  height: min(calc(15 / 690 *100vw) ,15px);
  background-image: url(../img/aco_close.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.lp_main .sec_faq .accordion.is-open .question:before {
  background-image: url(../img/aco_open.png);
}


.lp_main .sec_faq .answer {
  display: none;
  width: min(calc(690 / 750 *100%) ,690px);
  margin: 0 auto;
}

/* ---------------------------------------------
  追従ボタン
--------------------------------------------- */
.bl_floatArea {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  transition:
  visibility 0.4s,
  opacity 0.4s;
}

.bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}

.bl_floatArea_btn {
  display: block;
  width: min(calc(663 / 750 *100%) ,663px);
  margin: 0 auto;
}

.bl_floatAre p {
  vertical-align: bottom;
  margin: 0;
}

.bl_floatArea_btn img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------
  footer
--------------------------------------------- */
.footer {
  color: #fff;
  font-size: min(calc(18 / 750 * 100vw), 18px);
  line-height: 1;
  font-weight: 400;
  font-family: "Noto Sans JP",sans-serif;
}

.footer .footer_inner {
  background-color: #000;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: min(57 / 750 * 100vw, 57px) 0;
}

.footer .footer_copy {
  margin: 0 0 4% 0;
  letter-spacing: 0.01em;
  text-align: center;
}

.footer .footer_link {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .footer_link a {
  color: #fff;
  text-decoration: none;
}

.footer .footer_link a:visited,
.footer .footer_link a:active{
  color: #fff;
}

.footer .footer_link li {
  position: relative;
  border-left: 1px solid #fff;
  padding: 0 1%;
}

.footer .footer_link li:first-child {
  border-left: none;
}


/* ---------------------------------------------
 アニメーション
--------------------------------------------- */
/* アニメーション共通 */
.lp_main .io {
  transition: all 1s ease;
}

.lp_main .io_slideShow {
  overflow: hidden;
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}

.lp_main .io_slideShow.is_active {
  -webkit-animation: slideShow .8s ease-in-out forwards;
  animation: slideShow .8s ease-in-out forwards;
}

@-webkit-keyframes slideShow {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}

@keyframes slideShow {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}

.lp_main .io_slideShow_hor {
  overflow: hidden;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}

.lp_main .io_slideShow_hor.is_active {
  -webkit-animation: slideShow_hor .8s ease-in-out forwards;
  animation: slideShow_hor .8s ease-in-out forwards;
}

@-webkit-keyframes slideShow_hor {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}

@keyframes slideShow_hor {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}


/* -----------------------------------------
  fade-up
----------------------------------------- */
.lp_main .io_fadeUp {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.lp_main .io_fadeUp.is_active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}


/* ---------------------------------------------
  ぷるぷるアニメーション - ソフトパターン
--------------------------------------------- */
.an_pururun_soft {
  -webkit-animation-name: pururun_soft;
  animation-name: pururun_soft;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.an_pururun_soft_01 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.an_pururun_soft_02 {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.an_pururun_soft_03 {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@-webkit-keyframes pururun_soft {
  0%, 100% {
    -webkit-transform: scale(1, 1) translateY(0);
    transform: scale(1, 1) translateY(0);
  }
  20% {
    -webkit-transform: scale(1.03, 0.97) translateY(-4px);
    transform: scale(1.03, 0.97) translateY(-4px);
  }
  40% {
    -webkit-transform: scale(0.98, 1.02) translateY(-2px);
    transform: scale(0.98, 1.02) translateY(-2px);
  }
  60% {
    -webkit-transform: scale(0.97, 1.03) translateY(4px);
    transform: scale(0.97, 1.03) translateY(4px);
  }
  80% {
    -webkit-transform: scale(1.02, 0.98) translateY(2px);
    transform: scale(1.02, 0.98) translateY(2px);
  }
}

@keyframes pururun_soft {
  0%, 100% {
    transform: scale(1, 1) translateY(0);
  }
  20% {
    transform: scale(1.03, 0.97) translateY(-4px);
  }
  40% {
    transform: scale(0.98, 1.02) translateY(-2px);
  }
  60% {
    transform: scale(0.97, 1.03) translateY(4px);
  }
  80% {
    transform: scale(1.02, 0.98) translateY(2px);
  }
}


/* -----------------------------------------
  ディレイ
----------------------------------------- */
.lp_main .anime-delay-100 {
  -webkit-animation-delay: 0.1s !important;
          animation-delay: 0.1s !important;
  transition-delay: 0.1s !important;
}

.lp_main .anime-delay-200 {
  -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
  transition-delay: 0.2s !important;
}

.lp_main .anime-delay-300 {
  -webkit-animation-delay: 0.3s !important;
          animation-delay: 0.3s !important;
  transition-delay: 0.3s !important;
}

.lp_main .anime-delay-400 {
  -webkit-animation-delay: 0.4s !important;
          animation-delay: 0.4s !important;
  transition-delay: 0.4s !important;
}

.lp_main .anime-delay-500 {
  -webkit-animation-delay: 0.5s !important;
          animation-delay: 0.5s !important;
  transition-delay: 0.5s !important;
}

.lp_main .anime-delay-600 {
  -webkit-animation-delay: 0.6s !important;
          animation-delay: 0.6s !important;
  transition-delay: 0.6s !important;
}

.lp_main .anime-delay-700 {
  -webkit-animation-delay: 0.7s !important;
          animation-delay: 0.7s !important;
  transition-delay: 0.7s !important;
}

.lp_main .anime-delay-800 {
  -webkit-animation-delay: 0.8s !important;
          animation-delay: 0.8s !important;
  transition-delay: 0.8s !important;
}

.lp_main .anime-delay-900 {
  -webkit-animation-delay: 0.9s !important;
          animation-delay: 0.9s !important;
  transition-delay: 0.9s !important;
}

.lp_main .anime-delay-1000 {
  -webkit-animation-delay: 1s !important;
          animation-delay: 1s !important;
  transition-delay: 1s !important;
}

.lp_main .anime-delay-1100 {
  -webkit-animation-delay: 1.1s !important;
          animation-delay: 1.1s !important;
  transition-delay: 1.1s !important;
}

.lp_main .anime-delay-1200 {
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
  transition-delay: 1.2s !important;
}

.lp_main .anime-delay-1300 {
  -webkit-animation-delay: 1.3s !important;
          animation-delay: 1.3s !important;
  transition-delay: 1.3s !important;
}

.lp_main .anime-delay-1400 {
  -webkit-animation-delay: 1.4s !important;
          animation-delay: 1.4s !important;
  transition-delay: 1.4s !important;
}

.lp_main .anime-delay-1500 {
  -webkit-animation-delay: 1.5s !important;
          animation-delay: 1.5s !important;
  transition-delay: 1.5s !important;
}

.lp_main .anime-delay-1600 {
  -webkit-animation-delay: 1.6s !important;
          animation-delay: 1.6s !important;
  transition-delay: 1.6s !important;
}

.lp_main .anime-delay-1700 {
  -webkit-animation-delay: 1.7s !important;
          animation-delay: 1.7s !important;
  transition-delay: 1.7s !important;
}

.lp_main .anime-delay-1800 {
  -webkit-animation-delay: 1.8s !important;
          animation-delay: 1.8s !important;
  transition-delay: 1.8s !important;
}

.lp_main .anime-delay-1900 {
  -webkit-animation-delay: 1.9s !important;
          animation-delay: 1.9s !important;
  transition-delay: 1.9s !important;
}

.lp_main .anime-delay-2000 {
  -webkit-animation-delay: 2s !important;
          animation-delay: 2s !important;
  transition-delay: 2s !important;
}
.lp_main .anime-delay-2100 {
  -webkit-animation-delay: 2.1s !important;
          animation-delay: 2.1s !important;
  transition-delay: 2.1s !important;
}
.lp_main .anime-delay-2200 {
  -webkit-animation-delay: 2.2s !important;
          animation-delay: 2.2s !important;
  transition-delay: 2.2s !important;
}