/* カラーパレット */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

:root {
  /* Colors */
  --color-navy: #003f73;
  --color-navy-rgb: 26, 54, 93;
  --color-navy-dark: #0f2340;
  --color-navy-light: #2c4a7c;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-gray-light: #f8fafc;
  --color-gray: #e2e8f0;
  --color-gray-medium: #cbd5e1;
  --color-gray-dark: #64748b;
  --color-text: #1e293b;
  --color-accent: #3b82f6;
  --color-brown: #8B7355;
  --color-red: #e53e3e;
  --color-red-dark: #c53030;

  /* Fonts */
  --font-en: "Inter", "Noto Sans JP", sans-serif;

  /* Spacing */
  --width-container: 1440px;
  --spacing-gutter: clamp(24px, 5vw, 60px);
  --header-height: 57px; /* ヘッダーの固定高さ (32px + 24px + 1px) */

  /* Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 8px;
  --radius-pill: 9999px;
  --radius-round: 50%;
}

/* 共通コンテナ定義（詳細度0で定義） */
:where(.header-inner, .hero-inner, .inner-cmn, .content-inner) {
  inline-size: 100%;
  max-inline-size: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* 共通背景テキスト装飾 */
.bg-text-decoration {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -40%);
  font-size: clamp(112px, 18vw, 200px);
  font-weight: 900;
  color: rgba(0, 0, 0, 0.03);
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  font-family: var(--font-en);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: #fff;
}

/* Base Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Bootstrapのモーダルが誤表示されないよう明示的に非表示を保証 */
.modal {
  display: none;
}
.modal.show {
  display: block;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  text-decoration: none;
}

img {
  max-inline-size: 100%;
  block-size: auto;
  vertical-align: bottom;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ==============================================
   ヘッダー
   ============================================== */
.header-new {
  background: var(--color-white);
  padding-block: 20px;
  border-bottom: 1px solid var(--color-gray);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}

body#page-index .top-renewal-home {
  background: #ffffff;
}

body#page-index .top-renewal-home__hero {
  margin-block-end: 0;
}

body#page-index .top-renewal-home .compare-hero-shell {
  padding-block: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 32px);
  background-color: #ffffff;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.58)),
    repeating-linear-gradient(to right, rgba(26, 54, 93, 0.09) 0, rgba(26, 54, 93, 0.09) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(to bottom, rgba(26, 54, 93, 0.09) 0, rgba(26, 54, 93, 0.09) 1px, transparent 1px, transparent 28px);
}

body#page-index .top-renewal-home .compare-hero-shell .hero-section-new {
  overflow: hidden;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 5vw, 60px);
}

body#page-index .top-renewal-home .compare-hero-shell .hero-content {
  flex: 1;
  max-inline-size: 540px;
  text-align: start;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-title {
  margin-block-end: 16px;
  color: #1a365d;
  font-size: clamp(1.45rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-subtitle {
  margin-block-end: 16px;
  color: #475569;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.7;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
  padding-inline: 32px;
  border-radius: var(--radius-pill);
  background: #1a365d;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-btn:hover {
  background: #102744;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-image {
  flex: 1;
  max-inline-size: 420px;
  text-align: center;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-image img {
  max-inline-size: 100%;
  block-size: auto;
}

body#page-index .top-renewal-home .top-home-seminar,
body#page-index .top-renewal-home .news-topics-section,
body#page-index .top-renewal-home .pickup-category-section,
body#page-index .top-renewal-home .top-home-media {
  padding-block: 4rem;
}

body#page-index .top-renewal-home .top-home-seminar__header,
body#page-index .top-renewal-home .news-topics-overview,
body#page-index .top-renewal-home .top-home-media__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-end: 2.5rem;
}

body#page-index .top-renewal-home .section-link-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 40px;
  padding-block: 8px;
  padding-inline: 16px;
  border: 1px solid #1a365d;
  border-radius: var(--radius-pill);
  background: #1a365d;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body#page-index .top-renewal-home .top-home-section-copy {
  display: flex;
  flex-direction: column;
}

body#page-index .top-renewal-home .top-home-section-kicker {
  margin: 0 0 12px;
  color: #ff7f50;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-en);
  letter-spacing: 0.18em;
}

body#page-index .top-renewal-home .top-home-section-title {
  margin: 0;
  color: #1a365d;
  font-family: var(--font-en);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body#page-index .top-renewal-home .top-home-section-title--seminar .top-home-section-title__break {
  display: inline-block;
  margin-inline-start: 0.35em;
}

body#page-index .top-renewal-home .top-home-section-title--pickup .top-home-section-title__break {
  display: block;
}

body#page-index .top-renewal-home .top-home-section-lead {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

body#page-index .top-renewal-home .section-link-solid:hover {
  background: #27466e;
  border-color: #27466e;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -18px rgba(26, 54, 93, 0.35);
}

body#page-index .top-renewal-home .news-topics-eyebrow,
body#page-index .top-renewal-home .pickup-category-kicker {
  margin: 0 0 12px;
  color: #ff7f50;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-en);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body#page-index .top-renewal-home .news-topics-title,
body#page-index .top-renewal-home .pickup-category-title,
body#page-index .top-renewal-home .title-en {
  margin: 0;
  color: #1a365d;
  font-family: var(--font-en);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body#page-index .top-renewal-home .news-topics-lead,
body#page-index .top-renewal-home .pickup-category-text,
body#page-index .top-renewal-home .title-ja {
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.7;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge {
  flex: 0 0 auto;
  min-inline-size: 4.5rem;
  min-block-size: 4.5rem;
  padding-block: 0.6rem;
  padding-inline: 0.8rem;
  border-radius: var(--radius-2xl);
  background: #0f172a;
  color: #fff;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge .date-main {
  font-size: 1.25rem;
  font-weight: 800;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge .weekday {
  margin-block-start: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-time-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-inline-size: 0;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-time-info span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-status-inline {
  inline-size: fit-content;
  min-block-size: 1.9rem;
  padding-block: 0.25rem;
  padding-inline: 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
}

body#page-index .top-renewal-home .top-home-seminar-card .status-open {
  background: rgba(14, 116, 144, 0.1);
  color: #0f766e;
}

body#page-index .top-renewal-home .top-home-seminar-card .status-critical {
  background: rgba(185, 28, 28, 0.1);
  color: #b91c1c;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body#page-index .top-renewal-home .top-home-seminar-card .card-title {
  margin-block: 1rem 0;
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.65;
}

body#page-index .top-renewal-home .top-home-seminar-card .card-meta-bottom {
  margin-block-start: auto;
  padding-block-start: 0.95rem;
  border-block-start: 1px solid rgba(15, 23, 42, 0.08);
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-footer-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature {
  min-inline-size: 0;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-end: 0.9rem;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-feature-kicker::before {
  content: "";
  inline-size: 2.5rem;
  block-size: 1px;
  background: currentColor;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .card-title {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .card-title {
  font-size: 0.98rem;
}

body#page-index .top-renewal-home .news-topics-overview {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: clamp(1.5rem, 3vw, 2rem);
}

body#page-index .top-renewal-home .news-topics-eyebrow {
  margin: 0;
  color: #ea580c;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

body#page-index .top-renewal-home .news-topics-title {
  margin-block: 0.4rem 0.35rem;
  color: #0f172a;
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

body#page-index .top-renewal-home .news-topics-lead {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.7;
}

body#page-index .top-renewal-home .news-topics-link {
  color: #ffffff;
}

body#page-index .top-renewal-home .news-stage {
  position: relative;
  isolation: isolate;
  margin-block-end: 2rem;
}

body#page-index .top-renewal-home .news-stage::before {
  content: "";
  position: absolute;
  inset-block-start: -2rem;
  inset-block-end: -2.5rem;
  inset-inline-start: 4rem;
  inset-inline-end: 3rem;
  background: #f3f3f1;
  border-radius: var(--radius-2xl);
  z-index: -1;
}

body#page-index .top-renewal-home .news-stage-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem 3rem;
  align-items: start;
}

body#page-index .top-renewal-home .topics-area,
body#page-index .top-renewal-home .news-list-area {
  grid-column: span 6 / span 6;
}

body#page-index .top-renewal-home .topics-area {
  inline-size: 100%;
  min-inline-size: 0;
}

body#page-index .top-renewal-home .topics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

body#page-index .top-renewal-home .topics-mobile-swiper {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: visible;
}

body#page-index .top-renewal-home .topics-mobile-swiper .swiper-wrapper.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

body#page-index .top-renewal-home .topics-mobile-swiper .swiper-slide.topics-slide {
  block-size: auto;
}

body#page-index .top-renewal-home .topics-banner {
  display: block;
  color: inherit;
  inline-size: 100%;
  min-inline-size: 0;
  text-decoration: none;
}

body#page-index .top-renewal-home .topics-image {
  position: relative;
  overflow: hidden;
  margin-block-end: 16px;
  border-radius: var(--radius-xl);
  background: #eff6ff;
  aspect-ratio: 16 / 10;
}

body#page-index .top-renewal-home .topics-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

body#page-index .top-renewal-home .topics-banner:hover .topics-image img {
  transform: scale(1.05);
}

body#page-index .top-renewal-home .topics-text {
  color: #0f172a;
}

body#page-index .top-renewal-home .topics-headline {
  margin: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  transition: color 0.2s ease;
}

body#page-index .top-renewal-home .topics-banner:hover .topics-headline {
  color: #ff7f50;
}

body#page-index .top-renewal-home .news-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body#page-index .top-renewal-home .news-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
  padding-inline: 16px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  transition: all 0.3s ease;
}

body#page-index .top-renewal-home .news-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

body#page-index .top-renewal-home .news-thumb {
  inline-size: 108px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #eff6ff;
  aspect-ratio: 4 / 3;
}

body#page-index .top-renewal-home .news-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

body#page-index .top-renewal-home .news-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}

body#page-index .top-renewal-home .news-date {
  color: #888;
  font-size: 12px;
}

body#page-index .top-renewal-home .news-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

body#page-index .top-renewal-home .news-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
}

body#page-index .top-renewal-home .top-home-news-empty,
body#page-index .top-renewal-home .top-home-media-empty {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1.5rem;
  border: 1px dashed rgba(14, 116, 144, 0.24);
  border-radius: var(--radius-2xl);
  background: rgba(240, 249, 255, 0.7);
  color: #0f766e;
  font-weight: 700;
  text-align: center;
}

body#page-index .top-renewal-home .top-home-media--article {
  padding-block-start: 0;
}

@media (min-width: 769px) {
  body#page-index .top-renewal-home .top-home-media--video,
  body#page-index .top-renewal-home .top-home-media--article {
    background-color: #f3f3f1;
  }
}

body#page-index .top-renewal-home .top-home-media__slider-wrap {
  position: relative;
  overflow: visible;
}

body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev,
body#page-index .top-renewal-home .swiper-button-next.content-slider-next {
  inline-size: 48px;
  block-size: 48px;
  margin-block-start: 0;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-pill);
  background-color: #fff;
  color: #1f2937;
  inset-block-start: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  z-index: 10;
}

body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev:hover,
body#page-index .top-renewal-home .swiper-button-next.content-slider-next:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
  transform: translateY(-50%) scale(1.05);
}

body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev {
  inset-inline-start: -56px;
}

body#page-index .top-renewal-home .swiper-button-next.content-slider-next {
  inset-inline-end: -56px;
}

body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev::before,
body#page-index .top-renewal-home .swiper-button-next.content-slider-next::before,
body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev svg,
body#page-index .top-renewal-home .swiper-button-next.content-slider-next svg {
  display: none !important;
}

body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev::after,
body#page-index .top-renewal-home .swiper-button-next.content-slider-next::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  inline-size: 1em;
  block-size: 1em;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  opacity: 0.7;
  font-family: inherit;
}

body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev::after {
  transform: translate(-30%, -50%) rotate(-135deg);
}

body#page-index .top-renewal-home .swiper-button-next.content-slider-next::after {
  transform: translate(-70%, -50%) rotate(45deg);
}

body#page-index .top-renewal-home .swiper-button-disabled.content-slider-prev,
body#page-index .top-renewal-home .swiper-button-disabled.content-slider-next {
  opacity: 0;
  pointer-events: none;
}

body#page-index .top-renewal-home .top-home-media-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-2xl);
  background: #ffffff;
  box-shadow: 0 4px 20px -5px rgba(30, 27, 75, 0.05);
  color: #1a365d;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body#page-index .top-renewal-home .top-home-media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(30, 27, 75, 0.12);
}

body#page-index .top-renewal-home .top-home-media-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e2e8f0;
}

body#page-index .top-renewal-home .top-home-media-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  pointer-events: none;
}

body#page-index .top-renewal-home .top-home-media-card__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

body#page-index .top-renewal-home .top-home-media-card:hover .top-home-media-card__thumb img {
  transform: scale(1.05);
}

body#page-index .top-renewal-home .top-home-media-card__placeholder {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding: 1rem;
  color: #155e75;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body#page-index .top-renewal-home .top-home-media-card__duration {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2;
  padding-block: 0.35rem;
  padding-inline: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

body#page-index .top-renewal-home .top-home-media-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  background: #ffffff;
}

body#page-index .top-renewal-home .top-home-media-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 12px;
}

body#page-index .top-renewal-home .top-home-media-card__category {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding-block: 0.35rem;
  padding-inline: 0.7rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  color: #1a365d;
  font-size: 11px;
  font-weight: 700;
}

body#page-index .top-renewal-home .top-home-media-card__date {
  padding-block: 0.125rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-md);
  background: #f1f5f9;
  color: #000000;
  font-size: 9px;
  font-family: var(--font-en);
  font-weight: 700;
}

body#page-index .top-renewal-home .top-home-media-card__title {
  display: -webkit-box;
  margin: 0 0 10px;
  overflow: hidden;
  color: #1a365d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body#page-index .top-renewal-home .top-home-media-card__excerpt {
  display: -webkit-box;
  margin: 0 0 16px;
  overflow: hidden;
  color: #000;
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body#page-index .top-renewal-home .top-home-media-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: auto;
  padding-block-start: 16px;
  border-block-start: 1px solid #f8fafc;
  color: #94a3b8;
  font-size: 10px;
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.08em;
}

body#page-index .top-renewal-home .top-home-media-card__plays {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

body#page-index .top-renewal-home .top-home-media-card__spacer {
  flex: 1;
}

body#page-index .top-renewal-home .top-home-media-card__favorite {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

body#page-index .top-renewal-home .top-home-media-card__favorite .favorite {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

body#page-index .top-renewal-home .top-home-media-card__favorite .favorite .fav-icon {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

@media (max-width: 1024px) {
  body#page-index .top-renewal-home .pickup-category-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body#page-index .top-renewal-home .pickup-category-copy.top-home-section-copy {
    margin-block-end: 0;
    position: static;
  }
}

@media (min-width: 1024px) {
  body#page-index .top-renewal-home .seminar-editorial {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  body#page-index .top-renewal-home .seminar-editorial-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  body#page-index .top-renewal-home .pickup-category-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body#page-index .top-renewal-home .pickup-category-copy.top-home-section-copy {
    position: static;
  }

  body#page-index .top-renewal-home .news-stage-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body#page-index .top-renewal-home .news-topics-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  body#page-index .top-renewal-home .news-stage::before {
    inset-block-start: 3rem;
    inset-block-end: -2.5rem;
    inset-inline-start: 1rem;
    inset-inline-end: 1rem;
  }

  body#page-index .top-renewal-home .seminar-stage::before {
    inset-inline-end: 0;
    inset-inline-start: 0;
  }

  body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-row {
    align-items: flex-start;
    flex-direction: row;
  }

  body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge {
    inline-size: auto;
    min-block-size: auto;
    justify-content: center;
  }

  body#page-index .top-renewal-home .topics-banner,
  body#page-index .top-renewal-home .top-home-news-card {
    grid-template-columns: 1fr;
  }

  body#page-index .top-renewal-home .top-home-news-arrow {
    justify-content: flex-end;
  }

  body#page-index .top-renewal-home .top-home-media-card {
    border-radius: var(--radius-2xl);
  }

  body#page-index .top-renewal-home .top-home-media-card__body {
    padding: 1rem;
  }
}
.header-inner {
  --width-container: 100%; /* パターンB: ヘッダー全幅化 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo a {
  display: block;
}

.header-logo img {
  block-size: 20px;
}

/* 中央ナビ */
.header-nav > ul {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav > ul > li {
  position: relative;
}

.header-nav > ul > li > a,
.header-nav > ul > li > .header-nav-toggle-link {
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  padding: 8px 0;
  display: block;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.header-nav > ul > li > a:hover,
.header-nav > ul > li > .header-nav-toggle-link:hover {
  color: var(--color-navy);
}

/* ドロップダウンサブメニュー */
.header-nav .submenu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  min-inline-size: 200px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  display: block;
  flex-direction: column;
  gap: 0;
}

.header-nav .has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
}

.header-nav .submenu li {
  display: block;
}

.header-nav .submenu a {
  display: block;
  padding: 10px 20px;
  font-size: clamp(0.75rem, 1.3vw, 0.8125rem);
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.2s;
}

.header-nav .submenu a:hover {
  background: var(--color-gray-light);
  color: var(--color-navy);
}

/* ==============================================
   メガメニュー（Schoo風デザイン）
   ============================================== */
.header-nav .mega-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  inline-size: 1000px;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  cursor: default;
}

.header-nav .has-mega-menu:hover .mega-menu {
  opacity: 1;
  visibility: visible;
}

.mega-menu-inner {
  display: flex;
  flex-direction: column;
}

/* 上部カテゴリカードエリア */
.mega-menu-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-block-end: 24px;
}

.mega-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s ease;
  background: var(--color-white);
}

.mega-category-card:hover {
  border-color: var(--color-navy);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.mega-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mega-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px; /* アイコンを配置するエリアを少し広く */
  block-size: 64px;
  border-radius: var(--radius-md);
}

.mega-category-icon .material-symbols-outlined {
  font-size: clamp(30px, 5vw, 40px); /* 未変更のMaterial Symbolsも大きく */
  color: var(--color-navy);
}

.mega-category-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-category-text h3 {
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.mega-category-text p {
  font-size: clamp(0.6rem, 1.1vw, 0.65rem);
  color: var(--color-gray-dark);
  margin: 0;
  line-height: 1.3;
}

/* カード内のサブカテゴリリスト */
.header-nav .mega-category-list {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 項目間の余白を縮小 */
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px dashed var(--color-gray);
  padding-block-start: 12px;
  margin-block-start: 4px; /* 最初の項目の上の余白を確保しつつ全体のバランスを調整 */
}

.header-nav .mega-category-list li {
  display: block;
}

.header-nav .has-mega-menu .mega-category-list a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: clamp(0.75rem, 1.3vw, 0.8125rem);
  color: var(--color-text);
  text-decoration: none;
  background: transparent;
  transition: color 0.2s;
  font-weight: 500;
}

.header-nav .has-mega-menu .mega-category-list a::before {
  content: '・';
  color: var(--color-gray-medium);
  margin-inline-end: 4px;
  font-weight: bold;
}

.header-nav .has-mega-menu .mega-category-list a:hover {
  color: var(--color-navy);
  font-weight: 700;
}

/* フッターリンク */
.mega-menu-footer {
  text-align: center;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-gray);
}

.header-nav .has-mega-menu .mega-menu-all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 700;
  color: var(--color-text);
  transition: color 0.2s;
  background: transparent;
}

.header-nav .has-mega-menu .mega-menu-all-link:hover {
  color: var(--color-navy);
  background: transparent;
}

.header-nav .has-mega-menu .mega-menu-all-link .material-symbols-outlined {
  font-size: clamp(14px, 1.8vw, 16px);
}

/* 右側ボタン */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-account-dropdown {
  position: relative;
}

.header-account-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 41px;
  padding-inline: 24px;
}

.header-account-toggle__icon {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.header-account-dropdown.is-open .header-account-toggle__icon {
  transform: translateY(2px) rotate(-135deg);
}

.header-account-menu {
  position: absolute;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;
  inset-inline-start: auto;
  min-inline-size: min(18rem, calc(100vw - (var(--spacing-gutter) * 2)));
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(var(--color-navy-rgb), 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(var(--color-navy-rgb), 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 130;
}

.header-account-dropdown.is-open .header-account-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header-account-menu__list {
  display: grid;
  gap: 4px;
}

.header-account-menu__list a {
  display: block;
  padding-block: 10px;
  padding-inline: 14px;
  border-radius: var(--radius-xl);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header-account-menu__list a:hover {
  background: var(--color-gray-light);
  color: var(--color-navy);
}

.header-new .header-search-toggle-mobile,
.header-new .header-search-close {
  display: none;
}

.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
}

.header-search-toggle .material-symbols-outlined,
.header-search-close .material-symbols-outlined {
  font-size: 1.5rem;
  line-height: 1;
}

.header-search-toggle__icon--close {
  display: none;
}

.header-search-toggle.is-open .header-search-toggle__icon--search {
  display: none;
}

.header-search-toggle.is-open .header-search-toggle__icon--close {
  display: inline-block;
}

.header-search-panel {
  display: block;
  position: absolute;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: var(--spacing-gutter);
  inline-size: min(32rem, calc(100vw - (var(--spacing-gutter) * 2)));
  padding: 20px;
  border: 1px solid rgba(var(--color-navy-rgb), 0.08);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(var(--color-navy-rgb), 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 120;
}

.header-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-search-panel__inner {
  display: grid;
  gap: 16px;
}

.header-search-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-search-panel__title {
  margin: 0;
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.header-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
}

.header-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.header-search-input {
  inline-size: 100%;
  min-block-size: 3rem;
  padding-block: 0.875rem;
  padding-inline: 1rem;
  border: 1px solid rgba(var(--color-navy-rgb), 0.14);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.header-search-input::placeholder {
  color: #64748b;
}

.header-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding-block: 0.875rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.header-search-submit:hover {
  background: var(--color-navy-dark);
}

.header-menu-toggle,
.header-menu-overlay,
.header-nav-mobile-head,
.header-menu-close,
.header-nav > .header-nav-mobile-actions,
.header-nav > .header-nav-mobile-utility {
  display: none;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px; /* 丸みに合わせて左右パディング増 */
  border-radius: var(--radius-pill); /* niwacan風カプセル型 */
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 会員登録ボタン（赤背景） */
.header-btn-register {
  background: var(--color-red);
  color: var(--color-white);
}

.header-btn-register:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

/* ログインボタン（紺背景） */
.header-btn-login {
  background: var(--color-navy);
  color: #fff;
}

.header-btn-login:hover {
  background: var(--color-navy-dark);
  color: #fff;
}

@media (max-width: 768px) {
  body.header-menu-open,
  body.header-search-open {
    overflow: hidden;
  }

  .header-inner {
    justify-content: flex-start;
    gap: 12px;
  }

  .header-new .header-search-toggle-mobile {
    display: inline-flex;
    margin-inline-start: auto;
    position: relative;
    z-index: 121;
  }

  .header-new .header-search-toggle-desktop {
    display: none;
  }

  .header-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-navy);
    font: inherit;
    cursor: pointer;
  }

  .header-menu-toggle__bar {
    position: relative;
    inline-size: 16px;
    block-size: 2px;
    background: currentColor;
    border-radius: var(--radius-pill);
  }

  .header-menu-toggle__bar::before,
  .header-menu-toggle__bar::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inline-size: 16px;
    block-size: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .header-menu-toggle__bar::before {
    inset-block-start: -5px;
  }

  .header-menu-toggle__bar::after {
    inset-block-start: 5px;
  }

  .header-menu-toggle.is-open .header-menu-toggle__bar {
    background: transparent;
  }

  .header-menu-toggle.is-open .header-menu-toggle__bar::before {
    transform: translateY(5px) rotate(45deg);
  }

  .header-menu-toggle.is-open .header-menu-toggle__bar::after {
    transform: translateY(-5px) rotate(-45deg);
  }

  .header-actions {
    display: none;
  }

  .header-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(var(--color-navy-rgb), 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    cursor: pointer;
    z-index: 109;
  }

  .header-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .header-search-panel {
    display: block;
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100dvb;
    padding-block: calc(16px + env(safe-area-inset-top, 0px)) 32px;
    padding-inline: 20px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.24s ease, opacity 0.2s ease, visibility 0.2s ease;
    z-index: 111;
  }

  .header-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .header-search-panel__inner {
    gap: 20px;
  }

  .header-search-panel__head {
    justify-content: space-between;
  }

  .header-search-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .header-search-submit {
    inline-size: 100%;
  }

  .header-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 100vw;
    block-size: 100dvb;
    padding-block: calc(16px + env(safe-area-inset-top, 0px)) 32px;
    padding-inline: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.24s ease;
    z-index: 110;
  }

  .header-nav.is-open {
    transform: translateX(0);
  }

  .header-nav > ul {
    flex-direction: column;
    gap: 0;
  }

  .header-nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-block-end: 12px;
  }

  .header-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-navy);
    cursor: pointer;
  }

  .header-menu-close .material-symbols-outlined {
    font-size: 2rem;
    line-height: 1;
  }

  .header-nav > ul > li {
    border-block-end: 1px solid rgba(var(--color-navy-rgb), 0.08);
  }

  .header-nav > ul > li > a,
  .header-nav > ul > li > .header-nav-toggle-link {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 16px;
    padding-inline: 0;
    text-align: start;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .header-nav > ul > li > .header-nav-toggle-link::after {
    content: "+";
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .header-nav > ul > li > .header-nav-toggle-link.is-open::after {
    transform: rotate(45deg);
  }

  .header-nav .submenu,
  .header-nav .mega-menu {
    display: none;
    position: static;
    inset: auto;
    transform: none;
    min-inline-size: 0;
    inline-size: 100%;
    padding-block: 0 14px;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }

  .header-nav .header-nav-panel.is-open {
    display: block;
  }

  .header-nav .submenu a {
    padding-block: 10px;
    padding-inline: 14px;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
  }

  .mega-menu-inner,
  .header-new .mega-menu-article .mega-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mega-menu-categories,
  .header-new .mega-menu-article .mega-menu-categories,
  .header-new .mega-menu-support,
  .header-new .mega-menu-article .mega-menu-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-block-end: 0;
  }

  .mega-category-card,
  .header-new .header-nav .mega-support-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mega-category-card:hover,
  .header-new .header-nav .mega-support-card:hover {
    border: 0;
    box-shadow: none;
    transform: none;
  }

  .mega-category-header,
  .header-new .header-nav .mega-support-card {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-block: 12px;
    padding-inline: 0;
    border-radius: 0;
    text-decoration: none;
  }

  .mega-category-icon,
  .header-new .header-nav .mega-support-card__icon,
  .header-new .header-nav .mega-support-card__arrow {
    display: none;
  }

  .mega-category-text,
  .header-new .header-nav .mega-support-card__body {
    gap: 4px;
    inline-size: 100%;
  }

  .mega-category-text h3,
  .header-new .header-nav .mega-support-card__label {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-navy);
    padding-inline-start: 12px;
    border-inline-start: 3px solid rgba(var(--color-navy-rgb), 0.24);
  }

  .mega-category-text p,
  .header-new .header-nav .mega-support-card__description {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--color-gray-dark);
    padding-inline-start: 15px;
  }

  .header-nav .mega-category-list {
    gap: 0;
    border-block-start: 0;
    padding-block-start: 4px;
    margin-block-start: 2px;
    margin-inline-start: 15px;
  }

  .header-nav .mega-category-list li + li,
  .header-new .header-nav .mega-menu-support a + a {
    border-block-start: 1px solid rgba(var(--color-navy-rgb), 0.06);
  }

  .header-nav .has-mega-menu .mega-category-list a,
  .header-new .header-nav .mega-support-card {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    inline-size: 100%;
    padding-block: 11px;
    padding-inline: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .header-nav .has-mega-menu .mega-category-list a::before {
    content: "—";
    color: rgba(var(--color-navy-rgb), 0.45);
    margin-inline-end: 8px;
    flex-shrink: 0;
  }

  .header-new .header-nav .mega-support-card__body {
    inline-size: 100%;
  }

  .mega-menu-footer {
    padding-block-start: 10px;
    text-align: start;
    border-block-start: 1px solid rgba(var(--color-navy-rgb), 0.06);
  }

  .header-nav .has-mega-menu .mega-menu-all-link {
    justify-content: space-between;
    inline-size: 100%;
    padding-block: 10px 0;
    font-size: 0.875rem;
  }

  .header-nav > .header-nav-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-block-end: 20px;
  }

  .header-nav > .header-nav-mobile-actions .header-btn {
    inline-size: 100%;
    padding-block: 12px;
    padding-inline: 16px;
  }

  .header-nav > .header-nav-mobile-utility {
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 20px 0 0;
    padding: 20px 0 0;
  }

  .header-nav > .header-nav-mobile-utility a {
    display: block;
    padding-block: 10px;
    padding-inline: 4px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}

