/*
Theme Name: RD2スタンダードテーマ
Theme URI: https://github.com/sgmr-factory/sgmr-news-std
Author: SGMR factory
Author URI: https://github.com/sgmr-factory
Description: RD2スタンダードテーマは、マテリアルデザイン3（M3）に完全準拠したモダンなWordPressブロックテーマ（フルサイト編集対応）です。
Version: 1.0.0build6
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sgmr-news-std
Tags: custom-colors, custom-logo, custom-menu, featured-images, full-site-editing, block-patterns, news, two-columns, responsive-layout, translation-ready
*/

/* ==========================================================================
   1. CSS Variables (Custom Properties)
   ========================================================================== */
/* --- Light Mode (Default) --- */
:root {
    color-scheme: light dark;

    &:has(> head > meta[name="color-scheme"][content="dark"]) {
        color-scheme: dark;
    }
    &:has(> head > meta[name="color-scheme"][content="light"]) {
        color-scheme: light;
    }

    /* Base Colors */
    --bg-body: #f8fafc;
    --text-main: #0f172a;
    --text-sub: #475569;
    --text-head: #0f172a;
    --link-color: #0ea5e9;
    
    /* Header & Navigation Colors */
    --header-bg-top: linear-gradient(90deg, #ffffff 0%, #0ea5e9 100%);
    --header-text-top: #0f172a;
    --header-bg-bottom: #ffffff;
    --header-text-bottom: #0f172a;
    --nav-link: #0f172a;
    --nav-pill-bg: rgba(14, 165, 233, 0.08);
    --nav-pill-border: rgba(14, 165, 233, 0.24);
    --nav-link-hover: #ffffff;
    --nav-hover-bg: #0ea5e9;
    --nav-hover-shadow: rgba(14, 165, 233, 0.4);
    
    /* Component Colors */
    --news-bg: #0ea5e9;
    --news-text: #ffffff;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.05);
    --card-hover-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.05);

    /* Footer Colors */
    --footer-bg: #0284c7;
    --footer-text: #ffffff;

    /* Theme Tokens (M3 Radius) */
    --m3-radius-m: 12px;
    --m3-radius-l: 16px;
    --m3-radius-xl: 24px;
    --m3-radius-full: 100px;
}

/* --- Dark Mode (Standard text color = White #ffffff, inverse of Light Mode) --- */
:root[data-theme="dark"],
html.is-dark,
body[data-theme="dark"],
body.is-dark {
    color-scheme: dark;

    /* WordPress Preset Colors Override */
    --wp--preset--color--base: #0a192f !important;
    --wp--preset--color--main: #ffffff !important;
    --wp--preset--color--sub: #e2e8f0 !important;
    --wp--preset--color--head: #ffffff !important;
    --wp--preset--color--accent: #64ffda !important;
    --wp--preset--color--card-bg: #112240 !important;
    --wp--preset--color--card-border: rgba(255, 255, 255, 0.16) !important;
    --wp--preset--color--white: #ffffff !important;
    
    /* Base Colors (Standard text color = pure white #ffffff) */
    --bg-body: #0a192f;
    --text-main: #ffffff;
    --text-sub: #e2e8f0;
    --text-head: #ffffff;
    --link-color: #64ffda;
    
    /* Header & Navigation Colors */
    --header-bg-top: linear-gradient(90deg, #0a192f 0%, #112240 100%);
    --header-text-top: #ffffff;
    --header-bg-bottom: #0d1f3a;
    --header-text-bottom: #ffffff;
    --nav-link: #ffffff;
    --nav-pill-bg: rgba(255, 255, 255, 0.1);
    --nav-pill-border: rgba(255, 255, 255, 0.24);
    --nav-link-hover: #0a192f;
    --nav-hover-bg: #64ffda;
    --nav-hover-shadow: rgba(100, 255, 218, 0.38);

    /* Component Colors */
    --news-bg: #112240;
    --news-text: #ffffff;
    --card-bg: #112240;
    --card-border: rgba(255, 255, 255, 0.16);
    
    /* Footer Colors */
    --footer-bg: #020c1b;
    --footer-text: #ffffff;
}

/* ==========================================================================
   2. Base & Reset
   ========================================================================== */
body {
    font-family: "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
}

body.is-dark,
html.is-dark body,
:root[data-theme="dark"] body {
    color: #ffffff !important;
}

body, p, h1, h2, h3, h4, h5, h6, a, span, div, li {
    word-break: break-word;
    overflow-wrap: break-word;
}

body:not(.is-dark) {
    background-image: radial-gradient(rgba(224,242,254,0.3) 1px, transparent 1px);
    background-size: 24px 24px;
    background-attachment: fixed;
}

a {
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    color: inherit;
}

/* ★アクセシビリティ強化 (M3 フォーカスリング) */
*:focus-visible {
    outline: 2px solid var(--link-color) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

img, iframe, video, figure, .wp-block-image, .wp-block-embed {
    max-width: 100% !important;
    height: auto;
}

.wp-block-embed iframe,
.wp-block-embed-youtube iframe,
.wp-block-embed-video iframe {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
}

/* ==========================================================================
   3. Layout Utilities
   ========================================================================== */
.d-main-content {
    flex: 1;
    width: 100%;
    padding-bottom: 60px;
}

.d-container {
    width: 100%;
    max-width: 1440px;
    min-width: 320px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.d-content-surface {
    background-color: var(--card-bg);
    border-radius: var(--m3-radius-xl);
    padding: 48px;
    box-shadow: var(--card-shadow);
    max-width: 1152px;
    min-width: 280px;
    margin: 0 auto;
    color: var(--text-main);
}

.d-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.d-front-main-area {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 60px;
    margin-bottom: 60px;
    align-items: start;
}

.d-front-main-column .d-content-surface {
    max-width: 100% !important;
    margin: 0 !important;
}

/* ==========================================================================
   4. Component Styles (Header, Navigation, Search, 3-Stage Dark Mode Toggle)
   ========================================================================== */

/* --- Header --- */
.d-header {
    position: sticky !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    gap: 0 !important;
}

body.admin-bar .d-header { top: 32px; }

.d-header > .wp-block-group {
    margin: 0 !important;
}

.d-header-top {
    background: var(--header-bg-top) !important;
    padding-top: 14px !important; 
    padding-bottom: 14px !important;
    color: var(--header-text-top) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.d-header-bottom {
    background: var(--header-bg-bottom) !important;
    padding-top: 10px !important; 
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--card-border);
}

/* ★ヘッダー左右配置・Gutenberg自動マージンによる縦ズレ完全防止 */
.d-header-top .d-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
}

.d-header-logo-group {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    min-width: 0;
}

.d-header-title-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.d-header-title-group .wp-block-site-title {
    font-size: 1.5rem !important;
    font-weight: 800;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: var(--header-text-top) !important;
}

.d-header-title-group .wp-block-site-tagline {
    font-size: 0.8rem !important;
    margin: 0 !important;
    opacity: 0.9 !important;
    color: var(--header-text-top) !important;
}

.d-header-right-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
}

/* Reset Gutenberg is-layout-flow / block-gap vertical margins inside Header (Site Editorカスタム構成にも完全対応) */
.d-header-top .wp-block-group,
.d-header-top .wp-block-columns,
.d-header-top .wp-block-column,
.d-header-top .is-layout-flex {
    align-items: center !important;
}

.d-header-top .d-container > *,
.d-header-logo-group > *,
.d-header-right-group > *,
.d-header-top .wp-block-search,
.d-header-top .wp-block-search__inside-wrapper,
.d-header-top .d-dark-mode-toggle,
.d-header-top p,
.d-header-logo-group .wp-block-site-logo,
.d-header-logo-group .wp-block-image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    align-self: center !important;
}

