/* ============================================================
   ff-otb-web / main.css
   docs/tokens.md と一対一対応のデザイントークン → CSS Variable
   ============================================================ */

/* === Tokens === */
:root {
  /* Brand */
  --c-primary-light: #899DCB;
  --c-primary: #4C2C87;
  --c-primary-dark: #21003D;

  /* Fujifilm Brand Colors (Brand Guidelines 5-2) */
  --c-action: #01916D;        /* Fujifilm アドバンストグリーン 100% */
  --c-action-80: #34A78A;
  --c-action-60: #67BDA7;
  --c-action-40: #99D3C5;
  --c-action-20: #CCE9E2;
  --c-action-10: #E6F4F0;
  --c-action-dark: #014937;   /* +K60% */
  --c-neutral-100: #333333;   /* イノベーティブグレー 100% */
  --c-neutral-80: #5C5C5C;
  --c-neutral-60: #858585;
  --c-neutral-40: #ADADAD;
  --c-neutral-20: #D6D6D6;
  --c-neutral-10: #EBEBEB;
  --g-action-grad: linear-gradient(135deg, #01916D 0%, #014937 100%);
  --c-secondary1-light: #F5ADA8;
  --c-secondary1: #ED7971;
  --c-secondary1-dark: #D14D45;
  --c-secondary2-light: #8FD9BE;
  --c-secondary2: #51BA97;
  --c-secondary2-dark: #2E9670;

  /* Neutral */
  --c-white: #FFFFFF;
  --c-gray-50: #F9FAFB;
  --c-gray-100: #F3F4F6;
  --c-gray-200: #E5E7EB;
  --c-gray-300: #D1D5DB;
  --c-gray-400: #9CA3AF;
  --c-gray-500: #6B7280;
  --c-gray-600: #4B5563;
  --c-gray-700: #374151;
  --c-gray-800: #1F2937;
  --c-gray-900: #111827;

  /* Accent */
  --c-amber-50: #FFFBEB;
  --c-orange-50: #FFF7ED;
  --c-red-50: #FEF2F2;
  --c-blue-50: #EFF6FF;
  --c-teal-50: #ECFEFF;
  --c-purple-50: #F5F3FF;
  --c-yellow-50: #FEFCE8;

  /* Semantic */
  --text-primary: var(--c-gray-800);
  --text-secondary: var(--c-gray-600);
  --text-tertiary: var(--c-gray-400);
  --text-inverse: var(--c-white);
  --surface-base: var(--c-white);
  --surface-muted: var(--c-gray-50);
  --border-default: var(--c-gray-200);
  --border-strong: var(--c-gray-300);

  /* Gradients (Figma 値準拠) */
  --g-brand: linear-gradient(135deg, #4C2C87 0%, #21003D 50%, #4C2C87 100%);
  --g-brand-2stop: linear-gradient(135deg, #4C2C87 0%, #21003D 100%);
  --g-primary-soft: linear-gradient(135deg, #899DCB 0%, #4C2C87 100%);
  --g-secondary1: linear-gradient(135deg, #ED7971 0%, #D14D45 100%);
  --g-secondary2: linear-gradient(135deg, #51BA97 0%, #8FD9BE 100%);
  --g-footer: linear-gradient(135deg, #111827 0%, #1F2937 50%, #111827 100%);
  --g-section-bg: linear-gradient(135deg, #F9FAFB 0%, #EFF6FF 50%, #F5F3FF 100%);
  /* Section title underline: #51BA97 solid → transparent (fade out) per Figma */
  --g-section-underline: linear-gradient(90deg, #51BA97 0%, rgba(81,186,151,0) 100%);
  /* Hero divider / Quote bar: #51BA97 → #8FD9BE color shift per Figma */
  --g-hero-accent: linear-gradient(90deg, #51BA97 0%, #8FD9BE 100%);
  --g-hero-accent-v: linear-gradient(180deg, #51BA97 0%, #8FD9BE 100%);

  /* Typography */
  --font-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing */
  --sp-0: 0;
  --sp-2xs: 0.125rem;
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 0.75rem;
  --sp-lg: 1rem;
  --sp-xl: 1.5rem;
  --sp-2xl: 2rem;
  --sp-3xl: 3rem;
  --sp-4xl: 4rem;
  --sp-5xl: 5rem;
  --sp-6xl: 7.5rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad-desktop: 120px;
  --container-pad-tablet: 64px;
  --container-pad-mobile: 16px;
  --section-pad-y: 80px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.05);
  --sh-sm: 0 2px 4px rgba(0,0,0,0.04);
  --sh-md: 0 4px 8px rgba(0,0,0,0.06);
  --sh-lg: 0 10px 20px rgba(0,0,0,0.08);
  --sh-xl: 0 10px 30px rgba(0,0,0,0.10);
  --sh-2xl: 0 25px 50px -12px rgba(0,0,0,0.30);
  --sh-float: 0 12px 24px -6px rgba(0,0,0,0.25);

  /* Motion */
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --ease-default: ease-out;
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
body.is-videos { background: var(--c-white); }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
input, textarea, select { font: inherit; }

/* === Base === */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  background: #F1F2F1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Layout helpers === */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad-mobile) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px) {
  .container {
    max-width: calc(var(--container-max) + var(--container-pad-tablet) * 2);
    padding-inline: var(--container-pad-tablet);
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: calc(var(--container-max) + var(--container-pad-desktop) * 2);
    padding-inline: var(--container-pad-desktop);
  }
}

.section { padding-block: 40px; }
@media (min-width: 768px) { .section { padding-block: 64px; } }
@media (min-width: 1024px) { .section { padding-block: var(--section-pad-y); } }
.section--tight { padding-block: 24px !important; }

.section-muted { background: var(--surface-muted); }
.section-grad { background: var(--g-section-bg); }

/* ============================================================
   Chrome / Header — Figma準拠
   ============================================================ */
.chrome-header {
  background: var(--c-white);
  color: var(--text-primary);
}

/* グロナビ下のアニメーション付きグラデーションライン（左端は画面端／右端はHero右端=container外縁で停止） */
.chrome-nav-line {
  background: var(--c-white);
  overflow: hidden;
  padding-right: max(0px, calc((100% - var(--container-max) - var(--container-pad-mobile) * 2) / 2));
}
@media (min-width: 768px) {
  .chrome-nav-line { padding-right: max(0px, calc((100% - var(--container-max) - var(--container-pad-tablet) * 2) / 2)); }
}
.chrome-nav-line__bar {
  display: block;
  height: 4px;
  width: 0.1%;
  background:
    linear-gradient(90deg,
      rgb(0, 209, 100) 5%,
      rgb(0, 172, 90) 9%,
      rgb(0, 133, 81) 14%,
      rgb(0, 108, 75) 18%,
      rgb(0, 100, 73) 20%,
      rgb(0, 122, 91) 29%,
      rgb(0, 139, 104) 38%,
      rgb(1, 145, 109) 45%,
      rgb(0, 149, 107) 51%,
      rgb(0, 161, 104) 56%,
      rgb(0, 182, 99) 62%,
      rgb(0, 211, 92) 68%,
      rgb(0, 248, 83) 74%,
      rgb(0, 255, 82) 75%,
      rgb(150, 255, 253) 95%) 0 0 / 1000% 100%;
  transition:
    width 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s,
    background-size 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
}
@media (min-width: 768px) { .chrome-nav-line__bar { height: 5px; } }
.chrome-nav-line__bar.is-ready {
  width: 100%;
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .chrome-nav-line__bar { transition: none; }
}
.chrome-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  min-height: 56px;
}
@media (min-width: 1024px) { .chrome-header__inner { padding-block: 20px; min-height: 96px; gap: 24px; } }

.brand-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  grid-column: 2;
  justify-self: center;
}
@media (min-width: 1024px) { .brand-cluster { gap: 20px; } }

/* Left: 富士フイルム富山化学ロゴ */
.header-corp-left {
  display: none;
  align-items: center;
  grid-column: 1;
  justify-self: start;
  text-decoration: none;
  transition: opacity 160ms ease;
}
.header-corp-left:hover { opacity: 0.7; }
@media (min-width: 1024px) { .header-corp-left { display: inline-flex; } }
.header-corp-left img {
  display: block;
  height: 13px;
  width: auto;
}
@media (min-width: 1024px) { .header-corp-left img { height: 15px; } }

/* Right: FUJIFILM ロゴ（旧 patient-link 位置） — ホバーアクション無し */
.header-corp-right {
  display: none;
  align-items: center;
  text-decoration: none;
  cursor: default;
}
@media (min-width: 1024px) { .header-corp-right { display: inline-flex; } }
.header-corp-right img {
  display: block;
  height: 30px;
  width: auto;
}

.brand-logo {
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--c-white);
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 6px;
}
.brand-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  margin: auto;
}
@media (min-width: 1024px) { .brand-logo { width: 62px; height: 62px; border-radius: 13px; padding: 8px; } }

.brand-text { line-height: 1.15; min-width: 0; }
.brand-text__main {
  font-weight: var(--fw-bold);
  font-size: 18px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (min-width: 1024px) { .brand-text__main { font-size: 24px; } }
.brand-text__sub {
  font-size: 12px;
  font-weight: var(--fw-regular);
  opacity: 0.9;
  margin-top: 2px;
  white-space: nowrap;
}
@media (min-width: 1024px) { .brand-text__sub { font-size: 15px; } }

/* サイトロゴ SVG（テロメライシン® 注 Telomelysin® Injection） */
.brand-text-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  transition: opacity var(--dur-fast);
}
.brand-text-link:hover { opacity: 0.8; }
.brand-text-logo {
  display: block;
  height: 29px;
  width: auto;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  /* SVGの白fillをパープルに置換（以前の色） */
  filter: brightness(0) saturate(100%) invert(15%) sepia(60%) saturate(2000%) hue-rotate(252deg) brightness(60%) contrast(95%);
}
@media (min-width: 768px) { .brand-text-logo { height: 34px; } }
@media (min-width: 1024px) { .brand-text-logo { height: 44px; } }

.brand-fujifilm-plate {
  display: none;
  flex-shrink: 0;
  height: 36px;
  margin-left: 4px;
}
@media (min-width: 1024px) { .brand-fujifilm-plate { display: block; } }
.brand-fujifilm-plate img { height: 100%; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; grid-column: 3; justify-self: end; }

.patient-link {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--c-action);
  transition: opacity var(--dur-fast);
}
.patient-link:hover { opacity: 0.7; }
.patient-link i { font-size: 14px; opacity: 0.85; }
@media (min-width: 1024px) { .patient-link { display: inline-flex; font-size: 16px; } }

.hamburger {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--c-action);
  font-size: 22px;
  position: relative;
}
.hamburger::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(1,145,109,0.0);
  transition: background var(--dur-fast);
}
.hamburger:hover::before { background: rgba(1,145,109,0.08); }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* ============================================================
   Chrome / Navigation Bar (desktop only)
   ============================================================ */
.chrome-nav {
  display: none;
  background: var(--c-white);
  border-bottom: 1px solid var(--border-default);
}
@media (min-width: 1024px) { .chrome-nav { display: block; } }
/* TOP のみナビ下線なし */
.is-top .chrome-nav { border-bottom: none; }
/* TOP 以外はグラデーションラインを非表示 */
body:not(.is-top) .chrome-nav-line { display: none; }

.chrome-nav__inner {
  display: flex;
  align-items: stretch;
  height: 48px;
  gap: 0;
}
.nav-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 22px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-top: 3px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
/* ナビ右端の患者向けサイトリンク */
.nav-patient {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-inline: 18px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--c-action);
  transition: opacity var(--dur-fast);
}
.nav-patient:hover { opacity: 0.7; }
.nav-patient i { font-size: 13px; opacity: 0.8; }
.nav-tab:hover { color: var(--c-action); background: var(--c-action-10); }
.nav-tab.is-active {
  color: var(--c-action);
  font-weight: var(--fw-bold);
  background: var(--c-action-10);
}

/* === Mobile drawer === */
.mobile-drawer {
  position: fixed; inset: 0;
  background: var(--c-white);
  color: var(--c-gray-800);
  z-index: 1000;
  padding: 24px 16px;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-emphasis);
  overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 22px; color: var(--c-action);
}
.mobile-drawer__list { display: grid; gap: 4px; margin-top: 48px; list-style: none; padding: 0; }
.mobile-drawer__item {
  height: 56px; display: flex; align-items: center; padding-inline: 16px;
  font-size: 18px; font-weight: var(--fw-medium);
  color: var(--c-gray-800);
  border-bottom: 1px solid #E5E7EB;
  text-decoration: none;
}
.mobile-drawer__item.is-active { background: var(--c-action-10); color: var(--c-action); font-weight: var(--fw-bold); }
.mobile-drawer__corp {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 8px;
  width: fit-content;
  max-width: 280px;
  text-decoration: none;
  transition: opacity 160ms ease;
}
.mobile-drawer__corp:hover { opacity: 0.7; }
.mobile-drawer__corp img {
  display: block;
  width: auto;
  height: 18px;
}
@media (min-width: 1024px) { .mobile-drawer { display: none; } }

body.has-drawer-open { overflow: hidden; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-md);
  font-weight: var(--fw-bold);
  font-size: 17px;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast);
  text-align: center;
  white-space: normal;        /* mobile では折返し可能に */
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
@media (min-width: 768px) { .btn { white-space: nowrap; } }
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--c-neutral-100);
  color: var(--text-inverse);
  box-shadow: var(--sh-lg);
}
.btn--primary:hover { background: var(--c-action); }
.btn--white {
  background: var(--c-white);
  color: var(--c-primary);
  box-shadow: var(--sh-md);
}
.btn--ghost {
  background: var(--c-white);
  color: var(--c-primary);
  border: 1px solid var(--border-default);
}
/* info-card 内の CTA（カルタヘナ PDF 等）— mobile 全幅 */
.info-card__cta {
  width: 100%;
  display: flex;
}
@media (min-width: 768px) {
  .info-card__cta { width: auto; display: inline-flex; }
}
.btn--download {
  background: var(--c-neutral-100);
  color: var(--text-inverse);
  width: 100%;
  padding: 12px 20px;
}
.btn--download:hover { background: var(--c-action); }
.btn--sm { padding: 10px 18px; font-size: 15px; }

