/* Common */

/* button */
.btnArea {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.btnArea ul li + li {
  margin-top: 2rem;
}

.btn a {
  margin: 0 auto;
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1rem;
  color: #fff;
  background-color: #ff8b03;
  width: 100%;
  max-width: 320px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s 0s linear;
  opacity: 1;
}

.btn a:hover {
}

.btn2 a {
  margin: 0 auto;
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  color: #fff;
  background-color: #f44e59;
  width: 100%;
  max-width: 320px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s 0s linear;
  opacity: 1;
}

.btn3 a {
  margin: 0 auto;
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  color: #fff;
  background-color: #35578c;
  width: 100%;
  max-width: 320px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s 0s linear;
  opacity: 1;
}

.renewal{
 text-align: center;
 background-color: #1f83c7;
}

.linestep{
  text-align: center;
  background-color: #f0a74b;
 }

@media only screen and (min-width: 768px) {
.renewal img{
  Width:80%;
}

.linestep img{
  Width:80%;
  }

}

/* button end*/

section {
  padding: 4rem 0;
}

section .title {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 900;
  text-align: center;
}

@media only screen and (min-width: 1024px) {

  section {
    padding: 8rem 0;
  }

  section .title {
    font-size: 3.6rem;
    line-height: 5rem;
  }
}


/* Common end*/



/* header */
.navi{
  text-align: center;
}

/* header end*/


/* section rec */

#rec {
  background-color: #f6f3eb;
}

#rec .title {
  font-size: 2rem;
  line-height: 3rem;
}

#rec .box {
  margin-top: 3rem;
  padding: 0 3rem 3rem 3rem;
  border: 3px #e4e4e4 solid;
  border-radius: 25px;
  background-color: #fff;
  margin:  0 auto;
  justify-content: space-between;
}

#rec .box .listBox {
  margin-top: 3rem;
}

#rec .box ul{
  padding: 2rem;
}

#rec .box ul li {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}

#rec .box ul li + li {
  margin-top: 1rem;
}


#rec .category-writer {
  background-color: #4caf6a;
  color: #fff;
  padding: 10px;
  font-size: 2rem;
  font-weight: bold;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  width: 100%;
}

#rec .category-pr {
  background-color: #4c4cff;
  color: #fff;
  padding: 10px;
  font-size: 1.7rem;
  font-weight: bold;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  width: 100%;
}


/* #rec .test{
overflow: hidden;
position: relative;
}

#rec .bg_clr {
  background-color: #29ABE2 ;
  width: 720px;
  border-radius: 70px;
  margin-top: 3rem; 
  float:  left;
}

#rec .bg_clr .noneexp {
  padding: 3rem 0 3rem 0;
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
  line-height: 6rem;
  font-weight: 700;
}

#rec .noneexp_img{
  width: 150px;
  margin: 0;
} */

/* rec for PC */
@media only screen and (min-width: 1024px) {

  #rec .title {
    font-size: 3rem;
  }

  #rec .box {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    padding: 3.5rem 1.5rem 3rem 1.5rem;
    border: 5px #e4e4e4 solid;
    border-radius: 25px;
    background-color: #fff;
  }

  #rec .category-writer {
    background-color: #4caf6a;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    width: 100%;
  }
  
  #rec .category-pr {
    background-color: #4c4cff;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    width: 100%;
  }


  #rec .box .subtitle {
    margin-bottom: 2.5rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 5rem;
  }

  #rec .box .nonexp {
    text-align: right;
    padding-right: 2rem;
    border-radius: 25px 0 0 25px;
  }
  

  #rec .box .exp {
    text-align: center;
    border-radius: 0 30px 30px 0;
  }

  #rec .box .listBox + .listBox {
    margin-top: 0;
  }

  #rec .box ul li + li {
    margin-top: 1.5rem;
  }
  
  #rec .box .listBox.lft ul {
    margin-right: 2rem;
  }
  
  #rec .box .listBox.lft ul li {
    text-align: right;
  }
  
  #rec .box .listBox.rt ul {
    margin-left: 2rem;
  }
  
  #rec .box .listBox.rt ul li {
    text-align: left;
  }

  /* #rec .test{
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
    }

  #rec .bg_clr {
    background-color: #29ABE2 ;
    width: 720px;
    border-radius: 70px;
    margin-top: 3rem; 
    margin-left: 80px;
    float:  left;
  }

  #rec .bg_clr .noneexp {
    padding: 1rem 0 1rem 0;
    text-align: center;
    font-size: 2.5rem;
    color: #fff;
    line-height: 3.5rem;
    font-weight: 700;
  }  

  #rec .noneexp_img{
    width: 150px;
    margin: 0;
  } */

}
/* rec for PC end*/

/* rec for Tab */
@media only screen and (min-width: 768px) {
  #rec .box {
    padding: 3rem 1.5rem;
    border: 3px #e4e4e4 solid;
    border-radius: 25px;
    background-color: #fff;
    width: 80%;
    margin:  0 auto;
  }

  #rec .box .listBox {
    margin-top: 0;
    width: 50%;
  }


  #rec .box ul li {
    display: block;
    padding-top: 0;
    list-style: disc;
    font-size: 1.5rem;
    line-height: 1.7rem;
    font-weight: 700;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px){
  #rec .box ul li {
    text-align: center;
  }

  #rec .category-writer {
    background-color: #4caf6a;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 40px;
    width: 95%;
  }
  
  #rec .category-pr {
    background-color: #4c4cff;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 40px;
    width: 95%;
  }

  #rec .test{
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
  }

  #rec .bg_clr {
    background-color: #29ABE2 ;
    border-radius: 60px;
    width: 70%;
    margin-top: 20px;
    margin-left: 70px;
    float:  left;
  }
 
  /* #rec .bg_clr .noneexp {
    padding: 1rem 0 1rem 0;
    text-align: center;
    font-size: 2rem;
    color: #fff;
    line-height: 2.5rem;
    font-weight: 700;
  }  
    
  #rec .noneexp_img{
    width: 90px;
    margin: 0;
  } */
  
  }
/* rec for Tab end */



/* rec for SP */
@media only screen and (max-width: 767px) {
  #rec .box {
    padding: 3rem 1.5rem;
    border: 3px #e4e4e4 solid;
    border-radius: 25px;
    background-color: #fff;
    width: 80%;
    margin:  0 auto;
  }

  #rec .box .listBox {
    margin-top: 0;
    width: 50%;
  }

  #rec .box ul li {
    padding-top: 0;
    padding-left: 1rem;
    list-style: disc;
    font-size: 1.4rem;
    font-weight: 700;
  }

  #rec .category-writer {
    background-color: #4caf6a;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 40px;
    width: 95%;
  }
  
  #rec .category-pr {
    background-color: #4c4cff;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 40px;
    width: 95%;
  }

  /* #rec .test{
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
  }

  #rec .bg_clr {
    background-color: #29ABE2 ;
    border-radius: 60px;
    width: 55%;
    margin-top: 20px;
    margin-left: 40px;
    float: left;
  }

  #rec .bg_clr .noneexp {
    padding: 0.9rem 0 0.9rem 0;
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.5rem;
    font-weight: 700;
  }  

  #rec .noneexp_img{
    width: 80px;
    margin: 0;
  }  */
  
  }
/* rec for SP end*/
/* section rec end*/





/* section results */  
#results .test{
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
#results .bg_clr {
    background-color: #1f83c7 ;
    width: 720px;
    border-radius: 70px;
    margin-top: 3rem; 
    float:  left;
}
  
#results .bg_clr .noneexp {
  padding: 2rem 0 2rem 0;
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
  line-height: 4rem;
  font-weight: 700;
}
  
#results .noneexp_img{
    width: 150px;
    margin: 0;
} 

#results a{
  text-align: center;
  text-decoration: none;
}

#results .box dl {
  position: relative;
}

#results .box dl dt {
  padding-top: 5%;
  font-size: medium;
  text-align: left;
  font-weight: 700;
  color: #000000;
}

#results .box dl dd {
  margin-top: 1rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
  color: #000000;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#results .bg_sp .ttlArea .ico {
  display: inline-block;
  width: 150px;
}

#results .bg_sp .ttlArea .title {
  font-size: 3rem;
  font-weight: 900;
  line-height: 6rem;
  text-align: left;
}

#results .bg_sp .ttlArea .subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  /* line-height: 7rem; */
}

#results .bg_sp .ttlArea .border{
  border-bottom: 6px #FF3B53 solid;
  }


#results .bg_sp .survey_question {
  font-size: 1.6rem;
  line-height: 2.5rem;
  font-weight: 700;
}

#results .bg_sp .survey_data01 {
  display: inline-block;
  width: 40%;
}

#results .bg_sp .survey_text {
  text-align: center;
}

#results .bg_sp .qestionArea {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

#results .bg_sp .qestionArea .survey_question02{
  display: inline-block;
  width: 150px;
}

#results .bg_sp .survey_data02 {
  display: inline-block;
  width: 70%;
}

.survey_box{
  position: relative;
}
.survey_data_text {
  position: absolute;
  top: 20px;
  right: 20%;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 2.5rem;
}

