@charset "utf-8";
.head_info h1{
	position: relative;
}
.head_info h1::before{
	content: "設備・仕様（水回り）｜杉並区松庵の新築分譲マンション「パレステージ杉並松庵」公式HP。京王井の頭線三鷹台駅徒歩11分。";
	display: inline-block;
    font-size: 10px;
}

.h_links ul li.quality::before {
    width: 100%;
    transition: 0.3s;
}
.footer_sitemap ul li.quality a {
    background: #dedede;
    color: #333;
}
.hummenu ul li.quality {
    border-bottom: 1px solid #fff;
}

/* subhead  */
.sub_head{
	background: url(../img/quality/subhead.jpg) no-repeat;
	background-position: center;
    background-size: cover;
}

.item_img_cap {
    white-space: nowrap;
    position: absolute;
    font-size: 10px;
    bottom: 0;
    right: 0;
    color: #000;
    padding: 2px;
    filter: drop-shadow(0px 0px 1px rgba(255,255,255,1)) drop-shadow(0px 0px 1px rgba(255,255,255,1)) drop-shadow(0px 0px 1px rgba(255,255,255,1)) drop-shadow(0px 0px 1px rgba(255,255,255,1));
}

#kitchen_b , #bathroom_b , #powder_b , #rest_b , #amenity_b , #ecology_b , #multimedia_b , #afterservice_b {
    padding-top: 100px;
    margin-top: -100px;
}
/* #kitchen, #powder, #amenity, #security{
    background: #f2f5f7;
} */

.tab_btn{
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}
.tab_btn_item.active{
    background: #363636 !important;
    color: #fff;
}
.tab_btn_item{
    background: #dcdddd;
    width: 32%;
    height: 60px;
    font-size: 20px;
    position: relative;
    transition-duration: 0.3s;
}
.tab_btn_item:hover{
    background: #363636;
    transition-duration: 0.3s;
	color: #fff;
}
.tab_btn_item a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: 'Noto Serif JP';
}
.tab_btn_item span {
    /* font-size: 20px; */
    padding-right: 10px;
}
.tab_btn_item span.setubi {
    padding-right: 0;
}


.tab_btn02 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
.tab_btn02_inner {
    width: 24%;
    border: solid 1px #363636;
    margin: 5px 0;
    height: 60px;
    color: #363636;
    transition: 0.3s;
}
.tab_btn02_inner.active{
    background: #74909e;
    color: #fff;
    border: solid 1px #74909e;
}
.tab_btn02_inner:hover{
    background: #74909e;
    color: #fff;
    border: solid 1px #74909e;
}
.tab_btn02_inner a {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 15px; */
    width: 100%;
    height: 100%;
    font-size: 15px;
    text-align: center;
}


.sec_ttl.en {
    font-family: 'Cormorant Garamond';
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}
.sec_inner{
    padding: 60px 0;
}
.ttl_underline {
    border-bottom: solid 1px #333333;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 20px;
}
.ttl_underline::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #333333;
    bottom: 5px;
    position: absolute;
}





.mb40{
    margin-bottom: 40px!important;
}

.mb60{
    margin-bottom: 60px!important;
}

.qua_flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: -40px;
}
.column{
    width: 100%;
    align-items: center;
    background: #ffffff;
    padding: 20px 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    border: solid 1px #8b8787;
}
.bathgraph{
    margin: 20px auto 10px;
}
.kitbox_inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}
.kitbox_img {
    width: 33%;
    max-width: 134px;
    position: relative;
}
.kitbox_text {
    width: 68%;
    max-width: 483px;
}
.ih_list li {
    background: #748f9d;
    padding: 2%;
    color: #fff;
    margin-bottom: 10px;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.05em;
}
.ih_list li:last-child {
    margin-bottom: 0;
}
.ih_list {
    margin-top: 20px;
}

