@charset "utf-8";

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: Helvetica, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kakugo Pro W3", "ＭＳ Ｐゴシック", "MS P Gothic", "メイリオ", "Meiryo", Osaka, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
}

ul,ol { list-style: none; }
img { border: none; vertical-align: top; }
a:link { text-decoration: none; color: #666; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: none; color: #999; }
a:hover img,
input[type=image]:hover { opacity: .6; filter: alpha(opacity=60); }

.fmin { font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; }

.pc { display: block !important; }
.sp { display: none !important; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after { clear: both; }

/* container
------------------------------------------------ */
#container {
	position: relative;
}

.wrap {
	position: relative;
	margin: 0 auto;
	width: 960px;
}

/* header
------------------------------------------------ */
#header {
	position: relative;
	width: 100%;
	z-index: 10;
}

/* head_top */
#head_top {
	padding-bottom: 6px;
	background: url(../img/common/head_bg.gif) no-repeat center bottom #802890;
}
#head_top .frame { padding: 14px 0; background: #000; }

	#logo {
		float: left;
		width: 130px;
	}

		#logo a { display: block; }
			#logo img { width: 100%; }

	#head_top .info {
		float: right;
		padding-top: 20px;
		width: 500px;
		text-align: right;
	}

		#head_top .info .language,
		#head_top .info .btn,
		#head_top .info .sns,
		#head_top .info .sns li {
			display: inline-block;
			vertical-align: middle;
		}

		#head_top .info .language {
			width: 182px;
		}

			#head_top .info .language select {
				width: 100%;
			}

		#head_top .info .btn {
			margin-left: 26px;
			width: 182px;
		}

			#head_top .info .btn a { display: block; }
				#head_top .info .btn img { width: 100%; }

		#head_top .info .sns {
			margin-left: 26px;
		}

			#head_top .info .sns li {
				margin-left: 16px;
			}
			#head_top .info .sns li:first-child { margin-left: 0; }

				#head_top .info .sns li a { display: block; }

/* gnav */
#gnav {
	position: relative;
}
@media screen and (min-width: 641px) {
	#gnav { display: block !important; top: auto !important; height: auto !important; }
}

	#gnav .main {
		background: #e1e1e1;
	}

		#gnav .main ul {
		}
	
			#gnav .main ul li {
				float: left;
				width: 158px;
				height: 30px;
			}
	
				#gnav .main ul li a {
					display: block;
					margin: 0 auto;
					background: url(../img/common/gnav_main.png) no-repeat left top;
					border-right: solid #a7a7a8 2px;
					height: 100%;
					text-indent: 100%;
					white-space: nowrap;
					overflow: hidden;
				}
				#gnav .main ul li:first-child a { border-left: solid #a7a7a8 2px; }

				#gnav .main ul .nav_home a { background-position: center -5px; }
				#gnav .main ul .nav_quality a { background-position: center -45px; }
				#gnav .main ul .nav_products a {  background-position: center -85px; }
				#gnav .main ul .nav_store a { background-position: center -125px; }
				#gnav .main ul .nav_company a { background-position: center -165px; }
				#gnav .main ul .nav_inquiry a { background-position: center -205px; }

				#gnav .main ul li ul { display: none; }
				@media screen and (min-width: 641px) {
					#gnav .main ul li ul { display: none !important; }
				}

	#gnav .sub {
		position: absolute;
		top: 30px;
		left: 0;
		display: none;
		width: 100%;
		background: rgba(0,0,0,.9);
		color: #fff;
	}
	#gnav .sub a { color: #fff; }
	#gnav .sub a:hover { color: #ccc; }

		#gnav .sub ul {
			display: none;
			padding: 10px 0;
		}

			#gnav .sub ul li {
				float: left;
				margin: 10px 40px 10px 0;
				font-size: 14px;
				font-size: 1.4rem;
			}

/* fix_header */
.fix_header #header { position: fixed; top: 0; left: 0; }

/* contents
------------------------------------------------ */
#contents {
	margin-top: 60px;
}

/* footer
------------------------------------------------ */
#footer {
	position: relative;
	margin-top: 100px;
}
#footer .wrap { padding: 10px 0; border-top: solid #808080 2px; }

	#pagetop {
		position: absolute;
		top: -32px;
		right: 0;
		width: 25px;
		height: 13px;
	}

		#pagetop a { display: block; }
			#pagetop img { width: 100%; }

	#footer .link {
		margin-bottom: 34px;
	}

		#footer .link li {
			display: inline-block;
			margin: 0 40px 10px 0;
			vertical-align: middle;
		}
		#footer .link li:last-child { margin-right: 0; }

			#footer .link li a {
				display: block;
				height: 14px;
				background: url(../img/common/foot_link.png) no-repeat left top;
				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;
			}
			#footer .link .link_home a { width: 50px; background-position: left top; }
			#footer .link .link_quality a { width: 100px; background-position: -91px top; }
			#footer .link .link_products a { width: 40px; background-position: -231px top; }
			#footer .link .link_store a { width: 70px; background-position: -311px top; }
			#footer .link .link_company a { width: 70px; background-position: -422px top; }
			#footer .link .link_inquiry a { width: 98px; background-position: -532px top; }
			#footer .link .link_privacy a { width: 148px; background-position: -670px top; }
			#footer .link .link_sitemap a { width: 92px; background-position: -858px top; }