/* ============================================================
   Badges & tags
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.badge--coral { background: var(--g-secondary1); color: var(--text-inverse); box-shadow: var(--sh-float); }
.badge--teal { background: var(--g-secondary2); color: var(--text-inverse); box-shadow: var(--sh-float); }
.badge--primary { background: var(--c-purple-50); color: var(--c-primary); }
.badge--file {
  background: var(--c-red-50);
  color: var(--c-secondary1-dark);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
}
.badge--zip {
  background: var(--c-amber-50);
  color: #92670F;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Section Title (緑グラデ下線)
   ============================================================ */
/* Section Title — Figma 4:6/4:7/4:8 spec:
   text 32px Bold #4C2C87, 8px gap, then underline 160×4 fade-out (rgba pill) */
.section-title {
  font-weight: var(--fw-bold);
  font-size: 24px;
  color: var(--c-neutral-100);
  margin: 0 0 24px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
@media (min-width: 768px) { .section-title { font-size: 34px; margin-bottom: 40px; } }
.section-title::after { display: none; }

.section-lede {
  font-size: 16px;
  color: var(--c-gray-600);
  margin: -20px 0 32px;
  line-height: 1.7;
}
@media (min-width: 768px) { .section-lede { font-size: 17px; margin: -28px 0 40px; } }

.event-card__program-title {
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  font-size: 16px;
  margin-bottom: 8px;
}

/* Events ページ用 セクション見出し（Figma 110:471 / 110:495 spec）
   タイトル 28px Bold #4C2C87 + 8px gap + 120×4 fade underline + 8px gap + 14px Regular #6B7280 */
.events-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
}
.events-section-head__title {
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0;
}
@media (min-width: 768px) { .events-section-head__title { font-size: 30px; } }
.events-section-head__underline { display: none; }
.events-section-head__sub {
  font-size: 16px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface-base);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-default);
  box-shadow: var(--sh-lg);
  padding: 24px;
}
@media (min-width: 768px) { .card { padding: 32px; } }

.card-tight { padding: 16px; }

/* ============================================================
   Hero — Figma 1440×720, padding 80/120, content 720 wide left, vcenter
   ============================================================ */
.hero {
  position: relative;
  background-color: var(--c-primary-dark);
  color: var(--c-white);
  overflow: hidden;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad-mobile) * 2);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .hero {
    padding-block: 40px 60px;
    max-width: calc(var(--container-max) + var(--container-pad-tablet) * 2);
  }
}
@media (min-width: 1024px) {
  .hero {
    min-height: 720px;
    padding-block: 56px 80px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start; /* 要素を上に寄せる（川と重ねない） */
  }
}

/* 背景画像レイヤー（ゆっくり ken-burns ズーム） */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
  transform-origin: center;
  animation: hero-bg-kenburns 30s ease-in-out infinite alternate;
  animation-play-state: paused; /* モーダル中は止める */
}
@keyframes hero-bg-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* 上部に微かな暗化グラデで上半分のテキストを読みやすくする */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(33,0,61,0.35) 0%,
    rgba(33,0,61,0.10) 35%,
    transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero__inner { gap: 18px; max-width: 720px; }
}

/* Hero 各要素のフェードイン＋スライドアップ（段階表示） */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__badge-row,
.hero__h1,
.hero__quote,
.hero__cta-row,
.hero__footnote {
  animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-play-state: paused; /* モーダル中は止める */
}
.hero__badge-row  { animation-delay: 0.05s; }
.hero__h1         { animation-delay: 0.20s; }
.hero__quote      { animation-delay: 0.40s; }
.hero__cta-row    { animation-delay: 0.55s; }
.hero__footnote   { animation-delay: 0.80s; }

