/* ===
    上書き
============================================ */
.home{
    .column_plan_list{
        background-color: #FcF7F1;
        &::before{
            background-color: #ffffff;
        }
    }
}

.plan_bana_footer{
    a{
        display: block;
        margin-bottom: 30px;
    }
}

/* ===
    トップページ 追加
============================================ */

.hurry2_box{
    width: 100%;
    .hurry2_box_inner{
        max-width: 800px;
        width: 100%;
        margin: 30px auto;
        @media (max-width:767px){
            max-width: 100%;
            padding: 0 15px;
            margin: 30px auto 0 auto;
        }
    }

    /* ご相談・ご案内いますぐ対応可能です */
    .handle_it_now{
        margin: 0 auto 30px auto;
        .time_fukidashi{
            font-weight: 700;
            font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
            font-size: 2.4rem;
            text-align: center;
            @media (max-width:767px){
                line-height: 1.6;
                position: relative;
            }
            span:not(.time){
                color: #f2465b;
            }
            &::before,
            &::after{
                display: inline-block;
                content: "";
                width: 21px;
                height: 21px;
                @media (max-width:767px){
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    bottom: 0;
                    background-size: cover;
                }
            }
            &::before{
                background-image: url(../img/top/fukidashi_left.png);
                @media (max-width:767px){
                    background-image: url(../img/top/fukidashi_left_sp.png);
                    left: 0;
                }
            }
            &::after{
                background-image: url(../img/top/fukidashi_right.png);
                @media (max-width:767px){
                    background-image: url(../img/top/fukidashi_right_sp.png);
                    right: 0;
                }
            }
        }

        /* SPのみ表示 */
        .sp_tel_bnr{
            margin: 30px auto;
        }

        .hin_inbox{
            width: 100%;
            display: grid;
            grid-template-columns:13.125% 56.875% 30%;
            align-items: center;

            .box2{
                .box2_inner{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-right: 1px solid #dcdcdc;
                    .number{
                        text-align: center;
                        font-family: "Oswald", sans-serif;
                        font-optical-sizing: auto;
                        font-weight: 600;
                        font-size: 6.0rem;
                        color: #d30d09;
                        line-height: 1.2;
                        letter-spacing: 0.05em;
                        display: flex;
                        align-items: center;
                        column-gap: 10px;
                        &::before{
                            display: block;
                            content: "";
                            width: 50px;
                            height: 50px;
                            background-image: url(../img/top/icon_phone.png);
                        }
                    }
                    .subtext{
                        text-align: center;
                        span{
                            display: inline-block;
                            background-color: #eeeeee;
                            font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
                            font-size: 1.5rem;
                            padding: 0 2em;
                        }
                    }
                }
            }

            .box3{
                padding: 0 0 0 10px;
                .box3_inner{
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    img{
                        width: 100px;
                    }
                    p{
                        flex: 1;
                        font-size: 1.5rem;
                        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
                        line-height: 1.2;
                        text-wrap:balance;
                        word-break:auto-phrase;
                    }
                }
            }
        }

        .under_btn{
            width: 100%;
            text-align: center;
            a{
                display: inline-block;
                border: 3px solid #f2465b;
                border-radius: 4px;
                background-color: #ffffff;
                padding: 0.2em 8em;
                font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
                font-weight: 700;
                font-size: 1.8rem;
                box-shadow: 0 0 5px #bebebe;
                @media (max-width:767px){
                    display: grid;
                    grid-template-columns: repeat(1fr, 0.55fr);
                    grid-template-rows: repeat(2, 1fr);
                    grid-column-gap: 0px;
                    grid-row-gap: 0px;

                    font-size: 2.4rem;
                    width: 100%;
                    text-align: center;
                    padding: 0.5em 1em;
                }
                span{
                    color: #f2465b;
                    @media (max-width:767px){
                        grid-area: 1 / 1 / 2 / 2;
                    }
                }
                i{
                    color: #f2465b;
                    @media (max-width:767px){
                        grid-area: 1 / 2 / 3 / 3;
                        width: 33.333%;
                        display: inline-block;
                        place-self: center;
                    }
                }
                &:hover{
                    transition: 0.5s;
                }
            }
        }
    }
}

/* ===
    plan ご葬儀プランページ 追加
============================================ */

.trouble_info_box{
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.do_you_know{
    max-width: 1200px;
    margin: 0 auto 30px auto;
    .inner{
        background-color: #fef6f7;
        position: relative;
        padding: 50px 90px;
        border-radius: 4px;

        @media (max-width:767px){
            padding: 40px 15px;
        }

        .title{
            position: absolute;
            top: -35px;
            left: 50%;
            transform: translateX(-50%);
            color: #ef4659;
            border-radius: 50vw;
            background-color: #fff;
            border:2px solid #ef4659;
            font-size: 3.2rem;
            font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
            font-weight: 700;
            padding: 0.15em 3em;
            text-align: center;
            @media (max-width:767px){
                width: calc(100% - 40px);
                padding: 0;
                top:-30px;
            }
        }
    }

    .dyk_innerbox{
        text-align: center;
        .text01{
            font-size: 2.4rem;
            font-weight: 700;
            font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
            padding: 15px 0;
            @media (max-width:767px){
                font-size: 1.8rem;
            }
            .p1{
                font-size: 3.2rem;
                background: linear-gradient(transparent 70%, yellow 70%);
                @media (max-width:767px){
                    font-size: 2.8rem;
                }
            }
            .p2{
                font-size: 2.0rem;
                font-weight: normal;
                @media (max-width:767px){
                    font-size: 1.6rem;
                }
            }
        }

        .dyk_inner_price{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            column-gap: 10px;
            margin-bottom: 20px;
            .price{
                font-family: "Oswald", sans-serif;
                font-optical-sizing: auto;
                font-weight: 600;
                font-size: 8.2rem;
                color: #cd0414;
                line-height: 1;
                @media (max-width:767px){
                    font-size: 6.9rem;
                }
                span{
                    font-size: 3.8rem;
                    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
                    @media (max-width:767px){
                        font-size: 3.0rem;
                    }
                }
            }
        }

        > p:not(.text01){
            display: inline-block;
            font-size: 1.6rem;
            line-height: 1.6;
            text-align: left;
            span{
                color: #ef4659;
                text-decoration: underline;
            }
        }
    }

    /* 格安料金を謳う葬儀社にご注意ください */
    .warning_point{
        background-color: #ffffff;
        margin-top: 30px;
        .warning_point_inner{
            padding: 30px 60px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            column-gap: 35px;
            @media (max-width:767px){
                padding: 20px;
            }
            .text_area{
                line-height: 1.6;
                @media (max-width:767px){
                    margin-bottom: 20px;
                }
                p{
                    text-align: center;
                    font-size: 2.8rem;
                    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
                    font-weight: 700;
                    color: #cd0414;
                    @media (max-width:767px){
                        font-size: 2.2rem;
                    }
                    span{
                        font-family: "Oswald", sans-serif;
                        font-optical-sizing: auto;
                        font-weight: 600;
                    }
                }
            }
            .btn_area{
                flex: 1;
                ul{
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    align-items: center;
                    row-gap: 15px;
                    li{
                        width: 100%;
                        background-color: #fff602;
                        text-align: center;
                        border-radius: 50vw;
                        font-size: 2.0rem;
                        font-weight: 700;
                        i{
                            padding-right: 10px;
                        }
                    }
                }
            }
        }
    }
}