@media (min-width: 769px) {
  .header-new .header-search-toggle-desktop {
    display: inline-flex;
  }

  .header-new .header-search-toggle-mobile {
    display: none;
  }
}

/* ==============================================
   ヒーローセクション（画像デザイン準拠）
   ============================================== */
.hero-section-new {
  padding-block: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 24px);
  overflow: hidden;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央揃えに変更 */
  gap: clamp(40px, 5vw, 60px);
}

.hero-content {
  flex: 1;
  max-inline-size: 540px;
  text-align: center; /* 中央揃え: 論理プロパティでも center は有効 */
}

.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央揃え */
  gap: 12px;
  margin-block-end: 20px;
}

.hero-logo img {
  block-size: 36px;
}

.hero-logo-text {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--color-navy);
  display: none; /* 画像に合わせて非表示に */
}

.hero-title {
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
  font-weight: 700;
  color: var(--color-text);
  margin-block-end: 16px;
  line-height: 1.4;
}

.hero-subtitle {
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
  color: var(--color-gray-dark);
  margin-block-end: 16px;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px; /* 丸みに合わせてパディング増 */
  border-radius: var(--radius-pill); /* niwacan風カプセル型 */
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hero-btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
}

.hero-btn-primary:hover {
  background: var(--color-navy-dark);
  color: var(--color-white);
}

.hero-image {
  flex: 1;
  max-inline-size: 360px;
  text-align: center;
}

.hero-image img {
  max-inline-size: 100%;
  block-size: auto;
}

/* ヒーローセクション レスポンシブ */
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-content {
    flex: 1;
    max-inline-size: 100%;
  }

  .hero-logo {
    justify-content: center;
  }

  .hero-buttons {
    justify-content: center;
  }
}

/* ヒーロー画像プレースホルダー */
.hero-image-placeholder {
  inline-size: 400px;
  block-size: 400px;
  background: linear-gradient(135deg, #e8f4fc 0%, #d1e7f5 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.hero-image-placeholder::after {
  content: '🎓';
  font-size: clamp(72px, 12vw, 120px);
}

/* ヒーローセクション レスポンシブ */
@media (max-width: 768px) {
  .hero-section-new .inner-cmn {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-content {
    max-inline-size: 100%;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-title {
    font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  }

  .hero-image-placeholder {
    inline-size: 280px;
    block-size: 280px;
  }

  .hero-image-placeholder::after {
    font-size: clamp(56px, 8vw, 80px);
  }
}

/* ==============================================
   バナースライダー
   ============================================== */
.banner-slider-section {
  background: var(--color-white);
  padding-block: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 40px);
  overflow: visible;
}

.banner-slider-wrap {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

.banner-swiper {
  inline-size: 100%;
  overflow: hidden;
}

.banner-swiper .swiper-slide {
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.banner-swiper .swiper-slide a {
  display: block;
  line-height: 0;
}

.banner-swiper .swiper-slide img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-xl);
  transition: transform 0.4s ease;
}

.banner-swiper .swiper-slide:hover img {
  transform: scale(1.03);
}

/* ナビゲーションボタン（スライダー外側に配置） */
.banner-slider-wrap .swiper-button-prev,
.banner-slider-wrap .swiper-button-next {
  inline-size: 36px;
  block-size: 36px;
  border: 2px solid var(--color-gray);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  transition: all 0.25s ease;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.banner-slider-wrap .swiper-button-prev {
  inset-inline-start: 4px;
}

.banner-slider-wrap .swiper-button-next {
  inset-inline-end: 4px;
}

.banner-slider-wrap .swiper-button-prev:hover,
.banner-slider-wrap .swiper-button-next:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.banner-slider-wrap .swiper-button-prev::after,
.banner-slider-wrap .swiper-button-next::after {
  content: none;
}

.banner-slider-wrap .swiper-button-prev svg,
.banner-slider-wrap .swiper-button-next svg {
  inline-size: 10px;
  block-size: auto;
  display: block;
  stroke: currentColor;
  stroke-width: 2px;
}

.banner-slider-wrap .swiper-button-prev svg {
  transform: rotate(180deg);
}

/* ページネーション */
.banner-slider-wrap .swiper-pagination {
  position: relative;
  inset-block-end: auto !important;
  margin-block-start: 16px;
}

.banner-slider-wrap .swiper-pagination-bullet {
  inline-size: 8px;
  block-size: 8px;
  background: var(--color-gray);
  opacity: 1;
  transition: all 0.3s ease;
}

.banner-slider-wrap .swiper-pagination-bullet-active {
  background: var(--color-navy);
  inline-size: 24px;
  border-radius: var(--radius-sm);
}

/* レスポンシブ */
@media (max-width: 768px) {
  .banner-slider-wrap .swiper-button-prev,
  .banner-slider-wrap .swiper-button-next {
    inline-size: 28px;
    block-size: 28px;
  }

  .banner-slider-wrap .swiper-button-prev::after,
  .banner-slider-wrap .swiper-button-next::after {
    font-size: clamp(9px, 1.1vw, 10px);
  }

  .banner-swiper .swiper-slide,
  .banner-swiper .swiper-slide img {
    border-radius: var(--radius-md);
  }

  .banner-slider-wrap .swiper-pagination {
    margin-block-start: 12px;
  }
}


/* ==============================================
   PICKUP CATEGORY
   ============================================== */
.pickup-category-section {
  background: var(--color-white);
  padding-block: clamp(2.5rem, 6vw, 6rem);
}

.pickup-category-layout {
  display: grid;
  grid-template-columns: minmax(0, clamp(15rem, 18vw, 18rem)) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 10rem);
  align-items: start;
}

.pickup-category-copy {
  position: sticky;
  inset-block-start: clamp(4rem, 8vw, 7rem);
}

.pickup-category-kicker {
  margin-block: 0;
  color: oklch(69% 0.18 28.6deg);
  font-family: var(--font-en);
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pickup-category-title {
  margin-block: 0.5rem 0;
  color: var(--color-navy);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.pickup-category-text {
  margin-block: 0.5rem 0;
  color: var(--color-gray-dark);
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 500;
  line-height: 1.7;
}

.local-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.local-nav-card.new-style {
  position: relative;
  aspect-ratio: 600 / 350;
  border-radius: 2rem 2rem 0 2rem;
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: #f8fafc;
  isolation: isolate;
}

.local-nav-card.new-style::before {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -1px;
  inline-size: 4.625rem;
  block-size: 4.625rem;
  background-image: url("data:image/svg+xml,%3Csvg width='74' height='74' viewBox='0 0 74 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55.6917 18.3083H51.8806C33.3774 18.3083 18.3081 33.3775 18.3081 51.8808V55.6918C18.3081 65.5386 10.2067 73.5878 0.359863 73.5878H73.6401V0.359863C73.6401 10.2067 65.5386 18.3083 55.6917 18.3083Z' fill='%23ffffff'/%3E%3Cpath d='M55.6917 18.3083H51.8806C33.3774 18.3083 18.3081 33.3775 18.3081 51.8808V55.6918C18.3081 65.5386 10.2067 73.5878 0.359863 73.5878' stroke='%23e2e8f0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 4;
  pointer-events: none;
}

.local-nav-card.new-style::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
  background-color: #1a365d;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.8278 15.1831C26.7259 14.9545 26.58 14.7376 26.3902 14.5477C26.3779 14.5359 26.3638 14.5225 26.3533 14.5107L17.0535 5.61522C16.1959 4.79493 14.8059 4.79493 13.9465 5.61522C13.0872 6.43551 13.0889 7.76513 13.9465 8.5871L19.4997 13.8988H6.19667C4.98411 13.8988 4 14.8402 4 16C4 17.1598 4.98411 18.1012 6.19667 18.1012H19.4997L13.9465 23.4129C13.0889 24.2332 13.0889 25.5628 13.9465 26.3848C14.3753 26.7949 14.9359 27 15.5 27C16.0641 27 16.6247 26.7949 17.0535 26.3848L26.3533 17.4893C26.3656 17.4775 26.3797 17.4641 26.3902 17.4523C26.58 17.2624 26.7259 17.0455 26.8278 16.8169C26.9367 16.5665 27 16.2908 27 16C27 15.7092 26.9385 15.4352 26.8278 15.1831Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  z-index: 5;
  pointer-events: none;
}

.local-nav-grid .local-nav-card:nth-child(1)::after { background-color: oklch(71% 0.17 28.6deg); }
.local-nav-grid .local-nav-card:nth-child(2)::after { background-color: oklch(71% 0.14 244deg); }
.local-nav-grid .local-nav-card:nth-child(3)::after { background-color: oklch(71% 0.17 144deg); }
.local-nav-grid .local-nav-card:nth-child(4)::after { background-color: oklch(71% 0.17 66deg); }
.local-nav-grid .local-nav-card:nth-child(5)::after { background-color: oklch(71% 0.17 246deg); }
.local-nav-grid .local-nav-card:nth-child(6)::after { background-color: oklch(71% 0.17 206deg); }
.local-nav-grid .local-nav-card:nth-child(7)::after { background-color: oklch(71% 0.17 10deg); }
.local-nav-grid .local-nav-card:nth-child(8)::after { background-color: oklch(71% 0.17 168deg); }

.local-nav-card.new-style .card-bg-gradient {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  transition: transform 0.7s ease;
  z-index: 1;
}

.local-nav-card.new-style:hover .card-bg-gradient {
  transform: scale(1.05);
}

.local-nav-card.new-style .nav-grad-01 { background: oklch(79% 0.12 28.6deg); }
.local-nav-card.new-style .nav-grad-02 { background: oklch(42% 0.11 244deg); }
.local-nav-card.new-style .nav-grad-03 { background: oklch(79% 0.12 144deg); }
.local-nav-card.new-style .nav-grad-04 { background: oklch(79% 0.12 66deg); }
.local-nav-card.new-style .nav-grad-05 { background: oklch(79% 0.12 246deg); }
.local-nav-card.new-style .nav-grad-06 { background: oklch(79% 0.12 206deg); }
.local-nav-card.new-style .nav-grad-07 { background: oklch(79% 0.12 10deg); }
.local-nav-card.new-style .nav-grad-08 { background: oklch(79% 0.12 168deg); }

.local-nav-card.new-style .card-icon {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  inline-size: clamp(70px, 48%, 110px);
  block-size: clamp(70px, 48%, 110px);
  z-index: 2;
  opacity: 0.32;
  pointer-events: none;
}

.local-nav-card.new-style .card-icon img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.local-nav-card.new-style .card-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.local-nav-card.new-style .card-content {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  z-index: 4;
}

.local-nav-card.new-style .card-category {
  font-size: clamp(0.62rem, 0.9vw, 0.68rem);
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-white);
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  line-height: 1.2;
}

.local-nav-card.new-style .card-title {
  color: var(--color-white);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 1024px) {
  .pickup-category-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pickup-category-copy {
    position: static;
  }
}

@media (max-width: 768px) {
  .pickup-category-section {
    padding-block: clamp(2rem, 6vw, 3.5rem);
  }

  .local-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .local-nav-card.new-style {
    border-radius: 1.25rem 1.25rem 0 1.25rem;
  }

  .local-nav-card.new-style::before {
    inline-size: 3.625rem;
    block-size: 3.625rem;
  }

  .local-nav-card.new-style::after {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    background-size: 0.95rem;
  }

  .local-nav-card.new-style .card-content {
    padding: 1rem;
    gap: 0.5rem;
  }

  .local-nav-card.new-style .card-category {
    font-size: clamp(0.55rem, 1vw, 0.6rem);
    padding-inline: 0.5rem;
  }

  .local-nav-card.new-style .card-title {
    font-size: clamp(0.75rem, 1.35vw, 0.9rem);
  }
}




/* ==============================================
   ネイビー背景セクション（LEARN / DIPLOMA）
   ============================================== */
.navy-section {
  background: var(--color-navy);
  padding-block: clamp(80px, 16vw, 160px);
  position: relative;
  overflow: hidden;
}

.navy-section .inner-cmn {
  position: relative;
  z-index: 2;
}

/* 背景の大きなテキスト */
.navy-section::before {
  content: 'LEARN';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 5%;
  transform: translateY(-50%);
  font-size: clamp(96px, 16vw, 180px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  letter-spacing: 0.05em;
  pointer-events: none;
}

.navy-section::after {
  content: 'DIPLOMA';
  position: absolute;
  inset-block-end: 10%;
  inset-inline-end: 10%;
  font-size: clamp(72px, 12vw, 120px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  letter-spacing: 0.05em;
  pointer-events: none;
}

.navy-header {
  text-align: center;
  margin-block-end: clamp(32px, 5vw, 48px);
}

.navy-header .label {
  font-size: clamp(0.75rem, 1.3vw, 0.8125rem);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.15em;
  margin-block-end: 8px;
  text-transform: uppercase;
}

.navy-header .title {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--color-white);
}

.learning-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}

.learning-card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: 32px 20px;
  text-align: center;
}

.learning-card .icon {
  inline-size: 64px;
  block-size: 64px;
  background: var(--color-gray-light);
  border-radius: var(--radius-lg);
  margin-inline: auto;
  margin-block-end: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 3.2vw, 28px);
}

.learning-card .card-title {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: 10px;
}

.learning-card .card-text {
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: var(--color-gray-dark);
  line-height: 1.7;
}

/* ネイビーセクション レスポンシブ */
@media (max-width: 768px) {
  .navy-section::before {
    font-size: clamp(56px, 8vw, 80px);
  }

  .navy-section::after {
    font-size: clamp(40px, 6vw, 60px);
  }

  .learning-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .learning-card {
    padding: 20px 16px;
  }
}






/* ==============================================
   フッターバナー
   ============================================== */
.footer-banner {
  background: var(--color-navy);
  padding-block: clamp(64px, 10vw, 80px);
  text-align: center;
}

.footer-banner .inner-cmn {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.footer-banner .logo {
  margin-block-end: 16px;
}

.footer-banner .logo img {
  block-size: 48px;
  filter: brightness(0) invert(1);
}

.footer-banner .text {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  margin-block-end: 20px;
}

.footer-banner .btn {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-navy);
  padding: 12px 32px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

/* ==============================================
   New Video / New Article / NEWS セクション
   ============================================== */
.content-section {
  background: var(--color-white); /* 変更: 白背景 */
  padding-block: clamp(64px, 10vw, 120px);
  color: var(--color-text); /* 変更: テキスト色 */
}

.content-inner .content-block {
  margin-bottom: 160px;
}

.content-inner .content-block:last-child {
  margin-bottom: 0;
}

/* 廃止: .content-left, .content-right */
/* 廃止: .content-left */
/* 廃止: .content-right */


/* ==============================================
   ホーム：セミナーセクション (Stitch移植・改修)
   ============================================== */
.home-seminar-section {
  background-color: var(--color-white);
  padding-block: clamp(40px, 8vw, 80px);
}

/* レイアウト */
.home-seminar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 48px);
}

@media (min-width: 992px) {
  .home-seminar-layout {
    grid-template-columns: 1fr 2fr;
  }
}

/* 左カラム：イントロ */
.home-seminar-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-seminar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background-color: rgba(15, 102, 189, 0.1); /* primary with opacity */
  color: var(--color-navy);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 600;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-block-end: 16px;
}

.home-seminar-label .live-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-navy);
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.home-seminar-title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--color-text);
  margin-block-end: 16px;
}

.home-seminar-lead {
  color: var(--color-gray-dark);
  margin-block-end: 32px;
  line-height: 1.75;
}

.home-seminar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid var(--color-gray-medium);
  border-radius: var(--radius-pill); /* niwacan風カプセル型 */
  color: var(--color-text);
  font-weight: 500;
  background-color: var(--color-white);
  width: fit-content;
  transition: all 0.2s;
}

.home-seminar-btn:hover {
  background-color: var(--color-gray-light);
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* 右カラム：リスト */
.home-seminar-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* カード */
.home-seminar-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-xl);
  padding: 24px;
  transition: all 0.2s;
}

.home-seminar-card:hover {
  border-color: rgba(15, 102, 189, 0.4);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.home-seminar-card-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .home-seminar-card-inner {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* 日付ボックス */
.home-seminar-date-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-gray-light);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-md);
}

.home-seminar-date-box .month {
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 700;
  color: var(--color-gray-dark);
  text-transform: uppercase;
}

.home-seminar-date-box .day {
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);
  font-weight: 700;
  color: var(--color-navy);
}

/* コンテンツ */
.home-seminar-content {
  flex-grow: 1;
  width: 100%;
}

.home-seminar-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-end: 8px;
}

@media (min-width: 768px) {
  .home-seminar-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.home-seminar-card-title {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.home-seminar-card:hover .home-seminar-card-title {
  color: var(--color-navy);
}

.home-seminar-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 500;
  color: var(--color-gray-dark);
  background-color: var(--color-gray-light);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.home-seminar-time i {
  color: var(--color-navy);
}

.home-seminar-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-block: 12px 16px;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: var(--color-gray-dark);
}

@media (min-width: 640px) {
  .home-seminar-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.home-seminar-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-seminar-meta .highlight {
  color: var(--color-text);
  font-weight: 500;
}

/* フッター */
.home-seminar-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block-start: 16px;
  border-top: 1px solid var(--color-gray-light);
}

@media (min-width: 640px) {
  .home-seminar-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.attendees {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attendee-avatars {
  display: flex;
  margin-left: 8px; /* 重なり用 */
}

.attendee-avatars img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  margin-left: -8px;
}

/* 残席表示 */
.home-seminar-seats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 500;
  color: var(--color-gray-dark);
}

.seat-status-label {
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: #ccc;
  line-height: 1.4;
}

.seat-icon {
  display: flex;
  align-items: center;
  font-size: clamp(12px, 1.5vw, 14px);
}

.seat-text {
  line-height: 1;
}

.seat-count {
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.5px;
  line-height: 1;
  position: relative;
  top: 1px; /* 日本語との高さ合わせ微調整 */
}

/* Status Colors */

/* Safe (Green) */
.home-seminar-seats.status-safe .seat-status-label {
  background-color: #16a34a; /* Green-600 */
}
.home-seminar-seats.status-safe .seat-icon,
.home-seminar-seats.status-safe .seat-text,
.home-seminar-seats.status-safe .seat-count {
  color: #16a34a;
}

/* Warning (Orange/Yellow) */
.home-seminar-seats.status-warning .seat-status-label {
  background-color: #d97706; /* Amber-600 */
}
.home-seminar-seats.status-warning .seat-icon,
.home-seminar-seats.status-warning .seat-text,
.home-seminar-seats.status-warning .seat-count {
  color: #d97706;
}

/* Critical (Red) */
.home-seminar-seats.status-critical .seat-status-label {
  background-color: #dc2626; /* Red-600 */
}
.home-seminar-seats.status-critical .seat-icon,
.home-seminar-seats.status-critical .seat-text,
.home-seminar-seats.status-critical .seat-count {
  color: #dc2626;
}






/* カードグリッド（4列） */
.content-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.5vw, 16px);
}

@media (max-width: 768px) {
  .content-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* メディアカード（動画・記事共通） */
.media-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-gray); /* 追加: ボーダー */
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.media-card:hover {
  transform: translateY(-3px);
}

.card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #e8f4fc;
  overflow: hidden;
}

.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  background: linear-gradient(135deg, #d4e8f5 0%, #e8f4fc 100%);
}

.card-info {
  padding: 10px 12px;
  background: var(--color-white);
}

.card-title {
  font-size: clamp(0.5rem, 1.5vw, 0.75rem);
  font-weight: 600;
  color: var(--color-text);
  margin-block-end: clamp(6px, 1vw, 12px);
  margin-block-start: 0;
  margin-inline: 0;
  line-height: 1.4;
}

.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-date,
.card-views {
  font-size: clamp(0.625rem, 1.15vw, 0.6875rem);
  color: var(--color-gray-dark);
}

.card-meta-row i {
  color: #a0aec0;
  margin-right: 4px;
}


/* ==============================================
   News & Topics セクション (Redesign)
   ============================================== */
.news-topics-section {
  padding-block: clamp(40px, 8vw, 80px);
  background-color: #fff; /* 背景は白 */
}

/* レイアウト (PC: 左右 6:4 くらい) */
.news-topics-layout {
  display: flex;
  gap: clamp(32px, 5vw, 60px);
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .news-topics-layout {
    flex-direction: column;
    gap: 60px;
  }
}

/* ----------------------------------
   Left: News Area
---------------------------------- */
.news-area-v2 {
  flex: 1;
  min-width: 0; /* Flex内での縮小対策 */
}

/* Header */
.news-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: clamp(16px, 3vw, 24px);
  border-block-end: 2px dotted #e0e0e0;
  padding-block-end: 12px;
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--color-navy);
}

