@charset "utf-8";

html {

  scroll-behavior: smooth;

}



#wrapper {

  padding-top: 0;

  overflow: hidden;

  border: 0;

  left: 0;

  margin: auto;

  position: relative;

  width: 100%;

}



a {

  transition: all 0.3s ease;

}



video {

  width: 100%;

  height: auto;

  line-height: 100%;

  align-items: end;

  display:block;

}



a:hover {

  opacity: 0.6;

}



main {

  margin: 0 auto;

  width: 750px;

  max-width: 100%;

  box-shadow: 0 0 10px 0 rgba(189, 189, 189, 0.5);

}

main ul {

  list-style: none;

}

main img {

  vertical-align: top;

  max-width: 100%;

  height: auto;

  border: none;

  line-height: 0;

  margin-inline: auto;

  display: block;

  margin-inline: auto;

}

/* 選択肢全体共通 */

main .question_select {

  width: 718px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 42px;

  padding-bottom: 80px;

}

/* 選択肢共通 */

main .question_select input {

  display: none;

}

main .question_select label {

    position: relative;

    cursor: pointer;

    display: block;

}

main #question-block_01 .question_select label,

main #question-block_02 .question_select label,

main #question-block_03 .question_select label,

main #question-block_04 .question_select label,

main #question-block_05 .question_select label {

  position: relative;

  cursor: pointer;

  margin-inline: auto;

  width: 670px;

  height: 140px;

  color: #212b67;

  background: linear-gradient(to right, #c5c5c5, #d6d6d6);

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

  filter: drop-shadow(10px 10px 10px #d6d6d6);

}

main .question_select input[type=checkbox]:checked + label, main .question_select input[type=radio]:checked + label {

  transition: all 0.3s ease;

}

main .question_select label span {

  z-index: 5;

  position: relative;

  text-align: center;

  font-family: "Yu Gothic", "游ゴシック", YuGothic, sans-serif;

  font-weight: bold;

  font-size: 34px;

  line-height: calc(40 / 34);

}

main .question_select label::after {

    content: "";

    transition: 0.3s;

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

    border-radius: 20px;

    display: block;

    width: 100%;

    height: 100%;

}

@media (any-hover: hover) {

  main .question_select label:hover::after {

    background: linear-gradient(to right, #fdd740, #ffe57c);

    opacity: 1;

  }

}

.q2_bg {

  margin-top: 70px;

}

main #question-block_01 .question_select input[type=radio]:checked + label,

main #question-block_02 .question_select input[type=radio]:checked + label,

main #question-block_03 .question_select input[type=radio]:checked + label,

main #question-block_04 .question_select input[type=radio]:checked + label,

main #question-block_05 .question_select input[type=radio]:checked + label {

  background: linear-gradient(to right, #fdd740, #ffe57c);

}

.movie {

  position: relative;

}

.fv_movie_mp4 {

  position: absolute;

  bottom: 417px;

  left: 50%;

  transform: translateX(-50%);

  width: 612px;

  height: 159px;

}

.q4_movie01_mp4 {

  position: absolute;

  top: 130px;

  left: 50%;

  transform: translateX(-50%);

  width: 670px;

  height: 644px;

}

.q4_movie02_mp4 {

  position: absolute;

  top: 64px;

  left: 50%;

  transform: translateX(-50%);

  width: 537px;

  height: 396px;

}

.q4_movie03_mp4_01 {

  position: absolute;

  top: 285px;

  left: 50%;

  transform: translateX(-49%);

  width: 680px;

  height: 645px;

}

.q4_movie03_mp4_02 {

  position: absolute;

  bottom: 415px;

  left: 50%;

  transform: translateX(-50%);

  width: 636px;

  height: 470px;

}

.q5_movie02_mp4_01 {

  position: absolute;

  top: 430px;

  left: 50%;

  transform: translateX(-51%);

  width: 654px;

  height: 560px;

}

.q5_movie02_mp4_02 {

  position: absolute;

  bottom: 40px;

  left: 50%;

  transform: translateX(-50%);

  width: 666px;

  height: 791px;

}

.q5_movie03_mp4 {

  position: absolute;

  bottom: 85px;

  left: 50%;

  transform: translateX(-50%);

  width: 718px;

  height: 824px;

}

main #question-block_06 {

  background: #fffbeb;

}

main .question_select .q5_text-note {

  transform: translateY(7px);

}

main .question_select .q5_text-small,

main .question_select .q5_text-under {

  font-size: 16px;

}

main .question_select .q5_text-under {

  display: block;

  margin-top: 15px;

}

main #question-block_05 .question_select {

  gap: 35px;

}

