/* デフォルトのブラウザスタイルをリセット */
/* すべての要素のマージン、パディング、ボーダーをリセット */
body, h1, h2, h3, h4, h5, h6, p, ul, li, nav {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

/* 横スクロールを防ぐ */
body, html {
    overflow-x: hidden; /* 横スクロールを防ぐ */
}

body {
    font-family: 'Courier', monospace;
    background-color: #333;
    color: #ccc;
    line-height: 2em;
}

h1 {
    margin-top:20px;
    font-family: Georgia, serif;
    font-size:2em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* X方向のシャドウ位置、Y方向のシャドウ位置、ぼかし半径、シャドウの色 */
}

h2 {
    margin-top:40px;
    font-family: Georgia, serif;
    font-size:2em;
    text-align: center;
}

h3 {
    font-size:1.2em;
    text-align: center;
    margin:20px;
}

h4 {
    font-size:1.0em;

}
h5 {    
    font-size:0.8em;
}

/* リンクのスタイル */

a {
    color: #ccc;
    display: inline-block;
    text-decoration: none;/* リンクのテキスト下線を削除 */
}


/* リンクのホバー時のスタイル */
/* ホバー時にリンクの色を水色に変更 */
a:hover {
    color: #24a8c6;
}

/*画像のスタイル */
img {
    max-width: 100%;
    border-radius: 8px;
    margin: 6px; /* 上下左右のマージンを6pxに設定 */
}

.small-image {
    width: 100%; /* デフォルトで幅を100%に設定 */
    max-width: 300px; /* 最大幅を300pxに設定 */
    height: auto; /* 高さは自動調整 */
}

/*ボタンのスタイル */
.button {
    margin: 10px;
    padding: 10px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    display: inline-block;
    background-color: rgba(77, 77, 77, 0.5); /* 黒色の背景に透明度0.5を指定 */
    border-radius: 8px; /* より丸い角丸にする */
    transition: background-color 0.3s, color 0.3s, transform 0.2s ease; /* ホバーエフェクトのためのトランジション */
    font-family: 'Roboto', sans-serif;
    vertical-align: bottom;
}

.button:a {
    margin: 10px;
    padding: 10px;
    border-radius: 8px; /* より丸い角丸にする */
}

.button:hover {
    background-color: #666; /* ホバー時に背景色をやや暗くする */
    color: #eee; /* ホバー時にテキスト色をやや明るくする */
    transform: translateY(-2px) translateX(2px); /* ホバー時に右上に少し動かす */
}

/* X用のボタン */
.button-x {
    background-color: #064e75;
    font-weight: bold;
    display: inline-block;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* 影を追加 */
    transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s; /* ホバーエフェクトのトランジションに影の変化を追加 */
    font-family: 'Roboto', sans-serif;
}

/* X用のボタンのホバー */
.button-x:hover {
    background-color: #666;
    color: #eee;
    transform: translateY(-2px) translateX(2px);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.6); /* ホバー時の影を強化 */
}

/* マンガハック用のボタン */
.button-manga-hack {
    background-color: #064e29;
    font-weight: bold;
    display: inline-block;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* 影を追加 */
    transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s; /* ホバーエフェクトのトランジションに影の変化を追加 */
    font-family: 'Roboto', sans-serif;
}

/* マンガハック用のボタンのホバー */
.button-manga-hack:hover {
    background-color: #666;
    color: #eee;
    transform: translateY(-2px) translateX(2px);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.6); /* ホバー時の影を強化 */
}

/* youtube用のボタン */
.button-youtube {
    background-color: rgba(222, 10, 10, 0.7);
    font-weight: bold;
    text-align: center;
    display: inline-block;
    border-radius: 8px;
    padding: 10px;
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* 影を追加 */
    transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s; /* ホバーエフェクトのトランジションに影の変化を追加 */
    font-family: 'Roboto', sans-serif;
}

.button-youtube:hover {
    background-color: #666;
    color: #eee;
    transform: translateY(-2px) translateX(2px);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.7); /* ホバー時の影を強化 */
}

/* コンテナのスタイル */
.container {
    display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
    flex-wrap: wrap;/* フレックスアイテムを折り返す */
    width: calc(33.33% - 6px); /* 3列に分割し、間隔を調整 */
    margin-right: 2px; /* 右側のマージンを追加 */
    border-radius: 8px; /* より丸い角丸にする */
}

