/* Hosts Tune 紹介ページ
   地は明るい灰白、面は白、罫は髪の毛ほど、色は青1色(+注意色)。
   切り替えの状態は html[data-state="normal|verify|local"] で表し、各部はそれを見て表示を変える。 */

@font-face { font-family: "HT Sans"; font-weight: 400; font-display: swap; src: url("fonts/ht-sans-regular.woff2") format("woff2"); }
@font-face { font-family: "HT Sans"; font-weight: 500; font-display: swap; src: url("fonts/ht-sans-medium.woff2") format("woff2"); }
@font-face { font-family: "HT Sans"; font-weight: 700; font-display: swap; src: url("fonts/ht-sans-bold.woff2") format("woff2"); }
@font-face { font-family: "HT Inter"; font-weight: 300 700; font-display: swap; src: url("fonts/ht-inter.woff2") format("woff2"); }

:root {
  --bar-mid: 26px; /* ブラウザのツールバー(高さ52px)の中心 */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --line: #DADFE7;
  --line-2: #C6CDD8;
  --ink: #141C2B;
  --sub: #566178;
  --blue: #1F63D9;
  --blue-deep: #174FB3;
  --blue-soft: #EAF1FD;
  --warn: #A34A00;
  --warn-soft: #FFF3E0;
  --navy: #0F1B2D;
  --blue-dark: #3385FF;
  --sans: "HT Inter", "HT Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pad: clamp(20px, 5vw, 64px);
  --mbh: 48px;
  --shadow-win: 0 1px 2px rgba(15, 27, 45, .06), 0 28px 56px -28px rgba(15, 27, 45, .32);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--mbh) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.95; letter-spacing: .04em;
  line-break: strict; word-break: keep-all; overflow-wrap: anywhere;
  text-autospace: normal; text-spacing-trim: trim-start;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
