/* ==========================================================================
   全ページ共通 レスポンシブ対応（768px以下）
   ========================================================================== */
@media (max-width: 768px) {

    /* 全体の文字サイズ調整 (remの基準値を小さくする) */
    html {
        font-size: 14px;
    }

    /* 各種見出しのサイズをスマホ向けに調整 */
    .about-text-content h3,
    .members-section h3,
    .latest-videos-section h2,
    .cta-section h2 {
        font-size: 1.8rem;
    }
    .page-title-header h1 {
        font-size: 2.2rem;
    }

    /* ----- index.html 向け ----- */
    .gold-frame-wrapper {
        padding: 6px;
        border: 6px solid #d4af37; /* スマホ時の2倍の太さ */
        max-width: 95vw; /* 横幅の強制指定を解除（はみ出し防止のみに） */
    }
    .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 {
        width: 28%; /* コンテナ幅の28%サイズで並べる */
        max-width: none; /* スマホ用の幅制限を解除 */
        height: auto;
        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; }

    /* 最新の動画セクション向け */
    .latest-videos-section {
        padding: 50px 0;
    }
    .latest-videos-section .section-container {
        padding: 0 20px;
    }
    .carousel-item {
        flex: 0 0 260px; /* スマホでは少し小さくする */
    }

    /* ----- member.html 向け ----- */
    .member-profile,
    .member-profile:nth-child(even) {
        flex-direction: column;
        text-align: center;
        padding: 50px 20px;
        gap: 30px;
    }
    .member-image-wrapper {
        flex-basis: auto;
        width: 45%;
    }
    .member-name {
        font-size: 1.8rem;
    }
    .member-social-links {
        justify-content: center;
    }

    /* ----- contact.html 向け ----- */
    .contact-container {
        padding: 30px 20px;
    }
    .contact-lead {
        font-size: 1rem;
    }
}