@charset "utf-8";

/* =========================================================
   FUNclusion Week 2026  –  style.css
   ========================================================= */

:root{
  /* ブランドカラー（カラーユニバーサルデザイン配慮パレット） */
  --pink:#cc79a7;    /* R204 G121 B167 */
  --yellow:#f0e442;  /* R240 G228 B66  */
  --green:#009667;   /* R0   G150 B103 */

  --ink:#111111;
  --ink-weak:#555555;
  --paper:#ffffff;
  --frame:#f0e442;          /* ページ左右の帯 */
  --line:#111111;
  --card-bg:#f4f4f4;

  --rule-w:21.6px;          /* 中央カラム両端のグレー境界線 */
  --rule:#c4c4c4;
  --pad:59.8px;             /* 境界線の内側のパディング（実測） */
  --col-w:651.2px;          /* 中央カラム総幅（境界線を含む） */
  --gutter:calc(var(--rule-w) + var(--pad));
  --side-w:min(640px, calc((100vw - var(--col-w)) / 2 - 18px)); /* 左右カラム：最大640px */
  --fs:16px;                /* ルート文字サイズ（可変） */
  --radius:999px;

  /* デザイン指定：A-OTF 見出ゴMB31 Pro（モリサワ）／Web代替 */
  --font-base:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;

}

/* 文字サイズ切替 */
:root{ --fs-scale:1; }
html[data-fontsize="large"]{ --fs:18.5px; --fs-scale:1.16; }
html[data-fontsize="xlarge"]{ --fs:21px; --fs-scale:1.31; }

/* 文字色テーマ */
html[data-theme="dark"]{
  --ink:#f2f2f2; --ink-weak:#bdbdbd; --paper:#141414;
  --frame:#2a2a2a; --card-bg:#242424; --line:#f2f2f2; --rule:#3a3a3a;
  --pink:#ff7fb2; --green:#49cf9b; --yellow:#ffe94d;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  font-size:var(--fs);
  scroll-behavior:smooth;
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-base);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
}

/* ページ左右の黄色い帯 */
body::before,body::after{
  content:""; position:fixed; top:0; bottom:0; width:18px;
  background:var(--frame); z-index:50; pointer-events:none;
}
body::before{ left:0; }
body::after{ right:0; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; left:8px; top:-100px; z-index:999;
  background:var(--ink); color:var(--paper); padding:.6em 1em; border-radius:8px;
  transition:top .15s;
}
.skip-link:focus{ top:8px; }

:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }

/* ====== パーレン（公式ロゴから抽出した実形状・インラインSVG） ====== */
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.paren{
  display:block; flex:none;
  height:1.25em; width:auto; aspect-ratio:82 / 242;
  fill:currentColor;
  overflow:visible;
}
.paren--r{ transform:scaleX(-1); }
.paren--pink{ color:var(--pink); }
.paren--yellow{ color:var(--yellow); }
.paren--green{ color:var(--green); }

/* ====== ロゴ ====== */
.logo,.drawer__logo{ display:block; text-decoration:none; }
/* ロゴとナビボタンの中心を揃える */
.side--left .logo{ display:flex; justify-content:center; }
.logo img{ width:min(clamp(170px,59.5cqi,381px), 46vh); max-width:100%; }
.drawer__logo img{ width:min(78%,320px); margin:0 auto; }
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .drawer__logo img{ filter:invert(1) hue-rotate(180deg); }

/* ====== 日付・メタ ====== */
.eventdate{
  font-weight:900;
  margin:1em 0 .35em;
  line-height:1.3;
  letter-spacing:0;
}
.eventdate--c{ text-align:center; }
.eventdate{ font-size:1rem; }
.eventdate__y{ font-size:.6em; }
.eventdate__d{ font-size:1em; }
.eventdate__w{ font-size:.44em; }
.eventdate__dash{ font-size:.76em; padding:0 .12em; }
.side .eventdate{ font-size:min(calc(clamp(22px,6.1cqi,39px) * var(--fs-scale)), 4.8vh); }         /* 12.04 を 39px */
.drawer .eventdate{ font-size:2.4rem; }

.eventmeta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3em .5em;
  font-weight:700; margin:0 0 .25em; line-height:1.6;
}
.eventmeta--c{ justify-content:center; }
.eventmeta__plain{ font-size:1em; letter-spacing:.01em; }

.chip{
  display:inline-flex; align-items:center; gap:.28em;
  font-size:1em; white-space:nowrap;
}
.chip .paren{ height:1.99em; }         /* 実測 69.6px（文字35px時） */
.side .chip .paren{ height:1.77em; }
.side .eventmeta{ font-size:min(calc(clamp(15px,4.28cqi,27.4px) * var(--fs-scale)), 3.3vh); }        /* 下北線路街 27.4px */
.drawer .eventmeta{ font-size:1.5rem; }

