@charset "UTF-8";
@media (min-width: 768px) {
  .sp-show {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .pc-show {
    display: none !important;
  }
}
img {
  width: 100%;
  height: auto;
  /* 縮小時も輪郭を比較的ハッキリ保つ */
  image-rendering: -webkit-optimize-contrast; /* Safari, Chrome用 */
  image-rendering: crisp-edges; /* 標準 */
}

.test {
  background-image: url(../img/test.jpg);
  background-size: 100%;
}

.op {
  opacity: 0.8;
}

.main {
  max-width: 750px;
  margin: 0 auto;
}

.kv {
  line-height: 0;
}

.prd {
  position: relative;
}
.prd .prd_photo {
  position: absolute;
  width: 38%;
  margin: -58.6% 0% 0% 56.3%;
  z-index: 2;
}
.prd .prd_pop {
  position: absolute;
  left: 0;
  width: 92%;
  right: 0;
  margin: -12% auto 0;
  z-index: 1;
}

.kv_under {
  background-image: url(../img/kv_under.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  height: 50%;
}
.kv_under ul {
  margin: 0;
  padding: 17% 6.7% 5.5%;
}
.kv_under ul li {
  margin: 0 0 4.8%;
}

.section1 {
  padding: 13.5% 0 0;
  background-image: url(../img/bg_mark01.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0% -12.7%;
}
.section1 .title1 {
  width: 74.3%;
  margin: 0 auto 0;
}
.section1 .logo {
  width: 16.2%;
  margin: 6.5% auto 0;
}
.section1 .title2 {
  width: 75%;
  margin: 3.6% auto 0;
}
.section1 .prd {
  padding: 5.2% 0 0;
}
.section1 .prd ul {
  display: flex;
  width: 95%;
  padding: 0 2% 0;
  margin: 0 auto;
  justify-content: space-between;
}
.section1 .prd ul li {
  width: 32%;
}
.section1 .note_wrap {
  text-align: right;
}
.section1 .note_wrap .note {
  width: 38.4%;
  margin-top: 3.2%;
  margin-right: 6.4%;
}
.section1 .title3 {
  width: 92%;
  margin: 5.4% auto 0;
}
.section1 .text1 {
  width: 80.5%;
  margin: 5% auto 0;
}
.section1 .title4 {
  width: 92%;
  margin: 8.3% auto 0;
}
.section1 .text2_wrap {
  text-align: left;
}
.section1 .text2_wrap .text2 {
  width: 68.9%;
  margin: 2.6% 0 0 5.3%;
}
.section1 .bubble {
  width: 60.5%;
  margin: 13% auto 0;
  position: relative;
  z-index: 1;
}
.section1 .examples {
  position: relative;
  z-index: 0;
}
.section1 .examples .ex1 {
  width: 76.9%;
  margin: -2.8% 0 0;
}
.section1 .examples .ex2 {
  width: 85.6%;
  margin: -19.6% 0 0 14.1%;
}
.section1 .examples .ex3 {
  width: 43.5%;
  margin: -22.3% 0 0 1.5%;
}
.section1 .examples .ex4 {
  width: 37.5%;
  margin: -25.5% 0 0 57%;
}
.section1 .examples .text3 {
  width: 26.7%;
  margin: -6.3% 0 0 5.2%;
}
.section1 .main_pop {
  width: 92%;
  margin: 9.6% auto 0;
}
.section1 .main_prd {
  width: 96.8%;
  margin: 6.9% 0 0 0%;
}
.section1 .main_btn {
  width: 91.8%;
  margin: 4% auto 0;
}
.section1 .bg1 {
  background-image: url(../img/bg_mark01.png);
  background-position: 0% -13.6%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.section1 .bg2 {
  background-image: url(../img/bg_mark02.png);
  background-position: 0% 97.5%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.section1 .bg3 {
  background-image: url(../img/bg_mark03.png);
  background-position: 0% 99.6%;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 0 0 27%;
}

.section2 {
  background-image: url(../img/sec2_bg.jpg);
  background-position: 0% 158.6%;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: -20.7% 0 0;
}
.section2 .title1 {
  width: 92%;
  margin: 5.4% auto 0;
}
.section2 .points .point1 .icon {
  width: 31.4%;
  margin: 7.3% auto 0;
}
.section2 .points .point1 .title {
  width: 94.7%;
  margin: 5.3% auto 0;
}
.section2 .points .point1 .contents {
  background-color: #e0eaf1;
  width: 89%;
  margin: -20% auto 0;
  padding: 0 0 6%;
}
.section2 .points .point1 .contents .text1 {
  width: 87.6%;
  margin: 0 auto 0;
  padding: 29.5% 0 0;
}
.section2 .points .point1 .contents .img1 {
  width: 89%;
  margin: 5.7% auto 0;
}
.section2 .points .point2 .icon {
  width: 30.7%;
  margin: 10.6% auto 0;
}
.section2 .points .point2 .title1 {
  width: 76.2%;
  margin: 5.3% auto 0;
}
.section2 .points .point2 .title2 {
  width: 94.7%;
  margin: 4.2% auto 0;
}
.section2 .points .point2 .contents {
  background-color: #e0eaf1;
  width: 89%;
  margin: -59.8% auto 0;
  padding: 39.8% 0 9%;
}
.section2 .points .point2 .contents .text1 {
  width: 88%;
  margin: 28.2% auto 0;
}
.section2 .points .point2 .contents .img1 ul {
  display: flex;
  width: 88%;
  padding: 0;
  margin: 1.5% auto 0;
  justify-content: space-between;
}
.section2 .points .point2 .contents .img1 ul li.set1 {
  width: 30%;
  padding: 5.3% 0 0;
}
.section2 .points .point2 .contents .img1 ul li.set2 {
  width: 30%;
  padding: 5.3% 0% 0;
  margin: 0 0 0 1.3%;
}
.section2 .points .point2 .contents .img1 ul li.set3 {
  width: 36.3%;
}
.section2 .points .point2 .contents .img2 ul {
  display: flex;
  width: 69%;
  padding: 0;
  margin: 0 auto 0;
  justify-content: space-between;
}
.section2 .points .point2 .contents .img2 ul li.set1 {
  width: 47.8%;
  padding: 4.7% 0 0;
}
.section2 .points .point2 .contents .img2 ul li.set2 {
  width: 47.8%;
  padding: 4.7% 0 0;
}
.section2 .points .point2 .contents .text2 {
  width: 85.4%;
  margin: 5.8% 0 0 6.1%;
}
.section2 .points .point3 .icon {
  width: 30.7%;
  margin: 12.9% auto 0;
}
.section2 .points .point3 .title1 {
  width: 54.7%;
  margin: 4.6% auto 0;
}
.section2 .points .point3 .title2 {
  width: 94.7%;
  margin: 3.3% auto 0;
}
.section2 .points .point3 .contents {
  background-color: #e0eaf1;
  width: 89%;
  margin: -40% auto 0;
  padding: 20.2% 0 4%;
}
.section2 .points .point3 .contents .text1_wrap {
  text-align: right;
}
.section2 .points .point3 .contents .text1 {
  width: 41.4%;
  margin: 25.8% 4.2% 0 auto;
}

.section3 {
  position: relative;
  z-index: 0;
}
.section3 .main {
  background-image: url(../img/sec3_bg.jpg);
  background-size: 100%;
}
.section3 .main .prd1 {
  background-image: url(../img/prd1_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 0;
  padding: 8.8% 0 0;
  margin-bottom: 1.7%;
}
.section3 .main .prd1 .prd_text {
  width: 53.5%;
  margin: 0 auto 0;
  position: relative;
  z-index: 2;
}
.section3 .main .prd1 .prd_title {
  width: 53.4%;
  margin: 86% auto 0;
  padding: 0 0 10.5%;
  position: relative;
  z-index: 2;
}
.section3 .main .prd1 .prd_photo {
  position: absolute;
  top: 0;
  z-index: 1;
}
.section3 .main .prd2 {
  background-image: url(../img/prd2_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 0;
  padding: 11.8% 0 0;
  margin-bottom: 1.3%;
}
.section3 .main .prd2 .prd_text {
  width: 40.4%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.section3 .main .prd2 .prd_title {
  width: 53.4%;
  margin: 89.2% auto 0;
  padding: 0 0 10.5%;
  position: relative;
  z-index: 2;
}
.section3 .main .prd2 .prd_photo {
  position: absolute;
  top: 0;
  z-index: 1;
}
.section3 .main .prd3 {
  background-image: url(../img/prd3_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 0;
  padding: 8.7% 0 4.2%;
}
.section3 .main .prd3 .prd_text {
  width: 37.8%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.section3 .main .prd3 .prd_title {
  width: 53.4%;
  margin: 86.5% auto 0;
  padding: 0 0 10.5%;
  position: relative;
  z-index: 2;
}
.section3 .main .prd3 .prd_photo {
  position: absolute;
  top: 0;
  z-index: 1;
}

.section4 {
  background-image: url(../img/sec4_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 2;
  margin-top: -7.3%;
  padding-top: 27%;
}
.section4 .prd_set {
  width: 96.8%;
  margin: -0.3% 0 0 0%;
}
.section4 .cta_btn {
  width: 91.8%;
  margin: 4.5% auto 0;
}
.section4 .title1 {
  width: 100%;
  margin: 21.4% 0 0 0%;
}
.section4 .title2 {
  width: 92%;
  margin: 3.3% auto 0;
}
.section4 .pro {
  background-image: url(../img/pro_bg.png);
  background-repeat: no-repeat;
  background-size: 7.67%;
  background-position: 3.7% 2%;
  padding: 0 0 0 10.8%;
  margin-top: 9.4%;
}
.section4 .pro .title {
  width: 87%;
  margin: 0 auto 0;
}
.section4 .pro .pro_box1 {
  margin-top: 7.3%;
}
.section4 .pro .pro_box2 {
  margin-top: 6.3%;
}
.section4 .amb {
  background-image: url(../img/amb_bg.png);
  background-repeat: no-repeat;
  background-size: 7.6%;
  background-position: 96.6% 0.2%;
  padding: 0 10.6% 0 0;
  margin-top: 9.4%;
}
.section4 .amb .title {
  width: 71.8%;
  margin: 0 auto 0;
}
.section4 .amb .amb_box1 {
  margin-top: 5.9%;
}
.section4 .amb .amb_box2 {
  margin-top: 6%;
}

.section5 {
  padding: 9% 0 0% 0;
  background-image: url(../img/sec5_bg.jpg);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}
.section5 .title1 {
  width: 92%;
  margin: 0 auto 0;
}
.section5 .img_set {
  padding: 8% 0 0 0;
}
.section5 .img_set ul {
  display: flex;
  justify-content: space-between;
  width: 84%;
  margin: 0 auto;
  gap: 7.7%;
}
.section5 .img_set ul li {
  width: 100%;
}
.section5 .img_set ul li.img1 {
  position: relative;
}
.section5 .img_set ul li.img2 {
  position: relative;
  left: -1.4%;
}
.section5 .img_set ul li.img3 {
  position: relative;
  left: -3.2%;
  margin-top: 5.2%;
}
.section5 .img_set ul li.img4 {
  position: relative;
  margin-top: 7.6%;
  left: -0.8%;
}
.section5 .title2 {
  width: 92%;
  margin: 7.9% auto 0;
}
.section5 .prd {
  width: 96.8%;
  margin: 5.3% 0 0 0%;
}
.section5 .cta_btn {
  width: 91.8%;
  margin: 4.3% auto 0;
}
.section5 .howto {
  padding: 29.1% 0 0 0;
}
.section5 .howto .howto_title1 {
  width: 63.2%;
  margin: 0% auto 8%;
}
.section5 .howto .howto_title2 {
  width: 94.4%;
  margin: 0% auto 0;
}
.section5 .howto .howto_box_wrap {
  position: relative;
  padding: 4.8% 0 11%;
  margin: -4.8% 0 0;
}
.section5 .howto .howto_box_wrap .howto_img1 {
  position: absolute;
  top: 37.8%;
  width: 92%;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.section5 .howto .howto_box {
  background-image: url(../img/howto_line.png);
  background-repeat: no-repeat;
  background-size: 1.05%;
  background-position: 11.5% -1%;
  display: flex;
}
.section5 .howto .howto_box .howto_left {
  width: 20%;
}
.section5 .howto .howto_box .howto_right {
  flex: 1;
  text-align: left;
}
.section5 .howto .howto_box .howto_clock {
  width: 66%;
  margin: 0 0 0 27%;
}
.section5 .howto .howto_box .howto_clock .clock01 {
  margin: 51% 0 152%;
}
.section5 .howto .howto_box .howto_clock .clock02 {
  margin: 0% 0 375%;
}
.section5 .howto .howto_box .howto_clock .clock03 {
  margin: 0% 0 180%;
}
.section5 .howto .howto_box .howto_clock .clock04 {
  margin: 0% 0 65%;
}
.section5 .howto .howto_box .howto_clock .clock05 {
  margin: 0% 0 40%;
}
.section5 .howto .howto_box .howto_text {
  width: 89.3%;
  margin: 0 0 0 0.7%;
}
.section5 .howto .howto_box .howto_text .text01 {
  margin: 9.5% 0 7.5%;
}
.section5 .howto .howto_box .howto_text .text02 {
  margin: 0% 0 56%;
}
.section5 .howto .howto_box .howto_text .text03 {
  margin: 0% 0 7%;
}
.section5 .howto .howto_box .howto_text .text04 {
  margin: 0% 0 5.3%;
}
.section5 .howto .howto_box .howto_text .text05 {
  margin: 0% 0 0%;
}

.section6 {
  padding: 6.4% 0 0%;
  position: relative;
  background-image: url(../img/sec6_bg.jpg);
  background-position: 0% -66.5%;
  background-repeat: no-repeat;
  background-size: 100%;
}
.section6 .title1 {
  width: 94.5%;
  margin: 1% auto 2%;
  position: relative;
  z-index: 2;
}
.section6 .sec6_box {
  position: relative;
  z-index: 1;
  margin: -7.2% 0 0 0;
  padding: 11.6% 0 3.5%;
}
.section6 .sec6_box ul {
  display: flex;
  margin: 0 0 3.8%;
}
.section6 .sec6_box ul li {
  width: 50%;
}
.section6 .sec6_box ul li:nth-child(odd) img {
  width: 85.5%;
  margin: 0 0 0 10.6%;
}
.section6 .sec6_box ul li:nth-child(even) img {
  width: 85.5%;
  margin: 0 0 0 4.2%;
}
.section6 .sec6_prd {
  padding-bottom: 6.6%;
}
.section6 .sec6_prd .sec6_pop {
  width: 89.3%;
  margin: 12.3% auto 0;
}
.section6 .sec6_prd .title2 {
  width: 64.1%;
  margin: 3.3% auto 2.9%;
}
.section6 .sec6_prd .note {
  width: 37.5%;
  margin: 0 auto 3%;
}
.section6 .sec6_prd .prd_box {
  display: flex;
}
.section6 .sec6_prd .prd_box .prd_photo {
  width: 44%;
}
.section6 .sec6_prd .prd_box .prd_text {
  flex: 1;
}
.section6 .sec6_prd .prd_box .prd_text .prd_price {
  width: 47.7%;
  margin: 0% 0 5% 10%;
}
.section6 .sec6_prd .prd_box .prd_text .prd_btn {
  width: 86%;
  margin: 0% 0 1% 2%;
}
.section6 .sec6_prd .prd_box.prd_box1 {
  background-image: url(../img/sec6_line.png);
  background-repeat: no-repeat;
  background-size: 96%;
  background-position: 0% 48.3%;
  position: relative;
  z-index: 3;
}
.section6 .sec6_prd .prd_box.prd_box1 .prd_photo .prd_img {
  width: 92.3%;
  margin: 30.8% 0 0 10%;
}
.section6 .sec6_prd .prd_box.prd_box1 .prd_text .prd_title {
  width: 69.2%;
  margin: 41.4% 0 18% 10%;
}
.section6 .sec6_prd .prd_box.prd_box2 {
  margin-top: -10%;
  background-image: url(../img/sec6_line.png);
  background-repeat: no-repeat;
  background-size: 96%;
  background-position: 0% 48.3%;
  position: relative;
  z-index: 2;
}
.section6 .sec6_prd .prd_box.prd_box2 .prd_photo .prd_img {
  width: 92.3%;
  margin: 30.8% 0 0 10%;
}
.section6 .sec6_prd .prd_box.prd_box2 .prd_text .prd_title {
  width: 75%;
  margin: 38.7% 0 17.8% 10%;
}
.section6 .sec6_prd .prd_box.prd_box3 {
  margin-top: -11.1%;
  background-image: url(../img/sec6_line.png);
  background-repeat: no-repeat;
  background-size: 96%;
  background-position: 0% 49.7%;
  position: relative;
  z-index: 1;
}
.section6 .sec6_prd .prd_box.prd_box3 .prd_photo .prd_img {
  width: 92.3%;
  margin: 34.7% 0 0 10%;
}
.section6 .sec6_prd .prd_box.prd_box3 .prd_text .prd_title {
  width: 59%;
  margin: 44% 0 15.5% 10%;
}
.section6 .btn_big {
  width: 92%;
  margin: 0 auto 0;
  padding: 0 0 7.6%;
}

.site_footer {
  padding: 10% 0 8.8%;
}
.site_footer .footer_nav {
  text-align: center;
  margin: 0 0 5.2%;
}
@media (max-width: 767px) {
  .site_footer .footer_nav {
    font-size: 85%;
  }
}
@media (min-width: 768px) {
  .site_footer .footer_nav {
    font-size: 155%;
  }
}
.site_footer .footer_nav a {
  color: #000;
  text-decoration: none;
}
.site_footer .footer_nav a:hover {
  text-decoration: underline;
}
.site_footer .copyright {
  text-align: center;
  margin: 0;
}
@media (max-width: 767px) {
  .site_footer .copyright {
    font-size: 75%;
  }
}
@media (min-width: 768px) {
  .site_footer .copyright {
    font-size: 134%;
  }
}

/* 共通設定 */
.reveal {
  opacity: 0;
  /* 変数がなければ空、あればそれを反映しつつ下に30pxずらす */
  transform: var(--original-transform, ) translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden;
}

/* 表示時 */
.reveal.active {
  opacity: 1;
  /* 元のtransformを維持したまま、位置だけ0に戻す */
  transform: var(--original-transform, ) translateY(0);
  visibility: visible;
}

/* 3段階のタイミング */
.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.3s;
}

.delay-3 {
  transition-delay: 0.5s;
}

.bg-reveal {
  /* アニメーションの初期状態：左側に隠す */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* スルスルっと動くイージング */
}

/* クラスがついた時に全表示 */
.bg-reveal.active {
  clip-path: inset(0 0 0 0);
}/*# sourceMappingURL=style.css.map */