@charset "utf-8";

/* ==========================================
空き家のお悩み
========================================== */

.buy01-wrapper {
    padding: 18rem 0 13rem;
}

.buy01-inner {
    max-width: 165rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.buy01-img-area {
    text-align: center;
    margin: 6rem auto 0;
}

.buy-img01-pc {
	display: block;
}

.buy-img01-tab {
    display: none;
}

.buy-img01-sp {
    display: none;
}

/* ==========================================
サポート
========================================== */

.buy02-wrapper {
    padding: 15rem 0 18rem;
}

.buy02-inner {
    max-width: 155rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.buy02-area {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12rem 6rem;
    margin: 8rem 0 0;
}

.buy02-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.buy02-block:nth-child(even) {
    margin: 8rem 0 0;
}

.buy02-number-box {
    max-width: 8rem;
    width: 100%;
}

.buy02-number {
    max-width: 8rem;
    width: 100%;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 3rem;
    line-height: 1em;
    margin: auto;
}

.buy02-number-title {
    writing-mode: vertical-rl;
    margin: 1.5rem auto 0;
}

.buy02-card {
    max-width: 58rem;
    flex: 1;
    margin: 8rem 0 0;
}

.buy02-card-img {
    aspect-ratio: 29/18;
    position: relative;
}

.buy02-card-img > img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.buy02-card-title {
    margin: 4rem 0 0;
}

.buy02-card-text {
    margin: 3rem 0 0;
}

/* ==========================================
お客様とのお約束、選ばれる理由
========================================== */

.buy03-wrapper {
    padding: 13rem 0;
}

.buy03-inner {
    max-width: 145rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.buy03-text-area {
    max-width: 122rem;
    width: 100%;
    outline: 0.1rem solid;
    outline-offset: -1rem;
    padding: 8rem 2.5rem;
    margin: auto;
}

.buy03-text-box {
    max-width: 97rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin: 3rem auto 0;
}

.buy03-area {
    margin: 13rem 0 0;
}

.buy03-card-group {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5rem;
    margin: 6rem 0 0;
}

.buy03-card-img {
    aspect-ratio: 11/8;
    position: relative;
}

.buy03-card-img > img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.buy03-card-title-box {
    display: flex;
    font-family: var(--font-familu01);
    margin: 3rem 0 0;
}

.buy03-card-title {
    flex: 1;
}

.buy03-card-text {
    margin: 3rem 0 0;
}

.buy03-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 3rem 0 0;
}

.buy03-tag {
    line-height: 1em;
    padding: 1.5rem;
}

/* ==========================================
施工事例
========================================== */

.works-wrapper {
    padding: 15rem 0 0;
}

.works-inner {
    max-width: 128rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.works-area {
    padding: 0 6rem;
    margin: 6rem auto 0;
    position: relative;
}

.works-slider {
    position: static;
}

.works-img-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
}

.works-title-box {
    margin: 1.5rem 0 0;
}

.swiper-button-next, .swiper-button-prev {
    width: 2.4rem;
    height: 4.7rem;
    transition: 0.3s;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 0.6;
}

.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

.swiper-button-prev {
    background: url(/wp2/wp-content/uploads/icon_arrow02_left_red.svg) no-repeat center / contain;
    left: 0;
}

.swiper-button-next {
    background: url(/wp2/wp-content/uploads/icon_arrow02_right_red.svg) no-repeat center / contain;
    right: 0;
}

/* ==========================================
お客様の声
========================================== */

.voice-wrapper {
    padding: 15rem 0;
}

.voice-inner {
    max-width: 125rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.voice-area {
    margin: 6rem auto 0;
}

.voice-block {
    padding: 5rem;
}

.voice-block:not(:first-child) {
    margin: 4rem 0 0;
}

.voice-info {
    text-align: right;
    margin: 2rem 0 0;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1920px) {


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1550px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1024px) {

    /* ==========================================
    サポート
    ========================================== */
    
    .buy02-area {
        gap: 6rem 3rem;
    }

    .buy02-block:nth-child(even) {
        margin: 6rem 0 0;
    }
    
    .buy02-number-box {
        max-width: 6rem;
    }
    
    .buy02-number {
        max-width: 6rem;
        height: 6rem;
        font-size: 2.6rem;
    }
    
    .buy02-card {
        margin: 6rem 0 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=768px) {

    /* ==========================================
    空き家のお悩み
    ========================================== */
    
    .buy01-wrapper {
        padding: 10rem 0 6rem;
    }
    
    .buy01-img-area {
        margin: 4rem auto 0;
    }

    .buy-img01-pc {
        display: none;
    }

    .buy-img01-tab {
        display: block;
    }

    /* ==========================================
    サポート
    ========================================== */

    .buy02-wrapper {
        padding: 10rem 0;
    }
    
    .buy02-area {
        margin: 4rem 0 0;
        grid-template-columns: repeat(1,1fr);
    }

    .buy02-block:nth-child(even) {
        margin: 0;
    }
    
    .buy02-number-box {
        max-width: 5rem;
    }
    
    .buy02-number {
        max-width: 5rem;
        height: 5rem;
        font-size: 2rem;
    }
    
    .buy02-card {
        max-width: 100%;
        margin: 5rem 0 0;
    }

    .buy02-card-title {
        margin: 3rem 0 0;
    }
    
    .buy02-card-text {
        margin: 2rem 0 0;
    }

    /* ==========================================
    お客様とのお約束、選ばれる理由
    ========================================== */
    
    .buy03-wrapper {
        padding: 6rem 0;
    }
    
    .buy03-text-area {
        padding: 6rem 2.5rem;
    }
    
    .buy03-text-box {
        gap: 3rem;
        margin: 2rem auto 0;
    }
    
    .buy03-area {
        margin: 6rem 0 0;
    }
    
    .buy03-card-group {
        gap: 3rem;
        margin: 4rem 0 0;
    }
    
    .buy03-card-title-box {
        margin: 2rem 0 0;
    }
    
    .buy03-card-text {
        margin: 2rem 0 0;
    }
    
    .buy03-tags {
        margin: 2rem 0 0;
    }
    
    .buy03-tag {
        padding: 1rem;
    }
    
    /* ==========================================
    施工事例
    ========================================== */
    
    .works-wrapper {
        padding: 10rem 0 0;
    }
    
    .works-area {
        padding: 0 4rem;
        margin: 4rem auto 0;
        position: relative;
    }
    
    .swiper-button-next, .swiper-button-prev {
        width: 1.7rem;
        height: 4rem;
    }

    /* ==========================================
    お客様の声
    ========================================== */
    
    .voice-wrapper {
        padding: 10rem 0;
    }
    
    .voice-area {
        margin: 4rem auto 0;
    }
    
    .voice-block {
        padding: 3rem;
    }
    
    .voice-block:not(:first-child) {
        margin: 3rem 0 0;
    }
    
    .voice-info {
        margin: 1.5rem 0 0;
    }
    
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=576px) {

    .buy-img01-tab {
        display: none;
    }

    .buy-img01-sp {
        display: block;
    }

    /* ==========================================
    お客様とのお約束、選ばれる理由
    ========================================== */
    
    .buy03-card-group {
        grid-template-columns: repeat(1,1fr);
        gap: 4rem;
    }

    /* ==========================================
    施工事例
    ========================================== */
    
    .works-img-list {
        grid-template-columns: repeat(1,1fr);
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=414px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */