/* ==========================================================================
   21ip.jp — site stylesheet
   Bootstrap 5.3 の上に載せる共通スタイル。全ページ共通。
   構成: 1 tokens / 2 base / 3 header / 4 layout / 5 sidebar / 6 hero(home)
         7 components / 8 home sections / 9 tables / 10 content / 11 footer
         12 forms / 13 responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --navy-950: #001230;
    --navy-900: #001c44;
    --navy-800: #002a5e;
    --navy-700: #003e7e;
    --navy-600: #0867ce;
    --navy-500: #237add;
    --navy-400: #5b9bea;
    --navy-200: #cfe0f6;
    --navy-100: #e8f3ff;
    --navy-050: #f3f9ff;

    --accent: #c8102e;
    --accent-deep: #a30d25;
    --success: #00704a;
    --success-bg: #e3f3ea;

    --ink: #0f1e36;
    --ink-2: #2a3a55;
    --muted: #55657d;
    --muted-2: #7b8aa2;

    --line: #e1e7f0;
    --line-strong: #c9d3e2;
    --bg: #ffffff;
    --surface: #ffffff;

    --radius: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(10, 30, 70, 0.05), 0 1px 1px rgba(10, 30, 70, 0.03);
    --shadow-md: 0 8px 24px -8px rgba(10, 30, 70, 0.16);

    --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-num: "Inter", "Noto Sans JP", sans-serif;

    --header-h: 4.5rem;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font-jp);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.8;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--navy-700); color: #fff; }

a {
    color: var(--navy-600);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

a:hover {
    color: var(--navy-800);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:where(a, button, input, textarea, select, summary, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 3px;
    border-radius: 4px;
}

main { overflow-wrap: anywhere; }

/* 見出し・短いラベルは文節単位で改行(未対応ブラウザでは従来どおり)。長い本文には使わない */
h1, h2, h3, h4, .hero-title, .section-title, .svc-name, .svc-point, .net-node strong,
.net-points strong, .link-card, .sidebar-tile-title, .sidebar-tile-description { word-break: auto-phrase; text-wrap: balance; }
p, li { text-wrap: pretty; }

main p a:not([class*="btn"]):not([class*="cta"]),
main li a:not([class*="btn"]):not([class*="cta"]):not([class*="svc"]),
main td a:not([class*="btn"]):not([class*="cta"]) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(0, 91, 183, 0.35);
}

main p a:hover,
main li a:hover,
main td a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; }

p, li { color: var(--ink-2); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-family: var(--font-jp);
    font-weight: 700;
    line-height: 1.4;
}

strong { color: var(--ink); font-weight: 700; }

.container {
    width: calc(100% - 2.5rem);
    max-width: 1240px;
}

.lead { color: var(--ink-2); font-size: 1.04rem; line-height: 1.9; font-weight: 400; }
.text-muted { color: var(--muted) !important; }
.text-danger { color: var(--accent) !important; }
.text-success { color: var(--success) !important; }
small, .small { color: inherit; }

.skip-link {
    position: absolute;
    top: -100px;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: var(--navy-800);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
}

.skip-link:focus { top: 0; color: #fff; outline: 2px solid var(--accent); text-decoration: none; }

/* ---------- 3. Header ---------- */
.navbar-custom {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 0;
    margin-bottom: 0 !important;
}

.navbar-custom .container {
    gap: 1rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    min-height: var(--header-h);
}

.navbar-brand {
    gap: 0.7rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--navy-800);
    text-decoration: none;
}

.navbar-brand:hover,
.navbar-brand:focus { color: var(--navy-600); text-decoration: none; }

.brand-symbol { flex: none; width: 38px; height: 38px; }

.brand-lockup { display: flex; flex-direction: column; gap: 0.1rem; }

.brand-wordmark {
    font-family: var(--font-num);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

.brand-domain { color: var(--navy-500); font-weight: 500; }

.brand-tagline {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.navbar-toggler {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
}

.navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(26, 111, 209, 0.2); }

.navbar-custom .navbar-collapse { justify-content: flex-end !important; gap: 0.75rem; }

.navbar-nav { align-items: center; gap: 0.1rem; }

.navbar-nav .nav-link {
    white-space: nowrap;
    padding: 0.5rem 0.8rem !important;
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.navbar-nav .nav-link:hover {
    color: var(--navy-700);
    background: var(--navy-050);
    text-decoration: none;
}

.navbar-nav .nav-link.active {
    color: var(--navy-600);
    background: var(--navy-100);
    font-weight: 700;
}

/* 「ご契約中の方」ドロップダウン */
.navbar-nav .dropdown-toggle::after { margin-left: 0.4em; vertical-align: 0.12em; border-top-width: 0.3em; border-right-width: 0.28em; border-left-width: 0.28em; }
.dropdown-menu {
    min-width: 15rem;
    margin-top: 0.4rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-md);
    font-size: 0.9rem;
}
.dropdown-item { padding: 0.5rem 0.75rem; border-radius: 6px; color: var(--ink-2); font-weight: 500; white-space: normal; }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--navy-050); color: var(--navy-700); }
.dropdown-item.active,
.dropdown-item:active { background: var(--navy-100); color: var(--navy-600); font-weight: 700; }
.dropdown-divider { margin: 0.3rem 0.4rem; border-color: var(--line); opacity: 1; }

/* パンくず */
.crumbs { margin: 0; font-size: 0.78rem; line-height: 1.6; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.1rem 0.45rem; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 0.45rem; color: var(--muted-2); }
.crumbs a { color: var(--navy-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink-2); }
main[class*="col-"]:not(.home-main) > .crumbs { margin-bottom: 1rem; }

/* ---------- 4. Layout ---------- */
.container > .row { margin-top: 2rem; }

