/*
Theme Name: Sunhaisoucenter Theme
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunhaisoucenter-theme
Tags: 
*/

/* ヘッダーのスクロールを滑らかにする（共通） */
html {
  scroll-behavior: smooth;
}

/* フォントサイズの変更（共通） */
h1 {
    font-size: clamp(2rem, 1.0769rem + 1.9231vw, 3rem);
    text-align: justify;
}
h2 {
    font-size: clamp(1.5rem, 0.5769rem + 1.9231vw, 2.5rem);
    text-align: justify;
}
h3 {
    font-size: clamp(1.25rem, 0.5577rem + 1.4423vw, 2rem);
    text-align: justify;
}
h4 {
    font-size: clamp(1.125rem, 0.7788rem + 0.7212vw, 1.5rem);
    text-align: justify;
}
h5 {
    font-size: clamp(1rem, 0.8846rem + 0.2404vw, 1.125rem);
    text-align: justify;
}
h6 {
    font-size: clamp(0.875rem, 0.7596rem + 0.2404vw, 1rem);
    text-align: justify;
}
p {
    font-size: clamp(0.875rem, 0.7596rem + 0.2404vw, 1rem);
    text-align: justify;
}
a {
    font-size: clamp(0.875rem, 0.7596rem + 0.2404vw, 1rem);
    text-align: justify;
}

/* header */
header {

    /* ヘッダーを上部に固定して追従させる（共通） */
    position: sticky;
    top: 0;
    right: 0;
    z-index: 999;

    /* ロゴの位置を上下中央ぞろえに調整（共通） */
    .wp-block-site-logo {
        margin: auto 0;
    }
    figure {
        display: flex;
        align-items: center;
    }

    /* タブレット・スマホ版 */
    @media (max-width: 1280px) {

        /* ハンバーガーメニューを使用（タブレット（Air・mini）・スマホ版） */
        .wp-block-navigation__responsive-container {
            display: none !important;
        }
        button.wp-block-navigation__responsive-container-open {
            display: block !important;
        }
        .has-modal-open.is-menu-open {
            display: block !important;
        }

        /* スマホ版 */
        @media (max-width: 500px) {

            /* 横幅を広げ、左右の余白を狭める（スマホ版） */
            .wp-container-core-group-is-layout-5924e470 {
                max-width: 100% !important;
            }
            .wp-block-navigation__responsive-close {
                max-width: 100% !important;
            }
        }
        
    }
}

/* footer */
footer {

    /* ロゴ+社名のサイズを調整（共通） */
    .wp-container-core-columns-is-layout-658170e2 {
        max-width: 72%;
    }

    /* ロゴのサイズを調整（共通） */
    .wp-block-font-awesome-icon.wp-font-awesome-icon {
        max-width: 48px;
        max-height: 48px;
        svg {
            aspect-ratio: 1 / 1;
            width: 100%;
            height: auto;
        }
    }

    /* お問い合わせの電話番号の文字列を折り返さない（共通） */
    h2 {
        white-space: nowrap;
    }

    /* お問い合わせ欄の電話番号のフォントサイズを変更（共通） */
    #contact {
        h2 {
            a {
                font-size: clamp(1.5rem, 0.5769rem + 1.9231vw, 2.5rem);
            }
        }
    }

    /* PC・タブレット版 */
    @media (min-width: 501px) {

        /* PC・タブレットでは電話番号をクリックしてもかからない（PC・タブレット版） */
        a[href*="tel:"] {
            pointer-events: none;
            cursor: default;
            text-decoration: none;
        }

    }

    /* スマホ・タブレット版 */
    @media (max-width: 1280px) {

        /* 左右の余白を狭める（スマホ・タブレット版） */
        .wp-container-core-columns-is-layout-076b8e0d {
            margin-left: 0;
            margin-right: 0;
            max-width: 100%;
        }

        /* タブレット版（mini）版 */
        @media (max-width: 800px) and (min-width: 501px) {

            /* 所在地のカラムを横並びにする（タブレット版（miniのみ）） */
            .wp-container-core-columns-is-layout-47c06fe3 {
                flex-wrap: nowrap !important;
            }

        }

        /* スマホ・タブレット（mini）版 */
        @media (max-width: 800px) {

            /* お問い合わせと所在地のカラムの順序を上下逆にする（スマホ・タブレット（mini）版） */
            .wp-container-core-columns-is-layout-076b8e0d {
                flex-wrap: wrap-reverse !important;
            }

            /* スマホ版 */
            @media (max-width: 500px) {

                /* ロゴのサイズを調整（スマホ版のみ） */
                .wp-block-font-awesome-icon.wp-font-awesome-icon {
                    max-width: 32px;
                    max-height: 32px;
                }

            }
            
        }

    }
}

