@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese);

@media screen and (min-width:751px){
  html{
    font-size : 62.5%;
  }
}
@media screen and (max-width:750px){
  html{
    font-size : 1.33vw;
  }
}


body {
  background            : #fff;
	color                 : #444444;
  font-size             : 3.2rem;
  font-family: -apple-system, BlinkMacSystemFont, YuGothic, "Yu Gothic Medium", "Yu Gothic", 'Noto Sans JP', sans-serif;
  font-feature-settings : 'palt';
  letter-spacing        : 0.1em;
  line-height           : 1.5;
	text-align            : justify;
  -webkit-font-smoothing  : antialiased;
	-moz-osx-font-smoothing : grayscale;
  -webkit-text-size-adjust: 100%;
}

img{
  display : block;
  width   : 100%;
}

a{
  display: block;
  text-decoration: none;
  transition: .2s;
}

a:hover{
  filter: brightness(1.1);
}


/*
// common-style
*/
.text--pink{
  color:#a7687f;
}



.main{
  margin : 0 auto;
  max-width : 750px;
}

/*
// main visual
*/

.mv{
  margin: 0 0 -2.5rem;
  position: relative;
}

.mv__message{
  position:relative;
}
.mv__message__movie{
  left:50%;
  position: absolute;
  top:5rem;
  transform: translateX(-50%);
  width: 36rem;
}

.mv__message__icon{
  left:4rem;
  position: absolute;
  top:7.2rem;
  width: 20.5rem;
  z-index: 2;
}



/*
// question
*/

.qa{
  margin: 8rem 0 12rem;
}

.qa--03{
  margin: 8rem 0;
}

.question{
  text-align: center;
  margin : 0 auto;
}

.question__icon{
  width: 28.8rem;
  margin : 0 auto 6rem;
}

.question__text{
  margin: 0 0 1em;
  font-size: 4.4rem;
  font-weight: bold;
}

.question__image{
  width: 67rem;
  padding: 0 0 5.2rem;
  margin : 0 auto;
}


/*
// answer
*/
.answer{
  margin: 0 auto 8rem;
  width:67rem;
}

.answer__input{
  display: none;
}

.answer__label{
  background: url("../images/icon--checked_pink.png") no-repeat #fff left 4.2rem center/3.8rem auto;
  border:0.2rem solid #a8687f;
  box-shadow: 0 0.5rem 0 #d7bbc5;
  color: #333;
  display: block;
  line-height: 1.35;
  margin: 0 auto 2.5rem;
  padding: 2.5rem 0;
  width: 100%;
  font-size: 4.4rem;
  font-weight: 700;
  border-radius: 1rem;
  box-shadow: 0 0.4rem 0 #c7c7c7;
  text-align: center;
}

.answer__label:hover{
  cursor:pointer;
}

.answer--03 .answer__label{
  font-size: 3.3rem;
  letter-spacing: 0.06em;
  padding: 2.5rem 0 2.5rem 8rem;
}

.answer--03 .answer__label:last-child{
  letter-spacing: 0;
}

.answer--02 .answer__label:last-child{
  padding: 2.5rem 0 2.5rem 10.5rem;
}

.answer__input:checked + .answer__label{
  background: url("../images/icon--checked_white.png") no-repeat #a8687f left 4.2rem center/3.8rem auto;
  color: #fff;
}

.answer__input:checked + .answer__label span{
  color: #f0ecb5;
}

.answer--01__image{
  display: none;
  margin : 5.5rem auto 8rem;
  width: 67rem;
}

.next__btn{
  width: 40rem;
  margin : 0 auto;
}







/* offer */

.offer{
  background: #efede6;
  padding: 6rem 4rem 9.5rem;
  position: relative;
}

.offer__image{
  margin : 0 auto 5.2rem;
}

.offer__btn{
  margin : 0 auto;
  width: 67rem;
}



/*
// footer
*/

.footer{
  align-items: center;
  background: #6e4e97;
  display: flex;
  height:90px;
  justify-content: center;
}
@media screen and (max-width:750px){
  .footer{
    height:12vw;
  }
}

.footer__link{
  align-items: center;
  display: flex;
  justify-content: center;
}

.footer__link li{
  align-items: center;
  display: flex;
  justify-content: center;
  font-size:1.8rem;
  line-height: 1;
}

.footer__link li:first-child:after{
  color:#fff;
  content:'|';
  font-size:1.2em;
  margin: 0 1em;
}

.footer__link li a{
  color:#fff;
  text-decoration: underline;
}

.footer__copyright{
  color:#fff;
  font-size:1.8rem;
}