/* -------- リセットcss -------- */
body,
header,
menu,
section,
div
{
    margin: 0;
    padding: 0;
    display: block;
    background-color: rgb(250, 228, 239);
}
/* ヘッダー */
.header{
    background-color: rgb(145, 142, 142);
    width: 500px;
    margin: 0 auto 0 auto;/* センタリング　*/
}
    
/* ヘッダー画像　*/    
.header img{
    width: 500px;
    display: block;
}
/* メニュー */
menu{

    background-color: rgb(202, 202, 202);
}
.menu{
    gap: 10px;
    background-color: rgb(211, 209, 210);
    width: 500px;
    margin: 0 auto 0 auto;/* センタリング　*/
    display: flex;        /* 追加：子要素（ボタン）を横並びにする */
    list-style: none;      /* ドットを消します */
}

.menu a{
    display: block;
    background-color: rgb(255, 255, 255);
    color: #e0bccd;
    text-decoration: none;
    padding: 2%;
    transition-duration: 0.3s;
    flex: 1;              /* 追加：ボタンを均等に横幅いっぱいに広げる */
    
    aspect-ratio: 1/1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu a:hover{
    background-color: rgb(236, 236, 236);
    transition-duration: 0.3s;
}

/* コンテンツ部分　*/
.content-section{
    background-color: #f7dce9;
}
.content{
    background-color: rgb(252, 238, 245);
    width:  500px;
    margin: 0 auto 0 auto; /* センタリング */
    padding:  10px;
    box-sizing: border-box;
}

/* お品書き画像　*/
.content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.honmon{
    background-color: rgb(70, 65, 68);
    padding: 15px;
    border-radius: 8px;
    color: rgb(233, 208, 215);
}
/* トップ画像　*/    
.top img{
    width: 480px;
    display: block;
}

/* 立ち絵画像　*/    
.page01 img{
    width: 300px;
    display: block;
}

/* 動画埋め込み（レスポンシブ） */
.video iframe{
    width: 100%;
    max-width: 400px;
    aspect-ratio: 16/9;
    display: block;
    margin: 10px auto;
    border: 0;
}

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