/* ******************************************************************
 *	File name		: base.css
 *	Summary			: css base
 * ******************************************************************
 */
/*
*/

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

body{
	position:relative;
	width:100%;
	height:100%;
	line-height:145%;
	color:#222;
	background:#AAB1B5;
}

#wrapper{
	position:relative;
	overflow-x:hidden;
	width:100%;
	background:#FFF;
}

/* --- print --- */
@media print {
	body{
		margin:0;
		width:1100px;
	}
}

/* -----------------------------------------------------------------
   header
----------------------------------------------------------------- */

header{
	position:relative;
	width:100%;
	height:100px;
	background:#FFF;
	z-index:101;
	}
	header #head_contents{
		display:block;
		position:relative;
		width:1000px;
		max-width:100%;
		height:100%;
		margin:0 auto;
		text-align:center;
		}
		header #head_contents h1{
			position:absolute;
			top:14px;
			left:4px;
			width:284px;
			height:40px;
		}
		header #head_title h1 a{
			display:block;
			width:100%;
			height:100%;
	}
/* --- responsive --- */
@media(max-width:1200px){
	#head_title{
		padding:30px 0 0px 20px;
	}
}


/* nav */
header nav{
	position:absolute;
	top:67px;
	width:100%;
	height:26px;
	z-index:1000;
	transition-duration:1.0s;
}
header nav > ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:center;
	flex-wrap:wrap;
	position:relative;
	width:100%;
	margin:0 auto;
	list-style:none;
	}
	header nav > ul > li{
		display:inline-block;
		position:relative;
		width:auto;
		height:100%;
		margin:0 0 0 -1px;
		text-align:center;
		transition-duration:0.5s;
		}
		header nav > ul > li::before,
		header nav > ul > li::after{
			content:" ";
			position:absolute;
			top:4px;
			width:1px;
			height:18px;
			background:#CCC;
		}
		header nav > ul > li::before{left:0px;}
		header nav > ul > li::after{right:0px;}

	header nav ul > li > a{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:100%;
		height:26px;
		padding:0 15px;
		font-weight:normal;
		font-size:0.9rem;
		text-decoration:none;
		text-align:left;
		color:#000;
		z-index:10;
		transition-duration:0.5s;
		}
		header nav ul li a:hover{
			text-decoration:none;
			background:rgba(0,0,0,0.1);
	}
	header nav ul li.active a{
		text-decoration:none;
		background:rgba(0,0,0,0.2);
	}


header nav ul li#nav_top,
header nav ul li#nav_oroshi,
header nav ul li#nav_supply,
header nav ul li#nav_yumetobo
{
	display:none;
}

header #sub_nav{
	position:absolute;
	top:20px;
	right:0px;
	list-style:none;
	}
	header #sub_nav li{
		display:inline-block;
		position:relative;
		margin:0 10px 0 0;
		}
		header #sub_nav li a{
			display:block;
			position:relative;
			padding:0 10px;
			font-size:0.87rem;
			color:#000;
			text-decoration:none;
			transition-duration:0.5s;
			}
			header #sub_nav li a:hover{color:#FFF;}
			header #sub_nav li:nth-child(1) a:hover{background:#932A12;}
			header #sub_nav li:nth-child(2) a:hover{background:#003B83;}
			header #sub_nav li:nth-child(3) a:hover{background:#DF7D7D;}

		header #sub_nav li a::before{
			content:" ";
			position:absolute;
			top:calc(50% - 6px);
			left:0px;
			border: 6px solid transparent;
			border-left: 6px solid rgba(0,0,0,1);
			transition-duration:0.5s;
		}
		header #sub_nav li:nth-child(1) a::before{border-left: 6px solid #932A12;}
		header #sub_nav li:nth-child(2) a::before{border-left: 6px solid #003B83;}
		header #sub_nav li:nth-child(3) a::before{border-left: 6px solid #DF7D7D;}
		header #sub_nav li a:hover::before{border-left: 6px solid #FFF;}

/* --- responsive --- */
@media screen and (max-width:767px){
	header{
		display:none;
	}
}

