/* ヨリドコ観光 — 全ページ共通スタイル
   ※ dist ビルド時はインライン化され設置先完結（CLAUDE.md D-3） */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  color: #26333b;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: #007690; text-decoration: none; }
a:hover { color: #008cab; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ロゴ */
.site-logo { display: flex; align-items: center; justify-content: center; }
.site-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-logo--mobile { width: 38px; height: 46px; }
.site-logo--sidebar {
  width: 132px;
  height: 158px;
  margin: 0 auto 32px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}
.site-logo--footer {
  width: 120px;
  height: 144px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

/* トップページのメインビジュアル */
.hero-slides, .hero-shade { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1s ease, transform 6s ease;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-shade {
  z-index: 1;
  background: linear-gradient(0deg,rgba(20,38,45,.68) 0%,rgba(20,38,45,.14) 62%);
  pointer-events: none;
}
.hero-dots {
  position: absolute;
  right: 32px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.hero-dot:hover, .hero-dot:focus-visible { transform: scale(1.25); }
.hero-dot.is-active { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; transform: none; }
}

/* アコーディオン（よくある質問） */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-mark { transform: rotate(45deg); }
/* 質問テキストは折り返して縮む（keep-all による flex blowout 防止 / A-10 #1） */
details > summary > span { min-width: 0; word-break: normal; overflow-wrap: anywhere; }
details > summary > span.faq-mark { min-width: auto; }

/* ── モバイル（縦）: 820px 以下 ── */
@media (max-width: 820px) {
  #top { margin-left: 0 !important; padding-top: 56px !important; }
  #top > section { padding-left: 20px !important; padding-right: 20px !important; }
  #top footer { padding-left: 20px !important; padding-right: 20px !important; }
  #top, #top * { word-break: normal !important; overflow-wrap: anywhere !important; }
  [data-stack] { flex-direction: column !important; gap: 28px !important; }
  [data-stack] > *, [data-grid1] > * { min-width: 0 !important; }
  [data-stack] > * { flex: none !important; width: 100% !important; }
  [data-grid1] { grid-template-columns: 1fr !important; }
  [data-hero] { height: auto !important; min-height: 0 !important; }
  [data-hero-body] { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 2 !important; padding: 24px 20px 44px !important; max-width: none !important; }
  [data-hero-body] h1 { font-size: 32px !important; line-height: 1.5 !important; }
  [data-hero-body] p { font-size: 16px !important; }
  .hero-dots { right: 16px; bottom: 14px; }
  [data-banner] { height: auto !important; min-height: 140px !important; padding: 44px 20px !important; }
  [data-banner] h1 { font-size: 28px !important; }
  [data-table] tr { display: block !important; padding: 16px 0 !important; }
  [data-table] th { display: block !important; width: auto !important; padding: 0 0 6px !important; }
  [data-table] td { display: block !important; padding: 0 !important; }
  [data-topbar] { display: flex !important; }
  [data-sidebar] { transform: translateX(-100%); transition: transform .28s ease; box-shadow: 0 0 44px rgba(0,0,0,.32); }
  [data-sidebar][data-open="true"] { transform: translateX(0); }
  [data-backdrop] { display: none; }
  [data-backdrop][data-open="true"] { display: block !important; }
}