@charset "utf-8";

/* ===================================================================
 style info : サイト内共通のモジュール設定
=================================================================== */

.touchDevice p,h1,h2,h3,h4,h5{	background-image:url(bg-p.gif);}

body {	height:100%;	color: #333333;	-webkit-text-size-adjust: none;/*webkitフォントサイズ対策*/-webkit-backface-visibility: hidden;
    backface-visibility: hidden;	/*-webkit-text-stroke: 0.01em;	text-stroke: 0.01em;*/}

/* ------------------------------------------------------ *
	logo & btn
 * ------------------------------------------------------ */
[class^="logo0"]{	display:block;	background:url(../img/logo.png) 0 0 no-repeat;	text-indent:110%;	white-space:nowrap;	overflow:hidden; zoom:1;}
	.logo01{	width:160px;	height:85px;	margin:40px auto 30px;}
	#btn-menu{	display:none;}
	#btn-search{	display:none;}
	@media screen and (max-width: 1024px){
		.logo01{	width:253px;	height:40px;	margin:20px 30px;	background:url(../img/logo01-02.png)  no-repeat;	background-size:contain!important;	float:left;}
		#btn-search{	display:block;	width:40px;	height:40px;	background:url(../img/btn-search02.png) no-repeat;	background-size:contain!important;		text-indent:110%;	white-space:nowrap;	overflow:hidden;float:right;	margin:20px 0;}
		#btn-menu{	display:block;	width:40px;	height:40px;	background:url(../img/btn-menu01.png) no-repeat;	background-size:auto 100%!important;		text-indent:110%;	white-space:nowrap;	overflow:hidden;	float:right;	margin:20px 30px;}
		#btn-menu.act{	background-position:right center;}
	}

	@media screen and (max-width:768px){
		.logo01{	background:url(../img/logo01-02@2x.png) center center no-repeat;}
	}

	@media screen and (max-width:640px){
		.logo01{	margin:20px 20px;}
		#btn-menu{	margin:20px 20px;}
	}

	@media screen and (max-width:480px){
		.logo01{	margin:10px;	width:185px;	height:30px;}
		#btn-menu{	margin:10px;	width:30px;	height:30px}
		#btn-search{	margin:10px 0;	width:30px;	height:30px;}
	}

#fixed-box{	position:fixed;	left:50%;	bottom:20px;	margin-left:683px;	z-index:+100;}
	#fixed-box a{	display:block;	width:50px;	height:50px;	background:url(../img/btn-totop.png) no-repeat;	text-indent:100%;	white-space:nowrap;	overflow:hidden;	opacity:0;}
	#fixed-box.on a{	opacity:1;}

	@media screen and (max-width: 1500px){
		#fixed-box{	left:auto;	right:10px;	margin-left:0;}
	}

/* ------------------------------------------------------ *
	header 
 * ------------------------------------------------------ */
#header{	height:100%;	width:220px; background:#FFF;	border-right:solid 1px #DDD;	position:fixed;	left:0;	top:0;	z-index:+100;}
#header:after{	content:"";	display:table;	clear:both;}
#header *{	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,  "ＭＳ Ｐゴシック", sans-serif!important;}

/*.touchDevice #header{	position:absolute;	height:auto;}*/

