@charset "utf-8";
/* CSS Document */
/*
Theme Name: MyTheme
Theme URI: http://example.com/mytheme
Author: Your Name
Author URI: http://example.com
Description: A custom WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme
*/
body {
  font-family: 'Noto Serif JP', serif;
}

h1, h2, h3, h4, h5, h6, p, a, li {
  font-family: 'Noto Serif JP', serif;
}

html, body {
  overflow-x: hidden; /* 横スクロールを防ぐ */
}

/* 必要に応じてフォントの太さやサイズを調整 */
h1 {
  font-weight: 700;
  font-size: 2em;
}

p {
  font-weight: 400;
  font-size: 1em;
}

.header-container {
  position: fixed; /* ヘッダーを固定 */
  top: 0; /* 画面の上部に配置 */
  left: 0; /* 画面の左端に配置 */
  width: 98%; /* ヘッダーを全幅に広げる */
  z-index: 1000; /* ヘッダーが他の要素の上に表示されるようにする */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* パディングを調整して、スペースを確保 */
  background-color: rgba(0, 0, 0, 0.8); /* 黒の背景に80%透過 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 軽いシャドウで浮き上がる効果を追加 */
}

.logo img {
  height: 50px;
}

/* ナビゲーションのリンク */
.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center; /* 垂直にセンタリング */
}

.main-navigation ul li {
  margin: 0 15px;
}

.main-navigation ul li a {
  text-decoration: none; /* 下線を消す */
  color: #f0f0f0; /* 限りなく白に近いグレー */
  font-size: 18px;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s; /* 色と拡大、シャドウのトランジション */
}

.main-navigation ul li a:hover {
  color: #fff; /* ホバー時に完全な白に変更 */
  transform: scale(1.1); /* リンクを拡大 */
  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.7); /* 明るい白のシャドウを追加 */
}

nav ul li img {
    width: 24px; /* アイコンの幅を調整 */
    height: 24px; /* アイコンの高さを調整 */
    margin-left: 10px; /* アイコン間のスペース */
}

nav ul li a {
    display: flex;
    align-items: center;
}

.mobile-navigation {
  display: none; /* Mobile navigation is hidden by default */
}

