/* =========================================
   NAVIMANI — Home CSS (cleaned & organized)
   - Duplicates removed
   - Section-scoped knobs kept
   - Old plate assets disabled
   - Mobile breakpoints unified
   Date: 2025-10-04
========================================= */

/* ---------- 0) Root / Globals ---------- */
:root{
  --page-max: 1200px;
  --pad-x: 24px;

  /* Typography scale */
  --title-size: clamp(44px, 6vw, 96px);
  --lead-size:  clamp(20px, 2.6vw, 32px);
  --desc-size:  clamp(14px, 1.4vw, 16px);
  --weight-size: 800;
  --body-color: #555;

  /* Cards */
  --radius-xl: 46px;
  --shadow: 0 8px 28px rgba(0,0,0,.08);

  /* Plates */
  --plate-shift: 70px;

  /* CTA icon sizes */
  --cta-icon-h: clamp(32px,5vw,40px);
  --cta-icon-w: clamp(48px,5vw,60px);

  /* Hero */
  --hero-bleed: 120px; /* 右食い出し量（PC） */
}

html, body{ max-width:100%; overflow-x:hidden; }
img, video, iframe{ max-width:100%; }

/* 共有：カード内の画像 */
.st-media img{ width:100%; height:auto; display:block; border-radius:24px; }


/* =========================================
   1) HERO — left vertical catch / right images
========================================= */
.hero{ padding:24px 0 10px; background:#fff; overflow:hidden; }
.hero .hero-wrap{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(90px,160px) 1fr;
  gap:28px; align-items:center;
  grid-template-areas:"string images";
}
.hero .mv-catch.catch-vertical{
  grid-area:string;
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(-8deg);
  font-family:"Noto Sans JP",sans-serif;
  font-weight:400; font-size:22px; letter-spacing:.1em; color:#222; margin:0;
  padding-right:32px;
}

/* 右：画像フレーム（角丸＋影） */
.hero .hero-wrap > section,
.mv-images{ grid-area:images; position:relative; width:100%; aspect-ratio:16/9; border-radius:24px; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.12); background:#f4f4f4; }

/* 重ねる画像（フェードのベース） */
.hero .hero-wrap > section img,
.mv-images img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .8s ease; z-index:0; }

/* シンプル 2枚フェード（2枚だけのときのフォールバック） */
@keyframes heroFade2 { 0%{opacity: 0} 3%{opacity:1} 17%{opacity: 1} 20%{opacity: 0} 100%{opacity:0} }
.mv-images img:nth-of-type(1){ animation:heroFade2 35s infinite; animation-delay:0s; z-index:1; }
.mv-images img:nth-of-type(2){ animation:heroFade2 35s infinite; animation-delay:5s; z-index:1; }
.mv-images img:nth-of-type(3){ animation:heroFade2 35s infinite; animation-delay:10s; z-index:1; }
.mv-images img:nth-of-type(4){ animation:heroFade2 35s infinite; animation-delay:15s; z-index:1; }
.mv-images img:nth-of-type(5){ animation:heroFade2 35s infinite; animation-delay:20s; z-index:1; }
.mv-images img:nth-of-type(6){ animation:heroFade2 35s infinite; animation-delay:25s; z-index:1; }
.mv-images img:nth-of-type(7){ animation:heroFade2 35s infinite; animation-delay:30s; z-index:1; }

/* 1枚だけのときは静止 */
.hero .hero-wrap > section img:only-child,
.mv-images img:only-child{ position:static; height:auto; opacity:1; animation:none; }

/* 右だけハミ出す（PC） */
.hero .hero-wrap > section,
.mv-images{ width:calc(100% + var(--hero-bleed)); margin-right:calc(-1 * var(--hero-bleed)); }

