/* =====================================================================
   FuraFura CIRCLE（サークル）だけのデザイン　※運営：株式会社FuraFura
   コンセプト：「スポーツに、ふらふらっと来られる。居心地のいい場所。」
   方向性：ゆるくて居心地がいい（あたたかい生成り × 夕方の光のオレンジ × くすんだグリーン、丸い書体、広めの余白）
   動き：ゆっくり漂う・ゆらゆら揺れる（弾む・点滅など、速くて強い動きは使わない）
   3D：夕方の空を、ふわふわ漂うボール
   ひとつ前の「ポップではずむ版（PISTA CIRCLE）」は ../_v3/circle/ に残してあります。
   ---------------------------------------------------------------------
   もくじ
     1. 色・書体の変数        6. 活動（6枚のカード）と4ステップ
     2. 共通部品の上書き      7. 関わり方（3枚のカード）
     3. ヒーロー（空と3D）    8. 会社概要・お問い合わせ・フッター
     4. ただよう言葉の帯      9. 動き（ゆっくり出てくる）
     5. FuraFuraのこと
   ===================================================================== */

/* ---------- 1. 変数 ---------- */
[data-biz="circle"]{
  /* 地の色：あたたかい生成り */
  --paper:#f7f0e3;--paper-2:#ede2cf;--white:#fcf8f0;
  /* 文字：黒ではなく、やわらかい焦げ茶 */
  --ink:#4a3b2e;--ink-2:#76675a;
  --line:rgba(74,59,46,.14);--line-strong:rgba(74,59,46,.36);
  /* 夕方の光のオレンジ（--sun は飾り用、--accent は文字用の濃いめ） */
  --sun:#f0a878;--sun-2:#f8d6b6;--accent:#a8551f;--accent-bright:#f6c9a3;
  /* くすんだグリーンとサンドベージュ */
  --sage:#9aa98b;--sage-2:#dfe5d3;--sage-deep:#5f7052;--sand:#dcc7a5;
  /* いちばん上の6事業の帯（真っ黒ではなく、焦げ茶に） */
  --night:#3d3128;--night-text:#f7f0e3;--night-muted:#cfc2b1;--night-line:rgba(247,240,227,.16);
  /* 共通のグラデーション（線など）を、オレンジ〜サンド〜グリーンのやさしい色に */
  --g2:#f0a878;--g3:#b9c4a8;--gl2:#f0a878;--gl3:#9aa98b;
  /* 書体：見出し＝Kiwi Maru（丸みのある明朝）、本文＝Zen Maru Gothic（丸ゴシック）、英字＝Fredoka */
  --f-head:"Kiwi Maru","Zen Maru Gothic","Hiragino Maru Gothic ProN",serif;
  --f-ja:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --f-en:"Fredoka","Zen Maru Gothic",sans-serif;--f-logo:"Fredoka","Zen Maru Gothic",sans-serif;
  /* 寸法：角は大きく丸く、余白は広めに */
  --r:28px;--sec:clamp(72px,10vw,136px);
  --soft:cubic-bezier(.33,0,.2,1);                      /* ゆっくり動き出して、ゆっくり止まる */
  --shadow:0 22px 44px -30px rgba(96,62,30,.5);          /* ふんわりした影 */
}
[data-biz="circle"] body{line-height:2.05;letter-spacing:.06em}
[data-biz="circle"] h1,[data-biz="circle"] h2,[data-biz="circle"] h3{font-family:var(--f-head);font-weight:500;letter-spacing:.06em}
[data-biz="circle"] ::selection{background:var(--sun-2);color:var(--ink)}

/* ---------- 2. 共通部品の上書き ---------- */
/* 6事業の帯：いまのページの下線 */
[data-biz="circle"] .groupbar__list a[aria-current="page"]::after{height:3px;border-radius:3px 3px 0 0;background:var(--sun)}