.mobile-navigation .mobile-menu {
  display: none; /* Hide menu by default */
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-navigation .menu-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* Mobile Menu Toggle */
.menu-toggle:focus + .mobile-menu,
.menu-toggle.active + .mobile-menu {
  display: block; /* Show menu when toggle is active or focused */
}

/* Mobile Menu Styles */
.mobile-menu {
  background-color: #f8f8f8; /* Background color for mobile menu */
}

.mobile-menu li {
  padding: 10px;
}

.mobile-menu a {
  color: #333;
  text-decoration: none;
  display: block;
}

.mobile-menu img {
  width: 24px;
  height: auto;
}

/* Responsive Media Query */
@media (max-width: 768px) {
  .main-navigation {
    display: none; /* Hide desktop navigation on mobile */
  }

  .mobile-navigation {
    display: block; /* Show mobile navigation on mobile */
	padding-right: 20px;
  }
}

/* フッター */
/* フッターの背景色をヘッダーと同じに設定 */
footer {
  background-color: #333; /* ヘッダーと同じ色に変更してください */
  padding: 20px 0;
  color: #fff;
  text-align: center;
}

.footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-navigation ul li {
  display: inline-block;
  margin-right: 20px;
}

.footer-navigation ul li:last-child {
  margin-right: 0;
}

.footer-navigation a {
  color: #fff;
  text-decoration: none;
}

.footer-navigation a:hover {
  color: #ccc; /* ホバー時に少し明るくする */
}

.footer-info {
  margin-top: 20px;
  font-size: 14px;
  color: #ccc;
}

/* モバイル対応のためのメディアクエリ */
@media (max-width: 767px) {
  .footer-navigation ul {
    display: flex;
    flex-wrap: wrap; /* 横並びを維持しつつ折り返し可能にする */
    justify-content: center; /* アイテムを中央揃えにする */
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .footer-navigation ul li {
    margin: 0 10px; /* 横のスペースを調整 */
  }

  .footer-navigation a {
    font-size: 14px; /* モバイル用の文字サイズに変更 */
  }

  .footer-info {
    text-align: center; /* 中央揃え */
    margin-top: 20px;
    font-size: 12px; /* フッター情報の文字サイズを調整 */
  }
}

.main-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.responsive-video {
  width: 100%;   /* 横幅に合わせる */
  height: auto;  /* 縦幅を自動調整 */
  object-fit: cover; /* 必要に応じて縦横比を維持してフィット */
}

/* コンテンツラッパーのスタイル */
.cover {
  background-color: #f2f2f2; /* 薄いグレーの背景 */
  padding: 40px 0;
}

.content-wrapper {
  padding-top: 60px; /* ヘッダーの高さ分の余白を追加して、コンテンツがヘッダーに隠れないようにする */
  text-align: center; /* テキストを中央表示 */
  padding: 20px;
}

/* Food Cover セクション */
.food-cover {
  width: 100%;
}

/* food-cover-header セクションのスタイル */
.food-cover-header {
  padding: 20px 20px;
  text-align: center;
  position: relative;
}

.food-cover-header h2 {
  background: url("images/food-cover-bg1.jpg") no-repeat top center;
  background-size: cover;
  color: #fff; /* テキスト色を黒に近いグレーに */
  font-size: 2.5em; /* h2 のサイズ調整 */
  padding: 60px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* ぼかしエフェクト */
}

.food-cover-header p {
  font-size: 1.2em;
  color: #555; /* テキスト色を黒に近いグレーに */
}


/* 食品アイテムの横並び設定 */
.food-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.food-item img {
  max-width: 50%; /* 画像の幅を調整 */
  height: auto;
  margin: 0px; /* 画像とテキストの間隔 */
}

.food-item .food-text {
  width: 50%; /* テキスト部分の幅を調整 */
}

/* メディアクエリでの調整 */
@media (max-width: 768px) {
  .food-item {
    flex-direction: column; /* 縦並びに変更 */
    text-align: center; /* テキストを中央揃えにする */
  }

  .food-item img {
    max-width: 100% !important; /* 画像の幅を100%に強制的に設定 */
    margin-right: 0 !important; /* 画像とテキストの間隔を削除 */
    margin-bottom: 20px; /* 画像とテキストの間隔 */
  }

  .food-item .food-text {
    width: 100%; /* テキスト部分の幅を100%に */
  }
}

/* フェードイン用のクラス */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* スクロール時にフェードイン */
.scroll-fade-in.visible {
  opacity: 1;
}

/* テキストと画像の位置 */
.image-text-container .food-text,
.text-image-container .food-text {
  margin-left: 20px; /* 画像とテキストの間隔 */
}

.text-image-container .food-text {
  margin-left: 0;
  margin-right: 20px; /* 画像とテキストの間隔 */
}

/* food-details セクションのスタイル */
.food-details {
  background-color: #fff; /* 背景色を白に */
  padding: 40px 20px;
}

/* 各フードアイテムのスタイル */
/* 各メニューアイテムのスタイル */
.menu-item {
  display: flex; /* デフォルトでは横並び */
  align-items: center; /* 垂直方向に中央揃え */
  margin-bottom: 20px; /* アイテム間のスペース */
}

/* 画像とテキストのスタイル */
.menu-text {
  flex: 1; /* テキストが利用可能なスペースを全て使う */
  padding: 10px; /* テキスト周りにパディングを追加 */
}

.menu-image {
  flex: 1; /* 画像が利用可能なスペースを全て使う */
}

/* 
.food-item img {
  width: 50%; 
  height: auto; 
  object-fit: cover; 
  margin: 0;
}


.food-text h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #333; 
}

.food-text p {
  font-size: 1em;
  color: #666; 
}
*/


/* モバイル表示用メディアクエリ */
@media (max-width: 768px) {
  .menu-item {
    flex-direction: column; /* 縦並びに変更 */
    align-items: flex-start; /* 左揃え */
  }

  .menu-image {
    margin-bottom: 20px; /* 画像とテキストの間にスペース */
    width: 100% !important; /* 画像の幅を100%に */
  }
	
  .food-item {
    flex-direction: column; /* 縦並びに変更 */
    text-align: center; /* テキストを中央揃えにする */
  }

  .food-item img {
    max-width: 100% !important; /* 画像の幅を100%に強制的に設定 */
    margin-right: 0 !important; /* 画像とテキストの間隔を削除 */
    margin-bottom: 20px; /* 画像とテキストの間隔 */
  }

  .food-item .food-text {
    width: 100% !important; /* テキスト部分の幅を100%に */
  }
}

/* drink-cover-header セクションのスタイル */
.drink-cover-header {
  padding: 20px 20px;
  text-align: center;
  position: relative;
}

.drink-cover-header h2 {
  background: url("images/drink-cover-bg1.JPG") no-repeat top center;
  background-size: cover;
  color: #FFF; /* テキスト色を黒に近いグレーに */
  font-size: 2.5em; /* h2 のサイズ調整 */
  padding: 60px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* ぼかしエフェクト */
}

.drink-cover-header p {
  font-size: 1.2em;
  color: #555; /* テキスト色を黒に近いグレーに */
}

/* comfort-cover-header セクションのスタイル */
.comfort-cover-header {
  padding: 20px 20px;
  text-align: center;
  position: relative;
}

.comfort-cover-header h2 {
  background: url("images/comfort-cover-bg1.jpg") no-repeat bottom center;
  background-size: cover;
  color: #FFF; /* テキスト色を黒に近いグレーに */
  font-size: 2.5em; /* h2 のサイズ調整 */
  padding: 60px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* ぼかしエフェクト */
}

.comfort-cover-header p {
  font-size: 1.2em;
  color: #555; /* テキスト色を黒に近いグレーに */
}

/*お問い合わせ*/
.reservation-link {
  text-align: center; /* テキストを中央表示 */
  margin-top: 30px;
}

.reservation-link a {
  display: inline-block;
  background-color: #002147; /* 紺色の背景 */
  color: #fff; /* 白いテキスト */
  padding: 15px 30px;
  text-decoration: none;
  font-size: 18px;
  transition: background-color 0.3s, color 0.3s;
}

.reservation-link a:hover {
  background-color: #fff; /* ホバー時に背景を白に変更 */
  color: #333; /* ホバー時にテキストを濃いグレーに変更 */
}

.info-section {
  padding: 40px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.info-section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #333;
}
.info-section p {
  font-size: 1.2em;
  color: #555;
  margin-bottom: 40px;
}

.map-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.map-container {
  margin-bottom: 20px; /* 間隔を少し広げる */
  text-align: center; /* 画像とテキストを中央揃え */
}

.store-name {
  font-size: 1.5em;
  margin-bottom: 10px; /* 画像と店名の間隔 */
}

.map-container img {
  width: 100%; /* 必要に応じて画像サイズを調整 */
  max-width: 400px; /* 画像の最大幅を設定 */
  height: auto; /* 画像の縦横比を維持 */
}

.contact-info {
  margin-top: 10px;
}

.contact-info a {
  display: block;
  color: white;
  text-decoration: none;
  background-color: #00008B;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
  text-align: center;
}

.contact-info a:hover {
  background-color: white;
  color: darkgray;
}

/* おしながき */
.menu-section {
  padding: 20px;
}

.menu-section h1, .menu-section h2 {
  color: #333;
  font-family: Arial, sans-serif;
}

.menu-section ul {
  list-style-type: none;
  padding: 0;
}

.menu-section ul li {
  margin-bottom: 10px;
}

.menu-section p {
  font-size: 16px;
}

/* h1 background image */
.hero-section {
  text-align: center;
  position: relative;
}

.hero-section h1 {
  background: url("images/oshinagaki-bg.jpg") no-repeat center center;
  background-size: cover;
  color: #fff; /* テキスト色を黒に近いグレーに */
  font-size: 2.5em; /* h2 のサイズ調整 */
  padding: 100px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* ぼかしエフェクト */
}

/* Breadcrumbs Style */
.breadcrumbs {
  margin: 20px 0;
  font-size: 14px;
  color: #333333; /* 黒に近い灰色 */
  text-align: center; /* 画面に収まるように中央寄せ */
}

.breadcrumbs a {
  color: #333333; /* 黒に近い灰色 */
  text-decoration: none; /* 下線を消す */
}

.breadcrumbs a:hover {
  color: #000000; /* ホバー時は真っ黒に */
  text-decoration: underline; /* ホバー時に下線を追加 */
}

/* Breadcrumbs Container */
.breadcrumbs {
  display: inline-block; /* 横幅を自然に調整 */
  padding: 5px 10px;
  border-radius: 5px; /* 角を少し丸める */
}

/* 全体のテキスト中央揃え */
.menu-section {
  text-align: center;
}

/* 明朝体のh2とお品書きの赤文字 */
.menu-section h2 {
  font-family: "Times New Roman", serif !important;
  color: darkred;
}

.menu-item-title {
  font-family: "Times New Roman", serif; /* 明朝体 */
  font-weight: bold; /* 太文字 */
  font-size: 1.2em; /* 文字サイズを少し大きく */
}

.notice {
  font-weight: normal;
}

.menu-item-price {
  font-weight: bold;
}

/* Menu item with image on the right */
.menu-item {
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.menu-item h2 {
  color: darkred; /* 既に設定されている赤色 */
}

.menu-text, .menu-image {
  width: 48%;
}

.menu-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* h1 background image */
.hero-section-drink {
  text-align: center;
  position: relative;
}

.hero-section-drink h1 {
  background: url("images/drink-bg.JPG") no-repeat center center;
  background-size: cover;
  color: #fff; /* テキスト色を黒に近いグレーに */
  font-size: 2.5em; /* h2 のサイズ調整 */
  padding: 100px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* ぼかしエフェクト */
}

/* メインビジュアルセクション */
.main-visual {
    text-align: center; /* 画像を中央に配置 */
	margin-top: 80px; /* ヘッダーの高さに合わせてマージンを設定 */
    margin-bottom: 20px; /* セクションと他のコンテンツとの間に余白を追加 */
}

.main-visual img {
    width: 100%; /* 画面幅に合わせて画像を調整 */
    height: auto; /* 高さは自動で調整 */
    display: block; /* ブロック表示にして余白を取り除く */
}

/* 店舗情報 */

/* h1背景画像の設定 */
.shop-hero-section {
  text-align: center;
  position: relative;
}

.shop-hero-section h1 {
  background: url("images/store-info-bg.png") no-repeat center center; /* 背景画像 */
  background-size: cover;
  color: #fff; /* テキスト色を白に */
  font-size: 2.5em; /* h1サイズ調整 */
  padding: 100px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* ぼかしエフェクト */
}

/* パンくずリストのスタイル */
.breadcrumbs {
  margin: 20px 0;
  font-size: 14px;
  color: #333; /* 黒に近い灰色 */
  text-align: center; /* 画面に収まるように中央寄せ */
}

.breadcrumbs a {
  color: #333; /* 黒に近い灰色 */
  text-decoration: none; /* 下線を消す */
}

.breadcrumbs a:hover {
  color: #000; /* ホバー時は真っ黒に */
  text-decoration: underline; /* ホバー時に下線を追加 */
}

/* 店舗情報セクションと地図セクションの中央寄せ */
.store-info-page h2 {
  color: red; /* 赤文字 */
}

.store-info-page {
  text-align: center;
  margin: 0 auto;
}

.store-info-section, .map-section {
  display: inline-block;
  vertical-align: top;
  width: 95%;
  margin: 1%;
}

.map-container {
  margin: 0 auto;
}

.map-container img {
  width: 100%; /* 画像の幅を親要素にフィットさせる */
  height: auto; /* 高さを自動調整 */
}

/* Breadcrumbs Style */
.breadcrumbs {
  margin: 20px 0;
  font-size: 14px;
  color: #333333; /* 黒に近い灰色 */
  text-align: center; /* 画面に収まるように中央寄せ */
}

.breadcrumbs a {
  color: #333333; /* 黒に近い灰色 */
  text-decoration: none; /* 下線を消す */
}

.breadcrumbs a:hover {
  color: #000000; /* ホバー時は真っ黒に */
  text-decoration: underline; /* ホバー時に下線を追加 */
}

/* お問い合わせページのスタイル */
.contact-page {
  padding: 20px;
  text-align: center;
}

.contact-intro {
  font-size: 16px;
  margin-bottom: 20px;
}

/* Contact Form */
.contact-form {
  max-width: 800px; /* 横幅を広げる */
  margin: 0 auto; /* 中央揃え */
  padding: 20px;
  background-color: #f0f0f0; /* 灰色の背景色 */
  border-radius: 5px; /* 角を丸める */
}

.contact-form p {
  margin-bottom: 20px; /* フォームとの余白 */
}

/* h1 background image */
.contact-hero-section {
  text-align: center;
  position: relative;
}

.contact-hero-section h1 {
  background: url("images/contact-bg.JPG") no-repeat center center;
  background-size: cover;
  color: #fff;
  font-size: 2.5em;
  padding: 100px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Breadcrumbs Style */
.breadcrumbs {
  margin: 20px 0;
  font-size: 14px;
  color: #333333;
  text-align: center;
}

.breadcrumbs a {
  color: #333333;
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: #000000;
  text-decoration: underline;
}

/* お問い合わせ情報スタイル */
.contact-info {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-info h2 {
  text-align: center;
  color: #333;
}

.contact-info p {
  text-align: center;
}

/* Contact form container */
.contact-form-container {
  background-color: #f0f0f0; /* 背景色をグレーに設定 */
  padding: 20px;
  border-radius: 8px; /* 角を丸くする */
  max-width: 100%; /* 最大幅を画面幅に合わせる */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  margin: 0 auto; /* 中央に配置 */
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column; /* フォーム要素を縦に並べる */
}

/* Form elements */
.contact-form input,
.contact-form textarea,
.contact-form button {
  width: 100%; /* 幅を親要素に合わせる */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  margin-bottom: 10px; /* 要素間の余白 */
}

/* チェックボックスのラベルを横並びにする */
.checkbox-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* チェックボックスの間隔を調整 */
}

.checkbox-inline label {
  display: flex;
  align-items: center;
  margin-right: 15px; /* チェックボックスとラベルの間隔を調整 */
}

/* チェックボックスのサイズを調整 */

input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
}

@media screen and (max-width: 768px) {
    input[type="checkbox"] {
        width: 15px !important;
        height: 15px !important;
    }
}

/* プライバシーポリシーセクションのスタイル */
.privacy-policy {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
}

.privacy-policy h2 {
  color: darkred;
  font-size: 1.5em;
  margin-bottom: 15px;
}

.privacy-policy p {
  font-size: 16px;
  line-height: 1.6;
}

.privacy-policy a {
  color: darkred;
  text-decoration: none;
}

.privacy-policy a:hover {
  text-decoration: underline;
}

/* h1 background image */
.privacy-hero-section {
  text-align: center;
  position: relative;
}

.privacy-hero-section h1 {
  background: url("images/privacy-policy-bg.JPG") no-repeat center center;
  background-size: cover;
  color: #fff;
  font-size: 2.5em;
  padding: 100px 20px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}