/* TOP：Laravel 組み込み用 */

/* ---------- 注意喚起 ---------- */
.alert-top-banner {
    box-sizing: border-box;
    padding: 12rem 24rem;
}

.alert-top-banner a {
    color: inherit;
    text-decoration: underline;
}

/*
 * TOP 専用：globals の min-height や 100% 連鎖で「フッター下まで body が伸びる」のを防ぐ
 * （画面全体が最低 100vh になり、黒フッターの下に無駄な背景が続く）
 */
html:has(body.page-top),
html:has(body.page-top) body {
    min-height: 0 !important;
    height: auto !important;
}

/* overflow-x: hidden を html 側に移す（body に設定すると iOS Safari で position:fixed が効かなくなる） */
html {
    overflow-x: hidden;
}

body.page-top {
    margin: 0;
    min-height: 0 !important;
}

/* メイン列・キャンバス：1440px 制限なし（ビューポート幅いっぱい） */
body.page-top #main-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-top #main-content > .alert-top-banner {
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* PC では KV 内の kv-alert を使うため、ページ上部の alert-top-banner を非表示 */
@media (min-width: 1024px) {
    body.page-top #main-content > .alert-top-banner {
        display: none;
    }
}

body.page-top #main-content > .top-pc {
    width: 100%;
    max-width: none;
    align-self: stretch;
}

body.page-top #main-content > .element-top,
body.page-top #main-content > .top-pc > .element-top {
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden;
    overflow-y: visible;
    /* 既定 .element-top の bg-01（ベタ白）は viewport 固定の c-top-bg を覆い隠してしまうため、
       TOP では透過にして固定パララックス背景が KV〜本文の間隙で見える状態にする。 */
    background-color: transparent !important;
}

/*
 * 1440 / 1400 / 1300 / 1320px 固定のブロックを 100% に（.frame-49 は商品横スクロールのため除外）
 */
