@charset "utf-8";
/* CSS Document */
#course_diagnosis  {
    scroll-behavior: smooth;
}
#course_diagnosis #visual {
  position: relative;
  height: 360px;
  margin: 0 0 90px;
}
#course_diagnosis #visual div[class^="al_"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 80px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
#course_diagnosis #visual div[class^="al_"].al_center {
  align-items: center;
  height: auto;
}
#course_diagnosis #visual figure {
  position: relative;
  height: 360px;
  overflow: hidden;
}
#course_diagnosis #visual figure.shadow20::before {
  display: none;
}
#course_diagnosis .read{
  text-align: center;
  margin-bottom: 60px;
}
#course_diagnosis .read .speech_bubble{
  position: relative;
  width: 360px;
  background: #224D9A;
  padding: 5px 0;
  text-align: center;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: bold;
  border-radius: 50px;
  margin: 0 auto;
}
#course_diagnosis .read .speech_bubble:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(34, 77, 154, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#224D9A;
    top:100%;
    left:50%;
}
#course_diagnosis .read p{
  font-size: 2.4rem;
  margin: 20px 0 0;
}
#course_diagnosis .read p span{
  background: linear-gradient(transparent 70%, #FFE26D 30%);
  display: inline-block;
  line-height: 1;
}
#course_diagnosis .read a{
  font-size: 1.8rem;
  color:#333;
  text-decoration: underline;
}
#course_diagnosis .read p i{
  color: #E40057;
  font-size: 1.8rem;
}
#course_diagnosis .plan_list{
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
}
#course_diagnosis .plan_list .question{
  padding:60px 0;
}

#course_diagnosis .plan_list .question h2{
  font-weight: bold;
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 40px;
}
#course_diagnosis .plan_list .question ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
}
#course_diagnosis .plan_list .question ul#question01,
#course_diagnosis .plan_list #q2_4 ul#question02,
#course_diagnosis .plan_list .question ul#question03{
  max-width: 660px;
}
#course_diagnosis .plan_list #q2_1 ul#question02,
#course_diagnosis .plan_list #q2_3 ul#question02{
  max-width: 850px;
}

#course_diagnosis .plan_list .question ul li {
  width: 190px;
  margin: 0 10px 20px;
  position: relative;
}

/*
#course_diagnosis .plan_list .question ul li:nth-of-type(1){
  background: url("/cinfo/course_diagnosis/img/q01_img05.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(2){
  background: url("/cinfo/course_diagnosis/img/q01_img04.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(3){
  background: url("/cinfo/course_diagnosis/img/q01_img03.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(4){
  background: url("/cinfo/course_diagnosis/img/q01_img01.png") no-repeat top 25px center;
  
}
#course_diagnosis .plan_list .question ul li:nth-of-type(5){
  background: url("/cinfo/course_diagnosis/img/q01_img02.png") no-repeat top 25px center;
}

#course_diagnosis .plan_list .question ul li:nth-of-type(1):hover {
  background: url("/cinfo/course_diagnosis/img/q01_img05.png") no-repeat top 24px center #d8eaff;
}

#course_diagnosis .plan_list .question ul li:nth-of-type(2):hover {
  background: url("/cinfo/course_diagnosis/img/q01_img04.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(3):hover {
  background: url("/cinfo/course_diagnosis/img/q01_img03.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(4):hover {
  background: url("/cinfo/course_diagnosis/img/q01_img01.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(5):hover {
  background: url("/cinfo/course_diagnosis/img/q01_img02.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(1){
  background: url("/cinfo/course_diagnosis/img/q02_img01.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(2){
  background: url("/cinfo/course_diagnosis/img/q02_img02.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(3){
  background: url("/cinfo/course_diagnosis/img/q02_img03.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(4){
  background: url("/cinfo/course_diagnosis/img/q02_img04.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(5){
  background: url("/cinfo/course_diagnosis/img/q02_img05.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(6){
  background: url("/cinfo/course_diagnosis/img/q02_img06.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(7){
  background: url("/cinfo/course_diagnosis/img/q02_img07.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.nichijo{
  background: url("/cinfo/course_diagnosis/img/q02_img01.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.trip{
  background: url("/cinfo/course_diagnosis/img/q02_img02.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.abroad{
  background: url("/cinfo/course_diagnosis/img/q02_img03.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.wh{
  background: url("/cinfo/course_diagnosis/img/q02_img04.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.biz,
#course_diagnosis .plan_list .question ul#question02 li.u_exam,
#course_diagnosis .plan_list .question ul#question02 li.h_exam{
  background: url("/cinfo/course_diagnosis/img/q02_img05.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.career{
  background: url("/cinfo/course_diagnosis/img/q02_img06.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.license{
  background: url("/cinfo/course_diagnosis/img/q02_img07.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question02 li.nichijo:hover {
  background: url("/cinfo/course_diagnosis/img/q02_img01.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li.trip:hover {
  background: url("/cinfo/course_diagnosis/img/q02_img02.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li.abroad:hover {
  background: url("/cinfo/course_diagnosis/img/q02_img03.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li.wh:hover {
  background: url("/cinfo/course_diagnosis/img/q02_img04.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li.biz:hover,
#course_diagnosis .plan_list .question ul#question02 li.u_exam:hover,
#course_diagnosis .plan_list .question ul#question02 li.h_exam:hover {
  background: url("/cinfo/course_diagnosis/img/q02_img05.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li.career:hover {
  background: url("/cinfo/course_diagnosis/img/q02_img06.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li.license:hover {
  background: url("/cinfo/course_diagnosis/img/q02_img07.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(1){
  background: url("/cinfo/course_diagnosis/img/q03_img01.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(2){
  background: url("/cinfo/course_diagnosis/img/q03_img02.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(3){
  background: url("/cinfo/course_diagnosis/img/q03_img03.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(4){
  background: url("/cinfo/course_diagnosis/img/q03_img04.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(5){
  background: url("/cinfo/course_diagnosis/img/q03_img05.png") no-repeat top 25px center;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(1):hover {
  background: url("/cinfo/course_diagnosis/img/q03_img01.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(2):hover {
  background: url("/cinfo/course_diagnosis/img/q03_img02.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(3):hover {
  background: url("/cinfo/course_diagnosis/img/q03_img03.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(4):hover {
  background: url("/cinfo/course_diagnosis/img/q03_img04.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(5):hover {
  background: url("/cinfo/course_diagnosis/img/q03_img05.png") no-repeat top 24px center #d8eaff;
}
*/
#course_diagnosis .plan_list .question ul li a{
  text-decoration: none;
}

