@charset "UTF-8";
.main-build-home {
    margin: var(--main-mar-last);
    position: relative;
    z-index: -100;
    overflow-x: hidden;
}

.main-build-home .container {
    width: 94%;
    margin-inline: auto;
    position: relative;
    z-index: -90;
}

@media (max-width: 1023px) and (min-width: 769px) {
    .main-build-home .container {
        width: 96%;
    }
}

@media screen and (max-width:768px) {
    .main-build-home .container {
        width: 92%;
    }
}


/* ===============================================================
  共通のh2タイトル
=============================================================== */
.build-home-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    line-height: normal;
    margin: 0 0 35px 0;
}

.build-home-title .upper {
    color: var(--mstyle-main-color);
    font-size: var(--fz-24);
    font-weight: 700;
    padding: 0 0 8px 0;
    margin: 0 0 18px 0;
    position: relative;
}

.build-home-title .upper::before {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background: var(--mstyle-main-color);
    rotate: -43.75deg;
    bottom: 0;
    left: calc(50% + -2px);
}

.build-home-title .upper::after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background: var(--mstyle-main-color);
    rotate: 43.75deg;
    bottom: 0;
    right: calc(50% + -2px);
}

.build-home-title .upper span {
    position: relative;
}

.build-home-title .upper span::before {
    position: absolute;
    content: "";
    display: block;
    width: calc(50% - 8px);
    height: 2px;
    background: var(--mstyle-main-color);
    bottom: -4px;
    left: 0;
}

.build-home-title .upper span::after {
    position: absolute;
    content: "";
    display: block;
    width: calc(50% - 8px);
    height: 2px;
    background: var(--mstyle-main-color);
    bottom: -4px;
    right: 0;
}

.build-home-title .lower {
    --svg-width: 80px;
    --svg-va: -20px;
    font-size: var(--fz-56);
    font-weight: 700;
    line-height: normal;
}

.build-home-title .lower h2 {
    display: inline-block;
}

@media (max-width: 1023px) and (min-width: 769px) {
    .build-home-title .lower {
        --svg-width: 52px;
        --svg-va: -12px;
        font-size: var(--fz-40);
    }
}

@media screen and (max-width:768px) {
    .build-home-title {
        margin: 0 0 30px 0;
    }
    .build-home-title .upper {
        font-size: var(--fz-16);
    }
    .build-home-title .lower {
        --svg-width: 40px;
        --svg-va: -10px;
        font-size: clamp(1.5em, 0.429em + 5.36vw, 3em);
    }
}


/* ===============================================================
  FV & NAV
=============================================================== */
.fv figure {
    width: 88%;
    padding: 0 0 0 28px;
    margin: 135px 0 95px 0;
    position: relative;
}

.fv figure::before {
    position: absolute;
    content: "";
    display: block;
    width: 150px;
    aspect-ratio: 1;
    background: url(../../images/illust/illust-b-woman-thinking.webp) no-repeat center / contain;
    bottom: -25px;
    right: -14%;
}

.fv p {
    text-align: center;
    margin: 0 0 35px 0;
}

.fv-pic {
    height: 400px;
    border-radius: var(--base-radius);
    overflow: hidden;
    margin: 0 0 75px 0;
}

@media (max-width: 1023px) and (min-width: 769px) {
    .fv figure {
        margin: 100px 0 65px 0;
    }
    .fv figure::before {
        right: -17%;
    }
    .fv-pic {
        height: 280px;
    }
}

@media screen and (max-width:768px) {
    .fv {
        margin: 50px auto 50px auto;
    }
    .fv.inner {
        width: auto;
    }
    .fv figure {
        width: 100%;
        padding: 0 0 180px 0;
        margin: 0 auto;
    }
    .fv figure::before {
        bottom: 10px;
        right: 50%;
        transform: translate(50%, 0);
    }
    .fv-pic {
        height: 136px;
    }
}

.main-build-home .page-navigation {
    border-top: 2px solid var(--mstyle-main-color);
    border-bottom: 2px solid var(--mstyle-main-color);
    padding: 35px 0;
    margin: 0 0 75px 0;
}

