@charset "UTF-8";
/* =============================================================
   世界対応ケータイ（国際ローミング）ページ専用スタイル
   既存コンポーネントで表現できない箇所のみを定義する
   ============================================================= */
/* -------------------------------------------------------------
   メインビジュアル
   SP はデザインどおり全幅、PC はデザイン未提供のため中央寄せで縮小
   ------------------------------------------------------------- */
.p-roaming-mv {
  margin-top: 0;
  margin-bottom: 0;
  background: #40CAFD;
  display: -ms-grid;
  display: grid;
  place-content: center;
  place-items: center;
}
.p-roaming-mv img {
  display: block;
  margin-inline: auto;
  width: min(100%, 500px);
  aspect-ratio: 750/764;
}
@media screen and (min-width: 900px) {
  .p-roaming-mv img {
    max-width: none;
    width: auto;
    aspect-ratio: 2000/390;
  }
}

/* -------------------------------------------------------------
   背景色付きセクション
   l-section-hasbg は padding で余白を持つため外側の margin を打ち消し、
   デザインどおり前後のセクションと隙間なく連結する
   ------------------------------------------------------------- */
.p-roaming-bleed {
  margin-top: 0;
  margin-bottom: 0;
  padding-block: 40px;
}

/* -------------------------------------------------------------
   中央寄せの注釈（c-list-notice のぶら下げインデントを解除）
   ------------------------------------------------------------- */
.p-roaming-note {
  margin-bottom: 0;
}
.p-roaming-note > li {
  margin-left: 0;
  text-indent: 0;
  text-align: center;
}

/* -------------------------------------------------------------
   ＼ NEW ／ ラベル
   ------------------------------------------------------------- */