/* ABOUT内の日付ブロック：左揃えのまま中央に配置 */
.eventblock{
  width:100%; margin:2rem auto 3.2rem;
  text-align:center;
}
.eventblock__logo{ width:min(100%, 440px); height:auto; margin:0 auto; }
html[data-theme="dark"] .eventblock__logo{ filter:invert(1) hue-rotate(180deg); }
.eventblock .eventdate{ margin-top:0; }
.eventdate--lg{ font-size:min(4.76rem, 12.5cqi); }   /* 76px・カラム幅を超えない */



.eventmeta--lg{ font-size:min(2.11rem, 5.55cqi); flex-wrap:nowrap; gap:.3em; }  /* 1行を維持 */
.eventmeta--lg .eventmeta__plain{ white-space:nowrap; }


/* ====== ナビボタン ====== */
.navlist{ display:flex; flex-direction:column; gap:.5em; margin-top:1.6em; }
.navbtn{
  display:flex; align-items:baseline; gap:.45em;
  border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--paper);
  padding:.5em .95em; text-decoration:none; white-space:normal;
  transition:background .15s,color .15s;
}
.navbtn:hover{ background:var(--ink); color:var(--paper); }
.navbtn:hover .navbtn__ico{ background:var(--paper); }
.navbtn:hover .navbtn__ico::before{ border-color:var(--ink); }
.navbtn:hover .navbtn__ico::after{ background:var(--ink); }
.navbtn__en{ font-weight:900; font-size:1em; letter-spacing:.02em; white-space:nowrap; }
.navbtn__en--sm{ font-size:.95em; }
/* ロゴ（KV）の明朝体に合わせて、ナビの日本語サブラベルを明朝に */
.navbtn__ja:not(.navbtn__ja--lg){
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  font-weight:600;
}
.navbtn__ja{ font-size:.54em; font-weight:700; letter-spacing:.01em; line-height:1.4; }
.navbtn__ja--lg{ font-size:1em; font-weight:900; letter-spacing:.26em; }  /* 英字（TOP／ABOUT等）と同じ級数・太さ */
.side .navlist{
  font-size:min(calc(clamp(14px,3.91cqi,25px) * var(--fs-scale)), 3vh);
  gap:min(.5em, 1.3vh); margin-top:min(1.6em, 3vh);
}          /* TOP/ABOUT/PROGRAM 25px */
.drawer .navlist{ font-size:1.25rem; }
/* 文字を大きくしたとき、ナビボタンが細かく折り返さないよう調整 */
html[data-fontsize="large"]  .drawer .navlist{ font-size:1.15rem; }
html[data-fontsize="xlarge"] .drawer .navlist{ font-size:1.05rem; }
html[data-fontsize="xlarge"] .navbtn{ padding:.5em .8em; gap:.4em; }
html[data-fontsize="xlarge"] .navbtn__ja:not(.navbtn__ja--lg){ font-size:.5em; }
/* スマホのメニューは幅が狭いため、サブラベルを一段小さく */
@media (max-width:1099px){
  .drawer .navbtn__ja:not(.navbtn__ja--lg){ font-size:.48em; letter-spacing:0; }
  .drawer .navbtn{ padding:.5em .85em; }
}
.navbtn__ico{
  margin-left:auto; flex:none; position:relative; align-self:center;
  width:1.6em; height:1.6em; border-radius:50%;
  background:var(--ink);
}
/* 下向き矢印 */
.navbtn__ico::before{
  content:""; position:absolute; left:50%; top:58%;
  width:.4em; height:.4em;
  border-right:1.5px solid var(--paper); border-bottom:1.5px solid var(--paper);
  transform:translate(-50%,-50%) rotate(45deg);
}
.navbtn__ico::after{
  content:""; position:absolute; left:50%; top:34%;
  width:1.5px; height:.52em; background:var(--paper);
  transform:translateX(-50%);
}

