/* ============================================
   CSS変数定義
   ============================================ */
:root {
    /* カラー */
    --color-primary: #121212;
    --color-secondary: #9D9D9D;
    --color-accent: #235D23;
    --color-background: #FAFAFA;
    --color-white: #FFFFFF;
    --color-overlay-dark: rgba(0, 0, 0, 0.6);
    --color-overlay-light: rgba(18, 18, 18, 0.05);
    
    /* フォント */
    --font-family: 'Shippori Mincho B1', serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* タイポグラフィ - PC */
    --line-height-pc: 1.5;
    --letter-spacing-pc: 0.05em;
    --font-size-title-pc: 24px;
    --font-size-body-pc: 16px;
    --font-size-category-pc: 14px;
    --font-size-nav-pc: 14px;
    
    /* タイポグラフィ - SP */
    --line-height-sp: 1.3;
    --letter-spacing-sp: 0.05em;
    --font-size-title-sp: 20px;
    --font-size-body-sp: 14px;
    --font-size-category-sp: 14px;
    --font-size-nav-sp: 16px;
    
    /* スペーシング */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 102px;
    --spacing-5xl: 120px;
    
    /* レイアウト */
    --max-width-container: 1920px;
    --max-width-content: 1175px;
    --max-width-search: 665px;
    --padding-pc: 372px;
    --padding-mobile: 20px;
    --padding-mobile-inner: 40px;
    
    /* シャドウ */
    --shadow-inner: inset 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
    
    /* トランジション */
    --transition-base: 0.3s;
}

/* ============================================
   リセット & ベーススタイル
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-primary);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

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

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

ul {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

input {
    font-family: inherit;
    border: none;
    outline: none;
}

/* ============================================
   メインコンテナ
   ============================================ */
.blog {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    background-color: var(--color-background);
    overflow-x: hidden;
}

/* ============================================
   記事ページ共通レイアウト
   ============================================ */
.blog--article {
    background-color: var(--color-background);
}

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

/* トップ画像上のテキスト */
.article-page__hero-overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
}

.article-page__hero-overlay-text-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-left: 160px;
}

.article-page__hero-overlay-line1 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 48px;
    line-height: 1;
    color: var(--color-white);
}

.article-page__hero-overlay-line2 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 20px;
    line-height: 1;
    color: var(--color-white);
}

.blog__hero-background--article {
    position: relative !important;
    height: 360px !important;
    overflow: hidden;
}

.blog__hero-image--article {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-page__hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.article-page__hero-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.article-page__hero-block--pc {
    display: flex;
}

.article-page__hero-block--sp {
    display: none;
}

.article-page__hero-main {
    width: 100%;
}

.article-page__hero-main-image {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    display: block;
}

.article-page__hero-text-layer {
    width: 100%;
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl) 0;
}

.article-page__hero-label {
    width: auto;
    max-width: 150px;
}

.article-page__hero-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-lg);
}

.article-page__hero-title-image {
    max-width: 280px;
}

.article-page__hero-date-image {
    max-width: 130px;
}

.article-page__hero-body-image {
    width: 100%;
    max-width: 100%;
}

.article-page {
    width: 100%;
    background-color: #F3F3F3;
}

.article-page__breadcrumb {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px 0 0;
}

.article-page__breadcrumb-inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 120px);
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.article-page__breadcrumb-link,
.article-page__breadcrumb-current,
.article-page__breadcrumb-separator {
    font: inherit;
    color: inherit;
}

.article-page__breadcrumb-current {
    font-weight: var(--font-weight-medium);
}

.article-page__content-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    padding-top: 80px; /* パンくずリスト追加に合わせて余白を少し減らす */
    margin-top: 0;
}

.article-page__content-container {
    width: 768px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
    box-sizing: border-box;
}

/* ============================================
   CONTACTページ
   ============================================ */
.contact-page__content-container {
    gap: 40px;
}

.contact-page__title-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* 確認ページのタイトルを中央寄せに */
    gap: 10px;
    margin-bottom: 20px; 
}

.contact-page__title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 24px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    text-align: center;
}

.contact-page__subtitle {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
}

.contact-page__form-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.contact-page__form {
    width: 780px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-page__form-group {
    display: grid;
    grid-template-columns: 200px 560px;
    column-gap: 19px;
    row-gap: 8px;
    align-items: center;
}

.contact-page__label-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.contact-page__label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    flex: 0 1 auto;
    word-break: keep-all;
}

.contact-page__required {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--color-white);              /* 文字色：白 */
    background-color: var(--color-accent);  /* 背景色：#235D23 */
    padding: 2px 6px;                       /* 上下2px 左右6px */
    border-radius: 3px;                     /* 角丸3px */
    white-space: nowrap;                    /* 2行に折り返さない */
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.contact-page__input-wrapper {
    width: 100%;
}

.contact-page__input,
.contact-page__textarea {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    padding: 10px 16px;
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: var(--shadow-inner);
    border: none;
    outline: none;
    box-sizing: border-box;
}

.contact-page__input::placeholder,
.contact-page__textarea::placeholder {
    color: #9D9D9D;
}

.contact-page__textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-page__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 68px;       /* お問い合わせ内容フォームとボタンの間隔 68px */
    margin-bottom: 120px;   /* フッターとの間隔を120px確保 */
}

.contact-page__submit-button {
    padding: 12px 40px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.contact-page__submit-button:hover {
    opacity: 0.9;
}

/* Contact Form 7 スタイル */
.contact-page__form-section .wpcf7-form {
    width: 780px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Contact Form 7 フォームグループ（カスタムクラス使用時） */
.contact-page__form-section .wpcf7-form .contact-page__form-group {
    display: grid;
    grid-template-columns: 200px 560px;
    column-gap: 19px;
    row-gap: 8px;
    align-items: center;
    margin: 0;
}

/* Contact Form 7 ラベルラッパー */
.contact-page__form-section .wpcf7-form .contact-page__label-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    grid-column: 1;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-width: 0;
}

/* Contact Form 7 ラベル */
.contact-page__form-section .wpcf7-form .contact-page__label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    flex: 0 1 auto;
    word-break: keep-all;
}

/* Contact Form 7 必須マーカー */
.contact-page__form-section .wpcf7-form .contact-page__required {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background-color: var(--color-accent);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* Contact Form 7 入力フィールドのラッパー */
.contact-page__form-section .wpcf7-form .contact-page__input-wrapper {
    grid-column: 2;
    width: 100%;
}

/* Contact Form 7 入力フィールドのラッパー（wpcf7-form-control-wrap） */
.contact-page__form-section .wpcf7-form .contact-page__input-wrapper .wpcf7-form-control-wrap,
.contact-page__form-section .wpcf7-form .wpcf7-form-control-wrap {
    width: 100%;
}

/* Contact Form 7 入力フィールド */
.contact-page__form-section .wpcf7-form .wpcf7-form-control,
.contact-page__form-section .wpcf7-form .contact-page__input-wrapper .wpcf7-form-control {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    padding: 10px 16px;
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: var(--shadow-inner);
    border: none;
    outline: none;
    box-sizing: border-box;
}

.contact-page__form-section .wpcf7-form .wpcf7-form-control::placeholder {
    color: #9D9D9D;
}

.contact-page__form-section .wpcf7-form textarea.wpcf7-form-control {
    min-height: 160px;
    resize: vertical;
}

/* Contact Form 7 送信ボタンのラッパー */
.contact-page__form-section .wpcf7-form .contact-page__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 68px;
    margin-bottom: 120px;
    grid-column: 1 / -1;
}

