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

PCview

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

.mv{background-image: url(/assets/images/shopping-app/shopping-app_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: 720px;}
.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;}
.mv .inner .mv_img{position: absolute; top: -100px; left: 850px; width: 435px;}
.mv .inner .mv_img img{width: 100%;}

.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 center;}
.contents .blockHead{text-align: center; z-index: 1; position: relative; max-width: 768px; margin: 0 auto;}
.contents .blockHead .ruby{font-size: 14px; font-weight: 700; color: #004080; margin-bottom: 24px;}
.contents .blockHead h2{font-size: 50px; 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{margin-top: 64px;}
.contents .blockBody .cardList{width: 100%; font-size: 0;}
.contents .blockBody .cardList .card_border{width: calc((100% / 3) - ((32px * 2) / 3)); font-size: 0; margin-right: 32px; display: inline-block; vertical-align: top; margin-bottom: 48px; padding:32px; border: 1px solid #004080;}
.contents .blockBody .cardList .card_border:nth-child(3n){margin-right: 0;}
.contents .blockBody .cardList .card_border .card{width: 100%;}
.contents .blockBody .cardList .card_border .card .title{font-size: 24px; 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;}

.imgBlock{background: url(/assets/images/shopping-app/shopping-app_img.png) no-repeat; background-position: center; background-size: cover; height: 720px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.imgBlock .inner{text-align: left;}
.imgBlock .imgBlock_head{width: 100%;}
.imgBlock .imgBlock_head h2{font-size: 42px; line-height: 1.3; font-weight: 700; color: #fff; margin-bottom: 80px;}
.imgBlock .imgBlock_body{width: 100%;}
.imgBlock .imgBlock_body .cardList{width: 100%; font-size: 0;}
.imgBlock .imgBlock_body .cardList .card_whiteIcon{width: calc((100% / 3) - ((48px * 2) / 3)); font-size: 0; margin-right: 48px; display: inline-block; vertical-align: top; margin-bottom: 48px;}
.imgBlock .imgBlock_body .cardList .card_whiteIcon:nth-child(3n){margin-right: 0;}
.imgBlock .imgBlock_body .cardList .card_whiteIcon .title{font-size: 24px; font-weight: 700; color: #fff; line-height: 1.5; margin-bottom: 24px;}
.imgBlock .imgBlock_body .cardList .card_whiteIcon .text{font-size: 16px; font-weight: 400; color: #fff; margin-top: 16px; line-height: 1.6;}

}

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

SPview

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


.mv{background-image: url(/assets/images/shopping-app/shopping-app_mv.png); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 50vw; overflow: hidden;}
.mv .inner{position: relative; padding-bottom: 60vw;}
.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; bottom: 12vw; left: 50%; transform: translateX(-50%); width: 55vw;}
.mv .inner .mv_img img{width: 100%;}

.contents{background-color: #fff; margin-bottom: 12vw;}
.contents .inner{padding: 20vw 6vw 0vw 6vw; background: url(/assets/images/common/accent.svg) no-repeat; background-size: 40vw 17vw; background-position: top center;}
.contents .blockHead{text-align: center; 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_border{width: 100%; font-size: 0; display: inline-block; margin-bottom: 6vw; padding:6vw; border: 1px solid #004080;}
.contents .blockBody .cardList .card_border .card{width: 100%;}
.contents .blockBody .cardList .card_border .card .title{font-size: 22px; font-weight: 700; color: #004080; line-height: 1.5; margin-bottom: 6vw;}
.contents .blockBody .cardList .card_border .card .text{font-size: 16px; font-weight: 400; color: #004080; line-height: 1.6; margin-bottom: 6vw;}
.contents .blockBody .cardList .card_border .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; display: inline-block;}

.imgBlock{background: url(/assets/images/shopping-app/shopping-app_img_sp.png) no-repeat; background-position: center top; background-size: cover; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 12vw 0vw;}
.imgBlock .inner{text-align: left;}
.imgBlock .imgBlock_head{width: 100%;}
.imgBlock .imgBlock_head h2{font-size: 36px; line-height: 1.3; font-weight: 700; color: #fff; margin-bottom:12vw;}
.imgBlock .imgBlock_body{width: 100%;}
.imgBlock .imgBlock_body .cardList{width: 100%; font-size: 0;}
.imgBlock .imgBlock_body .cardList .card_whiteIcon{width: 100%; font-size: 0; display: inline-block; vertical-align: top; margin-bottom: 12vw;}
.imgBlock .imgBlock_body .cardList .card_whiteIcon .title{font-size: 22px; font-weight: 700; color: #fff; line-height: 1.5; margin-bottom: 6vw;}
.imgBlock .imgBlock_body .cardList .card_whiteIcon .text{font-size: 16px; font-weight: 400; color: #fff; line-height: 1.6;}
}