/*
Theme Name: OSH Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: Figmaデザインを忠実に再現するためのオリジナルテーマ。
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: osh
*/

:root {
    /* === 主要カラー（指定カラーパレット） === */
    --color-primary: #09DCAE;          /* Flash Green: 鮮やかなネオングリーン */
    --color-primary-light: #20e4b8;
    --color-primary-pale: #496A61;     /* Main Green: 深いグリーン */
    
    --color-accent: #09DCAE;           /* Flash Green */
    --color-accent-pale: #CBE9E1;      /* Sub Green: 薄いミント */
    --color-accent-bg: #CBE9E1;        /* Sub Green (FV左背景) */
    --color-accent-light: #CBE9E1;
    --color-accent-border: #CBE9E1;

    --color-warning: #FD6461;          /* Red */
    --color-warning-light: #FD9061;    /* Orange */
    --color-warning-pale: #FD9061;
    --color-warning-bg: #ffd4c3;
    
    /* === モノトーンカラー === */
    --color-dark-100: #496A61;         /* 基本のダークはMain Greenに変更 */
    --color-dark-200: #496A61;
    --color-dark-300: #496A61;
    --color-dark-400: #496A61;
    --color-dark-500: #556B63;
    --color-dark-600: #6B827A;
    
    --color-gray-100: #697077;
    --color-gray-200: #8b959e;
    --color-gray-300: #a3aaa8;
    --color-gray-400: #bfc7c6;
    --color-gray-500: #BFC7C6;         /* Border Gray */
    --color-gray-600: #d8dfe5;
    --color-gray-700: #d9d9d9;
    
    --color-light-bg: #F7FAFC;         /* Background Gray */
    --color-light-bg-2: #F7FAFC;
    --color-light-bg-3: #F7FAFC;
    --color-light-bg-4: #F7FAFC;
    --color-white: #ffffff;

    /* === タイポグラフィ === */
    --font-main: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    --font-heading: 'Zen Old Mincho', serif;
    --font-english: 'Open Sans', sans-serif;
    --font-pixel: 'Pixelify Sans', sans-serif;
    
    /* === レイアウト設定 === */
    --container-max-width: 1440px;
    --container-padding: 0;
    --container-padding-sp: 0;
}

/* === モダンリセットCSS === */
*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.6;
    font-family: var(--font-main);
    color: var(--color-dark-300);
    background-color: var(--color-white); /* 全体の背面を白に設定 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 12px; /* ページ全体で上下左右に12px空ける */
    overflow-x: hidden;
}

/* 額縁の内側の白いメインキャンバス */
.site {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 1416px; /* 1440pxから左右12pxの額縁を引いた最大幅 */
    margin: 0 auto;    /* 中央寄せ */
    min-height: calc(100vh - 24px); /* 上下12pxずつの余白を引いた高さ */
    background-color: var(--color-white);
    border-radius: 12px; /* 白いメインキャンバスの四角を丸める */
}

/* 額縁の角丸からはみ出すヘッダーとフッターの角丸処理 */
.site-header {
    border-radius: 12px 12px 0 0;
}

.site-footer {
    border-radius: 0 0 12px 12px;
}

a {
    color: inherit;
    text-decoration: none;
}

img, picture {
    max-width: 100%;
    display: block;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* ユーティリティクラス */
.container {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
}

@media (max-width: 768px) {
    .container {
        padding-right: var(--container-padding-sp);
        padding-left: var(--container-padding-sp);
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ================================================================
   ボタン共通
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-align: center;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: #3fa590;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 181, 160, 0.3);
}

.btn--secondary {
    background-color: var(--color-light-bg);
    color: var(--color-dark-200);
    border: 1px solid var(--color-gray-400);
}

.btn--secondary:hover {
    background-color: var(--color-gray-400);
    transform: translateY(-2px);
}

.btn--accent {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 24px;
}

.btn--accent:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 181, 160, 0.3);
}

/* ヘッダー内CTAボタン（ミントグリーン塗りつぶし + 白文字 + 角丸） */
.btn--header-cta {
    padding: 8px 20px;
    font-size: 13px;
    border-radius: 24px;
    white-space: nowrap;
}

.btn--outline-primary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn--outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn--small {
    padding: 8px 16px;
    font-size: 12px;
}

/* テキストリンクボタン（矢印付き） */
.btn-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.btn-text::after {
    content: '→';
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.btn-text:hover {
    color: var(--color-primary-light);
}

.btn-text:hover::after {
    transform: translateX(4px);
}

/* プレースホルダー画像 */
.placeholder-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-accent-border), var(--color-primary-light));
    opacity: 0.4;
}


/* ================================================================
   共通ヘッダー（下層ページ用 site-header--sub）
   1行目: ロゴ（左）、ナビ、検索、CTAボタン
   2行目: カテゴリーナビバー
   ================================================================ */
.site-header {
    background-color: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* 下層ページのスマートヘッダー被り防止 */
body:not(.home) #page {
    padding-top: 130px; /* site-header__container(64px) + category-nav-bar(65px) */
}

/* スマートヘッダー（トップページ専用スクロール制御） */
.site-header--smart {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    background-color: rgba(255, 255, 255, 0.98);
}

.site-header--smart.is-shown {
    transform: translateY(0);
}


/* 1行目: メインヘッダーバー */
.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
}

/* ロゴ (高度24px) */
.site-branding .site-title-link {
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 24px;
    width: auto;
    display: block;
}

/* 右側アクション群 (検索 + CTA) */
.site-header__right-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* PCメニュー */
.primary-menu-list {
    display: flex;
    gap: 24px;
}

.primary-menu-list a {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark-300);
    position: relative;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.primary-menu-list a:hover {
    color: var(--color-primary);
}

.primary-menu-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.primary-menu-list a:hover::after {
    transform: scaleX(1);
}

/* ヘッダー検索フォーム (カンプ仕様: 角丸6px, 左虫眼鏡アイコン, 背景 Background Gray) */
.header-search .search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 6px 12px;
    width: 220px;
    transition: border-color 0.3s ease;
}

.header-search .search-form:focus-within {
    border-color: var(--color-primary);
    background-color: var(--color-white);
}

.header-search .search-label {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.header-search .search-field {
    border: none;
    background: transparent;
    font-size: 13px;
    outline: none;
    width: 100%;
    color: var(--color-dark-200);
}

.header-search .search-submit {
    color: #9CA3AF;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.header-search .search-submit:hover {
    color: var(--color-primary);
}

/* ヘッダーCTAボタン (Flash Green #09DCAE, 文字 Main Green 14px, ホバーで白文字) */
.btn--header-cta {
    background-color: var(--color-primary);
    color: var(--color-primary-pale);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    white-space: nowrap;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.btn--header-cta:hover {
    color: var(--color-white);
}

/* ハンバーガーボタン (デフォルト非表示) */
.menu-toggle {
    display: none;
}

/* カテゴリーナビバー（下層ページ用、ヘッダー2行目: 7カラム均等ピルボタン） */
.category-nav-bar {
    position: relative;
    padding: 16px 0 12px;
    background-color: var(--color-white);
}

.category-nav-bar::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background-color: #A4AAA9;
}

.category-nav-bar .container {
    padding: 0 24px;
    max-width: 1440px;
    margin: 0 auto;
}

.category-nav-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

.category-nav-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark-100);
    height: 37px;
    padding: 0 8px;
    border: 1px solid var(--color-dark-100);
    border-radius: 6px;
    background-color: var(--color-white);
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
}

.category-nav-list li a:hover,
.category-nav-list li.current-cat a,
.category-nav-list li a.is-active {
    background-color: var(--color-primary-pale);
    border-color: var(--color-primary-pale);
    color: var(--color-white);
}

/* メガメニュー共通スタイル */
.has-mega-menu {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 480px;
    min-height: 288px;
    height: auto;
    margin-top: 12px;
    background: rgba(248, 250, 253, 0.2); /* 80%透過 (不透明度20%) */
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    border: 1px solid #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.6s ease-out; /* 表示スピードをゆっくりに */
    z-index: 1000;
    text-align: left;
}

/* ホバー時に表示 */
.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* FV用の表示位置オーバーライド (基本は上部へ展開) */
.fv-categories__list .has-mega-menu .mega-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 12px;
    transform: translateY(10px); /* 下から上へフワッとするなら 10px */
    width: max-content; /* 横幅：内包 */
    min-height: 120px;
    height: 120px;
}
.fv-categories__list .has-mega-menu:hover .mega-menu {
    transform: translateY(0);
}

/* 下段のリッチメニュー（5番目以降）は下へ展開（ボタンに被らないように） */
.fv-categories__list .has-mega-menu:nth-child(n+5) .mega-menu {
    top: 100%;
    bottom: auto;
    margin-top: 12px;
    margin-bottom: 0;
    transform: translateY(-10px);
}
.fv-categories__list .has-mega-menu:nth-child(n+5):hover .mega-menu {
    transform: translateY(0);
}

/* ベースのmega-menu__inner (ヘッダー等で使われる用) */
.mega-menu__inner {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    height: 100%; /* min-height に中身を追従させる */
}

/* FV内のmega-menuの内部レイアウト調整 */
.fv-categories__list .mega-menu__inner {
    display: flex;
    flex-direction: row; /* 写真左、リンク右 */
    padding: 8px; /* 内側パディング：8px */
    gap: 16px; /* 右のリンク文字エリアとの間隔：16px */
    height: 100%; 
    align-items: center;
}

/* 上部（ここでは左部）：サムネイル */
.mega-menu__image {
    width: 100%;
    height: 136px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

/* FV内のサムネイルの上書き */
.fv-categories__list .mega-menu__image {
    width: 240px; /* 左写真部分：横240px */
    height: 100%; /* 高さはコンテナ(120px - 16px = 104px)に合わせる */
}

.mega-menu__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 特定のカテゴリのリッチメニュー写真位置を下げる（写真上部を見せる） */
.mega-menu-world-health .mega-menu__image img,
.mega-menu-social-security .mega-menu__image img,
.mega-menu-ohs-law .mega-menu__image img,
.mega-menu-health-checkup-phr .mega-menu__image img {
    object-position: center top;
}

/* ヘルステックの写真を30px下げる */
.mega-menu-healthtech .mega-menu__image img {
    object-position: center calc(50% + 30px);
}


.mega-menu__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(83, 148, 131, 0.6) 0%, transparent 100%);
    pointer-events: none;
}

.mega-menu__image-text {
    position: absolute;
    bottom: 24px;
    right: 16px;
    color: var(--color-white);
    font-weight: 700;
    font-size: 24px;
    white-space: nowrap;
    z-index: 1;
}

/* FV内の画像上テキストの調整 (枠が小さくなったので文字サイズ調整) */
.fv-categories__list .mega-menu__image-text {
    bottom: 8px;
    right: 12px;
    font-size: 16px;
}

/* 下部（ここでは右部）：サブカテゴリーリンク */
.mega-menu__subcats {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
}

/* FV内のリンク調整 */
.fv-categories__list .mega-menu__subcats {
    justify-content: center; /* 縦中央寄せ、またはflex-start */
    gap: 12px; /* 上下の要素間12px */
    padding-right: 16px; /* 右側に少し余白を持たせる */
}

.fv-categories__list .mega-menu__subcats li a {
    font-size: 14px; /* 文字14px */
}

.mega-menu__subcats li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-dark-300);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    justify-content: flex-start !important;
}

.mega-menu__subcats li a:hover {
    color: var(--color-accent-pale) !important;
    background: none !important;
    border: none !important;
}

.mega-menu__arrow {
    width: 16px;
    height: 16px;
    stroke: var(--color-dark-300);
    transition: stroke 0.3s ease;
}

.mega-menu__subcats li a:hover .mega-menu__arrow {
    stroke: var(--color-accent-pale);
}

/* 画面右端ではみ出さないよう調整 */
.fv-categories__list .has-mega-menu .mega-menu {
    left: auto;
    right: 0;
}
.category-nav-list .has-mega-menu:nth-last-child(1) .mega-menu,
.category-nav-list .has-mega-menu:nth-last-child(2) .mega-menu,
.category-nav-list .has-mega-menu:nth-last-child(3) .mega-menu {
    left: auto;
    right: 0;
}


/* ================================================================
   FV（ファーストビュー）- トップページ
   左右2カラムの一体型レイアウト (ブラウザの高さ100vhにフィット)
   ================================================================ */
.fv {
    display: block;
    width: 100%;
    height: calc(100vh - 24px); /* 上下12pxの額縁を考慮 */
    padding: 0; /* 外側の二重パディングを廃止 */
    box-sizing: border-box;
}

