@charset "UTF-8";

html {
  font-size: 16px;
}

#questionnaire-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic StdN", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "YuGothic Medium", "游ゴシック", "Yu Gothic", メイリオ, Meiryo, sans-serif;
  width: 100%;
  max-width: 46.875rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* margin style */
.mb-5 {
  margin-bottom: 0.66667vw;
}

.mb-10 {
  margin-bottom: 1.33333vw;
}

.mb-15 {
  margin-bottom: 2vw;
}

.mb-20 {
  margin-bottom: 2.66667vw;
}

.mb-30 {
  margin-bottom: 4vw;
}

.mb-35 {
  margin-bottom: 4.66667vw;
}

.mb-40 {
  margin-bottom: 5.33333vw;
}

.mb-45 {
  margin-bottom: 6vw;
}

.mb-50 {
  margin-bottom: 6.66667vw;
}

.mb-55 {
  margin-bottom: 7.33333vw;
}

.mb-60 {
  margin-bottom: 8vw;
}

.mb-65 {
  margin-bottom: 8.66667vw;
}

.mb-70 {
  margin-bottom: 9.33333vw;
}

.mb-75 {
  margin-bottom: 10vw;
}

.mb-80 {
  margin-bottom: 10.66667vw;
}

.mb-85 {
  margin-bottom: 11.33333vw;
}

.mb-90 {
  margin-bottom: 12vw;
}

.mb-95 {
  margin-bottom: 12.66667vw;
}

.mb-100 {
  margin-bottom: 13.33333vw;
}

.mb-105 {
  margin-bottom: 14vw;
}

.mb-110 {
  margin-bottom: 14.66667vw;
}

.mb-150 {
  margin-bottom: 20vw;
}

/* padding style */
.pr-25 {
  padding-right: 3.33333vw;
}

.pr-35 {
  padding-right: 4.66667vw;
}

.pl-15 {
  padding-left: 2vw;
}

.pl-25 {
  padding-left: 3.33333vw;
}

.pl-35 {
  padding-left: 4.66667vw;
}

.pb-60 {
  padding-bottom: 8vw;
}

/* font size style */
/* contents style */
/* TOPコンテンツ */
.top-content {
  padding-right: 4.66667vw;
  padding-left: 4.66667vw;
}

.top-content #text_01,
.top-content #subtitle_01,
.top-content #subtitle_02,
.top-content #text_02-02,
.top-content #text_01-02,
.top-content #text_02-03 {
  text-align: left;
}

/* クエスチョンとアコーディオンエリア */
.q1-content {
  text-align: center;
  padding-right: 4.26667vw;
  padding-left: 4.26667vw;
}

.q1-content .question1-accordion,
.q1-content .question2-accordion,
.q1-content .question3-accordion,
.q2-content .question1-accordion,
.q2-content .question2-accordion,
.q2-content .question3-accordion,
.q3-content .question1-accordion,
.q3-content .question2-accordion,
.q3-content .question3-accordion {
  display: none;
  text-align: center;
}

.q1-content .question1-accordion {
  position: relative;
}

.q1-content .question1-accordion .q1_gif {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.q1-content .q1-accordion_01 .q1_icon {
  position: absolute;
  top: 800px;
  left: 2%;
}

.q1-content .question1-accordion .q1_gif .q1_anime img {
  width: 74.66666vw;
  max-width: 560px;
  height: 42vw;
  max-height: 315px;
}

.q1-content .question-button,
.q2-content .question-button,
.q3-content .question-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
}

.q2-content .question-button,
.q3-content .question-button {
  padding: 0 4.26%;
}

.q1-content .question-button .yes-button_01,
.q2-content .question-button .yes-button_01,
.q3-content .question-button .yes-button_01 {
  margin-right: 4vw;
}

/* gifアニメの比率 */
.q1_anime img {
  width: 74.66667vw;
  max-width: 35rem;
  height: 42vw;
  max-height: 19.6875rem;
}

/* CTAエリア */
.cta-area {
  position: relative;
  background: #f8f8f8;
}

.cta-area .cta-button-01 {
  position: absolute;
  top: 92%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
  width: min(690px, 92vw);
}

.cta-area .cta-button-02 {
  position: absolute;
  top: 92%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
  width: 94%;
}

.cta-area .cta-button-01 {
  pointer-events: auto;
}

.cta-area .cta-button-02 {
  pointer-events: auto;
}

/* img width and height style w/ python */

.header--logo img {
  width: 37.86667vw;
  max-width: 17.75rem;
  height: 6.66667vw;
  max-height: 3.125rem;
}

/* ここのサイズを設定するところから */

.text_01 img {
  width: 83.2vw;
  max-width: 624px;
  height: 11.46666vw;
  max-height: 86px;
}

.img_01 img {
  width: 90.66667vw;
  max-width: 680px;
  height: auto;
}

.img_02 img {
  width: 89.33333vw;
  max-width: 680px;
  height: auto;
}

.title_03 img {
  width: 82.66666vw;
  max-width: 620px;
  height: 22.26666vw;
  max-height: 82px;
}

.text_02 img {
  width: 56.13333vw;
  max-width: 26.3125rem;
  height: 12.8vw;
  max-height: 6rem;
}

.text_02-02 img {
  width: 63.2vw;
  max-width: 474px;
  height: 11.066666vw;
  max-height: 83px;
}

.text_02-03 img {
  width: 81.6vw;
  max-width: 612px;
  height: 26.66666vw;
  max-height: 200px;
}

.q1-title_01 img,
.q2-title_01 img,
.q3-title_01 img {
  display: block;
  width: 100%;
  height: auto;
}

