@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* ============================
   base.css
   （サイト共通ベース設定）
============================ */

/* フォント設定 */
body {
  font-family: "Noto Sans JP", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; /* 基本文字サイズ */
  line-height: 1.7; /* 日本語はゆったり */
  font-weight: 400;
  color: #333;
  background-color: #fff;
}

/* 見出し（サイズスケール設定） */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.3;
  color: #111;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2rem;
} /* 32px */
h2 {
  font-size: 1.75rem;
} /* 28px */
h3 {
  font-size: 1.5rem;
} /* 24px */
h4 {
  font-size: 1.25rem;
} /* 20px */
h5 {
  font-size: 1.125rem;
} /* 18px */
h6 {
  font-size: 1rem;
} /* 16px */

/* 段落 */
p {
  margin-bottom: 1em;
}

@media (max-width: 879px) {
  /* h1 {
    font-size: 2rem;
  } */
  h2 {
    font-size: inherit;
  }
  /* h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1.125rem;
  }
  h6 {
    font-size: 1rem;
  } */

  p {
    font-size: inherit;
  }
}

/* =========
   Link base
   ========= */

/* ベース */
a {
  transition: opacity 0.3s ease;
}

/* PC等だけ hover フェード */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    opacity: 0.6;
  }

  /* 例外：.no-fade を付けたリンクはフェード無効 */
  a.no-fade:hover {
    opacity: 1;
  }
}

/* タッチ環境は演出オフ */
@media (hover: none) {
  a {
    transition: none;
  }
}

/* 動きを減らす設定の人へ配慮 */
@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}

/* 完全にアニメ自体を切りたい場合（任意） */
a.no-fade {
  transition: none;
}

/* =========
   
   ========= */

/* ボタン（基本リセット） */
button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}

/* 画像 */
img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/* ============================
   Buttons
============================ */

.btn {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border-radius: 4px;
  background-color: #0072ba;
  color: #fff;
  transition: opacity 0.3s ease;
}

.btn:disabled,
.btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* バリエーション */
.btn-outline {
  background-color: transparent;
  border: 1px solid #0072ba;
  color: #0072ba;
  transition: opacity 0.3s ease;
}

.btn-secondary {
  background-color: #555;
  color: #fff;
  transition: opacity 0.3s ease;
}

/* ============================
   Form Elements
============================ */

input,
textarea,
select {
  font: inherit;
  color: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em 0.75em;
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0072ba;
  box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.2);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* ラベル */
label {
  display: inline-block;
  margin-bottom: 0.5em;
  font-weight: 500;
}

/* チェックボックス＆ラジオ */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 0.5em;
}

/* ============================
   Utility Classes
============================ */

/* Text alignment */
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}

