@charset "utf-8";


body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
}

#contents *{
	font-family: 'Zen Old Mincho','Zen Kaku Gothic New','Noto Sans JP', 'Great Vibes', sans-serif;
}

@font-face {
    font-family: 'Zen Old Mincho';
    src: url(/fonts/ZenOldMincho-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Zen Old Mincho';
    src: url(/fonts/ZenOldMincho-Medium.ttf);
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Zen Old Mincho';
    src: url(/fonts/ZenOldMincho-SemiBold.ttf);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Zen Kaku Gothic New';
    src: url(/fonts/ZenKakuGothicNew-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Zen Kaku Gothic New';
    src: url(/fonts/ZenKakuGothicNew-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Medium.woff2);
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Great Vibes';
    src: url(/fonts/GreatVibes-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}

/* 打ち消し・共通 */
#contents{
    width: 100%;
    padding: 0;
    background: #FFF;
}

.l-main {
    padding: 0;
    width: 100%;
    background: #FFF;
    overflow: hidden;
}


.l-page {
}
.company {
}
.ui-bg-white {
}
[class*="content__wrapper--"]{
    padding-top: 150px;
}

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

[class*="content__container--"]{
    margin-top: 35px;
}
.main__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.sub__ttl {
    color: #063857;
    font-family: "Zen Old Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.98px;
}

.main__ttl {
    color: #333;
    font-family: "Zen Old Mincho";
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

.view__all--btn {
    overflow: hidden;
    text-align: center;
    font-family: "Zen Old Mincho";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 300px;
    height: 60px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
}
    .view__all--btn svg {
        flex-shrink: 0;
        width: 32px;
        height: 5px;
        fill: none;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 27px;
    }

/* メイン画像 */
.mv_img {
    height: 911px;
}

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

/* このようなお悩みございませんか？ */
.content__wrapper--worries {
    height: 1033px;
}
.content__inner--worries {
}
.worries__container {
    position: relative;
}

.worries__img--wrap {
    position: absolute;
    left: -390px;
}

.worries__txt--wrap {
    
}

.content__wrapper--worries .main__title{
    align-items: unset;
}
    .content__wrapper--worries .sub__ttl,
    .content__wrapper--worries .main__ttl{
        color: #FFF;
    }

.worries__txt--container {
    background: #254E72;
    display: flex;
    width: 1050px;
    padding: 141px 364px 162px 70px;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    position: absolute;
    right: -389px;
}

.worries__txt--wrap{
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-left: 37px;
}

.worries__txt {
    color: #FFF;
    font-family: "Zen Old Mincho";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    position: relative;
}
    .worries__txt::before{
        content: "";
        position: absolute;
        top: 8px;
        left: -36px;
        width: 27px;
        height: 21px;
        background: url(../images/check_icon.svg) no-repeat center / cover;
    }


/* 中古物件×リノベーションならお任せください！ */
.content__wrapper--service {
    padding-top: 142px;
}
.content__inner--service {
}

.content__wrapper--service .main__title,
.service__headline,
.service__list{
    z-index: 1;
    position: relative;
}
.service__headline {
    color: #333;
    text-align: center;
    font-family: "Zen Old Mincho";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    padding-top: 35px;
}
.content__container--service {
    margin-top: 33px;
    position: relative;
}
    .content__container--service::before{
        content: "";
        position: absolute;
        top: -290px;
        left: -390px;
        width: 886px;
        height: 610px;
        background: #F9F9F9;
    }
.service__list {
    display: flex;
    justify-content: center;
    gap: 30px;
    counter-reset: count;
}

.service__item {
}
.service__img--wrap {
}
.service__text--wrap {
    background: #254E72;
    width: 360px;
    height: 277px;
    padding: 69px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}
    .service__text--wrap::before{
        content: counter(count , decimal-leading-zero);
        counter-increment: count;
        color: #A0BFD2;
        font-family: "Great Vibes";
        font-size: 50px;
        font-style: normal;
        font-weight: 400;
        line-height: 36px;
        position: absolute;
        top: 29px;
    }

.service__ttl {
    color: #FFF;
    font-family: "Zen Old Mincho";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

#contents .service__txt {
    color: #FFF;
    font-family: "Zen Kaku Gothic New";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.65;
}

/* 選ばれ続ける理由 */
.content__wrapper--reason {
    padding: 142px 0 248px;
}
.content__inner--reason {
}
.content__container--reason {
}
.reason__list {
    counter-reset: count;
}

.reason__item {
    display: flex;
    position: relative;
}
    .reason__item:nth-child(even){
        flex-direction: row-reverse;
    }
    .reason__item:nth-child(2){
        margin-top: 114px;
    }
    .reason__item:nth-child(3){
        margin-top: 154px;
    }

.reason__img--wrap {
    width: 570px;
    height: 300px;
}
.reason__txt--wrap {
    background: #254E72;
    width: 740px;
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 79px;
    right: 0;
}
    .reason__item:nth-child(even) .reason__txt--wrap{
        right: 400px;
    }

.reason__ttl {
    color: #FFF;
    font-family: "Zen Old Mincho";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}
    .reason__ttl::before{
        content: "Reason" counter(count ,decimal-leading-zero);
        counter-increment: count;
        color: #8A9FB2;
        font-family: "Great Vibes";
        font-size: 50px;
        font-style: normal;
        font-weight: 400;
        line-height: 36px;
        position: absolute;
        top: -24px;
        right: 0;
    }
    .reason__item:nth-child(even) .reason__ttl::before{
        right: 569px;
    }
#contents .reason__txt {
    color: #FFF;
    font-family: "Zen Kaku Gothic New";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.65;
    padding-left: 31px;
    position: relative;
}
    .reason__txt::before{
        content: "";
        position: absolute;
        top: 0;
        left: 13px;
        width: 1px;
        height: 129px;
        background-color: #FFF;
    }
/* リノベーション事例紹介 */
.content__wrapper--example {
    background: url(../images/example_bg.webp) no-repeat center / cover;
    padding: 142px 0 150px;
    overflow: hidden;
}
.content__inner--example {
    width: 100%;
}
.content__inner--example .main__title {
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.content__wrapper--example .sub__ttl,
.content__wrapper--example .main__ttl{
    color: #FFF;
}
.content__container--example {
    width: 100%;
    margin-top: 35px;
}
.js-exampleSwiper {
    width: 100%;
}
.js-exampleSwiper .swiper-wrapper {
    align-items: center;
}
/* 中央: 1140px / 左右: 約82.6%（Figma 942×360） */
.js-exampleSwiper .swiper-slide {
    width: 1140px;
    box-sizing: border-box;
    transition: transform 0.4s ease;
    transform: scale(0.826);
}
.js-exampleSwiper .swiper-slide-active {
    transform: scale(1);
    z-index: 2;
}

.blog__item {
    background: #FFF;
    padding: 40px;
    width: 1140px;
    box-sizing: border-box;
}
    .blog__item a{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

.blog__img--wrap {
    position: relative;
    flex-shrink: 0;
    width: 552px;
    height: 356px;
}
.blog__img--wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog__txt--wrap {
    width: 478px;
    flex-shrink: 0;
}

.date {
    color: #063857;
    font-family: "Zen Old Mincho";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}
.blog__ttl {
    overflow: hidden;
    color: #063857;
    text-overflow: ellipsis;
    font-family: "Zen Old Mincho";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 20px;
}

.blog__txt {
    overflow: hidden;
    color: #000;
    text-overflow: ellipsis;
    font-family: "Zen Kaku Gothic New";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    margin-top: 15px;
}

.content__wrapper--example .swiper__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}
.content__wrapper--example .swiper__controls .swiper-button-prev,
.content__wrapper--example .swiper__controls .swiper-button-next,
.content__wrapper--example .swiper__controls .swiper-pagination {
    position: unset;
    margin: 0;
}
.content__wrapper--example .swiper__controls .swiper-button-prev,
.content__wrapper--example .swiper__controls .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 13px;
    height: 21px;
    color: #FFF;
    cursor: pointer;
}
.content__wrapper--example .swiper__controls .swiper-button-prev.swiper-button-disabled,
.content__wrapper--example .swiper__controls .swiper-button-next.swiper-button-disabled {
    opacity: 1;
}
.content__wrapper--example .swiper__controls .swiper-button-prev::after,
.content__wrapper--example .swiper__controls .swiper-button-next::after {
    content: none;
}
.content__wrapper--example .swiper__controls .swiper-button-prev svg,
.content__wrapper--example .swiper__controls .swiper-button-next svg {
    display: block;
    width: 13px;
    height: 21px;
    fill: none;
}
.content__wrapper--example .swiper__controls .swiper-pagination {
    width: fit-content;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.65;
    color: #FFF;
}
.content__wrapper--example .more__btn--example {
    margin-top: 32px;
}
.content__wrapper--example .view__all--btn{
    color: #FFF;
    border: 1px solid #FFF;
}
    .content__wrapper--example .view__all--btn:hover{
        opacity: 1;
        background: #fff;
        color: #063857;
    }

/* お渡しまでの流れ */
.content__wrapper--flow {
    padding-top: 142px;
}
.content__inner--flow {
}
.content__container--flow {
    margin-top: 33px;
}

.flow__list {
    display: flex;
    justify-content: center;
    gap: 20px;
    counter-reset: count;
    position: relative;
}
    .flow__list::before{
        content: "";
        position: absolute;
        top: 271px;
        right: 144px;
        width: 858px;
        height: 23px;
        background: url(../images/flow_arrow.svg) no-repeat center / cover;
        z-index: 1;
    }

.flow__item {
    width: 146px;
    height: 563px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 30px 20px 0 21px;
    background: #F4F9FF;
    position: relative;
    z-index: 1;
}
    .flow__item:last-child{
        z-index: 0;
    }
    .flow__item::after{
        content: counter(count , decimal-leading-zero);
        counter-increment: count;
        color: rgba(138, 159, 178, 0.30);
        font-family: "Great Vibes";
        font-size: 70px;
        font-style: normal;
        font-weight: 400;
        line-height: 36px;
        position: absolute;
        bottom: 0;
        right: 6px;
    }
.flow__img--wrap {
}

.flow__txt {
    color: #063857;
    text-align: center;
    font-feature-settings: 'vert' on;
    font-family: "Zen Old Mincho";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    writing-mode: vertical-rl;
    letter-spacing: 3px;
}


/* よくある質問 */
.content__wrapper--faq {
}
.content__inner--faq {
}
.faq__txt--container {
    width: 1203px;
    padding: 141px 183px 153px 390px;
    background: #254E72;
    position: absolute;
    left: -391px;
}

.content__wrapper--faq .main__title{
    align-items: unset;
}
    .content__wrapper--faq .sub__ttl,
    .content__wrapper--faq .main__ttl{
        color: #FFF;
    }

.faq__list--wrap {
    margin-top: 35px;
}
.faq__container{
    position: relative;
    height: 1291px;
}
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 27px;
}
.faq__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question {
    color: #FFF;
    font-family: "Zen Old Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.98px;
    padding-left: 31px;
    position: relative;
}
    .question::before{
        content: "Q.";
        position: absolute;
        top: 0;
        left: 0;
        color: #A0BFD2;
        text-align: center;
        font-family: "Zen Old Mincho";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.3;
    }
#contents .answer {
    color: #FFF;
    font-family: "Zen Kaku Gothic New";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.65;
    background: rgba(255, 255, 255, 0.07);
    padding: 15px 31px;
}

