@charset "UTF-8";

/* ===================================
   リセット・ベース
=================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

html {
  height: 100%;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  line-height: 1.6;
  /* overflow-x: hidden;
  overflow-y: hidden; */
}
.zen-ant-re {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-ant-me {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-ant-bo {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-new-re {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-new-me {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-new-bo {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}



img {
  width: 100%;
}

/* PC/SP表示切替 */
.pc_only {
  display: block;
}

.sp_only {
  display: none !important;
}

a:hover img {
  opacity: 0.8;
}

.fade-up{

  opacity:0;

  transform:translateY(40px);

  transition:

    opacity .8s ease,

    transform .8s ease;

}
.fade-up.show{

  opacity:1;

  transform:translateY(0);

}
.delay1{
  transition-delay:.1s;
}

.delay2{
  transition-delay:.25s;
}

.delay3{
  transition-delay:.4s;
}

.delay4{
  transition-delay:.55s;
}


/* ===================================
   レスポンシブ対応
=================================== */

@media (max-width: 768px) {
  .pc_only {
    display: none !important;
  }

  .sp_only {
    display: block !important;
  }

  /* body {
    overflow: hidden !important;
  } */
}





/* ===================================
   ヘッダー
=================================== */


header {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

header .header_inner {
  /* max-width: 1830px; */
  padding: 0 3.23vw;
  height: 6.8vh;
  /* max-height: 110px; */
  margin: 0 auto;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

header .header_inner .logo {
  display: block;
  width: 24.5vw;
  max-width: 200px;
  height: auto;
  margin-top: 10px;
}


/* ===================================
   コンテナ
=================================== */


#mv{
position:fixed;

top:0;
left:0;

width:100%;

height:100svh;

z-index:1;
}

/* 背景 */

.mv_bg{
  position:absolute;
  inset:0;
  display:flex;
}

.bg_left{
  flex:1;
  background:#17c6f4;
}

.bg_right{
  flex:1;
  background:#ff2990;
}


/* ===================
人物
=================== */

:root{

--human-size:clamp(
  480px,
  min(48vw, 78vh),
  780px
);

--overlap:65px;

}


.mv_left,
.mv_right{
  position:absolute;
  bottom:0;
  width:var(--human-size);
}

.mv_left{

right:50%;

transform:translateX(75px);

opacity:0;

}


.mv_right{

left:50%;

transform:translateX(-75px);

opacity:0;

}


.mv_left img,
.mv_right img{

  width:100%;
  display:block;

}

.mv_left_inner,
.mv_right_inner{


transform:
translateY(-18px)
scale(1.065);

}


/* 高さ760px以下 */
@media (max-height:600px){

  :root{
    --human-size: clamp(
      340px,
      min(50vw,66vh),
      620px
    );
  }
.mv_left_inner,
.mv_right_inner{
  
transform:
translateY(-10px)
scale(1.065);
}

}


.mv_left_inner img,
.mv_right_inner img{

width:100%;

display:block;

}



.mv_parts01{

  position:absolute;

  left:60px;

  bottom:6%;

  width:min(13vw,164px);
  max-width: 100%;

  z-index:30;

  opacity:0;

}

.mv_parts02{

  position:absolute;

  right:5%;

  bottom:6%;

  width:min(15vw,200px);

  z-index:30;

  opacity:0;

}

.mv_parts01 img,
.mv_parts02 img{

  width:100%;

  display:block;

}

@keyframes humanIn{

0%{

opacity:0;

transform:
translateX(var(--x))
translateY(60px)
scale(.92);

}

100%{

opacity:1;

transform:
translateX(var(--x))
translateY(0)
scale(1);

}

}

@keyframes partsFade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@media (max-width:768px){

#mv{

  height:100svh;

  overflow:hidden;

}


.mv_left_inner{


transform:
translateY(-10px)
scale(0.98);

}

.mv_right_inner{


transform:
translateY(-10px)
scale(0.98);

}



/* SPは少し大きめ */

.mv_left,
.mv_right{

width:49vw;

}

.mv_left{

right:50.5%;
transform:translateX(24px);

}

.mv_right{

left:50%;
transform:translateX(-24px);

}



/* PC画像非表示 */

.pc_only{

  display:none !important;

}


/* SP画像表示 */

.sp_only{

  display:block;

  width:100%;

}


/* パーツは消す */

.mv_parts01,
.mv_parts02{

  display:none;

}


/* 上の余白を詰める */

.mv_left_inner,
.mv_right_inner{

scale:1.1;

}
}


.under {


position:relative;

margin-top:100svh;

z-index:100;

min-height:100vh;
}



/* ===================================
   message
=================================== */
#message {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 5% 0;
}

#message .message_message {
  width: 90%;
  max-width: 1366px;
  margin: auto;
  padding: 10% 2%;
  background-color: #fff;
  border: #000 2px solid;
}


#message h3 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 40px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}


#message p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: center;
}

@media (max-width: 768px) {
  #message {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#message .message_message {
  width: 90%;
  max-width: 1366px;
  margin: 0 auto 6%;
  padding: 10% 2%;
  background-color: #fff;
  border: #000 2px solid;
}


#message h3 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 30px;
  font-size: 6.8vw;
  line-height: 1.8;
}

#message h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#message p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 4.2vw;
  line-height: 1.8;
}

}


.contents_contents {
  background-color: #fafafa;
}

/* ===================================
   reason
=================================== */
#reason {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#reason h4 {
  width: 656px;
  max-width: 100%;
  margin: auto;
  padding: 120px 0 60px;
}

#reason h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#reason p {
  margin: 0;
  padding: 0 0 20px ;
  font-size: 20px;
  text-align: left;
}


.reason_item .reason_content01{
  background:#ff2e91;
}

.reason_item .reason_content02{
  background:#a862be;
}

.reason_item .reason_content03{
  background:#7376e2;
}

.reason_item .reason_content04{
  background:#00c7ff;
}

.reason_item {
  width: 800px;
  max-width: calc(100% - 32px);

  position: relative;

  margin: 0 auto 100px;

  border: 2px solid #000;

  box-sizing: border-box;
}

.reason_img img {
  width:100%;
  display:block;
}

/* 開くボタン */
.reason_toggle{
  width:50px;

  position:absolute;

  left:50%;
  bottom:-25px;

  transform:translateX(-50%);

  z-index:20;

  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}



.reason_toggle.open{
  width:50px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;

  position:absolute;
  left:50%;
  bottom:-25px;
  transform:translateX(-50%);
  z-index:10;
}

.reason_toggle.open img {
  width:100%;
}


/* アコーディオン本体 */
.reason_content{
  max-height:0;
  overflow:hidden;

  transition:
    max-height .5s ease,
    padding .5s ease;

  padding:0 70px;
}


/* 開いた状態 */
.reason_item.active .reason_content{
  border-top: #000 2px solid;
  max-height:1000px;
  padding:30px 70px;
}


/* 閉じるボタン */
.reason_toggle.close {

  display:block;

  width:50px;

  margin:0 auto 0;

  background:none;
  border:none;

  cursor:pointer;
}

.reason_toggle.close img {
  width:100%;
}

.re_read01 {
  width: 450px;
  max-width: 100%;
}
.re_read02 {
  width: 450px;
  max-width: 100%;
}
.re_read03 {
  width: 628px;
  max-width: 100%;
}
.re_read04 {
  width: 450px;
  max-width: 100%;
}


@media (max-width: 768px) {
  #reason {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#reason h4 {
  width: 90%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0 40px;
}


#reason h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#reason p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 20px ;
  font-size: 3.36vw;
}

/* 開くボタン */
.reason_toggle{
  width:36px;

  position:absolute;

  left:50%;
  bottom:-22px;

  transform:translateX(-50%);

  z-index:20;

  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}



.reason_toggle.open{
  width:36px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;

  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  z-index:10;
}

.reason_toggle.open img {
  width:100%;
}


/* アコーディオン本体 */
.reason_content{
  max-height:0;
  overflow:hidden;

  transition:
    max-height .5s ease,
    padding .5s ease;

  padding:0 70px;
}


/* 開いた状態 */
.reason_item.active .reason_content{
  border-top: #000 2px solid;
  max-height:1000px;
  padding:30px 24px 20px;
}


