@charset "utf-8";

/* 下層共通 */

.in-wrap {
    padding-top: 15rem;
    position: relative;
}

.in-bottom {
    padding-bottom: 18rem;
}


/* 下層カバー */
.in-cover {
    background: var(--white);
}

.in-cover-area {
    width: 100%;
    max-width: 181rem;
    margin: 0 0 0 auto;
    padding: 0 4rem;
}

.in-cover-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.in-cover-title-box {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 2rem 0 0;
}

.in-cover-title-box h1 {
    color: var(--primary);
    font-size: 6rem;
    line-height: 1.423em;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-family: var(--font-family02);
}

.in-cover-img-box {
    display: block;
    width: 55%;
    max-width: 95rem;
    margin: 0 0 -4rem 0;
}

/* ご相談の流れ */

.flow-step-box {
    display: flex;
    flex-wrap: wrap;
    gap: 7rem 0;
    margin: 6rem 0 0;
    padding: 0 10rem 0 0;
}

.flow-step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.flow-step-item:nth-of-type(4n-3) {
    z-index: 4;
}

.flow-step-item:nth-of-type(4n-2) {
    z-index: 3;
}

.flow-step-item:nth-of-type(4n-1) {
    z-index: 2;
}

.flow-step-item:nth-of-type(4n) {
    z-index: 1;
}

.flow-step-num-box {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 16rem;
    padding: 1.4rem 0 0;
    filter: drop-shadow(.8rem 0 0 var(--secondary));
}

.flow-step-num-box::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: calc(100% - 0.5px);
    height: 100%;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    aspect-ratio: 5/8;
    background-color: inherit;
}

.flow-step-item:nth-of-type(4n-3) .flow-step-num-box {
    background: var(--primary01);
}

.flow-step-item:nth-of-type(4n-2) .flow-step-num-box {
    background: var(--primary02);
}

.flow-step-item:nth-of-type(4n-1) .flow-step-num-box {
    background: var(--primary03);
}

.flow-step-item:nth-of-type(4n) .flow-step-num-box {
    background: var(--primary04);
}

.flow-step-num-box>p {
    padding: 0 0 0 3rem;
    font-size: 3rem;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--white);
    font-family: var(--font-family03);
    font-weight: 500;
}

.flow-step-num-box>p span {
    font-size: 266.7%;
}

.flow-step-text-box {
    position: relative;
    z-index: 10;
    flex: 1;
    width: 100%;
    max-width: 30rem;
    margin: -4rem 1rem 0 auto;
    padding: 4.5rem 1rem 3rem;
    background: var(--white);
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .1);
}

.flow-step-text-inner {
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
}

.flow-step-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family02);
    color: var(--primary);
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
}

.flow-step-text {
    margin: 2.2rem auto 0;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    line-height: 1.667em;
    font-weight: 400;
}

@-webkit-keyframes stepScale {
    from {
        transform: scale(0, 1);
    }

    to {
        transform: scale(1, 1);
    }
}

@keyframes stepScale {
    from {
        transform: scale(0, 1);
    }

    to {
        transform: scale(1, 1);
    }
}

.stepScale {
    transform-origin: left;
    -webkit-animation-name: stepScale;
    animation-name: stepScale;
}

.sp-arrow {
    display: none;
}

/* 不動産 */

.in-read-content {
    text-align: center;
}

.in-read-text {
    margin: 6rem 0 0;
}

/* ご相談ください */
.in-worry-title {
    text-align: center;
}

.in-worry-title .br-none {
    display: none;
}

.in-worry-title u {
    position: relative;
    font-size: 125%;
    text-decoration: none;
    color: var(--primary);
}

.in-worry-title u::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 1rem;
    width: 100%;
    background: var(--primary04);
    opacity: .4;
}

.in-worry-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 4rem 0 0;
}

.in-worry-illust {
    width: 20%;
    max-width: 18.6rem;
}

.in-worry-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6.5rem 3rem;
    flex: 1;
    max-width: 126rem;
}

.in-worry-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 14rem;
    padding: 2.4rem .5rem;
    border-radius: 1rem;
}

.in-worry-item:nth-of-type(2n - 1) {
    background: var(--primary04);
}

.in-worry-item:nth-of-type(2n) {
    background: var(--primary02);
}

