@charset "UTF-8";

/*Zen Kaku Gothic New 400*/
@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url(/fonts/ZenKakuGothicNew-Regular.woff2);
    font-weight: 400;
    font-display: swap;
}
/*Zen Kaku Gothic New 500*/
@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url(/fonts/ZenKakuGothicNew-Medium.woff2);
    font-weight: 500;
    font-display: swap;
}
/*Zen Kaku Gothic New 700*/
@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url(/fonts/ZenKakuGothicNew-Bold.woff2);
    font-weight: 700;
    font-display: swap;
}

/*リセット*/

.l-main{
    width: 100%;
    padding-bottom: 0;
}

/*共通*/

html{
    scroll-behavior: smooth;
}

.l-contents{
    background-color: #fff;
    overflow: hidden;
}


.l-contents *{
    font-size: 16px;
    font-weight: 400;
    color: #242424;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

[class*="section__wrapper--"]{
    padding-block: 70px;
}

.section__inner{
    width: 1140px;
    margin: 0 auto;
}

.ttl__box{
    text-align: center;
}

.section__ttl{
    font-size: 30px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
}

.section__ttl span{
    font-size: 30px;
    font-weight: 500;
    color: #3E8DC8;
    line-height: 1.4;
}

.section__sub-ttl{
    font-size: 14px;
    font-weight: 500;
    color: #242424;
    letter-spacing: 0.2em;
}


/*メイン画像*/

.main__view{
    position: relative;
    height: 600px;
}

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

.main__box{
    position: relative;
    width: 1140px;
    margin: 0 auto;
}

.main__ttl{
    position: absolute;
    width: 949px;
    left: -11px;
    top: -505px;
    z-index: 1;
}

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

.main__img{
    height: 600px;
}

.main__img img{
    width: 100%;
}

.main__img-contents{
    height: 600px;
}

.main__img-contents img{
    width: 100%;
    height: 100%;
}

/*物件検索*/

#topsearch{
    padding-top: 100px;
    margin-top: -100px;
}

.section__wrapper--search{
    background-color: #fff;
}

.search__list{
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}

[class*="search__item--"]{
    position: relative;
    width: 552px;
    padding: 45px 30px 24px 30px;
    border: 1px solid #3E8DC8;
}

.search__item--property{
    border: 1px solid #DC3E60;
}

[class*="search__ttl--"]{
    position: absolute;
    font-size: 20px;
    font-weight: 700;
    color: #3E8DC8;
    width: 161px;
    height: 26px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    left: 0;
    margin: auto;
    top: -15px;
}

.search__ttl--property{
    color: #DC3E60;
}

.kind__list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.kind__item{
    position: relative;
}

.kind__item a{
    width: 117px;
    height: 117px;
    background-color: #3E8DC8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.search__item--property a{
    background-color: #DC3E60;
}

.kind__item a:hover{
    background-color: #E0F2FF;
    color: #3E8DC8;
    opacity: 1;
}

.search__item--property .kind__item a:hover{
    background-color: #DC3E60;
    opacity: 1;
}

.icon-area,
.icon-line,
.icon-map,
.icon-school,
.icon-area-property,
.icon-line-property,
.icon-map-property,
.icon-school-property{
    width: 40px;
    height: 40px;
    margin: 0 auto;
    fill: #fff;
}

.kind__item a:hover .icon-area,
.kind__item a:hover .icon-line,
.kind__item a:hover .icon-map,
.kind__item a:hover .icon-school{
    fill: #3E8DC8;
}

.search__more--list{
    display: none;
    position: absolute;
    top: 0; /* 上に表示させる */
    left: 0;
    z-index: 2;
    width: 101px;
    height: 101px;
    padding: 8px;
}

.search__more--list li a{
    width: 101px;
    height: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #DC3E60;
    font-weight: 500;
}

.search__item--property .search__more--list li a:hover {
    background-color: #F9CBD5;
    color: #DC3E60;
    opacity: 1;
    transition: .3s;
}

.search__more--list li:not(:last-child) {
    margin-bottom: 4px;
}

