@charset "utf-8";


body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
.l-page * {
    font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}
#content {
    width: 100%;
}
#contents {
    width: 100%;
    padding-bottom: 0;
    background-color: #fff;
}
/* Figma MV: 1920x501 */
.main__view {
    margin: 0;
    line-height: 0;
}
    .main__view img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 501;
        object-fit: cover;
    }
.pg__inner {
    width: 1140px;
    margin: 0 auto;
    position: relative;
}

/* Figma: Yu Gothic Bold 30px / lh 1.5 / #263238 */
#contents [class*="cmn__ttl--"] {
    position: relative;
    font-family: "Yu Gothic", "YuGothic", "游ゴシック", "游ゴシック体", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    color: #263238;
}
    [class*="cmn__ttl--"] .cmn__ttl-en {
        position: absolute;
        z-index: 0;
        pointer-events: none;
    }
    [class*="cmn__ttl--"] .cmn__ttl-ja {
        position: relative;
        z-index: 1;
        font-family: "Yu Gothic";
    }
    [class*="cmn__ttl--"] .cmn__ttl-em {
        color: #4A6075;
        font-family: "Yu Gothic";
    }
.cmn__ttl--reform .cmn__ttl-en {
    top: -53px;
    left: -52px;
}
.cmn__ttl--example,
.cmn__ttl--property,
.cmn__ttl--blog {
    text-align: center;
}
    .cmn__ttl--example .cmn__ttl-en,
    .cmn__ttl--property .cmn__ttl-en,
    .cmn__ttl--blog .cmn__ttl-en {
        top: -52px;
        left: 388px;
        transform: translateX(-50%);
    }
    .cmn__ttl--example .cmn__ttl-en {
        left: 9%;
        top: -58px;
    }
    .cmn__ttl--property .cmn__ttl-en {
        left: -5.7%;
        top: -57px;
    }
.cmn__ttl--contact {
    width: 180px;
    color: #FFF;
    text-align: center;
}
    .cmn__ttl--contact .cmn__ttl-en {
        top: -55px;
        left: 3%;
        width: 180px;
        height: auto;
        transform: translateX(-50%);
    }
    .cmn__ttl--contact .cmn__ttl-ja {
        color: #FFF;
    }

/*//////////////////// Reform ////////////////////*/
.cmn__section--reform {
    padding-block: 140px;
}
        /* Figma: img 223x165 / left 257px / top 137px */
        .reform__img--02 {
            position: absolute;
            top: 137px;
            left: -135px;
            width: 223px;
            height: 165px;
        }
            .reform__img--02 img {
                display: block;
                width: 223px;
                height: 165px;
                object-fit: cover;
            }
        /* Figma: Frame 62 W576 / left 530px / gap 20px */
        .reform__content {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 716px;
            padding-left: 140px;
        }
            /* Figma: Meiryo Regular 18px / lh 2 / #000 / W576 H180 */
            #contents .reform__text {
                font-family: "メイリオ", "Meiryo", sans-serif;
                font-size: 18px;
                font-weight: 400;
                line-height: 2;
                color: #000;
            }
        /* Figma: img 500x343 / left 1156px / top -68px */
        .reform__img--01 {
            position: absolute;
            top: -68px;
            right: -125px;
            width: 500px;
            height: 343px;
        }
            .reform__img--01 img {
                display: block;
                width: 500px;
                height: 343px;
                object-fit: cover;
            }

