/* =========================================
   活動実績 詳細（スポーツ版）
   file: assets/css/active1.css
   トーン: NAVY × SKY、やさしいスポーツ感
========================================= */

/* Theme tokens */
:root{
  --bg: #f6f8fb;           /* やさしい薄グレー */
  --ink: #1e2a3a;          /* 読みやすい濃紺 */
  --muted: #5c6a7d;
  --primary: #2b6de8;      /* スカイ～ロイヤルの中間 */
  --accent: #8fd0ff;       /* やわらかいアクセント */
  --card: #ffffff;
  --shadow: 0 8px 28px rgba(8,20,53,.08);
  --radius-lg: 18px;
  --radius-sm: 12px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1400px 800px at -10% -10%, rgba(43,109,232,.06), transparent 60%),
    radial-gradient(1200px 700px at 110% 0%, rgba(143,208,255,.10), transparent 55%),
    var(--bg);
  font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",system-ui,-apple-system,sans-serif;
  line-height:1.85;
  letter-spacing:.02em;
}

/* Container (カード) */
.container{
  max-width: 980px;
  margin: clamp(18px,3vw,32px) auto 80px;
  padding: clamp(22px,3.4vw,36px);
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* スポーツ感の“対角ライン”を超薄く（優しい印象を壊さない程度に） */
.container::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    linear-gradient(135deg, rgba(43,109,232,.06) 0 25%, transparent 25% 50%, rgba(143,208,255,.06) 50% 75%, transparent 75% 100%);
  background-size: 22px 22px;
  opacity:.35;
  pointer-events:none;
  mix-blend-mode: multiply;
}

/* Heading */
h1{
  margin:0 0 20px;
  font-size: clamp(26px,3.2vw,38px);
  font-weight: 800;
  text-align: center;
  color: var(--ink);
  letter-spacing:.06em;
  line-height:1.2;
}
h1::after{
  content:"";
  display:block;
  width:120px; height:10px;
  margin:12px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity:.5;
}

/* Copy */
.text-block{ margin: 18px 0 28px; }
.text-block p{ margin: 0 0 1em; font-size: clamp(15px,1.6vw,17px); color:var(--ink); }
.text-block em{ font-style: normal; color: var(--primary); font-weight: 700; }

/* Media */
.image{ margin: 16px 0; }
.image img{
  width:100%; display:block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  outline: 2px solid rgba(43,109,232,.08);
}

/* PCで左右レイアウト（スマホは縦積み） */
@media (min-width: 820px){
  .image.left,.image.right{ max-width: 48%; }
  .image.left{ float:left;  margin:8px 28px 14px 0; }
  .image.right{ float:right; margin:8px 0 14px 28px; }
  .text-block::after{ content:""; display:block; clear:both; }
}

/* 戻るボタン（やさしいCTA） */
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  margin: 8px auto 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.08), inset 0 0 0 1px rgba(43,109,232,.25);
  transition: transform .12s ease, box-shadow .2s ease;
}
.back-link::before{ content:"←"; font-weight: 800; }
.back-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(43,109,232,.35);
  text-decoration:none;
}

/* 小さい画面 */
@media (max-width: 480px){
  .container{ padding:18px; }
  .back-link{ width:100%; justify-content:center; }
}

/* アクセシビリティ & 微調整 */
::selection{ background: rgba(43,109,232,.20); }
@media (prefers-reduced-motion:no-preference){
  .container{ animation: fadeUp .32s ease both; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
}