/* CTA ボタンに優しい pulse glow */
@keyframes hero-cta-pulse {
  0%, 100% {
    box-shadow:
      0 25px 50px -12px rgba(0,0,0,0.40),
      0 0 0 0 rgba(255,255,255,0);
  }
  50% {
    box-shadow:
      0 28px 56px -10px rgba(0,0,0,0.45),
      0 0 0 6px rgba(255,255,255,0.10);
  }
}
.hero__cta {
  animation: hero-cta-pulse 3.2s ease-in-out infinite 1.5s;
  animation-play-state: paused; /* モーダル中は止める */
}
.hero__cta i {
  transition: transform var(--dur-base) var(--ease-emphasis);
}
.hero__cta:hover i { transform: translateX(4px); }

/* 医療関係者ゲート通過後（または最初から確認済）に Hero アニメを再生 */
.medpro-verified .hero::before,
.medpro-verified .hero__badge-row,
.medpro-verified .hero__h1,
.medpro-verified .hero__quote,
.medpro-verified .hero__cta-row,
.medpro-verified .hero__footnote,
.medpro-verified .hero__cta {
  animation-play-state: running;
}

/* アクセシビリティ: アニメ抑制 */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .hero__badge-row,
  .hero__h1,
  .hero__quote,
  .hero__cta-row,
  .hero__footnote { animation: none; opacity: 1; transform: none; }
  .hero__cta { animation: none; }
}

/* Badge: 208×43, padding 12/24, font 16 Bold white, coral gradient, shadow 0 6 16 0.3 */
.hero__badge {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  background: var(--c-action);
  color: var(--c-white);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.30);
}
@media (min-width: 1024px) { .hero__badge { font-size: 18px; } }

/* Badge + SVG ロゴ を横並びにする行 */
.hero__badge-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
@media (min-width: 1024px) { .hero__badge-row { gap: 20px; } }
/* (legacy) subtitle-group も残置 */
.hero__subtitle-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.hero__subtitle {
  font-family: 'Inter', var(--font-sans);
  font-size: 26px;
  font-weight: var(--fw-light);
  letter-spacing: 0.04em;
  color: var(--c-white);
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
@media (min-width: 1024px) {
  .hero__subtitle { font-size: 38px; letter-spacing: 1.2px; }
}
/* SVG ロゴ画像 — Badge (43px) より大きく */
.hero__subtitle-img {
  display: block;
  height: 36px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
@media (min-width: 768px) { .hero__subtitle-img { height: 48px; } }
@media (min-width: 1024px) { .hero__subtitle-img { height: 56px; } }
.hero__divider {
  width: 96px;
  height: 6px;
  /* Figma 3:8: horizontal gradient 51BA97 → 8FD9BE (no fade, color shift) */
  background: var(--g-hero-accent);
  border-radius: var(--r-full);
}

/* H1: gap 4 between line1 block and lines 2+3 block, line-height 110%
   Figma stroke 3px OUTSIDE — emulate via -webkit-text-stroke 6px center + paint-order stroke fill
   so the inner half of the stroke is covered by the fill, leaving 3px visually outside. */
.hero__h1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
  font-family: 'Inter', var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.1;
  color: var(--c-white);
  -webkit-text-fill-color: var(--c-white);
  -webkit-text-stroke: 3px var(--c-primary);
  paint-order: stroke fill;
  letter-spacing: 0;
  margin: 0;
}
.hero__h1 > span { display: block; }
@media (min-width: 1024px) {
  .hero__h1 {
    font-size: 42px;
    -webkit-text-stroke: 6px var(--c-primary); /* visually 3px outside */
  }
}
/* * を小さく、ストローク無効化、「」とくっつける */
.hero__asterisk {
  -webkit-text-stroke: 0;
  font-size: 0.55em;
  font-weight: var(--fw-bold);
  vertical-align: 0.4em;
  margin-left: -0.25em;
  margin-right: 0.05em;
  display: inline-block;
}

/* Quote: horizontal bar 6×96 + gap 24 + inner 690 */
.hero__quote {
  display: flex;
  align-items: stretch;
  gap: 0;
  align-self: stretch;
  width: 100%;
}
.hero__quote-bar { display: none; }
.hero__quote-inner {
  flex: 1;
  background: rgba(0,0,0,0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 20px;
  border-radius: 0;
  font-family: 'Inter', var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-white);
  /* Figma: drop-shadow rgba(0,0,0,0.40) y=1 radius=6 (applied to text inside) */
  text-shadow: 0 1px 6px rgba(0,0,0,0.40);
}
@media (min-width: 1024px) { .hero__quote-inner { font-size: 22px; line-height: 1.6; } }

/* Footnote: mobile では CTA と被るため static で content の下に流す。
   tablet/desktop では Hero 右下に絶対配置 */
.hero__footnote {
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--c-white);
  margin: 16px 16px 0;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  position: relative;
}
@media (min-width: 768px) {
  .hero__footnote {
    position: absolute;
    bottom: 16px; right: 24px;
    margin: 0;
    text-align: right;
    max-width: 60%;
  }
}
@media (min-width: 1024px) {
  .hero__footnote { font-size: 14px; right: 32px; bottom: 20px; max-width: 760px; }
}
.hero__footnote a { text-decoration: underline; word-break: break-all; }

/* CTA: 217×59 pill, padding 16/32, gap 12, text 20 Bold primary */
.hero__cta-row { margin: 0; }
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  /* Figma: fill rgba(255,255,255,0.95) */
  background: rgba(255,255,255,0.95);
  color: var(--c-primary);
  font-weight: var(--fw-bold);
  font-size: 18px;
  border-radius: 0;
  /* Figma: drop-shadow rgba(0,0,0,0.40) y=25 radius=50 spread=-12 */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.40);
  line-height: 1.2;
  transition: transform var(--dur-fast);
}
@media (min-width: 1024px) { .hero__cta { font-size: 22px; } }
.hero__cta:hover { transform: translateY(-1px); }

/* ============================================================
   Notice banner
   ============================================================ */
.notice-section {
  background: var(--g-secondary1);
  border-top: 1px solid var(--c-primary);
  border-bottom: 1px solid var(--c-primary);
  color: var(--c-white);
}
.notice-section .container { padding-block: 18px; }
.notice-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.6;
  text-align: center;
}
@media (min-width: 768px) { .notice-banner { font-size: 16px; } }
.notice-banner__icon { font-size: 20px; opacity: 0.95; }

/* ============================================================
   News list & rows
   ============================================================ */
/* News List + Row — Figma 4:9/4:10/4:11/4:12/4:13/4:14 spec
   List 1000×275, item-spacing 16. Row 1000×81, bg #F9FAFB, LEFT-only stroke 4px #51BA97,
   radius 12, shadow rgba(0,0,0,0.06) y=4 r=8 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
  max-width: 1000px;
}
.news-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta  arrow"
    "title arrow";
  align-items: center;
  row-gap: 10px;
  column-gap: 20px;
  padding: 20px 24px;
  background: #F9FAFB;
  border: none;
  border-left: 4px solid var(--c-purple-50);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.news-row > .news-meta  { grid-area: meta;  }
.news-row > .news-title { grid-area: title; }
.news-row > .news-arrow { grid-area: arrow; }
.news-row:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
@media (max-width: 767px) {
  .news-row { padding: 16px; column-gap: 12px; }
}
/* Date pill — メタ行の左端、コンパクト化 (Bold #4C2C87 テキストのみ) */
.news-date {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-regular);
  color: #4C2C87;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum';
  line-height: 1.2;
  white-space: nowrap;
}
/* タイトルが主役: 大きく・太く・全幅で表示 */
.news-title {
  font-family: 'Inter', var(--font-sans);
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: #1F2937;
  line-height: 1.5;
}
@media (min-width: 768px) { .news-title { font-size: 19px; } }
.news-arrow {
  font-size: 20px;
  font-weight: var(--fw-regular);
  color: #4C2C87;
  line-height: 1;
}

/* 外部リンクアイコン（学会情報など） */
.news-action__ext {
  grid-area: arrow;
  align-self: center;
  font-size: 20px;
  color: var(--c-action);
}

/* 外部リンクアイコン（学会情報など） */
.news-action__ext {
  grid-area: arrow;
  align-self: center;
  font-size: 20px;
  color: var(--c-action);
}

/* news-action: PDFチップ + ダウンロードボタン（製品基本情報と同様の見た目） */
.news-action {
  grid-area: arrow;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.news-action__chip {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--c-neutral-10);
  color: var(--c-neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.news-action__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-neutral-100);
  color: var(--c-white);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
}
.news-row--download:hover .news-action__btn { background: var(--c-action); }
@media (max-width: 767px) {
  .news-action { gap: 6px; }
  .news-action__chip { width: 32px; height: 32px; font-size: 16px; }
  .news-action__btn { padding: 7px 10px; font-size: 13px; }
  .news-action__btn span { display: none; }
}

