@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&family=Shippori+Mincho:wght@400;600&display=swap');

/* base ================================*/
body {
    --catalogue-color: #5b383f;
    --catalogue-color2: #886369;
    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,
.pagemodal {
    --link-btn-color: #156082;
    --inner-w: 1400px;
    --main-color: #222;
    --bg-color: #f7f4f4;
    --brand-color: #8aa49f;
    --en: "Crimson Text", serif;
    --page-color: #886369;
    --mellow: #c1b396;
    --jazzy: #4d2f1e;
    --grace: #9e9e9b;
    --vibrant: #e6d2af;
    font-family: "Crimson Text", "Shippori Mincho", serif;
}

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

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

.elvia a {
    margin: auto;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background-color: transparent;
}

.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;
}

.elvia sub {
    font-size: .8em;
    vertical-align: bottom;
}

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(6em, 10vw) 2em;
    text-align: center;
}

@media (max-width:767px) {
    .elvia .inner {
        padding: min(4em, 12vw) 1.5em;
    }
}


/* sekisui-linkBtn */
.elvia .sekisui-linkBtn {
    width: 100%;
    max-width: 330px;
    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.8vw);
    font-family: YakuHanJPs, Arial, 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    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);

}

.elvia .sekisui-linkBtn__ag {
    display: block;
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    background: #fff;
    -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;
}

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

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

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

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

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

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

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

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

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


/* common page title ================================*/
.hirayaKv__fg {
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .hirayaKv__fg {
        aspect-ratio: 5 / 3;
    }

    .hirayaKv__fg__bg img {
        object-position: center 60%;
    }
}

.hirayaKv__tt>span.is-l {
    padding: clamp(25px / 1440 * 1140, 25 / 1440 * 100vw, 25px) clamp(48px / 1440 * 1140, 48 / 1440 * 100vw, 48px) clamp(17.5px / 1440 * 1140, 17.5 / 1440 * 100vw, 17.5px) clamp(48px / 1440 * 1140, 48 / 1440 * 100vw, 48px);
}

@media screen and (max-width: 767px) {
    .hirayaKv__tt>span.is-l {
        padding: clamp(15px / 375 * 320, 15 / 375 * 100vw, 15px) clamp(25px / 375 * 320, 25 / 375 * 100vw, 25px) clamp(10px / 375 * 320, 10 / 375 * 100vw, 10px);
    }
}

.hirayaKv__tt img {
    width: min(260px, 40vw);
}

@media screen and (max-width: 767px) {
    .hirayaKv__nt {
        margin: 0;
        padding: 0;
    }
}

/* introduction ================================*/
.introduction {
    padding: 3em 0 5em;
    position: relative;
}

@media (max-width: 767px) {
    .introduction {
        padding: 0 0 3em;
    }
}

.introduction .intro-wrp {
    text-align: center;
}

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

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

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

/* application-wrp ================================*/
.application-wrp {
    padding: 0 1em;
    margin-top: min(6em, 15vw);
    text-align: center;
    position: relative;
    z-index: auto;
}

.application-wrp:last-child {
    margin-top: min(6em, 12vw);
}

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

@media (max-width: 767px) {
    .application-wrp .application-banner {
        padding: 2em 1.5em 3em;
        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 .catalogue {
    grid-area: img;
}

.application-banner .catalogue {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.35));
}

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

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

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

.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(1.05em, 3.8vw);
    letter-spacing: .2em;
}

.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 {
    max-width: 1280px !important;
    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: .5em .5em 1.5em;
    text-align: center;
    font-size: 1.25em;
    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(1.15em, 4.2vw);
    }
}

.contents-nav .contents-list li a:hover {
    background-color: var(--bg-color);
}

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

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

.contents-nav .contents-list li a .en {
    display: block;
    margin: .5em;
    font-size: .8em;
    font-weight: 300;
    color: var(--page-color);
}

/* title wrp ================================*/
.title-wrp {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 3em;
    text-align: center;
    position: relative;
}

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

.title-wrp .title {
    width: max-content;
    margin: 0 auto;
    font-size: min(2.6em, 7vw);
    font-weight: 500;
    letter-spacing: .1em;
    position: relative;
}

