/* features3
------------------------------------------*/
.feature-tab-contents-inner.flex-between {
    gap: 2em 0;
}

/* 3-1 ==================*/
/* 3-1-1 */
.feature3-1-1 .box {
    width: 40%;
}

@media screen and (max-width: 767px) {
    .feature3-1-1 .box {
        width: 100%;
    }
}

.feature3-1-1 .box .box-title {
    font-size: min(1.5em, 4.5vw);
    line-height: 1.7;
}

.feature3-1-1 .box .box-title .sml {
    display: block;
    font-size: .8em;
    font-weight: 400;
}

.feature3-1-1 figure {
    width: 55%;
}

@media screen and (max-width: 767px) {
    .feature3-1-1 figure {
        width: 100%;
    }
}

/* 3-1-2 */
.feature3-1-2 .flex-between {
    margin-top: 3em;
    gap: 3em 0;
}

.feature3-1-2 figure {
    margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
    .feature3-1-2 .flex-between .box {
        width: 100%;
    }
}

/* 3-1-3 */
.feature3-1-3 .note {
    margin-top: 1em;
}

.feature3-1-3 .flex-between {
    margin-top: 3em;
    gap: 3em 0;
}

.feature3-1-3 figure {
    margin-bottom: 1em;
}

@media screen and (max-width: 767px) {

    .feature3-1-2 .flex-between .box,
    .feature3-1-3 .flex-between .box {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .feature3-1-2 .flex-between .box figure,
    .feature3-1-3 .flex-between .box figure {
        width: 35%;
        margin-bottom: 0;
    }

    .feature3-1-2 .flex-between .box figure img,
    .feature3-1-3 .flex-between .box figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .feature3-1-2 .flex-between .box .txt-box,
    .feature3-1-3 .flex-between .box .txt-box {
        text-align: left;
        width: 60%;
    }

    .feature3-1-2 .flex-between .box .txt-box .box-subtitle,
    .feature3-1-3 .flex-between .box .txt-box .box-subtitle {
        text-align: left;

    }

    .feature3-1-2 .flex-between .box .txt-box p,
    .feature3-1-3 .flex-between .box .txt-box p {
        text-align: left;
        font-size: 3.2vw;
    }

    .feature3-1-2 .flex-between .box p br,
    .feature3-1-3 .flex-between .box p br {
        display: none;
    }
}

/* 3-1-4 */
.feature3-1-4 .box {
    width: 45%;
}

.feature3-1-4 figure {
    width: 50%
}

@media screen and (max-width: 767px) {

    .feature3-1-4 .box,
    .feature3-1-4 figure {
        width: 100%;
    }
}

/* 3-1-5 */
.feature3-1-5 .box {
    width: 35%;
}

.feature3-1-5 figure {
    width: 60%;
    display: grid;
    grid-template-columns: 33% 1fr;
    grid-template-rows: auto auto;
    gap: 1em;
}

@media screen and (max-width: 767px) {

    .feature3-1-5 .box,
    .feature3-1-5 figure {
        width: 100%;
    }
}

.feature3-1-5 figure .points {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em .5em;
    counter-reset: points;
}

@media screen and (max-width: 767px) {
    .feature3-1-5 figure .points {
        flex-direction: column;
    }
}

.feature3-1-5 figure .points li {
    flex-grow: 1;
}

.feature3-1-5 figure .points .box-subtitle {
    padding-left: 2em;
    text-align: left;
    letter-spacing: 0;
    position: relative;
}

.feature3-1-5 figure .points .box-subtitle::before {
    counter-increment: points;
    content: counter(points);
    width: 1.7em;
    text-align: center;
    line-height: 1.7;
    position: absolute;
    left: 0;
    color: #fff;
    background-color: var(--color-navy);
    border-radius: 100%;
}

@media screen and (max-width: 767px) {
    .feature3-1-5 figure .points p br {
        display: none;
    }
}

/* 3-2 ===================*/
/* 3-2-1 */
.feature3-2-1 .flex1 {
    gap: 1em 0;
}

.feature3-2-1 .flex1 .box {
    width: 45%;
}

@media screen and (max-width: 767px) {
    .feature3-2-1 .flex1 .box {
        width: 100%;
    }
}

.feature3-2-1 .flex1 .box .box-title {
    margin-bottom: .5em;
}

.feature3-2-1 .flex1 .box .box-title~.box-title {
    margin-top: 1.5em;
}

.feature3-2-1 .flex1 .box .box-lead {
    font-size: min(1em, 3.8vw);
}

.feature3-2-1 .flex1 figure {
    width: 50%;
}

@media screen and (max-width: 767px) {
    .feature3-2-1 .flex1 figure {
        width: 100%;
    }
}

.feature3-2-1 aside {
    width: min(650px, 100%);
    margin: 2em auto;
    align-items: center;
    background-color: #eeeeef;
}

.feature3-2-1 aside .box {
    width: 47%;
    padding: 1em 2em;
}

.feature3-2-1 aside figure {
    width: 50%;
    align-self: flex-end;
}

@media screen and (max-width: 767px) {
    .feature3-2-1 aside .box {
        padding: 1.5em 1em 0;
    }

    .feature3-2-1 aside .box,
    .feature3-2-1 aside figure {
        width: 100%;
        align-self: flex-end;
    }
}

/* 3-2-2 */
.feature3-2-2 .left {
    width: 30%;
}

@media screen and (max-width: 767px) {
    .feature3-2-2 .left {
        width: 100%;
    }
}

.feature3-2-2 .link-btn {
    display: block;
    width: min(20em, 100%);
    margin-top: 2em;
    padding: 1em .5em 1em 0;
    color: #fff;
    background-color: var(--color-navy);
    border: solid 1px var(--color-navy);
    text-align: center;
    line-height: 1.5;
    position: relative;
    transition: all .3s 0s ease;
    font-size: min(.9em, 3.2vw);
}

@media screen and (max-width: 767px) {
    .feature3-2-2 .link-btn {
        margin-top: 0;
        margin-inline: auto;
    }
}

.feature3-2-2 .link-btn::after {
    content: '';
    width: .6em;
    height: .6em;
    border-top: solid 1px;
    border-right: solid 1px;
    position: absolute;
    top: 50%;
    right: 1em;
    translate: 0 -50%;
    rotate: 45deg;
    transition: right .3s 0s ease;
}

.feature3-2-2 .link-btn:hover::after {
    right: .7em;
}

.feature3-2-2 .right {
    width: 65%;
}

@media screen and (max-width: 767px) {
    .feature3-2-2 .right {
        width: 100%;
    }
}

.feature3-2-2 .right .evas-features {
    margin-bottom: 1em;
    counter-reset: evas;
}

.feature3-2-2 .right .evas-features li {
    width: 32.5%;
    padding: .5em .2em;
    font-size: min(.85em, 3vw);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--color-navy);
    background-color: #eeeeef;
}

