/* =========================================================
   レスポンシブ対応
   ブレークポイント: 1024px / 768px / 480px
   ========================================================= */

/* ---------- タブレット (≤ 1024px) ---------- */
@media (max-width: 1024px) {
    :root {
        --space-xxl: 72px;
        --space-xl: 48px;
    }

    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- モバイル (≤ 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --font-base-size: 15px;
        --space-xxl: 56px;
        --space-xl: 36px;
        --space-lg: 28px;
    }

    /* ヘッダー */
    .site-header__inner {
        flex-wrap: wrap;
        gap: var(--space-xs);
        padding: var(--space-xs) 0;       /* 左右パディングは子要素で管理 */
        justify-content: center;
        box-sizing: border-box;
    }
    .site-logo {
        flex: 0 0 100%;            /* ロゴ単独で1行・中央配置 */
        justify-content: center;
        padding: 0 var(--space-sm);
        box-sizing: border-box;
    }
    .site-logo__img,
    .custom-logo {
        height: 48px;              /* スマホ: ロゴ少し小さく */
    }

    /* PC用CTA は非表示、SP用を表示 */
    .header-cta--pc {
        display: none;
    }
    .header-cta--sp {
        display: flex;
        gap: 6px;
        flex: 0 0 100%;             /* 折り返して全幅 */
        width: 100%;
        padding: 0 var(--space-sm); /* 左右パディング（左右対称） */
        box-sizing: border-box;      /* padding込み100% */
        justify-content: space-between;
    }
    .header-icon,
    .header-cta--sp .hamburger {
        flex: 1 1 0;                /* 画面幅を4等分 */
        max-width: none;
        width: auto;
        height: 54px;
        min-width: 0;
    }

    /* ハンバーガーボタン表示（3本線は縦並び） */
    .hamburger {
        display: flex;
        flex-direction: column;     /* バー3本を縦並びに */
        align-items: center;
        justify-content: center;
    }

    /* グローバルナビ: モバイルでは折りたたみメニュー */
    .global-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(80vw, 320px);
        height: 100vh;
        background: var(--c-black);
        border-left: 1px solid rgba(212,175,55,0.3);
        border-bottom: none;
        padding: 80px var(--space-md) var(--space-lg);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 300ms ease;
        z-index: 105;
        box-shadow: -8px 0 24px rgba(0,0,0,0.4);
    }
    .global-nav.is-open {
        transform: translateX(0);
    }
    .global-nav__list {
        flex-direction: column;
        max-width: none;
    }
    .global-nav__list li a {
        padding: 14px var(--space-sm);
        border-bottom: 1px solid rgba(212,175,55,0.15);
        font-size: 15px;
    }

    /* メニュー開いている時の背景オーバーレイ */
    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 102;
    }
    .nav-overlay.is-open {
        display: block;
    }

    /* メニューが開いている時のbodyスクロール禁止 */
    body.nav-is-open {
        overflow: hidden;
    }

    /* メニュー展開中はヘッダー(内側のナビ)をオーバーレイより前面へ。
       ※.site-headerはz-index:100でスタッキングコンテキストを作るため、
       内側の.global-nav(z-index:105)も外側の.nav-overlay(z-index:102)に
       覆われてしまい、リンクがタップできなくなる不具合を防ぐ。 */
    body.nav-is-open .site-header {
        z-index: 103;
    }

    /* ヒーロー */
    .hero {
        min-height: 400px;
    }
    .hero__inner {
        padding: var(--space-xl) var(--space-sm);
    }
    .hero__title {
        font-size: 28px;
    }
    .hero__sub {
        font-size: 18px;
    }

    /* ヒーロー直下 CTA：スマホは1カラム縦並び */
    .hero-cta {
        padding: var(--space-md) 0;
    }
    .hero-cta__grid {
        grid-template-columns: 1fr;       /* 縦並び */
        gap: 10px;
        padding: 0 var(--space-sm);
    }
    .hero-cta__btn {
        padding: 14px 16px;
        gap: 14px;
        min-height: 76px;
    }
    .hero-cta__btn-icon {
        width: 44px;
        height: 44px;
    }
    .hero-cta__btn-icon svg {
        width: 24px;
        height: 24px;
    }
    .hero-cta__btn {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
        align-items: center;
    }
    .hero-cta__btn-body {
        flex: 1;
        min-width: 0;
    }
    .hero-cta__btn-title {
        font-size: 15px;
    }
    .hero-cta__btn-number {
        font-size: 24px;       /* 数字を大きく */
        line-height: 1.2;
    }
    .hero-cta__btn-sub {
        font-size: 12px;
    }
    /* 電話ボタン：数字とサブが伸びるように */
    .hero-cta__btn--phone .hero-cta__btn-title {
        font-size: 15px;
    }
    .hero-cta__btn--phone .hero-cta__btn-number {
        font-size: 26px;       /* 電話番号 大きく */
        font-weight: 900;
    }
    /* メールボタン：お問い合わせフォーム も大きく */
    .hero-cta__btn--mail .hero-cta__btn-number {
        font-size: 18px;
    }
    /* LINEボタン：2行のためタイトル大きく＋右に伸ばす */
    .hero-cta__btn--line .hero-cta__btn-icon svg {
        width: 36px;
        height: 36px;
    }
    .hero-cta__btn--line .hero-cta__btn-title {
        font-size: 22px;       /* LINE 大きく */
        font-weight: 900;
    }
    .hero-cta__btn--line .hero-cta__btn-sub {
        font-size: 13px;
    }

    /* ヒーロー直下 SEO見出し（スマホはコンパクト化・1行強制） */
    .hero-seo {
        padding: 10px var(--space-xs);
    }
    .hero-seo__title {
        /* 画面幅に応じて自動縮小・1行強制 */
        font-size: clamp(11px, 3.4vw, 14px);
        margin: 0 0 3px;
        line-height: 1.35;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-seo__sub {
        font-size: clamp(10px, 2.8vw, 12px);
        line-height: 1.4;
        letter-spacing: 0;
    }

    /* セクション */
    .section {
        padding: var(--space-xl) 0;
    }

    /* ワンストップ対応セクション（スマホ：2カラムグリッド） */
    .onestop {
        padding: var(--space-lg) 0;
    }
    .onestop__grid {
        grid-template-columns: repeat(2, 1fr);   /* スマホ: 2カラム */
        border: 1px solid #d4c5a0;
    }
    .onestop-card {
        padding: var(--space-md) var(--space-xs);
        border-right: 1px solid #e8d8b8;
        border-bottom: 1px solid #e8d8b8;
    }
    .onestop-card:nth-child(2n) {
        border-right: none;
    }
    .onestop-card:nth-last-child(-n+2) {
        border-bottom: none;
    }
    .onestop-card__icon-wrap {
        width: 48px;
        height: 48px;
    }
    .onestop-card__title {
        font-size: 13px;
    }
    .onestop-card__desc {
        font-size: 11px;
    }

    /* プラン（スマホ：1カラム縦並び） */
    .plans {
        padding: var(--space-xl) 0;
    }
    .plans__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .plan-card__num {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 16px;
    }
    .plan-card__badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    .plan-card__title {
        font-size: 22px;
        padding-top: 56px;
    }
    .plan-card__lead {
        font-size: 13px;
    }
    .plan-card__recommend {
        font-size: 12px;
    }
    .plan-card__features li {
        font-size: 13px;
    }
    .plan-card__price-num {
        font-size: 38px;
    }
    .plans__note {
        margin-top: var(--space-lg);
        padding: var(--space-sm) var(--space-md);
        font-size: 12px;
    }

    /* 数字で見る実績（スマホ：2カラム×2行） */
    .stats {
        padding: var(--space-xl) 0;
    }
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-item {
        padding: var(--space-md) var(--space-sm);
    }
    .stat-item__num {
        font-size: 36px;
    }
    .stat-item__label {
        font-size: 13px;
    }
    .stat-item__sub {
        font-size: 11px;
    }

    /* ご依頼の流れ（スマホ：縦並び） */
    .flow {
        padding: var(--space-xl) 0;
    }
    .flow__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .flow-step:not(:last-child)::after {
        content: '↓';
        right: 50%;
        top: auto;
        bottom: -20px;
        transform: translateX(50%);
    }
    .flow-step {
        padding: var(--space-md);
    }
    .flow-step__icon-wrap {
        width: 48px;
        height: 48px;
    }
    .flow-step__icon-wrap svg {
        width: 24px;
        height: 24px;
    }

    /* 事例（スマホ：1カラム） */
    .cases {
        padding: var(--space-xl) 0;
    }
    .cases__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* お客様の声（スマホ：1カラム） */
    .voices {
        padding: var(--space-xl) 0;
    }
    .voices__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* 対応地域（スマホ：縦並び） */
    .area {
        padding: var(--space-xl) 0;
    }
    .area__main {
        grid-template-columns: 1fr;
        padding: var(--space-md);
        gap: var(--space-md);
    }
    .area__pin svg {
        width: 80px;
        height: 80px;
    }
    .area__pin-text {
        font-size: 18px;
    }
    .area__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 12px;
    }
    .area__list li {
        font-size: 12px;
    }

    /* FAQ（スマホ） */
    .faq {
        padding: var(--space-xl) 0;
    }
    .faq-item__q {
        padding: var(--space-sm) var(--space-md);
        gap: 10px;
    }
    .faq-item__q-mark,
    .faq-item__a-mark {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .faq-item__q-text {
        font-size: 13px;
    }
    .faq-item__a {
        padding: 0 var(--space-md) var(--space-sm);
        gap: 10px;
    }
    .faq-item__a-text {
        font-size: 13px;
    }

    /* 代表者紹介（スマホ：縦並び） */
    .ceo {
        padding: var(--space-xl) 0;
    }
    .ceo__main {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .ceo__photo-wrap {
        max-width: 240px;
        margin: 0 auto;
    }
    .ceo__name {
        font-size: 24px;
    }
    .ceo__name-en {
        display: block;
        margin: 8px 0 0;
        font-size: 12px;
    }
    .ceo__message p {
        font-size: 13.5px;
    }

    /* 代表挨拶ページ（スマホ） */
    .ceo-page {
        padding: var(--space-xl) 0;
    }
    .ceo-page__main {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .ceo-page__sidebar {
        position: static;
    }
    .ceo-page__photo-wrap {
        max-width: 240px;
        margin: 0 auto var(--space-md);
    }
    .ceo-page__heading {
        font-size: 18px;
    }
    .ceo-page__body {
        font-size: 14px;
    }

    /* サービス */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-card__icon {
        width: 60px;
        height: 60px;
    }

    /* お悩み（スマホは2カラム×4行） */
    .worries {
        padding: var(--space-xl) 0;
    }
    .sp-only {
        display: inline;
    }
    .worries__head {
        margin-bottom: var(--space-lg);
    }
    .worries__head-en {
        font-size: 11px;
    }
    .worries__head-jp {
        font-size: 24px;
    }
    .worries__head-desc {
        font-size: 13px;
        padding: 0 var(--space-sm);
    }
    .worries__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .worry-card {
        padding: var(--space-sm) 10px;
    }
    .worry-card__icon-wrap {
        width: 44px;
        height: 44px;
    }
    .worry-card__icon-wrap svg {
        width: 22px;
        height: 22px;
    }
    .worry-card__text {
        font-size: 12px;
        line-height: 1.55;
    }

    /* 4つの解決策（スマホ：1カラム縦並び） */
    .solutions {
        padding: var(--space-xl) 0;
    }
    .solutions__head {
        margin-bottom: var(--space-lg);
    }
    .solutions__head-en {
        font-size: 11px;
    }
    .solutions__head-jp {
        font-size: 22px;
    }
    .solutions__head-desc {
        font-size: 13px;
        padding: 0 var(--space-sm);
    }
    .solutions__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .solution-card__num {
        font-size: 18px;
        padding: 6px 12px;
    }
    .solution-card__title {
        font-size: 16px;
    }
    .solution-card__desc {
        font-size: 13px;
    }

    /* フッターCTA（ヒーロー直下と同じ3つ縦並び） */
    .footer-cta {
        padding: var(--space-xl) 0;
    }
    .footer-cta__head {
        margin-bottom: var(--space-lg);
    }
    .footer-cta__head-en {
        font-size: 11px;
    }
    .footer-cta__title {
        font-size: 22px;
    }
    .footer-cta__lead {
        font-size: 13px;
        padding: 0 var(--space-sm);
    }
    .cta-btn,
    .cta-btn--lg {
        width: 100%;
        padding: 16px;
        font-size: 16px;
    }

    /* フッター本体（スマホ：1カラム縦並び） */
    .site-footer {
        padding: var(--space-xl) 0 var(--space-md);
    }
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .site-footer__logo-img {
        height: 60px;
    }
    .site-footer__heading {
        font-size: 13px;
    }
    .site-footer__list li,
    .site-footer__info {
        font-size: 12.5px;
    }
    .site-footer__tel {
        font-size: 20px;
    }

    /* 記事本文 */
    .entry-content {
        font-size: 16px;
    }
    .entry-content h2 {
        font-size: 19px;
        padding: 12px 16px;
    }
    .entry-content h3 {
        font-size: 17px;
    }

    /* パンくず */
    .muraoka-breadcrumb {
        font-size: 11px;
    }
}

/* ---------- タブレット（769px〜1024px）：解決策は2カラム ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .solutions__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- スマホ小型 (≤ 480px) ---------- */
@media (max-width: 480px) {
    :root {
        --space-xxl: 48px;
        --space-xl: 32px;
        --space-lg: 24px;
        --space-md: 16px;
    }

    .container {
        padding: 0 var(--space-sm);
    }

    .hero__title {
        font-size: 22px;
    }
    .hero__sub {
        font-size: 15px;
    }

    .services__grid {
        grid-template-columns: 1fr 1fr;
    }
    .worries__grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-card,
    .worry-card {
        padding: var(--space-sm);
    }
}

/* ---------- 印刷用 ---------- */
@media print {
    .site-header,
    .global-nav,
    .footer-cta,
    .site-footer,
    .muraoka-breadcrumb {
        display: none;
    }
    .entry-content {
        max-width: 100%;
        font-size: 12pt;
    }
}