@charset "UTF-8";

body {
  max-width: 100%;
  margin: 0 auto;
}
li {
  list-style-type: none;
}

/* content */
#interactive {
  max-width: 750px;
  margin: 0 auto;
  position: relative;
  line-height: 1.5;
}
#interactive img {
  width: 100%;
  vertical-align: bottom;
}

img,
input {
  width: 100%;
}

header {
  width: 15%;
  margin-left: min(60px, 8vw);
  position: absolute;
  top: 0;
  left: 0;
}

.ttl {
  width: 50%;
  margin: 0 auto;
  padding: min(60px, 8vw);
}
.q1_ttl {
  width: 50%;
  margin: 0 auto;
  padding-top: min(28px, 3.7333vw);
  padding-left: min(50px, 6.66667vw);
  padding-right: min(50px, 6.66667vw);
  padding-bottom: min(28px, 3.7333vw);
}

.q1_note {
  width: 82%;
  padding-left: min(90px, 12vw);
  padding-bottom: min(50px, 6.66666vw);
  margin-top: min(-7.5px, 1vw);
}

.arrow {
  width: 6%;
  margin: 0 auto;
}

/* 背景 */

.q_1 {
  background-image: url(../img/q1_bg.jpg);
  background-position: top 0px right 0px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.q_2 {
  background-image: url(../img/q2_bg.jpg);
  background-position: top 0px right 0px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.q_3 {
  background-image: url(../img/q3_bg.jpg);
  background-position: bottom 0px right 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: min(160px, 21.3333vw);
}

.offer {
  background-image: url(../img/cv_bg.jpg);
  background-position: top 0px right 0px;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* q */

.q_1 {
  margin: 0 auto;
}

.q_3 {
  margin: 0 auto;
}

.q1_contents {
  display: flex;
  margin: 0 auto;
  padding: 0 min(75px, 10vw);
}

.q1_contents .q1_txt {
  width: 86%;
  margin-top: min(40px, 5.3vw);
}

.q1_contents .q1_content_img {
  width: 42%;
  margin-left: min(15px, 2vw);
  margin-bottom: min(30px, 4vw);
  margin-right: min(-7.5px, 1vw);
}

.q1_img {
  padding: 0 min(75px, 10vw);
  margin-bottom: min(21px, 2.8vw);
  margin-top: min(-7.5px, 1vw);
}

/* q2 */

.q2_txt,
.q3_txt {
  width: 80%;
  margin: 0 auto;
  padding-top: min(30px, 4vw);
  padding: min(7.5px, 1vw);
  margin-bottom: min(25px, 3.33333vw);
}

.q2-list {
  display: flex;
  flex-wrap: wrap;
  /* margin-left: min(40px, 5.3333vw); */
}

.q2_memo {
  width: 80%;
  margin-top: min(20px, 2.6666667vw);
  margin-left: min(75px, 10vw);
  padding-bottom: min(100px, 13.3333vw);
}

/* q3 */

.q3_img {
  width: 96%;
  padding: 0 min(75px, 10vw);
  margin: 0 auto;
  margin-bottom: min(21px, 2.8vw);
  margin-top: min(-7.5px, 1vw);
}

.q3_note {
  width: 82%;
  margin-top: min(21px, 2.8vw);
  padding-left: min(90px, 12vw);
  padding-bottom: min(50px, 6.66666vw);
}

/* offer */

.thanks {
  width: 90%;
  margin: 0 auto;
  padding-bottom: min(10px, 1.333vw);
}

.cv_arrow {
  width: 26%;
  margin: 0 auto;
}

.cv-content {
  position: relative;
}

.cv-btn {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: auto;
  width: min(630px, calc(630vw / 750 * 100));
}

footer {
  background-color: #004097;
  margin-top: 0;
  padding: 0;
}
.copyright {
  max-width: 530px;
  width: 80%;
  margin: 0 auto;
  padding-top: min(20px, 2.66666vw);
  padding-bottom: min(20px, 2.66666vw);
}


/* -----------------------------------------
  ボタン切り替え
----------------------------------------- */
/*============================
radio button
============================*/
input {
  display: none;
}

.q1_select_box {
  width: min(708px, 94.4vw);
  margin: 0 auto;
}

.q1_select_box .q1_label {
  position: relative;
  display: block;
  cursor: pointer;
  padding-top: 17.9378531073%;
  padding-top: 21.7%;
  width: 100%;
}


.q1_select_box-01 .q1_input[type=radio]+label {
  background: url(../img/btn_q01-01_off.png) no-repeat center;
  background-size: min(660px, 88vw);
}
.q1_select_box-01 .q1_input[type=radio]:checked+label {
  background: url(../img/btn_q01-01_on.png) no-repeat center;
  background-size: min(660px, 88vw);
}

.q1_select_box-02 .q1_input[type=radio]+label {
  background: url(../img/btn_q01-02_off.png) no-repeat center;
  background-size: min(660px, 88vw);
}
.q1_select_box-02 .q1_input[type=radio]:checked+label {
  background: url(../img/btn_q01-02_on.png) no-repeat center;
  background-size: min(660px, 88vw);
}

.q1_select_box-03 .q1_input[type=radio]+label {
  background: url(../img/btn_q01-03_off.png) no-repeat center;
  background-size: min(660px, 88vw);
}
.q1_select_box-03 .q1_input[type=radio]:checked+label {
  background: url(../img/btn_q01-03_on.png) no-repeat center;
  background-size: min(660px, 88vw);
}


/* q2 */
.q2_select {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: min(7.5px, 1vw);
}

.q2_select_box {
  width: min(325px, 43.3333333333vw);
}

.q2_select_box .q2_label {
  position: relative;
  display: block;
  cursor: pointer;
  padding-top: 45.2307692308%;
  width: 100%;
}

.q2_select_box-01 .q2_input[type=radio]+label {
  background: url(../img/btn_q02-01_off.png) no-repeat center;
  background-size: min(340px, 45.3333vw);
}
.q2_select_box-01 .q2_input[type=radio]:checked+label {
  background: url(../img/btn_q02-01_on.png) no-repeat center;
  background-size: min(340px, 45.3333vw);
}
.q2_select_box-02 .q2_input[type=radio]+label {
  background: url(../img/btn_q02-02_off.png) no-repeat center;
  background-size: min(340px, 45.3333vw);
}
.q2_select_box-02 .q2_input[type=radio]:checked+label {
  background: url(../img/btn_q02-02_on.png) no-repeat center;
  background-size: min(340px, 45.3333vw);
}
.q2_select_box-03 .q2_input[type=radio]+label {
  background: url(../img/btn_q02-03_off.png) no-repeat center;
  background-size: min(330px, 44vw);
}
.q2_select_box-03 .q2_input[type=radio]:checked+label {
  background: url(../img/btn_q02-03_on.png) no-repeat center;
  background-size: min(330px, 44vw);
}
.q2_select_box-04 .q2_input[type=radio]+label {
  background: url(../img/btn_q02-04_off.png) no-repeat center;
  background-size: min(330px, 44vw);
}
.q2_select_box-04 .q2_input[type=radio]:checked+label {
  background: url(../img/btn_q02-04_on.png) no-repeat center;
  background-size: min(330px, 44vw);
}
.q2_select_box-05 .q2_input[type=radio]+label {
  background: url(../img/btn_q02-05_off.png) no-repeat center;
  background-size: min(330px, 44vw);
}
.q2_select_box-05 .q2_input[type=radio]:checked+label {
  background: url(../img/btn_q02-05_on.png) no-repeat center;
  background-size: min(330px, 44vw);
}
.q2_select_box-06 .q2_input[type=radio]+label {
  background: url(../img/btn_q02-06_off.png) no-repeat center;
  background-size: min(330px, 44vw);
}
.q2_select_box-06 .q2_input[type=radio]:checked+label {
  background: url(../img/btn_q02-06_on.png) no-repeat center;
  background-size: min(330px, 44vw);
}

/* q3 */

.q3_select {
  margin: min(39px, 5.2vw) auto 0;
}

.q3_select_box {
  width: min(708px, 94.4vw);
  margin: 0 auto;
}

.q3_select_box .q3_label {
  position: relative;
  display: block;
  cursor: pointer;
  padding-top: 21.7%;
  width: 100%;
}


.q3_select_box-01 .q3_input[type=radio]+label {
  background: url(../img/btn_q03-01_off.png) no-repeat center;
  background-size: min(660px, 88vw);
}
.q3_select_box-01 .q3_input[type=radio]:checked+label {
  background: url(../img/btn_q03-01_on.png) no-repeat center;
  background-size: min(660px, 88vw);
}

.q3_select_box-02 .q3_input[type=radio]+label {
  background: url(../img/btn_q03-02_off.png) no-repeat center;
  background-size: min(660px, 88vw);
}

.q3_select_box-02 .q3_input[type=radio]:checked+label {
  background: url(../img/btn_q03-02_on.png) no-repeat center;
  background-size: min(660px, 88vw);
}

.q3_select_box-03 .q3_input[type=radio]+label {
  background: url(../img/btn_q03-03_off.png) no-repeat center;
  background-size: min(660px, 88vw);
}

.q3_select_box-03 .q3_input[type=radio]:checked+label {
  background: url(../img/btn_q03-03_on.png) no-repeat center;
  background-size: min(660px, 88vw);
}
.q3_select_box-04 .q3_input[type=radio]+label {
  background: url(../img/btn_q03-04_off.png) no-repeat center;
  background-size: min(660px, 88vw);
}

.q3_select_box-04 .q3_input[type=radio]:checked+label {
  background: url(../img/btn_q03-04_on.png) no-repeat center;
  background-size: min(660px, 88vw);
}