.survey_data_text02 {
  position: absolute;
  top: 90px;
  right: 17%;
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 2.8rem;
}

.survey_list {
  padding: 3rem 1.5rem;
  border-radius: 25px;
  background-color: #FFFDDB;
  box-shadow: 15px 15px 0px 0 #FFCA65;
  width: 70%;
  margin:  0 auto;
  margin-top: 3rem;
  margin-bottom: 5rem;
}

.survey_listBox{
  margin-top: 0;
}

.survey_listBox ul li {
  display: block;
  padding-top: 0;
  padding-left: 2rem;
  list-style: disc;
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-weight: 700;
}

.survey_list_txt{
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: #FF7A00;
  text-align: center;
}

#results .bg_sp .book{
  padding-top: 3rem;
  margin: 0 auto;
  width: 50%;
}

/* results for PC */

@media only screen and (min-width: 1024px) {

#results{
  /* background: url("../images/arr-down.png") no-repeat center top;
  -webkit-background-size: 200px auto; */
  background-size: 200px auto;
  padding: 50px;
  background-color: #ffffff;
  height: 100%;
  text-align: center;
}


#results .wrapper {
  background-color: none;
  height: 100%;
  width: 100%;
}

#results .bg_sp {
  height: 100%;
  width: 100%;
  /* background: url("../images/bg-skill_sp.jpg") no-repeat center 110px;
  -webkit-background-size: contain;
  background-size: contain; */
}

#results .bg_sp .ttlArea {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

#results .bg_sp .ttlArea .ico {
  display: inline-block;
  width: 150px;
}

#results .bg_sp .ttlArea .title {
  font-size: 3rem;
  font-weight: 900;
  line-height: 6rem;
  text-align: left;
}

#results .bg_sp .ttlArea .subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 7rem;
  text-align: center;
}

#results .bg_sp .ttlArea .border{
  border-bottom: 6px #FF3B53 solid;
  }

#results .bg_sp .survey_question {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 900;
}

#results .bg_sp .survey_data01 {
  display: inline-block;
  width: 40%;
}

#results .bg_sp .qestionArea {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.survey_box{
  position: relative;
}
.survey_data_text {
  position: absolute;
  top: 5%;
  right: 19%;
  color: #ffffff;
  font-size: 250%;
  font-weight: 800;
  line-height:  100%;
  transform: translate(-7%,-20%)
}

.survey_data_text02 {
  position: absolute;
  top: 23%;
  right: 17%;
  color: #ffffff;
  font-size: 260%;
  font-weight: 800;
  line-height: 110%;
  /* transform: translate(-10%,-16%) */
}

.survey_list {
  padding: 3rem 1.5rem;
  border-radius: 25px;
  background-color: #FFFDDB;
  box-shadow: 15px 15px 0px 0 #FFCA65;
  width: 70%;
  margin:  0 auto;
  margin-top: 3rem;
  margin-bottom: 5rem;
}

.survey_listBox{
  margin-top: 0;
}

.survey_listBox ul li {
  display: block;
  padding-top: 0;
  padding-left: 2rem;
  list-style: disc;
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-weight: 700;
}

#results .bg_sp .book{
  padding-top: 3rem;
  margin: 0 auto;
  width: 50%;
}

#results .commenttext {
  margin-top: 2.3rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
}

}

/* スライダーここから */
@media only screen and (min-width: 1024px) {
.slider{
  width: 100%;
  margin: 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

#results .graduate {
  width: 1100px;
  padding: 0.5em 7em 0 7em;
  margin: 10px auto 0 auto;
  background: #ffc89d;
  border-bottom: solid 6px #ec9f64;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  }

#results .graduate .text{
color: #000000;
font-size: 2rem;
font-weight: 700;
text-align: left;
padding: 2rem 0 0 2rem;
}


#results .box {
  width: 350px;
  background-color: #ffffff;
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  box-sizing: border-box;
  border-radius: 20px;
  
}

  #results .a{
  text-align: center;
  color:inherit;
  text-decoration: none;
  }
  
  #results .box .figure {
    margin: 0 auto;
    text-align: center;
    width: 300px;
  }
  

}


/* スライダーここまで */

/* results for PC end*/




/* results for Tab */

@media only screen and (max-width: 1023px) and (min-width: 768px) {

  #results .test{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
  }
    
  #results .bg_clr {
      background-color: #1f83c7 ;
      width: 70%;
      border-radius: 70px;
      margin-top: 3rem; 
      float:  left;
  }
    
  #results .bg_clr .noneexp {
    padding: 1.5rem 0 1.5rem 0;
    text-align: center;
    font-size: 2rem;
    color: #fff;
    line-height: 3rem;
    font-weight: 700;
  }
    
  #results .noneexp_img{
      width: 100px;
      padding: 0;
  }

  #results{
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  #results .bg_sp .ttlArea {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-right: 40px;
  }
  
  #results .bg_sp .ttlArea .ico {
    display: inline-block;
    width: 100px;
    /* margin-bottom: 20px; */
  }
  
 #results .bg_sp .ttlArea .title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 4rem;
    text-align: left;
  }

  #results .bg_sp .ttlArea .subtitle {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
  }

  #results .bg_sp .survey_question {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
    text-align: center;
  }

  #results .bg_sp .survey_data01 {
    display: block;
    width: 40%;
    margin: 0 auto;
  }

  #results .bg_sp .survey_data02 {
    display: block;
    width: 70%;
    margin: 0 auto;
  }

  .survey_box{
    position: relative;
  }

  .survey_data_text {
    position: absolute;
    top: 15px;
    right: 18%;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 2rem;
    text-align: center;
  }

  .survey_data_text02 {
    position: absolute;
    top: 70px;
    right: 17%;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 900;
    line-height: 2.2rem;
  }

  #results .commenttext {
    margin-top: 2.3rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.4rem;
  }

}

@media only screen and (max-width: 1023px) {

.slider{
  width: 100%;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  }

#results .graduate {
  text-align: center;
  padding: 2rem 2rem 2rem 2rem;
  width: 650px;
  background: #ffc89d;
  border-bottom: solid 6px #ec9f64;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  overflow: hidden;
  margin: 0 auto;
  }

#results .graduate .text{
color: #000000;
font-size: 2rem;
font-weight: 700;
line-height: 3rem;
text-align: center;
padding: 2rem 0 0 0;
}

#results .boxLp {
  margin-top: 3rem;
}


#results .box {
  width: 320px;
  background-color: #ffffff;
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  box-sizing: border-box;
  border-radius: 20px;
  
}

#results .boxLp a{
text-align: center;
color:inherit;
text-decoration: none;
}

#results .box dl dt {
  padding-top: 5%;
  font-size: small;
  text-align: left;
  font-weight: 700;
  color: #000000;
}

#results .box dl dd {
  margin-top: 1rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
  color: #000000;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#results .commenttext {
  margin-top: 2.3rem;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
}


}

@media only screen and (min-width: 768px) {

#results .boxLp .box figure {
  margin: 0 auto;
  text-align: center;
  width: 200px;
}

#results .bg_sp .book{
  padding-top: 3rem;
  margin: 0 auto;
  width: 50%;
}

}

/* results for Tab end*/







/* results for SP*/

@media only screen and (max-width: 767px) {

  #results .test{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-bottom: 3rem;
    margin-left: 10%;
    margin-right: 10%;
  }

  #results .bg_clr {
    background-color: #1f83c7 ;
    width: 190%;
    border-radius: 70px;
    margin-top: 3rem; 
    float:  left;
}

  #results .bg_clr .noneexp {
    padding: 0.9rem 0 0.9rem 0;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    line-height: 1.5rem;
    font-weight: 700;
  }  

  #results .noneexp_img{
    width: 150px;
    margin: 0;
} 

  #results{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  #results .bg_sp .ttlArea {
    /* padding-top: 20px; */
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
  
  #results .bg_sp .ttlArea .ico {
    /* display: none; */
    width: 50px;
  }
  
  #results .bg_sp .ttlArea .title {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 2.8rem;
    text-align: left;
    margin-left: 15px;
  }

  #results .bg_sp .ttlArea .subtitle {
    font-size: 1rem;
    font-weight: 900;
  }

  #results .bg_sp .survey_question {
    font-size: 1.4rem;
    line-height: 2.1rem;
    font-weight: 700;
    text-align: center;
  }
  
  #results .bg_sp .survey_data01 {
    display: block;
    width: 60%;
    margin: 0 auto;
  }
  
  #results .bg_sp .survey_text {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1rem;
  }

  #results .bg_sp .qestionArea .survey_question02{
    display: inline-block;
    width: 90px;
  }
  #results .bg_sp .survey_data02 {
    display: block;
    width: 95%;
    margin: 0 auto;
  }

  .survey_box{
    position: relative;
  }

  .survey_data_text {
    position: absolute;
    top: 5%;
    right: 5%;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3rem;
    text-align: center;
    transform: translate(-14%,-14%)
  }

  .survey_data_text02 {
    position: absolute;
    top: 25%;
    right: 1%;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.3rem;
    transform: translate(-11%,-10%)
  }

  .survey_list {
    padding: 1rem 1rem;
    border-radius: 25px;
    background-color: #FFFDDB;
    box-shadow: 15px 15px 0px 0 #FFCA65;
    width: 90%;
    margin:  0 auto;
    margin-top: 2rem;
    margin-bottom: 5rem;
  }
  
  .survey_listBox{
    margin-top: 0;
  }
  
  .survey_listBox ul li {
    display: block;
    padding-top: 0;
    padding-left: 2rem;
    list-style: disc;
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 700;
  }

  .survey_list_txt{
    font-size: 1.8rem;
    line-height: 2rem;
    font-weight: 700;
    color: #FF7A00;
    text-align: center;
  }

  #results .commenttext {
    margin-top: 2.3rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2.1rem;
    padding-left: 20px;
    padding-right: 20px;
  }

  #results .bg_sp .book{
    padding-top: 3rem;
    margin: 0 auto;
    width: 50%;
  }

}