/* FVグリッド: 左右カラム間に外側と同じ12pxの隙間を空ける */
.fv-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 12px;
    height: 100%;
}

/* === 左カラム: 四隅角丸、背景 Sub Green、内側パディング24px === */
.fv-left {
    background-color: var(--color-accent-bg); /* #CBE9E1 */
    padding: 24px !important; /* 内側は上下左右24px空ける */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上にロゴ、下に見出しとボタン */
    align-items: flex-start;
    border-radius: 12px; /* 四隅すべて角丸12px */
    height: 100%;
    position: relative;
}

.fv-left__inner {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 24px; /* 要素間の縦余白を一定化 */
    margin-top: auto; /* コンテンツ全体を完璧に下合わせにする */
    width: 100%;
}

/* FVロゴ (SVG画像化対応) */
.fv-logo {
    display: inline-flex;
    align-items: center;
    margin: 0; /* padding 24pxにより左上に自然配置 */
}

.fv-logo-img {
    height: 32px !important; /* 強制的にロゴ高さを32pxに指定 */
    width: auto !important;
    display: block !important;
}

/* メインコピー（極太ゴシック・大サイズ）- 横幅1280pxで52px指定 ＆ ロード時スライドダウン */
.fv-headline {
    font-family: var(--font-main);
    font-size: 52px; /* カンプ指定 of 52px */
    line-height: 1.35;
    font-weight: 900;
    color: var(--color-primary-pale); /* #496A61 (Main Green) */
    margin: 0;
    letter-spacing: 0.02em;
}

.fv-headline .char {
    display: inline-block;
    white-space: pre;
    opacity: 0;
}

/* スライドダウン＋フェードインアニメーション（1文字ずつ） */
@keyframes fvSlideDownChar {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* サブコピー */
.fv-lead {
    font-size: 20px; /* カンプ指定の20px */
    line-height: 1.7;
    color: var(--color-primary-pale); /* #496A61 */
    margin: 0;
}

.fv-lead .char {
    display: inline-block;
    white-space: pre;
    opacity: 0;
}

/* スリットイン（水平）アニメーション (1文字ずつ scaleX) */
@keyframes slitInH {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 0.85; /* 元の透過度 */
    }
}

/* FV内アクションボタン群 */
.fv-actions-v2 {
    display: flex;
    gap: 24px;
    margin: 0;
}

/* アクションボタン (背景・枠線なし、完全に透明、高さ52px) */
.fv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 52px; /* ボタン高さ52px指定 */
    border-radius: 0;
    border: none;
    background-color: transparent; /* 背面の白はいらない */
    transition: transform 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

/* 左側正方形アイコンエリア (52px正方形、背景 #09DCAE、角丸6px) */
.fv-action-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; /* 52px正方形 */
    height: 52px;
    background-color: var(--color-primary); /* #09DCAE */
    flex-shrink: 0;
    border-radius: 6px; /* 緑四角部分は角丸6px */
    transition: background-color 0.3s ease;
}

/* SVG矢印画像スタイル */
.fv-action-btn__arrow-svg {
    width: auto;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* 右側テキストエリア (背景なし、文字色は Main Green #496A61、アイコンからの余白16px) */
.fv-action-btn__text {
    display: flex;
    align-items: center;
    padding: 0 0 0 16px; /* アイコンから16px空ける */
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary-pale); /* #496A61 */
    background-color: transparent; /* 背景白なし */
}

.fv-action-btn:hover {
    transform: translateY(-2px);
}

.fv-action-btn:hover .fv-action-btn__icon {
    background-color: var(--color-primary-light);
}

/* ホバー時の矢印アニメーション：デフォルトは右に動く */
.fv-action-btn:hover .fv-action-btn__arrow-svg {
    transform: translateX(4px);
}

/* 下向き矢印のみ下に動くように上書き */
.fv-action-btn[href*="new-articles"]:hover .fv-action-btn__arrow-svg {
    transform: translateY(4px);
}

/* 反転配置（テキストが左、アイコンが右） */
.fv-action-btn--reverse {
    flex-direction: row-reverse;
}

.fv-action-btn--reverse .fv-action-btn__text {
    padding: 0 16px 0 0; /* アイコンが右に来るため、テキストの右側に16pxの余白を空ける */
}


/* === 右カラム: 背景透明、パディングなし、右側12px空け === */
.fv-right {
    background-color: transparent !important; /* 白背景カードは不要 */
    padding: 0 !important; /* 内側パディングは不要 */
    margin-right: 12px !important; /* 右側は12px空ける */
    display: flex;
    flex-direction: column;
    gap: 12px; /* バナーと下のカードの隙間を12px空ける */
    justify-content: stretch;
    height: 100%;
    overflow: visible;
}

/* === 右下エリアの白い独立カード (角丸12px、周囲24px余白、縦並び均等配置) === */
.fv-right-card {
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 24px 24px 40px 24px !important; /* 下だけ40pxに空ける */
    flex-grow: 1; /* 残りの高さをいっぱいに引き延ばす */
    max-height: 480px; /* 上を基準に最大480pxとする */
    overflow-y: visible; /* コンテンツが溢れてもクリップしない（メガメニュー表示用） */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 要素を縦並び均等配置に */
    box-sizing: border-box;
}

/* --- 統計ダッシュボードバナー（薄オレンジ背景 ＆ 高さ320px・PC拡大縮小比率維持） --- */
.fv-dashboard-banner {
    display: block;
    background-color: #FFE1D6;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: 320px; /* 高さ320px */
    max-height: 320px;
    aspect-ratio: 576 / 320; /* PC版でこの比率で拡大縮小 */
    position: relative;
    transition: transform 0.3s ease;
    border: 1px solid rgba(253, 144, 97, 0.15); /* ごく薄いオレンジの枠線 */
}

.fv-dashboard-banner:hover {
    transform: translateY(-2px);
}

/* 背景波線アニメーション */
.fv-dashboard-banner__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.fv-dashboard-wave-anim {
    position: absolute;
    bottom: -20px;
    left: -100px;
    width: calc(100% + 200px);
    height: 120px;
    background: 
        radial-gradient(ellipse 60% 40% at 30% 60%, rgba(253, 143, 97, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 70% 40%, rgba(253, 180, 130, 0.2) 0%, transparent 60%);
    animation: wave-slide 8s ease-in-out infinite alternate;
}

.fv-dashboard-wave-anim::before,
.fv-dashboard-wave-anim::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.fv-dashboard-wave-anim::before {
    top: 20px;
    height: 40%;
    transform: rotate(-2deg);
    animation: wave-bounce 4s ease-in-out infinite alternate;
}

.fv-dashboard-wave-anim::after {
    top: 35px;
    height: 35%;
    border-top-color: rgba(255, 255, 255, 0.25);
    transform: rotate(2deg);
    animation: wave-bounce 5s ease-in-out infinite alternate-reverse;
}

@keyframes wave-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

@keyframes wave-bounce {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(10px) rotate(1deg); }
}

.fv-dashboard-banner__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end; /* 右下に配置 */
    justify-content: flex-end;
    width: 100%;
    padding: 24px; /* 右下の余白 */
    box-sizing: border-box;
}

/* 統計ダッシュボードを見るボタン: 左下と同じ構造 (背景透過、左オレンジ四角、右テキスト) */
.fv-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 52px; /* 高さ52px統一 */
    background-color: transparent; /* 背面の白・オレンジ背景は不要 */
    transition: transform 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

/* 左側正方形アイコンエリア (52px正方形、背景 #FD9061、角丸6px) */
.fv-dashboard-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; /* 52px正方形 */
    height: 52px;
    background-color: var(--color-warning-light); /* #FD9061 (Orange) */
    flex-shrink: 0;
    border-radius: 6px; /* 角丸6px */
    transition: background-color 0.3s ease;
}

/* SVG矢印画像スタイル (オレンジ背景に映えるようCSSフィルターで強制的に白にカラー変換) */
.fv-dashboard-btn__arrow-svg {
    width: auto;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1); /* 緑の矢印を真っ白(#ffffff)に変換 */
}

/* 左側テキストエリア (背景なし、文字色は四角と同じオレンジ #FD9061、アイコンへの余白16px) */
.fv-dashboard-btn__text {
    display: flex;
    align-items: center;
    padding: 0 16px 0 0; /* アイコンへ向けて右側に16px空ける */
    font-size: 14px;
    font-weight: 700;
    color: var(--color-warning-light); /* 四角と同じオレンジ (#FD9061) に変更 */
    background-color: transparent; /* 背景白なし */
}

/* バナーホバー時のインタラクション */
.fv-dashboard-banner:hover .fv-dashboard-btn {
    transform: translateY(-2px);
}

.fv-dashboard-banner:hover .fv-dashboard-btn__icon {
    background-color: #fd763e; /* 少し濃いオレンジホバー */
}

.fv-dashboard-banner:hover .fv-dashboard-btn__arrow-svg {
    transform: translateX(4px); /* 右へスライド */
}

/* --- 記事カテゴリーボタン群 --- */
.fv-categories__title {
    font-size: 20px; /* タイトル文字は20px */
    font-weight: 700;
    color: var(--color-dark-200);
    margin-bottom: 12px;
    text-align: center;
}

.fv-categories__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* カテゴリーボタン: 文字と外線がMain Green (#496A61)、文字14px */
.fv-cat-btn {
    display: inline-block;
    font-size: 14px; /* 文字は14px指定 */
    font-weight: 700;
    color: var(--color-primary-pale); /* 文字はMain Green (#496A61) */
    padding: 7px 18px;
    border: 1px solid var(--color-primary-pale); /* 外線もMain Green (#496A61) */
    border-radius: 4px;
    background-color: var(--color-white);
    transition: all 0.3s ease;
    white-space: nowrap;
}



.fv-cat-btn:hover {
    background-color: var(--color-primary-pale); /* ホバーで背面Main Green */
    color: var(--color-white); /* 文字は白 */
    border-color: var(--color-primary-pale);
}

/* --- 今話題のタグ --- */
.fv-tags__title {
    font-size: 20px; /* タイトル文字は20px */
    font-weight: 700;
    color: var(--color-dark-200);
    margin-bottom: 12px;
    text-align: center;
}

.fv-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* タグバッジ: 文字がMain Green (#496A61)、背面Sub Green (#CBE9E1)、枠線なし、角丸なし */
.fv-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-pale); /* 文字はMain Green (#496A61) */
    padding: 6px 14px;
    border: none;
    border-radius: 0; /* 角丸なし */
    background-color: var(--color-accent-bg); /* 背面はSub Green (#CBE9E1) */
    transition: all 0.3s ease;
}

.fv-tag:hover {
    background-color: var(--color-accent-bg);
    opacity: 0.85; /* ホバーで優しく半透明に */
    color: var(--color-primary-pale);
}

/* --- FV検索フォーム --- */
.fv-search {
    margin-top: 0; /* 親要素（fv-right-card）の均等配置に委ねるため margin-top をリセット */
    display: flex;
    justify-content: center; /* 検索窓を中央寄せ */
    width: 100%;
}

.fv-search__form {
    display: flex;
    align-items: center;
    width: 280px; /* 横幅は280px指定 */
    background-color: var(--color-light-bg); /* 背面はBackground Gray (#F7FAFC) */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    gap: 10px;
    transition: border-color 0.3s ease;
    box-sizing: border-box; /* paddingを含めた総横幅を280pxにする */
}

.fv-search__form:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 181, 160, 0.1);
}

.fv-search__icon {
    flex-shrink: 0;
    color: var(--color-gray-200);
}

.fv-search__input {
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    width: 100%;
    color: var(--color-dark-200);
}

.fv-search__input::placeholder {
    color: var(--color-gray-300);
}


/* ================================================================
   セクション共通設定（仕切り線ボーダーを削除）
   ================================================================ */
.section {
    padding: 80px 0;
}

.section--articles {
    background-color: var(--color-white);
    padding-top: 40px !important; /* ファーストビューとの間の余白を40pxに */
    padding-bottom: 0 !important;
}

.section--articles .section-header {
    margin-bottom: 12px !important; /* 「New articles」見出しと記事群の間を12pxに */
}

.section--categories {
    background-color: var(--color-white);
    padding-top: 36px !important;
    padding-bottom: 0 !important;
}

.section--categories .section-header {
    margin-bottom: 12px !important;
}

.section--dashboard-banner {
    padding: 36px 0 0 !important;
    background-color: var(--color-white);
}

.section--products {
    background-color: var(--color-white);
    padding-top: 36px !important;
}

.section--products .section-header {
    margin-bottom: 12px !important;
}


/* セクションヘッダー:「New articles 新着記事」のような英語＋日本語 */
.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 40px;
}

