.page-lower--glossary {
  --glossary-hand: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", cursive;
  --glossary-blue: #075eae;
  --glossary-deep: #17365d;
  --glossary-soft: #f4fcff;
  --glossary-line: rgba(42, 148, 214, .22);
  --glossary-mint: #dff8f2;
  --glossary-yellow: #fff7df;
  --glossary-coral: #fff0ec;
  --glossary-lavender: #f3f4ff;
}

.page-lower--glossary .lower-main {
  background:
    radial-gradient(circle at 7% 30rem, rgba(159, 233, 246, .24), transparent 18rem),
    radial-gradient(circle at 92% 66rem, rgba(255, 208, 112, .13), transparent 17rem),
    linear-gradient(180deg, #fff 0%, #f7fdff 40%, #fff 100%);
}

@media (min-width: 1200px) {
  .page-lower--glossary .lower-breadcrumb,
  .page-lower--glossary .lower-hero__inner,
  .page-lower--glossary .lower-nav,
  .page-lower--glossary .lower-page-nav,
  .page-lower--glossary .lower-content,
  .page-lower--glossary .lower-related,
  .page-lower--glossary .lower-pager,
  .page-lower--glossary .lower-back {
    width: min(1680px, 100% - 64px);
  }

  .page-lower--glossary .lower-hero__inner {
    grid-template-columns: minmax(0, .82fr) minmax(440px, .72fr);
  }
}

.glossary-tools,
.glossary-guide,
.glossary-faq {
  width: min(1680px, 100% - 64px);
  margin-right: auto;
  margin-left: auto;
}

.glossary-tools {
  margin-top: clamp(1.8rem, 4vw, 3.2rem);
}

.glossary-hero .lower-hero__inner {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .97) 0 42%, rgba(255, 255, 255, .38) 70%),
    radial-gradient(circle at 86% 20%, rgba(159, 233, 246, .4), transparent 16rem),
    linear-gradient(135deg, #fff 0%, #effbff 54%, #dff7fb 100%);
}

.glossary-hero::before {
  top: 9%;
  left: 4%;
  width: clamp(86px, 9vw, 150px);
  background: url("../images/sections/glossary/web/illust-club.png") center / contain no-repeat;
  opacity: .42;
  transform: rotate(-10deg);
}

.glossary-hero::after {
  right: 4%;
  bottom: 1%;
  width: clamp(86px, 9vw, 148px);
  background: url("../images/sections/glossary/web/illust-squid.png") center / contain no-repeat;
  opacity: .45;
  transform: rotate(10deg);
}

.glossary-hero__label {
  color: var(--glossary-blue);
}

.glossary-hero__visual {
  aspect-ratio: 16 / 10;
}

.glossary-hero__visual img {
  object-position: center 46%;
}

.glossary-hero__visual figcaption,
.glossary-term-card__media figcaption {
  position: absolute;
  z-index: 1;
  padding: .42rem .82rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
  background: rgba(0, 72, 143, .78);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.glossary-hero__visual figcaption {
  left: 1rem;
  bottom: 1rem;
}

.glossary-intro {
  grid-template-columns: 1fr;
  align-items: start;
}

.glossary-tools,
.glossary-guide,
.glossary-faq {
  --glossary-illust: url("../images/sections/glossary/web/illust-squid.png");
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 96% 12%, rgba(159, 233, 246, .22), transparent 8rem),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 253, 255, .96));
}

.glossary-pickup {
  --glossary-illust: url("../images/sections/glossary/web/illust-shell01.png");
  overflow: hidden;
}

.glossary-pickup::before,
.glossary-tools::before,
.glossary-category::before,
.glossary-guide::before {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  z-index: -1;
  width: clamp(68px, 8vw, 130px);
  aspect-ratio: 1;
  content: "";
  background: var(--glossary-illust, url("../images/sections/glossary/web/illust-shell01.png")) center / contain no-repeat;
  opacity: .34;
  transform: rotate(var(--glossary-illust-rotate, 8deg));
}

.glossary-pickup__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.3vw, 1rem);
  margin-top: clamp(.85rem, 1.6vw, 1.15rem);
}

