/* Theme Name: lp55-child Theme URI: https://lp55.net/ Description: 兎蛙ゴルフ保険帖 – Lightning 子テーマ Author: Huddle Works Author URI: https://lp55.net/ Template: lightning Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: lp55-child */ /* ============================================================ DESIGN TOKENS モックアップで定義した色・フォント・余白をCSS変数で管理。テンプレートファイルからは必ずこの変数を参照すること。 ============================================================ */ :root { /* --- Color: Base --- */ --color-bg: #ffffff; --color-bg-muted: #faf8f4; --color-bg-subtle: #f5f0e8; --color-border: #e8e4dc; --color-border-mid: #c8b898; /* --- Color: Text --- */ --color-text-primary: #1a1a1a; --color-text-secondary: #888888; --color-text-muted: #bbbbbb; --color-text-on-dark: #f5f0e8; /* --- Color: Brand --- */ --color-red: #C1441A; /* 朱赤 : CTA・アクセント・保険カテゴリ */ --color-red-hover: #a33516; --color-red-light: #FAF0EC; --color-green: #4A6741; /* 苔緑 : 会員権カテゴリ */ --color-green-light: #EAF4E8; --color-amber: #D4A017; /* 琥珀 : スクールカテゴリ */ --color-amber-light: #fdf5e0; --color-purple: #3C3489; /* 紫 : 用品買取カテゴリ */ --color-purple-light:#EEEDFE; --color-dark: #1a1a1a; /* ほぼ黒: ランキングバー背景など */ /* --- Color: Ranking medals --- */ --color-gold: #D4AF37; --color-gold-text: #7a5f00; --color-silver: #b0b0b0; --color-silver-text: #444444; --color-bronze: #a0714a; --color-bronze-text: #ffffff; /* --- Typography --- */ --font-serif: 'Noto Serif JP', 'Georgia', serif; --font-sans: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif; /* --- Font size scale --- */ --fs-xs: 10px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; /* --- Spacing scale --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* サイト横パディング（幅変更時はここだけ調整） */ --sp-side: 48px; /* --- Layout --- */ --content-width: 1280px; --sidebar-width: 280px; --border-radius: 0px; /* このサイトは角丸なし。変更する場合ここだけ */ } /* ============================================================ CATEGORY COLOR UTILITY CLASSES カテゴリスラッグに応じてJSまたはPHPでbodyに付与例: またはカードに .cat-insurance ============================================================ */ /* バッジ・タグ共通 */ .cat-badge { display: inline-block; font-size: var(--fs-xs); letter-spacing: 0.1em; padding: 3px 10px; font-family: var(--font-sans); white-space: nowrap; } .cat-badge.insurance { background: var(--color-red-light); color: #993C1D; border: 0.5px solid #f0997b; } .cat-badge.membership{ background: var(--color-green-light); color: #27500A; border: 0.5px solid #97C459; } .cat-badge.school { background: var(--color-amber-light); color: #856014; border: 0.5px solid #EF9F27; } .cat-badge.buyout { background: var(--color-purple-light); color: var(--color-purple); border: 0.5px solid #AFA9EC; } /* カードのアクセントライン（上部3px） */ .cat-accent-insurance { border-top: 3px solid var(--color-red); } .cat-accent-membership{ border-top: 3px solid var(--color-green); } .cat-accent-school { border-top: 3px solid var(--color-amber); } .cat-accent-buyout { border-top: 3px solid var(--color-purple);} /* ============================================================ GLOBAL RESET & BASE Lightning本体のスタイルを最小限だけ上書き ============================================================ */ body { font-family: var(--font-sans); color: var(--color-text-primary); background: var(--color-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* スマホでの横スクロール防止 */ } /* Lightningのコンテンツ幅を上書き */ .l-main__content, .l-col-main { width: 100%; max-width: var(--content-width); box-sizing: border-box; } /* 見出し : Lightning デフォルトを抑制しつつ明朝体に */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.03em; color: var(--color-text-primary); } a { color: var(--color-red); text-decoration: none; transition: opacity 0.15s; } a:hover { opacity: 0.75; } /* ============================================================ HEADER ============================================================ */ .site-header, #site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); padding: 0 var(--sp-side); } /* ロゴ */ .site-branding .site-title { font-family: var(--font-serif); font-size: var(--fs-md); letter-spacing: 0.03em; color: var(--color-text-primary); } .site-branding .site-description { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.08em; } /* グローバルナビ */ .global-nav ul, #site-header-nav ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; } .global-nav ul li a, #site-header-nav ul li a { display: block; font-size: var(--fs-sm); color: var(--color-text-secondary); padding: 6px 14px; letter-spacing: 0.04em; border-left: 0.5px solid var(--color-border); transition: color 0.15s; } .global-nav ul li a:hover, #site-header-nav ul li a:hover, .global-nav ul li.current-menu-item a { color: var(--color-red); opacity: 1; } /* ランキングクイックリンクバー */ .ranking-quick-bar { background: var(--color-dark); height: 38px; overflow: hidden; } .ranking-quick-bar__inner { display: flex; align-items: center; gap: var(--sp-2); width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--sp-side); height: 38px; box-sizing: border-box; } .ranking-quick-bar__label { font-size: var(--fs-xs); color: #666; letter-spacing: 0.18em; white-space: nowrap; flex-shrink: 0; } .ranking-quick-bar__links { display: flex; gap: 0; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .ranking-quick-bar__links::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .ranking-quick-bar__links a { font-size: 11px; color: #c8b898; text-decoration: none; padding: 0 var(--sp-4); border-left: 0.5px solid #333; white-space: nowrap; display: flex; align-items: center; gap: var(--sp-1); height: 38px; letter-spacing: 0.06em; transition: color 0.15s; flex-shrink: 0; } .ranking-quick-bar__links a:first-child { border-left: none; } .ranking-quick-bar__links a:hover { color: #fff; opacity: 1; } /* ============================================================ BREADCRUMB ============================================================ */ .breadcrumb, .vk-breadcrumb { border-bottom: 0.5px solid var(--color-border); font-size: 11px; color: var(--color-text-muted); } .breadcrumb__inner { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 10px var(--sp-side); display: flex; gap: var(--sp-2); align-items: center; box-sizing: border-box; } .breadcrumb a, .vk-breadcrumb a { color: var(--color-text-muted); } .breadcrumb a:hover, .vk-breadcrumb a:hover { color: var(--color-red); opacity: 1; } /* ============================================================ RANKING ENTRY CARDS (トップページ 3カラム) ============================================================ */ .ranking-entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border); } .ranking-entry-card { position: relative; border-right: 0.5px solid var(--color-border); cursor: pointer; overflow: hidden; transition: background 0.15s; } .ranking-entry-card:last-child { border-right: none; } .ranking-entry-card:hover { background: var(--color-bg-muted); } .ranking-entry-card__inner { padding: var(--sp-6) var(--sp-5) var(--sp-5); } .ranking-entry-card__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-4); } .ranking-entry-card__title { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 400; color: var(--color-text-primary); line-height: 1.5; margin: 0 0 var(--sp-2); } .ranking-entry-card__sub { font-size: 11px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--sp-5); } /* ポディウム（1〜3位プレビュー） */ .podium { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); } .podium__row { display: flex; align-items: center; gap: var(--sp-2); } .podium__medal { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; flex-shrink: 0; } .podium__medal--1 { background: var(--color-gold); color: var(--color-gold-text); } .podium__medal--2 { background: var(--color-silver); color: var(--color-silver-text); } .podium__medal--3 { background: var(--color-bronze); color: var(--color-bronze-text); } .podium__name { font-size: var(--fs-sm); color: #333; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .podium__score { font-size: 11px; color: var(--color-red); white-space: nowrap; font-weight: 500; } .ranking-entry-card__cta { display: flex; align-items: center; justify-content: space-between; border-top: 0.5px solid var(--color-border); padding-top: var(--sp-4); font-size: 11px; color: var(--color-red); letter-spacing: 0.06em; } /* ============================================================ RANKING PAGE : ランキング個別カード ============================================================ */ .ranking-item { border: 0.5px solid var(--color-border); margin-top: var(--sp-5); position: relative; transition: border-color 0.15s; } .ranking-item:hover { border-color: var(--color-border-mid); } .ranking-item--1 { border-color: var(--color-gold); border-width: 1.5px; } .ranking-item--2 { border-color: var(--color-silver); } .ranking-item--3 { border-color: var(--color-bronze); } .ranking-item__badge { position: absolute; top: -1px; left: -1px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; font-weight: 500; z-index: 1; } .ranking-item--1 .ranking-item__badge { background: var(--color-gold); color: var(--color-gold-text); } .ranking-item--2 .ranking-item__badge { background: var(--color-silver); color: var(--color-silver-text); } .ranking-item--3 .ranking-item__badge { background: var(--color-bronze); color: var(--color-bronze-text); } .ranking-item--4 .ranking-item__badge, .ranking-item--5 .ranking-item__badge { background: var(--color-bg-subtle); color: var(--color-text-secondary); font-size: 14px; } .ranking-item__body { padding: var(--sp-5) var(--sp-5) var(--sp-5) 56px; } .ranking-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); } .ranking-item__rec-label { font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--color-red); margin-bottom: var(--sp-1); } .ranking-item__name { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 400; color: var(--color-text-primary); letter-spacing: 0.02em; margin-bottom: var(--sp-1); } .ranking-item__name-en { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.06em; } .ranking-item__score-block { text-align: right; flex-shrink: 0; } .ranking-item__stars { color: var(--color-gold); font-size: 13px; letter-spacing: 1px; margin-bottom: 2px; } .ranking-item__score-num { font-size: 22px; font-weight: 500; color: var(--color-text-primary); line-height: 1; } .ranking-item__score-max { font-size: 11px; color: var(--color-text-muted); } /* タグ */ .ranking-item__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); } .ranking-item__tag { font-size: var(--fs-xs); padding: 3px 10px; background: var(--color-bg-subtle); color: #5a4d38; letter-spacing: 0.06em; } .ranking-item__tag--good { background: var(--color-green-light); color: #27500A; } .ranking-item__tag--caution { background: var(--color-amber-light); color: #856014; } /* スコアバー */ .score-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); } .score-bar__label { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-bottom: 4px; letter-spacing: 0.04em; } .score-bar__track { height: 4px; background: var(--color-border); overflow: hidden; } .score-bar__fill { height: 100%; background: var(--color-text-primary); transition: width 0.6s ease; } .score-bar__val { font-size: 11px; color: var(--color-text-primary); font-weight: 500; margin-top: 3px; } /* キャラクターコメント */ .char-comment { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--color-bg-subtle); border-left: 3px solid var(--color-red); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-1); } .char-comment__name { font-size: var(--fs-xs); color: var(--color-red); font-weight: 500; margin-bottom: 3px; letter-spacing: 0.06em; } .char-comment__text { font-size: var(--fs-sm); color: #3a2e1e; line-height: 1.8; } /* 詳細行（グリッド） */ .ranking-item__detail { display: flex; gap: 0; border-top: 0.5px solid var(--color-border); margin: 0 calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)); } .ranking-item__detail-cell { flex: 1; padding: var(--sp-3) var(--sp-4); border-right: 0.5px solid var(--color-border); font-size: var(--fs-sm); } .ranking-item__detail-cell:last-child { border-right: none; } .ranking-item__detail-label { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 3px; letter-spacing: 0.04em; } .ranking-item__detail-val { color: var(--color-text-primary); font-weight: 500; } /* CTA フッター */ .ranking-item__cta { padding: var(--sp-4) var(--sp-5) var(--sp-4) 56px; background: var(--color-bg-muted); border-top: 0.5px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .ranking-item--1 .ranking-item__cta { background: #fffbf0; border-top-color: var(--color-gold); } .ranking-item__cta-note { font-size: 11px; color: var(--color-text-secondary); line-height: 1.6; } .ranking-item__cta-btns { display: flex; gap: var(--sp-2); flex-shrink: 0; } /* ボタン共通 */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); letter-spacing: 0.08em; padding: 10px 22px; cursor: pointer; border: none; font-family: var(--font-sans); transition: background 0.15s; white-space: nowrap; text-decoration: none; } .btn--primary { background: var(--color-red); color: #fff; } .btn--primary::after { content: '→'; } .btn--primary:hover { background: var(--color-red-hover); opacity: 1; } .btn--secondary { background: var(--color-bg); color: var(--color-text-primary); border: 0.5px solid var(--color-border-mid); } .btn--secondary:hover { background: var(--color-bg-subtle); opacity: 1; } /* ============================================================ HERO / FEATURED ARTICLE ============================================================ */ .hero-featured { display: grid; grid-template-columns: 1fr 420px; border-bottom: 1px solid var(--color-border); } .hero-featured__main { padding: var(--sp-10) var(--sp-side); border-right: 0.5px solid var(--color-border); display: flex; flex-direction: column; justify-content: space-between; } .hero-featured__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--color-red); margin-bottom: var(--sp-4); } .hero-featured__eyebrow-dot { width: 6px; height: 6px; background: var(--color-red); border-radius: 50%; animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } .hero-featured__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .hero-featured__date { font-size: 11px; color: var(--color-text-muted); } .hero-featured__title { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 400; line-height: 1.65; color: var(--color-text-primary); margin-bottom: var(--sp-4); letter-spacing: 0.02em; } .hero-featured__title em { font-style: normal; border-bottom: 2px solid var(--color-red); padding-bottom: 1px; } .hero-featured__excerpt { font-size: 13px; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: var(--sp-6); } .hero-featured__cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-red); letter-spacing: 0.06em; border-bottom: 1px solid var(--color-red); padding-bottom: 2px; } .hero-featured__cta::after { content: '→'; } .hero-featured__img { background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; min-height: 260px; } /* ============================================================ ARTICLE ARCHIVE GRID（新着・3カラム） ============================================================ */ .archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border); } .archive-card { padding: var(--sp-5); border-right: 0.5px solid var(--color-border); cursor: pointer; transition: background 0.15s; } .archive-card:last-child { border-right: none; } .archive-card:hover { background: var(--color-bg-muted); } .archive-card__thumb { background: var(--color-bg-subtle); height: 90px; margin-bottom: var(--sp-3); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .archive-card__new { position: absolute; top: 6px; left: 6px; font-size: 9px; background: var(--color-red); color: #fff; padding: 2px 6px; letter-spacing: 0.1em; } .archive-card__cat { font-size: var(--fs-xs); color: var(--color-text-secondary); letter-spacing: 0.08em; margin-bottom: var(--sp-1); } .archive-card__title { font-family: var(--font-serif); font-size: var(--fs-sm); font-weight: 400; line-height: 1.6; color: var(--color-text-primary); margin-bottom: var(--sp-2); } .archive-card__date { font-size: 11px; color: var(--color-text-muted); } /* ============================================================ ARTICLE LIST（カテゴリ別注目記事） ============================================================ */ .article-list__item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-side); border-bottom: 0.5px solid var(--color-border); cursor: pointer; transition: background 0.15s; } .article-list__item:last-child { border-bottom: none; } .article-list__item:hover { background: var(--color-bg-muted); } .article-list__num { font-family: var(--font-serif); font-size: 18px; color: #e0d8cc; flex-shrink: 0; width: 26px; line-height: 1; } .article-list__title { font-size: 13px; color: var(--color-text-primary); line-height: 1.5; flex: 1; } .article-list__date { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; } /* ============================================================ SECTION LABEL ROW ============================================================ */ .section-label-row { display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-6) var(--sp-side) var(--sp-4); border-bottom: 0.5px solid var(--color-border); } .section-label-row__title { font-family: var(--font-serif); font-size: var(--fs-base); color: var(--color-text-primary); letter-spacing: 0.08em; } .section-label-row__more { font-size: 11px; color: var(--color-red); letter-spacing: 0.06em; } /* ============================================================ RANKING PAGE HEADER ============================================================ */ .ranking-page-header { padding: var(--sp-8) var(--sp-side) 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); } .ranking-page-header__eyebrow { font-size: var(--fs-xs); letter-spacing: 0.16em; color: var(--color-red); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); } .ranking-page-header__eyebrow::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--color-red); } .ranking-page-header__h1 { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 400; line-height: 1.5; color: var(--color-text-primary); letter-spacing: 0.02em; margin-bottom: var(--sp-2); } .ranking-page-header__lead { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.8; max-width: 400px; } /* 評価軸バー */ .criteria-bar { display: flex; gap: 0; background: var(--color-bg-muted); border-bottom: 1px solid var(--color-border); } .criteria-bar__item { flex: 1; padding: var(--sp-3) var(--sp-4); border-right: 0.5px solid var(--color-border); display: flex; align-items: center; gap: var(--sp-2); } .criteria-bar__item:last-child { border-right: none; } .criteria-bar__label { font-size: var(--fs-xs); color: var(--color-text-secondary); letter-spacing: 0.06em; } .criteria-bar__name { font-size: var(--fs-sm); color: var(--color-text-primary); font-weight: 500; } /* タブナビ */ .tab-nav { display: flex; border-bottom: 2px solid var(--color-text-primary); padding: 0 var(--sp-side); } .tab-nav__item { font-size: var(--fs-sm); padding: 10px var(--sp-5); letter-spacing: 0.06em; color: var(--color-text-secondary); cursor: pointer; position: relative; text-decoration: none; transition: color 0.15s; } .tab-nav__item:hover { color: var(--color-text-primary); } .tab-nav__item.is-active { color: var(--color-text-primary); font-weight: 500; } .tab-nav__item.is-active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--color-red); } /* ============================================================ FOOTER ============================================================ */ .site-footer, #site-footer { background: var(--color-bg-muted); border-top: 1px solid var(--color-border); padding: var(--sp-5) var(--sp-side); } .footer-inner { display: flex; align-items: center; justify-content: space-between; } .footer-logo { font-family: var(--font-serif); font-size: 13px; color: var(--color-text-secondary); } .footer-nav { display: flex; gap: var(--sp-5); list-style: none; } .footer-nav a { font-size: 11px; color: var(--color-text-muted); } .footer-nav a:hover { color: var(--color-red); opacity: 1; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { :root { --sp-8: 20px; --sp-side: 20px; } .hero-featured { grid-template-columns: 1fr; } .hero-featured__img { display: none; } .ranking-entry-grid { grid-template-columns: 1fr; } .archive-grid { grid-template-columns: repeat(2, 1fr); } .score-bars { grid-template-columns: repeat(2, 1fr); } .ranking-item__detail { flex-wrap: wrap; } .ranking-item__detail-cell { min-width: 50%; } .ranking-item__cta { flex-direction: column; align-items: flex-start; } .tab-nav { overflow-x: auto; padding: 0 var(--sp-5); } .criteria-bar { flex-wrap: wrap; } .criteria-bar__item { min-width: 50%; } .global-nav { display: none; } } @media (min-width: 769px) and (max-width: 1100px) { :root { --sp-side: 32px; --content-width: 100%; } .hero-featured { grid-template-columns: 1fr 340px; } .ranking-entry-grid { grid-template-columns: repeat(3, 1fr); } .archive-grid { grid-template-columns: repeat(3, 1fr); } }