/* ===== 基本設定 ===== */
body {
    background-color: #FFFFFF;
    color: #333333;
    font-family: sans-serif; /* 基本フォント */
    margin: 0;
    padding: 0;
    font-size: 16px; /* ベースのフォントサイズ */
}

/* リンク色 */
a:link { color: #4682b4; }
a:visited { color: #708090; }
a:hover, a:active { color: #daa520; } /* hoverとactiveをまとめる */

/* 画像の基本スタイル */
img {
    border: none;
    display: block; /* 余計な隙間を防ぎ、width/height指定をしやすくする */
    max-width: 100%; /* コンテナからはみ出さないように */
    height: auto;   /* アスペクト比を維持 */
}

/* ===== 全体レイアウト ===== */
.container {
    width: 706px; /* 元のテーブルに基づいた全体の幅 */
    margin: 20px auto; /* 上下に20pxマージン、左右autoで中央揃え */
    padding: 0;
}

/* ===== ヘッダー ===== */
header {
    margin-bottom: 15px; /* mainとの間隔 */
    /* mainのコンテンツエリアと左端を合わせるための設定 */
    padding-left: 23px;
    box-sizing: border-box;
    width: 100%; /* .containerの幅に合わせる */
}

.title-container {
    width: 100%; /* headerのpaddingを除いた幅 (683px相当) */
    margin: 0; /* マージンリセット */
}

/* --- h2 スタイル --- */
h2 {
    font-size: 1.1em;
    font-weight: lighter;
    color: #000;
    text-align: center; /* テキスト自体は中央揃え */
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 0; /* 下の画像との間隔はtitle-imageのmargin-topで調整 */
    background: #fff;
    border-radius: 4px;
    border: solid 1px #000000;
    text-shadow: 1px 2px 3px #808080;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    box-sizing: border-box;
    /* mainのコンテンツ幅に合わせるための設定 */
    display: block; /* ブロック要素にして幅を指定可能に */
    width: 100%;   /* 親(.title-container)の幅いっぱいに広げる */
}

.title-image {
    width: 558px; /* 元の指定幅 */
    height: auto; /* 高さは自動 */
    display: block;
    margin: 10px auto 0; /* 上マージン10px、左右autoで中央揃え */
}

/* ===== メインコンテンツ ===== */
main {
    padding-left: 23px; /* 左側の余白 (元のテーブルレイアウト再現) */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    width: 100%; /* .containerの幅に合わせる */
}

.sub-title-container {
    margin-bottom: 15px; /* 下の画像グリッドとの間隔 */
}

/* --- h3 スタイル --- */
h3 {
    font-size: 1.1em; /* または 1.1rem */
    font-weight: normal; /* 必要なら太字を解除 */
    margin-top: 0; /* 上マージンをリセット */
    margin-bottom: 5px; /* 下の画像との間隔 */
    padding: 0; /* デフォルトのpaddingをリセット */
    text-shadow: 1px 1px 5px rgba(0, 128, 0, 0.7); /* 緑色のぼかし */
}

.sub-title-image {
    width: 300px; /* 元の指定幅 */
    height: 30px; /* 元の指定高さ */
    display: block; /* display: block; を徹底 */
}

/* ===== 画像グリッド ===== */
.image-grid-container {
    width: 683px; /* mainのコンテンツエリアの幅 */
    margin-bottom: 35px; /* 下の区切り線との間隔 */
    box-sizing: border-box;
}

.image-grid {
    width: 100%; /* コンテナ(.image-grid-container)の幅に合わせる */
    border-collapse: collapse; /* セル間の隙間をなくす */
    table-layout: fixed; /* セルの幅指定を厳密にする */
}

.image-grid td {
    padding: 0; /* セル内の余白なし */
    vertical-align: top; /* 内容を上揃え */
    overflow: hidden; /* 画像がはみ出さないように */
}

/* 画像セル内の画像サイズ指定 */
.image-grid .img-cell-1 img { width: 240px; height: 400px; }
.image-grid .img-cell-2 img { width: 216px; height: 233px; }
.image-grid .img-cell-3 img { width: 216px; height: 233px; }
.image-grid .img-cell-4 img { width: 437px; height: 162px; }

/* 画像間のスペーサーセル */
.image-grid .spacer-col {
    width: 5px; /* 縦方向の隙間 */
}
.image-grid .spacer-row {
    height: 5px; /* 横方向の隙間 */
    /* 隙間セルの高さを確保 */
    font-size: 1px;
    line-height: 1px;
}
/* 2行目のspacer-rowの高さを明示的に設定 */
.image-grid tr:nth-child(2) .spacer-row {
    height: 5px;
}


/* ===== 区切り線 ===== */
.divider {
    text-align: center; /* 画像を中央揃え */
    margin-bottom: 15px; /* 下の注意書きとの間隔 */
    /* mainのpadding-leftを考慮して中央揃え */
    padding-right: 23px; /* 左の23pxを相殺 */
    box-sizing: border-box;
    width: 100%;
}
.divider img {
    width: 680px; /* 元の指定幅 */
    height: 3px;  /* 元の指定高さ */
    display: inline-block; /* 中央揃えのため */
}

/* ===== 注意書き ===== */
.note {
    font-size: 9pt; /* 約12px */
    margin-top: 0;
    margin-bottom: 15px; /* 下のボタンとの間隔 */
    margin-left: 0; /* mainのpaddingがあるので不要 */
    padding: 0;
}

/* ===== 閉じるボタン ===== */
.button-container {
    margin-bottom: 17px; /* ページ下部との間隔 */
    margin-left: 0; /* mainのpaddingがあるので不要 */
    padding: 0;
}

.button-container button {
    padding: 5px 15px; /* ボタンの見た目調整 */
    font-size: 14px;
    cursor: pointer;
}

/* ===== 補助クラス ===== */
/* 元のHTMLにあった .font09pt を再現 */
.font09pt {
    font-size: 9pt; /* 約12px */
}

/* style.css の末尾に追加 */

/* ===== モバイル向けスタイル (画面幅 767px 以下に適用) ===== */
@media screen and (max-width: 767px) {

    /* 全体コンテナ */
    .container {
        width: 100%; /* 画面幅いっぱいに */
        margin: 10px 0; /* 上下マージンを少し減らす */
        padding: 0 10px; /* 左右に10pxの余白を追加 */
        box-sizing: border-box; /* paddingを含めて幅を計算 */
    }

    /* ヘッダー */
    header {
        padding-left: 0; /* PC用の左パディングを解除 */
        margin-bottom: 10px; /* 少し詰める */
    }

    /* h2の親コンテナ */
    .title-container {
        /* 幅は100%のままなので変更不要 */
    }

    /* --- h2 スタイル (モバイル) --- */
    h2 {
        /* width: 100% は維持され、親要素(.container)の幅に追従 */
        font-size: 1.0em; /* 少しフォントサイズを調整 */
        padding: 4px; /* パディングも少し調整 */
        /* 他のスタイルはPC用を継承 */
    }

    /* タイトル画像 */
    .title-image {
        width: 90%; /* 画面幅に対して90% */
        max-width: 558px; /* PCでの最大幅を超えないように */
        height: auto;
        margin: 8px auto 0; /* マージン調整 */
    }

    /* メインコンテンツ */
    main {
        padding-left: 0; /* PC用の左パディングを解除 */
    }

    /* サブタイトルコンテナ */
    .sub-title-container {
        margin-bottom: 15px; /* 画像グリッドとの間隔 */
    }

    /* --- h3 スタイル (モバイル) --- */
    h3 {
        font-size: 1.0em; /* 少しフォントサイズを調整 */
        margin-bottom: 8px;
        /* text-shadow は継承 */
    }

    /* サブタイトル画像 */
    .sub-title-image {
        width: 80%; /* 画面幅に対して80% */
        max-width: 300px; /* PCでの最大幅を超えないように */
        height: auto; /* 高さは自動 */
    }

    /* ===== 画像グリッド (モバイル: 縦並び) ===== */
    .image-grid-container {
        width: 100%; /* コンテナ幅いっぱいに */
        margin-bottom: 25px; /* 区切り線との間隔 */
    }

    /* テーブル要素をブロック要素として扱う */
    .image-grid,
    .image-grid tbody,
    .image-grid tr {
        display: block; /* テーブル構造を解除し、縦並びの基礎を作る */
        width: 100%;
    }

    /* テーブルセル(td)をブロック要素にし、縦に並べる */
    .image-grid td {
        display: block; /* 各セルをブロック要素に */
        width: 100% !important; /* 幅を100%に (PCスタイルの固定幅を上書き) */
        height: auto !important; /* 高さを自動に (PCスタイルの固定高さを上書き) */
        padding: 0; /* パディング解除 */
        margin-bottom: 10px; /* 各画像の間にマージンを追加 */
        box-sizing: border-box;
        /* rowspan属性を持つセルも同様に扱う */
        /* (display: blockになるとrowspanは効果を失う) */
    }
    /* rowspanがあってもなくても同じスタイルを適用 */
    .image-grid td[rowspan] {
        /* display:block で rowspan は意味をなさなくなるので個別指定不要な場合が多いが念のため */
        margin-bottom: 10px;
    }


    /* スペーサーセルは非表示にする */
    .image-grid .spacer-col,
    .image-grid .spacer-row {
        display: none;
    }

    /* 画像自体のスタイル調整 */
    .image-grid .img-cell-1 img,
    .image-grid .img-cell-2 img,
    .image-grid .img-cell-3 img,
    .image-grid .img-cell-4 img {
        width: 100%; /* セル幅いっぱいに */
        height: auto; /* 高さは自動 */
        display: block; /* display: block を確実に適用 */
    }
    /* 最後の画像の下マージンを調整 (tdのmargin-bottomと重複しないように) */
    .image-grid td:last-child {
         margin-bottom: 0; /* 最後のセルには不要な場合 */
    }
     /* もしくは、画像セルクラスに直接指定 */
    .image-grid .img-cell-1,
    .image-grid .img-cell-2,
    .image-grid .img-cell-3,
    .image-grid .img-cell-4 {
        margin-bottom: 10px; /* 画像ごとの間隔 */
    }
     .image-grid .img-cell-4 {
        margin-bottom: 0; /* 最後の画像は下のマージン不要 */
    }


    /* ===== 区切り線 (モバイル) ===== */
    .divider {
        padding-right: 0; /* PC用の右パディング解除 */
        margin-bottom: 15px;
        width: 100%; /* 幅いっぱい */
        text-align: center;
    }
    .divider img {
        width: 90%; /* 画面幅に合わせて少し縮小 */
        max-width: 680px; /* PCでの最大幅を超えないように */
        height: auto; /* 高さは自動 */
        display: inline-block;
    }

    /* ===== 注意書き (モバイル) ===== */
    .note {
        font-size: 8pt; /* 約11px、さらに小さく */
        margin-bottom: 15px;
    }

    /* ===== 閉じるボタン (モバイル) ===== */
    .button-container {
        text-align: center; /* ボタンを中央揃えに */
        margin-bottom: 20px;
    }
    .button-container button {
        padding: 10px 25px; /* ボタンを少し大きく */
        font-size: 15px;
        width: 70%; /* 幅を広げる */
        max-width: 250px; /* 最大幅を設定 */
    }

} /* @media screen and (max-width: 767px) ここまで */

/* ===== tenga_02.html 用の追加スタイル ===== */

/* --- PC用画像サイズ指定 --- */
.image-grid .img-cell-5 img {
    /* 元のHTMLの width="240" height="415" に対応 */
    /* rowspanがあったので高さが大きいが、CSSではtdの高さではなくimgの高さで指定 */
    width: 240px;
    height: 415px; /* rowspanの影響を考慮して元のtdの高さを採用 */
    object-fit: cover; /* アスペクト比が異なる場合の見え方調整 (任意) */
    object-position: top; /* アスペクト比が異なる場合の見え方調整 (任意) */
}
.image-grid .img-cell-6 img {
    /* 元のHTMLの width="438" height="414" に対応 */
    width: 438px;
    height: 414px;
    object-fit: cover; /* アスペクト比が異なる場合の見え方調整 (任意) */
}


/* --- モバイル用スタイル追記 (メディアクエリ内) --- */
@media screen and (max-width: 767px) {

    /* 画像グリッド内のすべての画像セルに適用される既存スタイルを確認 */
    /* .image-grid td { width: 100% !important; height: auto !important; margin-bottom: 10px; } */
    /* .image-grid img { width: 100%; height: auto; } */

    /* 新しい画像セルクラスに対するマージン調整 */
    .image-grid .img-cell-5 {
        margin-bottom: 10px; /* 次の画像との間隔 */
    }
    .image-grid .img-cell-6 {
        margin-bottom: 0; /* 最後の画像なので下のマージンは不要 */
    }

    /* (念のため) 新しい画像クラスにもモバイル用サイズを明示 */
    .image-grid .img-cell-5 img,
    .image-grid .img-cell-6 img {
        width: 100%; /* セル幅いっぱいに */
        height: auto; /* 高さは自動 */
    }
}