/* ---
    追加CSS（Sass不使用）
------------------------------------ */

/* --- 供花・供物ページ --- */

.kyouka{
    .inner{
        .item_box_area{
            .area_detail{
                padding: 60px 0;
                @media (max-width: 767px) {
                    padding: 30px 0;
                }
                h3{
                    width: 100%;
                    border-bottom: 1px solid #1a74a8;
                    color: #1a74a8;
                    position: relative;
                    margin-bottom: 60px;
                    span{
                        position: absolute;
                        top: -26px;
                        left: 50%;
                        display: inline-block;
                        background-color: #fff;
                        padding: 0.5em 1em;
                        border: 1px solid #1a74a8;
                        transform: translateX(-50%);
                        @media (max-width: 767px) {
                            font-size: 1.6rem;
                            padding: 0.25em 0.5em;
                        }
                    }
                }

            }

            .message_board_box{
                width: 100%;
                background-color: #dfdfdf;
                p{
                    padding: 60px;
                    text-align: center;
                    font-size: 1.8rem;
                }
            }
        }
    }
}

.kumotsu2{
    .inner{
        .item_box_area{
            .area_detail{
                &.area04{
                    .item_box{
                        @media (max-width: 767px) {
                            display: flex;
                        }
                        .item{
                            width: calc(20% - 12px);
                            @media (max-width: 767px) {
                                width: calc((100% - 12px) / 2 );
                            }
                        }
                    }
                }
            }
        }
    }
}

.kyouka_in_hall{
    width: 100%;
    padding: 60px 0;
    .column_hall_list{
        .inner{
            .part_hall{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                column-gap: 30px;
                .hall_area_wrap{
                    margin: 0;
                    width: calc((100% - 30px) / 2 );
                    @media (max-width: 767px) {
                        width: 100%;
                    }
                    .hall_info_box{
                        a{
                            > .flex{
                                flex-direction: column;
                                width: 100%;
                                > div{
                                    width: 100%;
                                }

                            }
                        }
                    }
                }
            }
        }
    }
}