@charset "utf-8";
/* ==========================================================================
   サイト工房 v10.0｜紹介パートナー制度の追加スタイル
   --------------------------------------------------------------------------
   対象
   - index.html 最下部の紹介制度セクション
   - partner/ 配下の5ページ

   方針
   - v9.2の site.css を土台にし、色・書体・余白・ボタン・罫線をそのまま使います。
     このファイルは site.css のトークン（--ink / --brand / --line など）だけを参照し、
     独自のテーマ色・独自の書体・外部画像・アイコンライブラリを追加しません。
   - site.css の既存クラス（.wrap / .sec / .btn / .field / .input など）を再利用し、
     このファイルには「紹介制度でだけ必要になる差分」だけを置きます。
   - 360pxでも横スクロールが出ないよう、最小幅を持つ要素には min-width: 0 を付けます。
   ========================================================================== */

/* ==========================================================================
   1. トップページ最下部の紹介制度セクション
   --------------------------------------------------------------------------
   既存の「お申し込みはこちらから」（.apply-lead）と同じ中央寄せの見え方に
   そろえます。既存クラスは変更せず、専用クラスで同じ表現を作ります。
   ========================================================================== */
.partner-lead { text-align: center; }
.partner-lead .lead { margin-inline: auto; max-width: 40em; }
.partner-lead .btn-row { justify-content: center; }
@media (min-width: 768px) {
  .partner-lead .btn-row .btn { min-width: 280px; flex: 0 1 auto; }
}

/* ==========================================================================
   2. partner/ 共通
   ========================================================================== */
.partner-body { min-width: 0; }

/* 本文と図版の2段組。1024px未満は1列です。 */
.partner-split {
  margin-top: clamp(18px, 2.4vw, 28px);
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  min-width: 0;
}
@media (min-width: 1024px) {
  .partner-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}
.partner-split > * { min-width: 0; }

/* まるとらの図版。比率を保ち、引き伸ばしません。 */
.partner-figure { justify-self: start; margin: 0; }
@media (min-width: 1024px) {
  .partner-figure { justify-self: end; }
}
.partner-figure img {
  width: 100%;
  max-width: 320px;
  height: auto;
}
@media (min-width: 1024px) {
  .partner-figure img { max-width: 360px; }
}

/* 本文の段落。site.css の .lead と同じ調子でそろえます。 */
.partner-text {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 2;
  max-width: 46em;
}
.partner-text + .partner-text { margin-top: 14px; }

/* 縦に積む動線ボタン。 */
.partner-actions {
  display: grid;
  gap: 12px;
  margin-top: clamp(22px, 2.8vw, 30px);
  max-width: 520px;
}
.partner-actions .btn { width: 100%; }

/* ==========================================================================
   3. ページ3：ログイン
   ========================================================================== */
.partner-login-panel {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding: clamp(20px, 3vw, 34px);
  background: var(--surface);
  border: 1.5px solid var(--ink);
  min-width: 0;
}

/* ログインフォーム付近へ出す固定の失敗文。 */
.partner-alert {
  margin-bottom: clamp(16px, 2.2vw, 22px);
  padding: clamp(14px, 2vw, 20px);
  background: var(--brand-tint);
  border: 1.5px solid var(--brand);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.partner-alert-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand);
}
.partner-alert-title + .partner-alert-text { margin-top: 8px; }
.partner-alert-list {
  margin: 10px 0 0;
  padding-left: 1.2em;
  list-style: disc;
  font-size: 13.5px;
  line-height: 1.9;
}

/* 読み込み中・注意書きなどの控えめな通知。 */
.partner-status {
  margin-top: clamp(16px, 2.2vw, 22px);
  padding: clamp(13px, 1.8vw, 18px);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* ==========================================================================
   4. ページ4：マイページ
   ========================================================================== */
.partner-account {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--surface);
  border: 1.5px solid var(--ink);
  min-width: 0;
}

/* 氏名・登録日。site.css の .deflist と同じ罫線の作りにそろえます。 */
.partner-deflist { border-top: 1px solid var(--line); }
.partner-deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .partner-deflist > div {
    grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
    column-gap: 20px;
    align-items: baseline;
  }
}
.partner-deflist dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.6;
}
.partner-deflist dd {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* 紹介実績の数値。 */
.partner-stats {
  margin-top: clamp(14px, 2vw, 20px);
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
@media (min-width: 768px) {
  .partner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
}
@media (min-width: 1024px) {
  .partner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.partner-stat {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.partner-stat-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-mute);
}
.partner-stat-value {
  margin-top: 4px;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.partner-subhead {
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}

/* 紹介フォームの前置き文。 */
.partner-form-lead {
  margin-top: clamp(16px, 2.2vw, 22px);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* プルダウン。site.css の .input と同じ枠のまま、開閉記号だけ足します。 */
.partner-select { position: relative; display: block; min-width: 0; }
.partner-select select.input { padding-right: 44px; cursor: pointer; }
.partner-select::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink);
  pointer-events: none;
}

/* マイページ下部の補助動線。 */
.partner-tools {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.partner-tools .btn { flex: 1 1 auto; min-width: min(100%, 240px); }

/* ==========================================================================
   5. ページ5：紹介受付完了
   ========================================================================== */
.partner-complete-text {
  margin-top: 16px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 2;
  color: var(--ink-soft);
  max-width: 42em;
}

/* ==========================================================================
   6. 動きの初期状態
   --------------------------------------------------------------------------
   site-motion.js が動かない環境でも文章と画像は表示されたままです。
   ここでは既存の [data-anim] の作法に合わせるだけで、新しい挙動は足しません。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .motion-on .partner-body [data-anim] { opacity: 1 !important; transform: none !important; }
}