@charset "UTF-8";
/* CSS Document */

.c-title--page__wrapper{
    position: relative;
}
.c-title--page__wrapper .remark {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.5em 1em;
    font-size: 1.5rem;
    color: #fff;
    text-align: right;
    letter-spacing: 0.05em;
    z-index: 2;
}
@media screen and (min-width: 769px) {
    .c-title--page__wrapper .remark {
        padding: 0.5em 2em;
    }
}

@media screen and (min-width: 769px) {
    .t-madori__list {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: calc(50% - min(0.72vw, 12px));
        margin: 0 auto;
    }
    .t-madori__list--mini .t-madori__list__grid__item {
        width: 100%;
    }
    .plan .hanrei {
        width: calc(33.3333333333% - min(0.72vw, 12px));
        margin-left: auto;
        margin-right: auto;
        margin-bottom: min(3.89vw, 64.8px);
    }
}
.t-madori__list__grid__head__area.-v2 .head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(16px, 1.441vw, 24px);
    font-size: clamp(11.2px, 1.009vw, 16.8px);
}
.t-madori__list__grid__head__area.-v2 .head .name {
    width: 4em;
    -moz-text-align-last: justify;
    text-align-last: justify;
}
.t-madori__list__grid__head__area.-v2 .head .num {
    font-weight: 400;
    font-size: clamp(16px, 1.441vw, 24px);
    line-height: 1;
}
.t-madori__list__grid__head__area.-v2 .head .num strong {
    font-weight: 400;
    font-size: clamp(40px, 3.602vw, 60px);
}
.t-madori__list__grid__head__area.-v2 .btm {
    display: block;
    margin-top: min(0.36vw, 6px);
    padding-top: min(0.36vw, 6px);
    font-size: clamp(8px, 0.72vw, 12px);
    border-top: 1px solid #595757;
}
@media screen and (max-width: 768px) {
    .t-madori__list__grid__head__area.-v2 .head {
        gap: clamp(8px, 0.72vw, 12px);
        font-size: clamp(6.4px, 2.133vw, 9.6px);
    }
    .t-madori__list__grid__head__area.-v2 .head .name {
    }
    .t-madori__list__grid__head__area.-v2 .head .num {
        font-size: clamp(12px, 4vw, 18px);
    }
    .t-madori__list__grid__head__area.-v2 .head .num strong {
        font-size: clamp(24px, 8vw, 36px);
    }
    .t-madori__list__grid__head__area.-v2 .btm {
        margin-top: min(1.333vw, 6px);
        padding-top: min(1.333vw, 6px);
        font-size: clamp(4.8px, 1.6vw, 7.2px);
    }
}
.t-madori__list__grid__head__data {
    background-color: #536678;
}
.t-madori__list__grid__head__area {
    background-color: #E5E3E3;
}
.t-madori__list__grid__img {
    object-fit: cover;
    object-position: center;
}
@media screen and (min-width: 769px) {
    .t-madori__list__grid__img {
        object-fit: cover;
        object-position: center;
        max-height: min(49.421vw, 624px);
    }
}
.plan .hanrei {
}
@media screen and (min-width: 769px) {
    .plan .hanrei {
        width: calc( 800 * 100vw / 1920 );
        max-width: 800px;
    }
}



/*
A3 Type
*/
.c-accordion--tra__contents__inner__features .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5em;
    padding: 0.5em;
    color: #fff;
    background-color: #666464;
}
.c-accordion--tra__contents__inner__features .item:first-of-type {
    margin-top: 0;
}
.c-accordion--tra__contents__inner__features .item .item_num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5em;
    aspect-ratio: 1/1;
    margin: 0;
    color: #fff;
    background-color: #333;
}
.c-accordion--tra__contents__inner__features .item .item_text {
    width: calc( 100% - 2em );
}


.u-textlink--zoom {
    padding: min(1.009vw, 16.8px) min(1.441vw, 24px);
}





/* --------------------------------------------------
Model Room
-------------------------------------------------- */
.p-modelroom {
    margin: calc( 100 * 100vw / 750 ) 0 0;
}
@media screen and (min-width: 769px) {
    .p-modelroom {
        margin: 0;
    }
}



