/* =========================================
   カスタマイズ設定
   ========================================= */
:root {
    --bg-color: #050505;
    --text-main: #f0f0f0;
    --text-sub: #888;
    --accent-color: #d4af37;
    --border-color: rgba(255, 255, 255, 0.1);
    
    /* アニメーション用変数 */
    --fadeUp: 100px;
    --fallDown: -200px;
    --duration: 5s;
}

/* 全要素のボックスサイズ計算を統一（横スクロール防止の基本） */
*, *::before, *::after {
    box-sizing: border-box;
}

/* =========================================
   ローディング画面スタイル
   ========================================= */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease, visibility 1s ease;
}
#loader-overlay.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading {
    --color: #F5F9FF;
    --duration: 2000ms;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    position: relative;
    white-space: nowrap;
    user-select: none;
    color: var(--color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.loading div {
    opacity: 1;
    transition: opacity 0.3s;
}

.loading.start div {
    opacity: 0;
}

.loading span {
    --x: 0;
    --y: 0;
    --move-y: 0;
    --move-y-s: 0;
    --delay: 0ms;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    text-indent: calc(var(--x) * -1);
    overflow: hidden;
    transform: translate(var(--x), var(--y));
}

.loading.start span {
    animation: move var(--duration) ease-in-out var(--delay);
}

@keyframes move {
    30% {
        transform: translate(var(--x), var(--move-y));
    }
    82% {
        transform: translate(var(--x), var(--move-y-s));
    }
}

/* =========================================
   基本スタイル
   ========================================= */
html, body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    width: 100%;
}

a { text-decoration: none; color: inherit; transition: 0.5s; }
ul { list-style: none; padding: 0; margin: 0; }

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4vw;
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vertical-line {
    position: fixed;
    top: 0; bottom: 0; width: 1px;
    background: rgba(255, 255, 255, 0.03);
    z-index: 100;
    height: 0;
    transition: height 1.5s ease-in-out;
    pointer-events: none;
}
.vertical-line.active { height: 100%; }
.line-left { left: 10vw; }
.line-right { right: 10vw; }

/* =========================================
   Sticky Section
   ========================================= */
.sticky-section {
    position: sticky;
    top: 0;
    width: 100%;
    /* 高さ計算をJS変数(--vh)に完全依存させる */
    min-height: 100vh; /* fallback */
    min-height: calc(var(--vh, 1vh) * 100);
    background-color: var(--bg-color);
    overflow: hidden;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}

#hero    { z-index: 1; }
#news    { z-index: 2; }
#profile { z-index: 3; }
footer   { z-index: 4; }

/* =========================================
   Header (Main Visual)
   ========================================= */
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 10vw; 
}
/* グローバルナビゲーション */
.global-nav {
    position: absolute;
    top: 3.5rem;
    right: 5vw; /* 15vw -> 5vw に変更 */
    z-index: 10;
}
.global-nav ul {
    display: flex;
    gap: 1.5rem;
}
.global-nav a {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: var(--text-sub);
    text-transform: uppercase;
    position: relative;
}
.global-nav a:hover { color: var(--accent-color); }
.global-nav a.current { color: var(--text-main); }

.hero-visual {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
}

.hero-img-wrap {
    position: absolute;
    opacity: 0;
    filter: grayscale(100%) brightness(0.6);
    transition: opacity 2s ease, transform 2s ease, filter 0.5s ease;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    pointer-events: auto;
}
.hero-img-wrap.active { opacity: 1; }
.hero-img-wrap:hover {
    filter: grayscale(0%) brightness(1);
    z-index: 10;
}
.hero-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* 重要修正: 画像の位置・高さ指定における vh 単位を全て
   calc(var(--vh, 1vh) * 数値) に置換。
   これによりアドレスバー伸縮による再計算（ガクつき）を防止。
