body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #a1b9c9; /* 背景色、画像から少し明るめに変更しました */
    color: #1f1930;
    padding-top: 70px;
    padding-bottom: 50px;
}

.rulebook-container {
    max-width: 80%;
    margin: 40px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* タブメニュー */
.tabs {
    display: flex;
    /* justify-content: space-around; */ /* この行をコメントアウトまたは削除 */
    border-bottom: 1px solid #ddd;
    background-color: #e9ecef;

    /* ★ここを追加・変更★ */
    overflow-x: auto; /* 横方向のスクロールを可能にする */
    -webkit-overflow-scrolling: touch; /* iOS Safariでスムーズなスクロールを実現 */
    white-space: nowrap; /* タブアイテムが改行されないようにする */
}

/* 各タブアイテムの幅を調整 */
.tab-item {
    padding: 15px 20px;
    text-decoration: none;
    color: #555;
    font-weight: bold;
    /* flex-grow: 1; */ /* この行をコメントアウトまたは削除 */
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    /* white-space: nowrap; */ /* .tabsで指定するので、ここで個別に指定する必要はないが、残っていても問題はない */
    cursor: pointer;
    
    /* ★ここを追加・変更（任意）★ */
    min-width: fit-content; /* タブのコンテンツに合わせて最小幅を設定（はみ出し防止） */
    /* あるいは、固定幅にするなら min-width: 100px; など */
}

.tab-item:hover {
    background-color: #d1d5db;
    color: #333;
}

/* JavaScriptで追加・削除するアクティブクラス */
.tab-item.active-tab {
    background-color: #007bff;
    color: #fff;
    border-bottom: 3px solid #0056b3;
    padding-bottom: 12px;
}

/* タブコンテンツのラッパー */
.tab-content-wrapper {
    padding: 20px;
}

/* タブコンテンツ本体 */
.tab-content {
    display: none; /* デフォルトでは非表示 */
    animation: fadeIn 0.5s ease-in-out;
}

/* JavaScriptで追加・削除するアクティブクラスによって表示される */
.tab-content.active-content {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-content h2 {
    color: #007bff;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tab-content p {
    margin-bottom: 15px;
}

.large-text {
    font-size: 1.2em; /* 親要素の文字サイズの1.2倍 */
    /* または font-size: 120%; */
}

.red{
    color: #b61c11;
}

.youyaku{
    color: #b61c11;
    font-size: 25px;
}

.yougo{
        color: #007bff;
    font-size: 20px;

}

img {
    max-width: 80%; /* 親要素の幅を超えないようにする */
    height: auto;    /* ★ここを「auto」に変更！★ アスペクト比を維持して高さを自動調整 */
    display: block;  /* 画像の下に隙間ができないようにする */
    margin: 20px auto; /* 上下に余白、左右中央寄せ */
    border-radius: 5px; /* 角を少し丸める */
}


.ijoulist{
    background-color: #ced7dd;
        width: 60%;
margin: 0 auto;
}

.ijou{
     color: #310a4b;
    font-size: 15px;

}

/* アコーディオンのスタイル */
.accordion-section {
    background-color: #f9f9f9; /* アコーディオンの背景色 */
    border: 1px solid #ddd; /* ボーダー */
    border-radius: 8px; /* 角を丸める */
    margin: 30px 0; /* 上下のマージン */
    padding: 0; /* デフォルトのパディングをリセット */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 影 */
}

.accordion-title {
    display: block; /* 全体がクリック可能になるように */
    padding: 15px 20px; /* 見出しのパディング */
    cursor: pointer; /* マウスカーソルを指マークにする */
    font-weight: bold; /* テキストを太字に */
    background-color: #e2eaf0; /* 見出しの背景色 */
    color: #333; /* 見出しの文字色 */
    border-bottom: 1px solid #ddd; /* 下線 */
    position: relative; /* 矢印の位置調整のため */
}

/* 開閉矢印のスタイル調整 (ブラウザデフォルトの矢印を非表示にして、カスタムの矢印を表示) */
.accordion-title::-webkit-details-marker {
    display: none; /* Chrome/Safari */
}
.accordion-title::marker {
    display: none; /* Firefox */
}

/* カスタムの開閉矢印（CSSで作成） */
.accordion-title::after {
    content: '▶'; /* 閉じた状態の矢印 */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease-in-out;
}

/* 開いた状態の矢印 */
.accordion-section[open] .accordion-title::after {
    content: '▼'; /* 開いた状態の矢印 */
    transform: translateY(-50%) rotate(90deg); /* 90度回転させる */
}


.accordion-content {
    padding: 20px; /* コンテンツのパディング */
    background-color: #ffffff; /* コンテンツの背景色 */
    /* アニメーションを追加する場合 */
    overflow: hidden;
    transition: all 0.3s ease-in-out; /* 開閉アニメーション */
}

/* ul や li のデフォルトスタイルをリセット */
.accordion-content ul {
    list-style: disc; /* リストのスタイル */
    padding-left: 20px; /* 左の余白 */
    margin-top: 10px;
    margin-bottom: 10px;
}

.accordion-content h4 {
    color: #007bff; /* 見出しの色 */
    margin-top: 15px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}