/*
Theme Name: Mystyle Theme
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
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: mystyle-theme
Tags: 
*/

/* フォントサイズ（共通） */
h1 {
    font-size: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
}
h2 {
    font-size: clamp(2rem, 1.8786rem + 0.5178vw, 2.5rem);
}
h3 {
    font-size: clamp(1.5rem, 1.3786rem + 0.5178vw, 2rem);
}
h4 {
    font-size: clamp(1.25rem, 1.1893rem + 0.2589vw, 1.5rem);
}
h5 {
    font-size: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
}
h6 {
    font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
}
p {
    font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
    text-align: justify;
}
a {
    font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
}

div.wp-site-blocks {
    
    /* 余白を調整（共通） */
    main {
        --wp--preset--spacing--20: clamp(0.25rem, 0.1893rem + 0.2589vw, 0.5rem) !important;
        --wp--preset--spacing--30: clamp(0.5rem, 0.3786rem + 0.5178vw, 1rem) !important;
        --wp--preset--spacing--40: clamp(1rem, 0.8786rem + 0.5178vw, 1.5rem) !important;
        --wp--preset--spacing--50: clamp(1.5rem, 1.3786rem + 0.5178vw, 2rem) !important;
        --wp--preset--spacing--60: clamp(2rem, 1.5146rem + 2.0712vw, 4rem) !important;
        --wp--preset--spacing--70: clamp(4rem, 3.4539rem + 2.3301vw, 6.25rem) !important;
        --wp--preset--spacing--80: clamp(6.25rem, 4.733rem + 6.4725vw, 12.5rem) !important;

        /* 横スクロールバーを削除（共通） */
        position: relative;
        overflow: hidden;
        
        .entry-content {
            position: relative;
            overflow: hidden;
        }
    }
}

html {
    scroll-padding-top: 120px; /* 固定ヘッダーの高さに合わせて調整 */
	scroll-behavior: smooth; /* スクロール時、ゆっくり遷移する */
}

/* 復元フラグがある時（htmlにこのクラスがついている時）は、スムーズスクロールを「強制的に無効（auto）」にする */
html.is-restoring-scroll {
    scroll-behavior: auto !important;
}

/* 復元中、ページを隠すための設定（以前のコードの改良版） */
html.is-restoring-scroll body {
    opacity: 0 !important;
}

@media (max-width: 500px) {
    html {
        scroll-padding-top: 80px; /* 固定ヘッダーの高さに合わせて調整 */
    }
}

/* ヘッダーを上部に固定し、追従する（共通） */
header {
    position: sticky !important;
    top: 0;
    z-index: 999;

    /* 開閉するボタンの色を変更（共通） */
    .wp-block-navigation__responsive-container-open {
        color: var(--wp--preset--color--brown-02) !important;
        background-color: var(--wp--preset--color--primary) !important;
        padding: 10px;

        svg {
            fill: var(--wp--preset--color--brown-02) !important;
        }
    }
    .wp-block-navigation__responsive-container-close {
        color: var(--wp--preset--color--brown-02) !important;

        svg {
            fill: var(--wp--preset--color--brown-02) !important;
        }
    }

    /* タブレット・スマホ */
    @media (max-width: 1000px) {
        
        /* iPad miniサイズからハンバーガーメニューを表示（タブレット・スマホ） */
        .wp-block-navigation__responsive-container-open {
            display: flex !important;
        }
        .wp-block-navigation__responsive-container {
            display: none !important;
        }
        .wp-block-navigation__responsive-container.is-menu-open {
            display: flex !important;
        }

        /* タブレット（Air・mini） */
        @media (min-width: 501px) {

            /* ハンバーガーメニューを開いたときのpaddingを広げる（タブレット（mini）） */
            .wp-block-navigation__responsive-container.is-menu-open {
                padding: 56.11px 50px !important;
            }
        }

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

            /* ハンバーガーメニューを開いたときのpaddingを広げる（スマホ） */
            .wp-block-navigation__responsive-container.is-menu-open {
                padding: 18px 30px !important;
            }
        }
    }
}

