/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}


.modaal-content-container{
    padding: 80px;
}
.modaal-wrapper .modaal-close {
        background: #252525;
    transition: .2s ease-in-out;
}
.modaal-wrapper .modaal-close:hover {
    opacity: 0.6;
}
.modaal-close {
    position: absolute;
    background: #252525;
    border-radius: 999px;
}
.modaal-close:after, .modaal-close:before {
    background: #fff;
}
.modaal-close:after, .modaal-close:before {
    left: 24px;
    width: 2px;
}
@media screen and (max-width: 768px) {
.modaal-content-container{
    padding: 80px 30px 50px 30px;
}
}
/***********
swiper 割り込みCSS
***********/
.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto 0 11.2%;
}
.swiper-container4{
    padding-right:50px;
}
.swiper {
  padding-right: 120px; /* スライダー右の余白 */

}
.swiper__container{
    position: relative;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
  position: absolute;
  bottom:340px
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url(../img/interview_btn.png);
        left: 80vw;

}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url(../img/interview_btn.png);
    transform: rotate(180deg);
        right: 10.98vw;

}
/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}
@media screen and (max-width: 1366px) {
    .swiper-button-prev::after {
        left: 80vw;
    }
    .swiper-button-next::after {
        right: 10.98vw;

    }
}
@media screen and (max-width: 1366px) {
    .swiper-button-prev::after {
        left: 78vw;
    }
    .swiper-button-next::after {
        right: 10.98vw;

    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        bottom:24.89vw;
    }
}

@media screen and (max-width: 1170px) {
    .swiper-button-prev::after {
        left: 76vw;
    }
    .swiper-button-next::after {
        right: 10.98vw;

    }
}
@media screen and (max-width: 1000px) {
    .swiper-button-prev::after {
        left: 74vw;
    }
    .swiper-button-next::after {
        right: 10.98vw;

    }

}
@media screen and (max-width: 900px) {
    .swiper-button-prev::after {
        left: 72vw;
    }
    .swiper-button-next::after {
        right: 10.98vw;

    }

}
@media screen and (max-width: 780px) {

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto 0 5.13%;
}
}
@media screen and (max-width: 768px) {
    .swiper {
  padding-right: 0px; /* スライダー右の余白 */

}

    .swiper-button-prev::after {
        left: 68vw;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        bottom:64vw;
    }

}
@media screen and (max-width: 620px) {
    .swiper-button-prev::after {
        left: 66vw;
    }
}
@media screen and (max-width: 550px) {
    .swiper-button-prev::after {
        left: 64vw;
    }
}
@media screen and (max-width: 480px) {
    .swiper-button-prev::after {
        left: 58vw;
    }
}
@media screen and (max-width: 410px) {
    .swiper-button-prev::after {
        left: 53vw;
    }
}
@media screen and (max-width: 340px) {
    .swiper-button-prev::after {
        left: 47vw;
    }
}