/*
=======================================================================
onsen-responsive.css - レスポンシブ・モバイル対応スタイル
=======================================================================
*/

/* ========================
   スマホ・タブレット対応 (768px以下)
======================== */
@media (max-width: 768px) {
    /* メインコンテナのgrid解除 */
    .main-container {
        display: block !important; /* gridを解除 */
        padding: 10px;
       /* gap: 20px; */
        max-width: 100%;
        margin: 2px 2px; /* スマホは両端少なめ */
    }
    
    /* 全セクションのgrid指定をリセット */
    .hotel-summary,
    .youtube-section,
    .qa-main,
    .sidebar,
    .maps-section,
    .detail-info {
        grid-column: unset !important;
        grid-row: unset !important;
        margin-bottom: 20px;
        width: 100%;
    }


/* responsive.css に追加 */
@media (max-width: 768px) {
    .qa-item {
        display: block;
    margin: 8px 4px; /* より小さい画面用 */
    margin-bottom: 10px;
    border-radius: 15px;
    overflow: hidden;
    border: 6px solid #cd853f;
    background: white;
    }
}

@media (max-width: 480px) {
    .qa-item {
        margin: 8px 12px; /* より小さい画面用 */
    }
}

    
    /* サイドバーを最初に表示 */
    .sidebar {
        order: -1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding:5px 11px 15px 0px;/*サイドバーの余白　微妙*/
    }
    
    /* ヘッダー調整 */
    .header-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 0 15px;
    }
    
    .hotel-title {
        font-size: 1.3rem !important;
        padding: 12px 20px;
        line-height: 1.3;
    }
    
    .user-status {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .badge-display {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
    
    /* ホテルサマリー */
    .hotel-basic-info {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 15px;
    }
    
    .hotel-details h2 {
        font-size: 1.4rem;
    }
    
    .hotel-meta {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    
    .quick-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .quick-link {
        padding: 8px 15px;
        font-size: 0.85rem;
        min-width: auto;
    }
    
    /* YouTube セクション */
    .youtube-section {
        padding: 20px 15px;
    }
    
    .youtube-title {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    .youtube-container {
        margin-bottom: 15px;
        padding-bottom: 65% !important; /* スマホ用に拡大 */
    }
    
    .youtube-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 15px;
    }
    
    .youtube-btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .youtube-stats {
        justify-content: center;
        gap: 10px;
    }
    
    .stat-item {
        padding: 8px 15px;
        font-size: 0.8rem;
    }
    
    /* チャンネル情報 */
    .channel-info-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 15px;
    }
    
    .channel-avatar {
        order: 0;
    }
    
    .channel-details {
        order: 1;
    }
    
    .channel-subscribe {
        order: 2;
        justify-self: center;
    }
    
    /* Q&A メイン */
    .qa-main {
        margin-bottom: 20px;
    }
    
    .qa-header {
        padding: 20px 15px;
    }
    
    .qa-title {
        font-size: 1.3rem;
    }
    
    .qa-subtitle {
        font-size: 0.95rem;
    }
    
    /* 投稿タイプボタン（モバイル対応） */
    .post-type-buttons {
        padding: 20px 15px;
        gap: 12px;
    }
    
    .button-row-1 {
        gap: 12px;
        max-width: 100%;
    }
    
    .button-row-2 {
        max-width: 250px;
    }
    
    .post-type-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
        min-height: 50px;
    }
    
    .btn-icon {
        font-size: 1.3rem;
    }
    
    .btn-text {
        font-size: 0.8rem;
    }
    
    .consultation-special {
        min-height: 55px !important;
        font-size: 0.95rem !important;
    }
    
    .consultation-special .btn-icon {
        font-size: 1.4rem !important;
    }
    
    /* サブカテゴリタブ */
    .sub-category-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px;
        gap: 8px;
    }
    
    .sub-tab {
        padding: 10px 15px;
        font-size: 0.5rem;
        min-width: 70px;
        white-space: pre-line; 
    }
    
    /* カテゴリタブ */
    .category-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    
    .category-tab {
        padding: 15px 18px;
        font-size: 0.85rem;
        white-space: nowrap;
        min-width: auto;
    }
    
    /* 投稿フォーム */
    .post-form {
        padding: 20px 15px;
    }
    
    .suggested-questions h4 {
        font-size: 1.1rem;
    }
    
    .question-suggestion {
        padding: 12px 15px;
        font-size: 0.9rem;
        margin-bottom: 8px;
    }
    
    .form-textarea {
        min-height: 120px;
        padding: 15px;
        font-size: 0.95rem;
    }
    
    .submit-button {
        width: 100%;
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    /* Q&Aリスト */
    .qa-list {
        padding: 15px;
    }
    
    .qa-item {
        margin-bottom: 20px;
    }
    
    .qa-question {
        padding: 15px 20px;
        font-size: 1rem;
    }
    
    .qa-answer {
        padding: 20px;
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .qa-content {
        padding: 20px;
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .qa-meta {
        padding: 15px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .helpful-btn {
        align-self: flex-end;
    }
    
    /* サイドバー */
    .sidebar-card {
        padding: 20px 15px;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
    
    .current-badge {
        font-size: 2.5rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .stat-item-sidebar {
        padding: 15px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    /* Maps セクション */
    .maps-section {
        padding: 20px 15px;
    }
    
    .maps-title {
        font-size: 1.2rem;
    }
    
    .map-embed-container iframe {
        height: 300px !important;
    }
    
    .maps-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .map-btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
    }
    
    .access-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .access-item {
        padding: 12px;
    }
    
    /* 詳細情報 */
    .detail-info {
        padding: 20px 15px;
    }
    
    .detail-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .detail-section {
        padding: 15px;
    }
    
    .section-title {
        font-size: 1.1rem;
    }
}

/* ========================
   スマートフォン対応 (480px以下)
======================== */
@media (max-width: 480px) {
    .main-container {
        padding: 5px;
    }
    
    .header-content {
        padding: 0 10px;
    }
    
    .hotel-title {
        font-size: 1.1rem !important;
        padding: 10px 15px;
    }
    
    .hotel-details h2 {
        font-size: 1.2rem;
    }
    
    .hotel-meta {
        font-size: 0.85rem;
    }
    
    .quick-links {
        flex-direction: column;
        align-items: center;
    }
    
    .quick-link {
        width: 100%;
        max-width: 250px;
        text-align: center;
    }
    
    /* YouTube */
    .youtube-section,
    .qa-main,
    .maps-section,
    .detail-info {
        padding: 15px 10px;
    }
    
    .youtube-title {
        font-size: 1.1rem;
    }
    
    .youtube-container {
        padding-bottom: 70% !important; /* スマホではさらに大きく */
    }
    
    .youtube-btn {
        max-width: 100%;
        font-size: 0.85rem;
    }
    
    /* 投稿タイプボタン（スマホ） */
    .post-type-buttons {
        padding: 15px 10px;
        gap: 10px;
    }
    
    .button-row-1 {
        gap: 10px;
    }
    
    .button-row-2 {
        max-width: 200px;
    }
    
    .post-type-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
        min-height: 45px;
    }
    
    .btn-icon {
        font-size: 1.2rem;
    }
    
    .btn-text {
        font-size: 0.75rem;
    }
    
    .consultation-special {
        min-height: 50px !important;
        font-size: 0.9rem !important;
    }
    
    .consultation-special .btn-icon {
        font-size: 1.3rem !important;
    }
    
    .sub-tab {
        padding: 15px 8px 15px 4px;
        font-size: 0.7rem;
        min-width: 70px;
        min-height: 60px;

    }
    
    /* Q&A */
    .qa-title {
        font-size: 1.2rem;
    }
    
    .qa-subtitle {
        font-size: 0.9rem;
    }
    
    .category-tab {
        padding: 12px 15px;
        font-size: 0.8rem;
    }
    
    .post-form {
        padding: 15px 10px;
    }
    
    .question-suggestion {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .form-textarea {
        min-height: 100px;
        padding: 12px;
    }
    
    .submit-button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* Q&Aアイテム */
    .qa-question {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .qa-answer,
    .qa-content {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    .qa-meta {
        padding: 12px 15px;
        font-size: 0.8rem;
    }
    
    /* サイドバー */
    .sidebar-card {
        padding: 15px 10px;
    }
    
    .current-badge {
        font-size: 2rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* Maps */
    .map-embed-container iframe {
        height: 250px !important;
    }
    
    .map-btn {
        max-width: 100%;
        padding: 10px 15px;
        font-size: 0.85rem;
    }
}

/* ========================
   極小スマートフォン対応 (360px以下)
======================== */
@media (max-width: 360px) {
    .hotel-title {
        font-size: 1rem !important;
        padding: 8px 12px;
    }
    
    .hotel-details h2 {
        font-size: 1.1rem;
    }
    
    .youtube-title,
    .qa-title,
    .maps-title {
        font-size: 1rem;
    }
    
    .youtube-container {
        padding-bottom: 75% !important; /* 極小画面では75%でさらに大きく */
        border-radius: 6px;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .category-tab {
        padding: 10px 12px;
        font-size: 0.75rem;
    }
    
    .current-badge {
        font-size: 1.8rem;
    }
}

/* ========================
   横向き表示の調整
======================== */
@media (max-width: 768px) and (orientation: landscape) {
    .youtube-container {
        padding-bottom: 55% !important; /* 横向きでは55%で抑える */
    }
    
    .map-embed-container iframe {
        height: 250px !important;
    }
}

/* ========================
   iOS Safari 対応
======================== */
@supports (-webkit-touch-callout: none) {
    .category-tabs,
    .sub-category-tabs {
        -webkit-overflow-scrolling: touch;
    }
    
    .form-textarea {
        -webkit-appearance: none;
        border-radius: 12px;
    }
}

/* ========================
   レスポンシブ対応（元のレスポンシブコード）
   これが重複している。
======================== 
@media (max-width: 768px) {
    .main-container {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 20px;
        margin: 2px 2px; /* スマホは両端少なめ 
    }*/
    
    .hotel-basic-info {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .user-status {
        flex-direction: column;
        gap: 10px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .sidebar {
        order: -1;
    }
    
    .hotel-title {
        font-size: 1.4em;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
    }
    
    .maps-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .map-btn {
        width: 100%;
        max-width: 280px;
    }
    
    .access-grid {
        grid-template-columns: 1fr;
    }
    
    .map-embed-container iframe {
        height: 300px;
    }
}