@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

.pc_only { display: block; }
.tab_only { display: none; }
.sp_only { display: none; }
.pc_sp_only{ display: block; }

:root {
    --main-text-color: #352B2B;
    --main-cv-color: #d91300;
    --yellow-color: #F8DB2A;
    --yellow2-color: #FFE966;
    --sub-color: #077CFF;
    --sub-color2: #CFF6FF;
    --main-width :1100px;
    --main-transition: all 0.3s ease;
    --main-transition2: all 0.5s ease;
    --main-hover-opacity: 0.8;
    --main-box-shadow: 0px 0px 3px 3px rgba(17,17,26,0.08);
    --main-box-shadow-btn: 0px 3px 0 0 rgba(17,17,26,0.15);
    --main-box-shadow-btn2: 0px 4px 0 0 rgba(17,17,26,0.3);
    --fontsize-h2: 30px;
    --fontsize-h2-sub: 24px;
    --fontsize-h3: 24px;
    --fontsize-h3-sub: 18px;
    --fontsize-h3-sub2: 16px;
    --fontsize-p: 16px;
    --fontsize-p2: 14px;
  }

body {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-size: var(--fontsize-p);
    line-height: 1.5;
    color: var(--main-text-color);
}
ul,ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wrapper {
    position: relative;
}

.wrapper section {
    width: var(--main-width);
    margin: 0 auto;
}
.wrapper section.wide {
    width: auto;
}

.wrapper section h2 {
    font-size: var(--fontsize-h2);
}
.wrapper section h3 {
    font-size: var(--fontsize-h3);
}

.wrapper section p {
    font-size: var(--fontsize);
}
p.btn {
    border-radius: 10px;    
}

p.btn a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: var(--main-transition);
    box-shadow: var(--main-box-shadow-btn);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: var(--fontsize-p);
}
p.btn a:hover {
    opacity: var(--main-hover-opacity);
}
a.arrow::after {
    content: '';
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #fff;
    margin-bottom: 3px;
 }

p.btn.white {
    background: #fff;
    width: 300px;
    border-radius: 10px;
    padding-bottom: 0;
}
p.btn.btn.white a {
    background: #fff;
    color: var(--main-text-color);
    transition: var(--main-transition);
}
p.btn.btn.white a.arrow::after {
    margin-left: 20px;
    border-left-color: var(--main-text-color);
}

p.btn__cv {
    border-radius: 20px;
    background: #fff;
}
p.btn__cv a {
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: auto;
    border-radius: 20px;
    color: #fff;
    background: var(--main-cv-color);
    transition: var(--main-transition);
    width: 800px;
    font-size: 30px;
    padding: 25px 0;
    box-shadow: var(--main-box-shadow-btn);
}
p.btn__cv a:hover {
    opacity: var(--main-hover-opacity);
    transform: translateY(3px);
    box-shadow: var(--main-box-shadow-btn2);
}
p.btn__cv a.arrow::after {
    margin-left: 12px;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
    margin-bottom: 3px;
}

span.num {
}

.header-container {
    width: var(--main-width);
    margin: auto;
    opacity: 0;
    animation: headerFadeIn 0.5s ease-out 0.3s forwards;
}

@keyframes headerFadeIn {
    to {
      opacity: 1;
    }
  }
.head-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
.head-content .inner {
    display: flex;
    align-items: center;
}
.head-content .inner .logo {
    margin-right: 50px;
    transition: all 0.3s ease;
}

.head-content .inner p.lead {
    font-size: var(--fontsize-p);
}

.head-content .inner .logo:hover {
    opacity: var(--main-hover-opacity);
}
p.btn__head-biz {
    margin-top: 40px;
}
p.btn__head-biz a {
    color: #2B4E77;
    transition: var(--main-transition);
}
p.btn__head-biz a:hover {
    opacity: var(--main-hover-opacity);
}

p.btn__head-biz a.arrow::after {
    border-left-color: #2B4E77;
}

p.btn__head-cv a {
    font-size: 20px;
    display: block;
    text-decoration: none;
    color: #fff;
    background: var(--main-cv-color);
    transition: 0.15s ease-in-out;
    box-shadow: var(--main-box-shadow-btn);
    padding: 0 20px;
    border-radius: 0 0 20px 20px;
    padding-bottom: 20px;
    position: relative;
    padding-top: 0;
}

p.btn__head-cv a:hover {
    opacity: var(--main-hover-opacity);
    padding-top: 3px;
}

p.btn__head-cv a.arrow::after {
    border-left-color: #fff;
    margin-left: 12px;
 }
 p.btn__head-cv a span {
    padding-top: 10px;
}
 p.btn__head-cv a span.sub  {
    display: block;
    text-align: center;
    font-size: 13px;
    line-height: inherit;
    padding-top: 20px;
}

