@charset "UTF-8";

/* main */
div.main{
    position:relative;
    height:max(41.66vw,400px);
    background:url(../img/front/main.png) right bottom/cover no-repeat;
    padding:clamp(50px,13.02vw,100px) 15px clamp(30px,13.02vw,100px);
}
@supports ( background:url(../img/webp/front/main.webp) ) {
    div.main {
        background:url(../img/webp/front/main.webp) right bottom/cover no-repeat;
    }
}
div.main div.content{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:5%;
    width:55%;
}
div.main h1{
    font-size:clamp(30px,4.166vw,80px);
    line-height:1.5;
    font-weight:900;
}
div.main p{
    color:#879694;
    font-size:clamp(16px,1.5625vw,30px);
    padding-top:0.5rem;
}
div.main * + a.btn{margin-top:30px;}

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

div.main{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:min(133.3vw,1024px);
    background:url(../img/webp/front/main-tab.png) left bottom/cover no-repeat;
}
@supports ( background:url(../img/webp/front/main-tab.webp) ) {
    div.main {
        background:url(../img/webp/front/main-tab.webp) left bottom/cover no-repeat;
    }
}
div.main div.content{
    position:relative;
    top:auto;
    transform:translateY(0);
    left:auto;
    width:auto;
}
div.main h1{
    color:#fff;
    font-size:clamp(30px,5.273vw,54px);
    line-height:1.5;
    font-weight:900;
}
div.main p{color:#fff;}

}

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

div.main{
    height:clamp(607px,161.86vw,776.96px);
    background:url(../img/webp/front/main-sp.png) left bottom/cover no-repeat;
}
@supports ( background:url(../img/webp/front/main-sp.webp) ) {
    div.main {
        background:url(../img/webp/front/main-sp.webp) left bottom/cover no-repeat;
    }
}

}

div.content{
    width:1500px;
    margin:0 auto;
}
div.inner{
    width:1000px;
    margin:0 auto;
}

/* Feature */
div.feature-type div.swiper-wrapper{
    display:flex;
    justify-content:space-between;
}
div.feature-type div.swiper-slide{
    position:relative;
    width:calc((100% - 100px)/3);
    color:#192D2A;
    padding:clamp(30px,6.51vw,50px) clamp(15px,3.906vw,30px);
    border:3px solid #192D2A;
    border-radius:20px;
    background:#fff;
    transition:0.2s ease;    
}
div.feature-type div.img{
    display:flex;
    justify-content:center;
    align-items:center;
    height:230px;
}
div.feature-type div.swiper-slide:nth-child(1) div.img img{height:160px;}
div.feature-type div.swiper-slide:nth-child(2) div.img img{height:230px;}
div.feature-type div.swiper-slide:nth-child(3) div.img img{height:200px;}

div.feature-type h3{
    text-align:center;
    padding-top:1rem;
}
div.feature-type p{
    color:#879694;
    padding-top:0.5rem;
}

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

div.slider-wrap div.feature-type {
    width:480px;
    margin:0 auto;
}

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

div.slider-wrap div.feature-type {width:330px;}
div.feature-type div.img{height:200px;}
div.feature-type div.swiper-slide:nth-child(1) div.img img{height:120px;}
div.feature-type div.swiper-slide:nth-child(2) div.img img{height:180px;}
div.feature-type div.swiper-slide:nth-child(3) div.img img{height:150px;}

}


/* What is Journey Japan eSIM? */
div.area.illust{
    position:relative;
    margin:0 auto;
    width:100%;
    height:max(51.5625vw,990px);
    background:url(../img/front/front-bk.png) top center/cover no-repeat;
}
@supports ( background:url(../img/webp/front/front-bk.webp) ) {
    div.area.illust {
        background:url(../img/webp/front/front-bk.webp) top center/cover no-repeat;
    }
}
div.area.illust + div.area{margin-top:0;}

div.txt-abu{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:10%;
    width:max(39.06vw,750px);
}
div.txt-abu h2{text-align:left;}

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

div.area.illust{height:clamp(680px,96.679vw,990px);}    
div.txt-abu{
    left:5vw;
    width:calc(100% - 10vw);
}

}

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

div.area.illust{
    height:max(177.994vw,683.5px);
    background:url(../img/front/front-bk-sp.png) top center/cover no-repeat;
}    
@supports ( background:url(../img/webp/front/front-bk.webp) ) {
    div.area.illust {
        background:url(../img/webp/front/front-bk-sp.webp) top center/cover no-repeat;
    }
}
div.txt-abu{
    top:clamp(50px,13.02vw,100px);
    left:clamp(15px,6.51vw,50px);
    transform:translateY(0);
    width:66%;
}

}