.d-header-top .wp-block-search__label:empty,
.d-m3-search .wp-block-search__label:empty {
    display: none !important;
}

.d-header-bottom .d-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
}

/* --- M3 Header Navigation Menu & Submenu Dropdown (Light/Dark Mode Full Support) --- */
.d-header-nav ul.wp-block-navigation__container {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Top-level Navigation Pill Container (Unifies Link + Submenu Chevron Toggle into a single pill) */
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    background-color: var(--nav-pill-bg) !important;
    border: 1px solid var(--nav-pill-border) !important;
    border-radius: var(--m3-radius-full) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item > a,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    background-color: transparent !important;
    border: none !important;
    padding: 0 22px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--m3-radius-full) !important;
    text-decoration: none !important;
    outline: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* When top-level item has a submenu dropdown, tighten right padding on link and tuck chevron button inside the pill */
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > a,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    padding: 0 6px 0 20px !important;
}

.d-header-nav .wp-block-navigation__submenu-icon,
.d-header-nav .wp-block-navigation-submenu__toggle {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 14px 0 4px !important;
    margin: 0 !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 var(--m3-radius-full) var(--m3-radius-full) 0 !important;
    color: var(--nav-link) !important;
    cursor: pointer !important;
}

.d-header-nav .wp-block-navigation__submenu-icon svg {
    width: 12px !important;
    height: 12px !important;
    stroke: currentColor !important;
    fill: none !important;
    transition: transform 0.2s ease !important;
}

.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item > a,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item > a *,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item > button,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item > button * {
    color: var(--nav-link) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.02em;
    transition: color 0.2s ease !important;
}

/* Top-level Hover / Active / Current-Menu-Item State */
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:hover,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item {
    background-color: var(--nav-hover-bg) !important;
    border-color: var(--nav-hover-bg) !important;
    box-shadow: 0 4px 14px -2px var(--nav-hover-shadow) !important;
    transform: translateY(-1px);
}

.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > a,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > a *,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > button,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > button *,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > a,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > a *,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > button,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > button *,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > a,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > a *,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > button,
.d-header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > button * {
    color: var(--nav-link-hover) !important;
}

/* --- Submenu Dropdown Container (Overrides WP Core white background in Dark Mode) --- */
.d-header-nav .wp-block-navigation__submenu-container,
.wp-block-navigation.d-header-nav:not(.has-background) .wp-block-navigation__submenu-container {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 16px !important;
    padding: 8px !important;
    min-width: 220px !important;
    box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
    z-index: 10002 !important;
    margin-top: 6px !important;
}