@media (prefers-reduced-motion: reduce){
  .hero .hero-wrap > section img, .mv-images img{ animation:none !important; opacity:1 !important; }
}
@media (max-width: 900px){
  :root{ --hero-bleed:0px; }
  .hero .hero-wrap{ grid-template-columns:1fr; grid-template-areas:"images" "string"; gap:16px; padding:0 16px; }
  .hero .mv-catch.catch-vertical{ writing-mode:horizontal-tb; transform:none; font-size:18px; letter-spacing:.08em;   padding-left:0px; padding-bottom:0px;}
  .hero .hero-wrap > section, .mv-images{ aspect-ratio:3/4; width:100%; margin-right:0; }
}


/* =========================================
   2) AD BANNERS — 2-up (SP=1)
========================================= */
.ad-banners{ position:relative; padding:24px 0 16px; background:#fff; overflow:hidden; margin-top:clamp(24px,4vw,64px); /* Heroとの間隔 */
  /* 速度ノブ（ms）— JSが参照 */
  --ad-step-ms: 1600ms; --ad-wait-ms: 1100ms; --ad-gap:16px; }
.ad-viewport{ max-width:1200px; margin:0 auto; padding:0 16px 34px; overflow:hidden; width:100%; }
.ad-track{ display:flex; align-items:center; gap:var(--ad-gap); will-change:transform; transform:translateX(0); }
.ad-card{ flex:0 0 calc((100% - var(--ad-gap)) / 2); }
.ad-link{ position:relative; display:block; border-radius:var(--ad-radius,32px); overflow:hidden; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); aspect-ratio:148/75; }
.ad-link img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
@supports not (aspect-ratio: 1 / 1){ .ad-link::before{ content:""; display:block; padding-top:calc(100% * 75 / 148); } .ad-link img{ position:absolute; inset:0; } }

