@charset "utf-8";

@import url(default.css);
@import url(base.css);


	#contentheader{
		background-color:#e1e0d6;
		background-image:url(/memories/images/img_content.jpg);
		background-repeat:no-repeat;
		background-position:50% 100px;
	}

@media screen and (max-width:1000px){
	
	#contentheader{
		background-position:50% 50%;
	}

}


			#contentnav ul{
				width:998px;
				margin:0 auto;
			}

		@media screen and (max-width:1020px){

			#contentnav ul{
				width:100%;
			}

		}

				#contentnav li{
					width:calc((100% - 6px) / 4);
				}

			@media screen and (max-width:770px){

				#contentnav li{
					width:calc((100% - 3px) / 4);
				}

			}


/* 九学メモリー */

		#subcontentnav{
			display: block;
			max-width: 400px;
			width:90%;
			margin:50px auto 0;
			padding: 8px 5px;
			border-radius: 5px;
			font-size:1.2em;
		}


/*
			#subcontentnav li{
				width:110px;
				padding:0 8px;
				list-style:none;
				float:left;				
			}

	@media screen and (max-width:1040px){
	
		#subcontentnav{width:960px;}
		
			#subcontentnav li{padding:0 5px;}
			
			
	}
*/

	@media screen and (max-width:640px){

		#subcontentnav{
			margin:40px auto 0;
			padding: 5px;
			border-radius: 4px;
			font-size:1.1em;
		}

	}

	@media screen and (max-width:430px){

		#subcontentnav{
			margin:30px auto 0;
			border-radius: 3px;
			font-size:1.0em;
		}

	}

	@media screen and (max-width:370px){

		#subcontentnav{
			font-size:0.9em;
		}

	}

			#subcontentnav + p{
				margin:5px 0 30px;
				color:#f00;
				text-align: center;
			}

		@media screen and (max-width:640px){

			#subcontentnav + p{
				margin:5px auto 20px;
			}

		}

		@media screen and (max-width:430px){

			#subcontentnav{
				font-size:0.9em;
			}

		}



		
		#index main{
			width:1000px;
			margin:0 auto;
			padding-bottom:50px;
		}
			
	@media screen and (max-width:1020px){
			
		#index main{
			max-width:1000px;
			width:90%;
		}

	}
		
		
			#index main h3{
				margin:0 0 30px;
				text-align:center;
				color:#801842;
				font-size:1.4em;
				font-weight:700;
			}
	

				#index main h4{
					margin:10px 0 10px;
					color:#036;
					font-size:1.1em;
					font-weight:700;
				}
				
	
					#index div.floatleft,
					#index div.floatright{
						width:48%;
						margin: 0 auto 40px;
					}
					
					#index div.floatleft,
					#index div.floatright{zoom:1;}
					#index div.floatleft,
					#index div.floatright:after{
					  content: ""; 
					  display: block; 
					  clear: both;
					}

				@media screen and (max-width:1020px){
	
					#index div.floatleft,
					#index div.floatright{
						max-width:640px;
						width:100%;
						float:none;
					}
					
				}


						#index main img.floatleft{
							float:left;
							margin-right:28px;
						}
		
						#index #block1 p,
						#index #block2 p{
							float:left;
						}
		
						#index #block3 img{
							max-width:470px;
							width:100%;
							
						}
						
						#index #block4{
							padding:30px 0;
							background-color:#eee;
						}

						#index #block4 .innerblock{
							width:50%;
							text-align:center;
							float:left;
						}
	
					@media screen and (max-width:480px){

						#index #block4 .innerblock{
							width:100%;
							text-align:center;
							float:none;
						}

						#index #block4 .innerblock:first-child{
							margin-bottom: 20px;
						}
	
					}
					
						#index #block4 .innerblock:first-child h4{margin-top:25px;}
	
					@media screen and (max-width:480px){

						#index #block4 .innerblock:first-child h4{
							margin:0;
						}
	
					}


		
						#index #block101{
							padding-bottom:20px;
						}
						
		
						#index #block104{
							width:33%;
						}

						#index #block105{
							width:33%;
						}
						
						#index #block106{width:33%;}
						
						#index #block107{width:33%;}
						
						#index #block108{width:66%;}

		
						#index #block201{width:33%;}


			.block3row{
			}

				.block3row .piece{
					width:calc(100% / 3);
					margin-bottom:35px;
					float: left;
				}

				.block3row .piece2{
					width:calc((100% / 3) * 2);
					margin-bottom:25px;
					float: left;
				}

			@media screen and (max-width:1020px){

				.block3row .piece,
				.block3row .piece2{
					width:100%;
					margin-bottom:25px;
					float: none;
				}

			}

			@media screen and (max-width:370px){

				.g1 .block3row .piece2 img{
					width:100%;
					height:auto;
				}

			}


				.piece.uppostion{
					position: relative;
					top:-15px;
				}

						
						.block3row .piece2{
							width:calc(((100% / 3) * 2) - 30px);
							padding: 0 15px;
							position: relative;
							top:-15px;
						}
	
					@media screen and (max-width:1020px){
						
						.block3row .piece2{
							max-width: 530px;
							width:calc(100% - 30px);
							margin: 0 auto 40px;
							top:0;
							
						}
						.g6 .block3row .piece2,
						.g7 .block3row .piece2{
							max-width: 560px;
							width:calc(100% - 30px);
							margin: 0 auto 40px;
							top:0;
							
						}
	
					}

							.piece2 .innerwrapper{
								padding: 20px 0 10px;
								background-color:#eee;
							}
	
							.piece2 .innerwrapper{zoom:1;}
							.piece2 .innerwrapper:after{
							  content: ""; 
							  display: block; 
							  clear: both;}
	
						@media screen and (max-width:1020px){

							.piece2 .innerwrapper{
								padding: 20px 15px 10px;
							}
		
						}
		
						@media screen and (max-width:640px){

							.piece2 .innerwrapper{
								padding: 20px 0 10px;
							}
		
						}
						

								.piece2 .innerblock{
									width:50%;
									padding: 10px 0;
									text-align:center;
									float:left;
								}
	
							@media screen and (max-width:1020px){
	
								.piece2 .innerblock{
									padding:0;
								}
	
							}						
	
							@media screen and (max-width:640px){
	
								.piece2 .innerblock{
									width:100%;
									float:none;
								}
	
							}


								#index main h4.shorth{
									margin-bottom:0 !important;
								}


								.piece2 h4.red{
									color:#c00 !important;
									padding:0 15px 10px;
								}

		
							@media screen and (max-width:1020px){

								.piece2 h4{
									clear:both;
									padding:10px 15px;
									text-align: left;
								}
								.g5 .piece2 h4,
								.g6 .piece2 h4,
								.g7 .piece2 h4{
									text-align:center;
								}

								.piece h4 + .alignleft{
									max-width: 540px;
									width:100%;
									margin: 0 auto;
								}

							}


						
						
						#index #block301{
							width:60%;
							padding:20px 0 5px;
							background-color:#eee;
							position:relative;
							top:-20px;
							left:30px;
						}
	
							#index #block301 .innerblock{
								width:45%;
								text-align:center;
								float:left;
							}
							#index #block301 .innerblock:last-child{width:55%;}
	
							#index #block301 h4{
								clear:both;
								padding-top:10px;
							}


						#index #block302{
							width:33%;
						}

						#index #block401{
							width:33%;
						}
						
						#index #block402{
							width:33%;
						}

						#index #block403{
							width:33%;
						}
						
						#index #block404{
							width:60%;
							padding:20px 0 5px;
							background-color:#eee;
							position:relative;
							top:-20px;
							left:30px;
						}
	
							#index #block404 .innerblock{
								width:50%;
								text-align:center;
								float:left;
							}
	
							#index #block404 h4{
								clear:both;
								padding-top:10px;
							}


						#index #block405{
							width:33%;
						}

						#index #block501{
							width:33%;
						}

						#index #block502{
							width:33%;
						}

						#index #block503{
							width:33%;
						}
						
						#index #block504{
							width:60%;
							padding:20px 0;
							background-color:#eee;
							position:relative;
							top:-20px;
							left:30px;
						}
	
							#index #block504 .innerblock{
								width:50%;
								text-align:center;
								float:left;
							}
	
							#index #block504 h4{
								clear:both;
								padding-top:10px;
							}


						#index #block505{
							width:33%;
						}
						
						
						#index #block601{
							width:60%;
							padding:20px 0 5px;
							background-color:#eee;
							position:relative;
							top:-20px;
							left:30px;
						}
	
							#index #block601 .innerblock{
								width:50%;
								text-align:center;
								float:left;
							}
	
							#index #block601 h4{
								clear:both;
								padding-top:10px;
							}


						#index #block602{
							width:33%;
						}

						#index #block603{
							width:33%;
							position:relative;
							top:-30px;
						}
						
						#index #block604{
							width:60%;
							padding:5px 0;
							background-color:#eee;
							position:relative;
							top:40px;
							left:30px;
						}
	
							#index #block604 .innerblock{
								width:50%;
								text-align:center;
								float:left;
							}
	
							#index #block604 h4{
								clear:both;
								padding-top:10px;
							}
							
							#index #main h4.red{color:#c33;}



						#index #block701{
							width:33%;
						}

						#index #block702{
							width:33%;
						}

						#index #block703{
							width:33%;
						}

						#index #block704{
							width:33%;
						}

						#index #block705{
							width:60%;
							margin-bottom:40px;
							padding:0 0 5px;
							background-color:#eee;
							position:relative;
							left:-30px;
						}
	
							#index #block705 .innerblock{
								width:50%;
								text-align:center;
								float:left;
							}
	
							#index #block705 h4{
								clear:both;
								padding-top:10px;
							}

						#index #block706{
							width:33%;
							position:relative;
							top:-200px;
						}

						#index #block707{
							width:33%;
						}

						#index #block708{
							width:33%;
						}

						
						#index #block709{
							width:92%;
							margin:0 auto 60px;
							padding:30px 0 5px;
							background-color:#eee;
							position:relative;
							top:10px;
						}
	
							#index #block709 .innerblock{
								width:50%;
								text-align:center;
								float:left;
							}
	
							#index #block709 h4{
								clear:both;
								padding-top:10px;
							}
							

						
						
						


	/* 歴代院長紹介 */

		
		#incho #main{
			padding:65px 0 70px;
		}

	@media screen and (max-width:770px){

		#incho #main{
			padding:50px 0;
		}

	}

	@media screen and (max-width:480px){

		#incho #main{
			padding:30px 0;
		}

	}

		
		#incholist{
			border-top:1px dashed #ccc;
		}
		
			#incholist li{
				padding:30px 0 25px;
				list-style:none;
			}
			#incholist li:nth-of-type(2n){background-color:#eee;}
			

				#incholist li .inner{
					max-width:1000px;
					width:90%;
					margin:0 auto;
				}

				#incholist li .inner:after{
					content: "";
					display: block;
					visibility: hidden;
					clear: both;
					height: 0px;
				}
				* html #incholist li{display: inline-table;}
				/* no ie mac \*/
				* html #incholist li{height:1%;}
				#incholist li{display: block; min-height:0;}
				/* */
	

					#incholist li img{
						width:20%;
					}
	
				@media screen and (max-width:770px){

					#incholist li img{
						display: block;
						width:240px;
						margin: 0 auto 25px;
					}
	
				}
	
				@media screen and (max-width:430px){

					#incholist li img{
						width:200px;
					}
	
				}



					#incholist li .inchonote{
						width:77%;
						float:right;
					}
	
				@media screen and (max-width:770px){

					#incholist li .inchonote{
						width:100%;
					}
	
				}



					#incholist li .inchonote h3{
						margin:0 0 15px;
						color:#036;
						font-size:1.4em;
						font-weight:700;
					}
	
				@media screen and (max-width:770px){

					#incholist li .inchonote h3{
						font-size:1.2em;
						text-align: center;
					}
	
				}

					#incholist li .inchonote p{						
						margin:0 0 10px;
						color:#801842;
						font-size:1.2em;
						font-weight:700;
					}
	
				@media screen and (max-width:770px){

					#incholist li .inchonote p{						
						font-size:1.0em;
						text-align: center;
					}
	
				}



	/* 年表 */


			#history main{
				max-width:1000px;
				width:96%;
				margin:0 auto;
				padding:70px 0;
			}

		@media screen and (max-width:770px){

			#history main{
				padding:50px 0;
			}

		}

		@media screen and (max-width:480px){

			#history main{
				padding:40px 0;
			}

		}

	
			#history table{
				width:100%;
				border-top:1px dotted #ccc;
				padding-bottom:30px;
			}
	
				#history th,
				#history td{
					border-bottom:1px dotted #ccc;
					padding:10px;
					color:#804921;
				}
	
				#history th{
					font-family:sans-serif;
					font-size:1.1em;
				}

			@media screen and (max-width:770px){
	
				#history th{					
					padding: 10px 5px;
					font-size:1.0em;
				}

				#history td{
					font-weight:700;
					line-height: 1.7em;
				}

			}

			@media screen and (max-width:430px){
	
				#history th{
					color: #369;
					font-size:0.9em;
				}

				#history td{
					font-size:0.9em;
				}

			}
			
				#history td.red3{
					color:#c30;
				}
	
				#history td:nth-of-type(2){
					width:27%;
					color:#801842;
					font-size:1.4em;
					font-weight:700;
					text-align:center;
					line-height: 1.4em;
					background-color:#ffe6e6;
				}

			@media screen and (max-width:1000px){
	
				#history td:nth-of-type(2){
					width:20%;
					font-size:1.2em;
				}

			}

			@media screen and (max-width:770px){
	
				#history td:nth-of-type(2){
					width:20%;
					font-size:1.1em;
				}

			}

			@media screen and (max-width:640px){
	
				#history td:nth-of-type(2){
					width:50px;
					font-size:1.0em;
				}

			}

			@media screen and (max-width:480px){
	
				#history td:nth-of-type(2){
					width:20px;
					padding: 0 5px;
					font-size:0.9em;
					/*writing-mode: vertical-rl;*/
					/*text-orientation: upright;*/
				}
				#history td:nth-of-type(2) br{display: none;}

			}







				#history td.gray{
					background-color:#eee;
				}



	/* 校歌 */


	#kouka main{
		max-width:1000px;
		width:100%;
		margin:0 auto;
		padding:20px 0 50px;
		
	}
		#playernote{
			width:90%;
			margin:0 auto 40px;
			text-align:center;
		}

			#playernote img{
				width:24px;
				position:relative;
				top:6px;
			}



		#songlist{
		}

			#songlist li{
				margin-bottom:30px;
				padding:35px 10px 30px;
				background-color:#eee;
				list-style:none;
			}
	

				#songlist li h3{
					margin:0;
					color:#801842;
					font-size:1.4em;
					font-weight:700;
					text-align:center;
				}


				.player{
					max-width:460px;
					width:90%;
					margin:25px auto 20px;
				}


				.songwriter{
					margin:40px 0 10px;
					font-size:1.1em;
					text-align:center;
				}

			@media screen and (max-width:640px){

				.songwriter{
					font-size:1.0em;
				}

			}

			@media screen and (max-width:480px){

				.songwriter{
					margin:30px 0 10px;
					font-size:0.9em;
				}

			}


				.lylics{
					width: 90% !important;
					margin:0 auto;
				}
			
					.lylics > p{
						width:35%;
						font-size:1.4em;
						font-family:"kozuka-mincho-pro",sans-serif;
						font-weight:400;
						line-height:1.9em;
						letter-spacing:0.1em;
						float:left;
					}

				@media screen and (max-width:1000px){

					.lylics > p{
						font-size:1.2em;
					}

				}
			
				@media screen and (max-width:770px){
				
					.lylics > p{
						width:100% !important;
						margin-left:auto;
						margin-right:auto;
						float:none;
					}
				
				}
			
				@media screen and (max-width:640px){
				
					.lylics > p{
						font-size:1.1em;
						letter-spacing:0.03em;
					}
				
				}
			
				@media screen and (max-width:370px){
				
					.lylics > p{
						font-size:1.0em;
					}
				
				}


				#song1 .lylics{
					width:810px;
				}
			
			@media screen and (max-width:770px){
				
				#song1 .lylics{
					max-width:460px;
				}
				
			}

					#song1 .lylics p:nth-of-type(3){
						width:30%;
					}

				#song2 .lylics{
					max-width:600px;
				}
			
			@media screen and (max-width:770px){
				
				#song2 .lylics{
					max-width:460px;
				}
				
			}

					#song2 .lylics p{
						width:60%;
					}
					#song2 .lylics p:nth-of-type(2){
						width:40%;
					}

				#song3 .lylics{
					width:90%;
				}
			
			@media screen and (max-width:770px){				

				#song3 .lylics{
					max-width:460px;
				}
				
			}

					#song3 .lylics p:last-child{
						width:30%;
					}

				#song4 .lylics{
					max-width:600px;
				}
			
			@media screen and (max-width:770px){
				
				#song4 .lylics{
					max-width:460px;
				}
				
			}


					#song4 .lylics p{
						width:60%;
					}
					#song4 .lylics p:nth-of-type(2){
						width:40%;
					}

	
				#song5 .lylics{
					width:90%;
				}
			
			@media screen and (max-width:1000px){

				#song5 .lylics{
					max-width:460px;
				}

			}


					#song5 .lylics p{
						width:50%;
					}
					#song5 .lylics p:nth-of-type(3){
						margin-left:auto;
						margin-right:auto;
						float:none;
					}
			
				@media screen and (max-width:1000px){

					#song5 .lylics p{
						width:100% !important;
						margin-left:auto;
						margin-right:auto;
						float:none;
					}
					
				}


				#song6 .lylics{
					max-width:460px;
					margin-top:40px;
				}

					#song6 .lylics p{
						width:auto;
						float:none;
					}