@charset "utf-8";
/* CSS Document */
/* =========================================
   サイトマップ全体の設定
========================================= */
.sitemap-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}

.sitemap-title {
    text-align: center;
    font-size: 28px;
    color: #333;
    margin-bottom: 50px;
}

/* =========================================
   大項目のグリッドレイアウト（スマホベース）
========================================= */
.sitemap-tree-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 40px;
}

/* 大項目の見出し */
.sitemap-heading {
    font-size: 20px;
    border-bottom: 2px solid #3182ce; /* アース様の青い下線 */
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.sitemap-heading a {
    color: #3182ce;
    text-decoration: none;
    font-weight: bold;
}

/* =========================================
   ツリー構造（階層リスト）のデザイン
========================================= */
.tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 第2階層以降は左に余白を取り、左端に縦の点線を引く */
.tree-list .tree-list {
    margin-top: 10px;
    margin-left: 12px; /* 枝分かれの深さ */
    padding-left: 20px;
    border-left: 1px dashed #cbd5e1; /* 縦のガイドライン */
}

.tree-list li {
    position: relative;
    margin-bottom: 15px;
}

.tree-list li:last-child {
    margin-bottom: 0; /* 一番下の余白を消す */
}

/* 第2階層以降のアイテムに繋がる「横の点線」を描画 */
.tree-list .tree-list li::before {
    content: "";
    position: absolute;
    top: 12px; /* テキストの真ん中あたりに線を引く */
    left: -20px; /* 縦線から伸びるように配置 */
    width: 15px;
    border-top: 1px dashed #cbd5e1;
}

/* リンクテキストの設定（スマホでタップしやすいように調整） */
.tree-list a {
    color: #333;
    text-decoration: none;
    font-size: 15px;
    display: inline-block;
    transition: color 0.3s ease;
}

.tree-list a:hover {
    color: #3182ce;
    text-decoration: underline; /* ホバーで下線を表示 */
}

/* =========================================
   PC画面用レイアウト（768px以上）
========================================= */
@media (min-width: 768px) {
    .sitemap-tree-grid {
        /* PC画面では2列（項目が多い場合は 3 に変更してください） */
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 40px; /* 上下の隙間60px、左右の隙間40px */
    }
}