/* ----------------------------------------------------
  活動実績 詳細（ヨガ）
  file: assets/css/active2.css
  テーマ: ミント × ローズで柔らかいヨガの雰囲気
---------------------------------------------------- */

/* ===== Theme tokens ===== */
:root{
    --bg: #fffefd;
    --ink: #2a2a2a;
    --muted: #6f6f6f;
    --primary: #66c5b8;   /* ヨガ=ミント */
    --accent: #f4b7c3;    /* 柔らかいローズ */
    --ring: rgba(102,197,184,.25);
    --card: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --radius-lg: 18px;
    --radius-sm: 10px;
  }
  
  /* ===== Base ===== */
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  
  body{
    margin: 0;
    color: var(--ink);
    background:
      radial-gradient(1400px 800px at 10% -10%, rgba(102,197,184,.06), transparent 60%),
      radial-gradient(1200px 700px at 110% 0%, rgba(244,183,195,.08), 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;
  }
  
  /* ===== Layout ===== */
  .container{
    max-width: 980px;
    margin: clamp(18px, 3vw, 32px) auto 72px;
    padding: clamp(18px, 3.5vw, 36px);
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.92));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
  }
  
  /* うっすら曼荼羅の装飾（ヨガっぽさ） */
  .container::before{
    content: "";
    position: absolute;
    inset: -40px -40px auto auto;
    width: 420px; height: 420px;
    opacity: .08;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 68%, rgba(102,197,184,.9) 69% 70%, transparent 71%),
      radial-gradient(circle at 50% 50%, transparent 58%, rgba(244,183,195,.9) 59% 60%, transparent 61%),
      radial-gradient(circle at 50% 50%, transparent 48%, rgba(102,197,184,.9) 49% 50%, transparent 51%),
      radial-gradient(circle at 50% 50%, transparent 38%, rgba(244,183,195,.9) 39% 40%, transparent 41%),
      radial-gradient(circle at 50% 50%, transparent 28%, rgba(102,197,184,.9) 29% 30%, transparent 31%),
      radial-gradient(circle at 50% 50%, transparent 18%, rgba(244,183,195,.9) 19% 20%, transparent 21%);
    filter: blur(.3px);
    border-radius: 50%;
  }
  
  /* ===== Headings ===== */
  h1{
    margin: 0 0 22px;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.25;
    position: relative;
    display: inline-block;
    padding-right: .2em;
  }
  
  /* 見出し下のグラデ下線 */
  h1::after{
    content: "";
    display: block;
    height: 10px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: .35;
  }
  
  /* ===== Text ===== */
  p{
    margin: 1em 0;
    font-size: clamp(15px, 1.6vw, 17px);
  }
  .text-block{
    margin: 22px 0 28px;
  }
  .text-block p + p{ margin-top: .6em; }
  
  .em{ color: var(--primary); font-weight: 700; }
  
  a{
    color: var(--primary);
    text-decoration: none;
  }
  a:hover{ text-decoration: underline; }
  
  /* ===== Media (images) ===== */
  .image{
    margin: 18px 0 8px;
  }
  .image img{
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    outline: 2px solid rgba(102,197,184,.08);
  }
  
  /* wideで左右配置 */
  @media (min-width: 820px){
    .image.left,
    .image.right{
      max-width: 52%;
    }
    .image.left{
      float: left;
      margin: 6px 28px 16px 0;
    }
    .image.right{
      float: right;
      margin: 6px 0 16px 28px;
    }
    /* 回り込み解除用：後続のブロックの最後でクリア */
    .text-block:last-of-type::after{
      content:""; display:block; clear:both;
    }
  }
  
  /* ===== Back link button ===== */
  .back-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
    box-shadow: 0 2px 10px rgba(0,0,0,.06), inset 0 0 0 1px rgba(102,197,184,.25);
    border: none;
    transition: transform .12s ease, box-shadow .2s ease;
    font-weight: 600;
  }
  .back-link::before{
    content: "←";
    font-weight: 700;
  }
  .back-link:hover{
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 0 0 1px var(--ring);
  }
  
  /* ===== Micro polish ===== */
  img[alt*="ヨガ"], img[alt*="yoga"]{ image-rendering: auto; }
  ::selection{ background: rgba(244,183,195,.35); }
  
  /* ===== Accessibility & prefers ===== */
  @media (prefers-reduced-motion: no-preference){
    .container{ animation: fadeUp .35s ease both; }
    @keyframes fadeUp{
      from{ opacity: 0; transform: translateY(6px); }
      to  { opacity: 1; transform: translateY(0); }
    }
  }
  
  /* ===== Small screens tweaks ===== */
  @media (max-width: 480px){
    .back-link{ width: 100%; justify-content: center; }
  }
  
  /* ===== Utility (お好みで) ===== */
  .badge{
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(102,197,184,.12);
    color: #186a61;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .08em;
  }