@charset "UFT-8";

/*                                  */
* {
    box-sizing: border-box;
}

/* css normalization */

*{
    margin : 0;
    padding : 0;
}

/* html */

html{
    font-size : 16px;
}

/* ページ全体を包むクラス */
.wrapper{
    width : 80%;
    max-width : 1000px;
    margin : 0 auto;
    background-color : lightyellow;
  }
  
  #container{
      display : flex;
      flex-direction : row;
  }

  #maincontent{
      flex-direction : column;
      width : 100%;
      overflow : hidden;
      margin : 0 10px;
      padding : 5px 5px;
  }

  /* Header  ----------------------------------------- */
  
  #header{
      display : flex;
      flex-direction : row;
      align-items : flex-start;
      width : 100%;
      height : 300px; 
      margin : 0;
      padding : 0;
      background-image: url('../img/school.jpg');
      background-size : cover;
      background-repeat : no-repeat;
  }

  .headerimg{
      height : 100%;
      width : calc(80vw / 3);
      object-fit : cover;
  }

  
  #titlebox{
      background-color : rgba(0,102,156,0.5);
      /*      border : 1px solid red; */
      width  : 18rem; /* This size is 5 plus 1 characters by 3 */
      height : 50%;
      text-align : left ;
      display : flex;
      justify-content : center;
      align-items : center;
  }
  
  #title > a {
      text-decoration : none;
      color : white;
  }

  #title{
      font-family : sans-serif;
      font-weight : 800;
      font-size : 3rem;
      color : white;
      line-height : 1; /* this attribute is important for large size text place inside a div box */
      /*    margin-top : calc((200px - 128px)/2); */
      margin : 0;
  }

  #title::before{
      content : "秋田県北秋田市立\A";
      font-size : 0.5em;
      white-space : pre;
  }


/* Footer ------------------------------------------ */
  
  footer{
      width : 100%;
      margin : 10px auto;
      padding : 0 10px;
      background-color : rgba(100,200,200,0.5);
  }
  
  .footer_info{
      padding : 10px 10px;
      font-weight:bold;
      font-size:105%;
      color:#003063;
  }


  /* Other one ----------------------------------- */

  
  #notice{
      text-align : right;
  }


  .index > img{
      width : 30px;
      height : auto;
      vertical-align : middle;
  }
  
  .index > font{
      vertical-align : middle;
  }
  
  @media screen and (max-width : 736px){
      .wrapper{
	  width : 100%;
	  max-width :  1000px;
	  magin : 0;
      }

      #container{
	  flex-direction : column;
      }
      
      #header {
	  width : 100vw;
	  height : 100px;
      }
      
      .headerimg{
	  width : calc(100% / 3);
	  object-fit : cover;
      }

      #titlebox{
	  width : calc(100% /3);
      }
	  
      #title{
	  font-size : 1.2rem;
	  margin : 20px 10px;
      }
      
      #maincontent{
	  width : 100%;
	  overflow : hidden;
	  margin : 0 auto;
      }

      footer{
	  width : 100%;
      }
      .footer_info{
	  font-size : 1rem;
      }
      
  }

   @media screen and (max-width : 390px){
      #title{
	  font-size : 1.1rem;
      }
   }

   @media screen and (max-width : 375px){
      #title{
	  font-size : 1rem;
      }
  }



/* 見出し用---------------------------------------------------- */

h1{
	padding:0px;
	margin:0px 0px 0px 20px;
	color:white;	
}

.headline{
    font-family : sans-serif;
    border-top : solid green 2px;
 /*   border-bottom : solid green 2px;  */
    margin : 2px 0px;
}

.headline::before{
    content : url("../img/school-icon32.png");
    vertical-align : sub;
    margin-right : 0.5rem;
}

.piano{
    font-family : sans-serif;
    border-top : solid green 2px;
/*    border-bottom : solid green 2px; */
    margin : 2px 0px;
}

.piano::before{
    content : url("../img/piano.png");
    vertical-align : sub;
    margin-right : 0.5rem;
}


.info_title{   
    font-weight:bold;
    font-size:105%;
    color:#003063;
}


/* Table ----------------------------------- */

#main_table{
    /*	width:798px;  */
/*    width: 75vw; */
    margin : 0 auto;
    border:none;
}

#menu{
    width:235px; 
    vertical-align:top;
}

#menu_table{
	margin-top:10px;
	width:235px;
}

.menu_box_td{
	background:url(img/menu.jpg) left center no-repeat;
	height:53px;
	width:235px;
	padding:3px 0px 0px 30px;
}

.menu_box_td a{
	color:#006699;
	text-decoration:none;

}

.menu_box_td a:hover{
	color:#993366;
}


/*サブページ共通*/

.return{
	text-align:right;
	padding-right:10px;
	margin-bottom:60px;
}

/*カレンダー*/

.event_table{
	margin-bottom:30px;
}

.day{
	width:30px;
	text-align:center;
	background-color:#e5e5e5;
	padding:4px;
}

