/* style.css */
/* ==========================================================================
   AI portal visual system
   ========================================================================== */

:root {
  --color-bg: #f6f8fb;
  --color-bg-soft: #eef4f7;
  --color-surface: #ffffff;
  --color-surface-soft: #f9fbfd;
  --color-ink: #15202b;
  --color-text: #243241;
  --color-muted: #64748b;
  --color-primary: #245bff;
  --color-primary-dark: #173c9f;
  --color-secondary: #0f9f8f;
  --color-accent: #f2a51a;
  --color-pink: #de3c7b;
  --color-line: #dce5ee;
  --color-line-strong: #b8c7d8;
  --color-white: #ffffff;
  --radius-card: 8px;
  --radius-large: 8px;
  --shadow-card: 0 18px 48px rgba(21, 32, 43, 0.08);
  --shadow-hover: 0 24px 64px rgba(21, 32, 43, 0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    linear-gradient(90deg, rgba(36, 91, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 159, 143, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #f8fafc 0%, #eef5f8 46%, #ffffff 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::selection {
  color: var(--color-white);
  background: var(--color-primary);
}

img, svg {
  max-width: 100%;
  vertical-align: middle;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid rgba(36, 91, 255, 0.28);
  outline-offset: 4px;
}

.main-content {
  padding-left: 88px;
}

.u-sp-only {
  display: none;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(36, 91, 255, 0.18);
  border-radius: 999px;
  color: var(--color-primary-dark);
  background: rgba(36, 91, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.badge--sm {
  min-height: 24px;
  padding: 3px 9px;
  font-size: 0.72rem;
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  overflow: hidden;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out), background 0.28s var(--ease-out), color 0.28s var(--ease-out);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.42) 48%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn__arrow {
  flex: 0 0 auto;
  transition: transform 0.28s var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--primary {
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  box-shadow: 0 14px 32px rgba(36, 91, 255, 0.23);
}

.btn--primary:hover {
  box-shadow: 0 18px 42px rgba(15, 159, 143, 0.25);
}

.btn--secondary {
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(36, 91, 255, 0.2);
  box-shadow: 0 10px 28px rgba(21, 32, 43, 0.06);
}

.btn--secondary:hover {
  color: var(--color-primary);
  border-color: rgba(36, 91, 255, 0.36);
  box-shadow: 0 16px 40px rgba(21, 32, 43, 0.1);
}

.btn--white {
  color: var(--color-primary-dark);
  background: var(--color-white);
  box-shadow: 0 14px 36px rgba(6, 18, 44, 0.16);
}

.btn--white:hover {
  color: var(--color-primary);
}

.btn--outline-white {
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.btn--outline-white:hover {
  color: var(--color-ink);
  background: var(--color-white);
}

.btn--full {
  width: 100%;
}

.btn--header {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 0.84rem;
}

/* Left rail and menu */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: 88px;
  height: 100vh;
  padding: 26px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.82);
  border-right: 1px solid rgba(184, 199, 216, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 12px 0 36px rgba(21, 32, 43, 0.06);
}

.sidebar__logo-link {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-primary) 55%, var(--color-secondary) 100%);
  box-shadow: 0 14px 32px rgba(36, 91, 255, 0.22);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0;
}

.sidebar__menu-trigger {
  width: 100%;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
}

.hamburger-lines {
  position: relative;
  width: 26px;
  height: 16px;
}

.hamburger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: top 0.24s var(--ease-out), transform 0.24s var(--ease-out);
}

.hamburger-lines span:nth-child(1) {
  top: 3px;
}

.hamburger-lines span:nth-child(2) {
  top: 11px;
}

.sidebar__menu-trigger.is-active .hamburger-lines span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.sidebar__menu-trigger.is-active .hamburger-lines span:nth-child(2) {
  top: 7px;
  transform: rotate(-45deg);
}

.sidebar__menu-text {
  writing-mode: vertical-rl;
  color: var(--color-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
}

.sidebar__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar__cta-link {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 199, 216, 0.9);
  border-radius: 12px;
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.68);
  transition: transform 0.28s var(--ease-out), color 0.28s var(--ease-out), border-color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.sidebar__cta-link:hover {
  color: var(--color-secondary);
  border-color: rgba(15, 159, 143, 0.35);
  box-shadow: 0 12px 30px rgba(15, 159, 143, 0.14);
  transform: translateY(-2px);
}

.mega-nav {
  position: fixed;
  top: 0;
  left: -380px;
  z-index: 99;
  width: 360px;
  height: 100vh;
  padding: 78px 44px 38px;
  display: flex;
  align-items: stretch;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 248, 250, 0.96) 100%);
  border-right: 1px solid rgba(184, 199, 216, 0.7);
  box-shadow: 24px 0 72px rgba(21, 32, 43, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: left 0.42s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
}

.mega-nav.is-active {
  left: 88px;
  opacity: 1;
  visibility: visible;
}

.mega-nav__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mega-nav__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mega-nav__en {
  color: var(--color-primary);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.mega-nav__jp,
.mega-nav__footer {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
}

.mega-nav__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 52px 0;
}

.mega-nav__link {
  position: relative;
  display: block;
  padding: 15px 0;
  color: var(--color-ink);
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: 0;
  transition: color 0.24s var(--ease-out), transform 0.24s var(--ease-out);
}

.mega-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-line-strong), transparent);
}

.mega-nav__link:hover {
  color: var(--color-primary);
  transform: translateX(5px);
}

/* Hero */
.hero {
  position: relative;
  min-height: 92vh;
  padding: 72px 42px 56px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84) 0%, rgba(244, 249, 251, 0.92) 45%, rgba(232, 243, 242, 0.86) 100%);
  border-bottom: 1px solid rgba(184, 199, 216, 0.6);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, transparent 0%, transparent 28%, rgba(36, 91, 255, 0.06) 28%, rgba(36, 91, 255, 0.06) 30%, transparent 30%, transparent 100%),
    linear-gradient(90deg, rgba(21, 32, 43, 0.04) 1px, transparent 1px);
  background-size: 180px 180px, 42px 42px;
  pointer-events: none;
}

.hero__inner-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  align-items: center;
  gap: 54px;
}

.hero__header {
  max-width: 590px;
  text-align: left;
  animation: heroRise 0.8s var(--ease-out) both;
}


.hero--boot .hero__header,
.hero--boot .hero__map-wrapper {
  animation: none;
  opacity: 0;
  transform: translateY(46px);
}

.hero--boot .hero__map-wrapper {
  transform: translateY(58px) scale(0.985);
}

.hero--entered .hero__header,
.hero--entered .hero__map-wrapper {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 1.1s ease, transform 1.45s cubic-bezier(0.35, 0.34, 0.22, 0.99);
}

.hero--entered .hero__map-wrapper {
  transition-delay: 0.22s;
}

.hero--boot .portal-intro,
.hero--boot .map-drone,
.hero--boot .map-spot {
  opacity: 0;
}

.hero--entered .portal-intro,
.hero--entered .map-drone,
.hero--entered .map-spot {
  opacity: 1;
  transition: opacity 0.7s ease;
}

.hero--entered .portal-intro {
  transition-delay: 0.85s;
}

.hero--entered .map-drone {
  transition-delay: 1.1s;
}

.hero--entered .map-spot {
  transition-delay: calc(1.15s + (var(--spot-order, 1) * 0.08s));
}

.hero--typing-complete .portal-intro__bubble {
  box-shadow: 0 16px 36px rgba(21, 32, 43, 0.13), 0 0 0 1px rgba(36, 91, 255, 0.08) inset;
}

.portal-intro__type {
  white-space: normal;
}

.portal-intro__type.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 3px;
  background: var(--color-secondary);
  vertical-align: -0.18em;
  animation: typingCaret 0.72s steps(1) infinite;
}

@keyframes typingCaret {
  50% {
    opacity: 0;
  }
}
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 12px;
  border: 1px solid rgba(36, 91, 255, 0.18);
  border-radius: 999px;
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 26px rgba(21, 32, 43, 0.06);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
}

.hero__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(15, 159, 143, 0.13);
}

.hero__title {
  margin-bottom: 22px;
  color: var(--color-ink);
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0;
}

.hero__title-sub {
  display: block;
  margin-top: 10px;
  color: var(--color-primary-dark);
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: 0;
}

.hero__desc {
  max-width: 560px;
  margin-bottom: 30px;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.9;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__map-container {
  width: 100%;
}

.hero__map-wrapper {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(184, 199, 216, 0.72);
  border-radius: var(--radius-large);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow:
    0 24px 70px rgba(21, 32, 43, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  isolation: isolate;
}

.hero__map-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center 52%;
  background-repeat: no-repeat;
  transform: scale(1.01);
  transition: transform 1.2s var(--ease-out), filter 0.42s var(--ease-out);
}

.hero__map-wrapper:hover .hero__map-bg {
  transform: scale(1.035);
}

.hero__map-wrapper:has(.map-spot:hover) .hero__map-bg {
  filter: saturate(0.88) contrast(0.98);
}

.hero__map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 52% 46%, rgba(255, 255, 255, 0) 0%, rgba(246, 250, 252, 0.08) 48%, rgba(246, 250, 252, 0.36) 100%),
    linear-gradient(90deg, rgba(36, 91, 255, 0.06), transparent 42%, rgba(15, 159, 143, 0.08));
  pointer-events: none;
}

.portal-intro {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 8;
  width: min(430px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  pointer-events: none;
}

.portal-intro__avatar {
  width: 54px;
  height: 54px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 38px rgba(21, 32, 43, 0.16);
  animation: messageAvatarIn 0.52s var(--ease-out) both;
}

.portal-intro__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.portal-intro__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.portal-intro__bubble {
  max-width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(184, 199, 216, 0.7);
  border-radius: 8px;
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px rgba(21, 32, 43, 0.13);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(10px);
  animation: messageBubbleIn 0.58s var(--ease-out) forwards;
}

.portal-intro__bubble:nth-child(2) {
  color: var(--color-primary-dark);
  animation-delay: 0.42s;
}

@keyframes messageAvatarIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes messageBubbleIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.map-drone {
  position: absolute;
  left: 12%;
  top: 72%;
  z-index: 4;
  width: 58px;
  height: 42px;
  pointer-events: none;
  filter: drop-shadow(0 18px 20px rgba(21, 32, 43, 0.18));
  animation: droneRoute 16s var(--ease-out) infinite;
}

.map-drone__body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 14px;
  border: 1px solid rgba(36, 91, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #dff6ff);
  box-shadow: 0 4px 10px rgba(36, 91, 255, 0.18);
  transform: translate(-50%, -50%);
}

.map-drone__body::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(15, 159, 143, 0.12);
  transform: translate(-50%, -50%);
}

