.div_main{
    margin-top:20px;
}

.tag-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* タイル間のスペース */
    margin-bottom:4em;
}

.tag-tile {
    display: inline-block; /* aタグをインラインブロックに変更して、可変幅を実現 */
    background-color: #2d2d2d; /* タイルの背景色 */
    padding: 1em 2em; /* 上下1em、左右2emの余白 */
    border-radius: 8px; 
    text-align: center;
    text-decoration: none; /* aタグの下線を削除 */
    transition: background-color 0.3s ease; /* 背景色の変化をスムーズに */
}

.tag-tile div {
    color: white; /* タイル内のテキストカラー */
}

.tag-tile:hover {
    background-color: black;
    opacity:1;
}

.tag-tile:hover div {
    color:rgb(29, 155, 240);
    text-decoration: underline;
}


/*  SNS   */
.top-SNS {
    margin-bottom: 4em;
    width: 100%; /* 幅を100%に設定 */
}

.top-snsicon {
    display: flex;
    justify-content: left;
    max-width: 1000px; 
    padding:0 1em;
    gap: 1em;
    flex-wrap: wrap;
}

.top-snsicon a {
    font-size: 3em; /* デフォルトのフォントサイズ */
    text-decoration: none; /* 下線を削除 */
    display: flex; /* 内部要素をフレックスボックスに */
    justify-content: center; /* アイコンを中央に配置 */
    align-items: center; /* アイコンを垂直方向に中央揃え */
    color:#2d2d2d;
}

.top-snsicon a ::before{
    color:#2d2d2d;
}

@media only screen and (min-width: 700px) {
    .top-snsicon a {
        font-size: 4em; /* 大きい画面でのフォントサイズ */
    }
    .top-snsicon{
        gap: 2em;
    }
}

@media only screen and (max-width: 500px) {
    .top-snsicon a {
        font-size: 2em; /* 小さい画面でのフォントサイズ */
    }
}

/*外部リンク*/
.outlink{
    margin-top: 2em;
}

.outlink ul{
    padding-left: 2em;
}

.outlink li{
    list-style-position: inside;
    text-indent: -1em;
    margin-bottom: 0.5em;
}