/* 回線しらべ — JAF Mate Online への replica（承認: 05_implementation/art-direction.md・数値: design-tokens.md） */
:root {
  --c-bg: #f1f5fa;
  --c-text: #212121;
  --c-text-sub: #404040;
  --c-line: #a7a7a7;
  --c-rule: #212121;
  --c-rule-soft: rgba(33, 33, 33, .1);
  --c-deep: #1f3b5c;
  --c-accent: #e0573f;
  --c-band-yellow: #ffe9a8;
  --c-band-soft: #e3ecf6;
  --c-band-blue: #e8f1fb;
  --c-band-green: #eaf6ef;
  --c-side-bg: rgba(255, 255, 255, .6);
  --c-overlay: rgba(33, 33, 33, .4);
  --g-fiber: #2f7fd1; --g-fiber-bg: #e6f0fb; --g-fiber-toc: #d8e7f8;
  --g-mobile: #1f9d78; --g-mobile-bg: #e5f6ef; --g-mobile-toc: #d3efe3;
  --g-homewifi: #d9792a; --g-homewifi-bg: #fdf0e3; --g-homewifi-toc: #fae2c8;
  --ff: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
  --ff-en: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease2: cubic-bezier(.76, 0, .24, 1);
  --side-w: 350px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--ff); font-weight: 500; font-size: 16px; line-height: 1.75; letter-spacing: .02em; word-break: auto-phrase; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--g-fiber); outline-offset: 2px; border-radius: 4px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* hover: リンク全体の不透明度 0.8（参考の実測・0.3s）。補足の文字色は重ねても 4.5:1 を保つ値 */
a { transition: opacity .3s; }
@media (hover: hover) { a:hover { opacity: .8; } }

/* ---- 広告の帯（PC 14px・SP 13px・省略しない） ---- */
.ad-banner { background: #fff; border-bottom: 1px solid var(--c-rule-soft); font-size: 14px; line-height: 1.5; }
.ad-banner p { max-width: 1280px; margin: 0 auto; padding: 8px 35px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ad-banner a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ad-short { display: none; }
.pr { display: inline-block; flex: none; font-size: 12px; font-weight: 700; line-height: 1; padding: 4px 7px; border: 1px solid currentColor; border-radius: 10px; }

/* ---- ヘッダー（1280: 高さ 118px・固定しない／SP 76px） ---- */
.hd-in { height: 118px; display: flex; align-items: center; padding: 0 35px; gap: 24px; }
.logo { display: flex; flex-direction: column; justify-content: center; height: 58px; }
.logo-name { font-size: 34px; font-weight: 800; letter-spacing: .04em; line-height: 1.05; }
.logo-sub { font-size: 11px; letter-spacing: .08em; color: var(--c-text-sub); margin-top: 4px; }
.gnav { margin-left: auto; }
.gnav ul { display: flex; }
.gnav a { display: flex; align-items: center; height: 118px; padding: 0 12px; font-size: 14px; font-weight: 700; }
.menu-btn { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 14px; margin-left: 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--c-text); background: none; border: 0; cursor: pointer; }
.menu-btn-dots { display: flex; gap: 3px; }
.menu-btn-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.menu-doodle { position: absolute; inset: -4px -8px; width: calc(100% + 16px); height: calc(100% + 8px); color: var(--c-accent); stroke-dasharray: 200; stroke-dashoffset: 200; pointer-events: none; }
.menu-btn.is-open .menu-doodle, .menu-btn:hover .menu-doodle { animation: doodle-draw .5s forwards; }
@keyframes doodle-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes doodle-erase { from { stroke-dashoffset: -200; } to { stroke-dashoffset: 0; } }

/* ---- 2列（本文＋サイドバー 350px・y=944 から） ---- */
.wrap { position: relative; }
.main { min-width: 0; }
.side { display: none; }
@media (min-width: 1100px) {
  .wrap.has-side { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); column-gap: 0; padding-right: 20px; }
  .pg-top .wrap.has-side { grid-template-areas: "mv mv" "main side"; }
  .pg-top .wrap.has-side > .main { display: contents; }
  .pg-top .mv { grid-area: mv; }
  .side { display: block; align-self: start; background: var(--c-side-bg); border-radius: 20px; padding: 37px 20px 52px; margin-top: 63px; position: relative; z-index: 2; }
  /* 2列は新着〜比べる項目まで。変更履歴から下は全幅（参考: サイドバーはおトク情報の下端で終わり、お知らせ以降は全幅） */
  /* 2列は新着とジャンル別の比較まで（記事が少ない時期でも右列が1画面以上空かない位置・品質ゲート 2巡目）。以降は全幅 */
  .pg-top .side { grid-column: 2; grid-row: 2 / span 2; }
  .pg-top .sec-list, .pg-top .sec-updated, .pg-top .sec-guide, .pg-top .sec-changes, .pg-top .band, .pg-top .info-cards { grid-column: 1 / -1; }
  .sp-insert { display: none; }
}
.side-ads-h { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 10px; }
.side-ads li + li { margin-top: 14px; }
.side-ads img { width: 100%; height: auto; border-radius: 6px; }
.mv-side .ms-img--guide { width: 61px; height: 71px; border-radius: 10px; }
.ms-desc { display: block; font-size: 12px; line-height: 1.6; color: var(--c-text-sub); }
.side-block + .side-block { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-rule-soft); }
.side-h { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 18px; }
.side-h::before { content: "-"; color: var(--c-accent); margin-right: 8px; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 16px; font-size: 13px; background: #fff; border: 1px solid var(--c-line); border-radius: 16px; }
.side-list li + li { margin-top: 18px; }
.side-list a { display: flex; gap: 14px; }
.side-img { flex: none; width: 64px; height: 36px; border-radius: 5px; overflow: hidden; margin-top: 3px; background: var(--c-band-soft); }
.side-img img { width: 100%; height: 100%; object-fit: cover; }
.side-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; }
.side-changes li { padding: 12px 0; border-bottom: 1px solid var(--c-rule-soft); font-size: 13px; line-height: 1.5; }
.side-ch-date { font-size: 12px; letter-spacing: .06em; margin-right: 8px; }
.side-ch-title { display: block; margin-top: 6px; font-weight: 700; }
.side-latest li + li { margin-top: 22px; }
.side-latest a { display: block; }
.sl-img { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 310 / 172; margin-bottom: 10px; background: var(--c-band-soft); }
.sl-img img { width: 100%; height: 100%; object-fit: cover; }
.side-latest .side-title { margin-top: 6px; }
.side-sources li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--c-rule-soft); font-size: 14px; }
.ss-name { font-weight: 700; }
.ss-date { font-size: 11px; color: var(--c-text-sub); white-space: nowrap; }
.side-note { margin-top: 12px; font-size: 12px; line-height: 1.7; color: var(--c-text-sub); }
.side-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side-cards a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 64px; padding: 10px 12px; background: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; }
.side-cards .arw { width: 18px; height: 18px; }
.sp-insert { padding: 30px 30px 0; }
.sp-insert .side-block { background: var(--c-side-bg); border-radius: 20px; padding: 26px 20px; }

