@charset "utf-8";

/* CSS Variables for Theme Colors */
:root {
  --accent-primary: #2c2c2c;
  --accent-hover: #1a1a1a;
  --accent-soft: #f5f5f5;
  --accent-strong: #000000;
  --accent-transparent: rgba(44, 44, 44, 0.1);
  --text-primary: #2c2c2c;
  --text-secondary: #5a5a5a;
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --border-light: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.15);
  --border-color: rgba(0, 0, 0, 0.15);
  --text-muted: #666666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'zen old mincho', 'noto sans jp', serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--accent-hover);
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.inner {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
}
#header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: 100;
}
#header .inner {
  padding: 20px;
}
#header .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}
#header .header-top .shop_tel a {
  color: var(--accent-primary);
  font-weight: bold;
}
#header .header-top .social_icons {
  display: flex;
  gap: 15px;
}
#header .header-top .social_icons a {
  color: var(--text-primary);
  transition: color 0.3s ease;
}
#header .header-top .social_icons a:hover {
  color: var(--accent-primary);
}
#header .logo {
  text-align: center;
  margin-bottom: 15px;
  /* 子要素のパーセント計算のベースになるように、親要素にベースサイズを定義 */
  font-size: clamp(2.4rem, 5vw, 3.2rem);
}
#header .logo a {
  /* ここにあった font-size 指定は完全に削除します */
  font-weight: bold;
  color: var(--accent-primary);
  letter-spacing: 0.1em;
}
#header .site_description {
  text-align: center;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 20px;
}
#header .primary-nav .navi_list {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 30px;
}
#header .primary-nav .navi_list li a {
  color: var(--text-primary);
  font-weight: 500;
  padding: 10px 0;
  display: inline-block;
  position: relative;
}
#header .primary-nav .navi_list li a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-primary);
  transition: width 0.3s ease;
}
#header .primary-nav .navi_list li a:hover::after {
  width: 100%;
}
#header .primary-nav .navi_list li.current a {
  color: var(--accent-primary);
  font-weight: bold;
}
#header .primary-nav .mobile-toggle {
  display: none;
}
@media (max-width: 768px) {
  #header .primary-nav .navi_list {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background-color: #ffffff;
    flex-direction: column;
    padding: 80px 30px 30px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    gap: 0;
    z-index: 1000;
    overflow-y: auto;
  }
  #header .primary-nav .navi_list li {
    border-bottom: 1px solid var(--border-color);
  }
  #header .primary-nav .navi_list li a {
    display: block;
    padding: 15px 0;
  }
  #header .primary-nav.menu-open .navi_list {
    display: flex;
  }
  #header .primary-nav .mobile-toggle {
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    background: none;
    border: none;
    cursor: pointer;
  }
  #header .primary-nav .mobile-toggle .navi_trigger {
    padding: 10px;
  }
}
#content {
  min-height: 400px;
}
.section {
  padding: 80px 0;
}
.section:nth-child(even) {
  background-color: var(--accent-soft);
}
.section .inner {
  padding: 0 20px;
}
.section_title {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: var(--accent-primary);
  margin-bottom: 50px;
  letter-spacing: 0.1em;
}
.section_title span {
  position: relative;
  display: inline-block;
}
.section_title span::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--accent-primary);
}
.page_title {
  font-size: 32px;
  font-weight: bold;
  color: var(--accent-primary);
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--accent-primary);
}
#wrap_slider {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
  background-color: var(--accent-soft);
}
#wrap_slider .rslides {
  width: 100%;
  height: 100%;
  position: relative;
}
#wrap_slider .rslides .article {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease-in-out;
}
#wrap_slider .rslides .article.active {
  opacity: 1;
  pointer-events: auto;
}
#wrap_slider .rslides .article .slide_image_wrap {
  display: block;
  width: 100%;
  height: 100%;
}
#wrap_slider .rslides .article .slide_image_wrap img,
#wrap_slider .rslides .article .slide_image_wrap a {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#wrap_slider .rslides .article .caption {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
}
#wrap_slider .rslides .article .caption .caption_txt {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px 30px;
  font-size: 18px;
  color: var(--text-primary);
}
/* リンク先が空（href=""）の場合はクリックを無効化し、通常のテキストと同じカーソルにする */
#wrap_slider .rslides .article .caption .caption_txt a[href=""] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: inherit;
}
#wrap_slider .slideshow-indicators {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
#wrap_slider .slideshow-indicators .slide-indicator {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#wrap_slider .slideshow-indicators .slide-indicator.active {
  background-color: var(--accent-primary);
}
@media (max-width: 768px) {
  #wrap_slider {
    height: 300px;
  }
}
.welcomemessage .message {
  font-size: 18px;
  line-height: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.information .list {
  display: grid;
  gap: 30px;
}
.information .list .article {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border: 1px solid var(--border-color);
  transition: box-shadow 0.3s ease;
}
.information .list .article:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.information .list .article:nth-child(n+4) {
  display: none;
}
.information .list .article .summary {
  flex: 1;
}
.information .list .article .summary .date {
  font-size: 14px;
  color: var(--accent-hover);
  margin-bottom: 10px;
}
.information .list .article .summary .title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
}
.information .list .article .photo {
  width: 150px;
  height: 100px;
  margin-left: 20px;
  overflow: hidden;
}
.information .list .article .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.information .btn_details {
  text-align: center;
  margin-top: 40px;
}
.information .btn_details a {
  display: inline-block;
  padding: 12px 40px;
  background-color: var(--accent-primary);
  color: #ffffff;
  border-radius: 30px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.information .btn_details a:hover {
  background-color: var(--accent-hover);
}
@media (max-width: 768px) {
  .information .list .article {
    flex-direction: column;
  }
  .information .list .article .photo {
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
  }
}
/* 写真ギャラリー - LP風強化（トップページ用）は下部に記載 */
.about .block {
  margin-bottom: 40px;
}
.about .block.map {
  width: 100%;
  height: 400px;
  margin-bottom: 40px;
}
.about .block.map:not(:has(iframe)) {
  display: none;
}
.about .block.summary {
  line-height: 1.9;
  max-width: 800px;
  margin: 0 auto;
}
.about .block.summary table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  background-color: #ffffff;
}
.about .block.summary table tr {
  border-bottom: 1px solid var(--border-color);
}
.about .block.summary table tr:last-child {
  border-bottom: none;
}
.about .block.summary table th {
  font-weight: 500;
  color: var(--text-muted);
  padding: 20px 24px;
  text-align: left;
  width: 30%;
  vertical-align: top;
  background-color: var(--bg-secondary);
  font-size: 15px;
}
.about .block.summary table td {
  padding: 20px 24px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.8;
}
.about .block.summary table td a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}
.about .block.summary table td a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
.about .block.map iframe {
  width: 100%;
  height: 100%;
  border: none;
}
/* ========================================
   お問い合わせフォーム（Contact）- Daikichi和モダン
   スコープ: .contact_form のみ（他ページへの影響なし）
======================================== */

.contact_form {
  max-width: 600px;
  margin: 0 auto;
}

/* 送信メッセージ共通 */
.contact_form .message {
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.6;
}

/* バリデーションエラーメッセージ */
.contact_form .message .error_message {
  padding: 16px 20px;
  background-color: #fee2e2;
  border-left: 4px solid #dc2626;
  color: #991b1b;
}

/* 送信完了メッセージ */
.contact_form .message .success_message {
  padding: 16px 20px;
  background-color: var(--accent-soft);
  border-left: 4px solid var(--accent-primary);
  color: var(--text-primary);
}

/* .contact_area - 各フォーム項目のコンテナ */
.contact_form .contact_area {
  margin-bottom: 24px;
}

/* ラベル */
.contact_form .contact_area label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* 必須マーク */
.contact_form .contact_area .requier {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* テキスト入力フィールド */
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: #ffffff;
  transition: all 0.3s ease;
}

.contact_form textarea {
  min-height: 150px;
  resize: vertical;
}

/* セレクトボックス */
.contact_form select,
.contact_form .frm_text {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23333" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* フォーカス状態 */
.contact_form input:focus,
.contact_form textarea:focus,
.contact_form select:focus,
.contact_form .frm_text:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

/* ホバー状態 */
.contact_form input:hover,
.contact_form textarea:hover,
.contact_form select:hover,
.contact_form .frm_text:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

/* チェックボックス・ラジオボタン */
.contact_form .radio,
.contact_form .checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 12px;
  position: relative;
}

/* ネイティブのinputを視覚的に隠す（アクセシビリティは維持） */
.contact_form .radio input[type="radio"],
.contact_form .checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* カスタムチェックボックス・ラジオボタンの外枠 */
.contact_form .checkbox label::before,
.contact_form .radio label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid #d0d0d0;
  background-color: #ffffff;
  transition: all 0.2s ease;
  vertical-align: middle;
  flex-shrink: 0;
}

/* チェックボックスは角丸 */
.contact_form .checkbox label::before {
  border-radius: 3px;
}

/* ラジオボタンは円形 */
.contact_form .radio label::before {
  border-radius: 50%;
}

/* チェックマーク（チェックボックス用） */
.contact_form .checkbox input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 10px;
  border: solid var(--accent-primary);
  border-width: 0 2px 2px 0;
}

/* 選択マーク（ラジオボタン用） */
.contact_form .radio input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent-primary);
}

/* チェック状態の外枠 */
.contact_form .checkbox input[type="checkbox"]:checked + label::before,
.contact_form .radio input[type="radio"]:checked + label::before {
  border-color: var(--accent-primary);
  background-color: #ffffff;
}

/* ラベルのスタイル */
.contact_form .radio label,
.contact_form .checkbox label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-left: 0;
  font-weight: 400;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  position: relative;
}

/* ホバー時の効果 */
.contact_form .checkbox:hover label::before,
.contact_form .radio:hover label::before {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.08);
}

/* フォーカス時の効果（アクセシビリティ） */
.contact_form .checkbox input[type="checkbox"]:focus + label::before,
.contact_form .radio input[type="radio"]:focus + label::before {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.contact_form .button,
.contact_form input[type="submit"] {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: var(--accent-primary);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.contact_form .button:hover,
.contact_form input[type="submit"]:hover {
  background-color: var(--accent-hover);
}
/* トップページのお問い合わせフォーム：reCAPTCHA下部余白 */
#top .contact_form .g-recaptcha {
  margin-bottom: 20px;
}

/* お問い合わせページ：reCAPTCHA下部余白（トップページと同じ間隔） */
#contact .contact_form .g-recaptcha {
  margin-bottom: 20px;
}
.contact_form .personal_info {
  margin-top: 30px;
  padding: 20px;
  background-color: var(--accent-soft);
  border: 1px solid var(--border-color);
  font-size: 14px;
}
.contact_form .personal_info .personal_info_txt {
  margin-top: 10px;
  line-height: 1.6;
}