.faq__img--wrap {
    position: absolute;
    right: -87px;
    top: 257px;
}


/* 物件情報 */
.content__wrapper--article {
    padding: 142px 0 150px;
    overflow: hidden;
}
.content__inner--article {
    width: 100%;
}
.content__inner--article .main__title {
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
}
.content__container--article {
    width: 100%;
}
.js-articleSwiper {
    width: 100%;
}
.js-articleSwiper .swiper-slide {
    width: 300px;
}
.article__item {
    width: 300px;
    position: relative;
}
.article__img--wrap {
    width: 100%;
    height: 225px;
    overflow: hidden;
}
.article__img--wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article__infomation {
    display: flex;
    padding: 13px 20px 20px 20px;
    flex-direction: column;
    align-items: flex-start;
    background: #FFF;
    border: 1.415px solid rgba(58, 104, 132, 0.10);
    width: 100%;
}
.content__wrapper--article .swiper__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 31px;
}
.content__wrapper--article .swiper__controls .swiper-button-prev,
.content__wrapper--article .swiper__controls .swiper-button-next,
.content__wrapper--article .swiper__controls .swiper-pagination {
    position: unset;
    margin: 0;
}
.content__wrapper--article .swiper__controls .swiper-button-prev,
.content__wrapper--article .swiper__controls .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 13px;
    height: 21px;
    color: #063857;
    cursor: pointer;
}
.content__wrapper--article .swiper__controls .swiper-button-prev.swiper-button-disabled,
.content__wrapper--article .swiper__controls .swiper-button-next.swiper-button-disabled {
    opacity: 1;
}
.content__wrapper--article .swiper__controls .swiper-button-prev::after,
.content__wrapper--article .swiper__controls .swiper-button-next::after {
    content: none;
}
.content__wrapper--article .swiper__controls .swiper-button-prev svg,
.content__wrapper--article .swiper__controls .swiper-button-next svg {
    display: block;
    width: 13px;
    height: 21px;
    fill: none;
}
.content__wrapper--article .swiper__controls .swiper-pagination {
    width: fit-content;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.65;
    color: #063857;
}