#course_diagnosis .plan_list .question ul li input {
  display: none;
}
#course_diagnosis .plan_list .question ul li label{
  font-size: 1.8rem;
  color: #224D9A;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #224D9A;
  text-align: center;
  height: 170px;
  width: 100%;
  text-decoration: none;
  line-height: 1.2;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#course_diagnosis .plan_list .question ul li label:hover {
  background-color:#d8eaff;
  border: 3px solid #74abe6;
}
#course_diagnosis .plan_list .question ul li label img:hover {
  transform: scale(1.2);
  transition-duration: 0.3s;
}

#course_diagnosis .plan_list .question ul li:nth-of-type(1) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q01_img05.png") no-repeat top 24px center #d8eaff;
}

#course_diagnosis .plan_list .question ul li input:checked + label {
  opacity: 1;
  border: 1px solid #b9d5f3;
  color: #224d9a;
  width: 100%;
}


#course_diagnosis .plan_list .question ul li:nth-of-type(1) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q01_img05.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(2) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q01_img04.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(3) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q01_img03.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(4) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q01_img01.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul li:nth-of-type(5) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q01_img02.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(1) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q02_img01.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(2) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q02_img02.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(3) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q02_img03.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(4) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q02_img04.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(5) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q02_img05.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(6) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q02_img06.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question02 li:nth-of-type(7) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q02_img07.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(1) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q03_img01.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(2) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q03_img02.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(3) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q03_img03.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(4) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q03_img04.png") no-repeat top 24px center #d8eaff;
}
#course_diagnosis .plan_list .question ul#question03 li:nth-of-type(5) input:checked + label {
  background: url("/cinfo/course_diagnosis/img/q03_img05.png") no-repeat top 24px center #d8eaff;
}

/*
#course_diagnosis .plan_list .question ul li a{
  font-size: 1.8rem;
  color: #777777;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #cfcfcf;
  text-align: center;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.6;
  width: 100%;
  text-decoration: none;
}
#course_diagnosis .plan_list .question ul li a.click{
  opacity: 1;
  background: #ecf5ff;
  border: 1px solid #b9d5f3;
  color: #224d9a;
  width: 100%;
}

*/
#course_diagnosis .plan_list .question ul li img{
  margin-bottom:10px;
  width: 60%;
}
#course_diagnosis #course .arrow {
  text-align: center;
  margin: 0 0 40px;
}

