@charset "UTF-8";
:root {
  --color-navy: #202A68;
  --color-heading1 :#24016F;
  --color-heading2 : #536ABC;
  --color-white : #ffffff;
  --color-text : #000000;

  --color-btn-a-bg: #F6A842;
  --color-btn-a-border: #DA9234;
  --color-btn-b-bg: #73E3B7;
  --color-btn-b-border: #4FC295;
}


/*------------------------------------------------------

  visual

------------------------------------------------------*/
#visual { position: relative;}
#visual::before { content: ""; position: absolute; left: 0; top: 0; background: linear-gradient(270deg, #FFF 0%, #BCF15F 100%); width: 80%; height: calc(100% - 120px); z-index: -2; opacity: 0.5;}


#visual .container {}

#visual-slider { overflow: hidden;}
#visual-slider div {}
#visual-slider img {}

#visual .message { position: absolute;}
#visual .message span { color: var(--color-heading1); letter-spacing: 0.2em; background: linear-gradient(90deg, #CCF583 0%, #73E3B7 100%); filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.15));}



@media (min-width: 768px) {
  #visual { padding-top: 40px; margin-bottom: 40px;}
  #visual::after { content: ""; position: absolute; right: 0; left: calc(50% - 580px); bottom: -40px; background: linear-gradient(90deg, #FFF 0%, #BCF15F 100%); height: 160px; z-index: -1; }

  #visual .container { max-width: 1360px;}

  #visual-slider { max-width: 1000px; height: 520px; border-radius: 0 0 150px 0; }

  #visual .message { top: 170px; right: -3%;}
  #visual .message span { padding: 12px 15px; font-size: 4.2rem; line-height: 2;}
}


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

}


@media (max-width: 767px) {
  #visual { padding-bottom: 110px; margin-bottom: 0;}
  #visual::before { width: 100%; height: 100%; background: linear-gradient(90deg, #FFF 0%, #BCF15F 100%); opacity: 1;}
  #visual .container { margin-left: 0; margin-right: 0;}

  #visual-slider {  border-radius: 0 0 110px 0;}
  #visual-slider div { line-height: 1;}
  #visual-slider img { width: 100%; aspect-ratio: 750 / 860; height: auto; object-fit: cover; }

  #visual .message { text-align: center; left: 0; right: 0; bottom: -90px;}
  #visual .message span { font-size: 2.8rem; padding: 10px; line-height: 2.2;}
}



/*------------------------------------------------------

  online-application

------------------------------------------------------*/
#online-application { background-color: var(--color-navy); text-align: center;}
#online-application a {}
#online-application img { width: 100%; max-width: calc(1088px/2);}

@media (min-width: 768px) {
  #online-application { height: 60px; /*height: 120px;*/ padding-top: 24px;}
  #online-application a:hover img { opacity: 0.8; transition: opacity 0.2s; }
}

@media (max-width: 767px) {
  #online-application { padding: 20px;}
}



/*------------------------------------------------------

  news

------------------------------------------------------*/
#news { background-color: #DEF8F5;}
#news .contents-title { text-align: center; line-height: 1; letter-spacing: 0.15em; }
#news .contents-title span { color: var(--color-heading2); font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; display: block; }

#news .l_col-news { }
#news .l_col-news section { line-height: 1.4; letter-spacing: 0.05em; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15); }
#news .l_col-news a { color: #17211D; position: relative; background-color: #fff; display: block; height: 100%;}
#news .l_col-news a:hover { text-decoration: none;}
#news .l_col-news .l_col-head { background-color: #E4F5C4;}
#news .l_col-news .l_col-head figure {  margin-bottom: 0;}
#news .l_col-news .l_col-head figure img { object-fit: cover; width: 100%; }
#news .l_col-news .l_col-head div { text-align: center; }
#news .l_col-news .l_col-head .category { color: var(--color-navy); font-weight: 700; background-color: #fff; border-radius: 5px; text-align: center;  margin-left: auto; margin-right: auto; margin-bottom: 10px; padding: 3px; }
#news .l_col-news .l_col-head .date { color: var(--color-navy); font-weight: 700; }

