/* =========================================
   1. 基本設定（全ページ共通・中央揃え）
   ========================================= */
body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 30px; /* 基本設定を維持 */
    background-color: black;
    color: #ffffff;
    padding: 0;
    margin: 0 100px; /* デスクトップ時の左右余白 */
    line-height: 1.6;
    text-align: center; /* テキストを中央揃えに設定 */
}

/* テキスト要素の基本色 */
section, p, li {
    color: white;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

/* =========================================
   2. ヘッダー & ナビゲーション（機能維持）
   ========================================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    padding: 20px 0;
}

.logo h1 {
    font-size: 30px;
    color: #00aaff;
    margin: 0;
    letter-spacing: 0.05em;
}

/* デスクトップ用ナビゲーション */
.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.nav-list li a {
    color: white;
    padding: 10px 20px;
    font-size: 18px;
}

.nav-list li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

/* ハンバーガーメニュー設定 */
.menu-toggle {
    display: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1000;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #00aaff;
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* =========================================
   3. 統一されたセクション構造（中央揃え・デザイン）
   ========================================= */

section {
    border-top: 1px solid #333;
    padding: 60px 0;
    margin: 0 auto;
    background-color: transparent;
    max-width: 1000px; /* 線が広がりすぎないよう中央に寄せる */
}

/* セクションタイトル（中央揃え） */
.section-title, h2, .section-title-label {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    display: block;
    color: #00aaff;
    letter-spacing: 0.2em;
    text-align: center;
}

/* 巨大なタイポグラフィ（中央揃え） */
.profile-name h3 {
    font-size: clamp(50px, 10vw, 120px);
    font-weight: bold;
    line-height: 0.9;
    margin: 60px 0;
    letter-spacing: -0.02em;
    text-align: center;
}

/* =========================================
   4. グリッド & 動画（中央揃え・サイズ維持）
   ========================================= */

/* YouTubeサムネイル等のコンテナを中央寄せに */
.video-content, .portfolio-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.video-thumbnail {
    width: 100%;
    max-width: 700px; /* 中央で見やすい最大幅 */
    height: auto;
    border-radius: 10px;
    transition: 0.3s;
}

/* A. 縦型動画（Shorts） */
.shorts-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center; /* グリッド全体を中央へ */
}

.shorts-item {
    width: 280px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 12px;
    background: black;
}

.shorts-item img, .shorts-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Photography 4:5 グリッド修正 --- */
.custom-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px 0;
    justify-content: center;
}

.custom-image-grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    /* pointer-events: none; を削除（表示トラブルの原因） */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.custom-image-grid img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}



/* C. YouTubeビデオグリッド */
.custom-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
}

.custom-video-grid iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
}
/* =========================================
   B-2. 新規追加：3列固定画像グリッド（2:3比率）
   ========================================= */
.custom-image-grid-3col {
    display: grid;
    /* PCでは横に3つ固定 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
    padding: 20px 0;
    margin: 0 auto;
    max-width: 1000px;
    
    /* 選択・ハイライト防止 */
    user-select: none;
    -webkit-user-select: none;
}

/* --- Coordinator 2:3 グリッド修正 --- */
.custom-image-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px 0;
    margin: 0 auto;
    max-width: 1000px;
}

.custom-image-grid-3col img {
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- スマホ用レスポンシブ設定（ここが重要） --- */
@media (max-width: 768px) {
    body {
        padding: 0 15px; /* 全体の余白を調整 */
    }

    .custom-image-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2列強制 */
        gap: 10px;
        display: grid !important; /* 非表示防止 */
    }

    .custom-image-grid-3col {
        grid-template-columns: repeat(2, 1fr) !important; /* コーディネーターも2列 */
        gap: 10px;
        display: grid !important;
    }

    .custom-image-grid img, 
    .custom-image-grid-3col img {
        opacity: 1 !important; /* アニメーションが失敗しても強制表示 */
        transform: none !important; /* 位置ズレ防止 */
        visibility: visible !important;
    }
}
/* フェードインアニメーションの予備設定 */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* =========================================
   5. スキルタグ & アニメーション（中央寄せ）
   ========================================= */
.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* スキルタグも中央寄せ */
}

.skills span {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #00aaff;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 20px;
}

/* =========================================
   6. ポップアップ（モーダル機能）
   ========================================= */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-container {
    display: flex;
    background: #111;
    width: 90%;
    max-width: 1100px;
    height: 80vh;
    border-radius: 15px;
    overflow: hidden;
}

.modal-info {
    width: 350px;
    padding: 40px;
    border-left: 1px solid #333;
    background: #050505;
    overflow-y: auto;
    text-align: left; /* モーダル内の文字は読みやすさのため左寄せ */
}

/* =========================================
   バナーセクション：グリッドレイアウト
   ========================================= */
/* =========================================
   バナーセクション：表示されない問題を解決する最小コード
   ========================================= */

/* 他の section 設定に負けないように幅を強制指定 */
.banner-section {
    padding: 60px 0 !important;
    max-width: 100% !important; /* 幅を 1000px に制限させない */
    margin: 0 auto !important;
    display: block !important; /* 万が一 display: none が効いていれば解除 */
}

/* グリッドコンテナ */
.banner-grid {
    display: grid !important;
    /* 1列あたり最小300px。入りきらない場合は自動で下に回る */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* 各バナーアイテム */
.banner-item {
    height: 220px !important;       /* 高さを 220px 固定 */
    border-radius: 12px !important; /* 角丸 12px */
    overflow: hidden !important;
    background: #111 !important;    /* 画像がない時も枠が見えるように */
    position: relative !important;
}

/* 画像の設定 */
.banner-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* 比率を保って枠を埋める */
    display: block !important;
}