/* modal */
.remodal, .remodal-wrapper:after {
    padding: 0!important;
}
.remodal-close {
    top: 10px;
    font-weight: bold;
    left: inherit;
    right: 0;
    width: 75px;
    line-height: 1;
    color: var(--main-text-color);
    opacity: 0.9;
}
.remodal-close::before {
    font-size: 14px;
    content: '\00d7 閉じる';
    width: 75px;
}

.modal_apply.modal_apply h2 {
    background: var(--yellow-color);
    font-size: var(--fontsize-h3-sub);
    padding: 15px 0;
    margin-bottom: 40px;
}
.modal_apply.modal_apply .inner {
    width: 400px;
    margin: auto;
    margin-bottom: 40px;
}
.modal_apply.modal_apply .inner p {
    text-align: left;
    font-size: var(--fontsize-p2);
}
.modal_apply.modal_apply .inner .btn {
    margin-bottom: 10px;
}

.modal_apply.modal_apply .inner .btn a {
    position: relative;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: auto;
    border-radius: 10px;
    color: #fff;
    background: var(--main-cv-color);
    transition: var(--main-transition);
    font-size: 24px;
    padding: 20px 0;
    box-shadow: var(--main-box-shadow-btn);
}
.modal_apply.modal_apply .inner .btn a.arrow::after {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #fff;
}

.modal_apply.modal_apply .inner .btn.line a {
    background: #06C755;
}

.modal_apply.modal_apply .inner .btn.line a.arrow::before {
    content: '';
    background: url(../images/top/img_line_icon.png) no-repeat 0 center;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 20px;
}

img.banner {
    transition: var(--main-transition);
}

img.banner:hover {
    opacity: var(--main-hover-opacity);
}
.main-nav{
    margin-bottom: 40px;
    position: relative;
    z-index: 100;
}

.main-nav ul{
    display: flex;
    justify-content: space-between;
}
.main-nav ul li{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #ccc;
    text-align: center;
}
.main-nav ul li:first-child{
    padding-left: 0;    
}
.main-nav ul li:last-child{
    padding-right: 0;
    border-right: none;
}

.main-nav ul li,
.main-nav ul li a{
    font-size: 16px;
    font-weight: bold;
    color: var(--main-text-color);
}
.main-nav ul li {
    cursor: pointer;
}
.main-nav ul li a {
    text-decoration: none;
}

.main-nav ul li {
    background: #fff;
    position: relative;
    transition: var(--main-transition);
  }

.main-nav ul li a:hover {
    opacity: var(--main-hover-opacity);
}

/* サブメニュー */
.main-nav ul li > ul.submenu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    position: absolute;
    top: 150%;
    left: 0;
    transition: var(--main-transition);
  }

  .main-nav ul li > ul.submenu li {
    display: block;
    width: 100%;
    padding: 0;
    border-right: none;
    white-space: nowrap;
  }
  
.main-nav ul li > ul.submenu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    opacity: 1!important;
    text-align: left;
    min-width: 160px;
}
  
.main-nav ul li > ul.submenu li a:hover {
    background: #f1f1f1;
}
  
.main-nav ul li.has-submenu:hover ul.submenu {
z-index: 100;
opacity: 1;
visibility: visible;
transform: translateY(0);
}

header .kv {
    max-width: 1600px;
    margin: auto;
    margin-bottom: 40px;
    position: relative;
    z-index: -1;
    opacity: 0;
    animation: headerKVFadeIn 0.5s ease-out 0.3s forwards;

}
@keyframes headerKVFadeIn {
    to {
      opacity: 1;
    }
  }
header .kv img {
    margin: auto;
}

.header-banner{
    display: flex;
    align-items: center;
    width: 52%;
    justify-content: flex-end;
}

.header-banner img{
    display: block;
    width: 20vw;
    margin: 5%;
    max-width: 250px;
}


@media screen and (min-width:1618px){
    header .kv::before {
        content: '';
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 20%,
            rgba(255, 255, 255, 0) 100%
          );
        width: 250px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    header .kv::after {
        content: '';
        background: linear-gradient(
            to left,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 20%,
            rgba(255, 255, 255, 0) 100%
          );
        width: 250px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }
}
section#announce ul {
    width: var(--main-width);
    border : 2px solid #ccc;
    border-color: var(--main-cv-color);
    padding: 20px 40px;
    margin-bottom: 40px;
}
section#announce ul li a {
    color: var(--main-cv-color);
}

section#banner ul { 
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

section#important-notice {
    margin: 70px auto 50px;
}

.info {
    background-image: url(../images/top/bg_info.png);
    background-size: cover;
    background-position: 50% 25%;
    padding: 0 0 50px;
}

