@charset "UTF-8";

/* main */
div.main{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:280px;
    padding:50px 15px clamp(30px,6.51vw,50px);
    background: linear-gradient(90deg, #f2f7fe, #f0fdff);
}
div.main span.head{
    display:block;
    color:#0068B7;
    font-size:clamp(16px,2.343vw,24px);
    line-height:1.1;
    font-weight:600;
}
div.main h1{
    font-size:clamp(28px,5.273vw,54px);
    line-height:1.1;
    font-weight:900;
}
div.main span.head + h1{padding-top:clamp(5px,1.953vw,15px);}

div.main p{
    color:#070C1A;
    font-size:clamp(14px,1.5625vw,16px);
    line-height:1.5;
    padding-top:clamp(5px,1.953vw,15px);
}

#pan{
    position: absolute;
    top: 110px;
    left: 50%;
    transform:translateX(-50%);
    width:1500px;
    max-width:calc(100% - 30px);
    color:#070C1A;
    font-size: 12px;
    text-align:right;
    z-index:1;
}
#pan a{color:#0068B7;}

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

#pan{
    top: 70px;
    overflow-x:scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    white-space:nowrap;
}
#pan::-webkit-scrollbar {display: none;}

}

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

#pan{top:60px;}

div.main{
    min-height:initial;
    height:clamp(180px,36.458vw,280px);
}

}

div.content{
    width:1500px;
    margin:0 auto;
}
div.inner{
    width:1000px;
    margin:0 auto;
}
div.content + div,
div.inner + div{margin-top:clamp(50px,13.2vw,100px);}

/* Key Features */
ul.features-list{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:30px;
}
ul.features-list li{
    position:relative;
    display:flex;
    align-items:center;
    width:calc((100% - 50px)/2);
    font-size:clamp(16px,2.343vw,24px);
    line-height:1;
    font-weight:500;
    letter-spacing:0.25pt;
    padding-left:40px;
}
ul.features-list li:nth-child(n + 3){margin-top:50px;}

ul.features-list li::before{
    position:absolute;
    content:"";
    display:inline-block;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
}

ul.features-list li.i01::before{background:url(../img/esim/icon/key-features-i01.svg) center/contain no-repeat;}
ul.features-list li.i02::before{background:url(../img/esim/icon/key-features-i02.svg) center/contain no-repeat;}
ul.features-list li.i03::before{background:url(../img/esim/icon/key-features-i03.svg) center/contain no-repeat;}
ul.features-list li.i04::before{background:url(../img/esim/icon/key-features-i04.svg) center/contain no-repeat;}

ul.features-list li.i05::before{background:url(../img/esim/icon/key-features-i05.svg) center/contain no-repeat;}
ul.features-list li.i06::before{background:url(../img/esim/icon/key-features-i06.svg) center/contain no-repeat;}
ul.features-list li.i07::before{background:url(../img/esim/icon/key-features-i07.svg) center/contain no-repeat;}
ul.features-list li.i08::before{background:url(../img/esim/icon/key-features-i08.svg) center/contain no-repeat;}

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

ul.features-list{
    flex-direction:column;
    width:420px;
    margin-left:auto;
    margin-right:auto;
}
ul.features-list li{width:auto;}
ul.features-list li:nth-child(n + 2){margin-top:30px;}    

}


/* Use Your Data Anywhere You Go */
div.column-box + div.column-box{margin-top:50px;}
div.column-box.style01{
    display:flex;
    justify-content:center;
    align-items:center;
}
div.column-box.style01 div.img{text-align:center;}
div.column-box.style01 div.img img{
    display:inline-block;
    vertical-align:bottom;
    width:360px;
}
div.column-box.style01 div.txt{width:500px;}
div.column-box.style01 div.txt h2{text-align:left;}
div.column-box.style01 div + div{margin-left:50px;}

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