/* ヘッダー */
[data-biz="circle"] .header{background:rgba(247,240,227,.88)}
[data-biz="circle"] .logo{gap:12px}
[data-biz="circle"] .logo__name{position:relative;font-weight:600;font-size:22px;letter-spacing:.01em;color:var(--ink)}
/* ロゴの下の、ゆるい波線 */
[data-biz="circle"] .logo__name::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' fill='none' stroke='%23f0a878' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/24px 6px repeat-x}
[data-biz="circle"] .logo__biz{font-weight:500;font-size:12px;letter-spacing:.24em;border-left-color:var(--line-strong)}
[data-biz="circle"] .nav__list a{font-weight:500}
[data-biz="circle"] .nav__list a::after{height:3px;border-radius:3px;background:var(--sun)}
[data-biz="circle"] .nav-toggle{border-color:var(--line-strong)}
@media (max-width:479px){
  [data-biz="circle"] .logo__name{font-size:19px;letter-spacing:0}
  [data-biz="circle"] .logo__biz{font-size:10px;letter-spacing:.16em;padding-left:8px}
  [data-biz="circle"] .logo{gap:8px}
}

/* ボタン：線や強い影は使わず、ふんわり。乗せると少しだけ浮く */
[data-biz="circle"] .btn{border:0;font-weight:700;box-shadow:var(--shadow);transition:transform .7s var(--soft),background .7s var(--soft),box-shadow .7s var(--soft)}
[data-biz="circle"] .btn:hover{transform:translateY(-3px)}
[data-biz="circle"] .btn__arrow svg{transition:transform .9s var(--soft)}
[data-biz="circle"] .btn--ink{background:var(--sun);color:var(--ink)}
[data-biz="circle"] .btn--ink:hover{background:#f3b48a}
[data-biz="circle"] .btn--ink .btn__arrow{background:rgba(252,248,240,.7)}
[data-biz="circle"] .btn--ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--sand)}
[data-biz="circle"] .btn--ghost:hover{background:var(--sage-2);color:var(--ink)}
[data-biz="circle"] .btn--ghost .btn__arrow{border:0;background:var(--paper-2);opacity:1}
[data-biz="circle"] .btn--sm{box-shadow:none}
[data-biz="circle"] .btn--sm::before{background:var(--white)}
[data-biz="circle"] :focus-visible{outline-color:var(--accent)}

/* 見出し（英字の小見出し＋日本語） */
[data-biz="circle"] .section{padding-block:var(--sec)}
[data-biz="circle"] .section--tight{padding-block:calc(var(--sec)*.75)}
[data-biz="circle"] .sec-head{margin-bottom:clamp(32px,4.4vw,60px)}
[data-biz="circle"] .sec-head__en{gap:12px;font-weight:500;font-size:15px;letter-spacing:.2em;text-transform:none;color:var(--accent)}
[data-biz="circle"] .sec-head__en::before{width:26px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1 4 Q7.5 0 13 4 T25 4' fill='none' stroke='%23f0a878' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
[data-biz="circle"] .sec-head__ja{margin-top:18px;font-size:clamp(25px,3.2vw,40px);line-height:1.7}
[data-biz="circle"] .sec-head__lead{margin-top:20px;max-width:32em}

/* 「仮の内容です」の注意書き */
.ff-note{margin-top:clamp(24px,3vw,36px);font-size:13px;line-height:1.9;color:var(--ink-2)}
.ff-note .note-sample{margin-right:10px}

/* セクションの境目の、ゆっくり流れる波（飾り） */
.ff-wave{display:block;overflow:hidden;height:clamp(28px,4vw,56px);line-height:0;background:var(--from,var(--paper))}
.ff-wave svg{display:block;width:200%;max-width:none;height:100%;fill:var(--to,var(--white));animation:ffWave 46s linear infinite}
@keyframes ffWave{to{transform:translateX(-50%)}}

/* ---------- 3. ヒーロー（夕方の空と、漂うボール） ---------- */
.ff-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(36px,5vw,76px) clamp(56px,7vw,104px)}
.ff-hero__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:960px){.ff-hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.ff-hero__eyebrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:5px 18px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--sand);font-size:13px;line-height:1.9;color:var(--ink-2)}
.ff-hero__eyebrow b{font-family:var(--f-en);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--accent)}
.ff-hero__title{margin-top:clamp(22px,3vw,34px);font-size:clamp(26px,7.2vw,52px);line-height:1.62;text-wrap:initial}
@media (min-width:960px){.ff-hero__title{font-size:clamp(33px,3.6vw,50px)}}
/* 「ふらふらっと」だけ、ゆらゆら揺らす ＋ やわらかいマーカー */
.ff-hero__title em{position:relative;isolation:isolate;display:inline-block;margin-right:.1em;font-style:normal;color:var(--accent);transform-origin:50% 100%;animation:ffSway 7s ease-in-out infinite}
.ff-hero__title em::after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.2em;z-index:-1;height:.42em;border-radius:999px;background:var(--sun-2)}
@keyframes ffSway{0%,100%{transform:rotate(-1.6deg) translateX(-2px)}50%{transform:rotate(1.6deg) translateX(2px)}}
.ff-hero__lead{margin-top:clamp(20px,2.6vw,30px);max-width:29em;color:var(--ink-2)}

