﻿/*====================================================================================================
	ABOUT
====================================================================================================*/
#about{ width: 100%;}

/* PREFACE */
#about .preface{
	position: relative;
	margin-bottom: 80px;
	padding-top: 325px;
	background: url(../../image/about/001.png) no-repeat top center;
	text-align: center;
}
#about .preface:before,
#about .preface:after{ position: absolute; display: block; content: '';}
#about .preface:before{ width: 240px; height: 176px; background: url(../image/abs01.png) no-repeat; bottom:230px;}
#about .preface:after{ width: 158px; height: 163px; background: url(../image/abs02.png) no-repeat; right: -10px; bottom:-60px;}
#about .preface .title{ margin: 60px 0 30px; font-size: 30px; font-weight: bold;}

/* HISTORY*/
#about .history .photo-box{ margin: 0; padding: 0;}
#about .history .g2 ul:nth-child(1){ margin-left: 0;}
#about .history .g2 ul:nth-child(2){ margin-right: 0;}
#about .history .g2 ul li:nth-child(1){ 
	margin-bottom: 15px;
	padding-top: 18px;
	height: 65px;
	color: #FFF;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	background: url(../image/ab_title.png) no-repeat;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	box-sizing: border-box;
}

/* DELICIOUS */
#about .delicious{
	margin-top: 75px; 
	padding: 50px 0;
	width: 100%;
	background: url(../image/about_bk.png) no-repeat;
	background-size: cover;
}
#about .delicious .m_title{
	margin: 0 auto 20px;
	width: 960px;
	height: 77px;
	background: url(../image/ab_title2.png) no-repeat center center;
	background-size: cover;
	text-indent: -9999px;
}
#about .delicious .mikiwame01,
#about .delicious .mikiwame02{ margin: 0 auto; width: 960px;}
#about .delicious .mikiwame01{ position: relative;}
#about .delicious .mikiwame01:before{
	position: absolute;
	display: block;
	content: '';
	width: 423px;
	height: 400px;
	background: url(../../image/about/002.png) no-repeat;
	right: 0;
	bottom: 0;
}
#about .delicious .mikiwame01 ul{ margin-bottom: 10px; width: 60%;}
#about .delicious .mikiwame01 ul:after { /* float clear*/ display:block; clear:both; content:"";}
#about .delicious .mikiwame01 ul li{ float: left; box-sizing: border-box;}
#about .delicious .mikiwame01 ul li:nth-child(1){
	float: left;
	margin-right: 2%;
	padding-top: 17px;
	width: 8%;
	height: 53px;
	color: #FFF;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	background: url(../image/ab_icon.png) no-repeat center center;
	background-size: cover;
}
#about .delicious .mikiwame01 ul li:nth-child(2){
	float: left;
	padding-top: 10px; 
	width: 90%;
}
#about .delicious .mikiwame01 ul:nth-child(4) li:nth-child(2) { position: relative; padding-right:150px;}
#about .delicious .ubuge { position: absolute; left:370px; bottom:0;}
#about .delicious .mikiwame02{ position: relative; margin-top: 60px; padding: 15px; background: #FFF;}
#about .delicious .mikiwame02:before{
	position: absolute;
	content: '';
	width: 187px;
	height: 155px;
	background: url(../../image/about/005.png) no-repeat;
	right: -20px;
	top:-60px;
	z-index: 9999;
}
#about .delicious .mikiwame02:after { /* float clear*/ display:block; clear:both; content:"";}
#about .delicious .mikiwame02 .photo{ float: left; margin-right: 25px;}
#about .delicious .mikiwame02 .eat{ float: left; width: 50%;}
#about .delicious .mikiwame02 .eat .title{
	margin: 15px 0;
	padding-top: 50px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #1E8039;
	background: url(../image/ab_icon2.png) no-repeat top center!important;
}
#about .delicious .mikiwame02 .eat .sb{
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 25px;
}


/*====================================================================================================
	SECRET
====================================================================================================*/
#secret{ margin: 95px 0 0; width: 100%;}

/* MAINCOME */
#secret #sec_about{}
#secret #sec_about .box{ margin: 0 auto; width: 960px;}
#secret #sec_about .box:after { /* float clear*/ display:block; clear:both; content:"";}
#secret #sec_about .box .photo{ float: right; margin-left: 50px;}
#secret #sec_about .box .text{}
#secret #sec_about .box .text p{}
#secret #sec_about .box .text p:nth-child(1){ margin-bottom: 20px; font-size: 30px; font-weight: bold; line-height: 40px;}
#secret #sec_about .box .text p:nth-child(2){}			

