@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

#visual{
	width:100%;
	padding-bottom:55px;
	position:relative;
}

#visualTxt{
	width:100%;
	text-align:center;
	line-height:1.5;
	font-size:350%;
	color:#fff;
	font-weight:bold;
	position:absolute;
	left:0;
	top:30%;
	transform: translateY(-30%);
	text-shadow:0 0 35px #7D553E, 0 0 25px #7D553E, 0 0 20px #7D553E, 0 0 0.40px #7D553E;
}

#visualItem{
	width:100%;
	position:absolute;
	left:0;
	bottom:0;
}

#visualItem img{
	display:block;
	width:100%;
	max-width:998px;
	height:auto;
	margin:0 auto;
	padding:0 25px;
	box-sizing:border-box;
}

/*------------------------------------------------------------ 
    NEWS 
------------------------------------------------------------*/  

#news{
	width:auto;
	padding:55px 25px;
}

#newsList{
	width:100%;
	max-width:620px;
	margin:0 auto;
}

#newsList li{
	display:table;
	width:100%;
	margin-bottom:20px;
}

.news-date{
	display:table-cell;
	vertical-align:top;
	width:110px;
	font-size:125%;
	font-family: 'Roboto', sans-serif;
}

.news-ttl{
	display:table-cell;
	vertical-align:top;
}

.news-ttl a{
	color:#003366;
	font-size:134%;
}

.linkbtn{
	width:100%;
	max-width:500px;
	margin:0 auto;
	padding-top:15px;
}

.linkbtn a{
	display:block;
	width:auto;
	text-align:center;
	padding:14px;
	color:#fff;
	font-size:150%;
	background:#FF0000;
	border-radius:5px;
}

/*------------------------------------------------------------ 
    HISTORY
------------------------------------------------------------*/  

#history{
	width:100%;
	text-align:center;
	position:relative;
	background:#FBF9F5;
}

#historyHd{
	font-size:300%;
	color:#fff;
	padding:180px 25px;
	letter-spacing:2px;
	background-color:#F4F0E4;
	background-position:50% 0;
	background-image:url(../img/bg-history.png);
	background-repeat: no-repeat;
	background-size:contain;
	background-attachment:fixed;
}

#historyHd:after{
	display:block;
	content:"";
	width:124px;
	height:4px;
	background:#fff;
	margin:20px auto 0;
}

#historyTxt{
	max-width: 1200px;
	margin:0 auto;
	padding:120px 25px 100px;
	font-size:175%;
	color:#663300;
	line-height:2;
	background: url(../img/bg-history2.png) no-repeat 50% 50%;
	background-size:contain;
}


/*------------------------------------------------------------ 
    PRODUCT
------------------------------------------------------------*/  

#productHd{
	color:#003366;
	font-weight:bold;
	font-size:234%;
	text-align:center;
	padding:45px 0 30px;
}

.productSubHd{
	width:330px;
	text-align:center;
	line-height:48px;
	margin:0 auto 40px;
	font-size:200%;
	border-top:1px solid;
	border-bottom:1px solid;
}

.productSubHd.style1{
	color:#339900;
	border-color:#339900;
}

.productSubHd.style2{
	color:#0099CC;
	border-color:#0099CC;
}

.productSubHd.style3{
	color:#FF6600;
	border-color:#FF6600;
}

.product{ margin-top:90px;}

.product-list{
	padding:0 44px;
	letter-spacing:-0.4em;
	box-sizing:border-box;
}

.product-item{
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal;
	width:25%;
	padding:16px 16px 24px;
	box-sizing:border-box;
	border:1px solid #EDEDED;
	border-top:none;
	border-left:none;
	position:relative;
}

.slick-list{ border:none;}

.slick-list:before,
.slick-list:after{
	display:block;
	content:"";
	height:100%;
	width:1px;
	background:#EDEDED;
	position:absolute;
	top:0;
}

.slick-list:before{ left:0;}
.slick-list:after{ right:0;}

.product-name{
	color:#003366;
	font-size:134%;
	font-weight:bold;
	margin-top:12px;
}

.product-sentence{
	font-size:117%;
	margin-top:12px;
	color:#333;
}

.product-txt{
	color:#666666;
	line-height:1.5;
	margin-top:12px;
}

.morebtn{
	width:100%;
	max-width:390px;
	height:50px;
	margin:60px auto 0;
}

.morebtn a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:48px;
	font-size:150%;
	color:#003366;
	border:1px solid #003366;
	border-radius:5px;
	box-sizing:border-box;
	transition:all 0.2s ease-out;
}

.morebtn a:hover{
	color:#fff;
	background:#003366;
}