/* お問い合わせフォーム: レスポンシブ対応（768px以下） */
@media (max-width: 768px) {
  .contact_form {
    max-width: 100%;
    padding: 0;
  }

  .contact_form .contact_area {
    margin-bottom: 20px;
  }

  .contact_form .contact_area label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .contact_form .contact_area .requier {
    font-size: 10px;
    padding: 2px 6px;
  }

  .contact_form input[type="text"],
  .contact_form input[type="email"],
  .contact_form input[type="tel"],
  .contact_form textarea,
  .contact_form select,
  .contact_form .frm_text {
    font-size: 16px;
    padding: 10px 14px;
  }

  .contact_form textarea {
    min-height: 120px;
  }

  .contact_form .radio,
  .contact_form .checkbox {
    margin-right: 16px;
    margin-bottom: 10px;
  }

  .contact_form .radio label,
  .contact_form .checkbox label {
    font-size: 14px;
  }

  .contact_form .button,
  .contact_form input[type="submit"] {
    width: 100%;
    padding: 14px;
    font-size: 15px;
  }

  .contact_form .personal_info {
    margin-top: 24px;
    padding: 16px;
    font-size: 13px;
  }
}

#footer {
  background-color: var(--accent-primary);
  color: #fff;
  padding: 40px 0 20px;
}
#footer .inner {
  text-align: center;
}
#footer .shop_name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
#footer .shop_name a {
  color: #fff;
}
#footer .introduction {
  padding: 20px 0 0;
  text-align: center;
}
#footer .copyright {
  font-size: 14px;
  opacity: 0.8;
}
#footer .copyright a {
  color: #fff;
}
.social {
  background-color: var(--accent-soft);
  padding: 30px 0;
}
.social .inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.totop {
  position: fixed;
  bottom: 16px;
  right: 16px;
  left: auto;
  z-index: 100;
}
.totop .button,
.totop a,
.totop button {
  width: 52px;
  height: 52px;
  min-width: 52px;
  max-width: 52px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 26px;
  background-color: var(--accent-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}
.totop .button.is-visible,
.totop a.is-visible,
.totop button.is-visible {
  opacity: 1;
  visibility: visible;
}
.totop .button:hover,
.totop a:hover,
.totop button:hover {
  background-color: var(--accent-hover);
}
/* 予約ページの #reservation .button スタイルが .totop .button に当たるのを防止 */
body#reservation .totop .button,
body#reservation .totop a,
body#reservation .totop button {
  width: 52px;
  height: 52px;
  min-width: 52px;
  max-width: 52px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 24px;
}
.photo-modal-dialog {
  width: min(92vw, 980px);
  max-height: 90vh;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: 8px;
  padding: 0;
  background-color: #fff;
}
.photo-modal-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
.photo-modal-dialog .photo-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
}
.photo-modal-dialog .photo-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}
.photo-modal-dialog .photo-modal-close:hover {
  background-color: #fff;
}
.photo-modal-dialog .photo-modal-image img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  object-fit: contain;
}
.photo-modal-dialog .photo-modal-body {
  padding: 20px;
}
.photo-modal-dialog .photo-modal-body .photo-modal-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.photo-modal-dialog .photo-modal-body .photo-modal-text {
  margin-bottom: 10px;
}
.photo-modal-dialog .photo-modal-body .photo-modal-date {
  font-size: 14px;
  color: var(--accent-hover);
}
.photo-modal-dialog .photo-modal-prev,
.photo-modal-dialog .photo-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.photo-modal-dialog .photo-modal-prev {
  left: 20px;
}
.photo-modal-dialog .photo-modal-next {
  right: 20px;
}
.photo-modal-dialog .photo-modal-prev:hover,
.photo-modal-dialog .photo-modal-next:hover {
  background-color: #fff;
  transform: translateY(-50%) scale(1.1);
}
.photo-modal-dialog .photo-modal-prev:active,
.photo-modal-dialog .photo-modal-next:active {
  transform: translateY(-50%) scale(0.95);
}
@media (max-width: 768px) {
  .photo-modal-dialog {
    width: calc(100vw - 20px);
    max-height: 95vh;
  }
  .photo-modal-dialog .photo-modal-prev,
  .photo-modal-dialog .photo-modal-next {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .photo-modal-dialog .photo-modal-prev {
    left: 10px;
  }
  .photo-modal-dialog .photo-modal-next {
    right: 10px;
  }
  .photo-modal-dialog .photo-modal-close {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  .photo-modal-dialog .photo-modal-image img {
    max-height: 60vh;
  }
}
.pager {
  padding: 40px 0;
  text-align: center;
}
.pager a {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.pager a.current {
  background-color: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}
.pager a:hover:not(.current) {
  background-color: var(--accent-soft);
}
.textfield {
  line-height: 1.8;
}
.textfield h1,
.textfield h2,
.textfield h3,
.textfield h4,
.textfield h5,
.textfield h6 {
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: bold;
}
.textfield p {
  margin-bottom: 15px;
}
.textfield ul,
.textfield ol {
  margin-left: 20px;
  margin-bottom: 15px;
}
.textfield img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}
@media (max-width: 768px) {
  .section {
    padding: 50px 0;
  }
  .section_title {
    font-size: 28px;
  }
  .page_title {
    font-size: 24px;
  }
}
/* ============================================
   スタッフ紹介ページ - Daikichi
   和モダン・ネオ・ミニマリズム
============================================ */
#staff #custom_staff {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 20px;
  background: transparent;
}

#staff .staff_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-bottom: 100px;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}

#staff .staff--image {
  width: 280px;
  height: 280px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

#staff .staff--image:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#staff .staff__text {
  width: 100%;
}

#staff .staff__text--name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}

#staff .staff__text--job {
  display: inline-block;
  font-size: 14px;
  color: var(--accent-primary);
  background: var(--accent-soft);
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 24px;
  font-weight: 500;
}

#staff .staff__text--description {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-muted);
  margin-bottom: 28px;
}

#staff .staff__text--description p {
  margin: 0;
}

#staff .staff__text__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

#staff .staff__text__social_icon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  text-decoration: none;
  transition: transform 0.3s ease;
  font-size: 13px;
  color: var(--text-primary);
}

#staff .staff__text__social_icon:hover {
  transform: scale(1.08);
}

#staff .staff__text__social_icon img {
  width: 28px;
  height: 28px;
}

#staff .staff__text__social_text {
  display: none;
}

/* Tablet: 768px and up - Staff Left/Right Alternating */
@media (min-width: 768px) {
  #staff .staff_wrap {
    flex-direction: row;
    gap: 50px;
    align-items: flex-start;
    text-align: left;
  }

  #staff .staff_wrap:nth-child(even) {
    flex-direction: row-reverse;
  }

  #staff .staff--image {
    margin-bottom: 0;
  }
  
  #staff .staff__text__social {
    justify-content: flex-start;
  }
}

/* Mobile: Below 768px - Vertical Stack */
@media (max-width: 768px) {
  #staff .staff_wrap,
  #staff .staff_wrap:nth-child(even) {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }
  
  #staff .staff--image {
    margin-bottom: 0;
  }
  
  #staff .staff__text__social {
    justify-content: center;
  }
}

/* ============================================
   店舗情報ページ（About） - Daikichi
   和モダンデザイン: 余白・細い罫線・落ち着いた階調・角丸最小
============================================ */

/* ページタイトル */
#about .page_title {
  font-size: 32px;
  font-weight: bold;
  color: var(--accent-primary);
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--accent-primary);
  text-align: center;
}

/* 地図コンテナ */
#about .map {
  width: 100%;
  height: 400px;
  margin-bottom: 60px;
  border-radius: 0;
}

/* iframeがない場合（アクセス情報未入力時）は非表示 */
#about .map:not(:has(iframe)) {
  display: none;
}

/* 地図 iframe */
#about .map iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-color);
}

/* 店舗情報コンテナ */
#about .summary {
  line-height: 1.9;
  max-width: 800px;
  margin: 0 auto;
}

/* 店舗情報テーブル */
#about .summary table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  background-color: #ffffff;
}

/* テーブル行 */
#about .summary table tr {
  border-bottom: 1px solid var(--border-color);
}

#about .summary table tr:last-child {
  border-bottom: none;
}

/* ラベル列（項目名） */
#about .summary table th {
  font-weight: 500;
  color: var(--text-muted);
  padding: 20px 24px;
  text-align: left;
  width: 30%;
  vertical-align: top;
  background-color: var(--bg-secondary);
  font-size: 15px;
}

/* 値列（項目内容） */
#about .summary table td {
  padding: 20px 24px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.8;
}

/* リンク */
#about .summary table td a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

#about .summary table td a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* レスポンシブ: モバイル対応 */
@media (max-width: 768px) {
  #about .page_title {
    font-size: 24px;
    margin-bottom: 30px;
    padding-bottom: 15px;
  }
  
  #about .map {
    height: 300px;
    margin-bottom: 40px;
  }
  
  /* モバイルではテーブルを縦並びに */
  #about .summary table,
  #about .summary table tbody,
  #about .summary table tr,
  #about .summary table th,
  #about .summary table td {
    display: block;
    width: 100%;
  }
  
  #about .summary table tr {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 20px;
  }
  
  #about .summary table tr:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  #about .summary table th {
    background-color: transparent;
    font-size: 13px;
    color: #999;
    padding: 0 0 8px 0;
    font-weight: 500;
  }
  
  #about .summary table td {
    padding: 0;
    font-size: 15px;
  }

  .about .block.summary table,
  .about .block.summary table tbody,
  .about .block.summary table tr,
  .about .block.summary table th,
  .about .block.summary table td {
    display: block;
    width: 100%;
  }

  .about .block.summary table tr {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 20px;
  }

  .about .block.summary table tr:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .about .block.summary table th {
    background-color: transparent;
    font-size: 13px;
    color: #999;
    padding: 0 0 8px 0;
    font-weight: 500;
  }

  .about .block.summary table td {
    padding: 0;
    font-size: 15px;
  }
}

/* ============================================
   ウェルカムメッセージ - LP風キャッチコピーエリア
   和モダン・ネオ・ミニマリズム
============================================ */

.welcomemessage.hero-catchcopy {
  padding: 100px 0;
  background: linear-gradient(135deg, #fff 0%, var(--accent-soft) 100%);
}

.welcomemessage.hero-catchcopy .message {
  font-size: 20px;
  line-height: 2.2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  letter-spacing: 0.08em;
}

.welcomemessage.hero-catchcopy .message p:first-child {
  font-size: 32px;
  font-weight: bold;
  color: var(--accent-primary);
  margin-bottom: 30px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .welcomemessage.hero-catchcopy {
    padding: 60px 0;
  }
  
  .welcomemessage.hero-catchcopy .message {
    font-size: 16px;
  }
  
  .welcomemessage.hero-catchcopy .message p:first-child {
    font-size: 24px;
  }
}

/* ============================================
   写真ギャラリー - LP風強化
   和モダン・ネオ・ミニマリズム
============================================ */

.section_photo .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  list-style: none;
  max-width: 900px;
  margin: 0 auto;
}