*/
.pos-1 {
    /* top: 15vh; */
    top: calc(var(--vh, 1vh) * 15);
    right: 1vw; 
    width: 21vw; 
    /* height: 85vh; */
    height: calc(var(--vh, 1vh) * 85);
    transform: translateY(20px); z-index: 2;
}
.pos-2 {
    bottom: 42%; left: 2vw; width: 54vw; aspect-ratio: 16/9;
    transform: translateY(20px); z-index: 0;
    filter: grayscale(100%) brightness(0.4);
}
.pos-3 {
    /* top: 15vh; */
    top: calc(var(--vh, 1vh) * 15);
    right: 23vw; 
    width: 21vw; 
    /* height: 85vh; */
    height: calc(var(--vh, 1vh) * 85);
    transform: translateY(20px); z-index: 1;
    border-left: 1px solid rgba(0,0,0,0.5); 
}
.pos-4 {
    bottom: 1%; left: 4vw; width: 55vw; 
    /* height: 40vh; */
    height: calc(var(--vh, 1vh) * 40);
    transform: translateY(20px); z-index: 3;
    filter: grayscale(100%) brightness(0.6);
}
.pos-1.active, .pos-2.active, .pos-3.active, .pos-4.active {
    transform: translateY(0);
}

.header-bg-text {
    position: absolute; right: 50vw; top: 10%;
    font-family: 'Montserrat', sans-serif;
    font-size: 15vw; font-weight: 900;
    opacity: 0.03; line-height: 0.8; z-index: -4;
    pointer-events: none; writing-mode: vertical-rl;
}

.hero-text-container {
    position: relative; z-index: 2; margin-top: 0;
}
.role-wrapper, .name-wrapper { overflow: hidden; margin-bottom: 1rem; }

.role {
    font-family: 'Montserrat', sans-serif; font-size: 0.9rem;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--accent-color); display: block;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.role.reveal-text {
    transform: translateY(100%); opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}
.role.reveal-text.active { transform: translateY(0); opacity: 1; }

.animated-title {
    margin: 0; line-height: 1.1;
    text-shadow: 0 0 20px rgba(0,0,0,0.8);
    color: #fff; font-family: "Cutive Mono", monospace;
    letter-spacing: 4px; font-size: 100px;
    -webkit-font-smoothing: antialiased;
    text-align: left; white-space: nowrap;
}

.reg-text {
    display: block; transform: translateY(var(--fadeUp)); opacity: 0;
    transition: transform calc(var(--duration) / 1.5) ease-out, opacity var(--duration) ease;
}
.reg-text.loaded { opacity: 1; transform: translateY(0); }

.letters { display: inline-block; }
.letter {
    display: inline-block; opacity: 0; filter: blur(5px);
    transform: translateY(var(--fallDown));
    transition: transform var(--duration) cubic-bezier(.43,.1,.57,.9), filter var(--duration) ease, opacity var(--duration) ease;
}

.letters .letter:nth-child(1) { transform: translateY(calc(var(--fallDown) + 40px)); transition-duration: calc(var(--duration) / 2); }
.letters .letter:nth-child(2) { filter: blur(0); transform: translateY(calc(var(--fallDown) + 30px)); transition-duration: calc(var(--duration) / 1.3); }
.letters .letter:nth-child(3) { transform: translateY(var(--fallDown)); transition-duration: calc(var(--duration) / 1.5); }
.letters .letter:nth-child(4) { transform: translateY(calc(var(--fallDown) + 50px)); transition-duration: calc(var(--duration) / 2); }
.letters .letter:nth-child(5) { filter: blur(0); transform: translateY(calc(var(--fallDown) + 20px)); transition-duration: calc(var(--duration) / 2.3); }
.letters .letter:nth-child(6) { transform: translateY(calc(var(--fallDown) + 10px)); transition-duration: calc(var(--duration) / 1.8); }
.letters .letter.loaded { opacity: 1; transform: translateY(0); filter: blur(0); }

.bio {
    margin-top: 3rem; max-width: 500px;
    color: var(--text-sub); font-size: 1rem;
    font-weight: 300; opacity: 0;
    transition: opacity 1.5s ease 1s;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.bio.active { opacity: 1; }

/* =========================================
   News Section
   ========================================= */
.news-section {
    padding: 0; 
}

#news .container {
    justify-content: flex-start;
    padding-top: 0; 
    /* padding-bottom: 40vh; */
    padding-bottom: calc(var(--vh, 1vh) * 40);
}

.news-container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

