/* ===== 最低限のスタイル ===== */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  margin: 0;
  color: #333;
  background: #f7f7f4;
  line-height: 1.7;
}
.container { width: 92%; max-width: 880px; margin: 0 auto; }
.site-header { background: #4b7d52; color: #fff; padding: 14px 0; }
.site-title { color: #fff; text-decoration: none; font-weight: bold; font-size: 1.1rem; }
.site-footer { margin-top: 40px; padding: 20px 0; color: #888; text-align: center; }
main.container { padding: 24px 0 40px; }
h1 { font-size: 1.5rem; border-bottom: 2px solid #4b7d52; padding-bottom: 8px; }
h2 { font-size: 1.2rem; }
a { color: #2f6b3a; }
.lead { color: #555; }
.notice { background: #fff8e1; border: 1px solid #f0d98c; padding: 12px; border-radius: 6px; }

/* ボタン */
.btn {
  display: inline-block; padding: 10px 18px; background: #4b7d52; color: #fff;
  text-decoration: none; border-radius: 6px; border: none; cursor: pointer; font-size: 1rem;
}
.btn:hover { background: #3c6743; }
.btn-primary { background: #c0622f; }
.btn-primary:hover { background: #a5511f; }
.btn-disabled { background: #bbb; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 0.85rem; }
.btn-danger { background: #b03333; }
.btn-secondary { background: #777; }

/* ワークショップ一覧 */
.ws-list { display: grid; gap: 16px; }
.ws-card {
  background: #fff; border: 1px solid #e0e0d8; border-radius: 8px; padding: 18px;
  display: flex; gap: 14px; align-items: flex-start;
}
.ws-card h2 { margin-top: 0; }
.ws-thumb {
  width: 96px; height: 96px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0; border: 1px solid #e0e0d8;
}
.ws-card-body { flex: 1; min-width: 0; } /* min-width:0 で長文でも崩れない */

/* 予約画面のメイン画像（コンテンツ幅いっぱい・中央配置・比率維持） */
.ws-detail-img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 8px; border: 1px solid #e0e0d8; margin: 0 auto 16px;
}

@media (max-width: 480px) {
  .ws-thumb { width: 72px; height: 72px; }
}
.ws-desc { color: #555; }
.ws-meta { list-style: none; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; color: #444; }
.ws-meta-box { background: #fff; border: 1px solid #e0e0d8; border-radius: 8px; padding: 14px; margin-bottom: 18px; }

/* フォーム */
.reserve-form, .admin-form { background: #fff; border: 1px solid #e0e0d8; border-radius: 8px; padding: 20px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: bold; margin-bottom: 5px; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=password], .field input[type=number], .field input[type=date],
.field select, .field textarea {
  width: 100%; padding: 9px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem;
}
.radio-group label { display: inline-block; font-weight: normal; margin-right: 18px; }
.req { color: #c0392b; font-size: 0.75rem; margin-left: 6px; }
.errors { background: #fdecea; border: 1px solid #f5b7b1; color: #922; padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; }
.errors ul { margin: 0; padding-left: 18px; }

/* テーブル */
table { border-collapse: collapse; width: 100%; background: #fff; }
.detail-table th, .detail-table td { border: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: top; }
.detail-table th { background: #f0f3ee; width: 32%; }
.data-table { border: 1px solid #ddd; }
.data-table th, .data-table td { border: 1px solid #ddd; padding: 8px 10px; font-size: 0.92rem; }
.data-table th { background: #f0f3ee; }
.data-table tr:nth-child(even) td { background: #fafafa; }

/* ステータスのバッジ */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; color: #fff; }
.badge-tentative { background: #e0a020; }
.badge-confirmed { background: #4b7d52; }
.badge-cancelled { background: #999; }

/* 管理画面 */
.admin-header { background: #333; color: #fff; padding: 12px 0; }
.admin-header a { color: #fff; }
.admin-nav { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.admin-nav .spacer { flex: 1; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.search-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.search-form input, .search-form select { padding: 7px; border: 1px solid #ccc; border-radius: 5px; }
.actions a, .actions button { margin-right: 6px; }
.flash { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.inline-form { display: inline; }
.login-box { max-width: 360px; margin: 40px auto; }

/* ===== ヘッダー / ナビ ===== */
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
/* 公式サイト / LINE ボタン（利用者側ヘッダー・フッター共通） */
.site-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-foot-links {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
}

/* ボタン共通（ピル型・控えめ） */
.official-link, .line-link {
  display: inline-block; padding: 6px 16px; border-radius: 18px;
  font-size: 0.85rem; font-weight: bold; white-space: nowrap;
  text-decoration: none; border: 1px solid transparent; line-height: 1.4;
}
/* 公式サイト：白地に緑文字（緑ヘッダーでも明るいフッターでも見やすい） */
.official-link { background: #ffffff; color: #2f6b3a; border-color: #cfe0d2; }
.official-link:hover { background: #eef5ef; }
/* LINE：LINEグリーン */
.line-link { background: #06c755; color: #ffffff; }
.line-link:hover { opacity: 0.9; }

/* スマホ：横並びが窮屈なら縦並び */
@media (max-width: 480px) {
  .site-foot-links { flex-direction: column; align-items: center; gap: 8px; }
}

/* ===== 予約前の注意事項 ===== */
.reserve-notes {
  background: #fbf7ef; border: 1px solid #e7ddc7; border-radius: 8px;
  padding: 14px 18px; margin: 18px 0 0;
}
.reserve-notes-title { font-weight: bold; margin: 0 0 6px; color: #6b5b3e; }
.reserve-notes ul { margin: 0; padding-left: 1.3em; }
.reserve-notes li { margin: 3px 0; color: #5a5340; }

/* ===== 安心・分かりやすさ向け セクション（利用者トップ）===== */
.section-title {
  font-size: 1.2rem; border-bottom: 2px solid #4b7d52;
  padding-bottom: 6px; margin: 30px 0 14px;
}

/* 初めての方も大歓迎 */
.intro-box {
  background: #eef5ef; border: 1px solid #cfe0d2; border-radius: 10px;
  padding: 18px 20px; margin: 4px 0 22px;
}
.intro-title { margin: 0 0 10px; font-size: 1.25rem; color: #3c6743; }
.intro-list { margin: 0; padding-left: 1.3em; font-size: 1.02rem; line-height: 1.95; }
.intro-list li { margin: 2px 0; }

/* ご予約の流れ */
.flow-steps {
  list-style: none; display: flex; gap: 12px; padding: 0; margin: 0; flex-wrap: wrap;
}
.flow-steps li {
  flex: 1 1 0; min-width: 150px; background: #fff; border: 1px solid #e0e0d8;
  border-radius: 8px; padding: 14px; font-size: 1rem; line-height: 1.6; text-align: center;
}
.flow-num {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #4b7d52; color: #fff; font-weight: bold; margin: 0 auto 8px;
}
.flow-note { text-align: center; color: #3c6743; font-weight: bold; margin: 14px 0 0; font-size: 1.02rem; }

/* LINEで相談する 案内 */
.line-cta {
  background: #eef7f0; border: 1px solid #cfe0d2; border-radius: 10px;
  padding: 18px 20px; margin: 30px 0 0; text-align: center;
}
.line-cta p { margin: 0 0 12px; font-size: 1.02rem; }

/* よくある質問（アコーディオン） */
.faq { margin-top: 8px; }
.faq-item { background: #fff; border: 1px solid #e0e0d8; border-radius: 8px; margin-bottom: 10px; }
.faq-item summary {
  cursor: pointer; padding: 14px 16px; font-weight: bold; font-size: 1.02rem; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "＋"; color: #4b7d52; font-weight: bold; margin-right: 8px; }
.faq-item[open] summary::before { content: "−"; }
.faq-item p { margin: 0; padding: 0 16px 14px; line-height: 1.8; color: #444; }

@media (max-width: 480px) {
  .flow-steps { flex-direction: column; }
}

/* ====================================================================
 * 利用者ページ 高級路線テーマ（body.user-site 配下のみ適用）
 *   管理画面 /reserve/admin/ には影響しません（admin の body に user-site なし）
 *   ブランドグリーン: #8f9e73 / クリーム・ベージュ・白・濃いグレー
 * ================================================================== */
.user-site {
  background: #f4efe4; color: #3c3a34;
  overflow-x: hidden; /* ページ全体が横にはみ出さないように */
  /* 画面全体を明朝（Noto Serif JP）で統一。本文・ボタン・フォーム・カレンダーも同一 */
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.user-site .container { max-width: 1080px; padding-left: 24px; padding-right: 24px; }
.user-site main.container { padding-top: 28px; padding-bottom: 48px; }
.user-site a { color: #6a7850; }

/* フォーム要素は本文フォント（Noto Sans JP）を継承（既定では継承されないため明示） */
.user-site input, .user-site select, .user-site textarea, .user-site button {
  font-family: inherit;
}

/* 明朝(Noto Serif JP)を使うのは「メインタイトル・ファーストビュー大見出し・セクションタイトル」のみ。
   それ以外の見出し・本文・カレンダー・ボタン・フォームはすべて Noto Sans JP（body継承）。 */
.user-site .hero-title,
.user-site .section-title {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.user-site h1 {
  font-size: 1.6rem; color: #3c3a34; border-bottom: 2px solid #8f9e73;
  padding-bottom: 8px; letter-spacing: .03em;
}
.user-site .section-title { border-bottom-color: #8f9e73; color: #3c3a34; }
.user-site .lead { color: #5c594f; }

/* ヘッダー（白地＋ブランドの細いライン） */
.user-site .site-header { background: #ffffff; border-bottom: 1px solid #e7e1d3; padding: 18px 0; }

/* ブランド表記：PCはロゴの右隣にサブタイトルを横並び */
.user-site .site-brand { display: inline-flex; flex-direction: row; align-items: center; gap: 16px; line-height: 1.2; text-decoration: none; }
.user-site .brand-logo { height: 64px; width: auto; display: block; }
.user-site .brand-name { font-weight: 700; font-size: 1.6rem; color: #8f9e73; letter-spacing: .06em; }
.user-site .brand-sub { font-weight: 500; font-size: 1.2rem; color: #6a6a62; letter-spacing: .06em; }

/* ヘッダー/フッターの2ボタンは少し小さめ・文字数に関係なく同じ幅／高さ／丸みで統一 */
.user-site .official-link,
.user-site .line-link {
  width: 180px; min-height: 46px; padding: 10px 18px; font-size: .92rem;
  border-radius: 999px; /* ピル型 */
}

/* フッターのブランドロゴ（控えめ・大きくなりすぎない・未設置でも崩れない） */
.user-site .footer-logo { text-align: center; margin: 0 0 18px; }
.user-site .footer-logo img { max-width: 160px; width: auto; height: auto; display: inline-block; }

/* 統一ボタン（予約する / 前の月・次の月 / 公式サイト / LINE など）
   緑背景＋白文字・高さ約50px・角丸13px・枠線なし・影なし・控えめなホバー */
.user-site .btn,
.user-site a.btn,
.user-site .official-link,
.user-site .line-link {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 24px;
  background: #8f9e73; color: #ffffff;
  border: none; border-radius: 999px; box-shadow: none; /* ピル型（左右端が完全に丸い） */
  font-weight: 600; font-size: 1rem; line-height: 1.3;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease;
}
.user-site .btn:hover,
.user-site a.btn:hover,
.user-site .official-link:hover,
.user-site .line-link:hover { background: #7f8e64; color: #ffffff; opacity: 1; }
.user-site .btn-disabled,
.user-site .btn-disabled:hover { background: #cfccc0; color: #ffffff; cursor: default; }

/* ファーストビュー */
.user-site .hero {
  background: #faf6ec; border: 1px solid #e7e0cd; border-radius: 12px;
  padding: 36px 28px; margin: 8px 0 26px; text-align: center;
}
.user-site .hero-title {
  font-size: 1.7rem; line-height: 1.5; color: #3c3a34; margin: 0 0 14px;
  letter-spacing: .05em; border: none; padding: 0;
}
.user-site .hero-text { color: #5c594f; font-size: 1.04rem; line-height: 2; margin: 0; }

/* ファーストビュー：追加文 */
.user-site .hero-text-sub { margin-top: 14px; }

/* 安心エリア */
.user-site .intro-box { background: #ffffff; border-color: #e7e0cd; }
.user-site .intro-title { color: #6a7850; margin-bottom: 14px; }
.user-site .intro-list { color: #4a473f; }

/* 初めての方向け 案内（項目型：見出し＋内容） */
.user-site .info-list { margin: 0; }
.user-site .info-row {
  display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid #ece6d8;
}
.user-site .info-row:last-child { border-bottom: none; padding-bottom: 0; }
.user-site .info-row dt {
  flex: 0 0 132px; font-weight: 700; color: #6a7850; letter-spacing: .02em;
}
.user-site .info-row dd { margin: 0; flex: 1; color: #4a473f; line-height: 1.85; }
@media (max-width: 600px) {
  .user-site .info-row { flex-direction: column; gap: 3px; padding: 12px 0; }
  .user-site .info-row dt { flex-basis: auto; }
}

/* ご予約の流れ */
.user-site .flow-steps li { background: #fff; border-color: #e7e0cd; }
.user-site .flow-num { background: #8f9e73; }
.user-site .flow-note { color: #6a7850; }

/* ご予約前の確認 */
.user-site .reserve-notes { background: #fffdf8; border-color: #e7e0cd; }
.user-site .reserve-notes-title { color: #6a7850; }
.user-site .reserve-notes li { color: #5c594f; }

/* カレンダー（利用者側のみ・薄い罫線で上品に） */
.user-site .cal-table th { background: #f1ede1; border-color: #e3dccb; color: #5c594f; }
.user-site .cal-table td { border-color: #e7e0cd; }
.user-site .cal-blank { background: #faf7ef; }
.user-site .cal-daynum { color: #3c3a34; }
.user-site .cal-slot { border-color: rgba(0,0,0,.06); }
/* カレンダー枠ステータス（落ち着いた配色） */
/* 空きあり：渋い青 */
.user-site .lvl-3 { background: #e8eef2; border-color: #c4d2dc; }
.user-site .lvl-3 .cal-stat { color: #3f5d72; }
/* 残り僅か：渋い黄（黄土寄り） */
.user-site .lvl-1, .user-site .lvl-2 { background: #f2ecd8; border-color: #dccfa4; }
.user-site .lvl-1 .cal-stat, .user-site .lvl-2 .cal-stat { color: #836a1c; }
/* 満席：渋い赤（ワインレッド寄り） */
.user-site .lvl-full { background: #eadcdc; border-color: #d3b6b6; }
.user-site .lvl-full .cal-stat { color: #813a3a; }
/* 受付終了：渋いグレー（視認性確保） */
.user-site .lvl-closed { background: #e7e7e3; border-color: #d2d2cb; }
.user-site .lvl-closed .cal-stat { color: #6e6e67; }
.user-site .cal-legend span { border-color: rgba(0,0,0,.10); }
/* スマホで横スクロールを「カレンダー部分だけ」に閉じ込める */
.user-site .cal-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.user-site .cal-table { box-sizing: border-box; }
.user-site .cal-cell { box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere; }

/* ワークショップ一覧：上品なカード（PC2列・スマホ1列・画像大きめ） */
.user-site .ws-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.user-site .ws-card {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  align-items: stretch;   /* ← 子(ws-card-body等)をカード全幅に。flex-start継承による縮みを解消 */
  background: #fff; border: 1px solid #e7e0cd; border-radius: 12px; overflow: hidden;
}
.user-site .ws-thumb {
  width: 100%; aspect-ratio: 1 / 1; height: auto;   /* 正方形・中央トリミング */
  object-fit: cover;
  border: none; border-bottom: 1px solid #e7e0cd; border-radius: 0;
}
.user-site .ws-card-body { padding: 18px 20px; }
.user-site .ws-card h2 { font-size: 1.2rem; color: #3c3a34; }
.user-site .ws-desc { color: #5c594f; }
.user-site .ws-meta { color: #5c594f; }

/* よくあるご質問 */
.user-site .faq-item { border-color: #e7e0cd; }
.user-site .faq-item summary::before { color: #8f9e73; }

/* LINE で相談する 案内 */
.user-site .line-cta { background: #faf6ec; border-color: #e7e0cd; }

/* フッター */
.user-site .site-footer {
  margin-top: 56px; background: #ffffff; border-top: 1px solid #e7e1d3;
  padding: 28px 0; color: #7a776c;
}

/* ---- 余白で区切る（高級感の核）。セクション間をゆったり ---- */
.user-site main.container { padding-top: 36px; padding-bottom: 64px; }
.user-site .hero { padding: 48px 34px; margin: 12px 0 44px; border-color: #ece6d8; }
.user-site .intro-box { padding: 28px 28px; margin: 0 0 44px; border-color: #ece6d8; }
.user-site .flow { margin: 0 0 44px; }
.user-site .section-title { margin: 50px 0 22px; }
.user-site .lead { margin: 0 0 24px; line-height: 1.9; }
.user-site .reserve-notes { padding: 24px 28px; margin: 0 0 40px; border-color: #ece6d8; }
.user-site .reserve-notes li { margin: 6px 0; }
.user-site .flow-steps { gap: 16px; }
.user-site .flow-steps li { padding: 22px 16px; border-color: #ece6d8; }
.user-site .ws-list { gap: 28px; margin-top: 8px; }
.user-site .ws-card { border-color: #ece6d8; }
.user-site .ws-card-body { padding: 22px 22px 26px; }
.user-site .ws-card h2 { margin: 0 0 10px; }
.user-site .ws-desc { margin: 0 0 12px; }
.user-site .faq-item { margin-bottom: 12px; border-color: #ece6d8; }
.user-site .faq-item summary { padding: 16px 18px; }
.user-site .faq-item p { padding: 0 18px 16px; }
.user-site .line-cta { padding: 32px 26px; margin-top: 50px; border-color: #ece6d8; }

/* ---- カレンダー：詰まらないよう余白を確保し、上下方向に整理 ---- */
.user-site .cal-cell { height: 118px; padding: 6px; }
.user-site .cal-daynum { margin-bottom: 6px; }
.user-site .cal-slot { margin-top: 6px; padding: 7px 8px; line-height: 1.5; border-radius: 8px; }
.user-site .cal-slot .cal-period { margin-bottom: 2px; }
.user-site .cal-slot .cal-ws { margin-bottom: 3px; }
/* ステータスに小さな丸（●）を付けて視認性UP（色は文字色を継承） */
.user-site .cal-stat::before { content: "●"; margin-right: 5px; font-size: .78em; vertical-align: 1px; }

/* ---- 凡例：囲みをやめ、ドット＋テキストで上品に ---- */
.user-site .cal-legend { gap: 14px 20px; margin-top: 16px; }
.user-site .cal-legend span {
  background: transparent; border: none; padding: 0;
  color: #4a473f; font-weight: 500; font-size: .82rem;
}
.user-site .cal-legend span::before { content: "●"; margin-right: 6px; font-size: .9em; }
.user-site .cal-legend .lvl-3::before { color: #3f5d72; }
.user-site .cal-legend .lvl-2::before { color: #9a7d23; }
.user-site .cal-legend .lvl-full::before { color: #8a3f3f; }
.user-site .cal-legend .lvl-closed::before { color: #8a8a83; }

/* スマホ：カレンダーは詰めすぎず・読める範囲でコンパクトに（上記の余白指定より後に再指定） */
@media (max-width: 600px) {
  .user-site .cal-cell { height: 96px; padding: 3px; }
  .user-site .cal-slot { margin-top: 4px; padding: 5px 6px; font-size: .68rem; line-height: 1.4; }
  .user-site .section-title { margin: 36px 0 16px; }
  .user-site .hero { padding: 32px 20px; margin-bottom: 32px; }
  .user-site .intro-box, .user-site .reserve-notes { margin-bottom: 32px; }
  /* スマホはボタンを押しやすく */
  .user-site .official-link, .user-site .line-link { flex: 1 1 auto; }
}

@media (max-width: 720px) {
  .user-site .ws-list { grid-template-columns: 1fr; }
  /* サムネイルは aspect-ratio で正方形維持（高さ固定はしない） */
}
@media (max-width: 600px) {
  .user-site .container { padding-left: 16px; padding-right: 16px; }
  .user-site .hero { padding: 26px 18px; }
  .user-site .hero-title { font-size: 1.4rem; }
  /* カレンダー：少し小さめにして読みやすさを保ちつつ枠内に */
  .user-site .cal-table { min-width: 480px; }   /* これ以下はcal-wrap内で横スクロール */
  .user-site .cal-cell { height: 86px; padding: 2px; }
  .user-site .cal-daynum { font-size: 0.8rem; }
  .user-site .cal-slot { font-size: 0.66rem; padding: 3px 4px; }
  .user-site .cal-table th { font-size: 0.72rem; }
}
/* ヘッダーのボタンが窮屈なときは中央寄せで折り返し */
@media (max-width: 480px) {
  .user-site .site-header .container { justify-content: center; text-align: center; }
  .user-site .site-nav { justify-content: center; width: 100%; }
}

/* ===== カレンダー ===== */
.cal-nav { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.cal-wrap { width: 100%; overflow-x: auto; }

/* 固定レイアウトで7列を等幅に。はみ出し防止の要。 */
.cal-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.cal-table th,
.cal-table td {
  width: 14.285%;
  box-sizing: border-box;
  border: 1px solid #d4d4cc;
}
.cal-table th {
  background: #eef1ea; padding: 5px 2px; font-size: 0.78rem; text-align: center;
}
.cal-cell {
  vertical-align: top;
  padding: 3px;
  height: 104px;            /* 最低の高さ（内容が増えれば伸びる） */
  overflow: hidden;
  word-break: break-word;   /* 長い語も折り返す */
  white-space: normal;
}
.cal-blank { background: #fafaf8; }
.cal-daynum { font-weight: bold; font-size: 0.82rem; margin-bottom: 3px; line-height: 1.2; }
.cal-daynum a { text-decoration: none; color: inherit; }
.cal-sun { color: #c0392b; }
.cal-sat { color: #2f6bb3; }

/* 午前/午後の枠ブロック（縦積み・ブロック全体がクリック領域） */
.cal-slot {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;          /* 午前と午後の間隔 */
  padding: 4px 5px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 0.72rem;
  line-height: 1.3;
  text-decoration: none;
  color: #2b2b2b;
  overflow: hidden;
}
a.cal-slot:hover { outline: 2px solid rgba(0,0,0,0.25); }
.cal-slot.cal-disabled { cursor: default; opacity: 0.92; }

.cal-slot .cal-period {
  display: block;
  font-size: 0.68rem; font-weight: bold; color: #555;
  margin-bottom: 1px;
}
.cal-slot .cal-ws {
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* 長い名前は2行で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: bold;
  word-break: break-word;
}
.cal-slot .cal-stat { display: block; font-weight: bold; margin-top: 1px; white-space: nowrap; }
.cal-tag {
  display: inline-block; margin-left: 4px; padding: 0 4px;
  font-size: 0.6rem; font-weight: normal;
  background: rgba(0,0,0,0.18); color: #fff; border-radius: 3px;
}

/* 残席レベル別の色分け */
.lvl-3      { background: #e2f3e6; border-color: #b6dcbd; }
.lvl-3 .cal-stat { color: #1f6b2c; }
.lvl-2      { background: #fff3cf; border-color: #ecd693; }
.lvl-2 .cal-stat { color: #8a6a00; }
.lvl-1      { background: #ffe3cf; border-color: #f0c19a; }
.lvl-1 .cal-stat { color: #a8480a; }
.lvl-full   { background: #fcdada; border-color: #eeb1b1; }
.lvl-full .cal-stat { color: #a32020; }
.lvl-closed { background: #ececec; border-color: #d6d6d6; color: #888; }
.lvl-closed .cal-stat { color: #888; }

/* 凡例 */
.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 0; }
.cal-legend span {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 0.72rem; font-weight: bold; border: 1px solid rgba(0,0,0,0.1);
}

/* 管理者カレンダーは情報が多いのでセルを高めに */
.cal-admin .cal-cell { height: 124px; }

/* スマホ：横スクロールで崩れ防止（利用者側優先） */
@media (max-width: 640px) {
  .cal-table { min-width: 560px; }
  .cal-cell { height: 96px; }
  .cal-slot { font-size: 0.7rem; }
}

/* ===== 利用者ページ スマホ最終調整（このファイル末尾＝最優先で適用） ===== */
.user-site .sp-br { display: none; } /* PCでは改行しない */

@media (max-width: 600px) {
  /* ⑤⑥ 指定箇所をスマホで改行 */
  .user-site .sp-br { display: inline; }

  /* スマホ：ロゴを大きく中央配置、サブはロゴ下に */
  .user-site .site-header .container { justify-content: center; text-align: center; }
  .user-site .site-brand { flex-direction: column; align-items: center; gap: 8px; width: 100%; }
  .user-site .brand-logo { height: 84px; }
  .user-site .brand-sub { font-size: 1.05rem; }

  /* ⑦ 指定の本文をスマホでは左揃え（PCは中央のまま） */
  .user-site .hero-text,
  .user-site .flow-note { text-align: left; }

  /* 修正3：前の月・次の月ボタンをスマホでは少し小さく（ピル型は維持） */
  .user-site .cal-nav .btn {
    min-height: 38px; padding: 7px 14px; font-size: .82rem;
  }
  /* 修正4：当月表示（年月）をスマホで中央に */
  .user-site .cal-nav { justify-content: space-between; gap: 8px; }
  .user-site .cal-nav strong { flex: 1; text-align: center; }

  /* ④⑨ ヘッダー・フッターのボタンを1行・等幅に */
  .user-site .site-nav,
  .user-site .site-foot-links {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    justify-content: center; align-items: center; gap: 10px; width: 100%;
  }
  .user-site .official-link,
  .user-site .line-link {
    width: auto; flex: 1 1 0; min-width: 0; max-width: 220px;
    padding-left: 8px; padding-right: 8px;
  }

  /* ⑧ カレンダーを必ず画面内に収める（横スクロールさせない） */
  .user-site .cal-wrap { overflow-x: hidden; }
  .user-site .cal-table { min-width: 0; width: 100%; }
  .user-site .cal-cell {
    height: auto; min-height: 80px; padding: 2px;
    box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere;
  }
  .user-site .cal-table th { font-size: .64rem; padding: 4px 1px; }
  .user-site .cal-daynum { font-size: .72rem; margin-bottom: 3px; }
  .user-site .cal-slot {
    margin-top: 3px; padding: 3px; font-size: .58rem; line-height: 1.35; border-radius: 6px;
  }
  .user-site .cal-slot .cal-period { font-size: .56rem; margin-bottom: 1px; }
  .user-site .cal-slot .cal-stat { white-space: normal; } /* 狭い端末では折り返して見切れ防止 */
  .user-site .cal-stat::before { margin-right: 3px; font-size: .72em; }
}

@media (max-width: 360px) {
  /* 極小端末でも収まるようさらに微調整 */
  .user-site .cal-slot { font-size: .54rem; }
  .user-site .cal-table th { font-size: .6rem; }
}

/* ====================================================================
 * ボーダーを控えめに（線で囲まず、余白と薄い境界で上品に）
 *   ブランドカラーをかなり薄めた線＋角丸控えめ＋影なし
 * ================================================================== */
.user-site .hero,
.user-site .intro-box,
.user-site .reserve-notes,
.user-site .flow-steps li,
.user-site .ws-card,
.user-site .faq-item,
.user-site .line-cta,
.user-site .ws-meta-box,
.user-site .reserve-form {
  border: 1px solid rgba(143, 158, 115, 0.18);
  border-radius: 14px;
  box-shadow: none;
}
/* 内部の区切り線はさらに薄く */
.user-site .info-row { border-bottom-color: rgba(80, 80, 80, 0.08); }
.user-site .ws-thumb { border-bottom-color: rgba(143, 158, 115, 0.18); }
.user-site .ws-detail-img { border-color: rgba(143, 158, 115, 0.18); }

/* スマホのみ：LINE案内(.line-cta)内の「LINEで相談」を「予約する」と同サイズ（全幅）に。
   ヘッダー/フッターのLINEボタンやPC表示には影響しない。 */
@media (max-width: 600px) {
  .user-site .line-cta .line-link {
    width: 100%; max-width: none; flex: none;
    min-height: 50px; padding: 12px 24px; font-size: 1rem;
    /* border-radius: 999px（ピル型）はそのまま継承 */
  }
}

/* ====================================================================
 * 修正1：セクションタイトル下のラインを「短い細線」に（上品・控えめ）
 *   太い border-bottom をやめ、疑似要素で短い1pxラインに置き換え
 * ================================================================== */
.user-site .section-title { border-bottom: none; padding-bottom: 0; }
.user-site .section-title::after,
.user-site .intro-title::after {
  content: ""; display: block;
  width: 48px; height: 1px; margin: 14px 0 0;
  background: rgba(143, 158, 115, 0.45);
}

/* 修正2・3：スマホのみ調整 */
@media (max-width: 600px) {
  /* 修正2：ヘッダーの「ワークショップ予約」とボタンの間隔を少し広げる */
  .user-site .site-header .container { gap: 16px; }
  .user-site .site-nav { margin-top: 4px; }

  /* 修正3：「初めての方も大歓迎です」見出しを中央＋ラインも中央（本文は変えない） */
  .user-site .intro-title { text-align: center; }
  .user-site .intro-title::after { margin-left: auto; margin-right: auto; }
}

/* 予約案内の下の注意文（控えめ・小さめ） */
.user-site .flow-caution {
  text-align: center; color: #7a776c; font-size: .9rem;
  line-height: 1.85; margin: 10px 0 0;
}
.user-site .flow-caution a { color: #6a7850; text-decoration: underline; }

/* 予約フォーム/完了画面の会場情報 */
.user-site .venue-info { line-height: 1.8; }
.user-site .venue-info a { color: #6a7850; text-decoration: underline; }

/* カレンダー内の会場名（管理者・お客様 共通／控えめ・1行省略） */
.cal-slot .cal-venue {
  display: block; font-size: 0.66rem; color: #666; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 修正5：フッターの制作者表記（控えめ・小さめ） */
.user-site .site-credit { display: block; margin-top: 6px; font-size: .72rem; color: #9a978d; }
.user-site .site-credit a { color: #9a978d; text-decoration: underline; }

/* 修正6：予約フォームのキャンセルポリシー（高圧的にならない控えめな囲み） */
.user-site .cancel-policy {
  background: #faf8f2; border: 1px solid rgba(143, 158, 115, 0.18); border-radius: 12px;
  padding: 14px 16px; margin: 18px 0; font-size: .9rem; line-height: 1.85; color: #5c594f;
}
.user-site .cancel-policy a { color: #6a7850; text-decoration: underline; }

/* 修正2：仮予約メール注意文はスマホで左揃え（PCは中央のまま） */
@media (max-width: 600px) {
  .user-site .flow-caution { text-align: left; }
}

/* ===== ワークショップ一覧カード：ボタンを下端で揃え、カード内で左右中央に =====
   予約可/不可で同じラッパー(.ws-card-action)・同じルールで配置（HTML共通化）。
   ラッパーが無い旧HTMLでも中央になるよう、ボタン直接指定も併用。 */
.user-site .ws-card-body { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
.user-site .ws-desc { flex: 1 1 auto; }     /* 説明文を伸ばし、参加費行＋ボタンを下端へ */

/* ボタンを囲むエリア：フレックスで確実に中央（a/span どちらでも同一） */
.user-site .ws-card-action {
  margin-top: auto;            /* カード下端へ */
  display: flex;
  justify-content: center;     /* ← 左右中央 */
  width: 100%;
}

/* ボタン本体（予約する／受付可能な日程がありません）共通 */
.user-site .ws-card .btn {
  width: 280px;                /* 両ボタン同じ幅 */
  max-width: 100%;             /* 狭い画面では枠内に収める */
  white-space: normal;         /* 長い文言は折り返してはみ出さない */
  margin: 16px auto 0;         /* ラッパー無し(body直下)でも左右中央 */
  align-self: center;          /* flex縦並び直下でも中央 */
}
/* ラッパー内ではラッパーが中央化するので個別の自動マージンは不要 */
.user-site .ws-card-action .btn { margin: 0; align-self: auto; }

/* 予約フォーム：参加人数の合計金額表示 */
.user-site .fee-calc {
  margin: 8px 0 0; font-weight: 600; color: #6a7850; font-size: .98rem;
}