/* meta クラスタ: 日付 + カテゴリ + NEW */
.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.news-category {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.news-category--product {
  background: var(--c-action-10);
  color: var(--c-action-dark);
  border: 1px solid var(--c-action-40);
}
.news-category--seminar {
  background: var(--c-neutral-10);
  color: var(--c-neutral-100);
  border: 1px solid var(--c-neutral-40);
}
/* NEW バッジ: JS が data-news-date を見て .is-new を付与した行のみ表示 */
.news-new {
  display: none;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Inter', var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ED7971 0%, #D14D45 100%);
  color: #FFFFFF;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(209, 77, 69, 0.25);
}
.news-row.is-new .news-new { display: inline-flex; }

/* ============================================================
   Video link banner
   ============================================================ */
.video-banner {
  margin-top: 24px;
  background: var(--c-white);
  color: var(--c-neutral-100);
  border: 1px solid var(--c-action);
  border-radius: var(--r-xl);
  padding: 20px;
  display: grid;
  gap: 16px;
  box-shadow: var(--sh-md);
  text-decoration: none;
}
@media (min-width: 768px) {
  .video-banner {
    grid-template-columns: 192px 1fr auto;
    align-items: center;
    padding: 24px;
    gap: 24px;
  }
}
.video-banner__thumb {
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.3);
  border-radius: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.video-banner__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-banner__thumb::before {
  content: '\f04b';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--c-white);
  font-size: 26px;
  width: 56px; height: 56px;
  background: rgba(0,0,0,0.55);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  padding-left: 4px;
  position: relative;
  z-index: 2;
}
.video-banner__body { display: flex; flex-direction: column; gap: 6px; }
/* 紹介動画 badge — Figma 271:955: 68×18, #51BA97 solid, radius 4, padding 3/8.
   Text: 10px Inter Bold #FFFFFF, letter-spacing 4px */
.video-banner__category {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-primary);
  color: var(--c-white);
  font-family: 'Inter', var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.2;
}
.video-banner__title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
.video-banner__title .reg-sup { font-size: 0.6em; vertical-align: super; line-height: 0; }
.video-banner__sub { font-size: 15px; opacity: 0.92; }
@media (min-width: 768px) { .video-banner__title { font-size: 24px; } }

/* ============================================================
   Info card (先駆け / カルタヘナ)
   ============================================================ */
/* Info Card base — shared layout/spacing, color via modifiers */
.info-card {
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-inline: auto; /* center within container */
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
@media (min-width: 768px) { .info-card { padding: 32px 36px; gap: 22px; } }

/* RMP modifier (先駆け審査指定) — Figma 282:1300
   1100×469, amber-orange-red gradient, 2px coral border, gap 22 */
.info-card--rmp {
  background: var(--c-white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: 1200px;
}
@media (min-width: 768px) { .info-card--rmp { gap: 22px; } }

/* Cartagena modifier — Figma 312:1374
   1200×603, WHITE solid bg, 2px PURPLE border, padding 36, gap 20 */
.info-card--cart {
  background: #FFFFFF;
  border: none;
  border-radius: 0;
  max-width: 1200px;
}
@media (min-width: 768px) {
  .info-card--cart { padding: 36px; gap: 20px; }
}

/* Header row 292×56 with icon 56 + gap 20 + title */
.info-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 0;
}
/* Icon base — sized only; color via modifier */
.info-card__icon {
  width: 48px; height: 48px;
  color: #FFFFFF;
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
@media (min-width: 768px) { .info-card__icon { width: 56px; height: 56px; font-size: 24px; } }
/* RMP icon: coral gradient, radius 16 (rounded square) */
.info-card--rmp .info-card__icon {
  background: linear-gradient(135deg, #ED7971 0%, #D14D45 100%);
  border-radius: 14px;
}
@media (min-width: 768px) { .info-card--rmp .info-card__icon { border-radius: 16px; } }
/* Cartagena icon: solid #4C2C87 purple, full circle (radius 999) */
.info-card--cart .info-card__icon {
  background: #4C2C87;
  border-radius: 999px;
}

/* Title base — color/font via modifier */
.info-card__title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  margin: 0;
  line-height: 1.3;
}
@media (min-width: 768px) { .info-card__title { font-size: 26px; } }
.info-card--rmp .info-card__title {
  font-family: 'Inter', var(--font-sans);
  color: var(--c-neutral-100);
}
/* 見出し横の補足（現在の先駆的医薬品指定制度 など） */
.info-card__title-note {
  font-size: 0.55em;
  font-weight: var(--fw-medium);
  color: var(--c-gray-600);
  margin-left: 8px;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .info-card__title-note { display: block; margin: 4px 0 0; font-size: 0.65em; white-space: normal; }
}
.info-card--cart .info-card__title {
  font-family: 'Noto Sans JP', var(--font-sans);
  color: #111827;
}
@media (min-width: 768px) { .info-card--cart .info-card__title { font-size: 30px; } }

/* Highlight box base — sizing/spacing only; color via modifier */
.info-card__highlight {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* RMP highlight: 左端の細いライン（薄めグレー）のみ。角丸・背景無し */
.info-card--rmp .info-card__highlight {
  background: transparent;
  border: none;
  border-left: 4px solid var(--c-neutral-20);
  border-radius: 0;
  padding: 20px 24px;
}
/* Cartagena highlight (317:1414): transparent bg, 2px purple FULL border, radius 8, padding 18/22 */
.info-card--cart .info-card__highlight {
  background: transparent;
  border: 1px solid var(--c-neutral-100);
  border-radius: 0;
  padding: 18px 22px;
}
.info-card__highlight strong { color: var(--c-primary-dark); }
/* Highlight title — color/font via modifier */
.info-card__highlight-title {
  font-size: 19px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  margin: 0;
  line-height: 1.3;
}
.info-card--rmp .info-card__highlight-title {
  font-family: 'Inter', var(--font-sans);
  color: #4C2C87;
}
/* Highlight body */
.info-card__highlight p {
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.8;
  margin: 0;
}
.info-card--rmp .info-card__highlight p {
  font-family: 'Inter', var(--font-sans);
  color: #374151;
}
.info-card--cart .info-card__highlight p {
  font-family: 'Noto Sans JP', var(--font-sans);
  color: #111827;
  font-size: 17px;
  font-weight: var(--fw-regular);
}
.info-card__highlight-note {
  font-size: 14px;
  margin: 0;
  font-weight: var(--fw-regular);
  line-height: 1.6;
}
.info-card--rmp .info-card__highlight-note { color: var(--c-gray-600); font-size: 13px; }
/* Cartagena note (317:1416): 12px Noto Sans JP Regular #6B7280 */
.info-card--cart .info-card__highlight-note {
  font-family: 'Noto Sans JP', var(--font-sans);
  color: #6B7280;
}
/* ＜指定要件＞ heading (282:1309): 15px Inter Bold #4C2C87 */
.spec-list-heading {
  font-family: 'Inter', var(--font-sans);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  margin: 0;
  letter-spacing: 0;
}
.info-card__body { display: flex; flex-direction: column; gap: 14px; }
.info-card__body p { margin: 0; line-height: 1.9; font-size: 16px; }
.info-card--rmp .info-card__body p { color: #374151; font-family: 'Inter', var(--font-sans); }
/* Cartagena body (317:1417/8/9/20): Noto Sans JP Regular #111827, 15px */
.info-card--cart .info-card__body p {
  font-family: 'Noto Sans JP', var(--font-sans);
  color: #111827;
  font-size: 17px;
}

/* Spec list (282:1310): 1028 wide, VERTICAL gap 10, each row HORIZONTAL gap 12 */
.spec-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.spec-item { display: flex; align-items: center; gap: 12px; }
/* 番号は装飾無し（プレーンテキスト表示） */
.spec-num {
  flex-shrink: 0;
  color: var(--c-neutral-100);
  font-family: 'Inter', var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
/* Spec text (282:1314): 14px Inter Medium #374151 */
.spec-text {
  font-family: 'Inter', var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--c-neutral-100);
  line-height: 1.6;
}
.info-card__body p:first-child { margin-top: 0; }
/* (Duplicated old spec-list rules removed — see Figma-aligned block above) */

/* Footer policy links（プライバシー/利用条件/お問い合わせ、外部リンクマーク付） */
.footer-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0 0 16px;
  padding: 16px 0 0;
  border-top: 1px solid #D1D5DB;
}
.footer-policy a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--c-gray-700);
  text-decoration: none;
  transition: color 160ms ease;
}
.footer-policy a:hover { color: var(--c-action); }
.footer-policy a i { font-size: 12px; opacity: 0.7; }

/* info-card 折りたたみ（モバイルのみ。デスクトップでは常時展開） */
.info-card__collapsible { display: contents; }
.info-card__chevron { display: none; }
@media (max-width: 767px) {
  [data-collapsible] .info-card__head {
    cursor: pointer;
    user-select: none;
  }
  [data-collapsible] .info-card__head:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 4px;
    border-radius: 6px;
  }
  .info-card__head .info-card__chevron {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(76, 44, 135, 0.08);
    color: var(--c-primary);
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 220ms ease;
  }
  [data-collapsible][data-collapsed="true"] .info-card__collapsible { display: none; }
  [data-collapsible]:not([data-collapsed="true"]) .info-card__chevron { transform: rotate(180deg); }
}

