@charset "utf-8";

.desc p {
    font-weight: 500;
    font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
    color: #FFF;
}

.tit-en.f-80 {
    font-family: var(--futura);
    font-weight: 500;
    font-size: clamp(2rem, 1.272rem + 3.11vw, 5rem);
    color: #f00;
}

.about {
    padding: 70px 0 100px;
}

.about .inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 37px 0 67px;
    position: relative;
    z-index: 5;
}

.about .inner::before {
    content: "";
    max-width: 1172px;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 999px;
    border: 1px solid #fff;
    opacity: 0.44;
    z-index: -1;
    position: absolute;
    inset: 0;
    margin: auto;
}

.about .inner .column {
    display: flex;
    width: 90%;
    justify-content: space-between;
    margin: 0 auto;
}

.about .inner .column.bottom {
    flex-direction: row-reverse;
    margin-right: auto;
    margin-left: 0;
    width: 95%;
}

.about .inner .column .sec-text {
    display: flex;
    flex-direction: column;
    gap: 30px;
}



.about .inner .column .sec-text .desc p {
    line-height: 2;
    color: #fff;
}

.about .inner .column .sec-img {
    max-width: 352px;
    width: 26%;
}

.about .inner .column.bottom .sec-img {
    max-width: 815px;
    width: 59%;
}

.about .inner .column.bottom .sec-text {
    align-items: flex-end;
}

