/*********
*******************************************:
注意 スマホ、タブレットファースト
@media screen and (min-width: rem);
30rem=480px以上/基本48rem=768以上/59rem=944px以上/基本64rem=1024以上
remについて＜1px=0.05rem。100px=5rem ablogのデフォ設定 例：9rem=180px＞
キーカラー：#264875 #0048A9 #003379
color:#2B2B2B;
*******************************************:
*********/



/* コンテナー */
/*トップの学校生活、エントリー（最新ニュースなど）最も幅が広く無装飾デザイン*/
.acms-container80 {
  max-width: 80%;/*元は72rem(84rem=1680px)*/
  padding-right: 1rem;
  padding-left:1rem;
  padding-right: calc(env(safe-area-inset-right) + 1rem);
  padding-left: calc(env(safe-area-inset-left) + 1rem);
margin: 0 auto;
}

/* ------------------------------
　　セクション
------------------------------ */
.section_orgin {
  padding: 3rem 0 3rem 0;
}

@media screen and (min-width: 48rem) {
    .section_orgin {
    padding: 3rem 0 3rem 0;
  }
}

@media screen and (min-width: 64rem) {
  .section_orgin {
    padding: 5.7rem 0 3rem 0;
  }
}

.section_orginA {
    padding: 0.5rem 0 1rem 0;
    border-top: 1px solid #cecece;
}

@media screen and (min-width: 48rem) {
    .section_orginA {
    padding: 1rem 0 1rem 0;
  }
}

@media screen and (min-width: 64rem) {
  .section_orginA {
    padding: 1rem 0 1rem 0;
  }
}

.section_orginB {
    padding: 1.5rem 0;
}

@media screen and (min-width: 48rem) {
    .section_orginB {
    padding: 2.5rem 0;
  }
}

@media screen and (min-width: 64rem) {
  .section_orginB {
    padding: 3rem 0;
  }
}


/*一覧へリンクなど*/
.section-button_orgin {
  margin: 0 0 0 0;
  text-align: right;
}



/*マージン*/
.top_imgUnderMargin{margin-top: 1.5rem;}
.box_margin{margin-top: 2.5rem;}

@media screen and (min-width: 48rem) {
.top_imgUnderMargin{margin-top: 2.5rem;}
.box_margin{
    margin-top: 4rem;
}
}
/*パディング*/
.box_padding{padding-top:1.5rem;}
.box_padding_bottom{padding-bottom:1rem;}
@media screen and (min-width: 48rem) {
.box_padding{padding-top:4rem;}
.box_padding_bottom{padding-bottom:0.5rem;}    
}


/*見出し*/
.midashi_cover{
    text-align:center;
}
    .midashi_h3{
        font-size: 0.9rem;
        font-weight:normal;
        letter-spacing: 0.3rem;        
        color: #fff;
        position: relative;
        display: inline-block;
        padding: 0.1rem 1.7rem 0rem 1.8rem;
        border-radius: 100vh;
        background-color: #0048A9;
    }

@media screen and (min-width: 38rem) {/*608px*/
    .midashi_h3{
        padding: 0.1rem 2.2rem 0rem 2.2rem;
        font-size: 1.2rem;
    }
}
@media screen and (min-width: 48rem) {
     .midashi_h3{
        font-size: 1rem;
        padding: 0.1rem 2.5rem 0rem 2.5rem;
    }

}
@media screen and (min-width: 64rem) {
     .midashi_h3{
        margin-top: 2rem;
        font-size: 1.4rem;
        padding: 0.2rem 3.8rem 0rem 3.8rem;
    }
}



/*スクロールで動くテキスト*/
/*テキストやborderがぼやけて見えるので、負荷軽減のwill-change: transform, opacity;をwill-change: unset;してくっきりみえるようにできる。
しかし、unsetするとレンダリングに負荷がかかるので基本は有効にしている。
ただ、更新履歴などはborderも多く使用している為、.headlineではunsetしている。(bunble_origin.css)
*/
.js .text_anima.js-animation-row {
opacity: 0;
will-change: transform, opacity;
}
.js .text_anima.js-animation-row.is-show {
  -webkit-animation: fade-in 0.8s 0.2s 1 both;
          animation: fade-in 0.8s 0.2s 1 both;
}

.js .text_anima2.js-animation-row {
opacity: 0;
will-change: transform, opacity;
}
.js .text_anima2.js-animation-row.is-show {
  -webkit-animation: fade-in 0.4s 0.5s 1 both;
          animation: fade-in 0.4s 0.5s 1 both;
}

/* ------------------------------
　　　　背景グラデーション
------------------------------ */
    .messejiBox1_bg1 {
         /*background: rgba(0,72,169,0.8);*/
          background:linear-gradient(45deg, rgba(0,105,235,0.9),rgba(0,59,137,0.9),rgba(0,105,235,0.9));    
          background-size: 200% 200%;/*サイズを大きくひきのばす*/
          animation: bggradient 8s ease infinite;
    }
    .messejiBox1_bg2 {
          background:linear-gradient(45deg, rgba(135,135,135,0.75),rgba(255,255,255,0.9),rgba(230,230,230,0.9));    
          background-size: 200% 200%;
          animation: bggradient 8s ease infinite;
    }
    .messejiBox1_bg3 {  
          background:linear-gradient(45deg, rgba(0,18,43,0.9),rgba(61,59,178,0.9),rgba(0,18,43,0.9));   
          /*background:linear-gradient(45deg, rgba(0,24,57,0.9),rgba(47,45,156,0.9),rgba(0,24,57,0.9));*/           
          background-size: 200% 200%;
          animation: bggradient 8s ease infinite;
    }
    .messejiBox1_bg4 {
          background:linear-gradient(45deg, rgba(1,12,49,0.9),rgba(44,88,149,0.9),rgba(1,12,49,0.9)); 
          background-size: 200% 200%;/*サイズを大きくひきのばす*/
          animation: bggradient 8s ease infinite;
    }
    .messejiBox1_bg5 {
          background:linear-gradient(45deg, rgba(230,230,230,0.65),rgba(255,255,255,0.9),rgba(255,255,255,1));    
          background-size: 200% 200%;
          animation: bggradient 8s ease infinite;
    }
    @keyframes bggradient{
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }


/*テキストの装飾*/
.pc_sp_br {display: block;}
.sp_tb_br{ display: block;}
.sp_br{ display: block;}
.sp_no_br{display: none;}
.f_margin{margin: 1.6rem 0 0 0 ;}
.f_margin1{margin: 0 3rem 0 0;}
.f_margin2{margin: 3.5rem 0 0 0 ;}
.f_padding1{padding-left: 1rem;}
.f_bold{font-weight: bold;}
.f_size03{font-size: 0.3rem;}
.f_size05{font-size: 0.5rem;}
.f_size06{font-size: 0.6rem;}
.f_size07{font-size: 0.7rem;}
.f_size08{font-size: 0.8rem;}
.f_size09{font-size: 0.9rem;}
.f_size1{font-size: 0.8rem;}
.f_size2{font-size: 1rem;}
.f_size3{font-size: 1.3rem;}
.f_size4{font-size: 1.4rem;}
.f_size6{font-size: 1.5rem;}
.f_size7{font-size: 1.5rem;}
.f_letter-spacing{letter-spacing: 0.25em;}
.f_color1{color: #fff;}
.f_color2{color: #f85100;}
.f_color3{color: #0088c7;}
.f_color4{color: #00a59e;}
.f_color5{color: #fff000;}
.f_color6{color: #264875;}
.f_color7{color: #353535;}
.f_color8{color: #003379;}
.f_color9{color: #FF004B;}
.f_color10{color: #0BB300;}
@media screen and (min-width: 48rem) {
.sp_br{ display:none;}
.sp_tb_br{ display: block;}
.sp_no_br{display:block;}
.f_margin{margin: 3.5rem 0 0 0;}
.f_margin2{margin: 5rem 0 0 0 ;}
.f_size03{font-size: 0.4rem;}    
.f_size06{font-size: 0.6rem;}
.f_size05{font-size: 0.7rem;}
.f_size07{font-size: 0.8rem;}
.f_size1{font-size: 0.9rem;}
.f_size2{font-size: 1.1rem;}
.f_size3{font-size: 1.3rem;}
.f_size4{font-size: 1.6rem;}
.f_size7{font-size: 1.9rem;}
}
@media screen and (min-width: 64rem) {
.sp_tb_br{ display:none;}
.f_margin{margin: 4rem 0 0 0;}   
.f_size06{font-size: 0.7rem;}
.f_size05{font-size: 1rem;}
.f_size07{font-size: 1rem;}
.f_size1{font-size: 1rem;}
.f_size2{font-size: 1.2rem;}
.f_size3{font-size: 1.4rem;}
.f_size7{font-size: 2.3rem;}
}


/* ------------------------------
  モバイルメニュー
------------------------------ */
/* モバイルメニュー開いた時
------------------------------ */
.global-nav-mobile-link_origin {
  position: relative;
  display: block;
  padding: 0.3rem 0;
  border-bottom:none;
}



/*画像アクション*/
/*.card-bordered-img-wrap-originは、画像の角が丸くない
逆に丸くする場合、bunble_origin.cssの.card-bordered-img-wrapをhtmlに適用*/
.card-bordered-img-wrap-origin{
    margin: 0;
    overflow: hidden;
}

/*画像の上のテキスト*/
.card-img-wrap-coment /*, .card-img-wrap-coment2*/{
    position: relative;
}
    /*ベース*/
    .card-img-wrap-coment::after{
        position: absolute;
        letter-spacing: 0.1rem;        
        padding: 0.4rem 0.8rem 0.3rem 0.8rem;
        content:"";
    }
    /*色や形*/
    .card-bg_A::after{      
        background-color:#393939;
        opacity: 0.8;
        color: #ffffff;
        right: 0;
        bottom:0;
        font-size: 0.7rem;
    }
    .card-bg_B::after{      
        background-color:#393939;
        border-bottom-right-radius: 0.5rem;
        opacity: 0.8;
        color: #ffffff;
        right: 0;
        bottom:0;
        font-size: 0.8rem;
    }
    .card-bg_C::after{      
        color: #ffffff;
        background-color: rgba(21,39,72,0.8);
        left: 7%;
        bottom:0rem;
        font-size: 1.1rem;
        border-radius:  0.5em 0.5em 0 0;
    }
    .card-bg_E::after{      
        background-color:#264875;
        opacity: 0.9;
        color: #ffffff;
        bottom: 0;
        left:0;
        font-size: 0.9rem;
    }

.card-img-wrap-coment2{
    position: relative;
}
    /*ベース*/
    .card-img-wrap-coment2::after{
        position: absolute;
        letter-spacing: 0.1rem;        
        padding: 0.1rem 0.2rem 0rem 0rem;
        content:"";
    }
    /*色や形*/
    .card-bg_D::after{
        display: block;
        width: 99%;
        text-align: center;
        z-index: 100;
        background-color: rgba(21,39,72,0.8);
        color: #ffffff;
        left: 0;
        top:0;
        font-size: 0.7rem;
        border-radius:  0.7em 0.7em 0 0;

    }
@media screen and (min-width: 48rem) {
    .card-bg_C::after{      
        font-size: 0.9rem;
    }
}

@media screen and (min-width: 64rem) {
    .card-bg_C::after{      
        font-size: 1.2rem;
    }
}

    /*挿入テキスト*/
    .card-coment1::after{
        content:"簡単マウス操作でお散歩気分";
    }
    .card-coment2::after{
        content:"WEBサイトからお申込みいただけます";
    }
    .card-coment3::after{
        content:"inter-exchange news";
    }
    .card-coment3_1::after{
        content:"国際交流";
    }
    .card-coment4::after{
        content:"volleyball news";
    }
    .card-coment4_1::after{
        content:"バレーボールだより";
    }
    .card-coment5::after{
        content:"Ikuyukai activities news";
    }
    .card-coment5_1::after{
        content:"育友会活動";
    }
    .card-coment6::after{
        content:"notice from the office";
    }
    .card-coment6_1::after{
        content:"事務室より";
    }
    .card-coment7::after{
        content:"library news";
    }
    .card-coment7_1::after{
        content:"図書館だより";
    }
    .card-coment8::after{
        content:"access";
    }
    .card-coment8_1::after{
        content:"アクセス";
    }
    .card-coment9::after{
        content:"Junior high school";
    }
    .card-coment10::after{
        content:"Senior high school";
    }

/*ボタン*/
.buttonRound {
    display:inline-block;
    width: 13rem;
    height: 2.2rem;
    padding: 1.3rem 2.1rem 0rem 2.1rem;
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing:0.05rem;
    color: #393939;
    font-weight: bold;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #cbcbcb;
    border-radius: 1.7rem; /* (高さ+paddingtop / 2) の値 */
}
.buttonRound:hover{
    background-color: #ededed;
    transition: background-color 0.4s;
  
}
@media screen and (min-width: 48rem) {
.buttonRound {
    padding: 1.2rem 2.1rem 0rem 2.1rem;
}   
}

@media screen and (min-width: 64rem) {

}


/*背景カラー*/
.bg_colorA{background-color: #fbffef;}
.bg_colorB{background-color: #254D85;}
.bg_colorC{background-color: #E7EEF8;}
/* ------------------------------
　　ヘッダー
------------------------------ */
/*★ bunble_origin.cssにも.headeクラスを指定している*/
.header.header_scroll {
  position: fixed;top:0;
  height: 5.0rem;
  -ms-transition: background-color 1.2s ease; 
  -webkit-transition: background-color 1.2s ease;     
  transition: background-color 1.2s ease;
  background-color: rgba(255,255,255,0.5);
}

/*1024以下*/
/*ヘッダグローバルナビ7個に増設した際に64と修正（本来は63）*/
@media (max-width: 64rem) { 
.header.header_scroll {
  height: 3.5rem;
}
}



/* ------------------------------
　　メインビジュアル
------------------------------ */
@keyframes anime {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        transform: scale(1.2);
        z-index: 10;
}
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}
.main-visual_origin {
  position: relative;
  overflow: hidden;
  height: calc(70vh - 0px);    /*メイン画像の高さ調整 100vhで画面下いっぱい*/
  min-height: 20rem;
}

.main-visual-bg1, .main-visual-bg2, .main-visual-bg3, .main-visual-bg4 {
    width: 100%;
    height: calc(70vh - 0px);    /* メイン画像の高さ調整 100vhで画面下いっぱい*/
    min-height: 20rem;
    background: no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    /*画像追加時はここを5s毎に増やす*/
  -webkit-animation: anime 20s 0s infinite;
          animation: anime 20s 0s infinite;
  z-index: 0;
  opacity: 0;

}

/*画像追加時はここを5s毎に増やす*/
.main-visual-bg2{animation-delay: 5s;}
.main-visual-bg3{animation-delay: 10s;}
.main-visual-bg4{animation-delay: 15s;}


/*****************
タブ切り替え
*****************/
.summary_section_orgin {
    padding: 1.1rem 0 0.5rem 0;
}

@media screen and (min-width: 48rem) {
.summary_section_orgin {
    padding: 1.8rem 0 0 0;
}
}


.tab-001 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /*    max-width: 500px;*/
}

.tab-001 > label {
    flex: 1 1;
    order: -1;
    min-width: 3.56rem;
    padding: .6em 1em .4em;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #dddddd;
    border-radius: 0;
    background-color: #F2F2F2;/*E5F0FF*/
    color: #676767;/*989898 f0f0f0*/
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    letter-spacing:0.2rem;    border-radius: 5px 5px 0 0;
}

.tab-001 > label:hover {
    /*opacity: .8;*/
    -webkit-transition: background-color 0.6s ease;
    -moz-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color  0.6s ease;    
    background-color: #DEDEDE;/*B3E6FF 88BFFF*/
    color: #676767;/*353535*/
}

.tab-001 input {
    display: none;
}

.tab-001 > div {
    display: none;
    width: 100%;
    padding: 0.5rem 0.5rem 1rem;
    /*padding: 1.5em 1em;*/
    /*background: #fff;*/
    
}

.tab-001 label:has(:checked) {
    background: #fff;
    border-color: #0048A9 #e0e0e0 #fff;/*2589D0*/
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px 5px 0 0;
    color: #003379;

}

.tab-001 label:has(:checked) + div {
    display: block;
}

ul.tab-ul1{
    list-style: none;
    padding-left:0;
    
}
ul.tab-ul1 > li.tab-list1{
    border-bottom: 1px solid #B3B3B3;
    color: #2B2B2B;
    
}
ul.tab-ul1 > li.tab-list1 > a.tab-a1{
    padding: 0.7rem 0.5rem 0.6rem ; 
    display: block;
}
ul.tab-ul1 > li.tab-list1 > a.tab-a1 > div{
    display: inline-block;/*（年月日＋カテゴリアイコン）とタイトルを横並び*/
}
ul.tab-ul1 > li.tab-list1 > a:hover{

  background:#FBFBFB /*var(--color-gray20);*/
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);    
}
span.tab-category{
    border-radius: 0.25rem; 
    font-size: 0.6rem;/*なぜか小さくならない・・・*/
    display: inline-block;
    padding: 0.15rem 0.25rem 0.1rem;
}




/*下記は各カテゴリを新設した際にIDを参照してtabに数字を追記する*/
span.tab120,span.tab24{/*入試関連情報 過去の入試関連*/
    background-color: #f5ff92;
     color: #353535;
}
span.tab119{/*最新ニュース*/
    background-color: #FF929F;
    color: #000;
}
span.tab123{/*中学入試*/
    background-color: #92e9ff;
     color: #353535;
}
span.tab124{/*高校入試*/
    background-color: #92b0ff;
     color: #353535;
}
span.tab121{/*学校ニュース*/
    background-color: #92ff96;
     color: #353535;
}
span.tab125,span.tab49{/*行事*/
    background-color: #ffbd92;
     color: #353535;
}
span.tab126,span.tab45{/*クラブ*/
    background-color: #ab92ff;
     color: #353535;
}
span.tab127{/*バレーボール*/
    background-color: #fff892;
     color: #353535;
}
span.tab148{/*男バレ*/
    background-color: #4035FF;
     color: #fff;
}
span.tab149{/*女バレ*/
    background-color: #FF35A6;
     color: #fff;
}
span.tab128,span.tab70{/*生徒会*/
    background-color: #ffae92;
     color: #353535;
}
span.tab129,span.tab48,span.tab15{/*育友会 15育友会活動*/
    background-color: #92ffc0;
     color: #353535;
}
span.tab130,span.tab50{/*生徒ホール*/
    background-color: #92bdff;
     color: #353535;
}
span.tab150{/*ILP*/
    background-color: #FF92E5;
     color: #353535;
}
span.tab122,span.tab132{/*お知らせ*/
    background-color: #000164;
    color: #fff;
}
span.tab133,span.tab46{/*国際交流*/
    background-color: #155200;
    color: #fff;
}
span.tab134{/*図書館便り*/
    background-color: #640000;
    color: #fff;
}
span.tab135,span.tab3{/*緊急連絡*/
    background-color: #F85100;
    color: #fff;
}
span.tab136{/*事務室より*/
    background-color: #5B0064;
    color: #fff;
}
span.tab71,span.tab79{/*教員募集（採用情報）、講師登録制度*/
    background-color: #6C6F00;
    color: #fff;
}
span.tab131,span.tab62,span.tab64,span.tab66,span.tab68{/*校友会ニュース*/
    background-color: #92FFD9;
    color: #353535;
}
/*最新ニュース以外のカテゴリで使用*/
span.tab76{
    background-color: #264875;
    color: #fff;
}



@media screen and (min-width: 48rem) {
.tab-001 > label {
    font-size: 1rem;
}
.tab-001 > div {
    padding: 0.8rem 2.5rem 1.5rem;
}
ul.tab-ul1 > li.tab-list1 > a.tab-a1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.7rem 2rem 0.6rem 2rem;  
}
ul.tab-ul1 > li.tab-list1 > a.tab-a1 > div{
    display:block;
}    
}

@media screen and (min-width: 64rem) {
.tab-001 > label {
    font-size: 1.2rem;
}
.tab-001 > div {
    padding: 0.8rem 4.5rem 1.5rem;
}

}

/*****************
重要なお知らせ
*****************/
.import_noti{
    margin: 0rem auto;
    padding: 0.5rem 1.5rem 0.5rem;
    background-color: #F7F6EA;
    border-radius: 8px;
    width: 95%;
    box-sizing: border-box;
}
    .import_noti-header{
        width: 100%;
    }
        .import_noti-header-inner{
            padding: 0.8rem 0 0 0;
        }
            .import_noti-header-inner-side {
                font-size: 0.9rem;
                text-align: center;
                color: #2B2B2B;
                font-weight: normal;
                margin-bottom: 0;
            }
            .mark1-aicon{
                position: relative;
            }
            .mark1-aicon::before{
                position: absolute;
                left: -1.2rem;
                top:0rem;
                content:"";
                background-repeat:no-repeat;
                width: 1em;/*画像の幅*/
                height: 1rem;/*画像の高さ*/
                background-size: contain;
            }
            .mark1-aicon_img::before{
                background-image: url(../images/mark1.webp);
            }
            .mark1-aicon_img2::before{
                background-image: url(../images/mark2.webp);
            }

    .import_noti-main {
        width: 100%;
    }
        .import_noti-item-flex{
            display: -webkit-box;
            display: -ms-flexbox;            
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            -webkit-box-align:center;
            -webkit-align-items:center;
            -ms-flex-align:center;
            align-items:center;            
            height: 100%; 
        }
        .import_noti-item{
            display: block;
            margin: -1rem auto auto 0;
        }
        .influenza_li{padding: 1rem 0 0.8rem 0;}
        .import_noti-item > a{
            padding: 0.1rem 1rem 0rem 1rem;
        }
        .import_noti-item > a:hover{
            -webkit-transition: background-color 0.6s ease;
            -moz-transition: background-color 0.6s ease;
            -o-transition: background-color 0.6s ease;
            transition: background-color  0.6s ease;    
            background-color: #EDEDD7;            
        }
    /*★*/
    .headline-date_orgin {
      font-size: 0.7rem;
      color: #2B2B2B;
       display: block;
         border-bottom: 1px solid #B3B3B3; 
    }

@media screen and (min-width: 48rem) {

.import_noti{
    padding: 0.7rem 1rem 0.7rem;
    border-radius: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
}
    .import_noti-header{
        width: 35%;
    }
        .import_noti-header-inner{
            padding: 1.5rem 0;

        }
            .import_noti-header-inner-side {
                font-size: 1rem;
                padding-bottom: 0.8rem;
            }
            .mark1-aicon::before{
                left: -1.5rem;
                top:0rem;
                width: 1.1em;/*画像の幅*/
                height: 1.1rem;/*画像の高さ*/
            }
    .import_noti-main {
        width: 65%;
    }
        .import_noti-item{
            padding-top: 0.4rem;
            margin: auto auto auto 0;
        }
        .import_noti-item > a{
            padding: 0.5rem 1rem;
        }    
    /*★*/
    .headline-date_orgin {
        padding-right: 0.5rem;
      font-size: 0.8rem;
        display: inline-block;
         border-right: 1px solid #B3B3B3;
         border-bottom:none; 
    }
}

@media screen and (min-width: 64rem) {
    
.import_noti{
    padding: 1rem 1.25rem 1rem;
}

            .import_noti-header-inner-side {
                font-size: 1.1rem;
            } 
            .mark1-aicon::before{
                width: 1.2em;/*画像の幅*/
                height: 1.2rem;/*画像の高さ*/
            }
}

/*****************
更新履歴と緊急連絡
*****************/

.change_logbox{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
}
.change_logbox > div{
    padding-top: 1.8rem;
}
    .change_logbox_Left , .change_logbox_Right{
        width: 48%;
        position:relative;
    }
    .change_logbox_Left::before , .change_logbox_Right::before{
        content:"";
        display:block;
        width:100%;
        height:3rem;
        position:absolute;
        border-color: #0048A9 #e0e0e0 #fff;
        border-style: solid;
        border-width: 4px 1px 0px;
        border-radius: 5px 5px 0 0;        
        top:0;
        left:0px;
    }


/*****************
学習システム
*****************/
.learning_sys{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;          
    -ms-flex-wrap    : wrap;
    flex-wrap        : wrap;

}
.learning_sys ul{
    list-style: none;
    margin: 5.2rem 0 3rem 0;
}

    .learning_sys > div{
        width: 100%;
    }
        ul.learning_sys_ul {
            /*border-left:  1px solid #cecece;*/
            margin:60% 0 0 0;
            padding: 0;
        }
        .learning_sys_ul li{
            display: block;
            padding-top: 1rem;
            padding-bottom: 1.5rem;
            height:auto;
            position: relative;
        }
        .learning_sys_ul li::before/*.midashi_h3::after*/ {
          content: '';
          position: absolute;
          bottom: -0.5rem;
          display: block;
          width: 79%;
          height: 0.2rem;
          border-bottom: solid 1px #cecece;
        }
            .learning_sys_ul li::after{
                position: absolute;
                left: 8%;
                bottom:1rem;
                content:"";
                background-repeat:no-repeat;
                width: 75px;
                height: 42.3px;
                background-size: contain;
            }
            @media screen and (min-width: 28rem) {/*448px以上*/
                .learning_sys_ul li::after{
                    left:inherit;
                    right: 10%;
                    top:12%;
                    width: 120px;
                    height: 67.6px;
                }
            }
            .bgimg122::after{
                background-image: url(../images/img122.webp);
            }
            .bgimg123::after{
                background-image: url(../images/img123.webp);
            }
            .bgimg133::after{
                width: 75px !important;
                height: 28.3px !important;
                background-image: url(../images/img133.webp);
            }
            .bgimg134::after{
                width: 65px !important;
                height: 32.2px !important;                
                background-image: url(../images/img134.webp);
            }
            @media screen and (min-width: 28rem) {/*448px以上*/
                .bgimg133::after{
                    left: 8% !important;
                    top: inherit !important;
                    bottom:1rem !important;
                    width: 125px !important;
                    height: 47.2px !important;
                }
                .bgimg134::after{
                    width: 113px !important;
                    height: 56px !important;
                }
            }
        .learning_sys1{
            padding-right: 8%;
            padding-left: 10%;
            /*background:url("../images/img2.webp") left 15% / 1.5rem no-repeat;*/
            background: linear-gradient(to right, #264875 1.5%, #fff 1.5%, #fff 98.5%, #fff 98.5%);
        }
        .learning_sys2{
            padding-right:8%;
            padding-left: 10%;
           /* background:url("../images/img3.webp") left 15% / 1.5rem no-repeat;*/
            background: linear-gradient(to right, #264875 1.5%, #fff 1.5%, #fff 98.5%, #fff 98.5%);
            margin-top: 1rem;
        }
        .learning_sys3{
            padding-right: 10%;
            padding-left: 8%;
           /* background:url("../images/img4.webp") right 15% / 1.5rem no-repeat; */
            background: linear-gradient(to left, #264875 1.5%, #fff 1.5%, #fff 98.5%, #fff 98.5%);
        }
        .learning_sys4{
            padding-right: 10%;
            padding-left: 8%;
            /*background:url("../images/img5.webp") right 15% / 1.5rem no-repeat;*/
            background: linear-gradient(to left, #264875 1.5%, #fff 1.5%, #fff 98.5%, #fff 98.5%);
            margin-top: 1rem;
        }

        .learning_sys_ul li > div > h4{
            font-size: 1.2rem;
            letter-spacing: 0.2rem;
            padding: 0; margin: 0;
            position: relative;
        }

        .learning_sys_ul li > div > h4 > span.span_bigtext{
            font-size: 1.5rem;
        }
        .learning_sys_ul li > div > h4 > span.span_normal{
            font-size: 1rem;
            padding-left: 0.4rem;
            letter-spacing: 0.02rem;
        }
        .learning_sys_ul li p{
            font-size: 1rem;
            letter-spacing: 0.07rem;
            margin: 0.3rem 0 0.8rem 0;
        }

/*背景画像　学習システム SP*/
.learning_sp1{
    background: url("../images/img190.webp") 50% 4.5rem / contain no-repeat;    
}
.learning_sp2{
    padding-top: 2rem;
    background: url("../images/img191.webp") 50% 6.5rem / contain no-repeat;    
}
.buck-visualBox-marginTop{
    margin-top: 2.1rem;
}

@media screen and (min-width: 48rem) {
.learning_sys{
    -webkit-flex-wrap: nowrap;          
    -ms-flex-wrap    : nowrap;
    flex-wrap        : nowrap;
    margin: 35% 0 0;
}

    .learning_sys::before{
       content:"";
        display:block;
        width: 50%;
        height:82%;
        position:absolute;
        top:8.5rem;
        left:0px;        
    }
    .learning_sys > div{
        width: 50%;
    }
        ul.learning_sys_ul {
            margin:5% 0 0 0;
            padding: 0;
        }
        .learning_sys_ul li{
            height:14rem;border-left: 1px solid #cecece;
            padding-top: 3.5rem;
            padding-bottom:0;           
        }
            .learning_sys_ul li::after{
                position: absolute;
                right: 0%;
                top:0rem;
                content:"";
                background-repeat:no-repeat;
                width: 120px;
                height: 67.6px;
                background-size: contain;
            }
                .bgimg133::after{
                    top: 0 !important;
                    right: 16% !important;
                    left: inherit !important;
                    width: 118px;
                    height: 44.6px;
                }
                .bgimg134::after{

                    right: 16% !important;
                    width: 103px !important;
                    height: 51px !important;
                }
            @media screen and (min-width: 58rem) {/*928px以上*/
                .learning_sys_ul li::after{
                    left:inherit;
                    right: 4%;
                    top:11%;
                width: 135px;
                height: 76.1px;                    

                }
                .bgimg133::after{
                    top: 11% !important;
                    right: 16% !important;
                    width: 118px;
                    height: 44.6px;
                }
            }

    
    
        .learning_sys1{
            padding-right: 5%;
            padding-left: 16%;
            /*background:url("../images/img2.webp") left top / 3rem no-repeat;*/
            background: linear-gradient(to right, #264875 2.5%, #fff 2.5%, #fff 97.5%, #fff 97.5%);
        }
        .learning_sys2{
            padding-right: 5%;
            padding-left: 16%;
            /*background:url("../images/img3.webp") left top / 3rem no-repeat;*/
            margin-top: 1.5rem;
            background: linear-gradient(to right, #264875 2.5%, #fff 2.5%, #fff 97.5%, #fff 97.5%);
        }
        .learning_sys3{
            padding-right: 16%;
            padding-left: 5%;
           /*background:url("../images/img4.webp") right top / 3rem no-repeat;*/
            background: linear-gradient(to left, #264875 2.5%, #fff 2.5%, #fff 97.5%, #fff 97.5%);
        }
        .learning_sys4{
            padding-right: 16%;
            padding-left: 5%;
          /*  background:url("../images/img5.webp") right top / 3rem no-repeat;*/
            background: linear-gradient(to left, #264875 2.5%, #fff 2.5%, #fff 97.5%, #fff 97.5%);
            margin-top: 1.5rem;         
        }
        .learning_sys_ul li > div > h4{
            font-size: 1.4rem;
        }
        .learning_sys_ul li > div > h4 > span.span_bigtext{
            font-size: 1.8rem;
            font-weight:500;
        }
        .learning_sys_ul li > div > h4 > span.span_normal{
            font-size: 1rem;
            padding-left: 0.5rem;
        }
        .learning_sys_ul li p{
            font-size: 1rem;
        }    
/*背景画像　学習システム TB PC*/
.buck-visualBox {
    position: relative;
    padding: 4rem 0 3rem;
    background: url("../images/img189.webp") 50% 11rem / contain no-repeat;
}
.learning_sp1{
    background:none;    
}
.learning_sp2{
    padding-top:0;
    background:none;    
}
.buck-visualBox-marginTop{
    margin-top: 2.3rem;
}
}

@media screen and (min-width: 64rem) {
.learning_sys{
    margin: 36.5% 0 0;
}

        .learning_sys_ul li > div > h4{
            font-size: 1.6rem;
        }
        .learning_sys_ul li > div > h4 > span.span_bigtext{
            font-size: 2.1rem;
        }
        .learning_sys_ul li > div > h4 > span.span_normal{
            font-size: 1.2rem;
            padding-left: 0.7rem;
        }
        .learning_sys_ul li p{
            font-size: 1.2rem;
        }    
.buck-visualBox-marginTop{
    margin-top: 2.5rem;
}
.buck-visualBox {
    padding: 2rem 0 3rem;
    background-position: 50% 14rem;
}  
}
@media screen and (min-width: 74rem) {   
.learning_sys{
    margin: 34% 0 0;
}
}


/*****************
入試情報
*****************/
.admission_info_1 {
    margin: 3rem 0 0rem;
    padding-bottom: 2rem;
}

.admission_info_ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;/*子要素が折り返される*/
        -webkit-justify-content: center;
        justify-content: center;
  /*margin: 0 -1rem;*/
  padding: 0;
  list-style: none;
}
    .admission_info_ul > li{
        display: block;
        width: 85%;
        margin-bottom: 2rem;
    }

    .admission_info_ul > li > a > p.admission_info_p{
        font-size: 0.7rem;
    }


@media screen and (min-width: 48rem) {
.admission_info_1 {
    margin: 4.7rem 0 0rem;
    padding-bottom: 2rem;
}
.admission_info_ul {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
    .admission_info_ul > li{
        display: block;
        width: 27%;/*26.8rem*/
        height: auto;
        margin: 0 1rem 0 0;
    }
    .admission_info_ul > li:last-child{margin-right: 0;}
    .admission_info_ul > li > a > p.admission_info_p{
        font-size: 0.8rem;
        
    }

}

@media screen and (min-width: 64rem) {
.admission_info_1 {
    margin: 5.7rem 0 0rem;
    padding-bottom: 2rem;
}
    .admission_info_ul > li > a >p.admission_info_p{
        font-size: 0.9rem;
    }
}

.admission_jiseki_h3{
    text-align: center;
    font-size: 1.4rem;
    margin: 0;

}

/*****************
合格実績
*****************/


.admission_jiseki_ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;/*子要素が折り返される*/
        -webkit-justify-content: center;
        justify-content: center;
    padding: 0rem 0 0 0;
    list-style: none;
}
    .admission_jiseki_ul li{
        border-bottom: 1px solid #898989;
        padding: 1rem 1rem 0.6rem;
        text-align: center;
        display: block;
        width:63%;
        height: auto;
    }

    .admission_jiseki_ul li.borercolor{
        border-right: 1px solid #e0e0e0;
    }
    .admission_jiseki_ul li:last-child{
        border-right:none;
        border-bottom: none;
    }
    .admission_jiseki_ul li > h4 , .admission_jiseki_ul li > a > h5{
        margin: 0 0 0 0;
        font-size: 1rem;
    }
    .admission_jiseki_ul li > p.jisekisuchi{
        margin: auto 0 0 0;
        padding: 0;
        font-size: 5.2rem;
        font-weight:bold;
        line-height: 1;
    }
    .admission_jiseki_ul li > a > p.jiseki_syousai{
        padding: 0;
        margin: 0;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .admission_jiseki_ul li > p > span{
        font-size: 0.9rem;
    }
    .card-b-r-m-margin {
        margin: 1rem 0rem 0 auto !important;
    }

@media screen and (min-width: 48rem) {
.admission_jiseki_h3{
    font-size: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #898989;
}
.admission_jiseki_ul {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
    padding: 1.5rem 0 0 0;
}
    .admission_jiseki_ul li{
        border-right: 1px solid #898989;
        border-bottom: none;
        width:30%;/*27.8rem*/
        padding: 0.2rem 0 0.6rem;
    }
    .admission_jiseki_ul li > h4 , .admission_jiseki_ul li > a > h5{
        font-size: 1.2rem;
    }
    .admission_jiseki_ul li > p.jisekisuchi{
        font-weight:normal;
        font-size: 5rem;
    }
    .admission_jiseki_ul li > a > p.jiseki_syousai{
        font-size: 1.8rem;
    }    
    .admission_jiseki_ul li > p > span{
        font-size: 1.2rem;
    }
    .card-b-r-m-margin {
        margin: 1rem 3rem 0 auto !important;
    }

}
@media screen and (min-width: 64rem) {
.admission_jiseki_h3{
    font-size: 2.2rem;
}
    .admission_jiseki_ul li > h4 , .admission_jiseki_ul li > a > h5{
        font-size: 1.7em;
    }
    .admission_jiseki_ul li > p.jisekisuchi{
        font-size: 9rem;
    }
     .admission_jiseki_ul li > a > p.jiseki_syousai{
        font-size: 2.1rem;
    }       
    .admission_jiseki_ul li > p > span{
        font-size: 1.8rem;
    }
}

/*背景画像　入試情報*/
.buck-visualBox-admission_info{
    position: relative;
    padding: 2.5rem 0 2.5rem;
    background: no-repeat;
    width:100%; 
    background-size: cover;
    background-position: top;
}
#jiseki0{
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;    
}

#jiseki1, #jiseki2 {
    background: no-repeat;
    background-size:auto;
    display: -webkit-box;
    display: -ms-flexbox;    
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    height: auto; width:50%;
}
#jiseki1 {background:url("../images/img9.webp") left bottom / 120% no-repeat; border-bottom: none;}
#jiseki2 {background:url("../images/img10.webp") right top/ 120% no-repeat;}

@media screen and (min-width: 48rem) {
#jiseki1 {background:url("../images/img9.webp") left top / contain no-repeat;}
#jiseki2 {background:url("../images/img10.webp") right / contain no-repeat;}
}
@media screen and (min-width: 64rem) {

}



/*****************
バナースライド
*****************/
.sp_Slide {/*スマホは非表示*/
    display:none!important;
}

    :root {
      --easing: cubic-bezier(0.2, 1, 0.2, 1);
      --transition: 0.8s var(--easing);
      --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
        -0.8rem -0.8rem 1.2rem #fff;
      --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08),
        -1rem -1rem 1.5rem #fff;
      --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
        inset -0.8rem -0.8rem 1.2rem #fff;
      --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1),
        -0.8rem -0.8rem 1.2rem rgba(#fff, 0.2);
    }

    :focus:not(:focus-visible) {
      outline: 0;
      /* キーボード操作"以外"でフォーカスされた際はoutlineを消す */
    }

    .l-inner {
      position: relative;
      box-sizing: content-box;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 10rem;
    }

    .l-section {
      /*border-top: 1px solid #eee;*/
        border-top: none;
    }

    .l-section .l-inner {
      padding-top: 2rem;
      padding-bottom: 0rem;
    }

    /* slider */
    .slide-media,
    .thumb-media {
      position: relative;
      overflow: hidden;
    }

    .slide-media img,
    .thumb-media img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;/*PCはcover*/
    }

    .splide {
      z-index: 0;
    }

    .splide-wrapper {
      position: relative;
    }

    .card05 {
      overflow: hidden;
    }

    .card05 .splide__track {
      overflow: visible;
    }

    .card05 .splide__slide {
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
    }

    .card05 .slide {
      overflow: hidden;
      /*border-radius: 4px;*/
        border-radius: 10px;
    }

    .card05 .slide-media {
      /*padding-top: 62.5%;*/
        padding-top: 45%;/*バナー上のテキスト位置(簡単操作でお散歩気分)*/
    }

    .card05 .slide-media img {
        height: calc(150px + 16px);
      -webkit-transform: translateY(-16px);
      transform: translateY(-16px);
    }

    .card05 .slide-content {
      padding: 0.5rem 1rem 0rem 1rem;
    }

    .card05 .slide-date {/*
      font-size: 1.2rem;
      line-height: 1;
      display: block;
      color: var(--color-theme);*/
    }

    .card05 p.slide-title {
      line-height: 1.3;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;/*複数行にまたがる分の最後を中黒で終わる*/
      -webkit-box-orient: vertical;
      height: 1.2rem;
      margin-top: 0rem;
        font-size: 0.9rem;
        font-weight: bold;
    }



@media only screen and (min-width: 48rem) {
.sp_Slide {/*スマホ以上768px(つまりタブレット)は、表示*/
    display:block !important;
    }
    .tb-pc-OnBanner{display:none;}/*スマホ以上768px(つまりタブレット)は、バナー非表示*/
.l-section .l-inner {
    padding-top: 2rem;
    padding-bottom: 1rem;
    }
.card05 .slide-media img {
    height: calc(160px + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
    }
.card05 .slide-content {
    padding: 0.5rem 1.2rem 0rem 1.2rem;
    }
.card05 p.slide-title {
    line-height: 1.6;
    height: 1.5rem;
    font-size: 1.1rem;
    }
}

@media only screen and (min-width: 64rem) {
.l-section .l-inner {
    padding-top: 3rem;
    padding-bottom: 4rem;
    }
.slide-media img,
.thumb-media img {
    object-fit: cover;/*SPとタブレットはcontain*/
    }
.card05 .slide-media img {
    /*height: calc(100% + 16px);  このサイズの場合、→これも同時に指定　.thumb-media img{object-fit: *contain;}*/
    height: calc(180px + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
    }
.card05 .slide-content {
    padding: 0.5rem 1.5rem 0rem 1.5rem;
    }

      .card05 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
      }

      .card05 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
      }

      .card05 .slide:hover {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px);
      }

      .card05 .slide:hover img {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }

      .card05 .splide:hover .slide:not(:hover) {
        opacity: 0.3;
      }
}

/*****************
学校パンプレット
*****************/
.school_info1 {
    margin: 3.7rem 0 0rem;
    padding-bottom: 2rem;
}
.school_info_ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;/*子要素が折り返される*/
        -webkit-justify-content: center;
        justify-content: center;
  gap: 1.2rem 1.5rem;
  padding: 0;
  list-style: none;
}
    .school_info_ul > li {
        display: block;
        width: 26.5rem;
        height: auto;
    }
.school_info_panf{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    gap:0 2rem;
}

@media screen and (min-width: 48rem) {
.school_info_ul {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

}


/*****************
学校生活
*****************/
.school_life_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;/*子要素が折り返される*/    
    padding-bottom: 2rem;
    gap: 1rem 0rem;
 
}
.school_life_flex > div {
    width: 100%;

}
    /*　内部ボックス　*/
    .messejiBox1 {
        padding: 1rem 0.8rem;
    }


    .messejiBox1 h2{
        font-size: 1.25rem;
        letter-spacing: 0.1rem;
        color: #fff;
    }
    .messejiBox1 h2.colorBlack , .messejiBox1_inner p.colorBlack{
        color: #212121;
    }
    .messejiBox1_text1{
        font-size: 1.2rem;display: block; font-weight: bold;
    }

    .messejiBox1_inner > p{
        width:auto;
        font-size: 0.7rem;
        color: #fff;
    }

    .messejiBox1_inner > div{
        width: 6rem;
        float:right;
        shape-outside: circle();
        margin: 0.5rem 0 0.5rem 0.5rem;
    }
    .messejiBox1_inner::after{
        content: "";
        display: block;
        clear: both;
    }

    .seito_men_bg{
        /*border-radius:50%;*/
        margin:0 auto;        
        /*background-color:#6495ED;*/
        background: rgba(100,149,237,0.4);        
    }
    .seito_girl_bg{
        border-radius:5%;
        margin:0 auto;       
        /*background-color:#ED64BD;*/
        background: rgba(100,149,237,0.4); 
        /*background: rgba(237,100,189,0.4);*/
    }

.school_life_flex_ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;/*子要素が折り返される*/
        -webkit-justify-content: center;
        justify-content: center;
  gap: 3rem 0rem; /*行　列*/
  padding: 0;
  list-style: none;

}
    .school_life_flex_ul > li {
        display: block;
        width: 100%;
        height: auto;
    }


@media screen and (min-width: 48rem) {
.school_life_flex {
    gap: 2rem;
}
.school_life_flex > div {
    width: calc(50% - 7rem); /* 親のgap(2rem＋2rem)と子messejiBox1のpadding分1.5rem＋1.5remを引く */

}
    .messejiBox1 {
        padding: 1rem 1.5rem;
    }
    .messejiBox1 h2{
        font-size: 1.35rem;
    }
    .messejiBox1_text1 {
        font-size: 1.05rem;
    }
    .messejiBox1_inner > p{
        font-size: 0.9rem;
    }
    .messejiBox1_inner > div{
        width: 7rem;
    }

/*学校生活*/
.school_life_flex_ul {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 2.5rem 2.5rem;/* 行　列*/
}
    .school_life_flex_ul > li {
        max-width: calc(50% - 5rem);/* 親のgap(2.5rem＋2.5rem)と子のpadding（0rem）引く */
        height: auto;
    }
}
@media screen and (min-width: 64rem) {
.school_life_flex {
    gap: 3rem;
    margin-top: 5.5rem;
}
.school_life_flex > div {/* 親のgap(3rem＋3rem)と子messejiBox1のpadding分2.5rem＋2.5remを引く */
    width: calc(50% - 11em);

}
    .messejiBox1 {
        padding: 1rem 2.5rem;
    }
    .messejiBox1 h2{
        font-size: 1.5rem;
    }
    .messejiBox1_text1 {
        font-size: 1.2rem;
    }
    .messejiBox1_inner > p{
        font-size: 0.9rem;
    }
    .messejiBox1_inner > div{
        width: 8rem;
    }
.school_life_flex_ul {
    margin-top: 5.5rem;

}
}


/*背景画像　学校生活*/
.buck-visualBox-school_life {
    position: relative;
    padding: 2.5rem 0 0rem;
    background: no-repeat;
    width:100%; 
    background-size: cover;
    background-position: top;
}

/*****************
クラブ活動
*****************/
.acms-col-sm-6 {
    width: 50%;
}
@media screen and (min-width: 48rem) {
.acms-col-sm-6 {
    width: 25%;
}
}
@media screen and (min-width: 64rem) {
.acms-col-sm-6 {
    width: 20%;
}
}

/*****************
バナー　×４
*****************/
.banner4 {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;/*子要素が折り返される*/
    -webkit-justify-content: center;
    justify-content: center;
    gap: 0.5rem 0.5rem;
    padding: 0;
    list-style: none;
}
    .banner4l > li {
        display: block;
        max-width: calc(50% - 1rem);/* 親のgap(0.5rem＋0.5rem)と子のpadding（0rem）引く */
        height: auto;
    }

@media screen and (min-width: 48rem) {
.banner4 {

    gap: 3rem 3rem;/* 行　列*/
}
    .banner4 > li {
        max-width: calc(50% - 6rem);/* 親のgap(3rem＋3rem)と子のpadding（0rem）引く */
        height: auto;
    }
}

/*****************
バナー　×6
*****************/
.banner6 {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;/*子要素が折り返される*/
    -webkit-justify-content: center;
    justify-content: center;
    gap: 0.5rem 0.5rem;
    padding: 0;
    list-style: none;
}
    .banner6l > li {
        display: block;
        max-width: calc(50% - 1rem);/* 親のgap(0.5rem＋0.5rem)と子のpadding（0rem）引く */
        height: auto;
    }

@media screen and (min-width: 48rem) {
.banner6 {

    gap: 1.5rem 1.5rem;/* 行　列*/
}
    .banner6 > li {
        max-width: calc(33% - 3rem);/* 親のgap(1.5rem＋1.5rem)と子のpadding（0rem）引く */
        height: auto;
    }
}
/*****************
学校紹介ビデオ
*****************/
.video-heading {
  margin: 0 0 0.25rem;
  color:#2B2B2B;
  font-size: 1.1rem;
  line-height: 1.25;
    letter-spacing: 0.1rem;
}
@media screen and (min-width: 48rem) {
.video-heading {
  font-size: 1.3rem;
}
/*59rem=944px以上*/
@media screen and (min-width: 59rem) {
.section-horizontal_video_orgin {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.video-heading {
  padding: 0 1rem 0 0;
  font-size: 1.7rem;
}
}
@media screen and (min-width: 64rem) {
.video-heading {
  font-size: 1.8rem;/**/
}
}
@media screen and (min-width: 74rem) {
.video-heading {
  padding: 0 1.5rem 0 0;
  font-size: 2rem;/**/
}

}