/* ------------------------------
   全体コンテナ
--------------------------------*/
.link-content {
    max-width: 960px;   /* 大きい画面では中央寄せ */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
}

/* 見出し */
.caption {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

/* リンクリストの基本 */
ul.link-ken,
ul.link-ren,
ul.link-resq,
ul.link-weat,
ul.link-map,
ul.link-shop {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* リンク間のスペース */
}

ul.link-ken li,
ul.link-ren li,
ul.link-resq li,
ul.link-weat li,
ul.link-map li,
ul.link-shop li {
    background-color: #f7f7f7;
    padding: 8px 12px;
    border-radius: 4px;
    flex: 1 1 150px; /* 最小幅150pxで自動折返し */
    box-sizing: border-box;
    text-align: center;
}

ul.link-ken li a,
ul.link-ren li a,
ul.link-resq li a,
ul.link-weat li a,
ul.link-map li a,
ul.link-shop li a {
    text-decoration: none;
    /*color: #333;*/
    color:#0055cc;
    font-size: 14px;
    display: block;
    word-break: break-word; /* 長い文字列も折り返す */
}

/* 長いリンクに特別なクラスを付けている場合 */
li.long1, li.long2 {
    flex: 1 1 100%; /* 横幅いっぱいに */
}

/* clearfix */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* ------------------------------
   モバイル対応
--------------------------------*/
@media screen and (max-width: 767px) {
    ul.link-ken,
    ul.link-ren,
    ul.link-resq,
    ul.link-weat,
    ul.link-map,
    ul.link-shop {
        flex-direction: column; /* 縦並びに */
        gap: 8px;
    }

    ul.link-ken li,
    ul.link-ren li,
    ul.link-resq li,
    ul.link-weat li,
    ul.link-map li,
    ul.link-shop li {
        flex: 1 1 100%;
        text-align: left; /* モバイルでは左寄せ */
    }

    li.long1, li.long2 {
        flex: 1 1 100%;
    }
}