@charset "UTF-8";
:root {
	--text-b-color: #231815;
	--text-w-color:white;
	--accent-color:#005799;
	--point-color:#03B8DF;
	--gray-color:#999999;
  --border-color:#ccc;
	--bg-color:#f7f7f7;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,form,input,button,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}


/*clear fix*/
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix { height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/*html*/
a {color:#005799; text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: underline;}

a img{ border:0;}

h1,h2,h3,h4,h5{ margin:0; padding:0;}

.clear { clear:both;}

.anno { color: var(--gray-color);}
.notice { font-weight: bold; color: #FF0000;}
.center { text-align:center}

.fl_left{ float:left; padding-right:10px}
.fl_right{ float:right; padding-left:10px}

/*body*/
body { 
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin:0; padding:0; 
  color:var(--text-b-color);
  font-size: 16px;
  position: relative;
}
img{
  max-width: 100%;
}
@media (max-width: 768px) {
  img{
    max-width: 100%;
  }
  body {
    font-size: 14px;
  }
  img.fl_right{
    float: none;
    display: block;
    margin: auto;
  }
}


/*header*/
header{ width: 100%;}
header .inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 960px;
  margin: auto;
}
header div#logo{}
header div#logo a{ display:block;background:url(images/logo.gif) no-repeat left center/100%; width:153px; height:46px; margin:7px 0 5px 0; text-indent:-9999px}
header div#link{ padding-top:10px; font-size: 14px;}
header div#link #bt{ display: flex; justify-content: flex-end;}
header div#link #bt .twitterBt{ width:100px; display:inline-block;}
header div#link #bt a{}
header div#link #bt a.tweet{ background:url(images/tweet_bt.png) no-repeat; width:90px;}
header div#link #bt a.clap{
   background:var(--accent-color) url(images/clap_bt.png) no-repeat center center/80%; 
   width:95px; height:22px; 
   text-indent:-9999px;
   display: inline-block;
  margin-right:5px;
  border-radius:5px;
}
header div#link #bt a.tw{
  background:#000; 
  width:95px; height:22px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right:5px;
  border-radius:5px;
  line-height: 1em;
}
header div#link #bt a.tw:hover{
  text-decoration: none;
  opacity: 0.7;
}
header div#link #bt a.tw:before{
  content: "";
  background:url(images/x_icon.svg) no-repeat center center/100%;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 0.2em;
}

header div#link #sublink{ padding:5px 0}
header div#link #sublink a{ display:inline-block; background:url(images/circle.gif) no-repeat left center/10px; padding:0 15px;}
/*wrapper*/
#wrapper{ width:100%; padding:0; margin:0 auto; line-height:1.6em; background:white;}

#wrapper h1{ background:url(images/mainImg.jpg) no-repeat center top/100%; width:100%; height:294px; text-indent:-9999px;}

/*contents*/
#contents { 
  max-width:960px; 
  padding:0; 
  margin:30px auto; 
  line-height:1.6em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  #wrapper h1{ 
    background:url(images/mainImg_sp.jpg) no-repeat center top/100%;
    width: 100%;
    height: 250px;
  }
  header div#link #bt a.tw{
    width: 80px;
    height: 20px;
  }
  header div#link #bt .twitterBt{
    width: 82px;
    height: 20px;
  }
  header div#link #bt a.clap{
    height: 20px;
    width: 80px;
    background-size: 90%;
  }
  header div#link #sublink{
    display: none;
  }
  header div#link{
    margin-right: 45px;
    padding-top: 0;
  }
  header div#logo{
    padding-left: 10px;
  }
  header div#logo a{
    width: 103px;
    height: 31px;
  }
  #contents{
    margin: 0px 0 0 0;
  }
  #contents.second{
    flex-direction: column-reverse;
  }
}