body.is-dark .d-header-nav .wp-block-navigation__submenu-container,
html.is-dark .d-header-nav .wp-block-navigation__submenu-container,
:root[data-theme="dark"] .d-header-nav .wp-block-navigation__submenu-container,
body.is-dark .wp-block-navigation.d-header-nav:not(.has-background) .wp-block-navigation__submenu-container,
html.is-dark .wp-block-navigation.d-header-nav:not(.has-background) .wp-block-navigation__submenu-container {
    background-color: #112240 !important;
    color: #ffffff !important;
    border: 1px solid rgba(100, 255, 218, 0.4) !important;
    box-shadow: 0 18px 40px -4px rgba(2, 12, 27, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0 0 2px 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
    margin-bottom: 0 !important;
}

.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a * {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

body.is-dark .d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a,
body.is-dark .d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a *,
html.is-dark .d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a,
html.is-dark .d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a * {
    color: #ffffff !important;
}

.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:focus-visible,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > a {
    background-color: var(--nav-hover-bg) !important;
    transform: translateX(2px) !important;
}

.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover *,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:focus-visible,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:focus-visible *,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > a,
.d-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > a * {
    color: var(--nav-link-hover) !important;
}

/* Mobile Responsive Navigation Overlay in Dark Mode */
body.is-dark .d-header-nav .wp-block-navigation__responsive-container.is-menu-open,
html.is-dark .d-header-nav .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #0a192f !important;
    color: #ffffff !important;
}

/* --- M3 Search Bar --- */
.d-m3-search {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.d-m3-search .wp-block-search__inside-wrapper {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.d-m3-search .wp-block-search__input {
    border-radius: 999px !important; 
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.92) !important; 
    padding: 0 18px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 14px;
    color: #0f172a !important;
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.d-m3-search .wp-block-search__input:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px var(--link-color) !important;
    outline: none !important;
}

.d-m3-search .wp-block-search__button {
    border-radius: var(--m3-radius-full) !important;
    border: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    margin: 0 0 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.d-m3-search .wp-block-search__button:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
    opacity: 0.96;
}

body.is-dark .d-m3-search .wp-block-search__input,
html.is-dark .d-m3-search .wp-block-search__input {
    background-color: rgba(10, 25, 47, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
body.is-dark .d-m3-search .wp-block-search__input::placeholder,
html.is-dark .d-m3-search .wp-block-search__input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}
body.is-dark .d-m3-search .wp-block-search__input:focus,
html.is-dark .d-m3-search .wp-block-search__input:focus {
    background-color: #0a192f !important;
    border-color: #64ffda !important;
}
body.is-dark .d-m3-search .wp-block-search__button,
html.is-dark .d-m3-search .wp-block-search__button {
    background-color: #64ffda !important;
    color: #0a192f !important;
    font-weight: 800;
}

/* --- 3-Stage Dark Mode Toggle (Light / PC連動 System / Dark) --- */
.d-dark-mode-toggle {
    background: rgba(15, 23, 42, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 4px !important;
    margin: 0 !important;
    cursor: pointer !important;
    outline: none;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 10000;
    width: 98px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
    vertical-align: middle;
}

.d-dark-mode-toggle:hover {
    background: rgba(15, 23, 42, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

body.is-dark .d-dark-mode-toggle,
html.is-dark .d-dark-mode-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

body.is-dark .d-dark-mode-toggle:hover,
html.is-dark .d-dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: #64ffda !important;
}

.d-toggle-track {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.d-toggle-handle {
    position: absolute !important;
    height: 30px !important;
    width: 29px !important;
    left: 29px !important;
    top: 50% !important;
    margin-top: -15px !important;
    background-color: #ffffff !important;
    border-radius: 999px !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.28s ease !important;
    z-index: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    pointer-events: none;
    transform: translateX(0) !important;
}

body.is-dark .d-toggle-handle,
html.is-dark .d-toggle-handle {
    background-color: #64ffda !important;
}

/* 3-Stage Handle Positions: light (left: 0px) / system (left: 29px) / dark (left: 59px)
   html[data-theme-mode] と button[data-current-mode] の双方で連動し確実にスライド */
html[data-theme-mode="light"] .d-dark-mode-toggle .d-toggle-handle,
body[data-theme-mode="light"] .d-dark-mode-toggle .d-toggle-handle,
.d-dark-mode-toggle[data-current-mode="light"] .d-toggle-handle {
    left: 0px !important;
    transform: translateX(0) !important;
}

html[data-theme-mode="system"] .d-dark-mode-toggle .d-toggle-handle,
body[data-theme-mode="system"] .d-dark-mode-toggle .d-toggle-handle,
.d-dark-mode-toggle[data-current-mode="system"] .d-toggle-handle {
    left: 29px !important;
    transform: translateX(0) !important;
}

html[data-theme-mode="dark"] .d-dark-mode-toggle .d-toggle-handle,
body[data-theme-mode="dark"] .d-dark-mode-toggle .d-toggle-handle,
.d-dark-mode-toggle[data-current-mode="dark"] .d-toggle-handle {
    left: 59px !important;
    transform: translateX(0) !important;
}

.d-toggle-item {
    width: 29px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    transition: color 0.25s ease, transform 0.2s ease !important;
    pointer-events: auto;
}

.d-toggle-item svg {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
}

/* Active Icon Highlight inside Handle */
html[data-theme-mode="light"] .d-dark-mode-toggle .icon-sun,
.d-dark-mode-toggle[data-current-mode="light"] .icon-sun {
    color: #f59e0b !important;
}
html[data-theme-mode="system"] .d-dark-mode-toggle .icon-system,
.d-dark-mode-toggle[data-current-mode="system"] .icon-system {
    color: #0284c7 !important;
}
html[data-theme-mode="dark"] .d-dark-mode-toggle .icon-moon,
.d-dark-mode-toggle[data-current-mode="dark"] .icon-moon {
    color: #0a192f !important;
}
body.is-dark .d-dark-mode-toggle[data-current-mode="system"] .icon-system,
html.is-dark[data-theme-mode="system"] .d-dark-mode-toggle .icon-system,
html.is-dark .d-dark-mode-toggle[data-current-mode="system"] .icon-system {
    color: #0a192f !important;
}
body.is-dark .d-dark-mode-toggle[data-current-mode="light"] .icon-sun,
html.is-dark .d-dark-mode-toggle[data-current-mode="light"] .icon-sun {
    color: #0a192f !important;
}

/* --- Footer --- */
.d-footer { 
    background: var(--footer-bg); color: var(--footer-text);
    padding: 60px 0 40px; margin-top: auto;
    border-top-left-radius: var(--m3-radius-xl); border-top-right-radius: var(--m3-radius-xl);
    transition: background-color 0.3s;
}

.d-footer-nav {
    margin-bottom: 32px;
}

.d-footer-nav ul.wp-block-navigation__container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.d-footer-nav .wp-block-navigation-item > a,
.d-footer-nav .wp-block-navigation-item > a * {
    color: var(--footer-text) !important;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease, opacity 0.2s ease !important;
    text-decoration: none !important;
}

.d-footer-nav .wp-block-navigation-item > a:hover,
.d-footer-nav .wp-block-navigation-item > a:focus-visible {
    opacity: 0.7;
    text-decoration: underline !important;
}

/* ==========================================================================
   5. Block Editor Fixes & Clean Structure (M3 Components)
   ========================================================================== */
.d-post-thumb img {
    border-radius: var(--m3-radius-m);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

/* ★高密度レイアウト & カード間隔の適正化 (AdSense自動広告の横はみ出し・サイズ誤判定を防止) */
.d-news-item-card {
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    border: 1px solid var(--card-border);
    border-radius: var(--m3-radius-m);
    background-color: var(--card-bg);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}
.d-news-item-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-2px);
}
.d-news-item-columns {
    display: flex;
    align-items: stretch;
    gap: 18px !important;
}
.d-news-item-title {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    margin: 0 0 10px 0 !important;
    color: var(--text-head) !important;
}
.d-news-item-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 !important;
    gap: 10px;
    margin-top: auto !important;
}
.d-news-item-date {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-sub);
    margin: 0;
}

/* ★「記事を読む」ボタン (カッコいいM3ピルボタン・矢印アニメーション付)
   WordPress core/read-more は <a class="wp-block-read-more d-m3-read-more"> を直接出力するため両方に対応 */
a.d-m3-read-more,
.wp-block-read-more.d-m3-read-more,
.d-m3-read-more a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 7px 18px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    line-height: 1.2 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--m3-radius-full) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease !important;
    text-decoration: none !important;
}

a.d-m3-read-more::after,
.wp-block-read-more.d-m3-read-more::after,
.d-m3-read-more a::after {
    content: "→";
    display: inline-block;
    font-weight: 800;
    transition: transform 0.2s ease;
}

a.d-m3-read-more:hover,
.wp-block-read-more.d-m3-read-more:hover,
.d-m3-read-more a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.42) !important;
    filter: brightness(1.05);
}

