@charset "utf-8";

/*-- swiper -------------------------------------------------------------*/
#wrapper { overflow-x: hidden; }
#mv {  position: relative; z-index: 0; }
#mv .swiper-air .swiper-slide { /*opacity: 0.5;*/ }
#mv .swiper-air .swiper-slide-active { opacity: 1.0; z-index: 10;  }
#mv .swiper-air .swiper-slide-prev { /*opacity: 0.5;*/ }
#mv .swiper-air .swiper-slide-air img { width: 100%; }
#mv .swiper-air .swiper-slide-air div { margin-bottom: 10px; }
#mv .swiper-air .swiper-slide-air p.txt { border-left: 3px solid var(--base-color); padding: 5px 15px; }
@media screen and (max-width: 599px) {
	#mv .swiper-air {  width:90%; margin: 0 auto 5vh; overflow:visible;  }
	#mv .swiper-slide-air { position: relative; }	
	#mv .swiper-pagination { bottom: -10px; }
}
@media screen and (min-width: 600px) {
	#mv { width: 100%; margin-bottom: 5vh; }
	#mv .swiper-air { overflow:visible;  }
	#mv .swiper-slide-air { position: relative; }	
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv .swiper-air {  width:90%; margin: 0 auto ; }
	#mv .swiper-pagination { bottom: -20px; }
}
@media screen and (min-width: 900px) and (max-width: 1024px) {
	#mv .swiper-air { width:90%; margin: 0 auto; }
	#mv .swiper-pagination { bottom: -20px; }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
	#mv .swiper-air { width:960px; margin: 0 auto; }
	#mv .swiper-pagination { bottom: -20px; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px) {
	#mv .swiper-air { margin: 0 2%; }
	#mv .swiper-pagination { bottom: -20px; }
}
@media screen and (min-width: 1480px) {
	#mv .swiper-air { margin: 0 2%; }
}

#mv .swiper-pagination-bullet { border-radius: 0px; width: 40px; height: 3px; background: var(--base-color); margin: 0px 1px; }
@media screen and (max-width: 599px) {
	#mv .swiper-pagination-bullet { width: 20px; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
		#mv .swiper-pagination-bullet { width: 30px; }
}
@media screen and (min-width: 1080px) {	
	#mv .swiper-pagination { position: absolute; bottom: -30px; }
}

#mv .swiper-button-prev,
#mv .swiper-button-next {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: var(--base-color);
    /* ↓ 文字を中心に配置するための設定を追加 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}

/* Swiper本体が持っているデフォルトの矢印アイコン（content指定）を完全に打ち消す */
#mv .swiper-button-prev:after,
#mv .swiper-button-next:after {
    content: none !important;
}

/* ---------------------------------------
   メディアクエリ内（スマホ用の記述）も修正します
   --------------------------------------- */
@media screen and (max-width: 599px) {
    #mv .swiper-button-prev, 
    #mv .swiper-button-next { 
        width: 30px; 
        height: 30px; 
        border-radius: 15px; 
        font-size: 0.7rem; /* ←afterに書いていた文字サイズ指定をこちらに移動 */
    }
    
    #mv .swiper-button-prev { left: -15px;}
    #mv .swiper-button-next { right: -15px;}
}

#mv .swiper-button-prev,#mv .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: var(--base-color);
}

@media screen and (max-width: 599px) {
	#mv .swiper-button-prev,#mv .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	#mv .swiper-button-prev:after,#mv .swiper-button-next:after { font-size: 0.7rem; }
	
	#mv .swiper-button-prev { left: -15px;}
	#mv .swiper-button-next { right: -15px;}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv .swiper-button-prev,#mv .swiper-button-next { width: 40px; height: 40px; border-radius: 20px; }
	#mv .swiper-button-prev { left: -30px;}
	#mv .swiper-button-next { right: -30px;}
}
@media screen and (min-width: 1025px) and (max-width: 1259px)  {
	#mv .swiper-button-prev,#mv .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	#mv .swiper-button-prev { left: -40px;}
	#mv .swiper-button-next { right: -40px;}
}
@media screen and (min-width: 1260px) and (max-width: 1479px)  {
	#mv .swiper-button-prev { left: -25px;}
	#mv .swiper-button-next { right: -25px;}
}
@media screen and (min-width: 1480px) {
	#mv .swiper-button-prev { left: -25px;}
	#mv .swiper-button-next { right: -25px;}
}

#mv .play-pause-btn { position: absolute; top: 4%; left: 1%; z-index: 10; width: 50px; height: 50px; background: var(--base-color); border: 1px solid #ffffff; color: #fff; font-size: 1.2rem; }
#mv .play-pause-btn span { line-height: 1.0; }
@media screen and (max-width: 599px) {
	#mv .play-pause-btn { position: absolute; top: 4%; left: 2%; width: 40px; height: 40px; }
}