/* -----------------------------------------------------------------
   main
----------------------------------------------------------------- */

main{
	position:relative;
	display:block;
	width:100%;
	overflow:hidden;
	z-index:100;
}
/* --- responsive --- */
@media screen and (max-width:1600px){
	main::before{
		left:calc(50% - 800px);
	}
	main::after{
		right:calc(50% - 800px);
	}
}
@media screen and (max-width:1000px){
	main::before,
	main::after{
		display:none;
	}
}

#main_contents{
	position:relative;
	width:1000px;
	max-width:100%;
	margin:0 auto;
	z-index:100;
}

section{
	position:relative;
	max-width:100%;
	margin-bottom:30px;
	padding:0px;
}

.contents{
	position:relative;
	width:1000px;
	max-width:100%;
	margin:0 auto;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#main_contents{
		width:100%;
		padding:0 20px 20px;
	}
	section{
		margin-bottom:25px;
	}
}

/* -----------------------------------------------------------------
   Link
----------------------------------------------------------------- */

#link_banner{
	position:relative;
	width:1000px;
	max-width:100%;
	margin:0 auto 25px;
	z-index:150;
	}
	#link_banner ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:center;
		flex-wrap:wrap;
		position:relative;
		width:100%;
		list-style:none;
		text-align:center;
	}
	#link_banner ul li{
		position:relative;
		width:240px;
		margin:0 10px 10px;/* 260px */
	}
	#link_banner ul li a{
	}
	#link_banner ul li a:hover{
		opacity:0.7;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#link_banner ul li{
		width:calc(48% - 20px);
	}
}

/* -----------------------------------------------------------------
   footer
----------------------------------------------------------------- */

footer{
	position:relative;
	width:100%;
	min-height:200px;
	margin:40px 0 0 0px;
	padding:10px 0 0;
	text-align:left;
	background:#AAB1B5;
	}
	footer #ft_contents{
		position:relative;
		width:1000px;
		max-width:100%;
		margin:0 auto;
		}
		footer #ft_contents ul{
			position:absolute;
			top:-40px;
			left:0px;
			margin:0 auto;
			list-style:none;
		}
		footer #ft_contents ul li{
			display:inline-block;
			position:relative;
			margin:0 10px 0 0;
			}
			footer #ft_contents ul li:last-child{
				margin:0px;
			}
			footer #ft_contents ul li a{
				display:block;
				position:relative;
				padding:0 10px;
				font-size:0.87rem;
				color:#000;
				text-decoration:none;
				transition-duration:0.5s;
				}
				footer #ft_contents ul li a:hover{color:#FFF;}
				footer #ft_contents ul li:nth-child(1) a:hover{background:#932A12;}
				footer #ft_contents ul li:nth-child(2) a:hover{background:#003B83;}
				footer #ft_contents ul li:nth-child(3) a:hover{background:#DF7D7D;}

			footer #ft_contents ul li a::before{
				content:" ";
				position:absolute;
				top:calc(50% - 6px);
				left:0px;
				border: 6px solid transparent;
				border-left: 6px solid rgba(0,0,0,1);
				transition-duration:0.5s;
			}
			footer #ft_contents ul li:nth-child(1) a::before{border-left: 6px solid #932A12;}
			footer #ft_contents ul li:nth-child(2) a::before{border-left: 6px solid #003B83;}
			footer #ft_contents ul li:nth-child(3) a::before{border-left: 6px solid #DF7D7D;}
			footer #ft_contents ul li a:hover::before{border-left: 6px solid #FFF;}


footer #instagram,
footer #twitter,
footer #facebook{
	position:absolute;
	top:-46px;
	width:32px;
	height:32px;
	z-index:100;
	}
	footer #instagram{
		right:50px;
	}
	footer #twitter{
		right:0px;
	}
	footer #facebook{
		right:0px;
}

