@charset "utf-8";
.aboutArea .ttlArea .bgTxt{
top: -24px;
left: 0;
width:calc(50vw + 490px);
max-width:95vw;
height: 126px;
background: url("../images/common/bgtxt-about.png") left top no-repeat;
background-size: auto 126px;
}
@media only screen and (max-width:767px){
.aboutArea .ttlArea .bgTxt{
width: 100%;
top: 12px;
height: 63px;
background: url("../images/common/bgtxt-about.png") left top no-repeat;
background-size: auto 63px;
}
}
.aboutArea .txtBox{
width: 52.5%;
}
@media only screen and (max-width:767px){
.aboutArea .txtBox{
width:100%;
margin-bottom: 40px;
}
}
.aboutArea .txtBox .note{
max-width: 525px;
}
@media only screen and (max-width:767px){
.aboutArea .txtBox .note{
font-size: 1.4rem;
}
}
.aboutArea .img{
width: 45%;
}
@media only screen and (max-width:767px){
.aboutArea .img{
width:100%;
}
}
.reasonArea{
box-sizing: border-box;
padding: 60px 45px;
margin-bottom: 230px;
}
@media only screen and (max-width:980px){
.reasonArea{
margin-bottom: 160px;
padding: 60px 5%;
}
}
@media only screen and (max-width:767px){
.reasonArea{
margin-bottom: 200px;
padding: 20px 20px 155px;
}
}
.reasonArea .ttlArea .bgTxt{
top: -24px;
left: 0;
width:calc(50vw + 490px);
max-width:95vw;
height: 126px;
background: url("../images/common/bgtxt-reason.png") left top no-repeat;
background-size: auto 126px;
}
@media only screen and (max-width:767px){
.reasonArea .ttlArea .bgTxt{
width: 100%;
top: 12px;
height: 63px;
background: url("../images/common/bgtxt-reason.png") left top no-repeat;
background-size: auto 63px;
}
}
.reasonArea .ttlBox{
width: 50%;
}
.reasonArea .txtBox{
width: 47.5%;
}
@media only screen and (max-width:767px){
.reasonArea .ttlBox{
width: 100%;
}
.reasonArea .txtBox{
width: 100%;
}
}
.reasonArea .txtBox .hash .txtIn{
padding: 2px;
}
.reasonArea .imgBg{
bottom: -190px;
right: 52.5%;
height: calc(100% + 70px);
width: 50vw;
background: url("../images/common/img-reason-01.jpg") center no-repeat;
background-size: cover;
}
@media only screen and (min-width:1500px){
.reasonArea .imgBg{
width: 750px;
}
}
@media only screen and (max-width:980px){
.reasonArea .imgBg{
bottom: -100px;
height: calc(100% - 40px);
}
}
@media only screen and (max-width:767px){
.reasonArea .imgBg{
bottom: -280px;
width: 95vw;
height: 250px;
right: auto;
left: -5vw;
}
}
.couseArea{
padding: 100px 0;
}
@media only screen and (max-width:767px){
.couseArea{
padding: 50px 0;
}
}
.couseArea .ttlArea .bgTxt{
top: -24px;
left: 0;
width:calc(50vw + 490px);
max-width:95vw;
height: 126px;
background: url("../images/common/bgtxt-couse.png") left top no-repeat;
background-size: auto 126px;
}
@media only screen and (max-width:767px){
.couseArea .ttlArea .bgTxt{
width: 100%;
top: 12px;
height: 63px;
background: url("../images/common/bgtxt-couse.png") left top no-repeat;
background-size: auto 63px;
}
}
.couseArea .courseBox{
width: 47.5%;
box-sizing: border-box;
padding: 30px;
border: 5px solid;
  border-image: linear-gradient(to right, #ccccff, #ffcce7) 1;
}
@media only screen and (max-width:980px){
.couseArea .courseBox{
width: 100%;
padding: 20px;
}
.couseArea .courseBox:first-child{
margin-bottom: 10px;
}
}
.couseArea .courseBox .label .txtIn{
padding: 2px 2px 3px;
}
.couseArea .timeSchedule .ttlBox,
.couseArea .timeSchedule .scheduleBox{
width: 33.3333%;
box-sizing: border-box;
}
@media only screen and (max-width:980px){
.couseArea .timeSchedule .ttlBox{
width: 100%;
margin-bottom: 40px;
}
.couseArea .timeSchedule .scheduleBox{
width: 50%;
}
}
.couseArea .timeSchedule .ttlBox .icon{
width: 35px;
}
.couseArea .timeSchedule .scheduleBox{
border-left: 1px solid;
  border-image: linear-gradient(to right, #ccccff, #ffcce7) 1;
  padding: 0 20px;
}
@media only screen and (max-width:980px){
.couseArea .timeSchedule .scheduleBox01{
border: none;
}
}
@media only screen and (max-width:767px){
.couseArea .timeSchedule .scheduleBox01{
padding: 0 15px 0 0;
}
.couseArea .timeSchedule .scheduleBox02{
padding: 0  0 0 15px;
}
.couseArea .timeSchedule .scheduleBox li .fs-16{
font-size: 1.3rem;
}
}
.couseArea .timeSchedule .scheduleBox ul{
padding: 5px 0;
}
.couseArea .timeSchedule .scheduleBox ul:before{
content: "";
position: absolute;
width: 2px;
height:100%;
background: #ccc;
top: 0;
left: 0;
}
.couseArea .timeSchedule .scheduleBox ul:after{
content: "";
position: absolute;
width: 2px;
height:calc(100% - 36px);
top: 18px;
left: 0;
}
.couseArea .timeSchedule .scheduleBox01 ul:after{
background: #0000ff;
}
.couseArea .timeSchedule .scheduleBox02 ul:after{
background: #ff008c;
}
.couseArea .timeSchedule .scheduleBox li{
padding: 5px 0 5px 40px;
}
@media only screen and (max-width:767px){
.couseArea .timeSchedule .scheduleBox li{
padding: 5px 0 5px 20px;
}
}
.couseArea .timeSchedule .scheduleBox .dot{
top: 50%;
left: 1px;
width: 12px;
height: 12px;
transform: translate(-50%,-50%);
border-radius: 50%;
}

.curriculumArea .ttlArea .bgTxt{
top: -24px;
left: 0;
width:calc(50vw + 490px);
max-width:95vw;
height: 126px;
background: url("../images/common/bgtxt-curriculum.png") left top no-repeat;
background-size: auto 126px;
}
@media only screen and (max-width:767px){
.curriculumArea .ttlArea .bgTxt{
width: 100%;
top: 12px;
height: 63px;
background: url("../images/common/bgtxt-curriculum.png") left top no-repeat;
background-size: auto 63px;
}
}
.curriculumArea .naviOuter{
position: sticky;
top: 200px;
left: 0;
width: 130px;
overflow: visible;
z-index: 10;
float: left;
}
@media only screen and (max-width:767px){
.curriculumArea .naviOuter{
position: relative;
float: none;
top: auto;
width: 100%;
margin-bottom: 30px;
}
.curriculumArea .naviOuter ul{
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
}
.curriculumArea .naviOuter .navi{
margin-right: 8px;
}
}
@media only screen and (max-width:767px){
.curriculumArea .naviOuter a{
display: inline-block;
background: #f6f6f6;
height: 35px;
line-height: 35px;
padding: 0 5px 0 10px;
font-size: 1.2rem;
color: #000 !important;
}
}
@media only screen and (max-width:767px){
.curriculumArea .naviOuter a .icon-arrow-cl{
display: inline-block !important;
margin-left: 6px;
font-size: 1.5rem;
top: 2px;
transform: rotate(90deg);
}
}
.curriculumArea .naviOuter a:hover,
.curriculumArea .naviOuter a.on{
color: #0000ff !important;
padding-left: 15px;
}
@media only screen and (max-width:767px){
.curriculumArea .naviOuter a:hover,
.curriculumArea .naviOuter a.on{
color: #555;
padding: 0 5px 0 10px;
}
}
.curriculumArea .naviOuter a:after{
content: "";
position: absolute;
opacity: 0;
top: 10px;
left: 0;
width: 6px;
height: 6px;
background: #0000ff;
border-radius: 50%;
transition: all 0.3s ease;
}
@media only screen and (max-width:767px){
.curriculumArea .naviOuter a:after{
display: none;
}
}
.curriculumArea .naviOuter a:hover:after,
.curriculumArea .naviOuter a.on:after{
opacity: 1;
}
.curriculumContent{
width: calc(100% - 170px);
max-width: 665px;
float: right;
}
@media only screen and (max-width:767px){
.curriculumContent{
width: 100%;
}
}
.curriculumArea .curriculumBox .img{
width: 60%;
}
@media only screen and (max-width:980px){
.curriculumArea .curriculumBox .img{
width: 50%;
}
}
@media only screen and (max-width:767px){
.curriculumArea .curriculumBox .img{
width: 100%;
margin-bottom: 15px;
}
}
.curriculumArea .curriculumBox .txtBox{
width: 37.5%;
}
@media only screen and (max-width:980px){
.curriculumArea .curriculumBox .txtBox{
width: 45%;
}
}
@media only screen and (max-width:767px){
.curriculumArea .curriculumBox .txtBox{
width: 100%;
}
}
.curriculumArea .curriculumBox .txtBox .ttl{
padding: 0 0 5px 20px;
border-bottom: 2px solid #000;
}
.curriculumArea .curriculumBox .subTtl{
padding-left: 20px;
}
.curriculumArea .curriculumBox .activeList{
padding-left: 45px;
}
.curriculumArea .curriculumBox .activeList .dot{
top: 50%;
left: 20px;
width: 12px;
height: 12px;
transform: translate(0,-50%);
border-radius: 50%;
}
.curriculumArea .curriculumBox .activeList.u-fcLiGray .dot{
background: #9d9d9d;
}
.infoArea{
padding: 100px 0;
min-height: 350px;
}
@media only screen and (max-width:767px){
.infoArea{
padding: 50px 0;
}
}
.infoArea .ttlArea .bgTxt{
top: -24px;
left: 0;
width:calc(50vw + 490px);
max-width:95vw;

height: 126px;
background: url("../images/common/bgtxt-info.png") left top no-repeat;
background-size: auto 126px;
}
@media only screen and (max-width:767px){
.infoArea .ttlArea .bgTxt{
width: 100%;
top: 12px;
height: 63px;
background: url("../images/common/bgtxt-info.png") left top no-repeat;
background-size: auto 63px;
}
}
.infoArea .note{
width: 47.5%;
}
@media only screen and (max-width:767px){
.infoArea .note{
width:100%;
}
}
.infoArea .bgImg{
top:0;
left: 50%;
width: 50vw;
height: 350px;
max-width: 850px;
background: url("../images/common/img-info-01.jpg") center no-repeat;
background-size: cover;
}
@media only screen and (max-width:767px){
.infoArea .bgImg{
position: static;
width: 100%;
height: 200px;
margin: 0 0 30px;
}
}
.studyArea{
min-height: 350px;
}
.studyArea .ttlArea .bgTxt{
top: -24px;
left: 0;
width:calc(50vw + 490px);
max-width:95vw;
height: 126px;
background: url("../images/common/bgtxt-study.png") left top no-repeat;
background-size: auto 126px;
}
@media only screen and (max-width:767px){
.studyArea .ttlArea .bgTxt{
width: 100%;
top: 12px;
height: 63px;
background: url("../images/common/bgtxt-study.png") left top no-repeat;
background-size: auto 63px;
}
}
.studyArea .note{
width: 47.5%;
}
@media only screen and (max-width:767px){
.studyArea .note{
width:100%;
}
}
.studyArea .bgImg{
top:0;
left: 50%;
width: 50vw;
height: 350px;
max-width: 850px;
background: url("../images/common/img-study-01.jpg") center no-repeat;
background-size: cover;
}
@media only screen and (max-width:767px){
.studyArea .bgImg{
position: static;
width: 100%;
height: 200px;
margin: 0 0 30px;
}
}
.mapArea .ttlArea .bgTxt{
top: -24px;
left: 0;
width:calc(50vw + 490px);
max-width:95vw;
height: 126px;
background: url("../images/common/bgtxt-map.png") left top no-repeat;
background-size: auto 126px;
}
@media only screen and (max-width:767px){
.mapArea .ttlArea .bgTxt{
width: 100%;
top: 12px;
height: 63px;
background: url("../images/common/bgtxt-map.png") left top no-repeat;
background-size: auto 63px;
}
}
.mapArea{
max-width: 1010px;
}
.mapArea .img{
width: 46.3%;
}
@media only screen and (max-width:767px){
.mapArea .img{
width: 100%;
margin-bottom: 50px;
}
}
.mapArea .txtBox{
width: 50%;
}
@media only screen and (max-width:767px){
.mapArea .txtBox{
width: 100%;
}
}