/* ==============================
   サブページ共通CSS
   全サブページで共有するコンポーネント
   （FV・パンくず・FVアニメーション）
   ============================== */

/* ==============================
   ページFVバナー
   ============================== */
.page-fv {
  margin-top: 105px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    linear-gradient(135deg, rgba(45, 184, 122, 0.82) 0%, rgba(37, 160, 108, 0.82) 100%),
    var(--fv-bg, none) center/cover no-repeat;
  padding: 48px 0;
  text-align: center;
}

.page-fv__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
}

.page-fv__en {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.2;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.page-fv__heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  color: #fff;
  line-height: var(--line-height-heading);
  margin-bottom: 0;
}

.page-fv__heading::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: #fff;
  margin: 16px auto 0;
}

/* ==============================
   パンくずリスト
   ============================== */
.breadcrumb {
  background: var(--color-bg);
  padding: 10px 0;
  border-bottom: none;
}

.breadcrumb__list {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  font-size: 11px;
  color: #bbb;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '>';
  margin: 0 8px;
  color: #ccc;
}

.breadcrumb__item a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb__item a:hover {
  color: var(--color-primary);
}

.breadcrumb__item[aria-current="page"] {
  color: #999;
  font-weight: 400;
}

/* ==============================
   セクション見出し（全サブページ共通）
   ============================== */
.section-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-text);
  line-height: var(--line-height-heading);
  text-align: center;
  margin-bottom: 40px;
}

.section-heading::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-primary);
  margin: 12px auto 0;
}

/* ==============================
   FVアニメーション（keyframes）
   ============================== */
.page-fv__en {
  opacity: 0;
  animation: pageFvFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.page-fv__heading {
  opacity: 0;
  animation: pageFvFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.page-fv__heading::after {
  transform: scaleX(0);
  transform-origin: center;
  animation: underline-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

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

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

@keyframes underline-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ==============================
   FV・パンくず prefers-reduced-motion
   ============================== */
@media (prefers-reduced-motion: reduce) {
  .page-fv__en,
  .page-fv__heading {
    animation: none;
    opacity: 1;
  }

  .page-fv__heading::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* ==============================
   Responsive - Tablet (max-width: 1024px)
   ============================== */
@media (max-width: 1024px) {
  .page-fv {
    padding: 40px 0;
  }

  .page-fv__heading {
    font-size: 24px;
  }
}

/* ==============================
   Responsive - SP (max-width: 768px)
   ============================== */
@media (max-width: 768px) {
  .section-heading {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .page-fv {
    margin-top: 54px;
    padding: 32px 0;
  }

  .page-fv__en {
    font-size: 13px;
    animation-delay: 0.1s;
  }

  .page-fv__heading {
    font-size: 24px;
    animation-delay: 0.25s;
  }

  .page-fv__heading::after {
    width: 32px;
    height: 2px;
    margin-top: 12px;
    animation-delay: 0.5s;
  }

  .breadcrumb {
    padding: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb__list {
    font-size: 10px;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
}