.kind__item:hover .search__more--list {
    display: block;
}

ul.search__more--list:hover{
    background-color: #DC3E60;
    width: 100%;
    height: 100%;
}

/*賃貸新着物件と売買新着物件*/

.section__wrapper--rent{
    background-color: #F5F5F5;
}

.section__wrapper--sale{
    background-color: #fff;
}

.section__wrapper--sale .section__ttl span{
    color: #DC3E60;
}

.cmn__section{
    position: relative;
}

.section__wrapper--rent .card__contents,
.section__wrapper--sale .card__contents{
    width: 841px;
    margin: 30px auto 0;
}

.card__list {
    margin-top: 27px;
    margin-bottom: 32px;
}
.slide__item {
    width: 267px;
    border: 1px solid #D9D9D9;
}
.is-no-swiper .card__list{
    width: 267px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
    .card__image {
        width: 265px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
        .card__image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: all .3s;
            background-color: #F5F5F5;
        }
        .slide__item a:hover .card__image img {
            transform: scale(1.08);
        }
        .favorite__icon {
            background: url(../images/top/icon_favorite.webp) no-repeat center / cover;
            display: block;
            width: 44px;
            height: 44px;
            position: absolute;
            top: 7px;
            right: 7px;
        }
        .favorite__icon.is-checked {
            background: url(../images/top/icon_favorite_on.webp) no-repeat center / cover;
        }

        .icon__new{
            position: absolute;
            font-size: 16px;
            font-weight: 700;
            color: #3E8DC8;
            width: 54px;
            height: 27px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 5px;
            left: 5px;
        }

        .section__wrapper--sale .icon__new{
            color: #DC3E60;
        }

        .type__txt{
            position: absolute;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            width: 107px;
            height: 31px;
            background-color: #DC3E60;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 0;
            right: 0;
        }

        .card__pad{
            background-color: #fff;
            padding: 9px 11px 17px 15px;
        }

            .card__title {
                font-size: 16px;
                font-weight: 500;
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .card__info-wrap {
                display: flex;
                align-items: flex-end;
                gap: 10px;
                margin-bottom: 4px;
            }
                .card__price {
                    font-size: 14px;
                    font-weight: 700;
                }
                    .card__price span {
                        font-size: 26px;
                        font-weight: 700;
                        color: #E80A02;
                        line-height: 1;
                        margin-right: 3px;
                    }
                    .l-main .card__text--madori{
                        font-size: 14px;
                        font-weight: 700;
                    }
                [class*="card__text--"] {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.5;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .card__text--address {
                    margin-bottom: 2px;
                }
        .section__cardslider .swiper-option-wrap {
            display: flex;
            gap: 30px;
            justify-content: center;
            align-items: baseline;
        }

.cmn__section .swiper-button-prev {
    left: 450px;
}
.cmn__section .swiper-button-next {
    right: 450px;
}
.cmn__section .swiper-button-next,
.cmn__section .swiper-button-prev {
    position: unset;
    width: fit-content;
    height: fit-content;
    top: 415px;
    z-index: 1;
}
.cmn__section .swiper-button-prev::after,
.cmn__section .swiper-button-next::after {
    content: "";
    position: absolute;
    background: url(../images/top/icon_swiper_arrow.webp) no-repeat center / cover;
    width: 30px;
    height: 30px;
	transition: transform 0.3s ease;
    bottom: 62px;
}
.section__wrapper--sale .cmn__section .swiper-button-prev::after,
.section__wrapper--sale .cmn__section .swiper-button-next::after{
    background: url(../images/top/icon_swiper_arrow-sale.webp) no-repeat center / cover;
}
.cmn__section .swiper-button-prev:hover::after,
.cmn__section .swiper-button-next:hover::after {
    background: url(../images/top/icon_swiper_arrow_on.webp) no-repeat center / cover;
}
.section__wrapper--sale .cmn__section .swiper-button-prev:hover::after,
.section__wrapper--sale .cmn__section .swiper-button-next:hover::after{
    background: url(../images/top/icon_swiper_arrow-sale_on.webp) no-repeat center / cover;
}
.cmn__section .swiper-button-prev:hover::after {
    transform: rotate(180deg); /* ← 左矢印は回転も維持 */
}
.cmn__section .swiper-button-prev::after {
    transform: rotate(180deg);
}
.swiper-pagination{
    position: unset;
    width: fit-content;
    height: fit-content;
}
.cmn__section .swiper-pagination{
    position: unset;
    width: fit-content!important;
    height: fit-content;
    z-index: 0;
}
.cmn__section .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #CBCBCB;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 6px) !important;
    opacity: 1;
}
.cmn__section .swiper-pagination-bullet-active {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3E8DC8;
    opacity: 1;
}
.section__wrapper--sale .cmn__section .swiper-pagination-bullet-active{
    background-color: #DC3E60;
}
.cmn__more a{
    position: relative;
    width: 220px;
    height: 45px;
    margin: 29px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background-color: #fff;
    border: 1px solid #3E8DC8;
    color: #3E8DC8;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    padding-right: 0px;
}

.section__wrapper--sale .cmn__more a{
    color: #DC3E60;
    border: 1px solid #DC3E60;
}

.cmn__more a::before{
    position: absolute;
    content: "";
    background-color: #3E8DC8;
    width: 1px;
    height: 7px;
    right: 15px;
    transform: rotate(45deg);
    top: 20px;
}

.section__wrapper--sale .cmn__more a::before{
    background-color: #DC3E60;
}

.cmn__more a::after{
    position: absolute;
    content: "";
    background-color: #3E8DC8;
    width: 1px;
    height: 7px;
    right: 15px;
    transform: rotate(-45deg);
    top: 15px;
}

.section__wrapper--sale .cmn__more a::after{
    background-color: #DC3E60;
}

.cmn__more a:hover{
    background-color: #3E8DC8;
    color: #fff;
    opacity: 1;
}

.section__wrapper--sale .cmn__more a:hover{
    background-color: #DC3E60;
    color: #fff;
    opacity: 1;
}

.cmn__more a:hover::before,
.cmn__more a:hover::after{
    background-color: #fff;
}

/*ダイドー不動産の未来安心コンサルタント*/

.section__wrapper--consultant{
    background-color: #F5F5F5;
}

.flex__box--consultant{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.consultant__txt{
    margin-top: 30px;
}

.section__wrapper--consultant .cmn__more a{
    margin-top: 30px;
    margin-right: auto;
    margin-left: inherit;
}

.consultant__img{
    width: 640px;
    flex-shrink: 0;
}

.consultant__img img{
    width: 100%;
}

/*リノベーション*/

.section__wrapper--renovation{
    background: url(../images/top/renovation.webp) no-repeat center / cover;
    height: 477px;
}

.renovation__box{
    width: 1140px;
    height: 337px;
    background-color: rgba(255, 255, 255, 0.85);

    margin: 0 auto;
    padding: 50px 250px 50px;
}

.renovation__txt{
    line-height: 1.5;
    margin-top: 30px;
    text-align: center;
}

.btn__box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

[class*="btn__primary--"]{
    position: relative;
    width: 300px;
    height: 60px;
    background-color: #3E8DC8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.btn__primary--achievements{
    background-color: #DC3E60;
}

[class*="btn__primary--"]:hover{
    background-color: #fff;
    border: 1px solid #3E8DC8;
    color: #3E8DC8;
    opacity: 1;
}

.btn__primary--achievements:hover{
    border: 1px solid #DC3E60;
    color: #DC3E60;
}

[class*="btn__primary--"]::before{
    position: absolute;
    content: "";
    background-color: #fff;
    width: 2px;
    height: 9px;
    right: 19px;
    transform: rotate(45deg);
    top: 27px;
}

[class*="btn__primary--"]::after{
    position: absolute;
    content: "";
    background-color: #fff;
    width: 2px;
    height: 9px;
    right: 19px;
    transform: rotate(-45deg);
    top: 21px;
}

[class*="btn__primary--"]:hover::before,
[class*="btn__primary--"]:hover::after{
    background-color: #3E8DC8;
    opacity: 1;
}

.btn__primary--achievements:hover::before,
.btn__primary--achievements:hover::after{
    background-color: #DC3E60;
}

/*飯塚市について*/

.section__wrapper--area{
    background-color: #fff;
}

.area__list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 29px;
}

.area__item{
    display: flex;
    gap: 38px;
    border: 1px solid #D9D9D9;
    padding: 20px 35px 18px 20px;
}

.area__img{
    width: 456px;
    flex-shrink: 0;
}

.area__img img{
    width: 100%;
}

.area__box{
    margin-top: 54px;
}

.area__sub-ttl{
    font-size: 20px;
    font-weight: 700;
    color: #3E8DC8;
    line-height: 1.5;
}

.area__txt{
    line-height: 1.65;
    margin-top: 10px;
}

.section__wrapper--area .cmn__more a{
    margin-top: 28px;
    margin-right: auto;
    margin-left: inherit;
}

/*お役立ち情報*/

.section__wrapper--useful{
    background-color: #F5F5F5;
}

.useful__list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
}

[class*="useful__item--"]{
    position: relative;
    width: 270px;
    height: 195px;
    background-color: rgba(57, 99, 161, 0.9);
    overflow: hidden;
}

[class*="useful__item--"]::after{
    position: absolute;
    content: "";
    background-color: rgba(57, 99, 161, 0.9);
    width: 100%;
    height: 100%;
    top: 0;
    pointer-events: none;
}

.color{
    background-color: rgba(57, 99, 161, 0.9);
}

.point{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.point__img{
    width: 270px;
}

.point__img img{
    width: 100%;
    transition: all .3s;
}

[class*="useful__item--"]:hover .point__img img{
    transform: scale(1.08);
}

[class*="useful__item--"]::before{
    position: absolute;
    content: "";
    background: url(../images/top/useful_arrow.webp) no-repeat center / cover;
    width: 24px;
    height: 24px;
    bottom: 12px;
    right: 12px;
    z-index: 1;
}

[class*="useful__img--"]{
    width: 72px;
    height: 67px;
    margin: 13px auto 0;
}

.useful__img--subsidy{
    width: 75px;
}

.useful__img--support{
    width: 88px;
}

[class*="useful__img--"] img{
    width: 100%;
}

[class*="useful__item--"] a{
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 39px;
    padding-top: 22px;
    z-index: 1;
}

[class*="useful__item--"] a:hover{
    opacity: 1;
}

/*賃貸管理メニュー*/

.section__wrapper--management{
    background-color: #fff;
}

.management__list{
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}

.management__item{
    width: 270px;
    border: 1px solid #D9D9D9;
    padding: 12px 11px 9px;
    flex-shrink: 0;
}

.management__item a:hover{
    opacity: 1;
}

.management__img{
    width: 246px;
    overflow: hidden;
}

.management__img img{
    width: 100%;
    transition: all .3s;
}
.management__item a:hover .management__img img{
    transform: scale(1.08);
    opacity: 1;
}

.management__sub-ttl{
    position: relative;
    font-size: 20px;
    font-weight: 500;
    color: #3E8DC8;
    text-align: center;
    margin-top: 7px;
    line-height: 1.5;
}

.management__sub-ttl::before{
    position: absolute;
    content: "";
    background: url(../images/top/management_arrow.webp) no-repeat center / cover;
    width: 24px;
    height: 24px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 2px;
}

/*更新情報*/

.section__wrapper--info{
    background-color: #F5F5F5;
    padding-block: 70px;
}

.section__wrapper--info .ttl__box{
    text-align: left;
}

.section__wrapper--info .cmn__more a{
    margin-top: 23px;
    margin-right: auto;
    margin-left: inherit;
}

.pg__inner {
    width: 1140px;
    margin: 0 auto;
}
.topics__inner {
    display: flex;
    gap: 127px;
    align-items: center;
}
.cnt__ttl--topics {
    font-size: 30px;
    color: #333333;
    margin-bottom: 30px;
}
.contents__area {
    width: 100%;
    background-color: #fff;
    padding: 42px 30px 37px 44px;
}
.contents__area__inner {
    overflow: hidden;
}
.topics__list {
    width: 709px;
    max-height: 343px;
}
    .topics__item:not(:first-child) {
        padding-top: 20px;
    }
    .topics__item:not(:last-child){
        border-bottom: 1px solid #F0F0F0;
        padding-bottom: 20px;
        width: 677px;
    }
        .topics__date {
            font-size: 16px;
            font-weight: 500;
            width: 90px;
            border-radius: 16px;
            color: #3E8DC8;
        }
        .topics__detail {
            width: 620px;
        }
        .topics__title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
        }
    .section__wrapper--info .simplebar-track.simplebar-vertical {
        right: -18px;
        width: 2px;
        background: #ECECEC;
    }
    .section__wrapper--info .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
        top: 0;
        bottom: 0;
        opacity: 1;
        background: #1D2089;
        width: 2px;
        left: 0;
        border-radius: 0;
    }
    .history_section .simplebar-scrollbar:before {
        background: #1D2089;
        opacity: 1;
    }
    .section__wrapper--info .more__btn {
        bottom: 2px;
    }
    .history_section .simplebar-track.simplebar-vertical {
        right: 0;
        background-color: #ECECEC;
        border-radius: 5px;
    }


