@charset "UTF-8";

/*block_news_ticker*/
.block_news_ticker{
	width: 55%;
	min-width: 833px;
	padding: 20px 5%;
	margin-left: 45%;
	margin-top: -153px;
	position: relative;
	z-index: 3;
}
.block_news_ticker:after{
	content:"";
	display: block;
	width: 105%;
	height: 150px;
	transform: skewX(-30deg);
	background-color: #fff;
	border-top: solid 3px #ff7418;
	border-left: solid 3px #ff7418;
	position: absolute;
	z-index: -1;
	top:0;right:-50px;
}
.block_news_title_area{
	width: 155px;
	float: left;
}
.newsTicker{
	width: calc(100% - 155px);
	height: 120px;
	padding-left: 20px;
	float: left;
}
.news_date{
	display: inline-block;
	margin-right: 20px;
}
.news_category{
	display: inline-block;
	font-size: 13px;
	text-align: center;
	color: #fff;
	width: 130px;
	background-color: #000;
	border-radius: 10px;
}
.news_title a{
	display: block;
	margin: 10px 0 0;
}
.news_title a:hover{
	color: #ff7418;
}
@media screen and (min-width:0px) and (max-width:767px){

	/*block_news_ticker*/
	.block_news_ticker{
		width: 100%;
		min-width: unset;
		padding: 25px 5% 0;
		margin-left:0;
		margin-top: -153px;
		background-color: #fff;
		border-top: solid 3px #ff7418;
		position: relative;
		z-index: 3;
	}
	.block_news_ticker:after{
		content:none;
	}
	.block_news_title_area{
		width: 100%;
		float: none;
	}
	.newsTicker{
		width: 100%;
		height: 120px;
		padding-left:0;
		float: none;
		margin-top: 25px;
	}
	.newsTicker article{
		padding: 10px 0;
		border-top:solid 1px #cccccc;
		border-bottom:solid 1px #cccccc;
	}
	.news_date{
		display: inline-block;
		margin-right: 20px;
	}
	.news_category{
		display: inline-block;
		font-size: 13px;
		text-align: center;
		color: #fff;
		width: 130px;
		background-color: #000;
		border-radius: 10px;
	}
	.news_title a{
		display: block;
		margin: 10px 0 0;
	}
	.news_title a:hover{
		color: #ff7418;
	}
}

/*---block_solutions---*/
.block_solutions{
	width: 100%;
	min-width: 1300px;
	margin-top: 110px;
	padding: 100px 5% 50px;
	border-top: solid 3px #ff7418;
	position: relative;
	z-index: 2;
}
.block_solutions_title_area{
	width: 238px;
	float: left;
}
.solutions_area{
	width: calc(100% - 238px);
	padding-left: 20px;
	float: left;
}
.solutions_area ul li{
	float: left;
	padding: 0 2.5%;
}
.solution_photo{
	width: 100%;
	height: 0;
	padding-bottom: 80%;
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}
.solution_photo img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:all ease 0.5s;
	-ms-transition:all ease 0.5s;
	-moz-transition:all ease 0.5s;
	-webkit-transition:all ease 0.5s;
}
.solution_type{
	width: 150px;
	padding: 5px 0;
	text-align:center; 
	background-color: #fff;
	border-radius: 15px;
	position: absolute;
	top:10px;left:10px;
}
.solution_photo:hover > img{
	transform: scale(1.2);
}
.solution_text:hover{
	color: #ff7418;
}

@media screen and (min-width:0px) and (max-width:767px){
	.block_solutions{
		width: 100%;
		min-width:unset;
		margin-top:0;
		padding: 50px 5% 25px;
		border-top:none;
		position: relative;
		z-index: 2;
	}
	.block_solutions_title_area{
		width:100%;
		float:none;
	}
	.solutions_area{
		width:100%;
		padding-left:0;
		float:none;
		margin-top: 25px;
	}
	.solutions_area ul li{
		float:none;
		padding:0;
		margin-bottom: 25px;
	}
	.solution_photo{
		width: 100%;
		height: 0;
		padding-bottom: 80%;
		margin-bottom: 15px;
		position: relative;
		overflow: hidden;
	}
	.solution_photo img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition:all ease 0.5s;
		-ms-transition:all ease 0.5s;
		-moz-transition:all ease 0.5s;
		-webkit-transition:all ease 0.5s;
	}
	.solution_type{
		width: 150px;
		padding: 5px 0;
		text-align:center; 
		background-color: #fff;
		border-radius: 15px;
		position: absolute;
		top:10px;left:10px;
	}
	.solution_photo:hover > img{
		transform: scale(1.2);
	}
	.solution_text:hover{
		color: #ff7418;
	}
}

