@charset "utf-8";

#header,
#header .header_nav {
	background: transparent;
}
#header .header_nav a span {
	position: relative;
	z-index: 1;
}
#container {
	padding-top: 0;
}

.visual .swiper-container {
	height: calc(100vh - 118px);
}
.visual .slide01 {
	background: url("../images/main_slide.png")no-repeat 50% 50% / cover;
}
.visual .slide02 {
	background: url("../images/main_slide-1.png")no-repeat 50% 50% / cover;
}
.visual .slide03 {
	background: url("../images/main_slide-2.png")no-repeat 50% 50% / cover;
}
.visual .slide04 {
	background: url("../images/main_slide-3.png")no-repeat 50% 50% / cover;
}


.visual .main-box {
	position: absolute; 
	top: 40%; 
	left: calc(50% - 800px);
	transform: translateY(-50%); 
	text-align: left; 
	z-index: 2;
}
.visual .main-text-value {
	overflow: hidden; 
	padding-left: 5px;
	font-size: 0;
	line-height: 1.4;
}
.visual .main-text-value span {
	display: inline-block;
	-webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}
.visual .main-text-value span.fadeInUp {
	-webkit-animation-delay: .4s;
    animation-delay: .4s;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.visual .main-text-value span.ml {
	margin-left: 10px;
}
.visual .main-text-value br {
	display: none;
}
.visual .txt01 {
	margin-bottom: 40px;
}
.visual .txt01 span {
	font-size: 30px;
}
.visual .txt02 span {
	font-size: 40px;
}
.visual .txt03 {
	font-weight: bold;
	margin-top: 20px;
}
.visual .txt03 span {
	font-size: 40px;
}
.visual .swiper-pagination {
	right: calc(50% - 800px);
}
.visual .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	border-radius: 0;
	background: #fff;
	margin: 40px 0!important;
}
.visual .swiper-pagination-bullet-active {
	background: #232323;
}



#footer {
	margin-top: 0;
}




@media screen and (max-width: 1640px) {
	.visual .main-box {
		left: 20px;
	}
	.visual .swiper-pagination {
		right: 20px;
	}
}
@media screen and (max-width: 1280px) {
	.visual .swiper-container {
		height: calc(100vh - 116px);
	}
	.visual .txt01 {
		margin-bottom: 30px;
	}
	.visual .txt01 span {
		font-size: 27px;
	}
	.visual .txt02 span {
		font-size: 37px;
	}
	.visual .txt03 span {
		font-size: 37px;
	}
	.visual .swiper-pagination-bullet {
		margin: 30px 0!important;
	}
}
@media screen and (max-width: 1024px) {
	.visual .main-box {
		top: 35%;
		left: 30px;
	}
	.visual .txt01 span {
		font-size: 23px;
	}
	.visual .txt02 span {
		font-size: 32px;
	}
	.visual .txt03 span {
		font-size: 32px;
	}
	.visual .swiper-pagination-bullet {
		margin: 25px 0!important;
	}
}
@media screen and (max-width: 768px) {
	.visual .swiper-container {
		height: 630px;
	}
	.visual .slide01 {
		background: url("../images/m_main_slide.png")no-repeat 50% 50% / cover;
	}
	.visual .slide02 {
		background: url("../images/m_main_slide-1.png")no-repeat 50% 50% / cover;
	}
	.visual .slide03 {
		background: url("../images/m_main_slide-2.png")no-repeat 50% 50% / cover;
	}
	.visual .slide04 {
		background: url("../images/m_main_slide-3.png")no-repeat 50% 50% / cover;
	}
	.visual .swiper-pagination {
		bottom: 40px;
	}
	.visual .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		margin: 0 30px!important;
	}
	.visual .main-box {
		top: 105px;
		transform: none;
	}
	.visual .txt01 {
		margin-bottom: 20px;
	}
	.visual .txt01 span {
		font-size: 14px;
	}
	.visual .txt02 {
		margin-bottom: 0;
	}
	.visual .txt02 span {
		font-size: 18px;
	}
	.visual .txt03 {
		margin-top: 10px;
	}
	.visual .txt03 span {
		font-size: 18px;
	}
}
@media screen and (max-width: 480px) {
	.visual .main-box {
		left: 10px;
	}
	.visual .main-text-value span.ml {
		margin-left: 5px;
	}
	.visual .main-text-value span.mb {
		margin-left: 0;
	}
	.visual .main-text-value br {
		display: block;
	}
	.visual .swiper-pagination-bullet {
		margin: 0 15px!important;
	}
}
@media screen and (max-width: 380px) {
	.visual .txt01 span {
		font-size: 12px;
	}
	.visual .txt02 span {
		font-size: 16px;
	}
	.visual .txt03 span {
		font-size: 16px;
	}
}