/* ===== 共通UIの小修正（試作） ===== * 言語切替: ホバー中は閉じない。元CSSはホバーで開くが、ボタンとメニューの間に 6px の隙間があり、 * そこを横切る瞬間に :hover が外れて閉じていた。隙間を橋渡しし、閉じるのも少し遅らせる。 */ .lang-switcher::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px} .lang-dropdown{display:block !important;opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .15s ease,transform .15s ease,visibility 0s linear .3s} .lang-switcher:hover .lang-dropdown,.lang-switcher.open .lang-dropdown,.lang-switcher:focus-within .lang-dropdown{ opacity:1;visibility:visible;transform:none;transition-delay:0s} /* ヘッダ: 幅の狭い端末では中央の社名がロゴ/アイコンに重なる（元サイトの既存不具合）。480px以下では社名を隠しロゴだけにする */ @media(max-width:480px){.site-title-center{display:none}} /* 横スクロール（ページ幅の膨張）を根元で止める。膨張すると固定バナーの右端（同意ボタン）が画面外に出る */ /* 🔴 overflow-x:hidden は body を scroll container にして position:sticky（About の右パネル等）を壊す。clip なら壊さない */ html,body{overflow-x:clip} /* ===== 文字のはみ出し（全ページ監査 2026-09-16） ===== * 1) .text-box h2 の white-space:nowrap が原因で、英語の長い見出し（例: Where Security Meets Japanese Aesthetic）が * 枠の右へ突き抜ける。日本語でもスマホ幅では同じ。折り返しを許可する。 */ .text-box h2{white-space:normal;overflow-wrap:anywhere} /* 2) 背景の飾り文字（15vw/18vw・nowrap）が画面幅を越え、横スクロールの原因になる。親でクリップする */ .viewer-container,#fixed-viewer-container,.pillar-visual{overflow:hidden} /* 3) プライバシーポリシーの長いURLが折り返せず枠外へ（スマホ幅） */ .policy-block a,.policy-block li,.policy-block p{overflow-wrap:anywhere;word-break:break-word} /* ===== 見出し・キャッチコピーの改行位置 ===== */ /* 行数が最小になる範囲で各行の長さを揃え、最後の1語だけ孤立する折り返しを避ける */ h1,h2,h3,.hero-sub,.hero-subtitle,.sub,.pillar-label,.column-card-title,.pp-card-title,.pp-sec-title,.pp-hero-title,.contact-subtitle,.text-box p{text-wrap:balance} /* 意味のまとまり（句）は途中で折らない。まとまりの間でだけ折り返す */ .nb{white-space:nowrap} /* 幅の狭い端末では句の長さが行幅を超えるので、句の途中でも折り返しを許可（balance は効き続ける） */ @media(max-width:599px){.nb{white-space:normal}} /* 広い画面でだけ効く改行（文と文の間） */ .pp-br{display:none} @media(min-width:992px){.pp-br{display:inline}} /* ===== Global ページのダークモード補正（元CSSが #111/#444/#fff 直書き。ja/en/zh 共通） ===== */ [data-theme="dark"] .global-hero[data-astro-cid-7g45ctut]{background:var(--color-surface)} [data-theme="dark"] .hero-title[data-astro-cid-7g45ctut],[data-theme="dark"] .pillar-title[data-astro-cid-7g45ctut],[data-theme="dark"] .items-title[data-astro-cid-7g45ctut]{color:var(--color-text)} [data-theme="dark"] .hero-sub[data-astro-cid-7g45ctut],[data-theme="dark"] .items-desc[data-astro-cid-7g45ctut],[data-theme="dark"] .faq-panel[data-astro-cid-7g45ctut]{color:var(--color-text-muted)} [data-theme="dark"] .pillar-desc[data-astro-cid-7g45ctut]{color:var(--color-text)} [data-theme="dark"] .pillar-row[data-astro-cid-7g45ctut],[data-theme="dark"] .faq-item[data-astro-cid-7g45ctut],[data-theme="dark"] .support-table[data-astro-cid-7g45ctut] tr[data-astro-cid-7g45ctut]{border-bottom-color:var(--color-gray-border)} [data-theme="dark"] .pillar-visual[data-astro-cid-7g45ctut]{background:var(--color-surface-alt)} [data-theme="dark"] .pillar-bg-letter[data-astro-cid-7g45ctut]{color:rgba(255,255,255,.05)} [data-theme="dark"] .support-items-section[data-astro-cid-7g45ctut],[data-theme="dark"] .table-container[data-astro-cid-7g45ctut]{background:var(--color-surface);border-color:var(--color-gray-border)} [data-theme="dark"] .support-table[data-astro-cid-7g45ctut] tr[data-astro-cid-7g45ctut]:hover,[data-theme="dark"] .col-icon[data-astro-cid-7g45ctut]{background-color:var(--color-surface-alt)} [data-theme="dark"] .col-name[data-astro-cid-7g45ctut],[data-theme="dark"] .price-value[data-astro-cid-7g45ctut]{color:var(--color-text)} [data-theme="dark"] .pillar-label[data-astro-cid-7g45ctut]{color:#5aa0ff} /* ---- スマホ(<600px) 共通: Cookieバーを畳む・タップ領域を確保 ---- */ @media(max-width:599px){ #cookie-banner{padding:10px 14px 12px} #cookie-banner .cookie-inner{gap:8px} #cookie-banner .cookie-msg{font-size:.74rem;line-height:1.5;min-width:0} #cookie-banner .cookie-btns{width:100%;justify-content:flex-end} #cookie-banner .cbtn{padding:8px 16px;font-size:.78rem} .lang-trigger{min-height:40px;padding:6px 10px} .footer-menus a{display:inline-block;padding:8px 6px} .footer-copyright a{display:inline-block;padding:6px 4px} } /* ---- スクロール連動ページ(ND/Orbital/About)のスマホ: ダークで文字箱が白のまま=文字が消える ---- */ @media(max-width:991px){ [data-theme="dark"] .text-box{background:rgba(17,17,17,.9);box-shadow:0 -4px 20px rgba(0,0,0,.5)} } /* model-viewer の「指」プロンプトは全ページで出さない（スクロール連動の背景モデルに操作を促す意味が無い） */ model-viewer::part(interaction-prompt){display:none !important} @media(max-width:599px){ .text-box h2{font-size:1.55rem !important;line-height:1.35} /* 「防犯と美学の融合」が語の途中で折れない大きさ */ .text-box{padding:22px 20px} } /* About のスマホ: 「経歴年表」「専門領域」の見出し列(20%)が縦1文字ずつになり本文列を圧迫 → 見出しを上に積む */ @media(max-width:599px){ .about-founder-history-table tr,.about-founder-history-table th.about-head-col,.about-founder-history-table td.about-data-col{display:block;width:100%;box-sizing:border-box} .about-founder-history-table th.about-head-col{padding:10px 16px;border-bottom:none} .about-founder-history-table td.about-data-col{padding:0 16px 12px} .about-founder-history-table td.about-data-col .about-inner-history-table td{padding-left:0;padding-right:0} } /* スマホのスクロール連動ページ: 固定3D領域が100vhで画面中央にモデルが来て、下寄せの文字箱と重なる → 上58%に収める */ @media(max-width:991px){ .viewer-container{height:58vh !important;background:transparent !important} .viewer-container .viewer-bg-text{top:40%} } /* 記事ページのスマホ: 見出しが大きすぎて語の途中で折れる */ @media(max-width:599px){ .entry-content h2{font-size:1.45rem !important;line-height:1.4} .entry-content h3{font-size:1.2rem !important} article header h1{font-size:1.6rem !important;line-height:1.4} .section-title{font-size:1.7rem} } /* ---- ND「導入事例」: en/zh でスタイルが当たらない問題 ---- * これらの規則は ja のページのインライン