.header-left .dot { font-size: clamp(9px, 1.1vw, 10px); color: var(--color-navy); }
.header-left .title-en { font-size: clamp(32px, 5vw, 64px); font-weight: 700; margin: 0; line-height: 1; }
.header-left .divider { font-size: clamp(12px, 1.5vw, 14px); color: #999; }
.header-left .title-ja { font-size: clamp(12px, 1.5vw, 14px); font-weight: 500; color: #666; }


/* Dark Mode / Navy Background Modifier */
.news-header-v2.on-dark {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.news-header-v2.on-dark .header-left {
  color: #fff;
}

.news-header-v2.on-dark .header-left .id-en,
.news-header-v2.on-dark .header-left .title-en,
.news-header-v2.on-dark .header-left .title-ja,
.news-header-v2.on-dark .header-left .divider {
  color: #fff;
}

.news-header-v2.on-dark .header-left .title-ja {
  color: rgba(255, 255, 255, 0.8);
}

.news-header-v2.on-dark .header-left .divider {
  color: rgba(255, 255, 255, 0.5);
}



/* Tabs */
.news-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-block-end: clamp(16px, 3vw, 24px);
}

.news-tab {
  border: 1px solid var(--color-navy);
  background: #fff;
  color: var(--color-navy);
  padding: 6px 20px;
  border-radius: var(--radius-pill); /* ピル形状へ */
  font-size: clamp(12px, 1.4vw, 13px);
  cursor: pointer;
  transition: all 0.3s;
}

.news-tab.active,
.news-tab:hover {
  background: var(--color-navy);
  color: #fff;
}

/* List (Cards) */
.news-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius-xl); /* 大幅に丸みを帯びるように変更 */
  padding: 24px 32px; /* 余白も拡張 */
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.news-card:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  border-color: var(--color-navy);
  transform: translateY(-2px);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.news-date {
  font-size: clamp(11px, 1.3vw, 12px);
  color: #888;
  font-family: var(--font-en);
}



.news-title {
  flex: 1;
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.5;
  margin: 0;
  font-weight: 700;
}

.news-arrow {
  width: 32px;
  height: 32px;
  background: #f0f2f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 1.3vw, 12px);
  color: #999;
  flex-shrink: 0;
}

.news-card:hover .news-arrow {
  background: var(--color-navy);
  color: #fff;
}

@media (max-width: 768px) {
  .news-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ----------------------------------
   Right: Topics Area (Blue Card)
---------------------------------- */
.topics-area {
  width: 480px; /* 固定幅または% */
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .topics-area {
    width: 100%;
  }
}

.topics-card {
  background: var(--color-navy); /* 濃い青 */
  border-radius: var(--radius-2xl); /* 更に大きな丸み */
  padding: clamp(24px, 4vw, 40px);
  color: #fff;
  position: relative;
}

.topics-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}

.topics-header .dot-white { font-size: clamp(9px, 1.1vw, 10px); color: #fff; }
.topics-header .topics-title-en { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0; line-height: 1; color: #fff;}
.topics-header .divider-white { font-size: clamp(12px, 1.5vw, 14px); color: rgba(255,255,255,0.5); }
.topics-header .topics-title-ja { font-size: clamp(12px, 1.5vw, 14px); font-weight: 500; color: rgba(255,255,255,0.8); }

/* Swiper Content */
.topics-slide-content {
  background: var(--color-navy);
}

.topics-image {
  position: relative;
  border-radius: var(--radius-xl); /* 柔らかく */
  overflow: hidden;
  margin-block-end: 20px;
  aspect-ratio: 16/10;
}

.topics-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.topics-image:hover img {
  transform: scale(1.05);
}



.topics-text {
  color: #fff;
  padding-inline-end: 20px; /* ナビゲーション分の余白 */
}

.topics-date {
  font-family: var(--font-en);
  font-size: clamp(11px, 1.3vw, 12px);
  opacity: 0.8;
  margin-block-end: 8px;
}

.topics-headline {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  line-height: 1.5;
  margin-block-end: 12px;
  min-height: 3em; /* 高さ確保 */
}

.topics-cat {
  font-size: clamp(11px, 1.3vw, 12px);
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
}

/* Controls */
.topics-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 20px;
}

.topics-counter {
  font-family: var(--font-en);
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
}
.topics-counter .current { font-size: clamp(16px, 2vw, 18px); }
.topics-counter .total { font-size: clamp(11px, 1.3vw, 12px); opacity: 0.6; }

.topics-nav-btns {
  display: flex;
  gap: 12px;
}

.topics-button-prev,
.topics-button-next {
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.topics-button-prev:hover,
.topics-button-next:hover {
  background: #fff;
  color: var(--color-navy);
  border-color: #fff;
}



/* レスポンシブ */
@media (max-width: 1024px) {
  .news-banner-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .banner-area {
    aspect-ratio: 16 / 9; /* バナーのアスペクト比を維持 */
  }
}

@media (max-width: 768px) {
  .content-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-left,
  .content-right {
    padding: 0 20px 30px;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ================================================
   選べる学習方法セクション
   ================================================ */
.learn-method-section {
  position: relative;
  padding-block: clamp(40px, 6vw, 60px);
  background: #f5f5f5;
  overflow: visible;
}



.learn-method-section .inner-cmn {
  position: relative;
  z-index: 1;
}

.learn-method-title {
  text-align: center;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: 16px;
}

.learn-method-subtitle {
  text-align: center;
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.8;
  color: #666;
  margin-block-end: clamp(24px, 4vw, 32px);
}

.learn-method-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 20px);

  margin-inline: auto;
  padding-block-start: clamp(32px, 5vw, 60px);
}

.learn-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(60px, 10vw, 100px) clamp(16px, 2vw, 24px) clamp(20px, 3vw, 28px);
  text-decoration: none;
  color: var(--color-navy);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  margin-top: 0;
}

.learn-method-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  color: var(--color-navy);
}

.learn-method-card.is-active {
  background: var(--color-navy);
  color: #fff;
}

.learn-method-card.is-active .learn-method-card-desc {
  color: rgba(255, 255, 255, 0.7);
}

.learn-method-card.is-active .learn-method-card-arrow {
  color: #fff;
}

.learn-method-card-illust {
  inline-size: 140px;
  block-size: 140px;
  margin-block-end: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.learn-method-card-illust img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.learn-method-card.is-active .learn-method-card-illust img {
  filter: invert(1);
}

.learn-method-card-title {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  margin-block-end: 12px;
  text-align: center;
}

.learn-method-card-desc {
  font-size: clamp(12px, 1.4vw, 13px);
  line-height: 1.7;
  color: #888;
  text-align: center;
  margin-block-end: 20px;
}

.learn-method-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--color-navy);
  transition: all 0.3s ease;
}

.learn-method-card-arrow svg {
  inline-size: 8px;
  block-size: auto;
}

.learn-method-card:hover .learn-method-card-arrow {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.learn-method-card.is-active:hover .learn-method-card-arrow {
  background: #fff;
  border-color: #fff;
  color: var(--color-navy);
}

.news-tag.type-ir { border-color: var(--color-navy); color: var(--color-navy); }

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .learn-method-subtitle {
    font-size: clamp(12px, 1.4vw, 13px);
  }

  .learn-method-cards {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }

  .learn-method-card {
    flex-direction: row;
    padding: 20px 24px;
    gap: 16px;
  }

  .learn-method-card-illust {
    inline-size: 64px;
    block-size: 64px;
    margin-block-end: 0;
    flex-shrink: 0;
  }

  .learn-method-card-title {
    font-size: clamp(14px, 1.8vw, 16px);
    text-align: start;
    margin-block-end: 4px;
  }

  .learn-method-card-desc {
    font-size: clamp(11px, 1.3vw, 12px);
    text-align: start;
    margin-block-end: 0;
  }

  .learn-method-card-arrow {
    margin-inline-start: auto;
    flex-shrink: 0;
  }
}

/* ================================================
   ディプロマ制度セクション
   ================================================ */
.diploma-section {
  position: relative;
  padding-block: clamp(40px, 6vw, 60px) clamp(60px, 10vw, 100px);
  background: #f5f5f5;
  overflow: visible;
}



.diploma-section .inner-cmn {
  position: relative;
  z-index: 1;
}

.diploma-header {
  text-align: center;
  margin-block-end: clamp(32px, 5vw, 48px);
}

/* .header-left .title-en */
.header-left .title-en { font-size: clamp(32px, 5vw, 64px); font-weight: 700; margin: 0; line-height: 1; text-transform: uppercase; font-family: var(--font-en); }

/* .topics-header .topics-title-en */
.topics-header .topics-title-en { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0; line-height: 1; color: #fff; text-transform: uppercase; font-family: var(--font-en); }

/* .learn-method-title */
.learn-method-title {
  text-align: center;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: 16px;
  text-transform: uppercase;
  font-family: var(--font-en);
}

/* .diploma-title */
.diploma-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: clamp(16px, 3vw, 24px);
  text-transform: uppercase;
  font-family: var(--font-en);
}

.diploma-subtitle {
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.8;
  color: #666;
  margin-block-end: clamp(24px, 4vw, 32px);
}

.diploma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  color: #fff;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  padding: 12px 32px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: var(--font-en);
}

.diploma-btn:hover {
  background: #fff;
  color: var(--color-navy);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.diploma-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);

  margin-inline: auto;
}

.diploma-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  text-decoration: none;
  color: var(--color-navy);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  min-height: 200px;
}

.diploma-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  color: var(--color-navy);
}

.diploma-card-illust {
  inline-size: 80px;
  block-size: 80px;
  flex-shrink: 0;
  margin-inline-end: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------
 * お気に入りボタン (Favorite)
 * ----------------------------------- */
.favorite[data-favorite="true"] .fav-icon {
    fill: #e91e63;
    stroke: #e91e63;
}
.favorite:hover {
    opacity: 0.7;
}

.diploma-card-illust img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.diploma-card-content {
  flex: 1;
}

.diploma-card-title {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  margin-block-end: 8px;
  line-height: 1.4;
}

.diploma-card-desc {
  font-size: clamp(12px, 1.4vw, 13px);
  line-height: 1.6;
  color: #666;
  margin: 0;
}

.diploma-card-arrow {
  position: absolute;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.diploma-card-arrow svg {
  width: 8px;
  height: auto;
}



.diploma-card:hover .diploma-card-arrow {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .diploma-subtitle {
    font-size: clamp(12px, 1.4vw, 13px);
    margin-block-end: 24px;
    text-align: start;
  }

  .diploma-cards {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }

  .diploma-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .diploma-card-illust {
    margin-inline-end: 0;
    margin-block-end: 16px;
    inline-size: 60px;
    block-size: 60px;
  }

  .diploma-card-content {
    inline-size: 100%;
    margin-bottom: 40px; /* 矢印スペース */
  }

  .diploma-card-title {
    font-size: clamp(16px, 2vw, 18px);
  }

  .diploma-card-desc {
    font-size: clamp(11px, 1.3vw, 12px);
  }

  .diploma-card-arrow {
    inset-block-end: 20px;
    inset-inline-end: 20px;
  }
}

/* ================================================
   スケジュールセクション
   ================================================ */
.schedule-section {
  padding-block: clamp(40px, 8vw, 60px) clamp(60px, 12vw, 100px);
  background: #ffffff;
}

/* タブナビゲーション */
.schedule-tabs {
  display: flex;
  align-items: baseline;
  margin-block-end: clamp(32px, 5vw, 40px);
  border-block-end: 2px solid #eee;
  padding-block-end: 10px;
  width: 100%;
}

.schedule-tab-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  opacity: 0.4; /* 非アクティブ時は薄く */
  flex: 1;
}

.schedule-tab-btn:hover {
  opacity: 0.7;
}

.schedule-tab-btn.is-active {
  opacity: 1;
}

.schedule-tab-btn .en {
  display: block;
  font-size: clamp(16px, 3vw, 32px); /* ユーザー要望により半分に変更 */
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-family: var(--font-en);
}

/* 日本語タイトル（小さく） */
.schedule-tab-btn .ja {
  display: block;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 500;
  color: var(--color-text);
  margin-left: 4px;
}

/* タブのアクティブ表示バー（任意） */
.schedule-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -12px; /* schedule-tabsのpadding-bottomと合わせる */
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-navy);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.schedule-tab-btn.is-active::after {
  transform: scaleX(1);
}

/* タブコンテンツ制御 */
.schedule-tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

.schedule-tab-content.is-active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 右寄せView All用ユーティリティ */
.news-header-v2.justify-end {
  justify-content: flex-end;
  border-bottom: none; /* コンテンツ内のヘッダー線は不要かも */
  margin-bottom: 20px;
}

/* 共通 View All ボタン */
.view-all-link {
  display: inline-block;
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  line-height: 1;
}

/* 白背景用（スケジュール、ニュースリストなど） */
.news-header .view-all-link,
.news-header-v2 .view-all-link {
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-navy);
}

.news-header .view-all-link:hover,
.news-header-v2 .view-all-link:hover {
  background: var(--color-navy);
  color: #fff;
}

/* ネイビー背景用（New Video/Article） */
.content-navy-section .view-all-link {
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
}

.content-navy-section .view-all-link:hover {
  background: #fff;
  color: var(--color-navy);
}

/* スケジュールカード独自要素（media-card内配置） */
.schedule-card-cat {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: var(--font-en);
  z-index: 1;
  width: 100%;
  text-align: center;
}

/* schedule-card-info */
.schedule-card-info {
  font-size: clamp(11px, 1.3vw, 12px);
  line-height: 1.6;
  color: #666;
  margin-block-start: 8px;
}

.schedule-card-info p {
  margin-block-end: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==============================================
   統計・実績セクション (stats-section)
   ============================================== */
.stats-section {
  background-color: #fff;
  padding-block: clamp(60px, 8vw, 100px);
}

.stats-header {
  text-align: center;
  margin-block-end: clamp(40px, 6vw, 60px);
}

.stats-title {
  font-size: clamp(24px, 4vw, 32px);
  color: var(--color-navy);
  font-weight: 700;
  margin-block-end: 16px;
  line-height: 1.4;
}

.stats-desc {
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--color-text);
  margin-block-end: 24px;
  line-height: 1.6;
}

.stats-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-navy);
  color: #fff;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.stats-btn:hover {
  background-color: var(--color-navy-light);
  transform: translateY(-2px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  inline-size: 100%;
}

@media screen and (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stats-card {
  background: #fff;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 32px) clamp(16px, 3vw, 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.stats-card-label {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  margin-block-end: 16px;
}

.stats-card-divider {
  inline-size: 100%;
  block-size: 1px;
  background-color: #e2e8f0; /* 薄いグレーの線 */
  margin-block-end: 16px;
  max-inline-size: 80%; /* 線を少し短くする */
}

.stats-card-number {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
  font-family: var(--font-en); /* 数字を目立たせる */
}

.stats-card-number .unit {
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-text);
  margin-inline-start: 4px;
  font-weight: 700;
  vertical-align: baseline;
}


/* ==============================================
   フッター (Redesign)
   ============================================== */
.footer-new {
  background: var(--color-navy);
  color: var(--color-white);
  padding-block-start: clamp(40px, 8vw, 80px);
}

/* フッター内部レイアウト */
.footer-inner {
  --width-container: 100%; /* パターンB: フッター全幅化 */
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vw, 60px);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(16px, 2vw, 20px);
  width: 100%;
}

/* Footer Column Styles */
.footer-col-title {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  color: var(--color-white);
  margin-block-end: clamp(16px, 3vw, 24px);
}

.footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-col-list li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(12px, 1.4vw, 13px);
  transition: color 0.2s;
}

.footer-col-list li a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

/* SNS Icons */
.footer-sns-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto; /* サイズ固定解除 */
  height: auto;
  text-decoration: none;
  transition: opacity 0.2s;
  /* 枠線・背景色削除 */
  background-color: transparent;
  border: none;
  padding: 4px; /* クリック領域確保のためのパディング */
}

.sns-link:hover {
  opacity: 0.7; /* ホバー時に薄くする */
  background-color: transparent;
}

.sns-link img {
  width: 22px; /* 横幅を統一 */
  height: auto;
  display: block;
}

/* Xアイコンなどの個別調整不要 */

/* Bottom Links */
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-bottom-links li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(11px, 1.3vw, 12px);
}

.footer-bottom-links li a:hover {
  text-decoration: underline;
  color: var(--color-white);
}

/* Copyright */
.box-copyright {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.6);
  padding-block: clamp(40px, 8vw, 80px) clamp(24px, 4vw, 40px);
  font-size: clamp(10px, 1.2vw, 11px);
}

.copyright-inner { /* inner-cmn を継承 */
  padding-inline: var(--spacing-gutter);
}

.copyright-txt {
  margin: 0;
  /* 左寄せのまま */
}

/* レスポンシブ Grid */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
  }

  .footer-col-sns {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom-links {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* フッター レスポンシブ */
@media (max-width: 768px) {
  .footer-new {
    padding-block-start: 60px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 40px;
  }

  .footer-nav {
    justify-content: flex-start;
    width: 100%;
  }

  .footer-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .copyright-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* トップへ戻るボタン（リッチデザイン） */
.old_style #toTopBtn,
#toTopBtn {
  position: fixed;
  inset-inline-end: 30px;
  inset-block-end: 30px;
  inset-inline-start: auto;
  inset-block-start: auto;
  inline-size: 60px;
  block-size: 60px;
  background: var(--color-white);
  color: var(--color-navy);
  border: none;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
  overflow: hidden;
}

.old_style #toTopBtn::before,
#toTopBtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease;
  z-index: -1;
}

.old_style #toTopBtn:hover,
#toTopBtn:hover {
  transform: translateY(-8px);
  color: var(--color-white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.old_style #toTopBtn:hover::before,
#toTopBtn:hover::before {
  transform: scale(1);
}

.old_style #toTopBtn i,
#toTopBtn i {
  font-size: clamp(20px, 2.8vw, 24px);
  position: relative;
  inset: auto;
  z-index: 2;
}

/* ==============================================
   Upcoming Live Seminars (Refactored)
   ============================================== */
.home-seminar-section {
  padding-block: clamp(60px, 8vw, 100px);
  background-color: #f8f9fa;
}

.home-seminar-layout {
  display: grid;
  grid-template-columns: clamp(300px, 30vw, 450px) 1fr;
  gap: clamp(40px, 5vw, 60px);
  align-items: start;
}

/* 左側イントロ */
.home-seminar-intro {
  position: sticky;
  top: 100px;
}

.home-seminar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: #e53e3e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(229, 62, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}

.home-seminar-title {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  margin-block-end: 24px;
  font-family: var(--font-en);
}

.home-seminar-lead {
  font-size: clamp(13px, 1.65vw, 15px);
  line-height: 1.8;
  color: var(--color-text);
  margin-block-end: 32px;
}


/* 右側コンテンツ（タブ・リスト） */
.home-seminar-content-wrapper {
  min-width: 0;
}

/* タブ */
.home-seminar-tabs {
  display: flex;
  gap: 16px;
  margin-block-end: 32px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 1px;
}

.home-seminar-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 24px;
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 700;
  color: #888;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  font-family: var(--font-en);
}

.home-seminar-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-navy);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.home-seminar-tab-btn:hover {
  color: var(--color-navy);
}

.home-seminar-tab-btn.is-active {
  color: var(--color-navy);
}

.home-seminar-tab-btn.is-active::after {
  transform: scaleX(1);
}

/* パネル */
.home-seminar-panel {
  display: none;
  animation: fadeIn 0.4s ease;
}

.home-seminar-panel.is-active {
  display: block;
}

/* カードリスト */
.home-seminar-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-seminar-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.home-seminar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-color: rgba(26, 54, 93, 0.1);
}

.home-seminar-card-inner {
  display: flex;
  gap: 24px;
}

/* 日付ボックス */
.home-seminar-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #f0f4f8;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  color: var(--color-navy);
  font-family: var(--font-en);
}

.home-seminar-date-box .month {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}

.home-seminar-date-box .day {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  line-height: 1;
}

/* コンテンツ */
.home-seminar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-seminar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 16px;
}

.home-seminar-card-title {
  font-size: clamp(18px, 2.2vw, 20px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.4;
  margin: 0;
}

.home-seminar-time {
  white-space: nowrap;
  font-size: clamp(12px, 1.5vw, 14px);
  color: #666;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Seminar Meta Info (Location & Deadline) - Grid Layout */
.home-seminar-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 16px;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: var(--color-gray-dark);
}

@media (min-width: 640px) {
  .home-seminar-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px; /* gap-x-6 approx */
  }
}

.home-seminar-location,
.home-seminar-deadline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-seminar-location i,
.home-seminar-deadline i {
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: var(--color-gray-dark);
}



.home-seminar-meta i {
  color: #a0aec0;
}

.home-seminar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.home-seminar-seats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  color: var(--color-navy);
}

.seats-icon-group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #e2e8f0;
  border-radius: 50%;
  color: #4a5568;
  font-size: clamp(11px, 1.3vw, 12px);
}

.home-seminar-seats.warning {
  color: #e53e3e;
}

.home-seminar-seats.warning .seats-icon-group {
  background: #fed7d7;
  color: #c53030;
}

.home-seminar-register-btn {
  display: inline-block;
  padding: 8px 20px;
  background-color: var(--color-navy);
  color: #fff;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid var(--color-navy);
}

.home-seminar-register-btn:hover {
  background-color: #fff;
  color: var(--color-navy);
}

/* レスポンシブ */
@media screen and (max-width: 1000px) {
  .home-seminar-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .home-seminar-intro {
    position: static;
    text-align: center;
  }

  .home-seminar-label {
    justify-content: center;
  }

  .home-seminar-btn {
    width: 100%;
  }

  /* タブもスクロール可能にするなどの工夫もあり */
  .home-seminar-tabs {
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  .home-seminar-card-inner {
    flex-direction: column;
    gap: 16px;
  }

  .home-seminar-date-box {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 8px 16px;
    justify-content: space-between;
  }

  .home-seminar-date-box .month,
  .home-seminar-date-box .day {
    margin: 0;
    font-size: clamp(14px, 1.8vw, 16px);
  }

  .home-seminar-header {
    flex-direction: column;
    gap: 8px;
  }

  .home-seminar-meta {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==============================================
   Video Categories Page
   ============================================== */

/* コンテナ設定 */
.box-wrapper.video-categories-main {
  background: #fff;
  min-height: 100vh;
}

.video-categories-main .inner-cmn {
  padding-block: 40px;
}

/* パンくずリスト */
.vc-breadcrumb {
  padding-block: 20px 40px;
}

.vc-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-dark);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
}

.vc-breadcrumb a {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.vc-breadcrumb a:hover {
  color: var(--color-navy);
}

.vc-breadcrumb .current {
  color: var(--color-navy);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ページヘッダー */
.vc-page-header {
  margin-block-end: 60px;
}

.vc-title {
  font-family: var(--font-en);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: 16px;
  line-height: 1.2;
}

.vc-lead {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: var(--color-text);
  line-height: 1.8;
  opacity: 0.8;
}

/* カテゴリーセクション */
.vc-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: 32px;
  gap: 20px;
  flex-wrap: wrap;
}

/* 最初のセクションは上マージン不要 */
section:first-of-type .vc-section-header {
  margin-block-start: 0;
}

.vc-section-header .header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vc-section-header .icon-box {
  inline-size: 56px;
  block-size: 56px;
  background: #eff6ff; /* 薄い青 */
  color: var(--color-navy);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbeafe;
}

.vc-section-header .icon-box span {
  font-size: clamp(24px, 3.2vw, 28px);
}

.vc-section-header .section-title {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: 4px;
}

.vc-section-header .section-desc {
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: var(--color-gray-dark);
}

.vc-section-header .view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-weight: 600;
  font-size: clamp(0.8125rem, 1.45vw, 0.9rem);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

.vc-section-header .view-all-btn:hover {
  background: #eff6ff;
}

/* カテゴリーグリッド */
.vc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .vc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .vc-grid {
    grid-template-columns: 1fr;
  }
}

/* カードスタイル */
.vc-card {
  display: block;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.3s ease;
  height: 100%;
}

.vc-card:hover {
  border-color: var(--color-navy);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.vc-card .card-hover-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--color-navy);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.vc-card .card-hover-icon span {
  font-size: clamp(24px, 4vw, 32px);
}

.vc-card:hover .card-hover-icon {
  opacity: 1;
  transform: scale(1);
}

.vc-card .card-icon {
  display: inline-flex;
  padding: 8px;
  border-radius: var(--radius-md);
  margin-block-end: 16px;
}

.vc-card .card-icon.blue-bg {
  background: #eff6ff;
  color: var(--color-navy);
}

.vc-card .card-icon span {
  font-size: clamp(24px, 4vw, 32px);
}

.vc-card .card-title {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-block-end: 8px;
  transition: color 0.3s ease;
}

.vc-card:hover .card-title {
  color: var(--color-navy-light);
}

.vc-card .card-desc {
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin-block-end: 20px;
}

.vc-card .card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  color: #94a3b8;
  font-weight: 600;
  margin-top: auto;
}

/* プロモーションバナー */
.vc-promo-banner {
  display: block;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--color-white);
  text-decoration: none;
  min-height: 300px;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.vc-promo-banner:hover {
  transform: scale(1.01);
}

.vc-promo-banner .banner-bg {
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  z-index: 1;
}

/* 背景装飾 */
.vc-promo-banner .banner-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  z-index: 1;
}

.vc-promo-banner .banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(32px, 6vw, 60px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

@media (max-width: 768px) {
  .vc-promo-banner .banner-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

.vc-promo-banner .text-area {
  flex: 1;
}

.vc-promo-banner .banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 600;
  margin-block-end: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

.vc-promo-banner .banner-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-block-end: 16px;
  line-height: 1.2;
}

.vc-promo-banner .banner-desc {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  max-width: 600px;
  margin-block-end: 24px;
}

.vc-promo-banner .banner-meta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.vc-promo-banner .meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: rgba(255, 255, 255, 0.9);
}

.vc-promo-banner .icon-area {
  flex-shrink: 0;
}

.vc-promo-banner .arrow-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.vc-promo-banner .arrow-circle span {
  font-size: clamp(24px, 4vw, 32px);
  color: white;
}

.vc-promo-banner:hover .arrow-circle {
  background: var(--color-white);
  transform: translateX(8px);
}

.vc-promo-banner:hover .arrow-circle span {
  color: var(--color-navy);
}

/* ==============================================
   パンくずリスト
   ============================================== */
/* パンくずリスト (Stitch Style) */
.vc-breadcrumb-wrap {
  margin-bottom: 32px;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: var(--color-gray-dark);
}

.vc-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.vc-breadcrumb-list li {
  display: flex;
  align-items: center;
}

.vc-breadcrumb-link {
  display: flex;
  align-items: center;
  color: var(--color-gray-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.vc-breadcrumb-link:hover {
  color: var(--color-navy);
}

.vc-breadcrumb-link .material-symbols-outlined {
  font-size: clamp(1rem, 1.8vw, 1.125rem); /* text-lg */
  margin-inline-end: 4px;
  line-height: 1;
}

.vc-breadcrumb-separator {
  display: flex;
  align-items: center;
  color: var(--color-gray-medium);
  margin-inline: 4px;
}

.vc-breadcrumb-separator .material-symbols-outlined {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1;
}

.vc-breadcrumb-current {
  color: var(--color-navy);
  font-weight: 700;
  display: flex;
  align-items: center;
}

/* ==============================================
   Stitch Design Styles (Video Categories)
   ============================================== */

/* レイアウト・グリッド */
.vc-layout-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 60px);
}

.vc-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}

@media (min-width: 768px) {
  .vc-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ページタイトル */
.vc-page-header {
  margin-bottom: 40px;
}

.vc-page-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.vc-page-lead {
  font-size: clamp(0.875rem, 1.55vw, 0.95rem);
  color: var(--color-gray-dark);
  max-width: 800px;
  line-height: 1.8;
}

/* セクションカード（白背景・角丸・影） */
.vc-section-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* shadow-sm */
  transition: box-shadow 0.3s ease;
}

.vc-section-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

/* セクションヘッダー */
.vc-section-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .vc-section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.vc-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vc-section-icon {
  background: #f0f4f8; /* var(--blue-50)っぽい色 */
  color: var(--color-navy);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 4vw, 32px); /* icon size */
  border: 1px solid #e2e8f0;
}

.vc-section-icon .material-symbols-outlined {
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1;
}

.vc-section-info h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.vc-section-info p {
  color: var(--color-gray-dark);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
}

