/**
 * Glass Theme - Glassmorphism Design
 * グラスモーフィズムを採用した透明感のあるモダンテーマ
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  /* 背景グラデーション */
  --glass-bg-start: #fce7f3;
  --glass-bg-end: #ffffff;

  /* ガラスカード */
  --glass-card-bg: rgba(255, 255, 255, 0.7);
  --glass-card-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 8px;

  /* アクセント・テキスト */
  --accent-color: #f43f5e;
  --accent-color-hover: #e11d48;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-color: rgba(0, 0, 0, 0.1);

  /* スペーシング */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;

  /* トランジション */
  --transition-base: all 0.3s ease;

  /* ボーダーラジウス */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* シャドウ */
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  font-family: -apple-system, blinkmacsystemfont, 'segoe ui', roboto, 'helvetica neue', arial, 'noto sans jp', sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--glass-bg-start) 0%, var(--glass-bg-end) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}


a {
  color: var(--accent-color);
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: var(--accent-color-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Glass Card Component
   ========================================================================== */
.glass-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Container
   ========================================================================== */
#container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

.inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* ==========================================================================
   Header
   ========================================================================== */
#header {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-card-border);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

#header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

#header .header-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  justify-content: flex-end;
}

#header .shop_tel a {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1.4rem;
}

#header .social_icons {
  display: flex;
  gap: var(--spacing-sm);
}

#header .social_icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--accent-color);
  color: white;
  border-radius: 50%;
  transition: var(--transition-base);
}

#header .social_icons a:hover {
  background: var(--accent-color-hover);
  transform: scale(1.1);
}

/* Logo */
#header .logo {
  margin: 0;
}

#header .logo a {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

#header .logo a img {
  max-height: 60px;
  width: auto;
}

/* Site Description */
#header .site_description {
  color: var(--text-secondary);
  font-size: 1.4rem;
}

/* Navigation */
#header .navi {
  width: 100%;
}

#header .navi_list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

#header .navi_list li a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-primary);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
}

#header .navi_list li a:hover,
#header .navi_list li a.current,
#header .navi_list li.active > a {
  background: var(--accent-color);
  color: white;
}

/* Sub Navigation */
.sub_navi {
  list-style: none;
  padding: var(--spacing-sm);
  margin: var(--spacing-xs) 0 0 0;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-sm);
}

.sub_navi li {
  margin: var(--spacing-xs) 0;
}

.sub_navi li a {
  font-size: 1.4rem;
  color: var(--text-secondary);
}

.sub_navi li a:hover {
  color: var(--accent-color);
}

/* Sub Navigation Accordion */
.navi_list > li {
  position: relative;
}

.sub_navi_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: var(--spacing-xs);
  background: var(--glass-card-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-base);
  vertical-align: middle;
}

.sub_navi_toggle::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  margin-top: -2px;
  transition: var(--transition-base);
}

.sub_navi_toggle:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.sub_navi_toggle:hover::before {
  border-color: white;
}

.navi_list > li .sub_navi {
  display: none;
}

.navi_list > li.sub_navi_open .sub_navi {
  display: block;
}

.navi_list > li.sub_navi_open .sub_navi_toggle::before {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* Mobile Toggle */
#header .mobile-toggle {
  display: none;
  cursor: pointer;
  padding: var(--spacing-sm);
}

#header .mobile-toggle svg {
  width: 24px;
  height: 24px;
  color: var(--text-primary);
}

/* ==========================================================================
   Content Area
   ========================================================================== */
#content {
  padding: var(--spacing-xl) 0;
}

/* ==========================================================================
   Section Styles
   ========================================================================== */
.section {
  margin-bottom: var(--spacing-xxl);
}

.section_title,
.page_title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 var(--spacing-xl) 0;
  position: relative;
}

.section_title span,
.page_title span {
  display: inline-block;
  padding: 0 var(--spacing-md);
  background: linear-gradient(135deg, var(--glass-bg-start) 0%, var(--glass-bg-end) 100%);
  position: relative;
}

.section_title::before,
.page_title::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--border-color);
  z-index: -1;
}

/* ==========================================================================
   Slideshow
   ========================================================================== */
#wrap_slider {
  position: relative;
  margin-bottom: var(--spacing-xxl);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