/* SAIBAI TITLE */
#secret #sec_about .saibai{
	margin: 60px 0;
	padding: 70px 0;
	width: 100%;
	min-height: 289px;
	color: #FFF;
	background: url(../../image/secret/back.jpg) no-repeat right top;
	background-size: cover;
	box-sizing: border-box;
}
#secret #sec_about .saibai p{ margin: 0 auto; width: 960px;}
#secret #sec_about .saibai p:nth-child(1){ margin-bottom: 10px; font-size: 30px; font-weight: bold; line-height: 40px;}

/* SAIBAI LIST */
#secret .saibai_list h4{
	padding: 30px 0;
	font-size: 30px;
	color: #000;
	background: url(../../image/grow/bo.png) no-repeat bottom center;
	text-align: center;
	line-height: 40px;
}
#secret .saibai_list .box1 h4 b{
	display: inline-block;
	color: #D63030;
	width: 101px;
	background: url(../image/se_bk.png) no-repeat;
	font-size: 15px;
	line-height: 20px;
}
#secret .saibai_list .box1 h4 span{ display: block; }
#secret .saibai_list .box1 .come{ display: inline-table; padding: 20px 50px 0; width: 490px;}
#secret .saibai_list .box1 .come div{}
#secret .saibai_list .come ul{ margin: 20px 0 30px;}
#secret .saibai_list .come ul:after { /* float clear*/ display:block; clear:both; content:"";}
#secret .saibai_list .come ul li{ float: left;}
#secret .saibai_list .come ul li:nth-child(1){ margin-right: 15px;}


/*====================================================================================================
	GROW
====================================================================================================*/
#grow{ margin: 0 0 95px; width: 100%;}

/* MAINCOME */
#grow .maincome { text-align: center;}
#grow .maincome .catch { margin:0; font-size: 30px;}
#grow .maincome .come {}

/* TOMATO TITLE */
#grow .tomato_mid { position: relative; height:100px; z-index: 999;}
#grow .tomato_mid:after { /* float clear*/ display:block; clear:both; content:"";}
#grow .tomato_mid p { position: relative;}
#grow .tomato_mid p:nth-child(1) { float: left; left: -25px;}
#grow .tomato_mid p:nth-child(2) { float: right; right: -25px;}

/* GROW FLOW */
#grow .grow_flow { position: relative; margin: auto; width:750px;}
#grow .grow_flow:after,
#grow .grow_flow:before {
	display:block;
	clear:both;
	content:"";
	position: absolute;
	top: 0;
	width:5px;
	height:90%;
}
#grow .grow_flow:after { left:-50px; background: url(../../image/grow/flow_line.png) repeat-y left top;}
#grow .grow_flow:before { right:-50px; background: url(../../image/grow/flow_line.png) repeat-y right top;}
#grow .grow_flow .box { position: relative; padding:45px;}
#grow .grow_flow .box+.box { border-top:1px solid #DDD;}
#grow .grow_flow .box:nth-child(1) { padding-top:0;}
#grow .grow_flow .box:after { /* float clear*/ display:block; clear:both; content:"";}
#grow .grow_flow .box:nth-child(odd) .photo { float: left; margin-right: 30px;}
#grow .grow_flow .box:nth-child(even) .photo { float: right; margin-left: 30px;}
#grow .grow_flow .box h3 { text-align: center;}
#grow .grow_flow .box h3 small { position:relative;}
#grow .grow_flow .box h3 small:after,
#grow .grow_flow .box h3 small:before {
	display:block;
	clear:both;
	content:"";
	position: absolute;
	top: 0;
	width: 22px;
	height: 22px;
}
#grow .grow_flow .box h3 small:after { left: -30px; background: url(../../image/grow/step_tit.png) no-repeat left center;}
#grow .grow_flow .box h3 small:before { right: -25px; background: url(../../image/grow/step_tit.png) no-repeat right center;}
#grow .grow_flow .box h3 b { display: block; font-size:27px; margin-top: 10px; color: #222;}
#grow .grow_flow .box .detail {}
#grow .grow_flow .box .come { margin-bottom: 20px;}
#grow .grow_flow .box ul {}
#grow .grow_flow .box ul:after { /* float clear*/ display:block; clear:both; content:"";}
#grow .grow_flow .box ul li:nth-child(1) { float: left;}
#grow .grow_flow .box ul li:nth-child(2) { float: right;}
#grow .grow_flow .box .time{}
#grow .grow_flow .box .time p {
	padding:38px 0;
	width: 100px;
	height: 100px;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	position: absolute;
	z-index: 9999;
	border-radius:50px; /* CSS3 */
	-webkit-border-radius:50px; /* Safari,Google Chrome */
	-moz-border-radius:50px;/* Firefox */
}
#grow .grow_flow .box .time p:nth-child(1) { background: #D63030; left: -100px;}
#grow .grow_flow .box .time p:nth-child(2) { background: #FF9D00; right: -100px;}
#grow .grow_flow .step1 .time p:nth-child(1) { top:25%;}
#grow .grow_flow .step1 .time p:nth-child(2) { top:45%;}
#grow .grow_flow .step2 .time p:nth-child(1) { top:45%;}
#grow .grow_flow .step2 .time p:nth-child(2) { top:45%;}
#grow .grow_flow .step3 .time p:nth-child(1) { top:45%;}
#grow .grow_flow .step3 .time p:nth-child(2) { top:45%;}
#grow .grow_flow .step4 .time p:nth-child(1) { top:45%;}
#grow .grow_flow .step4 .time p:nth-child(2) { top:25%;}
#grow .grow_flow .step5 .time p:nth-child(1) { top:45%;}
#grow .grow_flow .step5 .time p:nth-child(2) { top:45%;}
#grow .grow_flow .step5 .come { margin:0 auto 50px; width: 50%;}