.map-drone__rotor {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(36, 91, 255, 0.2);
  border-top-color: rgba(36, 91, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  animation: rotorSpin 0.5s linear infinite;
}

.map-drone__rotor--tl {
  left: 0;
  top: 0;
}

.map-drone__rotor--tr {
  right: 0;
  top: 0;
}

.map-drone__rotor--bl {
  left: 3px;
  bottom: 0;
}

.map-drone__rotor--br {
  right: 3px;
  bottom: 0;
}

.map-drone__beam {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 38px;
  height: 58px;
  background: radial-gradient(ellipse at top, rgba(36, 91, 255, 0.2), rgba(15, 159, 143, 0.08) 46%, transparent 72%);
  transform: translateX(-50%);
}

@keyframes rotorSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes droneRoute {
  0% {
    left: 9%;
    top: 76%;
    transform: translate(-50%, -50%) rotate(-7deg) scale(0.92);
  }
  18% {
    left: 24%;
    top: 17%;
    transform: translate(-50%, -50%) rotate(4deg) scale(1);
  }
  36% {
    left: 49%;
    top: 12%;
    transform: translate(-50%, -50%) rotate(8deg) scale(0.96);
  }
  55% {
    left: 78%;
    top: 15%;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.9);
  }
  72% {
    left: 88%;
    top: 82%;
    transform: translate(-50%, -50%) rotate(7deg) scale(1.02);
  }
  88% {
    left: 38%;
    top: 82%;
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.96);
  }
  100% {
    left: 9%;
    top: 76%;
    transform: translate(-50%, -50%) rotate(-7deg) scale(0.92);
  }
}

.hero__map-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.map-spot {
  position: absolute;
  left: var(--spot-x);
  top: var(--spot-y);
  z-index: 10;
  --spot-accent: var(--color-primary);
  --spot-accent-2: var(--color-secondary);
  --spot-ring: rgba(36, 91, 255, 0.24);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.map-spot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% + 40px);
  z-index: 1;
  width: 58px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(21, 32, 43, 0.2), rgba(21, 32, 43, 0.06) 54%, transparent 74%);
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.map-spot[data-spot-index="2"] {
  --spot-accent: #0f9f8f;
  --spot-accent-2: #245bff;
  --spot-ring: rgba(15, 159, 143, 0.24);
}

.map-spot[data-spot-index="3"] {
  --spot-accent: #f3a51c;
  --spot-accent-2: #245bff;
  --spot-ring: rgba(243, 165, 28, 0.24);
}

.map-spot[data-spot-index="4"] {
  --spot-accent: #245bff;
  --spot-accent-2: #00a8c8;
  --spot-ring: rgba(36, 91, 255, 0.24);
}

.map-spot[data-spot-index="5"] {
  --spot-accent: #159b82;
  --spot-accent-2: #f3a51c;
  --spot-ring: rgba(21, 155, 130, 0.24);
}

.map-spot[data-spot-index="6"] {
  --spot-accent: #5865f2;
  --spot-accent-2: #0f9f8f;
  --spot-ring: rgba(88, 101, 242, 0.24);
}

.hero__map-wrapper:has(.map-spot:hover) .map-spot:not(:hover) {
  opacity: 0.46;
  filter: grayscale(0.28);
}

.map-spot:hover,
.map-spot--active {
  z-index: 30;
  transform: translate(-50%, -50%) scale(1.08);
}

.map-spot:hover::after,
.map-spot--active::after {
  opacity: 0.72;
  transform: translateX(-50%) scale(1.08);
}

.map-spot__pin {
  position: relative;
  z-index: 2;
  width: 91px;
  height: 91px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--spot-accent) 34%, rgba(255, 255, 255, 0.62));
  border-radius: 24px;
  color: var(--spot-accent);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.16) 32%, transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(237, 246, 255, 0.82));
  box-shadow:
    0 22px 44px rgba(21, 32, 43, 0.18),
    0 0 0 10px rgba(255, 255, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.map-spot__pin::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--spot-accent) 14%, transparent), transparent 42%),
    radial-gradient(circle at 70% 76%, color-mix(in srgb, var(--spot-accent-2) 18%, transparent), transparent 44%);
  opacity: 0.9;
  pointer-events: none;
}

.map-spot__pin::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--spot-accent) 18%, rgba(255, 255, 255, 0.68));
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.map-spot__icon-svg,
.map-spot__icon-img {
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 1;
  stroke: currentColor;
  stroke-width: 1.55;
  overflow: visible;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--spot-accent) 22%, transparent));
}

.map-spot__icon-img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(21, 32, 43, 0.12);
}
.map-spot:hover .map-spot__pin,
.map-spot--active .map-spot__pin {
  color: var(--color-white);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(135deg, var(--spot-accent), var(--spot-accent-2));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 24px 54px color-mix(in srgb, var(--spot-accent) 34%, rgba(21, 32, 43, 0.12)),
    0 0 0 12px rgba(255, 255, 255, 0.36);
  transform: translateY(-3px);
}

.map-spot__ping {
  position: absolute;
  inset: -12px;
  border: 1px solid var(--spot-ring);
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
}

.map-spot:hover .map-spot__ping,
.map-spot--active .map-spot__ping {
  animation: spotPing 1.8s ease-out infinite;
}

@keyframes spotPing {
  0% {
    opacity: 0.75;
    transform: scale(0.92);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

.map-spot__popup {
  position: absolute;
  left: 50%;
  bottom: 108px;
  min-width: 190px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(184, 199, 216, 0.76);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(21, 32, 43, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}

.map-spot[data-spot-index="4"] .map-spot__popup {
  top: 108px;
  bottom: auto;
}

.map-spot:hover .map-spot__popup,
.map-spot--active .map-spot__popup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.map-spot__category {
  color: var(--color-secondary);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
}

.map-spot__name {
  color: var(--color-ink);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.45;
}

/* Affiliate notice */
.affiliate-notice {
  border-top: 1px solid rgba(184, 199, 216, 0.58);
  border-bottom: 1px solid rgba(184, 199, 216, 0.58);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.affiliate-notice__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
}

.affiliate-notice__text {
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.65;
  text-align: center;
}

/* Sections */
.section {
  position: relative;
  padding: 92px 0;
  scroll-margin-top: 92px;
}

.section--bg {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(238, 246, 247, 0.82)),
    linear-gradient(90deg, rgba(36, 91, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px;
  border-top: 1px solid rgba(184, 199, 216, 0.42);
  border-bottom: 1px solid rgba(184, 199, 216, 0.42);
}

.section__inner {
  width: min(100%, 1232px);
  margin: 0 auto;
  padding: 0 32px;
}

.section__header {
  max-width: 760px;
  margin-bottom: 42px;
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--color-secondary);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
}

.section__eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.section__title {
  margin-bottom: 14px;
  color: var(--color-ink);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 0;
}

.section__lead {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.85;
}

.section__footer {
  margin-top: 44px;
  text-align: center;
}

.card {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(184, 199, 216, 0.72);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px rgba(21, 32, 43, 0.06);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out), background 0.28s var(--ease-out);
}

.card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(90deg, var(--card-accent, var(--color-primary)), transparent);
  opacity: 0.9;
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(36, 91, 255, 0.28);
  background: var(--color-white);
  box-shadow: var(--shadow-hover);
}

.card-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 91, 255, 0.18);
  border-radius: 999px;
  color: var(--color-primary);
  background: rgba(36, 91, 255, 0.06);
  transition: transform 0.28s var(--ease-out), color 0.28s var(--ease-out), background 0.28s var(--ease-out);
}

.card:hover .card-arrow {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateX(3px);
}

/* Category cards */
.category-card {
  --card-accent: var(--color-primary);
  padding-bottom: 86px;
}

.category-card:nth-child(3n + 2) {
  --card-accent: var(--color-secondary);
}

.category-card:nth-child(3n) {
  --card-accent: var(--color-accent);
}

.category-card__num {
  margin-bottom: 18px;
  color: var(--card-accent);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.category-card__icon-wrap {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(184, 199, 216, 0.72);
  border-radius: 16px;
  color: var(--card-accent);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(237, 245, 255, 0.9));
  box-shadow:
    0 14px 26px rgba(21, 32, 43, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.28s var(--ease-out), border-color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.category-card__icon-svg,
.category-card__icon-img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  color: currentColor;
  stroke: currentColor;
  stroke-width: 1.75;
  overflow: hidden;
}

.category-card:hover .category-card__icon-wrap {
  border-color: currentColor;
  box-shadow:
    0 18px 34px rgba(21, 32, 43, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
}

.category-card__label {
  margin-bottom: 7px;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0;
}

.category-card__title {
  margin-bottom: 12px;
  color: var(--color-ink);
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.42;
}

.category-card__desc {
  color: var(--color-muted);
  font-size: 0.93rem;
  line-height: 1.75;
}

/* LP cards */
.lp-card {
  --card-accent: var(--color-secondary);
  min-height: 340px;
  padding: 28px;
}

.lp-card__badge-wrap {
  margin-bottom: 18px;
}

.lp-card__title {
  margin-bottom: 12px;
  color: var(--color-ink);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.48;
}

.lp-card__desc {
  margin-bottom: 22px;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  flex: 1 1 auto;
}

.lp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(184, 199, 216, 0.62);
}

.lp-card__tag {
  color: var(--color-muted);
  background: rgba(100, 116, 139, 0.08);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.75rem;
  line-height: 1.35;
}

.lp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 900;
}

.lp-card__link svg {
  transition: transform 0.24s var(--ease-out);
}

.lp-card:hover .lp-card__link svg {
  transform: translateX(4px);
}

/* Ranking */
.ranking-card {
  --card-accent: var(--color-primary);
  padding: 30px;
}

.ranking-card:nth-child(2) {
  --card-accent: var(--color-secondary);
}

.ranking-card:nth-child(3) {
  --card-accent: var(--color-pink);
}

.ranking-card__badge {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 4px 10px;
  border: 1px solid rgba(36, 91, 255, 0.2);
  border-radius: 999px;
  color: var(--card-accent);
  background: rgba(36, 91, 255, 0.07);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0;
}

.ranking-card__title {
  margin-bottom: 24px;
  color: var(--color-ink);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.45;
}

.ranking-card__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
  flex: 1 1 auto;
}

.ranking-card__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.ranking-card__rank {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--color-white);
  font-size: 0.82rem;
  font-weight: 900;
  background: var(--color-primary);
}

