/* サイトツリー全体のコンテナ設定 */
.sitemap-container {
    background-color: rgb(59, 59, 59);
    
    /* 上のメインコンテンツと横幅を合わせる */
    max-width: 1980px;
    margin: 0 auto; /* 中央揃え */
    
    /* 上のメインコンテンツと左右の余白を合わせる */
    padding: 0 20px 20px 20px;

    /* 親要素の角の丸みに合わせる */
    border-radius: 0 0 4px 4px;

    text-align: center; /* 中の要素を中央に揃える */

    font-family: sans-serif;
}

/* ツリーの基本設定: リストの点やデフォルトの余白をリセット */
.sitemap-tree,
.sitemap-tree ul,
.sitemap-tree li {
    display: inline-block; /* 横幅をコンテンツに合わせ、中央揃えを可能にする */
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative; /* 線の位置を決めるための基準点 */
}

/* リンクブロック(頂点)のスタイル */
.sitemap-tree a {
    display: inline-block;
    padding: 8px 15px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
    z-index: 1; /* 線がブロックの背後に描画されるように設定 */
}

.sitemap-tree a:hover {
    background-color: #e9e9e9;
    border-color: #aaa;
    color: #000;
}

/* ▼【新規追加】各ブロックの下に伸びる短い縦線 */
.sitemap-tree li:has(ul) > a:after {
    content: '';
    position: absolute;
    bottom: -20px; /* ブロックの下に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    border-left: 1px solid #ccc;
    height: 20px; /* 線の長さ */
}
/* 根(ホーム)の下には不要なので消す *
.sitemap-tree > li > a:after {
    display: none;
} */


/* --- レイアウトと線の設定 --- */

/* 各頂点(li)の配置設定 */
.sitemap-tree li {
    display: inline-block;
    text-align: center;
    padding: 20px 5px 0 5px;
}

/* 子要素のリスト(ul)を横並び(Flexbox)にし、親ブロックの下に配置 */
.sitemap-tree ul {
    display: flex;
    justify-content: center;
    /* ▼【変更】親ブロックとの間にスペースを空ける */
    margin-top: 20px;
}


/* 縦の接続線 (各頂点ブロックの上方向へ伸びる線) */
.sitemap-tree li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid #ccc;
    width: 0;
    height: 20px;
}

/* 横の接続線 (兄弟要素間を繋ぐ線) */
.sitemap-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 1px solid #ccc;
    width: 100%;
}


/* --- 不要な線を消すための調整 --- */

/* ツリーの根(ホーム)の上には線は不要 */
.sitemap-tree > li::before,
.sitemap-tree > li::after {
    display: none;
}

/* 兄弟がいない頂点(一人っ子)の場合、横線は不要 */
.sitemap-tree li:only-child::after {
    display: none;
}

/* 横線の両端を調整して、はみ出さないようにする */
.sitemap-tree li:first-child::after {
    left: 50%;
    width: 50%;
}

.sitemap-tree li:last-child::after {
    left: 0;
    width: 50%;
}