/*
 * mobile.css - フロントページ モバイルデザイン刷新版
 * ホームページ モバイルレスポンシブ専用スタイル
 *
 * このファイルはモバイル用スタイルを一元管理します。
 * デスクトップスタイルは既存 CSS ファイルが担当します。
 * 他ファイルより後に読み込まれるため、後勝ちで優先されます。
 *
 * ブレークポイント:
 *   768px 以下: タブレット・スマートフォン共通調整
 *   480px 以下: スマートフォン専用調整
 *
 * 設計原則（NN/g・btrax・UX Milk 調査より）:
 *   - タッチターゲット最低 44px（iOS HIG）/ 48px（Material）
 *   - ボディフォント最低 16px（iOS 自動ズーム防止）
 *   - コンテナ左右余白 最低 16px
 *   - CTA は 1 つに集中・全幅ブロック配置
 *   - 横スクロールカルーセルに "peek" パターンで続きを示す
 */


/* ============================================================
   グローバルメニュー: モバイル ドロップダウン + backdrop
   ============================================================ */

/* backdrop: メニュー展開時にコンテンツを薄暗く */
.menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
}
body.mobile-menu-open .menu-backdrop {
    display: block;
}

/* ============================================================
   ベーススタイル（全幅共通）
   ============================================================ */

/* YouTube 埋め込み: 全幅 16:9 レスポンシブ（デスクトップ含む）
   ※ .video-container には他ファイルで base CSS が未定義のため、ここで定義 */
.video-container {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 アスペクト比 */
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-xl);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* カルーセルドットインジケーター: デフォルト非表示（デスクトップでは不要）*/
.carousel-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 4px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.carousel-dot.active {
    background: var(--primary-color);
    transform: scale(1.3);
}

/* モバイル製品カルーセル: デスクトップでは非表示 */
.products-carousel-mobile {
    display: none;
}


/* ============================================================
   768px 以下（タブレット・スマートフォン共通）
   ============================================================ */