.vc-view-all-btn {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

@media (min-width: 768px) {
  .vc-view-all-btn {
    display: flex;
  }
}

.vc-view-all-btn:hover {
  opacity: 0.8;
}

/* 子カテゴリカード (Item Card) */
.vc-item-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.vc-item-card:hover {
  border-color: rgba(26, 54, 93, 0.5); /* navy alpha */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.vc-item-card-icon {
  background: #f0f4f8;
  color: var(--color-navy);
  padding: 8px;
  border-radius: var(--radius-md);
  width: fit-content;
  margin-bottom: 16px;
}

.vc-item-card-icon .material-symbols-outlined {
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1;
}

.vc-item-card h3 {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 8px;
  transition: color 0.3s;
}

.vc-item-card:hover h3 {
  color: var(--color-navy-light);
}

.vc-item-card p {
  color: var(--color-gray-dark);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  line-height: 1.6;
  margin-bottom: 16px;
}

.vc-item-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8; /* slate-400 */
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 500;
}

.vc-play-icon-overlay {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--color-navy);
  opacity: 0;
  transition: opacity 0.3s;
}

.vc-item-card:hover .vc-play-icon-overlay {
  opacity: 1;
}

/* 単独カテゴリカード (Single Category Card / プロモーション風) */
.vc-single-category-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  border-radius: var(--radius-xl);
  padding: 32px;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .vc-single-category-card {
    padding: 48px;
  }
}

.vc-single-category-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: scale(1.01);
}

/* 背景装飾 */
.vc-single-category-card-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.1) 0%, transparent 20%),
                    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.1) 0%, transparent 20%);
  opacity: 1;
  pointer-events: none;
}

.vc-single-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .vc-single-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.vc-single-text {
  flex: 1;
}

.vc-single-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 600;
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
}

.vc-single-title {
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.2;
}

.vc-single-desc {
  color: #bfdbfe; /* blue-200っぽい色 */
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.6;
  max-width: 600px;
}

.vc-single-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.vc-single-meta-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  color: #eff6ff;
}

.vc-single-action-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}

.vc-single-action-icon .material-symbols-outlined {
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1;
}

.vc-single-category-card:hover .vc-single-action-icon {
  background: var(--color-white);
  color: var(--color-navy);
}

/* ==============================================
   Video Education Layout & Components
   ============================================== */
/* Page Wrapper (Header is 100% width, below is content) */
.video-page-wrapper {
  background-color: var(--color-gray-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main Layout Container */
.video-layout-container {
  --width-container: 100%; /* パターンB: 動画レイアウト全幅化 */
  display: flex;
  flex: 1;
  width: 100%;
  max-width: var(--width-container);
  margin: 0 auto;
}

/* Sidebar */
.video-sidebar {
  width: 256px;
  background-color: var(--color-white);
  border-right: 1px solid var(--color-gray);
  flex-shrink: 0;
  display: none;
}
@media (min-width: 1024px) {
  .video-sidebar {
    display: block;
  }
}

/* Main Content Area */
.video-main-content {
  flex: 1;
  min-width: 0;
  padding: clamp(16px, 3vw, 32px) var(--spacing-gutter);
}

/* Titles */
.video-section-title {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 8px;
}
.video-section-subtitle {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--color-gray-dark);
  margin-bottom: 24px;
}

/* Grid Layouts */
.video-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}
@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .video-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Video Card */
.video-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  border-color: var(--color-accent);
}

/* Thumbnail */
.video-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-gray);
  overflow: hidden;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.video-card:hover .video-card-thumb img {
  transform: scale(1.05);
}
.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: var(--color-white);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 500;
  font-family: var(--font-en);
}
.video-status-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 4px 10px;
  border-radius: var(--radius-xl);
  font-family: var(--font-en);
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card Body */
.video-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.video-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--color-gray-dark);
  margin-bottom: 8px;
}
.video-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.video-meta-item .material-symbols-outlined {
  font-size: clamp(14px, 1.8vw, 16px);
}
.video-card-title {
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card-desc {
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Sidebar Nav */
.sidebar-nav {
  padding: 24px 16px;
}
.sidebar-group {
  margin-bottom: 24px;
}
.sidebar-title {
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 700;
  color: var(--color-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  padding: 0 12px;
}
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 500;
  transition: all 0.2s;
}
.sidebar-link .material-symbols-outlined {
  font-size: clamp(18px, 2.2vw, 20px);
  color: var(--color-gray-dark);
}
.sidebar-link:hover {
  background-color: var(--color-gray-light);
  color: var(--color-navy);
}
.sidebar-link:hover .material-symbols-outlined {
  color: var(--color-navy);
}
.sidebar-link.active {
  background-color: var(--color-navy);
  color: var(--color-white);
}
.sidebar-link.active .material-symbols-outlined {
  color: var(--color-white);
}

/* Filters & Controls */
.video-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  background: var(--color-white);
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray);
}
.video-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.video-filter-btn {
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 500;
  background: var(--color-gray-light);
  color: var(--color-gray-dark);
  border: 1px solid transparent;
  transition: all 0.2s;
}
.video-filter-btn:hover {
  background: var(--color-gray);
  color: var(--color-text);
}
.video-filter-btn.active {
  background: var(--color-navy);
  color: var(--color-white);
}
.video-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--color-gray-dark);
}
.video-sort select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: clamp(12px, 1.5vw, 14px);
  outline: none;
  cursor: pointer;
}

.video-list-page {
  --video-list-sidebar-size: 272px;
  gap: clamp(24px, 3vw, 40px);
  align-items: flex-start;
  background: #f8fafc;
  font-family: "Noto Sans JP", sans-serif;
  padding-inline: var(--spacing-gutter);
  padding-block: clamp(24px, 3vw, 40px) clamp(48px, 5vw, 72px);
}

.video-list-sidebar {
  inline-size: var(--video-list-sidebar-size);
  flex: 0 0 var(--video-list-sidebar-size);
  background: transparent;
  border-inline-end: none;
}

.video-list-sidebar-inner {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  padding: 16px 14px;
}

.video-list-sidebar-group + .video-list-sidebar-group {
  margin-block-start: 60px;
}

.sidebar-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(0.8125rem, 1.35vw, 0.875rem);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.sidebar-section-list {
  margin-block-start: 10px;
}

.sidebar-section-list > .sidebar-parent-link + .sidebar-parent-link,
.sidebar-section-list > .sidebar-submenu + .sidebar-parent-link {
  margin-block-start: 12px;
}

.sidebar-menu-btn,
.sidebar-parent-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  inline-size: 100%;
  border-radius: var(--radius-2xl);
  color: #475569;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sidebar-menu-btn {
  padding-block: 12px;
  padding-inline: 14px;
  font-size: clamp(0.8125rem, 1.3vw, 0.875rem);
  font-weight: 600;
}

.sidebar-parent-link {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding-block: 13px;
  padding-inline: 14px;
  font-size: clamp(0.8125rem, 1.35vw, 0.875rem);
  font-weight: 700;
}

.sidebar-menu-copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}

.sidebar-menu-copy span:last-child {
  overflow-wrap: anywhere;
}

.sidebar-menu-icon,
.sidebar-parent-arrow {
  color: #94a3b8;
  transition: color 0.2s ease;
}

.sidebar-menu-icon {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}

.sidebar-parent-arrow {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}

.sidebar-divider {
  border-block-start: 1px solid rgba(148, 163, 184, 0.18);
  margin-block: 12px 12px;
}

.sidebar-submenu {
  margin-block-start: 10px;
  margin-inline-start: 16px;
  border-inline-start: 1px solid #e2e8f0;
  padding-inline-start: 10px;
}

.sidebar-submenu .sidebar-menu-btn + .sidebar-menu-btn {
  margin-block-start: 4px;
}

.sidebar-menu-btn:hover,
.sidebar-parent-link:hover {
  color: var(--color-navy);
  background: rgba(238, 242, 255, 0.8);
  text-decoration: none;
}

.sidebar-parent-link:hover {
  border-color: rgba(26, 54, 93, 0.18);
}

.sidebar-menu-btn:hover .sidebar-menu-icon,
.sidebar-menu-btn:hover .sidebar-parent-arrow,
.sidebar-parent-link:hover .sidebar-menu-icon,
.sidebar-parent-link:hover .sidebar-parent-arrow {
  color: var(--color-navy);
}

.sidebar-menu-btn.active {
  background: var(--color-navy);
  color: var(--color-white);
}

.sidebar-menu-btn.active .sidebar-menu-icon,
.sidebar-menu-btn.active .sidebar-parent-arrow {
  color: var(--color-white);
}

.video-list-main {
  padding: 0;
}

.video-list-breadcrumbs {
  margin-block-end: 24px;
}

.video-list-mobile-chips {
  display: none;
}

.video-list-mobile-chips__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block-end: 4px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.video-list-mobile-chips__track::-webkit-scrollbar {
  display: none;
}

.video-list-mobile-chips__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-block-size: 2.5rem;
  padding-block: 0.625rem;
  padding-inline: 0.875rem;
  border: 1px solid rgba(var(--color-navy-rgb), 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
  scroll-snap-align: start;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.video-list-mobile-chips__link:hover,
.video-list-mobile-chips__link:focus-visible {
  border-color: rgba(var(--color-navy-rgb), 0.16);
  background: #ffffff;
  color: #0f172a;
  outline: none;
}

.video-list-mobile-chips__link.is-active {
  border-color: rgba(var(--color-navy-rgb), 0.92);
  background: var(--color-navy);
  color: #ffffff;
}

.video-list-header {
  margin-block-end: 28px;
}

.video-list-mobile-nav {
  display: none;
}

.video-list-title {
  font-size: clamp(2rem, 4vw, 3.125rem);
  margin-block-end: 12px;
}

.video-list-description {
  max-inline-size: 68ch;
  margin-block-end: 0;
  line-height: 1.8;
}

.video-list-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  min-block-size: clamp(320px, 42vw, 420px);
  margin-block-end: 24px;
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.14);
}

.video-list-hero-media,
.video-list-hero-media img,
.video-list-hero-overlay {
  position: absolute;
  inset: 0;
}

.video-list-hero-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.video-list-hero-overlay {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.34) 100%);
}

.video-list-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  block-size: 100%;
  padding-block: clamp(28px, 4vw, 44px);
  padding-inline: clamp(24px, 4vw, 44px);
  color: var(--color-white);
}

.video-list-hero-kicker {
  align-self: flex-start;
  border-radius: var(--radius-pill);
  background: rgba(255, 127, 80, 0.92);
  box-shadow: 0 12px 28px rgba(255, 127, 80, 0.28);
  padding-block: 7px;
  padding-inline: 12px;
  font-size: clamp(0.625rem, 1.1vw, 0.6875rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.video-list-hero-copy {
  align-self: end;
  max-inline-size: 760px;
}

.video-list-hero-title {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
}

.video-list-hero-text {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.8;
}

.video-list-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.video-list-hero-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  padding-block: 8px;
  padding-inline: 14px;
  font-size: clamp(0.75rem, 1.3vw, 0.8125rem);
  font-weight: 700;
}

.video-list-hero-chip--accent {
  background: rgba(255, 127, 80, 0.16);
  color: #ffd7cc;
}

.video-list-hero-link {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: #ff7f50;
  color: var(--color-white);
  min-inline-size: 160px;
  padding-block: 15px;
  padding-inline: 24px;
  font-size: clamp(0.875rem, 1.45vw, 1rem);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.video-list-hero-link:hover {
  background: #ff9168;
  color: var(--color-white);
  text-decoration: none;
}

.video-list-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
  padding-inline: 20px;
  margin-block-end: 28px;
}

.video-list-summary-copy > * + * {
  margin-block-start: 6px;
}

.video-list-summary-count {
  margin: 0;
  color: #475569;
  font-size: clamp(0.875rem, 1.45vw, 0.9375rem);
  font-weight: 700;
}

.video-list-summary-keyword {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(0.75rem, 1.25vw, 0.8125rem);
  font-weight: 700;
}

.video-list-summary-sort {
  margin: 0;
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.video-list-sortbox .box-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.video-list-sortbox .box-sort .btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: fit-content;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: #64748b;
  font-size: clamp(0.75rem, 1.25vw, 0.8125rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  padding-block: 10px;
  padding-inline: 14px;
  text-decoration: none;
}

.video-list-sortbox .box-sort .btn.icon {
  position: static;
  padding-inline-end: 14px;
}

.video-list-sortbox .box-sort .btn.icon > i {
  position: static;
  inset: auto;
  margin: 0;
}

.video-list-sortbox .box-sort .btn .fa {
  font-size: 0.875em;
  line-height: 1;
}

.video-list-sortbox .box-sort .btn.active {
  border-color: rgba(26, 54, 93, 0.18);
  background: #eef2ff;
  color: var(--color-navy);
}

.video-list-grid-wrap {
  margin-block-end: 40px;
}

.video-list-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 28px;
}

@media (min-width: 768px) {
  .video-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .video-list-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.video-list-card {
  border-radius: var(--radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.video-list-card:hover {
  transform: none;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
  color: inherit;
  text-decoration: none;
}

.video-list-card-thumb {
  overflow: hidden;
}

.video-list-card-thumb--fallback {
  object-fit: contain;
  background: #f8fafc;
}

.video-list-card-category {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-navy);
  padding-block: 6px;
  padding-inline: 10px;
  font-family: var(--font-en);
  font-size: clamp(0.625rem, 1.1vw, 0.6875rem);
  font-weight: 800;
}

.video-list-card-body {
  padding: 20px;
}

.video-list-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 12px;
}

.video-list-card-meta-chip {
  border-radius: var(--radius-pill);
  background: #eef2ff;
  color: var(--color-navy);
  padding-block: 4px;
  padding-inline: 8px;
  font-family: var(--font-en);
  font-size: clamp(0.625rem, 1.1vw, 0.6875rem);
  font-weight: 700;
}

.video-list-card-footer {
  margin-block-start: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid #f1f5f9;
}

.video-list-card-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-family: var(--font-en);
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.video-list-card-views .material-symbols-outlined {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.video-list-pagination {
  display: flex;
  justify-content: center;
  margin-block-start: 36px;
}

.header-new .submenu li.nav-category-child a {
  padding-inline-start: 2rem;
  position: relative;
}

.header-new .submenu li.nav-category-child a::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.35;
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.header-new .mega-menu-article {
  inline-size: 1000px;
}

.header-new .mega-menu-article .mega-menu-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}

.header-new .mega-menu-article .mega-menu-categories {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-end: 0;
}

.header-new .mega-menu-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.header-new .mega-menu-article .mega-menu-support {
  grid-template-columns: minmax(0, 1fr);
}

.header-new .mega-support-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-block: 14px;
  padding-inline: 18px;
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.header-new .mega-support-card:hover {
  border-color: var(--color-navy);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.header-new .mega-support-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-md);
  color: var(--color-navy);
  flex-shrink: 0;
}

.header-new .mega-support-card__icon .material-symbols-outlined {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
}

@media (max-width: 768px) {
  .header-new .header-nav .mega-menu-article,
  .header-new .header-nav .mega-menu {
    inline-size: 100%;
  }

  .header-new .header-nav .mega-menu-inner,
  .header-new .header-nav .mega-menu-article .mega-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .header-new .header-nav .mega-menu-categories,
  .header-new .header-nav .mega-menu-article .mega-menu-categories,
  .header-new .header-nav .mega-menu-support,
  .header-new .header-nav .mega-menu-article .mega-menu-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .header-new .header-nav .mega-category-card,
  .header-new .header-nav .mega-support-card {
    inline-size: 100%;
  }
}

.header-new .mega-support-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  flex: 1;
}

.header-new .mega-support-card__label {
  font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
  font-weight: 700;
}

.header-new .mega-support-card__description {
  font-size: clamp(0.6875rem, 1.1vw, 0.75rem);
  color: var(--color-gray-dark);
  line-height: 1.4;
}

.header-new .mega-support-card__arrow {
  font-size: 1.25rem;
  color: var(--color-navy);
  flex-shrink: 0;
}

.footer-new .footer-col-list > li.nav-category-child a {
  padding-inline-start: 1.5rem;
  position: relative;
}

.footer-new .footer-col-list > li.nav-category-child a::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.35;
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.video-list-empty {
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.74);
  padding-block: 40px;
  padding-inline: 24px;
  text-align: center;
}

.video-list-empty-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: #f8fafc;
  color: #64748b;
  padding-block: 6px;
  padding-inline: 12px;
  font-size: clamp(0.625rem, 1.1vw, 0.6875rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.video-list-empty-title {
  margin: 18px 0 12px;
  color: var(--color-navy);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
}

.video-list-empty-text {
  max-inline-size: 56ch;
  margin: 0 auto;
  color: #64748b;
  line-height: 1.8;
}

.video-list-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 24px;
}

.video-list-empty-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  color: #475569;
  min-inline-size: 168px;
  padding-block: 14px;
  padding-inline: 20px;
  font-weight: 700;
  text-decoration: none;
}

.video-list-empty-link--primary {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-white);
}

.video-list-empty-link:hover {
  color: var(--color-navy);
  text-decoration: none;
}

.video-list-empty-link--primary:hover {
  color: var(--color-white);
}

@media (max-width: 1279px) {
  .video-list-page {
    padding-inline: var(--spacing-gutter);
  }

  .video-list-hero-body {
    flex-direction: column;
    justify-content: flex-end;
  }

  .video-list-hero-link {
    align-self: flex-start;
  }
}

@media (max-width: 767px) {
  :root {
    --spacing-gutter: 12px;
  }

  .video-list-page {
    padding-block: 20px 32px;
  }

  .video-list-breadcrumbs {
    margin-block-end: 12px;
  }

  .video-list-mobile-chips {
    display: block;
    margin-block-end: 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .video-list-mobile-chips::-webkit-scrollbar {
    display: none;
  }

  .video-list-mobile-chips__track {
    inline-size: max-content;
    min-inline-size: 100%;
    padding-inline-end: 20px;
    overflow: visible;
  }

  .video-list-hero {
    min-block-size: 360px;
    border-radius: var(--radius-2xl);
  }

  .video-list-summary {
    padding-inline: 16px;
  }
}

/* ==============================================
   Swiper Custom Navigation Buttons
   （新着動画・記事 スライダー共通）
   ============================================== */
.content-block .swiper-button-prev.content-slider-prev,
.content-block .swiper-button-next.content-slider-next {
  width: 48px;
  height: 48px;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 参考画像のふわりとした影 */
  border: none;
  color: var(--color-text);
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;
}

/* ホバーエフェクト */
.content-block .swiper-button-prev.content-slider-prev:hover,
.content-block .swiper-button-next.content-slider-next:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-50%) scale(1.05); /* わずかに拡大 */
}

/* カードの少し外側に配置 */
.content-block .swiper-button-prev.content-slider-prev {
  left: -24px;
}
.content-block .swiper-button-next.content-slider-next {
  right: -24px;
}

/* デフォルトの太いアイコンテキストを非表示化するため color を上書きし、Font/SVG を除去 */
.content-block .swiper-button-prev.content-slider-prev::before,
.content-block .swiper-button-next.content-slider-next::before,
.content-block .swiper-button-prev.content-slider-prev svg,
.content-block .swiper-button-next.content-slider-next svg {
  display: none !important;
}

/* Swiperのデフォルトiconfont (swiper-icons) を非表示にする */
.content-block .swiper-button-prev.content-slider-prev::after,
.content-block .swiper-button-next.content-slider-next::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0.7;
  font-family: inherit; /* swiper-icons を上書き */
}

/* 左向き矢印 */
.content-block .swiper-button-prev.content-slider-prev::after {
  transform: translate(-30%, -50%) rotate(-135deg); /* 中心からやや右にずらして回転 */
}

/* 右向き矢印 */
.content-block .swiper-button-next.content-slider-next::after {
  transform: translate(-70%, -50%) rotate(45deg); /* 中心からやや左にずらして回転 */
}

/* === 非活性状態の非表示 === */
.content-block .swiper-button-disabled {
  opacity: 0 !important;
  pointer-events: none; /* クリックできないようにする */
}

/* === スライダー読み込み時のガタつき（Layout Shift）防止 === */
/* 最初は透明にしておき、Swiperが初期化（.swiper-initialized付与）されたらフワッと表示する（一般的でクリーンな手法） */

.new-video-swiper,
.new-article-swiper,
.home-seminar-side-swiper,
.home-seminar-swiper {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.new-video-swiper.swiper-initialized,
.new-article-swiper.swiper-initialized,
.home-seminar-side-swiper.swiper-initialized,
.home-seminar-swiper.swiper-initialized {
  opacity: 1;
}

/* JS実行前の縦並びを防ぐ最低限の指定 */
.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}

/* Swiper初期化後、カードの高さを一番高いものに合わせる設定 */
.swiper-height-auto .swiper-slide {
  block-size: auto; /* Swiperのデフォルト動作 */
  display: flex;
}

.swiper-height-auto .media-card {
  block-size: 100%; /* スライド（一番高いもの）と同じ高さまで伸ばす */
}

/* トップの新着スライダーで下端が欠けるケースの補正 */
body#page-index .new-video-swiper.swiper-height-auto .swiper-wrapper,
body#page-index .new-article-swiper.swiper-height-auto .swiper-wrapper,
body#page-index .home-seminar-side-swiper.swiper-height-auto .swiper-wrapper,
body#page-index .home-seminar-swiper.swiper-height-auto .swiper-wrapper {
  align-items: stretch;
}

body#page-index .new-video-swiper.swiper-height-auto .swiper-slide,
body#page-index .new-article-swiper.swiper-height-auto .swiper-slide,
body#page-index .home-seminar-side-swiper.swiper-height-auto .swiper-slide,
body#page-index .home-seminar-swiper.swiper-height-auto .swiper-slide {
  block-size: 100%;
  box-sizing: border-box;
  padding-block-end: 2px;
}

body#page-index .new-video-swiper.swiper-height-auto .swiper-slide > .top-home-media-card,
body#page-index .new-article-swiper.swiper-height-auto .swiper-slide > .top-home-media-card,
body#page-index .home-seminar-side-swiper.swiper-height-auto .swiper-slide > .top-home-seminar-card,
body#page-index .home-seminar-swiper.swiper-height-auto .swiper-slide > .top-home-seminar-card {
  block-size: 100%;
}

/* ==============================================
   Media Card 共通・詳細スタイル (.media-card 内)
   ============================================== */
.media-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.media-card .card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
  overflow: hidden;
  margin-block-end: 12px;
}

.media-card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card .thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}

.media-card .media-duration {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-white);
  font-size: clamp(10px, 1.2vw, 11px);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
  pointer-events: none;
}

.media-card .media-badge.category {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: clamp(9px, 1.1vw, 10px);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  font-weight: 700;
}

.media-card .card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.media-card .card-title {
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.5;
  margin-block-end: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* カード中段・下段の行コンテナ */
.media-card .card-meta-row {
  margin-block-end: 8px;
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* 最下段は上部マージン可変、両端揃えなど */
.media-card .card-meta-row.card-meta-bottom {
  margin-block-start: auto;
  margin-block-end: 0;
  gap: 12px;
  font-size: clamp(11px, 1.3vw, 12px);
  color: var(--color-gray-dark);
  min-block-size: 20px;
}

/* タグのコンテナ (折り返し時の余白担保) */
.media-card .card-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* タグ本体 (.tag などの干渉排除) */
.media-card .tag {
  margin: 0 !important;
  font-size: clamp(9px, 1.1vw, 10px);
  padding: 2px 6px;
  background: rgba(26, 54, 93, 0.05);
  color: var(--color-navy);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 視聴途中バッジなどのバリエーション */
.media-card .tag.status-mid {
  background: transparent;
  border: 1px solid currentColor;
  color: #2196F3;
  gap: 4px;
}

/* 価格表示 */
.media-card .goods-price {
  margin: 0;
  font-size: clamp(9px, 1.1vw, 10px);
  padding: 2px 6px;
  background: #f0f0f0;
  border-radius: var(--radius-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 日付・再生回数 */
.media-card .card-date,
.media-card .card-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

.media-card .card-views-placeholder {
  visibility: hidden;
  min-inline-size: 3.4em;
}

/* お気に入りボタン周り */
.media-card .card-fav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
}

/* favoriteボタンの余白リセット（グローバルな .favorite クラスの干渉避け） */
.media-card .favorite {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* トップページはカードhoverを「サムネイル拡大のみ」に限定 */
body#page-index .media-card {
  transition: none;
}

body#page-index .media-card:hover {
  transform: none;
  box-shadow: none;
}

body#page-index .media-card .card-thumb img {
  transition: transform 0.3s ease;
}

body#page-index .media-card:hover .card-thumb img {
  transform: scale(1.05);
}

/* ==============================================
   Seminar Card V2 (Event Schedule)
   ============================================== */
.home-seminar-section-v2 {
  padding-block: 60px;
  background-color: #fbfbfb; /* わずかに背景を変えてセクションを区切る */
}

.home-seminar-swiper {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.home-seminar-swiper.swiper-initialized {
  opacity: 1;
}

.home-seminar-slider-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.home-seminar-slider-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* サムネイル外のインラインステータス */
.home-seminar-slider-card .seminar-status-inline {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: clamp(9px, 1.1vw, 10px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-block-end: 4px;
  inline-size: fit-content;
}
.home-seminar-slider-card .seminar-status-inline.status-open {
  background: #4caf50;
}
.home-seminar-slider-card .seminar-status-inline.status-critical {
  background: #f44336;
}

.home-seminar-slider-card .card-info {
  padding: 16px;
}

/* 日付とメタ情報の並び */
.home-seminar-slider-card .seminar-date-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-block-end: 12px;
}

.home-seminar-slider-card .seminar-date-badge {
  flex: 0 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding-block: 6px;
  font-family: var(--font-en);
  line-height: 1.1;
}

.home-seminar-slider-card .seminar-date-badge .month {
  font-size: clamp(9px, 1.1vw, 10px);
  font-weight: 500;
  opacity: 0.9;
}

.home-seminar-slider-card .seminar-date-badge .day {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
}

.home-seminar-slider-card .seminar-time-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(11px, 1.3vw, 12px);
  color: var(--color-gray-dark);
}

.home-seminar-slider-card .seminar-time-info span {
  display: flex;
  align-items: center;
  gap: 10px; /* アイコンボックスとの間隔 */
}

/* ポップなアイコンボックス */
.home-seminar-slider-card .seminar-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 時間：ブルー */
.home-seminar-slider-card .icon-time {
  background-color: rgba(33, 150, 243, 0.1);
  color: #1976D2;
}

/* 会場：レッド */
.home-seminar-slider-card .icon-venue {
  background-color: rgba(244, 67, 54, 0.1);
  color: #D32F2F;
}

/* 座席：オレンジ */
.home-seminar-slider-card .icon-seats {
  background-color: rgba(255, 152, 0, 0.12);
  color: #EF6C00;
}

.home-seminar-slider-card .seminar-time-info svg,
.home-seminar-slider-card .seminar-time-info i {
  /* color は親の .seminar-icon-box から継承 */
  flex-shrink: 0;
}

.home-seminar-slider-card .card-title {
  font-size: clamp(13px, 1.65vw, 15px);
  margin-block-end: 16px;
  min-block-size: 2.8em; /* 2行分確保 */
}

/* フッター情報（残席・締切） */
.home-seminar-slider-card .seminar-footer-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-start: 12px;
  border-block-start: 1px solid #f0f0f0;
  font-size: clamp(10px, 1.2vw, 11px);
  color: var(--color-gray-dark);
}