@media only screen and (max-width: 500px) {

.slider{
  width: 100%;
  /* margin: 0 auto; */
  padding-top: 2rem;
  padding-bottom: 2rem;
  }

#results .graduate {
  text-align: center;
  padding: 2rem 2rem 2rem 2rem;
  width: 270px;
  background: #ffc89d;
  border-bottom: solid 6px #ec9f64;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  }

#results .graduate .text{
color: #000000;
font-size: 2rem;
font-weight: 700;
line-height: 3rem;
text-align: center;
padding: 2rem 0 0 0;
}

#results .box {
  width: 270px;
  background-color: #ffffff;
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  box-sizing: border-box;
  border-radius: 20px;
  
}

#results .boxLp a{
text-align: center;
color:inherit;
text-decoration: none;
}

#results .figure {
  margin: 0 auto;
  text-align: center;
  width: 200px;
}

#results .box dl {
  position: relative;
}

#results .box dl dt {
  padding-top: 5%;
  font-size: small;
  text-align: left;
  font-weight: 700;
  color: #000000;
}

#results .box dl dd {
  margin-top: 1rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
  color: #000000;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#results .commenttext {
  margin-top: 2.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4rem;
}

#results .bg_sp .book{
  padding-top: 3rem;
  margin: 0 auto;
  width: 100%;
}

}

/* results for SP end*/


/* section results end*/






















.navi{
  text-align: center;
}

section {
  padding: 2.5rem 0;
}

section .title {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 900;
  text-align: center;
}


#career {
  background-color: #d75861;
}

#career .title {
  color: #fff;
}

#career .txtArea {
  margin-top: 3rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 2.5rem;
  font-weight: 500;
  text-align: center;
}

#career .txtArea p strong {
  font-size: 2rem;
  color: #ffe683;
  font-weight: 700;
}

#idea {
  background: url("../images/arr-down.png") no-repeat center top;
  -webkit-background-size: 100px auto;
  background-size: 100px auto;
}

#idea .title {
  margin-top: 3.5rem;
}

#idea .boxIdea {
  margin-top: 3rem;
}

#idea .boxIdea .boxImg {
  text-align: center;
}

#idea .boxIdea .boxTxt {
  margin-top: 2rem;
}

#idea .boxIdea .boxTxt .subtitle {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
}

#idea .boxIdea .boxTxt .txt {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 500;
}

#idea .boxIdea .boxTxt .txt p + p {
  margin-top: 2rem;
}


#feature{
  padding: 0;
}

#feature .introduction{
  font-size: 2rem;
  font-weight: 700;
  line-height: 3rem;
  padding-bottom: 2rem;
  text-align: center;
}

#feature .title {
  margin-bottom: 3rem;
}

#feature .title .border{
border-bottom: 6px #FF3B53 solid;
}

#feature .bxPoint {
  background-color: #fff;
  box-shadow: 2px 5px 5px 0 #ddd;
}

#feature .bxPoint + .bxPoint {
  margin-top: 2.2rem;
}

#feature .bxPoint .txtArea {
  padding: 2rem 2rem 2.5rem 2rem;
}

#feature .bxPoint .txtArea .subtitle {
  font-size: 1.8rem;
  line-height: 2.5rem;
  font-weight: 700;
}

#feature .bxPoint .txtArea .subtitle .font-color{
  color: #f0334f;
}

#feature .bxPoint .txtArea .txt {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 400;
}

#feature .bxPoint .txtArea .txt .bold{
  display: inline;
  background-position: left -100% center;
  padding-bottom: 0.8em;
  font-weight: bold;
  background-size: 200% 0.5em;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, 
  rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
  transition: background-position 1.5s ease 0.1s;
}


#feature .bxPoint .txtArea .kouzaImg {
  margin-top: 1.5rem;
  display: flex;
}

#feature .bxPoint .txtArea .kouzaImg li + li {
  margin-left: 1rem;
}

#feature .bxPoint .txtArea .kouzaImg li {
  width: 150px;
}

#feature .bxPoint .no {
  height: 100px;
  position: relative;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature .bxPoint .no .ico {
  position: absolute;
  top: 3rem;
  left: 2rem;
  display: inline-block;
  width: 120px;
  height: 40px;
  line-height: 4.5rem;
  font-size: 2.5rem;
  color: #fff;
  font-weight: 400;
  background-color: #2fa484;
  border-radius: 20px;
  text-align: center;
  font-family: 'Hind', sans-serif;
  letter-spacing: 1px;
}

#feature .bxPoint .no .ico span {
  font-size: 4rem;
}

#feature .bxPoint .txtArea .small {
  font-size: 1.5rem;
  line-height: 2rem;
}

#feature .bxPoint .po1 {
  height: 150px;
  background: url("../images/bg-point1_sp1.jpg") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature .bxPoint .po2 {
  background: url("../images/bg-point2_sp2.jpg") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature .bxPoint .po3 {
  background: url("../images/bg-point3_sp3.jpg") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature .bxPoint .po4 {
  background: url("../images/bg-point4_sp4.png") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature .bxPoint .po5 {
  background: url("../images/bg-point5_sp5.jpg") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature .bxPoint .po6 {
  background: url("../images/bg-point6_sp6.jpg") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature .bxPoint .po7 {
  background: url("../images/bg-point7_sp7.png") no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

#feature_survey {
  background-color: #C6E7F5 ;
  text-align : center
}

#feature_survey .img{
  width: 120%;
}

#ability {
  background-color: #ffffff ;
  font-weight: 900;
  text-align : center
}

#ability .border{
  border-bottom: 6px #FF3B53 solid;
  }

/* #ability .switch{
  width: 300px;
  padding-top: 5rem;
} */

#lopreq {
  background: #f5c79e url("../images/bg-lopreq_sp.jpg") no-repeat center top;
  -webkit-background-size: contain;
  background-size: contain;
}



#lopreq .exp {
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 700;
}

#lopreq .title {
  margin-top: 4rem;
}

#lopreq .boxLp {
  margin-top: 3rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#lopreq .boxLp .box {
  margin-bottom: 2rem;
  width: 46%;
  background: rgba(255,255,255,.7);
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  box-sizing: border-box;
}

#lopreq .boxLp .box figure {
  text-align: center;
}

#lopreq .boxLp .box dl {
  position: relative;
  top: -1rem;
}

#lopreq .boxLp .box dl dt {
  text-align: center;
  font-size: 2.6rem;
  font-family: 'Hind', sans-serif;
  font-weight: 700;
  text-shadow: 2px 2px 0 #fff;
}

#lopreq .boxLp .box dl dt .jp {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  text-shadow: none;
}

#lopreq .boxLp .box dl dd {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 500;
  text-align: center;
}

#lopreq .add {
  margin-top: 1rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 500;
}











#course2 {
  background: #f7b1ab url("../images/bg-kouza_sp.jpg") no-repeat center top;
  -webkit-background-size: contain;
  background-size: contain;
}

#course2 .bxCourse .imgPhoto {
  text-align: center;
}

#course2 .bxCourse .txtArea {
  margin-top: 2.2rem;
}

#course2 .bxCourse .txtArea .mark {
  display: inline-block;
  font-size: 1.4rem;
  color: #fff;
  background-color: #e58100;
  padding: 0.5rem 1rem;
}

#course2 .bxCourse .txtArea .subtitle {
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
}

#course2 .bxCourse .txtArea .subtitle span {
  margin-top: 1rem;
  display: block;
  font-size: 2rem;
}

#course2 .bxCourse .txtArea .cinfo {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#course2 .bxCourse .txtArea .pArea {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

#course2 .bxCourse .txtArea .pArea .icon {
  display: table;
  width: 75px;
  height: 75px;
  text-align: center;
  background-color: #ba3841;
  color: #fff;
  border-radius: 40px;
}

#course2 .bxCourse .txtArea .pArea .icon p {
  display: table-cell;
  vertical-align: middle;
  font-size: 1.5rem;
  font-weight: 500;
}

#course2 .bxCourse .txtArea .pArea .price {
  width: calc(100% - 95px);
  padding-top: 2.2rem;
}

#course2 .bxCourse .txtArea .pArea .price .fee {
  font-size: 3rem;
  font-weight: 900;
}

#course2 .bxCourse .txtArea .pArea .price .fee .tax {
  font-size: 1.5rem;
  font-weight: 700;
}

