.elvia {
    --link-btn-color: #156082;
    --inner-w: 1400px;
    --main-color: #222;
    --bg-color: #d7ded8;
    --brand-color: #8aa49f;
    --en: "Crimson Text", serif;
    /* --mellow: #cfc6b2; */
    --mellow: #c1b396;
    /* --jazzy: #361f12; */
    --jazzy: #4d2f1e;
    /* --grace: #bfc0bc; */
    --grace: #9e9e9b;
    /* --vibrant: #eddfc7; */
    --vibrant: #e6d2af;
}

.sekisui-linkBtn {
    width: 100%;
    max-width: 330xp;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--link-btn-color);
    background-color: var(--link-btn-color);
    color: #fff;
    font-size: min(1em, 3.5vw);
    font-family: 'NotoSansCJKjp', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'メイリオ', 'Meiryo', sans-serif;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    transition: background-color 350ms cubic-bezier(.215, .61, .355, 1), color 350ms cubic-bezier(.215, .61, .355, 1);
}

.sekisui-linkBtn__ag {
    display: block;
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    background: var(--link-btn-color);
    -webkit-mask: url(/common/images/icon_arrow01.svg) 0 0/contain no-repeat;
    mask: url(/common/images/icon_arrow01.svg) 0 0/contain no-repeat;
    transition: transform 400ms cubic-bezier(.215, .61, .355, 1) 30ms, background-color 400ms cubic-bezier(.215, .61, .355, 1) 30ms;
}

.sekisui-linkBtn__ag:nth-child(1) {
    transform: translate(0, -50%);
    right: 19px;
}

.sekisui-linkBtn__ag:nth-child(2) {
    transform: translate(-40px, -50%);
    left: 19px;
}

@media print,
(min-width: 768px) {
    .sekisui-linkBtn {
        height: 70px;
    }
}

@media screen and (max-width: 767px) {
    .sekisui-linkBtn {
        height: 60px;
    }
}

@media print,
(min-width: 768px) {

    .sekisui-linkBtn:hover,
    .sekisui-linkBtn:active {
        color: #fff;
        background-color: var(--link-btn-color);
    }

    .sekisui-linkBtn:hover .sekisui-linkBtn__ag,
    .sekisui-linkBtn:active .sekisui-linkBtn__ag {
        background-color: #fff;
    }

    .sekisui-linkBtn:hover .sekisui-linkBtn__ag:nth-child(1),
    .sekisui-linkBtn:active .sekisui-linkBtn__ag:nth-child(1) {
        transform: translate(40px, -50%);
    }

    .sekisui-linkBtn:hover .sekisui-linkBtn__ag:nth-child(2),
    .sekisui-linkBtn:active .sekisui-linkBtn__ag:nth-child(2) {
        transform: translate(0, -50%);
    }
}


/* base ================================*/

body {
    position: relative;
}