footer #address_box{
	position:relative;
	text-align:left;
	}
	footer address{
		display:inline-block;
		position:relative;
		padding:0 15px 0px 0px;
		font-size:0.84rem;
		text-align:left;
		vertical-align:text-top;
		color:#FFF;
		line-height:1.5;
	}
	footer address:nth-child(2){
		padding:0 15px 0px;
		border-left:1px solid #FFF;
	}
	footer address b{
		font-weight:bold;
		font-size:0.95rem;
}

footer p#copyright{
	position:absolute;
	top:0px;
	right:0px;
	font-size:0.84rem;
	text-align:center;
	color:#FFF;
	z-index:10;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	footer{
		margin:0px 0 0 0px;
		padding:10px 20px 0;
		}
		footer #ft_contents{
			width:100%;
			}
			footer #ft_contents ul{
				position:relative;
				top:0px;
				left:0px;
				width:100%;
				margin:0 auto 10px;
				list-style:none;
			}
			footer #ft_contents ul li{
				display:inline-block;
				position:relative;
				margin:0 6px 10px 0;
				}
				footer #ft_contents ul li a{
					padding:0 7px;
					font-size:0.77rem;
					color:#FFF;
					}
					footer #ft_contents ul li:nth-child(1) a{background:#932A12;}
					footer #ft_contents ul li:nth-child(2) a{background:#003B83;}
					footer #ft_contents ul li:nth-child(3) a{background:#DF7D7D;}
				footer #ft_contents ul li:nth-child(1) a::before{border-left: 6px solid #FFF;}
				footer #ft_contents ul li:nth-child(2) a::before{border-left: 6px solid #FFF;}
				footer #ft_contents ul li:nth-child(3) a::before{border-left: 6px solid #FFF;}


	footer #instagram,
	footer #twitter,
	footer #facebook{
		display:inline-block;
		position:relative;
		top:0px;
		margin:0 7px 15px;
		}
		footer #instagram{
			right:0px;
		}
		footer #twitter{
			right:0px;
		}
		footer #facebook{
			right:0px;
	}

	footer address{
		margin:0 0 20px;
		font-size:0.77rem;
		text-align:center;
	}
	footer p#copyright{
		position:relative;
		width:100%;
		font-size:0.77rem;
		background:rgba(0,0,0,0.1);
	}
}

/* -----------------------------------------------------------------
   pagetop
----------------------------------------------------------------- */

#pagetop{
	position:fixed;
	right:20px;
	bottom:25px;
	width:50px;
	height:50px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background:rgba(47,43,92,1);
	opacity:0.5;
	z-index:999;
	}
	#pagetop:before,
	#pagetop:after{
		content:" ";
		position:absolute;
	}
	#pagetop:before{
		top:8px;
		left:10px;
		width: 0;
		height: 0;
		margin-top: -15px;
		border:15px solid transparent;
		border-bottom:15px solid rgba(255,255,255,1);
	}
	#pagetop:after{
		top:23px;
		left:19px;
		width:13px;
		height:18px;
		background:rgba(255,255,255,1);
		z-index:0;
	}
	#pagetop span{
		display:none;
		position:absolute;
		top:-25px;
		height:22px;
		right:0px;
		width:80px;
		font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
		font-size:10px;
		background:rgba(255,255,255,1);
		border:1px solid #000;
		border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		color:#000;
		line-height:20px;
		}
		#pagetop span:before,
		#pagetop span:after{
			content:" ";
			position:absolute;
		}
		#pagetop span:before{
			bottom:-12px;
			right:8px;
			width:0;
			height:0;
			border:5px solid transparent;
			border-top:7px solid rgba(0,0,0,1);
		}
		#pagetop span:after{
			bottom:-11px;
			right:8px;
			width:0;
			height:0;
			border:5px solid transparent;
			border-top:7px solid rgba(255,255,255,1);
	}
	/* hover */
	#pagetop:hover{
		opacity:1;
	}
	
	#pagetop a{
		display:block;
		position:absolute;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		color:#0061B1;
		border-radius:6px;
		-webkit-border-radius:6px;
		-moz-border-radius:6px;
		z-index:1;
}
@media print{
	#pagetop{
		display:none;
	}
}