/* =========================
   変数（テーマカラー等）
   ========================= */
:root {
  --color-bg-cream: #fff4d6;
  --color-primary: #ff7f2a;
  --color-btn-gray-bg: #e5e5e5;
  --color-btn-gray-text: #333;
  --color-btn-danger-bg: #ff2a2a;
  --color-btn-danger-text: #fff;
  --radius-card: 24px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  font-size: 100% !important;
}

/* =========================
   ロゴ
   ========================= */
#KC601500_logo_area {
  text-align: center !important;
}
.KC601500_logo {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* =========================
   コンテナ
   ========================= */
.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    padding: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    padding: var(--space-5);
  }
}

/* =========================
   セクション
   ========================= */
.section {
  text-align: left;
  margin-bottom: 30px;
}
.section p {
  margin: 0 0 1em;
  line-height: 1.8;
}

/* =========================
   見出しバー
   ========================= */
.heading-bar {
  position: relative;
  padding-left: 1rem;
  display: inline-block;
}
.heading-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6ch;
  height: 1.2em;
  background: red;
}

/* =========================
   手続きフロー
   ========================= */
.flow-section {
  width: 100%;
  margin-bottom: 30px;
}

@media (max-width: 480px) {
.flow-section {
   width: 100%;
   margin-bottom: 20px; /* モバイルは少し詰める */
  }
}

@media (min-width: 1024px) {
.flow-section {
   width: 100%;
   margin-bottom: 40px; /* デスクトップは広め */
  }
}


/* コンテナ変数（すべて % で一元管理） */
.procedure-flow {
  /* 丸カードの幅（%） */
  --card-width: 8%;

  /* コネクタの最小幅（%）— 画面が極端に狭い時の下限 */
  --connector-min: 6%;

  /* 丸カードの枠線の太さ（食い込み補正に利用） */
  --card-border: 2px;

  display: flex;
  flex-wrap: nowrap;              /* ← 折返しを防ぐ */
  align-items: center;            /* 垂直中央 */
  justify-content: center;        /* 全体中央 */
  gap: 0;                         /* 均等間隔は connector に集約するので gap は 0 */
  padding: 24px 28px;
  box-sizing: border-box;
  background-color: #fff3d6;
  text-align: center;
}

/* 丸カード（正円＋割合スケール） */
.flow-card {
  position: relative;
  overflow: visible;              /* 食い込み時に隠れない */
  flex: 0 0 var(--card-width);    /* ← 幅は%固定（縮尺連動） */
  max-width: var(--card-width);
  aspect-ratio: 1 / 1;            /* 正円維持（高さも連動） */
  border-radius: 50%;
  background: #fff;
  border: var(--card-border) solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 24px); /* 読みやすさ優先の流体文字サイズ */
  box-sizing: border-box;
  background-color: #E5DBBD;
  border-color: #E5DBBD;
  color: #FFFFFF;
}

/* オレンジ色の丸カード */
.flow-card.selected-flow-card {
  background-color: orange;
  color: #fff;
  border-color: orange;
}

/* コネクタ（間隔を“均等”に、%で縮む） */
.connector {
  /* 余ったスペースを“均等配分”する：各コネクタに同じ比率で割り当てられる */
  flex: 1 1 0%;
  min-width: var(--connector-min); /* 極小画面でも最低%は確保 */

  height: 0.5em;                  /* 太さは文字高さ基準で適度に */
  background: #E5DBBD;
  border-radius: 2px;

  /* 枠線ぶんだけ食い込ませて“接続”に見せる（過剰にしない） */
  /* -2px 程度で十分。さらに密着させたいなら -3px 〜 -4px を検討 */
  margin-inline: calc(var(--card-border) * -1);
}

/* レスポンシブ調整 */
/* スマホ（狭い画面）：カードを少し大きく、最小間隔を少し狭める */
@media (max-width: 560px) {
  .procedure-flow {
    --card-width: 14%;     /* 4枚の丸カード分の幅が増える */
    --connector-min: 5%;   /* 最低限のコネクタ幅も%で保証 */
    /* 余白は connector が flex:1 で“均等に”配分される */
  }
}

/* タブレット：標準 */
@media (min-width: 561px) and (max-width: 1023px) {
  .procedure-flow {
    --card-width: 12%;
    --connector-min: 6%;
  }
}
/* =========================
   フォーム部品
   ========================= */