.section_photo .list li {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.section_photo .list li:nth-child(n+5) {
  display: none;
}

.section_photo .list li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.section_photo .list li a span {
  display: block;
  width: 100%;
  height: 100%;
}

.section_photo .list li a span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.section_photo .list li a:hover img {
  transform: scale(1.1);
}

.section_photo .list li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.section_photo .list li a:hover::before {
  opacity: 1;
}

.section_photo .btn_details {
  text-align: center;
  margin-top: 40px;
}

.section_photo .btn_details a {
  display: inline-block;
  padding: 12px 40px;
  background-color: var(--accent-primary);
  color: #ffffff;
  border-radius: 30px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.section_photo .btn_details a:hover {
  background-color: var(--accent-hover);
}

@media (max-width: 768px) {
  .section_photo .list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* PC Nav: 和モダン展開ナビ (769px以上) */
@media (min-width: 769px) {
  #header .primary-nav .navi_list {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    max-height: 52px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    gap: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease !important;
  }
  #header .primary-nav .navi_list:hover {
    max-height: 400px !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
    border-top: 2px solid var(--accent-primary) !important;
  }
  #header .primary-nav .navi_list li {
    border-bottom: none !important;
    position: relative !important;
  }
  #header .primary-nav .navi_list li a {
    padding: 14px 20px !important;
    white-space: nowrap !important;
    letter-spacing: 0.08em !important;
    text-indent: 0.08em !important;
    transition: color 0.3s ease !important;
    position: relative !important;
  }
  #header .primary-nav .navi_list li a::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 6px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important; /* 追加：スマホ版のwidthを打ち消し、左右の余白設定に完全追従させる */
    height: 2px !important;
    background-color: var(--accent-primary) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important; /* 追加：中央を基点にする */
    transition: transform 0.3s ease !important;
  }
  #header .primary-nav .navi_list li a:hover {
    color: var(--accent-primary) !important;
  }
  #header .primary-nav .navi_list li a:hover::after,
  #header .primary-nav .navi_list li.current a::after {
    transform: scaleX(1) !important;
  }
  #header .mobile-toggle {
    display: none !important;
  }
}

/* aタグの中身が空の場合のみキャプション枠を非表示 */
.caption:has(.caption_txt a:empty) {
  display: none;
}

/* ヘッダーの電話番号・SNSアイコンを非表示 */
#header .header_tel,
#header .sns_icon,
#header .social,
#header .tel {
  display: none;
}

/* フッター全体 */
#footer {
  background-color: #F5F5F3 !important;
  padding: 60px 5% 40px;
}

/* フッター内の文字色・リンク色 */
#footer,
#footer a,
#footer .shop_name a,
#footer .copyright,
#footer .copyright a {
  color: #333 !important;
}

#footer a:hover,
#footer .shop_name a:hover,
#footer .copyright a:hover {
  color: var(--accent-primary) !important;
}

/* ショップ名 */
#footer .shop_name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}

/* コピーライト */
#footer .copyright {
  padding-top: 20px;
  border-top: 1px solid #ddd;
  font-size: 0.875rem;
}

/* ========================================
   求人ページ（Recruit）- 和モダン・ネオミニマリズム
   スコープ: #recruit のみ（他ページへの影響なし）
======================================== */

#recruit.c-recruit-table {
  margin: 2em auto;
  max-width: 900px;
}

#recruit.c-recruit-table .c-recruit-table__note {
  padding: 20px;
  margin-bottom: 1.5em;
  text-align: center;
  border-radius: 4px;
}

#recruit.c-recruit-table .c-recruit-table__note--message {
  background-color: #f5f5f5;
  color: #333;
  font-weight: bold;
  font-size: 1.1em;
  border: 1px solid #e5e5e5;
}

#recruit.c-recruit-table .c-recruit-table__note--period {
  background-color: var(--bg-secondary);
  color: #888;
  font-size: 0.875rem;
  border: 1px solid #e5e5e5;
}

#recruit.c-recruit-table .c-recruit-table__row {
  display: flex;
  border-top: 1px solid #e5e5e5;
  transition: background-color 0.2s ease;
}

#recruit.c-recruit-table .c-recruit-table__row:last-of-type {
  border-bottom: 1px solid #e5e5e5;
}

#recruit.c-recruit-table .c-recruit-table__row:hover {
  background-color: var(--bg-secondary);
}

#recruit.c-recruit-table .c-recruit-table__header-cell {
  flex: 0 0 200px;
  padding: 20px;
  font-weight: bold;
  color: #333;
  background-color: #f9f9f9;
}

#recruit.c-recruit-table .c-recruit-table__data-cell {
  flex: 1;
  padding: 20px;
  color: #555;
  background-color: #fff;
  margin: 0;
}

#recruit.c-recruit-table .c-recruit-table__data-cell a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

#recruit.c-recruit-table .c-recruit-table__data-cell a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* モバイル対応: 768px以下で縦積み */
@media (max-width: 768px) {
  #recruit.c-recruit-table .c-recruit-table__row {
    flex-direction: column;
  }
  
  #recruit.c-recruit-table .c-recruit-table__header-cell {
    flex: none;
    padding: 15px 20px 8px;
    background-color: transparent;
  }
  
  #recruit.c-recruit-table .c-recruit-table__data-cell {
    padding: 8px 20px 15px;
  }
}

/* ========================================
   お知らせページ（Info）- スタッフページ風レイアウト 完成版
   スコープ: body#info のみ
======================================== */

body#info .autopagerize_page_element {
  max-width: 1000px;
  margin: 0 auto;
}

/* 記事ブロック本体 */
body#info .autopagerize_page_element > .article {
  margin: 0 0 72px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* 日付ピル */
body#info .autopagerize_page_element > .article > .date {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  word-break: break-word;
}

/* 画像 + テキストの2カラム */
body#info .autopagerize_page_element > .article > .body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas:
    "photo title"
    "photo text";
  gap: 14px 40px;
  align-items: start;
}

/* 偶数記事は左右反転 */
body#info .autopagerize_page_element > .article:nth-child(even) > .body {
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "title photo"
    "text photo";
}

body#info .autopagerize_page_element > .article > .body > .photo {
  grid-area: photo;
  width: 100%;
  min-height: 320px;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #d8d8d8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body#info .autopagerize_page_element > .article > .body > .photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body#info .autopagerize_page_element > .article > .body > .photo:empty {
  min-height: 240px;
}

/* タイトル */
body#info .autopagerize_page_element > .article > .body .article_title {
  grid-area: title;
  margin: 0;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-primary);
}

body#info .autopagerize_page_element > .article > .body .article_title a {
  color: inherit;
  text-decoration: none;
}

body#info .autopagerize_page_element > .article > .body .article_title a:hover {
  color: var(--accent-primary);
}

/* 本文 */
body#info .autopagerize_page_element > .article > .body .textfield {
  grid-area: text;
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: #555;
}

body#info .autopagerize_page_element > .article > .body .textfield p {
  margin: 0 0 12px;
}

body#info .autopagerize_page_element > .article > .body .textfield a {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* モバイル: 1カラム縦積み */
@media (max-width: 900px) {
  body#info .autopagerize_page_element > .article {
    margin-bottom: 52px;
  }

  body#info .autopagerize_page_element > .article > .date {
    margin-bottom: 12px;
    font-size: 11px;
    padding: 5px 13px;
  }

  body#info .autopagerize_page_element > .article > .body,
  body#info .autopagerize_page_element > .article:nth-child(even) > .body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "title"
      "text";
    gap: 12px;
  }

  body#info .autopagerize_page_element > .article > .body > .photo {
    min-height: 230px;
  }

  body#info .autopagerize_page_element > .article > .body .article_title {
    font-size: 22px;
    line-height: 1.4;
  }

  body#info .autopagerize_page_element > .article > .body .textfield {
    font-size: 15px;
    line-height: 1.85;
  }
}

/* ========================================
   ナビゲーション サブメニュー UI改修
   スコープ: #header .primary-nav のみ
======================================== */

/* サブメニュー共通：箇条書き削除 */
#header .primary-nav .sub_navi {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header .primary-nav .sub_navi li {
  margin: 0;
  padding: 0;
}

#header .primary-nav .sub_navi li a {
  display: block;
  text-decoration: none;
}

/* サブメニュートグルボタン */
#header .primary-nav .sub_navi_toggle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-left: 8px;
  vertical-align: middle;
}

/* トグルボタン：+アイコン（デフォルト） */
#header .primary-nav .sub_navi_toggle::before,
#header .primary-nav .sub_navi_toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--text-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#header .primary-nav .sub_navi_toggle::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

#header .primary-nav .sub_navi_toggle::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

/* トグルボタン：-アイコン（開いているとき） */
#header .primary-nav .sub_navi_open .sub_navi_toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* PC表示（769px以上）：ドロップダウン（max-width: 768px と対） */
@media (min-width: 769px) {
  #header .primary-nav .navi_list > li {
    position: relative;
  }
  
  /* サブメニュー：デフォルト非表示 */
  #header .primary-nav .sub_navi {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  
  /* 親メニュー hover / focus-within でサブメニュー表示 */
  #header .primary-nav .navi_list > li:hover > .sub_navi,
  #header .primary-nav .navi_list > li:focus-within > .sub_navi {
    display: block;
  }
  
  /* サブメニュー項目 */
  #header .primary-nav .sub_navi li {
    border-bottom: 1px solid var(--border-color);
  }
  
  #header .primary-nav .sub_navi li:last-child {
    border-bottom: none;
  }
  
  #header .primary-nav .sub_navi li a {
    padding: 12px 20px;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  #header .primary-nav .sub_navi li a:hover {
    background-color: var(--accent-soft);
    color: var(--accent-primary);
  }
  
  /* トグルボタン：PC表示時は非表示 */
  #header .primary-nav .sub_navi_toggle {
    display: none;
  }
}

/* SP表示（768px以下）：トグル開閉 */
@media (max-width: 768px) {
  /* サブメニュー：デフォルト非表示 */
  #header .primary-nav .sub_navi {
    display: none;
    padding-left: 20px;
    margin-top: 10px;
  }
  
  /* 開いているときのみ表示 */
  #header .primary-nav .sub_navi_open > .sub_navi {
    display: block;
  }
  
  /* サブメニュー項目 */
  #header .primary-nav .sub_navi li {
    border-bottom: 1px solid #f0f0f0;
  }
  
  #header .primary-nav .sub_navi li:last-child {
    border-bottom: none;
  }
  
  #header .primary-nav .sub_navi li a {
    padding: 10px 15px;
    color: var(--text-muted);
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  #header .primary-nav .sub_navi li a:hover {
    background-color: var(--accent-soft);
    color: var(--accent-primary);
  }
  
  /* トグルボタン：SP表示時のみ表示 */
  #header .primary-nav .sub_navi_toggle {
    display: inline-block;
  }
}

