/* I‑S3 JP Home Visual Refresh — non‑destructive CSS 目的: 日本語トップ (/index.htm) の内容やHTML構造を変えずに、見た目だけを整える 使い方: このファイルを /css/jp-refresh.css などとして設置し、 に を 既存CSSの“後”に読み込む。 ※クラス未使用/異なる構造でも影響が出るよう、可能な限りタグセレクタ中心 + セーフティな補助クラス（.wrap, .btn 等）を提供。 */ :root{ /* カラーパレット（日本語サイトの雰囲気に合わせる） */ --bg:#ffffff; --ink:#0a1623; /* 本文色 */ --muted:#5c6b7a; /* サブテキスト */ --line:#e7edf3; /* 罫線 */ --brand-blue:#0b3b82; /* ロゴ系ブルー */ --brand-green:#8fd58a; /* ロゴ楕円のグリーン */ --accent:var(--brand-blue); } /* ベースタイポグラフィ */ html,body{background:var(--bg);color:var(--ink);line-height:1.7;margin:0;padding:0;} body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;} img{max-width:100%;height:auto;-webkit-user-drag:none;} /* リンク/強調 */ a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} strong,b{font-weight:700} /* レイアウトユーティリティ（任意で付与・非破壊） */ .wrap{max-width:1120px;margin:0 auto;padding:0 16px} .container{max-width:1120px;margin:0 auto;padding:16px} /* ヘッダー（タグ優先。既存構造に合わせて段階的強化） */ header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);z-index:100} header .wrap, header .container{display:flex;gap:12px;align-items:center;flex-wrap:wrap} /* ロゴ画像の一般ルール（ファイル名に logo を含む場合にも適用） */ a.logo img, img[src*="logo"]{height:44px;width:auto;display:block} /* ナビゲーションが nav 要素または .nav の場合 */ nav, .nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center} nav a, .nav a{padding:8px 10px;border-radius:10px} nav a:hover, .nav a:hover{background:#f2f6fb} /* ヒーロー帯（最上部の導入エリアがある場合） */ .hero, .jumbotron, section[aria-label~="hero"]{padding:52px 0;background:linear-gradient(180deg,#f5f9ff,#ffffff)} .hero h1, .jumbotron h1{margin:0 0 10px;font-size:clamp(28px,3.5vw,38px);line-height:1.2} .hero p, .jumbotron p{max-width:880px;color:var(--muted);font-size:18px} /* 見出し/セクション */ section{padding:26px 0;border-top:1px solid var(--line)} h1,h2,h3{color:#0b1525} h2{margin:0 0 12px;font-size:clamp(20px,2.4vw,26px)} /* カード（ボックス化されている要素に付与可能） */ .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} /* 折りたたみ（details/summaryを用いている場合） */ details{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;margin:10px 0} details>summary{cursor:pointer;font-weight:600;list-style:none} details>summary::-webkit-details-marker{display:none} /* ボタン風リンク（既存の a に .btn を任意で付けると適用） */ .btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:#fff} .btn.primary{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff} /* リストのインライン表示（パンくず・SNS等） */ ul.inline{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:6px 0} ul.inline>li{list-style:none} /* テーブルの読みやすさ向上（既存tableにそのまま適用） */ table{width:100%;border-collapse:collapse} th,td{border:1px solid var(--line);padding:8px 10px;vertical-align:top} th{background:#f7fbff;text-align:left} /* フッター */ footer{border-top:1px solid var(--line);padding:20px 0;color:var(--muted)} /* アンカー位置調整（固定ヘッダーの下に見出しが隠れないように） */ :target{scroll-margin-top:80px} /* 小画面向けの余白最適化 */ @media (max-width:480px){ header .wrap, header .container{padding:10px 12px} }