/* 閉じるボタン */
.reason_toggle.close {

  display:block;

  width:36px;

  margin:0 auto 0;

  background:none;
  border:none;

  cursor:pointer;
}

}


/* ===================================
   society
=================================== */
#society {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#society h4 {
  width: 864px;
  max-width: 100%;
  margin: auto;
  padding: 120px 0 60px;
}

#society h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 10px;
  font-size: 21px;
}

#society p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 18px;
  line-height: 1.8;
}

#society .society_society {
  width: 1000px;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#society .society_society ul {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#society .society_society ul li {
  width: 46%;
  max-width: 100%;
  margin: 0 auto 60px;
}

#society .society_society .society_border {
 border: #000 2px solid;
  border-top: none;
    padding: 16px 30px 20px;
    background-color: #fff;
}

#society .society_society p.read {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 17px;
  line-height: 1.8;
  min-height: 6.5em;
  border-bottom: #000 1px solid;
}

#society .society_society p.job01 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #ff2e91;
  font-size: 18px;
  line-height: 1.8;
}

#society .society_society p.job02 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #a862be;
  font-size: 18px;
  line-height: 1.8;
}


#society .society_society p.job03 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #7376e2;
  font-size: 18px;
  line-height: 1.8;
}


#society .society_society p.job04 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #00c7ff;
  font-size: 18px;
  line-height: 1.8;
}




@media (max-width: 768px) {
  #society {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#society h4 {
  width: 70%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0 40px;
}


#society h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 10px;
  font-size: 4.6vw;
}

#society p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 1.8vw;
  line-height: 1.8;
}


#society .society_society ul {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#society .society_society ul li {
  width: 90%;
  max-width: 100%;
  margin: 0 auto 60px;
}

#society .society_society .society_border {
 border: #000 2px solid;
  border-top: none;
    padding: 16px 16px 20px;
    background-color: #fff;
}

#society .society_society p.read {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 3.2vw;
  line-height: 1.8;
  min-height: 6.5em;
  border-bottom: #000 1px solid;
}

#society .society_society p.job01 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #ff2e91;
  font-size: 3.6vw;
  line-height: 1.8;
}

#society .society_society p.job02 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #a862be;
  font-size: 3.6vw;
  line-height: 1.8;
}


#society .society_society p.job03 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #7376e2;
  font-size: 3.6vw;
  line-height: 1.8;
}


#society .society_society p.job04 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 5px;
  color: #00c7ff;
  font-size: 3.6vw;
  line-height: 1.8;
}

}


/* ===================================
   couse
=================================== */
#couse {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#couse h4 {
  width: 486px;
  max-width: 100%;
  margin: auto;
  padding: 120px 0 60px;
}

#couse h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#couse p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#couse .couse_couse {
  width: 1000px;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#couse .couse_couse ul {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#couse .couse_couse ul li {
  width: 46%;
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 0;
  border: #000 2px solid;
}

#couse .couse_couse ul li.couse01 {
  margin: 0 auto 40px;
  padding: 0;
  background-color: #ff2e91;
} 

#couse .couse_couse ul li.couse02 {
  margin: 0 auto 40px;
  padding: 0;
  background-color: #a862be;
} 

#couse .couse_couse ul li.couse03 {
  margin: 0 auto 40px;
  padding: 0;
  background-color: #7376e2;
} 

#couse .couse_couse ul li.couse04 {
  margin: 0 auto 40px;
  padding: 0;
  background-color: #00c7ff;
} 

#couse .couse_couse .couse_op01, 
#couse .couse_couse .couse_op02,
#couse .couse_couse .couse_op03,
#couse .couse_couse .couse_op04 {
  margin: auto;
  padding: 5% 10% 10%;
} 


.course_item{

  width:46%;

  position:relative;

  border:2px solid #000;

  margin-bottom:60px;

  list-style:none;

  box-sizing:border-box;

}

.course_img img{

  width:100%;

  display:block;

}

.course_toggle{

  position:absolute;

  left:50%;

  bottom:-25px;

  transform:translateX(-50%);

  width:50px;

  padding:0;

  border:none;

  background:none;

  cursor:pointer;

  z-index:10;

}