span.info-tag {
    background-color: #d91300;
    padding: 7px 15px;
    color: #fff;
    font-size: 12px;
}

#important-notice h3 {
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 30px 0;
}

#important-notice p {
    text-align: center;
    margin: 30px 0 15px;
}

.info ul {
    background-color: rgb(255, 255, 255, 0.8);
    width: 80%;
    margin: 0 auto;
    padding: 30px 30px 30px 50px;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
}

section#recommend {
    background-color: var(--yellow2-color);
    margin: 50px 0;
}

#recommend .inner {
    margin: 0 auto;
    width: var(--main-width);
    padding: 50px;
}

#recommend .container{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

img.logo {
    width: 35%;
}

.pre-esim, .pre-charge{
    background-color: #fff;
    width: 49%;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
}

.bland-img{
    margin: 20px 0 30px;
}

#recommend h3{
    text-align: center;
    margin: 10px 0 20px;
    font-weight: bold;
}

#recommend .point{
    display: flex;
    justify-content: center;
}

#recommend span{
    background-color: #666666;
    color: #fff;
    padding: 6px 10px;
    margin: 0 2px;
}

#recommend p{
    text-align: center;
    font-size: 12px;
    margin: 15px 0;
}

#recommend small{
    line-height: 1rem;
}

section#list__country {
    margin-bottom: 100px;
}

section#list__country h2 { 
    text-align: center;
    margin-bottom: 30px;
}

section#list__country .inner {
    background: var(--yellow2-color);
    padding: 40px 0 20px;
}

section#list__country .inner h3.lead_campaign {
    text-align: center;
    font-weight: bold;
    color: var(--main-cv-color);
    font-size: 24px;
    margin-bottom: 30px;
    animation: shake 5s infinite;
}

section#list__country .inner h3.lead_campaign span.note {
    display: block;
    font-weight: normal;
    font-size: 14px;
    padding-top: 10px;
}

@keyframes shake {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(-2px);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(-0);
    }
    100% {
      transform: translateY(0);
    }
  }
section#list__country ul { 
    width: var(--main-width);
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

section#list__country ul li {
    width: 14.6666%; /* 100 ÷ 6 */
    box-sizing: border-box;
    background: #fff;
    box-shadow: var(--main-box-shadow);
    border-radius: 10px;
    margin-bottom: 20px;
}
section#list__country ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    height: 100%;
    padding: 20px 10px;
    border-radius: 10px;
    border: 3px solid #fff;
    outline-offset: -3px;    
    transition: 0.1s ease-in-out;
}

section#list__country ul li a:hover {
    border: 3px solid var(--main-cv-color);
    outline-offset: -3px;
    opacity:   var(--main-hover-opacity)
}
section#list__country ul li div img {
    margin: auto;
    margin-bottom: 10px;
}

section#list__country ul li h3 {
    font-size: 18px;
    color: var(--main-text-color)
}
section#list__country ul li p.price {
    font-weight: bold;
    color: var(--main-cv-color);
    margin-bottom: 10px;
    font-size: 18px;
}
section#list__country ul li p.price span.yen {
    font-size: 80%;
}
    
section#list__country ul li p.btn__apply {
    font-size: 13px;
    line-height: 1;
    padding: 5px 0 8px;
    width: 80%;
    margin: auto;
    color: #fff;
    background: var(--main-cv-color);
}

section#list__country .btn.white {
    margin: auto;
    margin-bottom: 20px;
}
section#reasons h2 {
    text-align: center;
    color: var(--sub-color);
    margin-bottom: 60px;
}

section#reasons ul.reasons__point3 {
    margin: auto;
    display: flex;
    justify-content: space-around;
    width: 900px;
    margin-bottom: 80px;
}

section#reasons ul.reasons__point3 li {
    text-align: center;
    width: 260px;
    border: 3px solid var(--sub-color);
    border-radius: 20px;
    padding: 20px 10px;
}

section#reasons ul.reasons__point3 li img {
    margin: auto;
    margin-bottom: 30px;
}

section#reasons ul.reasons__point3 li h3 {
    color: var(--sub-color);
    margin-bottom: 20px;
}

section#reasons .detail a.sub {
    color: var(--main-text-color);
}
section#reasons .detail a.sub span {
    font-size: 85%;
}

section#reasons h3 {
    text-align: center;
    margin-bottom: 40px;
}
section#reasons ul.reasons__apply_steps {
    margin: auto;
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin-bottom: 80px;
}

section#reasons ul.reasons__apply_steps li {
    text-align: center;
}

section#reasons ul.reasons__apply_steps li img {
    width: 200px;
    margin-bottom: 10px;
}

section#reasons p.btn__cv {
    margin-bottom: 60px;
}

section#receive {
    background: #4284FF;
}

section#receive .inner {
    width: var(--main-width);
    margin: auto;
    padding: 40px 0;
}

