/* header ================================*/
.header {
    position: relative;
}

.header .main-img-wrp {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.header .main-img-wrp .main-title {
    width: max-content;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    font-size: min(1.7rem, 6vw);
    line-height: 1.5;
}

.header .main-img-wrp .main-title .title-tag {
    display: inline-block;
    transform: translateX(.4em);
}

.header .main-img-wrp .main-title .title-logo {
    display: block;
    width: min(330px, 100%);
    max-width: 72vh;
    margin: 1em auto 0;
    transform: scale(1.1);
    opacity: 1;
    transform-origin: center center;
}

.header .main-img-wrp .main-title.on .title-logo {
    transform: scale(1);
    opacity: 1;
    transition: all 2s;
}

@media (max-width:767px) {
    .header .main-img-wrp .main-title .title-logo {
        width: min(340px, 70%);
        top: 35%;
    }
}

.header .main-img-wrp .main-img {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

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

.main-img-note {
    padding: 0 1em;
}


/* introduction ================================*/
.introduction {
    position: relative;
}

.introduction .inner {
    max-width: 1200px;
    padding: min(5em, 7vw) 2em;
}

@media screen and (max-width:767px) {
    .introduction .inner {
        padding: 4em 1em;
    }
}

.introduction .intro-wrp .lead {
    display: block;
    font-size: min(1.45rem, 4.2vw);
    line-height: 2.4;
    font-feature-settings: "palt";
    text-align: center;
}

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


/* navigation ================================*/
.contents-nav {
    position: sticky !important;
    top: 0;
}

.contents-list {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.contents-list li {
    width: min(580px, 48%);
}

.contents-list li a {
    display: block;
    text-align: center;
    font-size: min(1.3rem, 3.5vw);
}

.contents-list li .thumb {
    margin-bottom: 1em;
    filter: brightness(1);
    transition: filter .3s 0s ease;
}

.contents-list li:hover .thumb {
    filter: brightness(.8);
}

/* section common ================================*/
.section {
    padding-top: min(5em, 10vw);
    counter-reset: section-numnote;
}

.section-title {
    margin-bottom: 2em;
    font-size: min(1.7rem, 6.4vw);
    text-align: center;
}

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

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

/* section 01 ================================*/
.section01 {
    padding-top: 0;
}

.section01 .section-title {
    padding: 3em 0 0;
}

.section01 .section-anchor-link {
    width: min(980px, 100%);
    margin: 0 auto 5em;
    padding: 0 1em;
}

.section01 .section-anchor-link li {
    width: min(580px, 48%);
}

.section01 .section-anchor-link li a {
    height: 100%;
    padding: 1em .5em 2.5em;
    display: grid;
    place-items: center;
    text-align: center;
    border: solid 1px;
    font-size: min(1em, 3vw);
    position: relative;
}

.section01 .section-anchor-link li .en {
    font-size: 1.4em;
}

.section01 .section-anchor-link li a::after {
    content: '';
    width: 1em;
    height: 1em;
    position: absolute;
    bottom: 1.2em;
    border-right: solid 1px;
    border-bottom: solid 1px;
    transform: rotate(45deg);
    transition: bottom .3s 0s ease;
}

.section01 .section-anchor-link li:hover a::after {
    bottom: .9em;
}

/* subsection */
.section01 .subsection {
    background-color: #f0f1f1;
}

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

.section01 .subsection .subsection-title-wrp {
    align-items: center;
    background-color: var(--elvia-gray);
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
}

.section01 .subsection .subsection-title-wrp .title-box {
    width: 45%;
    padding: 3em 3em 3em 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

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

.section01 .subsection .subsection-title-wrp .title-box .subsection-title {
    font-size: min(1.5rem, 4.8vw);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
    line-break: strict;
}

.section01 .subsection .subsection-title-wrp .title-box .subsection-title .en {
    display: block;
    margin-bottom: .5em;
    font-size: 1.6em;
    font-family: inherit;
    font-weight: 300;
}

.section01 .subsection .subsection-title-wrp .title-box .subsection-title .en::after {
    content: '';
    display: block;
    width: 8em;
    height: 0;
    border: 1px solid #ccc;
    margin: .35em auto .5em;
}

.section01 .subsection .subsection-title-wrp .title-box .subsection-lead {
    margin-top: 1.25em;
    font-size: min(1.1em, 4.2vw);
}

.section01 .subsection .subsection-title-wrp .img-box {
    width: 55%;
    height: 100%;
    aspect-ratio: 2/1;
    overflow: hidden;
}

@media screen and (max-width:767px) {
    .section01 .subsection .subsection-title-wrp .img-box {
        width: 100%;
        height: 55vw;
        order: 1;
    }
}

.section01 .subsection .subsection-title-wrp .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* co-wrp */
.subsection .inner {
    max-width: 1100px;
}

@media screen and (max-width:767px) {
    .subsection .inner {
        padding: 3em 4vw 6em;
    }
}

.section01 .subsection .co-title-wrp {
    /* width: calc(100% - 6em); */
    width: 100%;
    padding-bottom: 3em;
    margin: 0 auto;
    --arrow-size: 3.5rem;
    --arrow-opacity: 1;
    --arrow-activeopacity: 1;
    --arrow-notactiveopacity: 0;
}

.section01 .subsection .co-title-wrp .flex-between {
    align-items: center;
}

.section01 .subsection .co-title-wrp .box .text-box {
    width: 44%;
    text-align: left;
    padding: 0;
}

@media screen and (max-width:767px) {
    .section01 .subsection .co-title-wrp .box .text-box {
        width: 100%;
        padding: 4vw;
    }
}

.section01 .subsection .co-title-wrp .box .text-box .co-title {
    margin-bottom: 1em;
    font-size: min(1.3rem, 5vw);
}

.section01 .subsection .co-title-wrp .box .text-box .co-lead {
    font-size: min(1rem, 3.8vw);
    min-height: 3lh;
}

@media screen and (max-width:767px) {
    .section01 .subsection .co-title-wrp .box .text-box .co-lead {
        min-height: 4lh;
    }
}

.section01 .subsection .co-title-wrp .box .img-box {
    width: 50%;
}

@media screen and (max-width:767px) {
    .section01 .subsection .co-title-wrp .box .img-box {
        width: 100%;
    }
}

/* arrows/dots */
.subsection .slick-prev,
.subsection .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    display: block;
    width: 40px;
    height: 15px;
    padding: 0;
    cursor: pointer;
    outline: none;
    background: transparent;
    z-index: 10;
    border: 0;
    top: 102%;
    transform: unset;
    transition: all .2s ease;
}

.subsection .slick-prev {
    left: 25%;
}

.subsection .slick-next {
    right: 25%;
}

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

    .subsection .slick-prev,
    .subsection .slick-next {
        top: calc(100% + .25rem);
    }

    .subsection .slick-prev {
        left: calc(50% - min(200px, 40vw));
    }

    .subsection .slick-next {
        right: calc(50% - min(200px, 40vw));
    }
}

.subsection .slick-prev::before,
.subsection .slick-next::before {
    width: 15px;
    height: 15px;
    border-top: solid 1px var(--elvia-navy);
    border-left: solid 1px var(--elvia-navy);
    border-right: unset;
    transform: unset;
    top: 0;
}

.subsection .slick-prev::before {
    left: 0;
}

.subsection .slick-next::before {
    rotate: 135deg;
    right: 0;
}

.subsection .slick-prev::after,
.subsection .slick-next::after {
    content: '';
    width: 100%;
    height: 0;
    border-top: solid 1px var(--elvia-navy);
    position: absolute;
    top: 50%
}

.subsection .slick-prev::after {
    left: -1px;
}

.subsection .slick-next::after {
    right: 1.5px;
}

.subsection .slick-next:hover::before,
.subsection .slick-next:hover::after {
    border-color: var(--elvia-gray);
}

.section01 .subsection .co-title-wrp .slick-dots {
    --dot-color: var(--elvia-gray);
    --dot-opacity: 1;
    --dot-notactivecolor: #fff;
    --dot-activeopacity: 1;
    --dot-notactiveopacity: 1;
    top: 100%;
    bottom: unset;
}

.section01 .subsection .co-title-wrp .slick-dots li button::before {
    width: min(100px, 20vw);
    height: 10px;
    border-radius: 0;
    transition: all .3s;
}

.section01 .subsection .co-title-wrp .slick-dots li:not(.slick-active) button:hover::before {
    background-color: var(--elvia-navy);
}

/* section 02 ================================*/
.section02 .section-anchor-link {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto min(5em, 4vw);
    flex-wrap: nowrap;
    gap: .4em 1%;
}

.section02 .section-anchor-link li {
    width: 20%;
}

@media screen and (max-width:767px) {
    .section02 .section-anchor-link {
        padding: 0 1em;
        flex-wrap: wrap;
        justify-content: center;
    }

    .section02 .section-anchor-link li {
        width: 32%;
    }
}

.section02 .section-anchor-link li a {
    height: 100%;
    padding: 1em .25em 2.5em;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: min(1.1rem, 3vw);
    line-height: 1.5;
    background-color: #f0f1f1;
    position: relative;
}

.section02 .section-anchor-link li a::after {
    content: '';
    width: .6em;
    height: .6em;
    position: absolute;
    bottom: 1.6em;
    border-right: solid 1px;
    border-bottom: solid 1px;
    transform: rotate(45deg);
    transition: bottom .3s 0s ease;
}

.section02 .section-anchor-link li:hover a::after {
    bottom: 1.2em;
}

@media screen and (max-width:767px) {
    .section02 .section-anchor-link li a {
        height: 5em;
        padding: .75em .25em 2em;
        line-height: 1.3;
    }

    .section02 .section-anchor-link li a::after {
        bottom: 1em;
    }
}

/* co-wrp */
.section02 .co-title-wrp {
    max-width: 1400px;
    margin: 0 auto;
    padding: min(4em, 8vw) min(2em, 4vw);
    flex-wrap: nowrap;
    align-items: center;
    gap: 1em 3em;
    overflow: hidden;
}

@media screen and (max-width:767px) {
    .section02 .co-title-wrp {
        flex-wrap: wrap;
        gap: 0;
    }
}

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

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

.section02 .co-title-wrp figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* co-wrp - text-box */
.section02 .co-title-wrp .text-box {
    width: 40%;
    padding: 3em 2em;
    flex-grow: 1;
    text-align: left;
    position: relative;
}

@media screen and (max-width:767px) {
    .section02 .co-title-wrp .img-box+.text-box {
        padding: 5vw;
        order: 0;
    }
}

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

.section02 .co-title-wrp .text-box .co-title:after {
    content: '';
    width: 130%;
    position: absolute;
    left: 0;
    bottom: -.25em;
    border-bottom: solid 1px var(--elvia-gray);
    transition: width .8s .3s ease;
}

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

.section02 .co-title-wrp .text-box .co-lead {
    margin-top: 1em;
    font-size: min(1.2rem, 5vw);
    transform-origin: left top;
    line-height: 1.8;
    text-align: justify;
    letter-spacing: -0.01em;
}

.section02 .co-title-wrp .text-box .drawer-open-btn {
    display: inline-block;
    margin-top: 2em;
    padding: .5em 3em;
    letter-spacing: -0.01em;
    font-size: min(1em, 3.5vw);
    color: #fff;
    border: solid 1px;
    position: relative;
    background-color: #222;
    transition: all .3s 0s ease;
}

.section02 .co-title-wrp .text-box .drawer-open-btn:hover {
    color: #222;
    background-color: #f0f1f1;
}

.section02 .co-title-wrp .text-box .drawer-open-btn.on {
    color: #222;
    background-color: #fff;
}

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

.section02 .co-title-wrp .text-box .drawer-open-btn.on::before {
    transform: translate(0, -30%) rotate(135deg);
}

/* drawer-wrp */
.section02 .drawer-wrp {
    background-color: #f0f1f1;
    display: none;
}

.section02 .drawer-wrp .inner {
    /* max-width: calc(1400px + 4em); */
    max-width: calc(1100px + 4em);
    padding: min(5em, 8vw) 2em;
    text-align: left;
}

.section02 .drawer-wrp .inner1400 {
    margin-top: 0;
    padding: min(5em, 8vw) 2em;
}

.section02 .drawer-wrp .drawer-title {
    width: 100%;
    margin-bottom: min(2em, 5vw);
    text-align: center;
    font-size: min(1.7rem, 4.7vw);
}

.section02 .drawer-wrp .drawer-title~.drawer-title {
    margin-top: min(4em, 10vw);
}

.section02 .drawer-wrp .drawer-lead {
    margin-top: -1em;
    text-align: center;
    line-height: 2;
    font-size: min(1.05rem, 3.7vw);
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp .drawer-lead {
        text-align: left;
        margin-top: 0;
    }
}

/* co-box - title-box */
.section02 .drawer-wrp .co-box:not(:first-child) {
    margin-top: min(4em, 5vw);
    align-items: center;
}

.section02 .drawer-wrp .co-box .text-box {
    width: 40%;
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp .co-box .text-box {
        width: 100%;
    }
}

.section02 .drawer-wrp .text-box .drawer-co-title {
    font-size: min(1.3rem, 5vw);
}

.section02 .drawer-wrp .text-box .drawer-co-subtitle {
    margin-top: 1em;
    font-size: min(1.05rem, 4.2vw);
}

.section02 .drawer-wrp .text-box .drawer-co-lead {
    font-size: min(1rem, 3.8vw);
}

.section02 .drawer-wrp .text-box .drawer-co-title~.drawer-co-lead {
    margin-top: 2em;
}

.section02 .drawer-wrp .text-box .caption {
    margin-top: 1em;
    font-size: 12px;
}

/* co-box - img-box */
.section02 .drawer-wrp .co-box .img-box {
    width: 50%;
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp .co-box .img-box {
        width: 100%;
        margin-top: 1em;
    }
}

/* with modal */
.section02 .drawer-wrp .with-modal:not(:first-child) {
    margin-top: min(4em, 8vw);
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp .with-modal {
        display: contents;
    }
}

/* maps */
.section02 .drawer-wrp figure.maps-wrp {
    width: min(860px, 100%);
    margin: 3em auto 0;
}

.section02 .drawer-wrp .with-modal figure.maps-wrp {
    width: 57.5%;
    margin: 0;
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp .with-modal figure.maps-wrp {
        width: 100%;
        margin-top: 0;
    }
}

.section02 .drawer-wrp figure.maps-wrp .cap {
    /* margin-top: 1em; */
    padding: 1.5em .5em 1em;
    text-align: center;
    font-size: .8em;
}

.section02 .drawer-wrp figure.maps-wrp .cap .num {
    margin: 0 .2em;
    width: 1.8em;
    line-height: 1.8;
    font-size: 1.2em;
}

.section02 .drawer-wrp figure.maps-wrp .maps {
    position: relative;
    z-index: 0;
}

.section02 .drawer-wrp figure.maps-wrp .maps .house {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}

.section02 .drawer-wrp figure.maps-wrp .maps .house-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.section02 .drawer-wrp figure.maps-wrp .maps .house-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.section02 .drawer-wrp figure.maps-wrp .maps ul {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp figure.maps-wrp .maps ul {
        width: 100%;
        height: auto;
        position: static;
    }
}

.section02 .drawer-wrp figure.maps-wrp .maps ul li {
    position: absolute;
    transform: translate(-50%, -50%);
}

@media screen and (min-width:768px) {
    .section02 .drawer-wrp figure.maps-wrp .maps ul li a {
        pointer-events: none;
    }
}

.modal-contents .num,
.section02 .drawer-wrp figure.maps-wrp .num {
    --size: 1.8em;
    display: inline-block;
    width: var(--size);
    line-height: var(--size);
    text-align: center;
    font-size: min(1.56rem, 4vw);
    color: #fff;
    background-color: #5a7598;
    /* border: solid 1px rgba(255, 255, 255, .7); */
    box-shadow: 0 0 10px rgba(255, 255, 255, .9);
    transition: all .3s 0s ease;
}

.section02 .drawer-wrp figure.maps-wrp .maps .num {
    --size: 2.1em;
}

@keyframes fadeLoop {
    0% {
        background-color: #5a7598;
        scale: .9;
    }

    100% {
        background-color: var(--elvia-navy);
        scale: 1;
    }
}

.section02 .drawer-wrp figure.maps-wrp .maps .num {
    animation: fadeLoop 1.5s infinite alternate forwards running;
}

.section02 .drawer-wrp figure.maps-wrp .maps li:hover .num {
    background-color: var(--elvia-navy);
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp figure.maps-wrp {
        width: 100%;
        margin-top: 0;
    }
}

.section02 .drawer-wrp .modal-co-wrp {
    display: flex;
    gap: 1em;
}

@media screen and (max-width:767px) {
    .section02 .drawer-wrp .modal-co-wrp {
        display: none;
    }
}

.section02 .drawer-wrp .with-modal .modal-co-wrp {
    width: 40%;
    flex-direction: column;
}

.section02 .drawer-wrp .modal-co-wrp .modal-contents {
    padding: 1em;
    background-color: #fff;
    /* border-radius: 4px; */
}

.section02 .drawer-wrp .modal-co-wrp .modal-contents .num {
    font-size: .9em;
}

/* modal contents */
.modal-contents .modal-title {
    display: flex;
    align-items: center;
    gap: 0 .75em;
    font-size: min(1.2rem, 5vw);
    position: relative;
}

.modal-box .modal-contents .modal-title {
    font-size: min(1.7rem, 6vw);
}

.modal-contents .modal-lead {
    margin-top: 1em;
    font-size: min(1.15rem, 5vw);
}

.modal-box .modal-contents .modal-lead {
    font-size: min(1.3rem, 5vw);
}

.modal-contents p:not(.modal-lead) {
    margin-top: .5em;
    font-size: min(.86rem, 3.5vw);
}

.modal-box .modal-contents p:not(.modal-lead) {
    margin-top: .75em;
    margin-bottom: .5em;
    font-size: min(1rem, 3.5vw);
}

.modal-box .modal-contents .modal-title {
    margin-bottom: 1em;
}

.modal-contents figcaption {
    font-size: min(.95rem, 3.5vw);
    text-align: center;
}

/* close btn */
.section02 .drawer-wrp .drawer-close-btn {
    display: block;
    width: max-content;
    margin: 4em auto 0;
    padding: .5em 3.5em .5em 3em;
    font-size: min(.9em, 3.5vw);
    border: solid 1px;
    background-color: transparent;
    position: relative;
    transition: background-color .3s 0s ease;
}

.section02 .drawer-wrp .drawer-close-btn:hover {
    background-color: #fff;
}

.section02 .drawer-wrp .drawer-close-btn::before,
.section02 .drawer-wrp .drawer-close-btn::after {
    content: '';
    width: 1em;
    height: 0;
    border-top: solid 1px;
    position: absolute;
    right: calc(50% - 2.5em);
    top: 50%;
    transform: rotate(45deg);
}

.section02 .drawer-wrp .drawer-close-btn::after {
    transform: rotate(-45deg);
}


/* section02 each ================================*/
/* section02-1 */
.about-GAIASS .icon {
    width: 230px;
    margin: 2em auto;
}

.about-GAIASS p {
    text-align: center;
}

@media screen and (max-width:767px) {
    .about-GAIASS p {
        text-align: left;
    }
}

/* section02-2 */
.section02 #section02-2 {
    counter-reset: section-numnote 2;
}

.section02 #section02-2 .materials.maps-wrp {
    background-color: #fff;
}