.qua_flex_col4::before{
    content: "";
    width: 23%;
    display: block;
    order: 1;
}
.qua_flex_col4::after{
    content: "";
    width: 23%;
    display: block;
    order: 1;
}
.qua_flex_col3::before{
    content: "";
    width: 32%;
    display: block;
    order: 1;
}
.qua_col2{
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.qua_col3{
    width: 32%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.qua_col1_3{
    width: 32%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.qua_col2_3{
    width: 66%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.qua_col4{
    width: 23%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


.qua_item_name_box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3em;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #333;
    /* color: #719aa7; */
    text-align: center;
}
.qua_item_name{
}
.qua_item_name .small{
    display: inline-block;
    font-size: 11px;
}
.qua_item_name.border_ver{
    background: #727171;
    color: #fff;
    border-radius: 10px;
    padding: 0.5em;
    height: auto;
    font-size: 12px;
    margin: 0 0 10px;
    text-align: center;
}
.qua_item_lead{
    font-size: 13px;
    text-align: justify;
    line-height: 1.4;
    letter-spacing: 0.02em;
    flex-grow: 1;
}
.qua_item_lead .qua_item_lead_cap{
    font-size: 10px;
    display: inline-block;
}
.qua_item_img{
    margin-top: 10px;
}


.kitchen_col{
    background: #fff;
    border: solid 1px #719aa7;
    padding: 20px;
    width: 48%;
}

.qua_item_inner_flex{
    display: flex;
    justify-content: space-between;
}
.qua_item_inner_flex_text{
    width: 50%;
}
.qua_item_inner_flex_text02 {
    width: 73%;
}
.qua_item_inner_flex_img{
    width: 46%;
    max-width: 200px;
}
.qua_item_inner_flex_img02{
    width: 25%;
    max-width: 108px;
}
.qua_item_inner_flex_text_benri{
    color: #719aa7;
    font-size: 13px;
    margin: 0.5em 0 0;
}
.qua_item_inner_flex_text_ttl{
    background: #719aa7;
    color: #fff;
    text-align: center;
    padding: 0.2em;
    font-size: 12px;
    margin: 0.5em 0 0.2em;
}
.qua_item_lead_small{
    font-size: 12px;
    text-align: justify;
}
.kitchen_col02_03{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.kitchen_col02{
    width: 47%;
    max-width: 205px;
}
.kitchen_col03{
    width: 51%;
    max-width: 223px;
}

.mirror_flex{
    width: 74%;
    display: flex;
    justify-content: space-between;
    /* max-width: 740px; */
}
.mirror_img{
    width: 40%;
    display: flex;
    align-items: flex-end;
}
.qua_col_mirror{
    width: 56%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 414px;
}

.multimedia_flex{
    display: flex;
}
.multimedia_ucom{
    max-width: 200px;
    min-width: 200px;
    margin: 0px 0 0 20px;
    /* width: 90%; */
}
.multimedia_jcom{
    max-width: 200px;
    margin: 20px auto;
    width: 45%;
}


.door_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}
.door_img{
    width: 26%;
    /* max-width: 284px; */
    position: relative;
}
.door_list{
    width: 70%;
}
.door_item{
    display: flex;
    justify-content: space-between;
}
.door_item_img{
    max-width: 200px;
    width: 30%;
    order: 2;
    position: relative;
}
.door_item_text{
    width: 67%;
}
.door_item_text .qua_item_name{
    justify-content: left;
    background: #fff;
    border: solid 1px #c88d0f;
    border-radius: 10px;
    padding: 0.5em;
    height: auto;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}
.door_list .door_item:not(:last-child){
    margin-bottom: 4%;
}
.door_item_num{
    font-size: 15px;
    width: 25px;
    height: 25px;
    background: #c88d0f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.st02 .qua_item_img img{
    /* width: 90%; */
    margin: 0 auto;
    display: block;
}
.st03 .qua_item_img img{
    width: 90%;
    margin: 0 auto;
    display: block;
}
.st04 .qua_item_img img{
    width: 75%;
    margin: 0 auto;
    display: block;
}

.qua_lead_tl{
    text-align: left;
}

.type_name{
    font-size: 16px;
    color: #fff;
    background: url(../img/quality/type_bg.jpg);
    background-size: contain;
    background-repeat: repeat-x;
    width: 100%;
    margin-bottom: 20px;
    padding: 0.3em 1em;
    text-transform: uppercase;
}
.qua_col2_flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.qua_col2_text{
    width: 48%;
}
.qua_col2_img{
    width: 48%;
    max-width: 230px;
}

.shower_inner{
    max-width: 500px;
    margin: 0 auto;
}

.powder .qua_col2_text{
    width: 30%;
}
.powder .qua_col2_img{
    width: 66%;
    max-width: 316px;
}
.amenity01{
    max-width: 580px;
    margin: 0 auto;
}
.amenity02{
    max-width: 360px;
    margin: 0 auto;
    width: 90%;
}

.st01 .qua_item_img{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


.multimedia_flex{
    display: flex;
    align-items: center;
}
.multimedia_flex02{
    display: flex;
    gap: 10px;
    margin: 20px auto 10px;
}
.multimedia_flex_item{
    width: 100%;
    background: #864847;
}
.multimedia_flex_item p{
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 1.8;
    padding: 1em;
    white-space: nowrap;
}

@media screen and (max-width: 1000px) {
    .tab_btn_item{
        font-size: 16px;
    }
    /*  */
    .tab_btn02_inner {
        width: 49%;
        height: 50px;
    }
    #kitchen_b, #bathroom_b, #powder_b, #rest_b, #amenity_b, #ecology_b, #multimedia_b, #afterservice_b {
        padding-top: 60px;
        margin-top: -60px;
    }
    
}
@media screen and (max-width: 850px) {
    .tab_btn_item{
        width: 100%;
        margin: 5px 0;
    }
    .tab_btn{
        flex-wrap: wrap;
    }
    .qua_col4 {
        width: 32%;
    }
    .qua_col2 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .kitchen_col {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    .qua_item_inner_flex_img {
        max-width: unset;
    }
    .qua_flex_col4::before, .qua_flex_col4::after {
        width: 32%;
    }
    .mirror_flex {
        max-width: 650px;
        margin: 0 auto;
        width: auto;
    }
    .qua_col2.half850{
        width: 48%;
    }
    .qua_col4.half850{
        width: 48%;
    }
    .full850{
        width: 100%!important;
    }
    .st01 .qua_item_img{
        width: 100%;
        margin: 20px auto 0;
        display: block;
        max-width: 340px;
    }
    .st02 .qua_item_img{
        width: 100%;
        margin: 20px auto 0;
        display: block;
        max-width: 660px;
    }
    .st02 .qua_item_img img{
        width: 100%;
    }

    .qua_col4.autolock .qua_item_img{
        max-width: 220px;
        margin: 10px auto 0;
    }
    .qua_col2_flex {
        display: flex;
        justify-content: center;
        gap: 4%;
        align-items: center;
    }
    
}
@media screen and (max-width: 750px) {
    #amenity .qua_col4 {
        width: 48%;
    }
    #amenity .qua_col3{
        width: 48%;
    }
}
@media screen and (max-width: 650px) {
    .ttl_underline {
        margin-bottom: 10px;
    }
    .tab_btn_item span {
        /* font-size: 20px; */
        padding-right: 5px;
    }
    .tab_btn {
        margin-bottom: 20px;
    }
    .tab_btn02 {
        margin-bottom: 45px;
    }
    .tab_btn_item {
        height: 50px;
        font-size: 15px;
    }
    .qua_col3 {
        width: 48%;
    }
    .qua_item_name {
        font-size: 13px;
    }
    .qua_item_lead {
        font-size: 12px;
    }
    .qua_col4 {
        width: 48%;
    }
    .qua_col2 {
        width: 100%;
    }
    .mirror_flex{
        flex-wrap: wrap;
        justify-content: center;
        max-width: 400px;
    }
    .qua_col_mirror {
        width: 100%;
        max-width: unset;
    }
    .mirror_img {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 20px;
    }
    #amenity .qua_col3{
        width: 100%;
    }
    #amenity .qua_col3 .qua_item_img{
        max-width: 350px;
        margin: 10px auto 0;
        width: 100%;
    }

    .door_flex {
        flex-wrap: wrap;
        justify-content: center;
    }
    .door_list{
        width: 100%;
    }
    .door_img {
        width: 100%;
        max-width: 240px;
        margin-bottom: 40px;
    }
    .door_item {
        flex-wrap: wrap;
    }
    .door_item_text{
        width: 100%;
        margin-bottom: 20px;
    }
    .door_item_img {
        max-width: 240px;
        width: 60%;
        margin: 0 auto 20px;
    }

    .qua_col3.st03{
        width: 100%;
    }
    .qua_col3.st04{
        width: 100%;
    }
    .qua_col3.st05{
        width: 100%;
    }

    .st03 .qua_item_img{
        width: 100%;
        margin: 20px auto 0;
        display: block;
        max-width: 400px;
    }
    .st04 .qua_item_img{
        width: 100%;
        margin: 10px auto 0;
        display: block;
        max-width: 400px;
    }
    .st05 .qua_item_img{
        width: 100%;
        margin: 30px auto 0;
        display: block;
        max-width: 400px;
    }
    .full650{
        width: 100%!important;
    }

    .multimedia_flex02{
        flex-wrap: wrap;
    }
    .multimedia_flex_item p {
        padding: 0.5em;
    }
    .multimedia_ucom {
        max-width: unset;
        min-width: unset;
        margin: 20px 0 0;
        width: 48%;
        max-width: 200px;
    }
    .multimedia_flex{
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 4%;
    }
}
@media screen and (max-width: 550px) {
    .kitbox_inner{
        flex-wrap: wrap;
    }
    .kitbox_text{
        width: 100%;
        max-width: unset;
    }
    .kitbox_img{
        margin: 0 auto 20px;
    }
    .qua_col2_flex.powder{
        flex-wrap: wrap;
    }
    .powder .qua_col2_img{
        width: 100%;
        max-width: 360px;
    }
    .powder .qua_col2_text{
        width: 100%;
    }
    .type_name {
        margin-bottom: 15px;
        font-size: 14px;
    }
    
}
@media screen and (max-width: 370px) {
	.tab_btn_item{
        font-size: 13px;
    }
}