@media (max-width: 768px) {

    /* ----------------------------------------
       共通: コンテナ・セクション・タイポグラフィ
       ---------------------------------------- */

    /* コンテナ左右余白を最低ラインに */
    .container,
    .container-wide {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* セクション間スペーサーを縮小 */
    .section-spacer {
        height: var(--spacing-2xl);
    }

    /* セクションタイトルを画面幅追従に */
    .section-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    /* セクションヘッダーの余白を縮小 */
    .section-header {
        margin-bottom: var(--spacing-lg);
    }

    /* セクションパディングを縮小 */
    .section-primary-bg,
    .contact-simple-section {
        padding: 40px 0;
    }


    /* ----------------------------------------
       ハンバーガーボタン タッチターゲット（48×48px 保証）
       ---------------------------------------- */

    .mobile-menu-toggle {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        flex-direction: column; /* 3本線を縦に積む */
        align-items: center;
        justify-content: center;
        padding: 8px;
        gap: 5px;
        /* backdrop(9998)より上に出してクリックを取れるようにする */
        position: relative;
        z-index: 10001;
    }

    /* header.css の margin: 5px 0 を打ち消し（gap だけで間隔を制御） */
    .mobile-menu-toggle span:not(.screen-reader-text) {
        margin: 0;
    }


    /* ----------------------------------------
       ヘッダー: モバイルで固定表示
       html/body { overflow-x: hidden } が position:sticky を無効化するため
       position:fixed に切り替えて確実に viewport 上部に固定する
       ---------------------------------------- */

    .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10000;
        background: var(--white) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    }

    /* ヘッダー固定分だけコンテンツを押し下げ（ヘッダー高さ = 80px デフォルト） */
    .site-content {
        padding-top: 80px;
    }


    /* ----------------------------------------
       浮動 CTA バー（画面下部 sticky）
       ---------------------------------------- */

    .mobile-sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        z-index: 2000;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    }

    .sticky-cta-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 0;
        min-height: 56px;
        font-size: 0.875rem;
        font-weight: 700;
        text-decoration: none;
        color: white;
    }

    .sticky-cta-btn--tel  { background: #2e7d32; }
    .sticky-cta-btn--mail { background: var(--contact-red, #c61a1a); }

    /* ページ末尾が浮動バーに隠れないよう余白確保 */
    .site-main,
    .site-footer { padding-bottom: 56px; }


    /* ----------------------------------------
       1. ヒーローセクション (#hero)
       ---------------------------------------- */

    /* モバイルでは画像を中央基準でトリミング */
    .page-title-section--front .front-slide {
        background-size: cover;
        background-position: center center;
    }

    /* 高さをコンテンツに合わせてコンパクトに */
    .page-title-section--front {
        min-height: 55vh;
        align-items: center;    /* 上下中央（空白が均等になる） */
        justify-content: center;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* コンテンツエリアに左右余白 */
    .page-title-section--front .page-title-section__content {
        padding: 0 16px;
    }

    /* タイトル: clamp で画面幅に自動追従 */
    .page-title-section--front .page-title-section__title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    /* 強調テキストのサイズ調整 */
    .page-title-section--front .emphasis-word-blue,
    .page-title-section--front .emphasis-word-orange {
        font-size: 1.2em;
    }

    .page-title-section--front .emphasis-particle {
        font-size: 1em;
    }

    /* サブタイトル: 読みやすい行間・余白 */
    .page-title-section--front .page-title-section__subtitle {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 24px;
    }

    /* CTA ボタン: 全幅ブロック・中央配置・タップしやすく */
    .page-title-section--front .page-title-section__actions .btn {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        padding: 14px 24px;
        text-align: center;
        min-height: 48px;        /* タッチターゲット確保 */
        box-sizing: border-box;
    }


    /* ----------------------------------------
       2. 技術・サービスセクション (#business)
       ---------------------------------------- */

    /* ナビゲーションヘッダーの余白縮小 */
    .rotating-nav-header {
        padding: var(--spacing-xl) 0;
    }

    /* ナビゲーション円弧: 高さを確保・横オーバーフロー許可 */
    .nav-arc {
        height: 90px;
        overflow-x: visible;   /* 絶対配置アイテムを表示 */
    }

    /* ナビアイテム: タッチターゲット 48px 確保 */
    .nav-item {
        width: 130px;
        height: 48px;
        touch-action: manipulation;
        cursor: pointer;
    }

    /* [data-position] CSS フォールバック
       rotating-navigation.css の ±280px をモバイル適切な値に上書き
       JS 実行時は inline !important が勝つので問題なし */
    .nav-item[data-position="left"] {
        transform: translate(-50%, -50%) translateX(-90px) scale(0.65);
    }
    .nav-item[data-position="center"] {
        transform: translate(-50%, -50%) translateX(0px) scale(0.95);
    }
    .nav-item[data-position="right"] {
        transform: translate(-50%, -50%) translateX(90px) scale(0.65);
    }

    .nav-icon {
        font-size: 16px;
    }

    .nav-label {
        font-size: var(--size-sm);
    }

    /* 矢印ボタン: モバイルではスワイプで操作するため非表示 */
    .nav-arrow { display: none; }


    /* ----------------------------------------
       tech-interactive-content: JS transform カルーセル
       ・3パネルが同じ grid セルを共有し transform で位置切り替え
       ・無限ローテーション（3→1 直接遷移）をサポート
       ---------------------------------------- */

    .tech-interactive-content {
        display: grid;        /* すべてのパネルを同じセルに積み重ね */
        overflow: hidden;
        /* pan-y: ブラウザは縦スクロールのみ担当、横スワイプは JS に渡す */
        touch-action: pan-y;
        /* スワイプ中のテキスト選択を防ぐ */
        user-select: none;
        -webkit-user-select: none;
    }

    /* 各パネル: 同じ grid セルを共有し transform で位置を切り替える */
    .tech-content-layout {
        grid-area: 1 / 1;
        flex-direction: column;
        gap: var(--spacing-lg);
        padding: 20px 16px;
        background: var(--white, #fff);
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        animation: none !important;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* ページネーションドット */
    .tech-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 16px 0 4px;
    }

    .tech-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .tech-carousel-dot.active {
        width: 24px;
        background: var(--primary-color, #0057a8);
    }

    .tech-card-section,
    .tech-image-section {
        flex: none;
        width: 100%;
    }

    /* 画像エリア: 固定 px 廃止 → 16:9 アスペクト比 */
    .tech-image-section {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* サービスカードのテキスト: 左揃えキープ（可読性優先） */
    .tech-card-section .feature-card--service {
        text-align: left;
    }

    .tech-card-section .feature-card--service .feature-card__header {
        justify-content: flex-start;
    }

    .tech-card-section .feature-card--service .feature-card__features {
        justify-content: flex-start;
    }


    /* ----------------------------------------
       3. 実績統計セクション (#stats)
       ---------------------------------------- */

    /* 2 列グリッド維持・ギャップ縮小 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* カードの余白調整 */
    .stat-item,
    .stat-card {
        padding: 24px 16px;
    }

    /* 数字を読みやすいサイズに */
    .stat-card__value,
    .stat-number {
        font-size: 2rem;
    }

    /* ラベルをコンパクトに */
    .stat-card__label,
    .stat-label {
        font-size: 0.8rem;
    }


    /* ----------------------------------------
       4. 選ばれる理由セクション (#brand) ★カルーセル化
       ---------------------------------------- */

    /* 縦積みグリッド → 横スクロールカルーセルに変更 */
    .brand-showcase {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;           /* Firefox: スクロールバー非表示 */
        gap: 12px;
        margin-bottom: var(--spacing-xl);
        padding-bottom: 8px;             /* スクロール操作余白 */
        /* グリッド設定を無効化 */
        grid-template-columns: unset;
    }

    /* Chrome/Safari: スクロールバー非表示 */
    .brand-showcase::-webkit-scrollbar {
        display: none;
    }

    /* カード: 画面幅 85% でスナップ・次のカードを少しのぞかせる */
    .brand-showcase .brand-card {
        flex-shrink: 0;
        width: 85vw;
        max-width: 320px;
        scroll-snap-align: start;
    }

    /* CTA は下に通常配置 */
    .brand-cta {
        text-align: center;
        margin-top: var(--spacing-xl);
    }


    /* ----------------------------------------
       5. イノベーションセクション (#innovation)
       ---------------------------------------- */

    /* ::before 差し込み背景: モバイルで全幅・グラデーション変更・アニメーションなし */
    .bg-right-extend::before {
        width: 100%;                  /* 左端まで差し込み切る */
        border-top-left-radius: 0;    /* 角丸削除（全幅なので不要） */
        border-bottom-left-radius: 0;
        background: linear-gradient(135deg, var(--primary-color) 40%, var(--secondary-color) 100%);
        transform: none !important;   /* アニメーションなし・常に表示 */
        transition: none !important;
        opacity: 1 !important;        /* .slide-in 待たずに即表示 */
    }

    /* テキスト位置修正: 左パディング縮小・中央揃え */
    .innovation-left {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }

    .innovation-left .section-description {
        text-align: center;
    }

    /* サブタイトル: section-primary-bg と同じ水色に */
    .innovation-left .section-subtitle {
        color: var(--secondary-color);
    }

    /* 縦棒装飾を非表示 */
    .innovation-left .section-title::before {
        display: none;
    }

    /* 縦棒用の左パディングを削除・横棒のための下余白を確保・他セクションと同じサイズに */
    .innovation-left .section-title {
        padding-left: 0;
        margin-bottom: 30px;
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    /* タイトル下に横棒を追加（section-header--center と同じ配色・位置） */
    .innovation-left .section-title::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(135deg, var(--primary-color-light) 0%, var(--secondary-color) 100%);
        border-radius: var(--border-radius-full);
    }

    /* デスクトップPRブロック非表示（モバイルカルーセルに置換） */
    .innovation-pr-area {
        display: none !important;
    }

    /* デスクトップCTA（商品一覧を見る）非表示 */
    .innovation-left .innovation-cta {
        display: none;
    }

    /* ── モバイル製品カルーセル ── */
    .products-carousel-mobile {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px;
        padding: 16px 20px 24px;
    }

    .products-carousel-mobile::-webkit-scrollbar {
        display: none;
    }

    .product-card-mobile {
        flex-shrink: 0;
        width: 82vw;
        max-width: 300px;
        scroll-snap-align: start;
        background: linear-gradient(160deg, var(--primary-color) 0%, #1a4a7a 100%);
        border-radius: 16px;
        overflow: hidden;
        color: white;
        text-decoration: none;
        display: block;
        transition: transform 0.15s ease;
    }

    .product-card-mobile:active {
        transform: scale(0.97);
    }

    .product-card-image {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.15);
    }

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

    .product-card-image--placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: rgba(255, 255, 255, 0.25);
    }

    .product-card-body {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .product-card-badge {
        font-size: 0.72rem;
        border: 1px solid var(--accent-color, #ff6b35);
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        display: inline-block;
        align-self: flex-start;
    }

    .product-card-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--accent-color-light, #ffa07a);
        margin: 0;
    }

    .product-card-title i {
        color: white;
        margin-right: 6px;
        font-size: 0.875rem;
    }

    .product-card-desc {
        font-size: 0.825rem;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.6;
        margin: 0;
    }

    .product-card-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.825rem;
        font-weight: 600;
        color: white;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }


    /* ----------------------------------------
       6. お知らせセクション (#news)
       ---------------------------------------- */

    /* 日付・カテゴリを横並びに・タイトルは次行 */
    .post-item {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px var(--spacing-sm);
        padding: 4px 0;
    }

    .post-date {
        min-width: unset;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .post-category {
        flex-shrink: 0;
    }

    /* タイトルは独立行に */
    .post-title {
        width: 100%;
        flex: none;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* タップ領域を広げる */
    .post-item-link {
        padding: 4px 0;
    }


    /* ----------------------------------------
       7. 会社情報セクション (#company)
       ---------------------------------------- */

    /* 会社カードを 1 列に */
    .company-cards-horizontal {
        grid-template-columns: 1fr;
    }

    /* 会社カードの余白を縮小 */
    .company-cards-horizontal .brand-card,
    .company-cards-horizontal .stat-card {
        padding: 20px 16px;
    }

    /* カレンダーグリッド: 2 列維持（月名が潰れないため） */
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* ----------------------------------------
       8. コンタクトセクション (#contact)
       ---------------------------------------- */

    /* 見出し: 大きすぎるので縮小 */
    .contact-heading {
        font-size: 2rem;
    }

    /* CTA ボタン: 全幅ブロック・中央配置・タップしやすく */
    .contact-simple-content .btn {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        padding: 16px 24px;
        text-align: center;
        min-height: 48px;
        box-sizing: border-box;
    }


    /* ----------------------------------------
       9. フッター
       ---------------------------------------- */

    /* メニュー・主要サービスセクションを非表示（ハンバーガーで代替） */
    .footer-menu,
    .services-info {
        display: none;
    }

    /* お問い合わせボタンを非表示（sticky CTAバーが代替） */
    .footer-cta {
        display: none;
    }

    /* 残りの会社情報・SNSセクションをシングルカラムで整える */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* SNS・採用リンクを横並びに */
    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    .footer-link {
        padding: 8px 0;
        min-height: 44px;
        align-items: center;
    }

    /* ----------------------------------------
       共通: 内ページヒーロー・アンカーナビ
       ---------------------------------------- */

    /* 内ページタイトルセクションの 2 カラムを縦積みに */
    .page-title-section__text,
    .page-title-section__image {
        width: 100%;
        flex: none;
    }

    /* アンカーナビゲーションを折り返し */
    .page-anchor-nav,
    .page-nav-links {
        flex-wrap: wrap;
    }

    /* 内ページタイトルセクション: アンカーリンク非表示 */
    .page-title-section__anchors {
        display: none;
    }

    /* アンカー消去後の余白縮小 */
    .page-title-section {
        padding: var(--spacing-2xl) 0;
    }


    /* ----------------------------------------
       会社ページ (page-company.php)
       ---------------------------------------- */

    /* 代表挨拶の 2 カラムを縦積みに */
    .greeting-content {
        flex-direction: column;
    }

    /* CEO の写真を上に表示 */
    .greeting-image {
        order: -1;
    }

    /* 企業理念グリッドを 1 列に */
    .philosophy-grid {
        grid-template-columns: 1fr;
    }

    /* 会社情報カードグリッドを 1 列に */
    .info-cards-grid {
        grid-template-columns: 1fr;
    }

    /* 会社情報テーブルを横スクロール可能に */
    .info-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ----------------------------------------
       事業内容・製品ページ (page-business.php, page-products.php)
       ---------------------------------------- */

    /* 自社商品グリッドを 1 列に */
    .original-products-grid {
        grid-template-columns: 1fr;
    }

    /* サンプル画像グリッドを 1 列に */
    .sample-images-grid {
        grid-template-columns: 1fr;
    }

    /* 製品ヒーローグリッドを 1 列に */
    .product-hero-grid {
        grid-template-columns: 1fr;
    }


    /* ----------------------------------------
       断熱材ページ (page-insulation.php)
       ---------------------------------------- */

    /* 3 列統計グリッドを 2 列に */
    .stats-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 特徴カードグリッドを 1 列に */
    .feature-cards-grid--2col,
    .feature-cards-grid--3col {
        grid-template-columns: 1fr;
    }

    /* 特徴カード内レイアウトを縦積みに */
    .feature-card__layout {
        flex-direction: column;
    }


    /* ----------------------------------------
       ウォータージェットページ (page-waterjet.php)
       ---------------------------------------- */

    /* 技術概要: 画像を上・テキストを下の縦積みに */
    .waterjet-page #technology .grid.grid-2 {
        display: flex;
        flex-direction: column;
    }
    .waterjet-page .overview-image {
        order: -1;
        width: 100%;
        margin-bottom: 16px;
    }
    .waterjet-page .overview-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: var(--border-radius-md);
        display: block;
    }
    /* stat-cards: 3 列 → 2 列 */
    .waterjet-page .tech-specs {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* 特徴: grid-3 → 横スクロールカルーセル */
    .waterjet-page #features .grid.grid-3 {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        padding-bottom: 8px;
        grid-template-columns: unset;
    }
    .waterjet-page #features .grid.grid-3::-webkit-scrollbar {
        display: none;
    }
    .waterjet-page #features .feature-card--feature {
        flex-shrink: 0;
        width: 75vw;
        max-width: 280px;
        scroll-snap-align: start;
    }
    /* 特徴カルーセル: ドットインジケーター表示 */
    .waterjet-page #features .carousel-dots {
        display: flex;
    }

    /* 比較表: テキストを読みやすいサイズに拡大 */
    .waterjet-page .data-table th,
    .waterjet-page .data-table td {
        font-size: var(--size-sm);
        padding: 10px 8px;
    }

    /* 比較表: テーブル全幅展開 + 加工法列・ウォータージェット列を左固定 */
    .waterjet-page .data-table {
        width: max-content;
        min-width: 100%;
    }
    /* 加工法列（1列目）固定 */
    .waterjet-page .data-table th:first-child,
    .waterjet-page .data-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--background-light);
        min-width: 68px;
    }
    /* ウォータージェット列（2列目）固定 */
    .waterjet-page .data-table th:nth-child(2),
    .waterjet-page .data-table td:nth-child(2) {
        position: sticky;
        left: 68px;
        z-index: 2;
        min-width: 90px;
    }
    /* sticky セルの背景を不透明化（透過 rgba では後ろのセルが透けるため）*/
    .waterjet-page .data-table th:nth-child(2) {
        background: #d7ebff; /* rgba(30,144,255,0.18) on white の不透明換算 */
    }
    .waterjet-page .data-table td:nth-child(2) {
        background: #edf6ff; /* rgba(30,144,255,0.08) on white の不透明換算 */
    }
    /* thead は縦スクロール時も最前面 */
    .waterjet-page .data-table thead th {
        z-index: 4;
    }

    /* 素材カード: 2 列 → 3 列コンパクトグリッド */
    .waterjet-page .material-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .waterjet-page .material-card {
        height: 64px;
    }
    .waterjet-page .material-card__name {
        font-size: 0.65rem;
    }

    /* 実績: stat-card を flex-wrap → 2 列グリッドに */
    .waterjet-page .achievements-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    /* 実績: case-study を横スクロールカルーセルに */
    .waterjet-page .case-studies {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px;
        padding-bottom: 8px;
        grid-template-columns: unset;
    }
    .waterjet-page .case-studies::-webkit-scrollbar {
        display: none;
    }
    .waterjet-page .case-study-item {
        flex-shrink: 0;
        width: 88vw;
        max-width: 340px;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    /* サンプル加工事例 CTA: プライマリカラー背景・コンテナ全幅リセット
       ::before は z-index:-1 で bg-gray の背景色に隠れるため、
       セクション自体に直接 background をセットする */
    .waterjet-page .examples-cta-section {
        background: var(--primary-color) !important;
    }
    /* ::before はモバイルでは不要なので非表示 */
    .waterjet-page .examples-cta-section.bg-right-extend::before {
        display: none;
    }
    /* JS(.slide-in)なしでも画像・テキストを表示 */
    .waterjet-page .examples-cta-section .sample-image-item {
        opacity: 1 !important;
        transform: none !important;
    }
    .waterjet-page .examples-cta-section.bg-right-extend .container {
        display: flex !important;
        flex-direction: column;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: var(--spacing-lg) !important;
    }

    /* 関連サービスセクション非表示（ハンバーガーメニューで代替） */
    #waterjet-related-services {
        display: none;
    }

    /* 関連リンクグリッドを 1 列に */
    .related-links-grid {
        grid-template-columns: 1fr;
    }


    /* ----------------------------------------
       お問い合わせページ (page-contact.php)
       ---------------------------------------- */

    /* お問い合わせカテゴリグリッドを 1 列に */
    .contact-categories-grid {
        grid-template-columns: 1fr;
    }

    /* お問い合わせ方法を縦積み・中央揃えに */
    .contact-methods-row {
        flex-direction: column;
        align-items: center;
    }

    /* ----------------------------------------
       グローバルメニュー: 上からドロップダウン
       ---------------------------------------- */

    /* nav パネル本体 */
    .main-navigation {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 85vh;
        overflow-y: auto;
        /* header.css の transparent !important を上書き（白背景） */
        background: #fff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        z-index: 9999 !important;
        /* 上からドロップダウン */
        transform: translateY(-100%);
        transition: transform 0.3s ease !important;
        /* ヘッダー分の余白（ロゴ・ハンバーガーに隠れない） */
        padding-top: 70px;
        padding-bottom: 16px;
    }
    .main-navigation.mobile-menu-open {
        transform: translateY(0) !important;
    }

    /* nav 内 × 閉じるボタン */
    .mobile-nav-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1.5px solid #ccc;
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        color: #555;
        cursor: pointer;
        z-index: 10002;
        padding: 0;
    }
    .mobile-nav-close:hover {
        background: #f5f5f5;
        border-color: #999;
        color: #222;
    }

    /* デスクトップでは非表示 */

    /* ----- nav-menu: 縦積みリスト ----- */
    .main-navigation .nav-menu {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }

    /* トップレベルのメニュー項目 */
    .main-navigation .nav-menu > .menu-item {
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        width: 100%;
        background: #fff !important;
    }

    /* トップレベルのリンクテキスト */
    .main-navigation .nav-menu > .menu-item > a {
        color: #333 !important;
        padding: 15px 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-radius: 0 !important;
        transform: none !important; /* hover の transform を打ち消し */
    }
    .main-navigation .nav-menu > .menu-item > a:hover {
        background: #f7f8fa !important;
        color: var(--primary-color, #1a6cc6) !important;
        transform: none !important;
    }

    /* ドロップダウン矢印: デスクトップ用の ▼ を非表示、代わりに + */
    .main-navigation .nav-menu .menu-item-has-children > a::before {
        content: none !important;
    }
    .main-navigation .nav-menu .menu-item-has-children > a::after {
        content: '+';
        font-size: 1.2rem;
        font-weight: 300;
        color: #999;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
    .main-navigation .nav-menu .menu-item-has-children > a.active::after {
        transform: rotate(45deg);
        color: var(--primary-color, #1a6cc6);
    }

    /* サブメニュー */
    .main-navigation .nav-menu .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: #f7f8fa !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: unset !important;
        display: none; /* JS の .show で表示 */
    }
    .main-navigation .nav-menu .sub-menu.show {
        display: block !important;
    }
    .main-navigation .nav-menu .sub-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        width: 100% !important;
    }
    .main-navigation .nav-menu .sub-menu a {
        color: #555 !important;
        padding: 12px 20px 12px 32px !important;
        font-size: 0.9rem !important;
        font-weight: 400 !important;
        border-radius: 0 !important;
        transform: none !important;
        width: 100%;
    }
    .main-navigation .nav-menu .sub-menu a::before {
        content: none !important;
    }
    .main-navigation .nav-menu .sub-menu a:hover {
        background: #eff2f7 !important;
        color: var(--primary-color, #1a6cc6) !important;
        transform: none !important;
    }

    /* グローバルメニュー内のお問い合わせボタン非表示（下部sticky CTAで代替） */
    .nav-menu .contact-menu-item {
        display: none !important;
    }

}


/* ============================================================
   480px 以下（スマートフォン専用）
   ============================================================ */
@media (max-width: 480px) {

    /* ----------------------------------------
       共通: セクション・タイポグラフィ
       ---------------------------------------- */

    /* セクション間スペーサーをさらに縮小 */
    .section-spacer {
        height: var(--spacing-xl);
    }

    /* セクションタイトルをさらに縮小 */
    .section-title {
        font-size: clamp(1.125rem, 4.5vw, 1.5rem);
    }

    /* セクションパディングを縮小 */
    .section-primary-bg,
    .contact-simple-section {
        padding: 32px 0;
    }


    /* ----------------------------------------
       1. ヒーローセクション (#hero)
       ---------------------------------------- */

    /* 小型スマホ */
    .page-title-section--front {
        min-height: 50vh;
    }

    /* タイトルをさらに縮小 */
    .page-title-section--front .page-title-section__title {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    /* 強調テキストをさらに縮小 */
    .page-title-section--front .emphasis-word-blue,
    .page-title-section--front .emphasis-word-orange {
        font-size: 1.1em;
    }


    /* ----------------------------------------
       2. 技術・サービスセクション (#business)
       ---------------------------------------- */

    /* ナビアイテムを小型スマホ向けに縮小（タッチターゲット 48px 維持） */
    .nav-item {
        width: 110px;
        height: 48px;
    }

    .nav-icon {
        font-size: 14px;
    }

    /* ナビ円弧の高さを縮小 */
    .nav-arc {
        height: 70px;
    }


    /* ----------------------------------------
       7. 会社情報セクション (#company)
       ---------------------------------------- */

    /* カレンダーグリッド: 2 列維持（月名が潰れないため） */
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* ----------------------------------------
       8. コンタクトセクション (#contact)
       ---------------------------------------- */

    /* 見出しをさらに縮小 */
    .contact-heading {
        font-size: 1.75rem;
    }


    /* ----------------------------------------
       内ページ追加対応（480px 以下）
       ---------------------------------------- */

    /* 断熱材ページ: 2 列 → 1 列 */
    .stats-grid--3col {
        grid-template-columns: 1fr;
    }

    /* ウォータージェットページ: 2 列 → 1 列 */
    .material-cards {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   横持ち（Landscape）対応
   高さが狭い横持ちスマホでヒーローが画面を占拠しないよう縮小
   ============================================================ */
@media (max-width: 896px) and (orientation: landscape) and (max-height: 480px) {

    .page-title-section--front {
        min-height: 55vh;
        padding-bottom: 24px;
    }

    .nav-arc {
        height: 60px;
    }

    /* 横持ちでは画面高さが貴重なため浮動バーを非表示 */
    .mobile-sticky-cta {
        display: none;
    }

    /* 横持ち時のフッター余白は不要 */
    .site-main,
    .site-footer {
        padding-bottom: 0;
    }

}


/* ============================================================
   390px 以下（最小スマートフォン）
   375px iPhone SE 等での表示崩れを防止
   ============================================================ */
@media (max-width: 390px) {

    /* コンテナ余白を 16px → 12px に縮小して表示幅を確保 */
    .container,
    .container-wide {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* brand carousel カードを少し広く */
    .brand-showcase .brand-card {
        width: 88vw;
    }

    /* 浮動 CTA: コンパクトに */
    .sticky-cta-btn {
        font-size: 0.8rem;
        padding: 12px 0;
        min-height: 50px;
    }

    /* 極小幅ではテキストを非表示にしてアイコンのみに */
    .sticky-cta-btn span {
        display: none;
    }

    .sticky-cta-btn i {
        font-size: 1.2rem;
    }

    /* 余白も縮小に合わせる */
    .site-main,
    .site-footer {
        padding-bottom: 50px;
    }

}


/* ============================================================
   prefers-reduced-motion アクセシビリティ対応
   OS の「視差効果を減らす」設定に応じてアニメーションを無効化
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    /* AOS アニメーション無効化 */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* ヒーロースライドショーのトランジション除去 */
    .front-slide {
        transition: none !important;
    }

    /* Innovation スライドイン無効化 */
    .bg-right-extend {
        transition: none !important;
        opacity: 1 !important;
    }

    .bg-right-extend .container {
        transition: none !important;
        transform: none !important;
    }

}