@media screen and (max-width:767px) {
    .section02 #section02-2 .materials.maps-wrp {
        background-color: transparent;
    }
}

.materials .materials-num li:nth-child(1) {
    left: 38%;
    top: 30%;
}

.materials .materials-num li:nth-child(2) {
    right: 25%;
    top: 38%;
}

.materials .materials-num li:nth-child(3) {
    right: 24%;
    bottom: 12%;
}

.season-text {
    padding: 2em .5em;
    display: flex;
    justify-content: space-around;
    gap: 1em 0;
}

@media screen and (max-width:767px) {
    .season-text {
        flex-wrap: wrap;
        background-color: #fff;
    }
}

.season-text p {
    width: 19em;
    display: flex;
    align-items: center;
    gap: 1em;
    font-size: min(1rem, 4.2vw);
    position: relative;
}

@media screen and (max-width:767px) {
    .season-text p {
        width: fit-content;
    }
}

.season-text p .hd {
    --size: 2.6em;
    width: var(--size);
    line-height: var(--size);
    font-size: min(1.3rem, 5vw);
    text-align: center;
    background-color: #9abee4;
}

.season-text p.summer .hd {
    background-color: #f1d0a8;
}

.modal-material figure {
    margin-top: 1em;
}

/* modal */
@media screen and (max-width:767px) {
    #section02-2 .drawer-wrp .text-box {
        display: contents;
    }

    #section02-2 .drawer-wrp ul.note {
        order: 3;
    }
}