.p-modelroom-mv {
    position: relative;
    width: 100%;
    margin: 0 0 calc( 200 * 100vw / 750 );
    padding: 0;
}
.p-modelroom-mv figure {
    position: relative;
    width: 100%;
}
.p-modelroom-mv figure picture {
    width: 100%;
}
.p-modelroom-mv figure picture img {
    width: 100%;
}
.p-modelroom-mv figure figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0.5em 1em;
    color: #fff;
    font-size: calc( 16 * 100vw / 750 );/* デザイン　デフォルト */
    font-size: min( calc( 24 * 100vw / 750 ), 24px );
    line-height: 1;
    text-align: right;
}
@media screen and (min-width: 769px) {
    .p-modelroom-mv {
        margin: 0 0 min( calc( 200 * 100vw / 1920 ), 200px ); /* コンテンツ幅を1920で固定する時 */
        margin: 0 0 calc( 200 * 100vw / 1920 ); /* コンテンツ幅 = 100vw の時 */
    }
    .p-modelroom-mv figure {
    }
    .p-modelroom-mv figure picture {
    }
    .p-modelroom-mv figure picture img {
    }
    .p-modelroom-mv figure figcaption {
        font-size: min( calc( 16 * 100vw / 1920 ), 16px ); /* コンテンツ幅を1920で固定する時 */
        font-size: calc( 16 * 100vw / 1920 ); /* コンテンツ幅 = 100vw の時 */
    }
}



