/* ========================================
   共通スタイル（BEM 推奨・既存ブロックは互換のため一部 block-element 表記）
   コンテナは --container-max-width でルール準拠（padding 除き 1200px）
   ======================================== */

/* -------------------------------------------------------------------
   パンくずリスト（Block: breadcrumb）
   ------------------------------------------------------------------- */
.breadcrumb {
    background-color: var(--color-bg-section);
    border-bottom: 1px solid var(--color-bg-light);
    padding: var(--spacing-md) 0;
    margin-top: 0;
}

.breadcrumb-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-14);
    line-height: 1.43;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: var(--color-main-dark-02);
}

.breadcrumb-icon {
    width: 14px;
    height: 14px;
}

.breadcrumb-separator {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-separator img {
    width: 100%;
    height: 100%;
}

.breadcrumb-item--current span {
    color: var(--color-main-dark-02);
    font-size: var(--font-size-14);
    line-height: 1.43;
    font-weight: 700;
}

/* ========================================
   角丸・白背景・枠線の汎用ボタン（共通）
   border 1px 統一 / BEM
   ======================================== */
.outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-2xl);
    min-height: 54px;
    background: var(--color-base);
    border: 1px solid var(--color-main-dark-02);
    border-radius: 9999px;
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-main-dark-02);
    line-height: 1.4;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.outline-btn:hover {
    background: var(--color-main-dark-02);
    color: var(--color-base);
    opacity: 1;
}

.outline-btn:hover .arrow-icon,
.outline-btn:hover .outline-btn__icon {
    filter: brightness(0) invert(1);
}

.outline-btn .arrow-icon,
.outline-btn__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* 角丸ボタン（border-radius: 10px）パーツ */
.outline-btn--rounded {
    border-radius: 10px;
}

.outline-btn--large {
    justify-content: space-between;
    width: 459px;
    min-height: 80px;
    padding: 0 var(--spacing-lg);
    font-size: var(--font-size-24);
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--shadow-lg);
}

.outline-btn--large:hover {
    transform: translateY(-2px);
}

/* 大きいボタンはアイコン 24px（共通） */
.outline-btn--large .arrow-icon,
.outline-btn--large .outline-btn__icon {
    width: 24px;
    height: 24px;
}

@media (max-width: 992px) {
    .outline-btn--large {
        width: 100%;
        max-width: 400px;
    }
}

/* デジタルマーケティング用（TOP・サービス一覧の「デジタルマーケティングについて」ボタン） */
.outline-btn--marketing {
    font-size: var(--font-size-16);
    border-color: var(--color-main-01);
    color: var(--color-main-01);
    min-height: 48px;
}

.outline-btn--marketing:hover {
    background: var(--color-main-01);
    color: var(--color-base);
}

.outline-btn--marketing .arrow-icon,
.outline-btn--marketing .outline-btn__icon {
    filter: brightness(0) saturate(100%) invert(66%) sepia(44%) saturate(4870%) hue-rotate(143deg) brightness(95%) contrast(78%);
}

.outline-btn--marketing:hover .arrow-icon,
.outline-btn--marketing:hover .outline-btn__icon {
    filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
    .outline-btn--marketing {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

/* ========================================
   別タブ外部リンク（共通）
   class="ext-link"
   アイコンサイズ: --ext-link-icon-size（デフォルト 14px）
   ======================================== */
.ext-link {
    --ext-link-icon-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-main-dark-02);
    transition: opacity var(--transition-fast);
}

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

.ext-link svg {
    width: var(--ext-link-icon-size);
    height: var(--ext-link-icon-size);
    flex-shrink: 0;
}

/* アイコン小（12px）同意チェックボックス内リンクなどに使用 */
.ext-link--sm {
    --ext-link-icon-size: 12px;
}

/* ========================================
   汎用調整クラス
   .ext-link・h タグ・p タグなど全要素で使用可
   ======================================== */

/* 文字色 */
.u-color-primary { color: var(--color-main-dark-02); } /* #1864ab */
.u-color-dark    { color: var(--color-main-dark-03); } /* #074b8b */
.u-color-teal    { color: var(--color-main-01); }      /* #1cb1be */
.u-color-green   { color: #1a6100; }
.u-color-text    { color: var(--color-text-primary); }
.u-color-gray    { color: var(--color-text-gray); }
.u-color-white   { color: var(--color-base); }

/* 見出し — フラット（色付き） */
.u-h1 { font-size: var(--font-size-36); font-weight: 700; color: var(--color-main-dark-03); line-height: 1.4; } /* 2.25rem / 36px */
.u-h2 { font-size: var(--font-size-30); font-weight: 700; color: var(--color-main-dark-03); line-height: 1.4; } /* 1.875rem / 30px */
.u-h3 { font-size: var(--font-size-24); font-weight: 700; color: var(--color-main-dark-03); line-height: 1.4; } /* 1.5rem / 24px */
.u-h4 { font-size: var(--font-size-20); font-weight: 700; color: var(--color-main-dark-03); line-height: 1.5; } /* 1.25rem / 20px */
.u-h5 { font-size: var(--font-size-18); font-weight: 700; color: var(--color-main-dark-03); line-height: 1.5; } /* 1.125rem / 18px */
.u-h6 { font-size: var(--font-size-16); font-weight: 700; color: var(--color-main-dark-03); line-height: 1.5; } /* 1rem / 16px */

/* 見出し — バー（左ボーダーアクセント） */
.u-h1-bar { font-size: var(--font-size-36); font-weight: 700; color: var(--color-text-primary); line-height: 1.4; padding-left: var(--spacing-md); border-left: 4px solid var(--color-main-dark-02); } /* 2.25rem / 36px */
.u-h2-bar { font-size: var(--font-size-30); font-weight: 700; color: var(--color-text-primary); line-height: 1.4; padding-left: var(--spacing-md); border-left: 4px solid var(--color-main-dark-02); } /* 1.875rem / 30px */
.u-h3-bar { font-size: var(--font-size-24); font-weight: 700; color: var(--color-text-primary); line-height: 1.4; padding-left: var(--spacing-md); border-left: 4px solid var(--color-main-dark-02); } /* 1.5rem / 24px */
.u-h4-bar { font-size: var(--font-size-20); font-weight: 700; color: var(--color-text-primary); line-height: 1.5; padding-left: var(--spacing-md); border-left: 4px solid var(--color-main-dark-02); } /* 1.25rem / 20px */
.u-h5-bar { font-size: var(--font-size-18); font-weight: 700; color: var(--color-text-primary); line-height: 1.5; padding-left: var(--spacing-md); border-left: 4px solid var(--color-main-dark-02); } /* 1.125rem / 18px */
.u-h6-bar { font-size: var(--font-size-16); font-weight: 700; color: var(--color-text-primary); line-height: 1.5; padding-left: var(--spacing-md); border-left: 4px solid var(--color-main-dark-02); } /* 1rem / 16px */

/* フォントウェイト */
.u-fw-bold   { font-weight: 700; }
.u-fw-medium { font-weight: 500; }
.u-fw-normal { font-weight: 400; }

/* テキスト装飾 */
.u-underline    { text-decoration: underline; }
.u-no-underline { text-decoration: none; }

/* ========================================
   ページ内アンカーナビゲーション（共通）
   Web戦略・設計ページデザインに統一・BEM
   ======================================== */
.anchor-nav {
    background: var(--color-base);
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: calc(var(--header-height) - 0.25rem);
    z-index: 90;
}

.anchor-nav__container {
    max-width: var(--container-max-width-wide);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--container-padding);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl) var(--spacing-2xl);
}

