/* ===================================================================
   basic.css  (common styles)
   - Neutral tone, responsive layout, accessible typography
   - CSS-only slideshow (fade), card list, header/footer
   - Works from both root and 1-level-deep subdirs via relative links
   =================================================================== */

/* -----------------------------
   Color & rhythm scale
----------------------------- */
:root{
  --bg: #f7f8fa;
  --panel: #ffffff;
  --text: #222;
  --muted: #5f6b7a;
  --line: #e3e7ee;

  --accent: #2a5d9f;       /* 柔らかいブルー系アクセント */
  --accent-weak: #e6effa;

  --radius: 12px;
  --shadow: 0 8px 20px rgba(0,0,0,0.06);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
}

/* -----------------------------
   Base
----------------------------- */
*{ box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }

a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* -----------------------------
   Layout blocks
----------------------------- */
.container{
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* Header */
.site-header{
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
}
.site-title{
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: .02em;
}
.site-title a{ color: inherit; text-decoration: none; }

/* Global nav */
.site-nav{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}
.site-nav a{
  padding: .4rem .7rem;
  border-radius: 999px;
  color: #243041;
  text-decoration: none;
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.site-nav a:hover{
  background: var(--accent-weak);
}
.site-nav a[aria-current="page"]{
  background: var(--accent);
  color: #fff;
}

/* Main */
.site-main{
  padding: var(--space-4) 0 var(--space-5);
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.footer-inner{
  padding: var(--space-3) 0;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}

/* -----------------------------
   Section titles
----------------------------- */
.section-title{
  margin: 0 0 var(--space-2);
  padding-left: .75rem;
  border-left: 5px solid var(--accent);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  letter-spacing: .02em;
}

/* -----------------------------
   Cards (fixed links)
----------------------------- */
.cards{ margin-top: var(--space-4); }

.card-grid{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap: var(--space-2);
}
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.card__link{
  display: block;
  padding: var(--space-3);
  text-decoration: none;
}
.card__title{
  margin: 0 0 .25rem;
  font-size: 1.1rem;
  color: #111;
}
.card__desc{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* -----------------------------
   News (date-less, text-first)
----------------------------- */
.news__list{
  display: grid;
  gap: 1rem;
  margin-top: var(--space-1);
}
.news__item{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.4rem 1.2rem;
}

/* -----------------------------
   Breadcrumb (optional)
----------------------------- */
.breadcrumb{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--accent); }

/* -----------------------------
   Page (article)
----------------------------- */
.page{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 1.5rem);
}
.page__header{ margin-bottom: .75rem; }
.page__title{
  margin: 0 0 .25rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.page__lead{
  margin: 0;
  color: var(--muted);
}

/* -----------------------------
   Slideshow (CSS-only fade)
   - Place images inside .slideshow__track
   - Set --count: N (number of slides) via inline style
----------------------------- */
/* 外枠が比率を決める。中の .slideshow__track は100%で満たす */
.slideshow{
  border-radius: var(--radius);
  overflow: hidden;
  width: 80%;
  aspect-ratio: var(--ratio, 16 / 9); /* 16:9 を既定に */
  position: relative;
  background: #000;
  box-shadow: var(--shadow);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.slideshow__track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --count: 3; /* default, can be overridden inline */
  --dur: 24s; /* total cycle time; adjust to preference */
}
.slideshow__item{
  position: absolute; inset: 0;
  opacity: 0;
  animation: fadeCycle var(--dur) infinite;
}
.slideshow__item:nth-child(1){ animation-delay: calc(0 * (var(--dur) / var(--count))); }
.slideshow__item:nth-child(2){ animation-delay: calc(1 * (var(--dur) / var(--count))); }
.slideshow__item:nth-child(3){ animation-delay: calc(2 * (var(--dur) / var(--count))); }
.slideshow__item:nth-child(4){ animation-delay: calc(3 * (var(--dur) / var(--count))); }
.slideshow__item:nth-child(5){ animation-delay: calc(4 * (var(--dur) / var(--count))); }
/* 6枚以上使う場合は同様に nth-child を追記するか、HTML側の枚数に合わせて必要分だけ書き足してください */

.slideshow__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slideshow__note{
  background: #0b111a;
  color: #cbd5e1;
  font-size: .85rem;
  padding: .4rem .7rem;
}

@keyframes fadeCycle{
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  28%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; }
}


/* -----------------------------
   Record Table
----------------------------- */
:root { --date-col-width: 12rem; } /* お好みで */

table.record-table {
  width: 100%;
  table-layout: fixed;           /* 列幅を固定レイアウトで計算 */
}
table.record-table th:first-child,
table.record-table td:first-child {
  width: var(--date-col-width);  /* 1列目を共通幅に固定 */
  white-space: nowrap;           /* 日付改行を防ぐ（任意） */
}
table.record-table td,
table.record-table th {
  word-break: break-word;        /* 2列目は折り返して収める */
}

/* -----------------------------
   Utilities
----------------------------- */
code{
  background: #eef3ff;
  padding: .12rem .3rem;
  border-radius: 6px;
  border: 1px solid #dfe9ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
}

/* -----------------------------
   Responsive tweaks
----------------------------- */
@media (max-width: 720px){
  .header-inner{
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .site-nav{
    padding-bottom: .4rem;
  }
}