@charset "utf-8";
/* CSS Document */
.page-brandchart{
	height:100%;
}
.content-course{
	padding-top:0;
	margin-bottom:0;
}
.wrapper700{
	max-width:700px;
	margin:0 auto;
	padding:3%;
}
.brandchart-header{
	background:#54a4eb;
	font-weight:bold;
	padding-top:40px;
}
.brandchart-header .catch{
	font-size:1.2rem;
	color:#ffffff;
}
.brandchart-header .ttl{
	font-size:1.8rem;
	color:#ffff7c;
	
}
.page-brandchart-top .yesno{
	height: 100vh;
}
.yesno {
	position:relative;
	background: #fff;
	margin:0 0 40px;
        }

.yesno ul{
	display: flex;
	flex-wrap: wrap;
        }

.yesno ul li {
	width: 100%;
	list-style:none;
	text-align: center;
	color: #FFF;
	font-size: 1.8rem;
	margin: 10px 7px;
        }
.positionFit {
	position:absolute;
	left: 0px;
	top: 0px;
	width: 100%;
        }

.positionFit h3{
	padding: 10px 20px 10px 1.5em;
	font-size: 1.5rem;
	font-weight:bold;
	position: relative;
	line-height: 1.2;
	color:#1b91ea;
	text-indent:-1.5rem;
        }

.positionFit h3 span{
	font-size: 1.5em;
	margin-right:0.1em;
        }

/*.positionFit h2:after {
	content: "";
          display: block;
          height: 4px;
          background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
          background: linear-gradient(to right, rgb(255, 186, 115), transparent);
        }*/

.experience p {
	padding: 2% 3%;
	margin: 0px 0px 10px 1em;
	font-size: 100%;
        }

.yesno .btn {
	background-color: #ffffff;
	color: #4d4d4d;
	height: 120px;
	text-decoration: none;
	width: 100%;
	padding:1em;
	font-size: 1.5rem;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
	border-radius: 36px;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        }

.no-bg{
	background: #48cc83!important;
        }

.yesno .btn:hover {
	background-color: #cbe9f7;
	margin-top: 3px;
        }

.yesno #q_01 .btn {
	height: 100px;
}
/*.yesno .material-icons{
	background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
	border-radius: 50%;
          font-size: 30px;
          padding: 10px 10px 8px;
          vertical-align: middle;
          margin: 0 10px 0 0;
        }*/

/*.yesno .last .btn{
	margin: 10px 3px;
          background-color: #fcf3ca;
          color: #482d2dc2;
          height: 50px;
          text-decoration: none;
          width: 98%;
          font-size: 21px;
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center; 
          align-items: center; 
          -webkit-justify-content: center; 
          justify-content: center; 
          border-radius: 16px;
          border-bottom: 5px solid #d1b78c;
        }*/

.yesno .btn-blue{
	display:block;
	margin:50px auto 10px;
	max-width: 300px;
	height:auto;
	padding: 0.5em 2em;
	text-align: center;
	color:#ffffff;
    background-color:#208adc;
	transition:all 0.5s;
	position:relative;
	border-radius:50px;
	font-size: 1.2rem;
    font-weight: bold;
}
.yesno .btn-blue::after{
	font-family: "Font Awesome 5 Free";
	content: "\f104";
	font-weight: 700;
	position: absolute;
	top: 50%;
	left: 5%;
	 color:#ffffff;
	 transform: translateY(-50%);
	font-size:2rem;
}
.yesno .btn-blue:hover{
	background-color:#ffffff;
	border:solid 3px #208adc;
	color:#208adc;
	/*transform: translate3d(1px, 3px, 1px);*/
	box-shadow:none;
	margin:50px auto 10px;
}
.yesno .btn-blue:hover::after{
	color:#208adc;
}
.yesno .last{
	margin-top:30px;
}
.yesno .last .recommend{
	display:flex;
	align-items: center;
	justify-content:center;
	gap:10px;
}
.yesno .last .recommend img{
	width:80px;
	height:80px;
}
.yesno .last h3{
	font-size:1.1rem;
	font-weight:bold;
}
.yesno .last .inner{
	display: flex;
	padding:0 5%;
	flex-wrap:wrap;
	/*gap:3%;*/
	justify-content: space-around;
	margin-bottom:60px;
} 
.yesno .last .inner-2courses{
	display: flex;
	justify-content: space-between;
	position:relative;
} 
.yesno .last .course-box{
	max-width:100%;
	box-shadow: 2px 2px 10px -1px rgba(0, 0, 0, .3);
	margin-top:20px;
} 
.yesno .last .inner-2courses .course-box{
	width:40%;
	
} 
.yesno .last .inner-2courses .course-box:first-of-type::after{
	font-family: "Font Awesome 5 Free";
	content: "\f067";
	font-weight: 700;
	position: absolute;
	top: 30%;
	left: 50%;
	 color:#4d4d4d;
	 transform: translate(-50%);
	font-size:2rem;
}
.option-ttl{
    text-align: center;
    font-size: 1.5rem;
    margin-top: 50px;
	}
.yesno .btn-blue{
	display:block;
	margin:20px auto 10px;
}
.yesno .btn-blue:hover{
	margin:20px auto 10px;
}
.cv-area{
	padding-bottom:30px;
}
.cv-area .notice{
	margin:20px auto;
	padding:3%;
	border:solid 1px #4d4d4d;
}
.cv-area .btn-pink{
	background-color: #ffcfff;
	color: #4d4d4d;
	height: 100px;
	width: 100%;
	padding:1em;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
	border-radius: 36px;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
	font-size:1.2rem;
}

@media (min-width: 751px) {
	.brandchart-header{
	padding-top:0;
}
	.yesno .last .course-box{
	width:45%;
	box-shadow: 2px 2px 7px -1px rgba(0, 0, 0, .3);
}
	.yesno .last .inner-2courses .course-box:first-of-type::after{
	top: 50%;
}
}