/* 変数 */
:root {
    --color-primary: #55295c;
    --color-primary-dark: #412446;
    --color-primary-light: #6f3a77;
    --color-secondary: #E6E1F0;
    --color-sub: #A89EB4;
    --color-accent: #b10e69;
    --color-red: #e82019;
    --color-gold: #e1c66b;
    --color-background: #fafafa;
    --color-surface: #fff;
    --color-text: #333;
    --color-text-light: #555;
    --color-border: #eee;
}

/* ベース設定 */
* {
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
body {
    font-family: 'Noto Sans JP', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    background: var(--color-secondary);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    line-height: 1.8;
}

h1,h2,h3,h4 {
    font-family: "Noto Serif JP", serif;
}

a[href^="tel"] {
    pointer-events: none;
    cursor: default;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

.material-symbols-rounded {
    font-size: 1.75em;
    vertical-align: bottom;
}

header, footer {
    background: var(--color-surface);
    padding: 32px 0;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.03);
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.redtxt {
    color: var(--color-red);
}

/* ヘッダー領域 */
header {
    display: grid;
    grid-template-columns: 1fr repeat(3,auto);
    padding: 32px 0 16px;

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
        
    .logoShiunden {
        padding-left: 40px;
        -ms-flex-item-align: center;
            align-self: center;
        & img {
            width: 200px;
        }
    }

    .headerlead {
        -ms-flex-item-align: center;
            align-self: center;
        text-align: center;
        padding-right: 24px;
        .message {
            display: block;
            font-size: 1.25rem;
            font-weight: bold;
        }
        .businesshour {
            display: block;
            font-size: 1rem;
            border-top: 3px solid var(--color-gold);
            margin-top: 0.25em;
            padding-top: 0.25em;
        }
    }
    
    .tel,.form {
        line-height: 1.0;
        .innerwrap {
            height: 100%;
            padding: 16px 24px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

        & h5 {
            margin: 0 0 0.5em;
            font-weight: normal;
            font-size: 0.9375rem;
            text-align: center;
        }

        .icon {
            width: 1.3em;
            vertical-align: text-bottom;
        }

    }
    .tel {
        background-color: var(--color-accent);

        & h5 {
            color: var(--color-accent);
            background-color: var(--color-surface);
            padding: 5px 0.75em;
            border-radius: 3px;
        }
        
        .phoneMumber a {
            display: block;
            text-align: center;
            font-size: 1.25rem;
            font-weight: bold;
            color: var(--color-surface);
            text-decoration: none;
        }
    }
    .form {
        background-color: var(--color-primary);

        & h5 {
            color: var(--color-surface);
        }
        
        .btnRequest{
            & a {
                font-size: 1.0625rem;
                font-weight: bold;
                display: block;
                padding: 5px 0.5em;
                color: var(--color-surface);
                text-decoration: none;
                text-align: center;
            }
        }
    }
}

/* メイン領域 */
main {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 900px) 1fr;
    gap: 0;
}

main > section {
    grid-column: 2;
    background: var(--color-surface);
    margin: 40px 0;
    /* padding: 40px 32px; */
    border-radius: 16px;
    -webkit-box-shadow: 0 2px 16px rgba(0,0,0,0.04);
            box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    
    .sectionTitle {
        font-size: 2rem;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 24px;
        border-radius: 16px 16px 0 0;
        padding: 1em 0;
        border-bottom: 3px solid var(--color-gold);
        text-align: center;
        letter-spacing: 0.05em;
        line-height: 2.0;
        background-color: var(--color-primary);
        color: var(--color-surface);

        & strong {
            color: #fffc3b;
        }
        & b {
            font-size: 1.3em;
        }
    }
    
    .sectionBody {
        padding: 40px 32px;
    }

    .btnCTA {
        text-align: right;
        margin-top: 2rem;
        & a {
            font-size: 1.375rem;
            font-weight: bold;
            background-color: var(--color-primary);
            color: var(--color-surface);
            display: inline-block;
            border-radius: 6px;
            padding: 0.5em 3em;
            text-decoration: none;

            .material-symbols-rounded {
                font-size: 1.5em;
                -webkit-transition: right 0.2s;
                transition: right 0.2s;
                position: relative;
                right: 0;
            }
        }
        & a:hover {
            .material-symbols-rounded {
                right: -0.25em;
            }
        }
    }
}

/* 固定ページコンテンツ領域 */
main > #page-contents {
    grid-column: 2;
    background: var(--color-surface);
    margin: 40px 0;
    /* padding: 40px 32px; */
    border-radius: 16px;
    -webkit-box-shadow: 0 2px 16px rgba(0,0,0,0.04);
            box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

/* ファーストビュー・メインビジュアル */
#mainVisual {
    grid-column: 1 / 4;
    text-align: center;
    
    .bigBanner {
        /* background-color: var(--color-secondary); */
        background: url('images/bg_377310294.webp') no-repeat center center;
        background-size: cover;
        padding: 3rem 0;
        margin: 0;
        & img {
            width: 80vw;
        }
    }
    .ctaBanner {
        padding: 3rem 0;
        & img {
            width: 640px;
        }
    }
}


/* キャッチ */
.catch {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 36px;
    text-align: center;
}

/* 中間CTA */
section.wrapCTA {
    padding: 0;
    background: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}

/*フォーム用CTA*/
.ctaForm {
    background: url("images/bg_289240927.webp") center center no-repeat;
    background-size: cover;
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid var(--color-sub);
    border-radius: 12px;

    .ctaTitle {
        font-size: 1.8rem;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 24px;
        text-align: center;
    }
    .ctaTitle::after {
        display: block;
        content: "";
        border-bottom: 3px solid var(--color-gold);
        margin: 15px auto;
        width: 50%;
    }
    .catch {
        color: var(--color-text);
    }

    .pointList {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 0 16px;

        & li {
            background-color: var(--color-background);
            border-radius: 6px;
            padding: 1em 1.5em;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }
        .btn {
            padding: 0;
            /* background-color: var(--color-primary); */
            background: transparent;

            & a {
                font-size: 1.25rem;
                font-weight: bold;
                background-color: var(--color-primary);
                border-radius: 6px;
                color: var(--color-background);
                text-decoration: none;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: nowrap;
                    flex-wrap: nowrap;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -ms-flex-pack: distribute;
                    justify-content: space-around;
                width: 100%;
                height: 100%;
                padding: 0em 1.25em;

                .txt {
                    -webkit-box-flex: 1;
                        -ms-flex: 1 0 1fr;
                            flex: 1 0 1fr;
                    display: inline-block;
                }
                .material-symbols-rounded {
                    width: 1em;
                    -webkit-box-flex: 0;
                        -ms-flex: 0 0 1em;
                            flex: 0 0 1em;

                    -webkit-transition: right 0.2s;
                    transition: right 0.2s;
                    position: relative;
                    right: 0;            
                }
            }
            & a:hover {
                .material-symbols-rounded {
                    right: -0.25em;
                }
            }
        }
    }
}

/* 電話用CTA */
.ctaTel {
    background: url("images/bg_377530786.webp") center center no-repeat;
    background-size: cover;
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;

    .attention {
        font-size: 1.3em;
        font-weight: bold;
    }
    .tel{
        & a {
            font-size: 3rem;
            line-height: 1.0;
            color: var(--color-accent);
            text-decoration: none;
            font-weight: bold;

            .material-symbols-rounded {
                font-size: 1.4em;
                vertical-align: middle;
            }
        }
    }
    .businesshour {
        color: var(--color-primary-dark);
    }
    .businesshour::before,
    .businesshour::after {
        content:"";
        display: inline-block;
        width: 2em;
        height: 1px;
        margin: 0 0.5em;
        border-top: 5px dotted var(--color-primary-dark);
        vertical-align: middle;
    }
}

.wrapPlans, .planList, .faqList, .wrapMerits {
    margin: 0 auto 24px auto;
    max-width: 700px;
}

/* プラン */
#plan {
    .planList {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        list-style: none;
        padding: 0;
        margin-bottom: 0;
    }
    .planList li {
        background: var(--color-background);
        border-radius: 12px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: bold;
        -webkit-box-shadow: 0 1px 6px rgba(108,99,255,0.07);
                box-shadow: 0 1px 6px rgba(108,99,255,0.07);
    }
    .shoulder {
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem;
    }
    .notice {
        font-size: 0.75rem;
        text-align: right;
    }
}