.anchor-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.anchor-nav__link:hover,
.anchor-nav__link.active {
    color: var(--color-main-dark-02);
    opacity: 1;
}

.anchor-nav__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--color-main-01);
}

/* アンカーリンク先のスクロール位置調整（ヘッダー・ナビ分） */
main [id] {
    scroll-margin-top: calc(var(--spacing-5xl) + var(--spacing-xl) + var(--spacing-xs) + var(--spacing-sm)); /* 8.75rem相当 */
}

@media (max-width: 768px) {
    .anchor-nav__container {
        padding: var(--spacing-md) var(--spacing-md);
        gap: var(--spacing-md) var(--spacing-md);
    }

    .anchor-nav__link {
        font-size: var(--font-size-13);
    }
}

@media print {
    .anchor-nav {
        display: none;
    }
}

/* ========================================
   セクションヘッダー（共通）
   dm-definition-header を正としたデザイン・他ページで再利用
   ======================================== */
.section-header {
    margin-bottom: var(--spacing-3xl);
}

.section-header__title {
    font-size: var(--font-size-30);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.8;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.section-header__divider {
    width: 80px;
    height: 4px;
    background: var(--color-main-01);
    margin: 0 auto;
    border-radius: 2px;
}

.section-header__body {
    margin: var(--spacing-xl) auto 0;
    text-align: center;
}

.section-header__body p {
    font-size: var(--font-size-16);
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.section-header__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .section-header__title {
        font-size: var(--font-size-24);
    }
}

/* ========================================
   ページセクション（共通）
   背景色を Modifier で切り替え可能・他ページで再利用
   ======================================== */
.page-section {
    padding: var(--spacing-5xl) 0;
}

.page-section--white {
    background: var(--color-base);
}

.page-section--light {
    background: var(--color-bg-section);
}

/* 課題セクション専用の背景色（problem-cards-grid を使用するセクション） */
.page-section--problems {
    background: var(--color-bg-section-blue);
}

/* プロセスセクション専用の背景色 */
.page-section--process {
    background: var(--color-bg-section-blue);
}

.page-section__container {
    max-width: var(--container-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.page-section__container--narrow {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}

@media (max-width: 768px) {
    .page-section__container {
        padding: 0 var(--spacing-md);
    }

    .page-section__container--narrow {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* ========================================
   サービスラインナップ（共通）
   3件: 3列1行 → service-lineup__grid--cols-1
   4件以上: 2列2行 → service-lineup__grid--cols-2
   992px以下: いずれも1列
   ======================================== */
.service-lineup__grid {
    display: grid;
    gap: var(--spacing-xl);
}

/* 3件のとき: 3列1行 */
.service-lineup__grid--cols-1 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4件以上のとき: 2行2列（2列） */
.service-lineup__grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.service-lineup__card {
    position: relative;
    background: var(--color-base);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
    padding: var(--spacing-xl);
}

.service-lineup__card:hover {
    border-color: var(--color-border-blue);
    box-shadow: var(--shadow-lg);
}

/* カード全体をクリック可能にするオーバーレイリンク */
.service-lineup__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
}

.service-lineup__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 240px;
    margin-bottom: var(--spacing-lg);
    background: var(--color-bg-section-blue);
    border-radius: 12px;
}

.service-lineup__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-lineup__key-visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.service-lineup__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.service-lineup__label {
    font-size: var(--font-size-14);
    font-weight: 700;
    color: #99a1af;
}

.service-lineup__title {
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--color-main-dark-02);
    line-height: 1.4;
}

.service-lineup__text {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.625;
}

.service-lineup .section-header {
    margin-bottom: var(--spacing-3xl);
}

@media (max-width: 992px) {
    .service-lineup__grid--cols-1,
    .service-lineup__grid--cols-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .service-lineup__card {
        padding: var(--spacing-card);
    }
}

/* ========================================
   特長カードエリア（共通）
   2x2グリッド・白カード・水色円＋チェックアイコン
   ======================================== */
.feature-cards .section-header__title {
    text-align: center;
}

.feature-cards__grid {
    display: grid;
    gap: var(--spacing-xl);
}

.feature-cards__grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.feature-cards__grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--color-base);
    border: 1px solid var(--color-border-blue);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}

