@charset "utf-8";

/* ==========================================
カテゴリ
========================================== */

.category-wrapper {
    padding: 18rem 0 0;
}

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

.category-group {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3rem;
}

 .category-btn {
    margin: auto;
}

.category-btn:before {
    transform: rotate(90deg) translateX(-50%);
}

/* ==========================================
サムズの特徴
========================================== */

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

.fudosan01-inner {
    max-width: 155rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 1.5rem;
    margin: auto;
}

.fudosan01-side-title {
    writing-mode: vertical-rl;
}

.fudosan01-area {
    max-width: 137rem;
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    margin: 10rem 0 0 4%;
}

.fudosan01-img-block {
    max-width: 52rem;
    width: 37.95%;
}

.fudosan01-text-block {
    max-width: 73rem;
    width: 53.28%;
}

.fudosan01-text-box {
    margin: 5rem 0 0;
}

/* ==========================================
対応エリア
========================================== */

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

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

.fudosan02-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fudosan02-img-block {
    max-width: 55rem;
    width: 45.08%;
}

.fudosan02-text-block {
    max-width: 61rem;
    width: 50%;
}

.fudosan02-text-box {
    margin: 4rem 0 0;
}

/* ==========================================
買いたい・借りたい
========================================== */

.sale-wrapper {
    padding: 8rem 0 15rem;
}

.sale-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sale-block-left {
    max-width: 58rem;
    flex: 1;
    margin: 15rem 1.25% 0 0;
}

.sale-block-center {
    max-width: 57rem;
    width: 40%;
}

.sale-title {
    writing-mode: vertical-rl;
    margin: auto;
}

.sale-text-box {
    margin: 4rem 0 0;
}

.sale-btn-group {
    max-width: 51.2rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
    margin: 5rem auto 0;
}

.sale-btn {
    width: 100%;
    margin: auto;
}

.sale-block-right {
    max-width: 51rem;
    flex: 1;
    margin: 23rem 0 0 2.28%;
}

.sale-img02 {
    max-width: 38rem;
    width: 74.5%;
    margin: 0 0 0 auto;
}

.sale-img03 {
    max-width: 26rem;
    width: 50.98%;
    margin: -3rem 0 0;
}

/* ==========================================
売りたい・貸したい・相談したい
========================================== */

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

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

.buy-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.buy-img-block {
    max-width: 52rem;
    width: 34.21%;
}

.buy-text-block {
    max-width: 88rem;
    width: 57.89%;
}

.buy-text-box {
    margin: 5rem 0 0;
}

.buy-circle-group {
    max-width: 100rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5rem;
    margin: 10rem auto 0;
}

.buy-circle {max-width: 30rem;width: 100%;border-radius: 50%;padding: 0.7rem;margin: auto;}

.buy-circle-inner {
    padding-top: 100%;
    border: solid 0.1rem;
    border-radius: 50%;
    position: relative;
}

