@charset "utf-8";

/* ========================================================
	template.css => テンプレート用CSS
======================================================== */
html,
body {
	min-width: 960px;
	height: 100%;
}
body {
	background-color: #000000;
	font-size: 75%;
	line-height: 1.6;
	color: #ffffff;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
}
table {
	line-height: 1.6;
}
a {
	color: #ffffff;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
label {
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	html,
	body {
		min-width: 0;
	}
	body {
		font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", Verdana, Arial, Helvetica, sans-serif;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}


/* pc / sp
============================================================================================================ */
.sp,
.sps {
	display: none !important;
}
@media screen and (min-width: 769px), print {
	.pc_break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
}
@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	img.sp, span.sp, br.sp, em.sp, strong.sp {
		display: inline !important;
	}
	td.sp, th.sp {
		display: table-cell !important;
	}
	.sp_break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
}
@media screen and (max-width: 370px) {
	.sps {
		display: block !important;
	}
	img.sps, spsan.sps, br.sps, em.sps, strong.sps {
		display: inline !important;
	}
	.sps_non {
		display: none !important;
	}
}

/* sp
============================================================================================================ */
@media screen and (max-width: 768px) {
	*[data-label] img {
		display: none !important;
	}
	*[data-label]::before {
		content: attr(data-label);
	}
	*[data-label-r]::after {
		display: block;
		content: attr(data-label-r);
	}
}
@media screen and (min-width: 371px) {
	*[data-label-r].spl_r_inline::after {
		display: inline;
	}
}

/* pc_hidden
============================================================================================================ */
@media screen and (min-width: 769px), print {
	.pc_hidden {
		position: relative;
		overflow: hidden;
		display: block;
		height: 0;
	}
}





/* コンテナ
============================================================================================================ */
#container {
	position: relative;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#container {
	}
}



/* ヘッダー
============================================================================================================ */
#header {
	position: relative;
	width: 960px;
	margin: 0 auto 50px auto;
}
#header:after {
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; overflow: hidden;
}
#header #headlogo {
	padding: 30px 0 50px 0;
}
@media screen and (max-width: 768px) {
	#header {
		width: auto;
		margin: 0;
		padding-top: 50px;
	}
	#header #headlogo {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 50px;
		padding: 7px 10px;
		background-color: #000;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 1000;
	}
	#header #headlogo img {
		width: auto;
		height: 35px;
	}
}

/* nav_btn
------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	#header .nav_btn {
		position: fixed;
		right: 0;
		top: 0;
		width: 60px;
		height: 50px;
		background-color: #00b7ee;
		z-index: 1001;
	}
	#header .nav_btn a {
		position: relative;
		display: block;
		height: 50px;
	}
	#header .nav_btn:before,
	#header .nav_btn a:before,
	#header .nav_btn a:after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 26px;
		margin-top: -1px;
		margin-left: -13px;
		border-top: 2px solid #fff;
		-webkit-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
	}
	#header .nav_btn a:before {
		-webkit-transform: translateY(-7px);
		-ms-transform: translateY(-7px);
		-o-transform: translateY(-7px);
		transform: translateY(-7px);
	}
	#header .nav_btn a:after {
		-webkit-transform: translateY(7px);
		-ms-transform: translateY(7px);
		-o-transform: translateY(7px);
		transform: translateY(7px);
	}

	/* open */
	#header.open .nav_btn:before {
		opacity: 0;
	}
	#header.open .nav_btn a:before {
		-webkit-transform: translateY(0) rotate(45deg);
		-ms-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}
	#header.open .nav_btn a:after {
		-webkit-transform: translateY(0) rotate(-45deg);
		-ms-transform: translateY(0) rotate(-45deg);
		transform: translateY(0) rotate(-45deg);
	}
}
@media screen and (max-width: 370px) {
	#header .nav_btn {
		width: 50px;
	}
}



/* nav
-------------------------------------------------------------------------- */
#nav {
	zoom: 1;
}
#nav:after {
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0;
}
#nav li {
	float: left;
}

