/*
  ログイン・新規登録まわりの見た目（T-128・T-129）。
  器・間隔・文字の大きさは**サウナイキタイのログイン画面（/login）の実測値**。
  何を置くか（項目・並び・色）はモック「デザインイメージ_ログイン等画面」と台帳。

  施設ページ（facility-page.css・T-111）と同じで、素の CSS を public に置く。
  クラス名は ap-（auth page）で始める。Tailwind のビルドを通さずに直せるようにするため。

  原本の実測（サウナイキタイ /login・PC）
    カード幅 540 / 内側の左右 80（中身 380）/ ロゴ 140×109・下 40
    タブ 高40・角丸8・選択中 #333 白文字・それ以外 #F8F8F8 #999（どちらも16px太字）
    見出し 16px太字・下 15 / ラベル 12px・下 2
    入力 高52・枠3px #EEE・角丸8・文字16 / プレースホルダ #BBB
    ボタン 高54（白地のものは56・枠1px #DDD）・角丸8・16px太字・アイコン24pxを左16pxに
    ※ Google・LINE とも白地（公式アイコンが色付きのため・T-130）
    ボタン同士の間隔 5 / 新規登録のボタンは高58・枠2px
*/

.ap-wrap { padding: 60px 16px 80px; }

.ap-card {
    width: 540px;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 50px 80px 80px;
    box-sizing: border-box;
}

/* カード上部のロゴ（モックは旧仮称のロゴ。サービス名は「つなぎば」・T-68） */
.ap-logo { display: block; height: 110px; width: auto; margin: 0 auto 40px; }

