@charset "UTF-8";

/*----------------------------------------
 * トップページ
 *----------------------------------------*/


/**** 全画面部分 ****/
/* 全画面ナビ */
section.main_area nav {
	position:absolute;
	width:100%;
	z-index:35;
	top:55px;
}

section.main_area ul {
	margin:0;
	padding:0 30px;
}

section.main_area nav ul li {
	padding-top:1em;
	padding-bottom:1em;
/*
	width:9%;
*/
	width:6.5%;
	text-align:center;
	float:left;
}

section.main_area nav ul li.top_nav_service { width:10%;}
section.main_area nav ul li.top_nav_aboutus { width:11%;}
section.main_area nav ul li.top_nav_onlineshop { width:16%;}
section.main_area nav ul li.top_nav_startagri { width:12%;}
section.main_area nav ul li.top_nav_recruit { width:12%;}

section.main_area nav ul li.top_nav_onlineshop {
	padding:0;
	font-size:0.875rem;	
}
section.main_area nav ul li.top_nav_onlineshop a{
	padding:1em 0 2em 0;
	position:relative;
	background:-moz-linear-gradient(top left, #55b43c, #018088);
	background:-webkit-linear-gradient(top left, #55b43c, #018088);
	background:linear-gradient(to bottom right, #55b43c, #018088);
	color:white !important;
	height:16px;
 }
 
section.main_area nav ul li.top_nav_onlineshop a img {
	margin-right:1em;
}

@media only screen and (max-width: 1100px) {
	section.main_area nav ul li.top_nav_onlineshop a img {
		display:none;
	}
	
	body.font-ll.top_page section.main_area nav ul.f14 li,
	body.font-l.top_page section.main_area nav ul.f14 li,
	body.font-m.top_page section.main_area nav ul.f14 li,
	body.font-m.top_page section.main_area nav ul.f14 li {
		font-size:13px;
	}
}

section.main_area nav ul li.top_nav_onlineshop .std_button_a {
	font-size:0.875rem;
}

section.main_area nav ul li.top_nav_startagri { 
	padding:0;
}

section.main_area nav ul li.top_nav_startagri a{
	padding:1em 0 2em 0;
	position:relative;
	background:-moz-linear-gradient(top left, #008aff, #015faf);
	background:-webkit-linear-gradient(top left, #008aff, #015faf);
	background:linear-gradient(to bottom right, #008aff, #015faf);
	color:white !important;
	height:16px;
}

section.main_area nav ul li.top_nav_recruit {
	padding-top:0;
}

section.main_area nav ul li.top_nav_recruit a{
	padding:0.4em 0 2em 0;
	position:relative;
	color:white !important;
	height:16px;
	background:-moz-linear-gradient(top left, #026634, #033624);
	background:-webkit-linear-gradient(top left, #026634, #033624);
	background:linear-gradient(to bottom right, #026634, #033624);
}

section.main_area nav ul li.top_nav_recruit a span {
	font-size:0.8em;
	color:yellow;
	display:block;
	width:100%;
	text-align:center;
	line-height:1em;
	margin-top:4px;
}

section.main_area nav ul a,
section.main_area nav ul a:visited {
	/*
	border-right:1px solid white;
	*/
	border-top:none !important;
	border-left:none !important;
	border-bottom:none !important;
	border-right:1px solid black;
}

section.main_area nav ul li.top_nav_aboutus a,
section.main_area nav ul li.top_nav_onlineshop a,
section.main_area nav ul li.top_nav_startagri a {
	border:none !important;
}

/* 開閉するsub_nav */
section.main_area .sub_nav .sub_nav_inner {
	margin-left:80px;
	margin-right:80px;
}

/* 前面・タイトル */
section.main_area .main_harete {
	position:absolute;
	z-index:29;
	top:150px;
	width:100%;
}

section.main_area .main_harete img {
	width:470px;
	height:auto;
	margin-left:80px;
}

section.main_area .main_harete a{
	margin-top:80px;
	display:block;
	border:1px solid white;
	color:white;
	width:10em;
	text-align:center;
	padding:1em;
	border-radius:30px;
	transition: all 0.5s 0s ease;
	margin-left:80px;
}

section.main_area .main_harete a:hover {
	background:rgba(255,255,255,0.5);
}

/* 前面・タイトル おうち時間 */
section.main_area .main_ouchi {
	position:absolute;
	width:100%;
	height:100%;
	z-index:29;
	background:url(/resources/images/top/ouchi_front.png) no-repeat center center;
	background-size:contain;
}

section.main_area .main_ouchi a {
	display:block;
	width:100%;
	height:100%;
}


/* 右下のスライド位置の丸 */
section.main_area .image_position {
	position:absolute;
	right:20px;
	bottom:20px;
	z-index:10;
	width:16px;

}

section.main_area .image_position .p1,
section.main_area .image_position .p2,
section.main_area .image_position .p3,
section.main_area .image_position .p4 {
	width:12px;
	height:12px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center top;
	margin:0 auto 5px auto;
}

section.main_area .image_position .p1 {
  animation  : bg_maru1_anime 40s infinite;   /* 4画像 × 各10s = 40s */
} 

section.main_area .image_position .p2 {
  animation  : bg_maru2_anime 40s infinite;   /* 4画像 × 各10s = 40s */
} 

section.main_area .image_position .p3 {
  animation  : bg_maru3_anime 40s infinite;   /* 4画像 × 各10s = 40s */
} 

section.main_area .image_position .p4 {
  animation  : bg_maru4_anime 40s infinite;   /* 4画像 × 各10s = 40s */
} 

@keyframes bg_maru1_anime {
	0% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	23% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	25% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	48% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	50% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	73% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	75% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	98% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	100% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
}

@keyframes bg_maru2_anime {
	0% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	23% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	25% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	48% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	50% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	73% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	75% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	98% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	100% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
}

@keyframes bg_maru3_anime {
	0% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	23% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	25% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	48% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	50% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	73% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	75% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	98% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	100% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
}

@keyframes bg_maru4_anime {
	0% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	23% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	25% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	48% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	50% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	73% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
	75% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	98% { background-image:url(/resources/images/top/photo_slidepoint_on.png);}
	100% { background-image:url(/resources/images/top/photo_slidepoint_off.png);}
}

/* 全画面背景の指定 */
.main_area .src_one_1 {
/*
	background-image : url(/resources/images/top/main_harete_one_1.jpg);
*/
	background-image : url(/resources/images/top/ouchi_bg1.jpg);
	background-position:center bottom;
	animation  : bg_anime_one_1 40s infinite;
}

.main_area .src_one_2 {
/*
	background-image : url(/resources/images/top/main_harete_one_2.jpg);
*/
	background-image : url(/resources/images/top/ouchi_bg2.jpg);
	background-position:center bottom;
	animation  : bg_anime_one_2 40s infinite;
}

.main_area .src_one_3 {
/*
	background-image : url(/resources/images/top/main_harete_one_1.jpg);
*/
	background-image : url(/resources/images/top/ouchi_bg3.jpg);
	background-position:center bottom;
	animation  : bg_anime_one_3 40s infinite;
}

.main_area .src_one_4 {
/*
	background-image : url(/resources/images/top/main_harete_one_2.jpg);
*/
	background-image : url(/resources/images/top/ouchi_bg4.jpg);
	background-position:center bottom;
	animation  : bg_anime_one_4 40s infinite;
}


@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .main_area .anim_1.src_one_1 {	animation  : bg_anime_one_ie11_1 40s infinite;} /* IE11 */
	*::-ms-backdrop, .main_area .anim_1.src_one_2 {	animation  : bg_anime_one_ie11_2 40s infinite;} /* IE11 */
  *::-ms-backdrop, .main_area .anim_1.src_one_3 {	animation  : bg_anime_one_ie11_3 40s infinite;} /* IE11 */
  *::-ms-backdrop, .main_area .anim_1.src_one_4 {	animation  : bg_anime_one_ie11_4 40s infinite;} /* IE11 */
}

@keyframes bg_anime_one_ie11_1 {
	0% { opacity: 1; z-index:10;}
	20% { opacity: 1; }
	30% { opacity: 0;}
	90% { opacity:0;}
	100% { opacity:1;}
}

@keyframes bg_anime_one_ie11_2 {
	0% { opacity: 0;z-index:10;}
	20% { opacity: 0;}
	25% { opacity: 1;}
	45% { opacity: 1;}
	60% { opacity: 0;}
	100% { opacity:0;}
}

@keyframes bg_anime_one_ie11_3 {
	0% { opacity: 0; z-index:10;}
	45% { opacity: 0;} 
	50% { opacity: 1;}
	70% { opacity: 1;}
	80% { opacity: 0;}
	100% { opacity:0;}
}

@keyframes bg_anime_one_ie11_4 {
	0% { opacity: 0; z-index:10;}
	70% { opacity: 0; }
	75% { opacity: 1;}
	95% { opacity: 1; }
	100% { opacity: 0;}
}

/*
@keyframes bg_anime_one_1 {
	0% { opacity: 1; transform:scale(1);rotate(0.1deg);z-index:10;}
	20% { opacity: 1; }
	30% { opacity: 0; transform:scale(1.1) }
	90% { opacity:0; transform:scale(1)}
	100% { opacity:1;}
}

@keyframes bg_anime_one_2 {
	0% { opacity: 0; transform:scale(1);rotate(0.1deg);z-index:10;}
	20% { opacity: 0; transform:scale(1);}
	25% { opacity: 1;}
	45% { opacity: 1;}
	60% { opacity: 0; transform:scale(1.1) }
	100% { opacity:0;}
}

@keyframes bg_anime_one_3 {
	0% { opacity: 0; transform:scale(1);rotate(0.1deg);z-index:10;}
	45% { opacity: 0;transform:scale(1) ; } 
	50% { opacity: 1;}
	70% { opacity: 1;}
	80% { opacity: 0; transform:scale(1.1) }
	100% { opacity:0;}
}

@keyframes bg_anime_one_4 {
	0% { opacity: 0; transform:scale(1);rotate(0.1deg);z-index:10;}
	70% { opacity: 0; }
	75% { opacity: 1; transform:scale(1)}
	95% { opacity: 1; }
	100% { opacity: 0; transform:scale(1.1) }
}
*/



@keyframes bg_anime_one_1 {
	0% { opacity: 1; ;z-index:10;}
	20% { opacity: 1; }
	30% { opacity: 0;}
	90% { opacity:0;}
	100% { opacity:1;}
}

@keyframes bg_anime_one_2 {
	0% { opacity: 0; z-index:10;}
	20% { opacity: 0;}
	25% { opacity: 1;}
	45% { opacity: 1;}
	60% { opacity: 0;}
	100% { opacity:0;}
}

@keyframes bg_anime_one_3 {
	0% { opacity: 0; z-index:10;}
	45% { opacity: 0;} 
	50% { opacity: 1;}
	70% { opacity: 1;}
	80% { opacity: 0;}
	100% { opacity:0;}
}

@keyframes bg_anime_one_4 {
	0% { opacity: 0; ;z-index:10;}
	70% { opacity: 0; }
	75% { opacity: 1;}
	95% { opacity: 1; }
	100% { opacity: 0;}
}






/*
@keyframes bg_anime {
	0% { opacity: 0; transform:scale(1);z-index:10;}
	5% { opacity: 1; }
	50% { opacity: 1; }
	51% { opacity: 0; z-index:1;}
	100% { opacity: 0; transform:scale(1.3)}
}

@keyframes bg_anime_2 {
	0% { opacity: 1; transform:scale(1)}
	20% { opacity: 1; }
	25% { opacity: 0; }
	90% { opacity: 0; }
	100% { opacity: 0; transform:scale(1.3);z-index:1;}
}
*/



@media screen and (max-width: 1400px) {
	section.main_area .main_harete img {	width:31%;}
}

@media screen and (max-width: 1000px) {
	section.main_area .main_harete img {
		width:30%;
	}
	
	section.main_area .main_harete a {
    margin-top: 60px;
	}

}



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

	section.main_area .main_ouchi {
		background:url(/resources/images/top/ouchi_front_mb.png) no-repeat center center;
		background-size:contain;
	}

	section.main_area .main_harete {
		top:0px;
		left:0px;
		height:100%;
	}

	section.main_area .main_harete img {
		width:100%;
		height:auto;
		margin:55px 0 0 0;
	}
	
	section.main_area .main_harete a {
		display:none;
	}
	
	section.main_area .main_harete_a {
		bottom:20px;
		width:100%;
		position:absolute;
		z-index:35;
	}
	
	section.main_area .main_harete_a a {
		display: block;
		border: 1px solid white;
		color: white;
		width: 10em;
		text-align: center;
		padding: 0.5em;
		border-radius: 30px;
		transition: all 0.5s 0s ease;
		margin: 0 auto;
	}
	
	.main_area .src_one_1 {
/*
		background-image : url(/resources/images/top/main_harete_one_1_mb_9.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg1.jpg);
		background-position:center bottom;
	}
	
	.main_area .src_one_2 {
/*
		background-image : url(/resources/images/top/main_harete_one_2_mb_5.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg2.jpg);
		background-position:center bottom;
	}
	.main_area .src_one_3 {
/*
		background-image : url(/resources/images/top/main_harete_one_1_mb_9.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg3.jpg);
		background-position:center bottom;
	}
	
	.main_area .src_one_4 {
/*
		background-image : url(/resources/images/top/main_harete_one_2_mb_5.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg4.jpg);
		background-position:center bottom;
	}
}

@media screen and (max-height: 750px) and (min-width: 768px) {
	section.main_area .main_harete img {
		width:25%;
	}
	section.main_area .main_harete a { 
		margin-top:40px;
	}
	
	.main_area .src_one_1,
	.main_area .src_one_2,
	.main_area .src_one_3,
	.main_area .src_one_4 {
		background-position:center center;
	}

}

@media screen and (max-height: 750px) and (min-width: 768px) {
	section.main_area .main_harete img {
		width:25%;
	}
	section.main_area .main_harete a { 
		margin-top:40px;
	}
	
	.main_area .src_one_1,
	.main_area .src_one_2,
	.main_area .src_one_3,
	.main_area .src_one_4 {
		background-position:center center;
	}

}
/*
@media screen and (max-height: 1000px) {
	.main_area .src_one_1,
	.main_area .src_one_2,
	.main_area .src_one_3,
	.main_area .src_one_4 {
	border:5px solid red;
		background-position:center top;
	}
}
*/

/* 縦長スマホ */

@media screen and  (max-width: 768px) and (max-aspect-ratio: 10/21){
	.main_area .src_one_1,
	.main_area .src_one_3 {
		background-position:center top;
	}

}

/* ワイド画面 */
@media screen and (min-aspect-ratio: 16/10){

	.main_area .src_one_1 {
/*
		background-image : url(/resources/images/top/main_harete_one_1_wide.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg1.jpg);
		background-position:left top;
	}

	.main_area .src_one_2 {
/*
		background-image : url(/resources/images/top/main_harete_one_2_wide.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg2.jpg);
	background-position:center top;
	}

	.main_area .src_one_3 {
/*
		background-image : url(/resources/images/top/main_harete_one_1_wide.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg3.jpg);
		background-position:left top;
	}

	.main_area .src_one_4 {
/*
		background-image : url(/resources/images/top/main_harete_one_1_wide.jpg);
*/
		background-image : url(/resources/images/top/ouchi_bg4.jpg);
		background-position:left top;
	}


}

/*
@media screen and (min-width: 1500px) and (min-height:1000px){
	.main_area .src_one_1,
	.main_area .src_one_2,
	.main_area .src_one_3,
	.main_area .src_one_4 {
		background-position:center top;
	}

}

@media screen and (max-height: 1000px) {

	.main_area .src_one_1,
	.main_area .src_one_2,
	.main_area .src_one_3,
	.main_area .src_one_4 {
		background-position:center top;
	}

}
*/