@charset "utf-8";

@media (max-width: 1600px) {
	#fp-nav {right: 15px;}
}

@media (max-width: 1200px){
	/* sec2 */
	.sec2 .company ul {width: calc(100% + 20px);}
	.sec2 .company ul li {padding: 0 10px;}
}

@media (max-width: 1024px) {
	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell, .fp-scrollable {height: auto !important;}
	
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 55px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 24px;}
	
	.section-header h3 {font-size: 50px;}

	/* sec2 */
	.sec2 {padding: 120px 0;}
	.sec2 .company {margin-top: 50px;}
	.sec2 .company ul {flex-wrap: wrap;}
	.sec2 .company ul li {width: 33.3333%;}
	.sec2 .company ul li:nth-of-type(3) ~ li {margin-top: 20px;}
	
	/* sec3 */
	.sec3 .product {height:100dvh;}
	.sec3 .tit p {line-height: 1.5;}
	
	/* sec4 */
	.sec4 .container {height: 100dvh;}
	.sec4 .management ul li a dl dt {max-width: 100px;}
	.sec4 .management ul li a dl dd {font-size: 20px; margin-top: 20px;}
	
	/* sec5 */
	.sec5 {padding: 120px 0;}
	.sec5 .notice ul li {padding: 30px 0 35px;}
	.sec5 .notice ul li a {padding: 0 20px;}
	.sec5 .notice ul li a h5 {font-size: 20px; margin-top: 30px; height: 50px;}
	.sec5 .notice ul li a p {margin-top: 25px;}
	
}

@media (max-width: 768px) {
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 45px; top: 460px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 500px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 20px; top: 640px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 680px;}
	
	
	.section-header h3 {font-size: 40px;}
	.section-header p {line-height: 1.5; padding-top: 25px;}
	
	/* sec2 */
	.sec2 {padding: 80px 0 100px;}
	.sec2 .company ul li {min-height: 220px;}
	.sec2 .company ul li a h5 {font-size: 16px;}
	
	/* sec3 */
	.sec3 .product {flex-wrap: wrap;}
	.sec3 .product > a {width: 100%; height: 50%;}
	.sec3 .tit h3 {font-size: 30px;}
	.sec3 .tit p {font-size: 18px; margin-top: 15px;}
	
	/* sec4 */
	.sec4 {padding: 100px 0 100px;}
	.sec4 .container {height: auto;}
	.sec4 .management ul {flex-wrap: wrap; height: auto;}
	.sec4 .management ul li {width: 50%; height: 255px;}
	.sec4 .management ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.sec4 .management ul li:nth-of-type(2) a {border: 0;}
	
	/* sec5 */
	.sec5 {padding: 80px 0 100px;}
	.sec5 .section-header > a {line-height: 1.5;}
	.sec5 .notice {margin-top: 50px;}
	.sec5 .notice ul {flex-wrap: wrap;}
	.sec5 .notice ul li {width: 100%;}
	.sec5 .notice ul li ~ li {border-top: 1px solid #eaeaea;}
	.sec5 .notice ul li:not(:last-child) a {border: 0;}
	.sec5 .notice ul li a h5 {font-size: 18px; height: auto;}
	.sec5 .notice ul li a p {font-size: 16px; height: auto;}
}

@media (max-width: 480px) {
	.m-visual .visual {height: 850px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 35px; top: 400px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 440px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 18px; top: 550px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 590px;}
	.controls {top: 680px;}
	
	/* sec2 */
	.sec2 .company ul li {width: 50%;}
	.sec2 .company ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	
	/* sec5 */
	.sec5 .section-header > a {bottom: inherit; top: 10px;}
	.sec5 .notice ul li a {padding: 0 10px;}
	.sec5 .notice ul li a h5 {margin-top: 20px; line-height: 1.4;}
	.sec5 .notice ul li a p {margin-top: 15px;}
}