.feature-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg-section-blue);
    border-radius: 50%;
}

.feature-card__icon svg {
    color: var(--color-main-dark-02);
}

.feature-card__icon path {
    stroke: currentColor;
}

.feature-card__content {
    flex: 1;
    min-width: 0;
}

.feature-card__title {
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.feature-card__text {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.8;
}

@media (max-width: 992px) {
    .feature-cards__grid--cols-2,
    .feature-cards__grid--cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .feature-card {
        padding: var(--spacing-card);
        gap: 16px;
    }
}

/* ========================================
   事例カードエリア（共通）
   日付・タグ・タイトル・会社名・View Case
   ======================================== */
.case-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.case-card {
    background: var(--color-base);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
}

.case-card:hover {
    border-color: var(--color-border-blue);
    box-shadow: var(--shadow-lg);
}

.case-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.case-card__link:hover {
    opacity: 1;
}

.case-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.case-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-card__badge {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-section-blue);
    border-radius: 999px;
    font-size: var(--font-size-12);
    font-weight: 700;
    color: var(--color-main-dark-02);
}

.case-card__content {
    padding: var(--spacing-md);
}

.case-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.case-card__date {
    display: block;
    font-size: var(--font-size-12);
    font-weight: 400;
    color: #99a1af;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.case-card__tag {
    display: inline-block;
    font-size: var(--font-size-12);
    font-weight: 400;
    color: #475467;
    background: var(--color-bg-light);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 4px;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.case-card__title {
    font-size: var(--font-size-18);
    font-weight: 700;
    color: #111111;
    line-height: 1.5;
    margin-bottom: 0;
}

.case-card__company {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.case-card__divider {
    height: 1px;
    background: var(--color-border-light);
    margin-bottom: var(--spacing-sm);
}

.case-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--color-main-dark-02);
}

.case-card__cta-arrow {
    font-weight: 400;
}

.case-cards__link {
    text-align: center;
}

.case-cards__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: var(--font-size-16);
    font-weight: 700;
    color: var(--color-text-gray);
    text-decoration: none;
    background: var(--color-base);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-normal);
}

.case-cards__button:hover {
    opacity: 0.85;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.case-cards__button svg {
    color: inherit;
}

@media (max-width: 992px) {
    .case-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   リストページカード（共通）
   リソルnote・ニュース/イベント一覧・開発実績一覧などで利用
   BEM: list-page-card / list-page-card__*
   ======================================== */
.list-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.list-page-card {
    background: var(--color-base);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.list-page-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.list-page-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.list-page-card__image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--color-bg-light);
}

.list-page-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-page-card__tag-overlay {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-12);
    font-weight: 600;
    color: var(--color-base);
    background: rgba(24, 100, 171, 0.9);
    border-radius: 4px;
}

.list-page-card__content {
    position: relative;
    padding: var(--spacing-lg);
}

.list-page-card__date {
    display: block;
    font-size: var(--font-size-12);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.33;
    margin-bottom: var(--spacing-xs);
}

.list-page-card__meta {
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.43;
    margin-bottom: var(--spacing-sm);
}

.list-page-card__title {
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-page-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.list-page-card__tag {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-12);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-light);
    border-radius: 4px;
}

.list-page-card__cta {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--color-main-dark-02);
    transition: color var(--transition-fast);
}

.list-page-card__cta::after {
    content: " →";
}

.list-page-card__link:hover .list-page-card__cta {
    color: var(--color-main-dark-03);
}

.list-page-card__arrow {
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-base);
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.list-page-card__arrow .arrow-icon {
    width: 20px;
    height: 20px;
    display: block;
    filter: brightness(0) saturate(0%) invert(0.2);
}

@media (max-width: 992px) {
    .list-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .list-page-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .list-page-card__title {
        font-size: var(--font-size-16);
    }
}

/* ========================================
   プロセスタイムライン（共通）
   縦線・丸マーカー・STEPラベル・白カード2列
   ======================================== */
.process-timeline .section-header__title,
.process-timeline .section-header__body {
    text-align: center;
}

.process-timeline__steps {
    position: relative;
}

.process-timeline__line {
    position: absolute;
    left: 73px;
    /* 丸マーカー(16px)中心と揃える: 62px - 1px */
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border-blue);
}

.process-timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.process-timeline-step:last-child {
    margin-bottom: 0;
}

/* 丸マーカーが右端に来る幅。ラベル＋マーカー中心62px */
.process-timeline-step__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    width: 70px;
}

.process-timeline-step__label {
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--color-main-01);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.process-timeline-step__marker {
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--color-main-01);
    border-radius: 50%;
    flex-shrink: 0;
}

.process-timeline-step__content {
    flex: 1;
    min-width: 0;
}

.process-timeline-step__card {
    background: var(--color-base);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl);
}

.process-timeline-step__title {
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.4;
    margin-bottom: var(--spacing-lg);
}

