@charset "utf-8";
@media screen and (max-width: 767px){
  .pbBox{
    padding: 0 10px 0;
  }
  .coursePrice{
    text-align: left;
    margin: 15px 0;
  }
  .coursePrice strong{
    font-size: 16px;
    font-weight: bold;
  }
  .bcontent{
    background: #F2F9FD;
    margin-bottom: 20px;
  }
  .bcontent .sinner{
  }
  .contentsArea{
    overflow: auto;
    width: 100%;
  }
  .otable,.tableLabel{
  }
  .ntable,.tableLabel{
    width: 1000px;
  }
  .contactText{
    margin: 20px 0 0;
    text-align: center;
    font-size: 14px;
  }
  .contactText strong{
    font-size: 22px;
    font-weight: bold;
    color: #DC6177;
    display: block;
  }
  .pointBox{
  }
  .pointL{
  }
  .pointL p{
    color:#008CD6;
    font-weight: bold;
  }
  .pointR{
  }
  .pointR p{
    color:#008CD6;
    font-weight: bold;
  }
  .attentionText{
    color:#000 !important;
    font-size:12px;
  }
  .attentionText2{
    font-size:12px;
    color:#000 !important;
    margin-top:-20px !important;
    margin-bottom:30px;
    margin-left:10px;
    margin-right:10px;
  }
  .courseArea{
    margin-bottom: 40px;
  }
  .courseBox{
  }
  .courseBoxL{
  }
  .courseBoxR{
  }
  .movie {
    margin: 30px auto;
    text-align: center;
  }
  .movie iframe {
    width: 100%;
  }
  .voice {
    padding: 30px 0;
    position: relative;
  }
  .voice p {
}
  .voice span {
    color: #067ECC;
}
  .bnrArea{
    border: solid 3px #D9A300;
    padding:20px;
    width:96%;
    margin: 0 auto;
  }
  .bnrBox{
    padding:20px 0 0 0;
    margin: 0 auto;
  }
  .memberBtn{
    text-align:center;
    margn:0 auto;
  }
  .pointTitle{
    font-size:20px;
    font-weight:bold;
    color:#EA5413;
    margin-bottom:10px;
  }
  .voiceArea{
    border-bottom: 1px solid #888888;
    padding:30px 0;
  }
  .voiceBox{
  }
 #voice02{ 
    background: #FFF7DF;
    padding:10px 0;
  }
  .voiceL{
    width:100%;
    margin-bottom:20px;
  }
  .voiceL2{
    width:100%;
    margin-bottom:20px;
  }
  .voiceBox .name{
    font-size:18px;
    color:#000000;
  }
  .voiceBox .name span{
    font-size:13px;
    color:#000000;
  }
  .voiceBox .voiceTitle{
    font-size:18px;
    font-weight:bold;
    color: #EA5413;
    margin-top:20px;
    margin-bottom:10px;
  }
  .voiceBox2 .name{
    font-size:18px;
    color:#000000;
  }
  .voiceBox2 .name span{
    font-size:13px;
    color:#000000;
  }
  .voiceBox2 .voiceTitle{
    font-size:18px;
    font-weight:bold;
    color: #EA5413;
    margin-top:20px;
    margin-bottom:10px;
  }
  .voiceR{
    width:100%;
    margin-bottom:20px;
  }
  .voiceArea02{
    background: #FFF7DF;
    margin: 30px auto;
  }
  .voiceBox02{
    width: 100%;
    height: auto;
  }
  .voiceL02{
    width: 100%;
    height: auto;
    margin-bottom:10px;
  }
  .voiceL02 .caption{
    margin-top:10px;
    font-size:13px;
    color:#000000;
    text-align:right;
  }
  .voiceR02{
    width: 100%;
    padding:10px;
    background-color: #F4F3F2;
    border: 2px solid #FFFFFF;
  }
  .voiceL03{
    width: 100%;
    padding:10px;
    background-color: #F4F3F2;
    border: 2px solid #FFFFFF;
    margin-bottom:30px;
  }
  .voiceR03{
    margin-top:20px;
    width: 100%;
    height: auto;
    margin-bottom:10px;
  }
  .teacherArea{
    max-width:900px;
    margin: 20px auto;
    border-bottom: #333333 1px solid;
  }
  .teacherBoxL{
    width:80%;
    text-align:center;
    margin:0 auto 20px;
  }
  .teacherBoxR{
    width:100%;
  }
  .teacherBoxR .katagaki{
    font-size:16px;
    font-weight:bold;
    color:#EA5413;
  }
  .teacherBoxR .name{
    margin-top:2px;
    margin-left:10px;
    font-size:18px;
    font-weight:bold;
    color:#000000;
  }
  .teacherBoxR .yakusyoku{
    margin-top:2px;
    margin-left:10px;
    font-size:14px;
    color:#000000;
  }
  .teacherBoxR .profile{
    margin:2px 0 20px 10px;
    font-size:14px;
    color:#000000;
  }
  .note{
    margin-top:10px;
    font-size:13px;
    text-align:left !important;
  }
  #e-learning a{margin:0 auto;text-align:center;}
  #group{margin-top:-43px;}
  #group h3{margin-top:65px;}
  #support{margin-top:-43px;}
  #support h4{margin-top:65px;}
  
  .listArea li{font-size: 16px;margin-bottom:5px;}
  .listArea li span{font-size: 14px;}
  .listArea li .name_small{font-size: 14px !important;}
  
  #voice .sinner{position: relative;}
  #voice .sns_box{display: flex;position: absolute;top:-40px;right: -10px;}
  #voice .sns_box li:first-of-type{margin: 1px 5px 0 0;}
