@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.25vw,24px);
    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:#070C1A;
    padding:clamp(30px,6.51vw,50px) clamp(15px,3.33vw,50px);
    border-radius:10px;
    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 {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
div.step-wrap div.box{
    width:calc((100% - clamp(50px,6.66vw,100px))/3);
    background:#fff;
    overflow:hidden;
    border-radius:10px;
}
div.step-wrap div.box span.label{
    position:relative;
    top:-20px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:160px;
    height:40px;
    margin:0 auto;
    background:#fff;
    border-radius:20px;
    color:#1A9FA0;
    font-weight:900;
}
div.step-wrap div.box div.txt{padding:0 clamp(15px,2vw,30px) clamp(15px,2vw,30px);}
div.step-wrap div.box p{
    color:#879694;
    padding-top:0.5rem;
}

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

div.step-wrap div.box{width:calc((100% - 50px)/2);}
div.step-wrap div.box:nth-child(n + 3){margin-top:50px;}

}

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

div.step-wrap{
    flex-direction:column;
    width:330px;
    margin:0 auto;
}
div.step-wrap div.box{width:auto;}
div.step-wrap div.box:nth-child(n + 2),
div.step-wrap div.box:nth-child(n + 3){margin-top:15px;}

}

/* 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.area.image::before{
    position:absolute;
    content:"";
    display:inline-block;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(7,12,26,0.66);
    z-index:0;
}

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:#070C1A;
    padding:clamp(20px,3.125vw,40px) clamp(15px,2.343vw,30px);
    background:rgba(255,255,255,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius:10px;
}
div.reliable-type p{
    color:#070C1A;
    padding:0.5rem 0;
}
div.reliable-type div.img{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:200px;
    height:200px;
    margin:30px 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:800px;
    background:url(../img/front/reliable-bk-sp.png) top center/cover no-repeat;
}    
@supports ( background:url(../img/webp/front/reliable-bk-sp.webp) ) {
    div.area.image {
        background:url(../img/webp/front/reliable-bk-sp.webp) top center/cover no-repeat;
    }
}

}