@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

body{margin:0;padding:0;}

#wrapper{width:100%;font-family: 'M PLUS 1p', 'Noto Sans JP','Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;font-size:16px;color:#333;background-color: #F2F2F2;padding-bottom:60px;letter-spacing:0.1em;}
#wrapper *{box-sizing:border-box;}
#wrapper a:hover{opacity:0.7;}
#wrapper a img:hover{opacity:0.7;}

.container{margin:auto;max-width:1040px;padding:0 20px;text-align:center;}
.container p,.container h1,.container h2{margin:0;}


/* --------------------------------------------------------------- */
/* block-head */
/* --------------------------------------------------------------- */
#block-head {padding:45px 0;background:url(../img/top-mv/bg-check.png) repeat #000;}
#block-head h1 span{display:inline-block;padding-top:28px;color:#fff;font-size:29px;}

#block-head2 {
 background:url(../img/mv-pc.jpg) no-repeat;
 background-size: cover;
 background-position: center center;
 height: 0px;
 padding-bottom: 11.13490364025696%;
}

#block-head2 .container{position: relative; max-width: 1280px; height: 0px;  margin: auto; padding: 4% 0;}
#block-head2 .head2_logo {position: absolute; left: 0px; top: 0; width: 18%;}
#block-head2 .head2_ttl {width: 53%;margin: auto; color: #ffffff; font-size: 36px; background: rgba(0, 0, 0, 0.70); font-weight: 700; line-height: 1.4;padding-top: 15px;padding-bottom: 15px;}

.price{text-align: center;margin: auto;background: #8B1B1B;padding: 12px;}
.price h2{display: inline-block; font-size: 18px; color: #8B1B1B; background: #fff;padding: 3px 12px;margin-right: 20px;}
.price p{display: inline-block;color: #fff;  font-size: 20px;}
.price p a{text-decoration:underline;text-decoration-thickness: 1px;text-underline-offset: 4px;}

#block-quiz .frame{
 width: 700px;
 margin: auto;
 padding-top: 30px;
 padding-bottom: 25px;
 border:1px solid #B3963D;
}

#block-quiz .check{
 width: 500px;
 font-size: 20px;
 margin: auto;
 text-align: left;
 margin-bottom: 20px;
}

#block-quiz .check ul > li{
 position: relative;
 padding-left: 40px;
 margin-bottom: 15px;
}

#block-quiz .check ul > li a{
 text-decoration:underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 4px;
}

#block-quiz .check ul > li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 5px;
 width: 22px;
 height: 19px;
 background: url(../img/icon_check.png) left top / 100% auto no-repeat;
}

#block-quiz .survey{
 width: 600px;
 margin: auto;
 margin-top: 30px;
 margin-bottom: 20px;
}

#block-quiz .survey p{
 color: #B3963D;
 font-size: 26px;
 margin-bottom: 10px;
}

#block-quiz .survey h5{
 color: #333333;
 font-size: 22px;
 font-weight: normal;
 margin-bottom: 20px;
 align-items: center;
 display: flex;
 justify-content: center;
}

#block-quiz .survey h5::before,#block-quiz .survey h5::after {
 background-color: #333333;
 content: "";
 height: 1px;
 width: 160px;
}

#block-quiz .survey h5::before {
  margin-right: 20px;
}

#block-quiz .survey h5::after {
  margin-left: 20px;
}

/* --------------------------------------------------------------- */
/* block-quiz */
/* --------------------------------------------------------------- */
#block-quiz{padding:46px 0 0;}
#block-quiz .container {max-width: 830px; padding: 25px 0px 50px; margin: auto; border-radius: 11px; background-color: #fff;}
#block-quiz .present{width:520px;margin:0 auto;padding:24px 0;color:#707070;font-size:24px;font-weight:bold;line-height:1.625;}
#block-quiz .present big{color:#BBA172;}
#block-quiz .btn-about{margin-top:20px;}
#block-quiz .btn-about a{display:inline-block;width:367px;height:44px;line-height:42px;background:url("../img/quiz/arrow.png") top 50% right 16px/7.5px 15px no-repeat #EFEFEF;border-radius:13px;color:#888888;text-decoration:none;font-weight:bold;transition:.3s;}

