/* 異業種交流会サイト — 共通CSS 2026-08-22 ★方針（Hikârư「今までを覆すUI」「でもSEOに特化」） ・この分野の既存サイトは「イベントの一覧が縦に延々と並ぶ」形しかない（実測）。 ・覆す＝★水平線でセクションを切らない（斜め断面・世界60サイト実査の技法2） ★ナビが情報地図になる（メガメニュー・技法3） ★見出しが段階的に完成する（キネティックタイポ・技法1） ・SEOを殺さない＝★テキストはHTMLに置いたまま、見せ方だけ動かす ★JSが無くても全部読める */ :root{ --ink:#14161c; /* 文字 */ --ink-2:#4a5160; /* 補助 */ --line:#dfe3ea; --bg:#ffffff; --bg-2:#f5f7fa; --accent:#1b4a5c; /* ★青緑。この分野の定番（青・オレンジ）を外す */ --accent-2:#c8663a; /* 差し色 */ --warn:#8a5a12; --ok:#1f6b46; --maxw:1080px; --radius:14px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;color:var(--ink);background:var(--bg); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif; font-size:16.5px;line-height:1.95; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto} a{color:var(--accent);text-underline-offset:.22em} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} /* ── ヘッダー・ナビ（★メガメニュー＝ナビが情報地図）───────── */ .hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .hd .wrap{display:flex;align-items:center;gap:14px;height:62px} .logo{font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--ink); text-decoration:none;white-space:nowrap} .logo span{color:var(--accent)} /* 🚨★2026-08-22 実測で直した：ナビが2段（110px）になっていた。 項目の合計は868px、使える幅は905pxで★入るはずだった。 原因は .hd .wrap が display:flex で、★.nav が flex-shrink の既定値1で縮められ navW=660px に潰されていたこと（★項目が足りないのではなくナビの箱が狭かった）。 → flex-shrink:0 で箱を縮ませない。★souseikiri でヘッダーの箱が 幅を占領していた事件と同じ形（原因の向きだけ逆）。 */ /* ★padding:0 / margin は自分で書く。ul の既定（padding-left:40px）が効いて ナビが40px押し出され、幅がぎりぎりになっていた（実測 navW 873 → 833）。 */ .nav{display:flex;gap:2px;margin:0 0 0 auto;padding:0;flex-wrap:wrap;flex-shrink:0} .nav>li{list-style:none;position:relative} .nav>li>a{display:block;padding:9px 10px;font-size:13.5px;color:var(--ink-2); text-decoration:none;border-radius:8px} .nav>li>a:hover,.nav>li:focus-within>a{color:var(--ink);background:var(--bg-2)} /* ★メガメニュー：ロングテールをそのまま載せる場所 */ .mega{position:absolute;left:0;top:100%;min-width:280px;background:#fff; border:1px solid var(--line);border-radius:12px;padding:10px; box-shadow:0 18px 40px rgba(20,22,28,.10); display:none;grid-template-columns:1fr;gap:2px} .nav>li:hover .mega,.nav>li:focus-within .mega{display:grid} /* ★右端の項目は、メガメニューが画面外へ出る（実測 right=1318 > 1280）→ 右寄せにする */ .nav>li:nth-last-child(-n+2) .mega{left:auto;right:0} .mega a{display:block;padding:7px 10px;font-size:13px;color:var(--ink-2); text-decoration:none;border-radius:7px;white-space:nowrap} .mega a:hover{background:var(--bg-2);color:var(--ink)} /* ── 主役（★斜め断面。水平線で切らない）──────────────── */ .hero{position:relative;padding:74px 0 96px;overflow:hidden; background:linear-gradient(160deg,#eef3f5 0%,#f7f9fb 46%,#fff 100%)} .hero::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-52px;height:120px; background:#fff;transform:rotate(-2.1deg)} .hero h1{font-size:clamp(27px,4.6vw,44px);line-height:1.42;margin:0 0 18px; font-weight:800;letter-spacing:.01em;position:relative;z-index:1} .hero h1 .b{color:var(--accent)} .lead{font-size:16px;color:var(--ink-2);max-width:44em;position:relative;z-index:1} /* ── アイキャッチ（★こころ作・記事の顔。説明図ではない）────── heroは overflow:hidden ＋ ::after の白い斜め帯があるので、 ★z-index:1 を付けないと帯に食われる（h1 と .lead と同じ扱い）。 */ .eyecatch{margin:6px 0 22px;position:relative;z-index:1} .eyecatch img{display:block;width:100%;height:auto; border-radius:var(--radius);border:1px solid var(--line)} /* ★見出しの演出 ── ★opacityを使わない 🚨★2026-08-22 実測で3回やり直した末の結論。 1回目 opacity:0 + forwards → アニメ非対応環境で★文字が消えたまま 2回目 both に変更 → ★2.2秒後も opacity:0（実測） 3回目 from を .15 に → ★それでも 0.15 のまま（アニメが再生されない環境がある） ★★ここで方針を変えた。 見出しは本文そのもの。★読めなくなる可能性のある演出は載せない。 → opacity は一切触らず、★下線が伸びる動きだけにする。 アニメが走らない環境でも、文字は最初から100%見えている。 ★「今までを覆すUI」は、文字を消すことではない。 */ .kt{display:inline} .kt .kt-add{ display:inline; background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-position:0 92%; background-size:0% 2px; animation:ktline .55s ease forwards; } .kt .kt-add:nth-of-type(1){animation-delay:.2s} .kt .kt-add:nth-of-type(2){animation-delay:.45s} .kt .kt-add:nth-of-type(3){animation-delay:.7s} .kt .kt-add:nth-of-type(4){animation-delay:.95s} @keyframes ktline{to{background-size:100% 2px}} @media (prefers-reduced-motion:reduce){ .kt .kt-add{animation:none;background-size:100% 2px} } /* ── 本文 ─────────────────────────────── */ main{padding:8px 0 60px} section{padding:34px 0;border-top:1px solid var(--line)} section:first-of-type{border-top:0} h2{font-size:clamp(19px,2.5vw,25px);line-height:1.55;margin:0 0 14px;font-weight:800; letter-spacing:.01em} h2::before{content:"";display:block;width:46px;height:4px;background:var(--accent); border-radius:2px;margin-bottom:12px} h3{font-size:17px;margin:26px 0 8px;font-weight:700;color:var(--ink)} /* ★1行が長いと目が戻れない。日本語は40〜50字で折り返す（実測1036px→約38em） 🚨★2026-08-22 ここでナビを壊していた。 セレクタを `p,ul,ol,blockquote` と書いたため、★ヘッダーの