/* 空（3Dの表示場所）。形そのものが、ゆっくりゆがむ */
.ff-hero__sky{position:relative;aspect-ratio:1/1;width:min(100%,520px);margin-inline:auto;overflow:hidden;cursor:pointer;touch-action:manipulation;
  border-radius:58% 42% 52% 48%/48% 54% 46% 52%;
  background:
    radial-gradient(80% 42% at 30% 108%,#b6c1a5 0 60%,transparent 61%),      /* 手前の丘 */
    radial-gradient(90% 46% at 82% 112%,#9aa98b 0 60%,transparent 61%),      /* 奥の丘 */
    radial-gradient(circle at 68% 60%,#fdf3df 0 9%,rgba(253,243,223,.5) 10% 17%,transparent 32%),   /* 夕日 */
    linear-gradient(180deg,#f9e3c9 0%,#f6cfa9 46%,#f0b58d 78%,#eeb089 100%);                          /* 夕方の空 */
  box-shadow:var(--shadow);animation:ffBlob 22s ease-in-out infinite}
@media (min-width:960px){.ff-hero__sky{aspect-ratio:10/11;margin-right:0}}
@keyframes ffBlob{
  0%,100%{border-radius:58% 42% 52% 48%/48% 54% 46% 52%}
  33%{border-radius:46% 54% 44% 56%/56% 44% 56% 44%}
  66%{border-radius:52% 48% 58% 42%/44% 52% 48% 56%}
}
/* 3Dが使えないとき・「動きを減らす」設定のときに見せる、CSSで描いたボール */
.ff-ball{position:absolute;border-radius:50%;box-shadow:inset -10px -14px 22px rgba(120,70,30,.16);animation:ffFloat var(--t,13s) ease-in-out var(--dl,0s) infinite}
.ff-ball--1{left:16%;top:20%;width:24%;aspect-ratio:1;background:#fbf3e4;--t:15s}
.ff-ball--2{left:54%;top:26%;width:19%;aspect-ratio:1;background:#eba777;--t:12s;--dl:-4s}
.ff-ball--3{left:36%;top:54%;width:15%;aspect-ratio:1;background:#b9c4a8;--t:17s;--dl:-8s}
.ff-ball--4{left:72%;top:60%;width:9%;aspect-ratio:1;background:#fffaf0;--t:11s;--dl:-2s}
@keyframes ffFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(10px,-14px)}50%{transform:translate(-4px,-22px)}75%{transform:translate(-12px,-8px)}}
.ff-hero__sky.has-3d .ff-ball{display:none}
/* 3Dの表示場所（共通）：準備ができたら .is-on が付いて、ゆっくり表示される */
.fx3d{position:absolute;inset:0;opacity:0;transition:opacity 2s var(--soft);pointer-events:none}
.fx3d.is-on{opacity:1}
.fx3d canvas{display:block;width:100%;height:100%}
.ff-hero__hint{display:none;position:absolute;left:50%;bottom:9%;transform:translateX(-50%);padding:2px 16px;border-radius:999px;background:rgba(252,248,240,.82);font-size:12px;line-height:2;letter-spacing:.1em;white-space:nowrap;color:var(--ink)}
.ff-hero__sky.has-3d .ff-hero__hint{display:block}
/* 背景に浮かぶ、ぼんやりした光（飾り） */
.ff-hero::before{content:"";position:absolute;left:-12%;top:-20%;z-index:-1;width:min(56vw,620px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(248,214,182,.75),transparent 66%);animation:ffFloat 26s ease-in-out infinite}

/* ---------- 4. ただよう言葉の帯（飾り） ---------- */
.ff-drift{--dur:120s;padding-block:clamp(14px,2vw,22px);background:var(--paper-2);color:var(--ink-2)}
.ff-drift .marquee__item{font-family:var(--f-head);font-weight:500;font-size:clamp(16px,1.9vw,22px);letter-spacing:.12em;text-transform:none;padding-right:1.3em}
.ff-drift .marquee__item::after{width:.42em;height:.42em;margin-left:1.3em;clip-path:none;border-radius:50%;background:var(--sun)}
.ff-drift .marquee__item:nth-child(even)::after{background:var(--sage)}

/* ---------- 5. FuraFuraのこと ---------- */
.ff-about{display:grid;gap:clamp(36px,5vw,84px);align-items:center}
@media (min-width:960px){.ff-about{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
[data-biz="circle"] .ff-about .sec-head{margin-bottom:0}
/* 写真：角をゆるく丸めて、ほんの少しだけ傾ける */
.ff-about__photo{max-width:560px;aspect-ratio:4/3;margin-top:clamp(28px,3.4vw,44px);border-radius:44px 28px 48px 30px;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
[data-biz="circle"] .ph__cap{background:rgba(252,248,240,.86);color:var(--ink-2);font-weight:500}
.ff-points{display:grid;gap:clamp(14px,1.8vw,20px)}
.ff-points li{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:start;padding:clamp(22px,2.6vw,32px);border-radius:var(--r);background:var(--white)}
.ff-points__no{grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sun-2);font-family:var(--f-en);font-weight:600;font-size:15px;line-height:1;color:var(--accent)}
.ff-points li:nth-child(2) .ff-points__no{background:var(--sage-2);color:var(--sage-deep)}
.ff-points li:nth-child(3) .ff-points__no{background:var(--paper-2);color:var(--ink-2)}
.ff-points h3{font-size:clamp(19px,1.9vw,23px);line-height:1.7}
.ff-points p{font-size:15px;color:var(--ink-2)}
@media (min-width:960px){.ff-points li:nth-child(2){margin-left:clamp(0px,3vw,44px)}.ff-points li:nth-child(3){margin-left:clamp(0px,1.4vw,20px)}}

/* こんな日に、どうぞ（ふきだしが、ゆらゆら漂う） */
.ff-moods{margin-top:clamp(52px,7vw,96px);text-align:center}
.ff-moods h3{font-size:clamp(20px,2.3vw,28px);line-height:1.8}
.ff-moods ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;max-width:900px;margin:clamp(22px,3vw,36px) auto 0}
.ff-moods li{padding:9px 24px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--sand);font-size:15px;line-height:1.9;animation:ffBob var(--t,9s) ease-in-out var(--dl,0s) infinite}
.ff-moods li:nth-child(2){--t:11s;--dl:-3s;background:var(--sage-2);box-shadow:none}
.ff-moods li:nth-child(3){--t:10s;--dl:-6s}
.ff-moods li:nth-child(4){--t:12s;--dl:-2s;background:var(--sun-2);box-shadow:none}
.ff-moods li:nth-child(5){--t:9.5s;--dl:-5s}
@media (max-width:479px){.ff-moods ul{gap:12px}.ff-moods li{padding:7px 18px;font-size:14px;letter-spacing:.04em}}
@keyframes ffBob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-7px) rotate(.6deg)}}

/* ---------- 6. 活動（6枚のカード）と4ステップ ---------- */
.ff-acts{display:grid;gap:clamp(12px,1.6vw,20px)}
@media (min-width:640px){.ff-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.ff-acts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ff-acts li{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:center;padding:clamp(20px,2.4vw,30px);border-radius:var(--r);background:var(--paper);transition:transform .9s var(--soft),background .9s var(--soft)}
.ff-acts li:hover{transform:translateY(-4px);background:#f9eedb}
.ff-acts__icon{grid-row:span 3;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--white);color:var(--accent)}
.ff-acts__icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 60%;animation:ffSway var(--t,8s) ease-in-out var(--dl,0s) infinite}
.ff-acts li:nth-child(2n) .ff-acts__icon svg{--t:9.5s;--dl:-3s}
.ff-acts li:nth-child(3n) .ff-acts__icon svg{--t:11s;--dl:-5s}
.ff-acts li.is-plus .ff-acts__icon{color:var(--sage-deep)}
.ff-acts__en{font-family:var(--f-en);font-weight:500;font-size:12px;line-height:1.6;letter-spacing:.14em;color:var(--ink-2)}
.ff-acts h3{font-size:clamp(18px,1.7vw,21px);line-height:1.7}
.ff-acts p{font-size:14px;line-height:1.9;color:var(--ink-2)}

.ff-sub{margin:clamp(56px,7vw,100px) 0 clamp(26px,3.2vw,40px);font-size:clamp(20px,2.3vw,28px);line-height:1.8}
/* 4ステップ：点線でゆるくつなぐ */
.ff-steps{position:relative;display:grid;gap:28px}
.ff-steps::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;border-left:2px dotted var(--sand)}
.ff-steps li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 20px;align-items:start}
.ff-steps__no{grid-row:span 3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sun-2);font-family:var(--f-en);font-weight:600;font-size:15px;line-height:1;color:var(--accent)}
.ff-steps li:nth-child(even) .ff-steps__no{background:var(--sage-2);color:var(--sage-deep)}
.ff-steps__en{font-family:var(--f-en);font-weight:500;font-size:12px;line-height:1.8;letter-spacing:.16em;color:var(--ink-2)}
.ff-steps h4{font-family:var(--f-head);font-weight:500;font-size:clamp(19px,1.9vw,23px);line-height:1.6}
.ff-steps p{font-size:14px;line-height:1.9;color:var(--ink-2)}
@media (min-width:900px){
  .ff-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
  .ff-steps::before{left:26px;right:20%;top:25px;bottom:auto;border-left:0;border-top:2px dotted var(--sand)}
  .ff-steps li{display:block}
  .ff-steps__no{margin-bottom:18px}
}