/* フッターの上の余白をなくす（共通） */
footer {
    margin-top: 0;

    /* ナビゲーションメニューのフォントの色を固定（共通） */
    p.gb-text {
        [data-type="page"] {
            color: var(--wp--preset--color--base, #FFFFFF);
        }
        [data-type="page"]:hover {
            color: var(--wp--preset--color--primary);
        }
    }
}

/* ブロックのスタイル */
/* カテゴリーブロックの区切り線のスペースをなくす（共通） */
.wp-block-post-terms__separator {
    display: none;
}

/* カテゴリーをクリックしても反応しないようにし、ホバー効果もなくなるようにする（共通） */
.taxonomy-category.wp-block-post-terms {
    a {
        pointer-events: none;
        cursor: default;
    }
}

/* ボタンブロック（コア機能）がホバー効果で枠線の色が変わるようにする（共通） */
.wp-block-button__link:hover { 
    border-color: var(--wp--preset--color--primary) !important;
}

/* VKブロックのアイコンのmarginをなくす（共通） */
.vk_icon {
    margin-bottom: 0 !important;
}

/* パターン */
/* お見積もり・お問い合わせ欄の横幅をいっぱいに広げる（共通） */
.contact-list {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
	
	/* 電話番号のフォントサイズを変更（共通） */
	h1 {
		a {
			font-size: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem) !important;
		}
	}

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

        /* 見出しをPC・スマホで表示を変更する（スマホ） */
        h2.home-contact-pc {
            display: none;
        }

        /* お見積もり・お問い合わせフォームボタンの余白を変更（スマホ） */
        .wp-block-button {
            width: 100%;

            a.wp-block-button__link.wp-element-button {
                padding: 10px 24px !important;
            }
        }
    }

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

        /* 見出しをPC・スマホで表示を変更する（PC・タブレット） */
        h2.home-contact-mobile {
            display: none;
        }
    }
}

/* 背景画像の上に色を乗せる（共通） */
.contact-list::after {
    content: '';
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* お見積もり・お問い合わせ欄の背景画像の位置を上部に変更（タブレット・スマホ） */
@media (max-width: 1000px) {
    .contact-list {
        background-position: top !important;
    }
}

/* 固定ページテンプレート */
.wp-singular.page-template-default.page {

    /* ページタイトルの横幅を文字数に合わせる（共通） */
    .has-text-align-center.wp-block-post-title {
        width: fit-content;
    }
}
.wp-singular.page-template.page-template-wp-custom-template.page {

    /* ページタイトルの横幅を文字数に合わせる（共通） */
    .has-text-align-center.wp-block-post-title {
        width: fit-content;
    }
}

/* 投稿型ページテンプレート */
.wp-singular.post-template-default.single.single-post {
	
	/* 横スクロールバーを削除（共通） */
	div.wp-site-blocks {
		position: relative;
		overflow-x: clip;
		overflow-y: visible;
		
		.wp-block-query.is-layout-flow.wp-block-query-is-layout-flow {
			.taxonomy-category.wp-block-post-terms {

				/* 関連記事に3つ以上カテゴリーが付与されている場合、3つ目のカテゴリーは非表示にする（共通） */
				a:nth-child(3) {
					display: none;
				}
			}
		}

		/* カテゴリーが折り返された際、日付とカテゴリーの間の余白を狭める（共通） */
		.post-date-category {
			row-gap: var(--wp--preset--spacing--30);

			/* 親要素の高さを子要素の高さに合わせる（共通） */
			time {
				display: block;
				line-height: 1;
			}
		}
	}
}

/* PC・タブレットでは電話を発信しない（PC・タブレット） */
@media (min-width: 501px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

/* ページトップに戻るボタンのサイズを画面幅に合わせて変える（共通） */
#wpfront-scroll-top-container img {
	width: clamp(3.5rem, 3.3786rem + 0.5178vw, 4rem) !important;
	height: clamp(3.5rem, 3.3786rem + 0.5178vw, 4rem) !important;
	z-index: 998 !important;
}

/* ハンバーガーメニューを開いた際に、ページトップに戻るボタンが上に重ならないようにする（共通） */
#wpfront-scroll-top-container {
	z-index: 998 !important;
}