a.d-m3-read-more:hover::after,
.wp-block-read-more.d-m3-read-more:hover::after,
.d-m3-read-more a:hover::after {
    transform: translateX(3px);
}

body.is-dark a.d-m3-read-more,
body.is-dark .wp-block-read-more.d-m3-read-more,
body.is-dark .d-m3-read-more a,
html.is-dark a.d-m3-read-more,
html.is-dark .wp-block-read-more.d-m3-read-more,
html.is-dark .d-m3-read-more a {
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.16) 0%, rgba(14, 165, 233, 0.28) 100%) !important;
    border: 1px solid rgba(100, 255, 218, 0.6) !important;
    color: #64ffda !important;
    box-shadow: 0 4px 14px rgba(100, 255, 218, 0.15) !important;
}

body.is-dark a.d-m3-read-more:hover,
body.is-dark .wp-block-read-more.d-m3-read-more:hover,
body.is-dark .d-m3-read-more a:hover,
html.is-dark a.d-m3-read-more:hover,
html.is-dark .wp-block-read-more.d-m3-read-more:hover,
html.is-dark .d-m3-read-more a:hover {
    background: linear-gradient(135deg, #64ffda 0%, #38bdf8 100%) !important;
    border-color: #64ffda !important;
    color: #0a192f !important;
    box-shadow: 0 6px 18px rgba(100, 255, 218, 0.4) !important;
}

.d-archive-link-wrap { margin-top: 24px !important; }
.d-archive-link { font-size: 1.1rem; font-weight: 700; color: var(--text-main); transition: color 0.2s; }
.d-archive-link:hover { color: var(--link-color); }

.d-news-archive-card { padding: 32px !important; margin-bottom: 32px !important; border: 1px solid var(--card-border); border-radius: var(--m3-radius-l); background-color: var(--card-bg); transition: box-shadow 0.3s ease; overflow: hidden; }
.d-news-archive-card:hover { box-shadow: var(--card-shadow); }
.d-archive-item-title { font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 12px 0 !important; color: var(--text-head) !important; }
.d-archive-item-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 16px 0 !important; }
.d-archive-item-meta .wp-block-post-date { font-size: 0.85rem; font-weight: 500; color: var(--text-sub); margin: 0; }
.d-archive-item-excerpt { font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--text-main) !important; margin: 0 !important; }

/* ==========================================================================
   6. Parts Utilities 
   ========================================================================== */
.d-header-banner {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.d-header-banner img {
    width: auto !important;
    max-height: 64px !important;
    height: auto !important;
    border-radius: 8px;
    display: block;
}

.d-sidebar-container { border-radius: var(--m3-radius-l) !important; padding: 32px !important; display: flex; flex-direction: column; gap: 40px !important; box-shadow: var(--card-shadow); }
.d-sidebar-search input { border-radius: 28px !important; }
.d-sidebar-section { display: flex; flex-direction: column; gap: 16px !important; }
.d-sidebar-title { font-size: 1.2rem !important; font-weight: 700 !important; margin: 0 !important; color: var(--text-head); }

.d-news-list { margin: 0 !important; padding-left: 0 !important; }
.d-news-item { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px !important; padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.d-news-item:last-child { border-bottom: none; }
.d-news-item-date-text { font-size: 0.9rem !important; font-weight: 500 !important; line-height: 1 !important; margin: 0 !important; color: var(--text-sub); }
.d-news-item-title-text { font-size: 1rem !important; line-height: 1.4 !important; margin: 0 !important; color: var(--text-main); }
.d-news-section-link-wrap { margin-top: 16px !important; display: flex; justify-content: flex-end; }
.d-news-section-link-wrap p { font-size: 0.9rem !important; margin: 0 !important; }

/* ==========================================================================
   7. M3 & Magazine Editorial Article Design (雑誌風・高可読性レイアウト)
   ========================================================================== */
.d-m3-headline-large {
    font-size: clamp(1.85rem, 4.2vw, 2.45rem) !important;
    font-weight: 800 !important;
    line-height: 1.38 !important;
    color: var(--text-head) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}

/* ★「最新記事」などのセクション見出しと下のカード箱の間に明確な余白を確保 (.d-m3-headline-large の margin:0 を確実に上書き) */
.d-section-title,
.d-section-title.d-m3-headline-large,
h2.d-section-title {
    font-size: clamp(1.55rem, 4vw, 1.9rem) !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
    margin-bottom: 28px !important;
    margin-block-end: 28px !important;
    color: var(--text-head) !important;
}

.d-section-title + .wp-block-query {
    margin-top: 24px !important;
    margin-block-start: 24px !important;
}

.d-archive-page-title,
.d-archive-page-title.d-m3-headline-large,
h1.d-archive-page-title {
    font-size: clamp(1.8rem, 5vw, 2.2rem) !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
    margin-bottom: 36px !important;
    margin-block-end: 36px !important;
    color: var(--text-head) !important;
}

/* --- Magazine Article Container & Editorial Header (キャッチ画像→タイトル横並び＋セパレートデザインライン) --- */
.d-magazine-article {
    border-top: 5px solid var(--link-color) !important;
    border-left: 1px solid var(--card-border);
    border-right: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    padding: 52px 56px !important;
    position: relative;
}

/* 1) デフォルト状態 (アイキャッチ画像がない場合は1カラム) */
.d-magazine-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative !important;
    padding-bottom: 28px !important;
    margin-bottom: 36px !important;
    border-bottom: 2px solid var(--card-border) !important;
}

/* 2) Content-Based Styling (:has): アイキャッチ画像がある場合は「左：キャッチ画像 → 右：タイトル」の2カラム横並び */
.d-magazine-header:has(.d-magazine-hero img) {
    display: grid !important;
    grid-template-columns: minmax(220px, 38%) minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: center !important;
}

/* アイキャッチ画像が空の場合はラッパーを非表示 */
.d-magazine-header .d-magazine-hero:not(:has(img)),
.d-magazine-article > .d-magazine-hero:not(:has(img)) {
    display: none !important;
}

/* :has() 非対応ブラウザ向けフォールバック */
@supports not selector(:has(*)) {
    .d-magazine-header.has-image {
        display: grid !important;
        grid-template-columns: minmax(220px, 38%) minmax(0, 1fr) !important;
        gap: 28px !important;
        align-items: center !important;
    }
}

.d-magazine-header-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 !important;
}