.process-timeline-step__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl) var(--spacing-2xl);
}

/* 要素が1つだけのときは横幅いっぱいに表示 */
.process-timeline-step__grid .process-timeline-step__item:only-child {
    grid-column: 1 / -1;
}

.process-timeline-step__item-title {
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-main-dark-02);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.process-timeline-step__item-text {
    font-size: var(--font-size-16);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.625;
}

@media (max-width: 992px) {
    .process-timeline-step__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .process-timeline-step {
        flex-direction: column;
        align-items: flex-start;
    }

    .process-timeline-step__header {
        position: relative;
        width: 100%;
    }

    .process-timeline__line {
        left: 34px;
        /* 丸マーカー中心(35px)と揃える */
    }

    .process-timeline-step__marker {
        position: absolute;
        left: 35px;
        top: 0;
        margin-left: 0;
        transform: translateX(-50%);
    }

    .process-timeline-step__label {
        margin-left: var(--spacing-2xl);
    }
}

/* ========================================
   課題カードエリア（共通）
   THE PROBLEM + SOLUTION 形式・BEM
   ======================================== */
.problem-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.problem-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-base);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border-blue);
    box-shadow: var(--shadow-xl);
}

.problem-card::before {
    content: attr(data-number);
    position: absolute;
    top: -7%;
    right: -7%;
    font-size: var(--font-size-120);
    font-weight: 900;
    color: var(--color-bg-badge-blue);
    line-height: 1;
    pointer-events: none;
}

.problem-card__content {
    position: relative;
    padding: var(--spacing-xl);
    z-index: 1;
}

.problem-card__label {
    display: inline-block;
    font-size: var(--font-size-12);
    font-weight: 700;
    color: var(--color-main-dark-02);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-badge-blue);
    border-radius: 6px;
    width: fit-content;
}

.problem-card__title {
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
}

.problem-card__text {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.problem-card__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--color-border-gray);
}

.problem-card__divider-circle {
    position: absolute;
    left: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-main-dark-03);
    border: 4px solid var(--color-base);
    border-radius: 50%;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.problem-card__arrow {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transform: rotate(90deg);
}

.problem-card__solution {
    position: relative;
    background: var(--color-bg-solution);
    padding: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    margin-top: 0;
    border-radius: 0 0 14px 14px;
    flex: 1;
    min-height: 0;
}

.problem-card__solution-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.problem-card__solution-icon {
    flex-shrink: 0;
    color: var(--color-check-green);
}

.problem-card__solution-label {
    font-size: var(--font-size-12);
    font-weight: 700;
    color: var(--color-main-dark-02);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 任意。存在しない場合はheaderのmargin-bottomでsolution-textとの間隔を確保 */
.problem-card__solution-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--font-size-14);
    font-style: normal;
    font-weight: 700;
    line-height: 1.43;
    /* 142.857% */
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.problem-card__solution-text {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.8;
}

@media (max-width: 992px) {
    .problem-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .problem-card__content {
        padding: var(--spacing-card);
        padding-bottom: var(--spacing-xl);
    }

    .problem-card__solution {
        padding: var(--spacing-card);
        padding-top: var(--spacing-xl);
    }
}

/* 課題カード直後の結论文ボックス（共通）・白背景・太字 */
.problem-cards-summary {
    text-align: center;
    position: relative;
    z-index: 1;
    /* max-width: 800px;
    margin: 0 auto; */
    padding: var(--spacing-2xl) var(--spacing-3xl);
    border-radius: 14px;
    background: var(--color-base);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.problem-cards-summary__text {
    font-size: var(--font-size-24);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.75;
    margin: 0;
}

.problem-cards-summary__highlight {
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: underline;
}

@media (max-width: 992px) {
    .problem-cards-summary {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .problem-cards-summary__text {
        font-size: var(--font-size-20);
    }
}

@media (max-width: 768px) {
    .problem-cards-summary {
        padding: var(--spacing-card);
    }

    .problem-cards-summary__text {
        font-size: var(--font-size-18);
    }
}

/* ========================================
   ページヒーロー（共通）
   service-digital-marketing-web-strategy を基準に統一
   ======================================== */
.page-hero {
    position: relative;
    padding: calc(var(--spacing-5xl) + var(--spacing-md)) 0; /* 7rem相当 */
    overflow: hidden;
    background: var(--gradient-hero);
}

.page-hero__container {
    position: relative;
    max-width: var(--container-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-5xl);
    z-index: 1;
}

.page-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 528px;
}

.page-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-base);
    border: 1px solid var(--color-border-blue);
    border-radius: 34px;
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--color-main-dark-02);
    box-shadow: var(--shadow-md);
    width: fit-content;
}

.page-hero__title {
    font-size: var(--font-size-60);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.25;
    letter-spacing: -1.5px;
}

.page-hero__subtitle {
    font-size: var(--font-size-24);
    font-weight: 700;
    color: var(--color-main-dark-02);
    line-height: 1.625;
}

.page-hero__subtitle-main {
    display: block;
    font-size: var(--font-size-36);
    color: var(--color-main-dark-03);
    line-height: 1.3;
}

.page-hero__description {
    font-size: var(--font-size-18);
    font-weight: 400;
    color: var(--color-text-gray);
    line-height: 1.625;
}

.page-hero__description p {
    margin: 0 0 var(--spacing-sm);
}

.page-hero__description p:last-child {
    margin-bottom: 0;
}

.page-hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.page-hero__image img,
.page-hero__img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* レスポンシブ */
@media (max-width: 1440px) {
    .page-hero__container {
        padding: 0 var(--spacing-xl);
    }
}

