@charset "utf-8";
/* ******************************************************************
 *	File name		: base.css
 *	Summary			: css base
 * ******************************************************************
 */
/* ----------------------------------------------------------------- */
/*	base                                                             */
/* ----------------------------------------------------------------- */

/*

2021 blue

旧メイン #063B63 rgba(6,59,99,0.5)
メイン #04447C rgba(0,83,58,0.5)
濃 #091646 rgba(9,22,70,0.5)
青 #074E82 rgba(7,78,130,0.5)
黄 #D3B835 rgba(211,184,53,0.5)

*/

/*-----------------------------------
  body
-----------------------------------*/
*{

}
body{
	position:relative;
	width:100%;
	height:100%;
	line-height:145%;
	background:#FFF;
	color:#222;
	}
	#wrapper{
		position:relative;
		width:100%;
		text-align:center;
		overflow:hidden;
	}
	#wrapper:after{
		display:none;
		content:" ";
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:36px;
		background:rgba(22,43,63,0.7);
		z-index:5;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	body{
		background:#FFF;
	}
}
@media only screen and (min-width:1920px){
}

/*-----------------------------------
  header
-----------------------------------*/

header{
	display:block;
	position:relative;
	width:100%;
	height:137px;
	background:#DBDBEA;
	}
	header:before,
	header:after{
		content:" ";
		position:absolute;
		left:0px;
		width:100%;
		z-index:5;
	}
	header:before{
		bottom:0px;
		left:0px;
		height:57px;
		background:linear-gradient(-180deg, #0CAEE7, #004D8D, #004D8D, #04447C);
}
#head_contents{
	position:relative;
	width:1000px;
	max-width:100%;
	height:100%;
	margin:0 auto;
	text-align:left;
	z-index:10;
	}
	#head_contents h1{
		position:absolute;
		top:0px;
		left:0px;
		width:350px;
		height:80px;
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.7);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.7);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.7);
		z-index:10;
}

/* main_nav */
header #main_nav{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:57px;
	margin:0 auto;
	list-style:none;
	background:linear-gradient(-180deg, #0CAEE7, #004D8D, #004D8D, #04447C);
	z-index:20;
	}
	header #main_nav ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		list-style:none;
		position:relative;
		height: 100%;
		-webkit-overflow-scrolling:touch;
	}
	header #main_nav li {
		position:relative;
		width:16.6%;
		height:100%;
		padding:8px 10px;
		text-align:center;
		}
		header #main_nav li:nth-child(3){
			width:17.0%;
		}
		header #main_nav li:before,
		header #main_nav li:after{
			content:" ";
			position:absolute;
			top:18px;
			width:16.6%;
			height:22px;
			text-align:center;
			z-index:1;
		}
		header #main_nav li:before{
			left:-1px;
			border-left:1px solid #FFF;
		}
		header #main_nav li:after{
			right:0px;
			border-right:1px solid #FFF;
		}
		header #main_nav li#xxxxxxxxxxxxxxxxxxx,
		header #main_nav li#xxxxxxxxxxxxxxxxxxx,
		header #main_nav li ul{
			display:none;
	}

	header #main_nav li a{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		height:100%;
		font-weight:normal;
		font-size:0.9em;
		text-align:center;
		text-decoration:none;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		color:#FFF;
	}
	header #main_nav li a:after{
		content:" ";
		position:absolute;
		top:calc(50% + 1.2em);
		left:50%;
		width:0px;
		height:3px;
		background:rgba(255,255,255,0.7);
		transition-duration:0.5s;
		opacity:0;
	}
	header #main_nav li.active a,
	header #main_nav li.active a:hover{
		text-decoration:none;
		background:linear-gradient(0deg, rgba(4,68,124,1), rgba(4,68,124,1));
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4) inset;
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4) inset;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4) inset;
	}
	header #main_nav li.active a:after,
	header #main_nav li a:hover:after{
		width:56px;
		left:calc(50% - 28px);
		opacity:1;
	}