body.page-top .element-top .bg,
body.page-top .element-top .view-3,
body.page-top .element-top .footer-PC,
body.page-top .element-top .pickup,
body.page-top .element-top .kv,
body.page-top .element-top .news,
body.page-top .element-top .b,
body.page-top .element-top .online-store,
body.page-top .element-top .view-9,
body.page-top .element-top .frame-128,
body.page-top .element-top .frame-15,
body.page-top .element-top .frame-18,
body.page-top .element-top .frame-20,
body.page-top .element-top .frame-36,
body.page-top .element-top .frame-39,
body.page-top .element-top .serch-box,
body.page-top .element-top .contact,
body.page-products-index .element-top .serch-box {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/*
 * 製品検索カード（serch-box）は他ブロックと違いフルブリードにしない。
 * Figma 2943:125604 では PRODUCTS セクションの 70px ガター内に収まる contained カード
 * （1440 フレームで 1300px = 左右 70px 余白）。上の全幅リストで width:100% を当てると
 * .c-products__header / __group-label（padding:0 70px）より両側に 70px はみ出すため、
 * TOP のみ 70px ガターへ戻して見出し・カルーセルと左右を揃える。
 */
body.page-top .element-top .serch-box {
    width: calc(100% - 140px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    /*
     * 「全ての製品を見る」ボタン露出対策。
     * 直下の .about-advantage-bg-wrapper::before（wrapper 上端から上へ 200px 伸びる
     * 白い帯 / z-index:1）が、検索カード下端のこのボタン（z-index:auto）に覆い被さって
     * 不可視になっていた。検索カードを前面（z-index:2 > 帯の 1）に出して露出させる。
     * 帯は c-products 下端の透明領域に重なるだけなので見た目の回帰はない。
     */
    z-index: 2;
}

/* 旧 .view 高さ 0 化のハック（3 重 KV 複製ブロックを潰す目的）は撤去。
   pc.blade.php から .view ブロック自体が消えたため不要。 */

/* 互換：main 直下でない参照用（将来 include 構造が変わっても） */
body.page-top .element-top {
    box-sizing: border-box;
}

body.page-top .element-top .main-contents,
body.page-top .element-top .view-wrapper,
body.page-top .element-top .div,
body.page-top .element-top .view-3,
body.page-top .element-top .footer-PC,
body.page-top .element-top .pickup {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.page-top .element-top .b {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* 旧 .main-contents の main-contents-background-image.svg 背景は撤去。
   背景は viewport 固定の c-top-bg（components/top-bg.css）が担う。 */

body.page-top .element-top .kv {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
    z-index: 1;
    display: block;
}

body.page-top .element-top .page-top {
    z-index: 101;
}

body.page-top .element-top .frame-42 {
    overflow-x: auto !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
}

body.page-top .element-top .frame-50 {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    min-width: 260rem;
    max-width: 320rem;
}

/* PRODUCTS: 画像未設定時のプレースホルダを画像枠中央に固定 */
body.page-top .element-top .top-product-no-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 180rem !important;
    height: 180rem !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    line-height: 1.2 !important;
    text-indent: 0 !important;
    background: #eeeeee;
    color: #999999;
    font-size: 16rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    border-radius: 12rem;
    box-sizing: border-box;
}

/* ---------- TOP：PC / SP 出し分け ---------- */
.top-pc {
    display: none;
    width: 100%;
}

.top-sp {
    display: block;
    width: 100%;
}

@media (min-width: 1024px) {
    .top-pc {
        display: block;
    }

    .top-sp {
        display: none;
    }
}

/* SP キャンバス：横はみ出し防止 */
body.page-top #main-content > .top-sp .SP {
    max-width: 100vw;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 旧 .header-SP は各テンプレートから削除済み（新 .sp-header に統一） */

body.page-top #main-content > .top-sp {
    align-self: stretch;
    width: 100%;
    max-width: 100vw;
}

/* ---------- TOP レイアウト崩れ修正 ---------- */
@media (min-width: 1024px) {
    /*
     * PC: 10620px 固定キャンバス/absolute 起点を解除し、
     * KV → NEWS → 本文の自然な縦積みへ戻す。
     */
    body.page-top .element-top {
        display: flex;
        flex-direction: column;
        position: relative;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.page-top .element-top .kv {
        order: 2;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        min-height: 900rem;
        z-index: 1;
    }

    body.page-top .element-top .news {
        order: 3;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: -42rem;
        z-index: 1;
    }

    body.page-top .element-top .main-contents {
        order: 4;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        z-index: 1;
    }

    /* ---------- TOP PC 仕上げ調整 ---------- */
    body.page-top .element-top {
        --top-pc-side-gap: clamp(32px, 4.9vw, 70px);
        --top-pc-inner-max: 1300rem;
    }

    /* 1) NEWS: カテゴリ選択状態 */
    body.page-top .element-top .news-category-link {
        transition: color 0.2s ease;
    }

    body.page-top .element-top .news-category-link.is-active {
        color: var(--color-key) !important;
    }

    /* 2) WORKS: コンテナ幅 100% に修正 + タイトル左寄せ / UI端余白 */

    

    

    /* 製作実績一覧へ ボタンを右に */

    

    /* 3) SERVICE: 箱の左右余白 */
    body.page-top .element-top .b {
        width: calc(100% - (var(--top-pc-side-gap) * 2)) !important;
        max-width: 1400rem;
        margin-inline: auto;
        box-sizing: border-box;
    }

    /* 4) PRODUCTS: 余白 / 矢印位置 / 不要な縦スクロール抑制 */

    

    body.page-top .element-top .frame-42 {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        align-items: stretch;
    }

    /* 5) 製品検索: ラジオ／チェックボックスは c-field（field.css）へ統一。
       旧 .search-radio-* / .search-checkbox-* / .checkbox-radio-btn 用の bridge ルールは
       マークアップ移行で全て不要となり撤去。リセット／検索ボタンも共通 c-button へ委譲済み。 */

    /* 6) ADVANTAGE: メイドインジャパン画像フィット */

    

    /*
     * ABOUT: 見出し左位置を揃える（.about-image は img 要素）
     * - about-container の center 解除 + PRODUCTS と同じ横余白
     * - 右列画像は狭い幅で縮め、左テキスト列に最低幅を確保（about-catch-group の固定 436px 対策）
     */

    

    

    /*
     * フッター認証：左の FOLLOW US / エンゲージ列（.frame-90）は絶対に潰さない。
     * min-width:0 を frame-90 に当てると列が潰れて認証ブロックが上にかぶる。
     * 認証は .frame-93 側だけ flex で縮め、SDGs は .frame-95 内で折り返し。
     */

    

    

    

    body.page-top .element-top .footer .text-wrapper-38 {
        white-space: normal;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

}

@media (max-width: 1023.98px) {
    /*
     * SP: 13179px 固定キャンバス + frame-10 absolute(top: 770px) を解除。
     * ヒーロー下に本文を通常フローで積み上げる。
     */
    body.page-top #main-content > .top-sp .SP {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 390rem;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 0 auto;
    }

    /* 旧 .SP .kv（Anima 由来の小文字クラス）向け背景上書きは撤去。
       現行マークアップは .SP .c-kv（components/kv.css）に統一されており、
       背景は viewport 固定の c-top-bg（components/top-bg.css）が担う。 */

    body.page-top #main-content > .top-sp .SP .frame-10 {
        display: flex;
        width: 100%;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        z-index: 2;
    }

    body.page-top #main-content > .top-sp .SP .main-contents {
        width: 100%;
    }

    /* SP TOP：展示会ブロック（.view-4）画像とタイトルの間隔（style.css より後に読み込まれても効くよう詳細度を上げる） */

    

}

/* ================================================================
   検索ダイアログ
   ================================================================ */

/* オーバーレイ */
body.page-top .srch-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

body.page-top .srch-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ダイアログ本体 */

/* ===== タブ行 ===== */

/* ===== 検索パネル共通 ===== */

/* フォーム */

/* キーワード行 */

/* ラベル */

/* 入力ラッパー */

/* 検索ボタンは共通 c-button（search）へ委譲。旧 .srch-submit-icon は撤去。 */

/* ===== 閉じるボタン ===== */

/* ================================================================
   製品検索パネル
   ================================================================ */

/* ダイアログ全体のスクロール対応 */
body.page-top .srch-overlay {
    align-items: flex-start;
    padding: 40rem 20rem;
    overflow-y: auto;
}

/* 製品検索パネル専用の余白 */

/* フォーム */

/* フィールドグループ */

/* 各行 */

/* ラベル */

/* セパレーター */

/* ================================================================
   SP TOP 製品検索セクション
   ラジオ／チェックボックスは c-field（field.css）に統一済み。
   旧 .sp-ps-radio-circle / .sp-ps-checkbox-indicator / .radio-btn / .checkbox-radio-btn
   用のブリッジルールはマークアップ移行で全て不要となり撤去。
   コンテナ間隔は .SP .frame-63（top-sp/top-main.css）が継続管理。
   ================================================================ */

/* TOP製品検索 カテゴリー折りたたみ（6件表示・7件目以降は「さらに表示」で展開）
   ※TOP SP のコンテナ id は js-category-checkboxes-top-sp（製品一覧ページの -sp とは別物）。 */
body.page-top .SP #js-category-checkboxes-top-sp.is-collapsed .c-field__check:nth-child(n+7) {
    display: none;
}