@media (max-width: 992px) {
    .page-hero__container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .page-hero__content {
        max-width: 100%;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .page-hero__badge {
        margin: 0 auto;
    }

    .page-hero__title {
        font-size: var(--font-size-48);
    }

    .page-hero__subtitle {
        font-size: var(--font-size-24);
    }

    .page-hero__image {
        min-height: 200px;
    }

    /* スマホ表示: テキスト→画像の順（TOPページは .hero のため対象外） */
    .page-hero__content {
        order: 1;
    }

    .page-hero__image {
        order: 2;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: var(--spacing-3xl) 0;
    }

    .page-hero__container {
        padding: 0 var(--spacing-md);
    }

    .page-hero__title {
        font-size: var(--font-size-36);
    }

    .page-hero__subtitle {
        font-size: var(--font-size-20);
    }

    .page-hero__description {
        font-size: var(--font-size-16);
    }

    .page-hero__subtitle-main {
        font-size: var(--font-size-28);
    }
}

/* page-heroアニメーション（全ページ共通） */
.page-hero__badge {
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.page-hero__title {
    animation: heroFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.page-hero__subtitle {
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.page-hero__description {
    animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.page-hero__image {
    animation: heroFadeRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@media (prefers-reduced-motion: reduce) {
    .page-hero__badge,
    .page-hero__title,
    .page-hero__subtitle,
    .page-hero__description,
    .page-hero__image {
        animation: none;
    }
}

/* ========================================
   法定・お知らせ系ページ用ヒーロー（プライバシー/サイトポリシー/お問い合わせ共通）
   白背景・中央揃え・タイトル青・サブタイトル・説明文（幅制限）
   使用ページ: privacy.html, policy.html, contact.html
   ======================================== */
.legal-hero {
    padding: var(--spacing-4xl) 0 var(--spacing-5xl);
    background: var(--color-base);
    text-align: left;
}

.legal-hero__container {
    max-width: var(--container-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.legal-hero__title {
    font-size: var(--font-size-48);
    font-weight: 700;
    color: var(--color-main-dark-03);
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
}

.legal-hero__subtitle {
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--color-main-dark-02);
    line-height: 1.4;
    margin-bottom: var(--spacing-lg);
}

.legal-hero__description {
    font-size: var(--font-size-16);
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.8;
    max-width: 800px;
    margin: 0;
    text-align: left;
}

.legal-hero__description p {
    margin: 0 0 var(--spacing-sm);
}

.legal-hero__description p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .legal-hero {
        padding: var(--spacing-3xl) 0 var(--spacing-4xl);
    }

    .legal-hero__container {
        padding: 0 var(--spacing-md);
    }

    .legal-hero__title {
        font-size: var(--font-size-36);
    }

    .legal-hero__subtitle {
        font-size: var(--font-size-20);
    }

    .legal-hero__description {
        font-size: var(--font-size-16);
    }
}

@media (max-width: 576px) {
    .legal-hero {
        padding: var(--spacing-2xl) 0 var(--spacing-3xl);
    }

    .legal-hero__title {
        font-size: var(--font-size-28);
    }

    .legal-hero__subtitle {
        font-size: var(--font-size-18);
    }
}

/* ========================================
   ヘッダー 入場アニメーション
   ======================================== */
@keyframes headerFadeDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* position:fixed の子要素を持つ要素には transform を使わない（含有ブロック破壊を防ぐ） */
@keyframes headerFadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ========================================
   ヘッダー
   ======================================== */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-bg-light);
    z-index: var(--z-header);
    transition: box-shadow var(--transition-normal);
}

/* wordpress 管理バーが表示されている時だけ位置を調整 */
.admin-bar .header {
    top: 32px; /* PC版の管理バーの高さ */
}

.header--scrolled {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: var(--container-max-width-wide);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    animation: headerFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}

.header-logo-img {
    width: 33px;
    height: 40px;
    object-fit: contain;
}

.header-logo-text {
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--color-text-primary);
}

.header-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-lg);
}

.header-nav > *:nth-child(1) { animation: headerFadeOnly 0.6s ease 0.1s both; } /* transformを使うとposition:fixedの子の基準ブロックが壊れるためfadeのみ */
.header-nav > *:nth-child(2) { animation: headerFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.header-nav > *:nth-child(3) { animation: headerFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.header-nav > *:nth-child(4) { animation: headerFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.header-nav > *:nth-child(5) { animation: headerFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

.header-nav-item {
    position: relative;
}

.header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-16);
    font-weight: 500;
    color: #364153;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.header-nav-link:hover {
    color: var(--color-main-dark-02);
    opacity: 1;
}

/* サービスのheader-nav-itemにのみ、他header-nav-linkと同じ余白を設定（paddingで余白を確保しホバー領域に含める） */
.header-nav-item--dropdown {
    padding: var(--spacing-md) 0;
}

.header-nav-item--dropdown .header-nav-link {
    margin: 0;
    cursor: pointer;
}

.header-nav-item--dropdown .header-nav-link * {
    cursor: pointer;
}

/* 矢印：初期は下向き、展開時は上向き */
.header-nav-arrow {
    width: 14px;
    height: 14px;
    transform: rotate(0deg);
    transition: transform var(--transition-fast);
}

/* 共通：.active のとき矢印を上向き（PCはリンクホバーでJSが付与、スマホはクリックで付与） */
.header-nav-item--dropdown.active .header-nav-arrow {
    transform: rotate(180deg);
}

/* ドロップダウンメニュー */
.header-dropdown {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100vw;
    background: var(--gradient-main);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 4px rgba(39, 39, 39, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
    z-index: var(--z-dropdown);
}

/* ヘッダーとドロップダウンの隙間をホバー領域に含める。JSで--dropdown-bridge-*を設定し、header-nav-item--dropdownの幅に合わせる */
.header-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: var(--dropdown-bridge-left, 0);
    width: var(--dropdown-bridge-width, 100%);
    height: 2rem;
    pointer-events: none;
}

/* PC・SP共通：.active のときドロップダウン表示（PCはリンクホバーでJSが付与、閉じるはitem/dropdown外でJSが解除） */
.header-nav-item--dropdown.active .header-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.header-dropdown-content {
    max-width: calc(var(--content-max-width) + 1.25rem);
    min-height: 70px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm) var(--spacing-xl);
    padding: var(--spacing-md);
}

.header-dropdown-link {
    position: relative;
    display: inline-block;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-16);
    font-weight: 400;
    color: var(--color-base);
    letter-spacing: -0.176px;
    line-height: 1.8;
    transition: all var(--transition-fast);
}

.header-dropdown-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%;
    height: 1px;
    background: var(--color-base);
    transition: right var(--transition-fast);
}