/* PC版のコンテンツサイズを固定 */
@media (min-width: 1281px) {
    .content-width {
        max-width: 1200px;
    }
}

/* ボタンブロックのフォントサイズを変更（共通） */
.wp-block-button {
    a {
        font-size: clamp(0.875rem, 0.7596rem + 0.2404vw, 1rem);
    }
}

/* スライダーの画像サイズを調整（共通） */
.slider-multiple {
    height: auto;
    .vk_slider_item_container.container {
        max-width: 96%;
        figure {
            margin-bottom: 2.25rem;
        }
    }
    .swiper-pagination.swiper-pagination-bullets.swiper-pagination-clickable.swiper-pagination-horizontal {
        bottom: 0;
    }

    /* スライダーのページネーションのデザインを変更（共通） */
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        aspect-ratio: 1 / 1;
        max-width: 16px;
        width: 100%;
        height: auto;
        outline: 0;
        background-color: var(--wp--preset--color--primary);
        border-radius: 50px;
    }
    .swiper-pagination-bullet {
        aspect-ratio: 1 / 1;
        max-width: 16px;
        width: 100%;
        height: auto;
        outline: 0;
        background-color: var(--wp--preset--color--tertiary);
        border-radius: 50px;
    }
}

/* リストブロックのフォントサイズを変更（共通） */
.wp-block-list {
    li {
        font-size: clamp(0.875rem, 0.7596rem + 0.2404vw, 1rem);
        text-align: justify;
    }
}

/* HOME */
.home {

    /* HOMEの会社概要と採用情報の欄のデザインを調整（共通） */
    .home-company-recruit {
        .wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
            aspect-ratio: 2 / 1;
            .wp-block-group.is-nowrap.is-layout-flex.wp-block-group-is-layout-flex.lazyloaded {
                height: 100%;
                background-blend-mode: overlay;
                background-color: rgba(0, 0, 0, 0.5) !important;
            }
        }
    }

    /* HOMEのフッターとコンテンツの余白をなくす（共通） */
    footer {
        margin-top: 0;
    }

    /* スマホ・タブレット版 */
    @media (max-width: 1280px) {
        
        /* HOMEの会社概要と採用情報の欄のデザインを調整（タブレット版（Pro）） */
        .home-company-recruit {
            .wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
                aspect-ratio: 3 / 2;
            }
        }

        /* 見出しと縦線の間の余白を小さくする（スマホ・タブレット版） */
        .content-width {
            h3 {
                padding-left: var(--wp--preset--spacing--30) !important;
            }
        }

        @media (max-width: 1000px) {

            /* HOMEの会社概要と採用情報の欄のデザインを調整（タブレット版（Air）） */
            .home-company-recruit {
                .wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
                    aspect-ratio: 4 / 3;
                }
            }

            @media (max-width: 800px) {

                /* HOMEの会社概要と採用情報の欄のデザインを調整（タブレット版（mini）） */
                .home-company-recruit {
                    .wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
                        aspect-ratio: 2 / 1;
                    }
                }

                @media (max-width: 500px) {

                    /* 左右の余白を狭める（スマホ版） */
                    h2 {
                        margin-left: 0;
                        margin-right: 0;
                        max-width: 100%;
                    }
                    .wp-container-core-columns-is-layout-f3a7ff92 {
                        margin-left: 0;
                        margin-right: 0;
                        max-width: 100%;
                    }
                    .wp-container-core-group-is-layout-0111e8f6 {
                        margin-left: 0;
                        margin-right: 0;
                        max-width: 100%;
                    }

                    /* HOMEの会社概要と採用情報の欄のデザインを調整（スマホ版） */
                    .home-company-recruit {
                        .wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
                            aspect-ratio: 3 / 2;
                        }
                    }

                }
            }
        }
    }

}

/* 固定ページのメインビジュアル */
.static-page-mv {
    .wp-block-group {
        margin-block-start: -2% !important;
        width: fit-content;
        h2 {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100%;
        }
    }

    @media (max-width: 1280px) {
        .wp-block-group {
            margin-block-start: -3% !important;
        }

        @media (max-width: 500px) {
            .wp-block-group {
                margin-block-start: -6% !important;
            }
        }
    }
}