/* ====== サイドカラム（PC） ====== */
.side{
  position:fixed; top:0; bottom:0; z-index:20;
  width:var(--side-w);
  container-type:inline-size;
  display:flex; align-items:center;
  background:var(--paper);
  overflow-y:auto;
}
/* 以降 cqi = サイドカラム幅の1%。デザイン（640px幅）の実測値を比率で指定 */
.side__inner{ padding:min(2rem, 3vh) 0; width:100%; }
.side--left .side__inner{ padding-left:clamp(20px,21.6cqi,138px); padding-right:clamp(16px,6cqi,38px); }
html[data-fontsize="large"]  .side--left .side__inner{ padding-left:clamp(18px,16cqi,102px); }
html[data-fontsize="xlarge"] .side--left .side__inner{ padding-left:clamp(16px,11cqi,70px); padding-right:clamp(14px,4cqi,26px); }
.side--right .side__inner{ padding-left:clamp(20px,14.3cqi,92px); padding-right:clamp(16px,6cqi,38px); }
html[data-fontsize="large"]  .side--right .side__inner{ padding-left:clamp(18px,10cqi,64px); }
html[data-fontsize="xlarge"] .side--right .side__inner{ padding-left:clamp(16px,7cqi,45px); padding-right:clamp(14px,4cqi,26px); }
/* 中央カラムに隣接させる（広い画面でも端に離れない） */
.side--left{ left:max(18px, calc(50% - var(--col-w) / 2 - var(--side-w))); }
.side--right{ right:max(18px, calc(50% - var(--col-w) / 2 - var(--side-w))); }


.a11y__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4em .7em;
  margin-bottom:min(.9em, 1.8vh);
  font-size:min(calc(clamp(15px,4.69cqi,30px) * var(--fs-scale)), 3.4vh);
}
.a11y__label{ font-weight:700; font-size:1em; white-space:nowrap; }
.select{ position:relative; }
.select::after{
  content:"▼"; position:absolute; right:.6em; top:50%; transform:translateY(-50%);
  font-size:.75em; pointer-events:none;
}
.select{ max-width:100%; }
.select select{
  appearance:none; -webkit-appearance:none; max-width:100%;
  font-family:inherit; font-size:1em; font-weight:700; color:inherit;
  background:var(--paper); border:1.5px solid var(--line); border-radius:0;
  padding:.25em 2.2em .25em .8em; line-height:1.7;
  letter-spacing:.1em;
}
.side__note{
  font-size:min(calc(clamp(13px,4.17cqi,26.7px) * var(--fs-scale)), 2.9vh);
  font-weight:700; line-height:1.8;
  margin:min(clamp(16px,3.2cqi,22px), 3.4vh) 0 min(clamp(16px,3cqi,20px), 3.4vh);
}

/* ====== 中央ステージ ====== */
.stage{
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:var(--col-w);
  background:var(--paper);
  min-height:100vh;
}
/* 中央カラム両端のグレー境界線（カルーセル画像はこの上に乗る） */
.stage::before,.stage::after{
  content:""; position:absolute; top:0; bottom:0;
  width:var(--rule-w); background:var(--rule); z-index:0;
}
.stage::before{ left:0; }
.stage::after{ right:0; }
.column{ position:relative; container-type:inline-size; padding:0 var(--rule-w); padding-bottom:6rem; }


/* ====== HERO ====== */
.hero{ position:relative; aspect-ratio:9/16; overflow:hidden; }
.hero > *{ max-width:100%; }
/* 3秒ごとに1秒かけてクロスフェードする背景写真 */
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s ease-in-out;
}
.hero__img.is-active{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .hero__img{ transition:none; }
}
.hero__logo{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  margin:0; display:flex; justify-content:center;
}
.hero__logo img{ width:min(60%,380px); }

/* 写真の自動切り替えを止めるボタン（WCAG 2.2.2） */
/* ふだんは見せず、ヒーローにカーソルを置いたときとキーボード操作時だけ現れる
   （自動で切り替わる写真には停止手段が必要／WCAG 2.2.2） */
.hero__pause{
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  position:absolute; right:1rem; bottom:1rem; z-index:2;
  max-width:calc(100% - 2rem);
  display:inline-flex; align-items:center; gap:.45em;
  appearance:none; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(17,17,17,.55); color:#fff;
  border-radius:var(--radius); padding:.45em .9em .45em .75em;
  font-family:inherit; font-size:.82rem; font-weight:700; line-height:1.3;
  backdrop-filter:blur(2px);
}
.hero:hover .hero__pause,
.hero__pause:focus-visible{ opacity:1; pointer-events:auto; }
.hero__pause:hover{ background:rgba(17,17,17,.78); }
@media (prefers-reduced-motion:reduce){ .hero__pause{ transition:none; } }
.hero__pause-ico{
  position:relative; flex:none; width:.8em; height:.9em;
}
/* 一時停止（‖） */
.hero__pause-ico::before,.hero__pause-ico::after{
  content:""; position:absolute; top:0; width:.26em; height:100%; background:#fff;
}
.hero__pause-ico::before{ left:0; }
.hero__pause-ico::after{ right:0; }
/* 停止中は再生（▶）に変わる */
.hero__pause[aria-pressed="true"] .hero__pause-ico::before{
  left:.05em; width:0; height:0; top:50%;
  border-left:.7em solid #fff;
  border-top:.45em solid transparent; border-bottom:.45em solid transparent;
  transform:translateY(-50%);
}
.hero__pause[aria-pressed="true"] .hero__pause-ico::after{ display:none; }