.course_toggle img{

  width:100%;

  display:block;

}

.course_content{

  max-height:0;

  overflow:hidden;

  transition:

    max-height .5s ease,

    padding .5s ease;

  padding:0;

}

.course_item.active .course_content{

  max-height:1000px;

  padding:5% 10% 10%;

}

.course_content img{

  width:100%;

  display:block;

}

.course01{
  background:#ff2e91;
}

.course02{
  background:#a862be;
}

.course03{
  background:#7376e2;
}

.course04{
  background:#00c7ff;
}

@media (max-width: 768px) {
  #couse {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#couse h4 {
  width: 70%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0 40px;
}

#couse h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#couse p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#couse .couse_couse ul{

  display:block;

}


#couse .couse_couse ul li {
  width: 90%;
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 0;
  border: #000 2px solid;
}


.course_item{

  width:100%;

  margin:0 auto 50px;

}

.course_item.active .course_content{

  max-height:1000px;

  padding:5% 5% 10%;

}

.course_toggle{

  width:42px;

  bottom:-21px;

}

}


/* ===================================
   nippuku
=================================== */
#nippuku {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#nippuku h4 {
  width: 864px;
  max-width: 100%;
  margin: auto;
  padding: 160px 0 60px;
}

#nippuku h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 32px;
  text-align: center;
}

#nippuku .katei {
  width: 820px;
  max-width: 100%;
  margin: 30px auto 20px;
  padding: 15px 0;
  border: #000 2px solid;
  background-color: #fff;
}

#nippuku .katei_katei  {
  width: 100%;
  max-width: 100%;
  margin: 30px auto 20px;
  padding: 20px 72px;
}

#nippuku .katei_katei .katei_100read {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.8;
}

#nippuku .katei_katei ul {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

#nippuku .katei_katei ul li {
  width: 47%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#nippuku .katei_katei ul li .katei_100jikan01 {
  width: 270px;
  max-width: 100%;
  margin: 20px 0;
  padding: 0;
}

#nippuku .katei_katei ul li .katei_100jikan02 {
  width: 225px;
  max-width: 100%;
  margin: 20px 0;
  padding: 0;
}

#nippuku .katei_katei ul li p {
  font-size: 16px;
  line-height: 1.8;
}







#nippuku .daigakuin {
  width: 820px;
  max-width: 100%;
  margin: 30px auto 80px;
  padding: 60px 60px;
  border: #000 2px solid;
  background-color: #fff;
}



#nippuku .waku {
  width: 820px;
  max-width: 100%;
  margin: 30px auto 80px;
  padding: 60px 72px;
  border: #000 2px solid;
  background-color: #fff;
}

#nippuku p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#nippuku .daigakuin h6 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#nippuku .daigakuin .title {
  padding: 0px 10px 1px;
  color: #000;
  font-size: 22px;
  background-color: #ff2e91;
  letter-spacing: 0.05em;
}

#nippuku .daigakuin .shinrired {
  padding: 2px 0 0 5px;
  font-size: 18px;
  color: #ff2e91;
}
#nippuku .daigakuin .senkou {
  padding: 0px 5px;
  font-size: 18px;
}


#nippuku .semi dl {
  width: 100%;
  max-width: 100%;
  margin: 30px auto 30px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#nippuku .semi dt {
  width: 76%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 4% 0 0;
}

#nippuku .semi .title {
  margin: auto;
  padding: 1px 6px;
  color: #000;
  font-size: 14px;
  background-color: #00c7ff;
}


#nippuku p.read {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 0;
  font-size: 17px;
  line-height: 1.88;
}

#nippuku .semi dd {
  width: 24%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}



#nippuku .voice .voice_title {
  margin: auto;
  padding: 0;
}

#nippuku .voice .title {
  margin: auto;
  padding: 1px 6px;
  color: #000;
  font-size: 14px;
  background-color: #00c7ff;
}

#nippuku .voice_voice {
  width: 100%;
  max-width: 100%;
  margin: -15px auto 0;
  padding: 20px 0 0;
  background-color: #f1f1f1;
}