.header-dropdown-link:hover::after {
    right: 0;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-accent);
    color: var(--color-base);
    font-size: var(--font-size-16);
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    transition:
        background var(--transition-normal),
        transform var(--transition-fast);
}

.header-cta:hover {
    background: #45b822;
    transform: translateY(-2px);
    opacity: 1;
}

.header-cta--desktop {
    animation: headerFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

/* モバイルメニュー内のお問い合わせリンク（デフォルトは非表示） */
.header-nav-link--contact {
    display: none;
}

.header-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.header-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.header-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.header-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.header-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.header-menu-toggle:hover span {
    background: var(--color-main-dark-02);
}

.header-menu-toggle:focus {
    outline: 2px solid var(--color-main-dark-02);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ========================================
   お問い合わせセクション（共通CTA）
   全ページで統一デザイン
   ======================================== */
.contact-section {
    padding: var(--spacing-5xl) 0;
    background: var(--gradient-main);
    position: relative;
    overflow: hidden;
}

.contact-section-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    text-align: center;
    position: relative;
    z-index: 1;
}

.contact-section-title {
    font-size: var(--font-size-36);
    font-weight: 700;
    color: var(--color-base);
    line-height: 1.3;
    margin-bottom: var(--spacing-lg);
}

.contact-section-description {
    font-size: var(--font-size-18);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

.contact-section-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    min-height: 68px;
    padding: 0 var(--spacing-3xl);
    background: var(--color-accent);
    border-radius: 10px;
    box-shadow: var(--shadow-xl);
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--color-base);
    line-height: 1.4;
    transition: all var(--transition-normal);
}

.contact-section-cta:hover {
    background: #45b822;
    transform: translateY(-4px);
    opacity: 1;
}

.contact-section-cta svg,
.contact-section-cta-icon,
.contact-section-cta .arrow-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.contact-section-cta .arrow-icon,
.contact-section-cta .contact-section-cta-icon {
    filter: brightness(0) invert(1);
}

/* 矢印アイコン（arrow-icon.svg 差し替え用） */
.arrow-icon {
    display: block;
    flex-shrink: 0;
}

/* ========================================
   フッター
   ======================================== */
.footer {
    position: relative;
    padding: var(--spacing-4xl) 0 var(--spacing-2xl);
    background: var(--color-footer-bg);
    margin: 0;
    overflow: hidden;
}