.main-build-home .page-navigation ul {
    display: flex;
    justify-content: center;
    gap: 15px 35px;
}

.main-build-home .page-navigation li {
    width: 117px;
    height: 117px;
}

.main-build-home .page-navigation a {
    --svg-color: var(--mstyle-main-color);
    --svg-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px 0;
    line-height: normal;
    background: var(--mstyle-light-grey-color);
    border-radius: var(--base-radius);
    box-shadow: var(--box-shadow-n1);
    padding: 21px 0 11px 0;
    transition: var(--transition-main);
}

.main-build-home .page-navigation a span {
    font-size: var(--fz-14);
    border-bottom: 2px solid var(--mstyle-main-color);
}

.main-build-home .page-navigation a svg:last-child {
    --svg-width: 16px;
    rotate: 90deg;
        transition: var(--transition-main);
}

@media (hover: hover) {
    .main-build-home .page-navigation a:hover {
        opacity: .75;
        box-shadow: var(--box-shadow-n1-hov);
        transform: translate(1px, 1px);
    }
    .main-build-home .page-navigation a:hover svg:last-child {
        transform: translateX(3px);
    }
}

@media (max-width: 1023px) and (min-width: 769px) {
    .main-build-home .page-navigation ul {
        flex-wrap: wrap;
        gap: 28px 28px;
    }
    .main-build-home .page-navigation li {
        width: 25%;
        min-width: 117px;
        height: auto;
    }
}

@media screen and (max-width:768px) {
    .main-build-home .page-navigation {
        margin: 0 0 50px 0;
    }
    .main-build-home .page-navigation ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        justify-items: start;
        gap: 1rem;
        width: 92%;
        margin: 0 auto;
    }
    .main-build-home .page-navigation li {
        width: 100%;
        height: auto;
        min-height: 100px;
        aspect-ratio: 1;
    }
    .main-build-home .page-navigation a {
        --svg-width: 40px;
        height: 100%;
        gap: 2px 0;
        border-bottom: 16px solid var(--mstyle-light-green-color);
        padding: 0;
        position: relative;
    }
    .main-build-home .page-navigation a span {
        font-size: var(--fz-12);
        letter-spacing: -.05em;
        border: none;
    }
    .main-build-home .page-navigation a svg:last-child {
        position: absolute;
        bottom: -18px;
    }
}


/* ===============================================================
  Strength
=============================================================== */
.sec-our-strength .strength-1 {
    text-align: center;
    background: var(--mstyle-light-green-color);
    border-radius: var(--base-radius);
    padding: 65px 0 45px 0;
    margin: 0 0 80px 0;
}

.sec-our-strength .strength-2 {
    text-align: center;
    margin: 0 0 90px 0;
}

.sec-our-strength .strength-3 {
    text-align: center;
    background: var(--mstyle-light-green-color);
    border-radius: var(--base-radius);
    padding: 65px 0 45px 0;
    margin: 0 0 80px 0;
}

.sec-our-strength h2 {
    --svg-width: 32px;
    --svg-va: -8px;
    font-size: var(--fz-24);
    font-weight: 700;
    margin: 0 0 54px 0;
}

.sec-our-strength figure {
    width: 300px;
    aspect-ratio: 1;
    margin: 0 auto 30px auto;
    position: relative;
}

.sec-our-strength figure img {
    border-radius: 50%;
}

.sec-our-strength figure::after {
    position: absolute;
    content: "";
    display: block;
    width: 93%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--mstyle-blue-color);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.sec-our-strength figure .numbering {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px 0;
    width: 78px;
    aspect-ratio: 1;
    color: var(--white-color);
    font-size: var(--fz-24);
    font-weight: 500;
    font-family: var(--font-family-lato);
    line-height: normal;
    background: var(--mstyle-sub-brown-color);
    border-radius: 50%;
    left: 50%;
    top: -35px;
    transform: translate(-50%, 0);
    z-index: 10;
}

