@charset "utf-8";

/* structure
---------------------------------------- */
@media screen and (max-width: 480px) {
}




/* slider
---------------------------------------- */
div:has(.slider){
	position:relative;
}
ul.slider + button{
	width:4em;
	height:2em;
	position:absolute;
	right:calc(50% - 120px - 4em - 30px);
	bottom:calc(-2em - 13px);
	border:1px #ccc solid;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	transision:all 0.3s linear;
	background-color:#ddd;
	z-index:9;
}
ul.slider + button:hover{
	border:1px #ff9600 solid;
	background-color:#ff9600;
	transision:all 0.3s linear;
}
ul.slider + button[data-control="play"]:after,
ul.slider + button[data-control="pause"]:after{
	position:absolute;
	content:"";
	display:block;
}
ul.slider + button[data-control="pause"]:after{
	width: 11px;
	height: 14px;
	top: calc(1em - 7px);
	left: calc(2em - 5.5px);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: #464646;
}
ul.slider + button[data-control="pause"]:hover:after{
	background: #fff;
}
ul.slider + button[data-control="play"]:after{
	width:0.4em;
	height:1em;
	top:0.5em;
	left:1.5em;
	border-left:0.3em #464646 solid;
	border-right:0.3em #464646 solid;
}
ul.slider + button[data-control="play"]:hover:after{
	border-left:0.3em #fff solid;
	border-right:0.3em #fff solid;
}
@media screen and (max-width:540px){
.slick-dots{
	width:calc(100% - 4em - 15px);
	top:calc(50vw - 15px);
	right:auto;
	padding-right:calc(4em + 15px);
	text-align:left;
}
	ul.slider + button{
		right:0;
	}
	.slick-dots li button::before {
		top: 0;
	}
}


/* concept
---------------------------------------- */
ul#concept{
	position:relative;
	margin:0;
}
ul#concept::before{
	position:absolute;
	top:-50px;
	right:350px;
	content:url(../../img/tag/seeds.png);
}
ul#concept li{
	width:calc( 100% - 420px );
}
ul#concept li.seeds_quality{float:left;}
ul#concept li.quality      {float:right;}

ul#concept li.seeds_quality{
	height:500px;
	padding:0 20px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background:url(../../img/bk_sky.png) repeat-x center bottom;
	background-size:100% auto;
}
ul#concept li.seeds_quality h2{
	margin:50px 0 30px;
	color:white;
	text-align:center;
}
ul#concept li.seeds_quality h2 span{
	margin-right:10px;
}
ul#concept li.seeds_quality p{
	padding:0 20px;
	color:white;
	text-align:center;
}
ul#concept li.seeds_quality img{
	display:block;
	margin:20px auto ;
}

ul#concept li.quality{
	width:350px;
}
ul#concept li.quality a{
	display:block;
	min-height:280px;
	margin:0 auto 30px;
	color:white;
	text-align:center;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	transition:all 0.3s linear;
	overflow:hidden;
	background-repeat:repeat , no-repeat;
	background-position:center center;
	background-size:auto auto,auto 105%;
}
ul#concept li.quality a.japan_quality{background-image:url(../img/bk_stripe.png),url(../../img/bk_quality.png);}
ul#concept li.quality a.technology   {background-image:url(../img/bk_stripe.png),url(../../img/bk_technology.png);}

ul#concept li.quality a.japan_quality:hover{background-image:url(../../img/bk_quality.png);}
ul#concept li.quality a.technology:hover   {background-image:url(../../img/bk_technology.png);}

ul#concept li.quality a.japan_quality:hover,
ul#concept li.quality a.technology:hover{
	background-repeat: no-repeat;
	background-size:auto 115%;
	transition:all 0.3s linear;
}