/*---block_products---*/
.block_products{
	width: 100%;
	min-width: 1300px;
	padding: 100px 5%;
	background-image:url("../img/home/bg_dot.png");
}
/*slider*/
.slider-wrap{
	margin-top: 50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}
.slider-view{
    width:1000px;
    overflow:hidden;
}
.slider{
    display:flex;
    gap:50px;/*slide margin*/
    will-change:transform;
}
.slide{
    width:300px;
    flex-shrink:0;
	background-image: url("../img/home/bg_slide.png");
	background-repeat: no-repeat;
	background-position: bottom 100px center;
	background-size: contain;
}
.slide img{
    width:100%;
	padding-bottom: 30px;
    display:block;
    opacity:.5;
    transform:scale(.82);
	transform-origin:center bottom;
    transition:
        transform .6s cubic-bezier(.22,.61,.36,1),
        opacity .4s ease;
    will-change:transform;
    backface-visibility:hidden;
}
.slide.active img{
    opacity:1;
    transform:scale(1);
}
.slide_text{
	text-align: center;
	margin-top: 50px;
}
.slide_text p:nth-child(2){
	font-size: 20px;
	margin-top: 10px;
}
.slide:hover{
	color: #ff7418;
}
.prev,
.next{
    border:none;
    background:none;
    padding:0;
	cursor: pointer;
}
/*slider ここまで*/
.product_link_btn{
	margin: 50px auto 0;
}

@media screen and (min-width:0px) and (max-width:767px){
	.block_products{
		width: 100%;
		min-width:unset;
		padding: 50px 5%;
		background-image:url("../img/home/bg_dot.png");
	}
	.slider-wrap{
		margin-top:25px;
		gap:10px;
	}
	.slider-view{
		width:calc(100% - 80px);
		overflow:hidden;
	}
	.slider{
		display:flex;
		gap:20px;
	}
	.slide{
        width:calc(100vw - 120px);
        flex-shrink:0;
	}
	.slide img{
		width:100%;
		padding-bottom:30px;
	}
	.prev img,
	.next img{
		width:30px;
		height:auto;
	}	/*slider ここまで*/
	.product_link_btn{
		margin: 50px auto 0;
	}
}

/*---block_strength---*/
.block_strength{
	width: 100%;
	min-width: 1300px;
	padding: 100px 5% 0;
	background-image: url("../img/home/bg_strength_01.png"),url("../img/home/bg_strength_02.png");
	background-repeat: no-repeat,no-repeat;
	background-position: top 200px right -150px,top 350px left -150px;
	background-attachment:fixed,fixed;
	animation:bgOrbit 60s linear infinite
}
@keyframes bgOrbit{
    0%{
        background-position:
        top 120px right -120px,
        top 620px left -260px;
        background-size:
        520px auto,
        420px auto;
    }
    12%{
        background-position:
        top 40px right 220px,
        top 720px left 60px;
        background-size:
        700px auto,
        320px auto;
    }
    25%{
        background-position:
        top 160px right 80px,
        top 520px left 320px;
        background-size:
        460px auto,
        760px auto;
    }
    37%{
        background-position:
        top 420px right -180px,
        top 260px left 420px;
        background-size:
        340px auto,
        520px auto;
    }
    50%{
        background-position:
        top 680px right 120px,
        top 120px left 220px;
        background-size:
        680px auto,
        420px auto;
    }
    62%{
        background-position:
        top 520px right 420px,
        top 40px left -120px;
        background-size:
        360px auto,
        680px auto;
    }
    75%{
        background-position:
        top 240px right 320px,
        top 260px left -260px;
        background-size:
        760px auto,
        360px auto;
    }
    87%{
        background-position:
        top 60px right 40px,
        top 520px left -120px;
        background-size:
        420px auto,
        720px auto;
    }
    100%{
        background-position:
        top 120px right -120px,
        top 620px left -260px;
        background-size:
        520px auto,
        420px auto;
    }
}
.copy_message{
	position: relative;
	z-index: 2;
}
.copy_message h2{
	font-size:36px;
}
.copy_message p{
	margin: 30px 0;
}
/*scroll-indicator*/
.scroll-indicator{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
	margin: 20px auto;
}
	/* 縦ライン */