@media (max-width:480px){
  .hero__pause{ font-size:.74rem; right:.7rem; bottom:.7rem; }
}

/* ====== セクション ====== */
.sec{ padding:4.5rem var(--pad) 0; }
.sec--tight{ padding-top:1.5rem; }

/* 見出し：パーレンはカラムの左右端に配置 */
.sechead,.subhead,.statement-head{
  display:flex; align-items:center; justify-content:space-between;
  text-align:center; gap:1rem; padding:0 .9rem;
}
.sechead{ margin:0 0 3rem; }
.sechead .paren{ height:4.8rem; }      /* 実測 76.8px */
.sechead__t{ flex:1; }
.sechead__en{ display:block; font-weight:900; font-size:min(2.38rem, 6.25cqi); letter-spacing:.04em; line-height:1.2; }
.sechead__en--sm{ font-size:1.58rem; }
.sechead__ja{ display:block; font-size:.9rem; font-weight:700; margin-top:.2em; letter-spacing:.08em; }
/* ロゴ（KV）に合わせて、見出しの日本語サブラベルも明朝に */
.sechead__ja:not(.sechead__ja--lg){
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  font-weight:600; font-size:.95rem;
}
.sechead__ja--lg{ font-size:min(2.14rem, 5.63cqi); font-weight:900; letter-spacing:.2em; margin:0; }

.subhead{
  margin:4rem 0 1.6rem;
  font-size:2.16rem; font-weight:900; letter-spacing:.12em;
}
.subhead .paren{ height:4.75rem; }     /* 実測 76px */
.subhead span{ flex:1; }

.statement-head{
  margin:3rem 0 2.6rem;
  /* ロゴ（KV）に合わせて明朝体 */
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  font-weight:600; font-size:min(2rem, 5.2cqi); line-height:1.95; letter-spacing:.14em;
}
.statement-head .paren{ height:8.13rem; } /* 実測 130px */
.statement-head__t{ flex:1; text-align:center; }

/* ステートメント本文もロゴ（KV）に合わせて明朝体 */
.statement{
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  font-size:1.08rem; line-height:2.25; font-weight:600;
  padding-left:37.9px;   /* 本文は左97.7px／右59.8px（実測） */
}
.statement p{ margin:0 0 1.8em; }

.lead{ font-size:1.02rem; line-height:2.1; font-weight:700; margin:0 0 2.5rem; }

.note{ text-align:center; font-size:1.51rem; font-weight:700; margin:2.2rem 0 0; }
.coming + .note{ margin-top:.8rem; }

.note--strong{ margin-top:2.8rem; }

/* 昨年の記録映像 */
.video{
  display:block;
  width:calc(100% - 50px); height:auto;   /* height 属性より CSS を優先させる */
  aspect-ratio:16/9; background:#000;
  margin:1.5rem 25px 0;
}

/* ====== プログラム一覧（2カラムグリッド） ====== */
.program-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2.8rem 1.6rem;
  margin:3rem 0 0;
  padding:0 var(--pad);
}
.program-grid .card{ margin:0; }
/* カードごとにブランドカラーを巡回させる */
.program-grid .card:nth-child(3n+1){ --accent:var(--pink); }
.program-grid .card:nth-child(3n+2){ --accent:var(--green); }
.program-grid .card:nth-child(3n+3){ --accent:var(--yellow); }

/* button の中身が垂直中央に寄るのを防ぎ、画像を上端に揃える */
.program-grid .card__btn{
  display:flex; flex-direction:column; justify-content:flex-start;
  height:100%;
}

