/* ============================== SWELL 標準のターム/カテゴリタイトル領域は非表示 （独自ヒーローと二重にしないため） このCSSは functions.php 側で is_category() || is_tag() || is_tax() のときだけ enqueue されるため、ここでのセレクタはターム系アーカイブにのみ適用される。 このサイトの には class 属性が付与されないため、 body.category 等のセレクタは使わずに要素ID／クラス単独で指定する。 ============================== */ #top_title_area, .l-topTitleArea, .p-pageTitle { display: none !important; } /* ============================== ヒーロー上の余白対策 SWELL の .l-content には padding-top: 2em / 4em が当たるため、 ヒーローを #content 直下に置くとヘッダーとの間に隙間が出る。 ターム系アーカイブだけでこの padding-top をゼロ化する。 ============================== */ #content.l-content { padding-top: 0 !important; } .theories-category-visual-hero { margin-top: 0 !important; } /* ============================== 独自カテゴリーヒーロー（full-bleed） 出力位置:
直下、
より前。 #content には .l-container があるため max-width が効いて中身が左右に余白を持つが、 ヒーロー本体は背景を画面横いっぱいに広げたい。 そのため width:100vw + margin-left/right: calc(50% - 50vw) で コンテナ制約を打ち消して画面全幅化する（full-bleed）。 中身の __inner はサイトコンテナ幅で中央寄せにしてコンテンツ位置を揃える。 アクセント色／マーク画像は inc/category-hero.php が
としてインライン出力するため、CSS 側ではフォールバック値だけ持つ。 ============================== */ .theories-category-visual-hero { position: relative; flex: 0 0 100vw; width: 100vw; max-width: 100vw; box-sizing: border-box; margin-top: 0; margin-bottom: 4rem; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 72px 0; overflow: hidden; background: radial-gradient(circle at 78% 42%, rgba(var(--hero-accent-rgb, 63, 127, 182), .14), transparent 34%), linear-gradient(135deg, #ffffff 0%, #fbfaf7 56%, rgba(var(--hero-accent-rgb, 63, 127, 182), .08) 100%); } .theories-category-visual-hero::after { content: ""; position: absolute; left: max(7vw, 96px); right: auto; top: 50%; width: min(28vw, 360px); aspect-ratio: 1 / 1; transform: translateY(-50%); background-image: var(--hero-mark-image, none); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .11; pointer-events: none; z-index: 0; } .theories-category-visual-hero__inner { position: relative; z-index: 1; width: 100%; max-width: calc(var(--container_size, 1100px) + var(--swl-pad_container, 0px) * 2); margin: 0 auto; padding-left: var(--swl-pad_container, 4vw); padding-right: var(--swl-pad_container, 4vw); box-sizing: border-box; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr); gap: 64px; align-items: center; } .theories-category-visual-hero__head { display: flex; flex-direction: column; align-items: flex-start; } .theories-category-visual-hero__sub { display: block; margin-bottom: 12px; color: rgba(30, 41, 59, 0.46); font-size: 13px; font-style: italic; font-weight: 800; letter-spacing: 0.16em; line-height: 1; } .theories-category-visual-hero__title { margin: 0; color: #1E293B; font-size: clamp(32px, 3.4vw, 48px); font-weight: 850; line-height: 1.14; letter-spacing: -0.04em; word-break: keep-all; overflow-wrap: normal; } .theories-category-visual-hero__label { display: block; margin-top: 12px; color: var(--hero-accent, #3F7FB6); font-size: clamp(12px, .95vw, 14px); font-weight: 800; line-height: 1; letter-spacing: 0.20em; text-transform: uppercase; } .theories-category-visual-hero__lead { position: relative; z-index: 2; color: #374151; font-size: 1rem; line-height: 2; padding: 30px 34px; background: radial-gradient(ellipse at 50% 50%, rgba(var(--hero-accent-rgb, 63, 127, 182), .06) 0%, rgba(var(--hero-accent-rgb, 63, 127, 182), 0) 72%), rgba(255, 255, 255, .82); border: 1px solid rgba(var(--hero-accent-rgb, 63, 127, 182), .14); border-radius: 18px; box-shadow: 0 18px 48px rgba(30, 41, 59, .07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .theories-category-visual-hero__lead p { margin: 0; } .theories-category-visual-hero__lead p + p { margin-top: 1em; } @media screen and (max-width: 959px) { .theories-category-visual-hero { flex-basis: 100vw; width: 100vw; max-width: 100vw; margin-bottom: 3rem; padding: 56px 0; } .theories-category-visual-hero__inner { grid-template-columns: 1fr; gap: 28px; } .theories-category-visual-hero::after { left: max(2vw, 24px); right: auto; width: min(46vw, 280px); opacity: .10; } } @media screen and (max-width: 599px) { .theories-category-visual-hero { margin-bottom: 2.5rem; padding: 44px 0; } .theories-category-visual-hero__title { font-size: 28px; } .theories-category-visual-hero::after { left: auto; right: -12vw; width: min(58vw, 260px); opacity: .08; } .theories-category-visual-hero__lead { padding: 22px 22px; border-radius: 16px; font-size: .95rem; line-height: 1.9; } }