.section-header__en {
    font-family: 'Zen Old Mincho', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-100);
}

.section-header__ja {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-primary-pale);
}

/* セクションフッターリンク: 「記事一覧を見る →」 */
.section-footer {
    margin-top: 12px;
    text-align: right;
}

.section-footer__link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.section-footer__link:hover {
    color: var(--color-primary-light);
}

.section-footer__link .arrow {
    transition: transform 0.3s ease;
}

.section-footer__link:hover .arrow {
    transform: translateX(4px);
}


/* ================================================================
   新着記事セクション (New articles)
   注目記事（大判 横2カラム） + 通常記事3カラム
   ================================================================ */

/* 記事レイアウトコンテナ */
.articles-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- 注目記事（大判カード）: 左画像 + 右テキスト --- */
.article-featured {
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-gray-600);
    transition: all 0.3s ease;
}

.article-featured__link {
    display: grid;
    grid-template-columns: 1fr 440px;
    height: 474px;
}

.article-featured__image {
    position: relative;
    overflow: hidden;
    background-color: var(--color-light-bg);
}

.article-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-featured__body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article-featured__title {
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--color-dark-200);
    margin-bottom: 16px;
}

.article-featured__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.article-featured__date {
    font-size: 12px;
    color: var(--color-gray-200);
    display: block;
}

.article-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
    border-color: var(--color-accent-light);
}

.article-featured:hover .article-featured__image img {
    transform: scale(1.05);
}

/* --- 記事タグ（共通）: 文字がMain Green、背面Sub Green、角丸なし --- */
.article-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary-pale); /* Main Green (#496A61) */
    background-color: var(--color-accent-bg); /* Sub Green (#CBE9E1) */
    border: none;
    padding: 4px 10px;
    border-radius: 0; /* 角丸なし */
    display: inline-block;
}

/* --- 通常記事カード（3カラム並び） --- */
/* articles-layout内の通常カードは横3列に並ぶ */
.articles-layout .article-card {
    /* グリッドの子要素として配置される */
}

/* 通常カード3列のラッパーとして:has()で対応、
   またはflex-wrapで対応 */
.articles-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* 注目記事は全幅、通常カードは3列 */
.articles-layout .article-featured {
    grid-column: 1 / -1;
}

/* 通常カードの3列配置 - articles-layoutをサブグリッド化 */
.articles-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.articles-layout .article-featured {
    grid-column: 1 / -1;
}

/* 記事カード共通 */
.article-card {
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-accent-border);
    transition: all 0.3s ease;
}

.article-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--color-light-bg);
    overflow: hidden;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.article-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-card__title {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--color-dark-200);
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.article-card__tags span,
.article-card__tags .article-tag {
    font-size: 10px;
    color: var(--color-primary-pale); /* Main Green (#496A61) */
    background-color: var(--color-accent-bg); /* Sub Green (#CBE9E1) */
    border: none;
    padding: 3px 8px;
    border-radius: 0; /* 角丸なし */
}

.article-card__date {
    font-size: 11px;
    color: var(--color-gray-200);
    margin-top: 12px;
    display: block;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
    border-color: var(--color-accent-light);
}

.article-card:hover .article-card__image img {
    transform: scale(1.05);
}


/* ================================================================
   記事カテゴリーセクション (Article category)
   2-2-3 変則グリッド + 背景画像上に半透明ミントグリーンオーバーレイ
   ================================================================ */
.categories-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
}

/* カテゴリーカード共通 */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 12px;
    overflow: hidden;
    min-height: 220px;
    background-color: var(--color-gray-300);
}

/* 1行目: 2枚（大きめ） */
.cat-card--1,
.cat-card--2 {
    min-height: 260px;
}

/* 2行目: 2枚（大きめ） */
.cat-card--3,
.cat-card--4 {
    min-height: 240px;
}

/* 3行目: 3枚（小さめ）- 3列に切り替え */
.cat-card--5,
.cat-card--6,
.cat-card--7 {
    min-height: 200px;
}

/* 3行目だけ3カラムにするためgrid-columnで制御 */
.cat-card--5 { grid-column: 1 / 2; }
.cat-card--6 { grid-column: 2 / 3; }
.cat-card--7 { grid-column: auto; }

/* 3行目は3列にリフロー: グリッド修正 */
/* 5,6,7を3列にするため、行ごとにサブグリッドを使うか、
   明示的にカラム制御する */

/* カード背景画像コンテナ（ゆっくりズームアニメーション用） */
.cat-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
}

.cat-card:hover .cat-card__bg {
    transform: scale(1.1);
}

/* #539483 のグラデーションオーバーレイ（左下から右上へ、途中で透明に） */
.cat-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        rgba(83, 148, 131, 0.9) 0%,
        rgba(83, 148, 131, 0.9) 30%,
        rgba(83, 148, 131, 0.4) 55%,
        rgba(83, 148, 131, 0) 75%
    );
    transition: background 0.3s ease;
    z-index: 1;
}

.cat-card:hover .cat-card__overlay {
    background: linear-gradient(
        to top right,
        rgba(83, 148, 131, 0.95) 0%,
        rgba(83, 148, 131, 0.9) 30%,
        rgba(83, 148, 131, 0.45) 55%,
        rgba(83, 148, 131, 0) 75%
    );
}

/* カードコンテンツ（左下） */
.cat-card__content {
    position: relative;
    z-index: 2;
    padding: 20px 24px 12px;
    color: var(--color-white);
}

.cat-card__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 8px;
}

.cat-card__desc {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 「詳細を見る」ボタン（白枠角丸ボタン + 矢印） */
.cat-card__btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 122px;
    height: 32px;
    margin: 0 24px 16px auto;
    align-self: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    background: transparent;
    transition: all 0.3s ease;
}

/* テキスト */
.cat-card__btn-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    white-space: nowrap;
}

/* SVG矢印（FVボタンと同じarrow-right.svg） */
.cat-card__btn-arrow {
    width: 12px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

/* ホバーアニメーション */
.cat-card:hover .cat-card__btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-white);
}

.cat-card:hover .cat-card__btn-arrow {
    transform: translateX(3px);
}

/* カテゴリーカードの3行目を3列にするための修正 */
/* grid設定を再調整: 2列ベースだが、5-7番目は独自行で3列 */
@supports (grid-template-columns: subgrid) {
    /* subgridをサポートするブラウザ向け */
}

/* フォールバック: カテゴリグリッドを段階的に制御 */
.categories-grid-v2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.cat-card--1 { grid-column: span 3; height: 480px; }
.cat-card--2 { grid-column: span 3; height: 480px; }
.cat-card--3 { grid-column: span 3; height: 480px; }
.cat-card--4 { grid-column: span 3; height: 480px; }
.cat-card--5 { grid-column: span 2; height: 408px; }
.cat-card--6 { grid-column: span 2; height: 408px; }
.cat-card--7 { grid-column: span 2; height: 408px; }


/* ================================================================
   統計ダッシュボードバナー（トップページ中間セクション）
   オレンジのグラデーション装飾
   ================================================================ */
.dashboard-banner-v2 {
    display: flex;
    align-items: stretch;
    background-color: #FFE1D6;
    border-radius: 16px;
    overflow: hidden;
    height: 480px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-banner-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(253, 143, 97, 0.2);
}

.dashboard-banner-v2__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.dashboard-banner-v2__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 32px 40px;
}

.dashboard-banner-v2:hover .fv-dashboard-btn {
    transform: translateY(-2px);
}

.dashboard-banner-v2:hover .fv-dashboard-btn__icon {
    background-color: #fd763e;
}

.dashboard-banner-v2:hover .fv-dashboard-btn__arrow-svg {
    transform: translateX(4px);
}


/* ================================================================
   製品・サービスセクション (Products/Services) - トップページ
   3カラムの製品カード
   ================================================================ */
.products-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.product-card-v2 {
    background-color: var(--color-white);
    border: 1px solid var(--color-accent-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card-v2__image {
    position: relative;
    height: 410px;
    background-color: var(--color-light-bg);
    overflow: hidden;
}

.product-card-v2__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-v2__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-v2__tagline {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary-pale);
    display: block;
    text-align: center;
    margin-bottom: 6px;
}

.product-card-v2__name {
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark-200);
    text-align: center;
    margin-bottom: 16px;
}

.product-card-v2__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-gray-100);
    margin-bottom: 24px;
}

.product-card-v2__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 122px;
    height: 32px;
    margin-top: auto;
    align-self: flex-end;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background-color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.product-card-v2__link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.product-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    border-color: var(--color-primary-light);
}


/* ================================================================
   共通フッター
   カンプ仕様: 角丸薄ミント背景 (#CBE9E1)・7カラム記事カテゴリー
   ================================================================ */
.site-footer {
    background-color: var(--color-white);
    padding: 0;
    margin-top: 48px;
    margin-bottom: 0;
}

.site-footer__container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-footer__inner {
    background-color: var(--color-accent-bg); /* #CBE9E1 (Sub Green) */
    border-radius: 12px;
    padding: 48px 48px 32px;
    color: var(--color-dark-100);
    text-align: left !important; /* フッター内は左揃え */
}

.site-footer__brand,
.site-footer__section,
.footer-section-title,
.footer-categories-grid,
.footer-cat-col,
.footer-cat-title,
.footer-cat-list,
.site-footer__meta-links {
    text-align: left !important;
}

.site-footer__meta-links {
    justify-content: flex-start !important;
}

.site-footer__brand {
    margin-bottom: 32px;
    text-align: left !important;
}

.footer-logo {
    margin-bottom: 6px;
    display: inline-block;
}

.footer-logo-img {
    height: 22px;
    width: auto;
    display: block;
}

.footer-desc {
    font-size: 13px;
    color: var(--color-dark-100);
}

.site-footer__section {
    margin-bottom: 24px;
}

.footer-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark-100);
}

.footer-section-title a {
    color: var(--color-dark-100);
    transition: color 0.3s ease;
}

.footer-section-title a:hover {
    color: var(--color-primary);
}

/* 7カラムの記事カテゴリー */
.footer-categories-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.footer-cat-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark-100);
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.footer-cat-title:hover {
    color: var(--color-primary);
}

.footer-cat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-cat-list a {
    font-size: 13px;
    color: var(--color-dark-100);
    transition: color 0.3s ease;
}

.footer-cat-list a:hover {
    color: var(--color-primary);
}

/* 会社案内・固定メタリンク */
.site-footer__meta-links {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 32px;
    margin-bottom: 24px;
}

.site-footer__meta-links a {
    font-size: 14px;
    color: var(--color-dark-100);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.site-footer__meta-links a:hover {
    color: var(--color-primary);
}

.ext-icon {
    opacity: 0.8;
}

/* フッター下部: 区切り線 + コピーライト */
.site-footer__bottom {
    border-top: 1px solid rgba(73, 106, 97, 0.25);
    padding-top: 24px;
    text-align: center;
}

.copyright {
    font-size: 12px;
    color: var(--color-dark-100);
}


/* ================================================================
   パンくずリスト
   ================================================================ */
.breadcrumb {
    padding: 16px 0;
    font-size: 12px;
    color: var(--color-gray-100);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.breadcrumb-list li {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-list li::after {
    content: '>';
    margin-left: 8px;
    color: var(--color-gray-200);
}

.breadcrumb-list li:last-child::after {
    display: none;
}

.breadcrumb-list li a {
    color: var(--color-gray-100);
    transition: color 0.2s ease;
}

.breadcrumb-list li a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumb-list li[aria-current="page"] {
    color: var(--color-dark-500);
    font-weight: 500;
}


/* ================================================================
   記事詳細ページ (single.php)
   ================================================================ */
.page-single {
    background-color: var(--color-white);
    padding-bottom: 100px;
}

.single-container {
    /* コンテナ幅は.containerで制御 */
}

.entry-post {
    max-width: 800px;
    margin: 0 auto;
}

.entry-header {
    margin-bottom: 32px;
}

.entry-meta-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.entry-category {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
}

.entry-date {
    font-size: 12px;
    color: var(--color-gray-200);
}

.entry-title {
    font-family: var(--font-heading);
    font-size: 36px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 20px;
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-link {
    font-size: 12px;
    color: var(--color-primary);
    background-color: var(--color-white);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-accent-border);
    transition: all 0.3s ease;
}

.tag-link:hover {
    background-color: var(--color-accent-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.entry-thumbnail {
    margin-bottom: 48px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.entry-thumbnail__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 本文スタイル */
.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-dark-300);
}

.entry-content p {
    margin-bottom: 24px;
}

.entry-content h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 48px 0 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-accent-border);
    position: relative;
}

.entry-content h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 48px;
    height: 2px;
    background-color: var(--color-primary);
}

.entry-content h3 {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin: 36px 0 16px;
    padding-left: 12px;
    border-left: 4px solid var(--color-primary);
}

/* 記事前後ナビゲーション */
.post-navigation {
    margin: 80px 0 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-gray-600);
}

.nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.nav-previous a, .nav-next a {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    border: 1px solid var(--color-gray-600);
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100%;
}

.nav-previous a:hover, .nav-next a:hover {
    border-color: var(--color-primary);
    background-color: var(--color-accent-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.nav-meta {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gray-200);
    margin-bottom: 6px;
}

.nav-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-dark-200);
    line-height: 1.4;
}

/* 関連記事 */
.related-posts {
    margin-top: 60px;
    padding-top: 48px;
    border-top: 1px dashed var(--color-gray-400);
}

.related-posts__title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 32px;
}

.related-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.related-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-600);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.related-card__link {
    display: block;
}

.related-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card__title {
    padding: 16px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-dark-200);
}

.related-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
}

.related-card:hover .related-card__image img {
    transform: scale(1.03);
}


/* ================================================================
   カテゴリー/アーカイブ/検索結果ページ共通
   ミントグリーン薄背景の角丸バナー見出し + 3カラムの記事カードグリッド
   ================================================================ */
.page-category {
    background-color: var(--color-white);
    padding-bottom: 80px;
}

/* ヘッダーバナー: 角丸のミントグリーン薄背景 */
.category-hero {
    background-color: var(--color-accent-bg);
    border-radius: 0 0 24px 24px;
    padding: 24px 0 48px;
    margin-bottom: 48px;
}

.category-hero__subtitle {
    font-family: var(--font-english);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.category-hero__title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 12px;
}

.category-hero__desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 800px;
    color: var(--color-dark-500);
}

/* カテゴリーコンテンツ部分の記事グリッド: 3カラム */
.category-content .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ページネーション */
.posts-pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.posts-pagination .nav-links {
    display: flex;
    gap: 8px;
}

.posts-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-gray-600);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    background-color: var(--color-white);
    transition: all 0.3s ease;
}

.posts-pagination .page-numbers:hover,
.posts-pagination .page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.posts-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--color-gray-200);
}

/* 投稿なし表示エリア (枠線・背景カードをクリアして他ページと統一) */
.no-posts-card, .no-related {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 32px 0 60px;
    text-align: center;
    color: var(--color-dark-200);
    width: 100%;
}


/* ================================================================
   統計ダッシュボードページ (page-dashboard.php)
   オレンジ系グラデーション装飾を使ったデザイン
   ================================================================ */
.page-dashboard {
    background-color: var(--color-light-bg-3);
    padding-bottom: 100px;
}

.dashboard-hero {
    background: linear-gradient(135deg, #FDCBA0 0%, #FDB572 50%, #fd9061 100%);
    color: var(--color-dark-200);
    padding: 60px 0;
    margin-bottom: 48px;
    position: relative;
    overflow: hidden;
}

/* ダッシュボードヒーローのウェーブ装飾 */
.dashboard-hero::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    height: 50%;
    border-top: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    transform: rotate(-2deg);
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 5%;
    right: 5%;
    height: 45%;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: rotate(2deg);
}

.dashboard-hero .container {
    position: relative;
    z-index: 1;
}

.dashboard-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-dark-100);
}

.dashboard-lead {
    font-size: 15px;
    line-height: 1.6;
    max-width: 800px;
    color: var(--color-dark-400);
}

/* サマリーカード */
.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.summary-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-600);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: var(--color-primary);
}

.summary-card__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gray-100);
    margin-bottom: 8px;
}

.summary-card__value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.summary-card__value .unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark-500);
    margin-left: 4px;
}

.summary-card__sub-label {
    font-size: 11px;
    margin-top: 8px;
    font-weight: 700;
}

.text-green {
    color: var(--color-primary);
}

/* グラフカード */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.dashboard-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-600);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.dashboard-card__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-light-bg);
    padding-bottom: 16px;
}

.chart-container {
    position: relative;
    height: 320px;
    width: 100%;
    margin-bottom: 20px;
}

.chart-desc {
    font-size: 11px;
    line-height: 1.6;
    color: var(--color-gray-100);
}

/* データテーブル */
.data-table-card {
    width: 100%;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.dashboard-table th, .dashboard-table td {
    padding: 16px;
    border-bottom: 1px solid var(--color-gray-600);
}

.dashboard-table th {
    background-color: var(--color-light-bg-3);
    color: var(--color-dark-200);
    font-weight: 700;
}

.dashboard-table tbody tr:hover {
    background-color: var(--color-light-bg-4);
}

.dashboard-table td {
    color: var(--color-dark-500);
}


/* ================================================================
   製品一覧アーカイブ (archive-products.php)
   ================================================================ */
.page-products-archive {
    background-color: var(--color-white);
    padding-bottom: 80px;
}

.products-list-grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.product-archive-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-600);
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.product-archive-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
    border-color: var(--color-primary);
}

.product-archive-card__image-wrapper {
    position: relative;
    background-color: var(--color-light-bg);
    min-height: 320px;
}

.product-archive-card__content {
    padding: 48px;
    display: flex;
    flex-direction: column;
}

.product-archive-card__tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.product-archive-card__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 4px;
}

.product-archive-card__sub-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-gray-100);
    margin-bottom: 24px;
}

.product-archive-card__description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-dark-500);
    margin-bottom: 32px;
}

.product-archive-card__features {
    margin-bottom: 32px;
}

.product-archive-card__features h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-dark-200);
    margin-bottom: 12px;
}

.product-archive-card__features ul {
    list-style: none;
    padding-left: 0;
}

.product-archive-card__features li {
    font-size: 13px;
    color: var(--color-dark-500);
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.product-archive-card__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.product-archive-card__footer {
    margin-top: auto;
}


/* ================================================================
   製品詳細ページ (single-products.php)
   ================================================================ */
.page-product-detail {
    background-color: var(--color-white);
    padding-bottom: 100px;
}

.product-detail-hero {
    background-color: var(--color-light-bg-3);
    padding: 20px 0 80px;
    border-bottom: 1px solid var(--color-gray-600);
    margin-bottom: 60px;
}

.product-detail-hero__container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.product-detail-hero__tag {
    font-family: var(--font-english);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.product-detail-hero__title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 8px;
}

.product-detail-hero__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 24px;
}

.product-detail-hero__desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-dark-500);
    margin-bottom: 36px;
}

.product-detail-hero__image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.product-detail-section {
    margin-bottom: 80px;
}

.product-detail-section__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-100);
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    padding-bottom: 16px;
}

.product-detail-section__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background-color: var(--color-primary);
}

/* メリットグリッド */
.product-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.benefit-card {
    background-color: var(--color-light-bg-3);
    border: 1px solid var(--color-gray-600);
    border-radius: 12px;
    padding: 32px;
    position: relative;
    transition: all 0.3s ease;
}

.benefit-card__num {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: var(--color-accent-light);
    line-height: 1;
    margin-bottom: 16px;
}

.benefit-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark-200);
    margin-bottom: 16px;
}

.benefit-card__text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-dark-500);
}

.benefit-card:hover {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

/* スペック表 */
.product-spec-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}

.product-spec-table th, .product-spec-table td {
    padding: 20px;
    border-bottom: 1px solid var(--color-gray-600);
    font-size: 14px;
}

.product-spec-table th {
    text-align: left;
    font-weight: 700;
    color: var(--color-dark-200);
    width: 240px;
    background-color: var(--color-light-bg-3);
}

.product-spec-table td {
    color: var(--color-dark-500);
}

/* CTAエリア */
.product-detail-cta-box {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    color: var(--color-white);
    border-radius: 16px;
    padding: 60px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(79, 181, 160, 0.2);
}

.product-detail-cta-box__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.product-detail-cta-box__text {
    font-size: 15px;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 36px;
    color: rgba(255, 255, 255, 0.85);
}

/* グラフの横スクロール対応（項目名が切れないための措置） */
.chart-scroll-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* スマホでの慣性スクロール */
    padding-bottom: 8px; /* スクロールバー用の余白 */
}
.chart-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}
.chart-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: #FD7E60; /* テーマカラーに合わせたスクロールバー */
    border-radius: 3px;
}
.chart-min-width {
    min-width: 750px !important; /* ラベル（名称）が切れないよう、PCに近い幅を確保 */
}

/* ================================================================
   ABOUTページ (page-about.php)
   ================================================================ */
.page-about {
    background-color: var(--color-white);
    padding-bottom: 100px;
}

.about-hero {
    background-color: var(--color-accent-bg);
    border-radius: 0 0 24px 24px;
    padding: 24px 0 48px;
    margin-bottom: 48px;
}

.about-hero__subtitle {
    font-family: var(--font-english);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.about-hero__title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark-100);
}

.about-section {
    margin-bottom: 80px;
}

.about-section__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-100);
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    padding-bottom: 16px;
}

.about-section__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background-color: var(--color-primary);
}

.about-mission-box {
    background-color: var(--color-accent-bg);
    border-left: 6px solid var(--color-primary);
    padding: 48px;
    border-radius: 0 16px 16px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.about-mission-text {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 24px;
}

.about-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-dark-500);
}

.about-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.topic-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-600);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.topic-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-600);
}

.topic-card__text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-dark-500);
}

.topic-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}


/* ================================================================
   汎用固定ページ (page.php)
   ================================================================ */
.page-default {
    background-color: var(--color-white);
    padding-bottom: 80px;
}

.page-default-container .entry-page {
    max-width: 800px;
    margin: 0 auto;
}

.page-default .entry-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-gray-600);
}


/* ================================================================
   検索結果リトライフォーム
   ================================================================ */
.search-retry-form {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.search-retry-form .search-form {
    display: flex;
    gap: 12px;
    max-width: 480px;
    width: 100%;
}

.search-retry-form .search-field {
    border: 1px solid var(--color-gray-500);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    width: 100%;
}

.search-retry-form .search-field:focus {
    border-color: var(--color-primary);
}



/* ================================================================
   共通ページバナー・グリッドレイアウト
   ================================================================ */
.page-banner {
    background-color: var(--color-accent-bg);
    border-radius: 12px;
    padding: 40px 32px;
    margin-bottom: 40px;
    text-align: left;
}

.page-banner--center {
    text-align: center;
}

.page-banner__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 8px;
}

.page-banner__desc {
    font-size: 14px;
    color: var(--color-gray-100);
}

/* 3カラムグリッドレイアウト */
.articles-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.total-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark-300);
    margin-bottom: 24px;
    text-align: center;
}

/* もっと見るボタン */
.more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    padding: 10px 24px;
    border: 1px solid var(--color-primary);
    border-radius: 24px;
    background-color: var(--color-white);
    transition: all 0.3s ease;
    cursor: pointer;
}

.more-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section-footer--more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.back-nav {
    margin-top: 60px;
    text-align: center;
}

.back-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.back-nav__link:hover {
    color: var(--color-primary-light);
}


