@charset "UTF-8";
/*
Theme Name: Sky Portal Theme
Author: Kimiharu Shimada
Description: 大空にカテゴリとファイルがランダムに湧き出る、全画面ポータルテーマ。
Version: 1.0.0
*/

/* ==========================================================================
   空の世界観・ベーススタイル (全画面固定)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    color: #5a6f8a;
    overflow: hidden; 
    background: linear-gradient(180deg, #b3e5fc 0%, #e1f5fe 50%, #ffffff 100%);
}

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

.cloud-particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(50px);
    animation: floatSky 25s infinite ease-in-out;
}

.p1 { width: 500px; height: 250px; top: 5%; left: -5%; }
.p2 { width: 400px; height: 200px; bottom: 10%; right: -5%; animation-delay: -5s; }
.p3 { width: 300px; height: 150px; top: 40%; left: 60%; animation-delay: -10s; }

@keyframes floatSky {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-30px) translateX(40px); }
}

.park-gate {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    height: 100%; 
    margin: 0 auto;
    padding: 40px 20px 0 20px;
    display: flex;
    flex-direction: column;
}

.intro-text {
    text-align: center;
    margin-bottom: 20px;
    pointer-events: none;
    user-select: none;
}

.park-title {
    font-size: 2.2rem;
    color: #fff;
    text-shadow: 0 4px 12px rgba(92, 133, 214, 0.2);
    letter-spacing: 0.15em;
    margin: 0 0 10px 0;
}

.park-desc {
    font-size: 1rem;
    color: #768fae;
    opacity: 0.8;
    margin: 0;
}

/* ==========================================================================
   広大な空のキャンバスとグループ配置 (PC用：自然なランダム浮遊配置)
   ========================================================================== */
.sky-field {
    position: relative;
    width: 100%;
    flex-grow: 1; 
}

.category-group {
    position: absolute;
    display: block; /* 高さと幅の縛りを外し、中身に合わせる柔軟な構造に */
}

.group-pos-1 { top: 5%;   left: 4%; }
.group-pos-2 { top: 55%;  left: 15%; }
.group-pos-3 { top: 20%;  left: 42%; }
.group-pos-4 { top: 62%;  left: 68%; }
.group-pos-5 { top: 8%;   left: 76%; }

/* ==========================================================================
   ① 親：カテゴリの雲スタイル（文字数に合わせて自動拡張）
   ========================================================================== */
.category-cloud {
    display: inline-block !important; /* 横一列に広がる形へ変更 */
    width: max-content !important;   /* 文字幅ぴったりに自動拡張 */
    min-width: 220px;                /* 形が小さくなりすぎない保証幅 */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 22px 30px !important;  /* 左右の文字入れ用余白をたっぷり確保 */
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    box-shadow: 0 8px 24px rgba(142, 178, 222, 0.05);
    white-space: nowrap !important; /* 💡 親のカテゴリ雲も絶対に改行させない */
    
    opacity: 0;
    filter: blur(15px);
    transform: scale(0.85);
    
    transition: 
        opacity 2s cubic-bezier(0.25, 1, 0.5, 1),
        filter 2s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.8s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.4s ease,
        border-color 0.4s ease;
}

.category-cloud.reveal {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

.category-cloud.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: #90caf9;
    box-shadow: 0 15px 40px rgba(92, 133, 214, 0.2);
    transform: scale(1.03);
}

.cloud-tag {
    display: block !important;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #90caf9;
    margin-bottom: 2px;
    white-space: nowrap !important;
}

.category-name {
    display: inline-block !important; /* ブロック化を解除 */
    margin: 0;
    font-size: 1.15rem;
    font-weight: bold;
    color: #37474f;
    letter-spacing: 0.02em;
    white-space: nowrap !important; /* 💡 1行固定 */
}

/* ==========================================================================
   ② 子：ファイルの雲スタイル（【重要】200px制限を完全排除）
   ========================================================================== */
.file-cluster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* 💡 ファイルの雲：200px固定を捨てて文字に合わせて自動で広がるように大修正！ */
.file-cloud {
    position: absolute;
    top: 45px;
    left: 110px;
    display: inline-block !important; /* 横長の1枚のインラインブロックにする */
    text-decoration: none;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(144, 202, 249, 0.3);
    border-radius: 24px;
    padding: 15px 24px !important;    /* 左右に心地よい文字入れスペースを確保 */
    width: max-content !important;   /* 💡 200px固定を廃止！文字数に応じて全自動拡張 */
    min-width: 160px;
    box-shadow: 0 10px 25px rgba(92, 133, 214, 0.06);
    text-align: center;
    color: inherit;
    white-space: nowrap !important;  /* 💡 タイトルがどれだけ長くても絶対に1行を維持！ */
    
    opacity: 0;
    filter: blur(10px);
    
    /* JavaScriptで湧き出る位置計算（transform）の基準点をリフレッシュ */
    margin-left: -100px; 
    margin-top: -24px;  
    
    transition: 
        opacity 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
        filter 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
        transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.category-group.expanded .file-cluster {
    pointer-events: auto;
    z-index: 20;
}

.file-no {
    display: block !important;
    font-size: 0.6rem;
    font-weight: bold;
    color: #b0bec5;
    margin-bottom: 2px;
    white-space: nowrap !important;
}

/* 💡 診断ツールのタイトル（ここが改行していた大元の原因） */
.file-name {
    display: inline-block !important; /* 強制的に横並び化 */
    margin: 0;
    font-size: 0.85rem;
    font-weight: bold;
    color: #455a64;
    line-height: 1.3;
    white-space: nowrap !important;  /* 💡 1文字たりとも下に落とさない絶対ガード */
}

/* --- ホバー効果（PCでの操作性をさらに気持ちよく向上） --- */
@media (hover: hover) {
    .file-cloud:hover {
        border-color: #90caf9;
        box-shadow: 0 15px 35px rgba(92, 133, 214, 0.15);
        transform: scale(1.04);
    }
}

/* ==========================================================================
   ③ コピーライト表示
   ========================================================================== */
.sky-footer {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    pointer-events: none; 
}

.copyright {
    margin: 0;
    font-size: 0.75rem;
    color: #8da1b9; 
    opacity: 0.7;
    letter-spacing: 0.05em;
    user-select: none;
}

/* ==========================================================================
   レスポンシブ (スマホ表示時のみ画面幅からはみ出さないよう優しく折り返し)
   ========================================================================== */
@media (max-width: 900px) {
    body {
        overflow-y: auto; 
        height: auto;
    }

    .park-gate {
        height: auto;
        padding-bottom: 80px;
    }

    .sky-field {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 410px; 
        padding-top: 20px;
    }
    
    .category-group {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 260px;
    }

    .category-cloud {
        opacity: 1 !important;
        filter: blur(0px) !important;
        transform: scale(1) !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important; /* スマホのみ画面を突き抜けないように折り返し */
    }

    .file-cloud {
        left: 50% !important;
        top: 45px !important;
        width: 240px !important; /* スマホ時はスッキリ縦に並べるための専用幅 */
        margin-left: -120px !important;
        white-space: normal !important; /* スマホのみ優しく折り返し */
    }
    
    .category-name, .file-name {
        width: auto !important;
        white-space: normal !important;
    }

    .sky-footer {
        position: relative;
        bottom: 0;
        margin-top: 60px;
        padding-bottom: 20px;
    }
}