@charset "utf-8";
/* Copyright 2019 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

パソコン、スマートフォン（iPhone,Android) 共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ------------------------------------------------------------

トップページ

------------------------------------------------------------ */

/* メインビジュアル
---------------------------------------------- */
@keyframes anime_mv01{
	0%{transform:scale(1.1) rotate(0.001deg);}
	100%{transform:scale(1.001) rotate(0.001deg);}
}
@keyframes anime_mv02{
	0%{transform:scale(1.1) translate3d(0,-2.5%,0) rotate(0.001deg);}
	100%{transform:scale(1.1) translate3d(0,2.5%,0) rotate(0.001deg);}
}
@keyframes anime_mv03{
	0%{transform:scale(1.1) translate3d(2.5%,0,0) rotate(0.001deg);}
	100%{transform:scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);}
}


@media print, screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */

	/* common.css上書き
	---------------------------------------------- */
	#header{
		position: absolute;
		top: 20px;
		left: 0;
		z-index: 2;
	}

	.nav_global01 ul li a{color: #FFF;}
	
	.nav_global01 ul li a .kana{font-weight: normal;}
	
	.nav_header01 ul li a span{background: #FFF;}
	
	.nav_header01 ul li a p{color: #FFF;}

	/* メインビジュアル
	---------------------------------------------- */
	#main{
		position: relative;
		height: calc(100vh - 20px);
		min-height: 600px;
		background: #000;
	}

	/*--グラデーション--*/
	#main::before{
		content: "";
		display: block;
		width: 100%;
		height: 300px;
		background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 1;
	}
	
	.slick-slider .slick-track,
	.slick-slider .slick-list{height: 100%;}
	
	.slide_main{
		background: url("../img/home/img_slide01.jpg") no-repeat center;/*--初期画像--*/
		background-size: cover;
		height: 100%;
	}

	.slide_main li.slide01,
	.slide_main li.slide02,
	.slide_main li.slide03,
	.slide_main li.slide04,
	.slide_main li.slide05,
	.slide_main li.slide06{
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	
	.slide_main li.slide01{background-image: url(/img/home/img_slide01.jpg);}

	.slide_main li.slide02{
		background-image: url(/img/home/img_slide02.jpg);
		-webkit-transform: scale(1.001) rotate(0.001deg);
		transform:scale(1.001) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
	}

	.slide_main li.slide03{
		background-image: url(/img/home/img_slide03.jpg);
		-webkit-transform: scale(1.1) translate3d(0,2.5%,0) rotate(0.001deg);
		transform: scale(1.1) translate3d(0,2.5%,0) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
	}
	
	.slide_main li.slide04{
		background-image: url(/img/home/img_slide04.jpg);
		-webkit-transform:scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);
		transform:scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
	}

	.slide_main li.slide05{
		background-image: url(/img/home/img_slide05.jpg);
		-webkit-transform: scale(1.001) rotate(0.001deg);
		transform:scale(1.001) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
	}

	.slide_main li.slide06{
		background-image: url(/img/home/img_slide06.jpg);
		-webkit-transform:scale(1.1) translate3d(2.5%,0,0) rotate(0.001deg);
		transform:scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
	}

	.slide_main.init li.slick-current.slide01{
		-webkit-animation:anime_mv01 8s linear 0s forwards;
		animation:anime_mv01 8s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide01.changed{
		-webkit-animation:anime_mv01 9s linear 0s forwards;
		animation:anime_mv01 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide02{
		-webkit-animation:anime_mv01 9s linear 0s forwards;
		animation:anime_mv01 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide03{
		-webkit-animation:anime_mv02 9s linear 0s forwards;
		animation:anime_mv02 9s linear 0s forwards;
	}
	
	.slide_main.init li.slick-current.slide04{
		-webkit-animation:anime_mv03 9s linear 0s forwards;
		animation:anime_mv03 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide05{
		-webkit-animation:anime_mv01 9s linear 0s forwards;
		animation:anime_mv01 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide06{
		-webkit-animation:anime_mv03 9s linear 0s forwards;
		animation:anime_mv03 9s linear 0s forwards;
	}

	.last_text{
		width: 218px;
		position: absolute;
		right: 30px;
		bottom: 30px;
		opacity: 0;
		transition: opacity .5s;
	}
	.last_text.show{
		opacity:1;
	}
	.last_text svg{
		width: 100%;
	}

/*	.txt_main01{
		width: 100%;
		height: 100%;
		padding-top: 70px;
		position: absolute;
		top: 0;
		left: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.txt_main01 img{
		max-height: 665px;
		min-height: 447px;
		height: 72vh;
	}*/

	.txt_main02{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.txt_main02 img{
		max-width: 320px;
		min-height: 112px;
	}

	.blur{
		animation-name:blurAnime;
		animation-duration:2.5s;
		animation-fill-mode:forwards;
	  }
	  
	  @keyframes blurAnime{
		from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
		}
	  
		to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
		}
	  }
	   
	  .blurTrigger{
		  opacity: 0;
	  }

	/* Products
	---------------------------------------------- */
	#products{
		width: 1100px;
		padding-top: 100px;
		margin: 0 auto 120px;
	}

	#products h2{
		text-align: center;
		margin-bottom: 50px;
	}

	#products h2 img{width: 190px;}

	/*--common.css上書き--*/
	.nav_products01 ul li{width: 33.33%;}
	
	/* News
	---------------------------------------------- */
	#news{
		width: 1100px;
		margin: 0 auto 140px;
	}

	#news h2{
		text-align: center;
		margin-bottom: 50px;
	}

	#news h2 img{width: 438px;}

	.news_inner{margin-bottom: 50px;}

	#news .btn_type01{
		width: 140px;
		margin: 0 auto;
	}
	
	/* ナビ
	---------------------------------------------- */
	.nav_home01 ul{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		background: #808080;
	}

	.nav_home01 ul li{
		position: relative;
		width: 50%;
		padding-top: 20.5%;
		overflow: hidden;
	}

	.nav_home01 ul li:nth-child(3)::before{
		content: "";
		display: block;
		background: url(../img/home/img_home05.jpg) no-repeat center;
		background-size: cover;
		width: 31.25%;
		padding-top: 20.84%;
		position: absolute;
		bottom: 40px;
		right: 40px;
		z-index: 10;
	}

	.nav_home01 ul li a{display: block;}

	.nav_home01 ul li a .image{
		background-size: cover;
		width: 100%;
		height: 100%;
		transition: transform 5s;
		-webkit-transform: scale(1.001) rotate(0.001deg);
		transform: scale(1.001) rotate(0.001deg);
		position: absolute;
		top: 0;
		left: 0;
	}

	.nav_home01 ul li a:hover .image{
		-webkit-transform: scale(1.1) rotate(0.001deg);
		transform: scale(1.1) rotate(0.001deg);
	}

	.nav_home01 ul li:nth-child(1) a .image{background-image:url(/img/home/img_home01.jpg);}
	
	.nav_home01 ul li:nth-child(2) a .image{background-image:url(/img/home/img_home02.jpg);}
	
	.nav_home01 ul li:nth-child(3) a .image{background-image:url(/img/home/img_home03.jpg);}
	
	.nav_home01 ul li:nth-child(4) a .image{background-image:url(/img/home/img_home04.jpg);}

	.nav_home01 ul li a .label{
		position: absolute;
		top: 80px;
		left: 50px;
	}

	.nav_home01 ul li:nth-child(1) a .label{width: 275px;}
	.nav_home01 ul li:nth-child(2) a .label{width: 125px;}
	.nav_home01 ul li:nth-child(3) a .label{width: 205px;}
	.nav_home01 ul li:nth-child(4) a .label{width: 217px;}

	.nav_home01 ul li a .label p{color: #FFF;}

	.nav_home01 ul li a .label p:first-child{margin-bottom: 20px;}

	.nav_home01 ul li a .label img{width: 100%;}

	.nav_home01 ul li a .label::after{
		content: "";
		width: 33px;
		height: 16px;
		background: url(/img/ico_arrow01.png) no-repeat;
		background-size: contain;
		transition: transform .3s;
		position: absolute;
		top: 104px;
		left: 0;
	}

	.nav_home01 ul li a:hover .label::after{
		-webkit-transform: translate3d(10px,0,0);
		transform: translate3d(10px,0,0);
	}


}/*--@media--*/