/*スタッフ紹介とお客様の声*/

.section__wrapper--staff{
    background-color: #fff;
}

.section__wrapper--customer{
    background-color: #F5F5F5;
}

.section__wrapper--staff .card__contents,
.section__wrapper--customer .card__contents{
    width: 841px;
    margin: 0 auto;
}

.section__wrapper--staff .is-no-swiper{
    width: 267px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

[class*="blog__list--"]{
    margin-top: 29px;
    margin-bottom: 32px;
}

.section__wrapper--staff .is-no-swiper [class*="blog__list--"],
.section__wrapper--customer .is-no-swiper [class*="blog__list--"]{
    margin-bottom: 0;
}

.blog__item--customer.swiper-slide {
    width: 267px;
}

.blog__item--customer.swiper-slide:not(:last-of-type){
    margin-right: 20px;
}

[class*="blog__item--"]{
    padding: 15px 15px 12px;
    border: 1px solid #D9D9D9;
    background-color: #fff;
}

.is-no-swiper .blog__list--customer.swiper-wrapper,
.is-no-swiper .blog__list--staff.swiper-wrapper {
    justify-content: center;
}

.is-no-swiper .blog__list--customer .blog__item--customer,
.is-no-swiper .blog__list--staff .blog__item--staff{
    width: 267px;
}

.is-no-swiper .blog__list--customer .blog__item--customer:not(:last-of-type),
.is-no-swiper .blog__list--staff .blog__item--staff:not(:last-of-type){
    margin-right: 20px;
}

[class*="blog__img--"]{
    width: 240px;
    height: 180px;
}

[class*="blog__img--"] img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[class*="blog__box--"]{
    margin-top: 8px;
}

[class*="blog__name--"]{
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

[class*="blog__txt--"]{
    font-size: 14px;
    line-height: 1.5;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*お役立ちブログ*/

.section__wrapper--blog{
    background-color: #fff;
}

.blog__item{
    width: 336px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #D9D9D9;
}

.blog__name--handy{
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[class*="blog__time--"]{
    color: #3E8DC8;
}

.blog__txt--handy{
    margin: 0;
}

.section__wrapper--blog .is-no-swiper{
    display: flex;
    justify-content: center;
    align-items:  center;
    width: 366px;
    margin: 0 auto;
}

.blog__list{
    margin-top: 30px;
    justify-content: center;
    gap: 20px;
}

.section__wrapper--blog .cmn__more a{
    margin: 20px auto 0;
}

/*会社案内*/

.section__wrapper--company{
    background-color: #F5F5F5;
}

.company__list{
    display: flex;
    gap: 40px;
    align-items: center;
    margin-top: 28px;
}

.company__img{
    width: 646px;
}

.company__img img{
    width: 100%;
}

.company__name{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.company__inner{
    margin-top: 20px;
}

.company__inner dl{
    display: flex;
    gap: 27px;
}

.company__inner dl:not(:first-of-type){
    margin-top: 16px;
}

.company__inner dt{
    min-width: 64px;
    font-weight: 700;
    color: #3E8DC8;
    line-height: 1.62;
}

.btn__company a{
    position: relative;
    width: 331px;
    height: 60px;
    background-color: #3E8DC8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 30px auto 0 0;
}

.btn__company a::before,
.btn__company a::after{
    position: absolute;
    content: "";
    background-color: #fff;
    width: 2px;
    height: 9px;
    transform: rotate(45deg);
    top: 29px;
    right: 20px;
}

.section__wrapper--company .btn__company a::after{
    transform: rotate(-45deg);
    top: 24px;
    right: 20px;
}

.btn__company a:hover{
    background-color: #fff;
    color: #3E8DC8;
    border: 1px solid #3E8DC8;
    opacity: 1;
}

.btn__company a:hover::before,
.btn__company a:hover::after{
    background-color: #3E8DC8;
    opacity: 1;
}

/*会社案内下バナー*/

.bnr__box--company{
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.bnr__img{
    width: 552px;
}

.bnr__img img{
    width: 100%;
}

/*お問い合わせ*/

.section__wrapper--contact{
    background-color: #3E8DC8;
}

.section__wrapper--contact .section__ttl,
.section__wrapper--contact .section__sub-ttl{
    color: #fff;
}

.contact__box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    margin-top: 28px;
}

.section__wrapper--contact .contact__item--tel{
    width: 357px;
    padding: 29px 0 28px;
    background-color: transparent;
    border: 1px solid #fff;
}

.tel__number{
    position: relative;
    font-size: 46px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding-left: 38px;
}

.tel__number::before{
    position: absolute;
    content: "";
    background: url(../images/top/contact_tel.webp) no-repeat center / cover;
    width: 35px;
    height: 36px;
    top: 21px;
    left: 22px;
}

.detail__box{
    text-align: center;
}

[class*="detail__txt--"]{
    font-size: 14px;
    color: #fff;
}

[class*="contact__item--"]{
    width: 250px;
    background-color: #fff;
    padding: 20px;
}

[class*="contact__img--"]{
    width: 62px;
    margin: 0 auto;
}

.contact__img--mail{
    width: 58px;
}

[class*="contact__img--"] img{
    width: 100%;
}

.contact__btn{
    margin-top: 16px;
}

.contact__item--mail .contact__btn{
    margin-top: 19px;
}

[class*="btn__basic--"]{
    position: relative;
    width: 210px;
    height: 50px;
    background-color: #DC3E60;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #fff;
}

.btn__basic--line{
    background-color: #48C330;
}

.btn__basic--mail{
    background-color: #3C56AD;
}

[class*="btn__basic--"]::before,
[class*="btn__basic--"]::after{
    position: absolute;
    content: "";
    background-color: #fff;
    width: 2px;
    height: 9px;
    transform: rotate(45deg);
    top: 24px;
    right: 16px;
}

.section__wrapper--contact [class*="btn__basic--"]::after{
    transform: rotate(-45deg);
    top: 19px;
    right: 16px;
}

[class*="btn__basic--"]:hover{
    background-color: #fff;
    color: #DC3E60;
    border: 1px solid #DC3E60;
    opacity: 1;
}

.btn__basic--line:hover{
    color: #48C330;
    border: 1px solid #48C330;
}

.btn__basic--mail:hover{
    color: #3C56AD;
    border: 1px solid #3C56AD;
}

[class*="btn__basic--"]:hover::before,
[class*="btn__basic--"]:hover::after{
    background-color: #DC3E60;
    opacity: 1;
}

.btn__basic--line:hover::before,
.btn__basic--line:hover::after{
    background-color: #48C330;
}

.btn__basic--mail:hover::before,
.btn__basic--mail:hover::after{
    background-color: #3C56AD;
}