@charset "UTF-8";
/* ==================================================================
 * DIO スタッフツール一覧メニュー ｜ 見た目
 *
 * ★先頭の @charset "UTF-8"; は消さないこと。
 *   サーバーが .css に文字コードを伝えないため、これが無いと
 *   日本語コメントが文字化けする（共通ガイド 2-5）。
 *
 * ★色（--sns / --shop など）はここに書かない。
 *   dio-team-menu.php の dio_team_menu_colors() から
 *   インラインCSSとして #dio-team に流し込まれる。
 *
 * ★すべてのセレクタを #dio-team の内側に限定している。
 *   テーマやElementorの他の要素へ影響を出さないため。
 * ================================================================== */

#dio-team{
  --bg:#ffffff; --card:#ffffff; --card-hover:#fafafa;
  --line:rgba(0,0,0,.09); --line-strong:rgba(0,0,0,.16);
  --txt:#1a1a20; --txt-dim:#5b5b66; --txt-faint:#9a9aa5;
  --brand:#e8341c; --brand-glow:rgba(232,52,28,.20);
  --radius:18px; --maxw:1040px;
  position:relative; overflow:hidden;
  background:var(--bg); color:var(--txt);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  padding:0 22px 14px; margin:0;
}
#dio-team *{margin:0;padding:0;box-sizing:border-box}
#dio-team a{color:inherit;text-decoration:none}
#dio-team .tm-aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#dio-team .tm-aura::before{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.6;width:540px;height:540px;top:-210px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,var(--brand-glow),transparent 70%)}
#dio-team .tm-wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}

/* ---------- 見出し ---------- */
#dio-team .tm-hero{padding:50px 0 6px;text-align:center}
#dio-team .tm-eyebrow{font-family:"Montserrat",sans-serif;font-weight:700;letter-spacing:.3em;font-size:12px;color:var(--brand);text-transform:uppercase}
#dio-team .tm-title{font-family:"Montserrat",sans-serif;font-weight:900;font-size:clamp(30px,6.4vw,52px);letter-spacing:.01em;line-height:1.03;margin:12px 0 12px;background:linear-gradient(180deg,#20202a,#5a5a66);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#dio-team .tm-lead{color:var(--txt-dim);max-width:600px;margin:0 auto;font-size:15px;text-wrap:balance}

/* ---------- カード ---------- */
#dio-team .tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:34px 0 0}
#dio-team .tm-card{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:.24s cubic-bezier(.22,1,.36,1);overflow:hidden}
#dio-team .tm-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac,var(--brand));opacity:0;transition:.24s}
#dio-team .tm-card:hover{transform:translateY(-4px);background:var(--card-hover);border-color:var(--line-strong);box-shadow:0 16px 30px -18px rgba(0,0,0,.35)}
#dio-team .tm-card:hover::before{opacity:1}
#dio-team .tm-card:hover .tm-arrow{transform:translateX(3px);opacity:1;color:var(--txt)}
#dio-team .tm-body{min-width:0;flex:1}
#dio-team .tm-tag{display:inline-block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.06em;color:#fff;background:var(--ac,var(--brand));padding:3px 10px;border-radius:100px;margin-bottom:8px}
#dio-team .tm-name{display:block;font-weight:800;font-size:17px;color:var(--txt);letter-spacing:.01em;line-height:1.4}
#dio-team .tm-arrow{flex:none;color:var(--txt-faint);opacity:.7;transition:.24s}
#dio-team .tm-arrow svg{width:20px;height:20px;display:block}

/* ---------- 画面幅への対応 ---------- */
/* ★PCでは3列に固定する。auto-fillのままだと画面幅で列数が変わり、
   FORGEMANの3枚のようなグループが同じ段に並ばなくなるため
   （PHP側の配列の並び順の意図を守る） */
@media(min-width:960px){
  #dio-team .tm-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  #dio-team{padding:0 15px 14px}
  #dio-team .tm-hero{padding:38px 0 4px}
  #dio-team .tm-grid{grid-template-columns:1fr;padding:24px 0 0}
}