/* ===================================================================== HolyCMS for WordPress — main.css HolyCMS Press の theme_css.php / style.css / press.css から、 ヘッダー・チップナビ・3カラム・カード・フッター・ドロワーを移植。 色・文字・角丸・余白はすべて --dz-* 変数（functions.php が に出力）。 ===================================================================== */ /* ---------- 0. 既定値（変数が来なかったときの保険） ---------- */ :root{ --dz-bg:#f9f9f9; --dz-surface:#fff; --dz-hover:#f2f2f2; --dz-text:#0f0f0f; --dz-muted:#606060; --dz-line:#e5e5e5; --dz-accent:#0f0f0f; --dz-heading:#0f0f0f; --dz-button:#0f0f0f; --dz-on-accent:#fff; --dz-on-button:#fff; --dz-on-heading:#fff; --dz-radius:12px; --dz-gap:16px; --dz-pad:16px; --dz-font:Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; --dz-fs:15px; --dz-lh:1.8; --hc-card-min:240px; --hc-hero-h:420px; --hc-hero-dim:.35; --hc-max:1500px; --hc-read:820px; --hb-bg:var(--dz-surface); --hb-text:var(--dz-text); --hb-muted:var(--dz-muted); --hb-hover:var(--dz-hover); --hb-active:var(--dz-accent); } /* ---------- 1. 基本 ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-padding-top:120px; } body{ margin:0; background:var(--dz-bg); color:var(--dz-text); font-family:var(--dz-font); font-size:var(--dz-fs); line-height:var(--dz-lh); overflow-x:clip; -webkit-font-smoothing:antialiased; } a{ color:var(--dz-accent); text-underline-offset:.18em; } a:hover{ opacity:.85; } img,video,iframe{ max-width:100%; height:auto; } img{ border:0; vertical-align:middle; } hr{ border:none; border-top:1px solid var(--dz-line); margin:2em 0; } button,input,select,textarea{ font:inherit; color:inherit; } :focus-visible{ outline:2px solid var(--dz-accent); outline-offset:2px; } .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } .skip-link{ position:absolute; left:8px; top:-60px; z-index:300; background:var(--dz-button); color:var(--dz-on-button); padding:10px 16px; border-radius:var(--dz-radius); text-decoration:none; transition:top .15s; } .skip-link:focus{ top:8px; } .hc-muted{ color:var(--dz-muted); } /* ---------- 2. ヘッダー（.gh） ---------- */ .gh{ position:relative; z-index:120; background:var(--dz-surface); border-bottom:1px solid var(--dz-line); transition:box-shadow .25s ease, background .25s ease; } body.gh-sticky .gh{ position:sticky; top:0; } body.admin-bar.gh-sticky .gh{ top:32px; } @media (max-width:782px){ body.admin-bar.gh-sticky .gh{ top:46px; } } @media (max-width:600px){ body.admin-bar.gh-sticky .gh{ top:0; } } .gh.scrolled{ box-shadow:0 1px 10px rgba(0,0,0,.08); background:color-mix(in srgb, var(--dz-surface) 88%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); } .gh-in{ display:flex; align-items:center; gap:10px; height:56px; max-width:var(--hc-max); margin:0 auto; padding:0 12px; } .gh-burger{ width:44px; height:44px; border-radius:50%; background:transparent; border:none; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:background .18s; } .gh-burger:hover{ background:var(--dz-hover); } .hb-lines{ display:flex; flex-direction:column; gap:4px; width:18px; } .hb-lines i{ display:block; height:2px; border-radius:2px; background:var(--dz-text); } .gh-logo{ display:flex; align-items:center; text-decoration:none; flex:none; min-width:0; } .gh-logo:hover{ opacity:1; } .gh-logo img{ max-height:34px; width:auto; display:block; } .gh-logotype{ font-size:19px; font-weight:700; letter-spacing:.01em; color:var(--dz-text); white-space:nowrap; } .gh-search{ position:relative; flex:1; max-width:560px; margin:0 auto; display:flex; height:40px; min-width:0; } .gh-search input{ flex:1; min-width:0; border:1px solid var(--dz-line); border-right:none; border-radius:99px 0 0 99px; padding:0 16px; font-size:14px; background:var(--dz-surface); color:var(--dz-text); outline:none; transition:border-color .18s, box-shadow .18s; -webkit-appearance:none; appearance:none; } .gh-search input:focus{ border-color:var(--dz-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dz-accent) 16%, transparent); } .gh-search button{ width:56px; border:1px solid var(--dz-line); border-radius:0 99px 99px 0; background:var(--dz-hover); color:var(--dz-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s; } .gh-search button:hover{ background:var(--dz-line); color:var(--dz-text); } .gh-sug{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--dz-surface); border:1px solid var(--dz-line); border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.14); overflow:hidden; z-index:130; display:none; } .gh-sug.on{ display:block; animation:ghIn .16s ease; } .gh-sug a{ display:flex; gap:10px; align-items:center; padding:10px 14px; text-decoration:none; color:var(--dz-text); font-size:13.5px; } .gh-sug a:hover,.gh-sug a.sel{ background:var(--dz-hover); opacity:1; } .gh-sug .k{ flex:none; font-size:10.5px; color:var(--dz-muted); border:1px solid var(--dz-line); border-radius:20px; padding:2px 9px; } .gh-sug .t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gh-actions{ display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; } .gh-iconbtn{ width:44px; height:44px; border-radius:50%; border:none; background:transparent; color:var(--dz-text); display:none; align-items:center; justify-content:center; cursor:pointer; transition:background .18s; } .gh-iconbtn:hover{ background:var(--dz-hover); } .gh-pill{ position:relative; display:flex; align-items:center; gap:7px; height:38px; padding:0 15px; border-radius:99px; text-decoration:none; font-size:13.5px; font-weight:600; color:var(--dz-text); background:var(--dz-hover); border:1px solid transparent; transition:transform .15s ease, background .18s, box-shadow .18s; white-space:nowrap; } .gh-pill:hover{ background:var(--dz-line); opacity:1; } .gh-pill:active{ transform:scale(.96); } .gh-pill.gh-outline{ background:transparent; border-color:var(--dz-line); color:var(--dz-accent); } .gh-pill.gh-outline:hover{ background:color-mix(in srgb, var(--dz-accent) 8%, transparent); border-color:var(--dz-accent); } .gh-pill.gh-accent{ background:var(--dz-button); color:var(--dz-on-button); } .gh-pill.gh-accent:hover{ box-shadow:0 3px 12px color-mix(in srgb, var(--dz-button) 40%, transparent); } .gh-cart-n{ min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--dz-accent); color:var(--dz-on-accent); font-size:11px; line-height:20px; text-align:center; font-weight:700; } .gh-cart-n.is-empty{ background:var(--dz-line); color:var(--dz-muted); } .gh-chips{ max-width:var(--hc-max); margin:0 auto; padding:0 12px 10px; } .gh-chips-list{ display:flex; gap:8px; overflow-x:auto; list-style:none; margin:0; padding:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .gh-chips-list::-webkit-scrollbar{ display:none; } .gh-chips-list li{ flex:none; } .gh-chips-list a{ display:block; padding:7px 14px; border-radius:8px; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--dz-text); background:var(--dz-hover); transition:background .16s, color .16s, transform .15s; } .gh-chips-list a:hover{ background:var(--dz-line); opacity:1; } .gh-chips-list a:active{ transform:scale(.96); } .gh-chips-list .current-menu-item > a, .gh-chips-list .current_page_item > a, .gh-chips-list .current-menu-ancestor > a{ background:var(--dz-text); color:var(--dz-surface); } @media (max-width:720px){ .gh-search{ display:none; } .gh-iconbtn{ display:flex; } .gh.search-open .gh-in > *:not(.gh-search){ display:none; } .gh.search-open .gh-search{ display:flex; margin:0; max-width:none; animation:ghIn .22s ease; } .gh-pill span{ display:none; } .gh-pill{ width:40px; height:40px; padding:0; justify-content:center; border-radius:50%; } .gh-cart-n{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; line-height:18px; font-size:10px; padding:0 4px; } } @keyframes ghIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } /* ---------- 3. ヒーロー ---------- */ .hc-hero{ position:relative; min-height:var(--hc-hero-h); display:flex; align-items:flex-end; background:var(--dz-surface); border-bottom:1px solid var(--dz-line); overflow:hidden; } .hc-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hc-hero.has-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 20%, rgba(0,0,0,var(--hc-hero-dim)) 100%), rgba(0,0,0,calc(var(--hc-hero-dim) * .5)); } .hc-hero-over{ position:relative; z-index:1; width:100%; max-width:var(--hc-max); margin:0 auto; padding:40px 24px 44px; } .hc-hero-tag{ margin:0 0 8px; font-size:11.5px; letter-spacing:.3em; font-weight:700; color:var(--dz-muted); text-transform:uppercase; } .hc-hero-title{ margin:0; font-size:clamp(26px, 4.4vw, 52px); line-height:1.25; font-weight:800; color:var(--dz-heading); max-width:22em; } .hc-hero-sub{ margin:14px 0 0; font-size:clamp(14px, 1.6vw, 17px); color:var(--dz-muted); max-width:40em; } .hc-hero .hc-btn{ margin-top:22px; } .hc-hero.has-img .hc-hero-tag, .hc-hero.has-img .hc-hero-title, .hc-hero.has-img .hc-hero-sub{ color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.35); } /* ---------- 4. レイアウト（3カラム） ---------- */ .layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:calc(var(--dz-gap) + 6px); max-width:var(--hc-max); margin:0 auto; padding:var(--dz-gap) 18px 0; align-items:start; } .layout.has-left.has-right{ grid-template-columns:minmax(160px,var(--hc-left,250px)) minmax(0,1fr) minmax(180px,var(--hc-right,300px)); } .layout.has-left:not(.has-right){ grid-template-columns:minmax(160px,var(--hc-left,250px)) minmax(0,1fr); } .layout.has-right:not(.has-left){ grid-template-columns:minmax(0,1fr) minmax(180px,var(--hc-right,300px)); } .layout-1col .layout{ max-width:1200px; } .main-col{ min-width:0; outline:none; } .wrap{ padding:0 0 60px; } .side{ position:sticky; top:calc(var(--hc-sticky, 0px) + 12px); padding:6px 0 40px; min-width:0; } body.gh-sticky{ --hc-sticky:104px; } @media (max-width:1100px){ .layout.has-left.has-right{ grid-template-columns:minmax(0,1fr) minmax(220px,280px); } .layout.has-left.has-right .side-left{ grid-column:2; grid-row:2; } .layout.has-left.has-right .main-col{ grid-row:1 / span 2; } } @media (max-width:900px){ .layout,.layout.has-left.has-right,.layout.has-left:not(.has-right),.layout.has-right:not(.has-left){ grid-template-columns:minmax(0,1fr); padding:12px 14px 0; } .layout .main-col{ order:1; grid-row:auto !important; } .layout .side-right{ order:2; } .layout .side-left{ order:3; grid-column:auto !important; grid-row:auto !important; } .side{ position:static; padding:0 0 24px; } .wrap{ padding-bottom:28px; } } /* サイドの箱（HolyCMS の .pu-side-box） */ .side-box{ background:var(--dz-surface); border:1px solid var(--dz-line); border-radius:var(--dz-radius); padding:16px 16px 18px; margin:0 0 18px; font-size:13.5px; } .side-box-title{ margin:0 0 10px; font-size:14.5px; font-weight:700; letter-spacing:.08em; color:var(--dz-heading); border-bottom:2px solid var(--dz-heading); padding-bottom:7px; } .side-box ul{ list-style:none; margin:0; padding:0; } .side-box li{ border-bottom:1px dotted var(--dz-line); } .side-box li:last-child{ border-bottom:0; } .side-box li a{ display:block; padding:7px 2px; color:var(--dz-text); text-decoration:none; line-height:1.6; } .side-box li a:hover{ background:var(--dz-hover); opacity:1; } .side-box li ul{ padding-left:12px; border-top:1px dotted var(--dz-line); } .side-box .post-date,.side-box .count{ font-size:11px; color:var(--dz-muted); } .side-box select,.side-box input[type="search"]{ width:100%; } .side-box .wp-block-search__inside-wrapper{ display:flex; } .side-box img{ border-radius:calc(var(--dz-radius) * .6); } /* ---------- 5. 見出し帯（HolyCMS の .bar） ---------- */ .hc-bar{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; background:var(--dz-bar); color:var(--dz-on-heading); border-radius:calc(var(--dz-radius) * .5); padding:7px 14px; margin:26px 0 14px; font-size:15px; font-weight:700; letter-spacing:.04em; line-height:1.5; } .hc-bar:first-child{ margin-top:6px; } .hc-bar a{ color:inherit; font-size:12px; } /* ---------- 6. カード（HolyCMS の .of-grid / .of-card） ---------- */ .of-grid{ display:grid; gap:calc(var(--dz-gap) + 2px) var(--dz-gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--hc-card-min)), 1fr)); } .of-card{ min-width:0; } .of-link{ display:block; text-decoration:none; color:var(--dz-text); border-radius:var(--dz-radius); } .of-link:hover{ opacity:1; } .of-card .frame{ position:relative; display:block; aspect-ratio:var(--hc-card-ratio, 16 / 9); overflow:hidden; border-radius:var(--dz-radius); background:var(--dz-hover); border:1px solid var(--dz-line); } .of-card .frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .of-link:hover .frame img{ transform:scale(1.04); } .of-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:800; color:var(--dz-line); } .of-cat{ position:absolute; left:8px; top:8px; max-width:calc(100% - 64px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:color-mix(in srgb, var(--dz-surface) 92%, transparent); color:var(--dz-text); font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:99px; } .of-new{ position:absolute; right:8px; top:8px; background:var(--dz-accent); color:var(--dz-on-accent); font-size:10px; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:99px; } .of-card .t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:10px 2px 3px; font-size:15px; font-weight:700; line-height:1.5; color:var(--dz-text); } .of-card .m{ display:block; margin:0 2px; font-size:12px; color:var(--dz-muted); font-variant-numeric:tabular-nums; } /* カードの型 */ .of-card .x{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:2px 2px 4px; font-size:13px; color:var(--dz-muted); line-height:1.65; } .card-boxed .of-link{ background:var(--dz-surface); border:1px solid var(--dz-line); padding:8px 8px 12px; } .card-boxed .of-card .frame{ border-radius:calc(var(--dz-radius) * .7); } .card-shadow .of-link{ background:var(--dz-surface); padding:0 0 12px; box-shadow:0 2px 12px rgba(0,0,0,.08); overflow:hidden; transition:box-shadow .2s, transform .2s; } .card-shadow .of-link:hover{ box-shadow:0 10px 26px rgba(0,0,0,.14); transform:translateY(-2px); } .card-shadow .of-card .frame{ border:0; border-radius:0; } .card-shadow .of-card .t,.card-shadow .of-card .m,.card-shadow .of-card .x{ margin-left:12px; margin-right:12px; } .card-arch .of-card .frame{ border-top-left-radius:999px 340px; border-top-right-radius:999px 340px; } /* ---------- 6b. デザイン管理の部品 ---------- */ .gh-cross{ display:inline-flex; margin-right:7px; color:var(--dz-accent); } .gh-logo{ gap:0; } .gh-sub-text{ margin-left:10px; font-size:11.5px; color:var(--dz-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:18em; } @media (max-width:900px){ .gh-sub-text{ display:none; } } .hb-cross{ color:var(--hb-active); margin-bottom:4px; } /* ティッカー（お知らせ帯） */ .ticker{ background:var(--dz-surface); color:var(--dz-muted); border-bottom:1px solid var(--dz-line); font-size:12.5px; overflow:hidden; white-space:nowrap; } .ticker span{ display:inline-block; padding:7px 16px; } .ticker a{ color:inherit; } .ticker.is-move span{ padding-left:100%; animation:hcTicker 22s linear infinite; } .ticker.is-move:hover span{ animation-play-state:paused; } @keyframes hcTicker{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } /* ブロック（ウィジェット）エリア */ .blk-area{ margin:0 0 var(--dz-gap); } .blk-area > .blk{ margin:0 0 14px; } .blk-area-wide{ max-width:var(--hc-max); margin:0 auto; padding:var(--dz-gap) 18px 0; } .blk-area-top{ margin:0; padding:0; max-width:none; } .blk-area-foot{ margin-top:24px; } .blk-area-bottom{ padding-bottom:var(--dz-gap); } .blk img{ border-radius:var(--dz-radius); } /* スライドショー */ .dz-slides{ position:relative; overflow:hidden; border-radius:var(--dz-radius); margin:0 0 var(--dz-gap); background:#000; height:var(--hc-slide-h, 320px); } .dz-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s; } .dz-slide.on{ opacity:1; z-index:1; } .dz-slide a{ display:block; height:100%; } .dz-slide img{ width:100%; height:100%; object-fit:cover; display:block; } .dz-cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px; color:#fff; font-weight:700; font-size:15px; background:linear-gradient(transparent,rgba(0,0,0,.6)); } .dz-dots{ position:absolute; z-index:2; bottom:8px; right:12px; display:flex; gap:4px; } .dz-dots button{ width:24px; height:24px; border:none; background:transparent; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; } .dz-dots button::before{ content:""; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); } .dz-dots button.on::before{ background:#fff; } @media (max-width:600px){ .dz-slides{ height:calc(var(--hc-slide-h, 320px) * .6); } } /* 左カラムの「めぐる」ナビ・新着リスト */ .hc-sidenav a{ display:flex; align-items:center; gap:8px; } .pu-side-list.eps a{ display:flex; gap:8px; align-items:baseline; } .pu-side-list .d{ flex-shrink:0; font-size:11px; color:var(--dz-muted); font-variant-numeric:tabular-nums; } .hc-tagcloud{ display:flex; flex-wrap:wrap; gap:6px; } .hc-tagcloud a{ display:inline-block; padding:4px 10px; border-radius:99px; background:var(--dz-hover); color:var(--dz-text); text-decoration:none; font-size:12px !important; } .side-box .hc-search{ height:40px; } /* SNS（フッター） */ .gf-sns{ display:flex; flex-wrap:wrap; gap:10px; } .gf-sns a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--dz-line); display:flex; align-items:center; justify-content:center; color:var(--dz-muted); transition:transform .18s, color .18s, border-color .18s; } .gf-sns a:hover{ color:var(--dz-text); border-color:var(--dz-text); transform:translateY(-3px); opacity:1; } /* 共有ボタン */ .hc-share{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; } .hc-share a,.hc-share button{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:99px; border:1px solid var(--dz-line); background:var(--dz-surface); color:var(--dz-text); font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; } .hc-share a:hover,.hc-share button:hover{ border-color:var(--dz-accent); color:var(--dz-accent); opacity:1; } /* ---------- 7. ページ見出し・パンくず・メタ ---------- */ .hc-page-head{ margin:4px 0 22px; } .hc-page-desc{ color:var(--dz-muted); margin:8px 0 0; } .hc-page-head .hc-search{ margin-top:14px; max-width:520px; } .hc-bread{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--dz-muted); margin:0 0 12px; } .hc-bread a{ color:var(--dz-muted); text-decoration:none; } .hc-bread a:hover{ color:var(--dz-accent); } .hc-bread .sep{ opacity:.5; } .hc-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--dz-muted); margin:10px 0 0; } .hc-meta-item{ display:inline-flex; align-items:center; gap:5px; } .hc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; } .hc-chip{ display:inline-block; padding:5px 12px; border-radius:99px; background:var(--dz-hover); color:var(--dz-text); font-size:12.5px; font-weight:600; text-decoration:none; transition:background .16s; } .hc-chip:hover{ background:var(--dz-line); opacity:1; } /* ---------- 8. 見出しの形（カスタマイザー「見出しの形」） ---------- */ .hc-heading,.entry-content h2,.entry-content h3,.comment-reply-title{ color:var(--dz-heading); line-height:1.4; } .hc-heading{ font-size:clamp(22px, 3vw, 32px); margin:0; font-weight:700; } .entry-content h2{ font-size:1.45em; margin:2.2em 0 .8em; } .entry-content h3{ font-size:1.22em; margin:1.9em 0 .7em; } .entry-content h4{ font-size:1.08em; margin:1.6em 0 .6em; color:var(--dz-heading); } .entry-content h5,.entry-content h6{ font-size:1em; margin:1.4em 0 .5em; color:var(--dz-heading); } .hs-yt .hc-heading,.hs-yt .entry-content h2,.hs-yt .entry-content h3{ font-weight:700; } .hs-x .hc-heading,.hs-x .entry-content h2,.hs-x .entry-content h3{ font-weight:800; letter-spacing:-.01em; } .hs-underline .hc-heading,.hs-underline .entry-content h2,.hs-underline .entry-content h3{ font-weight:700; border-bottom:2px solid var(--dz-heading); padding-bottom:6px; } .hs-leftbar .hc-heading,.hs-leftbar .entry-content h2,.hs-leftbar .entry-content h3{ font-weight:700; border-left:4px solid var(--dz-heading); padding-left:12px; border-radius:2px; } .hs-band .hc-heading,.hs-band .entry-content h2,.hs-band .entry-content h3{ font-weight:700; color:var(--dz-on-heading); background:var(--dz-heading); padding:8px 14px; border-radius:calc(var(--dz-radius) * .66); } .hs-band .entry-content h4{ border-left:4px solid var(--dz-heading); padding-left:10px; } /* ---------- 9. 記事本文 ---------- */ .entry{ background:var(--dz-surface); border:1px solid var(--dz-line); border-radius:var(--dz-radius); padding:clamp(18px, 3.4vw, 40px); } .layout-1col .entry:not(.entry-wide){ max-width:var(--hc-read); margin-inline:auto; } .entry-wide{ background:transparent; border:0; padding:0; } .entry-header{ margin:0 0 22px; } .entry-thumb{ margin:0 0 26px; } .entry-thumb img{ width:100%; border-radius:var(--dz-radius); display:block; } .entry-thumb figcaption,.entry-content figcaption{ font-size:12px; color:var(--dz-muted); margin-top:6px; text-align:center; } .entry-content{ overflow-wrap:anywhere; } .entry-content > *:first-child{ margin-top:0; } .entry-content p{ margin:0 0 1.4em; } .entry-content ul,.entry-content ol{ padding-left:1.4em; margin:0 0 1.4em; } .entry-content li{ margin:.3em 0; } .entry-content img{ border-radius:calc(var(--dz-radius) * .6); } .entry-content blockquote,.entry-content .wp-block-quote{ margin:1.6em 0; padding:14px 18px; background:var(--dz-hover); border-left:4px solid var(--dz-line); border-radius:0 var(--dz-radius) var(--dz-radius) 0; color:var(--dz-muted); } .entry-content blockquote p:last-child{ margin-bottom:0; } .entry-content table{ width:100%; border-collapse:collapse; font-size:.94em; margin:0 0 1.6em; display:block; overflow-x:auto; } .entry-content th,.entry-content td{ border:1px solid var(--dz-line); padding:8px 12px; text-align:left; vertical-align:top; } .entry-content th{ background:var(--dz-hover); font-weight:700; } .entry-content code,.entry-content kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; background:var(--dz-hover); padding:.1em .4em; border-radius:4px; } .entry-content pre{ background:var(--dz-hover); border:1px solid var(--dz-line); border-radius:var(--dz-radius); padding:14px 16px; overflow-x:auto; font-size:.88em; line-height:1.6; } .entry-content pre code{ background:none; padding:0; } .entry-content .wp-block-image{ margin:1.6em 0; } .entry-content .wp-block-embed,.entry-content .wp-block-video{ margin:1.6em 0; } .entry-content iframe{ border-radius:var(--dz-radius); } .entry-content .alignwide{ margin-inline:calc(-1 * clamp(0px, 3vw, 40px)); max-width:none; } .layout-1col .entry-content .alignfull{ margin-inline:calc(50% - 50vw); width:100vw; max-width:100vw; } .layout-1col .entry-content .alignfull img{ border-radius:0; } .alignleft{ float:left; margin:.3em 1.4em 1em 0; } .alignright{ float:right; margin:.3em 0 1em 1.4em; } .aligncenter{ margin-inline:auto; display:block; } .entry-content::after{ content:""; display:table; clear:both; } .entry-footer{ margin-top:28px; padding-top:18px; border-top:1px solid var(--dz-line); } .hc-pagelinks{ margin:1.6em 0; font-weight:700; } .wp-caption-text,.gallery-caption{ font-size:12px; color:var(--dz-muted); } .sticky .of-card .t::before{ content:"★ "; color:var(--dz-accent); } /* ボタン（HolyCMS の .btn / .blk-btn） */ .hc-btn,.entry-content .wp-block-button__link,input[type="submit"],button[type="submit"].hc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 26px; border:1px solid var(--dz-button); border-radius:99px; background:var(--dz-button); color:var(--dz-on-button); font-weight:700; text-decoration:none; cursor:pointer; transition:filter .18s, transform .15s; } .hc-btn:hover,.entry-content .wp-block-button__link:hover,input[type="submit"]:hover{ filter:brightness(1.25); opacity:1; } .hc-btn:active{ transform:scale(.97); } .entry-content .is-style-outline .wp-block-button__link{ background:transparent; color:var(--dz-button); } /* フォーム */ input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"], input[type="number"],input[type="tel"],select,textarea{ width:100%; max-width:100%; border:1px solid var(--dz-line); border-radius:calc(var(--dz-radius) * .66); background:var(--dz-surface); color:var(--dz-text); padding:10px 12px; min-height:44px; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--dz-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dz-accent) 16%, transparent); } label{ font-weight:600; font-size:.94em; } /* サイト内検索フォーム（本文・サイド用） */ .hc-search{ display:flex; height:44px; } .hc-search input{ flex:1; min-width:0; border-radius:99px 0 0 99px; border-right:none; min-height:44px; } .hc-search button{ width:56px; border:1px solid var(--dz-line); border-radius:0 99px 99px 0; background:var(--dz-hover); color:var(--dz-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; } .hc-search button:hover{ background:var(--dz-line); color:var(--dz-text); } /* ---------- 10. 前後の記事・関連・ページ送り ---------- */ .hc-postnav{ margin:22px 0 0; } .hc-postnav .nav-links{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--dz-gap); } .hc-postnav a{ display:flex; flex-direction:column; gap:4px; height:100%; padding:14px 16px; background:var(--dz-surface); border:1px solid var(--dz-line); border-radius:var(--dz-radius); text-decoration:none; color:var(--dz-text); transition:border-color .16s; } .hc-postnav a:hover{ border-color:var(--dz-accent); opacity:1; } .hc-postnav .nav-next{ grid-column:2; text-align:right; } .hc-nav-k{ font-size:12px; color:var(--dz-muted); } .hc-nav-t{ font-weight:700; line-height:1.5; } @media (max-width:600px){ .hc-postnav .nav-links{ grid-template-columns:1fr; } .hc-postnav .nav-next{ grid-column:1; } } .hc-related{ margin-top:10px; } .hc-pager{ margin:32px 0 0; } .hc-pager .nav-links,.comments-pagination .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; } .hc-pager .page-numbers,.comments-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 14px; border-radius:99px; background:var(--dz-hover); color:var(--dz-text); text-decoration:none; font-weight:600; } .hc-pager a.page-numbers:hover{ background:var(--dz-line); opacity:1; } .hc-pager .page-numbers.current{ background:var(--dz-text); color:var(--dz-surface); } .hc-pager .dots{ background:transparent; } /* ---------- 11. コメント ---------- */ .hc-comments{ margin-top:28px; } .hc-comment-list,.hc-comment-list .children{ list-style:none; margin:0; padding:0; } .hc-comment-list .children{ padding-left:clamp(12px, 4vw, 36px); } .hc-comment-list .comment-body{ background:var(--dz-surface); border:1px solid var(--dz-line); border-radius:var(--dz-radius); padding:14px 16px; margin:0 0 12px; } .comment-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:12.5px; color:var(--dz-muted); } .comment-author{ display:flex; align-items:center; gap:8px; } .comment-author img{ border-radius:50%; } .comment-author .fn{ font-style:normal; font-weight:700; color:var(--dz-text); } .comment-metadata a{ color:var(--dz-muted); text-decoration:none; } .comment-content{ margin-top:8px; } .reply a{ font-size:12.5px; } .comment-respond{ background:var(--dz-surface); border:1px solid var(--dz-line); border-radius:var(--dz-radius); padding:18px 20px; margin-top:18px; } .comment-reply-title{ font-size:18px; margin:0 0 12px; } .comment-form p{ margin:0 0 14px; } .comment-form-cookies-consent{ display:flex; gap:8px; align-items:flex-start; } .comment-form-cookies-consent input{ width:auto; min-height:0; margin-top:6px; } /* ---------- 12. 該当なし・404 ---------- */ .hc-empty{ text-align:center; background:var(--dz-surface); border:1px dashed var(--dz-line); border-radius:var(--dz-radius); padding:40px 20px; color:var(--dz-muted); } .hc-empty-title{ font-size:20px; color:var(--dz-heading); margin:0 0 10px; } .hc-empty .hc-search{ max-width:460px; margin:18px auto; } .hc-404-num{ font-size:clamp(64px, 12vw, 120px); font-weight:800; line-height:1; margin:0 0 8px; color:var(--dz-line); letter-spacing:.04em; } /* ---------- 13. フッター（.gf） ---------- */ .gf{ background:var(--dz-surface); border-top:1px solid var(--dz-line); margin-top:28px; color:var(--dz-muted); font-size:13px; } .gf-in{ max-width:1200px; margin:0 auto; padding:34px 18px 20px; } .gf-cols{ display:grid; grid-template-columns:1.5fr repeat(var(--gf-n, 3), minmax(0,1fr)); gap:26px; } @media (max-width:820px){ .gf-cols{ grid-template-columns:1fr 1fr; } .gf-brand{ grid-column:1 / -1; } } @media (max-width:480px){ .gf-cols{ grid-template-columns:1fr; } } .gf-logo{ display:inline-flex; align-items:center; font-size:18px; font-weight:700; color:var(--dz-text); text-decoration:none; } .gf-logo img{ max-height:40px; width:auto; } .gf-logo .gh-logotype{ font-size:18px; } .gf-desc{ margin:10px 0 14px; line-height:1.9; } .gf-col-title{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--dz-text); margin:4px 0 10px; } .gf-list{ list-style:none; margin:0; padding:0; } .gf-list a{ display:block; color:var(--dz-muted); text-decoration:none; padding:6px 0; transition:color .15s, transform .15s; } .gf-list a:hover{ color:var(--dz-accent); transform:translateX(3px); opacity:1; } .gf-bottom{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; border-top:1px solid var(--dz-line); margin-top:26px; padding-top:16px; font-size:11.5px; } .gf-bottom a{ color:var(--dz-muted); } /* 上へもどる */ .to-top{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:110; width:46px; height:46px; border-radius:50%; border:1px solid var(--dz-line); background:var(--dz-surface); color:var(--dz-text); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .2s; box-shadow:0 2px 10px rgba(0,0,0,.10); } .to-top.show{ opacity:1; visibility:visible; transform:none; } .to-top:hover{ box-shadow:0 6px 16px rgba(0,0,0,.16); transform:translateY(-2px); } /* ---------- 14. ドロワー（ハンバーガー） ---------- */ .hb-dark{ --hb-bg:#0f0f0f; --hb-text:#f1f1f1; --hb-muted:#aaaaaa; --hb-hover:#272727; --hb-active:#ffffff; } .hb-drawer{ position:fixed; inset:0; z-index:200; pointer-events:none; visibility:hidden; transition:visibility 0s .32s; } .hb-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .28s ease; } html.hb-open .hb-drawer{ pointer-events:auto; visibility:visible; transition:visibility 0s 0s; } html.hb-open .hb-scrim{ opacity:1; } html.hb-open{ overflow:hidden; } .hb-panel{ position:absolute; background:var(--hb-bg); color:var(--hb-text); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom, 0px); } .hb-crest{ position:sticky; top:0; z-index:2; background:var(--hb-bg); padding:16px 56px 12px 18px; border-bottom:1px solid var(--hb-hover); } .hb-title{ font-size:17px; font-weight:700; color:var(--hb-text); } .hb-sub{ font-size:11px; color:var(--hb-muted); margin-top:2px; } .hb-x{ position:absolute; top:8px; right:8px; width:44px; height:44px; border-radius:50%; border:none; background:transparent; color:var(--hb-text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s; } .hb-x:hover{ background:var(--hb-hover); } .hb-sec{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--hb-muted); padding:16px 18px 6px; } .hb-links{ list-style:none; margin:0; padding:0 8px; } .hb-links a{ display:flex; align-items:center; gap:14px; min-height:44px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--hb-text); transition:background .16s ease, transform .12s ease; } .hb-links a:hover{ background:var(--hb-hover); opacity:1; } .hb-links a:active{ transform:scale(.98); } .hb-links .current-menu-item > a,.hb-links .current_page_item > a{ background:color-mix(in srgb, var(--hb-active) 12%, transparent); color:var(--hb-active); font-weight:700; } .hb-links .sub-menu{ list-style:none; margin:0; padding:0 0 0 30px; } .hb-li{ flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--hb-muted); } .hb-lt{ font-size:14px; line-height:1.35; } .hb-promo{ display:block; margin:18px 14px 6px; padding:12px 14px; border-radius:12px; text-decoration:none; background:color-mix(in srgb, var(--hb-active) 10%, transparent); border:1px solid color-mix(in srgb, var(--hb-active) 30%, transparent); } .hb-promo:hover{ background:color-mix(in srgb, var(--hb-active) 18%, transparent); opacity:1; } .hb-promo-t{ display:block; font-weight:700; color:var(--hb-active); font-size:13.5px; } .hb-promo-d{ display:block; font-size:11px; color:var(--hb-muted); margin-top:2px; } .hb-widgets{ padding:14px 14px 0; } .hb-widgets .side-box{ background:transparent; border-color:var(--hb-hover); color:var(--hb-text); } .hb-foot{ padding:18px 18px 26px; font-size:11px; color:var(--hb-muted); line-height:1.8; } /* 型①② 左スライド */ .hb-yt .hb-panel,.hb-dark .hb-panel{ top:0; bottom:0; left:0; width:min(310px, 86vw); border-radius:0 16px 16px 0; transform:translateX(-102%); transition:transform .28s cubic-bezier(.32,.72,.25,1); box-shadow:6px 0 30px rgba(0,0,0,.16); } html.hb-open .hb-yt .hb-panel,html.hb-open .hb-dark .hb-panel{ transform:none; } /* 型③ ボトムシート */ .hb-sheet .hb-panel{ left:0; right:0; bottom:0; max-height:86dvh; border-radius:18px 18px 0 0; transform:translateY(102%); transition:transform .32s cubic-bezier(.32,.72,.25,1); } html.hb-open .hb-sheet .hb-panel{ transform:none; } .hb-sheet .hb-crest::before{ content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--hb-hover); margin:0 auto 10px; } /* 型④ 全画面ガラス */ .hb-glass .hb-scrim{ background:transparent; } .hb-glass .hb-panel{ inset:0; background:color-mix(in srgb, var(--hb-bg) 78%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); opacity:0; transform:scale(1.04); transition:opacity .26s ease, transform .26s ease; padding-bottom:40px; } html.hb-open .hb-glass .hb-panel{ opacity:1; transform:none; } .hb-glass .hb-crest{ background:transparent; } .hb-glass .hb-links,.hb-glass .hb-sec,.hb-glass .hb-crest,.hb-glass .hb-promo,.hb-glass .hb-foot,.hb-glass .hb-widgets{ max-width:560px; margin-left:auto; margin-right:auto; } .hb-glass .hb-lt{ font-size:15.5px; } /* ---------- 15. スクロールで現れる動き ---------- */ .rv{ opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s cubic-bezier(.22,.7,.3,1); } .anim-rich .rv{ transform:translateY(22px); transition-duration:.65s; } .rv.in{ opacity:1; transform:none; } .anim-rich .of-link:hover .frame{ box-shadow:0 10px 26px rgba(0,0,0,.14); } @media (prefers-reduced-motion: reduce){ .rv{ opacity:1 !important; transform:none !important; transition:none !important; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ---------- 16. 暗いスキンの細部 ---------- */ .is-dark .gh.scrolled{ box-shadow:0 1px 0 var(--dz-line); } .is-dark .of-cat{ background:color-mix(in srgb, #000 70%, transparent); color:#fff; } .is-dark .to-top,.is-dark .gh-sug{ box-shadow:none; } /* ---------- 17. 印刷 ---------- */ @media print{ .gh,.side,.gf,.to-top,.hb-drawer,.hc-postnav,.hc-related,.hc-comments{ display:none !important; } .layout{ display:block; padding:0; } .entry{ border:0; padding:0; } body{ background:#fff; color:#000; } } /* ---------- 18. ブロック版ウィジェット（WordPress 標準）をサイド箱に合わせる ---------- */ .side-box > h2,.side-box .wp-block-heading,.side-box .wp-block-search__label,.side-box .wp-block-group > h2{ margin:0 0 10px; font-size:14.5px; font-weight:700; letter-spacing:.08em; color:var(--dz-heading); border-bottom:2px solid var(--dz-heading); padding-bottom:7px; display:block; } .side-box .wp-block-group__inner-container > *:last-child{ margin-bottom:0; } .side-box .wp-block-search__inside-wrapper{ display:flex; gap:0; } .side-box .wp-block-search__input{ border-radius:99px 0 0 99px; min-height:40px; } .side-box .wp-block-search__button{ margin:0; border:1px solid var(--dz-line); border-left:0; border-radius:0 99px 99px 0; background:var(--dz-hover); color:var(--dz-text); padding:0 14px; min-height:40px; cursor:pointer; } .side-box .wp-block-latest-comments{ padding:0; margin:0; } .side-box .wp-block-latest-comments__comment{ margin:0; padding:7px 0; border-bottom:1px dotted var(--dz-line); font-size:13px; line-height:1.6; } .side-box .wp-block-latest-comments__comment-meta{ margin:0; } .side-box .wp-block-latest-comments article{ margin:0; } .side-box .wp-block-latest-comments__comment:last-child{ border-bottom:0; } .blk-area .wp-block-heading{ margin-top:0; }