/*
 * File: single-video_content.css
 * Description: カスタム投稿 'video_content' の単一記事ページ専用スタイル
 */

/* ===================================================================
    基本的な要素のスタイル (PC/モバイル共通)
    =================================================================== */

/* メインタイトル (H1) の文字サイズと配置 */
h1 {
    font-size: 25px; 
    text-align: left; 
    margin-bottom: 30px;
    padding: 0 10px; 
    line-height: 1.4;
}

/* セクションタイトル (H2) の統一スタイル */
.section-title,
.video-faq-section h2, /* Q&Aセクションの見出し */
.video-details-section h2,
.related-posts-section h2,
.section-title-actress-profile { /* 女優プロフィール見出しを追加 */
    font-size: 24px;
    border-left: 5px solid #EE2737; /* FANZAカラーの強調線 */
    padding-left: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* ===================================================================
    🍞 パンくずリストのスタイル (PC表示のデフォルトを修正)
    =================================================================== */

.custom-breadcrumb {
    font-size: 13px;
    padding: 10px 0;
}

/* OLタグ（リスト全体）を横並びにする */
.custom-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap; 
    margin: 0;
    padding: 0;
}

/* LIタグ（各要素）のスタイル */
.custom-breadcrumb li {
    display: flex;
    align-items: center;
    max-width: 100%;
}

/* リンクとテキストのスタイル */
.custom-breadcrumb li a,
.custom-breadcrumb li span {
    text-decoration: none;
    color: #666; 
}

/* 最終要素（現在地）のスタイル */
.custom-breadcrumb li:last-child a,
.custom-breadcrumb li:last-child span {
    font-weight: bold;
    color: #333;
}

/* 区切り文字の追加（CSSの疑似要素を使用） */
.custom-breadcrumb li:not(:last-child)::after {
    content: " > ";
    margin: 0 8px;
    color: #999;
}


/* ===================================================================
    動画プレイヤーのサイズ固定とポスター表示スタイル (PC)
    =================================================================== */

/* 動画ラッパー: サイズを固定し、内部要素の基準とする */
.video-player-container {
    margin-bottom: 20px;
    width: 640px; 
    height: 420px; 
    /* 中央揃え */
    margin-left: auto;
    margin-right: auto;
    /* 角丸 */
    border-radius: 8px; 
    overflow: hidden; 
    /* フレームの背景色 */
    background-color: #E9EEF6;
    position: relative; 
}

/* アスペクト比ラッパー: PCではサイズ固定により padding-bottom を上書き */
.video-embed-wrapper {
    position: relative;
    width: 100%;
    height: 100%; 
    padding-bottom: 0 !important;
    max-width: 100%;
    cursor: pointer;
}

/* ポスターレイヤー: フレーム全体を覆い、画像を見切れずに表示する */
.video-poster-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat;
    z-index: 20;
    transition: opacity 0.3s;
    display: block; 
    background-color: #E9EEF6;
    opacity: 1;
    
    background-position: center;
    background-repeat: no-repeat;
}

/* コントロールバーの背景 */
.video-poster-layer::after {
    content: "";
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 50px; 
    z-index: 25;
    
    /* 下から上に向かって透明になるグラデーション */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(0, 0, 0, 0.8) 70%, 
        rgba(0, 0, 0, 0) 100% 
    );
    display: block;
}

/* タイムバー（プログレスバー）のベース */
.video-poster-layer::before {
    content: "";
    position: absolute;
    bottom: 16px; 
    left: 15px; 
    width: calc(100% - 30px);
    height: 4px; 
    background-color: rgba(255, 255, 255, 0.4); 
    z-index: 26; 
    border-radius: 4px; 
}

/* タイムバー（プログレスバー）の現在の位置 */
.video-poster-layer .progress-bar {
    position: absolute;
    bottom: 16px; 
    left: 15px; 
    width: 0%; 
    height: 4px; 
    background-color: #FF0000;
    z-index: 27;
    border-radius: 4px; 
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.7); 
    transition: width 0.1s linear;
}

