@charset "utf-8";

.intro {
    position: relative;

    .w1152 {
        padding: 35px 0 80px;
        border-bottom: 1px solid #b1b1b1;

        @media(max-width:960px) {
            max-width: calc(312/390*100%);
            padding-bottom: 40px;
        }

        .p-title {
            margin-bottom: 80px;

            @media(max-width:960px) {
                margin-bottom: 40px;
            }
        }

        .item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 80px;

            @media(max-width:960px) {
                flex-direction: column;
                align-items: center;
                gap: 32px;
            }

            .text {
                display: flex;
                gap: 40px;
                flex-direction: column;

                @media(max-width:960px) {
                    gap: 32px;
                }

                .desc {
                    font-family: var(--fmain);
                    font-weight: 500;
                    --fmin: 14;
                    --fmax: 16;
                    font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
                    line-height: calc(40/16*100%);
                    color: #000;


                }

                .catch {
                    font-family: var(--fsub);
                    font-weight: 400;
                    --fmin: 18;
                    --fmax: 28;
                    font-size: clamp(1.125rem, 0.709rem + 0.87vw, 1.75rem);
                    line-height: calc(48/28*100%);
                    color: #000;

                    @media(max-width:700px) {
                        white-space: nowrap;
                    }
                }

                .name {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    gap: 9px;
                    align-items: flex-end;

                    @media(max-width:960px) {
                        align-items: center;
                        justify-content: center;
                    }

                    .sub {
                        font-family: var(--fmain);
                        font-weight: 500;
                        --fmin: 14;
                        --fmax: 16;
                        font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
                        color: #003657;
                    }

                    .main {
                        font-family: "Noto Sans JP", sans-serif;
                        font-weight: 400;
                        font-size: 32px;
                        color: #000;
                    }
                }

            }

            .img {


                @media(max-width:960px) {
                    flex: 1;
                }

                @media(max-width:700px) {
                    width: 100%;
                    height: 231px;
                    flex: auto;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .img.w453 {
                max-width: 453px;
                width: 100%;
            }

            .img.w440 {
                max-width: 440px;
                width: 100%;
            }
        }

        .item.reverse {
            flex-direction: row-reverse;
            gap: 80px;

            @media(max-width:960px) {
                flex-direction: column;
            }
        }

        .item:nth-child(2) {
            gap: 63px;
        }



        .item:last-child {
            gap: 50px;
            margin-bottom: 0;
        }
    }
}

.intro::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 102px;
    left: 0;
    background: url(/system_panel/uploads/images/20251211200251371893.png) no-repeat center/100% auto;
    z-index: -1;

    @media(max-width:700px) {
        top: 7%;
        background-position: top;

    }
}

.infomation {
    .w1152 {
        padding: 120px 0;

        @media(max-width:960px) {
            padding: 60px 0;
        }

        .p-title {
            margin-bottom: 40px;
        }

        .tablearea {
            margin-bottom: 56px;
        }

        .detailarea {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 88px 42px;

            @media(max-width:960px) {
                gap: 40px 15px;
            }

            .item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 17px;



                p {
                    font-family: "Noto Sans JP", sans-serif;
                    font-weight: 500;
                    font-size: 16px;
                    color: #003657;
                }

                img {
                    width: 100%;
                    height: 354px;
                    object-fit: cover;

                    @media(max-width:960px) {
                        height: 150px;
                    }
                }
            }

            .map {
                grid-area: 2 / 1 / 3 / 3;
                max-width: 858px;
                width: 100%;
                margin: 0 auto;

                iframe {
                    border: none;
                    width: 100%;
                    height: 473px;

                    @media(max-width:960px) {
                        height: 200px;
                    }
                }
            }
        }
    }
}