/* ============================================================
   Feature Card grid
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.feature-card {
  background: var(--c-white);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  box-shadow: var(--sh-md);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
@media (min-width: 768px) { .feature-card { padding: 24px 20px; gap: 16px; } }
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--c-primary-light); }
.feature-card__icon {
  width: 56px; height: 56px;
  background: var(--g-primary-soft);
  color: var(--c-white);
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 24px;
  box-shadow: var(--sh-sm);
}
@media (min-width: 768px) { .feature-card__icon { width: 64px; height: 64px; font-size: 26px; } }
.feature-card__title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-gray-800);
  line-height: 1.4;
}
@media (min-width: 768px) { .feature-card__title { font-size: 18px; } }
.feature-card__desc {
  font-size: 14px;
  color: var(--c-gray-600);
  line-height: 1.7;
}
@media (min-width: 768px) { .feature-card__desc { font-size: 15px; } }
.feature-card__arrow {
  margin-top: auto;
  align-self: flex-end;
  color: var(--c-primary);
  font-size: 16px;
}

/* ============================================================
   Product info gradient block
   ============================================================ */
.product-block {
  background: var(--g-brand);
  color: var(--text-inverse);
  border-radius: var(--r-2xl);
  padding: 32px 24px;
  display: grid;
  gap: 32px;
  box-shadow: var(--sh-2xl);
  position: relative;
  overflow: hidden;
}
.product-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 100%, rgba(143,217,190,0.18) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(245,173,168,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.product-block > * { position: relative; }
@media (min-width: 1024px) {
  .product-block { grid-template-columns: 1fr 1.1fr; gap: 64px; padding: 72px 64px; align-items: center; }
}
.product-block__title {
  font-size: 26px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  margin-bottom: 12px;
}
@media (min-width: 1024px) { .product-block__title { font-size: 34px; } }
.product-block__desc { font-size: 16px; line-height: 1.85; opacity: 0.92; }
@media (min-width: 768px) { .product-block__desc { font-size: 17px; } }

.product-links { display: grid; gap: 12px; }
.product-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 14px 18px;
  border-radius: var(--r-lg);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.product-link:hover { background: rgba(255,255,255,0.2); transform: translateX(2px); }

/* Icon circle (Figma Feature Card icon 64×64 縮小、各リンク色) */
.product-link__icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: #FFFFFF;
  font-size: 18px;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .product-link__icon { width: 44px; height: 44px; font-size: 19px; } }
/* Figma 4 色グラデーション (Feature Card 148:535 / 4:43 / 4:47 / 4:51) */
.product-link__icon--info     { background: linear-gradient(135deg, #ED7971 0%, #D14D45 100%); }   /* coral */
.product-link__icon--calendar { background: linear-gradient(135deg, #899DCB 0%, #4C2C87 100%); }   /* primary purple */
.product-link__icon--play     { background: linear-gradient(135deg, #51BA97 0%, #2E9670 100%); }   /* teal */
.product-link__icon--toolbox  { background: linear-gradient(135deg, #4C2C87 0%, #21003D 100%); }   /* dark purple */

.product-link__body { min-width: 0; }
.product-link__title { font-weight: var(--fw-bold); font-size: 17px; line-height: 1.3; }
.product-link__sub { font-size: 13px; opacity: 0.8; margin-top: 2px; line-height: 1.4; }
.product-link__arrow { font-size: 20px; font-weight: var(--fw-bold); line-height: 1; }

/* ============================================================
   Footer
   ============================================================ */
.chrome-footer {
  background: #F1F2F1;
  color: var(--c-gray-800);
  padding: 56px 0 24px;
  margin-top: 0;
}
@media (min-width: 1024px) { .chrome-footer { padding-top: 64px; } }

.chrome-footer__inner {
  display: grid;
  gap: 40px;
  align-items: start;
  padding-bottom: 16px;
}
@media (min-width: 768px) { .chrome-footer__inner { grid-template-columns: minmax(260px, 1fr) 2fr; gap: 64px; } }

.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand__row { display: flex; align-items: center; gap: 16px; }
.footer-brand__note {
  font-size: 14px;
  color: var(--c-gray-600);
  line-height: 1.7;
  margin: 0;
  max-width: 360px;
}
.footer-brand__logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--c-white);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 8px;
}
.footer-brand__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  margin: auto;
}
.footer-brand__title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
@media (min-width: 1024px) { .footer-brand__title { font-size: 24px; } }

/* Footer のサイトロゴ SVG（白SVGをfilterで黒化） */
.footer-brand-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
  filter: brightness(0);
}
@media (min-width: 1024px) { .footer-brand-logo { height: 32px; } }
.footer-brand__sub {
  font-size: 14px;
  opacity: 0.75;
  margin-top: 4px;
  line-height: 1.6;
}
@media (min-width: 1024px) { .footer-brand__sub { font-size: 15px; } }
.footer-brand-block { display: flex; flex-direction: column; gap: 0; }

.footer-cols { display: grid; gap: 28px; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; } }

.footer-col__head {
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--c-neutral-100);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #D1D5DB;
}
.footer-col__head--sub { margin-top: 28px; }
.footer-col__list { display: grid; gap: 12px; padding: 0; list-style: none; margin: 0; }
.footer-col__list a {
  font-size: 15px;
  color: var(--c-gray-800);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.footer-col__list a::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--c-secondary2);
  flex-shrink: 0;
}
.footer-col__list a:hover { color: var(--c-action); transform: translateX(2px); }

/* Footer bottom: FUJIFILMロゴ + コピーライト */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
}
.footer-fujifilm { display: inline-flex; align-items: center; transition: opacity var(--dur-fast); }
.footer-fujifilm:hover { opacity: 0.7; }
.footer-fujifilm img { display: block; height: 32px; width: auto; }
@media (min-width: 768px) { .footer-fujifilm img { height: 36px; } }
.copyright {
  font-size: 14px;
  color: var(--c-gray-600);
  text-align: right;
}

/* Mobile footer accordion (override default visible) */
@media (max-width: 767px) {
  .footer-col__head {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-color: #D1D5DB;
  }
  .footer-col__head::after {
    content: '\f078';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    transition: transform var(--dur-base);
    opacity: 0.7;
  }
  .footer-col.is-open .footer-col__head::after { transform: rotate(180deg); }
  .footer-col__list { display: none; }
  .footer-col.is-open .footer-col__list { display: grid; }
}

/* (old footer accordion block consolidated into the styled block above) */

/* ============================================================
   Page Header (non-Home pages)
   ============================================================ */
.page-header {
  background: linear-gradient(135deg, var(--c-neutral-100) 0%, var(--c-neutral-80) 100%);
  color: var(--text-inverse);
  padding: 24px 0;
  text-align: center;
}
@media (min-width: 768px) { .page-header { padding: 36px 0; } }
.page-header__title {
  font-size: 24px;
  font-weight: var(--fw-bold);
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
@media (min-width: 768px) { .page-header__title { font-size: 34px; margin-bottom: 6px; } }
.page-header__sub {
  font-size: 15px;
  opacity: 0.92;
}
@media (min-width: 768px) { .page-header__sub { font-size: 17px; } }

.breadcrumb {
  background: var(--c-white);
  padding-block: 14px;
}
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb a:hover { color: var(--c-action); }
.breadcrumb__current { color: var(--text-primary); font-weight: var(--fw-medium); }

/* ============================================================
   Material Card (PDF/ZIP)
   ============================================================ */
.material-card {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sh-md);
  transition: box-shadow var(--dur-fast);
}
.material-card:hover { box-shadow: var(--sh-xl); }
@media (min-width: 768px) { .material-card { padding: 24px; } }
.material-card__title { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.5; }
.material-card__date { font-size: 14px; color: var(--text-tertiary); }
.material-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto;
}

/* ============================================================
   Tool Card (Tools page)
   ============================================================ */
.tool-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.tool-card {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-md);
}
.tool-card__thumb {
  position: relative;
  width: 100%;
  padding-top: 68.75%; /* 16:11 ratio — Safari互換のため padding hack を使用 */
  background: var(--c-gray-100);
  color: var(--text-tertiary);
  font-size: 14px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-default);
}
.tool-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tool-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tool-card__title { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-primary); }
.tool-card__desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; flex: 1; }
.tool-card__foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* PDFチップ + ダウンロードボタン（製品基本情報と同じ意匠） */
.tool-card__filetype {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--c-neutral-10);
  color: var(--c-neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.tool-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-neutral-100);
  color: var(--c-white);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.tool-card__btn:hover { background: var(--c-action); transform: translateY(-1px); }