.buy-circle-content {
    padding: 3rem 1.5rem;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.buy-circle-number-box {
    font-size: 0.9em;
    letter-spacing: 0.05em;
    line-height: 1em;
}

.buy-circle-number {
    font-size: 3rem;
    font-weight: normal;
    line-height: 1em;
    padding: 0 0 0.8rem;
    margin: 1rem 0 0;
    position: relative;
}

.buy-circle-number:before {
    content: "";
    max-width: 3.4rem;
    width: 100%;
    border-bottom: solid 0.1rem var(--tertiary);
    opacity: 0.5;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.buy-circle-title {
    font-size: 3rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: 1em;
    margin: 2rem 0 0;
}

.buy-circle-img {
    max-width: 10.8rem;
    width: 40%;
    aspect-ratio: 108/89;
    margin: 2rem auto 0;
    position: relative;
}

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

.buy-btn {
    margin: 5rem auto 0;
}

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

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



}

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

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

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



}

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

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

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

    /* ==========================================
    カテゴリ
    ========================================== */
    
    .category-group {
        grid-template-columns: repeat(1,1fr);
    }

    /* ==========================================
    買いたい・借りたい
    ========================================== */

    .sale-block-center {
        width: 55%;
    }
    
    .sale-block-left {
        margin: 10rem 1.25% 0 0;
    }
    
    .sale-block-right {
        margin: 15rem 0 0 2.28%;
    }

    /* ==========================================
    売りたい・貸したい・相談したい
    ========================================== */
    
    .buy-circle-number {
        font-size: 2.6rem;
    }
    
    .buy-circle-title {
        font-size: 2.6rem;
    }
	
}

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

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

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

    /* ==========================================
    カテゴリ
    ========================================== */

    .category-wrapper {
        padding: 10rem 0 0;
    }
    
    .category-group {
        gap: 2rem;
    }

    /* ==========================================
    サムズの特徴
    ========================================== */
    
    .fudosan01-wrapper {
        padding: 10rem 0 0;
    }
    
    .fudosan01-inner {
        display: block;
    }
    
    .fudosan01-side-title {
        margin: auto;
    }
    
    .fudosan01-area {
        display: block;
        margin: 4rem 0 0;
    }
    
    .fudosan01-img-block {
        max-width: 100%;
        width: 100%;
    }
    
    .fudosan01-text-block {
        max-width: 100%;
        width: 100%;
        margin: 4rem 0 0;
    }
    
    .fudosan01-text-box {
        margin: 3rem 0 0;
    }

    /* ==========================================
    対応エリア
    ========================================== */
    
    .fudosan02-wrapper {
        padding: 10rem 0 0;
    }
    
    .fudosan02-area {
        display: block;
    }
    
    .fudosan02-img-block {
        width: 100%;
        margin: auto;
    }
    
    .fudosan02-text-block {
        max-width: 100%;
        width: 100%;
        margin: 4rem 0 0;
    }
    
    .fudosan02-text-box {
        margin: 3rem 0 0;
    }

    /* ==========================================
    買いたい・借りたい
    ========================================== */

    .sale-wrapper {
        padding: 10rem 0;
    }
    
    .sale-inner {
        padding: 0 1.5rem;
    }
    
    .sale-area {
        display: block;
    }
    
    .sale-block-left {
        max-width: 100%;
        margin: 0;
    }
    
    .sale-block-center {
        max-width: 100%;
        width: 100%;
        margin: 6rem 0 0;
    }
    
    .sale-text-box {
        margin: 3rem 0 0;
    }
    
    .sale-btn-group {
        gap: 1.5rem;
        margin: 3rem auto 0;
    }
    
    .sale-block-right {
        max-width: 100%;
        margin: 6rem 0 0;
    }

    .sale-img02 {
        width: 60%;
    }
    
    .sale-img03 {
        width: 35%;
        margin: -10rem 0 0;
    }

    /* ==========================================
    売りたい・貸したい・相談したい
    ========================================== */

    .buy-wrapper {
        padding: 10rem 0;
    }
    
    .buy-area {
        display: block;
    }
    
    .buy-img-block {
        max-width: 100%;
        width: 100%;
    }
    
    .buy-text-block {
        max-width: 100%;
        width: 100%;
        margin: 4rem 0 0;
    }
    
    .buy-text-box {
        margin: 3rem 0 0;
    }
    
    .buy-circle-group {
        gap: 3rem;
        margin: 6rem auto 0;
    }
    
    .buy-circle-number {
        font-size: 2rem;
    }
    
    .buy-circle-title {
        font-size: 2rem;
    }

    .buy-btn {
        margin: 3rem auto 0;
    }
	
}

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

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

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

    /* ==========================================
    買いたい・借りたい
    ========================================== */

    .sale-btn-group {
        grid-template-columns: repeat(1,1fr);
    }
    
    .sale-btn {
        width: fit-content;
    }

    /* ==========================================
    売りたい・貸したい・相談したい
    ========================================== */

    .buy-circle-group {
        grid-template-columns: repeat(1,1fr);
    }
    
    .buy-circle {
        max-width: 24rem;
    }

}

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

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

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



}

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