#course_diagnosis #course h2 {
  margin-bottom: 80px;
  font-size: 3.2rem;
}
#course_diagnosis #course h2 span{
  background: linear-gradient(transparent 85%, #FFE26D 15%);
  display: inline-block;
  line-height: 1;
}
#course_diagnosis #course h2 span span{
  font-size: 5.2rem;
}
#course_diagnosis #course .course_list {
  position: relative;
}
#course_diagnosis #course .course_list::before {
  content: "01";
  position: absolute;
  top: -25px;
  left: 20px;
  width: 70px;
  height: 70px;
  background: #224d9a;
  filter: drop-shadow(0px 3px 6px rgba(41, 47, 214, 0.3));
  border-radius: 100px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.6rem;
  font-weight: bold;
}
#course_diagnosis #course .course_list:nth-of-type(3)::before{
  content: "02";
}
#course_diagnosis #course .course_list:nth-of-type(4)::before{
  content: "03";
}
#course_diagnosis #course .course_list:nth-of-type(5)::before{
  content: "04";
}
#course_diagnosis #course .course_list:nth-of-type(6)::before{
  content: "05";
}
#course_diagnosis #course .course_list:nth-of-type(7)::before{
  content: "06";
}
#course_diagnosis #course .course_list:nth-of-type(8)::before{
  content: "07";
}
#course_diagnosis #course .course_list:nth-of-type(9)::before{
  content: "08";
}
#course_diagnosis #course .course_list:nth-of-type(10)::before{
  content: "09";
}
.visual_btn span{
  color: #fff !important;
}
.plan_list #loading {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 19;
  background:#fff;
  text-align:center;
  min-height: 560px;
}

#loading-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 #loading-img img {
  width:260px;
}
#loading2 {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 19;
  background:#fff;
  text-align:center;
  min-height: 560px;
}

#loading2-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 #loading2-img img {
  width:260px;
}
.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
}

  @keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.banner img{
  max-width: 520px;
}

.banner{
  position: relative;
}
.banner a::before {
  position: absolute;
  top: 0;
  right: 190px;
  content: "\e909";
  font-family: 'icomoon';
  font-size: 1.4rem;
}

@media screen and (max-width: 720px) {
#course_diagnosis #visual {
  position: relative;
  height: auto;
  margin: 0 0 40px;
}
#course_diagnosis #visual div[class^="al_"].al_center {
    padding: 0;
    margin: 0;
  }
#course_diagnosis #visual h1{
  text-align: center;
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 20px;
}
#course_diagnosis #visual figure {
  height: auto;
}
#course_diagnosis #visual figure.shadow20::before {
  display: none;
}
#course_diagnosis #visual div[class^="al_"].al_center {
  position: absolute;
  color: #fff;
}
#course_diagnosis #visual div[class^="al_"] p {
  padding-top: 30px;
  width: 80%;
}
#course_diagnosis .read p {
  font-size: 1.8rem;
  margin: 20px;
}
#course_diagnosis .read a {
  font-size: 1.4rem;
}
#course_diagnosis .plan_list {
  width: 90%;
}
#course_diagnosis .plan_list .question {
  padding: 60px 0 20px;
}

#course_diagnosis .plan_list .question h2 {
  font-size: 1.6rem;
}
#course_diagnosis .plan_list .question ul {
  justify-content: center;
}
/*#course_diagnosis .plan_list  .question ul#question02,
#course_diagnosis .plan_list  .question ul#question03{
  display: none;
}*/
[data-next] {
  cursor: pointer;
}

#course_diagnosis .plan_list .question ul li label {
  box-shadow: 3px 4px 2px #e1e6ec;
}
#course_diagnosis .plan_list .question ul li {
  width: 44%;
}
#course_diagnosis #course .arrow img{
  width: 30%;
  height: auto;
}
#course_diagnosis #course h2 {
  font-size: 2rem;
}
#course_diagnosis #course h2 span span {
  font-size: 4rem;
}
#course_diagnosis #course .course_list::before {
  top: -15px;
  left: 10px;
  width: 50px;
  height: 50px;
  font-size: 2.2rem;
}
.banner{
  position: relative;
}
.banner a::before {
  position: absolute;
  top: 0;
  right: 5px;
  content: "\e909";
  font-family: 'icomoon';
  font-size: 1.2rem;
}
}