@charset "UTF-8";

/*///////////////////// font-face 読み込み例 ///////////////////////////*/
@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Medium.ttf);
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-SemiBold.ttf);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Black.ttf);
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url(/fonts/Roboto-Medium.ttf);
    font-weight: 500;
    font-display: swap;
}
/*///////////////////// font-face 読み込み例 ///////////////////////////*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 158px;
}

.l-main {
    padding-bottom: 0;
}

.mv__img {
    width: 100%;
    height: 440px;
}
    .mv__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cnt__inner {
    width: 1140px;
    margin: 0 auto;
}
    .cnt__ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
        color: #333;
        text-align: center;
    }
        .cnt__ttl span {
            font-family: "Roboto", sans-serif;
            font-size: 18px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.02em;
            color: #333;
        }
        .cnt__ttl svg {
            margin-top: 15px;
        }

.head__wrapper * ,
.bottom__wrapper * {
    font-family: "Noto Sans JP", sans-serif;
}

.pg-anchor__wrap {
    padding-block: 80px 81px;
    background: #F3FBFF;
}
    .pg-anchor__list {
        display: flex;
        justify-content: center;
        gap: 15px;
    }
        [class*="pg-anchor__link"] {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 216px;
            height: 144px;
            padding-bottom: 14px;
            border-radius: 10px;
            background: #FFF;
            box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.16);
            position: relative;
        }
        [class*="pg-anchor__link"]::after {
            content: '';
            width: 100%;
            height: 8px;
            border-radius: 0 0 10px 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
        }
        .pg-anchor__link--flow::after,
        .pg-anchor__link--map::after,
        .pg-anchor__link--kodawari::after {
            background: #40B3E8;
        }
        .pg-anchor__link--reservation::after {
            background: #E67E22;
        }
        .pg-anchor__link--line::after {
            background: #08CC48;
        }
            .pg-anchor__text {
                font-size: 18px;
                font-weight: 700;
                line-height: 1.4;
                color: #333;
            }
    .anchor__txt {
        font-size: 16px;
        font-weight: 400;
        line-height: 2;
        color: #333;
        margin-top: 29px;
    }

.flow__wrap {
    padding-block: 69px 81px;
    background: #FFF;
}
    .flow__list {
        display: flex;
        gap: 22px;
        margin-top: 34px;
        counter-reset: flow;
        position: relative;
        z-index: 1;
    }
    .flow__list::after {
        content: '';
        width: 100%;
        height: 4px;
        background: #A8E4FF;
        position: absolute;
        top: 105px;
        left: 0;
        z-index: -1;
    }
        .flow__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            width: 144px;
            counter-increment: flow;
        }
            .flow__num {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 4px;
                width: 90px;
                height: 30px;
                border-radius: 99999px;
                background: #40B3E8;
                font-size: 16px;
                font-weight: 400;
                line-height: 1;
                color: #FFF;
            }
            .flow__item:last-of-type .flow__num {
                background: #E67E22;
            }
                .flow__num::after {
                    content: counter(flow, decimal-leading-zero);
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 1;
                    color: #FFF;
                }
            .flow__img {
                width: 144px;
                height: 144px;
            }
                .flow__img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            .flow__txt {
                font-size: 16px;
                font-weight: 500;
                line-height: 1.4;
                color: #333;
                text-align: center;
            }

.area-map__wrap {
    padding-block: 69px 80px;
    background: #F3FBFF;
}
    .map__box {
        width: 1140px;
        height: 670px;
        margin-top: 34px;
        position: relative;
    }
        [class*="map__bt-box"] {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 11px;
            width: 222px;
            height: 140px;
            padding-left: 66px;
            border-radius: 10px;
            background: #FFF;
            position: absolute;
            z-index: 1;
        }
        .map__bt-box--chiba {
            align-items: center;
            gap: 10px;
            width: 204px;
            height: 244px;
            padding: 0 0 4px 0;
            top: 30px;
            left: 30px;
        }
        .map__bt-box--yotsukaidostreet {
            top: 50px;
            left: 449px;
        }
        .map__bt-box--monoi {
            top: 131px;
            left: 831px;
        }
        .map__bt-box--yotsukaidostation {
            top: 353px;
            left: 538px;
        }
            .map__img-icn {
                width: 110px;
                height: 110px;
                border-radius: 50%;
                border: 5px solid #FFF;
                position: absolute;
                top: 15px;
                left: -55px;
                z-index: 1;
            }
                .map__img-icn img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
        .map__bt-txt {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.4;
            color: #333;
        }
        .map-more__bt {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 126px;
            height: 40px;
            border-radius: 6px;
            background: #E67E22;
            box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.16);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.4;
            color: #FFF;
        }
        .map__bt-box--chiba .map-more__bt {
            width: 144px;
        }

.kodawari__wrap {
    padding-block: 69px 80px;
    background: #FFF;
}
    .kodawari__list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 34px;
    }
        .kodawari__link {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 220px;
            height: 64px;
            border-radius: 6px;
            background: #40B3E8;
            box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.16);
            font-size: 18px;
            font-weight: 700;
            line-height: 1.4;
            color: #FFF;
            text-align: center;
        }

.search__wrap {
    padding-block: 69px 80px;
    background: #F3FBFF;
}
    .search__wrap .cnt__ttl{
        margin-bottom: 34px;
    }

.reason__wrap {
    padding-block: 69px 80px;
    background: #FFF;
}
    .reason__list {
        display: flex;
        justify-content: space-between;
        margin-top: 34px;
    }
        .reason__item {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 360px;
        }
            .reason__img {
                width: 100%;
                height: 245px;
            }
                .reason__img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            .reason__txt {
                display: flex;
                align-items: center;
                gap: 15px;
                font-size: 18px;
                font-weight: 700;
                line-height: 1.6;
                color: #333;
            }

.faq__wrap {
    padding-block: 69px 80px;
    background: #F3FBFF;
}
    .faq__list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 45px;
    }
        .faq__item {
            display: flex;
            flex-direction: column;
            width: 100%;
            border-radius: 10px;
            background: #D5F2FF;
            padding: 24px 20px 24px 30px;
            transition: .4s;
            cursor: pointer;
        }
        .faq__item:has(.faq__q-txt.open) {
            background: #FFF;
        }
            .faq__q-txt {
                display: flex;
                align-items: center;
                font-size: 18px;
                font-weight: 700;
                line-height: 1.4;
                color: #333;
            }
            .accordion__block {
                display: none;
            }
            .faq__a-txt {
                display: flex;
                align-items: flex-start;
                width: 1030px;
                margin-top: 13px;
                font-size: 16px;
                font-weight: 400;
                line-height: 2;
                color: #333;
            }
                [class*="faq__icn"] {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 38px;
                    height: 38px;
                    border-radius: 6px;
                    flex-shrink: 0;
                    font-size: 26px;
                    font-weight: 700;
                    line-height: 1;
                    color: #FFF;
                    margin-right: 12px;
                }
                .faq__icn--q {
                    padding-bottom: 6px;
                    background: #40B3E8;
                }
                .faq__icn--a {
                    padding-bottom: 3px;
                    background: #E67E22;
                }
                .view__icn {
                    display: block;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: #FFF;
                    border: 1px solid #FFF;
                    margin-left: auto;
                    transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
                    will-change: transform;
                    position: relative;
                }
                .faq__q-txt.open .view__icn {
                    border: 1px solid #40B3E8;
                }
                .view__icn::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    width: 20px;
                    height: 2px;
                    border-radius: 9999px;
                    background: #40B3E8;
                    display: block;
                }
                .view__icn::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    width: 2px;
                    height: 20px;
                    border-radius: 9999px;
                    background: #40B3E8;
                    display: block;
                    transition: 0.4s cubic-bezier(0.76, 0, 0.24, 1);
                    will-change: transform;
                }
                .faq__q-txt.open .view__icn:after {
                    transform: translate(-50%, -50%) rotate(90deg);
                }