/* スマホ用設定 */
@media (max-width: 768px) {
    .banner-grid {
        grid-template-columns: 1fr !important; /* スマホでは 1 列 */
    }
    .banner-item {
        height: 180px !important; /* スマホでは少し低く */
    }
}
    /* =========================================
       AIページ共通スタイル（スマホ動画サイズ最適化版）
       ========================================= */
    .slider-wrapper {
        position: relative;
        width: 100%;
        margin: 0 auto;
        max-width: 1200px;
    }

    .scroll-grid {
        display: flex !important;
        align-items: flex-start !important;
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden !important; 
        touch-action: pan-x;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        user-select: none;
        -webkit-user-select: none;
    }

    .scroll-grid::-webkit-scrollbar { display: none; }

    /* --- PC版設定（変更なし） --- */
    .gallery-item {
        flex: 0 0 auto;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: #000;
        height: 533px !important; 
    }

    .image-size { aspect-ratio: 4 / 5 !important; width: auto !important; }
    .video-size { aspect-ratio: 9 / 16 !important; width: auto !important; }
    
    .gallery-item:has(video) {
        aspect-ratio: auto !important;
        width: auto !important;
    }

    .gallery-item img, .gallery-item video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover; 
        display: block;
        transition: transform 0.6s;
        border-radius: 12px;
    }

    .gallery-item video { object-fit: contain !important; }

    /* --- 【修正】スマホ版：動画がデカすぎないように幅を再調整 --- */
    @media (max-width: 768px) {
        .scroll-grid { gap: 15px; padding-left: 10px; }

        .gallery-item {
            height: auto !important; 
            border-radius: 12px !important;
            background-repeat: no-repeat !important;
        }

        /* 4:5 画像：画面幅の75%（スマホで見やすい標準サイズ） */
        .image-size {
            width: 75vw !important; 
            aspect-ratio: 4 / 5 !important;
        }

        /* 9:16 動画：縦に長くなりすぎないよう、横幅を45%まで絞る（これで画面内に収まります） */
        .video-size {
            width: 45vw !important; 
            aspect-ratio: 9 / 16 !important;
        }

        .gallery-item img, .gallery-item video {
            height: 100% !important;
            width: 100% !important;
            object-fit: cover !important;
            border-radius: 12px !important;
        }

        .nav-btn { display: none; }
    }

    /* --- プロンプト表示設定（維持） --- */
    .prompt-overlay {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 80%, transparent 100%);
        color: #eee;
        padding: 40px 15px 15px;
        font-size: 11px;
        line-height: 1.5;
        transform: translateY(100%);
        transition: transform 0.4s ease-out;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-height: 80%;
        overflow-y: auto;
        white-space: pre-wrap !important; 
        word-wrap: break-word;
    }

    .gallery-item:hover .prompt-overlay { transform: translateY(0); }

    .prompt-tag {
        color: #00aaff;
        font-weight: bold;
        font-size: 10px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(0, 170, 255, 0.3);
        padding-bottom: 2px;
        display: block !important;
        width: fit-content !important; 
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* ボタン・ホバー（維持） */
    .gallery-item:hover img { transform: scale(1.05); }
    .nav-btn {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 44px; height: 44px; background: rgba(0,170,255,0.2);
        backdrop-filter: blur(5px); border: 1px solid rgba(0,170,255,0.3);
        color: white; border-radius: 50%; cursor: pointer; z-index: 10;
        display: flex; align-items: center; justify-content: center;
    }
    .prev-btn { left: -60px; }
    .next-btn { right: -60px; }
    @media (max-width: 1350px) { .prev-btn { left: 10px; } .next-btn { right: 10px; } }

/* =========================================
   8. レスポンシブ（スマホ対応：機能維持）
   ========================================= */
@media (max-width: 1024px) {
    body {
        margin: 0 40px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 20px;
        margin: 0;
        padding: 20px;
    }

    p { font-size: 18px; }

    .hamburger {
        display: flex;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.98);
        justify-content: center;
        align-items: center;
        z-index: 900;
    }

    .menu-toggle:checked ~ .nav-list {
        display: flex;
    }

    .menu-toggle:checked + .hamburger .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .menu-toggle:checked + .hamburger .bar:nth-child(2) { opacity: 0; }
    .menu-toggle:checked + .hamburger .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .nav-list li a {
        font-size: 30px;
    }

.custom-image-grid {
        /* 横に2枚並べる設定は維持 */
        grid-template-columns: repeat(2, 1fr);
        gap: 8px; /* 隙間を少し調整 */
        padding: 10px;
    }

    .custom-image-grid img {
        /* ▼▼▼ 固定の高さを消して比率を指定 ▼▼▼ */
        width: 100%;
        height: auto; 
        aspect-ratio: 4 / 5; 
        /* ▲▲▲ ここまで ▲▲▲ */

        object-fit: cover;
        
        /* スマホでの長押し選択（青いハイライト）を防止 */
        -webkit-touch-callout: none; /* 長押しメニュー防止 */
        user-select: none;
        -webkit-user-select: none;
        pointer-events: none; 
    }

    .custom-video-grid {
        grid-template-columns: 1fr;
    }

    .profile-name h3 {
        font-size: 45px;
        margin: 40px 0;
    }

    .modal-container {
        flex-direction: column;
        height: 90vh;
    }
    .modal-info {
        width: auto;
        border-left: none;
        border-top: 1px solid #333;
    }
}

/* =========================================
   9. フェードインアニメーション用の設定
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}