#block-quiz .selection{margin-top: 50px; margin-bottom: 50px; padding-bottom: 60px; background: #EDE8DB;}
#block-quiz .selection h1{font-size: 24px;padding-top: 30px;padding-bottom: 25px;}
#block-quiz .selection .point{width: 93%; margin: auto; display: flex;justify-content:space-between;padding-bottom: 0px;}
#block-quiz .selection .point li{width: 48.7%; font-size: 21px; border-radius: 21px;background: #fff;padding: 15px;}
#block-quiz .selection .point li h2{font-weight: 500; padding-top: 20px;padding-bottom: 15px;}

#block-quiz .selection .commodity {width: 93%; margin: auto;  background: #fff; border-radius: 21px 21px 0px 0px;}
#block-quiz .selection .commodity br{display: none;}
#block-quiz .selection .commodity h3{color: #777777; font-size: 24px; font-weight: 500; padding-top: 30px; padding-bottom: 30px;}
#block-quiz .selection .commodity p{font-size: 16px; color: #B3963D;padding-top: 5px;}
#block-quiz .selection .commodity ul {width: 95%; margin: auto; display: flex; flex-wrap: wrap;justify-content: center;}
#block-quiz .selection .commodity ul li{width: calc(100%/4); font-size: 21px; border-radius: 21px;background: #fff;padding: 10px;margin-bottom: 20px;}
#block-quiz .selection .commodity ul li h2{font-weight: 500; padding-top: 20px;padding-bottom: 15px;}

#block-quiz .selection .course {width: 93%; margin: auto;  background: #fff; padding-top: 35px; margin-bottom: 30px; border-radius: 0px 0px 21px 21px;padding-bottom: 60px;}
#block-quiz .selection .course span{color: #fff; font-size: 18px; font-weight: 500; background: #B3963D; padding: 8px 12px;}
#block-quiz .selection .course .frame{width: 82%; margin: auto; border: 1px solid #B3963D;padding-top: 50px;margin-top: -15px;padding-bottom: 20px;}
#block-quiz .selection .course h4{font-size: 24px; font-weight: 500; color: #B3963D;padding-top: 0px;padding-bottom: 21px;}
#block-quiz .selection .course h6{font-size: 20px; font-weight: 500; color: #B3963D;padding-top: 10px;}
#block-quiz .selection .course p{font-size: 18px; font-weight: 500; color: #B3963D;padding-top: 0px;padding-bottom: 20px;}
#block-quiz .selection .course small{font-size: 14px;}
#block-quiz .selection .course ul {width: 95%; margin: auto; display: flex; flex-wrap: wrap;justify-content: center;}
#block-quiz .selection .course ul li{width: calc(100%/3); font-size: 21px; border-radius: 21px;background: #fff;padding: 10px;margin-bottom: 20px;}
#block-quiz .selection .course ul li h2{font-weight: 500; padding-top: 20px;padding-bottom: 15px;}
#block-quiz .selection .course a{display: block; font-size: 16px; font-weight: 500; color: #333333;text-decoration: underline;padding-bottom: 10px;}

#block-quiz .question{width:725px;margin:55px auto 60px;padding:30px 80px 45px;background:#B3963D;color:#333;}
#block-quiz .question h2{font-size:24px;font-weight:bold;color: #fff;}
#block-quiz .question div{margin-top:24px;padding:25px;background:#FFF;font-size:18px;}
#block-quiz .question .big{font-size:32px;font-weight:bold;margin-top:14px;}
#block-quiz .btn-apply a{display:inline-block;width:420px;height:58px;line-height:58px;background:#333;color:#fff;text-decoration:none;font-size:24px;font-weight:bold;transition:.3s;}
#block-quiz .ac {max-width: 526px; margin: 25px auto 60px; color: #333; background-color: #F2F2F2;}
#block-quiz .ac_ttl {position: relative; padding: 10px; font-size: 16px; font-weight: 500; text-align: center; cursor: pointer;}
#block-quiz .ac_ttl::after {content: ""; position: absolute; right: 35px; top: 50%; width: 8px; height: 8px; border-bottom: 1px solid #333; border-right: 1px solid #333; transform: translateY(-50%) rotate(45deg);}
#block-quiz .ac_ttl.open::after {transform: translateY(-25%) rotate(-135deg);}
#block-quiz .ac_contents {padding: 10px 20px 40px 20px;}
#block-quiz .ac_contents p {font-size: 13px; line-height: 1.5;}
#block-quiz .ac_contents p + p {margin-top: 1em;}
#block-quiz .ac_contents p a {text-decoration: underline;}

 .br-sp{display: none;}


