@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&display=swap");


/* belief
------------------------------------------*/
.belief_wrp {
    margin: 0px auto;
    padding: min(5em, 6vw) min(5em, 4vw);
    background: linear-gradient(180deg, rgba(200, 231, 233, 1) 0%, rgba(252, 229, 226, 1) 100%);
    font-family: var(----sans-serif2);
}

.belief_wrp .inner {
    width: 100%;
    max-width: 980px;
    padding: min(4em, 7vw) min(1em, 0vw);
    margin: 0 auto;
    background-color: rgba(255, 255, 255, .9);
    border-radius: min(2em, 6vw);
    text-align: center;
}

.belief_wrp .belief_wrp-ttl {
    width: max-content;
    margin: 0px auto min(3em, 10vw);
    padding-left: 0.25em;
    font-size: min(1.5em, 3.8vw);
    font-family: var(----sans-serif2);
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1.5;
    color: var(--color-gray);
    position: relative;
}

/* .belief_wrp .belief_wrp-ttl span {
    margin-right: -.5em;
} */

.belief_wrp .belief_wrp-ttl::before,
.belief_wrp .belief_wrp-ttl::after {
    content: "";
    width: 3em;
    height: 0px;
    position: absolute;
    top: 50%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: currentcolor;
}

.belief_wrp .belief_wrp-ttl::before {
    right: calc(100% + 1em);
}

.belief_wrp .belief_wrp-ttl::after {
    left: calc(100% + 1em);
}

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

    .belief_wrp .belief_wrp-ttl::before,
    .belief_wrp .belief_wrp-ttl::after {
        content: unset;
        /* width: 1em; */
    }

    /* .belief_wrp .belief_wrp-ttl::before {
        right: calc(100% + 0.4em);
    }

    .belief_wrp .belief_wrp-ttl::after {
        left: calc(100% + 0.4em);
    } */
}

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

    .belief_wrp .belief_wrp-ttl::before,
    .belief_wrp .belief_wrp-ttl::after {
        content: unset;
    }

    .belief_wrp .belief_wrp-ttl::before {
        right: calc(100% + 0.4em);
    }

    .belief_wrp .belief_wrp-ttl::after {
        left: calc(100% + 0.4em);
    }
} */

/* @media screen and (min-width: 768px) { */
.belief_wrp .flex {
    display: flex;
    justify-content: center;
    position: relative;
}

.belief_wrp :is(.mind, .make) {
    width: min(420px, 50%);
}

.belief_wrp .mind {
    color: var(--color-mind);
}

.belief_wrp .make {
    color: var(--color-make);
}

.belief_wrp :is(.mind, .make) a {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

.belief_wrp :is(.mind, .make) .logo {
    width: max-content;
    height: min(8em, 17vw);
    margin: 0px auto 2em;
}

@media screen and (max-width:767px) {
    .belief_wrp :is(.mind, .make) .logo {
        margin: 0px auto 1em;
        ;
    }
}

.belief_wrp :is(.mind, .make) .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1);
    transition: transform .3s 0s ease;
}

.belief_wrp :is(.mind, .make) a:hover .logo img {
    transform: scale(1.1);
}

.belief_wrp :is(.mind, .make) p {
    text-align: center;
    font-weight: bold;
    font-size: min(1.06em, 2.5vw);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

@media screen and (max-width:767px) {
    .belief_wrp :is(.mind, .make) p {
        line-height: 1.6;
        letter-spacing: 0.02em;
    }
}

* belief ------------------------------------------*/ .belief_wrp .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3em 0;
    position: relative;
}

.belief_wrp :is(.mind, .make) {
    width: min(400px, 50%);
}

/* @media screen and (max-width: 767px) {
    .belief_wrp :is(.mind, .make) {
        width: 100%;
    }
} */

.belief_wrp .mind {
    color: var(--color-mind);
}

.belief_wrp .make {
    color: var(--color-make);
}

.belief_wrp :is(.mind, .make) a {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    align-items: center;
    grid-template-areas: 'logo' 'txt' 'btn';
    grid-template-rows: auto 1fr auto;
    gap: 1em 1.5em;
}

#make .belief_wrp .make a {
    pointer-events: none;
    cursor: default;
}

#mind .belief_wrp .mind a {
    pointer-events: none;
    cursor: default;
}

/* @media screen and (max-width: 767px) {
    .belief_wrp :is(.mind, .make) a {
        width: 90%;
        grid-template-rows: 1fr auto;
    }

    .belief_wrp .mind a {
        grid-template-areas: 'logo txt' 'logo btn';
        grid-template-columns: 30% 1fr;
    }

    .belief_wrp .make a {
        grid-template-areas: 'txt logo' 'btn logo';
        grid-template-columns: 1fr 30%;
    }
} */

.belief_wrp :is(.mind, .make) .logo {
    grid-area: logo;
    width: max-content;
    height: min(8em, 17vw);
    margin: 0px auto 1em;
}

@media screen and (max-width:767px) {
    .belief_wrp :is(.mind, .make) .logo {
        margin: 0px auto;
    }
}

.belief_wrp :is(.mind, .make) .logo img {
    width: auto;
    height: 100%;
    transform: scale(1);
    transition: transform .3s 0s ease;
}

.belief_wrp :is(.mind, .make) a:hover .logo img {
    transform: scale(1.05);
}

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

    .belief_wrp .belief_wrp-ttl::before,
    .belief_wrp .belief_wrp-ttl::after {
        content: unset;
    }
}

/* @media screen and (max-width: 767px) {
    .belief_wrp :is(.mind, .make) .logo {
        width: 100%;
        height: auto;
        margin: 0;
        flex-shrink: 0;
    }

    .belief_wrp :is(.mind, .make) .logo img {
        width: 100%;
        height: auto;
    }
} */

/* .belief_wrp :is(.mind, .make) p {
    text-align: center;
    font-weight: bold;
    font-size: min(1.05em, 2.5vw);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

@media screen and (max-width:767px) {
    .belief_wrp :is(.mind, .make) p {
        line-height: 1.6;
        letter-spacing: 0.02em;
    }
} */

.belief_wrp :is(.mind, .make) .btn {
    grid-area: btn;
    display: block;
    width: min(15em, 90%);
    margin: 1em auto 0px;
    padding: .7em;
    text-align: center;
    border-radius: 100vmax;
    letter-spacing: 0.1em;
    border: solid 1px;
    font-size: min(.95em, 3vw);
    position: relative;
}

/* .belief_wrp :is(.mind, .make).disable .btn {
    display: none;
} */
#make .belief_wrp .make .btn {
    display: none;
}

#mind .belief_wrp .mind .btn {
    display: none;
}

.belief_wrp :is(.mind, .make) .btn .arrow {
    width: 1.6em;
    position: absolute;
    left: calc(100% - 2.7em);
    top: 50%;
    border-top: solid 1px;
    transition: width .3s 0s ease;
}

.belief_wrp :is(.mind, .make):hover .btn .arrow {
    width: 1.9em;
}

.belief_wrp :is(.mind, .make) .btn .arrow::after {
    content: "";
    width: .8em;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(30deg);
    transform-origin: right bottom;
    border-top: solid 1px;
}

@media screen and (max-width: 767px) {
    .belief_wrp :is(.mind, .make) .btn .arrow {
        width: 1.2em;
        left: calc(100% - 2em);
    }

    .belief_wrp :is(.mind, .make):hover .btn .arrow {
        width: 1.4em;
    }

    .belief_wrp :is(.mind, .make) .btn .arrow::after {
        width: 0.7em;
    }
}