ul#concept li.quality a span{
	display:block;
	margin:30% 0 0;
}
ul#concept li.quality a h2{
	margin:5px 0 30%;
	padding:5px 0 0 0;
	text-align:center;
	border-top:1px #fff solid;

}
@media screen and (max-width: 1280px) {
	ul#concept li.seeds_quality{
		background:url(../../img/bk_sky_tb.png) repeat-x center bottom;
	}
}
@media screen and (max-width: 990px) {
	ul#concept{
		margin-bottom:50px;
	}
	ul#concept::before{
		position:absolute;
		top:-50px;
		left:0;
		right:0;
		content:url(../../img/tag/seeds.png);
	}
	ul#concept li.seeds_quality,
	ul#concept li.quality{
		width:100%;
		float:none;
		padding-top:1px;
	}
	ul#concept li.seeds_quality{
		height: auto;
		margin-bottom:50px;
		padding:1px 0 0 0;
		background:url(../../img/bk_sky_tb.png) repeat-x center bottom;
	}
	ul#concept li.quality{
		letter-spacing:-0.4em;
	}
	ul#concept li.quality a{
		width:48%;
		min-height:0;
		display:inline-block;
		*display:inline;
		float:none;
		margin-right:4%;
		vertical-align:top;
		letter-spacing:normal;
		zoom:1;
	}
	ul#concept li.quality a.technology{
		margin-right:0;
	}
}

@media screen and (max-width:600px) {
	ul#concept li.quality a{
		width:100%;
		margin-right:0;
		background-size:105% auto;
	}
	ul#concept li.quality a span {
		margin: 15% 0 0;
	}
	ul#concept li.quality a h2 {
		margin: 5px 0 15%;
	}
	ul#concept li.quality a.japan_quality:hover,
	ul#concept li.quality a.technology:hover{
		background-size:115% auto;
	}
}

@media screen and (max-width:510px) {
	ul#concept li.seeds_quality{
		margin-bottom:20px;
		background:url(../../img/bk_sky_sp.png) repeat-x center bottom;
	}
}




/* topics
---------------------------------------- */
dl#topics{
	position:relative;
	width:calc( 100% - 380px );
	float:left;
	margin-bottom:70px;
	padding:0 0 10px;
	letter-spacing:-0.4em;
	border-bottom:1px #ccc solid;
}
dl#topics::before{
	position:absolute;
	top:-100px;
	content:url(../../img/tag/topics.png);
}
dl#topics h2{
	margin-bottom:10px;
	letter-spacing:normal;
}
dl#topics h2 span{
	margin-right:10px;
}
dl#topics dt,
dl#topics dd{
	width:12em;
	display:inline-block;
	*display:inline;
	margin:5px 0 0;
	padding:5px 0 0;
	vertical-align:top;
	letter-spacing:normal;
	border-top:1px #ccc dotted;
	zoom:1;
}
dl#topics dt:nth-child(2),
dl#topics dd:nth-child(3){
	border-top:1px #ccc solid;
}
dl#topics dt{
	width:9em;
}
dl#topics dd{
	width:calc( 100% - 9em - 15px );
	padding-left:15px;
	background:url(../img/arr.png) no-repeat left 0.8em;
}
@media screen and (max-width: 990px) {
	dl#topics dt,
	dl#topics dd{
		width:100%;
	}
	dl#topics dd:nth-child(3),
	dl#topics dd{
		margin-top:0;
		padding-top:0;
		border-top:none;
		background:url(../img/arr.png) no-repeat left 0.4em;
	}
}

@media screen and (max-width: 760px) {
	dl#topics{
		width:48%;
	}
	dl#topics h2 span{
		display:block;
		margin-right:0;
	}
}
@media screen and (max-width:510px) {
	dl#topics{
		width:100%;
		float:none;
		margin-bottom:30px;
	}
}


/* sub
---------------------------------------- */
ul#sub{
	width:350px;
	float:right;
	margin-bottom:115px;
}
ul#sub li{
	margin:15px 0 0;
	border:1px #ccc solid;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
ul#sub li a{
	display:block;
	padding:20px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background-position:right center;
	background-repeat:no-repeat;
	background-size:auto 100%;
}
ul#sub li:nth-child(1) a{background-image:url(../../img/btn_company.png);}
ul#sub li:nth-child(2) a{background-image:url(../../img/btn_access.png);}
ul#sub li:nth-child(3) a{background-image:url(../../img/btn_iso.png);}