/* Contact Form 7 送信ボタン */
.contact-page__form-section .wpcf7-form .wpcf7-submit {
    padding: 12px 40px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.contact-page__form-section .wpcf7-form .wpcf7-submit:hover {
    opacity: 0.9;
}

/* Contact Form 7 レスポンスメッセージ */
.contact-page__form-section .wpcf7-response-output {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    grid-column: 1 / -1;
}

.contact-page__form-section .wpcf7-mail-sent-ok {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.contact-page__form-section .wpcf7-mail-sent-ng,
.contact-page__form-section .wpcf7-aborted,
.contact-page__form-section .wpcf7-spam,
.contact-page__form-section .wpcf7-validation-errors {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Contact Form 7 フォームグループ（pタグでラップされる場合のフォールバック） */
.contact-page__form-section .wpcf7-form > p:not(.contact-page__form-group):not(.contact-page__button-wrapper) {
    display: grid;
    grid-template-columns: 200px 560px;
    column-gap: 19px;
    row-gap: 8px;
    align-items: center;
    margin: 0;
}

.contact-page__form-section .wpcf7-form > p:not(.contact-page__form-group):not(.contact-page__button-wrapper) > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    grid-column: 1;
}

.contact-page__form-section .wpcf7-form > p:not(.contact-page__form-group):not(.contact-page__button-wrapper) > .wpcf7-form-control-wrap {
    grid-column: 2;
    width: 100%;
}

/* Contact Form 7 スマホ版スタイル */
@media screen and (max-width: 768px) {
    .contact-page__form-section .wpcf7-form {
        width: 100%;
        max-width: 300px;
    }

    .contact-page__form-section .wpcf7-form .contact-page__form-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }

    .contact-page__form-section .wpcf7-form .contact-page__label-wrapper {
        grid-column: auto;
    }

    .contact-page__form-section .wpcf7-form .contact-page__input-wrapper {
        grid-column: auto;
        width: 100%;
    }

    .contact-page__form-section .wpcf7-form .contact-page__button-wrapper {
        margin-top: 20px;
        margin-bottom: 64px;
        grid-column: auto;
    }

    .contact-page__form-section .wpcf7-form > p:not(.contact-page__form-group):not(.contact-page__button-wrapper) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }

    .contact-page__form-section .wpcf7-form > p:not(.contact-page__form-group):not(.contact-page__button-wrapper) > label {
        grid-column: auto;
    }

    .contact-page__form-section .wpcf7-form > p:not(.contact-page__form-group):not(.contact-page__button-wrapper) > .wpcf7-form-control-wrap {
        grid-column: auto;
        width: 100%;
    }
}

/* CONTACT確認テーブル */
.contact-confirm__table {
    width: 100%;
    max-width: 780px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-confirm__row {
    display: grid;
    grid-template-columns: 181px 1fr;
    column-gap: 19px;
    row-gap: 12px; /* 文字と文字の間隔：12px */
    align-items: center;
    padding: 15px 0; /* 文字と線の間隔：上下15px */
    position: relative;
}

.contact-confirm__label-cell {
    display: flex;
    align-items: flex-start; /* ラベル＋必須も上寄せに揃える */
    gap: 8px;
}

.contact-confirm__label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
}

.contact-confirm__value {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
}

.contact-confirm__row--message .contact-confirm__value {
    white-space: pre-line;
}

/* 横線（左181px: #235D23, 右599px: #9D9D9D） */
.contact-confirm__row::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        #235D23 0 181px,
        #9D9D9D 181px 100%
    );
}

.contact-confirm__row:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        #235D23 0 181px,
        #9D9D9D 181px 100%
    );
}

/* お問い合わせ内容のラベルとテキストは上寄せにする */
.contact-confirm__row--message {
    align-items: flex-start;
}

.contact-confirm__button-group {
    width: 100%;
    max-width: 780px;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 120px;
}

.contact-confirm__button--back {
    background-color: #9D9D9D;
}

/* ============================================
   CONTACT お問い合わせありがとうございましたページ
   ============================================ */
.contact-thanks__section {
    width: 100%;
    background-color: #F3F3F3; /* グレー背景 */
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.contact-thanks__card {
    width: 100%;
    max-width: 780px;
    background-color: var(--color-white);
    border-radius: 10px; /* 角丸10px */
    padding: 64px 122px; /* 上下64px、左右122px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.contact-thanks__title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 24px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    text-align: center;
}

.contact-thanks__message {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    text-align: center;
}

.contact-thanks__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.contact-thanks__button {
    text-decoration: none;
    display: inline-block;
}

/* ============================================
   CATEGORYページ
   ============================================ */
.category-page__filter-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: 120px; /* SEARCHセクションとカテゴリーリストの間隔：合計120px */
}

/* CATEGORYページ内のSEARCHセクション */
.article-page .blog__search-section {
    margin-top: 90px; /* パンくずリストとSEARCHセクションの間隔：90px */
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.category-page__filter-container {
    width: 1200px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.category-page__filter-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    align-self: stretch;
    flex-wrap: nowrap;
}

.category-page__filter-button {
    flex: 1;
    padding: 16px 0;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 12px;
    letter-spacing: var(--letter-spacing-pc);
    color: #9D9D9D; /* 選択されていない文字はグレー */
    background-color: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
    min-height: 12px;
    text-decoration: none;
}

.category-page__filter-button:hover {
    color: var(--color-primary);
}

.category-page__filter-button.active {
    color: var(--color-primary); /* 選択されている文字は黒 */
}

.category-page__filter-button.active::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-accent); /* 緑のアクセントカラー */
    display: block;
    flex-shrink: 0;
}

.category-page__articles-section {
    width: 100%;
    background-color: #F3F3F3; /* グレー背景（両端に見える） */
    display: flex;
    justify-content: center;
    padding: 24px 0 80px 0;
}

.category-page__articles-container {
    width: 1200px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin: 0 auto;
    padding: 80px 66px;
    box-sizing: border-box;
    background-color: var(--color-white); /* コンテナ内は白背景 */
}

.category-page__articles-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 24px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 20px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-page__articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.category-page__article-card {
    display: flex;
    flex-direction: column;
}

.category-page__article-image-wrapper {
    width: 100%;
    aspect-ratio: 249 / 166;
    overflow: hidden;
    margin-bottom: 16px; /* 画像とmetaの間隔：16px */
    position: relative;
}

.category-page__article-image-wrapper img,
.category-page__article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--transition-base) ease;
    transform: scale(1);
}

.category-page__article-image-wrapper:hover img,
.category-page__article-image-wrapper:hover .category-page__article-image,
.category-page__article-image-wrapper a:hover img,
.category-page__article-image-wrapper a:hover .category-page__article-image {
    transform: scale(1.1);
}

.category-page__article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: 1;
    letter-spacing: var(--letter-spacing-pc);
    color: #9D9D9D; /* グレー */
    margin-bottom: 10px; /* metaとタイトルの間隔：10px */
}

.category-page__article-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-page__article-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    margin-top: 0;
}

.category-page__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px; /* 矢印と数字、数字同士の間隔：24px */
    margin-top: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.category-page__pagination-ellipsis {
    font-family: var(--font-family);
    font-size: var(--font-size-body-pc);
    color: var(--color-primary);
    padding: 0 8px;
}

.category-page__pagination-button {
    width: 265px;
    height: 24px;
    padding: 0;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 前へ・次へボタンのスタイル */
.category-page__pagination-button--prev,
.category-page__pagination-button--next {
    width: 38px;
    height: 24px;
    padding: 0;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 1;
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 500px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.category-page__pagination-button--prev:hover,
.category-page__pagination-button--next:hover {
    opacity: 0.7;
}

.category-page__pagination-button--prev:disabled,
.category-page__pagination-button--next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.category-page__pagination-button:hover {
    opacity: 0.7;
}

.category-page__pagination-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ページ番号ボタンのスタイル */
.category-page__pagination-button--number {
    width: auto;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1;
    color: var(--color-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}

.category-page__pagination-button--number:hover {
    opacity: 0.7;
}

.category-page__pagination-button--number.active {
    background-color: transparent;
    color: var(--color-primary);
    opacity: 1;
    border-bottom: none;
}

.category-page__pagination-button--number.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 2px;
    background-color: var(--color-primary);
}

.category-page__pagination-numbers {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* 記事タイトル部分 */
.article-page__title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-md);
}

.article-page__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: var(--spacing-md);
}

.article-page__title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 24px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    margin: 0;
    flex: 1;
    text-align: center;
}

.article-page__date {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
    white-space: nowrap;
}

/* 記事タイトル画像 */
.article-page__title-image-wrapper {
    width: 100%;
    margin-top: 0;
}

.article-page__title-image {
    width: 100%;
    height: auto;
    display: block;
}