/* ORNAMENT */
#grow .grow_flow .step2:before,
#grow .grow_flow .step3:before,
#grow .grow_flow .step5:before{
	display:block;
	clear:both;
	content:"";
	position: absolute;
}
#grow .grow_flow .step2:before{
	top:-30px;
	left:50px;
	width:116px;
	height:114px;
	background: url(../image/abs03.png) no-repeat;
}
#grow .grow_flow .step3:before{
	top:20px;
	right:0;
	width:104px;
	height:105px;
	background: url(../image/abs06.png) no-repeat;
}
#grow .grow_flow .step5:before{
	top:-30px;
	left:0;
	width:100%;
	height:100px;
	background: url(../image/abs07.png) no-repeat center center;
}


/*====================================================================================================
	SURENESS
====================================================================================================*/
#sureness { margin: 0 0 95px; width: 100%;}

/* MAINCOME */
#sureness .maincome { margin-bottom: 50px; text-align: center;}
#sureness .maincome .catch { margin:0; font-size: 30px;}
#sureness .maincome .come {}

/* FLOW */
#sureness .flow {}
#sureness .flow .box {
	position: relative;
	margin: auto;
	padding:20px 0 100px;
	width: 350px;
	background: url(../../image/sureness/line.png) no-repeat center bottom;
}
#sureness .flow .box:last-child{ padding: 0; width:590px; background: none;}
#sureness .flow .box:last-child .come {margin: auto; width: 350px;}
#sureness .flow .box h3 {
	margin:20px auto;
	padding: 15px;
	width: 220px;
	font-size:170%;
	text-align: center;
	color: #FFF;
	background: #D63030;
	border-radius:50px; /* CSS3 */
	-webkit-border-radius:50px; /* Safari,Google Chrome */
	-moz-border-radius:50px;/* Firefox */
}
#sureness .flow .box .photo1 { text-align: center;}
#sureness .flow .box .photo2,
#sureness .flow .box .photo3,
#sureness .flow .box:before,
#sureness .flow .box:nth-child(3):after {
	display:block;
	clear:both;
	content:"";
	position: absolute;
}
#sureness .flow .box:nth-child(1) .photo2 { top:-30px; left:-200px;}
#sureness .flow .box:nth-child(1) .photo3 { top:130px; right:-250px;}
#sureness .flow .box:nth-child(1) .photo2 img { width: 188px; height: auto;}
#sureness .flow .box:nth-child(1) .photo3 img { width: 245px; height: auto;}
#sureness .flow .box:nth-child(2) .photo2 { top:-30px; left:-140px;}
#sureness .flow .box:nth-child(2) .photo3 { top:130px; left:-250px;}
#sureness .flow .box:nth-child(2) .photo2 img { width: 160px; height: auto;}
#sureness .flow .box:nth-child(2) .photo3 img { width: 220px; height: auto;}
#sureness .flow .box:nth-child(3) .photo2 { top:130px; left:-250px;}
#sureness .flow .box:nth-child(3) .photo3 { top:-30px; right:-190px;}
#sureness .flow .box:nth-child(3) .photo2 img { width: 240px; height: auto;}
#sureness .flow .box:nth-child(3) .photo3 img { width: 165px; height: auto;}
#sureness .flow .box:nth-child(4) .photo2 { top:-30px; right:-140px;}
#sureness .flow .box:nth-child(4) .photo3 { top:130px; right:-250px;}
#sureness .flow .box:nth-child(4) .photo2 img { width: 160px; height: auto;}
#sureness .flow .box:nth-child(4) .photo3 img { width: 220px; height: auto;}