/* 画像は細い黒枠で囲む */
.program-grid .card__btn img{
  border:1.5px solid var(--line);
  background:var(--paper);
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

/* タイトル行：左にタイトル、右に丸い矢印（ナビボタンと同じ意匠） */
.card__foot{
  display:flex; align-items:center; gap:.6em;
  margin-top:.9em;
}
.program-grid .card__title{
  flex:1; margin:0; text-align:left;
  font-size:min(1.02rem, 3.3cqi); line-height:1.55;
}
.card__ico{
  flex:none; position:relative;
  width:1.9em; height:1.9em; border-radius:50%;
  background:var(--ink);
  transition:background-color .22s ease, transform .22s ease;
}
.card__ico::before{   /* 矢印の軸 */
  content:""; position:absolute; left:50%; top:50%;
  width:.62em; height:1.5px; background:var(--paper);
  transform:translate(-50%,-50%);
}
.card__ico::after{    /* 矢印の先端 */
  content:""; position:absolute; left:58%; top:50%;
  width:.34em; height:.34em;
  border-top:1.5px solid var(--paper); border-right:1.5px solid var(--paper);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ホバー／フォーカス：アクセントカラーで反応する */
.program-grid .card__btn:hover img,
.program-grid .card__btn:focus-visible img{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent);
  transform:translateY(-4px);
}
.program-grid .card__btn:hover .card__ico,
.program-grid .card__btn:focus-visible .card__ico{
  background:var(--accent);
  transform:translateX(3px);
}
.program-grid .card__btn:hover .card__title{
  text-decoration:underline; text-underline-offset:.22em;
}
html[data-theme="dark"] .program-grid .card__btn img{ background:#fff; }

@media (prefers-reduced-motion:reduce){
  .program-grid .card__btn img,.card__ico{ transition:none; }
  .program-grid .card__btn:hover img,
  .program-grid .card__btn:focus-visible img{ transform:none; }
  .program-grid .card__btn:hover .card__ico,
  .program-grid .card__btn:focus-visible .card__ico{ transform:none; }
}

/* ストーリー：記事へのリンク（画像は16:9） */
.story-grid .card__btn img{ aspect-ratio:16/9; }
.story-grid .card__btn{ text-decoration:none; color:inherit; }
/* 外部リンクを示す右上向きの矢印 */
.card__ico--ext::before{
  width:.6em; height:1.5px;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.card__ico--ext::after{
  left:56%; top:44%;
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* ====== カルーセル（カラム全幅にブリード） ====== */
.carousel{ margin-top:2.5rem; }
.carousel__viewport{
  display:flex; gap:1.2rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.carousel__viewport::-webkit-scrollbar{ display:none; }
.card{ flex:0 0 100%; scroll-snap-align:center; margin:0; }
.card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--card-bg);
}
.card figcaption,
.card__title{
  display:block;
  margin:1.2em var(--pad) 0; text-align:center;
  font-weight:900; font-size:1.36rem; line-height:1.7;
}
/* 画像とタイトルをまとめてクリックできるようにする */
.card__btn{
  appearance:none; border:0; padding:0; width:100%;
  background:none; color:inherit; font:inherit; text-align:inherit;
  cursor:pointer; display:block;
}
.card__btn img{ transition:opacity .2s ease; }
.card__btn:hover img{ opacity:.82; }
.card__btn:hover .card__title{ text-decoration:underline; text-underline-offset:.25em; }
.card__eyebrow{ display:block; font-weight:700; letter-spacing:.08em; margin-bottom:.1em; }

.carousel__ctrl{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  margin-top:1.6rem;
}
/* 細い山形の矢印 */
.carousel__arrow{
  appearance:none; border:0; background:none; cursor:pointer;
  position:relative; width:1.6rem; height:1.6rem; padding:0;
}
.carousel__arrow::before{
  content:""; position:absolute; left:50%; top:50%;
  width:.75rem; height:.75rem;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:translate(-40%,-50%) rotate(45deg);
}
.carousel__arrow--next::before{
  border-left:0; border-bottom:0;
  border-right:2px solid var(--ink); border-top:2px solid var(--ink);
  transform:translate(-60%,-50%) rotate(45deg);
}
.carousel__arrow[disabled]{ opacity:.25; cursor:default; }
.carousel__dots{ display:flex; gap:.55rem; }
.carousel__dot{
  appearance:none; cursor:pointer; padding:0;
  width:.95rem; height:.95rem; border-radius:50%;
  border:2px solid var(--ink); background:transparent;
}
.carousel__dot[aria-current="true"]{ background:var(--green); border-color:var(--green); }

/* ====== アコーディオン ====== */
.acc{ border-top:1.5px solid var(--line); margin:0 -15px; }
.acc__item{ border-bottom:1.5px solid var(--line); }
.acc__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.8em;
  padding:.9em .2em; font-weight:700; font-size:1.54rem;
  letter-spacing:.12em;
}
.acc__item summary::-webkit-details-marker{ display:none; }

/* パーレンで囲んだ ＋ / − */
.plus{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:.08em;
}
.plus .paren{ height:2.66rem; }        /* 実測 42.5px */
.plus b{ position:relative; width:1.3rem; height:2rem; }
.plus b::before,.plus b::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ink);
  transform:translate(-50%,-50%);
}
.plus b::before{ width:1.15rem; height:2.5px; }
.plus b::after{ width:2.5px; height:1.15rem; transition:transform .2s; }
.acc__item[open] .plus b::after{ transform:translate(-50%,-50%) scaleY(0); }

.acc__body{ padding:0 .2em 1.6em; font-size:1.02rem; line-height:1.95; }
.acc__body p{ margin:0; }
.acc__blk{ margin-bottom:1.8em; }
.acc__blk:last-child{ margin-bottom:0; }
.acc__blk h4{ margin:0 0 .1em; font-size:1em; font-weight:700; }
.acc__links{ display:flex; flex-direction:column; gap:.6em; margin-top:1em!important; }
.acc__link{
  align-self:flex-start; font-weight:700;
  text-decoration:underline; text-underline-offset:.22em;
  text-decoration-thickness:1.5px;
}
.acc__link:hover{ color:var(--green); }