#course .bxCourse .txtArea .pArea .price .revenue {
  color:#f0334f;
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: 700;
line-height: 2.4rem;
}

#course2 .bxCourse .txtArea .pArea .price .caution {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 500;
}

#course2 .bxCourse .txtArea .pArea .price dl {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 400;
}

#correction .pc { display: block !important; }
#correction .sp { display: none !important; }

#correction .comment {
  margin-top: 2.3rem;
  text-align: center;
  font-size: 5rem;
  font-weight: 900;
  line-height: 2.4rem;
}

#correction .commenttext {
  margin-top: 2.3rem;
  margin-left: 100px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.5rem;
  color: #2a231d;
  padding: 0rem 2rem;
}

#correction .flex {
  display: flex;
  align-items: center;
  margin-top: 5rem;
}

#correction .color{
  color: #f44e59;
}

#correction .bold{
  display: inline;
  background-position: left -100% center;
  padding-bottom: 0.8em;
  font-weight: bold;
  background-size: 200% 0.5em;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, 
  rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
  transition: background-position 1.5s ease 0.1s;
}

/* for Tab */
@media only screen and (min-width: 767px){
  #correction .comment {
    margin-top: 2.3rem;
    text-align: center;
    font-size: 5rem;
    font-weight: 900;
    line-height: 2.4rem;
  }
  
  #correction .commenttext {
    margin-left: 100px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2.4rem;
    color: #2a231d;
  }
  
  #correction .flex {
    display: flex;
    align-items: center;
  }
  
  #correction .color{
    color: #f44e59;
  }
  
  #correction .bold{
    display: inline;
    background-position: left -100% center;
    padding-bottom: 0.8em;
    font-weight: bold;
    background-size: 200% 0.5em;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, 
    rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
    transition: background-position 1.5s ease 0.1s;
  }
  }

  @media only screen and (max-width: 767px){
    #correction .pc { display: none !important; }
    #correction .sp { display: block !important; }
    #correction .sp02 { display: none !important; }

    #correction .comment {
      margin-top: 2.3rem;
      text-align: center;
      font-size: 4rem;
      font-weight: 900;
      line-height: 2.4rem;
    }
    
    #correction .commenttext {
      margin-left: 0px;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 2.3rem;
      color: #2a231d;
    }
    
    #correction .flex {
      margin-top: 0;
      flex-flow: column;
      align-items: center;
    }
    
    #correction .color{
      color: #f44e59;
    }
    
    #correction .bold{
      display: inline;
      background-position: left -100% center;
      padding-bottom: 0.8em;
      font-weight: bold;
      background-size: 200% 0.5em;
      background-repeat: repeat-x;
      background-image: linear-gradient(to right, 
      rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
      transition: background-position 1.5s ease 0.1s;
    }
  }

.sidenote p{
font-size: 1.2rem;
}

#voice{
    padding-left: 20px;
    padding-right: 20px;
}

#voice h3 {
    font-size: 2.8rem;
}

@media only screen and (max-width: 767px){
#voice h3 {
    font-size: 1.8rem;
}

#course{
    padding-left: 20px;
    padding-right: 20px;
}

#message{
    padding-left: 20px;
    padding-right: 20px;
}
}

#curriculum {
  margin: 4rem auto 0 auto;
  padding: 3rem 2rem;
  background-color: #fff;
  box-sizing: border-box;
  color: #666;
}

#curriculum .subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 700;
  text-align: center;
}

p.renewal_txt{
  color: #FF3B53;
  margin: 2rem 0 0 0;
  text-align: center;
	font-size: 2rem;
  font-weight: 700;
line-height: 2.4rem;
	}

p.video{
  margin: 2rem 0 2rem 0;
  text-align: center;
	font-size: 1.7rem;
  font-weight: 500;
    line-height: 2.4rem;
	}

.orientation{
    width: "560px";
    height: "315px";
}
  
.orientation iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

#curriculum dl {
  margin-top: 2rem;
}

#curriculum dl dt {
  font-size: 1.2rem;
  font-weight: 500;
}

#curriculum dl dd {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7rem;
}

p.curtitle{
	font-size: 1.6rem;
  font-weight: 500;
	}

#curriculum a{
  font-size: 1.4rem;
  font-weight: 500;
  color:#f57B00
  }

#curriculum dl dd .curtitle:before {
/*  content: "● ";
*/}

#curriculum dl dd .curtxt p:before {
  content: "・";
}

#curriculum dl dd .curtxt {
  margin-top: 0.5rem;
}

#voice {
  background-color: #f9f9f9;
}

#voice .title {
  margin-bottom: 3rem;
}

#voice .title .border{
  border-bottom: 6px #FF3B53 solid;
  }

#voice .vOuter {
  margin-bottom: 2.5rem;
}

#voice .bxVoice {
  padding: 2rem;
  box-shadow: 2px 2px 3px 0 #ddd;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


#voice .bxVoice + .bxVoice {
  margin-top: 1.5rem;
}

#voice .bxVoice .txtArea {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#voice .bxVoice .txtArea .rd {
  font-weight: 700;
}

#voice .bxVoice .name {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: right;
}

#voice .boxVoice + .boxVoice {
  margin-top: 3rem;
}

#voice .boxVoice .ttlArea {
  color: #2f6dd3;
}

#voice .boxVoice .ttlArea_02 {
  color: #2f6dd3;
}

#voice .boxVoice .ttlArea .no {
  font-family: 'Hind', sans-serif;
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 3rem;
}

#voice .boxVoice .ttlArea_02 .no_02 {
  padding-left: 1rem;
  font-family: 'Hind', sans-serif;
  font-size: 4rem;
  font-weight: 600;
}

#voice .boxVoice .ttlArea_02 {
  display: flex;
  flex-flow: row nowrap;
  padding-bottom: 0.1rem;
}

#voice .boxVoice .ttlArea .no span {
  font-size: 4.9rem;
}

#voice .boxVoice .ttlArea .subtitle {
  margin-top: -0.7rem;
  padding-bottom: 0.5rem;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700;
  border-bottom: 2px #2f6dd3 solid;
}

#voice .boxVoice .imgPhoto {
  margin: 2rem auto 0 auto;
  max-width: 360px;
}

#voice .boxVoice .txt {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#voice .boxVoice .name {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: right;
}

#promise {
  padding-bottom: 2rem;
  background: #f0f2f1 url("../images/bg-promise_sp.jpg") no-repeat left bottom;
  -webkit-background-size: 360px auto;
  background-size: 360px auto;
}

#promise .ttlArea {
  position: relative;
}

#promise .ttlArea .title {
  padding-bottom: 0.3rem;
  font-size: 1.8rem;
  border-bottom: 2px #2a231d solid;
  text-align: center;
}

@media only screen and (min-width: 767px){
#promise .ttlArea .ico {
    position: absolute;
    top: -7rem;
    left: -7rem;
    width: 260px;
    height: 174px;
    transform: rotate( -27deg );
}
}
@media only screen and (max-width: 767px){
#promise .ttlArea .ico {
position: absolute;
    top: -4rem;
    left: -2rem;
    width: 110px;
    height: 75px;
    transform: rotate( -27deg );
}
}

#promise .txt {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 500;
}

#promise .txt p + p {
  margin-top: 2rem;
}

#promise .txt .last {
  margin-left: 45%;
}

#faq {
  background-color: #f7f7f7;
}

#faq .wrapper{
  width: 90%;
}

#faq .boxFaq {
  margin-top: 3rem;
}

#faq .boxFaq dl dd +dt {
  margin-top: 2.5rem;
}

#faq .boxFaq dl dt {
  padding: 0 0 1rem 3.5rem;
  background: url("../images/ico-q.png") no-repeat left 3px;
  -webkit-background-size: 25px auto;
  background-size: 25px auto;
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-weight: 500;
}

#faq .boxFaq dl dd {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

/* アコーディオン */

.toggle {
	display: none;
}
.Label {		/*タイトル*/
	padding: 1.2rem;
	display: block;
	color: #fff;
  font-size: medium;
  font-weight: 700;
  line-height: 1.8rem;
	background:#05a582;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 7px;
	height: 7px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
  font-size: medium;
  line-height: 2rem;
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

/* アコーディオン */



#message {
  background: #d1ded8 url("../images/bg-reason_sp.jpg") no-repeat center top;
  -webkit-background-size: 900px auto;
  background-size: 900px auto;
}

#message .imgPhoto {
  margin: 3rem auto 0 auto;
  width: 220px;
}

@media only screen and (min-width: 767px) {

  #message .imgPhoto {
    margin: 3rem auto 0 auto;
    width: 500px;
  }


#message .imgPhoto figure img {
  display: block;
  margin: 0 auto;
  width: 130px;
  height: auto;
    float: left;
    /* padding-bottom: 118px; */
    padding-right: 20px;
}
}
@media only screen and (max-width: 767px) {
#message .imgPhoto figure img {
  display: block;
  margin: 0 auto;
  width: 130px;
  height: auto;
}
}

#message .imgPhoto figure figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#message .txtArea {
  margin: 3rem auto 0 auto;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#message .txtArea p + p {
  margin-top: 2rem;
}

