/* 藤七温泉 彩雲荘 デザイン案の共通の土台（3 案で共有）。ダミーの印 .dm と案内の帯は提案キット（proposal.css＝scripts/mockup/kit の写し）。
   案ごとの見た目は yukemuri.css / tomoshibi.css / tabiji.css に置く。ここには「どの案でも同じ物」だけ。 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-only { display: inline; }
.sp-only { display: none; }
@media (max-width: 767px) { .pc-only { display: none; } .sp-only { display: inline; } }
/* 操作の言い方（クリック／タップ）は幅ではなくホバーの有無で分ける（細い窓の PC・横向きのタブレット） */
.on-sp { display: none; }
@media (hover: none) { .on-pc { display: none; } .on-sp { display: inline; } }

/* 縦書き（和文の見出し・キャッチ）。数字は漢数字で書く（縦中横に頼らない）。 */
.vtxt { writing-mode: vertical-rl; text-orientation: mixed; font-feature-settings: "vpal" 1; }

/* 背景に敷く動画（UI を出さない・音なし・くり返し）。本番は Cloudflare R2 の住所を指す。 */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bg-video::-webkit-media-controls, .bg-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* 写真の器（object-fit で切り取る）。ダミー写真の印を角に置くので relative。 */
.ph { position: relative; overflow: hidden; }
.ph > img, .ph > video { width: 100%; height: 100%; object-fit: cover; }

/* 地図は押すまで動かない（確認用の版では常に止める＝proposal.css）・VR の埋め込みは動かせる */
.map-frame, .embed-frame { position: relative; overflow: hidden; }
.map-frame iframe, .embed-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 横に流れる列（スマホは指で送る）。スクロールバーは細く。 */
.snap-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.snap-row > * { scroll-snap-align: start; flex: 0 0 auto; }

