/* ==========================================================================
   Kaneka リダイレクトページ スタイル
   シンプル・クリーンなコーポレートデザイン
   ========================================================================== */

:root {
  /* カラートークン（Kanekaコーポレートブルーを基調） */
  --color-primary: #0057a3;
  --color-bg: #f4f6f8;
  --color-card-bg: #ffffff;
  --color-text: #2b2f33;
  --color-text-muted: #6b7580;
  --color-border: #e2e6ea;
  --color-focus: #0057a3;

  /* タイポグラフィ */
  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;

  /* レイアウト */
  --card-radius: 12px;
}

/* リセット・ベース設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

/* ==========================================================================
   カードデザイン
   ========================================================================== */

.redirect-card {
  width: 100%;
  max-width: 480px;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 24px rgba(0, 30, 60, 0.08);
  padding: 48px 40px 40px;
  text-align: center;
}

/* タイトル */
.title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 16px;
}

/* 説明文 */
.description {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}

/* 遷移先URL */
.destination-url {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
  word-break: break-all;
}

.destination-url__label {
  color: var(--color-text-muted);
}

.destination-url a {
  color: var(--color-primary);
  text-decoration: none;
}

.destination-url a:hover,
.destination-url a:focus-visible {
  text-decoration: underline;
}

/* サイト名表記 */
.site-name {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ロゴ */
.logo {
  display: block;
  width: 100px;
  margin: 10px auto 0;
}

/* ==========================================================================
   アクセシビリティ：キーボードフォーカス
   ========================================================================== */

a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 480px) {
  .redirect-card {
    padding: 36px 24px 28px;
  }

  .title {
    font-size: 19px;
  }
}