#news .l_col-news .body {}
#news .l_col-news .body .title { color: #2F8161;  font-weight: 400; margin-bottom: 5px;}
#news .l_col-news .body > p { font-weight: 400; }

#news .l_col-news .more { color: var(--color-navy);  font-weight: 700; line-height: 1.6; letter-spacing: 0.05em; position: absolute; right: 20px; bottom: 10px; padding-right: 16px; background: url(../top/icon_arrow2.svg) no-repeat right center / 12px auto;}

#news .btn-b { max-width: 220px;}
#news .btn-b a { border: none; padding: 0 10px; height: 30px; line-height: 30px; }
#news .btn-b a::after { content: "";}
#news .btn-b span { position: relative; padding-right: 22px;}
#news .btn-b span::before ,
#news .btn-b span::after { content: ""; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; transform: rotate(315deg); right: 0; top: calc(50% - 5px); position: absolute; }
#news .btn-b span::before { right: 9px;}

@media (min-width: 768px) {
  #news { padding-top: 85px; padding-bottom: 50px; margin-bottom: 50px;}
  #news .contents-title { margin-bottom: 50px; font-size: 4rem;}
  #news .contents-title span { font-size: 1.5rem; margin-top: 15px;}

  #news .l_col-news { max-width: 1160px; margin-bottom: 50px; justify-content: center;}
  #news .l_col-news section { width: calc(25% - 10px); max-width: 260px; background-color: #fff; margin-bottom: 0;}
  #news .l_col-news section:not(:last-child) { margin-right: 40px;}
  /* #news .l_col-news section:nth-child(n+5) { margin-top: 40px;} */
  #news .l_col-news a { }
  #news .l_col-news a:hover { opacity: 0.8; transition: opacity 0.2s;}
  #news .l_col-news .l_col-head figure { width: 50%; }
  #news .l_col-news .l_col-head figure img { height: 87px;}
  #news .l_col-news .l_col-head div { width: 50%; padding-top: 20px;}
  #news .l_col-news .l_col-head .category { font-size: 1.2rem; width: 110px; }
  #news .l_col-news .l_col-head .date { font-size: 1.2rem; }

  #news .l_col-news .body { padding: 20px 20px 40px;}
  #news .l_col-news .body .title { font-size: 1.6rem; }
  #news .l_col-news .body > p { font-size: 14px; }

  #news .l_col-news .more { font-size: 1.4rem; }

  #news .btn-b a { font-size: 1.6rem; }
  #news .btn-b a:hover { opacity: 0.8; transition: opacity 0.2s;}
}
@media (max-width: 767px) {
  #news { padding-top: 30px; padding-bottom: 40px; margin-bottom: 50px;}
  #news .contents-title { margin-bottom: 30px; font-size: 2.8rem;}
  #news .contents-title span { font-size: 1.3rem; margin-top: 10px;}

  #news .l_col-news { margin-bottom: 40px; }
  #news .l_col-news section { width: calc(50% - 7px); margin-bottom: 0;}
  #news .l_col-news section:nth-child(n+3) { margin-top: 20px;}
  #news .l_col-news .l_col-head figure { width: 45%;}
  #news .l_col-news .l_col-head figure img { height: 50px;}
  #news .l_col-news .l_col-head div { width: 55%; margin-bottom: 0; padding-top: 5px;}
  #news .l_col-news .l_col-head .category { font-size: 1rem; width: 90%; margin-bottom: 5px;}
  #news .l_col-news .l_col-head .date { font-size: 1rem; }

  #news .l_col-news .body { padding: 10px 10px 30px; }
  #news .l_col-news .body .title { font-size: 1.4rem; }
  #news .l_col-news .body > p { font-size: 12px; }

  #news .l_col-news .more { font-size: 1.2rem; right: 10px; bottom: 6px; }
  #news .btn-b a { font-size: 1.4rem; }
  #news .btn-b span::before ,
  #news .btn-b span::after { width: 8px; height: 8px; top: calc(50% - 4px); }
}