main[class*="col-"] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* サブページ: 本文全体を1枚のカードに */
main[class*="col-"]:not(.home-main) {
    padding: clamp(1.25rem, 2.6vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ホーム/一覧系: セクションごとにカード */
main.home-main { gap: 2rem; }

main.home-main > section {
    min-width: 0;
    padding: 0;
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

main > section { min-width: 0; margin-bottom: 0; }

main > section > :last-child { margin-bottom: 0; }

/* Bootstrap の gutter を外して、グリッドで2カラムに */
.container > .row { margin-left: 0; margin-right: 0; }
.container > .row > .sidebar,
.container > .row > main.home-main { padding-left: 0; padding-right: 0; }
.container > .row > .sidebar,
.container > .row > main { margin-top: 0; }

/* ---------- Section headings ---------- */
.section-badge,
.section-badge-light {
    display: inline-block;
    margin: 0 0 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--navy-500);
    font-family: var(--font-num);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.section-title {
    position: relative;
    margin: 0 0 1.1rem;
    padding: 0 0 0.8rem 0.95rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0;
}

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    height: 1.05em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--navy-500), var(--navy-700));
}

h1.section-title { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: 1.25rem; }

.section-badge + .section-title { margin-top: 0.3rem !important; }

.section-intro { color: var(--muted); font-size: 0.94rem; margin: -0.4rem 0 1.25rem; }

/* ---------- 5. Sidebar ---------- */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.sidebar > * { margin: 0; }

.sidebar-cta { order: 1; display: grid; gap: 0.6rem; }
.sidebar-menu { order: 2; }
.sidebar-partners { order: 3; }
.sidebar-banner { order: 4; }

/* 共通タイル */
.sidebar-tile {
    --tile-accent: var(--navy-600);
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 10px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sidebar-tile:hover {
    border-color: var(--navy-500);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    text-decoration: none;
}

.sidebar-tile:focus-visible { outline-offset: 2px; }

.sidebar-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--tile-accent);
}

.sidebar-tile-icon svg { width: 20px; height: 20px; }