/* ===================================================
   フッター 下部バー（黒背景）テキストカラー修正
   frame-97（PC）/ frame-87（SP）はリンクに color:inherit があるため
   コンテナ側で color:#fff を明示してそれを引き継がせる
   =================================================== */
.element-top .frame-97,
.SP .frame-87 {
    color: #ffffff;
}

/* ===================================================
   お問い合わせ系 PC コンパクトフッター（黒帯）
   footer-compact.blade.php のレイアウト指定
   =================================================== */
.footer-compact-pc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16rem;
    width: 100%;
    padding: 40rem 70rem;
    background-color: #333333;
    box-sizing: border-box;
    color: #ffffff;
}

.footer-compact-pc .frame-98 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 180rem;
    width: 100%;
}

.footer-compact-pc .frame-99 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32rem;
}

.footer-compact-pc .div-3 {
    display: inline-flex;
    align-items: center;
}

.footer-compact-pc .frame-87 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2rem;
}

.footer-compact-pc .text-wrapper-39 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 12rem;
    letter-spacing: 0.48rem;
    line-height: 1.8;
    color: #ffffff;
    white-space: nowrap;
    text-decoration: none;
}

.footer-compact-pc .text-wrapper-40 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 13rem;
    letter-spacing: 0.52rem;
    line-height: 1.8;
    color: #ffffff;
    white-space: nowrap;
    text-decoration: none;
}

.footer-compact-pc .text-wrapper-41 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 12rem;
    line-height: normal;
    color: #ffffff;
    margin: 0;
}

/* ===================================================
   お問い合わせ系 SP コンパクトフッター（黒帯）
   site-shell-sp/footer-compact.blade.php のレイアウト指定
   ＝ PC 版 footer-compact-pc を SP（縦積み・中央寄せ）に展開
   =================================================== */
/* No.31: 通常フッター(SP)はポリシーリンク左揃え・コピーライト中央。
   コンパクトフッター(SP)だけ全体中央寄せになっていて不揃いなので、
   リンク類を左揃えに合わせる（コピーライトは中央のまま）。 */
.footer-compact-sp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16rem;
    width: 100%;
    padding: 32rem 24rem;
    background-color: #333333;
    box-sizing: border-box;
    color: #ffffff;
}

.footer-compact-sp .frame-88 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
    width: 100%;
}

.footer-compact-sp .div-3 {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.footer-compact-sp .frame-79 {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.footer-compact-sp .text-wrapper-51,
.footer-compact-sp .text-wrapper-52 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 12rem;
    letter-spacing: 0.48rem;
    line-height: 1.8;
    color: #ffffff;
    text-decoration: none;
    text-align: left;
}

.footer-compact-sp .text-wrapper-53 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 11rem;
    line-height: normal;
    color: #ffffff;
    margin: 8rem 0 0;
    text-align: center;
}

