@charset "UTF-8"
/*
  スタイルシート　2025.09.19 改訂 by  H.Ishikawa
  PC対応( web幅370px=左5px+content365px) file名：pc-width370.css
  アコーディオン表示　高萩北小　バージョン
*/


*:before,*:after
{
  box-sizing: border-box;
}


/*
=================================================================================
ＰＣ用学校名と画像を非表示の開始((web幅370px=左5px+画像365px=====================
*/

#school-image1110
{
  display: none;
}

#school-name1110
{
  display: none;
}

/*
ＰＣ用学校名と画像を非表示の終了((web幅370px=左5px+画像365px=====================
=================================================================================
=================================================================================
モバイル用学校名画像表示開始(web横サイズ370px=左5px+画像365px)===================
*/

#school-image370
{
  margin: 5px 0px 5px 5px;
  podding: 0px;
  width: 365px;
  height: 120px;
  vertical-align: bottom;
  object-fit: cover;
}

#school-name370
{
  margin: 0px;
  podding: 0px;
  position:absolute;
  top: 45px;
  left: 19px;
  font-family5: 'Sawarabi Mincho', sans-serif;
  text-shadow: 0 0 0.2em rgba(0,0,0,1);
  font-size: 1.25rem;
  color: rgba(255,255,255);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/*
モバイル用学校名画像表示終了(web横サイズ370px=左5px+画像365px)  ===
=================================================================
=================================================================
body領域開始======================================================
*/

body
{
  background-color: #f9f9f9;
  font-family: sans-s  font-size: 1.0rem;

div
{
  margin: 0px;
}

a
{
  text-decoration: none;
  color: #0066c0; /* Amazon色:#0066c0 Google色:#1a0dab Youtube色:#0033cc */
}
a:hover
{
  text-decoration: underline;
}  
/* 
=================================================================
お知らせ開始 =================================================================
*/

#oshirase
{
  box-sizing: border-box;
  margin: 5px 0px 0px 5px;
  padding: 0px;
  width: 365px;
  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
{
  box-sizing: border-box;
  margin: 0px;
  width: 363px;
  height: 30px;
  background-color: #f1f1f1;
  border-radius: 1px;
  text-align: center;
  vertical-align: middle;
  color: #666666;
  font-size: 1.2rem;
}

#oshirase dl
{
  margin: 5px 0px 5px 0px;
  padding: 5px 10px 5px 10px;
  width: 343px;
  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: 16%;
  margin-left: 0px;
  text-align: left;
  color: #333333;
}

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

#color
{
  color: #dd2266;
  font-weight:  bold;
}
/*
お知らせ終了 =================================================
==============================================================
==============================================================
お知らせ右側のサイド領域の開始 ===============================
*/
#right-side
{
  position: relative;
  box-sizing: border-box;
  margin: 5px 0px 0px 5px;
  padding: 0px;
  width: 365px;
  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 img
{
  width: 363px;
  height:50px;
}


#right-side h2
{
  margin: 0px;
  padding: 0px;
  width: 363px;
  height: 30px;
  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: 3px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
  height: 160px;
  font-size: 0.9rem;
  overflow-y: scroll;
  text-align: left;
  color: #555555;
  list-style-position: inside;
  list-style-type: disc;
}


#symbol ul li
{
  margin-top: 3px;
  padding: 0px;
  line-height:20px;
  text-decoration: none;
  word-break: break-all;
}
symbol ul li::marker
{
 color: #777;
}

#symbol img
{
  padding: 70px 0px 0px 240px;
  width: 100px;
  height: 80px;
}
/*
お知らせ右側のサイド領域の終了 =========================
=======================================================
item(項目)開始 ========================================
*/
.box
{
  box-sizing: border-box;
  margin: 0px;
  padding-top:0px;
}

.item
{
  box-sizing: border-box;
  position: relative;	
  margin:  5px 0px 0px 5px;
  width: 365px;
  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: 30px 0px 30px 0px;
  width:365px;
  left: 0px;
  top: 85px;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.6rem;
  background-color: rgba(255,255,255,0.3);
  text-shadow: 0 0 0.9rem #000;
}

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

audio
{
/*  position: absolute;  */
  top: 235px;
  width: 363px;
  margin:  0px;
  padding: 0px 0px 0px 0px;
  height: 30px;
  background-color: #fefefe;
}

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

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

#display_box_kouka ul
{
  box-sizing: border-box;
  top: 245px;
  width: 363px;
  margin: 0px;
  padding: 0px 5px 0px 10px;
  background-color: #fefefe;
  list-style-type: none;
  font-size: 0.9rem;
  font-weight: normal;
}

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


/*
item（項目）画像直下に表示する２行のリストの終了 =================
=================================================================
item（項目）のアコーディオンの開始 ===============================
*/
.input-display
{
  margin: 0px;
  padding: 0px;
  width: 372px;
}


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

.hidden_box ul
{
  box-sizing: border-box;
  width: 363px;
  margin: 0px; 
  padding: 1px 0px 0px 5px;
  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 li img
{
  width: 345px;
  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
{
  margin: 0px;
  padding: 0px;
  display: none;
}


.input-display
{
  width: 368px;
  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;
}


#links07-1,#links07-2,#links07-3,
#links07-4,#links07-5,#links07-6,
#links07-7,#links07-8,#links07-9,
#links07-10,#links07-11,#links07-12
{
  margin:  0px;
  padding: 0px 5px 0px 5px;
}


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


/*
===============================
アコーディオンメニュー処理開始  ===============================
写真なしテキストのみの場合
*/
#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_bar05:checked ~ #links05 li,
#hidden_box_bar06:checked ~ #links06 li,
#hidden_box_bar10:checked ~ #links10 li,
#hidden_box_bar11:checked ~ #links11 li,
#hidden_box_bar12:checked ~ #links12 li
{
  height: 20px;
  opacity: 1;
}
/*
写真ありの場合の表示
*/

#hidden_box_bar07:checked ~ #links07 li,
#hidden_box_bar08:checked ~ #links08 li,
#hidden_box_bar09:checked ~ #links09 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
{
  display: block;
}


#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
{
  word-break: break-all;
  height: auto;
  vertical-align: midle;
  text-align: left;
}