/*global navi*/
nav{ background:var(--accent-color);}
nav ul{ max-width:960px; margin:0 auto; display: flex;}
nav ul li{ width: 20%;}
nav ul li.sp_only{
  display: none;
}
nav ul li a{ display:block; background:var(--accent-color); color: white; width: 100%; padding: 20px 0; text-align: center; font-size: 16px;
font-weight: bold;}
nav ul li a:hover{
  text-decoration: none;
  background: var(--accent-color);
}
#nav_toggle{
  display: none;
}
@media (max-width: 768px) {
  nav{ 
    display:none;
    position: fixed;
		padding-top: 30px;
		top:0;
		width: 100%;
		height: 100%;
		left: 0;
		overflow-y: scroll;
    background: var(--accent-color);
    z-index: 90;
  }
  nav ul{
    display: block;
  }
  nav ul li.sp_only{
    display: block;
  }
  nav ul li{
    width: 100%;
    text-align: center;
  }
  #nav_toggle {
      display: block;
      width: 30px;
      height: 30px;
      position: fixed;
      right: 10px;
      top: 10px;
      z-index: 100;
  }
  #nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 2px;
		background: var(--accent-color);
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:10px;
	}
	#nav_toggle span:nth-child(3){
		top:20px;
	}
	.open #nav_toggle span{
    background: white;
  }
	.open #nav_toggle span:nth-child(1) {
		top: 12px;
	   -webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.open #nav_toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav_toggle span:nth-child(3) {
		top: 12px;
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
}

/*breadclumb*/
div.breadclumb{ background:#000; color:white; padding:5px 20px}
div.breadclumb a{ color:white}

/*Top main*/
#contents #main{ width:710px; margin:10px 0;}
#contents #main p{ margin-bottom:20px; line-height:1.8em}
#contents #main p small{
  font-size: 0.9em;
}
#contents #main div.newsBox{ padding:10px 0;}
#contents #main div.newsBox h3{ border-top: 5px solid var(--accent-color); border-bottom: 1px dotted var(--accent-color); font-size: 18px; font-weight: bold; padding: 15px 5px;
 background: white; position: relative;}
#contents #main div.newsBox ul{ padding:10px 5px;}
#contents #main div.newsBox ul li{ background:url(images/arrow.gif) no-repeat left 7px; padding-left:15px; margin-bottom:10px;}
#contents #main div.newsBox ul li span.date{ padding-right:5px;}
#contents #main div.newsBox h3 a.launch{ 
  position:absolute; right: 0; top: 50%; transform: translateY(-50%); background:var(--bg-color); color:var(--gray-color); display: block;
  padding: 5px 10px; font-size: 12px; font-weight: normal;}
#contents #main div.newsBox h3 a.launch:hover{
  text-decoration: none;
  opacity: 0.7;
}
@media (max-width: 768px) {
  #contents #main div.newsBox{
    padding:15px;
  }
  #contents #main{
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }
  #contents #main.top{
    margin: 0;
    padding: 0;
  }
  #contents #main p br{
    display: none;
  }
  #contents #main p small{
    display: block;
  }
}

/*Top 2nd*/
#contents #main h2{ 
  width:100%; 
  height:127px; 
  background: url(images/h2_back.jpg) no-repeat right center/40%;
  margin-bottom:10px; 
  border: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
}
#contents #main h2:after{
  font-size: 16px;
  display: block;
  padding-top: 5px;
  font-weight: normal;
  color: var(--gray-color);
}
#contents #main h2.schoolinfo:after{
  content: "School Information";
}
#contents #main h2.schoollife:after{
  content: "School Life";
}
#contents #main h2.inq:after{
  content: "Inquiry";
}
/*#contents #main h2.schoolinfo { background:url(images/h2_schoolinfo.jpg) no-repeat left top/100%;}
#contents #main h2.schoollife { background:url(images/h2_schoollife.jpg) no-repeat left top/100%;}
#contents #main h2.committee { background:url(images/h2_committee.jpg) no-repeat left top/100%;}
#contents #main h2.inq { background:url(images/h2_inq.jpg) no-repeat left top/100%;}*/

@media (max-width: 768px) {
  #contents #main h2{ 
    width: 100%;
    background-size:64%;
    font-size: 20px;
  }
}

#contents #main h3{background:var(--bg-color); color:var(--accent-color); padding:15px; margin-bottom:10px; font-size:140%; font-weight:bold}