.in-worry-item-text {
    font-size: 2.2rem;
    color: var(--white);
    line-height: 1.363;
    letter-spacing: 0.08em;
    text-align: center;
    font-weight: 500;
    font-family: var(--font-family02);
}

.in-worry-grid .in-worry-item::before {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
}

.broker-worry-grid .in-worry-item::before {
    right: 4.5rem;
    width: 3.4rem;
    aspect-ratio: 34/30;
}

.broker-worry-grid .in-worry-item:nth-of-type(2n - 1):before {
    background: url(../../../../uploads/fukidashi_tail04.svg) no-repeat top center /contain;
}

.broker-worry-grid .in-worry-item:nth-of-type(2n):before {
    background: url(../../../../uploads/fukidashi_tail05.svg) no-repeat top center /contain;
}

.estate-worry-grid .in-worry-item::before {
    right: 4.1rem;
    width: 4.6rem;
    aspect-ratio: 1/1;
}

.estate-worry-grid .in-worry-item:nth-of-type(2n - 1):before {
    background: url(../../../../uploads/fukidashi_tail01.svg) no-repeat top center /contain;
}

.estate-worry-grid .in-worry-item:nth-of-type(2n):before {
    background: url(../../../../uploads/fukidashi_tail02.svg) no-repeat top center /contain;
}

/* 寄り添う */

.in-point-sub-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 2.5rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-family: var(--font-family02);
}

.in-point-sub-title::before,
.in-point-sub-title::after {
    content: "";
    display: block;
    width: 2.1rem;
    aspect-ratio: 21/36;
}

.in-point-sub-title::before {
    background: url(../../../../uploads/title_deco01_left.png) no-repeat center /contain;
}

.in-point-sub-title::after {
    background: url(../../../../uploads/title_deco01_right.png) no-repeat center /contain;
}

.in-point-title.title35 {
    display: block;
    text-align: center;
    margin: 2rem auto 0;
}

.in-point-title u {
    position: relative;
    text-decoration: none;
}

.in-point-title u::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 1rem;
    width: 100%;
    background: var(--primary04);
    opacity: .4;
}

.in-point-title span {
    font-size: 114.28%;
}

.in-point-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 8rem 0 0;
}

.in-point-text-box {
    flex: 1;
    max-height: 70.5rem;
}

.in-point-img {
    position: relative;
    width: 40%;
    max-width: 48rem;
}

.in-point-img::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -5rem;
    bottom: -5rem;
    width: 100%;
    height: 100%;
    background: url(../../../../uploads/cmn_img_bg01.svg)no-repeat right bottom/cover;
}

.in-case-box {
    margin: 8rem 0 0;
}

.in-case-title.title30 {
    justify-content: flex-start;
    text-align: left;
    padding: 0 0 0 2rem;
    border-left: .8rem solid var(--primary);
}

.in-case-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 0;
    margin: 4rem 0 0;
}

.in-case-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19%;
    max-width: 25rem;
    aspect-ratio: 1/1;
    background: var(--primary);
    border-radius: 100%;
}

.in-case-item-text {
    font-size: 2.5rem;
    color: var(--white);
    line-height: 1.45;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-align: center;
}

.in-reason-title-box {
    position: relative;
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
}

.in-reason-title-illust {
    position: absolute;
    left: calc(100% + 2rem);
    top: -8rem;
    bottom: -8rem;
    display: flex;
    align-items: center;
    width: 13rem;
    aspect-ratio: 13/15;
    transform: rotate(15deg);
    margin: auto;
}

.in-reason-box {
    display: grid;
    gap: 9rem 5rem;
    margin: 10rem 0 0;
}

.in-reason-box-3col {
    grid-template-columns: repeat(3, 1fr);
}

.in-reason-box-2col {
    grid-template-columns: repeat(2, 1fr);
}

.in-reason-item {
    width: 100%;
    margin: 0;
    padding: 0 1.5rem 5rem;
    background: var(--white);
}

.in-reason-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: -4rem auto 0;
}

.in-reason-item-num {
    line-height: 1.4;
    letter-spacing: 0.05em;
    font-size: 6.5rem;
    font-weight: 700;
    font-family: var(--font-family03);
    color: var(--primary);
}

