@charset "UTF-8";
/* =========================================================
   大学生協 WiFi・eSIM 分岐LP 共通スタイル
   対象: lp-wifi.php / lp-esim-trip.php / lp-esim-study.php
========================================================= */
*{
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
}
.lp-page {
  --accent: #1e6fd9;
  --accent-dark: #0d3f8f;
  --accent-orange: #f7941d;
  --accent-orange-dark: #e07d00;
  --ribbon: #5ac2f1;
  --light-bg: #eaf6fd;
  --navy: #173a8a;
  --area-a: #2196c9;
  --area-b: #4fc3c0;
  --area-c: #3fae82;
  --text: #222831;

  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: #fff;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.lp-page.theme-esim {
  --accent: #e34a59;
  --accent-dark: #b7333f;
  --ribbon: #e34a59;
  --light-bg: #fdeef1;
}

.lp-page img { max-width: 100%; height: auto; vertical-align: middle; }
.lp-page a { color: inherit; text-decoration: none; }
.lp-page * { box-sizing: border-box; }

.lp-wrap {
  max-width: 918px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.lp-section {
  padding: 40px 20px;
  text-align: center;
}
.lp-section + .lp-section { padding-top: 0; }
.lp-lead { font-weight: 500; }
.lp-page h3 { font-weight: 700; }
.idpass { font-weight: 500; }
.lockup { font-weight: 700; }

/* ---------- ヒーロー ---------- */
.lp-hero {
  position: relative;
  padding: 26px 20px 34px;
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,40,90,.55) 0%, rgba(255,255,255,.85) 100%);
  z-index: 0;
}
.theme-esim .lp-hero::before {
  background: linear-gradient(180deg, rgba(232,83,106,.35) 0%, rgba(255,255,255,.9) 100%);
}
.lp-hero > * { position: relative; z-index: 1; }

.lp-corner-ribbon {
  position: absolute;
  top: 18px;
  left: -62px;
  width: 220px;
  transform: rotate(-45deg);
  background: var(--ribbon);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  padding: 8px 0;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.lp-corner-ribbon-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: auto;
  z-index: 2;
}
@media screen and (max-width: 480px) {
  .lp-corner-ribbon-img { width: 90px; }
}

.lp-brandbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border-radius: 40px;
  padding: 10px 22px;
  width: fit-content;
  margin: 0 auto 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.lp-brandbar img { height: 26px; width: auto; }
.lp-brandbar .x { font-weight: 700; color: #999; font-size: 15px; }
.lp-brandbar .service-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
}

.lp-hero-copy {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #123;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.lp-hero-copy .em { color: var(--accent); font-size: 1.5em; }

.lp-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 6px 0 4px;
}
.lp-hero-logo img.globe-icon { width: 58px; height: 58px; }
.lp-hero-logo .wordmark {
  font-size: 40px;
  font-weight: 800;
  font-style: italic;
  color: var(--accent);
  letter-spacing: .5px;
}
.lp-hero-note {
  text-align: right;
  font-size: 11px;
  color: #555;
  margin: 0 0 14px;
}

.lp-hero-phone {
  display: block;
  margin: 0 auto 18px;
  max-width: 210px;
}

