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

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

body{
	position:relative;
	width:100%;
	height:100%;
	background:url(../../images/bg.jpg) no-repeat center 0;
	background-size:100vw;
/*	background:url(../../images/bg.jpg) no-repeat calc(50% - 18px) 0;*/
	line-height:145%;
	color:#222;
	}
	#wrapper{
		position:relative;
		width:100%;
}

/* --- responsive --- */
@media screen and (max-width:767px){
}
@media print {
	body{
		margin:0;
		width:1100px;
	}
}

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

header{
	position:relative;
}
header h1{
	position:absolute;
	top:1.14vw;
	left:35.98vw;
	width:28.12vw;
	height:10.67vw;
}

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

/* -----------------------------------------------------------------
   lang
----------------------------------------------------------------- */

#lang{
	position:absolute;
	top:2.81vw;
	left:68.02vw;
	width:7.13vw;
	min-height:calc(2.29vw + 6px);
	border:2px solid #FFF;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	z-index:999;
	background:#6AB82D;
	}
	#lang h2{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		top:0px;
		left:0px;
		width:100%;
		height:calc(2.29vw + 6px);
		padding-bottom:6px;
		font-weight:normal;
		font-size:0.9vw;
		background:#6AB82D;
		color:#FFF;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		cursor:pointer;
		transition-duration:0.5s;
		}
		#lang.open h2,
		#lang h2:hover{
			background:#49851A;
		}
		#lang h2::after{
			content:" ";
			position:absolute;
			bottom:-3px;
			left:calc(50% - 6px);
			border: 6px solid transparent;
			border-top: 6px solid rgba(255,255,255,1);
	}
	#lang ul{
		display:none;
		width:100%;
		list-style:none;
	}
	#lang ul li{
		width:100%;
	}
	#lang ul li a{
		display:block;
		padding:2px 0;
		font-size:0.9vw;
		text-align:center;
		text-decoration:none;
		color:#FFF;
	}
	#lang ul li a:hover{
		background:rgba(255,255,255,0.3);
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#lang{
		top:0px;
		left:auto;
		right:0px;
		width:80px;
		min-height:20px;
		border-top:none;
		-moz-border-radius: 6px 6px;
		-webkit-border-radius: 6px 6px;
		border-radius:0 0 6px 6px;
		}
		#lang h2{
			height:20px;
			padding-bottom:0px;
			font-size:0.6rem;
			-moz-border-radius: 6px 6px;
			-webkit-border-radius: 6px 6px;
			border-radius:0 0 6px 6px;
			}
			#lang h2::after{
				display:none;
		}
		#lang ul li a{
			font-size:0.6rem;
	}
}


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

main{
	display:block;
	position:relative;
	margin-top:0px;
	padding:0px;
	width:100%;
	z-index:1;
}
section{
	position:relative;
	width:100%;
	max-width:100%;
	margin:0 auto 30px;
	padding:0 20px;
	text-align:center;
}
.contents{
	position:relative;
	width:1040px;
	max-width:100%;
	margin:0 auto;
	text-align:center;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	section{
		margin-bottom:25px;
	}
}

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

footer{
	position:relative;
	width:100%;
	padding:10px 20px 50px;
	background:#FFF;
	text-align:center;
	overflow:hidden;
	color:#FFF;
	z-index:500;
	}
	footer p{
		position:relative;
		width:1000px;
		max-width:100%;
		margin:0 auto;
		font-size:0.84rem;
		text-align:center;
		color:#49851A;
		z-index:10;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	footer p{
		font-size:0.70rem;
	}
}

/* -----------------------------------------------------------------
   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(100,100,100,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-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;
	}
}

/* -----------------------------------------------------------------
   links
----------------------------------------------------------------- */

#links{
	margin:0px;
	padding:30px 20px 20px;
	background:#6AB82D;
	}
	#links h2{
		position:relative;
		width:100%;
		margin:0 0 5px;
		font-weight:900;
		font-size:2.0rem;
		text-align:center;
		color:#FFF !important;
	}
	#links h2 + .h2_jp{
		margin:0 0 15px;
		font-size:1.0rem;
		text-align:center;
		color:#FFF !important;
}
#links #link_list ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	list-style:none;
	width:920px;
	max-width:100%;
	margin:0 auto 15px;
	padding:0 30px;
	border-bottom:1px dashed rgba(255,255,255,0.5);
	}
	#links #link_list ul:last-child{
		margin:0 auto 0px;
		border-bottom:none;
	}
	#links #link_list ul li{
		display:block;
		position:relative;
		width:260px;
		max-width:33%;
		margin:0 0 15px;
		padding:0px !important;
		background:#6AB82D;
	}
	#links #link_list ul li a{
		display:block;
		transition-duration:0.5s;
	}
	#links #link_list ul li a:hover{
		opacity:0.8;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#links #link_list ul li{
		width:100%;
		max-width:100%;
	}
	#links #link_list ul:nth-child(2) li:first-child{
		display:none;
	}
}

/* -----------------------------------------------------------------
   contact
----------------------------------------------------------------- */

#contact{
	margin:10px 0 0 0;
	padding:30px 20px 20px;
	background:#6AB82D;
	}
	#contact h2{
		position:relative;
		width:100%;
		margin:0 0 5px;
		font-weight:900;
		font-size:2.0rem;
		text-align:center;
		color:#FFF !important;
	}
	#contact h2 + .h2_jp{
		margin:0 0 15px;
		font-size:1.0rem;
		text-align:center;
		color:#FFF !important;
	}
	#contact p{
		color:#FFF !important;
}