/* 小さな再生△マーク */
.play-button {
    position: absolute;
    bottom: 28px; 
    left: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #fff;
    opacity: 0.9;
    z-index: 30;
    display: block !important; 
}

.play-button::before {
    display: none !important;
}

/* 時間表示のスタイル */
.time-display {
    position: absolute;
    bottom: 28px; 
    left: 35px; 
    color: #fff;
    font-size: 14px; 
    font-family: sans-serif; 
    opacity: 0.9;
    z-index: 30;
}

/* iframe の設定 */
.video-iframe {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important;
    z-index: 10;
}

/* ===================================================================
    アフィリエイトボタンのスタイル (PC)
    =================================================================== */

/* ボタンコンテナ: 動画プレイヤーと同じ幅で中央揃え */
.affiliate-button-container {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px; 
    text-align: center;
}

/* ボタン本体: 静的なスタイルにする */
.fanza-affiliate-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #EE2737;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px; 
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
}

/* ===================================================================
    作品概要・詳細エリアのスタイル (PC)
    =================================================================== */

.video-short-summary {
    margin: 0 auto 20px auto; 
    line-height: 1.6;
}

/* ★ 作品概要エリア内のリンクスタイル ★ */
.video-short-summary a {
    color: #0073aa;
    text-decoration: none;
    transition: text-decoration 0.2s;
}
.video-short-summary a:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* 作品詳細エリアをプレイヤーと同じ幅で中央揃え */
.video-details-info-block {
    margin: 0 auto 30px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    line-height: 1.8;
    font-size: 15px;
}

/* ★ 作品詳細エリア内のリンクのスタイル ★ */
.video-details-info-block a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s, text-decoration 0.2s;
}
.video-details-info-block a:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* ★ ジャンル情報エリアのリンクスタイル ★ */
.video-genre-info-block {
    margin-bottom: 30px; 
    line-height: 1.6;
    margin: 0 auto 30px auto;
}
.video-genre-info-block a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s, text-decoration 0.2s;
}
.video-genre-info-block a:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* ===================================================================
    サンプル画像エリアの3カラム表示スタイル (PC)
    =================================================================== */

.sample-image-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 30px; 
    justify-content: flex-start; 
    margin-left: auto;
    margin-right: auto;
}

.sample-image-grid a {
    width: calc(33.333% - 6.666px); 
    display: block; 
    border-radius: 4px;
    overflow: hidden;
    background-color: #E9EEF6;
}

.sample-image-grid img {
    width: 100%; 
    height: auto; 
    object-fit: cover;
    display: block;
}


/* ===================================================================
    関連作品グリッドのスタイル (PC)
    =================================================================== */

.related-posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px; 
    margin-bottom: 20px; 
    justify-content: flex-start; 
    margin-left: auto;
    margin-right: auto;
}

.related-post-item {
    width: calc(50% - 5px); 
    text-align: center;
    text-decoration: none;
}

.related-post-item a {
    text-decoration: none;
    display: block;
    color: #333;
    transition: opacity 0.2s;
}

/* 関連作品サムネイルの調整 (アスペクト比 3:2 のラッパー) */
.related-post-thumbnail {
    width: 100%;
    padding-top: 66.66%; 
    height: 0; 
    position: relative; 
    
    display: block;
    border-radius: 4px;
    margin-bottom: 5px;
    overflow: hidden; 
    background-color: #E9EEF6;
}

/* 関連作品の画像そのもの */
.related-post-thumbnail img {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
}