.p-roaming-new {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px;
  margin-bottom: 8px;
  color: #333333;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (min-width: 900px) {
  .p-roaming-new {
    font-size: 2.2rem;
    gap: 20px;
    margin-bottom: 12px;
  }
}
.p-roaming-new::before, .p-roaming-new::after {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2px;
  height: 27px;
  background: #333333;
  content: "";
}
@media screen and (min-width: 900px) {
  .p-roaming-new::before, .p-roaming-new::after {
    height: 36px;
  }
}
.p-roaming-new {
  /* 左は ＼ 、右は ／ */
}
.p-roaming-new::before {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.p-roaming-new::after {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

/* -------------------------------------------------------------
   リード見出しの黄色ハイライト
   c-ttl-index は 1つ目の span が塗り、2つ目の span が縁取りのため
   1つ目の span 内の em だけを黄色にする
   ------------------------------------------------------------- */
.p-roaming-lead-ttl {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
.p-roaming-lead-ttl em {
  font-weight: 900;
}
.p-roaming-lead-ttl > span:first-child em {
  color: #FFFE00;
}

/* -------------------------------------------------------------
   h2 上の吹き出しラベル
   ------------------------------------------------------------- */
.p-roaming-subcopy {
  margin-top: 40px;
  margin-bottom: 0;
  line-height: 1;
  text-align: center;
}
.p-roaming-subcopy span {
  position: relative;
  display: inline-block;
  min-width: 96px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #14cd0a;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (min-width: 900px) {
  .p-roaming-subcopy span {
    min-width: 120px;
    padding: 4px 12px;
    font-size: 1.6rem;
  }
}
.p-roaming-subcopy span {
  /* 吹き出しの下向き三角 */
}
.p-roaming-subcopy span::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-top: -1px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid #14cd0a;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: "";
}
@media screen and (min-width: 900px) {
  .p-roaming-subcopy span::after {
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-top: 12px solid #14cd0a;
  }
}
.p-roaming-subcopy + .c-ttl-index-wrapper {
  margin-top: 16px;
}
@media screen and (min-width: 900px) {
  .p-roaming-subcopy {
    margin-top: 60px;
  }
  .p-roaming-subcopy + .c-ttl-index-wrapper {
    margin-top: 20px;
  }
}

/* -------------------------------------------------------------
   安心の3大ポイント
   ------------------------------------------------------------- */
.p-roaming-point {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 4px 1fr 4px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.p-roaming-point > li {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-grid-rows: auto 4px 4.5em;
  grid-template-rows: auto 4.5em;
  gap: 4px;
  margin: 0;
  text-indent: 0;
}
@media screen and (min-width: 900px) {
  .p-roaming-point {
    gap: 40px;
    max-width: 640px;
    margin-inline: auto;
  }
}
.p-roaming-point__icon {
  position: relative;
  display: -ms-grid;
  display: grid;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 80px;
  height: 80px;
  border: 1px solid #14cd0a;
  border-radius: 50%;
  background: #F5F7F9;
  place-items: center;
}
@media screen and (min-width: 900px) {
  .p-roaming-point__icon {
    width: 100px;
    height: 100px;
  }
}
.p-roaming-point__icon img {
  display: block;
}
.p-roaming-point__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  padding: 2px 8px;
  border-radius: 40px;
  background: #FF4187;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 900px) {
  .p-roaming-point__badge {
    top: -12px;
    font-size: 1.2rem;
  }
}
.p-roaming-point__text {
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
@media screen and (min-width: 900px) {
  .p-roaming-point__text {
    font-size: 1.4rem;
  }
}

/* -------------------------------------------------------------
   料金表（c-table-priority のバリエーション）
   デザインどおり見出し行を除いて1行おきに背景色を付ける
   ------------------------------------------------------------- */
.p-roaming-table tbody {
  vertical-align: top;
}
.p-roaming-table {
  /* 1行目は見出し行のため、3行目以降を1行おきに着色する */
}
.p-roaming-table tbody > tr:nth-of-type(2n + 3) > td {
  background: #E9ECEF;
}
.p-roaming-table {
  /* プラン名が折り返さないよう左右の余白を詰める */
}
.p-roaming-table th,
.p-roaming-table td {
  padding: 12px 8px;
}
@media screen and (min-width: 900px) {
  .p-roaming-table th,
  .p-roaming-table td {
    padding: 20px;
  }
}

/* -------------------------------------------------------------
   海外あんしん定額 料金表（c-table-priority 内の表現）
   ------------------------------------------------------------- */
.p-roaming-plan {
  /* プラン名セル */
}
.p-roaming-plan__badge {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 40px;
  background: #FF4187;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}
@media screen and (min-width: 900px) {
  .p-roaming-plan__badge {
    font-size: 1.4rem;
  }
}
.p-roaming-plan__badge {
  /* 通常料金 */
}
.p-roaming-plan__badge--normal {
  font-weight: normal;
  border: none;
  background: #FFF;
  color: #333333;
}
.p-roaming-plan__name {
  margin-bottom: 0;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.7;
}
@media screen and (min-width: 900px) {
  .p-roaming-plan__name {
    font-size: 1.6rem;
  }
}
.p-roaming-plan__sub {
  margin-bottom: 0;
  font-size: 1.4rem;
  line-height: 1.7;
  margin-top: 4px;
}
@media screen and (min-width: 900px) {
  .p-roaming-plan__sub {
    font-size: 1.6rem;
  }
}
.p-roaming-plan {
  /* 料金セル */
}
.p-roaming-plan__list {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.p-roaming-plan__list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.7;
  text-indent: 0;
}
@media screen and (min-width: 900px) {
  .p-roaming-plan__list > li {
    font-size: 1.6rem;
  }
}
.p-roaming-plan__list > li {
  /* 料金側のみ太字 */
}
.p-roaming-plan__list > li > :last-child {
  font-weight: bold;
}
.p-roaming-plan__list {
  /* 中略を表す縦三点（> li より詳細度を上げる） */
}
.p-roaming-plan__list > .p-roaming-plan__omit {
  display: -ms-grid;
  display: grid;
  margin-left: 60px;
  gap: 2px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px 0;
}
.p-roaming-plan__list > .p-roaming-plan__omit span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(141, 141, 141, 0.5);
}
.p-roaming-plan__term {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-roaming-plan__price {
  color: #FF4187;
  font-size: 1.6rem;
  font-weight: bold;
}
.p-roaming-plan {
  /* 割引前の料金（打ち消し） */
}
.p-roaming-plan__price-before {
  margin-left: 8px;
  color: #8D8D8D;
  font-weight: normal;
  text-decoration: line-through;
}
.p-roaming-plan {
  /* 料金セル内の補足（毎月1回無料 など） */
}
.p-roaming-plan__note {
  margin-bottom: 0;
  color: #8D8D8D;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.7;
}

/* -------------------------------------------------------------
   渡航前の確認アラート
   ------------------------------------------------------------- */
.p-roaming-alert {
  margin-top: 24px;
  padding: 16px;
  background: #FCEDF0;
  text-align: center;
}
.p-roaming-alert .fa-exclamation-circle {
  display: block;
  margin-bottom: 4px;
  color: #FF4187;
  font-size: 2.4rem;
}
.p-roaming-alert__text {
  margin-bottom: 12px;
  color: #FF4187;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.6;
}
@media screen and (min-width: 900px) {
  .p-roaming-alert {
    padding: 24px;
  }
  .p-roaming-alert__text {
    font-size: 1.6rem;
  }
}

/* -------------------------------------------------------------
   カンタン4ステップ
   ------------------------------------------------------------- */
@media screen and (min-width: 900px) {
  .p-roaming-step-wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
.p-roaming-step {
  /* STEP ラベルが枠上に飛び出すため上に余白を確保する */
  margin-top: 24px;
}
@media screen and (max-width: 899px) {
  .p-roaming-step + .p-roaming-step {
    margin-top: 40px;
  }
}
.p-roaming-step__ttl {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
}
.p-roaming-step img {
  display: block;
  width: 100%;
  max-width: 295px;
  height: auto;
  margin-inline: auto;
}
@media screen and (min-width: 900px) {
  .p-roaming-step {
    max-width: 640px;
    margin-inline: auto;
  }
  .p-roaming-step__ttl {
    font-size: 2.2rem;
  }
}

/* -------------------------------------------------------------
   よくある質問（アコーディオンのタイトルに Q. を表示）
   ------------------------------------------------------------- */
.p-roaming-faq .c-accordion-text {
  position: relative;
  padding-left: 28px;
}
.p-roaming-faq .c-accordion-text i {
  position: absolute;
  top: 0;
  left: 0;
  color: #6F2FFF;
  font-style: normal;
  font-weight: bold;
}
.p-roaming-faq .c-accordion-body > p:first-child {
  position: relative;
  padding-left: 28px;
}
.p-roaming-faq .c-accordion-body > p:first-child i {
  position: absolute;
  top: 0;
  left: 0;
  color: #FF4187;
  font-style: normal;
  font-weight: bold;
}

/* =============================================================
   定額対象国・地域（area.html）／サービスエリア・料金一覧（area_detail.html）
   ============================================================= */
/* -------------------------------------------------------------
   絞り込みラジオボタン
   下端の三角形はデザインどおり背景色と同じ色で切り抜く
   ------------------------------------------------------------- */
.p-roaming-filter {
  position: relative;
}
.p-roaming-filter::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -24px;
  left: 50%;
  width: 56px;
  height: 24px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #EEFFBB;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-roaming-filter {
  /* c-form-radio は inline-block ＋ 右マージン前提のため、縦積みに上書きする */
}
.p-roaming-filter__list {
  display: -ms-grid;
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}
.p-roaming-filter__list .c-form-radio {
  margin-right: 0;
  display: block;
}
.p-roaming-filter__list {
  /* エリア絞り込みは2列。項目名が長い「機内ケータイ・船内ケータイ」は1行使う */
}
.p-roaming-filter__list--col2 {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
.p-roaming-filter__list--col2 .c-form-radio:last-child {
  grid-column: 1/-1;
}
@media screen and (min-width: 900px) {
  .p-roaming-filter__list {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 640px;
    margin-inline: auto;
  }
  .p-roaming-filter__list--col2 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------
   地域別アコーディオン（定額対象国・地域）
   ------------------------------------------------------------- */
.p-roaming-area__card {
  margin-bottom: 16px;
}
@media screen and (min-width: 900px) {
  .p-roaming-area__card {
    margin-bottom: 16px;
  }
}
.p-roaming-area__card:last-of-type {
  margin-bottom: 0;
}
.p-roaming-area__card {
  /* 中身は JavaScript で生成するため、共通の下線・下余白は打ち消す */
}
.p-roaming-area__card .c-accordion-title-active + .c-accordion-body {
  padding-bottom: 20px;
}
.p-roaming-area__card .c-accordion-title-active + .c-accordion-body::after {
  display: none;
}
.p-roaming-area__list {
  padding-block: 4px;
}
.p-roaming-area__kana, .p-roaming-area__name {
  margin-bottom: 0;
  line-height: 1.8;
}
.p-roaming-area__kana {
  color: #8D8D8D;
}
.p-roaming-area {
  /* 50音の見出しと国・地域はどちらも下線区切り */
}
.p-roaming-area__kana, .p-roaming-area__item {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E9ECEF;
}
.p-roaming-area {
  /* 対象サービスのタグ */
}
.p-roaming-area__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 4px;
  margin: 8px 0 0;
  list-style: none;
}
.p-roaming-area__tags > li {
  background-color: #E9ECEF;
  border-radius: 2px;
  padding-inline: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.9;
  white-space: nowrap;
}
.p-roaming-area__error {
  color: #FF4187;
}

/* -------------------------------------------------------------
   エリア別のサービスエリア・料金一覧
   ------------------------------------------------------------- */
.p-roaming-detail {
  /* エリア名はラジオボタンの選択で伝わるため、見出しは読み上げ用に留める */
}
.p-roaming-detail__ttl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.p-roaming-detail__list {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  padding-inline: 20px;
}
@media screen and (max-width: 899px) {
  .p-roaming-detail__list {
    padding-inline: 5.3332vw;
  }
}
.p-roaming-detail__list {
  /* PC はデザイン未提供のため、既存のエリアページに合わせて3列で並べる */
}
@media screen and (min-width: 900px) {
  .p-roaming-detail__list {
    padding-inline: 0;
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
    -webkit-column-gap: 24px;
       -moz-column-gap: 24px;
            column-gap: 24px;
  }
}
.p-roaming-detail {
  /* 料金表の iframe。
     中身は ymobile 側のためクロスオリジンで内部の余白は指定できないので、
     iframe 自体を内側に寄せて SP の左右余白を作る（国一覧と同じ 5.3332vw に揃える）。
     PC は既存のエリアページと同じく l-inner の幅いっぱいに表示する。 */
}
.p-roaming-detail__frame {
  display: block;
  margin-inline: auto;
}
@media screen and (max-width: 899px) {
  .p-roaming-detail__frame {
    width: calc(100% - 10.6664vw);
  }
}