@charset "utf-8";

/* =========================
  Base / Reset
========================= */
*{ box-sizing:border-box; }
html, body{ width:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, sans-serif;
  color:#111;
  background:#f6f7f9;
  line-height:1.65;
  overflow-x:hidden;
}
img, video, iframe{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.skip{ position:absolute; left:-9999px; top:auto; }
.skip:focus{ left:12px; top:12px; background:#fff; padding:10px; border-radius:10px; z-index:9999; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

:root{
  --wrap: 1100px;
  --card: #fff;
  --line: rgba(0,0,0,.10);
  --shadow: 0 10px 24px rgba(0,0,0,.06);

  --accent1:#2563eb;
  --accent2:#06b6d4;

  --radius: 16px;
}
.wrap{ width:min(var(--wrap), 92vw); margin:0 auto; }

/* スムーズスクロール */
html{ scroll-behavior: smooth; }

/* =========================
  HERO
========================= */
.hero{ position:relative; background:#000; }
.hero__inner{ position:relative; }

/* ロゴ：左上固定 */
.hero__logo{
  position:absolute;
  z-index:20;
  left: 12px;
  top: 12px;
  margin:0;
}
.hero__logo img{
  width: clamp(120px, 18vw, 190px);
  height:auto;
  display:block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
}
@media (max-width: 640px){
  .hero__logo{ left:10px; top:10px; }
  .hero__logo img{ width:120px; }
}

/* スライド */
.hero__slides{
  position:relative;
  height: clamp(220px, 36vw, 520px);
  overflow:hidden;
  background:#000;
}

/* 暗幕（左濃→右薄） */
.hero__slides::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.08));
  z-index:3;
  pointer-events:none;
}

/* 最初だけタイル */
@keyframes tileout{ from{ opacity:1; } to{ opacity:0; } }
.hero__slides::after{
  content:"";
  position:absolute; inset:0;
  background-color:#eaf7fb;
  background-image:url("../images/anigawa-wait-logo-faint.png");
  background-repeat:repeat;
  background-size:220px auto;
  background-position:40px 30px;
  z-index:2;
  opacity:0;
  pointer-events:none;
}
.hero__slides.tile-on::after{
  opacity:1;
  animation: tileout 1.0s ease 0.2s 1 forwards;
}

/* 3枚（3枚目＝動画） */
.hero__slide{
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  opacity:0;
  animation: heroFade 15s infinite;
}
.hero__slide--1{ background-image:url("../images/2022-6-18-3yamasemi.jpeg"); }
.hero__slide--2{ background-image:url("../images/2022-6-18yamasemi.jpeg"); animation-delay:5s; }
.hero__slide--3{ animation-delay:10s; background:#000; }

.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

@keyframes heroFade{
  0%{opacity:0}
  8%{opacity:1}
  33%{opacity:1}
  41%{opacity:0}
  100%{opacity:0}
}

/* 2周で停止（JSで .hero-stop 付与） */
.hero-stop .hero__slide{
  animation:none !important;
  opacity:0 !important;
}
.hero-stop .hero__slide--1{ opacity:1 !important; }
.hero-stop .hero__slide--3 .hero__video{ display:none !important; }

/* 飾り（ANIGAWA）を下に重ねる */
.hero__kazari{
  background: transparent !important;
  border: 0 !important;
}
.hero__kazari--overlay{
  position:absolute !important;
  left:0; right:0;
  bottom:0 !important;
  z-index:6 !important;
  pointer-events:none;
  display:flex;
  justify-content:center;
}
.hero__kazari--overlay img{
  width: min(1300px, 100%) !important;
  height:auto !important;
  display:block;
}
@media (max-width: 900px){
  .hero__kazari--overlay{ bottom:-10px !important; }
}
@media (max-width: 640px){
  .hero__slides .hero__kazari--overlay{ transform: translateY(-18px); }
}

/* =========================
  NAV（sticky）
========================= */
.topnav{
  position: sticky;
  top: 10px;
  z-index: 9999;
  margin: 12px auto 0;
  width: min(var(--wrap), 92vw);

  background: rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.topnav__row{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
}
.topnav__brand{
  display:flex; align-items:center; gap:8px;
  font-weight:900;
  white-space:nowrap;
}
.topnav__brand i{ opacity:.75; }

.topnav__toggle{
  margin-left:auto;
  width:44px; height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  display:none;
  align-items:center; justify-content:center;
}
.topnav__toggleBars{ width:18px; height:12px; position:relative; }
.topnav__toggleBars::before,
.topnav__toggleBars::after{
  content:""; position:absolute; left:0; right:0;
  height:2px; background:#111; border-radius:999px;
}
.topnav__toggleBars::before{ top:0; }
.topnav__toggleBars::after{ bottom:0; }

.topnav__menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  margin-left:auto;
  flex-wrap:wrap;
}

.navbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  font-weight:900;
  white-space:nowrap;
}
.navbtn:hover{
  transform: translateY(-1px);
  background:#f7f7fb;
}
.navbtn--accent{
  color:#fff;
  border:none;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 10px 18px rgba(37,99,235,.18);
}

/* スマホ：ハンバーガー */
@media (max-width: 860px){
  .topnav__toggle{ display:flex; }
  .topnav__menu{
    display:none;
    position:absolute;
    left:12px; right:12px;
    top: calc(100% + 10px);
    background: rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow: var(--shadow);
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .topnav__menu.is-open{ display:flex; }
  .navbtn{ width:100%; }
}

/* =========================
  QUICK（横スライド）
========================= */
.quick-slider{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 44px;
}
.quick-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding: 6px 2px;
  flex: 1;
}
.quick-track::-webkit-scrollbar{ display:none; }
.quick-track .pill{ flex:0 0 auto; white-space:nowrap; }

/* ナビボタン */
.qnav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  z-index:5;
}
.qnav.prev{ left:8px; }
.qnav.next{ right:8px; }

/* 端フェード */
.quick-slider::before,
.quick-slider::after{
  content:"";
  position:absolute;
  top: 6px; bottom: 6px;
  width: 28px;
  pointer-events:none;
  z-index:4;
}
.quick-slider::before{
  left: 44px;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(246,247,249,0));
}
.quick-slider::after{
  right: 44px;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(246,247,249,0));
}

/* pill（見栄え強化） */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:999px;

  background: linear-gradient(135deg,
    rgba(0, 135, 255, .12),
    rgba(0, 210, 255, .10)
  );
  border: 1px solid rgba(0, 120, 255, .22);

  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.70);

  color:#0b2a4a;
  font-weight:800;
  letter-spacing:.01em;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.pill i{
  color: rgba(0, 115, 255, .95);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.75));
}
@media (hover:hover){
  .pill:hover{
    transform: translateY(-1px);
    border-color: rgba(0, 120, 255, .35);
    background: linear-gradient(135deg,
      rgba(0, 135, 255, .16),
      rgba(0, 210, 255, .13)
    );
    box-shadow:
      0 14px 24px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.80);
  }
}
.pill:active{
  transform: translateY(0) scale(.99);
  box-shadow:
    0 8px 14px rgba(0,0,0,.10),
    inset 0 2px 6px rgba(0,0,0,.10);
}
.pill:focus-visible{
  outline: 3px solid rgba(0, 140, 255, .35);
  outline-offset: 2px;
}

/* pillの種類 */
.pill.is-live{ background: linear-gradient(135deg, rgba(0,180,120,.14), rgba(0,210,255,.10)); border-color: rgba(0,180,120,.28); }
.pill.is-map { background: linear-gradient(135deg, rgba(255,170,0,.14), rgba(0,210,255,.10)); border-color: rgba(255,170,0,.28); }
.pill.is-data{ background: linear-gradient(135deg, rgba(140,90,255,.14), rgba(0,210,255,.10)); border-color: rgba(140,90,255,.28); }
.pill.is-primary{ background: linear-gradient(135deg, rgba(17,170,0,.14), rgba(0,210,255,.10)); border-color: rgba(17,231,128,1.00); }