/* ★セパレートするデザインライン (ヘッダーユニット下部の2トーン発光アクセントライン＋ジオメトリックモチーフ) */
.d-magazine-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 140px;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--link-color) 0%, #38bdf8 100%);
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35);
}

.d-magazine-header::before {
    content: "";
    position: absolute;
    left: 148px;
    bottom: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--link-color);
    box-shadow: 12px 0 0 rgba(14, 165, 233, 0.45);
}

body.is-dark .d-magazine-header::after,
html.is-dark .d-magazine-header::after {
    background: linear-gradient(90deg, #64ffda 0%, #38bdf8 100%);
    box-shadow: 0 0 12px rgba(100, 255, 218, 0.4);
}

body.is-dark .d-magazine-header::before,
html.is-dark .d-magazine-header::before {
    background-color: #64ffda;
    box-shadow: 12px 0 0 rgba(56, 189, 248, 0.55);
}

/* 3) サイトエディター等で旧構造 (.d-magazine-article > .d-magazine-header + .d-magazine-hero) が保存されている場合の自動2カラム変換 */
.d-magazine-article:has(> .d-magazine-hero img) {
    display: grid !important;
    grid-template-columns: minmax(220px, 38%) minmax(0, 1fr) !important;
    column-gap: 28px !important;
}

.d-magazine-article:has(> .d-magazine-hero img) > * {
    grid-column: 1 / -1;
}

.d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-hero {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: center !important;
}

.d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-header {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    align-self: center !important;
}

.d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-header::before,
.d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-header::after {
    display: none !important;
}

.d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-body {
    margin-top: 28px !important;
    padding-top: 36px !important;
    border-top: 2px solid var(--card-border) !important;
    position: relative !important;
}

.d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-body::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 140px;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--link-color) 0%, #38bdf8 100%);
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35);
}

.d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-body::before {
    content: "";
    position: absolute;
    left: 148px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--link-color);
    box-shadow: 12px 0 0 rgba(14, 165, 233, 0.45);
}

body.is-dark .d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-body::after,
html.is-dark .d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-body::after {
    background: linear-gradient(90deg, #64ffda 0%, #38bdf8 100%);
    box-shadow: 0 0 12px rgba(100, 255, 218, 0.4);
}

body.is-dark .d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-body::before,
html.is-dark .d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-body::before {
    background-color: #64ffda;
    box-shadow: 12px 0 0 rgba(56, 189, 248, 0.55);
}

.d-m3-meta-chips,
.d-magazine-kicker {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

.d-magazine-kicker::after {
    content: "";
    flex: 1 1 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--card-border) 0%, transparent 100%);
    margin-left: 6px;
}

