/* css/responsive.css */

/* 小さなデバイス（タブレット縦持ち、大きめのスマートフォン横持ちなど）向け */
@media (max-width: 768px) {
    /* 全体的な調整 */
 
    /* ヘッダー */
    header {
        padding: 10px 15px; /* パディングを少し減らす */
    }

    .header-logo img {
        height: 35px; /* ロゴの高さを調整 */
    }

    .hamburger-menu {
        width: 25px; /* ハンバーガーアイコンの幅 */
        height: 20px; /* ハンバーガーアイコンの高さ */
    }

    .hamburger-menu span {
        height: 2px; /* ハンバーガーの線の太さ */
    }

    .sidebar-menu {
        width: 300px; /* サイドバーの幅を調整 */
        padding-bottom: 80px; 
    }

    .sidebar-menu ul li a.menu-item-with-icon {
        font-size: 1em; /* メニュー文字サイズを調整 */
        padding: 5px 5px 5px 5px ; /* リンクの上下パディングを増やす */
    }
    
    .sidebar-menu ul li ul { /* サブメニュー */
        padding-left: 3px;
    }

    /* メインコンテンツ */
    .content-wrapper {
        margin: 20px auto; /* 上下のマージンを調整 */
        padding: 20px; /* 左右のパディングを調整 */
        max-width: 95%; /* 画面幅のほとんどを使用 */
    }

    .main-content h1 {
        font-size: 1.8em; /* メインタイトルを調整 */
        margin-bottom: 18px;
    }

    .main-content h2 {
        font-size: 1.7em;
        margin-bottom: 15px;
    }

    .main-content h3 {
        font-size: 1.6em;
        margin-bottom: 12px;
    }

    /* リスト内のh4（項目名） */
    .main-content ul li h4,
    .main-content ol li h4 {
        font-size: 1.5em; /* 少し小さく */
        margin-bottom: 5px; /* 下の余白を調整 */
    }
    
    /* リスト項目 */
    ul li, ol li {
        margin-bottom: 12px; /* リスト項目の余白を調整 */
        line-height: 1.7; /* 行の高さを調整 */
        font-size: 1.0em; /* 少し小さく */
    }

    ul, ol {
        padding-left: 8px; /* リストの左パディングを調整 */
        margin-bottom: 20px;
    }

    .main-content p {
        font-size: 1.5em; /* 本文のフォントサイズ調整 */
        margin-bottom: 18px;
    }
.content-image { 
opacity: 0;
transition: opacity 2s ease-in-out;
}

.content-image.fade-in {
opacity: 1; /* fade-in クラスが付与されたら完全に表示 */
}


    /* クイズセクション */
    #quiz-section {
        padding: 20px;
    }

    .quiz-options button {
        font-size: 1.5em;
        padding: 10px 15px;
    }

    /* シェアボタン */
   .share-buttons {
    display: flex; 
    flex-direction: column; /* ボタンを縦に並べる */
    gap: 16px; /* ボタン間のスペースを調整 */
    font-size: 1em;

}
   .share-buttons h3{

    font-size: 1.2em!important;


}

    .share-button {
        width: 80%; /* 幅を広げる */
        margin: 0 auto; /* 中央揃え */
        font-size: 1.2em;
        padding: 12px 15px;
    }


    /* ページナビゲーション */
    .page-navigation {
        flex-direction: column; /* 前へ次へボタンも縦に並べる */
        gap: 15px;
    }

    .page-navigation button {
        width: 100%; /* 幅いっぱいに広げる */
        padding: 12px 20px;
        font-size: 1.5em;
    }

    /* 404ページ固有の調整 */
    .not-found-page h1 {
        font-size: 2em;
    }
    .not-found-page p {
        font-size: 1.1em;
    }
    .not-found-page .content-image {
        max-width: 300px; /* 画像サイズを調整 */
    }
    .not-found-navigation button {
        margin: 0 10px;
        padding: 12px 25px;
        font-size: 1em;
    }
}

/* より小さなデバイス（一般的なスマートフォン縦持ち）向け */
@media (max-width: 480px) {
   
    header {
        padding: 8px 10px; /* ヘッダーパディングをさらに減らす */
    }

    .header-logo img {
        height: 30px; /* ロゴをさらに小さく */
    }

    .sidebar-menu {
        width: 300px; /* サイドバーの幅をさらに狭く */
        padding-top: 50px;
        padding-bottom: 180px;
    }

    .sidebar-menu ul li a.menu-item-with-icon {
        font-size: 1em;
    }
    .sidebar-menu ul li ul {
        font-size: 1em; /* サブメニュー文字サイズを調整 */
    }


    .content-wrapper {
        padding: 15px; /* 左右のパディングをさらに減らす */
        margin: 15px auto;
    }

    .main-content h1 {
        font-size: 1.6em;
    }

    .main-content h2 {
        font-size: 1.5em;
    }

    .main-content h3 {
        font-size: 1.4em;
    }

    .main-content p {
        font-size: 1.2em;
    }

    ul li, ol li {
        font-size: 1.0em;
        margin-bottom: 10px;
        padding-left: 8px; /* リストのパディングをさらに調整 */
    }


    .main-content h4 {
        font-size: 1.3em;
    }

    .content-image { 
opacity: 0;
transition: opacity 3s ease-in-out;
}

.content-image.fade-in {
opacity: 1; /* fade-in クラスが付与されたら完全に表示 */
}

    .quiz-options button {
        font-size: 1.3em;
        padding: 8px 12px;
    }

    .share-button {
        width: 90%; /* 幅をさらに広げる */
    }

    .page-navigation button {
        padding: 10px 15px;
        font-size: 1.3em;
    }

    /* 404ページ固有の調整 */
    .not-found-page h1 {
        font-size: 1.8em;
    }
    .not-found-page p {
        font-size: 1em;
    }
    .not-found-page .content-image {
        max-width: 250px;
    }
    .not-found-navigation button {
        display: block; /* 縦に並べる */
        width: calc(100% - 20px);
        margin: 10px auto;
        font-size: 0.95em;
    }
}

/* 横幅が広いデスクトップ向け (必要に応じて追加) */
@media (min-width: 1200px) {
    .content-wrapper {
        max-width: 1000px; /* より広い画面ではコンテンツ幅を広げる */
    }
}