@charset "utf-8";

#container {position:relative;}
#container::after { content:''; position:absolute; left:0; top:-100rem; width:100%; height:calc(100% + 100rem); background:linear-gradient(180deg, #FFF49D 0, #FFDD7E 100%); z-index:-1; border-radius:0 0 0 150rem; }
#container > .wrap { display:flex; flex-wrap:wrap; padding:35rem 0; }


.visual_wrap { position:relative; width:66.66%; font-size:20rem; }
.visual_wrap dt { font-family:'FlightSans', sans-serif; font-size:40rem; font-weight:600; line-height:1.3; margin:20rem 0; }
.visual_wrap div.swiper-slide { opacity:0 !important;}
.visual_wrap div.swiper-slide-active { opacity:1 !important; }
.visual_wrap div img {position:absolute; left:50%; opacity:0; transition:0.2s; transition-delay:0.4s; }
.visual_wrap div.swiper-slide-active img { opacity:1; z-index:-1; }
.visual_wrap div img.visual_img1 { bottom:-130rem; margin-left:-30rem; }
.visual_wrap div.swiper-slide-active img.visual_img1 { bottom:-90rem;}
.visual_wrap div img.visual_img2 { bottom:-96rem; margin-left:-70rem;  }
.visual_wrap div.swiper-slide-active img.visual_img2 { bottom:-76rem;}
.visual_wrap div img.visual_img3 { bottom:-220rem; }
.visual_wrap div.swiper-slide-active img.visual_img3 { bottom:-180rem;}
.control { position:absolute; left:0; top:250rem; background:rgba(0,0,0,0.15); display:inline-flex; align-items:center; height:40rem; border-radius:20rem; padding:0 30rem; z-index:2; }
.control .paging {display:flex; align-items:center; }
.control .paging span { width:13rem; height:13rem; border-radius:50%; background:#000; opacity:0.4; margin-right:10rem; }
.control .paging span.swiper-pagination-bullet-active { width:30rem; background:#fff; border-radius:7rem; opacity:1; }
.control > a { display:flex; align-items:center; justify-content:center; width:15rem; height:15rem; background:url('/design2025/fios/img/main/stop.png') no-repeat center; margin-left:10rem; }
.control > a.play { display:none; background-image:url('/design2025/fios/img/main/play.png'); }
@media all and (max-width:1023px){
	.visual_wrap {width:calc(50% - 20rem); font-size:18rem;}
	.visual_wrap dt {font-size:35rem;}
	.control {top:300rem;}
}
@media all and (max-width:768px){
	.visual_wrap {width:100%;}
	.visual_wrap dl { width:70%; }
	.swiper-wrapper {height:auto;}
	.visual_wrap div img {transform:scale(50%) translateX(50%); left:auto; right:0;}
	.visual_wrap div img.visual_img1 { bottom:-190rem; margin-left:0; }
	.visual_wrap div.swiper-slide-active img.visual_img1 { bottom:-170rem;}
	.visual_wrap div img.visual_img2 { bottom:-200rem; }
	.visual_wrap div.swiper-slide-active img.visual_img2 { bottom:-180rem;}
	.visual_wrap div img.visual_img3 { transform:scale(50%) translateX(70%); bottom:-260rem; }
	.visual_wrap div.swiper-slide-active img.visual_img3 { bottom:-240rem;}
	.control {position:unset; margin-top:20rem; }
}
@media all and (max-width:480px){
	.visual_wrap { text-align:center; }
	.visual_wrap dl { width:100%; }
	.visual_wrap dt {font-size:30rem;}
	.visual_wrap div img {display:none;}
}


.link_wrap { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; width:33.33%; z-index:1; }
.link_wrap a { position:relative; width:calc((100% - 20rem)/2); height:160rem; margin:10rem 0; border-radius:30rem; padding:20rem; font-size:20rem; font-weight:600; background:rgba(255,255,255,0.6); overflow:hidden; transition:0.5s; }
.link_wrap a:hover {box-shadow:0 0 15rem rgba(0,0,0,0.2);}
.link_wrap a::before {content:''; position:absolute; left:20rem; bottom:20rem; width:22rem; height:22rem; background:url('/design2025/fios/img/main/arrow.png') no-repeat 0 0/cover; }
.link_wrap a.icon1 {background:var(--p_color); color:#fff; }
.link_wrap a.icon2 {background:var(--red); color:#fff; }
.link_wrap a.icon5 {margin-left:calc(50% + 10rem)}
.link_wrap a img {position:absolute; right:-5rem; bottom:-5rem; }
.link_wrap a.icon2 img {right:20rem; bottom:20rem;}
.link_wrap a.icon5 img {right:5rem;}
@media all and (max-width:1023px){
	.link_wrap {width:calc(50% - 20rem); margin-left:40rem;}
}
@media all and (max-width:768px){
	.link_wrap {width:100%; margin-left:0; margin-top:40rem; }
}


footer { position:relative; padding:80rem 0 30rem; border-top:0; margin-top:0; }
footer::before,
footer::after { content:''; position:absolute; right:0; top:0; width:150rem; height:150rem; background:#FFDD7E; z-index:-2; }
footer::after {content:''; width:300rem; height:300rem; background:#fff; border-radius:50%; z-index:-1; }
@media all and (max-width:768px){
	footer {padding:30rem 0;}
}