/* Common styles for first view sections */
:root {
  --c-bg: #ffffff;
  --c-accent: #b9e9f3; /* 青 */
  --c-text: #111111;
  --c-gray: #9aa3ad;   /* グレー（ワンポイント） */
  --c-fv-bg: #f2f4f6;   /* ファーストビュー背景の薄いグレー */
}

/* グローバルで強制されている可能性のある余白を打ち消し */
html { margin-top: 0 !important; }

/* 共通ファーストビュー */
.common-fv {
  position: relative;
  padding: 96px 0 48px;
  background: var(--c-fv-bg);
  overflow: hidden;
  min-height: 56vh; /* 十分な縦の余白を確保 */
}

/* 左右中央・上下中央のタイトルレイヤー */
.common-fv__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; /* 上下中央 */
  z-index: 1; /* SVGの上 */
}
.common-fv__heading {
  font-size: clamp(32px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0a84ae; /* 見出し色を調整 */
  z-index: 999;
  text-align: center;
}
/* タイトルを左右中央に */
.common-fv__title .container { display: flex; justify-content: center; }

.contentsSvg {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 0; /* タイトルより下 */
}

.contentsSvg__grid {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.contentsSvg__bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto; /* クリック許可 */
}

/* SVG内図形のアニメーションに必要なトランジション */
.contentsSvg__bg rect {
  transition: opacity .9s ease, transform .9s ease, fill .9s ease;
  transform-origin: center; /* 変形の起点 */
  transform-box: fill-box;
  cursor: pointer; /* クリック可能なヒント */
}

/* 共通コンテナ */
.container {
  max-width: 1080px;
  padding: 0 20px;
  margin: 0 auto;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .common-fv { padding: 64px 0 32px; }
}

@media (min-width: 1280px) {
  .container { max-width: 1200px; }
}