#message .txtArea p strong {
  color: #008864;
  font-weight: 700;
}

#contact {
  background: url("../images/bg-contact_sp.jpg") no-repeat right top;
  -webkit-background-size: cover;
  background-size: cover;
}

#contact .title {
  margin-bottom: 3rem;
  font-weight: 700 !important;
}

#contact .mform {
  padding: 3rem  ;
  background-color: #fff;
  box-sizing: border-box;
}

#contact .mform .txt {
  font-size: 1.4rem;
  line-height: 2rem;
}

#contact .mform .txt a {
  color: #ff8b03;
  text-decoration: none;
}

#contact .mform .txt a:hover {
  text-decoration: underline;
}

#contact .mform .small {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.8rem;
  color: #666;
}

#contact .mform .mailform {
  margin-top: 2rem;
}

#contact .caution {
    margin-top: 1.5rem;
    font-size: 1.4rem;
}

@media only screen and (min-width: 1024px) {
  section {
    padding: 4rem 0;
  }

  section .title {
    font-size: 3.6rem;
    line-height: 5rem;
  }
  
  #rec .title {
    font-size: 3rem;
  }

  #rec .box {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    padding: 3.5rem 1.5rem 3rem 1.5rem;
    border: 5px #e4e4e4 solid;
    border-radius: 25px;
    background-color: #fff;
  }

  #rec .box .subtitle {
    margin-bottom: 2.5rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 5rem;
  }

  #rec .box .nonexp {
    text-align: right;
    padding-right: 2rem;
    border-radius: 25px 0 0 25px;
  }

  #rec .box .exp {
    text-align: center;
    border-radius: 0 30px 30px 0;
  }

  #rec .box .listBox + .listBox {
    margin-top: 0;
  }

  #rec .box ul li + li {
    margin-top: 1.5rem;
  }
  
  #rec .box .listBox.lft ul {
    margin-right: 2rem;
  }
  
  #rec .box .listBox.lft ul li {
    text-align: right;
  }
  
  #rec .box .listBox.rt ul {
    margin-left: 2rem;
  }
  
  #rec .box .listBox.rt ul li {
    text-align: left;
  }

  #career .txtArea {
    margin-top: 4rem;
    font-size: 2.1rem;
    line-height: 4rem;
  }

  #career .txtArea p strong {
    font-size: 2.8rem;
  }

  /* #skills {
    padding: 0;
    background: #f6f3eb url("../images/bg-skill_pc.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  } */

  #skills .bg_sp {
    height: 100%;
    width: 100%;
    background: #ffffff;
  }

  #skills .bg_sp .ico  {
    position: absolute;
    top: -4rem;
    left: -2rem;
  }

  /* #skills .bg_sp .title {
    padding-bottom: 0.5rem;
    font-size: 1.8rem;
    border-bottom: 2px #2a231d solid;
    text-align: center;
  } */

  #skills .ttlArea .ico {
    position: absolute;
    top: -4rem;
    left: -2rem;
    width: 110px;
    height: 75px;
    transform: rotate( -27deg );
  }

  #skills .bxTop {
    margin-top: 4rem;
  }

  #skills .boxSkl + .boxSkl {
    margin-top: 3.5rem;
  }

  #skills .boxSkl .no {
    padding-top: 3rem;
    width: 80px;
    font-size: 4rem;
  }

  #skills .boxSkl .txtArea {
    padding: 2.5rem 4rem 4rem 2.5rem;
    width: calc(100% - 80px);
  }

  #skills .boxSkl .txtArea .subtitle {
    margin-bottom: 2rem;
    font-size: 2.2rem;
    line-height: 3rem;
  }

  #skills .boxSkl .txtArea .txt {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  
  #skills .boxSkl .txtArea .txt p + p {
    margin-top: 2rem;
  }
  
  #idea {
    background: url("../images/arr-down.png") no-repeat center top;
    -webkit-background-size: 200px auto;
    background-size: 200px auto;
    padding: 50px;
  }

  #idea .title {
    margin-top: 4rem;
  }

  #idea .boxIdea {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    flex-flow: row-reverse;
  }

  #idea .boxIdea .boxImg {
    text-align: center;
    width: 410px;
  }

  #idea .boxIdea .boxTxt {
    width: 580px;
    margin-top: 0;
  }

  #idea .boxIdea .boxTxt .subtitle {
    font-size: 2.4rem;
    line-height: 4rem;
  }

  #idea .boxIdea .boxTxt .txt {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 2.4rem;
  }

  #idea .boxIdea .boxTxt .txt p + p {
    margin-top: 2rem;
  }

  #lopreq {
    background: #f5c79e url("../images/bg-lopreq_pc.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #lopreq .exp {
    font-size: 2.2rem;
    line-height: 4rem;
  }

  #lopreq .title {
    margin-top: 4.5rem;
  }

  #lopreq .boxLp {
    margin-top: 3.5rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  #lopreq .boxLp .box {
    margin-bottom: 0;
    width: 23.5%;
    padding: 2rem 2rem 2rem 2rem;
  }

  #lopreq .boxLp .box figure {
    text-align: center;
  }

  #lopreq .boxLp .box dl {
    position: relative;
    top: -2rem;
  }

  #lopreq .boxLp .box dl dt {
    font-size: 4rem;
    text-shadow: 2px 2px 0 #fff;
  }

  #lopreq .boxLp .box dl dt .jp {
    margin-top: 1rem;
    font-family: 'Noto Sans Japanese', sans-serif;
    font-size: 1.8rem;
    text-shadow: none;
  }

  #lopreq .boxLp .box dl dd {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
    text-align: center;
  }

  #lopreq .add {
    margin-top: 4.5rem;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2.7rem;
  }
  
  .btnArea {
     margin-top: 4rem;   
  }
  
  .btnArea ul {
    display: flex;
    justify-content: center;
  }
  
  .btnArea ul li + li {
    margin: 0 0 0 4rem;
  }
  
  .btnArea ul li {
    width: 400px;
  }
  
  .btn {
    overflow: hidden;
    height: 7rem;
  }

  .btn a {
    font-size: 2rem;
    line-height: 7rem;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 2;
  }
  
  .btn a:hover {
    color: #2a231d;
  }
  
  .btn .btnAnime:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 120%;
    height: 100%;
    background: #ffa303;
    transform-origin: right top;
    transform: skewX(-30deg) scale(0, 1);
    transition: transform .5s;
  }
  .btn .btnAnime:hover:before {
    transform-origin: left top;
    transform: skewX(-30deg) scale(1, 1);
  }
  
  .btn2 a {
    color: #ffffff;
    font-size: 2rem;
    line-height: 3rem;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 2;
  }
  
  .btn2 a:hover {
    color: #2a231d;
  }
  
  .btn2 .btnAnime:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 120%;
    height: 100%;
    background: #f56b75;
    transform-origin: right top;
    transform: skewX(-30deg) scale(0, 1);
    transition: transform .5s;
  }
  .btn2 .btnAnime:hover:before {
    transform-origin: left top;
    transform: skewX(-30deg) scale(1, 1);
  }

  
  .btn3 a {
    color: #ffffff;
    font-size: 2rem;
    line-height: 3rem;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 2;
  }
  
  .btn3 a:hover {
    color: #7aa9f4;
  }
  
  .btn3 .btnAnime:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 120%;
    height: 100%;
    background: #f56b75;
    transform-origin: right top;
    transform: skewX(-30deg) scale(0, 1);
    transition: transform .5s;
  }
  .btn3 .btnAnime:hover:before {
    transform-origin: left top;
    transform: skewX(-30deg) scale(1, 1);
  }


  
  #feature .title {
    margin-bottom: 4rem;
  }
  
  #course {
    background: #f7b1ab url("../images/bg-kouza_pc.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }
  
  #course .bxCourse {
    display: flex;
    justify-content: space-between;
  }

  #course .bxCourse .imgPhoto {
    width: 363px;
    text-align: center;
  }

  #course .bxCourse .txtArea {
    width: calc(100% - 423px);
    margin-top: 0;
  }

  #course .bxCourse .txtArea .mark {
    font-size: 1.6rem;
    padding: 0.5rem 1.5rem;
  }

  #course .bxCourse .txtArea .subtitle {
    margin-top: 1.3rem;
    font-size: 2.4rem;
    font-weight: 700;
  }

  #course .bxCourse .txtArea .subtitle span {
    margin-top: 1rem;
    font-size: 3.3rem;
  }

  #course .bxCourse .txtArea .cinfo {
    margin-top: 1.5rem;
    font-size: 1.4rem;
    line-height: 2rem;
  }

  #course .bxCourse .txtArea .pArea {
    margin-top: 2rem;
  }

  #course .bxCourse .txtArea .pArea .icon {
    width: 105px;
    height: 105px;
    border-radius: 55px;
  }

  #course .bxCourse .txtArea .pArea .icon p {
    font-size: 2rem;
    font-weight: 500;
	  line-height: 1.2em;
  }

  #course .bxCourse .txtArea .pArea .price {
    width: calc(100% - 125px);
    padding-top: 3.3rem;
  }

  #course .bxCourse .txtArea .pArea .price .fee {
    font-size: 4.5rem;
    font-weight: 900;
  }

  #course .bxCourse .txtArea .pArea .price .fee .tax {
    font-size: 2rem;
    font-weight: 700;
  }

  #course .bxCourse .txtArea .pArea .price .revenue {
    color:#f0334f;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 700;