#slider {
  position: relative;
}

#slider .article {
  position: relative;
}

#slider .slide_image_wrap img {
  width: 100%;
  height: auto;
  display: block;
}

#slider .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-lg);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

#slider .caption_txt a {
  color: white;
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Slideshow Controls */
.slideshow-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  pointer-events: none;
  z-index: 10;
}

.slideshow-controls button {
  width: 48px;
  height: 48px;
  border: none;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slideshow-controls button:hover {
  background: var(--accent-color);
  color: white;
}

.slideshow-controls .slide-prev::before {
  content: '<';
  font-size: 2rem;
  font-weight: bold;
}

.slideshow-controls .slide-next::before {
  content: '>';
  font-size: 2rem;
  font-weight: bold;
}

/* Slideshow Indicators */
.slideshow-indicators {
  position: absolute;
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 10;
}

.slide-indicator {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--transition-base);
}

.slide-indicator.active,
.slide-indicator:hover {
  background: white;
  transform: scale(1.2);
}

/* ==========================================================================
   Welcome Message
   ========================================================================== */
.welcomemessage {
  text-align: center;
}

.welcomemessage .message {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Information Section (Top Page)
   ========================================================================== */
.information .list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.information .article {
  display: block;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
}

.information .article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.information .article .photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.information .article .summary {
  display: block;
  padding: var(--spacing-md);
}

.information .article .date {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.information .article .title {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ==========================================================================
   Photo Section
   ========================================================================== */
.section_photo .list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.section_photo .list li {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.section_photo .list li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.section_photo .list li a {
  display: block;
}

.section_photo .list li img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: var(--transition-base);
}

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

/* ==========================================================================
   About Section
   ========================================================================== */
.about .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.about .map {
  overflow: hidden;
}

.about .map:not(:has(iframe)) {
  display: none;
}

.about .map:not(:has(iframe)) + .summary {
  grid-column: 1 / -1;
}

.about .map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: none;
}

.about .summary {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

/* Table Detail (Shop Info) */
.table_detail {
  width: 100%;
  border-collapse: collapse;
}

.table_detail th,
.table_detail td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.table_detail th {
  font-weight: 600;
  color: var(--text-primary);
  width: 120px;
  font-size: 1.4rem;
}

.table_detail td {
  color: var(--text-secondary);
}

.table_detail tr:last-child th,
.table_detail tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

.contact_form {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.contact_area {
  margin-bottom: var(--spacing-md);
}

.contact_area label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.contact_area br {
  display: none;
}

.contact_area .requier {
  color: #ef4444;
  margin-left: var(--spacing-xs);
}

.contact_area input[type="text"],
.contact_area input[type="email"],
.contact_area input[type="tel"],
.contact_area textarea,
.contact_area select {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.8);
  transition: var(--transition-base);
}

.contact_area input:focus,
.contact_area textarea:focus,
.contact_area select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

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

/* Radio & Checkbox */
.contact_area .radio,
.contact_area .checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.contact_area .radio input,
.contact_area .checkbox input {
  margin-right: var(--spacing-xs);
}

/* Submit Button */
.contact_form .button,
input[type="submit"].button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.contact_form .button:hover,
input[type="submit"].button:hover {
  background: var(--accent-color-hover);
  box-shadow: 0 0 20px var(--accent-color);
}

/* Personal Info (個人情報保護) */
.contact_form .personal_info {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  font-size: 1.3rem;
  color: var(--text-secondary);
}

.contact_form .personal_info_txt {
  margin-top: var(--spacing-xs);
  line-height: 1.8;
}

/* reCAPTCHA */
.g-recaptcha {
  margin: var(--spacing-lg) 0;
}

/* Contact Messages */
.success_message {
  background: #dcfce7;
  color: #166534;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.error_message {
  background: #fee2e2;
  color: #dc2626;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Button Details (More Button)
   ========================================================================== */
.btn_details {
  text-align: center;
  margin-top: var(--spacing-lg);
}

.btn_details a {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--accent-color);
  color: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: var(--transition-base);
}

.btn_details a:hover {
  background: var(--accent-color-hover);
  box-shadow: 0 0 20px var(--accent-color);
  transform: translateY(-2px);
}

/* ==========================================================================
   Info Page (Information List)
   ========================================================================== */
#info .autopagerize_page_element .article {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

#info .article .date {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

#info .article .article_title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
}

#info .article .article_title a {
  color: var(--text-primary);
}

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

#info .article .photo {
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow: hidden;
}

