/* ==========================================================
   きょんの入口ページ スタイル
   コンセプト：「桜が散るデスクトップ」
   ベースは白〜淡いピンクグレーのみ。色はカードの中だけで使う。
   ========================================================== */

:root {
  /* ベース */
  --bg: #FCFAFB;            /* 白〜ごく淡いピンクグレー */
  --text: #3A373B;          /* 本文：濃いグレー */
  --text-soft: #8A8489;     /* 補足テキスト */
  --radius: 12px;           /* カードの角丸（統一） */

  /* ヒーローのアイコン枠 */
  --hero-icon-bg: #FBEAF0;
  --hero-icon-fg: #993556;

  /* Links カード */
  --note-bg: #FBEAF0;      --note-title: #4B1528;    --note-sub: #993556;
  --x-bg: #F1EFE8;         --x-title: #2C2C2A;       --x-sub: #5F5E5A;
  --mag-bg: #FAEEDA;       --mag-title: #412402;     --mag-sub: #854F0B;
  --free-bg: #EAF3DE;      --free-title: #173404;    --free-sub: #3B6D11;

  /* Characters カード */
  --kyown-bg: #FBEAF0;     --kyown-ring: #F4C0D1;    --kyown-title: #4B1528;  --kyown-sub: #993556;
  --mia-bg: #FAEEDA;       --mia-ring: #FAC775;      --mia-title: #412402;    --mia-sub: #854F0B;
  --rain-bg: #EEEDFE;      --rain-ring: #CECBF6;     --rain-title: #26215C;   --rain-sub: #534AB7;
  --shiori-bg: #E6F1FB;    --shiori-ring: #B5D4F4;   --shiori-title: #042C53; --shiori-sub: #185FA5;

  /* Tools カード（無彩色） */
  --tool-bg: #F3F2F3;      --tool-title: #3A373B;    --tool-sub: #7A767B;

  /* フォント */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-heading: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 桜の花びら（背景） ---------- */

.sakura {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;  /* クリックの邪魔をしない（必須） */
  z-index: 0;            /* コンテンツより背面 */
}

.petal {
  position: absolute;
  top: -5vh;
  left: var(--petal-left, 50vw);
  animation: petal-fall var(--fall-duration, 15s) linear var(--fall-delay, 0s) infinite;
  will-change: transform;
}

.petal-sway {
  display: block;
  animation: petal-sway var(--sway-duration, 4s) ease-in-out infinite alternate;
}

.petal-shape {
  display: block;
  width: var(--petal-size, 14px);
  height: calc(var(--petal-size, 14px) * 1.15);
  background: var(--petal-color, #F4C0D1);
  border-radius: 150% 0 150% 0;
  opacity: 0.8;
  animation: petal-spin var(--spin-duration, 6s) linear infinite;
}

@keyframes petal-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(115vh); }
}

@keyframes petal-sway {
  from { transform: translateX(calc(var(--sway-amount, 30px) * -1)); }
  to   { transform: translateX(var(--sway-amount, 30px)); }
}

@keyframes petal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* アクセシビリティ：動きを減らす設定のときは花びらを止める */
@media (prefers-reduced-motion: reduce) {
  .sakura {
    display: none;
  }
  html {
    scroll-behavior: auto;
  }
  .hero-chevron {
    animation: none;
  }
}

/* ---------- レイアウト ---------- */

.page {
  position: relative;
  z-index: 1;  /* 花びらより前面 */
}

.section {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 24px;
}

.section-heading {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 28px;
}

/* ---------- ヒーロー ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  position: relative;
}

.hero-icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--hero-icon-bg);
  color: var(--hero-icon-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 24px;
  overflow: hidden;
}

.hero-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.04em;
}

.hero-id {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-top: 4px;
}

.hero-title {
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--text);
}

.hero-chevron {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-soft);
  animation: chevron-bob 2s ease-in-out infinite;
}

@keyframes chevron-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ---------- About ---------- */

.about-text {
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .pc-only {
    display: none;  /* スマホでは改行位置を自然に任せる */
  }
}

/* ---------- カード共通 ---------- */

.grid {
  display: grid;
  gap: 16px;
}

.grid-links {
  grid-template-columns: repeat(2, 1fr);
}

.grid-characters {
  grid-template-columns: repeat(3, 1fr);
}

.grid-tools {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
  .grid-links,
  .grid-characters,
  .grid-tools {
    grid-template-columns: 1fr;  /* スマホ幅では1カラム */
  }
}

.card {
  display: block;
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
}

.card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-sub {
  font-size: 0.85rem;
  margin-top: 4px;
}

/* ホバーの浮き上がり（hoverがある環境だけ） */
@media (hover: hover) {
  a.card,
  .card-kyown {
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  }
  a.card:hover,
  .card-kyown:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(80, 60, 70, 0.08);  /* ごく淡い影 */
  }
}

/* ---------- Links カード配色 ---------- */

.card-note     { background: var(--note-bg); }
.card-note .card-title { color: var(--note-title); }
.card-note .card-sub   { color: var(--note-sub); }

.card-x        { background: var(--x-bg); }
.card-x .card-title    { color: var(--x-title); }
.card-x .card-sub      { color: var(--x-sub); }

.card-magazine { background: var(--mag-bg); }
.card-magazine .card-title { color: var(--mag-title); }
.card-magazine .card-sub   { color: var(--mag-sub); }

.card-free     { background: var(--free-bg); }
.card-free .card-title { color: var(--free-title); }
.card-free .card-sub   { color: var(--free-sub); }

/* ---------- Characters カード ---------- */

.grid-characters .card {
  text-align: center;
}

.char-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 16px;
  border: 3px solid;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.char-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* きょん：1行目で3カラム分をまたぐ */
.card-kyown  { background: var(--kyown-bg); grid-column: 1 / -1; }
.card-kyown .char-icon   { border-color: var(--kyown-ring); background: var(--kyown-ring); }
.card-kyown .card-title  { color: var(--kyown-title); justify-content: center; }
.card-kyown .card-sub    { color: var(--kyown-sub); }

.card-mia    { background: var(--mia-bg); }
.card-mia .char-icon   { border-color: var(--mia-ring); background: var(--mia-ring); }
.card-mia .card-title  { color: var(--mia-title); justify-content: center; }
.card-mia .card-sub    { color: var(--mia-sub); }

.card-rain   { background: var(--rain-bg); }
.card-rain .char-icon  { border-color: var(--rain-ring); background: var(--rain-ring); }
.card-rain .card-title { color: var(--rain-title); justify-content: center; }
.card-rain .card-sub   { color: var(--rain-sub); }

.card-shiori { background: var(--shiori-bg); }
.card-shiori .char-icon  { border-color: var(--shiori-ring); background: var(--shiori-ring); }
.card-shiori .card-title { color: var(--shiori-title); justify-content: center; }
.card-shiori .card-sub   { color: var(--shiori-sub); }

/* ---------- Tools カード（無彩色） ---------- */

.card-tool { background: var(--tool-bg); }
.card-tool .card-title { color: var(--tool-title); }
.card-tool .card-sub   { color: var(--tool-sub); }

.ext-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

/* ---------- フッター ---------- */

.footer {
  text-align: center;
  padding: 56px 24px 40px;
}

.footer-message {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-top: 16px;
}