.article-page__lead-section {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.article-page__lead {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    width: 100%;
    max-width: 768.6px;
    text-align: left;
}

/* セクション（あらすじ、感想など） */
.article-page__section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.article-page__section-header {
    width: 100%;
    max-width: 768.6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-page__section-line {
    width: 0;
    height: 19px;
    border-left: 3px solid var(--color-accent);
    flex-shrink: 0;
    align-self: center;
}

.article-page__section-line {
    width: 0;
    height: 19px;
    border-left: 3px solid var(--color-accent);
    flex-shrink: 0;
}

.article-page__section-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 0;
}

.article-page__section-content {
    width: 100%;
    max-width: 768.6px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 目次セクション */
.article-page__table-of-contents {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 24px;
    padding-bottom: 32px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
    max-width: 353px;
    border-top: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    border-left: none;
    border-right: none;
    box-sizing: border-box;
}

.article-page__toc-list {
    width: 100%;
    max-width: 353px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.article-page__toc-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    text-align: center;
    margin: 0;
}

.article-page__toc-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.article-page__toc-number {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.article-page__toc-separator {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.article-page__toc-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

/* ============================================
   TOC+プラグインのスタイル
   ============================================ */

/* コンテナ */
#toc_container {
    width: 100%;
    max-width: 353px;
    margin: 0 auto;
    padding: 24px 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    background: none;
}

/* タイトル */
#toc_container .toc_title,
#toc_container p.toc_title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 20px;
    padding: 0;
}

/* トグルボタン・ブラケット（非表示） */
/* #toc_container .toc_toggle,
#toc_container .toc_brackets {
    display: none;
} */

/* リストコンテナ */
#toc_container .toc_list,
#toc_container ul.toc_list {
    width: 100%;
    max-width: 353px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    counter-reset: toc-counter;
    margin: 0 !important;
    padding: 0;
}

/* リスト内の全要素のリセット */
#toc_container .toc_list * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ネストされたリスト（非表示） */
#toc_container .toc_list ul,
#toc_container ul.toc_list ul {
    display: none;
}

/* リストアイテム */
#toc_container .toc_list li,
#toc_container ul.toc_list li {
    display: block;
    list-style: none !important;
    list-style-type: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 72px; /* 左に番号＋縦線分のスペースを確保（01 + 16px + | + 16px） */
}

/* リンク */
#toc_container .toc_list a {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    text-decoration: none;
}

#toc_container .toc_list a:hover {
    text-decoration: underline;
}

/* リストアイテム内のリンク */
#toc_container .toc_list > li > a {
    display: block;
}

/* 数字（01, 02, 03...） */
#toc_container .toc_list > li::before {
    content: counter(toc-counter, decimal-leading-zero);
    counter-increment: toc-counter;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    margin-right: 0; /* 位置指定で制御するためmarginは不要 */
}

/* 縦線（|） */
#toc_container .toc_list > li::after {
    content: "|";
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    position: absolute;
    top: 50%;
    left: 40px; /* 数字のあと + 16px の位置に縦線を配置 */
    transform: translateY(-50%);
    display: inline-block;
}

.article-page__paragraph {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 0;
    margin-bottom: 1.5em;
}

/* Gutenberg段落ブロックのスタイル */
.article-page__section-content p,
.article-page__section-content .wp-block-paragraph {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 0 0 24px 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.article-page__section-content p:last-child,
.article-page__section-content .wp-block-paragraph:last-child {
    margin-bottom: 0;
}

/* 記事内リンクのスタイル */
.article-page__section-content a {
    text-decoration: underline;
    color: var(--color-primary);
    overflow-wrap: break-word;
    word-break: break-all;
}

.article-page__section-content a:hover {
    text-decoration: none;
}

/* 記事内太字のスタイル */
.article-page__section-content strong,
.article-page__section-content b {
    font-weight: 900;
}

/* 記事内リストのスタイル */
.article-page__section-content ul,
.article-page__section-content ol,
.article-page__section-content .wp-block-list ul,
.article-page__section-content .wp-block-list ol {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 20px 0;
    padding-left: 0;
    list-style: none;
}

.article-page__section-content ul li,
.article-page__section-content .wp-block-list ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}

.article-page__section-content ul li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: -0.2em;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: 1.8em;
}

.article-page__section-content ol li,
.article-page__section-content .wp-block-list ol li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
    counter-increment: list-counter;
}

.article-page__section-content ol {
    counter-reset: list-counter;
}

.article-page__section-content ol li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    top: -0.2em;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    line-height: 1.8em;
}

.article-page__section-content ul li:last-child,
.article-page__section-content ol li:last-child,
.article-page__section-content .wp-block-list ul li:last-child,
.article-page__section-content .wp-block-list ol li:last-child {
    margin-bottom: 0;
}

/* ネストされたリスト */
.article-page__section-content ul ul,
.article-page__section-content ol ol,
.article-page__section-content ul ol,
.article-page__section-content ol ul,
.article-page__section-content .wp-block-list ul ul,
.article-page__section-content .wp-block-list ol ol {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}

.article-page__section-content ul ul li::before {
    content: "◦";
    position: absolute;
    left: 0;
    top: -0.2em;
    font-size: 18px;
    line-height: 1.8em;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

/* Gutenberg見出しブロック（h4, h5, h6）のスタイル */
.article-page__section-content h4.wp-block-heading {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 32px 0 12px 0;
}

.article-page__section-content h5.wp-block-heading {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 15px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 28px 0 12px 0;
}

.article-page__section-content h6.wp-block-heading {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 24px 0 12px 0;
}

/* Gutenberg引用ブロックのスタイル */
.article-page__section-content blockquote,
.article-page__section-content .wp-block-quote {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 24px 0;
    padding: 16px 0 16px 24px;
    border-left: 4px solid var(--color-accent);
    background-color: rgba(35, 93, 35, 0.05);
    font-style: italic;
}

.article-page__section-content blockquote p,
.article-page__section-content .wp-block-quote p {
    margin: 0 0 12px 0;
}

.article-page__section-content blockquote p:last-child,
.article-page__section-content .wp-block-quote p:last-child {
    margin-bottom: 0;
}

/* Gutenbergコードブロックのスタイル */
.article-page__section-content code,
.article-page__section-content .wp-block-code code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.6em;
    color: var(--color-primary);
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
}

.article-page__section-content pre,
.article-page__section-content .wp-block-code,
.article-page__section-content .wp-block-preformatted {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.6em;
    color: var(--color-primary);
    background-color: rgba(0, 0, 0, 0.05);
    padding: 16px;
    border-radius: 4px;
    margin: 24px 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.article-page__section-content pre code,
.article-page__section-content .wp-block-code code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Gutenberg区切り線のスタイル */
.article-page__section-content hr,
.article-page__section-content .wp-block-separator {
    border: none;
    border-top: 2px solid rgba(35, 93, 35, 0.2);
    margin: 32px 0;
    width: 100%;
}

/* Gutenbergテーブルのスタイル */
.article-page__section-content table,
.article-page__section-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.6em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.article-page__section-content table th,
.article-page__section-content .wp-block-table table th {
    background-color: rgba(35, 93, 35, 0.1);
    padding: 12px 16px;
    text-align: left;
    font-weight: var(--font-weight-bold);
    border: 1px solid rgba(35, 93, 35, 0.2);
}

.article-page__section-content table td,
.article-page__section-content .wp-block-table table td {
    padding: 12px 16px;
    border: 1px solid rgba(35, 93, 35, 0.2);
}

.article-page__section-content table tr:nth-child(even),
.article-page__section-content .wp-block-table table tr:nth-child(even) {
    background-color: rgba(35, 93, 35, 0.03);
}

/* Gutenberg画像ブロックのスタイル */
.article-page__section-content img,
.article-page__section-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    margin: 24px 0;
    border-radius: 4px;
}

.article-page__section-content .wp-block-image {
    margin: 24px 0;
}

.article-page__section-content .wp-block-image figcaption {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* Gutenberg埋め込みブロック（YouTube等）のスタイル */
.article-page__section-content .wp-block-embed {
    width: 100%;
    margin: 24px 0;
}

.article-page__section-content .wp-block-embed__wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    height: 0;
    overflow: hidden;
}

.article-page__section-content .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.article-page__section-content .wp-block-embed figcaption {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* 記事タグセクションのスタイル */
.article-page__tags-section {
    width: 100%;
}

.article-page__tags-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
}

.article-page__tag-chip {
    display: inline-block;
    padding: 6px 8px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background-color: var(--color-white);
    border-radius: 2px;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

.article-page__tag-chip:hover {
    opacity: 0.7;
}

.article-page__paragraph:last-child {
    margin-bottom: 0;
}

/* Gutenberg見出しブロック（h2）のスタイル - article-page__section-titleと同じ */
.article-page__section-content h2.wp-block-heading,
.article-page__section-content .wp-block-heading {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 53px 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* 縦線を::beforeで追加（h2のみ） */
.article-page__section-content h2.wp-block-heading::before,
.article-page__section-content h2.wp-block-heading::before {
    content: "";
    width: 0;
    height: 19px;
    border-left: 3px solid var(--color-accent);
    flex-shrink: 0;
    align-self: center;
}

/* Gutenberg見出しブロック（h3）のスタイル */
.article-page__section-content h3.wp-block-heading {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 40px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(35, 93, 35, 0.3); /* var(--color-accent)の薄い色 */
    width: 100%;
}

.article-page__body-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.article-page__body-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.article-page__sidebar-card {
    background-color: var(--color-white);
    padding: var(--spacing-lg);
}

.article-page__sidebar-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    margin-bottom: var(--spacing-md);
}

.article-page__sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.article-page__sidebar-item {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
}

.article-page__related-section {
    width: 100%;
    margin-top: var(--spacing-4xl);
    padding: 120px 0;
    display: flex;
    justify-content: center;
    background-color: var(--color-white);
}

.article-page__related-container {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    align-items: center;
}

.article-page__related-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    text-align: center;
}

