/*
    ペット樹木葬ページ（jyumokusou_pet）用CSS
*/

/* ---
    カラーパレット
    ※色の変更はここだけ直す
-------------------- */
.jyumokusou_pet_contents,
.pet_menu{
    --color-normal-text: #333;
    --color-white: #fff;
    --color-yellow: #ffea00;
    --color-red: #ff0000;
    --color-red2: #de1515;
    --color-gray: #555555;
    --color-gray2: #dbd7cc;

    --color-green: #556c36;
    --color-green-dark: #456418;
    --color-green-bg: #567032;
    --border-green-pale: #9cb579;

    --color-cream: #f9f4e5;
    --color-cream2: #fefcf8;
    --color-cream3: #fffdf6;
    --color-beige: #f4ecda;
    --color-beige-accent: #decfad;
    --color-brown: #6a5d4d;
    --color-brown2: #494332;

    --color-plan-a: #de8415;
    --color-plan-a-dark: #c47412;
    --color-plan-a-inbox: #fff8e8;

    --color-plan-b: #355899;
    --color-plan-b-dark: #2d4a82;
    --color-plan-b-inbox: #eef3fa;

    --color-shadow: rgba(80, 60, 20, 0.08);

    --mountain-arch-height: 240px;
    --mountain-arch-height-sp: 120px;
    --mountain-arch-width: 120%;
    --mountain-arch-width2: 180%;
    --mountain-arch-spacing: 0px;
}

/* ---
    共通スタイル
-------------------- */
.yellow{ color: var(--color-yellow); }
.red{ color: var(--color-red); }

.big{ font-size: 160%; }
.small{ font-size: 80%; }

/* 背景 */
.bg_style01{
    background-color: var(--color-cream);
}
.bg_style02{
    background-color: var(--color-green-bg);
}

/* 上部アーチ型背景 */
.mountain_bg{
    position: relative;
    padding-top: calc(clamp(30px, 3.75vw, 60px) + var(--mountain-arch-height));
    overflow-x: clip;
    overflow-y: visible;

    @media (max-width: 767px) {
        padding-top: calc(clamp(30px, 3.75vw, 60px) + var(--mountain-arch-height2));
    }

    &::before{
        content: "";
        position: absolute;
        top: calc(var(--mountain-arch-height) * -1);
        left: 50%;
        transform: translateX(-50%);
        width: var(--mountain-arch-width);
        height: calc(var(--mountain-arch-height) * 2);
        background-color: var(--color-green-bg);
        border-radius: 50%;
        pointer-events: none;
        @media (max-width: 767px) {
            width: var(--mountain-arch-width2); 
        }
    }

    > .inner{
        position: relative;
        z-index: 1;
        transform: translateY(-180px);
    }
}

/* 見出し */
h2{
    /* 通常 */
    color: var(--color-green);
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 40px;
    &::after{
        content: "・・・";
        position: absolute;
        font-size: 3.6rem;
        line-height: 1;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        color: var(--color-beige-accent);
    }

    /* 白文字・２行想定 */
    &.white{
        color: var(--color-white);
        line-height: 1.2;
        &::after{
            color: var(--color-white);
        }
    }
}

/* フォーム系 */
input[type=text],
input[type=email],
input[type=tel],
textarea{
    width: 100%;
    font-size: 1.6rem;
    padding: 10px;
}

/* ---
    レイアウト
-------------------- */

/* メインビジュアル */
.jyumokusou_pet{
    .jumoku_mv{
        padding: 68px 0 0 0;
        @media (max-width: 767px) {
            padding: 53px 0 0 0;
        }
        img{
            display: block;
            width: 100%;
        }
    }
}

/* グローバルナビゲーション */
.jumoku_menu{
    &.pet_menu{
        background:var(--color-green-bg);
        .inner{
            align-items: center;
            color: var(--color-white);
            .jumoku_menu__list{
                column-gap: 15px;
                .item{
                    border: none;
                    &:last-of-type{
                        a{
                            background: none;
                            font-weight: normal;
                            &::after{
                                content: none;
                            }
                        }
                    }
                }
            }
        }
    }
}


.jyumokusou_pet_contents{
    padding-block: clamp(30px, 3.75vw, 60px);
}

