/* =========================================================
   Sitemap Styles
   Path: /in/css/sitemap.css
   Purpose: サイトマップのビジュアルツリー表現
   ========================================================= */


/* ---------------------------------------------------------
   01) テーマトークン (:root)
   - サイトマップ専用の色・影・角丸
   --------------------------------------------------------- */
:root {
  --sm-bg: #ece6d0;            /* 背景イメージ参考色（任意） */
  --sm-ink: #0f172a;           /* 文字色（親ノード） */
  --sm-muted: #475569;         /* 補助テキスト */
  --sm-card: #111827;          /* 子ノード（黒） */
  --sm-parent: #ffffff;        /* 親ノード（白） */
  --sm-line: #cbd5e1;          /* ノード間の縦ライン */
  --sm-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
  --sm-radius: 14px;
}


/* ---------------------------------------------------------
   02) セクションヘッダー（タイトル・サブタイトル）
   --------------------------------------------------------- */
.section {
  padding-top: 20px;
  padding-right: 0;
  padding-bottom: 84px;
  padding-left: 0;

.section__header {
  text-align: center;
}

.section__header .subtitle {
  margin-top: 0.25rem;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;
}

.section__header h1 {
  font-size: clamp(40px, 5vw, 84px);

  margin-top: 1rem;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
}


/* ---------------------------------------------------------
   03) サイトマップ全体コンテナ
   - 背景色・角丸・内側余白
   --------------------------------------------------------- */

.sitemap-visual {
  position: relative;

  background-color: var(--sm-bg, transparent);
  background-image: none;
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;

  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;

  padding-top: clamp(24px, 4vw, 48px);
  padding-right: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(24px, 4vw, 48px);
  padding-left: clamp(24px, 4vw, 48px);

  overflow-x: hidden;
  overflow-y: hidden;
}


/* ---------------------------------------------------------
   04) カラムグリッド
   - デフォルト：4カラム
   - ブレークポイントで段数を変更
   --------------------------------------------------------- */

.sitemap-columns {
  display: grid;
  align-items: flex-start;

  grid-template-columns: repeat(4, minmax(180px, 1fr));

  row-gap: clamp(16px, 2.8vw, 36px);
  column-gap: clamp(16px, 2.8vw, 36px);
}


/* ---------------------------------------------------------
   05) ノード（親・子）
   - 視覚的なカード（親子で配色を変える）
   --------------------------------------------------------- */

.node {
  display: block;

  text-align: center;
  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;

  color: #ffffff;
  background-color: var(--sm-card);

  padding-top: 14px;
  padding-right: 12px;
  padding-bottom: 14px;
  padding-left: 12px;

  margin-top: 14px;
  margin-right: auto;
  margin-bottom: 14px;
  margin-left: auto;

  border-top-left-radius: var(--sm-radius);
  border-top-right-radius: var(--sm-radius);
  border-bottom-right-radius: var(--sm-radius);
  border-bottom-left-radius: var(--sm-radius);

  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);

  line-height: 1.2;
  font-weight: 600;
}

/* ノード hover 時のわずかな浮き上がり */
.node:hover {
  opacity: 0.92;
  transform: translateY(-1px);

  transition-property: opacity, transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

/* 親ノード（白背景＋ボーダー） */
.node--parent {
  color: var(--sm-ink);
  background-color: var(--sm-parent);

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: #e2e8f0;
  border-right-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
  border-left-color: #e2e8f0;
}


/* ---------------------------------------------------------
   06) 親 → 直下の子ノードの縦ライン
   - .node--parent の直後の .node / a.node の上に細い線
   --------------------------------------------------------- */

.node--parent + .node,
.node--parent + a.node {
  position: relative;
}

.node--parent + .node::before,
.node--parent + a.node::before {
  content: "";

  position: absolute;
  left: 50%;
  top: -14px;

  transform: translateX(-50%);

  width: 2px;
  height: 14px;

  background-color: var(--sm-line);
  background-image: none;
}


/* ---------------------------------------------------------
   07) 子ノード同士の縦ライン
   - 兄弟ノード間のつながりを示す細い線
   --------------------------------------------------------- */

.node + .node {
  position: relative;
}

.node + .node::before {
  content: "";

  position: absolute;
  left: 50%;
  top: -14px;

  transform: translateX(-50%);

  width: 2px;
  height: 14px;

  background-color: var(--sm-line);
  background-image: none;
}


/* =========================================================
   08) MEDIA QUERIES（ブレークポイント集約）
   - 900px → 920px に丸め
   - 560px → 768px に丸め
   - min-width は使用しない方針
   ========================================================= */

/* ---------------------------------------------------------
   < 920px：2カラムレイアウト
   --------------------------------------------------------- */
@media (max-width: 920px) {
  .sitemap-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------
   < 768px：1カラムレイアウト（縦積み）
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .sitemap-columns {
    grid-template-columns: 1fr;
  }
}