/*------------------------------------------------------

  bnr-area

------------------------------------------------------*/
.bnr-area {}
.bnr-area .l_col-2 {}
.bnr-area .l_col-2 li {}
.bnr-area .l_col-2 li a {}
.bnr-area .l_col-2 li img {}

@media (min-width: 768px) {
  .bnr-area { margin-bottom: 160px;}
  .bnr-area .l_col-2 { max-width: 1050px;}
  .bnr-area .l_col-2 li { max-width: 505px;}
  .bnr-area .l_col-2 li a:hover { opacity: 0.8; transition: opacity 0.2s;}

}

@media (max-width: 767px) {
  .bnr-area { margin-bottom: 50px;}
  .bnr-area .l_col-2 li:last-child { margin-bottom: 0;}
  
}


/*------------------------------------------------------

  educational-philosophy

------------------------------------------------------*/
#educational-philosophy { position: relative;}
#educational-philosophy::before { content: ""; position: absolute; left: 0; top: 0; background: linear-gradient(90deg, #FFF 0%, #BCF15F 100%); width: 70%; height: 200px; z-index: -3;}

#educational-philosophy .container {}
#educational-philosophy .contents-title { line-height: 1; }
#educational-philosophy .contents-title .title { color: var(--color-text); letter-spacing: 0.15em; }
#educational-philosophy .contents-title p { color: var(--color-heading2); letter-spacing: 0.15em;}

#educational-philosophy .decoration { opacity: 0.4; color: var(--color-white);  line-height: 1; letter-spacing: 0.15em; z-index: 0; position: absolute; right: 0;}

#education-slider {}
#education-slider .slick-slide { border-radius: 0 0 0 120px; overflow: hidden;}
#education-slider div { line-height: 1;}
#education-slider .bg {}
#education-slider .slick-dots { bottom: -40px;}
#education-slider .slick-dots li { height: 3px; margin: 0; width: 33px; }
#education-slider .slick-dots li button { height: 3px; background-color: var(--color-heading2); padding: 0; width: 33px; }
#education-slider .slick-dots li button::before { height: 3px; line-height: 3px; width: 33px; color: transparent; }
#education-slider .slick-dots li.slick-active button { background-color: #C3E9ED; }

#message-wrap { position: absolute; left: 0; top: 150px; z-index: 1; max-width: 1160px; margin-left: auto; margin-right: auto; right: 0; }
#message-slider {}
#message-slider .msg { opacity: 0.7; background: linear-gradient(90deg, #FFF 50%, rgba(255, 255, 255, 0.30) 94.62%); }
#message-slider .msg p { color: var(--color-text); line-height: 2.2; letter-spacing: 0.15em;}



@media (min-width: 768px) {
  #educational-philosophy { padding-top: 35px; margin-bottom: 140px;}
  #educational-philosophy .contents-title { margin-bottom: 30px; display: flex; justify-content: flex-start; align-items: center;}
  #educational-philosophy .contents-title .title { margin-right: 15px; font-size: 3.6rem;}
  #educational-philosophy .contents-title p { font-size: 1.8rem;}

  #educational-philosophy .decoration { font-size: 10.5rem;  bottom: -6px; }



  #education-slider .bg { height: 540px;}

  #message-slider .msg { padding: 50px; width: auto !important;}
  #message-slider .msg p { font-size: 2.4rem;}
}