.d-m3-meta-chips .wp-block-post-date,
.d-magazine-date {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    color: var(--text-sub) !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.d-magazine-date::before {
    content: "PUBLISHED";
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    background-color: rgba(14, 165, 233, 0.12);
    color: var(--link-color);
}
body.is-dark .d-magazine-date::before,
html.is-dark .d-magazine-date::before {
    background-color: rgba(100, 255, 218, 0.14);
    color: #64ffda;
}

.d-m3-meta-chips .wp-block-post-terms a,
.d-m3-post-footer .wp-block-post-terms a,
.d-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    background-color: var(--bg-body);
    color: var(--text-main);
    border-radius: var(--m3-radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
    border: 1px solid var(--card-border);
}

.d-magazine-cat a {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
    letter-spacing: 0.03em;
}
body.is-dark .d-magazine-cat a,
html.is-dark .d-magazine-cat a {
    background: linear-gradient(135deg, #64ffda 0%, #38bdf8 100%) !important;
    color: #0a192f !important;
    font-weight: 800 !important;
}

.d-m3-meta-chips .wp-block-post-terms a:hover,
.d-m3-post-footer .wp-block-post-terms a:hover,
.d-chip:hover {
    background-color: var(--nav-hover-bg);
    color: var(--nav-link-hover);
    border-color: var(--nav-hover-bg);
    transform: translateY(-1px);
}

.d-magazine-title,
h1.d-magazine-title {
    font-size: clamp(1.38rem, 2.5vw, 1.88rem) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    position: relative !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.d-magazine-title::after,
h1.d-magazine-title::after {
    display: none !important;
    content: none !important;
}

.d-m3-hero-image,
.d-magazine-hero {
    margin: 28px 0 40px 0;
}

.d-magazine-header .d-magazine-hero {
    margin: 0 !important;
    width: 100%;
}

.d-m3-hero-image img,
.d-magazine-hero img {
    border-radius: var(--m3-radius-m);
    border: 1px solid var(--card-border);
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.2);
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

body.is-dark .d-magazine-hero img,
html.is-dark .d-magazine-hero img {
    box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.5);
    border-color: rgba(100, 255, 218, 0.22);
}

/* --- Magazine Body Typography (雑誌のような読みやすい組版・余白・見出し装飾) --- */
.d-m3-body-content,
.d-magazine-body {
    font-size: 1.06rem;
    line-height: 1.95;
    letter-spacing: 0.025em;
    color: var(--text-main) !important;
}

/* 記事冒頭リード段落（第1段落）の雑誌風強調 */
.d-magazine-body > p:first-of-type {
    font-size: 1.1rem;
    line-height: 1.95;
    font-weight: 500;
    padding: 18px 22px;
    margin-bottom: 2.2rem;
    background-color: rgba(14, 165, 233, 0.04);
    border-left: 3px solid var(--link-color);
    border-radius: 0 var(--m3-radius-m) var(--m3-radius-m) 0;
}
body.is-dark .d-magazine-body > p:first-of-type,
html.is-dark .d-magazine-body > p:first-of-type {
    background-color: rgba(255, 255, 255, 0.04);
}

/* ★本文見出しの雑誌エディトリアル装飾 (H2・本文内H1: リボンアクセントボックス / H3: 左ピル＋2トーン下線 / H4: ブラケット強調) */
:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h1, h2):not(.wp-block-post-title):not(.d-magazine-title),
.wp-block-heading.is-style-rd2-ribbon-box {
    position: relative !important;
    font-size: clamp(1.32rem, 2.8vw, 1.58rem) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.015em;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    padding: 15px 22px !important;
    color: var(--text-head) !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0.03) 100%) !important;
    border-top: 1px solid rgba(14, 165, 233, 0.22) !important;
    border-right: 1px solid rgba(14, 165, 233, 0.22) !important;
    border-bottom: 2px solid rgba(14, 165, 233, 0.28) !important;
    border-left: 6px solid var(--link-color) !important;
    border-radius: 4px 12px 12px 4px !important;
    box-shadow: 0 6px 18px -6px rgba(14, 165, 233, 0.16) !important;
}

:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h1, h2):not(.wp-block-post-title):not(.d-magazine-title)::after,
.wp-block-heading.is-style-rd2-ribbon-box::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--link-color) 0%, #38bdf8 100%);
}

body.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h1, h2):not(.wp-block-post-title):not(.d-magazine-title),
html.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h1, h2):not(.wp-block-post-title):not(.d-magazine-title),
body.is-dark .wp-block-heading.is-style-rd2-ribbon-box,
html.is-dark .wp-block-heading.is-style-rd2-ribbon-box {
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.18) 0%, rgba(56, 189, 248, 0.04) 100%) !important;
    border-top-color: rgba(100, 255, 218, 0.28) !important;
    border-right-color: rgba(100, 255, 218, 0.28) !important;
    border-bottom-color: rgba(100, 255, 218, 0.35) !important;
    border-left-color: #64ffda !important;
    box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.45) !important;
}

body.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h1, h2):not(.wp-block-post-title):not(.d-magazine-title)::after,
html.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h1, h2):not(.wp-block-post-title):not(.d-magazine-title)::after,
body.is-dark .wp-block-heading.is-style-rd2-ribbon-box::after,
html.is-dark .wp-block-heading.is-style-rd2-ribbon-box::after {
    background: linear-gradient(90deg, #64ffda 0%, #38bdf8 100%);
}

:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h3,
.wp-block-heading.is-style-rd2-double-line {
    position: relative !important;
    font-size: clamp(1.16rem, 2.4vw, 1.35rem) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.2rem !important;
    padding: 8px 8px 12px 18px !important;
    color: var(--text-head) !important;
    border-bottom: 2px solid var(--card-border) !important;
}

:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h3::before,
.wp-block-heading.is-style-rd2-double-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 14px;
    width: 5px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--link-color) 0%, #38bdf8 100%);
}

:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h3::after,
.wp-block-heading.is-style-rd2-double-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 76px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--link-color) 0%, #38bdf8 100%);
}

body.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h3::before,
html.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h3::before,
body.is-dark .wp-block-heading.is-style-rd2-double-line::before,
html.is-dark .wp-block-heading.is-style-rd2-double-line::before {
    background: linear-gradient(180deg, #64ffda 0%, #38bdf8 100%);
}

body.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h3::after,
html.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h3::after,
body.is-dark .wp-block-heading.is-style-rd2-double-line::after,
html.is-dark .wp-block-heading.is-style-rd2-double-line::after {
    background: linear-gradient(90deg, #64ffda 0%, #38bdf8 100%);
}

:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h4,
.wp-block-heading.is-style-rd2-bracket {
    position: relative !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    padding: 10px 16px !important;
    border-left: 4px solid var(--link-color) !important;
    background-color: rgba(14, 165, 233, 0.08) !important;
    border-radius: 0 8px 8px 0 !important;
    color: var(--text-head) !important;
}

body.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h4,
html.is-dark :is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) h4,
body.is-dark .wp-block-heading.is-style-rd2-bracket,
html.is-dark .wp-block-heading.is-style-rd2-bracket {
    background-color: rgba(100, 255, 218, 0.1) !important;
    border-left-color: #64ffda !important;
}

:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h5, h6) {
    position: relative !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-top: 1.6rem !important;
    margin-bottom: 0.75rem !important;
    padding-left: 18px !important;
    color: var(--text-head) !important;
}

