@charset "Shift-JIS";

/* リセットCSS */

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

:root {
  --bottom-height: 50px; /* 60px */
  --bottom-padding: 8px;
  --accent: #0b66d0;
}

/* ベース */
* {
  box-sizing: border-box;
 }

body {
 margin: 0;
 font-family:"M PLUS Rounded 1c"; 
 color: #222; 
 background-color: #ffffff;
 width:100%;
 margin:auto;
 padding:0;
}

 .dummy {
  height: 1600px;
  padding: 16px;
  background: #f7f7f7; }


/* 非表示（PC） */
.bottom-menu {
   display: none;
   }


/* オーバーレイとグローバルメニュー初期 */
.overlay {
  position: fixed; left: 0; right: 0; top: 0; bottom: var(--bottom-height);
  background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 1200;
}
.global-menu {
    position: fixed;
    left: 0;
    right: 0; 
    top: 0;
                      /*   bottom: var(--bottom-height); 20251223*/
    bottom: 0;
    background: #fff;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.2,.9,.2,1);
    z-index: 1250;
    overflow-y: auto;
}
.global-menu__inner { padding: 18px 16px 40px; }

/* メニューリスト */
.global-menu__list { list-style: none; margin: 56px 0 0; padding: 0; }
.global-menu__list li { margin: 8px 0; }
.global-menu__link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 8px; text-decoration: none; color: #111;
  background: #f2f2f2; font-weight: 600;
}
.global-menu__link:focus { box-shadow: 0 0 0 3px rgba(34,150,243,0.18); }
.icon { flex: 0 0 20px; color: #333; }
.global-menu__link.is-active,
.global-menu__link[aria-current="true"] {
  background: linear-gradient(90deg,#e6f0ff,#fff); border: 1px solid #cfe3ff; color: var(--accent);
}

/* ハンバーガー（通常） */
.hamburger {
  display: flex; flex-direction: column; align-items: center; gap: 3px;

  border: none;
  
  background: none; padding: 6px 8px; cursor: pointer; color: #fff;
  /* width: 44px; height: 44px; */
  
  position: relative;
}
.hamburger-label { 
  display: block;
  font-size: 12px;
  /*margin-top: 2px;*/
   color: #000000;
   }

/* 三本線のバー */
.bar {
  display: block;
  width: 22px;
  height: 3px;
  background: #000000;
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease, top .28s;
  position: relative;
}

/* 個別バーの位置調整 */
.bar--top { transform-origin: center; }
.bar--mid { transform-origin: center; }
.bar--bot { transform-origin: center; }

/* ハンバーガーがアクティブ（変形して×） */
.hamburger.active .bar--top {
  transform: translateY(6px) rotate(45deg);
}
.hamburger.active .bar--mid {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active .bar--bot {
  transform: translateY(-6px) rotate(-45deg);
}

/* ボトムメニュー */
@media (max-width: 1100px) {
  body { padding-bottom: var(--bottom-height); }

  .bottom-menu {
    display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: var(--bottom-height);
    background: #ffddff; color: #fff; z-index: 1300; box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
  }
  .bottom-menu__item { flex: 1; display: flex; align-items: center; justify-content: center; }

  .bottom-link { color: #000000; text-decoration: none; font-size: 14px; padding: 6px 8px; }
  
  .to-top { 
    border: none;
    background: transparent;
    color: #000000;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer; }

  /* メニュー開時のクラス */
  .global-menu.is-open { transform: translateY(0); }
  .overlay.is-open { opacity: 1; visibility: visible; }

  /* 背景スクロール停止 */
  body.no-scroll { overflow: hidden; touch-action: none; }

/*        　  ボトムメニュー　分割線    　        */
.bottom-menu__item{
  position: relative; /* 疑似要素の基準位置とする */
  flex-grow: 1;
  text-align: center;
  /* ... 他のスタイル ... */
}
/* 最後の項目以外に縦線を追加 */
.bottom-menu__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; /* 項目の右端に配置 */
  top: 10px; /* 上からの位置調整 */
  bottom: 10px; /* 下からの位置調整 (または height: XXpx と top/marginで調整) */
  width: 2px; /* 縦線の太さ */
  background-color: #000000; /* 縦線の色 */
}
}

/* 小画面微調整 
@media (max-width: 420px) {
  .bar { width: 18px; }
  .hamburger-label { font-size: 10px; }
}
*/


/* ----------------------- main area ------------------------ */
#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.3rem;
  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;
}


/*---------------------------------- ボタン　01 -------------------------------*/
.btn01 a {
position: relative; /*アンダーラインの位置を決めるための基準 */
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
font-family: "M PLUS Rounded 1c";
}

.btn01 a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 10px;
transform: scale(0, 1);
transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.btn01 a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}






























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

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

.header-logo img{  
    height:28px;
}

/*------------------- 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; */
}

}

/*---------------- ライン　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:45px; 
    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%);
}


/*------------------------------- メイン領域 -------------------------------- */
.midashi01{
 /*margin-top: 20px;*/
 padding:0.7rem 1.5em; /*上下左右の余白*/
 background:#ffddff; /*背景色*/
 border-bottom:solid 3px #cc99cc; /*線の種類 太さ 色*/

}
.midashi01 p{
 font-family: "M PLUS Rounded 1c";
 font-weight: bold;
 font-size: 1.2rem;
}






.home{
  margin: 20px auto 30px auto;
  /*background: linear-gradient(135deg,#f9fcff,#cc99cc);*/
  color: #000000;


}

.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: 70px;
  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:800px){
.come p{
  display: none;
}
}
@media (max-width:700px){

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

.midashi01 p{
 font-size: 1rem;
}








.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){



.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;
 }


/* -------------------------------- 学校住所 ------------------------------------ */
 .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 screen and (min-width: 1100px) {
#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{
    background:#000000;
    color:#cc99cc;
}  
#page-top{
  position:fixed;
  right:30px;
  bottom: 50px;
  /*z-index:1;*/
  opacity:0;
  transform:translateY(120px);
}

/* ?ｿｽ?ｿｽ?ｿｽﾚ難ｿｽ?ｿｽ@?ｿｽo?ｿｽ?ｿｽ */
#page-top.UpMove{
  animation:UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from{
      opacity:0;
      transform:translateY(120px);
   }
  to{
      opacity:1;
      transform:translateY(0);
  }
}
/* ?ｿｽE?ｿｽﾚ難ｿｽ?ｿｽ@?ｿｽB?ｿｽ?ｿｽ */
#page-top.DownMove{
  animation:DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from{
      opacity:1;
      transform:translateY(0);
   }
  to{
      opacity:1;
      transform:translateY(120px);
  }
}
}


@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;
   }

#page-top{
  display: none;
}

}

/* ----------------bottom up---------------- */