ul#sub li a:hover{
    opacity:0.50!important;
    filter: alpha(opacity=50);
	transition: all 0.3s linear;
	transition: all 0.3s ease;
	background-size:auto 120%;
}

@media screen and (max-width: 760px) {
	ul#sub{
		width:48%;
	}
}
@media screen and (max-width:510px) {
	ul#sub{
		width:100%;
		float:none;
		margin-bottom:85px;
	}
}



/* business_info
---------------------------------------- */
ul#business_info{
	clear:both;
	position:relative;
	margin-bottom:70px;
	padding: 0;
}
ul#business_info::before{
	position:absolute;
	top:-100px;
	content:url(../../img/tag/business.png);
}
ul#business_info h2{
	margin-bottom:15px;
	letter-spacing:normal;
}
ul#business_info h2 span{
	margin-right:10px;
}
ul#business_info li{
	width:calc(33.33% - 20px);
	margin:0 30px 10px 0;
}
ul#business_info li:nth-child(3n+1){
	margin:0 0 10px 0;
}
ul#business_info li span{
	display:block;
	margin-bottom:5px;
	padding:30px 0;
	text-align:center;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	transition: all 0.3s ease;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:105% auto;
}
ul#business_info li:nth-child(2) span{background-image:url(../../img/img_toy.png);}
ul#business_info li:nth-child(3) span{background-image:url(../../img/img_molding.png);}
ul#business_info li:nth-child(4) span{background-image:url(../../img/img_qualitycheck.png);}

ul#business_info li span:hover{
    opacity:0.50!important;
    filter: alpha(opacity=50);
	background-size:115% auto;
}
@media screen and (min-width: 639px) {
	ul#business_info h2 span img.pc{
		display:inline!important;
	}
}
@media screen and (max-width: 990px) {
	ul#business_info li{
		width:calc(50% - 15px);
		margin:0 30px 10px 0;
	}
	ul#business_info li:nth-child(3n+1){
		margin:0 30px 10px 0;
	}
	ul#business_info li:nth-child(2n+1){
		margin:0 0 10px;
	}
}
@media screen and (max-width: 640px) {
	ul#business_info h2 span{
		margin-right:0;
	}
}

/* recruit
---------------------------------------- */
div#recruit{
	clear:both;
	position:relative;
	margin-bottom:70px;
	padding: 30px 0;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background:url(../img/bk_grad.png) repeat-y left top 0,url(../../img/bk_recuruit.png) no-repeat right -200px bottom 0;
	background-size:70% auto,auto 100%;
}
div#recruit::before{
	position:absolute;
	top:-70px;
	content:url(../../img/tag/recruit.png);
}
div#recruit h2{
	margin-bottom:10px;
	letter-spacing:normal;
}
div#recruit h2 span{
	margin-right:10px;
}
div#recruit h3,
div#recruit p{
	width:60%;
}
div#recruit h3{
	margin:15px 0 10px;
	font-size:20px;
	text-align:left;
	line-height:1.5;
}
div#recruit p a.btn{
	margin:30px auto 0;
}
@media screen and (min-width: 639px) {
	div#recruit h2 span img.pc{
		display:inline!important;
	}
}
@media screen and (max-width: 990px) {
	div#recruit{
		padding: 30px 0 35%;
		background:url(../../img/bk_recuruit_tb.png) no-repeat center bottom 0;
		background-size:100% auto;
	}
	div#recruit h3,
	div#recruit p{
		width:100%;
	}
}
@media screen and (max-width: 760px) {
	div#recruit h2 span{
		display:block;
		margin-right:0;
		
	}
}

@media screen and (max-width: 510px) {
	div#recruit{
		margin-bottom:30px;
		padding: 30px 0 40%;
		background:url(../../img/bk_recuruit_sp.png) no-repeat center bottom 0;
	}
	div#recruit h3,
	div#recruit p{
		width:100%;
	}
}