@charset "utf-8";
@import url(base.css);



#globalheader{
	margin-bottom:-100px;
}
		
@media screen and (max-width:1000px){

#globalheader{
	margin-bottom:0;
}
		
}
	
			
	#globalheader nav li:nth-last-of-type(1){
		background-image:url(../shared/bg_clear-white50.png);
	}
			

			#globalheader nav li a{
				text-shadow:0 0 8px #dedfe6,0 0 8px #dedfe6,
				0 0 8px #dedfe6,0 0 8px #dedfe6,0 0 8px #dedfe6,
				0 0 8px #dedfe6,0 0 8px #dedfe6,0 0 8px #dedfe6;
			}



		@media screen and (max-width:1000px){
		
			#globalheader nav li a{
				text-shadow:none;
			}
		
		}



	#imagewrapper{
		max-width:1920px;
		width:100%;
		margin:0;
		position:relative;
		overflow:hidden;
	}
		
@media screen and (max-width:1000px){

	#imagewrapper{
		width:100%;
	}
		
}
		
@media screen and (max-width:640px){

	#imagewrapper{overflow:hidden;}

	#imagewrapper li{
	}
		
}
	

	#main{
		margin-bottom:-111px;
		padding-top:0;
		position:relative;
		top:-111px;
	}
		
@media screen and (max-width:1000px){

	#main{
		margin-bottom:-76px;
		top:-76px;
	}
		
}
		
@media screen and (max-width:480px){

	#main{
		margin-bottom:-81px;
		top:-81px;
	}
		
}

	
		#imagemain{
			max-width:1920px;
			width:100%;
		}
	
		#imagemain li{
			list-style:none;
			float:left;
		}
		
			#imagemain li img{
				width:100%;
			}


		#link-yoyaku{
			display:block;
			width:260px;
			height:260px;
			margin-bottom:-260px;
			position:relative;
			top:-370px;
			left:3%;
			z-index:100;
		}
		#link-yoyaku img{width:100%;}
		
	@media screen and (max-width:1200px){

		#link-yoyaku{
			width:240px;
			height:240px;
			margin-bottom:-240px;
			position:relative;
			top:-330px;
		}
		
	}
		
	@media screen and (max-width:1000px){

		#link-yoyaku{
			width:200px;
			height:200px;
			margin-bottom:-200px;
			top:-290px;
		}
		
	}
		
	@media screen and (max-width:770px){

		#link-yoyaku{
			width:180px;
			height:180px;
			margin-bottom:-180px;
			top:-240px;
			left:2%;
		}
		
	}
		
	@media screen and (max-width:640px){

		#link-yoyaku{
			width:140px;
			height:140px;
			margin-bottom:-140px;
			top:-200px;
		}
		
	}
		
	@media screen and (max-width:480px){

		#link-yoyaku{
			width:120px;
			height:120px;
			margin-bottom:-120px;
			top:-180px;
		}
		
	}
		
	@media screen and (max-width:420px){

		#link-yoyaku{
			width:110px;
			height:110px;
			margin-bottom:-110px;
			top:-170px;
		}
		
	}
		
	@media screen and (max-width:370px){

		#link-yoyaku{
			width:100px;
			height:100px;
			margin-bottom:-100px;
			top:-160px;
		}
		
	}


		#brakenews{
			height:70px;
			margin-bottom:-70px;
			color:#fff;
			background-image:url(../shared/bg_clear-black30.png);
			position:relative;
			top:-70px;
			z-index:100;
		}
		
	@media screen and (max-width:770px){

		#brakenews{
			height:50px;
			margin-bottom:-50px;
			top:-50px;
		}
		
	}

		#brakenews li{
			list-style:none;
		}


/************************* ティッカー *************************/

	#brakenews li iframe{
		display:block;
		width:calc(100% - 140px);
		height:28px;
		margin: 0;
		text-align:left;
		overflow:clip;
		white-space: nowrap;
		border:none;
		position: relative;
		top:21px;
	}

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

	#brakenews li iframe{
		width:calc(100% - 110px);
		top:12px;
	}

}

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

	#brakenews li iframe{
		width:calc(100% - 15px);
		margin-left:10px;
		top:13px;
	}

}

/**************************************************************/


			#brakenews h3{
				margin:20px 20px 0;
				float:left;
			}
			
			#brakenews h3:before{
				content:url(../shared/ico_info.png);
				position:relative;
				margin-right:15px;
				top:5px;
			}

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

			#brakenews h3{
				margin:9px 10px 0;
				font-size:0.9em;
			}
			
			#brakenews h3:before{
				margin-right:10px;
				top:5px;
			}
		}

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

			#brakenews h3{
				display:none;
			}

		}