/* ================================================================
   レスポンシブ: タブレット (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {
    /* FV: タブレット以下では1カラム縦積みに変更して横潰れを防止 */
    .fv {
        height: auto;
    }

    .fv-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .fv-left {
        padding: 48px 32px;
        height: auto;
    }

    .fv-left__inner {
        max-width: 100%;
        height: auto;
    }

    .fv-logo {
        margin-bottom: 32px;
    }

    .fv-headline {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .fv-lead {
        margin-bottom: 32px;
    }

    .fv-actions-v2 {
        flex-direction: column;
        gap: 16px;
        padding-top: 24px;
    }

    .fv-action-btn {
        width: 100%;
    }

    .fv-right {
        padding: 32px;
        height: auto;
        gap: 32px;
    }


    /* 新着記事: 2列 */
    .articles-layout {
        grid-template-columns: repeat(2, 1fr);
    }

    .articles-layout .article-featured {
        grid-column: 1 / -1;
    }

    /* カテゴリーグリッド: 2列 */
    .categories-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cat-card--1,
    .cat-card--2,
    .cat-card--3,
    .cat-card--4,
    .cat-card--5,
    .cat-card--6,
    .cat-card--7 {
        grid-column: span 1;
        height: auto;
        min-height: 200px;
    }

    /* 製品: 2列 */
    .products-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* カテゴリーコンテンツ: 2列 */
    .category-content .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ダッシュボード */
    .dashboard-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* 製品アーカイブ */
    .product-archive-card {
        grid-template-columns: 1fr;
    }

    .product-archive-card__image-wrapper {
        min-height: 240px;
    }

    /* 製品詳細 */
    .product-detail-hero__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* ABOUT */
    .about-topics-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 3カラムグリッドレイアウトのタブレット対応 */
    .articles-grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ================================================================
   ユーティリティクラス (表示切り替え)
   ================================================================ */
.sp-only {
    display: none !important;
}

/* PC用はSPドロワーを隠す */
.sp-drawer {
    display: none;
}

/* ================================================================
   レスポンシブ: スマートフォン (max-width: 768px)
   SP版: FVは1カラム縦積み
   ================================================================ */
@media (max-width: 768px) {
    .sp-only {
        display: block !important;
    }
    .pc-only {
        display: none !important;
    }

    /* --- ヘッダーSP調整 --- */
    .site-header__container {
        height: 56px;
    }

    /* PC用のヘッダー要素を隠す */
    .main-navigation,
    .header-search,
    .btn--header-cta,
    .category-nav-bar {
        display: none !important;
    }

    .sp-drawer {
        display: block; /* SPでは表示（初期位置は画面外） */
    }

    .site-header__container {
        position: relative;
        z-index: 100;
        background-color: var(--color-white); /* ヘッダーの背景色を確保 */
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background-color: var(--color-dark-200); /* #47695D */
        border-radius: 50%;
        border: none;
        position: relative;
        z-index: 110;
        gap: 5px;
    }

    .menu-toggle span {
        width: 18px;
        height: 2px;
        background-color: var(--color-white);
        transition: all 0.3s ease;
        position: absolute;
    }

    .menu-toggle span:nth-child(1) { top: 14px; }
    .menu-toggle span:nth-child(2) { top: 21px; }
    .menu-toggle span:nth-child(3) { top: 28px; }

    .menu-toggle.is-open span:nth-child(1) {
        top: 21px;
        transform: rotate(45deg);
    }
    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-open span:nth-child(3) {
        top: 21px;
        transform: rotate(-45deg);
    }

    /* --- SPドロワーメニュー --- */
    .sp-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background-color: var(--color-white);
        z-index: 90;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        padding-top: 80px; /* ヘッダー分の余白 */
        padding-bottom: 40px;
    }

    body.menu-open {
        overflow: hidden; /* 背面のスクロールを禁止 */
    }

    body.menu-open .site-header--smart {
        transform: translateY(0) !important; /* メニュー開閉時はヘッダーを常に表示 */
    }

    body.menu-open .sp-drawer {
        transform: translateX(0);
    }

    .sp-drawer__inner {
        padding: 0 16px;
    }

    /* アコーディオン */
    .sp-drawer-accordion {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 24px;
        border-top: none;
    }

    .sp-drawer-accordion__item {
        border: 1px solid var(--color-dark-200); /* 深緑の枠線 */
        border-radius: 6px;
        overflow: hidden;
    }

    .sp-drawer-accordion__toggle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        font-size: 15px;
        font-weight: 700;
        color: var(--color-dark-200);
        background-color: var(--color-white);
        transition: background-color 0.3s, color 0.3s;
    }

    .sp-drawer-accordion__item.is-active .sp-drawer-accordion__toggle {
        background-color: var(--color-dark-200);
        color: var(--color-white);
    }

    .accordion-icon {
        transition: transform 0.3s;
    }
    .sp-drawer-accordion__item.is-active .accordion-icon {
        transform: rotate(180deg);
    }

    .sp-drawer-accordion__content-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sp-drawer-accordion__item.is-active .sp-drawer-accordion__content-wrapper {
        grid-template-rows: 1fr;
    }

    .sp-drawer-accordion__content {
        overflow: hidden;
        min-height: 0;
    }

    .sp-drawer-accordion__subcats {
        background-color: var(--color-accent-bg); /* #CBE9E1 */
        padding: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.5); /* 開いた時の境界線 */
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .sp-drawer-accordion__subcats a {
        display: block;
        color: var(--color-dark-200);
        font-size: 14px;
        text-decoration: none;
    }

    /* 検索 */
    .sp-drawer-search {
        margin-bottom: 32px;
    }
    .sp-search-form {
        display: flex;
        align-items: center;
        background-color: #F8FAFD;
        border: 1px solid #D9D9D9;
        border-radius: 4px;
        padding: 12px 16px;
    }
    .sp-search-submit {
        color: #757575;
        margin-right: 12px;
        display: flex;
    }
    .sp-search-field {
        width: 100%;
        border: none;
        background: transparent;
        outline: none;
        font-size: 15px;
    }
    .sp-search-field::placeholder {
        color: #9CA3AF;
    }

    /* リンク */
    .sp-drawer-links {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
        padding-left: 8px;
    }
    .sp-drawer-links__title {
        font-size: 15px;
        color: var(--color-dark-200);
        font-weight: 500;
    }
    .sp-drawer-links a {
        font-size: 15px;
        color: var(--color-dark-200);
        text-decoration: none;
    }

    .sp-drawer-cta {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 16px;
        font-size: 16px;
        font-weight: 700;
        background-color: var(--color-primary) !important;
        color: var(--color-dark-100) !important; /* Main Green */
        border-radius: 4px !important; /* 角丸ボタン (ピル型ではない) */
        border: none !important;
        text-decoration: none;
    }

    .header-search {
        display: none; /* スマホではヘッダー内検索を隠す */
    }

    .btn--header-cta {
        padding: 6px 14px;
        font-size: 11px;
    }

    /* カテゴリーナビバーSP: 横スクロール */
    .category-nav-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .category-nav-list {
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 4px;
    }

    .category-nav-list li a {
        font-size: 12px;
        padding: 5px 14px;
    }


    /* --- FV SP: スマホ用の余白微調整 --- */
    .fv-left {
        padding: 32px 16px !important;
    }

    .fv-logo-img {
        height: 20px !important;
    }

    .header-logo-img {
        height: 16px;
    }

    .fv-left__inner {
        gap: 0;
    }

    .fv-logo {
        margin-bottom: 56px;
    }

    .fv-headline {
        font-size: 36px;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    .fv-lead {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .fv-actions-v2 {
        padding-top: 0;
    }

    .fv-right {
        padding: 32px 0;
        margin-right: 0 !important;
        gap: 24px;
    }

    .fv-dashboard-banner {
        height: 240px;
        max-height: 240px;
        aspect-ratio: auto; /* SP版では比率解除 */
    }

    .fv-right-card {
        gap: 40px;
        justify-content: flex-start;
        padding: 24px 16px !important; /* 横幅を戻した分、カード内にpaddingを追加 */
        max-height: none; /* SP版では高さ制限解除 */
        overflow-y: visible;
    }

    .fv-categories__title,
    .fv-tags__title {
        font-size: 14px;
    }

    .fv-cat-btn {
        font-size: 12px;
        padding: 5px 14px;
    }


    /* --- セクション SP調整 --- */
    .section {
        padding: 48px 0;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 24px;
    }

    .section-header__en {
        font-size: 24px;
        line-height: 1;
    }

    .section-header__ja {
        font-size: 16px;
    }

    /* 新着記事: 1列 */
    .articles-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .article-featured__link {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .article-featured__image {
        aspect-ratio: 16 / 10;
    }

    .article-featured__image img {
        height: 100%;
    }

    .article-featured__body {
        padding: 20px;
    }

    .article-featured__title {
        font-size: 16px;
    }

    /* カテゴリーグリッド: 1列 */
    .categories-grid-v2 {
        grid-template-columns: 1fr;
    }

    .cat-card--1,
    .cat-card--2,
    .cat-card--3,
    .cat-card--4,
    .cat-card--5,
    .cat-card--6,
    .cat-card--7 {
        grid-column: span 1;
        height: 320px;
        min-height: 320px;
    }

    /* 製品: 1列 */
    .products-grid-v2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* カテゴリーコンテンツ: 1列 */
    .category-content .articles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    /* --- フッターSP --- */
    .site-footer__inner {
        padding: 40px 24px 32px;
    }

    .footer-categories-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .site-footer__meta-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .site-footer__middle {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 24px;
    }

    .footer-nav-col .no-title-list {
        margin-top: 0;
    }


    /* --- 記事詳細SP --- */
    .entry-title {
        font-size: 26px;
    }

    .entry-thumbnail {
        margin-bottom: 24px;
    }

    .entry-content h2 {
        font-size: 20px;
        margin: 32px 0 16px;
    }

    .nav-links {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .related-posts__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    /* --- カテゴリーヘッダーSP --- */
    .category-hero {
        padding: 16px 0 32px;
    }

    .category-hero__title {
        font-size: 28px;
    }


    /* --- 統計ダッシュボード中程バナーSP --- */
    .dashboard-banner-v2 {
        height: 240px;
    }

    /* --- ダッシュボードSP --- */
    .dashboard-hero {
        padding: 40px 0;
        margin-bottom: 32px;
    }

    .dashboard-title {
        font-size: 28px;
    }

    .dashboard-summary {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .dashboard-card {
        padding: 20px;
    }

    .chart-container {
        height: 260px;
    }


    /* --- 製品アーカイブSP --- */
    .product-archive-card__content {
        padding: 24px;
    }


    /* --- 製品詳細SP --- */
    .product-detail-hero {
        padding: 16px 0 40px;
    }

    .product-detail-hero__title {
        font-size: 28px;
    }

    .product-spec-table th {
        width: 120px;
        padding: 12px;
    }

    .product-spec-table td {
        padding: 12px;
    }

    .product-detail-cta-box {
        padding: 32px 20px;
    }

    .product-detail-cta-box__title {
        font-size: 22px;
    }


    /* --- ABOUT SP --- */
    .about-hero {
        padding: 16px 0 32px;
    }

    .about-hero__title {
        font-size: 28px;
    }

    .about-mission-box {
        padding: 24px;
    }

    .about-mission-text {
        font-size: 18px;
    }

    /* 3カラムグリッドレイアウトのスマホ対応 */
    .articles-grid-3col {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ================================================================
   カテゴリーアーカイブページ (.page-category-v3) - カンプ完全準拠
   ================================================================ */

.page-category-v3 {
    background-color: var(--color-white);
}

/* パンくずリスト */
.category-breadcrumb {
    background-color: var(--color-light-bg); /* 背面Background Gray */
    height: 46px; /* 高さ46px */
    font-size: 14px; /* 文字14px */
    color: var(--color-primary-pale); /* 要素色Main green */
    display: flex;
    align-items: center;
    width: 100%; /* 背面は画面幅100% */
    margin-bottom: 12px; /* 下の画像部分との間を12px空ける */
}
.category-breadcrumb__inner {
    max-width: 1440px; /* 内容要素はMax1440px */
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.category-breadcrumb__inner::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.category-breadcrumb__inner a,
.category-breadcrumb__inner span {
    flex-shrink: 0;
}
.category-breadcrumb a {
    color: var(--color-primary-pale); /* 要素色Main green */
    text-decoration: none;
    transition: color 0.3s ease;
}
.category-breadcrumb a:hover {
    color: var(--color-primary); /* ホバー時は少し濃いめに */
}
.category-breadcrumb__separator {
    color: var(--color-primary-pale); /* セパレーターもMain green */
}

/* 統合ヒーローセクション */
.category-hero-integrated {
    position: relative;
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    text-align: center;
    display: flex;
    justify-content: center;
    border-radius: 8px; /* 画像部分は角丸8px */
    overflow: hidden; /* 角丸を効かせるため */
    max-width: 1440px; /* パンくずの内容要素と同じ最大幅 */
    width: 100%;
    margin: 0 auto; /* 中央寄せ */
}

/* 労働安全衛生法（親カテゴリ）の時だけ起点を上にする */
.category-hero-ohs-law {
    background-position: center top;
}

/* 労働安全衛生法（子カテゴリ）のヒーローバナーも起点を上にする */
.category-hero-sub-ohs-law {
    background-position: center 30% !important;
}

/* 高齢者医療確保法（子カテゴリ）のヒーローバナーは中央から120px下げる */
.category-hero-sub-elderly-care {
    background-position: center calc(50% + 120px) !important;
}

/* データの利活用政策（子カテゴリ）のヒーローバナーは中央から250px下げる */
.category-hero-sub-data-policy {
    background-position: center calc(50% + 250px) !important;
}

/* インシデント（子カテゴリ）のヒーローバナーは中央から100px下げる */
.category-hero-sub-incident {
    background-position: center calc(50% + 100px) !important;
}

/* 治療テクノロジー（子カテゴリ）のヒーローバナーは中央から160px上げる */
.category-hero-sub-treatment-tech {
    background-position: center calc(50% - 160px) !important;
}

.category-hero-integrated__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* グラデーションの位置を上げ、タイトルに少し掛かる程度まで伸ばす */
    background: linear-gradient(to top, 
        rgba(83, 148, 131, 1.0) 0%, 
        rgba(83, 148, 131, 0.9) 30%, 
        rgba(83, 148, 131, 0.7) 60%, 
        rgba(83, 148, 131, 0) 90%
    );
    z-index: 1;
    pointer-events: none;
}

.category-hero-integrated__content {
    position: relative;
    z-index: 2;
    max-width: 960px;
    width: 100%;
    padding-top: 160px; /* 内容要素は、上部160px空ける */
    padding-bottom: 40px; /* 最後の「下40px空ける」 */
}

.category-hero-integrated__title {
    font-size: 48px; /* タイトル文字48px */
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: 0.1em;
}

.category-hero-integrated__lead {
    font-size: 16px; /* タイトルサブ文字16px */
    font-weight: 500;
    margin: 0; /* 下の余白は仕切り線で取るため0 */
    line-height: 1.6;
}

/* タイトルの下40px空けてw320pxの仕切り線#fff */
.category-hero-integrated__divider {
    width: 320px;
    height: 1px;
    background-color: #ffffff;
    margin: 40px auto; /* 上下40px空ける */
}

.category-hero-integrated__message-heading {
    margin: 0 0 40px 0; /* 下40px空けて説明文 */
    display: flex;
    flex-direction: row; /* 横に並べる */
    align-items: baseline; /* ベースライン合わせ */
    justify-content: center;
    gap: 16px; /* 横16px空ける */
}
.category-hero-integrated__message-heading .en {
    font-family: 'Zen Old Mincho', serif; /* Zen Old Mincho */
    font-style: normal; /* 斜体にしない */
    font-size: 32px; /* 32px */
}
.category-hero-integrated__message-heading .ja {
    font-size: 16px; /* 16px */
    font-weight: 500;
    opacity: 0.9;
}

.category-hero-integrated__message-text {
    font-size: 16px;
    line-height: 2.0;
    margin: 0;
}

/* サブカテゴリーセクション */
.category-subcat-section {
    padding: 52px 16px 80px; /* 両脇16px空ける */
    background-color: var(--color-white);
    text-align: center;
}
.category-subcat-section__inner {
    max-width: 1216px; /* 1280 - (32*2) = 1216 (w600 * 2 + gap 16px) */
    margin: 0 auto;
}

.category-section-heading {
    color: var(--color-primary-pale);
    margin: 0 0 16px 0; /* タイトル下16px */
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 16px; /* 右16px空けてサブカテゴリー */
}
.category-section-heading .en {
    font-family: 'Zen Old Mincho', serif;
    font-size: 32px; /* 32px */
    font-style: normal; /* 斜体にしない */
    font-weight: 700;
}
.category-section-heading .ja {
    font-size: 16px; /* 16px */
    font-weight: 500;
}

.subcat-card-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2カラム */
    gap: 16px; /* 600px * 2 + 16px = 1216px */
}

.subcat-list-card {
    position: relative;
    display: block;
    height: 320px; /* h320px */
    border-radius: 8px; /* 角丸8px */
    overflow: hidden;
    text-decoration: none;
    color: var(--color-white);
    text-align: left;
}

.subcat-list-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
}

.subcat-list-card:hover .subcat-list-card__bg {
    transform: scale(1.1);
}

/* 特定のサブカテゴリの写真位置を下げる（写真上部を見せる） */
.subcat-list-card--ohs-law .subcat-list-card__bg {
    background-position: center 20% !important;
}

.subcat-list-card--data-policy .subcat-list-card__bg {
    background-position: center calc(50% + 30px) !important;
}

.subcat-list-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* TOPと同じくグラデ入り */
    background: linear-gradient(to top, 
        rgba(83, 148, 131, 1.0) 0%, 
        rgba(83, 148, 131, 0.8) 35%, 
        rgba(83, 148, 131, 0.6) 55%, 
        rgba(83, 148, 131, 0) 75%
    );
    z-index: 1;
}

.subcat-list-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.subcat-list-card__text {
    max-width: 70%;
}

.subcat-list-card__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.subcat-list-card__desc {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.subcat-list-card__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 122px;
    height: 32px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    background: transparent;
    transition: all 0.3s ease;
}

.subcat-list-card__btn-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    white-space: nowrap;
}

.subcat-list-card__btn-arrow {
    width: 12px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.subcat-list-card:hover .subcat-list-card__btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-white);
}

.subcat-list-card:hover .subcat-list-card__btn-arrow {
    transform: translateX(3px);
}

/* 記事一覧セクション */
.category-article-section {
    padding: 20px 24px 40px;
    background-color: var(--color-white);
}

/* サブカテゴリーセクションが無い場合、ヒーロー直下の記事セクションは上部52px空ける */
.category-hero-integrated + .category-article-section {
    padding-top: 52px;
}

.category-article-section__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
}

