@charset "UTF-8";
/* 読み込み
===================================================== */
/* line-heightの上下をなくす
===================================================== */
/* letter-spacingの文末をなくす
===================================================== */
/* clearfix
===================================================== */
/* hover
===================================================== */
/* linkcolor
===================================================== */
/* z-index
===================================================== */
/* rem変換
===================================================== */
/* vw変換(SP用)
===================================================== */
/* vw変換(PC用) minとmax
===================================================== */
/* spサイズをpcへ引き伸ばし
===================================================== */
/* ラインハイト計算
===================================================== */
/* レタースペーシング計算
===================================================== */
/* right-arrow
===================================================== */
/* aspect-area(padding-top)
===================================================== */
/* aspect-area-h(height)
===================================================== */
/* youtube
===================================================== */
/* margin: 0 auto
===================================================== */
/* color
===================================================== */
/* font-size
===================================================== */
/* font-family
===================================================== */
/* コンテンツ幅
===================================================== */
/* 余白
===================================================== */
/* メディアクエリー
===================================================== */
/* loopslide
============================================ */
/* fadeinWrap
============================================ */
/* fadein
============================================ */
/* fadeup
============================================ */
/* slide
===================================================== */
/* 
===================================================== */
.bg__green {
  background-color: #dce5dc;
}
@media screen and (min-width: 768px) {
  .bg__green {
    padding-top: min(3.6842105263vw, 35px);
    padding-bottom: min(12.6315789474vw, 120px);
    margin-bottom: min(14vw, 133px);
  }
}
@media screen and (max-width: 767px) {
  .bg__green {
    padding-top: 18.6666666667vw;
    padding-bottom: 18.6666666667vw;
    margin-bottom: 17.3333333333vw;
  }
}

.title {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .title {
    width: min(74.2105263158vw, 705px);
    margin-bottom: min(8.2105263158vw, 78px);
  }
}
@media screen and (max-width: 767px) {
  .title {
    width: 72vw;
    margin-bottom: 17.3333333333vw;
  }
}

