/* ============================================================
   第43回 松江城大茶会 全体CSS  v002
   設定場所: コンテンツを入力 > リリース > リリース設定(Web) > Web版のCSSを設定
   注意: このファイルは保存した時点で本番にも即時反映される。
         更新時はファイル名の連番を上げてアップロードすること(同名は反映されない)。

   水鏡・松江城(暗色テーマ)の知見を明色テーマに移植したもの。
   暗色特有の「黒沈み対策(v004)」は不要なので落とし、代わりに
   明色地で浮く白箱・白カードの縁取りを足している。
   v002: 601px以上の「もっと見る」リンク(.widget__header__event)が
         Vuetify既定の青リンク色のまま出ていたのを緑に統一(2026-09-08)。
   ============================================================ */

/* 1. Webフォント(必ず先頭に置く) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

/* 2. ブランド変数 —— 案件で書き換えるのはここだけ */
:root {
  /* brand(チラシ準拠) */
  --brand-paper:   #F4F1E8;  /* 地色: 生成りの和紙 */
  --brand-paper2:  #EAE5D8;  /* 面: セクション区切り */
  --brand-sumi:    #2B2A28;  /* 文字: 墨 */
  --brand-green:   #3F6046;  /* 主色: 茶碗と着物の緑 */
  --brand-green-d: #2C4632;  /* 濃緑: ヘッダー・バッジ */
  --brand-aka:     #C2766E;  /* 差し色: 朱鼠(CV・要予約バッジ) */
  --brand-gold:    #B79A5B;  /* 罫線・区切り */

  /* semantic(標準UI・モジュールが参照する) */
  --header-bg-color:   rgba(244, 241, 232, .94);
  --header-name-color: var(--brand-green-d);
  --header-line-color: rgba(183, 154, 91, .55);
  --top-bg-color:      var(--brand-paper);
  --top-text-color:    var(--brand-sumi);
  --top-line-color:    var(--brand-gold);
  --btn-bg-color:      var(--brand-green);
  --btn-text-color:    #ffffff;
  --footer-bg-color:   var(--brand-green-d);
  --footer-text-color: #F1EEE5;
  --booth-list-color:  var(--brand-green);
  --booth-search-color: var(--brand-green);
  --booth-icon-color:  var(--brand-green);
  --booth-pagination-color: var(--brand-green);
  --booth-detail-color: var(--brand-paper);
}

/* 3. フォント標準化(明朝基調・eventosはデフォルトが太字)
   ※ eventos は内側の .v-application--wrap に既定フォントを再指定するため、
      body/.v-application だけでは中身に届かない(実証済み)。コンテンツ要素へ
      詳細度(0,1,1)以上で直接当てる。アイコン(<i>/.v-icon/mdi/material)は除外。 */
body,
.v-application,
.v-application--wrap {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif !important;
  font-weight: normal;
}
.v-application--wrap p, .v-application--wrap a, .v-application--wrap li,
.v-application--wrap td, .v-application--wrap th, .v-application--wrap dd, .v-application--wrap dt,
.v-application--wrap h1, .v-application--wrap h2, .v-application--wrap h3,
.v-application--wrap h4, .v-application--wrap h5, .v-application--wrap h6,
.v-application--wrap button, .v-application--wrap input, .v-application--wrap textarea, .v-application--wrap label,
.v-application--wrap span:not(.v-icon):not([class*="icon"]):not([class*="mdi"]):not([class*="material"]),
.v-application--wrap div:not([class*="icon"]):not(.v-icon) {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif !important;
}
h1, h2, h3, h4 { font-weight: 600; }
.v-application--wrap p { line-height: 1.95; }

/* 4. 背景 —— 和紙の生成り(画像は使わない) */
.widget__wrap, .list__wrap, .detail__wrap {
  background-color: var(--brand-paper) !important;
  color: var(--brand-sumi);
}
/* ブース一覧の白ベタを透過して地色を見せる(テンプレ由来の手法) */
section.contents__wrap.list__contents > section > div {
  background: transparent !important;
}

/* 5. 標準UIのテーマ上書き */