/* How does Journey Japan eSIM work? */
div.step-wrap div.box{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
div.step-wrap div.box.reverse{flex-direction:row-reverse;}
div.step-wrap div.box div{width:calc((100% - 60px)/2);}
div.step-wrap div.box + div.box{margin-top:30px;}

div.step-wrap div.box span.label{
    display:inline-block;
    color:#0068B7;
    font-weight:900;
}
div.step-wrap div.box p{
    color:#879694;
    padding-top:0.5rem;
}

div.step-wrap div.box div.img{position:relative;}
div.step-wrap div.box img.thum{border-radius:20px;}
div.step-wrap div.box img.image-icon{
    position:absolute;
    top:-15px;
    right:-15px;
    width:clamp(80px,9.375vw,120px);
    height:clamp(80px,9.375vw,120px);
}

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

div.step-wrap{
    width:480px;
    margin:0 auto;
}
div.step-wrap div.box,
div.step-wrap div.box.reverse{flex-direction:column;}
div.step-wrap div.box div{width:100%;}
div.step-wrap div.box div.txt{margin-top:1.5rem;}

}

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

div.step-wrap div.box div.img{right:0;}
div.step-wrap div.box img.thum{
    max-width:calc(100% + 15px);
    border-radius:20px 0 0 20px;
}
div.step-wrap div.box img.image-icon{
    top:15px;
    right:0;
}    

}


/* Reviews for Journey Japan eSIM */
div.review-type div.swiper-wrapper{
    display:flex;
    justify-content:space-between;
}
div.review-type div.swiper-slide{
    position:relative;
    color:#192D2A;
    padding:clamp(20px,5.208vw,40px) clamp(15px,3.906vw,30px);
    background:#F8F8FA;
    border-radius:20px;
}
div.review-type div.swiper-slide::after{
    position:absolute;
    left:50px;
    bottom:-50px;
    content:"";
    display:inline-block;
    border:15px solid transparent;
    border-top:60px solid #F8F8FA;
    transform:rotate(-45deg);
    z-index:-1;
}
div.review-type span.label{
    display:block;
    width:clamp(80px,15.625vw,120px);
}
div.review-type span.label img{width:100%;}
div.review-type h3{padding-top:0.75rem;}
div.review-type p{
    color:#879694;
    padding-top:0.5rem;
}

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

div.slider-wrap div.review-type{width:330px;}

}


/* Reliable. Speedy. Affordable. */
div.area.image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:max(46.875vw,900px);
    background:url(../img/front/reliable-bk.png) top center/cover no-repeat;
}
@supports ( background:url(../img/webp/front/reliable-bk.webp) ) {
    div.area.image {
        background:url(../img/webp/front/reliable-bk.webp) top center/cover no-repeat;
    }
}

div.reliable-type div.swiper-wrapper{
    display:flex;
    justify-content:space-between;
}
div.reliable-type div.swiper-slide{
    display:flex;
    flex-direction:column;
    position:relative;
    width:calc((100% - 100px)/3);
    color:#192D2A;
    padding:clamp(20px,3.125vw,40px) clamp(15px,2.343vw,30px);
    background:rgba(255,255,255,0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);  
    border-radius:20px;
}
div.reliable-type p{
    color:#192D2A;
    padding:0.5rem 0;
}
div.reliable-type div.img{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:200px;
    height:200px;
    margin:auto auto 0;
}
div.reliable-type div.img img{max-height:100%;}
div.reliable-type div.swiper-slide:nth-child(1) div.img img{
    width:187.62px;
    height:180px;
}
div.reliable-type div.swiper-slide:nth-child(2) div.img{left:5px;}
div.reliable-type div.swiper-slide:nth-child(2) div.img img{
    width:115.85px;
    height:160px;
}
div.reliable-type div.swiper-slide:nth-child(3) div.img img{
    width:200px;
    height:132px;
}

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

div.slider-wrap div.reliable-type{width:330px;}
div.reliable-type div.img{
    width:150px;
    height:150px;
}
div.reliable-type div.swiper-slide:nth-child(1) div.img img{
    width:156.35px;
    height:150px;
}
div.reliable-type div.swiper-slide:nth-child(2) div.img img{
    width:108.61px;
    height:150px;
}
div.reliable-type div.swiper-slide:nth-child(3) div.img img{
    width:150px;
    height:105.02px;
}

}

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

div.area.image{
    height:max(176vw,660px);
    background:url(../img/front/reliable-bk-sp.png) top center/contain no-repeat;
}    

}