/* mountain_bg 直前セクション：アーチ分の余白を確保（コンテンツ被り防止） */
.jyumokusou_pet_contents:has(+ .mountain_bg){
    padding-bottom: calc(clamp(30px, 3.75vw, 60px) + var(--mountain-arch-height) + var(--mountain-arch-spacing));
}

/* 最初のメッセージ sec_1st_message */
.sec_1st_message{
    .inner{
        background: url(../img/jyumokusou_pet/bg_symbol.png) no-repeat center center;
        background-size: min(23.75vw, 380px) auto;
    }
    p{
        text-align: center;
        margin-bottom: 30px;
        &:last-child{
            margin-bottom: 0;
        }
    }
    .title{
        font-size: 2.4rem;
        color: var(--color-green-dark);
        @media (max-width: 767px) {
            font-size: 2.0rem;
            line-height: 1.4;
        }
    }
}

/* 西善寺のペット墓地が選ばれる5つの理由 sec_5_reasons */
.sec_5_reasons{
    &::after{
        content: "";
        position: absolute;
        right: 35px;
        bottom: 30px;
        width: min(36vw, 420px);
        height: min(32vw, 380px);
        background: url(../img/jyumokusou_pet/nikukyu_bg.png) no-repeat right bottom;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
    }
    .inner{
        .reason_5box{
            --num-size: 140px;
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                counter-reset: reason;
                li{
                    counter-increment: reason;
                    position: relative;
                    overflow: hidden;
                    background-color: var(--color-white);
                    margin-bottom: 30px;
                    border-radius: 12px;
                    /* 01〜05 + 右側が半円のベージュ背景 */
                    &::before{
                        content: counter(reason, decimal-leading-zero);
                        position: absolute;
                        inset: 0 auto 0 0;
                        z-index: 0;
                        width: var(--num-size);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: var(--color-beige);
                        border-radius: 0 100vmax 100vmax 0;
                        color: var(--color-green);
                        font-family: "YakuHanMincho", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
                        font-style: italic;
                        font-size: 4.4rem;
                        font-weight: 600;
                        line-height: 1;
                        pointer-events: none;
                    }
                    .reason_detail_box{
                        position: relative;
                        z-index: 1;
                        padding: 28px 40px 28px calc(var(--num-size) + 24px);
                        h3{
                            color: var(--color-green);
                            margin: 0 0 8px;
                        }
                        p{
                            margin: 0;
                        }
                    }
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .sec_5_reasons{
        &::after{
            width: min(52vw, 240px);
            height: min(46vw, 220px);
        }
    }
    .sec_5_reasons .inner .reason_5box{
        --num-size: 44px;
        ul li{
            display: grid;
            grid-template-columns: var(--num-size) 1fr;
            align-items: start;
            margin-bottom: 12px;
            &::before{
                position: relative;
                inset: unset;
                width: 100%;
                height: var(--num-size);
                align-self: center;
                font-size: 1.7rem;
            }
            .reason_detail_box{
                display: contents;
                padding: 0;
                h3{
                    grid-column: 2;
                    grid-row: 1;
                    margin: 0;
                    padding: 8px 14px 4px 10px;
                    font-size: 1.5rem;
                    line-height: 1.4;
                    align-self: center;
                }
                p{
                    grid-column: 1 / -1;
                    grid-row: 2;
                    padding: 0 14px 12px;
                    font-size: 1.35rem;
                    line-height: 1.7;
                    @media (max-width: 767px) {
                        padding: 12px;
                    }
                    br{
                        display: none;
                    }
                }
            }
        }
    }
}

/* ふたつのプラン・費用比較 sec_two_plan */
.sec_two_plan{
    .comparison_box{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto repeat(4, auto);
        column-gap: clamp(16px, 2.5vw, 40px);
        margin-bottom: 20px;
        .plan01,
        .plan02{
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 6;
            min-width: 0;
            h3{
                margin: 0;
                padding: 0.7em 0.5em;
                color: var(--color-white);
                text-align: center;
                font-size: 2rem;
                line-height: 1.4;
            }
            .plan_img img{
                width: 100%;
                height: auto;
                display: block;
            }
            dl{
                display: grid;
                grid-template-columns: 7.2em 1fr;
                grid-template-rows: subgrid;
                grid-row: span 4;
                row-gap: 2px;
                margin: 0;
                dt{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0.8em 0.4em;
                    background-color: var(--color-brown);
                    color: var(--color-white);
                    text-align: center;
                    font-size: 1.4rem;
                    line-height: 1.4;
                }
                dd{
                    margin: 0;
                    padding: 0.8em 1em;
                    background-color: var(--color-beige);
                    .red{
                        font-weight: 700;
                    }
                }
            }
        }
        .plan01 h3{
            background-color: var(--color-plan-a);
        }
        .plan02 h3{
            background-color: var(--color-plan-b);
        }
    }
    > .inner > .small{
        margin-top: 0.4em;
    }
}
@media screen and (max-width: 767px) {
    .sec_two_plan .comparison_box{
        display: flex;
        flex-direction: column;
        gap: 24px;
        .plan01,
        .plan02{
            display: block;
            h3{
                font-size: 1.8rem;
            }
            dl{
                grid-template-columns: 6em 1fr;
                grid-template-rows: none;
                grid-row: auto;
            }
        }
    }
}

/* プランの詳細案内 sec_plan_detail_info */
.sec_plan_detail_info{
    .plan_detail_information{
        display: flex;
        flex-direction: column;
        gap: clamp(28px, 3.5vw, 48px);
    }
    .plan_detail_box{
        --plan-color: var(--color-plan-a);
        --plan-color-dark: var(--color-plan-a-dark);
        --plan-inbox-bg: var(--color-plan-a-inbox);
        margin: 0;
        background-color: var(--color-white);
        border-radius: 16px;
        box-shadow: 0 6px 20px var(--color-shadow);
        overflow: hidden;
        dt{
            margin: 0;
            padding: 0;
            background-color: var(--plan-color);
            h3{
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 0.6em 1em;
                margin: 0;
                padding: 14px clamp(16px, 2.5vw, 32px);
                color: var(--color-white);
                font-size: clamp(1.8rem, 1.6vw, 2.2rem);
                font-weight: 600;
                line-height: 1.4;
                span{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0.25em 1.15em;
                    background-color: var(--color-white);
                    border-radius: 100vmax;
                    color: var(--plan-color);
                    font-size: 0.85em;
                    font-weight: 700;
                    line-height: 1.4;
                    white-space: nowrap;
                }
            }
        }
        dd{
            margin: 0;
            padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(28px, 3.2vw, 44px);
            > p{
                margin: 0 0 1.6em;
                line-height: 1.85;
                &:last-child{
                    margin-bottom: 0;
                }
            }
            h4{
                display: flex;
                align-items: center;
                gap: 0.45em;
                margin: 0 0 0.7em;
                color: var(--color-normal-text);
                font-size: clamp(1.7rem, 1.4vw, 1.9rem);
                font-weight: 700;
                line-height: 1.5;
                &::before{
                    content: "\f1b0";
                    flex-shrink: 0;
                    font-family: "Font Awesome 6 free";
                    font-weight: 900;
                    font-size: 0.95em;
                    color: var(--plan-color);
                    line-height: 1;
                }
            }
        }
        &.plan_b{
            --plan-color: var(--color-plan-b);
            --plan-color-dark: var(--color-plan-b-dark);
            --plan-inbox-bg: var(--color-plan-b-inbox);
        }
    }
    .plan_detail_innerbox{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(12px, 1.6vw, 20px);
        margin-bottom: 2em;
        .inbox{
            background-color: var(--color-cream3);
            border-radius: 10px;
            padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 22px);
            h5{
                margin: 0 0 0.6em;
                padding-bottom: 0.6em;
                color: var(--color-normal-text);
                font-size: clamp(1.5rem, 1.2vw, 1.7rem);
                font-weight: 700;
                line-height: 1.5;
                border-bottom: 1px solid var(--color-gray2);
                span{
                    font-weight: inherit;
                    color: var(--plan-color);
                }
            }
            p{
                margin: 0;
                line-height: 1.8;
            }
        }
    }
    .sculpture_about{
        list-style: none;
        margin: 1.2em 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: auto max-content auto;
        gap: 0.85em 1em;
        width: fit-content;
        max-width: 100%;
        li{
            display: contents;
            .num{
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 2.2em;
                height: 2.2em;
                border-radius: 50%;
                background-color: var(--plan-color);
                color: var(--color-white);
                font-size: 1.3rem;
                font-weight: 700;
                line-height: 1;
                letter-spacing: 0.02em;
            }
            .txt{
                line-height: 1.5;
            }
            .price{
                color: var(--color-red);
                font-weight: 700;
                white-space: nowrap;
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .sec_plan_detail_info{
        .plan_detail_box{
            border-radius: 12px;
            dt h3{
                padding: 12px 16px;
                gap: 0.5em;
            }
        }
        .plan_detail_innerbox{
            grid-template-columns: 1fr;
        }
        .sculpture_about{
            display: flex;
            flex-direction: column;
            gap: 0.85em;
            width: 100%;
            li{
                display: grid;
                grid-template-columns: auto 1fr;
                gap: 0.7em 1em;
                .price{
                    grid-column: 2;
                }
            }
        }
    }
}

/* 門徒の方・一般の方の区分について sec_kubun */
.sec_kubun{
    .type_info_box{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(16px, 2.5vw, 40px);
        align-items: stretch;
        .box{
            font-size: 1.6rem;
            background-color: var(--color-white);
            border: 1px solid var(--color-beige);
            border-radius: 12px;
            box-shadow: 0 6px 20px var(--color-shadow);
            padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 36px);
            &.box01{
                border: 1px solid var(--border-green-pale);
            }
            &.box02{
                border:1px solid var(--color-beige-accent);
                background: var(--color-cream2);
            }
            h3{
                width: fit-content;
                margin: 0 auto 1.2em;
                padding: 0.2em 1.5em;
                border-radius: 3px;
                color: var(--color-white);
                font-size: clamp(1.6rem, 1.4vw, 1.8rem);
                font-weight: 700;
                text-align: center;
                line-height: 1.4;
            }
            p{
                margin: 0 0 1em;
                line-height: 1.85;
                &:last-child{
                    margin-bottom: 0;
                }
            }
            .red{
                font-weight: 700;
            }
            &.box01 h3{
                background-color: var(--color-green);
            }
            &.box02 h3{
                background-color: var(--color-brown);
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .sec_kubun .type_info_box{
        grid-template-columns: 1fr;
        gap: 20px;
        .box{
            padding: 20px 16px;
            h3{
                font-size: 1.6rem;
            }
        }
    }
}

/* お問い合わせ・資料請求 */
.sec_contact_form{
    .contact_form_pet{
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
        background: #fff;
        border-radius: 10px;
        padding: clamp(20px, 3.125vw, 50px);
        form{
            dl{
                dt{
                    display: flex;
                    flex-wrap:wrap;
                    justify-content: flex-start;
                    align-items: center;
                    column-gap: 20px;
                    margin-bottom: 15px;
                    font-size: 1.8rem;
                    font-weight: bold;
                    span{
                        font-size: 1.5rem;
                        line-height: 1;
                        padding: 5px 12px;
                        color: var(--color-white);
                        border-radius: 5px;
                        &.required{
                            background-color: var(--color-red2);
                        }
                        &.no-required{
                            background-color: var(--color-gray);
                        }
                    }

                }
                dd{
                    margin-bottom: 30px;
                }
            }

            /* ポリシー同意チェック */
            .policy{
                text-align: center;
                margin-bottom: 30px;
                .wpcf7-list-item-label{
                    a{
                        text-decoration: underline;
                        color: var(--color-green);
                    }
                }
            }
            /* この内容で送信するボタン */
            .submit_btn{
                span{
                    display: block;
                    max-width: 390px;
                    width: 100%;
                    margin: 0 auto;
                    position: relative;
                    &::after{
                        display: block;
                        content: "";
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        top: 50%;
                        right: 10%;
                        border-top: 2px solid var(--color-white);
                        border-right: 2px solid var(--color-white);
                        transform: rotate(45deg) translateY(-50%);
                    }
                    input[type="submit"]{
                        max-width: 390px;
                        font-weight: bold;
                        box-shadow: none;
                        background-color: var(--color-brown2);
                        border-radius: 10px;
                        border: 1px solid var(--color-white);

                        &:hover{
                            color: var(--color-brown2);
                            background-color: var(--color-white);
                            border: 1px solid var(--color-brown2);
                            &::after{
                                border-top: 2px solid var(--color-brown2);
                                border-right: 2px solid var(--color-brown2);
                            }
                        }
                    }
                    .wpcf7-spinner{
                        display: none;
                    }
                }

            }
        }
    }
}