@charset "UTF-8";
/* =============================================================
   About のページ（/about-us/）。2026-10-25 作り直し（運営者「もっと魅力的なコンテンツに」）
   inc/about-page.php だけが読む（front-head.php の $css_extra）。modern.css の後ろ。
   色・文字・ボタンはトップと同じ決まり（--jol-*・申し込みは赤の a.btn.apply・ほかの a.btn は青い枠）。
   ★docomo はロゴを使わず、赤い文字（span.docomo）。濃い色の地には置かない（赤が読みにくくなるため）
   ★下層ページの上の部分（lower.css の div.main・#pan）は、div.main.ab-hero で上書きしている
   ============================================================= */

article.about-page {
  --ab-max: 1200px;
  --ab-pad: 16px;
  --ab-radius: 20px;
  --ab-line: #e3eaf2;
  --ab-body: #33403e;
  --ab-red: #cc0033;   /* docomo の文字の赤（白地で 5.9:1） */
}
article.about-page span.docomo { color: var(--ab-red); font-weight: 800; letter-spacing: .01em; }
article.about-page span.nw { white-space: nowrap; }

/* ─── 共通 ─── */
article.about-page div.ab-in {
  width: 100%;
  max-width: calc(var(--ab-max) + var(--ab-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--ab-pad);
}
article.about-page div.ab-in.ab-narrow { max-width: calc(880px + var(--ab-pad) * 2); }
article.about-page section.ab-sec { padding: clamp(56px, 8vw, 96px) 0; scroll-margin-top: 84px; }
article.about-page section.ab-sec h2 {
  color: var(--jol-text);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
  letter-spacing: -.005em;
}
article.about-page p.eyebrow.ab-left { justify-content: flex-start; }
article.about-page p.eyebrow.ab-left::before { display: none; }
article.about-page h3 { color: var(--jol-text); font-size: 18px; line-height: 1.4; font-weight: 700; }
article.about-page p.ab-center { margin-top: 36px; text-align: center; }
/* ボタン: layout.css の幅 420px・高さ 80px は、このページでは大きすぎる */
article.about-page a.btn {
  width: auto;
  min-width: 240px;
  height: 56px;
  margin: 0;
  padding: 2px 64px 0 32px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
}
article.about-page a.btn::after { right: 20px; width: 24px; height: 24px; }
article.about-page a.btn.b-center { display: inline-flex; }
article.about-page a.ab-more,
article.about-page a.ab-link {
  color: var(--jol-blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
article.about-page a.ab-more::after { content: " \2192"; }

/* ─── 最初の画面 ─── */
article.about-page div.main.ab-hero {
  display: block;
  min-height: 0;
  height: auto;
  padding: 76px 0 64px;   /* 上はパンくず（#pan は位置が決まっている）の分をあける */
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(15, 127, 128, .10), rgba(15, 127, 128, 0) 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(0, 101, 184, .08), rgba(0, 101, 184, 0) 70%),
    linear-gradient(160deg, #f2f7fe 0%, #f0fbfb 100%);
}
article.about-page div.ab-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  max-width: calc(var(--ab-max) + var(--ab-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--ab-pad);
}
article.about-page div.main.ab-hero p.eyebrow { justify-content: flex-start; padding-top: 0; }
article.about-page div.main.ab-hero p.eyebrow::before { display: none; }
article.about-page div.main.ab-hero h1 {
  margin-top: 4px;
  color: var(--jol-text);
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -.02em;
}
article.about-page div.main.ab-hero p.ab-lead {
  max-width: 560px;
  margin-top: 20px;
  padding-top: 0;
  color: var(--ab-body);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.7;
}
article.about-page div.ab-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
article.about-page p.ab-from,
article.about-page div.main.ab-hero p.ab-from {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  color: var(--jol-text-sub);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}
article.about-page p.ab-from strong { color: var(--jol-text); font-size: 26px; line-height: 1.15; font-weight: 800; }
article.about-page p.ab-from span { font-size: 12px; }
article.about-page a.ab-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 10px;
  color: var(--jol-blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
article.about-page a.ab-sub::after { content: "\2192"; }
article.about-page ul.ab-chips {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
article.about-page ul.ab-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: var(--jol-text);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}
article.about-page ul.ab-chips svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--jol-teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
article.about-page figure.ab-hero-img { position: relative; margin: 0; }
article.about-page figure.ab-hero-img picture,
article.about-page figure.ab-hero-img img { display: block; width: 100%; }
article.about-page figure.ab-hero-img img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(7, 42, 79, .22);
}
/* 写真の上の小さな札（回線）。飾りなので読み上げない（本文に同じことが書いてある） */
article.about-page figcaption.ab-hero-badge {
  position: absolute;
  left: -22px;
  bottom: 34px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 30px 14px 16px;   /* 右は「つながった」の点（span.ab-live）の分をあける */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .16);
}
article.about-page span.ab-bars { grid-row: 1 / 3; display: flex; align-items: flex-end; gap: 3px; height: 24px; }
article.about-page span.ab-bars i { display: block; width: 5px; background: var(--jol-teal); border-radius: 2px; }
article.about-page span.ab-bars i:nth-child(1) { height: 30%; }
article.about-page span.ab-bars i:nth-child(2) { height: 55%; }
article.about-page span.ab-bars i:nth-child(3) { height: 78%; }
article.about-page span.ab-bars i:nth-child(4) { height: 100%; }
article.about-page span.ab-badge-t { color: var(--jol-text); font-size: 15px; line-height: 1.2; font-weight: 800; }
article.about-page span.ab-badge-s { color: var(--jol-text-sub); font-size: 12px; line-height: 1.3; font-weight: 600; }

/* ─── ページの中の目次 ─── */
article.about-page nav.ab-toc { position: relative; z-index: 2; margin: -28px 0 0; padding: 0 var(--ab-pad); }
article.about-page nav.ab-toc ul {
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
  overflow-x: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  box-shadow: var(--jol-shadow-md);
  scrollbar-width: none;
}
article.about-page nav.ab-toc ul::-webkit-scrollbar { display: none; }
article.about-page nav.ab-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  color: var(--jol-text);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
}
@media (hover: hover) {
  article.about-page nav.ab-toc a:hover { color: var(--jol-blue); background: #f2f7fe; }
}

/* ─── 私たちの思い（3 つの話。パソコンは写真と文を左右に並べ、話ごとに左右を入れ替える） ─── */
article.about-page p.ab-story-lead { max-width: 640px; margin: 14px auto 0; color: var(--ab-body); font-size: 17px; line-height: 1.75; text-align: center; }
article.about-page ol.ab-stories {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
article.about-page li.ab-story-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
article.about-page li.ab-story-row:nth-child(even) figure.ab-story-img { order: 2; }
article.about-page figure.ab-story-img { margin: 0; }
article.about-page figure.ab-story-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ab-radius);
  box-shadow: var(--jol-shadow-md);
}
article.about-page span.ab-story-no { display: block; color: #0b6e6f; font-size: 14px; line-height: 1; font-weight: 800; letter-spacing: .16em; }
article.about-page div.ab-story-txt h3 { margin-top: 10px; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; font-weight: 800; }
article.about-page div.ab-story-txt p { margin-top: 14px; color: var(--ab-body); font-size: 16.5px; line-height: 1.8; }

/* ─── 数字で見る ─── */
article.about-page section.ab-nums { background: #f2f7fe; }
article.about-page ul.ab-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}
article.about-page ul.ab-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 14px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 18px;
}
article.about-page ul.ab-stats span.st-num { color: var(--jol-blue); font-size: clamp(30px, 3vw, 40px); line-height: 1; font-weight: 800; letter-spacing: -.01em; }
article.about-page ul.ab-stats span.st-num small { margin-left: 3px; font-size: .5em; font-weight: 700; }
article.about-page ul.ab-stats span.st-label { color: var(--jol-text-sub); font-size: 14px; line-height: 1.45; font-weight: 600; }

/* ─── 選ばれる理由 ─── */
article.about-page ul.ab-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}
article.about-page ul.ab-cards.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
article.about-page li.ab-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px 24px;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
article.about-page li.ab-card p { color: #4a5755; font-size: 15px; line-height: 1.65; }
article.about-page li.ab-card a.ab-more { margin-top: auto; padding-top: 4px; }
/* カードの上の絵（動く絵。about-art.php） */
article.about-page div.ab-art-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 172px;
  margin: -8px -8px 6px;
  padding: 12px;
  background: linear-gradient(160deg, #f4f8fd 0%, #eef9f9 100%);
  border-radius: 16px;
}
article.about-page svg.ab-artsvg { display: block; width: auto; max-width: 100%; height: 140px; overflow: visible; }
article.about-page svg.fa-map.ab-artsvg { height: 150px; }
article.about-page span.ab-ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #e3f3f3, #e8f1fc);
  border-radius: 14px;
}
article.about-page span.ab-ic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--jol-blue);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── 使い方 3 ステップ ─── */
article.about-page section.ab-how { background: #f7f9fc; }
article.about-page ol.ab-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}
article.about-page li.ab-step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .05);
}
article.about-page li.ab-step img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
article.about-page div.ab-step-txt { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 22px 26px; }
article.about-page span.ab-step-no { color: #0b6e6f; font-size: 13px; font-weight: 800; letter-spacing: .14em; }
article.about-page li.ab-step p { color: #4a5755; font-size: 15px; line-height: 1.65; }
article.about-page li.ab-step a.ab-more { margin-top: auto; padding-top: 4px; }
article.about-page li.ab-step a.ab-more-buy { color: #c8141c; }

/* ─── お客様の声（3 件以上あるときだけ） ─── */
article.about-page p.ab-rv-sum { margin-top: 10px; color: var(--jol-text-sub); font-weight: 600; text-align: center; }
article.about-page span.ab-rv-stars,
article.about-page span.ab-rv-rate { color: #e8a317; }
article.about-page ul.ab-rv-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}
article.about-page li.ab-rv { padding: 24px; background: #fff; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); }
article.about-page span.ab-rv-rate { letter-spacing: 2px; }
article.about-page li.ab-rv h3 { margin-top: 8px; font-size: 17px; }
article.about-page li.ab-rv p { margin-top: 8px; color: #4a5755; font-size: 15px; line-height: 1.65; }

/* ─── サポートの約束 ─── */
article.about-page section.ab-support { background: linear-gradient(160deg, #f2f7fe 0%, #f0fbfb 100%); }
article.about-page div.ab-support-in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
article.about-page div.ab-support-txt h2 { text-align: left; }
article.about-page div.ab-support-txt > p:not(.eyebrow) { margin-top: 16px; color: var(--ab-body); font-size: 16.5px; line-height: 1.75; }
article.about-page div.ab-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
article.about-page p.ab-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 14px; }
article.about-page p.ab-links a.ab-link { display: inline-flex; align-items: center; min-height: 44px; }
article.about-page a.ab-mail { overflow-wrap: normal; word-break: normal; }
article.about-page ul.ab-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
}
article.about-page li.ab-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 18px;
}
article.about-page li.ab-tile span.ab-ic { width: 44px; height: 44px; border-radius: 12px; }
article.about-page li.ab-tile span.ab-ic svg { width: 22px; height: 22px; }
article.about-page li.ab-tile p { color: #4a5755; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
article.about-page li.ab-tile a { color: var(--jol-blue); font-weight: 600; }

/* ─── 会社概要 ─── */
article.about-page p.ab-co-lead { margin-top: 12px; color: var(--jol-text-sub); font-size: 15.5px; line-height: 1.7; text-align: center; }
article.about-page dl.ab-co {
  margin-top: 32px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .04);
}
article.about-page dl.ab-co > div { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
article.about-page dl.ab-co > div + div { border-top: 1px solid #eef2f6; }
article.about-page dl.ab-co dt { padding: 18px 22px; color: #4a5755; font-size: 14px; line-height: 1.5; font-weight: 700; background: #f7f9fc; }
/* 日本語（会社名のカッコの中など）は言葉の途中で折り返さない。はみ出しそうなときだけ、どこででも折り返す */
article.about-page dl.ab-co dd { margin: 0; padding: 18px 22px; color: var(--jol-text); font-size: 15.5px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
article.about-page dl.ab-co a { color: var(--jol-blue); }
/* 表・注記の中のリンクは、指で押しやすい高さ（24px 以上）に */
article.about-page dl.ab-co dd a,
article.about-page p.ab-legal a,
article.about-page li.ab-tile a.ab-mail { display: inline-block; padding: 3px 0; }
article.about-page a.ab-ext { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 600; }
article.about-page a.ab-ext::after { content: " \2197"; }
article.about-page span.ab-note { color: var(--jol-text-sub); font-size: 14px; }
article.about-page p.ab-legal { margin-top: 18px; color: var(--jol-text-sub); font-size: 14px; text-align: center; }
article.about-page p.ab-legal a { color: var(--jol-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ─── よくある質問（開け閉めの見た目は layout.css・lower.css の qa-wrap） ─── */
article.about-page section.ab-faq { padding-top: 0; }
article.about-page section.ab-faq div.qa-wrap { margin-top: 28px; }

/* ─── 最後の申し込みの帯 ─── */
article.about-page section.ab-end { padding-top: 0; }
article.about-page div.ab-end-in {
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 64px);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(45% 80% at 100% 0%, rgba(29, 164, 165, .30), rgba(29, 164, 165, 0) 70%),
    linear-gradient(150deg, #072a4f 0%, #0a3d73 55%, #0b4f93 100%);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(7, 42, 79, .25);
}
article.about-page div.ab-end-in h2 { color: #fff; }
article.about-page div.ab-end-in > p { margin-top: 12px; color: rgba(255, 255, 255, .9); font-size: 17px; line-height: 1.6; }
article.about-page div.ab-cta-row.ab-cta-center { justify-content: center; }
article.about-page div.ab-end-in p.ab-from { color: rgba(255, 255, 255, .85); text-align: left; }
article.about-page div.ab-end-in p.ab-from strong { color: #fff; }
article.about-page div.ab-end-in a.ab-sub { color: #fff; }
article.about-page div.ab-end-in a:focus-visible { outline-color: #fff; }

/* =============================================================
   動き（フェーズ2・2026-10-25）
   ・選ばれる理由のカードの絵: カードが画面に入ったら（.inview → is-show）動く。絵と動きの型はトップと同じ（modern.css の
     fa-map・rel-sim・rel-lang と keyframes の feat*・rel*）。旅の特典の絵（ab-perks）だけ About の動き（ap*）
   ・最初の画面の回線の札: 電波の棒が満ちる・つながった点が光る・ふわっと浮く
   ★何も動かないときの見た目＝止まった完成の絵（動きを減らしたい設定の人・印刷・JS なし）
   ============================================================= */
html.js-reveal article.about-page li.ab-card:not(.is-show) svg.ab-artsvg { opacity: 0; transform: translateY(16px) scale(.94); }
article.about-page li.ab-card.is-show svg.ab-artsvg { animation: relIn .8s var(--jol-ease) .25s both; }

/* 日本地図（docomo の回線・47 都道府県）: 南から北へ印が立ち、電波の輪が広がり続ける */
article.about-page li.ab-card.is-show svg.fa-map .fm-glow { animation: featGlow 3.2s ease-in-out infinite; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p1 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) .60s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p2 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) .78s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p3 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) .96s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p4 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.14s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p5 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.32s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p6 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.50s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p7 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.68s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-pin.p8 { animation: featPin .5s cubic-bezier(.34, 1.56, .64, 1) 1.86s both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r1 { animation: featRipple 2.6s ease-out 2.10s infinite both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r2 { animation: featRipple 2.6s ease-out 2.42s infinite both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r3 { animation: featRipple 2.6s ease-out 2.74s infinite both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r4 { animation: featRipple 2.6s ease-out 3.06s infinite both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r5 { animation: featRipple 2.6s ease-out 3.38s infinite both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r6 { animation: featRipple 2.6s ease-out 3.70s infinite both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r7 { animation: featRipple 2.6s ease-out 4.02s infinite both; }
article.about-page li.ab-card.is-show svg.fa-map .fm-rip.r8 { animation: featRipple 2.6s ease-out 4.34s infinite both; }

/* 今の SIM はそのまま: 「SIM ✓」が左から・「eSIM」が右から → 「＋」→ 電波の棒・波・光の輪 */
article.about-page li.ab-card.is-show svg.rel-sim .r1 { animation: relSlideL .6s var(--jol-ease) .65s both; }
article.about-page li.ab-card.is-show svg.rel-sim .r2 { animation: relSlideR .6s var(--jol-ease) 1s both; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-ok { animation: relPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.3s both; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-plus { animation: relPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.55s both; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-bar { animation: relBar 2.4s ease-in-out 1.7s infinite both; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-bar.b2 { animation-delay: 1.85s; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-bar.b3 { animation-delay: 2s; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-bar.b4 { animation-delay: 2.15s; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-wave { animation: relWave 2.4s ease-out 1.7s infinite both; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-wave.w2 { animation-delay: 2s; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-wave.w3 { animation-delay: 2.3s; }
article.about-page li.ab-card.is-show svg.rel-sim .rm-halo { animation: relHalo 2.4s ease-out 1.7s infinite both; }

/* 英語と日本語: 吹き出しが順にぽんと出る → ゆっくり浮かぶ → 言葉が入れ替わる */
article.about-page li.ab-card.is-show svg.rel-lang .rl-b1 { animation: relPop .6s cubic-bezier(.34, 1.56, .64, 1) .8s both; }
article.about-page li.ab-card.is-show svg.rel-lang .rl-b2 { animation: relPop .6s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }
article.about-page li.ab-card.is-show svg.rel-lang .rl-bob1 { animation: relBob 4s ease-in-out 1.8s infinite; }
article.about-page li.ab-card.is-show svg.rel-lang .rl-bob2 { animation: relBob 4s ease-in-out 3.8s infinite; }
article.about-page li.ab-card.is-show svg.rel-lang .rl-a { animation: relPhA 6s ease-in-out 2.5s infinite both; }
article.about-page li.ab-card.is-show svg.rel-lang .rl-b { animation: relPhB 6s ease-in-out 2.5s infinite both; }

/* 旅の特典（About だけの絵）: 袋がぽんと出る → 札がくるっと入って揺れる → 「%」が弾む・ひもが流れる・きらきら */
article.about-page svg.ab-perks .ap-bag,
article.about-page svg.ab-perks .ap-tag,
article.about-page svg.ab-perks .ap-pct,
article.about-page svg.ab-perks .ap-spark { transform-box: fill-box; transform-origin: center; }
article.about-page svg.ab-perks .ap-bag { transform-origin: 50% 100%; }
article.about-page svg.ab-perks .ap-tag { transform-origin: 21% 32%; }   /* 札の穴のあたりを軸に揺れる */
article.about-page li.ab-card.is-show svg.ab-perks .ap-bag { animation: apBag .6s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
/* ★揺れ（apSway）には both を付けない。付けると、始まる前（2 秒まで）に揺れの最初の形が入ってきて、くるっと入る動きを消してしまう */
article.about-page li.ab-card.is-show svg.ab-perks .ap-tag { animation: apTagIn .8s cubic-bezier(.34, 1.56, .64, 1) 1s both, apSway 3.6s ease-in-out 2s infinite; }
article.about-page li.ab-card.is-show svg.ab-perks .ap-pct { animation: relPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.6s both; }
article.about-page li.ab-card.is-show svg.ab-perks .ap-string { animation: relFlow 1.4s linear infinite; }
article.about-page li.ab-card.is-show svg.ab-perks .ap-spark.s1 { animation: apTwinkle 2.4s ease-in-out 1.7s infinite both; }
article.about-page li.ab-card.is-show svg.ab-perks .ap-spark.s2 { animation: apTwinkle 2.4s ease-in-out 2.1s infinite both; }
article.about-page li.ab-card.is-show svg.ab-perks .ap-spark.s3 { animation: apTwinkle 2.4s ease-in-out 2.5s infinite both; }
@keyframes apBag { 0% { transform: translateY(14px) scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes apTagIn { 0% { transform: translate(18px, -26px) rotate(-38deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes apSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
@keyframes apTwinkle { 0%, 100% { transform: scale(.4); opacity: .25; } 50% { transform: scale(1); opacity: 1; } }

/* 最初の画面の回線の札 */
article.about-page span.ab-live {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: #19b37a;
  border-radius: 50%;
  animation: abLive 2s ease-out infinite;
}
article.about-page span.ab-bars i { transform-origin: center bottom; animation: abBar 2.4s ease-in-out infinite both; }
article.about-page span.ab-bars i:nth-child(2) { animation-delay: .15s; }
article.about-page span.ab-bars i:nth-child(3) { animation-delay: .3s; }
article.about-page span.ab-bars i:nth-child(4) { animation-delay: .45s; }
article.about-page figcaption.ab-hero-badge { animation: abFloat 5s ease-in-out infinite; }
@keyframes abLive { 0% { box-shadow: 0 0 0 0 rgba(25, 179, 122, .5); } 70% { box-shadow: 0 0 0 8px rgba(25, 179, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 179, 122, 0); } }
@keyframes abBar { 0%, 100% { transform: scaleY(.45); opacity: .45; } 35%, 65% { transform: none; opacity: 1; } }
@keyframes abFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 動きを減らしたい設定の人・印刷: 止まった完成の絵 */
@media (prefers-reduced-motion: reduce) {
  article.about-page svg.ab-artsvg,
  article.about-page svg.ab-artsvg *,
  article.about-page figcaption.ab-hero-badge,
  article.about-page figcaption.ab-hero-badge * { animation: none !important; }
  html.js-reveal article.about-page li.ab-card:not(.is-show) svg.ab-artsvg { opacity: 1; transform: none; }
}
@media print {
  article.about-page svg.ab-artsvg,
  article.about-page svg.ab-artsvg *,
  article.about-page figcaption.ab-hero-badge,
  article.about-page figcaption.ab-hero-badge * { animation: none !important; }
  html.js-reveal article.about-page li.ab-card:not(.is-show) svg.ab-artsvg { opacity: 1; transform: none; }
}

/* ─── タブレット ─── */
@media screen and (max-width: 1024px) {
  article.about-page ul.ab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  article.about-page ul.ab-cards,
  article.about-page ul.ab-cards.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  article.about-page figcaption.ab-hero-badge { left: 14px; bottom: 16px; }
}
@media screen and (max-width: 900px) {
  article.about-page ol.ab-steps,
  article.about-page ul.ab-rv-list { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-right: auto; margin-left: auto; }
  article.about-page div.ab-support-in { grid-template-columns: minmax(0, 1fr); }
}

/* ─── スマホ ─── */
@media screen and (max-width: 768px) {
  article.about-page div.main.ab-hero { height: auto; padding: 60px 0 52px; }
  article.about-page div.ab-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  article.about-page div.main.ab-hero h1 { font-size: clamp(36px, 10vw, 46px); }
  article.about-page div.ab-cta-row { flex-direction: column; align-items: stretch; }
  article.about-page div.ab-cta-row a.btn { width: 100%; }
  article.about-page p.ab-from,
  article.about-page div.main.ab-hero p.ab-from { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; }
  article.about-page p.ab-from strong { font-size: 22px; }
  article.about-page div.ab-end-in p.ab-from { text-align: center; }
  article.about-page ul.ab-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  article.about-page ul.ab-chips li { padding: 8px 12px; font-size: 13px; border-radius: 14px; }
  article.about-page figure.ab-hero-img img { aspect-ratio: 16 / 10; border-radius: 20px; }
  article.about-page figcaption.ab-hero-badge { left: 12px; bottom: 12px; padding: 10px 26px 10px 12px; border-radius: 12px; }
  /* 目次: スマホは 2 段に折り返す（横に流すと、右の 2 つが隠れて気づかれない） */
  article.about-page nav.ab-toc ul { flex-wrap: wrap; justify-content: center; width: auto; padding: 6px; border-radius: 18px; }
  article.about-page nav.ab-toc a { min-height: 40px; padding: 0 14px; font-size: 14px; }
  article.about-page li.ab-story-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  article.about-page li.ab-story-row:nth-child(even) figure.ab-story-img { order: 0; }
  article.about-page ul.ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  article.about-page ul.ab-stats li { padding: 22px 12px 20px; }
  article.about-page ul.ab-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media screen and (max-width: 600px) {
  article.about-page ul.ab-cards,
  article.about-page ul.ab-cards.is-three { grid-template-columns: minmax(0, 1fr); }
  article.about-page dl.ab-co > div { grid-template-columns: minmax(0, 1fr); }
  article.about-page dl.ab-co dt { padding: 14px 18px 2px; background: none; }
  article.about-page dl.ab-co dd { padding: 0 18px 14px; }
  article.about-page ul.ab-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 359px) {
  article.about-page ul.ab-chips { grid-template-columns: minmax(0, 1fr); }
}

/* ─── 訳したページの注記（フェーズ3・トップ・/faq/ と同じ） ─── */
article.about-page p.ab-ai-note { max-width: 720px; margin: 0 auto clamp(48px, 7vw, 80px); padding: 0 var(--ab-pad); color: var(--jol-text-sub); font-size: 13px; line-height: 1.7; text-align: center; }
article.about-page p.ab-ai-note a { color: var(--jol-blue); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 3px 3px; }
article.about-page p.ab-rv-note { margin-top: 6px; color: var(--jol-text-sub); font-size: 13px; text-align: center; }
article.about-page span.en-only { display: inline-block; margin-left: 6px; padding: 1px 8px; color: #5d6b69; font-size: 12px; font-weight: 600; vertical-align: middle; background: #eef2f6; border-radius: 999px; }
/* 日本語・中国語・韓国語: 見出しの字間を詰めすぎない・言葉の途中で折り返さない（対応しているブラウザだけ） */
html:lang(ja) article.about-page h1,
html:lang(ja) article.about-page h2,
html:lang(ja) article.about-page h3,
html:lang(zh-CN) article.about-page h1,
html:lang(zh-CN) article.about-page h2,
html:lang(zh-TW) article.about-page h1,
html:lang(zh-TW) article.about-page h2,
html:lang(ko) article.about-page h1,
html:lang(ko) article.about-page h2 { letter-spacing: 0; word-break: auto-phrase; }
html:lang(ko) article.about-page h1,
html:lang(ko) article.about-page h2,
html:lang(ko) article.about-page h3 { word-break: keep-all; }
/* 日本語の安心の札・数字の説明: 言葉の切れ目で折り返す（「エリ／ア」のように言葉の途中で折れないように・対応しているブラウザだけ） */
html:lang(ja) article.about-page ul.ab-chips li,
html:lang(ja) article.about-page span.st-label,
html:lang(ja) article.about-page nav.ab-toc a { word-break: auto-phrase; }