@charset "utf-8";
/* =====================
   潮汐セクション共通CSS
   ===================== */
:root {
  --color-text: #555;
  --color-bg: #fff;
  --color-link: #007bff;
  --color-primary: #1e90ff;
  --color-accent: #a30000;
  --color-muted: #eee;
  --warn: #ff3b30;
  --space: clamp(12px, 3vw, 32px);
  --radius: 8px;
  --shadow: 0 4px 12px rgba(0,0,0,.08);
  --fs-root: 15px;
  --fs-root-lg: 17px;
  --lh: 1.8;
  --map-max: 320px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: var(--fs-root); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 900px) { html { font-size: var(--fs-root-lg); } }
body { margin: 0; color: var(--color-text); background: var(--color-bg);
  font-family: "Hiragino Kaku Gothic ProN","Meiryo","メイリオ",sans-serif; line-height: var(--lh); }
img { max-width: 100%; height: auto; vertical-align: middle; display: block; }
figure { margin: 0; }
a { color: var(--color-link); text-decoration: underline; transition: opacity .2s ease; }
a:hover { opacity: .85; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* 非表示 */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 1px 1px) !important; clip-path: inset(50%) !important;
  border: 0 !important; white-space: nowrap !important;
}

/* コンテナ */
.container { max-width: 1080px; margin-inline: auto; padding-inline: clamp(12px, 3vw, 24px); }
.site-main { margin: clamp(6px, 1.2vw, 0px) 0; }

/* ヘッダー */
.site-header { padding: 6px 0 0; background: #fff; }
.site-header .container { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.brand__logo { width: auto; height: 56px; }

/* パンくず */
.breadcrumb-bar { background: #fff; }
.global-nav { font-size: 0.9rem; margin: 0; padding-block: 6px; }
.breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .4em; align-items: center; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; margin: 0 .3em; color: #999; }

/* ページタイトル */
.section-title {
  width: 100%; text-align: center;
  font-size: 1.2rem; letter-spacing: .04em; line-height: 1.3;
  margin: 8px auto 16px;
}
.section-title--spaced { margin-bottom: 10px; }

/* カード */
.tyoseki-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(12px, 2vw, 20px);
  grid-template-columns: 1fr; justify-items: center;
}
.tyoseki-item { margin: 0; padding: 0; }
@media (min-width: 720px)  { .tyoseki-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tyoseki-row { grid-template-columns: repeat(3, 1fr); } }

.tyoseki-card__link {
  display: grid; gap: 10px; justify-items: center;
  width: var(--map-max);
  border: 1px solid #ddd; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow);
  padding: 12px; color: inherit; text-decoration: none;
}
.tyoseki-card__link:hover .tyoseki-card__title,
.tyoseki-card__link:focus-visible .tyoseki-card__title { text-decoration: underline; }
.tyoseki-card__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, white);
  outline-offset: 3px;
}
.tyoseki-card__title { margin: 0; font-size: 0.95rem; text-align: center; width: 100%; }
.tyoseki-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 0; }
.tyoseki-card__desc  { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.7; color: var(--color-text); width: 100%; text-align: left; }

/* フッター */
.site-footer {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 20px 0; background: #6699ff; color: #fff; font-size: .95rem;
}