/* HOME */
.home {
	
	/* 「お問い合わせはこちらから」の高さの変更（共通） */
	.gb-element-88fac61d {
		.wp-container-core-group-is-layout-e33739a1 {
			height: 100%;
		}
	}
    .entry-content {

        /* 施工サービスを画面横幅いっぱいに広げる（共通） */
        .home-service-slider {
            margin: 0 calc(50% - 50vw);
            width: 100vw;

            /* スライダーアイテムの左右に余白を追加（共通） */
            .wp-block-vk-blocks-slider-item.vk_slider_item.swiper-slide.vk_valign-center {
                padding: 0 16px !important;
            }
        }

        /* 会社概要の写真の横幅を広げる（横幅2000px以上） */
        @media (min-width: 2000px) {
            .gb-element-c80ac1c1 {
                .gb-element-2e240a54 {
                    width: 120% !important;
                }
            }
        }

        /* 施工サービスのテキストの横幅と位置を変更（共通） */
        .gb-element-1d36ac95 {
            p {
                max-width: 960px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        /* カテゴリーが折り返された際、日付とカテゴリーの間の余白を狭める（共通） */
        .home-date-category {
            row-gap: var(--wp--preset--spacing--30);

            /* 親要素の高さを子要素の高さに合わせる（共通） */
            time {
                display: block;
                line-height: 1;
            }
        }

        /* ショート動画のスライダー */
        .home-movie-slider {
			margin: 0 calc(50% - 50vw);
            width: 100vw;

            /* ナビゲーションのスタイルの変更（共通） */
            .swiper-button-next.swiper-button-center {
                background-color: var(--wp--preset--color--primary);
                color: var(--wp--preset--color--brown-01);
                border-radius: 100px;
                right: 16px !important;
                top: 45%;
            }
            .swiper-button-next.swiper-button-center::after {
                font-size: 8px;
                font-weight: 700;
            }
            .swiper-button-prev.swiper-button-center {
                background-color: var(--wp--preset--color--primary);
                color: var(--wp--preset--color--brown-01);
                border-radius: 100px;
                left: 16px !important;
                top: 45%;
            }
            .swiper-button-prev.swiper-button-center::after {
                font-size: 8px;
                font-weight: 700;
            }

            /* ページネーションのスタイルの変更（共通） */
            .swiper-pagination.swiper-pagination-bullets.swiper-pagination-clickable.swiper-pagination-horizontal {
                .swiper-pagination-bullet.swiper-pagination-bullet-active {
                    background: var(--wp--preset--color--primary);
                    outline: none;
                    width: 16px;
                    height: 16px;
                    border-radius: 100px;
                }
                .swiper-pagination-bullet {
                    background: var(--wp--preset--color--gray-01);
                    outline: none;
                    width: 16px;
                    height: 16px;
                    border-radius: 100px;
                }
            }

            /* ページネーションの位置をスライダーの下にずらす（共通） */
            /* .swiper-wrapper {
                padding-bottom: 64px;
            }
            @media (max-width: 1280px) {
                .swiper-wrapper {
                    padding-bottom: 48px;
                }
            } */

            /* 各スライダーアイテムのスタイルを変更（共通） */
            .wp-block-vk-blocks-slider-item.vk_slider_item.swiper-slide {
                padding: 0 16px !important; /* 左右に余白を追加 */
                figure.wp-block-embed.is-type-video.is-provider-youtube.wp-block-embed-youtube {
                    margin-bottom: 0 !important; /* 下の余白を削除 */
                    iframe.lazyloaded {
                        border-radius: 5px; /* 動画を角丸に変更 */
                    }
                }
            }
        }
    }
}

/* 会社案内ページ */
.page-id-469 {

    main {

        /* 会社外装の写真を左端まで横幅を広げる（共通） */
        .company-about {
            .company-about-img {
                margin-left: calc(50% - 50vw);
            }
        }

        /* ショールームの写真を左端まで横幅を広げる（共通） */
        .company-showroom {
            .company-showroom-img {
                margin-right: calc(50% - 50vw);
            }
        }

        /* スライダー */
        .wp-block-vk-blocks-slider.swiper.swiper-container.vk_slider {

            /* ページネーションのスタイルの変更（共通） */
            .swiper-pagination.swiper-pagination-bullets.swiper-pagination-clickable.swiper-pagination-horizontal {
                .swiper-pagination-bullet.swiper-pagination-bullet-active {
                    background: var(--wp--preset--color--primary);
                    outline: none;
                    width: 16px;
                    height: 16px;
                    border-radius: 100px;
                }
                .swiper-pagination-bullet {
                    background: var(--wp--preset--color--gray-01);
                    outline: none;
                    width: 16px;
                    height: 16px;
                    border-radius: 100px;
                }
            }

            /* ページネーションの位置をスライダーの下にずらす（共通） */
            .swiper-wrapper {
                padding-bottom: 40px;
            }
        }

        /* Googleマップを角丸にする（共通） */
        .wp-block-vk-blocks-visual-embed.vk-visual-embed {
            iframe {
                border-radius: 5px;
            }
        }
    }

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

        /* 会社外装の写真を画面中央に配置（タブレット・スマホ） */
        .company-about {
            .company-about-img {
                margin-left: 0 !important;
                img {
                    border-radius: 5px !important;
                }
            }
        }

        /* ショールームの写真を画面中央に配置（タブレット・スマホ） */
        .company-showroom {
            .company-showroom-img {
                margin-right: 0 !important;
                img {
                    border-radius: 5px !important;
                }
            }
        }

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

            /* 所在地とGoogleマップのボタンの幅をなくす（スマホ） */
            .wp-container-core-group-is-layout-91e87306 {
                gap: 0 !important;
            }
        }
    }
}