:is(.d-m3-body-content, .d-magazine-body, .wp-block-post-content) :is(h5, h6)::before {
    content: "◆";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--link-color);
    font-size: 0.8em;
}

.d-m3-body-content p,
.d-m3-body-content li {
    color: var(--text-main);
}
.d-m3-body-content p {
    margin-bottom: 1.75rem;
}

/* ★LIQUID SPEECH BALLOON (吹き出しプラグイン) ダークモード完全対応
   吹き出し本体 (.liquid-speech-balloon-text) は白背景 (#fff) のため、ダークモード時でも内部テキストを濃色 (#0f172a) に固定し、
   アバター下の話者名 (.liquid-speech-balloon-avatar) は背景に合わせて白文字 (#ffffff) で表示 */
.liquid-speech-balloon-text,
.liquid-speech-balloon-text p:not(.has-text-color):not([style*="color"]),
.liquid-speech-balloon-text span:not(.has-text-color):not([style*="color"]),
.liquid-speech-balloon-text div:not(.has-text-color):not([style*="color"]),
.liquid-speech-balloon-text li:not(.has-text-color):not([style*="color"]),
[class*="liquid-speech-balloon"] .liquid-speech-balloon-text,
[class*="liquid-speech-balloon"] .liquid-speech-balloon-text p:not(.has-text-color):not([style*="color"]) {
    color: #0f172a !important;
}

.liquid-speech-balloon-text a:not(.wp-block-button__link) {
    color: #0284c7 !important;
}

.liquid-speech-balloon-text p:last-child {
    margin-bottom: 0 !important;
}

body.is-dark .liquid-speech-balloon-avatar,
body.is-dark .liquid-speech-balloon-avatar *,
body.is-dark .liquid-speech-balloon-avatar::after,
html.is-dark .liquid-speech-balloon-avatar,
html.is-dark .liquid-speech-balloon-avatar *,
html.is-dark .liquid-speech-balloon-avatar::after {
    color: #ffffff !important;
}

/* ★記事内要素の雑誌風デザイン最適化 (リンク、プルクオート引用、サマリー枠リスト、テーブル) */
.d-m3-body-content a:not(.wp-block-button__link) {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(14, 165, 233, 0.4);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}
.d-m3-body-content a:not(.wp-block-button__link):hover {
    text-decoration-color: var(--link-color);
}

.d-m3-body-content blockquote {
    position: relative;
    border-left: 4px solid var(--link-color);
    margin: 2.2rem 0;
    padding: 1.6rem 1.8rem 1.6rem 3rem;
    background-color: rgba(14, 165, 233, 0.06);
    border-top: 1px solid var(--card-border);
    border-right: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    border-radius: 0 var(--m3-radius-m) var(--m3-radius-m) 0;
    color: var(--text-main) !important;
    font-style: normal;
    font-weight: 500;
}
.d-m3-body-content blockquote::before {
    content: "“";
    position: absolute;
    left: 12px;
    top: 6px;
    font-size: 2.6rem;
    line-height: 1;
    font-family: Georgia, serif;
    color: var(--link-color);
    opacity: 0.55;
}
body.is-dark .d-m3-body-content blockquote,
html.is-dark .d-m3-body-content blockquote {
    background-color: rgba(100, 255, 218, 0.07);
    color: #ffffff !important;
}

.d-m3-body-content > ul,
.d-m3-body-content > ol,
.d-m3-body-content > ul.wp-block-list,
.d-m3-body-content > ol.wp-block-list {
    margin: 1.8rem 0;
    padding: 20px 24px 20px 44px;
    background-color: var(--bg-body);
    border: 1px solid var(--card-border);
    border-radius: var(--m3-radius-m);
}
body.is-dark .d-m3-body-content > ul,
body.is-dark .d-m3-body-content > ol,
html.is-dark .d-m3-body-content > ul,
html.is-dark .d-m3-body-content > ol {
    background-color: rgba(255, 255, 255, 0.03);
}

.d-m3-body-content ul, ul.wp-block-list {
    list-style-type: disc;
}
.d-m3-body-content ol, ol.wp-block-list {
    list-style-type: decimal;
}
.d-m3-body-content ul ul, .d-m3-body-content ol ol, .d-m3-body-content ul ol, .d-m3-body-content ol ul, ul.wp-block-list ul, ol.wp-block-list ol {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-left: 1.5rem;
}
.d-m3-body-content ul ul, ul.wp-block-list ul {
    list-style-type: circle;
}
.d-m3-body-content ul ul ul, ul.wp-block-list ul ul {
    list-style-type: square;
}
.d-m3-body-content li, ul.wp-block-list li, ol.wp-block-list li {
    margin-bottom: 0.65rem;
    line-height: 1.8;
}
.d-m3-body-content li:last-child {
    margin-bottom: 0;
}
.d-m3-body-content li::marker {
    color: var(--link-color);
    font-weight: 700;
}

.d-m3-body-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
    border: 1px solid var(--card-border);
    border-radius: var(--m3-radius-m);
    overflow: hidden;
}
.d-m3-body-content th,
.d-m3-body-content td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border);
    text-align: left;
}
.d-m3-body-content th {
    background-color: rgba(14, 165, 233, 0.08);
    color: var(--text-head);
    font-weight: 700;
}
body.is-dark .d-m3-body-content th,
html.is-dark .d-m3-body-content th {
    background-color: rgba(255, 255, 255, 0.06);
}

/* --- Magazine Footer Tags & Prev/Next Post Navigation --- */
.d-magazine-footer {
    margin-top: 32px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--card-border);
}

.d-magazine-footer .wp-block-post-terms__prefix {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-sub);
    margin-right: 8px;
}

.d-magazine-post-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--card-border);
}

.d-magazine-post-nav .wp-block-post-navigation-link a {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 16px 20px !important;
    background-color: var(--bg-body) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--m3-radius-m) !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: 100%;
    box-sizing: border-box;
}

