@charset "UTF-8";

:root {
    --font-en: "Cinzel", serif;
    --color-navy: #3e4c59;
    --color-wh: #fff;
    --color-bk: #281C1E;
    --color-brown:#2D1E21;
}
.general-section .inner-wide{
    max-width: 1300px;
}
.merit-btns {
    padding: 4% 0;
    margin: 0 auto;
    width: 77%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.merit-btns-btn:nth-child(-n+4) {
    width: calc(100% / 4 - 4.5px);
}
.merit-btns-btn:nth-child(n+5) {
    width: calc(100% / 3 - 4px);
}
.merit-btns-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-radius: 8px;
    color: var(--color-bk);
    font-weight: 500;
    font-size: 1.8vw;
    border: 2px solid var(--color-bk);
    position: relative;
    transition: all .3s ease-out;
}
.merit-btns-btn a::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: .8vw;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 1vw .6vw 0 .6vw;
    border-color: var(--color-brown) transparent transparent transparent;
}
.merit-btns-btn a:hover {
    color: #fff;
    background: var(--color-bk);
}
.merit-btns-btn a:hover::after {
    border-color: #fff transparent transparent transparent;
}
.heading-wrap {
    margin-bottom: clamp(3.2em, 8.9vw, 6.3em);
}
.heading-wrap .inner{
    padding-block: 4em .1em;
}
.heading-wrap .secondary-heading{
    margin: 0 auto .6em;
    padding: 0 clamp(2rem, 2.5vw, 2.5rem);
    width: fit-content;
    font-size: clamp(2.5rem, 4.4vw, 4.4rem);
    font-weight: 600;
    line-height: 1.3;
    position: relative;
}
.heading-wrap .secondary-heading::before,
.heading-wrap .secondary-heading::after{
    content: "";
    width: clamp(2px, .3vw, 3px);
    height: clamp(34px, 5.4vw, 54px);
    background: var(--color-wh);
    position: absolute;
    bottom: 0;
}
.heading-wrap .secondary-heading::before{
    left: 0;
    transform: rotate(-33deg);
}
.heading-wrap .secondary-heading::after{
    right: 0;
    transform: rotate(33deg);
}
.heading-wrap .lead{
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 500;
}
.heading-wrap::after{
    content: "";
    width: 100%;
    position: absolute;
    left: 50%;
    aspect-ratio: 1680 / 89;
    transform: translateX(-50%);
}
.sec{
    background: url(../images/merit/bg.webp) no-repeat top center / cover;
}
.sec .heading-wrap{
    background: var(--color-brown);
    position: relative;
}
.sec .heading-wrap::after{
    background: url(../images/merit/heading-wrap-deco.svg) no-repeat bottom center / cover;
}

.point-lists{
    gap: 116px 28px;
}
.point-cards{
    flex: 1;
    position: relative;
}
.point-cards::before,
.point-cards::after{
    content: "";
}
.point-cards::before{
    max-width: 126px;
    width: 9.5vw;
    aspect-ratio: 137 / 138;
    position: absolute;
    top: -4vw;
    left: -1.2vw;
    z-index: 2;
}
.point-cards.point::before{
    background: url(../images/merit/point.svg) no-repeat top center / cover;
}
.point-cards.point-01::before{
    background: url(../images/merit/point01.svg) no-repeat top center / cover;
}
.point-cards.point-02::before{
    background: url(../images/merit/point02.svg) no-repeat top center / cover;
}
.point-cards.point-03::before{
    background: url(../images/merit/point03.svg) no-repeat top center / cover;
}
.point-cards.point-04::before{
    background: url(../images/merit/point04.svg) no-repeat top center / cover;
}
.point-cards::after{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 8px;
    right: -8px;
    background: linear-gradient(180deg,rgba(196, 157, 167, 1) 0%, rgba(112, 68, 79, 1) 100%);
    border-radius: 16px;
    opacity: .3;
}
.cards-contents{
    /* padding: 5em 32px; */
    background: var(--color-wh);
    border: 3px solid #333;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.border-none{
    border: none;
}
.point-img-cards{
    flex: 1;
}
.design-txt-wrap{
    margin: 24px 0 20px;
}
.design-ttl,
.design-txt{
    padding: 14px 20px;
    display: grid;
    place-items: center;
    font-size: clamp(1.4rem, 1.68vw, 2.4rem);
    font-weight: 600;
    letter-spacing: .1rem;
}
.design-ttl{
    background: linear-gradient(135deg,rgba(196, 157, 167, 1) 0%, rgba(112, 68, 79, 1) 100%);
}
.design-txt{
    background: var(--color-wh);
}
.point-03 + .design-txt-wrap {
    margin-bottom: 0;
}
.point-03 + .design-txt-wrap .design-ttl {
    margin-right: 20px;
}
.design-ttl + .design-note{
    display: grid;
    place-items: center;
}
.design-note{
    font-size: 1.6rem;
    line-height: 1.5;
}
.w-full{
    flex: auto;
    width: 100%;
}
.external-link-note{
    margin-top: -32px;
    padding: 0 calc(60 / 1310 * 100%);
}
@media screen and (max-width: 767px) {
    .sec{
        padding-bottom: 2rem;
    }
    .merit-btns {
        padding: 12% 0;
        width: 90%;
        gap: 8px;
    }
    .merit-btns-btn:nth-child(-n+4) {
        width: calc(100% / 2 - 4px);
    }
    .merit-btns-btn:nth-child(n+5) {
        width: calc(100% / 2 - 4px);
    }
    .merit-btns-btn:last-child {
        width: 70%;
    }
    .merit-btns-btn a {
        font-size: 4.2vw;
        text-indent: -.7em;
        line-height: 1.3;
    }
    .merit-btns-btn a::after {
        right: 1.8vw;
        border-width: 2vw 1.2vw 0 1.2vw;
    }
    .heading-wrap .inner{
        padding-block: 3.2em 1.4em;
    }
    .point-lists{
        gap: 48px;
    }
    .point-cards{
        width: 100%;
        flex: auto;
    }
    .sp-cards-small{
        padding: 0 80px;
    }
    .point-cards::before {
        width: 18vw;
        top: -7vw;
        left: -2.4vw;
    }
    .point-img-cards{
        width: 100%;
        flex: auto;
    }
    .design-txt-wrap{
        margin-bottom: 10px;
    }
    .design-ttl, .design-txt {
        padding: 12px 16px;
    }
    .design-ttl + .design-note{
        padding-top: 14px;
    }
    .design-note{
        font-size: 1.4rem;
    }
    .external-link-note{
        margin-top: 0;
    }
}