/* お問い合わせページ */
.page-id-594 {

    /* 「個人情報の取扱に関する詳細情報はこちら」ボタンのテキストを改行させないようにする（共通） */
    .wp-block-vk-blocks-button.vk_button.vk_button-color-custom.vk_button-align-right {
        span.vk_button_link_txt {
            text-wrap: nowrap;
        }
    }

    /* お問い合わせフォーム */
    form {
        .wp-block-snow-monkey-forms-item.smf-item {
            
            /* ラベルカラム（左）と入力項目（右）を両端ぞろえにする（共通） */
            justify-content: space-between;

            /* 各項目の間に余白を入れる（共通） */
            margin-block-start: var(--wp--preset--spacing--60);
            padding: 0;

            /* ラベルカラム（左）のスタイルを指定（共通） */
            .smf-item__col.smf-item__col--label {
                display: flex;
                align-items: center;
                column-gap: 16px;

                /* テキストの色とフォントを変更（共通） */
                span.smf-item__label__text {
                    color: var(--wp--preset--color--brown-01);
                    font-family: var(--wp--preset--font-family--noto-serif-jp);
                    font-weight: 700;
                }

                /* 必須・任意のmarginを削除（共通） */
                .smf-item__description {
                    margin: 0;
                }
            }

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

                /* ラベルカラム（左）のスタイルを指定（スマホ） */
                .smf-item__col.smf-item__col--label {
                    padding-bottom: 16px;
                }
            }

            /* 入力項目（右）のスタイルを指定（共通） */
            .smf-item__col.smf-item__col--controls {

                /* 短い文章入力項目 */
                .smf-text-control__control {
                    background-color: var(--wp--preset--color--gray-01);
                    box-shadow: none;
                    padding: 16px clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
                    --_border-radius: 5px;
                    --_border-color: var(--wp--preset--color--gray-02);
                    border: 1px solid var(--wp--preset--color--gray-02);
                    border-radius: 5px;
                }

                /* ラジオボタン */
                .smf-radio-buttons-control.smf-radio-buttons-control--horizontal {
                    .smf-radio-buttons-control__control {

                        /* 高さを子要素に合わせる（共通） */
                        height: auto;
                        display: flex;
                        column-gap: clamp(2rem, 1.5146rem + 2.0712vw, 4rem);

                        .smf-label {
                            margin-right: 0;

                            /* 高さを子要素に合わせる（共通） */
                            label {
                                height: auto;
                                display: flex;
                            }

                            .smf-radio-button-control {
                                align-items: center;
                                column-gap: clamp(0.5rem, 0.3786rem + 0.5178vw, 1rem);

                                /* ラジオボタンのスタイルを変更（共通） */
                                .smf-radio-button-control__control {
                                    margin-top: 0;
                                    box-shadow: none;
                                    --_border-color: var(--wp--preset--color--gray-02);
                                    border: 1px solid var(--wp--preset--color--gray-02);
                                    aspect-ratio: 1 / 1;
                                    width: clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
                                    height: auto;
                                }

                                /* ラジオボタンをクリックしたときのスタイルを変更（共通） */
                                .smf-radio-button-control__control:checked {
                                    background-color: var(--wp--preset--color--base);
                                }
                                .smf-radio-button-control__control:before {
                                    background-color: var(--wp--preset--color--primary);
                                    aspect-ratio: 1 / 1;
                                    width: clamp(0.5rem, 0.3786rem + 0.5178vw, 1rem);
                                    height: auto;
                                    top: 25%;
                                    left: 25%;
                                }

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

                                    /* ラジオボタンをクリックしたときのスタイルを変更（スマホのみ） */
                                    .smf-radio-button-control__control:before {
                                        top: 20% !important;
                                        left: 22.5% !important;
                                    }
                                }
                            }
                        }
                    }
                }

                /* テキストエリア */
                .smf-textarea-control__control {
                    background-color: var(--wp--preset--color--gray-01);
                    box-shadow: none;
                    padding: 16px clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
                    --_border-radius: 5px;
                    --_border-color: var(--wp--preset--color--gray-02);
                    border: 1px solid var(--wp--preset--color--gray-02);
                    border-radius: 5px;
                }

                /* ファイルを選択ボタン */
                .smf-placeholder {

                    /* 「ファイルを選択」ボタンのスタイルを変更（共通） */
                    .smf-file-control__label {
                        background-color: var(--wp--preset--color--gray-01);
                        color: var(--wp--preset--color--gray-02);
                        box-shadow: none;
                        padding: 10px clamp(1.5rem, 1.1359rem + 1.5534vw, 3rem);
                        --_border-radius: 5px;
                        --_border-color: var(--wp--preset--color--gray-02);
                        border: 1px solid var(--wp--preset--color--gray-02);
                        border-radius: 5px;
                        background-image: none;
                    }

                    /* 「選択されていません」を非表示（共通） */
                    .smf-file-control__filename.smf-file-control__filename--no-file {
                        display: none;
                    }

                    /* 解除の下線を削除（共通） */
                    .smf-file-control__clear {
                        text-decoration: none;
                    }
                }
            }
        }

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

            /* ラベルカラム（左）と入力項目（右）の間に余白を入れる（PC・タブレット） */
            .smf-form--simple-table .smf-item__col--controls {
                max-width: 72%;
            }
        }
        
        /* 「お名前」の入力項目にはmarginをなくす（共通） */
        .wp-block-snow-monkey-forms-item.smf-item:first-child {
            margin-block-start: 0 !important;
        }
        
        /* 個人情報保護方針に同意して送信する（チェックボックス） */
        .smf-checkboxes-control {
            width: fit-content;

            /* チェックボックスを中央ぞろえにする（共通） */
            .smf-label {

                /* 高さを子要素に合わせる（共通） */
                label {
                    height: auto;
                    display: flex;
                    /* justify-content: center; */
                }

                /* チェックボックスを中央ぞろえにする（共通） */
                .smf-checkbox-control {
                    align-items: center;
                    gap: clamp(0.5rem, 0.3786rem + 0.5178vw, 1rem);
                    .smf-checkbox-control__label {
                        font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
                    }
                    .smf-checkbox-control__control {
                        aspect-ratio: 1 / 1;
                        width: clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
                        height: auto;
                        margin-top: 0;
                        --_border-color: var(--wp--preset--color--gray-02);
                        border: 1px solid var(--wp--preset--color--gray-02);
                        border-radius: 5px;
                    }

                    /* チェックを入れた際のスタイルを変更（共通） */
                    .smf-checkbox-control__control:checked {
                        background-color: var(--wp--preset--color--gray-02);
                    }
                }
            }
        }
        [data-name="checkboxes-privacy"] {
            width: fit-content;

            /* チェックボックスのエラーメッセージ */
            .smf-error-messages {
                font-size: 0;
            }
            .smf-error-messages::before {
                content: "チェックを入れてください。";
                color: #E60033;
                font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
                font-weight: 400;
                font-family: var(--wp--preset--font-family--noto-sans-jp);
            }
        }
        
        /* 必須項目 */
        .required-field {

            /* ラベルカラム（左）のスタイルを指定（共通） */
            .smf-item__col.smf-item__col--label {

                /* 必須のスタイルを指定（共通） */
                .smf-item__description {
                    color: var(--wp--preset--color--brown-01);
                    background-color: var(--wp--preset--color--primary);
                    padding: 2px 8px;
                    border-radius: 5px;
                }
            }
        }

        /* エラー文が出たとき、入力項目を赤線で囲む（共通） */
        .smf-placeholder:has(.smf-error-messages) {
            .smf-text-control {
                .smf-text-control__control {
                    --_border-color: #E60033 !important;
                    border: 1px solid #E60033 !important;
                }
            }
            .smf-radio-button-control__control {
                --_border-color: #E60033 !important;
                border: 1px solid #E60033 !important;
            }
            .smf-textarea-control__control {
                --_border-color: #E60033 !important;
                border: 1px solid #E60033 !important;
            }
            .smf-checkbox-control__control {
                --_border-color: #E60033 !important;
                border: 1px solid #E60033 !important;
            }
        }

        /* 任意項目 */
        .optional-item {

            /* ラベルカラム（左）のスタイルを指定（共通） */
            .smf-item__col.smf-item__col--label {

                /* 任意のスタイルを指定（共通） */
                .smf-item__description {
                    color: var(--wp--preset--color--base);
                    background-color: var(--wp--preset--color--gray-02);
                    padding: 2px 8px;
                    border-radius: 5px;
                }
            }
        }

        /* お問い合わせフォーム内のボタン */
        .smf-action {
            margin-block-start: var(--wp--preset--spacing--60) !important;
            margin: 0;

            .smf-button-control__control {
                background-color: var(--wp--preset--color--base);
                background-image: none;
                color: var(--wp--preset--color--brown-01);
                padding: 10px 48px;
                --_border-radius: 5px;
                --_border-color: var(--wp--preset--color--brown-01);
                border: 1px solid var(--wp--preset--color--brown-01);
                border-radius: 5px;
                font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
            }
            .smf-button-control__control:hover {
                background-color: var(--wp--preset--color--primary);
                color: var(--wp--preset--color--brown-01);
                --_border-color: var(--wp--preset--color--primary);
                border: 1px solid var(--wp--preset--color--primary);
            }

            /* 入力画面へ戻るボタンの横幅を変更（共通） */
            [data-action="back"] {
                width: 24%;
            }

            /* 送信ボタンの横幅を変更（共通） */
            [data-action="complete"] {
                width: 24%;
            }

            /* 入力画面へ戻るボタンと送信ボタンの間に余白を入れる（共通） */
            .smf-button-control:nth-of-type(2) {
                margin-left: 32px;
            }

            /* タブレット */
            @media (max-width:1280px) {

                /* 入力画面へ戻るボタンの横幅を変更（タブレット） */
                [data-action="back"] {
                    width: 32%;
                }

                /* 送信ボタンの横幅を変更（タブレット） */
                [data-action="complete"] {
                    width: 32%;
                }

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

                    /* 送信ボタンのmarginをなくす（スマホ） */
                    .smf-button-control:nth-of-type(2) {
                        margin-left: 0 !important;
                    }

                    /* 入力画面へ戻るボタンの横幅を変更（スマホ） */
                    [data-action="back"] {
                        width: 80%;
                    }

                    /* 送信ボタンの横幅を変更（スマホ） */
                    [data-action="complete"] {
                        width: 80%;
                    }
                }
            }

        }

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

            /* 入力画面へ戻るボタンと送信ボタンを縦並びにする */
            .smf-action {
                display: flex;
                flex-direction: column;
                row-gap: 16px;
            }
        }

        /* エラーメッセージ */
        .smf-error-messages {
            color: #E60033;
            font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
        }

        /* ラジオボタンのエラーメッセージ */
        .wp-block-snow-monkey-forms-item.smf-item:nth-child(4) {
            .smf-error-messages {
                font-size: 0;
            }
            .smf-error-messages::before {
                content: "チェックを入れてください。";
                color: #E60033;
                font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
                font-weight: 400;
                font-family: var(--wp--preset--font-family--noto-sans-jp);
                margin-top: var(--_margin-2);
            }
        }
    }

    /* 「入力画面へ戻る」ボタンがあるとき、「個人情報保護方針に同意して送信する」を非表示にする（共通） */
    form:has([data-action="back"]) {
        [data-name="checkboxes-privacy"] {
            display: none;
        }
    }

    /* お見積もり・お問い合わせを非表示（共通） */
    .gb-element-1577177a.contact-list {
        display: none;
    }
}