div.column-box.style01{
    flex-direction:column;
    width:420px;
    margin-left:auto;
    margin-right:auto;
}
div.column-box.style01 div + div{margin:0;}
div.column-box.style01 div.img img{width:300px;}
div.column-box.style01 div.txt{
    display:contents;
    width:auto;
}
div.column-box.style01 div.txt h2{
    order:1;
    text-align:center;
}
div.column-box.style01 div.img{order:2;}
div.column-box.style01 div.txt p{
    order:3;
    margin-top:15px;
}
    
}

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

div.column-box.style01 div.img img{width:200px;}

}

/* Most Reliable Network in Japan */
div.column-box.style02{position:relative;}
div.column-box.style02 div.txt{
    position:absolute;
    top:0;
    left:0;
    width:clamp(380px,48.82vw,500px);
}
div.column-box.style02 div.txt h2{text-align:left;}
div.column-box.style02 div.img img{
    display:block;
    width:740px;
    margin:0 0 0 auto;
}

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

div.column-box.style02{
    width:420px;
    margin-left:auto;
    margin-right:auto;
}    
div.column-box.style02 div.txt{
    position:relative;
    width:auto;
}    
div.column-box.style02 div.img{margin-top:15px;}

}

/* Why choose Journey Japan eSIM? */
div.area.image-type01{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:max(67.708vw,1300px);
    background:url(../img/esim/bk.png) top center/cover no-repeat;
}
@supports ( background:url(../img/webp/esim/bk.webp) ) {
    div.area.image-type01 {
        background:url(../img/webp/esim/bk.webp) top center/cover no-repeat;
    }
}
div.area.image-type01::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.choose-type div.swiper-wrapper{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
div.choose-type div.swiper-slide{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    width:calc((100% - 100px)/3);
    color:#070C1A;
    padding:clamp(30px,6.51vw,50px) 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.choose-type div.swiper-slide:nth-child(n + 4){margin-top:50px;}
div.choose-type h3{margin-top:30px;}
div.choose-type p{
    color:#070C1A;
    padding:0.5rem 0;
}
div.choose-type div.img{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:200px;
}

div.choose-type div.swiper-slide:nth-child(1) div.img img{width:171px;}
div.choose-type div.swiper-slide:nth-child(2) div.img img{width:221px;}
div.choose-type div.swiper-slide:nth-child(3) div.img img{width:184px;}
div.choose-type div.swiper-slide:nth-child(4) div.img img{width:240px;}
div.choose-type div.swiper-slide:nth-child(5) div.img img{width:167px;}
div.choose-type div.swiper-slide:nth-child(6) div.img img{width:155px;}

@media screen and (max-width:1024px){
   
div.area.image-type01{height:1000px;}
div.choose-type{width:330px;}
div.choose-type div.swiper-wrapper{flex-wrap:nowrap;}
div.choose-type div.swiper-slide:nth-child(n + 4){margin-top:0;}

}

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

div.area.image-type01{
    height:860px;
    background:url(../img/esim/bk-sp.png) top center/cover no-repeat;
}
@supports ( background:url(../img/webp/esim/bk-sp.webp) ) {
    div.area.image-type01 {
        background:url(../img/webp/esim/bk-sp.webp) top center/cover no-repeat;
    }
}    

}


/* phone-compatibility-ios */
div.column-box.default{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
div.column-box.default div.img{text-align:center;}
div.column-box.default div.img img{
    display:inline-block;
    vertical-align:bottom;
    width:min(52.6vw,790px);
}
div.column-box.default div.txt{width:calc(100% - min(56vw,840px));}
div.column-box.default div.txt h2{text-align:left;}

div.compatibility-type div.swiper-wrapper{
    display:flex;
    justify-content:space-between;
}
div.compatibility-type div.swiper-slide{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    width:calc((100% - 100px)/3);
    padding:50px clamp(15px,2.343vw,30px) clamp(30px,6.51vw,50px);
    background:#fff;
    border-radius:10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
div.compatibility-type h3{
    text-align:center;
    margin-top:30px;
}
div.compatibility-type p{
    color:#070C1A;
    padding:0.5rem 0;
}
div.compatibility-type div.img{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:160px;
}

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

div.compatibility-type{
    width:330px;
    margin-left:auto;
    margin-right:auto;
}

}

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

div.column-box.default{
    flex-direction:column;
    width:auto;
}
div.column-box.default div.img{
    width:100%;
    margin-top:30px;
}
div.column-box.default div.img img{width:auto;}
div.column-box.default div.txt{width:420px;}


}

/* faq */
div.column-box.image-bnr-type{
    display:flex;
    justify-content:space-between;
}
div.column-box.image-bnr-type a{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:calc((100% - clamp(50px,6.66vw,100px))/3);
    color:#070C1A;
    background:#fff;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
    transition:0.2s ease;
    overflow:hidden;
}
div.column-box.image-bnr-type a:hover{
    background:#f2f7fe;
    box-shadow:0 0 4px rgba(0,0,0,0.1);
}

div.column-box.image-bnr-type a span.heading{
    position:relative;
    font-size:clamp(14px,1.5625vw,16px);
    font-weight:600;
    text-align:center;
    padding-top:50px;
    transition:0.2s ease;
}
div.column-box.image-bnr-type a:hover span.heading{color:#0068B7;}

div.column-box.image-bnr-type a span.heading::before{
    position:absolute;
    content:"";
    top:25px;
    left:50%;
    transform:translateX(-50%);
    display:inline-block;
    border:10px solid transparent;
    border-top:10px solid #070C1A;
    transition:0.2s ease;
}
div.column-box.image-bnr-type a:hover span.heading::before{
    top:30px;
    border-top-color:#0068B7;
}

div.column-box.image-bnr-type a img{
    display:inline-block;
    vertical-align:bottom;
    width:clamp(200px,16.66vw,250px);
    height:clamp(296px,24.66vw,370px);
    margin-top:15px;
}

div.column-box.image-bnr-type a span.label{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:40px;
    color:#fff;
    font-size:clamp(14px,1.5625vw,16px);
    font-weight:600;
    text-align:center;
    background:#070C1A;
    transition:0.2s ease;
}
div.column-box.image-bnr-type a:hover span.label{background:#0068B7;}
div.column-box.image-bnr-type a span.label::after{
    position:absolute;
    content:"";
    top:50%;
    transform:translateY(-50%);
    right:20px;
    display:inline-block;
    width:16px;
    height:16px;
    background:url(../img/icon/arrow-i-wht.svg) center/contain no-repeat;
    transition:0.2s ease;
}
div.column-box.image-bnr-type a:hover span.label::after{right:15px;}

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

div.column-box.image-bnr-type{
    flex-direction:column;
    width:420px;
    margin-left:auto;
    margin-right:auto;
}    
div.column-box.image-bnr-type a{width:auto;}
div.column-box.image-bnr-type a + a{margin-top:15px;}

}

ul.faq-list-wrap{
    margin-top:30px;
    border-top:1px solid #e0e0e0;
}
ul.faq-list-wrap li{
    position: relative;
    border-bottom:1px solid #e0e0e0;
}
ul.faq-list-wrap li::before{
    position:absolute;
    content:"";
    top:50%;
    transform:translateY(-50%);
    left:clamp(20px,3.255vw,25px);
    display:inline-block;
    width:15px;
    height:22px;
    background:url(../img/icon/q-i.svg) center/contain no-repeat;
}
ul.faq-list-wrap li a{
    display: block;
    color: #070C1A;
    font-size: clamp(14px,2.083vw,16px);
    font-weight: 600;
    text-decoration: none;
    padding:clamp(15px,3.906vw,30px) 50px clamp(15px,3.906vw,30px) clamp(50px,7.8125vw,60px);
    transition: 0.2s ease-out;
}
ul.faq-list-wrap li a:hover{background:#f8f8fa;}


/* how-to-activate-esim */
div.activate-type div.swiper-wrapper{
  display:flex;
  justify-content:space-between;
}
div.activate-type div.swiper-slide{
  position:relative;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}

div.scroll-wrap div.left h2{
    font-size:clamp(26px,2.1875vw,42px);
    text-align:left;
    margin:0;
}
div.scroll-wrap div.left p{
    font-size:clamp(14px,2.083vw,16px);
    line-height:2;
}

div.scroll-wrap div.left p + p{margin-top:1em;}

@media (min-width: 769px) {
/* 全体のスクロール領域（この高さ分だけスクロールして画像を切り替えます） */
div.scroll-wrap {
    display: flex;
    position: relative;
    height: 300vh; /* 切り替えのスクロール量。長くするほどゆっくり切り替わります */
    max-height: calc(1080px * 3); /* 高さが大きくなりすぎないように制限 */
}
  
div.scroll-wrap div.left {
    position: sticky;
    top:0;
    left:0;
    width: 50%;
    height: 100vh;
    max-height: 1080px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    padding:5%;
    overflow-y: scroll;
}
div.scroll-wrap div.left {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

div.scroll-wrap div.left::-webkit-scrollbar {
  display: none;
}

div.scroll-wrap div.right {
    position: sticky;
    top:0;
    width: 50%;
    height: 100vh;
    max-height: 1080px;
    overflow: hidden;
}
  
/* 画像：すべて重ねて配置 */
.right img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease; /* フェードの速度 */
}
/* アクティブな画像を表示 */
.right img.is-active {
    opacity: 1;
}

}

@media (max-width: 768px) {

div.scroll-wrap div.left {padding:clamp(50px,9.765vw,75px) 15px;}
div.scroll-wrap div.left h2{font-size:clamp(26px,5.46875vw,42px);}
div.scroll-wrap div.right picture:nth-child(n + 2){display:none;}

}


/* reviews */
div.reviews-wrap div.box{
  position:relative;
  color:#192D2A;
  padding:clamp(15px,6.51vw,50px) clamp(15px,6.51vw,50px);
  background:#F8F8FA;
  border-radius:20px;
}
div.reviews-wrap div.box + div.box{margin-top:45px;}

div.reviews-wrap div.box::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.reviews-wrap div.box.reverse::after{
    left:auto;
    right:50px;
    transform:rotate(45deg);
}

div.reviews-wrap div.box span.label{
  display:block;
  color:#FF4027;
  font-size:clamp(20px,3.125vw,24px);
  line-height:1;
}
div.reviews-wrap div.box h3{padding-top:0.75rem;}
div.reviews-wrap div.box p{
  color:#879694;
  padding-top:0.5rem;
}


/* coupons */
div.coupons-wrap {
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
}
div.coupons-wrap div.box{
    position:relative;
    display:flex;
    flex-direction:column;
    width:calc((100% - 50px)/2);
    background:#fff;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
    border-radius:10px;
    overflow:hidden;
    margin-right:50px;
}
div.coupons-wrap div.box:nth-child(2n){margin-right:0;}
div.coupons-wrap div.box:nth-child(n + 3){margin-top:50px;}

div.coupons-wrap div.box span.label{
    position:absolute;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:120px;
    height:30px;
    color:#fff;
    font-size:12px;
    padding-top:1px;
    background:#0068B7;
    border-radius:0 0 10px 0;
}
div.coupons-wrap div.box div.img{
    height:280px;
    background:#efefef;
}
div.coupons-wrap div.box div.txt{
    display:flex;
    flex-direction:column;
    height:calc(100% - 280px);
    padding:clamp(15px,2.083vw,30px);
}
div.coupons-wrap div.box h2{
    font-size:clamp(20px,3.125vw,24px);
    text-align:left;
}
div.coupons-wrap div.box p{
    color:#879694;
    padding-bottom:1em;
}
div.coupons-wrap div.box a{
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    width:160px;
    height:40px;
    color:#fff;
    font-size:clamp(14px,2.083vw,16px);
    font-weight:500;
    background:#070C1A;
    border-radius:6px;
    padding-left:15px;
    margin-top:auto;
    transition:0.2s ease;
}
div.coupons-wrap div.box a:hover{background:#879694;}
div.coupons-wrap div.box a::after{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:15px;
    content:"";
    display:inline-block;
    width:16px;
    height:16px;
    background:url(../img/icon/arrow-i-wht.svg) center/contain no-repeat;
    transition:0.2s ease;
}
div.coupons-wrap div.box a:hover::after{right:10px;}

div.coupons-wrap div.box.grn div.img{background:#BEFEC0;}
div.coupons-wrap div.box.red div.img{background:#FEBEBE;}
div.coupons-wrap div.box.blue div.img{background:#BED9FE;}
div.coupons-wrap div.box.yel div.img{background:#F9FEBE;}


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

div.coupons-wrap {
    flex-direction:column;
    width:420px;
    margin-left:auto;
    margin-right:auto;
}
div.coupons-wrap div.box{
    width:auto;
    margin-right:auto;
}
div.coupons-wrap div.box:nth-child(n + 3){margin-top:0;}
div.coupons-wrap div.box:nth-child(n + 2){margin-top:15px;}

div.coupons-wrap div.box div.img{height:200px;}
div.coupons-wrap div.box div.txt{height:calc(100% - 200px);}

}


/* terms etc text base */
div.txtbase span.heading{
    display:inline-block;
    font-size:clamp(20px,3.125vw,24px);
    line-height:1.5;
    font-weight:600;
}
div.txtbase span.sub-head{
    display:block;
    font-size:clamp(14px,2.083vw,16px);
    line-height:1.5;
    font-weight:600;
}
div.txtbase p{
    color:#879694;
    padding-top:0.5em;
}
div.txtbase * + span.heading{padding-top:1.5em;}
div.txtbase * + span.sub-head{padding-top:1.5em;}

table.table{
    width:100%;
    border:1px solid #e0e0e0;
    border-collapse:collapse;
    margin-top:10px;
}
table.table tr th,
table.table tr td{
    font-size:clamp(14px,2.083vw,16px);
    padding:10px;
    border:1px solid #e0e0e0;
}
table.table tr th{
    color:#070C1A;
    font-weight:600;
    text-align:left;
    background:#F8F8FA;
}
table.table tr td{color:#879694;}

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

table.table.column2,
table.table.column2 tr th,
table.table.column2 tr td{display:block;}

table.table.column2 tr th,
table.table.column2 tr td{border:none;}

}

/* column3 */
div.txtbase div.scroll-table-wrap{
    padding:0;
    margin:0;
}
table.table.column3 tr th,
table.table.column3 tr td{
    font-weight:600;
    padding:15px;
}
table.table.column3 tr th{text-align:center;}
table.table.column3 tr td{text-align:right;}
table.table tr td.half{
    width:25%;
    text-align:center;
}

table.table.column3 tr td:first-child{
    color:#070C1A;
    font-size:clamp(16px,2.604vw,20px);
}
table.table.column3 tr td span.price{
    color:#FF4027;
    font-size:clamp(20px,3.125vw,24px);
}

table.table.column3 span.label{
    position:relative;
    top:-4px;
    display:inline-block;
    font-size:12px;
    text-align:center;
    line-height:30px;
    width:120px;
    height:30px;
    border:1px solid #e0e0e0;
    border-radius:16px;
    margin-right:1.5em;
}

table.table.column3 span.label.grn{
    color:#1A9FA0;
    background:#F0FDFF;
    border-color:#E1F4F7;
}
table.table.column3 span.label.yel{
    color:#C9A84C;
    background:#FEFFF0;
    border-color:#E9EBCC;
}
table.table.column3 span.label.red{
    color:#FF4027;
    background:#FFFAFA;
    border-color:#F7E1E1;
}

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

table.table.column3{
  min-width:700px;
  max-width:initial;
}  

}


/* post */
div.inner.post{width:768px;}
div.inner.post div.heading + div.txt{padding-top:30px;}
div.inner.post div.heading h1.txt-title{
    position:relative;
    color:#070C1A;
    font-size:clamp(26px,5.468vw,42px);
    line-height:1.5;
    font-weight:600;  
}
div.inner.post div.heading div.detail{padding-top:1em;}
div.inner.post div.heading div.genre{
    padding:5px;
    background:#F8F8FA;
}

div.inner.post div.txt p{
    color:#879694;
    line-height:2;
}
div.inner.post div.txt p + p{margin-top:1em;}