/* ===================================================
   クッキー同意バナー
   =================================================== */
.ck-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border-top: 3rem solid var(--color-key, #ff6243);
    box-shadow: 0 -4rem 20rem rgba(0, 0, 0, 0.10);
    font-family: "Noto Sans JP", sans-serif;
}

/* 検索ダイアログ（#srch-overlay）が開いている間は、クッキー同意バナー(z-index:9999)を
   非表示にして、ダイアログ下部の「リセット / 製品を探す」「閉じる」が覆われないようにする。
   :has() は対応ブラウザ（Chrome 105+ / Safari 15.4+ / Firefox 121+）で発火。
   ダイアログを閉じれば自動で復帰。 */
body:has(#srch-overlay.is-open) .ck-banner {
    display: none !important;
}

.ck-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rem;
    max-width: 1300rem;
    margin: 0 auto;
    padding: 20rem 40rem;
}

/* アイコン（クッキー形） */
.ck-banner__icon {
    display: inline-block;
    flex-shrink: 0;
    width: 24rem;
    height: 24rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6243'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='8.5' cy='9' r='1.5' fill='%23fff'/%3E%3Ccircle cx='14.5' cy='8' r='1' fill='%23fff'/%3E%3Ccircle cx='9' cy='14' r='1' fill='%23fff'/%3E%3Ccircle cx='14' cy='14.5' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ck-banner__body {
    display: flex;
    align-items: flex-start;
    gap: 12rem;
    flex: 1;
    min-width: 0;
}

.ck-banner__text {
    margin: 0;
    font-size: 13rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--color-neutral-01, #333333);
}

/* ボタン群 */
.ck-banner__btns {
    display: flex;
    align-items: center;
    gap: 12rem;
    flex-shrink: 0;
}

.ck-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40rem;
    padding: 0 24rem;
    border-radius: 20rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
    white-space: nowrap;
}

/* 閉じるボタン（アウトライン） */
.ck-banner__btn--dismiss {
    background-color: #ffffff;
    color: var(--color-neutral-01, #333333);
    border: 1.5rem solid var(--color-bg-03, #eae5e1);
}

.ck-banner__btn--dismiss:hover {
    background-color: var(--color-bg-02, #f5f2f0);
    opacity: 1;
}

/* 同意するボタン（オレンジ塗り） */
.ck-banner__btn--agree {
    background-color: var(--color-key, #ff6243);
    color: #ffffff;
    border: 1.5rem solid transparent;
}

.ck-banner__btn--agree:hover {
    opacity: 0.8;
}

/* ===== SP ===== */
@media (max-width: 1023.98px) {
    .ck-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16rem;
        padding: 16rem 20rem;
    }

    .ck-banner__body {
        align-items: flex-start;
        gap: 10rem;
    }

    .ck-banner__icon {
        margin-top: 2rem;
    }

    .ck-banner__text {
        font-size: 12rem;
    }

    .ck-banner__btns {
        width: 100%;
        justify-content: flex-end;
        gap: 10rem;
    }

    .ck-banner__btn {
        height: 36rem;
        padding: 0 20rem;
        font-size: 12rem;
    }
}

/* ================================================================
   TOP PC カルーセル（制作事例 / 新着製品 / 人気製品）
   - 矢印ボタンの基本スタイル
   - works / products とも transform 方式のスライドカルーセル
   ================================================================ */
@media (min-width: 1024px) {
    /* 矢印ボタン共通 */

    

    

    /* works：横幅いっぱい、画面端まで表示（paddingなし） */
    body.page-top .element-top .works-cards-wrapper {
        display: block !important;
        overflow: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        align-self: stretch !important;
    }

    

    /* 製品（新着 / 人気）：works と同じ1カードずつスライド */
    body.page-top .element-top .frame-42.pc-products-cards-wrapper {
        display: block !important;
        overflow: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    body.page-top .element-top .pc-products-cards-row[data-pc-products-track] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 24rem !important;
        will-change: transform;
        width: max-content !important;
        min-width: 100% !important;
        padding-inline: var(--top-pc-side-gap, 70rem);
    }

    body.page-top .element-top .pc-products-card-item {
        flex: 0 0 auto;
        width: 307rem;
    }

    /* グリッドタイル流用：単体カードでも余白を整える */
    body.page-top .element-top .pc-products-card-item .frame-51 {
        width: 307rem;
        margin-left: 0;
        margin-right: 0;
    }

    body.page-top .element-top .pc-products-card-item .frame-45 {
        width: 100%;
    }
}