/* ===========================
   Seiei Business Partners Co., Ltd.
   STUDIO 実装指示書 準拠
   =========================== */

/* ---------- Variables ---------- */
:root {
  --c-navy: #1B2A4A;
  --c-teal: #006D77;
  --c-gold: #C9A84C;
  --c-gold-dark: #B8960C;
  --c-light-gray: #F5F4F0;
  --c-text: #333333;
  --c-text-sub: #666666;
  --c-required: #C0392B;
  --c-border: #E0DED8;
  --c-step-arrow: #2E7D5B;

  --max-width: 1080px;
  --pad-x: 40px;
  --pad-x-sp: 20px;
  --section-y: 80px;
  --section-y-sp: 48px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --radius-card: 8px;
  --radius-btn: 4px;

  --font-base: 'Noto Sans JP', '游ゴシック', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro', sans-serif;
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
}

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

ul, ol {
  list-style: none;
}

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

img {
  max-width: 100%;
  display: block;
}

/* ---------- Container ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--pad-x-sp);
  }
}

/* ---------- Common Section Title ---------- */
.section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-navy);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.02em;
}

.section-title-light {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .section-title { font-size: 22px; margin-bottom: 32px; }
  .section-title-light { font-size: 18px; margin-bottom: 24px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
  text-align: center;
  letter-spacing: 0.02em;
}

.btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--c-gold);
  color: var(--c-navy);
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.btn-outline-navy {
  background: transparent;
  color: var(--c-navy);
  border: 1px solid var(--c-navy);
}

.btn-navy {
  background: var(--c-navy);
  color: #fff;
}

.btn-teal {
  background: var(--c-teal);
  color: #fff;
}

/* ---------- Fade-in animation ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   NAV / Header
   =========================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: var(--c-navy);
  z-index: 100;
  transition: background 0.3s, box-shadow 0.3s;
}

.site-header.is-scrolled {
  background: rgba(27, 42, 74, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.header-inner {
  max-width: 100%;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  color: #fff;
  flex-shrink: 0;
}

.logo-ja {
  font-size: 16px;
  font-weight: 700;
}

.logo-en {
  font-size: 12px;
  opacity: 0.85;
}

.global-nav ul {
  display: flex;
  gap: 24px;
}

.global-nav a {
  color: #fff;
  font-size: 14px;
  transition: color 0.2s;
}

.global-nav a:hover {
  color: var(--c-gold);
}

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

.catch {
  color: var(--c-gold);
  font-size: 13px;
  font-weight: 500;
}

.btn-cta-header {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: var(--c-gold);
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  transition: opacity 0.2s;
}

.btn-cta-header:hover {
  opacity: 0.88;
}

.hamburger {
  display: none;
  width: 28px;
  height: 22px;
  position: relative;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }

.hamburger.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  height: calc(100vh - 64px);
  background: var(--c-navy);
  padding: 40px 24px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.mobile-menu a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.btn-cta-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--c-gold);
  color: var(--c-navy);
  font-weight: 700;
  border-radius: var(--radius-btn);
}

@media (max-width: 1024px) {
  .global-nav,
  .header-meta { display: none; }
  .hamburger { display: block; }
}

/* ===========================
   S01 HERO
   =========================== */