@media (max-width: 767px) {
  #educational-philosophy { padding-top: 25px; margin-bottom: 115px;}
  #educational-philosophy::before { width: 100%;}
  #educational-philosophy .contents-title { text-align: center; margin-bottom: 25px;}
  #educational-philosophy .contents-title .title { font-size: 2.8rem; margin-bottom: 10px;}
  #educational-philosophy .contents-title p { font-size: 1.3rem;}

  #educational-philosophy .decoration { font-size: 4.5rem;  bottom: 0; text-align: right;}

  #education-slider .bg { height: 450px;}
  #education-slider [data-slick-index="0"] .bg { background: url(../top/img_education-slider-01_sp.jpg) no-repeat center center / cover !important;}
  #education-slider [data-slick-index="1"] .bg { background: url(../top/img_education-slider-02_sp.jpg) no-repeat center center / cover !important;}
  #education-slider [data-slick-index="2"] .bg { background: url(../top/img_education-slider-03_sp.jpg) no-repeat center center / cover !important;}

  #message-slider .msg { padding: 20px;}
  #message-slider .msg p { font-size: 1.4rem; }
}





/*------------------------------------------------------

  school-features

------------------------------------------------------*/
#school-features { position: relative;}
#school-features::before { content: ""; position: absolute; right: 0; top: 0; background: linear-gradient(90deg, #FFF 0%, #859EC3 100%); width: 70%; height: 100%; z-index: -3;}
#school-features::after { content: ""; position: absolute; left: 0; right: calc(50% - 580px); top: 100px; background-color: #859EC3; height: 100%; z-index: -2; border-radius: 0 0 120px 0;}

#school-features .container {}
#school-features .contents-title { line-height: 1; }
#school-features .contents-title .title { color: var(--color-text); letter-spacing: 0.15em; }
#school-features .contents-title p { color: var(--color-heading2); letter-spacing: 0.15em;}
#school-features .l_col-2 {}
#school-features .l_col-2 .text {}
#school-features .l_col-2 .title { color: var(--color-white); letter-spacing: 0.15em;}
#school-features .l_col-2 .lead { color: var(--color-text); letter-spacing: 0.15em;}
#school-features .l_col-2 .lead+p {}
#school-features .l_col-2 figure {}
#school-features .l_col-2 figure img { width: 100%; max-width: calc(956px/2);}

#school-features .decoration { opacity: 0.1; color: var(--color-white);  line-height: 1; letter-spacing: 0.15em; z-index: -1; position: absolute;}



@media (min-width: 768px) {
  #school-features { padding-top: 35px; margin-bottom: 220px;}
  #school-features .contents-title { margin-bottom: 85px; display: flex; justify-content: flex-end; align-items: center;}
  #school-features .contents-title .title { margin-right: 15px; font-size: 3.6rem;}
  #school-features .contents-title p { font-size: 1.8rem;}
  #school-features .l_col-2 .title { margin-bottom: 60px; font-size: 2.4rem;}
  #school-features .l_col-2 .lead { font-size: 2rem;}

  #school-features .decoration { font-size: 16rem; left: 0; bottom: -117px;}
}

@media (max-width: 767px) {
  #school-features { padding-top: 25px; margin-bottom: 200px;}
  #school-features::before { width: 100%;}
  #school-features::after { left: 0; right: auto; width: 100%;}
  #school-features .contents-title { text-align: center; margin-bottom: 70px;}
  #school-features .contents-title .title { font-size: 2.8rem; margin-bottom: 10px;}
  #school-features .contents-title p { font-size: 1.3rem;}
  #school-features .l_col-2 .text { margin-bottom: 50px;}
  #school-features .l_col-2 .title { font-size: 2rem; margin-bottom: 30px;}
  #school-features .l_col-2 .lead { font-size: 1.8rem;}

  #school-features .decoration { font-size: 4.5rem; left: 0; bottom: -100px;}
}



