/* ==========================================================================
   見出し画面エリア (50vh) - 「今日の1枚」額縁デザイン（金色のぼかし・縁取りは削除）
   ========================================================================== */
.visual-header-section {
    box-sizing: border-box;
    height: 50vh;
    padding: 20px 0; /* 上下の見切れ防止のために余白を確保 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: transparent;
}

/* 裏側で確実に表示され、1920pxで等速無限ループする背景レイヤー (不透明度80%の黒マスク) */
.visual-header-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 1920px);
    height: 100%;
    
    /* 黒の不透明度80%（20%透過）レイヤーと1920x1080のbg.jpgを完全にブレンド */
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../img/bg.jpg');
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 100%;
    
    z-index: -1;
    animation: scrollBg 30s linear infinite;
    pointer-events: none;
}

/* 「今日の1枚」メインコンテナ */
.today-photo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* 50vhからpaddingを引いた高さいっぱいに広げる */
    max-width: 950px;
    padding: 0 20px;
    z-index: 2;
}

/* 額縁ラッパー（金色の高級感ある額縁） */
.gold-frame-wrapper {
    position: relative;
    background: #111111;
    padding: 12px; /* 内側のマット枠 */
    border: 8px solid #d4af37; /* いまの2倍の太さ */
    border-image: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%) 1; /* リアルな金属光沢グラデーション */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8); /* 金色の影(光彩)をなくし、通常の影のみに変更 */
    max-width: 100%;
    
    /* Flexboxを使ってコンテナ内で自動縮小できるようにする */
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 auto; /* 拡大はしないが縮小は許可 */
    min-height: 0; /* フレックスアイテムが縮むための魔法のプロパティ */
    min-width: 0;
    transition: transform 0.1s ease;
}

.gold-frame-wrapper:hover {
    transform: scale(1.02);
}

/* スクショ画像本体のサイズ制御（縦幅50vhの中に綺麗に収まるよう調整） */
/* 画像が読み込まれるまでアスペクト比を維持するコンテナ */
.screenshot-aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height / width * 100 = 9 / 16 * 100 = 56.25%) */
    background-color: #000; /* 画像読み込み中の背景色 */
}

.gold-frame-wrapper:hover {
    transform: scale(1.02);
}

.screenshot-display {
    position: absolute; /* 親要素の .screenshot-aspect-ratio-box に合わせて配置 */
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    border: 1px solid #000000;
    object-fit: contain; /* アスペクト比を維持して枠内に収める */
}

/* 動画リンク用ラッパー */
.photo-link-wrapper {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex: 0 0 auto; /* 縮小されてボタンが潰れないように保護 */
}

/* 【完全復元】名言作成時と全く同じ見た目のYouTubeリンクボタン */
.photo-video-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #dddddd;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 900;
    background-color: rgba(0, 0, 0, 0.6); /* 名言時と同じ不透明度 */
    padding: 8px 18px;
    border-radius: 24px;
}

.photo-video-link .play-icon {
    font-size: 0.9rem;
    display: inline-block;
}

/* ==========================================================================
   スクロール時に重なる下部コンテンツエリア
   ========================================================================== */
.scroll-content-wrapper {
    background-color: transparent;
}

/* 「へやりぼとは？」セクション */
.about-section {
    padding: 60px 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #f0f0f0;
}
.about-section .section-container {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}
.about-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    flex-shrink: 0;
}
.about-text-content h3 {
    font-size: 2.0rem;
    color: var(--gray_dark);
    margin-bottom: 15px;
    display: inline-block;
}
.about-text-content p {
    font-size: 1.2rem;
    line-height: 2.0;
    color: #444;
    display: inline;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 0%);
    padding: 0.2em 0.4em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    
    /* wbrタグを機能させるための設定 */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ソーシャルリンクボタン */
.about-social-links {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.0rem;
    color: #ffffff;
}

/* ==========================================================================
   メンバー紹介セクション - 「不透明度80%」の白ベース
   ========================================================================== */
.members-section {
    padding: 80px 40px;
    background-color: rgba(255, 255, 255, 1.0); 
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.members-section h3 {
    font-size: 2.4rem;
    color: var(--gray_dark);
    margin-bottom: 10px;
}
.members-section .section-sub {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 20px;
}

/* 手札再現コンテナ */
.cards-hand-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 310px;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 10px;
}

/* トランプ基本設計 */
.member-trump-card {
    width: 170px;
    height: 250px;
    border-radius: 12px;
    position: absolute;
    bottom: 10px;
    cursor: pointer;
    transform-origin: center bottom;
    transition: transform 0.3s ease, left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
    will-change: transform;
    overflow: hidden;
    display: block;
}
.trump-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    border: 1px solid #eaeaea;
    border-radius: 12px;
}

/* ババ抜き手札配置（PC・広画面用） */
.card-yellow { left: calc(50% - 240px); transform: rotate(-15deg) translateY(15px); z-index: 1; }
.card-blue   { left: calc(50% - 130px); transform: rotate(-5deg)  translateY(2px);  z-index: 2; }
.card-red    { left: calc(50% - 20px);  transform: rotate(5deg)   translateY(2px);  z-index: 3; }
.card-gray   { left: calc(50% + 90px);  transform: rotate(15deg)  translateY(15px); z-index: 4; }