.article__name {
    overflow: hidden;
    color: #000;
    text-overflow: ellipsis;
    font-family: "Zen Old Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 1.98px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 3px;
}

.plice__plan {
    display: flex;
    gap: 10px;
    align-items: self-end;
    margin-bottom: 5px;
}

.price {
    color: #063857;
    font-family: "Noto Sans JP";
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

.unit {
    color: #5E5D5D;
    font-family: "Zen Kaku Gothic New";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

.plan {
    color: #5E5D5D;
    font-family: "Zen Kaku Gothic New";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

.address {
    overflow: hidden;
    color: #5E5D5D;
    text-overflow: ellipsis;
    font-family: "Zen Kaku Gothic New";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.access {
    overflow: hidden;
    color: #5E5D5D;
    text-overflow: ellipsis;
    font-family: "Zen Kaku Gothic New";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.more__btn--article{
    margin-top: 30px;
}

.content__wrapper--article .view__all--btn{
    color: #063857;
    border: 1px solid #063857;
}
    .content__wrapper--article .view__all--btn:hover{
        opacity: 1;
        background: #063857;
        color: #fff;
    }

.ui-favorite-btn{
    position: absolute;
    top: 20px;
    right: 18px;
    position: absolute;
    top: 20px;
    right: 18px;
    border: solid 1px #FFF;
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.90);
    display: flex;
    justify-content: center;
    align-items: center;
}
    .ui-favorite-btn svg{
        width: 22px;
        height: 20px;
    }

/* どんなことでもお気軽にご相談ください */
.content__wrapper--contact {
    background: #254E72;
    padding: 141px 0 150px;
}

.content__wrapper--contact .sub__ttl,
.content__wrapper--contact .main__ttl{
    color: #FFF;
}

.content__inner--contact {
}
.content__container--contact {
    display: flex;
    justify-content: center;
    gap: 30px;
}

[class*="contact__container--"]{
    width: 555px;
    height: 180px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding-top: 29px;
}

.contact__container--mail {
    background: url(../images/mail_bg.webp) no-repeat center / cover;
}

.contact__container--line {
    background: url(../images/line_bg.webp) no-repeat center / cover;
}

.contact__ttl {
    color: #333;
    font-family: "Zen Old Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.98px;
}

.contact__btn {
}

[class*="btn__"]{
    width: 370px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    color: #FFF;
    text-align: center;
    font-family: "Zen Old Mincho";
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.65;
    position: relative;
}
    .btn__mail {
        background: #063857;
    }
        .btn__mail:hover{
            opacity: 1;
            background: #fff;
            color: #063857;
            border: solid 1px #063857;
        }
    .btn__line {
        background: #009D0A;
    }
        .btn__line:hover{
            opacity: 1;
            background: #fff;
            color: #009D0A;
            border: solid 1px #009D0A;
        }

[class*="btn__"] svg{
    flex-shrink: 0;
    width: 32px;
    height: 5px;
    fill: none;
    position: absolute;
    top: 1px;
    bottom: 0;
    margin: auto;
    right: 18px;
}