/* ==========================================================================
   base.css — typography, container, helpers
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* No sticky header, but a small gutter on anchor jumps */
  scroll-padding-top: var(--space-16);
}

body {
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--c-text);
  background-color: var(--c-white);
  font-feature-settings: "palt" 1;
  /* avoid horizontal scroll from full-bleed sections */
  overflow-x: hidden;
}

main {
  display: block;
}

/* ==========================================================================
   Focus styles (accessibility)
   ========================================================================== */
:focus {
  outline: none;
}

/* ==========================================================================
   Container
   ========================================================================== */
.l-container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Image defaults
   ========================================================================== */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ==========================================================================
   Phase 2 placeholder styles for not-yet-implemented sections
   ========================================================================== */
.s-section__placeholder {
  padding: var(--space-64) var(--container-pad);
  text-align: center;
  background-color: var(--c-gray-bg);
  border: 1px dashed var(--c-gray-border);
  margin-block: var(--space-32);
  border-radius: var(--radius-card);
}

.placeholder-heading {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-gray-text);
  margin-bottom: var(--space-12);
}

.placeholder-note {
  font-size: var(--fs-caption);
  color: var(--c-gray-text);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Typography helpers (base.cssの末尾などに追記)
   ========================================================================== */
.js-count-up {
  font-family: var(--ff-number);
  font-weight: 500;
  /* 数字の幅が変動してガタつくのを防ぐ */
  font-variant-numeric: tabular-nums; 
}

/* ==========================================================================
   Scroll to Top Button (SP only)
   ========================================================================== */
.c-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 70px;
  height: 70px;
  color: var(--c-white);
  border: none;
  cursor: pointer;
  z-index: 100;
  display: none; /* PC版は非表示 */
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease,
              background-color 0.2s ease;
  transform: translateX(100px); /* 初期状態は右に隠す */
  opacity: 0;
}
 
.c-scroll-top.is-visible {
  transform: translateX(0); /* 右からスッと表示 */
  opacity: 1;
}
 
 
.c-scroll-top:active {
  transform: translateX(0) scale(0.95);
}
 
.c-scroll-top::before {
}
 
@media (max-width: 767px) {
  body {
    font-size: var(--fs-body-sm);
  }
  .c-scroll-top {
    display: flex; /* SP版のみ表示 */
  }
}

/* ==========================================================================
   br処理 (SP only)
   ========================================================================== */
.pc_only {
   display:block;
 }
.sp_only {
   display:none;
 }
@media (max-width: 767px) {
 .pc_only {
    display:none;
  }
 .sp_only {
    display:block;
  }
}