@charset "utf-8";

/* --- 公式サイトリンク専用のスタイリング --- */

/* リンクカード全体を囲むコンテナ */
.official-links-container {
    display: grid;
    /* 中の要素をグリッド状に配置 */
    /* 画面幅に応じて、最小280pxのカードを可能な限り横に並べる */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    /* カード間の隙間 */
    margin-top: 1.5rem;
}

/* リンクカード個別のスタイル */
.official-link-card {
    display: block;
    /* aタグをブロック要素として扱う */
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 5px solid var(--orange);
    /* 左側のアクセントボーダー */
    text-decoration: none;
    transition: all 0.3s ease;
    /* アニメーションを滑らかに */
}

/* リンクカードにマウスを乗せた時のスタイル */
.official-link-card:hover {
    transform: translateY(-5px);
    /* 少し上に浮き上がる */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    /* 影を濃くする */
    border-left-color: var(--bright-orange);
    /* アクセントボーダーの色を濃くする */
}

/* リンクカード内のタイトル（太字）のスタイル */
.official-link-card strong {
    display: block;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--bs-black);
}

.official-link-card:hover strong {
    color: var(--orange);
}

/* リンクカード内の説明文のスタイル */
.official-link-card span {
    font-size: 0.9em;
    color: #6c757d;
}