/*//////////////////// Example ////////////////////*/
/* Figma: 12075:550 / padding 80px / gap 40px / bg #F5FDFF + reform__bg */
.cmn__section--example {
    padding-block: 80px;
    background-color: #F5FDFF;
    background-image: url("../images/reform__bg.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
    .cmn__section--example .pg__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
        /* Figma: Frame 222 gap 20px */
        .example__list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 1140px;
        }
            /* Figma: list_item01 / bg #FFF / padding 30px / gap 30px */
            .example__item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 30px;
                width: 1140px;
                padding: 30.5px 30px 30px;
                background-color: #FFF;
            }
            .example__item--half {
                width: 560px;
            }
                /* Figma: Meiryo Bold 24px / #76B0BF / pb 15px / border-bottom */
                #contents .example__item-ttl {
                    width: 100%;
                    padding: 0 10px 15px;
                    border-bottom: 1px solid #76B0BF;
                    font-family: "メイリオ", "Meiryo", sans-serif;
                    font-size: 24px;
                    font-weight: 700;
                    line-height: 1;
                    color: #76B0BF;
                    text-align: center;
                }
                .example__photos {
                    display: flex;
                    gap: 20px;
                    align-items: flex-start;
                    justify-content: center;
                }
                .example__photos--gap30 {
                    gap: 30px;
                }
                    /* Figma: img bg #DDF2F8 / padding 20px / gap 10px */
                    .example__pair {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 35px 20px 20px;
                        background-color: #DDF2F8;
                    }
                        .example__media {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            isolation: isolate;
                            position: relative;
                        }
                        .example__pair--landscape .example__media:first-child {
                            width: 181px;
                        }
                        .example__pair--landscape .example__media:last-of-type {
                            width: 266px;
                        }
                        .example__pair:not(.example__pair--landscape) .example__media:first-child {
                            width: 170px;
                        }
                        .example__pair:not(.example__pair--landscape) .example__media:last-of-type {
                            width: 226px;
                        }
                            .example__label {
                                z-index: 2;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-family: "メイリオ", "Meiryo", sans-serif;
                                font-weight: 700;
                                line-height: 1;
                                color: #FFF;
                                border-radius: 9999px;
                                position: absolute;
                                top: -16px;
                            }
                            .example__label--before {
                                padding: 9px 12px 7px;
                                background-color: #6E6E6E;
                                font-size: 16px;
                            }
                            .example__label--after {
                                margin-bottom: -15px;
                                padding: 10px 14px 5px;
                                background-color: #76B0BF;
                                font-size: 20px;
                            }
                            .example__media img {
                                z-index: 1;
                                display: block;
                                width: 100%;
                                height: auto;
                                object-fit: cover;
                            }
                            .example__pair--landscape .example__media:first-child img {
                                aspect-ratio: 200 / 150;
                                height: 136px;
                            }
                            .example__pair--landscape .example__media:last-of-type img {
                                aspect-ratio: 253 / 190;
                                height: 200px;
                            }
                            .example__pair:not(.example__pair--landscape) .example__media:first-child img {
                                aspect-ratio: 200 / 240;
                                height: 204px;
                            }
                            .example__pair:not(.example__pair--landscape) .example__media:last-of-type img {
                                aspect-ratio: 150 / 180;
                                height: 271px;
                            }
                        /* Figma: example__arrow.svg 24x8 */
                        .example__arrow {
                            flex-shrink: 0;
                            display: block;
                            top: -7px;
                            position: relative;
                        }
                /* Figma: Meiryo Regular 16px / lh 1.7 / #263238 / center / W1080 */
                #contents .example__text {
                    width: 100%;
                    max-width: 1080px;
                    font-family: "メイリオ", "Meiryo", sans-serif;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 1.7;
                    color: #263238;
                    text-align: center;
                }
            /* Figma: Frame 63 gap 20px */
            .example__row {
                display: flex;
                gap: 20px;
                align-items: stretch;
            }