.sec-our-strength figure .numbering span {
    font-size: var(--fz-16);
    position: relative;
}

.sec-our-strength figure .numbering span::after {
    position: absolute;
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white-color);
    border-radius: 5px;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%, 0);
}

@media (max-width: 1023px) and (min-width: 769px) {
}

@media screen and (max-width:768px) {
    .sec-our-strength div[class^="strength-"] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
    }
    .sec-our-strength .strength-1,
    .sec-our-strength .strength-2 {
        padding: 56px 30px 35px 30px;
        margin: 0 0 30px 0;
    }
    .sec-our-strength .strength-3 {
        padding: 56px 30px 35px 30px;
        margin: 0 0 50px 0;
    }
    .sec-our-strength h2 {
        order: 2;
        font-size: var(--fz-20);
        margin: 0 0 20px 0;
    }
    .sec-our-strength h2 svg {
        display: none;
    }
    .sec-our-strength figure {
        order: 1;
        width: 72%;
        max-width: 230px;
    }
    .sec-our-strength p {
        order: 3;
    }
}


/* ===============================================================
  Construction-flow
=============================================================== */

.sec-construction-flow {
    margin: var(--sec-mar-base);
}

.sec-construction-flow .construction-flow {
    margin: 0 0 150px 0;
}

.sec-construction-flow .construction-flow > div {
    display: flex;
    justify-content: center;
    gap: 0 50px;
}

.sec-construction-flow .construction-flow .pic-area {
    display: flex;
    align-items: center;
    gap: 0 38px;
}

.sec-construction-flow .construction-flow .pic-area .step {
    width: 73px;
}

.sec-construction-flow .construction-flow .pic-area .pic {
    width: 250px;
    height: 167px;
    border-radius: var(--base-radius);
    overflow: hidden;
}

.sec-construction-flow .construction-flow .text {
    padding: 30px 0 0 0;
    position: relative;
}

.sec-construction-flow .construction-flow .text::after {
    position: absolute;
    content: "";
    display: block;
    width: 150px;
    aspect-ratio: 1;
    background-image: var(--flow-illust);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    bottom: 0;
    right: -25%;
}

.sec-construction-flow .construction-flow .flow-1 {
    --flow-illust: url(../../images/illust/illust-b-man-computer.webp);
}
.sec-construction-flow .construction-flow .flow-3 {
    --flow-illust: url(../../images/illust/illust-b-woman-explain.webp);
}
.sec-construction-flow .construction-flow .flow-5 {
    --flow-illust: url(../../images/illust/illust-b-shake-hands.webp);
}
.sec-construction-flow .construction-flow .flow-6 {
    --flow-illust: url(../../images/illust/illust-b-construction-worker.webp);
}
.sec-construction-flow .construction-flow .flow-8 {
    --flow-illust: url(../../images/illust/illust-b-man-aftercare.webp);
}

.sec-construction-flow .construction-flow .flow-8 .text {
    padding: 57px 0 0 0;
}

.sec-construction-flow .construction-flow .title-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 5px 0;
}

.sec-construction-flow .construction-flow .title-area h3 {
    --svg-width: 32px;
    --svg-va: -7px;
    font-size: var(--fz-24);
    font-weight: 700;
}

.sec-construction-flow .construction-flow .title-area h3 span {
    font-size: var(--fz-16);
}

.sec-construction-flow .construction-flow .title-area .period {
    display: grid;
    place-items: center;
    color: var(--white-color);
    font-size: var(--fz-12);
    background: var(--mstyle-main-color);
    border-radius: var(--base-radius);
    padding: 1px 16px;
}

.sec-construction-flow .construction-flow .text p {
    width: 400px;
}

.sec-construction-flow .lined-btn-area {
    --btn-large-any-color: var(--white-color);
    --btn-large-any-bgcolor: var(--mstyle-blue-color);
}

@media (max-width: 1023px) and (min-width: 769px) {
    .sec-construction-flow .construction-flow .text::after {
        width: 130px;
        right: 0;
    }
}

