@charset "utf-8";

/*カラー変数設定 */
:root {
  --color-corporate: #004097;
  --color-entry: #d94b41;
  --color-elementary: #f87f2b;
  --color-juniorhigh: #0b8ce2;
}

/* 固定ヘッダーの高さ分、スクロール位置をずらす指定 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 55px; /* 固定ヘッダーの高さに合わせて調整してください */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333333;
}

/*自作SVGアイコンの共通設定 */

/* 1. アイコンの基本設定 */
.icon-svg,
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;   /* font-sizeに連動させるため1em */
  height: 1em;
  vertical-align: -0.125em; /* 本家の多くが採用している基準値 */
  flex-shrink: 0;
  contain: layout; /* ブラウザの計算負荷を軽減 */
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  min-height: 1em; /* 高さが計算されるまで「0」にならないようにする */
  line-height: 1; /* 文字との親和性を向上 */
  overflow: hidden; /* 中身がはみ出してレイアウトを壊すのを防ぐ */
}

.icon-svg svg,
.icon-wrap svg,
svg.custom-icon {
  width: 100%;
  height: 100%;
  fill: currentColor; /* 文字色と同じ色にする */
  display: block;
}

/* 2. 本家互換：サイズ指定 */
.is-1x { font-size: 1em; }
.is-2x { font-size: 2em; }
.is-3x { font-size: 3em; }
.is-4x { font-size: 4em; }
.is-5x { font-size: 5em; }
.is-6x { font-size: 6em; }
.is-7x { font-size: 7em; }
.is-8x { font-size: 8em; }
.is-9x { font-size: 9em; }
.is-10x { font-size: 10em; }

/* 3. 本家互換：微調整サイズ */
.is-2xs { font-size: .625em; line-height: .1em; vertical-align: .225em; }
.is-xs { font-size: .75em; line-height: .08333em; vertical-align: .125em; }
.is-sm { font-size: .875em; line-height: .07143em; vertical-align: .05357em; }
.is-lg { font-size: 1.25em; line-height: .05em; vertical-align: -.075em; }
.is-xl { font-size: 1.5em; line-height: .04167em; vertical-align: -.125em; }
.is-2xl { font-size: 2em; line-height: .03125em; vertical-align: -.1875em; }

/* 4. 固定幅（リスト等でアイコンの幅を揃えたい時用） */
.is-fw { text-align: center; width: 1.25em; }

/*独自カラー＆コンポーネントクラス */
.text-corporate { color: var(--color-corporate) !important; }
.bg-corporate { background-color: var(--color-corporate) !important; color: #fff !important; }
.btn-outline-corporate { color: var(--color-corporate); border-color: var(--color-corporate); }
.btn-outline-corporate:hover { background-color: var(--color-corporate); color: #fff; }

.btn-entry { background-color: var(--color-entry); color: #fff; border-color: var(--color-entry); }
.btn-entry:hover { background-color: #c23b32; color: #fff; }

.text-elementary { color: var(--color-elementary) !important; }
.bg-elementary { background-color: var(--color-elementary) !important; color: #fff !important; }
.border-elementary { border-color: var(--color-elementary) !important; }
.btn-outline-elementary { color: var(--color-elementary); border-color: var(--color-elementary); }
.btn-outline-elementary:hover { background-color: var(--color-elementary); color: #fff; }

.text-juniorhigh { color: var(--color-juniorhigh) !important; }
.bg-juniorhigh { background-color: var(--color-juniorhigh) !important; color: #fff !important; }
.border-juniorhigh { border-color: var(--color-juniorhigh) !important; }
.btn-outline-juniorhigh { color: var(--color-juniorhigh); border-color: var(--color-juniorhigh); }
.btn-outline-juniorhigh:hover { background-color: var(--color-juniorhigh); color: #fff; }

/*レイアウト＆装飾 */

/* タイムライン */
.timeline {
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  width: 2px;
  background-color: var(--color-corporate);
}
@media (min-width: 768px) {
  .timeline::before {
    left: 23px;
  }
}
.timeline-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
  z-index: 1;
}
@media (min-width: 768px) {
  .timeline-badge {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
}

/* カード全域ホバー */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }

/* PC用 右側フローティングバナー */
.float-banner-pc { position: fixed; right: -5px; top: 50%; transform: translateY(-50%); z-index: 1020; }
.float-banner-pc a { transition: transform 0.2s ease-in-out; box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.15) !important; font-size: 1.1em; }
.float-banner-pc a:hover { transform: translateX(-5px); }
.vertical-text { writing-mode: vertical-rl; letter-spacing: 0.15em; }

/* PC用 右下 ページトップボタン */
.btn-pagetop-pc { width: 48px; height: 48px; z-index: 1020; }

/* スマホ用 画面下部固定バー */
.float-banner-sp { z-index: 1030; }

/* ユーティリティ */
.tracking-widest { letter-spacing: 0.15em; }
.filter-white { filter: brightness(0) invert(1); }

/* モバイルの固定バー被り防止余白 */
@media (max-width: 991.98px) {
  body { padding-bottom: 60px; }
}