/* l_navi */
header #main_nav li#ln_link,
header #main_nav li#ln_sitemap,
header #main_nav li#ln_facebook,
header #main_nav li#ln_instagram,
header #main_nav li#ln_twitter,
header #main_nav li#ln_member{
	position:absolute;
	top:-65px;
	right:0px;
	width:auto;
	height:auto;
	padding:0px;
	text-align:left;
	}
	header #main_nav li#ln_link:before,
	header #main_nav li#ln_sitemap:before,
	header #main_nav li#ln_facebook:before,
	header #main_nav li#ln_instagram:before,
	header #main_nav li#ln_twitter:before,
	header #main_nav li#ln_member:before,
	header #main_nav li#ln_link:after,
	header #main_nav li#ln_sitemap:after,
	header #main_nav li#ln_facebook:after,
	header #main_nav li#ln_instagram:after,
	header #main_nav li#ln_twitter:after,
	header #main_nav li#ln_member:after{
		display:none;
	}
	header #main_nav li#ln_link a,
	header #main_nav li#ln_sitemap a,
	header #main_nav li#ln_facebook a,
	header #main_nav li#ln_instagram a,
	header #main_nav li#ln_twitter a,
	header #main_nav li#ln_member a{
		display:inline-block;
		width:auto;
		height:auto;
		font-weight:bold;
		font-size:0.7rem;
		text-align:left;
		text-decoration:none;
		border-radius:0px;
		-webkit-border-radius:0px;
		-moz-border-radius:0px;
		color:#04447C;
	}
	header #main_nav li a:hover{
		text-decoration:none;
		background:none;
	}
	header #main_nav li#ln_facebook a:after,
	header #main_nav li#ln_instagram a:after,
	header #main_nav li#ln_twitter a:after{
		display:none;
}
header #main_nav li#ln_link{right:255px;}
header #main_nav li#ln_sitemap{right:178px;}
header #main_nav li#ln_facebook{right:143px;width:22px;}
header #main_nav li#ln_instagram{right:110px;width:22px;}
header #main_nav li#ln_twitter{right:77px;width:22px;}
header #main_nav li#ln_member{right:0px;}


/* --- responsive --- */

@media only screen and (max-width:767px){
	header{
		display:none;
	}
	#ln_facebook,
	#ln_instagram,
	#ln_twitter{
		display:none !important;
	}
}

/*-----------------------------------------------------------------------------------------
  contents_body main_contents
-----------------------------------------------------------------------------------------*/
#contents_body{
	width:1020px;
	margin:0px auto 0px;
}
#contents_body > h2{
	position:relative;
	left:-20px;
	width:1060px;
	height:140px;
	margin:0 auto;
	background:url(../../img/title/default.png) no-repeat 0 0;
	overflow:hidden;
	text-indent:150%;
	white-space:nowrap;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#contents_body{
		width:100%;
	}
	#contents_body > h2{
		width:100%;
	}
}
/*
>>>page h2 go to style.css-title
*/

#pnkz{
	margin:13px 0;
	text-align:left;
	}
	#pnkz a{
		color:#0060B1;
		text-decoration:none;
	}
	#pnkz a:hover{
		text-decoration:underline !important;
}

main{
	display:block;
	position:relative;
	margin:0px !important;
	text-align:left;
	}
	main:after{
		content:" ";
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:url(../../image/base/bg.png) repeat-y center 0;
		background-size:contain;
		z-index:1;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	main:after{
		display:none;
	}
}

#main_contents{
	position:relative;
	width:770px;
	min-height:350px;
	overflow:hidden;
	z-index:10;
}
/*-----------------------------------
  youtube
-----------------------------------*/

.youtube{
	position:relative;
	width:100%;
	height:0px;
	padding-top:56.25%;
	}
	.youtube iframe,
	.youtube .iframe{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
}

/*---------------------
 contents
---------------------*/

#pageback{
	position:fixed;
	right:20px;
	bottom:25px;
	width:50px;
	height:50px;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	background:#FFFFFF;
	border:5px solid rgba(0,97,177,1);
	opacity:0.7;
	z-index:1000;
	}
	#pageback:hover{
		opacity:1;
	}
	#pageback:before{
		content:" ";
		position:absolute;
		top:7px;
		left:6px;
		width: 0;
		height: 0;
		margin-top: -15px;
		border:15px solid transparent;
		border-bottom:15px solid rgba(0,97,177,1);
	}
	#pageback:after{
		content:" ";
		position:absolute;
		top:22px;
		left:15px;
		width:12px;
		height:19px;
		background:rgba(0,97,177,1);
		z-index:0;
	}
	#pageback a{
		display:block;
		position:absolute;
		left:-17px;
		top:-10px;
		width:80px;
		min-height:20px;
		padding:53px 0 0 0;
		font-size:0.77rem;
		color:#0061B1;
		text-align:center;
		border-radius:6px;
		-webkit-border-radius:6px;
		-moz-border-radius:6px;
		z-index:1;
		}
		#pageback a:hover{
			text-decoration:none;
}
.base_green #pageback{
	border:5px solid rgba(111,185,44,1);
	}
	.base_green #pageback:before{
		border-bottom:15px solid rgba(111,185,44,1);
	}
	.base_green #pageback:after{
		background:rgba(111,185,44,1);
	}
	.base_green #pageback a{
		color:#6FB92C;
}