.glossary-pickup-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(132px, .34fr) minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  min-height: 100%;
  padding: .65rem;
  font-family: var(--glossary-hand);
  background:
    linear-gradient(90deg, rgba(42, 148, 214, .12) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, #fffef8 0 30px, #d9eef7 31px 32px);
  border: 1px solid rgba(42, 148, 214, .22);
  border-left: 3px solid rgba(139, 208, 242, .42);
  border-radius: 6px;
  box-shadow: 0 10px 18px rgba(12, 111, 172, .08);
}

.glossary-pickup-card__image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  container-type: inline-size;
}

.glossary-pickup-card__image::after {
  position: absolute;
  right: clamp(.45rem, 2.4cqw, .85rem);
  bottom: clamp(.45rem, 2.4cqw, .85rem);
  z-index: 4;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 6cqw, 11px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  content: "(C)TOBA AQUARIUM";
  text-shadow: 0 1px 3px rgba(0, 31, 56, .72);
  pointer-events: none;
}

.glossary-pickup-card img {
  width: 100%;
  height: clamp(132px, 11vw, 176px);
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.glossary-pickup-card--bazooka img {
  object-position: center top;
}

.glossary-pickup-card > div > span,
.glossary-term-card__label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: .24rem .65rem;
  color: #075eae;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
  background: #eaf8ff;
  border: 1px solid rgba(42, 148, 214, .2);
  border-radius: 999px;
}

.glossary-pickup-card h3,
.glossary-term-card h3,
.glossary-guide h3 {
  margin: .55rem 0 .45rem;
  color: #00488f;
  font-size: clamp(1.04rem, 1.4vw, 1.24rem);
  line-height: 1.45;
}

.glossary-pickup-card p,
.glossary-term-card p,
.glossary-guide p,
.glossary-result,
.glossary-empty {
  margin: 0;
  color: var(--glossary-deep);
  line-height: 1.85;
}

.glossary-pickup-card a,
.glossary-inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: .7rem;
  padding: .38rem .85rem;
  color: #075eae;
  font-weight: 700;
  line-height: 1.3;
  background: #f4fcff;
  border: 1px solid rgba(42, 148, 214, .2);
  border-radius: 999px;
}

.glossary-pickup-card h3 {
  margin: .38rem 0 .28rem;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.35;
}

.glossary-pickup-card p {
  font-size: .94rem;
  line-height: 1.65;
}

.glossary-pickup-card a {
  min-height: 34px;
  margin-top: .5rem;
  padding: .32rem .78rem;
  font-size: .9rem;
}

.glossary-search {
  display: grid;
  gap: .55rem;
  margin-top: clamp(1rem, 2vw, 1.3rem);
}

.glossary-search label {
  color: #00488f;
  font-weight: 700;
}

.glossary-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
}

.glossary-search input {
  width: 100%;
  min-height: 50px;
  padding: .7rem 1rem;
  color: var(--glossary-deep);
  font: inherit;
  background: #fff;
  border: 1px solid rgba(42, 148, 214, .28);
  border-radius: 8px;
}

.glossary-reset,
.glossary-filter__button {
  min-height: 44px;
  padding: .55rem .95rem;
  color: #075eae;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(42, 148, 214, .28);
  border-radius: 999px;
}

.glossary-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.glossary-filter__button.is-active,
.glossary-filter__button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #4ca5e5 0%, #1f7ed1 100%);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(23, 111, 197, .16);
}

.glossary-result {
  margin-top: .9rem;
  color: #38698e;
  font-weight: 700;
}

.glossary-page-nav {
  justify-content: flex-start;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.glossary-page-nav a {
  flex: 0 0 auto;
}

.glossary-category {
  --glossary-illust: url("../images/sections/glossary/web/illust-shell02.png");
  overflow: hidden;
  isolation: isolate;
}

.glossary-category__header {
  max-width: 60rem;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}

.glossary-category__header p:last-child {
  margin-top: 0;
}

.glossary-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.95rem, 1.7vw, 1.3rem);
}

