/* 全体スタイル */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

/* ヘッダーのスタイル */
header {
    background-color: #ddaf00;
    display: flex;
    flex-wrap: wrap; /* スマホでの折り返し対応 */
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 新しいロゴのスタイル */
.top-logo {
    background-color: #fff; /* 背景色を白に設定 */
    padding: 10px; /* 内側の余白を追加 */
    display: inline-block; /* ロゴを囲む背景をロゴのサイズに合わせる */
    border-radius: 5px; /* 背景を少し丸くする */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.top-logo img {
    max-width: 150px; /* ロゴの幅を調整 */
    height: auto; /* アスペクト比を維持 */
}



/* ナビゲーションメニューのスタイル */
nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* スマホでの折り返し対応 */
    gap: 20px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center; /* スマホでも中央揃え */
}

nav ul li {
    position: relative;
    padding: 0 20px;
}

nav ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background-color: rgba(255, 255, 255, 0.5);
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav a:hover {
    color: rgba(0, 0, 0, 0.8);
}

/* メインビジュアルのスタイル */
.hero {
    position: relative;
    text-align: center;
    color: white;
    height: 100vh; /* 高さを画面いっぱいに設定 */
    overflow: hidden;
    margin-bottom: 0; /* 下余白をリセット */
    padding-bottom: 0; /* 不要なパディングをリセット */
}

.hero img {
    width: 100%;
    height: auto;
}
/* 営業時間セクションのスタイル */
#info {
    padding: 20px 20px; /* 必要最低限のパディング */
    margin-top: 0; /* 上余白をリセット */
}
/* #infoセクション全体 */
#info {
    padding: 40px 20px;
    background: linear-gradient(135deg, #ffe9a9, #ddaf00);
    text-align: center;
    border-radius: 15px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    max-width: 800px;
    margin: -20px auto 20px; /* 上マージンをさらに減少 */
}


/* テキストコンテナ */
.info-text {
    background: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* 見出しスタイル */
.info-text h2 {
    font-size: 32px;
    font-weight: bold;
    color: #ddaf00;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

/* 営業時間リスト */
.hours {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    text-align: center;
    line-height: 1.8;
}

/* 各リスト項目 */
.hours li {
    margin-bottom: 10px;
}

/* Googleマップリンク */
.map-link {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    background-color: #ddaf00;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.map-link:hover {
    background-color: #fff;
    color: #ddaf00;
    transform: scale(1.05);
}
/* メニューセクション */
#menu {
    padding: 40px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

#menu h2 {
    font-size: 28px;
    color: #ddaf00;
    margin-bottom: 30px;
    font-weight: bold;
}

/* メニューリスト全体 */
.menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* リストを中央揃え */
    padding: 20px 0;
}

/* メニューアイテム */
.menu-item {
    position: relative; /* 要素を相対位置に */
    width: calc(33% - 20px); /* 幅を調整（3列表示、隙間込み） */
    max-width: 300px;
    background: linear-gradient(135deg, #fff, #f9f9f9); /* 背景に軽いグラデーション */
    border-radius: 15px; /* 枠を丸く */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* 影を追加 */
    overflow: hidden; /* 枠からはみ出した部分を隠す */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
    text-align: center; /* テキストを中央揃え */
    padding-bottom: 20px; /* 下部余白 */
}

/* メニューアイテムホバー時 */
.menu-item:hover {
    transform: translateY(-10px) scale(1.02); /* 浮き上がりと拡大 */
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.3); /* 影を強調 */
}

/* メニュー画像 */
.menu-item img {
    width: 100%; /* 幅を枠内に収める */
    height: auto; /* アスペクト比を維持 */
    border-bottom: 4px solid #ddaf00; /* 下部にアクセント */
    object-fit: cover; /* 枠に合わせて画像を調整 */
}

/* メニュー名 */
.menu-item h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 15px 0 5px;
    transition: color 0.3s ease; /* 色変更のアニメーション */
}

/* メニュー名ホバー時 */
.menu-item:hover h3 {
    color: #ddaf00; /* ゴールドに変更 */
}

/* メニュー価格 */
.menu-item p {
    font-size: 16px;
    color: #555;
    font-weight: bold;
    margin: 0;
    transition: color 0.3s ease;
}

/* 価格ホバー時 */
.menu-item:hover p {
    color: #333; /* 色を濃く変更 */
}