/* ========================================
   メニューページ（Menu）- 和モダン・ネオミニマリズム
   スコープ: #menu のみ（他ページへの影響なし）
======================================== */

/* メニューページ全体コンテナ */
#menu .inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* カテゴリ見出し */
#menu .list .category_title {
  font-size: 28px;
  font-weight: bold;
  color: var(--accent-primary);
  margin: 60px 0 40px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
  letter-spacing: 0.08em;
}

#menu .list:first-child .category_title {
  margin-top: 0;
}

/* メニュー記事ブロック */
#menu .list .article {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-areas:
    "photo header"
    "photo text"
    "photo toggle";
  gap: 20px 40px;
  align-items: start;
  margin-bottom: 60px;
  padding: 30px;
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#menu .list .article:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* 画像エリア */
#menu .list .article .photo {
  grid-area: photo;
  width: 100%;
  height: 320px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#menu .list .article .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像なし（onerrorで付与） */
#menu .list .article.no-photo {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "text"
    "toggle";
}

#menu .list .article.no-photo .photo {
  display: none;
}

/* メニューヘッダー（タイトル + 価格） */
#menu .list .article .menu-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 8px;
}

/* タイトル */
#menu .list .article .article_title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* おすすめラベル */
#menu .list .article .article_title .recommend {
  display: inline-block;
  background-color: var(--accent-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

#menu .list .article .article_title .recommend:empty {
  display: none;
}

/* 価格 */
#menu .list .article .price {
  font-size: 26px;
  font-weight: bold;
  color: var(--accent-primary);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}

/* 説明文 */
#menu .list .article .text.textfield {
  grid-area: text;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#menu .list .article .text.textfield.expanded {
  display: block;
  overflow: visible;
}

#menu .list .article .text.textfield p {
  margin: 0 0 12px;
}

#menu .list .article .text.textfield p:last-child {
  margin-bottom: 0;
}

/* 続きを読むボタン */
#menu .list .article .menu-toggle {
  grid-area: toggle;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--accent-primary);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#menu .list .article .menu-toggle:hover {
  opacity: 0.7;
}

/* モバイル対応: 900px以下で1カラム縦積み */
@media (max-width: 900px) {
  #menu .list .category_title {
    font-size: 24px;
    margin: 40px 0 30px;
    padding-bottom: 12px;
  }
  
  #menu .list .article {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "header"
      "text";
    gap: 20px;
    padding: 20px;
    margin-bottom: 40px;
  }
  
  #menu .list .article .photo {
    height: 240px;
  }
  
  #menu .list .article .menu-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  #menu .list .article .article_title {
    font-size: 20px;
  }
  
  #menu .list .article .article_title .recommend {
    font-size: 11px;
    padding: 3px 8px;
  }
  
  #menu .list .article .price {
    font-size: 22px;
  }
  
  #menu .list .article .text.textfield {
    font-size: 15px;
    line-height: 1.85;
  }
}

/* タブレット対応: 768px以下でさらに調整 */
@media (max-width: 768px) {
  #menu .list .category_title {
    font-size: 22px;
    margin: 30px 0 20px;
  }
  
  #menu .list .article {
    padding: 16px;
    margin-bottom: 30px;
  }
  
  #menu .list .article .photo {
    height: 200px;
  }
  
  #menu .list .article .article_title {
    font-size: 18px;
  }
  
  #menu .list .article .price {
    font-size: 20px;
  }
  
  #menu .list .article .text.textfield {
    font-size: 14px;
  }
}

/* ========================================
   日記ページ（Diary）
   スコープ: body#diary のみ（他ページへの影響なし）
======================================== */

body#diary .autopagerize_page_element > .article {
  margin-bottom: 56px;
}

/* 日付ピル（お知らせと同スタイル） */
body#diary .autopagerize_page_element > .article > .date {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

body#diary .autopagerize_page_element > .article > .body .article_title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}

body#diary .autopagerize_page_element > .article > .body .article_title a {
  color: inherit;
  text-decoration: none;
}

body#diary .autopagerize_page_element > .article > .body .article_title a:hover {
  color: var(--accent-primary);
}

body#diary .autopagerize_page_element > .article > .body .textfield {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 768px) {
  body#diary .autopagerize_page_element > .article > .date {
    font-size: 11px;
    padding: 5px 13px;
  }
}

/* ========================================
   写真一覧ページ（Photo）- ギャラリーレイアウト
   和モダン・ネオミニマリズム
   スコープ: body#photo のみ（他ページへの影響なし）
======================================== */

/* アルバム見出し */
body#photo #index .album {
  margin-bottom: 80px;
}

body#photo #index .album:last-child {
  margin-bottom: 60px;
}

body#photo #index .album .album_title {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-color);
  letter-spacing: 0.08em;
}

body#photo #index .album .album_title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

body#photo #index .album .album_title a:hover {
  color: var(--accent-hover);
}

/* ギャラリーグリッド: PC表示（4列） */
body#photo #index .album {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 30px;
}

body#photo #index .album .album_title {
  grid-column: 1 / -1;
}

/* サムネイル画像のグリッド */
body#photo #index .album {
  display: block;
}

body#photo #index .album::after {
  content: "";
  display: table;
  clear: both;
}

/* グリッドレイアウトの実装 */
body#photo #index .album .thumb {
  float: left;
  width: calc(25% - 22.5px);
  margin-right: 30px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body#photo #index .album .thumb:nth-child(4n+1) {
  clear: left;
}

body#photo #index .album .thumb:nth-child(4n) {
  margin-right: 0;
}

/* 画像カード */
body#photo #index .album .thumb a.photo-trigger {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
  cursor: pointer;
}

body#photo #index .album .thumb a.photo-trigger::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  z-index: 1;
}

body#photo #index .album .thumb a.photo-trigger::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

body#photo #index .album .thumb a.photo-trigger img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* ホバー効果 */
body#photo #index .album .thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

body#photo #index .album .thumb:hover a.photo-trigger::before {
  background: rgba(0, 0, 0, 0.3);
}

body#photo #index .album .thumb:hover a.photo-trigger::after {
  opacity: 1;
}

body#photo #index .album .thumb:hover a.photo-trigger img {
  transform: scale(1.05);
}

/* 詳細ページ（#entries）のスタイル */
body#photo #entries h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-primary);
  margin: 60px 0 40px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-color);
  letter-spacing: 0.08em;
}

body#photo #entries h3:first-child {
  margin-top: 0;
}

body#photo #entries .autopagerize_page_element .article {
  margin-bottom: 60px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

body#photo #entries .autopagerize_page_element .article:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body#photo #entries .autopagerize_page_element .article .photo {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

body#photo #entries .autopagerize_page_element .article .photo img {
  width: 100%;
  height: auto;
  display: block;
}

body#photo #entries .autopagerize_page_element .article h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 15px;
  line-height: 1.4;
}

body#photo #entries .autopagerize_page_element .article .textfield {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 15px;
}

body#photo #entries .autopagerize_page_element .article .date {
  font-size: 14px;
  color: #888;
  text-align: right;
}

/* レスポンシブ: 1024px以下（3列） */
@media (max-width: 1024px) {
  body#photo #index .album .thumb {
    width: calc(33.333% - 20px);
    margin-right: 30px;
  }
  
  body#photo #index .album .thumb:nth-child(4n+1) {
    clear: none;
  }
  
  body#photo #index .album .thumb:nth-child(4n+5) {
    margin-right: 30px;
  }
  
  body#photo #index .album .thumb:nth-child(3n+1) {
    clear: left;
  }
  
  body#photo #index .album .thumb:nth-child(3n+4) {
    margin-right: 0;
  }
}

/* レスポンシブ: 768px以下（2列） */
@media (max-width: 768px) {
  body#photo #index .album {
    margin-bottom: 60px;
  }
  
  body#photo #index .album .album_title {
    font-size: 22px;
    margin-bottom: 20px;
    padding-bottom: 12px;
  }
  
  body#photo #index .album .thumb {
    width: calc(50% - 10px);
    margin-right: 20px;
    margin-bottom: 20px;
  }
  
  body#photo #index .album .thumb:nth-child(3n+1) {
    clear: none;
  }
  
  body#photo #index .album .thumb:nth-child(3n+4) {
    margin-right: 20px;
  }
  
  body#photo #index .album .thumb:nth-child(2n+1) {
    clear: left;
  }
  
  body#photo #index .album .thumb:nth-child(2n+3) {
    margin-right: 0;
  }
  
  body#photo #index .album .thumb a.photo-trigger::after {
    font-size: 24px;
  }
  
  /* 詳細ページ */
  body#photo #entries h3 {
    font-size: 22px;
    margin: 40px 0 30px;
  }
  
  body#photo #entries .autopagerize_page_element .article {
    padding: 20px;
    margin-bottom: 40px;
  }
  
  body#photo #entries .autopagerize_page_element .article h4 {
    font-size: 18px;
  }
  
  body#photo #entries .autopagerize_page_element .article .textfield {
    font-size: 15px;
    line-height: 1.85;
  }
}

/* レスポンシブ: 480px以下（1列） */
@media (max-width: 480px) {
  body#photo #index .album .thumb {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  body#photo #index .album .thumb:nth-child(2n+1) {
    clear: none;
  }
  
  body#photo #index .album .thumb:nth-child(2n+3) {
    margin-right: 0;
  }
}

/* ========================================
   カレンダーページ（Calendar）- 和モダン・ネオミニマリズム
   スコープ: #calendar のみ（他ページへの影響なし）
======================================== */

/* 月ナビゲーション */
#calendar .wrap_calendar .navi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
}

#calendar .wrap_calendar .navi a {
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

#calendar .wrap_calendar .navi a:hover {
  background-color: var(--accent-soft);
  color: var(--accent-primary);
}

#calendar .wrap_calendar .navi .current {
  font-weight: 700;
  color: var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
}

/* カレンダー本体（table） */
#calendar .wrap_calendar table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 50px;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#calendar .wrap_calendar table th {
  padding: 15px 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  background-color: #f5f5f5;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
  letter-spacing: 0.05em;
}

#calendar .wrap_calendar table td {
  padding: 12px 10px;
  text-align: center;
  vertical-align: top;
  border: 1px solid #f0f0f0;
  font-size: 16px;
  color: var(--text-primary);
  background-color: #ffffff;
  min-height: 80px;
  transition: background-color 0.2s ease;
}