.footer-bg-text {
    position: absolute;
    top: 276px;
    left: -80px;
    font-size: var(--font-size-200);
    font-weight: 700;
    color: #364153;
    opacity: 0.05;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.footer-container {
    position: relative;
    max-width: var(--container-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    z-index: 1;
}

.footer-content {
    display: grid;
    grid-template-columns: 248px 1fr 248px;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

.footer-company {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.footer-logo-img {
    width: 27px;
    height: 32px;
    object-fit: contain;
    opacity: 0.8;
}

.footer-logo-text {
    font-size: var(--font-size-20);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.footer-company-name {
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.625;
}

.footer-address {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.625;
}

.footer-tagline {
    padding-top: var(--spacing-md);
}

.footer-tagline-ja {
    font-size: var(--font-size-20);
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.4;
}

.footer-tagline-en {
    font-size: var(--font-size-12);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.33;
}

.footer-nav {
    display: flex;
    gap: var(--spacing-2xl);
}

.footer-nav-col {
    flex: 1;
}

.footer-nav-title {
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.43;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid #d1d5dc;
    margin-bottom: var(--spacing-md);
}

.footer-nav-title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-nav-title-link:hover {
    color: var(--color-main-dark-02);
}

.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-nav-item--parent {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-nav-item--parent > a {
    font-weight: 600;
}

.footer-nav-sublist {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style: none;
}

.footer-nav-sublist a {
    font-size: var(--font-size-13);
    color: var(--color-text-secondary);
}

.footer-nav-sublist a:hover {
    color: var(--color-main-dark-02);
}

.footer-nav-list a {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.43;
    transition: color var(--transition-fast);
}

.footer-nav-list a:hover {
    color: var(--color-main-dark-02);
    opacity: 1;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.footer-contact-btn {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
    background: var(--color-accent);
    border-radius: 10px;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-normal);
}

.footer-contact-btn:hover {
    background: #45b822;
    transform: translateY(-2px);
    opacity: 1;
}

.footer-contact-subtitle {
    font-size: var(--font-size-12);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.33;
}

.footer-contact-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-base);
    line-height: 1.56;
}

.footer-contact-title .arrow-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(218deg) brightness(106%) contrast(101%);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    font-size: var(--font-size-12);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.33;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-main-dark-02);
    opacity: 1;
}

.footer-copyright {
    padding-top: var(--spacing-xl);
    padding-bottom: 0;
    border-top: 1px solid var(--color-border-light);
    text-align: center;
    margin: 0;
}

.footer-copyright p {
    font-size: var(--font-size-12);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.33;
    margin: 0;
    padding-bottom: 0;
}

/* ========================================
   レスポンシブデザイン（共通コンポーネント）
   ======================================== */

/* タブレット・iPad Pro (1024px以下) */
@media (max-width: 1024px) {
    /* ヘッダー */
    .header-container {
        padding: 0 var(--spacing-xl);
        gap: var(--spacing-md);
        position: relative;
    }

    .header-logo {
        flex-shrink: 0;
        z-index: 1001;
    }

    .header-logo-text {
        font-size: var(--font-size-18);
    }

    .header-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        height: calc(100vh - var(--header-height));
        max-height: calc(100vh - var(--header-height));
        background: var(--color-base);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: var(--spacing-md) var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition:
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            visibility 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        -webkit-overflow-scrolling: touch;
    }

    .header-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .header-nav-item {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    }

    .header-nav-item:last-child {
        border-bottom: none;
    }

    /* メニューアイテム間のスペースを最小化 */
    .header-nav > a.header-nav-link:not(.header-nav-link--contact) {
        border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    }

    .header-nav > a.header-nav-link:last-of-type:not(.header-nav-link--contact) {
        border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    }

    .header-nav-link {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: var(--spacing-md) 0;
        padding: var(--spacing-md) 0;
        font-size: var(--font-size-15);
        font-weight: 500;
        color: var(--color-text-primary);
    }

    .header-nav-item--dropdown {
        border-bottom: none;
    }

    .header-nav-item--dropdown .header-nav-link {
        padding-bottom: var(--spacing-sm);
    }

    /* モバイルメニュー内のお問い合わせリンクを表示 */
    .header-nav-link--contact {
        display: flex;
        background: var(--color-accent);
        color: var(--color-base);
        padding: var(--spacing-md) var(--spacing-lg);
        margin-top: var(--spacing-md);
        margin-bottom: 0;
        border-radius: 8px;
        text-align: center;
        justify-content: center;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(77, 201, 40, 0.3);
        transition:
            background 0.3s ease,
            transform 0.2s ease;
    }

    .header-nav-link--contact:hover {
        background: #45b822;
        transform: translateY(-2px);
        opacity: 1;
    }

    /* デスクトップ用のお問い合わせボタンを非表示 */
    .header-cta--desktop {
        display: none;
    }

    /* スマホ：矢印は .active のみで制御（ホバーは効かせない） */
    .header-nav-item--dropdown .header-nav-arrow,
    .header-nav-item--dropdown:hover .header-nav-arrow {
        transform: rotate(0deg);
    }

    .header-nav-item--dropdown.active .header-nav-arrow {
        transform: rotate(180deg);
    }

    .header-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        margin-top: 0;
        padding: 0;
        min-width: auto;
        display: none;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .header-nav-item--dropdown.active .header-dropdown {
        display: block;
        max-height: 800px;
    }

    .header-dropdown-content {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: var(--spacing-xs) 0;
        /* background: #F8FAFC; */
        border-radius: 8px;
        margin-top: var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
    }

    .header-dropdown-link {
        display: block;
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-13);
        font-weight: 500;
        color: var(--color-text-secondary);
        transition: background 0.2s ease;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .header-dropdown-link:last-child {
        border-bottom: none;
    }

    .header-dropdown-link::after {
        display: none;
    }

    .header-dropdown-link:hover {
        background: rgba(28, 177, 190, 0.1);
        opacity: 1;
    }

    .header-menu-toggle {
        display: flex;
        z-index: 1001;
        order: 3;
    }

    /* メニューが開いている時のボディ固定 */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* メニューオーバーレイ */
    body.menu-open::before {
        content: "";
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 998;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* フッター */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* お問い合わせセクション */
    .contact-section-container {
        padding: 0 var(--spacing-xl);
    }

    .contact-section-title {
        font-size: var(--font-size-32);
    }

    .contact-section-description {
        font-size: var(--font-size-17);
    }

    .contact-section-cta {
        min-height: 60px;
        font-size: var(--font-size-17);
    }
}

/* 中型タブレット (768px以下) */
@media (max-width: 768px) {
    /* パンくずリスト */
    .breadcrumb {
        padding: var(--spacing-sm) 0;
    }

    .breadcrumb-container {
        padding: 0 var(--spacing-md);
    }

    .breadcrumb-link {
        font-size: var(--font-size-12);
    }

    .breadcrumb-item--current span {
        font-size: var(--font-size-12);
    }

    /* お問い合わせセクション */
    .contact-section-container {
        padding: 0 var(--spacing-md);
    }

    /* ヘッダー */
    :root {
        --header-height: 4.5rem;
    }

    .header {
        height: var(--header-height);
    }

    .header-nav {
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        max-height: calc(100vh - var(--header-height));
        padding: var(--spacing-sm) var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }

    .header-logo-text {
        font-size: var(--font-size-17);
    }

    .header-nav-link {
        font-size: var(--font-size-14);
        padding: var(--spacing-sm) 0;
    }

    .header-dropdown-link {
        font-size: var(--font-size-12);
        padding: var(--spacing-sm) var(--spacing-sm);
    }

    .header-nav-link--contact {
        font-size: var(--font-size-14);
        padding: var(--spacing-md) var(--spacing-md);
        margin-top: var(--spacing-sm);
    }

    body.menu-open::before {
        top: var(--header-height);
    }
}

/* スマートフォン (576px以下) */
@media (max-width: 576px) {
    /* ヘッダー */
    :root {
        --header-height: 4rem;
    }

    .header {
        height: var(--header-height);
    }

    .header-container {
        padding: 0 var(--spacing-md);
    }

    .header-logo {
        gap: var(--spacing-sm);
    }

    .header-logo-img {
        width: 28px;
        height: 34px;
    }

    .header-logo-text {
        font-size: var(--font-size-16);
    }

    .header-nav {
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        max-height: calc(100vh - var(--header-height));
        padding: var(--spacing-sm) var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }

    .header-nav-link {
        font-size: var(--font-size-14);
        padding: var(--spacing-sm) 0;
    }

    .header-dropdown-content {
        padding: var(--spacing-xs) 0;
        margin-top: var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
    }

    .header-dropdown-link {
        font-size: var(--font-size-12);
        padding: var(--spacing-sm) var(--spacing-sm);
    }

    .header-nav-link--contact {
        font-size: var(--font-size-14);
        padding: var(--spacing-md) var(--spacing-md);
        margin-top: var(--spacing-sm);
        margin-bottom: 0;
    }

    .header-menu-toggle {
        width: 22px;
        height: 16px;
    }

    .header-menu-toggle span {
        height: 2px;
    }

    .header-menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header-menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* お問い合わせセクション */
    .contact-section-container {
        padding: 0 var(--spacing-md);
    }

    .contact-section-title {
        font-size: var(--font-size-28);
    }

    .contact-section-description {
        font-size: var(--font-size-16);
    }

    .contact-section-cta {
        min-height: 56px;
        font-size: var(--font-size-18);
        padding: var(--spacing-md);
        width: 100%;
        justify-content: center;
    }

    /* フッター：ナビを縦並びに */
    .footer-nav {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .footer-container {
        padding: 0 var(--spacing-md);
    }
}

/* 小型モバイル (480px以下) */
@media (max-width: 480px) {
    /* パンくずリスト */
    .breadcrumb-container {
        padding: 0 var(--spacing-md);
    }
}

/* ランドスケープモード（横向き）の調整 */
@media (max-width: 1024px) and (orientation: landscape) {
    .header-nav {
        height: calc(100vh - var(--header-height));
        max-height: calc(100vh - var(--header-height));
        padding: var(--spacing-sm) var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }

    .header-nav-link {
        padding: var(--spacing-sm) 0;
        font-size: var(--font-size-13);
    }

    .header-dropdown-content {
        padding: var(--spacing-xs) 0;
        margin-top: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }

    .header-dropdown-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-11);
    }

    .header-nav-link--contact {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-top: var(--spacing-xs);
        font-size: var(--font-size-13);
    }
}

@media (max-width: 576px) and (orientation: landscape) {
    :root {
        --header-height: 3.5rem;
    }

    .header {
        height: var(--header-height);
    }

    .header-nav {
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        max-height: calc(100vh - var(--header-height));
        padding: var(--spacing-xs) var(--spacing-sm);
        padding-bottom: var(--spacing-xs);
    }

    .header-nav-link {
        padding: var(--spacing-xs) 0;
        font-size: var(--font-size-12);
    }

    .header-dropdown-content {
        padding: var(--spacing-xs) 0;
        margin-top: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }

    .header-dropdown-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-10);
    }

    .header-nav-link--contact {
        padding: var(--spacing-sm) var(--spacing-sm);
        margin-top: var(--spacing-xs);
        font-size: var(--font-size-12);
    }

    body.menu-open::before {
        top: var(--header-height);
    }
}