.card-yellow:hover { transform: rotate(0deg) translateY(-40px) scale(1.05); z-index: 10; }
.card-blue:hover   { transform: rotate(0deg) translateY(-40px) scale(1.05); z-index: 10; }
.card-red:hover    { transform: rotate(0deg) translateY(-40px) scale(1.05); z-index: 10; }
.card-gray:hover   { transform: rotate(0deg) translateY(-40px) scale(1.05); z-index: 10; }

/* ==========================================================================
   最新の動画セクション
   ========================================================================== */
.latest-videos-section {
    padding: 80px 0; /* カルーセルを全幅で流すために左右paddingを0に */
    background-color: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    overflow: hidden;
}
.latest-videos-section .section-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}
.latest-videos-section h2 {
    font-size: 2.4rem;
    color: var(--gray_dark);
    margin-bottom: 10px;
}
.latest-videos-section .section-sub {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 40px;
}

/* 動画カルーセル */
.carousel-wrapper {
    margin: 0 auto 40px;
    width: 100%;
}
.carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: auto;
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
    padding: 10px 5px 20px; /* ボックスシャドウが切れないように余白確保 */
    cursor: grab;
    touch-action: pan-y; /* JSで横スワイプを制御するため */
}
.carousel-track::-webkit-scrollbar {
    display: none;
}
.carousel-track.active {
    cursor: grabbing;
}
.carousel-item {
    flex: 0 0 320px; /* 1つの動画の幅 */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none; /* ドラッグ時のテキスト選択防止 */
}
.carousel-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9比率を維持 */
    background-color: #000;
}
.thumbnail-wrapper img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none; /* ドラッグ時に画像が引きずられないようにする */
}
.play-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 3rem;
    opacity: 0.8;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.carousel-item:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}
.video-title {
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--gray_dark);
    text-align: left;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2行で三点リーダーに */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.more-videos .btn-black i {
    margin-right: 8px;
}

/* ==========================================================================
   CTA (Call to Action) セクション
   ========================================================================== */
.cta-section {
    padding: 80px 40px;
    background-color: #f8f9fa;
    text-align: center;
}
.cta-section .section-container {
    max-width: 850px;
    margin: 0 auto;
}
.cta-section h2 {
    font-size: 2.4rem;
    color: var(--gray_dark);
    margin-bottom: 15px;
}
.cta-section p {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 30px;
}

/* ==========================================================================
   レスポンシブ対応（768px以下）
   ========================================================================== */
@media (max-width: 768px) {
    .gold-frame-wrapper {
        padding: 6px;
        border: 6px solid #d4af37; /* スマホ時の2倍の太さ */
        border-image: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) 1;
        max-width: 95vw; /* 横幅の強制指定を解除（はみ出し防止のみに） */
    }
    .screenshot-display {
        max-height: 100%; /* スマホ表示時もFlexboxでの自動調整に任せる */
        width: auto; /* 横幅を強制せず、縦幅ベースでサイズを決める */
    }
    .photo-video-link {
        font-size: 0.95rem;
        padding: 6px 14px;
    }
    
    .about-section {
        padding: 40px 20px;
    }
    .about-section .section-container {
        display: block;
        text-align: center;
    }
    .about-icon {
        display: none;
    }
    .about-social-links {
        justify-content: center;
    }
    
    .members-section {
        padding: 30px 0px;
        background-color: rgba(255, 255, 255, 1.0) !important; 
    }
    
    .cards-hand-container {
        height: 48vw; /* スマホ画面幅に応じた高さを確保 */
        max-height: 280px; /* 広がりすぎ防止 */
        display: block; /* フレックスを解除して絶対配置の基準にする */
    }
    .member-trump-card {
        position: absolute;
        width: 28%; /* コンテナ幅の28%サイズで並べる */
        max-width: none; /* スマホ用の幅制限を解除 */
        height: auto;
        bottom: 0;
        margin: 0 auto;
    }
    
    /* ％指定によるレスポンシブ扇状配置 */
    .card-yellow { left: 12%; transform: rotate(-15deg) translateY(4vw) !important; }
    .card-blue   { left: 28%; transform: rotate(-5deg)  translateY(1vw) !important; }
    .card-red    { left: 44%; transform: rotate(5deg)   translateY(1vw) !important; }
    .card-gray   { left: 60%; transform: rotate(15deg)  translateY(4vw) !important; }
    
    /* スマホ・タブレットでもタップ（ホバー）時に上に引き抜けるように */
    .card-yellow:hover { transform: rotate(0deg) translateY(-20px) scale(1.05) !important; }
    .card-blue:hover   { transform: rotate(0deg) translateY(-20px) scale(1.05) !important; }
    .card-red:hover    { transform: rotate(0deg) translateY(-20px) scale(1.05) !important; }
    .card-gray:hover   { transform: rotate(0deg) translateY(-20px) scale(1.05) !important; }
}