/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* HTMLの body タグにあったスタイルをこちらに移行 */
body {
    background-color: #f1f4fb; /* bgcolor="#f1f4fb" に相当 */
    color: #272C39;           /* text="#272C39" に相当 */
    font-family: Verdana, sans-serif;
    /* デフォルトで上部のマージンをリセットすると見栄えが良くなります */
    margin: 0; 
    padding: 20px;
}

/* サイト全体を中央に配置するスタイル */
.container {
    /* サイトのコンテンツが表示される最大の幅を指定 */
    width: 800px; 
    
    /* 左右のマージンを自動設定して、要素を中央に配置 */
    margin-left: auto;
    margin-right: auto;
    
/* バナーギャラリー用のスタイル */
/* ------------------------------------- */
.banner-gallery {
    /* Flexboxを使って、子要素（バナーの<a>タグ）を横に並べる */
    display: flex;
    
    /* バナーが多すぎて1行に収まらない場合、次の行に折り返す */
    flex-wrap: wrap; 
    
    /* 横並びにしたバナーの全体を、containerの中で中央に寄せる */
    justify-content: center;
    
    /* バナー同士の間に隙間を作る（任意） */
    gap: 10px; 
    
    /* オプション: 上下に少し余白を追加して見やすくする */
    padding: 20px 0;

}