#contents #main p.cuLead{ text-align:center; color:#ff0000; font-size:120%; font-weight:bold; line-height:1.7em}

#contents #main h4{ font-size:110%; color:var(--accent-color); border-bottom:1px dotted var(--border-color); padding:5px; margin-bottom:10px; background:url(images/q_back.gif) repeat;}
#contents #main h5{ margin-bottom:10px; font-size:100%; margin-left:5px}

#contents #main ul.list{ padding:10px 5px;}
#contents #main ul.list li{ background:url(images/circle.gif) no-repeat left 3px; padding-left:15px; margin-bottom:5px; font-size:100%; font-weight:bold}

#contents #main .iin{ border:1px solid var(--border-color); margin-bottom:20px}
#contents #main .iin h4{ background:var(--accent-color); padding:10px; color:white;}
#contents #main .iin h5{ padding:5px 10px 5px 15px!important; margin-bottom:0; margin-left:10px; background:url(images/circle.gif) no-repeat left center;}
#contents #main .iin ul{ padding:0 10px 10px 10px!important; border-bottom:1px dotted #c8c8c8; margin-bottom:10px}
#contents #main .iin ul li{ background:none; margin-left:10px}
#contents #main .iin p{ padding:5px 20px 5px 20px; margin-bottom:0;}

#contents #main .voice{
  position: relative;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: calc(100% - 80px);
  margin-top: 50px;
}
#contents #main .voice .title{
  position: absolute;
  top: -30px;
  left: 10px;
}
#contents #main .voice .title span{
  display: inline-block;
  padding: 8px 20px;
  background: var(--accent-color);
  color: white;
  position: relative;
  font-size: 18px;
  border-radius: 10px;
  font-weight: bold;
}
#contents #main .voice .title span::after{
  content: "";
  width:0;
  height:0;
  border-style:solid;
  border-width: 8.7px 5px 0 5px;
  border-color: var(--accent-color) transparent transparent transparent;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}
#contents #main .voice .photo{
  position: absolute;
  bottom: 0px;
  right: -80px;
}
#contents #main .voice .photo > div{
  position: relative;
}
#contents #main .voice .photo img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
#contents #main .voice .photo > div div.name{
  display: block;
  padding: 5px 5px;
  background: var(--accent-color);
  color: white;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  text-align: center;
}
@media (max-width: 768px) {
  #contents #main .voice{
    margin-bottom: 30px;
  }
  #contents #main .voice p br.pc_only{
    display: none;
  }
  #contents #main .voice .photo > div{
    width: 120px;
    text-align: right;
  }
  #contents #main .voice .photo img{
    width: 110px;
    height: 110px;
  }
  #contents #main .voice .photo > div div.name{
    font-size: 11px;
    padding: 3px 2px;
  }
}

/*left*/
#contents #left{ width:210px; margin: 10px 0;}
#contents #right img{ padding-bottom:10px;}
/*#contents #left h2{ width:206px; height:38px; background-repeat:no-repeat; text-indent:-9999px; margin-bottom:10px}*/

/*#contents #left h2.schoolinfo { background:url(images/l_schoolinfo.gif);}
#contents #left h2.schoollife { background:url(images/l_schoollife.gif);}
#contents #left h2.committee { background:url(images/l_committee.gif);}
#contents #left h2.inq { background:url(images/l_inq.gif);}
#contents #left h2 a{ display:block; width:206px; height:38px;}*/

#contents #left h2{
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  margin-bottom: 20px;
  text-align: left;
}
#contents #left h2 a{ 
  display:block;
  color: #444;
  line-height: 1.4em;
  padding-top: 5px;
}
#contents #left h2 a:hover{
  text-decoration: none;
  opacity: 0.7;
}
#contents #left h2:before{
  content: "";
  display: block;
  background: rgb(21,113,187);
  background: linear-gradient(0deg, rgba(21,113,187,1) 0%, rgba(160,198,227,1) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
}
#contents #left h2 a:after{
  font-size: 12px;
  display: block;
  color: #999999;
  font-weight: normal;
}
#contents #left h2.schoolinfo a:after{
  content: "School Information";
}
#contents #left h2.schoollife a:after{
  content: "School Life";
}
#contents #left h2.inq a:after{
  content: "Inquiry";
}