#info .article .photo img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Photo Page
   ========================================================================== */
#photo .album {
  margin-bottom: var(--spacing-xl);
}

#photo .album_title {
  background: var(--accent-color);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.8rem;
}

#photo .album_title a {
  color: white;
}

#photo #index {
  display: grid;
  gap: var(--spacing-xl);
}

#photo .album .thumb {
  display: inline-block;
  margin: var(--spacing-xs);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition-base);
}

#photo .album .thumb:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

#photo .album .thumb img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* Photo List (Album Detail) */
#photo #entries .article {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

#photo #entries .photo {
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow: hidden;
}

#photo #entries .photo img {
  width: 100%;
  height: auto;
}

#photo #entries h4 {
  font-size: 1.8rem;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-primary);
}

#photo #entries .date {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-md);
}

/* ==========================================================================
   Menu Page
   ========================================================================== */
#menu .list {
  margin-bottom: var(--spacing-xl);
}

#menu .category_title {
  background: var(--accent-color);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.8rem;
  font-weight: 600;
}

#menu .article {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--spacing-md);
}

#menu .article .photo {
  border-radius: var(--radius-md);
  overflow: hidden;
}

#menu .article .photo img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

#menu .article .menu-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

#menu .article .article_title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

#menu .article .recommend {
  display: inline-block;
  margin-right: var(--spacing-xs);
}

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

#menu .article .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-color);
  white-space: nowrap;
}

/* ==========================================================================
   Calendar Page
   ========================================================================== */
#calendar .wrap_calendar {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

#calendar .wrap_calendar .navi {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

#calendar .wrap_calendar .navi a {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--accent-color);
  color: white;
  border-radius: var(--radius-sm);
  margin: 0 var(--spacing-xs);
}

.table_calendar {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table_calendar th {
  background: var(--accent-color);
  color: white;
  padding: var(--spacing-sm);
  font-weight: 600;
  text-align: center;
}

.table_calendar th.sun {
  background: #ef4444;
}

.table_calendar th.sat {
  background: #3b82f6;
}

.table_calendar td {
  padding: var(--spacing-sm);
  height: 80px;
  vertical-align: top;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.8);
}

.table_calendar td.sun {
  background: #fef2f2;
}

.table_calendar td.sat {
  background: #eff6ff;
}

.table_calendar td.holiday {
  background: #fef2f2;
}

.table_calendar td .day {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.table_calendar td.sun .day {
  color: #ef4444;
}

.table_calendar td.sat .day {
  color: #3b82f6;
}

/* Schedule List */
#calendar .schedule .article {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

#calendar .schedule .date {
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: var(--spacing-sm);
}

#calendar .schedule .category {
  display: inline-block;
  background: var(--accent-color);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 1.2rem;
  margin-right: var(--spacing-xs);
}

/* Schedule Detail */
#calendar .details {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

#calendar .details .category {
  display: inline-block;
  background: var(--accent-color);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 1.3rem;
}

#calendar .details h3 {
  font-size: 2.4rem;
  margin: var(--spacing-md) 0;
  color: var(--text-primary);
}

/* ==========================================================================
   Coupon Page
   ========================================================================== */
#coupon .coupon_list .article {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-lg);
}

#coupon .article .image {
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

#coupon .article .article_title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
}

#coupon .article .text {
  list-style: none;
  padding: 0;
  margin: 0;
}

#coupon .article .text li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

#coupon .article .qrcode {
  margin-bottom: var(--spacing-md);
}

#coupon .print {
  text-align: center;
  margin-top: var(--spacing-lg);
}

/* ==========================================================================
   Reservation Page
   ========================================================================== */
#reservation .reservation_area {
  margin-bottom: var(--spacing-md);
}

#reservation .reservation_area label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

#reservation .reservation_area select {
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.8);
}

#reservation .reservation_course_name {
  font-weight: 600;
  color: var(--accent-color);
}