body.fixed {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

.iblock {
    display: inline-block;
}

.forSP {
    display: none;
}

.forPC {
    display: block;
}

@media (max-width:767px) {
    .forSP {
        display: block;
    }

    .forPC {
        display: none;
    }
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sml {
    font-size: .8em;
}

.en {
    font-family: var(--en);
}

.sml7 {
    font-size: .7em;
}

.sml6 {
    font-size: .6em;
}

.sml5 {
    font-size: .5em;
}

.mtop-1 {
    margin-top: 1em !important;
}

.mtop-2 {
    margin-top: 2em !important;
}

.mtop-3 {
    margin-top: 3em !important;
}

.mtop-4 {
    margin-top: 4em !important;
}

.mbtm-1 {
    margin-bottom: 1em !important;
}

.mbtm-2 {
    margin-bottom: 2em !important;
}

.mbtm-3 {
    margin-bottom: 3em !important;
}

.mbtm-4 {
    margin-bottom: 4em !important;
}


.indent05 {
    text-indent: .5em;
    display: inline-block;
}

.indent-05 {
    text-indent: -.5em;
    display: inline-block;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* elvia setting ================================*/
.elvia {
    /* font-family: "Crimson Text", "Shippori Mincho", serif; */
    font-family: "Shippori Mincho", serif;
}

@media print,
(min-width: 768px) {
    .elvia {
        min-width: 1140px;
    }
}

.elvia *,
.elvia *::before,
.elvia *::after {
    box-sizing: border-box;
}

/* .elvia a:not(.sekisui-linkBtn) { */
.elvia a {
    margin: auto;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    /* background: transparent; */
    background-color: #fff;
    color: var(--main-color);
}

.elvia ul.note {
    display: block;
    width: fit-content;
    font-size: 12px;
    margin-top: 1em;
}

.elvia ul.note.right {
    margin-left: auto;
}

.elvia ul.note.left {
    margin-right: auto;
}

.elvia ul.note.center {
    margin-left: auto;
    margin-right: auto;
}

.elvia ul.note li {
    padding-left: 1.5em;
    position: relative;
}

.elvia ul.note li::before {
    content: '※';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.elvia {
    counter-reset: numnote;
}

.elvia sup {
    font-size: min(.65em, 2.5vw);
    vertical-align: top;
}

ul.note.numnote {
    /* counter-reset: numnote; */
}

ul.note.numnote li {
    padding-left: 2.2em;
}

.elvia ul.note.numnote li::before {
    content: '※' counter(numnote);
    counter-increment: numnote;
}

.elvia img {
    border: none;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    width: 100%;
    height: auto;
}

.elvia .inner {
    width: 100%;
    max-width: var(--inner-w);
    position: relative;
    margin: auto;
    padding: min(8em, 10vw) 2em;
    text-align: center;
}

@media (max-width:767px) {
    .elvia .inner {
        padding: 4em 2.5em 0;
    }
}

/* introduction ================================*/
@media (max-width:767px) {
    .elvia .introduction .inner {
        padding: 3em 1em;
    }
}

.introduction .intro-wrp .title {
    width: 100%;
    margin-bottom: 1em;
    padding-left: 0.5em;
    font-size: min(2.4em, 6.2vw);
    line-height: 1.8;
    letter-spacing: 0.1em;
    position: relative;
}

.introduction .lead {
    display: block;
    padding-left: 0.5em;
    font-size: min(1.3em, 4.2vw);
    line-height: 2.5;
    font-feature-settings: "palt";
    text-align: center;
}

@media (max-width: 767px) {
    .introduction .lead {
        line-height: 2.2;
    }
}

.introduction .intro-wrp .title,
.introduction .intro-wrp .lead {
    opacity: 0;
    will-change: transform;
}

.introduction .intro-wrp .title.on,
.introduction .intro-wrp .lead.on {
    opacity: 1;
}

/* application-wrp ================================*/
.application-wrp {
    /* padding: 5em 1em; */
    padding: 0 1em;
    margin-bottom: 6em;
    text-align: center;
    /* background-color: var(--bg-color); */
    position: relative;
    z-index: auto;
}

.application-wrp:last-child {
    margin-top: 6em;
}

.application-wrp .application-banner {
    width: min(960px, 96%);
    margin: 0 auto;
    padding: 3em;
    display: grid;
    grid-template-areas: 'img txt' 'img btn';
    grid-template-columns: 1fr 22em;
    align-items: center;
    gap: 1em 2em;
    /* background-color: #fff; */
    background-color: color-mix(in srgb, var(--bg-color) 20%, white);
    position: relative;
}

@media (max-width: 767px) {
    .application-wrp .application-banner {
        padding: 2em 1em 3em;
        grid-template-columns: 1fr 22em;
        font-size: .85em;
    }

    @media (max-width: 640px) {
        .application-wrp .application-banner {
            width: min(500px, 100%);
            grid-template-areas: 'img' 'txt' 'btn';
            grid-template-columns: auto;
            gap: 1.5em 1em;
            font-size: 1em;
        }
    }
}

.application-wrp .application-banner::after {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    top: 0;
    left: 0;
    border: solid 10px var(--bg-color);
    pointer-events: none;
    z-index: 1;
}

.application-wrp .application-banner .img {
    grid-area: img;
}

@media (max-width: 640px) {
    .application-wrp .application-banner .img {
        margin-bottom: 1em;
    }
}

.application-wrp .application-banner .text {
    grid-area: txt;
    align-self: end;
}

.application-wrp .application-banner .text .logo {
    width: 10em;
    margin: 0 auto 1.5em;
}

.outroduction~.application-wrp .application-banner .text .logo {
    width: 12em;
}

@media (max-width: 767px) {
    .application-wrp .application-banner .text .logo {
        width: min(12em, 50%) !important;
    }
}

.application-wrp .application-banner .text p {
    font-size: min(1em, 3.8vw);
}

.application-wrp .application-banner .sekisui-linkBtn {
    font-size: .9em;
    height: 3.5em;
    grid-area: btn;
}

@media (max-width: 767px) {
    .application-wrp .application-banner .sekisui-linkBtn {
        width: 18em;
        height: 4em;
    }
}


/* navigation ================================*/
.contents-nav {
    padding: min(3em, 5vw) 1em !important;
}

.contents-nav .contents-list {
    display: flex;
}

@media (max-width: 680px) {
    .contents-nav .contents-list {
        flex-wrap: wrap;
    }
}

.contents-nav .contents-list li {
    width: 25%;
    padding: 0 .5em;
}

@media (max-width: 767px) {
    .contents-nav .contents-list li {
        width: 50%;
        padding: .5em;
    }
}

.contents-nav .contents-list li+li {
    border-left: solid 1px;
}

@media (max-width: 680px) {
    .contents-nav .contents-list li+li {
        border-left: unset;
    }

    .contents-nav .contents-list li:nth-child(even)::before {
        content: '';
        position: absolute;
        top: .75em;
        bottom: .75em;
        left: -1px;
        border-left: solid 1px #aaa;
    }

    .contents-nav .contents-list li:nth-child(n+3)::after {
        content: '';
        position: absolute;
        left: .75em;
        right: .75em;
        top: -1px;
        border-top: solid 1px #aaa;
    }
}

.contents-nav .contents-list li a {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 1em .5em;
    text-align: center;
    font-size: 1.15em;
    line-height: 1.3;
    background-color: transparent;
    position: relative;
    transition: background-color .3s 0s ease;
}

@media (max-width: 680px) {
    .contents-nav .contents-list li a {
        padding: 1em .5em 1.5em;
        font-size: min(1em, 4.2vw);
    }
}

.contents-nav .contents-list li a:hover {
    background-color: color-mix(in srgb, var(--bg-color) 35%, white);
}

.contents-nav .contents-list li a::after {
    content: '';
    display: inline-block;
    width: .6em;
    height: .6em;
    margin-left: 1em;
    margin-right: -1.5em;
    border-bottom: solid 1px;
    border-right: solid 1px;
    transform: translateY(-85%) rotate(45deg);
    transition: transform .3s 0s ease;
    position: absolute;
    right: 3em;
    top: 50%;
}

.contents-nav .contents-list li a:hover::after {
    transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 767px) {
    .contents-nav .contents-list li a::after {
        right: 1.75em;
    }

    @media (max-width: 680px) {
        .contents-nav .contents-list li a::after {
            margin: unset;
            right: 50%;
            top: unset;
            bottom: .8em;
            transform: translateX(50%) rotate(45deg);
        }

        .contents-nav .contents-list li a:hover::after {
            transform: translateX(50%) rotate(45deg);
        }
    }
}

/* title wrp ================================*/
.title-wrp {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    z-index: auto;
    contain: paint;
    position: relative;
    background-color: var(--bg-color);
}

@media (max-width: 767px) {
    .title-wrp {
        display: flex;
        flex-direction: column;
    }
}


.title-wrp .chapter-img {
    width: 50%;
    aspect-ratio: 4/3;
    position: relative;
    z-index: 3;
}

@media (max-width: 767px) {
    .title-wrp .chapter-img {
        order: 2;
        width: 100dvw;
        left: unset;
    }
}

.title-wrp .chapter-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

/* title-box */
.title-wrp .title-box {
    width: 50%;
    z-index: 1;
}

@media (max-width: 767px) {
    .title-wrp .title-box {
        order: 1;
        width: 100%;
        padding: 3em 0;
    }
}

.title-wrp .title-box::after {
    content: "";
    width: 95%;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0;
    border: solid 1px #666;
    border-left: 0;
    pointer-events: none;
    z-index: 2;

}

@media (max-width: 767px) {
    .title-wrp .title-box::after {
        border: none;
    }
}

.title-wrp .title-box .title-box-inner {
    height: 100%;
    padding: 2em 4dvw 2em 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (max-width: 767px) {
    .title-wrp .title-box .title-box-inner {
        padding: 2em;
    }
}

.title-wrp .title-box .title-en {
    font-size: min(1.5em, 4.4vw);
    margin-bottom: 1.2em;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    position: relative;
}

.title-wrp .title-box .title-en::after {
    content: '';
    display: block;
    width: 2em;
    margin: .75em auto 0;
    border-top: solid 1px;

}

.title-wrp .title-box .title {
    width: 100%;
    font-size: min(1.6em, 5vw);
    font-weight: 500;
    line-height: 1.6;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

.title-wrp span:not(.iblock) {
    display: block;
}

.sticky-wrp {
    position: relative;
}

.side-title {
    position: sticky;
    top: 0;
}

.side-title .title-en {
    position: absolute;
    top: 110px;
    right: 0;
    border-top: 2px solid;
    padding: 1em min(.7em, 1vw) 1em min(2.5em, .5vw);
    margin-left: auto;
    writing-mode: vertical-rl;
    font-size: min(1.3em, 3vw);
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
}

.chapter01,
.chapter02 {
    /* background-color: color-mix(in srgb, var(--bg-color) 50%, white); */
    padding-bottom: min(6em, 7vw);
}

/* co-wrp ================================*/
/* co-wrp-w */
.co-img-box {
    padding-top: 2em;
}

@media (max-width: 640px) {
    .co-img-box {
        aspect-ratio: 4/3;
    }

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

:is(.co-wrp, .co-wrp-w) .co-title {
    width: 100%;
    margin-bottom: 1em;
    font-size: min(1.6em, 2.5vw);
    font-weight: 500;
    line-height: 1.6;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

@media (max-width: 767px) {
    :is(.co-wrp, .co-wrp-w) .co-title {
        font-size: min(1.5em, 4.8vw);
    }
}

.co-wrp-w .lead {
    width: 100%;
    display: block;
    font-size: min(1.05em, 2vw);
    line-height: 2;
}

@media (max-width: 767px) {
    .co-wrp-w .lead {
        font-size: min(1em, 3.8vw);
    }
}

/* co-wrp */
.co-wrp {
    align-items: center;
    gap: 1em 2em;
    overflow: hidden;

}

@media (min-width: 768px) {
    .co-wrp {
        flex-wrap: nowrap;
    }
}

/* co-wrp - img-box */
.co-wrp .img-box {
    width: 60%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .co-wrp .img-box {
        width: 50%;
    }

    @media (max-width: 767px) {
        .co-wrp .img-box {
            width: 100%;
            order: 1;
        }
    }
}

.co-wrp .img-box-inner {
    aspect-ratio: 4/3;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .co-wrp .img-box-inner {
        aspect-ratio: 1/1;
    }
}

.co-wrp .img-box-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* co-wrp - text-box */
.co-wrp .text-box {
    width: 35%;
    padding: 2em;
    flex-grow: 1;
    text-align: left;
    position: relative;
    z-index: 0;
}

@media (max-width: 1024px) {
    .co-wrp .text-box {
        padding: 2em 1em;
    }

    @media (max-width: 767px) {
        .co-wrp .text-box {
            width: 100%;
            padding: 2em .5em;
            order: 2;
        }
    }
}

.co-wrp .text-box .co-title {
    margin-bottom: 2em;
    transform-origin: left top;
    position: relative;
}

.co-wrp .text-box .co-title:after {
    content: '';
    width: 130%;
    position: absolute;
    left: 0;
    bottom: -.5em;
    border-bottom: solid 1px #666;
    transition: width .8s .3s ease;
}

.co-wrp .img-box+.text-box .co-title:after {
    left: unset;
    right: 0;
}

.co-wrp .text-box .co-lead {
    margin-top: 1em;
    font-size: min(1.05em, 3.8vw);
    transform-origin: left top;
    line-height: 2;
    text-align: justify;
    letter-spacing: -0.01em;
}


/* factory made ================================*/
.factory-made {
    width: 1024px;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
}

@media (max-width: 767px) {
    .factory-made {
        max-width: 84%;
        order: 2;
    }
}

.factory-made::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 1em;
    left: 1em;
    background-color: color-mix(in srgb, var(--bg-color) 30%, white);
    z-index: 0;
}

.factory-made::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: solid 1px #666;
    z-index: 2;

}

.factory-made .img-box {
    width: 50%;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .factory-made .img-box {
        width: 100%;
        order: 2;
    }
}

.factory-made .img-box-inner {
    position: relative;
}

@media (max-width: 767px) {
    .factory-made .img-box-inner {
        position: static;
    }
}

.factory-made .text-box {
    width: 50%;
    padding: 3em 2em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

@media (max-width: 767px) {
    .factory-made .text-box {
        width: 100%;
        order: 1;
    }
}

.factory-made .text-box .factory-made-title {
    width: 100%;
    margin-bottom: 1em;
    font-size: min(1.4em, 4.2vw);
    font-weight: 500;
    line-height: 1.6;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

.factory-made .text-box .factory-made-lead {
    margin-top: 1em;
    font-size: min(.95em, 3.8vw);
    transform-origin: left top;
    line-height: 2;
    letter-spacing: -0.01em;
    padding-left: .5em;
}


/* interior-concept ================================*/
.interior_concept {
    padding: 0;
    background-color: #f9f9f9;
}

.interior_concept .inner {
    padding: 5em 0 7em;
    overflow: hidden;
}

@media (max-width: 767px) {
    .elvia .interior_concept .inner {
        padding: 4em 1em 8em;
    }
}

/* title */

.interior_concept .interior_concept-title-wrp .title {
    font-size: min(2em, 6.8vw);
    position: relative;
}

.interior_concept .interior_concept-title-wrp .lead {
    padding: 0 1em;
    margin-top: 1em;
    font-size: min(1.1em, 4.2vw);
    line-height: 1.8;
    position: relative;
}


/* concept-wrp */
.concept-wrp {
    padding-top: 4rem;
    text-align: left;
    position: relative;
}

.concept-wrp .concept-slider {}

.concept-wrp .concept {
    display: grid;
    grid-template-areas: "img type" "img title" "img lead";
    grid-template-columns: 1fr 18em;
    grid-template-rows: 1fr auto 7em;
    gap: 1.5em 3em;
    font-size: min(1.4em, 2.3vw);
    position: relative;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .concept-wrp .concept {
        grid-template-columns: 1fr 13em;
        gap: 2em;
    }

    @media (max-width: 767px) {
        .concept-wrp .concept {
            grid-template-areas: "type" "title" "lead" "img" "img";
            grid-template-columns: auto;
            grid-template-rows: auto auto 2.5lh auto;
            gap: 1em;
            font-size: min(1.4em, 5vw);
        }
    }
}

.concept-wrp .concept-img {
    grid-area: img;
    aspect-ratio: 16/9;
    z-index: 1;
}

@media (max-width: 767px) {
    .concept-wrp .concept-img {
        aspect-ratio: unset;
    }
}

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

.concept-wrp .concept-type {
    grid-area: type;
    align-self: end;
    position: relative;
    z-index: -1;
    padding: 2em 0;
}

@media (max-width: 767px) {
    .concept-wrp .concept-type {
        padding: 0 1em;
        text-align: center;
    }
}

.concept-wrp .concept-type .type-text {
    display: inline-block;
    height: 1.8em;
    position: relative;
}

.concept-wrp .concept-type .type-text::before {
    content: "";
    display: block;
    width: 200%;
    /* height: 230%; */
    border-bottom: solid 1px;
    position: absolute;
    /* right: .3em; */
    right: -.5em;
    bottom: -.3em;
    z-index: -1;
}

.slick-slide:nth-child(3) .type-text::before {
    border-color: var(--mellow);
}

.slick-slide:nth-child(2) .type-text::before {
    border-color: var(--jazzy);
}

.slick-slide:nth-child(1) .type-text::before {
    border-color: var(--grace);
}

.slick-slide:nth-child(4) .type-text::before {
    border-color: var(--vibrant);
}


@media (max-width: 767px) {
    .concept-wrp .concept-type .type-text::before {
        width: 100%;
        right: 0;
    }
}

.concept-wrp .concept-type img {
    width: auto;
    height: 100%;
}

.concept-wrp .concept-title {
    grid-area: title;
    font-weight: 500;
    line-height: 1.8;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

@media (max-width: 767px) {
    .concept-wrp .concept-title {
        text-align: center;
    }
}

.concept-wrp .concept-lead {
    grid-area: lead;
    padding-right: 3em;
    font-size: min(.95rem, 3.5vw);
    line-height: 1.8;
}

@media (max-width: 767px) {
    .concept-wrp .concept-lead {
        padding-right: 0;
        text-align: center;
    }
}

/* slider arrows/dots */
.concept-wrp .arrow-box {
    --border-width: 1px;
    --hover-color: var(--drand-color);
    width: 10%;
    display: flex;
    justify-content: center;
    gap: .75em;
    position: absolute;
    right: 3em;
    bottom: 0;
    font-size: min(1.4em, 2.3vw);
}

@media (max-width: 767px) {
    .concept-wrp .arrow-box {
        width: 100%;
        font-size: min(1.4em, 5vw);
        right: 0;
        bottom: -4.5em;
    }
}

.concept-wrp :is(.prev-arrow, .next-arrow) {
    width: 30%;
    position: relative;
    top: unset;
    bottom: unset;
    cursor: pointer;
    color: #666;
    transition: color .2s 0s ease;
}

.concept-wrp :is(.prev-arrow, .next-arrow):hover {
    color: var(--hover-color);
}

.concept-wrp .prev-arrow::before,
.concept-wrp .next-arrow::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    z-index: 10;
    position: absolute;
    /* left: 50%; */
    top: 50%;
    /* transform: translateX(-50%); */
    border-top: solid var(--border-width);
}

.concept-wrp .prev-arrow::before {
    left: 0;
}

.concept-wrp .next-arrow::before {
    right: 0;
}

.concept-wrp .prev-arrow::after,
.concept-wrp .next-arrow::after {
    content: "";
    display: block;
    width: 20%;
    aspect-ratio: 1/1;
    z-index: 10;
    position: absolute;
    /* top: calc(50% + 1px); */
    top: 50%;
    border-top: solid var(--border-width);
}

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

    .concept-wrp .prev-arrow::after,
    .concept-wrp .next-arrow::after {
        width: 10%;
    }
}

.concept-wrp .prev-arrow::after {
    left: 0;
    /* border-left: solid var(--border-width); */
    transform: translate(1px, -50%) rotate(-45deg);
}

.concept-wrp .next-arrow::after {
    right: 0;
    /* border-right: solid var(--border-width); */
    transform: translate(-1px, -50%) rotate(45deg);
}

/* pause */
.concept-wrp .arrow-box .slick-pause {
    width: min(1em, 8vw);
    height: min(1em, 8vw);
    border-radius: 100%;
    border: solid var(--border-width);
    color: #666;
    position: relative;
    cursor: pointer;
    z-index: 2;
    transition: color .2s 0s ease;
}

.concept-wrp .arrow-box .slick-pause:hover {
    color: var(--hover-color);
}

.concept-wrp .arrow-box .slick-pause::before,
.concept-wrp .arrow-box .slick-pause::after {
    position: absolute;
    inset: 50%;
}

.concept-wrp .arrow-box .slick-pause.pause::before {
    content: none;
}

.concept-wrp .arrow-box .slick-pause::before {
    content: '';
    width: 30%;
    aspect-ratio: 1/1.2;
    border-left: solid 1px;
    border-right: solid 1px;
    transform: translate(-50%, -50%);
}

.concept-wrp .arrow-box .slick-pause.pause::after {
    content: '';
}

.concept-wrp .arrow-box .slick-pause::after {
    content: none;
    width: 33%;
    aspect-ratio: 1/1.2;
    background-color: currentcolor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-36%, -50%);
}

/* dots */
.slick-dots {
    --dot-color: #f9f9f9;
    /* --dot-activecolor: var(--drand-color); */
    --dot-opacity: 1;
    --dot-notactivecolor: #ddd;
    --dot-activeopacity: 1;
    --dot-notactiveopacity: 1;
    top: calc(100% + 1.5em);
    bottom: unset;
}

.slick-dots li button::before {
    width: 50px;
    height: 7px;
    border-radius: 0;
}

.slick-dots li:nth-child(3).slick-active button::before {
    --dot-activecolor: var(--mellow);
    background-color: var(--dot-activecolor);
}

.slick-dots li:nth-child(2).slick-active button::before {
    --dot-activecolor: var(--jazzy);
    background-color: var(--dot-activecolor);
}

.slick-dots li:nth-child(1).slick-active button::before {
    --dot-activecolor: var(--grace);
    background-color: var(--dot-activecolor);
}

.slick-dots li:nth-child(4).slick-active button::before {
    --dot-activecolor: var(--vibrant);
    background-color: var(--dot-activecolor);
}

/* model-plan ================================*/
.chapter03 {
    /* background-color: #f9f9f9; */
    /* margin-top: 5em; */
}

.modelplan-wrp .title {
    text-align: center;
    margin: 0 auto;
    padding: 3em 0 .5em;
    position: relative;
    font-size: min(2em, 6.8vw);
}

.modelplan-wrp .title::after {
    content: '';
    display: block;
    width: 2em;
    margin: .5em auto;
    border-bottom: 1px solid;
}

/* title-wrp */
.plan-title-wrp {
    width: 100%;
    text-align: center;
    margin-bottom: 3em;
}

.plan-title-wrp .plan-title {
    font-size: min(1.5em, 5vw);
    margin-bottom: 1em;
}

.plan-lead {
    font-size: min(1.05em, 3.5vw);
    line-height: 1.8;
}

/* model */
.modelplan-wrp .model.inner {
    margin-top: 0;
    padding: 0 1em 5em;
}

@media screen and (max-width:767px) {
    .modelplan-wrp .model.inner {
        padding: 0 1em 3em;
    }
}

.modelplan-wrp .model .plan-title {
    font-size: min(1.5em, 5vw);
}

.modelplan-wrp .model .plan-lead {
    margin-top: 1em;
    font-size: min(1em, 4vw);
}

.modelplan-wrp .model .floormaps {
    margin-top: 5em;
    display: grid;
    grid-template-columns: 55% 40%;
    padding: 0 1.5em;
    gap: 5%;
}

@media (max-width: 767px) {
    .modelplan-wrp .model .floormaps {
        grid-template-areas: "map1 map1" "spec map2";
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr;
        gap: 0;
        padding: 0;
    }

    .modelplan-wrp .model .firstfloor {
        grid-area: map1;
    }

    .modelplan-wrp .model .secondfloor {
        grid-area: map2;
        align-self: end;
    }
}


.modelplan-wrp .model figcaption {
    margin-top: 0.5em;
    font-size: min(0.95em, 3.5vw);
    text-align: left;
}


@media (max-width: 767px) {
    .modelplan-wrp .model .secondfloor figcaption {
        margin-top: -3em;
    }
}

.plan-info {
    width: 100%;
    max-width: 1200px;
    padding: 0;
    margin: 4em auto min(3em, 4vw);
}

.modelplan-wrp .model .spec-wrp {
    width: 14%;
    text-align: left;
    font-size: min(0.83em, 3.3vw);
}

@media (max-width: 767px) {
    .modelplan-wrp .model .spec-wrp {
        width: min(300px, 100%);
        align-self: start;
        margin: 0 auto 3em;
        font-size: min(1em, 3.8vw);
    }
}

.spec-wrp .plan-number {
    font-size: min(1.3em, 4vw);
    margin-bottom: 1em;
}

.modelplan-wrp .spec dt {
    width: 50%;
    text-align: left;
    margin-bottom: .75em;
    padding-bottom: 0.2em;
    flex-shrink: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: currentcolor;
}

.modelplan-wrp .spec dd {
    margin-bottom: .75em;
    padding-bottom: 0.2em;
    flex-grow: 1;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: currentcolor;
    text-align: right;
}

.modelplan-wrp .features-wrp {
    width: 81%;
    counter-reset: features 0;

}

@media screen and (max-width:767px) {
    .modelplan-wrp .features-wrp {
        width: 100%;
    }
}

.modelplan-wrp .features-wrp .feature {
    width: 31%;
    /* font-size: min(0.9em, 3.5vw); */
    text-align: left;
    line-height: 1.8;
    position: relative;

}

@media (max-width: 767px) {
    .modelplan-wrp .features-wrp .feature {
        width: 100%;
        margin-bottom: 2.5em;
    }
}

.modelplan-wrp .features-wrp .title-plan {
    font-size: min(1.4em, 5vw);
    margin-bottom: .5em;
    padding-left: 2em;
    position: relative;

}

.modelplan-wrp .features-wrp p {
    font-size: 1em;
    line-height: 1.8;
    position: relative;
}

@media screen and (max-width:767px) {
    .modelplan-wrp .features-wrp p {
        font-size: 4vw;
    }
}

.modelplan-wrp .features-wrp .feature .title-plan::before {
    content: counter(features);
    counter-increment: features 1;
    position: absolute;
    left: 0;
    top: 0;
    font-size: min(2.5em, 8vw);
    line-height: 1;
    transform: translateY(-.25em);
}

/* outroduction ================================*/
.outroduction {
    /*     background-color: #333; */
    background-color: rgba(215, 222, 216, 0.4);
    position: relative;
}

.outroduction .bg {
    position: relative;
    width: 100%;
    height: calc(100vh - 110px);
    overflow: hidden;
}

@media screen and (max-width:767px) {
    .outroduction .bg {
        height: 80vw;
    }
}

.outroduction .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
}

.outro-wrp {
    position: absolute;
    top: 0;
    left: 60%;
    width: 32%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 5em 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:767px) {
    .outro-wrp {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 4em 2.5em;
    }

}

.outro-wrp::before {
    content: '';
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    border: 1px solid var(--brand-color);
    position: absolute;
    top: 1em;
    left: 1em;
}

.outro-wrp .application-banner {
    width: 100%;
    text-align: center;
}

.outro-wrp .application-banner .text {
    margin-bottom: 2em;
}

.outro-wrp .application-banner .logo {
    width: 60%;
    margin: 0 auto 1em;
    text-align: center;
}

@media screen and (max-width:767px) {
    .outro-wrp .application-banner .logo {
        width: 50%;
    }
}

.outro-wrp .application-banner .img {
    margin: 0 auto 2em;
}