line-height: 2.4rem;
  }

  #course .bxCourse .txtArea .pArea .price .caution {
    margin-top: 1.5rem;
    font-size: 1.4rem;
  }
  .intro{
    margin-top: 0px;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 20px;
	font-weight: 500;
  }

  #course .bxCourse .txtArea .pArea .price dl {
    margin-top: -6.3rem;
	margin-bottom: 30px;
    font-size: 1.4rem;
    line-height: 2.2rem;
  }

  #course2 {
    background: #f7b1ab url("../images/bg-kouza_pc.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }
  
  #course2 .bxCourse {
    display: flex;
    justify-content: space-between;
  }

  #course2 .bxCourse .imgPhoto {
    width: 363px;
    text-align: center;
  }

  #course2 .bxCourse .txtArea {
    width: calc(100% - 423px);
    margin-top: 0;
  }

  #course2 .bxCourse .txtArea .mark {
    font-size: 1.6rem;
    padding: 0.5rem 1.5rem;
  }

  #course2 .bxCourse .txtArea .subtitle {
    margin-top: 1.3rem;
    font-size: 2.4rem;
    font-weight: 700;
  }

  #course2 .bxCourse .txtArea .subtitle span {
    margin-top: 1rem;
    font-size: 3.3rem;
  }

  #course2 .bxCourse .txtArea .cinfo {
    margin-top: 1.5rem;
    font-size: 1.4rem;
    line-height: 2rem;
  }

  #course2 .bxCourse .txtArea .pArea {
    margin-top: 2rem;
  }

  #course2 .bxCourse .txtArea .pArea .icon {
    width: 105px;
    height: 105px;
    border-radius: 55px;
  }

  #course2 .bxCourse .txtArea .pArea .icon p {
    font-size: 2rem;
    font-weight: 500;
	  line-height: 1.2em;
  }

  #course2 .bxCourse .txtArea .pArea .price {
    width: calc(100% - 125px);
    padding-top: 3.3rem;
  }

  #course2 .bxCourse .txtArea .pArea .price .fee {
    font-size: 4.5rem;
    font-weight: 900;
  }

  #course2 .bxCourse .txtArea .pArea .price .fee .tax {
    font-size: 2rem;
    font-weight: 700;
  }

  #course2 .bxCourse .txtArea .pArea .price .caution {
    margin-top: 1.5rem;
    font-size: 1.4rem;
  }

  #course2 .bxCourse .txtArea .pArea .price dl {
    margin-top: 2.3rem;
    font-size: 1.4rem;
    line-height: 2.2rem;
  }

  #correction .comment {
    margin-top: 2.3rem;
    text-align: center;
    font-size: 5rem;
    font-weight: 900;
    line-height: 2.4rem;
  }

  #correction .commenttext {
    margin-top: 2.3rem;
    margin-left: 100px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2.4rem;
    color: #2a231d;
  }

  #correction .flex {
    display: flex;
    align-items: center;
    margin-top: 5rem;
  }

  #correction .color{
    color: #f44e59;
  }

  #correction .bold{
    display: inline;
    background-position: left -100% center;
    padding-bottom: 0.8em;
    font-weight: bold;
    background-size: 200% 0.5em;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, 
    rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
    transition: background-position 1.5s ease 0.1s;
  }

  #curriculum {
    margin: 5rem auto 0 auto;
    padding: 4rem 4rem;
    width: 888px;
    background-color: #fff;
    box-sizing: border-box;
    color: #666;
  }

 #curriculum .subtitle {
    font-size: 2.2rem;
    line-height: 2.4rem;
    text-align: center;
  }

  #curriculum dl {
    margin-top: 3rem;
  }

  #curriculum dl dt {
    font-size: 1.6rem;
    font-weight: 500;
  }

  #curriculum dl dd {
    margin-top: 1rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }

  #curriculum dl dd .curtxt {
    margin-top: 1rem;
  }
  
  #voice .title {
    margin-bottom: 4rem;
  }
  
  #voice .vOuter {
    margin: 0 auto;
    width: 885px;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  #voice .bxVoice {
    margin: 0 0 3rem 0;
    padding: 3rem;
    width: 420px;
    position: relative;
  }

  #voice .bxVoice + .bxVoice {
    margin-top: 0;
  }

  #voice .bxVoice .txtArea {
    font-size: 1.5rem;
    line-height: 2.6rem;
  }

  #voice .bxVoice .name {
    margin-top: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: right;
  }

  #voice .boxVoice + .boxVoice {
    margin-top: 3rem;
  }
  
  #voice .boxVoice {
    display: flex;
  }
  
  #voice .boxVoice:nth-child(2n) {
    display: flex;
    flex-flow: row-reverse;
  }
  
  #voice .boxVoice .txt,
  #voice .boxVoice .name {
    padding-right: 2.5rem;
  }
  
  #voice .boxVoice:nth-child(2n) .txt,
  #voice .boxVoice:nth-child(2n) .name {
    padding: 0 0 0 2.5rem;
  }
  
  #voice .boxVoice .txtArea{
    width: 50%;
  }
  
  #voice .boxVoice .imgPhoto{
    width: 50%;
  }
  
  #voice .boxVoice .ttlArea {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: 2px #2f6dd3 solid;
    padding-bottom: 0.1rem;
  }

  #voice .boxVoice .ttlArea .no {
    padding-left: 1rem;
    font-family: 'Hind', sans-serif;
    font-size: 4rem;
    font-weight: 600;
  }

  #voice .boxVoice .txtArea_02{
    width: 50%;
  }
  
  #voice .boxVoice .imgPhoto_02{
    width: 80%;
    padding-top: 10rem;
    padding-left: 3rem;
  }

  
  #voice .boxVoice .ttlArea_02 {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: 2px #2f6dd3 solid;
    padding-bottom: 0.1rem;
  }

  #voice .boxVoice .ttlArea_02 .no_02 {
    padding-left: 1rem;
    font-family: 'Hind', sans-serif;
    font-size: 4rem;
    font-weight: 600;
  }

  #voice .boxVoice .ttlArea .no span {
    font-size: 6rem;
  }

  #voice .boxVoice .ttlArea .subtitle {
    display: flex;
    align-items: center;
    margin-top: -0.7rem;
    padding: 0 0 0 2rem;
    font-size: 2.2rem;
    line-height: 2.5rem;
    font-weight: 700;
    border-bottom: none;
  }

  #voice .boxVoice .imgPhoto {
    margin-top: 0;
    max-width: 100%;
	  width: 45%;
  }

  #voice .boxVoice .txt {
    margin-top: 2.5rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }

  #voice .boxVoice .txt_02 {
    margin-left: 2.5rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
    width: 50%;

  }

  #voice .note{
    display: inline;
    text-align: left;
  }

  #voice .note_title{
    display: inline;
    text-align: left;
    font-weight: bold;
  }

  #voice .bold {
    display: inline;
    background-position: left -100% center;
    padding-bottom: 0.8em;
    font-weight: bold;
    background-size: 200% 0.5em;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
    transition: background-position 1.5s ease 0.1s;
  }

  #voice .note-list{
    /* padding: 0 0 0 10%; */
    font-size: 15px;
    font-weight: 600;
    line-height: 3rem;
    text-align: left;
    text-decoration: none;
  }

  #voice a{
    color: #f57B00;
  }

  #voice .boxVoice .note2{
    display: inline;
    font-size: 10px;
    font-weight: 600;
  }

  #voice .boxVoice .name {
    margin-top: 2rem;
    font-size: 1.4rem;
    text-align: left;
  }
  
  #promise {
    padding-bottom: 8rem;
/*  background: #f0f2f1 url("../images/bg-promise_pc.jpg") no-repeat center top;*/
    -webkit-background-size: cover;
    background-size: cover;
  }
  
  #promise .ttlArea {
    margin: 0 auto;
    width: 800px;
  }
  
  #promise .ttlArea .title {
    padding-bottom: 0.5rem;
    font-size: 3.6rem;
    text-align: center;
  }

  #promise .txt {
    margin: 4rem auto 0 auto;
    width: 800px;
    font-size: 1.6rem;
    line-height: 2.7rem;
  }

  #promise .txt p + p {
    margin-top: 2rem;
  }

  #faq .boxFaq {
    margin: 4rem auto 0 auto;
    width: 800px;
  }

  #faq .boxFaq dl dd + dt {
    margin-top: 4rem;
  }

  #faq .boxFaq dl dt {
    padding: 0 0 1rem 4rem;
    background: url("../images/ico-q.png") no-repeat left 0;
    -webkit-background-size: 30px auto;
    background-size: 30px auto;
    font-size: 1.8rem;
    line-height: 2.8rem;
  }

  #faq .boxFaq dl dd {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }

  #message {
    background: #D1DED8 url("../images/bg-reason_pc.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #message .imgPhoto {
    position: relative;
    margin: 0 116px 0 auto;
    width: 835px;
  }

  #message .imgPhoto figure img {
    display: block;
    margin: 0 0 0 auto;
    width: 300px;
    height: auto;
  }

  #message .imgPhoto figure figcaption {
    margin-top: 1rem;
    text-align: left;
    font-size: 1.8rem;
    line-height: 2rem;
	margin-bottom:15px;
  }

  #message .txtArea {
    margin: 4rem auto 0 auto;
    width: 800px;
    font-size: 1.6rem;
    line-height: 2.7rem;
  }

  #message .txtArea p + p {
    margin-top: 2rem;
  }

  #contact {
    background: url("../images/bg-contact_pc.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #contact .title {
    margin-bottom: 4rem;
    font-weight: 500 !important;
  }
  #contact .mform {
    margin: 0 auto;
    padding: 7rem 5rem;
    width: 800px;
  }
  
  #contact .mform .inner {
    margin: 0 auto;
    width: 450px;
  }
  
  #contact .mform .txt {
    font-size: 1.6rem;
    line-height: 2rem;
  }
  
  #contact .mform .small {
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 2rem;
  }

  #contact .mform .mailform {
    margin-top: 4rem;
  }

  #contact .caution {
    margin-top: 3rem;
    font-size: 1.4rem;
    line-height: 2rem;
  }

}