/* ドット（必要なら） */
.ad-dots{ max-width:1200px; margin:-20px auto 0; padding:0 16px; display:flex; gap:8px; justify-content:flex-end; }
.ad-dot{ width:8px; height:8px; border-radius:999px; background:#111; opacity:.28; }
.ad-dot.is-active{ opacity:1; }

@media (max-width: 640px){ .ad-card{ flex-basis:100%; } .ad-viewport{ padding:0 16px 28px; } }


/* =========================================
   3) STUDIO / GOODS / COMMUNITY — right image layout (shared)
========================================= */
.sec-studio{ padding:clamp(56px,6vw,96px) 0; position:relative; overflow-x:clip; }
.st-grid{
  max-width:var(--page-max); margin:0 auto; padding:0 var(--pad-x);
  display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"head media" "body media";
  gap:clamp(24px,4vw,56px); align-items:start; position:relative; isolation:isolate;
}
.st-head{ grid-area:head; position:relative; z-index:2; }
.st-body{ grid-area:body; }
.st-title{ margin:0 0 8px; font:120 var(--title-size)/1 var(--fx-text-font),system-ui,sans-serif; }
.st-lead{ margin:0 0 10px; font:800 var(--lead-size)/1.35 var(--fx-text-font),system-ui,sans-serif; }
.st-desc{ margin:0 0 22px; color:var(--body-color); }
.st-balls{ position:absolute; left:8px; top:-24px; width:clamp(150px,18vw,240px); height:auto; z-index:-1; pointer-events:none; user-select:none; }
.st-media{ grid-area:media; margin:0; background:#f0f0f0; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; position:relative; z-index:1; }
.st-cta{ display:inline-flex; align-items:center; gap:14px; }
.st-list-label{ font-weight:800; }
.st-list-arrow img{ width:var(--cta-icon-w); height:var(--cta-icon-h); }

/* Text/position knobs (Studio/Goods) */
.sec-studio, .sec-goods, .sec-community{
  --fx-head-x:0px;  --fx-head-y:0px;  /* 見出しブロック */
  --fx-title-x:90px; --fx-title-y:-30px; --fx-title-mb:8px;
  --fx-lead-x:0px;  --fx-lead-y:0px;  --fx-lead-mb:10px;
  --fx-body-x:0px;  --fx-body-y:0px;  --fx-text-align:left;

  --fx-title-size: var(--title-size);
  --fx-lead-size:  var(--lead-size);
  --fx-desc-size:  var(--desc-size);
  --fx-title-font: "Outfit",var(--fx-text-font),system-ui,sans-serif;
  --fx-text-font:  var(--fx-text-font),system-ui,sans-serif;
}
.sec-studio .st-head, .sec-goods .st-head{ transform:translate(var(--fx-head-x), var(--fx-head-y)); }
.sec-studio .st-title, .sec-goods .st-title{ transform:translate(var(--fx-title-x), var(--fx-title-y)); margin-bottom:var(--fx-title-mb); font-family:var(--fx-title-font); font-weight:900; font-size:var(--fx-title-size); line-height:1; letter-spacing:.01em; }
.sec-studio .st-lead, .sec-goods .st-lead{ transform:translate(var(--fx-lead-x), var(--fx-lead-y)); margin-bottom:var(--fx-lead-mb); font-family:var(--fx-text-font); font-weight:800; font-size:var(--fx-lead-size); line-height:1.35; }
.sec-studio .st-desc, .sec-goods .st-desc, .sec-studio .st-list-label, .sec-goods .st-list-label{ font-family:var(--fx-text-font); font-size:var(--fx-desc-size); color:var(--body-color,#555); }
.sec-studio .st-body, .sec-goods .st-body{ transform:translate(var(--fx-body-x), var(--fx-body-y)); text-align:var(--fx-text-align); }

@media (max-width:420px){
.sec-studio .st-desc, .sec-goods .st-desc{font-size:calc(var(--fx-desc-size)/1.025); }
}

/* 三原色（Studio/Goods） */
.sec-studio, .sec-goods{ --balls-left:0px; --balls-top:-80px; --balls-x:0px; --balls-y:0px; --balls-size:clamp(150px,18vw,240px); }
.sec-studio .st-balls, .sec-goods .st-balls{ left:calc(var(--balls-left) + var(--balls-x)); top:calc(var(--balls-top) + var(--balls-y)); width:var(--balls-size); height:auto; }

.sec-community{ padding:clamp(56px,6vw,96px) 0; position:relative; overflow-x:clip; }
.cm-grid{
  max-width:var(--page-max); margin:0 auto; padding:0 var(--pad-x);
  display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"media head" "media body";
  gap:clamp(24px,4vw,56px); align-items:start; position:relative; isolation:isolate;
}
.cm-media{ grid-area:media; margin:0; background:#f0f0f0; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; position:relative; z-index:1; padding-bottom:50%; }
.cm-head{ top:-50px; grid-area:head; position:relative; z-index:2; }
.cm-body{ grid-area:body; position:relative; z-index:2; }
.cm-title{ margin:0 0 12px; font:900 var(--title-size)/1 "Outfit",var(--fx-text-font),system-ui,sans-serif; }
.cm-lead{ margin:0 0 8px; font:800 var(--lead-size)/1.35 "Outfit",var(--fx-text-font),system-ui,sans-serif; }
.cm-lead2{ margin:0 0 14px; font:800 clamp(18px,2.2vw,26px)/1.35 "Outfit",var(--fx-text-font),system-ui,sans-serif; }
.cm-desc{ margin:0 0 22px; color:var(--body-color); }
/* .cm-cta{ display:inline-flex; align-items:center; gap:14px; background:none!important; border:0!important; box-shadow:none!important; padding:0!important; color:inherit; text-decoration:none; font-weight:700; }
.cm-cta__arrow img{ width:var(--cta-icon-w); height:var(--cta-icon-h); } */
.cm-cta{ display:none; align-items:center; gap:14px; background:none!important; border:0!important; box-shadow:none!important; padding:0!important; color:inherit; text-decoration:none; font-weight:700; }
.cm-cta__arrow img{ width:var(--cta-icon-w); height:var(--cta-icon-h); }

/* 三原色（Community専用ノブ） */
/* .sec-community{ --cb-anchor-left:calc(100% - 16px); --cb-top:0px; --cb-x:-180px; --cb-y:-80px; --cb-mirror:1; --cb-size:clamp(160px,18vw,240px); } */
.sec-community{ --cb-anchor-left:calc(20vw); --cb-top:0px; --cb-x:calc(100px); --cb-y:-40px; --cb-mirror:1; --cb-size:clamp(160px,18vw,240px); }
.cm-balls{ position:absolute; left:var(--cb-anchor-left); top:var(--cb-top); width:var(--cb-size); height:auto; width:clamp(150px,18vw,240px); transform:translate(var(--cb-x), var(--cb-y)); transform-origin:left top; z-index:-1; pointer-events:none; user-select:none; }

/* =========================================
   5) Z-Order & Responsive (shared)
========================================= */
/* 文字 > 写真 > プレート */
.sec-studio .st-head, .sec-studio .st-body, .sec-community .cm-head, .sec-community .cm-body{ position:relative; z-index:3 !important; }
.sec-studio .st-media, .sec-community .cm-media{ position:relative; z-index:2 !important; }
.sec-studio .st-plate, .sec-community .cm-plate{ position:absolute; z-index:0 !important; pointer-events:none; }

@media (max-width:980px){
  .st-grid, .cm-grid{ grid-template-columns:1fr; grid-template-areas:"head" "media" "body"; }
  .st-media, .cm-media{ aspect-ratio:3/2; }
}

/* =========================================
   6) Generic Plate System — .has-plate (left/right)
========================================= */
.has-plate{ 
  position:relative;
  isolation:isolate;
  --sec-gap-top:72px;
  --plate-w:976px;
  --plate-h:360px;
  --plate-top:0px;
  --plate-shift-x:0px;
  --plate-shift-y:0px;
  --plate-color:#f0f0f0;
  --plate-r-lg:180px;
  --plate-r-sm:0px;
}
.has-plate{ margin-top:var(--sec-gap-top); padding:clamp(40px,7vw,96px) 0; scroll-margin-top:calc(var(--sec-gap-top) + 16px); }
.plate--left::before, .plate--right::before{ content:""; position:absolute; top:calc(var(--plate-top) + var(--plate-shift-y)); width:var(--plate-w); height:var(--plate-h); background:var(--plate-color); border-radius:var(--r-tl) var(--r-tr) var(--r-br) var(--r-bl); transform:translateX(var(--plate-shift-x)); z-index:0; pointer-events:none; }
.plate--left::before  { left:0;  --r-tl:var(--plate-r-lg); --r-tr:var(--plate-r-sm); --r-br:var(--plate-r-sm); --r-bl:var(--plate-r-lg); }
.plate--right::before { right:0; --r-tl:var(--plate-r-sm); --r-tr:var(--plate-r-lg); --r-br:var(--plate-r-lg); --r-bl:var(--plate-r-sm); }
.has-plate > *{ position:relative; z-index:1; }
@media (max-width:1024px){ .has-plate{ --plate-w:100%; --plate-h:56vw; --plate-top:0; --plate-r-lg:48px; } }

/* セクション別プリセット（任意） */
#studio.has-plate   { --plate-w:1184px; --plate-h:320px; --plate-top:16px; --plate-shift-x:250px;  --plate-shift-y:150px; --plate-color:#f0f0f0; --plate-r-lg:180px; }
#community.has-plate{ --plate-w:1184px; --plate-h:320px; --plate-top:16px; --plate-shift-x:-250px; --plate-shift-y:150px;  --plate-color:#f0f0f0; --plate-r-lg:180px; }
#goods.has-plate    { --plate-w:1184px; --plate-h:320px; --plate-top:16px; --plate-shift-x:250px;  --plate-shift-y:150px;  --plate-color:#f0f0f0; --plate-r-lg:180px; }
#streaming.has-plate{ --plate-w:1184px; --plate-h:320px; --plate-top:16px; --plate-shift-x:250px;  --plate-shift-y:150px;  --plate-color:#f0f0f0; --plate-r-lg:180px; }




/* =========================================
   7) Streaming — single "plate" implementation
   (#streaming.sec-stream--plate)
========================================= */
/* 背景プレート（Eventの鏡像＋ピンク） */
#streaming.sec-stream--plate{ 
  --sv-bg-left:-150px;
  --sv-bg-right:0px;
  --sv-bg-top:32px;
  --sv-bg-w:1400px;
  --sv-bg-h:52vh;
  --sv-bg-radius:124px 0 0 124px;
  --sv-bg-color:#FDEBEB;
  --sv-sec-gap-top:clamp(650px);
  position:relative;
  margin-top:var(--sv-sec-gap-top);
  padding:clamp(40px,7vw,96px) 0;
  scroll-margin-top:calc(var(--sv-sec-gap-top) + 16px);

  --st-dots-size:12px;
  --st-left:100px;
  --st-top:30px;
  --st-sub-left:500px;
  --st-sub-top:30px;
}
/*#streaming.sec-stream--plate::before{ content:""; position:absolute; left:var(--sv-bg-left); right:var(--sv-bg-right); top:var(--sv-bg-top); width:var(--sv-bg-w); height:var(--sv-bg-h); background:var(--sv-bg-color); border-radius:var(--sv-bg-radius); z-index:0; }*/
#streaming.sec-stream--plate::before{ max-width:var(--sv-bg-w); max-height: 650px; content:""; position:absolute; left:var(--sv-bg-left); right:var(--sv-bg-right); top:var(--sv-bg-top); width:var(--sv-bg-w); height:clamp(420px,60vw,100vh); background:var(--sv-bg-color); border-radius:var(--sv-bg-radius); z-index:0;}
#streaming.sec-stream--plate .sg-wrap,
#streaming.sec-stream--plate .st-head,
#streaming.sec-stream--plate .st-viewport
{ position:relative; z-index:1; }
@media (max-width:640px){#streaming.sec-stream--plate::before{ max-height: 100%; height:var(--sv-bg-h); --sv-bg-left:-150px; --sv-bg-right:0px; --sv-bg-top:0px; --sv-bg-w:200%; --sv-bg-h:100%; --sv-bg-radius:62px; }}
/* @media (min-width:900px){#streaming.sec-stream--plate{--sv-bg-w:100%;--sv-bg-h:500px;}} */

/* 内側帯や旧プレートを完全停止（重複防止） */
#streaming .sg-plate, #streaming .st-panel{ display:none !important; }
#streaming, #streaming .sg-wrap{ background:transparent !important; }


#streaming, #streaming .sg-wrap{
  max-width:var(--page-max); margin:0 auto; padding:0 var(--pad-x);
  gap:clamp(24px,4vw,56px); align-items:start; position:relative; isolation:isolate;
}

/* 見出し（横並び＋実余白で重なり無し） */
#streaming .st-head{ display:flex; align-items:baseline; gap:var(--head-gap,16px); margin: var(--title-y,10px) 0 var(--head-bottom,26px) var(--title-x,8px);transform:translate(var(--fx-head-x), var(--fx-head-y)); }
#streaming .st-title{ margin:0 auto; font-weight:900; font-size:var(--title-size, clamp(42px,5vw,64px)); line-height:1.1; transform:translate(calc(var(--st-left) * -1), calc(var(--st-top) * -1));}
#streaming .st-sub{ margin:0 auto; font-size:var(--sub-size,14px); transform:translate(calc(var(--st-sub-left) * -1),var(--st-sub-top));}
#streaming .st-viewport{ max-width:var(--page-max); margin:0 auto; padding:0px; position:relative; overflow:hidden; border-radius:0; background:transparent !important; padding-top: 10px; }

@media (max-width:1024px){#streaming .st-head{ --st-left:clamp(0px,8vw,100px); --st-top:clamp(0px,1vw,20px); --st-sub-left:clamp(150px,30vw,500px); --st-sub-top:calc(10 + clamp(0,));}}
@media (max-width:640px){#streaming .st-title{transform:translate(var(--st-left),var(--st-top));}
                         #streaming .st-sub{transform:translate(calc(var(--st-sub-left) * -1),100px); --sub-size:12px;}
                         /* #streaming .st-sub{transform:translate(-150px,30px); --sub-size:12px;} */
                         }

/* スライダー（ページ送り） */
#streaming .st-track{ display:flex; transition:transform .35s ease; transform:translateX(calc(-100% * var(--pg-index,0))); }
#streaming .st-page{ grid-area:pages; min-width:100%; }
/* #streaming .st-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,3vw,28px); } */
#streaming .st-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas: "pages" "pages"; gap:clamp(16px,3vw,28px); }
@media (max-width:640px){ #streaming .st-row{ grid-template-columns:1fr; } }

/* カード */
.st-card{ text-decoration:none; }
.st-card--video .video-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--card-radius,18px);
}
.st-card--video .video-frame > *{ width:100%; height:100%; display:block; object-fit:cover; }
.st-card--video .video-frame iframe{ border:0; }

/* タイトル/メタ（画像下UI） */
.st-cap{ padding:10px 2px 0; }
.st-cap-ttl{ margin:0 0 4px; font-weight:700; font-size:14px; }
.st-cap-txt{ margin:0; color:#666; font-size:12.5px; }

/* ドット */
.st-dots{ position:absolute; right:22px; bottom:-30px; display:flex; gap:8px; z-index:2; }
.st-dots .st-dot{ width:var(--st-dots-size); height:var(--st-dots-size); border-radius:50%; background:#c9bfc2; border:0; padding:0; cursor:pointer; }
.st-dots .st-dot.is-active{ background:#333; }

@media (prefers-reduced-motion: reduce){ #streaming .st-track{ transition:none; } }

/* 動画アスペクト比ユーティリティ */
.ratio-16-9 .video-frame{ aspect-ratio:16/9; }
.ratio-4-3  .video-frame{ aspect-ratio:4/3; }
.ratio-1-1  .video-frame{ aspect-ratio:1/1; }
.ratio-9-16 .video-frame{ aspect-ratio:9/16; }

/* =========================================
   8) Event (XD layout)
========================================= */
.sec-event--xd{
  position:relative;
  padding:clamp(40px,7vw,96px) 0;
  --ev-sec-gap-top:72px;
  margin-top:var(--ev-sec-gap-top);
  scroll-margin-top:calc(var(--ev-sec-gap-top) + 16px);
  --fx-title-font: "Outfit",var(--fx-text-font),system-ui,sans-serif;
  --fx-text-font:  var(--fx-text-font),system-ui,sans-serif;
  /* 背景プレート変数 */
  --ev-bg-left:0px;
  --ev-bg-right:auto;
  --ev-bg-top:32px;
  --ev-bg-w:1184px;
  --ev-bg-h:680px;
  --ev-bg-radius:0 124px 124px 0;
  --ev-bg-color:#EEF2F8;
  /* カード/レイアウト */
  --ev-card-w:820px;
  --ev-card-h:560px;
  --ev-gap:64px;
}
.sec-event--xd::before{ content:""; position:absolute; left:var(--ev-bg-left); right:var(--ev-bg-right); top:var(--ev-bg-top); width:var(--ev-bg-w); height:var(--ev-bg-h); background:var(--ev-bg-color); border-radius:var(--ev-bg-radius); z-index:0; }
.ev2-wrap{ display:grid; position:relative; z-index:1; max-width:calc(var(--ev-bg-w) + 48px); margin:0 auto; grid-template-columns:var(--ev-card-w) 1fr; column-gap:var(--ev-gap); align-items:center; grid-template-areas:"body head";}
.ev2-card{ grid-area:body; width:var(--ev-card-w); border:1px solid #EAECEF; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.05); }
.ev2-gcal{ width:100%; height:var(--ev-card-h); border:0; display:block; }
/* 見出し（横並び＋実余白で重なり無し） */
.ev2-head{ grid-area:head; display:grid; align-items:baseline; gap:var(--head-gap,16px); margin: var(--title-y,10px) 0 var(--head-bottom,26px) var(--title-x,8px);transform:translate(var(--fx-head-x), var(--fx-head-y)); }
.ev2-title{ margin:0 auto; font-weight:900; font-size:var(--title-size, clamp(42px,5vw,64px)); line-height:1.1; transform:translate(calc(var(--st-left) * -1), calc(var(--st-top) * -1)); font-family:var(--fx-title-font);}
.ev2-sub{ margin:0 auto; font-size:var(--desc-size); transform:translate(calc(var(--st-sub-left) * -1),var(--st-sub-top)); color:#777; font-family:var(--fx-text-font);}

@media (max-width:980px){
  .sec-event--xd{ --ev-bg-left:0; --ev-bg-right:auto; --ev-bg-top:0; --ev-bg-w:100%; --ev-bg-h:56vw; --ev-bg-radius:48px; --ev-card-w:100%; --ev-card-h:480px; --ev-gap:24px; }
  .ev2-wrap{ grid-template-columns:1fr; grid-template-areas:"head" "body";}
}




/* =========================================
   9) Utilities / Shapes
========================================= */
/* 3コーナー丸（左下だけ直角） */
.st-media--3round{ position:relative; overflow:hidden; border-radius:var(--img-r,40px) var(--img-r,40px) var(--img-r,40px) 0; box-shadow:0 22px 60px rgba(0,0,0,.12); isolation:isolate; }
.st-media--3round > img{ display:block; width:100%; height:auto; object-fit:cover; }
.st-media--3round::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.06), transparent); }

/* 右下だけ直角・他は丸（BR=0） */
.shape-3round--br{
  /* TL   TR   BR   BL */
  border-radius: var(--img-r, 40px) var(--img-r, 40px) 0 var(--img-r, 40px);
  overflow: hidden; /* 角でトリミング */
}

/* ===== Studio / Goods → Communityと同じサイズ感に統一 ===== 
    (タイトル/リード/説明文/CTAアイコン/余白など)
=================================================================== */
#studio,
#goods,
#community,
#streaming
{
  /* タイトル/リード/説明文は Community と同じ変数を使用 */
  --fx-title-size: var(--title-size);   /* clamp(44px, 6vw, 96px) */
  --fx-lead-size:  var(--lead-size);    /* clamp(20px, 2.6vw, 32px) */
  --fx-desc-size:  var(--desc-size); /* 本文はほぼボディ相当 */

  /* 余白も Community 寄りに */
  --fx-title-mb: 12px;
  --fx-lead-mb:  14px;

  /* フォントを Community と同じ構成に */
  --fx-title-font: "Outfit","Noto Sans JP", system-ui,sans-serif;
  --fx-text-font:  "Noto Sans JP",system-ui,sans-serif;
}

/* タイトル：letter-spacing(字間)を統一 */
#studio .st-title,
#goods  .st-title,
#community .cm-title,
#streaming .st-title,
#event .ev2-title
{
  letter-spacing: .1em !important;   /* タイトル */
}

/* 任意：サブリード（使っていれば）も Community の cm-lead2 と同値に */
#studio .st-lead2,
#goods  .st-lead2,
#community .cm-lead2
{
  font-family: var(--fx-text-font);
  font-weight: var(--weight-size);
  font-size: clamp(18px, 2.2vw, 26px);
  /*font-size: var(--fx-desc-size);*/
  line-height: 1.35;
  margin: 0 0 var(--fx-lead-mb, 10px);
}

/* CTAのテキスト/間隔を Community と同じ感に */
#studio .st-cta,
#gooods .st-cta,
#community .cm-cta{
  gap: 20px;           /* テキストと矢印の間隔を広げる（既定:14px） */
  padding: 8px 10px !important;  /* クリック当たり判定を広げる
                                    ※ もとの padding:0!important を上書き */
}

/* CTA ラベルも揃える（必要なら） */
#studio .st-list-label,
#goods  .st-list-label,
#community .cm-list-label
{
  font-family: var(--fx-text-font);
  font-weight: var(--weight-size);
  font-size: var(--fx-desc-size);
}

/* スマホだけ少し控えめにする場合（任意） */
/*
@media (max-width: 980px){
  #community{ --cta-icon: 28px; }
  #community .cm-list-label{ font-size: clamp(16px, 4vw, 20px); }
  #community .cm-cta{ padding: 6px 8px !important; gap: 14px; }
}
*/