@charset "utf-8";


@media (max-width: 1500px) {
	.sec5 .roll-wrap {gap: 40px;}
	.sec5 .roll-wrap .tit {max-width: 345px;}
	.sec5 .roll-wrap .tit h3 {font-size: 45px;}
	.sec5 .roll-wrap .txt-roll .swiper h4 {font-size: 45px;}
}

@media (max-width: 1400px) {
	.scroll {right: 15px;}
	.sec5 .roll-wrap .txt-roll .swiper h4 {font-size: 40px;}
}

@media (max-width: 1200px){
	.sec5 .roll-wrap {flex-wrap: wrap; text-align: center;}
	.sec5 .roll-wrap .tit {max-width: 100%; padding-bottom: 0;}
	.sec5 .roll-wrap .tit h3 ~ h3 {display: block;}
	.sec5 .roll-wrap .txt-roll {height: 400px; overflow: hidden;}
	.sec5 .roll-wrap .txt-roll {max-width: 800px; margin: 0 auto;}
	.sec5 .roll-wrap .txt-roll .swiper .swiper-slide {height: 80px; justify-content: center;}
}

@media (max-width: 1024px) {
	.m-visual {padding-top: 56px; background-color: #000;}
	.m-visual .visual {height: auto;}
	.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {position: static;}
	.m-visual .visual .swiper-wrapper .swiper-slide .backdrop video {height: auto;}

	.sec2 .item .txt p br {display: none;}
	
	.section-header h3 {font-size: 50px;}
	.sec3 ul.banner {gap: 10px;}
	.sec3 .works .work-list ul li a .txt h5 {font-size: 20px;}
	
}

@media (max-width: 768px) {
	.m-visual .visual {padding-bottom: 50px;}
	.scroll {bottom: 0;}

	.sec2 .item .wrap {gap: 20px;}
	.sec2 .item figure {max-width: 200px;}
	.sec2 .item .txt h4 {font-size: 30px;}

	.section-header h3 {font-size: 40px;}
	.section-header p {margin-top: 20px; font-size: 18px;}
	.section-header p br {display: none;}
	
	.sec3 {padding-bottom: 120px;}
	.sec3 ul.banner {flex-wrap: wrap;}
	.sec3 ul.banner li {flex: 100%; min-height: 180px;;}
	
	.sec3 .works {margin-top: 120px;}
	.sec3 .works .work-list ul {width: calc(100% + 20px); margin: 0 -10px;}
	.sec3 .works .work-list ul li {padding: 0 10px; width: 50%;}
	.sec3 .works .work-list ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.sec3 .works .work-list ul li a .txt h5 {font-size: 18px;}
	
	.sec4 .flow-wrap {margin-top: 60px;}
	
	.sec5 {margin-top: 100px;}
	.sec5 .roll-wrap .tit h3 {font-size: 35px;}
	.sec5 .roll-wrap .txt-roll {height: 250px;}
	.sec5 .roll-wrap .txt-roll .swiper h4 {font-size: 25px;}
	.sec5 .roll-wrap .txt-roll .swiper .swiper-slide {height: 50px;}

	.sec6 h3 {font-size: 38px;}

}

@media (max-width: 480px) {
	.m-visual .visual {padding-bottom: 0px; padding-top: 50px;}
	.scroll {display: none;}

	.section-header h3 {font-size: 30px;}
	.section-header p {font-size: 16px;}
	
	.sec2 .item ~ .item {margin-top: 40px;}
	.sec2 .item .wrap {flex-wrap: wrap; gap: 0;}
	.sec2 .item .txt {width: 100%;}
	.sec2 .item .txt h4 {font-size: 24px;}
	
	.sec4 .flow-wrap .flow figure {margin-right: 30px;}
	
	.sec5 .roll-wrap .tit h3 {font-size: 26px;}
	.sec5 .roll-wrap .tit h3 > i {max-width: 18px; bottom: 8px;}
	.sec5 .roll-wrap .txt-roll {height: 200px;}
	.sec5 .roll-wrap .txt-roll .swiper h4 {font-size: 19px;}
	.sec5 .roll-wrap .txt-roll .swiper .swiper-slide {height: 45px;}
	
	.sec6 {height: 300px;}
	.sec6 h3 {font-size: 32px;}
	
}