#reservation .reservation_course_body {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

/* Reservation List */
#reservation .articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

#reservation .articles .article {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

#reservation .articles .image {
  height: 180px;
  background-size: cover;
  background-position: center;
}

#reservation .articles .summary {
  padding: var(--spacing-md);
}

#reservation .articles .article_title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-primary);
}

#reservation .info {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

#reservation .info .tel {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
}

/* ==========================================================================
   Free Page
   ========================================================================== */
#free .textfield {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

/* ==========================================================================
   Textfield (WYSIWYG Content)
   ========================================================================== */
.textfield {
  color: var(--text-primary);
  line-height: 1.8;
}

.textfield h1,
.textfield h2,
.textfield h3,
.textfield h4,
.textfield h5,
.textfield h6 {
  margin: 1.5em 0 0.5em;
  color: var(--text-primary);
  font-weight: 600;
}

.textfield h1 {
  font-size: 2.4rem;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--spacing-sm);
}

.textfield h2 {
  font-size: 2rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-xs);
}

.textfield p {
  margin: 1em 0;
}

.textfield ul,
.textfield ol {
  margin: 1em 0;
  padding-left: 2em;
}

.textfield li {
  margin: 0.5em 0;
}

.textfield a {
  color: var(--accent-color);
  text-decoration: underline;
}

.textfield img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 1em 0;
}

.textfield blockquote {
  margin: 1.5em 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.textfield table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}

.textfield th,
.textfield td {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  text-align: left;
}

.textfield th {
  background: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.textfield code {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
}

.textfield pre {
  background: rgba(0, 0, 0, 0.05);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

/* ==========================================================================
   Pager (Pagination)
   ========================================================================== */
.pager {
  margin: var(--spacing-xl) 0;
}

.pager .inner > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-sm);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 500;
  transition: var(--transition-base);
}

.pager a:hover {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.pager span.current {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.pager .prev,
.pager .next {
  font-weight: bold;
}

/* ==========================================================================
   Social / Navi Parts
   ========================================================================== */
.social {
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--border-color);
}

#navi_parts {
  text-align: center;
}

.navi_parts_detail {
  margin-bottom: var(--spacing-md);
}

.navi_parts_detail img {
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

#social_widgets {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */
#footer {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-card-border);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

#footer .shop_name {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

#footer .shop_name a {
  color: var(--text-primary);
}

#footer .copyright {
  font-size: 1.3rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */
.totop {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 999;
}

.totop .button {
  width: 50px;
  height: 50px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
}

.totop .button.is-visible {
  opacity: 1;
  visibility: visible;
}

.totop .button:hover {
  background: var(--accent-color-hover);
  transform: translateY(-4px);
  box-shadow: 0 0 20px var(--accent-color);
}

/* ==========================================================================
   Photo Modal
   ========================================================================== */
.photo-modal-dialog {
  max-width: 90vw;
  max-height: 90vh;
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg);
}

.photo-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.photo-modal-content {
  position: relative;
}

.photo-modal-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 40px;
  height: 40px;
  background: var(--glass-card-bg);
  border: none;
  border-radius: 50%;
  font-size: 2.4rem;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition-base);
}

.photo-modal-close:hover {
  background: var(--accent-color);
  color: white;
}

.photo-modal-image img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.photo-modal-body {
  padding: var(--spacing-lg);
}

