:root{
  /* さわやか・淡色 */
  --bg1: #f6fbff;      /* 空気感のある白 */
  --bg2: #fef7fb;      /* ほんのりピンク */
  --panel: rgba(255,255,255,.72);
  --panel2: rgba(255,255,255,.88);
  --text: #1f2a37;     /* くっきりしすぎない濃紺グレー */
  --muted: #667085;    /* 30代向けの落ち着いたグレー */
  --line: rgba(31,42,55,.10);
  --shadow: 0 14px 40px rgba(16,24,40,.10);
  --shadow2: 0 10px 22px rgba(16,24,40,.08);
  --radius: 18px;
  --radius2: 22px;

  --accent: #35b7c6;   /* ミント寄りの青緑 */
  --accent2:#ff6fa9;   /* ほんのりピンク */
  --accent3:#7aa8ff;   /* 透明感のあるブルー */
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 680px at 18% 10%, rgba(122,168,255,.25), transparent 55%),
    radial-gradient(900px 600px at 85% 0%, rgba(53,183,198,.18), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(255,111,169,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height: 100svh;
  text-align: center;
}

.wrap{
  x-max-width: 980px;
  margin: 0 auto;
  padding: 26px 16px 44px;
}

header{
  /*
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  */
  margin-bottom: 14px;
}

h1{
  margin:0;
  font-size: 22px;
  letter-spacing: .02em;
  line-height: 1.25;
}

.sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* ====== 季節セレクタ:やわらかいピル + 透明感 ====== */
.season-picker{
  /*
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  */
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background: var(--panel);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  margin: 16px 0 16px;
}

.season-picker label{
  display:inline-flex;
}

.season-picker input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
  overflow:hidden;
  clip: rect(0 0 0 0);
  white-space:nowrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(31,42,55,.10);
  background: rgba(255,255,255,.70);
  color: #344054;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
}

.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(16,24,40,.10);
  border-color: rgba(53,183,198,.25);
}

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

/* 選択状態:爽やかなグラデ + ほんのり輪郭 */
#spring:checked + .chip,
#summer:checked + .chip,
#autumn:checked + .chip,
#winter:checked + .chip{
  color: #0f172a;
  border-color: rgba(53,183,198,.35);
  background:
    linear-gradient(180deg, rgba(53,183,198,.14), rgba(255,255,255,.85));
  box-shadow: 0 14px 30px rgba(53,183,198,.16);
}

/* ====== グリッド:カードは白多め、余白多め ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}

/* カード:清潔感 + 角丸 + 影 */
.card{
  border: 1px solid rgba(31,42,55,.10);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 178px;
  box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(16,24,40,.12);
  border-color: rgba(53,183,198,.22);
}

/* サムネ:季節で色味が変わる "空気感" */
.card .thumb{
  height: 92px;
  border-bottom: 1px solid rgba(31,42,55,.08);
  display:flex;
  align-items: start;
  justify-content:space-between;
  padding: 12px 12px;
  gap: 10px;
  background:
    radial-gradient(180px 120px at 15% 25%, rgba(122,168,255,.35), transparent 55%),
    radial-gradient(180px 120px at 85% 20%, rgba(53,183,198,.30), transparent 60%),
    radial-gradient(240px 140px at 60% 120%, rgba(255,111,169,.18), transparent 60%),
    rgba(255,255,255,.35);
  background-position-x: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.badge{
  font-size: 12px;
  color: rgba(17,24,39,.82);
  border: 1px solid rgba(31,42,55,.12);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  white-space:nowrap;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
}

.emoji{
  font-size: 28px;
  opacity: .95;
  filter: saturate(1.05);
}

.card .body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.name{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin:0;
  font-size: 16px;
  letter-spacing: .01em;
}

.latin{
  font-size: 12px;
  color: #667085;
  letter-spacing: .02em;
}

.desc{
  margin:0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====== 表示切替(そのまま) ====== */
.fish-set{ display:none; }
.wrap:has(#spring:checked) .fish-set[data-season="spring"],
.wrap:has(#summer:checked) .fish-set[data-season="summer"],
.wrap:has(#autumn:checked) .fish-set[data-season="autumn"],
.wrap:has(#winter:checked) .fish-set[data-season="winter"]{
  display:block;
}

footer, footer a {
  font-size: 90%;
  color: gray !important;
}