.feature3-2-2 .right .evas-features li::before {
    counter-increment: evas;
    content: counter(evas);
    display: block;
    font-size: 1.4em;
}

.feature3-2-2 .right .note {
    width: max-content;
    max-width: 100%;
    margin-top: 1em;
    margin-left: auto;
    font-size: .8em;
}

/* 3-3 ===================*/
/* 3-3-1 */
.feature3-3-1 .flex-between {
    gap: 2em 0;
}

.feature3-3-1 .box {
    width: 35%;
}

@media screen and (max-width: 767px) {
    .feature3-3-1 .box {
        width: 100%;
    }
}

.feature3-3-1 .box .note {
    margin-top: 1em;
}

.feature3-3-1 figure {
    width: 55%;
}

@media screen and (max-width: 767px) {
    .feature3-3-1 figure {
        width: 100%;
    }
}

.feature3-3-1 figure figcaption {
    margin-bottom: 1em;
    font-size: .9em;
    font-weight: 500;
}

.feature3-3-1 .point {
    width: min(780px, 100%);
    padding: min(2em, 6vw) min(2em, 4vw);
    margin: min(3em, 7vw) auto 0;
    align-items: center;
    gap: 1em;
    background-color: #eeeeef;

}

.feature3-3-1 .point .hd {
    width: max-content;
    font-size: min(1em, 3.5vw);
    padding: .5em 1em;
    line-height: 1;
    border-radius: 100vmax;
    color: #fff;
    background-color: var(--color-navy);
}

.feature3-3-1 .point p {
    color: var(--color-navy);
    text-align: center;
}

.feature3-3-1 .point p .icon-arrow {
    display: inline-block;
    width: .8em;
    height: .8em;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-color: var(--color-navy);
    margin: 0 .5em;
}

@media screen and (max-width:767px) {
    .feature3-3-1 .point p .icon-arrow {
        display: block;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        background-color: var(--color-navy);
        margin: .5em auto;
    }
}

.feature3-3-1 .point p span {
    display: inline-block;
    font-size: 1.1em;
    color: #e56c66;
}


/* 3-3-2 */
@media screen and (max-width: 550px) {
    .feature3-3-2 figure {
        width: 100% !important;
    }
}