/* Font weight */
.font-light {
  font-weight: 300 !important;
}
.font-normal {
  font-weight: 400 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-bold {
  font-weight: 700 !important;
}

/* Display */
.d-block {
  display: block !important;
}
.d-inline {
  display: inline !important;
}
.d-flex {
  display: flex !important;
}

/* Margin utilities */
.m-0 {
  margin: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mt-10 {
  margin-top: 10px !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}

/* Padding utilities */
.p-0 {
  padding: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pt-10 {
  padding-top: 10px !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.pb-20 {
  padding-bottom: 20px !important;
}

/* Text color */
.text-primary {
  color: #0072ba !important;
}
.text-secondary {
  color: #555 !important;
}
.text-danger {
  color: #d70000 !important;
}

/* Background color */
.bg-light {
  background-color: #f5f5f5 !important;
}
.bg-primary {
  background-color: #0072ba !important;
  color: #fff;
}
.bg-dark {
  background-color: #333 !important;
  color: #fff;
}

/* ============================
   Responsive adjustments
============================ */

/* スマホで少し小さめに */
@media (max-width: 480px) {
  body {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* kp-buttons.css — 汎用ボタン（.kp-btn, .kp-btn--brand, .kp-btn--gray, .kp-btn--fixed）
   - 基本=オート幅
   - SP: font-size 14px / 上下 13px / 左右 24px
   - PC: font-size 24px / 上下 15.5px / 左右 72px
   - line-height 1.2（特異性アップで強制）
   - PCホバー：左右paddingで +40px（各+20px）
   - .kp-btn には a:hover の opacity 低下を無効化
*/

:root {
  --brand: #0072ba;
  --gray: #6b7280;

  --btn-radius: 100px;

  --btn-fs-sp: 14px;
  --btn-fs-pc: 24px;

  --btn-py-sp: 13px;
  --btn-py-pc: 15.5px;
  --btn-px-sp: 24px;
  --btn-px-pc: 72px;

  --btn-minw-sp: 184px;

  --btn-w-pc: 240px;
  --btn-hover-grow: 40px;

  --btn-lh: 1.2; /* 追加：行高 */
}

/* ベース（<a>/<button>共通） */
.kp-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  line-height: var(--btn-lh);
  font: inherit;
  color: inherit;

  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;

  border-radius: var(--btn-radius);
}

/* a:hover の不透明度低下を無効化／下線無効 */
a.kp-btn,
a.kp-btn:hover,
a.kp-btn:active,
a.kp-btn:focus,
a.kp-btn:visited {
  text-decoration: none;
}
a.kp-btn:hover,
a.kp-btn:active,
a.kp-btn:focus {
  opacity: 1;
}

/* 色 */
.kp-btn--brand {
  background: var(--brand);
  color: #fff;
}
.kp-btn--gray {
  background: var(--gray);
  color: #fff;
}

/* SP（≤879px）：基本=オート幅 */
.kp-btn--brand,
.kp-btn--gray {
  width: auto;
  min-width: var(--btn-minw-sp);
  padding: var(--btn-py-sp) var(--btn-px-sp);
  font-size: var(--btn-fs-sp);
  font-weight: 700;
}

/* PC（≥880px）：基本=オート幅、ホバーは左右paddingで拡張 */
@media (min-width: 880px) {
  .kp-btn--brand,
  .kp-btn--gray {
    width: auto;
    padding: var(--btn-py-pc) var(--btn-px-pc);
    font-size: var(--btn-fs-pc);
    transition: padding 0.3s ease;
  }
  .kp-btn--brand:hover,
  .kp-btn--gray:hover {
    padding-left: calc(var(--btn-px-pc) + (var(--btn-hover-grow) / 2));
    padding-right: calc(var(--btn-px-pc) + (var(--btn-hover-grow) / 2));
  }
}

/* 固定幅オプション（必要時のみ） */
.kp-btn--fixed {
}

/* 固定幅のPC制御（widthで拡張） */
@media (min-width: 880px) {
  .kp-btn--brand.kp-btn--fixed,
  .kp-btn--gray.kp-btn--fixed {
    width: var(--btn-w-pc);
    transition: width 0.3s ease;
  }
  .kp-btn--brand.kp-btn--fixed:hover,
  .kp-btn--gray.kp-btn--fixed:hover {
    width: calc(var(--btn-w-pc) + var(--btn-hover-grow));
  }
}

/* 無効状態 */
.kp-btn[disabled],
.kp-btn:disabled,
.kp-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* === 行高の最終ガード（特異性アップ & 継承安定化） === */
.kp-btn.kp-btn {
  line-height: var(--btn-lh);
}
.kp-btn > * {
  line-height: inherit;
}

/* ▼もし既存CSSに !important があり、これでも負ける場合のみ下の1行を有効化
.kp-btn{ line-height:var(--btn-lh) !important; }
*/

/* =========================================================
   kp-lead-heading.css — 汎用セクション見出し（縦バー付き／対象限定）
   対象：.kp-lead-heading / .wp-block-heading
   仕様：
     - 上下余白は付けない（margin:0）→ 設置側で都度指定
     - 左の縦バーは要素の実高さ（複数行＋line-height を含む）に自動フィット
     - 文字色は指定しない（継承）
     - h2/h3 等の見出しに付けた場合は元のスタイル（font-size等）を尊重
       非見出し（div等）の場合のみデフォルト 24px/16px を付与
========================================================= */

/* ベース（バー幅・隙間は変数で調整可） */
.kp-lead-heading,
.wp-block-heading {
  position: relative;
  display: block; /* span/div でも安定して高さが出るように */
  --kp-lead-bar-w: 6px;
  --kp-lead-gap: 20px;
  padding-left: calc(var(--kp-lead-bar-w) + var(--kp-lead-gap));
  margin: 0; /* 上下余白はここでは付けない */
  /* color / font-weight は未指定（継承） */
}

/* 非見出し要素に付けたときだけデフォルト文字サイズを与える */
.kp-lead-heading:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.wp-block-heading:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: 24px;
}

/* 左の縦バー：要素の実高さにフィット（複数行＋line-height を含む） */
.kp-lead-heading::before,
.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;          /* 上端 */
  bottom: 0;       /* 下端 → 高さは要素全体に自動フィット */
  width: var(--kp-lead-bar-w);
  background: var(--brand, #0072ba); /* 変数未定義時は #0072ba */
}

/* ===== SP（879px以下） */
@media (max-width: 879px) {
  .kp-lead-heading,
  .wp-block-heading {
    --kp-lead-bar-w: 4px;
    --kp-lead-gap: 12px;
  }
  .kp-lead-heading:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
  .wp-block-heading:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-size: 16px;
  }
}



/* =========================================================
   kp-divider.css — 仕切り線（hr）
   ・クラス名：kp-divider
   ・太さ 2px / solid #D9D9D9
   ・margin: 20px 0 30px
========================================================= */

hr.kp-divider {
  border: none;
  height: 2px;
  background: #d9d9d9;
  margin: 20px 0 30px;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

@media (max-width: 879px) {
  hr.kp-divider {
    height: 1px;
    margin: 14px 0 20px;
  }
}

/* =========================================================
   共通タイトル
========================================================= */
.page-header {
  margin: 100px 0 70px;
  line-height: 1.3;
}

.page-header h1 {
  margin: 0;
}

.info-eyebrow,
.info-title {
  text-align: center;
}

.info-eyebrow {
  color: #0072ba;
  font-size: 20px;
  margin-bottom: 10px;
}

.info-title {
  font-weight: 500;
  font-size: 36px;
}

@media (max-width: 879px) {
  /* 879/880ルール */
  .page-header {
    margin: 48px 0;
  }

  .info-eyebrow {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .info-title {
    font-size: 22px;
  }
}

@media (max-width: 879px) {
  .onsei--detail .onsei-intro h2 strong {
    font-style: 14px !important;
  }

  .onsei--detail p {
    font-style: 12px !important;
  }
}

/* ============================================================
   Utilities — display helpers for responsive visibility
   - br.sp_on : SP時だけ改行（PC時は改行しない）
   - br.pc_on : PC時だけ改行（SP時は改行しない）※必要なら
============================================================ */

/* 既定（PC/タブレット帯） */
br.sp_on { display: none; }
br.pc_on { display: inline; }

/* SP（≤879px）のみ有効 */
@media (max-width: 879px) {
  br.sp_on { display: inline; }
  br.pc_on { display: none; }
}