@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
 /*---------------------------------------*/
/* topArea */
/*---------------------------------------*/
.topArea #movie{
display: block;
width:100%;
height:100%;
object-fit: cover;
}
.topArea .icon-play{
font-size: 81px;
}
@media screen and (max-width:767px){
.topArea .icon-play{
font-size: 50px;
}
}
.youTuberemodal {
  padding: 0;
  max-width: 960px;
  background: #000;
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.popup-youtube.absolute-center{
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translate(0);
}

/*---------------------------------------*/
/* news */
/*---------------------------------------*/
.importantNews{
height: 55px;
margin-top: -50px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
z-index: 10;
box-sizing: border-box;
padding: 0 40px 0;
}
@media screen and (max-width:767px){
.importantNews{
margin-top: -24px;
height: 60px;
padding: 10px 12px 0;
}
}
.importantNews .ttl{
width:6em;
}
.importantNews .ticker {
text-align: left;
position: relative;
overflow: hidden;
width: calc(100% - 9em);
}
@media screen and (max-width:767px){
.importantNews .ticker {
width:100%;
}
}
.importantNews .ticker ul {
position: relative;
}
.importantNews .ticker ul li {
display: none;
}
.newsArea{
max-width: 760px;
}
/*---------------------------------------*/
/* contentsBnImg */
/*---------------------------------------*/
.topContent{
position: relative;
z-index: 1;
margin-top: -150px;
padding-top: 80px;
padding-bottom: 280px;
}
.topContent::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 94vw;
max-width: 1360px;
height: 100%;
background-color: #faf9f9;
}
@media only screen and (max-width:767px){
.topContent{
margin-top: -50px;
padding-top: 45px;
padding-bottom: 110px;
}
}
.contentsBnImg .lavel{
left: 3%;
bottom: 0;
width: 85%;
height: 40px;
line-height: 40px;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
padding: 0 10px;
max-width: 320px;
z-index: 10;
}
@media only screen and (max-width:767px){
.contentsBnImg .lavel{
width: 90%;
height: 30px;
line-height: 30px;
left: 50%;
transform: translateX(-50%);
}
}
.contentsBn .note {
width: 90%;
max-width: 568px;
margin-left: auto;
margin-right: auto;
}