.about .inner .column.bottom .group {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about .inner .column.bottom .group .tit-en {
    font-family: var(--futura);
    font-weight: 500;
    font-size: clamp(2rem, 1.697rem + 1.29vw, 3.25rem);
    color: #fff;
}

.sec-logo {
    padding-bottom: 220px;
}

.sec-logo .inner {
    position: relative;
    z-index: 5;

}

.sec-logo .bg {
    opacity: 0;
    transition: .4s ease;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: -1;
}

.sec-logo .bg.is-active {
    opacity: 1;
}

.sec-logo .img {
    max-width: 1010px;
    width: 80%;
    margin: auto;
    opacity: 0;
    transition: .4s ease;
}

.sec-logo .img.is-active {
    opacity: 1;
    transition-delay: .4s;
}

.story .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story .inner .tit-en {
    margin-bottom: 60px;
}

.story .column {
    display: flex;
    max-width: 1920px;
    width: 90%;
}

.story .column.top {
    margin-left: auto;
    margin-bottom: 40px;
}

.story .column.bottom {
    margin-right: auto;
    flex-direction: row-reverse;
}

.story .column .tit-ja {
    font-weight: 500;
    font-size: clamp(1.5rem, 1.257rem + 1.04vw, 2.5rem);
    color: #fff;
}

.story .column .sec-text {
    max-width: calc(866 / 1920 * 100vw);
    width: 51%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
    border: 1px solid #f00;
    padding: 0 2% 0 5%;
}

.story .column.top .sec-text {
    border-right: none;
}

.story .column.bottom .sec-text {
    border-left: none;
}

.story .column .sec-img {
    max-width: calc(862/1920*100vw);
    width: 66%;
}

.story .column .sec-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.philosophy .inner {
    padding: 240px 0 132px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.philosophy .sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.philosophy .sec-head .catch {
    font-family: var(--futura);
    font-weight: 500;
    font-size: clamp(1.5rem, 1.288rem + 0.91vw, 2.375rem);
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
}

.philosophy .sec-head .desc p {
    font-size: clamp(0.875rem, 0.784rem + 0.39vw, 1.25rem);
    line-height: 2;
    text-align: center;
    color: #fff;
}

.philosophy .sec-body {
    display: flex;
    flex-direction: column;
    gap: 132px;
}

.philosophy .item .img {
    position: relative;
}

.philosophy .item .label {
    padding: 10px 20px;
    text-align: center;
    font-family: var(--futura);
    font-weight: 500;
    font-size: clamp(0.75rem, 0.598rem + 0.65vw, 1.375rem);
    color: #fff;
    background: #f00;
    position: absolute;
}

.philosophy .item01 .label {
    bottom: 32px;
    left: 0;
}

.philosophy .item02 .label {
    bottom: 51px;
    right: 0;
}

.philosophy .item03 .label {
    bottom: 27px;
    right: 0;
}

.philosophy .item04 .label {
    top: 26px;
    left: 0;
}

.philosophy .column {
    display: flex;
    align-items: flex-start;
    gap: 5%;
}

.philosophy .item02 {
    margin-top: 282px;
}

.philosophy .item04 {
    margin-top: 124px;
}

.philosophy .online {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
}

.philosophy .online .group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5%;
}

.philosophy .online .morebtn a {
    background-color: transparent;
    border: none;
    padding: 0;
}

.philosophy .online .morebtn a .link-text {
    color: #f00;
    font-size: clamp(0.875rem, 0.723rem + 0.65vw, 1.5rem);
    transition: .4s ease;
}

.philosophy .online .morebtn a .arrow {
    width: 27px;
    background-image: url(/system_panel/uploads/images/20260826005727540728.svg);
    transition: .4s ease;
}

.philosophy .online .morebtn:hover a .arrow {
    background-image: url(/system_panel/uploads/images/20260821234815866543.svg);
}

.philosophy .online .morebtn:hover a .link-text {
    color: #FFF;
    text-decoration: underline;
}

.philosophy .list-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    backdrop-filter: blur(30px);
    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform:
        translate(-50%, -50%) scale(0.85);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.philosophy .list-cursor .link-text {
    font-family: var(--poppins);
    font-weight: 400;
    font-size: clamp(0.938rem, 0.786rem + 0.65vw, 1.563rem);
    text-align: center;
    color: #fff;
}

.philosophy .list-cursor .arrow {
    width: 19px;
    aspect-ratio: 1/1;
    background-image: url(/system_panel/uploads/images/20260820134837379348.svg);
}

.philosophy .list-cursor.is-active {
    opacity: 1;
    transform:
        translate(-50%, -50%) scale(1);
}

.kf-chan .inner {
    background-color: #FF0A0A;
}

.kf-chan .inner .w90 {
    width: 94%;
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    gap: 2%;
}

.kf-chan .sec-img {
    max-width: 647px;
    width: 52%;
}

.kf-chan .sec-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kf-chan .sec-text .tit-en {
    font-family: var(--futura);
    font-weight: 500;
    font-size: clamp(1.75rem, 0.961rem + 3.37vw, 5rem);
    color: #000;
}

.kf-chan .sec-text .text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kf-chan .sec-text .text .catch {
    font-weight: 500;
    font-size: clamp(1.125rem, 0.791rem + 1.42vw, 2.5rem);
    color: #000;
}

.kf-chan .sec-text .text .desc p {
    color: #000;
    font-size: clamp(0.75rem, 0.629rem + 0.52vw, 1.25rem);
    line-height: calc(32/20);
}

@media (max-width: 1280px) {
    .about .inner .column .sec-text {
        width: 65%;
    }

    .story .column .sec-text {
        max-width: 58%;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .kf-chan .sec-img {
        width: 43%;
    }
}

@media (max-width: 1023px) {
    .about .inner {
        padding-top: 127px;
        width: 92%;
    }

    .about .inner .column {
        flex-direction: column;
        gap: 40px;

    }



    .about .inner .column .sec-text,
    .about .inner .column {
        width: 100%;
    }

    .about .inner .column .sec-img {
        max-width: none;
        width: 100%;
    }

    .about .inner .column.top .pc-hidden {
        display: block;
    }

    .about .inner .column.top .sp-hidden {
        display: none;
    }

    .about .inner .column.bottom .sec-img {
        display: none;
    }

    .about .inner .column.bottom .sec-text {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: flex-start;
        gap: 20px;
    }

    .about .inner .column.bottom .sec-text img {
        grid-column: 1/2;
        grid-row: 2;
        display: block;
    }

    .about .inner .column.bottom .group01 {
        grid-column: 1/3;
        gap: 10px;
    }

    .about .inner .column.bottom .group02 {
        grid-column: 2/3;
        gap: 10px;
        grid-row: 2;
    }

    .about .inner .column.bottom {
        margin: auto;
        width: 100%;
    }

    .about .inner::before {
        content: none;
    }

    .story .column {
        width: 100%;
    }

    .story .inner {
        width: 90%;
        margin: 0 auto;
    }

    .story .column.top {
        margin: 0 auto 40px;
        flex-direction: column-reverse;
    }

    .story .column .sec-text {
        max-width: 100%;
    }

    .story .column .sec-img {
        max-width: 100%;
        width: 100%;
    }

    .story .column.bottom {
        flex-direction: column-reverse;
        margin: 0 auto;
    }

    .story .column.bottom .sec-text,
    .story .column.top .sec-text {
        border-top: none;
        border-right: 1px solid #FF0000;
        border-left: 1px solid #FF0000;
    }

    .kf-chan .inner .w90 {
        flex-direction: column;
        width: 80%;
    }

    .kf-chan .sec-text {
        display: flex;
        gap: 10px;
    }

    .kf-chan .sec-text img {
        display: block;
    }

    .kf-chan .sec-img {
        display: none;
    }

    .kf-chan .sec-text .text {
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .about .inner .column.bottom .sec-text img {
        max-width: 154px;
        width: 100%;
    }

    .about {
        padding: 0;
    }

    .about .inner {
        padding: 127px 0 40px;
    }



    .sec-logo {
        padding-bottom: 75px;
    }

    .story .column.bottom .sec-text,
    .story .column.top .sec-text {
        padding: 20px 10px;
    }

    .story .column .tit-ja {
        white-space: nowrap;
    }

    .story .column.bottom .sec-text .desc,
    .story .column.top .sec-text .desc {
        width: 101%;
        margin: 0 auto;
    }

    .philosophy .inner {
        padding: 80px 0 36px;
        gap: 40px;
    }

    .philosophy .sec-head .catch {
        margin-bottom: 10px;
    }

    .philosophy .item02 {
        margin-top: 78px;
    }

    .philosophy .item04 {
        margin-top: 34px;
    }

    .philosophy .item .label {
        padding: 0 10px;
    }

    .philosophy .sec-body {
        gap: 40px;
    }

    .philosophy .item01 .label,
    .philosophy .item02 .label,
    .philosophy .item03 .label {
        bottom: 7px;
    }

    .philosophy .item04 .label {
        top: 7px;
    }

    .kf-chan .inner .w90 {
        padding: 6px 0 15px;
    }
}




.gjs-dashed .sec-logo .bg,
.gjs-dashed .sec-logo .img {
    opacity: 1;
}