@media screen and (max-width: 768px) {
	#nav {
	}
	#header .nav_close {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background-color: rgba(0,0,0,.3);
		opacity: 0;
		pointer-events: none;
		z-index: 999;
	}
	#nav > div {
		position: fixed;
		right: 0;
		bottom: 0;
		width: 280px;
		top: 50px;
		background-color: #222;
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		z-index: 999;
	}
	#nav > div > div {
		height: 100%;
		padding-bottom: 30px;
		overflow-y: auto;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* open */
	#header.open #nav > div {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
	}
	#header.open .nav_close {
		opacity: 1;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		pointer-events: auto;
	}
	/* showed */
	#header.showed #nav > div {
		-webkit-transition: -webkit-transform 0.3s;
		-o-transition: -o-transform 0.3s;
		transition: transform 0.3s;
	}
	#header.showed .nav_close {
		bottom: 0;
		-webkit-transition: opacity .3s;
		-o-transition: opacity .3s;
		transition: opacity .3s;
	}

	#nav li {
		float: none;
		border-bottom: 1px solid #333;
	}
	#nav li {
		float: none;
		margin: 0 !important;
	}
	#nav li a {
		display: block;
		padding: 10px 20px;
		font-size: 18px;
		line-height: 1.3;
		text-decoration: none;
	}
	#nav li a::after {
		font-size: 15px;
	}
	#nav li a img {
		display: none;
	}
}



/* head_top
-------------------------------------------------------------------------- */
#header .head_top {
	position: absolute;
	right: 0;
	top: 50px;

}
#header .head_top p {
	float: right;
	padding-left: 10px;
}
#header .head_top select {
	margin-top: 15px;
	vertical-align: bottom;
}
#header .head_top p.tel {
	font-size: 117%;
	margin-top: 10px;
	width: 18em;
}
#header .head_top p.tel a {
	padding-left: 22px;
	background: url(../images/head/icon_tel.png) no-repeat 0 0.3em;
	font-size: 128%;
	text-decoration: none;
}

#header .head_top p#pankuzu{
	clear: both;
	text-align: right;
	margin-top: 10px;
	font-size: 11px;
}
@media screen and (max-width: 768px) {
	#header .head_top {
		position: static;
	}
	#header .head_top p {
		float: none;
	}
	#header .head_top p.tel {
		position: fixed;
		right: 130px;
		top: 8px;
		font-size: 10px;
		line-height: 1.4;
		margin: 0;
		padding-left: 18px;
		width: auto;
		z-index: 1010;
	}
	#header .head_top p.tel a {
		display: block;
		padding-left: 0;
		background: none;
		font-size: 140%;
		text-decoration: underline;
	}

	#header .head_top .sp_language .ico {
		position: fixed;
		right: 60px;
		top: 0;
		width: 60px;
		height: 50px;
		background: url(../images/head/ico_lang.png) no-repeat 50% 5px;
		-webkit-background-size: 28px;
		background-size: 28px;
		font-size: 10px;
		line-height: 1.4;
		text-decoration: none;
		z-index: 1010;
	}
	#header .head_top .sp_language .ico:before {
		content: "";
		position: absolute;
		top: 5px;
		left: 0;
		bottom: 5px;
		border-left: 1px solid #333;
	}
	#header .head_top .sp_language .ico:after {
		content: "Language";
		position: absolute;
		bottom: 5px;
		left: 50%;
		white-space: nowrap;
		-webkit-transform: translateX(-50%) scale(0.9);
		-ms-transform: translateX(-50%) scale(0.9);
		-o-transform: translateX(-50%) scale(0.9);
		transform: translateX(-50%) scale(0.9);
	}
	#header .head_top .sp_language > div {
		position: fixed;
		top: 50px;
		right: 0;
		left: 0;
		overflow: hidden;
		height: 0;
		background-color: rgba(0,0,0,.9);
		text-align: center;
		font-size: 18px;
		pointer-events: none;
		opacity: 0;
		z-index: 2000;
	}
	#header .head_top .sp_language > div ul {
		/*position: relative;*/
		position: absolute;
		top: 50%;
		padding: 0 20px;
		width: 80%;
		/*padding: 400px 20px 0 20px;*/
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#header .head_top .sp_language > div li + li {
		margin-top: 10px;
	}
	#header .head_top .sp_language > div li a {
		display: block;
		padding: 10px;
		text-decoration: none;
		background-color: #333;
		width: 100%;
	}
	#header .head_top .sp_language .close {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 50px;
		height: 50px;
	}
	#header .head_top .sp_language .close::before,
	#header .head_top .sp_language .close::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		left: 10px;
		border-top: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#header .head_top .sp_language .close::after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	/* open */
	#header.lang_open .head_top .sp_language > div {
		pointer-events: auto;
		opacity: 1;
	}
	/* showed */
	#header.lang_showed .head_top .sp_language > div {
		height: auto;
		bottom: 0;
		-webkit-transition: opacity .3s;
		-o-transition: opacity .3s;
		transition: opacity .3s;
	}

	#header .head_top p#pankuzu {
		margin-bottom: 10px;
		text-align: left;
		font-size: 11px;
		z-index: 10;
	}
}
@media screen and (max-width: 370px) {
	#header .head_top p.tel {
		right: 105px;
		top: 10px;
	}
	#header .head_top p.tel a {
		font-size: 110%;
	}
	#header .head_top .sp_language .ico {
		right: 50px;
		width: 45px;
	}
	#header .head_top .sp_language .ico:after {
		-webkit-transform: translateX(-50%) scale(0.7);
		-ms-transform: translateX(-50%) scale(0.7);
		-o-transform: translateX(-50%) scale(0.7);
		transform: translateX(-50%) scale(0.7);
	}

}


