body {
    font-family: 'Arial', sans-serif;
    background-color: #FFEDB3;
    /* 木目調 */
    /* background:
        linear-gradient(
            90deg,
            rgba(248, 177, 102, 0.6),
            rgba(222, 164, 90, 0.6) 60%,
            rgba(248, 177, 102, 0.6)
        ),
        repeating-radial-gradient(
            ellipse at 60% 500%,
            #cca666,
            #cca666 0.2%,
            #dfb382 0.6%,
            #dfb382 1%
        );
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); */
}
.header {
    background-color: #ff6347;
    padding: 0;
    text-align: center;
    color: white;
    position: relative;
}


/* 背景画像を設定するdiv */
.header-background {
    background-size: cover; /* 画像を画面幅に合わせて拡大縮小 */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    width: 100%;
    height: 50vh; /* 高さをビューポート高さの50%に */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}
/* 背景画像が読み込まれない場合に表示するキャプションのスタイル */
.no-bg-caption {
    display: none; /* 画像が表示されている間は非表示 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    padding: 20px;
    border-radius: 5px;
}

/* navMenuに上下の余白を追加 */
#navMenu, .info-text {
    flex-grow: 1;
    padding-top: 10px;   /* 上部の余白 */
    margin-bottom: 15px; /* 下部の余白 */
}
div.row > span.info-text {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

div.container h2 {
    background-color: #800000;
    color: #DDDDDD;
    font-family: "Yuji Syuku", serif;
    font-weight: 400;
    font-style: normal;
}
.menu-item {
    margin-bottom: 30px;
}
.menu-links a {
    margin: 10px 0;          /* リンク間に上下の余白を追加 */
}
.text-white {
    font-size: 1.2rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}
.section-outline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 90vw;
}
.section, .info-section, .hours-section {
    padding: 40px;
    max-width: 90vw;
    font-size: 1.1rem;
}
/* メニュー画像のサイズを可変に設定 */
.menu-image {
    max-width: 80vw; /* 画面幅の80% */
    border: 1px solid #111;
    margin-top: auto;
    margin-bottom: 15px;
}

/* セクションの見出し画像のサイズを可変に設定 */
.section-image {
    width: 30vw; /* 画面幅の30% */
    object-fit: cover;
    margin: auto;
    margin-bottom: 15px;
}

.item-column {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 3/2;
}
.item-container {
    display: flex;
    justify-content: center;
}

/* 補足説明・注釈のfont-sizeを少し小さくします */
.flavor-text {
    font-size:0.8em;
    margin-bottom: 0.5rem;
}


.footer {
    background-color: #343a40;
    color: white;
    padding: 10px 0;
    text-align: center;
    display: flex;
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: flex-start; /* テキストを左寄せに */
}
/* SNSアイコンのスタイル */
.social-icons {
    display: flex;
    margin-right: 15px; /* アイコンとテキストの間に余白を追加 */
}

.social-icons a {
    margin-right: 10px; /* アイコン間の余白 */
}

.social-icon {
    width: 2em; /* アイコンの大きさをテキストの2倍に設定 */
    height: auto;
}

.social-icons a:hover .social-icon {
    opacity: 0.7; /* ホバー時のスタイル変更 (例: 少し透明にする) */
}
/* headerText,footerTextに左右の余白を追加 */
#headerText, #footerText {
    text-align: center;
    margin-left: auto;   /* 左部の余白 */
    margin-right: auto; /* 右部の余白 */
}

/* スマホなどの小さな画面向けの調整 */
@media (max-width: 768px) {
    .header-background {
        height: 30vh; /* 小さな画面では高さを少し小さく */
    }
    .no-bg-caption {
        font-size: 1rem; /* 小さな画面では注釈の文字サイズを縮小 */
    }
    /* セクションの見出し画像のサイズを可変に設定 */
    .section-image {
        width: 70vw; /* 画面幅の70% */
    }
    /* item-container内の画像付きitemが幅が狭い画面では縦並びになるので間隔をあけます */
    .item-column {
        margin-bottom: 4rem;
    }
    /* SNS iconを縦並び */
    #headerBottom .social-icons {
        flex-direction: column;
    }
}

/* 画面幅が広い場合 (769px以上) */
@media (min-width: 769px) {

    .store-infomation {
        column-count: 2;
        display: flex !important;
        padding: 5% 5% 20px 5%;
    }

    .menu-image {
        align-self: center;
        height: max(500px, 100%, 40vh);
        width: 100%;
        max-width: 35vw;
        max-height: 40vh;
        object-fit: cover; /* width, heightといっしょに使います */
    }
    .item-column {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        aspect-ratio: 3/2;
    }
}