#nippuku .voice dl {
  width: 100%;
  max-width: 100%;
  margin: 10px auto 10px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#nippuku .voice dt {
  width: 35%;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.8;
}





#nippuku .voice .title {
  margin: auto;
  padding: 1px 6px;
  color: #000;
  font-size: 14px;
  background-color: #00c7ff;
}

#nippuku .voice p.seminar {
  margin: auto;
  padding: 5px 0 0;
  font-size: 12px;
  line-height: 1.3;
}

#nippuku .voice p.name {
  margin: auto;
  padding: 0 0 0;
  font-size: 12px;
  line-height: 1.3;
}

#nippuku .voice p.prof {
  margin: auto;
  padding: 0 0 0;
  font-size: 10px;
  line-height: 1.3;
}

#nippuku .voice .shinrired {
  color: #ff2e91;
  padding: 0;
  font-size: 12px;
}

#nippuku .voice dd {
  width: 65%;
  max-width: 100%;
  margin: 0;
  padding: 10px 20px 0 10px;
  font-size: 15px;
  line-height: 1.6;
}



#nippuku .nintei {
  font-size: 17px;
  line-height: 1.8;
}



#nippuku .teacher {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#nippuku .teacher li {
  width: 211px;
  max-width: 100%;
  margin: 0;
  padding: 0;
}


#nippuku .kiduki_kiduku {
  width: 820px;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#nippuku .kiduki_kiduku li {
  width: 48.5%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 20px 0;
}

@media (max-width: 768px) {
  #nippuku {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#nippuku h4 {
  width: 80%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0 40px;
}

#nippuku h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 5.2vw;
  text-align: center;
}


#nippuku .katei {
  width: 90%;
  max-width: 100%;
  margin: 30px auto 20px;
  padding: 10px 0;
  border: #000 1px solid;
  background-color: #fff;
}

#nippuku .katei_katei  {
  width: 100%;
  max-width: 100%;
  margin: 30px auto 20px;
  padding: 20px 15px;
}

#nippuku .katei_katei .katei_100read {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0;
  font-size: 3.2vw;
  line-height: 1.8;
}

#nippuku .katei_katei ul {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

#nippuku .katei_katei ul li {
  width: 47%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#nippuku .katei_katei ul li .katei_100jikan01 {
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
  padding: 0;
}

#nippuku .katei_katei ul li .katei_100jikan02 {
  width: 84%;
  max-width: 100%;
  margin: 10px 0;
  padding: 0;
}

#nippuku .katei_katei ul li p {
  font-size: 3.2vw;
  line-height: 1.8;
}


#nippuku .daigakuin {
  width: 90%;
  max-width: 100%;
  margin: 15px auto 40px;
  padding: 20px 15px;
  border: #000 1px solid;
  background-color: #fff;
}



#nippuku .waku {
  width: 90%;
  max-width: 100%;
  margin: 15px auto 40px;
  padding: 20px 15px;
  border: #000 1px solid;
  background-color: #fff;
}

#nippuku .daigakuin h6 {
  margin: 0 auto 10px;
  padding: 0;
}



#nippuku .daigakuin h6.title {
  margin: 0 auto 10px;
  padding: 0px 10px 1px;
  color: #000;
  font-size: 4.2vw;
  background-color: #ff2e91;
  letter-spacing: 0.05em;
}

#nippuku .daigakuin .shinrired {
  padding: 2px 0 0 5px;
  font-size: 3.2vw;
  color: #ff2e91;
}
#nippuku .daigakuin .senkou {
  padding: 0px 5px;
  font-size: 3.2vw;
}


#nippuku .semi dl {
  width: 100%;
  max-width: 100%;
  margin: 10px auto 30px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#nippuku .semi dt {
  width: 64%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 4% 0 0;
}

#nippuku p.semi {
  width: 100%;
  margin: 2% auto;
  padding: 1px 6px;
  color: #000;
  font-size: 3.6vw;
  background-color: #00c7ff;
}

#nippuku .semi .title {
  width: 100%;
  margin: 2% auto;
  padding: 1px 6px;
  color: #000;
  font-size: 3.6vw;
  background-color: #00c7ff;
}