.photo-modal-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.photo-modal-text {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.photo-modal-date {
  font-size: 1.3rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Minne Gallery
   ========================================================================== */
.minne_area {
  padding: var(--spacing-xl) 0;
}

.p-minne-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.p-minne-item {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
  margin: 0;
}

.p-minne-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.p-minne-item__image-wrap {
  aspect-ratio: 1;
  overflow: hidden;
}

.p-minne-item__image {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.p-minne-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-minne-item__caption {
  padding: var(--spacing-md);
}

.p-minne-item__title {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.p-minne-item__price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-color);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --spacing-xl: 2.5rem;
    --spacing-xxl: 3rem;
  }

  .about .inner {
    grid-template-columns: 1fr;
  }

  #menu .article {
    grid-template-columns: 120px 1fr;
  }

  #coupon .coupon_list .article {
    grid-template-columns: 150px 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  html {
    font-size: 58%;
  }

  :root {
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 2.5rem;
  }

  #container {
    padding: var(--spacing-sm);
  }

  /* Header Mobile */
  #header .inner {
    flex-direction: column;
    align-items: stretch;
  }

  #header .header-top {
    justify-content: center;
    order: -1;
  }

  #header .logo {
    text-align: center;
  }

  #header .site_description {
    text-align: center;
  }

  #header .navi {
    position: relative;
  }

  #header .mobile-toggle {
    display: block;
    position: absolute;
    right: 0;
    top: -60px;
  }

  #header .navi_list {
    display: none;
    flex-direction: column;
    background: var(--glass-card-bg);
    backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
  }

  #header .navi.menu-open .navi_list {
    display: flex;
  }

  #header .navi_list li a {
    padding: var(--spacing-md);
    text-align: center;
  }

  /* Section Titles */
  .section_title,
  .page_title {
    font-size: 2.2rem;
  }

  /* Info Grid */
  .information .list {
    grid-template-columns: 1fr;
  }

  /* Photo Grid */
  .section_photo .list {
    grid-template-columns: repeat(2, 1fr);
  }

  .section_photo .list li img {
    height: 150px;
  }

  /* Menu */
  #menu .article {
    grid-template-columns: 1fr;
  }

  #menu .article .photo img {
    height: 200px;
  }

  /* Coupon */
  #coupon .coupon_list .article {
    grid-template-columns: 1fr;
  }

  /* Calendar */
  .table_calendar td {
    height: 60px;
    font-size: 1.2rem;
  }

  /* Footer */
  #footer {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* Back to Top */
  .totop {
    bottom: var(--spacing-md);
    right: var(--spacing-md);
  }

  .totop .button {
    width: 44px;
    height: 44px;
  }

  /* Photo Modal */
  .photo-modal-dialog {
    max-width: 95vw;
    margin: var(--spacing-md);
  }

  .photo-modal-image img {
    max-height: 50vh;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  html {
    font-size: 55%;
  }

  .section_photo .list {
    grid-template-columns: 1fr;
  }

  #photo .album .thumb img {
    width: 100px;
    height: 100px;
  }

  .pager a,
  .pager span {
    min-width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   Event Reservation Page (イベント予約)
   ========================================================================== */
#event-reservation .p-event-reservation {
  padding: var(--spacing-lg) 0;
}

.p-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-lg);
}

.p-service-list__item {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
}

.p-service-list__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-color);
}

.p-service-list__item a {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  text-decoration: none;
  color: inherit;
}

.p-service-list__detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.p-service-list__thumbnail {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
}

.p-service-text__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.p-service-text__description {
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.p-service-text__price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-color);
}

/* Event Reservation Detail */
.p-event-reservation__calendar {
  margin-bottom: var(--spacing-lg);
}

a.p-link-button,
button.p-link-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base);
}

.p-link-button:hover {
  background: var(--accent-color-hover);
  transform: translateY(-2px);
}

.p-link-button--primary {
  background: var(--accent-color);
  color: white;
}

.p-link-button--secondary {
  background: var(--text-secondary);
}

.p-link-button--disabled {
  background: var(--text-secondary);
  opacity: 0.5;
  cursor: not-allowed;
}

.p-link-button--more {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.p-link-button--more:hover {
  background: var(--accent-color);
  color: white;
}

/* Fieldset (イベント予約詳細・入力) */
.p-fieldset {
  margin-bottom: var(--spacing-lg);
  border: none;
  padding: 0;
}

.p-fieldset--bgcolor {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.p-fieldset__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--accent-color);
}

.p-fieldset__body {
  padding: var(--spacing-md) 0;
}

/* Confirm List (確認リスト) */
.p-confirm-list {
  margin: 0;
}

.p-confirm-list__item {
  display: flex;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

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

.p-confirm-list__item dt {
  flex: 0 0 120px;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 1.4rem;
}

.p-confirm-list__item dd {
  flex: 1;
  margin: 0;
  color: var(--text-primary);
  font-size: 1.4rem;
}

/* Service Detail (イベント予約詳細) */
.p-service-detail {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.p-service-detail__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm);
  line-height: 1.4;
}