section#receive .inner h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}
section#receive ul { 
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

section#receive ul li{ 
    flex: 1;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    background: #fff;
}
section#receive ul li h3 {
    font-size: 20px;
    margin-bottom: 20px;    
}
section#receive ul li img { 
    margin: auto;
    margin-bottom: 20px;
}

section#receive ul li p.note { 
    font-size: 80%;
}

section#receive p.btn {
    background: #fff;
    width: 300px;
    margin: auto;
}
section#receive p.btn a {
    display: block;
    color: var(--main-text-color);
    background: var(--yellow2-color);
}
section#receive p.btn a:hover {
    opacity: var(--main-hover-opacity);
}
section#receive a.arrow::after {
    border-left-color: var(--main-text-color);    
}
section#airport {
    background: var(--sub-color2);
    margin-bottom: 80px;   
}

section#airport .inner {
    width: var(--main-width);
    margin: auto;
    padding: 40px 0;
}

section#airport .inner h2 {
    text-align: left;
    color: var(--sub-color);
    width: 660px;
    margin: auto;
    margin-bottom: 40px;
    background: url(../images/top/img_recieve0_airport.png) no-repeat 0 center;
    padding-left: 120px;
}
section#airport .inner h2 span.sub {
    display: block;
    font-size: 80%;
}
section#airport .inner ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

section#airport .inner ul li {
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    width: 32.1%;
}

section#airport .inner ul li a {
    position: relative;
    display: block;
    font-weight: bold;
    text-decoration: none;
    color: var(--main-text-color);
    background: #fff;
    box-shadow: 0 3px 0 0 rgba(52, 164, 255, 0.2);
    border-radius: 10px;
    padding: 20px 20px;
    transition: var(--main-transition);
}
section#airport .inner ul li a:hover {
    opacity: var(--main-hover-opacity);
}
section#airport .inner ul li a::after {
    content: '';
    display: block;
    position: absolute;
    margin-left: 6px;
    background: url(../images/top/img_arrow.png) no-repeat 0 center;
    width: 25px;
    height: 25px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 20px;
 }

section#airpot .inner h2 span.sub {
    font-size: 80%;
}

section#review{
    margin-bottom: 100px;
}

section#review h2{
    text-align: center;
    margin-bottom: 40px;
}
section#review h2 span{
    display: inline-block;
    position: relative;
}
section#review h2 img{
    position: absolute;
    left: -70px;
}
section#review ul.review__list {
    margin-bottom: 60px;
}

section#review .voice {
    background: var(--yellow2-color);
    border-radius: 10px;
    width: 300px;
    margin: 0 8px;
    padding: 10px;
}

section#review .voice-inner {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 15px;
    height: 100%;
}
section#review .voice-inner  .voice__head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
section#review .voice-inner  .voice__head img {
    margin-right: 10px;
}

section#review .voice-inner  .voice__head p {
    margin-top: 10px;
}
section#review .voice-inner p {
    font-size: var(--fontsize-p2);
    margin-bottom: 10px;
}
section#review .voice-inner p.c-plan {
    font-weight: bold;
}
section#review .voice-inner p a {
    color: #333;
}
section#review .voice-inner p.img_rate img {
    max-width: 130px;
}  

section#review .swiper {
  width: 100%;
}

section#review .swiper-wrapper {
  height: 100%;
  align-items: stretch!important;
}

section#review .swiper-slide {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-button-prev,
.swiper-button-next {
    top: 42%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: '';
  display: inline-block;
  border: solid #000;
  border-width: 0 1px 1px 0;
  padding: 5px;
  transform: rotate(135deg);
  margin-left: 5px;
}

.swiper-button-next::after {
  transform: rotate(-45deg);
  margin-left: 0;
  margin-right: 5px;
}
.swiper-button-next,
.swiper-button-prev {
  width: 48px;
  height: 48px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 矢印の見た目（デフォルトアイコンをカスタマイズ） */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px;
  color: black;
}

section#news{
    margin-bottom: 100px;
}

section#news h2, section#recommend h2, section#forbiz h2, section#important-notice h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: var(--fontsize-h2);
    font-weight: bold;
}

section#news ul{
    margin-bottom: 40px;
}

section#news ul li{
    border-bottom: 1px solid #999;
    padding: 20px 0;
}

section#news ul li a{
    text-decoration: none;
    color: var(--main-text-color);
    transition: var(--main-transition);
}
section#news ul li a:hover{
    text-decoration: none;
    color: var(--main-text-color);
    opacity: var(--main-hover-opacity);
}

section#news ul li a span.news__date {
    padding-right: 20px;
}

section#news ul li a span.news__cate {
    border: 1px solid var(--main-text-color);
    padding: 0 5px;
    font-size: var(--fontsize-p2);
}