/* social
-------------------------------------------------------------------------- */
#header .social {
	position: absolute;
	right: 0;
	top: 58px;
}
#header .social li {
	float: left;
	padding-left: 22px;
	font-size: 134%;
}
#header .social li a {
	display: block;
	height: 24px;
	padding: 8px 0 0 42px;
	background-repeat: no-repeat;
}
#header .social li.facebook a {
	background-image: url(../images/head/icon_facebook.png);
}
#header .social li.twitter a {
	background-image: url(../images/head/icon_twitter.png);
}
#header .social li.Youtube a {
	background-image: url(../images/head/icon_Youtube.png);
}

#header .social_link img {
	margin-left: 10px;
}
@media screen and (max-width: 768px) {
	#header .social_link {
		margin-top: 20px;
		text-align: center;
	}
}

/* ページコンテナ
============================================================================================================ */
#pageContainer {
	position: relative;
	width: 960px;
	margin: 0 auto;
	font-size: 109%;
	line-height: 1.8;
}
#pageContainer:after {
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; overflow: hidden;
}
#pageContainer.top_padding {
	padding-top: 470px;
}
@media screen and (max-width: 768px) {
	#pageContainer {
		width: auto;
		padding: 0 8px;
	}
	#pageContainer.top_padding {
	padding-top: 200px;
	}
}



/* コンテンツ
============================================================================================================ */
#contents {
	position: relative;
	float: right;
	width: 660px;
	background: url(../images/parts/contents_bg.png);
	padding: 30px;
}
@media screen and (max-width: 768px) {
	#contents {
		float: none;
		width: auto;
		background-color: rgba(0,0,0,0.2);
		padding: 20px 12px;
	}
}


/* サイド
============================================================================================================ */
#side {
	position: absolute;
	width: 210px;
}
#side h3 {
	margin-bottom: 15px;
	border-bottom: 2px solid #ffffff;
	font-size: 170%;
	line-height: 1.3;
}
#side > ul {
	font-size: 124%;
	line-height: 1.4;
}
#side li {
	margin-top: 0.4em;
}
#side li a {
	display: block;
	/*text-decoration: none;*/
	padding-left: 16px;
	background: url(../images/side/arrow.png) no-repeat 0 0.3em;

}
#side li a:hover {
	text-decoration: underline;
}
#side > ul ul {
	margin-left: 20px;
}
#side > ul ul a {
	font-size: 95%;
	padding-left: 16px;
	background: url(../images/side/linklink.png) no-repeat 0 0.3em;
}
@media screen and (max-width: 768px) {
	#side {
		position: static !important;
		width: auto;
		padding: 0 8px;
	}
	#side ul li{
	border: 1px solid #fff;
	padding: 10px 5%;
	}
	#side ul li.link_nonave753{
	border: none !important;
	padding-left: 3%;
	}
}