#material3 .text-box {
    width: 35%;
}

#material3 .img-box {
    width: 55%;
}

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

    #material3 .text-box,
    #material3 .img-box {
        width: 100%;
    }

    #material3 .img-box figure {
        width: min(300px, 100%);
        margin: 1em auto 0;
    }
}

/* section02-3 */
.section02 #section02-3 {
    counter-reset: section-numnote 4;
}

.section02 #section02-3 .drawer-wrp .text-box {
    width: 41%;
}

@media screen and (max-width:767px) {
    .section02 #section02-3 .drawer-wrp .text-box {
        width: 100%;
        order: 0;
    }

    #section02-3-co1 .text-box {
        display: contents;
    }

    #section02-3-co1 .img-box {
        order: 2;
    }

    #section02-3-co1 .caption {
        order: 3;
    }
}

.section02 #section02-3 .drawer-wrp .img-box {
    width: 55%;
}

@media screen and (max-width:767px) {
    .section02 #section02-3 .drawer-wrp .img-box {
        width: 100%;
        order: 1;
    }
}

/* section02-4 */
#section02-4 .drawer-wrp figure {
    width: min(800px, 100%);
    margin: 3em auto 0;
}

/* modal */
.modal-box .modal-system .text-box {
    width: 50%;
}

@media screen and (max-width:767px) {
    .modal-box .modal-system .text-box {
        width: 100%;
    }
}