.glossary-term-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  font-family: var(--glossary-hand);
  background:
    linear-gradient(90deg, var(--glossary-card-accent-soft, rgba(42, 148, 214, .12)) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, var(--glossary-card-paper, #fffef8) 0 31px, var(--glossary-card-rule, #d9eef7) 32px 33px);
  border: 1px solid var(--glossary-card-line, var(--glossary-line));
  border-left: 3px solid var(--glossary-card-accent, rgba(42, 148, 214, .32));
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(12, 111, 172, .08);
}

.glossary-term-card::before {
  display: none;
  content: none;
}

.glossary-term-card::after {
  display: none;
  content: none;
}

.glossary-term-card--featured {
  grid-column: span 2;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
  padding: .85rem;
}

.glossary-term-card--featured .glossary-term-card__body {
  padding: .3rem clamp(.3rem, 1vw, .9rem) .3rem 0;
}

.glossary-term-card__media {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  height: 100%;
  min-height: 250px;
  margin: 0;
  background: #effbff;
  border-radius: 8px;
}

.glossary-term-card__media::after {
  position: absolute;
  right: clamp(.55rem, 2.4cqw, 1rem);
  bottom: clamp(.55rem, 2.4cqw, 1rem);
  z-index: 4;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px, 2.6cqw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  content: "(C)TOBA AQUARIUM";
  text-shadow: 0 1px 3px rgba(0, 31, 56, .72);
  pointer-events: none;
}

.glossary-term-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.glossary-term-card__media figcaption {
  left: .85rem;
  bottom: .85rem;
}

.glossary-term-card--note {
  background:
    linear-gradient(90deg, var(--glossary-card-accent-soft, rgba(42, 148, 214, .12)) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, var(--glossary-card-paper, #fffef8) 0 31px, var(--glossary-card-rule, #d9eef7) 32px 33px);
}

.glossary-term-card--detail {
  background:
    linear-gradient(90deg, var(--glossary-card-accent-soft, rgba(42, 148, 214, .12)) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, var(--glossary-card-paper, #fffef8) 0 31px, var(--glossary-card-rule, #d9eef7) 32px 33px);
}

.glossary-term-card--compare {
  background:
    linear-gradient(90deg, var(--glossary-card-accent-soft, rgba(42, 148, 214, .12)) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, var(--glossary-card-paper, #fffef8) 0 31px, var(--glossary-card-rule, #d9eef7) 32px 33px);
}

.glossary-term-card__tags {
  margin-top: .8rem;
  color: #38698e;
  font-size: .92rem;
  font-weight: 700;
}

.glossary-term-card details {
  margin-top: .85rem;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(42, 148, 214, .18);
  border-radius: 8px;
}

.glossary-term-card summary {
  min-height: 44px;
  padding: .72rem .9rem;
  color: #075eae;
  font-weight: 700;
  cursor: pointer;
}

.glossary-term-card details p {
  padding: 0 .9rem .9rem;
}

.glossary-category--training {
  --glossary-illust: url("../images/sections/glossary/web/illust-squid.png");
  --glossary-illust-rotate: -8deg;
  --glossary-card-paper: #fff7f7;
  --glossary-card-rule: #f4d4d6;
  --glossary-card-line: rgba(224, 82, 86, .18);
  --glossary-card-accent: rgba(224, 82, 86, .3);
  --glossary-card-accent-soft: rgba(224, 82, 86, .08);
}

.glossary-category--training .glossary-term-card__label {
  color: #9d2429;
  background: #ffe3e4;
  border-color: rgba(224, 82, 86, .28);
}

.glossary-category--behavior {
  --glossary-illust: url("../images/sections/glossary/web/illust-club.png");
  --glossary-illust-rotate: 12deg;
  --glossary-card-paper: #fffbed;
  --glossary-card-rule: #eadba4;
  --glossary-card-line: rgba(217, 164, 65, .18);
  --glossary-card-accent: rgba(217, 164, 65, .32);
  --glossary-card-accent-soft: rgba(217, 164, 65, .09);
}

.glossary-category--behavior .glossary-term-card__label {
  color: #7b5b16;
  background: #fff0bd;
  border-color: rgba(217, 164, 65, .3);
}

.glossary-category--items {
  --glossary-illust: url("../images/sections/glossary/web/illust-shell01.png");
  --glossary-illust-rotate: -12deg;
  --glossary-card-paper: #f4fbf3;
  --glossary-card-rule: #c8e8d1;
  --glossary-card-line: rgba(64, 164, 112, .18);
  --glossary-card-accent: rgba(64, 164, 112, .3);
  --glossary-card-accent-soft: rgba(64, 164, 112, .08);
}

.glossary-category--items .glossary-term-card__label {
  color: #236d48;
  background: #dff4e5;
  border-color: rgba(64, 164, 112, .3);
}

.glossary-category--facility {
  --glossary-illust: url("../images/sections/glossary/web/illust-spiny-lobster.png");
  --glossary-illust-rotate: 7deg;
  --glossary-card-paper: #f8f5ff;
  --glossary-card-rule: #d9d1f5;
  --glossary-card-line: rgba(122, 99, 190, .18);
  --glossary-card-accent: rgba(122, 99, 190, .3);
  --glossary-card-accent-soft: rgba(122, 99, 190, .08);
}

.glossary-category--facility .glossary-term-card__label {
  color: #51408a;
  background: #e9e2ff;
  border-color: rgba(122, 99, 190, .3);
}

.glossary-category--general {
  --glossary-illust: url("../images/sections/glossary/web/illust-shell02.png");
  --glossary-illust-rotate: 10deg;
  --glossary-card-paper: #fff8ef;
  --glossary-card-rule: #f0d3b8;
  --glossary-card-line: rgba(230, 133, 55, .18);
  --glossary-card-accent: rgba(230, 133, 55, .32);
  --glossary-card-accent-soft: rgba(230, 133, 55, .08);
}

.glossary-category--general .glossary-term-card__label {
  color: #934c12;
  background: #ffe3c7;
  border-color: rgba(230, 133, 55, .3);
}

.glossary-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.95rem, 1.7vw, 1.3rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.glossary-compare--fur {
  margin-top: 0;
  margin-bottom: clamp(.95rem, 1.7vw, 1.3rem);
}

.glossary-empty {
  width: min(1680px, 100% - 64px);
  margin: 1rem auto 0;
  padding: 1rem 1.2rem;
  color: #7b5b16;
  font-weight: 700;
  background: #fffdf7;
  border: 1px solid rgba(214, 170, 74, .24);
  border-radius: 8px;
}

.glossary-guide__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.7vw, 1.25rem);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

.glossary-guide article {
  min-height: 100%;
  padding: clamp(1rem, 1.8vw, 1.3rem);
  background: #fff;
  border: 1px solid var(--glossary-line);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(12, 111, 172, .08);
}

.glossary-guide span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  aspect-ratio: 1;
  color: #fff;
  font-weight: 700;
  background: #2a94d6;
  border-radius: 50%;
}

.glossary-pickup-card a:focus-visible,
.glossary-inline-link:focus-visible,
.glossary-search input:focus-visible,
.glossary-reset:focus-visible,
.glossary-filter__button:focus-visible,
.glossary-term-card summary:focus-visible {
  outline: 3px solid rgba(42, 148, 214, .42);
  outline-offset: 3px;
}

.glossary-pickup-card a:hover,
.glossary-inline-link:hover,
.glossary-reset:hover,
.glossary-filter__button:hover {
  transform: translateY(-1px);
}

.glossary-term-card[hidden],
.glossary-category[hidden] {
  display: none;
}

@media (max-width: 1180px) {
  .glossary-card-grid,
  .glossary-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .glossary-term-card--featured {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  .glossary-intro,
  .glossary-pickup__grid,
  .glossary-card-grid,
  .glossary-compare,
  .glossary-guide__grid {
    grid-template-columns: 1fr;
  }

  .glossary-term-card--featured {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .glossary-term-card--featured .glossary-term-card__body {
    padding: 0 .25rem .3rem;
  }

  .glossary-term-card__media {
    min-height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .glossary-tools,
  .glossary-guide,
  .glossary-faq {
    width: min(100% - 28px, 720px);
    padding: 1rem;
  }

  .glossary-search__row {
    grid-template-columns: 1fr;
  }

  .glossary-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .2rem;
    -webkit-overflow-scrolling: touch;
  }

  .glossary-filter__button {
    flex: 0 0 auto;
  }

  .glossary-pickup-card {
    grid-template-columns: 1fr;
  }

  .glossary-pickup-card img {
    aspect-ratio: 4 / 3;
    min-height: auto;
  }

  .glossary-pickup-card:first-child img {
    height: auto;
    aspect-ratio: 1067 / 1600;
    object-fit: contain;
    object-position: center;
    background: #effbff;
  }

  #term-ikamimi-jump .glossary-term-card__media {
    aspect-ratio: 1067 / 1600;
  }

  #term-ikamimi-jump .glossary-term-card__media img {
    object-fit: contain;
    object-position: center;
    background: #effbff;
  }

  #term-bazooka .glossary-term-card__media img {
    object-position: center top;
  }

  .glossary-pickup-card:first-child img {
    object-position: center;
  }

  .glossary-empty {
    width: min(100% - 28px, 720px);
  }
}