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



/*
=====================================================================================
全体設定開始  =======================================================================
=====================================================================================
*/
*, *: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
{
  position: relative; 
  margin: 0px 0px 5px 5px;
  podding: 0px;
  width: 1015px;
  height: 170px;
  vertical-align: bottom;
  object-fit: cover;
}



#school-name1020
{
  position:absolute;
  margin: 0px 0px 5px 5px;
  podding: 0px;
  width: 1015px;
  height: 170px;
  top: 57px;
  left: 65px;
  letter-spacing: 0.03em;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-shadow: 0 0 0.2em rgba(0,0,0,1);
  font-size: 3.0rem;
  color: rgba(255,255,255);
  white-space: nowrap;
}
/*
=====================================================================================
ＰＣ用学校名と画像表示終了(ページの横サイズ=1020px) ===================================
=====================================================================================
*/



/*
=====================================================================================
モバイル用学校名と画像を非表示の開始(ページ横サイズ=340px)　===========================
=====================================================================================
*/
#school-image340
{
  display: none;
}

#school-name340
{
  display: none;
}
/*
=====================================================================================
モバイル用学校名と画像を非表示の終了(ページ横サイズ=340px)　===========================
=====================================================================================
*/



/*
=====================================================================================
body領域開始  =======================================================================
=====================================================================================
*/
body
{
  background-color: #f9f9f9;
}


div
{
  margin: 0px;
}



/*
=====================================================================================
お知らせ領域とright-side領域を横並び開始　===========================================
=====================================================================================
*/
.box0                            /*  「お知らせ」領域＋「right-side」境域  */
{
  display:flex;
}
/*
=====================================================================================
お知らせ領域とright-side領域を横並び終了　===========================================
=====================================================================================
*/



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


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


#oshirase dl
{
  margin: 0px;
  padding: 10px 5px 10px 10px;
  width: 658px;                  /*　658px=680-10-5-5-1-1  */
  height: 208px;                 /*　208px=260-30(h2)-1-1-10-10  */
  font-size: 1.1rem;
  overflow-y: scroll;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

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

#oshirase dl dd
{
  width: 90%;
  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: #fff;
  border-right: 1px solid;
  border-right-color: #fff;
  border-bottom: 1px solid;
  border-bottom-color: #fff;
  border-left: 1px solid;
  border-left-color: #fff;
}

#right-side img
{
  width: 331px;
  height:50px;
}


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


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

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


#symbol
{
  position: relative;
  padding: 0px;
}


#symbol ul
{
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px 0px 0px 0px;
  padding: 0px 10px 10px 30px;
  height: 160px;
  font-size: 0.9rem;
  overflow-y: scroll;
  text-align: left;
  color: #555555;
  list-style-type: circle;
}


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


#symbol ul li a
{
 /* font-weight: bold; */
  text-decoration: none;
}

#symbol ul li a:link
{
  color:#1e50a2;
}

#symbol ul li a:visited
{
  color:#1e50a2;
}


#symbol ul li a:hover
{
  color:#ff7150;
}


#symbol img
{
  padding: 70px 0px 0px 190px;
  width: 125px;
  height: 100px;
}



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



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


.box1,.box2,.box3,.box4,.box5
{
  display:flex;
  text-align: left;
}


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

/*　旧バージョン
.item_click h2
{
  position: absolute;
  margin: 0px;
  width: 333px;
  top: 90px;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 0.9em #000;
}
*/

/*　改良バージョン */
.item_click h2
{
  position: absolute;
  margin: 0px 0px 0px 0px;

  width: 333px;
  line-height: 2.5;
  top: 146px;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  color: #ffffff;
  background-color: rgba(25,47,96,0.5); 
}
/* */

.item_click img
{                              	 /*　重要：画像サイズを横333px：縦210pxに加工必須　*/
  margin:  0px;
  padding: 0px;
  width: 333px;
  object-fit: fill;
/*　「height:210px;」を設定してはいけない　画像以下のリストに影響あり　*/
}


#audio
{
  position: absolute;
  top:220px;
  margin: 0px 0px 0px 15px;
　padding: 0px;
}
audio
{
  width: 300px;
  height: 30px;
}


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


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


.display_box a
{
/* text-decoration: underline dotted; */
  text-decoration: none;
  color: #555555;
}


.display_box a:link
{
  color:#1e50a2;
}

.display_box a:visited
{
  color:#1e50a2;
}


.display_box a:hover
{
  color:#ff7150;
}


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



/*
=====================================================================================
item（項目）のアコーディオンの開始 ==================================================
=====================================================================================
*/
input
{
  display:none;
}


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


.hidden_box li
{
  margin-top: 0px;
  padding: 0px;
  height: 0px;
  color: #555555;
  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 li img
{
  width: 303px;
  margin:  0px;
  padding: 0px 10px 0px 0px;
  height: all;
  object-fit: fill;
}


.hidden_box a
{
/* text-decoration: underline dotted; */
  text-decoration: none;
  color: #555555;
}


.hidden_box a:link
{
  color:#1e50a2;
}

.hidden_box a:visited
{
  color:#1e50a2;
}


.hidden_box a:hover
{
  color:#ff7150;
}


label
{
  display: inline-block;
  margin: 0px;
  padding: 0px;
  height: 256px;
  background-color: #fefefe;
  cursor: pointer;
}



/*
=====================================================================================
アコーディオンメニュー処理開始  =====================================================
=====================================================================================

=================================================================
改行なし and 写真なしのitem（項目）のアコーディオン処理開始  ======
=================================================================  
*/
#hidden_box_bar01:checked ~ #links01 li,  /*　項目１　「沿革」　　　　　　*/
#hidden_box_bar02:checked ~ #links02 li,  /*　項目２　「概要」　　　　　　*/
#hidden_box_bar03:checked ~ #links03 li,  /*　項目３　「校歌」　　　　　　*/
#hidden_box_bar04:checked ~ #links04 li,  /*　項目４　「行事予定」　　　　*/
#hidden_box_bar10:checked ~ #links10 li,  /*　項目１０「ＰＴＡ」　　　　　*/
#hidden_box_bar11:checked ~ #links11 li,  /*　項目１１「所在地・☎」　　　*/
#hidden_box_bar12:checked ~ #links12 li   /*　項目１２「リンク」　　　　　*/
{
  height: 20px;
  opacity: 1;
}
/*
=================================================================
改行なし and 写真なしitem（項目）のアコーディオン処理終了  ========
=================================================================
*/



/*
=================================================================
改行あり or 写真ありのitem（項目）のアコーディオン処理開始  =======
=================================================================
*/
#hidden_box_bar05:checked ~ #links05 li,  /*　項目５　「たより・お知らせ」*/
#hidden_box_bar06:checked ~ #links06 li,  /*　項目６　「カリキュラム」 　　 */
#hidden_box_bar07:checked ~ #links07 li,  /*　項目７　「トピックス」   　　 */
#hidden_box_bar08:checked ~ #links08 li,  /*　項目８　「まなび」　　　　　　*/
#hidden_box_bar09:checked ~ #links09 li   /*　項目９　「通級指導教室わかたけ」*/
{
  word-break: break-all;
  height: auto;
  vertical-align: midle;
  text-align: left;
}
/*
=================================================================
改行あり or 写真ありのitem（項目）のアコーディオン処理終了  =======
=================================================================

=====================================================================================
アコーディオンメニュー処理終了  =====================================================
=====================================================================================


=====================================================================================
item(項目)終了  =====================================================================
=====================================================================================
*/