@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : スペシャル：トップ
===================================================================== */
/* =====================================================================
*    header
* =================================================================== */
#header p {
  padding: 4.6rem 0;
  text-align: center;
  font-weight: 600;
  line-height: 2;
}

@media screen and (min-width: 768px) {
  #header p {
    padding: 0;
    height: 0;
    visibility: hidden;
  }
}

/* =====================================================================
    question
======================================================================*/
.question {
  padding-bottom: 12rem;
  background: url(../images/bg_gray.jpg) repeat-y center/100% auto;
}

.question::before, .question::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 16rem;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(180, 199, 208, 0.8)), to(transparent));
  background: linear-gradient(to right, rgba(180, 199, 208, 0.8) 0%, transparent 100%);
  mix-blend-mode: color-burn;
}

.question::after {
  left: auto;
  right: 0;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.question_inner {
  position: relative;
  padding: 6rem 0 2rem;
  text-align: center;
}

.sec_ttl {
  position: relative;
  margin-left: 20rem;
  margin-bottom: -2rem;
  width: 32.8rem;
}

.sec_ttl + p {
  position: relative;
  margin-bottom: 4rem;
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.277;
}

.sec_ttl + p::before, .sec_ttl + p::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 1.6rem;
  height: 100%;
  border: 1px solid #333333;
  border-right: none;
}

.sec_ttl + p::after {
  left: auto;
  right: 0;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.radio_list {
  position: relative;
  z-index: 3;
}

.radio_list li {
  margin-bottom: 1.6rem;
}

.radio_list li input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio_list li input[type="radio"] + label {
  position: relative;
  display: block;
  padding: 2.6rem;
  padding-left: 8rem;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.8rem;
  text-align: left;
  background-color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.radio_list li input[type="radio"] + label:before {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  left: 3.6rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fff;
  border-radius: 100%;
  border: 1px solid #333333;
  width: 1em;
  height: 1em;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.radio_list li input[type="radio"]:checked + label {
  color: #fff;
}

.radio_list li input[type="radio"]:checked + label:before {
  background-color: #333333;
  border-color: #fff;
  -webkit-box-shadow: inset 0 0 0 0.15em #fff;
          box-shadow: inset 0 0 0 0.15em #fff;
}

.radio_list li input[type="radio"]:focus + label:before {
  outline: none;
}

.radio_list li input[type="radio"] + label:empty:before {
  margin-right: 0;
}

.btn_submit {
  margin: 11rem auto 0;
  width: 58rem;
}

.txt_note {
  margin-top: 4.8rem;
  font-weight: 600;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .question {
    background-repeat: repeat;
    background-size: 50% auto;
  }
  .question::before, .question::after {
    width: 50rem;
  }
  .question_inner {
    padding: 6rem 0 0;
  }
  .sec_ttl {
    margin-left: 43rem;
    width: 21.9rem;
  }
  .sec_ttl + p {
    display: inline-block;
    margin-bottom: 3rem;
    padding: 0 3rem;
    font-size: 2.4rem;
  }
  .sec_ttl + p::before, .sec_ttl + p::after {
    width: 1rem;
  }
  .radio_list {
    position: relative;
    margin: 0 auto;
    width: 89rem;
    z-index: 3;
  }
  .radio_list li {
    margin-bottom: 1rem;
  }
  .radio_list li input[type="radio"] + label {
    padding: 1.6rem;
    padding-left: 4.5rem;
    font-size: 1.6rem;
  }
  .radio_list li input[type="radio"] + label::before {
    left: 2rem;
  }
  .btn_submit {
    margin: 8rem auto 0;
    width: 30rem;
  }
  .txt_note {
    margin-top: 2.5rem;
  }
}

/* =====================================================================
    question1~8
======================================================================*/
#question1::before {
  content: '';
  position: absolute;
  display: block;
  top: 3.6rem;
  left: 0;
  width: 8.3rem;
  height: 15.1rem;
  background: url(../images/bg_splash1.png) no-repeat center/contain;
}

#question1 .radio_list li input[type="radio"]:checked + label {
  background: #E61740;
}

#question2::before {
  content: '';
  position: absolute;
  display: block;
  top: 1rem;
  right: -4.6rem;
  width: 35rem;
  height: 26.9rem;
  background: url(../images/bg_splash2-sp.png) no-repeat center/contain;
}

#question2 .radio_list li input[type="radio"]:checked + label {
  background: #FF8C00;
}

#question3::before {
  content: '';
  position: absolute;
  display: block;
  top: -4rem;
  left: -4.8rem;
  width: 34.1rem;
  height: 31.9rem;
  background: url(../images/bg_splash3-sp.png) no-repeat center/contain;
}

