/* ============================================================ 富山県倫理法人会 v2.1 デザインスキン（コンポーネント層） 原則: コンテンツ・構成・順序は v1 と完全同一。見た目のみ刷新。 コンセプト: R9マーク「Happy Companies 1000」の旗 ＝ 10単会のカラーリボンを全体のアクセントに。 ワイド・大胆・現代的 × 明朝の品格。 ★ 色・書体・文字サイズ・余白・モーションの「値」はここに書かない。 すべて tokens.css（自動生成）の CSS変数を参照する。 デザイン変更 → src/design/tokens.json を編集 → npm run design ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} /* 🔴 スマホメニューは閉じているあいだ画面の右外に置いてある（transform で逃がしている）。 そのぶん横に伸びた扱いになり、375px 以下の端末で指がわずかに横へ動いた （2026/8/27 実測。scrollWidth 404 に対し画面 375）。 overflow-x:clip なら横だけを止められる。hidden にするとスクロールの箱が生まれて ヘッダーの position:sticky が効かなくなるので使わないこと。 */ html{scroll-behavior:smooth;overflow-x:clip} body{ font-family:var(--font-sans); color:var(--ink);background:#fff; line-height:1.9;letter-spacing:.02em; -webkit-font-smoothing:antialiased; font-weight:400;font-size:var(--fs-body); } .serif{font-family:var(--font-serif)} a{color:inherit;text-decoration:none;transition:opacity .25s ease,color .25s ease,transform var(--dur) ease,box-shadow var(--dur) ease} img{max-width:100%;height:auto;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad)} /* リボン（単会カラーの帯） */ .ribbon{height:var(--rib-h);background:var(--ribbon)} /* ---------- 見出しの型 ---------- */ .sec{padding:var(--sec-pad) 0} .sec-head{margin-bottom:64px} .sec-head .en{font-size:15px;letter-spacing:.38em;color:var(--gold);margin-bottom:16px;font-weight:500} .sec-head h2{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h2);letter-spacing:.08em;line-height:1.5} .sec-head .bar{width:72px;height:4px;background:var(--ribbon);margin-top:22px} .sec-head.center{text-align:center} .sec-head.center .bar{margin-left:auto;margin-right:auto} .sec-head.split{display:flex;align-items:flex-end;justify-content:space-between} .more-link{font-size:15.5px;letter-spacing:.14em;padding-bottom:8px;border-bottom:2px solid var(--gold);color:var(--ink)} .more-link:hover{color:var(--gold-deep)} /* ---------- ふわっと現れる（控えめ） ---------- */ .rv{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--reveal-dur) var(--ease),transform var(--reveal-dur) var(--ease)} .rv.on{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}} /* ---------- ヘッダー ---------- */ .hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)} /* 🔴 backdrop-filter を .hd に付けると、position:fixed の基準（包含ブロック）が .hd 自身になり、 ヘッダーの中に置いたスマホメニュー（.hd-drawer / .hd-scrim）が高さ64pxの帯の中に 閉じ込められて画面に出てこない。2026/8/19 に実際に踏んだ。 メニューを出すのは1230px以下だけなので、ぼかしは1231px以上に限定する。 背景は rgba(255,255,255,.96) でほぼ不透明なので、狭い画面で消えても見た目は変わらない。 */ @media(min-width:1231px){.hd{backdrop-filter:blur(12px)}} .hd-in{max-width:1560px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;height:92px} .hd-logo{flex:none} .hd-logo img{width:252px;height:auto} .hd-right{display:flex;align-items:center;gap:30px;min-width:0} .hd-nav{display:flex;gap:26px;white-space:nowrap} .hd-nav a{font-size:15px;letter-spacing:.04em;color:var(--ink);position:relative;padding:8px 0;white-space:nowrap;font-weight:500} .hd-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--ribbon);transition:right .35s ease} .hd-nav a:hover::after{right:0} .hd-contact{display:flex;align-items:center;gap:18px;flex:none} .hd-tel{text-align:right;line-height:1.45;white-space:nowrap} .hd-tel .cap{font-size:10.5px;letter-spacing:.04em;color:var(--muted)} .hd-tel .num{font-size:19px;letter-spacing:.04em;color:var(--navy);font-weight:700} .hd-btn{background:var(--navy);color:#fff;font-size:14.5px;letter-spacing:.08em;padding:14px 26px;white-space:nowrap;transition:background var(--dur) ease} .hd-btn:hover{background:var(--navy-2)} /* 🔴 ヘッダーは右端の「お問い合わせ」まで必ず収まること。 幅が足りなくなる順に、電話番号 → 余白 → 文字 → ロゴ の順で詰めていき、 詰め切れない幅はハンバーガーへ渡す。2026/8/27 に 1231〜1430px と 1431〜1560px の 2つの帯でお問い合わせボタンが画面の外へ出ていた（後者は電話番号が復活する側）。 必要な幅は実測で 全部出して1564px ／ 電話番号なしで1451px ／ 詰めて1207px。 数字を変えたら 1231 / 1330 / 1470 / 1471 / 1600 / 1601 / 1920px を実機幅で見ること。 */ @media(max-width:1600px){.hd-tel{display:none}} @media(max-width:1470px){ .hd-in{padding:0 24px;gap:16px} .hd-right{gap:20px} .hd-nav{gap:16px} .hd-nav a{font-size:14px} .hd-logo img{width:228px} } @media(max-width:1330px){ .hd-nav{gap:11px} .hd-nav a{font-size:13.5px;letter-spacing:0} .hd-logo img{width:210px} .hd-btn{padding:14px 18px;font-size:13.5px} } @media(max-width:1230px){.hd-nav{display:none}} @media(max-width:640px){ .hd-in{padding:0 14px;height:64px;gap:10px} .hd-logo img{width:178px} .hd-btn{padding:9px 12px;font-size:12px;letter-spacing:.04em} } /* ---------- ヘッダーのメニュー（スマホ・タブレット） ---------- */ /* HTMLの正本は src/design/partials/header.html。 🔴 JavaScript を使わない。開閉はチェックボックス（.hd-toggle）だけで動く。 固定ページ19枚へスクリプトを配る仕組みを増やすと、必ずどこか1枚で漏れて 「そのページだけメニューが開かない」という気づきにくい事故になるため。 🔴 開閉は兄弟結合子（~）で効かせている。header の中の並び順 （.hd-in → .hd-toggle → .hd-burger → .hd-scrim → .hd-drawer）を変えると全部止まる。 ハンバーガーは .hd の中で絶対配置。そのぶん .hd-in に右余白を取って重なりを防ぐ。 */ .hd{--hd-h:92px} .hd-toggle{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0} .hd-burger{display:none;position:absolute;top:0;right:10px;width:46px;height:var(--hd-h); flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;z-index:100} .hd-burger span{display:block;width:26px;height:2px;background:var(--navy); transition:transform .3s var(--ease),opacity .2s ease} .hd-toggle:checked ~ .hd-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} .hd-toggle:checked ~ .hd-burger span:nth-child(2){opacity:0} .hd-toggle:checked ~ .hd-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .hd-toggle:focus-visible ~ .hd-burger{outline:2px solid var(--gold);outline-offset:-6px} .hd-scrim{display:none;position:fixed;left:0;right:0;top:var(--hd-h);bottom:0;background:rgba(8,14,30,.45); opacity:0;visibility:hidden;transition:opacity var(--dur) ease,visibility var(--dur);z-index:98} .hd-toggle:checked ~ .hd-scrim{opacity:1;visibility:visible} .hd-drawer{display:none;position:fixed;top:var(--hd-h);right:0;bottom:0;width:min(360px,86vw); background:#fff;border-left:1px solid var(--line);box-shadow:-14px 0 44px rgba(14,26,51,.18); overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden; transform:translateX(100%);transition:transform .32s var(--ease),visibility .32s;z-index:99} .hd-toggle:checked ~ .hd-drawer{transform:none;visibility:visible} .hd-drawer-in{padding:22px 22px 60px} .hd-dbtn{display:block;background:var(--navy);color:#fff;text-align:center; font-size:14.5px;letter-spacing:.08em;padding:14px 10px} .hd-dbtn:hover{background:var(--navy-2)} .hd-dtel{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0 4px;line-height:1.35} .hd-dtel .cap{font-size:11px;letter-spacing:.04em;color:var(--muted)} .hd-dtel .num{font-size:21px;letter-spacing:.04em;color:var(--navy);font-weight:700} .hd-dttl{margin-top:26px;padding-bottom:8px;border-bottom:2px solid var(--gold); font-size:12px;letter-spacing:.24em;color:var(--gold-deep);font-weight:500} .hd-dnav{margin-top:6px;list-style:none;padding:0} .hd-dnav li{border-bottom:1px solid var(--line)} .hd-dnav a{display:block;padding:15px 26px 15px 2px;font-size:15px;letter-spacing:.04em; color:var(--ink);position:relative;line-height:1.5} .hd-dnav a::after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px; margin-top:-4px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold); transform:rotate(45deg)} .hd-dnav a:hover{color:var(--gold-deep)} .hd-dunits a{font-size:14.5px} @media (prefers-reduced-motion: reduce){ .hd-drawer,.hd-scrim,.hd-burger span{transition:none} } @media(max-width:1230px){ .hd-burger{display:flex} .hd-scrim,.hd-drawer{display:block} .hd-in{padding-right:70px} } @media(max-width:640px){ .hd{--hd-h:64px} /* 🔴 狭い画面でも「お問い合わせ」への入口は残す（2026/8/28 指摘）。 文字を置くと375px幅で溢れるので、検索の虫めがねと同じように封筒だけにする。 文字は font-size:0 で見えなくするだけ＝読み上げには「お問い合わせ」と伝わる。 */ .hd-contact{display:flex;gap:0} .hd-btn{font-size:0;letter-spacing:0;padding:0;width:44px;height:36px; display:flex;align-items:center;justify-content:center} .hd-btn .icon{font-size:15px} .hd-in{padding-left:14px;padding-right:58px} .hd-burger{right:6px;width:44px} } /* 🔴 320px幅（iPhone SE や「文字を大きく」設定の端末）でヘッダーが 42px はみ出し、 ハンバーガーが画面の外に出てメニューを開けなくなっていた（2026/8/29 実測）。 ロゴとボタンを一段小さくして収める。必要幅は 10+158+8+(36+8+40)+52＝312px。 */ @media(max-width:374px){ .hd-in{padding-left:10px;padding-right:52px;gap:8px} .hd-logo img{width:158px} .hd-right{gap:8px} .sx-hd-btn{width:36px;height:34px} .hd-btn{width:40px;height:34px} .hd-burger{right:4px;width:42px} } /* ---------- 1. ヒーロー（カルーセル）— 全幅・大胆 ---------- */ .hero{position:relative;height:min(94vh,900px);min-height:600px;overflow:hidden;background:var(--navy)} .hero .slide{position:absolute;inset:0;opacity:0;transition:opacity var(--hero-fade) ease} .hero .slide.act{opacity:1} .hero .slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform var(--hero-zoom) linear} .hero .slide.act .bg{transform:scale(1)} .hero .ov{position:absolute;inset:0;background:linear-gradient(70deg,rgba(8,14,30,.74) 0%,rgba(8,14,30,.36) 48%,rgba(8,14,30,.05) 100%)} .hero-cap{position:absolute;left:0;right:0;bottom:0;padding:0 0 96px} .hero-cap .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad);color:#fff} .hero-cap .kick{display:flex;align-items:center;gap:16px;font-size:15px;letter-spacing:.34em;color:var(--gold);margin-bottom:24px;font-weight:500} .hero-cap .kick::before{content:"";width:56px;height:2px;background:var(--gold)} .hero-cap .cap{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-hero);line-height:1.5;letter-spacing:.06em;text-shadow:0 2px 28px rgba(0,0,0,.4)} .hero-rib{position:absolute;left:0;right:0;bottom:0;height:var(--rib-h);background:var(--ribbon)} .hero-dots{position:absolute;right:var(--wrap-pad);bottom:44px;display:flex;gap:12px} .hero-dots button{width:44px;height:3px;background:rgba(255,255,255,.35);border:0;cursor:pointer;transition:background var(--dur)} .hero-dots button.act{background:var(--gold)} /* 🔴 スマホのヒーロー（2026/8/29 指摘） スライド写真は 1000×420 の横長。縦長のスマホで PC と同じに画面の高さいっぱい （94vh・最低600px）へ cover で敷くと、幅390pxの端末で写真の横が2割しか出ず、 何の写真か分からないまま左右が切れる。 スマホでは「写真の帯」＋「紺の見出し帯」に組み替えて、写真の横をなるべく残す。 ・写真の帯 = --hero-pic（画面幅に対する比。ここだけ変えれば切れ方を調整できる） ・見出し帯 = --hero-txt（文字が3行になっても収まる高さ。スライドで高さが跳ねないよう固定） 🔴 スライドは重ねて（position:absolute）フェードさせているので .hero には必ず高さが要る。 height:auto にすると全部つぶれる。 */ @media(max-width:640px){ .hero{--hero-pic:58vw;--hero-txt:196px; height:calc(var(--hero-pic) + var(--hero-txt));min-height:0} .hero .slide .bg,.hero .slide.act .bg{bottom:auto;height:var(--hero-pic);transform:none} .hero .ov{bottom:auto;height:var(--hero-pic); background:linear-gradient(180deg,rgba(8,14,30,.04) 0%,rgba(8,14,30,.30) 100%)} .hero-cap{top:var(--hero-pic);display:flex;align-items:center; padding:14px 0 40px;background:var(--navy)} .hero-cap .in{width:100%} .hero-cap .kick{gap:10px;font-size:11px;letter-spacing:.2em;margin-bottom:10px} .hero-cap .kick::before{width:26px} .hero-cap .cap{line-height:1.5;text-shadow:none} .hero-dots{left:0;right:0;bottom:18px;justify-content:center;gap:10px} .hero-dots button{width:30px} } /* 375px以上なら、いちばん長い見出しでも2行に収まる（実測: 361pxで103px）。 帯を詰めて紺の余白を減らす。374px以下は3行になる（実測139px）ので上の196pxのまま。 */ @media(min-width:375px) and (max-width:640px){ .hero{--hero-txt:176px} } /* ---------- 2. 紹介文（R9マーク主役） ＋ 動画 ---------- */ .intro{background:var(--paper);padding:var(--sec-pad) 0} /* 🔴 旗の欄は固定幅にしない（2026/8/29）。460px 固定だと、画面が中くらいのとき 右のテキスト欄だけが痩せて（1101px で 439px）スローガンが割れる。 旗も一緒に縮めれば、2段組のまま狭い画面まで持たせられる。 */ .intro .cols{display:grid;grid-template-columns:clamp(220px,34%,460px) minmax(0,1fr); gap:clamp(40px,6vw,90px);align-items:center;margin-bottom:90px} .intro .mark img{width:100%;max-width:460px} /* 🔴 折り返しは「画面の幅」ではなく「テキスト欄の実寸」で決める（罠33と同じ理屈）。 画面幅で決めていたので、2段組の右カラムだけが狭い 1101〜1279px と、 1段組の 641〜727px で「家庭に愛」「を」と割れていた（2026/8/29 指摘）。 テキスト欄をコンテナにして、そこに入らなくなったら3行へ倒す。 */ .intro .cols>div:last-child{container-type:inline-size} .intro .slogan{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-slogan);letter-spacing:.1em;line-height:1.9;color:var(--navy);margin-bottom:30px} .intro .slogan .br-sp{display:none} /* 2行のかたち（「職場に心を　家庭に愛を」）に要る幅は 14.3em。入らなければ3行にする */ @container (max-width:640px){ .intro .slogan .br-sp{display:inline} .intro .slogan .gap-sp{display:none} } /* 3行のかたちでも、いちばん長い「「企業に倫理を」（7.7em）が欄に収まる字の大きさに抑える */ @supports (container-type:inline-size){ .intro .slogan{font-size:min(var(--fs-slogan),13cqi)} } /* 幅を測れない古いブラウザは、はみ出す側ではなく折り返す側へ倒す（罠33と同じ） */ @supports not (container-type:inline-size){ .intro .slogan .br-sp{display:inline} .intro .slogan .gap-sp{display:none} } .intro .body{font-size:var(--fs-lead);color:var(--ink-soft);line-height:2.3;font-weight:400;max-width:640px} .intro .video{max-width:1080px;margin:0 auto;background:#000;box-shadow:0 34px 90px rgba(14,26,51,.22)} .intro .video .frame{position:relative;padding-top:56.25%} .intro .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- 3. EVENT イベント情報 ---------- */ /* 🔴 minmax(380px,…) をそのまま書くと、幅375pxのスマホで枠が53pxはみ出す（2026/8/29 実測）。 html{overflow-x:clip} のせいで横スクロールバーも出ず、ただ切れて見えるだけなので気づけない。 min(380px,100%) にして、画面が狭いときは画面幅まで縮ませる。 */ .event .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:34px} .event a{display:block;overflow:hidden;border:1px solid var(--line);transition:box-shadow .35s ease,transform .35s ease} .event a:hover{box-shadow:0 22px 54px rgba(14,26,51,.16);transform:translateY(-6px)} .event img{width:100%} /* ---------- 4. セミナー予定表バナー ---------- */ .notice{padding-top:0} .notice .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px} .notice a{display:block;border:1px solid var(--line);transition:box-shadow .35s ease,transform .35s ease} .notice a:hover{box-shadow:0 22px 54px rgba(14,26,51,.16);transform:translateY(-6px)} /* ---------- 5. 月間予定表への導線（全幅の帯） ---------- */ .band{position:relative;background:var(--navy);color:#fff;text-align:center;padding:100px 0 104px} .band::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--rib-h);background:var(--ribbon)} .band .k{font-size:14.5px;letter-spacing:.36em;color:var(--gold);margin-bottom:20px;font-weight:500} .band h2{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-band-h2);letter-spacing:.1em;margin-bottom:38px} .btn-gold{display:inline-block;background:var(--gold);color:#1c1508;padding:22px 64px;font-size:16.5px;letter-spacing:.14em;font-weight:700;transition:background var(--dur) ease,transform var(--dur) ease} .btn-gold:hover{background:var(--gold-hover);transform:translateY(-2px)} /* ---------- 6. ナビカード（大胆に高く） ---------- */ .navcards .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px} .navcard{position:relative;display:block;overflow:hidden;height:340px} .navcard .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s var(--ease)} .navcard:hover .ph{transform:scale(1.07)} .navcard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,32,.04) 34%,rgba(10,16,32,.68) 100%)} .navcard .lb{position:absolute;left:32px;bottom:28px;color:#fff;font-family:var(--font-serif);font-size:var(--fs-navcard);letter-spacing:.14em;font-weight:600;display:flex;align-items:center;gap:14px} .navcard .lb::after{content:"→";font-family:var(--font-sans);font-size:17px;color:var(--gold);transition:transform var(--dur)} .navcard:hover .lb::after{transform:translateX(6px)} /* ---------- 7. セミナースケジュール ＋ 単会（カラー全開） ---------- */ .sched{background:var(--paper)} .sched .cols{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start} .sched .legend{display:flex;flex-wrap:wrap;gap:10px 30px;font-size:15.5px;color:var(--muted);margin-bottom:28px} .sched .legend .icon{color:var(--gold-deep);margin-right:8px} .sched .cal-card{background:#fff;border:1px solid var(--line);padding:38px} .units2 h3{font-family:var(--font-serif);font-size:24px;letter-spacing:.12em;font-weight:600;margin-bottom:18px} .units2 h3 a:hover{color:var(--gold-deep)} .units2 .u{position:relative;display:flex;align-items:center;background:var(--uc,var(--navy));color:#fff;font-size:17.5px;font-weight:700;letter-spacing:.06em;padding:19px 24px;margin-bottom:10px;overflow:hidden} .units2 .u::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(255,255,255,.35)} .units2 .u .txt{display:flex;flex-direction:column;gap:3px;min-width:0} .units2 .u .note{font-size:12px;font-weight:500;letter-spacing:.03em;opacity:.88} .units2 .u .ar{margin-left:auto;font-size:15px;opacity:.85;transition:transform var(--dur)} .units2 .u:hover{transform:translateX(6px);box-shadow:0 10px 26px rgba(14,26,51,.22)} .units2 .u:hover .ar{transform:translateX(4px)} /* 倫理研究所ロゴ: 白カード化して少し浮かせる（他の白カードと同じ演出）。 ホバーは自然に持ち上げ＋影を深める（opacityの平坦なフェードは廃止）。 PNGは白背景(アルファ無)なので白地では white×white=white で溶けず、multiplyは縁のアンチエイリアスのみ整える。 */ .units2 .research{display:block;margin-top:30px;padding:24px 26px;text-align:center; background:#fff;border:1px solid var(--line);border-radius:10px; box-shadow:0 6px 22px rgba(14,26,51,.08); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .units2 .research img{margin-inline:auto;mix-blend-mode:multiply} .units2 .research:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,26,51,.16)} /* カレンダー中身（既存マークアップへの化粧のみ） */ .schedule-calendar .ul-calendar-month{display:flex;align-items:center;justify-content:center;gap:38px;list-style:none;margin-bottom:26px;font-family:var(--font-serif)} .schedule-calendar .ul-calendar-month li{font-size:17.5px;letter-spacing:.08em} .schedule-calendar .ul-calendar-month li span{font-size:36px;color:var(--navy);margin:0 3px;font-weight:600} .schedule-calendar #cal_prev,.schedule-calendar #cal_next{cursor:pointer;color:var(--muted);font-size:13px;letter-spacing:.06em} .schedule-calendar #cal_prev:hover,.schedule-calendar #cal_next:hover{color:var(--gold-deep)} .tbl-calendar{width:100%;border-collapse:collapse;font-size:14.5px} .tbl-calendar td{border:1px solid var(--line);padding:8px 9px;vertical-align:top;line-height:1.75} .tbl-calendar thead td{background:var(--navy);color:#fff;text-align:center;font-size:13.5px;letter-spacing:.16em;padding:10px 4px;border-color:var(--navy)} .tbl-calendar .icon{color:var(--gold-deep)} .tbl-calendar a:hover{color:var(--gold-deep)} .schedule-calendar .sp-version{display:none} @media(max-width:760px){ .schedule-calendar .pc-version{display:none} .schedule-calendar .sp-version{display:block;list-style:none} .ul-calendar.sp-version>li{list-style:none} .ul-calenader-date{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 2px;border-bottom:1px solid var(--line)} .ul-calenader-date>li{list-style:none} .ul-calenader-date>li:first-child{font-family:var(--font-serif);font-weight:600;font-size:16px;color:var(--navy);min-width:52px} .ul-calenader-date>li:first-child span{font-size:11px;color:var(--muted);margin-left:3px} .ul-calenader-date [class*="schedule-type-"]{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:3px} /* 🔴 単会ごとの色は tokens.css が当てている（.sp-version .color-type-N）。 ここで同じ強さの指定を書くと、あとから読まれるこちらが勝って全部が紺一色になる （2026/8/27 まで実際にそうなっていて「暗い」と指摘を受けた）。 :where() で強さを0にして、色が当たらなかったときだけ効く保険にする。 */ :where(.ul-calenader-date) [class*="schedule-type-"]{background:var(--navy)} .ul-calenader-date [class*="schedule-type-"] a{color:#fff} .ul-calenader-date [class*="schedule-type-"] .icon{font-size:12px;color:rgba(255,255,255,.9)} /* 単会別チップ色（.color-type-N）は tokens.css で自動生成 */ .sched .cal-card{padding:20px 16px} } /* 写真の無い記事の受け皿（render_core.mjs の thumbNone）。 単会色をごく薄く敷き、会のマークをカラーのまま置いて、下に単会色の帯を入れる。 画像が無いことを事故に見せない。 🔴 クラスを2回書いて詳細度を上げてある（.thumb-none.thumb-none）。 ただの .thumb-none だと、あとから読まれる同じ強さの .post-card figure（background-size:cover）に 負けて、マークが枠いっぱいに引き伸ばされ旗が切れて出る（2026/8/29 小矢部市の記事で発生）。 規則の置き場所を下へ動かすだけの対策では、次に規則を足したときにまた同じ事故になる。 🔴 濃い地に細線のロゴを置かないこと。2026/8/29 に一度「単会色べた塗り＋白抜きマーク」に したが、白い細線と小さな文字が沈んで何のマークか読めず「変」と指摘を受けた。 薄い地＋カラーのマークなら、10単会どの色でもロゴがそのまま読める。 🔴 マークは小さくしすぎない（枠の高さの約7割）。小さいと広い無地の中で迷子に見える。 🔴 r9-mark-t.png は「1000」の0の内側が白で埋まっていた（2026/8/31 指摘）。 旗の隙間だけ透過されていて、囲まれた内側（0・a・p・o・漢字の中）が白のまま残る 背景抜きの取りこぼし。薄い地に置いて初めて白い楕円として見えるので、 白地のトップページでは気づけない。→ 無彩色かつ完全不透明の画素だけを 白地からアンマット（alpha = 1 - 輝度/255・色は黒）して修正済み。 色のついた画素（旗・星・ポール）と元から半透明の画素は1つも触っていないことを検算済み。 素材は同じフォルダの r9-mark-raw.png（0は正しく抜けているが文字が眠い）。 🔴 直したのに「まだ白い」と言われたら、それはブラウザのキャッシュ。 画像は `cache-control: max-age=14400`（4時間）で配られるので、直前に見た人には 最大4時間ふるいものが出続ける。→ **URLの末尾に `?v=YYYYMMDD` を付けて別物にする**。 画像を差し替えたら、この日付も必ず一緒に上げること（参照は site.css・index.html・ index-v2.html・prefecture.html・v2/index.html・src/design/pages/index.html の6か所）。 🔴 height:100% は span のときだけ。figure（トップの .post-card）に効かせると .post-card figure の height:250px を追い越し、カードの高さいっぱいに伸びる （グリッドの行に合わせて 425px になった）。 */ .thumb-none.thumb-none{display:block;width:100%;min-height:120px; background-color:#fff; /* color-mix が使えないブラウザ用の下地 */ background-color:color-mix(in srgb, var(--uc,var(--navy)) 14%, #fff); background-image:url('/assets-v2/img/r9-mark-t.png?v=20260831'); background-repeat:no-repeat;background-position:center;background-size:auto 72%; border-bottom:4px solid var(--uc,var(--navy)); opacity:1} span.thumb-none.thumb-none{height:100%} .list__img .thumb-none.thumb-none{min-height:150px} /* 小さい枠（記事ページ右の新着5件・88×64px）。 🔴 min-height:120px を効かせたままだと 64px の枠を突き抜け、 枠側が overflow:hidden なのでマークが切れる（2026/8/29 実測）。 */ .latest-content .image .thumb-none.thumb-none{min-height:0;background-size:auto 78%;border-bottom-width:3px} /* ---------- 8. BLOG 最新情報（単会カラーはっきり） ---------- */ .blogsec .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 40px} .post-card{display:block;position:relative} .post-card figure{height:250px;background-size:cover;background-position:center;overflow:hidden;position:relative;border-bottom:4px solid var(--c,var(--navy))} .post-card figure::after{content:"";position:absolute;inset:0;background:rgba(14,26,51,0);transition:background .35s} .post-card:hover figure::after{background:rgba(14,26,51,.15)} .post-card .meta{display:flex;align-items:center;gap:16px;margin:20px 0 12px} .post-card .cat{font-size:13.5px;letter-spacing:.08em;font-weight:700;color:#fff;padding:6px 16px;background:var(--c,var(--navy))} .post-card time{font-size:14.5px;letter-spacing:.08em;color:var(--muted)} .post-card h3{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-post-title);line-height:1.85;letter-spacing:.03em;transition:color var(--dur)} .post-card:hover h3{color:var(--gold-deep)} /* ---------- 9. フッター ---------- */ .ft{position:relative;background:var(--navy);color:rgba(255,255,255,.78)} .ft::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--rib-h);background:var(--ribbon)} /* 🔴 列は minmax(0,…) にすること。ただの 1fr だと『いちばん長いリンクの幅』が下限になり、 画面が狭いとフッターが枠からはみ出して左の余白が消える（2026/8/28 指摘）。 「モーニングセミナー月間予定表」を足したときに顕在化した。 */ .ft-top{display:grid;grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr);gap:64px;padding:90px 0 60px} .ft .lnk a{overflow-wrap:anywhere} .ft-brand .nm{font-family:var(--font-serif);color:#fff;font-size:27px;letter-spacing:.14em;font-weight:600;margin-bottom:22px} .ft-brand p{font-size:15.5px;line-height:2.2;font-weight:300} .ft-brand .btn-gold{margin-top:30px;padding:16px 40px;font-size:14px} .ft h4{color:var(--gold);font-size:13.5px;letter-spacing:.26em;margin-bottom:22px;font-weight:500} .ft .lnk a{display:block;font-size:15.5px;color:rgba(255,255,255,.78);margin-bottom:14px} .ft .lnk a:hover{color:#fff} .ft-copy{border-top:1px solid rgba(255,255,255,.14);padding:26px 0;text-align:center;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.45)} .to-top{position:fixed;right:30px;bottom:30px;width:52px;height:52px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s;z-index:90} .to-top.on{opacity:1;pointer-events:auto} /* ---------- レスポンシブ（最小限） ---------- */ @media(max-width:1100px){ .sched .cols{grid-template-columns:1fr} .ft-top{grid-template-columns:1fr minmax(0,1fr);gap:44px 40px} .navcards .grid,.blogsec .grid{grid-template-columns:1fr 1fr} } /* 旗とスローガンを縦に積むのは、2段組が本当に苦しくなってから（2026/8/29 に 1100→820px）。 1100px で積むと、まだ横に置ける幅なのに旗だけが真ん中で浮いて間延びして見える。 */ @media(max-width:820px){ .intro .cols{grid-template-columns:minmax(0,1fr);gap:44px} .intro .mark img{max-width:360px;margin:0 auto} /* 🔴 縦に積んだときは旗とスローガンを中央にそろえる（2026/8/29 指摘）。 旗だけ真ん中で、スローガンが左に寄っていてちぐはぐに見えていた。 🔴 このとき行頭の字下げ（ind-sp）は外すこと。あれは左そろえのときに 2行目の「職」を1行目の「企」の位置へ合わせるためのもので、 中央そろえでは2行目だけが右へずれて見える。 本文は中央そろえにしない。日本語の長文を1行ずつ中央にそろえると 両端がぎざぎざになって読みにくいため、かたまりだけ中央に置いて中は左のまま。 */ .intro .slogan{text-align:center} .intro .slogan .ind-sp{display:none} .intro .body{margin-inline:auto} } @media(max-width:640px){ .wrap{padding:0 var(--wrap-pad-sp)} .hero-cap .cap{font-size:var(--fs-hero-sp)} .hero-cap .in{padding:0 var(--wrap-pad-sp)} .sec-head h2{font-size:var(--fs-h2-sp)} .intro .slogan{font-size:var(--fs-slogan-sp);letter-spacing:.06em} .intro .slogan .br-sp{display:inline} .intro .slogan .gap-sp{display:none} .notice .grid,.navcards .grid,.blogsec .grid{grid-template-columns:1fr} .ft-top{grid-template-columns:1fr;gap:40px} .sec{padding:var(--sec-pad-sp) 0} .band h2{font-size:var(--fs-band-h2-sp)} .navcard{height:240px} } /* ============================================================ 下層ページ共通スキン（ブログ一覧・記事・固定・単会） 本文マークアップは v1 のまま（内容・構成・順序を変えない）。 ここで v2 の見た目（紺×金×明朝・リボン）を上から当てる。 ============================================================ */ #content{overflow:hidden} .lower-wrap{max-width:1180px;margin:0 auto;padding:0 40px} /* ページタイトル帯（.top-title / .top-title-cityXX） */ [class*="top-title"]{position:relative;background:var(--navy);color:#fff;text-align:center; padding:72px 24px 66px;font-family:var(--font-serif);font-weight:600;font-size:34px;letter-spacing:.14em;line-height:1.4} [class*="top-title"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--rib-h);background:var(--ribbon)} [class*="top-title"] .top-en,[class*="top-title"] .top_en{display:block;font-family:"Jost","Lato",sans-serif; font-size:13px;letter-spacing:.34em;color:var(--gold);margin-top:14px;font-weight:500;text-transform:uppercase} [class*="top-title"] img{display:inline-block} /* 歴代会長: v2でimgがdisplay:blockのため、text-align:centerが効かず左寄せになる。写真を列内で中央寄せ */ .leaders_photos img{margin-inline:auto} /* パンくず */ .bread-crumb{background:var(--paper);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)} .bread-crumb .container,.bread-crumb .lower-wrap{max-width:1180px;margin:0 auto;padding:14px 40px;letter-spacing:.04em} .bread-crumb a{color:var(--muted)} .bread-crumb a:hover{color:var(--gold-deep)} .bread-crumb .pnkz{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .bread-crumb .pnkz__item{display:flex;align-items:center} .bread-crumb .pnkz__item:not(:last-child)::after{content:"›";margin-left:6px;color:#b7bcc7} .bread-crumb .pnkz__item.current span{color:var(--ink)} /* 一覧: カテゴリタブ */ .main{max-width:1180px;margin:0 auto;padding:64px 40px 110px} /* カテゴリタブ = 単会カラーのベタ塗りブロックを等幅グリッドで整列（トップ・サイドバーと同じ言語） */ .list_categories ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:56px} .list_categories li{--uc:var(--navy)} .list_categories li a{position:relative;display:flex;align-items:center;justify-content:center;text-align:center; min-height:56px;padding:8px 10px;background:var(--uc);color:#fff;font-size:13.5px;font-weight:700; letter-spacing:.02em;line-height:1.45;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,opacity .3s} .list_categories li a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:rgba(255,255,255,.35)} .list_categories li a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(14,26,51,.22)} .list_categories li a.current{box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 8px 20px rgba(14,26,51,.2)} @media(max-width:1000px){.list_categories ul{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){ .list_categories ul{grid-template-columns:repeat(2,1fr);gap:8px} .list_categories li a{font-size:12px;min-height:50px;padding:6px 6px} } /* 一覧: カード */ .list__wrap{max-width:1180px;margin:0 auto} .list{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px} .list__item{background:#fff;box-shadow:0 6px 22px rgba(14,26,51,.08);transition:transform .35s ease,box-shadow .35s ease} .list__item:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(14,26,51,.16);opacity:1} .list__item a{display:block} .list__img{width:100%;height:210px;overflow:hidden} .list__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .list__item:hover .list__img img{transform:scale(1.06)} .list__detail{padding:26px 22px 30px;position:relative} .list__meta{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:14px} .list__cate{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:5px 13px;white-space:nowrap} .list__date{font-family:"Jost","Lato",sans-serif;font-size:13px;letter-spacing:.06em;color:var(--muted)} .list__ttl{font-family:var(--font-serif);font-size:17px;font-weight:500;line-height:1.75;letter-spacing:.02em;color:var(--ink)} /* ページネーション */ .pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:80px} .pagination__list{list-style:none;display:flex;gap:8px} .pagination__item a,.pagination__item span{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px; border:1px solid var(--line);font-family:"Jost","Lato",sans-serif;font-size:15px;color:var(--ink);background:#fff;transition:.3s} .pagination__item a:hover{border-color:var(--gold);color:var(--gold-deep)} .pagination__item.is-current span{background:var(--navy);color:#fff;border-color:var(--navy)} .pagination__item--prev a,.pagination__item--next a{display:inline-block;padding:11px 22px;border:1px solid var(--navy); color:var(--navy);font-size:14px;letter-spacing:.08em;transition:.3s} .pagination__item--prev a:hover,.pagination__item--next a:hover{background:var(--navy);color:#fff} /* ---------- 記事詳細 ---------- */ .page{max-width:1180px;margin:0 auto;padding:70px 40px 110px;display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start} .page__main{min-width:0} .page__meta{display:flex;align-items:center;gap:16px;margin-bottom:22px} .page__date time{font-family:"Jost","Lato",sans-serif;font-size:14px;letter-spacing:.06em;color:var(--muted)} .page__cate a{display:inline-block;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;padding:5px 14px;letter-spacing:.04em} .page__ttl{font-family:var(--font-serif);font-weight:600;font-size:30px;line-height:1.5;letter-spacing:.04em;color:var(--navy); padding-bottom:26px;margin-bottom:34px;border-bottom:2px solid var(--line);position:relative} .page__ttl::after{content:"";position:absolute;left:0;bottom:-2px;width:88px;height:2px;background:var(--ribbon)} .page__eye-catch{margin:0 0 36px} .page__eye-catch img{width:100%;height:auto} .page__detail{font-size:16px;line-height:2.15;color:var(--ink)} .page__detail .block{margin-bottom:34px} .page__detail .main-txt{font-size:16px;line-height:2.15} .page__detail .main-txt p{margin-bottom:20px} .page__detail .main-txt a{color:var(--gold-deep);border-bottom:1px solid var(--gold)} .page__detail h2{font-family:var(--font-serif);font-size:22px;color:var(--navy);border-left:5px solid var(--gold); padding-left:14px;margin:40px 0 18px;line-height:1.5} .page__detail h3{font-family:var(--font-serif);font-size:18px;color:var(--navy);margin:32px 0 14px} .page__detail strong,.page__detail b{font-weight:700} .page__detail ul,.page__detail ol{margin:0 0 22px 1.4em} .page__detail li{margin-bottom:8px} .page__detail blockquote{border-left:4px solid var(--line);padding:6px 0 6px 20px;color:var(--muted);margin:0 0 22px} .page__detail img{max-width:100%;height:auto;margin:10px 0} .contents_img01{margin:0 0 30px} .contents_img01 img{width:100%;height:auto;object-fit:cover} /* prev/next */ .pagination.list-p{margin-top:0} .page__main .pagination{margin-top:64px;justify-content:space-between} .pagination__top a{display:inline-block;padding:11px 30px;background:var(--gold);color:#1c1508;font-weight:700;font-size:14px;letter-spacing:.1em;transition:.3s} .pagination__top a:hover{background:var(--gold-hover)} /* ---------- 記事サイドバー ---------- */ .sidemenu{font-size:14px} .sidemenu .s-title{font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--navy);letter-spacing:.08em; padding-bottom:12px;margin-bottom:20px;border-bottom:2px solid var(--line);position:relative} .sidemenu .s-title::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:var(--ribbon)} .sidemenu>div{margin-bottom:46px} .sidemenu .menu-list{list-style:none} .latest-content .menu-item{margin-bottom:16px} .latest-content .menu-item a{display:flex;gap:14px;align-items:flex-start} .latest-content .image{width:88px;height:64px;flex:none;overflow:hidden} .latest-content .image img{width:100%;height:100%;object-fit:cover} .latest-content .list-txt{min-width:0} .latest-content .ttl{font-family:var(--font-serif);font-size:14px;font-weight:500;line-height:1.6;color:var(--ink); display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .latest-content .cate{font-size:11.5px;color:var(--muted);margin-top:5px} .latest-content .menu-item a:hover .ttl{color:var(--gold-deep)} .cate-content .menu-item,.archive-content .menu-item{border-bottom:1px solid var(--line)} .content-meta{display:block;padding:11px 4px;color:var(--ink);letter-spacing:.03em;transition:color .3s} .content-meta:hover{color:var(--gold-deep)} /* ---------- 固定・単会ページ本文 ---------- */ .main-content{max-width:1180px;margin:0 auto;padding:74px 40px 110px;display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start} .main-content>.left-content,.main-content>.right-content{min-width:0} .main-content .left-content{font-size:16px;line-height:2.05} /* サイドバーを持たない固定ページは1カラム */ .main-content:not(:has(.sidemenu)):not(:has(.right-content)){display:block} .left-content h2,.part-1 h2,.part-2 h2,.part-3 h2,.part-4 h2,.left-content .part-ttl{font-family:var(--font-serif);font-size:24px;color:var(--navy); letter-spacing:.06em;margin:44px 0 20px;padding-bottom:14px;border-bottom:2px solid var(--line);position:relative} .left-content h2::after,.part-1 h2::after,.part-2 h2::after,.part-3 h2::after,.part-4 h2::after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:2px;background:var(--ribbon)} .left-content h3,.part-1 h3,.part-2 h3,.part-3 h3{font-family:var(--font-serif);font-size:19px;color:var(--navy);margin:30px 0 12px} /* 固定ページ本文の各種見出しクラス（元サイトの独自クラス）を v2見出しに */ .text_ttl,.intro-title,.page-link-ttl,.beginner_place_title,.schedule_title{ font-family:var(--font-serif);font-weight:600;font-size:23px;color:var(--navy);letter-spacing:.06em;line-height:1.5; margin:46px 0 20px;padding-bottom:14px;border-bottom:2px solid var(--line);position:relative} .text_ttl:first-child,.intro-title:first-child{margin-top:0} .text_ttl::after,.intro-title::after,.page-link-ttl::after,.beginner_place_title::after,.schedule_title::after{ content:"";position:absolute;left:0;bottom:-2px;width:72px;height:2px;background:var(--ribbon)} .beginner_title_catch{font-family:var(--font-serif);font-weight:600;font-size:28px;color:var(--navy);line-height:1.6;letter-spacing:.04em;margin:8px 0 24px} /* 会長あいさつの本文。2026/8/30 に広報委員会から届いた原稿で全単会が3〜5倍の長さになり、 「文字サイズも既存HPのように少し小さくしても大丈夫です」とご要望をいただいた。 旧サイトは p.intro-text が 14px、v2 の本文は 16px。あいだを取って 15px にしてある （もっと小さくするならここの1行だけを変える）。行間も本文より少しだけ詰める。 */ .intro-text{margin-bottom:20px;font-size:15px;line-height:1.95} /* 🔴 会長あいさつ（.part-1）は写真ブロック .left-pic が float:left。 あいさつ文が写真より短いと、フロートが .part-1 からはみ出して 次の「最新セミナーお知らせ」に会長名が重なる（R9で文章が短くなり表面化）。 flow-root で .part-1 にフロートを含ませる（overflow:hidden と違い何も切れない）。 */ .part-1{display:flow-root} /* 会長写真の下の「役職・氏名」。旧サイトのCSSに行間・余白の指定が無く、 本文用の line-height 2.05 と margin 20px がそのまま効いて間延びしていた。 役職と氏名は一組なので近づけ、写真との間だけ空ける。 ※ float:left・幅235px の本体指定は legacy.css 側にある。 build_legacy_css.mjs の除外リストに left-pic / job / name を入れて守っている。 ※ 下の .left-content p,.part-1 p{margin-bottom:20px} と同じ詳細度だと後勝ちで負けるので、 .part-1 を前置して詳細度を上げてある。 */ .part-1 .left-pic p{margin:0;line-height:1.45} .part-1 .left-pic p img{margin-bottom:14px} .part-1 .left-pic .job{font-size:16px} .part-1 .left-pic .name{margin-top:2px;line-height:1.35} /* 年間スローガンのテーマ箱 — 生成り地のプレート（B案）。 単会カラー(--tk)はスローガン下の短い一本線のみに使用。色枠・背景色・リボンは持たせない。 ※旧markupのinline border-colorはborder-style:noneのため不活性（枠は出ない） */ .tankai_toyama{--tk:#22AC38} .tankai_takaoka{--tk:#8FC31F} .tankai_chuo{--tk:#E61673} .tankai_oyabe{--tk:#7E318E} .tankai_imizu{--tk:#EE7800} .tankai_niikawa{--tk:#00A0E9} .tankai_tonamino{--tk:#0E3192} .tankai_toyamanishi{--tk:#DEAF29} .tankai_toyamaken{--tk:#C74344} .tankai_theme{ --c:var(--tk,var(--navy)); margin:0 0 34px;padding:42px 38px 40px;border-radius:10px; font-family:var(--font-serif);font-weight:600;font-size:28px;line-height:1.55; letter-spacing:.06em;color:var(--navy);text-align:center; background:var(--paper); box-shadow:0 2px 12px rgba(14,26,51,.05); } /* 見出しラベル「年間スローガン」 */ .tankai_theme::before{content:"年間スローガン";display:block; font-family:var(--font-sans);font-size:11.5px;font-weight:700; letter-spacing:.36em;text-indent:.36em;color:var(--gold-deep);margin:0 0 22px} /* スローガン下の単会カラー短線 */ .tankai_theme::after{content:"";display:block;width:52px;height:2px; background:var(--c);border-radius:1px;margin:22px auto 0} /* 年間スローガンは、どの画面幅でも1行に収める（2026/8/28 指摘・これで2回目）。 長さが単会でまるで違う（小矢部市「愛」=1文字 〜 となみ野=22文字）ので、 画面幅だけで字の大きさを決めると必ずどこかで折り返す。 囲みの実寸（コンテナ幅）を基準に、その単会の文字数から字を決める。 --sl … スローガンの横幅（em換算・字間込み） --sl2 … 下段サブタイトルの横幅（県ページのみ） どちらも scripts/add_slogan_fit.mjs がページに焼き込む。文言を変えたら ビルドし直せば追従する（手で数える必要はない）。 🔴 .tankai_fit（囲みの外側の箱）が無いと 100cqi が効かない。 */ /* 🔴 nowrap と字の縮小は「囲みの幅が測れる」ブラウザだけで行う。 測れないまま nowrap にすると、字が縮まないので画面の外へ切れていく （2026/8/26 に富山市西で実際にやった）。古いブラウザは折り返す側に倒す。 */ /* 既定（幅を測れないブラウザ用）＝折り返してよい・元の改行も活かす。 単会ページ側の