.modal-box .modal-system .img-box {
    width: 30%;
}

.modal-box #system3 .img-box,
.modal-box #system4 .img-box {
    width: 50%;
}

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

    .modal-box .modal-system .img-box,
    .modal-box #system3 .img-box,
    .modal-box #system4 .img-box {
        width: 100% !important;
        padding: 1em 15%;
    }
}

.modal-box .modal-system .modal-title {
    font-size: min(1.3rem, 5vw);
}

.modal-box .modal-system .img-box {
    width: 40%;
}

/* section02-5 */
.exteriors .exteriors-num li:nth-child(1) {
    left: 16%;
    top: 25%;
}

.exteriors .exteriors-num li:nth-child(2) {
    left: 59%;
    top: 14%;
}

.exteriors .exteriors-num li:nth-child(3) {
    left: 40%;
    bottom: 25%;
}

#section02-5 .drawer-wrp .modal-co-wrp {
    margin-top: 3em;
    /* justify-content: center; */
}

@media screen and (min-width:768px) {
    #section02-5 .drawer-wrp .modal-co-wrp .modal-exterior {
        width: 26.5%;
    }

    #section02-5 #exterior3 {
        width: 43.5%;
    }

    #section02-5 .drawer-wrp .modal-co-wrp .modal-exterior .text-box {
        width: 100%;
    }

    #section02-5 .drawer-wrp .modal-co-wrp .modal-exterior .img-box {
        width: 100%;
        margin-top: 1em;
    }

    #section02-5 .drawer-wrp .modal-co-wrp #exterior3 .text-box {
        width: 100%;
    }

    /* #section02-5 .drawer-wrp .modal-co-wrp #exterior3 .img-box {
        width: 70%;
        margin: 1em auto 0;
    } */
}

/* modal */
.modal-box .modal-exterior .img-box {
    margin-top: 1.5em;
}

.modal-exterior .img-box.flex-between figure {
    width: 48%;
}

/* #exterior3 {
    counter-reset: section-numnote 8;
} */