/* 右ヒント（スマホだけ） */
.quick-hint{ display:none; }
@media (max-width: 640px){
  .quick-slider{ padding: 6px 8px; }
  .qnav{ display:none !important; }
  .quick-slider::before{ left: 8px; }
  .quick-slider::after{ right: 8px; }

  .quick-hint{
    display:grid;
    place-items:center;
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:44px; height:36px;
    border-radius:999px;
    font-size:26px;
    font-weight:900;
    color: rgba(10, 80, 160, .55);
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(30, 120, 220, .18);
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
    cursor: pointer;
    pointer-events: auto;
    z-index:6;
  }
  .quick-hint:active{ transform:translateY(-50%) scale(.98); }
}

/* =========================
  CARD / 共通
========================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 14px 0;
}
.h2{ margin:0 0 10px; font-size: 20px; font-weight: 900; }
.h3{ margin:0 0 8px; font-size: 16px; font-weight: 900; }

.placeholder{
  padding:14px;
  border:1px dashed rgba(0,0,0,.18);
  border-radius:14px;
  background:#fafafa;
  color:#555;
}

/* notice */
.notice{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.notice__title{ font-weight:1000; font-size:18px; }
.notice__sub{ color:#5b6472; font-size:13px; margin-top:4px; font-weight:700; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#fff; font-weight:900;
  border:none;
}
.btn--ghost{
  background:#fff;
  color:#111;
  border:1px solid var(--line);
}

/* mini-link */
.mini-link{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
  color:#5b6472;
  text-decoration:none;
}
.mini-link:hover{ text-decoration:underline; }

/* grid4（月別） */
.grid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 900px){
  .grid4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.mini{
  display:flex; align-items:center; justify-content:center;
  padding:12px 10px;
  border-radius:14px;
  background:#f3f4f6;
  border:1px solid rgba(0,0,0,.06);
  font-weight:900;
  text-align:center;
}
.mini--accent{
  color:#fff;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  border:none;
}

/* split（MAP＋右） */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}

/* footer */
.foot{
  text-align:center;
  padding:20px 0 28px;
  color:#6b7280;
}
.toTop{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  margin-bottom:10px;
}

/* =========================
  スマホ：サムネ回り込み
========================= */
.ayu-thumb{ margin:10px 0 8px; }
.ayu-thumb__img{ width:100%; height:auto; display:block; border-radius:12px; }
.ayu-thumb__cap{ font-size:13px; color:#666; margin-top:6px; }
@media (max-width: 640px){
  .ayu-thumb{
    float:left;
    width:42vw;
    max-width:190px;
    margin:6px 12px 8px 0;
  }
  .ayu-thumb__img{ aspect-ratio: 4 / 3; object-fit: cover; }
  .timeline-item::after{ content:""; display:block; clear:both; }
}

/* =========================
  日別記事（details）
========================= */
.day-block{
  margin: 18px 0;
  padding: 14px 14px 10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.day-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:1000;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18);
}
.day-title::before{ content:""; }
.midashi{ margin: 10px 0 6px; font-weight:900; font-size:18px; }

.day-fold{
  margin-top: 6px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .30s ease, border-color .30s ease, transform .30s ease;
}
.day-fold > summary{ list-style:none; }
.day-fold > summary::-webkit-details-marker{ display:none; }
.day-fold > summary::marker{ content:""; }

