:root {
  --login-primary-dark: #0A2463;
  --login-primary: #1E5FAD;
  --login-primary-pale: #EBF3FC;
  --login-accent: #FF6800;
  --login-bg-light: #F7F9FC;
  --login-border: #D4DCE8;
  --login-text: #1A1A2E;
  --login-font: var(--ta-font-family-ja, "Noto Sans JP", sans-serif);
}

body.login-page {
  background: #fff;
  color: var(--login-text);
  font-family: var(--login-font);
  margin: 0;
  overflow-x: clip;
}

.login-page *,
.login-page *::before,
.login-page *::after {
  box-sizing: border-box;
}

.login-page a {
  color: inherit;
  text-decoration: none;
}

.login-main {
  background: #fff;
  padding-top: 0;
}

body.login-page .ta-hero {
  min-height: unset;
  height: 140px;
}

.login-update-banner {
  /* hero 下余白 40px。banner→login-panels の 40px は login-panels の padding-top で確保 */
  padding: 40px 20px 0;
}

.login-update-banner__inner {
  margin: 0 auto;
  max-width: 1000px;
}

.login-update-banner__link {
  display: block;
  transition: opacity 0.2s ease;
}

.login-update-banner__link:hover {
  opacity: 0.88;
}

.login-update-banner__image {
  display: block;
  width: 100%;
  height: auto;
}

.login-panels {
  /* hero 直下セクション: hero 下余白 40px（旧 login-notice-section 撤去分を補填） */
  padding: 40px 20px 80px;
}

.login-panels__inner {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;
  row-gap: 20px;
  margin: 0 auto;
  max-width: 1000px;
}