#contents #left ul{/*border-top:1px solid #c8c8c8; border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8;*/ margin:2px 0 10px 0}
#contents #left ul li{
  background:url(images/arrow.png) no-repeat 5px center;
  padding:10px 0 10px 17px; 
  border-bottom:1px dotted #c8c8c8;
  text-align: left;
}

@media (max-width: 768px) {
  #contents #left{
    width: 100%;
    box-sizing: border-box;
    padding:15px;
    text-align: center;
    background: #f5f5f5;
    margin: 0;
  }
}


/*right*/
#contents #right{ width:210px; margin: 10px 0;}
#contents #left img{ padding-bottom:10px;}
#contents #right div.backnumber{ margin:10px 3px 20px 3px}
#contents #right div.backnumber h3.closeup{ background:url(images/backnumber.gif) no-repeat; width:189px; height:33px; text-indent:-9999px;}
#contents #right div.backnumber ul{ margin:10px 0;}
#contents #right div.backnumber ul li{ background:url(images/arrow_gray.gif) no-repeat left 8px; padding:5px 0 5px 12px; margin-bottom:5px;border-bottom:1px dotted #d0d0d0;}

@media (max-width: 768px) {
  #contents #right{
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 0 15px;
  }
}


/*footerlink*/
#footerlink{ background:#e7e7e7;}
#footerlink .inner{padding:20px 0; max-width:960px; margin:0 auto; display: flex; justify-content: space-around; flex-wrap: wrap;}
#footerlink ul{ padding:10px 5px; margin: 0 20px;}
#footerlink ul li{ padding-left:12px; margin-bottom:5px; font-size: 14px;}
#footerlink ul li:before{
  content: "";
  background:url(images/arrow.png) no-repeat left center;
  width: 10px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.3em;
}
#footerlink ul li ul{ padding:5px 0 5px 5px; margin: 0;}
@media (max-width: 768px) {
  #footerlink ul{
    width: 100%;
  }
}
/*footer*/
footer{ text-align:center; padding:10px; font-size:80%}

/*2nd table*/
#contents #main table.outline{ margin:10px 0; border-collapse:collapse; border-top:1px dotted #d0d0d0; width:100%; line-height:1.5em}
#contents #main table.outline th{ background:url(http://sos.oops.jp/2012apf/images/th_back.gif) repeat; 
  border-bottom:1px dotted #d0d0d0; 
  padding:10px; text-align:left; 
  vertical-align:top; font-weight:normal; margin-top:1px;
  width: 10em;
}
#contents #main table.outline td{ border-bottom:1px dotted #d0d0d0; padding:10px; vertical-align:top;}
#contents #main table.outline td.noborder{ border-bottom:none}

#contents #main table.outline textarea,
#contents #main table.outline input[type="text"]{
  font-size: 16px;
  padding: 5px;
  border: 1px solid #ccc;
  width: 15em;
  border-radius: 5px;
}
#contents #main table.outline textarea{
  height: 5em;
  width: 100%;
}
#contents #main input[type="submit"]{
  display: block;
  width: 10em;
  padding: 10px 0;
  text-align: center;
  margin: 10px auto;
  background: var(--accent-color);
  color: white;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
}
@media (max-width: 768px) {
  #contents #main table.outline th,
  #contents #main table.outline td{
    display: block;
    padding: 10px;
    width: 100%;
  }
  #contents #main table.outline textarea,
  #contents #main table.outline input[type="text"]{
    width: 100%;
  }
}


div#notfound{ margin:60px auto; border:1px solid #ddd; width:800px; padding:20px 0; font-size:80%; color:#005191}
div#notfound h1{ padding:10px 0 10px 20px}
div#notfound p{ padding:10px 20px 10px 20px}
div#notfound p.lead{ font-size:110%; font-weight:bold}