.search-header{	width:160px;	margin:40px auto 15px;}
	.search-header input{	height:30px!important;	line-height:30px!important;	border:solid 1px #DDD;	font-size:100%;	padding:0!important;	margin:0!important;	border-radius:0!important;	background-color:#FFF!important;	-webkit-box-sizing:content-box!important;	box-sizing:content-box!important;	-webkit-appearance:none;	appearance:none;}
	.search-header .search-txt{	width:109px;		padding:0 9px!important;	float:left;}
	.search-header .search-submit{	width:28px;	float:right;	background:url(../img/btn-header-search.png) 0 0 no-repeat;}
.search-header02{	display:none;}

	@media screen and (max-width: 1365px) {
		#header{	width:0px;}
	}
	@media screen and (max-width: 1024px){
			#header{	width:100%;	height:auto;	position:relative;	margin:0 auto;	border-right:none;}
		.search-header{	display:none;}
		.search-header02{	width:100%;	background:rgba(0,0,0,.8);	position:absolute;	left:0;	top:80px;	text-align:center;}
		.search-header02.act{	display:block;}
		.search-header02 > div{	padding:20px;	margin:0 auto;}
			.search-header02 input{	height:30px!important;	line-height:30px!important;	font-size:100%;	padding:0!important;	margin:0!important;	border-radius:0!important;	background-color:#FFF!important;	-webkit-box-sizing:content-box!important;	box-sizing:content-box!important;	-webkit-appearance:none;	appearance:none;}
			.search-header02 .search-txt{	width:269px;	border:solid 1px #FFF;	padding:0 9px!important;}
			.search-header02 .search-submit{	width:28px;	border:solid 1px #FFF;	background:url(../img/btn-header-search.png) center center no-repeat;}
		
			#header{	width:100%;	position:relative;	margin:0 auto;	box-shadow:none;}
	}

	@media screen and (max-width: 480px){
		.search-header02{	top:50px;}
		.search-header02 > div{	padding:10px;	margin:0 auto;}
			.search-header02 .search-txt{	width:80%;}
			.search-header02 .search-submit{	width:10%;}
		
	}

/* ------------------------------------------------------ *
	nav
 * ------------------------------------------------------ */
 
 @media screen and (min-width: 1025px) {
.global-nav{	display:block; clear:both;	padding:0;}
	.global-nav > ul{	display:block;	list-style:none;}
	.global-nav li{	display:block;	list-style:none;}
	.global-nav .nav01 li{	height:38px;	line-height:38px;	border-top:solid 1px #DDD;	border-bottom:solid 1px #DDD;}
	.global-nav .nav01 li+li{	border-top:none;}
	.global-nav .nav02{	margin-top:40px;}
	.global-nav .nav02 li{	height:25px;	line-height:25px;}
	.global-nav a{	display:block;	padding:0 0 0 30px;		font-size:108%;	height:inherit;	line-height:inherit;	color:#444444;	letter-spacing:0.1em;	white-space:nowrap;}
	.global-nav .nav02  a{	font-size:100%;}
	[class^="below"]{	position:fixed;	top:0;	left:0;	height:100%;	background:#444444;	padding-top:155px;	-webkit-transition:all linear 0.3s;	transition:all linear 0.3s;	display:none;	box-shadow:inset 3px 0 3px rgba(0,0,0,.1);	min-width:190px;}
	[class^="below"] li{	display:block;	list-style:none;		border-color:#444!important;}
	.below01:hover,
	li:hover > .below01{	left:220px;	display:block;}
	li:hover > .below01 a{	color:#FFF;}
	.below02:hover,
	li:hover > .below02{	left:440px;	display:block;	background:#0B2E42;}
	[class^="below"] a{	padding:0 30px;}
	.below span{		display:block;	padding:0 0 0 30px;		font-size:108%;	height:40px;	line-height:40px;	color:#FFF;	letter-spacing:0.1em;}
	
	.philosophy .global-nav > ul > .n02,
	.business .global-nav > ul > .n03,
	.story .global-nav > ul > .n04,
	.lineup .global-nav > ul > .n05,
	.production-areas .global-nav > ul > .n06,
	.company .global-nav > ul > .n08,
	.global-nav li:hover{	background:#F0F0E1;	color:#215732;}
	.global-nav li:hover > a,
	.global-nav .below01 a:hover{	background:#76B547;	color:#FFF;}
	
	.btn-below{	position:relative;}
	[class^="nav-switch-line"]{	display:block;	height:2px;	width:10px;	background:#FFF;	position:absolute;	right:13px;	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;}
		.nav-switch-line01{	top:15px;}
		.nav-switch-line02{	top:20px;}
		.nav-switch-line03{	top:25px;}
		li:hover > .btn-below .nav-switch-line01{	-moz-transform: rotate(40deg) translate(4px,0px);	-webkit-transform: rotate(40deg) translate(4px,0px);	-o-transform: rotate(40deg) translate(4px,0px);	-ms-transform: rotate(40deg) translate(4px,0px);	transform: rotate(40deg) translate(4px,0px);}
		li:hover > .btn-below .nav-switch-line02{	opacity:0;}
		li:hover > .btn-below .nav-switch-line03{	-moz-transform: rotate(-40deg) translate(3px,1px);	-webkit-transform: rotate(-40deg) translate(3px,1px);	-o-transform: rotate(-40deg) translate(3px,1px);	-ms-transform: rotate(-40deg) translate(3px,1px);	transform: rotate(-40deg) translate(3px,1px);}
		
.touchDevice [class^="below"]{	position:absolute;	height:100%;}
	.touchDevice .below02:hover,
	.touchDevice li:hover > .below02{	left:100%;}
 }
 @media screen and (max-width: 1365px) {
	.global-nav a{	padding:0 20px;}
	li:hover > .below01{	left:0px;}
	.below02:hover,
	li:hover > .below02{	left:0px;}
 }
 
 @media screen and (max-width: 1024px) {
	.global-nav{
	height: auto;
	overflow: hidden;
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	background: rgba(0,0,0,.8);
	position: absolute;
	left: 0;
	top: 83px;
	z-index: +100;
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1,0);
	-webkit-transition: transform linear .3s,opacity linear .3s;
	transform-origin: 0 0;
	transform: scale(1,0);
	transition: transform linear .3s,opacity linear .3s;
	opacity: 0;
}
	.lt-ie8 .global-nav{	height:0;}
		.lt-ie8 .global-nav.act{	height:auto;}
		.global-nav.act{	padding:30px 0;	-webkit-transform:scale(1,1);	transform:scale(1,1);	opacity:1;}
		.global-nav ul{	width:300px;	margin:0 auto;}
		.global-nav li{	display:block;	list-style:none;	text-align:center;}
		.global-nav a{	display:block;	color:#FFF;	padding:0;}
		.global-nav .nav01{	border-top:solid 1px #CCC;	border-bottom:solid 1px #CCC;}
		.global-nav .nav01 a{	line-height:46px;	height:46px;	font-size:108%;}
		.global-nav .nav01 > li+li{	border-top:solid 1px #CCCCCC;}
		.global-nav .nav02{	margin-top:20px;}
		.global-nav .nav02 a{	line-height:35px;	height:35px;	font-size:100%;}
		[class^="below"]{	display:none;}
}

 @media screen and (max-width: 480px) {
	.global-nav{	top:50px;}
}

/* ------------------------------------------------------ *
	contents
 * ------------------------------------------------------ */
#container{	margin-left:0px;	overflow:hidden;	background:#FFF;	position:relative;	z-index:+10;}
#contents{ display:block;	margin:0 auto; clear:both;}

article{	position:relative;	overflow:hidden;	padding-bottom:100px;}
	article > section{	padding:50px 0;}
#main{ display:block;	width:730px;	float:right;}
	#main section + section{	margin-top:60px;}
#side{ display:block;	width:200px;	float:left;}
	#side > * + *{	margin-top:30px;}
	#side .bnr01 li{	display:block;	list-style:none;}
	#side .bnr01 li + li{	margin-top:10px;}
.root #bnr-box,
.lineup #bnr-box{	position:relative;	display:block;	border-top:solid 1px #DDDDDD;	padding:10px 0;	background:#FBFBFB;	font-size:108%;	color:#444444;}
	[class^="bnr"] {	padding:20px 0;	border-bottom:solid 1px #DDDDDD;	letter-spacing:-.4em;}
	[class^="bnr02"] {	border-bottom:none;}
	[class^="bnr"] > li{	display:inline-block;	list-style:none;	width:23.4375%;	-webkit-box-sizing:border-box;	box-sizing:border-box;	letter-spacing:normal;	vertical-align:middle;	line-height:1.5em;}
	[class^="bnr"] > li + li{	margin-left:2.08333%;}
	[class^="bnr"] img{	width:100%;}
	
 @media screen and (max-width: 1365px) {
	#container{	margin-left:0px;}
 }
 @media screen and (max-width: 1024px) {
	#container{	margin-left:0;}
 }
 @media screen and (max-width: 768px) {
 }
 @media screen and (max-width: 640px) {
	article{	padding-bottom:30px;}
	article > section{	padding:25px 0;}
	#bnr-box{	text-align:center;	padding:0;}
	[class^="bnr"]{	width:100%!important;}
	[class^="bnr"] li{	width:45.3125%!important;	margin:1.171875%!important;	text-align:left;	font-size:93%;}
 }

/* ------------------------------------------------------ *
	pager
 * ------------------------------------------------------ */
#breadcrumbs{	background:#38291E;	color:#FFF;	 padding:8px 30px;}
	#breadcrumbs ul{	margin:0 auto;}
	#breadcrumbs li{	display:block;	list-style:none;	float:left;	font-size:100%;}
	#breadcrumbs li+li:before{	content:url(../img/icon-arrow04.png);	vertical-align:top;	margin:0 1em;}
	#breadcrumbs a{	color:inherit;	text-decoration:underline;}
	
 @media screen and (max-width: 480px) {
	#breadcrumbs{	padding:8px 10px;}
		#breadcrumbs li{	font-size:85%;	display:inline-block;}
		#breadcrumbs li+li:before{	content:'>';	margin:0 .2em;}
 }


/* ------------------------------------------------------ *
	footer
 * ------------------------------------------------------ */
#footer{ display:block;	clear:both;	padding-left:220px;		background:#FBFBFB;	background:#38291E;	position:relative;	color:#333333;	color:#FFF; z-index:+10;	border-top:solid 1px #DDD;}
#footer .ul-col4{	padding:20px 0;	border-bottom:solid 1px #DDD;}
#footer .footer-nav{	font-size:108%;	line-height:2em;	font-weight:bold;}
#footer .footer-nav a{	color:#525252;	color:#FFF;}
#footer .footer-below{	line-height:1.8em;	font-weight:normal;}

#footer .inner01 > div ul{ display:block;	float:left;}
	#footer .inner01 > div{	height:72px;	line-height:72px;}
		#footer .inner01 > div li{	display:inline;}
		#footer .inner01 > div li+li:before{	content:"　|　";	vertical-align:middle;}
		#footer .inner01 > div a{	 color:inherit;}

#copyright{	display:block;	font-size:93%; color:inherit;	float:left;	margin-right:55px;}
 @media screen and (max-width: 1024px) {
	#footer{ padding-left:0;	margin:0 auto;}
 }
 @media screen and (max-width: 768px) {
	#footer .inner01 > div *{	float:none!important;	margin:0 auto;	text-align:center!important;}
	#footer .inner01 > div li{	display:block;	line-height:20px!important;	margin:30px auto 0!important;}
	#footer .inner01 > div li+li:before{	content:"";}
	#footer .inner01 > div li+li{	margin:10px auto 0!important;}
	#footer .inner01 > div{	height:auto;	line-height:20px!important;}
	#copyright{	margin:30px auto 0!important;	padding-bottom:5px;}
 }
 

/* ------------------------------------------------------ *
	loader
 * ------------------------------------------------------ */
#loader{	width:0!important;	height:0!important;	display:none!important;}
 /*
#loader{	position:fixed;	left:0;	top:0;	width:100%;	height:100%;	background:#76B547;	z-index:+200;	display:none!important;}
.spinner,
.spinner2 {
  margin:-81px 0 0 -81px;
  width: 162px;
  height:162px;
  position:absolute;
  top:50%;
  left:50%;
}
.spinner2 {	position:fixed;	background:url(../img/loader.png) 0 -648px no-repeat;	display:none;}
.spinner2.on {	display:block;}

.spinner .spinner-container {
	background:url(../img/loader.png) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.container1 {	background-position:0 0!important;}
.container2 {	background-position:0 -162px!important;	-webkit-animation: bouncedelay 4s linear infinite;	animation: bouncedelay linear 4s infinite;}
.container3 {	background-position:0 -324px!important;	-webkit-animation: bouncedelay2 2s linear infinite;	animation: bouncedelay2 linear 2s infinite;}
.container4 {	background-position:0 -486px!important;}


@-webkit-keyframes bouncedelay {
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@keyframes bouncedelay {
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@-webkit-keyframes bouncedelay2 {
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); transform: rotate(-360deg);}
}

@keyframes bouncedelay2 {
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); transform: rotate(-360deg);}
}
*/