@charset "UTF-8";

/* ==========================================================================
   アストゥリアス州通販会社：近代化・堅牢設計 v2.0
   ========================================================================== */

:root {
    /* 伝統の色彩を厳密に継承 */
    --primary-blue: #0172AB;
    --header-bg-blue: #e0eef8;
    --text-main: #333333;
    --border-color: #dddddd;
    --bg-white: #ffffff;
    --sidebar-bg: #f9f9f9;
    
    /* 1000px拡張レイアウト */
    --site-max-width: 1000px;
    --sidebar-width: 240px;
}




/* ======== RESET & BASE ======== */
* { box-sizing: border-box; }
html { overflow-y: scroll; }
body {
    margin: 0; padding: 0;
    line-height: 1.8;
    letter-spacing: 0.03em;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 15px; /* 近代的な読みやすさ */
    color: var(--text-main);
    background: #e5e5e5; /* 外側の背景 */
}

/* ======== BASIC (リンクの視認性向上) ======== */

/* リンクの基本色：本文よりわずかに青み、または明度を変えて「押せる」ことを示唆 */
a {
    color: var(--primary-blue); /* 伝統の青を基本色にする場合 */
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

/* サイドバーなどのリスト内のリンクは、あえて黒にしておき、ホバーで青くする伝統スタイルを再現する場合 */
#sub a {
    color: var(--text-main);
}

/* ホバー時の挙動を統一 */
a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
    opacity: 0.8;
}

/* 強調したいリンク（本文中のstrong内など） */
#main strong a {
    color: var(--primary-blue);
    font-weight: bold;
}

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

/* ======== LAYOUT STRUCTURE ======== */
#top {
    max-width: var(--site-max-width);
    margin: 0 auto;
    background: var(--bg-white);
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 浮き上がりによる威厳の演出 */
}

#header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-color);
}

#header h1 {
    font-size: 12px;
    font-weight: normal;
    color: #666;
    margin: 0 0 15px 0;
}

/* ヘッダー内の共通スタイル */
.site-title {
    font-size: 13px;
    font-weight: normal;
    margin: 10px 0;
}



/* H1: ページの最上位見出し（近代化の主役） */
#main h1.entry-title {
    font-size: 24px;
    color: var(--primary-blue);
    padding: 0 0 15px 0;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--primary-blue); /* 太い線でページ主題を強調 */
    position: relative;
}

.logo-link {
    display: inline-block;
    transition: opacity 0.2s;
}
.logo-link:hover { opacity: 0.8; }

/* 2カラム・近代化Flexbox */
#contents {
    display: flex;
    min-height: 600px;
}

#sub {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: 30px 20px;
}

#main {
    flex: 1;
    padding: 40px;
    min-width: 0;
}

/* ======== COMPONENTS (威厳の再現) ======== */

/* サイドバー・ナビゲーション */
.section { margin-bottom: 30px; }

.section h2 {
    background: var(--header-bg-blue);
    color: var(--primary-blue);
    padding: 10px 15px;
    font-size: 14px;
    border-top: 2px solid var(--primary-blue);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
    font-weight: bold;
}

.section ul { list-style: none; padding: 0; margin: 0; }
.section li {
    border-bottom: 1px solid #ececec;
}
.section li a {
    display: block;
    padding: 8px 5px;
    font-size: 13px;
}
.section li a::before {
    content: "▶";
    font-size: 10px;
    margin-right: 8px;
    color: var(--primary-blue);
}

/* メインコンテンツ */
.icatch { margin-bottom: 35px; /* border: 1px solid var(--border-color); */ }

/* H2: セクション見出し（伝統的な青の質感を継承） */
#main h2 {
    font-size: 19px;
    color: var(--text-main);
    background: linear-gradient(to right, var(--header-bg-blue), transparent); /* 左から淡い青のグラデーション */
    padding: 10px 15px;
    border-left: 6px solid var(--primary-blue); /* 左の縦棒で威厳を出す */
    margin: 40px 0 20px 0;
    clear: both;
}

/* H3: 項目の見出し（スッキリとした近代的な装飾） */
#main h3 {
    font-size: 17px;
    color: var(--text-main);
    padding-left: 10px;
    border-bottom: 1px solid var(--border-color);
    margin: 30px 0 15px 0;
    padding-bottom: 5px;
}

/* 本文テキストの調整：見出しとの間隔 */
#main p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

/* 追加：テーブルの近代化再現 */
#main table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

#main table th {
    background-color: var(--header-bg-blue);
    border: 1px solid var(--border-color);
    padding: 10px;
    font-size: 14px;
    text-align: left;
}

#main table td {
    border: 1px solid var(--border-color);
    padding: 10px;
    font-size: 14px;
}

/* ======== FOOTER 近代化修正 ======== */
#footer {
    background-color: #f4f9ff;      /* 非常に淡いブルーで軽やかさを演出 */
    color: var(--text-main);        /* テキストは黒ではなく共通の濃いグレー */
    text-align: center;
    padding: 30px 20px;
    font-size: 11px;
    border-top: 1px solid var(--primary-blue); /* 細いブルーの線で区切る */
    margin-top: 0;                  /* コンテンツとの隙間を埋めて一体化 */
}

#footer address {
    font-style: normal;
    letter-spacing: 0.1em;
}
/* ======== RESPONSIVE (スマホ最適化) ======== */
@media (max-width: 850px) {
    #contents { flex-direction: column; }
    #sub {
        width: 100%;
        border-right: none;
        padding: 20px;
        order: 2;
    }
    #main {
        padding: 25px 20px;
        order: 1;
    }
    #header { padding: 15px 20px; text-align: center; }
    #header h1 { text-align: left; }
}