@charset "UFT-8";

/* Add below content. */
* {
    box-sizing: border-box;
}

body{
/*	background:url(img/bg.jpg) top left repeat-x; */
	padding:0px;
	margin:0px;
}

body,td,h1{
	line-height:140%;
}

/*外枠レイアウト*/

#box{
	width:839px;
	border:none;
}

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


#school_title{
	margin:0px;
	padding:0px;
	background:url(img/top_bg.jpg) top left no-repeat;
	height:202px;
}

#top_border{
	width:798px;
	background-color:#AFB9D3;
	height:20px;
	margin:0px 0px 0px 20px;
}	

#content{
    /*	width:839px;  */
    width : 80vw;
/*    background:url(img/main_bg.gif) top left repeat-y; */
}

#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;
}

#main{
    /*	width:540px;  */
    width : calc(80vw - 220px);
    vertical-align:top;
    padding-top:20px;
}

.main_box{
    /*	width:540px; */
    width : calc(80vw - 220px);
	margin:0px 0px 40px 0px;
}

.main_title{
    background:url(img/main.jpg) left center;
    background-size : cover;
	/*	width:540px;  */
	width : 100%;
	height:25px;
	margin:0px 0px 10px 0px;
	padding:5px 0px 0px 20px;
	color:#003366;
	font-weight:bold;
}

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

#bottom{
	background-color:#B0BAD3;
	color:black;
	font-size:11px;
	text-align:center;
}

/*サブページ共通*/

.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%); */
    width : 90%;
    height :auto;
}

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

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


.kosyo{
    text-align: left;
    white-space:pre-wrap;
}

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

@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;
}

/*Mneu をセレクトできないようにする */
.hm{
    /* テキスト選択を無効化 */
    -webkit-user-select: none; /* Safari用 */
    user-select: none;         /* 標準 */
    
    /* タップ時の青いハイライトを消す（任意） */
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* 学校報 */

.gakkouho{
    width : min(500px, 95%);
    border : 1px solid lightblue;
    margin: 0 auto;
}

.gakkouho 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;
	height : 300px;
	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.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;
}

.wrapper{
      width : 80%;
      margin : 0 auto;
  }
  
  #container{
      display : flex;
      flex-direction : column;
  }

  #maincontent{
      flex-direction : column;
      width : 100%;
      overflow : hidden;
  }


/* Header ****************************/
  #header{
/*      display : flex;
      flex-direction : column;  カルーセルアニメーションと設定がかぶるのでコメントアウトした*/ 
      align-items : center;
/* wrapperでもwidth指定しているので重複している */
 /*    width : 80vw; */
      height : auto;
      margin : 0;
      padding : 0;
  }

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

  
  #titlebox{
      /*  background-color : rgba(0,102,153,0); */
      /*      border : 1px solid red; */
      width  : 100%;
      height : 200px;
      text-align : left ;
      padding-left : auto;
      display : flex;
      justify-content : left;
      align-items : flex-start;
      background-image: url('./img/top-base.jpg');
      background-size : 100% 100%;
  }

@media screen and (max-width : 767px) and (orientation: portrait){
    #titlebox{
	height : 100%;
    }

}
  
  #title > a {
      text-decoration : none;
      color : white;
  }
      
  #subtitle{
      font-size : 2rem;
      padding : 0;
      margin : 10px 0 5px 20px;
      line-height : 1;
  }
  
  #title{
      font-family : sans-serif;
      font-weight : 800;
      font-size : 3rem; /* This size is 64px when base font size is 16px */
      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 : 5px calc(100% / 80);
  }

  #title-prefix{
      font-family : sans-serif;
      font-weight : 800;
      font-size : 0.5em; /* This size is 64px when base font size is 16px */
      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 : 5px calc(100% / 80);
  }

  /* 合川中スペシャル */

  #gallery{
      display : flex;
      flex-direction : row;
      height : 150px;
      justify-content : space-around;
      margin : 2px 0;
  }

  #gallery img{
      width : calc(99% / 6);
      object-fit : fill;
  }

  @media screen and (max-width : 414px){
      #gallery{
	  display : none;
      }
      #gallery2{
	  display : none;
      }
  }
  
  /* フッター */
  footer{
      width : 80vw;
      margin : 10px auto;
  }

  #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%;
	  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.4rem;
	  margin : 20px 10px;
      }
      
      #maincontent{
	  width : 100%;
	  overflow : hidden;
	  margin : 0 auto;
      }

      footer{
	  width : 100%;
      }
  }

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

      #pdfwrapper{
	  height : 300px;
      }
   }

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

  /* 印刷用設定 */

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

   @page {
       size : A4 portrait;
   }