.category-article-header {
    text-align: center;
    margin-bottom: 40px;
}

.category-article-header__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-200);
    margin: 0 0 8px 0;
}

.category-article-header__count {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-200);
    margin: 0;
}

/* もっと見るボタン */
.category-article-footer {
    margin-top: 48px;
    text-align: center;
}

.btn-more-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00d3b6; /* カンプのエメラルドグリーン */
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    padding: 16px 48px;
    border-radius: 30px; /* 角丸ピル型 */
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-more-green:hover {
    background-color: #00bfa3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 211, 182, 0.3);
}

.btn-more-green .arrow {
    margin-left: 8px;
}

/* ================================================================
   Load More Button (もっと見る)
   ================================================================ */
.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.btn-load-more:hover {
    transform: translateY(-2px);
}

.btn-load-more__text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark-200);
}

.btn-load-more__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #00d3b6; /* エメラルドグリーン */
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.btn-load-more:hover .btn-load-more__icon {
    background-color: var(--color-primary-light);
}

.btn-load-more__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--color-dark-200); /* 矢印の色 */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.btn-load-more:hover .btn-load-more__icon svg {
    transform: translateY(4px);
}

/* ================================================================
   Back to Parent Category Button (親カテゴリへ戻る)
   ================================================================ */
.category-back-action {
    margin-top: 40px;
}

.btn-back-to-parent {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.btn-back-to-parent:hover {
    transform: translateY(-2px);
}

.btn-back-to-parent__text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark-200);
}

.btn-back-to-parent__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #00d3b6; /* エメラルドグリーン */
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.btn-back-to-parent:hover .btn-back-to-parent__icon {
    background-color: var(--color-primary-light);
}

.btn-back-to-parent__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--color-dark-200); /* 矢印の色 */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.btn-back-to-parent:hover .btn-back-to-parent__icon svg {
    transform: translateX(-4px); /* 左へ動く */
}

/* ================================================================
   Child Category Header (子カテゴリの記事ヘッダー)
   ================================================================ */
.category-article-header--child {
    margin-bottom: 40px;
}
.category-article-header--child .category-article-header__count {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-200);
}

/* ================================================================
   Single Post Page (記事詳細ページ v3 - デザインカンプ再現)
   ================================================================ */
.page-single-v3 {
    background-color: var(--color-white);
    padding-bottom: 60px;
}

/* 記事タイトル統合ヘッダー (タイトル背面のみ緑背景ブロック・角丸8px) */
.single-hero-container {
    margin-bottom: 24px;
}

.single-hero-header {
    background-color: #D9EFE9; /* 淡いミントグリーン背景 */
    border-radius: 8px; /* 背面緑部分 角丸8px */
    padding: 36px 48px;
}

.single-hero-header__title {
    font-size: 40px; /* タイトル文字 40px */
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-dark-100);
    margin: 0;
    letter-spacing: -0.01em;
}

/* 記事メインコンテンツ幅 (max-width: 860px) 内のタグと日付 (左合わせ) */
.single-article-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    padding: 0; /* アイキャッチ画像・本文の左端と完全に直直線で配置 */
}

.single-article-meta__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* TOPページ等の共通タグスタイル (.article-tag) をaタグとして適用 */
.single-article-meta__tags a.article-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary-pale); /* Main Green (#496A61) */
    background-color: var(--color-accent-bg); /* Sub Green (#CBE9E1) */
    border: none;
    padding: 4px 10px;
    border-radius: 0; /* 角丸なし */
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.single-article-meta__tags a.article-tag:hover {
    opacity: 0.75;
}

.single-article-meta__date {
    font-size: 12px; /* 日付・時間 12px */
    color: #8B959E; /* #8B959E */
    font-weight: 500;
}

/* 記事メインコンテナ */
.single-main-wrapper {
    max-width: 860px;
    margin: 0 auto 60px;
}

.single-article-content {
    width: 100%;
}

/* アイキャッチ画像 */
.single-article-eyecatch {
    width: 100%;
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
}

.single-article-eyecatch__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.single-article-eyecatch__placeholder {
    width: 100%;
    height: 420px;
    background-color: #D9D9D9; /* グレープレースホルダー */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.single-article-eyecatch__placeholder .placeholder-icon {
    width: 72px;
    height: 72px;
    stroke: #8C8C8C;
    stroke-width: 1.25;
    fill: none;
}

/* 本文スタイル調整 */
.single-article-body {
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-dark-200);
}

.single-article-body p {
    margin-bottom: 28px;
}

.single-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 32px 0;
}

/* 製品・サービスCTAブロック */
.single-product-cta {
    margin-top: 64px;
    margin-bottom: 24px;
}

.product-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 28px 36px;
    gap: 32px;
}

.product-cta-box__body {
    flex: 1;
}

.product-cta-box__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin-bottom: 10px;
}

.product-cta-box__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-gray-100);
}

.product-cta-box__image {
    width: 150px;
    height: 100px;
    background-color: #D9D9D9;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-cta-box__icon {
    width: 44px;
    height: 44px;
    stroke: #8C8C8C;
    stroke-width: 1.25;
    fill: none;
}

/* 関連記事セクション */
.single-related-section {
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #E2E8F0;
}

.single-related-section .category-section-heading {
    margin-bottom: 32px;
}

.single-related-section .category-back-action {
    margin-top: 48px;
}

/* レスポンシブ対応 (SP) */
@media (max-width: 768px) {
    .single-hero-header {
        padding: 24px 16px;
    }
    .single-hero-header__title {
        font-size: 24px;
    }
    .single-article-eyecatch__placeholder {
        height: 240px;
    }
    .product-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    .product-cta-box__image {
        width: 100%;
        height: 140px;
    }
}

/* ================================================================
   Archive / Tag / Search Header v2 (共通ヘッダー)
   ================================================================ */
.archive-hero-container {
    width: 100%;
    margin: 0 auto 24px;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
}

.archive-hero-banner {
    background-color: #D9EFE9; /* 薄い緑背景 */
    border-radius: 8px; /* 角丸8px */
    padding: 36px 48px;
    text-align: center;
}


.archive-hero-title {
    font-family: 'Zen Kaku Gothic New', var(--font-base), sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-dark-100);
    margin: 0;
    text-align: center;
}

.archive-header-v2__count {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-200);
    margin: 0 0 40px 0;
    text-align: center;
}

/* 該当記事なし時のリトライ検索バー (ヘッダーと完全同一デザイン) */
.search-no-results {
    text-align: center;
    padding: 32px 12px 12px 12px;
}

.search-no-results__text {
    font-size: 16px;
    color: var(--color-dark-200);
    margin-bottom: 24px;
}

.search-retry-box {
    display: flex;
    justify-content: center;
}

.search-retry-box .header-search .search-form {
    width: 340px;
    max-width: 100%;
    padding: 10px 16px;
}

/* ABOUTページ タイトルスタイル (40px / ゴシック体) */
.page-about-v2 .archive-hero-title {
    font-family: 'Zen Kaku Gothic New', var(--font-base), sans-serif !important;
    font-size: 40px !important;
    font-weight: 700;
    text-align: center;
}