@media screen and (max-width:768px) {
    .sec-construction-flow > .inner {
        display: contents;
    }
    .sec-construction-flow .construction-flow {
        width: 100%;
        max-width: 348px;
        margin: 0 auto 250px auto;
    }
    .sec-construction-flow .construction-flow > div {
        align-items: center;
        flex-direction: column;
        background: var(--mstyle-main-color);
        border-radius: var(--base-radius);
        padding: 0 0 45px 0;
        margin: 0 0 125px 0;
        position: relative;
    }
    .sec-construction-flow .construction-flow > div::before {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 360 / 119;
        background-image: url(../../images/illust/illust-step-back-sp.webp);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        top: -100px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: -1;
    }
    .sec-construction-flow .construction-flow > div::after {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 360 / 119;
        background-image: var(--step-bg-bottom);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        bottom: -77px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .sec-construction-flow .construction-flow .flow-8::after {
        width: 101.5%;
        aspect-ratio: 360 / 214;
        bottom: -174px;
    }
    .sec-construction-flow .construction-flow .flow-1 {
        --step-bg-bottom: url(../../images/illust/illust-step-1-sp.webp);
        --period-sp: "1ヶ月～";
        padding:56px 0 45px 0;
    }
    .sec-construction-flow .construction-flow .flow-2 {
        --step-bg-bottom: url(../../images/illust/illust-step-2-sp.webp);
        --period-sp: "1ヶ月～";
    }
    .sec-construction-flow .construction-flow .flow-3 {
        --step-bg-bottom: url(../../images/illust/illust-step-3-sp.webp);
        --period-sp: "1～3ヶ月";
    }
    .sec-construction-flow .construction-flow .flow-4 {
        --step-bg-bottom: url(../../images/illust/illust-step-4-sp.webp);
        --period-sp: "1～3ヶ月";
    }
    .sec-construction-flow .construction-flow .flow-5 {
        --step-bg-bottom: url(../../images/illust/illust-step-5-sp.webp);
        --period-sp: "2～3ヶ月";        
    }
    .sec-construction-flow .construction-flow .flow-6 {
        --step-bg-bottom: url(../../images/illust/illust-step-6-sp.webp);
        --period-sp: "4～6ヶ月";
    }
    .sec-construction-flow .construction-flow .flow-7 {
        --step-bg-bottom: url(../../images/illust/illust-step-7-sp.webp);
        --period-sp: "完成！";
    }
    .sec-construction-flow .construction-flow .flow-8 {
        --step-bg-bottom: url(../../images/illust/illust-step-8-sp.webp);
        --period-sp: "お引渡し後";
    }
    .sec-construction-flow .construction-flow .flow-1::before {
        content: none;
    }
    .sec-construction-flow .construction-flow .pic-area .step {
        display: none;
    }
    .sec-construction-flow .construction-flow .pic-area {
        width: 80%;
    }
    .sec-construction-flow .construction-flow .pic-area .pic {
        width: 100%;
        overflow: visible;
        position: relative;
    }
    .sec-construction-flow .construction-flow .pic-area .pic img {
        border-radius: inherit;
    }
    .sec-construction-flow .construction-flow .pic-area .pic::before {
        position: absolute;
        content: var(--period-sp);
        display: block;
        color: var(--mstyle-main-color);
        font-size: var(--fz-12);
        font-weight: 700;
        line-height: normal;
        background: var(--white-color);
        border-radius: var(--base-radius);
        padding: 4px 16px;
        top: -30px;
        right: 0;
    }
    .sec-construction-flow .construction-flow .text {
        width: 80%;
        padding: 30px 0 10px 0;
    }
    .sec-construction-flow .construction-flow .text::after {
        content: none;
    }
    .sec-construction-flow .construction-flow .text p {
        width: 100%;
        height: 108px;
        color: var(--white-color);
    }
    .sec-construction-flow .construction-flow .title-area h3 {
        --svg-width: 28px;
        --svg-color: var(--white-color);
        color: var(--white-color);
        font-size: var(--fz-20);
    }
    .sec-construction-flow .construction-flow .title-area .period {
        display: none;
    }
}

@media screen and (max-width:375px) {
    .sec-construction-flow .construction-flow > div::after {
        bottom: -70px;
    }
}


/* ===============================================================
  Const-ex
=============================================================== */

.sec-const-ex {
    --btn-large-any-color: var(--white-color);
    --btn-large-any-bgcolor: var(--mstyle-blue-color);
    background: var(--mstyle-light-grey-color);
    border-radius: var(--base-radius);
    padding: var(--sec-pad-image);
    margin: var(--sec-mar-image);
}

.sec-const-ex .below-title {
    text-align: center;
    margin: 0 0 90px 0;
}

.sec-const-ex .case-cards {
    display: flex;
    justify-content: center;
    gap: 0 45px;
    width: 100%;
    margin: 0 auto 150px auto;
}

.sec-const-ex .case-cards .case-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 35px 0;
}