#pagetop{
	clear:both;
	position:relative;
	width:100%;
	height:50px;
	margin:-20px 0 0 0;
	text-align:right;
	z-index:1000;
	}
	#pagetop a{
		position:absolute;
		right:0px;
		display:block;
		width:497px;
		height:50px;
		background:url(../../img/base/pagetop.png) no-repeat 0 0;
		overflow:hidden;
		text-indent:150%;
		white-space:nowrap;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#pagetop{
		display:none;
	}
}


/* ----------------------------------------------------------------- */
/*	pagelink */
/* ----------------------------------------------------------------- */
.pagelink{
	position:relative;
	margin-bottom:17px;
	padding-bottom:15px;
	border-bottom:2px dotted rgba(0,128,204,0.5);
}
.pagelink:after{
	content: '';
	visibility: hidden;
	display: block;
	font-size: 0;
	position: static;
	clear: both;
	height: 0;
}
.pagelink li{
	float:left;
	display:inline-block;
	margin:7px 3px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border:1px solid #FFFFFF;
	background:url(../../img/base/pagelink.png) no-repeat bottom right #FFFFFF;
	text-align:center;
	line-height:1;
	}
	.pagelink li.active,
	.pagelink li:hover{
		border:1px solid rgba(16,167,228,0.8);
		background:url(../../img/base/pagelink_hover.png) no-repeat bottom right rgba(16,167,228,0.2);
	}
	.pagelink li a{
		display:block;
		padding:12px 20px 10px 18px;
		color:#000000;
		text-decoration:none;
}

/*------------------------------------------------
  banner_area
-------------------------------------------------*/

#banner_area{
	position:relative;
	width:100%;
	min-height:250px;
	background:#005298;
	}
	#banner_area #ba_contents{
		position:relative;
		width:1040px;
		margin:0 auto;
		padding:45px 20px 30px;
	}
	#banner_area #ba_contents ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		position:relative;
		width:750px;
		list-style:none;
		}
		#banner_area #ba_contents ul li{
			width:130px;
			height:40px;
			margin:0 0 15px;
			color:#FFF;
		}
		#banner_area #ba_contents ul li.ba_comment{
			width:100%;
			height:auto;
			font-size:0.8rem;
			text-align:left;
			margin:5px 0 5px;
}

#banner_area #ba_contents #yeg_shopping{
	position:absolute;
	top:20px;
	right:15px;
	width:214px;
	height:200px;
	padding:90px 22px 0 0;
	background:url(../../image/top/yeg_shopping.png) no-repeat 0 0;
	}
	#banner_area #ba_contents #yeg_shopping div{
		position:relative;
		width:156px;
		height:40px;
		margin:0 auto 13px;
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#banner_area{
		display:none;
	}
}

/*---------------------
  footer
---------------------*/
footer{
	display:block;
	position:relative;
	width:100%;
	padding:40px 20px;
	text-align:center;
}
footer p#copyright{
	clear:both;
	font-size:0.8rem;
	text-align:center;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	footer{
		margin-top:20px;
		padding:20px 20px;
		border-top:7px solid rgba(22,43,63,0.7);;
	}
}

/*---------------------
  responsive_link
---------------------*/

.responsive_link{
	display:none;
	position:relative;
	width:100%;
	margin:0 0 15px;
	padding:0 20px;
	text-align:center;
	z-index:150;
}
.responsive_link select{
	width: 100%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background:-webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background:linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 20px, 100%;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	cursor: pointer;
}
.responsive_link select .rltitle {
	padding:0px !important;
	font-size:0.85rem;
	background:rgba(0,0,0,0.1) !important;
	line-height:1;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	.responsive_link{
		display:block;
	}
}

.responsive_link .side_navi_address{
	position:relative;
	width:100%;
	margin:10px 0 0 0;
	text-align:left;
}

/* ------------------------------------------------
   ft_menu
-------------------------------------------------*/

#ft_menu{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:20px 20px 15px;
	background:#FFF;
	}
	#ft_menu ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		position:relative;
		width:1000px;
		margin:0 auto;
		list-style:none;
		text-align:center;
		}
		#ft_menu ul li{
			display:block;
			position:relative;
			width:20%;
			margin:0 0 10px;
			text-align:left;
		}
		#ft_menu ul li a{
			display:block;
			padding:0px 0 0px 18px;
			font-weight:bold;
			text-align:left;
			text-decoration:none;
			color:#105D9E;
		}
		#ft_menu ul li a::before{
			content:" ";
			position:absolute;
			top:5px;
			left:0px;
			width:15px;
			height:15px;
			background:#105D9E;
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			border-radius:50%;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#ft_menu{
		display:none;
	}
}