/* プライバシーポリシーページ */
.privacy-policy {

    /* 番号のスタイル（共通） */
    .policy-number {
        aspect-ratio: 1 / 1;
        max-width: 64px;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* タブレット */
    @media (max-width: 1280px) {

        /* 番号のスタイル（スマホのみ） */
        .policy-number {
            max-width: 56px;
            max-height: 56px;
        }

        @media (max-width: 1000px) {

            /* 番号のスタイル（タブレットのみ） */
            .policy-number {
                max-width: 48px;
                max-height: 48px;
            }

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

                /* 番号のスタイル（スマホのみ） */
                .policy-number {
                    max-width: 40px;
                    max-height: 40px;
                }

                /* 番号側のカラムの横幅を変更（スマホのみ） */
                .policy-number-column {
                    flex-basis: 15% !important;
                }
            }
        }
    }
}

/* お知らせ（一覧）ページ */
.page-id-690 {

    /* カテゴリーが折り返された際、日付とカテゴリーの間の余白を狭める（共通） */
    .news-date-category {
        row-gap: var(--wp--preset--spacing--30);

        /* 親要素の高さを子要素の高さに合わせる（共通） */
        time {
            display: block;
            line-height: 1;
        }
    }

    /* ページ送り */
    .wp-block-query-pagination {
        justify-content: center;

        /* ページ番号のスタイルを指定（共通） */
        .wp-block-query-pagination-numbers {
            display: flex;
            gap: 8px;
            span {
                padding: 8px;
                background-color: var(--wp--preset--color--brown-01);
                color: var(--wp--preset--color--base);
                border-radius: 5px;
                display: inline-flex;
                aspect-ratio: 1 / 1;
                width: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                height: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem) !important;
                align-items: center;
                justify-content: center;
            }
            a {
                padding: 8px;
                background-color: var(--wp--preset--color--gray-01);
                color: var(--wp--preset--color--brown-02);
                border-radius: 5px;
                display: inline-flex;
                aspect-ratio: 1 / 1;
                width: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                height: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem) !important;
                align-items: center;
                justify-content: center;
            }
            a:hover {
                background-color: var(--wp--preset--color--brown-01);
                color: var(--wp--preset--color--base);
            }
            span.page-numbers.dots {
                padding: 0;
                background-color: transparent;
                color: var(--wp--preset--color--brown-02);
                border-radius: 0;
                aspect-ratio: auto;
                width: auto;
            }
        }

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

            /* ページ番号を両端ぞろえにする（スマホ） */
            .wp-block-query-pagination-numbers:has(> a:nth-of-type(4)) {
                width: 100%;
                justify-content: space-between;
            }
        }

        /* ナビゲーションを非表示（共通） */
        .wp-block-query-pagination-next {
            display: none;
        }
        .wp-block-query-pagination-previous {
            display: none;
        }
    }
}
.wp-singular.page-template.page-template-wp-custom-template-2 {

    /* カテゴリーが折り返された際、日付とカテゴリーの間の余白を狭める（共通） */
    .news-date-category {
        row-gap: var(--wp--preset--spacing--30);

        /* 親要素の高さを子要素の高さに合わせる（共通） */
        time {
            display: block;
            line-height: 1;
        }
    }

    /* ページ送り */
    .wp-block-query-pagination {
        justify-content: center;

        /* ページ番号のスタイルを指定（共通） */
        .wp-block-query-pagination-numbers {
            display: flex;
            gap: 8px;
            span {
                padding: 8px;
                background-color: var(--wp--preset--color--brown-01);
                color: var(--wp--preset--color--base);
                border-radius: 5px;
                display: inline-flex;
                aspect-ratio: 1 / 1;
                width: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                height: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem) !important;
                align-items: center;
                justify-content: center;
            }
            a {
                padding: 8px;
                background-color: var(--wp--preset--color--gray-01);
                color: var(--wp--preset--color--brown-02);
                border-radius: 5px;
                display: inline-flex;
                aspect-ratio: 1 / 1;
                width: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                height: clamp(2.5rem, 2.3786rem + 0.5178vw, 3rem);
                font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem) !important;
                align-items: center;
                justify-content: center;
            }
            a:hover {
                background-color: var(--wp--preset--color--brown-01);
                color: var(--wp--preset--color--base);
            }
            span.page-numbers.dots {
                padding: 0;
                background-color: transparent;
                color: var(--wp--preset--color--brown-02);
                border-radius: 0;
                aspect-ratio: auto;
                width: auto;
            }
        }

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

            /* ページ番号を両端ぞろえにする（スマホ） */
            .wp-block-query-pagination-numbers:has(> a:nth-of-type(4)) {
                width: 100%;
                justify-content: space-between;
            }
        }

        /* ナビゲーションを非表示（共通） */
        .wp-block-query-pagination-next {
            display: none;
        }
        .wp-block-query-pagination-previous {
            display: none;
        }
    }
}