/* 勧業館食堂紹介 */
	
	#mainnote{
		clear:both;
		max-width:1000px;
		width:100%;
		margin:0 auto;
		padding-bottom:30px;
	}
	
@media screen and (max-width:1000px){
	
	#mainnote{
		width:90%;
	}
	
}
	
	
	@media screen and (max-width:1100px){
		
		#mainnote ul{
			margin-right:5%;
		}
	
	}
	
	@media screen and (max-width:1000px){
		
		#mainnote ul{
			margin-right:0;
		}
	
	}
	
			#mainnote li{
				list-style:none;
			}
	
			#mainnote li{zoom:1;}
			#mainnote li:after{
			  content: ""; 
			  display: block; 
			  clear: both;
			}
		
			#mainnote li:nth-of-type(2){
				clear:both;
				/*margin-bottom:-340px;*/
				position:relative;
				top:-40px;
			}
		
		@media screen and (max-width:900px){
		
			#mainnote li:nth-of-type(2){
				margin-bottom:0;
				top:0;
			}
		
		}
			
				#mainnote li .noteimgwrapper{
					display:block;
					max-width:350px;
					width:35%;
					margin-right:10px; 
					float:left;
				}
				#mainnote li .noteimgwrapper img{
					width:100%;
				}

				#mainnote li:nth-of-type(2) .noteimgwrapper{
					height:430px;
				}
	
			@media screen and (max-width:1100px){

				#mainnote li:nth-of-type(2) .noteimgwrapper{
					height:400px;
				}
	
			}
	
			@media screen and (max-width:1000px){

				#mainnote li:nth-of-type(2) .noteimgwrapper{
					height:350px;
				}
	
			}
	
			@media screen and (max-width:900px){
		
				#mainnote li .noteimgwrapper{
					width:240px;
					margin:0 auto; 
					float:none;
				}
		
				#mainnote li:nth-of-type(2) .noteimgwrapper{
					max-width:none;
					width:400px;
					height:240px;
					margin:0 auto; 
					float:none;
					overflow:hidden;
				}
				
				#mainnote li .noteimgwrapper img{
					display:block;
					width:240px;
				}
	
			}
	
			@media screen and (max-width:640px){
		
				#mainnote li .noteimgwrapper{
					width:200px;
				}
		
				#mainnote li:nth-of-type(2) .noteimgwrapper{
					width:320px;
					height:200px;
				}
				
				#mainnote li .noteimgwrapper img{
					width:200px;
				}
	
			}
	
			@media screen and (max-width:420px){
		
				#mainnote li .noteimgwrapper{
					width:160px;
				}
		
				#mainnote li:nth-of-type(2) .noteimgwrapper{
					width:270px;
					height:160px;
				}
				
				#mainnote li .noteimgwrapper img{
					width:160px;
				}
	
			}
			
				#mainnote li .note{
					max-width:540px;
					width:54%;
					padding-top:30px;
					float:left;
				}
			
				#mainnote li:nth-of-type(2) .note{
					float:right;
					position:relative;
				}
	
			@media screen and (max-width:900px){
		
				#mainnote li .note,
				#mainnote li:nth-of-type(2) .note{
					max-width:640px;
					width:90%;
					margin:0 auto 30px;
					padding-top:10px;
					float:none;
				}
	
			}
	
			@media screen and (max-width:640px){
		
				#mainnote li .note,
				#mainnote li:nth-of-type(2) .note{
					margin:0 auto;
					padding-top:0;
				}
	
			}
			
					#mainnote li:nth-of-type(2) img:nth-of-type(1){
						margin-right:10px; 
						position:relative;
						left:100px;
					}
			
					#mainnote li:nth-of-type(2) img:nth-of-type(2){
						position:relative;
						top:-280px;
					}
		
				@media screen and (max-width:900px){
			
					#mainnote li:nth-of-type(2) img:nth-of-type(1){
						margin-right:0; 
						left:0;
						float:left;
					}
			
					#mainnote li:nth-of-type(2) img:nth-of-type(2){
						float:right;
						top:-240px;
					}
		
				}
		
				@media screen and (max-width:640px){
			
					#mainnote li:nth-of-type(2) img:nth-of-type(2){
						top:-200px;
					}
		
				}
		
				@media screen and (max-width:420px){
			
					#mainnote li:nth-of-type(2) img:nth-of-type(2){
						top:-160px;
					}
		
				}
			

	
				#mainnote li h4{
					color:#c30;
					font-size:1.9em;
					font-family:"kozuka-mincho-pro";
				}
		
				#mainnote li p{
					margin-top:25px;
					font-size:1.2em;
					font-family:"kozuka-mincho-pro";
					line-height:2.0em;
				}
	
			@media screen and (max-width:1100px){
	
				#mainnote li h4{
					font-size:1.8em;
				}
		
				#mainnote li p{
					margin-top:20px;
					font-size:1.0em;
					line-height:1.9em;
				}
	
			}
	
			@media screen and (max-width:640px){
	
				#mainnote li h4{
					line-height:1.4em;
					text-align:center;
				}
		
				#mainnote li p{
					margin-top:10px;
				}
	
			}
	
			@media screen and (max-width:370px){
	
				#mainnote li h4{
					font-size:1.6em;
				}
	
			}




