@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background-color: #f4f4f4;
}

/* --- ローディング画面 --- */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 9999;
    transition: opacity 1s ease, visibility 1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#loading.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- Welcome画面 --- */
#flat-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0e0e0e;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 50px;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

#flat-content.hidden {
    transform: translateY(-100%);
}

#flat-content .container {
    text-align: left;
    font-family: "DotGothic16", sans-serif;
    color: #fff;
}

#flat-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* --- WebGL --- */
.webgl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    outline: none;
    z-index: 0; /* Three.jsは一番奥 */
}

/* =========================================
   ヘッダーメニュー（ハンバーガー対応版）
   ========================================= */
.site-header {
    font-family: "DotGothic16", sans-serif;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background-color: transparent;

    /* アニメーション用 */
    transform: translateY(-200%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
    pointer-events: none;
}

.site-header.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ナビゲーションメニューのコンテナ */
.nav-menu {
    display: flex;
    gap: 15px;
}

/* メニューボタンのスタイル */
.site-header button {
    font-family: "DotGothic16", sans-serif;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    transition: all 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
}

.site-header button:hover {
    background: rgba(255, 255, 255, 0);
    transform: translateY(-2px);
    color: #5c5c5c;
}

/* --- ハンバーガーボタン（PCでは非表示） --- */
.hamburger-btn {
    display: none;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: auto;
    z-index: 10001;
    margin-left: auto;
}

.hamburger-btn span {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 2px;
    background-color: #333;
    transition: all 0.4s;
    border-radius: 2px;
}

.hamburger-btn span:nth-of-type(1) { top: 13px; }
.hamburger-btn span:nth-of-type(2) { top: 19px; }
.hamburger-btn span:nth-of-type(3) { top: 25px; }


/* =========================================
   フッター・ロゴ
   ========================================= */
.site-footer {
    font-family: "DotGothic16", sans-serif;
    position: fixed;
    text-align: center;
    z-index: 3;
    padding: 5px;
    bottom: 0;    
    left: 0;     
    width: 100%; 
    background-color: #f4f4f4;
}

.logo {
    position: fixed;
    top: 0px;
    left: 10px;
    z-index: 100;
}
/* ロゴ画像（PCの初期設定：画像本来のサイズ） */
.logo img {
    max-width: 100%;
    height: auto;
}

/* =========================================
   コンテンツエリア設定（PCベース：元のサイズ）
   ========================================= */

/* --- 1. ベースの共通設定 --- */
.overlay-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    z-index: 11;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    border-radius: 15px;
    padding: 40px;
}

.overlay-text::-webkit-scrollbar {
    width: 8px;
}
.overlay-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.overlay-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}
.overlay-text h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    padding-bottom: 10px;
}
.overlay-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.overlay-text.visible {
    opacity: 1;
    visibility: visible;
}

/* --- 2. 個別のデザイン設定 --- */

/* F地点（イントロ） */
#content-f {
    background: #fff;
    color: #333;
    width: 100%;
    max-height: 100vh;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* C地点（プロフィール等） */
#content-c {
    background: rgba(0, 0, 0, 0);
    color: #fff;
    width: 100%;
    max-width: 700px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto;
    text-align: center;
    font-family: "Zen Kurenaido", sans-serif;
    font-size: 20px;
}

/* D地点 */
#content-d {
    background: rgba(0, 0, 0, 0);
    color: #fff;
    width: 50%;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto;
    text-align: center;
    font-family: "DotGothic16", sans-serif;
    font-size: 20px;
}

/* E地点 */
#content-e {
    background: rgba(0, 0, 0, 0);
    color: #fff;
    width: 50%;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
}

/* テーブル風レイアウト用クラス */
.table-row {
    display: flex;
    width: 100%;
    padding: 15px;
}

.col-label {
    width: auto;    
    padding: 10px;
    text-align: center;
    margin-right: 15px;
    font-weight: bold; 
    text-align: left;
}

.col-text {
    padding: 10px;
    width: 80%;
    text-align: left;
}