/* 事業紹介ページ */
.page-id-127 {

    /* footerとmainの余白をなくす（共通） */
    main {
        margin-bottom: 0 !important;
    }
    footer {
        margin-top: 0;
    }

    /* pタグを横幅いっぱいに広げる（共通） */
    p {
        max-width: 100%;
    }

    .service-slider {

        /* 見出しを改行しないようにする（共通） */
        h2 {
            white-space: nowrap;
        }

        /* 説明文の欄をスライダーの高さに合わせる（共通） */
        .service-text {
            display: flex;
            flex-direction: column;
            .wp-block-group.has-tertiary-background-color.has-background.has-global-padding.is-content-justification-left.is-layout-constrained.wp-block-group-is-layout-constrained {
                flex-grow: 1;
                p {
                    max-width: 100%;
                }
            }
        }

        .wp-block-vk-blocks-slider.swiper.swiper-container.vk_slider.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
            height: auto;

            /* スライダーの画像サイズを変更（共通） */
            .vk_slider_item_container.container {
                max-width: 100%;
                figure {
                    margin-bottom: 2.25rem;
                }
            }
            .swiper-pagination.swiper-pagination-bullets.swiper-pagination-clickable.swiper-pagination-horizontal {
                bottom: 0;
            }

            /* スライダーのページネーションのデザインを変更（共通） */
            .swiper-pagination-bullet.swiper-pagination-bullet-active {
                aspect-ratio: 1 / 1;
                max-width: 16px;
                width: 100%;
                height: auto;
                outline: 0;
                background-color: var(--wp--preset--color--primary);
                border-radius: 50px;
            }
            .swiper-pagination-bullet {
                aspect-ratio: 1 / 1;
                max-width: 16px;
                width: 100%;
                height: auto;
                outline: 0;
                background-color: var(--wp--preset--color--tertiary);
                border-radius: 50px;
            }
        }
        
    }

    /* 証明書の見出しの下線を見出しの横幅に合わせる（共通） */
    .proof-heading {
        width: fit-content;
    }

    /* 証明書の詳細欄に影を付ける（共通） */
    .proof-text-02 {
        box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
    }

    /* タブレット・スマホ版 */
    @media (max-width: 1280px) {

        /* 各サービスを縦並びにする（タブレット・スマホ版） */
        .service-slider {
            flex-direction: column;
        }
        .service-02 {
            flex-direction: column-reverse;
            .wp-block-column {
                width: 100% !important;
            }
        }

        /* タブレット（mini）・スマホ版 */
        @media (max-width: 800px) {

            /* 各サービスを縦並びにした際に横幅をそろえる（タブレット・スマホ版） */
            .service-01 {
                .wp-block-column {
                    width: 100% !important;
                }
            }

            /* タブレットとPCでは説明文を非表示にする（タブレット（mini）・スマホ版） */
            .proof-text-02 {
                display: none;
            }

            /* スマホ版 */
            @media (max-width: 500px) {

                /* 横幅を広げ、左右の余白を狭める（スマホ版） */
                .wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
                    max-width: 100%;
                }
                .service-slider {
                    max-width: 100%;
                }
                .wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex {
                    max-width: 100%;
                }
                footer {
                    .wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
                        max-width: none !important;
                    }
                }

            }
        }
    }

    /* PC・タブレット（Air・Pro）版 */
    @media (min-width: 801px) {

        /* タブレット（mini）とスマホでは説明文リストを非表示にする（タブレット（Air・Pro）・PC版） */
        .proof-text-01 {
            display: none;
        }
    }

}

/* 会社案内 */
.page-id-208 {

    /* 各拠点のマップの比率を変更(共通) */
    .google-map {
        aspect-ratio: 3 / 2;
        iframe {
            aspect-ratio: 3 / 2;
        }
    }

    @media (max-width: 1280px) {

        /* 見出しと縦線の間の余白を小さくする（スマホ・タブレット版） */
        h3.content-width {
            padding-left: var(--wp--preset--spacing--30) !important;
        }

        @media (max-width: 800px) {

            /* 各拠点の並べ方を1列にする(タブレット（mini）・スマホ版) */
            .is-layout-grid.wp-block-group-is-layout-grid {
                grid-template-columns: 1fr;
            }

            @media (max-width: 500px) {

                /* 要素の横幅を広げ、左右の余白を狭める（スマホ版） */
                .content-width {
                    max-width: 100%;
                }

                /* 会社概要のリストの間隔を狭める（スマホ版） */
                .wp-container-core-group-is-layout-b1d2fd96 {
                    gap: var(--wp--preset--spacing--40);
                }
            }
        }
    }

}

/* 採用情報 */
.page-id-237 {

    /* タブレット・スマホ版 */
    @media (max-width: 1280px) {

        /* 見出しと縦線の間の余白を小さくする（タブレット・スマホ版） */
        h3.content-width {
            padding-left: var(--wp--preset--spacing--30) !important;
        }

        /* スマホ版 */
        @media (max-width: 500px) {

            /* 横幅を広げ、左右の余白を狭める（スマホ版） */
            p.content-width {
                max-width: 100%;
            }
            h3.content-width {
                max-width: 100%;
            }
            div.content-width {
                max-width: 100%;
            }
        }
    }

}