.article-page__related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

/* CATEGORY LISTカード */
.article-page__category-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article-page__category-image {
    width: 100%;
    aspect-ratio: 450 / 260;
    overflow: hidden;
    position: relative;
}

.article-page__category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base) ease;
    transform: scale(1);
}

/* ホバー時の画像拡大効果 */
.article-page__category-image:hover img,
.article-page__category-image a:hover img {
    transform: scale(1.1);
}

/* 画像上のオーバーレイとラベル */
.article-page__category-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(18, 18, 18, 0.6); /* #121212 60% */
    z-index: 1;
}

.article-page__category-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-white);
}

.article-page__category-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.article-page__category-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

/* 画像下のラベル（チップ） */
.article-page__category-label-chips {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
}

.article-page__category-chip {
    display: inline-block;
    padding: 6px 8px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background-color: #F3F3F3;
    border-radius: 2px;
}

/* ============================================
   共通タイポグラフィスタイル
   ============================================ */
/* タイトル（コンテンツ＆ページタイトル） */
.blog__title-base {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    text-align: center;
}

/* 本文 */
.blog__body-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
}

/* カテゴリー＆タグ */
.blog__category-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
}

/* メタ情報（日付、カテゴリー、セパレーター） */
.blog__meta-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
}

/* ============================================
   ヒーローセクション（トップ）
   ============================================ */
.blog__hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 1080px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.blog__hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    z-index: 0;
    box-sizing: border-box;
}

.blog__hero-image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ナビゲーションメニュー */
.blog__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: transparent;
}

/* 記事ページ専用ナビゲーションスタイル */
.blog--article .blog__nav {
    position: relative;
    background-color: var(--color-white);
    height: 79px;
}

body.nav-menu-open .blog--article .blog__nav {
    position: relative;
    z-index: 102 !important;
}

.blog--article .blog__nav-wrapper {
    padding-top: 0;
    padding-bottom: 0;
    height: 79px;
}

.blog--article .blog__nav-link {
    color: var(--color-primary);
}

.blog--article .blog__nav-logo-image-white {
    display: none;
}

.blog--article .blog__nav-logo-image-black {
    display: block;
}

.blog--article .blog__nav-search-icon-white {
    display: none;
}

.blog--article .blog__nav-search-icon-black {
    display: block;
}

.blog--article .blog__nav-hamburger-line {
    background-color: var(--color-primary);
}

.blog__nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) 0;
    max-width: var(--max-width-container);
    margin: 0 auto;
    position: relative;
}

.blog__nav-logo {
    position: absolute;
    left: 56px;
    z-index: 1;
}

.blog__nav-logo-wrapper {
    position: relative;
    width: 105px;
    height: 54px;
}

.blog__nav-logo-image {
    width: 105px;
    height: 54px;
    position: absolute;
    top: 0;
    left: 0;
    transition: filter var(--transition-base);
}

.blog__nav-logo-image-white {
    display: block;
    filter: brightness(0) invert(1); /* 白 */
}

.blog__nav-logo-image-white:hover {
    filter: brightness(0) invert(0.616); /* #9D9D9D */
}

.blog__nav-logo-image-black {
    display: none;
    filter: brightness(0); /* 黒 */
}

.blog__nav-logo-image-black:hover {
    filter: brightness(0) invert(0.616); /* #9D9D9D */
}

body.nav-menu-open .blog__nav-logo-image-white {
    display: none !important;
}

body.nav-menu-open .blog__nav-logo-image-black {
    display: block !important;
}

body.nav-menu-open .blog__nav {
    z-index: 102 !important;
    background-color: var(--color-white) !important;
    position: relative;
}

body.nav-menu-open .blog__nav-wrapper {
    position: relative;
}

body.nav-menu-open .blog__nav-logo {
    z-index: 103 !important;
    position: absolute !important;
    pointer-events: auto;
    left: 56px !important;
    top: var(--spacing-lg) !important;
    transform: none !important;
}

body.nav-menu-open .blog__nav-right {
    z-index: 103 !important;
    position: absolute !important;
    pointer-events: auto;
    right: 56px !important;
    top: var(--spacing-lg) !important;
    transform: none !important;
}

body.nav-menu-open .blog__nav-hamburger {
    z-index: 104 !important;
    position: relative !important;
    pointer-events: auto;
}

body.nav-menu-open .blog__nav-logo a,
body.nav-menu-open .blog__nav-search-wrapper a {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.blog__nav-menu {
    display: flex;
    gap: var(--spacing-2xl);
    list-style: none;
    margin: 0 auto;
}

.blog__nav-link {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-nav-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
    transition: opacity var(--transition-base);
}

.blog__nav-link:hover {
    opacity: 0.7;
}

.blog__nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
    position: absolute;
    right: 56px;
    z-index: 1;
}

.blog__nav-search-wrapper {
    position: relative;
    width: 30px;
    height: 30px;
}

.blog__nav-search-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    transition: filter var(--transition-base);
}

.blog__nav-search-icon-white {
    display: block;
    filter: brightness(0) invert(1); /* 白 */
}

.blog__nav-search-icon-white:hover {
    filter: brightness(0) invert(0.616); /* #9D9D9D */
}

.blog__nav-search-icon-black {
    display: none;
    filter: brightness(0); /* 黒 */
}

.blog__nav-search-icon-black:hover {
    filter: brightness(0) invert(0.616); /* #9D9D9D */
}

body.nav-menu-open .blog__nav-search-icon-white {
    display: none !important;
}

body.nav-menu-open .blog__nav-search-icon-black {
    display: block !important;
}

/* ハンバーガーボタン */
.blog__nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 21px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 11;
    position: relative;
}

.blog__nav-hamburger-line {
    width: 32px;
    height: 1px;
    background-color: var(--color-white);
    transition: all var(--transition-base) ease;
    display: block;
    position: relative;
}

body.nav-menu-open .blog__nav-hamburger-line {
    background-color: var(--color-primary) !important;
}

/* ハンバーガーメニューが開いた時の❌マークアニメーション */
body.nav-menu-open .blog__nav-hamburger-line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

body.nav-menu-open .blog__nav-hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

body.nav-menu-open .blog__nav-hamburger-line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* ハンバーガーメニューオーバーレイ */
.blog__nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-white);
    z-index: 100;
    transition: right var(--transition-base) ease;
    overflow-y: auto;
}

.blog__nav-overlay.is-open {
    right: 0;
}

.blog__nav-overlay-content {
    padding: 80px var(--padding-mobile-inner);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blog__nav-overlay-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    list-style: none;
    align-items: center;
}

.blog__nav-overlay-link {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-nav-sp);
    line-height: var(--line-height-sp);
    letter-spacing: var(--letter-spacing-sp);
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--transition-base);
    text-align: center;
}

.blog__nav-overlay-link:hover {
    opacity: 0.7;
}

/* ヘッダーコンテンツ */
.blog__hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 var(--padding-pc);
}

.blog__hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    text-align: center;
    position: relative;
}

.blog__hero-text::before {
    content: '';
    position: absolute;
    top: -34px;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background-color: var(--color-overlay-light);
    z-index: -1;
    pointer-events: none;
}

.blog__title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 45px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
}

.blog__subtitle {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: 22px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
}

/* 自己紹介セクション */
.blog__about-section {
    width: 100%;
    margin-top: var(--spacing-4xl);
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog__about {
    position: relative;
    width: 590px;
    height: 196px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog__about-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 590px;
    height: 196px;
    overflow: hidden;
}

.blog__about-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-base) ease;
    transform: scale(1);
}

.blog__about-image:hover .blog__about-image-img {
    transform: scale(1.1);
}

.blog__about-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-dark);
    z-index: 1;
}

.blog__about-text {
    position: relative;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
    text-align: center;
    z-index: 2;
}

/* スクロールダウンインジケーター */
.blog__scroll-indicator {
    position: absolute;
    left: 56px;
    bottom: var(--spacing-2xl);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.blog__scroll-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.blog__scroll-union {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.blog__scroll-line {
    width: 2px;
    height: 40px;
    background-color: var(--color-white);
}

.blog__scroll-circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-white);
}

/* ============================================
   NEWセクション
   ============================================ */