#question3 .radio_list li input[type="radio"]:checked + label {
  background: #FFFF00;
  color: #333333;
}

#question4::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: -4.8rem;
  width: 37.6rem;
  height: 24.6rem;
  background: url(../images/bg_splash4-sp.png) no-repeat center/contain;
}

#question4 .radio_list li input[type="radio"]:checked + label {
  background: #B2F230;
  color: #333333;
}

#question5::before {
  content: '';
  position: absolute;
  display: block;
  top: 1rem;
  left: 0;
  width: 16.4rem;
  height: 17.8rem;
  background: url(../images/bg_splash5.png) no-repeat center/contain;
}

#question5 .radio_list li input[type="radio"]:checked + label {
  background: #00D990;
}

#question6::before {
  content: '';
  position: absolute;
  display: block;
  top: 3rem;
  right: -4rem;
  width: 30rem;
  height: 21.5rem;
  background: url(../images/bg_splash6-sp.png) no-repeat center/contain;
}

#question6 .radio_list li input[type="radio"]:checked + label {
  background: #00D5FF;
}

#question7::before {
  content: '';
  position: absolute;
  display: block;
  top: 4rem;
  left: -4.8rem;
  width: 30.4rem;
  height: 30.8rem;
  background: url(../images/bg_splash7.png) no-repeat center/contain;
}

#question7 .radio_list li input[type="radio"]:checked + label {
  background: #4D6AFF;
}

#question8::before {
  content: '';
  position: absolute;
  display: block;
  top: 3rem;
  right: -3.6rem;
  width: 23rem;
  height: 23.4rem;
  background: url(../images/bg_splash8-sp.png) no-repeat center/contain;
}

#question8 .radio_list li input[type="radio"]:checked + label {
  background: #A422E6;
}

@media screen and (min-width: 768px) {
  #question1::before {
    top: 2.8rem;
    left: 31.7rem;
    width: 8.1rem;
    height: 14.9rem;
  }
  #question2::before {
    top: -12rem;
    right: -10rem;
    width: 40.5rem;
    height: 28.9rem;
    background-image: url(../images/bg_splash2-pc.png);
  }
  #question3::before {
    top: 0;
    left: -23rem;
    width: 44.5rem;
    height: 23.7rem;
    background-image: url(../images/bg_splash3-pc.png);
  }
  #question4::before {
    top: -3.7rem;
    right: -8.6rem;
    width: 47.3rem;
    height: 25.3rem;
    background-image: url(../images/bg_splash4-pc.png);
  }
  #question5::before {
    top: -2.3rem;
    left: -7.3rem;
    width: 18rem;
    height: 19.6rem;
  }
  #question6::before {
    top: -7.7rem;
    right: -11rem;
    width: 39.3rem;
    height: 25.1rem;
    background-image: url(../images/bg_splash6-pc.png);
  }
  #question7::before {
    top: 0;
    left: -20rem;
    width: 46.5rem;
    height: 47rem;
  }
  #question8::before {
    top: 1rem;
    right: -22.5rem;
    width: 45.5rem;
    height: 32.5rem;
    background-image: url(../images/bg_splash8-pc.png);
  }
}

/* =====================================================================
*    footer
* =================================================================== */
.profile {
  padding: 13rem 0;
}

.profile dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 4.8rem;
}

.profile dl dt {
  width: 19.6rem;
}

.profile dl dd h3 {
  width: 42.8rem;
  font-size: 3.2rem;
  font-weight: 600;
}

.profile dl dd h3::before {
  content: 'Profile';
  display: block;
  margin-bottom: 0.5em;
  font-family: "Dancing Script", cursive;
  font-size: 3.2rem;
  font-weight: 600;
}

.profile p {
  font-weight: 600;
  line-height: 2;
}

.profile p a {
  display: inline;
}

.btn_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 14rem;
}

.btn_list li {
  width: 18rem;
  margin: 0 1.2rem;
}

@media screen and (min-width: 768px) {
  .profile {
    padding: 10rem 0;
  }
  .profile dl {
    margin-bottom: 6rem;
  }
  .profile dl dt {
    width: 15rem;
  }
  .profile dl dd {
    width: 82.4rem;
  }
  .profile dl dd h3 {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
  }
  .profile dl dd h3::before {
    font-size: 2rem;
  }
  .profile dl dd a:hover {
    opacity: 0.7;
  }
  .btn_list {
    padding-bottom: 10rem;
  }
  .btn_list li {
    width: 15rem;
    margin: 0 2rem;
  }
  .btn_list li a {
    position: relative;
    top: 0;
  }
  .btn_list li a:hover {
    top: -1rem;
  }
}
/*# sourceMappingURL=top.css.map */