/* ============================================================
   External link card (関連Webサイト)
   ============================================================ */
.extlink-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.extlink-card {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sh-md);
}
@media (min-width: 768px) { .extlink-card { padding: 28px; } }
.extlink-card__thumb {
  aspect-ratio: 16 / 6;
  background: var(--c-gray-100);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--text-tertiary);
  font-size: 15px;
  overflow: hidden;
}
.extlink-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.extlink-card__title { font-size: 17px; font-weight: var(--fw-bold); }
.extlink-card__desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
.extlink-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-neutral-100);
  color: var(--c-white);
  font-size: 15px;
  font-weight: var(--fw-medium);
  padding: 10px 18px;
  border-radius: 0;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.extlink-card__link:hover { background: var(--c-action); transform: translateY(-1px); }
.extlink-card__link i { font-size: 14px; opacity: 0.9; }

/* ============================================================
   Event Card
   ============================================================ */
/* Event Card — Figma 110:475 / 119:544 spec
   1100×404 (or h=502 for Web), HORIZONTAL: thumb 300 (gray gradient) + content 800 (padding 28/32, gap 16),
   bg #FFFFFF, border 1px #E5E7EB, radius 16 */
.event-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0;
}
@media (min-width: 1024px) {
  .event-card { grid-template-columns: 300px 1fr; align-items: stretch; }
}

/* Thumb area (mobile デフォルト: 311×100 gray banner with compact A4 preview centered)
   Figma 276:1137 spec: padding 0、フレーム 311×100、内側 134×190 の A4 を上部クロップで表示 */
.event-card__thumb {
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.event-card__thumb-inner {
  background: #FFFFFF;
  border-radius: 4px;
  width: 134px;
  height: 78px;
  display: grid;
  place-items: center;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-align: center;
  line-height: 1.6;
  overflow: hidden;
}
.event-card__thumb-inner.has-image {
  padding: 0;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.event-card__thumb-inner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Desktop: 300 wide × full card height, A4 portrait full display */
@media (min-width: 1024px) {
  .event-card__thumb {
    padding: 24px;
    height: auto;
    border-radius: 0;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    gap: 14px;
  }
  .event-card__thumb-inner {
    aspect-ratio: 252 / 356;
    width: 100%;
    height: auto;
    font-size: 15px;
  }
  .event-card__thumb-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .event-card__thumb-inner.has-image {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
}

/* Flyer download action: PDFチップ + ダウンロードボタン（製品基本情報と同様） */
.event-card__flyer-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.event-card__flyer-chip {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--c-neutral-10);
  color: var(--c-neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.event-card__flyer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-neutral-100);
  color: var(--c-white);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.event-card__flyer-btn:hover { background: var(--c-action); transform: translateY(-1px); }
.event-card__flyer-btn i { font-size: 15px; }

/* Body: padding 28/32, gap 16 */
.event-card__body {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) { .event-card__body { padding: 28px 32px; gap: 16px; } }

/* Badge row: badge + calendar icon + date */
.event-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
/* Badge 76×27, radius 6, padding 6/14, text 12px Bold white */
.event-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: 0;
}
.event-card__badge--gakkai { background: linear-gradient(135deg, #ED7971 0%, #D14D45 100%); }
.event-card__badge--web    { background: linear-gradient(135deg, #51BA97 0%, #2E9670 100%); }

/* Date: calendar icon + 22px Inter Bold #4C2C87, calendar アクセントカラー強調 */
.event-card__date {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  color: var(--c-neutral-100);
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-neutral-20);
}
@media (min-width: 768px) { .event-card__date { font-size: 24px; } }
.event-card__date i {
  font-size: 24px;
  color: var(--c-secondary2-dark);
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 768px) { .event-card__date i { font-size: 28px; } }

/* Title: 20px Inter Bold #4C2C87 */
.event-card__title {
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 768px) { .event-card__title { font-size: 22px; } }

/* Highlight box: blue gradient, radius 10, padding 14/18.
   学会: theme 1 line. Web: program list */
/* Highlight box: bg blue gradient + 1px teal border 全周 + 4px teal 左アクセント */
.event-card__highlight {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-card__highlight-title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  line-height: 1.3;
  margin: 0;
}
.event-card__highlight-item {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* 録画配信のご案内 — 他のセクションと同じ装飾なしスタイル */
.event-card__recording {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-card__recording-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  line-height: 1.3;
  margin: 0;
}
.event-card__recording-title i { font-size: 15px; }
.event-card__recording-period {
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--c-neutral-100);
  font-feature-settings: 'tnum';
  line-height: 1.4;
  margin: 0;
}

/* Detail lines: 13px Regular */
.event-card__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-card__details p {
  font-size: 15px;
  color: #374151;
  line-height: 1.7;
  margin: 0;
}
.event-card__details p.is-muted { color: #6B7280; }
.event-card__details p strong {
  color: var(--c-neutral-100);
  font-weight: var(--fw-bold);
  font-size: 16px;
  display: inline-block;
  margin-bottom: 2px;
}

/* Highlight box の注釈（※プログラムの内容は…） */
.event-card__highlight-note {
  font-size: 13px;
  color: #6B7280;
  margin: 6px 0 0;
  line-height: 1.6;
}

/* Footer row: sponsor + CTA button */
.event-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 4px;
}
.event-card__sponsor {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin: 0;
}
/* CTA buttons: radius 8, padding 10/18, gap 8, text 13px Medium white */
.event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 0;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: #FFFFFF;
  text-decoration: none;
  background: var(--c-neutral-100);
  transition: background 160ms ease, transform var(--dur-fast);
}
.event-card__cta:hover { background: var(--c-action); transform: translateY(-1px); }
.event-card__cta--purple,
.event-card__cta--teal { background: var(--c-neutral-100); }
.event-card__cta--purple:hover,
.event-card__cta--teal:hover { background: var(--c-action); }

/* 学会予定なし — Empty state */
.event-empty {
  background: #FFFFFF;
  border: 1px dashed var(--c-gray-300);
  border-radius: 16px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 1100px;
  margin: 0;
}
.event-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--c-gray-100);
  color: var(--c-gray-400);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.event-empty__title {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--c-gray-700);
  margin: 0;
}
@media (min-width: 768px) { .event-empty__title { font-size: 19px; } }
.event-empty__sub {
  font-size: 15px;
  color: var(--c-gray-500);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   Video Card grid
   ============================================================ */
.video-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 1024px) { .video-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.video-card {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* カテゴリ切替アニメーション */
.video-card.is-hidden { display: none; }
.video-card.is-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
}
@keyframes video-card-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.video-card.is-entering {
  animation: video-card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .video-card { transition: none; }
  .video-card.is-entering { animation: none; }
}

/* タブ切り替えカラー遷移 */
.tab { transition: color 200ms ease, border-color 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.video-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-gray-700), var(--c-gray-900));
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-card__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card__thumb::after { content: none; }
.video-card__cat { z-index: 2; }
.video-card__step {
  position: absolute; top: 8px; left: 8px;
  background: var(--c-white);
  color: var(--c-primary);
  font-size: 13px;
  font-weight: var(--fw-bold);
  padding: 4px 10px;
  border-radius: var(--r-sm);
}
/* Video Detail (視聴ページ) */
.video-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--c-action);
  text-decoration: none;
  margin-bottom: 20px;
  transition: opacity 160ms ease;
}
.video-back:hover { opacity: 0.7; }
.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.video-player iframe,
.video-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  display: block;
}
.video-player video { object-fit: contain; }

/* チャプターナビ（投与方法ページ） */
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 20px 0 8px;
}
@media (min-width: 768px) {
  .chapter-nav { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
.chapter-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--c-neutral-20);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-neutral-100);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.chapter-btn:hover { background: var(--c-action-10); border-color: var(--c-action); transform: translateY(-1px); }
.chapter-btn.is-active {
  background: var(--c-neutral-100);
  border-color: var(--c-neutral-100);
  color: var(--c-white);
}
.chapter-btn__num {
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.chapter-btn__title {
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

/* video-player に隣接するコントロールバーがある場合は下角を直角に */
.video-player[data-player-wrap] {
  border-radius: 0;
}

/* 再生開始までは動画一覧と同じサムネイル画像を iframe/video の上に重ねて表示。再生開始後は player-shell に data-has-started が付くため非表示。
   背景は video と同じ黒。object-fit: contain で video と同じレターボックス挙動に揃える。 */
.video-player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.player-shell[data-has-started] .video-player__poster { display: none; }

/* iframe 内のコントロールを非表示にしているため、動画エリア全体を再生/一時停止のクリック領域として上に重ねる */
.video-player__click {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.video-player__click:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: -2px;
}

/* 動画中央に出る再生ヒント。イノベーティブグレー（#333333）の円ベース＋白い再生三角 */
.video-player__play-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--c-neutral-100);
  color: var(--c-white);
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: opacity 240ms ease, transform 240ms ease, background 160ms ease;
}
/* 三角形の視認性のため少しだけ右に寄せる（正三角形の重心補正） */
.video-player__play-hint i { transform: translateX(2px); }
.video-player__click[data-show-hint="true"] .video-player__play-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 全画面時の中央再生ボタン（大）。一時停止中のみ表示。サイズは画面の縦横の小さい方の 20%。 */
.video-player__fs-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.55);
  color: var(--c-white);
  border: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 8vmin;
  z-index: 3;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.video-player__fs-play i { transform: translateX(0.4vmin); }