.scroll-line{
    position:relative;
    width:2px;
    height:120px;
    background:#ccc;
    overflow:hidden;
}
	/* 動くライン */
.scroll-line span{
    position:absolute;
    top:-40px;
    left:0;
    width:2px;
    height:40px;
    background:#000;
    animation:scrollLine 2s ease-in-out infinite;
}
	/* SCROLL文字 */
.scroll-indicator p{
    margin:0;
    color:#000;
    font-size:10px;
    letter-spacing:.3em;
    writing-mode:vertical-rl;
}
	/* アニメーション */
@keyframes scrollLine{
    0%{
        top:-40px;
        opacity:0;
    }
    20%{
        opacity:1;
    }
    80%{
        opacity:1;
    }
    100%{
        top:120px;
        opacity:0;
    }
}
/*scroll-indicatorここまで*/
.strength_content{
	min-width: 100%;
	padding:100px 0 0;
}
.block_title_strength{
	width: 480px;
	margin: 0 auto 100px;
}
.strengh_content_inner{
	width: 100%;
	height:0;
	padding-bottom:600px;
	overflow: hidden;
	position: relative;
}
.strengh_inner_text{
	width: 45%;
	height: 0;
	margin-top: 50px;
	padding: 25px 50px 475px;
	background-image: url("../img/home/bg_dot.png");
	border: 2px solid #cccccc;
	position: relative;
	z-index: 2;
}
.inner_title{
	width: 100%;
	padding: 30px 50px;
	border-radius:15px;
	background-color: #fff;
	margin-bottom: 15px;
}
.inner_title h3{
	font-size: 30px;
	position: relative;
}
.inner_title h3:after{
	content:"";
	display: block;
	background-color: #ff7418;
	width: 30px;
	height: 1px;
	position: absolute;
	bottom: -15px;left:45%;
}
.inner_title span{
	display: block;
	margin-top: 35px;
	font-size: 18px;
	text-align: center;
}
.inner_text{
	margin-bottom: 80px;
}
.strength_link_btn{
	position: absolute;
	bottom: 30px;left:50%;
	margin-left: -120px;
}
.inner_movie{
	width: auto;
	height: 600px;
	overflow: hidden;
	position: absolute;
	top:0;right:0;
}
.inner_movie_2{ /*left position*/
	width: auto;
	height: 600px;
	position: absolute;
	top:0;left:0;
}
.inner_movie video{
	display: block;
	height: auto;
	width: 100%;
}
#strength_products_photo{
	position: absolute;
	top:150px;right: 15%;
	display: block;
	width: 45%;
	height: auto;
    opacity:0;
    visibility:hidden;
	transition:all ease 1s;
	-ms-transition:all ease 1s;
	-moz-transition:all ease 1s;
	-webkit-transition:all ease 1s;
}
#trigger_photo_view:hover > #strength_products_photo{
    opacity:1;
    visibility:visible;
	position: absolute;
	top:150px;right: 5%;
}

