@charset "utf-8";

@font-face {
    font-family: "Klee One";
    src: url("../external/KleeOne-Regular.woff2") format("woff2");
    font-display: swap;
}

html,
body,
button,
input,
select,
textarea {
    font-family: "Klee One", sans-serif;
}

.profile-box img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
}

.profile-box #profile-title {
    margin-top: 2rem;
    margin-bottom: 40px;
    color: rgb(93, 59, 35);
    font-size: 44px;
    text-align: center;
    z-index: 2;
}

/* まずは常に見える状態を基準にする */
.profile-box .slide-right,
.profile-box .slide-left {
    opacity: 1;
    transform: translateX(0);
}

/* JS初期化が成功した時だけ、アニメーション待機状態にする */
.profile-box.is-reveal-ready .slide-right,
.profile-box.is-reveal-ready .slide-left {
    opacity: 0;
    transition:
        opacity 1s ease,
        transform 1s ease;
    will-change: opacity, transform;
}

.profile-box.is-reveal-ready .slide-right {
    transform: translateX(100px);
}

.profile-box.is-reveal-ready .slide-left {
    transform: translateX(-100px);
}

.profile-box.is-reveal-ready .slide-right.show,
.profile-box.is-reveal-ready .slide-left.show {
    opacity: 1;
    transform: translateX(0);
}

/* 動きを減らす設定の環境では即表示 */
@media (prefers-reduced-motion: reduce) {
    .profile-box.is-reveal-ready .slide-right,
    .profile-box.is-reveal-ready .slide-left,
    .profile-box.is-reveal-ready .slide-right.show,
    .profile-box.is-reveal-ready .slide-left.show {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.profile-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.profile-box #profile-title {
    width: 100%;
}

.profile-box img {
    display: block;
    width: calc(50% - 12px);
    border-radius: 0.6rem;
}

@media screen and (orientation: portrait) {
    .profile-box {
        gap: 16px;
    }

    .profile-box img {
        width: 100%;
    }
}