@charset "UTF-8";

/* ============================================================================
 * common.css — 全ページ共通ベース
 * ============================================================================
 *
 * 設計方針：
 *   - 全37ページが読み込む「共通基盤」として、最小限のスタイルに絞る
 *   - 各ページ固有のスタイルは個別CSS（mailform.css / confirm.css 等）に集約
 *   - HTML構造（class / id）は一切変更しない（PHP不可侵）
 *
 * 含むもの（共通であるべきもの）：
 *   1. デザイントークン（CSS変数）
 *   2. Webフォント import
 *   3. body / リセット
 *   4. Bootstrap btn-primary 上書き
 *   5. ヘッダー（.header / .container-fluid / h1）
 *   6. ステップバー（.step-bar / .step）— 登録フロー全ページで共通
 *   7. h2（カードヘッダー型）— 全ページ共通
 *   8. .req / .opt バッジ
 *   9. フッター
 *  10. ローディングモーダル
 *
 * 含まないもの（個別CSSに任せる）：
 *   - フォーム dl/dt/dd の grid化（→ mailform.css / confirm.css 等）
 *   - .form-section-heading / .pay_info_wrap / pay-table 等（→ mailform.css / payment.css）
 *   - .container の max-width / margin 設定（→ 各ページCSSで個別）
 *
 * ============================================================================ */

/* ── Webフォント ─────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Shippori+Mincho:wght@400;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css");

/* ============================================================================
 * 1. デザイントークン
 * ============================================================================ */
:root {
  /* メインカラー（ekonpas 公式青 + 派生色） */
  --primary:        #0C73B2;
  --primary-light:  #1a8acd;
  --primary-dark:   #08527e;
  --primary-pale:   #e3f1f9;

  /* アクセント（ティール） */
  --accent:         #26a69a;
  --accent-light:   #d3ede9;
  --accent-dark:    #1d8079;

  /* ステップ完了表示用 */
  --step-done:      #6bb1d8;

  /* テキスト */
  --text-color:     #1c1c2e;
  --text-muted:     #5a6070;

  /* レイアウト */
  --border-color:   #d0d8e4;
  --border-pale:    #d8dfe9;
  --bg-color:       #fcfdfe;
  --bg-soft:        #fafbfd;
  --white:          #ffffff;

  /* ラベル領域（フィールドラベル等の薄背景）— 配色案B：ライトグレー基調 */
  --label-bg:       #eef1f6;  /* dt / field-label の背景（軽めクールグレー、ふんわり。body #fcfdfe と明度差 -14/-12/-8、active 水色 #e3f1f9 と色相分離） */
  --label-color:    #4a5260;  /* dt / field-label の文字 */

  /* ステータス色 */
  --error:          #c0392b;
  --error-pale:     #fff5f5;
  --success:        #2a7a4f;
  --success-pale:   #eaf5ee;
  --warning:        #b87a0e;
  --warning-pale:   #fff8e6;

  /* 影 */
  --shadow-card:    0 2px 16px rgba(12, 115, 178, 0.10);
  --shadow-btn:     0 4px 18px rgba(12, 115, 178, 0.28);
  --shadow-btn-hv:  0 6px 24px rgba(12, 115, 178, 0.38);

  /* 形状 */
  --radius:         6px;
  --radius-lg:      8px;

  /* 共通 UX ルール */
  --footer-gap:     30vh;
}

/* ============================================================================
 * 2. body / リセット
 * ============================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  /* 横スクロール抑止（要素が画面外にはみ出す場合の保険） */
  overflow-x: hidden;
}

body {
  font-family: YakuHanJP, "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", "Yu Gothic", YuGothic, "メイリオ", meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-color);
  background: var(--bg-color);
  margin: 0;
  padding: 0;
  /* 旧 border-top: 3px #00529f は削除（ヘッダー自体を紺背景化したため不要） */
}

/* ── HTMLタグの基本リセット ── */
dl, dt, dd,
ul, ol, li,
table,
h1, h2, h3, h4, h5, h6,
p,
form, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol, li {
  list-style: none;
}

/* ============================================================================
 * 3. Bootstrap btn-primary 上書き
 * ============================================================================ */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* ============================================================================
 * 4. ヘッダー（全ページ共通）
 *
 * 既存HTML構造（2パターン）：
 *   ① シンプル: <header><div class="container-fluid"><h1>...</h1></div></header>
 *   ② マイページ: <header><div class="container-fluid d-flex justify-content-between
 *                  align-items-center"><h1>...</h1><button class="mobile-menu-btn">...</button></div></header>
 *
 * Bootstrap の d-flex / justify-content-between / align-items-center が !important で
 * 効くため、マイページ側は自動的にハンバーガーボタンが右に配置される。
 * ============================================================================ */
header {
  background: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

header .container-fluid {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 24px 14px;
  display: flex;
  align-items: center;
}

h1 {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(0.85rem, 0.75rem + 0.45vw, 1rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  letter-spacing: 0.02em;
}

h1 span {
  display: inline-block;
}

@media (max-width: 767px) {
  header .container-fluid {
    padding: 14px 16px 12px;
  }
}

/* ============================================================================
 * 5. ステップバー
 *
 * 既存HTML構造：
 *   <div class="step-bar">
 *     <div class="step active">項目入力</div>
 *     <div class="step">内容確認</div>
 *     <div class="step">お支払い</div>
 *     <div class="step">登録完了</div>
 *   </div>
 *
 * 新デザイン仕様：
 *   - 全幅の白い帯（背景色 #fff、border-bottom 1px）
 *   - 中央に max-width 900px のコンテナ
 *   - 各ステップ：番号バッジ + ラベル
 *   - アクティブ：紺色テキスト、紺色 border-bottom 3px、太字
 *   - ステップ間：縦の細い区切り線
 *   - 番号は CSS counter で生成（HTMLに数字要素が無いため）
 *
 * 既存の .step-bar は <div class="container"> の中にあるため、ネガティブ
 * マージンで全幅に広げる
 * ============================================================================ */
.step-bar {
  counter-reset: step-counter;
  width: 100%;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.step-bar > .step {
  /* 既存スタイルの opacity / 下線 を打ち消し */
  opacity: 1 !important;
  cursor: default;
  white-space: nowrap;
  /* 内側の中央寄せ */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  position: relative;
  width: auto;
}

/* 番号バッジ（CSS counter） */
.step-bar > .step::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}

/* ステップ間の縦区切り線（2番目以降の left に） */
.step-bar > .step + .step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: var(--border-color);
}

/* アクティブ状態 */
.step-bar > .step.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}
.step-bar > .step.active::before {
  background: var(--primary);
  color: #fff;
}