.p-modelroom-slide {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.p-modelroom-slide h3 {
    margin: 0 0 calc( 50 * 100vw / 750 );
    padding-left: min(1.441vw, 24px);
    padding-right: min(1.441vw, 24px);
    color: #333;
    font-size: calc( 23 * 100vw / 750 );/* デザイン　デフォルト */
    font-size: min( calc( 24 * 100vw / 750 ), 12px );
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.8em;
    text-align: center;
}
.p-modelroom-slide h3 .type_name {
    font-size: calc( 43 * 100vw / 750 );
    font-weight: 600;
    letter-spacing: 0.03em;
}
@media screen and (min-width: 769px) {
    .p-modelroom-slide {
        margin: 0;
    }
    .p-modelroom-slide h3 {
        margin: 0 0 min( calc( 50 * 100vw / 1920 ), 50px ); /* コンテンツ幅を1920で固定する時 */
        margin: 0 0 calc( 50 * 100vw / 1920 ); /* コンテンツ幅 = 100vw の時 */
        font-size: min( calc( 17 * 100vw / 1920 ), 17px );
        font-size: calc( 17 * 100vw / 1920 );
    }
    .p-modelroom-slide h3 .type_name {
        font-size: min( calc( 31 * 100vw / 1920 ), 31px );
        font-size: calc( 31 * 100vw / 1920 );
    }
}



.p-modelroom-slide-inner {
    position: relative;
    width: 100%;
    margin: 0 0 calc( 100 * 100vw / 750 );
    padding: 0;
}
.p-modelroom-slide-inner .each_item {
    position: relative;
    width: 100%;
}
.p-modelroom-slide-inner .each_item figure {
    position: relative;
    display: block;
    width: 100%;
}
.p-modelroom-slide-inner .each_item figure picture {
    width: 100%;
}
.p-modelroom-slide-inner .each_item figure picture img {
    width: 100%;
}
.p-modelroom-slide-inner .each_item figure figcaption {
    position: absolute;
    width: 100%;
    margin: 0;
    color: #fff;
    line-height: 1;
    text-align: right;
    right: 0;
    bottom: 0;
    padding: 0.5em 1em;
    font-size: min( calc( 16 * 100vw / 750 ), 16px ); /* デザイン　デフォルト */
    font-size: min( calc( 12 * 100vw / 375 ), 12px );
    text-shadow:0 0 15px #000;
}
.p-modelroom-slide-inner .each_item.image_05 figure figcaption, 
.p-modelroom-slide-inner .each_item.image_08 figure figcaption, 
.p-modelroom-slide-inner .each_item.image_09 figure figcaption, 
.p-modelroom-slide-inner .each_item.image_10 figure figcaption {
    right: 27.864%;
}
@media screen and (min-width: 769px) {
    .p-modelroom-slide-inner {
        margin: 0 0 min( calc( 100 * 100vw / 1920 ), 100px );
        margin: 0 0 calc( 100 * 100vw / 1920 );
    }
    .p-modelroom-slide-inner .each_item {
    }
    .p-modelroom-slide-inner .each_item figure {
    }
    .p-modelroom-slide-inner .each_item figure picture {
    }
    .p-modelroom-slide-inner .each_item figure picture img {
    }
    .p-modelroom-slide-inner .each_item figure figcaption {
        right: 0;
        bottom: 0;
        padding: 0.5em 1em;
        font-size: min( calc( 16 * 100vw / 1920 ), 16px );
        font-size: calc( 16 * 100vw / 1920 );
    }
    .p-modelroom-slide-inner .each_item.image_05 figure figcaption, 
    .p-modelroom-slide-inner .each_item.image_08 figure figcaption, 
    .p-modelroom-slide-inner .each_item.image_09 figure figcaption, 
    .p-modelroom-slide-inner .each_item.image_10 figure figcaption {
        right: 27.864%;
    }
}



.swiper-controller {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.swiper-controller .swiper-button-prev,
.swiper-controller .swiper-button-next {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    height: min(21.615vw, 144px);
    margin: 0;
}
.swiper-controller .swiper-button-prev::before, 
.swiper-controller .swiper-button-next::before {
    height: min(21.615vw, 144px);
    border: none;
    border-radius: unset;
    background-color: rgba( 0, 0, 0, 0.4 );
}
.swiper-controller .swiper-button-prev:hover::before, 
.swiper-controller .swiper-button-next:hover::before {
    background-color: rgba( 0, 0, 0, 0.7 );
}
.swiper-controller .swiper-button-prev::after {
    content: '';
    width: calc( 17 * 100vw / 375 );
    height: calc( 37 * 100vw / 375 );
    background-image: url( '../img/plan/icon_swiper-controller.svg' );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.swiper-controller .swiper-button-next::after {
    content: '';
    width: calc( 17 * 100vw / 375 );
    height: calc( 37 * 100vw / 375 );
    background-image: url( '../img/plan/icon_swiper-controller.svg' );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.swiper-controller .swiper-button-prev::after, 
.swiper-controller .swiper-button-next::after {
    color: #fff;
}
.swiper-controller .swiper-button-prev:hover::after, 
.swiper-controller .swiper-button-next:hover::after {
    color: #333;
}
@media screen and (min-width: 769px) {
    .swiper-controller {
    }
    .swiper-controller .swiper-button-prev,
    .swiper-controller .swiper-button-next {
        width: min(4.323vw, 72px);
        height: min(8.646vw, 144px);
    }
    .swiper-controller .swiper-button-prev::before, 
    .swiper-controller .swiper-button-next::before {
        width: min(4.323vw, 72px);
        height: min(8.646vw, 144px);
    }
    .swiper-controller .swiper-button-prev:hover::before, 
    .swiper-controller .swiper-button-next:hover::before {
    }
    .swiper-controller .swiper-button-prev::after {
        width: calc( 17 * 100vw / 1388 );
        height: calc( 37 * 100vw / 1388 );
    }
    .swiper-controller .swiper-button-next::after {
        width: calc( 17 * 100vw / 1388 );
        height: calc( 37 * 100vw / 1388 );
    }
    .swiper-controller .swiper-button-prev::after, 
    .swiper-controller .swiper-button-next::after {
    }
    .swiper-controller .swiper-button-prev:hover::after, 
    .swiper-controller .swiper-button-next:hover::after {
    }
}


.p-modelroom-slide-inner--thumbnail {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
    padding: 0;
}
.p-modelroom-slide-inner--thumbnail .each_item {
    position: relative;
    width: calc( 100% / 4 );
    padding: 0.5rem;
}
.p-modelroom-slide-inner--thumbnail .each_item figure {
    position: relative;
    display: block;
    width: 100%;
}
.p-modelroom-slide-inner--thumbnail .each_item figure picture {
    width: 100%;
}
.p-modelroom-slide-inner--thumbnail .each_item figure picture img {
    width: 100%;
}
.p-modelroom-slide-inner--thumbnail .each_item figure figcaption {
    position: absolute;
    width: 100%;
    margin: 0;
    color: #fff;
    line-height: 1;
    text-align: right;
}
.p-modelroom-slide-inner--thumbnail .each_item figure figcaption {
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.2em;
    color: #fff;
    font-size: min( calc( 12 * 100vw / 750 ), 12px );/* デザイン　デフォルト */
    font-size: min( calc( 11 * 100vw / 375 ), 11px );
    line-height: 1.1;
    text-align: center;
    background-color: rgba( 0, 0, 0, 0.8 );    
    transition: all 0.5s;
    opacity: 1;
}
.p-modelroom-slide-inner--thumbnail .each_item.thumb-media-active figure figcaption {
    opacity: 0;
}
@media screen and (min-width: 769px) {
    .p-modelroom-slide-inner--thumbnail {
        flex-wrap: nowrap;
        max-width: min( 86.455vw, 1440px );
        padding-left: min(1.441vw, 24px);
        padding-right: min(1.441vw, 24px);
    }
    .p-modelroom-slide-inner--thumbnail .each_item {
        width: calc( 100% / 8 );
        padding: 0 1rem;
    }
    .p-modelroom-slide-inner--thumbnail .each_item figure {
    }
    .p-modelroom-slide-inner--thumbnail .each_item figure picture {
    }
    .p-modelroom-slide-inner--thumbnail .each_item figure picture img {
    }
    .p-modelroom-slide-inner--thumbnail .each_item figure figcaption {
        font-size: min( calc( 12 * 100vw / 375 ), 12px );
    }
    .p-modelroom-slide-inner--thumbnail .each_item.slick-current figure figcaption {
    }
}






/* .p-bottom_banner--wrap
--------------------------------------------------*/
.p-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38%;
    margin: 0 auto;
    padding: 0.8em 0;
    color: #fff;
    font-size: calc( 26 * 100vw / 750 );
    letter-spacing: 0.05em;
    background-color: #231815;
    border-radius: 9999px;
}
.p-button.disabled {
    cursor: default;
    opacity: 1;
}
@media screen and (min-width: 769px) {
    .p-button {
        font-size: calc( 26 * 100vw / 1920 );
    }
    .p-button.disabled {
    }
}


.p-bottom_banner--tcl{
    width: 90%;
    max-width: 930px;
    margin: calc( 210 * 100vw / 1920 ) auto 0;
}


.p-bottom_banner--wrap {
    padding: calc( 130 * 100vw / 750 ) 0;
}
.p-bottom_banner--wrap a{
}
.p-bottom_banner--inner {
    width: calc( 660 * 100vw / 750 );
    margin: 0 auto;
    padding: calc( 110 * 100vw / 750 ) 0 calc( 90 * 100vw / 750 );
    background-image: url( '../img/design/img-bottom_banner_sp.webp' );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (min-width: 769px) {
    .p-bottom_banner--wrap {
        padding: calc( 210 * 100vw / 1920 ) 0;
    }
    .p-bottom_banner--inner {
        width: 75%;
        margin: 0 auto;
        padding: calc( 110 * 100vw / 1920 ) 0 calc( 90 * 100vw / 1920 );
        background-image: url( '../img/design/img-bottom_banner_pc.webp' );
    }
}



.p-bottom_banner--inner .p-title--contents {
    margin-bottom: 0.8em;
    color: #fff;
    font-size: calc( 43 * 100vw / 750 );
    line-height: 1.2;
    text-align: center;
}
.p-bottom_banner--inner .p-button {
    width: 87.27%;
    font-size: calc(26* 100vw / 750);
}
@media screen and (min-width: 769px) {
    .p-bottom_banner--inner .p-title--contents {
        margin-bottom: 0.8em;
        color: #fff;
        font-size: calc( 43 * 100vw / 1920 );
        line-height: 1;
        text-align: center;
    }
    .p-bottom_banner--inner .p-button {
        width: 50.27%;
        font-size: calc(26* 100vw / 1920);
    }
}

.illust{
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    text-align: center;
}
.illust h2{
    color: #67798a;
    font-size: calc(37 * 100vw / 750);
    line-height: 2;
    text-align: center;
}
.illust p{
    font-size: calc(20 * 100vw / 750);
    line-height: 2;
    text-align: center;
}
.illust img{
    width: 100%;
}
.illust figcaption.remark{
    display: block;
    font-size: calc(20 * 100vw / 750);
    line-height: 1;
    text-align: right;
    width: 100%;
}
@media screen and (min-width: 769px) {
    .illust h2{
        font-size: calc(37 * 100vw / 1920);
    }
    .illust p{
        font-size: calc(19 * 100vw / 1920);
    }
    .illust figcaption.remark{
        font-size: calc(14 * 100vw / 1920);
    }

}