.player-shell:fullscreen[data-fs-paused="true"] .video-player__fs-play,
.player-shell:-webkit-full-screen[data-fs-paused="true"] .video-player__fs-play {
  display: flex;
}
/* 全画面時は中央大ボタンを使うので、通常の小さい再生ヒントは非表示 */
.player-shell:fullscreen .video-player__play-hint,
.player-shell:-webkit-full-screen .video-player__play-hint {
  display: none;
}

/* iframe + コントロールバーをまとめたシェル。全画面化のターゲット。 */
.player-shell {
  display: flex;
  flex-direction: column;
  position: relative; /* モバイル全画面時に .player-controls を absolute で配置するための基準 */
}

/* 全画面表示時: 動画は画面全体、コントロールバーは動画上にオーバーレイ表示 */
.player-shell:fullscreen,
.player-shell:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #000;
}
.player-shell:fullscreen .video-player,
.player-shell:-webkit-full-screen .video-player {
  flex: 1 1 100%;
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
  min-height: 0;
  box-shadow: none;
}
.player-shell:fullscreen .player-controls,
.player-shell:-webkit-full-screen .player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  border-radius: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.player-shell[data-fs-controls="visible"]:fullscreen .player-controls,
.player-shell[data-fs-controls="visible"]:-webkit-full-screen .player-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 前/次チャプターアイコンはコントロールバー内に常時表示（通常時も全画面時も 1 行） */
.player-controls__chapter-only:disabled { opacity: 0.4; cursor: not-allowed; }

/* 親側プレイヤーコントロールバー */
.player-controls {
  display: grid;
  /* prev / playpause / next / progress / volume+mute / rate / fs */
  grid-template-columns: auto auto auto 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--c-neutral-100);
  color: var(--c-white);
  border-radius: 0;
  margin-top: 0;
}

/* 単一動画用プレイヤー（チャプターボタン無し）: 5 カラムグリッド
   .player-controls 基底の後ろに置いてカスケードで勝たせる。レスポンシブ上書きは後述の @media にて。 */
.player-controls--single { grid-template-columns: auto 1fr auto auto auto; }
.player-controls__btn {
  background: transparent;
  border: 0;
  color: var(--c-white);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 4px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}
.player-controls__btn:hover { background: rgba(255,255,255,0.15); }
.player-controls__btn[aria-pressed="true"] { color: var(--c-action-60); }
.player-controls__playpause i { font-size: 20px; min-width: 18px; }
.player-controls__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-feature-settings: 'tnum';
  min-width: 0;
}
.player-controls__time { white-space: nowrap; opacity: 0.95; }
.player-controls__bar {
  flex: 1;
  padding: 10px 0;
  cursor: pointer;
  min-width: 0;
}
.player-controls__bar-track {
  position: relative;
  height: 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
.player-controls__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--c-action);
  border-radius: 3px;
  transition: width 80ms linear;
}
.player-controls__group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.player-controls__volume {
  width: 70px;
  accent-color: var(--c-action);
}
.player-controls__rate-wrap { display: inline-flex; }
.player-controls__rate {
  background: transparent;
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.player-controls__rate option { color: var(--c-neutral-100); }
@media (max-width: 700px) {
  /* 7 アイテム (prev / play / next / progress / mute group / rate / fs) を 1 行に詰める */
  .player-controls { grid-template-columns: auto auto auto 1fr auto auto auto; gap: 6px; padding: 10px 10px; }
  .player-controls__volume { display: none; }
  .player-controls__btn { padding: 6px 8px; }
  /* モバイル時はスペース確保のため現在時間 / 総時間の数値表示を非表示にする */
  .player-controls__time { display: none; }
}
@media (max-width: 480px) {
  /* rate を隠した 6 アイテム → 6 カラム */
  .player-controls { grid-template-columns: auto auto auto 1fr auto auto; gap: 4px; padding: 8px 8px; }
  .player-controls__rate-wrap { display: none; }
  .player-controls__btn { padding: 6px 6px; }
}

/* 単一動画用プレイヤーのレスポンシブ上書き（base .player-controls の @media より後ろに置いて優先させる） */
@media (max-width: 700px) {
  .player-controls--single { grid-template-columns: auto 1fr auto auto auto; }
}
@media (max-width: 480px) {
  .player-controls--single { grid-template-columns: auto 1fr auto auto; }
}

.video-detail__title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  margin: 24px 0 12px;
  line-height: 1.4;
}
@media (min-width: 768px) { .video-detail__title { font-size: 28px; margin-top: 32px; } }
.video-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.video-detail__cat {
  background: var(--c-action);
  color: var(--c-white);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.video-detail__duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--c-gray-600);
}
.video-detail__desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-gray-700);
  margin: 0;
}

.video-card__cat {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.85);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: var(--fw-bold);
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.video-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.video-card__meta { font-size: 13px; color: var(--c-gray-500); font-weight: var(--fw-medium); }
.video-card__title { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; color: var(--c-gray-800); }
@media (min-width: 768px) { .video-card__title { font-size: 16px; } }
.video-card__desc { font-size: 14px; color: var(--c-gray-600); line-height: 1.7; }
.video-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  background: var(--c-neutral-100);
  color: var(--c-white);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.video-card__btn:hover { background: var(--c-action); transform: translateY(-1px); }
.video-card__btn i { font-size: 17px; }

/* ============================================================
   Tabs (Videos page)
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
}
.tab {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
@media (min-width: 768px) { .tab { padding: 12px 20px; font-size: 16px; } }
.tab.is-active {
  color: var(--c-primary);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--c-primary);
}

/* ============================================================
   Notes list
   ============================================================ */