#calendar .wrap_calendar table td:hover {
  background-color: var(--bg-secondary);
}

#calendar .wrap_calendar table td a {
  display: inline-block;
  padding: 4px 10px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

#calendar .wrap_calendar table td a:hover {
  background-color: var(--accent-soft);
  color: var(--accent-primary);
  font-weight: 600;
}

/* 土曜日・日曜日の色付け */
#calendar .wrap_calendar table td.saturday {
  color: #0066cc;
}

#calendar .wrap_calendar table td.sunday,
#calendar .wrap_calendar table td.holiday {
  color: var(--accent-primary);
}

/* 今日の日付を強調 */
#calendar .wrap_calendar table td.today {
  background-color: var(--accent-soft);
  font-weight: 700;
  border: 2px solid var(--accent-primary);
}

/* スケジュール一覧 */
#calendar .schedule {
  max-width: 900px;
  margin: 0 auto 50px;
}

#calendar .schedule .article {
  padding: 25px 30px;
  margin-bottom: 20px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#calendar .schedule .article:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

#calendar .schedule .article dt.date {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  letter-spacing: 0.05em;
}

#calendar .schedule .article dd {
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  border-bottom: 1px solid #f5f5f5;
}

#calendar .schedule .article dd:last-child {
  border-bottom: none;
}

#calendar .schedule .article dd .category {
  display: inline-block;
  padding: 4px 12px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--accent-primary);
  border-radius: 20px;
  letter-spacing: 0.05em;
}

#calendar .schedule .article dd .schedule_time {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 10px;
}

#calendar .schedule .article dd .schedule_title {
  color: #555;
  text-decoration: none;
  transition: color 0.3s ease;
}

#calendar .schedule .article dd a {
  text-decoration: none;
}

#calendar .schedule .article dd a:hover .schedule_title {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* 詳細表示 */
#calendar .details {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 30px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#calendar .details > div:first-child {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

#calendar .details .category {
  display: inline-block;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--accent-primary);
  border-radius: 20px;
  letter-spacing: 0.05em;
}

#calendar .details .date {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

#calendar .details h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

#calendar .details .body.textfield {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 30px;
}

#calendar .details .body.textfield p {
  margin-bottom: 20px;
}

#calendar .details .image {
  margin-top: 30px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
}

#calendar .details .image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* レスポンシブ: 900px以下 */
@media (max-width: 900px) {
  #calendar .wrap_calendar .navi {
    flex-wrap: wrap;
    gap: 10px;
  }

  #calendar .wrap_calendar .navi a {
    padding: 6px 15px;
    font-size: 14px;
  }

  #calendar .wrap_calendar table {
    font-size: 14px;
  }

  #calendar .wrap_calendar table th {
    padding: 10px 5px;
    font-size: 12px;
  }

  #calendar .wrap_calendar table td {
    padding: 8px 5px;
    font-size: 14px;
    min-height: 60px;
  }

  #calendar .schedule .article {
    padding: 20px;
  }

  #calendar .schedule .article dt.date {
    font-size: 16px;
  }

  #calendar .schedule .article dd {
    font-size: 15px;
  }

  #calendar .details {
    padding: 30px 20px;
  }

  #calendar .details h3 {
    font-size: 22px;
  }

  #calendar .details .body.textfield {
    font-size: 15px;
    line-height: 1.85;
  }
}

/* レスポンシブ: 768px以下（モバイル） */
@media (max-width: 768px) {
  #calendar .wrap_calendar table {
    font-size: 12px;
  }

  #calendar .wrap_calendar table th {
    padding: 8px 3px;
    font-size: 11px;
  }

  #calendar .wrap_calendar table td {
    padding: 6px 3px;
    font-size: 12px;
    min-height: 50px;
  }

  #calendar .wrap_calendar table td a {
    padding: 3px 6px;
    font-size: 12px;
  }

  #calendar .schedule .article {
    padding: 15px;
    margin-bottom: 15px;
  }

  #calendar .schedule .article dt.date {
    font-size: 15px;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  #calendar .schedule .article dd {
    padding: 8px 0;
    font-size: 14px;
  }

  #calendar .schedule .article dd .category {
    display: block;
    width: fit-content;
    margin-bottom: 8px;
  }

  #calendar .details {
    padding: 20px 15px;
  }

  #calendar .details h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  #calendar .details .body.textfield {
    font-size: 14px;
  }
}

/* ========================================
   予約ページ（Reservation）- Glass準拠 + Daikichi和モダン
   スコープ: #reservation のみ（旧予約/イベント予約両対応）
   ※ #reservation 起点でスコープを限定
======================================== */

/* フォーム全体 - Glass準拠 + Daikichi和モダン */
#reservation form {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* メッセージエリア共通 */
#reservation form .message {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.8;
}

/* バリデーションエラーメッセージ */
#reservation form .message .error_message {
  padding: 16px 20px;
  background-color: #fee2e2;
  border-left: 4px solid #dc2626;
  color: #991b1b;
}

/* 送信完了メッセージ */
#reservation form .message .success_message {
  padding: 16px 20px;
  background-color: var(--accent-soft);
  border-left: 4px solid var(--accent-primary);
  color: var(--text-primary);
}

/* イベント予約バリデーションエラーメッセージ */
.p-event-reservation .p-notification--warning {
  padding: 16px 20px;
  margin-bottom: 24px;
  background-color: #fee2e2;
  border-left: 4px solid #dc2626;
  color: #991b1b;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

.p-event-reservation .p-notification--warning strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

/* 予約エリア（reservation_area）- Glass準拠 */
#reservation .reservation_area {
  margin-bottom: 24px;
}

#reservation .reservation_area:first-child {
  margin-top: 0;
}

/* ラベル - Glass準拠 + Daikichi */
#reservation .reservation_area > label,
#reservation dt {
  display: block;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* 必須マーク */
#reservation .reservation_area .requier,
#reservation .reservation_area .required,
#reservation em {
  color: var(--accent-primary);
  font-style: normal;
  font-weight: 700;
  margin-left: 4px;
}

/* ddエリア（日時セレクト用） */
#reservation dd {
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* テキスト入力フィールド - Glass準拠 */
#reservation .reservation_area input[type="text"],
#reservation .reservation_area input[type="email"],
#reservation .reservation_area input[type="tel"],
#reservation .reservation_area textarea,
#reservation input[type="text"],
#reservation input[type="email"],
#reservation input[type="tel"],
#reservation textarea {
  width: 100%;
  max-width: 450px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #1e293b;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  transition: all 0.3s ease;
}

#reservation .reservation_area textarea,
#reservation textarea {
  min-height: 140px;
  max-width: 100%;
  resize: vertical;
}

/* セレクトボックス - Glass準拠 */
#reservation .reservation_area select,
#reservation dd select,
#reservation select {
  width: auto;
  min-width: 100px;
  padding: 10px 36px 10px 14px;
  font-size: 16px;
  color: #1e293b;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23333" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 年月日時分セレクト（旧予約用） */
#reservation dd select {
  flex: 0 0 auto;
  min-width: 90px;
}

#reservation dd select[name*="year"],
#reservation dd select[name*="年"] {
  min-width: 100px;
}

#reservation dd select[name*="month"],
#reservation dd select[name*="月"],
#reservation dd select[name*="day"],
#reservation dd select[name*="日"],
#reservation dd select[name*="hour"],
#reservation dd select[name*="時"],
#reservation dd select[name*="minute"],
#reservation dd select[name*="分"] {
  min-width: 80px;
}

/* フォーカス状態 - Glass準拠 + Daikichiカラー */
#reservation .reservation_area input:focus,
#reservation .reservation_area textarea:focus,
#reservation .reservation_area select:focus,
#reservation input:focus,
#reservation textarea:focus,
#reservation select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-transparent);
  background: rgba(255, 255, 255, 1);
}

/* ホバー状態 */
#reservation .reservation_area input:hover,
#reservation .reservation_area textarea:hover,
#reservation .reservation_area select:hover,
#reservation input:hover,
#reservation textarea:hover,
#reservation select:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

/* ラジオボタン・チェックボックス */
#reservation .reservation_area .radio,
#reservation .reservation_area .checkbox,
#reservation .radio,
#reservation .checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 8px;
}

#reservation .reservation_area .radio input[type="radio"],
#reservation .reservation_area .checkbox input[type="checkbox"],
#reservation .radio input[type="radio"],
#reservation .checkbox input[type="checkbox"] {
  width: auto;
  margin: 0 8px 0 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

#reservation .reservation_area .radio label,
#reservation .reservation_area .checkbox label,
#reservation .radio label,
#reservation .checkbox label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  font-size: 14px;
}

/* コース名・コース本文 */
#reservation .reservation_course_name {
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
  letter-spacing: 0.03em;
}

#reservation .reservation_course_name:hover {
  text-decoration: underline;
}

#reservation .reservation_course_body {
  margin: 12px 0 12px 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

#reservation .reservation_course_body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 送信ボタン - Glass準拠 + Daikichiカラー */
#reservation .button_area,
#reservation form > input[type="submit"]:last-of-type {
  margin-top: 32px;
  text-align: center;
}

#reservation .button_area input[type="submit"],
#reservation .button_area .button,
#reservation input[type="submit"],
#reservation button[type="submit"],
#reservation .button {
  display: inline-block;
  min-width: 240px;
  padding: 14px 48px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s ease;
}

#reservation .button_area input[type="submit"]:hover,
#reservation .button_area .button:hover,
#reservation input[type="submit"]:hover,
#reservation button[type="submit"]:hover,
#reservation .button:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-transparent);
  transform: translateY(-2px);
}

/* 案内エリア（.list .info）- イベント予約用 */
#reservation .list {
  max-width: 900px;
  margin: 0 auto;
}

#reservation .list .info {
  padding: 30px;
  margin-bottom: 40px;
  background: rgba(249, 249, 249, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#reservation .list .info .note {
  padding: 15px 20px;
  margin-bottom: 20px;
  background: #ffffff;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.9;
  border-left: 4px solid var(--accent-primary);
  border-radius: 6px;
}

#reservation .list .info .summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

#reservation .list .info .summary .tel {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.05em;
}

#reservation .list .info .summary .tel a {
  color: inherit;
  text-decoration: none;
}

#reservation .list .info .summary .tel a:hover {
  text-decoration: underline;
}

#reservation .list .info .summary .time {
  font-size: 14px;
  color: #555;
}

/* イベント一覧（.list .articles）*/
#reservation .list .articles {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#reservation .list .articles .article {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

#reservation .list .articles .article:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* イベント画像 */
#reservation .list .articles .article .image {
  width: 100%;
  height: 320px;
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

#reservation .list .articles .article .image:empty {
  background-image: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  position: relative;
}