/* 使用カラーの解説 */
.swatch{ list-style:none; padding:0; margin:.4em 0 0; }
.swatch li{
  display:grid; grid-template-columns:2.6em 5.6em 1fr;
  align-items:center; gap:.9em;
  padding:.35em 0;
}
.swatch__chip{ width:2.6em; height:2.6em; flex:none; }
.swatch__name{ font-weight:700; font-size:.85em; line-height:1.35; }
.swatch__desc{
  border-left:1.5px solid var(--line); padding-left:1em;
  line-height:1.6;
}
code{ font-size:.9em; }

/* ====== CONTACT ====== */
.mail{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  font-weight:700; font-size:min(2.04rem, 5.4cqi); margin:2.4rem 0 0; letter-spacing:.01em;
}
.mail__ico{ width:1.3em; height:.93em; flex:none; }
.mail a{ text-decoration:none; border-bottom:2px solid currentColor; }

.sns{ display:flex; justify-content:center; gap:1.3rem; list-style:none; padding:0; margin:1.6rem 0 0; }
.sns a{
  position:relative;
  width:7rem; height:7rem; border-radius:50%; border:0;
  /* 枠線は inset shadow で描く（ホバー時に境界が残らないように） */
  box-shadow:inset 0 0 0 2.5px var(--line);
  display:grid; place-items:center; text-decoration:none; color:var(--ink);
  background:var(--paper);
  transition:transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.sns svg{
  width:3.6rem; height:3.6rem;
  transition:transform .22s ease;
}

/* ホバー／フォーカス：ブランドカラーで塗りつぶし、アイコンを白抜きに */
.sns a:hover,
.sns a:focus-visible{ transform:translateY(-4px); }
.sns a:hover svg,
.sns a:focus-visible svg{ transform:scale(1.08); }

.sns__ig:hover,
.sns__ig:focus-visible{
  box-shadow:none;
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.sns__ig:hover svg path,
.sns__ig:hover svg circle,
.sns__ig:focus-visible svg path,
.sns__ig:focus-visible svg circle{ fill:#fff; }

.sns__x:hover,
.sns__x:focus-visible{ background:var(--ink); box-shadow:none; }
.sns__x:hover svg path,
.sns__x:focus-visible svg path{ fill:var(--paper); }

@media (prefers-reduced-motion:reduce){
  .sns a,.sns svg{ transition:none; }
  .sns a:hover,.sns a:focus-visible{ transform:none; }
  .sns a:hover svg,.sns a:focus-visible svg{ transform:none; }
}

/* クレジット */
.credit{ text-align:center; margin-top:1.8rem; }
.credit--next{ margin-top:2.6rem; }
.credit--next .credit__role{ letter-spacing:.12em; padding:.3em 1.1em; }
.credit__role{
  display:inline-block; margin:0 0 .9rem;
  background:var(--ink); color:var(--paper);
  font-size:.82rem; font-weight:700; letter-spacing:.2em;
  padding:.3em 1.2em .3em 1.4em; border-radius:999px;
}
.credit__org{
  display:flex; align-items:center; justify-content:center; gap:.7em;
  margin:0; font-size:1.25rem; font-weight:900;
}
/* 主催（ラベル → 社名）と同じ組み方で見せる */
.credit__org--soon{ font-size:2.04rem; letter-spacing:.04em; margin-top:.15em; }
.credit__logo{ width:2.4em; height:auto; flex:none; }

.coming{
  text-align:center; font-weight:900;
  font-size:min(2.04rem, 5.4cqi); letter-spacing:.04em; margin:1.8rem 0 0;
}

/* ====== SP フローティングUI ====== */
.spbar{
  position:fixed; top:.7rem; right:.7rem; z-index:60;
  display:flex; align-items:center; gap:.5rem;
}
.spbar__size{
  appearance:none; cursor:pointer; border:2px solid var(--ink);
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius); padding:.2em .8em;
  font-family:inherit; font-weight:700; line-height:1.15; text-align:center;
}
.spbar__size-t{ display:block; font-size:.62rem; }
.spbar__size-v{ display:block; font-size:.72rem; }

.spbar__toggle{
  appearance:none; cursor:pointer; position:relative;
  width:3.6rem; height:2rem; border-radius:var(--radius);
  border:2px solid #111; background:#111;
}
.spbar__toggle-knob{
  position:absolute; top:50%; right:.18rem; transform:translateY(-50%);
  width:1.4rem; height:1.4rem; border-radius:50%; background:#fff;
  transition:right .18s;
}
.spbar__toggle-moon{
  position:absolute; left:.45rem; top:50%; transform:translateY(-50%);
  color:#fff; font-size:.95rem; line-height:1;
}
.spbar__toggle[aria-pressed="true"]{ background:#000; border-color:#fff; }
.spbar__toggle[aria-pressed="true"] .spbar__toggle-knob{ right:calc(100% - 1.58rem); }

.spbar__burger{
  appearance:none; cursor:pointer; position:relative;
  width:3rem; height:2rem; border:0; border-radius:.5rem;
  background:linear-gradient(90deg,var(--green) 0 18%,var(--paper) 18% 82%,var(--pink) 82% 100%);
  display:grid; align-content:center; justify-items:center; gap:.28rem;
}
.spbar__burger span{ display:block; width:1.3rem; height:2.5px; background:var(--ink); }

/* ====== ドロワー ====== */
.drawer{ position:fixed; inset:0; z-index:80; }
.drawer[hidden]{ display:none; }
.drawer__bg{
  position:absolute; inset:0;
  background:url("../images/hero-01.jpg") center/cover no-repeat;
}
.drawer__bg::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.82); }
html[data-theme="dark"] .drawer__bg::after{ background:rgba(0,0,0,.84); }
.drawer__inner{
  position:relative; height:100%; overflow-y:auto;
  padding:4.6rem 1.5rem 3rem;
  max-width:var(--col-w); margin:0 auto;
}
/* 閉じるボタン（支給画像） */
.drawer__close{
  position:absolute; top:1.1rem; right:1.1rem; z-index:2;
  appearance:none; border:0; background:none; cursor:pointer; padding:0;
  display:block; line-height:0;
  transition:transform .22s ease;
}
.drawer__close img{ height:2.9rem; width:auto; }
.drawer__close:hover,
.drawer__close:focus-visible{ transform:rotate(90deg); }
html[data-theme="dark"] .drawer__close img{ filter:invert(1) hue-rotate(180deg); }
@media (prefers-reduced-motion:reduce){
  .drawer__close{ transition:none; }
  .drawer__close:hover,.drawer__close:focus-visible{ transform:none; }
}

.drawer__logo{ display:block; text-decoration:none; }
.drawer__logo{ text-align:center; }
.drawer__note{ font-size:.92rem; line-height:2; font-weight:700; margin:2.4rem 0; }

/* ====== プログラム詳細モーダル ====== */
.modal{ position:fixed; inset:0; z-index:90; }
.modal[hidden]{ display:none; }
.modal__bg{
  position:absolute; inset:0;
  background:rgba(17,17,17,.55);
}
.modal__panel{
  position:relative; outline:none;
  width:min(var(--col-w), calc(100vw - 2.4rem));
  max-height:calc(100vh - 3rem);
  margin:1.5rem auto; overflow-y:auto;
  background:var(--paper);
  padding:4.4rem var(--pad) 3.4rem;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
}
.modal__close{
  position:absolute; top:1.1rem; right:1.1rem; z-index:2;
  appearance:none; border:0; background:none; cursor:pointer; padding:0;
  display:block; line-height:0;
  transition:transform .22s ease;
}
.modal__close img{ height:2.9rem; width:auto; }
.modal__close:hover,
.modal__close:focus-visible{ transform:rotate(90deg); }
html[data-theme="dark"] .modal__close img{ filter:invert(1) hue-rotate(180deg); }

.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0 .9rem; margin:0 0 2rem; text-align:center;
}
.modal__head .paren{ height:4.2rem; }
.modal__head-t{
  flex:1; font-weight:900; font-size:min(1.6rem, 4.2cqi); line-height:1.6;
}
.modal__img{
  display:block; width:100%; max-height:46vh;
  object-fit:contain; margin:0 auto 2rem;
}
/* 場所：ブランドカラーのラベルを添えて本文より先に示す */
.modal__place{
  display:flex; align-items:baseline; gap:.7em;
  margin:0 0 1.6rem; font-size:1.02rem; font-weight:700; line-height:1.7;
}
.modal__place[hidden]{ display:none; }
.modal__place-label{
  flex:none; align-self:center;
  background:var(--green); color:#fff;
  font-size:.82rem; letter-spacing:.14em;
  padding:.25em .9em; border-radius:999px;
}
.modal__body{ font-size:1.02rem; line-height:2.1; font-weight:700; }
.modal__body p{ margin:0 0 1.4em; }
.modal__body p:last-child{ margin-bottom:0; }