/* foot_btm */
#foot_btm {
	position: relative;
}

		#foot_btm .btn {
			position: absolute;
			top: 0;
			right: 0;
			width: 182px;
		}

			#foot_btm .btn a { display: block; }
				#foot_btm .btn img { width: 100%; }

	#foot_logo {
		width: 130px;
	}

		#foot_logo a { display: block; }
			#foot_logo img { width: 100%; }

	#copyright {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 240px;
		font-size: .8rem;
		line-height: 1.2;
	}

		#copyright img { width: 100%; }

/* modalwindo
------------------------------------------------ */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	background: rgba(0,0,0,.8);
	width: 100%;
	height: 100vh;
	z-index: 50;
}
.sp_menu_open #overlay { z-index: 5; }
.device_pc.sp_menu_open #overlay { display: none !important; }

#modal_contents {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	width: 100%;
	z-index: 100;
}

#modal_close {
	position: absolute;
	top: -20px;
	right: 0;
	width: 50px;
	height: 15px;
}

#modal_close a {
	display: block;
	width: 100%;
	height: 100%;
	background-size: 100%;
}

/* responsive style
------------------------------------------------ */
@media screen and (max-width: 960px) {
	.wrap { padding: 0 2%; width: 96%; }
	/* gnav */
	#gnav {}
	#gnav .main {}
	#gnav .main ul {}
	#gnav .main ul li { width: 16.6%; }
}

@media screen and (max-width: 740px) {
	/* gnav */
	#gnav {}
	#gnav .main {}
	#gnav .main ul {}
	#gnav .main ul li {}
	#gnav .main ul li a {}
	#gnav .main ul .nav_home a { background-position: center -245px; }
	#gnav .main ul .nav_quality a { background-position: center -285px; }
	#gnav .main ul .nav_products a {  background-position: center -325px; }
	#gnav .main ul .nav_store a { background-position: center -365px; }
	#gnav .main ul .nav_company a { background-position: center -405px; }
	#gnav .main ul .nav_inquiry a { background-position: center -445px; }
}

@media screen and (max-width: 700px) {
	/* header */
	#header {}
	/* head_top */
	#head_top {}
	#head_top .info { padding-top: 10px; width: 400px; }
	#head_top .info .sns { margin-top: 10px; }
}

@media screen and (max-width: 640px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
	img { max-width: 100%; }
	.wrap { padding: 0; width: 100%; }

	/* header */
	#header {}
	#head_top { padding-bottom: 5px; background: url(../img/common/sp/head_bg.gif) no-repeat center bottom; background-size: 100%; }
	#head_top .frame { padding: 10px 4%; }	
	#logo { width: 72px; }
	#head_top .info { padding-top: 0; width: 184px; }
	#head_top .info .btn,
	#head_top .info .sns { display: none; }
	#head_top .info .language { width: 112px; }
	#head_top .info .menu { display: inline-block !important; margin-left: 18px; width: 54px; text-align: center; vertical-align: middle; }
	#head_top .info .menu a { display: block; height: 36px; border: solid #fff 1px; line-height: 36px; }
	#head_top .info .menu img { width: 42px; vertical-align: middle; }
	/* gnav */
	#gnav { position: absolute; top: 0; left: 0; display: none; width: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; }
	#gnav .main {}
	#gnav .main ul { width: 100%; }
	#gnav .main ul li { float: none; width: auto; height: auto; border-bottom: solid #a7a7a8 1px; }
	#gnav .main ul li a { padding: 12px 4%; background: none; border: none; font-size: 1.4rem; text-indent: 0; white-space: normal; overflow: visible; }
	#gnav .main ul li:first-child a { margin-left: 0; border: none; }
	#gnav .main ul li a[href^="#"] { background: url(../img/common/sp/icon_arrow_down1.png) no-repeat 96% center; background-size: 10px; }
	#gnav .main ul li a.on[href^="#"] { background-image: url(../img/common/sp/icon_arrow_up1.png); }
	#gnav .main ul li ul { margin: 0 4%; width: 92%; border-top: solid #a7a7a8 1px; }
	#gnav .main ul li ul li:last-child { border-bottom: none; }

	/* contents */
	#contents { margin-top: 30px; }

	/* footer */
	#footer { margin: 60px 4% 0; }
	#footer .wrap { border-top-width: 1px; }
	#pagetop { bottom: -20px; width: 20px; height: auto; }
	#footer .link { margin-bottom: 8px; }
	#footer .link li { margin: 0 0 12px; width: 50% !important; }
	#footer .link li a { padding-left: 8px; width: 100% !important; height: auto; background: url(../img/common/icon_arrow1.png) no-repeat left center !important; background-size: 2px !important; text-indent: 0; white-space: normal; font-size: 1.2rem; }
	#foot_btm {}
	#foot_btm .btn { position: relative; margin-bottom: 20px; width: 140px; }
	#foot_logo { width: 72px; }
	#copyright { width: 155px; }
}