/* ===========================================================================
guzclothes theme — EDITORIAL FASHION
Playfair Display × Inter × ivory base × claret accent。
ファッション誌の世界観を再現するため warm neutrals と編集タイポを採用。
=========================================================================== */
/* Web fonts (Playfair Display + Inter + Noto Serif JP) は inc/enqueue.php 経由で
preconnect 付きで から読み込む(CSS @import より初回ロード高速) */
:root {
/* ----- Editorial color palette ----- */
--c-bg: #faf8f4; /* ivory(warm off-white) */
--c-bg-alt: #f3efe7; /* cream */
--c-paper: #ffffff; /* pure white for cards / hero contrast */
--c-text: #1a1817; /* warm black(青みナシ) */
--c-text-sub: #4a4540; /* warm dark gray */
--c-muted: #8a847d; /* warm gray */
--c-border: #e5e0d8; /* warm light border */
--c-border-strong: #1a1817;
--c-accent: #7a1a1a; /* claret red (signature) */
--c-accent-soft: #b85a5a; /* dusty rose */
--c-gold: #c8a05c; /* warm gold accent for premium */
--c-ink: #1a1817; /* same as text but for stronger graphics */
/* ----- Editorial typography ----- */
--font-display: "Playfair Display", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
--font-serif: "Noto Serif JP", "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", serif;
--font-sans: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
--font-tag: "Inter", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
--max-w: 1180px;
--gutter: 1.25rem; /* モバイル 20px / 720px+ で 1.5rem に拡張 */
--radius: 0;
/* ----- 8px grid spacing scale ----- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 5rem; /* 80px */
--space-10: 6.25rem; /* 100px(セクション間の余白基準) */
/* Cocoon 互換カラープリセット
* 旧テーマで作られた固定ページ・記事内に has-cocoon-{name}-color / has-cocoon-{name}-background-color や
* style="color:var(--wp--preset--color--cocoon-{name})" が残っているため、CSS変数を提供して
* 「白い文字が見えない」「暗い背景に暗い文字」が発生しないようにする。
*/
--wp--preset--color--cocoon-white: #ffffff;
--wp--preset--color--cocoon-black: #111111;
--wp--preset--color--cocoon-blue: #0a4d92;
--wp--preset--color--cocoon-red: #c0392b;
--wp--preset--color--cocoon-green: #2e7d32;
--wp--preset--color--cocoon-yellow: #f1c40f;
--wp--preset--color--cocoon-orange: #e67e22;
--wp--preset--color--cocoon-pink: #e91e63;
--wp--preset--color--cocoon-purple: #8e44ad;
--wp--preset--color--cocoon-gray: #95a5a6;
}
/* Cocoon 遺産のボタン色レスキュー: dark cover 上の Gutenberg button が has-black-color +
has-green-background-color 等で見えなくなる事例の修正。
どの cover 内の button も背景白+黒文字で確実に読める contrast を確保。 */
.wp-block-cover .wp-block-button .wp-block-button__link,
.wp-block-cover .wp-block-buttons .wp-block-button__link {
background-color: #ffffff !important;
color: #1a1817 !important;
border-color: #ffffff !important;
text-shadow: none;
font-weight: 700;
transition: background-color 0.25s ease, color 0.25s ease;
}
.wp-block-cover .wp-block-button .wp-block-button__link:hover,
.wp-block-cover .wp-block-buttons .wp-block-button__link:hover {
background-color: var(--c-gold, #c8a05c) !important;
color: var(--c-ink, #1a1817) !important;
border-color: var(--c-gold, #c8a05c) !important;
opacity: 1;
}
/* is-style-outline で線だけの場合は線+文字を白でくっきり */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: #ffffff !important;
border: 2px solid #ffffff !important;
}
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: #ffffff !important;
color: #1a1817 !important;
}
/* Cocoon 互換 has-*-color クラス(変数だけでは class指定で出る色が継承に頼るため
ブロックエディタが出す class 名でも同等の色を当てる) */
.has-cocoon-white-color { color: #ffffff !important; }
.has-cocoon-white-background-color { background-color: #ffffff !important; }
.has-cocoon-black-color { color: #111111 !important; }
.has-cocoon-black-background-color { background-color: #111111 !important; }
.has-cocoon-blue-color { color: #0a4d92 !important; }
.has-cocoon-red-color { color: #c0392b !important; }
.has-cocoon-green-color { color: #2e7d32 !important; }
.has-cocoon-yellow-color { color: #f1c40f !important; }
.has-cocoon-orange-color { color: #e67e22 !important; }
.has-cocoon-pink-color { color: #e91e63 !important; }
.has-cocoon-purple-color { color: #8e44ad !important; }
.has-cocoon-gray-color { color: #95a5a6 !important; }
/* リンクカラー(has-link-color 子の )も白に揃える */
.has-cocoon-white-color.has-link-color a,
.has-cocoon-white-color .has-link-color a { color: inherit; }
/* Cover ブロック内テキストの可読性保証 */
/* 編集者が inline style="color:#000000" を当てたケース含め、暗背景上で確実に読めるように */
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container * {
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.55);
}
.wp-block-cover .wp-block-cover__inner-container p,
.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container h3,
.wp-block-cover .wp-block-cover__inner-container h4,
.wp-block-cover .wp-block-cover__inner-container h5,
.wp-block-cover .wp-block-cover__inner-container h6,
.wp-block-cover .wp-block-cover__inner-container strong,
.wp-block-cover .wp-block-cover__inner-container span {
color: #ffffff !important;
}
/* Cover 背景の暗化レイヤーをデフォルトより強めに(コンテンツが必ず読める) */
.wp-block-cover .wp-block-cover__background.has-background-dim:not(.has-background-dim-0) {
opacity: 0.55;
}
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-30 { opacity: 0.45; }
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-40 { opacity: 0.5; }
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-50 { opacity: 0.55; }
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-60 { opacity: 0.65; }
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-70 { opacity: 0.7; }
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-80 { opacity: 0.75; }
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-90 { opacity: 0.8; }
/* dim 指定なしの cover は最低限の暗化レイヤーを後付け */
.wp-block-cover:not(:has(.wp-block-cover__background.has-background-dim))::after {
content: "";
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
/* Cover 内の はリンク色を白+下線で表示(ブラウザデフォルト青/赤を上書き) */
.wp-block-cover .wp-block-cover__inner-container a {
color: #ffffff !important;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
text-decoration-color: rgba(255, 255, 255, 0.5);
transition: text-decoration-color 0.2s ease;
}
.wp-block-cover .wp-block-cover__inner-container a:hover,
.wp-block-cover .wp-block-cover__inner-container a:focus-visible {
text-decoration-color: #ffffff;
color: var(--c-gold, #c8a05c) !important;
}
.wp-block-cover .wp-block-cover__inner-container a:visited {
color: #ffffff !important;
}
/* lazyload プレースホルダー時の背景色(画像未ロード時に文字が見切れないように) */
.wp-block-cover { background-color: #2c2a26; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--c-text);
background: var(--c-bg);
line-height: 1.8;
font-size: 16px;
font-feature-settings: "palt", "kern";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: inherit;
text-decoration: none;
transition: opacity 0.2s ease, color 0.2s ease;
}
a:hover { opacity: 0.65; }
/* Editorial inline link: underline draws from left on hover(本文 a タグ専用) */
.entry-content a:not(.guz-affi-btn):not(.wp-block-button__link),
.entry-page .entry-content a:not(.guz-affi-btn):not(.wp-block-button__link) {
position: relative;
border-bottom: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
padding-bottom: 2px;
transition: color 0.25s ease, background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.entry-content a:not(.guz-affi-btn):not(.wp-block-button__link):hover,
.entry-page .entry-content a:not(.guz-affi-btn):not(.wp-block-button__link):hover {
color: var(--c-accent-soft);
opacity: 1;
background-size: 100% 2px;
}
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
/* ----- Editorial typography utilities ----- */
.font-display { font-family: var(--font-display); font-weight: 700; }
.font-serif { font-family: var(--font-serif); }
.font-tag {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
}
.italic-accent { font-style: italic; font-family: var(--font-display); }
/* OpenType for editorial print-grade typography */
body {
font-feature-settings: "palt", "kern", "liga", "calt";
text-rendering: optimizeLegibility;
}
.hero-title,
.section-title,
.entry-title,
.entry-single .entry-title,
.post-card-title,
.guz-featured-pick-title,
.archive-title-hero,
.author-hero-name,
.guz-cs-title,
.guz-cat-faq-q,
.guz-cat-starter-name,
.guz-editors-note-quote,
.entry-content blockquote,
.guz-cat-editor-intro-quote {
font-feature-settings: "kern", "liga", "dlig", "swsh", "ss01";
font-variant-ligatures: common-ligatures discretionary-ligatures;
}
/* ----- Editorial ornament divider (◆ / ✦ / ❋ で雑誌の節切り感) ----- */
.editorial-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin: var(--space-7) auto;
max-width: var(--max-w);
padding: 0 var(--gutter);
color: var(--c-muted);
}
.editorial-ornament::before,
.editorial-ornament::after {
content: "";
flex: 0 1 80px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--c-border-strong) 50%, transparent 100%);
}
.editorial-ornament-mark {
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
color: var(--c-accent);
line-height: 1;
letter-spacing: 0.2em;
user-select: none;
}
/* セクション区切り(編集誌で見るような細いラインに italic キーワード) */
.editorial-divider {
display: flex;
align-items: center;
gap: 1rem;
margin: var(--space-7) 0;
}
.editorial-divider::before,
.editorial-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--c-border-strong);
}
.editorial-divider-text {
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
letter-spacing: 0.05em;
color: var(--c-text-sub);
}
/* ----------- Skip link ----------- */
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
background: #fff;
padding: 0.5rem 1rem;
z-index: 1000;
border: 1px solid var(--c-border-strong);
}
/* ===========================================================================
Header (Mobile-first)
- Mobile: logo + hamburger のみ。検索は隠す(タップで展開ドロップ)
- >=881px: nav-menu と検索ボックスをインライン表示、hamburger を隠す
=========================================================================== */
.site-header {
border-bottom: 1px solid var(--c-border);
background: rgba(250, 248, 244, 0.92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
position: sticky;
top: 0;
z-index: 100;
}
.site-header-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
height: 60px; /* モバイル */
}
.site-branding .site-title,
.site-branding a.site-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 1.25rem;
letter-spacing: 0.02em;
color: var(--c-text);
text-transform: none;
}
.site-branding .site-title-sub {
display: none; /* モバイルは tagline 非表示で密度↑ */
}
/* Mobile デフォルト: nav は折りたたみ、検索は隠す */
.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.site-nav ul,
.nav-menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav.is-open .nav-menu {
display: flex;
flex-direction: column;
position: absolute;
top: 56px;
left: 0;
right: 0;
background: #fff;
border-bottom: 1px solid var(--c-border);
padding: 0.5rem var(--gutter) 1rem;
gap: 0;
}
.site-nav.is-open .nav-menu li {
border-top: 1px solid var(--c-border);
}
.site-nav.is-open .nav-menu li:first-child { border-top: 0; }
.site-nav.is-open .nav-menu a {
display: block;
padding: 1rem 0; /* タッチターゲット 44px+ */
font-size: 0.88rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.site-search { display: none; }
/* SP 用検索トグルボタン(ハンバーガー横) */
.search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
width: 44px;
height: 44px;
cursor: pointer;
padding: 0;
color: var(--c-text);
font-size: 1.4rem;
line-height: 1;
transition: opacity 0.15s ease;
}
.search-toggle:hover { opacity: 0.7; }
.site-nav.is-search-open .search-toggle { opacity: 0.6; }
/* SP: search-toggle を押すと検索フォームを上から下ろす */
.site-nav.is-search-open .site-search {
display: flex;
position: absolute;
top: 56px;
left: 0;
right: 0;
background: #fff;
border-bottom: 1px solid var(--c-border);
padding: 0.75rem var(--gutter);
gap: 0.5rem;
align-items: center;
z-index: 99;
}
.site-nav.is-search-open .site-search input {
flex: 1;
min-width: 0;
border: 1px solid var(--c-border);
border-radius: 4px;
padding: 0.6rem 0.75rem;
font-size: 0.95rem;
}
.site-nav.is-search-open .site-search button {
border: 0;
background: var(--c-text);
color: #fff;
width: 44px;
height: 38px;
border-radius: 4px;
cursor: pointer;
font-size: 1.1rem;
}
/* Hamburger toggle: タッチターゲット 44x44 */
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
width: 44px;
height: 44px;
cursor: pointer;
padding: 0;
color: var(--c-text);
transition: opacity 0.15s ease;
}
.nav-toggle::before {
content: "";
display: block;
width: 22px;
height: 1.5px;
background: currentColor;
box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.site-nav.is-open .nav-toggle { opacity: 0.6; }
/* Tablet/Desktop: nav と検索を展開、hamburger を隠す */
@media (min-width: 881px) {
.site-header-inner { height: 72px; }
.site-branding .site-title,
.site-branding a.site-title {
font-size: 1.5rem;
letter-spacing: 0.01em;
}
.site-branding .site-title-sub {
display: block;
font-family: var(--font-tag);
font-size: 0.65rem;
letter-spacing: 0.32em;
color: var(--c-muted);
margin-top: 2px;
font-weight: 500;
text-transform: uppercase;
}
.site-nav { gap: 1.5rem; }
.site-nav ul,
.nav-menu {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
position: static;
padding: 0;
border: 0;
}
.site-nav.is-open .nav-menu li,
.nav-menu li { border: 0; }
.nav-menu a,
.site-nav.is-open .nav-menu a {
display: inline;
padding: 0;
font-family: var(--font-tag);
font-size: 0.74rem;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
color: var(--c-text);
position: relative;
}
.nav-menu a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--c-text);
transform: scaleX(0);
transition: transform 0.2s ease;
}
.nav-menu a:hover { opacity: 1; }
.nav-menu a:hover::after { transform: scaleX(1); }
.nav-toggle { display: none; }
.search-toggle { display: none; }
.site-search {
display: flex;
align-items: center;
border-bottom: 1px solid var(--c-border);
padding: 0.2rem 0;
}
.site-search input {
border: 0;
outline: 0;
background: transparent;
font-size: 0.85rem;
padding: 0 0.5rem;
width: 140px;
}
.site-search button {
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
color: var(--c-muted);
font-size: 0.85rem;
}
}
/* ===========================================================================
Hero — Editorial Magazine Style
- 編集ファッション誌の表紙のような mixed typography
- サイドの細いライン、italic キーワード、large serif title
=========================================================================== */
.hero {
position: relative;
min-height: 65vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-ink);
color: #fff;
overflow: hidden;
padding: var(--space-7) 0;
}
.hero::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(180deg, rgba(10,9,7,0.55) 0%, rgba(10,9,7,0.78) 100%),
var(--hero-bg-image,
linear-gradient(135deg, #1a1817 0%, #0a0907 100%)
),
radial-gradient(ellipse at 30% 20%, rgba(122, 26, 26, 0.35) 0%, transparent 60%);
background-size: cover;
background-position: center;
z-index: 0;
animation: heroFadeIn 1.2s ease-out;
}
@keyframes heroFadeIn {
from { opacity: 0; transform: scale(1.05); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; }
}
.hero::after {
content: "";
position: absolute;
top: 50%;
left: var(--gutter);
right: var(--gutter);
height: 1px;
background: rgba(255,255,255,0.08);
z-index: 0;
}
@media (min-width: 720px) {
.hero { min-height: 88vh; }
}
.hero::before {
content: "";
position: absolute; inset: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%),
radial-gradient(circle at 30% 30%, #2a2a2a 0%, #0a0a0a 80%);
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 880px;
padding: var(--space-7) var(--gutter);
text-align: center;
}
.hero-issue-label {
display: inline-block;
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin: 0 auto var(--space-4);
font-weight: 500;
padding: 0.4rem 1rem;
border: 1px solid rgba(255,255,255,0.25);
}
.hero-eyebrow {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: var(--space-6);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: "";
display: block;
width: 32px;
height: 1px;
background: var(--c-gold);
opacity: 0.7;
}
.hero-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(2.2rem, 7vw, 4.2rem);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 0 0 var(--space-5);
color: #fff;
}
.hero-title em,
.hero-title .accent {
font-style: normal;
font-weight: 700;
}
.hero-sub {
font-family: var(--font-tag);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin: 0 0 var(--space-6);
font-weight: 500;
}
.hero-lead {
font-size: 0.96rem;
line-height: 2;
color: rgba(255,255,255,0.78);
margin: 0 auto var(--space-7);
max-width: 540px;
font-weight: 300;
}
.hero-scroll {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-tag);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #fff;
border: 1px solid rgba(255,255,255,0.4);
padding: 1rem 2rem;
transition: all 0.25s ease;
min-height: 48px;
}
.hero-scroll:hover {
background: #fff;
color: var(--c-ink) !important;
opacity: 1;
border-color: #fff;
}
.hero-stats {
display: flex;
gap: var(--space-7);
justify-content: center;
margin-top: var(--space-7);
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
flex-wrap: wrap;
font-weight: 500;
}
.hero-stats > div {
position: relative;
padding: 0 var(--space-4);
}
.hero-stats > div + div::before {
content: "";
position: absolute;
left: calc(-1 * var(--space-7) / 2);
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 32px;
background: rgba(255,255,255,0.18);
}
.hero-stats strong {
display: block;
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 2.2rem;
color: var(--c-gold);
margin-bottom: var(--space-1);
letter-spacing: -0.01em;
line-height: 1;
}
/* ----------- Section common (Editorial, Mobile-first padding) ----------- */
.section {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--space-7) var(--gutter);
}
.section-header {
text-align: center;
margin-bottom: var(--space-6);
position: relative;
}
.section-header::after {
content: "";
display: block;
width: 40px;
height: 1px;
background: var(--c-border-strong);
margin: var(--space-4) auto 0;
}
@media (min-width: 720px) {
.section { padding: var(--space-9) var(--gutter); }
.section-header { margin-bottom: var(--space-7); }
}
.section-eyebrow {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: var(--space-3);
font-weight: 600;
}
.section-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 4vw, 2.4rem);
letter-spacing: 0.01em;
line-height: 1.25;
margin: 0;
color: var(--c-text);
}
.section-divider {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
.section-divider hr {
border: 0;
border-top: 1px solid var(--c-border);
margin: 0;
}
/* ----------- Content wrap ----------- */
.site-content {
display: block;
}
.content-wrap {
max-width: var(--max-w);
margin: 0 auto;
padding: 1.25rem var(--gutter);
}
@media (min-width: 720px) {
.content-wrap { padding: 2.5rem var(--gutter); }
}
/* ===========================================================================
Card grid (Mobile-first)
- Mobile: 横並び(thumb 左 + body 右)で1件1行、縦スキャンが速い
- >=720px: 2列のグリッド、縦カードに切替
- >=1024px: 3列
=========================================================================== */
.post-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.post-card { background: transparent; }
.post-card-link {
display: flex;
gap: 0.9rem;
color: inherit;
align-items: flex-start;
min-height: 88px; /* touch-friendly */
}
.post-card-link:hover { opacity: 1; }
.post-card .entry-thumbnail img,
.post-card-thumb img {
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
filter 0.5s ease,
opacity 0.4s ease;
filter: saturate(0.78) contrast(1.02);
}
.post-card-link:hover .post-card-thumb img,
.post-card-link:hover .entry-thumbnail img {
transform: scale(1.05);
filter: saturate(1) contrast(1);
}
.post-card-link:hover .post-card-title { color: var(--c-accent); }
.post-card-title {
transition: color 0.25s ease, opacity 0.15s ease;
}
.post-card .entry-thumbnail,
.post-card-thumb {
position: relative;
flex: 0 0 112px;
width: 112px;
aspect-ratio: 1 / 1;
overflow: hidden;
margin: 0;
background: var(--c-bg-alt);
}
.post-card .entry-thumbnail img,
.post-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.post-card-thumb-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--c-muted);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.post-card-body {
flex: 1;
min-width: 0;
padding-top: 0.1rem;
}
.post-card-cat {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-accent);
margin: 0 0 var(--space-2);
font-weight: 600;
}
.post-card-title {
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
line-height: 1.4;
font-weight: 500;
margin: 0 0 var(--space-2);
letter-spacing: -0.005em;
transition: opacity 0.2s ease, color 0.2s ease;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--c-text);
}
.post-card-meta,
.post-card .post-card-meta {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.18em;
color: var(--c-muted);
font-weight: 500;
}
.post-card-excerpt {
display: none; /* モバイルは抜粋を出さず情報密度を上げる */
}
/* Tablet 以上: 縦カード + 2列グリッド */
@media (min-width: 720px) {
.post-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1.5rem;
}
.post-card-link {
flex-direction: column;
gap: 0;
min-height: 0;
}
.post-card .entry-thumbnail,
.post-card-thumb {
flex: none;
width: 100%;
aspect-ratio: 4 / 3;
margin: 0 0 1rem;
}
.post-card-body { padding-top: 0; }
.post-card-cat { font-size: 0.66rem; letter-spacing: 0.3em; margin-bottom: var(--space-2); }
.post-card-title {
font-size: 1.15rem;
line-height: 1.4;
margin: 0 0 var(--space-3);
-webkit-line-clamp: unset;
overflow: visible;
}
.post-card-meta { font-size: 0.7rem; letter-spacing: 0.22em; }
.post-card-excerpt {
display: -webkit-box;
color: var(--c-text-sub);
font-size: 0.85rem;
line-height: 1.7;
margin: 0.5rem 0 0;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Desktop: 3列 */
@media (min-width: 1024px) {
.post-list { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; }
}
/* ===========================================================================
Page template (固定ページ /import/ /about/ /contact/ など)
- page.php がコンテナを持たないため、ここで左右ガター + 最大幅 を確保
- 中の cover/cover image だけは alignfull で画面端まで広がるよう例外を残す
=========================================================================== */
.entry-page {
max-width: var(--max-w);
margin: 0 auto;
padding: 1.5rem var(--gutter) 2rem;
}
.entry-page .entry-header { margin-bottom: 1.25rem; }
.entry-page .entry-title {
font-size: clamp(1.4rem, 5vw, 2rem);
font-weight: 700;
letter-spacing: 0.08em;
margin: 0;
line-height: 1.4;
}
.entry-page .entry-content {
font-size: 0.95rem;
line-height: 1.95;
}
.entry-page .entry-content h2,
.entry-page .entry-content h3 {
margin-top: 2rem;
}
/* 既存 alignfull の cover などは突き抜けて OK。ただし viewport をはみ出さない */
.entry-page .alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
}
.entry-page .alignwide {
margin-left: calc(50% - 45vw);
margin-right: calc(50% - 45vw);
max-width: 90vw;
}
@media (min-width: 720px) {
.entry-page { padding: 2.5rem var(--gutter) 3rem; }
.entry-page .entry-header { margin-bottom: 1.75rem; }
}
/* ===========================================================================
Single article (Mobile-first)
- Mobile: タイトル左寄せ・上下余白タイト・サムネは画面端まで full-bleed
- >=961px: 中央寄せ・サイドバー共存・サムネは枠内アスペクト16:9
=========================================================================== */
.entry-single {
max-width: 760px;
margin: 0 auto;
padding: 1.5rem var(--gutter) 0.5rem;
}
.entry-single .entry-header {
margin-bottom: 1.5rem;
text-align: left; /* モバイルは左寄せ(中央寄せはタイトル可読性を落とす) */
}
.entry-single .entry-cat {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: var(--space-3);
font-weight: 600;
}
.entry-single .entry-cat a { color: var(--c-accent); }
.entry-single .entry-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 6vw, 2.6rem);
line-height: 1.25;
letter-spacing: -0.005em;
margin: 0 0 var(--space-4);
color: var(--c-text);
}
@media (min-width: 720px) {
.entry-single { padding: var(--space-7) var(--gutter) var(--space-4); }
.entry-single .entry-header { margin-bottom: var(--space-6); text-align: center; }
.entry-single .entry-cat { font-size: 0.7rem; letter-spacing: 0.35em; margin-bottom: var(--space-3); }
.entry-single .entry-title { line-height: 1.2; margin: 0 0 var(--space-4); }
}
.entry-single .entry-meta {
font-size: 0.72rem;
letter-spacing: 0.22em;
color: var(--c-muted);
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
justify-content: center;
align-items: center;
}
.entry-single .entry-meta .entry-updated {
color: var(--c-text);
padding: 0.1rem 0.5rem;
border: 1px solid var(--c-border-strong);
letter-spacing: 0.1em;
font-size: 0.66rem;
}
.entry-single .entry-meta .entry-reading-time::before {
content: "⏱ ";
letter-spacing: 0;
}
/* サムネ: モバイルでも左右マージンを残し、画面端ベタ付け回避 */
.entry-single .entry-thumbnail {
margin: 1.25rem 0 1.5rem;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--c-bg-alt);
}
.entry-single .entry-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) {
.entry-single .entry-thumbnail {
margin: 2rem 0 2.5rem;
aspect-ratio: 16 / 9;
}
}
/* 本文中のブロック(cover/gallery/embed/image)もモバイルで画面端に張り付かないように
wp-block-cover の alignfull / alignwide だけは意図的にフルブリードを許容する */
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed,
.entry-content > figure {
margin-left: 0;
margin-right: 0;
}
/* 画像・figure 周りに発生する不要な dotted ボーダー(Gutenberg/Cocoon遺産/ewww-image-optimizer
の lazyload プレースホルダ/ブラウザフォーカス由来)を全方位で抑止。 */
.entry-content img,
.entry-content figure,
.entry-content .wp-block-image,
.entry-content .wp-block-gallery,
.entry-content .wp-block-cover,
.entry-content picture,
.wp-block-cover__image-background,
img.lazyload,
img.lazyloaded,
img[data-eio],
img[src*="data:image/gif;base64"],
img[src*="data:image/png;base64"] {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-style: none !important;
}
.entry-content img,
.wp-block-cover__image-background {
background: transparent;
}
.entry-content figure picture,
.entry-content figure img { display: block; }
/* ewww-image-optimizer の lazyload プレースホルダ画像が小さい base64 で
ブラウザによっては「点線」風に見える問題への対処。
実画像がロードされるまでは、コンテナ側を warm-gray にして悪目立ちさせない。 */
.wp-block-cover,
.entry-thumbnail,
.guz-cs-card-thumb,
.guz-featured-pick-thumb,
.guz-trending-thumb,
.post-card-thumb,
.guz-popular-thumb {
background: var(--c-bg-alt);
}
.wp-block-cover__image-background.lazyload,
.entry-thumbnail img.lazyload,
.post-card-thumb img.lazyload {
opacity: 0;
transition: opacity 0.35s ease;
}
.wp-block-cover__image-background.lazyloaded,
.entry-thumbnail img.lazyloaded,
.post-card-thumb img.lazyloaded {
opacity: 1;
}
/* iOS/Safari の long-press/focus アウトラインも抑制(モバイルの "点線" 原因の典型) */
.entry-content a:focus img,
.wp-block-image a:focus img,
.entry-thumbnail a:focus img {
outline: 0 !important;
box-shadow: none !important;
}
.entry-content {
font-size: 1rem;
line-height: 2;
color: var(--c-text);
}
.entry-content > * { margin: 0 0 var(--space-5); }
/* Drop cap: 本文最初の段落の先頭文字を装飾 */
.entry-single .entry-content > p:first-of-type:not(.has-text-align-center)::first-letter {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 4.2rem;
float: left;
line-height: 1;
padding: 0.35rem 0.6rem 0 0;
color: var(--c-accent);
letter-spacing: -0.02em;
}
.entry-content h2 {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.7rem;
letter-spacing: 0.01em;
line-height: 1.35;
margin-top: var(--space-7);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--c-border-strong);
color: var(--c-text);
}
.entry-content h2::before {
content: "—";
color: var(--c-accent);
font-style: normal;
margin-right: 0.5rem;
display: inline-block;
}
.entry-content h3 {
font-family: var(--font-sans);
font-size: 1.18rem;
font-weight: 700;
letter-spacing: 0.01em;
margin-top: var(--space-6);
margin-bottom: var(--space-3);
padding-left: var(--space-3);
border-left: 3px solid var(--c-accent);
color: var(--c-text);
}
.entry-content h4 {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
margin-top: var(--space-5);
margin-bottom: var(--space-3);
}
.entry-content a {
color: var(--c-accent);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
transition: color 0.15s ease;
}
.entry-content a:hover { color: var(--c-accent-soft); opacity: 1; }
/* Pull quote / blockquote: 編集ファッション誌風 */
.entry-content blockquote {
border-left: none;
margin: var(--space-7) 0;
padding: var(--space-5) var(--space-6);
color: var(--c-text);
background: var(--c-bg-alt);
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
line-height: 1.6;
font-weight: 500;
position: relative;
}
/* Pull quote(自動挿入): editorial 雑誌風、左ボーダー + 大きな引用符 + serif italic */
.entry-content .guz-pullquote {
background: transparent;
border-top: 1px solid var(--c-border-strong);
border-bottom: 1px solid var(--c-border-strong);
padding: var(--space-6) var(--space-4) var(--space-5);
margin: var(--space-7) calc(-1 * var(--space-4));
text-align: center;
font-size: 1.45rem;
line-height: 1.55;
max-width: none;
}
.entry-content .guz-pullquote::before {
content: "\201C";
position: absolute;
top: -1.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 5rem;
background: var(--c-bg);
padding: 0 1rem;
color: var(--c-accent);
line-height: 1;
}
.entry-content .guz-pullquote p {
margin: 0;
color: var(--c-text);
letter-spacing: 0.005em;
}
@media (min-width: 720px) {
.entry-content .guz-pullquote {
font-size: 1.65rem;
margin: var(--space-8) calc(-1 * var(--space-7));
padding: var(--space-7) var(--space-7) var(--space-6);
}
}
.entry-content blockquote::before {
content: "\201C"; /* opening curly quote */
position: absolute;
top: -0.5rem;
left: var(--space-4);
font-size: 4rem;
font-family: var(--font-display);
color: var(--c-accent);
line-height: 1;
font-style: italic;
}
.entry-content blockquote p { margin: 0; }
.entry-content blockquote cite {
display: block;
margin-top: var(--space-3);
font-family: var(--font-tag);
font-style: normal;
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--c-muted);
}
.entry-content code {
background: var(--c-bg-alt);
padding: 0.1rem 0.4rem;
font-size: 0.9em;
font-family: ui-monospace, monospace;
}
.entry-content ul, .entry-content ol { padding-left: var(--space-5); }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content strong { font-weight: 700; color: var(--c-text); }
.entry-content em { font-family: var(--font-display); font-style: italic; }
.entry-footer {
max-width: 760px;
margin: 2.5rem auto 0;
padding: 1.5rem var(--gutter) 0;
border-top: 1px solid var(--c-border);
font-size: 0.78rem;
letter-spacing: 0.15em;
color: var(--c-muted);
}
/* ----------- Category hero(画像 + 強めの overlay + center editorial typography)-----------
* 暗い画像でも文字が確実に読めるよう overlay を強化、lead text の opacity を上げる。
*/
.archive-header.has-cat-hero {
position: relative;
max-width: none;
padding: 0;
margin: 0 0 var(--space-6);
overflow: hidden;
min-height: 48vh;
background-image: linear-gradient(180deg, rgba(10,9,7,0.6) 0%, rgba(10,9,7,0.82) 100%), var(--cat-hero-image, none);
background-size: cover;
background-position: center;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
animation: heroFadeIn 1.2s ease-out;
}
.archive-header.has-cat-hero .archive-hero-overlay {
display: none; /* gradient は background-image で実装済み */
}
.archive-hero-inner {
position: relative;
z-index: 1;
max-width: 760px;
padding: var(--space-8) var(--gutter);
text-align: center;
}
.archive-hero-eyebrow {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--c-gold);
margin: 0 0 var(--space-5);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.archive-hero-eyebrow::before,
.archive-hero-eyebrow::after {
content: "";
display: block;
width: 28px;
height: 1px;
background: var(--c-gold);
opacity: 0.7;
}
.archive-title-hero {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 6vw, 3.2rem);
letter-spacing: 0;
line-height: 1.2;
margin: 0 0 var(--space-5);
color: #fff;
}
.archive-hero-lead {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 2;
color: #ffffff;
margin: 0 auto;
max-width: 540px;
font-weight: 400;
font-style: normal;
text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
@media (min-width: 720px) {
.archive-header.has-cat-hero { min-height: 56vh; }
}
/* ----------- Archive header (Mobile-first) ----------- */
.archive-header {
text-align: center;
padding: 1.75rem var(--gutter) 0;
max-width: var(--max-w);
margin: 0 auto;
}
.archive-header .archive-title {
font-size: clamp(1.25rem, 5vw, 2rem);
letter-spacing: 0.1em;
margin: 0;
line-height: 1.4;
}
.archive-header .archive-description {
color: var(--c-text-sub);
margin-top: 0.75rem;
font-size: 0.88rem;
line-height: 1.7;
}
.archive-header-hero {
background: var(--c-bg-alt);
padding: 2rem var(--gutter);
margin-bottom: 0;
}
@media (min-width: 720px) {
.archive-header { padding: 3.5rem var(--gutter) 0; }
.archive-header .archive-title { letter-spacing: 0.12em; }
.archive-header .archive-description { margin-top: 1rem; font-size: 0.92rem; }
.archive-header-hero { padding: 3.5rem var(--gutter); }
}
/* ----------- Breadcrumb ----------- */
.breadcrumb {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--space-4) var(--gutter) 0;
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.22em;
color: var(--c-muted);
text-transform: uppercase;
font-weight: 500;
}
.breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
}
.breadcrumb li + li::before {
content: "/";
margin-right: 0.5rem;
color: var(--c-border);
}
.breadcrumb a:hover { opacity: 0.6; }
/* ----------- AdSense / 広告枠 ----------- */
.guz-ad {
margin: 2rem auto;
max-width: 728px;
text-align: center;
padding: 0.5rem;
}
.guz-ad:empty { display: none; }
/* ----------- Related posts ----------- */
.related-posts {
max-width: var(--max-w);
margin: 4rem auto 2rem;
padding: 3rem var(--gutter) 0;
border-top: 1px solid var(--c-border);
}
.related-title {
font-size: 0.78rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-muted);
text-align: center;
margin: 0 0 2rem;
}
/* ----------- Pagination ----------- */
.nav-links {
display: flex;
justify-content: center;
gap: 0.75rem;
margin: 3rem 0 1rem;
font-size: 0.8rem;
letter-spacing: 0.15em;
}
.nav-links .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 0.65rem;
border: 1px solid var(--c-border);
color: var(--c-text);
}
.nav-links .page-numbers.current {
background: var(--c-text);
color: #fff;
border-color: var(--c-text);
}
.nav-links .page-numbers:hover { border-color: var(--c-text); opacity: 1; }
/* ----------- Affiliate buttons (Editorial, WCAG AA 確保) -----------
* 全プロバイダで text/background contrast ratio ≥ 4.5:1 を確保。
* Amazon の黄系は黒文字維持(白文字だと 2.6:1 で AA NG)。
*/
.guz-affi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: var(--space-3) var(--space-5);
margin: var(--space-1) var(--space-1);
background: var(--c-text);
color: #fff !important;
font-family: var(--font-tag);
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
border: 1px solid var(--c-text);
text-decoration: none;
transition: all 0.25s ease;
}
.guz-affi-btn:hover {
background: #fff;
color: var(--c-text) !important;
opacity: 1;
}
/* 楽天: 公式 #BF0000 / 白文字 contrast 7.5:1 — AA✓ AAA✓ */
.guz-affi-rakuten { background: #bf0000; border-color: #bf0000; color: #fff !important; }
.guz-affi-rakuten:hover { background: #fff; color: #bf0000 !important; border-color: #bf0000; }
/* Amazon: 公式 #FF9900 / 黒文字 contrast 9.1:1 — AAA✓(白文字は NG なので黒固定) */
.guz-affi-amazon { background: #ff9900; border-color: #d97c00; color: #1a1817 !important; }
.guz-affi-amazon:hover { background: #1a1817; color: #ff9900 !important; border-color: #1a1817; }
/* Yahoo!: 公式 #FF0033 / 白文字 contrast 5.0:1 — AA✓ */
.guz-affi-yahoo { background: #d6002b; border-color: #d6002b; color: #fff !important; } /* #FF0033 を少し暗くして AA確保 */
.guz-affi-yahoo:hover { background: #fff; color: #d6002b !important; border-color: #d6002b; }
/* メルカリ: 公式 #FF5959 だと白文字 3.0:1 で NG → 暗めに調整 #c83838 で 5.1:1 */
.guz-affi-mercari { background: #c83838; border-color: #c83838; color: #fff !important; }
.guz-affi-mercari:hover { background: #fff; color: #c83838 !important; border-color: #c83838; }
/* generic / その他: warm-black 維持 */
.guz-affi-generic { background: var(--c-text); border-color: var(--c-text); color: #fff !important; }
.guz-affi-generic:hover { background: #fff; color: var(--c-text) !important; }
/* Affiliate box */
.guz-affi-box {
display: flex;
gap: 1.5rem;
margin: 2rem 0;
padding: 1.5rem;
border: 1px solid var(--c-border);
background: #fff;
align-items: flex-start;
}
.guz-affi-box-image { flex: 0 0 160px; }
.guz-affi-box-image img { width: 100%; height: auto; }
.guz-affi-box-body { flex: 1; min-width: 0; }
.guz-affi-box-title {
font-weight: 700;
margin: 0 0 0.4rem;
font-size: 1rem;
letter-spacing: 0.03em;
}
.guz-affi-box-price {
font-weight: 700;
font-size: 1.15rem;
margin: 0 0 0.4rem;
letter-spacing: 0.04em;
}
.guz-affi-box-note {
color: var(--c-muted);
font-size: 0.8rem;
margin: 0 0 0.75rem;
letter-spacing: 0.05em;
}
.guz-affi-box-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.guz-affi-box-buttons .guz-affi-btn {
flex: 1 1 auto;
min-width: 140px;
text-align: center;
margin: 0;
}
@media (max-width: 560px) {
.guz-affi-box { flex-direction: column; }
.guz-affi-box-image { flex: 0 0 auto; max-width: 240px; }
}
/* Price */
.guz-price {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.3rem 0.85rem;
border: 1px solid var(--c-border-strong);
font-size: 0.9rem;
}
.guz-price-note {
color: var(--c-muted);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.guz-price-value { font-weight: 700; letter-spacing: 0.03em; }
/* ----------- Pickup section (high-revenue category) ----------- */
.pickup {
margin: 2rem 0 3rem;
padding: 2.5rem var(--gutter);
background: var(--c-bg-alt);
}
.pickup-title {
font-size: 0.78rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-muted);
text-align: center;
margin: 0 0 1.75rem;
}
.archive-list-title {
font-size: 0.78rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-muted);
margin: 2.5rem 0 1.5rem;
text-align: center;
}
.archive-cta {
max-width: 760px;
margin: 3.5rem auto;
padding: 2.5rem var(--gutter);
text-align: center;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.archive-cta h2 {
font-size: 0.82rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 1.25rem;
}
.archive-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
/* ----------- Preferred Sources CTA (Google) ----------- */
.guz-prefsrc {
max-width: 760px;
margin: 3rem auto 1rem;
padding: 1.75rem;
border: 1px solid var(--c-border-strong);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.guz-prefsrc-text {
flex: 1;
min-width: 0;
}
.guz-prefsrc-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 0.3rem;
}
.guz-prefsrc-title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
margin: 0;
line-height: 1.6;
}
.guz-prefsrc-note {
font-size: 0.78rem;
color: var(--c-muted);
margin: 0.4rem 0 0;
letter-spacing: 0.02em;
}
.guz-prefsrc-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
padding: 0.85rem 1.4rem;
background: var(--c-text);
color: #fff !important;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
border: 1px solid var(--c-text);
white-space: nowrap;
}
.guz-prefsrc-btn:hover {
background: #fff;
color: var(--c-text) !important;
opacity: 1;
}
.guz-prefsrc-btn::before {
content: "★";
font-size: 0.9rem;
letter-spacing: 0;
}
@media (max-width: 560px) {
.guz-prefsrc { flex-direction: column; align-items: stretch; text-align: center; }
.guz-prefsrc-btn { justify-content: center; }
}
/* ----------- Footer — Editorial colophon style (Mobile-first) ----------- */
.site-footer {
margin-top: 2.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--c-border-strong);
background: var(--c-bg);
position: relative;
}
.site-footer::before {
content: "❋";
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--c-bg);
color: var(--c-accent);
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
padding: 0 1rem;
line-height: 1;
}
@media (min-width: 720px) {
.site-footer { margin-top: 6rem; padding-top: 4rem; }
}
/* Colophon row at the bottom (発行情報 — 老舗誌の奥付) */
.site-colophon {
max-width: var(--max-w);
margin: var(--space-7) auto 0;
padding: var(--space-6) var(--gutter) var(--space-5);
border-top: 1px solid var(--c-border);
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: center;
text-align: center;
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
}
.site-colophon-wordmark {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 1.4rem;
color: var(--c-text);
letter-spacing: 0.02em;
text-transform: none;
margin-bottom: var(--space-1);
}
.site-colophon-meta {
display: flex;
gap: var(--space-5);
flex-wrap: wrap;
justify-content: center;
}
.site-colophon-meta > span { position: relative; }
.site-colophon-meta > span + span::before {
content: "·";
position: absolute;
left: calc(-1 * var(--space-5) / 2);
color: var(--c-border-strong);
letter-spacing: 0;
}
.site-footer-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter) 2.5rem;
}
.site-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
@media (max-width: 720px) {
.site-footer-grid { grid-template-columns: 1fr; }
}
.site-footer-brand .site-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 1.4rem;
letter-spacing: 0;
}
.site-footer-tag {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.86rem;
color: var(--c-text-sub);
letter-spacing: 0.02em;
margin-top: var(--space-3);
line-height: 1.75;
}
.site-footer-heading {
font-family: var(--font-tag);
font-size: 0.68rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-accent);
margin: 0 0 var(--space-4);
font-weight: 600;
}
.footer-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-menu a {
font-size: 0.85rem;
color: var(--c-text);
}
.site-footer-social {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
}
.site-footer-social a {
width: 36px; height: 36px;
border: 1px solid var(--c-border);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
}
.site-copyright {
border-top: 1px solid var(--c-border);
padding: 1.5rem var(--gutter);
text-align: center;
font-size: 0.72rem;
letter-spacing: 0.2em;
color: var(--c-muted);
margin: 0;
}
/* ----------- 404 ----------- */
.error-404 {
max-width: 600px;
margin: 0 auto;
padding: 6rem var(--gutter);
text-align: center;
}
.error-404 h1 {
font-size: 2rem;
letter-spacing: 0.1em;
margin: 0 0 1rem;
}
/* ----------- Search form ----------- */
.search-form {
display: flex;
align-items: center;
max-width: 480px;
margin: 1.5rem auto;
border: 1px solid var(--c-border-strong);
}
.search-form .search-field {
flex: 1;
border: 0;
outline: 0;
background: transparent;
padding: 0.85rem 1rem;
font-size: 0.9rem;
}
.search-form .search-submit {
border: 0;
background: var(--c-text);
color: #fff;
padding: 0.85rem 1.2rem;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
}
/* ===========================================================================
Single layout with sidebar (Mobile-first, no overlap)
- <961px: 完全に block 縦並び。サイドバーは記事の下に普通に積み重なる。
position: static! ← sticky を無効化。
- >=961px: CSS Grid で2カラム + sidebar sticky
=========================================================================== */
.single-layout {
display: block; /* 明示 block。後で grid 化 */
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
position: relative;
}
.single-layout .entry-single {
max-width: none;
padding: 1.5rem 0 0.5rem;
margin: 0;
position: relative;
z-index: 1;
}
.site-sidebar {
display: block;
padding-top: 1rem;
position: static !important; /* タブレットの中間幅で sticky 残留しないよう強制 */
top: auto !important;
clear: both;
z-index: 0;
}
.site-sidebar > * + * { margin-top: 2rem; }
@media (min-width: 961px) {
.single-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 3rem;
align-items: start;
}
.single-layout .entry-single { padding: 3rem 0 1rem; }
.site-sidebar {
padding-top: 3rem;
position: sticky !important;
top: 84px !important;
align-self: start;
}
.site-sidebar > * + * { margin-top: 2.5rem; }
}
/* Popular posts */
.guz-popular-title {
font-size: 0.72rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 1.25rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--c-border-strong);
}
.guz-popular-list {
list-style: none;
margin: 0;
padding: 0;
}
.guz-popular-item { margin: 0 0 1rem; }
.guz-popular-item a {
display: grid;
grid-template-columns: 24px 64px 1fr;
gap: 0.75rem;
align-items: center;
color: inherit;
}
.guz-popular-rank {
font-weight: 700;
font-size: 1rem;
color: var(--c-muted);
letter-spacing: 0.05em;
}
.guz-popular-thumb {
width: 64px;
height: 64px;
overflow: hidden;
background: var(--c-bg-alt);
}
.guz-popular-thumb img { width: 100%; height: 100%; object-fit: cover; }
.guz-popular-body { display: block; min-width: 0; }
.guz-popular-title-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.82rem;
line-height: 1.5;
font-weight: 700;
}
.guz-popular-date {
display: block;
font-size: 0.68rem;
letter-spacing: 0.18em;
color: var(--c-muted);
margin-top: 0.25rem;
}
/* Category list (sidebar) */
.guz-cat-list ul { list-style: none; margin: 0; padding: 0; }
.guz-cat-list li { border-bottom: 1px solid var(--c-border); }
.guz-cat-list li a {
display: flex;
justify-content: space-between;
padding: 0.65rem 0;
font-size: 0.82rem;
letter-spacing: 0.05em;
}
.guz-cat-list .guz-cat-count {
color: var(--c-muted);
font-size: 0.72rem;
}
/* ----------- Table of contents ----------- */
.guz-toc {
margin: 1.5rem 0 2.5rem;
padding: 1.5rem 1.75rem;
background: var(--c-bg-alt);
border-left: 3px solid var(--c-text);
}
.guz-toc-title {
font-size: 0.72rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 1rem;
}
.guz-toc-list,
.guz-toc-sub {
list-style: none;
margin: 0;
padding: 0;
counter-reset: tocitem;
}
.guz-toc-list > li.guz-toc-h2 { counter-increment: tocitem; margin: 0.5rem 0; }
.guz-toc-list > li.guz-toc-h2::before {
content: counter(tocitem, decimal-leading-zero) ".";
color: var(--c-muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
margin-right: 0.5rem;
font-weight: 700;
}
.guz-toc-list > li.guz-toc-h2 > a {
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.02em;
border-bottom: 0;
}
.guz-toc-sub {
margin: 0.4rem 0 0.6rem 1.5rem;
border-left: 1px solid var(--c-border);
padding-left: 1rem;
}
.guz-toc-sub li.guz-toc-h3 a {
font-size: 0.82rem;
color: var(--c-text-sub);
border-bottom: 0;
}
/* ----------- Social share ----------- */
.guz-share {
margin: 2rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid var(--c-border);
}
.guz-share-label {
font-size: 0.7rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 0.75rem;
}
.guz-share-list {
display: flex;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.guz-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--c-border);
background: #fff;
color: var(--c-text);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
transition: all 0.15s ease;
}
.guz-share-btn:hover {
background: var(--c-text);
color: #fff !important;
opacity: 1;
}
/* ----------- カテゴリ別アクセント色 (--c-cat) -----------
* body / article に付く category-{slug} で上書きし、
* 主要カテゴリ視認性を上げる。デフォルトは黒(モノクロベース)。
*/
:root { --c-cat: var(--c-text); }
.category-import-brand, .category-domestic-brand { --c-cat: #1c2541; } /* navy */
.category-fragrance { --c-cat: #7a1a1a; } /* deep red */
.category-fashion { --c-cat: #1a1a1a; } /* black */
.category-guide { --c-cat: #7a5a1a; } /* gold */
.category-lifestyle { --c-cat: #2e5a3a; } /* sage */
.category-interior { --c-cat: #8a3a1a; } /* terracotta */
.category-fruit { --c-cat: #b08a1a; } /* mustard */
/* アクセントを使う要素群 */
.post-card-cat { color: var(--c-cat); font-weight: 700; }
.entry-single .entry-cat a,
.entry-single .entry-cat { color: var(--c-cat); }
.entry-single .entry-cat::before {
content: "";
display: inline-block;
width: 18px;
height: 1px;
background: var(--c-cat);
vertical-align: middle;
margin-right: 0.5rem;
transform: translateY(-2px);
}
.entry-content h2 { border-bottom-color: var(--c-cat); }
.entry-content h3 { border-left-color: var(--c-cat); }
.category .archive-header .archive-title::before {
content: "";
display: block;
width: 32px;
height: 2px;
background: var(--c-cat);
margin: 0 auto 1.25rem;
}
/* TOC sticky の左ボーダーもカテゴリ色 */
.guz-toc-sticky .guz-toc { border-left-color: var(--c-cat); }
/* hover の磨き込み: 画像 zoom と title fade を統一 */
.post-card-link { transition: opacity 0.2s ease; }
.post-card-link:hover .post-card-cat { opacity: 1; }
.post-card-thumb img { transition: transform 0.6s ease; }
.post-card-link:hover .post-card-thumb img { transform: scale(1.06); }
/* 見出しまわりタイポの磨き込み */
.entry-content h2 {
position: relative;
scroll-margin-top: 84px;
}
.entry-content h3 { scroll-margin-top: 84px; }
/* ----------- Skeleton loader (画像読み込み中のシマー) ----------- */
.guz-skeleton {
position: relative;
overflow: hidden;
background: var(--c-bg-alt);
}
.guz-skeleton::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(255,255,255,0.6) 50%,
rgba(0,0,0,0) 100%);
background-size: 200% 100%;
animation: guzSkeletonShimmer 1.6s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.guz-skeleton img { position: relative; z-index: 1; }
.guz-skeleton img[src] { background: #fff; }
@keyframes guzSkeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ユーザーが動きを嫌う場合は止める */
@media (prefers-reduced-motion: reduce) {
.guz-skeleton::before { animation: none; }
.guz-mobile-cta-arrow { animation: none; }
}
/* ----------- Mobile sticky CTA ----------- */
.guz-mobile-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
z-index: 140;
transform: translateY(120%);
transition: transform 0.25s ease;
pointer-events: none;
}
.guz-mobile-cta.is-visible {
transform: translateY(0);
pointer-events: auto;
}
.guz-mobile-cta-btn {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--c-text);
color: #fff;
border: 0;
padding: 0.95rem 1.25rem;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.18em;
cursor: pointer;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.guz-mobile-cta-arrow {
display: inline-block;
transform: translateY(1px);
animation: guzMobileCtaArrow 1.4s ease infinite;
}
@keyframes guzMobileCtaArrow {
0%, 100% { transform: translateY(0); opacity: 0.85; }
50% { transform: translateY(3px); opacity: 1; }
}
/* Desktop: hide entirely */
@media (min-width: 721px) {
.guz-mobile-cta { display: none; }
}
/* Bottom nav と重ねないようマージン調整 */
@media (max-width: 720px) {
.guz-mobile-cta { bottom: 64px; }
}
/* ----------- Mobile bottom nav ----------- */
.guz-bottom-nav {
display: none;
}
@media (max-width: 720px) {
.guz-bottom-nav {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--c-border);
z-index: 150;
padding: 0.25rem env(safe-area-inset-right, 0) calc(0.25rem + env(safe-area-inset-bottom, 0)) env(safe-area-inset-left, 0);
box-shadow: 0 -8px 24px rgba(0,0,0,0.04);
}
body { padding-bottom: 64px; }
}
.guz-bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
padding: 0.4rem 0.15rem 0.5rem;
color: var(--c-muted);
text-align: center;
border-top: 2px solid transparent;
min-width: 0;
}
.guz-bottom-nav-item.is-active {
color: var(--c-text);
border-top-color: var(--c-text);
}
.guz-bottom-nav-icon {
font-size: 1rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.guz-bottom-nav-icon svg {
width: 22px;
height: 22px;
display: block;
}
@media (max-width: 540px) {
.guz-bottom-nav-icon svg { width: 20px; height: 20px; }
}
/* 2026-05-13: 長ラベル(IMPORT BRAND / DOMESTIC BRAND)を 2 行折り返し許可 */
.guz-bottom-nav-label {
font-size: 0.52rem;
letter-spacing: 0.04em;
line-height: 1.15;
max-width: 100%;
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 5項目超(6,7項目)時の文字縮小 */
@media (max-width: 540px) {
.guz-bottom-nav-label { font-size: 0.48rem; letter-spacing: 0.02em; }
.guz-bottom-nav-icon { font-size: 0.9rem; }
.guz-bottom-nav-item { padding: 0.35rem 0.05rem 0.45rem; gap: 0.18rem; }
}
@media (max-width: 400px) {
.guz-bottom-nav-label { font-size: 0.44rem; }
.guz-bottom-nav-icon svg { width: 18px; height: 18px; }
}
/* ===========================================================================
Author Hero (author.php / /author/{slug}/ ページ専用)
=========================================================================== */
.author-hero {
background: var(--c-bg-alt);
margin: 0 0 var(--space-7);
padding: var(--space-8) var(--gutter);
text-align: center;
}
.author-hero-inner { max-width: 720px; margin: 0 auto; }
.author-hero-monogram {
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--c-ink);
color: var(--c-gold);
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 2.4rem;
letter-spacing: 0;
line-height: 1;
margin: 0 auto var(--space-5);
user-select: none;
}
.author-hero-eyebrow {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
margin: 0 0 var(--space-3);
}
.author-hero-name {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.8rem, 5vw, 2.6rem);
letter-spacing: 0;
line-height: 1.25;
margin: 0 0 var(--space-3);
color: var(--c-text);
}
.author-hero-specialty {
font-family: var(--font-tag);
font-size: 0.75rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-text-sub);
font-weight: 500;
margin: 0 0 var(--space-5);
}
.author-hero-bio {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.95;
color: var(--c-text-sub);
margin: 0 auto var(--space-6);
max-width: 540px;
}
.author-hero-stats {
display: flex;
gap: var(--space-6);
justify-content: center;
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-muted);
flex-wrap: wrap;
}
.author-hero-stats strong {
display: block;
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.8rem;
color: var(--c-accent);
letter-spacing: -0.01em;
margin-bottom: var(--space-1);
line-height: 1;
}
.author-hero-url {
border-bottom: 1px solid var(--c-text);
padding-bottom: 2px;
color: var(--c-text);
}
/* ===========================================================================
Author bio (記事末尾) — specialty 行を追加
=========================================================================== */
.guz-author-bio-specialty {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
margin: 0 0 var(--space-3);
}
/* ----------- Author bio (EEAT) ----------- */
.guz-author-bio {
margin: 2.5rem 0 0;
padding: 1.5rem;
background: var(--c-bg-alt);
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.guz-author-bio-avatar-wrap { flex: 0 0 64px; }
.guz-author-bio-avatar,
.guz-author-bio-avatar-wrap img {
width: 64px;
height: 64px;
border-radius: 50%;
display: block;
}
/* Gravatar 未登録時の monogram fallback。
Playfair italic + warm gold + 黒円で、Editorial 感を保つ */
.guz-author-bio-monogram {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--c-ink);
color: var(--c-gold);
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 1.65rem;
letter-spacing: -0.02em;
line-height: 1;
letter-spacing: 0;
user-select: none;
}
.guz-author-bio-body { flex: 1; min-width: 0; }
.guz-author-bio-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 0.25rem;
font-weight: 700;
}
.guz-author-bio-name {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.5rem;
letter-spacing: 0.04em;
}
.guz-author-bio-desc {
font-size: 0.85rem;
line-height: 1.75;
color: var(--c-text-sub);
margin: 0 0 0.65rem;
}
.guz-author-bio-links {
font-size: 0.72rem;
letter-spacing: 0.05em;
margin: 0;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.guz-author-bio-links a {
border-bottom: 1px solid var(--c-text);
padding-bottom: 1px;
}
@media (max-width: 560px) {
.guz-author-bio { flex-direction: column; align-items: center; text-align: center; }
.guz-author-bio-links { justify-content: center; }
}
/* ----------- Comparison card (guz_compare) ----------- */
.guz-compare {
margin: 2.5rem 0;
padding: 1.5rem;
background: var(--c-bg-alt);
}
.guz-compare-header { text-align: center; margin-bottom: 1.5rem; }
.guz-compare-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 0.4rem;
}
.guz-compare-title {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.04em;
margin: 0;
}
.guz-compare-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.guz-compare-grid[data-items="2"] { grid-template-columns: repeat(2, 1fr); }
.guz-compare-grid[data-items="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
.guz-compare-grid,
.guz-compare-grid[data-items="2"],
.guz-compare-grid[data-items="3"] { grid-template-columns: 1fr; }
}
.guz-compare-item {
position: relative;
background: #fff;
border: 1px solid var(--c-border);
padding: 1.25rem 1rem 1rem;
display: flex;
flex-direction: column;
}
.guz-compare-item.is-cheapest {
border-color: var(--c-text);
border-width: 2px;
padding: calc(1.25rem - 1px) calc(1rem - 1px) calc(1rem - 1px);
}
.guz-compare-item-rank {
position: absolute;
top: 0.6rem;
left: 0.8rem;
font-size: 0.7rem;
letter-spacing: 0.15em;
color: var(--c-muted);
font-weight: 700;
}
.guz-compare-badge {
position: absolute;
top: 0.6rem;
right: 0.6rem;
background: var(--c-text);
color: #fff;
font-size: 0.62rem;
letter-spacing: 0.18em;
font-weight: 700;
padding: 0.25rem 0.55rem;
text-transform: uppercase;
}
.guz-compare-badge-cheapest { background: #bf0000; }
.guz-compare-item-image {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--c-bg-alt);
margin: 0.5rem 0 0.85rem;
}
.guz-compare-item-image img { width: 100%; height: 100%; object-fit: cover; }
.guz-compare-item-name {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.45;
margin: 0 0 0.4rem;
letter-spacing: 0.02em;
}
.guz-compare-item-price {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.03em;
margin: 0 0 0.5rem;
}
.is-cheapest .guz-compare-item-price { color: #bf0000; }
.guz-compare-item-note {
font-size: 0.72rem;
color: var(--c-muted);
margin: 0 0 0.6rem;
}
.guz-compare-item-proscons {
margin: 0.4rem 0 0.85rem;
font-size: 0.75rem;
}
.guz-compare-item-proscons dt {
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: var(--c-muted);
margin: 0.4rem 0 0.2rem;
}
.guz-compare-pros-label::before { content: "+ "; color: #007a3d; }
.guz-compare-cons-label::before { content: "- "; color: #bf0000; }
.guz-compare-item-proscons dd { margin: 0; padding: 0; }
.guz-compare-item-proscons ul { list-style: none; margin: 0; padding: 0; }
.guz-compare-item-proscons li {
font-size: 0.78rem;
line-height: 1.55;
color: var(--c-text-sub);
padding-left: 0.4rem;
}
.guz-compare-item-buttons {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding-top: 0.5rem;
}
.guz-compare-item-buttons .guz-affi-btn {
flex: 1 1 auto;
min-width: 90px;
font-size: 0.72rem;
padding: 0.7rem 0.5rem;
margin: 0;
letter-spacing: 0.1em;
text-align: center;
}
.guz-compare-footnote {
text-align: center;
font-size: 0.72rem;
color: var(--c-muted);
margin: 1.5rem 0 0;
letter-spacing: 0.05em;
}
/* ----------- Reading progress bar ----------- */
.guz-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: transparent;
z-index: 200;
pointer-events: none;
}
.guz-progress-bar {
display: block;
height: 100%;
width: 0;
background: var(--c-text);
transition: width 0.08s linear;
will-change: width;
}
/* ----------- TOC: sticky in sidebar / inline on mobile ----------- */
.guz-toc-sticky {
position: sticky;
top: 84px;
max-height: calc(100vh - 110px);
overflow-y: auto;
overflow-x: hidden;
}
.guz-toc-sticky .guz-toc {
margin: 0;
padding: 1.25rem 1.25rem;
background: #fff;
border-left: 3px solid var(--c-text);
border-top: 1px solid var(--c-border);
border-right: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.guz-toc-sticky .guz-toc-list { font-size: 0.85rem; }
.guz-toc-sticky .guz-toc-h2 > a { font-size: 0.86rem; }
.guz-toc-sticky .guz-toc-h3 a { font-size: 0.78rem; }
/* TOC link active state (scroll spy) */
.guz-toc a {
display: inline-block;
padding: 0.15rem 0;
border-bottom: 1px solid transparent !important;
transition: opacity 0.15s ease, color 0.15s ease;
}
.guz-toc a.is-active {
color: var(--c-text);
border-bottom-color: var(--c-text) !important;
font-weight: 700;
opacity: 1;
}
.guz-toc a:not(.is-active) {
opacity: 0.55;
}
.guz-toc a:hover { opacity: 1; }
/* Desktop: hide inline TOC (sidebar shows sticky), keep sidebar TOC */
@media (min-width: 961px) {
.entry-content > .guz-toc:first-of-type { display: none !important; }
}
/* Mobile/Tablet: hide sidebar sticky TOC(完全に DOM 上は残るが visible 0)
`!important` で他の CSS が干渉しても確実に消す */
@media (max-width: 960px) {
.guz-toc-sticky { display: none !important; visibility: hidden !important; }
}
/* ===========================================================================
Sidebar 重なり防止(sticky TOC × Popular widget が scroll 中に視覚衝突する事故)
1) サイドバー全体を isolation: isolate で独立スタッキングコンテキスト化
2) 各ウィジェットに不透明背景 + z-index で前後関係を明示
3) sticky TOC を z-index 最上位、Popular/Categories は通常レイヤー
=========================================================================== */
.site-sidebar {
isolation: isolate;
}
.site-sidebar .guz-toc-sticky {
background: var(--c-bg);
z-index: 5;
}
.site-sidebar .guz-toc-sticky .guz-toc {
background: var(--c-paper);
}
.site-sidebar .guz-popular,
.site-sidebar .guz-cat-list,
.site-sidebar .guz-ad,
.site-sidebar > .guz-rec {
position: relative;
background: var(--c-bg);
z-index: 1;
}
/* article 本文側もスタッキングコンテキスト分離(サイドバーへ要素が透けない) */
.single-layout .entry-single {
isolation: isolate;
}
/* fade-in 中の半透明状態が他要素に重なって見える事故対策:
sidebar 内の .guz-fade 適用要素は背景を必ず塗りつぶす */
.site-sidebar .guz-fade {
background-color: var(--c-bg);
}
/* ===========================================================================
Category showcase shortcode [guz_cat_showcase] (Mobile-first)
/import/ /domestic/ /fragrance/ 等の固定ページに人気・最新記事 + 収益スロット
=========================================================================== */
.guz-cs { margin: 2.5rem 0; }
.guz-cs-header { text-align: left; margin: 0 0 1.25rem; }
.guz-cs-header-sub { margin-top: 2.5rem; }
.guz-cs-eyebrow {
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-cat, var(--c-muted));
font-weight: 700;
margin: 0 0 0.4rem;
}
.guz-cs-title {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.04em;
margin: 0;
line-height: 1.5;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--c-border);
}
.guz-cs-intro {
font-size: 0.85rem;
color: var(--c-text-sub);
line-height: 1.75;
margin: 0.6rem 0 0;
}
/* Grid: モバイルは縦並び(横カード)、>=720px で 2列縦カード、>=1024 で人気 3列・最新 3列 */
.guz-cs-grid {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.guz-cs-card {
display: flex;
gap: 0.85rem;
align-items: flex-start;
color: inherit;
text-decoration: none;
min-height: 84px;
padding: 0.3rem 0;
}
.guz-cs-card-thumb {
flex: 0 0 96px;
width: 96px;
aspect-ratio: 1 / 1;
overflow: hidden;
margin: 0;
background: var(--c-bg-alt);
border-radius: 0;
}
.guz-cs-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.guz-cs-card:hover .guz-cs-card-thumb img { transform: scale(1.05); }
.guz-cs-card-thumb-empty {
flex: 0 0 96px; width: 96px; aspect-ratio: 1/1;
display: flex; align-items: center; justify-content: center;
color: var(--c-muted); font-size: 0.6rem; letter-spacing: 0.2em;
text-transform: uppercase; background: var(--c-bg-alt);
}
.guz-cs-card-body { flex: 1; min-width: 0; }
.guz-cs-card-cat {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-cat, var(--c-muted));
font-weight: 700;
margin: 0 0 0.3rem;
}
.guz-cs-card-title {
font-size: 0.86rem;
line-height: 1.5;
font-weight: 700;
margin: 0 0 0.4rem;
letter-spacing: 0.02em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.guz-cs-card-date { font-size: 0.66rem; letter-spacing: 0.15em; color: var(--c-muted); }
/* 人気は 1 列目を Featured 風に少し大きく(モバイルでは平均化) */
.guz-cs-grid-popular .guz-cs-card:first-child .guz-cs-card-thumb {
flex: 0 0 112px; width: 112px;
}
.guz-cs-grid-popular .guz-cs-card:first-child .guz-cs-card-title {
font-size: 0.95rem;
-webkit-line-clamp: 3;
}
/* Tablet 以上: 2列縦カード */
@media (min-width: 720px) {
.guz-cs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem 1.25rem;
}
.guz-cs-card {
flex-direction: column;
gap: 0;
min-height: 0;
}
.guz-cs-card-thumb,
.guz-cs-grid-popular .guz-cs-card:first-child .guz-cs-card-thumb {
flex: none;
width: 100%;
aspect-ratio: 4 / 3;
margin-bottom: 0.85rem;
}
.guz-cs-card-title,
.guz-cs-grid-popular .guz-cs-card:first-child .guz-cs-card-title {
font-size: 0.92rem;
-webkit-line-clamp: unset;
overflow: visible;
}
.guz-cs-card-thumb-empty { width: 100%; aspect-ratio: 4/3; }
}
/* Desktop: 人気 3列・最新 3列 */
@media (min-width: 1024px) {
.guz-cs-grid-popular { grid-template-columns: repeat(3, 1fr); }
.guz-cs-grid-latest { grid-template-columns: repeat(3, 1fr); }
}
/* 収益スロット */
.guz-cs-ad {
margin: 2rem 0;
text-align: center;
}
.guz-cs-compare-slot:empty { display: none; }
/* CTA(全記事へ) */
.guz-cs-cta-wrap {
text-align: center;
margin: 2rem 0 0;
}
.guz-cs-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.95rem 2.5rem;
border: 1px solid var(--c-text);
color: var(--c-text);
font-size: 0.78rem;
letter-spacing: 0.22em;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
transition: all 0.15s ease;
}
.guz-cs-cta:hover {
background: var(--c-text);
color: #fff !important;
opacity: 1;
}
/* ===========================================================================
Editorial image treatment — マガジン写真感(全カード共通)
静的: saturate 0.78 (やや脱色)
hover: saturate 1 + zoom(色付き・前進感)
=========================================================================== */
.guz-featured-pick-thumb img,
.guz-trending-thumb img,
.guz-cs-card-thumb img,
.guz-rec-card-thumb img,
.guz-cat-starter-thumb img {
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
filter 0.5s ease;
filter: saturate(0.78) contrast(1.02);
}
.guz-featured-pick-link:hover .guz-featured-pick-thumb img,
.guz-trending-card:hover .guz-trending-thumb img,
.guz-cs-card:hover .guz-cs-card-thumb img,
.guz-rec-card:hover .guz-rec-card-thumb img,
.guz-cat-starter-link:hover .guz-cat-starter-thumb img {
transform: scale(1.05);
filter: saturate(1.05) contrast(1.02);
}
/* Hero & full-bleed entry thumbnail はそのまま色付きで(主役なので) */
.hero img,
.entry-single .entry-thumbnail img,
.archive-header.has-cat-hero img {
filter: none;
}
/* ===========================================================================
Home — Asymmetric magazine grid (1 大型 + N 小型)
`.post-list--magazine` を付けると最初のカードが 2 列分の featured 表示に
=========================================================================== */
@media (min-width: 720px) {
.post-list--magazine {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5) var(--space-5);
}
.post-list--magazine .post-card:first-child {
grid-column: 1 / -1;
}
.post-list--magazine .post-card:first-child .post-card-link {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-6);
align-items: center;
}
.post-list--magazine .post-card:first-child .post-card-thumb {
width: 100%; aspect-ratio: 16 / 10; margin: 0;
}
.post-list--magazine .post-card:first-child .post-card-title {
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
line-height: 1.25;
-webkit-line-clamp: unset;
}
.post-list--magazine .post-card:first-child .post-card-cat {
font-size: 0.8rem;
letter-spacing: 0.35em;
}
.post-list--magazine .post-card:first-child .post-card-excerpt {
display: -webkit-box;
font-size: 0.95rem;
line-height: 1.85;
-webkit-line-clamp: 4;
}
}
@media (min-width: 1024px) {
.post-list--magazine {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6) var(--space-5);
}
.post-list--magazine .post-card:first-child {
grid-column: 1 / -1;
}
}
/* ===========================================================================
Home — Featured Editor's Pick (大型 magazine-style card)
=========================================================================== */
.guz-featured-pick {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--space-7) var(--gutter) 0;
}
.guz-featured-pick-link {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
color: inherit;
text-decoration: none;
}
.guz-featured-pick-thumb {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--c-bg-alt);
margin: 0;
position: relative;
}
.guz-featured-pick-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.7s ease;
}
.guz-featured-pick-link:hover .guz-featured-pick-thumb img { transform: scale(1.04); }
.guz-featured-pick-body { padding: var(--space-2) 0 var(--space-4); }
.guz-featured-pick-eyebrow {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
margin: 0 0 var(--space-2);
}
.guz-featured-pick-cat {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 var(--space-2);
}
.guz-featured-pick-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 4.5vw, 2.6rem);
letter-spacing: -0.005em;
line-height: 1.25;
margin: 0 0 var(--space-4);
color: var(--c-text);
}
.guz-featured-pick-excerpt {
font-size: 0.95rem;
line-height: 1.95;
color: var(--c-text-sub);
margin: 0 0 var(--space-4);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.guz-featured-pick-cta {
display: inline-block;
font-family: var(--font-tag);
font-size: 0.74rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
border-bottom: 1px solid var(--c-accent);
padding-bottom: 4px;
}
@media (min-width: 720px) {
.guz-featured-pick-link {
grid-template-columns: 1.4fr 1fr;
gap: var(--space-7);
align-items: center;
}
.guz-featured-pick-body { padding: var(--space-4) 0; }
}
/* ===========================================================================
Home — Trending Now (3 horizontal cards w/ large rank number)
=========================================================================== */
.guz-trending-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
.guz-trending-card {
display: grid;
grid-template-columns: auto 96px 1fr;
align-items: center;
gap: var(--space-4);
color: inherit;
text-decoration: none;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--c-border);
}
.guz-trending-rank {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 2.5rem;
line-height: 1;
color: var(--c-accent);
letter-spacing: -0.02em;
min-width: 48px;
}
.guz-trending-thumb {
width: 96px;
height: 96px;
overflow: hidden;
margin: 0;
background: var(--c-bg-alt);
}
.guz-trending-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s ease;
}
.guz-trending-card:hover .guz-trending-thumb img { transform: scale(1.06); }
.guz-trending-body { min-width: 0; }
.guz-trending-cat {
font-family: var(--font-tag);
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
margin: 0 0 var(--space-2);
}
.guz-trending-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1rem;
line-height: 1.45;
margin: 0;
color: var(--c-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 720px) {
.guz-trending-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.guz-trending-card { border-bottom: 0; padding-bottom: 0; }
.guz-trending-card { grid-template-columns: 1fr; gap: var(--space-3); }
.guz-trending-thumb { width: 100%; height: auto; aspect-ratio: 4/3; }
.guz-trending-rank { font-size: 3rem; }
.guz-trending-title { font-size: 1.15rem; -webkit-line-clamp: 3; }
}
/* ===========================================================================
Home — Editor's Note (centered italic quote)
=========================================================================== */
.guz-editors-note {
background: var(--c-bg-alt);
margin: var(--space-8) 0;
padding: var(--space-8) var(--gutter);
}
.guz-editors-note-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.guz-editors-note-eyebrow {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
margin: 0 0 var(--space-5);
}
.guz-editors-note-quote {
border: none;
background: transparent;
padding: 0;
margin: 0 0 var(--space-5);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.4rem, 3.5vw, 2rem);
line-height: 1.55;
font-weight: 400;
color: var(--c-text);
position: relative;
}
.guz-editors-note-quote::before { content: ""; }
.guz-editors-note-quote::after { content: ""; }
.guz-editors-note-quote p { margin: 0; }
.guz-editors-note-signature {
font-family: var(--font-tag);
font-size: 0.68rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
margin: 0;
}
/* ===========================================================================
Home — Categories Grid (visual section navigation with hover overlay)
=========================================================================== */
.guz-cat-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
.guz-cat-grid-card {
position: relative;
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
color: #fff;
text-decoration: none;
}
.guz-cat-grid-bg {
position: absolute; inset: 0;
background-image: linear-gradient(180deg, rgba(10,9,7,0.25) 0%, rgba(10,9,7,0.75) 100%), var(--cat-card-image, none);
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
z-index: 0;
}
.guz-cat-grid-card:hover .guz-cat-grid-bg { transform: scale(1.05); }
.guz-cat-grid-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
padding: var(--space-5);
}
.guz-cat-grid-eyebrow {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-gold);
font-weight: 600;
margin-bottom: var(--space-1);
}
.guz-cat-grid-label {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.5rem;
letter-spacing: 0;
line-height: 1.2;
margin-bottom: var(--space-2);
}
.guz-cat-grid-caption {
font-size: 0.85rem;
line-height: 1.6;
color: rgba(255,255,255,0.85);
margin-bottom: var(--space-3);
}
.guz-cat-grid-count {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-top: auto;
}
@media (min-width: 720px) {
.guz-cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.guz-cat-grid-label { font-size: 1.8rem; }
}
@media (min-width: 1024px) {
.guz-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ===========================================================================
Home — Newsletter signup
=========================================================================== */
.guz-newsletter {
background: var(--c-ink);
color: #fff;
margin: var(--space-8) 0;
padding: var(--space-8) var(--gutter);
position: relative;
overflow: hidden;
}
.guz-newsletter::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 20% 30%, rgba(122,26,26,0.35) 0%, transparent 60%);
z-index: 0;
}
.guz-newsletter-inner {
position: relative;
z-index: 1;
max-width: 620px;
margin: 0 auto;
text-align: center;
}
.guz-newsletter-eyebrow {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--c-gold);
font-weight: 600;
margin: 0 0 var(--space-4);
}
.guz-newsletter-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.8rem, 5vw, 2.6rem);
letter-spacing: 0;
line-height: 1.2;
margin: 0 0 var(--space-3);
color: #fff;
}
.guz-newsletter-subtitle {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(255,255,255,0.78);
margin: 0 0 var(--space-6);
font-weight: 300;
}
.guz-newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.guz-newsletter-input {
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
font-size: 0.95rem;
padding: 0 var(--space-4);
min-height: 52px;
letter-spacing: 0.02em;
font-family: var(--font-sans);
outline: none;
transition: border-color 0.2s ease;
}
.guz-newsletter-input::placeholder { color: rgba(255,255,255,0.4); }
.guz-newsletter-input:focus { border-color: var(--c-gold); }
.guz-newsletter-submit {
background: var(--c-gold);
color: var(--c-ink);
border: 1px solid var(--c-gold);
font-family: var(--font-tag);
font-size: 0.76rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
padding: var(--space-4) var(--space-6);
min-height: 52px;
cursor: pointer;
transition: all 0.25s ease;
}
.guz-newsletter-submit:hover {
background: #fff;
border-color: #fff;
}
.guz-newsletter-note {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.45);
margin: var(--space-5) 0 0;
}
@media (min-width: 720px) {
.guz-newsletter { padding: var(--space-9) var(--gutter); }
.guz-newsletter-form {
flex-direction: row;
max-width: 480px;
margin: 0 auto;
}
.guz-newsletter-input { flex: 1; }
.guz-newsletter-submit { flex: 0 0 auto; }
}
/* ===========================================================================
Category Page Deep — 編集者イントロ / Topics / Starter Pack / FAQ / Cross-links
=========================================================================== */
/* Letter from the Editor (italic quote with monogram) */
.guz-cat-editor-intro {
max-width: var(--max-w);
margin: var(--space-7) auto var(--space-6);
padding: var(--space-7) var(--gutter);
background: var(--c-bg-alt);
border-top: 1px solid var(--c-border-strong);
border-bottom: 1px solid var(--c-border-strong);
}
.guz-cat-editor-intro-inner {
display: flex;
flex-direction: column;
gap: var(--space-5);
align-items: center;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.guz-cat-editor-intro-link { line-height: 0; }
.guz-cat-editor-intro-monogram {
display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 72px; border-radius: 50%;
background: var(--c-ink); color: var(--c-gold);
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 1.85rem; line-height: 1; letter-spacing: 0;
}
.guz-cat-editor-intro-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem; letter-spacing: 0.4em;
text-transform: uppercase; color: var(--c-accent); font-weight: 600;
margin: 0 0 var(--space-4);
}
.guz-cat-editor-intro-quote {
background: transparent; border: 0; padding: 0; margin: 0 0 var(--space-4);
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.65;
color: var(--c-text); position: relative;
}
.guz-cat-editor-intro-quote::before { content: ""; }
.guz-cat-editor-intro-quote::after { content: ""; }
.guz-cat-editor-intro-quote p { margin: 0; }
.guz-cat-editor-intro-sig {
font-family: var(--font-tag); font-size: 0.7rem; letter-spacing: 0.22em;
color: var(--c-muted); text-transform: uppercase; margin: 0;
}
.guz-cat-editor-intro-sig a {
color: var(--c-text); border-bottom: 1px solid var(--c-text); padding-bottom: 1px;
}
.guz-cat-editor-intro-spec {
display: block; margin-top: var(--space-2);
font-size: 0.6rem; color: var(--c-accent); letter-spacing: 0.28em;
}
@media (min-width: 720px) {
.guz-cat-editor-intro-inner { flex-direction: row; text-align: left; gap: var(--space-6); align-items: flex-start; }
.guz-cat-editor-intro-monogram { flex: 0 0 72px; }
}
/* Topics chips */
.guz-cat-topics {
max-width: var(--max-w); margin: var(--space-7) auto;
padding: 0 var(--gutter);
}
.guz-cat-topics-header { margin: 0 0 var(--space-4); }
.guz-cat-topics-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem; letter-spacing: 0.4em;
text-transform: uppercase; color: var(--c-accent); font-weight: 600; margin: 0 0 var(--space-2);
}
.guz-cat-topics-title {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0; color: var(--c-text);
}
.guz-cat-topics-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.guz-cat-topics-chip {
display: inline-flex; align-items: center; min-height: 40px;
padding: 0.6rem 1.1rem;
font-family: var(--font-tag); font-size: 0.72rem; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 600;
background: var(--c-bg-alt); color: var(--c-text);
border: 1px solid var(--c-border-strong);
text-decoration: none; transition: all 0.2s ease;
}
.guz-cat-topics-chip:hover {
background: var(--c-text); color: #fff !important; opacity: 1;
}
/* Starter Pack */
.guz-cat-starter {
max-width: var(--max-w); margin: var(--space-8) auto;
padding: 0 var(--gutter);
}
.guz-cat-starter-header { margin: 0 0 var(--space-5); }
.guz-cat-starter-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem; letter-spacing: 0.4em;
text-transform: uppercase; color: var(--c-gold); font-weight: 600; margin: 0 0 var(--space-2);
}
.guz-cat-starter-title {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0 0 var(--space-3); color: var(--c-text);
}
.guz-cat-starter-sub {
font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.85;
color: var(--c-text-sub); margin: 0; max-width: 540px;
}
.guz-cat-starter-list {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr; gap: var(--space-3);
counter-reset: starter;
}
.guz-cat-starter-link {
display: grid; grid-template-columns: auto 88px 1fr;
gap: var(--space-3); align-items: center;
color: inherit; text-decoration: none;
padding: var(--space-3) 0; border-bottom: 1px solid var(--c-border);
}
.guz-cat-starter-num {
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 2rem; color: var(--c-accent); line-height: 1; min-width: 48px;
}
.guz-cat-starter-thumb {
width: 88px; height: 88px; overflow: hidden; margin: 0;
background: var(--c-bg-alt);
}
.guz-cat-starter-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.guz-cat-starter-link:hover .guz-cat-starter-thumb img { transform: scale(1.05); }
.guz-cat-starter-thumb-empty {
width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;
color: var(--c-muted); font-size: 0.62rem; letter-spacing: 0.2em;
text-transform: uppercase; background: var(--c-bg-alt);
}
.guz-cat-starter-body { min-width: 0; }
.guz-cat-starter-name {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1rem; line-height: 1.45; margin: 0 0 var(--space-2); color: var(--c-text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.guz-cat-starter-date {
font-family: var(--font-tag); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--c-muted);
}
@media (min-width: 720px) {
.guz-cat-starter-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); row-gap: var(--space-4); }
}
/* FAQ */
.guz-cat-faq {
max-width: var(--max-w); margin: var(--space-8) auto;
padding: 0 var(--gutter);
}
.guz-cat-faq-header { margin: 0 0 var(--space-5); }
.guz-cat-faq-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem; letter-spacing: 0.4em;
text-transform: uppercase; color: var(--c-accent); font-weight: 600; margin: 0 0 var(--space-2);
}
.guz-cat-faq-title {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0; color: var(--c-text);
}
.guz-cat-faq-list { margin: 0; padding: 0; }
.guz-cat-faq-item {
border-top: 1px solid var(--c-border-strong);
padding: var(--space-4) 0;
}
.guz-cat-faq-item:last-child { border-bottom: 1px solid var(--c-border-strong); }
.guz-cat-faq-q {
display: grid; grid-template-columns: auto 1fr auto;
gap: var(--space-3); align-items: center;
cursor: pointer; list-style: none;
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.1rem; line-height: 1.5; color: var(--c-text);
}
.guz-cat-faq-q::-webkit-details-marker { display: none; }
.guz-cat-faq-q-mark {
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 1.4rem; color: var(--c-accent); line-height: 1;
}
.guz-cat-faq-q::after {
content: "+"; font-size: 1.6rem; color: var(--c-text-sub); line-height: 1;
transition: transform 0.25s ease;
}
.guz-cat-faq-item[open] .guz-cat-faq-q::after { content: "−"; }
.guz-cat-faq-a {
display: grid; grid-template-columns: auto 1fr;
gap: var(--space-3); align-items: flex-start;
margin: var(--space-3) 0 0;
padding: 0;
font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.95;
color: var(--c-text-sub);
}
.guz-cat-faq-a-mark {
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 1.4rem; color: var(--c-muted); line-height: 1;
}
.guz-cat-faq-a-text { padding-top: 0.1rem; }
/* Cross-links */
.guz-cat-cross {
max-width: var(--max-w); margin: var(--space-8) auto var(--space-7);
padding: 0 var(--gutter);
}
.guz-cat-cross-header { margin: 0 0 var(--space-5); text-align: center; }
.guz-cat-cross-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem; letter-spacing: 0.4em;
text-transform: uppercase; color: var(--c-gold); font-weight: 600; margin: 0 0 var(--space-2);
}
.guz-cat-cross-title {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0; color: var(--c-text);
}
.guz-cat-cross-grid {
display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
.guz-cat-cross-card {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: var(--space-4);
padding: var(--space-5);
color: var(--c-text); text-decoration: none;
background: var(--c-paper);
border: 1px solid var(--c-border-strong);
transition: all 0.25s ease;
min-height: 88px;
}
.guz-cat-cross-card:hover {
background: var(--c-ink); color: #fff !important; opacity: 1;
}
.guz-cat-cross-card:hover .guz-cat-cross-caption { color: rgba(255,255,255,0.7); }
.guz-cat-cross-label {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.35rem; letter-spacing: 0; line-height: 1.2;
grid-column: 1 / 2; grid-row: 1 / 2;
}
.guz-cat-cross-caption {
grid-column: 1 / 2; grid-row: 2 / 3;
font-family: var(--font-tag); font-size: 0.7rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--c-muted); font-weight: 500;
margin-top: var(--space-1);
transition: color 0.25s ease;
}
.guz-cat-cross-arrow {
grid-column: 2 / 3; grid-row: 1 / 3;
font-family: var(--font-display); font-style: italic;
font-size: 1.6rem; color: var(--c-accent);
transition: transform 0.25s ease;
}
.guz-cat-cross-card:hover .guz-cat-cross-arrow { transform: translateX(6px); color: var(--c-gold); }
@media (min-width: 720px) {
.guz-cat-cross-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
.guz-cat-cross-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ===========================================================================
Recommendations (Curated for You) — localStorage 駆動
=========================================================================== */
.guz-rec {
max-width: var(--max-w);
margin: var(--space-7) auto;
padding: 0 var(--gutter);
}
.guz-rec-header { text-align: left; margin-bottom: var(--space-5); }
.guz-rec-eyebrow {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c-accent);
margin: 0 0 var(--space-2);
font-weight: 600;
}
.guz-rec-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 3vw, 1.8rem);
margin: 0 0 var(--space-2);
color: var(--c-text);
}
.guz-rec-sub {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.18em;
color: var(--c-muted);
margin: 0;
}
.guz-rec-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.guz-rec-card {
display: flex;
gap: 0.85rem;
color: inherit;
text-decoration: none;
min-height: 84px;
padding: 0.3rem 0;
border-bottom: 1px solid var(--c-border);
padding-bottom: var(--space-3);
}
.guz-rec-card-thumb {
flex: 0 0 96px;
width: 96px;
aspect-ratio: 1 / 1;
overflow: hidden;
margin: 0;
background: var(--c-bg-alt);
}
.guz-rec-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.guz-rec-card:hover .guz-rec-card-thumb img { transform: scale(1.05); }
.guz-rec-card-thumb-empty {
flex: 0 0 96px; width: 96px; aspect-ratio: 1/1;
display: flex; align-items: center; justify-content: center;
color: var(--c-muted); font-size: 0.6rem; letter-spacing: 0.2em;
text-transform: uppercase;
background: var(--c-bg-alt);
}
.guz-rec-card-body { flex: 1; min-width: 0; }
.guz-rec-card-cat {
font-family: var(--font-tag);
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
margin: 0 0 var(--space-2);
}
.guz-rec-card-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 0.95rem;
line-height: 1.4;
margin: 0 0 var(--space-2);
color: var(--c-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.guz-rec-card-date { font-size: 0.66rem; letter-spacing: 0.15em; color: var(--c-muted); }
@media (min-width: 720px) {
.guz-rec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.guz-rec-card { flex-direction: column; gap: 0; min-height: 0; border: 0; padding: 0; }
.guz-rec-card-thumb,
.guz-rec-card-thumb-empty { flex: none; width: 100%; aspect-ratio: 4/3; margin-bottom: var(--space-3); }
.guz-rec-card-title { font-size: 1rem; -webkit-line-clamp: 3; }
}
@media (min-width: 1024px) {
.guz-rec-grid { grid-template-columns: repeat(4, 1fr); }
}
/* sidebar コンテキストはコンパクト */
.guz-rec-sidebar .guz-rec-grid { grid-template-columns: 1fr; gap: 0.75rem; }
.guz-rec-sidebar .guz-rec-card { flex-direction: row; gap: 0.75rem; }
.guz-rec-sidebar .guz-rec-card-thumb,
.guz-rec-sidebar .guz-rec-card-thumb-empty { width: 72px; flex: 0 0 72px; aspect-ratio: 1/1; margin: 0; }
.guz-rec-sidebar .guz-rec-card-title { font-size: 0.85rem; }
/* ----------- Scroll fade-in animations -----------
* JS が .guz-fade を付与、viewport 進入で .is-visible 追加。
* prefers-reduced-motion なら JS 自体が動かないので未付与。
*/
.guz-fade {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
will-change: opacity, transform;
}
.guz-fade.is-visible {
opacity: 1;
transform: translateY(0);
}
/* グリッド内でカードを少しずつ遅延させる(stagger) */
.post-list .guz-fade:nth-child(2) { transition-delay: 0.06s; }
.post-list .guz-fade:nth-child(3) { transition-delay: 0.12s; }
.post-list .guz-fade:nth-child(4) { transition-delay: 0.18s; }
.post-list .guz-fade:nth-child(5) { transition-delay: 0.24s; }
.post-list .guz-fade:nth-child(6) { transition-delay: 0.3s; }
.guz-cs-grid .guz-fade:nth-child(2) { transition-delay: 0.05s; }
.guz-cs-grid .guz-fade:nth-child(3) { transition-delay: 0.1s; }
.guz-cs-grid .guz-fade:nth-child(4) { transition-delay: 0.15s; }
.guz-cs-grid .guz-fade:nth-child(5) { transition-delay: 0.2s; }
.guz-cs-grid .guz-fade:nth-child(6) { transition-delay: 0.25s; }
/* Hero image の subtle parallax(背景の Y を slow scroll で動かす) */
.hero {
background-attachment: scroll; /* モバイルでは scroll(fixed はパフォーマンス劣) */
}
@media (min-width: 1024px) and (hover: hover) {
.hero { background-attachment: fixed; }
}
/* ===========================================================================
Brand Directory (/brand/ archive + single)
=========================================================================== */
.guz-brand-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
.guz-brand-grid-card {
display: flex;
gap: var(--space-4);
align-items: center;
padding: var(--space-4);
background: var(--c-paper);
border: 1px solid var(--c-border);
color: inherit;
text-decoration: none;
transition: all 0.25s ease;
}
.guz-brand-grid-card:hover {
background: var(--c-bg-alt);
border-color: var(--c-text);
opacity: 1;
}
.guz-brand-grid-thumb,
.guz-brand-grid-monogram {
flex: 0 0 72px;
width: 72px; height: 72px;
overflow: hidden;
margin: 0;
background: var(--c-ink);
}
.guz-brand-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.guz-brand-grid-monogram {
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-gold);
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 1.5rem; letter-spacing: 0;
}
.guz-brand-grid-body { min-width: 0; flex: 1; }
.guz-brand-grid-name {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.1rem; line-height: 1.3;
margin: 0 0 var(--space-2); color: var(--c-text);
}
.guz-brand-grid-meta {
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--c-muted); margin: 0;
display: flex; gap: var(--space-3); flex-wrap: wrap;
}
@media (min-width: 720px) {
.guz-brand-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
.guz-brand-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Single Brand */
.guz-brand-hero {
background: var(--c-ink);
color: #fff;
padding: var(--space-9) var(--gutter);
text-align: center;
margin: 0 0 var(--space-6);
position: relative;
overflow: hidden;
}
.guz-brand-hero::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 20%, rgba(122,26,26,0.4) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(200,160,92,0.2) 0%, transparent 50%);
z-index: 0;
}
.guz-brand-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.guz-brand-hero-logo {
width: 120px; height: 120px; margin: 0 auto var(--space-5);
overflow: hidden; background: var(--c-bg-alt);
}
.guz-brand-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.guz-brand-hero-monogram {
display: inline-flex; align-items: center; justify-content: center;
width: 120px; height: 120px; border-radius: 50%;
background: rgba(255,255,255,0.08); color: var(--c-gold);
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 3rem; line-height: 1;
margin: 0 auto var(--space-5);
}
.guz-brand-hero-eyebrow {
font-family: var(--font-tag); font-size: 0.7rem;
letter-spacing: 0.42em; text-transform: uppercase;
color: var(--c-gold); font-weight: 600;
margin: 0 0 var(--space-3);
}
.guz-brand-hero-name {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.15;
margin: 0 0 var(--space-6); color: #fff;
}
.guz-brand-hero-meta {
display: grid; grid-template-columns: auto 1fr;
gap: var(--space-2) var(--space-4);
max-width: 420px; margin: 0 auto var(--space-6);
font-family: var(--font-tag); font-size: 0.74rem;
letter-spacing: 0.18em;
text-align: left;
}
.guz-brand-hero-meta dt {
color: var(--c-gold);
text-transform: uppercase; font-weight: 600;
letter-spacing: 0.28em;
}
.guz-brand-hero-meta dd {
color: #fff;
margin: 0;
}
.guz-brand-hero-meta dd a { color: var(--c-gold); border-bottom: 1px solid var(--c-gold); }
.guz-brand-hero-cta {
display: inline-flex; align-items: center; justify-content: center;
min-height: 52px; padding: 0.95rem 2.5rem;
background: var(--c-gold) !important; color: var(--c-ink) !important;
border-color: var(--c-gold) !important;
font-family: var(--font-tag); font-size: 0.78rem;
letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
}
.guz-brand-hero-cta:hover { background: #fff !important; color: var(--c-ink) !important; }
.guz-brand-body { max-width: 760px; margin: 0 auto; }
.guz-brand-signature {
margin-top: var(--space-7);
padding: var(--space-5);
background: var(--c-bg-alt);
border-left: 3px solid var(--c-accent);
}
.guz-brand-signature-eyebrow {
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--c-accent); font-weight: 600;
margin: 0 0 var(--space-3);
}
.guz-brand-signature-list {
list-style: none; padding: 0; margin: 0;
font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.85;
}
/* ===========================================================================
Voting [guz_vote]
=========================================================================== */
.guz-vote {
max-width: 720px; margin: var(--space-7) auto;
padding: var(--space-7) var(--gutter);
background: var(--c-bg-alt);
border-top: 1px solid var(--c-border-strong);
border-bottom: 1px solid var(--c-border-strong);
}
.guz-vote-header { text-align: center; margin-bottom: var(--space-6); }
.guz-vote-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--c-accent); font-weight: 600;
margin: 0 0 var(--space-3);
}
.guz-vote-title {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.25;
margin: 0 0 var(--space-3); color: var(--c-text);
}
.guz-vote-sub {
font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.85;
color: var(--c-text-sub); margin: 0 0 var(--space-3);
}
.guz-vote-stat {
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--c-muted); margin: 0;
}
.guz-vote-stat strong {
font-family: var(--font-display); font-style: italic;
color: var(--c-accent); font-size: 1.1rem;
margin: 0 0.3rem;
}
.guz-vote-options { display: flex; flex-direction: column; gap: var(--space-3); }
.guz-vote-btn {
display: block; width: 100%; min-height: 64px;
padding: var(--space-4) var(--space-5);
background: var(--c-paper);
border: 1px solid var(--c-border);
color: var(--c-text);
text-align: left; cursor: pointer;
transition: all 0.2s ease;
}
.guz-vote-btn:hover:not(:disabled) {
border-color: var(--c-text);
background: var(--c-text); color: #fff;
transform: translateX(4px);
}
.guz-vote-btn-label {
display: block;
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.05rem; margin-bottom: var(--space-1);
}
.guz-vote-btn-caption {
display: block;
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--c-muted);
}
.guz-vote-btn:hover .guz-vote-btn-caption { color: rgba(255,255,255,0.65); }
.guz-vote-result {
padding: var(--space-4) var(--space-5);
background: var(--c-paper);
border: 1px solid var(--c-border);
}
.guz-vote-option.is-voted .guz-vote-result {
border-color: var(--c-accent);
background: linear-gradient(180deg, var(--c-paper) 0%, rgba(122,26,26,0.04) 100%);
}
.guz-vote-bar {
height: 8px; background: var(--c-border);
margin: 0 0 var(--space-2); position: relative; overflow: hidden;
}
.guz-vote-bar-fill {
display: block; height: 100%; width: 0;
background: var(--c-text);
transition: width 0.9s cubic-bezier(0.2,0.7,0.2,1);
}
.guz-vote-option.is-voted .guz-vote-bar-fill { background: var(--c-accent); }
.guz-vote-result-meta {
display: flex; gap: var(--space-3); align-items: baseline;
font-family: var(--font-tag); font-size: 0.7rem;
letter-spacing: 0.18em; color: var(--c-muted);
margin: 0 0 var(--space-3);
}
.guz-vote-result-pct {
font-family: var(--font-display); font-style: italic; font-weight: 700;
font-size: 1.2rem; color: var(--c-text); letter-spacing: -0.01em;
}
.guz-vote-option.is-voted .guz-vote-result-pct { color: var(--c-accent); }
.guz-vote-result-cta {
display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}
.guz-vote-link-read {
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--c-text); border-bottom: 1px solid var(--c-text);
padding-bottom: 2px; font-weight: 600;
}
.guz-vote-note {
margin: var(--space-5) 0 0;
text-align: center;
font-family: var(--font-tag); font-size: 0.72rem;
letter-spacing: 0.22em; color: var(--c-accent);
font-weight: 600; text-transform: uppercase;
}
/* ===========================================================================
Price comparison [guz_price_compare]
=========================================================================== */
.guz-pcmp {
max-width: 760px; margin: var(--space-6) auto;
padding: var(--space-5);
background: var(--c-paper);
border: 1px solid var(--c-border);
}
.guz-pcmp-header {
display: flex; flex-direction: column; gap: var(--space-3);
margin-bottom: var(--space-5);
align-items: center; text-align: center;
}
.guz-pcmp-image {
width: 120px; aspect-ratio: 1; margin: 0;
overflow: hidden; background: var(--c-bg-alt);
}
.guz-pcmp-image img { width: 100%; height: 100%; object-fit: cover; }
.guz-pcmp-eyebrow {
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--c-accent); font-weight: 600;
margin: 0 0 var(--space-2);
}
.guz-pcmp-name {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.15rem, 3vw, 1.4rem); line-height: 1.35;
margin: 0 0 var(--space-2); color: var(--c-text);
}
.guz-pcmp-reviews {
display: inline-flex; align-items: center; gap: var(--space-2);
margin: 0 0 var(--space-2); flex-wrap: wrap; justify-content: center;
}
.guz-pcmp-stars {
display: inline-flex; gap: 1px; line-height: 1;
font-size: 0.95rem; letter-spacing: 0.04em;
}
.guz-pcmp-star { color: #d8d2c4; }
.guz-pcmp-star.is-full { color: #c89a3a; }
.guz-pcmp-star.is-half {
background: linear-gradient(90deg, #c89a3a 50%, #d8d2c4 50%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.guz-pcmp-review-text {
font-family: var(--font-tag); font-size: 0.7rem;
letter-spacing: 0.1em; color: var(--c-text-sub); font-weight: 500;
}
.guz-pcmp-note {
font-family: var(--font-serif); font-size: 0.85rem; color: var(--c-text-sub);
margin: 0;
}
.guz-pcmp-table {
width: 100%; border-collapse: collapse;
font-family: var(--font-sans); font-size: 0.9rem;
}
.guz-pcmp-table thead th {
font-family: var(--font-tag); font-size: 0.65rem;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--c-muted); font-weight: 600;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--c-border-strong);
text-align: left;
}
.guz-pcmp-table td {
padding: var(--space-3); vertical-align: middle;
border-bottom: 1px solid var(--c-border);
}
.guz-pcmp-ec {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.05rem; color: var(--c-text);
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.guz-pcmp-row--rakuten.has-best { background: rgba(200, 154, 58, 0.05); }
.guz-pcmp-badge {
display: inline-block;
font-family: var(--font-tag); font-size: 0.58rem;
letter-spacing: 0.18em; text-transform: uppercase;
padding: 3px 6px; font-weight: 700; line-height: 1;
border-radius: 2px;
}
.guz-pcmp-badge-best {
background: #1a1a1a; color: #f5d97a;
border: 1px solid #1a1a1a;
}
.guz-pcmp-price {
font-family: var(--font-sans); font-weight: 700;
font-size: 1rem; color: var(--c-accent);
}
.guz-pcmp-price-val { display: block; font-size: 1.1rem; line-height: 1.2; }
.guz-pcmp-status {
display: flex; flex-direction: column; gap: 4px;
align-items: flex-start;
}
.guz-pcmp-flag {
display: inline-block;
font-family: var(--font-tag); font-size: 0.58rem;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 3px 7px; font-weight: 600; line-height: 1.3;
border: 1px solid var(--c-border-strong);
color: var(--c-text-sub); background: transparent;
white-space: nowrap;
}
.guz-pcmp-flag-stock { color: #2a6a3e; border-color: #2a6a3e; background: rgba(42, 106, 62, 0.06); }
.guz-pcmp-flag-out { color: #a83333; border-color: #a83333; background: rgba(168, 51, 51, 0.06); }
.guz-pcmp-flag-free { color: #1a1a1a; border-color: #1a1a1a; background: #f5d97a; }
.guz-pcmp-flag-fee { color: var(--c-muted); border-color: var(--c-border-strong); }
.guz-pcmp-flag-info { color: var(--c-text-sub); border-color: var(--c-border); }
.guz-pcmp-shop {
display: block;
font-family: var(--font-tag); font-size: 0.6rem;
letter-spacing: 0.15em; color: var(--c-muted);
font-weight: 500; margin-top: 2px;
}
.guz-pcmp-na {
font-family: var(--font-tag); font-size: 0.7rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--c-muted); font-weight: 500;
}
.guz-pcmp-cta { text-align: right; }
.guz-pcmp-cta .guz-affi-btn {
min-height: 40px; padding: 0.55rem 1rem;
font-size: 0.68rem; letter-spacing: 0.18em;
margin: 0;
}
.guz-pcmp-summary {
margin: var(--space-5) 0 0;
padding: var(--space-4) var(--space-5);
background: var(--c-bg-alt);
border-left: 3px solid var(--c-accent);
}
.guz-pcmp-summary-eyebrow {
font-family: var(--font-tag); font-size: 0.62rem;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--c-accent); font-weight: 600;
margin: 0 0 var(--space-2);
}
.guz-pcmp-summary-text {
font-family: var(--font-serif); font-size: 0.92rem;
line-height: 1.7; color: var(--c-text); margin: 0;
}
.guz-pcmp-summary-text strong {
font-family: var(--font-sans); font-weight: 700;
color: var(--c-accent);
}
.guz-pcmp-footnote {
margin: var(--space-4) 0 0;
font-family: var(--font-tag); font-size: 0.6rem;
letter-spacing: 0.1em; color: var(--c-muted);
text-align: center;
}
@media (max-width: 560px) {
.guz-pcmp-table thead { display: none; }
.guz-pcmp-table tr {
display: grid; grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
gap: var(--space-1) var(--space-2);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--c-border);
}
.guz-pcmp-table td { padding: 0; border: 0; }
.guz-pcmp-ec { grid-column: 1; grid-row: 1; }
.guz-pcmp-price { grid-column: 1; grid-row: 2; }
.guz-pcmp-status { grid-column: 1; grid-row: 3; flex-direction: row; flex-wrap: wrap; margin-top: 4px; }
.guz-pcmp-cta { grid-column: 2; grid-row: 1 / 4; align-self: center; }
}
/* ===========================================================================
Fragrance Quiz [guz_fragrance_quiz]
=========================================================================== */
.guz-quiz {
max-width: 720px;
margin: var(--space-7) auto;
padding: var(--space-7) var(--gutter);
background: var(--c-bg-alt);
border-top: 1px solid var(--c-border-strong);
border-bottom: 1px solid var(--c-border-strong);
}
.guz-quiz-header { text-align: center; margin-bottom: var(--space-6); }
.guz-quiz-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--c-accent); font-weight: 600;
margin: 0 0 var(--space-3);
}
.guz-quiz-title {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.6rem, 4.5vw, 2.4rem);
line-height: 1.25; margin: 0 0 var(--space-4); color: var(--c-text);
}
.guz-quiz-lead {
font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.85;
color: var(--c-text-sub); margin: 0;
}
.guz-quiz-screen { animation: guzQuizFade 0.4s ease-out; }
@keyframes guzQuizFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .guz-quiz-screen { animation: none; } }
/* Start screen */
.guz-quiz-start { text-align: center; padding: var(--space-5) 0; }
.guz-quiz-start-note {
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.22em; color: var(--c-muted);
margin: 0 0 var(--space-5); text-transform: uppercase;
}
.guz-quiz-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 56px; padding: 0.95rem 2.5rem;
font-family: var(--font-tag); font-size: 0.78rem;
letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
border: 1px solid var(--c-text); color: var(--c-text);
background: transparent; cursor: pointer;
transition: all 0.25s ease;
}
.guz-quiz-btn--primary { background: var(--c-text); color: #fff !important; }
.guz-quiz-btn:hover {
background: var(--c-gold); color: var(--c-ink) !important;
border-color: var(--c-gold); opacity: 1;
}
/* Questions */
.guz-quiz-progress {
width: 100%; height: 3px; background: var(--c-border);
margin-bottom: var(--space-5); position: relative; overflow: hidden;
}
.guz-quiz-progress-bar {
display: block; height: 100%; width: 0;
background: var(--c-accent);
transition: width 0.4s ease;
}
.guz-quiz-step {
font-family: var(--font-tag); font-size: 0.7rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--c-muted); margin: 0 0 var(--space-4);
text-align: center; font-weight: 500;
}
.guz-quiz-q {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.2rem, 3.5vw, 1.7rem); line-height: 1.45;
text-align: center; margin: 0 0 var(--space-6);
color: var(--c-text);
}
.guz-quiz-choices {
display: flex; flex-direction: column; gap: var(--space-3);
margin-bottom: var(--space-5);
}
.guz-quiz-choice {
display: block; width: 100%; min-height: 56px;
padding: var(--space-4) var(--space-5);
background: var(--c-paper);
border: 1px solid var(--c-border);
color: var(--c-text);
font-family: var(--font-sans); font-size: 0.95rem;
text-align: left; cursor: pointer;
transition: all 0.2s ease;
}
.guz-quiz-choice:hover {
border-color: var(--c-text);
background: var(--c-text); color: #fff;
}
.guz-quiz-choice.is-selected {
border-color: var(--c-accent);
background: var(--c-accent); color: #fff;
}
.guz-quiz-nav { text-align: center; }
.guz-quiz-btn-link {
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-tag); font-size: 0.72rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--c-muted); font-weight: 500;
transition: color 0.2s ease;
padding: var(--space-2);
}
.guz-quiz-btn-link:hover { color: var(--c-text); }
/* Result */
.guz-quiz-result-eyebrow {
font-family: var(--font-tag); font-size: 0.68rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--c-gold); font-weight: 600;
margin: 0 0 var(--space-3); text-align: center;
}
.guz-quiz-result-title {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.35;
text-align: center; margin: 0 0 var(--space-4); color: var(--c-text);
}
.guz-quiz-result-title em {
color: var(--c-accent); font-style: italic;
border-bottom: 2px solid var(--c-accent); padding-bottom: 2px;
}
.guz-quiz-result-desc {
font-family: var(--font-serif); font-size: 1rem; line-height: 1.95;
color: var(--c-text-sub); margin: 0 auto var(--space-6);
max-width: 540px;
}
.guz-quiz-picks {
display: flex; flex-direction: column; gap: var(--space-4);
margin-bottom: var(--space-6);
}
.guz-quiz-pick {
padding: var(--space-5);
background: var(--c-paper);
border: 1px solid var(--c-border);
}
.guz-quiz-pick-name {
font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.15rem; margin: 0 0 var(--space-2); color: var(--c-text);
}
.guz-quiz-pick-desc {
font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.75;
color: var(--c-text-sub); margin: 0 0 var(--space-4);
}
.guz-quiz-pick-cta {
display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
.guz-quiz-pick-read {
font-family: var(--font-tag); font-size: 0.7rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--c-text); border-bottom: 1px solid var(--c-text);
padding-bottom: 2px; font-weight: 600;
}
.guz-quiz-result-actions { text-align: center; margin-bottom: var(--space-6); }
.guz-quiz-share {
text-align: center; padding-top: var(--space-5);
border-top: 1px solid var(--c-border);
}
.guz-quiz-share-label {
font-family: var(--font-tag); font-size: 0.66rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--c-muted); margin: 0 0 var(--space-4);
}
.guz-quiz-share-buttons {
display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
}
.guz-quiz-share-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0.7rem 1.3rem;
font-family: var(--font-tag); font-size: 0.7rem;
letter-spacing: 0.18em; font-weight: 600;
background: var(--c-paper); border: 1px solid var(--c-border);
color: var(--c-text); text-decoration: none; cursor: pointer;
transition: all 0.2s ease;
}
.guz-quiz-share-btn:hover { background: var(--c-text); color: #fff !important; opacity: 1; }
@media (min-width: 720px) {
.guz-quiz { padding: var(--space-8) var(--space-7); }
.guz-quiz-picks {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
}
}
/* ===========================================================================
Custom Editorial Cursor (dot + ring)
- hover: ring が拡大 + 内側 dot を吸収する mix-blend-mode で色反転
- touch 端末は表示しない(JS が hover: none で除外)
=========================================================================== */
.guz-has-cursor,
.guz-has-cursor a,
.guz-has-cursor button,
.guz-has-cursor [role="button"],
.guz-has-cursor .post-card-link,
.guz-has-cursor summary {
cursor: none;
}
.guz-cursor-dot,
.guz-cursor-ring {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
opacity: 0;
transition: opacity 0.25s ease,
width 0.25s cubic-bezier(0.2,0.7,0.2,1),
height 0.25s cubic-bezier(0.2,0.7,0.2,1),
background-color 0.25s ease,
border-color 0.25s ease;
mix-blend-mode: difference;
}
.guz-cursor-dot {
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
}
.guz-cursor-ring {
width: 36px;
height: 36px;
border: 1px solid #fff;
border-radius: 50%;
}
.guz-cursor-dot.is-visible,
.guz-cursor-ring.is-visible {
opacity: 1;
}
.guz-cursor-ring.is-hover {
width: 56px;
height: 56px;
border-color: var(--c-gold);
background: rgba(200, 160, 92, 0.08);
}
/* テキスト入力中は dot を消す */
.guz-has-cursor input:focus ~ .guz-cursor-dot,
.guz-has-cursor textarea:focus ~ .guz-cursor-dot { opacity: 0; }
/* タッチデバイスは custom cursor を表示しない */
@media (hover: none), (pointer: coarse) {
.guz-cursor-dot, .guz-cursor-ring { display: none !important; }
.guz-has-cursor, .guz-has-cursor * { cursor: auto !important; }
}
/* ===========================================================================
Word reveal animation
=========================================================================== */
.guz-word-reveal .guz-w {
display: inline-block;
opacity: 0;
transform: translateY(0.45em) rotate(0.5deg);
transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1),
transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
transition-delay: calc(var(--guz-w-i, 0) * 30ms);
will-change: opacity, transform;
}
.guz-word-reveal.is-visible .guz-w {
opacity: 1;
transform: translateY(0) rotate(0);
}
/* ===========================================================================
Magazine-style gallery (wp-block-gallery 装飾)
- 各画像に番号(01 / 04 形式)
- キャプションは serif italic、左に accent ライン
- 通常レイアウト + 2/3 ボリュームの強調パターン
=========================================================================== */
.entry-content .wp-block-gallery {
margin: var(--space-7) 0;
counter-reset: guz-gallery;
}
.entry-content .wp-block-gallery .wp-block-image,
.entry-content .wp-block-gallery figure.wp-block-image {
counter-increment: guz-gallery;
position: relative;
overflow: visible;
}
.entry-content .wp-block-gallery img {
transition: transform 0.6s ease, filter 0.5s ease;
filter: saturate(0.85) contrast(1.02);
}
.entry-content .wp-block-gallery .wp-block-image:hover img {
transform: scale(1.02);
filter: saturate(1) contrast(1);
}
.entry-content .wp-block-gallery figcaption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.82rem;
line-height: 1.6;
color: var(--c-text-sub);
text-align: left;
margin: var(--space-3) 0 0;
padding-left: var(--space-3);
border-left: 2px solid var(--c-accent);
letter-spacing: 0.01em;
background: transparent;
}
.entry-content .wp-block-gallery figcaption::before {
content: counter(guz-gallery, decimal-leading-zero) " · ";
font-family: var(--font-tag);
font-style: normal;
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 600;
margin-right: 0.35rem;
}
/* 単独 figure(gallery 外の wp-block-image)も caption 装飾 */
.entry-content > figure.wp-block-image figcaption,
.entry-content figure.wp-block-image:not(.wp-block-gallery figure) figcaption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.85rem;
color: var(--c-text-sub);
text-align: center;
margin: var(--space-3) auto 0;
max-width: 540px;
letter-spacing: 0.02em;
}
/* ===========================================================================
404 page editorial
=========================================================================== */
.guz-404 {
max-width: 720px;
margin: 0 auto;
padding: var(--space-9) var(--gutter) var(--space-8);
text-align: center;
}
.guz-404-number {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: clamp(7rem, 22vw, 14rem);
color: var(--c-accent);
line-height: 0.9;
letter-spacing: -0.04em;
margin: 0 0 var(--space-3);
}
.guz-404-eyebrow {
font-family: var(--font-tag);
font-size: 0.72rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 600;
margin: 0 0 var(--space-4);
}
.guz-404-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 4vw, 2.3rem);
line-height: 1.3;
margin: 0 0 var(--space-5);
color: var(--c-text);
}
.guz-404-lead {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 2;
color: var(--c-text-sub);
margin: 0 auto var(--space-7);
max-width: 480px;
}
.guz-404-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-7);
}
.guz-404-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.95rem 2.5rem;
font-family: var(--font-tag);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
border: 1px solid var(--c-text);
color: var(--c-text);
transition: all 0.25s ease;
}
.guz-404-btn--primary { background: var(--c-text); color: #fff !important; }
.guz-404-btn:hover {
background: var(--c-gold);
color: var(--c-ink) !important;
border-color: var(--c-gold);
opacity: 1;
}
.guz-404-btn--primary:hover { background: var(--c-gold); border-color: var(--c-gold); }
/* ===========================================================================
Search results page editorial
=========================================================================== */
.guz-search-hero {
background: var(--c-ink);
color: #fff;
padding: var(--space-8) var(--gutter) var(--space-7);
text-align: center;
margin: 0 0 var(--space-6);
}
.guz-search-hero-inner { max-width: 720px; margin: 0 auto; }
.guz-search-eyebrow {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--c-gold);
font-weight: 600;
margin: 0 0 var(--space-4);
}
.guz-search-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.8rem, 5vw, 2.6rem);
margin: 0 0 var(--space-5);
line-height: 1.2;
color: #fff;
}
.guz-search-title em {
color: var(--c-gold);
font-style: italic;
border-bottom: 1px solid var(--c-gold);
padding-bottom: 4px;
}
.guz-search-meta {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.28em;
color: rgba(255,255,255,0.6);
margin: 0 0 var(--space-5);
}
.guz-search-form-inline {
display: flex;
max-width: 480px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.3);
background: transparent;
}
.guz-search-form-inline input[type="search"] {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: #fff;
padding: 0 var(--space-4);
min-height: 52px;
font-size: 0.95rem;
}
.guz-search-form-inline input::placeholder { color: rgba(255,255,255,0.4); }
.guz-search-form-inline button {
background: var(--c-gold);
color: var(--c-ink);
border: 0;
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
padding: 0 var(--space-5);
cursor: pointer;
min-height: 52px;
min-width: 80px;
}
.guz-search-form-inline button:hover { background: #fff; }
.guz-search-empty {
max-width: 540px;
margin: var(--space-9) auto;
padding: 0 var(--gutter);
text-align: center;
}
.guz-search-empty-eyebrow {
font-family: var(--font-tag);
font-size: 0.68rem;
letter-spacing: 0.4em;
color: var(--c-muted);
margin: 0 0 var(--space-4);
}
.guz-search-empty-title {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.4rem, 3.5vw, 2rem);
margin: 0 0 var(--space-4);
color: var(--c-text);
}
.guz-search-empty-lead {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.9;
color: var(--c-text-sub);
margin: 0 0 var(--space-6);
}
/* ----------- Utilities ----------- */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
word-wrap: normal !important;
}
/* ===========================================================================
MUSIC ページ (page-testa.php / /testa/)
=========================================================================== */
.entry-page-music {
max-width: 100%;
padding: 0;
margin: 0;
}
.entry-page-music .entry-page-header,
.entry-page-music > .entry-header { display: none; }
/* --- Hero --- */
.music-hero {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #fff;
padding: var(--space-7) var(--gutter);
margin: 0 calc(var(--gutter) * -1) var(--space-7);
}
.music-hero-bg {
position: absolute; inset: 0;
background-image: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=1800&q=80');
background-size: cover;
background-position: center;
filter: saturate(0.7) contrast(1.05);
}
.music-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,12,10,0.78) 0%, rgba(20,16,13,0.72) 50%, rgba(15,12,10,0.85) 100%);
}
.music-hero-content {
position: relative; z-index: 1;
text-align: center;
max-width: 760px;
}
.music-hero-eyebrow {
font-family: var(--font-tag);
font-size: 0.72rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--c-gold, #c8a05c);
margin: 0 0 var(--space-4);
font-weight: 600;
}
.music-hero-name {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(3.5rem, 14vw, 7rem);
line-height: 0.95;
margin: 0 0 var(--space-4);
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.music-hero-tagline {
font-family: var(--font-serif);
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-style: italic;
margin: 0 auto var(--space-6);
max-width: 540px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.92);
}
.music-hero-cta {
margin-top: var(--space-5);
}
.music-cta-primary {
display: inline-flex;
align-items: center;
gap: 0.8em;
padding: 1rem 2.2rem;
font-family: var(--font-tag);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #1a1817;
background: #fff;
border: 2px solid #fff;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.music-cta-primary:hover,
.music-cta-primary:focus-visible {
background: var(--c-gold, #c8a05c);
color: #1a1817;
border-color: var(--c-gold, #c8a05c);
transform: translateY(-2px);
}
/* --- Sections --- */
.music-about,
.music-featured,
.music-latest,
.music-platforms,
.music-footer-cta {
max-width: 920px;
margin: 0 auto var(--space-7);
padding: 0 var(--gutter);
}
.music-section-head { text-align: center; margin-bottom: var(--space-6); }
.music-section-eyebrow {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c-accent, #c8a05c);
margin: 0 0 var(--space-3);
font-weight: 600;
}
.music-section-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.6rem, 4vw, 2.4rem);
line-height: 1.2;
margin: 0;
color: var(--c-text);
}
.music-section-title em {
font-style: italic;
color: var(--c-accent, #c8a05c);
}
.music-section-subtitle {
font-family: var(--font-serif);
font-style: italic;
color: var(--c-text-sub);
margin: var(--space-3) 0 0;
}
/* --- About --- */
.music-about-body {
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.95;
color: var(--c-text);
max-width: 640px;
margin: 0 auto;
}
.music-about-body p {
margin: 0 0 var(--space-4);
text-indent: 1em;
}
.music-about-body p:first-child::first-letter {
font-family: var(--font-display);
font-style: italic;
font-size: 3.6rem;
line-height: 0.9;
float: left;
margin: 0.1em 0.15em 0 0;
color: var(--c-accent, #c8a05c);
}
.music-divider {
text-align: center;
font-size: 1.4rem;
color: var(--c-accent, #c8a05c);
margin: var(--space-7) 0;
letter-spacing: 0.5em;
}
/* --- Featured cards --- */
.music-featured-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 720px) {
.music-featured-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.music-featured-card {
position: relative;
display: block;
min-height: 360px;
overflow: hidden;
color: #fff;
text-decoration: none;
background-color: #1a1817;
background-image: var(--card-img);
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.music-featured-card:hover,
.music-featured-card:focus-visible {
transform: translateY(-4px);
}
.music-featured-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,12,10,0.15) 0%, rgba(15,12,10,0.85) 80%);
transition: opacity 0.3s ease;
}
.music-featured-card:hover .music-featured-card-overlay {
background: linear-gradient(180deg, rgba(15,12,10,0.3) 0%, rgba(15,12,10,0.92) 80%);
}
.music-featured-card-body {
position: absolute;
inset: auto var(--space-5) var(--space-5);
color: #fff;
}
.music-featured-card-eyebrow {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-gold, #c8a05c);
margin: 0 0 var(--space-2);
font-weight: 600;
}
.music-featured-card-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1;
margin: 0 0 var(--space-3);
color: #fff;
}
.music-featured-card-desc {
font-family: var(--font-serif);
font-size: 0.92rem;
line-height: 1.6;
margin: 0 0 var(--space-4);
color: rgba(255,255,255,0.88);
}
.music-featured-card-cta {
display: inline-block;
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.25em;
font-weight: 700;
text-transform: uppercase;
color: var(--c-gold, #c8a05c);
padding-bottom: 4px;
border-bottom: 1px solid var(--c-gold, #c8a05c);
}
/* --- Videos carousel --- */
.music-videos {
max-width: 100%;
padding: 0;
margin: 0 auto var(--space-7);
}
.music-videos .music-section-head { padding: 0 var(--gutter); }
.music-videos-carousel {
position: relative;
padding: 0 var(--gutter);
}
.music-videos-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 75%);
gap: var(--space-4);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--c-border-strong, #999) transparent;
padding-bottom: var(--space-3);
-webkit-overflow-scrolling: touch;
}
.music-videos-track::-webkit-scrollbar { height: 6px; }
.music-videos-track::-webkit-scrollbar-track { background: transparent; }
.music-videos-track::-webkit-scrollbar-thumb { background: var(--c-border-strong, #999); border-radius: 3px; }
@media (min-width: 720px) {
.music-videos-track { grid-auto-columns: minmax(280px, calc(33% - var(--space-4))); }
}
@media (min-width: 1024px) {
.music-videos-track { grid-auto-columns: minmax(280px, calc(25% - var(--space-4))); }
}
.music-video-card {
scroll-snap-align: start;
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--c-text);
transition: transform 0.25s ease;
}
.music-video-card:hover:not(.music-video-card--embed),
.music-video-card:focus-visible:not(.music-video-card--embed) {
transform: translateY(-3px);
}
.music-video-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #000;
}
.music-video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* 埋め込みモードは1画面ほぼ1枚表示で大きく見せる */
@media (min-width: 720px) {
.music-videos-carousel--embed .music-videos-track {
grid-auto-columns: minmax(420px, 70%);
}
}
@media (min-width: 1024px) {
.music-videos-carousel--embed .music-videos-track {
grid-auto-columns: minmax(520px, 60%);
}
}
.music-video-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #1a1817;
}
.music-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.music-video-card:hover .music-video-thumb img {
transform: scale(1.05);
}
.music-video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.85;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.music-video-card:hover .music-video-play {
opacity: 1;
transform: scale(1.08);
}
.music-video-title {
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 600;
line-height: 1.45;
margin: var(--space-3) 0 0;
color: var(--c-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.music-videos-arrow {
position: absolute;
top: calc(50% - var(--space-3));
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.94);
border: 1px solid var(--c-border, #ddd);
color: var(--c-text);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transform: translateY(-50%);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.music-videos-arrow:hover {
background: #fff;
transform: translateY(-50%) scale(1.08);
}
.music-videos-arrow:disabled {
opacity: 0.35;
cursor: default;
transform: translateY(-50%);
}
.music-videos-arrow-prev { left: 4px; }
.music-videos-arrow-next { right: 4px; }
@media (min-width: 720px) {
.music-videos-arrow { display: inline-flex; }
}
/* --- YouTube card (再利用) --- */
.music-yt-card {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5);
background: #1a1817;
color: #fff;
flex-wrap: wrap;
}
.music-yt-card-icon { flex-shrink: 0; }
.music-yt-card-body { flex: 1; min-width: 200px; }
.music-yt-card-eyebrow {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin: 0 0 var(--space-2);
font-weight: 600;
}
.music-yt-card-name {
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
margin: 0 0 var(--space-1);
color: #fff;
}
.music-yt-card-desc {
font-family: var(--font-sans);
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
margin: 0;
}
.music-yt-card-cta {
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 0.8rem 1.6rem;
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.25em;
font-weight: 700;
text-transform: uppercase;
color: #1a1817;
background: var(--c-gold, #c8a05c);
text-decoration: none;
transition: background 0.2s ease;
flex-shrink: 0;
}
.music-yt-card-cta:hover { background: #fff; }
/* --- Platforms --- */
.music-platform-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.music-platform-btn {
display: inline-block;
padding: 0.9rem 1.8rem;
font-family: var(--font-tag);
font-size: 0.72rem;
letter-spacing: 0.25em;
font-weight: 700;
text-transform: uppercase;
color: var(--c-text);
background: transparent;
border: 1.5px solid var(--c-border-strong, #1a1817);
text-decoration: none;
transition: all 0.2s ease;
}
.music-platform-btn:hover {
background: var(--c-text);
color: #fff;
}
.music-platform-youtube:hover { background: #FF0000; border-color: #FF0000; }
.music-platform-spotify:hover { background: #1DB954; border-color: #1DB954; }
.music-platform-apple:hover { background: #FA243C; border-color: #FA243C; }
.music-platform-soundcloud:hover { background: #FF5500; border-color: #FF5500; }
.music-platforms-note {
text-align: center;
font-family: var(--font-tag);
font-size: 0.65rem;
letter-spacing: 0.18em;
color: var(--c-muted);
margin: var(--space-4) 0 0;
}
/* --- Footer CTA --- */
.music-footer-cta {
text-align: center;
padding: var(--space-7) var(--gutter);
background: var(--c-bg-alt);
max-width: 100%;
margin: var(--space-7) 0 0;
}
.music-footer-cta-eyebrow {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c-accent, #c8a05c);
margin: 0 0 var(--space-3);
font-weight: 600;
}
.music-footer-cta-text {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.1rem;
margin: 0 auto var(--space-5);
max-width: 480px;
color: var(--c-text);
}
.music-footer-cta .music-cta-primary {
color: #fff;
background: var(--c-text);
border-color: var(--c-text);
}
.music-footer-cta .music-cta-primary:hover {
color: #1a1817;
background: var(--c-gold, #c8a05c);
border-color: var(--c-gold, #c8a05c);
}
/* ===========================================================================
Category Filter (2026-05-13)
カテゴリページ上部の検索 + 人気タグチップ
=========================================================================== */
.guz-cat-filter {
background: rgba(250, 248, 244, 0.7);
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
margin: 0 0 var(--space-5);
}
.guz-cat-filter-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 1.25rem var(--gutter);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.guz-cat-filter-title {
font-family: var(--font-tag);
font-size: 0.72rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-text-muted, #6b7280);
margin: 0;
font-weight: 600;
}
/* 2026-05-13 refined: 検索フィールド + アイコンを統合したカード型 */
.guz-cat-filter-search {
display: flex;
align-items: stretch;
gap: 0;
position: relative;
background: #fff;
border: 1px solid var(--c-border);
border-radius: 999px;
padding: 0.15rem 0.15rem 0.15rem 1rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guz-cat-filter-search:focus-within {
border-color: var(--c-text);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.guz-cat-filter-search input[type="search"] {
flex: 1;
min-width: 0;
padding: 0.55rem 0.4rem;
font-size: 0.92rem;
border: 0;
background: transparent;
outline: none;
color: var(--c-text);
-webkit-appearance: none;
appearance: none;
}
.guz-cat-filter-search input[type="search"]::placeholder {
color: var(--c-text-muted, #9ca3af);
}
.guz-cat-filter-search input[type="search"]::-webkit-search-decoration,
.guz-cat-filter-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.guz-cat-filter-search button {
flex: 0 0 auto;
min-width: 44px;
height: auto;
border: 0;
background: var(--c-text);
color: #fff;
border-radius: 999px;
cursor: pointer;
font-size: 1.05rem;
line-height: 1;
padding: 0 0.95rem;
transition: background 0.15s ease, transform 0.1s ease;
}
.guz-cat-filter-search button:hover { background: #000; }
.guz-cat-filter-search button:active { transform: scale(0.97); }
.guz-cat-filter-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
/* 2026-05-13: white-space:nowrap で語中改行を防止、ピル形態を明示 */
.guz-cat-filter .guz-cat-filter-chip,
.guz-cat-filter-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.85rem;
font-size: 0.78rem;
letter-spacing: 0.04em;
border: 1px solid var(--c-border);
border-radius: 999px;
color: var(--c-text);
text-decoration: none;
background: #fff;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.3;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.guz-cat-filter-chip:hover {
background: rgba(0, 0, 0, 0.04);
border-color: var(--c-text-muted, #9ca3af);
}
.guz-cat-filter-chip:active { transform: scale(0.98); }
.guz-cat-filter-chip.is-active {
background: var(--c-text) !important;
color: #fff !important;
border-color: var(--c-text) !important;
}
.guz-cat-filter-chip.is-active .guz-cat-filter-chip-count {
color: rgba(255, 255, 255, 0.7);
}
.guz-cat-filter-chip.is-reset {
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.66rem;
padding: 0.4rem 0.95rem;
}
.guz-cat-filter-chip-count {
font-size: 0.65rem;
font-family: var(--font-tag);
letter-spacing: 0.05em;
color: var(--c-text-muted, #9ca3af);
font-weight: 500;
}
.guz-cat-filter-status {
font-size: 0.78rem;
color: var(--c-text-muted, #6b7280);
margin: 0.3rem 0 0;
font-family: var(--font-serif);
font-style: italic;
}
.guz-cat-filter-clear {
margin-left: 0.5rem;
color: var(--c-accent, #c8a05c);
text-decoration: underline;
font-style: normal;
font-family: var(--font-tag);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* タグ一覧の横スクロール(モバイル時に詰まらないように) */
@media (max-width: 600px) {
.guz-cat-filter-inner { padding: 1rem var(--gutter); gap: 0.7rem; }
.guz-cat-filter-title { font-size: 0.66rem; }
.guz-cat-filter-tags {
flex-wrap: nowrap;
overflow-x: auto;
gap: 0.35rem;
padding-bottom: 0.5rem;
margin: 0 calc(-1 * var(--gutter));
padding-left: var(--gutter);
padding-right: var(--gutter);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.guz-cat-filter-tags::-webkit-scrollbar { display: none; }
.guz-cat-filter-chip {
padding: 0.4rem 0.75rem;
font-size: 0.74rem;
}
.guz-cat-filter-chip-count { font-size: 0.6rem; }
}
/* ===========================================================================
Category Hub — リデザイン版(2026-05-13)
ミニマル hero + 大型サブカテゴリタイル + Sticky filter + 記事グリッド
=========================================================================== */
.guz-hub {
max-width: 100%;
}
/* ---- 1. Hero (タイポグラフィのみ、画像なし) ---- */
.guz-hub-hero {
background: linear-gradient(180deg, #fff 0%, var(--c-bg, #faf8f4) 100%);
padding: 3rem var(--gutter) 2.5rem;
border-bottom: 1px solid var(--c-border);
text-align: center;
}
.guz-hub-hero-inner {
max-width: 880px;
margin: 0 auto;
}
.guz-hub-hero-eyebrow {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c-accent, #c8a05c);
margin: 0 0 0.85rem;
font-weight: 600;
}
.guz-hub-hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5.5vw, 3.5rem);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.12;
margin: 0 0 1rem;
color: var(--c-text);
}
.guz-hub-hero-lead {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(0.95rem, 1.6vw, 1.1rem);
color: var(--c-text-muted, #4b5563);
max-width: 640px;
margin: 0 auto 1.5rem;
line-height: 1.75;
}
.guz-hub-hero-meta {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
font-family: var(--font-tag);
color: var(--c-text-muted, #6b7280);
margin: 0;
}
.guz-hub-hero-count {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--c-text);
}
.guz-hub-hero-count-label {
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
}
/* ---- 共通: セクションヘッダー ---- */
.guz-hub-section-header {
max-width: var(--max-w);
margin: 0 auto 1.5rem;
padding: 0 var(--gutter);
text-align: left;
}
.guz-hub-section-eyebrow {
font-family: var(--font-tag);
font-size: 0.66rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--c-accent, #c8a05c);
margin: 0 0 0.4rem;
font-weight: 600;
}
.guz-hub-section-title {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
font-weight: 600;
margin: 0;
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.guz-hub-section-count {
font-family: var(--font-tag);
font-size: 0.72rem;
color: var(--c-text-muted, #6b7280);
letter-spacing: 0.15em;
font-weight: 400;
}
/* ---- 固定ページ本文 ---- */
.guz-hub-intro {
max-width: var(--max-w);
margin: 0 auto;
padding: 2rem var(--gutter) 1rem;
}
.guz-hub-intro-inner {
max-width: 700px;
margin: 0 auto;
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.85;
color: var(--c-text);
}
.guz-hub-intro-inner p { margin: 0 0 1rem; }
.guz-hub-intro-inner h2,
.guz-hub-intro-inner h3 {
font-family: var(--font-display);
margin: 1.75rem 0 0.6rem;
}
/* ---- 2. サブカテゴリ大型タイル(主要動線) ---- */
/* 2026-05-13 v2: FV / 前セクションとの間隔を強化 + タイル間 gap を確実に分離 */
.guz-hub-tiles {
padding: 3.5rem 0 3rem;
margin-top: 3rem;
background: rgba(0, 0, 0, 0.015);
border-top: 1px solid var(--c-border);
}
.guz-hub-tiles + .guz-hub-tiles,
.guz-hub-intro + .guz-hub-tiles {
margin-top: 2.5rem;
}
.guz-hub-tiles-grid {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
.guz-hub-tile {
position: relative;
display: flex;
align-items: flex-end;
min-height: 160px;
padding: 1.5rem 1.25rem;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
transition: transform 0.25s ease, box-shadow 0.25s ease;
isolation: isolate;
}
.guz-hub-tile:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.guz-hub-tile-bg {
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--tile-image, none);
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.guz-hub-tile:hover .guz-hub-tile-bg { transform: scale(1.05); }
.guz-hub-tile-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85) 100%);
}
.guz-hub-tile-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.guz-hub-tile-eyebrow {
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.7;
font-weight: 600;
}
.guz-hub-tile-name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
}
.guz-hub-tile-count {
font-family: var(--font-tag);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
margin-top: 0.3rem;
}
/* ---- 3. Sticky filter wrapper ---- */
.guz-hub-filter-wrap {
position: sticky;
top: 60px; /* mobile header height */
z-index: 50;
background: rgba(250, 248, 244, 0.96);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
margin-top: 2rem;
}
.guz-hub-filter-wrap .guz-cat-filter {
background: transparent;
border: 0;
margin: 0;
}
.guz-hub-filter-wrap .guz-cat-filter-inner {
padding: 0.9rem var(--gutter);
}
.is-hub-filter-stuck .guz-cat-filter-title { display: none; }
.is-hub-filter-stuck .guz-cat-filter-tags { max-height: 36px; overflow: hidden; }
.is-hub-filter-stuck .guz-cat-filter-tags.is-expanded { max-height: none; }
@media (min-width: 881px) {
.guz-hub-filter-wrap { top: 72px; }
}
/* ---- 4. 記事グリッド ---- */
.guz-hub-posts {
max-width: var(--max-w);
margin: 0 auto;
padding: 2.5rem var(--gutter) 3rem;
}
.guz-hub-post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin: 0;
}
/* ---- Empty state ---- */
.guz-hub-empty {
text-align: center;
padding: 4rem 1rem;
color: var(--c-text-muted, #6b7280);
}
.guz-hub-empty p {
font-family: var(--font-serif);
font-size: 1.1rem;
margin: 0 0 0.4rem;
}
.guz-hub-empty-sub {
font-size: 0.9rem !important;
font-style: italic;
}
.guz-hub-empty-reset {
display: inline-block;
margin-top: 1rem;
padding: 0.7rem 1.5rem;
background: var(--c-text);
color: #fff;
text-decoration: none;
border-radius: 999px;
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* ---- 編集部ピックアップ(2026-05-13 v3 追加、巨大 the_content 画像の代替) ---- */
.guz-hub-pickup {
max-width: var(--max-w);
margin: 3rem auto 0;
padding: 0 var(--gutter);
}
.guz-hub-pickup-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 1rem;
min-height: 420px;
}
.guz-hub-pickup-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.25rem;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
isolation: isolate;
transition: transform 0.25s ease, box-shadow 0.25s ease;
min-height: 200px;
}
.guz-hub-pickup-card.is-featured {
grid-row: span 2;
min-height: 420px;
}
.guz-hub-pickup-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.guz-hub-pickup-bg {
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--pickup-image, none);
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.guz-hub-pickup-card:hover .guz-hub-pickup-bg { transform: scale(1.04); }
.guz-hub-pickup-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.85) 100%);
}
.guz-hub-pickup-meta {
display: flex;
gap: 0.7rem;
align-items: center;
font-family: var(--font-tag);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0.4rem;
opacity: 0.85;
}
.guz-hub-pickup-cat {
background: rgba(255, 255, 255, 0.18);
padding: 0.15rem 0.55rem;
border-radius: 999px;
}
.guz-hub-pickup-title {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
line-height: 1.35;
margin: 0;
letter-spacing: 0.005em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.guz-hub-pickup-card.is-featured .guz-hub-pickup-title {
font-size: 1.45rem;
-webkit-line-clamp: 4;
}
/* ---- レスポンシブ調整 ---- */
@media (max-width: 720px) {
.guz-hub-hero { padding: 2rem var(--gutter) 1.75rem; }
/* 2026-05-13 v2: FV / 直前セクションとの間隔を明示 */
.guz-hub-tiles {
padding: 2.5rem 0 2.25rem;
margin-top: 2.5rem;
}
.guz-hub-tiles-grid { gap: 0.85rem; }
.guz-hub-tile {
min-height: 130px;
padding: 1.1rem 1rem;
border-radius: 10px;
}
.guz-hub-tile-name { font-size: 1.2rem; }
.guz-hub-posts { padding: 1.75rem var(--gutter) 2rem; margin-top: 1rem; }
.guz-hub-section-header { margin-bottom: 1rem; }
.guz-hub-intro { padding: 1.75rem var(--gutter) 0.5rem; }
.guz-hub-pickup { margin-top: 2rem; }
.guz-hub-pickup-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
min-height: auto;
}
.guz-hub-pickup-card {
min-height: 200px;
}
.guz-hub-pickup-card.is-featured {
grid-row: auto;
min-height: 260px;
}
.guz-hub-pickup-card.is-featured .guz-hub-pickup-title {
font-size: 1.2rem;
}
}