#sitemap {
    padding: 13em 0 7em;
}

.footer-sitemap {
    box-sizing: border-box;
}
.footer-sitemap * {
    box-sizing: border-box;
}
.sitemap-inner {
    max-width: 1100px;
    margin: 50px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.sitemap-col {
    display: flex;
    flex-direction: column;
}
.col-header {
    text-align: center;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 25px;
}
.col-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background-color: #d9d9d9; 
}
.col-header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    gap: 30px;
}
.arrow-right {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 3.5px solid #004EA2;
    border-right: 3.5px solid #004EA2;
    transform: rotate(45deg);
    margin-bottom: -3px;
}
.col-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: fit-content;
}
.col-list li {
    margin-bottom: 18px;
}
.col-list > li > a {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    transition: opacity 0.2s;
}

.col-list a:hover {
    opacity: 0.7;
}

/* 丸付き矢印アイコン */
.icon-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border: 2.5px solid #0056b3;
    border-radius: 50%;
    margin-right: 18px;
    flex-shrink: 0;
}
.icon-circle::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2.5px solid #004EA2;
    border-right: 2.5px solid #004EA2;
    transform: rotate(45deg);
    margin-left: -2px;
}

.sub-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 40px; /* 親のアイコン幅に合わせてインデント */
}
.sub-list li {
    margin-bottom: 12px;
}
.sub-list a {
    display: block;
    color: #333;
    font-size: 13px;
    text-decoration: none;
}
.sub-list a::before {
    content: "ー";
    margin-right: 8px;
    color: #333;
}
.col-list.no-icon > li > a {
    padding-left: 0;
    display: block;
}

/* 青い線 */
/* --- リンク共通：線の基準位置と余白の設定 --- */
.col-header a,
.col-list li a {
    display: inline-flex; /* 内容の幅に合わせる */
    align-items: center;
    text-decoration: none;
    transition: color 0.3s ease;
}
/* --- 文字部分（span）の設定：ここに線の基準を作る --- */
.col-header a span:not(.arrow-right),
.col-list li a span:not(.icon-circle) {
    position: relative;
    padding-bottom: 3px; /* 文字と線の隙間 */
}
/* --- 青い線の設定（対象を span::after に変更） --- */
.col-header a span:not(.arrow-right)::after,
.col-list li a span:not(.icon-circle)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;    /* 最初は幅 0 */
    height: 3px;
    background-color: #004EA2;
    transition: width 0.3s ease-in-out;
}
/* --- ホバー時に span の下線を伸ばす --- */
.col-header a:hover span:not(.arrow-right)::after,
.col-list li a:hover span:not(.icon-circle)::after {
    width: 100%; /* span（＝文字）の幅いっぱいまで伸びる */
}
/* 透明度の干渉を無効化 */
.col-list a:hover {
    opacity: 1;
}
/* 青い線 */


/* レスポンシブ */
@media screen and (max-width: 992px) {
    .sitemap-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
    }
}

@media screen and (max-width: 576px) {
    .sitemap-inner {
    grid-template-columns: 1fr;
    gap: 50px;
    }
    .col-header::after {
    width: 60%; /* スマホでは下線を少し短めに */
    }
}