/*------------------------------------------------------

  how-to-study

------------------------------------------------------*/
#how-to-study {}
#how-to-study .contents-title { background: url(../top/st_how-to-study.jpg) no-repeat center center / cover; text-align: center;}
#how-to-study .contents-title .title { color: var(--color-text); line-height: 1.1; letter-spacing: 0.15em; margin-bottom: 10px;}
#how-to-study .contents-title p { color: #013581;  line-height: 1.4; letter-spacing: 0.15em;}

#manabi {}
#manabi figure {}
#manabi figure img {}
#manabi .text {}
#manabi .title { color: var(--color-heading2); line-height: 1; letter-spacing: 0.15em; margin-bottom: 30px;}
#manabi .lead { color: var(--color-text); line-height: 1.4; letter-spacing: 0.15em; margin-bottom: 40px;}
#manabi .lead+p {}


#michisuji { position: relative; }
#michisuji::before { content: ""; position: absolute; right: 0; left: calc(50% - 580px); top: 0; background-color: #D7EEFB; height: 100%; z-index: -1; }
#michisuji .container {}
#michisuji .title { color: var(--color-heading2); line-height: 1; letter-spacing: 0.15em; }
#michisuji .lead { color: var(--color-text); line-height: 1.4; letter-spacing: 0.15em; }
#michisuji dl {}
#michisuji dl div { border-top: 1px solid var(--color-white); border-bottom: 1px solid var(--color-white);}
#michisuji dl dt { color: var(--color-text); border-bottom: 1px solid var(--color-white); background: url(../top/icon_point1.png) no-repeat 5px 5px / calc(129px/2) auto; position: relative;}
#michisuji dl dd { color: var(--color-text); font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.15em; display: none;}

#michisuji dl div:nth-child(2) dt { background: url(../top/icon_point2.png) no-repeat 5px 5px / calc(129px/2) auto;}
#michisuji dl div:nth-child(3) dt { background: url(../top/icon_point3.png) no-repeat 5px 5px / calc(129px/2) auto;}
#michisuji dl div:nth-child(4) dt { background: url(../top/icon_point4.png) no-repeat 5px 5px / calc(129px/2) auto;}
#michisuji dl div:not(:last-child) { margin-bottom: 8px;}

#michisuji .more { position: absolute; width: 18px; height: 18px; top: calc(50% - 9px); right: 10px;}
#michisuji .more span { position: absolute; width: 100%; height: 2px; background-color: #00CB7B; left: 0; top: calc(50% - 1px); transition: all 0.2s;}
#michisuji .more span:nth-child(2) { transform: rotate(90deg);}
#michisuji .more.open span:nth-child(2) { transform: rotate(0deg);} 
#michisuji .more.open span:nth-child(1) { opacity: 0;}


#style { position: relative;}
#style::before { content: ""; position: absolute; left: 0; right: calc(50% - 580px); top: 0; background-color: #DEF8F5; height: 100%; z-index: -1;}
#style .container {}
#style .title { color: var(--color-heading2);  line-height: 1; letter-spacing: 0.15em; }
#style .lead { color: var(--color-text); line-height: 1.4; letter-spacing: 0.15em; }
#style ul { padding-left: 25px;}
#style ul li { position: relative;}
#style ul li::before { content: ""; width: 15px; height: 15px; background-color: #BCF15F; border-radius: 50%; position: absolute; left: -25px; top: calc((0.5em * 1.6) - 9px);}
#style figure { max-width: calc(1774px/2); margin-left: auto; margin-right: auto; margin-bottom: 20px;}
#style figure img {}
#style .text {}
#style .text p {}