#nippuku p.read {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 0;
  font-size: 2.8vw;
  line-height: 1.88;
}

#nippuku .semi dd {
  width: 36%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}



#nippuku .voice .voice_title {
  margin: auto;
  padding: 0;
}

#nippuku .voice .title {
  margin: auto;
  padding: 1px 6px;
  color: #000;
  font-size: 14px;
  background-color: #00c7ff;
}

#nippuku .voice_voice {
  width: 100%;
  max-width: 100%;
  margin: -15px auto 0;
  padding: 20px 0 0;
  background-color: #f1f1f1;
}



#nippuku .voice dl {
  width: 100%;
  max-width: 100%;
  margin: 10px auto 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
#nippuku .voice dt {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0px 15px 5px;
  font-size: 14px;
  line-height: 1.8;
}



#nippuku .voice .title {
  margin: auto;
  padding: 1px 6px;
  color: #000;
  font-size: 14px;
  background-color: #00c7ff;
}

#nippuku .voice p.seminar {
  margin: auto;
  padding: 0 0 0;
  font-size: 12px;
  line-height: 1.1;
}

#nippuku .voice p.prof {
  margin: auto;
  padding: 0 0 0;
  font-size: 10px;
  line-height: 1.1;
}

#nippuku .voice .shinrired {
  color: #ff2e91;
}

#nippuku .voice dd {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 15px 15px;
  font-size: 3.1vw;
  line-height: 1.6;
}



#nippuku .nintei {
  font-size: 17px;
  line-height: 1.8;
}

#nippuku .nintei p {
  padding: 0px 20px;
  font-size: 2.8vw;
  line-height: 1.8;
}



#nippuku .teacher {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#nippuku .teacher li {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 30px;
}


#nippuku .kiduki_kiduku {
  width: 90%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#nippuku .kiduki_kiduku li {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 20px 0;
}

}


.card-gallery{
  width:100%;
  overflow:hidden;
  margin:10px auto 80px;

  position:relative;   /* ←追加 */
}

.card-track{
  overflow:hidden;
  width:100%;

  position:relative;
}

/* タイトル */
.card-gallery .card_title{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  z-index:10;       /* スライドより手前 */

  margin:0;

  width:316px;
  max-width:316px;
}

.card-gallery .card_title img{
  width:100%;
  display:block;
}

.card-slide{
  position:relative;
  z-index:1;

  display:flex;

  width:max-content;

  animation:slideLoop 32s linear infinite;

  padding:0;
  margin:0;
}

.card-slide li{

  list-style:none;

  flex-shrink:0;

  width:332px;

  margin-right:20px;
}

.card-slide img{

  width:100%;

  display:block;
}

.card-slide:hover{

  animation-play-state:paused;

}

/* 左に流れる */
@keyframes slideLoop{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(calc(-50%));
  }

}
@media(max-width:768px){

  .card-gallery .card_title{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  z-index:10;       /* スライドより手前 */

  margin:0;

  width:50%;
  max-width:316px;
}

.card-slide li{

  width:220px;

  margin-right:16px;

}

.card-slide{

  animation:slideLoop 18s linear infinite;

}

}


/* ===================================
   taiken
=================================== */
#taiken {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#taiken h4 {
  width: 768px;
  max-width: 100%;
  margin: auto;
  padding: 120px 0 60px;
}

#taiken .waku {
  width: 1020px;
  max-width: 100%;
  margin: auto;
  padding: 72px;
  border: #000 2px solid;
  background-color: #fff;
}

#taiken h5 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 5px 0 3px;
  background-color: #000;
  color: #fff;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0.1em;
}

#taiken h5.jisseki {
  width: 100%;
  max-width: 100%;
  margin: 40px auto 20px;
}

#taiken h6 {
  width: 100%;
  max-width: 100%;
  margin: 40px auto 20px;
  padding: 5px 0 3px;
  border: #000 1px solid;
  color: #000;
  font-size: 19px;
  text-align: center;
}

#taiken p.shikaku {
  margin: auto;
  padding: 15px 0;
  font-size: 18px;
}
#taiken p.shikaku2 {
  margin: auto;
  padding: 15px 0;
  font-size: 18px;
}