main #question-block_05 .question_select label {

  height: 190px;

}

main #question-block_06 .question_select label {

    width: 690px;

    height: 221px;

}

main #question-block_06 .question_select .chk6 label {

  background: url("../img/ans_btn.png") no-repeat center/cover;

  content: "";

  -webkit-animation: anime1 0.5s ease 0s infinite alternate;

          animation: anime1 0.5s ease 0s infinite alternate;

  transform-origin: center;

}

@media (any-hover: hover) {

  main #question-block_06 .question_select label:hover::after {

    background: transparent;

    opacity: 1;

  }

}

main #question-block_07 #ac_cnt01 {

  padding-top: 16px;

  background: #fffbeb

}

main #question-block_07 .ac_cnt01_img03_bg {

  background: #fff;

}

main #question-block_07 .ac_btn {

  -webkit-animation: anime1 0.5s ease 0s infinite alternate;

          animation: anime1 0.5s ease 0s infinite alternate;

  transform-origin: center;

  text-align: center;

}

main #question-block_07 .ac_btn a:hover {

  opacity: 1;

}



#cnt09 {

  margin-top: 84px;

  padding-bottom: 40px;

}



@-webkit-keyframes anime1 {

  from {

    transform: scale(0.9, 0.9);

  }

  to {

    transform: scale(1, 1);

  }

}



@keyframes anime1 {

  from {

    transform: scale(0.9, 0.9);

  }

  to {

    transform: scale(1, 1);

  }

}

.Note {

  padding: 5px 45px 25px;

  text-align: left;

}



.Note__text {

  font-size: 3.37079vw;

  line-height: 1.65;

  margin-bottom: 4.94382vw;

  padding-left: 0.7em;

}



@media screen and (min-width: 890px) {

  .Note__text {

    font-size: 30px;

    margin-bottom: 44px;

  }

}

.Note__textList {

  display: block;

}



.Note__textList.-underline {

  text-decoration: underline;

}



summary {

  display: block;

}



summary::-webkit-details-marker {

  /* Safariで表示されるデフォルトの三角形アイコンを消します */

  display: none;

}



details[open] .Note__text {

  -webkit-animation: fadeIn 0.6s ease;

  animation: fadeIn 0.6s ease;

}



details[open] .Note__detailTitle::after {

  transform: rotate(180deg);

}



@-webkit-keyframes fadeIn {

  0% {

    opacity: 0;

    transform: translateY(-5px);

  }

  100% {

    opacity: 1;

    transform: none;

  }

}

@keyframes fadeIn {

  0% {

    opacity: 0;

    transform: translateY(-5px);

  }

  100% {

    opacity: 1;

    transform: none;

  }

}

.Note__detailTitle {

  border: 2px solid #000;

  cursor: pointer;

  display: block;

  font-size: 3.14607vw;

  font-weight: bold;

  margin-bottom: 4.49438vw;

  padding: 15px 20px;

  position: relative;

}



.Note__detailTitle::after {

  background: url(../img/icon_arrow.svg) no-repeat;

  background-size: 4.49438vw;

  content: "";

  display: block;

  height: 2.47191vw;

  position: absolute;

  right: 2.24719vw;

  top: 40%;

  width: 4.49438vw;

}



@media screen and (min-width: 890px) {

  .Note__detailTitle::after {

    background-size: 40px;

    height: 22px;

    right: 20px;

    top: 20px;

    width: 40px;

  }

}

@media screen and (min-width: 890px) {

  .Note__detailTitle {

    font-size: 28px;

    margin-bottom: 40px;

  }

}

.Note__textBottom {

  color: #666666;

  font-size: 12px;

  letter-spacing: 0;

  line-height: 1.6;

  margin: 10px -11px -46px;

}



.Note__textItalic {

  font-style: italic;

}



/* # =============================================

    # Footer

   # ============================================= */

.Footer {

  padding-top: 40px;

}



.Footer .Footer__navi {

  margin: 0px auto 30px;

  text-align: center;

  width: 100%;

}



.Footer .Footer__naviItem {

  display: inline;

  flex: 0 0 60%;

  line-height: 1;

  margin-bottom: 10px;

  padding: 0px 6px;

  position: relative;

}



.Footer .Footer__naviItem::after {

  background-color: #171717;

  content: "";

  display: block;

  height: 16px;

  position: absolute;

  right: 0px;

  top: 5px;

  width: 1px;

}