/* セクション共通 */
	
		.stdsec header{
			width:calc(200px - 2%);
			padding:0 0 25px 2%;
			float:left;
		}

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

		.stdsec header{
			width:calc(170px - 2%);
		}
		
	}

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

		.stdsec header{
			width:96%;
			padding:0 0 5px 2%;
			float:none;
		}
		
	}
		
	@media screen and (max-width:480px){

		.stdsec header{
			width:90%;
			padding:0 0 0 5%;
		}
		
	}

			.stdsec header p{
				margin:0;
				padding:35px 0 0;
				color:#c00;
				font-size:2.3em;
				font-weight:700;
				line-height:1.2em;
			}
		
		@media screen and (max-width:720px){

			.stdsec header p{
				padding:20px 0 0;
				font-size:1.8em;
			}

			.stdsec header p br{display:none;}
			.stdsec header h2 br{display:none;}
		
		}
		
		@media screen and (max-width:480px){

			.stdsec header p{
				font-size:1.6em;
			}
		
		}

			.stdsec header h2{
				margin:0;
				padding:7px 0 0;
				color:#030;
				font-size:1.2em;
				font-weight:700;
				line-height:1.4em;
			}
		
		@media screen and (max-width:480px){

			.stdsec header h2{
				font-size:1.0em;
			}
		
		}
		
		
			.stdsec .secnote{
				width:95%;
				margin:0 0 40px;
				padding-top:40px;
				color:#000;
				font-size:1.1em;
				font-family: "kozuka-mincho-pro";
			}

		@media screen and (max-width:720px){
		
			.stdsec .secnote{
				width:100%;
				padding-top:20px;
				font-size:1.0em;
			}
		
		}






/*  */







/* メニュー */

		#topmenu{
			width:100%;
			height:340px;
		}

			#topmenu h2{
				display:block;
				width:240px;
				margin:0 auto -240px;
				position:relative;
				top:60px;
			}
			#topmenu h2 img{width:100%;}
	
			#topmenu li{
				width:calc(100% / 3);
				height:340px;
				list-style:none;
				float:left;
				background-repeat:no-repeat;
				background-position:50% 0;
				background-size:auto 100%;
			}
			#topmenu li:nth-of-type(1){background-image:url(../images/img_menu1.jpg);}
			#topmenu li:nth-of-type(2){background-image:url(../images/img_menu2.jpg);}
			#topmenu li:nth-of-type(3){background-image:url(../images/img_menu3.jpg);}
			
			
	@media screen and (max-width:1200px){

		#topmenu{
			height:300px;
		}

			#topmenu h2{
				width:220px;
				margin:0 auto -220px;
				top:50px;
			}
	
			#topmenu li{
				height:300px;
			}

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

		#topmenu{
			height:240px;
		}

			#topmenu h2{
				width:180px;
				margin:0 auto -180px;
				top:40px;
			}
	
			#topmenu li{
				height:240px;
			}

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

		#topmenu{
			height:200px;
		}

			#topmenu h2{
				width:140px;
				margin:0 auto -140px;
				top:40px;
			}
	
			#topmenu li{
				height:200px;
			}

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

		#topmenu{
			height:160px;
		}

			#topmenu h2{
				width:100px;
				margin:0 auto -100px;
				top:40px;
			}
	
			#topmenu li{
				height:160px;
			}

	}
	
	
	

/* 予約 */

	#yoyaku{
		max-width:1000px;
		width:90%;
		margin:0 auto;
		padding:60px 0;		
	}
			
