/* レスポンシブデザイン関連のスタイル */
@media (max-width: 480px) {
    .hero-title {
        flex-direction: column;
}

/* ボトムナビゲーションのデフォルト非表示 */
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* モバイル表示時にボトムナビゲーションを表示 */
    .bottom-nav {
        display: flex;
    }
}

    .hero-title-part {
        margin: 0.3rem 0;
    }

    .result-modal-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .result-modal-icon svg {
        width: 30px;
        height: 30px;
    }

    .result-modal-message {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .result-modal-close {
        font-size: 0.85rem;
        padding: 7px 14px;
    }

}

@media (max-width: 600px) {
    .news-container {
        width: 95%;
        margin: 0 10px;
    }

    .blog-detail-section,
    .news-detail-section {
        padding: 10px;
    }

    .blog-detail-container,
    .news-detail-container {
        padding: 20px;
        margin: 0;
        width: 100%;
        border-radius: 8px;
        background-color: white; /* 追加 */
    }

    .blog-detail-title,
    .news-detail-title {
        font-size: 1.5rem;
    }

    .blog-detail-content,
    .news-detail-content {
        padding: 15px;
    }

    .blog-detail-content p,
    .news-detail-content p {
        font-size: 0.95rem;
    }

    .feature-grid {
        grid-template-columns: 1fr; /* スマホでは1列表示 */
    }
    .blog-container {
        width: 100%; /* スマホで幅いっぱいに */
        margin: 0; /* マージンを削除 */
    }
    .blog-header {
        justify-content: flex-start; /* ハンバーガーメニューを左端に配置 */
        padding: 10px; /* 余白を追加 */
    }
    .category-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 10px;
    }

    .category-tab {
        font-size: 0.8rem;
        padding: 5px 10px;
        margin: 5px;
    }
}

@media (max-width: 768px) {
    .news-detail-back-btn {
        width: 80%;
        text-align: center;
    }
    .blog-container {
        width: 100%; /* スマホで幅いっぱいに */
        margin: 0; /* マージンを削除 */
    }
    .blog-detail-container {
        width: 100%;
        max-width: 100%; /* max-widthも100%にする */
        box-sizing: border-box;
    }
    .blog-header {
        justify-content: flex-start; /* ハンバーガーメニューを左端に配置 */
        padding: 10px; /* 余白を追加 */
    }
  .nav-desktop .accordion-content {
    left: 0; /* 左端に配置 */
    top:20%;
    transform: translateX(0); /* 中央揃えを解除 */
    width: 100%; /* 幅を100%に */
  }
    .accordion-content-mobile {
        position: static; /* デフォルトのpositionに戻す */
        top:30%;
        left: 30%;
        width: 100%; /* 幅を100%にする */
        box-shadow: none; /* 影を消す */
    }
}

@media (min-width: 768px) {
    body {
        padding-top: 0;
    }

    .nav-desktop {
        display: flex;
        gap: 2rem;
    }

    .nav-mobile {
        display: none;
    }

    #mobile-menu {
        display: none !important;
    }

    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {        
        font-size: 1.25rem;
        max-width: 48rem;
    }

    .btn {
        font-size: 1rem;
        padding: 0.75rem 2rem;
    }

    .news-detail-section,
    .blog-detail-section {
        padding: 40px 15px;
    }

    .news-detail-container,
    .blog-detail-container {
        max-width: 900px;
        padding: 40px;
    }

    .news-detail-title,
    .blog-detail-title {
        font-size: 2.2rem;
    }

    .news-detail-content,
    .blog-detail-content {
        padding: 30px;
    }

    .news-detail-content p,
    .blog-detail-content p {
        font-size: 1rem;
    }
}

/* Mobile spacing: keep content clear of fixed bottom nav */
@media (max-width: 768px) {
    body {
        padding-bottom: 90px;
    }
    .feature-section {
        padding-bottom: 5.5rem;
    }
}