.Footer .Footer__naviItem:last-child:after {

  display: none;

}



.Footer .Footer__naviLink {

  color: #171717;

  display: inline-block;

  font-size: 13px;

  letter-spacing: 0.08em;

  padding: 5px 0;

  text-decoration: none;

}



.Footer .Copyright {

  font-size: 12px;

  line-height: 140%;

  padding-bottom: 20px;

  padding-left: 0;

  padding-right: 0;

  text-align: center;

  width: 100%;

}



@media screen and (max-width: 768px) {

  main {

    margin: 0 auto;

    width: 100vw;

    max-width: 100%;

    box-shadow: 0 0 10px 0 rgba(189, 189, 189, 0.5);

  }

  main ul {

    list-style: none;

  }

  main img {

    vertical-align: top;

    max-width: 100%;

    height: auto;

    border: none;

    line-height: 0;

  }

  /* 選択肢全体共通 */

  main .question_select {

    width: calc((718/750) * 100vw);

    padding-bottom: calc((80/750) * 100vw);

    gap: calc((42/750) * 100vw);

  }

  /* 選択肢共通 */

  main .question_select input {

    display: none;

  }

main #question-block_01 .question_select label,

main #question-block_02 .question_select label,

main #question-block_03 .question_select label,

main #question-block_04 .question_select label,

main #question-block_05 .question_select label {

    width: calc((670/750) * 100vw);

    height: calc((140/750) * 100vw);

    font-size: clamp(10px, calc((34 / 750) * 100vw), 34px);

    filter: drop-shadow(calc((10/750) * 100vw) calc((10/750) * 100vw) calc((10/750) * 100vw) #d6d6d6);

  }

  .q2_bg {

    margin-top: calc((70/750) * 100vw);

  }

  main .question_select label span {

    font-size: clamp(10px, calc((34 / 750) * 100vw), 34px);

  }

  .fv_movie_mp4 {

  bottom: calc((417/750) * 100vw);

  width: calc((612/750) * 100vw);

  height: calc((159/750) * 100vw);

  }

  .q4_movie01_mp4 {

  top: calc((130/750) * 100vw);

  width: calc((670/750) * 100vw);

  height: calc((644/750) * 100vw);

  }

  .q4_movie02_mp4 {

    top: calc((64/750) * 100vw);

    width: calc((537/750) * 100vw);

    height: calc((396/750) * 100vw);

  }

  .q4_movie03_mp4_01 {

    top: calc((285/750) * 100vw);

    width: calc((680/750) * 100vw);

    height: calc((645/750) * 100vw);

  }

  .q4_movie03_mp4_02 {

    bottom: calc((415/750) * 100vw);

    width: calc((636/750) * 100vw);

    height: calc((470/750) * 100vw);

  }

  .q5_movie02_mp4_01 {

    top: calc((430/750) * 100vw);

    width: calc((654/750) * 100vw);

    height: calc((560/750) * 100vw);

  }

  .q5_movie02_mp4_02 {

    bottom: calc((40/750) * 100vw);

    width: calc((666/750) * 100vw);

    height: calc((791/750) * 100vw);

  }

  .q5_movie03_mp4 {

    bottom: calc((85/750) * 100vw);

    width: calc((718/750) * 100vw);

    height: calc((824/750) * 100vw);

  }

  main .question_select .q5_text-note {

  transform: translateY(calc((7/750) * 100vw));

  }

  main .question_select .q5_text-small,

  main .question_select .q5_text-under {

    font-size: calc((16/750) * 100vw);

  }

  main .question_select .q5_text-under {

    display: block;

    margin-top: calc((15/750) * 100vw);

  }

  main #question-block_06 {

    background: #fffbeb;

  }

  main #question-block_05 .question_select {

  gap: calc((35/750) * 100vw);

  }

  main #question-block_05 .question_select label {

    height: calc((190/750) * 100vw);

  }

    main #question-block_06 .question_select label {

    width: 92vw;

    height: 29.467vw;

  }

  main #question-block_06 .question_select .chk6 label {

    background: url("../img/ans_btn.png") no-repeat center/cover;

    content: "";

  }

  main #question-block_07 #ac_cnt01 {

    padding-top: calc((16/750) * 100vw);

  }

  #cnt09 {

  margin-top: calc((84/750) * 100vw);

  padding-bottom: calc((40/750) * 100vw);

}

}