.home-seminar-slider-card .seminar-footer-info .seats strong {
  color: var(--color-navy);
  font-size: clamp(12px, 1.4vw, 13px);
}

.home-seminar-slider-card .seminar-footer-info .deadline {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ==============================================
   Video Categories - Cutout Card UI
   ページ背景色: --vc-page-bg を基準に
   えぐれの色も一致させること
   ============================================== */
:root {
  --vc-page-bg: #fff;        /* ページ全体の背景 */
  --vc-cutout-bg: #fff;      /* えぐれ色（ページ背景と同一） */
  --vc-card-radius: 40px;
  --vc-sub-radius: 28px;
}

/* ---- このページのbody背景（box-shadowの飛び出しを見えなくする） ---- */
body#page-video-categories {
  background: var(--vc-page-bg);
}

/* ---- ページ全体ラッパー ---- */
.video-categories-main {
  background: var(--vc-page-bg);
  min-block-size: 80vh;
}
.vc-wrapper {
  max-inline-size: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
  padding-block: 40px 80px;
}

/* ---- ページヘッダー ---- */
.vc-page-header {
  margin-block-end: 56px;
}
.vc-page-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--color-navy);
  margin-block-end: 12px;
}
.vc-page-lead {
  font-size: clamp(13px, 1.65vw, 15px);
  color: var(--color-gray-dark);
  max-inline-size: 600px;
  line-height: 1.7;
}

/* ---- カテゴリセクション ---- */
.vc-cat-section {
  margin-block-end: 128px;
}

/* ==============================================
   大カテゴリ えぐれカード (vc-main-card)
   ============================================== */
.vc-main-card {
  position: relative;
  background: var(--color-navy);
  border-radius: var(--vc-card-radius);
  padding: 40px;
  color: var(--color-white);
  box-shadow: none;
  margin-block-end: 24px;
  overflow: visible; /* えぐれが外にはみ出るため */
}
#page-video-categories .vc-main-card:not(.vc-main-card--wide) {
  border-radius: 60px 18px 0 0;
  overflow: hidden;
  isolation: isolate;
}
#page-video-categories .vc-main-card:not(.vc-main-card--wide)::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: -1px;
  inline-size: 64px;
  block-size: 64px;
  background-color: var(--vc-page-bg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='68' height='68' viewBox='0 0 68 68' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.164 16.836H47.6577C30.6354 16.836 16.836 30.6353 16.836 47.6577V51.164C16.836 60.4623 9.29829 68 0 68H68V0C68 9.29829 60.4623 16.836 51.164 16.836Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg width='68' height='68' viewBox='0 0 68 68' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.164 16.836H47.6577C30.6354 16.836 16.836 30.6353 16.836 47.6577V51.164C16.836 60.4623 9.29829 68 0 68H68V0C68 9.29829 60.4623 16.836 51.164 16.836Z' fill='white'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100%;
  z-index: 6;
  pointer-events: none;
}
#page-video-categories .vc-main-card:not(.vc-main-card--wide)::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5l8 7-8 7' fill='none' stroke='%232563eb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  z-index: 7;
  pointer-events: none;
}

/* ---- 収まりやすい横幅ウォッチ用クラス ---- */
.vc-main-card-body {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding-inline-end: 60px; /* 右上えぐれ分の余白 */
}
#page-video-categories .vc-main-card:not(.vc-main-card--wide) .vc-main-card-body {
  padding-inline-end: 84px;
  padding-block-end: 40px;
}

/* ワイドカード（匠たちの声：小カテゴリなし） */
.vc-main-card--wide .vc-main-card-body {
  padding-inline-end: 100px; /* 右上＋右下えぐれ両方の余白 */
}
.vc-main-card-body--wide {
  padding-block-end: 80px; /* 右下えぐれ分 */
}

/* カードアイコン */
.vc-main-card-icon-wrap {
  flex-shrink: 0;
  width: 72px;
  block-size: 72px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.vc-main-card-icon-wrap .material-symbols-outlined {
  font-size: clamp(28px, 4.5vw, 36px);
  color: var(--color-white);
}

/* カードテキスト */
.vc-main-card-label {
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
  margin-block-end: 8px;
  font-family: var(--font-en), sans-serif;
}
.vc-main-card-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--color-white);
  margin-block-end: 12px;
}
.vc-main-card-desc {
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-block-end: 20px;
  max-inline-size: 480px;
}

/* 統計チップ */
.vc-main-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vc-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-2xl);
  padding: 6px 14px;
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 600;
  color: var(--color-white);
  backdrop-filter: blur(4px);
}
.vc-stat-chip .material-symbols-outlined { font-size: clamp(14px, 1.8vw, 16px); }
.vc-stat-chip.glow {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ==============================================
   えぐれ汎用クラス (vc-cutout)
   --vc-cutout-bg = 「えぐれて見える」背景色（ページ背景）
   ============================================== */
.vc-cutout {
  position: absolute;
  background: var(--vc-cutout-bg);
  z-index: 10;
}

/* ── 右上えぐれ (--tr) ── */
.vc-cutout--tr {
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 100px;
  block-size: 100px;
  border-end-start-radius: 40px; /* 内側カーブ */
}
/* 右上・滑らかコーナー左 */
.vc-cutout--tr::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -36px;
  inline-size: 36px;
  block-size: 36px;
  background: transparent;
  border-start-end-radius: 36px;
  box-shadow: 18px -18px 0 18px var(--vc-cutout-bg);
}
/* 右上・滑らかコーナー下 */
.vc-cutout--tr::after {
  content: "";
  position: absolute;
  inset-block-start: 100px;
  inset-inline-end: 0;
  inline-size: 36px;
  block-size: 36px;
  background: transparent;
  border-start-end-radius: 36px;
  box-shadow: 18px -18px 0 18px var(--vc-cutout-bg);
}

/* ── 右下えぐれ (--br) ── */
.vc-cutout--br {
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 112px;
  block-size: 112px;
  border-start-start-radius: 48px; /* 内側カーブ */
}
.vc-cutout--br::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -40px;
  inline-size: 40px;
  block-size: 40px;
  background: transparent;
  border-end-end-radius: 40px;
  box-shadow: 20px 20px 0 20px var(--vc-cutout-bg);
}
.vc-cutout--br::after {
  content: "";
  position: absolute;
  inset-block-end: 112px;
  inset-inline-end: 0;
  inline-size: 40px;
  block-size: 40px;
  background: transparent;
  border-end-end-radius: 40px;
  box-shadow: 20px 20px 0 20px var(--vc-cutout-bg);
}

/* ── 小カテゴリカード用・小サイズえぐれ (--sm) ── */
.vc-cutout--sm {
  inline-size: 68px;
  block-size: 68px;
}
.vc-cutout--sm.vc-cutout--tr {
  border-end-start-radius: 28px;
}
.vc-cutout--sm.vc-cutout--tr::before {
  inset-inline-start: -24px;
  inline-size: 24px;
  block-size: 24px;
  border-start-end-radius: 24px;
  box-shadow: 12px -12px 0 12px var(--vc-cutout-bg);
}
.vc-cutout--sm.vc-cutout--tr::after {
  inset-block-start: 68px;
  inline-size: 24px;
  block-size: 24px;
  border-start-end-radius: 24px;
  box-shadow: 12px -12px 0 12px var(--vc-cutout-bg);
}

/* えぐれ内のボタン */
.vc-cutout-btn {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.2s;
  z-index: 11;
}
.vc-cutout-btn .material-symbols-outlined { font-size: clamp(18px, 2.5vw, 22px); }
.vc-cutout-btn:hover {
  transform: scale(1.08);
  background: var(--color-navy-light);
}
/* 右下えぐれ（secondary）用 */
.vc-cutout-btn.secondary {
  inset-block-start: auto;
  inset-block-end: 10px;
  background: var(--color-white);
  border: none;
  color: var(--color-navy);
  box-shadow: none;
}
.vc-cutout-btn.secondary:hover {
  background: var(--color-gray-light);
}

/* 小サイズ版 */
.vc-cutout-btn.sm {
  inset-block-start: 8px;
  inset-inline-end: 8px;
  inline-size: 40px;
  block-size: 40px;
  background: rgba(26, 54, 93, 0.08);
  border: none;
  color: var(--color-navy);
}
.vc-cutout-btn.sm .material-symbols-outlined { font-size: clamp(16px, 2vw, 18px); }
.vc-cutout-btn.sm:hover {
  background: var(--color-navy);
  color: var(--color-white);
  transform: scale(1.05);
}

/* ==============================================
   小カテゴリ グリッド (vc-sub-grid)
   ============================================== */
.vc-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .vc-sub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vc-sub-grid { grid-template-columns: 1fr; }
}

/* 小カテゴリカード */
.vc-sub-card {
  position: relative;
  background: var(--color-white);
  border-radius: 60px 18px 0 0;
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  isolation: isolate;
}
.vc-sub-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
}
.vc-sub-card::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: -1px;
  inline-size: 56px;
  block-size: 56px;
  background-color: var(--vc-page-bg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='68' height='68' viewBox='0 0 68 68' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.164 16.836H47.6577C30.6354 16.836 16.836 30.6353 16.836 47.6577V51.164C16.836 60.4623 9.29829 68 0 68H68V0C68 9.29829 60.4623 16.836 51.164 16.836Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg width='68' height='68' viewBox='0 0 68 68' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.164 16.836H47.6577C30.6354 16.836 16.836 30.6353 16.836 47.6577V51.164C16.836 60.4623 9.29829 68 0 68H68V0C68 9.29829 60.4623 16.836 51.164 16.836Z' fill='white'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100%;
  z-index: 3;
  pointer-events: none;
}
.vc-sub-card::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5l8 7-8 7' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
}
#page-video-categories .vc-sub-card .vc-cutout--sm {
  display: none;
}

.vc-sub-card-body {
  padding: 28px 24px 28px;
  padding-inline-end: 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  block-size: 100%;
}

/* 小カテゴリ: アイコン */
.vc-sub-icon {
  inline-size: 52px;
  block-size: 52px;
  background: rgba(26, 54, 93, 0.07);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vc-sub-icon .material-symbols-outlined {
  font-size: clamp(22px, 3vw, 26px);
  color: var(--color-navy);
}
.vc-sub-card:hover .vc-sub-icon {
  background: var(--color-navy);
}
.vc-sub-card:hover .vc-sub-icon .material-symbols-outlined {
  color: var(--color-white);
}

/* 小カテゴリ: テキスト */
.vc-sub-title {
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin-block-end: 4px;
}
.vc-sub-desc {
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--color-gray-dark);
  line-height: 1.6;
}

/* 小カテゴリ: フッター（バッジ + 矢印） */
.vc-sub-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: auto;
  padding-block-start: 12px;
  padding-inline-end: 24px;
  border-block-start: 1px solid var(--color-gray);
}

/* バッジ */
.vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-xl);
  padding: 4px 10px;
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
}
.vc-badge .material-symbols-outlined { font-size: clamp(12px, 1.5vw, 14px); }

.vc-badge--blue {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.vc-badge--teal {
  background: rgba(20, 184, 166, 0.1);
  color: #0d9488;
}

/* 矢印 */
.vc-sub-arrow .material-symbols-outlined {
  font-size: clamp(18px, 2.2vw, 20px);
  color: var(--color-gray-medium);
  transition: color 0.2s, transform 0.2s;
}
.vc-sub-card:hover .vc-sub-arrow .material-symbols-outlined {
  color: var(--color-navy);
  transform: translateX(3px);
}

/* ==============================================
   フェードインアニメーション
   ============================================== */
@keyframes vc-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes vc-fade-opacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vc-fade-in {
  opacity: 0;
  transform: translateY(28px);
}
.vc-fade-in.is-visible {
  animation: vc-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--delay, 0s);
}

/* vc-main-cardは切り抜きのにじみ回避のため、移動なしのopacityフェードにする */
#page-video-categories .vc-main-card.vc-fade-in {
  opacity: 0;
  transform: none;
}
#page-video-categories .vc-main-card.vc-fade-in.is-visible {
  animation: vc-fade-opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--delay, 0s);
}

/* ==============================================
   Product Purchase Preview
   ============================================== */
body#page-product-purchase {
  background: #fff;
}

.purchase-main {
  min-block-size: 80vh;
}

.purchase-wrapper {
  max-inline-size: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
  padding-block: clamp(24px, 4vw, 40px) clamp(72px, 8vw, 96px);
}

.purchase-detail-page .purchase-wrapper {
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 0;
}

.purchase-detail-page {
  --feature-detail-side-size: minmax(300px, 380px);
  --feature-detail-gap: clamp(20px, 3vw, 32px);
}
.purchase-page-header {
  margin-block-end: clamp(24px, 4vw, 40px);
}

.purchase-page-kicker {
  margin: 0;
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-navy);
  font-family: var(--font-en), sans-serif;
}

.purchase-page-title {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.purchase-page-title + .purchase-page-lead {
  margin-block-start: 16px;
}

.purchase-page-title + .purchase-page-lead:empty {
  display: none;
}

.purchase-page-lead {
  margin: 0;
  max-inline-size: 48rem;
  color: #64748b;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 500;
  line-height: 2;
}
.purchase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--feature-detail-side-size, minmax(300px, 380px));
  gap: var(--feature-detail-gap, clamp(20px, 3vw, 32px));
  align-items: start;
}

.purchase-main-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.purchase-product-card,
.purchase-panel,
.purchase-summary-card {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-navy-rgb), 0.08);
  border-radius: var(--radius-2xl);
  box-shadow: 0 10px 30px rgba(var(--color-navy-rgb), 0.07);
}

.purchase-product-card {
  overflow: hidden;
}

.purchase-product-media {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
}

.purchase-product-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.purchase-product-badge {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 6px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-white-rgb), 0.92);
  color: var(--color-navy);
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 700;
}

.purchase-product-body {
  padding: clamp(20px, 3vw, 28px);
}

.purchase-product-code {
  margin: 0;
  font-size: clamp(11px, 1.3vw, 12px);
  color: var(--color-gray-dark);
  letter-spacing: 0.08em;
}

.purchase-product-title {
  margin-block: 8px 10px;
  font-size: clamp(22px, 3.1vw, 32px);
  line-height: 1.35;
  color: var(--color-text);
}

.purchase-product-meta {
  margin: 0;
  color: var(--color-gray-dark);
  font-size: clamp(12px, 1.4vw, 13px);
}

.purchase-product-desc {
  margin-block: 16px 0;
  color: var(--color-text);
  font-size: clamp(13px, 1.65vw, 15px);
  line-height: 1.8;
}

.purchase-feature-list {
  margin-block-start: 16px;
  display: grid;
  gap: 10px;
}

.purchase-feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--color-text);
}

.purchase-feature-list .material-symbols-outlined {
  font-size: clamp(16px, 2vw, 18px);
  color: #0f766e;
}

.purchase-panel {
  padding: clamp(20px, 3vw, 28px);
}

.purchase-panel-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(19px, 2.4vw, 24px);
  color: var(--color-navy);
}

.purchase-panel-title .material-symbols-outlined {
  font-size: clamp(20px, 3vw, 26px);
}

.purchase-method-grid {
  margin-block-start: 16px;
  display: grid;
  gap: 12px;
}

.purchase-method-item {
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-xl);
  padding: 14px;
  display: grid;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.purchase-method-item input {
  appearance: none;
  inline-size: 0;
  block-size: 0;
  margin: 0;
}

.purchase-method-item.is-active {
  border-color: var(--color-accent);
  background-color: rgba(59, 130, 246, 0.07);
}

.purchase-method-main {
  font-size: clamp(13px, 1.65vw, 15px);
  font-weight: 700;
  color: var(--color-text);
}

.purchase-method-sub {
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--color-gray-dark);
}

.purchase-method-note {
  margin-block: 16px 0;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-light);
  color: var(--color-gray-dark);
  font-size: clamp(11px, 1.3vw, 12px);
}

.purchase-schedule-grid {
  margin-block-start: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.purchase-schedule-card {
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-xl);
  background: rgba(26, 54, 93, 0.03);
  padding: 14px;
}

.purchase-schedule-day {
  margin: 0;
  font-size: clamp(12px, 1.4vw, 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  font-family: var(--font-en), sans-serif;
}

.purchase-schedule-list {
  margin-block-start: 10px;
  display: grid;
  gap: 8px;
}

.purchase-schedule-list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--color-text);
}

.purchase-schedule-list li span:first-child {
  color: var(--color-gray-dark);
  font-weight: 600;
}

.purchase-notice-list {
  margin-block-start: 16px;
  display: grid;
  gap: 8px;
}

.purchase-notice-list li {
  position: relative;
  padding-inline-start: 14px;
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--color-text);
}

.purchase-notice-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-navy);
}

.purchase-side-col {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 24px);
}

.purchase-summary-card {
  padding: clamp(18px, 3vw, 24px);
}

.purchase-detail-page .purchase-layout {
  align-items: start;
}

.purchase-detail-page .purchase-product-card {
  border-radius: var(--radius-2xl);
}

.purchase-detail-page .purchase-summary-card {
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 3vw, 32px);
}

.purchase-detail-page .purchase-product-body {
  display: grid;
  gap: 0;
}

.purchase-detail-body-panel {
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 3vw, 32px);
}

.purchase-detail-body-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.purchase-detail-body-title::before {
  content: "\f02d";
  font-family: FontAwesome;
  color: #ff7f50;
  font-size: 1rem;
  line-height: 1;
}

.purchase-detail-description {
  margin-block-start: 24px;
}

.purchase-detail-page #htmlArea > * + * {
  margin-block-start: 1rem;
}

.purchase-detail-page #htmlArea > h2 {
  margin-block: 0;
  border-block-end: 1px solid #e2e8f0;
  padding-block-end: 1.25rem;
  color: var(--color-navy);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.purchase-detail-page #htmlArea > h2:not(:first-child) {
  margin-block-start: 3.5rem;
}

.purchase-detail-page #htmlArea > h3 {
  margin-block-start: 1.5rem;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.purchase-detail-page #htmlArea > p,
.purchase-detail-page #htmlArea li {
  color: #475569;
  font-size: clamp(0.875rem, 1.55vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.9;
}

.purchase-detail-page #htmlArea > ul {
  display: grid;
  gap: 1rem;
}

.purchase-detail-page #htmlArea > ul > li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.purchase-detail-page #htmlArea > ul > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.65rem;
  inset-inline-start: 0;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 50%;
  background: #eef2ff;
  box-shadow: 0 0 0 4px rgba(238, 242, 255, 0.5);
}

.purchase-detail-page #htmlArea dl {
  margin-block-start: 1.25rem;
  display: grid;
  gap: 1rem 1.5rem;
  border-block-start: 1px solid #e2e8f0;
  padding-block-start: 1.25rem;
}

.purchase-detail-page #htmlArea dt {
  color: #94a3b8;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.purchase-detail-page #htmlArea dd {
  margin-block-start: 0.5rem;
  color: #1e293b;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.7;
}

@media (min-width: 640px) {
  .purchase-detail-page #htmlArea dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.purchase-detail-description > *:first-child {
  margin-block-start: 0;
}

.purchase-detail-description > *:last-child {
  margin-block-end: 0;
}

.purchase-detail-gate {
  margin-block-start: 18px;
}

.purchase-detail-payment-note {
  margin-block-start: 24px;
  border-radius: var(--radius-2xl);
  background: #f8fafc;
  padding-block: 16px;
  padding-inline: 20px;
}

.purchase-detail-payment-note__label {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.purchase-detail-payment-note__list {
  display: grid;
  gap: 8px;
  margin-block-start: 12px;
}

.purchase-detail-payment-note__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 700;
}

.purchase-detail-payment-note__list i {
  color: var(--color-navy);
  font-size: 14px;
}

.purchase-detail-payment-note__text {
  margin-block-start: 12px;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 2;
}

.lgs-purchase-meta-list {
  margin-block-start: 18px;
}

.lgs-purchase-meta-row {
  border-block-end: 1px solid #e2e8f0;
  padding-block: 1.2rem;
}

.lgs-purchase-meta-row:first-child {
  padding-block-start: 0;
}