.q1-text_01 img {
  width: min(570px, 76vw);
}

.q1-img_01 img {
  width: 89.33333vw;
  max-width: 670px;
  height: 53.33333vw;
  max-height: 400px;
}

.yes-buttonJS img {
  width: 42.13333vw;
  max-width: 19.75rem;
  height: 16.13333vw;
  max-height: 7.5625rem;
}

.yes-button img {
  width: 42.26667vw;
  max-width: 19.8125rem;
  height: 16.13333vw;
  max-height: 7.5625rem;
}

.no-button img {
  width: 42.26667vw;
  max-width: 19.8125rem;
  height: 16.13333vw;
  max-height: 7.5625rem;
}

.no-buttonJS img {
  width: 42.13333vw;
  max-width: 19.75rem;
  height: 16.13333vw;
  max-height: 7.5625rem;
}

.q1-accordion_01 img {
  width: 90.66666vw;
  max-width: 680px;
  height: 211.46666vw;
  max-height: 1586px;
}

.q1-content .q1-accordion_01 .q1_icon img {
  width: 22.66666vw;
  max-width: 170px;
  height: 22.66666vw;
  max-height: 170px;
}

.q1_icon_img {
  position: absolute;
  top: -24%;
  left: -15%;
  width: 49%;
  height: auto;
  z-index: 10;
}

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

.q2-text_01 img {
  width: min(632px, 84.266666666666667vw);
}

.q2-img_01 img {
  width: min(669.999975px, 89.33333vw);
}

.back_color_gray {
  background-color: #f5f5f5;
  padding: 0 0% 6% 0%;
}

.back_color_lightgray {
  background-color: #f6f5f8;
  padding-right: 4.26667vw;
  padding-left: 4.26667vw;
}

.back_color_white {
  background-color: rgb(255, 255, 255);
  padding: 3.67% 0 0;
}

.q2-accordion_01 img {
  width: 100%;
  height: auto;
}

.q3-text_01 img {
  width: 70.13333vw;
  max-width: 526px;
  height: 5.33333vw;
  max-height: 40px;
}

.q3-img_01 img {
  display: block;
  width: 100%;
  height: auto;
}

.q3-accordion_01 img {
  width: 89.33333vw;
  max-width: 670px;
  height: 175.2vw;
  max-height: 1314px;
}

.thanks_01 img {
  display: block;
  width: 100%;
  height: auto;
}

.text_03 img {
  width: 100vw;
  max-width: 46.875rem;
  height: 20.4vw;
  max-height: 9.5625rem;
}

.product_01 {
  position: relative;
}

.product_01 img {
  display: block;
  width: 100%;
  height: auto;
}

.text04 img {
  width: 56.8vw;
  max-width: 26.625rem;
  height: 7.33333vw;
  max-height: 3.4375rem;
}

.note_01 img {
  width: 26vw;
  max-width: 12.1875rem;
  height: 2.26667vw;
  max-height: 1.0625rem;
}

.footer img {
  width: 100vw;
  max-width: 46.875rem;
  height: 4.53333vw;
  max-height: 2.125rem;
}

@media screen and (min-width: 46.9375rem) {
  .mb-5 {
    margin-bottom: 0.3125rem;
  }

  .mb-10 {
    margin-bottom: 0.625rem;
  }

  .mb-15 {
    margin-bottom: 0.9375rem;
  }

  .mb-20 {
    margin-bottom: 1.25rem;
  }

  .mb-30 {
    margin-bottom: 1.875rem;
  }

  .mb-35 {
    margin-bottom: 2.1875rem;
  }

  .mb-40 {
    margin-bottom: 2.5rem;
  }

  .mb-45 {
    margin-bottom: 2.8125rem;
  }

  .mb-50 {
    margin-bottom: 3.125rem;
  }

  .mb-55 {
    margin-bottom: 3.4375rem;
  }

  .mb-60 {
    margin-bottom: 3.75rem;
  }

  .mb-65 {
    margin-bottom: 4.0625rem;
  }

  .mb-70 {
    margin-bottom: 4.375rem;
  }

  .mb-75 {
    margin-bottom: 4.6875rem;
  }

  .mb-80 {
    margin-bottom: 5rem;
  }

  .mb-85 {
    margin-bottom: 5.3125rem;
  }

  .mb-90 {
    margin-bottom: 5.625rem;
  }

  .mb-95 {
    margin-bottom: 5.9375rem;
  }

  .mb-100 {
    margin-bottom: 6.25rem;
  }

  .mb-105 {
    margin-bottom: 6.5625rem;
  }

  .mb-110 {
    margin-bottom: 6.875rem;
  }

  .mb-150 {
    margin-bottom: 9.375rem;
  }

  .pl-35 {
    padding-left: 2.1875rem;
  }

  .pb-60 {
    padding-bottom: 3.75rem;
  }

  .top-content {
    padding-right: 2.1875rem;
  }

  .top-content {
    padding-left: 2.1875rem;
  }

  .q1-content {
    padding-right: 2rem;
  }

  .q1-content {
    padding-left: 2rem;
  }

  .q1-content .question-button .yes-button_01,
  .q2-content .question-button .yes-button_01,
  .q3-content .question-button .yes-button_01 {
    margin-right: 1.875rem;
  }
}

@media screen and (max-width: 750px) {
  .q1-content .question1-accordion .q1_gif {
    top: 136vw;
    width: 74.666vw;
    height: 42vw;
  }

  /* gif上の画像 */
  .q1-content .q1-accordion_01 .q1_icon {
    top: 106vw;
  }

  .q1-content .q1-accordion_01 .q1_icon img {
    max-width: 130px;
    max-height: 130px;
  }
}