.related-post-title {
    font-size: 14px;
    line-height: 1.4;
    height: 2.8em; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 関連作品一覧へのリンクのラッパー */
.more-link-wrapper {
    text-align: left; 
    margin-bottom: 30px;
    padding-left: 15px; 
}

.more-related-link {
    color: #0073aa;
    text-decoration: none;
    font-size: 15px; 
    transition: color 0.2s, text-decoration 0.2s;
}

.more-related-link:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* ===================================================================
    静止画表示時のカーソル調整
    =================================================================== */

.video-static-poster {
    cursor: default !important;
}

.video-player-container .video-static-poster img {
    cursor: default !important;
}

/* ===================================================================
    「調査中」の文字色を変更するスタイル
    =================================================================== */

.is-under-investigation {
    color: #0073aa; 
    font-weight: normal; 
}


/* ===================================================================
    🌟 FAQセクション（アコーディオン）およびプロフィールアコーディオンのスタイル 🌟
    =================================================================== */

.faq-section {
    margin-bottom: 40px;
}

.faq-item {
    /* アコーディオンアイテムのコンテナ */
    border: none;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
}

/* 質問ヘッダー（クリック要素） - Q&Aとプロフィール共通のベーススタイル */
.faq-question,
.profile-summary { 
    cursor: pointer; 
    /* 💡 質問文の左側にアイコンを置くため、左パディングを調整 */
    padding: 15px 15px 15px 35px; 
    background-color: #fff; 
    margin: 0;
    font-size: 1em; 
    font-weight: normal; 
    position: relative;
    color: #0073aa; 
    transition: background-color 0.0s; /* ホバー時のトランジションを削除 */
    /* ❌ 質問の下線削除 */
    /* border-bottom: 1px solid #ddd; */ 
}

/* ネイティブの <details> 要素を使っている場合、マーカー（▶）を非表示にする */
.profile-summary {
    list-style: none; /* デフォルトのマーカーを非表示 */
}
.profile-summary::-webkit-details-marker { /* Chrome/Safari */
    display: none;
}
.profile-summary::marker { /* Firefox */
    display: none;
}

/* ❌ ホバー時の背景色変更を削除 */
.faq-question:hover,
.profile-summary:hover { 
    /* background-color: #f8f8f8; */
    background-color: #fff; /* 背景色を強制的に白に戻す */
}

/* 展開/折りたたみを示すアイコン（三角アイコン） - ネイティブの<details>に近い左側配置 */
.faq-question::after,
.profile-summary::after { 
    content: ''; 
    position: absolute;
    left: 15px; 
    right: auto;
    top: 50%;
    /* 閉じている時は下向き (0deg) */
    transform: translateY(-50%) rotate(0deg); 
    
    /* 三角アイコンのCSS */
    width: 0;
    height: 0;
    border-style: solid;
    /* 下向きの三角を生成 */
    border-width: 5px 5px 0 5px; 
    border-color: #333 transparent transparent transparent; 
    transition: transform 0.3s;
}

/* 展開されている時のアイコン（上向き三角に回転） */
.faq-question.open::after,
.profile-summary.open::after { 
    content: '';
    /* 上向きの三角に回転 (180deg) */
    transform: translateY(-50%) rotate(180deg); 
}

/* 🚀 回答コンテンツのラッパー (アニメーションの本体) - Q&Aとプロフィール回答を統合 */
.faq-answer,
.profile-content { 
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; 
    padding: 0 15px;
    background-color: #fff;
    /* 枠線を削除 */
    border-top: none; 
}

/* 🚀 回答コンテンツが展開された状態 */
.faq-answer.open,
.profile-content.open { 
    max-height: 500px; 
    padding: 15px; 
}

/* 回答内のパラグラフの調整 */
.faq-answer p,
.profile-content p {
    margin: 0;
    line-height: 1.6;
    font-size: 14px;
}


/* ===================================================================
    メディアクエリ (モバイル対応: 画面幅が767px未満の場合)
    =================================================================== */

@media (max-width: 767px) { 
    
    /* 💡 ★★ 修正点: コンテンツ全体にパディングを適用するラッパー要素 ★★ */
    .content-padding-wrapper {
        padding: 0 15px; 
    }
    
    /* --- タイトル/セクションタイトル --- */
    h1 {
        font-size: 18px; 
        margin-bottom: 20px;
        padding: 0; 
    }
    
    /* 💡 見出し2もH1と同じサイズに統一 */
    .section-title,
    .video-faq-section h2,
    .video-details-section h2,
    .related-posts-section h2,
    .section-title-actress-profile {
        font-size: 18px; 
        padding-left: 10px;
    }
    
    /* 🌟 FAQセクションのモバイル調整 */
    .faq-section {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .faq-item {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }


    /* 🍞 パンくずリスト（横スクロール対応） */
    .custom-breadcrumb {
        overflow-x: auto;      
        -webkit-overflow-scrolling: touch; 
    }

    .custom-breadcrumb ol {
        display: flex;       
        flex-wrap: nowrap;     
        width: max-content;    
    }
    
    .custom-breadcrumb li {
        flex-shrink: 0;      
    }
    
    .custom-breadcrumb li a,
    .custom-breadcrumb li span {
        white-space: nowrap; 
    }
    /* --- プレイヤーコンテナ (変更なし) --- */
    .video-player-container {
        width: 100vw; 
        height: 0 !important;
        padding-bottom: 66.6667%; 
        margin-left: calc(50% - 50vw); 
        margin-right: calc(50% - 50vw);
        border-radius: 0; 
        background-color: transparent;
        overflow: hidden;
    }

    .video-embed-wrapper {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        padding-bottom: 0 !important;
    }
    
    .video-poster-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .video-iframe {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100% !important; 
        height: 100% !important;
        z-index: 10;
    }

    
    /* --- プレイヤー内部のモバイル調整 (変更なし) --- */
    
    .video-poster-layer::after {
        height: 40px; 
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.95) 0%, 
            rgba(0, 0, 0, 0.8) 70%, 
            rgba(0, 0, 0, 0) 100%
        );
        display: block;
    }
    
    .video-poster-layer::before,
    .video-poster-layer .progress-bar {
        bottom: 9px; 
        left: 10px; 
        width: calc(100% - 20px); 
        height: 4px; 
    }
    
    .video-poster-layer .progress-bar {
        background-color: rgba(255, 255, 255, 0.4); 
        box-shadow: none;
    }

    .play-button {
        bottom: 21px; 
        left: 10px;
        border-width: 6px 0 6px 10px;
    }
    .time-display {
        bottom: 21px; 
        left: 30px;
        font-size: 12px; 
    }
    
    /* --- コンテンツエリアの調整 (変更なし) --- */
    
    .affiliate-button-container {
        width: 100%;
        max-width: none;
        padding: 0; 
    }
    .fanza-affiliate-button {
        width: 100%; 
        box-sizing: border-box;
        padding: 12px 0; 
        font-size: 16px; 
    }
    
    .video-short-summary {
        width: 100%; 
        padding: 0; 
    }
    
    .video-details-info-block {
        width: 100%; 
        padding: 20px; 
    }
    
    .video-genre-info-block {
        width: 100%; 
        padding: 0; 
    }

    .sample-image-grid {
        width: 100%; 
        gap: 10px; 
        justify-content: center;
        padding: 0; 
    }
    .sample-image-grid a {
        width: 100%; 
        height: auto;
    }
    
    .related-posts-grid {
        width: 100%; 
        gap: 15px 10px;
        justify-content: center; 
        padding: 0; 
    }
    .related-post-item {
        width: 100%; 
        max-width: none; 
    }

    /* 💡 修正済み: モバイルでの関連作品タイトルは折り返しが有効な状態を維持 */
    .related-post-title {
        font-size: 13px; 
        line-height: 1.4;
        width: 100%;
        box-sizing: border-box;
        word-break: break-all; 
        height: 2.8em; 
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    /* 💡 修正 1 (モバイル): 関連作品一覧へのリンクを左揃えにする */
    .more-link-wrapper {
        text-align: left;
        padding-left: 0;
    }
}