/* 旧 .step-3, .step-4 は単に flex 配分なので追加処理不要 */
.step-bar > .step-3,
.step-bar > .step-4 {
  flex: 1;
}

/* モバイル */
@media (max-width: 575.98px) {
  .step-bar {
    margin-top: 18px;        /* ヘッダーとの間隔を確保 */
    margin-bottom: 22px;
  }
  .step-bar > .step {
    flex-direction: column;
    gap: 4px;
    padding: 10px 4px;
    font-size: 10px;
    letter-spacing: -0.02em;
  }
  .step-bar > .step::before {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  .step-bar > .step + .step::after {
    height: 18px;
  }
}

/* ============================================================================
 * 6. h2（カードヘッダー型）
 *
 * 既存HTML：<h2>タイトル</h2>
 * 新デザイン：紺背景・白文字・左にティール縦線・Shippori Mincho
 *
 * 既存では h2 の直後に <section class="form-section"> や <article> が続く。
 * h2 を「カードトップ」に、後続要素を「カードボディ」に見せる。
 * ============================================================================ */
h2 {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--primary);
  padding: 16px 28px 16px 44px; /* 左 44px = 縦線分の余白 */
  margin: 24px 0 0;
  font-family: "Shippori Mincho", serif;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -1px 0 0 rgba(255,255,255,0.05);
}

h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  h2 {
    padding: 14px 18px 14px 32px;
    font-size: 0.95rem;
  }
  h2::before {
    left: 18px;
    height: 18px;
  }
}

.hide {
  display: none !important;
}

/* ============================================================================
 * 7. 必須・任意バッジ
 * ============================================================================ */
.req {
  display: inline-block;
  background: var(--error-pale);
  color: var(--error);
  font-size: 0.7em;
  font-weight: 700;
  padding: 2px 7px;
  border: 1px solid var(--error);
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.05em;
  line-height: 1.4;
  vertical-align: middle;
}

.opt {
  display: inline-block;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 0.7em;
  font-weight: 700;
  padding: 2px 7px;
  border: 1px solid var(--primary);
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.05em;
  line-height: 1.4;
  vertical-align: middle;
}

/* ============================================================================
 * 8. アラート＆閉じるボタン
 * ============================================================================ */
.alert_wrap {
  display: flex;
}

.msg_close_btn {
  margin-left: auto;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 24px;
}

.align-center {
  display: flex;
  align-items: center;
}

/* ============================================================================
 * 9. em（金額強調などで使用）
 * ============================================================================ */
em {
  padding-left: 0.15em;
  padding-right: 0.35em;
  font-style: normal;
  color: var(--primary);
  font-weight: 700;
}

/* ============================================================================
 * 10. フッター（全ページ共通）
 * ============================================================================ */
footer {
  background: var(--white);
  text-align: center;
  padding: clamp(0.875rem, 0.8rem + 0.4vw, 1.25rem) 20px;
  margin: 0;
  border-top: 1px solid var(--border-color);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ============================================================================
 * 11. article（既存利用箇所が一部あるため維持）
 * ============================================================================ */
article {
  margin: 0;
  padding: 0;
}

/* ============================================================================
 * 12. ローディングモーダル
 * ============================================================================ */
#modal_loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  z-index: 99999999999999999;
}

#modal_loading .content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  text-align: center;
}

#modal_loading .content .icon img {
  display: block;
  width: 80px;
  height: auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ============================================================================
 * 11. カード輪郭の補強
 *
 *     body 背景が白寄り（#fcfdfe）に振られたため、box-shadow だけでは
 *     カード本体（#ffffff）との境目が弱くなる。全カード系コンポーネントに
 *     1px ボーダーを追加して輪郭を明確化する。
 *
 *     対象：
 *       - mailform 系：form#mail_form section.form-section / .agreement-section
 *       - マイページ系：.info-card / .content-card / .notice-section
 *       - 確認画面：#confirm_field
 *       - 完了/通知：#thanks > section > .thanks-message
 *       - 共通：.contact-area
 * ============================================================================ */
form#mail_form section.form-section,
form#mail_form section.agreement-section,
.info-card,
.content-card,
.notice-section,
#confirm_field,
.contact-area,
#thanks > section > .thanks-message {
  border: 1px solid var(--border-pale);
}

/* 入れ子で二重 border になる組み合わせを除外
   - detail.php：<div class="info-card"><div id="confirm_field">...</div></div>
     外側 .info-card だけに border を残し、内側は無効化 */
.info-card #confirm_field {
  border: none;
}

/* .info-card は内部に <table class="info-table"> を直接含むため、
   角丸＋影＋内部要素の収まりを CSS で完結させる
   （mypage.css に .info-card 単体定義が無いため、ここで補う） */
.info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin: 0 0 16px;
}