section#news ul li a span.news__title {
    padding-left: 20px;
}

section#news p.btn {
    margin: auto;
}

section#news p.btn a {
    border: 1px solid #dddddd;
}

section#news p.btn a:hover {
    opacity: var(--main-hover-opacity);
}

section#news p.btn a.arrow::after {
    margin-left: 20px;
    border-left-color: var(--main-text-color);
}

section#support {
    margin-bottom: 80px;
}

section#support .inner {
    background: var(--yellow2-color);
    border-radius: 20px;
    box-sizing: border-box;
    position: relative;
    height: 300px;
    padding-left: 50px;
 }

 section#support .inner h2 {
    position: relative;
    z-index: 1;
    padding-top: 50px;
    padding-bottom: 20px;
 }
 section#support .inner p {
    position: relative;
    z-index: 1;
    font-size: 20px;
    margin-bottom: 30px;
 }

section#support .inner .navigator {
   position: absolute;
   bottom: 0;
   right: 70px;
}

section#forbiz{
    text-align: center;
}

section#forbiz .inner{
    width: 880px;
    margin: auto;
    margin-bottom: 80px;
}

section#forbiz p.pr img {
    margin-bottom: 20px;
    max-width: 480px;
}
section#trivia {
    background: #434343;
}
section#trivia .inner {
    width: var(--main-width);
    margin: auto;
    padding: 40px 0;
}

section#trivia h2 {
    color: var(--yellow-color);
    margin-bottom: 20px;
    font-size: var(--fontsize-h2-sub); 
}
section#trivia p.lead {
    color: #fff;
    margin-bottom: 20px;
}

section#trivia dl {
    color: #fff;
    background: #6C6C6C;
    padding: 30px;
    margin-bottom: 40px;
}
section#trivia dl:last-child {
    margin-bottom: 0;
}

section#trivia dl dt {
    color: var(--yellow-color);
    font-weight: bold;
    margin-bottom: 10px;
    font-size: var(--fontsize-h3-sub); 
}

section#trivia dl dd { 
    font-size: var(--fontsize-p2); 
}

section#trivia dl dd h3 {
    color: var(--yellow-color);
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: var(--fontsize-h3-sub2);
}

section#trivia dl dd li {
    margin-bottom: 20px;
}

section#trivia dl dd li span{
    color: var(--yellow-color);
}



footer .footer-content {
    position: relative;
    padding: 80px 0 150px;
    background: #221815;
    color: #fff;
}

footer .footer-content a {
    text-decoration: none;
    color: #fff;
}

footer .footer-content .inner { 
    width: var(--main-width);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
}

footer .footer-content .inner .footer__menu nav ul { 
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

footer .footer-content .inner .footer__menu nav ul li a {
    transition: var(--main-transition); 
}
footer .footer-content .inner .footer__menu nav ul li a:hover {
    opacity: var(--main-hover-opacity);
}

footer .footer-content .inner .footer__menu nav.footer-nav ul li { 
    font-size: 16px;
}

footer .footer-content .inner .footer__menu nav.footer-nav2 ul li { 
    font-size: 13px;
}

footer .footer-content .inner p.copyright { 
    color: #999;
    font-size: 12px;    
}

.inview {
    opacity: 0;
    transition: var(--main-transition2);
    transform: translateY(30px);
}
.inview.is-show { 
    opacity: 1;
    transform: translateY(0); /* 30px上に移動する */
}

.inview.fade {
    opacity: 0;
    transition: var(--main-transition2);
    transform: translateY(0);
}
.inview.is-show { 
    opacity: 1;
    position: relative;
    /* z-index: 0; */
}

.footer__cv {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    transition: var(--main-transition2);
}}

.footer__cv.hide {
    transform: translateY(100%);
  }

.footer__cv p.btn {
    border-radius: 10px;
    background: #fff;
    border-radius: 50px;
    width: 720px;
    margin: auto;
    margin-bottom: 10px;
    transition: var(--main-transition);
}
.footer__cv p.btn a {
    position: relative;
    border-radius: 50px;
    display: block;
    color: #fff;
    background: var(--main-cv-color);
    font-size: 30px;
    padding: 15px 0 20px;
    box-shadow: var(--main-box-shadow-btn);
    text-align: left;
    padding-left: 90px;
    letter-spacing: 0.05em;
}
.footer__cv p.btn a span.num {
    font-size: 120%;
    padding-left: 5px;
}

.footer__cv p.btn:hover {
    transform: translateY(3px);
}
.footer__cv p.btn a:hover {
    opacity: var(--main-hover-opacity);
    box-shadow: var(--main-box-shadow-btn2);
}
.footer__cv p.btn a.arrow-airplane::after {
    content: '';
    background: url(../images/top/img_icon_airplane.png) no-repeat 0 center;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 65px;
    transition: var(--main-transition);
}