/*//////////////////// Property ////////////////////*/
/* Figma: 12077:1353 / padding 80px / gap 40px */
.cmn__section--property {
    padding-block: 80px;
}
    .cmn__section--property .pg__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 42px;
    }
        .property__study {
            width: 1140px;
        }
            .property__tabs {
                display: flex;
                gap: 9px;
            }
                .property__tab {
                    box-sizing: border-box;
                    width: 374px;
                    height: 70px;
                    padding: 20px 16px;
                    border: 0;
                    border-radius: 10px 10px 0 0;
                    background-color: #D9D9D9;
                    font-family: "メイリオ", "Meiryo", sans-serif;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 1;
                    color: #4A6075;
                    text-align: center;
                    cursor: pointer;
                }
                .property__tab.is-active {
                    background-color: #4A6075;
                    color: #FFF;
                }
            .property__panel {
                box-sizing: border-box;
                display: none;
                width: 1140px;
                padding: 50px 50px 45px;
                background-color: #F4F8FB;
            }
            .property__panel.is-active {
                display: block;
            }
                .property__main {
                    display: flex;
                    gap: 50px;
                    align-items: flex-start;
                    width: 1040px;
                }
                    .property__visual {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        gap: 26px;
                        width: 422px;
                    }
                        .property__hero {
                            position: relative;
                            width: 422px;
                            height: 249px;
                        }
                            .property__hero > img:first-child {
                                display: block;
                                width: 422px;
                                height: 249px;
                                object-fit: cover;
                            }
                            .property__label {
                                position: absolute;
                                top: 10px;
                                left: -15px;
                                z-index: 1;
                            }
                        .property__plans {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 422px;
                            height: 321px;
                        }
                            .property__plan {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                isolation: isolate;
                                position: relative;
                            }
                            .property__plan:first-child {
                                width: 175px;
                            }
                            .property__plan:last-of-type {
                                width: 200px;
                            }
                                .property__plan-label {
                                    z-index: 2;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 5px 12px 3px 12px;
                                    border-radius: 9999px;
                                    font-family: "メイリオ", "Meiryo", sans-serif;
                                    font-size: 16px;
                                    font-weight: 700;
                                    line-height: 1;
                                    color: #FFF;
                                    position: absolute;
                                    top: -11px;
                                }
                                .property__plan-label--before {
                                    background-color: #6E6E6E;
                                }
                                .property__plan-label--after {
                                    width: 92px;
                                    background-color: #76B0BF;
                                }
                                .property__plan img {
                                    z-index: 1;
                                    display: block;
                                    background-color: #FFF;
                                    object-fit: contain;
                                }
                                .property__plan:first-child img {
                                    width: 175px;
                                    height: 269px;
                                }
                                .property__plan:last-of-type img {
                                    width: 200px;
                                    height: 309px;
                                }
                            /* Figma: example__arrow.svg 24x8 */
                            .property__arrow {
                                flex-shrink: 0;
                                display: block;
                                position: relative;
                                top: -5px;
                            }
                    .property__detail {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        width: 568px;
                    }
                        .property__head {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            gap: 20px;
                            min-height: 249px;
                        }
                            #contents .property__case-ttl {
                                font-family: "メイリオ", "Meiryo", sans-serif;
                                font-size: 22px;
                                font-weight: 700;
                                line-height: 1.5;
                                color: #263238;
                            }
                                .property__case-ttl-em {
                                    color: #4A6075;
                                }
                            .property__info {
                                display: flex;
                                flex-wrap: wrap;
                                gap: 8px;
                                width: 100%;
                            }
                                .property__info-item {
                                    display: flex;
                                    align-items: stretch;
                                }
                                .property__info-item:nth-child(even) dd{
                                    width: 200px;
                                }
                                .property__info-item:nth-child(odd) dd{
                                    width: 180px;
                                }
                                    .property__info-item dt {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 80px;
                                        height: 36px;
                                        background-color: #76B0BF;
                                        font-family: "メイリオ", "Meiryo", sans-serif;
                                        font-size: 16px;
                                        font-weight: 700;
                                        line-height: 1;
                                        color: #FFF;
                                    }
                                    .property__info-item dd {
                                        display: flex;
                                        align-items: center;
                                        height: 36px;
                                        padding: 0 0 0 14px;
                                        font-family: "メイリオ", "Meiryo", sans-serif;
                                        font-size: 16px;
                                        font-weight: 400;
                                        line-height: 1;
                                        color: #263238;
                                        width: 200px;
                                    }
                                        .property__price {
                                            font-size: 20px;
                                            font-weight: 700;
                                            color: #E38C5E;
                                        }
                        #contents .property__voice {
                            box-sizing: border-box;
                            width: 100%;
                            min-height: 321px;
                            padding: 30px;
                            background-color: #FFF;
                            font-family: "メイリオ", "Meiryo", sans-serif;
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 1.8;
                            color: #263238;
                        }