#taiken dl {
  width: 100%;
  max-width: 100%;
  margin: 40px auto 40px;
  padding: 20px 20px;
  border: #000 1px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#taiken dt {
  width: 30%;
  max-width: 100%;
  margin: auto;
  padding: 0 20px;
  text-align: center;
}
#taiken dt p {
  font-size: 14px;
  padding: 0;
  text-align: center;
}
#taiken dt p.taiou {
  font-size: 19px;
  padding: 0;
  text-align: center;
}
#taiken p.cotion {
  font-size: 13px;
  padding: 0;
  text-align: left;
}
#taiken .exam {
  font-size: 0.7em;
	vertical-align: top;
}



#taiken dd {
  width: 70%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 0 30px;
  border-left: #000 1px solid;
  font-size: 15px;
  line-height: 1.8;
}



@media (max-width: 768px) {
  #taiken {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#taiken h4 {
  width: 70%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0 40px;
}


#taiken .waku {
  width: 90%;
  max-width: 100%;
  margin: auto;
  padding: 20px 15px;
  border: #000 2px solid;
  background-color: #fff;
}

#taiken h5 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 3px 0 3px;
  background-color: #000;
  color: #fff;
  font-size: 3.6vw;
  text-align: center;
}

#taiken h5.jisseki {
  width: 100%;
  max-width: 100%;
  margin: 40px auto 20px;
}

#taiken h6 {
  width: 100%;
  max-width: 100%;
  margin: 20px auto 15px;
  padding: 5px 0 3px;
  border: #000 1px solid;
  color: #000;
  font-size: 3.0vw;
  text-align: center;
}

#taiken p.shikaku {
  margin: auto;
  padding: 5px 0;
  font-size: 2.4vw
}
#taiken p.shikaku2 {
  margin: auto;
  padding: 5px 0;
  font-size: 3.2vw
}

#taiken dl {
  width: 100%;
  max-width: 100%;
  margin: 30px auto 30px;
  padding: 10px 0;
  border: #000 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#taiken dt {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 5px 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#taiken dt p {
  font-size: 3.0vw;
  padding: 0;
  text-align: center;
}
#taiken dt p.taiou {
  font-size: 3.0vw;
  padding: 0;
  text-align: center;
}

#taiken p.cotion {
  font-size: 2.2vw;
  padding: 0;
  text-align: left;
  text-indent: -3em;
  padding-left: 3em;

}
#taiken .exam {
  font-size: 0.7em;
	vertical-align: top;
}


#taiken dd {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 20px 15px;
  border-left: none;
  border-top: #000 1px solid;
  font-size: 2.8vw;
  line-height: 1.8;
}

#taiken .saki {
  font-size: 2.8vw;
}



}


/* ===================================
   manabi
=================================== */
#manabi {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#manabi h4 {
  width: 660px;
  max-width: 100%;
  margin: auto;
  padding: 120px 0 60px;
}

#manabi .waku {
  width: 1020px;
  max-width: 100%;
  margin: auto;
  padding: 72px;
  border: #000 2px solid;
  background-color: #fff;
}

#manabi h5 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 30px;
  padding: 5px 0 3px;
  background-color: #000;
  color: #fff;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0.1em;
}

#manabi p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#manabi dl {
  width: 100%;
  max-width: 100%;
  margin: 60px auto 60px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#manabi dt {
  width: 70%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 4% 0 0;
}
#manabi p.title {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #00c7ff;
  font-size: 20px;
}
#manabi p.read {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 17px;
  line-height: 1.88;
}
#manabi dd {
  width: 38%;
  max-width: 294px;
  margin: auto;
  padding: 0;
}


#manabi .shisetsu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
#manabi .shisetsu li {
  width: 48%;
  padding-bottom: 30px;
}
#manabi p.caption {
  color: #00c7ff;
  font-size: 16px;
}




@media (max-width: 768px) {
  #manabi {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#manabi h4 {
  width: 80%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0 40px;
}

#manabi h5 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 30px;
  padding: 5px 0 3px;
  background-color: #000;
  color: #fff;
  font-size: 3.6vw;
  text-align: center;
}