/* --- 左右のスライド画像（PC初期値：450px） --- */
.overlay-corner {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    pointer-events: none;
    background: transparent;
    padding: 0;
    max-width: 450px; /* PCは450px */
    width: 100%;
    transition: opacity 0.5s ease, visibility 0.2s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.overlay-corner img {
    width: 100%;
    display: block;
}
.left-bottom {
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
}
.right-bottom {
    bottom: 0;
    right: 0;
    transform: translateX(100%);
}
.overlay-corner.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.2s ease 0.5s;
}

/* --- 空間内ボタン等 --- */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 20px;
    padding: 20px;
    width: auto;
}
.nav-button {
    padding: 10px 25px;
    font-size: 1.2rem;
    background-color: white;
    color: #333;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s, background-color 0.2s;
    width: auto;
}
.nav-button:hover {
    transform: scale(1.1);
    background-color: #eee;
}
.nav-button:active {
    transform: scale(0.95);
}

/* --- フォント設定 --- */
.intro, .intro-p {
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
}

/* --- タイプライター --- */
#typewriter-text {
    position: fixed;
    top: 87%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "DotGothic16", sans-serif;
    font-size: 1rem;
    color: #333;
    letter-spacing: 0.1em;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
}
#typewriter-text::after {
    content: "_";
    animation: blink 1s infinite;
    opacity: 1;
    margin-left: 5px;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle at center, transparent 0%, rgba(91, 91, 91, 0.4) 180%);
}

/* --- 中央フェードイン画像 --- */
.center-fade-image {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1); 
    transition: opacity 1.5s ease-out, visibility 1.5s ease-out, transform 1.5s ease-out;
}
.center-fade-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.center-fade-image.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1); 
    position: fixed;
}
.center-fade-image.hiding {
    opacity: 0;
    visibility: visible;
    transform: scale(1.2); 
    transition: opacity 1.0s ease-in, transform 1.0s ease-in, visibility 1.0s linear;
}

.back {
    position: sticky;
    top: 0px; 
    z-index: -100; 
    padding: 0;
    margin: 0;
}

/* --- ホバー画像（3枚重ね）の設定 --- */
.container {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.img-box {
    position: relative;
    width: 45%;
    height: 600px;
    overflow: hidden;
}

.img-box::before,
.img-box::after,
.img-box .overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}

/* レイヤー構成 */
.img-box .overlay {
    z-index: 3;   /* 最前面 */
    opacity: 0;   /* 最初は透明 */
}
.img-box::before {
    z-index: 2;   /* 真ん中 */
    opacity: 1;   /* 最初は見えている */
}
.img-box::after {
    z-index: 1;   /* 最背面 */
    opacity: 0;   /* 最初は透明 */
}

/* ホバー時の動作 */
.img-box:hover .overlay,
.img-box:hover::after {
    opacity: 1;
}

/* 画像設定 */
.img-1::before { background-image: url('./profile-15.png'); }
.img-1::after { background-image: url('./character-13.png'); }
.img-1 .overlay { background-image: url('./moji-17.png'); }

.img-1:hover::before { transform: translateX(-30%); }

.img-2::before { background-image: url('./profile-16.png'); }
.img-2::after { background-image: url('./character-14.png'); }
.img-2 .overlay { background-image: url('./moji-18.png'); }

.img-2:hover::before { transform: translateX(30%); }


/* --- 穴あき背景と浮遊画像 --- */
.overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Three.js(z-index:0)より手前 */
    pointer-events: none;
}

.hole-background {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-image: url('hyousi.png');
    background-size: cover;
    background-position: center;
}

.floating-images {
    position: absolute;
    width: 100%;
    height: 100%;
}

.img-item {
    position: absolute;
    pointer-events: auto;
}

/* PC初期値（元のサイズ） */
.item-1 {
    top: 180px;
    left: 150px;
    width: 600px; /* PCは600px */
}
.item-2 {
    bottom: 100px;
    right: 150px;
    width: 400px; /* PCは400px */
}

/* スクロール画像を中央に配置するコンテナ */
.scroll-container {
    text-align: center;
    width: 100%;
    margin-top: 85vh;
}
.scroll-container img {
    width: 150px;
    height: auto;
}

/* --- スクロールで表示される画像 --- */
.fade-in-image {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    will-change: opacity, transform;
}
.fade-in-image.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* PC初期値（元のサイズ） */
.external-image-container {
    position: fixed;
    top: 35%;
    right: 3%;
    transform: translateY(-50%);
    width: 400px; /* PCは400px */
    z-index: 1;
    pointer-events: none;
}