.notes-card {
  background: var(--c-amber-50);
  border-left: 4px solid #F59E0B;
  padding: 20px;
  border-radius: var(--r-md);
}
@media (min-width: 768px) { .notes-card { padding: 28px; } }
.notes-card__title { font-weight: var(--fw-bold); color: #92670F; margin-bottom: 12px; font-size: 17px; }
.notes-list { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.notes-list li { font-size: 15px; color: var(--text-secondary); padding-left: 16px; position: relative; line-height: 1.7; }
.notes-list li::before {
  content: '\30FB';
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  position: absolute;
  left: 0;
  color: var(--c-primary);
}

/* ============================================================
   Product info — image gallery (ProductInfo page)
   ============================================================ */
.product-gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-main {
  aspect-ratio: 4 / 3;
  background: var(--c-gray-100) center/contain no-repeat;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumb {
  width: 56px; height: 72px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-default);
  background: var(--c-gray-100);
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.gallery-thumb.is-active { border: 2px solid var(--c-primary); }
.gallery-thumb:hover { border-color: var(--c-primary-light); }

/* ============================================================
   Two-column layout helper
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* ============================================================
   Utility
   ============================================================ */
.reg-sup { font-size: 0.6em; vertical-align: super; line-height: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 16px; }
.mt-xl { margin-top: 24px; }
.mt-2xl { margin-top: 32px; }

/* ============================================================
   Product Info ページ（Figma 12:2 / 243:640 準拠）
   ============================================================ */

/* 汎用セクション見出し（events 同等仕様: 28px Bold #4C2C87 + 120×4 fade underline） */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
}
.section-head__title {
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .section-head { margin-bottom: 32px; }
  .section-head__title { font-size: 30px; }
}
.section-head__underline { display: none; }

.pi-main { padding-block: 32px; background: var(--c-white); }
@media (min-width: 768px) { .pi-main { padding-block: 64px; } }
.pi-section + .pi-section { margin-top: 40px; }
@media (min-width: 768px) { .pi-section + .pi-section { margin-top: 60px; } }

/* 製品基本情報オーバービュー (左=ギャラリー / 右=資料カード列) */
.pi-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .pi-overview { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
}

/* ギャラリー */
.pi-gallery {
  background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
  border: 1px solid var(--c-gray-200);
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media (min-width: 768px) { .pi-gallery { padding: 36px; } }
.pi-gallery__main {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
  border-radius: 0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pi-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pi-gallery__thumbs {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.pi-gallery__thumb {
  width: 56px;
  height: 72px;
  border-radius: 4px;
  background: var(--c-gray-100);
  border: 1px solid var(--c-gray-300);
  color: var(--c-gray-500);
  font-size: 12px;
  font-weight: var(--fw-medium);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  font-family: inherit;
  transition: border-color 160ms ease;
}
.pi-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pi-gallery__thumb.is-active {
  border: 2px solid var(--c-primary);
  background: var(--c-white);
}
.pi-gallery__caption {
  font-size: 14px;
  color: var(--c-gray-700);
  margin: 0;
  text-align: center;
}

/* 資料カードリスト（右カラム） */
.pi-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 共通 PI カード（teal border） */
.pi-card {
  background: var(--c-white);
  border: 1px solid var(--c-secondary2);
  border-radius: 12px;
  padding: 20px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "body body"
    "chip btn";
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
}
@media (min-width: 768px) {
  .pi-card {
    padding: 20px 24px;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "body chip btn";
    column-gap: 16px;
  }
}
.pi-card__body { grid-area: body; }
.pi-card__filetype { grid-area: chip; }
.pi-card__btn { grid-area: btn; }
.pi-card__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pi-card__title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-gray-800);
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 768px) { .pi-card__title { font-size: 18px; } }
.pi-card__date {
  font-size: 14px;
  color: var(--c-gray-500);
  margin: 0;
}
.pi-card__filetype {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  flex-shrink: 0;
  align-self: center;
  justify-self: start;
}
.pi-card__filetype--pdf {
  background: var(--c-neutral-10);
  color: var(--c-neutral-100);
  font-size: 28px;
}
.pi-card__filetype--zip {
  background: var(--c-neutral-10);
  color: var(--c-neutral-100);
}
.pi-card__filetype-svg { width: 28px; height: 28px; display: block; }
.pi-card__filetype--zip svg text { fill: var(--c-neutral-10); }
.pi-card__btn {
  background: var(--c-neutral-100);
  color: var(--c-white);
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  text-decoration: none;
  width: 100%;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}
@media (min-width: 768px) { .pi-card__btn { width: auto; min-width: 160px; } }
.pi-card__btn:hover { background: var(--c-action); transform: translateY(-1px); }

/* 適正使用情報ブロック */
.pi-usage-block { display: flex; flex-direction: column; gap: 16px; }
.pi-usage-block + .pi-usage-block { margin-top: 24px; }
@media (min-width: 768px) {
  .pi-usage-block { gap: 20px; }
  .pi-usage-block + .pi-usage-block { margin-top: 32px; }
}
.pi-usage-badge {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) { .pi-usage-badge { padding: 12px 24px; font-size: 18px; } }
.pi-usage-badge--medical { background: linear-gradient(90deg, #51BA97 0%, #8FD9BE 100%); }
.pi-usage-badge--patient { background: linear-gradient(90deg, #ED7971 0%, #F5ADA8 100%); }

/* 半分幅グリッド（カードは左半分のみ） */
.pi-half-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .pi-half-grid { grid-template-columns: 1fr 1fr; }
}

/* お知らせリスト */
.pi-notice-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
}

/* モバイルでは Hero quote 内の改行を解除 */
@media (max-width: 767px) { .hero__br-md { display: none; } }

/* Back to top button */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--c-neutral-100);
  color: var(--c-white);
  border: none;
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 900;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--c-action); }
@media (min-width: 768px) {
  .back-to-top { right: 24px; bottom: 24px; width: 52px; height: 52px; font-size: 22px; }
}

/* ============================================================
   医療関係者確認ゲート（初回訪問時のみ表示）
   ============================================================ */
.medpro-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 20, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  animation: medpro-fade-in 0.3s ease-out both;
}
/* sessionStorage に確認済みフラグがあれば head の inline script で
   <html class="medpro-verified"> を付与し、ゲート自体を非表示にする */
.medpro-verified .medpro-gate { display: none; }
/* ゲート表示中は背面スクロール禁止 */
.medpro-gate-open { overflow: hidden; }

@keyframes medpro-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes medpro-card-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.medpro-gate__card {
  background: var(--c-white);
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  padding: 32px 24px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.45);
  animation: medpro-card-up 0.4s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (min-width: 768px) {
  .medpro-gate__card { padding: 40px 48px; }
}

.medpro-gate__title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-100);
  line-height: 1.6;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}
@media (min-width: 768px) { .medpro-gate__title { font-size: 19px; margin-bottom: 24px; } }

.medpro-gate__body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-gray-700);
  margin: 0 0 12px;
}
@media (min-width: 768px) { .medpro-gate__body { font-size: 16px; } }
.medpro-gate__body strong {
  display: block;
  color: var(--c-gray-800);
  font-weight: var(--fw-bold);
  font-size: 17px;
  margin-bottom: 4px;
}

.medpro-gate__question {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--c-gray-800);
  text-align: center;
  margin: 24px 0 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-default);
}
@media (min-width: 768px) { .medpro-gate__question { font-size: 20px; margin-top: 28px; } }

.medpro-gate__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.medpro-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: var(--fw-bold);
  border-radius: var(--r-md);
  cursor: pointer;
  border: 0;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  text-decoration: none;
}
.medpro-gate__btn--yes {
  background: var(--c-neutral-100);
  color: var(--c-white);
  box-shadow: 0 8px 16px rgba(51, 51, 51, 0.30);
}
.medpro-gate__btn--yes:hover {
  background: var(--c-action);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(1, 145, 109, 0.40);
}
.medpro-gate__btn--no {
  background: var(--c-white);
  color: var(--c-gray-700);
  border: 1px solid var(--border-strong);
}
.medpro-gate__btn--no:hover {
  background: var(--c-gray-50);
  color: var(--c-gray-800);
}

/* 「いいえ」を選んだ後のお詫び画面 */
.medpro-gate__apology { text-align: center; }
.medpro-gate__apology-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: var(--c-gray-100);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--c-gray-500);
  font-size: 28px;
}
.medpro-gate__apology h2 {
  font-size: 20px;
  color: var(--c-gray-800);
  margin: 0 0 12px;
  line-height: 1.5;
}
.medpro-gate__apology p {
  font-size: 16px;
  color: var(--c-gray-600);
  line-height: 1.85;
  margin: 0 0 16px;
}
.medpro-gate__apology .medpro-gate__btn {
  display: inline-flex;
  padding: 12px 28px;
  background: var(--c-white);
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
}
.medpro-gate__apology .medpro-gate__btn:hover {
  background: var(--c-purple-50);
}

@media (prefers-reduced-motion: reduce) {
  .medpro-gate,
  .medpro-gate__card { animation: none; }
}

/* ============================================================
   公開準備中: 未公開ページへのリンク無効化
   ============================================================ */
/* (a) テキストリンク → 取消線・無効化 */
.is-disabled-text {
  text-decoration: line-through !important;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.55;
}
.is-disabled-text:hover { color: inherit !important; background: inherit !important; transform: none !important; }

/* (b) ボタンリンク → ブラックアウト */
.is-disabled-btn {
  background: #1F2937 !important;
  background-image: none !important;
  color: #9CA3AF !important;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none !important;
  border-color: #374151 !important;
  filter: grayscale(0.4);
  text-decoration: line-through;
}
.is-disabled-btn * { color: inherit !important; }
.is-disabled-btn:hover { transform: none !important; }
/* product-link / sub も内側を上書き */
.is-disabled-btn .product-link__title,
.is-disabled-btn .product-link__sub,
.is-disabled-btn .product-link__arrow,
.is-disabled-btn .product-link__icon { color: #9CA3AF !important; }
.is-disabled-btn .product-link__icon { background: #374151 !important; background-image: none !important; }

/* (c) バナーリンク → ブラックアウト + Coming soon オーバーレイ */
.is-disabled-banner {
  position: relative;
  pointer-events: none;
  overflow: hidden;
}
.is-disabled-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  border-radius: inherit;
  z-index: 5;
}
.is-disabled-banner::after {
  content: "Coming soon";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  font-family: 'Inter', var(--font-sans);
  font-size: 26px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  z-index: 6;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  white-space: nowrap;
  text-transform: none;
}
@media (min-width: 768px) { .is-disabled-banner::after { font-size: 30px; letter-spacing: 0.15em; } }

/* ============================================================
   追加: ボタン角丸の一括解除（ユーザー要望）
   ============================================================ */
.btn,
.btn--sm,
.pi-card__btn,
.video-card__btn,
.tool-card__btn,
.event-card__flyer-btn,
.events-card__btn,
.news-action__btn,
.chapter-btn,
.player-controls__btn,
.medpro-gate__btn,
.hamburger,
.back-to-top,
.mobile-drawer__close,
.tab {
  border-radius: 0;
}

/* ============================================================
   追加: ヘッダー + グロナビ + ナビ下ラインのスクロール時固定
   ============================================================ */
.page-chrome {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--c-white);
}

/* ============================================================
   追加: カードの角丸一括解除
   ============================================================ */
.info-card,
.feature-card,
.material-card,
.tool-card,
.extlink-card,
.event-card,
.event-empty,
.video-card,
.notes-card,
.pi-card,
.news-row,
.video-banner,
.product-link {
  border-radius: 0;
}

/* ============================================================
   追加: フッターの製品クラスター画像
   ============================================================ */
.footer-brand__cluster-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

/* 右側コーポレートロゴはホバーでも何も起きないことを明示 */
.header-corp-right { cursor: default; }