/* 要素のスタイル */
.item {
    text-align: center;
    padding: 10px 6px; /* 上下には 20px の余白が適用され、左右には6px の余白が適用 */
    max-width: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 黒色の背景に透明度0.7を指定 */
    border-radius: 8px; /* より丸い角丸にする */
}
.item p {
    margin: 6px;
    font-style:inherit;
    line-height: 1.8; /* 行間を1.8倍に設定 */
}

.item img {
    max-width: 100%;
    margin: 6px auto;
    vertical-align:middle;
    margin: 6px; /* 上下左右のマージンを6pxに設定 */
}

/* テーブルのスタイル */
.bordered-table {
    width: 100%;
    margin:10px auto;
    border-collapse: separate; /* ボーダーを重ねないようにする */
    border-spacing: 0; /* ボーダー間のスペースをなくす */
    border-radius: 8px; 
    overflow: hidden; /* テーブルの角丸に合わせて内容を切り取る */
}
.bordered-table th {
    margin: 10px;
    padding: 10px;
    font-size: 1.4em;
    text-align: center;
    background-color: #1b1b1b; /* ヘッダーの背景色（オプション） */
}
.bordered-table td {
    width: 50%;
    padding: 6px; /* セル内のパディング */
    border: 2px solid black; /* 6pxの黒いボーダーを設定 */
    text-align: center; /* テキストを左揃え（オプション） */
}
.bordered-table img {
    width: 100%;
    margin: 10px auto;
    padding: 30px auto; /* セル内のパディング */
    display: block; /* Ensure the image behaves as a block-level element */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; 
}

/*.clear-fix クラスで clear: both; を設定し、浮動要素の影響を受けないようにします。高さは0に設定して、不要なスペースができないようにします。 */
.clear-fix {
    clear: both;
    height: 0; /* Ensures no extra space is added */
}

/* テーブルセルの角も丸める */
.bordered-table th:first-child,
.bordered-table td:first-child {
    border-top-left-radius: 12px; /* 左上の角を丸める */
}

.bordered-table th:last-child,
.bordered-table td:last-child {
    border-top-right-radius: 12px; /* 右上の角を丸める */
}

.bordered-table tr:last-child td:first-child {
    border-bottom-left-radius: 12px; /* 左下の角を丸める */
}

.bordered-table tr:last-child td:last-child {
    border-bottom-right-radius: 12px; /* 右下の角を丸める */
}
/* このtdだけフォント・サイズを変える */
.special-column {
    font-family: Georgia, serif;  
    font-size: 1.8em; /* フォントサイズを指定 */   
    font-weight: bold;
    margin-top: 40px;
}

/* メインセクション */
main {
    margin: 6px; /* 上下に6pxの余白を設定、左右には余白を設定しない */
}


/* セクション */
section {
    max-width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 透明度 */
    position: relative;
    overflow: hidden;
    margin: 20px 0; /* 上下に20pxの余白を設定、左右には余白を設定しない */
    box-sizing: border-box; /* paddingとborderを含めた要素のサイズを設定     */
    border-radius: 8px; 
}

/* セクション内のすべての画像に指定 */
section img {
    height: auto;
    display: block;
    margin: 6px auto; /* 画像を水平方向に中央揃えする */
}

/* セクション内のすべての文章に指定 */
section p {
    margin: 6px;
}

/* ヘッダー部分 */
header {
    padding: 6px;
    background-image: url('images/background-header.png');
    background-position: center;
    position: relative;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7); /* 透明度 */
}

header h1 {
    font-size: 2em;
    font-family: Georgia, serif;
    white-space: nowrap;/* デフォルトでは折り返しなし */
}
header h3 {
    white-space: nowrap;/* デフォルトでは折り返しなし */
    background-color:rgba(0, 0, 0, 0.9);
    display: inline-block;/* 背景をテキストの背景のみに表示する */

}

/* ナビゲーションメニュー */
nav.menu {
    background-color: #333;
    text-align: center;
    padding: 6px; /*  */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* 影を追加 */
    transition: background-color 0.3s, color 0.3s, transform 0.4s, box-shadow 0.3s; /* ホバーエフェクトのトランジションに影の変化を追加 */

}

/* ナビゲーションメニューのリスト */
nav.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
    overflow-x: auto; /* 横スクロールを許可 */
    white-space: nowrap; /* アイテムが折り返さないようにする */
}