.external-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.external-image-container.position-left {
    right: auto;
    left: 3%;
    top: 40%; 
}


/* =========================================
   スマホ・タブレット用レスポンシブ設定 (完全版)
   ========================================= */
@media (max-width: 768px) {
    /* --- ハンバーガーメニュー有効化 --- */
    .hamburger-btn {
        display: block; 
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(244, 244, 244, 0.95);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        z-index: 10000;
    }

    .nav-menu.open {
        opacity: 1;
        visibility: visible;
    }

    .site-header button {
        background: transparent;
        border: none;
        font-size: 1.5rem;
        padding: 10px;
    }

    .hamburger-btn.open span:nth-of-type(1) {
        top: 19px;
        transform: rotate(45deg);
    }
    .hamburger-btn.open span:nth-of-type(2) {
        opacity: 0;
    }
    .hamburger-btn.open span:nth-of-type(3) {
        top: 19px;
        transform: rotate(-45deg);
    }

    /* --- 1. Welcome画面 --- */
    #flat-content {
        padding: 20px;
    }
    #flat-content h1 {
        font-size: 2rem;
    }
    #flat-content .container {
        font-size: 0.9rem;
    }

    /* --- 2. 各コンテンツの枠（C, D, E共通） --- */
    #content-c, 
    #content-d, 
    #content-e {
        width: 80% !important; 
        max-width: 100% !important;
        font-size: 16px;
        padding: 20px;
        height: 50vh;
    }

    /* --- 3. 内部レイアウトの縦積み化（C, D, E共通） --- */
    #content-c .table-row,
    #content-d .table-row,
    #content-e .table-row {
        flex-direction: column;
        padding: 0;
        gap: 0
        ;
    }

    /* ラベル */
    #content-c .col-label,
    #content-d .col-label,
    #content-e .col-label {
        width: 100%;
        text-align: left;
        font-size: 0.9rem;
        padding-left: 0;
        margin-bottom: -20px;
    }

    /* テキスト */
    #content-c .col-text,
    #content-d .col-text,
    #content-e .col-text {
        width: 100%;
        padding-left: 0;
        text-align: left;
    }

    /* --- 4. 画像付きホバーボックス（img-box） --- */
    .container {
        flex-direction: column;
        align-items: center;
    }
    .img-box {
        width: 100%;
        height: 400px;
        margin-bottom: 20px;
    }

    /* --- 5. スクロール連動画像（スマホのみ小さく変更） --- */
    .external-image-container {
        width: 45%;      
        right: 50%;
        top: 10%;
        bottom: auto;
        transform: none;
        z-index: 30;
    }
    .external-image-container.position-left {
        left: 50%;
        right: auto;
        top: 10%;
        bottom: auto;
        z-index: 30;
    }

    /* --- 6. オーバーレイテキスト共通 --- */
    .overlay-text {
        padding: 20px;
        width: 90%;
        height: auto;
        max-height: 80vh;
    }
    .overlay-text h1 {
        font-size: 1.8rem;
    }

    /* --- 7. ロゴの調整（スマホのみサイズ指定） --- */
    .logo img {
        width: 100px;  /* スマホの時だけ80px */
        height: auto;
        margin: 0px;
    }

    /* --- 8. C・D・E地点の左右下の装飾画像（スマホのみ小さく） --- */
    .overlay-corner {
        max-width: 300px; /* PCは450px、スマホは120px */
        width: 40%;
    }
    .left-bottom {
        left: 0;
        bottom: 0;
    }
    .right-bottom {
        right: 0;
        bottom: 0;
    }

    /* --- 9. F地点（最初の画面）の調整 --- */
    #content-f {
        padding: 80px 20px;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
    #content-f h1, 
    .intro h1 {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 20px;
    }
    #content-f p,
    .intro p,
    .intro-p {
        font-size: 0.85rem;
        line-height: 1.5;
        text-align: center;
    }

    .item-1 {
        width: 70%;       /* PCは600px */ 
        top: 15%;
        left: 5%;
    }
    .item-2 {
        width: 50%;       /* PCは400px */
        bottom: 15%;
        right: 5%;
    }
}