@charset  "utf-8" ;

/* ====================================================
(親)"content-area"------(子)"content-box"--"explain-box" 
=======================================================*/

.content-area{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-box{
    text-align: center;
    width: 60%;
    margin: 0 auto 40px; /* 上下0、左右auto（中央寄せ） */
}

/* 1. content-box を flexbox 化して隙間（gap）を作る */
.banner-box .content-box { /* スペースを開けることで「親と子」の関係になります */
    display: flex;
    flex-direction: column;
    align-items: center;  /* 画像を中央寄せ */
    gap: 16px;             /* 2枚のバナーの間の隙間 */  

}

/* 2. 画像が本来のサイズ以上に巨大化するのを防ぐ */
/* 親のcontent-areaがmax-width: 800pxのため */
.content-box img {
    max-width: 100%;       /* スマホなど画面が狭いときは画面幅に合わせて縮小 */
    width: auto;           /* 元画像より不必要に巨大化させない */
    height: auto;
}

/* otherworks.htmlのh2のみ変更したい */
section h2 {
  
  letter-spacing:0.1em;
}