@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
/* スクロール連動アニメ */
.scroll-in {
	transition-property: all;
	transition-duration: 0.6s;
	transition-delay: 0s;
	transition-timing-function: ease;
}

.scroll-in.move-tb:not(.passed) {
	transform: translate(0, 30px);
}

.flex-container.half.spe02 .sub-img-container.scroll-in.delay {
	transition-delay: .6s;
}

.flex-container.half.care .right.scroll-in.delay {
	transition-delay: 1s;
}

/* メインビジュアル */
#mainVisual {
	overflow: hidden;
	position: relative;
}

#mainVisual .swiper-slide {
	opacity: 0;
}

#mainVisual .swiper-slide {
	overflow: hidden;
}

#mainVisual .visual figure {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/* transition: 4s linear;
	transform: scale(1); */
}

#mainVisual .swiper-slide-active figure,
#mainVisual .swiper-slide-duplicate-active figure,
#mainVisual .swiper-slide-prev figure {
	animation: zoomOut 10s linear 0s 1 normal both;
	/* transform: scale(1.06); */
}

@keyframes zoomOut {
	0% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}



#mainVisual .visual1 {
	background-image: url(/index/images/main-visual1.jpg);
}

#mainVisual .visual2 {
	background-image: url(/index/images/main-visual2.jpg);
	/* background-position: center 0px !important; */
}

#mainVisual .visual3 {
	background-image: url(/index/images/main-visual3.jpg);
	/* background-position: center 0px !important; */
}

#mainVisual .visual4 {
	background-image: url(/index/images/main-visual4.jpg);
}

#mainVisual .visual5 {
	background-image: url(/index/images/main-visual5.jpg);
	/* background-position: center 0px !important; */
}

#mainVisual .visual6 {
	background-image: url(/index/images/main-visual6.jpg);
}


#mainVisual .visual7 {
	background-image: url(/index/images/main-visual7.jpg);
}



#mainVisual .mv-text {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	font-size: 4.2rem;
	text-align: center;
	letter-spacing: .12em;
	color: #fff;
	-moz-text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 5px rgba(0, 0, 0, .6);
	-webkit-text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 5px rgba(0, 0, 0, .6);
	-ms-text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 5px rgba(0, 0, 0, .6);
	text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 5px rgba(0, 0, 0, .6);
}

#mainVisual .mv-img-text {
	width: 100%;
	height: 100%;
	background-image: url(/index/images/mv-text.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 500px;
}

#mainVisual .mv-text small {
	display: block;
	font-size: 1.8rem;
	font-variant-ligatures: none !important;
}


/* 製品 */

.products-title .anime-text p {
	display: inline-block;
	transform-origin: center center;
	transform: translate3d(0, 20px, 0);
}

.products-title .anime-text span {
	display: block;
	transform: translate(0, 20px);
	opacity: 0;
}

.products-title .anime-text.passed span {
	display: block;
	transform: translate(0, 0px);
	opacity: 1;
}






/* ボタンアニメーション */
.btn-item .btn-bg-icon {
	animation: anim .3s ease-out forwards;
}

.btn-item:hover .btn-bg-icon {
	animation: anim-out .3s ease-out forwards;
}

@keyframes anim-out {
	0% {
		transform: scale(1, 1);
	}

	100% {
		transform: scale(20, 20);
	}
}

@keyframes anim {
	0% {
		transform: scale(20, 20);
	}

	100% {
		transform: scale(1, 1);
	}
}

/* ムービーボタンアニメーション */
.movie-btn-item .movie-btn-bg-icon {
	animation: anim-m .3s ease-out forwards;
}

.movie-btn-item:hover .movie-btn-bg-icon {
	animation: anim-m-out .3s ease-out forwards;
}

@keyframes anim-m-out {
	0% {
		transform: scale(1, 1);
	}

	100% {
		transform: scale(28, 28);
	}
}