.blog__new-section {
    width: 100%;
    margin-top: var(--spacing-4xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
}

.blog__new-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    text-align: center;
}

.blog__new-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
}

.blog__new-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    max-width: var(--max-width-content);
}

/* コンテナの横幅よりも小さい場合、2カラム（2x2）の配列にする */
/* paddingとgapは固定のまま、画像は親要素の幅に応じてシームレスに変化 */
@media screen and (max-width: 1175px) {
    .blog__new-section {
        padding-left: 120px;
        padding-right: 120px;
    }
    
    .blog__new-articles {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px; /* gapは固定 */
    }
}

.blog__new-article {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

.blog__new-article-image {
    width: 100%;
    aspect-ratio: 365 / 243;
    overflow: hidden;
    flex-shrink: 0;
}

.blog__new-article-image img,
.blog__new-article-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base) ease;
    transform: scale(1);
}

.blog__new-article-image:hover img,
.blog__new-article-image:hover .blog__new-article-image-img,
.blog__new-article-image a:hover img,
.blog__new-article-image a:hover .blog__new-article-image-img {
    transform: scale(1.1);
}

.blog__new-article-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.blog__new-article-meta {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.blog__new-article-date,
.blog__new-article-separator,
.blog__new-article-category {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
}

.blog__new-article-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog__new-article-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
}

.blog__new-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 汎用的なtagバッジスタイル */
.blog__article-tag-badge {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
    background-color: var(--color-accent);
    padding: 6px var(--spacing-sm);
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
}

.blog__more-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 190px;
    gap: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

/* 背景用の疑似要素（左から右に広がる） */
.blog__more-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    transform: translateX(-100%);
    transition: transform var(--transition-base) ease;
    z-index: 0;
}

.blog__more-link:hover::before {
    transform: translateX(0);
}

/* 上下の線 */
.blog__more-line {
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    position: relative;
    z-index: 1;
    transition: background-color var(--transition-base);
}

.blog__more-link:hover .blog__more-line {
    background-color: var(--color-white);
}

.blog__more-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    position: relative;
    z-index: 1;
    transition: color var(--transition-base);
}

.blog__more-link:hover .blog__more-text {
    color: var(--color-white);
}

/* ============================================
   POPULARセクション
   ============================================ */
.blog__popular-section {
    width: 100%;
    margin-top: var(--spacing-5xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
}

.blog__popular-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    text-align: center;
}

.blog__popular-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
}

.blog__popular-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    max-width: var(--max-width-content);
}

/* コンテナの横幅よりも小さい場合、2カラム（2x2）の配列にする */
/* paddingとgapは固定のまま、画像は親要素の幅に応じてシームレスに変化 */
@media screen and (max-width: 1175px) {
    .blog__popular-section {
        padding-left: 120px;
        padding-right: 120px;
    }
    
    .blog__popular-articles {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px; /* gapは固定 */
    }
}

.blog__popular-article {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

.blog__popular-article-image {
    position: relative;
    width: 100%;
    aspect-ratio: 365 / 243;
    overflow: hidden;
    flex-shrink: 0;
}

.blog__popular-article-image > img:first-child,
.blog__popular-article-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base) ease;
    transform: scale(1);
}

.blog__popular-article-image:hover > img:first-child,
.blog__popular-article-image:hover .blog__popular-article-image-img,
.blog__popular-article-image a:hover > img:first-child,
.blog__popular-article-image a:hover .blog__popular-article-image-img {
    transform: scale(1.1);
}

.blog__popular-ranking-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 40px;
    z-index: 1;
    object-fit: contain;
}

.blog__popular-article-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.blog__popular-article-meta {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.blog__popular-article-date,
.blog__popular-article-separator,
.blog__popular-article-category {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
}

.blog__popular-article-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog__popular-article-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
}

/* ランキング画像は各記事画像内に配置されるため、このセクションは不要 */

.blog__popular-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ============================================
   CATEGORYセクション
   ============================================ */
.blog__category-section {
    width: 100%;
    margin-top: var(--spacing-5xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-pc);
    padding-right: var(--padding-pc);
}

.blog__category-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    text-align: center;
}

/* ============================================
   記事カードセクション
   ============================================ */
.blog__articles-section {
    width: 100%;
    margin-top: var(--spacing-2xl);
}

.blog__articles-container {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.blog__category-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    background-color: var(--color-white);
    padding: var(--spacing-2xl) 78px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.blog__category-card-header {
    display: flex;
    align-items: center;
}

.blog__category-card-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
}

.blog__category-card-articles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;
    max-width: calc(249px * 4 + 40px * 3); /* 4カラム分の最大幅を制限 */
}

.blog__article-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.blog__article-image-wrapper {
    width: 100%;
    aspect-ratio: 249 / 166;
    overflow: hidden;
    flex-shrink: 0;
}

.blog__article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base) ease;
    transform: scale(1);
}

.blog__article-image-wrapper:hover .blog__article-image,
.blog__article-image-wrapper a:hover .blog__article-image {
    transform: scale(1.1);
}

.blog__article-date {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
}

.blog__article-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog__article-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
}

.blog__category-card-footer {
    display: flex;
    justify-content: center;
}

/* ============================================
   SEARCHセクション
   ============================================ */
.blog__search-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: var(--spacing-5xl);
}

.blog__search-container {
    width: 100%;
    max-width: var(--max-width-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.blog__search-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    text-align: center;
}

.blog__search-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.blog__search-box-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.blog__search-box {
    position: relative;
    width: 298px;
    height: 42px;
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: var(--shadow-inner);
    display: flex;
    align-items: center;
    padding-left: var(--spacing-md);
    padding-right: 10px;
    gap: 10px;
}

.blog__search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-family);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    padding: 0;
}

.blog__search-input::placeholder {
    color: var(--color-secondary);
}

.blog__search-box-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: brightness(0); /* 黒 */
    transition: filter var(--transition-base);
}

.blog__search-box-icon:hover {
    filter: brightness(0) invert(0.616); /* #9D9D9D */
}

.blog__search-tags {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog__search-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.blog__search-tag {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.blog__search-tag:hover {
    opacity: 0.7;
}

/* ============================================
   CONTACTセクション
   ============================================ */
.blog__contact-section {
    position: relative;
    width: 100%;
    margin-top: var(--spacing-5xl);
    height: 390px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.blog__contact-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.blog__contact-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base) ease;
    transform: scale(1);
    pointer-events: none;
}

.blog__contact-section:hover .blog__contact-background-image {
    transform: scale(1.1);
}

.blog__contact-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    /* padding-left: var(--padding-pc);
    padding-right: var(--padding-pc); */
}

.blog__contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg); /* PCサイズ: 行間24px */
    align-items: flex-start;
    padding-left: 78px; /* blog__category-cardと同じ左padding（78px） */
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition-base);
    position: relative;
    z-index: 2;
    color: inherit;
}

.blog__contact-card:hover {
    opacity: 0.9;
}

.blog__contact-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: 56px; /* PCサイズ: 56px */
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
    text-align: left;
}

.blog__contact-line {
    width: 74px; /* PCサイズ: CONTACTの「CO」くらいまで74px */
    height: 1px;
    background-color: var(--color-white);
}

.blog__contact-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-pc); /* PCサイズ: 16px */
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
}

/* ============================================
   フッター
   ============================================ */
.blog__footer {
    width: 100%;
    padding: 0 var(--padding-pc);
    padding-top: 56px; /* PCサイズ: 画像の上に56px */
    padding-bottom: 16px; /* PCサイズ: コピーライトと下端の間隔16px */
    background-color: var(--color-primary);
}

.blog__footer-container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog__footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 48px; /* PCサイズ: 画像の下は48px */
}

.blog__footer-logo-image {
    width: 105px; /* PCサイズ: topと同じサイズ */
    height: 54px; /* PCサイズ: topと同じサイズ */
    filter: brightness(0) invert(1); /* 白 */
}

.blog__footer-nav {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: 40px; /* PCサイズ: ナビゲーションの40px下にコピーライト */
}

.blog__footer-nav-link {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-white);
}

.blog__footer-copyright {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-category-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-secondary);
}

/* ============================================
   レスポンシブデザイン（モバイル）
   ============================================ */
