/* ws.arculm.com B 民宿つづら野 b.css v1.0
   前提：site.css の後に読む。site.css は変更しない。
   使う色は確定4色＋白のみ：地 #EEF1F0／主 #6C5238／副 #4A6572／文字 #000000／白 #FFFFFF
   ------------------------------------------------------------ */

/* 上半分（自社サイト部分）の地と見出し */
.b-top { background: #EEF1F0; }
.b-top h1, .b-top h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.08em; }
.b-top h2 { color: #6C5238; }

/* 画像スロット（無地の仮画像でも位置が分かるよう1pxの枠。写真差し込み後は写真枠になる） */
.b-slot { border: 1px solid #4A6572; }
.b-slot img { width: 100%; height: auto; display: block; }

/* ヒーロー（署名モーション。霧はヒーロー内に限定） */
.b-hero { position: relative; overflow: hidden; }
.b-hero-inner { position: relative; z-index: 3; padding: 48px 0 0; text-align: center; }
.b-house { position: relative; z-index: 1; width: min(52vw, 240px); margin: 0 auto; color: #6C5238; opacity: 0.2; padding-top: 40px;
  animation-name: b-house-in; animation-duration: 1600ms; animation-delay: 300ms;
  animation-timing-function: ease-out; animation-fill-mode: forwards; }
@keyframes b-house-in { to { opacity: 1; } }
.b-mist { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 1;
  animation-name: b-clear; animation-duration: 1600ms; animation-delay: 300ms;
  animation-timing-function: ease-out; animation-fill-mode: forwards; }
@keyframes b-clear { to { opacity: 0.25; } }
.b-fog { position: absolute; top: -10%; bottom: -10%; left: -60%; width: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 22%, rgba(255,255,255,0.72) 48%, rgba(255,255,255,0.95) 72%, rgba(255,255,255,0) 100%);
  animation-name: b-drift; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.b-fog2 { opacity: 0.85;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 30%, rgba(255,255,255,0.9) 62%, rgba(255,255,255,0) 100%);
  animation-delay: -2s; }
@keyframes b-drift { 0% { transform: translateX(0); } 50% { transform: translateX(6%); } 100% { transform: translateX(0); } }

/* 文字の浮上（読み込み起点。0.9秒。最後の要素も2.1秒で完了＝2.4秒以内） */
.b-rise { opacity: 0; transform: translateY(14px);
  animation-name: b-rise; animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); animation-fill-mode: forwards; }
.b-d1 { animation-delay: 100ms; }
.b-d2 { animation-delay: 400ms; }
.b-d3 { animation-delay: 800ms; }
.b-d4 { animation-delay: 1200ms; }
@keyframes b-rise { to { opacity: 1; transform: none; } }

.b-kind { font-size: 16px; letter-spacing: 0.06em; margin: 0 auto 8px; max-width: none; }
.b-hero h1 { margin-bottom: 16px; }
.b-catch { font-family: var(--font-serif); font-size: 20px; letter-spacing: 0.08em; line-height: 1.9; margin: 0 auto 16px; max-width: none; word-break: keep-all; overflow-wrap: anywhere; }
.b-sub { font-size: 17px; margin: 0 auto; max-width: 30em; }
.b-heroimg { position: relative; z-index: 1; margin: 40px auto 0; max-width: 960px; }
.b-photofog { position: absolute; inset: 0; background: #FFFFFF; opacity: 1; pointer-events: none; }
@media (min-width: 720px) { .b-catch { font-size: 24px; } }

/* スキップ・スクロール到達後の最終状態（霧は薄く静止、線画と文字は見えている） */
.b-hero.is-final .b-mist { animation: none; opacity: 0.25; }
.b-hero.is-final .b-fog { animation-play-state: paused; }
.b-hero.is-final .b-house { animation: none; opacity: 1; }
.b-hero.is-final .b-photofog { opacity: 0; }
.b-hero.is-final .b-rise { animation: none; opacity: 1; transform: none; }

/* JS無効：最終状態で静止（ループも動かさない） */
html.no-js .b-rise { animation: none; opacity: 1; transform: none; }
html.no-js .b-mist { animation: none; opacity: 0.25; }
html.no-js .b-fog { animation: none; }
html.no-js .b-house { animation: none; opacity: 1; }
html.no-js .b-photofog { opacity: 0; }

/* 宿の紹介 */
.b-about-grid { display: grid; gap: 32px; }
@media (min-width: 720px) { .b-about-grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.b-rooms { border-collapse: collapse; margin: 0 0 24px; width: 100%; max-width: 480px;
  font-variant-numeric: tabular-nums; background: #FFFFFF; }
.b-rooms th, .b-rooms td { border-bottom: 1px solid #000000; padding: 10px 12px; font-size: 17px; text-align: right; word-break: keep-all; }
.b-rooms th { white-space: nowrap; }
.b-rooms thead th { border-bottom: 3px solid #000000; }
.b-rooms thead th:first-child, .b-rooms tbody th { text-align: left; }

/* 「4つの顔」カード（設計箇所②） */
.b-faces { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 32px 0; }
@media (min-width: 720px) { .b-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-faces li { background: #FFFFFF; border-top: 3px solid #4A6572; padding: 24px 12px; text-align: center; }
.b-face-name { font-family: var(--font-serif); font-size: 18px; letter-spacing: 0.04em; margin: 0 0 8px; max-width: none;
  word-break: keep-all; overflow-wrap: normal; min-height: 3.6em; }
.b-face-num { font-size: 32px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; max-width: none; }
.b-face-num small { font-size: 17px; font-weight: 400; }
.b-facesimg { max-width: 720px; margin: 32px auto 0; }
/* Bだけ0.3秒間隔（共通150msを上書き。急がない） */
.b-faces.is-in > :nth-child(1) { transition-delay: 0ms; }
.b-faces.is-in > :nth-child(2) { transition-delay: 300ms; }
.b-faces.is-in > :nth-child(3) { transition-delay: 600ms; }
.b-faces.is-in > :nth-child(4) { transition-delay: 900ms; }

/* 女将のことば */
.b-voice-name { font-family: var(--font-serif); font-size: 20px; letter-spacing: 0.08em; margin: 0 0 24px; }
.b-quote { margin: 0 0 1.4em; }
.b-quote p { font-family: var(--font-serif); font-size: 19px; line-height: 2; letter-spacing: 0.04em; margin: 0; }

/* 装飾画像帯（tex1〜3） */
.b-texes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* 申込ボタン（§3-6 確定表：主色地＋白文字・外枠なし。hoverは副色地＋白文字） */
.btn.btn-primary { background: #6C5238; color: #FFFFFF; border: none; }
.btn.btn-primary:hover { background: #4A6572; color: #FFFFFF; }

/* reduced-motion：b.css のモーションは duration と delay の両方を0にし、最終状態で静止 */
@media (prefers-reduced-motion: reduce) {
  .b-rise, .b-d1, .b-d2, .b-d3, .b-d4 { animation-duration: 0.001ms; animation-delay: 0ms; }
  .b-fog { animation: none; }
  .b-mist { animation: none; opacity: 0.25; }
  .b-house { animation: none; opacity: 1; }
  .b-photofog { opacity: 0; }
  .b-faces.is-in > :nth-child(1), .b-faces.is-in > :nth-child(2),
  .b-faces.is-in > :nth-child(3), .b-faces.is-in > :nth-child(4) { transition-delay: 0ms; }
}