@media (min-width: 768px) {
  #how-to-study .contents-title { height: 320px; padding-top: 120px; margin-bottom: 100px;}
  #how-to-study .contents-title .title { font-size: 3.2rem;}
  #how-to-study .contents-title p { font-size: 1.8rem;}

  #manabi .title { font-size: 2.4rem;}
  #manabi .lead { font-size: 2.4rem;}


  #michisuji { margin-bottom: 50px;}
  #michisuji .container { padding: 60px 0 60px 60px;}
  #michisuji .container::before { content: ""; position: absolute; width: 20px; height: calc(100% - 40px); left: 20px; top: 20px; border-left: 20px dotted var(--color-white); }
  #michisuji .title { font-size: 2.4rem; margin-bottom: 40px;}
  #michisuji .lead { font-size: 2.4rem; margin-bottom: 40px;}
  #michisuji dl dt { padding: 25px 0 25px 110px; font-size: 2rem;}
  #michisuji dl dd { padding: 28px 0 28px 110px;}


  #style .container { padding: 60px 60px 60px 60px;}
  #style .container::before { content: ""; position: absolute; width: 20px; height: calc(100% - 40px); right: 20px; top: 20px; border-left: 20px dotted var(--color-white);}
  #style .title { font-size: 2.4rem; margin-bottom: 40px;}
  #style .lead { font-size: 2.4rem; margin-bottom: 30px;}
  #style ul { margin-bottom: 80px;}
  #style .text { text-align: center;}
  #style .text p { font-size: 1.4rem;}

}

@media (max-width: 767px) {
  #how-to-study .contents-title { height: 160px; padding-top: 40px; margin-bottom: 50px;}
  #how-to-study .contents-title .title { font-size: 2.8rem;}
  #how-to-study .contents-title p { font-size: 1.6rem;}
 
  #manabi { flex-direction: column-reverse;}
  #manabi figure { position: relative; width: calc(100% + 30px); left: -15px; margin-bottom: 0;}
  #manabi .title { font-size: 2rem;}
  #manabi .lead { font-size: 2rem;}

  #michisuji { padding: 50px 0; margin-bottom: 90px;}
  #michisuji .title { font-size: 2rem; margin-bottom: 20px;}
  #michisuji .lead { font-size: 2rem; margin-bottom: 30px;}
  #michisuji dl dt { padding: 20px 30px 20px 55px; font-size: 1.6rem; background-size: 44px auto; background-position: 0px 8px;}
  #michisuji dl dd { padding: 20px 15px 20px 55px;}
  #michisuji dl div:nth-child(2) dt,
  #michisuji dl div:nth-child(3) dt,
  #michisuji dl div:nth-child(4) dt { background-size: 44px auto; background-position: 0px 8px;}


  #style { padding: 50px 0;}
  #style .title { font-size: 2rem; margin-bottom: 20px;}
  #style .lead { font-size: 2rem; margin-bottom: 15px;}
  #style ul { margin-bottom: 50px;}
  #style figure { max-width: 282px; margin-left: auto; margin-right: auto;}
  #style .text p { font-size: 1.2rem;}

}






/*------------------------------------------------------

  support

------------------------------------------------------*/
#support { background-color: #FBD7D8; border-radius: 50px;}
#support figure { margin-bottom: 0; text-align: center;}
#support figure img { width: 100%;}
#support .text { color: var(--color-text); letter-spacing: 0.1em;}
#support .title { font-size: 2.4rem; line-height: 1;  }
#support p { font-size: 1.4rem; margin-bottom: 10px;}
#support .link { margin-bottom: 0;}
#support .link a { color: #0C01D9;}


@media (min-width: 768px) {
  #support { max-width: 1160px; padding: 35px; margin-bottom: 50px;}
  #support figure { width: 40%; max-width: 420px; }
  #support figure img {}
  #support .text { width: calc(60% - 20px);}
  #support .title { margin-bottom: 10px;}
  #support p {}
  #support .link {}
  #support .link a {}

}

@media (max-width: 767px) {
  #support { padding: 50px 20px; flex-direction: column-reverse;}
  #support figure { width: 100%; text-align: center; }
  #support figure img { max-width: 420px;}
  #support .text { width: 100%;}
  #support .title { margin-bottom: 20px;}
  #support p {}
  #support .link {}
  #support .link a {}
  
}