.lgs-purchase-meta-row:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.lgs-purchase-meta-label {
  display: block;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.lgs-purchase-meta-value {
  display: block;
  margin-block-start: 1.45rem;
  color: #1e293b;
  font-weight: 700;
  text-align: end;
}

.lgs-purchase-meta-value__price {
  color: var(--color-navy);
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.lgs-purchase-meta-value__tax {
  margin-inline-start: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.lgs-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lgs-metric__value {
  font-size: 1.02em;
  font-weight: 800;
  line-height: 1;
}
.purchase-summary-title {
  margin: 0;
  color: var(--color-navy);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.6;
}

.purchase-summary-title + .lgs-purchase-meta-list {
  margin-block-start: 1.5rem;
}

.purchase-detail-page .purchase-cta-btn {
  min-block-size: 2.875rem;
  gap: 0.65rem;
  padding-block: 0.75rem;
  padding-inline: 1.15rem;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.purchase-detail-page .purchase-cta-btn:hover {
  transform: translateY(-1px);
}

.purchase-detail-page .purchase-login-link {
  margin-block-start: 14px;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.purchase-detail-page .purchase-login-link:hover {
  color: var(--color-navy);
}

.purchase-summary-list {
  margin-block-start: 14px;
  border-block-start: 1px solid var(--color-gray);
}

.purchase-summary-row {
  margin: 0;
  padding-block: 14px;
  border-block-end: 1px solid var(--color-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.purchase-summary-row dt {
  color: var(--color-gray-dark);
  font-size: clamp(12px, 1.5vw, 14px);
}

.purchase-summary-row dd {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(13px, 1.65vw, 15px);
  font-weight: 600;
}

.purchase-summary-row.total dt,
.purchase-summary-row.total dd {
  color: var(--color-navy);
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 800;
}

.purchase-cta-btn {
  margin-block-start: 18px;
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: 13px;
  padding-inline: 18px;
  font-size: clamp(13px, 1.65vw, 15px);
  font-weight: 700;
  transition: background-color 0.2s ease;
}

.purchase-cta-btn:hover {
  background: var(--color-navy-dark);
}

.purchase-cta-btn .material-symbols-outlined {
  font-size: clamp(16px, 2vw, 18px);
}

.purchase-login-link {
  margin-block-start: 12px;
  display: block;
  text-align: center;
  color: var(--color-navy);
  text-decoration: underline;
  font-size: clamp(12px, 1.4vw, 13px);
  font-weight: 600;
}

@media (max-width: 960px) {
  .purchase-layout {
    grid-template-columns: 1fr;
  }

  .purchase-side-col {
    position: static;
  }

  .purchase-schedule-grid {
    grid-template-columns: 1fr;
  }
}

/* video-player */
.video-player-page {
  --video-player-spacing-gutter: var(--spacing-gutter);
  position: relative;
  overflow: hidden;
  padding-block-end: 80px;
  background: #f8fafc;
  font-family: "Noto Sans JP", sans-serif;
}

.video-player-page::before,
.video-player-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: var(--radius-pill);
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.6;
}

.video-player-page::before {
  inset-block-start: -180px;
  inset-inline-end: -120px;
  inline-size: 800px;
  block-size: 800px;
  background: #eef2ff;
}

.video-player-page::after {
  inset-block-end: 120px;
  inset-inline-start: -200px;
  inline-size: 600px;
  block-size: 600px;
  background: rgba(45, 212, 191, 0.1);
}

.video-player-main {
  position: relative;
  z-index: 1;
  --width-container: 1600px;
  margin-block: 24px 40px;
}

.video-player-main.inner-cmn {
  max-inline-size: var(--width-container);
}

.video-player-layout {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  align-items: flex-start;
}

.video-player-content {
  display: grid;
  gap: 24px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.video-player-sidebar {
  inline-size: 320px;
  max-inline-size: 320px;
  flex: 0 0 320px;
  flex-shrink: 0;
  display: grid;
  gap: 24px;
}

.video-player-player-shell {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: transparent;
  margin-block-end: 24px;
}

.article-player-html-shell {
  display: grid;
  gap: 24px;
  margin-block-end: 24px;
}

.article-player-html-thumb {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-white);
}

.article-player-html-thumb img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.article-player-html-body {
  overflow: visible;
  padding-block: 0;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.article-player-html-body > .wp-content,
.article-player-html-body > .wp-content > .post_content {
  max-inline-size: none;
}

.article-player-html-lock {
  min-block-size: clamp(240px, 40vw, 420px);
  border-radius: var(--radius-2xl);
}

.video-player-media-shell,
.video-player-box,
.video-player-player-cover,
.video-player-player-cover img {
  inline-size: 100%;
  block-size: 100%;
}

.video-player-player-cover img {
  object-fit: cover;
}

.video-player-box {
  overflow: hidden;
  border-radius: inherit;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.video-player-box.video-player-box--playing {
  background-image: none !important;
  background-color: #000000;
}

.video-player-box .video-js,
.video-player-box .vjs-poster,
.video-player-box .vjs-tech {
  overflow: hidden;
  border-radius: inherit;
}

.video-player-box .video-js,
.video-player-box .vjs-poster {
  background-color: transparent;
}

.video-player-box .vjs-poster {
  background-size: cover;
}

.video-player-box--locked {
  position: relative;
  overflow: hidden;
}

.video-player-box--locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}

.video-player-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 24px;
  padding-inline: 24px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
}

.video-player-lock-message {
  color: var(--color-white);
}

.video-player-lock-message .ttl-sm {
  margin: 0;
  font-size: 0;
  font-weight: 700;
  line-height: 0;
}

.video-player-heading {
  margin-block-end: 8px;
}

.video-player-title {
  margin: 0 0 16px;
  color: var(--color-navy);
  font-size: clamp(1.875rem, 1.671rem + 0.87vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.video-player-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.video-player-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 6px;
  padding-inline: 12px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: none;
  color: #64748b;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 700;
  line-height: 1.25rem;
  white-space: nowrap;
}

.video-player-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  flex-shrink: 0;
}

.video-player-meta-icon svg {
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-player-meta-icon--accent {
  color: #2dd4bf;
}

.video-player-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-block-end: 8px;
}

.video-player-action-link,
.video-player-action-link:link,
.video-player-action-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 700;
  line-height: 20px;
  transition: color 0.3s ease;
}

.video-player-action-icon,
.video-player-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
}

.video-player-action-icon svg,
.video-player-title-icon svg {
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-player-set-arrow svg {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-player-action-link:hover {
  color: var(--color-navy);
  text-decoration: none;
}

.video-player-action-link:focus,
.video-player-action-link:active {
  color: var(--color-navy);
  text-decoration: none;
}

.video-player-action-link--favorite:hover {
  color: #f43f5e;
}

.video-player-actions .favorite,
.video-player-actions .favorite:hover,
.video-player-actions .favorite:focus,
.video-player-actions .favorite:active,
.video-player-actions .favorite:visited {
  background: transparent;
  opacity: 1;
}

.video-player-action-count {
  display: none;
}

.video-player-gate-card,
.video-player-card,
.video-player-side-card,
.video-player-set-nav {
  border: 1px solid #e2e8f0;
  background: var(--color-white);
}

.video-player-gate-card {
  border-radius: var(--radius-2xl);
  padding-block: 24px;
  padding-inline: 24px;
}

.video-player-gate-title {
  margin: 0 0 16px;
  color: var(--color-navy);
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  font-weight: 700;
}

.video-player-gate-text {
  margin: 0 0 16px;
  color: var(--color-text);
}

.video-player-gate-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 48px;
  padding-block: 12px;
  padding-inline: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  text-align: center;
}

.video-player-gate-stack {
  display: grid;
  gap: 16px;
  margin-block-start: 20px;
}

.video-player-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-block-end: 48px;
}

.video-player-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-2xl);
}

.video-player-card--description {
  margin-block-end: 0;
}

.video-player-card-header {
  padding-block: 24px;
  padding-inline: 24px;
  border-block-end: 1px solid #e2e8f0;
  background: rgba(248, 250, 252, 0.5);
}

.video-player-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
}

.video-player-card-title--mint {
  color: #0f766e;
}

.video-player-card-body {
  flex: 1 1 auto;
  padding-block: 24px;
  padding-inline: 24px;
}

.video-player-description {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  color: #475569;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 500;
  line-height: 1.8;
}

.video-player-description img,
.video-player-description iframe,
.video-player-description video,
.video-player-description embed,
.video-player-description object,
.video-player-description svg {
  max-inline-size: 100%;
}

.video-player-description iframe,
.video-player-description video,
.video-player-description embed,
.video-player-description object {
  inline-size: 100%;
}

.video-player-description table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.video-player-description a {
  overflow-wrap: anywhere;
}

.video-player-description a:hover,
.cms-content a:hover {
  text-decoration: underline;
}

.video-player-description > *:first-child {
  margin-block-start: 0;
}

.video-player-description > *:last-child {
  margin-block-end: 0;
}

.video-player-description .syouzai-title h3 {
  margin: 0 0 1em;
  padding: 0.5em;
  color: var(--color-white);
  font-size: 1.6em;
  font-weight: 700;
  text-align: center;
}

.video-player-description .syouzai-title p {
  padding-inline: 1em;
  line-height: 2em;
}

.video-player-description .syouzai-title figure {
  margin: 0 0 2em;
  text-align: center;
}

.video-player-description .syouzai-title img {
  inline-size: auto;
  block-size: 320px;
  margin: 0.5em;
}

.video-player-description .syouzai h2,
.video-player-description .syouzai h3 {
  margin: 1.5em 0 0;
  padding-block: 0.6em 0.5em 0.5em;
  padding-inline: 0.5em;
  font-size: 1.6em;
  font-weight: 700;
}

.video-player-description .syouzai h4,
.video-player-description .syouzai h5 {
  margin: 1.4em 0 0;
  padding-block: 0.6em 0.5em 0.5em;
  padding-inline: 0.5em;
  font-size: 1.2em;
  font-weight: 700;
}

.video-player-description .syouzai p {
  padding-inline: 1em;
  line-height: 1.6em;
}

.video-player-description .syouzai a:visited {
  color: #003f73;
}

.video-player-description .syouzai ul {
  padding-inline-start: 2.5em;
  line-height: 2em;
}

.video-player-description .syouzai li {
  line-height: 2em;
  list-style: disc;
}

.video-player-description .syouzai .none,
.video-player-description .syouzai-no-ten-list {
  list-style: none !important;
}

.video-player-description .syouzai figure {
  margin: 0 0 2em;
  overflow-x: auto;
  text-align: center;
}

.video-player-description .syouzai img {
  inline-size: auto;
  block-size: 320px;
  margin: 0.5em;
}

.video-player-description .syouzai table {
  inline-size: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: #faf7f7;
  text-align: center;
}

.video-player-description .syouzai table tr:nth-child(2n) {
  background: var(--color-white);
}

.video-player-description .syouzai table th,
.video-player-description .syouzai table td {
  padding-block: 10px;
  padding-inline: 10px;
  vertical-align: middle;
}

.video-player-description .syouzai-table {
  min-inline-size: 640px;
  margin: 0 10px 50px;
}

.video-player-description .syouzai-btn {
  margin-block: 10px 20px;
  padding: 0.5em;
  border-radius: var(--radius-xl);
  background: #408f9d;
  color: var(--color-white);
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
}

.video-player-description .syouzai-btn a,
.video-player-description .syouzai-btn a:visited {
  color: inherit;
}

.video-player-description .syouzai-btn:hover {
  background: #33717c;
}

.video-player-description .syouzai-btn-wrap {
  padding: 0.5em;
}

.video-player-description .syouzai-img-style {
  inline-size: 640px !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-b {
  inline-size: auto !important;
  block-size: 320px !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-c {
  inline-size: 160px !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-d,
.video-player-description .syouzai-img-style-e {
  inline-size: 110px !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-eh {
  inline-size: auto !important;
  block-size: 300px !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-f {
  inline-size: 50px !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-g {
  inline-size: auto !important;
  max-block-size: 240px !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-h {
  inline-size: 320px !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-i {
  inline-size: auto !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-j {
  inline-size: 240px !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai-img-style-k {
  inline-size: 80px !important;
  block-size: auto !important;
  margin: 0.5em !important;
}

.video-player-description .syouzai .ai {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player-description .syouzai-box {
  position: relative;
  margin-block: 3em;
  padding: 1em;
  background: #ffebcd;
}

@media (max-width: 768px) {
  .video-player-description .syouzai-title img {
    block-size: 240px;
  }

  .video-player-description .syouzai img {
    block-size: 160px;
  }
}

.video-player-note-box {
  margin-block-end: 20px;
  padding-block: 20px;
  padding-inline: 20px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  background: #f8fafc;
}

.video-player-note-label {
  margin: 0 0 12px;
  color: #94a3b8;
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.video-player-note-list {
  display: grid;
  gap: 8px;
  color: #475569;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 500;
}

.video-player-note-list li {
  position: relative;
  padding-inline-start: 14px;
}

.video-player-note-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
}

.video-player-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.video-player-tags--description {
  margin-block-start: 24px;
}

.video-player-tag {
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  background: #eef2ff;
  color: var(--color-navy);
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
}

.video-player-note-text,
.video-player-side-note {
  margin: 20px 0 0;
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 600;
  line-height: 1.6;
}

.video-player-set-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: var(--radius-2xl);
  padding-block: 24px;
  padding-inline: 24px;
  margin-block-end: 48px;
}

.video-player-set-link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-inline-size: 0;
  flex: 1 1 0;
}

.video-player-set-link--next {
  justify-content: flex-end;
  text-align: end;
}

.video-player-set-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-pill);
  background: #f8fafc;
  color: #94a3b8;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}

.video-player-set-link:hover .video-player-set-arrow {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-white);
}

.video-player-set-copy {
  display: grid;
  gap: 4px;
  min-inline-size: 0;
}

.video-player-set-label {
  color: #94a3b8;
  font-size: clamp(9px, 1.1vw, 10px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.video-player-set-name {
  color: var(--color-navy);
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 700;
  line-height: 1.5;
}

.video-player-set-link:hover .video-player-set-name {
  color: #ff7f50;
}

.video-player-set-divider {
  inline-size: 1px;
  block-size: 48px;
  background: #e2e8f0;
  flex-shrink: 0;
}

.video-player-side-card {
  border-radius: var(--radius-2xl);
  padding-block: 20px;
  padding-inline: 20px;
}

.video-player-side-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--color-navy);
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  font-weight: 700;
}

.video-player-side-title--mint {
  color: #0f766e;
}

.video-player-title-icon--mint {
  color: #2dd4bf;
}

.video-player-title-icon--coral {
  color: #ff7f50;
}

.video-player-file-list,
.video-player-related-list {
  display: grid;
  gap: 12px;
}

.video-player-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  padding-inline: 12px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.video-player-file-item:hover {
  border-color: var(--color-navy);
  background: #f8fafc;
}

.video-player-file-item--disabled {
  cursor: default;
}

.video-player-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-lg);
  background: #dbeafe;
  color: #2563eb;
  flex-shrink: 0;
}

.video-player-file-icon--pdf {
  background: #fef2f2;
  color: #ef4444;
}

.video-player-file-copy {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.video-player-file-name {
  overflow: hidden;
  color: var(--color-navy);
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-player-file-size {
  color: #94a3b8;
  font-size: clamp(9px, 1.1vw, 10px);
  font-weight: 600;
}

.video-player-file-download {
  color: #cbd5e1;
  flex-shrink: 0;
}

.video-player-file-item:hover .video-player-file-download {
  color: var(--color-navy);
}

.video-player-related-item {
  display: flex;
  gap: 12px;
}

.video-player-related-thumb {
  position: relative;
  inline-size: 112px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: #f8fafc;
}

.video-player-related-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.video-player-related-item:hover .video-player-related-thumb img {
  transform: scale(1.05);
}

.video-player-related-duration {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-end: 4px;
  padding-block: 2px;
  padding-inline: 6px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-white);
  font-size: clamp(8px, 1.05vw, 8px);
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.video-player-related-copy {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  flex-direction: column;
  padding-block-start: 2px;
}

.video-player-related-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-navy);
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 700;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.video-player-related-item:hover .video-player-related-title {
  color: #ff7f50;
}

.video-player-related-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-block-start: auto;
  color: #94a3b8;
  font-size: clamp(9px, 1.1vw, 10px);
  font-weight: 600;
}

.video-player-comment-wrap {
  position: relative;
  z-index: 1;
  --width-container: 1600px;
  min-inline-size: 0;
  margin-block-start: 8px;
}

.video-player-comment-wrap .comment-block {
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%),
    #fff;
}

.video-player-comment-wrap .comment-block .ttl-md {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.video-player-comment-wrap .comment-block textarea.form-control {
  min-block-size: clamp(180px, 24vw, 240px);
  margin-block-start: 20px;
  padding-block: 18px;
  padding-inline: 20px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: clamp(0.875rem, 1.55vw, 0.95rem);
  line-height: 1.8;
  resize: vertical;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.video-player-comment-wrap .comment-block textarea.form-control::placeholder {
  color: #94a3b8;
}

.video-player-comment-wrap .comment-block .error-messages {
  margin-block-start: 12px;
}

.video-player-comment-wrap .comment-block .error-messages p {
  margin: 0;
  color: #b91c1c;
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  font-weight: 600;
}

.video-player-comment-wrap .comment-block .btn-area-center {
  display: flex;
  justify-content: center;
  margin-block-start: 20px;
}

.video-player-comment-wrap .comment-block .btn-area-center .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-inline-size: min(100%, 260px);
  min-block-size: 56px;
  padding-block: 14px;
  padding-inline: 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
  color: #fff;
  font-size: clamp(0.875rem, 1.55vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

.video-player-comment-wrap .comment-block .btn-area-center .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
  color: #fff;
}

.video-player-comment-wrap .comment-block .box-error {
  margin-block-start: 20px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.9);
}

.video-player-comment-wrap .comment-block .box-error p {
  margin: 0;
  color: #334155;
  font-size: clamp(0.875rem, 1.55vw, 0.95rem);
  line-height: 1.8;
}

.video-player-comment-wrap .comment-block .box-error .text-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 20px;
}

.video-player-comment-wrap .comment-block .box-error .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-inline-size: min(100%, 220px);
  min-block-size: 52px;
  padding-block: 12px;
  padding-inline: 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

.video-player-comment-wrap .comment-block .box-error .btn:hover {
  transform: translateY(-1px);
}

.video-player-comment-wrap .comment-block .box-error .btn-accent {
  background: linear-gradient(135deg, #f97316 0%, #fb7185 100%);
  color: #fff;
}

.video-player-comment-wrap .comment-block .box-error .btn-theme {
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
  color: #fff;
}

.video-player-comment-wrap .comment-block .comment-list {
  margin-block-start: 28px;
}

.video-player-comment-wrap .comment-block .box-comment-display {
  overflow: hidden;
}

.video-player-comment-wrap .comment-block .box-comment-display.hide {
  position: relative;
  max-block-size: 340px;
}

.video-player-comment-wrap .comment-block .box-comment-display.hide::before {
  content: "";
  position: absolute;
  inset-block: auto 0;
  inset-inline: 0;
  block-size: 140px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 1) 100%);
  pointer-events: none;
}

.video-player-comment-wrap .comment-block .box-user-comment {
  padding-block: 20px;
  padding-inline: 0;
}

.video-player-comment-wrap .comment-block .box-user-comment + .box-user-comment {
  border-block-start: 1px solid rgba(226, 232, 240, 0.9);
}

.video-player-comment-wrap .comment-block .box-user-comment .ttl-xs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #0f172a;
  font-size: clamp(0.875rem, 1.55vw, 0.95rem);
  font-weight: 700;
}

.video-player-comment-wrap .comment-block .box-user-comment time {
  color: #94a3b8;
  font-size: clamp(0.75rem, 1.25vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.video-player-comment-wrap .comment-block .text-comment {
  margin-block-start: 12px;
  margin-block-end: 0;
  color: #334155;
  font-size: clamp(0.875rem, 1.55vw, 0.95rem);
  line-height: 1.9;
}

.video-player-comment-wrap .comment-block .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  inline-size: 100%;
  min-block-size: 54px;
  margin-block-start: 20px;
  padding-block: 12px;
  padding-inline: 20px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.86);
  color: #0f172a;
  font-size: clamp(0.8125rem, 1.45vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.video-player-comment-wrap .comment-block .btn-more:hover {
  transform: translateY(-1px);
  border-color: rgba(30, 64, 175, 0.32);
  background: rgba(255, 255, 255, 0.96);
}

.video-player-breadcrumbs .breadcrumb-wrap {
  position: static;
  z-index: auto;
  transform: none;
  width: auto;
  margin-block-end: 24px !important;
  margin-bottom: 24px;
  padding-block-start: 32px;
}

.video-player-breadcrumbs .inner-cmn {
  max-inline-size: 1600px;
}

.video-player-breadcrumbs .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-player-breadcrumbs .breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  margin-bottom: 0;
  padding-left: 0;
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.video-player-breadcrumbs .breadcrumb-list > li:first-of-type {
  padding-left: 0;
}

.video-player-breadcrumbs .breadcrumb-list li + li::before {
  content: "/";
  display: inline-block;
  position: static;
  transform: none;
  margin-inline-end: 8px;
  color: #cbd5e1;
}

.video-player-breadcrumbs .breadcrumb-list a {
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  text-decoration: none;
  transition: color 0.3s ease;
}

.video-player-breadcrumbs .breadcrumb-list a:hover {
  color: var(--color-navy);
}

@media (max-width: 1279px) {
  .content-detail-layout {
    flex-wrap: wrap;
    gap: 24px;
  }

  .content-detail-side {
    inline-size: 100%;
    max-inline-size: none;
    flex-basis: 100%;
  }

  .video-player-layout {
    flex-wrap: wrap;
    gap: 24px;
  }

  .video-player-sidebar {
    inline-size: 100%;
    max-inline-size: none;
    flex: 1 1 100%;
  }
}

@media (max-width: 991px) {
  .video-player-content {
    gap: 20px;
  }

  .video-player-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .video-player-page {
    --video-player-spacing-gutter: clamp(14px, 4vw, 24px);
  }

  .video-player-main {
    margin-block: 20px 32px;
  }

.video-player-main.inner-cmn,
.video-player-breadcrumbs .inner-cmn {
  padding-inline: var(--video-player-spacing-gutter);
}

  .video-player-heading {
    margin-block-end: 4px;
  }

  .video-player-title {
    margin-block-end: 12px;
    font-size: clamp(1.5rem, 1.22rem + 1.2vw, 1.875rem);
    line-height: 1.25;
  }

  .video-player-meta {
    gap: 10px;
  }

  .video-player-meta-chip {
    gap: 5px;
    padding-block: 5px;
    padding-inline: 10px;
    font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
    line-height: 1.1rem;
  }

  .video-player-action-link {
    font-size: clamp(0.75rem, 1.3vw, 0.8125rem);
  }

  .video-player-actions {
    justify-content: flex-start;
    gap: 12px;
  }

  .video-player-gate-title,
  .video-player-side-title {
    font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
  }

  .video-player-gate-text,
  .video-player-set-name,
  .video-player-related-title,
  .video-player-related-meta,
  .video-player-file-name {
    font-size: clamp(0.75rem, 1.3vw, 0.8125rem);
  }

  .video-player-card-title {
    font-size: clamp(0.875rem, 1.6vw, 1rem);
  }

  .video-player-tag {
    font-size: clamp(9px, 1.1vw, 10px);
  }

  .video-player-comment-wrap .comment-block .ttl-md {
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
    letter-spacing: 0.02em;
  }

  .video-player-gate-card,
  .video-player-card,
  .video-player-side-card,
  .video-player-set-nav {
    border-radius: var(--radius-xl);
  }

  .video-player-card-header,
  .video-player-card-body,
  .video-player-set-nav {
    padding-inline: 20px;
  }

  .video-player-comment-wrap .comment-block {
    padding-block: 24px;
    padding-inline: 20px;
    border-radius: var(--radius-2xl);
  }

  .video-player-comment-wrap .comment-block .box-error {
    padding: 20px;
    border-radius: var(--radius-xl);
  }

  .video-player-comment-wrap .comment-block .box-error .text-center {
    flex-direction: column;
  }

  .video-player-comment-wrap .comment-block .box-error .btn,
  .video-player-comment-wrap .comment-block .btn-area-center .btn {
    inline-size: 100%;
  }

  .video-player-layout {
    gap: 24px;
  }

  .video-player-player-shell {
    border-radius: var(--radius-xl);
  }

  .video-player-set-nav {
    display: grid;
    align-items: stretch;
    gap: clamp(10px, 3vw, 14px);
    padding-block: clamp(14px, 3.5vw, 18px);
    padding-inline: clamp(14px, 3.5vw, 18px);
    margin-block-end: 32px;
  }

  .video-player-set-nav--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-player-set-nav--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .video-player-set-link,
  .video-player-set-link--next {
    gap: clamp(8px, 2.8vw, 12px);
    min-block-size: clamp(72px, 18vw, 88px);
    justify-content: flex-start;
    text-align: start;
  }

  .video-player-set-arrow {
    inline-size: clamp(34px, 8vw, 40px);
    block-size: clamp(34px, 8vw, 40px);
  }

  .video-player-set-copy {
    gap: 2px;
  }

  .video-player-set-label {
    font-size: clamp(9px, 2.2vw, 10px);
    letter-spacing: 0.14em;
  }

  .video-player-set-name {
    font-size: clamp(0.75rem, 2.8vw, 0.8125rem);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .video-player-set-divider {
    display: none;
  }
}

/* term modal fallback */
.modal2 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block: 40px;
  padding-inline: 20px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal2.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* announce index */
.announce-page-hero {
  padding-block: clamp(28px, 4.2vw, 42px) clamp(20px, 3vw, 28px);
}

body#page-announce-index .announce-page-hero .inner-cmn,
body#page-announce-index .section-cmn > .inner-cmn {
  max-inline-size: 1240px;
}

.announce-page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.announce-page-hero__eyebrow {
  margin: 0;
  color: #1fa7e6;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.announce-page-hero__title {
  margin: 0;
  color: #202635;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.18;
}

.announce-page-hero__lead {
  margin: 0;
  color: #64748b;
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.7;
}

.breadcrumb-wrap {
  padding-block-start: clamp(10px, 1.6vw, 16px);
  padding-block-end: clamp(8px, 1.2vw, 12px);
}

body#page-announce-index .breadcrumb-wrap {
  padding-block-start: clamp(10px, 1.6vw, 16px);
  padding-block-end: clamp(6px, 1vw, 10px);
}

.breadcrumb-wrap .inner-cmn {
  max-inline-size: 1600px;
}

.breadcrumb-wrap--flush .inner-cmn {
  padding-inline: 0;
}

.breadcrumb-wrap .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-wrap .breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  margin-bottom: 0;
  padding-left: 0;
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.breadcrumb-wrap .breadcrumb-list > li:first-of-type {
  padding-left: 0;
}

.breadcrumb-wrap .breadcrumb-list li + li::before {
  content: "/";
  display: inline-block;
  position: static;
  transform: none;
  margin-inline-end: 8px;
  color: #cbd5e1;
}

.breadcrumb-wrap .breadcrumb-list a {
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-wrap .breadcrumb-list a:hover {
  color: var(--color-navy);
}

.announce-index-page .news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid #e5ebf2;
  background: #ffffff;
}

.announce-index-page .news-list-item {
  margin: 0;
  padding: 0;
  border-block-end: 1px solid #e5ebf2;
}

.announce-index-page .announce-row-card {
  display: grid;
  grid-template-columns: clamp(180px, 17vw, 254px) minmax(0, 1fr) clamp(48px, 5vw, 64px);
  align-items: center;
  gap: clamp(16px, 2.4vw, 24px);
  padding-block: clamp(22px, 3.2vw, 28px);
  padding-inline: 0;
}

.announce-index-page .announce-row-thumb {
  margin: 0;
}

.announce-index-page .announce-row-thumb-link {
  display: block;
  inline-size: 100%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #f5f7fa;
}

.announce-index-page .announce-row-thumb img,
.announce-index-page .announce-row-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 1.58;
}

.announce-index-page .announce-row-thumb img {
  object-fit: cover;
}

.announce-index-page .announce-row-thumb-placeholder {
  background: #f5f7fa;
  padding: clamp(18px, 3vw, 28px);
}

.announce-index-page .announce-row-thumb-placeholder img {
  inline-size: min(120px, 56%);
  block-size: auto;
  object-fit: contain;
  opacity: 0.88;
}

.announce-index-page .announce-row-content {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vw, 9px);
  min-inline-size: 0;
}

.announce-index-page .announce-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #6b7280;
  font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.announce-index-page .announce-row-meta time {
  color: #6b7280;
  line-height: 1.2;
}

.announce-index-page .announce-row-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 28px;
  padding-block: 3px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: #ffffff;
  font-size: clamp(0.625rem, 0.82vw, 0.6875rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}

.announce-index-page .announce-row-title {
  margin: 0;
  color: #222222;
  font-size: clamp(0.9375rem, 1.02vw, 1.125rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.announce-index-page .announce-row-title a {
  color: inherit;
  text-decoration: none;
}

.announce-index-page .announce-row-title a:hover {
  color: #1a365d;
}

.announce-index-page .announce-row-action {
  display: flex;
  justify-content: flex-end;
}

.announce-index-page .announce-row-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(46px, 4vw, 52px);
  block-size: clamp(46px, 4vw, 52px);
  border-radius: var(--radius-pill);
  border: 1px solid #8adcf7;
  color: #1fa7e6;
  background: #ffffff;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.announce-index-page .announce-row-arrow:hover {
  transform: translateX(3px);
  border-color: #1fa7e6;
  color: #ffffff;
  background: #1fa7e6;
}

.announce-index-page .announce-row-arrow .material-symbols-outlined {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1;
}

.announce-index-page .pagination {
  margin-block-start: clamp(28px, 4vw, 40px);
}

@media (max-width: 991px) {
  .announce-index-page .announce-row-card {
    grid-template-columns: clamp(140px, 28vw, 192px) minmax(0, 1fr) 52px;
    gap: 14px;
    padding-block: 20px;
  }

  .announce-index-page .announce-row-title {
    font-size: clamp(0.9375rem, 1.55vw, 1.0625rem);
  }

  .announce-index-page .announce-row-meta {
    font-size: 0.8125rem;
  }
}

@media (max-width: 767px) {
  .announce-index-page .announce-row-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 18px;
  }

  .announce-index-page .announce-row-thumb-link {
    max-inline-size: 280px;
  }

  .announce-index-page .announce-row-action {
    justify-content: flex-start;
  }

  .announce-index-page .announce-row-title {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .announce-index-page .announce-row-meta {
    gap: 8px;
    font-size: 0.8125rem;
  }

  .announce-index-page .announce-row-label {
    min-block-size: 28px;
    padding-inline: 12px;
    font-size: 0.6875rem;
  }

  .announce-page-hero {
    padding-block: 22px 18px;
  }

  .announce-page-hero__title {
    font-size: 1.875rem;
  }
}

/* announce detail */
body#page-announce-show .breadcrumb-wrap {
  padding-block-start: clamp(10px, 1.6vw, 16px);
  padding-block-end: clamp(8px, 1.2vw, 12px);
}

.announce-detail-page {
  padding-block: clamp(24px, 3.6vw, 48px) clamp(48px, 6vw, 72px);
}

body#page-announce-show .announce-detail-page .inner-cmn {
  max-inline-size: 1240px;
}

.announce-detail-shell {
  display: grid;
  gap: clamp(28px, 3.4vw, 40px);
}

.announce-detail-header {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.8vw, 28px);
}