#reservation .list .articles .article .image:empty::after {
  content: 'NO IMAGE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 600;
  color: #bbb;
  letter-spacing: 0.1em;
}

/* イベント情報 */
#reservation .list .articles .article .summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

#reservation .list .articles .article .summary .article_title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

#reservation .list .articles .article .summary .text {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

#reservation .list .articles .article .summary .text p {
  margin: 0 0 12px;
}

#reservation .list .articles .article .summary .text p:last-child {
  margin-bottom: 0;
}

/* レスポンシブ: 900px以下（タブレット） */
@media (max-width: 900px) {
  #reservation form {
    padding: 28px 20px;
    margin-bottom: 32px;
  }

  #reservation form .message {
    font-size: 13px;
    margin-bottom: 20px;
  }

  #reservation form .message .error_message,
  #reservation form .message .success_message {
    padding: 14px 18px;
  }

  #reservation .reservation_area {
    margin-bottom: 20px;
  }

  #reservation .reservation_area > label,
  #reservation dt {
    font-size: 14px;
  }

  #reservation .reservation_area input[type="text"],
  #reservation .reservation_area input[type="email"],
  #reservation .reservation_area input[type="tel"],
  #reservation .reservation_area select,
  #reservation .reservation_area textarea,
  #reservation input[type="text"],
  #reservation input[type="email"],
  #reservation input[type="tel"],
  #reservation select,
  #reservation textarea {
    font-size: 15px;
    padding: 11px 14px;
  }

  #reservation .reservation_area select,
  #reservation dd select,
  #reservation select {
    padding: 11px 32px 11px 14px;
  }

  #reservation .button_area input[type="submit"],
  #reservation .button_area .button,
  #reservation input[type="submit"],
  #reservation button[type="submit"],
  #reservation .button {
    width: 100%;
    max-width: 100%;
    padding: 14px 32px;
    font-size: 15px;
  }

  #reservation .list .info {
    padding: 25px 20px;
    margin-bottom: 32px;
  }

  #reservation .list .info .note {
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 16px;
  }

  #reservation .list .info .summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #reservation .list .info .summary .tel {
    font-size: 18px;
  }

  #reservation .list .info .summary .time {
    font-size: 13px;
  }

  /* イベント一覧: 1カラム縦積み */
  #reservation .list .articles {
    gap: 24px;
  }

  #reservation .list .articles .article {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 25px 20px;
  }

  #reservation .list .articles .article .image {
    height: 240px;
  }

  #reservation .list .articles .article .summary .article_title {
    font-size: 21px;
  }

  #reservation .list .articles .article .summary .text {
    font-size: 15px;
  }
}

/* レスポンシブ: 768px以下（モバイル） */
@media (max-width: 768px) {
  #reservation form {
    padding: 24px 16px;
    margin-bottom: 28px;
  }

  #reservation form .message {
    font-size: 13px;
    margin-bottom: 18px;
  }

  #reservation form .message .error_message,
  #reservation form .message .success_message {
    padding: 12px 16px;
  }

  #reservation .reservation_area {
    margin-bottom: 18px;
  }

  #reservation .reservation_area > label,
  #reservation dt {
    font-size: 13px;
  }

  #reservation .reservation_area input[type="text"],
  #reservation .reservation_area input[type="email"],
  #reservation .reservation_area input[type="tel"],
  #reservation .reservation_area select,
  #reservation .reservation_area textarea,
  #reservation input[type="text"],
  #reservation input[type="email"],
  #reservation input[type="tel"],
  #reservation select,
  #reservation textarea {
    font-size: 14px;
    padding: 10px 13px;
  }

  #reservation .reservation_area select,
  #reservation dd select,
  #reservation select {
    padding: 10px 30px 10px 13px;
    min-width: 80px;
  }

  #reservation .reservation_area textarea,
  #reservation textarea {
    min-height: 120px;
  }

  #reservation .reservation_course_body {
    margin-left: 16px;
    padding: 12px 14px;
    font-size: 13px;
  }

  #reservation .button_area {
    margin-top: 24px;
  }

  #reservation .button_area input[type="submit"],
  #reservation .button_area .button,
  #reservation input[type="submit"],
  #reservation button[type="submit"],
  #reservation .button {
    padding: 13px 28px;
    font-size: 14px;
  }

  #reservation .list .info {
    padding: 20px 16px;
    margin-bottom: 24px;
  }

  #reservation .list .info .note {
    padding: 11px 14px;
    font-size: 12px;
    margin-bottom: 14px;
  }

  #reservation .list .info .summary .tel {
    font-size: 17px;
  }

  #reservation .list .info .summary .time {
    font-size: 12px;
  }

  #reservation .list .articles {
    gap: 20px;
  }

  #reservation .list .articles .article {
    padding: 20px 16px;
  }

  #reservation .list .articles .article .image {
    height: 200px;
  }

  #reservation .list .articles .article .summary .article_title {
    font-size: 18px;
  }

  #reservation .list .articles .article .summary .text {
    font-size: 14px;
  }

  /* 旧予約: 日時セレクト2列グリッド（モバイル） */
  #reservation dd {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: center;
  }

  #reservation dd select {
    width: 100%;
    min-width: unset;
  }

  #reservation dd select[name*="year"],
  #reservation dd select[name*="年"] {
    grid-column: 1 / 2;
  }

  #reservation dd select[name*="month"],
  #reservation dd select[name*="月"] {
    grid-column: 2 / 3;
  }

  #reservation dd select[name*="day"],
  #reservation dd select[name*="日"] {
    grid-column: 1 / 2;
  }

  #reservation dd select[name*="hour"],
  #reservation dd select[name*="時"] {
    grid-column: 1 / 2;
  }

  #reservation dd select[name*="minute"],
  #reservation dd select[name*="分"] {
    grid-column: 2 / 3;
  }

  #reservation dd input[type="text"],
  #reservation dd input[type="email"],
  #reservation dd input[type="tel"],
  #reservation dd textarea {
    grid-column: 1 / -1;
  }
}

/* 旧予約ページで長方形化を防止 */
body#reservation.is-legacy-reservation .totop {
  left: auto;
  width: auto;
  height: auto;
}

/* ページトップボタン: モバイル対応 */
@media (max-width: 768px) {
  .totop {
    right: 12px;
    bottom: 12px;
  }

  .totop .button,
  .totop a,
  .totop button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    font-size: 24px;
  }

  body#reservation.is-legacy-reservation .totop .button,
  body#reservation.is-legacy-reservation .totop a,
  body#reservation.is-legacy-reservation .totop button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
  }

  body#reservation .totop .button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    font-size: 22px !important;
  }
}

/* ========================================
   ブログ（日記）ページ - 和モダン・ネオミニマリズム
   スコープ: .free-content .p-diary のみ（他ページへの影響なし）
======================================== */

/* ブログ全体コンテナ */
.free-content .p-diary {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

/* ブログ記事カード */
.free-content .p-diary__unit {
  margin-bottom: 60px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.free-content .p-diary__unit:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* 投稿日時 */
.free-content .p-diary__date,
.p-diary__date {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  background: var(--accent-soft);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

/* タイトル */
.free-content .p-diary__title {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

.free-content .p-diary__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.free-content .p-diary__title a:hover {
  color: var(--accent-primary);
}

/* カテゴリタグ */
.free-content .p-diary__category {
  margin-bottom: 24px;
}

.free-content .p-diary__category a {
  display: inline-block;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--accent-primary);
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.free-content .p-diary__category a:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
}

/* 空のカテゴリを非表示 */
.free-content .p-diary__category:has(a[href=""]),
.free-content .p-diary__category:has(a:empty) {
  display: none;
}

.free-content .p-diary__category a[href=""],
.free-content .p-diary__category a:empty {
  display: none;
}

/* 本文エリア */
.free-content .p-diary__body {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

/* WYSIWYG内の見出し */
.free-content .p-diary__body h2,
.free-content .p-diary__body h3,
.free-content .p-diary__body h4,
.free-content .p-diary__body h5,
.free-content .p-diary__body h6 {
  margin: 30px 0 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.free-content .p-diary__body h2 {
  font-size: 24px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
}

.free-content .p-diary__body h3 {
  font-size: 20px;
  border-left: 4px solid var(--accent-primary);
  padding-left: 12px;
}

.free-content .p-diary__body h4 {
  font-size: 18px;
}

.free-content .p-diary__body h5,
.free-content .p-diary__body h6 {
  font-size: 16px;
}

/* WYSIWYG内の段落 */
.free-content .p-diary__body p {
  margin: 0 0 16px;
  line-height: 1.9;
}

.free-content .p-diary__body p:last-child {
  margin-bottom: 0;
}

/* WYSIWYG内の画像 */
.free-content .p-diary__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* WYSIWYG内のリンク */
.free-content .p-diary__body a {
  color: var(--accent-primary);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.free-content .p-diary__body a:hover {
  color: var(--accent-hover);
}

/* WYSIWYG内のリスト */
.free-content .p-diary__body ul,
.free-content .p-diary__body ol {
  margin: 16px 0;
  padding-left: 30px;
}

.free-content .p-diary__body li {
  margin-bottom: 8px;
  line-height: 1.8;
}

/* WYSIWYG内のテーブル */
.free-content .p-diary__body table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  background: #ffffff;
}

.free-content .p-diary__body table th,
.free-content .p-diary__body table td {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  text-align: left;
}

.free-content .p-diary__body table th {
  background: #f5f5f5;
  font-weight: 700;
  color: var(--text-primary);
}

/* WYSIWYG内の引用 */
.free-content .p-diary__body blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent-primary);
  font-style: italic;
  color: #555;
}

/* WYSIWYG内のコードブロック */
.free-content .p-diary__body pre,
.free-content .p-diary__body code {
  font-family: 'Courier New', Courier, monospace;
  background: #f5f5f5;
  border-radius: 4px;
}

.free-content .p-diary__body pre {
  padding: 16px;
  margin: 24px 0;
  overflow-x: auto;
  line-height: 1.6;
}

.free-content .p-diary__body code {
  padding: 2px 6px;
  font-size: 14px;
}

.free-content .p-diary__body pre code {
  padding: 0;
}

/* WYSIWYG内の水平線 */
.free-content .p-diary__body hr {
  margin: 32px 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

/* レスポンシブ: 900px以下（タブレット） */
@media (max-width: 900px) {
  .free-content .p-diary__unit {
    padding: 32px 24px;
    margin-bottom: 48px;
  }

  .free-content .p-diary__date {
    font-size: 11px;
    padding: 5px 14px;
    margin-bottom: 14px;
  }

  .free-content .p-diary__title {
    font-size: 24px;
    margin-bottom: 14px;
  }

  .free-content .p-diary__category {
    margin-bottom: 20px;
  }

  .free-content .p-diary__category a {
    font-size: 11px;
    padding: 5px 14px;
  }

  .free-content .p-diary__body {
    font-size: 15px;
  }

  .free-content .p-diary__body h2 {
    font-size: 22px;
  }

  .free-content .p-diary__body h3 {
    font-size: 19px;
  }

  .free-content .p-diary__body h4 {
    font-size: 17px;
  }
}

/* レスポンシブ: 768px以下（モバイル） */
@media (max-width: 768px) {
  .free-content .p-diary__unit {
    padding: 28px 20px;
    margin-bottom: 40px;
  }

  .free-content .p-diary__date {
    font-size: 10px;
    padding: 4px 12px;
    margin-bottom: 12px;
  }

  .free-content .p-diary__title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .free-content .p-diary__category {
    margin-bottom: 18px;
  }

  .free-content .p-diary__category a {
    font-size: 10px;
    padding: 4px 12px;
  }

  .free-content .p-diary__body {
    font-size: 14px;
    line-height: 1.85;
  }

  .free-content .p-diary__body h2 {
    font-size: 20px;
    margin: 24px 0 12px;
    padding-bottom: 8px;
  }

  .free-content .p-diary__body h3 {
    font-size: 18px;
    margin: 20px 0 10px;
    padding-left: 10px;
  }

  .free-content .p-diary__body h4 {
    font-size: 16px;
    margin: 18px 0 8px;
  }

  .free-content .p-diary__body h5,
  .free-content .p-diary__body h6 {
    font-size: 14px;
    margin: 16px 0 8px;
  }

  .free-content .p-diary__body p {
    margin: 0 0 14px;
  }

  .free-content .p-diary__body img {
    margin: 20px auto;
  }

  .free-content .p-diary__body ul,
  .free-content .p-diary__body ol {
    margin: 14px 0;
    padding-left: 24px;
  }

  .free-content .p-diary__body li {
    margin-bottom: 6px;
  }

  .free-content .p-diary__body table th,
  .free-content .p-diary__body table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .free-content .p-diary__body blockquote {
    margin: 20px 0;
    padding: 16px 20px;
  }

  .free-content .p-diary__body pre {
    padding: 12px;
    margin: 20px 0;
    font-size: 13px;
  }

  .free-content .p-diary__body hr {
    margin: 24px 0;
  }
}

/* ========================================
   ブログ（日記）ページ - Float/Clearfix 修正
   スコープ: body#blog, body#diary のみ
   目的: 投稿画像がフッターに重なる不具合を解消
======================================== */

/* 記事ブロック単位でフロート解消 */
body#blog .free-content .p-diary__unit,
body#diary .free-content .p-diary__unit {
  overflow: hidden;
}

body#blog .free-content .p-diary__unit::after,
body#diary .free-content .p-diary__unit::after {
  content: "";
  display: table;
  clear: both;
}

/* 本文領域にclearfixを適用 */
body#blog .free-content .p-diary__body::after,
body#diary .free-content .p-diary__body::after {
  content: "";
  display: table;
  clear: both;
}

/* 本文内画像を安全化（display:blockでfloatを無効化） */
body#blog .free-content .p-diary__body img,
body#diary .free-content .p-diary__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  float: none;
}

