@charset "UTF-8";
/* ---------------------------------------------
 PRODUCT STYLES
 --------------------------------------------- */
.guideSection .txt {
  padding: 0;
}
.guideSection .txt p {
  padding-right: 5%;
}
.guideSection .pageNav {
  margin: 2em auto 0;
}
.guideSection .pageNav .btn {
  flex-grow: 1;
  margin: 0 auto 1em;
  font-size: 1em;
  background: var(--keyColor3);
  color: var(--fontColor);
  text-align: center;
  white-space: nowrap;
}
.guideSection .pageNav .btn:before {
  display: none;
}
.guideSection .pageNav .btn:hover {
  background: var(--keyColor);
  color: #fff;
}

.guideSection .sec_type01 .colWrap .img {
  flex: 0 1 51.34%;
  padding: 0;
  z-index: 1;
}
.guideSection .sec_type01 .colWrap .img .img-inner {
  clip-path: url(#mask1);
  max-width: 440px;
  margin: 0 auto;
}
.guideSection .sec_type01 .colWrap .img .img-inner:before {
  content: 0.0022624434, 0.0027855153;
  padding: 81.221719457% 0 0;
}
.guideSection .sec_type01 .colWrap .img .imgItem {
  position: relative;
}
.guideSection .sec_type01 .colWrap .img .imgItem:before, .guideSection .sec_type01 .colWrap .img .imgItem:after {
  content: "";
  display: block;
  position: absolute;
}
.guideSection .sec_type01 .colWrap .img .imgItem {
  max-width: 575px;
}
.guideSection .sec_type01 .colWrap .img .imgItem:before {
  width: 27.652173913%;
  height: 0;
  padding: 9.5652173913% 0 0;
  left: 0;
  top: 0;
  background: url(../images/common/cloud2.svg) no-repeat 0 0;
  background-size: contain;
  z-index: 1;
}
.guideSection .sec_type01 .colWrap .img .imgItem:after {
  width: 15.3043478261%;
  height: 0;
  padding: 5.3913043478% 0 0;
  right: 0;
  bottom: 0;
  background: url(../images/common/cloud1.svg) no-repeat 0 0;
  background-size: contain;
}
.guideSection .txt p {
  letter-spacing: 0;
}

@media only screen and (min-width: 768px) {
  .guideSection .pageNav {
    margin: -2em 0 0;
    gap: 0 1em;
    max-width: 57%;
  }
  .guideSection .pageNav .btn {
    margin: 0;
    flex: 1 1 33.33%;
    font-size: 0.875em;
  }
}
.businessSection .ttl + p {
  margin-bottom: 9.9502487562%;
}
.businessSection .bg {
  padding: 7% 6%;
}
.businessSection .article {
  margin: 0 auto;
  padding: 7% 0;
  max-width: 760px;
}
.businessSection .ttl_m {
  margin: 0 0 1.5em;
  padding: 0 0 0.35em;
  font-size: 1.6875em;
  background: url(../images/common/ttl_line.png) no-repeat 0 bottom;
}
.businessSection .txt {
  font-size: 0.9375em;
}
@media only screen and (min-width: 768px) {
  .businessSection .colWrap {
    gap: 0 6%;
  }
  .businessSection .img {
    width: 46.7105263158%;
  }
  .businessSection .txt {
    flex-grow: 1;
    max-width: 314px;
  }
}

.businessSection {
  position: relative;
}
.businessSection:before {
  content: "";
  display: block;
  position: absolute;
  top: 15%;
  bottom: auto;
  right: auto;
  left: 12.65625%;
  width: 3.9583333333%;
  height: 0;
  padding: 2.6041666667% 0 0;
  background: url(../images/common/moyou1.png) no-repeat 0 0;
  background-size: contain;
}

.businessSection {
  position: relative;
}
.businessSection:after {
  content: "";
  display: block;
  position: absolute;
  top: 28%;
  bottom: auto;
  right: 9.375%;
  left: auto;
  width: 3.4375%;
  height: 0;
  padding: 3.125% 0 0;
  background: url(../images/common/moyou2.png) no-repeat 0 0;
  background-size: contain;
}

.giftSection .bg {
  padding: 11% 6% 14%;
}
.giftSection .ttl_m {
  margin: 0 0 3em;
  font-size: 1.4375 em;
}
.giftSection .txt {
  font-size: 0.9375em;
}
.giftSection .giftFrame {
  max-width: 900px;
  margin: 9% auto 0;
}
.giftSection .giftFrame img {
  margin: 0 auto;
}
.giftSection .giftFrame .item {
  margin: 1em 0 0;
}
@media only screen and (min-width: 768px) {
  .giftSection .colWrap {
    gap: 0 2em;
  }
}

.giftSection {
  position: relative;
}
.giftSection:before {
  content: "";
  display: block;
  position: absolute;
  top: 7%;
  bottom: auto;
  right: 10.7291666667%;
  left: auto;
  width: 4.0104166667%;
  height: 0;
  padding: 2.65625% 0 0;
  background: url(../images/common/moyou1_d.png) no-repeat 0 0;
  background-size: contain;
}

.giftSection {
  position: relative;
}
.giftSection:after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  bottom: 5%;
  right: auto;
  left: 10.8854166667%;
  width: 3.4375%;
  height: 0;
  padding: 3.125% 0 0;
  background: url(../images/common/moyou2.png) no-repeat 0 0;
  background-size: contain;
}