/* ---------- リボンラベル（端を山形にしたバナー） ---------- */
/* 参考: https://saruwakakun.com/html-css/reference/ribbon 「1. 端を山形に」 */
.ribbon-label {
  position: absolute;
  top: -2px;
  left: 4px;
  right: 4px;
  z-index: 2;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  background: var(--ribbon-color, var(--accent));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ribbon-label::before,
.ribbon-label::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.ribbon-label::before {
  left: 0;
  border-width: 20px 0 20px 16px;
  border-color: transparent transparent transparent var(--ribbon-bg, #fff);
}
.ribbon-label::after {
  right: 0;
  border-width: 20px 16px 20px 0;
  border-color: transparent var(--ribbon-bg, #fff) transparent transparent;
}

/* ---------- プランカード（通常/長期 横並び） ---------- */
.lp-plan-cards {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.lp-plan-card {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 40px 10px 16px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.lp-plan-card .lead {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.lp-plan-card .price-off {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-orange);
  line-height: 1.1;
  margin: 4px 0;
}
.lp-plan-card .price-off small { font-size: .5em; }
.lp-plan-card .sub {
  font-size: 11px;
  color: #444;
  margin-bottom: 8px;
}
.lp-plan-card .idpass {
  font-size: 11px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px 6px;
  margin: 6px 0;
}
.lp-plan-card .idpass b { color: var(--accent); }

.lp-plan-wide {
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 36px 16px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.lp-plan-wide .headline {
  font-size: 15px;
  font-weight: 700;
  margin: 14px 0 2px;
}
.lp-plan-wide .price {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent-orange);
}
.lp-plan-wide .price small { font-size: .4em; }
.lp-plan-wide .off-badge {
  display: inline-block;
  background: var(--light-bg);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 6px;
}

/* ---------- CTAボタン ---------- */
.lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent-orange);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 30px;
  box-shadow: 0 4px 0 var(--accent-orange-dark);
  margin: 14px 0 4px;
  transition: transform .15s ease;
}
.lp-btn:hover { opacity: .92; transform: translateY(1px); }
.lp-btn .arrow {
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff;
}
.lp-btn.small { font-size: 13px; padding: 10px 16px; }

/* ---------- 見出し帯（三角タグ付き） ---------- */
.lp-headband {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 26px;
}
.lp-headband .tri {
  width: 0; height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 20px solid var(--light-bg);
}
.lp-headband .tri.right { transform: scaleX(-1); }
.lp-headband .bar {
  background: var(--light-bg);
  color: var(--accent);
  font-weight: 800;
  font-size: 20px;
  padding: 10px 26px;
  text-align: center;
}

.lp-h2 {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  margin: 0 0 14px;
}
.lp-lead {
  text-align: center;
  font-size: 16px;
  margin: 0 0 20px;
  color: #333;
font-weight: 700;
}
.lp-lead strong { color: var(--accent); }

.lp-slash-heading {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  margin: 30px 0 20px;
}

/* ---------- デバイスビジュアル ---------- */
.lp-device-visual {     max-width: 430px;text-align: center;margin: 10px auto 24px;}

/* ---------- 4ポイント（丸アイコン） ---------- */
.lp-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}
.lp-points .point-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  position: relative;
}
.lp-points .point-circle svg { width: 46%; height: 46%; }
.lp-points .point-no {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.lp-points .point-no span { font-size: 1.6em; font-style: italic; }
.lp-points .point-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 3カード（選ばれる理由） ---------- */
.lp-reason-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.lp-reason-cards figure { margin: 0; text-align: center; }
.lp-reason-cards .icon-wrap {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 6px;
}
.lp-reason-cards .icon-wrap img { border-radius: 8px; }
.lp-reason-cards figcaption { font-size: 12px; font-weight: 700; }

/* ---------- テーブル ---------- */
.lp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; }
.lp-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}
.lp-table caption {
  text-align: left;
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
  padding-bottom: 8px;
}
.lp-table th, .lp-table td {
  border: 1px solid #dbe4ee;
  padding: 8px 10px;
  text-align: center;
}
.lp-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}
.lp-table tbody th {
  background: #eef3fa;
  font-weight: 700;
  white-space: nowrap;
}
.lp-table tbody tr:nth-child(even) td { background: #f7fafd; }
.lp-table .area-a { background: var(--area-a) !important; color: #fff; }
.lp-table .area-b { background: var(--area-b) !important; color: #fff; }
.lp-table .area-c { background: var(--area-c) !important; color: #fff; }

/* エリア表（PDF準拠: 角丸ヘッダー・等幅3列・列間に余白） */
.lp-area-table {
  border-collapse: separate;
  border-spacing: 14px 3px;
  table-layout: fixed;
}
.lp-area-table th, .lp-area-table td { border: none; }
.lp-area-table thead th {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 10px;
}
.lp-area-table tbody td {
  font-weight: 700;
  padding: 9px 10px;
}
.lp-area-table tbody tr:nth-child(even) td { background: none; }
.lp-area-table tbody td:nth-child(1) { background: #e9f2f7; }
.lp-area-table tbody td:nth-child(2) { background: #eaf6f6; }
.lp-area-table tbody td:nth-child(3) { background: #eaf6f0; }
.lp-area-note { font-size: 14px; color: #555; margin-top: -6px; }

/* ---------- 受取拠点アイコン ---------- */
.lp-spot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.lp-spot-grid .spot {
  border: 1px solid #bcd6e6;
  border-radius: 10px;
  padding: 14px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.lp-spot-grid .spot svg { width: 34px; height: 34px; margin-bottom: 8px; color: #6fa8c9; }

/* ---------- 流れステップ ---------- */
.lp-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: start;
  margin: 14px 0 10px;
}
.lp-flow .step { text-align: center; position: relative; }
.lp-flow .step .badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 12px;
  padding: 3px 8px;
  margin-bottom: 6px;
}
.lp-flow .step .thumb {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  background: #eef3fa;
  margin-bottom: 6px;
}
.lp-flow .step .thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp-flow .step p { font-size: 10.5px; margin: 0; }
.lp-flow .arrow-sep {
  align-self: center;
  text-align: center;
  color: var(--accent);
  font-size: 18px;
}

.lp-note-list { font-size: 12px; color: #555; margin: 10px 0 0; text-align: left; }
.lp-note-list li { margin-bottom: 3px; }

/* ---------- 専用Webページ枠 ---------- */
.lp-webpage-box {
  background: #e0f7fb;
  border-radius: 16px;
  padding: 26px 18px;
  text-align: center;
  margin: 30px 0 70px;
}
.lp-webpage-box .lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 14px;
}
.lp-webpage-box .lockup img { width: 34px; height: 34px; }
.lp-idpass-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 6px;
}
.lp-idpass-box b {
  background: #fff;
  color: var(--text);
  padding: 3px 10px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
}

/* ---------- 注意書きボックス（黄） ---------- */
.lp-warning-box {
  background: #fffbe0;
  border: 2px solid #f6d743;
  border-radius: 14px;
  padding: 22px 16px;
  margin: 24px 0;
}
.lp-warning-box .w-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  color: #a97a00;
  margin-bottom: 10px;
}
.lp-warning-box .w-lead { text-align: center; font-size: 13px; margin-bottom: 18px; }
/* 2項目：PCは横並び（2カラム）／スマホは縦並び */
.lp-warning-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-warning-steps .w-step {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: #fff;
  border-radius: 10px;
  padding: 14px;
}
.lp-warning-steps .w-num {
  flex: none;
  width: 34px;
  align-self: stretch;
  border-radius: 8px;
  background: #3a3a3a;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 18px;
}
.lp-warning-steps .w-body { flex: 1; min-width: 0; }
.lp-warning-steps .w-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.lp-warning-steps .w-head h4 { margin: 0; font-size: 15px; }
.lp-warning-steps h4 { margin: 0 0 4px; font-size: 15px; text-align: center; }
.lp-warning-steps p { margin: 0; font-size: 12px; color: #444; text-align: left; line-height: 1.7; }
.lp-warning-steps .w-note { font-size: 10.5px; color: #888; margin-top: 6px; text-align: left; }
.lp-warning-steps .w-icon { flex: none; height: 36px; width: auto; }
@media screen and (max-width: 767px) {
  .lp-warning-steps { grid-template-columns: 1fr; }
}

.lp-tab-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.lp-tab-row .tab {
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 22px;
  border-radius: 20px;
  background: #fff;
}
.lp-tab-row .tab.disabled { opacity: .4; }
.lp-tab-row .tab-img img {
  height: 40px;
  width: auto;
  transition: opacity .15s ease;
}
.lp-tab-row .tab-img:hover img { opacity: .8; }
.lp-tab-sub { text-align: center; font-size: 13px; font-weight: 700; margin: 14px 0 4px; }

/* ---------- FAQ アコーディオン ---------- */
.lp-faq { margin: 10px 0 0; }
.lp-faq-item {
  border-bottom: 1px solid #e2e6ec;
}
.lp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  text-align: left;
  padding: 16px 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.lp-faq-q .q-mark {
  flex: none;
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
}
.lp-faq-q .q-text { flex: 1; text-align: left; }
.lp-faq-q .q-chevron {
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -4px;
}
.lp-faq-item.open .q-chevron { transform: rotate(-135deg); margin-top: 4px; }
.lp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: #f9fafc;
}
.lp-faq-item.open .lp-faq-a { max-height: 600px; }
.lp-faq-a-inner {
  display: flex;
  gap: 10px;
  padding: 4px 4px 18px 4px;
  font-size: 13px;
  color: #444;
  text-align: left;
}
.lp-faq-a-inner .a-mark { flex: none; color: var(--accent-orange); font-weight: 800; }

/* ---------- フッター（電話） ---------- */
.lp-footer-cta {
  text-align: center;
  padding: 34px 20px 40px;
  background: #e8e8e8;
}
.lp-footer-cta p { font-size: 13px; margin-bottom: 8px; }
.lp-footer-cta p.lp-footer-lead {
  font-size: 16px;
  font-weight: 700;
  color: #1a2b60;
  margin-bottom: 4px;
}
.lp-footer-cta p.lp-footer-note {
  font-size: 11.5px;
  font-weight: 400;
  color: #1a2b60;
  margin-bottom: 18px;
}
.lp-footer-cta p.lp-footer-sub {
  font-size: 15px;
  font-weight: 700;
  color: #1a2b60;
  margin-top: 6px;
}
.lp-tel {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 10px;
  font-size: 36px;
  font-weight: 900;
  color: #1a2b60;
}
.lp-tel small { font-size: 13px; font-weight: 700; display: block; color: #555; }
.lp-mail {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2b60;
  margin-top: 10px;
}
/* PCでは電話番号のリンクを無効化（スマホのみタップで発信） */
@media screen and (min-width: 769px) {
  .lp-tel { pointer-events: none; cursor: default; }
}
.lp-tel .lp-tel-icon { flex: none; height: 30px; width: auto; }
.lp-mail .lp-mail-icon { flex: none; height: 15px; width: auto; }
.lp-tel .lp-tel-number-img { height: 40px; width: auto; }
.lp-mail .lp-mail-address-img { height: 22px; width: auto; }
.theme-wifi .lp-tel .lp-tel-number-img { height: 64px; }
@media screen and (max-width: 480px) {
  .lp-tel { font-size: 28px; gap: 8px; }
  .lp-tel .lp-tel-icon { height: 24px; }
  .lp-tel .lp-tel-number-img { height: 30px; }
  .lp-mail .lp-mail-address-img { height: 18px; }
  .theme-wifi .lp-tel .lp-tel-number-img { height: 48px; }
}

.lp-plan-off-note { font-size: 11px; text-align: center; color: #666; margin-top: -8px; }

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 640px) {
  .lp-section { padding: 30px 16px; }
  .lp-h2 { font-size: 21px; }
  .lp-hero-logo .wordmark { font-size: 30px; }
  .lp-hero-logo img.globe-icon { width: 44px; height: 44px; }
  .lp-plan-wide .price { font-size: 28px; }
  .lp-reason-cards, .lp-points, .lp-spot-grid { gap: 6px; }
  .lp-flow { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .lp-flow .step p { display: none; }
  .lp-corner-ribbon { font-size: 13px; width: 190px; top: 14px; left: -56px; }
}
@media screen and (max-width: 420px) {
  .lp-flow { grid-template-columns: 1fr; }
  .lp-flow .arrow-sep { display: none; }
  .lp-flow .step { display: flex; align-items: center; gap: 10px; text-align: left; }
  .lp-flow .step .thumb { width: 64px; height: 64px; flex: none; margin-bottom: 0; }
  .lp-flow .step p { display: block; font-size: 12px; }
}

/* =========================================================
   PDF切り出し画像パーツ用（lp-wifi.php 等で使用）
========================================================= */
.lp-hero-img {
  position: relative;
  padding: 22px 16px 30px;
  background-size: cover;
  background-position: center top;
}
.lp-hero-main-visual {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto 20px;
}

.lp-midashi { text-align: center; margin: 0 0 18px; }
.lp-midashi img { display: inline-block; max-width: 90%; }
.lp-midashi.tight { margin-bottom: 18px; }

.lp-text-block { text-align: center; margin: 0 0 18px; }
.lp-text-block img { display: inline-block; }

.lp-img-block {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.lp-btn-img { display: block; margin: 16px auto 4px; max-width: ; }
a.lp-btn-img {display: inline-block;
    
}
.lp-btn-img img { transition: opacity .15s ease; }
.lp-btn-img:hover img { opacity: .85; }

.lp-points-img {
display: flex;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
}
.lp-points-img img { width: auto;height: auto;max-width: 150px; }

.lp-flow-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 10px;
}
.lp-flow-img img { width: 17%; min-width: 88px; height: auto; }
.lp-flow-img .arrow-sep { color: var(--accent); font-size: 16px; flex: none; }

.lp-plan-card img { display: block; width: 100%; }
.lp-plan-card .idpass { margin-top: 8px; }

@media screen and (max-width: 640px) {
  .lp-hero-main-visual { max-width: 100%; }
  .lp-points-img { gap: 6px; display: flex;flex-direction: row;flex-wrap: wrap;}
}
@media screen and (max-width: 480px) {
  .lp-flow-img img { width: 27%; min-width: 76px; }
  .lp-flow-img .arrow-sep:nth-of-type(3n) { display: none; }
}

/* =========================================================
   レスポンシブ（画像パーツ・リボン 共通）
========================================================= */
@media screen and (min-width: 641px) {
  .lp-hero-main-visual { max-width: 720px; }
}
@media screen and (max-width: 480px) {
  .ribbon-label { font-size: 12px; }
  .ribbon-label::before { border-width: 20px 0 20px 12px; }
  .ribbon-label::after { border-width: 20px 12px 20px 0; }
}
@media screen and (max-width: 359px) {
  .ribbon-label { font-size: 10.5px; }
}

/* =========================================================
   lp-wifi.php（PDF 3ページ目）専用の微調整
   ※ .lp-plan-card / .lp-flow-img は lp-wifi.php のみで使用する
     クラスのため、他2ページには影響しません。
========================================================= */
/* PC: プランカードの下余白を詰めてPDFの間延びを解消 */
.theme-wifi .lp-hero-img { padding-bottom: 20px; }
.lp-plan-card { padding-bottom: 12px; }
.lp-plan-card .lp-btn-img { margin-top: 12px; margin-bottom: 2px; }

/* 横スクロールのご案内（スマホのみ表示） */
.lp-scroll-note { display: none; }

@media screen and (max-width: 767px) {
  /* 横長の表・文字入り画像は縮小せず内部だけ横スクロール */
  .lp-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .lp-scroll-note {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #999;
    text-align: center;
    margin: 0 0 6px;
  }
  /* STEP1〜5 は折り返さず1列のまま横スクロール（読みやすい高さを維持） */
  .lp-flow-img {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 2px;
  }
  .lp-flow-img img { width: auto; height: 120px; min-width: 0; flex: none; }
  .lp-flow-img .arrow-sep { display: inline-block !important; }
}

/* スマホ幅では通常/長期の料金訴求カードを縦並びにして読みやすくする */
@media screen and (max-width: 480px) {
  .lp-plan-cards { flex-direction: column; }
}

/* =========================================================
   lp-esim-trip.php / lp-esim-study.php（PDF 4・5ページ目）の微調整
   ※ .theme-esim スコープのため lp-wifi.php には影響しません。
========================================================= */
/* ファーストビュー直下の余白を詰める */
.theme-esim .lp-hero-img { padding-bottom: 18px; }
/* 事務手数料など料金表直後の要素を表に近づける */
.theme-esim .lp-area-note { margin-top: 8px; }


/* =========================================================
   2026-07-15 追加修正
   - WiFi: ログインページのID/パスワード表示をPDF準拠へ
   - eSIM: お申込み前にご確認ください の1/2縦並び・黄色ボックス化
========================================================= */

/* --- WiFi：ログインページの ID/パスワード --- */
.theme-wifi .lp-login-pass {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: auto;
  max-width: 100%;
  margin: 10px auto 0;
  border: 3px solid #1784d6;
  background: #fff;
  line-height: 1;
}
.theme-wifi .lp-login-pass__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  background: #1784d6;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.theme-wifi .lp-login-pass__value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  background: #fff;
  color: #111;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}
.theme-wifi .lp-plan-card .lp-login-pass,
.theme-wifi .lp-webpage-box .lp-login-pass { margin-bottom: 2px; }
.theme-wifi .lp-webpage-box .lp-login-pass { margin-top: 6px; }
@media screen and (max-width: 480px) {
  .theme-wifi .lp-login-pass { width: 100%; max-width: 330px; }
  .theme-wifi .lp-login-pass__label { font-size: 11px; padding: 8px 10px; }
  .theme-wifi .lp-login-pass__value { font-size: 16px; padding: 8px 10px; }
}

/* --- eSIM：お申込み前にご確認ください --- */
.theme-esim .lp-warning-box {
  background: #f6f3d9;
  border: 4px solid #f1db14;
  border-radius: 22px;
  padding: 16px 18px 22px;
  margin: 18px 0 24px;
}
.theme-esim .lp-warning-box .lp-midashi {
  width: calc(100% - 20px);
  max-width: 760px;
  margin: -22px auto 16px;
}
.theme-esim .lp-warning-box .lp-midashi img {
  width: 100%;
  max-width: none;
}
.theme-esim .lp-warning-box .w-lead {
  color: #ef2b73;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 auto 18px;
}
.theme-esim .lp-warning-steps {
  display: block;
  max-width: 720px;
  margin: 0 auto;
}
.theme-esim .lp-warning-steps .w-step {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: none;
  padding: 0;
  margin: 0 0 16px;
}
.theme-esim .lp-warning-steps .w-num {
  flex: none;
  width: 56px;
  min-width: 56px;
  border-radius: 12px 0 0 12px;
  background: #4a4a4a;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-esim .lp-warning-steps .w-body {
  flex: 1;
  min-width: 0;
  background: #eceb82;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px 16px;
}
.theme-esim .lp-warning-steps .w-head {
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}
.theme-esim .lp-warning-steps .w-head h4 {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
  color: #444;
}
.theme-esim .lp-warning-steps .w-icon {
  height: 56px;
  width: auto;
}
.theme-esim .lp-warning-steps p {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
}
.theme-esim .w-remarks {
  max-width: 720px;
  margin: 2px auto 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #ef2b73;
  text-align: left;
}
.theme-esim .lp-tab-sub {
  color: #09a8a0;
  font-size: 18px;
  font-weight: 900;
  margin: 18px 0 10px;
}
.theme-esim .lp-tab-row { gap: 18px; margin: 8px 0 12px; }
.theme-esim .lp-tab-row .tab-img img { height: 42px; }

@media screen and (max-width: 767px) {
  .theme-esim .lp-warning-box {
    border-width: 3px;
    border-radius: 18px;
    padding: 12px 12px 18px;
  }
  .theme-esim .lp-warning-box .lp-midashi {
    width: calc(100% - 10px);
    margin: -18px auto 14px;
  }
  .theme-esim .lp-warning-box .w-lead {
    font-size: 13px;
    margin-bottom: 14px;
  }
  .theme-esim .lp-warning-steps .w-step { margin-bottom: 12px; }
  .theme-esim .lp-warning-steps .w-num {
    width: 46px;
    min-width: 46px;
    font-size: 28px;
    border-radius: 10px 0 0 10px;
  }
  .theme-esim .lp-warning-steps .w-body {
    padding: 12px 12px 14px;
    border-radius: 0 10px 10px 0;
  }
  .theme-esim .lp-warning-steps .w-head {
    gap: 10px;
    margin-bottom: 6px;
  }
  .theme-esim .lp-warning-steps .w-head h4 { font-size: 20px; }
  .theme-esim .lp-warning-steps .w-icon { height: 44px; }
  .theme-esim .lp-warning-steps p,
  .theme-esim .w-remarks { font-size: 12px; }
  .theme-esim .lp-tab-sub { font-size: 16px; }
  .theme-esim .lp-tab-row { gap: 10px; }
  .theme-esim .lp-tab-row .tab-img img { height: 36px; }
}


/* =========================================================
   2026-07-15 v4
   お申込み前確認ブロック／FAQ矢印の最終調整
========================================================= */
.theme-esim .lp-warning-steps .w-step {
  display: grid;
  grid-template-columns: 56px 74px minmax(0, 1fr);
  align-items: stretch;
}
.theme-esim .lp-warning-steps .w-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eceb82;
  padding: 12px 8px;
}
.theme-esim .lp-warning-steps .w-icon-box .w-icon {
  display: block;
  width: auto;
  height: 60px;
}
.theme-esim .lp-warning-steps .w-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px 16px 8px;
  text-align: left;
}
.theme-esim .lp-warning-steps .w-body h4 {
  margin: 0 0 6px;
  color: #444;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
}
.theme-esim .lp-warning-steps .w-body p {
  margin: 0;
  text-align: left;
}
.theme-esim .lp-warning-steps .w-body p span {
    font-weight: bold;
}
.theme-esim .lp-faq-q .q-chevron {
  border-right-color: #1685cf;
  border-bottom-color: #1685cf;
}
.theme-esim .lp-faq-q .q-mark { color: #1685cf; }

@media screen and (max-width: 767px) {
  .theme-esim .lp-warning-steps .w-step {
    grid-template-columns: 46px 58px minmax(0, 1fr);
  }
  .theme-esim .lp-warning-steps .w-icon-box { padding: 10px 6px; }
  .theme-esim .lp-warning-steps .w-icon-box .w-icon { height: 46px; }
  .theme-esim .lp-warning-steps .w-body { padding: 12px 10px 14px 6px; }
  .theme-esim .lp-warning-steps .w-body h4 { font-size: 20px; }
}


/* =========================================================
   FAQ最終調整：添付見本に合わせた開閉表示
========================================================= */
.theme-esim .lp-faq {
  margin-top: 10px;
  text-align: left;
}
.theme-esim .lp-faq-item {
  border-bottom: 1px solid #cfcfcf;
  padding: 0;
}
.theme-esim .lp-faq-q {
  min-height: 56px;
  padding: 14px 18px;
  gap: 10px;
  color: #111;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
}
.theme-esim .lp-faq-q .q-mark {
  color: #087fc8;
  font-size: 18px;
  font-weight: 800;
}
.theme-esim .lp-faq-q .q-chevron {
  width: 11px;
  height: 11px;
  border-right: 3px solid #087fc8;
  border-bottom: 3px solid #087fc8;
  transform: rotate(45deg);
  margin: -5px 2px 0 12px;
}
.theme-esim .lp-faq-item.open .q-chevron {
  transform: rotate(-135deg);
  margin-top: 5px;
}
.theme-esim .lp-faq-a {
  background: transparent;
}
.theme-esim .lp-faq-item.open .lp-faq-a {
  max-height: 1200px;
}
.theme-esim .lp-faq-a-inner {
  margin: 0 0 10px;
  padding: 20px 18px 20px;
  border: 1px solid #0b4ab8;
  border-radius: 12px;
  background: #f7fbff;
  gap: 14px;
  font-size: 14px;
  line-height: 1.75;
  color: #111;
}
.theme-esim .lp-faq-a-inner .a-mark {
  color: #f02a74;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .theme-esim .lp-faq-q {
    min-height: 50px;
    padding: 12px 10px;
    font-size: 13px;
  }
  .theme-esim .lp-faq-a-inner {
    padding: 14px 12px;
    border-radius: 10px;
    font-size: 13px;
  }
}


/* =========================================================
   2026-07-15 追加修正 v6
   ページ上部（ファーストビュー）を添付見本に近づける調整
========================================================= */

/* 共通：ヒーロー全体の見せ方 */
.lp-page .lp-hero-img {
  padding: 14px 18px 24px;
  background-size: cover;
  background-position: center center;
}
.lp-page .lp-hero-main-visual {
  display: block;
  width: 100%;
  margin: 0 auto 10px;
}

/* ---------------- WiFiトップ ---------------- */
.lp-wifi-page .lp-hero-img {
  padding-top: 18px;
  padding-bottom: 26px;
}
.lp-wifi-page .lp-hero-main-visual {
  max-width: 790px;
  margin-bottom: 8px;
}
.lp-wifi-page .lp-plan-cards {
  gap: 22px;
  align-items: stretch;
  padding: 0 24px;
}
.lp-wifi-page .lp-plan-card {
  background: #efefef;
  border: 3px solid #1481d7;
  border-radius: 22px;
  box-shadow: none;
  padding: 46px 18px 18px;
}
.lp-wifi-page .ribbon-label {
  left: 10px;
  right: 10px;
  top: -2px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 900;
}
.lp-wifi-page .ribbon-label::before { border-width: 24px 0 24px 18px; }
.lp-wifi-page .ribbon-label::after { border-width: 24px 18px 24px 0; }
.lp-wifi-page .lp-plan-card > img {
  width: 100%;
}
.lp-wifi-page .lp-plan-card .lp-btn-img {
  max-width: 360px;
  margin-top: 16px;
}
.lp-wifi-page .lp-login-pass {
  width: 100%;
  max-width: 354px;
  margin-top: 12px;
}
.lp-wifi-page .lp-login-pass__label { font-size: 14px; }
.lp-wifi-page .lp-login-pass__value { font-size: 18px; }

/* ---------------- eSIMトップ 共通 ---------------- */
.lp-esim-trip-page .lp-hero-img,
.lp-esim-study-page .lp-hero-img {
  padding-top: 0;
  padding-bottom: 14px;
}
.lp-esim-trip-page .lp-corner-ribbon-img,
.lp-esim-study-page .lp-corner-ribbon-img {
  top: 0;
    position: absolute;
  left: 0;
  width: 150px;
}
.lp-esim-trip-page .lp-hero-main-visual,
.lp-esim-study-page .lp-hero-main-visual {
  max-width: 670px;
  margin-bottom: 10px;
}
.lp-esim-trip-page .lp-plan-wide,
.lp-esim-study-page .lp-plan-wide {
  max-width: 704px;
  margin: 0 auto;
  background: rgba(255,255,255,.97) !important;
  border: 4px solid #e85a6a;
  border-radius: 22px;
  box-shadow: none;
  padding: 52px 18px 18px;
}
.lp-esim-trip-page .lp-plan-wide .ribbon-label,
.lp-esim-study-page .lp-plan-wide .ribbon-label {
  left: 10px;
  right: 10px;
  top: -2px;
  height: 48px;
  line-height: 48px;
  font-size: 17px;
  font-weight: 900;
}
.lp-esim-trip-page .lp-plan-wide .ribbon-label::before,
.lp-esim-study-page .lp-plan-wide .ribbon-label::before { border-width: 24px 0 24px 18px; }
.lp-esim-trip-page .lp-plan-wide .ribbon-label::after,
.lp-esim-study-page .lp-plan-wide .ribbon-label::after { border-width: 24px 18px 24px 0; }
.lp-esim-trip-page .lp-plan-wide .lp-img-block,
.lp-esim-study-page .lp-plan-wide .lp-img-block {
  max-width: 560px !important;
  margin-top: 18px !important;
}
.lp-esim-trip-page .lp-plan-wide .lp-btn-img,
.lp-esim-study-page .lp-plan-wide .lp-btn-img {
  max-width: 430px;
  margin-top: 14px;
}
/* 短期eSIMのヒーロー下の長期プラン誘導ボタンは見本に合わせて非表示 */
.lp-esim-trip-page .lp-hero-img > a.lp-btn-img:last-child {
/*  display: none;*/
}

/* PC〜タブレット微調整 */
@media screen and (max-width: 767px) {
  .lp-page .lp-hero-img { padding: 10px 12px 18px; }
  .lp-wifi-page .lp-plan-cards {
    gap: 12px;
    padding: 0;
  }
  .lp-wifi-page .lp-plan-card {
    border-radius: 18px;
    padding: 42px 12px 14px;
  }
  .lp-wifi-page .ribbon-label,
  .lp-esim-trip-page .lp-plan-wide .ribbon-label,
  .lp-esim-study-page .lp-plan-wide .ribbon-label {
    font-size: 15px;
    height: 42px;
    line-height: 42px;
  }
  .lp-wifi-page .ribbon-label::before,
  .lp-esim-trip-page .lp-plan-wide .ribbon-label::before,
  .lp-esim-study-page .lp-plan-wide .ribbon-label::before { border-width: 21px 0 21px 14px; }
  .lp-wifi-page .ribbon-label::after,
  .lp-esim-trip-page .lp-plan-wide .ribbon-label::after,
  .lp-esim-study-page .lp-plan-wide .ribbon-label::after { border-width: 21px 14px 21px 0; }
  .lp-esim-trip-page .lp-corner-ribbon-img,
  .lp-esim-study-page .lp-corner-ribbon-img { width: 118px; }
  .lp-esim-trip-page .lp-plan-wide,
  .lp-esim-study-page .lp-plan-wide {
    border-width: 3px;
    border-radius: 18px;
    padding: 46px 12px 14px;
  }
  .lp-esim-trip-page .lp-plan-wide .lp-img-block,
  .lp-esim-study-page .lp-plan-wide .lp-img-block {
    max-width: 100% !important;
  }
}
@media screen and (max-width: 480px) {
  .lp-wifi-page .lp-hero-main-visual,
  .lp-esim-trip-page .lp-hero-main-visual,
  .lp-esim-study-page .lp-hero-main-visual { margin-bottom: 8px; }
  .lp-wifi-page .lp-plan-card { padding-top: 40px; }
  .lp-wifi-page .lp-login-pass { max-width: 100%; }
  .lp-wifi-page .lp-login-pass__label { font-size: 10px; padding: 8px 8px; }
  .lp-wifi-page .lp-login-pass__value { font-size: 15px; padding: 8px 10px; }
  .lp-esim-trip-page .lp-corner-ribbon-img,
  .lp-esim-study-page .lp-corner-ribbon-img { width: 96px; }
  .lp-esim-trip-page .lp-plan-wide,
  .lp-esim-study-page .lp-plan-wide { padding-top: 42px; }
  .lp-esim-trip-page .lp-plan-wide .lp-btn-img,
  .lp-esim-study-page .lp-plan-wide .lp-btn-img { max-width: 100%; }
}


/* =========================================================
   2026-07-15 追加修正 v7
   - 上部背景に白の半透明オーバーレイ
   - 特典/皆様への見出しを上にはみ出す
   - ボックス背景を白へ
   - ID/パスワード枠の欠けを解消
   - 注意喚起見出しを上にはみ出す
========================================================= */

/* ヒーロー背景に白の半透明オーバーレイ */
.lp-page .lp-hero-img {
  position: relative;
  isolation: isolate;
}
.lp-page .lp-hero-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.34);
  z-index: 0;
}
.lp-page .lp-hero-img > * {
  position: relative;
  z-index: 1;
}

/* 各上部ボックス：見出しを上にはみ出し、背景色を白に */
.lp-wifi-page .lp-plan-card,
.lp-esim-trip-page .lp-plan-wide,
.lp-esim-study-page .lp-plan-wide {
  overflow: visible;
  background: #fff !important;
}
.lp-wifi-page .lp-plan-card {
  padding-top: 54px;
}
.lp-esim-trip-page .lp-plan-wide,
.lp-esim-study-page .lp-plan-wide {
  padding-top: 58px;
}
.lp-wifi-page .ribbon-label,
.lp-esim-trip-page .lp-plan-wide .ribbon-label,
.lp-esim-study-page .lp-plan-wide .ribbon-label {
  top: -16px;
  left: 18px;
  right: 18px;
  z-index: 3;
}

/* WiFi の ID/パスワード枠を見本どおり欠けなく表示 */
.lp-wifi-page .lp-login-pass {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 382px;
  margin: 12px auto 0;
  border: 4px solid #1687db;
  background: #1687db;
  padding: 4px;
  gap: 4px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.lp-wifi-page .lp-login-pass__label,
.lp-wifi-page .lp-login-pass__value {
  border-radius: 0;
}
.lp-wifi-page .lp-login-pass__label {
  flex: 1 1 auto;
  min-width: 0;
  background: #1687db;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
  line-height: 1.1;
}
.lp-wifi-page .lp-login-pass__value {
  flex: 0 0 auto;
  background: #fff;
  color: #111;
  font-size: 18px;
  font-weight: 900;
  padding: 6px 16px;
  line-height: 1.1;
  border-left: 4px solid #1687db;
}

/* 「お申込み前にご確認ください」見出しをボックスから上にはみ出す */
.theme-esim .lp-warning-box {
  position: relative;
  overflow: visible;
  padding-top: 54px;
}
.theme-esim .lp-warning-box .lp-midashi {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  max-width: 790px;
  margin: 0;
  z-index: 3;
}
.theme-esim .lp-warning-box .w-lead {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .lp-page .lp-hero-img::before {
    background: rgba(255,255,255,.38);
  }
  .lp-wifi-page .ribbon-label,
  .lp-esim-trip-page .lp-plan-wide .ribbon-label,
  .lp-esim-study-page .lp-plan-wide .ribbon-label {
    top: -14px;
    left: 12px;
    right: 12px;
  }
  .lp-wifi-page .lp-plan-card {
    padding-top: 50px;
  }
  .lp-esim-trip-page .lp-plan-wide,
  .lp-esim-study-page .lp-plan-wide {
    padding-top: 54px;
  }
  .lp-wifi-page .lp-login-pass {
    max-width: 100%;
    padding: 3px;
    gap: 3px;
  }
  .lp-wifi-page .lp-login-pass__label {
    font-size: 11px;
    padding: 7px 8px;
  }
  .lp-wifi-page .lp-login-pass__value {
    font-size: 16px;
    padding: 7px 12px;
    border-left-width: 3px;
  }
  .theme-esim .lp-warning-box {
    padding-top: 46px;
  }
  .theme-esim .lp-warning-box .lp-midashi {
    top: -22px;
    width: calc(100% - 20px);
  }
}


/* =========================================================
202607
========================================================= */

.lp-wifi-page .ribbon-label,
.lp-esim-trip-page .lp-plan-wide .ribbon-label,
.lp-esim-study-page .lp-plan-wide .ribbon-label {
  overflow: visible;
font-size: 20px;
  text-overflow: clip;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 20px) 50%,
    100% 100%,
    0 100%,
    20px 50%
  );
  padding-right: 30px;
  padding-left: 30px;
}
.lp-wifi-page .ribbon-label::before,
.lp-wifi-page .ribbon-label::after,
.lp-esim-trip-page .lp-plan-wide .ribbon-label::before,
.lp-esim-trip-page .lp-plan-wide .ribbon-label::after,
.lp-esim-study-page .lp-plan-wide .ribbon-label::before,
.lp-esim-study-page .lp-plan-wide .ribbon-label::after {
  display: none;
}

.lp-wifi-page .lp-hero-main-visual {
  margin-bottom: 30px;
}
.lp-wifi-page .lp-plan-cards {
  margin-top: 0;
}
.lp-esim-trip-page .lp-hero-main-visual,
.lp-esim-study-page .lp-hero-main-visual {
  margin-bottom: 30px;
}
.lp-esim-trip-page .lp-plan-wide,
.lp-esim-study-page .lp-plan-wide {
  margin-top: 0;
}

/* PC共通：文字サイズ・太さを見本に近づける */
@media screen and (min-width: 768px) {
  .lp-page {
    font-weight: 500;
  }
  .lp-page .lp-table {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  }
  .lp-page .lp-table th {
    font-weight: 900;
  }
  .lp-page .lp-table td {
    font-weight: 700;
  }
}

/* eSIM料金表：セルごとの角丸と余白を再現 */
.theme-esim .lp-price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px 4px;
  table-layout: fixed;
  background: #fff;
  font-size: 15px;
  line-height: 1.25;
}
.theme-esim .lp-price-table th,
.theme-esim .lp-price-table td {
  border: 0;
  padding: 8px 7px;
  border-radius: 5px;
  vertical-align: middle;
  white-space: nowrap;
}
.theme-esim .lp-price-table thead th {
  background: #064f85;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.theme-esim .lp-price-table tbody td {
  background: #eaf3f4;
  color: #111;
  font-size: 15px;
  font-weight: 800;
}
.theme-esim .lp-price-table tbody tr:nth-child(even) td {
  background: #eaf3f4;
}
.theme-esim .lp-price-table tbody th {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

/* 通常eSIM料金表 */
.lp-esim-trip-page .lp-price-table-trip {
  min-width: 650px;
    width: 650px;
    margin: 0 auto;
}
.lp-esim-trip-page .lp-price-table-trip th:first-child {
  width: 26%;
}
.lp-esim-trip-page .lp-price-table-trip tbody th {
  background: #2fa8da;
}
.lp-esim-trip-page .lp-price-table-trip tbody tr:nth-child(3) th,
.lp-esim-trip-page .lp-price-table-trip tbody tr:nth-child(4) th {
  background: #47bfd0;
}
.lp-esim-trip-page .lp-price-table-trip tbody tr:nth-child(n+5) th {
  background: #2eb99e;
}

/* 長期eSIM容量別料金表 */
.lp-esim-study-page .lp-price-table-study {
  min-width: 690px;
    width: 700px;
    margin: 0 auto;
}
.lp-esim-study-page .lp-price-table-study thead th,
.lp-esim-study-page .lp-price-table-study thead td {
  background: #064f85;
  color: #fff;
  font-weight: 900;
}
.lp-esim-study-page .lp-price-table-study thead tr:first-child th {
  font-size: 16px;
}
.lp-esim-study-page .lp-price-table-study thead tr:nth-child(2) th,
.lp-esim-study-page .lp-price-table-study thead tr:nth-child(2) td {
  font-size: 13px;
}
.lp-esim-study-page .lp-price-table-study tbody th.area-a { background: #2fa8da !important; }
.lp-esim-study-page .lp-price-table-study tbody th.area-b { background: #48bfd0 !important; }
.lp-esim-study-page .lp-price-table-study tbody th.area-c { background: #2eb99e !important; }
.lp-esim-study-page .lp-price-table-study tbody td {
  font-size: 15px;
}
.lp-esim-study-page .lp-price-table-study thead img {
  display: block;
  height: 23px !important;
  margin: -30px auto 4px !important;
  overflow: visible;
}

@media screen and (max-width: 767px) {
  .lp-wifi-page .ribbon-label,
  .lp-esim-trip-page .lp-plan-wide .ribbon-label,
  .lp-esim-study-page .lp-plan-wide .ribbon-label {
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - 14px) 50%,
      100% 100%,
      0 100%,
      14px 50%
    );
    padding-right: 22px;
    padding-left: 22px;
  }
  .lp-wifi-page .lp-hero-main-visual,
  .lp-esim-trip-page .lp-hero-main-visual,
  .lp-esim-study-page .lp-hero-main-visual {
    margin-bottom: 24px;
  }
  .theme-esim .lp-price-table {
    font-size: 13px;
  }
  .theme-esim .lp-price-table th,
  .theme-esim .lp-price-table td {
    padding: 7px 6px;
  }
}


/* =========================================================
   2026-07-15 追加修正 v9
   差し替え済み背景画像（白半透明加工済み）に合わせた
   ファーストビュー内の配置調整
========================================================= */

/*
  背景画像自体に白の半透明加工が入っているため、
  CSSで重ねていた白オーバーレイは無効化する。
*/
.lp-page .lp-hero-img::before {
  content: none;
}

/* 背景画像は上部だけに原寸比率で表示し、下側は白背景にする */
.lp-page .lp-hero-img {
  position: relative;
  isolation: auto;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  overflow: visible;
}

/* ---------------- WiFi ファーストビュー ---------------- */
.lp-wifi-page .lp-hero-img {
  min-height: 610px;
  padding: 20px 18px 22px;
}

.lp-wifi-page .lp-hero-main-visual {
  width: 100%;
  max-width: 790px;
  margin: 0 auto 24px;
}

/*
  背景写真の下端付近から2つのプラン枠が始まるように配置。
  918px幅時に見本の位置関係へ近づける。
*/
.lp-wifi-page .lp-plan-cards {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  gap: 22px;
}

.lp-wifi-page .lp-plan-card {
  min-height: 292px;
  padding: 52px 18px 16px;
  background: #fff !important;
  border: 3px solid #1481d7;
  border-radius: 20px;
}

.lp-wifi-page .lp-plan-card .ribbon-label {
  top: -17px;
  left: 18px;
  right: 18px;
}

.lp-wifi-page .lp-plan-card > img {
  max-height: 150px;
  object-fit: contain;
}

.lp-wifi-page .lp-login-pass {
  max-width: 360px;
  margin-top: 10px;
}

.lp-wifi-page .lp-plan-card .lp-btn-img {
  max-width: 355px;
  margin-top: 13px;
}

/* ---------------- eSIM 共通ファーストビュー ---------------- */
.lp-esim-trip-page .lp-hero-img,
.lp-esim-study-page .lp-hero-img {
  min-height: 548px;
  padding: 18px 18px 16px;
}

.lp-esim-trip-page .lp-corner-ribbon-img,
.lp-esim-study-page .lp-corner-ribbon-img {
  top: 0;
  left: 0;
  width: 150px;
  z-index: 3;
    position: absolute;
}

.lp-esim-trip-page .lp-hero-main-visual,
.lp-esim-study-page .lp-hero-main-visual {
  width: 100%;
  max-width: 675px;
  margin: 4px auto 18px;
}

/*
  料金ボックスは背景写真の下端にまたがる位置へ。
  上部見出しはボックスからはみ出した状態を維持。
*/
.lp-esim-trip-page .lp-plan-wide,
.lp-esim-study-page .lp-plan-wide {
  position: relative;
  z-index: 2;
  width: calc(100% - 150px);
  max-width: 704px;
  min-height: 224px;
  margin: 0 auto;
  padding: 54px 18px 16px;
  background: #fff !important;
  border: 4px solid #e85a6a;
  border-radius: 20px;
}

.lp-esim-trip-page .lp-plan-wide .ribbon-label,
.lp-esim-study-page .lp-plan-wide .ribbon-label {
  top: -17px;
  left: 18px;
  right: 18px;
}

.lp-esim-trip-page .lp-plan-wide .lp-img-block,
.lp-esim-study-page .lp-plan-wide .lp-img-block {
  display: block;
  width: 100%;
  max-width: 560px !important;
  max-height: 104px;
  object-fit: contain;
  margin: 4px auto 0 !important;
}

.lp-esim-trip-page .lp-plan-wide .lp-btn-img,
.lp-esim-study-page .lp-plan-wide .lp-btn-img {
  max-width: 430px;
  margin-top: 12px;
}

/* 918px未満 */
@media screen and (max-width: 767px) {
  .lp-page .lp-hero-img {
    background-size: auto 280px;
    background-position: center top;
  }

  .lp-wifi-page .lp-hero-img {
    min-height: 0;
    padding: 14px 12px 20px;
  }

  .lp-wifi-page .lp-hero-main-visual {
    margin-bottom: 22px;
  }

  .lp-wifi-page .lp-plan-cards {
    gap: 14px;
  }

  .lp-wifi-page .lp-plan-card {
    min-height: 0;
    padding: 48px 12px 14px;
  }

  .lp-esim-trip-page .lp-hero-img,
  .lp-esim-study-page .lp-hero-img {
    min-height: 0;
    padding: 12px 12px 18px;
  }

  .lp-esim-trip-page .lp-corner-ribbon-img,
  .lp-esim-study-page .lp-corner-ribbon-img {
    width: 112px;
  }

  .lp-esim-trip-page .lp-hero-main-visual,
  .lp-esim-study-page .lp-hero-main-visual {
    margin-bottom: 20px;
  }

  .lp-esim-trip-page .lp-plan-wide,
  .lp-esim-study-page .lp-plan-wide {
    width: calc(100% - 30px);
    min-height: 0;
    padding: 50px 12px 14px;
  }
}

/* スマホ */
@media screen and (max-width: 480px) {
  .lp-page .lp-hero-img {
    background-size: auto 220px;
  }

  .lp-wifi-page .lp-plan-cards {
    flex-direction: column;
    gap: 24px;
  }

  .lp-wifi-page .lp-plan-card .ribbon-label,
  .lp-esim-trip-page .lp-plan-wide .ribbon-label,
  .lp-esim-study-page .lp-plan-wide .ribbon-label {
    top: -14px;
  }

  .lp-esim-trip-page .lp-corner-ribbon-img,
  .lp-esim-study-page .lp-corner-ribbon-img {
    width: 92px;
  }

  .lp-esim-trip-page .lp-plan-wide,
  .lp-esim-study-page .lp-plan-wide {
    width: 100%;
    border-width: 3px;
  }
}


/* =========================================================
   2026-07-15 追加修正 v12
   ・WiFi上部ボタンの高さを揃える
   ・WiFi長期料金表の色・文字・角丸を見本へ
   ・WiFiの説明文、拠点数表示、流れの文字を見本へ
   ・eSIM長期エリア表のAを2列表示
========================================================= */

/* ---------------------------------------------------------
   WiFiページ上部：左右の申込みボタンの下端を揃える
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .lp-wifi-page .lp-plan-cards {
    align-items: stretch;
  }

  .lp-wifi-page .lp-plan-card {
    display: flex;
    flex-direction: column;
  }

  .lp-wifi-page .lp-plan-card > .lp-btn-img {
    width: 100%;
    margin-top: auto !important;
    padding-top: 14px;
  }

  .lp-wifi-page .lp-plan-card > .lp-btn-img img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto;
  }
}

/* ---------------------------------------------------------
   WiFi：グローバルWiFiとは？周辺の文字
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .lp-wifi-about .lp-lead {
    margin-top: 6px;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .01em;
  }

  .lp-wifi-about .lp-lead strong {
    color: #087bc5;
    font-weight: 900;
  }

  .lp-wifi-spots > p:nth-of-type(1) {
    color: #242424 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.45;
  }

  .lp-wifi-spots > p:nth-of-type(1) span {
    color: #0798df !important;
    font-weight: 900;
  }

  .lp-wifi-spots > p:nth-of-type(2) {
    color: #111 !important;
    font-size: 11px !important;
    font-weight: 500;
  }
}

/* ---------------------------------------------------------
   WiFi：お申込み〜ご利用の流れ
--------------------------------------------------------- */
.lp-wifi-flow-section .lp-flow-img {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 16px
    minmax(0, 1fr) 16px
    minmax(0, 1fr) 16px
    minmax(0, 1fr) 16px
    minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  width: 100%;
  margin: 14px auto 10px;
  overflow: visible;
}

.lp-wifi-flow-section .lp-flow-step {
  min-width: 0;
  text-align: center;
}

.lp-wifi-flow-section .lp-flow-step img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  min-width: 0;
  margin: 0 auto;
}

.lp-wifi-flow-section .lp-flow-step p {
  margin: 6px -4px 0;
  color: #111;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.lp-wifi-flow-section .arrow-sep {
  align-self: center;
  margin-top: 42px;
  color: #0798df;
  font-size: 18px;
  font-weight: 900;
}

@media screen and (max-width: 767px) {
  .lp-wifi-flow-section .lp-flow-img {
    display: flex;
    width: max-content;
    min-width: 820px;
    align-items: flex-start;
    gap: 6px;
    overflow: visible;
  }

  .lp-wifi-flow-section .lp-flow-step {
    width: 145px;
    flex: 0 0 145px;
  }

  .lp-wifi-flow-section .lp-flow-step img {
    height: auto;
    width: 100%;
  }

  .lp-wifi-flow-section .lp-flow-step p {
    display: block;
    font-size: 10px;
  }

  .lp-wifi-flow-section .arrow-sep {
    flex: 0 0 16px;
    margin-top: 42px;
  }
}

/* ---------------------------------------------------------
   WiFi長期：エリア表
--------------------------------------------------------- */
.lp-wifi-page .lp-wifi-long-area-table {
  width: 100%;
  min-width: 650px;
  border-collapse: separate;
  border-spacing: 5px 3px;
  table-layout: fixed;
  line-height: 1.25;
}

.lp-wifi-page .lp-wifi-long-area-table th,
.lp-wifi-page .lp-wifi-long-area-table td {
  border: 0;
  text-align: center;
}

.lp-wifi-page .lp-wifi-long-area-table thead th {
  height: 42px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}

.lp-wifi-page .lp-wifi-long-area-table tbody td {
  height: 31px;
  padding: 5px 8px;
  border-radius: 4px;
  background: #eef2f3 !important;
  color: #111;
  font-size: 14px;
  font-weight: 700;
}

.lp-wifi-page .lp-wifi-long-area-table tbody td:empty::before {
  content: "\00a0";
}

/* ---------------------------------------------------------
   WiFi長期：日数別料金表
--------------------------------------------------------- */
.lp-wifi-page .lp-wifi-long-price-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  color: #111;
  font-size: 13px;
  line-height: 1.2;
}

.lp-wifi-page .lp-wifi-long-price-table th,
.lp-wifi-page .lp-wifi-long-price-table td {
  border: 0;
  border-radius: 4px;
  padding: 7px 5px;
  text-align: center;
  vertical-align: middle;
}

.lp-wifi-page .lp-wifi-long-price-table thead tr:first-child th {
  background: #07518a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) th {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.lp-wifi-page .lp-wifi-long-price-table tbody th {
  background: #07518a;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.lp-wifi-page .lp-wifi-long-price-table tbody td {
  background: #eaf3f4;
  color: #111;
  font-size: 13px;
  font-weight: 800;
}

.lp-wifi-page .lp-wifi-long-price-table tbody tr:nth-child(even) td {
  background: #eaf3f4;
}

/* ---------------------------------------------------------
   eSIM長期：Aを2列、B・Cを1列ずつ表示
--------------------------------------------------------- */
.lp-esim-study-page .lp-esim-study-area-table {
/*  width: 100%;*/
width: 700px;
  min-width: 700px;
  border-collapse: separate;
  border-spacing: 4px 2px;
  table-layout: fixed;
  line-height: 1.2;
margin: 0 auto;
}

.lp-esim-study-page .lp-esim-study-area-table thead th {
  height: 40px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}

.lp-esim-study-page .lp-esim-study-area-table thead th.area-a {
  width: 50%;
}

.lp-esim-study-page .lp-esim-study-area-table thead th.area-b,
.lp-esim-study-page .lp-esim-study-area-table thead th.area-c {
  width: 25%;
}

.lp-esim-study-page .lp-esim-study-area-table tbody td {
  height: 29px;
  padding: 4px 7px;
  border: 0;
  border-radius: 4px;
  background: #eef2f3 !important;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.lp-esim-study-page .lp-esim-study-area-table tbody td:empty::before {
  content: "\00a0";
}


/* =========================================================
   2026-07-15 追加修正 v13
   ・WiFiフローの文字・矢印・注記位置をPDFに合わせる
   ・PC画像は原寸表示（拡大・縮小なし）
   ・eSIM長期のおすすめ位置と国配置をPDFに合わせる
========================================================= */

/* ---------------------------------------------------------
   PC画像：原寸を維持し、拡大も縮小もしない
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .lp-page .lp-hero-main-visual,
  .lp-page .lp-plan-card > img,
  .lp-page .lp-plan-wide > img,
  .lp-page .lp-btn-img img,
  .lp-page .lp-midashi img,
  .lp-page .lp-text-block img,
  .lp-page .lp-points-img img,
  .lp-page .lp-flow-step img,
  .lp-page .lp-img-block,
  .lp-page .lp-device-visual img,
  .lp-page .lp-tab-row img {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    object-fit: none !important;
  }

  .lp-page .lp-hero-main-visual,
  .lp-page .lp-plan-card > img,
  .lp-page .lp-plan-wide > img,
  .lp-page .lp-btn-img img,
  .lp-page .lp-midashi img,
  .lp-page .lp-text-block img,
  .lp-page .lp-img-block,
  .lp-page .lp-device-visual img {
    display: block;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* ---------------------------------------------------------
   WiFi：お申込み〜ご利用の流れ
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .lp-wifi-flow-section .lp-flow-img {
    display: grid;
    grid-template-columns:
      1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
    align-items: start;
    gap: 0;
    max-width: 850px;
    margin: 12px auto 5px;
  }

  .lp-wifi-flow-section .lp-flow-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
  }

  .lp-wifi-flow-section .lp-flow-step img {
    align-self: center;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .lp-wifi-flow-section .lp-flow-step p {
    width: 100%;
    margin: 5px 0 0;
    color: #111;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
  }

  .lp-wifi-flow-section .arrow-sep {
    align-self: start;
    margin-top: 49px;
    color: #0798df;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
  }

  .lp-wifi-flow-section .lp-note-list {
    max-width: 850px;
    margin: 3px auto 0;
    padding: 0;
    list-style: none;
    color: #444;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
  }

  .lp-wifi-flow-section .lp-note-list li {
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .lp-wifi-flow-section .lp-flow-step p {
    text-align: left;
    font-weight: 600;
  }
  .lp-wifi-flow-section .lp-note-list {
    padding-left: 0;
    list-style: none;
    text-align: left;
  }
}

/* ---------------------------------------------------------
   eSIM長期：おすすめバッジを30GB列の真上に固定
--------------------------------------------------------- */
.lp-esim-study-page .lp-price-table-study {
  margin-top: 34px;
  overflow: visible;
}

.lp-esim-study-page .lp-price-table-study .lp-recommend-col {
  position: relative;
  overflow: visible;
}

.lp-esim-study-page .lp-price-table-study .lp-recommend-col > span {
  display: inline-block;
}

.lp-esim-study-page .lp-price-table-study .lp-recommend-badge {
  position: absolute !important;
  top: -31px !important;
  left: 50% !important;
  z-index: 5;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: translateX(-50%);
  pointer-events: none;
}

.lp-esim-study-page .lp-table-scroll:has(.lp-price-table-study) {
  padding-top: 0;
  overflow-y: visible;
}

@media screen and (max-width: 767px) {
  .lp-esim-study-page .lp-price-table-study {
    margin-top: 31px;
  }
  .lp-esim-study-page .lp-price-table-study .lp-recommend-badge {
    top: -28px !important;
  }
}


/* =========================================================
   2026-07-15 追加修正 v14
   ・lp-device-visual と eSIMの lp-img-block は従来どおり枠内縮小
   ・それ以外の画像はPCで原寸表示
   ・WiFiフローの本文を画像左端に合わせ、12pxへ調整
   ・フロー下部注記のサイズ・位置をPDFへ近づける
========================================================= */

/* ---------------------------------------------------------
   画像表示
   v13のPC原寸指定から、切れていた2種類だけ除外する
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  /* WiFiの端末ビジュアルはコンテナ内に収める */
  .lp-wifi-page .lp-device-visual {
    max-width: 430px;
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
  }

  .lp-wifi-page .lp-device-visual img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /*
    eSIMの .lp-img-block は料金訴求枠の内側に収める。
    原寸が枠を超える場合のみ縮小し、拡大はしない。
  */
  .lp-esim-trip-page .lp-img-block,
  .lp-esim-study-page .lp-img-block {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /*
    上記以外の主要画像はPCで拡大・縮小せず原寸表示。
    親幅より大きい場合も画像自体の寸法は維持する。
  */
  .lp-page img:not(.lp-device-visual img):not(.lp-esim-trip-page .lp-img-block):not(.lp-esim-study-page .lp-img-block) {
    height: auto;
  }
}

/* ---------------------------------------------------------
   WiFi「お申込み〜ご利用の流れ」
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .lp-wifi-flow-section .lp-flow-img {
    max-width: 850px;
    margin-top: 12px;
    margin-bottom: 8px;
  }

  .lp-wifi-flow-section .lp-flow-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /*
    画像を各グリッド列の左端へ置くことで、
    直下のテキスト左端と一致させる。
  */
  .lp-wifi-flow-section .lp-flow-step img {
    align-self: flex-start;
    display: block;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  .lp-wifi-flow-section .lp-flow-step p {
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
  }

  /* 三角を各STEP画像の中央高付近へ */
  .lp-wifi-flow-section .arrow-sep {
    align-self: start;
    margin-top: 48px;
    color: #0798df;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
  }

  /* PDFのようにフロー直下へ左揃えで配置 */
  .lp-wifi-flow-section .lp-note-list {
    max-width: 850px;
    margin: 8px auto 0;
    padding: 0;
    list-style: none;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
  }

  .lp-wifi-flow-section .lp-note-list li {
    margin: 0 0 1px;
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .lp-wifi-flow-section .lp-flow-step img {
    align-self: flex-start;
    margin-left: 0 !important;
  }

  .lp-wifi-flow-section .lp-flow-step p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
  }

  .lp-wifi-flow-section .lp-note-list {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
  }
}


/* =========================================================
   2026-07-15 追加修正 v15
   ・WiFiフローのSTEP間隔を均等化
   ・不自然な強制改行を廃止
   ・eSIM上部 lp-img-block の見切れを解消
   ・専用Webページのロゴ・文字サイズを見本へ
========================================================= */

/* ---------------------------------------------------------
   eSIMページ上部の料金訴求画像
   max-width:560px / max-height:104px の制限を解除する
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .lp-esim-trip-page .lp-plan-wide .lp-img-block,
  .lp-esim-study-page .lp-plan-wide .lp-img-block {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 4px auto 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .lp-esim-trip-page .lp-plan-wide .lp-img-block,
  .lp-esim-study-page .lp-plan-wide .lp-img-block {
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
  }
}

/* ---------------------------------------------------------
   WiFi「お申込み〜ご利用の流れ」
   5STEPと4つの矢印を均等な固定列で配置
--------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .lp-wifi-flow-section .lp-flow-img {
    display: grid;
    grid-template-columns:
      repeat(4, minmax(0, 1fr) 18px)
      minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    width: 100%;
    max-width: 850px;
    margin: 12px auto 8px;
  }

  .lp-wifi-flow-section .lp-flow-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
    text-align: left;
  }

  .lp-wifi-flow-section .lp-flow-step img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .lp-wifi-flow-section .lp-flow-step p {
    width: 100%;
    margin: 7px 0 0;
    padding: 0;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
  }

  .lp-wifi-flow-section .arrow-sep {
    align-self: start;
    justify-self: center;
    margin: 43px 0 0;
    color: #0798df;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
  }

  .lp-wifi-flow-section .lp-note-list {
    width: 100%;
    max-width: 850px;
    margin: 7px auto 0;
    padding: 0;
    list-style: none;
    color: #333;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
  }
}

/* スマホは横スクロール内でも均等配置 */
@media screen and (max-width: 767px) {
  .lp-wifi-flow-section .lp-flow-img {
    display: grid;
    grid-template-columns:
      repeat(4, 145px 18px)
      145px;
    column-gap: 6px;
/*
    width: max-content;
    min-width: 815px;
*/
    align-items: start;
  }
.lp-wifi-flow-section .lp-flow-img {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 12px 0 8px;
    padding: 0 12px 10px 0;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: auto;
  }

  .lp-wifi-flow-section .lp-flow-step {
    flex: 0 0 145px;
    width: 145px;
    min-width: 145px;
  }

  .lp-wifi-flow-section .arrow-sep {
    flex: 0 0 18px;
    width: 18px;
    margin: 43px 4px 0;
    text-align: center;
  }

  .lp-wifi-flow-section .lp-flow-step img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .lp-wifi-flow-section .lp-flow-step p {
    width: 100%;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
  }
  .lp-wifi-flow-section .lp-flow-step {
    width: 145px;
  }

  .lp-wifi-flow-section .arrow-sep {
    justify-self: center;
    margin-top: 0;
  }
}

/* ---------------------------------------------------------
   WiFi「お申込みは専用Webページから!」
--------------------------------------------------------- */
.lp-wifi-page .lp-webpage-box {
  padding: 24px 20px 28px;
}

.lp-wifi-page .lp-webpage-box .lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 16px;
  color: #073d91;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.25;
}

.lp-wifi-page .lp-webpage-box .lockup img {
  display: block;
  width: auto !important;
  max-width: 300px !important;
  height: 42px !important;
  max-height: none !important;
}

.lp-wifi-page .lp-webpage-box .lp-login-pass {
  max-width: 460px;
  margin-top: 0;
}

.lp-wifi-page .lp-webpage-box .lp-btn-img {
  max-width: 460px;
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  .lp-wifi-page .lp-webpage-box .lockup {
    gap: 8px;
    font-size: 16px;
  }

  .lp-wifi-page .lp-webpage-box .lockup img {
    max-width: 190px !important;
    height: 30px !important;
  }
}


/* =========================================================
   2026-07-15 追加修正 v16
   WiFi長期「ご利用料金」を見本の色分けへ寄せる
========================================================= */

/* WiFi長期：A/B/Cエリア表 */
.lp-wifi-page .lp-wifi-long-area-table {
  width: 100%;
  min-width: 690px;
  border-collapse: separate;
  border-spacing: 6px 3px;
  table-layout: fixed;
}

.lp-wifi-page .lp-wifi-long-area-table thead th {
  height: 46px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.lp-wifi-page .lp-wifi-long-area-table thead .area-a {
  background: #2fa0d4 !important;
}
.lp-wifi-page .lp-wifi-long-area-table thead .area-b {
  background: #56bdd0 !important;
}
.lp-wifi-page .lp-wifi-long-area-table thead .area-c {
  background: #3abf9f !important;
}

.lp-wifi-page .lp-wifi-long-area-table tbody td {
  height: 34px;
  padding: 5px 8px;
  border: 0;
  border-radius: 0;
  background: #e9ecec !important;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.lp-wifi-page .lp-area-note {
  margin-top: 8px;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

/* WiFi長期：料金表 */
.lp-wifi-page .lp-wifi-long-price-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN',
               'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
}

.lp-wifi-page .lp-wifi-long-price-table th,
.lp-wifi-page .lp-wifi-long-price-table td {
  border: 0;
  border-radius: 0;
  padding: 7px 4px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.15;
}

/* 1行目：プラン */
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(1) th:first-child {
  background: #0a4f86;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(1) th:nth-child(2) {
  background: #7f7f80;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(1) th:nth-child(3) {
  background: #1f9cd2;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(1) th:nth-child(4) {
  background: #f39a23;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

/* 2行目：エリア + A/B/C */
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) th:first-child {
  background: #0a4f86;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) .area-a,
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) .area-b,
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) .area-c {
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) .area-a {
  background: #2fa0d4 !important;
}
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) .area-b {
  background: #56bdd0 !important;
}
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(2) .area-c {
  background: #3abf9f !important;
}

/* 3行目：利用日数 / 料金 */
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(3) th:first-child {
  background: #0a4f86;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.lp-wifi-page .lp-wifi-long-price-table thead tr:nth-child(3) th:last-child {
  background: #0a4f86;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

/* 本文 */
.lp-wifi-page .lp-wifi-long-price-table tbody th {
  background: #0a4f86;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
}

.lp-wifi-page .lp-wifi-long-price-table tbody td {
  background: #e9ecec;
  color: #111;
  font-size: 13px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .lp-wifi-page .lp-wifi-long-area-table {
    min-width: 690px;
  }

  .lp-wifi-page .lp-wifi-long-area-table thead th {
    font-size: 18px;
  }

  .lp-wifi-page .lp-wifi-long-price-table {
    min-width: 780px;
  }
.lp-esim-study-page .lp-esim-study-area-table {
    /* width: 100%; */
    width: 500px;
    min-width: 500px;}
}


/* =========================================================
   2026-07-15 追加修正 v17
   WiFi長期料金表：見本どおり文字サイズの強弱を調整
========================================================= */

.lp-wifi-page .lp-wifi-long-price-table {
  line-height: 1.15;
}

/* 左端の小見出し */
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-plan-row > th:first-child,
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-area-row > th:first-child,
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-label-row > th:first-child {
  background: #0a4f86;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* プラン名：大きく太く */
.lp-wifi-page .lp-wifi-long-price-table .lp-price-plan-name {
  display: inline-block;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* 容量表記：プラン名より小さく */
.lp-wifi-page .lp-wifi-long-price-table .lp-price-plan-capacity {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* A/B/C：大きく太く */
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-area-row .area-a,
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-area-row .area-b,
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-area-row .area-c {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

/* 「料金」は中央に大きく */
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-label-row th:last-child {
  background: #0a4f86;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .03em;
}

/* 利用日数は金額より少し強く */
.lp-wifi-page .lp-wifi-long-price-table tbody th {
  font-size: 13px;
  font-weight: 900;
}

/* 金額は太字だが、プラン名・A/B/Cほど強くしない */
.lp-wifi-page .lp-wifi-long-price-table tbody td {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* 通常・大容量・超大容量の帯ごとに文字色を統一 */
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-plan-row th:nth-child(2) {
  color: #fff;
}
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-plan-row th:nth-child(3) {
  color: #fff;
}
.lp-wifi-page .lp-wifi-long-price-table
.lp-price-plan-row th:nth-child(4) {
  color: #fff;
}

/* PCでは見本に近い高さへ */
@media screen and (min-width: 768px) {
  .lp-wifi-page .lp-wifi-long-price-table
  .lp-price-plan-row th {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .lp-wifi-page .lp-wifi-long-price-table
  .lp-price-area-row th {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .lp-wifi-page .lp-wifi-long-price-table
  .lp-price-label-row th {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media screen and (max-width: 767px) {
  .lp-wifi-page .lp-wifi-long-price-table .lp-price-plan-name {
    font-size: 15px;
  }

  .lp-wifi-page .lp-wifi-long-price-table .lp-price-plan-capacity {
    font-size: 9px;
  }

  .lp-wifi-page .lp-wifi-long-price-table
  .lp-price-area-row .area-a,
  .lp-wifi-page .lp-wifi-long-price-table
  .lp-price-area-row .area-b,
  .lp-wifi-page .lp-wifi-long-price-table
  .lp-price-area-row .area-c {
    font-size: 16px;
  }
}


/* =========================================================
   2026-07-15 追加修正 v18
   WiFi「業界最多クラスの拠点数！」周辺の文字サイズ・強弱
========================================================= */

@media screen and (min-width: 768px) {
  /* 上の見出し画像も少し大きく見本寄りに */
  .lp-wifi-spots .lp-text-block img {
    display: block;
    width: auto;
    max-width: 360px;
    height: auto;
    margin: 0 auto 8px;
  }

  /* メインコピー */
  .lp-wifi-spots > p:nth-of-type(1) {
    margin: 0 auto 8px !important;
    color: #262222 !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1.42 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
  }

  /* 20 / 39 をさらに強く大きく */
  .lp-wifi-spots > p:nth-of-type(1) span {
    color: #0798df !important;
    font-size: 1.45em !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  /* ※2026年2月現在 */
  .lp-wifi-spots > p:nth-of-type(2) {
    margin: 0 auto 14px !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 767px) {
  .lp-wifi-spots .lp-text-block img {
    max-width: 250px;
    margin-bottom: 6px;
  }

  .lp-wifi-spots > p:nth-of-type(1) {
    margin-bottom: 6px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
  }

  .lp-wifi-spots > p:nth-of-type(1) span {
    font-size: 1.35em !important;
    font-weight: 900 !important;
  }

  .lp-wifi-spots > p:nth-of-type(2) {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }
.lp-lead {
    font-size: 14px;
    word-break: auto-phrase;
}
    .lp-wifi-page .lp-webpage-box .lockup{
    word-break: auto-phrase;
    }
}


/* =========================================================
   2026-07-15 追加修正 v19
   WiFi長期「ご利用料金」B列の国背景色を見本寄りに調整
========================================================= */

/* A/Cより少し青みのある薄色にする */
.lp-wifi-page .lp-wifi-long-area-table tbody td:nth-child(2) {
  background: #dbe7ea !important;
}