.event{
	width:400px;
	text-align:center;
	background-color:#e5e5e5;
	padding:4px;
}

.td{
	padding:4px;
	text-align:center;
}

.td2{
	padidng:4px;
}

.td_month{
	padding:4px;
	text-align:center;
	width:30px;
}

.td2_month{
	paddidng:4px;
	width:420px;
	line-height:140%;
}

/*年間行事予定*/

.event_year_list ul{
	padding:20px 0px 60px 10px;
	margin:0px;
	list-style:none;
	}

.event_year_list li{
	padding:0px;
	margin:0px;
	float:left;
	width:80px;
	border-right:1px dotted #666666;
	text-align:center;
}

.event_year{
	border-left:3px solid black;
	border-bottom:1px solid black;
	padding:4px;
	font-weight:bold;
	width:520px;
	margin-left:10px;
	margin-bottom:10px;
}


/*学校概要*/

.gaiyou_table{
	width: min(500px ,100%);
	background-color:#999999;
	margin-bottom:20px;
	border : 1px solid lightblue;
}

.gaiyou_td1{
	width:100px;
	text-align:center;
	padding:4px;
	background-color:#e5e5e5;
}

.gaiyou_td2{
	width:380px;
	background-color:white;
	padding:4px;
}

.gaiyou_title{
	font-weight:bold;
	color:white;
	font-size:105%;
	margin:0px 0px 10px 10px;
	border-left:10px solid #cc0000;
	background-color:#333333;
	padding:3px;
}

.gaiyou_text{
	margin:0px 20px 20px 20px;
	line-height:140%;
}

.gaiyou_text ol,.gaiyou_text ul{
	margin:5px 0px 0px 30px;
	padding:0px;
}

.gaiyou_text li{
	padding:0px;
	margin:0px 0px 5px 0px;
}

.gaiyou_mini_title{
	color:#003300;
	width:500px;
	padding:2px;
	background:#99cc00;
	font-weight:bold;
}


/*沿革*/

.enkaku_table{
    background-color:#999999;
    width : min(600px ,100%);
    height :auto;
    border : solid 2px midnightblue;
}

.enkaku_td1{
	background-color:#e5e5e5;
	width:200px;
	padding:4px;
	font-size : 1em;
}

.enkaku_td2{
	background-color:white;
	width:500px;
	padding:4px;
	font-size: 1em;
}

@media screen and (max-width : 736px){
    .enkaku_td1{
	font-size : 0.5rem;
    }

    .enkaku_td2{
	font-size: 0.5rem;
    }

    .kosyo > span{
	font-size : 1rem;
    }
}

iframe.menu{
    width : 238px;
    height : 798px;
}

iframe.main{
    width : calc(80vw - 220px);
    height : 800px;
}


/* 学校報 */

.gakkouhou{
    width : min(500px, 100%);
    border : 1px solid lightblue;
}

.gakkouhou td{
    border : 1px solid lightblue;
}


/*  Kato wrote in 2024 */


#pdfwrapper {
    width : 100%;
    height : 100vh;
    padding-right : 10px;
    padding-left : 10px;
}

#pdf{
    width : 100%;
    height : 100%;
    background-color : white;
    margin-right :10px;
}


@media (max-width : 414px){

    #pdfwrapper{
	width : 100vw;
	padding-right : 10px;
	padding-left : 10px;

    }
    #pdf{
	width : 100%;
    }
}


/* カレンダー用  */

iframe.calender{
    width : 100%;
    height : 800px;
    border : none;
    padding-right : 20px;
}

#cal2{
    display : none;
}


@media (max-width : 414px){
    iframe.calender{
	padding-right: 10px;
	padding-left : 10px;
    }

    #cal1{
	display : none;
    }
    #cal2{
	display : block;
    }

    .calhead{
	width : 100%;
    }
}

/* 新着情報 ブログ */

iframe.topics {
    width : 100%;
    height : 800px;
}

iframe.main2{
    width : 100%;
    height : 100vh;
}


iframe.granddesign{
    width : calc(80vw - 238px);
    height: 500px;
    margin-bottom : 20px;
}


@media screen and (max-width : 700px){
    iframe.granddesign{
	width : 100%;
	height: 500px;
	margin-bottom : 20px;
	
    }
}


/*  Kato wrote */

#song>img{
    width : calc(100% - 40px);
    padding : 20px;
    object-fit : contain;
}

.tablestyle{
    display : flex;
    flex-wrap : wrap;
    width : 100%;
    background-color : rgba(128,256,128,0.5);
}

.cell1{
    flex : 0 0 calc(100%/2);
    height : 200px;
    padding : 5px auto;
}

.cell1 img{
    object-fit : contain;
    width : 100%;
    max-height : 200px;
}

@media screen and (max-width : 390px){
    .tablestyle{
	flex-direction : column;
	flex-wrap : nowrap;
    }
}



   /* 印刷用設定 */

   @media print {
       #header , #mainmenu , footer , .no_print{
	   display : none;
       }
   }

   @page {
       size : A4 portrait;
   }