/* 斎場の特徴 */
#feature {
    .wrapImgList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        
        .wrap_featureList {
            -webkit-box-flex:0;
                -ms-flex:0 0 50%;
                    flex:0 0 50%;
        }
        .featureList {
            font-size: 1rem;
            list-style: none;
            padding-left: 0;
            margin: 0 0 1em;
        }
        .featureList li {
            margin-bottom: 0.25em;
            text-indent: -1.2em;
            padding-left: 1.2em;
        }
        .featureList li::before {
            content: "";
            display: inline-block;
            width: 0.7em;
            height: 0.7em;
            margin-right: 0.5em;
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
            background-color: var(--color-sub);
        }
        .featureList li:nth-of-type(odd)::before {
            background-color: var(--color-primary-light);
        }

        .image{
            margin: 0;
            -webkit-box-flex:0;
                -ms-flex:0 0 43%;
                    flex:0 0 43%;
            img {
                max-width: 100%;
                border-radius: 12px;
            }
        } 
    }
    .notice {
        font-size: 0.75rem;
        text-align: right;
    }
    .deg360image {
        margin-top: 32px;
        #master-container {
            margin-left: auto;
            margin-right: auto;
        }
    }
}

/* 3つの特徴 */
#threeMerit {
    .sectionNav ol {
        display: grid;
        grid-template-columns: repeat(3, 31%);
        grid-template-rows: 1fr;
        gap: 3.5%;
        list-style: none;
        padding: 0 32px;
        margin-bottom: 24px;

        & li a {
            font-size: 1.0rem;
            text-align: center;
            background: var(--color-background);
            border: 2px solid var(--color-primary-light);
            color: var(--color-primary);
            text-decoration: none;
            position: relative;
            display: block;
            height: 100%;
            .num {
                font-size: 0.875em;
                display: block;
                background-color: var(--color-primary);
                color: var(--color-surface);
                position: absolute;
                left: 1em;
                top: -1em;
                padding: 2px 1em;
            }
            .txt {
                font-size: 1.125em;
                font-weight: bold;
                line-height: 1.35;
                padding: 1.5em 0 1em;
                position: relative;
                width: 100%;
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
            }
        }
        & li a:hover {
            background: var(--color-primary-light);
            color: var(--color-background);
        }
    }

    .wrapMerits {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;

        .ourmerit {
            padding: 24px 0;
            .catch {
                text-align: left;
            }
        }
        .ourmerit .title {
            font-size: 1.625rem;
            font-weight: bold;
            margin-bottom: 1.5em;
            text-align: center;

            & strong {
                color: var(--color-primary-dark);
                font-weight: 700;
                padding: 0 5px;
                border-bottom: 3px solid var(--color-gold);

                .num {
                    display: inline-block;
                    font-size: 2em;
                    margin-right: 0.5em;
                    vertical-align: text-bottom;
                    line-height: 1.0;
                }
                & b {
                    font-size: 2em;
                    vertical-align: text-bottom;
                    line-height: 1.0;
                }
                & em {
                    font-size: 1.5em;
                    vertical-align: text-bottom;
                    line-height: 1.0;
                    font-style: normal;
                }
            }
        }
        
        .m1 .body {
            .logo {
                padding: 32px 15%;
            }
        }

        .m2 {
            .relieveList {
                list-style: none;
                padding-left: 0;

                & li {
                    margin-bottom: 2em;
                    .head {
                        font-size: 1.125rem;
                        font-weight: bold;
                        margin: 0 0 1em;
                    }
                    .txtImage {
                        font-size: 0.975rem;
                        display: grid;
                        grid-template-columns: 55% 40%;
                        grid-template-rows: auto;
                        gap: 5%;
                        .img {
                            grid-column: 2/3;
                            grid-row: 1/2;
                        }
                        .txt {
                            grid-column: 1/2;
                            grid-row: 1/2;
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
}

/* お客様の声 */
#voice {
    .voiceSwiper {
        padding-bottom: 40px;
    }
    .voiceSwiper .swiper-slide {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background: url("images/bg_548658421.webp") left -15px bottom -15px no-repeat var(--color-secondary);
        background-size: 50%;
        border-radius: 12px;
        padding: 24px;
        -webkit-box-shadow: 0 1px 6px rgba(108,99,255,0.07);
                box-shadow: 0 1px 6px rgba(108,99,255,0.07);
        height: auto;
        max-width: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        opacity: 0.8; 
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        -webkit-transition: .2s; 
        -webkit-transition: 0.2s; 
        transition: 0.2s;
    }
    .voiceSwiper .swiper-slide-active {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    .voiceSwiper .title {
        font-weight: bold;
        margin-bottom: 8px;
        margin-top: 0;
        font-size: 1.125rem;
    }
    .voiceSwiper .body {
        font-size: 0.95rem;
        margin-bottom: 8px;
        color: var(--color-text-light);
    }
    .voiceSwiper .name {
        font-size: 0.95rem;
        color: var(--color-text-light);
        text-align: right;
    }
}


/* よくある質問 */
#faq {
    .faqList {
        display: grid;
        gap: 16px;
        list-style: none;
        padding: 0;
    }
    .faqList li {
        background: var(--color-background);
        border-radius: 10px;
        padding: 18px 24px;
        -webkit-box-shadow: 0 1px 6px rgba(108,99,255,0.04);
                box-shadow: 0 1px 6px rgba(108,99,255,0.04);
        .q,.a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            .mark {
                font-size: 2rem;
                font-weight: bold;
                font-family: "Noto Serif JP", serif;
                line-height: 1.0;
                padding-right: 0.25em;
            }
            & p {
                font-size: 1rem;
                margin-bottom: 0;
                margin-top: 0;
                padding-top: 0.5em;
            }
        }
        .q {
            font-weight: bold;
            color: var(--color-primary);
            margin-bottom: 12px;
            & p {
                font-size: 1.125rem;
            }
        }
        .a {
            color: var(--color-text);
        }
    }
}

/* フッター */
footer {
    margin-top: 40px;
    font-size: 1rem;
    color: var(--color-text-light);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
    text-align: center;

    .copylight {
        margin: 0;
        font-size: 0.8125rem;
    }
}

/* レスポンシブ対応：タブレット */
@media (max-width: 900px) {
    /* ヘッダー領域 */
    header {
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        padding: 0;

        .logoShiunden {
            padding: 20px;
            grid-column: 1 / 4;
            text-align: center;
        }
        .headerlead {
            padding-left: 12px;
            padding-right: 12px;
        }
        .headerlead .message,
        .headerlead .businesshour,
        .tel .phoneMumber a,
        .form {
            font-size: 1rem;
        }
        .tel, .form {
            .innerwrap {
                padding: 8px;
            }
            & h5 {
                text-align: center;
            }
        }
    }
    /* メイン領域 */
    main {
        grid-template-columns: 8vw 84vw 8vw;
    }
    main > section {
        /* padding: 32px 8vw; */
        .sectionBody {
            padding: 32px 6vw;
        }
    }
    main #mainVisual {
        .ctaBanner {
            & img {
                max-width: 70vw;
            }
        }
    }

    /* 中間CTA */
    #middleCTA {
        .pointList {
            grid-template-columns: 1fr;
            .btn {
                padding-top: 1em;
                padding-bottom: 1em;
                & a {
                    padding-top: 0.5em;
                    padding-bottom: 0.5em;
                    -webkit-box-pack: start;
                        -ms-flex-pack: start;
                            justify-content: start;
                    .txt {
                        & br {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    /* 斎場の特徴 */
    #feature {
        .wrapImgList {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 16px;

            .wrap_featureList {
                -ms-flex-item-align: start;
                    align-self: flex-start;
                padding-left: 3vw;
                padding-right: 3vw;
            }
            .featureList {
                font-size: 0.9375rem;
            }
        }
    }
    
    /* 3つの特徴 */
    #threeMerit {
        .sectionNav ol {
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 0;
        }
        .wrapMerits {
            .ourmerit .title {
                font-size: 1.25rem;
            }
            .m1 .body {
                .logo {
                    padding: 0 5vw;
                    margin-bottom: 2em;
                }
            }
        }
    }

    /* キャッチ */
    .catch {
        text-align: left;
    }
}

/* レスポンシブ対応：モバイル */
@media (max-width: 600px) {
    a[href^="tel"] {
        pointer-events:all;
        cursor:pointer;
    }

    /* ヘッダー領域 */
    header {
        grid-template-columns: 50% 50%;
        grid-template-rows: auto 1fr;
        -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
                box-shadow: 0 0 3px rgba(0,0,0,0.2);
        border-bottom: 1px solid var(--color-sub);
        
        .logoShiunden {
            padding: 10px;
            grid-column: 1 / 2;
            grid-row: 1/2;
            
            & img {
                max-width: 100%;
            }
        }
        .headerlead {
            grid-column: 2 / 3;
            grid-row: 1/2;
            padding-left: 6px;
            padding-right: 6px;
            
            .message,
            .businesshour {
                font-size: 0.8125rem;
            }
            .businesshour {
                padding-top: 0;
                border-width: 1px;
            }
        }

        & .tel, & .form {
            & .innerwrap {
                padding: 4px;
            }
            & h5 {
                border-radius: 3px;
                font-size: 0.75rem;
                padding: 3px 0.5em;
            }
        }

        .tel {
            grid-column: 1 / 2;
            grid-row: 2/3;

            text-align: center;
            .phoneMumber a {
                font-size: 1rem;
            }
        }

        .form {
            grid-column: 2 / 3;
            grid-row: 2/3;
            border: none;
            padding: 4px;

            .btnRequest {
                & a {
                    font-size: 0.8125rem;
                    padding: 3px 0.5em;
                }
            }
        }        
    }
    
    /* メイン領域 */
    main {
        grid-template-columns: 4vw 92vw 4vw;
    }
    main > section {
        /* padding: 24px 4vw; */
        margin: 24px 0;
        
        .sectionTitle {
            font-size: 1.6rem;
            padding-left: 0.5em;
            padding-right: 0.5em;
        }
        .sectionBody {
            padding: 24px 4vw;
        }
        
        .btnCTA {
            text-align: center;
            & a {
                padding-left: 1em;
                padding-right: 1em;
                font-size: 1rem;
            }
        }
    }
    /* 固定ページコンテンツ領域 */
    main > #page-contents {
        /* padding: 24px 4vw; */
        margin: 24px 0;
    }

    /* ファーストビュー・メインビジュアル */
    main > #mainVisual {
        .bigBanner {
            padding: 0;
            & img {
                width: 100%;
            }
        }
        .ctaBanner {
            padding-top: 2rem;
            padding-bottom: 1rem;
            & img {
                max-width: 84vw;
            }
        }
    }
    
    /* フォーム用CTA */
    .ctaForm {
        padding-left: 16px;
        padding-right: 16px;
        .pointList {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3,1fr);
            padding-left: 0;
            padding-right: 0;
        }
        .ctaTitle {
            font-size: 1.5rem;
        }
    }
    .ctaTel {
        .attention {
            font-size: 1.2em;
        }
        .tel {
            & a {
                font-size: 2rem;
            }
        }
    }

    /* プラン */
    #plan {
        .planList {
            grid-template-columns: 1fr;

            & li {
                padding: 0 1rem;
            }
        }
    }
    
    /* 3つの特徴 */
    #threeMerit {
        .sectionNav ol {
            grid-template-columns: auto;
            grid-template-rows: repeat(3, auto);
            padding: 0;
            gap: 32px;
        }
        .wrapMerits {
            .ourmerit .title {
                text-align: left;
                line-height: 2.0;
            }
            .m2 {
                .ctaCall {
                    .attention {
                        strong {
                            font-size: 1.1em;
                        }
                    }
                    .tel {
                        & a {
                            font-size: 1.5rem;
                        }
                    }
                }
                .relieveList {
                    & li {
                        .txtImage {
                            display: block;
                            .txt {
                                margin: 0.5em 0;
                            }
                        }
                    }
                }
            }
        }
    }

    /* お客様の声 */
    #voice {
        .voiceSwiper .swiper-slide {
            max-width: none;
            background-size: 75%;
        }
        .swiper-button-next {
            right: 0;
        }
        .swiper-button-prev {
            left: 0;
        }
        .swiper-button-next::after,
        .swiper-button-prev::after {
            font-size: 30px;
        }
    }
}