#product{
	max-width: 1228px;
}

/*------------------------------------------------------------ 
    COMPANY
------------------------------------------------------------*/  

#company{
	width:100%;
	padding:120px 0 100px;
	margin-top:120px;
	background:#FBF9F5;
}

.companyInner{
	display:table;
	width:100%;
	max-width:1200px;
}

#companyMain{
	display:table-cell;
	vertical-align:top;
	width:500px;
	padding-right:40px;
}

#companySub{
	display:table-cell;
	vertical-align:top;
	overflow:hidden;
}

#companyHd{
	color:#333;
	font-size:234%;
	font-weight:bold;
}

.companyTxt{
	color:#333;
	font-size:134%;
	line-height:1.5;
	margin-top:15px;
}

.companySubHd{
	color:#003366;
	padding:20px 0;
	font-size:150%;
	line-height:19px;
}

.companyTxt2{
	color:#333;
	font-size:134%;
	line-height:1.7;
}

.companyTbl{
	width:100%;
	color:#333;
	font-size:125%;
}

.companyTbl th{
	vertical-align:top;
	width:110px;
	text-align:left;
	line-height:1.5;
	padding-bottom:8px;
}

.companyTbl td{
	vertical-align:top;
	line-height:1.5;
	padding-bottom:8px;
}

.companyTbl td small{
	display:block;
	font-size:92%;
	line-height:1.5;
	text-indent:-1em;
	padding-left:1em;
	margin-top:5px;
}

#companyBtn{
	width:100%;
	max-width:400px;
	height:80px;
	margin-top:20px;
}

#companyBtn a{
	display:block;
	width:auto;
	height:100%;
	padding-left:30px;
	color:#fff;
	font-size:175%;
	letter-spacing:1px;
	font-weight:bold;
	line-height:80px;
	background:#FF0000;
	border-radius:8px;
	position:relative;
}

#companyBtn a:after{
	display:block;
	content:"";
	width:56px;
	height:65px;
	background:url(../common/img/icons.png) no-repeat -64px -20px;
	background-size:400px 400px;
	position:absolute;
	right:25px;
	bottom:0;
}

#gmap{
	width:100%;
	height:400px;
	position:relative;
}

#gmap iframe{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

.btn-link{
	width:240px;
	height:50px;
	float:right;
	padding-top:15px;
}

.btn-link a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:50px;
	color:#fff;
	font-size:134%;
	background:#003366;
	border-radius:5px;
}

#factory{
	width:100%;
	margin-top:50px;
}

#factoryHd{
	display:inline-block;
	vertical-align:middle;
	padding:5px 20px;
	margin-bottom:10px;
	color:#033F85;
	font-size:150%;
	font-weight:bold;
	border:2px solid #003366;
}

#factoryImg{
	display:table-cell;
	vertical-align:top;
	width:432px;
	padding-right:50px;
}

#factoryInfo{
	display:table-cell;
	vertical-align:top;
}

.factoryItem{
	width:100%;
	padding-top:60px;
	overflow:hidden;
}

.factorySubHd{
	color:#003366;
	font-size:150%;
}

.companySubHd:before,
.factorySubHd:before{
	vertical-align:middle;
	content:"● ";
	font-size:117%;
	line-height:1;
}


.factoryTxt{
	float:left;
	padding-top:15px;
	color:#333;
	font-size:134%;
	line-height:1.7;
}

/*------------------------------------------------------------ 
    CORN 
------------------------------------------------------------*/  


.p-idx-corn{
	max-width: 1140px;
	display: flex;
	flex-direction: column;
	gap:46px;
    background: #fff;
	padding-bottom: 80px;
}

.p-idx-corn__sec{
	width:100%;
	display: flex;
	gap:calc(16/1140*100%);
}

.p-idx-corn__ttl{
	width:calc(400/1140*100%);
}

.p-idx-corn__product{
	flex:1;
	display: flex;
}

.p-idx-corn__item{
	display: flex;
	align-items: center;
	flex-direction: column;
	width:25%;
	text-align: center;
}

.p-idx-corn__item-name{
	color:#003366;
	font-size: 12.5px;
	font-weight: bold;
	margin:16px 0 6px;
	padding-inline:2.5%;
	box-sizing: border-box;
}

.p-idx-corn__item-text{
	color:#333;
	font-size: 11px;
	line-height: 1.5;
	padding:0 2.5% 10px;
	box-sizing: border-box;
}

.p-idx-corn__item-btn{
	width:95%;
	max-width:120px;
	height: 30px;
	margin: auto auto 0;
}