/* フッターナビ
============================================================================================================ */
#footNav {
	width: 960px;
	margin: 40px auto 10px;
	color: #cccccc;
	font-size: 109%;
}
#footNav a {
	color: #aba8a3;
	/*text-decoration: none;*/
}
#footNav a:hover {
	/*text-decoration: underline;*/
}
@media screen and (max-width: 768px) {
	#footNav {
		width: auto;
		margin: 20px 15px 10px;
		font-size: 11px;
	}
	#footNav p {
		text-align: left;
	}
	#footNav p:after {
		content: ""; display: table; clear: both;
	}
	#footNav a {
		position: relative;
		display: block;
		float: left;
		margin-bottom: 5px;
		padding: 0 10px;
	}
	#footNav a:before,
	#footNav a:after {
		content: "";
		position: absolute;
		top: 2px;
		bottom: 2px;
		border-left: 1px solid;
	}
	#footNav a:before {
		left: 0;
	}
	#footNav a:after {
		right: -1px;
	}
}

/* フッター
============================================================================================================ */
#footer {
	padding: 15px 0 20px;
	border-top: 1px solid #cccccc;
	color: #aba8a3;
}
#footer dl {
	width: 960px;
	margin: 0 auto 30px;
}
#footer dl dt {
	margin-bottom: 5px;
}
#footer address {
	padding-bottom: 3px;
	font-size: 125%;
}
#footer address a {
	color: #aba8a3;
}
#footer ul {
	margin: 0.6em 0;
	padding-bottom: 3px;
	zoom: 1;
}
#footer ul:after {
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; overflow: hidden;
}
#footer ul li {
	float: left;
	padding-right: 1em;
}/*
#footer li a {
	padding-left: 15px;
	background: url(../images/foot/link_icon.png) no-repeat left;
	color: #666666;*/
	/*text-decoration: none;
}
#footer li a:hover {
	text-decoration: underline;
}*/
@media screen and (max-width: 768px) {
	#footer {
		padding: 15px 16px 20px;
	}
	#footer dl {
		width: auto;
		margin-bottom: 15px;
	}
	#footer dt img {
		width: 120px;
	}
	#footer address {
		font-size: 100%;
	}
}
@media screen and (max-width: 370px) {
	#footer address {
		font-size: 11px;
	}
}


#footer .secondfoodnew{
	width: 965px;
	margin: 0 auto 30px;
	border-top: 1px solid #cccccc;
	padding-top: 20px;
}
#footer .secondfoodnew .granvista_logo888{
	float: left;
	width: 240px;
}
#footer .secondfoodnew .copyright00{
	float: right;
	width: 400px;
}
@media screen and (max-width: 768px) {
	#footer .secondfoodnew{
		width: auto;
		margin: 0;
	}
	#footer .secondfoodnew .granvista_logo888 {
		float: none;
		width: auto;
		margin-bottom: 10px;
	}
	#footer .secondfoodnew .copyright00 {
		float: none;
		width: auto;
		font-size: 10px;
	}
}




/* copyright
-------------------------------------------------------------------------- */
#copyright {
	width: 960px;
	margin: 0 auto;
	text-align: right;
	font-size: 109%;
}
@media screen and (max-width: 768px) {
	#copyright {
		width: auto;
		text-align: left;
		font-size: 10px;
	}
}

.pagetop{
	width: 960px;
	margin: 20px auto 10px auto;
}
@media screen and (max-width: 768px) {
	.pagetop{
		width: auto;
		margin: 20px 20px 10px;
	}
}




/* 背景
============================================================================================================ */
#bg {
	position: absolute;
	width: 100%;
	height: 1300px;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1;
}
#bg img {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
}
@media screen and (max-width: 768px) {
	#bg {
		height: 100vh;
	}
	#bg img {
		max-width: none;
		width: 120% !important;
		left: -10% !important;
	}
}