@media only screen and (min-width: 768px) {
  #feature .bxPoint {
    display: flex;
    flex-flow: row nowrap;
  }

  #feature .bxPoint + .bxPoint {
    margin-top: 3rem;
  }

  #feature .bxPoint .txtArea {
    width: calc(100% - 200px);
    padding: 3rem 3rem 4rem 3rem;
  }

  #feature .bxPoint .txtArea .subtitle {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }

  #feature .bxPoint .txtArea .txt {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 2.6rem;
  }

  #feature .bxPoint .txtArea .kouzaImg {
    margin-top: 2rem;
  }

  #feature .bxPoint .txtArea .kouzaImg li + li {
    margin-left: 2rem;
  }

  #feature .bxPoint .txtArea .kouzaImg li {
    width: 150px;
  }

  #feature .bxPoint .no {
    width: 200px;
    height: auto;
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #feature .bxPoint .no .ico {
    position: absolute;
    margin: 0 auto;
    top: 2rem;
    left: 0;
    right: 0;
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 5.7rem;
    font-size: 3rem;
    border-radius: 25px;
  }

  #feature .bxPoint .no .ico span {
    font-size: 4.5rem;
  }

  #feature .bxPoint .txtArea .small {
    font-size: 1.8rem;
  }

  #feature .bxPoint .po1 {
    height: auto;
    background: url("../images/bg-point1_pc1.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #feature .bxPoint .po2 {
    background: url("../images/bg-point2_pc2.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #feature .bxPoint .po3 {
    background: url("../images/bg-point3_pc3.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #feature .bxPoint .po4 {
    background: url("../images/bg-point4_pc4.png") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #feature .bxPoint .po5 {
    background: url("../images/bg-point5_pc5.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #feature .bxPoint .po6 {
    background: url("../images/bg-point6_pc6.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }

  #feature .bxPoint .po7 {
    background: url("../images/bg-point7_pc7.png") no-repeat center top;
    -webkit-background-size: cover;
    background-size: cover;
  }
  
  #promise {
    padding-bottom: 8rem;
/*  background: #f0f2f1 url("../images/bg-promise_pc.jpg") no-repeat center top;*/  
    -webkit-background-size: cover;
    background-size: cover;
  }
  
  #promise .txt .last {
    margin-left: 0;
  }
  
}


#greeting {
  padding: 4rem 2rem;
  background-color: #4cab92;
  color: #fff;
}

#greeting .ftitle {
  text-align: center;
  font-size: 1.8rem;
  line-height: 2.5rem;
  font-weight: 700;
}

#greeting .txt {
  margin-top: 3rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  text-align: center;
}



@media only screen and (min-width: 1024px) {
  #greeting {
    padding: 8rem 0;
  }

  #greeting .ftitle {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  #greeting .txt {
    margin-top: 4rem;
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}

html {height:100%;}

.thanks {
  position: relative;
  display: block;
  height: 100%;
  background: url("../images/bg-contact_sp.jpg") no-repeat right top;
  -webkit-background-size: cover;
  background-size: cover;
}

.thanks .main-container {
  width: 100%;
  height: 100%;
}

.thanks #contact {
  vertical-align: middle;
  background: none;
}

.thanks .footer-container {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.marker-animation span{
    display: inline;
    background-position: left -100% center;
    padding-bottom: 0.6em;
    font-weight: bold;
    background-size: 200% 0.6em;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
    transition: background-position 1.5s ease 0.1s;
}

ul.currImg {
    margin-top: 2rem;
  }

  #curriculum .kouzaImg li + li {
    margin-left: 2rem;
  }

  #curriculum .kouzaImg li {
    width: 150px;
	border: 1px #949494 solid;
  }

#instructor {
  background-color: #f9f9f9;
}

#instructor .title {
  margin-bottom: 3rem;
}

#instructor .vOuter {
  margin-bottom: 2.5rem;
}

#instructor .bxVoice {
  padding: 2rem;
  box-shadow: 2px 2px 3px 0 #ddd;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#instructor .bxVoice + .bxVoice {
  margin-top: 1.5rem;
}

#instructor .bxVoice .txtArea {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#instructor .bxVoice .txtArea .rd {
  font-weight: 700;
}

#instructor .bxVoice .name {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: right;
}

#instructor .boxVoice + .boxVoice {
  margin-top: 3rem;
}

#instructor .boxVoice .ttlArea {
  color: #2f6dd3;
}


#instructor .boxVoice .ttlArea .no {
  font-family: 'Hind', sans-serif;
  font-size: 2.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}

#instructor .boxVoice .ttlArea .no span {
  font-size: 4.9rem;
}

#instructor .boxVoice .ttlArea .subtitle {
  margin-top: -0.7rem;
  padding-bottom: 0.5rem;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700;
  border-bottom: 2px #2f6dd3 solid;
}

#instructor .boxVoice .imgPhoto {
  margin: 2rem auto 0 auto;
  max-width: 360px;
}

#instructor .boxVoice .txt {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#instructor .boxVoice .name {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}
@media only screen and (min-width: 1024px) {
  #instructor .title {
    margin-bottom: 4rem;
  }
  
  #instructor .vOuter {
    margin: 0 auto;
    width: 885px;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  #instructor .bxVoice {
    margin: 0 0 3rem 0;
    padding: 3rem;
    width: 420px;
    position: relative;
  }
  
  #instructor .bxVoice + .bxVoice {
    margin-top: 0;
  }

  #instructor .bxVoice .txtArea {
    font-size: 1.5rem;
    line-height: 2.6rem;
  }

  #instructor .bxVoice .name {
    margin-top: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: right;
  }

  #instructor .boxVoice + .boxVoice {
    margin-top: 3rem;
  }
  
  #instructor .boxVoice {
    display: flex;
  }
  
  #instructor .boxVoice:nth-child(2n) {
    display: flex;
    flex-flow: row-reverse;
  }
  
  #instructor .boxVoice .txt,
  #instructor .boxVoice .name {
    padding-right: 2.5rem;
  }
  
  #instructor .boxVoice:nth-child(2n) .txt,
  #instructor .boxVoice:nth-child(2n) .name {
    padding: 0 0 0 2.5rem;
  }
  
  #instructor .boxVoice .txtArea{
    width: 65%;
  }
  
  #instructor .boxVoice .imgPhoto{
    width: 35%;
  }
  
  #instructor .boxVoice .ttlArea {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: 2px #2f6dd3 solid;
    padding-bottom: 0.1rem;
  }

  #instructor .boxVoice .ttlArea .no {
    padding-left: 1rem;
    font-family: 'Hind', sans-serif;
    font-size: 4rem;
    font-weight: 600;
  }

  #instructor .boxVoice .ttlArea .no span {
    font-size: 6rem;
  }

  #instructor .boxVoice .ttlArea .subtitle {
    display: flex;
    align-items: center;
    margin-top: -0.7rem;
    padding: 0 0 0 2rem;
    font-size: 2.2rem;
    line-height: 2.5rem;
    font-weight: 700;
    border-bottom: none;
  }

  #instructor .boxVoice .imgPhoto {
    margin-top: 0;
    max-width: 100%;
  }

  #instructor .boxVoice .txt {
    margin-top: 2.5rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }

  #instructor .boxVoice .name {
    margin-top: 2rem;
    font-size: 1.4rem;
    text-align: left;
  }
 }

.image_mouseover {
overflow: visible;
width: 100%;
height: 100%;
}
.image_mouseover img {
display: block;
transition-duration: 0.5s;
}
.image_mouseover img:hover {
transform: scale(6,6);
transition-duration: 0.5s;
position: relative;
z-index: 10;
}
.image_mouseover2 {
overflow: visible;
width: 100%;
height: 100%;
}
.image_mouseover2 img {
display: block;
transition-duration: 0.5s;
}
.image_mouseover2 img:hover {
transform: scale(3,3);
transition-duration: 0.5s;
position: relative;
z-index: 10;
}