@media screen and (min-width:0px) and (max-width:767px){
	.block_strength{
		width: 100%;
		min-width:unset;
		padding: 50px 5% 0;
		background-image: url("../img/home/bg_strength_01.png"),url("../img/home/bg_strength_02.png");
		background-repeat: no-repeat,no-repeat;
		background-position: top 200px right -150px,top 350px left -150px;
		background-attachment:fixed,fixed;
		animation:bgOrbit 60s linear infinite
	}
	.copy_message{
		position: relative;
		z-index: 2;
	}
	.copy_message h2{
		font-size:30px;
	}
	.copy_message p{
		margin: 30px 0;
	}
	.company_link_btn{
		margin: 0 auto 25px;
	}
	.factoryOverview{
		width: 100%;
		margin: 25px auto;
	}
	.factoryOverview img{
		width: 100%;
		height: auto;
	}
	/*scroll-indicator*/
	.scroll-indicator{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:15px;
		margin: 20px auto;
	}
		/* 縦ライン */
	.scroll-line{
		position:relative;
		width:2px;
		height:60px;
		background:#ccc;
		overflow:hidden;
	}
		/* 動くライン */
	.scroll-line span{
		position:absolute;
		top:-40px;
		left:0;
		width:2px;
		height:40px;
		background:#000;
		animation:scrollLine 2s ease-in-out infinite;
	}
		/* SCROLL文字 */
	.scroll-indicator p{
		margin:0;
		color:#000;
		font-size:10px;
		letter-spacing:.3em;
		writing-mode:vertical-rl;
	}
	/*scroll-indicatorここまで*/
	.strength_content{
		width: 100%;
		min-width: unset;
		padding:0;
	}
	.block_title_strength{
		width: 100%;
		margin: 0 auto 50px;
	}
	.strengh_content_inner{
		width: 100%;
		height:auto;
		padding-bottom:0;
		overflow: hidden;
		position: static;
	}
	.strengh_inner_text{
		width: 100%;
		height: auto;
		margin-top:0;
		padding: 20px;
		background-image: url("../img/home/bg_dot.png");
		border: 2px solid #cccccc;
		position: static;
		z-index: 2;
	}
	.inner_title{
		width: 100%;
		padding: 20px;
		border-radius:15px;
		background-color: #fff;
		margin-bottom: 15px;
	}
	.inner_title h3{
		font-size: 26px;
		position: relative;
	}
	.inner_title h3:after{
		content:"";
		display: block;
		background-color: #ff7418;
		width: 30px;
		height: 1px;
		position: absolute;
		bottom: -15px;left:45%;
	}
	.inner_title span{
		display: block;
		margin-top: 35px;
		font-size: 14px;
		text-align: center;
	}
	.inner_text{
		margin-bottom: 30px;
	}
	.strength_link_btn{
		position:static;
		margin:25px auto;
	}
	.inner_movie{
		width: 100%;
		height: auto;
		overflow: hidden;
		position:static;
	}
	.inner_movie_2{ /*left position*/
		width: 100%;
		height: auto;
		position: static;
	}
	.inner_movie video{
		display: block;
		width: 100%;
		height: auto;
	}
	.inner_movie_2 video{
		display: block;
		width: 100%;
		height: auto;
	}
	#strength_products_photo{
		display: none;
	}
}

/*---block_news---*/
.block_news{
	min-width: 1300px;
	padding: 100px 5%;
	background-image: url("../img/home/bg_strength_01.png"),url("../img/home/bg_strength_02.png");
	background-repeat: no-repeat,no-repeat;
	background-position: top 200px right -150px,top 350px left -150px;
	background-attachment:fixed,fixed;
	animation:bgFloat 40s ease-in-out infinite;
}
@keyframes bgFloat{
   0%{
        background-position:
        top 200px right -150px,
        top 350px left -150px;
        background-size:
        500px auto,
        420px auto;
    }
    20%{
        background-position:
        top 280px right -80px,
        top 260px left -240px;
        background-size:
        650px auto,
        320px auto;
    }
    40%{
        background-position:
        top 120px right -240px,
        top 460px left -60px;
        background-size:
        420px auto,
        520px auto;
    }
    60%{
        background-position:
        top 320px right -130px,
        top 300px left -280px;
        background-size:
        720px auto,
        360px auto;
    }
    80%{
        background-position:
        top 170px right -40px,
        top 520px left -170px;
        background-size:
        560px auto,
        620px auto;
    }
    100%{
        background-position:
        top 200px right -150px,
        top 350px left -150px;
        background-size:
        500px auto,
        420px auto;
    }
}