#manabi p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}


#manabi .waku {
  width: 90%;
  max-width: 100%;
  margin: auto;
  padding: 20px 15px;
  border: #000 2px solid;
  background-color: #fff;
}



#manabi dl {
  width: 100%;
  max-width: 100%;
  margin: 40px auto 40px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#manabi dt {
  width: 70%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 4% 0 0;
}
#manabi p.title {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #00c7ff;
  font-size: 3.2vw;
}
#manabi p.read {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 2.8vw;
  line-height: 1.88;
}
#manabi dd {
  width: 38%;
  max-width: 294px;
  margin: 0;
  padding: 0;
}


#manabi .shisetsu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
#manabi .shisetsu li {
  width: 48%;
  padding-bottom: 20px;
}
#manabi p.caption {
  color: #00c7ff;
  font-size: 2.8vw;
}


}


/* ===================================
   footer
=================================== */


footer {
 width: 100%;
 margin: auto;
 padding: 120px 0 0;
 background-color: #fafafa;
 position: relative;
 z-index: 20;
}

footer .box-content {
  width: 900px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
  padding: 10px 0 60px ;
}
footer .box-content a {
  
  width: 48%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 40px;
}

footer .box-content a:last-child {
  
  width: 100%;
  max-width: 100%;
}


footer .box-content a{
  position:relative;
  display:block;
  overflow:visible;
}

footer .box-content a img{
  width:100%;
  display:block;
  position:relative;
  z-index:1;
}

footer .box-content a::after{
  content:"";
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  border:3px solid;
  box-sizing:border-box;

  z-index:2;
  pointer-events:none;

  /* 初期位置 */
  transform:translate(12px,12px);

  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

footer .box-content a:hover::after{
  transform:translate(0,0);
}

footer .box-content a:nth-child(1)::after{
  border-color:#B23D74;
}

footer .box-content a:nth-child(2)::after{
  border-color:#008CC7;
}

footer .box-content a:nth-child(3)::after{
  border-color:#00A89A;
}

footer .box-content a:hover::after{
  transform:translate(0,0);
}

@media (max-width: 768px) {
  footer .box-content {
  
  width: 90%;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
}

footer .box-content a {
  
  width: 100%;
  max-width: 100%;
  padding: 0;
}

footer .box-content a::after{
    transform:translate(8px,8px);
    border-width:2px;
  }

  footer .box-content a:hover::after{
    transform:translate(0,0);
  }

}






.footer-logo {
  width: 100%;
  margin: auto;
  padding: 50px 0 40px;
  text-align: center;
  background-color: #000
}

.footer-logo img.m-auto  {
  width: 302px;
}


.footer_recruit {
    padding: 30px;
    background-color: #f3f2f2;
    position: relative;
    z-index: 20;
}

.footer_recruit img {
    width: 258px;
}




/* YouTube専用モーダル */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-modal.active {
  display: flex;
}

/* 閉じるボタン（枠の右上外側へ） */
.video-close {
  position: absolute;
  top: -40px;          /* 枠の上に20pxはみ出す（調整可能） */
  right: -40px;        /* 枠の右に20pxはみ出す（調整可能） */
  width: 44px;
  height: 44px;
  background: none;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  line-height: 44px;   /* 縦中央揃え */
  text-align: center;
  cursor: pointer;
  z-index: 10010;
  transition: all 0.2s ease;
}

.video-close:hover {
  background: #000;
  transform: scale(1.12);
}

/* モーダルの中身（動画枠） */
/* 動画枠本体 */
.video-modal-content {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #000;
  border-radius: 12px;
  /* overflow: hidden;  ← これをコメントアウトまたは削除 */
  overflow: visible;     /* ← これに変更（はみ出しを許可） */
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}


/* 動画ラッパー（比率維持） */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 既存の #movie スタイルはそのまま */
#movie {
  width: 1020px;
  max-width: 96%;
  margin: auto;
  padding: 40px 0 30px;
  text-align: center;
}

@media (max-width: 768px) {
  .video-close {
    top: -18px;
    right: -18px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
  }
}