.in-reason-item-title {
    margin: 2rem 0 0;
    text-align: center;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1.33em;
    letter-spacing: 0.08em;
    color: var(--primary);
    font-family: var(--font-family02);
}

.in-reason-item-img {
    margin: 2.5rem 0 0;
    height: 14rem;
    max-width: 19.2rem;
}

.in-reason-item-img>img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
}

.in-reason-item-text-box {
    width: 100%;
    max-width: 40.8rem;
    margin: 3rem auto 0;
    padding: 3rem 0 0;
    border-top: .2rem dotted var(--primary);
}

.in-reason-box-2col .in-reason-item-text-box {
    max-width: 53.5rem;
}

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

@media screen and (width <=1440px) {}

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

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

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

    /* 下層カバー */
    .in-cover-area {
        padding: 0 2rem;
    }

    .in-cover-title-box h1 {
        font-size: 4.5rem;
    }

    /* ご相談の流れ */

    .flow-step-box {
        display: flex;
        padding: 0;
        gap: 10rem;
    }

    .flow-step-item {
        width: 100%;
        max-width: 60rem;
        margin: 0 auto;
        padding: 1.5rem 1.5rem 5rem;
        background: var(--white);
        box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .1);
        position: relative;
    }

    .flow-step-num-box {
        height: 10rem;
        padding: 0;
        filter: unset;
    }

    .flow-step-text-inner {
        width: 100%;
        max-width: 50rem;
        margin: 0 auto;
    }

    .flow-step-num-box>p {
        padding: 0;
        line-height: 1.6;
    }

    .flow-step-num-box>p span {
        font-size: 220%;
    }

    .flow-step-text-box {
        margin: 0 auto 0;
        max-width: 70rem;
        box-shadow: unset;
        padding: 0;
    }

    .flow-step-item:nth-of-type(4n-3) .flow-step-num-box,
    .flow-step-item:nth-of-type(4n-2) .flow-step-num-box,
    .flow-step-item:nth-of-type(4n-1) .flow-step-num-box,
    .flow-step-item:nth-of-type(4n) .flow-step-num-box {
        background: unset;
    }

    .flow-step-item:nth-of-type(4n-3) .flow-step-num-box>p {
        color: var(--primary01);
    }

    .flow-step-item:nth-of-type(4n-2) .flow-step-num-box>p {
        color: var(--primary02);
    }

    .flow-step-item:nth-of-type(4n-1) .flow-step-num-box>p {
        color: var(--primary03);
    }

    .flow-step-item:nth-of-type(4n) .flow-step-num-box>p {
        color: var(--primary04);
    }

    .sp-arrow {
        display: block;
        width: 5.8rem;
        margin: 3rem auto 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -7.5rem;
        width: 7%;
    }

    .stepScale {
        transform-origin: top;
        -webkit-animation-name: stepScale;
        animation-name: stepScale;
    }

    @-webkit-keyframes stepScale {
        from {
            transform: scale(0, 1);
        }

        to {
            transform: scale(1, 1);
        }
    }

    @keyframes stepScale {
        from {
            transform: scale(0, 1);
        }

        to {
            transform: scale(1, 1);
        }
    }

    .flow-step-title br {
        display: none;
    }

    /* 不動産 */

    .in-worry-item-text {
        font-size: 1.7rem;
    }

    /* 寄り添う */

    .in-point-sub-title {
        font-size: 2.2rem;
    }

    .in-point-img::before {
        right: -2rem;
        bottom: -2rem;
    }

    .in-case-item-text {
        font-size: 2rem;
    }

    .in-reason-box {
        gap: 8rem 1.5rem;
    }

    .in-reason-item-title {
        font-size: 2rem;
    }

    .in-reason-item-img {
        height: 12rem;
    }

}

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


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

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

    /* 下層共通 */
    .in-wrap {
        padding-top: 10rem;
    }

    .in-bottom {
        padding-bottom: 12rem;
    }


    /* 下層カバー */
    .in-cover-area {
        padding: 0;
    }

    .in-cover-box {
        flex-direction: column-reverse;
    }

    .in-cover-title-box {
        margin: 0;
        padding: 10rem 2rem;
    }

    .in-cover-title-box h1 {
        font-size: 3rem;
    }

    .in-cover-img-box {
        width: 100%;
        margin: 0;
    }

    /* ご相談の流れ */
    .flow-step-box {
        padding: 0 5rem 0 0;
    }

    .flow-step-num-box {
        align-items: center;
        height: 8rem;
        padding: 0;
    }

    .flow-step-num-box>p {
        font-size: 2.2rem;
    }

    .flow-step-text-box {
        margin: 0 auto;
    }

    .flow-step-text {
        font-size: 1.6rem;
    }

    /* 不動産 */
    .in-read-content {
        text-align: left;
    }

    .in-worry-box {
        margin: 3rem 0 0;
    }

    .in-worry-grid {
        gap: 4.5rem 1.5rem;
    }

    .estate-worry-grid .in-worry-item::before {
        right: auto;
        left: 2rem;
        width: 3rem;
    }

    .in-worry-item-text {
        font-size: 1.6rem;
        text-align: left;
    }

    .in-worry-item-text br {
        display: none;
    }


    /* 寄り添う */

    .in-point-sub-title {
        font-size: 2rem;
    }

    /* ケース */
    .in-case-item-text {
        font-size: 2rem;
    }

    .estate-case-flex {
        justify-content: space-evenly;
        gap: 1rem 1.4%;
    }

    .estate-case-flex .in-case-item {
        width: 32%;
    }

    /* 選ばれる理由 */
    .in-reason-title-illust {
        width: 10rem;
    }

    .in-reason-box {
        grid-template-columns: repeat(1, 1fr);
        gap: 6rem 1.5rem;
    }

    .in-reason-item-text-box {
        max-width: none;
    }

    .in-reason-item {
        padding: 0 5rem 5rem;
    }

}

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

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

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

    /* 下層カバー */
    .in-cover-title-box {
        padding: 6rem 0;
    }

    /* リード文 */
    .in-read-title .br-none {
        display: none;
    }

    /* ご相談ください */
    .in-worry-title.title40 {
        font-size: 2.3rem;
    }

    .in-worry-box {
        gap: 1rem;
        align-items: flex-end;
    }

    .in-worry-illust {
        width: 24%;
    }

    .in-worry-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem 1rem;
    }

    .in-worry-item {
        min-height: 4.5rem;
        padding: 1rem .8rem;
    }

    .broker-worry-grid .in-worry-item::before {
        right: auto;
        left: 2rem;
        width: 2rem;
    }

    .estate-worry-grid .in-worry-item::before {
        right: auto;
        left: 2rem;
        width: 2rem;
        top: calc(100% - 5px);
    }

    .in-worry-title .br-none {
        display: block;
    }

    .in-worry-item-text {
        font-size: 1.35rem;
        text-align: left;
    }



    /* 寄り添う */
    .in-point-sub-title {
        font-size: 1.8rem;
    }

    .in-point-title.title35 {
        font-size: 2.2rem;
        margin: 1rem auto 0;
    }

    .in-point-flex {
        margin: 4rem 0 0;
        flex-direction: column-reverse;
        gap: 4rem;
    }

    .in-point-img {
        width: 100%;
    }

    .in-point-text .br-none {
        display: none;
    }

    /* ケース */

    .in-case-flex {
        gap: 1rem 2%;
        justify-content: center;
    }

    .estate-case-flex {
        gap: 1rem 3.5%;
    }

    .in-case-item {
        width: 32%;
    }

    .estate-case-flex .in-case-item {
        width: 48%;
    }

    .in-case-item-text {
        font-size: 1.8rem;
    }

    /* 選ばれる理由 */
    .in-reason-title-illust {
        top: auto;
        left: calc(100% - 4rem);
        width: 7rem;
    }

    .in-reason-item {
        padding: 0 2rem 3rem;
    }


    /* ご相談の流れ */
    .flow-step-box {
        gap: 6rem;
        padding: 0;
    }

    .sp-arrow {
        bottom: -5rem;
    }

    .flow-step-item {
        width: 100%;
    }

    .flow-step-num-box {
        height: 5rem;
    }

    .flow-step-num-box>p {
        padding: 0;
        font-size: 2rem;
    }

    .flow-step-num-box>p span {
        font-size: 180%;
    }

    /* .flow-step-text-box {
        padding: 3.5rem 1rem 3rem;
    } */

    .flow-step-title br {
        display: block;
    }
}

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