@charset "SHIFT-JIS";
                         /* @charset="UTF-8"; */

/* リセットCSS */

h1,h2,h3,h4,h5,h6,p,ul{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

/* 画面領域１００％ */
body{
    font-size:14px;
    /*font-family:"M PLUS Rounded 1c";*/
    background-color: #ffffff;
    width:100%;
    margin:auto;
    padding:0;
    box-sizing: border-box;
    }

/*-----------------------------------------------------------------*/
.header00{
  display: none;
}


/*-----------------------------------------------------------------*/
#header{
    position:relative; 
    width: 100%; 
    /* height: 50px; */ 
    background:#cc99cc;   /* background-color: gold;*/ 
    box-sizing: border-box;
    top: 0; 
    left: 0; 
    display: flex; 
    text-align: center; 
    z-index: 1;
    justify-content:center; 
}

.header_s{
  display: flex; 
  align-items:center;text-align: center; 
  flex-direction:row;
  flex-wrap: nowrap;
  /*max-width:960px;*/
  width: 100%;
  justify-content:space-between; 
}

.header-logo{
  /* height:10px;   060324  */  
   padding: 15px 10px 10px 20px;
}

.header-logo img{
    max-width:100%;
    width:auto;
    height:35px;
}

/*--------------------------------------------------------------------*/
.come p{
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "M PLUS Rounded 1c";
}

/*---------------- ボタン　0 --------------*/
.btn000 a{
  background:#ffffff;
  position:relative;
  display:flex;
  justify-content:space-around;
  align-items:center;
  text-align: center;
  margin-right: 10px;
  max-width:250px;
  padding:5px 15px;
  /* color:#ff0000; */
  font-size: 1.1rem; font-family: "M PLUS Rounded 1c";
  transition:0.3s ease-in-out;
 
  z-index:0;
  text-decoration: none;
 /* border-left:solid 2px #000000; */
}

.btn000 a:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  display:block;
  background:#363636;
  transition:0.3s;
  left:0;
}
.btn000 a:hover{
   color:#cc99cc;
   font-weight: bold;  
}
.btn000 a:hover:before{
  width:100%;
  z-index:-1;
}

/*---------------------------------- ボタン　1 -------------------------------*/

@media screen and (max-width:1100px){
a {
font-family: sans-serif;
text-decoration: none;
}
.come p{
  font-size: 1.2rem;
}


/*------------------- 20251222 ---------------*/
.header00{
 display:flex;

    height: 56px;
    
    bottom:0%;

    margin-left: auto; 
    margin-right: 20px;
    position:fixed;
    z-index: 10;
    width: 100% ;
    border: none;
    background-color:#8e8fff;
    cursor: pointer;
   /* background-color: transparent; */
}
/*------------------- 20251222 ---------------*/



.hamburger {
    display: block;
    height: 56px;
    
    bottom:0%;

    margin-left: auto; 
    margin-right: 20px;
    position:fixed;
    z-index: 10;
    width:  60px ;
    border: none;
    background-color:#ff00ff;
    cursor: pointer;
   /* background-color: transparent; */
}
.hamburger.-active .hamburger__line {
    background-color: transparent;
}
.hamburger.-active .hamburger__line::before {
    top: 0;
    transform: rotate(45deg);
}
.hamburger.-active .hamburger__line::after {
    top: 0;
    transform: rotate(-45deg);
}
.hamburger.-active .hamburger__text::before {
  content: '閉じる';
}
.hamburger__line {
    display: block;
    height: 2px;
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    background-color: #172e59;
    transition: 0.4s;
}
.hamburger__line:before,
.hamburger__line:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: #172e59;
    transition: inherit;
}
.hamburger__line:before {
    top: -6px;
}
.hamburger__line:after {
    top: 6px;
}
.hamburger__text {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.hamburger__text::before {
    content: "メニュー";
    text-align: center;
    color: #172e59;
    font-size: 10px;
    font-weight: 900;
}

.header-logo img{
    max-width:100%;
    width:auto;
    height:25px;
}



.header__nav-area {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 9;
    height: 100vh;
    width: 100%;
    visibility: hidden;
    padding-top: 60px;
    background-color: #ffffff;
    transition: 0.4s;
}
.header__nav-area.-active {
    left: 0;
  visibility: visible;
}
.global-navigation {
    padding-top: 0;
    padding-right: 25px;
    padding-bottom: 120px;
    padding-left: 25px;
}

/* ------------------------------------------------------------------- */
.global-navigation > .header-logo{
    padding-left: 10px;
    padding-bottom: 25px; 
}
/* ------------------------------------------------------------------- */


.global-navigation__list > li {
    padding:  0 0 20px 20px;
    border-bottom: 2px solid #e7e9ee;

    list-style: none;
}
.global-navigation__list > li + li {
  margin-top: 20px;
}
.global-navigation__link {
  display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0000ff;
    font-weight: 900;
    transition: color 0.4s;
    font-size: 0.875rem;
}
.global-navigation__link.-accordion {
    position: relative;
    background: none;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0;
}
.global-navigation__link.-accordion::after {
    content: '';
    display: block;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 5px;
    width: 2px;
    background-color: #ed3242;
    transform: translateY(-50%);
    transition: transform 0.4s;
}
.global-navigation__link.-accordion::before {
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    background-color: #ed3242;
    transform: translateY(-50%);
    
}
.global-navigation__link.-active::after {
  transform: translateY(-50%) rotate(-90deg);
}
.accordion {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: 0.4s;
}
.accordion.-active {
    height: auto;
    padding-top: 30px;
    visibility: visible;
}
.accordion__list li {
    font-size: 0.75rem;
}
.accordion__list li + li {
     margin-top: 21px;
}
.accordion__link {
    color: #172e59;
}





#header{
  width: 100%;
  height: 50px;
}








}