.footer__cv p.btn a.arrow-airplane:hover::after {
    right: 0px;
}
    
.footer__cv p.note {
    text-align: center;
    font-size: 12px;
}

p.page-top a{
    display: block;
    position: fixed;
    bottom: 40px;
    margin: auto;
    background: #333;
    padding: 20px;
    border-radius: 50px;
    z-index: 100;
    right: 50px;
    width: 70px;
    height: 70px;
    opacity: 0.9;
    transition: var(--main-transition);
}
p.page-top a:hover{
    transform: translateY(-5px);
    opacity: 1;
}

p.page-top img{
    max-width: 100%;
}
#cp-list {
    z-index: 100;
    position: fixed;
    margin-bottom: 100px;
    left: 0;
    bottom: 20%;
    transition: var(--main-transition);
}

#cp-list:hover {
    transform: translateY(-4px);
}

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

    .tab_only {
        display: block;
    }
     :root {
        --main-width :auto;  
     }
     .head-content .inner {
        align-items: start;
     }
     .head-content .inner .logo {
        margin-right: 20px;
        width: 150px;
    }
    .head-content .inner p.lead.pc_only {
        height: 97px;
        display: flex;
        align-items: center;
        font-size: 1.5vw;
    }
    .main-nav {
        margin-bottom: 20px;
    }
    .main-nav ul li {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .main-nav ul li, .main-nav ul li a {
        font-size: 1.6vw;
    }
    section#announce,
    section#banner,
    section#list__country .inner,
    section#receive .inner,
    section#airport .inner,
    section#news,
    section#support,
    section#forbiz,
    section#trivia .inner,
    footer .footer-content .inner,
    .btn__cv {
        padding-left: 10px;
        padding-right: 10px;
    }

    section#reasons ul.reasons__point3,
    section#reasons ul.reasons__apply_steps,
    section#forbiz .inner,
    p.btn__cv a {
        width: auto;
    }

    section#list__country ul li {
        width: 24%;
    }
    section#reasons ul.reasons__point3 li,
    section#airport .inner ul li {
     width: 31%;
    }
    section#reasons ul.reasons__apply_steps li {
        padding: 0 20px;
    }

    section#review .voice {
        width: 200px;
    }
    p.page-top a {
        right: 10px;
    }

    footer .footer-content .inner {
        display: block;
    }
    footer .footer-content .inner p {
        margin-bottom: 20px;
    }

    .bnrLeft__img {
        width: 120px;
    }
}

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

    .pc_only { display: none!important; }
    .tab_only { display: none!important; }
    .sp_only { display: block; }
    .pc_sp_only{ display: none; }

    :root {
        --fontsize-h2: 1.2rem;
        --fontsize-h2-sub: 1rem;
        --fontsize-h3: 1rem;
        --fontsize-h3-sub: 0.8rem;
        --fontsize-h3-sub2: 0.8rem;
        --fontsize-p: .8rem;
        --fontsize-p2: .8rem;
    }

    section:not(.wide) {
        padding: 0 20px;
    }
    p.btn__head-cv a {
        font-size: .8rem;
    }

    p.btn__cv a {
        width: auto;
        font-size: 1rem;
    }
    p.btn.white {
        width: auto;
    }
    
    .header-container {
        padding-top: 70px;
        opacity: 1;
        animation: none;
    }

    .header-container.inview.is-show {
        transform: none;
    }

    .head-content {
        width: 100%;
        background: #fff;
        height: 50px;
        display: block;
        position: fixed;
        top: 0;
        z-index: 100;
    }

    .head-content .inner .logo {
        margin-right: 5px;
    }
    .head-content img{
        height: 50px;
        width: auto;
    }
    p.btn__head-cv {
        position: absolute;
        top: 0;
        right: 50px;
    }
    p.btn__head-cv a {
        height: 50px;
        border-radius: 0;
        height: 100%;
        box-shadow: none;
        font-size: 0.8rem;
        padding: 0 10px;
        line-height: 50px;
    }
    p.btn__head-cv a:hover {
        padding-top: 0;
    }
    p.btn__head-cv a.arrow::after {
        margin-left: 6px;
    }
    .menu_btn_area {
        background: #2D2D2D;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
    }

    .menu_btn {
        cursor: pointer;
        position: relative;
        display: block;
        border-radius: 2px;
        width: 32px;
        height: 32px;
        margin: 9px;
    }
    .menu_btn span {
        position: relative;
        display: block;
        height: 32px;
    }
    .menu_btn:before,
    .menu_btn span:before,
    .menu_btn span:after {
        content: '';
        position: absolute;
        left: 6px;
        right: 6px;
        top: 50%;
        height: 2px;
        border-radius: 2px;
        margin-top: -1px;
        background: #fff;
        transition: all 0.5s;
    }
    .menu_btn span:before {
        transform: translateY(-6px);
    }
    .menu_btn span:after {
        transform: translateY(6px);
    }

    .menu_btn.open:before {
        opacity: 0;
    }
    .menu_btn.open span:before {
        transform: translateY(0) rotate(45deg);
    }
    .menu_btn.open span:after {
        transform: translateY(0) rotate(-45deg);
    }
 
    .header_nav {
        position: fixed;
        top: 0;
        left: 0;
        transition: all 0.2s;
        width: 100%;
        opacity: 0;
        transform: translateY(50px);
        z-index: 0;
        visibility: hidden;
    }
    .header_nav.open {
        opacity: 1;
        z-index: 1;
        visibility: visible;
    }

    .header_nav ul {
        width: 100%;
        background: #fff;
    }
    .header_nav ul li {
    }
    .header_nav ul li a {
        display: block;
        text-decoration: none;
        color: var(--main-text-color);
        font-size: 14px;
        position: relative;
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
    }
    .header_nav ul li a::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        /* border-top: 1px solid #999;
        border-right: 1px solid #999;
        transform: rotate(45deg); */
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .header_nav ul li > ul.submenu {
        display: none;
        opacity: 0;
        background: #f7f7f7;
      }
      
    .header_nav ul li.parent.open > .submenu {
        display: block;
        opacity: 1;
    }

    .header_nav ul li.parent > a::after {
        transform: rotate(135deg);
        border-top: 1px solid #666;
        border-right: 1px solid #666;
    }

    .header_nav ul li.parent.open > a::after {
        transform: rotate(-45deg);
        top: 0;
    }
    div.overlay {
        display: none;
        opacity: 0;
        transition: all .2s;
    }
    div.sp_overlay.open {
        opacity: 1;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: rgba(0, 0, 0, 0.2);
    }

    header p.lead {
        padding: 0 20px;
        margin-bottom: 20px;
        font-size: var(--fontsize-p);
    }

    .modal_apply.modal_apply .inner {
        width: auto;
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .modal_apply.modal_apply h2 {
        text-align: left;
        padding-left: 10px;
        margin-bottom: 20px;
    }
    
    .remodal-close {
        top: 8px;
        width: 65px;
        width: auto; /*bug fix*/
    }
    .remodal-close::before {
        font-size: 12px;
        width: 65px;
    }

    .modal_apply.modal_apply .inner .btn a {
        font-size: 1rem;
        padding: 10px 0;
    }

    .modal_apply.modal_apply .inner .btn.line a.arrow::before {
        width: 32px;
        height: 32px;
        background-size: contain;
    }
    .modal_apply.modal_apply .inner .btn a.arrow::after {
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid #fff;
    }

    header .kv {
        margin-bottom: 20px;
    }

    header .kv::before,
    header .kv::after {
        display: none;
    }

    section#important-notice {
        margin: 30px auto 50px;
    }

    section#announce ul {
        padding: 15px;
        margin-bottom: 20px;
    }
    section#announce ul li a {
        color: var(--main-cv-color);
    }

    section#banner ul {
        margin-bottom: 40px;
        display: block;
        gap: 10px;
    }

    section#banner ul li {
        margin-bottom: 15px;
    }

    section#banner ul li:last-child {
        margin-bottom: 0;
    }

    section#banner ul li img {
        margin: auto;
        width: 375px;
        max-width: 100%;
    }

    section#news h2, section#recommend h2, section#forbiz h2, section#important-notice h2 {
        font-size: 2.5rem;
    }

    #important-notice h3, #recommend h3 {
        font-size: 2.2rem;
}

    #recommend .container{
        flex-direction: column;
    }

    #recommend .inner {
        padding: 50px 20px;
    }


    .pre-esim, .pre-charge{
        width: 100%;
        margin: 10px 0;
    }

    section#list__country {
        margin-bottom: 60px;
    }

    section#list__country h2 {
        padding: 0 20px;
    }
    section#list__country .inner {
        padding: 20px 10px 10px;
    }
    section#list__country .inner h3.lead_campaign {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    section#list__country .inner h3.lead_campaign span.note {
        font-size: 0.8rem;
    }

    section#list__country ul li {
        position: relative;
        width: 31%;
    }

    section#list__country ul li a {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    section#list__country ul li h3 {
        font-size: .9rem;
    }

    section#list__country ul li p.btn__apply {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: auto;
    }

    section#reasons h2 {
        margin-bottom: 20px;
    }

    section#reasons ul.reasons__point3 li h3 {
        text-align: left;
    }
    
    section#reasons ul.reasons__point3 {
        width: auto;
        display: block;
        margin-bottom: 40px;
    }
    
    section#reasons ul.reasons__point3 li {
        display: flex;
        align-items: center;
        width: auto;
        padding: 10px;
        text-align: left;
        margin-bottom: 20px;
        border-radius: 15px;
        border-width: 2px;
    }
    section#reasons ul.reasons__point3 li h3 {
        margin-bottom: 10px;
    }
    section#reasons ul.reasons__point3 li .detail {
        width: 85%;
    }
    section#reasons ul.reasons__point3 li img {
        width: 15%;
        margin-bottom: 10px;
        padding-top: 10px;
        padding-right: 10px;
    }

    section#reasons ul.reasons__apply_steps {
        width: auto;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    section#reasons ul.reasons__apply_steps li {
        width: 46%;
        padding: 0;
        margin-bottom: 20px;
    }

    section#receive .inner {
        padding: 40px  20px;
    }

    section#receive .inner h2 {
        margin-bottom: 20px;
    }

    section#receive ul { 
        flex-wrap: wrap;
        justify-content: space-between;
        margin: auto;
        gap: 4%;        
    }

    section#receive ul li {
        flex: inherit;
        width: 48%;
        border-radius: 15px;
        padding: 15px;
        margin-bottom: 20px;
    }
    section#receive ul li h3 {
        font-size: .9rem;
    }
    section#receive ul li p {
        text-align: left;
    }

    section#receive p.btn {
        width: auto;
    }
    section#airport .inner {
        padding: 40px 20px;
    }
    section#airport .inner h2 {
        width: auto;
        margin-bottom: 30px;
    }

    section#airport .inner h2 span.sub {
        padding-top: 10px;
    }
    section#airport .inner ul {
        display: block;
        margin-bottom: 10px;
    }

    section#airport .inner ul li {
        width: auto;
        margin-bottom: 10px;
    }
    section#airport .inner ul li:last-child {
        margin-bottom: 0;
    }
    section#airport .inner ul li a {
        font-size: .9rem;
    }

    section#airport .inner ul li a::after {
        right: 15px;
        background-size: 80% auto;
    }

    section#review {
        margin-bottom: 80px;
    }
    section#review ul.review__list {
        margin-bottom: 20px;
    }
    section#review .voice {
    padding: 10px;
    margin: 0 5px;
    }
    section#review h2 img {
        width: 30px;
    position: absolute;
    left: -45px;
    }
    .swiper-button-prev,
    .swiper-button-next {
        top: 45%;
    }

    section#news ul li a span.news__date {
        padding-right: 10px;
    }

    section#news ul li a span.news__title {
        display: block;
        padding-left: 0;
    }

    section#news{
        margin-bottom: 80px;
    }

    section#news p.btn a{
        font-size: var(--fontsize);
    }

    section#support {
        margin-bottom: 60px;
    }
    section#support .inner {
        height: auto;
        padding-left: 0;
        padding: 20px;
     }
    
     section#support .inner h2 {
        padding-top: 0;
        padding-bottom: 50px;
        position: relative;
        z-index: 1;
     }
     section#support .inner p {
        font-size: .9rem;
        margin-bottom: 20px;
     }
    
    section#support .inner .navigator {
       position: absolute;
       bottom: auto;
       top: -10px;
       right: 10px;
    }
    section#support .inner p.btn {
        margin-bottom: 10px;
     }


    section#forbiz{
    }
    
    section#forbiz .inner{
        width: auto;
        margin-bottom: 60px;
    }

    section#trivia {
        padding: 20px;
    }

    section#trivia .inner {
        padding: 20px 0;
    }

    section#trivia dl {
        padding: 20px;
        margin-bottom: 20px;
    }
    section#trivia dl dd h3 {
        margin-top: 20px;
    }


    footer .footer-content {
        padding: 40px 20px 30px;
    }

    footer .footer-content .inner {
        display: block;
    
    }
    footer .footer-content .inner .logo {
        margin-bottom: 40px;
    
    }

    footer .footer-content .inner .logo img {
        margin: auto;
    }

    footer .footer-content .inner .footer__menu nav ul {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 40px;
    }

    footer .footer-content .inner .footer__menu nav ul li {
        width: 48%;        
    }

    p.page-top a{
        bottom: 10px;
        padding: 10px;
        border-radius: 50px;
        z-index: 100;
        right: 10px;
        width: 44px;
        height: 44px;
    }
    p.page-top.hide a {
        transform: translateY(200%);
      }

    .footer__cv {
        display: none;
    }

    #cp-list {
        display: none;
    }
}

 @media screen and (max-width:640px){
    .pc_sp_only{
        display: block;
    }
    .pre-esim .app-button-box .app-button, .pre-charge .app-button-box .app-button{
        width: 100% !important;
    }
 }