/* ナビゲーションメニューのリスト項目 */
nav.menu li {
    display: block; /* リンクをブロック要素にしてパディングを効かせる */
    padding: 15px 30px; /* タップエリアを広げる */
    margin: 0 5px; /* アイテムの間隔を狭くする */
    border-radius: 8px;
    background-color: rgba(6, 6, 6, 0.5); /* 透明度 */
    transition: transform 0.3s; /* 拡大時のアニメーション */
}
/* ナビゲーションメニューのホバー時のリスト項目 */
nav.menu li:hover {
    transform: scale(1.1); /* リスト項目を10%拡大 */
    border-radius: 8px; /* 角を丸くする */
}

/* ナビゲーションメニューのリンク */
nav.menu a {
    display: inline-block; /* パディングを適用するためにブロック要素に変更 */
    padding: 10px 20px; /* パディングを調整 */
    color: white; /* デフォルトのリンク色を指定 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 8px; /* リンクの角を丸くする */
    transition: color 0.3s ease, transform 0.4s ease; /* 色とトランスフォームのトランジション */
}

/* ナビゲーションメニューのホバー時のリンク */
nav.menu a:hover {
    font-weight:bold;
    color: #24a8c6;
    border-radius: 8px; /* リンクの角を丸くする */
    transform: scale(1.05); /* リンク自体も少し拡大 */

}



/* 漫画タイトル部分のセクションのスタイル←IDセレクタ、ページ内で一意 */
section#manga-title {
    font-size: 1.5em;
    text-align: center;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    padding: 12px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
}
section#manga-title p {
    font-size: 0.8em; /* 大きすぎる場合はここで調整 */
}

/* 漫画のメイン部分のセクションのスタイル */
section#manga {
    background-image: url('images/background-manga.jpeg');
    background-position: center;
    position: relative;
    overflow: hidden;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
    flex-wrap: wrap;/* フレックスアイテムを折り返す */
}
section#manga a{
    margin: 10px auto; /* 上下に10pxの余白を設定、左右自動調整 */
    border-radius: 8px; /* より丸い角丸にする */
}
section#manga img{
    max-width: 100%; /*  */
    flex: auto;
    border-radius: 8px; /* より丸い角丸にする */
}

/* ソングタイトル部分のセクションのスタイル */
section#songs-title {
    font-size: 1.5em;
    text-align: center;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    padding: 12px;
    background-image: url('images/background-songs-title.png');
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
}
section#songs-title p {
    font-size: 0.8em; /* 大きすぎる場合はここで調整 */
}

/* ソングセクションのスタイル */
section#songs {
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-size: cover; /* 背景画像を要素にカバーさせる */
    background-position: center;
    position: relative;
    overflow: hidden;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
    flex-wrap: wrap;/* フレックスアイテムを折り返す */
}
section#songs .button-youtube {
    font-size: 1.4em; /* 大きすぎる場合はここで調整 */
}


/* ノートブックタイトル部分のセクションのスタイル */
section#notes-title {
    font-size: 1.5em;
    text-align: center;
    padding: 12px;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
}
section#notes-title p {
    font-size: 0.8em; /* 大きすぎる場合はここで調整 */
}

/* ノートブックセクションのスタイル */
section#notes {
    background-image: url('images/background-songs-title.png');
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-size: cover; /* 背景画像を要素にカバーさせる */
    background-position: center;
    position: relative;
    overflow: hidden;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
    flex-wrap: wrap;/* フレックスアイテムを折り返す */
}
/* アバウト部分のセクションのスタイル */
section#about {
    text-align: center;
    background-image: url('images/background-about.png');
    background-position: center;
    position: relative;
    overflow: hidden;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    padding: 12px; /*  */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
}
/* 各漫画TOPページの基本のスタイル */
.manga-top {
    margin: 10px auto; /* 上下に10pxの余白を設定、左右自動調整 */
    padding: 10px auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3); /* 黒色の背景に透明度0.7を指定 */
    position: relative;
    display: block;
    overflow: hidden;/* はみ出た部分は表示しない */
    border-radius: 8px; /* より丸い角丸にする */
}

.manga-top img{
    margin: 10px auto; /* 上下に10pxの余白を設定、左右自動調整 */
    padding: 10px auto;
    border-radius: 8px; /* より丸い角丸にする */
    max-width:100%;
    height: auto;
    display: block;
}

.manga-top a{
    margin: 10px; /* 上下に10pxの余白を設定、左右自動調整 */
    border-radius: 8px; /* より丸い角丸にする */
}