/* --------------------------------------------------------------- */
@media screen and (min-width: 768px){
  .is-sp{display:none;}
  br.v-sp{display:none;}
}

/* ========================================================================================= */
/* SP */
/* ========================================================================================= */

@media screen and (max-width: 1400px) {
 
 #block-head2{
  padding-bottom: 14%;
 }
 
}

@media screen and (max-width: 1200px) {
 
 #block-head2 .head2_logo{
  width: 13.8%;
  left: 15px;
 }
 
 #block-head2{
  padding-bottom: 16%;
 }
 
}

/* --------------------------------------------------------------- */
@media screen and (max-width:1000px) {
	.container{max-width:1000px;padding:0 5%;}
 
 #block-head2 .container{
  padding: 5% 0;
 } 
 
 #block-head2 .head2_logo{
  width: 15%;
  left: 25px;
 }
 
 #block-head2{
  padding-bottom: 20%;
 }
 
 #block-head2 .head2_ttl{
  font-size: 30px;
  padding-top: 15px;
 }
 
 .price h2{
  font-size: 16px;
 }
 
.price p{
  font-size: 18px;
 }
 
}

/* --------------------------------------------------------------- */
@media screen and (max-width:850px) {
	#block-quiz .container {border-radius: 0;}
}

/* --------------------------------------------------------------- */
@media screen and (max-width: 767px){
  .is-pc{display:none;}
  br.v-pc{display:none;}

  #wrapper{font-size:14px;padding-bottom:0px;overflow:hidden;}
	.container{padding:0 10px;}
	#wrapper a:hover{opacity:1;}
	#wrapper a img:hover{opacity:1;}
  
  #block-head{padding:30px 0 15px;}
  #block-head h1 span{font-size:16px;padding-top:14px;}

  #block-head2 {background:url(../img/mv-sp.jpg) no-repeat #000;background-size: cover;padding-bottom: 49.74391805377721%;}
  #block-head2 .head2_logo {left: 20px; width: 20%;}
  #block-head2 .head2_ttl {width: 90%; font-size: 32px;}
 #block-head2 .container{padding-top: 22%;}

  #block-quiz {padding: 20px 0 0;}
  #block-quiz .container {padding: 20px 0px 40px;}
  #block-quiz .container p{width: 90%; margin: auto; font-size: 18px;}
  #block-quiz .present{width: 90%; max-width:100%;font-size:22px;}
  #block-quiz .btn-about a{max-width:100%;/*width:300px;*/width:auto;padding:0 40px;height:34px;line-height:34px;border-radius:8px;background-size:6px 10px;}
  #block-quiz .question{width:calc(100% + 20px);margin:34px 0 22px;margin-left:-10px;padding:13px 20px 26px;}
  #block-quiz .question div{width: 90%;margin: auto; margin-top:11px;padding:30px 10px 40px 10px;font-size:14px;}
  #block-quiz .question h2{font-size:24px;padding-top: 10px;padding-bottom: 10px;}
  #block-quiz .question .big{font-size:25px;}
  #block-quiz .btn-apply a{max-width:100%;width:70%;margin: auto; font-size:20px;height:60px;line-height:58px;background-position:top 50% right 20px;}
  #block-quiz .ac {margin: 25px auto 30px;}
  #block-quiz .ac_ttl {padding: 12px 45px 12px 0; font-size: 16px;}
  #block-quiz .ac_contents {padding: 6px 20px 25px 20px;}
  #block-quiz .ac_contents p {font-size: 16px;}

 #block-quiz .selection .course {padding-top: 0px;}
 
 #block-quiz .selection .course .frame{width: 90%;}
 #block-quiz .selection .course p{font-size: 17px;padding-left: 0px;padding-right: 0px;}
 #block-quiz .selection .course ul li{margin-left: 0px; margin-right: 0px;}
 
 #block-quiz .present big{font-size: 25px;}
 
 #block-quiz .frame{width: 90%;}
 
 #block-quiz .survey{width: 90%;margin-top: 0px;margin-bottom: 0px;}
 
 #block-quiz .check{width: 70%;}
 
 .price h2{width: 130px;font-size: 20px; margin: auto; display: block;}
 
.price p{
 font-size: 22px;
 margin-top: 15px;
 margin-bottom: 12px;
 }
 
#block-quiz .survey h5::before, #block-quiz .survey h5::after{
 width: 20%; 
 }