.p-idx-corn__item-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
	width:100%;
	height: 100%;
	color:#fff;
	font-size: 12px;
	background-color:#003366;
	border-radius:15px;
}


/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

/* PC */
@media screen and (max-width: 1280px){

	#visualTxt{
		font-size:3vw;
		top:15%;
		transform: translateY(-15%);
	}

}

@media screen and (max-width: 1024px){

	#news{ padding:45px 15px;}
	#historyHd{ padding:140px 15px;}
	#historyTxt,
	#company{ padding:100px 0 80px;}
	#company{ margin-top:100px;}
	#companyMain{ padding-right:50px;}


}


@media screen and (min-width: 789px){ /* タブレット以上 */

	.product-item:nth-child(-n+4){ border-top:1px solid #EDEDED;}

	.product-item:nth-child(4n+1),
	.product-item:first-child{
		border-left:1px solid #EDEDED;
		padding-left:13px;
	}

	.slick-slide .product-item{
		padding-left:14px;
		border-left:none;
	}

}

@media screen and (max-width: 788px) and (min-width: 561px){ /* タブレット～SP */

	.product-item:nth-child(-n+3){ border-top:1px solid #EDEDED;}

	.product-item:nth-child(3n+1),
	.product-item:first-child{
		border-left:1px solid #EDEDED;
		padding-left:8px;
	}

	.slick-slide .product-item{
		padding-left:9px;
		border-left:none;
	}

}


/* TABLET */
@media screen and (max-width: 788px){

	body,
	#wrap{ background:none;}

	#visual{ background:#fff;}

	#visualTxt{
		font-size:3.4vw;
		top:13%;
		transform: translateY(-13%);
		text-shadow:0 0 25px #7D553E, 0 0 20px #7D553E, 0 0 0.40px #7D553E;
	}

	/* news */

	#news{ background:#fff;}

	.news-date{
		width:90px;
		font-size:117%;
	}

	.news-ttl a{ font-size:125%;}

	.linkbtn a{ font-size:134%;}


	/* history */

	#history{ background:none;}

	#historyHd{
		padding:90px 15px;
		font-size:234%;
		background:none;
	}

	#historyHd:before{
		display:block;
		content:"";
		width:100%;
		height: 100vh;
		position:fixed;
		left:0;
		top:0;
		z-index:-1;
		background-color:#F4F0E4;
		background-position:50% 50%;
		background-image:url(../img/bg-history.png);
		background-repeat: no-repeat;
		background-size:cover;
	}

	#historyTxt{
		padding:60px 15px;
		margin-top:0;
	}

	#historyTxt{
		font-size:150%;
		line-height:1.8;
		background-color:#FBF9F5;
	}

	/* product */

	#product{
		background:#fff;
		padding-bottom:60px;
	}

	#productHd{
		font-size:200%;
		padding:40px 0 25px;
	}

	.productSubHd{
		width:264px;
		line-height:42px;
		font-size:167%;
	}

	.product-item{
		width:33.33333333%;
		padding:9px 9px 15px;
	}

	.product-name{
		font-size:125%;
		margin-top:10px;
	}

	.product-sentence{
		font-size:109%;
		margin-top:10px;
	}

	.product-txt{
		font-size:92%;
		line-height:1.4;
		margin-top:10px;
	}

	.morebtn{
		max-width:320px;
		height:46px;
		margin-top:40px;
	}

	.morebtn a{
		line-height:44px;
		font-size:134%;
	}

	.product{ margin-top:70px;}

	.product-list{ padding:0;}


	/* corn */
	.p-idx-corn{
		gap:40px;
		padding-bottom: 48px;
	}

	.p-idx-corn__sec{
		flex-direction: column;
		gap:30px;
	}

	.p-idx-corn__item{
		width: 33.3333%;
		padding:9px 9px 15px;
		box-sizing: border-box;
	}

	.p-idx-corn__ttl{
		width:100%;
	}

	.p-idx-corn__item-name,
	.p-idx-corn__item-text{
		padding-inline:0;
	}

	.p-idx-corn__product{
		width:100%;
		border-top:1px solid #EDEDED;
		border-bottom:1px solid #EDEDED;
	}

	.p-idx-corn__product .slick-slide{
		border-right:1px solid #EDEDED;
	}


	/* company */

	#company{
		margin-top:0;
		padding:60px 0;
	}

	.companyInner{ display:block;}

	#companyMain{
		display:block;
		width:100%;
		padding:0 0 25px;
	}

	#companyHd{ font-size:200%;}

	.companyTxt,
	.companyTxt2,
	.companyTbl,
	.factoryTxt{ font-size:117%;}

	.companyTxt2,
	.factoryTxt{ line-height:1.5;}

	.companyTbl th{ width:100px;}

	.companySubHd{
		padding:20px 0;
		font-size:134%;
	}

	#companySub,
	#factoryInfo{
		display:block;
		width:100%;
	}

	#companyBtn{
		height:60px;
		margin-top:15px;
	}

	#companyBtn a{
		padding-left:20px;
		font-size:150%;
		line-height:60px;
		border-radius:5px;
	}

	#companyBtn a:after{
		right:20px;
		width:40px;
		height:45px;
		background-position:-121px -20px;
	}

	#gmap{ height:300px;}

	#factory{ margin-top:35px;}

	#factoryHd{
		padding:5px 15px;
		font-size:134%;
	}

	#factoryImg{
		width:324px;
		display:block;
		margin:0 auto;
	}

	.factoryItem{ padding-top:40px;}

	.factorySubHd{ font-size:134%;}

	.factoryTxt{ padding-top:10px;}

	.btn-link{
		width:180px;
		height:46px;
		padding-top:10px;
	}

	.btn-link a{
		line-height:46px;
		font-size:117%;
	}

}