/* クリエイター紹介 */
.creator-store[hidden]{ display:none; }
.modal__creator{
  margin-top:2.6rem; padding-top:1.8rem;
  border-top:1.5px solid var(--line);
}
.modal__creator[hidden]{ display:none; }
.modal__creator-head{
  display:inline-block; margin:0 0 1.2rem;
  background:var(--ink); color:var(--paper);
  font-size:.82rem; font-weight:700; letter-spacing:.14em;
  padding:.3em 1em; border-radius:999px;
}
/* 顔写真は正方形、ロゴは比率を保って全体を見せる */
.creator__photo{
  display:block; width:7.5rem; height:7.5rem;
  object-fit:cover; background:var(--paper);
  border:1.5px solid var(--line);
  margin:0 0 1.1rem;
}
.creator__photo--logo{
  width:min(16rem,100%); height:auto; aspect-ratio:auto;
  object-fit:contain; border:0; padding:0;
}
html[data-theme="dark"] .creator__photo--logo{ background:#fff; padding:.6rem; }
.creator__name{
  margin:0; font-size:1.3rem; font-weight:900; line-height:1.5;
}
.creator__role{
  margin:.2em 0 0; font-size:.92rem; font-weight:700; color:var(--green);
}
.creator__bio{
  margin-top:1rem; font-size:.95rem; line-height:2; font-weight:500;
}
.creator__bio p{ margin:0 0 1.2em; }
.creator__bio p:last-child{ margin-bottom:0; }

@media (max-width:1099px){
  .modal__panel{ padding:4rem 1.5rem 3rem; }
  .modal__head{ gap:.6rem; padding:0 .4rem; }
  .modal__head .paren{ height:3.2rem; }
  .modal__head-t{ font-size:1.25rem; }
}
@media (prefers-reduced-motion:reduce){
  .modal__close{ transition:none; }
  .modal__close:hover,.modal__close:focus-visible{ transform:none; }
}

/* ====== レスポンシブ ====== */
@media (min-width:1100px){
  .spbar,.drawer{ display:none!important; }
  .hero{ aspect-ratio:4/5; }
}
@media (max-width:1099px){
  .side{ display:none; }
  body::before,body::after{ display:none; }
  .stage{ max-width:720px; }
  .stage::before,.stage::after{ display:none; }
  :root{ --rule-w:0px; --pad:1.5rem; }
  .sec{ padding-top:3.4rem; }
  .sechead .paren{ height:3.6rem; }
  .subhead .paren{ height:3.4rem; }
  .statement-head .paren{ height:5.2rem; }
  /* いずれもカラム幅を超えないよう cqi で上限を設ける */
  .sechead__en{ font-size:min(1.6rem, 6.5cqi); }
  .sechead__en--sm{ font-size:min(1.35rem, 5.6cqi); }
  .sechead__ja--lg{ font-size:min(1.6rem, 6.5cqi); }
  .eventdate--lg{ font-size:min(2.3rem, 9.4cqi); }
  .eventmeta--lg{ font-size:min(1.5rem, 6cqi); }
  .statement-head{ font-size:min(1.5rem, 6.2cqi); gap:.5rem; padding:0 .4rem; }
  .statement-head .paren{ height:min(5.2rem, 14cqi); }
  .sechead,.subhead{ gap:.6rem; padding:0 .5rem; }
  .subhead{ font-size:min(1.6rem, 6.5cqi); }
  .note{ font-size:min(1.15rem, 5cqi); }
  .card figcaption{ font-size:min(1.1rem, 4.6cqi); }
  .acc{ margin:0; }
  /* 明朝は字幅が広いため、スマホでは少し小さく・字間を詰めて折り返しを減らす */
  .statement{ font-size:.98rem; letter-spacing:0; padding-left:0; }
  .acc__item summary{ font-size:min(1.2rem, 5cqi); }
  .mail{ font-size:min(1.45rem, 5.6cqi); }
  .sns a{ width:4.6rem; height:4.6rem; }
  .sns svg{ width:2.4rem; height:2.4rem; }
  .coming{ font-size:1.7rem; }
  .carousel__viewport{ gap:1rem; }
  .program-grid{ gap:2.2rem 1rem; padding:0 var(--pad); }
}
@media (max-width:480px){
  .mail{ font-size:min(1.15rem, 5.3cqi); }
  .coming{ font-size:min(1.5rem, 6.5cqi); }
  .sechead__en{ font-size:min(1.45rem, 6.3cqi); }
  .eventdate--lg{ font-size:min(2rem, 8.6cqi); }
  .eventmeta--lg{ font-size:min(1.3rem, 5.6cqi); }
  .statement-head{ font-size:min(1.35rem, 5.8cqi); }
  .subhead{ font-size:min(1.4rem, 6cqi); }
  .acc__item summary{ font-size:min(1.05rem, 4.6cqi); }
}

/* 印刷 */
@media print{
  .spbar,.drawer,.side{ display:none!important; }
  .stage{ max-width:none; }
}