/* ---------- 7. 関わり方（3枚のカード） ---------- */
.ff-joins{display:grid;gap:clamp(14px,1.8vw,22px)}
@media (min-width:860px){.ff-joins{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ff-join{display:flex;flex-direction:column;padding:clamp(26px,3vw,40px);border-radius:var(--r);background:var(--white);transition:transform .9s var(--soft)}
.ff-join:hover{transform:translateY(-4px)}
.ff-join:nth-child(2){background:#eef1e6}
.ff-join:nth-child(3){background:var(--paper-2)}
.ff-join__en{font-family:var(--f-en);font-weight:500;font-size:13px;line-height:1.6;letter-spacing:.16em;color:var(--accent)}
.ff-join:nth-child(2) .ff-join__en{color:var(--sage-deep)}
.ff-join:nth-child(3) .ff-join__en{color:var(--ink-2)}
.ff-join h3{margin-top:10px;font-size:clamp(20px,2vw,24px);line-height:1.7}
.ff-join__copy{margin-top:6px;margin-bottom:22px;font-size:15px;color:var(--ink-2)}
.ff-join dl{margin-top:auto;border-top:1px dashed var(--line-strong)}
.ff-join dl div{display:grid;grid-template-columns:3.4em 1fr;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line-strong);font-size:14px;line-height:1.8}
.ff-join dt{font-weight:700}
.ff-join dd{color:var(--ink-2)}

/* ---------- 8. 会社概要・お問い合わせ・フッター ---------- */
[data-biz="circle"] .split__side{position:static}
[data-biz="circle"] .dtable{border-top:1px dashed var(--line-strong)}
[data-biz="circle"] .dtable>div{border-bottom:1px dashed var(--line-strong)}
[data-biz="circle"] .dtable dt{font-weight:700}
[data-biz="circle"] .tlink{border-bottom-color:var(--sun)}

/* お問い合わせ：夕方の光のパネル（濃い色の面にはしない） */
[data-biz="circle"] .cta.panel{margin-inline:var(--gutter);padding-block:clamp(60px,8vw,112px);border-radius:clamp(32px,5vw,64px);text-align:center;color:var(--ink);
  background:radial-gradient(70% 90% at 82% 110%,rgba(182,193,165,.75),transparent 62%),radial-gradient(60% 80% at 12% 0%,#fdf0dc,transparent 66%),linear-gradient(160deg,#f9dfc3,#f4c5a0)}
[data-biz="circle"] .cta.panel::before{display:none}
[data-biz="circle"] .cta .sec-head__en{justify-content:center}
[data-biz="circle"] .cta__title{margin-top:18px;font-size:clamp(27px,4.4vw,50px);line-height:1.65}
[data-biz="circle"] .cta__title em{font-style:normal;color:var(--accent)}
[data-biz="circle"] .cta__lead{max-width:40em;margin-inline:auto;color:var(--ink)}
[data-biz="circle"] .cta__btns{justify-content:center}
[data-biz="circle"] .cta .btn--light{background:var(--ink);color:var(--white)}
[data-biz="circle"] .cta .btn--light:hover{background:#5a483a}
[data-biz="circle"] .cta .btn--light .btn__arrow,[data-biz="circle"] .cta .btn--light:hover .btn__arrow{background:rgba(252,248,240,.18);color:var(--white)}
[data-biz="circle"] .cta .btn--ghost{box-shadow:none}
[data-biz="circle"] .cta__note{color:var(--ink);opacity:.82}
[data-biz="circle"] .cta .line{overflow:visible}

[data-biz="circle"] .footer{margin-top:clamp(20px,3vw,40px)}
[data-biz="circle"] .footer__h{font-weight:500;letter-spacing:.2em}
[data-biz="circle"] .footer__cols a{font-weight:500}
[data-biz="circle"] .footer__bottom{letter-spacing:.1em}

/* ---------- 9. 動き：ゆっくり、ふわっと出てくる（弾ませない） ---------- */
.js[data-biz="circle"] [data-reveal]:not([data-reveal="lines"]){transform:translateY(18px);transition:opacity 1.6s var(--soft) var(--d,0s),transform 1.8s var(--soft) var(--d,0s)}
.js[data-biz="circle"] [data-reveal].is-in:not([data-reveal="lines"]){transform:none}
.js[data-biz="circle"] .ff-about__photo[data-reveal].is-in{transform:rotate(-1.2deg)}
/* 見出しは、せり上がらせずに、1行ずつふわっと */
[data-biz="circle"] .line{overflow:visible}
.js[data-biz="circle"] [data-reveal="lines"] .line>span{opacity:0;transform:translateY(14px);transition:opacity 1.6s var(--soft) var(--d,0s),transform 1.8s var(--soft) var(--d,0s)}
.js[data-biz="circle"] [data-reveal="lines"].is-in .line>span{opacity:1;transform:none}
/* 「動きを減らす」設定のときは、共通CSS（common.css）がすべての動きを止めます。見出しの行も必ず表示する */
@media (prefers-reduced-motion:reduce){
  .js[data-biz="circle"] [data-reveal="lines"] .line>span{opacity:1!important}
}

/* =====================================================
   2026-10-08 追加：スポーツだけでなく、ダンス・おしゃべりなど、いろいろなサークルの居場所に
   ===================================================== */
/* ヒーロー：「居場所」に、灯りのようなやわらかい丸い印 */
.ff-mark{position:relative;isolation:isolate;font-weight:inherit;color:var(--ink)}
.ff-mark::before{content:"";position:absolute;left:50%;top:55%;z-index:-1;width:calc(100% + 1em);height:1.6em;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(248,214,182,.95) 0,rgba(248,214,182,.55) 45%,rgba(248,214,182,0) 70%);animation:ffGlowPulse 6s ease-in-out infinite}
@keyframes ffGlowPulse{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
/* ヒーロー：いま集まっているサークルの札 */
.ff-kinds{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(18px,2.2vw,24px) 0 0;padding:0;list-style:none}
.ff-kinds a{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--sand);font-size:14px;line-height:1.8;color:var(--ink);text-decoration:none;transition:background .6s var(--soft),transform .6s var(--soft)}
.ff-kinds a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sun)}
.ff-kinds li:nth-child(2) a::before{background:#c98152}
.ff-kinds li:nth-child(3) a::before{background:var(--sage)}
.ff-kinds a:hover{background:var(--sun-2);transform:translateY(-2px)}

/* サークル：絞り込みの札 */
.ff-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(22px,2.8vw,34px)}
.ff-filter button{appearance:none;border:0;cursor:pointer;padding:8px 20px;border-radius:999px;background:var(--paper);font:inherit;font-size:14px;line-height:1.8;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--sand);transition:background .5s var(--soft),color .5s var(--soft)}
.ff-filter button:hover{background:var(--sun-2);color:var(--ink)}
.ff-filter button[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:none}
.ff-filter button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ff-acts li[hidden]{display:none}
@media (min-width:1180px){.ff-acts{grid-template-columns:repeat(4,minmax(0,1fr))}.ff-acts li{grid-template-columns:1fr;gap:6px 0;align-content:start}.ff-acts__icon{grid-row:auto;margin-bottom:8px}}
.ff-acts__tag{display:inline-block;margin-left:10px;padding:0 10px;border-radius:999px;background:var(--sun-2);font-family:var(--f-ja);font-weight:700;font-size:11px;line-height:1.9;letter-spacing:.06em;color:var(--accent)}
.ff-acts li.is-dance .ff-acts__tag{background:#f3dcc9;color:#8f4a22}
.ff-acts li.is-plus .ff-acts__tag{background:var(--sage-2);color:var(--sage-deep)}
.ff-acts li.is-dance .ff-acts__icon{background:#fbeadc;color:#8f4a22}

/* 居場所：少しだけ開いたドア */
.ff-door{background:var(--paper)}
.ff-door__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:900px){.ff-door__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.ff-door__art{max-width:400px;margin-inline:auto;width:100%}
.ff-door__art svg{display:block;width:100%;height:auto;overflow:visible}
.ff-door__frame{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.ff-door__light{fill:#fff1dc}
.ff-door__leaf{fill:var(--sun);opacity:.9}
.ff-door__knob{fill:var(--white)}
.ff-door__floor{stroke:var(--sand);stroke-width:3;stroke-linecap:round}
.ff-door__glow{animation:ffBreath 7s ease-in-out infinite;transform-origin:160px 210px}
@keyframes ffBreath{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.ff-door__float{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:ffFloat 10s ease-in-out infinite}
.ff-door__float--2{stroke:#8f4a22;animation-duration:12s;animation-delay:-4s}
.ff-door__float--2 ellipse{fill:#8f4a22}
.ff-door__float--3{stroke:var(--sage-deep);animation-duration:11s;animation-delay:-7s}
.ff-door__list{display:grid;gap:12px;margin:clamp(22px,3vw,34px) 0 0;padding:0;list-style:none}
.ff-door__list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:16px 22px;border-radius:var(--r);background:var(--white);font-size:15px;line-height:1.9;color:var(--ink-2)}
.ff-door__list b{font-family:var(--f-head);font-weight:500;font-size:clamp(17px,1.7vw,19px);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ff-mark::before,.ff-door__glow,.ff-door__float{animation:none}}