.sec-const-ex .case-cards .case-card .thumbnail {
    display: grid;
    place-items: center;
    width: 280px;
    aspect-ratio: 3 / 2;
    border-radius: var(--base-radius);
    background: var(--mstyle-light-green-color);
    overflow: hidden;
    margin: 0 0 12px 0;
}

.sec-const-ex .case-cards .case-card h3 {
    width: 280px;
    font-weight: 700;
    line-height: 150%;
}

.sec-const-ex .case-cards .case-card p {
    font-size: var(--fz-12);
}

.sec-const-ex .case-cards .case-card a {
    transition: var(--transition-main);
}

.sec-const-ex .case-cards .case-card a.link {
    --svg-width: 24px;
    --svg-va: -7px;
    font-size: var(--fz-14);
}

@media (hover: hover) {
    .sec-const-ex .case-cards .case-card a:hover {
        opacity: .75;
    }
}

@media (max-width: 1023px) and (min-width: 769px) {
    .sec-const-ex .case-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        justify-items: start;
        gap: 100px 35px;
        width: 94%;
    }
    .sec-const-ex .case-cards .case-card {
        width: 100%;
    }
    .sec-const-ex .case-cards .case-card .thumbnail,
    .sec-const-ex .case-cards .case-card h3 {
        width: auto;
    }
    .sec-const-ex .case-cards .case-card .thumbnail a {
        width: 100%;
        text-align: center;
    }
    .sec-const-ex .case-cards .case-card .thumbnail .case-no-image {
        min-width: 150px;
        width: 65%;
        max-width: 200px;
    }
}

@media screen and (max-width:768px) {
    .sec-const-ex .below-title {
        margin: 0 0 50px 0;
    }
    .sec-const-ex .case-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        justify-items: center;
        gap: 50px 25px;
        width: 80%;
        margin: 0 auto 50px auto;
    }
    .sec-const-ex .case-cards .case-card {
        display: block;
        width: 100%;
        box-shadow: var(--box-shadow-card);
        border-radius: var(--base-radius);
        background: var(--white-color);
    }
    .sec-const-ex .case-cards .case-card > div {
        display: contents;
    }
    .sec-const-ex .case-cards .case-card .thumbnail {
        width: 100%;
        border-radius: 8px 8px 0 0;
        margin: 0 0 25px 0;
    }
    .sec-const-ex .case-cards .case-card h3 {
        width: auto;
        padding: 0 25px 5px 25px;
    }
    .sec-const-ex .case-cards .case-card p {
        line-height: normal;
        padding: 0 25px 30px 25px;
    }
    .sec-const-ex .case-cards .case-card .thumbnail a {
        width: 100%;
        text-align: center;
    }
    .sec-const-ex .case-cards .case-card .thumbnail .case-no-image {
        min-width: 150px;
        width: 65%;
        max-width: 200px;
    }
    .sec-const-ex .case-cards .case-card a.link {
        display: block;
        padding: 0 20px 25px 20px;
    }
}