.day-summary{
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.day-summary::before{
  content:"";
  width:0; height:0;
  border-left:7px solid var(--accent1);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.day-fold[open] > .day-summary::before{
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid var(--accent1);
  border-bottom:0;
}

.sum-read{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius:999px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;

  border: 1px solid rgba(37,99,235,.22);
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(6,182,212,.08));
  box-shadow:
    0 8px 14px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.70);

  color: var(--accent1);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.sum-close{ display:none !important; }
.day-fold[open] .sum-open{ display:none !important; }
.day-fold[open] .sum-close{ display:inline-flex !important; }

.day-fold .day-content{
  padding: 0 12px 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
.day-fold[open] .day-content{
  opacity: 1;
  transform: translateY(0);
}
.day-fold[open]{
  border-color: rgba(37,99,235,.20);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
@media (hover:hover){
  .day-summary:hover .sum-read{
    transform: translateY(-1px);
    border-color: rgba(37,99,235,.38);
    box-shadow:
      0 14px 24px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.85);
  }
}
.day-summary:active .sum-read{
  transform: translateY(0) scale(.99);
  box-shadow:
    0 8px 14px rgba(0,0,0,.10),
    inset 0 2px 6px rgba(0,0,0,.10);
}
.day-summary:focus-visible{
  outline: 3px solid rgba(37,99,235,.30);
  outline-offset: 3px;
  border-radius: 14px;
}
@media (prefers-reduced-motion: reduce){
  .day-fold, .day-fold .day-content{
    transition:none !important;
    transform:none !important;
  }
}

/* =========================
  MAPカード（背景画像＋PCは4ボタンバー）
========================= */
a.card.map-card{
  display:block;
  position: relative;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.08);
  min-height:120px;
  background: url("https://www.kumagera.ne.jp/kikuti/images/ayu-map.jpg") center/cover no-repeat;
}
a.card.map-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
a.card.map-card:focus-visible{
  outline: 3px solid rgba(59,130,246,.5);
  outline-offset: 3px;
}

/* 内側は透明（白枠を消す） */
a.card.map-card .map-card-inner{
  padding:16px 18px;
  margin:8px;
  background: transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:relative;
}

/* 文字は読みやすく */
a.card.map-card .map-card-title{
  font-weight:900;
  font-size:18px;
  letter-spacing:.02em;
  color:#003cff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
a.card.map-card .map-card-sub{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:#003cff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* 右上「MAPを開く→」 */
a.card.map-card .map-card-cta{
  position:absolute;
  top:18px;
  right:18px;
  margin:0;
  z-index:10;
}
a.card.map-card .map-btn{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:12px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  background: rgba(0,140,170,.95);
  border:1px solid rgba(0,90,115,.35);
  color:#fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

/* 4ボタン（PC） */
.map-overlay-links{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:8px;
  padding-right:150px; /* 右上ボタン分の空き */
}
.map-overlay-links .mol{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  line-height:1;

  background:#fff;
  color:#111;
  border:1px solid rgba(17,24,39,.22);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);

  cursor:pointer;
  user-select:none;
}
@media (hover:hover){
  .map-overlay-links .mol:hover{ transform: translateY(-1px); }
}

/* 1個だけアクセント（ライブ） */
.map-overlay-links .mol:first-child{
  background: rgba(0,140,170,.16);
  border-color: rgba(0,140,170,.40);
}

/* 4番目だけオレンジ（レーダー等） */
.map-overlay-links .mol:nth-child(4){
  background: rgba(255, 140, 0, .18);
  border-color: rgba(255, 140, 0, .55);
  box-shadow: 0 8px 18px rgba(255, 140, 0, .18);
}

/* スマホはtpillsを表示、MAP内4ボタン＆右上CTAは非表示 */
.tpills{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding:6px 0 4px;
  scroll-snap-type:x mandatory;
}
.tpills::-webkit-scrollbar{ height:6px; }
.tpills .pill{
  flex:0 0 auto;
  white-space:nowrap;
  scroll-snap-align:start;
  padding:9px 12px;
}

/* 切替ブレイク */
@media (max-width: 700px){
  .map-card .map-overlay-links{ display:none !important; }
  .map-card .map-card-cta{ display:none !important; }
  .tpills{ display:flex !important; }
}
@media (min-width: 701px){
  .tpills{ display:none !important; }
  .map-card .map-overlay-links{ display:grid !important; }
  .map-card .map-card-cta{ display:block !important; }
}

/* =========================
  お知らせ（dialog）
========================= */
.btn-news{
  width:100%;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(30,144,255,.18), rgba(255,255,255,.92));
  color:#0f172a;
}

.news-modal{
  width:min(620px, 92vw);
  border:none;
  border-radius:18px;
  padding:0;
  margin:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.news-modal::backdrop{ background: rgba(0,0,0,.45); }

.news-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.news-head h2{ margin:0; font-size:16px; font-weight:900; }
.news-close{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-size:22px; line-height:1;
}

.news-body{ padding:12px 16px 16px; background:#fff; }
.news-item{
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  margin:10px 0;
  background:rgba(246,247,249,.8);
}
.news-item a{ font-weight:900; display:inline-block; }
.news-item p{ margin:6px 0 0; color:#5b6472; font-size:13px; }
.news-tag{
  display:inline-block;
  font-size:12px; font-weight:900;
  padding:3px 10px; border-radius:999px;
  background:rgba(0,0,0,.06);
  margin-bottom:6px;
}
.news-tag.is-important{ background:rgba(255,60,80,.14); }
.news-foot{ margin-top:12px; text-align:right; }
.news-all{ font-weight:900; }

/* =========================
  Archive（details/summary）
========================= */
.archive-fold{
  margin-top:10px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
}
.archive-sum{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  border-bottom:1px solid rgba(0,0,0,.06);
  user-select:none;
}
.archive-sum::-webkit-details-marker{ display:none; }
.archive-sum__label{ display:flex; align-items:center; gap:10px; }
.archive-sum__label::before{ content:""; }
.archive-sum__chev{ transition: transform .18s ease; opacity:.7; }
.archive-fold[open] .archive-sum__chev{ transform: rotate(180deg); }
.archive-grid{ padding:12px 12px 14px; }
.archive-fold:not([open]) .archive-sum{ border-bottom:none; }
@media (max-width: 520px){
  .archive-sum{ padding:11px 12px; }
  .archive-grid{ padding:10px 10px 12px; }
}

/* =========================
  ANIGAWA LINK（rk-slider）
========================= */
.keepers{ padding: 14px 0 6px; margin:14px 0; }
.keepers .wrap{ width:100%; margin:0; }
.keepers-head h2{
  margin:0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .03em;
}

.rk-slider{ position: relative; padding: 0 44px; }
.rk-strip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding: 6px 4px 14px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rk-strip::-webkit-scrollbar{ display:none; }

.rk-card{
  flex:0 0 auto;
  width: clamp(180px, 42vw, 240px);
  scroll-snap-align:start;
  display:grid;
  grid-template-rows: 1fr auto;
  gap:10px;
  padding:12px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.rk-img{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background: rgba(246,247,249,.95);
  overflow:hidden;
  min-height:86px;
}
.rk-img img{
  width:100%;
  height: 86px;
  object-fit: contain;
}
.rk-cap{
  display:block;
  text-align:center;
  font-weight:900;
  font-size:13px;
  color:#111;
  line-height:1.25;
}

/* 矢印 */
.rk-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.rk-prev{ left: 6px; }
.rk-next{ right: 6px; }
.rk-nav:hover{ transform: translateY(-50%) scale(1.03); }
.rk-nav:active{ transform: translateY(-50%) scale(.98); }
.rk-card:focus-visible,
.rk-nav:focus-visible{
  outline: 3px solid rgba(30,144,255,.35);
  outline-offset: 2px;
}

/* スマホ：矢印を消してスワイプ */
@media (max-width: 640px){
  .rk-nav{ display:none !important; }
  .rk-slider{ padding: 0 8px !important; }
}

/* =========================
  season2025：画像幅/角丸の安定化
========================= */
.season2025 :where(.photos,.photo-grid,.gallery,.imgs,.images,.media,figure,table){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.season2025 :where(.photos,.photo-grid,.gallery,.imgs,.images,.media){
  display:block !important;
}
.season2025 img{
  width:100% !important;
  height:auto !important;
  display:block;
}
.season2025 table{ width:100% !important; }
.season2025 td{ width:50% !important; }

/* 角丸（写真ブロック） */
.season2025 .photos,
.season2025 .photo-grid,
.season2025 .gallery,
.season2025 .imgs,
.season2025 .images,
.season2025 .media,
.season2025 figure{
  border-radius: 16px;
  overflow: hidden;
}

/* =========================
  mini2（left-mini）※保険で残す（使ってないなら無害）
========================= */
.left-mini{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width: 900px){
  .left-mini{ grid-template-columns: 1fr; }
}
a.mini2{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  padding:12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  position:relative;
}
a.mini2::before, a.mini2::after{ content:none; display:none; }
a.mini2 .mini2-box{
  width: fit-content;
  max-width: calc(100% - 16px);
  text-align:center;
  padding:12px 14px;
  border-radius:12px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
a.mini2 .mini2__t{ font-weight:1000; font-size:14px; }
a.mini2 .mini2__s{ margin-top:4px; font-size:12px; color:#5b6472; font-weight:800; }
a.mini2 .mini2__cta{ margin-top:8px; font-size:12px; font-weight:1000; color:#0ea5e9; }

a.mini2--live{ background-image:url("https://www.kumagera.ne.jp/kikuti/images/2025yousi2.jpg"); }
a.mini2--status{ background-image:url("https://www.kumagera.ne.jp/kikuti/images/3.jpg"); }
@media (hover:hover){
  a.mini2:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }
}
/* =========================
  2025 Season 振り返り（アーカイブ内）
========================= */
.best2025{
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

/* PCは2カラム（横並び） */
@media (min-width: 900px){
  .best2025{
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
}

.best2025__col{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 14px;
}

.best2025__head{ margin-bottom: 10px; }
.best2025__title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.best2025__sub{
  margin: 4px 0 0;
  color:#6b7280;
  font-size: 13px;
}

/* ------- ベスト釣果：PCは表、スマホはカード ------- */
.bestTableWrap{ display:block; }
.bestCards{ display:none; }

@media (max-width: 899px){
  .bestTableWrap{ display:none; }
  .bestCards{ display:grid; gap:10px; padding:0; margin:0; list-style:none; }
}

/* 表 */
.bestTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.08);
}
.bestTable thead th{
  background: #f3f4f6;
  font-size: 12px;
  color:#374151;
  text-align:left;
  padding: 10px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  white-space: nowrap;
}
.bestTable tbody td{
  padding: 10px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  vertical-align: top;
  font-size: 14px;
}
.bestTable tbody tr:last-child td{ border-bottom:0; }
.bestTable .rank{
  width:44px;
  font-weight: 900;
  text-align:center;
}
.bestTable .num{
  font-weight: 900;
  white-space: nowrap;
}

/* カード */
.bestCard{
  display:flex;
  gap:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 10px;
  background: linear-gradient(180deg, #ffffff, #fafafa);
}
.bestCard__rank{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 1000;
  background: #111;
  color:#fff;
  flex: 0 0 auto;
}
.bestCard__main{ min-width: 0; }
.bestCard__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.bestCard__name{
  font-weight: 900;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bestCard__num{
  font-weight: 1000;
  white-space: nowrap;
}
.bestCard__meta{
  color:#6b7280;
  font-size: 12px;
  margin-top: 2px;
}
.bestCard__note{
  margin-top: 6px;
  font-size: 13px;
  color:#111;
}

/* ボタン */
.best2025__btns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.bestBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  border:1px solid rgba(0,0,0,.10);
  background:#111;
  color:#fff;
}
.bestBtn--ghost{
  background:#fff;
  color:#111;
}

/* ------- ベストショット ------- */
.bestShotGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (min-width: 900px){
  .bestShotGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bestShot{
  margin:0;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#f3f4f6;
}
.bestShot__link{
  display:block;
  position:relative;
}
.bestShot img{
  width:100%;
  height: 160px;
  object-fit: cover;
  display:block;
}
@media (min-width: 900px){
  .bestShot img{ height: 170px; }
}
.bestShot__cap{
  position:absolute;
  left:10px; right:10px; bottom:10px;

  /* ▼帯を細く */
  padding: 5px 10px;     /* 高さを抑える */
  border-radius: 999px;  /* 細帯は丸めると上品 */

 background: linear-gradient(135deg,
  rgba(255, 252, 242, .96), /* ほぼ白のクリーム */
  rgba(242, 255, 251, .96)  /* ほぼ白のミント */
);
color:#0f172a;
border: 1px solid rgba(15,23,42,.10);


  color:#0f172a;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);

  font-weight: 900;
  font-size: 12px;
  line-height: 1.2;      /* さらに高さが出ないように */

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =========================
  Lightbox（ベストショット用）
========================= */
.lb{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.lb.is-open{ display:block; }

.lb__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.78);
}

.lb__dialog{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.lb__content{
  width: min(980px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
  outline: none;
}

.lb__img{
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display:block;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  background: rgba(255,255,255,.06);
}

.lb__cap{
  color:#fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.5;
  opacity: .95;
  text-align: center;
}

/* ボタン類 */
.lb__btn{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size: 22px;
  font-weight: 900;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.lb__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size: 28px;
  font-weight: 900;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.lb__prev{ left: 12px; }
.lb__next{ right: 12px; }

@media (max-width: 560px){
  .lb__nav{ width: 46px; height: 46px; font-size: 26px; }
  .lb__btn{ width: 42px; height: 42px; }
}
/* 右カラム内で「画像 → ボタン」の縦並びにする */

.bestShotCol{
  display:flex;
  flex-direction:column;
}
.bestShotMoreBtn{ align-self:flex-end; }
/* 短い黒ボタン */
.bestShotMoreBtn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:8px 12px;
  border-radius:999px;
  background:#6EF364;
  color:#fff;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  width:fit-content;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
	
}
.bestShotMoreBtn:hover{ filter:brightness(1.08); }

/* スマホでは押しやすいように横幅広め（任意） */
@media (max-width: 720px){
  .bestShotMoreBtn{
    width:100%;
    justify-content:center;
  }
}
.bestShotMoreWrap{
  display:flex;
  justify-content:flex-end; /* ← これで確実に右寄せ */
  margin-top:10px;
}
.keepers--slider .rk-img{
  aspect-ratio: auto !important; /* 枠固定を解除 */
}

.keepers--slider .rk-img img{
  width: 100%;
  height: auto !important;       /* 自然な比率で表示 */
  object-fit: initial !important;
}
/* ▼順位丸：黒→明るいメダルカラー（追記で上書き） */
.bestCard__rank{
  background: linear-gradient(135deg, #ffd66b, #7cf7d4); /* デフォ（明るめ） */
  color:#0f172a;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}

/* bestCard が縦に並ぶ前提：1?5位の丸色を変える */
.bestCard:nth-of-type(1) .bestCard__rank{
  background: linear-gradient(135deg, #ffd36b, #ffb300); /* 金 */
  color:#1f2937;
}
.bestCard:nth-of-type(2) .bestCard__rank{
  background: linear-gradient(135deg, #e8eef7, #b8c4d8); /* 銀 */
  color:#111827;
}
.bestCard:nth-of-type(3) .bestCard__rank{
  background: linear-gradient(135deg, #ffc08a, #d97706); /* 銅 */
  color:#111827;
}
.bestCard:nth-of-type(4) .bestCard__rank{
  background: linear-gradient(135deg, #bfe8ff, #7dd3fc); /* そら */
  color:#0f172a;
}
.bestCard:nth-of-type(5) .bestCard__rank{
  background: linear-gradient(135deg, #c7f9d4, #86efac); /* みどり */
  color:#0f172a;
}
/* PCテーブル：順位セルを丸バッジ化 */
.bestTable td.rank{
  width: 46px;                 /* 列幅の目安 */
  text-align: center;
  font-weight: 1000;
}

.bestTable td.rank{
  /* 数字を丸の中に入れる */
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border-radius: 999px;

  color:#0f172a;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
}

/* 1?5位：行順で色分け（tbody内の1?5行） */
.bestTable tbody tr:nth-child(1) td.rank{
  background: linear-gradient(135deg,#ffd36b,#ffb300); /* 金 */
}
.bestTable tbody tr:nth-child(2) td.rank{
  background: linear-gradient(135deg,#e8eef7,#b8c4d8); /* 銀 */
}
.bestTable tbody tr:nth-child(3) td.rank{
  background: linear-gradient(135deg,#ffc08a,#d97706); /* 銅 */
}
.bestTable tbody tr:nth-child(4) td.rank{
  background: linear-gradient(135deg,#bfe8ff,#7dd3fc); /* そら */
}
.bestTable tbody tr:nth-child(5) td.rank{
  background: linear-gradient(135deg,#c7f9d4,#86efac); /* みどり */
}
/* PCテーブル：順位丸を小さく */
.bestTable td.rank{
  display: inline-grid;
  place-items: center;
  min-width: 24px;     /* ←小さく */
  height: 24px;        /* ←小さく */
  border-radius: 999px;

  font-weight: 1000;
  font-size: 12px;     /* ←少し小さく */
  line-height: 1;

  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 4px 10px rgba(15,23,42,.10); /* 影も控えめ */
}
/* ===== 調査データ：サムネ付きカード ===== */
.rgrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}

.rcard{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e6f0ff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}

.rcard:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

.rthumb{
  aspect-ratio: 16 / 9;
  background:#f3f6fb;
  overflow:hidden;
}
.rthumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rbody{
  padding:10px 12px 12px;
}
.rtitle{
  display:block;
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
}
.rdesc{
  display:block;
  margin-top:4px;
  color:#6b7280;
  font-size:12px;
  line-height:1.45;
}

/* スマホ：1列（必要なら2列にもできる） */
@media (max-width: 700px){
  .rgrid{ grid-template-columns: 1fr; }
}

/* タブレット：2列 */
@media (min-width:701px) and (max-width: 1020px){
  .rgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
html{ scroll-behavior:smooth; }

/* ヘッダー高さに合わせて調整（例：72px） */
#research{ scroll-margin-top: 72px; }

/* 任意：調査データ pill を少し目立たせたい時 */
.pill.is-research{
  font-weight: 900;
}
/* ▼ 「グラフ・詳細データを見る」も月別レポートと同じ“枠”にする */
.research-more > summary.archive-sum{
  /* 既存の archive-sum が当たっていない場合の保険 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:12px 14px;
  border:1px solid #e6f0ff;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  cursor:pointer;
  list-style:none;
}

/* Chrome/Safariの標準三角を消す（見た目統一） */
.research-more > summary.archive-sum::-webkit-details-marker{ display:none; }

/* 開いたら矢印回転（任意） */
.research-more[open] > summary .archive-sum__chev{
  transform: rotate(180deg);
}
.btn-afterlist{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e6f0ff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
}
.btn-afterlist:hover{ transform:translateY(-1px); }
/* 見出し＋ボタンを横並びにする */
.card-head--after{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap; /* 画面が狭いときはボタンが下に回る */
}

/* h2の余白を整えてボタンと同じ行に収めやすく */
.card-head--after .h2{
  margin:0;
}

/* ボタンを少し細く・邪魔しない見た目に（お好みで） */
.btn-afterlist{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#E3F1F3;
  border:1px solid #e6f0ff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
}
.btn-afterlist:hover{ transform:translateY(-1px); }
/* =========================
  2025ベスト釣果：PCは表 / スマホはカード（出し分け固定）
========================= */

/* まず基本：表を表示、カードは隠す（=PC基準） */
.bestTableWrap{ display:block; }
.bestCards{ display:none; }

/* スマホ：カードを表示、表は隠す */
@media (max-width: 767px){
  .bestTableWrap{ display:none; }
  .bestCards{ display:block; }
}
.research-lead{
  margin: 6px 0 14px;
  color:#475569;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* タイトル下のバナー */
.archive-hero{
  margin:10px 0 12px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
}

.archive-hero img{
  width:100%;
  height:110px;        /* PCでも“うるさくならない”高さ */
  object-fit:cover;
  display:block;
}

@media (max-width: 520px){
  .archive-hero img{ height:90px; }
}
/* 入口だけ1枚（PCでも横いっぱいに） */
#research .rgrid--entry{
  grid-template-columns: 1fr;   /* 1枚でフル幅 */
}

/* 入口はちょい横長のほうが“ヒーロー感”が出る（任意だけどおすすめ） */
#research .rgrid--entry .rthumb{
  aspect-ratio: 28 / 9;
}
/* =========================
  Best Shot List Page (Cards)
========================= */
.bestshot-page .wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 12px;
}

.bsTop{
  padding: 10px 0 4px;
}
.bsTopRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bsH1{
  margin:0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .02em;
}
.bsBack{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  font-weight: 800;
  font-size: 13px;
}
.bsLead{
  margin: 8px 0 0;
  color:#6b7280;
  font-size: 14px;
  line-height: 1.6;
}

.bestshotList{ padding: 6px 0 8px; }

.bestshotGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.bsCard{
  margin: 0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.bsCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}

.bsLink{ display:block; }

.bsImg{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.bsCap{
  padding: 10px 12px 12px;
}

.bsTitle{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.3;
}

.bsText{
  margin-top: 6px;
  color: #374151;
  font-size: 13px;
  line-height: 1.55;
}

.bsFoot{ padding: 8px 0 18px; }
.bsToTop{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  font-weight: 800;
  font-size: 13px;
}

/* タブレット：2列 */
@media (max-width: 860px){
  .bestshotGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsImg{ height: 210px; }
}

/* スマホ：1列 */
@media (max-width: 520px){
  .bestshotGrid{ grid-template-columns: 1fr; }
  .bsH1{ font-size: 22px; }
  .bsImg{ height: 220px; }
}
/* =========================
  真冬の阿仁川だより：記事の区切り（箱を増やさない）
========================= */
#after .placeholder .timeline-item{
  padding: 12px 0;
}

/* 記事と記事の間に区切り線（最後だけ消す） */
#after .placeholder .timeline-item + .timeline-item{
  border-top: 1px dashed rgba(0,0,0,.14);
  margin-top: 12px;
  padding-top: 14px;
}

/* 日付を“帯”っぽくして区切り感を強める（背景は薄く） */
#after .timeline-date{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  margin-bottom: 8px;
}
#after .trivia-body{ padding-top: 2px; }
#after .trivia-meta{ font-weight: 900; margin: 2px 0 8px; }
#after .trivia-body p{ margin: 8px 0 0; }
/* =========================
  過去一覧（details.day-fold）
  ボタンが見えない／折り畳まれない対策（強制パッチ）
========================= */

/* details自体を確実に表示 */
.day-fold{ display:block; }

/* summary（ボタン）を確実に見える形にする */
.day-fold > summary.day-summary{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.10);
}

/* summaryの中のラベルが消される事故を防ぐ */
.day-fold .sum-read{
  display:inline-flex !important;
}

/* 閉じている時は中身を確実に隠す（“全部見える”対策） */
.day-fold:not([open]) .day-content{
  display:none !important;
}

/* 開いている時だけ中身を表示 */
.day-fold[open] .day-content{
  display:block !important;
}
/* =========================
  動画（写真カードと同じトーン）
========================= */
.ayu-videoWrap{
  margin: 10px 0 8px;
}

.ayu-video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;              /* 角丸を効かせる */
  background: #000;              /* 読み込み中の黒を自然に */
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* できるだけ角丸を維持（ブラウザ差の保険） */
.ayu-videoWrap{
  border-radius: 12px;
}
.ayu-videoWrap .ayu-video{
  border-radius: 12px;
}

/* キャプション */
.ayu-video__cap{
  font-size: 13px;
  color: #666;
  margin-top: 6px;
}

/* PCでデカすぎるのを少し抑える（好みで） */
@media (min-width: 900px){
  .ayu-video{
    max-height: 520px;  /* ここはお好みで 420?600 */
  }
}

/* スマホ：写真と同じ回り込みにしたい場合（任意）
   ※写真が回り込みの時だけ、動画も小さめに並べたいならON */
@media (max-width: 640px){
  .ayu-videoWrap{
    margin: 10px 0 10px;
  }
}
/* =========================
  Safety mini card (FAQ抜粋)
========================= */
.safetyMini{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  margin:16px 0;
}
.safetyMini__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.safetyMini__h2{
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
}
.safetyMini__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #dbe7f7;
  background:#f7fbff;
  font-weight:900;
  white-space:nowrap;
}
.safetyMini__btn:hover{ filter:brightness(.98); }

.safetyMini__lead{
  margin:10px 0 12px;
  color:#111;
  font-weight:750;
  line-height:1.7;
}
.safetyMini__grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .safetyMini__grid{ grid-template-columns:repeat(4,1fr); }
}
.safetyMini__item{
  border:1px solid #eef3f8;
  border-radius:14px;
  padding:10px;
  background:#fbfcfe;
}
.safetyMini__lv{
  font-weight:1000;
  font-size:14px;
}
.safetyMini__txt{
  margin-top:4px;
  color:#667085;
  font-weight:800;
  font-size:13px;
  line-height:1.5;
}
.safetyMini__item--danger{
  border-color: rgba(255,59,48,.25);
  background: rgba(255,59,48,.05);
}
.safetyMini__item--stop{
  border-color: rgba(255,176,32,.35);
  background: rgba(255,176,32,.07);
}
.safetyMini__note{
  margin:12px 0 0;
  color:#667085;
  font-size:13px;
  font-weight:750;
}
/* =========================
  Safety mini (折り畳み)
========================= */
.safetyMini{
  margin:16px 0;
}
.safetyMini__box{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  overflow:hidden;
}
.safetyMini__sum{
  list-style:none;
  cursor:pointer;
  padding:14px;
}
.safetyMini__sum::-webkit-details-marker{display:none;}

.safetyMini__sumRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.safetyMini__h2{
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
}
.safetyMini__btn{
  border:1px solid #dbe7f7;
  background:#f7fbff;
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.safetyMini__btn:hover{filter:brightness(.98);}

.safetyMini__lead{
  margin:10px 0 0;
  font-weight:750;
  line-height:1.7;
}
.safetyMini__chips{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #eef3f8;
  background:#fbfcfe;
  font-weight:900;
  font-size:12px;
  color:#2b3a4a;
}
.chip--danger{
  border-color: rgba(255,59,48,.25);
  background: rgba(255,59,48,.06);
}
.chip--stop{
  border-color: rgba(255,176,32,.35);
  background: rgba(255,176,32,.08);
}

/* 開いた中身 */
.safetyMini__body{
  border-top:1px solid #e8edf3;
  padding:14px;
}
.safetyMini__grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .safetyMini__grid{grid-template-columns:repeat(4,1fr);}
}
.safetyMini__item{
  border:1px solid #eef3f8;
  border-radius:14px;
  padding:10px;
  background:#fbfcfe;
}
.safetyMini__lv{font-weight:1000;font-size:14px;}
.safetyMini__txt{margin-top:4px;color:#667085;font-weight:800;font-size:13px;line-height:1.5;}
.safetyMini__item--danger{
  border-color: rgba(255,59,48,.25);
  background: rgba(255,59,48,.05);
}
.safetyMini__item--stop{
  border-color: rgba(255,176,32,.35);
  background: rgba(255,176,32,.07);
}
.safetyMini__long{
  margin-top:12px;
  color:#111;
}
.safetyMini__long p{margin:0 0 10px;}
.safetyMini__long p:last-child{margin-bottom:0;}

.safetyMini__foot{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.safetyMini__link{
  font-weight:900;
  border:1px solid #e6edf5;
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
}
.safetyMini__close{
  border:1px solid #e6edf5;
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}

/* summary内のボタンを押しても “変な二重クリック” にならないように */
.safetyMini__sum button{pointer-events:auto;}
/* =========================
  今日の阿仁川（todayMini）
========================= */
.todayMini{ padding:14px; }
.todayMini__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.todayMini__meta{
  margin:0; display:flex; gap:10px; color:#667085; font-size:12px; font-weight:700;
}

.todayMini__judge{
  margin-top:10px;
  border:1px solid #e8edf3;
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.todayMini__judgeL{ display:flex; gap:10px; align-items:flex-start; }
.todayMini__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:28px; padding:0 10px;
  border-radius:999px; background:#111; color:#fff;
  font-weight:900; font-size:12px;
}
.todayMini__big{ font-weight:1000; font-size:18px; line-height:1.1; }
.todayMini__sub{ margin-top:3px; color:#667085; font-size:12px; font-weight:800; }

.todayMini__judgeR{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.todayMini__btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e8edf3;
  background:#fff;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}

.todayMini__kpis{
  margin:12px 0 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
.todayMini__kpi{
  border:1px solid #e8edf3;
  border-radius:12px;
  padding:10px;
  background:#fbfcfe;
}
.todayMini__kpi dt{ font-size:11px; color:#667085; font-weight:900; }
.todayMini__kpi dd{ margin:4px 0 0; font-size:13px; font-weight:900; }

.todayMini__photo{ margin:12px 0 0; }
.todayMini__img{
  width:100%;
  border:1px solid #e8edf3;
  border-radius:14px;
  display:block;
}
.todayMini__cap{ margin-top:6px; font-size:12px; color:#667085; font-weight:700; }

.todayMini__more{ margin:12px 0 0; text-align:right; }
.todayMini__morelink{
  display:inline-flex;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #e8edf3;
  background:#fff;
  font-weight:900;
}

/* 入川判定カラー：クラスを変えるだけ */
.todayMini__judge.is-ok{ background:#f1fff5; }
.todayMini__judge.is-mid{ background:#fffdf2; }
.todayMini__judge.is-ng{ background:#fff1f1; }

@media (max-width: 720px){
  .todayMini__head{ flex-direction:column; align-items:flex-start; }
  .todayMini__judge{ flex-direction:column; }
  .todayMini__judgeR{ justify-content:flex-start; }
  .todayMini__kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.todayMini__wlref{
  margin-top:10px;
  display:flex; flex-wrap:wrap;
  gap:8px; align-items:center;
}
.wlchip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e8edf3;
  background:#fff;
  font-weight:900;
  font-size:12px;
}
.wlchip--danger{ background:#fff1f1; }

.wlmore{
  margin-left:auto;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e8edf3;
  background:#fff;
}
@media (max-width:720px){
  .wlmore{ margin-left:0; }
}
/* 判定ボックスの下に“要約行”として馴染ませる */
.todayMini__wlref{
  margin-top:10px;
  padding:10px;
  border:1px solid #e8edf3;
  border-radius:14px;
  background:#fbfcfe;
  display:flex; flex-wrap:wrap;
  gap:8px; align-items:center;
}
.wlmore{ margin-left:auto; }
@media (max-width:720px){
  .wlmore{ margin-left:0; }
}
.wlDialog{
  border:0;
  padding:0;
  width:min(720px, 92vw);
  border-radius:16px;
}
.wlDialog::backdrop{ background:rgba(0,0,0,.45); }

.wlDialog__inner{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:16px;
  padding:14px;
}
.wlDialog__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.wlDialog__title{ margin:0; font-size:16px; font-weight:900; }
.wlDialog__close{
  border:1px solid #e8edf3;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.wlDialog__foot{
  margin-top:12px;
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}
.wlDialog__btn, .wlDialog__link{
  border:1px solid #e8edf3;
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
}
/* ===== 水位目安モーダル ===== */
.wlDialog{
  border:0;
  padding:0;
  width:min(760px, 92vw);
  border-radius:16px;
}
.wlDialog::backdrop{ background:rgba(0,0,0,.45); }

.wlDialog__inner{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:16px;
  padding:14px;
}
.wlDialog__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.wlDialog__title{ margin:0; font-size:16px; font-weight:900; }
.wlDialog__close{
  border:1px solid #e8edf3;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}

/* dialog内の safetyMini__body を“開いた状態”として見せる */
.wlDialog__body{
  display:block; /* detailsの中じゃないので念のため */
}

/* 上の安全ボックスを“軽量版”に */
.safetyMini__box--lite{
  border:1px solid #e8edf3;
  border-radius:16px;
  background:#fff;
  padding:12px;
}
.dayConclusion{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e8edf3;
  background:#fbfcfe;
  font-weight:900;
  line-height:1.5;
}
/* =========================
  今日の状況（KPI箱）を少し低めに
========================= */

/* 1) 箱自体：上下の余白を詰める */
.todayMini__kpi{
  padding: 8px 12px;   /* ← ここで高さが縮む */
  min-height: 58px;     /* ← 間延び防止（必要なら 58px まで下げOK） */
}

/* 2) 見出し(dt)：小さめ＆詰める */
.todayMini__kpi dt{
  margin: 0 0 4px;      /* ← dt→dd の間を詰める */
  font-size: 12px;
  line-height: 1.2;
}

/* 3) 本文(dd)：行間＆余白を詰める */
.todayMini__kpi dd{
  margin: 0;            /* dl/dd のデフォ余白を消す */
  line-height: 1.25;    /* ← 文字が詰まりすぎない範囲で縮める */
}

/* 4) 数字/強調：ちょいだけ締める（大きすぎる場合） */
.todayMini__kpi dd strong{
  font-size: 15px;      /* ← 好みで 16px にしてもOK */
  line-height: 1.1;
}

/* 5) muted の行間を詰める */
.todayMini__kpi .muted{
  line-height: 1.2;
}
/* =========================
  今日の状況（KPI箱）高さを強制的に詰める：上書き最終兵器
========================= */

/* dl自体の余白も念のため潰す */
.todayMini__kpis{
  margin: 0 !important;
  padding: 0 !important;
}

/* 箱：padding/高さを強制上書き */
.todayMini__kpis > .todayMini__kpi{
  padding: 8px 12px !important;     /* ← まずここで効くはず */
  min-height: 0 !important;          /* 固定最小高を無効化 */
  height: auto !important;           /* 固定高があれば無効化 */
  line-height: 1.25 !important;
}

/* dt/dd のデフォ余白を強制リセット */
.todayMini__kpis > .todayMini__kpi > dt{
  margin: 0 0 3px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}
.todayMini__kpis > .todayMini__kpi > dd{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* 強調数字を少し締める */
.todayMini__kpis > .todayMini__kpi > dd > strong{
  font-size: 15px !important;
  line-height: 1.05 !important;
}

/* mutedも詰める */
.todayMini__kpis > .todayMini__kpi .muted{
  line-height: 1.15 !important;
}
/* =========================
  「今日の状況」：上の横長行とKPI箱の間に余白を作る
========================= */

/* KPIグリッド（dl）の上に余白を足して“くっつき”解消 */
.todayMini__kpis{
  margin-top: 12px !important;   /* ここを 10?16pxで好み調整 */
}

/* もし上段の横長行が下に余白を持っていない場合の保険 */
.todayMini__row,
.todayMini__bar,
.todayMini__levels,
.todayMini__pills{
  margin-bottom: 12px;
}
/* =========================
  安全カード内：3ボタン
========================= */
.safetyMini__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.safetyMini__pill{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e6eef7;
  font-weight:800;
  font-size:13px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  white-space:nowrap;
}

.safetyMini__pill:hover{
  transform:translateY(-1px);
}
/* 要点の横：うっすら色付きの“詳しく読む→” */
.safetyMini__more{
  margin-left:8px;
  padding:2px 10px;
  border-radius:999px;

  /* ▼ ここが背景色 */
  background:#eef6ff;          /* うすい水色 */
  border:1px solid #cfe4ff;    /* 背景に合う枠 */

  font-weight:900;
  font-size:12px;
  line-height:1.6;
  cursor:pointer;
}

.safetyMini__more:hover{
  transform:translateY(-1px);
  background:#e4f1ff;
  border-color:#bddaff;
}
/* ===== 診断：結果サムネ ===== */
.pfThumbs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 720px){
  .pfThumbs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pfThumb{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  position:relative;
  padding:0;
}
.pfThumb img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  transform:scale(1);
  transition:transform .18s ease;
}
.pfThumb:hover img{ transform:scale(1.03); }
.pfThumb__cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:8px 10px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* ===== ライトボックス ===== */
.pfLightbox{ position:fixed; inset:0; display:none; z-index:9999; }
.pfLightbox.is-open{ display:block; }
.pfLightbox__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); }

.pfLightbox__panel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:min(920px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  background:#111;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.pfLightbox__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff; font-size:22px;
  cursor:pointer;
}
.pfLightbox__figure{ margin:0; display:flex; flex-direction:column; }
.pfLightbox__img{
  width:100%;
  height:auto;
  max-height:calc(100vh - 120px);
  object-fit:contain;
  background:#000;
}
.pfLightbox__cap{
  padding:10px 14px;
  font-size:13px;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.55);
}
.pfLightbox__nav{
  position:absolute;
  left:10px; bottom:10px;
  display:flex; gap:8px;
}
.pfLightbox__btn{
  border:0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
}
/* スマホだけ：おすすめボタンを押しやすい高さに */
@media (max-width: 576px){
  #point-finder #pf-run.pf-btn{
    min-height: 40px;
    padding: 10px 14px;  /* 厚みはここでも調整 */
    font-size: 16px;
    line-height: 1.2;
  }
}
/* ====== pfLightbox：閉じる×（白丸×白文字問題を解決） ====== */
#pfLightbox .pfLightbox__close{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);

  color: #111;
  font-size: 30px;
  line-height: 1;

  display: grid;
  place-items: center;

  cursor: pointer;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

#pfLightbox .pfLightbox__close:hover{
  background: rgba(255,255,255,.98);
}

/* スマホは押しやすく */
@media (max-width: 640px){
  #pfLightbox .pfLightbox__close{
    width: 52px;
    height: 52px;
    top: 10px;
    right: 10px;
    font-size: 34px;
  }
}

/* ====== コメント下の“空枠”を消す（空のときだけ） ====== */
#pfLightbox .pfLightbox__comment:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* 「おすすめを見る」ボタン：角を少し丸く */
#point-finder #pf-run.pf-btn{
  border-radius: 10px;  /* 6?14pxで好み調整 */
}
.pill-2024{
  background:#f3f4f6;
  color:#111;
  border:1px solid #e5e7eb;
}
.pill-2024:hover{
  filter:brightness(.98);
}
.pill-2024{
  background:#f3f4f6;
  color:#111;
  border:1px solid #e5e7eb;
}
.pill-2024:hover{ filter:brightness(.98); }

.archiveNote{
  margin: 8px 0 0;
  font-size: 12px;
  opacity: .75;
  line-height: 1.4;
}
.archiveHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap; /* スマホは折り返す */
}

.archiveBtn2024{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#111;
  font-weight:800;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}
.archiveBtn2024:hover{ filter:brightness(.98); }

.archiveNote{
  margin:8px 0 0;
  font-size:12px;
  opacity:.75;
  line-height:1.4;
}
.archiveNote{
  margin: 8px 0 0;
  font-size: 12px;
  opacity: .75;
  line-height: 1.4;
}

/* PCだけ右寄せ（幅768px以上を目安） */
@media (min-width: 768px){
  .archiveNote{ text-align: right; }
}
.archiveHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap; /* スマホは折り返す */
}

.archiveBtn2024{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#111;
  font-weight:800;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}
.archiveBtn2024:hover{ filter:brightness(.98); }

.archiveNote{
  margin:8px 0 0;
  font-size:12px;
  opacity:.75;
  line-height:1.4;
}
.archiveBtn2024{
  /* …他はそのまま… */
  background:#e9edf3;  /* ←少し濃く（控えめ） */
  border:1px solid #d7dee8; /* ←輪郭もわずかに締める */
}
.archiveBtn2024:hover{
  filter:none;
  background:#e2e7ef;   /* ←ホバー時にほんの少しだけ濃く */
}
.noCatchCta{
  display:flex; align-items:center; gap:14px;
  margin: 14px 0 18px; padding: 14px 16px;
  border-radius: 18px; text-decoration:none; color:#05202a;
  border: 1px solid rgba(24,191,255,.35);
  background:
    radial-gradient(700px 260px at 15% -20%, rgba(24,191,255,.28), transparent 60%),
    radial-gradient(620px 240px at 95% 0%, rgba(52,211,153,.20), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  box-shadow: 0 14px 34px rgba(2, 6, 23, .10);
  transition: transform .10s ease, box-shadow .12s ease;
}
.noCatchCta:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(2, 6, 23, .14); }
.noCatchCta__icon{
  width:44px;height:44px; display:grid; place-items:center;
  border-radius:14px; background:rgba(255,255,255,.85);
  border:1px solid rgba(2,6,23,.10); font-size:22px; flex:0 0 auto;
}
.noCatchCta__txt{ min-width:0; }
.noCatchCta__txt b{ display:block; font-size:16px; letter-spacing:.02em; }
.noCatchCta__txt small{ display:block; margin-top:4px; font-size:12.5px; color:rgba(2,6,23,.70); line-height:1.45; }
.noCatchCta__go{
  margin-left:auto; padding:10px 12px; border-radius:999px;
  background: linear-gradient(90deg, #18bfff, #34d399);
  color:#06202a; font-weight:900; letter-spacing:.02em; flex:0 0 auto;
}
@media (max-width:640px){
  .noCatchCta{ flex-wrap:wrap; }
  .noCatchCta__go{ margin-left:0; }
}
.noCatchCta__thumb{
  padding:0;              /* 絵文字用の余白を消す */
  overflow:hidden;
}
.noCatchCta__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;       /* はみ出しはトリミング */
  display:block;
}
.day-summary .day-preview{
  display:inline-block;
  margin-left:10px;
  font-size:12px;
  opacity:.75;
}
/* 折りたたみ summary の右側：小サムネ付き “つづき” */
.day-summary{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.day-previewThumb{
  margin-left:auto;               /* 右端へ寄せる */
  display:inline-flex;
  align-items:center;
  gap:8px;
  opacity:.88;
  white-space:nowrap;
}

.day-previewThumb img{
  width:38px;
  height:26px;
  object-fit:cover;
  border-radius:7px;
  border:1px solid rgba(0,0,0,.12);
}

.day-previewText{
  font-size:12px;
  opacity:.85;
}

/* スマホで右端が窮屈なら、下段に回す */
@media (max-width: 520px){
  .day-previewThumb{ margin-left:0; }
}
/* =========================
  2025アーカイブ：月別レポート summary を強くする
========================= */
.archive-sum{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  border-radius: 18px;

  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(39,197,255,.18), rgba(34,197,94,.10));
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.archive-sum::-webkit-details-marker{ display:none; }

.archive-sum__icon{
  font-size: 22px;
  line-height: 1;
}

.archive-sum__texts{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.archive-sum__label{
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
}

.archive-sum__sub{
  font-size: 12px;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-sum__pill{
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.10);
}

.archive-sum__chev{
  font-size: 13px;
  opacity: .75;
  transition: transform .15s ease;
}

/* detailsが開いたら矢印回転（summaryがdetails直下なら効く） */
details[open] > .archive-sum .archive-sum__chev{
  transform: rotate(180deg);
}

/* スマホ：少し押しやすく */
@media (max-width: 640px){
  .archive-sum{
    padding: 15px 14px;
    border-radius: 16px;
  }
  .archive-sum__icon{ font-size: 24px; }
}
/* =========================
  2025アーカイブ：カード化（バナーと同じ枠）
========================= */
.archiveCard{
  margin: 12px 0 18px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.archiveCard .archiveHead{
  margin: 0 0 10px;
}

.archiveCard .archive-hero{
  margin: 10px 0 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
}

.archiveCard .archive-hero img{
  display:block;
  width:100%;
  height:auto;
}

.archiveCard .archiveNote{
  margin: 10px 2px 0;
  font-size: 12px;
  opacity: .75;
}

/* 開く/閉じる 切替（summaryがdetails直下なら効く） */
.archive-sum__pill .pill-close{ display:none; }
details[open] > .archive-sum .pill-open{ display:none; }
details[open] > .archive-sum .pill-close{ display:inline; }

/* スマホ */
@media (max-width: 640px){
  .archiveCard{
    padding: 12px;
    border-radius: 18px;
  }
  .archiveCard .archive-hero{
    border-radius: 16px;
  }
}
/* ===== topnav : mobile hamburger ===== */

.topnav{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px);
}

.topnav__toggle{
  display: none; /* PCは隠す */
  border: 0;
  background: transparent;
  padding: 10px;
  border-radius: 12px;
}

.topnav__toggleBars{
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.topnav__toggleBars::before,
.topnav__toggleBars::after{
  content:"";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.topnav__toggleBars::before{ top: -7px; }
.topnav__toggleBars::after { top:  7px; }

@media (max-width: 820px){
  .topnav__toggle{ display: inline-flex; align-items:center; justify-content:center; }

  /* スマホは閉じておく */
  .topnav__menu{
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 0;
    padding: 12px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
  }

  /* これが付いたら開く */
  .topnav__menu.is-open{ display: flex; }

  .topnav .navbtn{
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
  }
}
/* =========================
  あなたのタイプ診断（クリックバナー）
========================= */
.typeBanner{
  margin: 18px 0 22px;
}

.typeBanner__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  border-radius:18px;
  padding:16px 18px;

  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);

  background:
    radial-gradient(1200px 240px at 10% 20%, rgba(0,180,255,.22), transparent 60%),
    radial-gradient(900px 220px at 80% 20%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(90deg, rgba(235,250,255,.95), rgba(240,255,245,.95));
}

.typeBanner__title{
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:.02em;
  font-size:18px;
}

.typeBanner__sub{
  margin:0;
  font-size:13px;
  color: rgba(0,0,0,.62);
  line-height:1.35;
}

.typeBanner__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;

  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;

  background: linear-gradient(90deg, #22c1ff, #22c55e);
  color:#07121a;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.45);
  transition: transform .12s ease, filter .12s ease;
}

.typeBanner__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.typeBanner__btn:active{
  transform: translateY(0);
}

/* スマホ：縦積みで見やすく */
@media (max-width: 820px){
  .typeBanner__inner{
    flex-direction:column;
    align-items:stretch;
  }
  .typeBanner__btn{
    width:100%;
    padding:14px 16px;
    font-size:16px;
  }
}
/* タイプ診断バナーだけ色替え：赤味を消して“青→紫”寄り */
.noCatchCta.noCatchCta--type{
  background:
    radial-gradient(900px 240px at 10% 10%, rgba(59,130,246,.22), transparent 60%), /* blue */
    radial-gradient(900px 240px at 90% 10%, rgba(139,92,246,.18), transparent 60%), /* violet */
    linear-gradient(90deg, rgba(239,246,255,.96), rgba(245,243,255,.96));
  border-color: rgba(99,102,241,.18);
}

/* 右側ボタンも“青→紫” */
.noCatchCta.noCatchCta--type .noCatchCta__go{
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  color:#0b1220;
  border-color: rgba(255,255,255,.45);
}
.noCatchCta + .noCatchCta{ margin-top: 10px; }
/* =========================
  MAP下：Accessバナー（背景くっきり版）
========================= */
.mapAccessBanner{
  position: relative;
  display:block;
  margin: 14px 0 18px;
  border-radius: 22px;
  overflow:hidden;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
  background: #fff;
}

/* “地図っぽい背景”をくっきり */
.mapAccessBanner__bg{
  position:absolute; inset:0;

  /* 地図っぽさ：グリッド＋川筋＋地形色 */
  background:
    /* 川筋（はっきり） */
    linear-gradient(115deg,
      rgba(59,130,246,0) 0%,
      rgba(59,130,246,.28) 20%,
      rgba(59,130,246,0) 46%),
    linear-gradient(135deg,
      rgba(59,130,246,0) 0%,
      rgba(59,130,246,.22) 18%,
      rgba(59,130,246,0) 42%),
    linear-gradient(155deg,
      rgba(6,182,212,0) 0%,
      rgba(6,182,212,.20) 26%,
      rgba(6,182,212,0) 56%),

    /* 地形色（少し濃く） */
    radial-gradient(1200px 520px at 16% 28%, rgba(34,197,94,.22), transparent 58%),
    radial-gradient(980px 560px at 90% 16%, rgba(59,130,246,.20), transparent 62%),
    radial-gradient(900px 520px at 68% 92%, rgba(253,186,116,.26), transparent 60%),

    /* グリッド（濃く＆細かく） */
    linear-gradient(0deg, rgba(15,23,42,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.10) 1px, transparent 1px),

    /* ベース */
    linear-gradient(180deg, #f3fbff, #fff6ea);

  /* グリッド間隔：やや小さくして地図感UP */
  background-size:
    auto, auto, auto,
    auto, auto, auto,
    18px 18px, 18px 18px,
    auto;

  /* ぼかしをやめる（くっきり） */
  filter: saturate(1.15) contrast(1.06);
}

/* 白膜を“薄く”して背景を殺さない */
.mapAccessBanner::after{
  content:"";
  position:absolute; inset:0;
  /* 以前: 0.72→ 0.35 に。下はさらに薄い */
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.18));
  pointer-events:none;
}

/* 中身は前回のままでOK（以下、同じなら不要） */
.mapAccessBanner__inner{
  position:relative;
  display:flex;
  gap:16px;
  align-items:stretch;
  justify-content:space-between;
  padding: 16px 16px;
}
/* =========================
  MAP下：Accessバナー（細身版）
========================= */
.mapAccessBanner--slim{
  margin: 10px 0 14px;
  border-radius: 18px;
}

.mapAccessBanner--slim .mapAccessBanner__inner{
  padding: 12px 14px;         /* 縦を詰める */
  gap: 12px;
  align-items:center;
}

.mapAccessBanner--slim .mapAccessBanner__eyebrow{
  margin-bottom:4px;
  font-size:12px;
}

.mapAccessBanner--slim .mapAccessBanner__titleRow{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}

.mapAccessBanner--slim .mapAccessBanner__title{
  margin:0;
  font-size: clamp(14px, 1.8vw, 16px); /* 小さめ */
  line-height:1.25;
}

.mapAccessBanner--slim .mapAccessBanner__mini{
  font-size:12px;
  font-weight:900;
  color: rgba(15,23,42,.68);
  white-space:nowrap;
}

.mapAccessBanner--slim .mapAccessBanner__right{
  flex: 0 0 auto;
  align-items:flex-end;
}

.mapAccessBanner--slim .mapAccessBanner__go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(6,182,212,.92));
  color:#fff;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow: 0 10px 18px rgba(37,99,235,.18);
}

/* 右の大きいCTAやnote等を使っていた場合は非表示（保険） */
.mapAccessBanner--slim .mapAccessBanner__cta,
.mapAccessBanner--slim .mapAccessBanner__note,
.mapAccessBanner--slim .mapAccessBanner__features,
.mapAccessBanner--slim .mapAccessBanner__chips{
  display:none !important;
}

/* スマホ：さらに一段細く（miniを折り返しやすく） */
@media (max-width: 820px){
  .mapAccessBanner--slim .mapAccessBanner__mini{
    white-space:normal;
  }
  .mapAccessBanner--slim .mapAccessBanner__right{
    align-items:stretch;
  }
  .mapAccessBanner--slim .mapAccessBanner__go{
    width:100%;
    text-align:center;
  }
}
/* ===== リンクバナー（あと10匹） ===== */
.linkBanner{
  --ink:#0b1220;
  --muted:#334155;
  --line: rgba(15,23,42,.18);
  --shadow: 0 16px 40px rgba(2,6,23,.10);

  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;

  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);

  color: var(--ink);
  text-decoration:none;
}

.linkBanner__main{
  display:inline-flex;
  align-items:center;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.16);
  background: linear-gradient(90deg, rgba(16,185,129,.18), rgba(59,130,246,.10));
  font-weight:900;
  letter-spacing:.02em;
  font-size: clamp(16px, 2.2vw, 22px);
  white-space:nowrap;
}

.linkBanner__sub{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.78);
  color: var(--muted);
  font-size:13px;
  line-height:1.35;
  max-width: 100%;
}

.linkBanner__go{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(2,132,199,.10);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

/* ホバー・フォーカス */
.linkBanner:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(2,6,23,.14);
}
.linkBanner:active{ transform: translateY(0); }
.linkBanner:focus-visible{
  outline: 3px solid rgba(2,132,199,.35);
  outline-offset: 4px;
}

/* スマホ：右端の「読む→」を下に回してもOK */
@media (max-width: 520px){
  .linkBanner{ gap:10px; }
  .linkBanner__go{ margin-left:0; }
}
/* ===== CTA：あと10匹（グラデ） ===== */
.ato10Cta{
  --line: rgba(15,23,42,.14);
  --ink: #0b1220;
  --muted:#334155;

  /* 背景グラデ（ここを好みで調整） */
  --g1: rgba(16,185,129,.20);  /* みどり */
  --g2: rgba(59,130,246,.14);  /* あお */

  display:flex;
  align-items:center;
  gap:12px;

  padding:16px 16px;
  border-radius:22px;
  border:1px solid var(--line);

  background:
    linear-gradient(90deg, var(--g1), rgba(255,255,255,.85) 45%, var(--g2)),
    rgba(255,255,255,.88);

  box-shadow: 0 14px 34px rgba(2,6,23,.08);
  text-decoration:none;
  color: var(--ink);
}

.ato10Cta__icon{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  font-size:18px;
}

.ato10Cta__txt{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 0;
}
.ato10Cta__txt b{
  font-size:18px;
  letter-spacing:.02em;
}
.ato10Cta__txt small{
  color: var(--muted);
  font-size:13px;
  line-height:1.35;
}

.ato10Cta__go{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(2,132,199,.10);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

/* hover */
.ato10Cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(2,6,23,.12);
}
.ato10Cta:active{ transform: translateY(0); }
.ato10Cta:focus-visible{
  outline: 3px solid rgba(2,132,199,.35);
  outline-offset: 4px;
}

/* スマホ：右ボタンは下に回ってもOK */
@media (max-width: 520px){
  .ato10Cta{ flex-wrap:wrap; }
  .ato10Cta__go{ margin-left:0; }
}