/*bnArea*/
.contentsBn.bnArea .contentsBnImg .bg{
width: 100%;
height: 250px;
background: url("../images/common/img-contentsbn_06.jpg") center;
background-size: cover;
}
.contentsBnImg .txt{
top: 30px;
left: 3%;
width: 50%;
max-width: 480px;
}
@media only screen and (max-width:767px){
.contentsBnImg .txt{
width: 90%;
}
}
.contentsBn.bnArea .contentsBnImg .lavelOuter{
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.contentsBn.bnArea .contentsBnImg .lavelOuter a{
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.contentsBn.bnArea .contentsBnImg .lavelOuter .areaInner{
height: 100%;
}
/*---------------------------------------*/
/* contentNavi/contentinfoBlock */
/*---------------------------------------*/
.contentNavi .navi{
line-height: 50px;
border-right: 1px solid rgba(70, 70, 70, 0.3);
width: 33.333%;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.contentNavi{
width: 90%;
}
.contentNavi .navi{
width:100%;
line-height: 20px;
margin-bottom: 8px;
border-left: 1px solid rgba(70, 70, 70, 0.3);
}
}
.contentNavi .navi:first-child{
border-left: 1px solid rgba(70, 70, 70, 0.3);
}
.contentNavi .contentTxt{
top: -60px;
left: -60px;
font-size: 40px;
}
@media only screen and (max-width:1220px){
.contentNavi .contentTxt{
left: -4%;
}
}
@media only screen and (max-width:767px){
.contentNavi .contentTxt{
top: -50px;
left: -6%;
font-size: 34px;
}
}
.contentinfoBlock{
padding: 80px;
} 
@media only screen and (max-width:1220px){
.contentinfoBlock{
padding: 50px;
} 
}
@media only screen and (max-width:980px){
.contentinfoBlock{
padding: 0;
} 
}
.contentinfoBlock .img{
top: 100px;
right: -6%;
width: 60%;
}
@media only screen and (max-width:1220px){
.contentinfoBlock .img{
width: 56%;
}
}
@media only screen and (max-width:980px){
.contentinfoBlock .img{
top: 0;
right:0;
width: 100%;
position: relative;
}
}
.contentinfoBlock--right .img{
right:auto;
left: -6%;
}
@media only screen and (max-width:980px){
.contentinfoBlock--right .img{
left:0;
}
}
.contentinfoBlock .txtBox{
margin-right: 55%;
width: 45%;
}
@media only screen and (max-width:1220px){
.contentinfoBlock .txtBox{
margin-right: 55%;
width:45%;
}
}
@media only screen and (max-width:980px){
.contentinfoBlock .txtBox{
margin-right: 0;
width:100%;
box-sizing: border-box;
padding: 50px;
}
}
@media only screen and (max-width:767px){
.contentinfoBlock .txtBox{
padding: 20px;
}
}
.contentinfoBlock--right .txtBox{
margin-left:70%;
width: 33%;
margin-right: 0;
}
@media only screen and (max-width:1220px){
.contentinfoBlock--right .txtBox{
margin-left:55%;
width: 45%;
}
}
@media only screen and (max-width:980px){
.contentinfoBlock--right .txtBox{
margin-left: 0;
width:100%;
box-sizing: border-box;
padding: 50px;
}
}
@media only screen and (max-width:767px){
.contentinfoBlock--right .txtBox{
padding: 20px;
}
}
.contentinfoBlock .moreBtn a{
left:0;
width: 300px;
}
@media only screen and (max-width:1220px){
.contentinfoBlock .moreBtn a{
width: 100%;
}
}
.contentinfoBlock--right .moreBtn a{
left: 0;
}
/*---------------------------------------*/
/* couseBlock */
/*---------------------------------------*/
.couseBlock .bg{
height: 450px;
width: 100%;
}
@media screen and (max-width:767px){
.couseBlock .bg{
height: 250px;
}
}
.couseBlock.couse01{
margin-bottom: 320px;
}
@media screen and (max-width:767px){
.couseBlock.couse01{
margin-bottom: 100px;
}
}
.couseBlock.couse01 .bg{
background: url("../images/common/img-couse_01.jpg") center;
background-size: cover;
}
.couseBlock.couse02 .bg{
background: url("../images/common/img-couse_02.jpg") center;
background-size: cover;
}
.couseBlock.couse03 .bg{
background: url("../images/common/img-couse_03.jpg") center;
background-size: cover;
}
.couseBlock .txtBox{
top: 100px;
width: 40%;
padding-bottom: 50px;
}
@media screen and (max-width:980px){
.couseBlock .txtBox{
width: 45%;
}
}
@media screen and (max-width:767px){
.couseBlock .txtBox{
width: 80%;
position: relative;
top:0;
margin-top: -100px;
padding-bottom:30px;
}
}
.couseBlock.couse01 .txtBox{
background:  rgba(94, 143, 203, 0.9);
right: 0;
}
@media screen and (max-width:767px){
.couseBlock.couse01 .txtBox{
margin-left: 20%;
}
}
.couseBlock.couse02 .txtBox{
background:  rgba(190, 100, 150, 0.9);
padding-top:110px;
left: 0;
}
@media screen and (max-width:767px){
.couseBlock.couse02 .txtBox{
padding-top:30px;
}
}
.couseBlock.couse03 .txtBox{
background:  rgba(147, 124, 184, 0.9);
right: 0;
}
@media screen and (max-width:767px){
.couseBlock.couse03 .txtBox{
margin-left: 20%;
}
}
.couseBlock .txtBoxIn{
width: 90%;
max-width: 424px;
}
.couseBlock.couse01 .txtBoxIn{
margin-left: 5%;
}
.couseBlock.couse02 .txtBoxIn{
margin-right: 5%;
}
.couseBlock.couse03 .txtBoxIn{
margin-left: 5%;
}
.couseBlock.couse02 .couseBlock_title>span{
display: block;
margin-top: 0.2em;
}
.couseBlock .txtBoxIn .lavel{
height: 55px;
line-height: 55px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-width: 300px;
}
@media screen and (max-width:767px){
.couseBlock .txtBoxIn .lavel{
height: 35px;
line-height: 35px;
max-width: 200px;
}
}
.couseList{
min-width: 460px;
}
@media screen and (max-width:767px){
.couseList{
min-width: inherit;
width: 100%;
}
}
.couseList .note{
padding-left: 30px;
}
@media screen and (max-width:767px){
.couseList .note{
padding-left:20px;
}
}
.couseList .icon-arrow-s{
font-size: 10px;
top: 3px;
left: 0;
}
@media screen and (max-width:767px){
.couseList .icon-arrow-s{
font-size:8px;
}
}

.specialContents{
position: relative;
z-index: 1;
padding-top: 120px;
}
.specialContents::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 200px);
background: #faf9f9;
}
@media screen and (max-width:767px){
.specialContents{
padding-top: 60px;
}
.specialContents::before{
height: calc(100% + 100px);
}
}