/*
* お問い合わせフォーム
*/
.catchForm {
    .title {
        font-size: 1.625rem;
        font-weight: bold;
        margin-bottom: 1.5em;
        text-align: center;

        & strong {
            color: var(--color-primary-dark);
            font-weight: 700;
            padding: 0 5px;
            border-bottom: 3px solid var(--color-gold);
        }
    }
    & ul {
        margin: 0;
        list-style: none;
        
        & li {
            text-indent: -1.2em;
        }
        & li::before {
            content: "";
            display: inline-block;
            width: 0.7em;
            height: 0.7em;
            margin-right: 0.5em;
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
            background-color: var(--color-accent);
        }
    }
}
.wrapForm {
    font-size: 15px;
    .wpcf7 {
        width: auto;
        max-width: none;
    }
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        max-width: 100%;
        background-color: #eff1f5;
        border: none;
        padding: 1em;
    }
    .btnSubmit {
        position: relative;
        text-align: center;
        
        & input[type="submit"] {
            border: none;
            background-color: var(--color-primary);
            color: var(--color-surface);
            padding: 1em 3em;
            font-weight: bold;
            font-size: 17px;
        }
        .wpcf7-spinner {
            position: absolute;
            left: 0;
            margin: 12px;
        }
    }
    .inquiry {
        width: 100%;
        border-collapse: collapse;
        & th,td {
            border: 1px solid var(--color-sub);
            padding: 0.5em 1em;
            & p {
                margin: 0;
            }
        }
        & th {
            background-color: var(--color-border);
            white-space: nowrap;
            text-align: left;
            .haveto,.any {
                display: inline-block;
                color: var(--color-surface);
                font-size: 12px;
                font-weight: normal;
                padding: 0 0.5em;
                margin-right: 5px;
                border-radius: 2px;
            }
            .haveto {                
                background-color: var(--color-primary);                
            }
            .any {
                background-color: #777;
            }
        }
    }
}
@media (max-width: 600px) {
    .catchForm {
        .title {
            font-size: 1.25rem;
            line-height: 2.0;
        }
    }
    .wrapForm {
        .btnSubmit {
            & input[type="submit"] {
                padding-left: 1.5em;
                padding-right: 1.5em;
            }
        }
        .inquiry {
            & th,td {
                display: block;
                border-bottom-width: 0;
            }
            & tr:last-of-type {
                & td {
                    border-bottom-width: 1px;
                }
            }
        }
    }
}