/* プロジェクト詳細ページ用スタイル */

/* ヒーローセクション */
.project-hero {
    padding: 150px 10% 60px;
    text-align: left; /* 中央寄せから左寄せに変更 */
    position: relative;
}

.project-title {
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 15px;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: #999;
    margin-bottom: 30px;
    justify-content: flex-start; /* 中央寄せから左寄せに変更 */
}

/* プロジェクト情報セクション */
.project-info {
    padding: 0 10%;
    margin-bottom: 40px;
    padding-bottom: 0;
}

/* 新しい4段構成レイアウト */
.project-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 1段目: 2つ目のプロジェクトタイトル */
.secondary-title-section {
    width: 100%;
    margin-bottom: 40px;
}

.secondary-title {
    font-size: 32px;
    font-weight: normal;
    margin-bottom: 15px;
}

/* 2段目: 動画プレイヤーとサイドギャラリー */
.media-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
}

/* 左側：動画プレイヤー */
.video-column {
    width: 100%;
}

/* 右側：サイドギャラリー */
.side-gallery-column {
    width: 97%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 動画コンテナ - project02以降用に維持 */
.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 アスペクト比 */
    overflow: hidden;
    background-color: #111;
    margin-bottom: 0;
}

/* プレースホルダー - project02以降用に維持 */
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #111;
    color: #fff;
}

/* サムネイル関連スタイル - project01用 */
.thumbnail-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s; /* ホバー時の暗くなるエフェクト用 */
}

.thumbnail-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.thumbnail-link:hover .thumbnail-img {
    filter: brightness(0.7); /* ホバー時に少し暗くする */
}

/* YouTube、動画プレイヤーの埋め込み - project02以降用に維持 */
.video-container iframe,
.video-container .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 動画サムネイル用スタイル (旧クラス名との互換性のため) */
.video-img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s; /* ホバー時の暗くなるエフェクト用 */
}

.video-link:hover .video-img {
    filter: brightness(0.7); /* ホバー時に少し暗くする */
}

/* サイドギャラリーアイテム */
.side-gallery-item {
    position: relative;
    overflow: hidden;
    height: calc(50% - 10px); /* 2つのアイテムが動画の高さに合うように */
}

.side-gallery-img-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 アスペクト比 */
    overflow: hidden;
    background-color: #111;
}

.side-gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3段目: 説明テキスト */
.description-section {
    width: 100%;
    margin-bottom: 40px;
}

.project-description {
    line-height: 2;
    width: 100%;
}

.project-description p {
    margin-bottom: 30px;
}

/* 4段目: プロジェクト詳細情報 */
.details-section {
    width: 100%;
    margin-bottom: 40px;
}

.project-detail-list {
    margin-bottom: 40px;
}

.detail-item {
    margin-bottom: 20px;
}

.detail-label {
    font-size: 14px;
    color: #999;
    margin-bottom: 5px;
}

.detail-value {
    font-size: 16px;
}

/* 補助ギャラリーセクション (必要に応じて) */
.gallery-wrapper {
    width: 100%;
    padding: 0;
    margin-bottom: 80px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 0;
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-img-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 アスペクト比 */
    overflow: hidden;
    background-color: #111;
}

.gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* レスポンシブスタイル */
@media (max-width: 768px) {
    .project-hero {
        padding: 120px 5% 40px;
    }
    
    .project-title, .secondary-title {
        font-size: 28px;
    }
    
    .project-info {
        padding: 0 5%;
    }
    
    .media-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .side-gallery-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        justify-content: center;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .side-gallery-item {
        height: auto;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-wrapper {
        padding: 0;
    }
}