/* --- 基本設定（サイト全体） --- */
body {
    background-image: url('http://www.guckie.jp/counter/images/wall.gif');
    background-repeat: repeat;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    font-size: 11pt;
    color: #0A1F6C;
    line-height: 1.6;
}

.main-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

a {
    color: #0A1F6C;
    font-weight: bold;
}

hr {
    border: 0;
    border-top: 1px solid #0A1F6C;
}

/* --- ヘッダー・フッター・ナビゲーション --- */
.header-area, .footer-area {
    text-align: center;
    padding: 15px 0;
}

.header-img {
    max-width: 100%;
    height: auto;
}

/* 【ステルス化】枠線と背景を透明にし、テキストのみに見せる */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* テキスト同士がくっつきすぎないよう間隔を調整 */
    margin: 10px 0;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px; /* タップしやすさのための余白は維持 */
    background: transparent; /* 背景を透明に */
    border: none; /* 枠線を消去 */
    text-decoration: underline; /* リンクであることを示すため下線を表示（お好みで） */
    font-size: 0.95rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #4A90E2; /* ホバー時に色を変えて反応を示す */
    background: transparent;
}

/* --- コンテンツレイアウト --- */
.transparent-block {
    width: 100%;
    margin: 20px 0;
    background: transparent;
    line-height: 1.8;
}

/* --- テーブル（歴史・コレクション） --- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 20px 0;
}

.data-table td {
    padding: 12px 8px;
    vertical-align: middle;
}

.row-blue { background-color: rgba(223, 239, 255, 0.85); }
.row-white { background-color: rgba(240, 248, 255, 0.85); }

/* --- 画像・カード表示 --- */
.card-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.card-img {
    height: 120px;
    width: auto;
    border: 1px solid #999;
}

.set-symbol {
    height: 30px;
    width: auto;
}

/* --- トップページ専用メニュー（透明） --- */
.menu-container {
    max-width: 350px;
    margin: 40px auto;
}

.menu-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.menu-icon {
    width: 18px;
    height: 19px;
    margin-right: 15px;
}

/* =========================================
   スマホ・レスポンシブ対応（画面幅600px以下）
   ========================================= */
@media screen and (max-width: 600px) {

    /* メニューを強制的に縦並びにするための絶対命令 */
    .nav-links {
        display: flex !important;
        flex-direction: column !important; /* 縦並び */
        align-items: center !important;
        gap: 12px !important; /* リンク間の隙間を広めに */
        width: 100% !important;
        margin: 15px 0 !important;
    }

    /* 各リンク自体を「横いっぱいのブロック」に強制変更 */
    .nav-links a {
        display: block !important; /* インラインからブロックへ */
        width: 100% !important;
        max-width: 250px; /* あまりに長くなりすぎないよう制限（お好みで） */
        text-align: center !important;
        padding: 10px 0 !important;
        text-decoration: underline; /* リンクと分かりやすく */
        box-sizing: border-box !important;
    }
    /* テーブルをカード型に解体 */
    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-header {
        display: none !important;
    }

    .data-table tr {
        margin-bottom: 20px;
        border: 1px solid #0A1F6C;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        background-color: rgba(255, 255, 255, 0.8);
    }

    .data-table td {
        text-align: left !important;
        border-bottom: 1px solid rgba(10, 31, 108, 0.1);
        padding: 12px;
    }

    .data-table td:nth-of-type(1)::before { content: "セット名： "; font-weight: bold; }
    .data-table td:nth-of-type(2)::before { content: "英語： "; font-weight: bold; }
    .data-table td:nth-of-type(3)::before { content: "日本語： "; font-weight: bold; }
    .data-table td:nth-of-type(4)::before { content: "他言語： "; font-weight: bold; }
    .data-table td:nth-of-type(5)::before { content: "詳細： "; font-weight: bold; }

    img {
        max-width: 100%;
        height: auto;
    }

    .article-title {
        font-size: 1.1rem;
    }
}