@charset "UTF-8";

/* ====================================
   Tablet & Mobile Common (Max 768px)
   タブレット・スマホ共通（768px以下）
   ==================================== */
@media screen and (max-width: 768px) {
    
    /* --- Navigation --- */
    .pc-nav { 
        display: none; /* PCメニューを消す */
    }
    .hamburger { 
        display: block; /* ハンバーガーメニューを出す */
    }
    
    /* --- Logo Adjustment --- */
    .header-inner {
        padding: 0 15px;
    }
    .logo-main { 
        font-size: 1.4rem; 
    }
    .logo-sub { 
        font-size: 0.7rem; 
    }
    
    /* --- Hero Area --- */
    #hero { 
        height: 500px; /* 高さを少し低く */
        margin-top: 70px; /* ヘッダーの高さ微調整 */
    }
    .hero-text h2 { 
        font-size: 1.8rem; /* 文字サイズを小さく */
    }
    
    /* --- Section Titles --- */
    .section-title h2 { 
        font-size: 1.6rem; 
    }
    
    /* --- Features (Grid) --- */
    .features-grid {
        grid-template-columns: 1fr 1fr; /* 2列にする */
    }

    /* --- Access (Map) --- */
    .map-wrap iframe {
        height: 300px; /* 地図の高さを調整 */
    }

    /* --- Instructor Page (Profile) --- */
    /* 写真と文字を縦並びにする */
    .profile-wrap {
        flex-direction: column;
    }
    
    .profile-img {
        max-width: 100%;
        margin-bottom: 30px;
    }
    
    /* 経歴リストを縦並びにする */
    .biography-list dt { 
        width: 100%; 
        margin-bottom: 5px; 
        border-bottom: none;
    }
    .biography-list dd { 
        width: 100%; 
        padding-left: 0; 
        margin-bottom: 15px; 
        border-bottom: 1px dotted #ddd;
        padding-bottom: 10px;
    }
}

/* ====================================
   Smartphone Only (Max 480px)
   スマホ専用（480px以下）
   ==================================== */
@media screen and (max-width: 480px) {
    
    /* --- Layout --- */
    .container {
        padding: 0 15px;
    }
    
    /* --- Header --- */
    .header-inner { 
        padding: 0 15px; 
    }
    
    /* --- Features --- */
    .features-grid {
        grid-template-columns: 1fr; /* 1列にする */
    }
    
    /* --- News --- */
    .news-item { 
        display: block; /* 日付とタイトルを改行させる */
    }
    .news-date { 
        margin-bottom: 5px; 
        display: block; 
    }
    
    /* --- Footer --- */
    .footer-nav { 
        flex-direction: column; /* 縦並び */
        gap: 15px; 
    }
    
    /* --- Buttons --- */
    .btn {
        width: 100%; /* ボタンを画面幅いっぱいに */
        padding: 15px 0;
        box-sizing: border-box;
    }
}

/* --- FAQ Page (よくある質問) --- */
    .faq-top-image img {
        height: 200px; /* スマホでは画像の高さを抑える */
    }
    
    .category-title {
        font-size: 1.4rem; /* 見出しを少し小さく */
    }
    
    .faq-question {
        font-size: 1rem; /* 文字サイズ調整 */
        padding: 15px 40px 15px 15px; /* 右側の余白を確保（アイコンと文字が重ならないように） */
    }

    /* --- Contact Page (お問い合わせ) --- */
    .form-container {
        padding: 20px; /* 余白を狭く */
    }

    .contact-notice {
        padding: 15px;
    }

    /* ラジオボタンを縦並びにする（指で押しやすく） */
    .radio-group {
        flex-direction: column;
        gap: 15px;
    }

    .btn-submit {
        width: 100%; /* ボタンを横幅いっぱいに */
    }
    /* ====================================
   Lesson Page Mobile Adjustment
   レッスンページ用スマホ調整
   ==================================== */
@media screen and (max-width: 768px) {

    /* --- Flow List (Timeline) --- */
    .flow-item {
        flex-direction: column; /* 縦並びにする */
    }

    .flow-time, 
    .flow-content {
        flex-basis: auto;
        margin-bottom: 8px;
    }

    .flow-content {
        font-size: 1.1rem;
        border-left: 3px solid var(--accent-color);
        padding-left: 10px;
    }

    /* --- Online Box --- */
    .online-box {
        padding: 25px; /* パディングを少し減らす */
    }

    .online-sub-title {
        font-size: 1.1rem;
    }

    /* --- Genre List --- */
    .genre-item {
        font-size: 0.85rem;
        padding: 8px 15px;
    }
}

/* --- FAQ Link Area Adjustment --- */
@media screen and (max-width: 768px) {
    .faq-link-wrap {
        padding: 30px 20px;
    }
    
    .faq-link-text {
        font-size: 0.95rem;
        text-align: left; /* スマホでは左寄せの方が読みやすい場合が多い */
    }

    .btn-faq-link {
        width: 100%; /* ボタンを幅いっぱいに */
        box-sizing: border-box;
        text-align: center;
    }
}

/* ====================================
   Performance Page Mobile Adjustment
   公演ページ用スマホ調整
   ==================================== */
@media screen and (max-width: 768px) {

    /* テーブルを縦積みにする */
    .info-table th, 
    .info-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .info-table th {
        background: none;
        padding-bottom: 5px;
        border-bottom: none;
        color: var(--accent-color);
    }
    .info-table td {
        padding-top: 0;
        margin-bottom: 15px;
        border-bottom: 1px dashed #eee;
    }

    /* ニュースリストを縦積みにする */
    .news-item-row {
        flex-direction: column;
    }
    .news-date-label {
        margin-bottom: 8px;
    }

    /* チケットエリアの余白調整 */
    .ticket-area {
        padding: 25px 15px;
    }
    
    .section-sub-title {
        font-size: 1.3rem;
    }
}