/* メニューの周囲のエフェクト */
.menu-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(221, 175, 0, 0.2), rgba(255, 255, 255, 0));
    z-index: 0;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.menu-item:hover::before {
    opacity: 1; /* ホバー時に光るような効果を追加 */
}
/* 動画セクション */
#video {
    padding: 40px 20px; /* 上下左右の余白 */
    background: linear-gradient(135deg, #f9f9f9, #ffe9a9); /* グラデーション背景 */
    text-align: center; /* 中央揃え */
    border-radius: 15px; /* 角を丸く */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
    margin: 40px auto; /* 上下余白 */
    max-width: 900px; /* セクションの最大幅 */
}

/* 見出しのスタイル */
#video h2 {
    font-size: 28px; /* 見出しのフォントサイズ */
    color: #ddaf00; /* ゴールドカラー */
    font-weight: bold; /* 太字 */
    margin-bottom: 20px; /* 下余白 */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* 見出しに影を追加 */
}

/* 動画フレームのスタイル */
.video-frame {
    position: relative; /* 親要素の位置を相対的に */
    width: 100%; /* 幅を全体に広げる */
    max-width: 800px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央揃え */
    padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
    background: linear-gradient(135deg, #ddaf00, #ffea85); /* グラデーション背景 */
    border: 5px solid #ddaf00; /* 縁を追加 */
    border-radius: 15px; /* 角を丸く */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* ボックスシャドウ */
    overflow: hidden; /* はみ出しを隠す */
}

/* 動画iframeのスタイル */
.video-frame iframe {
    position: absolute; /* 親要素に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%; /* 幅を全体に広げる */
    height: 100%; /* 高さを全体に広げる */
    border: none; /* 枠線を削除 */
    border-radius: 10px; /* 角を少し丸くする */
}
/* こだわりセクションのスタイル */
#about {
    background-image: url("Photo/DSC06743.JPG"); /* 背景画像を指定 */
    background-size: cover; /* セクション全体に背景を広げる */
    background-position: center; /* 背景画像を中央に配置 */
    background-attachment: fixed; /* スクロール時に背景を固定 */
    padding: 50px 20px; /* 上下左右の余白 */
    text-align: center; /* セクション全体の中央揃え */
    color: white; /* テキスト色を白に設定 */
    position: relative; /* 子要素の相対配置を有効化 */
}

/* テキストのデザイン */
#about h2 {
    font-size: 32px; /* 見出しのフォントサイズ */
    font-weight: bold; /* 太字で目立たせる */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* 見出しに影を追加 */
    margin-bottom: 20px; /* 下余白 */
    font-family: "Hiragino Mincho Pro", "Yu Mincho", serif; /* 行書体フォント */
}

#about p {
    font-family: "Hiragino Mincho Pro", "Yu Mincho", serif; /* 行書体フォント */
    font-size: 20px; /* 段落のフォントサイズ */
    line-height: 1.8; /* 行間を調整して読みやすく */
    color: white; /* テキスト色を白に設定 */
    background-color: rgba(0, 0, 0, 0.6); /* 薄い黒の半透明背景 */
    padding: 20px; /* テキストの周囲に余白を設定 */
    border-radius: 10px; /* 背景を丸みのあるデザインに */
    display: inline-block; /* テキスト背景をテキストの幅に合わせる */
    max-width: 800px; /* テキストブロックの最大幅を設定 */
    margin: 20px auto; /* セクション中央に配置 */
    text-align: center; /* テキストを中央揃え */
}


/* 背景の暗いオーバーレイを追加 */
#about::before {
    content: ""; /* 擬似要素を使用 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
    z-index: 1; /* テキストより後ろに配置 */
    border-radius: 15px; /* オーバーレイも角を丸くする */
}

/* テキスト全体 */
#about > * {
    position: relative; /* テキストをオーバーレイの上に配置 */
    z-index: 2; /* オーバーレイの上に表示 */
}

/* 見出しスタイル */
#about h2 {
    font-size: 28px; /* 見出しのフォントサイズ */
    font-weight: bold; /* 太字 */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* テキストに影を追加 */
    margin-bottom: 20px; /* 見出しの下余白 */
}