/* 製品・サービス一覧 ヘッダースタイル (タイトル40pxゴシック体 / 説明文16px Main Green) */
.page-products-archive-v2 .archive-hero-title {
    font-family: 'Zen Kaku Gothic New', var(--font-base), sans-serif !important;
    font-size: 40px !important;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.page-products-archive-v2 .archive-hero-desc {
    font-size: 16px !important;
    color: #496A61 !important; /* Main Green #496A61 */
    font-weight: 400 !important; /* Regular */
    text-align: center;
}

/* 製品・サービス一覧 カードスタイル (各間隔12px / Sub Green枠線 / ボタン右下デザイン) */
.products-container {
    gap: 12px !important;
}

.products-row {
    gap: 12px !important;
}

.product-item-v2 {
    border: 1px solid #CBE9E1 !important;
}

.product-item-v2__tagline {
    font-size: 16px !important;
    font-weight: 700;
    color: #496A61 !important;
}

.product-item-v2__name {
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

.product-item-v2__desc {
    font-size: 16px !important;
    color: #496A61 !important;
}

.products-row--2col .product-item-v2__desc {
    max-width: 480px;
}

.product-item-v2__link {
    margin-top: auto;
    margin-left: auto;
    color: #09DCAE !important;
    border: 1px solid #09DCAE !important;
    border-radius: 6px;
    padding: 6px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.product-item-v2__link-arrow {
    width: 10px;
    height: 10px;
    display: inline-block;
    transition: transform 0.3s ease;
    filter: invert(58%) sepia(87%) saturate(1478%) hue-rotate(124deg) brightness(97%) contrast(97%);
}

.product-item-v2__link:hover {
    background-color: #09DCAE !important;
    color: var(--color-white) !important;
}

.product-item-v2__link:hover .product-item-v2__link-arrow {
    filter: brightness(0) invert(1);
    transform: translateX(3px);
}

/* 統計ダッシュボード ヘッダースタイル (サーモンピンク背景 #FFE5DB / タイトル・説明文 #916451) */
.page-dashboard-v3 .archive-hero-title {
    font-family: 'Zen Kaku Gothic New', var(--font-base), sans-serif !important;
    font-size: 40px !important;
    font-weight: 700;
    color: #916451 !important;
    text-align: center;
}

.page-dashboard-v3 .archive-hero-desc {
    font-size: 16px !important;
    color: #916451 !important;
    font-weight: 400 !important;
    text-align: center;
}

/* 掲載グラフ一覧 (四角52px・矢印色#9F502E・確実に開くアコーディオン) */
.dashboard-toc-container {
    max-width: 800px;
    margin: 0 auto 48px;
    border: 2px solid #FD7E60 !important;
    border-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}

.dashboard-toc-toggle {
    width: 100%;
    height: 64px;
    padding: 0 64px 0 24px;
    background-color: #ffffff !important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    outline: none;
}

.toc-toggle-text {
    font-size: 18px;
    font-weight: 700;
    color: #FD7E60 !important;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.toc-toggle-arrow-box {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px !important;
    height: 52px !important;
    background-color: #FF8A65 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toc-toggle-arrow-svg {
    width: 16px;
    height: 20px;
    stroke: #9F502E !important;
    transition: transform 0.3s ease;
    display: block;
}

.dashboard-toc-toggle[aria-expanded="true"] .toc-toggle-arrow-svg,
.dashboard-toc-toggle.is-active .toc-toggle-arrow-svg {
    transform: rotate(180deg);
}

.dashboard-toc {
    display: none;
    border-top: 1px solid #FFE3D8 !important;
    background-color: #ffffff;
}

.dashboard-toc.is-open {
    display: block !important;
}

.dashboard-toc__inner {
    padding: 24px;
}

.dashboard-toc__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    min-height: 268px;
    align-content: start; /* 項目サイズを引き伸ばさず上寄りに配置 */
}

.dashboard-toc__item {
    height: 44px; /* 中の項目サイズ・高さを固定維持 */
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #FFF5EE;
    border-radius: 8px;
    padding: 6px 12px 6px 6px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.dashboard-toc__item:hover {
    background-color: #FFE5DB;
}

/* 番号01部分: 画像通りの白背景角丸小窓ボックス */
.dashboard-toc__item .num {
    background-color: #ffffff !important;
    color: #FD7E60 !important;
    font-size: 15px;
    font-weight: 700;
    width: 36px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-toc__item .txt {
    font-size: 14px;
    color: #FD7E60 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    flex: 1;
    min-width: 0; /* エリア内に収まらない場合に三点リーダー(...)で文字数自動制限 */
}

.dashboard-toc__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
}

.dashboard-toc__pagination .page-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #FF8A65;
    color: #FD7E60;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
}

.dashboard-toc__pagination .page-current {
    background-color: #FF8A65 !important;
    color: #ffffff !important;
}

.dashboard-toc__pagination .page-num.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #FFC4B3 !important;
    color: #FFC4B3 !important;
}

/* 統計ダッシュボード グラフセクションカード */
.page-dashboard-v3 .dashboard-section {
    margin-bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 2px solid #F6D8CC !important; /* 各要素を囲む線#F6D8CC、太さ2px */
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    scroll-margin-top: 140px !important; /* 目次からのアンカーリンク遷移時に固定ヘッダーに隠れないようにする */
}

.dashboard-section__top {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    background-size: cover !important;
    background-position: center !important;
    margin-bottom: 40px !important; /* 上タイトルエリアと下グラフ部分は40px空ける */
}

/* 始点をやや右に設定 */
.dashboard-section__top::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(80deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 70%) !important;
    z-index: 1 !important;
}

.dashboard-section__top-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: space-between !important; /* 均等配置（両端揃え）で右に寄せる */
    align-items: center !important;
    height: 100% !important;
    padding: 0 80px !important; /* 両脇80px空ける */
    gap: 88px !important; /* 要素間隔88px（最小間隔として機能） */
}

.dashboard-section__header {
    flex: 0 1 auto !important; /* 自然な幅を取り、画面が縮むと優先的に縮む */
    min-width: 0 !important; /* 文字がはみ出さないように */
}

.dashboard-section__title {
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #FD9061 !important; /* タイトル文字#FD9061 */
    margin: 0 !important;
}

.dashboard-section__photo-badge {
    color: #fff !important; /* サブ文字#fff */
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4) !important; /* ドロップシャドウX0Y2ぼかし10 #000-40% */
    flex: 0 0 400px !important; /* サブ文字エリアは400px固定（縮まない） */
    width: 100% !important;
}

.dashboard-section__bottom {
    width: 100% !important;
    max-width: 1040px !important; /* グラフ部分は最大横幅1040px */
    margin: 0 auto !important; /* 中央寄せ */
    padding: 0 40px 40px !important; /* 外枠との余白 */
    box-sizing: border-box !important;
}

.dashboard-section__graph {
    width: 100% !important;
    height: 320px !important;
    position: relative !important;
}


.chart6-custom-label {
    position: absolute !important;
    top: 35% !important;
    font-size: 14px !important;
    color: #916451 !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
    pointer-events: none !important;
}
.chart6-custom-label--left {
    left: 15% !important;
    text-align: left !important;
}
.chart6-custom-label--left::after {
    content: '';
    position: absolute !important;
    top: 25px !important;
    right: -40px !important;
    width: 30px !important;
    height: 1px !important;
    background-color: #E2E2E2 !important;
}
.chart6-custom-label--right {
    right: 15% !important;
    text-align: left !important;
}
.chart6-custom-label--right::after {
    content: '';
    position: absolute !important;
    top: 25px !important;
    left: -40px !important;
    width: 30px !important;
    height: 1px !important;
    background-color: #E2E2E2 !important;
}
.chart6-custom-label .label-val {
    font-size: 26px !important;
    color: #fda789 !important;
    font-weight: 800 !important;
}