.feature3-3-2 .typeT {
    background-color: #eeeeef;
}

.feature3-3-2 .typeH {
    background-color: #f9f9fa;
}

.feature3-3-2 figure figcaption {
    height: 5em;
    font-size: min(1em, 4vw);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--color-navy);
}

.feature3-3-2 figure figcaption .logo {
    display: block;
    width: 6em;
    margin: .5em auto 0;
}

@media screen and (max-width: 767px) {
    .feature3-3-2 ul {
        gap: 2em 0;

    }

    .feature3-3-2 ul li {
        width: 100% !important;
    }
}

/* 3-4 ===================*/
/* 3-4-1 */
.feature3-4-1 .left {
    width: 30%
}

.feature3-4-1 .right {
    width: 65%;
}

@media screen and (max-width: 767px) {

    .feature3-4-1 .left,
    .feature3-4-1 .right {
        width: 100%;
        gap: 2em 0;
    }
}

.feature3-4-1 .right .box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {

    .feature3-4-1 .left .box,
    .feature3-4-1 .right .box {
        padding: 0 18%;
    }
}

.feature3-4-1 .right p {
    text-align: center;
}

.feature3-4-1 .right p.hd {
    width: min(19em, 100%);
    margin: 0 auto .5em;
    padding: .5em;
    display: grid;
    place-items: center;
    flex-grow: 1;
    border: solid 1px;
    color: var(--color-navy);
    line-height: 1.2;
    font-size: min(1em, 3.4vw);
}

.feature3-4-1 .right p.hd .em {
    font-size: 1.5em;
    font-weight: 500;
}

.feature3-4-1 .right p:not(.hd) {
    font-size: min(.8em, 3vw);
    line-height: 1.5;
}

/* 3-4-2 */
.feature3-4-2 figcaption {
    width: 100%;
    margin-top: 3em;
    padding: .5em;
    font-size: min(1.1em, 4vw);
    text-align: center;
    color: var(--color-navy);
    background-color: #dbdcdc;
}

@media screen and (max-width: 500px) {
    .feature3-4-2 figure .flex-between {
        gap: 3em 0;
    }

    .feature3-4-2 figure .box {
        width: 100%;
    }
}

/* 3-4-3 */
.feature3-4-3 .feature-contents-title .sml {
    display: inline-block;
}

.feature3-4-3 .feature-contents-lead {
    font-size: min(1.2em, 3.8vw);
}

.feature3-4-3 figure {
    margin-top: 3em;
}

/* 3-5 ===================*/
.feature-tab-contents .slider {
    --arrow-opacity: 1;
    --arrow-color: var(--color-navy);
    --arrow-size: 1.5rem;
    /* width: min(900px, 96%); */
    margin: 0 auto;
    padding-bottom: 2em;

}

.feature-tab-contents .slick-dots {
    --dot-size: 10px;
    --dot-color: var(--color-navy);
    bottom: -.5rem;
}

.feature-tab-contents :is(.slick-prev, .slick-next) {
    top: unset;
    bottom: -.6rem;
    transform: unset;
}

.feature-tab-contents .slick-prev {
    left: unset;
    right: calc(50% + 4rem);
}

.feature-tab-contents .slick-next {
    left: calc(50% + 4rem);
    right: unset;
}

/* 3-5-1 */
.feature3-5-1 .slider .box {
    width: 35%;
}

.feature3-5-1 .slider figure {
    width: 60%;
}

.feature3-5-1 .slider .slide-item1 .box {
    width: 45%;
}

.feature3-5-1 .slider .slide-item1 figure {
    width: 50%;
}

@media screen and (max-width: 767px) {
    .feature3-5-1 .slider .slide-item .flex-between {
        gap: 0;
    }

    .feature3-5-1 .slider .box,
    .feature3-5-1 .slider figure {
        width: 100% !important;
    }

    .feature3-5-2 .slider .box-title br,
    .feature3-5-2 .slider .box-lead br,
    .feature3-5-1 .slider .box-title br,
    .feature3-5-1 .slider .box-lead br {
        display: none;
    }
}

.feature3-5-1 .slider figure .note {
    margin-top: .5em;
}

/* 3-5-2 */
.feature3-5-2 .slider .box {
    width: 35%;
}

.feature3-5-2 .slider figure {
    width: 60%;
}

@media screen and (max-width: 767px) {
    .feature3-5-2 .slider .slide-item {
        gap: 2em 0;
    }

    .feature3-5-2 .slider .box,
    .feature3-5-2 .slider figure {
        width: 100% !important;
    }
}