@media only screen and (max-width: 1920px) {
  .orderSection {
    padding: 10% 0 11.75%;
  }
}
.orderSection .container {
  max-width: 1202px;
}
.orderSection .ttl {
  margin: 0 -0.5em 2.5em;
  letter-spacing: 0.08em;
  font-size: 1.5625em;
}
.orderSection .numberFrame {
  margin: 0 auto 3.75em;
  max-width: 820px;
  gap: 0 5em;
}
.orderSection .numberFrame .box {
  flex-grow: 1;
  text-align: center;
}
.orderSection .numberFrame .box .head {
  padding: 0.275em;
  background: #fff;
  border-radius: 99999px;
  line-height: 1.8;
}
.orderSection .numberFrame .box .num {
  font-size: 3.4375em;
  color: var(--fontColor);
}
@media print, screen and (max-width: 991px) and (min-width: 768px) {
  .orderSection .numberFrame {
    font-size: 0.85em;
  }
}
.orderSection .bnr_order {
  display: block;
  position: relative;
  text-decoration: none;
}
.orderSection .bnr_order .txt {
  display: none;
}
.orderSection .bnr_order:hover {
  opacity: 0.7;
}

.directSection .img {
  flex: 1 1 50%;
  padding: 0 4.9%;
}
.directSection .img .img-inner {
  clip-path: url(#mask2);
  max-width: 508px;
}
.directSection .img .img-inner:before {
  content: 0.0019607843, 0.0029239766;
  padding: 67.0588235294% 0 0;
}

.directSection {
  position: relative;
}
.directSection:before {
  content: "";
  display: block;
  position: absolute;
  top: 25%;
  bottom: auto;
  right: auto;
  left: 14.3229166667%;
  width: 4.0104166667%;
  height: 0;
  padding: 2.65625% 0 0;
  background: url(../images/common/moyou1.png) no-repeat 0 0;
  background-size: contain;
}

.directSection {
  position: relative;
}
.directSection:after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  bottom: 0;
  right: 12.7604166667%;
  left: auto;
  width: 3.4375%;
  height: 0;
  padding: 3.125% 0 0;
  background: url(../images/common/moyou2.png) no-repeat 0 0;
  background-size: contain;
}

/* index幅991px以下から
------------------------------------------------------------*/
/* index幅767px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .guideSection {
    padding-top: 2.5em !important;
  }
  .guideSection .sec_type01 .inner {
    align-items: initial;
    margin-top: 0;
  }
  .guideSection .txt {
    margin-top: 2.5em;
  }
  .orderSection .ttl {
    margin: 0 0 1.75em;
  }
  .orderSection .numberFrame {
    margin: 0 0 1.35em;
  }
  .orderSection .numberFrame .box {
    max-width: 280px;
    margin: 0 auto 1em;
  }
  .orderSection .numberFrame .box .num {
    font-size: 2.4em;
    line-height: 1.8;
  }
  .businessSection .bg,
  .giftSection .bg {
    margin-left: -30px;
    margin-right: -30px;
    padding: 25px;
  }
  .businessSection .article {
    padding: 1em 0;
  }
  .businessSection .article + .article {
    margin-top: 2em;
  }
  .businessSection .article .colWrap {
    margin: 0 auto;
    max-width: 355px;
  }
  .businessSection .article .img {
    margin-top: 2.5em;
  }
  .giftSection .bg {
    padding-top: 40px;
  }
  .giftSection .box + .box {
    margin-top: 3em;
  }
  .orderSection .ttl {
    font-size: 1.4em;
    line-height: 1.5;
  }
  .orderSection .numberFrame .box .head {
    font-size: 0.9em;
    margin: 0 auto;
    max-width: 17em;
    line-height: 1.3;
  }
  .guideSection .sec_type01 .colWrap .imgItem:before {
    width: 159px;
    height: 55px;
    padding: 0;
  }
  .guideSection .sec_type01 .colWrap .imgItem:after {
    width: 88px;
    height: 31px;
    padding: 0;
  }
  .businessSection:before {
    width: 34px;
    height: 23px;
    top: 2%;
    left: 8%;
  }
  .businessSection:after {
    width: 28px;
    height: 26px;
    right: 5%;
    top: 9.85%;
    bottom: auto;
  }
  .giftSection:before {
    width: 28px;
    height: 26px;
    top: 3%;
    right: 6%;
  }
  .giftSection:after {
    width: 34px;
    height: 23px;
    bottom: 1.75%;
    left: 3%;
    z-index: -1;
  }
  .directSection {
    padding-bottom: 3% !important;
  }
  .directSection:before {
    width: 34px;
    height: 23px;
    left: 6%;
  }
  .directSection:after {
    width: 28px;
    height: 26px;
    bottom: -2.05%;
    right: 5%;
  }
}
/* index幅374px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 374px) {
  .businessSection .bg,
  .giftSection .bg {
    margin-left: -20px;
    margin-right: -20px;
  }
}

/*# sourceMappingURL=product.css.map */