#block-quiz .survey p{
 font-size: 26px;
 margin-bottom: 10px;
}

 
}

@media screen and (max-width: 670px){
 
 #block-quiz .container{padding-bottom: 20px;}
 
 #block-quiz .selection{margin-top: 25px;margin-bottom: 25px; padding-bottom: 20px;}
 #block-quiz .selection .point{width: 95%;}
 #block-quiz .selection .commodity{width: 95%;}
 #block-quiz .selection .course{width: 95%;padding-bottom:40px; }
 
 #block-quiz .selection .course ul{width: 95%;}
 
 #block-quiz .selection .course p{width: 100%;}
 #block-quiz .selection .course small{font-size: 13px;}
 
  #block-quiz .container .question p{width: 95%;}
 
 .price p{font-size: 20px;}
 
 #block-quiz .check{width: 80%;}
 
 #block-quiz .check ul > li{font-size: 18px;}
 
}

@media screen and (max-width: 600px){
 
 
  .br-sp{display: block;}
 
 #block-quiz .selection .commodity br{display: block;}
 
 #block-quiz .selection .point li h2{font-size: 18px;}
 #block-quiz .selection .point{padding-bottom: 20px;}
 
 #block-quiz .selection .commodity ul{padding-bottom: 30px;}
 #block-quiz .selection .commodity ul li{width: calc(100%/3);margin-bottom: 0px;}
 #block-quiz .selection .commodity p{width: 100%;}
 
 #block-quiz .selection .course ul li{padding: 8px;}
 #block-quiz .selection .course h6{font-size: 17px;}
 #block-quiz .selection .course p{font-size: 15px;letter-spacing: 1px;}
 #block-quiz .selection .course small{font-size: 12px;}
 #block-quiz .selection .course a{font-size: 14px;}

 #block-quiz .question div{width: 95%;}
 
 #block-quiz .container .question p{font-size: 16px;}
 
 #block-quiz .container .question .big{font-size: 24px;}
 
 #block-quiz .frame{width: 95%;}
 
 #block-quiz .check{width: 90%;}
 
 #block-quiz .check ul > li{padding-left: 35px; font-size: 20px;} 
 
 #block-quiz .present{width: 95%;} 
 
 #block-quiz .present{font-size: 24px;}
 
 #block-quiz .present big{font-size: 24px;}
 
 #block-quiz .survey h5{font-size: 20px;}
 
}


@media screen and (max-width: 527px){
 
 #block-quiz .container{padding-bottom: 30px;}
 
 #block-quiz .selection{margin-top: 30px; margin-bottom: 30px; padding-bottom: 10px;}
 #block-quiz .selection .course{padding-bottom: 30px;}
 
 #block-quiz .container p{font-size: 16px;}
 
 #block-quiz .selection .point li{padding: 8px;} 
 #block-quiz .selection .point li h2{font-size: 16px;}
 
 #block-quiz .question h2{width: 95%; margin: auto; font-size: 22px;}
 

#block-quiz .survey p{
 font-size: 24px;
 margin-bottom: 10px;
}
 
}