.section-title {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 2rem; 
    display: inline-block;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.news-list {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

.news-item {
    display: flex;
    align-items: baseline;
    padding: 1.5rem 0; 
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}
.news-item:hover { border-bottom-color: var(--accent-color); }

.news-date {
    width: 200px; flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    letter-spacing: 0.05em;
}

.news-content {
    font-size: 1.5rem; line-height: 1.6;
    color: var(--text-main);
    font-family: 'Montserrat', sans-serif;
}

.is-visible .section-title,
.is-visible .news-list {
    opacity: 1; transform: translateY(0);
}

/* =========================================
   Profile Section
   ========================================= */
#profile.sticky-section {
    background-color: #f4f4f4;
    color: #111;
    min-height: 100vh; /* fallback */
    min-height: calc(var(--vh, 1vh) * 100);
}

#profile .container {
    max-width: 100%;
    padding: 0; 
    justify-content: flex-start;
    padding-top: 0; 
}

.profile-content {
    display: grid;
    grid-template-columns: 50% 50%; 
    gap: 0; 
    align-items: stretch; 
    width: 100%;
    height: 100%; 
    
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}
.is-visible .profile-content {
    opacity: 1; transform: translateY(0);
}

.profile-img-wrap {
    width: 100%;
    min-height: 100vh; /* fallback */
    min-height: calc(var(--vh, 1vh) * 100);
    height: 100%;
    overflow: hidden;
    position: relative;
}
.profile-img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.profile-text-area {
    padding: 3vh 6vw; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.profile-text-area .section-title {
    color: #111; 
    border-bottom-color: #ccc;
    margin-bottom: 3rem;
}

.profile-text h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 3.5rem; 
    font-weight: 600; 
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1;
    color: #111;
}
.profile-text .en-name {
    display: block;
    font-size: 1.2rem;
    color: #666; 
    margin-bottom: 3rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.1em;
}

.profile-desc {
    font-size: 1.1rem;
    line-height: 2.2;
    color: #333; 
    max-width: 600px;
}

/* =========================================
   Footer
   ========================================= */
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh !important; /* fallback */
    min-height: calc(var(--vh, 1vh) * 50) !important;
    background-color: #000; 
    position: relative; 
    overflow: hidden;
}

.social-links { 
    position: absolute; 
    right: 15vw; 
    top: 50%;
    transform: translateY(-50%);
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
    z-index: 2; 
    align-items: flex-end; 
}
.social-links a {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    position: relative;
}
.social-links a::after {
    content: ''; position: absolute;
    bottom: -5px; left: 0; width: 0%; height: 1px;
    background: var(--accent-color); transition: 0.4s;
}
.social-links a:hover { color: var(--accent-color); }
.social-links a:hover::after { width: 100%; }

.footer-title-anim {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    color: transparent;
    font-size: 9vw; 
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap; 
    
    background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
    background-position: 40% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; 
    z-index: 1; 
    opacity: 0.5; 
    pointer-events: none; 
}

footer .container {
    position: static; 
}

footer .footer-title-anim {
    width: 100vw;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 0 5vw;
    font-size: clamp(48px, 8vw, 140px); 
    white-space: nowrap;
}

.copyright {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    z-index: 2;
    margin: 0;
}

/* =========================================
   Mobile / Tablet Responsive
   ========================================= */