@media screen and (max-width:770px){

	#yoyaku{
		padding:50px 0;
	}

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

	#yoyaku{
		padding:40px 0;
	}

}
	
		#yoyaku h2{
			max-width:339px;
			width:34%;
			float:left;
		}
		#yoyaku h2 img{width:100%;}
			
	@media screen and (max-width:770px){

		#yoyaku h2{
			width:240px;
			margin:0 auto;
			float:none;
		}

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

		#yoyaku h2{
			width:180px;
		}

	}
	
		#yoyaku .note{
			max-width:610px;
			width:61%;
			float:right;
		}
			
	@media screen and (max-width:770px){

		#yoyaku .note{
			max-width:none;
			width:100%;
			float:none;
		}

	}


		
			#yoyaku p{
				margin-top:0;
				font-size:1.2em;
				font-family: "kozuka-mincho-pro";
				line-height:2.0em;
			}
	
		@media screen and (max-width:1000px){
		
			#yoyaku p{
				font-size:1.0em;
				line-height:1.9em;
			}
	
		}
	
		@media screen and (max-width:770px){
		
			#yoyaku p{
				width:90%;
				margin:20px auto 20px;
			}
	
		}
	
		@media screen and (max-width:640px){
		
			#yoyaku p{
				margin:10px auto 15px;
			}
	
		}
	

			#yoyaku .spbox{
				color:#c33;
				font-size:1.8em;
				font-weight:700;
				text-align:center;
				background-color:#ffeae6;
			}

			#yoyaku .spbox a{
				display:block;
				padding:15px 0 10px;
				color:#c33;
				text-decoration:none;
			}
	
		@media screen and (max-width:1000px){
		
			#yoyaku .spbox{
				font-size:1.6em;
			}
	
		}
	
		@media screen and (max-width:640px){
		
			#yoyaku .spbox{
				font-size:1.4em;
			}
	
		}
	
		@media screen and (max-width:420px){
		
			#yoyaku .spbox{
				padding:10px 0 7px;
				font-size:1.2em;
			}
	
		}

			#yoyaku .spbox a{
				padding:10px 0 7px;
			}
	

			#linkform{
				max-width:423px;
				width:70%;
				margin-top:20px;
				float:right;
			}
	
	
	

/* 会社概要 */

	#outline{
		width:50%;
		height:640px;
		background-color:#f2f2f2;
		float:left;
	}
	
@media screen and (max-width:1000px){

	#outline{
		width:100%;
		height:auto;
		float:none;
	}
	
}
	
	
		#outline .inner{
			width:80%;
			margin:0 auto;
			padding:40px 0;
		}
	
	@media screen and (max-width:1000px){

		#outline .inner{
			width:90%;
			padding:30px 0;
		}
	
	}

		
			#outline h2{
				margin-bottom:35px;
				font-family:"kozuka-mincho-pro";
				font-size:1.7em;
				text-align:center;
			}
	
		@media screen and (max-width:1000px){
	
			#outline h2{
				margin-bottom:25px;
			}
		
		}
	
			#outline li{
				padding:15px 5px 15px 0;
				border-bottom:1px dashed #b2b2b2;
				list-style:none;
				line-height:1.5em;
			}
			#outline li:nth-of-type(1){border-top:1px dashed #b2b2b2;}
	
#outline li{zoom:1;}
#outline li:after{
  content: ""; 
  display: block; 
  clear: both;
}
	
		@media screen and (max-width:1000px){
		
			#outline li{
				padding:12px 0 12px;
			}
			
		}
	

				#outline li h3{
					width:100px;
					color:#000;
					font-weight:700;
					text-align:center;
					float:left;
				}
	
			@media screen and (max-width:1000px){
		
				#outline li h3{
					width:80px;
				}
			
			}
	

				#outline li p{
					width:calc(100% - 110px);
					margin:0;
					float:right;
				}
	
			@media screen and (max-width:1000px){
		
				#outline li p{
					width:calc(100% - 80px);
				}
			
			}

				#outline li p span{
					font-size:0.9em;
				}
	
			@media screen and (max-width:1000px){
		
				#outline li p span{
					font-size:0.8em;
				}
			
			}


		#classphotos{
			margin:10px 0;
		}

		#classphotos img{
			width:46%;
			margin:0 2%
		}



/* アクセス */

	#access{
		width:50%;
		height:640px;
		float:right;
	}
	
@media screen and (max-width:1000px){

	#access{
		width:100%;
		height:400px;
		float:none;
	}
	
}
	




	/* ウイルス感染対策 */

	#covid19{
		margin:50px 0 30px;
		background-colog:#fff;
		position:relative;
		z-index:100;
	}

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

	#covid19{
		margin:50px 0 20px;
	}

}

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

	#covid19{
		margin:30px 0 20px;
	}

}
		
		
		
		#covid19 .inner{
			max-width:calc(1000px - 10%);
			width:84%;
			padding:20px 3%;
			margin:0 auto;
			border:1px solid #c00;
			border-radius:8px;
			background-colog:#fff;
		}
		
	
	@media screen and (max-width:480px){
	
		#covid19 .inner{
			width:82%;
			padding:15px 4%;
		}
	
	}
	
	#covid19 h2{
			color:#c33;
			font-weight:700;
			position:relative;
			left:-1%;
		}
		
		#covid19 ul{
			margin-left:20px;
		}
		
			#covid19 li{
				margin-bottom:5px;
			}