/*---------------- ライン　1 --------------*/
hr.line01 {
    border: none;
    border-top: 1px solid #bbbbbb;
    width: 99%;
    margin: 0 auto;
}

/*---------------- noteロゴ　1 --------------*/
.note_wrap{
  display: flex;
  padding:0 30px 0 30px;
  align-items: center;
}
.note_logo{
   padding:0;
}
.note_logo img{
    height:30px; 
    padding-top:5px ;
 transition: transform 0.3s ease; /* アニメーションの滑らかさ */
}
.note_logo a{
   text-decoration: none;
   align-items: center;
   margin: 5px 0; 
}


/*---*/
/*------------------------------表示領域01------------------------------*/
.section_1{
   width: 100%;
   background-color: #ffffff; 
  }

.section_01{
  display: flex;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
 /* max-width:960px; */
  margin: 0 auto;
  
  justify-content: center;
}
.section_01 a{
    margin:auto;
    padding: 20px 50px;
    color: rgb(0, 0, 0);
    
    display: flex;
    /*border-left: 1px solid #bbbbbb;*/
}

@media screen and (max-width:1100px){

    .section_01{
      display: none;
    }

    .section_01 a{
    margin:auto;
    padding: 10px 15px;
    color: rgb(0, 17, 255);
    font-size: 0.8em;
    width: 150px;
    display: flex;
    }
}

/*-------------------------------動画設定-------------------------------*/
.vtr{
 margin: 10px auto;

}

.video_r{
    width:100%;
    max-width:100%;
    position:relative;
    overflow:hidden;
    z-index:-99;
    
    filter:opacity(80%);
}

.v_background{
    width:auto;background-color:#000000;
    left:50%;top:50%;
    position:relative;
    transform:translatex(-50%) translatey(0%);
    /*  padding-top:105px;  */ 
}
/*
.video_r::after{
    content:'';
    width:100%;
    height:100%;
    background-color:rgba(255, 252, 158, 0.515);
    background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--bb)2px,var(--bb)4px );
    display:block;
    position:absolute;
    left:0;
    top:0;
} 
*/
.video_r video{
    max-width:100%;
    max-height:100%;
    width:960px;
    height:auto;
    position:relative;
    top:50%;
    left:50%;
    transform:translatex(-50%) translatey(0%);
}


/*------------------------------- メイン領域 -------------------------------- */
h3{
 margin-top: 20px;
 padding:0.8rem 1.5em; /*上下左右の余白*/
 background:#ffddff; /*背景色*/
 border-bottom:solid 3px #cc99cc; /*線の種類 太さ 色*/
font-family: "M PLUS Rounded 1c";

}






.home{
  margin: 20px auto;
}

.icon-grid{
  display: grid;
  /*grid-template-columns: repeat(4, 1fr); /* **列数** */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 50px 60px; /* **アイコン間隔** */
  padding: 20px;
  max-width: 999px;
  margin: 0 auto;
}

.icon{
  /*width: 84px;*/
  height: auto;
  display: grid;
  grid-template-rows: 1fr auto; /* 上が伸びる領域、下がラベルの高さ */
  justify-items: center;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  background: linear-gradient(135deg,#f9fcff,#cc99cc);
  color: #000000;

  cursor: pointer;
  transition: transform 0.3s ease; /* アニメーションの滑らかさ */

}

.icon{
  /*width: 84px;*/
  height: auto;
  display: grid;
  grid-template-rows: 1fr auto; /* 上が伸びる領域、下がラベルの高さ */
  justify-items: center;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  background: linear-gradient(135deg,#f9fcff,#cc99cc);
  color: #000000;

  cursor: pointer;
  transition: transform 0.3s ease; /* アニメーションの滑らかさ */

}






.img_1{ 
  font-size: 36px;
 }
.icon img{ 
  max-width: 120px;
  height: auto;
  object-fit: cover;
 }
 
.label{
  align-self: end; /* 下段に配置 */
  font-size: 16px;
  padding-top: 6px;
}

a.icon{
  text-decoration: none;
}
  /*.icon{
  text-align: center;
  text-decoration: none;
  color: #fff;
}
.img{
  display: inline-grid;
  place-items: center;
  width: 68px; height: 68px; /* **アイコンサイズ** 
  border-radius: 18px; /* **iOS風の角丸** 
  background: linear-gradient(135deg,#6fb1ff,#2b6ef6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  font-size: 30px;
  margin-bottom: 6px;
  transition: transform .12s;
} */
.icon:hover .img{ transform: translateY(-4px); }
/*.label{ 
  font-size:12px;
  color:#e9eef6;
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; } */



@media (max-width:700px){
.come p{
  display: none;
}
.icon-grid{ 
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 gap: 25px; /* **アイコン間隔** */
 padding: 15px;
 margin: 0 auto;
} 
.icon{
  /*width: 84px;*/
  height: auto;
  display: grid;
  grid-template-rows: 1fr auto; /* 上が伸びる領域、下がラベルの高さ */
  justify-items: center;
  align-items: center;
  padding: 8px 2px;
  border-radius: 5px;
  /*background: linear-gradient(135deg,#eaf3ff,#8195bd);*/ 
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease; /* アニメーションの滑らかさ */
}
.icon img{ 
  max-width: 60px;
  max-height: 50px;
  object-fit: cover;
  padding: 5px 0;
 }
.label{
  font-size: 0.75rem;
 /* font-weight: bold; */
  color: #000000;
}
}

/*----------------------- pixel under 424px -----------------------------*/
@media (max-width:424px){
.come p{
  display: none;
}


.icon-grid{ 
 grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 gap: 25px; /* **アイコン間隔** */
 padding: 15px;
 margin: 0 auto;
} 

.icon{
  /*width: 84px;*/
  height: auto;
  display: grid;
  grid-template-rows: 1fr auto; /* 上が伸びる領域、下がラベルの高さ */
  justify-items: center;
  align-items: center;
  padding: 8px 2px;
  border-radius: 5px;
  /*background: linear-gradient(135deg,#eaf3ff,#8195bd);*/ 
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease; /* アニメーションの滑らかさ */
}

.icon img{ 
  max-width: 60px;
  max-height: 50px;
  object-fit: cover;
  padding: 5px 0;
 }

.label{
  font-size: 0.75rem;
 /* font-weight: bold; */
  color: #000000;
}

}


/* ------------------------------------コンテンツ　バナー設定領域---------------------------------------*/
.come_02{
  position: relative;
  margin:25px auto;
  border-radius: 5px;
  border:solid 2px #000000;
  background-color:#ffddff;
  padding:3px;
  text-align:center;
}
.come_02 p{
  margin:10px auto;
  font-weight: bold;
  font-size: 1.0rem;
  font-family: "M PLUS Rounded 1c";
}


.ban_area{
  margin: 20px auto;
}
.ban_grid{ 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px; /* **アイコン間隔** */
  padding: 15px;
  display:grid;
  margin: 0 auto; max-width: 999px;
} 
.banner{
 display: grid;
  grid-template-rows: 1fr auto; /* 上が伸びる領域、下がラベルの高さ */
  justify-items: center;
  align-items: center;
  padding: 8px 5px;
  border-radius: 5px;
  background: linear-gradient(135deg,#f9fcff,#ffddff);

  color: #fff;

  cursor: pointer;
  transition: transform 0.3s ease;
}

.banner img{ 
  max-width: 250px;
  max-height:auto;
  object-fit: contain;
 }


/* ------------------------------------ページトップアイコン設定領域---------------------------------------*/

#page-top a{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#cc99cc;
    border-radius:10px;
    width:50px;
    height:50px;
    color:#000000;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
    font-size:0.8rem;
    transition:all 0.3s;border:solid 2px #000000;
     
}
#page-top a:hover{
    color:#000000;
    background:#ffaaff;
}

#page-top{
    position:fixed;
    right:20px;
    bottom:40px;
    z-index:2;
    opacity:0;
    transform:translateY(100px);
}

