﻿@charset "UTF-8"
/*  スタイルシート　2024.03.05 改訂     by  H.Ishikawa   */
/*  モバイル対応(Width340px)                             */
/*  アコーディオン表示                                   */



/*
=====================================================================================
全体設定開始  =======================================================================
=====================================================================================
*/
*, *:before, *:after             /*　先頭の「＊」で「全ての要素に対して適用させる」*/
{
         box-sizing: border-box; /*　borderを含めてwidthを適用(width=boxborder+padding+content) */
 -webkit-box-sizing: border-box; /*　Chrome、Safariブラウザ対応　*/
    -moz-box-sizing: border-box; /*　Firefoxブラウザ対応         */
      -o-box-sizing: border-box; /*　Operaブラウザ対応　         */
     -ms-box-sizing: border-box; /*　IE、Edgeブラウザ対応　      */
}
/*
=====================================================================================
全体設定終了  =======================================================================
=====================================================================================
*/



/*
=====================================================================================
ＰＣ用学校名画像非表示開始(ページの横サイズ=1020px) =================================
=====================================================================================
*/
#school-image1020
{
  display: none;
}

#school-name1020
{
  display: none;
}
/*
=====================================================================================
ＰＣ用学校名画像非表示終了(ページの横サイズ=1020px) =================================
=====================================================================================
*/



/*
=====================================================================================
モバイル用学校名画像表示開始(ページ横サイズ=340px)　=================================
=====================================================================================
*/
#school-image340
{
  position: relative;
  margin: 0px 0px 5px 5px;
  podding: 0px;
  width: 335px;
  height: 120px;
  vertical-align: bottom;
  object-fit: cover;
}

#school-name340
{
  margin: 0px;
  podding: 0px;
  position:absolute;
  top: 40px;
  left: 8px;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-shadow: 0 0 0.2rem rgba(0,0,0,1);
  font-size: 1.11rem;
  color: rgba(255,255,255);
  white-space: nowrap;
}
/*
=====================================================================================
モバイル用学校名画像表示終了(ページ横サイズ=340px)　=================================
=====================================================================================
*/



/*
=====================================================================================
body領域開始  =======================================================================
=====================================================================================
*/
body                             /*  本文（ボディー）設定　*/
{
  background-color: #f9f9f9;     /*　背景色  */
}


div                              /*  全divの設定  */
{
  margin: 0px;                   /*　div要素の隙間をゼロ  */
}




/*
=====================================================================================
お知らせ開始 ========================================================================
=====================================================================================
*/
#oshirase
{
  box-sizing: border-box;
  margin: 0px 0px 5px 5px;
  padding: 0px;
  width: 335px;
  height: 260px;
  border-radius: 1px;
  background-color: #fefefe;
  border-top: 1px solid;
  border-top-color: #ccc;
  border-right: 1px solid;
  border-right-color: #ccc;
  border-bottom: 1px solid;
  border-bottom-color: #ccc;
  border-left: 1px solid;
  border-left-color: #ccc;
}


#oshirase h2
{
  margin: 0px;
  width: 333px;
  height: 30px;
  background-color: #f1f1f1;
  border-radius: 1px;
  text-align: center;
  vertical-align: middle;
  color: #666666;
  font-size: 1.4rem;
}