@media screen and (max-width: 768px) {
    /* ヒーローセクション */
    .blog__hero {
        height: 100vh;
        min-height: 667px;
        overflow: hidden;
    }

    .blog__hero--article {
        min-height: auto;
    }

    /* 記事ページ用ナビゲーション（スマホサイズ） */
    .blog--article .blog__nav {
        height: 53.54px;
    }

    .blog--article .blog__nav-wrapper {
        height: 53.54px;
    }

    /* トップ画像上のテキスト（スマホサイズ） */
    .blog__hero-background--article {
        height: 153px !important;
    }

    .article-page__hero-overlay-text-inner {
        gap: 12px;
        margin-left: 37px;
    }

    .article-page__hero-overlay-line1 {
        font-size: 28px;
    }

    .article-page__hero-overlay-line2 {
        font-size: 14px;
    }
    
    .blog__hero-background {
        max-width: 100%;
        overflow: hidden;
    }
    
    .blog__hero-image {
        max-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .blog__nav-wrapper {
        padding-top: 14px;
        padding-bottom: var(--spacing-md);
        padding-left: 0;
        padding-right: 0;
    }
    
    .blog__nav-logo {
        left: var(--padding-mobile);
        top: 14px;
        position: absolute;
    }
    
    .blog__nav-right {
        right: var(--padding-mobile);
        top: 14px;
        position: absolute;
    }
    
    .blog__nav-hamburger {
        display: flex;
    }
    
    /* ハンバーガーメニュー開時（スマホサイズ） */
    body.nav-menu-open .blog__nav-logo {
        left: var(--padding-mobile) !important;
        top: 14px !important;
        position: absolute !important;
    }
    
    body.nav-menu-open .blog__nav-right {
        right: var(--padding-mobile) !important;
        top: 14px !important;
        position: absolute !important;
    }
    
    body.nav-menu-open .blog__nav-hamburger {
        position: relative !important;
    }
    
    .blog__nav-logo-image {
        width: 75px;
        height: 38.31px;
    }
    
    .blog__nav-logo-wrapper {
        width: 75px;
        height: 38.31px;
    }
    
    .blog__nav-search-icon {
        width: 26px;
        height: 25.15px;
    }
    
    .blog__nav-menu {
        display: none;
    }
    
    .blog__hero-content {
        padding: 0 var(--padding-mobile);
    }

    .article-page__hero-content {
        padding: 0;
    }

    .article-page__hero-block--pc {
        display: none;
    }

    .article-page__hero-block--sp {
        display: flex;
    }

    .article-page__hero-text-layer {
        max-width: 375px;
        padding: var(--spacing-xl) var(--padding-mobile);
        gap: var(--spacing-md);
    }

    .article-page__content-section {
        padding: 0;
        padding-top: 43px;
        margin-top: 0;
    }

    .article-page__content-container {
        width: 300px;
        max-width: 100%;
        gap: var(--spacing-lg);
        box-sizing: border-box;
    }

    /* 記事タイトル部分（スマホサイズ） */
    .article-page__title-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .article-page__title-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    .article-page__title {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
        text-align: left;
        flex: 1;
        margin: 0;
    }

    .article-page__date {
        font-size: var(--font-size-category-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
        white-space: nowrap;
    }

    /* 記事タイトル画像（スマホサイズ） */
    .article-page__title-image-wrapper {
        margin-top: 0;
    }

    .article-page__lead-section {
        margin-bottom: 16px;
    }

    .article-page__lead {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
        max-width: 100%;
    }

    .article-page__section {
        align-items: flex-end;
        gap: 16px;
        margin-bottom: 16px;
    }

    .article-page__section-header {
        max-width: 100%;
    }

    .article-page__section-line {
        height: 13px;
    }

    .article-page__section-title {
        font-size: 18px;
        line-height: 1.5em;
        letter-spacing: 0.05em;
    }

    /* Gutenberg見出しブロック（h2）のスタイル（スマホサイズ） */
    .article-page__section-content h2.wp-block-heading,
    .article-page__section-content .wp-block-heading {
        font-size: 18px;
        line-height: 1.5em;
        letter-spacing: 0.05em;
        margin-top: 40px;
    }

    /* 縦線の高さをスマホサイズに調整（h2のみ） */
    .article-page__section-content h2.wp-block-heading::before {
        height: 1.5em; /* 文字のline-heightと同じ高さ（27px） */
        align-self: center; /* 上下中央に配置 */
    }

    /* Gutenberg見出しブロック（h3）のスタイル（スマホサイズ） */
    .article-page__section-content h3.wp-block-heading {
        font-size: 16px;
        line-height: 1.5em;
        letter-spacing: 0.05em;
        margin-top: 32px;
        margin-bottom: 12px;
        padding-bottom: 6px;
    }

    .article-page__section-content {
        max-width: 100%;
    }

    .article-page__paragraph {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
        margin-bottom: 1.5em;
    }

    /* Gutenberg段落ブロックのスタイル（スマホサイズ） */
    .article-page__section-content p,
    .article-page__section-content .wp-block-paragraph {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
        margin-bottom: 24px;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* 記事内リストのスタイル（スマホサイズ） */
    .article-page__section-content ul,
    .article-page__section-content ol,
    .article-page__section-content .wp-block-list ul,
    .article-page__section-content .wp-block-list ol {
        font-size: var(--font-size-body-sp);
        line-height: 1.8em;
        margin: 18px 0;
    }

    .article-page__section-content ul li,
    .article-page__section-content .wp-block-list ul li {
        padding-left: 24px;
        margin-bottom: 8px;
    }

    .article-page__section-content ul li::before {
        top: -0.2em;
        font-size: 18px;
        line-height: 1.8em;
    }

    .article-page__section-content ol li,
    .article-page__section-content .wp-block-list ol li {
        padding-left: 28px;
        margin-bottom: 8px;
    }

    .article-page__section-content ol li::before {
        top: -0.2em;
        font-size: 16px;
        line-height: 1.8em;
    }

    .article-page__section-content ul ul,
    .article-page__section-content ol ol,
    .article-page__section-content ul ol,
    .article-page__section-content ol ul,
    .article-page__section-content .wp-block-list ul ul,
    .article-page__section-content .wp-block-list ol ol {
        margin-top: 8px;
        margin-bottom: 8px;
        margin-left: 16px;
    }

    .article-page__section-content ul ul li::before {
        top: -0.2em;
        font-size: 16px;
        line-height: 1.8em;
    }

    /* Gutenberg見出しブロック（h4, h5, h6）のスタイル（スマホサイズ） */
    .article-page__section-content h4.wp-block-heading {
        font-size: 15px;
        margin: 28px 0 10px 0;
    }

    .article-page__section-content h5.wp-block-heading {
        font-size: 14px;
        margin: 24px 0 10px 0;
    }

    .article-page__section-content h6.wp-block-heading {
        font-size: 13px;
        margin: 20px 0 10px 0;
    }

    /* Gutenberg引用ブロックのスタイル（スマホサイズ） */
    .article-page__section-content blockquote,
    .article-page__section-content .wp-block-quote {
        font-size: var(--font-size-body-sp);
        margin: 20px 0;
        padding: 12px 0 12px 20px;
    }

    /* Gutenbergコードブロックのスタイル（スマホサイズ） */
    .article-page__section-content code,
    .article-page__section-content .wp-block-code code {
        font-size: 12px;
    }

    .article-page__section-content pre,
    .article-page__section-content .wp-block-code,
    .article-page__section-content .wp-block-preformatted {
        font-size: 12px;
        padding: 12px;
        margin: 20px 0;
    }

    /* Gutenberg区切り線のスタイル（スマホサイズ） */
    .article-page__section-content hr,
    .article-page__section-content .wp-block-separator {
        margin: 28px 0;
    }

    /* Gutenbergテーブルのスタイル（スマホサイズ） */
    .article-page__section-content table,
    .article-page__section-content .wp-block-table table {
        font-size: var(--font-size-body-sp);
        margin: 20px 0;
    }

    .article-page__section-content table th,
    .article-page__section-content .wp-block-table table th,
    .article-page__section-content table td,
    .article-page__section-content .wp-block-table table td {
        padding: 8px 12px;
    }

    /* Gutenberg画像ブロックのスタイル（スマホサイズ） */
    .article-page__section-content img,
    .article-page__section-content .wp-block-image img {
        margin: 20px 0;
    }

    .article-page__section-content .wp-block-image {
        margin: 20px 0;
    }

    .article-page__section-content .wp-block-image figcaption {
        font-size: 12px;
        margin-top: 6px;
    }

    /* 記事タグセクションのスタイル（スマホサイズ） */

    .article-page__tags-container {
        column-gap: 8px;
        row-gap: 8px;
    }

    .article-page__tag-chip {
        font-size: 12px;
        padding: 5px 7px;
    }

    /* Gutenberg埋め込みブロック（YouTube等）のスタイル（スマホサイズ） */
    .article-page__section-content .wp-block-embed {
        margin: 20px 0;
    }

    .article-page__section-content .wp-block-embed figcaption {
        font-size: 12px;
        margin-top: 6px;
    }

    /* 目次セクション（スマホサイズ） */
    .article-page__table-of-contents {
        max-width: 100%;
        padding-top: 16px;
        padding-bottom: 24px;
        padding-left: 20px;
        padding-right: 20px;
        gap: 16px;
    }

    .article-page__toc-title {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
    }

    .article-page__toc-list {
        max-width: 100%;
        gap: 12px;
    }

    .article-page__toc-item {
        gap: 12px;
    }

    .article-page__toc-number,
    .article-page__toc-text {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
    }

    /* TOC+プラグインのスタイル（スマホサイズ） */
    #toc_container {
        max-width: 100%;
        padding: 16px 20px 24px;
    }

    #toc_container .toc_title,
    #toc_container p.toc_title {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
    }

    #toc_container .toc_list,
    #toc_container ul.toc_list {
        max-width: 100%;
        gap: 10px;
    }

    #toc_container .toc_list > li::before {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
        margin-right: 16px !important;
    }

    #toc_container .toc_list > li > a::before {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
        margin-right: 16px !important;
    }

    #toc_container .toc_list a {
        font-size: var(--font-size-body-sp);
        line-height: 1.5em;
        letter-spacing: 0.05em;
    }

    .article-page__related-section {
        padding: 80px 0;
        margin-top: var(--spacing-2xl);
    }
    
    .article-page__related-container {
        max-width: 100%;
        gap: 24px; /* CATEGORY LIST と 1行目のカードの間隔 24px */
        padding: 0 var(--padding-mobile-inner); /* NEW/POPULARセクションと同じpadding */
        box-sizing: border-box;
    }
    
    .article-page__related-title {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }

    .article-page__related-grid {
        grid-template-columns: 1fr;
        gap: 32px; /* カード同士の縦方向の間隔 32px */
        justify-items: stretch;  /* カードを左寄せ（NEW/POPULARと同じ） */
    }
    
    .article-page__category-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* ラベルを左寄せ */
    }
    
    .article-page__category-image {
        width: 100%;     /* カードの横幅いっぱいに広げる */
        height: auto;    /* 縦横比を維持 */
        aspect-ratio: 450 / 260; /* PCサイズと同じアスペクト比を維持 */
    }

    /* パンくず（スマホ）は記事本体と同じ開始位置に揃える（幅300px・中央寄せ） */
    .article-page__breadcrumb-inner {
        width: 300px;
        max-width: 100%;
        margin: 0 auto;
    }

    /* CONTACTフォーム（スマホ）は縦並びにする */
    .contact-page__form {
        width: 100%;
        max-width: 300px;
    }

    .contact-page__form-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }

    /* CONTACTボタン周り（スマホ） */
    .contact-page__button-wrapper {
        margin-top: 20px;      /* お問い合わせ内容フォームとボタンの間隔 20px */
        margin-bottom: 64px;   /* ボタンとフッターの間隔 64px */
    }

    /* CONTACT確認テーブル（スマホ） */
    .contact-confirm__table {
        max-width: 300px;
    }

    .contact-confirm__row {
        grid-template-columns: 1fr;
        padding: 15px 0;      /* 文字と線の間隔：上下15px */
        row-gap: 12px;        /* 1行目タイトル / 2行目記載内容の間隔12px */
    }

    /* CONTACT確認ボタン（スマホ） */
    .contact-confirm__button-group {
        flex-direction: column; /* 縦に並べる */
        align-items: center;    /* ボタンを中央に配置 */
        gap: 12px;
        margin-top: 20px;     /* 線とボタンの間隔：40px */
    }

    .contact-confirm__button-group .contact-page__submit-button {
        width: 60%;         /* ボタンの幅を揃える */
    }

    .contact-confirm__label-cell,
    .contact-confirm__value {
        width: 100%;
    }

    /* 横線は#235D23のみ */
    .contact-confirm__row::after,
    .contact-confirm__row:first-child::before {
        background: #235D23;
    }

    /* CONTACT お問い合わせありがとうございました（スマホ） */
    .contact-thanks__section {
        padding: 40px var(--padding-mobile);
    }

    .contact-thanks__card {
        max-width: 100%;
        padding: 40px var(--padding-mobile);
        gap: 16px;
    }

    .contact-thanks__title {
        font-size: 20px;
    }

    .contact-thanks__message {
        font-size: 14px;
    }

    /* CATEGORYページ（スマホ） */
    .category-page__filter-section {
        margin-top: 64px; /* SEARCHセクションとカテゴリーリストの間隔：64px */
    }

    .category-page__filter-container {
        /* padding: 0 var(--padding-mobile); */
        gap: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .category-page__filter-row {
        display: contents; /* グリッドの子要素として直接配置 */
    }

    .category-page__filter-button {
        width: 100%;
        padding: 12px 24px;
        font-size: 16px;
        flex: none;
        text-align: left;
        justify-content: flex-start;
    }

    .category-page__articles-section {
        padding: 24px var(--padding-mobile) 0 var(--padding-mobile);
        margin-bottom: 64px;
    }

    .category-page__articles-title {
        text-align: left;
    }

    .category-page__article-card {
        flex-direction: row;
        gap: 12px;
        align-items: flex-start;
    }

    .category-page__article-image-wrapper {
        width: 131px;
        height: 87px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .category-page__article-image-wrapper img,
    .category-page__article-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .category-page__article-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 12px;
    }

    .category-page__article-meta {
        margin-bottom: 0;
    }

    .category-page__article-title {
        margin: 0;
    }

    .category-page__articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .category-page__pagination {
        gap: 0;
        padding: 0 31px;
        width: 100%;
        box-sizing: border-box;
    }

    .category-page__pagination-numbers {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .category-page__pagination-button--prev,
    .category-page__pagination-button--next {
        width: 38px;
        height: 24px;
        flex-shrink: 0;
    }

    .category-page__pagination-button--prev {
        margin-right: 24px;
    }

    .category-page__pagination-button--next {
        margin-left: 24px;
    }

    .category-page__articles-container {
        gap: 24px;
        padding: 24px 18px;
    }

    .category-page__articles-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .category-page__pagination-button--number {
        width: auto;
        min-width: 24px;
        height: 24px;
        font-size: var(--font-size-body-sp);
    }
    
    .blog__hero-text {
        gap: var(--spacing-lg);
    }
    
    .blog__hero-text::before {
        top: -32px;
        bottom: -32px;
    }
    
    .blog__title {
        font-size: 26px;
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__subtitle {
        font-size: 18px;
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    /* 自己紹介セクション */
    .blog__about-section {
        margin-top: var(--spacing-3xl);
        padding-left: var(--padding-mobile-inner);
        padding-right: var(--padding-mobile-inner);
    }
    
    .blog__about {
        width: 100%;
        max-width: 100%;
        height: 100px;
    }
    
    .blog__about-image {
        width: 100%;
        max-width: 100%;
        height: 100px;
    }
    
    .blog__about-text {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    /* スクロールダウンインジケーター */
    .blog__scroll-indicator {
        left: var(--padding-mobile);
        bottom: var(--spacing-2xl);
    }
    
    .blog__scroll-text {
        font-size: var(--font-size-body-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    /* NEWセクション */
    .blog__new-section {
        padding-left: var(--padding-mobile-inner);
        padding-right: var(--padding-mobile-inner);
        margin-top: var(--spacing-3xl);
    }
    
    .blog__new-title {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__new-articles {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        max-width: 100%;
        margin: 0 auto;
    }
    
    .blog__new-article {
        flex-direction: row;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    
    .blog__new-article-image {
        width: 156px;
        height: 100px;
        flex-shrink: 0;
    }
    
    .blog__new-article-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        justify-content: flex-start;
    }
    
    .blog__new-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .blog__new-article-separator {
        display: none;
    }
    
    .blog__new-article-date,
    .blog__new-article-category {
        font-size: var(--font-size-category-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__new-article-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .blog__new-article-title-row .blog__article-tag-badge {
        font-size: 12px;
        padding: 6px var(--spacing-sm);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__new-article-title {
        font-size: var(--font-size-body-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    /* POPULARセクション */
    .blog__popular-section {
        padding-left: var(--padding-mobile-inner);
        padding-right: var(--padding-mobile-inner);
        margin-top: var(--spacing-2xl);
    }
    
    .blog__popular-title {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__popular-articles {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        max-width: 100%;
        margin: 0 auto;
    }
    
    .blog__popular-article {
        flex-direction: row;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    
    .blog__popular-article-image {
        width: 156px;
        height: 100px;
        flex-shrink: 0;
    }
    
    .blog__popular-ranking-image {
        width: 39px;
        height: 32px;
    }
    
    .blog__popular-article-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        justify-content: flex-start;
    }
    
    .blog__popular-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .blog__popular-article-separator {
        display: none;
    }
    
    .blog__popular-article-date,
    .blog__popular-article-category {
        font-size: var(--font-size-category-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__popular-article-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .blog__popular-article-title-row .blog__article-tag-badge {
        font-size: 12px;
        padding: 6px var(--spacing-sm);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__popular-article-title {
        font-size: var(--font-size-body-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    /* CATEGORYセクション */
    .blog__category-section {
        padding-left: var(--padding-mobile);
        padding-right: var(--padding-mobile);
        margin-top: var(--spacing-3xl);
    }
    
    .blog__category-title {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__articles-container {
        padding: 0 var(--padding-mobile);
        gap: var(--spacing-md);
    }
    
    .blog__category-card {
        padding: var(--spacing-lg) 18px;
        gap: var(--spacing-lg);
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .blog__new-container,
    .blog__popular-container {
        gap: var(--spacing-lg);
    }
    
    .blog__category-card-articles {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .blog__article-card {
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--spacing-xs) 12px;
        align-items: flex-start;
    }
    
    .blog__article-image-wrapper {
        width: 120px;
        height: 80px;
        grid-column: 1;
        grid-row: 1 / 4;
    }
    
    .blog__article-date {
        font-size: var(--font-size-category-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
        grid-column: 2;
        grid-row: 1;
    }
    
    .blog__article-title-row {
        display: contents;
    }
    
    .blog__article-title-row .blog__article-tag-badge {
        font-size: 12px;
        padding: 6px var(--spacing-sm);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
        grid-column: 2;
        grid-row: 2;
    }
    
    .blog__article-title {
        font-size: var(--font-size-body-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
        grid-column: 2;
        grid-row: 3;
    }
    
    /* SEARCHセクション */
    .blog__search-section {
        padding: 0 var(--padding-mobile);
        margin-top: var(--spacing-3xl);
    }
    
    .blog__search-container {
        max-width: 100%;
        gap: var(--spacing-lg);
    }
    
    .blog__search-title {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__search-content {
        gap: var(--spacing-md);
    }
    
    .blog__search-box {
        width: 100%;
        max-width: 298px;
    }
    
    .blog__search-input {
        font-size: var(--font-size-body-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__search-tags {
        gap: var(--spacing-sm);
    }
    
    .blog__search-tags-row {
        gap: var(--spacing-sm);
    }
    
    .blog__search-tag {
        font-size: var(--font-size-category-sp);
        padding: 6px 12px;
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    /* CONTACTセクション */
    .blog__contact-section {
        height: 191px;
    }
    
    .blog__contact-container {
        padding-left: var(--padding-mobile); /* blog__category-sectionと同じ左padding */
        padding-right: var(--padding-mobile);
    }
    
    .blog__contact-card {
        gap: var(--spacing-md); /* スマホサイズ: 行間16px */
        padding-left: 18px; /* blog__category-cardと同じ左padding（18px） */
    }
    
    .blog__contact-title {
        font-size: 32px; /* スマホサイズ: 32px */
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__contact-line {
        width: 38px; /* スマホサイズ: CONTACTの「CO」くらいまで38px */
    }
    
    .blog__contact-text {
        font-size: var(--font-size-body-sp); /* スマホサイズ: 14px */
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    /* フッター */
    .blog__footer {
        padding: 0 var(--padding-mobile);
        padding-top: 40px; /* スマホサイズ: 画像の上に40px */
        padding-bottom: 16px; /* スマホサイズ: コピーライトと下端の間隔16px */
    }
    
    .blog__footer-logo {
        margin-bottom: 40px; /* スマホサイズ: 画像の下は40px */
    }
    
    .blog__footer-logo-image {
        width: 75px; /* スマホサイズ: topと同じサイズ */
        height: 38.31px; /* スマホサイズ: topと同じサイズ */
    }
    
    .blog__footer-nav {
        flex-direction: column;
        gap: var(--spacing-xl); /* スマホサイズ: 32pxの間隔で縦に並ぶ */
        text-align: center;
        margin-bottom: 48px; /* スマホサイズ: ナビゲーションの48px下にコピーライト */
    }
    
    .blog__more-link {
        width: 302px;
        gap: 9px;
    }
    
    .blog__more-text {
        font-size: var(--font-size-body-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
}

/* タブレットサイズ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .blog__hero-content {
        padding: 0 120px;
    }
    
    .blog__new-section,
    .blog__popular-section,
    .blog__category-section {
        padding-left: 120px;
        padding-right: 120px;
    }
    
    .blog__articles-container {
        padding: 0 120px;
    }
    
    .blog__new-articles,
    .blog__popular-articles {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .blog__category-card-articles {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .blog__article-card {
        width: 100%;
    }
}

/* ============================================
   検索モーダル
   ============================================ */
.blog__search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base) ease, visibility var(--transition-base) ease;
}

.blog__search-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.blog__search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-dark);
    cursor: pointer;
}

.blog__search-modal-content {
    position: relative;
    width: 100%;
    max-width: var(--max-width-search);
    background-color: var(--color-background); /* SEARCHセクションと同じグレー背景 */
    padding: var(--spacing-3xl) var(--spacing-2xl);
    margin: var(--spacing-xl);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    max-height: 90vh;
    overflow-y: auto;
}

.blog__search-modal-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color var(--transition-base) ease;
    z-index: 1002;
}

.blog__search-modal-close:hover {
    color: var(--color-secondary);
}

.blog__search-modal-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.blog__search-modal-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-title-pc);
    line-height: var(--line-height-pc);
    letter-spacing: var(--letter-spacing-pc);
    color: var(--color-primary);
    text-align: center;
}

.blog__search-modal-search-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

body.search-modal-open {
    overflow: hidden;
}

/* モバイルサイズ */
@media screen and (max-width: 768px) {
    .blog__search-modal-content {
        padding: var(--spacing-2xl) var(--spacing-lg);
        margin: var(--spacing-md);
        max-height: 85vh;
    }
    
    .blog__search-modal-close {
        top: var(--spacing-md);
        right: var(--spacing-md);
        width: 28px;
        height: 28px;
        font-size: 28px;
    }
    
    .blog__search-modal-container {
        gap: var(--spacing-lg);
    }
    
    .blog__search-modal-title {
        font-size: var(--font-size-title-sp);
        line-height: var(--line-height-sp);
        letter-spacing: var(--letter-spacing-sp);
    }
    
    .blog__search-modal-search-content {
        gap: var(--spacing-md);
    }
}

/* ナビゲーションメニューのボタンスタイル */
.blog__nav-link--button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.blog__nav-link--button:hover {
    color: var(--color-secondary);
}

.blog__nav-overlay-link--button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.blog__nav-search-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}


/* リンクをカード形式で表示させる時のスタイル */
.blogcard {
    line-height: 1;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    word-wrap: break-word;
    box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.025);
    color: black;
    margin: 20px 0;
}
.blogcard.ex {
    background-color: #f7f7f7;
}
.blogcard a {
    text-decoration: none;
    opacity: 1;
    transition: all 0.2s ease;
    color: black;
    display: flex;
    flex-direction: column;
}
.blogcard a:hover {
    opacity: 0.6;
    color: #0066ca;
}
.blogcard_thumbnail {
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
}
.blogcard_thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 !important;
}
.blogcard_content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blogcard_title {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
    padding: 20px 20px 10px;
}
.blogcard_excerpt {
    font-size: 0.85em;
    line-height: 1.6;
    padding: 0 20px 15px;
    flex: 1;
}
.blogcard_link {
    font-size: 0.65em;
    padding: 0 20px 15px;
    text-align: left;
    color: #999;
}

.blogcard_link .icon-external-link-alt::before {
    font-size: 0.75em;
}

@media screen and (max-width: 768px) {
    .blogcard {
        margin: 20px 0;
    }
    .blogcard_thumbnail img {
        height: 180px;
    }
    .blogcard_title {
        font-size: 0.95em;
        padding: 15px 15px 10px;
    }
    .blogcard_excerpt {
        display: none;
    }
    .blogcard_link {
        padding: 0 15px 15px;
    }
}

@media screen and (min-width: 769px) {
    .blogcard a {
        flex-direction: row;
    }
    .blogcard_thumbnail {
        width: 200px;
        min-width: 200px;
        height: 200px;
        background-color: #f0f0f0;
    }
    .blogcard_thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .blogcard_content {
        padding: 10px 0;
    }
}

.clear {
    clear: both;
}