/* 施工サービスページ */
.page-id-828 {

    /* タブのスタイルを変更（共通） */
    .smb-tabs__tabs {
        margin-bottom: var(--wp--preset--spacing--60) !important;

        /* タブの角丸を指定（共通） */
        .smb-tabs__tab-wrapper:nth-child(1) {
            .smb-tabs__tab {
                border-top-left-radius: 5px !important;
            }
        }
        .smb-tabs__tab-wrapper:nth-child(6) {
            .smb-tabs__tab {
                border-top-right-radius: 5px !important;
            }
        }

        /* 各タブの下に下線の高さ分の余白を入れる（共通） */
        .smb-tabs__tab-wrapper {
            margin-bottom: 5px;
        }

        /* 各タブ下の線のスタイル（共通） */
        .smb-tabs__tab-wrapper:after {
            height: 0px !important;
            background-color: inherit !important;
        }

        /* [aria-selected="true"]のタブの下線のスタイル（共通） */
        .smb-tabs__tab:after {
            height: 0px !important;
            background-color: inherit !important;
        }

        /* [aria-selected="true"]のタブのスタイル（共通） */
        [aria-selected="true"] {
            border-bottom-color: var(--wp--preset--color--primary) !important;
            background-color: var(--wp--preset--color--primary) !important;
            border-top-left-radius: 0px !important;
            border-top-right-radius: 0px !important;
            padding: 8px 24px !important;
            color: var(--wp--preset--color--brown-01) !important;
            font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem) !important;
            font-weight: 700 !important;
            line-height: 1.3 !important;
        }

        /* [aria-selected="false"]のタブのスタイル（共通） */
        [aria-selected="false"] {
            border-bottom-color: var(--wp--preset--color--gray-01) !important;
            background-color: var(--wp--preset--color--gray-01) !important;
            border-top-left-radius: 0px !important;
            border-top-right-radius: 0px !important;
            padding: 8px 24px !important;
            color: var(--wp--preset--color--brown-02) !important;
            font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem) !important;
            font-weight: 700 !important;
            line-height: 1.3 !important;
            opacity: 1 !important;
        }
    }
    
    /* タブの下線（端から端まで）のスタイル（共通） */
    .smb-tabs__tabs::after {
        height: 5px !important;
        background-color: var(--wp--preset--color--primary) !important;
    }

    /* 新築のスライダーのスタイルを変更（共通） */
    .wp-block-vk-blocks-slider.swiper.swiper-container.vk_slider {

        /* ナビゲーションのスタイルの変更（共通） */
        .swiper-button-next.swiper-button-center {
            background-color: var(--wp--preset--color--primary);
            color: var(--wp--preset--color--brown-01);
            border-radius: 100px;
            right: 16px !important;
            top: 45%;
        }
        .swiper-button-next.swiper-button-center::after {
            font-size: 8px;
            font-weight: 700;
        }
        .swiper-button-prev.swiper-button-center {
            background-color: var(--wp--preset--color--primary);
            color: var(--wp--preset--color--brown-01);
            border-radius: 100px;
            left: 16px !important;
            top: 45%;
        }
        .swiper-button-prev.swiper-button-center::after {
            font-size: 8px;
            font-weight: 700;
        }

        /* ページネーションのスタイルの変更（共通） */
        .swiper-pagination.swiper-pagination-bullets.swiper-pagination-clickable.swiper-pagination-horizontal {
            .swiper-pagination-bullet.swiper-pagination-bullet-active {
                background: var(--wp--preset--color--primary);
                outline: none;
                width: 16px;
                height: 16px;
                border-radius: 100px;
            }
            .swiper-pagination-bullet {
                background: var(--wp--preset--color--gray-01);
                outline: none;
                width: 16px;
                height: 16px;
                border-radius: 100px;
            }
        }

        /* ページネーションの位置をスライダーの下にずらす（共通） */
        .swiper-wrapper {
            padding-bottom: 48px;

            /* 写真下の余白をなくす（共通） */
            figure.wp-block-image.size-full {
                margin-bottom: 0;
            }
        }

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

            /* ページネーションを非表示にする（タブレット・スマホ） */
            .swiper-pagination.swiper-pagination-bullets.swiper-pagination-clickable.swiper-pagination-horizontal {
                display: none;
            }

            /* ページネーションの位置をずらした分の余白をなくす（タブレット・スマホ） */
            .swiper-wrapper {
                padding-bottom: 0;
            }

            /* ナビゲーションの位置を変更（タブレット・スマホ） */
            .swiper-button-next.swiper-button-center {
                top: 50%;
            }
            .swiper-button-prev.swiper-button-center {
                top: 50%;
            }
        }
    }

    /* 「このようなご家庭におすすめ！」のチェックアイコンのサイズを変更（共通） */
    .service-check-icon {
        .vk_icon_border.has-text-color.has-brown-01-color {
            width: clamp(1.5rem, 1.3786rem + 0.5178vw, 2rem) !important;
            height: clamp(1.5rem, 1.3786rem + 0.5178vw, 2rem) !important;
            svg.svg-inline--fa.fa-square-check.vk_icon_font {
                font-size: clamp(1.5rem, 1.3786rem + 0.5178vw, 2rem) !important;
            }
        }
    }

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

        /* 縦並びの時に上下逆に配置する（タブレット・スマホ） */
        .service-column-reverse {
            flex-direction: column-reverse;
        }

        /* カラムの横幅を親要素に合わせる（タブレット・スマホ） */
        .service-newly-built {
            .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
                width: 100%;
            }
        }

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

            /* タブのスタイルを変更（スマホ） */
            .smb-tabs__tabs {
                
                /* 各タブの下に入れていた下線の高さ分の余白を削除（共通） */
                .smb-tabs__tab-wrapper {
                    margin-bottom: 0px;
                }
                
                /* 各タブ下の線のスタイル（スマホ） */
                .smb-tabs__tab-wrapper:after {
                    height: 5px !important;
                    background-color: var(--wp--preset--color--primary) !important;
                }

                /* タブのpaddingを変更（スマホ） */
                [aria-selected="true"] {
                    padding: 8px 24px 13px 24px !important;
                }
                [aria-selected="false"] {
                    padding: 8px 24px 13px 24px !important;
                }
            }

            /* タブの下線（端から端まで）のスタイル（スマホ） */
            .smb-tabs__tabs::after {
                height: 0px !important;
                background-color: inherit !important;
            }
        }
    }
}