.title-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.required-badge {
  padding: 2px 8px;
  font-size: .85rem;
  color: #fff;
  background: #d32f2f;
  border-radius: 4px;
  font-weight: bold;
}
.optional-badge {
  padding: 2px 8px;
  font-size: .85rem;
  background: #fff4d6;
  border-radius: 4px;
  font-weight: bold;
}

.flexdisp {
  display: flex;
}
.inputarea_20per {
  width: 20%;
  padding: 0.75rem 1rem 0.75rem 0rem;
}

.inputarea_30per {
  width: 30%;
  padding: 0.75rem 1rem;
}

.inputarea_60per {
  width: 60%;
  padding: 0.75rem 1rem;
}
.hyphen {
  text-align: center;
  padding: .75rem .25rem;
}
.error-message {
  margin-top:20px;
  font-weight:bold;
  font-size:16px;
  color: #d93025;
}

/* =========================
   テキスト入力
   ========================= */
input[type="text"] {
  width: 100%;
  padding: .75rem 1rem;
  background-color: #fff4d6;
  border: 2px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px;
}
input[type="text"]::placeholder {
  font-size: 16px;
}


/* =========================
   ボタン
   ========================= */
.btn100width {
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(1rem, 3.0vw, 1.0rem);  /* 16〜20px */
  font-weight: 600;
  padding: 1rem 1.25rem;                   /* 16px/20px相当 */
  border: none;
  border-radius: 0.75rem;                  /* 12px相当 */
  margin-top: 1rem;                        /* 16px相当 */
  cursor: pointer;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    background-color 200ms ease,
    color 200ms ease;
  min-height: min(56px, 14vw);             /* タップ領域を確保 */
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.10); /* 2px,8px相当 */
}
.btn-red {
  background: var(--color-btn-danger-bg);
  color: var(--color-btn-danger-text);
}
.btn-gray {
  background: var(--color-btn-gray-bg);
  color: var(--color-btn-gray-text);
}

/* =========================
   モーダル
   ========================= */
.modal {
  display: none; /* 初期非表示 */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
}
.modal-content {
  margin: 10vh auto;
  max-width: 720px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
}
.modal-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================
   フッター
   ========================= */
#KC610_footer_area {
  font-size: 12px;
  background: #F7F7F7;
}
.KC610_copyright {
  text-align: center;
  font-size: 11px;
  background: #eee;
}
.KC610_approvalFont {
  text-align: right;
  font-size: 11px;
}

/* =========================
   補助
   ========================= */
.unstyled-list {
  list-style: none;
  padding-left: 0;
}
.text-red {
  color: red;
}
.text-bold {
  font-weight: bold;
}

@media (max-width: 768px) {
  
  li {
    font-size: 12px;
  }
  
  .postal-phone-title {
    font-size: 21px;
  }

  /* 証券番号 */
  .flexdisp--skno {
    flex-direction: column;
  }
  .flexdisp--skno .inputarea_20per,
  .flexdisp--skno .inputarea_60per {
    width: 100%;
    padding: 0;
  }
  .flexdisp--skno .hyphen {
    display: none;
  }

  /* 郵便番号 */
  .flexdisp--postalno {
    flex-direction: column;
  }
  .flexdisp--postalno .inputarea_20per,
  .flexdisp--postalno .inputarea_30per {
    width: 100%;
    padding: 0;
  }
  .flexdisp--postalno .hyphen {
    display: none;
  }

  /* 自宅電話番号 */
  .flexdisp--homePhoneNumber {
    flex-direction: column;
  }
  .flexdisp--homePhoneNumber .inputarea_20per,
  .flexdisp--homePhoneNumber .inputarea_30per {
    width: 100%;
    padding: 0;
  }
  .flexdisp--homePhoneNumber .hyphen {
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
  }
  
  /* 携帯電話番号 */
  .flexdisp--phoneNumber {
    flex-direction: column;
  }
  .flexdisp--phoneNumber .inputarea_20per,
  .flexdisp--phoneNumber .inputarea_30per {
    width: 100%;
    padding: 0;
  }
  .flexdisp--phoneNumber .hyphen {
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
  }
}