@charset "utf-8";
/* ==================================================
grobal
================================================== */
:root {
  /* ----- 色系 ----- */
  --defColor: #333;
  --mainColor: #023B85;
  --subColor: #FF995A;
  --colorRed: #C50018;
  --colorLightRed: #FFEFEF;
  --colorPaleRed: #F4B5BC; /* 淡い赤 */
  --colorAlert: #B1001B; /* 注意喚起系 */
  --colorBlue: #023B85;
  --colorLightBlue: #F0F6FF;
  --colorPaleBlue: #A9C0E0; /* 淡い青 */
  --colorGreen: #008550;
  --colorLightGreen: #E6FFF7;
  --colorGray: #BEBEBE;
  --colorLightGray: #F7F7F7;
  --colorDisabled: #757575;
  --colorOrange: #FF995A;
  --gradation01: linear-gradient(#1eb581 0%, #107c6a 100%);
  /* ----- 文字系 ----- */
  --defFontFamily: "Noto Sans JP", sans-serif;
  --defFontWeight: 500;
  --defLetterSpacing: .05em;
  --defLineHeight: 1.7;
  /* ----- アニメーション系 ----- */
  --hoverOpac: .7;
  --defTrans: .3s ease;
  --transOpac: opacity .3s ease;
  --transColor: color .3s ease;
  --transBg: background-color .3s ease;
  --transVisible: opacity .3s ease, visibility .3s ease;
}


/* ==================================================
プレースホルダー
================================================== */
::placeholder,
select:has(option[value=""]:checked) {
  color: color-mix(in srgb, var(--defColor) 50%, transparent);
}


/* ==================================================
アクセシビリティ用：視覚的に非表示、スクリーンリーダーには読み上げられる
================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==================================================
本文へスキップ：通常は画面外、キーボードフォーカス時のみ表示
================================================== */
.skipToMain {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 99999;
  padding: 12px 20px;
  background: var(--mainColor, #023B85);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
  transition: top 0.2s ease;
}
.skipToMain:focus,
.skipToMain:focus-visible {
  top: 0;
  outline: 3px solid #ffaf00;
  outline-offset: -4px;
}

/* アンカースクロール先（JSが tabindex="-1" を付与してフォーカスを移す非操作要素＝セクション等）
   フォーカス枠は不要なため非表示にする。tabindex="-1" はキーボードのTab順には含まれないため、
   操作可能なリンク・ボタン等のフォーカス表示には影響しない。
   ※アンカーリンクの実クリック時、ブラウザによっては :focus-visible 扱いになり枠が出るため、:focus 全体で抑制 */
[tabindex="-1"]:focus {
  outline: none;
}