.step {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  position: relative;
}
@media screen and (min-width: 768px) {
  .step {
    gap: min(7.3684210526vw, 70px);
    margin-bottom: min(10.2105263158vw, 97px);
    width: min(84.2105263158vw, 800px);
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .step {
    margin-bottom: 7.4666666667vw;
    padding: 0 7.2vw 0 5.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .step li:first-of-type {
    margin-right: 10px;
  }
}
.step li .step_img {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
@media screen and (min-width: 768px) {
  .step li .step_img {
    height: min(27.3684210526vw, 260px);
    margin-bottom: min(3.8947368421vw, 37px);
  }
}
@media screen and (max-width: 767px) {
  .step li .step_img {
    height: 30.6666666667vw;
    margin-bottom: 5.8666666667vw;
  }
}
.step li .step_text {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .step li .step_text {
    width: min(33.3684210526vw, 317px);
    font-size: min(1.6842105263vw, 16px);
    line-height: 1.875;
  }
}
@media screen and (max-width: 767px) {
  .step li .step_text {
    width: 36.5333333333vw;
    font-size: 2.9333333333vw;
    line-height: 1.9090909091;
  }
}
.step .step_arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .step .step_arrow {
    width: min(2.8421052632vw, 27px);
    top: min(10vw, 95px);
  }
}
@media screen and (max-width: 767px) {
  .step .step_arrow {
    width: 3.7333333333vw;
    top: 13.3333333333vw;
  }
}

@media screen and (min-width: 768px) {
  .qr {
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border: 1px solid #333333;
    border-radius: 10px;
    width: min(62.1052631579vw, 590px);
    padding: min(1.8947368421vw, 18px) min(5.7894736842vw, 55px);
  }
  .qr .qr_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .qr .qr_left {
    display: flex;
    align-items: center;
    gap: min(3.1578947368vw, 30px);
  }
  .qr .qr_iphone {
    width: min(6.7368421053vw, 64px);
  }
  .qr .qr_text {
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 2.1176470588;
    font-size: min(1.7894736842vw, 17px);
  }
  .qr .qr_qr {
    width: min(13.6842105263vw, 130px);
  }
}
.bottom {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .bottom {
    width: min(84.9473684211vw, 807px);
    padding-bottom: min(12.6315789474vw, 120px);
  }
}
@media screen and (max-width: 767px) {
  .bottom {
    width: 88vw;
    padding-bottom: 22.6666666667vw;
  }
}

.attn {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 600;
  font-style: normal;
}
@media screen and (min-width: 768px) {
  .attn {
    border: 1px dotted #707070;
    padding: min(5.7894736842vw, 55px) min(7.8947368421vw, 75px);
    margin-bottom: min(6.8421052632vw, 65px);
  }
}
.attn h2 {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .attn h2 {
    font-size: min(1.8947368421vw, 18px);
    margin-bottom: min(4.2105263158vw, 40px);
  }
}
@media screen and (max-width: 767px) {
  .attn h2 {
    font-size: 4.8vw;
    margin-bottom: 5.6vw;
  }
}
.attn ul {
  padding-left: 1.4em;
}
@media screen and (max-width: 767px) {
  .attn ul {
    margin-bottom: 9.6vw;
  }
}
.attn ul li {
  position: relative;
}
@media screen and (min-width: 768px) {
  .attn ul li {
    font-size: min(1.4736842105vw, 14px);
    line-height: 2.1428571429;
  }
}
@media screen and (max-width: 767px) {
  .attn ul li {
    font-size: 3.2vw;
    line-height: 1.6;
    margin-bottom: 2.6666666667vw;
  }
}
.attn ul li::before {
  content: "■";
  position: absolute;
  top: 0;
  left: -1.4em;
}

.prevBtn {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 600;
  font-style: normal;
}
@media screen and (min-width: 768px) {
  .prevBtn {
    font-size: min(1.2631578947vw, 12px);
    padding: min(2.2105263158vw, 21px) min(2.6315789474vw, 25px);
    width: fit-content;
    margin-right: auto;
    border: 1px solid #707070;
  }
}
@media screen and (max-width: 767px) {
  .prevBtn {
    font-size: 3.7333333333vw;
    width: 100%;
    margin-top: 10.6666666667vw;
    border: 0.2666666667vw solid #707070;
    text-align: center;
    position: relative;
    line-height: 16.5333333333vw;
  }
}
.prevBtn a {
  display: block;
}
.prevBtn svg {
  display: block;
}
@media screen and (min-width: 768px) {
  .prevBtn svg {
    width: min(2.5263157895vw, 24px);
    margin-top: min(1.0526315789vw, 10px);
  }
}
@media screen and (max-width: 767px) {
  .prevBtn svg {
    width: 6.4vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 4.5333333333vw;
  }
}

/* .modal
===================================================== */
@media screen and (max-width: 767px) {
  .modal {
    background-color: #484747;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 1.8333333333;
    font-size: 3.2vw;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    display: none;
    z-index: 100;
  }
  .modal .modal_inner {
    height: calc(100vh - 20.8vw);
    height: calc(100svh - 20.8vw);
    width: calc(100% - 14.9333333333vw);
    overflow: auto;
    background-color: #fff;
    margin: 10.4vw auto;
    padding: 6.1333333333vw 6.6666666667vw;
  }
  .modal .modal_inner::-webkit-scrollbar {
    background-color: transparent;
    width: 6px;
  }
  .modal .modal_inner::-webkit-scrollbar-thumb {
    background-color: #ccc8c8;
    border-radius: 999px;
    width: 6px;
  }
  .modal .modal_inner.scrollbar {
    width: 6px;
    scrollbar-color: #ccc8c8 transparent;
  }
  .modal .modal_close {
    position: fixed;
    top: 15px;
    right: 15px;
    border-radius: 50%;
    background-color: #707070;
    width: 56px;
    height: 56px;
    z-index: 101;
  }
  .modal .modal_close span {
    display: block;
    width: 25px;
    height: 2px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 0;
  }
  .modal .modal_close span:first-of-type {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .modal .modal_close span:last-of-type {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .modal .modal_scroll {
    cursor: pointer;
    position: fixed;
    z-index: 2;
    bottom: 10.1333333333vw;
    right: 7.2vw;
    width: 12vw;
    height: 12vw;
    border: 1px solid #707070;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.9333333333vw;
    transition: opacity 0.5s;
  }
  .modal .modal_scroll.hide {
    opacity: 0;
    pointer-events: none;
  }
  .modal .modal_scroll svg {
    width: 1.6vw;
  }
  .modal h2 {
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    font-size: 4.2666666667vw;
    line-height: 1.6875;
    margin-bottom: 5.8666666667vw;
  }
  .modal h3 {
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 3.7333333333vw;
    margin-bottom: 3.7333333333vw;
    line-height: 1.6;
  }
  .modal .modal_attn {
    padding-left: 1.4em;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 9.3333333333vw;
    font-size: 3.2vw;
    line-height: 1.6;
  }
  .modal .modal_attn li {
    position: relative;
    margin-bottom: 2.6666666667vw;
  }
  .modal .modal_attn li::before {
    content: "■";
    position: absolute;
    top: 0;
    left: -1.4em;
  }
  .modal .modal_policyText__bottom {
    margin-bottom: 8vw;
  }
  .modal .modal_policyList::before, .modal .modal_policyList::after {
    content: "=========";
    display: block;
    margin: 2.6666666667vw 0;
  }
  .modal .modal_policyList li:not(:last-of-type) {
    margin-bottom: 2.6666666667vw;
  }
  .modal .modal_policyList a {
    color: #5ba0f0;
    text-decoration: underline;
  }
  .modal .modal_policyBtn {
    text-align: center;
    font-size: 3.7333333333vw;
    margin-bottom: 4vw;
  }
  .modal .modal_policyBtn input {
    margin-right: 1.8666666667vw;
    cursor: pointer;
  }
  .modal .modal_checkText {
    color: #e7682d;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    opacity: 1;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .modal .modal_checkText {
    font-size: 2.6666666667vw;
    margin-bottom: 1.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .modal .modal_checkText.hide {
    opacity: 0;
  }
}

/* .preview
===================================================== */
.preview {
  display: none;
}
@media screen and (max-width: 767px) {
  .preview {
    padding: 13.3333333333vw 0 18.6666666667vw;
    width: 65.6vw;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.2vw;
    line-height: 1.6;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  .preview .previewImgArea {
    position: relative;
  }
  .preview #previewImg {
    border: 1px solid #707070;
    margin-bottom: 4vw;
    position: relative;
    z-index: 1;
  }
  .preview .previewModal {
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 3.7333333333vw;
    line-height: 20vw;
    width: 26.6666666667vw;
    text-align: center;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border-radius: 3.2vw;
    transition: opacity 0.5s;
    opacity: 1;
    pointer-events: all;
  }
  .preview .previewModal.hide {
    pointer-events: none;
    opacity: 0;
  }
  .preview .previewText {
    padding-bottom: 11.4666666667vw;
    position: relative;
  }
  .preview .previewText .previewText_err {
    display: block;
    color: #e7682d;
    text-align: center;
    font-size: 2.4vw;
    line-height: 1.3333333333;
    position: absolute;
    bottom: 2.6666666667vw;
    left: 0;
    width: 100%;
    opacity: 0;
  }
  .preview .previewText .previewText_err.show {
    opacity: 1;
  }
  .preview .aiBtn__diagnosis {
    margin-bottom: 4vw;
  }
  .preview .aiBtn__diagnosis img {
    width: 6.6666666667vw;
  }
  .preview .aiBtn__diagnosis.touchNone {
    pointer-events: none;
  }
  .preview .previewChange {
    display: flex;
    justify-content: center;
    gap: 2.6666666667vw;
  }
  .preview .previewChange img {
    width: 3.7333333333vw;
  }
  .preview .previewChange span {
    text-decoration: underline;
  }
  .preview .previewChange.touchNone {
    pointer-events: none;
  }
}

/* .error
===================================================== */
.error {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90vw;
  height: 40vh;
  max-height: 260px;
  padding: 8vw;
  gap: 8vw;
  background-color: #fff;
  border: 1px solid #707070;
  border-radius: 3.2vw;
  font-size: 3.7333333333vw;
  line-height: 1.6;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 600;
  font-style: normal;
  transition: opacity 0.5s;
  opacity: 1;
  pointer-events: all;
}
.error .error_btn {
  background-color: #707070;
  color: #fff;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 65.8666666667vw;
  border-radius: 1.3333333333vw;
  line-height: 14.6666666667vw;
}
.error.hide {
  pointer-events: none;
  opacity: 0;
}/*# sourceMappingURL=ai.css.map */