@media screen and (max-width: 490px){
 
 #block-quiz .container{padding-bottom: 20px;}
 
 #block-quiz .selection{margin-top: 20px;margin-bottom: 25px; padding-bottom: 10px;}
 
 #block-head2 .head2_logo{width: 30%;}
 
 #block-head2{padding-bottom: 70%;}
 
 #block-head2 .container{padding-top: 30%;}
 
 #block-quiz .selection .point li h2{font-size: 15px;}
 
 #block-quiz .selection .commodity h3{font-size: 22px;}
 #block-quiz .selection .commodity p{font-size: 14px;}
 
 #block-quiz .selection .course h4{font-size: 22px;}
 #block-quiz .selection .course .frame{width: 93%;}
 #block-quiz .selection .course ul li{padding: 5px;margin-bottom: 0px;} 
 
 #block-quiz .question h2{font-size: 20px;}
 
 #block-head2 .head2_ttl{font-size: 28px;}
 
 
 .price h2{font-size: 18px;}
 
 .price p{font-size: 18px;line-height: 1.6;}
 
 #block-quiz .check ul > li{font-size: 17px;}
 
 #block-quiz .survey h5::before, #block-quiz .survey h5::after{width: 15%;}
 
 #block-quiz .survey h5{font-size: 18px;}
 

#block-quiz .survey p{
 width: 100%;
 font-size: 22px;
}
 
}


@media screen and (max-width: 428px){
 
 #block-quiz .present{font-size: 21px;}
 #block-quiz .present big{font-size: 23px;}
 
 #block-quiz .selection .point li h2{font-size: 14px;}
 
 #block-quiz .selection .commodity h3{font-size: 20px;}
 #block-quiz .selection .commodity p{font-size: 13px;}
 
 #block-quiz .selection .course h4{font-size: 20px;}
 #block-quiz .selection .course h6{font-size: 15px;}
 #block-quiz .selection .course p{font-size: 13px;}
 #block-quiz .selection .course a{font-size: 13px;}
 
 #block-quiz .question h2{font-size: 18px;}
 #block-quiz .container .question p{font-size: 15px;}
 
 #block-quiz .container .question .big{font-size: 22px;}
 
 #block-quiz .check{margin-bottom: 0px;}
 
}

@media screen and (max-width: 403px){
 
 
 #block-quiz .selection .point li h2{font-size: 12px;}
 
 #block-quiz .selection .commodity ul li{padding: 5px;}
 
 #block-quiz .selection .course p{font-size: 12px;}
 #block-quiz .selection .course p small{font-size: 10px;}
 #block-quiz .selection .course a{font-size: 12px;}
 
}

@media screen and (max-width: 375px){
 
 #block-quiz .selection .course ul li{padding: 3px;}
 #block-quiz .selection .course a{font-size: 11px;}
 
 #block-quiz .container .question p{font-size: 14px;}
  #block-quiz .container .question .big{font-size: 20px;}
 
 #block-head2 .head2_ttl{width: 95%;font-size: 26px;}
 
 .price p{font-size: 18px;}
 
 #block-quiz .check ul > li{font-size: 18px;}
 
 #block-quiz .present{font-size: 22px;}
 
 #block-quiz .present big{font-size: 22px;}
 
 #block-quiz .survey h5{font-size: 19px;}
 
 #block-quiz .survey h5::before, #block-quiz .survey h5::after{width: 10%;}
 
}

@media screen and (max-width: 350px){
 
 #block-quiz .container p{font-size: 15px;}
 #block-quiz .present{font-size: 19px;}
 #block-quiz .present big{font-size: 20px;}
 #block-quiz .selection h1{font-size: 20px;}
 
 #block-quiz .selection .commodity h3{font-size: 17px;}
 #block-quiz .selection .commodity ul li{padding: 5px;}
 
 #block-quiz .selection .point li h2{font-size: 11px;}
 
 #block-quiz .selection .course .frame{width: 95%;padding-top: 40px;}
 #block-quiz .selection .course h4{font-size: 18px;}
 #block-quiz .selection .course h6{font-size: 13px;}
 #block-quiz .selection .course p{font-size: 11px;}
 #block-quiz .selection .course p small{font-size: 9px;}
 #block-quiz .selection .course a{font-size: 10px;}
 
 #block-quiz .container .question p{font-size: 12px;}
 #block-quiz .container .question .big{font-size: 18px;}
 
}

@media screen and (max-width: 330px){
 
  #block-quiz .selection .point li h2{font-size: 10px;}
 #block-quiz .selection .commodity p{font-size: 12px;}
 
}