/* 旅のメモ（全回のメモだけを集めたページ）。色・字体は site.css を使う */
.notes-page {
  position:relative;
  overflow:hidden;
}
.notes-hero {
  position:relative;
  max-width:calc(var(--page) + var(--gutter)*2);
  margin:0 auto;
  padding:72px var(--gutter) 44px;
  text-align:center;
}
.notes-hero .cover-atmosphere {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.notes-hero>.eyebrow {
  color:var(--accent-ink);
  font-size:11px;
  letter-spacing:.25em;
}
.notes-hero h1 {
  margin:18px 0 0;
  font:500 clamp(30px,3.6vw,46px)/1.7 var(--serif);
  letter-spacing:.08em;
}
.notes-hero h1 span {
  display:block;
}
.notes-lead {
  margin:26px auto 0;
  font:400 14px/2.2 var(--serif);
  letter-spacing:.06em;
}
.notes-count {
  margin-top:22px;
  font:12px var(--mono);
  color:var(--soft);
  letter-spacing:.06em;
}
/* 絞り込み */
.notes-filter {
  position:sticky;
  top:0;
  z-index:5;
  max-width:calc(var(--page) + var(--gutter)*2);
  margin:0 auto 18px;
  padding:14px var(--gutter) 10px;
  background:rgba(243,241,236,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.no-js .notes-filter {
  display:none;
}
.notes-cats,
.notes-regions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 22px;
}
.notes-regions {
  gap:4px 16px;
  margin-top:4px;
}
.notes-filter button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0 2px;
  border:0;
  background:none;
  color:var(--soft);
  font:500 13px/1 var(--sans);
  letter-spacing:.06em;
  cursor:pointer;
}
.notes-regions button {
  min-height:38px;
  font-size:12px;
}
.notes-filter button span {
  font:10px var(--mono);
}
.notes-filter button[aria-pressed=true] {
  color:var(--accent-ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:7px;
}
.notes-filter button:focus-visible {
  outline:2px solid var(--accent-ink);
  outline-offset:3px;
}
.notes-shown {
  margin-top:4px;
  text-align:center;
  font:10px var(--mono);
  color:var(--soft);
}
/* 章 */
.notes-group {
  max-width:calc(var(--page) + var(--gutter)*2);
  margin:0 auto;
  padding:46px var(--gutter) 30px;
}
.notes-group[hidden] {
  display:none;
}
.notes-group-head {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:6px 26px;
  padding-bottom:22px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.notes-group-head .eyebrow {
  grid-row:span 2;
  align-self:start;
  margin:10px 0 0;
  font:12px var(--mono);
  color:var(--accent-ink);
}
.notes-group-head h2 {
  margin:0;
  font:500 clamp(22px,2.3vw,30px)/1.7 var(--serif);
  letter-spacing:.06em;
}
.notes-group-head h2 span {
  display:inline-block;
}
.notes-group-head p {
  font-size:12px;
  line-height:2;
  color:var(--soft);
}
.notes-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:38px 26px;
}
.note-card[hidden] {
  display:none;
}
.note-card a {
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}
.note-photo {
  background:var(--paper-2);
}
.note-photo img {
  display:block;
  width:100%;
  height:auto;
}
.note-body {
  padding-top:14px;
}
.note-place {
  font:10px var(--mono);
  letter-spacing:.06em;
  color:var(--accent-ink);
}
.note-card h3 {
  margin:6px 0 0;
  font:500 17px/1.75 var(--serif);
  letter-spacing:.05em;
}
.note-text {
  margin-top:8px;
  font-size:12px;
  line-height:2;
  color:var(--ink);
}
.note-from {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:11px;
  line-height:1.7;
  color:var(--soft);
}
.note-from svg {
  flex:none;
  width:16px;
  height:16px;
  transition:transform .2s;
}
.note-card a:hover h3,
.note-card a:focus-visible h3 {
  color:var(--accent-ink);
}
.note-card a:hover .note-from svg {
  transform:translateX(3px);
}
.note-card a:focus-visible {
  outline:2px solid var(--accent-ink);
  outline-offset:6px;
}
.notes-empty {
  max-width:600px;
  margin:20px auto 80px;
  text-align:center;
  font-size:13px;
  color:var(--soft);
}
/* 回のページのメモの終わりから、このページへ */
.memo-more {
  max-width:1080px;
  margin:10px auto 0;
  text-align:center;
}
@media(max-width:699px) {
  .notes-hero {
    padding:46px var(--gutter) 30px;
  }
  .notes-lead {
    font-size:13px;
  }
  .notes-filter {
    padding:10px var(--gutter) 6px;
  }
  /* スマホ幅では章と地域のボタンをそれぞれ 1 段にし、横にすべらせて選ぶ */
  .notes-cats,
  .notes-regions {
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    gap:2px 16px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .notes-cats::-webkit-scrollbar,
  .notes-regions::-webkit-scrollbar {
    display:none;
  }
  .notes-cats button,
  .notes-regions button {
    flex:none;
    white-space:nowrap;
  }
  .notes-cats button {
    font-size:12px;
  }
  .notes-group {
    padding-top:34px;
  }
  .notes-group-head {
    grid-template-columns:1fr;
  }
  .notes-group-head .eyebrow {
    grid-row:auto;
    margin:0;
  }
  .notes-grid {
    grid-template-columns:1fr;
    gap:34px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .note-from svg {
    transition:none;
  }
}