.title-wrp .title::after {
    content: '';
    display: block;
    width: 1.5em;
    margin: .7em auto 0;
    border-bottom: solid 1px;
}

.section-lead {
    margin-top: min(2em, 10vw);
    font-size: min(1.6em, 4.6vw);
    font-weight: 500;
    line-height: 1.8;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

/* co-wrp ================================*/

/* co-wrp */
.co-wrp {
    margin-top: min(6em, 12vw);
    align-items: center;
    gap: 1.5em 2em;
    overflow: hidden;
}

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

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

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

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

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

/* co-wrp - text-box */
.co-wrp .text-box {
    width: 45%;
    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: .5em;
            order: 2;

        }
    }
}

.co-wrp .text-box .co-title {
    width: 100%;
    margin-bottom: 2em;
    font-size: min(1.6em, 2.5vw);
    font-weight: 500;
    line-height: 1.8;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    transform-origin: left top;
    position: relative;
}

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

.co-wrp .text-box .co-title:after {
    content: '';
    width: 100%;
    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: left;
    letter-spacing: -0.01em;
}

@media (max-width: 767px) {
    .co-wrp .text-box .co-lead {
        text-align: justify;
    }

    .co-wrp .text-box .co-lead .iblock {
        display: unset;
    }
}

/* design ================================*/
.design {
    background-color: var(--bg-color);
}

.design .plan-wrp {
    padding: min(4em, 10vw) min(2em, 4vw) min(2em, 4vw);
    margin: min(4em, 10vw) auto 0;
    background-color: #fff;
}

.design .plan-wrp .section-lead {
    margin: 0 auto 1.5em;
}

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

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

/* map-wrp */
.design .plan-flex .map-wrp {
    width: 50%;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .design .plan-flex .map-wrp {
        width: 100%;
    }
}

.design .plan-flex .map-wrp .map {
    width: 100%;
    margin-top: -4%;
}

.design .plan-flex .map-wrp .map img {
    position: relative;
    z-index: 1;
}

.design .plan-flex .map-wrp .point-number {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.design .plan-flex .map-wrp :is(.slick-list, .slick-track) {
    display: contents;
}

.design .plan-flex .map-wrp .point-number li {
    width: 1.4em !important;
    height: 1.4em;
    font-size: 1.2em;
    line-height: 1.5;
    color: #fff;
    background-color: #000;
    position: absolute;
    transform: translate(-50%);
    cursor: pointer;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .5);
    z-index: 2;
    transition: transform .3s ease;
}

.design .plan-flex .map-wrp .point-number li:hover {
    transform: translate(-50%) scale(1.3);
}

@media (max-width: 767px) {
    .design .plan-flex .map-wrp .point-number li {
        transform: translate(-50%) scale(1.3);
        animation: currentPoint .9s 0s ease-out infinite alternate;
    }
}

@media (min-width: 768px) {
    .design .plan-flex .map-wrp .point-number li.slick-current {
        background-color: var(--catalogue-color);
        background-color: #824752;
        transform: translate(-50%) scale(1.3);
        cursor: default;
        pointer-events: none;
        animation: currentPoint .7s 0s ease-out infinite alternate;
    }
}

@keyframes currentPoint {
    0% {
        transform: translate(-50%) scale(1.1);
    }

    90% {
        transform: translate(-50%) scale(1.3);
    }

    100% {
        transform: translate(-50%) scale(1.3);
    }
}

.design .plan-flex .map-wrp .point-number li.point1-number {
    left: 51%;
    bottom: 43%;
}

.design .plan-flex .map-wrp .point-number li.point2-number {
    left: 68.3%;
    top: 34%;
}

.design .plan-flex .map-wrp .point-number li.point3-number {
    left: 28.5%;
    bottom: 75%;
}

.design .plan-flex .map-wrp .point-number li.point4-number {
    left: 47.8%;
    top: 27.5%;
}

.design .plan-flex .map-wrp .point-number li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: inherit;
    background-color: inherit;
}

