/* ===========================

PCview

=========================== */
@media screen and (min-width:768px){

.mv{background-image: url(/assets/images/mobility/mobility_mv.png); background-size: cover; background-position: center; background-repeat: no-repeat; height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.mv .inner{position: relative;}
.mv .inner .textArea{text-align: left; width: 560px;}
.mv .inner .textArea h2{font-size: 54px; font-weight: 700; color: #fff; line-height: 1.3;}
.mv .inner .textArea p{font-size: 17px; font-weight: 400; color: #fff; margin-top: 16px; line-height: 1.6;}

.contents{background-color: #fff;}
.contents .inner{padding: 120px 64px 58px 64px; background: url(/assets/images/common/accent.svg) no-repeat; background-size: 240px 102px; background-position: top left 64px; display: flex; justify-content: space-between; align-items: flex-start;}
.contents .blockHead{text-align: left; z-index: 1; position: relative; width: 35%; margin-right: 80px; min-width: 200px; max-width: 380px;}
.contents .blockHead .ruby{font-size: 14px; font-weight: 700; color: #004080; margin-bottom: 24px;}
.contents .blockHead h2{font-size: 40px; line-height: 1.3; font-weight: 700; color: #004080; margin-bottom: 24px;}
.contents .blockHead p{font-size: 17px; font-weight: 400; color: #004080; line-height: 1.6;}
.contents .blockBody{width: 65%;}
.contents .blockBody .cardList{width: 100%; font-size: 0;}
.contents .blockBody .cardList .card{width: calc((100% / 2) - ((48px * 1) / 2)); font-size: 0; margin-right: 48px; display: inline-block; vertical-align: top; margin-bottom: 64px;}
.contents .blockBody .cardList .card:nth-child(2n){margin-right: 0;}
.contents .blockBody .cardList .card .title{font-size: 30px; font-weight: 700; color: #004080; line-height: 1.5; margin-bottom: 16px;}
.contents .blockBody .cardList .card .text{font-size: 16px; font-weight: 400; color: #004080; margin-top: 16px; line-height: 1.6;}
.contents .blockBody .cardList .card .btn{text-decoration: none; font-size: 14px; line-height: 1.5; font-weight: 400; color: #fff; background-color: #0081CC; padding: 8px 20px; border-radius: 8px; margin-top: 24px; display: inline-block;}
.contents .bg_img{position: relative; width: 100%; height: 200px; overflow: hidden;}
.contents .bg_img img{position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); width: 100%; object-fit: cover;}

.swiperBlock{background-color: #E6F2FF;}
.swiperBlock .inner{padding:120px 64px;}
.swiperBlock .inner .swiperBlockWrapper{position: relative; height: 690px;}
.swiperBlock .inner .swiperBlockWrapper .swiper{height: 100%;}
.swiperBlock .inner .swiperBlockWrapper .swiper .swiper-wrapper {height: 100%;}
.swiperBlock .inner .swiperBlockWrapper .swiper .swiper-wrapper .swiper-slide{position: relative; height: 650px; width: 100%; overflow: hidden;}
.swiperBlock .inner .swiperBlockWrapper .swiper .swiper-wrapper .swiper-slide img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto;}
.swiperBlock .swiperBlockWrapper .swiper-Custombutton-next{background: url(/assets/images/common/swiper_btn_right.svg) no-repeat; width: 56px; height: 56px; position: absolute; right: -28px; top: 50%; transform: translateY(-50%); z-index: 1;}
.swiperBlock .swiperBlockWrapper .swiper-Custombutton-prev{background: url(/assets/images/common/swiper_btn_left.svg) no-repeat; width: 56px; height: 56px; position: absolute; left: -28px; top: 50%; transform: translateY(-50%); z-index: 1;}
/* Nextボタンにカスタム画像 */
.swiper-button-next, .swiper-button-prev{display: none;}
.swiper-button-next::after, .swiper-button-prev::after{display: none;}

/* Prevボタンにカスタム画像 */

}

/* ===========================

SPview

=========================== */
@media screen and (max-width:768px){
.pc{display: none;}

.mv{background-image: url(/assets/images/mobility/mobility_mv.png); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 50vw; overflow: hidden;}
.mv .inner{position: relative;}
.mv .inner .textArea{text-align: left; width: 100%; padding-top: 12vw; padding-bottom: 12vw;}
.mv .inner .textArea h2{font-size: 40px; font-weight: 700; color: #fff; line-height: 1.3;}
.mv .inner .textArea p{font-size: 14px; font-weight: 400; color: #fff; margin-top: 16px; line-height: 1.6;}
.mv .inner .mv_img{position: absolute; top: 6vw; left: 50%; transform: translateX(-50%); width: 70vw;}
.mv .inner .mv_img img{width: 100%;}

.contents{background-color: #fff;}
.contents .inner{padding: 20vw 6vw 0vw 6vw; background: url(/assets/images/common/accent.svg) no-repeat; background-size: 40vw 17vw; background-position: top left 6vw;}
.contents .blockHead{text-align: left; z-index: 1; position: relative; padding-bottom: 12vw;}
.contents .blockHead .ruby{font-size: 14px; font-weight: 700; color: #004080; margin-bottom: 6vw;}
.contents .blockHead h2{font-size: 36px; font-weight: 700; color: #004080; margin-bottom: 6vw;}
.contents .blockHead p{font-size: 17px; font-weight: 400; color: #004080; line-height: 1.6;}
.contents .blockBody .cardList{width: 100%; font-size: 0;}
.contents .blockBody .cardList .card{width: 100%; font-size: 0; display: inline-block; margin-bottom: 6vw;}
.contents .blockBody .cardList .card .title{font-size: 22px; font-weight: 700; color: #004080; line-height: 1.5; margin-bottom: 6vw;}
.contents .blockBody .cardList .card .text{font-size: 16px; font-weight: 400; color: #004080; line-height: 1.6; margin-bottom: 6vw;}
.contents .blockBody .cardList .card .btn{text-decoration: none; font-size: 14px; line-height: 1.5; font-weight: 400; color: #fff; background-color: #0081CC; padding: 8px 20px; border-radius: 8px; margin-top: 24px; display: inline-block;}

.swiperBlock{background-color: #E6F2FF;}
.swiperBlock .inner{padding:12vw 6vw;}
.swiperBlock .inner .swiperBlockWrapper{position: relative; height: 57vw;}
.swiperBlock .inner .swiperBlockWrapper .swiper{height: 100%;}
.swiperBlock .inner .swiperBlockWrapper .swiper .swiper-wrapper {height: 100%;}
.swiperBlock .inner .swiperBlockWrapper .swiper .swiper-wrapper .swiper-slide{position: relative; height: 50vw; width: 100%; overflow: hidden;}
.swiperBlock .inner .swiperBlockWrapper .swiper .swiper-wrapper .swiper-slide img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto;}
.swiperBlock .swiperBlockWrapper .swiper-Custombutton-next{display: none;}
.swiperBlock .swiperBlockWrapper .swiper-Custombutton-prev{display: none;}
/* Nextボタンにカスタム画像 */
.swiper-button-next, .swiper-button-prev{display: none;}
.swiper-button-next::after, .swiper-button-prev::after{display: none;}
}