@charset "utf-8";
/* ===================================================================
 style info : サイト内共通のモジュール設定
=================================================================== */

p,h1,h2,h3,h4,h5{	background-image:url(bg-p.gif);}
h1{	display:block;}
p{	text-indent: 0;	color: #222222;	line-height:1.8em;	font-size:108%;}
p + p{	margin-top:2em;}

body {	height:100%; color: #222222;	background:#FFF;	/*-webkit-text-stroke:.1px;	text-stroke:.1px;*/	-webkit-text-size-adjust: none;/*webkitフォントサイズ対策*/	/*-webkit-backface-visibility:hidden;	backface-visibility:hidden;*/}
body > header,
body > div,
body > main,
body > aside,
body > footer{	min-width:1020px;}
	@media screen and (max-width:640px){
		body > *{	min-width:320px;	/*font-size:0.9em;*/}
		body > header,
		body > div,
		body > main,
		body > aside,
		body > footer{	min-width:320px;}
		p{	font-size:93%;}
	}
/* ------------------------------------------------------ *
	logo & btn
 * ------------------------------------------------------ */
	

#nav-switch{	display:none;} 
@media screen and (max-width:640px){
	#nav-switch{	display:block;	height:40px!important;	width:50px!important;	float:right;	position:relative;	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;}
		[class^="nav-switch-line"]{	display:block;	height:5px;	width:30px;	background:#F1C940;	position:absolute;	left:7px;	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;	border-radius:3px;}
		.nav-switch-line01{	top:9px; }
		.nav-switch-line02{	top:18px;}
		.nav-switch-line03{	top:27px;}
		.act .nav-switch-line01{	-ms-transform: rotate(45deg) translate(5px,7px);	-webkit-transform: rotate(40deg) translate(6px,8px);	transform: rotate(40deg) translate(5px,7px);}
		.act .nav-switch-line02{	opacity:0;}
		.act .nav-switch-line03{	-ms-transform: rotate(-45deg) translate(6px,-8px);	-webkit-transform: rotate(-40deg) translate(5px,-7px);	transform: rotate(-40deg) translate(6px,-8px);}
}

/* ------------------------------------------------------ *
	header 
 * ------------------------------------------------------ */
#header{	display:block;	width:100%;	padding:20px 0;	margin:0 auto;	background:#C30E22;	z-index:+100;	position:relative;}
.logo01{	width:110px;	height:49px;	padding:20px 0 0 154px;	background:url(../img/logo01.png) no-repeat;	float:left; font-size:100%;	color:#FFF;	font-weight:bold;}
#header > div{	max-width:1000px;	margin:0 auto;}
	@media screen and (max-width:640px){
		#header{	min-width:100%;	height:55px;	margin:0 auto;	padding:0 0;	position:fixed;	top:0;	left:0;	z-index:+99;}
		#header.act{	height:100%;	box-sizing:border-box;}
		#header h1{	float:none;	margin:8px 10px;}
		.nav-base{	height:0!important;}
		.logo01{	width:200px;	height:40px;	padding:7px 0 0 92px;	background-size:contain;	font-size:93%;}
	}
	
/* ------------------------------------------------------ *
	nav
 * ------------------------------------------------------ */
@media screen and (min-width:641px){
	.global-nav{	display:block;	margin:0 auto;		overflow:visible;	float:right;	text-align:right; vertical-align:top;}
	.global-nav > *{	display:inline-block; vertical-align:top;}
		.global-nav a{	color:#FFF;	font-weight:bold;}
		.nav01{	display:inline-block;	padding:0 0;	height:inherit;		margin:0 0 0 auto;	text-align:center;	letter-spacing:-.4em;}
		.nav01 > li{		display:inline-block;	height:inherit;	letter-spacing:normal;	margin:0; vertical-align:top;	padding:0 20px 0 0;}
		.nav01 > li > a{	display:block;	height:69px;	line-height:69px;	font-size:108%;	text-align:center;	white-space:nowrap;	position:relative;	overflow:hidden;}
		.nav01 > li > a::after{	content:"";	display:block; background:#F1C940;	height:3px;	width:100%;	position:absolute;	left:0;	bottom:15px;	-ms-transition:all .2s linear;	-webkit-transition:all .2s linear;	transition:all .2s linear;	-ms-transform:scale(0,1);	-webkit-transform:scale(0,1);	transform:scale(0,1);}
		.nav02{	margin:0 0 0 10px;}
		.nav02 li{	display:block;	list-style:none;	font-size:93%;	margin:7px 0 0;	text-align:left;	position:relative;	padding-left:10px;}
		.nav02 li:before{	content:"";	display:block;	width:6px;	height:6px;	position:absolute;	left:0;	top:50%;	border-radius:50%;	background:#FFF;	margin:-3px 0 0;}
		
		.recipe .nav01 .n01 > a::after,
		.about .nav01 .n02 > a::after,
		.business .nav01 .n03 > a::after,
		.people .nav01 .n04 > a::after,
		.training .nav01 .n05 > a::after,
		.data .nav01 .n06 > a::after,
		.nav01 > a:hover::after,
		.nav01 li.act > a::after{	-ms-transform:scale(1,1);	-webkit-transform:scale(1,1);	transform:scale(1,1); }
		.recipe .nav01 .n01 > a,
		.about .nav01 .n02 > a,
		.business .nav01 .n03 > a,
		.people .nav01 .n04 > a,
		.training .nav01 .n05 > a,
		.data .nav01 .n06 > a,
		.nav01 > li > a:hover,
		.nav02 a:hover{	color:#F1C940;}

		.below{		width:100%;	position:absolute;	top:87px;	left:0;	padding-top:22px; z-index:+1;	-ms-transform:scale(1,0);	-webkit-transform:scale(1,0);	transform:scale(1,0);	-ms-transition:transform .2s linear;	-webkit-transition:transform .2s linear;	transition:transform .2s linear;	-ms-transform-origin:center 22px;	-webkit-transform-origin:center 22px;	transform-origin:center 22px;} 
			.below > *{		position:relative;	padding:30px 0;	background:rgb(255,255,255);	background:rgba(255,255,255,.8);	text-align:center;} 
				.below > *::before{	content:"";	display:block;	width:0;	height:0;	border:solid 10px transparent;	border-top:solid 10px rgb(195,14,34);	position:absolute;	top:0;	left:50%;	margin:0 0 0 -10px;} 
			.below a{	display:table;	width:100%;	height:90px;	color:#202020;	vertical-align:middle;} 
			.below a > *{	display:table-cell;	vertical-align:middle;	text-align:left;}
			.below a .imgbox01{	width:90px;}
			.below a .textbox01{	padding-left:20px;	font-size:123.1%;	line-height:1em;}
				.below a .textbox01 span{	display:block;	position:relative;	margin-bottom:20px;	font-size:.75em;}
				.below a .textbox01 span::after{	content:"";	height:1px;	width:156px;	position:absolute;	left:0;	bottom:-10px;	background:#C30E22;}
			.below .textbox02{	font-size:14px;	font-weight:bold;	text-align:center;	line-height:1.8em;}
				.below .textbox02 span{	display:block;	font-size:1.7em;	font-weight:400;	position:relative;	font-style:italic;	color:#C30E22;}

		.act .below{	-ms-transform:scale(1,1);	-webkit-transform:scale(1,1);	transform:scale(1,1);}
		.lt-ie8 .below{	display:none;}
		.lt-ie8 .act .below{	display:block;}
		 
}
@media screen and (max-width:640px){
.global-nav{	display:block;	padding:10%;	width:100%;	height:-webkit-calc(100% - 55px);	height:calc(100% - 55px);/**/	margin:55px auto 0;	background:#000;	-webkit-box-sizing:border-box;	box-sizing:border-box;	position:absolute;	top:0;	left:0;	overflow:auto; -webkit-overflow-scrolling: touch;	-webkit-transform-origin:right top;	transform-origin:right top;	-webkit-transform:scaleY(0);	transform:scaleY(0);	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;}
.global-nav.act{	-ms-transform:scaleY(1);	-webkit-transform:scaleY(1);	transform:scaleY(1);	z-index:+10;}
	.global-nav > ul > li{	display:block;	list-style:none;	margin:15px auto;}
	.global-nav > ul > li > a{	display:block;	font-size:116%;	font-weight:bold;	height:inherit;	border:solid 1px #FFF;	line-height:40px;	color:#FFF!important;	text-align:center;}
	
	.sp-lang{	text-align:center;	margin-top:3%;}
	.sp-lang > li{	display:inline-block!important;	list-style:none;	margin:0!important;	width:31%; vertical-align:top;}
	.sp-lang > li + li{	margin:0 0 0 2%!important;}

	.global-nav .below{	display:block; text-align:left;	letter-spacing:-.4em;	margin-top:3%;}
	.global-nav .below li{	display:inline-block;	width:48%;	margin:1%;	text-align:center;	letter-spacing:normal;	line-height:30px;}
	.global-nav .below a{	display:block;	position:relative;	color:#FFF;}
	.global-nav .below a img{	width:100%;}
	.global-nav .below a div + div{	width:94%;	height:94%;	padding:40% 3% 0;	background:rgba(255,255,255,.8);	position:absolute;	top:3%;	left:3%;}
}

/* ------------------------------------------------------ *
	contents
 * ------------------------------------------------------ */
#main{ display:block;	margin:0 auto;	position:relative;	background:#FFF;	overflow:hidden;	padding-bottom:150px;}
	#main:after{	content:"";	display:table;	clear:both;}
	#main.fadeOut{	-webkit-animation: fadeOut .3s linear both;	animation: fadeOut .3s linear both;}
	#main.fadeIn{	-webkit-animation: fadeIn .5s linear both;	animation: fadeIn .5s linear both;}
	@-webkit-keyframes fadeOut { to { opacity: 0; }}
	@keyframes fadeOut { to { opacity: 0;  }}
	@-webkit-keyframes fadeIn { from { opacity: 0;  }}
	@keyframes fadeIn { from { opacity: 0; }}
	/*@-webkit-keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1.2); }}
	@keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }}
	@-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(.8); }}
	@keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }}*/
	
.inner01{	max-width:1000px;	margin:0 auto;}
.inner02{	max-width:640px;	margin:0 auto;}
article,
section{	display:block;}
article:after{	content:"";	display:table;	clear:both;}
article > section + section,
article > section + .inner01{	margin-top:60px;}

#totop{	position:absolute; right:20px;	bottom:135px;}
#totop a{	display:block;	width:97px;	height:97px;	overflow:hidden;	white-space:nowrap;	text-indent:105%;	background:url(../img/btn-totop.png) no-repeat;	background-size:contain;	opacity:0;		transition:all .2s linear;}
#totop a.on{	opacity:1;}
#totop a.posFix{	position:fixed; right:20px;	bottom:50px;}

#bottombox{	background:url(../img/bg-index05.png) center top no-repeat;		margin:-95px auto 0;	padding:180px 0 100px;	position:relative;	z-index:+20;}
	#bottombox p{	font-size:123.1%;	font-weight:bold;	text-align:center;	margin:0 auto 30px;}
	
	@media screen and (min-width: 1900px){
		#bottombox {	margin:-5% auto 0;	padding:10% 0 6%;	background-size:100%;}
	}

	@media screen and (max-width:640px){
		#main{	padding:55px 0 80px;}
		.inner01,
		.inner02{	padding:0 3%;}
		#bottombox{	margin:-7% auto 0;	padding:55px 0 40px;	background-size:460px;}
		#bottombox p{	font-size:100%;	margin:0 auto 20px;}
	}
/* ------------------------------------------------------ *
	footer
 * ------------------------------------------------------ */
#footer{	display:block;	clear:both;	background:url(../img/bg-footer.png) center bottom no-repeat #222222;	text-align:center;	padding:80px 0 190px;	position:relative;	z-index:+10;}
.footer-logo{	display:block;	background:url(../img/logo02.png) center 0 no-repeat;	width:132px;	padding:120px 0 0; clear:both;	margin:0 auto;	font-size:16px;	color:#FFF;	font-weight:bold;}
.footer-logo::after{	content:"";	display:inline-block;width:7px;	height:7px;	border-top:solid 2px #FFF;	border-right:solid 2px #FFF;	-ms-transform:rotate(45deg);	-webkit-transform:rotate(45deg);	transform:rotate(45deg);	margin:0 0 0 1em;	position:relative;	top:-2px;}
.footer-nav{	display:block;	letter-spacing:-.4em;	line-height:-.4em;	margin:0 auto 40px;}
	.footer-nav li{	display:inline-block;	width:488px;	letter-spacing:normal;	line-height:normal; vertical-align:top;}
	.footer-nav li + li{	margin-left:24px;}
	.footer-nav a{	display:block;	color:#FFF;	background:#006699;	padding:0 20px;}
#copyright{	display:block;	margin:40px auto 0;	font-size:100%;	color:#FFF;}

	@media screen and (min-width:1900px){
		#footer{		background-size:100%;	padding:80px 0 10%;}
	}

	@media screen and (max-width:640px){
		#footer{	min-width:300px;	background-image:url(../img/bg-footer@2x.png);	background-size:460px;		padding:40px 10px 110px;	text-align:center;}
		#footer *{	max-width:100%;}
		.footer-logo{	width:132px;	background-size:84px;	padding:80px 0 0;	font-size:14px;}
		.footer-logo::after{	top:0px;	margin:0 0 0 .5em;}
		.footer-nav{	display:block;	letter-spacing:-.4em;	line-height:-.4em;	margin:0 auto 30px;}
		.footer-nav > li{	display:block;	width:100%;}
		.footer-nav > li + li{	margin:10px 0!important;}
		.footer-nav a{	text-align:left;}
			.footer-nav a::after{	content:"";	display:inline-block;width:7px;	height:7px;	border-top:solid 2px #FFF;	border-right:solid 2px #FFF;	-ms-transform:rotate(45deg);	-webkit-transform:rotate(45deg);	transform:rotate(45deg);	position:absolute;	right:20px;	top:50%;	margin-top:-4px;}
		#copyright{	margin:20px auto 0;	font-size:77%;}
	}