/* ---- カテゴリ札（左に不定形の色の点）と日付 ---- */
.cat { display: inline-flex; align-items: center; gap: 0; font-size: 12px; line-height: 1.25; padding-left: 15px; position: relative; font-weight: 600; }
.cat::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 9px; margin-top: -5px; border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; background: var(--gcol, var(--c-accent)); }
.g-fiber { --gcol: var(--g-fiber); } .g-mobile { --gcol: var(--g-mobile); } .g-homewifi { --gcol: var(--g-homewifi); }
.cat--lg { font-size: 16px; padding-left: 20px; }
.cat--lg::before { width: 14px; height: 12px; margin-top: -6px; }
.badge { display: inline-block; font-size: 12px; line-height: 1.2; letter-spacing: .06em; color: #545454; border: 1px solid #545454; border-radius: 10px; padding: 3px 10px; white-space: nowrap; }

/* ---- 上部: スライダー＋注目の帯（840＋420・高さ 744） ---- */
.mv { display: flex; padding: 19px 20px 0 0; min-height: 744px; }
.sl { position: relative; width: 840px; flex: none; overflow: hidden; }
.sl-track { position: relative; height: 702px; }
.slide { position: absolute; top: 0; left: 68px; width: 703px; transition: transform .5s var(--ease), opacity .5s; transform-origin: center top; }
.slide-img { display: block; border-radius: 35.4px; overflow: hidden; aspect-ratio: 703 / 391; background: var(--c-band-soft); }
.slide-img img { width: 100%; height: 100%; object-fit: cover; }
.slide-body { display: block; padding: 29.5px 0; transition: opacity .7s .5s; }
.slide:not(.is-current) .slide-body { opacity: 0; }
.slide-meta { display: flex; align-items: center; gap: 20px; }
.slide-date { font-size: 12px; letter-spacing: .06em; }
.slide-title { display: block; margin-top: 18px; font-size: 27px; font-weight: 700; line-height: 1.45; }
.slide-lead { display: block; margin-top: 12px; font-size: 15px; color: var(--c-text-sub); }
.slide-more { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; font-size: 15px; font-weight: 700; }
.arw { flex: none; color: var(--c-text); }
.sl[data-slider="single"] .slide { position: relative; }
.sl[data-slider="single"] .sl-track { height: auto; }
.sl-arrow { position: absolute; top: 167px; z-index: 3; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: var(--c-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .3s; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.sl-arrow.is-prev { left: 41px; } .sl-arrow.is-prev svg { transform: scaleX(-1); }
.sl-arrow.is-next { left: 743px; }
.motion-toggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; color: var(--c-text); background: #fff; border: 1px solid var(--c-line); border-radius: 22px; padding: 6px 16px; min-height: 44px; cursor: pointer; }
.motion-toggle .ic-play { display: none; }
.motion-toggle[aria-pressed="true"] .ic-pause { display: none; }
.motion-toggle[aria-pressed="true"] .ic-play { display: inline; }
.sl-toggle { position: absolute; left: 88px; top: 335px; z-index: 3; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.mv-side { width: 420px; flex: none; }
.mv-side-box { height: 744px; background: var(--c-band-soft); border-radius: 19.7px; padding: 30px 42px 29.5px 30px; overflow: hidden; }
.mv-side-h { font-size: 18px; font-weight: 700; display: inline-block; padding-right: 20px; }
.mv-side ol { margin-top: 14px; }
.mv-side li { padding: 25px 0; border-bottom: 1px solid var(--c-rule-soft); }
.mv-side li:last-child { border-bottom: 0; }
.mv-side a { display: flex; gap: 20px; }
.ms-img { flex: none; width: 140px; height: 71px; border-radius: 5px; overflow: hidden; background: #fff; }
.ms-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-title { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }

/* ---- セクション共通 ---- */
.sec { position: relative; padding: 63px 0 100px 63px; }
.sec > *:not(.circle-word):not(.guide-plane) { position: relative; z-index: 1; }
/* 帯の地は画面の端まで。2列の中の区画（ジャンル別の比較）だけ、サイドバーの下まで右へ伸ばす */
.sec-band::before { content: ""; position: absolute; inset: 0; background: var(--band); z-index: 0; }
@media (min-width: 1100px) { .pg-top .sec-genres::before { right: calc(-1 * var(--side-w) - 20px); } }
.sec-genres { --band: var(--c-band-blue); padding-top: 121px; }
.sec-list { --band: var(--c-band-green); padding-top: 113px; }
.sec-updated { padding-top: 120px; padding-bottom: 63px; }
.sh { display: flex; align-items: center; gap: 13px; margin-bottom: 52px; }
.sh-icon { position: relative; flex: none; display: grid; place-items: center; }
.sh-icon::before { content: ""; position: absolute; width: 74px; height: 66px; left: 50%; top: 52%; transform: translate(-40%, -50%); background: #fff; border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%; z-index: -1; }
.sh-icon img { height: 61px; width: auto; }
.sh-icon--genre img { height: 63px; } .sh-icon--list img { height: 68px; } .sh-icon--updated img { height: 67px; } .sh-icon--phone img { height: 65px; } .sh-icon--about img { height: 60px; }
.sh-title { font-size: 27px; font-weight: 700; line-height: 1.2; }
.sh-en { display: block; margin-top: 8px; font-family: var(--ff-en); font-size: 12px; font-weight: 500; letter-spacing: .1em; }
.sh-en::before { content: "-"; color: var(--c-accent); margin-right: 8px; }
.more { display: flex; justify-content: flex-end; margin-top: 40px; }
.more a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 0 10px 20px; font-size: 16px; font-weight: 700; letter-spacing: .06em; }

/* 記事カード */
.c-img { display: block; border-radius: 10px; overflow: hidden; background: var(--c-band-soft); }
.c-img img { width: 100%; height: 100%; object-fit: cover; }
.c-title { display: block; margin-top: 16px; font-size: 16px; line-height: 24px; font-weight: 700; }
.c-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.c-date { font-size: 12px; letter-spacing: .06em; color: var(--c-text-sub); white-space: nowrap; }
.cat { white-space: nowrap; }
.grid-new, .grid-updated { display: grid; grid-template-columns: repeat(4, 196px); column-gap: 10px; row-gap: 40px; justify-content: space-between; max-width: 815px; }
.grid-new .c-img, .grid-updated .c-img { aspect-ratio: 196 / 102; }
.grid-genre { display: grid; grid-template-columns: repeat(3, 259px); column-gap: 19px; row-gap: 40px; max-width: 815px; }
.grid-genre .c-img { aspect-ratio: 259 / 135; }

/* 円形の英字（スクロールに連動して回る・design-tokens「動き」） */
.circle-word { position: absolute; left: 492px; top: 49px; width: 1008px; height: 1008px; pointer-events: none; z-index: 0; transform: rotate(var(--cw-rot, 0deg)); color: rgba(31, 59, 92, .07); }
.circle-word svg { width: 100%; height: 100%; }
.circle-word text { font-family: var(--ff-en); font-size: 92px; font-weight: 700; fill: currentColor; letter-spacing: .02em; }
.sec-genres { overflow: hidden; }

/* ジャンルの一覧（上段 画像つき2列・下段 文字だけ2列） */
.list-pic { display: grid; grid-template-columns: repeat(2, 393px); column-gap: 30px; row-gap: 32px; }
.list-pic a { display: flex; gap: 20px; align-items: flex-start; }
.lp-img { flex: none; width: 129px; height: 68px; border-radius: 5px; overflow: hidden; margin-top: 4px; background: #fff; }
.lp-img img { width: 100%; height: 100%; object-fit: cover; }
.lp-title { display: block; font-size: 18px; font-weight: 700; line-height: 1.4; }
.lp-count { display: block; margin-top: 6px; font-size: 12px; color: var(--c-text-sub); }
.list-text { display: grid; grid-template-columns: repeat(2, 393px); column-gap: 30px; margin-top: 50px; }
.list-text a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--c-line); }
.lt-title { font-size: 16px; line-height: 24px; font-weight: 700; }
.list-text .cat { flex: none; width: 115px; }

/* 比べるときに見る項目（左に大きく丸めた淡い面・不定形に切り抜いた4枚） */
.sec-guide { padding: 100px 0 80px 61px; }
.guide-plane { position: absolute; left: 0; top: 0; width: 846px; height: 100%; background: var(--c-band-soft); border-radius: 0 312px 312px 0; z-index: 0; }
.guide-h { font-size: 27px; font-weight: 700; margin-bottom: 50px; }
.blob-row { display: grid; grid-template-columns: repeat(4, 175px); column-gap: 40px; }
.blob { display: block; width: 175px; height: 204px; overflow: hidden; background: #fff; }
.blob img { width: 100%; height: 100%; object-fit: cover; }
.blob-1 { border-radius: 9.52% 9.52% 76.19% / 7.84% 7.84% 70.58%; }
.blob-2 { border-radius: 85.71% 85.71% 19.05% 19.05% / 70.59% 70.59% 15.69% 15.69%; }
.blob-3 { border-radius: 19.05% 19.05% 85.71% 85.71% / 15.69% 15.69% 70.59% 70.59%; }
.blob-4 { border-radius: 9.52% 76.19% 9.52% 9.52% / 7.84% 62.74% 7.84% 7.84%; }
.blob-cat { display: block; margin-top: 16px; padding-left: 15px; position: relative; font-family: var(--ff-en); font-size: 12px; letter-spacing: .06em; }
.blob-cat::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 9px; margin-top: -5px; border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; background: var(--c-accent); }
.blob-title { display: block; margin-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.blob-desc { display: block; margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--c-text-sub); }

/* 料金・条件の変更履歴（左に見出し・右に行） */
.sec-changes { display: grid; grid-template-columns: 261px minmax(0, 554px); padding: 100px 0 100px 63px; }
.ch-head .sh { flex-direction: column; align-items: flex-start; }
.ch-item { display: grid; grid-template-columns: 100px 1fr; column-gap: 20px; padding: 16px 64px 16px 0; border-bottom: 1px solid var(--c-line); }
.ch-date { padding: 3px 0 0 4px; }
.ch-d { display: block; font-size: 12px; letter-spacing: .06em; font-weight: 600; }
.ch-date .badge { margin-top: 11px; }
.ch-title { font-size: 21px; font-weight: 700; line-height: 1.3; }
.ch-note { margin-top: 8px; font-size: 14px; color: var(--c-text-sub); line-height: 1.6; }

/* 比べ方の帯（面 699×301・右上 145px）と運営と広告の帯（面 846×392・0 89px 89px 0） */
.band { position: relative; }
.band-guide .band-box { position: relative; width: 699px; min-height: 301px; background: var(--c-band-soft); border-radius: 0 145px 0 0; padding: 66px 197px 55px 105px; }
.band-h { font-size: 27px; font-weight: 700; line-height: 1.35; margin-bottom: 20px; }
.band-content p { font-size: 14px; line-height: 1.85; }
.band-content .more { justify-content: flex-start; margin-top: 18px; }
.band-img { display: block; overflow: hidden; }
.band-img img { width: 100%; height: 100%; object-fit: cover; }
.band-img--round { position: absolute; left: 575px; top: -32px; width: 180px; height: 243px; border-radius: 400px; }
.band-about { padding-right: 64px; }
.band-about .band-box { position: relative; width: 846px; min-height: 392px; background: var(--c-band-yellow); border-radius: 0 89px 89px 0; padding: 69px 53px 8px 79px; overflow: hidden; }
.band-flex { position: relative; z-index: 1; display: flex; gap: 0; }
.band-about .band-content { width: 468px; padding: 12px 30px 52px 0; }
.band-about .sh { margin-bottom: 26px; }
.band-strong { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.band-img--about { width: 246px; height: 288px; flex: none; border-radius: 24px; margin-top: 15px; }
.mq-toggle { margin-top: 18px; }
.marquee { position: absolute; left: 0; right: 0; top: 164px; overflow: hidden; z-index: 0; pointer-events: none; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--mq-dur, 16s) linear infinite; }
.marquee-track span { font-family: var(--ff-en); font-size: 64px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .5); white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(var(--mq-shift, -920px)); } }
.is-motion-paused .marquee-track { animation-play-state: paused; }

/* 運営の案内（参考の外部リンクの枠の位置） */
.info-cards { padding: 99px 64px 56px 63px; }
.info-cards ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 26px; max-width: 815px; }
.info-cards a { display: block; }
.ic-title { display: flex; align-items: center; justify-content: center; height: 104px; background: #fff; border-radius: 10px; font-size: 18px; font-weight: 700; text-align: center; padding: 0 12px; }
.ic-desc { display: block; margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--c-text-sub); }

/* ---- フッター（左の面 845 幅・右上 109px） ---- */
.ft { margin-top: 0; }
.ft-head { width: 845px; max-width: 100%; background: var(--c-deep); color: #fff; border-radius: 0 109px 0 0; padding: 32px 110px 16px 73px; }
.ft-logo { display: inline-flex; flex-direction: column; }
.ft-logo .logo-sub { color: rgba(255, 255, 255, .85); }
.ft-logo .logo-name { font-size: 28px; }
.ft-links { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 32px; margin-top: 22px; font-size: 13px; font-weight: 700; justify-content: start; }
.ft-note { margin-top: 22px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.ft-copy { background: #222; color: #fff; text-align: right; font-size: 12px; padding: 10px 35px; }

/* ---- メニュー（右上を起点に広がるパネル・左上 100px） ---- */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.menu::backdrop { background: transparent; }
.menu-bg { position: absolute; inset: 0; background: var(--c-overlay); opacity: 0; transition: opacity .8s var(--ease); }
.menu-panel { position: absolute; top: 0; right: 0; width: min(1120px, 100%); height: 100%; background: var(--c-bg); border-radius: 100px 0 0 0; overflow-y: auto; transform: scale(0); transform-origin: 100% 0; transition: transform .8s var(--ease2); padding: 48px 92px 80px 120px; }
.menu.is-open .menu-bg { opacity: 1; }
.menu.is-open .menu-panel { transform: scale(1); }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-title { font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.menu-close { display: inline-flex; align-items: center; gap: 12px; font: inherit; font-size: 15px; font-weight: 700; background: none; border: 0; cursor: pointer; padding: 10px; color: var(--c-text); }
.menu-x { position: relative; width: 14px; height: 14px; }
.menu-x::before, .menu-x::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: currentColor; transform: rotate(45deg); }
.menu-x::after { transform: rotate(-45deg); }
.menu-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; margin-top: 56px; }
.menu-h { font-size: 26px; font-weight: 700; margin-bottom: 18px; }
.menu-h::before { content: "-"; color: var(--gcol, var(--c-accent)); margin-right: 6px; }
.menu-col ul { border-left: 1px solid var(--c-rule-soft); padding-left: 18px; }
.menu-col li a { display: block; padding: 6px 0; font-size: 15px; font-weight: 600; line-height: 1.6; }
html.is-menu-open { overflow: hidden; }

/* ---- 記事・一覧・固定ページ ---- */
.g-bg-fiber { --c-page: var(--g-fiber-bg); background: var(--g-fiber-bg); --toc: var(--g-fiber-toc); --gcol: var(--g-fiber); }
.g-bg-mobile { --c-page: var(--g-mobile-bg); background: var(--g-mobile-bg); --toc: var(--g-mobile-toc); --gcol: var(--g-mobile); }
.g-bg-homewifi { --c-page: var(--g-homewifi-bg); background: var(--g-homewifi-bg); --toc: var(--g-homewifi-toc); --gcol: var(--g-homewifi); }
.bc { padding: 0 138px; }
.bc ol { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--c-text-sub); }
.bc li + li::before { content: "/"; margin-right: 14px; color: var(--c-line); }
.bc li[aria-current] { max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 記事: 見出し画像（1004px）の下からサイドバーを始める（参考の実測: 画像の上端 154・サイドバーの上端 833） */
@media (min-width: 1100px) { .pg-article .side { margin-top: 680px; } .pg-guide .side, .pg-static .side, .pg-list .side { margin-top: 40px; } }
.article { padding-top: 20px; }
.a-fig { margin: 0 0 0 138px; width: 1004px; max-width: calc(100vw - 276px); position: relative; z-index: 3; }
.a-fig img { width: 100%; aspect-ratio: 1004 / 559; object-fit: cover; border-radius: 30px; background: #fff; }
.a-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; }
.ad-line { margin: 24px 0 0 138px; max-width: 714px; font-size: 14px; line-height: 1.6; padding: 10px 14px; background: rgba(255, 255, 255, .7); border-radius: 10px; }
.a-body { padding: 0 56px 100px 138px; max-width: 910px; }
.page-static .a-body { padding-top: 30px; }
.a-head { margin-top: 40px; }
.a-meta { display: flex; align-items: center; gap: 23px; }
.date-pill { display: inline-block; min-width: 106px; padding-inline: 12px !important; white-space: nowrap; text-align: center; font-size: 12px; letter-spacing: .06em; line-height: 1; padding: 4px 0; border: 1px solid var(--c-text); border-radius: 10px; }
.a-head h1, .page-static h1 { margin-top: 12px; font-size: 32px; font-weight: 700; line-height: 1.22; }
.lead { margin-top: 14px; font-size: 16px; line-height: 1.58; letter-spacing: .115em; color: var(--c-text-sub); }
.a-retrieved { margin-top: 10px; font-size: 13px; color: var(--c-text-sub); }
.intro { margin-top: 25px; }
.a-body p { line-height: 28.2px; }
.a-body p + p { margin-top: 1em; }
.toc { margin: 58px 0; background: var(--toc, var(--c-band-soft)); border-radius: 18px; padding: 40px 72px; }
.toc-h { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
.toc li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.6; }
.toc li + li { margin-top: 10px; }
.toc li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 9px; border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; background: var(--gcol, var(--c-accent)); }
.sec-a h2, .page-static h2 { position: relative; margin: 80px 0 30px; padding-left: 20px; font-size: 30px; font-weight: 700; line-height: 1.25; }
.sec-a h2::before, .page-static h2::before { content: ""; position: absolute; left: 0; top: 19px; width: 14px; height: 3px; background: var(--gcol, var(--c-accent)); }
.criteria { counter-reset: c; margin-top: 18px; }
.criteria li { counter-increment: c; position: relative; padding: 12px 0 12px 44px; border-bottom: 1px solid var(--c-rule-soft); font-weight: 700; }
.criteria li::before { content: counter(c); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 13px; font-family: var(--ff-en); }
.scroll-hint { margin-top: 18px; font-size: 14px; color: var(--c-text-sub); }
.table-frame { position: relative; margin-top: 18px; }
.table-frame::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none; background: linear-gradient(to right, rgba(241, 245, 250, 0), var(--c-page, #e6f0fb)); opacity: 0; transition: opacity .3s; }
.table-frame.has-more::after { opacity: 1; }
.table-scroll { overflow-x: auto; }
.page-static .table-scroll { margin-top: 18px; }
.compare-table tbody th, .compare-table thead th.corner { position: sticky; left: 0; z-index: 1; background: var(--c-page, var(--c-bg)); }
.as-of { margin-top: 10px; font-size: 14px; color: var(--c-text-sub); }
.ad-line .pr { margin-right: 8px; }
.side-points li + li { margin-top: 16px; }
.side-this li + li { margin-top: 12px; }
.side-this a { display: block; padding: 10px 14px; background: #fff; border-radius: 10px; }
.mv.is-single .sl { width: 100%; }
.side-all li a { display: block; padding: 10px 0 10px 16px; border-bottom: 1px solid var(--c-rule-soft); font-size: 13px; font-weight: 600; line-height: 1.55; position: relative; }
.side-all li a::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.side-about { text-align: center; }
.sa-img { display: block; width: 150px; height: 176px; margin: 0 auto 14px; border-radius: 75px; overflow: hidden; background: var(--c-band-yellow); }
.sa-img img { width: 100%; height: 100%; object-fit: cover; }
.sa-text { font-size: 13px; line-height: 1.8; text-align: left; }
.side-points a { display: flex; gap: 14px; }
.sp-img { flex: none; width: 64px; height: 75px; border-radius: 10px; overflow: hidden; background: #fff; }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-desc { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--c-text-sub); }
.compare-table, .kv { width: 100%; border-collapse: collapse; border-top: 2px solid var(--c-rule); border-bottom: 2px solid var(--c-rule); font-size: 14px; line-height: 21px; }
.compare-table th, .compare-table td, .kv th, .kv td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-rule-soft); }
.compare-table thead th { font-weight: 700; white-space: nowrap; }
.compare-table tbody th { min-width: 150px; font-weight: 700; }
.compare-table td { min-width: 150px; }
.row-provider { display: block; font-size: 15px; font-weight: 700; }
.row-plan { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.compare-table tbody th { box-shadow: inset -1px 0 0 var(--c-line); }
.fig { display: block; }
.fig-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fig-unit { font-size: 13px; margin-left: 2px; }
.fig-text { font-weight: 700; }
.cond { display: block; font-size: 12px; line-height: 1.5; color: var(--c-text-sub); margin-top: 4px; }
.meta-line { display: none; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; color: var(--c-text-sub); }
.meta-line .src { text-decoration: underline; }
.due.is-soon { color: #a0341f; font-weight: 700; }
.stale { font-weight: 700; color: #a0341f; }
.service { margin-top: 48px; }
.service-name { font-size: 22px; font-weight: 700; }
.service-plans { margin: 8px 0 16px; font-size: 13px; color: var(--c-text-sub); }
.kv th { width: 34%; font-weight: 700; }
.per-plan li { display: flex; justify-content: space-between; gap: 12px; }
.official { margin-top: 24px; }
.btn-official { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 16px 24px 16px 24px; border: 2px solid var(--c-text); border-radius: 28px; background: #fff; font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.btn-official .pr { font-size: 11px; }
.dots li { position: relative; padding-left: 18px; }
.dots li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--gcol, var(--c-accent)); }
.picks { margin-top: 40px; background: #fff; border-radius: 18px; padding: 36px 48px 32px; }
.picks-h { position: relative; padding-left: 20px; font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: 18px; }
.picks-h::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 3px; background: var(--gcol, var(--c-accent)); }
.picks li { padding: 18px 0; border-bottom: 1px solid var(--c-rule-soft); }
.picks li:last-child { border-bottom: 0; }
.pick-who { font-size: 15px; font-weight: 700; }
.pick-to { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 22px; font-weight: 700; line-height: 1.4; }
.pick-arrow { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gcol, var(--c-accent)); color: #fff; }
.pick-arrow svg { width: 14px; height: 14px; }
.pick-why { margin-top: 6px; font-size: 15px; line-height: 1.8; }
.svc-col { margin-top: 28px; }
.svc-col-sub { display: block; font-size: 13px; font-weight: 700; color: var(--c-text-sub); }
.svc-col-sub::before { content: ""; display: inline-block; width: 9px; height: 7px; margin-right: 6px; border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; background: var(--gcol, var(--c-accent)); vertical-align: 2px; }
.svc-col--rep .svc-col-sub::before { background: var(--c-line); }
.svc-col-main { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.5; }
.svc-col-text { margin-right: 8px; }
.svc-good { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-style: italic; white-space: nowrap; color: var(--c-deep); vertical-align: 1px; }
.svc-good svg { fill: var(--c-deep); }
.svc-col-body { margin-top: 8px; }
.svc-col-body p { font-size: 15px; line-height: 1.8; }
.svc-col + .kv { margin-top: 28px; }
.a-figure { margin: 48px 0 0; }
.af-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: #fff; border-radius: 20px; padding: 24px; }
.af-img { display: block; aspect-ratio: 175 / 204; border-radius: 14px; overflow: hidden; background: var(--c-band-soft); }
.af-img img { width: 100%; height: 100%; object-fit: cover; }
.af-label { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; text-align: center; }
.a-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; }
.genre-panel { margin-top: 100px; background: var(--toc, var(--c-band-soft)); border-radius: 0 120px 20px 20px; padding: 56px 48px 40px; }
.gp-h { font-size: 27px; font-weight: 700; margin-bottom: 32px; }
.gp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
.gp-grid a { display: flex; gap: 16px; }
.gp-img { flex: none; width: 129px; height: 72px; border-radius: 6px; overflow: hidden; background: #fff; }
.gp-img img { width: 100%; height: 100%; object-fit: cover; }
.gp-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; margin-bottom: 4px; }
.bc--bottom { padding: 60px 0 0; }
.related { margin-top: 100px; }
.related-h { font-size: 32px; font-weight: 700; padding-left: 16px; margin-bottom: 26px; }
.related-big { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.related-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.r-img { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 703 / 391; background: #fff; }
.r-img img { width: 100%; height: 100%; object-fit: cover; }
.r-title { display: block; margin: 14px 0 8px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.pg-list .sec { padding-top: 40px; }
.anchor { position: relative; top: -20px; }

/* ---- タブレット（768〜1099px） ---- */
@media (max-width: 1099px) {
  .hd-in { height: 76px; padding: 0 30px; }
  .gnav { display: none; }
  .menu-btn { margin-left: auto; }
  .mv { flex-direction: column; padding: 0; min-height: 0; }
  .sl, .mv-side { width: 100%; }
  .sl-track { height: auto; aspect-ratio: auto; display: grid; }
  .slide, .sl[data-slider] .slide { grid-area: 1 / 1; position: relative; left: 0; width: auto; margin: 0 56px; }
  .sl-arrow { top: 25%; } .sl-arrow.is-prev { left: 10px; } .sl-arrow.is-next { left: auto; right: 10px; }
  .sl-toggle { position: static; margin: 0 56px 20px; }
  .mv-side { padding: 0 68px; }
  .mv-side-box { height: auto; border-radius: 20px; padding: 30px; }
  .sec, .sec-guide, .sec-changes, .info-cards { padding-left: 30px; padding-right: 30px; }
  .sec-band::before { inset: 0; }
  .grid-new, .grid-updated { grid-template-columns: repeat(3, 1fr); column-gap: 14px; max-width: none; }
  .grid-genre { grid-template-columns: repeat(3, 1fr); column-gap: 16px; max-width: none; }
  .list-pic, .list-text { grid-template-columns: repeat(2, 1fr); }
  .blob-row { grid-template-columns: repeat(4, 1fr); column-gap: 20px; }
  .blob { width: 100%; height: auto; aspect-ratio: 175 / 204; }
  .guide-plane { width: 92%; }
  .sec-changes { grid-template-columns: 1fr; }
  .ch-head .sh { flex-direction: row; align-items: center; }
  .band-guide .band-box, .band-about .band-box { width: auto; margin-right: 30px; }
  .band-guide .band-box { padding-right: 240px; }
  .band-img--round { left: auto; right: 40px; }
  .band-about { padding-right: 0; }
  .band-about .band-content { width: auto; flex: 1; }
  .ft-links { grid-template-columns: 1fr; }
  .info-cards ul { max-width: none; }
  .bc { padding: 0 56px; }
  .a-fig { margin-left: 56px; width: auto; max-width: none; margin-right: 56px; }
  .ad-line { margin-left: 56px; margin-right: 56px; }
  .a-body { padding: 0 56px 80px; max-width: none; }
  .circle-word { left: 30%; }
}

/* ---- スマホ（〜767px） ---- */
@media (max-width: 767px) {
  .ad-banner { font-size: 13px; }
  .ad-banner p { padding: 8px 16px; }
  .ad-long { display: none; }
  .ad-short { display: inline; }
  .logo-name { font-size: 24px; }
  .logo { height: auto; }
  .slide, .sl[data-slider] .slide { margin: 0 30px; }
  .mv-side { padding: 0 0 0 35px; }
  .mv-side-box { border-radius: 20px 0 0 20px; }
  .slide-img { border-radius: 16px; }
  .slide-title { font-size: 20px; }
  .sl-toggle { margin: 0 30px 16px; }
  .sec { padding: 40px 30px 50px; }
  .sec-genres { padding-top: 79px; padding-bottom: 47px; }
  .sec-list { padding-top: 64px; }
  .sec-updated { padding-top: 76px; padding-bottom: 57px; }
  .sh { margin-bottom: 30px; }
  .sh-title { font-size: 22px; }
  .sh-en { font-size: 11px; }
  .grid-new { grid-template-columns: 1fr; row-gap: 20px; }
  .grid-new a { display: grid; grid-template-columns: 129px 1fr; column-gap: 16px; }
  .grid-new .c-img { grid-row: span 2; aspect-ratio: 129 / 68; }
  .grid-new .c-title { margin-top: 0; font-size: 15px; line-height: 22px; }
  .grid-new .c-meta, .grid-updated .c-meta { flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px; margin-top: 6px; }
  .kv th { width: 40%; }
  .compare-table tbody th, .compare-table thead th.corner { min-width: 110px; width: 110px; max-width: 110px; }
  .compare-table td { min-width: 132px; }
  .grid-genre { grid-template-columns: 1fr; }
  .grid-genre .c-title { font-size: 18px; }
  .grid-updated { grid-template-columns: repeat(2, 1fr); }
  .grid-updated .c-img { border-radius: 5px; }
  .grid-updated .c-title { font-size: 12px; line-height: 18px; }
  .list-pic, .list-text { grid-template-columns: 1fr; }
  .blob-row { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .sec-changes { padding: 57px 30px 60px; }
  .ch-item { grid-template-columns: 1fr; padding-right: 0; }
  .ch-date { display: flex; gap: 12px; align-items: center; }
  .ch-date .badge { margin-top: 0; }
  .ch-title { font-size: 16px; margin-top: 8px; }
  .band-guide .band-box { padding: 50px 150px 40px 30px; margin-right: 0; border-radius: 0 80px 0 0; }
  .band-img--round { right: 20px; top: -24px; width: 110px; height: 148px; }
  .band-h { font-size: 20px; }
  .band-about .band-box { margin-right: 0; padding: 40px 30px 20px; border-radius: 0 60px 60px 0; }
  .band-flex { flex-direction: column-reverse; }
  .band-img--about { width: 160px; height: 187px; margin: 0 0 20px; }
  .info-cards { padding: 47px 30px 56px; }
  .info-cards ul { grid-template-columns: 1fr; }
  .ft-head { border-radius: 0 60px 0 0; padding: 32px 30px 16px; }
  .menu-panel { padding: 30px 30px 60px; border-radius: 60px 0 0 0; }
  .menu-nav { grid-template-columns: 1fr; gap: 32px; }
  .menu-h { font-size: 20px; }
  .bc { padding: 0 30px; }
  .a-fig { margin: 0 30px; }
  .a-fig img { border-radius: 11px; }
  .ad-line { margin: 20px 30px 0; }
  .a-body { padding: 0 30px 60px; }
  .a-meta { justify-content: space-between; }
  .a-meta .cat--lg { font-size: 12px; padding-left: 18px; }
  .date-pill { min-width: 96px; font-size: 10px; }
  .a-head h1, .page-static h1 { font-size: 24px; }
  .toc { margin: 34px 0; padding: 30px; }
  .sec-a h2, .page-static h2 { font-size: 20px; margin: 34px 0 21px; }
  .sec-a h2::before, .page-static h2::before { top: 12px; }
  .related-h { font-size: 24px; padding-left: 0; }
  .related-big { grid-template-columns: 1fr; gap: 30px; }
  .related-small { grid-template-columns: repeat(2, 1fr); }
  .af-grid { grid-template-columns: repeat(2, 1fr); padding: 16px; }
  .picks { padding: 26px 20px 20px; }
  .picks-h { font-size: 20px; }
  .pick-to { font-size: 17px; }
  .pick-why { font-size: 14px; }
  .svc-col-main { font-size: 17px; }
  .svc-col-body p { font-size: 14px; }
  .genre-panel { padding: 40px 24px 30px; border-radius: 0 60px 16px 16px; }
  .gp-h { font-size: 20px; }
  .gp-grid { grid-template-columns: 1fr; }
  .circle-word { left: 10%; top: 20px; width: 640px; height: 640px; }
}

/* ---- 動きを減らす設定（自動再生・回転・マーキー・メニューの動きを止める） ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .marquee-track { animation: none; }
  .slide:not(.is-current) .slide-body { opacity: 1; }
}