/* コンテンツ名・アンダーライン */
.widget-title__text { color: var(--brand-green-d) !important; letter-spacing: .25em; }
.widget-header__border, .widget-title__border {
  border-color: var(--top-line-color) !important;
}

/* もっと見るボタン(600px以下: 下部ボタン) */
.v-btn__content { color: var(--brand-green) !important; }
.widget__bottom.v-btn, button.widget__bottom {
  background-color: transparent !important;
  border: 1px solid var(--brand-green) !important;
  box-shadow: none !important;
}

/* もっと見るリンク(601px以上: ウィジェット見出し内のリンクに切り替わる)
   実機で判明(2026-09-08): .widget__bottom__event は601px以上でeventos側が
   display:none にし、代わりに .widget__header__event というリンクが見出し内に
   表示される。ここは未指定だとVuetifyの既定リンク色(青)がそのまま出る。 */
.widget__header__event { color: var(--brand-green) !important; text-decoration: none; }
.widget__header__event:hover { text-decoration: underline; }

/* ブース: タイトル縦線・詳細の面 */
.booth-list-title__text {
  border-color: var(--booth-list-color) !important;
  color: var(--brand-green-d) !important;
}
.base-background-color { background-color: var(--booth-detail-color) !important; }

/* ブース: 絞り込み・ページネーション */
.booth-search__button { background-color: var(--booth-search-color) !important; }
.v-pagination__item--active {
  background-color: var(--booth-pagination-color) !important;
  border-color: var(--booth-pagination-color) !important;
}

/* 明色テーマ特有: 白いブースカードが地色に溶けるので細い罫で締める */
.booth-card-layout__content {
  border: 1px solid rgba(183, 154, 91, .35) !important;
  box-shadow: none !important;
}

/* 標準ヘッダー(サブページ全体・SP時のホーム)を生成りに統一
   ※自作ヘッダーはLive!ホームのみ。サブページは標準ヘッダーが出るため、
     ロゴ枠・タブ領域の白背景を地色に寄せて「意図した見た目」にする。 */
.header__wrap, .header__content,
.header-logo__wrap, .header-logo__image-pc, .header-logo__image-sp,
.header-tab__wrap, .header-tab__pc, .header-tab__menu, .header-tab__sp,
.header-tab__wrap .v-tabs, .header-tab__wrap .v-tabs-bar,
.header-tab__wrap .v-tabs__bar, .header-tab__wrap .v-tab,
.header-tab__wrap .theme--light.v-tabs-bar {
  background-color: var(--header-bg-color) !important;
}
.header-tab__name,
.header-tab__v-tab,
.header__wrap .menu__name { color: var(--header-name-color) !important; }
.header-tab__wrap { border-color: var(--header-line-color) !important; }

/* 6. 標準UIの消し込み */
.top-button__wrap { display: none; }               /* 最上部に戻るボタン */
p.portal-event-top { display: none !important; }   /* イベントトップに戻る */

/* 7. ブース等 詳細ページの機能名ヘッダー(白箱+黒字)を地色に馴染ませる */
.detail-title__wrap,
.detail-title__text,
.detail-title__text h2 {
  background: transparent !important;
  color: var(--brand-green-d) !important;
}
.detail-title__border.base-background-color {
  background-color: var(--brand-gold) !important;
}

/* ============================================================
   8. 自作パーツ(HTMLモジュール・ブース本文から使う)
   ============================================================ */

