/* ============================================================ 足柄びより v6 洗練オーバーレイ（ステージング検証用・追加CSS貼付け版） ------------------------------------------------------------ 用途: 既に article-styles.css(=v5) が読み込まれているサイトに、 WordPress「外観 > カスタマイズ > 追加CSS」へ本ファイルを貼るだけで承認済みブラッシュアップ（refined）を上乗せ検証できる。・本ファイルは v6.css のうち「トークン層＋洗練レイヤー」のみ（v5本体は含まない）。・refined を点灯するにはに data-asg-theme="refined" を付ける（下記注記参照）。・撤去は追加CSSを空にするだけ → 即 v5 の見た目へ戻る。 ※ 本番反映時は本オーバーレイではなく v6.css 全体をテーマに設置する。 ============================================================ */ :root { --asg-primary:#1a6b5a; --asg-primary-light:#2d9b83; --asg-accent:#e67635; --asg-accent-dark:#d4652b; --asg-font-base:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --asg-radius-card-soft:16px; --asg-radius-cta-soft:12px; --asg-shadow-card-soft:0 6px 24px rgba(26,107,90,.08); --asg-shadow-cta-soft:0 2px 14px rgba(193,104,59,.20); --asg-shadow-cta-soft-hover:0 6px 20px rgba(193,104,59,.28); --asg-accent-soft:#c1683b; --asg-accent-soft-dark:#a4552e; --asg-accent-soft-bg:#f8efe6; --asg-accent-soft-border:#e6ccb3; } /* ============================================================ [REFINE] 洗練レイヤー — の時のみ適用 ============================================================ */ /* --- CTA: 柿渋テラコッタ＋やわらかい影＋角丸12px --- */ [data-asg-theme="refined"] a[rel*="sponsored"], [data-asg-theme="refined"] .cta-booking-button { background: var(--asg-accent-soft) !important; border-radius: var(--asg-radius-cta-soft) !important; box-shadow: var(--asg-shadow-cta-soft) !important; } [data-asg-theme="refined"] a[rel*="sponsored"]:hover, [data-asg-theme="refined"] .cta-booking-button:hover { background: var(--asg-accent-soft-dark) !important; box-shadow: var(--asg-shadow-cta-soft-hover) !important; } [data-asg-theme="refined"] .cta-affiliate-box { background: var(--asg-accent-soft-bg) !important; border-color: var(--asg-accent-soft-border) !important; border-radius: var(--asg-radius-card-soft) !important; } [data-asg-theme="refined"] .cta-affiliate-box__title--centered { color: var(--asg-accent-soft-dark) !important; } /* --- カード: 角丸 12px → 16px ＋拡散したやわらかい影 --- */ [data-asg-theme="refined"] .practical-info-box, [data-asg-theme="refined"] .warning-hint-box, [data-asg-theme="refined"] .toc-container, [data-asg-theme="refined"] .course-section, [data-asg-theme="refined"] .travel-plan-card, [data-asg-theme="refined"] :not(.course-section) > .course-card { border-radius: var(--asg-radius-card-soft) !important; } [data-asg-theme="refined"] .related-link-card:hover { box-shadow: var(--asg-shadow-card-soft) !important; } /* --- H2見出し: 下罫線を外し静かな表情へ＋角ゴ統一 --- */ [data-asg-theme="refined"] .entry-content h2, [data-asg-theme="refined"] .post-content h2, [data-asg-theme="refined"] article h2 { border-left: 3px solid var(--asg-primary) !important; border-bottom: 0 !important; background: linear-gradient(to right, #f3f9f7, transparent 70%) !important; padding: 0.15em 0 0.2em 0.9em !important; font-family: var(--asg-font-base) !important; } /* --- 書体統一: 見出し・本文を Noto Sans JP に統一 --- */ [data-asg-theme="refined"] .entry-content, [data-asg-theme="refined"] .post-content, [data-asg-theme="refined"] article, [data-asg-theme="refined"] .entry-content h3, [data-asg-theme="refined"] .post-content h3, [data-asg-theme="refined"] article h3 { font-family: var(--asg-font-base) !important; } /* --- トップ含む全サイトの見出し書体統一（style.css の h1-h4 / カード見出し Serif を上書き） --- */ [data-asg-theme="refined"] h1, [data-asg-theme="refined"] h2, [data-asg-theme="refined"] h3, [data-asg-theme="refined"] h4, [data-asg-theme="refined"] .l-sidebar .widget-title, [data-asg-theme="refined"] .l-sidebar .widgettitle, [data-asg-theme="refined"] .wp-block-latest-posts__post-title { font-family: var(--asg-font-base) !important; } /* ============================================================ [REFINE/TOP] トップ新着記事カード（wp:latest-posts）— R-1 角丸/影＋ R-2 テキスト窮屈解消実セレクタ出典: child-theme-source/style.css §20（.wp-block-latest-posts.is-grid） ============================================================ */ /* --- R-1: カード角丸 12px→16px ＋拡散したやわらかい影（記事カードと統一） --- */ [data-asg-theme="refined"] .wp-block-latest-posts.is-grid li { border-radius: var(--asg-radius-card-soft) !important; /* 0.75rem → 16px */ box-shadow: var(--asg-shadow-card-soft) !important; /* 0 6px 24px rgba(26,107,90,.08) */ } [data-asg-theme="refined"] .wp-block-latest-posts.is-grid li:hover { box-shadow: 0 12px 32px rgba(26,107,90,.14) !important; /* hover も暖色寄りの拡散影へ */ } /* --- R-2: カード下部テキストの窮屈解消（左右余白・行間を広げ、抜粋を3行に） --- */ [data-asg-theme="refined"] .wp-block-latest-posts__post-title { padding: 1.15rem 1.4rem 0 !important; /* 1rem 1.25rem 0 → ゆとり */ line-height: 1.6 !important; /* 1.5 → 1.6 */ } [data-asg-theme="refined"] .wp-block-latest-posts__post-date { padding: 0.6rem 1.4rem 0 !important; /* 0.5rem 1.25rem 0 → 左右合わせ */ } [data-asg-theme="refined"] .wp-block-latest-posts__post-excerpt { padding: 0.7rem 1.4rem 1.5rem !important; /* 0.5rem 1.25rem 1.25rem → 下余白を増やす */ line-height: 1.75 !important; /* 1.6 → 1.75（窮屈感の主因の行間を緩和） */ -webkit-line-clamp: 3 !important; /* 2 → 3行（カード高に余白が生まれ間延びを防ぐ） */ } /* ============================================================ refined 点灯方法（追加CSSだけでは body 属性は付けられないため）: REHUBのカスタムコード欄、または「Insert Headers and Footers / WPCode」等のプラグインでかフッターに次の1行を入れる: → 撤去は本CSSと上記スクリプトを消すだけで即ロールバック。 ============================================================ */ /* ============================================================ [ADD 2026-07-07] 複数ASP CTA（AffiliateCTA・楽天/じゃらん/Agoda）出典: cta-multi-asp-overlay-additions.css（テックリード作成・レビュー済）新クラスの【追加のみ】。既存 .cta-affiliate-box / .cta-booking-button / .cta-affiliate-box__btn-row は無改変・そのまま生きる。撤去は本セクションを削るだけで新CTAクラス未使用の既存記事に影響ゼロ。【設計メモ・詳細度の根拠（重要・変更時は再計算すること）】 v5 の a[rel*="sponsored"]（詳細度0,1,1・!important）と、本ファイル上部の [data-asg-theme="refined"] a[rel*="sponsored"]（0,2,1・!important）が全スポンサーリンクを「塗りボタン」化するため、副導線（アウトライン）と簡易テキストリンクは、それより高い詳細度（0,3,0以上）＋!important で明示的に打ち返している。主導線（--primary）は上記の塗り・影・柿渋切替をそのまま継承する設計（上書き最小化）。 ============================================================ */ /* --- トークン（副導線アウトライン用・[BRAND]既定値） --- */ :root { --asg-cta-outline-text: #d4652b; --asg-cta-outline-border: #f0cdb0; --asg-cta-outline-bg: #ffffff; --asg-cta-outline-bg-hover: #fff8f3; } /* [REFINE] 柿渋テラコッタ系へ一括スイッチ（上部の accent-soft 系トークンを参照） */ [data-asg-theme="refined"] { --asg-cta-outline-text: var(--asg-accent-soft-dark, #a4552e); --asg-cta-outline-border: var(--asg-accent-soft-border, #e6ccb3); --asg-cta-outline-bg: #ffffff; --asg-cta-outline-bg-hover: var(--asg-accent-soft-bg, #f8efe6); } /* --- PR表記（ボックス冒頭に1箇所だけ） --- */ .cta-affiliate-box__pr { display: inline-block !important; margin: 0 0 12px !important; padding: 1px 6px !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: #9ca3af !important; border: 1px solid #e5e7eb !important; border-radius: 4px !important; } /* --- 複数ボタンの可変レイアウトコンテナ（1〜3本で崩れない） --- */ .cta-affiliate-box__btn-row--multi { display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 0.75rem 0 !important; } /* --- 副導線グループの見出し（主→副の切れ目。細い区切り線つき） --- */ .cta-affiliate-box__aspsub { display: flex !important; align-items: center !important; gap: 10px !important; margin: 2px 0 !important; font-size: 0.72rem !important; color: #888888 !important; } .cta-affiliate-box__aspsub::before, .cta-affiliate-box__aspsub::after { content: "" !important; flex: 1 !important; height: 1px !important; background: #e0e8e6 !important; } /* --- 副導線ボタンの並び（PC=横並びグリッド／SP=縦積み） --- */ .cta-affiliate-box__aspsub-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 10px !important; } /* --- ASPボタン共通: v5 の横並び(row)前提を縦積み(column)へ --- （__label ＋ __sub の2行構成に対応。塗り・角丸・min-height 48px 等は v5 a[rel*="sponsored"] / v6 refined を継承） */ .cta-affiliate-box__btn-row--multi .cta-asp-button { flex-direction: column !important; gap: 2px !important; line-height: 1.35 !important; text-align: center !important; } .cta-asp-button__sub { font-size: 0.72rem !important; font-weight: 500 !important; opacity: 0.92 !important; } /* --- 主導線（楽天想定）: 塗り・影・hoverは v5/v6 継承。文字階層のみ追加 --- */ .cta-affiliate-box__btn-row--multi .cta-asp-button--primary { font-size: 1rem !important; } /* --- 副導線（じゃらん/Agoda）: v5 の塗りボタン化を打ち返しアウトラインへ --- セレクタは3クラス(0,3,0)＝v6 refined 一般則(0,2,1)にも読み込み順不問で勝つ */ .cta-affiliate-box__btn-row--multi .cta-asp-button.cta-asp-button--secondary { background: var(--asg-cta-outline-bg, #ffffff) !important; color: var(--asg-cta-outline-text, #d4652b) !important; border: 1.5px solid var(--asg-cta-outline-border, #f0cdb0) !important; padding: 11px 20px !important; font-size: 0.9rem !important; box-shadow: none !important; } .cta-affiliate-box__btn-row--multi .cta-asp-button.cta-asp-button--secondary:hover { background: var(--asg-cta-outline-bg-hover, #fff8f3) !important; color: var(--asg-cta-outline-text, #d4652b) !important; border-color: var(--asg-cta-outline-border, #f0cdb0) !important; box-shadow: none !important; transform: translateY(-1px) !important; } /* --- 押下フィードバック（主・副共通） --- */ .cta-affiliate-box__btn-row--multi .cta-asp-button:active { transform: translateY(1px) !important; } /* --- キーボード操作の可視フォーカス（WCAG 2.4.7・深緑リング） --- */ .cta-affiliate-box__btn-row--multi .cta-asp-button:focus-visible, a.cta-affiliate-box__aspsub-link:focus-visible { outline: 2px solid #1a6b5a !important; outline-offset: 2px !important; } /* --- ASP種別フック（計測・並び順用。配色は意図的に変えない） --- 楽天=赤／じゃらん=橙等の公式ブランド色は使わない方針。 GA4 クリック計測のセレクタフックとしてのみ存在する。 */ .cta-asp-button--rakuten {} .cta-asp-button--jalan {} .cta-asp-button--agoda {} /* --- 簡易テキストリンク（インフォボックス等の控えめ副導線） --- rel="sponsored" 付きでも v5 の塗りボタン化を打ち返してテキストに戻す */ .cta-affiliate-box__aspsub-link, a.cta-affiliate-box__aspsub-link[rel~="sponsored"] { display: inline-block !important; margin: 6px 0 0 !important; padding: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0.8rem !important; font-weight: 500 !important; color: var(--asg-cta-outline-text, #d4652b) !important; text-decoration: none !important; } .cta-affiliate-box__aspsub-link:hover, a.cta-affiliate-box__aspsub-link[rel~="sponsored"]:hover { background: none !important; box-shadow: none !important; transform: none !important; color: var(--asg-cta-outline-text, #d4652b) !important; text-decoration: underline !important; } /* [REFINE] v6 一般則(0,2,1)と同格になるため、より高い詳細度(0,3,1)で確定 */ [data-asg-theme="refined"] a.cta-affiliate-box__aspsub-link[rel~="sponsored"] { background: none !important; box-shadow: none !important; color: var(--asg-cta-outline-text, #a4552e) !important; } [data-asg-theme="refined"] a.cta-affiliate-box__aspsub-link[rel~="sponsored"]:hover { background: none !important; box-shadow: none !important; } /* --- SP（〜639px）: 完全縦積み1列。タップしやすさ優先 --- */ @media (max-width: 639px) { .cta-affiliate-box__aspsub-row { grid-template-columns: 1fr !important; } .cta-affiliate-box__btn-row--multi .cta-asp-button { width: 100% !important; } } /* ============================================================ [ADD 2026-07-07] 新着記事ウィジェット（TCDテーマ rehub_tcd099 標準 .design_post_list_widget）タブ配色のブランドカラー化出典: 丹野さん実機指摘（本番 hakone-ashigara-day-trip-model-course/ ページ・DevTools実測）。親テーマ css/default-widget.css 由来の黒/白ベタ塗りタブ（アクティブ=白背景+黒文字・非アクティブ=黒背景+白文字・選択インジケータ無し）をブランドトーン（テール系グリーン＋テラコッタ）へ上書き。親テーマファイルは直接編集禁止のため本オーバーレイへの追記のみで対応。全記事共通サイドバー表示のため、本CSS追記だけで全記事に反映される。【詳細度の根拠】親テーマ側セレクタは基本クラス .p-widget-posts__labels-item 単体（実測: !important不使用）のため、通常詳細度のクラスセレクタで上書き可能。念のため本ファイル既存の慣習（CTAセクション等）に合わせ !important を付与し、読み込み順・詳細度の両面で確実に上書きする。スコープは常時適用（[data-asg-theme="refined"] 限定にしない）。理由: 本番稼働中の全記事ページで即座に効かせる必要があり、CTA複数ASP 追加セクション（本ファイル末尾・上記）と同じ「常時適用の追記」方式を踏襲。【使用トークン】 - アクティブタブ背景: --asg-primary（#1a6b5a テール系グリーン。見出し等で使用中の主役ブランド色をタブにも一貫適用） - アクティブタブ下線インジケータ: --asg-accent（#e67635 テラコッタ。 CTA等で使う「行動の合図」色を選択状態の強調に流用し、緑一色よりも選択中であることが視認しやすいコントラストを作る） - 非アクティブタブ背景: --asg-surface-tint2（#f0f7f5 淡い緑がかったサーフェス。h2見出し背景等と同系統でブランドトーンに統一しつつ、黒ベタ塗りより圧迫感を減らす） - 非アクティブタブ文字: --asg-ink-2（#555555 本文サブトーン） - 非アクティブタブ hover 背景: --asg-primary-100（#d9e8e3 primary淡背景・選択面トークン）/ hover 文字: --asg-primary ============================================================ */ .design_post_list_widget .p-widget-posts__labels-item { background: var(--asg-surface-tint2, #f0f7f5) !important; color: var(--asg-ink-2, #555555) !important; border-bottom: 3px solid transparent !important; transition: background var(--asg-dur, 250ms) var(--asg-ease, ease), color var(--asg-dur, 250ms) var(--asg-ease, ease), border-color var(--asg-dur, 250ms) var(--asg-ease, ease); } .design_post_list_widget .p-widget-posts__labels-item.is-active { background: var(--asg-primary, #1a6b5a) !important; color: #ffffff !important; border-bottom: 3px solid var(--asg-accent, #e67635) !important; font-weight: var(--asg-fw-medium, 500) !important; } /* --- 非アクティブタブ hover: クリック可能であることを示す --- */ .design_post_list_widget .p-widget-posts__labels-item:not(.is-active):hover { background: var(--asg-primary-100, #d9e8e3) !important; color: var(--asg-primary, #1a6b5a) !important; cursor: pointer !important; } /* --- アクティブタブは hover でも選択状態を維持（誤操作感を出さない） --- */ .design_post_list_widget .p-widget-posts__labels-item.is-active:hover { background: var(--asg-primary, #1a6b5a) !important; color: #ffffff !important; } /* --- SP（〜639px）: タブ文字が詰まりやすいため微調整 --- */ @media (max-width: 639px) { .design_post_list_widget .p-widget-posts__labels-item { border-bottom-width: 2px !important; } } /* ============================================================ [ADD 2026-07-07] 単一リンクCTAボタンの幅固定（宿泊系記事JP-17等・.cta-affiliate-box__desc 内の素の a[rel*="sponsored"] テキストリンク。cta-multi-asp化前からの旧来パターン）出典: 丹野さん実機指摘（本番 ashigara-accommodation-guide/ ページ・ Chrome DevTools実測）。同一セレクタで自動ボタン装飾される v5 a[rel*="sponsored"] が display:inline-flex のみでwidth指定を持たないため、ボタン幅がリンクテキスト文字数に比例して 383px〜633pxとバラつく事象。「モダン湯治おんりーゆー」等7件で確認。【対象と対象外の切り分け（重要）】 - 対象: .cta-affiliate-box__desc 内の単一リンク（テキスト長で幅が決まる旧来パターン）。汎用フォールバックとして .cta-affiliate-box 配下の a[rel*="sponsored"] 全般も対象にしつつ、新設の .cta-asp-button（primary/secondary・cta-multi-asp-overlay-additions.css 由来）は :not() で明示除外し、既に親幅いっぱいで正しく揃っているものには一切触れない。 - 対象外: .cta-affiliate-box__aspsub-link（控えめ副導線テキストリンク。本ファイル上部で既にボタン化を打ち返し済み・幅固定の対象ではない）。セレクタは元々このクラスにマッチしないため対応不要だが、明示的にも :not(.cta-affiliate-box__aspsub-link) を重ねて安全側に倒す。【詳細度の根拠】 v5 の a[rel*="sponsored"]（属性セレクタ+タグ相当＝詳細度 0,1,1・ !important）に対し、本ルールは .cta-affiliate-box__desc a[rel*="sponsored"] （クラス1＋属性セレクタ1＝詳細度 0,2,1）＋ !important で、 v5より高い詳細度・同じ !important 重みで確実に上書きする（本ファイル既存のCTAセクションの慣習と同一の考え方）。汎用フォールバックの .cta-affiliate-box a[rel*="sponsored"] も同じ 0,2,1 のため、読み込み順（本ファイルが後読み）で確実に勝つ。【折り返し方針】絵文字＋日本語の施設名・ASP名を含むため、省略(ellipsis)は CTAとして情報欠落リスクが高い（どの施設・どのASPかが読めなくなる）。よって折り返し(word-wrap)を採用し、幅は固定しつつ2行以上になっても崩れない設計とする。 ============================================================ */ .cta-affiliate-box__desc a[rel*="sponsored"]:not(.cta-asp-button), .cta-affiliate-box a[rel*="sponsored"]:not(.cta-asp-button):not(.cta-affiliate-box__aspsub-link) { display: flex !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; text-align: center !important; line-height: 1.4 !important; } /* hover時もflexレイアウトを維持（v5側でtransform等は継承済みのため上書き不要） */ .cta-affiliate-box__desc a[rel*="sponsored"]:not(.cta-asp-button):hover, .cta-affiliate-box a[rel*="sponsored"]:not(.cta-asp-button):not(.cta-affiliate-box__aspsub-link):hover { width: 100% !important; } /* --- SP（〜639px）: 親コンテナ幅に追従して問題なく縮小・折り返すことを明示 --- */ @media (max-width: 639px) { .cta-affiliate-box__desc a[rel*="sponsored"]:not(.cta-asp-button), .cta-affiliate-box a[rel*="sponsored"]:not(.cta-asp-button):not(.cta-affiliate-box__aspsub-link) { width: 100% !important; padding: 12px 16px !important; } }