.login-panel-group {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.login-card--triauto {
  grid-column: 2;
  grid-row: 1;
}

.login-support-links {
  grid-column: 1;
  grid-row: 2;
}

.login-card {
  background: #fff;
  border: 1px solid var(--login-border);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
}

.login-panel-group > .login-card {
  height: 100%;
}

.login-card--mypage {
  min-height: 529px;
}

.login-card--triauto {
  min-height: 529px;
}

.login-card__header {
  align-items: center;
  background: var(--login-primary-pale);
  display: flex;
  height: 92px;
  justify-content: center;
  padding: 0 20px;
}

.login-card__header--stacked {
  flex-direction: column;
  gap: 0;
  /* 枠の高さを Myページ header (.login-card__header 92px) と揃える。
     2行(28px + 20px, 行高1.7 ≈ 82px)でも収まるため安全。 */
  height: 92px;
}

.login-card__title {
  color: var(--login-primary-dark);
  font: 700 28px/1.7 var(--login-font);
  letter-spacing: 1px;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.login-card__subtitle {
  color: var(--login-primary-dark);
  font: 700 20px/1.7 var(--login-font);
  letter-spacing: 1px;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.login-card__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 20px;
}

.login-card__body--triauto {
  min-height: 430px;
}

.login-card__primary {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 394px;
  width: 100%;
}

.login-card__lead {
  color: var(--login-text);
  font: 500 16px/1.7 var(--login-font);
  letter-spacing: 1px;
  margin: 0;
  width: 100%;
}

.login-card--mypage .login-card__lead {
  max-width: 299px;
  width: 100%;
}

.login-card--triauto .login-card__lead,
.login-card--triauto .login-card__app-note,
.login-card--triauto .login-app-links {
  max-width: 321px;
  width: 100%;
}

.login-button {
  align-items: flex-start;
  background: var(--login-accent);
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2);
  color: #fff;
  display: inline-flex;
  font: 700 20px/1.7 var(--login-font);
  gap: 16px;
  justify-content: center;
  letter-spacing: 1px;
  min-width: min(100%, 290px);
  padding: 18px 40px;
  white-space: nowrap;
}

body.login-page .login-button,
body.login-page .login-button span {
  color: #fff;
}

.login-button__arrow {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  transform: translateY(-1px);
}

.login-feature-list {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  max-width: 300px;
  padding: 0;
  width: 100%;
}

.login-feature-list li {
  align-items: center;
  color: var(--login-text);
  display: inline-flex;
  font: 500 16px/1.7 var(--login-font);
  gap: 8px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.login-feature-list li::before {
  background: var(--login-text);
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.login-support-links,
.login-app-links {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-text-link {
  align-items: center;
  border-bottom: 1px solid var(--login-primary);
  color: var(--login-primary);
  display: inline-flex;
  /* 【特別対応】text_link(ta-link)デザインは共通 PC 20px だが、/login のみ PC も 16px
     （2026-07-08 ユーザー指定。SP は従来どおり 16px） */
  font: 700 16px/1.7 var(--login-font);
  gap: 16px;
  letter-spacing: 1px;
  white-space: nowrap;
}

body.login-page .login-text-link,
body.login-page .login-text-link span {
  color: var(--login-primary);
}

.login-text-link span {
  font-size: 16px;
  font-weight: 500;
}

.login-text-link--external span {
  border: 2px solid currentColor;
  display: inline-block;
  height: 16px;
  position: relative;
  width: 16px;
}

.login-text-link--external span::before {
  background: #fff;
  content: "";
  height: 8px;
  position: absolute;
  right: -3px;
  top: -3px;
  width: 8px;
}

.login-text-link--external span::after {
  content: "↗";
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  right: -6px;
  top: -8px;
}

.login-card__app-note {
  color: var(--login-text);
  font: var(--ta-ja-pc-body-medium, 500 16px/1.7 var(--login-font));
  letter-spacing: 1px;
  margin: 0;
  text-align: start;
  white-space: normal;
}

/* Login page: PC header until 480px (override app.css 769px breakpoint) */
@media (min-width: 481px) {
  body.login-page .header-for-triauto .navigation .header__nav--icon {
    display: none;
  }

  body.login-page .header-for-triauto .navigation .nav-frame {
    padding: 0;
    gap: 24px;
  }

  body.login-page .header-for-triauto .navigation .nav-logo img {
    height: 26px;
  }
}

@media (max-width: 480px) {
  body.login-page {
    overflow-x: hidden;
  }

  body.login-page .ta-hero {
    min-height: unset;
    height: 113px;
  }

  .login-panels {
    /* SP: banner 下余白 20px / 最終セクション下 40px */
    padding: 20px 20px 40px;
  }

  .login-panels__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 100%;
  }

  .login-panel-group,
  .login-card {
    width: min(100%, 350px);
  }

  .login-card--mypage {
    min-height: 484px;
  }

  .login-card--triauto {
    /* SP: PC向けリード文＋ログインボタン非表示に伴い、内容に合わせて高さ自動化（ユーザー指定 2026-07-07） */
    min-height: auto;
  }

  .login-card__header,
  .login-card__header--stacked {
    height: auto;
    min-height: 98px;
    padding: 20px;
  }

  .login-card__title {
    font: var(--ta-ja-sp-h2-bold, 700 24px/1.7 var(--login-font));
  }

  .login-card__subtitle {
    font: var(--ta-ja-sp-h3-bold, 700 18px/1.7 var(--login-font));
  }

  .login-card__body,
  .login-card__body--triauto {
    min-height: 0;
    padding: 20px 25px;
  }

  .login-card__primary {
    gap: 32px;
  }

  /* SP: トライオートカードは PC 向けリード文「PCブラウザ環境で…」＋「トライオートログイン」ボタンを隠し、
     アプリ導線（app-note / app-links）のみ残す（ユーザー指定 2026-07-07） */
  .login-card--triauto .login-card__primary {
    display: none;
  }

  .login-card__lead {
    font: var(--ta-ja-sp-body-medium, 500 16px/1.7 var(--login-font));
  }

  .login-card--mypage .login-card__lead,
  .login-card--triauto .login-card__lead,
  .login-card--triauto .login-card__app-note,
  .login-card--triauto .login-app-links {
    width: 100%;
  }

  .login-button {
    font-size: 18px;
    min-width: 0;
    padding: 18px 40px;
    width: min(100%, 300px);
  }

  .login-feature-list {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .login-feature-list li {
    white-space: normal;
  }

  .login-support-links,
  .login-app-links {
    width: 100%;
  }

  .login-text-link {
    font-size: 16px; /* リンク系は16px (ユーザー指定 2026-07-06: 15px→16px) */
    line-height: normal;
    max-width: 100%;
    white-space: nowrap;
  }

  .login-app-links .login-text-link {
    font-size: 16px; /* リンク系は16px (ユーザー指定 2026-07-06: 15px→16px) */
    gap: 6px;
    line-height: 1.7;
  }

  .login-app-links .login-text-link--external span {
    /* flex行で潰れないようにするだけ。箱サイズ・ノッチ・↗矢印はPC共通ルール
       （16px箱の角から飛び出す標準アイコン）を継承。
       旧SP上書きは overflow:hidden で矢印が四角内にクリップされ気持ち悪かったため撤去（2026-07-07） */
    flex: 0 0 auto;
  }

  .login-card__app-note {
    white-space: normal;
  }
}