@media screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */

	/* common.css上書き
	---------------------------------------------- */
	#header{
		position: absolute;
		top: 37px;
		left: 0;
		z-index: 100;
		padding: 0 0 0 15px;
	}
	
	/* メインビジュアル
	---------------------------------------------- */
	#main{
		width: 100%;
		height: 100vh;
	}

	.slick-slider .slick-track,
	.slick-slider .slick-list{height: 100%;}
	
	.slide_main{
		height: 100%;
		background: url(/img/home/img_slide01.jpg) no-repeat center;
		background-size: cover;
	}

	.slide_main li.slide01,
	.slide_main li.slide02,
	.slide_main li.slide03,
	.slide_main li.slide04,
	.slide_main li.slide05,
	.slide_main li.slide06{
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.slide_main li.slide01{background-image: url(/img/home/img_slide01.jpg);}

	.slide_main li.slide02{
		background-image: url(/img/home/img_slide02.jpg);
		-webkit-transform: scale(1.1) translate3d(0,2.5%,0) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
		transform: scale(1.1) translate3d(0,2.5%,0) rotate(0.001deg);
	}

	.slide_main li.slide03{
		background-image: url(/img/home/img_slide03.jpg);
		-webkit-transform: scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
		transform: scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);
	}
	
	.slide_main li.slide04{
		background-image: url(/img/home/img_slide04.jpg);
		-webkit-transform:scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
		transform:scale(1.1) translate3d(-2.5%,0,0) rotate(0.001deg);
	}

	.slide_main li.slide05{
		background-image: url(/img/home/img_slide05.jpg);
		-webkit-transform: scale(1.001) rotate(0.001deg);
		transform:scale(1.001) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
	}

	.slide_main li.slide06{
		background-image: url(/img/home/img_slide06.jpg);
		-webkit-transform:scale(1.1) translate3d(2.5%,0,0) rotate(0.001deg);
		transform:scale(1.1) translate3d(2.5%,0,0) rotate(0.001deg);/*--アニメーション完了時の指定を維持--*/
	}

	.slide_main.init li.slick-current.slide01{
		-webkit-animation:anime_mv01 8s linear 0s forwards;
		animation:anime_mv01 8s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide01.changed{
		-webkit-animation:anime_mv01 9s linear 0s forwards;
		animation:anime_mv01 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide02{
		-webkit-animation:anime_mv02 9s linear 0s forwards;
		animation:anime_mv02 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide03{
		-webkit-animation:anime_mv03 9s linear 0s forwards;
		animation:anime_mv03 9s linear 0s forwards;
	}
	
	.slide_main.init li.slick-current.slide04{
		-webkit-animation:anime_mv03 9s linear 0s forwards;
		animation:anime_mv03 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide04{
		-webkit-animation:anime_mv03 9s linear 0s forwards;
		animation:anime_mv03 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide05{
		-webkit-animation:anime_mv01 9s linear 0s forwards;
		animation:anime_mv01 9s linear 0s forwards;
	}

	.slide_main.init li.slick-current.slide06{
		-webkit-animation:anime_mv03 9s linear 0s forwards;
		animation:anime_mv03 9s linear 0s forwards;
	}

	.last_text{
		width: 140px;
		position: absolute;
		right: 20px;
		bottom: 20px;
		opacity: 0;
		transition: opacity .5s;
	}
	.last_text img{width: 100%;}
	.last_text.show{
		opacity:1;
	}
	.last_text svg{
		width: 100%;
	}

/*	.txt_main01{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		display:-webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.txt_main01 img{width: calc(100% - 20px);}*/

	.txt_main02{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		display:-webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.txt_main02 img{width: 200px;}

	.blur{
		animation-name:blurAnime;
		animation-duration:2.5s;
		animation-fill-mode:forwards;
	  }
	  
	  @keyframes blurAnime{
		from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
		}
	  
		to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
		}
	  }
	   
	  .blurTrigger{
		  opacity: 0;
	  }

	/* Products
	---------------------------------------------- */
	#products{
		padding-top: 80px;
		margin-bottom: 80px;
	}

	#products h2{
		text-align: center;
		margin-bottom: 35px;
	}

	#products h2 img{width: 36.27%;}

	/* News
	---------------------------------------------- */
	#news{margin-bottom: 80px;}

	#news h2{
		text-align: center;
		margin-bottom: 35px;
	}

	#news h2 img{width: 83.6%;}

	.news_inner{
		padding: 0 20px;
		margin-bottom: 40px;
	}
	
	#news .btn_type01{
		width: 140px;
		margin: 0 auto;
	}

	/* ナビ
	---------------------------------------------- */
	.nav_home01 ul{background: #808080;}

	.nav_home01 ul li{
		position: relative;
		padding-top: 41.06%;
	}

	.nav_home01 ul li:nth-child(3)::before{
		content: "";
		background: url(../img/home/img_home05.jpg) no-repeat center;
		background-size: cover;
		width: 33.3%;
		padding-top: 22.27%;
		position: absolute;
		bottom: 20px;
		right: 20px;
		z-index: 10;
	}

	.nav_home01 ul li a{display: block;}

	.nav_home01 ul li a .image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.nav_home01 ul li:nth-child(1) a .image{background-image: url(/img/home/img_home01.jpg);}
	.nav_home01 ul li:nth-child(2) a .image{background-image: url(/img/home/img_home02.jpg);}
	.nav_home01 ul li:nth-child(3) a .image{background-image: url(/img/home/img_home03.jpg);}
	.nav_home01 ul li:nth-child(4) a .image{background-image: url(/img/home/img_home04.jpg);}

	.nav_home01 ul li a .label{
		position: absolute;
		top: 22px;
		left: 20px;
	}

	.nav_home01 ul li:nth-child(1) a .label{width: 52.4%;}
	.nav_home01 ul li:nth-child(2) a .label{width: 23.9%;}
	.nav_home01 ul li:nth-child(3) a .label{width: 39.2%;}
	.nav_home01 ul li:nth-child(4) a .label{width: 41.2%;}
	
	.nav_home01 ul li a .label img{width: 100%;}

	.nav_home01 ul li a .label p{
		color: #FFF;
		font-size: 1.2rem;
	}

	.nav_home01 ul li a .label p:first-child{margin-bottom: 10px;}

	.nav_home01 ul li a .label::before{
		content: "";
		width: 33px;
		height: 16px;
		background: url(/img/ico_arrow01.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 18.5vw;
		left: 0;
	}


}/*--@media--*/