/* -------- リセットCSS -------- */
body,
menu,
div{
    margin: 0;
    padding: 0;
    display: block;
    box-sizing: border-box;
}
/* ボディー */
body{
    background-color: rgb(251, 203, 255);
}
/* ヘッダー */
header{
    background-color: rgb(251, 203, 255);
}
.header{
    background-color: rgb(251, 203, 255);
    width: 500px;
    height: 100px;
    overflow: hidden;
    margin: 0 auto 0 auto;/* センタリング */
}
/* ヘッダー画像 */
.header img{
    width: 500px;
    display: block;
}


/* メニュー */
menu{
    background-color: rgb(222, 150, 255);
}
.menu{
    background-color: rgb(251, 203, 255);
    width: 500px;
    margin: 0 auto 0 auto;/* センタリング */
    display: flex;        /* 追加：子要素（ボタン）を横並びにする */
}
.menu a{
    display: block;
    background-color: #d877ff;
    color: white;
    text-decoration: none;
    padding: 8px;
    transition-duration: 0.3s;
    flex: 1;              /* 追加：ボタンを均等に横幅いっぱいに広げる */
    text-align: center;   /* 追加：広がったボタンの中で文字を中央揃えにする */
}
.menu a:hover{
    background-color: rgb(222, 150, 255);
    transition-duration: 0.3s;
}

.menu .button-on{
    background-color: rgb(201, 0, 252);
}

/* コンテンツ */
.content-section{
    background-color: rgb(248, 192, 253);
}
.content{
    background-color: rgb(226, 152, 248);
    width: 600px;
    margin: 0 auto 0 auto;/* センタリング */
    padding: 20px;
}
.honmon{
    background-color: antiquewhite;
    padding: 20px;
    border-radius: 10px;
    color: rgb(0, 0, 0);
}

/* デザイナータグ */
.mt0{
    margin-top: 0;
}