@charset "utf-8";
/* CSS Document */

/*-- swiper -------------------------------------------------------------*/
#loop { margin-top: 100px; position: relative; overflow: hidden; }
#loop .swiper-wrapper-loop { transition-timing-function: linear; }

#loop .mainCopy { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; background: rgba(0,91,172,0.8); padding: 2% 4%; }
#loop .mainCopy h2 { text-align: center; color: #fff; }
#loop .mainCopy h3 { text-align: center; color: #fff; font-weight:bold; font-size: 1.2rem; margin-bottom: 0px; }
#loop .mainCopy .border-solid { border-bottom: 1px solid #fff; margin-bottom: 10px; }
#loop .mainCopy p { text-align: center; color: #fff; margin-bottom: 0px; font-size: 0.9rem; }

#loop.ahLoop .mainCopy { background: #0860af; }
#loop.ahLoop .mainCopy h2 { color: #fff; margin-bottom: 0px; }
#loop.ahLoop .mainCopy h3 { color: #fff; }
#loop.ahLoop .pc_tab { text-align: center; }

@media screen and (max-width: 599px) {
	#loop { margin-top: 75px; height: 300px; overflow: hidden; }
	#loop .swiper-loop { height: inherit; }
	#loop .swiper-wrapper-loop { height: inherit; }
	#loop .swiper-slide-loop { height: inherit; }
	#loop .mainCopy { padding: 4% 6%; }
	#loop .mainCopy h2 { font-size: 2.0rem; text-align: center; font-weight: bold; margin-bottom: 0px; color: #fff; white-space: nowrap; }
	#loop .mainCopy h3 { font-size: 1.0rem; text-align: center; font-weight: bold; color: #fff; white-space: nowrap; margin-bottom: 10px; }
	#loop .mainCopy p { color: #fff; font-size: 0.9rem; }
	
	#loop.ahLoop { margin-top: 0px; position: relative; overflow: hidden; height: 100vh; background: url("../img/ah/mv_sp.webp") center center no-repeat; background-size: cover; }
	#loop.ahLoop .mainCopy { position: absolute; top: 45%; }
	#loop.ahLoop .bottomCopy { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); }
	#loop.ahLoop .roboto {font-size: 10vw; color: rgba(255, 255, 255, 0.75); z-index: 2; white-space: nowrap; line-height: 1.0; margin-bottom: 0; text-align: center; }
	#loop.ahLoop .bottom01 { font-size: 15vw; }
	#loop.ahLoop .bottom02 { font-size: 15vw; }
}
@media screen and (min-width: 600px) {
	#loop .mainCopy { padding: 2% 6%; }
	#loop .mainCopy h2 { font-size: 3.6rem; text-align: center; font-weight: bold; margin-bottom: 20px; color: #fff; white-space: nowrap; }
	#loop .mainCopy h3 { font-size: 1.5rem; text-align: center; font-weight: bold; color: #fff; white-space: nowrap; }
	#loop .mainCopy p { text-align: center; color: #fff; margin-bottom: 0; }
	
	#loop.ahLoop { margin-top: 0px; position: relative; overflow: hidden; height: 100vh; background: url("../img/ah/mv_pc.webp") center center no-repeat; background-size: cover; }
	#loop.ahLoop .roboto { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); font-size: 10vw; color: rgba(255, 255, 255, 0.75); z-index: 2; white-space: nowrap; line-height: 1.0; margin-bottom: 0; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#loop .mainCopy { }
	#loop .mainCopy h2 { font-size: 3.2rem; }
	#loop .mainCopy h3 { font-size: 1.3rem; }
	#loop .mainCopy p { font-size: 0.9rem; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#loop .mainCopy { }
	#loop .mainCopy h2 { font-size: 3.3rem; }
	#loop .mainCopy h3 { font-size: 1.35rem; }
	#loop .mainCopy p { font-size: 0.95rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#loop .mainCopy { }
	#loop .mainCopy h2 { font-size: 3.4rem; }
	#loop .mainCopy h3 { font-size: 1.4rem; }
	#loop .mainCopy p { }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#loop .mainCopy { }
	#loop .mainCopy h2 { font-size: 3.5rem; }
	#loop .mainCopy h3 { font-size: 1.45rem; }
	#loop .mainCopy p { }
}