/* 段落スタイル */
#about p {
    font-size: 18px; /* フォントサイズ */
    line-height: 1.8; /* 行間を調整 */
    margin: 0 auto; /* 中央揃え */
    max-width: 800px; /* 最大幅を設定 */
    padding: 20px; /* 内側の余白 */
    background-color: rgba(255, 255, 255, 0.2); /* 半透明の白背景 */
    border-radius: 10px; /* 角を丸くする */
    color: #fff; /* テキスト色を白に設定 */
}

/* アクセスセクション */
#access {
    padding: 40px 20px; /* 内側の余白 */
    background: linear-gradient(135deg, #ddaf00, #f9f9f9); /* グラデーション背景 */
    border-radius: 15px; /* 角を丸くする */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* 影を追加 */
    text-align: center; /* 中央揃え */
    margin-bottom: 40px; /* セクション間の余白 */
}

#access h2 {
    font-size: 28px; /* 見出しのフォントサイズ */
    color: #333; /* テキスト色 */
    margin-bottom: 20px; /* 見出しの下余白 */
    font-weight: bold; /* 太字に設定 */
    text-transform: uppercase; /* 大文字化 */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* テキストに影を追加 */
}

/* アクセス内のiframeスタイル */
#access iframe {
    width: 100%; /* 横幅を全体に広げる */
    height: 400px; /* 高さを設定 */
    border-radius: 15px; /* 角を丸くする */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* iframeに影を追加 */
    border: 5px solid rgba(255, 255, 255, 0.7); /* 白い枠線を追加 */
}

/* SNSセクション */
#sns {
    padding: 40px 20px; /* セクション内の余白 */
    background: linear-gradient(135deg, #fffae5, #ffe4b2); /* 柔らかいグラデーション背景 */
    border-radius: 15px; /* 角を丸くする */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* セクションに影を追加 */
    margin: 40px auto; /* 上下に余白を設けて中央揃え */
    max-width: 1200px; /* 最大幅を設定 */
    text-align: center; /* 全体の中央揃え */
}

/* 見出しスタイル */
#sns h2 {
    font-size: 28px; /* 見出しのフォントサイズ */
    font-weight: bold; /* 太字 */
    color: #ddaf00; /* ゴールドカラー */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* 見出しに影を追加 */
    margin-bottom: 20px; /* 見出しの下余白 */
    text-align: center; /* 中央揃え */
}

/* SNS埋め込みフレーム */
.instagram-feed {
    max-width: 800px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央揃え */
    border-radius: 15px; /* フレームの角を丸くする */
    overflow: hidden; /* はみ出す部分を隠す */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* フレームに影を追加 */
    background-color: #fff; /* 背景色を白に設定 */
}

/* フレーム内iframeのスタイル */
.instagram-feed iframe {
    width: 100%; /* 幅をフレームに合わせる */
    height: 500px; /* 高さを設定 */
    border: none; /* 枠線を削除 */
    border-radius: 15px; /* 角を丸くする */
}

/* SNSセクションのボタンスタイル */
.sns-button {
    display: inline-block; /* ボタン風に設定 */
    font-size: 16px; /* フォントサイズ */
    color: white; /* テキスト色を白に */
    background-color: #ddaf00; /* ボタン背景色 */
    text-decoration: none; /* 下線を削除 */
    padding: 12px 25px; /* ボタン内の余白 */
    border-radius: 25px; /* ボタンの角を丸く */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* ボタンに影を追加 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
    margin-top: 20px; /* 上部余白 */
    text-align: center; /* テキストを中央揃え */
}

/* ボタンホバー時のスタイル */
.sns-button:hover {
    background-color: #ffe4b2; /* ホバー時の背景色 */
    color: #ddaf00; /* テキスト色をゴールドに */
    transform: scale(1.05); /* ボタンを少し拡大 */
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }

    nav ul {
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
    }

    #info {
        margin-top: 0;
        padding: 30px 15px;
    }

    .info-text h2 {
        font-size: 24px;
    }

    .hours li {
        font-size: 16px;
    }

    .map-link {
        font-size: 14px;
        padding: 10px 15px;
    }

    .menu-list {
        flex-direction: column;
        gap: 15px;
    }

    .menu-item {
        width: 100%;
        max-width: none;
    }
}
@media screen and (max-width: 768px) {
    .hero {
        height: auto; /* 高さの制限を解除 */
        margin-bottom: 0; /* 下余白をリセット */
    }

    #info {
        margin-top: 0; /* 上余白をリセット */
    }
}