@media (max-width: 1024px) {
    h1 { font-size: 3rem; }
    .animated-title { font-size: 60px; }
    .header-bg-text { display: none; }
    
    .line-left, .line-right { display: none; }
    header { 
        padding-left: 0; 
        align-items: center; 
        text-align: center;
        height: 100vh; /* fallback */
        height: calc(var(--vh, 1vh) * 100);
        position: relative; 
    }
    
    .global-nav {
        top: 2rem; right: auto; width: 100%;
        display: flex; justify-content: center;
    }
    .global-nav ul { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
    
    .global-nav a {
        color: var(--accent-color); 
        font-size: 0.9rem; 
    }
    
    .hero-visual { 
        z-index: 0; 
    }
    .hero-img-wrap {
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100%; margin: auto;
        
        opacity: 0; 
        transform: none !important;
        transition: none; 
        animation: slideShowMobile 15s infinite both; 
        border: none; pointer-events: none;
        
        filter: grayscale(0%) brightness(0.7) !important;
    }

    .pos-1, .pos-2, .pos-3, .pos-4 { 
        display: block; width: 100%; height: 100%; aspect-ratio: auto;
    }
    .pos-4 { display: none; } 

    .pos-1 { animation-delay: 0s; z-index: 1; }
    .pos-2 { 
        animation-delay: 5s; 
        z-index: 1; 
    }
    .pos-3 { 
        animation-delay: 10s; 
        z-index: 1; 
        border: none; 
    }

    @keyframes slideShowMobile {
        0% { opacity: 0; transform: scale(1.1); }
        6% { opacity: 1; }   
        33% { opacity: 1; }  
        40% { opacity: 0; transform: scale(1); } 
        100% { opacity: 0; }
    }

    .hero-text-container { margin-left: 0; margin-top: 0; }

    .sticky-section {
        position: sticky;
        top: 0; 
        min-height: 100vh; /* fallback */
        min-height: calc(var(--vh, 1vh) * 100);
        box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
        overflow: hidden;
    }

    .news-section .container { padding: 0 5vw; }
    #news .container { 
        padding-top: 0;
        /* padding-bottom: 20vh; */
        padding-bottom: calc(var(--vh, 1vh) * 20);
    }
    
    .section-title { font-size: 2.5rem; margin-bottom: 2rem; }
    .news-item { flex-direction: column; gap: 0.5rem; padding: 1.5rem 0; }
    .news-date { font-size: 0.9rem; width: auto; }
    .news-content { font-size: 1rem; }

    #profile .container { padding: 0; } 
    .profile-content { 
        grid-template-columns: 1fr; 
        gap: 0; 
    }
    
    .profile-img-wrap { 
        height: auto; 
        min-height: auto;
    }
    
    .profile-img {
        height: auto; 
        max-height: none; 
        object-fit: contain; 
    }

    .profile-text-area {
        padding: 4rem 1.5rem; /* 修正: タブレット向けに元の4remに戻しました */
    }
    
    footer {
        flex-direction: column;
        align-items: center;
        gap: 2rem; 
        margin-top: 0; 
        padding: 4rem 0; 
        text-align: center;
        min-height: 30vh !important; /* fallback */
        min-height: calc(var(--vh, 1vh) * 30) !important;
    }
    .social-links {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        gap: 2rem;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .footer-title-anim { width: 100%; font-size: 8vw; } 
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    #profile.sticky-section {
        min-height: 100vh; /* fallback */
        min-height: calc(var(--vh, 1vh) * 100);
        height: auto; 
    }
    .profile-img-wrap {
        height: auto; 
    }
    .profile-img {
        height: auto;
    }
    
    /* Profileセクション（白背景）の高さを拡張し、内容を中央揃え */
    .profile-text-area {
        padding: 4rem 2.5rem 15rem 2.5rem; /* 下部の余白を大幅に増やして白エリアを広くする */
        min-height: 60vh; /* 最低限の高さを確保 */
        align-items: center; /* フレックスアイテムを水平方向中央に */
        text-align: center;  /* テキストを中央揃え */
    }

    /* Profileセクションの文字サイズ拡大（視認性向上） */
    .profile-text-area .section-title {
        font-size: 3.5rem; /* タイトルを大きく */
        margin-bottom: 4rem; /* 下の要素との距離を広げる */
    }

    .profile-text h3 {
        font-size: 4.5rem; /* 名前（日本語）を大幅に大きく */
        margin-bottom: 1rem;
    }

    .profile-text .en-name {
        font-size: 1.4rem; /* 名前（英語）を大きく */
        letter-spacing: 0.2em;
        margin-bottom: 4rem; /* 説明文との距離を広げる */
    }

    .profile-desc {
        font-size: 1.3rem; /* 説明文を読みやすいサイズに拡大 */
        line-height: 2.2;
        width: 100%;
        max-width: 700px; /* 一行が長くなりすぎないように制限 */
        margin: 0 auto; /* 中央配置 */
    }

    /* 以下、追加修正 */
    .global-nav a {
        font-size: 1.5rem; /* ナビゲーション文字を大きく */
    }

    .animated-title {
        font-size: 110px; /* 90px -> 110px に拡大 */
    }
    
    .role {
        font-size: 1.2rem; /* 肩書きを大きく */
    }

    /* Newsセクションの高さをコンテンツに合わせて自動調整（余白を削除） */
    #news.sticky-section {
        min-height: auto; /* 100vhの強制を解除 */
        height: auto;     /* コンテンツの高さに合わせる */
        padding-bottom: 80px; /* 次のセクションとの間に適度な余白を確保 */
    }

    /* Newsセクション内のレイアウト調整 */
    #news .container {
        padding-top: 140px;      /* ヘッダー被りを防ぐ上部余白 */
        padding-bottom: 0;       /* 下部余白はセクション側で制御 */
        height: auto;            /* コンテナの高さ制限も解除 */
        justify-content: flex-start; /* 上詰め配置 */
        display: block;          /* フレックスボックスの高さ拡張を解除 */
    }
    
    /* 中央寄せ解除に伴う微調整 */
    .news-container {
        margin: 0 auto;
    }

    /* Footerの高さを縮小し、Profileセクションの表示領域を確保 */
    footer {
        min-height: auto !important; /* 強制的な高さを解除 */
        padding: 8vh 0; /* 上下のパディングを均等に変更し、垂直方向の中央配置を実現 */
        justify-content: center;
        text-align: center; /* 全体を中央揃え */
    }

    /* フッター内の要素の配置調整：高さを使わないようにposition:static/relativeに変更 */
    footer .footer-title-anim {
        position: relative;
        top: auto; left: auto;
        right: auto;
        transform: none;
        width: 100%; /* 幅を画面いっぱいに */
        font-size: 8vw; 
        margin-bottom: 2rem;
        background-position: center center !important; /* 背景アニメーション位置も中央に */
    }

    footer .social-links {
        position: relative;
        top: auto; right: auto; left: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto 2rem auto; /* 中央配置 */
        width: 100%;
        gap: 3rem;
        align-items: center; /* 垂直方向も中央 */
    }

    footer .copyright {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }
}