.s01-hero {
  position: relative;
  width: 100%;
  min-height: max(100vh, 560px); /* R-FV-03 (cycle-02): 高さ固定をやめコンテンツ過多時の見切れを防ぐ */
  background:
    linear-gradient(to right,
      rgba(27, 42, 74, 1) 0%,
      rgba(27, 42, 74, 1) 40%,
      rgba(27, 42, 74, 0) 80%,
      rgba(27, 42, 74, 0) 100%
    ),
    url("../images/hero-global-network.jpg"),
    linear-gradient(135deg, #1B2A4A 0%, #2A3E6B 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: 64px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(0, 109, 119, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px var(--pad-x) 40px;
  min-height: calc(100vh - 64px); /* R-FV-03 (cycle-02): height→min-height。コンテンツが多い場合は伸びる */
  display: flex;
  align-items: center;
}

.hero-text {
  color: #fff;
  max-width: 65%;
}

.hero-headline {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.hero-subcopy {
  font-size: 16px;
  line-height: 2.125;
  margin-bottom: 16px;
}

.hero-target {
  font-size: 16px;
  opacity: 0.95;
  margin-bottom: 32px;
}

.hero-badges {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.badge-item {
  flex: 1 1 0;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  padding: 16px 20px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.badge-metric {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.95;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.badge-num {
  color: var(--c-gold);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
}

.badge-num em {
  font-style: normal;
  font-size: 30px;
}

.badge-num small {
  font-size: 18px;
  font-weight: 500;
}

.badge-label {
  color: #fff;
  font-size: 13px;
  opacity: 0.9;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1024px) {
  .s01-hero {
    background:
      linear-gradient(135deg, rgba(27, 42, 74, 0.85) 0%, rgba(27, 42, 74, 0.70) 100%),
      url("../images/hero-global-network.jpg"),
      linear-gradient(135deg, #1B2A4A 0%, #2A3E6B 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero-text {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .s01-hero {
    min-height: max(80vh, 520px); /* R-FV-03 (cycle-02) */
    background-position: center top;
  }
  .hero-inner { padding: 40px var(--pad-x-sp) 24px; min-height: calc(80vh - 64px); /* R-FV-03 (cycle-02) */ }
  .hero-headline { font-size: 24px; }
  .hero-subcopy { font-size: 16px; line-height: 1.9; }
  .hero-badges { gap: 8px; }
  .badge-item { min-width: 100px; padding: 12px; }
  .badge-num { font-size: 22px; }
  .badge-num em { font-size: 24px; }
  .badge-num small { font-size: 14px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
}

/* ===========================
   S02 STATS
   =========================== */
.s02-stats {
  background: var(--c-light-gray);
  padding: var(--section-y) 0;
}

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

.stat-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 24px;
  border-top: 3px solid var(--c-gold);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-metric {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.stat-num {
  color: var(--c-gold);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-num small {
  font-size: 18px;
  font-weight: 500;
}

.stat-label {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-desc {
  color: var(--c-text-sub);
  font-size: 14px;
  line-height: 1.7;
}

.stats-note {
  text-align: center;
  color: var(--c-text-sub);
  font-size: 16px;
}

@media (max-width: 768px) {
  .s02-stats { padding: var(--section-y-sp) 0; }
  .stat-cards { grid-template-columns: 1fr; gap: 16px; }
  .stat-metric { font-size: 14px; }
  .stat-num { font-size: 28px; }
}

/* ===========================
   S03 CHALLENGES
   =========================== */
.s03-challenges {
  background: var(--c-navy);
  padding: var(--section-y) 0;
}

.challenge-list {
  max-width: 65%;
  margin: 0 0 32px;
  color: #fff;
}

/* legacy .challenge-list li / li::before rules removed in cycle-04:
   S03 switched from <ul><li>bullets</li></ul> pattern to .challenge-card grid
   in cycle-01. The old font-size/line-height/padding-left/::before rules
   would override .challenge-card visuals via specificity. */

.closing-line {
  color: var(--c-gold);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  max-width: 65%;
}

@media (max-width: 768px) {
  .s03-challenges { padding: var(--section-y-sp) 0; }
  .challenge-list, .closing-line { max-width: 100%; }
  .closing-line { font-size: 16px; }
}

/* ===========================
   S04 WHY CHOSEN
   =========================== */
.s04-why {
  background: #fff;
  padding: var(--section-y) 0;
}

.s04-why .section-title {
  margin-bottom: 56px;
}

.why-blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 56px;
}

.why-block {
  padding-left: 20px;
  border-left: 4px solid var(--c-gold);
}

.why-heading {
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.why-body {
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .s04-why { padding: var(--section-y-sp) 0; }
  .why-body { font-size: 16px; }
}

/* ===========================
   S05 TARGETS / TABS
   =========================== */
.s05-targets {
  background: var(--c-light-gray);
  padding: var(--section-y) 0;
}

.tabs {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.tab-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--c-border);
}

.tab-btn {
  padding: 18px 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-sub);
  background: #FAFAF8;
  transition: background 0.2s, color 0.2s;
  border-right: 1px solid var(--c-border);
}

.tab-btn:last-child {
  border-right: none;
}

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

.tab-btn.is-active {
  background: var(--c-navy);
  color: #fff;
}

.tab-panels {
  padding: 40px;
}

.tab-panel {
  display: none;
  animation: tabFadeIn 0.4s ease;
}

.tab-panel.is-active {
  display: block;
}

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

.tab-target {
  color: var(--c-text-sub);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 24px;
}

.tab-section-label {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0 8px;
  padding-left: 12px;
  border-left: 3px solid var(--c-gold);
}

.tab-list {
  margin-bottom: 8px;
}

.tab-list li {
  font-size: 16px;
  line-height: 1.9;
  padding-left: 1.2em;
  position: relative;
}

.tab-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--c-teal);
}

.tab-value {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .s05-targets { padding: var(--section-y-sp) 0; }
  .tab-buttons {
    grid-template-columns: 1fr;
  }
  .tab-btn {
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    padding: 14px 16px;
    position: relative;
  }
  .tab-btn::after {
    content: '＋';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
  .tab-btn.is-active::after { content: '−'; }
  .tab-panels { padding: 24px 16px; }
}

/* ===========================
   S06 SERVICES
   =========================== */
.s06-services {
  background: #fff;
  padding: var(--section-y) 0;
}

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

.service-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  border-top: 3px solid var(--c-gold);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-num {
  color: var(--c-gold);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.service-name {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.service-desc {
  color: var(--c-text-sub);
  font-size: 16px;
  line-height: 1.7;
  flex-grow: 1;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.service-tags span {
  border: 1px solid var(--c-teal);
  color: var(--c-teal);
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 3px;
}

.service-note {
  font-size: 13px;
  font-style: italic;
  color: var(--c-text-sub);
  margin-top: 8px;
}

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

@media (max-width: 768px) {
  .s06-services { padding: var(--section-y-sp) 0; }
  .service-grid { grid-template-columns: 1fr; }
}

/* ===========================
   S08 PROCESS
   =========================== */
.s08-process {
  background: var(--c-light-gray);
  padding: var(--section-y) 0;
}

.process-steps {
  position: relative;
}

.process-step {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 16px;
  text-align: center;
  position: relative;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--c-gold);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 16px;
}

.step-title {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.step-desc {
  color: var(--c-text-sub);
  font-size: 16px;
  line-height: 1.7;
}

/* ステップ間を繋ぐ緑の矢印（1 ＞ 2 ＞ 3 ＞ 4 ＞ 5）。装飾要素のため AT には読まれない。 */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid var(--c-step-arrow);
  z-index: 1;
}

@media (max-width: 1024px) {
  /* 2 カラムでは横向き矢印が流れと合わないため非表示。 */
  .process-step:not(:last-child)::after { display: none; }
}

@media (max-width: 768px) {
  .s08-process { padding: var(--section-y-sp) 0; }
  /* SP は Splide カード横スクロール (もしくは CSS フォールバックでの横スクロール) になるため、
     PC の流れ矢印は非表示。.process-steps.splide.is-active 側 (line 2658) と意味的に重複しているが、
     Splide マウント前の一瞬や CDN 失敗時にも矢印を出さないようここで打ち消す。 */
  .process-step:not(:last-child)::after { display: none; }
}

/* ===========================
   S09 PRICING
   =========================== */
.s09-pricing {
  background: #fff;
  padding: var(--section-y) 0;
}

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

.pricing-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 24px;
  text-align: center;
}

.pricing-card-highlight {
  border: 2px solid var(--c-gold);
  position: relative;
}

.pricing-title {
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.pricing-price {
  color: var(--c-gold);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

.pricing-price-free {
  font-size: 24px;
}

.pricing-desc {
  color: var(--c-text-sub);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}

.pricing-note {
  text-align: center;
  color: var(--c-text-sub);
  font-size: 13px;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .s09-pricing { padding: var(--section-y-sp) 0; }
  .pricing-cards { grid-template-columns: 1fr; }
}

/* ===========================
   S10 PROFILE
   =========================== */
.s10-profile {
  background: var(--c-light-gray);
  padding: var(--section-y) 0;
}

.profile-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

.profile-photo-col {
  text-align: center;
}

.profile-photo {
  width: 240px;
  height: 240px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #E8E6DF;
}

.profile-photo-img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.profile-name {
  color: var(--c-navy);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.profile-name-en {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.8;
}

.profile-role {
  color: var(--c-text-sub);
  font-size: 16px;
}

.profile-heading {
  color: var(--c-navy);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-gold);
}

.profile-message {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.profile-message p {
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.8;
}

.profile-message .profile-lead {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}

.profile-quals {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.profile-quals h3 {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}

.profile-quals ul li {
  font-size: 16px;
  line-height: 1.8;
  padding: 6px 0;
  border-bottom: 1px dotted var(--c-border);
}

.profile-quals ul li:last-child {
  border-bottom: none;
}

.profile-quals ul li {
  padding-left: 1.5em;
  position: relative;
  font-size: 14px;
}

.profile-quals ul li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: var(--c-teal);
  font-size: 11px;
  top: 10px;
}

@media (max-width: 768px) {
  .s10-profile { padding: var(--section-y-sp) 0; }
  .profile-grid { grid-template-columns: 1fr; gap: 24px; }
  .profile-photo { width: 180px; height: 180px; }
}

/* ===========================
   S11 THEMES
   =========================== */
.s11-themes {
  background: var(--c-navy);
  padding: var(--section-y) 0;
}

.theme-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 32px;
  color: #fff;
}

.theme-list li {
  font-size: 16px;
  line-height: 2.0;
  padding-left: 1.5em;
  position: relative;
}

.theme-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--c-gold);
  font-weight: 700;
}

@media (max-width: 768px) {
  .s11-themes { padding: var(--section-y-sp) 0; }
  .theme-list { grid-template-columns: 1fr; }
  .theme-list li { font-size: 16px; }
}

/* ===========================
   S12 CTA
   =========================== */
.s12-cta {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
  padding: var(--section-y) 0;
  text-align: center;
}

.cta-heading {
  color: var(--c-navy);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

.cta-body {
  color: var(--c-navy);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
}

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

@media (max-width: 768px) {
  .s12-cta { padding: var(--section-y-sp) 0; }
  .cta-heading { font-size: 22px; }
  .cta-body { font-size: 16px; }
  .cta-buttons { flex-direction: column; }
  .cta-buttons .btn { width: 100%; }
}

/* ===========================
   S13 FORM
   =========================== */
.s13-form {
  background: var(--c-light-gray);
  padding: var(--section-y) 0;
}

.contact-form {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

.form-row {
  margin-bottom: 24px;
}

.form-row label {
  display: block;
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.required {
  display: inline-block;
  background: var(--c-required);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  color: var(--c-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0, 109, 119, 0.1);
}

.contact-form textarea {
  resize: vertical;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-item {
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-item input[type="radio"],
.radio-item input[type="checkbox"],
.radio-group input[type="radio"],
.radio-group input[type="checkbox"] {
  accent-color: var(--c-teal);
  width: 16px;
  height: 16px;
}

.contact-form .form-submit {
  width: 100%;
  height: 56px;
  background: var(--c-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  transition: opacity 0.2s, transform 0.2s;
  margin-top: 8px;
}

.contact-form .form-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.form-note {
  text-align: center;
  color: var(--c-text-sub);
  font-size: 13px;
  margin-top: 16px;
}

.form-lead {
  text-align: center;
  color: var(--c-text-sub);
  font-size: 15px;
  line-height: 1.8;
  margin: -8px auto 28px;
  max-width: 680px;
}

.form-row-consent {
  margin: 8px 0 4px;
  text-align: center;
  font-size: 14px;
  color: var(--c-text-sub);
}

.form-row-consent label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-en-note {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.03em;
  opacity: 0.85;
  vertical-align: middle;
}

.section-subtitle-light {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.8;
  margin: -8px auto 32px;
  max-width: 720px;
}

.footer-bottom-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  margin: 24px auto 8px;
  max-width: 880px;
  line-height: 1.7;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .s13-form { padding: var(--section-y-sp) 0; }
  .contact-form { padding: 24px 16px; }
  .form-lead { font-size: 14px; }
}

/* ===========================
   S14 COLUMN
   =========================== */
.s14-column {
  background: #fff;
  padding: var(--section-y) 0;
}

.column-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 24px;
}

.column-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.column-thumb {
  background: linear-gradient(135deg, #2A3E6B 0%, #006D77 100%);
  border-radius: var(--radius-card);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.column-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.column-date {
  color: var(--c-gold);
  font-size: 14px;
  font-weight: 500;
}

.column-title {
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.column-lead {
  color: var(--c-text-sub);
  font-size: 16px;
  line-height: 1.7;
}

.column-more {
  text-align: right;
}

.column-more a {
  color: var(--c-teal);
  font-size: 16px;
  font-weight: 700;
}

.column-more a:hover {
  text-decoration: underline;
}

.s14-column .section-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.s14-column .section-title a:hover {
  color: var(--c-teal);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .s14-column { padding: var(--section-y-sp) 0; }
  .column-card { grid-template-columns: 1fr; }
  .column-title { font-size: 16px; }
}

/* ===========================
   S15 FOOTER
   =========================== */
.site-footer {
  background: var(--c-navy);
  color: #fff;
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-logo-ja {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.footer-logo-en {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 16px;
}

.footer-info {
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-gold);
}

.footer-info span {
  color: rgba(255, 255, 255, 0.85);
  margin-right: 4px;
}

.footer-menu ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-menu a {
  color: #fff;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-menu a:hover {
  color: var(--c-gold);
}

.partner-label {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 8px;
}

.partner-link {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 2px;
  margin-bottom: 12px;
}

.partner-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

.copyright {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .site-footer { padding: 48px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
}

/* ===========================
   Contact Form 7 compatibility
   page_cop の HTML を CF7 ショートコードに置換した際、
   CF7 が自動挿入するラッパ要素のために素のスタイルが届かない箇所を補正する。
   =========================== */

.contact-form .wpcf7-form-control-wrap {
  display: block;
}

.contact-form .wpcf7-list-item {
  display: contents;
  margin: 0;
}

.contact-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 16px;
  color: var(--c-text);
  margin-bottom: 0;
  cursor: pointer;
}

.contact-form .wpcf7-list-item-label {
  color: var(--c-text);
}

.contact-form .wpcf7-not-valid-tip {
  color: var(--c-required);
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
}

.contact-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid var(--c-border);
}

.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: var(--c-required);
  color: var(--c-required);
}

.contact-form .wpcf7-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
}

/* ===========================
   Thanks page
   page_cop には thanks 用の HTML/CSS が無いので、
   既存パレットに合わせて最小構成で定義する。
   =========================== */

.thanks-main {
  background: var(--c-light-gray);
  min-height: calc(100vh - 64px);
  padding: 96px var(--pad-x) 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thanks-card {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 56px 48px;
  text-align: center;
  border-top: 4px solid var(--c-gold);
}

.thanks-eyebrow {
  color: var(--c-teal);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.thanks-title {
  color: var(--c-navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
}

.thanks-lead {
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 24px;
}

.thanks-info {
  background: var(--c-light-gray);
  border-radius: var(--radius-btn);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text-sub);
  text-align: left;
  margin-bottom: 32px;
}

.thanks-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .thanks-main { padding: 80px var(--pad-x-sp) 48px; }
  .thanks-card { padding: 40px 24px; }
  .thanks-title { font-size: 20px; }
  .thanks-ctas { flex-direction: column; }
  .thanks-ctas .btn { width: 100%; }
}

/* ===========================
   COLUMN PAGES（投稿一覧 / 個別記事 / アーカイブ / 著者）
   LP と同じヘッダー・フッター・トンマナで投稿系テンプレートを表示する。
   サイドバーなし・フル幅 1 カラム。
   =========================== */
.column-page {
  background: #fff;
  padding: var(--section-y) 0;
}

@media (max-width: 768px) {
  .column-page { padding: var(--section-y-sp) 0; }
}

/* ---------- パンくず ---------- */
.breadcrumbs {
  margin-bottom: 32px;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 14px;
  color: var(--c-text-sub);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--c-border);
}

.breadcrumbs__item a {
  color: var(--c-teal);
}

.breadcrumbs__item a:hover {
  text-decoration: underline;
}

/* ---------- ページ見出し ---------- */
.page-heading {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-border);
}

.page-heading__eyebrow {
  color: var(--c-gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.page-heading__title {
  color: var(--c-navy);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.page-heading__lead {
  color: var(--c-text-sub);
  font-size: 16px;
  line-height: 1.8;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .page-heading { margin-bottom: 28px; padding-bottom: 16px; }
  .page-heading__title { font-size: 22px; }
}

/* 著者アーカイブ見出し */
.author-profile {
  display: flex;
  align-items: center;
  gap: 20px;
}

.author-profile__avatar img,
.author-profile__image {
  border-radius: 50%;
}

.author-profile__bio {
  color: var(--c-text-sub);
  font-size: 16px;
  line-height: 1.8;
  margin-top: 8px;
}

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

/* ---------- 投稿一覧 ---------- */
.column-list {
  margin-bottom: 8px;
}

/* .column-card / .column-thumb / .column-meta / .column-date / .column-title / .column-lead は
   S14 で定義済みのものを共用（横並び 280px + 1fr、SP で縦積み）。
   下記はアイキャッチ画像があるときのサムネ表示。 */
.column-thumb--image {
  display: block;
  background: none;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

.column-thumb__image {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.empty-state {
  color: var(--c-text-sub);
  font-size: 16px;
  text-align: center;
  padding: 48px 0;
}

/* ---------- ページネーション ---------- */
.pagination {
  margin-top: 40px;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pagination__item .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.pagination__item a.page-numbers:hover {
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: #fff;
}

.pagination__item .page-numbers.current {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}

.pagination__item .page-numbers.dots {
  border-color: transparent;
}

/* ---------- 個別記事 ---------- */
.column-page--single .entry-single,
.column-page--single .related-posts,
.column-page--single #comments {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.entry-single__header {
  margin-bottom: 24px;
}

.entry-single__header .entry-meta__item--cats {
  display: block;
  margin-bottom: 4px;
}

.entry-meta__cat {
  color: var(--c-gold);
  font-size: 14px;
  font-weight: 700;
}

.entry-meta__cat + .entry-meta__cat {
  margin-left: 8px;
}

.entry-single__title {
  color: var(--c-navy);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin: 8px 0 12px;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--c-text-sub);
}

.entry-meta a {
  color: var(--c-teal);
}

.entry-meta a:hover {
  text-decoration: underline;
}

.entry-single__thumb {
  margin: 0 0 32px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.entry-single__thumb img {
  width: 100%;
  height: auto;
}

.entry-single__content {
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.9;
}

.entry-single__content > * + * {
  margin-top: 1.5em;
}

.entry-single__content h2 {
  color: var(--c-navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 2em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-gold);
}

.entry-single__content h3 {
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 1.8em;
}

.entry-single__content h4 {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  margin-top: 1.6em;
}

.entry-single__content a {
  color: var(--c-teal);
  text-decoration: underline;
}

.entry-single__content ul,
.entry-single__content ol {
  padding-left: 1.5em;
}

.entry-single__content ul { list-style: disc; }
.entry-single__content ol { list-style: decimal; }

.entry-single__content li + li {
  margin-top: 0.5em;
}

.entry-single__content blockquote {
  border-left: 4px solid var(--c-gold);
  padding: 8px 0 8px 20px;
  color: var(--c-text-sub);
  font-style: italic;
}

.entry-single__content img {
  height: auto;
  border-radius: var(--radius-card);
}

.entry-single__content code {
  background: var(--c-light-gray);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.92em;
}

.entry-single__content pre {
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 16px 20px;
  overflow-x: auto;
  font-size: 16px;
  line-height: 1.7;
}

.entry-single__content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.entry-single__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.entry-single__content th,
.entry-single__content td {
  border: 1px solid var(--c-border);
  padding: 10px 12px;
  text-align: left;
}

.entry-single__content th {
  background: var(--c-light-gray);
  font-weight: 700;
}

.page-links {
  margin-top: 1.5em;
  font-size: 16px;
  color: var(--c-text-sub);
}

.entry-single__footer {
  margin-top: 32px;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.entry-tags__item a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 14px;
  color: var(--c-text-sub);
  transition: border-color 0.2s, color 0.2s;
}

.entry-tags__item a:hover {
  border-color: var(--c-teal);
  color: var(--c-teal);
}

@media (max-width: 768px) {
  .entry-single__title { font-size: 22px; }
  .entry-single__content { font-size: 16px; }
  .entry-single__content h2 { font-size: 19px; }
  .entry-single__content h3 { font-size: 17px; }
}

/* ---------- 関連記事 ---------- */
.related-posts {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--c-border);
}

.related-posts__title {
  color: var(--c-navy);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}

.related-posts__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.related-posts__list .column-card {
  grid-template-columns: 1fr;
  margin-bottom: 0;
  padding: 16px;
  gap: 14px;
}

.related-posts__list .column-thumb,
.related-posts__list .column-thumb__image {
  min-height: 130px;
}

.related-posts__list .column-title {
  font-size: 16px;
}

@media (max-width: 768px) {
  .related-posts__list { grid-template-columns: 1fr; }
}

/* ---------- コメント ---------- */
.comments {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--c-border);
}

.comments__title,
.comment-reply-title {
  color: var(--c-navy);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}

.comments__list {
  margin-bottom: 40px;
}

.comments__list .comment {
  margin-bottom: 20px;
}

.comments__list .children {
  margin-top: 20px;
  padding-left: 24px;
  border-left: 2px solid var(--c-border);
}

.comments__list .comment-body {
  background: var(--c-light-gray);
  border-radius: var(--radius-card);
  padding: 16px 20px;
}

.comments__list .comment-author {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
}

.comments__list .comment-author .says { display: none; }

.comments__list .comment-meta {
  font-size: 13px;
  margin-bottom: 8px;
}

.comments__list .comment-meta a {
  color: var(--c-text-sub);
}

.comments__list .comment-content {
  font-size: 16px;
  line-height: 1.8;
}

.comments__list .comment-content > * + * {
  margin-top: 0.8em;
}

.comments__list .reply {
  margin-top: 8px;
  font-size: 14px;
}

.comments__list .reply a {
  color: var(--c-teal);
  font-weight: 700;
}

.comments__closed {
  color: var(--c-text-sub);
  font-size: 16px;
  margin-bottom: 24px;
}

.comment-respond {
  margin-top: 8px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-form p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.comment-form label {
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
}

.comment-form textarea {
  min-height: 140px;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--c-teal);
}

.comment-form p.form-submit,
.comment-form p.logged-in-as,
.comment-form p.comment-notes {
  display: block;
}

.comment-form .form-submit input[type="submit"],
.comment-form #submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  background: var(--c-gold);
  border-radius: var(--radius-btn);
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.comment-form .form-submit input[type="submit"]:hover,
.comment-form #submit:hover {
  background: var(--c-gold-dark);
  color: #fff;
}

.comment-notes,
.comment-form-cookies-consent label,
.logged-in-as,
.comment-form-cookies-consent {
  color: var(--c-text-sub);
  font-size: 14px;
  font-weight: 400;
}

.comment-form p.comment-form-cookies-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.comment-form p.comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 4px;
}

.comments-pagination {
  margin: 24px 0 40px;
}

.comments-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  font-size: 14px;
  margin: 0 2px;
}

.comments-pagination .page-numbers.current {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}

/* S14 で記事 0 件のとき */
.column-empty {
  color: var(--c-text-sub);
  font-size: 16px;
  text-align: center;
}

/* ===========================================================
   CLIENT REVISIONS (2026-05-18) — seiei-bp.com_修正依頼.xlsx
   既存スタイルへの上書き＋新規スタイルを追加。
   R-XX-NN は 1_requirements.md の項目 ID に対応。
   =========================================================== */

/* ---------- R-H01: header English available ---------- */
.catch-en {
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.04em;
}

/* ---------- 英語タイトル (.section-eyebrow-en) ---------- */
.section-eyebrow-en {
  text-align: center;
  color: var(--c-gold);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}
@media (max-width: 768px) {
  .section-eyebrow-en { font-size: 14px; }
}

/* ---------- R-01-02: hero headline 33px ---------- */
.hero-headline { font-size: 33px; }
@media (max-width: 768px) {
  .hero-headline { font-size: 22px; line-height: 1.45; }
}

/* ---------- R-01-03: hero subcopy 12px ---------- */
.hero-subcopy { font-size: 12px; line-height: 2.0; }
@media (max-width: 768px) {
  .hero-subcopy { font-size: 12px; line-height: 1.8; }
}

/* ---------- R-01-04: hero target 14px gold ---------- */
.hero-target {
  font-size: 14px;
  color: var(--c-gold);
  opacity: 1;
}

/* ---------- R-NEW01 (cycle-01 of 202605251214 ticket): 横長月桂冠 1539/936 + 月桂冠内 4 行収納（label を wreath 内側に移動） ---------- */
/* ラベル系譜（参考、上ほど新しい）:
     - R-NEW01: 202605251214 cycle-01（本 cycle、未コミット）— laurel-wreath.png を横長 1539x936 に差し替え、
       .badge-label を .badge-wreath 内に移動し metric/num/業界名/日本事業 の 4 行を flex column 配置。
       qual-badge も 4 種類差し替え + height 40px、qual-text max-width 1000px。
       クライアント xlsx 20260525 Row 107-109 + 共有フォルダ画像（specs/20260525追加分/）対応。
     - R-H03: 202605240300 cycle-03（未コミット）— SP @768/@480 のみ更新（PC は R-H02 継承）。
       クライアント指摘「スマホで 3 つが並びきらない (= 横並びにならない)」を受けて 1 段 3 等分に再構成。
     - R-H02: 202605240300 cycle-02（未コミット、本ブロック PC 部の基底）
     - R-H-NEW-01/02: 202605240300 cycle-01（未コミット、<br />日本事業 + label 13/11/10px の導入）
     - R-HB-01/02: 202605231030 cycle-01（未コミット、gekkeikan-left/right.png 分割画像 + 葉なし帯の導入）
     - R-LB-01/02 / R-LB-04 / R-LW-02 / R-01-05: HEAD 23c3966 までに committed（laurel-wreath.png 単一画像 +
       aspect-ratio 1600/1395 + padding 0 4% の基礎 + SP MQ の R-LB-04）
       ※ ただし R-LB-01/02 (.badge-item padding 0 4%) / R-LB-04 (@768/@480 padding 0 3%/2%) の実装行は
         本 R-NEW01 で .badge-wreath 内 4 行 flex column 配置への再設計により **削除済み**。
         ラベル名はコメントのみ残存（grep 時の系譜参照用）。
       ※ 上記 4 種は代表例。grep -nE "R-LB-|R-LW-|R-01-" で全件抽出可能
   ※ R-HB / R-H-NEW / R-H02 / R-H03 / R-NEW01 は **未コミット作業ツリー由来のラベル** であり、git log -p で 23c3966 を辿っても見つからない。
     R-LB / R-LW / R-01 は 23c3966 までに committed されたラベル。
   本 R-NEW01 は R-H02/R-H03 の laurel-wreath.png 縦長 1600x1395 + label を wreath 外配置の構造を上書きし、
   横長 1539x936 + label を wreath 内配置 (4 行 flex column) に再構成。
   xlsx Row 109「月桂冠の中に 4 行が入りきるようでしたら入れてほしい」要件への対応。
   - R-NEW01 反映: laurel-wreath.png 全置換、.badge-wreath { aspect-ratio: 1539/936; flex column 4 行 }
   - R-NEW01 反映: .badge-metric / .badge-num を position: absolute → static、flex 子要素として通常フロー配置
   - R-NEW01 反映: .badge-label を wreath 内側に移動 (HTML 側、front-page.php) + フォントサイズ全体縮小
   - R-H02 由来既存記述: R1 fix B-01/B-02/G-01 で基底 .badge-item の backdrop-filter / min-width / gap /
     justify-content をリセット済。R-NEW01 でも同方針を継承 */

.hero-badges {
  flex-wrap: nowrap;
  max-width: 600px;
}
.badge-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* R1 fix B-02: 基底 L424 flex-end をリセット（縦中央配置は .badge-wreath / .badge-label の通常フローに委譲） */
  text-align: center;
  min-width: 0;                    /* R1 fix B-02: 基底 L416 `min-width: 140px` をリセット（flex: 1 1 0 で 3 等分するため最小幅制約不要） */
  gap: 0;                          /* R1 fix B-02: 基底 L425 `gap: 4px` をリセット（.badge-label の margin-top で単独制御） */
  padding: 0;
  background-color: transparent;
  background-image: none;          /* R-H02: cycle-01 までの gekkeikan-left/right.png 分割画像を解除（laurel-wreath.png は .badge-wreath に移動） */
  backdrop-filter: none;           /* R1 fix B-02: 基底 L418 `backdrop-filter: blur(4px)` をリセット（透明背景で月桂冠単一画像をクリアに表示） */
  border: 0;
  border-radius: 0;
}
.badge-wreath {
  position: relative;
  width: 100%;
  aspect-ratio: 1539 / 936;        /* R-NEW01: 横長 1.644 (旧 1600/1395 縦長 1.147 から差し替え)。新 laurel-wreath.png サイズ */
  background-image: url('../images/laurel-wreath.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;                   /* R-NEW01: 4 行を flex column 縦配置 */
  flex-direction: column;
  justify-content: center;         /* R-NEW01: 4 行を月桂冠内側に縦中央寄せ */
  align-items: center;
  padding: 4% 10%;                 /* R-NEW01: 月桂冠の葉が左右に張り出すため水平内側に余裕（10%）、垂直は最小（4%） */
  gap: 2px;                        /* R-NEW01: 4 行間のタイト間隔 */
  text-align: center;
}
.hero-badges .badge-metric,
.hero-badges .badge-num,
.hero-badges .badge-label {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5);  /* hero 背景画像（地球儀）対策、視認性確保。text-shadow は子 em/small に inherit */
}
.hero-badges .badge-metric {
  position: static;                /* R-NEW01: absolute → static。flex 子要素として通常フロー配置 */
  font-size: 16px;                 /* R-NEW01: 20 → 16px。4 行収納のため縮小 */
  line-height: 1.1;
  white-space: nowrap;             /* 「年平均成功率」5 字を 1 行表示 */
  margin: 0;
  max-width: 100%;
}
.hero-badges .badge-num {
  position: static;                /* R-NEW01: absolute → static */
  font-size: 32px;                 /* R-NEW01: 50 → 32px。4 行収納のため縮小、視認性は維持 */
  line-height: 1.0;
  white-space: nowrap;
  margin: 0;
  max-width: 100%;
}
.hero-badges .badge-num em { font-size: 32px; font-style: normal; }   /* R-NEW01: 50 → 32px */
.hero-badges .badge-num small { font-size: 14px; }                    /* R-NEW01: 20 → 14px (num 32px * 0.44) */
.hero-badges .badge-label {
  display: block;
  margin-top: 0;                   /* R-NEW01: wreath 内側配置となり親 gap で間隔制御 */
  font-size: 12px;                 /* R-NEW01: 15 → 12px。業界名（10 字）+ <br />日本事業 の 2 行を wreath 内に収納 */
  line-height: 1.25;
  opacity: 1;                      /* 基底 .badge-label (L454-458) の opacity 0.9 を上書き */
}

@media (max-width: 768px) {
  /* R-NEW01 (cycle-01 of 202605251214 ticket) + R-H03 (cycle-03 of 202605240300 ticket): SP でも 1 段 3 等分配置を維持し、
     R-NEW01 で label を wreath 内側に移動した 4 行収納に対応。
     継承対象は `.hero-badges` / `.badge-item` のフレックス構造（flex-wrap/justify-content/gap/3 等分計算）のみ。
     `.badge-metric` / `.badge-num` / `.badge-num em` / `.badge-num small` / `.badge-label` のフォントサイズは
     R-NEW01 で全件再定義（R-H03 旧値 metric=16 / num=40 / em=28 / small=12 / label=13 は廃止、本ブロックで新値に置換）。
     `.badge-wreath` の内側 padding/gap も R-NEW01 で新規追加（4 行収納のため）。
     対応要件: R-NEW-02 (4 行 SP 収納) / R-NEW-03 (cycle-03 SP 設計継承) */
  .hero-badges {
    flex-wrap: nowrap;             /* R-H03-01: SP でも 1 段固定（cycle-02 wrap 解除） */
    justify-content: center;       /* nowrap で 3 等分すれば余白なしだが、border viewport で念のため中央寄せ */
    margin-left: auto;
    margin-right: auto;
    gap: 4px;                      /* R-H03-02: flex 計算式 calc((100% - 8px) / 3) と整合（2 箇所 * 4px = 8px） */
  }
  .badge-item {
    flex: 0 0 calc((100% - 8px) / 3);  /* R-H03-02: ユーザー指示の 3 等分計算式 */
    padding: 0;                    /* R1 fix B-01: 基底 SP L490 `padding: 12px` をリセット */
    min-width: 0;                  /* R1 fix B-01: 基底 SP L490 `min-width: 100px` をリセット（3 等分のため最小幅制約不要） */
  }
  .badge-wreath { padding: 4px 8%; gap: 1px; }                     /* R-NEW01: SP は内側余白・行間を縮小（PC 4% 10% / gap 2px から圧縮） */
  .hero-badges .badge-metric { font-size: 11px; line-height: 1.1; }  /* R-NEW01: 16 → 11px（4 行収納のため） */
  .hero-badges .badge-num { font-size: 22px; line-height: 1.0; }     /* R-NEW01: 40 → 22px（4 行収納のため） */
  .hero-badges .badge-num em { font-size: 18px; }                    /* R-NEW01: 28 → 18px（"+27"/"+18" は em 適用、"28" は num 22px のまま） */
  .hero-badges .badge-num small { font-size: 9px; }                  /* R-NEW01: 12 → 9px（num 22 * 0.4 = 8.8 → 9 に丸め） */
  .hero-badges .badge-label { font-size: 10px; line-height: 1.25; margin-top: 0; }  /* R-NEW01: 13 → 10px、margin-top 6 → 0（wreath 内側配置、親 gap で間隔制御） */
}

@media (max-width: 480px) {
  /* R-NEW01 (cycle-01 of 202605251214 ticket) + R-H03 (cycle-03) ≤480px: 3 等分原則を維持しつつ、
     4 行収納の最狭ケース（360px viewport で wreath 高さ ≈ 63px）に合わせて更に縮小。
     cascade 注: `.hero-badges { flex-wrap, justify-content, margin-left/right, gap }` および
     `.badge-item { flex }` は @768 MQ で宣言済みで、@480 にも cascade 継承されるため再宣言しない
     （DRY 原則）。`.badge-wreath` の padding/gap、フォントサイズのみ本 MQ で上書き。 */
  .badge-item { padding: 0; min-width: 0; }  /* R1 fix B-01: ≤480px でも明示リセット（@768 から重複だが、可読性のため） */
  .badge-wreath { padding: 2px 4%; gap: 1px; }                     /* R-NEW01 R1 fix BUG-01: padding 6% → 4% に圧縮、内側横幅を確保（sp-360 で label「米系 ICU ベッドメーカー」自動折返し防止） */
  .hero-badges .badge-metric { font-size: 9px; line-height: 1.1; }   /* R-NEW01: 14 → 9px（4 行収納のため） */
  .hero-badges .badge-num { font-size: 18px; line-height: 1.0; }     /* R-NEW01: 34 → 18px */
  .hero-badges .badge-num em { font-size: 16px; }                    /* R-NEW01: 24 → 16px */
  .hero-badges .badge-num small { font-size: 8px; }                  /* R-NEW01: 10 → 8px */
  .hero-badges .badge-label { font-size: 8px; line-height: 1.2; margin-top: 0; }  /* R-NEW01 R1 fix BUG-01: 8.5 → 8px に微減、業界名+日本事業の 2 行を sp-360 で確実に収納 */
}

/* ---------- R-02-02: S02 section-title 42px ---------- */
.s02-stats .section-title {
  font-size: 42px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .s02-stats .section-title { font-size: 28px; }
}

/* ---------- R-02-03: stats-note as subtitle, teal 20px ---------- */
.s02-stats .stats-note {
  color: var(--c-teal);
  font-size: 20px;
  text-align: center;
  margin: 0 auto 40px;
  max-width: 880px;
}
@media (max-width: 768px) {
  .s02-stats .stats-note { font-size: 16px; }
}

/* ---------- R-02-04: stat-num 74px ---------- */
.stat-num { font-size: 74px; line-height: 1.1; }
.stat-num small { font-size: 24px; }
.stat-num em { font-size: 74px; font-style: normal; }
@media (max-width: 768px) {
  .stat-num { font-size: 56px; }
  .stat-num small { font-size: 20px; }
  .stat-num em { font-size: 56px; }
}

/* ---------- 修正依頼20260522 行87: stat-metric 20px（SP は同率 ×1.25 で 18px） ---------- */
.stat-metric { font-size: 20px; }
@media (max-width: 768px) {
  .stat-metric { font-size: 18px; }
}

/* ---------- R-03-01: s03 bg overlay placeholder ---------- */
.s03-challenges { position: relative; overflow: hidden; }
.s03-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(0, 109, 119, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 70%, rgba(201, 168, 76, 0.14) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.s03-challenges > .container { position: relative; z-index: 1; }

/* ---------- R-03-03: s03 section-title-light center, gold, 42px ---------- */
.s03-challenges .section-title-light {
  text-align: center;
  font-size: 42px;
  color: #C1AB4D;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .s03-challenges .section-title-light { font-size: 28px; }
}

/* ---------- R-03-04: closing-line as subtitle, white, 20px, center ---------- */
.s03-challenges .closing-line {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  max-width: 880px;
  margin: 0 auto 40px;
}
@media (max-width: 768px) {
  .s03-challenges .closing-line { font-size: 16px; }
}

/* ---------- R-03-05: section-subtitle-light as list label ---------- */
.s03-challenges .section-subtitle-light {
  text-align: left;
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  margin: 0 0 16px;
  max-width: 100%;
}

/* ---------- R-03-06 (cycle-04): challenge-list cards 3-2 centered grid ---------- */
/* PC: 6-col grid with each card spanning 2 cols → row 1 = 3 cards, row 2 = 2 cards
   centered (card 4 explicitly placed at col 2, card 5 auto-flows to col 4). */
.s03-challenges .challenge-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 100%;
  color: inherit;
}
.challenge-card {
  grid-column: span 2;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 18px;
  color: #666666;
  font-size: 15px;
  line-height: 1.7;
  list-style: none;
}
.challenge-card:nth-child(4) {
  grid-column: 2 / span 2;
}
.challenge-card::before { content: none !important; }
@media (max-width: 1024px) {
  .s03-challenges .challenge-list { grid-template-columns: repeat(2, 1fr); }
  .challenge-card { grid-column: auto; }
  .challenge-card:nth-child(4) { grid-column: auto; }
}
@media (max-width: 768px) {
  .s03-challenges .challenge-list { grid-template-columns: 1fr; }
}

/* ---------- R-04-01,02: s04 section-title 42px center ---------- */
.s04-why .section-title {
  font-size: 42px;
  text-align: center;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .s04-why .section-title { font-size: 28px; }
}

/* ---------- R-04-03,05: qual-text repositioned subtitle with badges ---------- */
.s04-why .qual-text {
  color: var(--c-teal);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto 48px;
  max-width: 1000px;  /* R-NEW-04 (修正依頼20260525 Row 107): 880 → 1000px（PC で資格 4 種 + AFP バッジを 1 行収納） */
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
}
.qual-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
  vertical-align: middle;
}
.qual-badge-svg { display: block; }
.qual-badge-img { display: block; height: 40px; width: auto; } /* R-NEW-05 (修正依頼20260525 Row 108): 28 → 40px（バッジ視認性向上、既存画像も 40px ベースで差し替え）。width: auto は front-page.php の HTML width 属性（40/40/121/40）を上書きし、各バッジのアスペクト比を画像ファイルから自動計算（AFP は 121×40 横長、他 3 種は 40×40 正方形を維持） */
.qual-sep {
  color: var(--c-gold);
  margin: 0 6px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .s04-why .qual-text { font-size: 16px; gap: 4px 6px; }
}

/* ---------- R-05-01,02,03,04: s05 navy bg, white title, teal active ---------- */
.s05-targets { background: #2A3E6B; }
.s05-targets .section-title { color: #fff; font-size: 42px; } /* font-size: 修正依頼20260522 行88 */
@media (max-width: 768px) {
  .s05-targets .section-title { font-size: 28px; }
}
.tab-btn.is-active {
  background: var(--c-teal);
  color: #fff;
}
.s05-targets .tab-target {
  color: var(--c-teal);
  font-weight: 700;
  font-size: 18px;
}

/* ---------- R-06-02 ~ 06: services ---------- */
.s06-services .section-title {
  font-size: 42px;
  text-align: center;
  color: var(--c-navy);
}
@media (max-width: 768px) {
  .s06-services .section-title { font-size: 28px; }
}
.service-num {
  color: #2A3E6B;
  font-size: 33px;
}
.service-name {
  color: var(--c-teal);
  font-size: 22px;
}
.service-tags span { font-size: 14px; }
.service-note {
  color: #C1AB4D;
  font-style: normal;
}

/* ---------- R-07-01: s07 kouei rename + bg overlay ---------- */
.s07-kouei {
  background: var(--c-navy);
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.s07-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(201, 168, 76, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(0, 109, 119, 0.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.s07-kouei > .container { position: relative; z-index: 1; }
.kouei-body {
  color: #fff;
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 768px) {
  .s07-kouei { padding: var(--section-y-sp) 0; }
  .kouei-body { font-size: 16px; }
}

/* ---------- R-07-03 / 修正依頼20260522 行92: s07 専用タイトルクラス（section-title-light から分離） ---------- */
.kouei-title {
  font-size: 40px;
  font-weight: 700;
  color: #C1AB4D;
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .kouei-title { font-size: 28px; }
}

/* ---------- R-07-04: btn-kouei gold ---------- */
.btn-kouei {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  background: #C1AB4D;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  transition: opacity 0.2s, transform 0.2s;
  letter-spacing: 0.02em;
}
.btn-kouei:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ---------- R-08-02: s08 section-title 42px ---------- */
.s08-process .section-title { font-size: 42px; }
@media (max-width: 768px) {
  .s08-process .section-title { font-size: 28px; }
}

/* ---------- R-08-03: Splide horizontal scroll on SP ---------- */
/* SP の Splide マウント後は grid を解除して flex (Splide 側) を有効化。 */
.process-steps.splide .splide__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 0;
  margin: 0;
}
@media (max-width: 1024px) {
  .process-steps.splide .splide__list { grid-template-columns: repeat(2, 1fr); }
}
.process-steps.splide.is-active .splide__list {
  display: flex;
  grid-template-columns: none;
}
.process-steps.splide.is-active .splide__slide {
  display: block;
}
.process-steps.splide.is-active .process-step:not(:last-child)::after { display: none; }
.process-steps.splide .splide__pagination {
  position: relative;
  bottom: auto;
  padding: 16px 0 0;
}
/* R-CR-03 (cycle-02): ページネーションドットの視認性向上 */
.process-steps.splide .splide__pagination__page {
  width: 8px;
  height: 8px;
  opacity: 1;
  background: rgba(27, 42, 74, 0.25);
}
.process-steps.splide .splide__pagination__page.is-active {
  background: var(--c-teal);
  transform: scale(1.3);
}

/* ---------- R-CR-02 (cycle-02): 支援プロセス カルーセルの左右矢印 (soracom 風) ---------- */
.process-steps.splide .splide__arrow {
  width: 40px;
  height: 40px;
  background: #fff;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.process-steps.splide .splide__arrow svg {
  width: 16px;
  height: 16px;
  fill: var(--c-navy);
  transition: fill 0.2s;
}
.process-steps.splide .splide__arrow:hover {
  background: var(--c-navy);
}
.process-steps.splide .splide__arrow:hover svg {
  fill: #fff;
}

/* ---------- R-PS-01 / R-S08V-01 (cycle-01 202605240200): Splide 非マウント時 (PC) も含めカルーセル内カードを常時表示 ---------- */
/* 経緯:
   - Splide ベンダー CSS は `.splide { visibility: hidden }` で初期化前を隠し、
     JS が `.is-initialized` を付与して可視化する設計。
   - 本テーマは PC (>768px) で Splide を意図的にマウントしない (main.js initProcessSplide が
     matchMedia('(max-width: 768px)') で SP のみマウント) ため、PC では `.is-initialized` が
     永続的に付かず、`.splide { visibility: hidden }` が継承されて全カードが消滅する。
   - 加えて `.splide__slide { opacity: 0 }` (vendor) と `.fade-in { opacity: 0 }` (L164) も
     IO 発火まで重なって不可視を強める。
   - R-PS-01 (cycle-01 旧) は SP 限定で opacity/transform だけ打ち消していたが、PC visibility
     の打ち消し漏れがあったため、本ルールで全幅・visibility 含めて統合する。
   PC の process-step では fade-in スクロールアニメは失われるが、不可視のままより常時表示を優先。 */
.process-steps.splide {
  visibility: visible;
}
.process-steps.splide .process-step {
  opacity: 1;
  transform: none;
}

/* ---------- R-PA-01 (cycle-01): SP カルーセル中央配置の保険 ---------- */
/* main.js の Splide option (padding: { left: '32px', right: '32px' }) と同値で
   track 両端 padding を SP 限定で強制する。
   - Splide が mount 完了している間は inline style (specificity 1,0,0,0) が勝つので
     JS 値が真実値。本ルールは同値のため衝突しても結果同じ
   - Splide mount 前の一瞬や、万一 padding inline を書かないパスを通った場合の保険
   - `.is-active` セレクタを付けないことで mount 前の状態もカバー
   - PC 幅は `@media (max-width: 768px)` で無効化（R-PA-03 退行リスクなし） */
@media (max-width: 768px) {
  .process-steps.splide .splide__track {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ---------- 修正依頼20260522 行93: step-badge 50×50 / font-size 34px ---------- */
.step-badge { width: 50px; height: 50px; font-size: 34px; }

/* ---------- R-08-04 / 修正依頼20260522 行94: FontAwesome icon under step-badge ---------- */
.step-icon {
  display: block;
  color: var(--c-teal);
  font-size: 60px;
  margin: 4px auto 12px;
  line-height: 1;
}

/* ---------- R-08-05: step-desc teal ---------- */
.step-desc { color: var(--c-teal); }

/* ---------- R-09-02: s09 section-title 42px ---------- */
.s09-pricing .section-title { font-size: 42px; margin-bottom: 16px; }
@media (max-width: 768px) {
  .s09-pricing .section-title { font-size: 28px; }
}

/* ---------- R-09-03,04: pricing-card border teal ---------- */
.pricing-card { border: 2px solid var(--c-teal); }
.pricing-card-highlight { border: 2px solid var(--c-teal); }

/* ---------- R-09-05: pricing-title teal 26px ---------- */
.pricing-title {
  color: var(--c-teal);
  font-size: 26px;
}

/* ---------- R-09-06: pricing-note-lead as subtitle teal 20px ---------- */
.pricing-note-lead {
  color: var(--c-teal);
  font-size: 20px;
  text-align: center;
  margin: 0 0 40px;
}
@media (max-width: 768px) {
  .pricing-note-lead { font-size: 16px; }
}

/* ---------- R-10-02: profile JP/EN tab UI ---------- */
.profile-lang-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}
.profile-lang-tab {
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-sub);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
  cursor: pointer;
}
.profile-lang-tab:hover { color: var(--c-navy); }
.profile-lang-tab.is-active {
  color: var(--c-teal);
  border-bottom-color: var(--c-teal);
}
.profile-lang-panel {
  display: none;
  animation: tabFadeIn 0.4s ease;
  margin-bottom: 24px;
}
.profile-lang-panel.is-active { display: block; }
.profile-message-en p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
  margin-bottom: 10px;
}
.profile-message-en-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--c-navy);
  margin-bottom: 4px;
}
.profile-message-en-subtitle {
  font-weight: 500;
  color: var(--c-teal);
  margin-bottom: 12px;
}
.profile-message-en-closing {
  font-style: italic;
  color: var(--c-navy);
  font-weight: 700;
}
.profile-message-en-sign {
  font-style: italic;
  color: var(--c-text-sub);
  margin-top: 16px;
}

/* ---------- R-13-02,03: s13 ---------- */
.s13-form .section-title { font-size: 42px; }
@media (max-width: 768px) {
  .s13-form .section-title { font-size: 28px; }
}
.s13-form .form-lead { color: var(--c-teal); }

/* ---------- R-14-02: s14 section-title 42px ---------- */
.s14-column .section-title { font-size: 42px; }
@media (max-width: 768px) {
  .s14-column .section-title { font-size: 28px; }
}

/* ---------- R-F01: footer-logo-ja 18px gold ---------- */
.footer-logo-ja {
  font-size: 18px;
  color: #C1AB4D;
}

/* ---------- R-F02: footer-info 14px ---------- */
.footer-info { font-size: 14px; }

/* ---------- R-F06: partner-note 14px ---------- */
.partner-note { font-size: 14px; }

/* ---------- R1-08: Splide load fallback for process-steps ---------- */
/* Splide CDN がブロック/失敗して初期化されなかった場合でも SP で横スクロール閲覧できるようにする。 */
@media (max-width: 768px) {
  .process-steps.splide:not(.is-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
  }
  .process-steps.splide:not(.is-initialized) .splide__track,
  .process-steps.splide:not(.is-initialized) .splide__list {
    display: contents;
  }
  .process-steps.splide:not(.is-initialized) > .splide__track > .splide__list > .process-step {
    flex: 0 0 250px;
    scroll-snap-align: center;
  }
}

/* ---------- 修正依頼20260523 行96: s03 section-subtitle-light に ☑ プリペンド（金 #c1ab4d） ---------- */
/* ☑ は装飾記号として front-page.php に aria-hidden 付き span.check-mark で挿入済み。
   本文（subtitle テキスト）の色は基底 L2479 の #fff を維持し、☑ のみ金色強調にする。 */
.s03-challenges .section-subtitle-light .check-mark {
  color: #c1ab4d;
  margin-right: 6px;
  font-weight: 700;
}

/* ---------- 修正依頼20260523 行97-101: challenge-card 背景色（5枚一括） ---------- */
/* 基底 L2497 の background:#fff を触らずオーバーライド。5枚共通クラスで1ルール一括適用。 */
.challenge-card { background: #f0f0f1; }

/* ---------- 修正依頼20260523 行102-103: footer-info 色を白に ---------- */
/* 基底 L1482 の color: var(--c-gold) を触らずオーバーライド。
   .footer-info span（ラベル「住所：」「URL：」等の半透明白 L1486）は具体度が高いので維持される。
   page-thanks.php の .footer-info（住所/E/T/W）も連動して白化する点はクライアント確認事項。 */
.footer-info { color: #fff; }