/* 3-5-3 */
.feature3-5-3 .flooring-lineup {
    display: grid;
    grid-template-columns: 35% 65%;
    /* grid-template-rows: repeat(2, 1fr); */
    gap: 2em;
    margin: 2em auto;
}

@media screen and (max-width:767px) {
    .feature3-5-3 .flooring-lineup {
        display: block;
        margin: 2em auto;
    }
}

.feature3-5-3 .lineup-name {
    background-color: var(--color-bg);
    font-size: min(1.1em, 3.3vw);
    font-family: var(--en);
    padding: .5em;
    margin-bottom: 1em;
}

.feature3-5-3 .lineup-list li {
    margin-bottom: 1em;
}

@media screen and (max-width:767px) {
    .feature3-5-3 .lineup-list li {
        width: 48%;
    }
}

.feature3-5-3 .lineup-list li p {
    font-size: min(.9em, 3vw);
    font-feature-settings: "palt";
    line-height: 1.4;
    padding: .5em 0;
}

.feature3-5-3 .linup2 {
    grid-column-start: 1;
    grid-row-start: 2;
}

.feature3-5-3 .linup3 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
}

.feature3-5-3 .linup3 .spec {
    margin-top: 1em;
}

.feature3-5-3 .linup3 .spec li {
    font-size: min(.9em, 3vw);
    width: 49%;
    background-color: var(--color-bg2);
    padding: .5em;
    margin-bottom: 1%;
    text-align: center;
}

.flooring-features {
    margin: 2em auto;
}

.flooring-feature {
    width: 26%;
}

@media screen and (max-width:767px) {
    .flooring-feature {
        width: 48%;
        margin-bottom: 1em;
    }

    .flooring-feature .box {
        width: 49%;
    }
}

.flooring-feature.flooring-standard {
    width: 40%;
}

@media screen and (max-width:767px) {
    .flooring-feature.flooring-standard {
        width: 100%;
    }

}

.flooring-feature-title {
    font-size: min(1em, 3.5vw);
    margin-bottom: 1em;
}

p.flooring-caption {
    font-size: min(.9em, 3vw);
    line-height: 1.5;
    margin-top: 1em;
}

/* 3-5-4 */
@media screen and (max-width: 767px) {
    .feature3-5-4 .flex-between {
        gap: 2em 0;
    }
}

.feature3-5-4 .left {
    width: 60%;
}

@media screen and (max-width: 767px) {
    .feature3-5-4 .left {
        width: 100%;
    }
}

.feature3-5-4 .left h6 {
    width: 100%;
    margin-bottom: 1em;
    padding: .5em;
    font-size: min(1em, 3.8vw);
    font-weight: 400;
    text-align: center;
    color: var(--color-navy);
    background-color: #dbdcdc;
}

.feature3-5-4 .left figure {
    margin-top: 2em;
}

.feature3-5-4 .right {
    width: 35%;
}

@media screen and (max-width: 767px) {
    .feature3-5-4 .right {
        width: 100%;
    }
}

.feature3-5-4 .note {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    font-size: .85rem;
}

/* 3-5-5 */
.feature3-5-5 .smarthome {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 30% 30% 20em;
    grid-template-rows: auto auto;
    justify-content: space-between;
    gap: 1.5em 1em;
}

@media screen and (max-width: 767px) {
    .feature3-5-5 .smarthome {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (max-width: 600px) {
        .feature3-5-5 .smarthome {
            display: flex;
            flex-direction: column;
        }
    }
}

.feature3-5-5 .smarthome>div:not(:last-child) {
    display: grid;
    align-content: center;
    grid-template-columns: 35% 1fr;
    grid-template-rows: auto auto;
    gap: 0 1em;

}

.feature3-5-5 .smarthome>div:not(:last-child) .box-subtitle {
    text-align: left;
    align-self: end;
}

.feature3-5-5 .smarthome>div:not(:last-child) p {
    line-height: 1.5;
}

@media screen and (max-width: 767px) {
    .feature3-5-5 .smarthome>div p br {
        display: none;
    }
}

.feature3-5-5 .smarthome>div:not(:last-child) .img {
    grid-column: 1/2;
    grid-row: 1/3;
}

.feature3-5-5 .smarthome>div:last-child {
    grid-column: 3/4;
    grid-row: 1/3;
    align-content: center;
    /* align-self: auto; */

}

@media screen and (max-width: 767px) {
    .feature3-5-5 .smarthome>div:last-child {
        grid-column: 1/3;
        grid-row: 3/4;
        align-content: center;
    }
}

.feature3-5-5 .smarthome>div:last-child .img {
    margin-bottom: 1em;
}