.p-service-detail__price {
  font-size: 2rem;
  color: var(--accent-color);
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
}

.p-service-detail__thumbnail {
  width: 100%;
  max-width: 400px;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.p-service-detail__thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.p-service-detail__explanation {
  font-size: 1.5rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
  text-align: left;
}

/* Link Unit */
.p-link-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.p-link-text {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 1.5rem;
}

.p-link-text:hover {
  text-decoration: underline;
}

/* Form Field (イベント予約入力フォーム) */
.p-form-field {
  margin-bottom: var(--spacing-lg);
}

.p-form-field label {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.p-form-field__required-label {
  display: inline-block;
  background: var(--accent-color);
  color: white;
  font-size: 1.1rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: var(--spacing-xs);
  vertical-align: middle;
}

.p-form-field input[type="text"],
.p-form-field input[type="tel"],
.p-form-field input[type="email"],
.p-form-field input[type="number"],
.p-form-field textarea,
.p-form-field select {
  width: 100%;
  max-width: 400px;
  padding: var(--spacing-sm);
  font-size: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  transition: var(--transition-base);
}

.p-form-field input:focus,
.p-form-field textarea:focus,
.p-form-field select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.p-form-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* Fieldset Layout */
.p-fieldset-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.p-fieldset-layout__label {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.p-fieldset-layout__content {
  width: 100%;
}

/* Reservation List (日程リスト) */
.p-reservation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-reservation-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

.p-reservation-list__date {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

.p-reservation-list__status {
  font-size: 1.3rem;
  color: var(--text-secondary);
}

/* v-calendar customization */
.p-event-reservation__calendar .vc-container {
  font-family: inherit;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-card-border);
  background: rgba(255, 255, 255, 0.8);
}

.p-event-reservation__calendar .vc-header {
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.5);
}

.p-event-reservation__calendar .vc-weekday {
  color: var(--text-secondary);
  font-weight: 600;
}

.p-event-reservation__calendar .vc-day-content:hover {
  background: var(--accent-color);
  color: white;
}

/* Event Reservation Responsive */
@media (max-width: 768px) {
  .p-service-detail__title {
    font-size: 2rem;
  }

  .p-service-detail__price {
    font-size: 1.8rem;
  }

  .p-reservation-list__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .p-service-list__thumbnail {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 480px) {
  .p-service-detail__title {
    font-size: 1.8rem;
  }

  .p-service-detail__price {
    font-size: 1.6rem;
  }

  .p-service-detail__explanation {
    font-size: 1.4rem;
  }

  .p-fieldset__title {
    font-size: 1.6rem;
  }

  .p-service-list__item a {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .p-service-list__thumbnail {
    width: 100%;
    max-width: 200px;
    height: 150px;
  }
}

/* ==========================================================================
   Staff Page (スタッフ紹介)
   ========================================================================== */
#staff #custom_staff {
  display: grid;
  gap: var(--spacing-xl);
}

.staff_wrap {
  display: flex;
  gap: var(--spacing-xl);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  transition: var(--transition-base);
}

.staff_wrap:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.staff--image {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 4px solid var(--accent-color);
}

.staff__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.staff__text--name {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.staff__text--job {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--accent-color);
  background: rgba(var(--accent-color), 0.1);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.staff__text--description {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.staff__text__social {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
}

.staff__text__social_icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 1.3rem;
  transition: var(--transition-base);
}

.staff__text__social_icon:hover {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

/* スタッフソーシャルアイコン - SVG置き換え */
.staff__text__social_icon img {
  display: none;
}

.staff__text__social_icon::before {
  content: '';
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* X (Twitter) */
.staff__text__social_icon[href*="x.com"]::before,
.staff__text__social_icon[href*="twitter.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

/* Facebook */
.staff__text__social_icon[href*="facebook.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

/* Instagram */
.staff__text__social_icon[href*="instagram.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

/* YouTube */
.staff__text__social_icon[href*="youtube.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

/* LINE */
.staff__text__social_icon[href*="line.me"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/%3E%3C/svg%3E");
}

/* Blog - デフォルトアイコン（その他のリンク用） */
.staff__text__social_icon[href*="blog"]::before,
.staff__text__social_icon:not([href*="x.com"]):not([href*="twitter.com"]):not([href*="facebook.com"]):not([href*="instagram.com"]):not([href*="youtube.com"]):not([href*="line.me"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
}

/* ホバー時は白いアイコンに */
.staff__text__social_icon:hover::before {
  filter: brightness(0) invert(1);
}

.staff__text__social_text {
  display: none;
}

/* Staff Responsive */
@media (max-width: 768px) {
  .staff_wrap {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: var(--spacing-lg);
  }

  .staff--image {
    width: 140px;
    height: 140px;
  }

  .staff__text {
    align-items: center;
  }

  .staff__text__social {
    justify-content: center;
  }
}

/* ==========================================================================
   Diary/Blog Page (ブログ)
   ========================================================================== */
#diary .p-diary,
#diary_detail .p-diary {
  max-width: 800px;
  margin: 0 auto;
}

.p-diary__unit {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  transition: var(--transition-base);
}

.p-diary__unit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.p-diary__date {
  font-size: 1.4rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.p-diary__title {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.4;
}

.p-diary__title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-base);
}

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

.p-diary__category {
  margin-bottom: var(--spacing-md);
}

.p-diary__category a {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--accent-color);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  text-decoration: none;
}

.p-diary__category a:empty {
  display: none;
}

.p-diary__body {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.p-diary__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Diary Detail Page */
#diary_detail .p-diary__title a {
  pointer-events: none;
  cursor: default;
}

#diary_detail .p-diary__body {
  color: var(--text-primary);
}

/* ==========================================================================
   Recruit Page (求人ページ)
   ========================================================================== */
.c-recruit-table {
  max-width: 800px;
  margin: 0 auto;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.c-recruit-table__row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
}

.c-recruit-table__row:last-child {
  border-bottom: none;
}

.c-recruit-table__header-cell {
  background: var(--accent-color);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 1.5rem;
  font-weight: 600;
  min-width: 150px;
  margin: 0;
}

.c-recruit-table__data-cell {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--text-primary);
  flex: 1;
  margin: 0;
}

.c-recruit-table__note {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-secondary);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 1.3rem;
  width: 100%;
  border-top: 1px solid var(--border-color);
}

.c-recruit-table__note--period {
  font-style: italic;
}

/* Recruit Responsive */
@media (max-width: 768px) {
  .c-recruit-table__row {
    flex-direction: column;
  }

  .c-recruit-table__header-cell {
    min-width: auto;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .c-recruit-table__data-cell {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.4rem;
  }

  .c-recruit-table__note {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   Reservation Page (旧予約)
   ========================================================================== */
#reservation form {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.reservation_area {
  margin-bottom: var(--spacing-lg);
}

.reservation_area label {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.reservation_area .requier {
  color: #ef4444;
}

.reservation_area input[type="text"],
.reservation_area input[type="tel"],
.reservation_area input[type="email"],
.reservation_area textarea {
  width: 100%;
  max-width: 400px;
  padding: var(--spacing-sm);
  font-size: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  transition: var(--transition-base);
}

.reservation_area select {
  width: auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  transition: var(--transition-base);
}

.reservation_area input:focus,
.reservation_area textarea:focus,
.reservation_area select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-color), 0.1);
}

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

.reservation_area .radio {
  display: block;
  margin: var(--spacing-xs) 0;
}

.reservation_area .radio input[type="radio"] {
  margin-right: var(--spacing-xs);
}

.reservation_course_name {
  color: var(--accent-color);
  text-decoration: none;
}

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

.reservation_course_body {
  margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg);
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  font-size: 1.4rem;
}

#reservation .button_area {
  margin-top: var(--spacing-xl);
}

#reservation .button_area input[type="submit"],
#reservation .button_area .button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

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

/* Reservation List (courses) */
#reservation .list {
  margin-top: var(--spacing-xl);
}

#reservation .list .info {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

#reservation .list .articles {
  display: grid;
  gap: var(--spacing-md);
}

#reservation .list .articles .article {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  transition: var(--transition-base);
}

#reservation .list .articles .article:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.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;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none !important;
}
.shop_sitename {
  font-size: 100%;
}