.announce-detail-header-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-inline-size: 0;
}

.announce-detail-eyebrow {
  margin: 0;
  color: #1fa7e6;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.announce-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  font-weight: 600;
}

.announce-detail-label,
.announce-detail-nav__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 28px;
  padding-block: 3px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: #ffffff;
  font-size: clamp(0.625rem, 0.82vw, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.announce-detail-title {
  margin: 0;
  color: #202635;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.01em;
}

.announce-detail-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: #f5f7fa;
}

.announce-detail-media img,
.announce-detail-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
}

.announce-detail-media img {
  object-fit: cover;
}

.announce-detail-media-placeholder {
  padding: clamp(24px, 4vw, 36px);
}

.announce-detail-media-placeholder img {
  inline-size: min(140px, 56%);
  block-size: auto;
  object-fit: contain;
  opacity: 0.88;
}

.announce-detail-card {
  background: transparent;
}

.announce-detail-body {
  padding-block: clamp(28px, 3.4vw, 40px);
  padding-inline: 0;
}

.announce-detail-body > *:first-child {
  margin-block-start: 0;
}

.announce-detail-body > *:last-child {
  margin-block-end: 0;
}

.announce-detail-gate {
  display: grid;
  gap: 12px;
  padding-block: clamp(28px, 3.4vw, 40px);
  padding-inline: clamp(22px, 3vw, 40px);
}

.announce-detail-gate__label {
  margin: 0;
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.announce-detail-gate__title {
  margin: 0;
  color: #202635;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
}

.announce-detail-gate__text {
  margin: 0;
  color: #64748b;
  line-height: 1.8;
}

.announce-detail-nav {
  display: grid;
  gap: 24px;
  margin-block-start: clamp(20px, 3vw, 32px);
}

.announce-detail-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.announce-detail-nav__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.announce-detail-nav__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-inline-size: 0;
  padding-block: 20px;
  padding-inline: 20px;
  border: 1px solid #e5ebf2;
  border-radius: var(--radius-2xl);
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.announce-detail-nav__card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.announce-detail-nav__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}

.announce-detail-nav__label {
  margin: 0;
  color: #94a3b8;
  font-size: clamp(0.6875rem, 1vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.announce-detail-nav__title {
  margin: 0;
  color: #202635;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.5;
}

.announce-detail-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid #dbe5f0;
  color: #1fa7e6;
  flex-shrink: 0;
}

.announce-detail-nav__arrow .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.announce-detail-back {
  display: flex;
  justify-content: center;
}

.announce-detail-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding-block: 10px;
  padding-inline: 22px;
  border-radius: var(--radius-pill);
  background: #1f3556;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.announce-detail-back__link:hover {
  color: #ffffff;
  text-decoration: none;
  background: #172741;
}

@media (max-width: 991px) {
  .feature-detail-layout,
  .seminar-index-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .purchase-detail-page,
  .seminar-detail-page {
    --feature-detail-side-size: minmax(0, 1fr);
    --feature-detail-gap: 24px;
  }

  .announce-detail-nav__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .announce-detail-page {
    padding-block: 20px 56px;
  }

  .announce-detail-shell {
    gap: 24px;
  }

  .announce-detail-header-main {
    gap: 10px;
  }

  .announce-detail-title {
    font-size: 1.625rem;
  }

  .announce-detail-body,
  .announce-detail-gate {
    padding-block: 22px;
    padding-inline: 18px;
  }

  .announce-detail-nav__card {
    padding-block: 18px;
    padding-inline: 16px;
  }

  .announce-detail-nav__arrow {
    inline-size: 40px;
    block-size: 40px;
  }
}

/* common renewal page */
.renew-page {
  padding-block: clamp(24px, 3.5vw, 48px) clamp(48px, 6vw, 72px);
}

/* shared page skeletons */
.feature-detail-shell {
  display: grid;
  gap: clamp(24px, 3.4vw, 40px);
}

.feature-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--feature-detail-side-size, 380px);
  gap: var(--feature-detail-gap, 40px);
  align-items: start;
}

.feature-detail-main {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  min-inline-size: 0;
}

body.is-narrow-layout .feature-detail-layout,
body.is-narrow-layout .purchase-layout,
body.is-narrow-layout .seminar-detail-layout,
body.is-narrow-layout .seminar-index-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

body.is-narrow-layout .content-detail-layout {
  flex-wrap: wrap;
  gap: 24px;
}

body.is-narrow-layout .content-detail-main,
body.is-narrow-layout .content-detail-side {
  flex-basis: 100%;
}

body.is-narrow-layout .feature-detail-side,
body.is-narrow-layout .content-detail-side,
body.is-narrow-layout .purchase-side-col,
body.is-narrow-layout .seminar-detail-side,
body.is-narrow-layout .seminar-index-sidebar,
body.is-narrow-layout .video-player-sidebar {
  position: static;
  inline-size: 100%;
  max-inline-size: none;
  flex: 1 1 100%;
}

body.is-narrow-layout .seminar-detail-summary__value--align-end,
body.is-narrow-layout .seminar-detail-summary__stack,
body.is-narrow-layout .seminar-detail-summary__bundle {
  justify-items: start;
  text-align: start;
}

.feature-detail-side,
.feature-detail-panel,
.content-detail-main,
.content-detail-side,
.content-detail-panel,
.info-page-panel,
.catalog-page-main,
.catalog-page-side,
.catalog-page-panel,
.seminar-index-main,
.seminar-index-side,
.seminar-index-panel {
  min-inline-size: 0;
}

.content-detail-shell {
  position: relative;
  z-index: 1;
  --width-container: 1600px;
  margin-block: 24px 40px;
}

.content-detail-layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 32px;
}

.content-detail-main {
  display: grid;
  gap: 24px;
  flex: 1 1 auto;
}

.content-detail-side {
  display: grid;
  inline-size: 320px;
  max-inline-size: 320px;
  flex: 0 0 320px;
  flex-shrink: 0;
  gap: 24px;
}

@media (max-width: 1279px) {
  .content-detail-layout {
    flex-wrap: wrap;
    gap: 24px;
  }

  .content-detail-main,
  .content-detail-side {
    flex: 1 1 100%;
    flex-basis: 100%;
  }

  .content-detail-side,
  .video-player-sidebar {
    inline-size: 100%;
    max-inline-size: none;
  }
}

.info-page-shell {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}

.info-page-layout {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}

.info-page-main,
.info-page-side {
  min-inline-size: 0;
}

.catalog-page-shell {
  min-inline-size: 0;
}

.catalog-page-layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 40px);
}

.seminar-index-shell {
  display: grid;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* freepage detail */
.freepage-detail-page .inner-cmn {
  max-inline-size: 1240px;
}

body#page-freepage-index .breadcrumb-wrap {
  inline-size: 100%;
  position: relative;
  transform: translateY(calc(100% + 6px));
  z-index: 10;
  margin-block-end: -16px;
}

body#page-freepage-index .page-ttl-section .inner-cmn,
body#page-freepage-index .section-cmn > .inner-cmn {
  max-inline-size: 1218px;
  padding-inline: 0;
}
.freepage-detail-shell {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}

.freepage-detail-header {
  display: grid;
  gap: 8px;
  max-inline-size: 960px;
}

.freepage-detail-title {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.01em;
}

.freepage-detail-card {
  background: transparent;
}

.freepage-detail-body {
  padding-block: 24px;
  padding-inline: 0;
}

.freepage-detail-body > *:first-child {
  margin-block-start: 0;
}

.freepage-detail-body > *:last-child {
  margin-block-end: 0;
}

.freepage-detail-gate {
  display: grid;
  gap: 16px;
  padding-block: 24px;
  padding-inline: 0;
}

.freepage-detail-gate__title {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  font-weight: 700;
  line-height: 1.4;
}

.freepage-detail-gate__text {
  margin: 0;
  color: var(--color-text);
  line-height: 1.8;
}

.renew-page-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-end: clamp(24px, 3vw, 32px);
}

.renew-page-hero--compact {
  margin-block-end: clamp(20px, 2.8vw, 28px);
}

.renew-page-hero__eyebrow,
.renew-section-heading__eyebrow {
  margin: 0;
  color: #1fa7e6;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.renew-page-hero__title {
  margin: 0;
  color: #202635;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.renew-page-hero__lead,
.renew-section-heading__lead {
  margin: 0;
  color: #64748b;
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.7;
}

.renew-surface-card {
  border: 1px solid #e5ebf2;
  border-radius: var(--radius-2xl);
  background: #ffffff;
  padding-block: clamp(22px, 3vw, 32px);
  padding-inline: clamp(18px, 2.8vw, 32px);
}

.renew-surface-card + .renew-surface-card {
  margin-block-start: 20px;
}

.renew-section-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-end: 18px;
}

.renew-section-heading__title {
  margin: 0;
  color: #202635;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
}

.renew-button-stack {
  gap: 12px;
}

.renew-form-reset {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.renew-auth-layout {
  display: grid;
  gap: 20px;
}

.renew-auth-note-list {
  display: grid;
  gap: 10px;
  color: #475569;
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  line-height: 1.8;
  margin-block-start: 16px;
}

.renew-auth-note-list__warning {
  color: #dc2626;
  font-weight: 600;
}

.renew-results-toolbar {
  margin-block-end: 16px;
}

.renew-set-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.renew-set-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: #f5f7fa;
}

.renew-set-media img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.renew-set-summary {
  display: grid;
  gap: 18px;
}

.renew-set-summary__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.renew-set-summary__title {
  margin: 0;
  color: #202635;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
}

.renew-set-summary__description {
  color: #475569;
  line-height: 1.8;
}

.renew-set-summary__description > *:first-child {
  margin-block-start: 0;
}

.renew-set-summary__description > *:last-child {
  margin-block-end: 0;
}

.mypage-renew-page .anchor-wrap {
  margin: 0;
}

.mypage-renew-page .anchor-list {
  gap: 10px;
}

.mypage-renew-page .anchor-list a {
  border-radius: var(--radius-pill);
  background: #f8fafc;
}

.seminar-renew-page .inner-cmn,
.renew-auth-page .inner-cmn,
.renew-search-page .inner-cmn,
.renew-set-page .inner-cmn,
.mypage-renew-page .inner-cmn {
  max-inline-size: 1240px;
}

.seminar-renew-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-end: 24px;
}

.seminar-renew-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 42px;
  padding-block: 10px;
  padding-inline: 18px;
  border: 1px solid #dbe5f0;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #475569;
  font-weight: 700;
  text-decoration: none;
}

.seminar-renew-tab--active {
  border-color: #1fa7e6;
  background: #eff8ff;
  color: #0f4c81;
}

.seminar-renew-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seminar-renew-empty {
  padding-block: 20px;
  color: #64748b;
}

.seminar-renew-card {
  display: grid;
  grid-template-columns: clamp(180px, 18vw, 240px) minmax(0, 1fr) 48px;
  gap: 18px;
  align-items: center;
  padding-block: 18px;
  padding-inline: 18px;
  border: 1px solid #e5ebf2;
  border-radius: var(--radius-2xl);
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.seminar-renew-card:hover {
  border-color: #cbd5e1;
}

.seminar-renew-card__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: #f5f7fa;
}

.seminar-renew-card__media img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.seminar-renew-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-inline-size: 0;
}

.seminar-renew-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: clamp(0.8125rem, 1vw, 0.875rem);
  font-weight: 600;
}

.seminar-renew-card__status {
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  background: #ecfeff;
  color: #0f766e;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.seminar-renew-card__status--closed {
  background: #f8fafc;
  color: #64748b;
}

.seminar-renew-card__title {
  margin: 0;
  color: #202635;
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.45;
}

.seminar-renew-card__address,
.seminar-renew-card__deadline {
  margin: 0;
  color: #64748b;
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  line-height: 1.7;
}

.seminar-renew-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.seminar-renew-card__seat {
  margin: 0;
  color: #0f4c81;
  font-weight: 700;
}

.seminar-renew-card__seat span {
  font-size: 1.125em;
}

.seminar-renew-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid #dbe5f0;
  border-radius: var(--radius-pill);
  color: #1fa7e6;
}

.seminar-renew-card__arrow .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.seminar-index-page .inner-cmn {
  max-inline-size: 1520px;
}

.seminar-index-layout {
  display: grid;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.seminar-index-sidebar {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 24px);
}

.seminar-calendar-card {
  display: grid;
  gap: 22px;
  padding-block: clamp(28px, 3vw, 36px);
  padding-inline: clamp(24px, 2.6vw, 32px);
}

.seminar-calendar-card__heading {
  margin-block-end: 0;
}

.seminar-calendar-card__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
}

.seminar-calendar-card__legend-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-pill);
  background: #1fa7e6;
}

.seminar-calendar {
  display: grid;
  gap: 18px;
}

.seminar-calendar__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
}

.seminar-calendar__label {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-weight: 800;
  text-align: center;
}

.seminar-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid #dbe5f0;
  border-radius: var(--radius-pill);
  color: #0f4c81;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.seminar-calendar__nav:hover {
  border-color: #1fa7e6;
  background: #eff8ff;
}

.seminar-calendar__weekdays,
.seminar-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.seminar-calendar__weekdays span {
  color: #94a3b8;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
}

.seminar-calendar__cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 52px;
  padding-block: 10px;
  padding-inline: 0;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  background: #ffffff;
  color: #1e293b;
  font-size: 0.9375rem;
  font-weight: 700;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.seminar-calendar__cell::after {
  content: "";
  position: absolute;
  inset-block-end: 7px;
  inline-size: 9px;
  block-size: 9px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.seminar-calendar__cell.is-active::after {
  background: #1fa7e6;
}

.seminar-calendar__cell.is-active:hover {
  border-color: #1fa7e6;
  background: #eff8ff;
  color: #0f4c81;
  transform: translateY(-1px);
}

.seminar-calendar__cell.is-selected {
  border-color: #0f4c81;
  background: #0f4c81;
  color: #ffffff;
}

.seminar-calendar__cell.is-selected::after {
  background: #ffffff;
}

.seminar-calendar__cell.is-today {
  box-shadow: inset 0 0 0 1px rgba(var(--color-navy-rgb), 0.18);
}

.seminar-calendar__cell.is-disabled {
  border-color: #edf2f7;
  background: #f8fafc;
  color: #cbd5e1;
  cursor: default;
}

.seminar-calendar__cell--blank {
  min-block-size: 52px;
}

.seminar-index-results {
  min-inline-size: 0;
}

.seminar-index-results .renew-surface-card--seminar-list {
  display: grid;
  gap: 24px;
  border: none;
  box-shadow: none;
}

.seminar-index-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.seminar-index-results__copy .renew-section-heading__eyebrow,
.seminar-index-results__copy .renew-section-heading__title {
  margin: 0;
}

.seminar-index-results__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.seminar-index-results__count {
  margin: 0;
  color: #64748b;
  font-size: 0.9375rem;
  font-weight: 700;
}

.seminar-index-results__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 42px;
  padding-block: 10px;
  padding-inline: 18px;
  border: 1px solid #dbe5f0;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #0f4c81;
  font-weight: 700;
}

.seminar-index-results__reset[hidden],
.seminar-index-results__empty[hidden] {
  display: none;
}

.seminar-index-reserved {
  gap: 20px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.seminar-detail-shell {
  display: grid;
  gap: clamp(24px, 3.4vw, 40px);
}

.seminar-detail-page {
  --feature-detail-side-size: 380px;
  --feature-detail-gap: 40px;
}

.seminar-detail-page .inner-cmn {
  max-inline-size: 1600px;
}

.seminar-detail-hero {
  display: grid;
  gap: 16px;
  max-inline-size: 48rem;
}

.seminar-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--feature-detail-side-size, 380px);
  gap: var(--feature-detail-gap, 40px);
  align-items: start;
}

.seminar-detail-main {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

.seminar-detail-title {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.seminar-detail-side {
  position: static;
}

.seminar-detail-panel {
  display: grid;
  gap: 24px;
  padding-block: clamp(24px, 3vw, 32px);
  padding-inline: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(var(--color-navy-rgb), 0.08);
  border-radius: var(--radius-2xl);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(var(--color-navy-rgb), 0.07);
}

.seminar-detail-panel__eyebrow {
  margin: 0;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.seminar-detail-panel__title {
  margin: 0;
  color: var(--color-navy);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.03em;
}

.seminar-detail-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--color-navy-rgb), 0.08);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: 0 10px 30px rgba(var(--color-navy-rgb), 0.07);
}

.seminar-detail-media img,
.seminar-detail-media-placeholder {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 16 / 9;
}

.seminar-detail-media img {
  object-fit: cover;
}

.seminar-detail-media-placeholder {
  display: grid;
  place-items: center;
  padding-block: clamp(28px, 5vw, 52px);
  padding-inline: clamp(28px, 5vw, 52px);
  background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
}

.seminar-detail-media-placeholder img {
  inline-size: min(180px, 100%);
  block-size: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.seminar-detail-body-card {
  padding-block: clamp(24px, 3vw, 32px);
  padding-inline: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(var(--color-navy-rgb), 0.08);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: 0 10px 30px rgba(var(--color-navy-rgb), 0.07);
}

.seminar-detail-summary {
  margin: 0;
}

.seminar-detail-summary--purchase {
  border-block-end: 1px solid #f1f5f9;
  padding-block-end: 12px;
}

.seminar-detail-summary__row {
  display: grid;
  gap: 12px;
  padding-block: 1.2rem;
  border-block-end: 1px solid #e2e8f0;
}

.seminar-detail-summary__row:first-child {
  padding-block-start: 0;
}

.seminar-detail-summary__row:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.seminar-detail-summary__row--status .seminar-detail-summary__value {
  margin-block-start: 4px;
}

.seminar-detail-summary__label {
  display: block;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.seminar-detail-summary__value {
  display: grid;
  gap: 6px;
  margin: 0;
  color: #1e293b;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.7;
}

.seminar-detail-summary__value--align-end {
  justify-items: end;
  text-align: end;
}

.seminar-detail-summary__value--price {
  gap: 6px;
  margin-block-start: 1.45rem;
}

.seminar-detail-summary__value--danger {
  color: #dc2626;
}

.seminar-detail-summary__value--success {
  color: #059669;
}

.seminar-detail-summary__stack {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.seminar-detail-summary__stack--status {
  gap: 8px;
}

.seminar-detail-summary__bundle {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.seminar-detail-summary__primary {
  color: #1e293b;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.7;
}

.seminar-detail-summary__secondary {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.7;
}

.seminar-detail-summary__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 34px;
  padding-block: 6px;
  padding-inline: 14px;
  border: 1px solid #dbe5f0;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #64748b;
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.seminar-detail-summary__badge--success {
  border-color: #d1fae5;
  background: #ecfdf5;
  color: #059669;
}

.seminar-detail-summary__badge--warning,
.seminar-detail-summary__badge--danger {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}

.seminar-detail-summary__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.seminar-detail-summary__metric-value {
  color: currentColor;
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.seminar-detail-summary__metric-label {
  color: #64748b;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.seminar-detail-summary__note {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 2;
}

.seminar-detail-summary__note--danger {
  color: #9f1239;
}

.seminar-detail-price {
  color: var(--color-navy);
  font-family: var(--font-en);
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.seminar-detail-price--free {
  letter-spacing: -0.03em;
}

.seminar-detail-price-note {
  color: #64748b;
  font-family: var(--font-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.seminar-detail-cta {
  display: grid;
  gap: 18px;
}

.seminar-detail-cta .btn {
  inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.875rem;
  gap: 0.65rem;
  padding-block: 0.75rem;
  padding-inline: 1.15rem;
  border-radius: var(--radius-pill);
  margin-inline: 0;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.seminar-detail-cta .btn-theme {
  border: 1px solid var(--color-navy);
  background: var(--color-navy);
  color: #ffffff !important;
}

.seminar-detail-cta .btn-theme:hover,
.seminar-detail-cta .btn-theme:focus {
  border-color: var(--color-navy-dark);
  background: var(--color-navy-dark);
  transform: translateY(-1px);
  color: #ffffff !important;
  text-decoration: none;
}

.seminar-detail-cta > *:first-child {
  margin-block-start: 0;
}

.seminar-detail-cta > *:last-child {
  margin-block-end: 0;
}

.seminar-detail-stock {
  margin: 0;
  color: #0f766e;
  font-weight: 700;
}

.seminar-detail-stock--danger {
  color: #dc2626;
}

.seminar-detail-status-panel {
  display: grid;
  gap: 6px;
  padding-block: 16px;
  padding-inline: 20px;
  border: 1px solid #fecdd3;
  border-radius: var(--radius-2xl);
  background: #fff1f2;
}

.seminar-detail-status-panel strong {
  color: #9f1239;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.4;
}

.seminar-detail-status-panel span {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 2;
}

.seminar-detail-body {
  padding-block: 0;
  padding-inline: 0;
}

.seminar-detail-body > *:first-child {
  margin-block-start: 0;
}

.seminar-detail-body > *:last-child {
  margin-block-end: 0;
}

.seminar-detail-back {
  display: flex;
  justify-content: stretch;
  margin-block-start: clamp(24px, 3vw, 36px);
}

.seminar-detail-back .btn {
  inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding-block: 12px;
  padding-inline: 20px;
  border: 1px solid #dbe5f0;
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: #1a365d;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.seminar-detail-back .btn:hover,
.seminar-detail-back .btn:focus {
  border-color: #c3d4e6;
  background: #f8fafc;
  color: #1a365d;
  text-decoration: none;
}

#seminarDescription > * + * {
  margin-block-start: 1rem;
}

#seminarDescription > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 0;
  padding-block-end: 20px;
  border-block-end: 1px solid #e2e8f0;
  color: #1a365d;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#seminarDescription > h2:not(:first-child) {
  margin-block-start: 3.5rem;
}

#seminarDescription > h2::before {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 20px;
  border-radius: var(--radius-pill);
  background: #1a365d;
}

#seminarDescription > h3 {
  margin-block-start: 1.75rem;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#seminarDescription > p,
#seminarDescription li {
  color: #475569;
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  font-weight: 500;
  line-height: 1.9;
}

#seminarDescription > ul {
  display: grid;
  gap: 16px;
}

#seminarDescription > ul > li {
  position: relative;
  padding-inline-start: 28px;
}

#seminarDescription > ul > li::before {
  content: "";
  position: absolute;
  inset-block-start: 11px;
  inset-inline-start: 0;
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-pill);
  background: #dbeafe;
  box-shadow: 0 0 0 6px rgba(219, 234, 254, 0.65);
}

#seminarDescription > p:first-of-type {
  color: #64748b;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.9;
}

.seminar-movie-freearea > *:first-child {
  margin-block-start: 0;
}

.seminar-movie-freearea > *:last-child {
  margin-block-end: 0;
}

@media (max-width: 991px) {
  .renew-set-hero,
  .seminar-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .seminar-detail-side {
    position: static;
  }

  .seminar-detail-summary__value--align-end,
  .seminar-detail-summary__stack,
  .seminar-detail-summary__bundle {
    justify-items: start;
    text-align: start;
  }

  .seminar-renew-card {
    grid-template-columns: clamp(150px, 26vw, 192px) minmax(0, 1fr) 44px;
  }

  .seminar-index-layout {
    grid-template-columns: 1fr;
  }

  .seminar-index-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .renew-page {
    padding-block: 20px 56px;
  }

  .freepage-detail-body,
  .freepage-detail-gate {
    padding-block: 22px;
    padding-inline: 0;
  }

  .renew-surface-card {
    padding-block: 18px;
    padding-inline: 16px;
    border-radius: var(--radius-2xl);
  }

  .seminar-detail-panel,
  .seminar-detail-body-card {
    padding-block: 22px;
    padding-inline: 18px;
    border-radius: var(--radius-2xl);
  }

  .renew-page-hero__title {
    font-size: 1.875rem;
  }

  .renew-set-summary__head {
    flex-direction: column;
  }

  .seminar-renew-card {
    grid-template-columns: 1fr;
  }

.seminar-renew-card__arrow {
    inline-size: 40px;
    block-size: 40px;
  }
}

/* top page renewal override: align to preview-renewal/index.html */
body#page-index .top-renewal-home {
  background: #fff;
}

body#page-index .top-renewal-home .compare-hero-shell {
  padding-block: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 32px);
  background-color: #fff;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.58)),
    repeating-linear-gradient(to right, rgba(26, 54, 93, 0.09) 0, rgba(26, 54, 93, 0.09) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(to bottom, rgba(26, 54, 93, 0.09) 0, rgba(26, 54, 93, 0.09) 1px, transparent 1px, transparent 28px);
}

body#page-index .top-renewal-home .compare-hero-shell .hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 5vw, 60px);
}

body#page-index .top-renewal-home .compare-hero-shell .hero-content {
  flex: 1;
  max-inline-size: 540px;
  text-align: start;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-subtitle {
  margin-block-end: 16px;
  color: #475569;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.7;
}

body#page-index .top-renewal-home .compare-hero-shell .hero-buttons {
  justify-content: flex-start;
}