/* フッターにclear: bothを付けて重なり防止 */
body#blog #footer,
body#diary #footer {
  clear: both;
}

/* ブログページ全体のコンテナもclearfixを適用 */
body#blog #content,
body#diary #content {
  overflow: hidden;
}

body#blog #content::after,
body#diary #content::after {
  content: "";
  display: table;
  clear: both;
}

/* ブログ一覧ページ（.free-content）にもclearfix */
body#blog .free-content,
body#diary .free-content {
  overflow: hidden;
}

body#blog .free-content::after,
body#diary .free-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ========================================
   イベント予約ページ（Event Reservation）- Daikichi和モダン
   スコープ: #event-reservation .p-event-reservation のみ（他ページへの影響なし）
   参照: themes/Daikichi/reservation_event.md
======================================== */

/* イベント予約全体コンテナ */
#event-reservation .p-event-reservation {
  max-width: 1000px;
  margin: 0 auto;
}

/* ========================================
   共通コンポーネント: フィールドセット
======================================== */

/* フィールドセット本体 */
#event-reservation .p-event-reservation .p-fieldset {
  margin-bottom: 40px;
}

#event-reservation .p-event-reservation .p-fieldset--bgcolor {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* フィールドセットタイトル */
#event-reservation .p-event-reservation .p-fieldset__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  letter-spacing: 0.05em;
}

/* フィールドセットボディ */
#event-reservation .p-event-reservation .p-fieldset__body {
  padding: 0;
}

/* ========================================
   1. イベント予約一覧ページ
======================================== */

/* 結果統計 */
#event-reservation .p-event-reservation .p-result-stats {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-weight: 500;
}

/* サービスリスト */
#event-reservation .p-event-reservation .p-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* サービスカード */
#event-reservation .p-event-reservation .p-service-list__item {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

#event-reservation .p-event-reservation .p-service-list__item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

#event-reservation .p-event-reservation .p-service-list__item a {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas: "detail thumbnail";
  gap: 30px;
  padding: 30px;
  text-decoration: none;
  color: inherit;
}

/* サービス詳細 */
#event-reservation .p-event-reservation .p-service-list__detail {
  grid-area: detail;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* サービスタイトル */
#event-reservation .p-event-reservation .p-service-text__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.03em;
}

#event-reservation .p-event-reservation .p-service-list__item:hover .p-service-text__title {
  color: var(--accent-primary);
}

/* サービス価格 */
#event-reservation .p-event-reservation .p-service-text__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
  margin: 0;
}

/* サービスサムネイル */
#event-reservation .p-event-reservation .p-service-list__thumbnail {
  grid-area: thumbnail;
  width: 100%;
  height: 240px;
  background-color: #f5f5f5;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#event-reservation .p-event-reservation .p-service-list__thumbnail:empty {
  background-image: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  position: relative;
}

#event-reservation .p-event-reservation .p-service-list__thumbnail:empty::after {
  content: 'NO IMAGE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 600;
  color: #ccc;
  letter-spacing: 0.1em;
}

/* ========================================
   2. イベント予約詳細ページ
======================================== */

/* サービス詳細カード */
#event-reservation .p-event-reservation .p-service-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* サービス詳細タイトル */
#event-reservation .p-event-reservation .p-service-detail__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* サービス詳細価格 */
#event-reservation .p-event-reservation .p-service-detail__price {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
  margin: 0;
}

/* サービス詳細サムネイル */
#event-reservation .p-event-reservation .p-service-detail__thumbnail {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#event-reservation .p-event-reservation .p-service-detail__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サービス詳細説明 */
#event-reservation .p-event-reservation .p-service-detail__explanation {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

/* カレンダーエリア */
#event-reservation .p-event-reservation .p-event-reservation__calendar {
  margin-bottom: 30px;
}

/* v-calendar スタイル調整（Vue.js） */
#event-reservation .p-event-reservation .vc-container {
  border: none !important;
  background: transparent !important;
}

#event-reservation .p-event-reservation .vc-day.is-selected {
  background-color: var(--accent-primary) !important;
  color: #ffffff !important;
}

#event-reservation .p-event-reservation .vc-day:hover {
  background-color: var(--accent-soft) !important;
}

/* 予約リスト */
#event-reservation .p-event-reservation .p-event-reservation__list {
  margin-top: 30px;
}

#event-reservation .p-event-reservation .p-reservation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 予約リスト項目 */
#event-reservation .p-event-reservation .p-reservation-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#event-reservation .p-event-reservation .p-reservation-list__item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-primary);
}

/* 日付・時間エリア */
#event-reservation .p-event-reservation .p-reservation-list__date-wrap {
  flex: 1;
  min-width: 0;
}

/* 日付 */
#event-reservation .p-event-reservation .p-reservation-list__date {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

/* 時間 */
#event-reservation .p-event-reservation .p-reservation-list__time {
  font-size: 16px;
  color: #555;
  margin: 0 0 8px;
}

/* 備考・残席数 */
#event-reservation .p-event-reservation .p-reservation-list__note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

#event-reservation .p-event-reservation .p-reservation-list__stock {
  font-weight: 600;
  color: var(--accent-primary);
}

/* 予約ボタンリンク */
#event-reservation .p-event-reservation .p-reservation-list__link {
  flex-shrink: 0;
}

#event-reservation .p-event-reservation .p-link-button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

#event-reservation .p-event-reservation .p-link-button--primary {
  background-color: var(--accent-primary);
  color: #ffffff;
  border: none;
}

#event-reservation .p-event-reservation .p-link-button--primary:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
  transform: translateY(-2px);
}

/* ========================================
   3. イベント予約フォームページ
======================================== */

/* 確認リスト */
#event-reservation .p-event-reservation .p-confirm-list {
  padding: 0;
  margin: 0;
}

#event-reservation .p-event-reservation .p-confirm-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

#event-reservation .p-event-reservation .p-confirm-list__item:last-child {
  border-bottom: none;
}

#event-reservation .p-event-reservation .p-confirm-list__item dt {
  flex: 0 0 200px;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 15px;
}

#event-reservation .p-event-reservation .p-confirm-list__item dd {
  flex: 1;
  min-width: 0;
  color: #555;
  font-size: 15px;
  margin: 0;
}

/* フォームフィールド */
#event-reservation .p-event-reservation .p-form-field {
  margin-bottom: 24px;
}

#event-reservation .p-event-reservation .p-form-field label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 15px;
}

/* 必須ラベル */
#event-reservation .p-event-reservation .p-form-field__required-label::after {
  content: '必須';
  display: inline-block;
  margin-left: 8px;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* フォーム入力欄 */
#event-reservation .p-event-reservation .p-form-field input[type="text"],
#event-reservation .p-event-reservation .p-form-field input[type="email"],
#event-reservation .p-event-reservation .p-form-field input[type="tel"],
#event-reservation .p-event-reservation .p-form-field textarea,
#event-reservation .p-event-reservation .p-form-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: #ffffff;
  transition: all 0.3s ease;
}

#event-reservation .p-event-reservation .p-form-field textarea {
  min-height: 150px;
  resize: vertical;
}

#event-reservation .p-event-reservation .p-form-field input:focus,
#event-reservation .p-event-reservation .p-form-field textarea:focus,
#event-reservation .p-event-reservation .p-form-field select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

/* リンクユニット（送信ボタンエリア） */
#event-reservation .p-event-reservation .p-link-unit {
  margin-top: 32px;
  text-align: center;
}

#event-reservation .p-event-reservation .p-link-unit .p-link-button--primary {
  min-width: 240px;
  padding: 14px 48px;
  cursor: pointer;
}

/* ========================================
   レスポンシブ対応
======================================== */