@media (min-width: 768px) {
    .design .plan-flex .map-wrp .point-number li a {
        pointer-events: none;
    }
}

.design .plan-flex .map-wrp .note {
    width: max-content;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%);
    padding: .75em .3em .75em 1em;
    font-size: min(.85em, 3vw);
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
}

.spec-wrp {
    padding: 0 min(1.5em, 3.4vw);
}

.design .plan-flex .spec {
    width: 15em;
    font-size: min(.9em, 3vw);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5em 0;
}

.design .plan-flex .spec :where(dt, dd) {
    border-bottom: solid 1px #ccc;
}

/* detail wrp */
.design .plan-flex .detail-wrp {
    width: 47%;
    background-color: #f9f9f9;
    position: relative;

}

@media (max-width: 767px) {
    .design .plan-flex .detail-wrp {
        display: none;
    }
}

.design .plan-flex .detail-wrp .point-slider {
    --arrow-range: 2.5rem;
    --arrow-color: #464646;
    --arrow-border-width: 1px;
    --arrow-notactiveopacity: 0;
    width: 100%;
    position: relative;
}

@media (max-width: 1000px) {
    .design .plan-flex .detail-wrp .point-slider {
        --arrow-range: 1.5rem;
    }
}

.design .plan-flex .detail-wrp .point-box {
    width: 100%;
    text-align: left;
    padding: min(5em, 6vw) min(5em, 6vw) min(3em, 6vw);
}

.design .plan-flex .detail-wrp .point-box .point-img,
.pagemodal .point-box .point-box .point-img {
    overflow: hidden;
    aspect-ratio: 1.5/1;
    margin-bottom: 0;
}

.design .plan-flex .detail-wrp .point-box .point-img img,
.pagemodal .point-box .point-box .point-img img {
    height: 100%;
    object-fit: cover;
}

@media (max-width:767px) {

    .design .plan-flex .detail-wrp .point-box .point-img,
    .pagemodal .point-box .point-box .point-img {
        overflow: hidden;
        aspect-ratio: 1.7/1;
        padding: 0 5%;
        margin-bottom: 0;
    }

    .design .plan-flex .detail-wrp .point-box .point-img img,
    .pagemodal .point-box .point-box .point-img img {
        object-fit: contain;
    }
}

.design .plan-flex .detail-wrp .point-box.point1 {
    display: block;
}

.design .plan-flex .detail-wrp .point-hd,
.pagemodal .point-box .point-hd {
    margin: 2.5em 0 1em;
    padding-left: min(2.5em, 8vw);
    font-size: min(1.15em, 4vw);
    font-weight: 500;
    position: relative;
}

.design .plan-flex .detail-wrp .point-hd .number,
.pagemodal .point-box .point-hd .number {
    font-size: 3em;
    font-weight: 500;
    line-height: .2em;
    position: absolute;
    left: 0;
}

.design .plan-flex .detail-wrp .point-text,
.pagemodal .point-box .point-text {
    font-size: min(.9em, 3.5vw);
    line-height: 1.8;
}

.design .plan-flex .note {
    padding: min(2em, 4vw) min(3em, 6vw);
    font-size: clamp(13px / 1440 * 1140, 13 / 1440 * 100vw, 13px);
    font-weight: 400;
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
}

.plan-modal .pagemodal .point-box::after {
    content: '※画像はイメージです。プラン図とは異なる場合があります。';
    display: block;
    width: 100%;
    margin-top: 1.5em;
    font-size: min(12px, 2.8vw);
    font-weight: 300;
    text-align: right;
}

/* link-btn ================================*/
.link-btn-wrp {
    margin-top: min(4em, 10vw);
    padding: 1em 0;
    text-align: center;
}

.link-btn-wrp .link-btn {
    display: block;
    width: max-content;
    margin: 0 auto;
    padding: 1.1em min(4em, 10vw) 1em;
    letter-spacing: -0.01em;
    font-size: min(1.2em, 4vw);
    background-color: #222;
    color: #fff;
    border: solid 1px;
    position: relative;
    transition: all .3s 0s ease;
}