.mono { font-family: var(--mono); letter-spacing: 0; font-feature-settings: normal; }
.nw { white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.num { font-family: "HT Inter", var(--sans); font-weight: 600; font-size: 1.12em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.unit { font-size: .86em; }
.q { font-feature-settings: "palt"; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.safety :focus-visible, .notice :focus-visible { outline-color: #FFFFFF; }

.skip {
  position: fixed; left: 12px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 14px; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: calc(1240px + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
section { scroll-margin-top: calc(var(--mbh) + 8px); }

/* ---------- 見出しと共通の部品 ---------- */
.h1 {
  font-weight: 700; font-size: clamp(30px, 4.8vw, 68px); line-height: 1.28; letter-spacing: .01em;
  font-feature-settings: "palt"; margin-left: -.04em;
}
.h2 {
  font-weight: 700; font-size: clamp(30px, 5.2vw, 56px); line-height: 1.32; letter-spacing: .01em;
  font-feature-settings: "palt";
}
.h2--s { font-size: clamp(26px, 3.4vw, 36px); }
.h2--l { font-size: clamp(32px, 4.6vw, 72px); }
.h3 { font-weight: 700; font-size: 19px; line-height: 1.5; letter-spacing: .02em; font-feature-settings: "palt"; }
.h4 { font-weight: 700; font-size: 18px; line-height: 1.55; letter-spacing: .02em; font-feature-settings: "palt"; }
.sec-no {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--blue); letter-spacing: .08em; font-feature-settings: "palt";
}
.sec-no .mono {
  display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px;
  background: var(--blue-soft); font-size: 12.5px; font-weight: 600;
}
.sec-no--inv { color: #FFFFFF; }
.sec-no--inv .mono { background: #FFFFFF; color: var(--blue); }

.lights { display: inline-flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #DADFE7; box-shadow: inset 0 0 0 .5px rgba(20, 28, 43, .12); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px 10px 16px;
  border: 0; border-radius: 10px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.5;
  cursor: pointer; text-align: left; transition: background-color .15s, transform .15s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { background: var(--blue-deep); }
.btn:active { transform: scale(.98); }

/* ---------- メニューバー(ヘッダー) ---------- */
.mb { position: sticky; top: 0; z-index: 50; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.mb__in { display: flex; align-items: center; height: var(--mbh); max-width: calc(1240px + var(--pad) * 2); margin-inline: auto; padding-inline: calc(var(--pad) - 10px); }
.mb__app {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px; border-radius: 7px;
  text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
}
.mb__app img { width: 22px; height: 22px; }
.mb__app:hover { background: rgba(20, 28, 43, .06); }
.mb__nav { position: relative; margin-left: 8px; }
.mb__list { display: flex; }
.mb__list a {
  display: flex; align-items: center; height: 40px; padding: 0 11px; border-radius: 7px;
  font-size: 14px; font-weight: 500; text-decoration: none; letter-spacing: .04em; white-space: nowrap; color: var(--ink);
}
.mb__list a:hover { background: rgba(20, 28, 43, .06); }
.mb__toc { display: none; }
.mb__right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mb__status {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-deep); font-size: 13px; font-weight: 500; letter-spacing: .06em; white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }
.mb__extra {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; color: var(--ink); --shield-cut: #FFFFFF;
}
.mb__extra::before { content: ""; position: absolute; left: 6px; top: 8px; width: 32px; height: 28px; border-radius: 6px; border: 1px solid var(--line-2); background: #FFFFFF; transition: background-color .15s, border-color .15s; }
.mb__extra .g { position: relative; }
html:not([data-state="normal"]) .mb__extra { color: var(--blue); }
.mb__extra:hover::before { border-color: var(--blue); }
.mb__extra[aria-expanded="true"]::before { background: #DCE8FD; border-color: var(--blue); }
.mb__extra[aria-expanded="true"] { --shield-cut: #DCE8FD; }
.mb__extra .g { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .25s var(--ease), transform .3s var(--ease); }

html[data-state="normal"] .g--over, html:not([data-state="normal"]) .g--normal { opacity: 0; transform: scale(.7); }
/* 実演のあとに1度だけ、アイコンの場所を知らせる輪 */
.mb__extra::after {
  content: ""; position: absolute; inset: 4px; border-radius: 10px; border: 2px solid var(--blue); opacity: 0; pointer-events: none;
}
.mb__extra.is-hint::after { animation: hint 1.1s var(--ease) 2; }
@keyframes hint { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }

/* 最初だけ出す吹き出し */
.mb__right { position: relative; }
.tip {
  position: absolute; top: calc(100% + 6px); right: -4px; z-index: 55; width: max-content; padding: 8px 13px; border-radius: 8px; background: var(--ink); color: #FFFFFF;
  font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; animation: tipIn .35s var(--ease);
}
.tip::before { content: ""; position: absolute; right: 18px; top: -5px; width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.tip.is-out { opacity: 0; transition: opacity .18s var(--ease); }
@keyframes tipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ポップオーバー */
.pop {
  position: fixed; top: calc(var(--mbh) + 6px); right: 12px; z-index: 60; width: min(360px, calc(100vw - 16px));
  background: #F0F1F3; border: 1px solid rgba(20, 28, 43, .12); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 27, 45, .08), 0 24px 56px -16px rgba(15, 27, 45, .3);
  font-size: 14px; line-height: 1.5; letter-spacing: .02em;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .16s var(--ease), transform .2s var(--ease);
}
.pop.is-open { opacity: 1; transform: none; }
.pop__head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.pop__brand { display: flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 700; font-size: 15px; }
.pop__brand svg { width: 20px; height: 20px; }
.pop__demo { font-size: 13px; color: var(--sub); }
.pop__now { display: flex; flex-direction: column; gap: 5px; padding: 14px 18px 12px; }
.pop__cap { font-size: 13px; color: var(--sub); }
.pop__title { font-size: 19px; font-weight: 700; letter-spacing: .01em; font-feature-settings: "palt"; }
.pop__first { font-size: 12px; color: var(--sub); white-space: nowrap; }
.pop__first:empty { display: none; }
.pop__list { padding: 0 10px 10px; display: grid; gap: 3px; }
.pop__list button {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 9px 11px;
  border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer;
}
.pop__list button:hover, .pop__list button.is-hover { background: rgba(20, 28, 43, .06); }
.pop__list button[aria-checked="true"] { background: rgba(31, 99, 217, .09); }
.pop__list button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 8px; }
.pop__list svg { width: 20px; height: 20px; flex: none; }
.pop__on { color: var(--blue); display: none; }
.pop__off { color: #8F98AA; }
[aria-checked="true"] .pop__on { display: block; }
[aria-checked="true"] .pop__off { display: none; }
.pop__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pop__nm { font-size: 15px; font-weight: 500; }
.pop__sub { font-size: 13px; color: var(--sub); }
.pop__sub .mono { font-size: 12.5px; }
.pop__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px 8px; border-top: 1px solid var(--line); }
.pop__edit { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 6px; color: var(--blue); font-weight: 500; text-decoration: none; }
.pop__edit:hover { background: var(--blue-soft); }
.pop__undo {
  min-height: 34px; margin: 5px 0; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 7px; background: #FFFFFF;
  font-size: 13.5px; cursor: pointer; box-shadow: 0 1px 1px rgba(20, 28, 43, .06);
}
.pop__undo:hover { background: var(--bg); }
.pop__undo[aria-disabled="true"] { color: #8F98AA; cursor: default; box-shadow: none; background: var(--bg); }
.pop__base { display: flex; justify-content: space-between; padding: 2px 18px 12px; font-size: 13px; color: var(--sub); }

/* ---------- 状態ごとの出し分け ---------- */
[data-show] { transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; }
html[data-state="normal"] [data-show]:not([data-show="normal"]),
html[data-state="verify"] [data-show]:not([data-show="verify"]),
html[data-state="local"] [data-show]:not([data-show="local"]) {
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}

/* ---------- 1. ヒーロー ---------- */
.hero { padding: calc(clamp(32px, 3.6vw, 56px) + 12px) 0 clamp(64px, 6vw, 80px); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "copy" "stage" "cap"; }
.hero__top { grid-area: top; }
.hero__copy { grid-area: copy; display: grid; grid-template-columns: minmax(0, 22em) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 40px); align-items: start; max-width: 900px; margin-top: 26px; }
.hero__copy .badges { margin-top: 2px; flex-wrap: nowrap; }
.hero__copy .try { margin-top: 18px; justify-self: start; }
.hero__copy > :not(.lead) { grid-column: 2; }
.hero__copy .lead { grid-row: 1 / 3; }
.hero__stage { grid-area: stage; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; margin-top: clamp(64px, 5vw, 72px); }
.br-sp { display: none; }
.hero__cap { grid-area: cap; margin-top: 22px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--blue); font-feature-settings: "palt"; }
.eyebrow svg { width: 20px; height: 20px; flex: none; }
.lead { max-width: 25em; font-size: 17px; line-height: 2; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.badge {
  display: inline-flex; align-items: center; gap: 0; min-height: 36px; padding: 4px 13px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0; min-height: 38px; padding: 5px 15px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid var(--line); font-size: 14px; line-height: 1.5; font-weight: 500;
}
.badge--soon { color: var(--blue-deep); border-color: #B9CDF2; }
.badge--soon .dot { background: var(--blue); margin-right: 9px; }
.try {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 26px; padding: 8px 22px 8px 16px; border: 0; border-radius: 10px;
  background: var(--blue); color: #FFFFFF; font-size: 16px; font-weight: 500; line-height: 1.5; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 24px -12px rgba(31, 99, 217, .7);
  transition: background-color .15s, transform .15s var(--ease);
}
.try__g { width: 22px; height: 22px; color: #FFFFFF; --shield-cut: var(--blue); }
.try:hover { background: var(--blue-deep); }
.try:hover .try__g { --shield-cut: var(--blue-deep); }
.try:active { transform: scale(.98); }
.hero__note { display: block; max-width: 44em; font-size: 14px; line-height: 1.8; color: var(--sub); }

/* 模したブラウザ */
.bw { position: relative; background: #FFFFFF; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-win); }
.bw__bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); }
/* アドレスバーから分岐器へ向かう線 */
.hero .bw__bar::after { content: ""; grid-column: 3; height: 4px; align-self: start; margin: calc(var(--bar-mid) - 2px - 1px) -17px 0 0; background: var(--blue); border-radius: 2px 0 0 2px; }
.bw__addr {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; min-width: 0; width: clamp(230px, 46%, 320px);
  padding: 0 14px; border-radius: 8px; background: var(--bg); font-size: 15px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue);
}
.bw__addr .mono { white-space: nowrap; }
.bw__addr svg { width: 12px; height: 12px; color: var(--sub); flex: none; }
.bw__note {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; font-size: 14px; font-weight: 500; color: var(--blue); line-height: 1.4; white-space: nowrap;
}
.bw__note::after { content: ""; width: 1px; height: 16px; margin-top: 4px; background: var(--blue); }
.bw__route { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; min-height: 54px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: #FAFBFC; overflow: hidden; }
/* 切り替わった瞬間に走る線 */
.bw__route::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; opacity: 0; }
.bw.is-switch .bw__route::after { animation: sweep .7s var(--ease); }
@keyframes sweep { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.bw__k { font-size: 14px; font-weight: 500; color: var(--sub); line-height: 1.4; padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF; }
.bw__v { grid-area: 1 / 2; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.bw__v .mono { color: var(--blue); font-size: 18px; }
.bw__v small { font-size: 14px; font-weight: 500; color: var(--sub); }
html[data-state] .bw__v[data-show] { transform: none; }
.bw__view { display: grid; aspect-ratio: 16 / 8.4; border-radius: 0 0 12px 12px; overflow: hidden; }
.site { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 4.5%; padding: 3.6% 4.4%; background: #FFFFFF; }
html[data-state] .site[data-show] { transform: none; }
html[data-state="normal"] .site:not([data-show="normal"]),
html[data-state="verify"] .site:not([data-show="verify"]),
html[data-state="local"] .site:not([data-show="local"]) { transform: scale(1.03); }
.site i, .site em, .site span, .site b { display: block; }
.site__nav { display: flex; align-items: center; gap: 3%; height: 9%; flex: none; }
.site__nav b { font-family: "HT Inter", sans-serif; font-size: clamp(11px, 1.1vw, 14px); font-weight: 700; letter-spacing: -.01em; margin-right: auto; line-height: 1; }
.site__nav i { width: 7%; height: 22%; border-radius: 9px; }
.site__tag {
  position: absolute; right: 3.5%; bottom: 5%; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.5;
  background: #FFFFFF; border: 1px solid var(--line); color: var(--sub);
}
.w60 { width: 60%; } .w70 { width: 70%; } .w90 { width: 90%; }
/* 現在のサイト: 灰色の帯と左メニューの、古い組み方 */
.site--old { background: #E9EBEE; padding: 0; gap: 0; }
.site--old .site__nav { height: 13%; padding: 0 4.4%; background: #7D8592; }
.site--old .site__nav b { color: #FFFFFF; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .02em; }
.site--old .site__nav i { background: rgba(255, 255, 255, .45); border-radius: 2px; }
.site--old .site__body { flex: 1; display: grid; grid-template-columns: 22% 1fr; gap: 3%; padding: 3% 4.4%; }
.site--old .site__side { display: flex; flex-direction: column; gap: 8%; padding: 6% 8%; background: #F6F7F8; border: 1px solid #D3D7DD; }
.site--old .site__side i { height: 7%; background: #B4BAC4; }
.site--old .site__main { display: flex; flex-direction: column; gap: 6%; }
.site--old .site__banner { position: relative; flex: 1 1 58%; background: #C4C9D1; border: 1px solid #B4BAC4; display: flex; align-items: flex-end; justify-content: center; gap: 2%; padding-bottom: 3%; }
.site--old .site__banner em { width: 1.6%; aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; opacity: .7; }
.site--old .site__txt { flex: 1 1 30%; display: flex; flex-direction: column; gap: 14%; }
.site--old .site__txt i { height: 12%; background: #C4C9D1; }
/* リニューアル後: 青の全面と大きな見出し */
.site--new { background: var(--blue); }
.site--new .site__nav b { color: #FFFFFF; }
.site--new .site__nav i { background: rgba(255, 255, 255, .55); }
.site--new .site__nav em { width: 13%; height: 46%; border-radius: 99px; background: #FFFFFF; }
.site--new .site__hero { flex: 1 1 62%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 5%; align-items: center; }
.site--new .site__hero div { display: flex; flex-direction: column; gap: 12px; }
.site--new .site__hero i { height: clamp(12px, 1.9vw, 26px); border-radius: 4px; background: #FFFFFF; }
.site--new .site__hero em { width: 40%; height: clamp(16px, 2.3vw, 30px); margin-top: 8px; border-radius: 99px; background: var(--ink); }
.site--new .site__img { height: 92%; border-radius: 14px; background: radial-gradient(circle at 62% 42%, var(--blue) 0 24%, transparent 24.5%), #EAF1FD; }
.site--new .site__row { flex: 1 1 18%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.site--new .site__row span { border-radius: 10px; background: rgba(255, 255, 255, .92); }
.site--new .site__tag { background: #FFFFFF; border-color: #FFFFFF; color: var(--blue-deep); }
/* 開発中: 足場の縞と、つないでいる 127.0.0.1 */
.site--dev { background: repeating-linear-gradient(135deg, #F4F6F9 0 16px, #E3E8F0 16px 32px); }
.site--dev .site__nav b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.site--dev .site__nav i { background: transparent; border: 1.5px dashed #8994A8; }
.site--dev .site__frame { flex: 1 1 52%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 6%; border: 2px dashed #8994A8; border-radius: 8px; background: rgba(255, 255, 255, .88); }
.site--dev .site__ip { font-family: var(--mono); font-size: clamp(22px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.site--dev .site__wip { font-size: clamp(12px, 1.1vw, 15px); font-weight: 500; color: var(--sub); }
.site--dev .site__cols { flex: 1 1 22%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.site--dev .site__cols span { border: 1.5px dashed #8994A8; border-radius: 6px; background: rgba(255, 255, 255, .7); }
.site--dev .site__tag { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* 分岐器: アドレス → つまみ → 3つの行き先。座標は viewBox 360×300 */
.sw { --svgw: 300px; --dstw: 232px; display: grid; grid-template-columns: auto var(--svgw) minmax(0, var(--dstw)); align-items: start; justify-content: start; }
.sw__src { position: relative; display: flex; align-items: center; margin-top: calc(var(--svgw) / 12 - 19px); }
.sw__src .mono { font-size: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; line-height: 38px; }
.sw__src::after { content: ""; width: 28px; height: calc(var(--svgw) / 90); min-height: 3px; margin-left: 14px; background: var(--blue); border-radius: 2px; }
.sw__src .sw__k { position: absolute; left: 0; bottom: 100%; }
.sw__k { font-size: 14px; font-weight: 500; color: var(--sub); line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
.sw__svg { width: var(--svgw); height: auto; aspect-ratio: 360 / 300; overflow: visible; }
.sw__svg path { fill: none; stroke-linecap: round; }
.sw__in { stroke: var(--blue); stroke-width: 4; }
.sw__br .base { stroke: #A9B4C4; stroke-width: 1.6; }
.sw__br .on { stroke: var(--blue); stroke-width: 4; opacity: 0; transition: opacity .3s var(--ease); }
.sw__br .end { fill: #A9B4C4; }
.sw__blade { stroke: var(--blue); stroke-width: 4; transform-box: view-box; transform-origin: 60px 30px; transition: transform .3s var(--ease); }
.sw__pivot { fill: #FFFFFF; stroke: var(--blue); stroke-width: 3; }
.sw__dst { position: relative; align-self: stretch; }
.sw__dst li {
  position: absolute; left: 8px; top: var(--y); transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px;
  padding: 7px 14px 8px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; line-height: 1.35; color: var(--sub); white-space: nowrap;
}
.sw__dst li > span:last-child { font-size: 18px; font-weight: 500; }
html[data-state="verify"] .sw[data-bind-state] .sw__blade, .sw[data-pos="verify"] .sw__blade { transform: rotate(30deg); }
html[data-state="local"] .sw[data-bind-state] .sw__blade, .sw[data-pos="local"] .sw__blade { transform: rotate(50deg); }
html[data-state="normal"] .sw[data-bind-state] [data-br="normal"] .on, .sw[data-pos="normal"] [data-br="normal"] .on,
html[data-state="verify"] .sw[data-bind-state] [data-br="verify"] .on, .sw[data-pos="verify"] [data-br="verify"] .on,
html[data-state="local"] .sw[data-bind-state] [data-br="local"] .on, .sw[data-pos="local"] [data-br="local"] .on { opacity: 1; }
html[data-state="normal"] .sw[data-bind-state] [data-br="normal"] .end, .sw[data-pos="normal"] [data-br="normal"] .end,
html[data-state="verify"] .sw[data-bind-state] [data-br="verify"] .end, .sw[data-pos="verify"] [data-br="verify"] .end,
html[data-state="local"] .sw[data-bind-state] [data-br="local"] .end, .sw[data-pos="local"] [data-br="local"] .end { fill: var(--blue); }
html[data-state="normal"] .sw[data-bind-state] [data-dst="normal"], .sw[data-pos="normal"] [data-dst="normal"],
html[data-state="verify"] .sw[data-bind-state] [data-dst="verify"], .sw[data-pos="verify"] [data-dst="verify"],
html[data-state="local"] .sw[data-bind-state] [data-dst="local"], .sw[data-pos="local"] [data-dst="local"] { color: var(--ink); border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue); }
html[data-state="normal"] .sw[data-bind-state] [data-dst="normal"] > span:last-child, .sw[data-pos="normal"] [data-dst="normal"] > span:last-child,
html[data-state="verify"] .sw[data-bind-state] [data-dst="verify"] > span:last-child, .sw[data-pos="verify"] [data-dst="verify"] > span:last-child,
html[data-state="local"] .sw[data-bind-state] [data-dst="local"] > span:last-child, .sw[data-pos="local"] [data-dst="local"] > span:last-child { color: var(--blue-deep); font-weight: 700; }
/* ヒーローでは、ブラウザのアドレスバーが入口になる */
.sw--hero { grid-template-columns: var(--svgw) var(--dstw); margin-top: calc(var(--bar-mid) - var(--svgw) / 12); }
.sw--hero .sw__src { display: none; }

/* ---------- 2. こんなときに ---------- */
.cases { background: #FFFFFF; padding: clamp(80px, 8.4vw, 120px) 0 clamp(80px, 10vw, 144px); }
.cases__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: end; }
.cases__head .sec-no { grid-column: 1 / -1; }
.cases__lead { max-width: 25em; font-size: 17px; color: var(--ink); }
.routes { margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--ink); }
.route { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.2vw, 44px) 0; border-bottom: 1px solid var(--line); }
.route__when { display: flex; gap: 12px; font-size: 16.5px; line-height: 1.85; font-weight: 500; }
.route__n { flex: none; color: var(--blue); font-size: 14px; font-weight: 600; line-height: 2.1; }
.route__line { display: flex; flex-wrap: wrap; align-items: center; column-gap: .32em; row-gap: 4px; font-size: clamp(22px, 3.8vw, 52px); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.route__d { color: var(--ink); min-width: 15ch; }
.route__ip { color: var(--blue); }
.route__a { display: block; width: 1.25em; color: var(--blue); }
.route__a svg { width: 100%; height: auto; overflow: visible; }
.route__a path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.js .route[data-reveal] .route__a path { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset .6s var(--ease) .15s; }
html.js .route[data-reveal] .route__ip { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s; }
html.js .route.is-in .route__a path { stroke-dashoffset: 0; }
html.js .route.is-in .route__ip { opacity: 1; transform: none; }

/* ---------- 3. 使い方 ---------- */
.usage { padding: clamp(88px, 11vw, 160px) 0 clamp(88px, 10vw, 150px); }
.steps { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: clamp(20px, 2.2vw, 28px); margin-top: clamp(40px, 4vw, 56px); }
.step { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; }
.step__head { display: flex; align-items: center; gap: 14px; }
.step__n {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--blue); color: #FFFFFF; font-family: "HT Inter", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0; line-height: 1;
}
.step .h3 { margin: 0; }
.step p { font-size: 16.5px; line-height: 1.9; color: var(--ink); }
.usage__stage { margin-top: clamp(56px, 7vw, 104px); }

/* 実画面を入れる Mac のウインドウ枠。画像の上端の約50pt はツールバーの領域なので、そこに信号の丸とタイトルを重ねる */
.mac { position: relative; container-type: inline-size; border-radius: 12px; overflow: hidden; background: #ECECEC;
  box-shadow: 0 0 0 1px rgba(20, 28, 43, .24), 0 2px 4px rgba(15, 27, 45, .08), 0 36px 72px -30px rgba(15, 27, 45, .5); }
.mac::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); pointer-events: none; }
.mac__shot, .mac picture, .mac picture img { display: block; width: 100%; height: auto; }
.mac__lights { position: absolute; z-index: 1; left: calc(100cqw * 20 / 870); top: calc(100cqw * 19 / 870); display: flex; gap: calc(100cqw * 8 / 870); }
.mac__lights i { width: calc(100cqw * 12 / 870); height: calc(100cqw * 12 / 870); border-radius: 50%; }
.mac__lights i:nth-child(1) { background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.mac__lights i:nth-child(2) { background: #FEBC2E; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.mac__lights i:nth-child(3) { background: #28C840; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.mac__title { position: absolute; z-index: 1; left: calc(100cqw * 230 / 870); right: 0; top: calc(100cqw * 16 / 870); text-align: center; font-size: calc(100cqw * 13 / 870); font-weight: 700; line-height: 1.4; color: #3B3B3F; letter-spacing: .01em; }
.mac--dark { background: #2B2B2B; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 4px rgba(15, 27, 45, .12), 0 36px 72px -30px rgba(15, 27, 45, .6); }
.mac--dark::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.mac--dark .mac__title { color: #D6D6D8; }
.shot-note, .stage__cap { font-size: 14px; color: var(--sub); line-height: 1.7; }
.shot-note { margin-top: 18px; }

.stage { position: relative; }
.stage .mac { max-width: 870px; margin-inline: auto; }
.shots3 { display: grid; grid-template-columns: 520fr 560fr 360fr; gap: clamp(20px, 2.4vw, 32px); align-items: start; margin-top: clamp(36px, 4vw, 56px); }
.shot { position: relative; }
.shot__img { display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(20, 28, 43, .2), 0 3px 6px rgba(15, 27, 45, .1), 0 24px 44px -18px rgba(15, 27, 45, .45); }
.sheet__no {
  position: absolute; z-index: 1; left: -14px; top: -14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); color: #FFFFFF; font-family: "HT Inter", sans-serif; font-weight: 600; font-size: 16px; box-shadow: 0 0 0 5px var(--bg);
}
.stage__cap { margin-top: 22px; }
.step__note { display: block; margin-top: 18px; }
.step__shot { display: flex; flex-direction: column; }
.step__stage { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 20px 12px; border-radius: 14px; background: #E8ECF2; }
.step__stage img { display: block; width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(20, 28, 43, .16), 0 12px 24px -16px rgba(15, 27, 45, .35); }
.step__stage .pop-shot { border-radius: 10px; }
.cut-label { align-self: stretch; max-width: 400px; margin: 0 auto 6px; padding-left: calc(57.1% - 2.6em); font-size: 13px; line-height: 1.4; color: #3F5A86; font-weight: 500; white-space: nowrap; }
.cut-note { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--sub); }
/* 横に送れる枠: 右端をぼかして続きを示す(スマホ) */
.hbox { position: relative; }
.hscroll__hint--sp { display: none; }
.hscroll__hint { margin-top: 8px; font-size: 14px; color: var(--sub); line-height: 1.6; }

/* ---------- 4. hosts を、壊さない ---------- */
.safety { background: var(--navy); color: #E7EDF6; padding: clamp(88px, 11vw, 160px) 0; }
.safety .sec-no { color: #8DB8FF; }
.safety .sec-no .mono { background: rgba(51, 133, 255, .18); color: #B9D3FF; }
.safety__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: end; }
.safety__head .sec-no { grid-column: 1 / -1; }
.safety__lead { max-width: 24em; font-size: 17px; color: #C9D4E4; }
.safety__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); margin-top: clamp(48px, 6vw, 80px); align-items: start; }
.ed { background: #08111F; border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px; overflow: hidden; }
.ed__bar { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ed__bar .lights i { background: rgba(255, 255, 255, .16); box-shadow: none; }
.ed__file { font-size: 14px; color: #9FB0C8; white-space: nowrap; }
.ed__state { margin-left: auto; display: grid; }
.ed__state span { grid-area: 1 / 1; justify-self: end; font-size: 13.5px; line-height: 1.4; padding: 4px 10px; border-radius: 6px; background: rgba(51, 133, 255, .18); color: #B9D3FF; white-space: nowrap; }
.ed__code { margin: 0; padding: 20px 0 24px; font-family: var(--mono); font-size: 14px; line-height: 1.8; letter-spacing: 0; color: #AAB8CD; counter-reset: ln; overflow-x: auto; overscroll-behavior-x: contain; }
.ed__code code { display: flex; flex-direction: column; font: inherit; width: max-content; min-width: 100%; }
.ln { display: block; position: relative; padding: 0 28px 0 0; white-space: pre; counter-increment: ln; }
.ln .c1 { display: inline-block; min-width: 17ch; }
.ln::before { content: counter(ln); position: sticky; left: 0; z-index: 1; display: inline-block; width: 64px; padding-right: 20px; box-sizing: border-box; text-align: right; color: #56677F; background: #08111F; }
.blk__v .ln::before { background: #0B1E3A; }
.blk { display: grid; margin: 6px 0 0; }
.blk__v { align-self: start; grid-area: 1 / 1; display: flex; flex-direction: column; padding: 8px 0; background: rgba(51, 133, 255, .13); box-shadow: inset 3px 0 0 var(--blue-dark); }
.blk__v .ln.mk { color: #8DB8FF; }
.blk__v .ln.hot { color: #FFFFFF; font-weight: 600; }
html[data-state] .blk__v[data-show] { transform: none; }
html.js .blk__v .ln.hot { transition: opacity .3s var(--ease) .12s; }
.blk__v--none { background: transparent; box-shadow: none; padding: 8px 20px 8px 64px; white-space: normal; max-width: min(100vw - 80px, 640px); }
.blk__none { display: block; padding: 14px 16px; border: 1px dashed rgba(141, 184, 255, .45); border-radius: 8px; font-family: var(--sans); font-size: 14px; line-height: 1.8; letter-spacing: .04em; color: #B9C6DA; white-space: normal; }
.ed__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 20px 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: #B9C6DA; line-height: 1.5; }
.lg { display: inline-flex; align-items: center; gap: 9px; }
.lg::before { content: ""; width: 14px; height: 14px; border-radius: 3px; }
.lg--sp { display: none; }
.lg--sp::before { display: none; }
.lg--keep::before { background: rgba(140, 155, 179, .35); }
.lg--hot::before { background: rgba(51, 133, 255, .4); box-shadow: inset 3px 0 0 var(--blue-dark); }
.guards__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.guards__list li:first-child { border-top: 0; padding-top: 4px; }
.guards__n { color: #8DB8FF; font-size: 14px; font-weight: 600; line-height: 1.9; }
.guards .h4 { color: #FFFFFF; margin-bottom: 4px; }
.guards p { font-size: 16.5px; line-height: 1.85; color: #C3CEDF; }
.caution { display: flex; gap: 12px; margin-top: 18px; padding: 16px 18px; border-radius: 10px; background: rgba(255, 158, 10, .1); border: 1px solid rgba(255, 158, 10, .4); color: #FFD7A1; font-size: 16px; line-height: 1.8; }
.caution svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: #FF9E0A; }

.safety__left { display: grid; gap: 28px; align-content: start; }
.undo { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.undo img { display: block; width: 100%; height: auto; border-radius: 10px; opacity: .94; }
.undo figcaption { margin-top: 14px; font-size: 16px; line-height: 1.8; color: #C9D4E4; }
.undo__note { display: block; font-size: 14px; color: #9FB0C8; }
.ed__legend .lg--sp { white-space: nowrap; }

/* ---------- 5. 戻し忘れに、気づける ---------- */
.notice { background: var(--blue); color: #FFFFFF; padding: clamp(80px, 8.4vw, 120px) 0 clamp(64px, 6vw, 88px); overflow: clip; }
.notice__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: end; }
.notice__head .sec-no { grid-column: 1 / -1; }
.notice__lead { max-width: 24em; font-size: 17px; }
/* 上書き中の画面と、メニューの実物 */
.nshots { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); align-items: start; margin-top: clamp(40px, 4.4vw, 56px); }
.nshots .mac { box-shadow: 0 0 0 1px rgba(10, 30, 80, .35), 0 36px 72px -30px rgba(5, 20, 60, .7); }
.nshots__menu { display: flex; flex-direction: column; }
.nshots__menu figcaption { order: -1; margin: 0 0 12px; }
.pop-shot { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(10, 30, 80, .3), 0 28px 56px -20px rgba(5, 20, 60, .7); }
.nshots figcaption { font-size: 15px; font-weight: 700; line-height: 1.5; }
.nshots__win figcaption { margin-top: 12px; }
.notice .shot-note { color: #FFFFFF; }

/* メニューバーの右端を切り取った帯 */
.strips { margin-top: clamp(40px, 4.4vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, .35); }
.strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: clamp(24px, 4vw, 56px); align-items: center; padding: 16px 0; min-height: 104px; border-top: 1px solid rgba(255, 255, 255, .35); }
.strip__t { font-size: 20px; font-weight: 700; line-height: 1.5; font-feature-settings: "palt"; }
.strip__txt p { margin-top: 4px; font-size: 16px; line-height: 1.85; }
.strip__bar {
  display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.8vw, 24px); justify-self: end; width: min(100%, 560px); height: 74px; padding: 0 clamp(18px, 2vw, 26px);
  border-radius: 12px; background: #FFFFFF; color: #3A4253;
}
.sx { width: 22px; height: 22px; flex: none; }
.sx--ext { opacity: .7; }
.strip__ht { display: grid; place-items: center; width: 76px; height: 64px; flex: none; border-radius: 12px; background: #EEF0F3; color: var(--ink); --shield-cut: #EEF0F3; }
.strip__ht svg { width: 50px; height: 50px; }
.strip--over .strip__ht { background: var(--blue-soft); color: var(--blue); --shield-cut: var(--blue-soft); box-shadow: 0 0 0 2px var(--blue); }
.strip--warn .strip__ht { background: var(--warn-soft); color: var(--warn); }
.strip__clock { font-family: "HT Inter", sans-serif; font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.notice__here { display: flex; align-items: center; gap: 14px; margin-top: clamp(36px, 4vw, 56px); font-size: 16px; line-height: 1.85; }
.notice__mini { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: #FFFFFF; color: var(--ink); --shield-cut: #FFFFFF; }
.notice__mini .g { grid-area: 1 / 1; width: 22px; height: 22px; transition: opacity .25s var(--ease); }
html[data-state="normal"] .notice__mini .g--over, html:not([data-state="normal"]) .notice__mini .g--normal { opacity: 0; }

/* ---------- 6. 入力 ---------- */
.input { background: #FFFFFF; padding: clamp(88px, 11vw, 160px) 0 clamp(64px, 6vw, 80px); }
.input__head { display: block; }
.input__lead { max-width: 42em; margin-top: 22px; font-size: 17px; }
.input__lead .mono { font-size: .94em; }
.conv { margin-top: clamp(32px, 3.8vw, 52px); border-top: 1px solid var(--ink); }
.conv__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); align-items: first baseline; padding: clamp(24px, 2.8vw, 38px) 0; border-bottom: 1px solid var(--line); }
.conv dt { font-size: 17px; font-weight: 700; line-height: 1.6; font-feature-settings: "palt"; }
.conv dd { display: flex; flex-wrap: wrap; align-items: center; column-gap: .36em; row-gap: 8px; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -.01em; }
.conv__in { color: var(--sub); font-weight: 500; }
.conv__in--ja { font-weight: 500; letter-spacing: .02em; }
.conv__out { color: var(--blue); font-weight: 600; }
.conv__a { display: block; width: 1.25em; color: var(--blue); flex: none; }
/* 変換前の欄の幅をそろえ、矢印と青い結果の始まりを各行で同じ位置に(冒頭の「こんなときに」と同じ規則) */
@media (min-width: 900px) { .conv__in { display: inline-block; min-width: 28ch; } .conv__in--ja { min-width: 16.8em; } }
.conv__a svg { width: 100%; height: auto; overflow: visible; }
.conv__a path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.conv__pair { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; margin-right: .9em; }
.conv__tag { padding: 3px 10px; border-radius: 6px; background: var(--blue-soft); color: var(--blue-deep); font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; }
.conv__note { flex-basis: 100%; margin-top: 4px; font-size: 16px; line-height: 1.8; letter-spacing: .04em; color: var(--sub); }
html.js .conv__row[data-reveal] .conv__a path { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset .6s var(--ease) .15s; }
html.js .conv__row[data-reveal] .conv__out { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s; }
html.js .conv__row.is-in .conv__a path { stroke-dashoffset: 0; }
html.js .conv__row.is-in .conv__out { opacity: 1; transform: none; }
.extras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.extra { padding: clamp(28px, 3vw, 40px); border-radius: 16px; background: var(--bg); }
.extra .h3 { margin-bottom: 10px; }
.extra p { font-size: 16.5px; line-height: 1.9; }
.extra__shot { display: block; margin-top: 20px; }
.extra__shot img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(20, 28, 43, .16); }
.input .shot-note { margin-top: 16px; }
.extra__code { margin: 18px 0 0; padding: 14px 18px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--line); font-family: var(--mono); font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 7. 適用後の確認 ---------- */
.verify { padding: clamp(80px, 8.4vw, 120px) 0 clamp(80px, 9vw, 128px); }
.verify__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 72px); row-gap: clamp(40px, 5vw, 64px); align-items: start; }
.verify__big { display: flex; align-items: baseline; gap: 16px; }
#h-verify { font-size: clamp(30px, 4.2vw, 56px); }
.verify__num { font-family: "HT Inter", sans-serif; font-weight: 500; font-size: clamp(96px, 12vw, 176px); line-height: .82; letter-spacing: -.04em; color: var(--blue); font-variant-numeric: tabular-nums; margin-left: -.05em; }
.verify__unit { font-size: clamp(17px, 1.8vw, 22px); font-weight: 700; letter-spacing: .06em; }
.verify__copy > p:not(.sec-no) { margin-top: 24px; max-width: 30em; font-size: 17px; }
.verify__two { display: grid; gap: 10px; margin-top: 28px; }
.verify__two li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--line); font-size: 17px; font-weight: 700; line-height: 1.6; }
.verify__two li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); flex: none; }
.verify__two .q { margin-left: -.5em; }
.verify__sub { margin-top: 18px; font-size: 16px; color: var(--sub); max-width: 34em; }
.scope { grid-column: 1 / -1; }
.scope__cap { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.scope__chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.scope__chain li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 20px 22px; border-top: 4px solid var(--blue); }
.scope__chain li + li { margin-left: 10px; }
.scope__chain li > span:first-child { font-size: 17px; font-weight: 700; line-height: 1.5; }
.scope__chain .mono { font-size: 17px; }
.scope__chain small { font-size: 14px; line-height: 1.6; white-space: nowrap; }
.scope__yes { background: #FFFFFF; }
.scope__yes small { color: var(--blue-deep); font-weight: 500; }
.scope__no { border-top: 3px dashed var(--line-2) !important; color: var(--sub); }
.scope__no small { color: var(--sub); }
.scope__chain .scope__yes:nth-child(2)::after {
  content: ""; position: absolute; right: -6px; top: -14px; bottom: -14px; width: 2px; background: var(--ink); z-index: 1;
}
html.js .scope[data-reveal] .scope__chain li { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
html.js .scope.is-in .scope__chain li { opacity: 1; transform: none; }
html.js .scope.is-in .scope__chain li:nth-child(2) { transition-delay: .08s; }
html.js .scope.is-in .scope__chain li:nth-child(3) { transition-delay: .16s; }
html.js .scope.is-in .scope__chain li:nth-child(4) { transition-delay: .24s; }
html.js .scope.is-in .scope__chain li:nth-child(5) { transition-delay: .32s; }

/* ---------- 8. キーボード ---------- */
.keys { background: var(--blue-soft); padding: 48px 0; }
.keys__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.keys__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.keys__list > div { display: flex; flex-direction: column; gap: 12px; }
.keys__list dt { display: flex; gap: 6px; }
.keys__list dd { font-size: 16px; font-weight: 500; line-height: 1.6; }
kbd {
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 9px;
  background: #FFFFFF; border: 1px solid #C3CEE0; box-shadow: 0 2px 0 #C3CEE0; font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--ink); line-height: 1;
}
kbd.wide { min-width: 64px; }

/* ---------- 9. 動作環境 ---------- */
.darkshot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: clamp(32px, 4vw, 56px); border-radius: 20px; background: #1C1E22; color: #F2F4F7; }
.darkshot .h3 { font-size: clamp(20px, 2vw, 26px); margin-bottom: 12px; }
.darkshot p { font-size: 17px; }
.darkshot .shot-note { color: #B6BCC7; font-size: 14px; }
.spec { background: #FFFFFF; padding: clamp(88px, 11vw, 160px) 0 clamp(64px, 6vw, 80px); }
.req { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.req__card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: clamp(220px, 22vw, 300px); padding: clamp(28px, 3vw, 40px); border-radius: 20px; }
.req__body { display: flex; flex-direction: column; gap: 8px; }
.req__card--os { background: var(--blue); color: #FFFFFF; }
.req__card--chip { background: var(--blue-soft); color: var(--ink); }
.req__k { font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.req__big { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .18em; margin: 6px 0 4px; line-height: 1; }
.req__pre { font-family: "HT Inter", sans-serif; font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.01em; }
.req__num { font-family: "HT Inter", sans-serif; font-weight: 500; font-size: clamp(88px, 10vw, 150px); letter-spacing: -.04em; line-height: .86; }
.req__word { font-weight: 700; font-size: clamp(34px, 4vw, 56px); letter-spacing: .01em; font-feature-settings: "palt"; color: var(--blue); line-height: 1.3; }
.req__post { font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); }
.req__sub { font-size: 16px; line-height: 1.8; }
.spec__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); row-gap: 32px; margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.table { border-top: 1px solid var(--ink); }
.table > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.table dt { font-size: 16px; font-weight: 700; line-height: 2; font-feature-settings: "palt"; }
.table dd { font-size: 17px; max-width: 30em; }
.notes { padding: 26px 28px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); }
.notes__t { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 17px; font-weight: 700; }
.notes__t svg { width: 20px; height: 20px; }
.notes ul { display: grid; gap: 10px; }
.notes li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.85; }
.notes li::before { content: ""; position: absolute; left: 4px; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- 10. よくある質問 ---------- */
.faq { padding: clamp(80px, 8.4vw, 120px) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 72px); row-gap: 32px; }
.qa { border-top: 1px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 18px 4px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 700; line-height: 1.7; font-feature-settings: "palt";
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover .qa__q { color: var(--blue); }
.qa__pm { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: #FFFFFF; }
.qa__pm::before, .qa__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: var(--ink); transition: transform .25s var(--ease); }
.qa__pm::after { transform: rotate(90deg); }
details[open] .qa__pm::after { transform: rotate(0deg); }
.qa__a { padding: 0 56px 26px 4px; }
.qa__a p { max-width: 34em; font-size: 17px; }

/* ---------- 11. 公開準備 ---------- */
.release { background: #FFFFFF; padding: clamp(80px, 8vw, 112px) 0 clamp(72px, 7vw, 96px); overflow: clip; }
.release .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.release__head { display: block; }
.release__copy p { margin-top: 20px; font-size: 17px; }
.release__back { margin-top: 24px !important; }
.release__fig { display: flex; flex-direction: column; align-items: flex-start; justify-self: end; }
.sw--end { --svgw: clamp(240px, 24vw, 300px); --dstw: 232px; }
.sw--end .sw__src .mono { font-size: 20px; }
.release__cap { margin-top: 18px; font-size: 16px; font-weight: 500; }

/* ---------- フッター ---------- */
.foot { background: var(--bg); border-top: 1px solid var(--line); padding: 40px 0 44px; }
.foot__note { font-size: 14px; color: var(--sub); line-height: 1.8; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 22px; }
.foot__app { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; letter-spacing: .01em; }
.foot__app img { width: 28px; height: 28px; }
.foot__links { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; }
.foot__links a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.foot__c { margin-left: auto; font-family: "HT Inter", sans-serif; font-size: 14px; color: var(--sub); letter-spacing: .06em; }

/* ---------- 出現 ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js .route[data-reveal], html.js .conv__row[data-reveal], html.js .scope[data-reveal] { opacity: 1; transform: none; }

/* ---------- 画面幅ごと ---------- */
@media (max-width: 1180px) {
  .hero__stage { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .hero .bw { max-width: 760px; }
  .hero .bw__bar::after { display: none; }
  .sw--hero { grid-template-columns: auto var(--svgw) var(--dstw); margin-top: 0; }
  .sw--hero .sw__src { display: flex; }
}

@media (max-width: 1100px) {
  .mb__list a { padding: 0 8px; font-size: 13.5px; }
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 40px; }
  .step { grid-row: auto; grid-template-rows: none; }
  .step > p, .step__shot { margin-left: 48px; }
  .step__shot { max-width: 560px; }
  .scope__chain { grid-template-columns: minmax(0, 1fr); }
  .scope__chain li + li { margin-left: 0; margin-top: 8px; }
  .scope__chain li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top-width: 0 !important; border-left: 3px solid var(--blue); }
  .scope__no { border-left: 3px dashed var(--line-2) !important; }
  .scope__chain .scope__yes:nth-child(2)::after { left: 0; right: 0; top: auto; bottom: -5px; width: auto; height: 1px; }
}

@media (max-width: 960px) {
  :root { --mbh: 52px; }
  .mb__toc {
    display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
    font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .mb__toc svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s var(--ease); }
  .mb__toc[aria-expanded="true"] { background: rgba(20, 28, 43, .08); }
  .mb__toc[aria-expanded="true"] svg { transform: rotate(-90deg); }
  .mb__list {
    position: absolute; left: 0; top: calc(100% + 4px); display: none; flex-direction: column; min-width: 220px; padding: 6px;
    background: #FFFFFF; border: 1px solid rgba(20, 28, 43, .12); border-radius: 12px; box-shadow: 0 2px 6px rgba(15, 27, 45, .08), 0 24px 56px -16px rgba(15, 27, 45, .3);
  }
  .mb__list.is-open { display: flex; }
  .mb__list a { height: 44px; padding: 0 14px; font-size: 16px; }
  .mb__list a:hover { background: var(--blue); color: #FFFFFF; }

  .hero__copy { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .hero__copy > :not(.lead) { grid-column: 1; }
  .hero__copy .lead { grid-row: auto; }
  .hero__copy .badges { margin-top: 24px; }
  .br-sp { display: inline; }
  .shots3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .route, .conv__row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .route__line { flex-wrap: nowrap; white-space: nowrap; }
  .shot--menu { max-width: 300px; }
  .release .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .release__fig { justify-self: start; }
  .verify__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { margin-top: 76px; }
  .sw { --svgw: 300px; --dstw: 210px; }
  .sw--end { --svgw: 320px; --dstw: 230px; }
  .cases__head, .safety__head, .notice__head, .input__head, .release__head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .usage__grid, .faq__grid, .keys__grid, .spec__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .safety__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .verify__grid { grid-template-columns: minmax(0, 1fr); }
  .verify__big { flex-direction: row; align-items: baseline; gap: 16px; }
  .verify__num { font-size: clamp(120px, 34vw, 220px); }
  .keys__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .strip { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .nshots { grid-template-columns: minmax(0, 1fr); }
  .hero__copy .badges { flex-wrap: wrap; }
  .nshots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nshots__win { grid-column: 1 / -1; }
  .nshots__menu { margin-top: 0; }
  .darkshot { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; line-height: 1.9; }
  .mb__status { display: none; }
  .lead { font-size: 16.5px; }
  .eyebrow { margin-bottom: 16px; font-size: 14px; }
  .h1 { font-size: clamp(28px, 8.6vw, 48px); }
  .bw__bar { grid-template-columns: auto 1fr; gap: 12px; height: 48px; padding: 0 12px; }
  .bw__bar .lights { gap: 6px; }
  .bw__bar .lights i { width: 10px; height: 10px; }
  .bw__addr { width: auto; justify-content: flex-start; font-size: 14px; padding: 0 12px; }
  .bw__note { left: auto; right: 24%; transform: none; }
  .bw__route { padding: 8px 12px; gap: 10px; }
  .bw__v { font-size: 16px; }
  .bw__v .mono { font-size: 16.5px; }
  .bw__view { aspect-ratio: 16 / 8.3; }
  .sw--hero { position: relative; margin-top: 22px; }
  /* ブラウザの図から分岐図の入口まで、1本の幹線でつなぐ */
  .sw--hero::before { content: ""; position: absolute; left: 0; top: -22px; width: 3px; height: calc(22px + 28px + 14px + (100vw - 40px - 148px) / 12 + 1px); background: var(--blue); border-radius: 2px; }
  .sw--hero .sw__src { height: 28px; padding-left: 14px; }
  .hero__stage { row-gap: 0; }
  .site__tag { font-size: 12px; padding: 3px 9px; }
  .hero__stage { margin-top: 64px; }
  .try { width: 100%; justify-content: center; }
  /* 分岐器: 行き先の列を細くして、図を画面幅に合わせる */
  .sw, .sw--hero, .sw--end { grid-template-columns: minmax(0, 1fr) 148px; }
  .sw__svg { width: 100%; }
  .sw__src { grid-column: 1 / -1; margin: 0 0 14px; }
  .sw__src::after { display: none; }
  .sw__src .sw__k { position: static; margin-right: 10px; }
  .sw__src .mono, .sw--end .sw__src .mono { font-size: 18px; line-height: 1.5; }
  .sw__dst li, .sw--end .sw__dst li { left: 6px; padding: 2px 0; border: 0 !important; background: none !important; box-shadow: none !important; }
  .sw__dst li > span:last-child, .sw--end .sw__dst li > span:last-child { font-size: 15.5px; }
  .sw__dst .sw__k { font-size: 13px; }
  .route { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .route__when { font-size: 16px; }
  .route__line { font-size: clamp(20px, 6.6vw, 30px); }
  .route__a { width: 1.05em; }
  .usage__stage { display: none; }
  .step__head { gap: 12px; }
  .step__n { width: 34px; height: 34px; font-size: 15px; }
  .step > p { margin-left: 46px; }
  .step__shot { margin: 4px 0 0; max-width: none; }
  .step__stage { padding: 0; background: none; border-radius: 0; }
  .step__stage img { max-width: none; }
  .step__shot--crop .step__stage { overflow: hidden; border-radius: 10px; }
  .step__shot--crop .step__stage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(90deg, rgba(245, 246, 248, 0), var(--bg)); }
  .step__shot--full .step__stage::after { display: none; }
  .step__shot--full .step__stage { overflow: visible; }
  .cut-label { margin: 0 0 4px; }
  .hbox::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(90deg, rgba(245, 246, 248, 0), var(--bg)); }
  .hscroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .step__shot--scroll .hscroll img { display: block; width: 560px; max-width: none; height: auto; margin-right: 36px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(20, 28, 43, .16); }
  .hscroll--sm > img, .hscroll--sm picture img { display: block; width: 600px; max-width: none; height: auto; margin-right: 36px; }
  .hscroll--sm picture img { width: 570px; }
  .undo img, .undo__note { display: none; }
  .undo { margin-top: 8px; padding: 14px 16px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); }
  .undo figcaption { margin-top: 0; }
  .hscroll--sm { border: 1px solid rgba(20, 28, 43, .16); border-radius: 10px; }
  .hscroll--sm img { border-radius: 0 !important; box-shadow: none !important; }
  .hscroll__hint--sp { display: block; margin-top: 8px; font-size: 14px; color: var(--sub); }
  .ed__bar .lights { display: none; }
  .ed__state span { font-size: 12.5px; }
  .lg--sp { display: inline-flex; color: #9FB0C8; }
  .ed__code { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .ln::before { width: 40px; padding-right: 12px; }
  .route__line { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(13px, 4.5vw, 30px); }
  .route__d { flex-basis: auto; min-width: 15ch; }
  .conv__pair { flex-basis: 100%; }
  .verify__num { font-size: clamp(80px, 24vw, 120px); }
  .sp-crops { display: grid; gap: 16px; justify-items: start; order: -1; }
  .sp-crop--side { width: 72%; }
  .sp-crop--card { width: 100%; }
  .sheet__no { left: -6px; top: -20px; width: 34px; height: 34px; font-size: 16px; }
  .nshots { grid-template-columns: minmax(0, 1fr); }
  .nshots__win, .nshots__menu--normal { display: none; }
  .nshots__menu { max-width: 360px; }
  .mac--dark .mac__lights, .mac--dark .mac__title { display: none; }
  .darkshot { padding: 20px; }
  .ed__code { font-size: 13px; line-height: 1.7; }
  .blk__v--none { padding: 6px 14px 6px 40px; }
  .blk__more { display: none; }
  .blk__none { padding: 10px 12px; font-size: 13px; line-height: 1.6; }
  .ed__state span { font-size: 13px; }
  .strip__bar { height: 64px; gap: 14px; width: 100%; }
  .strip__ht { width: 64px; height: 54px; }
  .strip__ht svg { width: 42px; height: 42px; }
  .strip__t { font-size: 18px; }
  .conv__row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .conv dd { font-size: clamp(15px, 4.6vw, 24px); }
  .req__word { font-size: clamp(26px, 8.4vw, 44px); white-space: nowrap; }
  .req__num { font-size: clamp(80px, 26vw, 140px); }
  .conv__in.mono, .conv__out.mono { overflow-wrap: anywhere; }
  .conv__a { flex-basis: 100%; width: 1em; height: 1em; }
  .conv__a svg { width: 1em; transform: rotate(90deg); }
  .extras { grid-template-columns: minmax(0, 1fr); }
  .req { grid-template-columns: minmax(0, 1fr); }
  .keys__list dd { font-size: 16px; }
  .table > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 18px 0; }
  .table dt { line-height: 1.6; }
  .table dd { font-size: 16px; }
  .notes { padding: 20px 20px; }
  .qa summary { font-size: 17px; min-height: 68px; }
  .qa__a { padding-right: 8px; }
  .qa__a p { font-size: 16px; }
  .foot__c { margin-left: 0; width: 100%; }
}

@media (max-width: 380px) {
  .bw__bar .lights, .ed__bar .lights { display: none; }
  .ed__state span { white-space: normal; text-align: right; }
  .bw__addr { font-size: 13px; padding: 0 10px; }
  .try { font-size: 15px; padding: 8px 14px; gap: 8px; }
  .sw, .sw--hero, .sw--end { grid-template-columns: minmax(0, 1fr) 132px; }
  .sw__dst li > span:last-child, .sw--end .sw__dst li > span:last-child { font-size: 14.5px; }
  .bw__route { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .bw__v { grid-area: 2 / 1; }
  .keys__list { grid-template-columns: minmax(0, 1fr); }
  .strip__bar .sx:nth-of-type(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js .route[data-reveal] .route__a path, html.js .conv__row[data-reveal] .conv__a path { stroke-dashoffset: 0; }
  html.js .route[data-reveal] .route__ip, html.js .conv__row[data-reveal] .conv__out, html.js .scope[data-reveal] .scope__chain li { opacity: 1; transform: none; }
}
.app__names { word-spacing: .3em; }
@supports not (text-spacing-trim: trim-start) { p.hang { text-indent: -.5em; } }
.step:first-child .step__stage img { max-width: none; }
/* 分岐図は viewBox 360 を 300px で描くので、線をその分太くして、ブラウザ内の線(4px)と同じ太さに見せる */
.sw .sw__in, .sw .sw__br .on, .sw .sw__blade { stroke-width: 4.8; }
.step__stage picture { display: block; width: 100%; }
#h-faq { white-space: nowrap; font-size: clamp(28px, 3.6vw, 56px); }
@media (max-width: 1180px) {
  .release .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .release__fig { justify-self: start; }
}
/* 使い方(PC 3列): 行を「番号と見出し/説明/画面/注記」にそろえる。
   画面は原寸に近い倍率で読ませる(列の幅は各画面の原寸の幅に比例)。上端をそろえ、下は中身で終える */
.cut-note--demo, .cut-label { display: none; }
@media (min-width: 1240px) {
  .steps { grid-template-columns: 480fr 350fr 340fr; grid-template-rows: auto auto auto auto; }
  .step { grid-row: span 4; row-gap: 0; }
  .step > p { margin-top: 12px; margin-bottom: 18px; }
  .step__shot { display: contents; }
  .step__stage { grid-row: 3; align-self: start; justify-content: flex-start; padding: 12px; }
  .step__stage picture { width: 100%; max-width: none; }
  .step__stage img, .step:first-child .step__stage img { width: 100%; max-width: none; max-height: none; }
  .step .cut-note { grid-row: 4; margin-top: 8px; }
  .step__note { display: none; }
  .cut-note--demo { display: block; }
}
/* 3列で画面の文字が小さくなる幅では、1列にする */
@media (max-width: 1239px) {
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 40px; }
  .step { grid-row: auto; grid-template-rows: none; }
  .step > p, .step__shot { margin-left: 48px; }
  .step__shot { max-width: 560px; }
  .step__stage { padding: 16px; }
  .cut-note { margin-top: 8px; }
}

/* 戻し忘れ: 左に状態の説明と帯、右に上書き中のメニュー */
.notice__body { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 400fr); column-gap: clamp(32px, 3.4vw, 48px); align-items: start; margin-top: clamp(40px, 4.4vw, 64px); }
.notice__body .strips { margin-top: 0; }
.notice__body .strip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.notice__body .strip__bar { width: 100%; }
.nshots__menu { margin-top: 16px; }
.nshots__menu .pop-shot { max-width: 400px; }
.nshots__menu .shot-note { margin-top: 12px; }
@media (max-width: 1100px) {
  .notice__body { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .notice__body .strip { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}
@media (max-width: 700px) {
  .notice__body { grid-template-columns: minmax(0, 1fr); }
  .nshots__menu { display: none; }
  /* 冒頭: 見出しからボタンまでの間を詰める */
  .hero__copy { margin-top: 14px; }
  .lead { line-height: 1.85; }
  .hero__copy .badges { margin-top: 14px; }
  .hero__copy .try { margin-top: 14px; }
  /* 区画のラベルと見出しの間を 24px に */
  .cases__head, .safety__head, .notice__head, .input__head { row-gap: 0; }
  .sec-no { margin-bottom: 24px; }
  .cases__lead, .safety__lead, .notice__lead { margin-top: 22px; }
  /* 取り込み・テキストで編集: 画像の部分だけ内側を 10px に */
  .extra .hbox { margin-inline: calc(10px - clamp(28px, 3vw, 40px)); }
}
/* 戻し忘れ: 左の列の下端(この行)と右のメニューの下端をそろえる */
.notice__main .notice__here { margin-top: 32px; }
.notice { padding-bottom: clamp(80px, 10vw, 144px); }
@media (min-width: 1240px) {
  .notice__body { grid-template-columns: minmax(0, 1fr) 340px; }
  .notice__body .strip { padding: 32px 0; min-height: 136px; }
}

/* 補足の扱い: 取り込み・テキストで編集・キーボードは、主区画より一段小さく */
.extra { background: #F7F8FA; border: 1px solid var(--line); }
.extra .h3 { font-size: 17px; line-height: 1.55; }
.keys .h2--s { font-size: clamp(22px, 2.2vw, 26px); }
@media (max-width: 960px) { .keys__grid { row-gap: 28px; } }
@media (max-width: 700px) {
  .extras { gap: 16px; margin-top: 32px; }
  .extra { padding: 22px; }
  .extra .hbox { margin-inline: -12px; }
  .hero__note { line-height: 1.7; }
  .hero__cap { margin-top: 28px; }
}
/* 確かめる範囲の境目は 1px、項目の面の上下端まで */
.scope__chain .scope__yes:nth-child(2)::after { top: 0; bottom: 0; width: 1px; right: -5.5px; }
/* 使い方: 見出しの欄は3列とも2行ぶん、番号は1行目の中央。撮影の注記は3列共通で下に */
@media (min-width: 1240px) {
  .step__head { align-items: flex-start; }
  .step__head .h3 { min-height: calc(2 * 1.5em); }
  .step__n { margin-top: calc((1.5 * 19px - 36px) / 2); }
  .step > p { margin-top: 18px; }
  .cut-note--demo { display: none; }
  .step__note { display: block; margin-top: 18px; }
}
/* 締め: ボタンを図の下の文に近い高さに */
@media (min-width: 1181px) { .release .wrap { align-items: end; } .release__copy { padding-bottom: 6px; } }
@media (max-width: 1100px) {
  .scope__chain .scope__yes:nth-child(2)::after { left: 0; right: 0; top: auto; bottom: -5px; width: auto; height: 1px; }
}
@media (min-width: 701px) { .extra { padding: clamp(24px, 2.4vw, 32px); } }

/* 約物が続く所(「）。」「」。」など)を詰める */
body { font-feature-settings: "chws"; }
/* スマホの抜粋の注記 */
@media (max-width: 700px) {
  .hscroll__hint--sp { margin-top: 10px; font-size: 13.5px; line-height: 1.65; }
  /* 使い方: 画像の枠だけ番号の列まで広げる */
  .step__shot { margin-left: 0 !important; }
  .step__shot .pop-shot { max-width: none; width: 100%; }
}
/* 動作環境の「14」とカードを少し小さく */
.req__card { padding-top: calc(clamp(28px, 3vw, 40px) - 10px); padding-bottom: calc(clamp(28px, 3vw, 40px) - 10px); min-height: clamp(200px, 20vw, 280px); }
.req__num { font-size: clamp(78px, 8.8vw, 132px); }
@media (max-width: 700px) { .req__num { font-size: clamp(70px, 23vw, 124px); } }
/* 締め: PC はボタンを図の側に置き、図の下の文とまとめる */
.release__back--side { margin-top: 14px !important; }
@media (min-width: 1181px) {
  .release__back--copy { display: none !important; }
  .release__side { justify-self: end; }
  .release__fig { justify-self: auto; }
}
@media (max-width: 1180px) { .release__back--side { display: none !important; } }
@media (max-width: 700px) {
  .step__stage { padding: 0; }
  .extra p.hscroll__hint--sp { font-size: 13.5px; line-height: 1.65; }
}
/* 変換の表(タブレット幅): 見出しの欄を詰め、3行とも「変換前 → 変換後」を1行に収める */
@media (min-width: 961px) and (max-width: 1239px) {
  .conv__row { grid-template-columns: 150px minmax(0, 1fr); column-gap: 28px; }
  .conv dd { font-size: clamp(20px, 2vw, 26px); }
}