@charset "UTF-8";

.heroVisual {
    height: 400px;
}

.heroVisual__heading {
    color: #AD8551;
    text-shadow: none;
}

.heroVisual__capIn {
    left: auto;
    right: 10px;
    color: #484848;
}

@media screen and (max-width: 768px) {
  .heroVisual__capIn {
    color: #ffffff;
    text-shadow: none !important;
  }
}


.contents {
    padding: 0;
}

/* planDetail */

.planDetail {
    padding: 100px 0;
}

.planDetail .content {
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.planDetail .colL {
    width: 33%;
}

.planDetail .colR {
    width: 60%;
}

.planDetail .card {
    background: #888657;
    max-width: 260px;
    width: 100%;
    margin: 0 auto 60px;
    color: #fff;
    padding: 40px 5px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}

.planDetail .card .name {
    font-size: 24px;
    font-family: 'EB Garamond', serif;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1;
}

.planDetail .card .name span {
    font-size: 65px;
}

.planDetail .card .ldk {
    font-size: 22px;
    font-family: 'EB Garamond', serif;
    padding-bottom: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
    font-weight: 500;
    line-height: 1;
}

.planDetail .card .ldk span {
    font-size: 41px;
}

.planDetail .card .exclusive {
    margin-bottom: 4px;
    text-align: left;
}

.planDetail .card .balcony {
    margin-bottom: 8px;
    text-align: left;
}

.planDetail .card .space {
    text-align: left;
}

.planDetail .card .space span {
    display: block;
    font-size: 12px;
}

.planDetail .card .exclusive span:first-child {
    font-size: 34px;
    font-family: 'EB Garamond', serif;
}

.planDetail .card .exclusive span:last-child {
    font-size: 24px;
}

.planDetail .note {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px auto 20px;
    font-size: 12px;
}

.planDetail .note .noteTit {
    width: 50px;
}

.planDetail .note .noteDesc {
    width: calc(100% - 50px);
    display: flex;
    flex-wrap: wrap;
}

.planDetail .note .noteDesc li {
    display: flex;
    align-items: center;
    margin: 0 30px 10px 0;
    line-height: 1;
}

.planDetail .note .noteDesc li img {
    vertical-align: middle;
    margin-right: 5px;
}


.planDetail .caption {
    padding-left: 10px;
    text-indent: -10px;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .planDetail {
        padding: 35px 0;
    }

    .planDetail .colL {
        width: 100%;
        margin-bottom: 40px;
    }

    .planDetail .card {
        padding: 30px 5px;
        margin-bottom: 35px;
        max-width: 240px;
    }

    .planDetail .card .name {
        font-size: min(4vw, 18px);
    }

    .planDetail .card .name span {
        font-size: 40px;
    }

    .planDetail .card .ldk {
        font-size: min(5vw, 20px);
    }

    .planDetail .card .ldk span {
        font-size: min(7vw, 30px);
    }

    .planDetail .card .exclusive {
        font-size: min(3.5vw, 16px);
    }

    .planDetail .card .exclusive span:first-child {
        font-size: min(6vw, 26px);
    }

    .planDetail .card .exclusive span:last-child {
        font-size: min(5vw, 24px);
    }

    .planDetail .card .balcony {
        font-size: min(3.5vw, 16px);
    }

    .planDetail .card .space {
        font-size: min(3.5vw, 16px);
    }

    .planDetail .card .space span {
        font-size: min(3vw, 12px);
    }

    .planDetail .colR {
        width: 100%;
    }

    .planDetail .note {
        font-size: 10px;
    }

    .planDetail .caption {
        font-size: 10px;
    }

    .planDetail .note .noteDesc li {
        margin: 0 20px 10px 0;
    }
}





/* list-type */
.list-type .content {
    max-width: 900px;
}

.list-type {
    padding: 80px 0;
    background: #525554;
    color: #ffffff;
}

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

.list-type ul li {
    width: 23%;
    text-align: center;
    position: relative;    
}

.list-type ul li a {
    display: block;
    padding: 20px 15px 0;
    background: #888657;    
    transition: all 0.4s;
    letter-spacing: 0;
    color: #ffffff;
}

.list-type ul li a:hover {
    background: #727149;
}

.list-type ul li .type-name {
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 500;
}

.list-type ul li .type-name::first-letter {
    font-size: 250%;
    margin-right: 10px;
    line-height: 1;
}

.list-type ul li .type-desc {
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    border-bottom: 1px solid #ffffff;
    font-weight: 500;
}

.list-type ul li .type-desc span {
    font-size: 30px;
}

.list-type ul li .num {
    font-family: 'EB Garamond', serif;
    font-size: 30px;
    font-weight: 500;
}

.list-type ul li .more {
    background: #727149;
    margin: 0 -15px;
    padding: 5px 0;
    font-size: 14px;
    font-weight: bold;
}

.list-type ul li .mark {
    text-align: center;
    padding: 5px 0;
    background: #81282d;
    font-size: 14px;
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .list-type {
        padding: 35px 0;
    }

    .list-type ul {
        row-gap: 15px;
    }

    .list-type ul li {
        width: 48%;
    }

    .list-type ul li a {
        padding: 25px 5px 0;
    }

    .list-type ul li .more {
        margin: 0 -5px;
        font-size: min(3vw, 12px);
    }

    .list-type ul li .type-name {
        font-size: min(4vw, 18px);
    }

    .list-type ul li .type-desc {
        font-size: min(4.5vw, 20px);
    }

    .list-type ul li .type-desc span {
        font-size: min(6vw, 26px);
    }    

    .list-type ul li .num {
        font-size: min(6vw, 26px);
    }

    .list-type ul li .mark {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 12px;
        padding: 0 10px;
    }
}





/* btn_back */
.btn_back {
    max-width: 500px;
    margin: 60px auto;
}

.btn_back a {
    display: block;
    background: rgba(119, 119, 119, 1.00);
    padding: 20px;
    text-align: center;
    color: #FFF;
    position: relative;
    transition: opacity 0.3s ease-in-out;
    transition: all 0.3s;
}

.btn_back a:hover {
    background: #000;
}

.btn_back a::after {
    position: absolute;
    content: "";
    display: block;
    background-image: url("../imgs/type/arrow-left.svg");
    width: 63px;
    height: 22px;
    top: 15px;
    left: 25px;
    transform: scale(-1, 1);
}

@media screen and (max-width: 768px) {
    .btn_back {
        margin: 30px auto;
        width: 90%;
    }

    .btn_back a {
        padding: 10px;
    }

    .btn_back a::after {
        position: absolute;
        content: "";
        display: block;
        width: 40px;
        height: 14px;
        top: 20px;
        left: 25px;
    }
}