@keyframes anim-m {
	0% {
		transform: scale(28, 28);
	}

	100% {
		transform: scale(1, 1);
	}
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {}

/* ====================================
	767px以下専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

	/* メインビジュアル */
	#mainVisual .visual {
		width: 100vw;
		height: calc(100vh - 300px);
		min-height: 500px;

	}

	/* #mainVisual .visual figure {
		background-size: contain;
	}
	 */
	#mainVisual .visual1 {
		background-image: url(/index/images/main-visual1_sp.jpg);
	}

	#mainVisual figure.visual2 {
		background-image: url(/index/images/main-visual2_sp.jpg);
		/* background-position: 86% center; */
	}

	#mainVisual figure.visual3 {
		background-image: url(/index/images/main-visual3_sp.jpg);
		/* background-position: 86% center; */
	}

	#mainVisual .visual4 {
		background-image: url(/index/images/main-visual4_sp.jpg);
	}

	#mainVisual figure.visual5 {
		background-image: url(/index/images/main-visual5_sp.jpg);
		/* background-position: 86% center; */

	}

	#mainVisual figure.visual6 {
		background-image: url(/index/images/main-visual6_sp.jpg);
		/* background-position: 86% center; */

	}

	#mainVisual .visual7 {
		background-image: url(/index/images/main-visual7_sp.jpg);
	}

	#mainVisual .visual8 {
		background-image: url(/index/images/main-visual8_sp.jpg);
	}

	#mainVisual .mv-text {
		font-size: 7.4vw;
		line-height: 1.7;
		-moz-text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), 2px 2px 5px rgba(0, 0, 0, 0.6);
		-webkit-text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), 2px 2px 5px rgba(0, 0, 0, 0.6);
		-ms-text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), 2px 2px 5px rgba(0, 0, 0, 0.6);
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), 2px 2px 5px rgba(0, 0, 0, 0.6);
	}

	#mainVisual .mv-img-text {
		background-size: 84%;
	}

	#mainVisual .mv-text small {
		margin-top: 2rem;
		font-size: 1.2rem;
	}

	.scroll-inner {
		bottom: -15px;
	}


}

/* ====================================
	768px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 768px) {
	#feature .scroll-in.delay4 {
		transition-delay: .4s;
	}

	#feature .scroll-in.delay6 {
		transition-delay: .6s;
	}

	#feature .scroll-in.delay8 {
		transition-delay: .8s;
	}

	#feature .scroll-in.delay10 {
		transition-delay: 1s;
	}
}

/* ====================================
	768px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

	/* #mainVisual .visual {
		width: 100%;
		height: 62vw;
	} */
	#mainVisual .visual {
		width: 100%;
		height: calc(100vh - 210px);
	}


	#voices .scroll-in.tab-delay4 {
		transition-delay: .4s;
	}

	#voices .scroll-in.tab-delay6 {
		transition-delay: .6s;
	}

	#voices .scroll-in.tab-delay8 {
		transition-delay: .8s;
	}

	#voices .scroll-in.tab-delay10 {
		transition-delay: 1s;
	}


	#mainVisual .mv-text {
		font-size: 4rem;
	}

	#mainVisual .mv-img-text {
		background-size: 480px;
	}
}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {

	/* メインビジュアル */
	#mainVisual .visual {
		width: 100%;
		height: calc(100vh - 180px);
	}

	#voices .scroll-in.delay4 {
		transition-delay: .4s;
	}

	#voices .scroll-in.delay6 {
		transition-delay: .6s;
	}

	#voices .scroll-in.delay8 {
		transition-delay: .8s;
	}

	#voices .scroll-in.delay10 {
		transition-delay: 1s;
	}

	#mainVisual .mv-img-text {
		background-size: 500px;
	}
}


/* ====================================
	768px以上1199px以下専用スタイル
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

	/* メインビジュアル */

}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {

	/* メインビジュアル */
	#mainVisual .visual {
		width: 100%;
		height: calc(100vh - 180px);
	}

	#mainVisual .visual figure {
		width: 100%;
		height: 100%;
	}



	#mainVisual .mv-text {
		font-size: 4.2rem;
	}


}

/* ====================================
	1500px以上専用スタイル
===================================== */
@media screen and (min-width: 1500px) {
	#mainVisual .visual {
		width: 100%;
		height: calc(100vh - 180px);
	}
}