@media screen and (max-width: 767px) {
.image_mouseover img:hover {
transform: scale(2,2);
transition-duration: 0.5s;
position: relative;
z-index: 10;
}	
}



@media only screen and (min-width: 767px) {
  .sp1 {
    display: none;
  }
  .p-index-content02--rev { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

.p-index-content02__img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.p-index-content02__img img { width: 25%; height: auto; }

.p-index-content02__content { padding: 51px 20px 49px; background: #f5f5f5; text-align: center; background-image: url(https://yosca.jp/school/career/images/blackboard4.jpeg);background-position: center;background-repeat: no-repeat; background-size: cover; }

.p-index-content02__title { margin-bottom: 45px; font-size: 36px; line-height: 1.5; padding-left: 15%;margin-top: 20px;}

.p-index-content02__desc { font-size: 15px; line-height: 2; color: white; padding-left: 15%}
.p-index-content03__desc { font-size: 15px; line-height: 2.6; color: white; padding-left: 30%;text-align: left;}
.p-index-course { font-size: 15px; line-height: 1.6; color: white; padding-left: 15%;margin-bottom: 13px;}
.leftcourse{
    padding-left: 23%;
    text-align: left;
    width: 39%;
    float: left;
    height: 390px;
}
.rightcourse{
    text-align: left;
    width: auto;
    float: none;
    height: 390px;
}
}
@media screen and (max-width: 767px) {
	.sp1{display: contents;}
.intro{
    margin-top: -1.8rem;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 20px;
}

}

@media only screen and (min-width: 767px) {
  iframe {
    width:560px;
	height:315px;
  }
 }

@media only screen and (min-width: 767px) {
.mform p{
    font-size: 1.5rem;
    line-height: 2.5rem;
}
}
@media only screen and (max-width: 767px) {
.mform p{
  font-size: 1.5rem;
  line-height: 2.5rem;
}
}

#course .bxCourse .imgPhoto {
  text-align: center;
  /* margin: 0 0 0 80px;
  max-width: 360px; */
}

#course .bxCourse .txtArea {
  margin-top: 2.2rem;
}

#course .bxCourse .txtArea .mark {
  display: inline-block;
  font-size: 1.4rem;
  color: #fff;
  background-color: #e58100;
  padding: 0.5rem 1rem;
}

#course .bxCourse .txtArea .subtitle {
  margin-top: 1rem;
  font-size: 2.4rem;
  font-weight: 700;
}

#course .bxCourse .txtArea .subtitle span {
  margin-top: 1rem;
  display: block;
  font-size: 2rem;
}

#course .bxCourse .txtArea .cinfo {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#course .bxCourse .txtArea .pArea {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

#course .bxCourse .txtArea .pArea .icon {
  display: table;
  width: 105px;
  height: 105px;
  text-align: center;
  background-color: #ba3841;
  color: #fff;
  border-radius: 105px;
  border: 2rem;
}

#course .bxCourse .txtArea .pArea .icon p {
  display: table-cell;
  vertical-align: middle;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2em;
}

#course .bxCourse .txtArea .pArea .price {
  /* width: calc(100% - 95px); */
  padding-top: 2.2rem;
}

#course .bxCourse .txtArea .pArea .price .fee {
  font-size: 4.5rem;
  font-weight: 900;
  /* text-align: left; */
}

#course .bxCourse .txtArea .pArea .price .fee .tax {
  font-size: 1.5rem;
  font-weight: 700;
  /* text-align: left; */
}

#course .bxCourse .txtArea .pArea .price .caution {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: left;
}

#course .bxCourse .txtArea .pArea .price dl {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 400;
  /* text-align: left; */
}


/* コース比較表 */

/* p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 60px auto 40px;
} */
table {
  margin: 20px auto;
}
.compare .course-title {
  background: #ff7500;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.compare th {
  background: #fff7dA;
  border: solid 1px #ccc;
  color: #121212;
  padding: 10px;
  font-size: 14px;
  font-weight:600;
  width: 200px;
}

.compare .bg_clr {
  background: #ffffff;
  border: solid 1px #ccc;
  color: #000000;
  padding: 10px;
  font-size: 14px;
}

.compare td {
  background: #fff7dA;
  border: solid 1px #ccc;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  width: 280px;
}

.compare .bold {
  display: inline;
  background-position: left -100% center;
  padding-bottom: 0.8em;
  font-weight: bold;
  background-size: 200% 0.5em;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
  transition: background-position 1.5s ease 0.1s;
}


#course .caution {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1.4rem;
}

@media screen and (max-width: 867px){

  /* p {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 60px auto 40px;
  } */

  table {
    margin: 20px auto;
  }
  .compare .course-title {
    background: #ff7500;
    border: solid 1px #ccc;
    color: #fff;
    padding: 10px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
  }
  
  .compare th {
    background: #fff7dA;
    border: solid 1px #ccc;
    color: #121212;
    padding: 10px;
    font-size: 14px;
    font-weight:300;
    width: 380px;
  }
  
  .compare .bg_clr {
    background: #ffffff;
    border: solid 1px #ccc;
    color: #000000;
    padding: 10px;
    font-size: 14px;
    font-weight:300;
  }
  
  .compare td {
    background: #fff7dA;
    border: solid 1px #ccc;
    padding: 10px;
    font-size: 14px;
    text-align: center;
  }
  
  .compare .bold {
    display: inline;
    background-position: left -100% center;
    padding-bottom: 0.8em;
    font-weight: bold;
    background-size: 200% 0.5em;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
    transition: background-position 1.5s ease 0.1s;
  }

  #course {
    background: #f7b1ab url("../images/bg-kouza_sp.jpg") no-repeat center top;
    -webkit-background-size: cover;
    background-size: contain;
  }

}

@media screen and (min-width: 867px){
  #sp {
      display: none;
  }
}

@media screen and (max-width: 867px){
  #pc {
      display: none;
  }

  .wrapper2 {
    width: 90%;
      margin: 0 auto;
      position: relative;
  }

  .compare{
    margin-bottom: 25px;
  }
}

/* コース比較表 */
 



  

  @media screen and (max-width: 867px){

    #voice a {
      color: #f57B00;
      font-size: 1.5rem;
    }

    #voice .note{
      display: inline;
      text-align: left;
      font-size: medium;
      line-height: initial;
    }

    #voice .sp_list{
      padding-bottom: 1rem;
    }
  
    #voice .bold {
      display: inline;
      background-position: left -100% center;
      padding-bottom: 0.8em;
      font-weight: bold;
      background-size: 200% 0.5em;
      background-repeat: repeat-x;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(255, 102, 153) 50%);
      transition: background-position 1.5s ease 0.1s;
    }
  
  #curriculum a{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    color:#f57B00
    }

  .orientation {
      width: "315px";
    }    


  #course .bxCourse .txtArea .pArea .icon {
    width: 90px;
    height: 90px;
    border-radius: 90px;
  }
  
  #course .bxCourse .txtArea .pArea .icon p {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2em;
  }
  
  #course .bxCourse .txtArea .pArea .price {
    width: calc(100% - 125px);
    padding-top: 3.3rem;
  }
  
  #course .bxCourse .txtArea .pArea .price .fee {
    font-size: 3rem;
    font-weight: 900;
  }
  
  #course .bxCourse .txtArea .pArea .price .fee .tax {
    font-size: 1.5rem;
    font-weight: 700;
  }

  #course .bxCourse .txtArea .pArea .price .revenue {
    color:#f0334f;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 700;
line-height: 2.4rem;
  }
  
  #course .bxCourse .txtArea .pArea .price .caution {
    margin-top: 1.2rem;
    font-size: 1.4rem;
  }
  
  
  #course .caution {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 1.4rem;
  }
  
  }
  
@media screen and (max-width: 1023px){
  #voice .boxVoice .txt {
    padding-top: 20px;
    margin:auto;
    font-size: 1.5rem;
    line-height: 2.5rem;
    text-align: left;
}

  #voice .boxVoice .imgPhoto_02{
    padding-top: 3rem;
    width: 60%;
    padding-left: 20%;
}

  #voice .note_title{
    display: inline;
    text-align: left;
    font-weight: bold;
}

#voice .boxVoice .txt_02 {
  margin-left: 2.5rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  width: 90%;
}

}

@media screen and (max-width: 878px){

  #voice .bxVoice {
    padding: 2rem;
    box-shadow: 2px 2px 3px 0 #ddd;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 70%;
}

}

@media screen and (max-width: 500px){

  #voice .bxVoice {
    padding: 2rem;
    box-shadow: 2px 2px 3px 0 #ddd;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 85%;
}

  #voice .boxVoice .imgPhoto_02{
    padding-top: 3rem;
}

  #voice .note_title{
    padding-top: 1rem;
    text-align: left;
    line-height: 1rem;
    font-weight: bold;
}

}

@media screen and (min-width: 768px){
  #voice a {
    color: #f57B00;
  }

  #voice .note{
    display: inline;
    text-align: center;
  }

  #voice .note-list{
    margin: 30px;
    font-size: 15px;
    font-weight: 600;
    line-height: 3rem;
    text-decoration: none;
  }

 }