/* ========================================
   事例カード（共通・トップ事例セクション用）
   case-cards__grid と同じデザイントークンで統一
   ======================================== */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.case-card {
    position: relative;
    background: var(--color-base);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
}

.case-card:hover {
    border-color: var(--color-border-blue);
    box-shadow: var(--shadow-lg);
}

.case-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.case-card-link:hover {
    opacity: 1;
}

.case-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.case-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-card-badge {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-section-blue);
    border-radius: 999px;
    font-size: var(--font-size-12);
    font-weight: 700;
    color: var(--color-main-dark-02);
    line-height: 1.33;
}

.case-card-content {
    padding: var(--spacing-md);
    text-align: left;
}

.case-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.case-card-date {
    font-size: var(--font-size-12);
    font-weight: 400;
    color: #99a1af;
    line-height: 1.5;
}

.case-card-company {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.case-card-company::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background: var(--color-text-secondary);
    margin-right: var(--spacing-sm);
    vertical-align: middle;
    opacity: 0.6;
}

.case-card-title {
    font-size: var(--font-size-18);
    font-weight: 700;
    color: #111111;
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.case-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.case-card-tags {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.case-card-tag {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-light);
    color: #475467;
    font-size: var(--font-size-12);
    font-weight: 400;
    line-height: 1.33;
    border-radius: 4px;
}

.case-card-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-base);
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.case-card-arrow .arrow-icon {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    filter: brightness(0) saturate(0%) invert(0.2);
}

.case-card-arrow svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 992px) {
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .cases-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-logo,
    .header-nav > *,
    .header-cta--desktop {
        animation: none;
    }
}