.manga-top-container {
    margin: 10px auto; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3); /* 黒色の背景に透明度0.7を指定 */
    position: relative;
    overflow: hidden;/* はみ出た部分は表示しない */
    display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
    flex-wrap: wrap;/* フレックスアイテムを折り返す */
    border-radius: 8px; /* より丸い角丸にする */
}

.manga-top-container img{
    margin: 10px auto; /* 上下に10pxの余白を設定、左右自動調整 */
    padding: 10px auto;
    border-radius: 8px; /* より丸い角丸にする */
    max-width:100%;
    height: auto;
    display: block;
}
.manga-top-container a{
    margin: 10px auto; /* 上下に10pxの余白を設定、左右自動調整 */
    border-radius: 8px; /* より丸い角丸にする */
}

/* Notesページのスタイル */
.notes-title {
    text-align:center;
    margin:30px;
    font-size: calc(1vw + 1rem); /* ビューポートの幅の割合と固定サイズの組み合わせ */
    line-height: 1.4; /* Adjust this value to increase or decrease the line height */
}

.notes {
    margin: 30px; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    text-align: left;
    background-color: rgba(0, 0, 0, 0.3); /* 黒色の背景に透明度0.7を指定 */
    position: relative;
    display: block;
    overflow: hidden;/* はみ出た部分は表示しない */
    border-radius: 8px; /* より丸い角丸にする */
}
.notes-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.image-wrapper {
    margin-bottom: 20px; /* Space between images */
}

.image-wrapper img {
    display: block; /* Ensures the image is treated as a block-level element */
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
}

/*フッターのスタイル */
footer {
    background-color: #222;
    color: #ccc;
    margin: 10px 0; /* 上下に10pxの余白を設定、左右には余白を設定しない */
    text-align: center;
}

/* PC版のスタイル */
@media only screen and (min-width: 1024px) {
    
    nav.menu {
        font-size: 0.9em; /* PC版では少し小さくする */
        margin: 0;
        box-sizing: border-box;
    }

    nav.menu ul {
        display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
        justify-content: center;
        padding: 0;
        margin: 0;
        list-style-type: none;
        overflow-x: auto; /* 横スクロールを許可 */
    }

    nav.menu li {
        margin: 6px; 
        padding: 6px;
        box-sizing: border-box;
    }

    nav.menu a {
        display: block;
        padding: 6px 12px; /* パディングを調整 */
        font-size: 2em; /* フォントサイズを調整 */
        color: #fff;
        text-decoration: none;
        text-align: center; /* テキストを中央揃えにする */
    }


    section#manga {
        display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
        flex-wrap: wrap;
    }
    section#songs {
        display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
        flex-wrap: wrap;
    }
    section#notes {
        display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
        flex-wrap: wrap;
    }

    .button {
        width: 40%; /* ボタンの幅 */
        margin: 10px; /* 右側のマージンをリセット */
    }
    /* PC版のボタングループ */
    .button-group {
        text-align: center;
        display: block;/*横幅: 常に100%、高さ: 自動調整、改行: 前後改行、幅と高さ: width と height プロパティで調整可能 */
        max-width: 100%;
    }
    

}