/* =========================================
   PC大画面対応 (1600px以上)
   ========================================= */
@media (min-width: 1600px) {
    /* メインビジュアルの画像エリアを最大幅1600pxで中央固定 */
    .hero-visual {
        max-width: 1600px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    /* 各画像のサイズと位置をvw（画面幅依存）からpx（固定値）に変更 */
    /* これにより大画面でも画像が巨大化せず、位置関係が固定されます */
    
    .pos-1 {
        width: 336px; /* 21vw -> 336px */
        right: 16px;  /* 1vw  -> 16px */
        /* 固定値なので calc(var(--vh)...) は不要。ここはpx固定でOK */
        height: 85vh; /* PCではvh変動は起きにくいが念のため */
        top: 15vh;
    }
    /* 念のためPC大画面でもvhの影響を排除する場合は以下のように上書き */
    /* しかしPCはアドレスバー変動がないのでvhでも問題ありませんが、統一しても良いです */
    
    .pos-2 {
        width: 864px; /* 54vw -> 864px */
        left: 32px;   /* 2vw  -> 32px */
    }
    .pos-3 {
        width: 336px; /* 21vw -> 336px */
        right: 368px; /* 23vw -> 368px */
        height: 85vh;
        top: 15vh;
    }
    .pos-4 {
        width: 880px; /* 55vw -> 880px */
        left: 64px;   /* 4vw  -> 64px */
        height: 40vh;
    }

    /* 背景テキストのサイズと位置も固定 */
    .header-bg-text {
        font-size: 240px; /* 15vw -> 240px */
        right: 50%;       /* 画面中央基準に固定 */
    }

    /* === 追加修正: ナビゲーションとメインテキストの固定 === */
    
    /* メインテキスト（名前など）の位置固定 */
    /* padding-left: 10vw (1600px時=160px) を、画面中央からの距離に換算 */
    header {
        padding-left: calc((100vw - 1600px) / 2 + 160px);
    }

    /* グローバルナビゲーションの位置固定 */
    /* right: 5vw (1600px時=80px) を、画面中央からの距離に換算 */
    .global-nav {
        right: calc((100vw - 1600px) / 2 + 80px);
    }
}

/* Mobile (768px -) */
@media (max-width: 768px) {
    /* 修正: スマホ専用の設定として、Profileセクションの高さ短縮・余白詰めをここに移動 */
    #profile.sticky-section {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0;
    }

    .profile-text-area {
        padding: 2rem 1.5rem 1rem 1.5rem; /* 下の余白を短縮 */
    }
    .profile-text-area .section-title {
        margin-bottom: 1.5rem; /* タイトル下の余白を短縮 */
    }
    .profile-text h3 { 
        font-size: 2.5rem;
        margin-bottom: 0.2rem; /* 名前下の余白を詰める */
    }
    .profile-text .en-name {
        margin-bottom: 1.5rem; /* 英語名下の余白を大幅に短縮 */
    }
}