/* ===============================================================
  sec-faq
=============================================================== */
.sec-faq {
    --btn-large-any-color: var(--white-color);
    --btn-large-any-bgcolor: var(--mstyle-blue-color);
    margin: var(--sec-mar-base);
}

.sec-faq .build-home-title .lower {
    position: relative;
}

.sec-faq .build-home-title .lower::after {
    position: absolute;
    content: "";
    display: block;
    width: 150px;
    aspect-ratio: 1;
    background: url(../../images/illust/illust-b-man-question.webp) no-repeat center / contain;
    bottom: -39px;
    right: -188px;
}

.sec-faq .btn-area {
    position: relative;
}

.sec-faq .btn-area::before {
    position: absolute;
    content: "";
    display: block;
    width: 150px;
    aspect-ratio: 1;
    background: url(../../images/illust/illust-b-woman-inspiration.webp) no-repeat center / contain;
    bottom: -39px;
    left: calc(50% - 350px);
}
@media (max-width: 1023px) and (min-width: 769px) {
}

@media screen and (max-width:768px) {
    .sec-faq .btn-area::before,
    .sec-faq .build-home-title .lower::after {
        content: none;
    }
}


/* ===============================================================
  faq-accordion style  ■ BEGIN ■
=============================================================== */
.sec-faq .faq-list {
  margin: 0 0 90px 0;
}

.sec-faq .faq-list .faq-item {
  width: 850px;
  background: var(--mstyle-light-green-color);
  border-radius: var(--base-radius);
  box-shadow: var(--box-shadow-n1);
  padding: 0;
  margin: 0 auto 25px auto;
  position: relative;
}

.sec-faq .faq-list .faq-item::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 55px;
  background: var(--mstyle-light-green-color);
  clip-path: polygon(50% 0%,
      0% 100%,
      100% 100%);
  border-radius: 1px 1px 0 0;
  top: 33px;
  left: -33px;
  rotate: -115deg;
}