.link-btn-wrp .link-btn:hover {
    background-color: #fff;
    color: #333;
}

.link-btn-wrp .link-btn::before {
    content: '';
    width: .6em;
    height: .6em;
    border-right: solid 1px;
    border-top: solid 1px;
    position: absolute;
    right: 1.25em;
    top: calc(50% - .25em);
    transform: translate(0, 0) rotate(45deg);
    transition: right .3s 0s ease;
}

.link-btn-wrp .link-btn:hover::before {
    right: .9em;
}


/* interior-concept ================================*/
.interior_concept {
    background-color: var(--bg-color);
}

@media (max-width:767px) {
    .interior_concept .inner {
        padding: min(4em, 15vw) 1.5em min(8em, 27vw);
    }
}

.interior_concept .title-wrp .lead {
    padding: 0 1em;
    font-size: min(1.1em, 4.2vw);
}

/* concept-wrp */
.concept-wrp {
    margin: 0 auto;
    position: relative;
}

@media (min-width: 768px) {
    .concept-wrp {
        width: 90%;
    }
}

.concept-wrp .slick-slider {
    --arrow-color: #464646;
    --arrow-border-width: 1px;
    margin-bottom: 0;
}

.concept-wrp .slick-prev,
.concept-wrp .slick-next,
.concept-wrp .slider-arrow {
    top: 35%;
}

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

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

.concept-wrp .concept-text {
    margin: 1.5em auto 1em;
    font-size: min(1.4em, 4.5vw);
    text-align: left;
    position: relative;
}

@media (min-width: 768px) {
    .concept-wrp .concept-text {
        width: min(780px, 100%);
        margin: 2em auto 1em;
        display: grid;
        grid-template-areas: "type title" "type lead";
        grid-template-columns: 8em 1fr;
        justify-content: center;
        gap: 1em 3em;
        font-size: min(1.4em, 2.3vw);
    }
}

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

@media (min-width: 768px) {
    .concept-wrp .concept-type {
        width: max-content;
        align-self: start;
        padding: 0;
        margin-left: auto;
    }
}

@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;
}

@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;
    padding-bottom: .5em;
    font-weight: 500;
    line-height: 1.8;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    border-bottom: solid 1px;
}

@media (max-width: 767px) {
    .concept-wrp .concept-title {
        width: max-content;
        margin: .5em auto 1em;
        text-align: center;
    }
}