.block_title_news{
	width:330px;
	margin: 0 auto 50px;
}
.news_area{
	width: 70%;
	min-width: 800px;
	margin: 0 auto;
}
.news_area article{
	padding: 10px 5% 20px;
	border-bottom: solid 2px #b5b5b5;
	position: relative;
}
.news_area article img{
	position: absolute;
	top:50%;right: 10px;
}
.news_link_btn{
	margin: 50px auto 0;
}

@media screen and (min-width:0px) and (max-width:767px){
	.block_news{
		width: 100%;
		min-width:unset;
		padding: 50px 5%;
		background-image: url("../img/home/bg_strength_01.png");
		background-repeat: no-repeat;
		background-position: top 200px right -150px;
		background-attachment:fixed;
		animation:bgFloat 40s ease-in-out infinite;
	}
	.block_title_news{
		width:100%;
		margin: 0 auto 25px;
	}
	.news_area{
		width: 100%;
		min-width:unset;
		margin: 0 auto;
	}
	.news_area article{
		padding: 10px 5% 20px;
		border-bottom: solid 2px #b5b5b5;
		position: relative;
	}
	.news_area article img{
		position: absolute;
		top:50%;right: 10px;
	}
	.news_link_btn{
		margin: 50px auto 0;
	}
}

/*---block_contactUs---*/
.block_contactUs{
	width: 90%;
	min-width: 1300px;
	margin: 40px auto 0;
	padding-bottom: 450px;
	background-image: url("../img/home/bg_jasi_entrance.png");
	background-repeat: no-repeat;
	background-position: bottom center;
}
.block_title_contactUs{
	width: 256px;
	margin: 0 auto;
}
.block_contactUs_wrap{
	margin-top: -110px;
	min-width: 1000px;
}
.area_request{
	padding: 150px 0 30px;
	text-align: center;
	background-color: #fff;
	outline: solid 5px #ffebde;
	outline-offset: -5px;
}
.area_contact{
	padding: 150px 0 30px;
	text-align: center;
	background-color: #ffebde;
}
.btn_black{
	margin: 20px auto 0;
}

@media screen and (min-width:0px) and (max-width:767px){
	.block_contactUs{
		width: 100%;
		min-width:unset;
		margin: 50px auto 0;
		padding-bottom: 130px;
		background-image: url("../img/home/bg_jasi_entrance.png");
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: contain;
	}
	.block_contactUs .block_title_contactUs{
		width: 256px;
		margin: 0 auto;
	}
	.block_contactUs .block_contactUs_wrap{
		margin-top:-125px;
		min-width: unset;
	}
	.block_contactUs .block_contactUs_wrap div p{
		font-size: 14px;
	}
	.block_contactUs .area_request{
		padding: 150px 0 30px;
		text-align: center;
		background-color: #fff;
		outline: solid 5px #ffebde;
		outline-offset: -5px;
	}
	.block_contactUs .area_contact{
		padding: 10px 0 30px;
		text-align: center;
		background-color: #ffebde;
	}
	.block_contactUs .btn_black{
		margin: 20px auto 0;
	}
}

/*---block_jasi---*/
.block_jasi{
	width: 100%;
	min-width: 1300px;
	margin-top: -100px;
	position: relative;
	z-index: 2;
	padding-bottom:12.5%; 
	background-image: url("../img/home/bg_footer_factory.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
}
.block_jasi_wrap{
	width: 90%;
	margin: 0 auto;
}
.block_jasi p:nth-child(1){
	background-color: #fff;
	padding: 50px 12.5%;
}
.block_jasi img{
	display: block;
	margin: 30px auto 10px;
}

@media screen and (min-width:0px) and (max-width:767px){
	.block_jasi{
		width: 100%;
		min-width:unset;
		margin-top: 0;
		position: relative;
		z-index: 2;
		padding-bottom:30%; 
		background-image: url("../img/home/bg_footer_factory.png");
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: contain;
	}
	.block_jasi_wrap{
		width: 96%;
		margin: 0 auto;
	}
	.block_jasi p:nth-child(1){
		background-color: #fff;
		padding: 50px 5% 0;
	}
	.block_jasi img{
		display: block;
		margin: 25px auto 10px;
	}
}