/* SP */
@media screen and (max-width: 560px){

	#visual{ padding-bottom:25px;}
	#visualItem img{ padding:0 40px;}
	#visualTxt{
		font-size:4vw;
		text-shadow:0 0 20px #7D553E, 0 0 0.40px #7D553E;
	}

	#visualItem{
		bottom:-5%;
	}

	/* news */

	#news{ padding:20px 10px 25px;}

	#newsList li{
		display:block;
		margin-bottom:15px;
	}

	.news-date{
		display:block;
		font-size:109%;
		margin-bottom:6px;
	}

	.news-ttl{ display:block;}
	.news-ttl a{ font-size:117%;}

	.linkbtn{ padding-top:10px;}
	.linkbtn a{
		font-size:125%;
		padding:12px;
	}

	/* history */

	#historyHd{
		padding:60px 10px;
		font-size:175%;
	}

	#historyHd:after{
		width:80px;
		height:2px;
		margin-top:10px;
	}

	#historyTxt{ padding:40px 10px;}

	#historyTxt{
		font-size:117%;
	}


	/* product */

	#product{ padding-bottom:40px;}

	#productHd{
		font-size:175%;
		padding:30px 0 20px;
	}

	.productSubHd{
		font-size:150%;
		margin-bottom:25px;
	}

	.product-item{ width:50%;}

	.product-name{
		font-size:117%;
		margin-top:8px;
	}

	.product-sentence{
		font-size:100%;
		margin-top:8px;
	}

	.product-txt{
		margin-top:8px;
		line-height:1.2;
	}

	.morebtn{
		height:42px;
		margin-top:30px;
	}

	.morebtn a{
		line-height:40px;
		font-size:117%;
	}

	.product{ margin-top:60px;}

	.product-item:nth-child(-n+2){ border-top:1px solid #EDEDED;}

	.product-item:nth-child(2n+1),
	.product-item:first-child{
		border-left:1px solid #EDEDED;
		padding-left:8px;
	}

	.slick-slide .product-item{
		padding-left:9px;
		border-left:none;
	}

	/* corn */
	.p-idx-corn__item{
		width: 50%;
	}

	.p-idx-corn{
		gap:36px;
		padding-bottom: 40px;
	}

	.p-idx-corn__sec{
		gap:25px;
	}

	/* company */

	#company{ padding:40px 0;}

	#companyMain{
		display:block;
		padding:0 0 15px;
	}

	#companySub{
		width:100%;
		display:block;
	}

	#companyHd{ font-size:150%;}

	.companyTxt,
	.companyTxt2,
	.companyTbl,
	.factoryTxt{ font-size:109%;}

	.companyTxt{ margin-top:10px;}

	.companySubHd{
		font-size:117%;
		padding:15px 0;
	}

	.companyTbl td small{ margin:0;}
	#companyBtn{ height:50px;}
	#companyBtn a{
		padding-left:15px;
		font-size:134%;
		line-height:50px;
	}

	#companyBtn a:after{
		width:28px;
		height:33px;
		background-position:-162px -20px;
		right:15px;
	}

	#factoryImg{
		width:100%;
		max-width:324px;
	}

	.factoryItem{ padding-top:30px;}

	.factoryTxt{ float:none;}

	.btn-link{
		width:100%;
		max-width:320px;
		height:42px;
		margin:0 auto;
		float:none;
		padding-top:15px;
	}

	.btn-link a{ line-height:42px;}


}