.concept-wrp .concept-lead {
    grid-area: lead;
    font-size: min(1rem, 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: 100%;
    display: flex;
    justify-content: center;
    gap: .75em;
    position: absolute;
    top: 100%;
    font-size: min(1.6em, 2.4vw);
    transform: translate(2em);
    pointer-events: none;
}

@media (max-width: 767px) {
    .concept-wrp .arrow-box {
        font-size: min(1.4em, 5vw);
        top: calc(100% + 2.5em);
        transform: unset;
    }
}

.concept-wrp :is(.prev-arrow, .next-arrow) {
    width: 3.5em;
    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;
    top: 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%;
    z-index: 10;
    position: absolute;
    bottom: 50%;
    border-top: solid var(--border-width);
}

.concept-wrp .prev-arrow::after {
    left: 0;
    transform: translate(1px, 1px) rotate(-45deg);
    transform-origin: left bottom;
}

.concept-wrp .next-arrow::after {
    right: 0;
    transform: translate(-1px, 1px) rotate(45deg);
    transform-origin: right bottom;
}

/* 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;
    pointer-events: auto;
    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: #9d888c;
    --dot-opacity: 1;
    --dot-notactivecolor: #ddd;
    --dot-activeopacity: 1;
    --dot-notactiveopacity: 1;
    top: 100%;
    bottom: unset;
    transform: translate(-2em);
}

@media screen and (max-width:767px) {
    .slick-dots {
        top: calc(100% + .5em);
        transform: unset;
    }
}

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

.outroduction .bg {
    position: relative;
    min-width: 60%;
    max-width: clac(100% - 640px);
    height: calc(100vh - 200px);
    min-height: 500px;
    max-height: 720px;
    overflow: hidden;
}

@media screen and (max-width:767px) {
    .outroduction .bg {
        height: min(800px, 156dvw);
        max-height: unset;

    }
}

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

.outro-wrp {
    position: absolute;
    top: 0;
    right: 0;
    width: min(640px, 40%);
    height: 100%;
    background-color: rgba(250, 250, 250, 1);
    padding: 3.5em 5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:767px) {
    .outro-wrp {
        width: min(500px, 100%);
        height: auto;
        padding: min(5em, 15vw) min(4em, 10vw) min(5em, 12vw);
        background-color: unset;
        top: 0;
        left: 50%;
        right: unset;
        transform: translate(-50%);
    }
}

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

.outro-wrp .application-banner .text {
    margin-bottom: 2em;
    filter: drop-shadow(0 0 50px rgba(240, 252, 254, 1)) drop-shadow(0 0 10px rgba(226, 242, 254, 0.8));
}

.outro-wrp .application-banner .text p {
    font-size: 1.2em;
}

@media screen and (max-width:767px) {
    .outro-wrp .application-banner .text p {
        font-size: min(1.6em, 4.8vw);
    }
}

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

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


/* twostory ================================*/
.elvia .twostory {
    display: block;
    width: min(500px, calc(100% - 5em));
    margin: min(6em, 12vw) auto 0;
    padding: min(2em, 5vw);
    background-color: #e0e9e7;
    position: relative;
}

@media screen and (min-width:768px) {
    .elvia .twostory {
        width: min(980px, calc(100% - 3em));
        padding-left: 0;
        display: grid;
        grid-template-columns: 50% 1fr;
    }
}

.elvia .twostory .twostory-title-wrp {
    margin: 2em 0 1.5em;
}

.elvia .twostory .twostory-title-wrp .twostory-title {
    width: min(180px, 50%);
    margin: 0 auto;
    font-weight: 500;
    letter-spacing: .05em;
    position: relative;

}

@media screen and (min-width:768px) {
    .elvia .twostory .twostory-title-wrp .twostory-title {
        width: 220px;
    }
}

.elvia .twostory .twostory-title-wrp .twostory-title::after {
    content: '';
    display: block;
    width: 3.5em;
    margin: 1.5em auto;
    border-bottom: solid 1px;
}

.elvia .twostory .twostory-title-wrp .twostory-lead {
    font-size: min(1.2em, 4vw);
    text-align: center;

}

@media screen and (min-width:768px) {
    .elvia .twostory .twostory-img {
        grid-row: span 2;
    }
}

@media screen and (max-width:767px) {
    .elvia .twostory .twostory-img {
        aspect-ratio: 16/9;
    }
}

.elvia .twostory .twostory-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.elvia .twostory .link-btn-wrp {
    margin-top: 1em;
    padding: .5em 0;
}

@media screen and (min-width:768px) {
    .elvia .twostory .link-btn-wrp {
        margin-top: 0;
    }
}

/* twostory-link */
.elvia .twostory .twostory-link {
    width: min(21em, 100%);
    color: #333;
    border-color: #333;
    background-color: #fff;
}

.elvia .twostory .twostory-link .icon {
    display: inline-block;
    width: 2.3em;
    margin-right: 1em;
    line-height: 1;
    vertical-align: baseline;
    filter: invert(0);
    transition: filter 350ms cubic-bezier(.215, .61, .355, 1), color 350ms cubic-bezier(.215, .61, .355, 1);
}

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

    .elvia .twostory:hover .twostory-link .icon,
    .elvia .twostory:active .twostory-link .icon {
        filter: invert(100%);
    }
}

.elvia .twostory .twostory-link .sekisui-linkBtn__ag {
    background: #333;
}

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

    .elvia .twostory:hover .twostory-link,
    .elvia .twostory:active .twostory-link {
        color: #fff;
        background-color: #333;
    }

    .elvia .twostory:hover .twostory-link .sekisui-linkBtn__ag,
    .elvia .twostory:active .twostory-link .sekisui-linkBtn__ag {
        background-color: #fff;
    }

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

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

}