/* ========================================================= * HOME ONLY: Header hide + floating hamburger after scroll * - JS adds .sc-homeScrolled to on home * - Keep menu button always accessible after scroll * ========================================================= */ body.home .sc-header{ display: none; } /* Home: menu button hidden at top, appears after scroll and stays fixed */ body.home .sc-menuBtn{ display: none; } html.sc-homeScrolled body.home .sc-menuBtn{ display: inline-flex; position: fixed; top: 14px; right: 14px; z-index: 120; box-shadow: var(--sc-shadow-hi); } @supports (padding: max(0px)){ html.sc-homeScrolled body.home .sc-menuBtn{ top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); } } /* ========================================================= * ✅ Menu visibility fix (open but not visible) * - Home header is special; ensure overlay/drawer always above hero * ========================================================= */ .sc-menuOverlay{ z-index: 10010 !important; } .sc-menuDrawer{ z-index: 10020 !important; } /* Home floating hamburger must be above hero media */ html.sc-homeScrolled body.home .sc-menuBtn, html.sc-homeScrolled body.front-page .sc-menuBtn{ z-index: 10030 !important; } /* ========================================================= * HOME ONLY: Hero -> portrait card + no controls + wave bottom * ========================================================= */ body.home .sc-hero--full{ /* full-bleedは維持しつつ、カードを中央配置するため余白を作る */ padding: 14px 0 0; } /* hide prev/next/dots (user requested) */ body.home .sc-hero__controls{ display: none !important; } /* make viewport a portrait "card" centered */ body.home .sc-hero--full .sc-hero__viewport{ width: min(420px, 92vw); margin: 0 auto; border-radius: 22px; border: 1px solid var(--sc-line); overflow: hidden; box-shadow: var(--sc-shadow-hi); background: #000; position: relative; } /* force portrait aspect (like your reference) */ body.home .sc-hero--full .sc-hero__viewport{ aspect-ratio: 9 / 16; } /* image should cover portrait safely */ body.home .sc-hero--full .sc-hero__img{ width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; /* override existing 16/9 */ } /* stronger overlay for legibility */ body.home .sc-hero__overlay{ background: linear-gradient( to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.58) 100% ); } /* HOME ONLY: show only site name (hide title/meta/desc) */ body.home .sc-hero__title, body.home .sc-hero__meta, body.home .sc-hero__desc{ display: none !important; } /* center the site name like the reference (white text over overlay) */ body.home .sc-hero__content{ justify-content: center; align-items: center; text-align: center; padding: 0; } body.home .sc-hero__brand{ display: grid; gap: 10px; justify-items: center; opacity: 1; } body.home .sc-hero__site{ color: #fff; font-weight: 900; letter-spacing: .06em; font-size: clamp(1.35rem, 6vw, 2.15rem); text-shadow: 0 18px 44px rgba(0,0,0,.42); } /* wave bottom (like the 2nd screenshot) */ body.home .sc-hero--full .sc-hero__viewport::after{ content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,16 480,112 720,72 C960,32 1200,0 1440,48 L1440,120 L0,120 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%; pointer-events: none; } @media (min-width: 768px){ body.home .sc-hero--full{ padding-top: 18px; } body.home .sc-hero--full .sc-hero__viewport{ width: min(460px, 86vw); border-radius: 26px; } body.home .sc-hero--full .sc-hero__viewport::after{ height: 62px; } } :root{ /* ✅ Home Brand Hero accent (given palette) */ --sc-brand-1: #23185F; /* navy */ --sc-brand-2: #917C50; /* brown */ --sc-brand-3: #9FA0A0; /* gray */ /* 少し明るめに見せる（彩度と明度を少し上げた見え方） */ --sc-brand-grad: linear-gradient(90deg, rgba(35,24,95,0.96) 0%, rgba(145,124,80,0.94) 55%, rgba(159,160,160,0.94) 100% ); --sc-brand-grad-diag: linear-gradient(135deg, rgba(35,24,95,0.96) 0%, rgba(145,124,80,0.94) 55%, rgba(159,160,160,0.94) 100% ); } /* ========================================================= * Brand gradient (Home Hero wave / ring) * - palette from your sample: * #231B85 (navy) / #917C50 (gold) / #9FA0A0 (gray) * - slightly brighter mix for UI * ========================================================= */ :root{ --sc-brand-c1: #231B85; --sc-brand-c2: #917C50; --sc-brand-c3: #9FA0A0; /* 明るめに混ざるグラデ */ --sc-brand-grad: linear-gradient(135deg, rgba(35,27,133,.92), rgba(145,124,80,.92), rgba(159,160,160,.92)); } /* Site Craft Media Theme v1 - main.css */ /* ========================================================= * /information Page Hero (Full-bleed + BG image + Black title label) * - scoped to .sc-infoPage to avoid affecting other templates * ========================================================= */ .sc-infoPage{ width: 100%; } /* ========================================================= * Global box-sizing (overflow事故の定番対策) * ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } /* Full-bleed hero (no side whitespace) */ .sc-infoHero{ position: relative; /* 100vw は環境によってスクロールバー幅を含み、横はみ出し→右側が見切れる原因になる dvw対応ブラウザではそちらを優先して横はみ出しを潰す */ width: 100vw; width: 100dvw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-left: calc(50% - 50dvw); margin-right: calc(50% - 50dvw); background-image: var(--sc-info-hero-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(180px, 22vw, 320px); display: flex; align-items: flex-end; /* 黒帯を下寄せ */ border-bottom: 1px solid var(--sc-line); overflow: clip; /* 念のため横はみ出しをここで封じる（対応外でも害なし） */ /* 黒帯をヒーロー下に少しはみ出させるため、見切れ防止 */ overflow: visible; } /* overlay (darken image for legibility) */ .sc-infoHero::before{ content:""; position:absolute; inset:0; background: radial-gradient(80% 70% at 40% 45%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.70) 100%); z-index: 0; } .sc-infoHero__inner{ position: relative; z-index: 1; width: 100%; /* 黒帯を“下にくっつける”用に下側を厚めに */ padding-top: clamp(12px, 3vw, 22px); padding-bottom: clamp(18px, 5vw, 44px); } .sc-infoHero__title{ /* ROOF-like: place the black label near the bottom, centered */ position: absolute; left: 50%; bottom: clamp(14px, 3.6vw, 28px); /* はみ出し量が強すぎると本文に食われるので少し弱める */ transform: translateX(-50%) translateY(28%); margin: 0; display: inline-block; z-index: 2; } /* black label box + fixed title text */ .sc-infoHero__label{ display: inline-flex; align-items: center; justify-content: center; /* 見本（ROOF）寄せ：もっと大きく */ padding: 18px 26px; background: rgba(0,0,0,.88); color: #fff; font-weight: 900; letter-spacing: .04em; border-radius: 0; /* TCDっぽく角を立てる（必要なら後で丸め可） */ box-shadow: 0 18px 44px rgba(0,0,0,.35); font-size: clamp(1.45rem, 5.2vw, 2.55rem); line-height: 1.1; /* ROOF-like subtle angle */ transform: skewX(-10deg); } /* Body spacing below hero */ .sc-infoBody{ /* compensate for the label overlap (so content doesn't get tucked under it) */ padding-top: calc(var(--sc-gap-6) + 44px); } @media (min-width: 1024px){ .sc-infoHero{ min-height: clamp(220px, 18vw, 360px); } } /* ========================================================= * /information 2列タイルの「右側が見切れる」事故を完全に潰す * - grid/child の min-width が効いてオーバーフローするケース対策 * ========================================================= */ .sc-layout__main{ min-width: 0; } .sc-postGrid{ min-width: 0; } .sc-postGrid--tiles{ width: 100%; max-width: 100%; } .sc-postGrid--tiles .sc-postCard{ min-width: 0; } /* ========================================================= Site Craft Media Theme v1 - main.css Trust UI / Mobile-first / CWV friendly (no heavy effects) ========================================================= */ /* ========================================================= * A11y helper (screen-reader only) * ========================================================= */ .sc-srOnly{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* ========================================================= * Section actions (button row) * ========================================================= */ .sc-sectionActions{ margin-top: 18px; display:flex; justify-content:center; } .sc-btn{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; padding: 12px 18px; border-radius: 999px; text-decoration:none; font-weight: 900; border: 1px solid var(--sc-line); background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-shadow-sm); } .sc-btn:hover{ transform: translateY(-1px); box-shadow: var(--sc-shadow-md); } .sc-btn--primary{ background: var(--sc-accent); color: #fff; border-color: rgba(0,0,0,0); } /* ----- Design tokens (fallback) ----- */ :root { --sc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; --sc-ink: #0f172a; --sc-sub: #334155; --sc-muted: #64748b; --sc-line: #e2e8f0; --sc-bg: #ffffff; --sc-surface: #f8fafc; --sc-accent: #1e3a8a; --sc-accent-2: #2563eb; --sc-radius: 16px; --sc-radius-sm: 12px; --sc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --sc-shadow-md: 0 12px 34px rgba(15, 23, 42, 0.10); --sc-shadow-hi: 0 18px 54px rgba(15, 23, 42, 0.14); --sc-container: 1120px; --sc-content: 720px; --sc-gap-1: 0.25rem; --sc-gap-2: 0.5rem; --sc-gap-3: 0.75rem; --sc-gap-4: 1rem; --sc-gap-5: 1.25rem; --sc-gap-6: 1.5rem; --sc-gap-8: 2rem; --sc-gap-10: 2.5rem; --sc-gap-12: 3rem; } /* ----- Base ----- */ body.scmt { font-family: var(--sc-font-sans); color: var(--sc-ink); background: var(--sc-bg); letter-spacing: 0.01em; } .sc-container { width: 100%; max-width: var(--sc-container); margin: 0 auto; padding-left: var(--sc-gap-4); padding-right: var(--sc-gap-4); } .sc-main { padding-top: var(--sc-gap-6); padding-bottom: var(--sc-gap-12); } /* TCD-ish overall rhythm */ .sc-main .sc-topSection:first-child{ margin-top: 2px; } /* Skip link (visible when focused) */ .sc-skip-link:focus { position: fixed !important; left: 12px; top: 12px; z-index: 9999; padding: 10px 12px; background: #fff; border: 1px solid var(--sc-line); border-radius: 12px; box-shadow: var(--sc-shadow-sm); } /* ----- Header ----- */ .sc-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sc-line); } .sc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-gap-4); padding-top: var(--sc-gap-3); padding-bottom: var(--sc-gap-3); } .sc-brand__link { display: inline-flex; align-items: center; gap: var(--sc-gap-3); text-decoration: none; } .sc-brand__name { font-weight: 900; letter-spacing: 0.01em; font-size: 1.05rem; color: var(--sc-ink); line-height: 1.2; } .sc-brand__desc { display: none; font-size: 0.85rem; color: var(--sc-muted); } .sc-brand__logo img { width: auto; height: 36px; max-width: 220px; } /* Right side */ .sc-header__right { display: flex; align-items: center; gap: var(--sc-gap-4); } /* ============================================================ + * Header: Hamburger Menu (TCD-ish) + * ============================================================ */ .sc-menuBtn{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--sc-line); background: #fff; box-shadow: var(--sc-shadow-sm); cursor: pointer; display:inline-flex; align-items:center; justify-content:center; } .sc-menuBtn:hover{ box-shadow: var(--sc-shadow-md); transform: translateY(-1px); } .sc-menuBtn__lines{ position: relative; width: 18px; height: 12px; display:block; } .sc-menuBtn__lines::before, .sc-menuBtn__lines::after{ content:""; position:absolute; left:0; right:0; height:2px; background: var(--sc-ink); border-radius: 2px; } .sc-menuBtn__lines::before{ top:2px; } .sc-menuBtn__lines::after{ bottom:2px; } .sc-menuOverlay{ position: fixed; inset: 0; background: rgba(15, 23, 42, 0.42); z-index: 80; } .sc-menuDrawer{ position: fixed; right: 0; top: 0; height: 100vh; width: min(86vw, 360px); background: #fff; border-left: 1px solid var(--sc-line); box-shadow: var(--sc-shadow-hi); z-index: 90; } .sc-menuDrawer__inner{ padding: 18px; display:flex; flex-direction: column; gap: 16px; } .sc-menuDrawer__head{ display:flex; align-items:center; justify-content: space-between; gap: 12px; } .sc-menuDrawer__title{ font-weight: 900; letter-spacing: .02em; font-size: 1.05rem; color: var(--sc-ink); } .sc-menuClose{ width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--sc-line); background: var(--sc-surface); cursor:pointer; font-size: 22px; font-weight: 900; color: var(--sc-ink); } .sc-menuClose:hover{ background:#fff; } .sc-menuList{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; } .sc-menuLink{ display:flex; align-items:center; justify-content: space-between; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--sc-line); background: #fff; text-decoration:none; font-weight: 900; color: var(--sc-ink); } .sc-menuLink:hover{ box-shadow: var(--sc-shadow-md); transform: translateY(-1px); } /* scroll lock when menu open */ .sc-menuOpen{ overflow: hidden; } /* ----- Footer ----- */ .sc-footer { border-top: 1px solid var(--sc-line); background: #fff; /* bottom(コピーライト)は白維持 */ } .sc-footer__top{ position: relative; isolation: isolate; /* 背景画像（footer.php から CSS変数で注入） */ background-image: var(--sc-footer-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: clamp(44px, 8vw, 86px); padding-bottom: clamp(34px, 6vw, 68px); } /* Blue overlay layer for footer top (現行の青 #041F70 をレイヤー化) */ .sc-footer__top::before{ content:""; position:absolute; inset:0; z-index:0; background: rgba(4, 31, 112, 0.82); } /* Ensure footer top contents are above overlay */ .sc-footer__top > *{ position: relative; z-index: 1; } /* Footer top: white + bold (keep copyright row black on white) */ .sc-footer__top, .sc-footer__top a{ color: #fff; font-weight: 900; } .sc-footer__top a:hover{ opacity: .92; } /* footer: stacked (TCD-ish) */ .sc-footer__stack{ display:flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .sc-footer__brandLink{ text-decoration:none; } .sc-footer__siteName{ font-weight: 900; font-size: 1.25rem; letter-spacing: .02em; color: #fff; } .sc-footer__nav{ width: min(520px, 92vw); } .sc-footer__menu{ list-style:none; margin:0; padding:0; display:grid; gap: 12px; } .sc-footer__link{ display:block; padding: 14px 16px; border-radius: 999px; border: 1px solid rgba(226,232,240,.9); background: rgba(255,255,255,.92); text-decoration:none; font-weight: 900; color: var(--sc-ink); box-shadow: var(--sc-shadow-sm); } /* Fix: footer top sets all to white via ".sc-footer__top a". Keep button text black inside footer menu pills. */ .sc-footer__top .sc-footer__link{ color: var(--sc-ink); } .sc-footer__top .sc-footer__link:hover{ color: var(--sc-ink); } .sc-footer__link:hover{ box-shadow: var(--sc-shadow-md); transform: translateY(-1px); } .sc-footer__desc { margin: 0.6rem 0 0; color: rgba(255,255,255,.88); font-size: 0.95rem; } .sc-footer__note { margin: 0.9rem 0 0; color: rgba(255,255,255,.84); font-size: 0.85rem; line-height: 1.7; } .sc-footer__links { display: grid; gap: var(--sc-gap-6); } .sc-footer__title { margin: 0 0 var(--sc-gap-2); font-size: 0.95rem; font-weight: 900; color: #fff; } .sc-footer__list, .sc-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sc-footer__list a, .sc-footer__menu a { text-decoration: none; color: rgba(255,255,255,.92); font-weight: 700; } .sc-footer__list a:hover, .sc-footer__menu a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.22em; } .sc-footer__bottom { border-top: 1px solid var(--sc-line); background: #fff; } .sc-footer__bottomInner { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-gap-4); padding-top: var(--sc-gap-4); padding-bottom: var(--sc-gap-4); } .sc-footer__copy { color: #000; /* 太めの黒字 */ font-weight: 900; /* 太め */ font-size: .86rem; } /* Floating "to top" button (bottom-right, small blue) */ .sc-toTopFab{ position: fixed; right: 14px; bottom: 14px; z-index: 90; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 900; font-size: 18px; line-height: 1; color: #fff; background: var(--sc-accent-2); box-shadow: 0 12px 28px rgba(15,23,42,.20); border: 1px solid rgba(255,255,255,.22); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; } .sc-toTopFab:hover{ filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 16px 34px rgba(15,23,42,.26); } .sc-toTopFab:focus{ outline: 2px solid rgba(37,99,235,.35); outline-offset: 3px; } /* Safe area (iPhone) */ @supports (padding: max(0px)){ .sc-toTopFab{ right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); } } /* Desktop footer grid */ @media (min-width: 900px) { .sc-footer__top { grid-template-columns: 1fr 2fr; align-items: start; } .sc-footer__links { grid-template-columns: repeat(3, 1fr); } } /* ----- Content typography defaults ----- */ .sc-prose { max-width: var(--sc-content); margin: 0 auto; } .sc-prose h1, .sc-prose h2, .sc-prose h3, .sc-prose h4 { line-height: 1.35; color: var(--sc-ink); margin-top: 1.8em; margin-bottom: 0.6em; font-weight: 900; letter-spacing: 0.01em; } .sc-prose h1 { font-size: 1.75rem; } .sc-prose h2 { font-size: 1.35rem; } .sc-prose h3 { font-size: 1.15rem; } .sc-prose p { margin: 1.05em 0; color: var(--sc-sub); } .sc-prose a { color: var(--sc-accent-2); font-weight: 800; } .sc-prose a:hover { text-decoration: underline; } .sc-card { background: #fff; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); } .sc-card--pad { padding: var(--sc-gap-6); } /* Utility */ .sc-muted { color: var(--sc-muted); } .sc-divider { border: none; border-top: 1px solid var(--sc-line); margin: var(--sc-gap-8) 0; } /* Breadcrumb */ .sc-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 0.22em; } /* ============================================================ * /information (Articles List) * ============================================================ */ .sc-postGrid{ display:grid; grid-template-columns: 1fr; gap: var(--sc-gap-4); } .sc-postCard{ display:grid; grid-template-columns: 160px 1fr; gap: var(--sc-gap-4); padding: var(--sc-gap-4); align-items: stretch; } @media (max-width: 640px){ .sc-postCard{ grid-template-columns: 1fr; } } .sc-postCard__media{ display:block; border-radius: 14px; overflow:hidden; text-decoration:none; } .sc-postCard__img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 16 / 10; } .sc-postCard__placeholder svg{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; } .sc-postCard__title{ margin:0; font-size: 1.08rem; font-weight: 900; } .sc-postCard__meta{ font-size: 0.85rem; margin-top: 6px; display:flex; flex-wrap:wrap; gap: 10px; align-items:center; } .sc-postCard__cat{ text-decoration:none; color: var(--sc-accent-2); font-weight: 800; } .sc-postCard__excerpt{ margin: 0.7rem 0 0; } .sc-pager{ margin-top: var(--sc-gap-8); display:flex; justify-content:center; } /* ============================================================ * TCD-like spacing / typography (lightweight) * ============================================================ */ .sc-pageTitle{ margin:0; font-size: 1.55rem; font-weight: 900; letter-spacing: .02em; line-height: 1.2; } .sc-linkTitle{ text-decoration:none; color: var(--sc-ink); } .sc-linkTitle:hover{ opacity: .86; } /* ============================================================ * 2-column layout (main + sidebar) * ============================================================ */ .sc-layout--hasSidebar{ display:grid; grid-template-columns: 1fr; gap: var(--sc-gap-6); align-items:start; } @media (min-width: 1024px){ .sc-layout--hasSidebar{ grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sc-gap-8); } } .sc-layout__side{ display:grid; gap: var(--sc-gap-4); } @media (min-width: 1024px){ .sc-layout__side{ position: sticky; top: 18px; } } .sc-sideTitle{ margin:0 0 10px; font-size: 1.02rem; font-weight: 900; letter-spacing: .02em; } .sc-sideBody{ margin-top: 8px; } .sc-sideList{ list-style:none; padding:0; margin:0; display:grid; gap: 8px; } .sc-sideList a{ text-decoration:none; color: var(--sc-ink); font-weight: 800; } .sc-sideList a:hover{ opacity: .86; } /* ============================================================ * /information list cards (hierarchy + trust UI) * ============================================================ */ .sc-postGrid{ display:grid; grid-template-columns: 1fr; gap: var(--sc-gap-4); } /* Card: image left, text right (TCD-like list density) */ .sc-postCard{ display:grid; grid-template-columns: 180px 1fr; gap: var(--sc-gap-4); padding: var(--sc-gap-4); align-items: stretch; transition: transform .15s ease, box-shadow .15s ease; } @media (max-width: 640px){ .sc-postCard{ grid-template-columns: 1fr; } } .sc-postCard:hover{ transform: translateY(-1px); } .sc-postCard__media{ display:block; border-radius: 14px; overflow:hidden; text-decoration:none; } .sc-postCard__img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 16 / 10; } .sc-postCard__placeholder svg{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; } .sc-postCard__title{ margin:0; font-size: 1.10rem; font-weight: 900; letter-spacing: .015em; line-height: 1.25; } .sc-postCard__meta{ font-size: 0.86rem; margin-top: 8px; display:flex; flex-wrap:wrap; gap: 10px; align-items:center; } .sc-postCard__cat{ text-decoration:none; color: var(--sc-accent-2); font-weight: 900; } .sc-postCard__cat:hover{ opacity: .86; } .sc-postCard__excerpt{ margin: 0.75rem 0 0; line-height: 1.75; } .sc-pager{ margin-top: var(--sc-gap-8); display:flex; justify-content:center; } /* ============================================================ * /information tiles (ROOF-like) * - page-information.php の sc-postGrid--tiles / sc-pager--tiles / sc-searchForm にスコープ * - 既存の .sc-postCard（横長リスト）を壊さない * ============================================================ */ /* 2列タイル（スマホでも2列） */ .sc-postGrid--tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 極小端末だけ1列（崩れ防止） */ @media (max-width: 360px){ .sc-postGrid--tiles{ grid-template-columns: 1fr; } } /* タイル型：画像上・テキスト下（ROOF寄せ） */ .sc-postGrid--tiles .sc-postCard{ grid-template-columns: 1fr; gap: 10px; padding: 10px; border-radius: 16px; overflow: hidden; } .sc-postGrid--tiles .sc-postCard__media{ border-radius: 14px; } /* タイルの高さ/余白を詰める（ROOFの密度） */ .sc-postGrid--tiles .sc-postCard__body{ padding: 0 2px 2px; } .sc-postGrid--tiles .sc-postCard__title{ font-size: .98rem; line-height: 1.3; } .sc-postGrid--tiles .sc-postCard__meta{ margin-top: 6px; font-size: .78rem; gap: 8px; } /* 画像比率：2列で安定（ROOFに近い見え方） */ .sc-postGrid--tiles .sc-postCard__img, .sc-postGrid--tiles .sc-postCard__placeholder svg{ aspect-ratio: 1 / 1; } /* ============================================================ * Pager tiles (ROOF-like) * ============================================================ */ .sc-pager--tiles{ margin-top: 22px; } .sc-pager--tiles .sc-pager__list{ list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 0; border: 1px solid var(--sc-line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--sc-shadow-sm); } .sc-pager--tiles .sc-pager__item{ margin: 0; padding: 0; } /* 既存の .sc-pager .page-numbers（丸ピル）を上書きして「四角タイル」にする */ .sc-pager--tiles .page-numbers{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-right: 1px solid var(--sc-line); border-radius: 0; text-decoration: none; font-weight: 900; color: var(--sc-ink); background: #fff; } .sc-pager--tiles .sc-pager__item:last-child .page-numbers{ border-right: 0; } .sc-pager--tiles .page-numbers:hover{ background: var(--sc-surface); } .sc-pager--tiles .page-numbers.current{ background: #0f172a; color: #fff; } /* ============================================================ * Sidebar Search (ROOF-like) * - 画像5の「枠＋右端アイコン」寄せ * ============================================================ */ .sc-searchForm__row{ position: relative; width: 100%; } .sc-searchForm__input{ width: 100%; height: 44px; padding: 0 48px 0 14px; border-radius: 10px; border: 1px solid var(--sc-line); background: #fff; color: var(--sc-ink); font-weight: 800; outline: none; box-sizing: border-box; } .sc-searchForm__input::placeholder{ color: #94a3b8; font-weight: 800; } .sc-searchForm__input:focus{ border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .sc-searchForm__btn{ position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--sc-line); background: var(--sc-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .sc-searchForm__btn:hover{ background: #fff; box-shadow: var(--sc-shadow-sm); } .sc-searchForm__icon{ font-size: 16px; line-height: 1; } /* ============================================================ * Top "Latest" (2-column card grid) * ============================================================ */ .sc-latestGrid{ display:grid; grid-template-columns: 1fr; gap: var(--sc-gap-4); } @media (min-width: 768px){ .sc-latestGrid{ grid-template-columns: 1fr 1fr; /* 2-col */ gap: var(--sc-gap-5); } } .sc-latestCard{ padding: 0; /* image + body separation */ overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .sc-latestCard:hover{ transform: translateY(-1px); } .sc-cardThumb{ display:block; text-decoration:none; } .sc-cardThumb__img{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio: 16 / 9; } .sc-cardThumb__ph svg{ width:100%; height:auto; display:block; aspect-ratio: 16 / 9; } .sc-latestCard__body{ padding: var(--sc-gap-4); } .sc-latestCard__title{ margin: 0; font-size: 1.06rem; font-weight: 900; line-height: 1.25; letter-spacing: .015em; } .sc-latestCard__meta{ font-size: 0.86rem; margin-top: 8px; display:flex; flex-wrap:wrap; gap: 10px; align-items:center; } .sc-dot{ opacity: .8; } .sc-catLink{ text-decoration:none; color: var(--sc-accent-2); font-weight: 900; } .sc-catLink:hover{ opacity: .86; } .sc-latestCard__excerpt{ margin: 0.75rem 0 0; line-height: 1.75; } /* (snip) */ /* ============================================================ * Category blocks (TCD-like hierarchy) * ============================================================ */ .sc-catBlockGrid{ display:grid; grid-template-columns: 1fr; gap: var(--sc-gap-5); } .sc-catBlock{ padding: var(--sc-gap-4); } .sc-catBlock__head{ display:flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--sc-gap-3); } .sc-catBlock__title{ margin:0; font-size: 1.08rem; font-weight: 900; letter-spacing: .02em; } .sc-catBlock__title a{ text-decoration:none; color: var(--sc-ink); } .sc-catBlock__title a:hover{ opacity:.86; } .sc-catBlock__more{ text-decoration:none; color: var(--sc-accent-2); font-weight: 900; font-size: .9rem; } .sc-catMiniGrid{ display:grid; grid-template-columns: 1fr; gap: var(--sc-gap-3); } @media (min-width: 640px){ .sc-catMiniGrid{ grid-template-columns: repeat(3, 1fr); } } .sc-catMini{ display:grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: stretch; } .sc-catMini__thumb{ display:block; border-radius: 10px; overflow:hidden; } .sc-catMini__thumb img, .sc-catMini__thumb svg{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .sc-catMini__title{ margin:0; font-size: .95rem; font-weight: 900; line-height: 1.35; } .sc-catMini__meta{ margin-top: 6px; font-size: .82rem; } /* ============================================================ * Category mini cards: 2-column tiles on mobile * - 1枚目の「カテゴリ別記事」が縦並び→スマホで横2列にする * - ROOF風に「画像上・テキスト下」のタイル型に寄せる * ============================================================ */ @media (max-width: 640px){ /* 2列グリッド化 */ .sc-catMiniGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* タイル型カード */ .sc-catMini{ grid-template-columns: 1fr; /* 画像上・文字下 */ gap: 10px; border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: var(--sc-shadow-sm); overflow: hidden; padding: 10px; } .sc-catMini__thumb{ border-radius: 12px; overflow: hidden; } .sc-catMini__thumb img, .sc-catMini__thumb svg{ width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 1 / 1; /* 2列で安定。必要なら 4/3 に変更可 */ } .sc-catMini__title{ font-size: .92rem; line-height: 1.35; } .sc-catMini__meta{ margin-top: 4px; font-size: .78rem; } } /* 極小端末は1列へ戻して崩れ防止 */ @media (max-width: 360px){ .sc-catMiniGrid{ grid-template-columns: 1fr; } } /* ============================================================ * Final polish: spacing / typography / card hierarchy * - Mobile-first, no layout break * ============================================================ */ /* Prevent horizontal overflow (mobile safety net) */ html, body{ max-width: 100%; overflow-x: hidden; } /* Better wrap for long titles/URLs */ .sc-linkTitle, .sc-postCard__title a, .sc-catMini__title a{ overflow-wrap: anywhere; word-break: break-word; } /* Unified card hover feel (subtle, TCD-ish) */ .sc-card{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .sc-card:hover{ transform: translateY(-1px); } /* If your base has borders, this keeps it consistent */ .sc-card, .sc-latestCard, .sc-postCard{ border-radius: 16px; } /* ============================================================ * Container spacing tuning (desktop gets a bit more air) * - If sc-container already has padding, this safely complements * ============================================================ */ .sc-container{ padding-left: 16px; padding-right: 16px; } @media (min-width: 768px){ .sc-container{ padding-left: 22px; padding-right: 22px; } } @media (min-width: 1024px){ .sc-container{ padding-left: 26px; padding-right: 26px; } } /* ============================================================ * Latest cards: make spacing + media stable * ============================================================ */ .sc-latestCard{ overflow: hidden; } .sc-cardThumb__img{ width: 100%; height: auto; display:block; object-fit: cover; } .sc-cardThumb__ph{ display:block; } .sc-cardThumb__ph svg{ width:100%; height:auto; display:block; } /* ============================================================ * /information list card: ensure no break on small screens * ============================================================ */ @media (max-width: 640px){ .sc-postCard{ padding: var(--sc-gap-4); } .sc-postCard__media{ border-radius: 14px; } } /* Extreme small devices: avoid cramped 2-col in mini blocks */ @media (max-width: 420px){ .sc-catMini{ grid-template-columns: 1fr; } .sc-catMini__thumb{ border-radius: 12px; } } /* ============================================================ * Category blocks: align hierarchy + avoid overflow * ============================================================ */ .sc-catBlock{ overflow: hidden; } .sc-catBlock__head{ gap: 14px; } .sc-catBlock__more{ white-space: nowrap; } @media (max-width: 360px){ .sc-catBlock__head{ flex-direction: column; align-items: flex-start; } .sc-catBlock__more{ margin-top: 6px; } } /* ============================================================ * Sidebar: sticky only on desktop, safe width, safe forms * ============================================================ */ .sc-layout__side{ min-width: 0; } .sc-layout__side input[type="search"], .sc-layout__side input[type="text"], .sc-layout__side input[type="email"], .sc-layout__side input[type="url"]{ width: 100%; max-width: 100%; box-sizing: border-box; } /* ============================================================ * Pager: spacing and tap targets (mobile UX) * ============================================================ */ .sc-pager .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; text-decoration:none; } .sc-pager .page-numbers.current{ font-weight: 900; } /* ============================================================ * Typography micro-tuning (TCD-ish) * ============================================================ */ .sc-muted{ line-height: 1.75; } .sc-pageTitle{ line-height: 1.2; } .sc-postCard__title, .sc-latestCard__title, .sc-catBlock__title{ letter-spacing: .015em; } /* ============================================================ * Top page section rhythm (TCD-like) * - Single source of truth for section spacing * ============================================================ */ .sc-topSection{ margin-bottom: clamp(32px, 6vw, 56px); } @media (max-width: 640px){ .sc-topSection{ margin-bottom: 34px; } } /* ============================================================ * Wave Divider (between Featured and Tabs) - v2 (SVG inline) * front-page.php に を直置きした前提。 * 旧実装（.sc-waveDivider__inner + 疑似要素SVG + ノイズ/フェード）と競合すると不自然になるため、 * ここで「新仕様」を優先し、旧仕様は無害化する。 * ============================================================ */ .sc-waveDivider{ /* ✅ full-bleed（左右の余白まで画面いっぱい） */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* 余白は“区切り”として控えめに（フル幅でも同じ） */ margin-top: 18px; margin-bottom: 18px; position: relative; overflow: hidden; padding: 0; box-sizing: border-box; } /* 新: inline SVG */ .sc-waveDivider__svg{ width: 100%; /* ✅ 高さは少しだけ可変にして端末差で崩れにくく */ height: clamp(84px, 9vw, 140px); display: block; } .sc-waveDivider__wave--accent{ fill: var(--sc-accent); opacity: 0.85; } .sc-waveDivider__wave--accent2{ fill: var(--sc-accent); opacity: 0.35; } @media (min-width: 768px){ .sc-waveDivider__svg{ height: clamp(96px, 7vw, 150px); } .sc-waveDivider{ margin-top: 22px; margin-bottom: 22px; } } /* 旧: inner/疑似要素の波形・ノイズ・フェードを無害化（残っていても見た目に出さない） */ .sc-waveDivider__inner{ height: auto !important; background: none !important; } .sc-waveDivider__inner::before, .sc-waveDivider__inner::after, .sc-waveDivider::before, .sc-waveDivider::after{ content: none !important; display: none !important; } /* 旧実装ブロックは front-page.php のSVG直置きにより不要。 ただし他テンプレで使う可能性もあるので、削除ではなく上で無害化している。 */ /* ============================================================ * Section Heading Decor (Ranking / Category) * - Center align + ribbon badge like the provided sample * - uses accent palette * ============================================================ */ .sc-sectionHead{ /* grid makes "center title + right link" stable */ display:grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: var(--sc-gap-4); margin-bottom: var(--sc-gap-4); } .sc-sectionHead h2{ grid-column: 2; justify-self: center; text-align:center; } .sc-sectionHead > a{ grid-column: 3; justify-self: end; } .sc-sectionTitle{ margin: 0; text-align: center; } .sc-sectionTitle--badge{ /* full-bleed（左右の白い余白まで広げる） */ display:block; width: 100vw; /* これを生かす（下で潰さない） */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; padding: 0 16px; /* 画面端ベタ付きを防ぐガター */ } .sc-sectionTitle--badge > span{ position: relative; display:block; width: 100%; text-align: center; padding: 16px 18px; font-weight: 900; letter-spacing: .04em; border-radius: 0; /* 平行四辺形を綺麗に見せる */ color: #fff; background: linear-gradient(90deg, var(--sc-accent-2), var(--sc-accent)); box-shadow: 0 10px 26px rgba(15,23,42,.14); transform: skewX(-12deg); /* 平行四辺形 */ transform-origin: center; font-size: clamp(18px, 2.4vw, 26px); /* 文字を大きく＆自然に追従 */ line-height: 1.2; } .sc-sectionTitle--badge > span::after{ content:""; position:absolute; right: -22px; /* 斜め分を外に出す */ top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.12)); transform: skewX(12deg); /* 本体の skew と打ち消してエッジを真っ直ぐに */ border-top-right-radius: 0; border-bottom-right-radius: 0; } /* 左側も同様に斜めエッジを追加して“板感”を完成させる */ .sc-sectionTitle--badge > span::before{ content:""; position:absolute; left: -22px; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0)); transform: skewX(12deg); } /* ============================================================ * FIX: .sc-sectionHead が無条件に上書きされていた（全ページ崩壊の原因） * - モバイル時だけ縦積みにする * ============================================================ */ @media (max-width: 640px){ .sc-sectionHead{ display:flex; flex-direction: column; align-items: center; text-align:center; } .sc-sectionHead > a{ align-self: center; } .sc-sectionTitle{ margin: 0 0 var(--sc-gap-4); font-size: 1.2rem; font-weight: 900; letter-spacing: .02em; } } /* ============================================================ * Section heading polish (TCD-like) * ============================================================ */ .sc-sectionHead h2{ letter-spacing: .03em; } .sc-sectionHead > a{ font-size: .92rem; } .sc-sectionHead .sc-muted{ font-size: .9rem; opacity: .92; } /* ============================================================ * TCD-like Hero Slider * ============================================================ */ /* ============================================================ * Home Hero (Portrait + Center Circle Text + Bottom Wave) * - front-page.php の .sc-hero--homePortrait 専用 * - 2枚目（KOTO MEET風）の見た目をCSSで作る * ============================================================ */ .sc-hero--homePortrait{ /* full-bleed */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 14px; padding-right: 14px; } .sc-hero--homePortrait .sc-hero__viewport{ border-radius: 18px; overflow: hidden; border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow-hi); background: #000; } /* Portrait feel (mobile first) */ .sc-hero--homePortrait .sc-hero__img, .sc-hero--homePortrait .sc-hero__viewport{ aspect-ratio: 3 / 4; } @media (min-width: 768px){ .sc-hero--homePortrait{ padding-left: 22px; padding-right: 22px; } .sc-hero--homePortrait .sc-hero__img, .sc-hero--homePortrait .sc-hero__viewport{ aspect-ratio: 16 / 9; } } /* Center circle text block */ .sc-hero__homeText{ position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; z-index: 2; pointer-events: none; } .sc-hero__homeTextInner{ width: min(78vw, 360px); height: min(78vw, 360px); border-radius: 999px; display:flex; align-items:center; justify-content:center; text-align:center; padding: 22px; /* 半透明の丸 + ほんのりぼかし */ background: rgba(0,0,0,.22); backdrop-filter: blur(6px); /* ピンク系リング（KOTO MEET風） */ border: 4px solid rgba(255, 61, 134, .86); box-shadow: 0 18px 60px rgba(0,0,0,.35); } .sc-hero__homeTitle{ color:#fff; font-weight: 900; letter-spacing: .06em; line-height: 1.15; text-shadow: 0 14px 44px rgba(0,0,0,.45); font-size: clamp(1.15rem, 4.8vw, 2rem); } /* If you later add subtitle lines inside .sc-hero__homeTitle, keep readable */ .sc-hero__homeTitle small{ display:block; margin-top: 10px; font-size: .9rem; font-weight: 800; opacity: .92; letter-spacing: .03em; } /* Bottom wave (pink) */ .sc-hero__wave{ position:absolute; left:0; right:0; bottom:-1px; height: 92px; z-index: 3; pointer-events:none; background-repeat: no-repeat; background-size: 100% 100%; /* SVG wave inline */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,96 C240,160 480,32 720,96 C960,160 1200,64 1440,120 L1440,160 L0,160 Z' fill='%23ff3d86'/%3E%3Cpath d='M0,112 C260,154 520,60 760,112 C980,156 1200,90 1440,132 L1440,160 L0,160 Z' fill='%23ffffff' fill-opacity='1'/%3E%3C/svg%3E"); } @media (min-width: 768px){ .sc-hero__wave{ height: 110px; } } /* ============================================================ * Wave Divider (between sections) * - Fix: remove empty ruleset warnings * - Add: tighter spacing, subtle noise, edge fade, gradient veil * ============================================================ */ .sc-hero{ position: relative; } .sc-hero--full{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .sc-hero--full .sc-hero__viewport{ border-radius: 0; border-left: none; border-right: none; } .sc-hero--full .sc-hero__img, .sc-hero--full .sc-hero__viewport{ aspect-ratio: 16 / 9; } @media (min-width: 1024px){ .sc-hero--full .sc-hero__img, .sc-hero--full .sc-hero__viewport{ aspect-ratio: 21 / 9; /* 2枚目のようなワイド感 */ } } .sc-hero__viewport{ border-radius: var(--sc-radius); overflow: hidden; border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow-hi); background: #000; } .sc-hero__track{ display: flex; width: 100%; transform: translateX(0%); transition: transform .45s ease; } .sc-hero__slide{ flex: 0 0 100%; position: relative; } .sc-hero__link{ display:block; position: relative; text-decoration:none; color: #fff; } .sc-hero__img{ width:100%; height:auto; display:block; object-fit: cover; aspect-ratio: 16 / 9; } .sc-hero__overlay{ position:absolute; inset:0; background: radial-gradient(90% 70% at 40% 45%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.70) 100%); } .sc-hero__content{ position:absolute; inset: 0; display:flex; flex-direction: column; justify-content: center; padding: clamp(18px, 4.2vw, 46px); gap: 12px; } .sc-hero__brand{ display:flex; flex-wrap: wrap; gap: 10px; align-items: baseline; opacity: .95; } .sc-hero__site{ font-weight: 900; letter-spacing: .02em; } .sc-hero__desc{ font-size: .92rem; opacity: .92; } .sc-hero__title{ margin: 0; font-size: clamp(1.45rem, 4.6vw, 2.35rem); font-weight: 900; line-height: 1.15; letter-spacing: .02em; text-shadow: 0 18px 44px rgba(0,0,0,.38); } .sc-hero__meta{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; } .sc-hero__pill{ display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); font-weight: 800; font-size: .86rem; } .sc-hero__metaText{ font-size: .9rem; opacity: .92; } .sc-hero__controls{ display:flex; align-items:center; justify-content:center; gap: 10px; margin-top: 12px; } .sc-hero__btn{ width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--sc-line); background: #fff; box-shadow: var(--sc-shadow-sm); cursor: pointer; font-size: 20px; font-weight: 900; color: var(--sc-ink); } .sc-hero__btn:hover{ box-shadow: var(--sc-shadow-md); transform: translateY(-1px); } .sc-hero__dots{ display:flex; gap: 8px; align-items:center; } .sc-hero__dot{ width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1; border: none; cursor: pointer; } .sc-hero__dot.is-active{ background: var(--sc-accent-2); } /* ============================================================ * Featured (single) * ============================================================ */ .sc-featured{ padding: 0; overflow:hidden; box-shadow: var(--sc-shadow-md); } .sc-featured__media{ display:block; text-decoration:none; } .sc-featured__img{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio: 16 / 9; } .sc-featured__body{ padding: clamp(16px, 3vw, 22px); } .sc-featured__title{ margin:0; font-size: 1.18rem; font-weight: 900; line-height: 1.25; } .sc-featured__meta{ margin-top: 8px; font-size: .86rem; } /* ============================================================ * Tabs (TCD-like) * ============================================================ */ .sc-tabs{ border: 1px solid var(--sc-line); border-radius: var(--sc-radius); background: #fff; box-shadow: var(--sc-shadow-sm); overflow:hidden; } .sc-tabs__nav{ display:grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--sc-line); background: var(--sc-surface); } .sc-tabs__tab{ appearance:none; border: none; background: transparent; padding: 15px 10px; font-weight: 900; color: var(--sc-sub); cursor: pointer; letter-spacing: .02em; } .sc-tabs__tab[aria-selected="true"]{ background: #fff; color: var(--sc-ink); box-shadow: inset 0 -2px 0 var(--sc-accent-2); } .sc-tabs__panel{ padding: clamp(14px, 2.8vw, 18px); } .sc-tabCards{ display:grid; grid-template-columns: 1fr; gap: var(--sc-gap-4); } @media (min-width: 640px){ .sc-tabCards{ grid-template-columns: repeat(3, 1fr); } } /* ============================================================ * Category tab cards: 2-column on mobile (ONLY for category section) * - Apply only when .sc-tabCards--cat2col is present * ============================================================ */ .sc-tabCards.sc-tabCards--cat2col{ /* デフォルト：2列（スマホでも2列×3行の前提に合わせる） */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 極小端末だけ1列（2列だと窮屈な幅を救済） */ @media (max-width: 360px){ .sc-tabCards.sc-tabCards--cat2col{ grid-template-columns: 1fr; } } /* PCでは3列まで拡張 */ @media (min-width: 900px){ .sc-tabCards.sc-tabCards--cat2col{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-gap-4); } } /* タイルの見た目安定（カテゴリタブ専用） */ @media (max-width: 640px){ .sc-tabCards.sc-tabCards--cat2col .sc-tabCard__img{ aspect-ratio: 1 / 1; } .sc-tabCards.sc-tabCards--cat2col .sc-tabCard__body{ padding: 10px 10px 12px; } .sc-tabCards.sc-tabCards--cat2col .sc-tabCard__title{ font-size: .92rem; } .sc-tabCards.sc-tabCards--cat2col .sc-tabCard__meta{ font-size: .78rem; margin-top: 6px; } } .sc-tabCard{ border: 1px solid var(--sc-line); border-radius: 14px; overflow:hidden; box-shadow: var(--sc-shadow-sm); background:#fff; transition: transform .16s ease, box-shadow .16s ease; } .sc-tabCard:hover{ transform: translateY(-1px); box-shadow: var(--sc-shadow-md); } .sc-tabCard__media{ display:block; } .sc-tabCard__img{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio: 16 / 10; } .sc-tabCard__body{ padding: 12px 12px 14px; } .sc-tabCard__title{ margin:0; font-size: .98rem; font-weight: 900; line-height: 1.3; } .sc-tabCard__meta{ margin-top: 8px; font-size: .84rem; } /* ============================================================ * Ranking (TCD-like list) * ============================================================ */ .sc-rankList{ list-style:none; margin:0; padding:0; display:grid; gap: 12px; } .sc-rankItem{ display:grid; grid-template-columns: 126px 1fr; gap: 12px; align-items:center; } @media (max-width: 420px){ .sc-rankItem{ grid-template-columns: 96px 1fr; } } .sc-rankItem__media{ position: relative; display:block; border-radius: 12px; overflow:hidden; text-decoration:none; } .sc-rankItem__img{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio: 16 / 10; } .sc-rankItem__no{ position:absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 6px; display:flex; align-items:center; justify-content:center; background: rgba(15,23,42,.92); color:#fff; font-weight: 900; font-size: .92rem; box-shadow: 0 10px 24px rgba(0,0,0,.22); } .sc-rankItem__title{ font-weight: 900; line-height: 1.35; } .sc-rankItem__meta{ margin-top: 6px; font-size: .84rem; } /* ============================================================ * Tabs: use Ranking-like horizontal list (no numbers) * ============================================================ */ .sc-rankList--plain{ list-style: none; padding: 0; margin: 0; } /* Make tab panels feel like a clean list */ .sc-tabs .sc-rankItem--plain{ padding: 8px 0; border-bottom: 1px solid var(--sc-line); } .sc-tabs .sc-rankItem--plain:last-child{ border-bottom: none; } /* Slightly tighter media in tabs */ .sc-tabs .sc-rankItem__media{ border-radius: 12px; } /* Title/meta rhythm like TCD list */ .sc-tabs .sc-rankItem__title{ font-size: 0.98rem; } .sc-tabs .sc-rankItem__meta{ margin-top: 6px; } /* If any badge exists in future, force-hide for "plain" variant */ .sc-rankItem--plain .sc-rankItem__no{ display: none !important; } /* ============================================================ * Latest list (TCD-like) * ============================================================ */ .sc-latestList{ display:grid; gap: 14px; } .sc-latestItem{ display:grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 14px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius-sm); background:#fff; box-shadow: var(--sc-shadow-sm); transition: transform .16s ease, box-shadow .16s ease; } .sc-latestItem:hover{ transform: translateY(-1px); box-shadow: var(--sc-shadow-md); } @media (max-width: 640px){ .sc-latestItem{ grid-template-columns: 1fr; } } .sc-latestItem__media{ border-radius: 12px; overflow:hidden; display:block; } .sc-latestItem__media img, .sc-latestItem__media svg{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio: 16 / 10; } .sc-latestItem__title{ margin:0; font-size: 1.05rem; font-weight: 900; line-height: 1.3; } .sc-latestItem__meta{ margin-top: 8px; font-size: .84rem; } /* ========================================================= * Single post: meta text should be black (not muted) * ========================================================= */ .sc-articleMeta{ color: var(--sc-ink); font-weight: 800; opacity: 1; } .sc-articleMeta a{ color: var(--sc-ink); } /* ========================================================= * Theme TOC (sc-toc) - toggle UI * - affects ONLY sc-toc block * ========================================================= */ .sc-toc{ display: block; } .sc-toc__head{ display:flex; align-items:center; justify-content: space-between; gap: var(--sc-gap-4); } .sc-toc__title{ font-weight: 900; letter-spacing: .02em; } .sc-toc__actions{ display:flex; align-items:center; gap: 10px; } .sc-toc__toggle{ appearance:none; border: 1px solid var(--sc-line); background: var(--sc-surface); color: var(--sc-ink); font-weight: 900; padding: 8px 12px; border-radius: 999px; cursor: pointer; box-shadow: var(--sc-shadow-sm); } .sc-toc__toggle:hover{ background: #fff; box-shadow: var(--sc-shadow-md); transform: translateY(-1px); } .sc-toc__topLink{ text-decoration:none; font-weight: 900; } .sc-toc__body{ margin-top: 12px; } .sc-toc__list{ margin: 0; padding-left: 1.1rem; display:grid; gap: 8px; } .sc-toc__item--h3{ margin-left: 14px; } .sc-toc__link{ text-decoration:none; font-weight: 800; color: var(--sc-accent-2); } .sc-toc__link:hover{ text-decoration: underline; text-underline-offset: 0.22em; } .sc-toc__note{ margin: 0.9rem 0 0; font-size: 0.85rem; } .sc-toc.is-collapsed .sc-toc__body{ display: none; } /* ========================================================= * Related posts (single bottom) - use tiles grid * ========================================================= */ .sc-relatedGrid{ /* sc-postGrid--tiles を継承。追加調整のみ */ margin-top: var(--sc-gap-4); } /* Fix: avoid "empty ruleset" warning & stabilize related card */ .sc-relatedCard{ display: block; border-radius: 16px; overflow: hidden; } .sc-relatedCard__body{ padding: 0 2px 2px; } /* ========================================================= * Hide external TOC plugins (keep theme TOC only) * - よくある目次プラグインのDOMをまとめて非表示 * - テーマ側の scmt_render_toc は残る * ========================================================= */ /* ========================================================= * Theme TOC marker (sc-toc) * - Ensure theme TOC remains visible even if generic TOC rules exist * ========================================================= */ .sc-toc{ display: block; } /* ========================================================= * Hide external TOC plugins (keep theme TOC only) * ========================================================= */ #toc_container, .toc_container, .toc-container, .table-of-contents, .wp-block-table-of-contents, .ez-toc-container, .ez-toc, .lwptoc, .lwptoc_i, .rank-math-toc, .rank-math-block-toc, .wp-block-rank-math-toc-block, .simpletoc, .simpletoc-container{ display: none !important; } /* NOTE: * Footer背景の画像＋青レイヤーは .sc-footer__top のみで実装する。 * .sc-footer / .sc-footer__bottom は白背景維持（コピーライトの視認性を壊さない） */ /* ========================================================= * Home Hero (front-page.php専用) * - 中央サイト名 * - 下部の波 * - Homeではヘッダーを隠し、スクロールでハンバーガーを出す * ========================================================= */ /* Home: デフォルトでヘッダーは非表示（ヒーローを主役に） */ body.home .sc-header, body.front-page .sc-header{ display: none; } /* ただし、スクロールしたら「右上ハンバーガーだけ」出すための固定ボタンを表示 */ html.sc-homeScrolled body.home .sc-header, html.sc-homeScrolled body.front-page .sc-header{ display: block; } /* Homeスクロール後：ヘッダーは「ハンバーガーのみ見える」感じに寄せる */ html.sc-homeScrolled body.home .sc-header__inner, html.sc-homeScrolled body.front-page .sc-header__inner{ justify-content: flex-end; } html.sc-homeScrolled body.home .sc-brand, html.sc-homeScrolled body.front-page .sc-brand{ display: none; } /* ヒーロー中央サイト名 */ .sc-hero__homeText{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; } .sc-hero__homeTextInner{ padding: 14px 18px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); } .sc-hero__homeTitle{ font-weight: 900; letter-spacing: .06em; color: #fff; font-size: clamp(1.25rem, 5.6vw, 2.2rem); text-shadow: 0 18px 44px rgba(0,0,0,.38); text-align: center; } /* ヒーロー下部の波（白地へ自然に繋ぐ） */ .sc-hero__wave{ position: absolute; left: 0; right: 0; bottom: -1px; height: 76px; z-index: 4; background-repeat: no-repeat; background-size: 100% 100%; background-position: bottom center; /* SVGをCSSに直埋め（外部依存なし） */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,16 480,112 720,72 C960,32 1200,0 1440,48 L1440,120 L0,120 Z' fill='%23ffffff'/%3E%3C/svg%3E"); } @media (min-width: 768px){ .sc-hero__wave{ height: 90px; } } /* Homeのヒーローはフルブリード＋角丸なし（あなたのサンプルに合わせる） */ .sc-hero--homePortrait.sc-hero--full .sc-hero__viewport{ border-radius: 0; border-left: none; border-right: none; } /* ========================================================= * HOME HERO FIX (FINAL OVERRIDE) * - 既存のHome関連CSSが複数箇所に分散して競合しているため、 * このブロックを「末尾」に置き、確実に上書きして収束させる。 * - 目的: 参考画像(KOTO MEET)寄せ * ✅ヒーローは余白ゼロ full-bleed * ✅縦長(スマホ) / 画面の主役 * ✅中央にサイト名（白・太字） * ✅下部に波（白） * ✅スクロール後だけ右上ハンバーガー * ========================================================= */ /* ---- Home: headerは「存在するが見せない」(display:noneはJS/overlayを殺すので禁止) ---- */ body.home .sc-header, body.front-page .sc-header{ /* 既存の display:none 系を全否定 */ display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 200 !important; background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; /* スクロール前は触れない */ } /* スクロール後だけ操作可能にする（メニューボタン押下＆ドロワー動作） */ html.sc-homeScrolled body.home .sc-header, html.sc-homeScrolled body.front-page .sc-header{ pointer-events: auto !important; } /* Home: ブランドは常に非表示（KOTO MEET的にHero中央が主役） */ body.home .sc-brand, body.front-page .sc-brand{ display: none !important; } /* header innerは右寄せ */ body.home .sc-header__inner, body.front-page .sc-header__inner{ justify-content: flex-end !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Home: ボタンは最初は出さない */ body.home .sc-menuBtn, body.front-page .sc-menuBtn{ display: none !important; } /* スクロール後：右上に固定表示 */ html.sc-homeScrolled body.home .sc-menuBtn, html.sc-homeScrolled body.front-page .sc-menuBtn{ display: inline-flex !important; position: fixed !important; top: 14px !important; right: 14px !important; z-index: 240 !important; box-shadow: var(--sc-shadow-hi) !important; } @supports (padding: max(0px)){ html.sc-homeScrolled body.home .sc-menuBtn, html.sc-homeScrolled body.front-page .sc-menuBtn{ top: max(14px, env(safe-area-inset-top)) !important; right: max(14px, env(safe-area-inset-right)) !important; } } /* ---- Home Hero: full-bleed & portrait ---- */ .sc-hero.sc-hero--homePortrait{ /* 既存の「カードっぽさ」を消す：余白ゼロで全幅へ */ width: 100vw !important; width: 100dvw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-left: calc(50% - 50dvw) !important; margin-right: calc(50% - 50dvw) !important; padding: 0 !important; max-width: none !important; } .sc-hero.sc-hero--homePortrait .sc-hero__viewport{ border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background: #000 !important; overflow: hidden !important; /* 参考の“縦長”比率へ（スマホ最優先） */ aspect-ratio: 9 / 16 !important; } /* iPad以上は少し横に倒してもOK（任意） */ @media (min-width: 768px){ .sc-hero.sc-hero--homePortrait .sc-hero__viewport{ aspect-ratio: 3 / 4 !important; } } @media (min-width: 1024px){ .sc-hero.sc-hero--homePortrait .sc-hero__viewport{ aspect-ratio: 16 / 9 !important; /* PCは横長の方が自然 */ } } .sc-hero.sc-hero--homePortrait .sc-hero__img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* overlayは強め（文字の可読性を担保） */ .sc-hero.sc-hero--homePortrait .sc-hero__overlay{ background: radial-gradient(90% 70% at 40% 35%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.78) 100%) !important; } /* ---- 中央サイト名（front-page.php の sc-hero__homeText を使う） ---- */ .sc-hero__homeText{ position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; z-index: 3 !important; pointer-events: none !important; } .sc-hero__homeTextInner{ text-align: center !important; padding: 18px 16px !important; } .sc-hero__homeTitle{ color: #fff !important; font-weight: 900 !important; letter-spacing: .06em !important; font-size: clamp(1.2rem, 6.2vw, 2.1rem) !important; line-height: 1.15 !important; text-shadow: 0 18px 44px rgba(0,0,0,.55) !important; } /* ---- 下部の波（front-page.php の .sc-hero__wave を実体化） ---- */ .sc-hero__wave{ position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 84px !important; z-index: 4 !important; pointer-events: none !important; background-repeat: no-repeat !important; background-position: bottom center !important; background-size: 100% 100% !important; /* 白い波（SVG data URI） */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,96 C240,32 480,160 720,110 C960,60 1200,0 1440,66 L1440,160 L0,160 Z'/%3E%3C/svg%3E") !important; } @media (min-width: 768px){ .sc-hero__wave{ height: 96px !important; } } /* ---- Homeの余計な上下余白を削る（カード感を消す） ---- */ body.home .sc-main, body.front-page .sc-main{ padding-top: 0 !important; } /* ============================================================ ✅ Home Hero FINAL FIX (v2) - 白い枠（左右余白）を完全に除去 - 中央円：塗りなし、縁（リング）だけ - 波：画像そのものを波形でクリップ（黒線ゼロ） ============================================================ */ /* 1) まず「白枠」の根本：hero周辺の余白/最大幅/背景を潰す */ body.home .sc-hero.sc-hero--full, body.front-page .sc-hero.sc-hero--full{ width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; /* 100vwズレ対策 */ margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; background: transparent !important; } body.home .sc-hero__viewport, body.front-page .sc-hero__viewport{ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* 2) 画像を「100%で埋める」：上下の白残りも消す */ body.home .sc-hero.sc-hero--homePortrait .sc-hero__viewport, body.front-page .sc-hero.sc-hero--homePortrait .sc-hero__viewport{ height: 100svh !important; /* iOS安定 */ height: 100dvh !important; /* 新しいViewport */ } body.home .sc-hero__media, body.front-page .sc-hero__media{ position: relative !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } body.home .sc-hero__img, body.front-page .sc-hero__img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* 3) 中央リング（塗りなし） */ body.home .sc-hero__ringWrap, body.front-page .sc-hero__ringWrap{ position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; z-index: 3 !important; pointer-events: none !important; } body.home .sc-hero__ring, body.front-page .sc-hero__ring{ width: min(78vw, 360px) !important; aspect-ratio: 1 / 1 !important; border-radius: 9999px !important; background: transparent !important; /* ← 塗りを消す */ border: 3px solid rgba(255,255,255,0.72) !important; /* リング */ box-shadow: none !important; display: grid !important; place-items: center !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.home .sc-hero__ringTitle, body.front-page .sc-hero__ringTitle{ margin: 0 !important; padding: 0 18px !important; text-align: center !important; color: #fff !important; font-weight: 800 !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; font-size: clamp(18px, 4.6vw, 28px) !important; text-shadow: 0 8px 28px rgba(0,0,0,0.45) !important; } /* ========================================================= * Home Hero Wave (RESTORE) * - 「波が消えた」原因は display:none の強制停止 * - 安定動作のため、mask方式は“補助”に落として wave を主にする * - 下辺の黒帯を 3色グラデに置き換え（少し明るめ） * ========================================================= */ body.home .sc-hero__wave, body.front-page .sc-hero__wave{ display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 92px !important; z-index: 4 !important; pointer-events: none !important; background-repeat: no-repeat !important; background-position: bottom center !important; background-size: 100% 100% !important; /* 3色グラデ波 + 下側は白に自然に抜ける（KOTO MEET寄せ） */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23231B85' stop-opacity='0.92'/%3E%3Cstop offset='52%25' stop-color='%23917C50' stop-opacity='0.92'/%3E%3Cstop offset='100%25' stop-color='%239FA0A0' stop-opacity='0.92'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,92 C260,168 520,28 760,92 C980,156 1200,52 1440,122 L1440,180 L0,180 Z' fill='url(%23g)'/%3E%3Cpath d='M0,118 C240,162 520,70 760,118 C980,162 1200,104 1440,140 L1440,180 L0,180 Z' fill='%23ffffff' fill-opacity='1'/%3E%3C/svg%3E") !important; } @media (min-width: 768px){ body.home .sc-hero__wave, body.front-page .sc-hero__wave{ height: 110px !important; } } /* ✅ 追加：Home heroの「上padding」を完全に潰す（余白/区切りの元） */ body.home .sc-hero--full{ padding: 0 !important; } /* ✅ 追加：viewport(縦長)を“画像で100%埋める”ための必須セット */ .sc-hero.sc-hero--homePortrait .sc-hero__slide, .sc-hero.sc-hero--homePortrait .sc-hero__link{ height: 100% !important; } .sc-hero.sc-hero--homePortrait .sc-hero__img{ height: 100% !important; /* ← これが無いと下が黒くなる */ width: 100% !important; object-fit: cover !important; display: block !important; } /* ✅ 追加：waveが「黒帯」に見えないように、画像の上に重ねるだけに固定 */ .sc-hero__wave{ background-color: transparent !important; } body.home .sc-topSection, body.front-page .sc-topSection{ margin-bottom: clamp(18px, 4vw, 34px) !important; } /* ========================================================= * ✅ Brand Hero FINAL (single source of truth) * - wave: 3色ミックスを“明るめ”グラデで * - center ring: 塗り無し、グラデ縁を太め（KOTO MEET風） * - menu: JS動作は維持、見えない事故をz-indexで潰す * ========================================================= */ /* absolute要素の基準を確実化 */ .sc-hero.sc-hero--homePortrait .sc-hero__viewport{ position: relative !important; } .sc-hero.sc-hero--homePortrait .sc-hero__media{ position: absolute !important; inset: 0 !important; } .sc-hero.sc-hero--homePortrait .sc-hero__overlay{ position: absolute !important; inset: 0 !important; } /* ========================================================= * VSCode warning fix: define standard 'mask' props too * - you already have vendor prefixes; add unprefixed for compatibility * ========================================================= */ body.home .sc-hero__ring::before, body.front-page .sc-hero__ring::before{ /* もし ring::before でグラデ縁（mask）を使う場合の互換性確保 */ mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* ========================================================= * FIX: Home Hero wave not showing * - 原因：.sc-hero__wave 要素が無い/別構造で描画されていない * - 対策：DOMに依存せず、viewportの疑似要素で波を確実に描画 * ========================================================= */ body.home .sc-hero.sc-hero--homePortrait .sc-hero__viewport, body.front-page .sc-hero.sc-hero--homePortrait .sc-hero__viewport{ position: relative !important; /* ::after の基準 */ } body.home .sc-hero.sc-hero--homePortrait .sc-hero__viewport::after, body.front-page .sc-hero.sc-hero--homePortrait .sc-hero__viewport::after{ content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 96px !important; z-index: 6 !important; pointer-events: none !important; background-repeat: no-repeat !important; background-position: bottom center !important; background-size: 100% 100% !important; /* 3色グラデ波（明るめ） + 白波で自然に抜ける */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23231B85' stop-opacity='0.92'/%3E%3Cstop offset='52%25' stop-color='%23917C50' stop-opacity='0.92'/%3E%3Cstop offset='100%25' stop-color='%239FA0A0' stop-opacity='0.92'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,92 C260,168 520,28 760,92 C980,156 1200,52 1440,122 L1440,180 L0,180 Z' fill='url(%23g)'/%3E%3Cpath d='M0,118 C240,162 520,70 760,118 C980,162 1200,104 1440,140 L1440,180 L0,180 Z' fill='%23ffffff'/%3E%3C/svg%3E") !important; } @media (min-width: 768px){ body.home .sc-hero.sc-hero--homePortrait .sc-hero__viewport::after, body.front-page .sc-hero.sc-hero--homePortrait .sc-hero__viewport::after{ height: 112px !important; } } /* 画像は常に100%で埋める（下が黒くなる事故防止） */ .sc-hero.sc-hero--homePortrait .sc-hero__slide, .sc-hero.sc-hero--homePortrait .sc-hero__link{ height: 100% !important; } .sc-hero.sc-hero--homePortrait .sc-hero__img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ---- Center Ring (塗り無し＋グラデ枠) ---- */ body.home .sc-hero__ring, body.front-page .sc-hero__ring{ width: min(78vw, 360px) !important; aspect-ratio: 1 / 1 !important; border-radius: 9999px !important; background: transparent !important; /* ✅ 塗り無し */ border: 0 !important; /* 既存の白枠を無効化 */ box-shadow: 0 18px 60px rgba(0,0,0,.28) !important; position: relative !important; } /* グラデの“縁だけ”を作る（太さは padding で調整） */ body.home .sc-hero__ring::before, body.front-page .sc-hero__ring::before{ content:""; position:absolute; inset:0; border-radius:9999px; padding: 10px; /* ✅ 少し太め（好みで 8〜14） */ background: var(--sc-brand-grad-diag); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .96; } body.home .sc-hero__ringTitle, body.front-page .sc-hero__ringTitle{ position: relative !important; z-index: 1 !important; margin: 0 !important; padding: 0 18px !important; text-align: center !important; color: #fff !important; font-weight: 900 !important; letter-spacing: .02em !important; line-height: 1.15 !important; font-size: clamp(18px, 4.6vw, 28px) !important; text-shadow: 0 10px 34px rgba(0,0,0,.45) !important; } /* ---- Bottom Wave (黒帯を消し、3色グラデへ) ---- */ /* 既存の mask は維持：下辺が波形に切り抜かれる */ body.home .sc-hero__media, body.front-page .sc-hero__media{ /* 既存のmask設定を尊重しつつ“波の下地色”を作る */ background: var(--sc-brand-grad) !important; } /* 旧方式の wave div は完全停止（黒線・黒帯の原因） */ body.home .sc-hero__wave, body.front-page .sc-hero__wave{ display: none !important; } /* Home hero の「下端」を波色に馴染ませるための薄いグラデレイヤー */ body.home .sc-hero.sc-hero--homePortrait .sc-hero__viewport::after, body.front-page .sc-hero.sc-hero--homePortrait .sc-hero__viewport::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height: 120px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(35,24,95,0.18) 100% ); pointer-events:none; z-index: 2; } /* ========================================================= * HOME FIX: white gap = 0 + toTop appears only after scroll * - append this block at END of assets/css/main.css * ========================================================= */ /* (A) Home: Hero上の“白い隙間”を完全に潰す */ body.home .sc-main, body.front-page .sc-main{ padding-top: 0 !important; } body.home .sc-hero, body.front-page .sc-hero{ margin-top: 0 !important; } body.home .sc-hero--homePortrait, body.front-page .sc-hero--homePortrait{ padding-top: 0 !important; /* ← ここが白帯の主犯になりがち */ padding-bottom: 0 !important; } body.home .sc-hero--full, body.front-page .sc-hero--full{ padding-top: 0 !important; padding-bottom: 0 !important; } /* 念のため：viewport上部の余白もゼロに固定 */ body.home .sc-hero__viewport, body.front-page .sc-hero__viewport{ margin-top: 0 !important; } /* (B) 右下↑ボタン：Homeはスクロール後だけ表示に統一 */ body.home .sc-toTopFab, body.front-page .sc-toTopFab{ display: none !important; } html.sc-homeScrolled body.home .sc-toTopFab, html.sc-homeScrolled body.front-page .sc-toTopFab{ display: inline-flex !important; } /* ============================================================ * Scroll reveal (IntersectionObserver) * - 画面に入ったらフェード+上昇で表示 * - prefers-reduced-motion 対応 * ============================================================ */ .sc-reveal{ opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; will-change: opacity, transform; } .sc-reveal.is-in{ opacity: 1; transform: translateY(0); } /* ちょい段階差（カードが自然に流れる） */ .sc-reveal[data-reveal-delay="1"]{ transition-delay: 70ms; } .sc-reveal[data-reveal-delay="2"]{ transition-delay: 140ms; } .sc-reveal[data-reveal-delay="3"]{ transition-delay: 210ms; } .sc-reveal[data-reveal-delay="4"]{ transition-delay: 280ms; } @media (prefers-reduced-motion: reduce){ .sc-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================= * ✅ Single Post (Article) Pro Prose v1 * - Scope strictly to single post to avoid global regressions * - Goal: SEO-strong readability + pro editorial styling * ========================================================= */ /* ※ single判定はテーマ側body classに依存します。 まずは WordPress標準の .single / .single-post にスコープ。 もし独自クラス（例: body.sc-single）を使っている場合は追記してください。 */ body.single .sc-prose, body.single-post .sc-prose{ max-width: 760px; /* 720→少しだけ広げて読書体験向上（行長は維持） */ margin: 0 auto; font-size: 1.03rem; line-height: 1.68; /* ← 詰めてTCD寄せ（スカスカ解消） */ color: var(--sc-sub); letter-spacing: 0.01em; } @media (min-width: 768px){ body.single .sc-prose, body.single-post .sc-prose{ font-size: 1.06rem; } } /* --------------------------------------------------------- * Anchor jump UX: TOCクリック時の被り防止 * --------------------------------------------------------- */ body.single .sc-prose h2, body.single .sc-prose h3, body.single .sc-prose h4, body.single-post .sc-prose h2, body.single-post .sc-prose h3, body.single-post .sc-prose h4{ scroll-margin-top: 84px; /* sticky header対策 */ } /* --------------------------------------------------------- * Paragraph rhythm (SEO: readability / scanning) * -------------------------------------------------------- */ body.single .sc-prose p, body.single-post .sc-prose p{ margin: 0.72em 0; /* ← 段落間を詰める（1文ごとの改行が空きすぎ問題を解消） */ color: var(--sc-sub); } /* --------------------------------------------------------- * Single: Article header / title (TCD-like compact) * - sc-articleTitle が未定義なので single限定で定義する * --------------------------------------------------------- */ body.single .sc-articleHeader, body.single-post .sc-articleHeader{ padding-top: clamp(18px, 2.2vw, 24px); padding-bottom: clamp(18px, 2.2vw, 24px); } body.single .sc-articleHeader__kicker, body.single-post .sc-articleHeader__kicker{ margin-bottom: 10px; font-size: .92rem; } body.single .sc-articleTitle, body.single-post .sc-articleTitle{ margin: 0; font-size: clamp(1.35rem, 3.2vw, 2.05rem); line-height: 1.38; /* ← タイトルの“詩みたい改行”を抑制 */ letter-spacing: -0.01em; font-weight: 900; color: var(--sc-ink); text-wrap: balance; } body.single .sc-articleHero, body.single-post .sc-articleHero{ margin: 14px 0 0; } body.single .sc-articleHero__img, body.single-post .sc-articleHero__img{ width: 100%; height: auto; border-radius: 18px; } /* モバイルはさらに少し詰める（見た目を2枚目寄せ） */ @media (max-width: 480px){ body.single .sc-prose, body.single-post .sc-prose{ line-height: 1.64; } body.single .sc-prose p, body.single-post .sc-prose p{ margin: 0.66em 0; } body.single .sc-articleTitle, body.single-post .sc-articleTitle{ line-height: 1.34; } } /* 強調：読みやすい太字（ギラつかない） */ body.single .sc-prose strong, body.single-post .sc-prose strong{ color: var(--sc-ink); font-weight: 900; } /* リンク：記事本文だけ（p.ai-p CTAは別で強化済みなので干渉させない） */ body.single .sc-prose--article a:not(.sc-toc__link), body.single-post .sc-prose--article a:not(.sc-toc__link){ color: var(--sc-accent-2); font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.20em; text-decoration-skip-ink: auto; /* “ただの青い下線”よりクリックされやすい（でもやりすぎない） */ background: linear-gradient(180deg, rgba(219,234,254,0), rgba(219,234,254,.55)); border-radius: 8px; padding: 0.10em 0.22em; margin: 0 -0.06em; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, opacity .12s ease; } body.single .sc-prose a:hover, body.single-post .sc-prose a:hover{ opacity: .92; text-decoration-thickness: 3px; background: rgba(219,234,254,.70); } /* --------------------------------------------------------- * ✅ SiteCraft tool generated link block (p.ai-p) * - テーマ側でラベル文言を生成しない（= 元HTMLをそのまま出す） * - テーマ側で追加するのは「薄い青枠のリンクカード」だけ * - 緑ラベルは “元HTML側” に存在する場合のみ、その見た目を整える * --------------------------------------------------------- */ body.single .sc-prose p.ai-p, body.single-post .sc-prose p.ai-p{ margin: 1.15em 0 1.35em; padding: 0; border: 0; background: transparent; box-shadow: none; } /* ❌ テーマ側で緑ラベルを生成しない（元HTMLを尊重） */ body.single .sc-prose p.ai-p::before, body.single-post .sc-prose p.ai-p::before{ content: none !important; display: none !important; } /* ✅ 元HTML内にラベル要素がある場合だけ整形（色は #6fba2c 固定） */ body.single .sc-prose p.ai-p .ai-label, body.single-post .sc-prose p.ai-p .ai-label, body.single .sc-prose p.ai-p .ai-badge, body.single-post .sc-prose p.ai-p .ai-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; /* ✅ 画像の“角丸弱め” */ background: #6fba2c; color: #fff; font-weight: 900; font-size: .90rem; line-height: 1.2; margin: 0 0 10px 0; } /* ✅ ラベルが無い記事でも崩れないよう、先頭にある span をラベル候補として扱える保険（任意） */ body.single .sc-prose p.ai-p > span.ai-label, body.single-post .sc-prose p.ai-p > span.ai-label{ margin-bottom: 10px; } /* ✅ 薄い青枠カード（ここだけテーマ独自の追加装飾） */ body.single .sc-prose p.ai-p a, body.single-post .sc-prose p.ai-p a{ display: block; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(37,99,235,.20); background: rgba(239,246,255,.70); box-shadow: var(--sc-shadow-sm); color: var(--sc-accent-2); text-decoration: none !important; font-weight: 900; line-height: 1.55; } /* ❌ 矢印などは付けない（元HTMLを尊重） */ body.single .sc-prose p.ai-p a::after, body.single-post .sc-prose p.ai-p a::after{ content: none !important; } body.single .sc-prose p.ai-p a:hover, body.single-post .sc-prose p.ai-p a:hover{ transform: translateY(-1px); box-shadow: var(--sc-shadow-md); filter: brightness(0.99); } /* --------------------------------------------------------- * ✅ In-article links: CTR-friendly but safe (single only) * - 通常リンク：上品に強調（下線＋太字＋hover） * - 外部リンク/target=_blank：軽いCTA化（クリック誘導） * - p.ai-p は別途 “最強CTA” として扱う（上のブロック） * --------------------------------------------------------- */ /* 1) 通常リンク：読みやすさと「リンク感」を強化（現行に微上書き） */ body.single .sc-prose a, /* ↑↑↑ 重複定義を統合したのでここは不要（見た目のブレ・上書き事故の原因） */ body.single .sc-prose--article a:hover:not(.sc-toc__link), body.single-post .sc-prose--article a:hover:not(.sc-toc__link){ opacity: 1; filter: brightness(0.98); transform: translateY(-1px); } /* 2) target=_blank の“外部リンク印”は不要（要望により無効化） * - 通常リンクの装飾（下線＋太字）に統一する */ /* 3) p.ai-p 内は “注目CTA” を優先（通常リンク装飾との競合回避） */ body.single .sc-prose p.ai-p a[target="_blank"], body.single-post .sc-prose p.ai-p a[target="_blank"]{ padding: 10px 12px; border-radius: 12px; text-decoration: none !important; } /* ✅ フォーカスリング（アクセシビリティ＆誤クリック防止） */ body.single .sc-prose a:focus-visible, body.single-post .sc-prose a:focus-visible{ outline: 2px solid rgba(37,99,235,.35); outline-offset: 3px; } /* ✅ “単独行リンク” を CTA（ボタン風）に自動昇格：クリック率UP - 例:

◯◯はコチラ

- 本文中の通常リンク（文章途中）は対象外 */ body.single .sc-prose p > a:only-child, body.single-post .sc-prose p > a:only-child{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(37,99,235,.22); background: linear-gradient(180deg, rgba(219,234,254,.95), rgba(255,255,255,.98)); box-shadow: var(--sc-shadow-sm); text-decoration: none; /* CTAは “ボタン” として見せる */ line-height: 1.35; } body.single .sc-prose p > a:only-child::after, body.single-post .sc-prose p > a:only-child::after{ content: "→"; font-weight: 900; opacity: .9; } body.single .sc-prose p > a:only-child:hover, body.single-post .sc-prose p > a:only-child:hover{ opacity: 1; transform: translateY(-1px); box-shadow: var(--sc-shadow-md); } /* --------------------------------------------------------- * External link emphasis (legacy) * - NOTE: target=_blank の装飾は行わない（要望により） * - 既存の rel="noopener" だけは “下線スタイル” を維持（副作用ゼロ） * --------------------------------------------------------- */ body.single .sc-prose a[rel*="noopener"], body.single-post .sc-prose a[rel*="noopener"]{ text-decoration-style: solid; } /* --------------------------------------------------------- * Headings: H2/H3/H4 pro decoration *✅ FIX: 画像のような「淡い水色のボックス見出し」に統一（single記事本文のみ） * - Scope strictly to .sc-prose--article to avoid regressions * - Keeps scroll-margin-top rules elsewhere as-is * --------------------------------------------------------- */ body.single .sc-prose--article h2, body.single-post .sc-prose--article h2{ position: relative; margin: 2.0em 0 0.95em; padding: 0.9em 1.0em; font-size: clamp(1.22rem, 3.4vw, 1.55rem); line-height: 1.35; color: var(--sc-ink, #0f172a); letter-spacing: .02em; font-weight: 900; /* ✅ 画像寄せ：淡い水色の“面”＋やわらかい枠 */ background: linear-gradient(180deg, rgba(219,234,254,.75), rgba(219,234,254,.45)); border: 1px solid rgba(37, 99, 235, .14); border-radius: 14px; /* ✅ 左アクセント（主張しすぎない） */ border-left: 8px solid rgba(37, 99, 235, .55); } /* 旧装飾（バー/下線）が残っても確実に消す保険 */ body.single .sc-prose--article h2::before, body.single-post .sc-prose--article h2::before{ content: none !important; } body.single .sc-prose--article h3, body.single-post .sc-prose--article h3{ position: relative; margin: 1.55em 0 0.75em; padding: 0.7em 0.9em; font-size: clamp(1.08rem, 3.0vw, 1.28rem); line-height: 1.45; color: var(--sc-ink, #0f172a); font-weight: 900; /* ✅ H2より一段弱い面 */ background: rgba(219, 234, 254, .38); border: 1px solid rgba(37, 99, 235, .12); border-radius: 12px; border-left: 6px solid rgba(37, 99, 235, .42); } /* 旧H3の四角マーカーは無効化 */ body.single .sc-prose--article h3::before, body.single-post .sc-prose--article h3::before{ content: none !important; } body.single .sc-prose--article h4, body.single-post .sc-prose--article h4{ margin: 1.25em 0 0.55em; padding: 0.35em 0.15em 0.35em 0.7em; font-size: 1.02rem; line-height: 1.55; color: var(--sc-ink, #0f172a); font-weight: 900; letter-spacing: .01em; /* ✅ H4は“やりすぎない”が、階層が分かるよう左だけ軽く */ border-left: 4px solid rgba(37, 99, 235, .32); } /* --------------------------------------------------------- * Lists: tighter + readable + nested safe * --------------------------------------------------------- */ body.single .sc-prose ul, body.single-post .sc-prose ul, body.single .sc-prose ol, body.single-post .sc-prose ol{ margin: 1.0em 0 1.15em; padding-left: 1.25em; } body.single .sc-prose li, body.single-post .sc-prose li{ margin: 0.45em 0; } body.single .sc-prose li::marker, body.single-post .sc-prose li::marker{ color: rgba(37,99,235,.75); font-weight: 900; } /* --------------------------------------------------------- * Blockquote: “引用/体験談”を強く見せる（E-E-A-Tに効く） * --------------------------------------------------------- */ body.single .sc-prose blockquote, body.single-post .sc-prose blockquote{ margin: 1.25em 0; padding: 1.05em 1.05em 1.05em 1.15em; border-left: 6px solid rgba(37,99,235,.35); background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98)); border-radius: 14px; box-shadow: var(--sc-shadow-sm); color: var(--sc-sub); } body.single .sc-prose blockquote p, body.single-post .sc-prose blockquote p{ margin: 0.6em 0; } /* --------------------------------------------------------- * Tables: mobile safe + trust UI * --------------------------------------------------------- */ body.single .sc-prose table, body.single-post .sc-prose table{ width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.25em 0; border: 1px solid var(--sc-line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sc-shadow-sm); display: block; /* mobile horizontal scroll */ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.single .sc-prose th, body.single-post .sc-prose th{ background: var(--sc-surface); color: var(--sc-ink); font-weight: 900; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--sc-line); white-space: nowrap; } body.single .sc-prose td, body.single-post .sc-prose td{ padding: 12px 14px; border-bottom: 1px solid var(--sc-line); color: var(--sc-sub); } body.single .sc-prose tr:last-child td, body.single-post .sc-prose tr:last-child td{ border-bottom: 0; } /* --------------------------------------------------------- * Images: clean, consistent, captions supported * --------------------------------------------------------- */ body.single .sc-prose img, body.single-post .sc-prose img{ max-width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--sc-shadow-sm); margin: 1.15em 0; } body.single .sc-prose figure, body.single-post .sc-prose figure{ margin: 1.25em 0; } body.single .sc-prose figcaption, body.single-post .sc-prose figcaption{ margin-top: 10px; font-size: .88rem; color: var(--sc-muted); line-height: 1.6; } /* --------------------------------------------------------- * Inline code / pre: “技術記事でも崩れない” * --------------------------------------------------------- */ body.single .sc-prose code, body.single-post .sc-prose code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.92em; padding: 0.14em 0.38em; border-radius: 10px; background: rgba(226,232,240,.55); border: 1px solid rgba(226,232,240,.9); color: #0f172a; } body.single .sc-prose pre, body.single-post .sc-prose pre{ margin: 1.25em 0; padding: 14px 16px; border-radius: 16px; background: #0b1220; color: #e5e7eb; overflow-x: auto; box-shadow: var(--sc-shadow-md); } body.single .sc-prose pre code, body.single-post .sc-prose pre code{ background: transparent; border: 0; padding: 0; color: inherit; } /* --------------------------------------------------------- * Horizontal rule: editorial divider * --------------------------------------------------------- */ body.single .sc-prose hr, body.single-post .sc-prose hr{ border: none; border-top: 1px solid var(--sc-line); margin: 2.0em 0; } /* --------------------------------------------------------- * Theme TOC (sc-toc): single-only “プロ級”カード * --------------------------------------------------------- */ body.single .sc-toc, body.single-post .sc-toc{ margin: 1.25em 0 1.4em; padding: 16px 16px 14px; border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: var(--sc-shadow-sm); } body.single .sc-toc__title, body.single-post .sc-toc__title{ font-size: 1.0rem; color: var(--sc-ink); } body.single .sc-toc__toggle, body.single-post .sc-toc__toggle{ padding: 8px 12px; font-size: .92rem; } body.single .sc-toc__list, body.single-post .sc-toc__list{ padding-left: 1.15rem; gap: 8px; } body.single .sc-toc__link, body.single-post .sc-toc__link{ color: var(--sc-accent-2); text-decoration: none; font-weight: 900; } body.single .sc-toc__link:hover, body.single-post .sc-toc__link:hover{ text-decoration: underline; text-underline-offset: 0.22em; } /* --------------------------------------------------------- * “本文の最初のH2”を詰める：冒頭の間延び防止（読了率） * --------------------------------------------------------- */ body.single .sc-prose h2:first-of-type, body.single-post .sc-prose h2:first-of-type{ margin-top: 1.35em; } /* --------------------------------------------------------- * “まとめ”/“結論”が映える補助（よくある終盤のH2） * ※タイトルが一致していなくても害が出ないよう軽め * --------------------------------------------------------- */ body.single .sc-prose h2[id*="matome"], body.single .sc-prose h2[id*="ketsuron"], body.single-post .sc-prose h2[id*="matome"], body.single-post .sc-prose h2[id*="ketsuron"]{ border-bottom-color: rgba(37,99,235,.22); } /* --------------------------------------------------------- * Accessibility: focus ring for in-article links * --------------------------------------------------------- */ body.single .sc-prose a:focus, body.single-post .sc-prose a:focus{ outline: 2px solid rgba(37,99,235,.35); outline-offset: 3px; border-radius: 8px; } /* ========================================================= * 🚑 HOTFIX: single post content/TOC invisible safeguard * - If variables resolve unexpectedly, force visible defaults * - Add at END of main.css * ========================================================= */ body.single .sc-prose, body.single-post .sc-prose{ display: block !important; visibility: visible !important; opacity: 1 !important; /* ✅ 変数が壊れていても読める色にフォールバック */ color: var(--sc-ink, #0f172a) !important; } body.single .sc-prose * , body.single-post .sc-prose *{ visibility: visible !important; opacity: 1 !important; } body.single .sc-toc, body.single-post .sc-toc{ display: block !important; visibility: visible !important; opacity: 1 !important; /* TOCも確実に文字が見えるように */ color: var(--sc-ink, #0f172a) !important; } /* もしTOC内リンクだけ見えない場合 */ body.single .sc-toc a, body.single-post .sc-toc a{ color: var(--sc-accent-2, #2563eb) !important; }