/* 上移動　出現 */
#page-top.UpMove{
    animation:UpAnime 0.5s forwards;
}
@keyframes UpAnime{
    from{
        opacity:0;
        transform:translateY(100px);
     }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* 下移動　隠す */
#page-top.DownMove{
    animation:DownAnime 0.5s forwards;
}
@keyframes DownAnime{
    from{
        opacity:1;
        transform:translateY(0);
     }
    to{
        opacity:1;
        transform:translateY(100px);
    }
}
/* -------------------------------------------*/
/*---------------------------------- 外部リンク バナー イメージ設定 -----------------------*/

 /* -------------------------------- 学校住所 ------------------------------------ */
 .gakkou_adress{
     width:auto;
     position: relative;
     display: block;
     padding:10px;
     background-color:#ffddff;
     
   }
   .gakkou_box{
     margin:auto;
     max-width: 960px;
     display: flex;
     flex-direction:column;
     position: relative;  
   }
   
   .gakkou_box p{
     font-size: 1.2rem;
     font-family: "M PLUS Rounded 1c";
     font-weight: bold;
     pointer-events: none;
     margin:0 10px;
   }
 
 /*------------------------------- 学校住所欄内 アクセス設定 ----------------------------*/
 .access{
   position: absolute;
   right: 0px;
   display: flex;
   flex-direction:column;
   border-radius: 5px;
   background: linear-gradient(135deg,#ffddff,#cc99cc);
   padding:0 5px 5px 10px;
   align-items: center;
 }
.access img{
   max-width: 50px;
}
 a.access{
   font-size:1rem; font-family: "M PLUS Rounded 1c";
   text-decoration: none;
   color:#000000;
 }  
 
 /************************* フッター設定 *************************************** */
 footer {
     background:#cc99cc;
     padding:17px;
 }

 footer p {
     font-size: 1.3rem;  
     font-family: "M PLUS Rounded 1c"; 
     font-weight:bold;
     color: #000000;
     max-width: 800px;
     text-align:center;
    
     margin:0 auto;
    
 }
@media (max-width:1100px){
  .gakkou_box p{
     font-size: 1rem;
     font-family: "M PLUS Rounded 1c";
     font-weight: bold;
     pointer-events: none;
     margin:0 10px;
   } 

  a.access{
   font-family: "M PLUS Rounded 1c";
   font-size: 0.7rem;
   text-decoration: none;
   font-weight: bold;
   color:#000000;

   }  
   footer p {
     font-size: 1rem;
     color: #000000;
     
     padding: 0 auto;
     text-align:center;
     margin:0 auto;
     font-weight:bold;
   }

}


/* ----------------bottom up---------------- 
@media (max-width:768px){ 
   footer {
     margin-bottom:58px; 
   }

} */