.ranking-card__rank--1 {
  background: linear-gradient(135deg, #f2a51a, #ec6f2d);
}

.ranking-card__rank--2 {
  background: linear-gradient(135deg, #0f9f8f, #22b8c8);
}

.ranking-card__rank--3 {
  background: linear-gradient(135deg, #245bff, #6b8cff);
}

.ranking-card__item-name {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.45;
}

.ranking-card__item-desc {
  display: block;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.ranking-card__action {
  margin-top: auto;
}

/* Reviews */
.review-card {
  --card-accent: var(--color-accent);
  min-height: 260px;
  padding-bottom: 86px;
}

.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.review-card__date {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.review-card__title {
  margin-bottom: 12px;
  color: var(--color-ink);
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.5;
}

.review-card__link-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.review-card__desc {
  color: var(--color-muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

/* Lab log */
.lab-card {
  --card-accent: var(--color-secondary);
  padding: 0;
  overflow: hidden;
}

.lab-card:nth-child(2) {
  --card-accent: var(--color-pink);
}

.lab-card:nth-child(3) {
  --card-accent: var(--color-accent);
}

.lab-card:nth-child(4) {
  --card-accent: var(--color-primary);
}

.lab-card__img-placeholder {
  position: relative;
  min-height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--card-accent);
  background:
    linear-gradient(135deg, rgba(36, 91, 255, 0.12), rgba(255, 255, 255, 0.94)),
    linear-gradient(90deg, rgba(21, 32, 43, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.lab-card__img-placeholder::after {
  content: '';
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--card-accent), transparent);
}

.lab-card__content {
  padding: 24px;
}

.lab-card__category {
  display: block;
  margin-bottom: 8px;
  color: var(--card-accent);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0;
}

.lab-card__title {
  margin-bottom: 9px;
  color: var(--color-ink);
  font-size: 1.04rem;
  font-weight: 900;
  line-height: 1.45;
}

.lab-card__desc {
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* Policy */
.policy-card {
  --card-accent: var(--color-primary);
  padding: 26px;
}

.policy-card:nth-child(2n) {
  --card-accent: var(--color-secondary);
}

.policy-card:nth-child(3n) {
  --card-accent: var(--color-accent);
}

.policy-card__icon-wrap {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(184, 199, 216, 0.72);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(236, 244, 255, 0.92));
  box-shadow: 0 12px 24px rgba(21, 32, 43, 0.08);
}

.policy-card__icon {
  font-size: 1.3rem;
  line-height: 1;
}

.policy-card__icon-svg {
  width: 28px;
  height: 28px;
  stroke: var(--card-accent);
  stroke-width: 1.8;
  fill: none;
  overflow: visible;
}

.policy-card__title {
  margin-bottom: 10px;
  color: var(--color-ink);
  font-size: 1.06rem;
  font-weight: 900;
  line-height: 1.48;
}

.policy-card__desc {
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.72;
}

/* About */
.about-container {
  padding: 38px;
  border: 1px solid rgba(184, 199, 216, 0.72);
  border-radius: var(--radius-large);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(246, 250, 252, 0.9));
  box-shadow: var(--shadow-card);
}

.about-info {
  max-width: 860px;
}

.about-info__text {
  margin-bottom: 18px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.9;
}

.about-info__action {
  margin-top: 28px;
}

/* News */
.news-list {
  border-top: 1px solid rgba(184, 199, 216, 0.72);
}

.news-item {
  border-bottom: 1px solid rgba(184, 199, 216, 0.72);
}

.news-item__link {
  display: grid;
  grid-template-columns: 110px auto minmax(0, 1fr) 34px;
  align-items: center;
  gap: 16px;
  padding: 20px 6px;
  transition: background 0.24s var(--ease-out);
}

.news-item__link:hover {
  background: rgba(255, 255, 255, 0.6);
}

.news-item__date {
  color: var(--color-muted);
  font-size: 0.84rem;
  font-weight: 850;
}

.news-item__title {
  color: var(--color-ink);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.55;
  transition: transform 0.24s var(--ease-out), color 0.24s var(--ease-out);
}

.news-item__arrow {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  transition: transform 0.24s var(--ease-out);
}

.news-item__link:hover .news-item__title {
  color: var(--color-primary);
  transform: translateX(4px);
}

.news-item__link:hover .news-item__arrow {
  transform: translateX(3px);
}

/* CTA */
.section--cta {
  padding-bottom: 0;
}

.cta-box {
  position: relative;
  overflow: hidden;
  padding: 58px 42px;
  border-radius: var(--radius-large);
  color: var(--color-white);
  background:
    linear-gradient(135deg, rgba(21, 32, 43, 0.98) 0%, rgba(36, 91, 255, 0.95) 54%, rgba(15, 159, 143, 0.95) 100%);
  box-shadow: 0 28px 70px rgba(21, 32, 43, 0.18);
  text-align: center;
}

.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.28;
  pointer-events: none;
}

.cta-box > * {
  position: relative;
  z-index: 1;
}

.cta-box__eyebrow {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
}

.cta-box__title {
  margin-bottom: 16px;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
}

.cta-box__desc {
  max-width: 640px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.8;
}

.cta-box__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Footer */
.footer {
  margin-top: 92px;
  padding: 68px 0 32px;
  color: rgba(255, 255, 255, 0.76);
  background:
    linear-gradient(180deg, #15202b 0%, #0f1720 100%);
}

.footer__inner {
  width: min(100%, 1232px);
  margin: 0 auto;
  padding: 0 32px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.footer__logo {
  max-width: 330px;
}

.footer__logo-link {
  display: block;
  margin-bottom: 12px;
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.4;
}

.footer__tagline {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.88rem;
  line-height: 1.75;
}

.footer__nav {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer__nav-group {
  min-width: 136px;
}

.footer__nav-title {
  margin-bottom: 16px;
  color: var(--color-white);
  font-size: 0.88rem;
  font-weight: 850;
  letter-spacing: 0;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__nav-list a {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.84rem;
  transition: color 0.22s var(--ease-out);
}

.footer__nav-list a:hover {
  color: var(--color-white);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__notice {
  max-width: 820px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  line-height: 1.65;
  text-align: center;
}

.footer__copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.76rem;
}

/* Reveal */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1180px) {
  .grid--4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__inner-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero__header {
    max-width: 820px;
  }

  .hero__map-wrapper {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 920px) {
  .grid--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    padding: 112px 24px 46px;
  }

  .hero__title {
    font-size: 2.7rem;
  }

  .hero__title-sub {
    font-size: 1.28rem;
  }

  .section {
    padding: 74px 0;
  }

  .section__title {
    font-size: 1.95rem;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding-left: 0;
  }

  .u-sp-only {
    display: block;
  }

  .u-pc-only {
    display: none;
  }

  .sidebar {
    width: 100%;
    height: 72px;
    inset: 0 0 auto 0;
    padding: 0 18px;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid rgba(184, 199, 216, 0.72);
  }

  .sidebar__logo-link {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .sidebar__menu-trigger {
    width: auto;
    flex-direction: row;
    padding: 10px;
  }

  .sidebar__menu-text {
    writing-mode: initial;
    font-size: 0.72rem;
  }

  .sidebar__cta {
    flex-direction: row;
    gap: 8px;
  }

  .sidebar__cta-link {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .mega-nav {
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    padding: 32px 28px;
    transform: translateY(-12px);
    transition: transform 0.34s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  }

  .mega-nav.is-active {
    left: 0;
    transform: translateY(0);
  }

  .hero {
    min-height: auto;
    padding: 116px 20px 42px;
  }

  .hero__title {
    font-size: 2.25rem;
  }

  .hero__title-sub {
    font-size: 1.12rem;
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__map-wrapper {
    aspect-ratio: 4 / 3;
  }

  .hero__map-bg {
    background-position: center;
  }

  .map-drone {
    width: 46px;
    height: 34px;
  }

  .map-spot[data-spot-index="1"] {
  --spot-order: 1;
    left: 21%;
    top: 30%;
  }

  .map-spot[data-spot-index="2"] {
    left: 75%;
    top: 53%;
  }

  .map-spot[data-spot-index="3"] {
    left: 88%;
    top: 33%;
  }

  .map-spot[data-spot-index="4"] {
    left: 52%;
    top: 21%;
  }

  .map-spot[data-spot-index="5"] {
    left: 65%;
    top: 78%;
  }

  .map-spot[data-spot-index="6"] {
    left: 18%;
    top: 59%;
  }

  .map-spot__pin {
    width: 64px;
    height: 64px;
    border-radius: 17px;
  }

  .map-spot::after {
    top: calc(50% + 30px);
    width: 44px;
    height: 11px;
  }

  .map-spot__pin::before {
    inset: 8px;
    border-radius: 13px;
  }

  .map-spot__pin::after {
    inset: 8px;
    border-radius: 13px;
  }

  .map-spot__icon-svg,
.map-spot__icon-img {
    width: 32px;
    height: 32px;
  }

  .map-spot__popup {
    bottom: 84px;
    min-width: 150px;
    padding: 9px 10px;
  }

  .map-spot[data-spot-index="4"] .map-spot__popup {
    top: 84px;
  }

  .map-spot__name {
    font-size: 0.76rem;
  }

  .grid--2col,
  .grid--3col,
  .grid--4col {
    grid-template-columns: 1fr;
  }

  .section__inner,
  .footer__inner {
    padding: 0 20px;
  }

  .section__header {
    margin-bottom: 30px;
  }

  .card {
    padding: 24px;
  }

  .category-card {
    padding-bottom: 78px;
  }

  .lp-card {
    min-height: 0;
  }

  .news-item__link {
    grid-template-columns: 1fr 34px;
    gap: 8px 14px;
    padding: 18px 0;
  }

  .news-item__date,
  .news-item__badge,
  .news-item__title {
    grid-column: 1 / 2;
  }

  .news-item__arrow {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    align-self: center;
  }

  .about-container {
    padding: 26px;
  }

  .cta-box {
    padding: 42px 22px;
  }

  .cta-box__title {
    font-size: 1.55rem;
  }

  .cta-box__actions {
    flex-direction: column;
  }

  .cta-box__actions .btn {
    width: 100%;
  }

  .footer {
    margin-top: 72px;
    padding-top: 52px;
  }

  .footer__top,
  .footer__nav {
    gap: 30px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  .sidebar {
    padding: 0 12px;
  }

  .sidebar__cta {
    display: none;
  }

  .hero {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 28px;
  }

  .hero__title {
    font-size: 1.82rem;
    line-height: 1.24;
  }

  .hero__title-sub {
    font-size: 1rem;
  }

  .hero__desc {
    margin-bottom: 24px;
    font-size: 0.94rem;
  }

  .hero__map-wrapper {
    min-height: 300px;
    aspect-ratio: auto;
  }

  .map-spot__pin {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .map-spot::after {
    top: calc(50% + 22px);
    width: 34px;
    height: 9px;
  }

  .map-spot__pin::before {
    inset: 7px;
    border-radius: 10px;
  }

  .map-spot__pin::after {
    inset: 7px;
    border-radius: 10px;
  }

  .map-spot__icon-svg,
.map-spot__icon-img {
    width: 26px;
    height: 26px;
  }

  .map-drone {
    width: 38px;
    height: 28px;
  }

  .map-spot[data-spot-index="1"] {
  --spot-order: 1;
    left: 22%;
    top: 32%;
  }

  .map-spot[data-spot-index="2"] {
    left: 71%;
    top: 55%;
  }

  .map-spot[data-spot-index="3"] {
    left: 88%;
    top: 35%;
  }

  .map-spot[data-spot-index="4"] {
    left: 51%;
    top: 22%;
  }

  .map-spot[data-spot-index="5"] {
    left: 64%;
    top: 78%;
  }

  .map-spot[data-spot-index="6"] {
    left: 18%;
    top: 59%;
  }

  .section {
    padding: 62px 0;
  }

  .section__title {
    font-size: 1.62rem;
  }

  .section__inner,
  .footer__inner {
    padding: 0 16px;
  }

  .map-spot__popup {
    display: none;
  }

  .map-spot--active .map-spot__popup {
    display: flex;
    top: 70px;
    bottom: auto;
    min-width: 140px;
    max-width: 170px;
    padding: 8px 9px;
    white-space: normal;
  }

  .map-spot--active .map-spot__category {
    font-size: 0.58rem;
  }

  .map-spot--active .map-spot__name {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
  }

  .card:hover,
  .btn:hover,
  .map-spot:hover,
.map-spot--active {
    transform: none;
  }

  .map-drone,
  .map-drone__rotor {
    animation: none !important;
  }
}
/* category service card update */
.section--category {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.96));
}

.section--category .grid--3col {
  gap: 28px;
}

.category-card {
  min-height: 424px;
  padding: 0 0 84px;
  overflow: hidden;
  border-color: rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(21, 32, 43, 0.08);
}

.category-card::before {
  display: none;
}

.category-card__icon-wrap {
  order: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9.8;
  display: block;
  margin: 0 0 22px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #eef4f8;
  box-shadow: none;
}

.category-card__icon-img,
.category-card__icon-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
  transition: transform 0.42s var(--ease-out), filter 0.42s var(--ease-out);
}

.category-card:hover .category-card__icon-wrap {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.category-card:hover .category-card__icon-img {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.02);
}

.category-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  min-width: 48px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 62%, #15202b));
  box-shadow: 0 10px 24px rgba(21, 32, 43, 0.2);
  font-size: 0.76rem;
  line-height: 1;
  text-align: center;
}

.category-card__title {
  order: 2;
  position: relative;
  margin: 0 28px 5px;
  padding-left: 28px;
  color: var(--color-ink);
  font-size: 1.34rem;
  font-weight: 900;
  line-height: 1.35;
}

.category-card__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--card-accent);
}

.category-card__label {
  order: 3;
  margin: 0 28px 12px;
  color: rgba(21, 32, 43, 0.28);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

.category-card__desc {
  order: 4;
  margin: 0 28px;
  color: rgba(21, 32, 43, 0.78);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.85;
}

.category-card .card-arrow {
  right: 26px;
  bottom: 26px;
  border-color: color-mix(in srgb, var(--card-accent) 26%, rgba(184, 199, 216, 0.55));
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 8%, #ffffff);
}

.category-card:hover .card-arrow {
  color: #ffffff;
  background: var(--card-accent);
}

@media (max-width: 1024px) {
  .category-card {
    min-height: 396px;
  }
}

@media (max-width: 768px) {
  .section--category .grid--3col {
    gap: 22px;
  }

  .category-card {
    min-height: 0;
    padding-bottom: 76px;
  }

  .category-card__icon-wrap {
    aspect-ratio: 16 / 8.8;
  }

  .category-card__title {
    margin-right: 24px;
    margin-left: 24px;
    font-size: 1.18rem;
  }

  .category-card__label,
  .category-card__desc {
    margin-right: 24px;
    margin-left: 24px;
  }
}

@media (max-width: 480px) {
  .category-card__icon-wrap {
    aspect-ratio: 16 / 9.4;
    margin-bottom: 18px;
  }

  .category-card__num {
    top: 11px;
    left: 11px;
    min-width: 44px;
    padding: 6px 9px;
  }

  .category-card__title {
    margin-right: 20px;
    margin-left: 20px;
    padding-left: 24px;
  }

  .category-card__label,
  .category-card__desc {
    margin-right: 20px;
    margin-left: 20px;
  }

  .category-card .card-arrow {
    right: 20px;
    bottom: 22px;
  }
}



/* portal-refresh.css */
@charset "UTF-8";

/* 2026-07 portal refresh: bright city hero, animated guidance, alternating bands */
:root {
  --portal-dark: #121318;
  --portal-dark-soft: #1b1d24;
  --portal-paper: #f5f4ee;
  --portal-lime: #c7ff39;
  --portal-cyan: #5cf0ff;
  --portal-blue: #2d63ff;
  --portal-blue-deep: #153b92;
  --portal-violet: #8f6cff;
  --portal-orange: #ff8b65;
}

body {
  background: var(--portal-paper);
  background-image: none;
}

.sidebar {
  color: #fff;
  background: rgba(18, 19, 24, .94);
  border-right-color: rgba(255, 255, 255, .11);
  box-shadow: 12px 0 36px rgba(0, 0, 0, .16);
}

.sidebar__menu-trigger,
.sidebar__menu-text { color: rgba(255, 255, 255, .78); }
.sidebar__cta-link {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}
.sidebar__cta-link:hover { color: var(--portal-lime); border-color: rgba(199, 255, 57, .5); }

/* Full-background city hero */
.hero {
  min-height: 900px;
  padding: 0;
  color: #fff;
  background: var(--portal-dark);
  border-bottom: 0;
  isolation: isolate;
}

.hero::before {
  z-index: 2;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .5;
}

.hero::after {
  content: "AI CREATION PORTAL";
  position: absolute;
  z-index: 2;
  right: -1vw;
  bottom: 4vh;
  color: rgba(255, 255, 255, .045);
  font-size: clamp(72px, 12vw, 188px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.075em;
  white-space: nowrap;
  pointer-events: none;
}

.hero__inner-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: 900px;
  margin: 0;
  padding: 132px clamp(32px, 7vw, 118px) 174px;
  display: flex;
  align-items: center;
}

.hero__header {
  position: relative;
  z-index: 5;
  width: min(67%, 760px);
  max-width: 760px;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(85, 128, 255, .42);
  background: linear-gradient(135deg, rgba(18, 19, 24, .78), rgba(18, 19, 24, .46));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25), 0 0 0 1px rgba(45, 99, 255, .08) inset;
  backdrop-filter: blur(7px);
}

.hero__eyebrow {
  color: var(--portal-dark);
  background: var(--portal-lime);
  border-color: var(--portal-lime);
  box-shadow: none;
}
.hero__eyebrow::before { background: var(--portal-dark); box-shadow: none; }

.hero__title {
  max-width: 700px;
  color: #fff;
  font-size: clamp(3.1rem, 5.7vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.hero__title-line {
  min-height: .98em;
  display: block;
  white-space: normal;
}
.hero__title-sub {
  min-height: 1.35em;
  display: block;
  margin-top: 20px;
  color: var(--portal-lime);
  font-size: clamp(1.15rem, 2vw, 1.9rem);
  letter-spacing: -.02em;
}
.hero__desc {
  min-height: 5.2em;
  max-width: 620px;
  color: rgba(255, 255, 255, .76);
}
.hero__type.is-typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: .88em;
  margin-left: 6px;
  background: var(--portal-lime);
  box-shadow: 0 0 14px rgba(199, 255, 57, .72);
  vertical-align: -.04em;
  animation: typingCaret .7s steps(1) infinite;
}
.hero__desc.hero__type.is-typing::after {
  width: 2px;
  height: 1.1em;
  margin-left: 3px;
  vertical-align: -.18em;
}
.hero__actions {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .65s var(--ease-out);
}
.hero--typing-complete .hero__actions {
  opacity: 1;
  transform: translateY(0);
}
.hero .btn--primary {
  color: var(--portal-dark);
  background: var(--portal-lime);
  box-shadow: 0 18px 42px rgba(199, 255, 57, .16);
}

.hero__map-container {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  pointer-events: none;
}
.hero__map-wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero__map-bg {
  opacity: 1;
  background-size: cover;
  background-position: center 51%;
  filter: saturate(1.08) contrast(.97) brightness(1.24);
  transform: scale(1.015);
}
.hero__map-wrapper:hover .hero__map-bg { transform: scale(1.015); }
.hero__map-overlay {
  z-index: 2;
  background:
    radial-gradient(circle at 84% 10%, rgba(45, 99, 255, .18), transparent 38%),
    linear-gradient(90deg, rgba(18, 19, 24, .5) 0%, rgba(18, 19, 24, .3) 31%, rgba(18, 19, 24, .04) 66%, rgba(18, 19, 24, .02) 100%),
    linear-gradient(180deg, rgba(18, 19, 24, .08), transparent 46%, rgba(18, 19, 24, .2));
}
.hero .map-spot { display: none !important; }
.hero .map-drone {
  display: block !important;
  z-index: 4;
  width: 124px;
  height: 88px;
  filter:
    drop-shadow(0 18px 24px rgba(18, 19, 24, .36))
    drop-shadow(0 0 20px rgba(45, 99, 255, .38));
  animation: portalDroneRoute 18s cubic-bezier(.45, 0, .55, 1) infinite;
}
.map-drone__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.map-drone__rotor-disc {
  transform-box: fill-box;
  transform-origin: center;
  animation: droneRotor .32s linear infinite;
}
.hero .map-drone__beam {
  left: 50%;
  top: 66%;
  width: 94px;
  height: 116px;
  opacity: .48;
  background: radial-gradient(ellipse at top, rgba(89, 223, 241, .32), rgba(45, 99, 255, .1) 46%, transparent 74%);
  transform: translateX(-50%);
}
@keyframes droneRotor {
  to { transform: rotate(360deg); }
}
@keyframes portalDroneRoute {
  0% {
    left: 22%;
    top: 9%;
    transform: translate(-50%, -50%) rotate(-3deg) scale(.9);
  }
  20% {
    left: 48%;
    top: 7%;
    transform: translate(-50%, -50%) rotate(4deg) scale(1);
  }
  40% {
    left: 76%;
    top: 11%;
    transform: translate(-50%, -50%) rotate(-4deg) scale(.94);
  }
  58% {
    left: 88%;
    top: 37%;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.02);
  }
  76% {
    left: 84%;
    top: 68%;
    transform: translate(-50%, -50%) rotate(-4deg) scale(.96);
  }
  90% {
    left: 58%;
    top: 8%;
    transform: translate(-50%, -50%) rotate(3deg) scale(.92);
  }
  100% {
    left: 22%;
    top: 9%;
    transform: translate(-50%, -50%) rotate(-3deg) scale(.9);
  }
}

.hero-network-menu {
  position: absolute;
  z-index: 7;
  top: 28px;
  right: clamp(24px, 3vw, 48px);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(13, 16, 23, .76);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
}
.hero-network-menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .76);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  transition: color .2s ease, background-color .2s ease;
}
.hero-network-menu a span { color: #7fa5ff; }
.hero-network-menu a:hover {
  color: #fff;
  background: rgba(45, 99, 255, .32);
}

.hero-contents-menu {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4.2vw, 72px);
  padding: 18px clamp(24px, 5vw, 72px);
  color: var(--portal-dark);
  background: var(--portal-lime);
  border-top: 3px solid var(--portal-dark);
}
.hero-contents-menu__label {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 13px 28px;
  border-radius: 999px;
  color: #fff;
  background: var(--portal-dark);
  font-size: .94rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.hero-contents-menu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--portal-dark);
  font-size: clamp(.75rem, 1vw, .94rem);
  font-weight: 850;
  letter-spacing: .08em;
  white-space: nowrap;
}
.hero-contents-menu a span { font-weight: 900; }
.hero-contents-menu a:hover { text-decoration: underline; text-underline-offset: 5px; }

.affiliate-notice {
  color: rgba(18, 19, 24, .72);
  background: #f5f4ee;
  border-color: rgba(18, 19, 24, .08);
}
.affiliate-notice__text { color: rgba(18, 19, 24, .64); }

/* Alternating bands: the first content area is light after the city hero. */
.section--category,
.section--lp-works,
.section--review,
.section--policy,
.section--news,
.section--cta {
  background: var(--portal-paper);
  border: 0;
}
.section--review { background: #faf9f5; }
.section--policy { background: #eceff1; }
.section--news { background: #faf9f5; }
.section--category { background: #f5f4ee; }

.section--recommend,
.section--lab-log,
.section--about {
  color: #fff;
  background:
    radial-gradient(circle at 92% 0%, rgba(45, 99, 255, .24), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    var(--portal-dark);
  background-size: auto, 52px 52px, 52px 52px, auto;
}

.section--recommend .section__title,
.section--lab-log .section__title,
.section--about .section__title { color: #fff; }
.section--recommend .section__lead,
.section--lab-log .section__lead,
.section--about .section__lead { color: rgba(255, 255, 255, .66); }
.section--recommend .section__eyebrow,
.section--lab-log .section__eyebrow,
.section--about .section__eyebrow { color: #7fa5ff; }
.section--recommend .section__eyebrow::before,
.section--lab-log .section__eyebrow::before,
.section--about .section__eyebrow::before {
  background: linear-gradient(90deg, var(--portal-blue), var(--portal-cyan));
}
.section--recommend .ranking-card,
.section--lab-log .lab-card,
.section--about .about-container {
  color: var(--portal-dark);
  border-color: rgba(255, 255, 255, .38);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .2);
}

.section--recommend .ranking-card:nth-child(1) { background: #c7ff39; }
.section--recommend .ranking-card:nth-child(2) { background: #59dff1; }
.section--recommend .ranking-card:nth-child(3) { background: #ff765d; }
.section--recommend .ranking-card__badge {
  color: var(--portal-dark);
  background: rgba(255, 255, 255, .3);
  border-color: rgba(18, 19, 24, .18);
}
.section--recommend .ranking-card__title,
.section--recommend .ranking-card__item-name { color: var(--portal-dark); }
.section--recommend .ranking-card__item-desc { color: rgba(18, 19, 24, .7); }
.section--recommend .ranking-card .btn--primary {
  color: #fff;
  background: var(--portal-dark);
  box-shadow: none;
}

.section--lab-log .lab-card:nth-child(1) { background: #c7ff39; }
.section--lab-log .lab-card:nth-child(2) { background: #59dff1; }
.section--lab-log .lab-card:nth-child(3) { background: #ff8a68; }
.section--lab-log .lab-card:nth-child(4) { background: #7fa5ff; }
.section--lab-log .lab-card__img-placeholder {
  color: var(--portal-dark);
  background:
    radial-gradient(circle at 24% 48%, rgba(255, 255, 255, .42) 0 18%, transparent 18.5%),
    linear-gradient(90deg, rgba(18, 19, 24, .08) 1px, transparent 1px);
  background-size: auto, 28px 28px;
}
.section--lab-log .lab-card__img-placeholder::after {
  background: linear-gradient(90deg, var(--portal-dark), transparent);
}
.section--lab-log .lab-card__category,
.section--lab-log .lab-card__title,
.section--lab-log .lab-card[href]::after { color: var(--portal-dark); }
.section--lab-log .lab-card__desc { color: rgba(18, 19, 24, .7); }
.section--about .about-container { background: #dff7ff; }
.section--about .about-info__text { color: rgba(18, 19, 24, .78); }

/* Bright editorial cards sit on the first dark content band. */
.section--category .grid--3col { gap: 24px; }
.category-card {
  min-height: 390px;
  padding: 28px 28px 82px;
  color: var(--portal-dark);
  background: #fff;
  border-color: rgba(184, 199, 216, .72);
  box-shadow: 0 22px 54px rgba(18, 19, 24, .12);
  isolation: isolate;
}
.category-card:nth-child(1) { --card-accent: var(--portal-cyan); }
.category-card:nth-child(2) { --card-accent: var(--portal-lime); }
.category-card:nth-child(3) { --card-accent: #ff5e9e; }
.category-card:nth-child(4) { --card-accent: var(--portal-orange); }
.category-card:nth-child(5) { --card-accent: #68a4ff; }
.category-card:nth-child(6) { --card-accent: var(--portal-violet); }
.category-card::before { display: block; height: 5px; background: linear-gradient(90deg, var(--card-accent), transparent); }
.category-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .46) 40%, rgba(255, 255, 255, .98) 72%, #fff 100%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--card-accent) 24%, transparent), transparent 38%);
  pointer-events: none;
}
.category-card > *:not(.category-card__icon-wrap):not(.category-card__num):not(.card-arrow) { position: relative; z-index: 2; }
.category-card__icon-wrap {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  background: #fff;
}
.category-card__icon-img,
.category-card__icon-svg {
  width: 100%;
  height: 100%;
  opacity: .66;
  object-fit: cover;
  filter: saturate(.84) contrast(1.02);
}
.category-card:hover .category-card__icon-img { transform: scale(1.055); filter: saturate(1) contrast(1.04); }
.category-card__num {
  top: 24px;
  left: 24px;
  color: var(--portal-dark);
  background: var(--card-accent);
  border: 0;
  box-shadow: none;
}
.category-card__label {
  order: 1;
  margin: 4px 0 0 62px;
  color: rgba(18, 19, 24, .52);
  font-size: .72rem;
  letter-spacing: .13em;
}
.category-card__title {
  order: 2;
  margin: auto 0 12px;
  padding: 0;
  color: var(--portal-dark);
  font-size: clamp(1.65rem, 2.4vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.category-card__title::before { display: none; }
.category-card__desc {
  order: 3;
  max-width: 92%;
  margin: 0;
  color: rgba(18, 19, 24, .68);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.72;
}
.category-card .card-arrow {
  z-index: 3;
  right: 25px;
  bottom: 25px;
  color: var(--portal-dark);
  background: var(--card-accent);
  border: 0;
}
.category-card:hover {
  background: #fff;
  border-color: var(--card-accent);
  box-shadow: 0 30px 70px rgba(18, 19, 24, .18);
}

.lab-card[href] { cursor: pointer; }
.lab-card[href]::after {
  content: "VIEW  ↗";
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  color: var(--card-accent);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.about-container { border-radius: 0; box-shadow: 0 24px 60px rgba(18, 19, 24, .08); }
.cta-box {
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(92, 240, 255, .22), transparent 32%),
    linear-gradient(135deg, var(--portal-blue-deep), var(--portal-blue) 54%, #12192f);
}
.footer { margin-top: 0; }

@media (max-width: 1024px) {
  .hero,
  .hero__inner-container { min-height: 860px; }
  .hero__header { width: min(74%, 680px); }
  .hero-network-menu { right: 22px; }
  .hero-network-menu a { padding-inline: 8px; font-size: .62rem; }
  .hero-contents-menu { gap: 24px; }
}

@media (max-width: 768px) {
  .hero,
  .hero__inner-container { min-height: 940px; }
  .hero__inner-container { padding: 142px 18px 142px; align-items: center; }
  .hero__header { width: 100%; padding: 28px 22px; background: rgba(18, 19, 24, .68); }
  .hero__title { font-size: clamp(2.25rem, 10vw, 2.8rem); }
  .hero__title-line { display: block; white-space: nowrap; }
  .hero__title-sub { font-size: clamp(1.05rem, 5.4vw, 1.45rem); }
  .hero__desc { min-height: 8.4em; }
  .hero__map-bg { opacity: 1; background-position: 58% center; filter: saturate(1.06) contrast(.98) brightness(1.16); }
  .hero__map-overlay {
    background:
      linear-gradient(180deg, rgba(18, 19, 24, .2), rgba(18, 19, 24, .04) 45%, rgba(18, 19, 24, .3)),
      linear-gradient(90deg, rgba(18, 19, 24, .34), rgba(18, 19, 24, .05));
  }
  .hero-network-menu {
    top: 76px;
    right: 16px;
    left: 16px;
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: 16px;
    scrollbar-width: none;
  }
  .hero-network-menu::-webkit-scrollbar,
  .hero-contents-menu::-webkit-scrollbar { display: none; }
  .hero-network-menu a { flex: 0 0 auto; }
  .hero-contents-menu {
    min-height: 88px;
    justify-content: flex-start;
    gap: 24px;
    padding: 14px 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero-contents-menu__label { min-height: 48px; padding: 12px 22px; }
  .hero-contents-menu a { flex: 0 0 auto; }
  .hero .map-drone { width: 88px; height: 63px; }
  .hero::after { right: -22vw; bottom: 3vh; font-size: 26vw; }
  .category-card { min-height: 340px; padding: 24px 22px 76px; }
  .category-card__label { margin-left: 58px; }
  .category-card__title,
  .category-card__label,
  .category-card__desc { margin-right: 0; }
  .category-card__title { margin-left: 0; margin-bottom: 10px; }
  .category-card__desc { margin-left: 0; }
}

@media (max-width: 480px) {
  .hero__header { border-left: 0; border-right: 0; }
  .hero__desc { font-size: .9rem; line-height: 1.8; }
  .category-card__num { top: 20px; left: 20px; }
  .category-card .card-arrow { right: 20px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .map-drone,
  .hero .map-drone__rotor,
  .hero .map-drone__rotor-disc {
    animation: none !important;
  }
  .hero .map-drone,
  .hero__actions {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2026-07-18: tighter portal rhythm and more stable Japanese wrapping. */
.hero,.hero__inner-container{min-height:810px}
.hero__inner-container{padding-top:118px;padding-bottom:138px}
.hero__header{width:min(64%,720px);max-width:720px;padding:clamp(26px,3.4vw,46px)}
.hero__title{max-width:650px;font-size:clamp(2.8rem,5vw,5.35rem);line-height:1.02;text-wrap:balance}
.section{padding-top:clamp(68px,7vw,88px);padding-bottom:clamp(68px,7vw,88px)}
.section__header{margin-bottom:34px}
.section__title{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.2;text-wrap:balance}

@media (max-width: 1024px) {
  .hero,.hero__inner-container{min-height:780px}
  .hero__header{width:min(72%,650px)}
}

@media (max-width: 768px) {
  .hero,.hero__inner-container{min-height:820px}
  .hero__inner-container{padding-top:132px;padding-bottom:124px}
  .hero__header{width:100%;padding:24px 20px}
  .hero__title{font-size:clamp(2.1rem,9vw,2.65rem);line-height:1.08}
  .section{padding-top:62px;padding-bottom:62px}
  .section__header{margin-bottom:28px}
  .section__title{font-size:clamp(1.65rem,7.2vw,2rem)}
}

/* 2026-07-20: compact desktop hero so the contents rail is visible at laptop height. */
@media (min-width:769px){.hero,.hero__inner-container{min-height:660px}.hero__inner-container{padding-top:92px;padding-bottom:118px}.hero__header{width:min(61%,650px);max-width:650px;padding:26px 34px}.hero__title{font-size:clamp(2.55rem,4.25vw,4.6rem)}.hero__title-sub{margin-top:12px;font-size:clamp(1rem,1.55vw,1.42rem)}.hero__desc{min-height:4.4em;margin-top:14px;font-size:.92rem;line-height:1.7}.hero__actions{margin-top:18px}.hero-network-menu{top:18px}}

/* 2026-07-20: compact content rhythm across the portal sections. */
.section__lead { max-width: 780px; line-height: 1.65; }
.category-card__desc, .ranking-card__item-desc, .lab-card__desc { line-height: 1.6; }
@media (min-width: 769px) {
  .section { padding-block: 60px; }
  .section__header { margin-bottom: 28px; }
  .category-card { min-height: 370px; }
}

/* Category thumbnails: show the supplied work itself instead of washing it out. */
.section--category .category-card {
  min-height: 430px;
  padding: 0 0 76px;
  overflow: hidden;
}
.section--category .category-card::after { display: none; }
.section--category .category-card__icon-wrap {
  position: relative;
  inset: auto;
  order: 1;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 20px;
  background: #e9eef5;
}
.section--category .category-card__icon-img {
  opacity: 1;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1.05) contrast(1.03);
}
.section--category .category-card:nth-child(3) .category-card__icon-img { object-position: 50% 38%; }
.section--category .category-card:nth-child(5) .category-card__icon-img { object-position: 50% 46%; }
.section--category .category-card:nth-child(6) .category-card__icon-img { object-position: 58% 52%; }
.section--category .category-card__label { order: 2; margin: 0 26px 8px; }
.section--category .category-card__title {
  order: 3;
  margin: 0 26px 8px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.16;
}
.section--category .category-card__desc { order: 4; margin: 0 26px; line-height: 1.58; }
.section--category .category-card__num {
  z-index: 3;
  top: 15px;
  left: 15px;
  box-shadow: 0 9px 22px rgba(18, 19, 24, .2);
}
/* 2026-07-25: top topics for latest AI music and video releases. */
.section--topics { background: #fff; }
.topics-header { margin-bottom: clamp(28px, 4vw, 48px); }
.topics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 30px); }
.topic-card { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid rgba(18, 19, 24, .16); border-radius: 22px; background: var(--portal-paper); box-shadow: 0 18px 42px rgba(18, 19, 24, .08); }
.topic-card__media { position: relative; min-height: 260px; overflow: hidden; background: var(--portal-dark); }
.topic-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.topic-card:hover .topic-card__media img { transform: scale(1.035); }
.topic-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 19, 24, .52), transparent 58%); }
.topic-card__media span { position: absolute; z-index: 1; left: 18px; bottom: 18px; display: inline-flex; min-height: 34px; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--portal-lime); color: var(--portal-dark); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.topic-card__body { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 34px); }
.topic-card__label { margin: 0; color: var(--portal-blue-deep); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.topic-card__body h3 { margin: 0; color: var(--portal-dark); font-size: clamp(25px, 2.4vw, 36px); line-height: 1.2; letter-spacing: -.04em; }
.topic-card__body p:not(.topic-card__label) { margin: 0; color: #555963; line-height: 1.85; }
.topic-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.topic-card__actions a { display: inline-flex; min-height: 42px; align-items: center; padding: 9px 14px; border: 1px solid rgba(18, 19, 24, .18); border-radius: 999px; background: #fff; color: var(--portal-dark); font-size: 12px; font-weight: 800; }
.topic-card--video .topic-card__media span { background: var(--portal-cyan); }
@media (max-width: 980px) { .topics-grid, .topic-card { grid-template-columns: 1fr; } .topic-card__media { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 680px) { .topic-card { border-radius: 16px; } .topic-card__body { padding: 20px; } }

/* site-network.css */
/*
 * MACHI CREATE site network
 * Shared navigation for the portal and its independent sub-pages.
 */

:root {
  --machi-network-blue: #2d63ff;
  --machi-network-cyan: #39d3ee;
  --machi-network-lime: #baff2a;
  --machi-network-ink: #111318;
  --machi-network-muted: #9aa6b8;
  --machi-network-line: rgba(255, 255, 255, 0.14);
  --machi-network-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.machi-network-switcher,
.machi-network-switcher *,
.machi-network-explore,
.machi-network-explore *,
.machi-network-footer,
.machi-network-footer * {
  box-sizing: border-box;
}

.machi-network-switcher {
  position: relative;
  z-index: 260;
  flex: 0 0 auto;
  margin: 0 18px;
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.machi-network-switcher__trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(91, 133, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  background: rgba(13, 18, 31, 0.9);
  box-shadow: 0 10px 30px rgba(11, 16, 28, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  transition: border-color 220ms var(--machi-network-ease), transform 220ms var(--machi-network-ease), box-shadow 220ms var(--machi-network-ease);
}

.machi-network-switcher__trigger:hover,
.machi-network-switcher__trigger[aria-expanded="true"] {
  border-color: var(--machi-network-cyan);
  box-shadow: 0 12px 34px rgba(45, 99, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.machi-network-switcher__mark {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: linear-gradient(145deg, var(--machi-network-blue), var(--machi-network-cyan));
  box-shadow: 0 0 12px rgba(57, 211, 238, 0.62);
}

.machi-network-switcher__label,
.machi-network-switcher__current {
  color: inherit;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.machi-network-switcher__label {
  color: rgba(255, 255, 255, 0.62);
}

.machi-network-switcher__arrow {
  color: var(--machi-network-lime);
  font-size: 11px;
  transition: transform 220ms var(--machi-network-ease);
}

.machi-network-switcher[data-open="true"] .machi-network-switcher__arrow {
  transform: rotate(180deg);
}

.machi-network-switcher__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(126, 164, 255, 0.32);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 0%, rgba(45, 99, 255, 0.38), transparent 42%),
    rgba(13, 18, 31, 0.98);
  box-shadow: 0 28px 70px rgba(6, 9, 18, 0.36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 180ms ease, visibility 180ms ease, transform 220ms var(--machi-network-ease);
}

.machi-network-switcher[data-open="true"] .machi-network-switcher__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.machi-network-switcher__link {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.045);
  text-decoration: none !important;
  transition: border-color 200ms ease, background-color 200ms ease, transform 220ms var(--machi-network-ease);
}

.machi-network-switcher__link:hover {
  border-color: rgba(57, 211, 238, 0.64);
  background: rgba(45, 99, 255, 0.18);
  transform: translateY(-2px);
}

.machi-network-switcher__link[aria-current="page"] {
  border-color: rgba(126, 164, 255, 0.84);
  background: linear-gradient(145deg, rgba(45, 99, 255, 0.72), rgba(29, 75, 190, 0.62));
}

.machi-network-switcher__link small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.machi-network-switcher__link strong {
  color: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.machi-network-explore {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(64px, 8vw, 108px) clamp(20px, 6vw, 88px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(45, 99, 255, 0.42), transparent 32%),
    linear-gradient(rgba(126, 164, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 164, 255, 0.055) 1px, transparent 1px),
    #111318;
  background-size: auto, 56px 56px, 56px 56px, auto;
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.machi-network--portal-shell .machi-network-explore {
  padding-left: max(108px, calc((100vw - 1232px) / 2 + 120px));
}

.machi-network-explore__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.machi-network-explore__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 38px;
}

.machi-network-explore__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #7ea4ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.machi-network-explore__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--machi-network-blue), var(--machi-network-cyan));
}

.machi-network-explore h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.machi-network-explore__lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.85;
}

.machi-network-explore__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.machi-network-explore__card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  text-decoration: none !important;
  transition: border-color 220ms ease, background-color 220ms ease, transform 240ms var(--machi-network-ease);
}

.machi-network-explore__card:hover {
  border-color: rgba(57, 211, 238, 0.7);
  background: rgba(45, 99, 255, 0.17);
  transform: translateY(-4px);
}

.machi-network-explore__card[aria-current="page"] {
  border-color: rgba(126, 164, 255, 0.85);
  background: linear-gradient(145deg, rgba(45, 99, 255, 0.58), rgba(45, 99, 255, 0.14));
}

.machi-network-explore__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #7ea4ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.machi-network-explore__card[aria-current="page"] .machi-network-explore__meta {
  color: var(--machi-network-lime);
}

.machi-network-explore__card strong {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.35;
}

.machi-network-explore__card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
}

.machi-network-footer {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px 30px;
  align-items: center;
  margin: 0 0 34px;
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.machi-network-footer strong {
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.machi-network-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.machi-network-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: inherit !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-decoration: none !important;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.machi-network-footer__links a:hover,
.machi-network-footer__links a[aria-current="page"] {
  border-color: rgba(126, 164, 255, 0.82);
  color: #fff !important;
  background: rgba(45, 99, 255, 0.22);
}

/* The WordPress category hub uses a vertical 88px header on desktop. */
@media (min-width: 761px) {
  body.page-id-60 .site-header .machi-network-switcher {
    position: absolute;
    top: 96px;
    left: 24px;
    width: 40px;
    margin: 0;
  }

  body.page-id-60 .site-header .machi-network-switcher__trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
  }

  body.page-id-60 .site-header .machi-network-switcher__label,
  body.page-id-60 .site-header .machi-network-switcher__current,
  body.page-id-60 .site-header .machi-network-switcher__arrow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.page-id-60 .site-header .machi-network-switcher__mark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
  }

  body.page-id-60 .site-header .machi-network-switcher__menu {
    position: fixed;
    top: 96px;
    right: auto;
    left: 102px;
    width: 330px;
    transform-origin: top left;
  }
}

@media (max-width: 1060px) {
  .machi-network-switcher {
    margin-inline: auto 12px;
  }

  .machi-network-switcher__label {
    display: none;
  }

  .machi-network-explore__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .machi-network-switcher {
    margin: 0 8px 0 auto;
  }

  .machi-network-switcher__trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
  }

  .machi-network-switcher__label,
  .machi-network-switcher__current,
  .machi-network-switcher__arrow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .machi-network-switcher__mark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
  }

  .machi-network-switcher__menu {
    position: fixed;
    top: 72px;
    right: 14px;
    left: 14px;
    width: auto;
    max-height: calc(100svh - 90px);
    overflow: auto;
  }

  .machi-network-explore,
  .machi-network--portal-shell .machi-network-explore {
    padding: 64px 20px;
  }

  .machi-network-explore__head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .machi-network-explore__grid {
    grid-template-columns: 1fr;
  }

  .machi-network-explore__card {
    min-height: 132px;
  }

  .machi-network-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .machi-network-footer__links {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .machi-network-switcher__menu {
    grid-template-columns: 1fr;
  }

  .machi-network-switcher__link {
    min-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .machi-network-switcher *,
  .machi-network-explore__card,
  .machi-network-footer__links a {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* 2026-07-18: compact the WordPress category directory page. */
body.page-id-60 .category-hub-hero{min-height:360px;padding-block:72px}
body.page-id-60 .category-hub-hero__inner{min-height:0}
body.page-id-60 .category-hub-hero h1{font-size:clamp(3rem,6.2vw,6.4rem);line-height:1.02;text-wrap:balance}
body.page-id-60 .category-hub-directory{padding-top:72px;padding-bottom:84px}
body.page-id-60 .category-hub-section-head{margin-bottom:40px}
body.page-id-60 .category-hub-section-head h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1.12;text-wrap:balance}

@media (max-width: 700px) {
  body.page-id-60 .category-hub-hero{min-height:300px;padding-block:54px}
  body.page-id-60 .category-hub-hero h1{font-size:clamp(2.4rem,12vw,3.7rem);line-height:1.08}
  body.page-id-60 .category-hub-directory{padding-top:58px;padding-bottom:68px}
  body.page-id-60 .category-hub-section-head{margin-bottom:32px}
  body.page-id-60 .category-hub-section-head h2{font-size:clamp(1.85rem,9vw,2.6rem)}
}

/* 2026-07-20: cinematic category directory hero */
body.page-id-60 .category-hub-hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(610px,76svh,760px);
  overflow:hidden;
  padding:0;
  background:#0c0e19;
  color:#fff;
}
body.page-id-60 .category-hub-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:
    linear-gradient(90deg,rgba(9,10,22,.94) 0%,rgba(9,10,22,.73) 42%,rgba(9,10,22,.38) 72%,rgba(9,10,22,.55) 100%),
    linear-gradient(180deg,rgba(20,16,45,.3),rgba(7,8,16,.72)),
    url("https://i.ytimg.com/vi/n5D8BkX7TEk/hqdefault.jpg"),
    url("https://i.ytimg.com/vi/11ZbkwyVoBA/hqdefault.jpg"),
    url("https://i.ytimg.com/vi/yIC-owvRjvI/hqdefault.jpg"),
    url("https://i.ytimg.com/vi/SoRgZgya8W0/hqdefault.jpg");
  background-repeat:no-repeat;
  background-position:center,center,left top,50% top,left bottom,right bottom;
  background-size:cover,cover,34% 52%,34% 52%,50% 48%,50% 48%;
  filter:saturate(.72) contrast(1.08);
  transform:scale(1.02);
}
body.page-id-60 .category-hub-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 75% 49%,rgba(58,119,255,.2),transparent 29%);
  background-size:76px 76px,76px 76px,auto;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.35) 72%,#000);
}
body.page-id-60 .category-hub-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.84fr);
  align-items:center;
  gap:clamp(32px,5vw,92px);
  min-height:inherit;
  padding-block:clamp(76px,10vw,128px);
}
body.page-id-60 .category-hub-hero__copy{
  position:relative;
  z-index:2;
  max-width:760px;
}
body.page-id-60 .category-hub-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 17px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  background:#baff28;
  color:#090b13;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.2em;
}
body.page-id-60 .category-hub-hero h1{
  width:min-content;
  min-width:6.3em;
  margin:28px 0 30px;
  color:#fff;
  font-size:clamp(4.5rem,8.3vw,8.6rem);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.075em;
  text-wrap:balance;
  text-shadow:0 8px 32px rgba(0,0,0,.28);
}
body.page-id-60 .category-hub-hero__copy>p{
  max-width:520px;
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:clamp(1rem,1.3vw,1.24rem);
  font-weight:700;
  line-height:1.8;
}
body.page-id-60 .category-hub-hero__visual{
  position:relative;
  z-index:2;
  width:min(41vw,560px);
  aspect-ratio:1;
  justify-self:end;
  display:block;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(9,12,28,.92) 0 35%,transparent 36%),
    repeating-radial-gradient(circle,transparent 0 19%,rgba(255,255,255,.18) 19.2% 19.45%,transparent 19.7% 27%),
    conic-gradient(from 225deg,#7d78ff,#52dbff 31%,#baff28 61%,#3f75ff 82%,#7d78ff);
  box-shadow:0 0 0 8px rgba(78,117,255,.18),0 0 42px rgba(84,213,255,.45),0 0 86px rgba(89,108,255,.25);
  animation:categoryHubFloat 7s ease-in-out infinite alternate;
}
body.page-id-60 .category-hub-hero__visual::before{
  content:"EXPLORE";
  position:absolute;
  inset:31%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#baff28;
  color:#090b13;
  font-size:clamp(.72rem,1vw,.9rem);
  font-weight:950;
  letter-spacing:.2em;
  box-shadow:0 0 34px rgba(186,255,40,.32);
}
body.page-id-60 .category-hub-hero__visual::after{
  content:"AI  /  GEAR  /  CARE  /  LIFE";
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  width:max-content;
  color:rgba(255,255,255,.72);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.16em;
}
body.page-id-60 .category-hub-hero__visual>span{
  position:absolute;
  display:grid;
  place-items:center;
  width:21%;
  aspect-ratio:1/.46;
  border:1px solid rgba(255,255,255,.66);
  background:linear-gradient(135deg,rgba(82,220,255,.82),rgba(109,102,255,.72));
  color:#fff;
  font-size:clamp(.62rem,1vw,.82rem);
  font-weight:950;
  letter-spacing:.08em;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
body.page-id-60 .category-hub-hero__visual>span:nth-child(1){left:16%;top:38%;transform:rotate(-18deg)}
body.page-id-60 .category-hub-hero__visual>span:nth-child(2){left:31%;top:20%;transform:rotate(-9deg)}
body.page-id-60 .category-hub-hero__visual>span:nth-child(3){right:17%;top:29%;transform:rotate(17deg)}
body.page-id-60 .category-hub-hero__visual>span:nth-child(4){right:14%;bottom:26%;transform:rotate(25deg)}
@keyframes categoryHubFloat{from{transform:translateY(-8px) rotate(-1deg)}to{transform:translateY(10px) rotate(1deg)}}

@media (max-width:900px){
  body.page-id-60 .category-hub-hero{min-height:700px}
  body.page-id-60 .category-hub-hero__inner{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:20px}
  body.page-id-60 .category-hub-hero h1{font-size:clamp(4rem,10vw,6.4rem)}
  body.page-id-60 .category-hub-hero__visual{width:min(43vw,440px)}
}
@media (max-width:700px){
  body.page-id-60 .category-hub-hero{min-height:auto;padding:0}
  body.page-id-60 .category-hub-hero::before{background-position:center,center,left top,right top,left bottom,right bottom;background-size:cover,cover,50% 50%,50% 50%,50% 50%,50% 50%}
  body.page-id-60 .category-hub-hero__inner{grid-template-columns:1fr;gap:42px;padding:84px 20px 76px}
  body.page-id-60 .category-hub-hero__copy{max-width:none}
  body.page-id-60 .category-hub-hero h1{min-width:0;width:auto;margin:22px 0 24px;font-size:clamp(3.45rem,17vw,5.4rem);line-height:.9}
  body.page-id-60 .category-hub-hero__copy>p{font-size:.98rem;line-height:1.75}
  body.page-id-60 .category-hub-hero__visual{width:min(88vw,390px);justify-self:center}
  body.page-id-60 .category-hub-eyebrow{min-height:34px;font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){body.page-id-60 .category-hub-hero__visual{animation:none}}
/* 2026-07-20: shared six-page rail and laptop-height hero rhythm. */
.machi-network-rail,.machi-network-rail *{box-sizing:border-box}
.machi-network--shared-rail{padding-left:88px!important}
.machi-network--shared-rail>.site-header{left:88px!important}
.machi-network-rail{position:fixed;z-index:10000;inset:0 auto 0 0;width:88px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:28px 0;color:#fff;background:#1a1c22;border-right:1px solid rgba(255,255,255,.12);box-shadow:12px 0 36px rgba(0,0,0,.16);font-family:"Inter","Noto Sans JP",sans-serif}
.machi-network-rail__logo{width:52px;height:58px;display:grid;place-items:center;border-radius:18px;color:#fff!important;background:linear-gradient(145deg,#2149b7,#2d63ff 55%,#08a9bd);box-shadow:0 12px 30px rgba(45,99,255,.34);font-size:24px;font-weight:950;text-decoration:none!important}
.machi-network-rail__trigger{display:flex;align-items:center;gap:11px;padding:0;border:0;color:rgba(255,255,255,.78);background:transparent;cursor:pointer;font:850 10px/1 "Inter",sans-serif;letter-spacing:.08em;writing-mode:vertical-rl}
.machi-network-rail__close{position:relative;width:26px;height:26px;display:block;writing-mode:horizontal-tb}
.machi-network-rail__close::before,.machi-network-rail__close::after{content:"";position:absolute;left:2px;top:12px;width:24px;height:2px;border-radius:99px;background:currentColor;transition:transform .25s ease}
.machi-network-rail__close::before{transform:rotate(45deg)}.machi-network-rail__close::after{transform:rotate(-45deg)}
.machi-network-rail:not(.is-open) .machi-network-rail__close::before{transform:translateY(-4px)}.machi-network-rail:not(.is-open) .machi-network-rail__close::after{transform:translateY(4px)}
.machi-network-rail__actions{display:grid;gap:14px}.machi-network-rail__actions a{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:14px;color:#fff!important;background:rgba(255,255,255,.08);font-size:22px;text-decoration:none!important;transition:color .2s,border-color .2s,transform .2s}.machi-network-rail__actions a:hover{color:#baff2a!important;border-color:#baff2a;transform:translateY(-2px)}
.machi-network-drawer{position:fixed;z-index:2;inset:0 auto 0 88px;width:min(446px,calc(100vw - 88px));padding:68px 54px;overflow-y:auto;color:#15202b;background:linear-gradient(135deg,#fff,#eef5f8);box-shadow:30px 0 70px rgba(6,9,18,.24);opacity:0;visibility:hidden;transform:translateX(-24px);transition:opacity .22s ease,visibility .22s ease,transform .3s var(--machi-network-ease)}
.machi-network-rail.is-open .machi-network-drawer{opacity:1;visibility:visible;transform:none}
.machi-network-drawer__head{display:grid;gap:4px;margin-bottom:54px}.machi-network-drawer__head strong{color:#2d63ff;font-size:38px;line-height:1}.machi-network-drawer__head span{color:#64748b;font-size:14px;font-weight:800}
.machi-network-drawer nav{display:grid}.machi-network-drawer nav a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;border-bottom:1px solid #bfd0e2;color:#15202b!important;font-size:21px;font-weight:900;text-decoration:none!important;transition:color .2s,padding .2s}.machi-network-drawer nav a:hover,.machi-network-drawer nav a[aria-current="page"]{padding-left:10px;color:#2d63ff!important}.machi-network-drawer nav small{color:#8b9bad;font-size:9px;letter-spacing:.1em}
.machi-network-rail__backdrop{position:fixed;z-index:1;inset:0 0 0 88px;border:0;background:rgba(8,12,21,.48);opacity:0;visibility:hidden;cursor:pointer;transition:opacity .22s,visibility .22s}.machi-network-rail.is-open .machi-network-rail__backdrop{opacity:1;visibility:visible}
body.machi-network-menu-open{overflow:hidden}
body.page-id-60 .category-hub-hero{min-height:clamp(520px,68svh,600px)}
body.page-id-60 .category-hub-hero__inner{padding-block:clamp(58px,7vw,84px)}
body.page-id-60 .category-hub-hero h1{font-size:clamp(3.8rem,7vw,7rem);margin-block:22px 24px}
body.page-id-60 .category-hub-hero__visual{width:min(36vw,440px)}
@media(max-width:900px){.machi-network--shared-rail{padding-left:68px!important}.machi-network--shared-rail>.site-header{left:68px!important}.machi-network-rail{width:68px;padding-block:20px}.machi-network-rail__logo{width:44px;height:48px;border-radius:14px;font-size:20px}.machi-network-rail__actions a{width:44px;height:44px}.machi-network-drawer{left:68px;width:min(420px,calc(100vw - 68px));padding:54px 38px}.machi-network-rail__backdrop{left:68px}body.page-id-60 .category-hub-hero{min-height:560px}body.page-id-60 .category-hub-hero h1{font-size:clamp(3.5rem,9vw,5.8rem)}}
@media(max-width:700px){.machi-network--shared-rail{padding-left:0!important}.machi-network--shared-rail>.site-header{left:0!important}.machi-network-rail{inset:14px auto auto 12px;width:52px;height:160px;padding:8px 0 10px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(18,19,24,.94);box-shadow:0 14px 36px rgba(0,0,0,.24);backdrop-filter:blur(16px)}.machi-network-rail__logo{width:38px;height:40px;border-radius:12px;font-size:17px}.machi-network-rail__trigger{gap:6px}.machi-network-rail__close{width:20px;height:20px}.machi-network-rail__close::before,.machi-network-rail__close::after{left:1px;top:9px;width:18px}.machi-network-rail__actions{display:none}.machi-network-drawer{left:0;width:min(390px,calc(100vw - 24px));padding:58px 28px 36px}.machi-network-rail__backdrop{left:0}.machi-network-drawer nav a{min-height:64px;font-size:18px}}
/* 2026-07-20: category hero follow-up for short laptop viewports. */
@media(min-width:901px){body.page-id-60 .category-hub-hero{min-height:500px}body.page-id-60 .category-hub-hero__inner{min-height:500px;box-sizing:border-box;padding-block:42px}body.page-id-60 .category-hub-hero h1{font-size:clamp(3.45rem,6vw,6.15rem);margin-block:18px 20px}body.page-id-60 .category-hub-hero__visual{width:min(31vw,380px)}}
@media(max-width:700px){body.page-id-60 .category-hub-hero{min-height:auto}}

.machi-network--shared-rail .portal-index-rail{display:none!important}

/* 2026-07-20: keep nested page headers clear of the shared navigation rail. */
@media(min-width:901px){body.machi-network--shared-rail .site-header{left:88px!important;right:0!important;width:calc(100% - 88px)!important;box-sizing:border-box}}
@media(max-width:900px) and (min-width:701px){body.machi-network--shared-rail .site-header{left:68px!important;right:0!important;width:calc(100% - 68px)!important;box-sizing:border-box}}
@media(max-width:700px){body.machi-network--shared-rail .site-header{left:0!important;right:0!important;width:100%!important;padding-left:78px!important;box-sizing:border-box}}
@media(max-height:760px) and (min-width:701px){.machi-network-drawer{padding-top:38px;padding-bottom:32px}.machi-network-drawer__head{margin-bottom:24px}.machi-network-drawer nav a{min-height:56px}}

/* 2026-07-20: compact content rhythm for the category directory. */
body.page-id-60 .category-hub-directory { padding-top: 54px; padding-bottom: 64px; }
body.page-id-60 .category-hub-section-head { margin-bottom: 30px; }
body.page-id-60 .category-hub-section-head h2 { font-size: 2.8rem; line-height: 1.12; }
body.page-id-60 .category-hub-section-head p { max-width: 760px; line-height: 1.65; }
@media (max-width: 700px) {
  body.page-id-60 .category-hub-directory { padding-top: 46px; padding-bottom: 54px; }
  body.page-id-60 .category-hub-section-head h2 { font-size: 2rem; }
}

/* 2026-07-20: contact page uses the portal navigation instead of the article theme sidebar. */
body.page-id-110 .site-header,
body.page-id-110 .mobile-search,
body.page-id-110 .content-wrap > aside.sidebar {
  display: none !important;
}
body.page-id-110 .content-wrap {
  display: block !important;
}
body.page-id-110 .content-wrap > main.main-content {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin-inline: auto !important;
}

@media (max-width: 700px) {
  body.page-id-110 .content-wrap > main.main-content {
    width: 100% !important;
  }
}
/* 2026-07-20: shared rail replaces the legacy theme header. */
body.machi-network--shared-rail > .site-header {
  display: none !important;
}

/* 2026-07-20: portal footer alignment and compact layout. */
body[data-machi-network-page="portal"] .footer{width:calc(100% - 88px);margin:0 0 0 88px;box-sizing:border-box}
body[data-machi-network-page="portal"] .footer>.machi-network-footer{width:min(calc(100% - 64px),1232px);margin:0 auto 44px;padding-bottom:28px}
body[data-machi-network-page="portal"] .footer__top{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);align-items:start;gap:56px}
body[data-machi-network-page="portal"] .footer__nav{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:32px}
@media(max-width:900px){body[data-machi-network-page="portal"] .footer{width:100%;margin-left:0}body[data-machi-network-page="portal"] .footer>.machi-network-footer{width:min(calc(100% - 40px),1232px)}body[data-machi-network-page="portal"] .footer__top{grid-template-columns:1fr;gap:34px}}
@media(max-width:620px){body[data-machi-network-page="portal"] .footer>.machi-network-footer{width:calc(100% - 32px)}body[data-machi-network-page="portal"] .footer__inner{padding-inline:20px}body[data-machi-network-page="portal"] .footer__nav{grid-template-columns:1fr 1fr;gap:30px 22px}}
/* 2026-07-25: category hub topics. */
body.page-id-60 .machi-category-topics{padding:54px clamp(20px,6vw,88px);background:#f4f7fb;color:#111318;font-family:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.page-id-60 .machi-category-topics__inner{width:min(1180px,100%);margin:0 auto}
body.page-id-60 .machi-category-topics__head{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:14px 32px;align-items:end;margin-bottom:26px}
body.page-id-60 .machi-category-topics__head p{grid-column:1/-1;margin:0;color:#2d63ff;font-size:11px;font-weight:900;letter-spacing:.16em}
body.page-id-60 .machi-category-topics__head h2{margin:0;font-size:clamp(2.1rem,4.2vw,4rem);line-height:1.05;letter-spacing:-.055em}
body.page-id-60 .machi-category-topics__head span{color:#64748b;font-size:14px;font-weight:700;line-height:1.75}
body.page-id-60 .machi-category-topics__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.page-id-60 .machi-category-topics__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);overflow:hidden;border:1px solid rgba(17,19,24,.12);border-radius:18px;background:#fff;color:#111318!important;text-decoration:none!important;box-shadow:0 18px 45px rgba(15,23,42,.08);transition:transform .22s ease,box-shadow .22s ease}
body.page-id-60 .machi-category-topics__card:hover{transform:translateY(-3px);box-shadow:0 24px 58px rgba(15,23,42,.12)}
body.page-id-60 .machi-category-topics__card img{grid-row:1/5;width:100%;height:100%;min-height:220px;object-fit:cover;background:#111318}
body.page-id-60 .machi-category-topics__card strong{display:block;margin:24px 22px 8px;font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.22;letter-spacing:-.035em}
body.page-id-60 .machi-category-topics__card small{display:block;margin:0 22px;color:#64748b;font-size:12px;font-weight:650;line-height:1.75}
body.page-id-60 .machi-category-topics__card b{display:block;margin:auto 22px 22px;color:#2d63ff;font-size:12px;font-weight:900;letter-spacing:.04em}
@media(max-width:1060px){body.page-id-60 .machi-category-topics__grid{grid-template-columns:1fr}body.page-id-60 .machi-category-topics__card{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr)}}
@media(max-width:700px){body.page-id-60 .machi-category-topics{padding:42px 20px}body.page-id-60 .machi-category-topics__head{grid-template-columns:1fr;margin-bottom:22px}body.page-id-60 .machi-category-topics__grid{gap:12px}body.page-id-60 .machi-category-topics__card{grid-template-columns:1fr;border-radius:16px}body.page-id-60 .machi-category-topics__card img{grid-row:auto;min-height:0;aspect-ratio:16/9}body.page-id-60 .machi-category-topics__card strong{margin:20px 18px 8px}body.page-id-60 .machi-category-topics__card small{margin-inline:18px}body.page-id-60 .machi-category-topics__card b{margin:18px}}
/* 2026-07-25: auto WordPress topics. */
.machi-auto-topics,.machi-auto-topics *{box-sizing:border-box}
.machi-auto-topics{padding:clamp(52px,7vw,82px) clamp(20px,6vw,88px)!important;background:#f4f7fb!important;color:#111318!important;font-family:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
.machi-auto-topics__inner{width:min(1180px,100%);margin:0 auto}
.machi-auto-topics__head{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:12px 32px;align-items:end;margin-bottom:28px}
.machi-auto-topics__head p{grid-column:1/-1;margin:0;color:#2d63ff;font-size:11px;font-weight:900;letter-spacing:.16em}
.machi-auto-topics__head h2{margin:0;color:#111318;font-size:clamp(2rem,4.2vw,4.1rem);font-weight:950;line-height:1.04;letter-spacing:-.055em}
.machi-auto-topics__head span{color:#64748b;font-size:14px;font-weight:700;line-height:1.75}
.machi-auto-topics__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.machi-auto-topics__card{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.74fr);overflow:hidden;border:1px solid rgba(17,19,24,.12);border-radius:18px;background:#fff;color:#111318;box-shadow:0 18px 45px rgba(15,23,42,.08)}
.machi-auto-topics__media{position:relative;min-height:230px;display:block;overflow:hidden;background:#111318;color:#fff;text-decoration:none!important}
.machi-auto-topics__media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.machi-auto-topics__media:hover img{transform:scale(1.035)}
.machi-auto-topics__media span{position:absolute;left:16px;bottom:16px;padding:8px 10px;border-radius:999px;background:#baff2a;color:#111318;font-size:10px;font-weight:900;letter-spacing:.1em}
.machi-auto-topics__placeholder{height:100%;min-height:230px;display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:.14em}
.machi-auto-topics__copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:24px 22px}
.machi-auto-topics__copy>p:first-child{margin:0 0 10px;color:#2d63ff;font-size:10px;font-weight:900;letter-spacing:.12em}
.machi-auto-topics__copy h3{margin:0 0 12px;color:#111318;font-size:clamp(1.25rem,2.2vw,1.8rem);font-weight:900;line-height:1.22;letter-spacing:-.035em}
.machi-auto-topics__copy h3 a{color:inherit!important;text-decoration:none!important}
.machi-auto-topics__copy>p:not(:first-child){margin:0 0 20px;color:#64748b;font-size:12px;font-weight:650;line-height:1.75}
.machi-auto-topics__link{margin-top:auto;color:#2d63ff!important;font-size:12px;font-weight:900;letter-spacing:.04em;text-decoration:none!important}
@media(max-width:1060px){.machi-auto-topics__grid{grid-template-columns:1fr}.machi-auto-topics__card{grid-template-columns:minmax(0,1fr) minmax(260px,.78fr)}}
@media(max-width:700px){.machi-auto-topics{padding:42px 20px!important}.machi-auto-topics__head{grid-template-columns:1fr;gap:10px;margin-bottom:22px}.machi-auto-topics__grid{gap:12px}.machi-auto-topics__card{grid-template-columns:1fr;border-radius:16px}.machi-auto-topics__media{min-height:0;aspect-ratio:16/9}.machi-auto-topics__copy{padding:20px 18px}.machi-auto-topics__link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding-top:12px;border-top:1px solid rgba(17,19,24,.12)}}