body#page-index .top-renewal-home .home-topics-section,
body#page-index .top-renewal-home .top-home-seminar,
body#page-index .top-renewal-home .news-topics-section,
body#page-index .top-renewal-home .pickup-category-section,
body#page-index .top-renewal-home .top-home-media {
  padding-block: clamp(1.5rem, 4vw, 4rem);
}

body#page-index .top-renewal-home .home-topics-section__header,
body#page-index .top-renewal-home .top-home-seminar__header,
body#page-index .top-renewal-home .news-topics-overview,
body#page-index .top-renewal-home .top-home-media__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-end: clamp(0.875rem, 2.6vw, 2.5rem);
}

body#page-index .top-renewal-home .section-link-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 40px;
  padding-block: 8px;
  padding-inline: 16px;
  border: 1px solid #1a365d;
  border-radius: var(--radius-pill);
  background: #1a365d;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
}

body#page-index .top-renewal-home .section-link-solid .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

body#page-index .top-renewal-home .home-topics-carousel {
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

body#page-index .top-renewal-home .home-topics-swiper {
  overflow: visible;
}

body#page-index .top-renewal-home .home-topics-slide {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

body#page-index .top-renewal-home .home-topics-slide:not(.swiper-slide-active) {
  transform: scale(0.92);
}

body#page-index .top-renewal-home .home-topics-banner {
  display: block;
  text-decoration: none;
}

body#page-index .top-renewal-home .home-topics-image {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  aspect-ratio: 16 / 9;
  background: #e2e8f0;
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.35);
}

body#page-index .top-renewal-home .home-topics-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

body#page-index .top-renewal-home .home-topics-banner:hover .home-topics-image img {
  transform: scale(1.04);
}

body#page-index .top-renewal-home .home-topics-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-block-start: 1.5rem;
}

body#page-index .top-renewal-home .home-topics-pagination .swiper-pagination-bullet {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: #cbd5e1;
  opacity: 1;
  transition: inline-size 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

body#page-index .top-renewal-home .home-topics-pagination .swiper-pagination-bullet-active {
  inline-size: 2rem;
  background: #1a365d;
}

body#page-index .top-renewal-home .news-stage {
  position: relative;
  isolation: isolate;
  margin-block-end: 2rem;
}

body#page-index .top-renewal-home .news-stage-grid {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: start;
}

body#page-index .top-renewal-home .news-copy-area {
  grid-column: 1;
  min-inline-size: 0;
}

body#page-index .top-renewal-home .topics-area,
body#page-index .top-renewal-home .news-list-area {
  grid-column: span 6 / span 6;
}

body#page-index .top-renewal-home .news-list-area {
  grid-column: 2;
  min-inline-size: 0;
}

body#page-index .top-renewal-home .topics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

body#page-index .top-renewal-home .topics-banner {
  display: block;
  text-decoration: none;
}

body#page-index .top-renewal-home .topics-text,
body#page-index .top-renewal-home .topics-headline {
  display: none;
}

body#page-index .top-renewal-home .topics-image {
  overflow: hidden;
  margin-block-end: 16px;
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 10;
}

body#page-index .top-renewal-home .topics-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

body#page-index .top-renewal-home .topics-banner:hover .topics-image img {
  transform: scale(1.05);
}

body#page-index .top-renewal-home .topics-headline {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

body#page-index .top-renewal-home .news-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
  padding-inline: 16px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

body#page-index .top-renewal-home .news-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

body#page-index .top-renewal-home .news-thumb {
  inline-size: 108px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
}

body#page-index .top-renewal-home .news-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

body#page-index .top-renewal-home .top-home-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body#page-index .top-renewal-home .top-home-news-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}

body#page-index .top-renewal-home .top-home-news-meta {
  display: flex;
  align-items: center;
}

body#page-index .top-renewal-home .top-home-news-date {
  color: #6b7280;
  font-size: 12px;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.06em;
}

body#page-index .top-renewal-home .top-home-news-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body#page-index .top-renewal-home .top-home-news-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: #f8fafc;
  color: #64748b;
}

body#page-index .top-renewal-home .top-home-news-arrow .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

body#page-index .top-renewal-home .seminar-stage::before {
  inset-block-start: -4.75rem;
  inset-block-end: 2.75rem;
  inset-inline-start: 2.5rem;
  inset-inline-end: calc(50% - 50vw);
  border-radius: 2rem 0 0 2rem;
  background: #e8edf3;
}

body#page-index .top-renewal-home .seminar-editorial {
  display: grid;
  gap: 1.5rem;
  max-inline-size: 1280px;
  margin-inline: auto;
}

body#page-index .top-renewal-home .seminar-editorial-side {
  display: grid;
  gap: 1.5rem;
}

body#page-index .top-renewal-home .top-home-seminar-card {
  display: block;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-2xl);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body#page-index .top-renewal-home .top-home-seminar-card:hover {
  box-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.22);
  border-color: #cbd5e1;
}

body#page-index .top-renewal-home .top-home-seminar-card .card-thumb {
  overflow: hidden;
  position: relative;
  border-block-end: 1px solid #f1f5f9;
  background: #f8fafc;
  aspect-ratio: 16 / 9;
}

body#page-index .top-renewal-home .top-home-seminar-card .card-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

body#page-index .top-renewal-home .top-home-seminar-card:hover .card-thumb img {
  transform: scale(1.04);
}

body#page-index .top-renewal-home .top-home-seminar-card .card-info {
  padding-block: 16px;
  padding-inline: 16px;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature {
  border-color: #e2e8f0;
  box-shadow: none;
  block-size: 100%;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .card-thumb {
  aspect-ratio: 16 / 9;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .card-info {
  padding-block: 24px;
  padding-inline: 24px;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 58px;
  block-size: 58px;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  background: #fff;
  color: #0f172a;
  font-family: var(--font-en);
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge .date-main {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge .weekday {
  margin-block-start: 4px;
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-time-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-status-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  padding-block: 3px;
  padding-inline: 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-status-inline.status-open {
  background: #ecfdf5;
  color: #059669;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-status-inline.status-critical {
  background: #fff1f2;
  color: #e11d48;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-time-info .time,
body#page-index .top-renewal-home .top-home-seminar-card .seminar-time-info .venue,
body#page-index .top-renewal-home .top-home-seminar-card .seminar-footer-info .seats,
body#page-index .top-renewal-home .top-home-seminar-card .seminar-footer-info .deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1.45;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  color: #64748b;
}

body#page-index .top-renewal-home .top-home-seminar-card .card-title {
  margin-block-start: 14px;
  margin-block-end: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

body#page-index .top-renewal-home .top-home-seminar-card .card-meta-bottom {
  margin-block-start: 14px;
  padding-block-start: 12px;
  border-block-start: 1px solid #f1f5f9;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-footer-info {
  inline-size: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 14px;
}

body#page-index .top-renewal-home .top-home-seminar-card .seminar-footer-info .seats strong {
  color: #0f172a;
  font-weight: 800;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 1rem;
  color: #ff7f50;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-feature-kicker::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 1px;
  background: rgba(255, 127, 80, 0.6);
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-date-row {
  gap: 16px;
  align-items: start;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-date-badge {
  inline-size: 78px;
  block-size: 78px;
  border-radius: var(--radius-2xl);
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-date-badge .date-main {
  font-size: 1rem;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-date-badge .weekday {
  margin-block-start: 0.4rem;
  font-size: 0.72rem;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-time-info {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.55rem 1rem;
  align-items: center;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-time-info .seminar-status-inline {
  grid-column: 1;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-time-info .time {
  grid-column: 2;
  justify-self: start;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-time-info .venue {
  grid-column: 1 / -1;
  font-size: 0.82rem;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .card-title {
  margin-block-start: 18px;
  font-size: 1.65rem;
  line-height: 1.34;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .card-meta-bottom {
  margin-block-start: 18px;
  padding-block-start: 14px;
}

body#page-index .top-renewal-home .top-home-seminar-card--feature .seminar-footer-info {
  gap: 0.75rem 1.5rem;
  font-size: 0.85rem;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .card-thumb {
  aspect-ratio: 16 / 9;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .card-info {
  padding-block: 12px;
  padding-inline: 12px;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-date-row {
  gap: 8px;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-date-badge {
  inline-size: 48px;
  block-size: 48px;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-date-badge .date-main {
  font-size: 0.95rem;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-date-badge .weekday {
  margin-block-start: 3px;
  font-size: 7px;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-time-info {
  gap: 4px;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-time-info .time,
body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-time-info .venue,
body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-footer-info .seats,
body#page-index .top-renewal-home .top-home-seminar-card--compact .seminar-footer-info .deadline {
  font-size: 10px;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .card-title {
  margin-block-start: 10px;
  font-size: 13px;
  line-height: 1.4;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .card-meta-bottom {
  margin-block-start: 10px;
  padding-block-start: 9px;
}

body#page-index .top-renewal-home .top-home-seminar-card--compact .card-thumb img {
  filter: saturate(0.92);
}

body#page-index .top-renewal-home .top-home-seminar-mobile-slider {
  display: none;
}

body#page-index .top-renewal-home .pickup-category-copy {
  margin-block-end: 2.5rem;
}

body#page-index .top-renewal-home .pickup-category-layout {
  display: grid;
  grid-template-columns: minmax(0, clamp(15rem, 18vw, 18rem)) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 10rem);
  align-items: start;
}

body#page-index .top-renewal-home .pickup-category-copy.top-home-section-copy {
  position: sticky;
  inset-block-start: clamp(4rem, 8vw, 7rem);
}

body#page-index .top-renewal-home .pickup-category-text {
  max-inline-size: 18rem;
}

@media (max-width: 1024px) {
  body#page-index .top-renewal-home .pickup-category-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body#page-index .top-renewal-home .pickup-category-copy.top-home-section-copy {
    position: static;
  }
}

body#page-index .top-renewal-home .local-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

body#page-index .top-renewal-home .local-nav-card.new-style {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2rem 2rem 0 2rem;
  background: #f8fafc;
  text-decoration: none;
  aspect-ratio: 600 / 350;
  isolation: isolate;
}

body#page-index .top-renewal-home .local-nav-card.new-style::before {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -1px;
  inline-size: 4.625rem;
  block-size: 4.625rem;
  background-image: url("data:image/svg+xml,%3Csvg width='74' height='74' viewBox='0 0 74 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55.6917 18.3083H51.8806C33.3774 18.3083 18.3081 33.3775 18.3081 51.8808V55.6918C18.3081 65.5386 10.2067 73.5878 0.359863 73.5878H73.6401V0.359863C73.6401 10.2067 65.5386 18.3083 55.6917 18.3083Z' fill='%23ffffff'/%3E%3Cpath d='M55.6917 18.3083H51.8806C33.3774 18.3083 18.3081 33.3775 18.3081 51.8808V55.6918C18.3081 65.5386 10.2067 73.5878 0.359863 73.5878' stroke='%23e2e8f0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 4;
  pointer-events: none;
}

body#page-index .top-renewal-home .local-nav-card.new-style::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
  background-color: #1a365d;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.8278 15.1831C26.7259 14.9545 26.58 14.7376 26.3902 14.5477C26.3779 14.5359 26.3638 14.5225 26.3533 14.5107L17.0535 5.61522C16.1959 4.79493 14.8059 4.79493 13.9465 5.61522C13.0872 6.43551 13.0889 7.76513 13.9465 8.5871L19.4997 13.8988H6.19667C4.98411 13.8988 4 14.8402 4 16C4 17.1598 4.98411 18.1012 6.19667 18.1012H19.4997L13.9465 23.4129C13.0889 24.2332 13.0889 25.5628 13.9465 26.3848C14.3753 26.7949 14.9359 27 15.5 27C16.0641 27 16.6247 26.7949 17.0535 26.3848L26.3533 17.4893C26.3656 17.4775 26.3797 17.4641 26.3902 17.4523C26.58 17.2624 26.7259 17.0455 26.8278 16.8169C26.9367 16.5665 27 16.2908 27 16C27 15.7092 26.9385 15.4352 26.8278 15.1831Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  z-index: 5;
  pointer-events: none;
}

body#page-index .top-renewal-home .local-nav-grid .local-nav-card:nth-child(1)::after { background-color: oklch(79% 0.12 66deg); }
body#page-index .top-renewal-home .local-nav-grid .local-nav-card:nth-child(2)::after { background-color: oklch(79% 0.12 246deg); }
body#page-index .top-renewal-home .local-nav-grid .local-nav-card:nth-child(3)::after { background-color: oklch(79% 0.12 206deg); }
body#page-index .top-renewal-home .local-nav-grid .local-nav-card:nth-child(4)::after { background-color: oklch(79% 0.12 10deg); }

body#page-index .top-renewal-home .local-nav-card.new-style .card-bg-gradient {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  transition: transform 0.7s ease;
  z-index: 1;
}

body#page-index .top-renewal-home .local-nav-card.new-style:hover .card-bg-gradient {
  transform: scale(1.05);
}

body#page-index .top-renewal-home .local-nav-card.new-style .card-icon {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  inline-size: clamp(70px, 48%, 110px);
  block-size: clamp(70px, 48%, 110px);
  z-index: 2;
  opacity: 0.32;
  pointer-events: none;
}

body#page-index .top-renewal-home .local-nav-card.new-style .card-icon img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

body#page-index .top-renewal-home .local-nav-card.new-style .card-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

body#page-index .top-renewal-home .local-nav-card.new-style .card-content {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  z-index: 4;
}

body#page-index .top-renewal-home .local-nav-card.new-style .card-category {
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #1a365d;
  font-size: clamp(0.62rem, 0.9vw, 0.68rem);
  font-weight: 700;
  line-height: 1.2;
}

body#page-index .top-renewal-home .local-nav-card.new-style .card-title {
  margin: 0;
  color: #fff;
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  font-weight: 700;
  line-height: 1.4;
}

body#page-index .top-renewal-home .top-home-media-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-2xl);
  background: #fff;
  box-shadow: 0 10px 24px -24px rgba(15, 23, 42, 0.28);
  color: #1a365d;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

body#page-index .top-renewal-home .top-home-media-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.22);
  transform: translateY(-2px);
}

body#page-index .top-renewal-home .top-home-media-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
}

body#page-index .top-renewal-home .top-home-media-card__hover-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 23, 42, 0.2);
  opacity: 0;
  transition: opacity 0.25s ease;
}

body#page-index .top-renewal-home .top-home-media-card__play-indicator {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

body#page-index .top-renewal-home .top-home-media-card__play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.26);
  box-shadow: 0 18px 32px -20px rgba(15, 23, 42, 0.7);
  color: #fff;
  transform: scale(0.92);
  transition: transform 0.35s ease;
}

body#page-index .top-renewal-home .top-home-media-card__play-circle svg {
  inline-size: 2.35rem;
  block-size: 2.35rem;
}

body#page-index .top-renewal-home .top-home-media-card--video:hover .top-home-media-card__hover-screen,
body#page-index .top-renewal-home .top-home-media-card--video:hover .top-home-media-card__play-indicator {
  opacity: 1;
}

body#page-index .top-renewal-home .top-home-media-card--video:hover .top-home-media-card__play-circle {
  transform: scale(1);
}

body#page-index .top-renewal-home .top-home-media-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-block: 20px;
  padding-inline: 20px;
  background: #fff;
}

body#page-index .top-renewal-home .top-home-media-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
}

body#page-index .top-renewal-home .top-home-media-card__meta-pill,
body#page-index .top-renewal-home .top-home-media-card__duration {
  padding-block: 0.35rem;
  padding-inline: 0.7rem;
  border-radius: var(--radius-lg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body#page-index .top-renewal-home .top-home-media-card__duration {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

body#page-index .top-renewal-home .top-home-media-card__meta-pill--category {
  background: #e8ecff;
  color: #1a365d;
}

body#page-index .top-renewal-home .top-home-media-card__favorite-btn {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2;
}

body#page-index .top-renewal-home .top-home-media-card__favorite-btn .favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #fff;
}

body#page-index .top-renewal-home .top-home-media-card__favorite-btn .favorite::before {
  margin: 0;
}

body#page-index .top-renewal-home .top-home-media-card__favorite-btn .favorite span {
  display: none;
}

body#page-index .top-renewal-home .top-home-media-card--article .top-home-media-card__favorite-btn .favorite .fav-icon {
  display: none;
}

body#page-index .top-renewal-home .top-home-media-card--article .top-home-media-card__favorite-btn .favorite::after {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.75A2.25 2.25 0 0 0 3.75 6v14.25l8.25-4.5 8.25 4.5V6A2.25 2.25 0 0 0 18 3.75H6Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.75A2.25 2.25 0 0 0 3.75 6v14.25l8.25-4.5 8.25 4.5V6A2.25 2.25 0 0 0 18 3.75H6Z' fill='black'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

body#page-index .top-renewal-home .top-home-media-card__date {
  padding-block: 0.125rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-md);
  background: #f1f5f9;
  color: #000;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body#page-index .top-renewal-home .top-home-media-card__title {
  display: -webkit-box;
  margin: 0 0 10px;
  min-block-size: calc(1.3em * 2);
  overflow: hidden;
  color: #1a365d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body#page-index .top-renewal-home .top-home-media-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  min-block-size: calc(1.65em * 2);
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body#page-index .top-renewal-home .top-home-media-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: auto;
  padding-block-start: 16px;
  border-block-start: 1px solid #f8fafc;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body#page-index .top-renewal-home .top-home-media-card__plays {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

body#page-index .top-renewal-home .top-home-media-card__plays::before {
  content: "";
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.18;
}

@media (min-width: 1024px) {
  body#page-index .top-renewal-home .seminar-editorial {
    grid-template-columns: minmax(0, 1fr);
  }

  body#page-index .top-renewal-home .top-home-seminar-slider-wrap {
    min-inline-size: 0;
  }

  body#page-index .top-renewal-home .news-copy-area.top-home-media__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
  }

  body#page-index .top-renewal-home .news-copy-area.top-home-media__header .news-topics-link {
    align-self: flex-start;
  }

  body#page-index .top-renewal-home .top-home-seminar-card--feature {
    display: flex;
    align-items: stretch;
  }

  body#page-index .top-renewal-home .top-home-seminar-card--feature .card-thumb {
    inline-size: min(48%, 36rem);
    block-size: auto;
    flex-shrink: 0;
    border-block-end: 0;
    border-inline-end: 1px solid #f1f5f9;
    aspect-ratio: auto;
  }

  body#page-index .top-renewal-home .top-home-seminar-card--feature .card-thumb img {
    object-fit: contain;
    object-position: center;
  }

  body#page-index .top-renewal-home .top-home-seminar-card--feature .card-info {
    flex: 1;
    min-inline-size: 0;
  }

  body#page-index .top-renewal-home .home-seminar-side-swiper {
    inline-size: 100%;
    min-inline-size: 0;
  }
}

@media (max-width: 1024px) {
  body#page-index .top-renewal-home .news-stage-grid {
    grid-template-columns: 1fr;
  }

  body#page-index .top-renewal-home .news-copy-area,
  body#page-index .top-renewal-home .topics-area,
  body#page-index .top-renewal-home .news-list-area {
    grid-column: auto;
  }

  body#page-index .top-renewal-home .news-copy-area {
    gap: 1rem;
  }

  body#page-index .top-renewal-home .topics-area {
    order: 1;
  }

  body#page-index .top-renewal-home .news-list-area {
    order: 2;
  }
}

@media (max-width: 768px) {
  body#page-index .news-header-v2,
  body#page-index .top-renewal-home .home-topics-section__header,
  body#page-index .top-renewal-home .top-home-seminar__header,
  body#page-index .top-renewal-home .news-topics-overview,
  body#page-index .top-renewal-home .top-home-media__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 12px;
    row-gap: 10px;
  }

  body#page-index .news-header-v2 .header-left,
  body#page-index .top-renewal-home .news-topics-copy,
  body#page-index .top-renewal-home .top-home-section-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-inline-size: 0;
  }

  body#page-index .news-header-v2 .header-left .divider {
    display: none;
  }

  body#page-index .news-header-v2 .view-all-link,
  body#page-index .top-renewal-home .top-home-seminar__header .section-link-solid,
  body#page-index .top-renewal-home .news-topics-link,
  body#page-index .top-renewal-home .top-home-media__header .section-link-solid {
    align-self: end;
    margin: 0;
    min-block-size: 36px;
    padding-block: 6px;
    padding-inline: 12px;
    font-size: clamp(12px, 3.2vw, 13px);
    gap: 6px;
  }

  body#page-index .top-renewal-home .top-home-seminar__header .section-link-solid .material-symbols-outlined,
  body#page-index .top-renewal-home .news-topics-link .material-symbols-outlined,
  body#page-index .top-renewal-home .top-home-media__header .section-link-solid .material-symbols-outlined {
    font-size: 16px;
  }

  body#page-index .news-header-v2 .header-left .title-en,
  body#page-index .top-renewal-home .top-home-section-title,
  body#page-index .top-renewal-home .news-topics-title {
    font-size: clamp(1.2rem, 6.4vw, 1.55rem);
    line-height: 1.1;
  }

  body#page-index .top-renewal-home .top-home-section-title--seminar .top-home-section-title__break {
    display: block;
  }

  body#page-index .news-header-v2 .header-left .title-ja,
  body#page-index .top-renewal-home .top-home-section-kicker,
  body#page-index .top-renewal-home .news-topics-eyebrow,
  body#page-index .top-renewal-home .top-home-section-lead,
  body#page-index .top-renewal-home .news-topics-lead {
    line-height: 1.5;
  }

  body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge {
    inline-size: auto;
    block-size: auto;
    padding-block: 10px;
    padding-inline: 14px;
  }

  body#page-index .top-renewal-home .top-home-seminar-card .seminar-date-badge .weekday {
    margin-block-start: 0;
  }

  body#page-index .top-renewal-home .seminar-editorial {
    display: none;
  }

  body#page-index .top-renewal-home .top-home-seminar-mobile-slider {
    display: block;
  }

  body#page-index .top-renewal-home .top-home-seminar-mobile-slider .swiper {
    overflow: visible;
  }

  body#page-index .top-renewal-home .top-home-media__slider-wrap .new-video-swiper,
  body#page-index .top-renewal-home .top-home-media__slider-wrap .new-article-swiper {
    overflow: visible;
  }

  body#page-index .top-renewal-home .top-home-seminar-mobile-slider .swiper-slide {
    display: flex;
  }

  body#page-index .top-renewal-home .top-home-seminar-mobile-slider .top-home-seminar-card--compact {
    inline-size: 100%;
  }

  body#page-index .top-renewal-home .compare-hero-shell .hero-inner {
    flex-direction: column-reverse;
    text-align: center;
  }

  body#page-index .top-renewal-home .compare-hero-shell .hero-content,
  body#page-index .top-renewal-home .compare-hero-shell .hero-image {
    max-inline-size: 100%;
    text-align: center;
  }

  body#page-index .top-renewal-home .compare-hero-shell .hero-buttons {
    justify-content: center;
  }

  body#page-index .top-renewal-home .home-topics-carousel {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 1rem;
  }

  body#page-index .top-renewal-home .home-topics-slide:not(.swiper-slide-active) {
    transform: scale(0.94);
  }

  body#page-index .top-renewal-home .home-topics-image {
    border-radius: var(--radius-2xl);
  }

  body#page-index .top-renewal-home .home-topics-pagination {
    margin-block-start: 1.125rem;
    gap: 0.5rem;
  }

  body#page-index .top-renewal-home .topics-mobile-swiper {
    overflow: visible;
  }

  body#page-index .top-renewal-home .topics-mobile-swiper .swiper-wrapper.topics-grid {
    display: flex;
    gap: 0;
  }

  body#page-index .top-renewal-home .topics-mobile-swiper .swiper-slide.topics-slide {
    block-size: auto;
  }

  body#page-index .top-renewal-home .topics-banner {
    display: block;
  }

  body#page-index .top-renewal-home .topics-image {
    margin-block-end: 12px;
  }

  body#page-index .top-renewal-home .topics-text,
  body#page-index .top-renewal-home .topics-headline {
    display: none;
  }

  body#page-index .top-renewal-home .topics-headline {
    font-size: 0.95rem;
  }

  body#page-index .top-renewal-home .local-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body#page-index .top-renewal-home .pickup-category-text {
    max-inline-size: none;
  }

  body#page-index .top-renewal-home .local-nav-card.new-style {
    border-radius: 1.25rem 1.25rem 0 1.25rem;
    min-block-size: 0;
  }

  body#page-index .top-renewal-home .local-nav-card.new-style::before {
    inline-size: 3.25rem;
    block-size: 3.25rem;
  }

  body#page-index .top-renewal-home .local-nav-card.new-style::after {
    inline-size: 1.875rem;
    block-size: 1.875rem;
    background-size: 0.8rem;
  }

  body#page-index .top-renewal-home .local-nav-card.new-style .card-icon {
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
    inline-size: clamp(52px, 38%, 74px);
    block-size: clamp(52px, 38%, 74px);
    opacity: 0.24;
  }

  body#page-index .top-renewal-home .local-nav-card.new-style .card-content {
    padding-block: 0.8rem;
    padding-inline: 0.8rem;
    gap: 0.4rem;
  }

  body#page-index .top-renewal-home .local-nav-card.new-style .card-category {
    font-size: 0.52rem;
    padding-block: 0.18rem;
    padding-inline: 0.45rem;
  }

  body#page-index .top-renewal-home .local-nav-card.new-style .card-title {
    font-size: 0.72rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev,
  body#page-index .top-renewal-home .swiper-button-next.content-slider-next {
    inline-size: 40px;
    block-size: 40px;
  }

  body#page-index .top-renewal-home .swiper-button-prev.content-slider-prev {
    inset-inline-start: -20px;
  }

  body#page-index .top-renewal-home .swiper-button-next.content-slider-next {
    inset-inline-end: -20px;
  }

  body#page-index .top-renewal-home .news-card {
    flex-direction: row;
    align-items: center;
  }

  body#page-index .top-renewal-home .news-thumb {
    inline-size: 96px;
  }

  body#page-index .top-renewal-home .top-home-news-arrow {
    display: none;
  }
}