/* 月の暦の見本（B案・C案＝まだ手直しの指示前のまま・本番は ASB Calendar のイベント帯）。週ごとの格子に、日にちの枠（縦いっぱい）とイベントの帯（行を指定）を重ねる。
   色は案ごとに --cal-line / --cal-inn / --cal-road / --cal-area（宿の予定／道路／地域の行事）。 */
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { text-align: center; font-size: 12px; padding: 8px 0; }
.cal-week { grid-template-rows: 30px repeat(3, 26px) 10px; border-top: 1px solid var(--cal-line, #ddd); }
.cal-week > .cd { grid-row: 1 / -1; padding: 6px 8px; font-size: 13px; line-height: 1; border-left: 1px solid var(--cal-line, #ddd); }
.cal-week > .cd:first-child { border-left: 0; }
/* ★日にちの枠は列を明示する（明示しないと、先に置かれたイベントの帯を避けて右へ押し出される） */
.cal-week > .cd:nth-child(1) { grid-column: 1; } .cal-week > .cd:nth-child(2) { grid-column: 2; } .cal-week > .cd:nth-child(3) { grid-column: 3; }
.cal-week > .cd:nth-child(4) { grid-column: 4; } .cal-week > .cd:nth-child(5) { grid-column: 5; } .cal-week > .cd:nth-child(6) { grid-column: 6; } .cal-week > .cd:nth-child(7) { grid-column: 7; }
.cal-week > .cd.is-out { opacity: .35; }
.cal-week > .ev { position: relative; z-index: 1; align-self: center; margin: 0 3px; padding: 4px 8px; border-radius: 3px; font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-week > .ev.r2 { grid-row: 2; } .cal-week > .ev.r3 { grid-row: 3; } .cal-week > .ev.r4 { grid-row: 4; }
.cal-week > .ev.inn { background: var(--cal-inn, #b0452e); color: #fff; }
.cal-week > .ev.road { background: var(--cal-road, #55606a); color: #fff; }
.cal-week > .ev.area { background: var(--cal-area, #6f9a92); color: #fff; }
.cal-week > .ev.is-cont { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.cal-week > .ev.is-open { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.cal-legend .inn i { background: var(--cal-inn, #b0452e); } .cal-legend .road i { background: var(--cal-road, #55606a); } .cal-legend .area i { background: var(--cal-area, #6f9a92); }
@media (max-width: 767px) {
  .cal-week { grid-template-rows: 24px repeat(3, 20px) 6px; }
  .cal-week > .cd { padding: 4px 5px; font-size: 11px; }
  .cal-week > .ev { font-size: 9.5px; padding: 3px 4px; margin: 0 1px; }
}
/* イベントカレンダー＝本物の ASB Calendar 2.18.2（assets/asb-calendar/・設定 cal.js）を案の見た目へ寄せる共通の CSS（2026-09-30・今は A案だけ＝B・C は手直しの指示が来たら同じ形で）。
   ★プラグインは直さない。詳細度はプラグインの `.asbcala-shortcode-wrapper .asbcala-calendar …`（0,2,0〜）より 1 段上げる＝器の [data-cal-title]。
     !important はプラグインが付けている所（日付の色・今日の印・スマホの帯の高さ）だけ。
   ★案ごとの違いは変数だけ（--cal-*）＋月の見出しの形（各案の CSS・今は yukemuri.css）。帯の色はカテゴリーの色（管理画面）がそのまま来る＝data-event-category-slug で塗り直す（本番も同じ書き方でよい）。
   並び＝月の見出しと送りのボタンを左に・凡例を右に・その下に暦（スマホは凡例を見出しの下へ）。 */
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar {
  --asb-border-color: var(--cal-line); --asb-header-bg: transparent; --asb-header-text: var(--cal-ink);
  --asb-weekday-text: var(--cal-ink); --asb-sunday-text: var(--cal-sun); --asb-saturday-text: var(--cal-sat);
  --asb-today-badge-bg: var(--cal-today-bg); --asb-today-badge-text: var(--cal-today-ink);
  --header-h: 36px; --date-h: 32px; --pad-a: 2px; --pad-b: 6px; --strip-h: 22px; --strip-m: 4px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px;
  max-width: none; min-width: 0; margin: 0; font-family: var(--cal-font); font-size: 14px; letter-spacing: .04em; color: var(--cal-ink);
}
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header { grid-column: 1; grid-row: 1; justify-content: flex-start; align-items: flex-end; gap: 10px; padding: 0; margin: 0 0 20px; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-title-container { order: -1; flex-grow: 0; justify-content: flex-start; margin-right: 18px; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-title-wrapper { min-width: 0; justify-content: flex-start; text-align: left; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header h2 { padding: 0; text-align: left; color: var(--cal-ink); font-variant-numeric: lining-nums; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header h2.is-link { padding: 0; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header h2.is-link:hover { background: none; opacity: .7; }
/* 月を送るボタン＝細い線の丸（中の文字は読み上げ用に残して隠す） */
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header button.calendar-nav-button {
  position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--cal-nav-line); background: transparent; color: var(--cal-ink);
  transition: background-color .35s, color .35s, border-color .35s;
}
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header button.calendar-nav-button:hover { background: var(--cal-nav-hover-bg); border-color: var(--cal-nav-hover-bg); color: var(--cal-nav-hover-ink); }
.asbcala-shortcode-wrapper[data-cal-title] .calendar-nav-button .button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.asbcala-shortcode-wrapper[data-cal-title] .calendar-nav-button::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.asbcala-shortcode-wrapper[data-cal-title] .calendar-nav-button.prev-month::before { transform: scaleX(-1); }
.asbcala-shortcode-wrapper[data-cal-title] .calendar-nav-spacer { width: 40px; }
/* 凡例＝右上（押すとその種類を隠す＝プラグインの機能） */
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-legend { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 30px; font-size: 12px; color: var(--cal-muted); }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-legend .legend-items { gap: 6px 18px !important; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-legend .legend-item { cursor: pointer; gap: 7px; letter-spacing: .08em; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-legend .legend-ellipse { width: 12px; height: 12px; border: 0; border-radius: 2px; }
.asbcala-shortcode-wrapper[data-cal-title] .legend-item[data-category-slug="inn"] .legend-color { background-color: var(--cal-inn) !important; }
.asbcala-shortcode-wrapper[data-cal-title] .legend-item[data-category-slug="road"] .legend-color { background-color: var(--cal-road) !important; }
.asbcala-shortcode-wrapper[data-cal-title] .legend-item[data-category-slug="area"] .legend-color { background-color: var(--cal-area) !important; }
/* 暦 */
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .asbcala-grid-container { grid-column: 1 / -1; grid-row: 2; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table th { border: 0; border-top: var(--cal-rule-w, 1px) solid var(--cal-rule); background: transparent; font: var(--cal-head-weight, 500) var(--cal-head-size, 12px)/1 var(--cal-head-font, var(--cal-font)); letter-spacing: .1em; padding: 0; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table td { border: 0; border-top: 1px solid var(--cal-line); border-left: 1px solid var(--cal-line); }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table td:first-child { border-left: 0; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table tr:last-child td { border-bottom: 1px solid var(--cal-line); }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table td .date-number { padding: 7px 8px; font: var(--cal-num-weight, 500) var(--cal-num-size, 15px)/1 var(--cal-num); font-variant-numeric: lining-nums; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table td.other-month { background-image: none; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table td.other-month .date-day { opacity: .32; }
/* 今日＝案の色の丸（プラグインは !important で 20px の丸） */
html body .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar:not(.asbcala-simple-mode) .calendar-table td.today.today-circle .date-day { width: 24px !important; height: 24px !important; min-width: 24px !important; font-weight: 500 !important; margin: -4px 0 0 -4px !important; }
/* 帯（イベント） */
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .event-strip { border-radius: 3px; font-size: 11.5px; letter-spacing: .06em; }
.asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .event-strip .event-title { padding: 0 8px; }
.asbcala-shortcode-wrapper[data-cal-title] .event-strip[data-event-category-slug="inn"] { background-color: var(--cal-inn) !important; color: var(--cal-strip-ink, #fff) !important; }
.asbcala-shortcode-wrapper[data-cal-title] .event-strip[data-event-category-slug="road"] { background-color: var(--cal-road) !important; color: var(--cal-strip-ink, #fff) !important; }
.asbcala-shortcode-wrapper[data-cal-title] .event-strip[data-event-category-slug="area"] { background-color: var(--cal-area) !important; color: var(--cal-strip-ink, #fff) !important; }
/* 吹き出し（body の直下に出る）＝案の CSS が .plan-* .asbcala-tip で色を決める */
@media (max-width: 767px) {
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar { --header-h: 30px; --date-h: 24px; --strip-h: 17px !important; --strip-m: 2px !important; font-size: 12px; }
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header { grid-column: 1 / -1; margin-bottom: 12px; }
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header button.calendar-nav-button { width: 36px; height: 36px; }
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-legend { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin: 0 0 14px; font-size: 11px; }
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .asbcala-grid-container { grid-row: 3; }
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-table td .date-number { padding: 5px 5px; font-size: 12.5px; }
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .event-strip { font-size: 9.5px; letter-spacing: 0; }
  .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .event-strip .event-title { padding: 0 4px; }
}