/* Theme Name: サバゲーいこうぜ（SWELL子テーマ） Template: swell Description: サバゲーフィールドの定例会情報。表示層。 Author: 株式会社unravel Version: 1.0.2 */ /* -------------------------------------------------------------------------- * SWELL との共存 * * SWELL は body_class をではなく #body_wrap に出力する。 * そのため打ち消しは body ではなく .sbg-page 側に書く。 * 実測した SWELL 2.17 の構造： * #body_wrap.sbg-page * #sp_menu.p-spMenu * #header.l-header * #fix_header.l-fixHeader * #content.l-content.l-container ← 幅と余白はここ * .sbg ← 独自テンプレートの出力 * #footer.l-footer * * 独自テンプレートの中身は .sbg 前置で閉じてあるので、親テーマの * 投稿用スタイルは流れ込まない。逆にこちらが親テーマの他画面を壊すこともない。 * -------------------------------------------------------------------------- */ /* 親テーマのヘッダー・フッター・SPメニューを独自画面では出さない */ .sbg-page #header, .sbg-page .l-header, .sbg-page #fix_header, .sbg-page .l-fixHeader, .sbg-page #sp_menu, .sbg-page .p-spMenu, .sbg-page .p-spMenu__overlay, .sbg-page #footer, .sbg-page .l-footer, .sbg-page .l-sidebar, .sbg-page #sidebar, .sbg-page .p-breadcrumb, .sbg-page .c-postTitle, .sbg-page .p-articleThumb{ display:none !important; } /* コンテンツ枠を全幅に戻す。カード状の余白・影・角丸を消す */ .sbg-page #content, .sbg-page .l-content, .sbg-page .l-container, .sbg-page .l-mainContent, .sbg-page .l-mainContent__inner, .sbg-page .w-main, .sbg-page .post_content{ max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; } .sbg-page{ padding-top:0 !important; background:#E9E7DC; } /* 親テーマの見出し装飾が独自テンプレートに乗らないようにする */ .sbg h1, .sbg h2, .sbg h3{ background:none;border:0;padding:0;margin:0; } .sbg h2::before, .sbg h2::after, .sbg h3::before, .sbg h3::after{ content:none; } /* 独自テンプレートの根 */ .sbg{ font-family:"Noto Sans JP","Noto Sans",system-ui,"Hiragino Sans","Yu Gothic",sans-serif; font-size:16px;line-height:1.7;color:#1A1E13; } .sbg *{ box-sizing:border-box; } :root{ --od:#3E4C36; --od-d:#28311F; --od-l:#6B7B5A; --coyote:#7A5730; --coyote-l:#C9A876; --orange:#B8440D; --orange-d:#8F3308; --ink:#15180F; --night:#12150E; --band:#1C2016; --paper:#E9E7DC; --card:#F4F2E9; --line:#C4C1B0; --line-d:#39402F; --text:#1A1E13; --sub:#4F5544; --on-d:#E9E7DC; --on-d2:#B6BAA6; --r:0px; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} .sbg-page{font-family:"Noto Sans JP","Noto Sans",system-ui,"Hiragino Sans","Yu Gothic",sans-serif; background:var(--paper);color:var(--text);font-size:16px;line-height:1.7; -webkit-font-smoothing:antialiased} .sbg .tnum{font-variant-numeric:tabular-nums} .sbg a{color:var(--od-d)} .sbg button{font:inherit;cursor:pointer} .sbg :focus-visible{outline:3px solid var(--orange);outline-offset:2px} .sbg .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sbg .skip{position:absolute;left:-9999px} .sbg .skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border:2px solid var(--orange)} .sbg .w{max-width:1240px;margin:0 auto;padding:0 28px} /* ── ヘッダー：極細の帯。ロゴは組み文字 ── */ .sbg .hd{background:var(--night);color:var(--on-d)} .sbg .hd__in{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:stretch;gap:0;flex-wrap:nowrap} .sbg .brand{display:flex;align-items:center;gap:9px;text-decoration:none;padding:15px 22px 15px 0; border-right:1px solid var(--line-d);margin-right:22px} .sbg .brand__m{width:26px;height:26px;flex:none} .sbg .brand__t{font-weight:700;font-size:19px;letter-spacing:.02em;color:#fff;line-height:1.2} .sbg .brand__t i{display:block;font-style:normal;font-size:10px;font-weight:400;letter-spacing:.32em; color:var(--coyote-l);margin-top:1px} .sbg .nav{display:flex;align-items:stretch;flex-wrap:wrap;min-width:0} .sbg .nav a{display:flex;align-items:center;padding:0 15px;color:var(--on-d2);text-decoration:none; font-size:14px;border-bottom:3px solid transparent;min-height:44px} .sbg .nav a:hover{color:#fff} .sbg .nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--coyote-l)} /* ── 見出し帯：数字を主役に、左に細い縦罫 ── */ .sbg .band{background:var(--band);color:var(--on-d);position:relative;overflow:hidden} .sbg .band::before{content:"";position:absolute;inset:0; background-image:repeating-linear-gradient(90deg,rgba(201,168,118,.10) 0 1px,transparent 1px 56px)} .sbg .band__in{max-width:1240px;margin:0 auto;padding:36px 28px 0;position:relative; display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end} .sbg .band h1{font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.22;letter-spacing:-.035em;color:#fff} .sbg .band h1 em{font-style:normal;color:var(--coyote-l)} .sbg .band p{margin-top:12px;max-width:62ch;color:var(--on-d2);font-size:14.5px;line-height:1.75; padding-left:14px;border-left:1px solid var(--line-d)} .sbg .band__in>div:first-child{padding-bottom:30px} .sbg .crumb{font-size:13px;color:var(--on-d2);margin-bottom:10px;letter-spacing:.02em} .sbg .crumb a{color:var(--on-d2)}.crumb a:hover{color:#fff} .sbg .tagline{font-size:11px;letter-spacing:.3em;color:var(--coyote-l);font-weight:500;margin-bottom:7px; display:inline-block;border-bottom:1px solid var(--coyote);padding-bottom:5px} /* 巨大な数値。ここが画面の重心 */ .sbg .bignum{text-align:right;white-space:nowrap} .sbg .bignum{padding-bottom:0} .sbg .bignum b{display:block;font-size:clamp(64px,10vw,124px);font-weight:700;color:#fff;letter-spacing:-.05em; font-variant-numeric:tabular-nums;margin-bottom:-14px} .sbg .bignum span{display:block;font-size:13px;color:var(--on-d2);padding:14px 0 20px;letter-spacing:.06em; border-top:1px solid var(--line-d)} .sbg .bignum i{font-style:normal;font-size:.36em;color:var(--coyote-l);margin-left:4px;letter-spacing:0} /* ── 目盛り：28日ボードを定規に見立てる ── */ .sbg .ruler{background:var(--band);padding-bottom:12px} .sbg .ruler__in{max-width:1240px;margin:0 auto;padding:0 28px} .sbg .ruler__hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; border-top:1px solid var(--line-d);padding-top:9px;margin-bottom:8px} .sbg .ruler__hd .lbl{font-size:11px;letter-spacing:.26em;color:var(--coyote-l);font-weight:500} .sbg .ruler__sel{font-size:13px;color:var(--on-d)} .sbg .ruler__sel b{color:var(--coyote-l)} .sbg .ruler__clear{background:none;border:1px solid var(--line-d);color:var(--on-d2);font-size:12px; padding:5px 11px} .sbg .ruler__clear:hover{border-color:var(--coyote-l);color:#fff} .sbg .rwrap{overflow-x:auto;min-width:0} .sbg .bars{display:flex;align-items:flex-end;gap:0;height:104px;min-width:640px; border-bottom:2px solid var(--coyote-l)} .sbg .bars button.w0{box-shadow:inset 1px 0 0 rgba(201,168,118,.55)} .sbg .bars button.w0::before{content:attr(data-md);position:absolute;top:-20px;left:2px;font-size:10px; color:var(--coyote-l);letter-spacing:.06em;white-space:nowrap} .sbg .bars button{flex:1;min-width:19px;background:transparent;border:0;padding:0 2px;position:relative; display:flex;align-items:flex-end;height:100%} .sbg .bars button i{display:block;width:100%;background:var(--od-l);min-height:3px} .sbg .bars button.we i{background:var(--coyote-l)} .sbg .bars button[aria-pressed="true"] i{background:var(--orange)} .sbg .bars button:hover i{background:#fff} .sbg .bars button em{position:absolute;top:-2px;left:0;right:0;text-align:center;font-style:normal; font-size:11px;color:var(--on-d2);font-variant-numeric:tabular-nums} .sbg .bars button.m1::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-d)} .sbg .bars button.now i{outline:1px solid var(--coyote-l);outline-offset:1px} .sbg .axis span.now{color:var(--coyote-l);font-weight:700} .sbg .bars button[aria-pressed="true"]::after{content:"";position:absolute;left:2px;right:2px;bottom:-6px; height:4px;background:var(--orange)} .sbg .axis{display:flex;min-width:620px;margin-top:5px} .sbg .axis span{flex:1;min-width:19px;text-align:center;font-size:11px;color:var(--on-d2)} /* ── 絞り込み ── */ .sbg .filter{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--ink)} .sbg .filter__bar{display:none} .sbg .ftoggle{background:var(--ink);color:var(--paper);border:0;font-size:14px;font-weight:700; padding:0 18px;min-height:44px;margin-left:auto} .sbg .ftoggle:hover{background:var(--orange)} .sbg .fsum{font-size:13px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .sbg .filter__in{max-width:1240px;margin:0 auto;padding:9px 28px;display:flex;gap:9px;align-items:center;flex-wrap:wrap} .sbg .seg{display:flex;border:1px solid var(--ink)} .sbg .seg button{background:transparent;border:0;padding:8px 15px;font-size:14px;color:var(--ink); border-right:1px solid var(--ink);min-height:42px} .sbg .seg button:last-child{border-right:0} .sbg .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:700} .sbg select, .sbg input[type=search]{padding:9px 11px;font-size:14px;border:1px solid var(--line);background:#fff; color:var(--text);min-height:42px;border-radius:0} .sbg input[type=search]{width:180px} .sbg .chk{display:inline-flex;align-items:center;gap:7px;font-size:14px;min-height:42px} .sbg .chk input{width:18px;height:18px} .sbg .count{margin-left:auto;font-size:14px;color:var(--sub);letter-spacing:.02em} .sbg .count b{font-size:22px;color:var(--ink);margin-right:3px;font-weight:700;font-variant-numeric:tabular-nums} .sbg .reset{background:none;border:1px solid var(--line);color:var(--sub);font-size:13px;padding:8px 12px;min-height:42px} .sbg .reset:hover{border-color:var(--ink);color:var(--ink)} /* ── セクション：番号を持つ。罫は右端まで走る ── */ .sbg main{padding-bottom:44px} .sbg .sec{margin-top:30px;min-width:0} .sbg .sec__hd{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap; border-top:3px solid var(--ink);padding-top:9px;margin-bottom:12px;position:relative} .sbg .sec__hd::after{content:"";position:absolute;top:-3px;left:0;width:60px;height:3px;background:var(--orange)} .sbg .sec__t{font-size:clamp(19px,2.1vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.35} .sbg .sec__s{font-size:13.5px;color:var(--sub);margin-left:auto;text-align:right;max-width:46ch;line-height:1.7} /* ── 一覧：箱をやめ、罫と通し番号で並べる ── */ .sbg .list{margin-top:6px;border-bottom:1px solid var(--line)} .sbg .row{display:grid;grid-template-columns:40px minmax(0,1fr) 236px 176px;gap:14px; padding:9px 0;border-top:1px solid var(--line);align-items:center} .sbg .row>*{min-width:0} .sbg .row{position:relative} .sbg .row::before{content:"";position:absolute;left:-14px;top:5px;bottom:5px;width:3px;background:transparent} .sbg .row:hover{background:#EFEDE2} .sbg .row:hover::before{background:var(--orange)} .sbg .row:nth-child(5n){border-bottom:1px solid var(--line)} .sbg .row__i{position:relative} .sbg .row__i{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;letter-spacing:.04em;padding-top:3px} .sbg .a{} .sbg .row__n{font-weight:700;font-size:16px;text-decoration:none;color:var(--text);letter-spacing:-.01em} .sbg .row__n:hover{color:var(--orange)} .sbg .row__m{font-size:12.5px;color:var(--sub);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sbg .row__m b{color:var(--od-d);font-weight:500;margin-right:8px} .sbg .row__km{font-variant-numeric:tabular-nums} .sbg .dates{display:flex;gap:5px;flex-wrap:wrap} .sbg .dchip{font-size:12.5px;border:1px solid var(--od-l);color:var(--od-d);padding:0 7px;white-space:nowrap; font-variant-numeric:tabular-nums} .sbg .dchip.we{background:var(--od);color:#fff;border-color:var(--od);font-weight:500} .sbg .nodata{font-size:13px;color:var(--sub)} .sbg .dmore{font-size:12.5px;color:var(--sub);align-self:center} .sbg .b{} .sbg .golink{font-size:13.5px;font-weight:700;color:#fff;background:var(--orange);text-decoration:none; display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;min-height:40px; border:1px solid var(--orange);white-space:nowrap} .sbg .golink::after{content:" ↗";font-size:12px;margin-left:5px} .sbg .golink:hover{background:var(--orange-d);border-color:var(--orange-d)} .sbg .note{font-size:13.5px;color:var(--sub);line-height:1.8;margin-top:14px; padding-left:16px;border-left:2px solid var(--line)} .sbg .empty{padding:44px 0;text-align:center;color:var(--sub);border-top:1px solid var(--line)} /* ── 県の密度：枠のない数値マトリクス ── */ .sbg .legend{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--sub);margin:10px 0 16px;flex-wrap:wrap} .sbg .legend i{width:30px;height:13px;display:block} .sbg .legend .bar{display:flex} .sbg .rblock{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px 0; border-top:1px solid var(--line)} .sbg .rblock:first-of-type{border-top:2px solid var(--ink)} .sbg .rblock h3{font-size:14px;font-weight:700;color:var(--ink);padding-top:8px;letter-spacing:.04em; border-right:1px solid var(--line)} .sbg .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;min-width:0} .sbg .pcell{display:flex;align-items:center;gap:6px;padding:8px 11px;font-size:14px;text-decoration:none;min-height:40px} .sbg .pcell b{font-weight:500} .sbg .pcell span{margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums;opacity:.9} .sbg .pcell:hover{outline:2px solid var(--orange);outline-offset:-2px} .sbg .lv0{background:#DEDCD1;color:#575C4B}.lv1{background:#E6E9D8;color:#3A4230} .sbg .lv2{background:#C3D0A6;color:#2B3320}.lv3{background:#98AA72;color:#1E2515} .sbg .lv4{background:#63763F;color:#fff}.lv5{background:#3E4C36;color:#fff} /* ── 数値の並び ── */ .sbg .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border-top:1px solid var(--line)} .sbg .figs div{padding:11px 16px;border-right:1px solid var(--line)} .sbg .figs div:first-child{padding-left:0} .sbg .figs div:last-child{border-right:0} .sbg .figs dt{font-size:12.5px;color:var(--sub)} .sbg .d{} .sbg .figs dd{font-size:26px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:-.03em} .sbg .figs dd small{font-size:13px;font-weight:400;color:var(--sub);margin-left:3px} /* ── 詳細：左に見出し、右に本体の吊り下げ組 ── */ .sbg .hang{display:grid;grid-template-columns:126px minmax(0,1fr);gap:14px;border-top:1px solid var(--line); padding:8px 0;align-items:baseline} .sbg .hang>dt{font-size:13.5px;color:var(--sub)} .sbg .hang>dd{font-size:15px} .sbg .strip{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-left:1px solid var(--line); border-top:1px solid var(--line)} .sbg .c{} .sbg .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 5px; text-align:center;min-height:62px;display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fff} .sbg .cell .d{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .sbg .cell .w{font-size:12px;color:var(--sub)} .sbg .cell .k{font-size:12px;line-height:1.35} .sbg .cell.on{background:var(--od);border-color:var(--od-d);color:#fff} .sbg .cell.on .w{color:#CBD2BC} .sbg .cell.pv{background:#D4B384;color:#2E2417} .sbg .cell.pv .w{color:#4A3B23} .sbg .cell.cl{background:#ADADA6;color:#24241D} .sbg .cell.cl .w{color:#3B3B34} .sbg .cell.we .d{color:var(--coyote)} .sbg .cell.on.we .d, .sbg .cell.pv.we .d, .sbg .cell.cl.we .d{color:inherit;text-decoration:underline;text-underline-offset:3px} .sbg .key{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--sub);margin-top:10px} .sbg .key i{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:5px} .sbg .dow{display:flex;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)} .sbg .dow div{flex:1;text-align:center;padding:12px 0 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .sbg .dow .bar{height:58px;display:flex;align-items:flex-end;justify-content:center} .sbg .dow .bar i{width:56%;background:var(--od-l);min-height:3px;display:block} .sbg .dow .bar i.we{background:var(--coyote)} .sbg .dow .w{font-size:13px;margin-top:7px;color:var(--sub)} .sbg .dow .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums} .sbg .chips{display:flex;flex-wrap:wrap;gap:0} .sbg .chip{font-size:14px;padding:7px 14px;border:1px solid var(--od);margin:0 -1px -1px 0;background:#fff;color:var(--od-d)} .sbg .chip.yes{background:var(--od);border-color:var(--od);color:#fff;font-weight:500} .sbg .chip.no{border-color:var(--line);color:var(--sub);background:transparent} .sbg .unk{font-size:13.5px;color:var(--sub);margin-top:12px} .sbg .cta{display:flex;flex-wrap:wrap;gap:0;align-items:center;margin-top:20px} .sbg .cta__go{background:var(--orange);color:#fff;text-decoration:none;font-weight:700;font-size:16px; padding:14px 28px;display:inline-flex;align-items:center;gap:8px} .sbg .cta__go:hover{background:var(--orange-d)} .sbg .cta__sub{margin-left:20px;font-size:14px} .sbg .cta__sub a{color:var(--coyote-l);text-decoration:underline;text-underline-offset:3px} .sbg .cta__sub a:hover{color:#fff} .sbg .cta__note{flex-basis:100%;font-size:12.5px;color:var(--on-d2);margin-top:10px} .sbg .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 30px} .sbg .two2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0 30px;align-items:start} .sbg .two2 .sec{margin-top:26px} .sbg .altday{border-top:1px solid var(--line)} .sbg .altday div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:11px 0; border-bottom:1px solid var(--line)} .sbg .altday b{font-variant-numeric:tabular-nums} .sbg .altday a{margin-right:14px} .sbg .links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0; border-top:1px solid var(--line);border-left:1px solid var(--line)} .sbg .links a{display:block;padding:11px 14px;text-decoration:none;color:var(--text); border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .sbg .links a:hover{background:#EFEDE2;color:var(--orange)} .sbg .links b{display:block;font-size:15px} .sbg .links span{display:block;font-size:13px;color:var(--sub);margin-top:2px} .sbg .near{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:0; border-top:1px solid var(--line);border-left:1px solid var(--line)} .sbg .near a{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;text-decoration:none; color:var(--text);border-right:1px solid var(--line);border-bottom:1px solid var(--line); font-size:14.5px;min-height:44px;align-items:center} .sbg .near a:hover{background:#EFEDE2} .sbg .near span{font-size:13px;color:var(--sub);white-space:nowrap} /* ── 読み物 ── */ .sbg .prefwrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;align-items:start} /* 帯の重なり対策：巨大数値は body の行間(1.7)を継承すると箱が2倍近くなる */ .sbg .bignum b{line-height:1.04} .sbg .bignum i{line-height:1} /* b の行box は伸縮するので、説明文は余裕を持たせて確実に離す */ .sbg .bignum span{margin-top:22px} /* .band p はパンくずにも当たってしまうので打ち消す */ .sbg .band .crumb{padding-left:0;border-left:0;max-height:none;margin-top:0;font-size:13px} @media(max-width:1000px){.sbg .prefwrap{grid-template-columns:1fr;gap:0}} .sbg .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 30px;align-items:start} .sbg .cols3 .sec{margin-top:26px} @media(max-width:1000px){.sbg .cols3{grid-template-columns:1fr;gap:0}} .sbg .terms2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;align-items:start} .sbg .terms2 .sec{margin-top:22px} @media(max-width:760px){.sbg .terms2{grid-template-columns:1fr;gap:0}} .sbg .prose{max-width:72ch;font-size:16px;line-height:1.8} .sbg .prose h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;margin:40px 0 10px;padding-top:12px; border-top:2px solid var(--ink);letter-spacing:-.02em;line-height:1.4} .sbg .prose h3{font-size:17px;margin:22px 0 6px} .sbg .prose p{margin:9px 0} .sbg .prose ul{margin:12px 0 12px 1.4em} .sbg .prose li{margin:6px 0} .sbg a.term{text-decoration:none;border-bottom:1px dashed var(--coyote);color:var(--od-d)} .sbg a.term:hover{border-bottom-style:solid;background:#E6E9D8} .sbg .kana{display:flex;flex-wrap:wrap;gap:0;border-left:1px solid var(--line);border-top:1px solid var(--line);margin-bottom:6px} .sbg .kana a{min-width:52px;min-height:46px;display:flex;align-items:center;justify-content:center; border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none; font-size:17px;font-weight:700;background:var(--card)} .sbg .kana a:hover{background:var(--ink);color:var(--paper)} .sbg .terms{border-top:1px solid var(--line)} .sbg .terms a{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:9px 0; border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)} .sbg .terms a:hover{background:#EFEDE2} .sbg .terms b{font-size:16px;line-height:1.5} .sbg .terms b i{font-style:normal;font-size:12.5px;color:var(--sub);font-weight:400;margin-left:7px} .sbg .terms span{font-size:13.5px;color:var(--sub);line-height:1.65} .sbg .taglist{display:flex;flex-wrap:wrap;gap:0} .sbg .taglist a{font-size:14px;padding:8px 13px;border:1px solid var(--line);margin:0 -1px -1px 0; text-decoration:none;background:var(--card)} .sbg .taglist a:hover{border-color:var(--coyote);position:relative} /* ── サークル ── */ .sbg .circ{border-top:1px solid var(--line)} .sbg .circ .crow{display:grid;grid-template-columns:46px minmax(0,1fr) 150px 170px;gap:16px;padding:14px 0; border-bottom:1px solid var(--line);align-items:center} .sbg .circ .crow:hover{background:#EFEDE2} .sbg .circ .cname{font-size:17px;letter-spacing:-.01em;text-decoration:none;color:var(--text);font-weight:700} .sbg .circ .cname:hover{color:var(--orange);text-decoration:underline} .sbg .cbtn{font-size:13.5px;font-weight:700;color:#fff;background:var(--orange);text-decoration:none; display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;min-height:40px; border:1px solid var(--orange);white-space:nowrap} .sbg .cbtn::after{content:" →";margin-left:5px;font-size:12px} .sbg .cbtn:hover{background:var(--orange-d);border-color:var(--orange-d)} .sbg .circ .i{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums} .sbg .circ b{font-size:17px;letter-spacing:-.01em} .sbg .circ p{font-size:13.5px;color:var(--sub);margin-top:2px} .sbg .circ .st{font-size:13px;text-align:right} .sbg .circ .st em{font-style:normal;background:var(--od);color:#fff;padding:2px 9px;font-weight:500} .sbg .circ .st em.off{background:transparent;color:var(--sub);border:1px solid var(--line)} .sbg .form{border-top:1px solid var(--line);max-width:720px} .sbg .form label{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:13px 0; border-bottom:1px solid var(--line);align-items:start;font-size:14.5px} .sbg .form label>span:first-child{color:var(--sub);padding-top:9px} .sbg .form label>span:first-child i{font-style:normal;color:var(--orange);font-size:12px;margin-left:5px} .sbg .form input, .sbg .form textarea, .sbg .form select{width:100%;padding:10px 12px;border:1px solid var(--line); font-size:15px;font-family:inherit;background:#fff} .sbg .form textarea{min-height:96px;line-height:1.7} .sbg .form .hint{font-size:12.5px;color:var(--sub);margin-top:5px;grid-column:2} .sbg .submit{background:var(--ink);color:var(--paper);border:0;padding:14px 34px;font-size:16px;font-weight:700;margin-top:20px} .sbg .submit:hover{background:var(--orange)} .sbg .note{border-left:4px solid var(--coyote);padding:13px 16px;background:var(--card);font-size:14px; color:var(--sub);margin-top:16px} .sbg .ft{background:var(--night);color:var(--on-d2);margin-top:38px} .sbg .ft__in{max-width:1240px;margin:0 auto;padding:20px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto; gap:20px;font-size:13.5px;align-items:end} .sbg .ft a{color:var(--on-d2);text-decoration:none;margin-right:20px;line-height:2} .sbg .ft a:hover{color:#fff;text-decoration:underline} .sbg .ft__c{text-align:right;font-size:12.5px;line-height:1.9} @media(max-width:1000px){ .sbg .band__in{grid-template-columns:1fr;gap:20px} .sbg .bignum{text-align:left} .sbg .bignum::before{width:56px} .sbg .sec__s{margin-left:0;text-align:left} .sbg .rblock{grid-template-columns:1fr;gap:6px} .sbg .two{gap:0} } @media(max-width:640px){ .sbg-page{font-size:15.5px;line-height:1.65} .sbg main{padding-bottom:30px} .sbg .sec{margin-top:24px} .sbg .two2 .sec, .sbg .cols3 .sec{margin-top:22px} .sbg .w, .sbg .hd__in, .sbg .band__in, .sbg .ruler__in, .sbg .filter__in, .sbg .ft__in{padding-left:16px;padding-right:16px} /* ヘッダー：ナビは1行の横スクロールにする。折り返すと3段になって画面を食う */ .sbg .hd__in{flex-wrap:nowrap;align-items:center} .sbg .brand{padding:11px 14px 11px 0;margin-right:14px;flex:none} .sbg .brand__t{font-size:16px}.sbg .brand__t i{font-size:9px;letter-spacing:.22em} .sbg .nav{overflow-x:auto;flex-wrap:nowrap;min-width:0;flex:1 1 0;-webkit-overflow-scrolling:touch;scrollbar-width:none} .sbg .nav::-webkit-scrollbar{display:none} .sbg .nav a{padding:0 11px;font-size:13.5px;white-space:nowrap} /* 帯：数字は見出しの下に回し、サイズを抑える */ .sbg .band__in{padding:16px 16px 14px} .sbg .band h1{font-size:25px;letter-spacing:-.035em;line-height:1.28} .sbg .band p{font-size:14px;margin-top:9px;padding-left:11px;line-height:1.7;max-height:6.9em;overflow:hidden} .sbg .bignum{display:flex;align-items:baseline;gap:12px} .sbg .bignum::before{display:none} .sbg .bignum b{font-size:44px;line-height:1} .sbg .bignum span{margin-top:0} .sbg .bignum::before{margin-bottom:10px} .sbg .bignum span{font-size:12.5px;margin-top:6px} /* 目盛り：指で押せる幅を確保しつつ横スクロール */ .sbg .bars, .sbg .axis{min-width:760px} .sbg .bars button{min-width:26px} .sbg .bars{height:54px} .sbg .ruler__hd{gap:10px;padding-top:12px} /* SP：固定するのは1行のサマリーだけ。本体は押したときに開く */ .sbg .filter__bar{display:flex;align-items:center;gap:10px;max-width:1240px;margin:0 auto; padding:0 16px;min-height:52px} .sbg .filter__bar .count{order:0;width:auto;flex:none;margin:0;font-size:14px} .sbg .filter__in{display:none} .sbg .filter__in.open{display:grid;border-top:1px solid var(--line)} .sbg .filter__in .count{display:none} /* 絞り込み：flex だと選択欄が潰れるのでグリッドで幅を確保する */ .sbg .filter__in.open{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px 16px;align-items:stretch} .sbg .count{grid-column:1/-1;order:-1;margin:0;font-size:13.5px} .sbg .count b{font-size:19px} .sbg .seg{grid-column:1/-1;width:100%} .sbg .seg button{flex:1;padding:10px 4px;font-size:13.5px;min-height:44px} /* iOS は 16px 未満の入力欄でフォーカス時に拡大するため 16px を下回らせない */ .sbg select, .sbg input[type=search]{width:100%;min-width:0;font-size:16px;min-height:46px; -webkit-appearance:none;appearance:none;background-image:none} .sbg input[type=search]{grid-column:1/-1} .sbg select{grid-column:span 1; background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%), linear-gradient(135deg,var(--sub) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px} .sbg select:only-of-type{grid-column:1/-1} .sbg .chk{grid-column:1/-1;min-height:44px} .sbg .reset{grid-column:1/-1;width:100%;min-height:44px} .sbg .filter__in .cbtn{grid-column:1/-1;width:100%;min-height:46px} /* 見出し */ .sbg .sec{margin-top:38px} .sbg .sec__t{font-size:20px} .sbg .sec__hd{gap:6px} .sbg .sec__s{font-size:13px} /* 一覧：積み上げ。番号は名前の前に小さく置く */ .sbg .row{grid-template-columns:minmax(0,1fr);gap:4px;padding:9px 0} .sbg .row>*{min-width:0} .sbg .row__i{display:none} .sbg .row__n{font-size:17px} .sbg .row::before{left:-8px} .sbg .dates{gap:4px} .sbg .dchip{font-size:12.5px;padding:2px 7px} .sbg .golink{font-size:14.5px;padding:10px 16px;width:100%} /* 県の密度：2列 */ .sbg .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px} .sbg .pcell{padding:7px 8px;font-size:13px;min-height:38px} .sbg .pcell span{font-size:11.5px} .sbg .rblock h3{padding-top:0;font-size:13px} /* 数値の並び：2列 */ .sbg .figs{grid-template-columns:repeat(2,1fr)} .sbg .figs div{padding:12px 12px 12px 0;border-bottom:1px solid var(--line)} .sbg .figs div:nth-child(2n){border-right:0} .sbg .figs dd{font-size:22px} .sbg .figs div{padding:9px 12px} .sbg .figs div:nth-child(odd){padding-left:0} /* 詳細 */ .sbg .strip{grid-template-columns:repeat(7,1fr)} .sbg .cell{min-height:52px;padding:5px 2px} .sbg .cell .d{font-size:13.5px}.sbg .cell .w{font-size:11px}.sbg .cell .k{font-size:10.5px;line-height:1.25} .sbg .key{gap:10px;font-size:12.5px} .sbg .hang{grid-template-columns:1fr;gap:1px;padding:8px 0} .sbg .hang>dt{font-size:12.5px} .sbg .cta{margin-top:16px} .sbg .cta__go{width:100%;justify-content:center;padding:15px 20px;font-size:16px} .sbg .cta__sub{margin:12px 0 0;width:100%} .sbg .dow .bar{height:46px} .sbg .dow div{padding:9px 0 7px} .sbg .chip{font-size:13.5px;padding:8px 12px} .sbg .links, .sbg .near{grid-template-columns:1fr} .sbg .altday div{grid-template-columns:1fr;gap:3px} /* 用語 */ .sbg .terms a{grid-template-columns:1fr;gap:2px;padding:10px 0} .sbg .terms b{font-size:15.5px}.sbg .terms span{font-size:13px} .sbg .kana a{min-width:44px;min-height:44px;font-size:16px} .sbg .prose{font-size:15.5px;line-height:1.75} .sbg .prose h2{font-size:18px;margin:22px 0 5px} .sbg .prose p{margin:8px 0} .sbg .prose ul{margin:8px 0 8px 1.3em} .sbg .prose li{margin:4px 0} /* サークル */ .sbg .circ .crow{grid-template-columns:1fr;gap:6px;padding:12px 0} .sbg .circ .i{display:none} .sbg .circ .st{text-align:left} .sbg .cbtn{width:100%} .sbg .circ .i{display:none} .sbg .circ .st{text-align:left} .sbg .form label{grid-template-columns:1fr;gap:5px} .sbg .form .hint{grid-column:1} .sbg .submit{width:100%} .sbg .ft__in{grid-template-columns:1fr;padding:18px 16px} .sbg .ft__c{text-align:left} .sbg .ft a{margin-right:16px;font-size:13.5px} } /* -------------------------------------------------------------------------- * スマホのグローバルナビ * ロゴが幅の半分を占め、ナビが2項目しか見えていなかった。 * ヘッダーを2段にしてナビに全幅を渡し、右端の影でスクロールできることを示す。 * -------------------------------------------------------------------------- */ @media(max-width:640px){ .sbg .hd__in{flex-wrap:wrap;padding:0 16px;position:relative} .sbg .brand{width:100%;border-right:0;margin-right:0;padding:9px 0 7px} .sbg .brand__t{font-size:16px} .sbg .brand__t i{font-size:8.5px;letter-spacing:.2em} .sbg .nav{width:100%;flex:0 0 100%;min-width:0; border-top:1px solid var(--line-d); overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-right:30px} .sbg .nav::-webkit-scrollbar{display:none} .sbg .nav a{padding:0 13px;font-size:14px;min-height:44px;white-space:nowrap} .sbg .nav a:first-child{padding-left:0} .sbg .hd__in::after{content:"";position:absolute;right:0;bottom:0; width:34px;height:44px;pointer-events:none; background:linear-gradient(90deg,rgba(18,21,14,0),#12150E 70%)} } /* -------------------------------------------------------------------------- * 一覧の行をカードにする * 名前のテキストだけがリンクで押しにくかった。行全体を押せるようにし、 * 右端に「詳細を見る →」を出す。外部リンク（公式ページで申し込む）は * 擬似要素より前面に置き、そちらを押したときは外部へ飛ぶようにする。 * -------------------------------------------------------------------------- */ .sbg .row{position:relative;cursor:pointer} .sbg .row:hover{background:#EFEDE2} .sbg .row__n.stretch::after{content:"";position:absolute;inset:0;z-index:1} .sbg .row .dates,.sbg .row .acts,.sbg .row .golink{position:relative;z-index:2} .sbg .row__go{font-size:13.5px;color:var(--od-d);text-decoration:none; border:1px solid var(--od-l);padding:8px 13px;white-space:nowrap; display:inline-flex;align-items:center;min-height:38px;background:#fff} .sbg .row__go::after{content:" →";margin-left:5px} .sbg .row__go:hover{background:var(--od);color:#fff;border-color:var(--od)} .sbg .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} @media(max-width:640px){ .sbg .acts{justify-content:flex-start} .sbg .row__go{width:100%;justify-content:center;min-height:44px} .sbg .golink{width:100%;justify-content:center} } /* -------------------------------------------------------------------------- * 行全体のリンクを取り消す * 押せる場所は「フィールド名」「詳細を見る」「公式ページで申し込む」の3つに限る。 * 行のどこを押しても飛ぶと、日付チップを触ったときに誤って遷移するため。 * -------------------------------------------------------------------------- */ .sbg .row{cursor:auto} .sbg .row__n.stretch::after, .sbg .row__n::after{content:none} /* -------------------------------------------------------------------------- * コラム一覧 * 新着順ではなく問いのかたまりで並べる。通し番号と罫線で、上から読む順序を示す。 * -------------------------------------------------------------------------- */ .sbg .clist{border-top:1px solid var(--line)} .sbg .crow2{display:grid;grid-template-columns:44px minmax(0,1fr) 52px;gap:14px; align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line); text-decoration:none;color:inherit} .sbg .crow2:hover{background:#EFEDE2} .sbg .crow2 .i{font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums} .sbg .crow2 .t b{display:block;font-size:16.5px;font-weight:700;color:var(--ink)} .sbg .crow2 .t b em{font-style:normal;font-size:11px;margin-left:8px;padding:2px 7px; background:var(--od);color:#fff;vertical-align:2px} .sbg .crow2 .t .d{display:block;font-size:13.5px;color:var(--sub);margin-top:4px;line-height:1.6} .sbg .crow2 .m{font-size:12.5px;color:var(--sub);text-align:right;font-variant-numeric:tabular-nums} .sbg .crow2.hub{background:#F3F1E7} .sbg .sec__t a{color:inherit;text-decoration:none;border-bottom:2px solid var(--od-l)} .sbg .sec__t a:hover{border-bottom-color:var(--orange)} @media(max-width:640px){ .sbg .crow2{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:13px 0} .sbg .crow2 .m{grid-column:2;text-align:left;margin-top:3px} } /* -------------------------------------------------------------------------- * 本文中の表 * 罫線と等幅の数字で読ませる。角丸や背景の塗りつぶしは使わない。 * サイト全体の作り（直角・罫線中心）に合わせる。 * -------------------------------------------------------------------------- */ .sbg .prose table{ width:100%;border-collapse:collapse;margin:22px 0 26px; font-size:14.5px;line-height:1.65; } .sbg .prose table th{ text-align:left;font-weight:700;font-size:12.5px;letter-spacing:.06em; color:var(--paper);background:var(--od); padding:9px 12px;border:1px solid var(--od);white-space:nowrap; } .sbg .prose table td{ padding:10px 12px;border:1px solid var(--line);vertical-align:top; color:var(--ink); } /* 1列目は見出し扱い。行の主語なので少し強くする */ .sbg .prose table td:first-child{ font-weight:700;white-space:nowrap;background:#F3F1E7; } .sbg .prose table tr:hover td{background:#EFEDE2} .sbg .prose table tr:hover td:first-child{background:#E9E7DC} .sbg .prose table td.num, .sbg .prose table td:last-child{font-variant-numeric:tabular-nums} @media(max-width:640px){ /* 横に溢れるより、1列目を折り返して縦に伸ばすほうが読める */ .sbg .prose table{font-size:14px;margin:18px 0 22px} .sbg .prose table th{padding:8px 10px;font-size:12px} .sbg .prose table td{padding:9px 10px} .sbg .prose table td:first-child{white-space:normal;width:38%} .sbg .prose table th{white-space:normal} } /* -------------------------------------------------------------------------- * 本文の見出し * 長い記事で章の切れ目が分かるようにする。 * セクション見出し（.sec__t）と同じ作法にそろえ、 * 上の太罫＋左だけオレンジ、という形を繰り返す。 * -------------------------------------------------------------------------- */ .sbg .prose h2{ position:relative; font-size:clamp(19px,2.1vw,23px);font-weight:700;line-height:1.45; color:var(--ink); margin:46px 0 16px;padding:14px 0 0; border-top:3px solid var(--ink); } .sbg .prose h2::before{ content:"";position:absolute;left:0;top:-3px; width:60px;height:3px;background:var(--orange); } .sbg .prose h2:first-child{margin-top:0} .sbg .prose h3{ font-size:clamp(16px,1.6vw,17.5px);font-weight:700;line-height:1.5; color:var(--ink); margin:30px 0 10px;padding:2px 0 2px 13px; border-left:3px solid var(--od); } .sbg .prose h4{ font-size:15.5px;font-weight:700;color:var(--ink); margin:22px 0 8px; } /* 見出しの直後の段落は、間を詰めて続きだと分かるようにする */ .sbg .prose h2 + p, .sbg .prose h3 + p{margin-top:0} /* 箇条書きと本文の間隔も、長文で読めるように整える */ .sbg .prose p{margin:0 0 15px;line-height:1.85} .sbg .prose ul, .sbg .prose ol{margin:0 0 18px;padding-left:1.4em} .sbg .prose li{margin-bottom:7px;line-height:1.8} .sbg .prose li > b:first-child{color:var(--od-d)} @media(max-width:640px){ .sbg .prose h2{margin:36px 0 13px;padding-top:12px} .sbg .prose h2::before{width:48px} .sbg .prose h3{margin:24px 0 9px;padding-left:11px} .sbg .prose p{line-height:1.8} } /* -------------------------------------------------------------------------- * 同じテーマの記事 * タイトルと説明文を縦に積む。横に並べると長いタイトルで潰れる。 * -------------------------------------------------------------------------- */ .sbg .near{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px;margin-top:4px; } .sbg .near a{ display:block;min-width:0;width:auto; padding:14px 16px;border:1px solid var(--line);background:#fff; text-decoration:none;color:var(--ink); font-size:15.5px;font-weight:700;line-height:1.5; white-space:normal;overflow-wrap:anywhere; } .sbg .near a:hover{border-color:var(--od);background:#F3F1E7} .sbg .near a span{ display:block;margin-top:6px; font-size:13px;font-weight:400;color:var(--sub);line-height:1.6; white-space:normal; } @media(max-width:640px){ .sbg .near{grid-template-columns:1fr;gap:9px} .sbg .near a{padding:12px 14px;font-size:15px} } /* -------------------------------------------------------------------------- * 曜日ごとの開催数 * 平日は5つ。5等分にしないと金曜だけ折り返す。 * -------------------------------------------------------------------------- */ .sbg .figs{ display:grid;grid-template-columns:repeat(5,1fr);gap:0; border-top:1px solid var(--line);margin-top:4px; } .sbg .figs > div{ padding:14px 12px;border-bottom:1px solid var(--line); border-right:1px solid var(--line); } .sbg .figs > div:last-child{border-right:0} .sbg .figs dt{font-size:13px;color:var(--sub);margin-bottom:4px} .sbg .figs dd{margin:0;font-size:28px;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums;line-height:1.1} .sbg .figs dd small{font-size:13px;font-weight:400;color:var(--sub);margin-left:3px} @media(max-width:640px){ .sbg .figs{grid-template-columns:repeat(5,1fr)} .sbg .figs > div{padding:11px 6px} .sbg .figs dt{font-size:11.5px} .sbg .figs dd{font-size:21px} .sbg .figs dd small{font-size:11px} } .sbg .note code{ display:inline-block;margin-top:5px;padding:3px 8px; background:#F3F1E7;border:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;color:var(--ink);word-break:break-all; } /* -------------------------------------------------------------------------- * PCヘッダーの詰め * ロゴを折り返さず、ナビを1行に収める。 * 入り切らない場合は文字を詰めるより横スクロールに逃がす。 * -------------------------------------------------------------------------- */ @media(min-width:641px){ .sbg .hd__in{flex-wrap:nowrap;align-items:center;gap:0} .sbg .brand{ flex:0 0 auto;width:auto;white-space:nowrap; border-right:1px solid var(--line-d);margin-right:20px;padding:0 20px 0 0; } .sbg .brand__t{white-space:nowrap;font-size:17px;line-height:1.25} .sbg .brand__t i{white-space:nowrap;font-size:9px;letter-spacing:.22em} .sbg .nav{ flex:1 1 auto;min-width:0;width:auto; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; border-top:0;padding-right:0; } .sbg .nav::-webkit-scrollbar{display:none} .sbg .nav a{white-space:nowrap;padding:0 12px;font-size:14px} .sbg .nav a:first-child{padding-left:0} } /* 画面が狭いPCでは、ナビの文字をわずかに詰めて1行に収める */ @media(min-width:641px) and (max-width:1100px){ .sbg .nav a{padding:0 9px;font-size:13.5px} .sbg .brand__t{font-size:16px} } /* -------------------------------------------------------------------------- * 記事本文の幅 * 1行が短すぎて右に余白が残っていた。読みやすい範囲まで広げる。 * -------------------------------------------------------------------------- */ .sbg .prose{max-width:820px;margin-left:0;margin-right:auto} @media(max-width:640px){ .sbg .prose{max-width:100%} } /* -------------------------------------------------------------------------- * 都道府県グリッドの文字色 * 背景が濃い県で文字が沈んでいた。濃い段階では文字を明るくする。 * -------------------------------------------------------------------------- */ .sbg .pcell.lv4, .sbg .pcell.lv5{color:var(--paper)} .sbg .pcell.lv4 b, .sbg .pcell.lv5 b{color:var(--paper)} .sbg .pcell.lv4 span, .sbg .pcell.lv5 span{color:rgba(233,231,220,.78)} .sbg .pcell.lv4:hover, .sbg .pcell.lv5:hover{color:#fff} /* -------------------------------------------------------------------------- * 横並びの2ブロック * 高さを揃えて下端をそろえる。中身の量が違っても枠は同じ高さにする。 * -------------------------------------------------------------------------- */ @media(min-width:641px){ .sbg .two2{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch} .sbg .two2 > .sec{display:flex;flex-direction:column} .sbg .two2 > .sec > .links, .sbg .two2 > .sec > .figs{flex:0 0 auto} .sbg .two2 > .sec > .note:last-child{margin-top:auto} } /* -------------------------------------------------------------------------- * 一覧の行のボタン * 2つのボタンの幅をそろえる。長さが違うと視線が揺れる。 * -------------------------------------------------------------------------- */ .sbg .row .acts{ display:grid;grid-template-columns:1fr;gap:8px;justify-items:stretch; min-width:200px; } .sbg .row__go, .sbg .row .golink{ width:100%;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center; text-align:center;white-space:nowrap;min-height:42px; } @media(max-width:640px){ .sbg .row .acts{min-width:0} } /* -------------------------------------------------------------------------- * 記事本文の幅 * .prose を820pxへ広げても main(.w)が1240pxのままだと右に大きな余白が残る。 * 本文を含むmainだけ幅を絞り、.proseを中央寄せして左右の余白をそろえる。 * 1行あたり: 820px / 16px ≈ 51文字（40〜52文字の範囲内）。 * -------------------------------------------------------------------------- */ .sbg main.w:has(> .prose){max-width:1000px} .sbg .prose{max-width:820px;margin-left:auto;margin-right:auto} @media(max-width:640px){ .sbg main.w:has(> .prose){max-width:none} .sbg .prose{max-width:100%} } /* -------------------------------------------------------------------------- * リンクブロックの見出し * 2行に折り返すと、横並びの相手と高さが合わなくなる。 * 見出しは1行に固定し、入り切らない場合だけ末尾を省略する。 * -------------------------------------------------------------------------- */ .sbg .links a b{ display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sbg .links a span{ display:block;font-size:13px;color:var(--sub);margin-top:4px;line-height:1.5; } @media(max-width:640px){ .sbg .links a b{white-space:normal} } /* -------------------------------------------------------------------------- * 記事本文の右余白（最終調整） * main.w:has(> .prose) の上限(1000px)と.prose(820px)の差が大きく、 * main右端と本文右端の間に90pxの余白が生じていた。 * .proseは1行45〜52字の上限(16px運用でおよそ832px)に近いため大きくは広げられない。 * 本文はわずかに広げ、mainの上限を詰めて余白を60px以下にする。 * -------------------------------------------------------------------------- */ .sbg main.w:has(> .prose){max-width:940px} .sbg .prose{max-width:826px;margin-left:auto;margin-right:auto} @media(max-width:640px){ .sbg main.w:has(> .prose){max-width:none} .sbg .prose{max-width:100%} } /* -------------------------------------------------------------------------- * セクション見出しの右の説明 * 2行に折り返すと見出しの高さが崩れる。 * 幅が足りないときは、折り返すより末尾を省略する。 * -------------------------------------------------------------------------- */ .sbg .sec__hd{display:flex;align-items:baseline;gap:16px;flex-wrap:nowrap} .sbg .sec__t{flex:0 0 auto} .sbg .sec__s{ flex:1 1 auto;min-width:0;text-align:right; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } @media(max-width:640px){ /* スマホは幅が足りないので、折り返して2行にする */ .sbg .sec__hd{flex-wrap:wrap;gap:4px} .sbg .sec__s{white-space:normal;text-align:left;flex:1 1 100%} } /* -------------------------------------------------------------------------- * 都道府県セルの文字色コントラスト修正 * span要素のopacity:.9および lv4/lv5 のrgba透過が背景と混色し、 * 実際の描画コントラスト比が4.5:1を下回っていたため透過を解消する。 * -------------------------------------------------------------------------- */ .sbg .pcell span{opacity:1} .sbg .pcell.lv4 b, .sbg .pcell.lv4 span{color:#FFFFFF} .sbg .pcell.lv5 span{color:var(--paper)} /* -------------------------------------------------------------------------- * フィールドの情報表 * 本文の表と同じ作法。項目名を左、値を右。 * -------------------------------------------------------------------------- */ .sbg .info{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:4px} .sbg .info th{ text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.05em; background:#F3F1E7;color:var(--ink); padding:9px 12px;border:1px solid var(--line);width:170px;white-space:nowrap; } .sbg .info td{padding:9px 12px;border:1px solid var(--line);color:var(--ink)} @media(max-width:640px){ .sbg .info{font-size:13.5px} .sbg .info th{width:38%;padding:8px 10px;font-size:11.5px;white-space:normal} .sbg .info td{padding:8px 10px} } /* -------------------------------------------------------------------------- * 絞り込みに足した条件（種類・条件） * 種類は既存の .seg をそのまま使う。ここでは行と、条件チップだけを足す。 * スマホでは横スクロールで1行に収める。 * -------------------------------------------------------------------------- */ .sbg .fseg{display:flex;align-items:center;gap:10px;margin-top:9px} .sbg .fseg__l{font-size:11px;color:var(--sub);flex:0 0 auto;white-space:nowrap} .sbg .fseg .seg,.sbg .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0} .sbg .fseg .seg::-webkit-scrollbar,.sbg .chips::-webkit-scrollbar{display:none} .sbg .fseg .seg{gap:0;flex:0 0 auto} .sbg .chip{ font:inherit;font-size:13px;padding:6px 11px;background:#fff;border:1px solid var(--line); color:var(--ink);white-space:nowrap;cursor:pointer;flex:0 0 auto; } .sbg .chip[aria-pressed="true"]{background:var(--od);color:var(--paper);border-color:var(--od)} /* -------------------------------------------------------------------------- * 絞り込みの種類・条件（再修正） * SPでは .fseg がグリッドの半分幅に押し込まれて縦積みになっていたため、 * 各 .fseg をグリッド全幅に広げ、ボタンは折り返さず横スクロールに統一する。 * -------------------------------------------------------------------------- */ .sbg .fseg .seg, .sbg .fseg .chips{ display:flex;min-width:0;flex:1 1 auto; overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch; flex-wrap:nowrap; } .sbg .fseg .seg::-webkit-scrollbar, .sbg .fseg .chips::-webkit-scrollbar{display:none} .sbg .fseg .seg button{ white-space:nowrap;word-break:keep-all;flex:0 0 auto; } .sbg .fseg .chip{white-space:nowrap;word-break:keep-all;flex:0 0 auto} @media(max-width:640px){ .sbg .fseg{grid-column:1/-1;flex-wrap:nowrap} .sbg .fseg .seg button{flex:0 0 auto;padding:7px 13px;font-size:13px;min-height:auto} } /* -------------------------------------------------------------------------- * 絞り込みの要素の高さと枠線をそろえる * 同じ行に並ぶものが不揃いだと、まとまりに見えない。 * -------------------------------------------------------------------------- */ .sbg .filter select, .sbg .filter input[type="text"], .sbg .filter input[type="search"], .sbg .fseg .seg button, .sbg .fseg .chip{ height:36px;min-height:36px;max-height:36px; padding-top:0;padding-bottom:0; line-height:34px; /* 枠線1px×2を引いた値 */ box-sizing:border-box; font-size:13px; vertical-align:middle; } .sbg .fseg .chip{ border:1px solid var(--ink); background:#fff; padding:0 13px; color:var(--ink); } .sbg .fseg .chip[aria-pressed="true"]{ background:var(--od);color:var(--paper);border-color:var(--od); } .sbg .fseg .seg{height:36px;box-sizing:border-box;align-items:stretch;border-color:var(--ink)} .sbg .fseg .seg button{padding:0 13px;border-color:var(--ink)} .sbg .fseg{align-items:center} @media(max-width:640px){ .sbg .filter select, .sbg .filter input[type="text"], .sbg .filter input[type="search"]{height:34px;min-height:34px;max-height:34px;line-height:32px;font-size:12.5px} .sbg .fseg .seg, .sbg .fseg .seg button, .sbg .fseg .chip{height:34px;min-height:34px;max-height:34px;line-height:32px;font-size:12.5px} .sbg .fseg .seg button, .sbg .fseg .chip{padding:0 11px} } /* -------------------------------------------------------------------------- * 絞り込みバー: 期間セグメント(#range)とリセットボタンだけ36pxの基準から * 外れていた(min-height:42px指定が.fsegの外にあるため既存の36px統一ルールが * 効いていなかった)。ここで同じ基準に揃える。 * -------------------------------------------------------------------------- */ .sbg .filter #range button, .sbg .filter .reset{ height:36px;min-height:36px;max-height:36px; padding:0 13px; line-height:34px; box-sizing:border-box; font-size:13px; vertical-align:middle; } .sbg .filter #range{height:36px;box-sizing:border-box;align-items:stretch} .sbg .filter .chk{min-height:36px;line-height:36px} @media(max-width:640px){ .sbg .filter #range button, .sbg .filter .reset{height:34px;min-height:34px;max-height:34px;line-height:32px;font-size:12.5px;padding:0 11px} .sbg .filter .chk{min-height:34px;line-height:34px} } /* -------------------------------------------------------------------------- * 絞り込みバー: 文字色を1本化する * セレクト/入力欄はvar(--text)、リセットはvar(--sub)を使っており、 * ボタン/チップのvar(--ink)と微妙に色が違うため薄く見えていた。 * 未選択状態はすべてvar(--ink)に揃える。 * -------------------------------------------------------------------------- */ .sbg .filter select, .sbg .filter input[type="text"], .sbg .filter input[type="search"], .sbg .filter .reset{ color:var(--ink); } .sbg .filter .reset:hover{color:var(--ink)} /* -------------------------------------------------------------------------- * 絞り込みバーの縦位置をそろえる * 高さは36pxで揃っていたが、.fseg に付けた margin-top が効いて * 種類と条件だけ5px下がっていた。バーの中では余白を持たせない。 * -------------------------------------------------------------------------- */ .sbg .filter__in{align-items:center} .sbg .filter__in .fseg, .sbg .filter .fseg{ margin-top:0 !important; margin-bottom:0 !important; height:36px !important; min-height:36px !important; align-items:center !important; } .sbg .filter__in .seg, .sbg .filter .seg, .sbg .filter__in .chips, .sbg .filter .chips{ height:36px !important; min-height:36px !important; align-items:stretch !important; margin-top:0 !important; margin-bottom:0 !important; } /* 行が折り返したときだけ、上下に余白を戻す */ @media(max-width:640px){ .sbg .filter .fseg{margin-top:8px !important;height:auto !important;min-height:0 !important} .sbg .filter .seg, .sbg .filter .chips{height:34px !important;min-height:34px !important} } /* -------------------------------------------------------------------------- * 絞り込みバーの間隔をそろえる * チップどうしが5px、グループ間が十数pxで、最後のチップの右だけ * 空いて見えていた。要素の間隔を一つの値に統一する。 * -------------------------------------------------------------------------- */ .sbg .filter__in{gap:8px !important;row-gap:8px !important} .sbg .filter__in .chips{gap:8px !important} .sbg .filter__in .fseg{gap:8px !important} /* セグメントは枠を共有して連結するので、間隔は持たせない */ .sbg .filter__in .seg{gap:0 !important} @media(max-width:640px){ .sbg .filter__in{gap:6px !important;row-gap:8px !important} .sbg .filter__in .chips, .sbg .filter__in .fseg{gap:6px !important} } /* -------------------------------------------------------------------------- * 情報の誤りを知らせる導線 * 269件を全部こちらで確かめ切ることはできない。 * 行った人が教えてくれるほうが確かで速い。目立たせすぎず、見つかる位置に。 * -------------------------------------------------------------------------- */ .sbg .report{ margin-top:10px;font-size:12.5px;line-height:1.7; padding-top:9px;border-top:1px dashed var(--line); } .sbg .report a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .sbg .report a:hover{color:var(--orange)} .sbg .report span{display:block;color:var(--sub);font-size:11.5px;margin-top:2px}