.d-magazine-post-nav .wp-block-post-navigation-link a:hover {
    border-color: var(--link-color) !important;
    transform: translateY(-2px);
    box-shadow: var(--card-shadow);
}

.d-magazine-nav-next a {
    text-align: right !important;
    align-items: flex-end !important;
}

.d-magazine-post-nav .post-navigation-link__label {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    color: var(--link-color) !important;
}

.d-magazine-post-nav .post-navigation-link__title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: var(--text-head) !important;
}

/* ★SNS共有バー (M3 Tonal Share Buttons) */
.d-sns-share-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 16px 20px;
    margin-top: 28px;
    background-color: var(--bg-body);
    border: 1px solid var(--card-border);
    border-radius: var(--m3-radius-m);
}
.d-sns-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--m3-radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    background-color: var(--card-bg);
    color: var(--text-main) !important;
    border: 1px solid var(--card-border);
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.d-sns-share-btn:hover {
    background-color: var(--nav-hover-bg);
    color: var(--nav-link-hover) !important;
    border-color: var(--nav-hover-bg);
    transform: translateY(-1px);
}

/* ==========================================================================
   8. M3 Pagination 
   ========================================================================== */
.d-m3-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.d-m3-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--m3-radius-full);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    background-color: var(--bg-body);
    border: 1px solid var(--card-border);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.d-m3-pagination a.page-numbers:hover {
    background-color: var(--nav-hover-bg);
    color: var(--nav-link-hover);
    border-color: var(--nav-hover-bg);
    box-shadow: 0 2px 8px var(--nav-hover-shadow);
    transform: translateY(-1px);
}

.d-m3-pagination span.current {
    background-color: var(--link-color);
    color: #ffffff;
    border-color: var(--link-color);
    box-shadow: 0 2px 8px var(--nav-hover-shadow);
}
body.is-dark .d-m3-pagination span.current, html.is-dark .d-m3-pagination span.current {
    color: #0a192f;
}

.d-m3-pagination .wp-block-query-pagination-previous,
.d-m3-pagination .wp-block-query-pagination-next {
    background-color: transparent;
    border-color: transparent;
    color: var(--link-color);
}

.d-m3-pagination .wp-block-query-pagination-previous:hover,
.d-m3-pagination .wp-block-query-pagination-next:hover {
    background-color: rgba(14, 165, 233, 0.1);
    color: var(--link-color);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

body.is-dark .d-m3-pagination .wp-block-query-pagination-previous:hover,
body.is-dark .d-m3-pagination .wp-block-query-pagination-next:hover,
html.is-dark .d-m3-pagination .wp-block-query-pagination-previous:hover,
html.is-dark .d-m3-pagination .wp-block-query-pagination-next:hover {
    background-color: rgba(100, 255, 218, 0.1);
}

/* ==========================================================================
   9. Google AdSense Auto-Ads Layout Protection (★強化: 自動広告によるレイアウト崩壊・横はみ出し防止)
   ========================================================================== */
/* 1) ヘッダー・ナビゲーション・カード内部(Flex行)・メタ行への自動広告割り込みを完全ブロック */
.d-header > div:not(.d-header-top):not(.d-header-bottom),
.d-header .google-auto-placed,
.d-header ins.adsbygoogle,
.d-header iframe[name^="google_ads_iframe"],
.d-header + .google-auto-placed,
.d-header + ins.adsbygoogle,
.d-header + div > .google-auto-placed,
.d-header-nav .google-auto-placed,
.d-header-nav ins.adsbygoogle,
.d-news-item-card .google-auto-placed,
.d-news-item-card ins.adsbygoogle,
.d-news-item-columns > .google-auto-placed,
.d-news-item-meta .google-auto-placed,
.d-magazine-kicker .google-auto-placed,
.d-magazine-post-nav .google-auto-placed,
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* 2) 2カラムGrid直下に自動広告が挿入された場合でもGrid列が崩れないよう全幅スパン化 & カラム外はみ出し防止 */
.d-front-main-area > .google-auto-placed,
.d-front-main-area > ins.adsbygoogle {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 16px 0 !important;
}

.d-front-main-column,
.d-front-sidebar-column {
    min-width: 0 !important;
    max-width: 100% !important;
}

.google-auto-placed,
ins.adsbygoogle {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* ==========================================================================
   10. Responsive Design
   ========================================================================== */
@media (max-width: 782px) {
    body.admin-bar .d-header { top: 46px; }
    .d-front-main-area { grid-template-columns: 1fr; gap: 32px; }
    .d-content-surface,
    .d-magazine-article { padding: 28px 20px !important; border-radius: var(--m3-radius-l); }
    .d-magazine-header:has(.d-magazine-hero img),
    .d-magazine-header.has-image {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding-bottom: 22px !important;
        margin-bottom: 28px !important;
    }
    .d-magazine-article:has(> .d-magazine-hero img) {
        grid-template-columns: 1fr !important;
        row-gap: 18px !important;
    }
    .d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-hero {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .d-magazine-article:has(> .d-magazine-hero img) > .d-magazine-header {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .d-magazine-post-nav { grid-template-columns: 1fr !important; }
    
    /* ★スマホでもリストを横並び維持し高密度化 */
    .d-news-item-columns {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .d-news-item-columns > .wp-block-column:first-child {
        width: 80px !important;
        flex-basis: 80px !important;
        flex-shrink: 0 !important;
    }
    .d-news-item-columns > .wp-block-column:last-child {
        width: auto !important;
        flex-basis: 0 !important;
        flex-grow: 1 !important;
    }
    .d-news-item-card { padding: 12px !important; }
    a.d-m3-read-more,
    .wp-block-read-more.d-m3-read-more,
    .d-m3-read-more a {
        padding: 5px 14px !important;
        font-size: 0.78rem !important;
    }
    
    .d-header-top .d-container {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .d-header-right-group {
        width: 100%;
        justify-content: space-between !important;
    }
}