.sec-faq .faq-question {
  --svg-width: 24px;
  --svg-color: var(--mstyle-text-color);
  display: flex;
  align-items: center;
  width: 100%;
  font-weight: 700;
  line-height: normal;
  background: none;
  cursor: pointer;
  position: relative;
  padding: 20px 65px 20px 35px;
  margin: 0;
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec-faq .faq-question[aria-expanded="true"] {
  margin: 0 0 25px 0;
  position: relative;
}

.sec-faq .faq-question span {
  flex-shrink: 0;
  width: 96px;
  color: var(--mstyle-blue-color);
  font-size: var(--fz-32);
  font-family: var(--font-family-lato);
  padding: 0 70px 0 0;
  position: relative;
}

.sec-faq .faq-question span::after {
  position: absolute;
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: var(--mstyle-blue-color);
  bottom: 50%;
  right: 34px;
  transform: translate(0, 50%);
}

.sec-faq .faq-question svg {
  position: absolute;
  right: 25px;
  bottom: 35%;
  transform: rotate(90deg);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec-faq .faq-question[aria-expanded="true"] svg {
  transform: rotate(-90deg)
}

.sec-faq .faq-item .faq-answer {
  display: flex;
  max-height: 0;
  opacity: 0;
  padding: 0 65px 0 35px;
  position: relative;
  transition: 
    max-height .4s cubic-bezier(0.23, 1, 0.32, 1),
    opacity .4s cubic-bezier(0.23, 1, 0.32, 1),
    padding 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec-faq .faq-item .faq-answer::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 55px;
  background: var(--mstyle-light-green-color);
  clip-path: polygon(50% 0%,
      0% 100%,
      100% 100%);
  border-radius: 1px 1px 0 0;
  bottom: -3px;
  right: -34px;
  rotate: 115deg;
}

.sec-faq .faq-item .faq-answer::after {
  position: absolute;
  content: "";
  display: block;
  width: 96%;
  height: 2px;
  background: var(--white-color);
  top: -24px;
  left: 50%;
  transform: translate(-50%, 0);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec-faq .faq-item .faq-answer.is-open {
  max-height: 600px;
  /* 十分大きな値にしておく */
  padding: 0 65px 20px 35px;
  opacity: 1;
}

.sec-faq .faq-item .faq-answer span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 96px;
  color: var(--mstyle-red-color);
  font-size: var(--fz-32);
  font-family: var(--font-family-lato);
  padding: 0 70px 0 0;
  position: relative;
}

.sec-faq .faq-item .faq-answer span::after {
  position: absolute;
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: var(--mstyle-red-color);
  bottom: 50%;
  right: 34px;
  transform: translate(0, 50%);
}

.sec-faq .faq-item .faq-answer p {
  font-size: var(--fz-14);
  line-height: 165%;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .sec-faq .faq-list {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .sec-faq .faq-list .faq-item {
    width: 92%;
  }
}

@media screen and (max-width:768px) {
  .sec-faq .faq-list {
    margin: 0 0 50px 0;
  }
  .sec-faq .faq-list .faq-item {
    width: 95%;
    margin: 0 auto 25px auto;
  }
  .sec-faq .faq-list .faq-item::before {
    top: 33px;
    left: -26px;
  }
  .sec-faq .faq-question {
    gap: 0 32px;
    font-size: var(--fz-14);
    padding: 20px 42px 20px 18px;
    position: relative;
  }
  .sec-faq .faq-question::before {
    position: absolute;
    content: "";
    display: block;
    width: 2px;
    height: calc(100% - 20px * 2);
    background: var(--mstyle-blue-color);
    bottom: 50%;
    left: 49px;
    transform: translate(0, 50%);
  }
  .sec-faq .faq-question span {
    width: auto;
    font-size: var(--fz-24);
    padding: 0;
  }
  .sec-faq .faq-question svg {
    right: 8px;
    bottom: 50%;
    translate: 0 50%;
  }
  .sec-faq .faq-question span::after {
    content: none;
  }
  .sec-faq .faq-item .faq-answer {
    gap: 32px;
    padding: 0 42px 0 18px;
  }
  .sec-faq .faq-item .faq-answer::before {
    right: -24px;
  }
  .sec-faq .faq-item .faq-answer span {
    width: auto;
    font-size: var(--fz-24);
    padding: 0;
  }
  .sec-faq .faq-item .faq-answer span::after {
    right: -16.5px;
  }
  .sec-faq .faq-item .faq-answer.is-open {
    padding: 0 42px 20px 18px;
  }
}

/* ===============================================================
  faq-accordion style  ■ END ■
=============================================================== */


/* ===============================================================
  search-land
=============================================================== */
.sec-search-land {
    --btn-large-any-color: var(--white-color);
    --btn-large-any-bgcolor: var(--mstyle-blue-color);
    background: url(../../images/pictures/pic-vacant-land.webp) no-repeat center / cover;
    border-radius: var(--base-radius);
    padding: var(--sec-pad-image);
    margin: var(--sec-mar-image);
    position: relative;
    z-index: -10;
}

.sec-search-land::before {
    position: absolute;
    content: "";
    display: block;
    inset: 0;
    background: var(--white-color);
    opacity: .81;
    z-index: -5;
}

.sec-search-land p {
    text-align: center;
    margin: 0 0 90px 0;
}

@media (max-width: 1023px) and (min-width: 769px) {
}

@media screen and (max-width:768px) {
    .sec-search-land p {
        margin: 0 0 30px 0;
    }
}


/* ===============================================================
  sec-contact（ベースはcommon.cssに記述済み）
=============================================================== */
.sec-contact .below-title {
    text-align: center;
}

.sec-contact .contact-module {
    margin: 100px 0 0 0;
}

.sec-contact .contact-module .btn-wrapper {
    --btn-large-any-color: var(--white-color);
    --btn-large-any-bgcolor: var(--mstyle-blue-color);
}

@media screen and (max-width:768px) {
    .sec-contact .contact-module {
        margin: 73px 0 0 0;
    }
    .sec-contact .build-home-title .lower .element-for-sp {
        display: inline-block !important;
    }
}