.sidebar-tile-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.sidebar-tile-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sidebar-tile-description {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.sidebar-tile-arrow {
    color: var(--tile-accent);
    font-family: var(--font-num);
    font-size: 1.2rem;
    line-height: 1;
    text-align: right;
    transition: transform 0.15s ease;
}

.sidebar-tile:hover .sidebar-tile-arrow { transform: translateX(2px); }

/* お申し込み(主) / 接続お申し込み / お問い合わせ */
.sidebar-cta .sidebar-tile { padding: 0.9rem 1rem; }
.sidebar-cta .sidebar-tile-title { font-size: 0.95rem; }

.sidebar-tile-fixed {
    order: 1;
    --tile-accent: var(--accent);
    border-left: 3px solid var(--accent);
}

.sidebar-tile-fixed:hover { border-color: var(--accent); background: #fff8fa; }
.sidebar-tile-fixed .sidebar-tile-title { color: var(--accent); }

.sidebar-tile-primary { order: 2; --tile-accent: #b65f05; border-left: 3px solid var(--tile-accent); }
.sidebar-tile-contact { order: 3; --tile-accent: var(--navy-600); border-left: 3px solid var(--tile-accent); }
.sidebar-tile-primary .sidebar-tile-title,
.sidebar-tile-contact .sidebar-tile-title { color: var(--tile-accent); }

/* お手続きメニュー: 1枚のカードの中の行リスト */
.sidebar-menu {
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.sidebar-menu::before {
    content: "お手続き・ご案内";
    display: block;
    padding: 0.5rem 0.65rem 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.sidebar-menu .sidebar-tile {
    --tile-accent: var(--navy-600);
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
}

.sidebar-menu .sidebar-tile + .sidebar-tile { margin-top: 1px; }
.sidebar-menu .sidebar-tile:hover { background: var(--navy-050); }
.sidebar-menu .sidebar-tile-title { font-size: 0.86rem; font-weight: 500; color: var(--ink-2); }
.sidebar-menu .sidebar-tile-icon { color: var(--muted); }
.sidebar-menu .sidebar-tile-arrow { color: var(--muted-2); }
.sidebar-menu .sidebar-tile:hover .sidebar-tile-icon { color: var(--navy-600); }

.sidebar-tile[aria-current="page"] { background: var(--navy-100); }
.sidebar-tile[aria-current="page"] .sidebar-tile-title { color: var(--navy-700); font-weight: 700; }
.sidebar-tile[aria-current="page"] .sidebar-tile-icon { color: var(--navy-600); }

/* 外部バナー */
.sidebar-banner {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.sidebar-banner:hover { border-color: var(--navy-500); box-shadow: var(--shadow-md); }
.sidebar-banner img { display: block; width: 100%; height: auto; }

.sidebar-partners {
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.sidebar-partner-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sidebar-partner-badges img { display: block; margin: 0 !important; }

/* ---------- 6. Home hero ---------- */
/* 写真とコピーを分離し、文字・料金はどの画面幅でも読めるHTMLで表示する。 */
main.home-main > .site-hero {
    padding: 0;
    overflow: hidden;
    border: 1px solid #dce8f4;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 4px 18px rgba(26, 83, 135, 0.06);
}

.hero-visual { position: relative; display: flex; align-items: center; width: 100%; min-height: 400px; aspect-ratio: 16 / 9; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3) 48%, transparent 70%); }
.hero-copy-block { width: 65%; padding: clamp(1.5rem, 3vw, 2.4rem); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.6rem; }
.hero-badges span { padding: 0.25rem 0.6rem; border: 1px solid #8fbbe9; border-radius: 4px; background: rgba(255,255,255,0.9); color: #075ebd; font-size: 0.78rem; font-weight: 700; }
.hero-badges span:first-child { color: #fff; border-color: var(--navy-600); background: var(--navy-600); }
.hero-title { margin: 0 0 1.25rem; color: #132c48; font-size: clamp(1.85rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.55; letter-spacing: -0.025em; }
.hero-title-part { display: block; white-space: nowrap; }
.hero-title .hl { color: #0867ce; }
.hero-title .hero-x { margin-inline: 0.1em; color: #5b9bea; font-weight: 500; }
.hero-description { margin: 0; color: #344d64; font-size: 0.9rem; line-height: 1.95; }

/* スマホでは写真が料金を押し下げるため、見出しの直下から料金枠へ移れるようにする */
.hero-jump { display: none; }

/* 白い背景にブルーの線画アイコンを添えたサービスの要点。 */
.hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 1.25rem 0.5rem; list-style: none; border-top: 1px solid #e7f0f8; background: #fff; }
.hero-facts li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0 1rem; border-left: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; line-height: 1.65; }
.hero-facts li:first-child { border-left: 0; }
.hero-facts .nb { display: inline-block; white-space: nowrap; }
.hero-fact-icon { flex: none; width: 32px; height: 32px; color: var(--navy-600); }
.hero-fact-label { display: block; margin-bottom: 0.35rem; color: #2465a7; font-size: 0.75rem; font-weight: 700; }
.hero-facts strong { display: block; margin-bottom: 0.35rem; color: #075ebd; font-family: var(--font-num); font-size: 1.65rem; font-weight: 700; line-height: 1.2; }
.hero-facts strong small { margin-left: 0.15em; font-size: 0.83rem; }
.hero-facts strong.is-text { font-family: var(--font-jp); font-size: 1.06rem; line-height: 1.9; }

/* 光クロスの料金と申込を、写真の下の淡いブルーの枠にまとめる。 */
.hero-price { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.9rem 1.5rem; padding: 1.25rem 1.5rem 1.1rem; border-top: 1px solid #dce8f4; background: #f5faff; }
.hero-price-label { margin: 0; color: #0b4f9c; font-size: 1rem; font-weight: 800; line-height: 1.5; }
.hero-price-label small { display: block; color: #315a81; font-size: 0.74rem; font-weight: 500; }
.hero-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.hero-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 0.7rem; margin: 0; padding: 0.85rem 1rem 1rem; border: 1px solid var(--navy-200); border-radius: var(--radius); background: #fff; }
.hero-plan-name { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.8rem; font-weight: 700; }
.hero-plan-price { color: #075ebd; white-space: nowrap; }
.hero-plan-price strong { font-family: var(--font-num); font-size: 1.9rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero-plan-price span { margin-left: 0.15rem; font-size: 0.82rem; font-weight: 700; }
.hero-plan .tag { justify-self: end; }
.hero-plan .cta-btn { grid-column: 1 / -1; min-height: 44px; margin-top: 0.55rem; padding-block: 0.5rem; font-size: 0.86rem; }
.hero-price-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.74rem; line-height: 1.7; }

.home-summary { margin: 0; padding: 0.15rem 0 0.15rem 1rem; border-left: 3px solid var(--navy-200); color: var(--ink-2); font-size: 0.88rem; line-height: 1.9; }
.home-summary strong { color: var(--ink); }

.home-anchor-nav { display: flex; flex-wrap: wrap; gap: 0; margin-top: -0.5rem; border-block: 1px solid var(--line); }
.home-anchor-nav a { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.65rem; min-height: 52px; padding: 0.7rem 1rem; border-right: 1px solid var(--line); color: var(--ink-2); font-size: 0.83rem; font-weight: 700; text-decoration: none; }
.home-anchor-nav a::after { content: "›"; color: var(--navy-600); font-family: var(--font-num); font-size: 1.1rem; }
.home-anchor-nav a:hover { color: var(--navy-600); background: var(--navy-050); }

/* ---------- 7. Components ---------- */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-jp);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cta-btn:hover { text-decoration: none; }

.cta-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(200, 16, 46, 0.7);
}

.cta-primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }

.cta-ghost {
    background: var(--surface);
    border-color: var(--navy-600);
    color: var(--navy-600);
}

.cta-ghost:hover { background: var(--navy-600); color: #fff; }

.cta-ghost-light {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.cta-ghost-light:hover { background: #fff; border-color: #fff; color: var(--navy-800); }

.cta-link-light { color: rgba(255, 255, 255, 0.9); padding-inline: 0.6rem; }
.cta-link-light:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* タグ */
.tag {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tag-free { background: var(--success-bg); color: var(--success); }
.tag-note { background: var(--navy-100); color: var(--navy-700); }

/* Bootstrap ボタン上書き */
.btn {
    border-radius: var(--radius);
    font-family: var(--font-jp);
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.6rem 1.2rem;
}

.btn-primary,
.btn-info,
.btn-danger { border: 1px solid transparent; color: #fff; box-shadow: none; }

.btn-primary { background: var(--navy-600); border-color: var(--navy-600); }
.btn-primary:hover,
.btn-primary:focus { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn-info { background: var(--navy-800); border-color: var(--navy-800); }
.btn-info:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.btn-danger { background: var(--accent); border-color: var(--accent); }
.btn-danger:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-outline-primary { border: 1px solid var(--navy-600); color: var(--navy-600); background: #fff; }
.btn-outline-primary:hover { color: #fff; background: var(--navy-600); border-color: var(--navy-600); }
.btn-sm { white-space: nowrap; }
.btn-lg { padding: 0.8rem 1.5rem; font-size: 1rem; }

/* アラート */
.alert {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-600);
    border-radius: var(--radius-md);
    background: var(--navy-050);
    color: var(--ink);
    box-shadow: none;
}

.alert h4, .alert h5, .alert h6, .alert .alert-heading { color: var(--ink); }
.alert > :last-child { margin-bottom: 0; }
.alert-light { background: var(--surface); border-left-color: var(--muted-2); }
.alert-secondary { background: var(--bg); border-left-color: var(--muted-2); }
.alert-info { background: var(--navy-050); border-left-color: var(--navy-500); }
.alert-warning { background: #fff8ea; border-color: #f2e0b8; border-left-color: #d18800; }
.alert-danger { background: #fdf0f2; border-color: #f3ccd3; border-left-color: var(--accent); }

.badge { border-radius: 999px; font-weight: 700; padding: 0.35em 0.7em; }

/* カード(Bootstrap) */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
}

.card-header { background: var(--navy-050) !important; border-bottom: 1px solid var(--line); color: var(--ink); padding: 0.75rem 1rem; }
.card-body { padding: 1rem; }

pre {
    padding: 0.9rem 1rem !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--navy-050) !important;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.list-group-item { background: var(--surface); border-color: var(--line); color: var(--ink-2); }

.example-box {
    margin-bottom: 1rem;
    padding: 0.95rem 1.15rem;
    background: var(--navy-050);
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-600);
    border-radius: var(--radius-md);
    color: var(--ink-2);
}

/* ---------- 8. Home sections ---------- */

/* ネットワーク構成図 (HTML) */
.net-diagram { margin: 0 0 1.25rem; }

.net-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.25rem;
    margin: 0;
    padding: 1.5rem 1.25rem;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(var(--navy-050), var(--navy-050)) padding-box,
        var(--navy-050);
}

.net-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    margin: 0;
    padding: 1.1rem 0.75rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.net-node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 2.25rem;
    height: 2px;
    background: linear-gradient(90deg, var(--navy-400), var(--navy-600));
    transform: translateY(-50%);
}

.net-node:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 2.25rem - 7px);
    z-index: 1;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--navy-600);
    border-right: 2px solid var(--navy-600);
    transform: translateY(-50%) rotate(45deg);
}

.net-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background: var(--navy-100);
    color: var(--navy-600);
}

.net-icon svg { width: 22px; height: 22px; }

.net-node strong { font-size: 0.98rem; line-height: 1.4; }
.net-node span { color: var(--muted); font-size: 0.8rem; line-height: 1.55; }

.net-node-primary { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(26, 111, 209, 0.14); }
.net-node-primary .net-icon { background: var(--navy-600); color: #fff; }
.net-node-primary span { color: var(--ink-2); font-weight: 500; }

.net-diagram figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.78rem; }

.net-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.net-points li { margin: 0; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: var(--navy-050); }
.net-points strong { display: block; margin-bottom: 0.25rem; color: var(--navy-800); font-size: 0.98rem; }
.net-points span { display: block; color: var(--ink-2); font-size: 0.86rem; line-height: 1.7; }

.line-cards + p { margin-top: 1rem; }
.bullet-list { margin: 0 0 1.25rem; padding-left: 1.25rem; color: var(--ink-2); font-size: 0.92rem; line-height: 1.85; }
.bullet-list li + li { margin-top: 0.3rem; }

.net-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
.net-terms > div { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.net-terms dt { margin-bottom: 0.25rem; color: var(--navy-800); font-size: 0.98rem; font-weight: 700; }
.net-terms dd { margin: 0; color: var(--ink-2); font-size: 0.86rem; line-height: 1.7; }

.home-main h3.h3 { margin: 1.25rem 0 0.5rem; font-size: 1.1rem; }

/* 関連リンクカード */
.link-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }

.link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none !important;
}

.link-card::after { content: "›"; color: var(--navy-500); font-family: var(--font-num); font-size: 1.3rem; line-height: 1; transition: transform 0.15s ease; }
.link-card:hover { border-color: var(--navy-500); background: var(--navy-050); color: var(--navy-700); }
.link-card:hover::after { transform: translateX(3px); }
.link-card small { display: block; margin-top: 0.1rem; color: var(--muted); font-size: 0.78rem; font-weight: 400; }

/* サービス一覧 */
.svc-group + .svc-group { margin-top: 1.5rem; }

.svc-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    color: var(--navy-800);
    font-size: 1.02rem;
    font-weight: 800;
}

.svc-line::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--navy-500); }
.svc-line .svc-more { margin-left: auto; color: var(--navy-600); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.svc-line .svc-more:hover { text-decoration: underline; }

.svc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.svc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
    gap: 0.75rem 1.75rem;
    align-items: center;
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
    transition: background-color 0.15s ease;
}

.svc:first-child { border-top: 0; }
.svc:hover { background: var(--navy-050); }

.svc-name { margin: 0 0 0.2rem; color: var(--ink); font-size: 1.02rem; font-weight: 700; }
.svc-point { margin: 0 0 0.25rem; color: var(--navy-600); font-size: 0.92rem; font-weight: 700; line-height: 1.6; }
.svc-desc { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.75; }

.svc-side { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; text-align: right; }

.svc-price { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; line-height: 1.3; }
.svc-price-label { color: var(--muted); font-size: 0.76rem; font-weight: 700; }

.svc-yen { color: var(--navy-800); font-family: var(--font-num); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-yen small { margin-right: 0.2em; color: var(--muted); font-family: var(--font-jp); font-size: 0.74rem; font-weight: 700; letter-spacing: 0; }
.svc-yen em { margin-left: 0.1em; color: var(--ink-2); font-family: var(--font-jp); font-size: 0.82rem; font-style: normal; font-weight: 700; letter-spacing: 0; }

.svc-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius);
    background: var(--navy-600);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
}

.svc-apply::after { content: "›"; font-family: var(--font-num); font-size: 1.1rem; line-height: 1; }
.svc-apply:hover { background: var(--navy-800); color: #fff; }

/* 対応回線カード */
.line-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.line-card-wide { grid-column: 1 / -1; }

.line-card {
    min-width: 0;
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.line-name { margin: 0 0 0.6rem; color: var(--navy-800); font-size: 1.05rem; font-weight: 800; }

.line-spec { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }

.line-spec li {
    margin: 0;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--navy-100);
    color: var(--navy-800);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
}

.line-spec li span { margin-right: 0.35em; color: var(--muted); font-weight: 500; }

.line-sub { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.86rem; }

.line-sub th,
.line-sub td { padding: 0.55rem 0.6rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }

.line-sub thead th { border-top: 0; border-bottom: 2px solid var(--line-strong); color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.line-sub td:nth-child(1) { font-family: var(--font-num); font-weight: 700; color: var(--ink); white-space: nowrap; }
.line-sub td:nth-child(2) { white-space: nowrap; }
.line-sub td:nth-child(3) { color: var(--ink-2); }

/* 料金表 */
.price-notes { margin: 1rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.84rem; }
.price-notes li { margin: 0 0 0.2rem; color: inherit; }

/* FAQ */
.qa-section { display: block; }

.qa-section .question {
    position: relative;
    margin: 0;
    padding: 1rem 1.1rem 0.4rem 3.4rem;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

.qa-section .question::before {
    content: "Q";
    position: absolute;
    left: 1.1rem;
    top: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--navy-600);
    color: #fff;
    font-family: var(--font-num);
    font-size: 0.8rem;
    font-weight: 800;
}

.qa-section .answer {
    margin: 0 0 0.85rem;
    padding: 0 1.1rem 1rem 3.4rem;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.94rem;
}

.qa-section .answer:last-child { margin-bottom: 0; }

/* お知らせ */
.notice-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.notice-list li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.94rem;
}

.notice-list time { color: var(--muted); font-family: var(--font-num); font-size: 0.86rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* お問い合わせ帯 */
main section.contact-section,
main.home-main > section.contact-section {
    padding: clamp(1.4rem, 3vw, 2.25rem);
    border: 1px solid #d4e6f8;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, #f6faff, #edf7ff);
    box-shadow: none;
}

.contact-section p { color: var(--ink-2); }
.contact-section .text-muted { color: var(--muted) !important; }
.contact-section .section-badge,
.contact-section .section-badge-light { color: var(--navy-600); }
.contact-section a:not(.cta-btn) { color: var(--navy-600); text-decoration-color: #97bee8; }
.contact-section a:not(.cta-btn):hover { color: var(--navy-800); }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; align-items: center; }
.contact-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; min-width: 270px; }
.contact-note { margin: 0; color: var(--muted) !important; font-size: 0.82rem; font-weight: 500; text-align: center; }

.contact-links {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #d4e6f8;
    color: var(--muted) !important;
    font-size: 0.86rem;
}

/* ---------- 9. Tables ---------- */
.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

/* 読み上げ用の caption は場所を取らせない。Bootstrap は caption だけ position:absolute を外すため、
   表の下に1pxが残り、入れ物が縦に1px溢れて細いスクロールバーが出ていた */
.table > caption.visually-hidden { position: absolute !important; }

.table-scroll-hint { display: none; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.875rem; }

.table {
    margin-bottom: 0;
    background: transparent;
    color: var(--ink);
    font-size: 0.92rem;
}

.table th,
.table td { padding: 0.8rem 0.9rem; vertical-align: middle; border-color: var(--line); }

.table thead th {
    background: var(--navy-050);
    border-bottom: 2px solid var(--line-strong);
    color: var(--navy-800);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.table-bordered > :not(caption) > * > * { border-color: var(--line); }
.table .table-secondary,
.table td.table-secondary { background: var(--bg) !important; color: var(--ink); font-weight: 700; }
.table td p { margin-bottom: 0.35rem; }

/* 価格マトリクス */
.pricing-table { min-width: 680px; border: 0; }
.pricing-table thead th { padding: 0.85rem 0.9rem; }
.pricing-table tbody th { background: var(--surface); color: var(--ink); font-size: 0.95rem; font-weight: 800; text-align: left; white-space: nowrap; }
.pricing-table tbody th small { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.72rem; font-weight: 500; white-space: normal; line-height: 1.5; }
.pricing-table td { text-align: center; }

/* タブレット〜標準的なデスクトップ(768〜1399px)は本文幅が660〜840pxのため、余白と文字を詰めて収める。
   1400px以上は本文幅が1020pxになるので従来どおり */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .pricing-table { min-width: 0; }
    .pricing-table th,
    .pricing-table td,
    .pricing-table thead th { padding-inline: 0.35rem; }
    /* 回線名は語の途中で折り返さない（「光クロス」と「Biz」の境目だけ折り返してよい） */
    .pricing-table tbody th { padding-left: 0.75rem; font-size: 0.84rem; white-space: normal; word-break: keep-all; }
    .pricing-table thead th:first-child { padding-left: 0.75rem; }
    .pricing-table thead th { font-size: 0.74rem; letter-spacing: 0; }
    .pricing-table .price strong { font-size: 1.02rem; }
    .pricing-table .price-note { padding-inline: 0.4rem; font-size: 0.66rem; }
}

.price-cell { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.price { color: var(--navy-800); font-family: var(--font-num); font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price strong { color: var(--navy-800); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.price small { margin-right: 0.25em; color: var(--muted); font-family: var(--font-jp); font-size: 0.72rem; font-weight: 700; }
.price-note { display: inline-block; margin-top: 0.15rem; padding: 0 0.5rem; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: 0.7rem; font-weight: 700; line-height: 1.7; white-space: nowrap; }

/* 会社概要テーブル */
.company-table th { width: 180px; background: var(--navy-050); font-weight: 700; white-space: nowrap; }
.company-table td { background: var(--surface); }
.company-table .list-group-item { padding: 0.35rem 0; border: none; background: transparent; }

/* ---------- 10. Content ---------- */
.content-section h3,
.content-section .content-heading,
.content-heading {
    position: relative;
    margin: 0 0 0.8rem;
    padding: 0 0 0.5rem 0.9rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
}

.content-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: var(--navy-500);
}

.content-heading .text-danger { color: var(--navy-500) !important; }
.content-section p,
.content-section ul li,
.content-section ol li { font-size: 0.95rem; }

.impact-list li { margin-bottom: 0.7rem; }
.policy-list { padding-left: 1.15rem; }
.policy-list li { margin-bottom: 0.4rem; color: var(--ink-2); }

/* 旧ホームの要点ストリップ(service.html) */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--navy-050);
    overflow: hidden;
}

.hero-stat { padding: 1.1rem 1.15rem; border-left: 1px solid var(--line); }
.hero-stat:first-child { border-left: 0; }
.hero-stat-label { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; }

.hero-stat strong {
    display: block;
    color: var(--navy-800);
    font-family: var(--font-num);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-stat strong em { display: inline-block; margin-left: 0.15em; color: var(--ink-2); font-family: var(--font-jp); font-size: 0.92rem; font-weight: 700; font-style: normal; letter-spacing: 0; }
.hero-stat-note { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }

.feature-strip { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.feature-strip .row-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-strip .f-item { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1.25rem; border-left: 1px solid var(--line); }
.feature-strip .f-item:nth-child(odd) { border-left: 0; }
.feature-strip .f-item:nth-child(n + 3) { border-top: 1px solid var(--line); }

.feature-strip .f-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy-100);
    color: var(--navy-600);
}

.feature-strip .f-ico svg { width: 22px; height: 22px; }
.feature-strip .f-txt { color: var(--ink); font-size: 0.88rem; font-weight: 600; line-height: 1.55; }

/* ---------- 11. Footer ---------- */
.footer {
    margin-top: 3.5rem;
    padding: 2.25rem 0 1.75rem;
    border-top: 1px solid var(--line);
    background: var(--navy-050);
    color: var(--muted);
    font-size: 0.84rem;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.15rem 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.75rem; }
.footer-group ul { margin: 0; padding: 0; list-style: none; }
.footer-head { margin: 0 0 0.45rem; color: var(--navy-800); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; }

.footer-nav a {
    display: inline-block;
    padding: 0.3rem 0;
    color: var(--ink-2);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.footer-nav a:hover { color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; }

.footer-copy { margin: 0; color: var(--muted); font-family: var(--font-num); font-size: 0.78rem; letter-spacing: 0.05em; }

/* ---------- 12. Forms ---------- */
.contact-form .form-label { margin-bottom: 0.35rem; color: var(--ink); font-weight: 700; }
.contact-form fieldset { min-width: 0; }
.contact-form legend.form-label { float: none; width: auto; font-size: 1rem; }

.contact-form .req,
.contact-form .opt {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: 0.1em;
}

.contact-form .req { background: var(--accent); color: #fff; }
.contact-form .opt { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

.contact-form .form-control {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-jp);
    box-shadow: none;
}

.contact-form .form-select {
    padding: 0.65rem 2.25rem 0.65rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-jp);
    box-shadow: none;
}

.contact-form .form-select:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(26, 111, 209, 0.18); }
.contact-form .form-select.is-invalid { border-color: var(--accent); }
.contact-form .form-control:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(26, 111, 209, 0.18); }
.contact-form .form-control.is-invalid,
.contact-form .form-check-input.is-invalid { border-color: var(--accent); }
.contact-form .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15); }
.contact-form .form-text { color: var(--muted); font-size: 0.82rem; }
.contact-form .invalid-feedback { color: var(--accent); font-size: 0.84rem; font-weight: 600; }
.contact-form .form-check { margin-bottom: 0.3rem; }
.contact-form .form-check-input { border-color: #8d9ab0; margin-top: 0.4em; }
.contact-form .form-check-input:checked { background-color: var(--navy-600); border-color: var(--navy-600); }
.contact-form .form-check-input:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(26, 111, 209, 0.18); }
.contact-form .form-check-label { color: var(--ink-2); }
.contact-form .contact-agree { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--navy-050); }

.contact-quiz-row { display: flex; align-items: center; gap: 0.6rem; }
.contact-quiz-q { color: var(--navy-800); font-family: var(--font-num); font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.contact-quiz-row .form-control { max-width: 6rem; text-align: center; }

.contact-form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.contact-form-actions .cta-btn { min-width: 220px; }
.contact-notice p,
.contact-notice li { font-size: 0.92rem; }
.contact-notice ul { padding-left: 1.2rem; }
.contact-notice li + li { margin-top: 0.35rem; }

/* 解約日の目安（解約フォーム） */
.kaiyaku-date-box { display: grid; gap: 0.15rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--navy-200); border-left: 4px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-050); }
.kaiyaku-date-box span { color: var(--navy-800); font-size: 0.85rem; font-weight: 700; }
.kaiyaku-date-box strong { color: var(--navy-600); font-size: 1.6rem; font-weight: 800; line-height: 1.4; }
.kaiyaku-date-box small { color: var(--muted); font-size: 0.8rem; line-height: 1.7; }
.contact-confirm-table th { width: 200px; }
.contact-confirm-message { white-space: pre-wrap; word-break: break-word; }

/* ハニーポット: 画面外に配置 (display:none だとボットに検知されやすい) */
.cf-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 12b. サイト構成の見直しで追加した部品 ---------- */

/* トップ: サービスと料金（回線ごとのカード） */
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.plan-card { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.plan-card:first-child { border-color: var(--navy-200); background: linear-gradient(180deg, var(--navy-050), #fff 65%); }
.plan-name { margin: 0; color: var(--navy-800); font-size: 1.02rem; font-weight: 800; line-height: 1.45; }
.plan-name small { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.74rem; font-weight: 500; }
.plan-note { margin: 0; color: var(--ink-2); font-size: 0.8rem; line-height: 1.6; }
.plan-rows { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.plan-rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; margin: 0; padding-top: 0.55rem; border-top: 1px solid var(--line); }
.plan-row-name { flex-basis: 100%; color: var(--ink-2); font-size: 0.78rem; font-weight: 700; }
.plan-row-price { color: #075ebd; white-space: nowrap; }
.plan-row-price strong { font-family: var(--font-num); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-row-price small { margin-left: 0.15rem; font-size: 0.78rem; font-weight: 700; }
.plan-rows .tag { margin-left: auto; font-size: 0.68rem; }
.plan-link { margin-top: auto; padding-top: 0.25rem; font-size: 0.84rem; font-weight: 700; }
.plan-foot { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.8; }
.plan-actions { margin-top: 0.9rem; }
.more-link { margin: 0.9rem 0 0; font-size: 0.88rem; font-weight: 700; }

/* よくあるご質問: 分類ナビ・用語の説明 */
section > .home-anchor-nav { margin-top: 1rem; }
.glossary { display: grid; gap: 0.6rem; margin: 0; }
.glossary > div { margin: 0; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: calc(var(--header-h) + 1rem); }
.glossary dt { margin: 0 0 0.25rem; color: var(--navy-800); font-size: 0.98rem; font-weight: 800; }
.glossary dd { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.8; }

/* クレジットカード払い: 5日に決済する理由（画像から文章に） */
.pay-reason { margin: 0.5rem 0 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--navy-200); border-radius: var(--radius-md); background: var(--navy-050); }
.pay-reason-title { margin: 0 0 0.9rem; color: var(--navy-800); font-size: 1rem; font-weight: 800; }
.pay-timeline { display: flex; align-items: center; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; }
.pay-timeline li { position: relative; flex: 1 1 0; margin: 0; padding: 0.4rem 0.3rem; color: var(--ink-2); font-size: 0.78rem; line-height: 1.5; text-align: center; }
.pay-timeline li strong { display: block; color: var(--navy-800); font-family: var(--font-num); font-size: 1.15rem; line-height: 1.3; }
.pay-timeline li::before { content: ""; display: block; width: 0.8rem; height: 0.8rem; margin: 0 auto 0.35rem; border-radius: 50%; background: var(--navy-600); }
.pay-timeline li.is-pay::before { background: #f0b400; }
.pay-timeline li.is-keep { flex: 2 1 0; padding: 0.4rem 0.8rem; border: 1px dashed var(--navy-400); border-radius: 999px; background: #fff; color: var(--navy-600); font-weight: 700; }
.pay-timeline li.is-keep::before { display: none; }
.pay-reason-list { margin: 0; padding-left: 1.2rem; color: var(--ink-2); font-size: 0.9rem; line-height: 1.9; }

@media (max-width: 767.98px) {
    .plan-cards { grid-template-columns: 1fr; }
    .pay-timeline { flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .pay-timeline li { display: flex; align-items: center; gap: 0.6rem; text-align: left; padding: 0.3rem 0.2rem; }
    .pay-timeline li::before { margin: 0; flex: none; }
    .pay-timeline li strong { display: inline; font-size: 1rem; }
    .pay-timeline li.is-keep { justify-content: center; text-align: center; }
}

/* ---------- 13. Responsive ---------- */

/* 992-1199px: ナビの項目が収まるよう余白を詰める */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-custom .container { gap: 0.75rem; }
    .navbar-nav { gap: 0; }
    .navbar-nav .nav-link { padding: 0.5rem 0.5rem !important; font-size: 0.86rem; letter-spacing: 0; }
}

/* デスクトップ: 左サイドバー + 本文 */
@media (min-width: 992px) {
    .container > .row {
        display: grid;
        grid-template-columns: 264px minmax(0, 1fr);
        column-gap: 2.25rem;
        align-items: start;
    }

    .container > .row > .sidebar,
    .container > .row > main { width: auto; max-width: none; }
}

@media (max-width: 1199.98px) {

    /* ネットワーク構成図: 縦並び(アイコン左・文字右) */
    .net-flow { grid-template-columns: 1fr; gap: 2rem; padding: 1.1rem; }
    .net-node {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 0.9rem;
        align-items: center;
        justify-items: start;
        padding: 0.9rem;
        text-align: left;
    }
    .net-icon { grid-row: 1 / span 4; margin: 0; }
    .net-node:not(:last-child)::after { top: 100%; left: calc(0.9rem + 22px); width: 2px; height: 2rem; background: linear-gradient(180deg, var(--navy-400), var(--navy-600)); transform: translateX(-50%); }
    .net-node:not(:last-child)::before { top: calc(100% + 2rem - 7px); left: calc(0.9rem + 22px); transform: translateX(-50%) rotate(135deg); }

    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-stat:nth-child(odd) { border-left: 0; }
    .hero-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: #fff;
        box-shadow: var(--shadow-md);
    }

    .navbar-custom .navbar-collapse { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .navbar-nav { align-items: stretch; }
    .navbar-nav .nav-link { display: block; padding: 0.7rem 0.9rem !important; }

    .sidebar { margin-top: 1.75rem; }
    .sidebar-cta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sidebar-tile-fixed,
    .sidebar-tile-primary,
    .sidebar-tile-contact { order: 0; }

    .contact-layout { grid-template-columns: 1fr; }
    .contact-actions { min-width: 0; }
}

@media (max-width: 767.98px) {
    :root { --header-h: 4rem; }

    .container { width: calc(100% - 1.5rem); }

    main[class*="col-"]:not(.home-main) { padding: 1.25rem 1.1rem; border-radius: var(--radius-md); }
    main.home-main > section { padding: 0; }

    .cta-btn { width: 100%; }


    .net-points,
    .net-terms { grid-template-columns: 1fr; }
    .link-cards { grid-template-columns: 1fr; }

    /* サービス一覧 */
    .svc { grid-template-columns: 1fr; padding: 1rem; }
    .svc-side { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
    .svc-price { align-items: flex-start; }
    .svc-apply { min-width: 7.5rem; }

    .line-cards { grid-template-columns: 1fr; }

    /* 価格表: カード型に積む(ロールはHTML側で付与) */
    .pricing-table { min-width: 0; }
    .pricing-table,
    .pricing-table tbody,
    .pricing-table tr,
    .pricing-table th,
    .pricing-table td { display: block; width: 100%; }

    .pricing-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-responsive:has(> .pricing-table) { border: 0; background: transparent; overflow: visible; }

    .pricing-table tbody tr { margin-bottom: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
    .pricing-table tbody tr:last-child { margin-bottom: 0; }
    .pricing-table tbody th { padding: 0.8rem 1rem; border: 0; background: var(--navy-800); color: #fff; }
    .pricing-table tbody th small { display: block; margin: 0.1rem 0 0; color: rgba(255, 255, 255, 0.75); }

    .pricing-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.7rem 1rem;
        border: 0;
        border-top: 1px solid var(--line);
        text-align: right;
    }

    .pricing-table tbody td::before { content: attr(data-label); flex: none; color: var(--ink-2); font-size: 0.86rem; font-weight: 700; text-align: left; }
    .price-cell { align-items: flex-end; }

    .notice-list li { grid-template-columns: 1fr; }

    .contact-form-actions { flex-direction: column; }
    .contact-form-actions .cta-btn { width: 100%; min-width: 0; }
    .contact-confirm-table th { width: 130px; white-space: normal; }
    .company-table th { width: auto; white-space: normal; }
    .company-table th,
    .company-table td { overflow-wrap: anywhere; }

    .table-scroll-hint { display: block; }
}

@media (max-width: 575.98px) {
    body { line-height: 1.75; }

    /* 対応回線: 3列表をやめて 速度/地域 の見出し行 + 種別リスト に積む */
    .line-sub thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .line-sub,
    .line-sub tbody { display: block; }
    .line-sub tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
    .line-sub tr:first-child { border-top: 0; padding-top: 0.25rem; }
    .line-sub td { padding: 0; border: 0; }
    .line-sub td:nth-child(1)::before { content: "最大速度 "; color: var(--muted); font-family: var(--font-jp); font-size: 0.74rem; font-weight: 500; }
    .line-sub td:nth-child(2)::before { content: "提供地域 "; color: var(--muted); font-size: 0.74rem; }
    .line-sub td:nth-child(3) { grid-column: 1 / -1; margin-top: 0.3rem; padding-left: 0.75rem; border-left: 3px solid var(--navy-100); }

    .sidebar-cta { grid-template-columns: 1fr; }
    .brand-symbol { width: 34px; height: 34px; }
    .brand-wordmark { font-size: 1.55rem; }
    .brand-tagline { font-size: 0.66rem; }

    .hero-stats,
    .feature-strip .row-items { grid-template-columns: 1fr; }
    .hero-stat,
    .feature-strip .f-item { border-left: 0; }
    .hero-stat + .hero-stat,
    .feature-strip .f-item + .f-item { border-top: 1px solid var(--line); }

    .footer-nav { grid-template-columns: 1fr 1fr; gap: 1rem 1rem; }

    .svc-side { flex-direction: column; align-items: stretch; text-align: right; }
    .svc-price { align-items: flex-end; }
    .svc-apply { width: 100%; }

    /* 会社概要: 見出しセルを値の上に積む */
    .company-table,
    .company-table tbody,
    .company-table tr,
    .company-table th,
    .company-table td { display: block; width: 100%; }
    .company-table tr + tr { border-top: 1px solid var(--line); }
    .company-table th { padding: 0.6rem 0.9rem 0.5rem; border: none; font-size: 0.82rem; }
    .company-table td { padding: 0.6rem 0.9rem 0.8rem; border: none; }
}

/* ヒーローは本文カラムの幅に合わせて写真・要点・料金を組み替える。 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-copy-block { width: 69%; padding: 1.5rem; }
    .hero-title { font-size: 1.95rem; }
    .hero-description { max-width: 22rem; font-size: 0.8rem; }
    .hero-price { grid-template-columns: 1fr; padding-inline: 1.1rem; }
    .hero-price-label small { display: inline; margin-left: 0.4rem; }
    .hero-plan { padding-inline: 0.85rem; }
    .hero-plan-price strong { font-size: 1.6rem; }
    .hero-plan .cta-btn { font-size: 0.78rem; padding-inline: 0.5rem; }
    .hero-facts li { padding-inline: 0.75rem; }
    .hero-facts strong.is-text { font-size: 0.9rem; }
}

@media (max-width: 767.98px) {
    .container > .row { margin-top: 1.25rem; }
    .hero-jump { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; margin-top: 0.35rem; font-size: 0.9rem; font-weight: 700; }
    main.home-main { gap: 1.5rem; }
    .hero-visual { flex-direction: column; align-items: stretch; min-height: 0; aspect-ratio: auto; }
    .hero-copy-block { width: 100%; padding: 1.4rem 1.2rem 0.8rem; }
    .hero-photo { position: relative; inset: auto; order: 2; z-index: 0; display: block; aspect-ratio: 1.6; }
    .hero-photo img { position: absolute; inset: 0; object-fit: cover; object-position: right center; }
    .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fff, transparent 22%); pointer-events: none; }
    .hero-visual::after { display: none; }
    .hero-badges { margin-bottom: 1rem; gap: 0.4rem; }
    .hero-badges span { font-size: 0.7rem; }
    .hero-title { font-size: clamp(1.2rem, 6.2vw, 2.3rem); margin-bottom: 0.8rem; line-height: 1.5; }
    .hero-description { font-size: 0.8rem; }
    .hero-facts { grid-template-columns: 1fr 1fr; padding: 0; }
    .hero-facts li { flex-direction: row; padding: 1rem 0.8rem; gap: 0.55rem; font-size: 0.65rem; }
    .hero-facts li:nth-child(odd) { border-left: 0; }
    .hero-facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .hero-fact-icon { width: 26px; height: 26px; }
    .hero-fact-label { font-size: 0.68rem; }
    .hero-facts strong { font-size: 1.4rem; }
    .hero-facts strong.is-text { font-size: 0.88rem; }
    .hero-price { grid-template-columns: 1fr; padding: 1rem 1.1rem; gap: 0.7rem; }
    .hero-price-label small { display: inline; margin-left: 0.4rem; }
    .hero-plans { grid-template-columns: 1fr; gap: 0.65rem; }
    .hero-price-note { font-size: 0.7rem; }
    .home-anchor-nav { margin-top: 0; }
    .home-anchor-nav a { flex: 1 0 33.333%; padding: 0.65rem 0.55rem; font-size: 0.74rem; }
}

@media (max-width: 359.98px) {
    .hero-copy-block { padding-inline: 0.85rem; }
    .hero-badges span { padding-inline: 0.4rem; font-size: 0.66rem; }
    .hero-facts li { flex-direction: column; }
    .hero-plan-price strong { font-size: 1.65rem; }
    .home-anchor-nav a { flex-basis: 50%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}