#oshirase dl
{
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 10px 10px;
  width: 313px;
  height: 208px;
  font-size: 0.9rem;
  overflow-y: scroll;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

#oshirase dl dt
{
  width: 15%;
  margin-left: 0px;
  text-align: left;
  color: #333333;
}

#oshirase dl dd
{
  width: 85%;
  margin-left: 0px;
  color: #333333;
}

#oshirase dl dd a
{
 /* font-weight: bold; */
  text-decoration: none;
}

#oshirase dl dd a    /*  :link  */
{
  color:#1e50a2;
}

#oshirase dl dd a:visited
{
  color:#1e50a2;
}


#oshirase dl dd a:hover
{
  color:#ff7150;
}


/*
=====================================================================================
*/
#color
{
  color: #dd2266;
  font-weight:  bold;
}
/*
=====================================================================================
お知らせ終了 ========================================================================
=====================================================================================
*/


/*
=====================================================================================
お知らせ右側のサイド領域の開始 ======================================================
=====================================================================================
*/
#right-side
{
  position: relative;
  box-sizing: border-box;
  margin: 0px 0px 5px 5px;
  padding: 0px;
  width: 335px;
  height: 260px;
  border-radius: 1px;
  background-color: #fefefe;
  border-top: 1px solid;
  border-top-color: #ccc;
  border-right: 1px solid;
  border-right-color: #ccc;
  border-bottom: 1px solid;
  border-bottom-color: #ccc;
  border-left: 1px solid;
  border-left-color: #ccc;
}


#right-side h2
{
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  width: 333px;
  height: 30px;


    /*  --------- h2の各中学校の背景色情報  ---------   */
    /*  高麗中　：#34A853　　　高麗川中：#cca6bf(紫)    */
    /*  高萩中  ：#9fc24d　　　高根中　：#65ab31        */
    /*　高萩北中：#006e54　　　武蔵台小中：#00dd00      */
    /*  ---------------------------------------------  */

  background-color: #38b48b;
  border-radius: 1px;
  text-align: center;
  vertical-align: middle;
  color: #fefefe;
  font-size: 1.2rem;
}


#right-side ul
{
  margin: 0px 5px 0px 0px;
  padding: 0px 5px 0px 25px;
  width: 303px;
  height: 228px;
  font-size: 1.0rem;
  overflow-y: scroll;
  text-align: left;
  color: #555555;
  list-style-type: circle;
}


#right-side ul li
{
  margin-top:13px;
  padding: 0px;
  line-height:20px;
  word-break: break-all;
}


#right-side img
{
  position: absolute;
  top: 160px;
  left: 215px;
  width: 75px;
  height: 90px;
}



/*
=====================================================================================
お知らせ右側のサイド領域の終了 ======================================================
=====================================================================================
*/



/*
=====================================================================================
item(項目)開始  =====================================================================
=====================================================================================
*/
.box
{
  box-sizing: border-box;
  margin: 0px;
  padding-top: 0px;
}


.item
{
  box-sizing: border-box;
  position: relative;	
  margin:  0px 0px 5px 2px;
  width: 338px;
  padding: 0px;
  background-color: #fefefe;
  border-top: 1px solid;
  border-top-color: #ccc;
  border-right: 1px solid;
  border-right-color: #ccc;
  border-left: 1px solid;
  border-left-color: #ccc;
}


/*　-------　　新バージョン　開始   --------   */
.item_click h2
{
  position: absolute;
  margin: 0px;
  padding: 10px 0px 10px 0px;
  width:300px;
  left:16px;
  top: 75px;
  text-align: center;
  color: #ffffff;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  background-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(0px);
/*  background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));  */
  text-shadow: 0 0 0.9rem #000;
}
/*　-------　　新バージョン　終了   --------   */

.item_click img
{
  margin:  0px;
  padding: 0px;
  width: 338px;
  object-fit: fill;
}


audio
{
  width: 300px;
  height: 12px;
}


/*
=====================================================================================
item（項目）画像直下に表示する２行のリストの開始 ====================================
=====================================================================================
*/
.display_box ul
{
  box-sizing: border-box;
 /* position: absolute; */
  top: 215px;
  width: 330px;
  margin: 0px 0px 0px 5px;
  padding: 0px 0px 0px 0px;
  list-style-type: none;
  font-size: 0.9rem;
}

/*　div背景色設定   ********/
     .item         {background-color: #fefefe;}
/*   .item_click   {background-color: #00ff00;}   */
/*   .display_box  {background-color: #00ff00;}   */
     .hidden_box   {background-color: #fefefe;}
     .input-display{background-color: #fefefe;}

/*　文字背景色  　　 *******/
     .ul_color li,.a_color,.label_color
{
        background-color: #fefefe;
/*　文字色設定      ********/
        color: #333333;
}

a
{
  color: #1a0dab;
  text-decoration: none;
  font-weight: bold;
}


.display_box li
{
  margin-top: 0px;
  padding: 0px 0px 0px 5px;
  line-height: 22px;
  text-align: left;
  text-decoration: none;
  word-break: break-all;
}

/*
=====================================================================================
item（項目）画像直下に表示する２行のリストの終了 ====================================
=====================================================================================
*/



/*
=====================================================================================
item（項目）のアコーディオンの開始 ==================================================
=====================================================================================
*/
.input-display
{
  margin: 0px;
  padding: 0px;
  width: 333px;
}


.input-display input
{
  margin: 0px 0px 0px 10px;
  padding: 0px;
  position: relative;
  top: 2px;
}


.hidden_box
{
/*  position: relative; */
  top: 36px;
}


.hidden_box ul
{
  box-sizing: border-box;
  width: 336px;
  margin: 0px; 
  padding: 1px 0px 0px 0px;
  background-color: #fefefe;
  list-style-type: none;
  font-size: 0.9rem;
}


.hidden_box ul li
{
  margin-top: 0px;
  padding: 0px 0px 0px 5px;
  line-height: 22px;
                     height: 0px;
  text-decoration: none;
  text-align: left;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
   transition: all 0.5s;
}


.hidden_box img
{
  width: 313px;  /* 333-10-10 */
  margin:  0px;
  padding: 0px 5px 0px 0px;
  height: all;
  object-fit: fill;
}


.hidden_box a
{
  text-decoration: none;
}


#hidden_box_bar01,
#hidden_box_bar02,
#hidden_box_bar03,
#hidden_box_bar04,
#hidden_box_bar05,
#hidden_box_bar06,
#hidden_box_bar07,
#hidden_box_bar08,
#hidden_box_bar09,
#hidden_box_bar10,
#hidden_box_bar11,
#hidden_box_bar12,
#hidden_box_bar13,
#hidden_box_bar14,
#hidden_box_bar15
{
  margin: 0px;
  padding: 0px;
  display: none;
}


.input-display
{
  margin:  0px;
  padding: 0px 0px 0px 0px;
  display: none;
}

label
{
  margin:  0px;
  padding: 0px;
  height: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  color: #1a0dab;
  font-weight: bold;
}


.links01 ul
{
  margin:  0px;
  padding: 0px 0px 0px 5px;
}


#links01-1,#links01-2,
#links02-1,#links02-2,
#links03-1,#links03-2,
#links04-1,#links04-2,
#links05-1,#links05-2,
#links06-1,#links06-2,
#links07-1,#links07-2,#links07-3,#links07-4,#links07-5,#links07-6,#links07-7,#links07-8,#links07-9,#links07-10,#links07-11,#links07-12,
#links08-1,#links08-2,
#links09-1,#links09-2,
#links10-1,#links10-2,
#links11-1,#links11-2,
#links12-1,#links12-2,
#links13-1,#links13-2,
#links14-1,#links14-2,
#links15-1,#links15-2
{
  margin:  0px;
  padding: 0px 0px 0px 5px;
}


.input-display-ul 
{
  width: 340px;
  margin:  0px;
  padding: 0px 0px 0px 5px;
}


/*
===============================
アコーディオンメニュー処理開始  ===============================
写真なしテキストのみの場合
*/
#hidden_box_bar01:checked ~ .links01 li,
#hidden_box_bar03:checked ~ .links03 li,
#hidden_box_bar04:checked ~ .links04 li,
#hidden_box_bar05:checked ~ .links05 li,
#hidden_box_bar06:checked ~ .links06 li,
#hidden_box_bar11:checked ~ .links11 li,
#hidden_box_bar12:checked ~ .links12 li
{
  height: 20px;
  opacity: 1;
}
/*
写真ありの場合の表示
*/
#hidden_box_bar02:checked ~ .links02 li,
#hidden_box_bar07:checked ~ .links07 li,
#hidden_box_bar08:checked ~ .links08 li,
#hidden_box_bar09:checked ~ .links09 li,
#hidden_box_bar10:checked ~ .links10 li,
#hidden_box_bar13:checked ~ .links13 li,
#hidden_box_bar14:checked ~ .links14 li,
#hidden_box_bar15:checked ~ .links15 li
{
  height: auto;
  opacity: 1;
}


#hidden_box_bar01:checked ~ .input-display,
#hidden_box_bar02:checked ~ .input-display,
#hidden_box_bar03:checked ~ .input-display,
#hidden_box_bar04:checked ~ .input-display,
#hidden_box_bar05:checked ~ .input-display,
#hidden_box_bar06:checked ~ .input-display,
#hidden_box_bar07:checked ~ .input-display,
#hidden_box_bar08:checked ~ .input-display,
#hidden_box_bar09:checked ~ .input-display,
#hidden_box_bar10:checked ~ .input-display,
#hidden_box_bar11:checked ~ .input-display,
#hidden_box_bar12:checked ~ .input-display,
#hidden_box_bar13:checked ~ .input-display,
#hidden_box_bar14:checked ~ .input-display,
#hidden_box_bar15:checked ~ .input-display
{
  display: block;
}


#hidden_box_bar01-1:checked ~ #links01-1 li,
#hidden_box_bar01-2:checked ~ #links01-2 li,
#hidden_box_bar01-3:checked ~ #links01-3 li,
#hidden_box_bar02-1:checked ~ #links02-1 li,
#hidden_box_bar02-2:checked ~ #links02-2 li,
#hidden_box_bar02-3:checked ~ #links02-3 li,
#hidden_box_bar03-1:checked ~ #links03-1 li,
#hidden_box_bar03-2:checked ~ #links03-2 li,
#hidden_box_bar03-3:checked ~ #links03-3 li,
#hidden_box_bar04-1:checked ~ #links04-1 li,
#hidden_box_bar04-2:checked ~ #links04-2 li,
#hidden_box_bar04-3:checked ~ #links04-3 li,
#hidden_box_bar05-1:checked ~ #links05-1 li,
#hidden_box_bar05-2:checked ~ #links05-2 li,
#hidden_box_bar05-3:checked ~ #links05-3 li,
#hidden_box_bar06-1:checked ~ #links06-1 li,
#hidden_box_bar06-2:checked ~ #links06-2 li,
#hidden_box_bar06-3:checked ~ #links06-3 li,
#hidden_box_bar07-1:checked ~ #links07-1 li,
#hidden_box_bar07-2:checked ~ #links07-2 li,
#hidden_box_bar07-3:checked ~ #links07-3 li,
#hidden_box_bar07-4:checked ~ #links07-4 li,
#hidden_box_bar07-5:checked ~ #links07-5 li,
#hidden_box_bar07-6:checked ~ #links07-6 li,
#hidden_box_bar07-7:checked ~ #links07-7 li,
#hidden_box_bar07-8:checked ~ #links07-8 li,
#hidden_box_bar07-9:checked ~ #links07-9 li,
#hidden_box_bar07-10:checked ~ #links07-10 li,
#hidden_box_bar07-11:checked ~ #links07-11 li,
#hidden_box_bar07-12:checked ~ #links07-12 li,
#hidden_box_bar08-1:checked ~ #links08-1 li,
#hidden_box_bar08-2:checked ~ #links08-2 li,
#hidden_box_bar08-3:checked ~ #links08-3 li,
#hidden_box_bar09-1:checked ~ #links09-1 li,
#hidden_box_bar09-2:checked ~ #links09-2 li,
#hidden_box_bar09-3:checked ~ #links09-3 li,
#hidden_box_bar10-1:checked ~ #links10-1 li,
#hidden_box_bar10-2:checked ~ #links10-2 li,
#hidden_box_bar10-3:checked ~ #links10-3 li,
#hidden_box_bar11-1:checked ~ #links11-1 li,
#hidden_box_bar11-2:checked ~ #links11-2 li,
#hidden_box_bar11-3:checked ~ #links11-3 li,
#hidden_box_bar12-1:checked ~ #links12-1 li,
#hidden_box_bar12-2:checked ~ #links12-2 li,
#hidden_box_bar12-3:checked ~ #links12-3 li,
#hidden_box_bar13-1:checked ~ #links13-1 li,
#hidden_box_bar13-2:checked ~ #links13-2 li,
#hidden_box_bar13-3:checked ~ #links13-3 li,
#hidden_box_bar14-1:checked ~ #links14-1 li,
#hidden_box_bar14-2:checked ~ #links14-2 li,
#hidden_box_bar14-3:checked ~ #links14-3 li,
#hidden_box_bar15-1:checked ~ #links15-1 li,
#hidden_box_bar15-2:checked ~ #links15-2 li,
#hidden_box_bar15-3:checked ~ #links15-3 li
{
  word-break: break-all;
  height: auto;
  vertical-align: midle;
  text-align: left;
}