.snsButton{clear:both}
.snsButton#fixedSNS{max-height:auto;border-bottom:none}
.snsButton#fixedSNS.fixed{padding:6px 10px}
.snsButton ul::after{display:block;clear:both;content:""}
.snsButton .yjnSnsBtn{display:block;float:left;margin-right:5px}
.snsButton .yjnSnsBtn .fbBtn,.snsButton .yjnSnsBtn .hateBtn,.snsButton .yjnSnsBtn .lineBtn,.snsButton .yjnSnsBtn .twBtn{width:95px;height:28px;border-radius:3px;line-height:28px;color:#fff;text-align:center;cursor:pointer}
.snsButton .yjnSnsBtn .fbBtn:before,.snsButton .yjnSnsBtn .hateBtn:before,.snsButton .yjnSnsBtn .lineBtn:before,.snsButton .yjnSnsBtn .twBtn:before{vertical-align:top;font-size:22px}
.snsButton .yjnSnsBtn .twBtn{background:#1B95E0}
.snsButton .yjnSnsBtn .twBtn:after,.snsButton .yjnSnsBtn .twBtn:before{font-family:RiffIcons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.snsButton .yjnSnsBtn .twBtn:before{content:<i class="fab fa-twitter"></i>}
.snsButton .yjnSnsBtn .twBtn:before{font-size:24px}
.snsButton .yjnSnsBtn span{display:inline-block;width:65px;padding-left:2px;vertical-align:top;text-align:center;font-size:86%}
.snsButton .yjnSnsBtn:hover{opacity:.8}
.snsButton .yjnSnsBtn a{color:#fff}
.snsButton .yjnSnsBtn span {color:#fff}
.snsButton .yjnSnsBtn a:hover{text-decoration:none}

}
@media print, screen and (min-width: 768px){
  .pbBox{
    padding: 0 20px 0;
  }
  .coursePrice{
    text-align: right;
    margin-top: 10px;
  }
  .coursePrice strong{
    font-size: 16px;
    font-weight: bold;
  }
  .bcontent{
    transform:skew(0deg, -2deg);
    background: #F2F9FD;
    padding: 80px 0 50px;
    margin-bottom: 20px;
  }
  .bcontent .sinner{
    transform:skew(0deg, 2deg);
  }
  .access{
    margin-left:80px;
  }
  .contactText{
    margin: 20px;
    text-align: center;
    font-size: 14px;
  }
  .contactText strong{
    font-size: 24px;
    font-weight: bold;
    color: #DC6177;
  }
  .pointBox{
  }
  .pointL{
    float:left;
    width:50%;
  }
  .pointL p{
    color:#008CD6;
    font-weight: bold;
  }
  .pointR{
    float:left;
    width:50%;
  }
  .pointR p{
    color:#008CD6;
    font-weight: bold;
  }
  .attentionText{
    font-size:14px;
    color:#000 !important;
  }
  .attentionText2{
    font-size:14px;
    color:#000 !important;
    margin-top:-20px !important;
    margin-bottom:30px;
  }
  .stepBtn li{
    float:left;
    text-align:center;
    width:33%;
  }
  .courseArea{
    margin-bottom: 40px;
  }
  .courseBox{
  }
  .courseBoxL{
    width:75%;
    float:left;
  }
  .courseBoxR{
    width:25%;
    float:right;
  }
  .movie {
    width: 100%;
    margin: 30px auto 30px;
    text-align: center;
  }
  .voice {
    padding: 30px;
    position: relative;
  }
  .voice p {
    font-size:14px;
}
 #voice02{ 
    background: #FFF7DF;
    padding:20px 0;
    margin:20px auto 50px;
  }
  .voice span {
    color: #067ECC;
}
  .bnrArea{
    border: solid 3px #D9A300;
    padding:20px;
    width:75%;
    margin: 0 auto;
  }
  .bnrBox{
    padding:20px 0 0 0;
    margin: 0 auto;
  }
  .memberBtn{
    max-width:93%;
    margn:0 auto;
    text-align:right;
  }
  .pointTitle{
    font-size:24px;
    font-weight:bold;
    color:#EA5413;
    margin-bottom:10px;
  }
  .vArea{
    width:100%;
  }
  .voiceL{
    float:left;
    width:49%;
    margin-right:2%;
  }
  .voiceL2{
    float:left;
    width:31%;
    margin-right:2%;
  }
  .voiceL2:nth-child(3){
    margin-right:0;
  }
  .voiceR{
    float:right;
    width:49%;
  }
  .voiceArea{
    border-bottom: 1px solid #888888;
    padding:30px 0;
  }
  .voiceBox{
  }
  .voiceBox2{
  }
  .voiceBox a{
    font-size: 14px;
  }
  .voiceBox2 a{
    font-size: 14px;
  }
  .voiceBox .name{
    font-size:16px;
    color:#000000;
  }
  .voiceBox2 .name{
    font-size:16px;
    color:#000000;
  }
  .voiceBox .name span{
    font-size:12px;
    color:#000000;
  }
  .voiceBox2 .name span{
    font-size:12px;
    color:#000000;
  }
  .voiceTitle{
    font-size:16px !important;
    font-weight:bold;
    color: #EA5413;
    margin-top:10px;
    margin-bottom:10px;
  }
  .flR{
    float:right;
    margin: 0 0 15px 15px;
    width: 50%;
  }
  .voiceBox .movie {
    width: 100%;
    margin: 15px auto 10px;
    text-align: center;
  }
  .voiceL .movieRead{
    font-size:14px;
  }
  .voiceR .voiceTitle{
    font-size:16px;
    font-weight:bold;
    color: #EA5413;
  }
  .voiceArea02{
    max-width:900px;
    margin: 30px auto 0;
  }
  .voiceBox02{
    position: relative;
    width: 100%;
    height: 400px;
  }
  .voiceL02{
    width: 550px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
  }
  .voiceL02 .caption{
    margin-top:10px;
    font-size:13px;
    color:#000000;
    text-align:right;
  }
  .voiceR02{
   width: 480px;
    position: absolute;
    right: 0;
    top: 200px;
    padding: 30px;
    background-color: #F4F3F2;
    border: 2px solid #FFFFFF;
    opacity: 0.95;
  }
  .voiceL03{
   width: 480px;
    position: absolute;
    left: 0;
    top: 240px;
    padding: 30px;
    background-color: #F4F3F2;
    border: 2px solid #FFFFFF;
    opacity: 0.95;
  }
  .voiceR03{
    width: 550px;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
  }
  .voiceL04{
    width: 550px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
  }
  .voiceR04{
   width: 520px;
    position: absolute;
    right: 0;
    top: 220px;
    padding: 30px;
    background-color: #F4F3F2;
    border: 2px solid #FFFFFF;
    opacity: 0.95;
    font-size:14px;
  }
  .teacherArea{
    max-width:900px;
    margin: 20px auto;
    border-bottom: #333333 1px solid;
  }
  .teacherBoxL{
    float:left;
    width:25%;
    margin-right:2%;
  }
  .teacherBoxR{
    float:left;
    width:73%;
    margin-right:unset;
  }
  .teacherBoxR .katagaki{
    font-size:16px;
    font-weight:bold;
    color:#EA5413;
  }
  .teacherBoxR .name{
    margin-top:2px;
    margin-left:10px;
    font-size:18px;
    font-weight:bold;
    color:#000000;
  }
  .teacherBoxR .yakusyoku{
    margin-top:2px;
    margin-left:10px;
    font-size:14px;
    color:#000000;
  }
  .teacherBoxR .profile{
    margin:2px 0 20px 10px;
    font-size:14px;
    color:#000000;
  }
  .note{
    margin-top:10px;
    font-size:13px;
  }
  
  
.listArea{width:100%;}
.listArea li{float:left;width:32%;margin-right:1%;font-size: 16px;margin-bottom:1%;}
.listArea li:nth-of-type(3n){float:left;width:32%;margin-right:0;font-size: 16px;margin-bottom:1%;}
.listArea li span{font-size: 13px;}
.listArea li .name_small{font-size: 0.9vw !important;}
  
  
  #voice .sinner{position: relative;}
  #voice .sns_box{display: flex;position: absolute;top:0;right: 0;}
  
.snsButton{clear:both}
.snsButton#fixedSNS{max-height:auto;border-bottom:none}
.snsButton#fixedSNS.fixed{padding:6px 10px}
.snsButton ul::after{display:block;clear:both;content:""}
.snsButton .yjnSnsBtn{display:block;float:left;margin-right:5px}
.snsButton .yjnSnsBtn .fbBtn,.snsButton .yjnSnsBtn .hateBtn,.snsButton .yjnSnsBtn .lineBtn,.snsButton .yjnSnsBtn .twBtn{width:95px;height:28px;border-radius:3px;line-height:28px;color:#fff;text-align:center;cursor:pointer}
.snsButton .yjnSnsBtn .fbBtn:before,.snsButton .yjnSnsBtn .hateBtn:before,.snsButton .yjnSnsBtn .lineBtn:before,.snsButton .yjnSnsBtn .twBtn:before{vertical-align:top;font-size:22px}
.snsButton .yjnSnsBtn .twBtn{background:#1B95E0}
.snsButton .yjnSnsBtn .twBtn:after,.snsButton .yjnSnsBtn .twBtn:before{font-family:RiffIcons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.snsButton .yjnSnsBtn .twBtn:before{content:<i class="fab fa-twitter"></i>}
.snsButton .yjnSnsBtn .twBtn:before{font-size:24px}
.snsButton .yjnSnsBtn span{display:inline-block;width:65px;padding-left:2px;vertical-align:top;text-align:center;font-size:68.75%}
.snsButton .yjnSnsBtn:hover{opacity:.8}
.snsButton .yjnSnsBtn a{color:#fff}
.snsButton .yjnSnsBtn span {color:#fff;font-weight:bold}
.snsButton .yjnSnsBtn a:hover{text-decoration:none}
  
}

@media screen and (min-width: 1300px){
.listArea li .name_small{font-size: 11px !important;}
}