/*//////////////////// Blog ////////////////////*/
/* Figma: 12077:1872 / 1920x652 / py 80 / gap 40 / bg #FAF9F5 */
.cmn__section--blog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-block: 80px;
    background-color: #FAF9F5;
}
    .blog__slider-view {
        width: 100%;
        overflow: hidden;
    }
        .blog__slider {
            overflow: hidden;
        }
            .blog__slider .swiper-slide {
                width: 360px;
            }
        /* 1〜3件：スライダーなし・中央寄せ（カード幅360 / gap 30） */
        .cmn__section--blog.is-static .blog__slider-view {
            width: 1140px;
            overflow: visible;
        }
        .cmn__section--blog.is-static .blog__slider,
        .cmn__section--blog.is-static .blog__slider .swiper-wrapper {
            overflow: visible;
        }
        .cmn__section--blog.is-static .blog__slider .swiper-wrapper {
            display: flex;
            justify-content: center;
            gap: 30px;
            transform: none !important;
        }
        .cmn__section--blog.is-static .blog__slider .swiper-slide {
            margin: 0 !important;
        }
        .cmn__section--blog.is-static .blog__foot {
            justify-content: flex-end;
        }
                .blog__card {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    width: 360px;
                    overflow: hidden;
                    border-radius: 10px;
                    text-decoration: none;
                    color: inherit;
                }
                    .blog__thumb {
                        position: relative;
                        width: 360px;
                        height: 238px;
                    }
                        .blog__thumb img {
                            display: block;
                            width: 360px;
                            height: 238px;
                            object-fit: cover;
                        }
                        .blog__date {
                            position: absolute;
                            top: 12px;
                            left: 0;
                            box-sizing: border-box;
                            padding: 0 12px 0 10px;
                            border-radius: 0 9999px 9999px 0;
                            background-color: #76B0BF;
                            font-family: "メイリオ", "Meiryo", sans-serif;
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 1.6;
                            color: #FFF;
                        }
                    .blog__txt {
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                        width: 100%;
                    }
                        #contents .blog__ttl,
                        #contents .blog__lead {
                            overflow: hidden;
                            width: 100%;
                            font-family: "メイリオ", "Meiryo", sans-serif;
                            line-height: 1.6;
                            color: #263238;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        #contents .blog__ttl {
                            font-size: 18px;
                            font-weight: 700;
                        }
                        #contents .blog__lead {
                            font-size: 16px;
                            font-weight: 400;
                        }
    .blog__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1140px;
    }
        .blog__pager {
            display: flex;
            align-items: center;
            gap: 20px;
        }
            /* Figma: slider__arrow.svg 32x32（prev向き。nextは左右反転） */
            .blog__nav {
                display: block;
                width: 32px;
                height: 32px;
                padding: 0;
                border: 0;
                background-color: transparent;
                cursor: pointer;
            }
            .blog__nav img {
                display: block;
            }
            .blog__nav--next {
                transform: scaleX(-1);
            }
            .blog__nav.swiper-button-disabled {
                cursor: default;
            }
            .blog__dots {
                display: flex;
                align-items: center;
                gap: 13px;
                height: 10px;
            }
                .blog__dot {
                    box-sizing: border-box;
                    width: 10px;
                    height: 10px;
                    padding: 0;
                    border: 0;
                    border-radius: 50%;
                    background-color: #D9D9D9;
                    cursor: pointer;
                }
                .blog__dot.is-active {
                    background-color: #4A6075;
                }
        .blog__btn {
            position: relative;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 290px;
            height: 60px;
            border: 1px solid #76B0BF;
            border-radius: 30px;
            background-color: #FFF;
            font-family: "メイリオ", "Meiryo", sans-serif;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.556;
            color: #76B0BF;
            text-decoration: none;
        }
            .blog__btn-arrow {
                position: absolute;
                top: 23px;
                right: 22px;
            }

/*//////////////////// Contact ////////////////////*/
/* Figma: 12077:1845 / 1920x320 / pt69 pb62 / gap50 / bg #4A6075 */
.cmn__section--contact {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 69px 0 62px;
    background-color: #4A6075;
}
    .contact__inner {
        display: flex;
        align-items: center;
        gap: 50px;
    }
        .contact__box {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 20px;
            width: 822px;
            height: 189px;
            padding: 50px 60px;
            background-color: #FFF;
        }
            .contact__phone {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                width: 311px;
            }
                .contact__tel {
                    display: flex;
                    align-items: center;
                    gap: 7px;
                }
                    .contact__tel-icon {
                        display: block;
                        flex-shrink: 0;
                    }
                    #contents .contact__tel-num {
                        font-family: "メイリオ", "Meiryo", sans-serif;
                        font-size: 36px;
                        font-weight: 700;
                        line-height: 1;
                        color: #263238;
                        text-decoration: none;
                        white-space: nowrap;
                    }
                #contents .contact__hours {
                    font-family: "メイリオ", "Meiryo", sans-serif;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.5;
                    color: #263238;
                    text-align: center;
                }
            .contact__divider {
                align-self: stretch;
                flex-shrink: 0;
                width: 1px;
                background-color: #CAD2DD;
            }
            .contact__btn {
                position: relative;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 350px;
                height: 70px;
                border-radius: 9999px;
                background-color: #E38C5E;
                font-family: "メイリオ", "Meiryo", sans-serif;
                font-size: 18px;
                font-weight: 700;
                line-height: 1;
                color: #FFF;
                text-decoration: none;
                text-align: center;
                transition: opacity 0.3s;
            }
            .contact__btn:hover {
                opacity: 0.8;
            }
                .contact__btn-arrow {
                    position: absolute;
                    top: 30px;
                    right: 21px;
                }