/* タブレット: 900px以下 */
@media (max-width: 900px) {
  /* 一覧ページ: 縦積み */
  #event-reservation .p-event-reservation .p-service-list__item a {
    grid-template-columns: 1fr;
    grid-template-areas:
      "thumbnail"
      "detail";
    gap: 20px;
    padding: 25px;
  }

  #event-reservation .p-event-reservation .p-service-list__thumbnail {
    height: 240px;
  }

  #event-reservation .p-event-reservation .p-service-text__title {
    font-size: 21px;
  }

  #event-reservation .p-event-reservation .p-service-text__price {
    font-size: 18px;
  }

  /* 詳細ページ */
  #event-reservation .p-event-reservation .p-service-detail__title {
    font-size: 24px;
  }

  #event-reservation .p-event-reservation .p-service-detail__price {
    font-size: 20px;
  }

  #event-reservation .p-event-reservation .p-service-detail__thumbnail {
    height: 280px;
  }

  #event-reservation .p-event-reservation .p-reservation-list__item {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  #event-reservation .p-event-reservation .p-reservation-list__link {
    width: 100%;
  }

  #event-reservation .p-event-reservation .p-link-button--primary {
    width: 100%;
  }

  /* フォームページ */
  #event-reservation .p-event-reservation .p-fieldset--bgcolor {
    padding: 25px 20px;
  }

  #event-reservation .p-event-reservation .p-confirm-list__item {
    flex-direction: column;
    gap: 8px;
  }

  #event-reservation .p-event-reservation .p-confirm-list__item dt {
    flex: none;
  }

  #event-reservation .p-event-reservation .p-link-unit .p-link-button--primary {
    width: 100%;
  }
}

/* モバイル: 768px以下 */
@media (max-width: 768px) {
  /* 一覧ページ */
  #event-reservation .p-event-reservation .p-service-list {
    gap: 20px;
  }

  #event-reservation .p-event-reservation .p-service-list__item a {
    padding: 20px;
    gap: 16px;
  }

  #event-reservation .p-event-reservation .p-service-list__thumbnail {
    height: 200px;
  }

  #event-reservation .p-event-reservation .p-service-text__title {
    font-size: 18px;
  }

  #event-reservation .p-event-reservation .p-service-text__price {
    font-size: 16px;
  }

  /* 詳細ページ */
  #event-reservation .p-event-reservation .p-fieldset--bgcolor {
    padding: 20px 16px;
  }

  #event-reservation .p-event-reservation .p-fieldset__title {
    font-size: 18px;
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  #event-reservation .p-event-reservation .p-service-detail__title {
    font-size: 20px;
  }

  #event-reservation .p-event-reservation .p-service-detail__price {
    font-size: 18px;
  }

  #event-reservation .p-event-reservation .p-service-detail__thumbnail {
    height: 240px;
  }

  #event-reservation .p-event-reservation .p-service-detail__explanation {
    font-size: 14px;
  }

  #event-reservation .p-event-reservation .p-reservation-list {
    gap: 12px;
  }

  #event-reservation .p-event-reservation .p-reservation-list__item {
    padding: 16px;
  }

  #event-reservation .p-event-reservation .p-reservation-list__date {
    font-size: 16px;
  }

  #event-reservation .p-event-reservation .p-reservation-list__time {
    font-size: 14px;
  }

  #event-reservation .p-event-reservation .p-link-button {
    padding: 11px 20px;
    font-size: 14px;
  }

  /* フォームページ */
  #event-reservation .p-event-reservation .p-form-field {
    margin-bottom: 20px;
  }

  #event-reservation .p-event-reservation .p-form-field label {
    font-size: 14px;
  }

  #event-reservation .p-event-reservation .p-form-field input[type="text"],
  #event-reservation .p-event-reservation .p-form-field input[type="email"],
  #event-reservation .p-event-reservation .p-form-field input[type="tel"],
  #event-reservation .p-event-reservation .p-form-field textarea,
  #event-reservation .p-event-reservation .p-form-field select {
    padding: 10px 14px;
    font-size: 14px;
  }

  #event-reservation .p-event-reservation .p-form-field textarea {
    min-height: 120px;
  }

  #event-reservation .p-event-reservation .p-confirm-list__item dt,
  #event-reservation .p-event-reservation .p-confirm-list__item dd {
    font-size: 14px;
  }

  #event-reservation .p-event-reservation .p-link-unit {
    margin-top: 24px;
  }
}

/* ========================================
   フッター: 全ページ共通（店名・電話・SNS・ナビゲーション）
======================================== */

/* フッター上部: 2カラムレイアウト */
#footer .footer-top-columns {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 50px 0 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 左カラム */
#footer .footer-left {
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* 右カラム */
#footer .footer-right {
  flex: 1;
  min-width: 0;
}

/* 店名 */
#footer .footer-shop-name {
  margin-bottom: 15px;
}

#footer .footer-shop-name a {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

#footer .footer-shop-name a:hover {
  color: var(--accent-primary);
}

/* 電話番号 */
#footer .footer-phone {
  margin-bottom: 15px;
}

#footer .footer-phone a {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-primary);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

#footer .footer-phone a:hover {
  opacity: 0.8;
}

/* SNSアイコン */
#footer .footer-social {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

#footer .footer-social a {
  color: #333;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#footer .footer-social a:hover {
  color: var(--accent-primary);
  transform: translateY(-2px);
}

#footer .footer-social svg {
  width: 24px;
  height: 24px;
}

/* ナビゲーションリスト */
#footer .footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  column-gap: 40px;
  row-gap: 12px;
}

#footer .footer-navigation li {
  margin-bottom: 0;
}

#footer .footer-navigation a {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
}

#footer .footer-navigation a:hover {
  color: var(--accent-primary);
}

/* レスポンシブ: 768px以下（モバイル） */
@media (max-width: 768px) {
  #footer .footer-top-columns {
    flex-direction: column;
    gap: 40px;
    padding: 40px 0 30px;
  }
  
  #footer .footer-left {
    text-align: center;
  }
  
  #footer .footer-right {
    text-align: center;
  }
  
  #footer .footer-shop-name {
    margin-bottom: 12px;
  }
  
  #footer .footer-shop-name a {
    font-size: 16px;
  }
  
  #footer .footer-phone {
    margin-bottom: 12px;
  }
  
  #footer .footer-phone a {
    font-size: 20px;
  }
  
  #footer .footer-social {
    justify-content: center;
    gap: 18px;
  }
  
  #footer .footer-social svg {
    width: 22px;
    height: 22px;
  }
  
  #footer .footer-navigation ul {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  
  #footer .footer-navigation a {
    font-size: 13px;
  }
}

/* ============================================
   外部パーツ（gadgets）のスタイル  
   ============================================ */

/* コンテナ全体をフレックスボックスに変更してガジェットの表示順を制御 */
#container {
  display: flex;
  flex-direction: column;
}

/* フッターの表示順を2に設定 */
#footer {
  order: 2;
}

/* 外部パーツの表示順を3に設定（フッターの後に表示） */
.gadgets {
  order: 3;
  text-align: center;
  padding: 0;
  margin: 20px 0 30px 0;
}

.gadgets .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* X（Twitter）のフォローボタン・ポストボタンを非表示 */
.gadgets .twitter-follow-button,
.gadgets .twitter-share-button,
.gadgets iframe[src*="twitter.com/intent/follow"],
.gadgets iframe[src*="twitter.com/intent/tweet"],
.gadgets iframe[src*="platform.twitter.com/widgets/follow_button"],
.gadgets iframe[src*="platform.twitter.com/widgets/tweet_button"],
.gadgets a[href*="twitter.com/intent/follow"],
.gadgets a[href*="twitter.com/intent/tweet"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Facebookバッジを非表示 */
.gadgets .fb-page,
.gadgets .fb-like-box,
.gadgets iframe[src*="facebook.com/plugins"],
.gadgets [class*="fb-"],
.gadgets div[data-href*="facebook.com"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* LINEで送るボタンのスタイル - SNSアイコン直下に配置 */
.gadgets .line_it_button,
.gadgets [class*="line"],
.gadgets iframe[src*="line.me"] {
  display: inline-block;
  margin: 0 auto;
}

/* 外部パーツ全体を中央寄せ */
.gadgets * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* レスポンシブ: モバイル */
@media (max-width: 768px) {
  .gadgets {
    margin: 15px 0 0 0;
  }
  
  .gadgets .inner {
    padding: 0 15px;
  }
}

#footer #widget_line_share {
  display: block;
  margin-top: 12px;
}

/* ==========================================================================
   Coupon Page (クーポンページ)
   ========================================================================== */

/* クーポン一覧のカード */
#coupon .coupon_list .article {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: start;
}

#coupon .coupon_list .article:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* クーポン画像エリア */
#coupon .article .image {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

#coupon .article .image img {
  width: 100%;
  height: auto;
  display: block;
}

/* クーポンタイトル */
#coupon .article .article_title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* クーポン詳細テキスト */
#coupon .article .text {
  list-style: none;
  padding: 0;
  margin: 0;
}

#coupon .article .text li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

#coupon .article .text li:last-child {
  border-bottom: none;
}

#coupon .article .text li strong {
  color: var(--text-primary);
  font-weight: 600;
  margin-right: 8px;
}

/* QRコードエリア */
#coupon .article .qrcode {
  margin: 20px 0 0 0;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 8px;
  text-align: center;
}

#coupon .article .qrcode img {
  margin: 0 auto;
  display: block;
}

/* 印刷ボタンエリア */
#coupon .print {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
}

#coupon .print .button,
#coupon .print button {
  display: inline-block;
  min-width: 200px;
  padding: 14px 48px;
  background: var(--accent-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.2);
}

#coupon .print .button:hover,
#coupon .print button:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px rgba(196, 30, 58, 0.3);
  transform: translateY(-2px);
}

/* タブレット対応（769px〜1024px） */
@media (max-width: 1024px) {
  #coupon .coupon_list .article {
    grid-template-columns: 150px 1fr;
    gap: 24px;
    padding: 24px;
  }

  #coupon .article .article_title {
    font-size: 20px;
  }

  #coupon .print .button,
  #coupon .print button {
    min-width: 180px;
    padding: 12px 40px;
  }
}

/* モバイル対応（768px以下） */
@media (max-width: 768px) {
  #coupon .coupon_list .article {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
  }

  #coupon .article .image {
    max-width: 100%;
  }

  #coupon .article .article_title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  #coupon .article .text li {
    padding: 10px 0;
    font-size: 13px;
  }

  #coupon .article .qrcode {
    padding: 16px;
    margin-top: 16px;
  }

  #coupon .print {
    margin-top: 30px;
    padding-top: 20px;
  }

  #coupon .print .button,
  #coupon .print button {
    width: 100%;
    min-width: auto;
    padding: 14px 24px;
  }
}
.shop_sitename {
  font-size: 100%;
}