/* ========================================
   Profile Message
======================================== */

.profile-message {
    background: var(--color-background);
    color: var(--color-text);
}

/* ========================================
   Visual
======================================== */

.profile-message__visual {
    position: relative;

    width: 100%;
    margin: 0;
    height: 420px;
    /* overflow: hidden; */
}

.profile-message__visual img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 55%;
}

/* 青緑オーバーレイ */
.profile-message__visual::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    background-color: rgba(0, 160, 155, 0.35);

    pointer-events: none;
}
/* ========================================
   Profile画像を画面左端まで広げる
======================================== */

@media (min-width: 1025px) {
    .profile-message__visual {
        width: calc(100% + var(--sidebar-width));
        margin-left: calc(var(--sidebar-width) * -1);
    }
}
/* ========================================
   Content
======================================== */

.profile-message__content {
    position: relative;

    /* ▼2026-09-10 変更：氏名・リード文（profile-message__body）を削除した際、
       それを収める前提だったmin-height: 720pxがそのまま残り、
       縦書きテキストの下に大きな空白ができてkizunaセクションが
       見えづらくなっていたため、縦書きテキストに合わせて縮小 */
    min-height: 420px;
    padding: 180px 20px 0;

    text-align: center;
}

/* ========================================
   Vertical Copy
======================================== */

.profile-message__vertical-wrap {
    position: absolute;
    top: -50px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
}

.profile-message__vertical {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;

    margin-top: 0;
    padding-top: 20px;

    overflow: visible;
}

.profile-message__vertical p {
    position: relative;
    width: 1.65em;
    flex: 0 0 1.65em;
    margin: 0;
    padding: 0 8px 10px;

    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;

    text-orientation: upright;

    font-size: 50px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.08em;

    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;

    color: var(--color-text);

    overflow: visible;

    /* 右ラインの場所だけ先に確保 */
    border-right: 1px solid transparent;
}

/* 文字は位置を確保したまま透明 */
.profile-message__vertical p span {
    opacity: 0;
}

/* タイピングで文字表示 */
.profile-message__vertical p span.is-visible {
    opacity: 1;
}

/* その列の1文字目と同時に右線表示 */
.profile-message__vertical p.is-started {
    border-right-color: var(--color-text);
}

/* ========================================
   Name
======================================== */

.profile-message__name {
    margin-top: 70px;
}

.profile-message__name-ja {
    margin-top: 200px;

    font-size: 70px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.12em;
}

.profile-message__name-en {
    margin: 8px 0 0;

    color: var(--color-muted);

    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-family: var(--font-crimson);
}

/* ========================================
   Body
======================================== */

.profile-message__body {
    margin-top: 45px;
}

.profile-message__lead {
    margin: 0;

    font-size: 32px;
    font-weight: 800;
    line-height: 2.2;
    letter-spacing: 0.12em;
}

.profile-message__text {
    margin: 25px auto 0;

    color: var(--color-muted);

    font-size: 16px;
    font-weight: 600;
    line-height: 2.2;
    letter-spacing: 0.12em;
}

/* ========================================
   スマホ
======================================== */

@media (max-width: 600px) {
    .profile-message__visual {
        height: 62vw;
        min-height: 260px;
    }

    .profile-message__content {
        min-height: auto;

        padding: 145px 48px 70px;
    }

    .profile-message__vertical-wrap {
        top: -25px;
        left: 50%;
        width: 100%;

        transform: translateX(-50%);
    }

    .profile-message__vertical {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: flex-start;

        /* 縦書き同士の間隔 */
        gap: 18px;
        transform: translateY(-20px);
        width: 100%;
        height: 400px;
    }

    .profile-message__name {
        margin-top: 130px;
    }

    .profile-message__name-en {
        font-size: 16px;
        font-weight: 600;
    }
    .profile-message__name-ja {
        font-size: 40px;
    }

    .profile-message__lead {
        font-size: 20px;
        line-height: 1.9;
        font-weight: 800;
    }

    .profile-message__text {
        font-size: 14px;
        line-height: 2;
    }

    .profile-message__text br {
        display: none;
    }
    .profile-message__vertical p {
        flex: 0 0 auto;

        margin: 0;
        padding: 0 4px 10px;

        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: 0.08em;
    }
}