/* Custom Horizontal Bar for Chart 7 */
.custom-horizontal-bar {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}
.custom-horizontal-bar__labels {
    display: flex !important;
    width: 100% !important;
    opacity: 0 !important;
    transition: opacity 1s ease 1s !important;
}
.is-visible .custom-horizontal-bar__labels,
.dashboard-section.is-visible .custom-horizontal-bar__labels {
    opacity: 1 !important;
}
.custom-horizontal-bar__label {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.custom-horizontal-bar__label .txt {
    font-size: 14px !important;
    color: #916451 !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}
.custom-horizontal-bar__label .line {
    width: 1px !important;
    height: 16px !important;
    background-color: #dcdcdc !important;
    display: block !important;
}
.custom-horizontal-bar__bars {
    display: flex !important;
    width: 100% !important;
    height: 60px !important;
    margin-top: 4px !important;
}
.custom-horizontal-bar__segment {
    height: 100% !important;
    max-width: 0 !important;
    transition: max-width 2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.is-visible .custom-horizontal-bar__segment,
.dashboard-section.is-visible .custom-horizontal-bar__segment {
    max-width: 100% !important;
}
.custom-horizontal-bar__segment--orange {
    background: linear-gradient(90deg, rgba(253,167,137,0.7) 0%, rgba(253,167,137,1) 100%) !important;
    border-right: 2px solid #fff !important;
}
.custom-horizontal-bar__segment--blue {
    background: linear-gradient(90deg, rgba(117,227,255,0.7) 0%, rgba(117,227,255,1) 100%) !important;
}

/* Section 12 Summary Boxes */
.dashboard-summary-boxes {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-top: 30px !important;
    background-color: #ff926a !important;
    padding: 16px !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.dashboard-summary-box {
    flex: 1 !important;
    background-color: #ff926a !important;
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 24px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
}
.dashboard-summary-box * {
    color: #ffffff !important;
}
.dashboard-summary-box .label {
    font-size: 24px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}
.dashboard-summary-box .val,
.dashboard-summary-box .sub {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Section 15 Table */
@media screen and (max-width: 767px) {
    .category-hero-is-sub .category-hero-integrated__overlay {
        background: linear-gradient(to top, 
            rgba(83, 148, 131, 1.0) 0%, 
            rgba(83, 148, 131, 0.7) 40%, 
            rgba(83, 148, 131, 0) 100%) !important;
    }
    
    /* --- DASHBOARD SP --- */
    .dashboard-section {
        border: 1px solid #FCE4D6 !important;
        margin-bottom: 24px !important;
        background-color: #fff !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .dashboard-section__top {
        min-height: 200px !important;
        height: auto !important;
        padding-top: 72px !important; /* 画像の開始位置を72px下げる */
        padding-bottom: 0 !important; 
        background-origin: content-box !important;
        background-clip: content-box !important;
        background-position: right top !important; /* 配置写真を右上起点に変更 */
        background-size: 210% auto !important; /* 先ほどの高さ143%時と同等のズーム比率（幅基準）に変更 */
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        margin-bottom: 0 !important;
        position: relative !important;
    }
    
    .dashboard-section__top::before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        /* 上から80pxまで白ベタ塗り、そこから下へ64px(80px～144px)で自然に透明へグラデーション */
        background: linear-gradient(180deg, rgba(255,255,255,1) 0px, rgba(255,255,255,1) 80px, rgba(255,255,255,0) 144px) !important;
        z-index: 1 !important;
    }
    
    .dashboard-section__top-content {
        position: relative !important;
        z-index: 2 !important;
        margin-top: -72px !important; /* padding-topで下がった分を戻す */
        padding: 24px 16px !important;
        width: 100% !important;
        height: auto !important; /* PCからの100%継承をリセット */
        background: transparent !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* PCからのspace-betweenをリセット */
        align-items: flex-start !important;
        gap: 0 !important; /* PCからの88pxをリセット */
    }
    
    .dashboard-section__title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #FD9061 !important;
        line-height: 1.4 !important;
        display: block !important;
        text-align: left !important;
        margin: 0 0 8px 0 !important; /* タイトルとサブワードの上下間隔を8pxに */
    }
    
    .dashboard-section__title::before {
        display: none !important;
    }
    
    .dashboard-section__title br {
        display: block !important;
    }
    
    .dashboard-section__photo-badge {
        display: block !important;
        font-size: 18px !important; /* サブワード18px */
        font-weight: 700 !important;
        color: #ffffff !important;
        text-align: left !important;
        text-shadow: 0px 2px 8px rgba(0,0,0,0.7) !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        flex: none !important;
        width: 100% !important;
    }
    
    .dashboard-section__bottom {
        padding: 15px !important;
    }
    
    .dashboard-section__text {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-top: 16px !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }
    
    .dashboard-section__source {
        font-size: 11px !important;
        margin-top: 16px !important;
        text-align: left !important;
    }
}

.dashboard-section15-table {
    width: 100% !important;
    max-width: 700px !important;
    margin: 40px auto !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    background-color: #ff926a !important;
    text-align: center !important;
    font-size: 14px !important;
    border: 2px solid #ff926a !important;
    border-radius: 4px !important;
}
.dashboard-section15-table th {
    background-color: #FFCDB8 !important;
    color: #333333 !important;
    font-weight: bold !important;
    padding: 4px 10px !important;
    border: none !important;
    border-radius: 4px !important;
}
.dashboard-section15-table td {
    padding: 4px 10px !important;
    border: none !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
}
.dashboard-section15-table td:nth-child(3),
.dashboard-section15-table td:nth-child(3) strong {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 900 !important;
}

.dashboard-section17-table {
    width: 100% !important;
    max-width: 700px !important;
    margin: 40px auto !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    background-color: #ff926a !important;
    text-align: center !important;
    font-size: 14px !important;
    border: 2px solid #ff926a !important;
    border-radius: 4px !important;
}
.dashboard-section17-table th {
    background-color: #FFCDB8 !important;
    color: #333333 !important;
    font-weight: bold !important;
    padding: 4px 10px !important;
    border: none !important;
    border-radius: 4px !important;
}
.dashboard-section17-table td {
    padding: 4px 10px !important;
    border: none !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
}
.dashboard-section17-table td:nth-child(2) {
    text-align: left !important;
}
.dashboard-section17-table td:nth-child(3) {
    text-align: right !important;
    padding-right: 20px !important;
}

.dashboard-section__source {
    margin-top: 16px !important;
    font-size: 13px !important;
    color: #916451 !important;
    font-weight: 400 !important;
}
.dashboard-section__text {
    margin-top: 16px !important;
}
.dashboard-section__source a {
    color: #916451 !important;
    text-decoration: underline !important;
}

/* -----------------------------------------------------------
 * Dashboard Background Animation 
 * ----------------------------------------------------------- */
.dash-bg-anim-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.dash-bg-anim-container::after {
    content: '';
    position: absolute;
    inset: -50px;
    z-index: 5;
    pointer-events: none;
    background-color: #F5EAEB;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 40 -26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 40 -26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.8;
    -webkit-mask-size: 150px;
    mask-size: 150px;
}

/* Bars */
.dash-bg-bars {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 10%;
    z-index: 1;
}

.dash-bg-bar {
    width: 15%;
    background: rgba(253, 144, 97, 0.4);
    border-radius: 20px 20px 0 0;
    animation: dashBarFloat 8s ease-in-out infinite alternate;
    transform-origin: bottom;
}

.dash-bg-bar-1 { height: 60%; animation-delay: 0s; background: rgba(253, 144, 97, 0.5); }
.dash-bg-bar-2 { height: 40%; animation-delay: -2s; background: rgba(253, 144, 97, 0.3); }
.dash-bg-bar-3 { height: 70%; animation-delay: -4s; background: rgba(253, 144, 97, 0.6); }
.dash-bg-bar-4 { height: 50%; animation-delay: -6s; background: rgba(253, 144, 97, 0.4); }

@keyframes dashBarFloat {
    0% { transform: scaleY(0.9); opacity: 0.8; }
    100% { transform: scaleY(1.1); opacity: 1; }
}

/* Waves */
.dash-bg-wave {
    position: absolute;
    bottom: 5%;
    width: 200%;
    left: 0;
    z-index: 2;
    animation: dashWaveSlide 25s linear infinite;
}

.dash-bg-wave svg {
    width: 100%;
    height: auto;
    display: block;
}

.wave-stroke {
    fill: none;
    stroke: rgba(253, 144, 97, 0.6);
    stroke-width: 6px;
    stroke-linecap: round;
}

/* 中程のバナーのみ波線を細く */
.dashboard-banner-v2 .wave-stroke {
    stroke-width: 3px;
}

.wave-fill {
    stroke: none;
}

@keyframes dashWaveSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Circles */
.dash-bg-circles {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    z-index: 3;
    pointer-events: none;
    animation: dashCircleRotate 30s linear infinite;
}

.dash-bg-circle-svg {
    fill: none;
    stroke: rgba(253, 144, 97, 0.6);
    stroke-linecap: round;
    transform-origin: 50% 50%;
}

.dash-bg-circle-svg-1 {
    stroke-width: 12px;
    animation: dashCircleSvgPulse1 6s ease-in-out infinite alternate;
}
.dash-bg-circle-svg-2 {
    stroke-width: 8px;
    animation: dashCircleSvgPulse2 6s ease-in-out infinite alternate -2s;
}
.dash-bg-circle-svg-3 {
    stroke-width: 6px;
    animation: dashCircleSvgPulse3 6s ease-in-out infinite alternate -4s;
}
.dash-bg-circle-svg-4 {
    stroke-width: 10px;
    stroke: rgba(253, 144, 97, 0.3);
    animation: dashCircleSvgPulse4 6s ease-in-out infinite alternate -6s;
}

@keyframes dashCircleRotate {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

@keyframes dashCircleSvgPulse1 {
    0% { stroke-dasharray: 100 628; stroke-dashoffset: 0; transform: rotate(0deg); }
    100% { stroke-dasharray: 400 628; stroke-dashoffset: -314; transform: rotate(45deg); }
}
@keyframes dashCircleSvgPulse2 {
    0% { stroke-dasharray: 150 942; stroke-dashoffset: 0; transform: rotate(0deg); }
    100% { stroke-dasharray: 600 942; stroke-dashoffset: -471; transform: rotate(-30deg); }
}
@keyframes dashCircleSvgPulse3 {
    0% { stroke-dasharray: 200 1256; stroke-dashoffset: 0; transform: rotate(0deg); }
    100% { stroke-dasharray: 800 1256; stroke-dashoffset: 628; transform: rotate(60deg); }
}
@keyframes dashCircleSvgPulse4 {
    0% { stroke-dasharray: 250 1570; stroke-dashoffset: 0; transform: rotate(0deg); }
    100% { stroke-dasharray: 1000 1570; stroke-dashoffset: -785; transform: rotate(-45deg); }
}

/* ================================================================
   カテゴリーアーカイブ (SP用調整)
   ================================================================ */
@media (max-width: 768px) {
    /* 下層ページのヘッダー下の余白調整（SPではナビバー非表示のためヘッダー高さのみ） */
    body:not(.home) #page {
        padding-top: 56px;
    }

    /* ヒーローセクション */
    .category-hero-integrated {
        background-color: #539483;
        background-size: 100% auto; /* 横幅100%で比率維持（高さは自動設定） */
        background-repeat: no-repeat;
        background-position: top center !important;
    }

    .category-hero-integrated__overlay {
        background: linear-gradient(to bottom,
            rgba(83, 148, 131, 0) 0px,
            rgba(83, 148, 131, 0.4) 100px,
            rgba(83, 148, 131, 0.8) 160px,
            #539483 210px,
            #539483 100%
        );
    }
    
    /* サブカテゴリー用ヒーローリセット */
    .category-hero-is-sub {
        background-color: transparent !important;
        background-size: 140% auto !important; /* 画像を拡大 */
        background-position: center bottom !important; /* 下部基準にして上部のスペースを隠す */
    }
    
    .category-hero-sub-health-insurance {
        background-position: center -48px !important;
    }
    
    .category-hero-sub-who-strategy {
        background-position: center calc(100% - 8px) !important;
    }
    
    .category-hero-sub-health-promotion {
        background-position: center calc(100% + 72px) !important;
    }
    
    .category-hero-sub-ohs-law {
        background-position: center calc(100% + 24px) !important;
    }
    
    .category-hero-sub-elderly-care {
        background-position: center calc(100% + 96px) !important;
    }
    
    .category-hero-sub-health-checkup-data {
        background-position: center calc(100% + 88px) !important;
    }
    
    .category-hero-sub-data-policy {
        background-position: calc(50% - 16px) calc(100% + 104px) !important;
    }
    
    .category-hero-sub-incident {
        background-position: center calc(100% + 120px) !important;
    }
    
    .category-hero-sub-various-statistics {
        background-position: center calc(100% + 120px) !important;
    }
    
    .category-hero-sub-pre-disease-tech {
        background-position: center calc(100% + 56px) !important;
    }
    
    .category-hero-sub-treatment-tech {
        background-position: center calc(100% - 8px) !important;
    }
    
    .category-hero-is-sub .category-hero-integrated__overlay {
        background: linear-gradient(to top, 
            rgba(83, 148, 131, 1.0) 0%, 
            rgba(83, 148, 131, 0.7) 40%, 
            rgba(83, 148, 131, 0) 100%
        ) !important;
    }

    .category-hero-integrated__content {
        padding-top: 100px;
        padding-bottom: 32px;
    }
    
    .category-hero-integrated__title {
        font-size: 40px;
        line-height: 1.1;
    }
    
    .category-hero-integrated__divider {
        width: 100%;
        max-width: 240px;
        margin: 32px auto;
    }
    
    .category-hero-integrated__message-heading {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-bottom: 24px;
    }
    
    .category-hero-integrated__message-heading .en {
        font-size: 24px;
    }
    
    .category-hero-integrated__message-heading .ja {
        font-size: 14px;
    }
    
    .category-hero-integrated__message-text {
        font-size: 14px;
        line-height: 1.8;
        padding: 0 16px;
        text-align: left;
    }

    /* サブカテゴリーセクション */
    .category-subcat-section {
        padding: 40px 16px;
    }
    
    .category-section-heading {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 24px;
    }
    
    .category-section-heading .en {
        font-size: 24px;
    }
    
    .category-section-heading .ja {
        font-size: 14px;
    }
    
    .subcat-card-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .subcat-list-card {
        height: 360px;
    }
    
    .subcat-list-card__bg {
        width: 120% !important;
        height: 120% !important;
        top: -10% !important;
        left: -10% !important;
        background-position: center calc(50% - 30px) !important;
    }
    
    .subcat-list-card__overlay {
        background: linear-gradient(to top, 
            rgba(83, 148, 131, 1.0) 0px, 
            rgba(83, 148, 131, 1.0) 40px, /* ボタン中央くらいまでベタ塗り */
            rgba(83, 148, 131, 0.8) 120px, 
            rgba(83, 148, 131, 0.4) 200px, 
            rgba(83, 148, 131, 0) 100%
        ) !important;
    }
    
    .subcat-list-card__content {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 20px 16px;
    }
    
    .subcat-list-card__text {
        max-width: 100%;
        margin-bottom: 16px;
    }
    
    .subcat-list-card__title {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .subcat-list-card__desc {
        font-size: 13px;
        line-height: 1.6;
    }
    
    .subcat-list-card__btn {
        align-self: flex-end;
        width: 130px;
        height: 32px;
    }
    
    .subcat-list-card__btn-text {
        font-size: 13px;
    }

    /* 記事一覧セクション */
    .category-article-section {
        padding: 32px 16px 64px;
    }
    
    .category-article-header {
        margin-bottom: 32px;
    }
    
    .category-article-header__title {
        font-size: 24px;
        margin-bottom: 4px;
    }
    
    .category-article-header__count {
        font-size: 24px;
    }
    
    .article-card__body {
        padding: 16px;
    }
    
    .article-card__title {
        font-size: 24px;
    }
    
    .article-card__tags {
        margin-top: 12px;
    }
    
    .article-card__tags span,
    .article-card__tags .article-tag {
        font-size: 12px;
    }
    
    .article-card__date {
        margin-top: 12px;
        font-size: 12px;
    }

    .category-article-footer {
        margin-top: 32px;
    }
}


@media screen and (max-width: 767px) {
    .page-dashboard-v3 .archive-hero-title {
        line-height: 40px !important;
    }
}

@media screen and (max-width: 767px) {
    .dashboard-toc__inner {
        padding: 24px 16px !important;
    }
    .dashboard-toc__grid {
        grid-template-columns: minmax(0, 1fr) !important;
        margin: 0 0 24px 0 !important;
    }
    .dashboard-toc__item {
        min-width: 0 !important;
    }
    .archive-hero-banner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* --- チャート6・16のラベルをグラフ下に並べる調整 --- */
    #sec-chart6 .dashboard-section__graph,
    #sec-chart16 .dashboard-section__graph {
        padding-bottom: 80px !important; /* ラベル用のスペースを下部に確保 */
    }
    .chart6-custom-label {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        width: 50% !important;
        text-align: center !important;
        font-size: 13px !important;
    }
    .chart6-custom-label--left {
        left: 0 !important;
    }
    .chart6-custom-label--right {
        right: 0 !important;
        left: auto !important;
    }
    .chart6-custom-label::after {
        display: none !important; /* スマホでは引出線を非表示 */
    }
    /* ラベルの前に凡例の色ドットを追加 */
    .chart6-custom-label .label-txt::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
        background-color: #A3EFFF; /* 事業主 (水色) */
    }
    .chart6-custom-label--right .label-txt::before {
        background-color: #FCA981 !important; /* 被保険者 (オレンジ) */
    }
    .chart6-custom-label .label-val {
        font-size: 20px !important;
    }
    
    /* 12項目目 下部の表を縦並びに＆一番大きい幅に揃える */
    .dashboard-summary-boxes {
        flex-direction: column !important;
        gap: 8px !important;
        width: fit-content !important; /* 中身の最大幅に合わせる */
        max-width: none !important;
        margin: 16px auto 0 !important; /* 上に16px空け、左右中央寄せ */
    }
    .dashboard-summary-box {
        padding: 24px !important; /* 上下左右に24pxの余白 */
        aspect-ratio: auto !important; /* 正方形指定を解除 */
        width: auto !important; 
    }
}