/* タブレット版とスマートフォン版の共通スタイル */
@media only screen and (max-width: 1023px) {

    /* リンク付き画像のスタイル */
    a img {
        display: block;
        max-width: 100%;
        width: calc(100% - 10px); /* 間隔を調整 */
        height: auto;
        margin: 10px auto; /* 上下のマージンを追加し、左右は自動で中央配置 */
        padding: 10px auto;
        border: none;
        box-sizing: border-box;/* パディングを含めたサイズ計算 */
    }
    /* 小さめ画像のスタイル */

    .small-image {
        max-width: 40%; /* 幅を80%に設定 */
    }
    .button {
        width: 100%;
        height: auto;
        margin: 10px auto; /* 上下のマージンを追加し、左右は自動で中央配置 */
        padding: 10px auto;
        border: none;
        box-sizing: border-box;/* パディングを含めたサイズ計算 */
    }

    
    header {
        text-align: center;
        padding: 0 10px; /* 左右にパディングを追加して余白を確保 */
        padding-top: 20px; /* 上部のパディングを調整 */
        box-sizing: border-box; /* パディングを含めたサイズ計算 */
        margin-top: 0; /* 必要に応じてマージンも調整 */
    }
    
    header h1 {
        font-size: calc(3vw + 1rem); /* ビューポートの幅の割合と固定サイズの組み合わせ */
        white-space: nowrap; /* 折り返さない */
        margin: 0; /* マージンをリセット */
        padding: 0; /* パディングをリセット */
    }
    
    header img {
        display: block; /* ブロック表示にして中央揃え */
        margin: 10px auto; /* 上下のマージンを追加し、左右は自動で中央配置 */
    }

    header h3 {
        font-size: calc(2.5vw + 0.5rem); /* ビューポートの幅の割合と固定サイズの組み合わせ */
        white-space: nowrap; /* 折り返さない */
        margin: 0; /* マージンをリセット */
        padding: 0; /* パディングをリセット */
    }

    /* メニュー */

    nav.menu {
        padding: 6px; /* ナビゲーションメニューのパディング */
        margin: 0; /* マージンをリセット */
        box-sizing: border-box; /* パディングとボーダーを含めたサイズ計算 */
    }
    /* メニューのリスト */
    nav.menu ul {
        display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
        padding: 0;
        margin: 0;
        flex-direction: column; /* スマートフォン版では縦に並べる */
        overflow-x: visible; /* スマートフォンでは横スクロールを無効 */
    }

    /* メニューのリスト項目 */
    nav.menu li {
        display: block; /* メニューリスト項目をブロックレベルに表示 */
        padding: 10px 12px; /* パディングを調整してタップエリアを広げる */
        margin: 6px 0; /* 上下のマージンを調整 */
        border-radius: 8px; /* リスト項目の角をより丸くする */
        background-color: rgba(6, 6, 6, 0.5); /* 背景色を調整 */
    }

    nav.menu a {
        font-size: 1.8em; /* フォントサイズを調整 */
        display: block; /* ブロック要素にしてタップエリアを広げる */
        padding: 6px 12px; /* パディングを調整 */
        color: white; /* デフォルトのリンク色を指定 */
        text-decoration: none; /* 下線を削除 */
        border-radius: 8px; /* リンクの角も丸くする */
        transition: color 0.3s ease, transform 0.4s ease; /* 色とトランスフォームのトランジション */
    }
    /* ホバー時のリンク */
    nav.menu a:hover {
        font-weight: bold;
        color: #24a8c6;
        border-radius: 8px; /* リンクの角も丸くする */
        transform: scale(1.05); /* リンク自体も少し拡大 */
    }
    
    /* タブレット版とスマートフォン版のコンテナ */
    .container {
        margin: 0; /* コンテナのマージンをリセット */
        padding: 0; /* パディングもリセット */
        display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
        flex-direction: column; /* 縦に並べる */
        align-items: center; /* アイテムを中央に配置 */
        width: 100%;
        border-radius: 8px; /* より丸い角丸にする */

    }

    /*タブレット版とスマートフォン版の要素 */
    .item {
        text-align: center;
        width: 100%; /* 幅を100%にする */
        padding: 30px auto;
        margin: 10px auto; /* マージンをリセット */
    }

    /* タブレット版とスマートフォン版のボタングループ */
    .button-group {
        text-align: center;
        display: flex; /* 横幅: 自動調整または指定可能、高さ: 調整可能、改行: 要素は同じ行に並びflex-wrap プロパティで制御、幅と高さ: flex プロパティで調整*/
        flex-direction: column;
    }
    /* タブレット版とスマートフォン版のボタングループ内のリンク */
    .button-group a {
        max-width: 100%;
        margin: 10px 0; /* ボタンの上下に10pxのマージンを追加 */
        display: block; /* ブロック要素にしてタップエリアを広げる */
        text-decoration: none; /* 下線を削除 */
        border-radius: 8px; /* リンクの角も丸くする */
        transition: color 0.3s ease, transform 0.4s ease; /* 色とトランスフォームのトランジション */
    }
    /* ホバー時のリンク */
    .button-group a:hover {
        font-weight: bold;
        color: #24a8c6;
        transform: scale(1.05); /* リンク自体も少し拡大 */
    }
    *, *::before, *::after {
        box-sizing: border-box;
    }
    /* タブレット版・スマホ版でのみ漫画TOPページ・閲覧ページの画像を100%にする */
    .manga-top img{
        margin: 10px auto; /* 上下に10pxの余白を設定、左右自動調整 */
        padding: 10px auto;
        border-radius: 8px; /* より丸い角丸にする */
        width:100%;
        height: auto;
        display: block;
    }
    

}