/* ログイン／新規登録の切り替え */
.ap-tabs { display: flex; height: 40px; border-radius: 8px; overflow: hidden; background: #F8F8F8; }
.ap-tab {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #999; text-decoration: none;
    background: #F8F8F8;
}
.ap-tab.is-current { background: #333; color: #fff; }

.ap-h1 { font-size: 16px; font-weight: 700; margin: 30px 0 15px; }
.ap-h2 { font-size: 16px; font-weight: 700; margin: 0 0 15px; }

.ap-label { display: block; font-size: 12px; color: #111; line-height: 1.6; margin: 0 0 2px; }
.ap-field { margin-bottom: 15px; }

.ap-input {
    display: block; width: 100%; height: 52px;
    border: 3px solid #EEE; border-radius: 8px;
    padding: 0 11px; font-size: 16px; color: #111; background: #fff;
    box-sizing: border-box;
}
.ap-input::placeholder { color: #BBB; }
.ap-input:focus { outline: none; border-color: #C9DFFF; }

.ap-error { font-size: 13px; color: #C8262C; margin: 0 0 10px; }

/* ボタン。アイコンは左16pxに置き、文字はボタンの中央（原本と同じ） */
.ap-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 54px; border-radius: 8px;
    font-size: 16px; font-weight: 700; text-decoration: none;
    border: 0; box-sizing: border-box; cursor: pointer;
}
.ap-btn__icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; object-fit: contain;
}
.ap-btn--primary  { background: #469BFF; color: #fff; }
.ap-btn--google   { background: #fff; color: #333; border: 1px solid #DDD; height: 56px; }
.ap-btn--line     { background: #fff; color: #333; border: 1px solid #DDD; height: 56px; } /* 色付きアイコンが見えるよう白地（T-130） */
.ap-btn--register { background: #fff; color: #469BFF; border: 2px solid #469BFF; height: 58px; margin-top: 60px; }
.ap-btn + .ap-btn { margin-top: 5px; }

.ap-divider { border: 0; border-top: 1px solid #EEE; margin: 30px 0; }

/* スマホ（1024px 未満）。地は白（T-88）。カードの角丸と左右の余白を外す */
@media (max-width: 1023px) {
    .ap-wrap { padding: 24px 16px 40px; }
    .ap-card { width: 100%; border-radius: 0; padding: 0 0 24px; }
    .ap-logo { height: 96px; margin-bottom: 30px; }
    .ap-btn--register { margin-top: 40px; }
}

/* 登録の各ステップで使うもの（T-131） */
.ap-lead { font-size: 14px; line-height: 1.8; color: #333; margin: 0 0 15px; }
.ap-note { font-size: 12px; line-height: 1.8; color: #727171; margin: 15px 0 0; }
.ap-note a { color: #469BFF; text-decoration: underline; }

.ap-select { appearance: none; background-image: none; cursor: pointer; }

.ap-link {
    display: inline-block; margin-top: 15px; padding: 0;
    font-size: 13px; color: #727171; text-decoration: underline;
    background: none; border: 0; cursor: pointer;
}

/* T-307。前に戻る。文字だけ（まわりのリンクと同じ大きさ・同じ色） */
.ap-back { margin: 8px 0 0; }

.ap-choices { display: block; }
.ap-choice {
    display: block; width: 100%; text-align: left;
    background: #fff; border: 1px solid #DDD; border-radius: 8px;
    padding: 14px 16px; cursor: pointer;
}
.ap-choice + .ap-choice { margin-top: 10px; }
.ap-choice:hover { border-color: #469BFF; }
.ap-choice__label { display: block; font-size: 16px; font-weight: 700; color: #111; }
.ap-choice__hint { display: block; font-size: 12px; color: #727171; margin-top: 4px; }

/*
  パスワードの再設定（1-25・T-191）。サウナイキタイ /password/reset の実測（PC 1280px・2026-09-28）
    ロゴ 140×109・下 40（ログインと同じ）/ 見出し「パスワード再設定」26px太字・下 25（.c-headline--lv2）
    ラベル 12px・下 2 / 入力 高52・枠3px #EEE / 入力の下 15
    ボタンは「戻る」（左・#DDD 地・#888 文字）と「送信」（右・青）を横に2つ。各 170×54・間 40・角丸8・16px太字
  ログイン画面のリンク「パスワードを忘れた場合はこちら」：ボタンの下 10・右寄せ・12px・青・下線（原本・モックとも同じ位置）
*/
.ap-reset__h1 { font-size: 26px; font-weight: 700; line-height: 1.4; margin: 0 0 25px; color: #111; }
.ap-reset__buttons { display: flex; gap: 40px; margin-top: 15px; }
.ap-reset__buttons .ap-btn { flex: 1 1 0; margin-top: 0; }
.ap-btn--back { background: #DDD; color: #888; }
.ap-reset__again { font-size: 13px; margin: 0 0 15px; }
.ap-reset__again a { color: #469BFF; text-decoration: underline; }
.ap-status { font-size: 14px; line-height: 1.7; color: #111; background: #EEF6FF; border-radius: 8px; padding: 12px 14px; margin: 0 0 20px; }
.ap-error--field { margin: 6px 0 0; }
.ap-forgot { text-align: right; margin: 10px 0 0; font-size: 12px; line-height: 26px; }
.ap-forgot a { font-size: 12px; color: #469BFF; text-decoration: underline; }

@media (max-width: 1023px) {
    .ap-reset__h1 { font-size: 20px; margin-bottom: 20px; }
    .ap-reset__buttons { gap: 16px; }
}

/* 同意・招待（T-194） */
.ap-list { margin: 0 0 15px; padding-left: 1.2em; font-size: 14px; line-height: 1.8; color: #333; }
.ap-list li + li { margin-top: 4px; }
.ap-copy { font-size: 13px; color: #555; }

/* ── 説明の文字を大きく（2026-09-28・T-195）──
 * 器・入力・ボタン・見出しはサウナイキタイ /login の実測のまま（T-129）。
 * 説明の文（ap-lead・ap-list・ap-status）は原本に相当する物が無く、14px で小さすぎた。本文と同じ 16px、注記は 14px。
 */
.ap-lead, .ap-list, .ap-status { font-size: 16px; line-height: 1.75; }
.ap-note { font-size: 14px; }
.ap-label { font-size: 14px; }
.ap-link { font-size: 14px; }
.ap-error { font-size: 14px; }
@media (max-width: 1023px) {
    .ap-lead, .ap-list, .ap-status { font-size: 15px; }
    .ap-note, .ap-label, .ap-link, .ap-error { font-size: 13px; }
}