/* NEUBOX サイト共通 CSS（2026-10-11 JST 案3「波形のテクノロジー」モック site/mock/案3/style.css から移植） トークンは site/mock/案3/DESIGN.md §1〜§2。トップ専用の部品（.hero .trace .facts .modes .photos .flow .price-record .demo-band .asks）と、 下層ページの読み物レイアウト（main 直下の素の要素）を同じトークンで持つ。 */ :root { --navy: #0F2D4E; --navy-2: #163A60; --signal: #5ED3EA; --paper: #F4F7FA; --white: #FFFFFF; --ink: #14243A; --cyan-ink: #0B6E85; --muted: #4E5D70; --rule: #C9D6E2; --plate: #DDDDDD; --navy-text: #B9CBDD; --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; --sans: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --radius: 4px; --gutter: 16px; --max: 1200px; --axis: 1px solid var(--rule); } @media (min-width: 768px) { :root { --gutter: 32px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.85; color: var(--ink); background: var(--paper); font-feature-settings: "palt" 0; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--cyan-ink); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: var(--radius); } .section :focus-visible, .section-alt :focus-visible { outline-color: var(--cyan-ink); } .num, .spec td, .price, .flow, .footer-dl dd { font-variant-numeric: tabular-nums; } .wrap, .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 860px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--navy); padding: 12px 16px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } h2, h3, .fact dt, .faq summary { text-wrap: balance; } /* 日本語の見出しを語の途中で折らない（lang="ja" の文節で折る）。行頭の始め括弧の空きを詰める（検証1 表示品質 #5〜#7） */ h1, h2, h3, .fact dt, summary, .ask-q { word-break: auto-phrase; text-spacing-trim: trim-start; } /* 表のセル・キャプション・フッターのリンクも文節で折る（「ニューボック／ス」のような1字送りを防ぐ・#18・#57） */ table :is(th, td, caption), .footer-nav a, .footer-dl dd { word-break: auto-phrase; } /* 2026-10-11 修正2（検証2 表示品質 #5）: 表の本文のセル（td）は文節で早く折れて右に空きが残るため、通常の折り返しに戻す。 見出しのセル（th）・キャプションは文節のまま。1字だけ次の行へ送られるのを防ぎたい語は .nw で包む */ table td { word-break: normal; line-break: strict; text-wrap: pretty; } .nw { white-space: nowrap; } h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.4; margin: 0; letter-spacing: 0.02em; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } /* ボタン（44px 以上） */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border-radius: var(--radius); font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.4; text-decoration: none; text-align: center; border: 2px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn-signal { background: var(--signal); color: var(--navy); border-color: var(--signal); } .btn-signal:hover { background: #8FE2F2; border-color: #8FE2F2; } .btn-ghost { background: transparent; color: var(--white); border-color: var(--navy-text); } .btn-ghost:hover { border-color: var(--white); } .btn-lg { min-height: 56px; font-size: 1.1rem; padding: 12px 28px; } /* ヘッダー */ /* 2026-10-11 ユーザー指示: PC・スマホともヘッダーを固定してスクロール（sticky）。アンカー移動時に見出しが隠れないよう scroll-padding-top を置く */ html { scroll-padding-top: 96px; } .site-header { background: var(--navy); color: var(--white); border-bottom: 1px solid rgba(185,203,221,.25); position: sticky; top: 0; z-index: 30; } .header-inner { display: flex; align-items: center; gap: 16px; min-height: 72px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; } .brand { color: var(--white); text-decoration: none; display: flex; flex-direction: column; line-height: 1.35; margin-right: auto; min-height: 44px; justify-content: center; flex: 1 1 0; min-width: 0; } .nav-btn { flex: none; } /* 2026-10-11 修正2: ナビを8項目・ヘッダーのボタンを2つにしたため、横並びのナビに切り替える幅を 1024px → 1200px にした（1024〜1199px はメニューボタンと追従ボタン） */ @media (min-width: 1200px) { .brand { flex: none; } } .brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; } .brand-sub { font-family: var(--sans); font-weight: 500; font-size: .8rem; margin-left: .6em; color: var(--navy-text); } @media (max-width: 599px) { .brand-sub { display: block; margin-left: 0; } } .brand-op { font-size: .75rem; color: var(--navy-text); } .nav-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; background: transparent; color: var(--white); border: 1px solid var(--navy-text); border-radius: var(--radius); font: 600 .9rem var(--sans); cursor: pointer; } .gnav ul { list-style: none; margin: 0; padding: 0; } .gnav a { color: var(--white); text-decoration: none; display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: .92rem; } @media (min-width: 1200px) { .gnav a { padding: 0 7px; } } .gnav a:hover { text-decoration: underline; } .gnav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; } .header-cta { display: none; } .gnav { flex-basis: 100%; } .js .gnav { display: none; } .no-js .nav-btn, html:not(.js) .nav-btn { display: none; } .js .gnav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-bottom: 1px solid rgba(185,203,221,.25); } .gnav.is-open ul { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 16px; } .gnav.is-open a { border-top: 1px solid rgba(185,203,221,.18); } @media (min-width: 1200px) { .nav-btn { display: none; } /* 2026-10-11: ナビ8項目＋ボタン2つが1行に収まるよう、折り返し禁止・ブランド名は縮む・リンクの余白を詰める */ .header-inner { flex-wrap: nowrap; gap: 12px; } .brand { flex: 0 1 auto; min-width: 0; margin-right: auto; } .gnav, .js .gnav { display: block; flex-basis: auto; position: static; flex: 0 0 auto; } .gnav ul { display: flex; gap: 0; flex-wrap: nowrap; } .gnav a { padding: 0 6px; font-size: .88rem; white-space: nowrap; } .header-cta { display: inline-flex; min-height: 44px; padding: 8px 14px; font-size: .88rem; white-space: nowrap; flex: none; } .header-cta-sub { padding: 8px 10px; } } @media (min-width: 1360px) { .header-inner { gap: 16px; } .gnav a { padding: 0 8px; font-size: .92rem; } .header-cta { padding: 8px 16px; font-size: .9rem; } } /* ヒーロー */ .hero { background: var(--navy); color: var(--white); padding: 40px 0 48px; } .hero-grid { display: grid; gap: 32px; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } .hero { padding-top: 64px; } } .audience { display: inline-block; font-size: .85rem; color: var(--navy); background: var(--navy-text); padding: 2px 10px; border-radius: var(--radius); margin-bottom: 20px; } .hero h1 { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .h1-main { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); line-height: 1.25; } .h1-sub { font-size: clamp(1rem, .9rem + .8vw, 1.5rem); color: var(--signal); font-weight: 600; } .lead { font-size: 1.02rem; max-width: 36em; color: var(--white); } .name-line { font-size: .85rem; color: var(--navy-text); border-left: 2px solid var(--signal); padding-left: 12px; max-width: 42em; } .hero-sub { font-family: var(--serif); font-size: 1.1rem; margin: 24px 0 12px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; } .form-note { font-size: .8rem; color: var(--navy-text); margin-top: 12px; } .hero-photo { margin: 0; background: var(--plate); border-radius: var(--radius); overflow: hidden; } .hero-photo img { width: 100%; aspect-ratio: 820 / 725; object-fit: cover; } .hero-photo figcaption { font-size: .75rem; color: var(--muted); padding: 8px 12px; background: var(--plate); } /* 時間軸の波形（演出はこの1か所のみ） */ .trace { margin-top: 40px; margin-bottom: 0; } .trace svg { width: 100%; height: auto; aspect-ratio: 700 / 152; display: block; overflow: visible; } .trace .axis line { stroke: var(--navy-text); stroke-width: 1; opacity: .7; } .trace .grid line { stroke-dasharray: 2 6; opacity: .35; } .trace .labels text { fill: var(--navy-text); font-family: var(--sans); font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; } .trace .labels text[text-anchor="end"] { text-anchor: end; } .trace-line { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference) { .trace-line { animation: draw 2.4s cubic-bezier(.3,.1,.2,1) .4s both; } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } } /* 目盛りの文字: SVG は幅に合わせて縮むため、画面幅ごとに SVG 内の大きさを変え、表示で 12px 以上を保つ（viewBox の幅 700） */ @media (max-width: 1023px) { .trace .labels text { font-size: 13px; } } @media (max-width: 767px) { .trace .labels text { font-size: 16px; } } @media (max-width: 599px) { .trace .labels text { font-size: 22px; } .trace-line { stroke-width: 4; } } @media (max-width: 479px) { .trace .labels text { font-size: 28px; } } @media (max-width: 379px) { .trace .labels text { font-size: 30px; } } .trace figcaption { font-size: .8rem; color: var(--navy-text); margin-top: 8px; max-width: 48em; } /* セクション共通: 左端の細い時間軸罫 */ .section { padding: 64px 0; background: var(--white); } .section-alt { background: var(--paper); } @media (min-width: 900px) { .section { padding: 96px 0; } } .section > .wrap { border-left: var(--axis); padding-left: calc(var(--gutter) + 4px); } @media (min-width: 900px) { .section > .wrap { padding-left: 48px; } } .section h2 { margin-bottom: 16px; position: relative; } .section h2::before { content: ""; position: absolute; left: calc(-1 * (var(--gutter) + 4px) - 4px); top: .7em; width: 9px; height: 1px; background: var(--cyan-ink); } @media (min-width: 900px) { .section h2::before { left: -52px; } } @media (max-width: 599px) { .section h2::before { display: none; } } .section-lead { color: var(--muted); max-width: 40em; margin-bottom: 32px; } .src { font-size: .78rem; color: var(--muted); margin-top: 8px; } .more { margin-top: 24px; } .more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } /* NEUBOX とは：定義リスト */ .facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); } .fact { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--rule); } @media (min-width: 900px) { .fact { grid-template-columns: 18em 1fr; gap: 40px; padding: 32px 0; } } .fact dt { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.5; } .fact dd { margin: 0; max-width: 40em; } .fact dd p:first-child { margin-bottom: .4em; } .names { margin-top: 28px; max-width: 46em; font-size: .95rem; } .ph-inline { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); border: 1px dashed var(--rule); padding: 6px 10px; border-radius: var(--radius); } /* 仕様 */ .spec-grid { display: grid; gap: 40px; margin-top: 24px; } @media (min-width: 1024px) { .spec-grid { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; } } .spec-table-wrap { overflow-x: auto; } table.spec { width: 100%; border-collapse: collapse; font-size: .95rem; } table.spec caption { text-align: left; font-family: var(--serif); font-weight: 600; font-size: 1rem; padding-bottom: 10px; caption-side: top; } table.spec th, table.spec td { padding: 12px 8px; border-top: 1px solid var(--rule); vertical-align: top; text-align: left; } table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 1px solid var(--rule); } table.spec th { font-weight: 500; color: var(--muted); width: 38%; padding-left: 0; } @media (min-width: 600px) { table.spec th { width: 32%; } } /* 狭い画面のトップの仕様表: 見出しの列を「医療機器認証番号」（8字）が1行に入る幅にする（1〜2字だけ次の行に送られるのを防ぐ・#18） */ @media (max-width: 599px) { .section table.spec th { width: 8.6em; } } .note { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; } .modes { margin: 0; background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 24px 20px 20px; } .modes svg { width: 100%; height: auto; aspect-ratio: 560 / 228; display: block; } .modes pattern path { fill: none; stroke: var(--signal); stroke-width: 1.6; } /* 周波数の文字: 表示で 12px 以上を保つよう、図の表示幅（viewBox の幅 560）に合わせて SVG 内の大きさを変える */ .modes text { fill: var(--white); font-family: var(--sans); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 1023px) { .modes { max-width: 600px; } .modes text { font-size: 14px; } } @media (max-width: 599px) { .modes text { font-size: 18px; } } @media (max-width: 479px) { .modes text { font-size: 26px; } } @media (max-width: 379px) { .modes text { font-size: 28px; } } .modes figcaption { font-size: .8rem; color: var(--navy-text); margin-top: 16px; line-height: 1.75; } .photos { display: grid; gap: 24px; margin-top: 48px; } /* トップの仕様の要点: 右の列に周波数の図と写真2枚を縦に並べる（図の下の空白をなくす・検証1 表示品質 #21） */ .spec-side { display: grid; gap: 24px; align-content: start; } .spec-side .photos { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 16px; } @media (min-width: 700px) { .photos { grid-template-columns: repeat(3, 1fr); } .spec-side .photos { grid-template-columns: 1fr 1fr; } } .photos figure { margin: 0; } .photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--plate); } .photos figcaption { font-size: .82rem; color: var(--muted); margin-top: 8px; line-height: 1.7; } /* 導入の流れ: 時間軸上の5点 */ .flow { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: step; display: grid; gap: 0; } .flow li { counter-increment: step; position: relative; padding: 0 0 28px 48px; } .flow li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--cyan-ink); color: var(--cyan-ink); font-weight: 600; font-size: .95rem; display: flex; align-items: center; justify-content: center; background: var(--white); } .flow li::after { content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 0; width: 1px; background: var(--rule); } .flow li:last-child::after { display: none; } .flow h3 { font-size: 1.15rem; margin: 2px 0 6px; } .flow p { margin: 0; font-size: .95rem; max-width: 30em; } @media (min-width: 900px) { .flow { grid-template-columns: repeat(5, 1fr); gap: 24px; } .flow li { padding: 52px 0 0; } .flow li::before { top: 0; } .flow li::after { left: 40px; right: -24px; top: 16px; bottom: auto; width: auto; height: 1px; } } /* 価格 */ .price-record { margin: 24px 0 0; border-top: 1px solid var(--rule); max-width: 52em; } .price-row { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); } @media (min-width: 700px) { .price-row { grid-template-columns: 12em 1fr; gap: 24px; align-items: baseline; } } .price-row dt { color: var(--muted); font-weight: 500; } .price-row dd { margin: 0; } .price { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; letter-spacing: .02em; } .tax { margin-left: .3em; } /* デモ CTA 帯 */ .demo-band { background: var(--navy); color: var(--white); padding: 64px 0; border-top: 3px solid var(--signal); } .demo-grid { display: grid; gap: 28px; align-items: center; } @media (min-width: 900px) { .demo-grid { grid-template-columns: 1.2fr 1fr; gap: 56px; } .demo-band { padding: 88px 0; } } .demo-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.95rem); margin-bottom: 14px; } .demo-band p { color: var(--navy-text); max-width: 34em; } .demo-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } @media (min-width: 600px) { .demo-actions { align-items: flex-start; } } /* FAQ */ .faq { border-top: 1px solid var(--rule); margin-top: 24px; } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { cursor: pointer; list-style: none; min-height: 56px; padding: 14px 40px 14px 0; position: relative; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "＋"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--cyan-ink); font-family: var(--sans); } .faq details[open] summary::after { content: "−"; } .faq details p { padding: 0 0 18px; margin: 0; max-width: 42em; } /* 運営会社 */ .company-grid { display: grid; gap: 32px; margin-top: 24px; } @media (min-width: 1024px) { .company-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } } .company-text p { max-width: 36em; } .ph { display: inline-block; border: 1px dashed var(--muted); padding: 2px 8px; border-radius: var(--radius); color: var(--muted); font-size: .9rem; } .ph-block { border: 1px dashed var(--muted); padding: 10px 14px; border-radius: var(--radius); color: var(--muted); font-size: .9rem; } .ph-dark { border-color: var(--navy-text); color: var(--navy-text); } /* フッター */ .site-footer { background: var(--navy); color: var(--white); padding: 56px 0 96px; font-size: .9rem; } @media (min-width: 1200px) { .site-footer { padding-bottom: 32px; } } .footer-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; } } .footer-name { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; } .footer-about p { color: var(--navy-text); max-width: 40em; } .footer-about .footer-name { color: var(--white); } .footer-dl { margin: 16px 0; display: grid; gap: 0; border-top: 1px solid rgba(185,203,221,.25); } .footer-dl div { display: grid; grid-template-columns: 10em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(185,203,221,.25); } .footer-dl dt { color: var(--navy-text); } .footer-dl dd { margin: 0; } .footer-note { font-size: .82rem; } .footer-note .ph { margin-top: 6px; font-size: .8rem; } .footer-head { font-family: var(--serif); font-weight: 700; margin-bottom: 8px; } .footer-nav ul { list-style: none; margin: 0; padding: 0; } .footer-nav a { color: var(--white); text-decoration: none; display: flex; align-items: center; min-height: 44px; } .footer-nav a:hover { text-decoration: underline; } .footer-pending { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .footer-pending .ph { font-size: .82rem; } .footer-bottom { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(185,203,221,.25); color: var(--navy-text); font-size: .8rem; } .site-footer :focus-visible { outline-color: var(--signal); } /* スマホの追従ボタン */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(15,45,78,.97); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(185,203,221,.3); } .sticky-cta { transition: transform .2s ease, visibility .2s; } .sticky-cta.is-hidden { transform: translateY(110%); visibility: hidden; } .sticky-cta { display: flex; gap: 8px; } .sticky-cta .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; } .sticky-cta .btn-signal { flex-grow: 1.6; } @media (min-width: 1200px) { .sticky-cta { display: none; } } /* ===== ここからテンプレート化で追加（2026-10-11 JST） ===== */ /* フッターのサイトマップ（build.py が出す