/* 8-1. ボタン */
.sk-btn {
  display: inline-block;
  width: 100%;
  max-width: 360px;
  color: var(--btn-text-color) !important;
  background: var(--btn-bg-color);
  border: 1px solid var(--btn-bg-color);
  padding: 1em 2em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  letter-spacing: .12em;
  transition: .3s;
}
.sk-btn:hover { background: transparent; color: var(--btn-bg-color) !important; }
.sk-btn--aka { background: var(--brand-aka); border-color: var(--brand-aka); }
.sk-btn--aka:hover { color: var(--brand-aka) !important; }
.sk-btn--ghost {
  background: transparent;
  color: var(--brand-green) !important;
  border-color: var(--brand-green);
}
.sk-btn--ghost:hover { background: var(--brand-green); color: #fff !important; }

/* 販売開始前のCVボタン(link_map の手順で is-soon を外して有効化する) */
.sk-btn.is-soon {
  background: #cfc9bb;
  border-color: #cfc9bb;
  color: #fff !important;
  pointer-events: none;
  cursor: default;
}

/* 8-2. バッジ(茶種・開催日・予約要否) */
.sk-badge {
  display: inline-block;
  font-size: .75em;
  letter-spacing: .1em;
  padding: .15em .8em;
  border-radius: 2px;
  margin-right: .4em;
  vertical-align: middle;
  white-space: nowrap;
}
.sk-badge--tea  { background: var(--brand-green); color: #fff; }      /* 抹茶/煎茶/紅茶 */
.sk-badge--day  { background: var(--brand-aka); color: #fff; }        /* 24日のみ/25日のみ */
.sk-badge--need { border: 1px solid var(--brand-aka); color: var(--brand-aka); }  /* 要予約 */
.sk-badge--free { border: 1px solid var(--brand-green); color: var(--brand-green); } /* 予約不要 */

/* 8-3. ブース本文の会場ラベル */
.sk-booth-place {
  display: inline-block;
  color: var(--brand-green);
  border: 1px solid var(--brand-green);
  padding: .1em .8em;
  border-radius: 2px;
  font-size: .85em;
  letter-spacing: .1em;
  margin-bottom: .5em;
}

/* 8-4. 菓名(ブース本文で使う縦の締め) */
.sk-kashi {
  border-left: 3px solid var(--brand-gold);
  padding: .2em 0 .2em 1em;
  margin: 1.2em 0;
}
.sk-kashi__name { font-size: 1.25em; letter-spacing: .12em; margin: 0; }
.sk-kashi__ruby { font-size: .75em; color: #6b6558; margin: 0 0 .3em; }
.sk-kashi__shop { font-size: .85em; color: var(--brand-green); margin: 0; }

/* 8-5. WEBページの共通レイアウト(各ページのモジュールから使う) */
.sk-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5em 1.2em 4em;
  color: var(--brand-sumi);
}
.sk-page__title {
  text-align: center;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--brand-green-d);
  border-bottom: 1px solid var(--brand-gold);
  padding-bottom: .6em;
  margin: 0 0 1.2em;
  font-size: 1.4em;
}
.sk-page__lead { text-align: center; margin: 0 0 2.5em; font-size: .95em; }
.sk-page h3 {
  color: var(--brand-green-d);
  letter-spacing: .15em;
  font-size: 1.05em;
  border-left: 3px solid var(--brand-gold);
  padding-left: .7em;
  margin: 2.5em 0 1em;
}
.sk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9em;
}
.sk-table th, .sk-table td {
  border: 1px solid rgba(183, 154, 91, .45);
  padding: .8em 1em;
  text-align: left;
  vertical-align: top;
}
.sk-table th {
  background: var(--brand-paper2);
  color: var(--brand-green-d);
  font-weight: normal;
  white-space: nowrap;
}
@media screen and (max-width: 600px) {
  .sk-table, .sk-table tbody, .sk-table tr, .sk-table th, .sk-table td { display: block; width: 100%; }
  .sk-table th { border-bottom: 0; }
  .sk-table td { border-top: 0; margin-bottom: -1px; }

  /* 比較表(列の対応が意味を持つ表)は縦積みにせず、横スクロールで見せる */
  .sk-table--compare { display: table; min-width: 460px; width: 100%; }
  .sk-table--compare tbody { display: table-row-group; }
  .sk-table--compare tr { display: table-row; }
  .sk-table--compare th, .sk-table--compare td {
    display: table-cell;
    width: auto;
    margin: 0;
    border: 1px solid rgba(183, 154, 91, .45);
    padding: .6em .7em;
    font-size: .88em;
  }
}
/* 横スクロールさせたい表の外側に付ける */
.sk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 8-6. 汎用 */
.sk-note { font-size: .8em; color: #6b6558; line-height: 1.8; }
.sk-alert { color: var(--brand-aka); font-weight: 600; }
.sk-gold { color: var(--brand-gold); }
.sk-center { text-align: center; }
.sk-rule {
  border: 0;
  border-top: 1px solid var(--header-line-color);
  margin: 2.5em 0;
}