/* ORNAMENT */
#sureness .flow .box:nth-child(1):before { top:0; right:-100px; width:105px; height:105px; background: url(../image/abs06.png) no-repeat;}
#sureness .flow .box:nth-child(2):before { top:150px; right:-170px; width:180px; height:180px; background: url(../image/abs08.png) no-repeat;}
#sureness .flow .box:nth-child(3):before { top:-30px; left:-100px; width:116px; height:116px; background: url(../image/abs03.png) no-repeat;}
#sureness .flow .box:nth-child(3):after { top:230px; right:-100px; width:95px; height:95px; background: url(../image/abs05.png) no-repeat; background-size:100% auto;}
#sureness .flow .box:nth-child(4):before { top:-30px; left:-220px; width:157px; height:266px; background: url(../image/abs09.png) no-repeat;}
#sureness .flow .box:nth-child(5):before { top:-70px; right:0; width:75px; height:75px; background: url(../image/abs10.png) no-repeat;}


/*====================================================================================================
	MANUFACTURER
====================================================================================================*/
#manufacturer{ width: 100%;}

/* MAINCOME */
#manufacturer .syokai{
	margin: 0 auto 60px;
	padding: 70px 0 0;
	width: 960px;
	min-height: 630px;
	background: url(../../image/seisan/syugo.jpg) no-repeat;
}
#manufacturer .syokai p{ margin: 0 auto; color: #FFF; font-weight: bold; text-align: center;}
#manufacturer .syokai p:nth-child(1){
	width: 476px;
	font-size: 30px;
	line-height: 35px;
	background: url(../../image/seisan/title.png) no-repeat;
}
#manufacturer .syokai p:nth-child(2){ margin-top: 25px; font-size: 20px;}

/* MESSAGE */
#manufacturer .omoi {}
#manufacturer .omoi .box {position: relative;}
#manufacturer .omoi .box .title{ color: #D63030; font-size: 24px; font-weight: bold; text-align: center;}
#manufacturer .omoi .box .text{ margin: 30px auto 60px; width: 670px;}
#manufacturer .omoi .box:before{ position:absolute; content:'';}
#manufacturer .omoi .box:nth-child(1):before{ width: 132px; height: 177px; background: url(../image/abs04.png) no-repeat; top:130px;}
#manufacturer .omoi .box:nth-child(2):before{ width: 116px; height: 114px; background: url(../image/abs03.png) no-repeat; top:-100px; right: 0;}
#manufacturer .omoi .box:nth-child(3):before{ width: 168px; height: 155px; background: url(../image/abs05.png) no-repeat; top:-70px; right: 0;}

/* STAFF LIST */
#manufacturer #seisan{ 
	position: relative;
	margin-top: 150px;
	padding: 120px 0 80px;
	width: 100%;
	background: url(../image/about_bk.png) no-repeat;
	background-size: cover;
}
#manufacturer #seisan:before{
	position:absolute;
	content:'';
	margin:auto;
	width: 845px;
	height: 151px;
	background: url(../../image/seisan/tomato.png) no-repeat center center;
	top:-80px;
	left: 0;
	right: 0;
}
#manufacturer #seisan .title{
	margin: 0 auto 50px;
	width: 292px;
	height: 170px;
	background: url(../../image/seisan/title2.png) no-repeat;
	text-indent: -9999px;
}
#manufacturer #seisan .list{ margin: 0 auto; width: 960px;}
#manufacturer #seisan .list:after { /* float clear*/ display:block; clear:both; content:"";}
#manufacturer #seisan .list ul{ float: left; margin: 0 10px 50px 0; width: 184px}
#manufacturer #seisan .list ul:nth-child(5n){ margin-right: 0%;}
#manufacturer #seisan .list ul li{ text-align: center; line-height:120%;}
#manufacturer #seisan .list ul li:nth-child(2){ padding-top:10px;}
#manufacturer #seisan .list small { display: block; font-size: 10px;}


/*====================================================================================================
	POSTER
====================================================================================================*/
#poster { padding-bottom: 5%;}

/* MAINCOME */
#poster .maincome { margin-bottom: 30px; text-align: center;}
#poster .maincome .catch { margin:0; font-size: 30px;}
#poster .maincome .come {}

/* LIST */
#poster ul { margin-bottom: 30px; width: 100%;}
#poster ul:after { /* float clear*/ display:block; clear:both; content:"";}
#poster ul li{ float: left; margin:2%; width:29.3%;}
#poster ul li:nth-child(3n+1){ clear: both;}
#poster ul li img { width: 100%; height: auto;}

/* DOWNLOAD */
#poster .comment2 { position: relative;}
#poster .adobe { position: absolute; top:20px; right:20px;}
