@charset "UTF-8";
/* =========================================================================
   三島市民文化会館 CMS 表示用スタイル（公演カード／イベントカレンダー／公演詳細）
   クラス名は .mi-* / .ev-* / .cal-* / .fe-* に限定し既存 style.css と衝突しない。
   ========================================================================= */
:root{
  --mi-primary:var(--mi-brand);            /* #006655 コントラスト約7:1 */
  --mi-primary-d:var(--mi-brand-d);
  --mi-primary-light:var(--mi-brand-light); /* 装飾専用。文字色には使わない */
  --mi-ink:#333;
  --mi-line:#e2e6e5;
  --mi-bg-soft:#f3f7f6;
  --mi-red:#c0392b;
}

/* ---- 共通 ---- */
.mi-empty{text-align:center;color:#777;padding:2.4em 1em;font-size:1.05em;}
.mi-lead{margin:0 0 1.6em;line-height:1.9;color:#555;}
.mi-lead a{color:var(--mi-primary);font-weight:700;}
.mi-btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 2.2em;background:var(--mi-primary);color:#fff;text-decoration:none;border-radius:2em;font-weight:700;transition:opacity .2s,background .2s;}
.mi-btn:hover{background:var(--mi-primary-d);color:#fff;}
.mi-btn-outline{background:#fff;color:var(--mi-primary);border:2px solid var(--mi-primary);}
.mi-btn-outline:hover{background:var(--mi-bg-soft);color:var(--mi-primary-d);}
@keyframes miFadeIn{from{opacity:0;}to{opacity:1;}}
.mi-fade-in{animation:miFadeIn .5s ease;}
@media (prefers-reduced-motion:reduce){.mi-fade-in{animation:none;}}

/* ジャンル色タグ／主催バッジ／発売ステータス */
.ev-cat{display:inline-block;padding:.18em .8em;border-radius:1em;font-size:.78em;font-weight:700;color:#fff;line-height:1.5;margin-right:.3em;}
.ev-cat.gc-classic{background:#5b4b8a;}
.ev-cat.gc-music{background:#2e78c4;}
.ev-cat.gc-drama{background:#c0392b;}
.ev-cat.gc-musical{background:#d24a7a;}
.ev-cat.gc-opera{background:#7c3f6e;}
.ev-cat.gc-dance{background:#c94f8a;}
.ev-cat.gc-ballet{background:#e08bb0;}
.ev-cat.gc-tradition{background:#a97428;}
.ev-cat.gc-rakugo{background:#d08a3c;}
.ev-cat.gc-family{background:#3aa34a;}
.ev-cat.gc-performance{background:#0f9b9b;}
.ev-cat.gc-workshop{background:#5a9e3a;}
.ev-cat.gc-event{background:#5a7a99;}
.ev-cat.gc-default{background:#17957f;}
.ev-host{display:inline-block;padding:.14em .7em;border:1px solid #999;border-radius:.3em;font-size:.74em;font-weight:700;color:#555;margin-right:.3em;}
.ev-host-shusai{border-color:var(--mi-primary);color:var(--mi-primary);}
.ev-host-kyosai{border-color:#2e78c4;color:#2e78c4;}
.ev-host-kouen{border-color:#a97428;color:#a97428;}
.ev-host-toriatsukai{border-color:#c0392b;color:#c0392b;}
.ev-sale{display:inline-block;padding:.16em .8em;border-radius:.3em;font-size:.78em;font-weight:700;color:#fff;margin-right:.3em;line-height:1.5;}
.ev-sale-onsale,.ev-sale-presale{background:var(--mi-red);}
.ev-sale-soldout,.ev-sale-ended{background:#7a8a88;}
.ev-sale-cancel{background:#fff;color:var(--mi-red);border:1px solid var(--mi-red);}

/* ---- フィルタバー ---- */
.event-filters{margin:0 0 1.6em;}
.genre-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;list-style:none;margin:0 0 .7em;padding:0;}
.genre-filter .gf-label{font-weight:700;color:#555;font-size:.9em;margin-right:.2em;}
.genre-filter .gf-label::after{content:"：";}
.genre-filter button{border:1px solid var(--mi-line);background:#fff;color:#555;padding:.4em 1.1em;border-radius:2em;font-size:.86em;cursor:pointer;transition:all .15s;font-family:inherit;}
.genre-filter button:hover{border-color:var(--mi-primary);color:var(--mi-primary);}
.genre-filter button.active{background:var(--mi-primary);border-color:var(--mi-primary);color:#fff;}

/* =========================================================================
   公演情報 横型カード（.mi-cards）— チラシ画像＝左／情報＝右。2列・レスポンシブ1列
   ========================================================================= */
.mi-cards{max-width:1000px;margin:0 auto;}
.ev-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4em;}
/* カードは2列グリッドで行内の最も高いカードに高さが揃う。リンクが中身の高さのままだと、
   低いカードの下側に「見た目はカードなのにクリックしても遷移しない帯」ができる（実測で最大55px）。
   チラシ画像は遅延読み込みなので、戻る／進む直後など画像の読み込み前はこの帯がさらに広がる。
   カードを縦の flex にしてリンクを全面に広げる。 */
.ev-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mi-line);border-radius:.6em;overflow:hidden;transition:box-shadow .2s,border-color .2s;}
/* ホバーでカードを浮かせる（translateY）と、カード下端付近にカーソルがあるとき
   「乗る→浮いて外れる→戻って乗る」を繰り返し、押した瞬間と離した瞬間で対象がずれて
   クリックが遷移しないことがある。クリック範囲を動かさず、影と枠線で示す。 */
.ev-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.14);border-color:#c9d6d3;}
.ev-card-link{flex:1 1 auto;display:flex;flex-direction:row;align-items:center;text-decoration:none;color:var(--mi-ink);}
/* チラシは横幅合わせ（横が切れないよう width:100%・高さ自動）。縦横比はそのまま。 */
.ev-card-thumb{position:relative;flex:0 0 37%;max-width:37%;background:var(--mi-bg-soft);overflow:hidden;}
.ev-card-thumb img{width:100%;height:auto;display:block;}
.ev-card-thumb.noimage{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef3f2,#e2ebe9);}
.ev-card-thumb .ev-noimg{color:#9bb0ab;font-size:.82em;font-weight:700;letter-spacing:.05em;text-align:center;line-height:1.4;}
.ev-card-sale{position:absolute;top:0;left:0;padding:.3em .8em;font-size:.72em;font-weight:700;color:#fff;border-radius:0 0 .5em 0;}
.ev-card-sale.ev-sale-onsale,.ev-card-sale.ev-sale-presale{background:var(--mi-red);}
.ev-card-sale.ev-sale-soldout,.ev-card-sale.ev-sale-ended{background:#7a8a88;}
.ev-card-sale.ev-sale-cancel{background:#fff;color:var(--mi-red);border:1px solid var(--mi-red);}
.ev-card-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:1.1em 1.3em;}
.ev-card-body .ev-taglist{margin:0 0 .5em;line-height:1.8;}
/* タイトルは <p>。既存 style.css の h4（▶疑似要素・背景色）を継がない。念のため無効化。 */
.ev-card-title{margin:0 0 .7em;font-size:1.12em;font-weight:700;line-height:1.5;color:var(--mi-ink);background:none;padding:0;}
.ev-card-title::before,.ev-card-title::after{content:none !important;display:none !important;}
.ev-card:hover .ev-card-title{color:var(--mi-primary);}
.ev-card-meta{margin:0;font-size:.86em;}
.ev-card-meta > div{display:flex;gap:.6em;margin-bottom:.35em;line-height:1.6;}
.ev-card-meta > div:last-child{margin-bottom:0;}
.ev-card-meta dt{flex:0 0 3em;color:#fff;background:#9aa8a5;border-radius:.25em;padding:.08em .5em;font-size:.86em;text-align:center;height:fit-content;font-weight:500;}
.ev-card-meta dd{flex:1;margin:0;color:#555;font-weight:500;}
.ev-card-more{font-size:.84em;font-weight:700;color:var(--mi-primary);display:inline-flex;align-items:center;gap:.4em;margin-top:.9em;}
.ev-card-more i{transition:transform .2s;}
.ev-card:hover .ev-card-more i{transform:translateX(3px);}
@media (max-width:760px){
  .ev-card-grid{grid-template-columns:1fr;}
  .ev-card-thumb{flex-basis:38%;max-width:38%;}
  .ev-card-body{padding:.9em 1em;}
  .ev-card-title{font-size:1.02em;}
}

/* =========================================================================
   イベントカレンダー（月毎・表形式）（.mi-calendar）
   ========================================================================= */
.mi-calendar{max-width:1180px;margin:0 auto;}
.cal-nav{display:flex;align-items:center;justify-content:center;gap:1.4em;margin:0 0 1.3em;}
.cal-nav-label{font-size:1.5em;font-weight:700;color:var(--mi-primary-d);min-width:6.5em;text-align:center;letter-spacing:.03em;}
.cal-nav button{width:2.4em;height:2.4em;border-radius:50%;border:1px solid var(--mi-line);background:#fff;color:var(--mi-primary);font-size:1.1em;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.cal-nav button:hover:not(:disabled){background:var(--mi-primary);color:#fff;border-color:var(--mi-primary);}
.cal-nav button:disabled{opacity:.35;cursor:default;}
.cal-month{position:relative;}
.mi-cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* 画面が狭くても列を潰さず、PC相当の幅を保ったまま横スクロール（スワイプ）で見せる */
.mi-cal-table{width:100%;min-width:720px;border-collapse:collapse;background:#fff;font-size:.95em;}
/* 横スクロールが必要なときだけJSで .show を付与。タップ／スクロールで即消える */
.mi-swipe-hint{display:none;position:absolute;top:3.2em;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;background:rgba(0,0,0,.76);color:#fff;font-size:.85em;font-weight:600;padding:.55em 1.15em;border-radius:2em;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.32);}
.mi-swipe-hint i{margin-right:.4em;}
.mi-swipe-hint.show{display:block;animation:miSwipeHintBob 1.3s ease-in-out infinite;}
@keyframes miSwipeHintBob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-64%,0);}}
.mi-cal-table th,.mi-cal-table td{border:1px solid var(--mi-line);padding:.7em .8em;text-align:left;vertical-align:middle;line-height:1.6;}
.mi-cal-table thead th{background:var(--mi-primary);color:#fff;font-weight:700;text-align:center;}
.mi-cal-table .c-date{width:9.5em;white-space:nowrap;text-align:center;font-weight:700;}
.mi-cal-table .c-venue{width:7.5em;}
.mi-cal-table .c-kind{width:6.5em;text-align:center;}
.mi-cal-table .c-contact{width:13em;}
.mi-cal-table tbody td.c-contact{font-size:.9em;color:#555;word-break:break-word;}
.mi-cal-table .c-date .d{font-size:1.1em;}
.mi-cal-table .c-date .w{font-size:.82em;color:#777;margin-left:.15em;}
.mi-cal-table .c-date.wd-sun,.mi-cal-table .c-date.wd-sun .w{color:var(--mi-red);}
.mi-cal-table .c-date.wd-sat,.mi-cal-table .c-date.wd-sat .w{color:#2e78c4;}
.mi-cal-table .cal-row:nth-of-type(even){background:#fafbfb;}
.mi-cal-table .cal-perf{background:#f2f9f7;}
.mi-cal-table .cal-perf:nth-of-type(even){background:#eef6f3;}
.mi-cal-table .c-title a{color:var(--mi-primary-d);font-weight:700;text-decoration:none;}
.mi-cal-table .c-title a:hover{text-decoration:underline;}
.mi-cal-table .cal-closed td{background:#fbeeec;color:var(--mi-red);font-weight:700;text-align:center;}
.mi-cal-table .c-date .cal-time{display:block;font-weight:500;font-size:.8em;color:#666;margin-top:.2em;white-space:nowrap;}
.mi-cal-table .cal-kind{display:inline-block;background:var(--mi-bg-soft);border:1px solid var(--mi-line);border-radius:.25em;padding:.1em .6em;font-size:.82em;color:#555;}
.mi-cal-table .cal-kind-perf{background:var(--mi-primary);border-color:var(--mi-primary);color:#fff;}

/* =========================================================================
   公演詳細（.fe-detail）— フェニーチェ堺（ビジュアル重視ヒーロー）×小山町
   ========================================================================= */
/* 詳細ページ上部：見出し枠を流用しつつ「公演詳細」の大見出しは廃止、パンくずのみ表示 */
.fe-detail-head{text-align:left;padding-bottom:.9em !important;background:none;}
.fe-detail-head::before,.fe-detail-head::after{content:none !important;display:none !important;}
.fe-detail-head .mi-breadcrumb{max-width:960px;margin:0 auto;padding:0 4%;}
/* アーカイブ導線 */
.mi-archive-link{text-align:center;margin:2.2em 0 0;}
.mi-archive-link a{display:inline-flex;align-items:center;gap:.5em;color:var(--mi-primary);font-weight:700;text-decoration:none;padding:.6em 1.4em;border:1px solid var(--mi-line);border-radius:2em;transition:all .15s;}
.mi-archive-link a:hover{background:var(--mi-bg-soft);border-color:var(--mi-primary);}
.mi-breadcrumb{max-width:960px;margin:0 auto 1.4em;font-size:.85em;color:#999;}
/* ページによっては .contact-container a / .faq-container a のように、
   その中のリンクを大きなボタンに仕立てる指定がある（旧テンプレート由来）。
   パンくずはどのページにも入るので、箱に関する指定を明示的に打ち消して
   ただのテキストリンクに戻す。そうしないとHOMEが全幅のボタンになる。 */
.mi-breadcrumb a{
  display:inline;width:auto;max-width:none;margin:0;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;
  font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;
  color:var(--mi-primary);text-decoration:none;
}
.mi-breadcrumb a:hover{text-decoration:underline;background:none;color:var(--mi-primary-d);}
.mi-breadcrumb .cur{color:#666;}
.mi-breadcrumb > span{color:#bbb;margin:0 .35em;}
.fe-detail{max-width:960px;margin:0 auto;}
.fe-hero{display:flex;flex-wrap:wrap;gap:.7em 2.4em;align-items:flex-start;background:linear-gradient(135deg,#f4f8f7 0%,#e7f0ee 100%);border-radius:.9em;padding:2.2em;margin:0 0 2.2em;}
.fe-hero-visual{flex:0 0 40%;max-width:40%;position:relative;}
.fe-hero-visual img{width:100%;height:auto;border-radius:.4em;box-shadow:0 10px 30px rgba(0,0,0,.22);display:block;}
/* チラシ画像のリンク（PDF か画像を新しいタブで）。マウスを乗せると少し暗くなり、案内が出る */
.fe-flyer-link{display:block;position:relative;border-radius:.4em;color:#fff;text-decoration:none;}
.fe-flyer-link picture{display:block;}
.fe-flyer-link::after{content:"";position:absolute;inset:0;border-radius:.4em;background:rgba(40,40,40,0);transition:background .2s;pointer-events:none;}
.fe-flyer-hint{position:absolute;right:.6em;bottom:.6em;z-index:1;display:inline-flex;align-items:center;gap:.4em;padding:.4em .8em;border-radius:2em;background:rgba(20,20,20,.72);color:#fff;font-size:.8em;font-weight:700;line-height:1.3;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;}
.fe-flyer-link:hover::after,.fe-flyer-link:focus-visible::after{background:rgba(40,40,40,.18);}
.fe-flyer-link:hover .fe-flyer-hint,.fe-flyer-link:focus-visible .fe-flyer-hint{opacity:1;transform:none;}
.fe-flyer-link:focus-visible{outline:3px solid var(--mi-primary-d,#006655);outline-offset:3px;}
/* マウスの無い端末（スマホ等）は乗せられないので、案内を常に控えめに出しておく */
@media (hover:none){ .fe-flyer-hint{opacity:.92;transform:none;} }
.mi-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.fe-hero-ribbon{position:absolute;top:14px;left:-7px;padding:.42em 1.1em;font-size:.82em;font-weight:700;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.28);}
.fe-hero-ribbon::after{content:"";position:absolute;bottom:-6px;left:0;border-width:6px 6px 0 0;border-style:solid;border-color:rgba(0,0,0,.4) transparent transparent transparent;}
.fe-hero-ribbon.ev-sale-onsale,.fe-hero-ribbon.ev-sale-presale{background:var(--mi-red);}
.fe-hero-ribbon.ev-sale-soldout,.fe-hero-ribbon.ev-sale-ended{background:#7a8a88;}
.fe-hero-ribbon.ev-sale-cancel{background:#fff;color:var(--mi-red);}
.fe-hero-info{flex:1;min-width:0;}
.fe-hero-info.fe-noimg{flex-basis:100%;max-width:100%;}
.fe-sale-lead{display:inline-block;padding:.45em 1.3em;border-radius:.3em;font-weight:700;font-size:1.02em;margin:0 0 .9em;letter-spacing:.02em;}
.fe-sale-lead.sk-onsale,.fe-sale-lead.sk-presale{background:var(--mi-red);color:#fff;}
.fe-sale-lead.sk-soldout,.fe-sale-lead.sk-ended{background:#7a8a88;color:#fff;}
.fe-sale-lead.sk-cancel{background:#fff;color:var(--mi-red);border:2px solid var(--mi-red);}
.fe-tags{margin:0 0 .9em;line-height:1.9;}
.fe-title{font-size:1.75em;font-weight:700;line-height:1.45;margin:0 0 1em;color:var(--mi-ink);}
.fe-info-list{margin:0 0 1.5em;border-top:1px solid rgba(0,0,0,.1);}
.fe-info-list .fe-row{display:flex;gap:1em;padding:.85em .1em;border-bottom:1px solid rgba(0,0,0,.1);}
.fe-info-list dt{flex:0 0 6em;font-weight:700;color:var(--mi-primary-d);font-size:.95em;}
.fe-info-list dd{flex:1;margin:0;line-height:1.8;}
.fe-info-list .fe-sale-note{color:var(--mi-red);font-weight:700;}
.fe-remarks{flex:1 1 100%;box-sizing:border-box;margin:0 .6em;padding:1em 1.35em;background:#fff;border-radius:.5em;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.05);line-height:1.85;font-size:.95em;color:var(--mi-ink);}
.fe-cta{margin:0;}
.fe-buy{width:100%;justify-content:center;font-size:1.08em;padding:1em 1.5em;box-shadow:0 5px 16px rgba(23,149,127,.34);}
.fe-body{max-width:820px;margin:0 auto 1em;line-height:2;padding-top:.6em;}
.fe-body.ev-body div{line-height:1.9;}
.fe-detail .ev-back{text-align:center;margin:2.2em 0 .4em;}
@media (max-width:768px){
  .fe-hero{flex-direction:column;gap:1.4em;padding:1.4em;align-items:center;}
  .fe-hero-visual{flex:none;max-width:78%;width:78%;}
  .fe-hero-info{width:100%;}
  .fe-title{font-size:1.6em;}
  /* 狭い画面では「日時」等のラベルと値を横並びにせず、ラベルを上・値を下へ改行する */
  .fe-info-list .fe-row{flex-direction:column;gap:.15em;}
  .fe-info-list dt{flex:none;}
}

/* 開催日時（共用の calendar_day 最低限） */
.calendar_day{list-style:none;margin:0;padding:0;}
.calendar_day .day{font-size:1.2em;font-weight:700;}
.calendar_day .wd{color:var(--mi-primary);}

/* =========================================================================
   サイト微調整（グローバルナビのサブメニュー余白・トップお知らせの余白）
   ========================================================================= */
/* ドロップダウンの表示を速く（既定 opa1 0.5s+0.1s遅延=0.6s → 0.16s即時に短縮） */
.large-screen #menubar ul ul,
.small-screen #menubar ul ul{
  animation-duration:.16s;
  animation-delay:0s;
}
/* PC ドロップダウン（サブメニュー）：パネル化＋項目に十分な余白 */
.large-screen #menubar ul ul{
  min-width:236px;
  border:1px solid #e3e3e3;
  border-radius:0 0 .4em .4em;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  padding:.4rem 0;
  background:#fff;
  overflow:hidden;
}
.large-screen #menubar ul ul li{
  padding:0;            /* 上位 li の padding-right:30px を打ち消す */
  text-align:left;
}
.large-screen #menubar ul ul li a{
  display:block;
  padding:.75rem 1.3rem;
  font-size:15px;
  line-height:1.4;
  border-bottom:1px solid #f1f1f1;
  transition:background .15s,color .15s;
}
.large-screen #menubar ul ul li:last-child a{border-bottom:none;}
.large-screen #menubar ul ul li a:hover{background:#00258e;color:#fff;}

/* トップページ お知らせ：グレー地(.top-news #f5f2f0)に、お知らせ部分だけ白パネル（旧来の見た目） */
.top-content.top-news{padding:3rem 30px 3.4rem;}
.top-content.top-news .news-box{width:auto;max-width:1040px;margin:0 auto 1.6rem;background:#fff;padding:1.9em 2.6em;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.06);box-sizing:border-box;}
.top-content.top-news .news-box .mi-topnews{max-width:none;margin:0;}
@media (max-width:900px){
  .top-content.top-news{padding:2.2rem 18px 2.6rem;}
  .top-content.top-news .news-box{padding:1.2em 1.1em;}
}

/* =========================================================================
   トップ：ヒーロー縮小 ＋「本文へ」スキップボタン
   ========================================================================= */
/* ヒーロースライダーが大きすぎる → 高さを抑える（画像は object-fit:cover で調整） */
/* 高さは管理画面（トップスライダー）の「ヒーロー全体の高さ」を CSS変数 --hero-h で反映（index.php で算出）。
   標準は auto＝画像全体を表示（横幅に合わせた画像の高さ。上下を切り取らない）。
   「画面の◯%」を選ぶと、メニューの下から画面下端までの◯%になり、横長の画面では上下が切り取られる
   （どこを残すかはスライドごとの「優先して見せる位置」）。 */
.home .slide7-parts{height:var(--hero-h,auto);overflow:hidden;}
.home .slide7-parts .img1-parts{height:100%;}
/* 900px以上ではヘッダーが position:fixed で重なるため、スライダーの上端がヘッダーの裏に
   120px 隠れていた。ヘッダーの高さぶん下げて、画像の上端から見えるようにする。
   高さは JS が実測値を --mi-header-h に入れる（ロゴ段が折り返して高くなる幅にも追随）。
   条件は header の position:fixed と同じ min-width:900px に揃えてある。 */
@media (min-width:900px){
  .home .slide7-parts{margin-top:var(--mi-header-h,120px);}
}
/* 上下が切り取られるときの揃え位置（スライダー管理の「切り取るときの位置」：上揃え／上下中央／下揃え） */
.home .slide7-parts .slide-parts img.mi-focus-top{object-position:center top;}
.home .slide7-parts .slide-parts img.mi-focus-center{object-position:center center;}
.home .slide7-parts .slide-parts img.mi-focus-bottom{object-position:center bottom;}
@media (max-width:900px){
  .home .slide7-parts{height:auto;}
  .home .slide7-parts .img1-parts{height:auto;}
}
/* 「本文へ」スキップボタン（小山町スタイル：ヒーロー右上→本文へジャンプ） */
#mi-skiplink{position:absolute;top:130px;right:16px;z-index:30;margin:0;}
#mi-skiplink a{display:inline-flex;align-items:center;gap:.4em;padding:.5em 1.1em;background:rgba(23,149,127,.92);color:#fff;font-size:14px;font-weight:700;border-radius:2em;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:opacity .15s;}
#mi-skiplink a:hover{opacity:.8;}
#mi-skiplink i{font-size:.9em;}
@media (max-width:900px){ #mi-skiplink{top:70px;right:10px;} #mi-skiplink a{font-size:13px;padding:.4em .9em;} }
@media (max-width:540px){ #mi-skiplink{display:none;} }

/* ヒーロー：スライド毎の文字乗せ（管理画面で有無・位置・大きさ・色・フォントを設定）＋画像リンク */
.slide7-parts .mi-hero-link{display:block;width:100%;height:100%;}
.slide7-parts .mi-hero-text{position:absolute;inset:0;display:flex;padding:5% 6%;z-index:10;box-sizing:border-box;pointer-events:none;}
.slide7-parts .mi-hero-text-inner{line-height:1.45;font-weight:600;white-space:pre-line;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.slide7-parts .mi-hero-text.tp-top-left{align-items:flex-start;justify-content:flex-start;text-align:left;}
.slide7-parts .mi-hero-text.tp-top-center{align-items:flex-start;justify-content:center;text-align:center;}
.slide7-parts .mi-hero-text.tp-top-right{align-items:flex-start;justify-content:flex-end;text-align:right;}
.slide7-parts .mi-hero-text.tp-middle-left{align-items:center;justify-content:flex-start;text-align:left;}
.slide7-parts .mi-hero-text.tp-middle-center{align-items:center;justify-content:center;text-align:center;}
.slide7-parts .mi-hero-text.tp-middle-right{align-items:center;justify-content:flex-end;text-align:right;}
.slide7-parts .mi-hero-text.tp-bottom-left{align-items:flex-end;justify-content:flex-start;text-align:left;}
.slide7-parts .mi-hero-text.tp-bottom-center{align-items:flex-end;justify-content:center;text-align:center;}
.slide7-parts .mi-hero-text.tp-bottom-right{align-items:flex-end;justify-content:flex-end;text-align:right;}

/* =========================================================================
   トップ：お知らせミニ一覧（.mi-topnews）— iframe廃止のインライン版
   （旧 top-umekomi.php の見た目に準拠：日付＋丸カテゴリ＋タイトルを1行・点線区切り）
   ========================================================================= */
.mi-topnews{list-style:none;margin:0 auto 15px;padding:0;max-width:760px;text-align:left;font-family:"Noto Sans JP",sans-serif;}
.mi-topnews-empty{color:#777;padding:1.4em;text-align:center;}
/* flex：日付＋カテゴリを左カラム固定、タイトルは右カラムで折り返し（2行目が日付タグの下に回り込まない） */
.mi-topnews-item{display:flex;align-items:baseline;gap:.2em .3em;padding:10px 2px;margin-bottom:3px;border-bottom:1px dotted #ccc;line-height:1.5;color:#333;}
.mi-topnews-item .mi-topnews-meta{flex:0 0 auto;display:inline-flex;align-items:baseline;white-space:nowrap;}
.mi-topnews-item .title{flex:1;min-width:0;}
/* 日付は等幅数字にして、月日によって幅が変わらないようにする */
.mi-topnews-item .up_ymd{color:#444;font-size:14px;font-weight:400;font-variant-numeric:tabular-nums;font-family:"Barlow","Noto Sans JP",sans-serif;margin-right:.2em;}
/* バッジ幅を固定する。「重要」(2文字)と「お知らせ」(4文字)で幅が変わると
   タイトルの開始位置が行ごとにずれる。色は白抜き文字なので AA(4.5:1) を満たす濃さに。
   従来の #17957f は 3.72:1 で不足していた。 */
.mi-topnews-item .catName{display:inline-block;box-sizing:border-box;min-width:6.2em;padding:3px 12px;font-size:12px;line-height:1.6;color:#fff;background:var(--mi-primary);border-radius:5rem;margin:0 .6rem 0 .3rem;font-weight:500;text-align:center;vertical-align:middle;}
.mi-topnews-item .catName.nt-important{background:var(--mi-danger);}
.mi-topnews-item .catName.nt-event{background:#1f5f9e;}
.mi-topnews-item .title{color:#333;font-size:15px;}
.mi-topnews-item .title a{color:#333;text-decoration:none;transition:color .3s;}
.mi-topnews-item .title a:hover{color:var(--mi-primary);}
.mi-topnews-item .title i{font-size:.72em;margin-left:.4em;color:#6d7a78;}
.mi-topnews-item .title a:hover i{color:var(--mi-primary);}
.mi-topnews-item .newMark{color:var(--mi-danger);font-size:12px;font-weight:700;margin-left:.4em;}
/* タイトルは全文表示（折り返し）。日付・カテゴリの後に本文が続き、長い場合は次行へ回り込む */
.mi-topnews-item .title{display:inline;}
@media (max-width:600px){
  /* 横並びのままだと 375px でタイトル幅が 133px（1行10文字ほど）しか残らず、
     1件が3〜4行に折り返してしまう。日付・バッジを上の段へ逃がして全幅を使う。 */
  .mi-topnews-item{flex-direction:column;align-items:flex-start;gap:.4em;}
  .mi-topnews-item .mi-topnews-meta{flex:0 0 auto;}
  .mi-topnews-item .title{flex:none;width:100%;font-size:13px;}
  .mi-topnews-item .catName{font-size:10px;padding:2px 9px;}
}

/* =========================================================================
   お知らせ一覧（.mi-news）— /news/
   ========================================================================= */
.mi-news{max-width:920px;margin:0 auto;}
.mi-news-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--mi-line);}
/* 左列は固定幅のグリッド。日付とバッジは必ず縦2段に分ける。
   横1列に並べると「重要」(2文字)は収まり「お知らせ」(4文字)は折り返すため、
   記事のラベル次第で左列の高さが変わり、行ごとに見た目が揃わなくなる。 */
.mi-news-item{display:grid;grid-template-columns:8em minmax(0,1fr);gap:.3em 1.7em;align-items:start;padding:1.4em .4em;border-bottom:1px solid var(--mi-line);}
.mi-news-meta{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:.5em;padding-top:0;}
.mi-news-date{font-weight:700;color:#555;font-size:.92em;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;font-family:"Barlow","Noto Sans JP",sans-serif;}
.mi-news-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.45em;}
/* バッジは幅を揃えて左端の列として整える。白抜き文字なので背景は AA(4.5:1) を満たす濃さにする。
   従来の #17957f は 3.72:1 で不足していた。 */
.mi-news-type{display:inline-block;min-width:5.4em;padding:.2em .7em;border-radius:1em;font-size:.72em;font-weight:700;color:#fff;line-height:1.65;text-align:center;white-space:nowrap;}
.mi-news-type.nt-news{background:var(--mi-primary);}      /* 6.93:1 */
.mi-news-type.nt-important{background:var(--mi-danger);}  /* 7.01:1 */
.mi-news-type.nt-event{background:#1f5f9e;}               /* 6.59:1 */
.mi-news-new{display:inline-block;padding:.15em .6em;border:1px solid currentColor;border-radius:1em;color:var(--mi-danger);font-size:.66em;font-weight:700;line-height:1.7;letter-spacing:.08em;}
.mi-news-body{grid-column:2;min-width:0;}
/* h3 だが .contents-page h3 の見出し装飾（32px・下線ボーダー・serif・::after）を打ち消す */
.mi-news .mi-news-title{margin:0;padding:0;font-size:1.06em;font-weight:700;line-height:1.65;color:var(--mi-ink);border:none;font-family:"Noto Sans JP",sans-serif;}
.mi-news .mi-news-title::after{display:none;content:none;}
.mi-news .mi-news-title a{color:var(--mi-ink);text-decoration:none;transition:color .15s;}
.mi-news .mi-news-title a:hover{color:var(--mi-primary);text-decoration:underline;}
/* リンクの有無を示す印。#999 は白背景で 2.8:1 しかないので、識別に使う以上は 3:1 以上にする。 */
.mi-news .mi-news-title i{font-size:.68em;margin-left:.5em;color:#6d7a78;vertical-align:middle;transition:transform .15s,color .15s;}
.mi-news .mi-news-title a:hover i{color:var(--mi-primary);transform:translateX(2px);}
@media (prefers-reduced-motion:reduce){.mi-news .mi-news-title a:hover i{transform:none;}}
.mi-news-excerpt{margin:.4em 0 0;font-size:.9em;line-height:1.7;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mi-news-files{list-style:none;margin:.6em 0 0;padding:0;}
.mi-news-files li{margin:.25em 0;}
.mi-news-files a{display:inline-flex;align-items:center;gap:.5em;color:var(--mi-primary);font-size:.9em;text-decoration:none;font-weight:500;}
.mi-news-files a:hover{text-decoration:underline;}
/* 過去のお知らせ：年で絞り込むチップ */
.mi-news-years{display:flex;flex-wrap:wrap;gap:.5em;margin:0 0 1.6em;}
.mi-year{display:inline-block;padding:.4em 1.2em;border:1px solid var(--mi-line);border-radius:2em;color:#555;text-decoration:none;font-size:.9em;font-weight:500;transition:all .15s;}
.mi-year:hover{border-color:var(--mi-primary);color:var(--mi-primary);}
.mi-year.current{background:var(--mi-primary);border-color:var(--mi-primary);color:#fff;}
/* 年の右に件数。開く前に「その年に何件あるか」が分かるようにする。 */
.mi-year-count{display:inline-block;min-width:1.6em;margin-left:.5em;padding:0 .35em;border-radius:1em;background:var(--mi-bg-soft);color:#555;font-size:.85em;text-align:center;}
.mi-year.current .mi-year-count{background:rgba(255,255,255,.25);color:#fff;}
@media (max-width:640px){
  /* 幅が無いので1列に。左列が消えるぶん日付とバッジは横に並べてよい
     （この向きなら文字数が増えても行の高さは変わらない）。 */
  .mi-news-item{grid-template-columns:minmax(0,1fr);gap:.55em;padding:1.15em .2em;}
  .mi-news-meta{grid-column:1;flex-direction:row;align-items:center;gap:.6em;padding-top:0;}
  .mi-news-body{grid-column:1;}
}

/* ページャー（共通） */
.mi-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4em;margin:2em 0 0;}
.mi-pager a,.mi-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;height:2.4em;padding:0 .6em;border:1px solid var(--mi-line);border-radius:.35em;color:#555;text-decoration:none;font-size:.9em;transition:all .15s;}
.mi-pager a:hover{border-color:var(--mi-primary);color:var(--mi-primary);}
.mi-pager .current{background:var(--mi-primary);border-color:var(--mi-primary);color:#fff;}
.mi-pager-prev,.mi-pager-next{font-weight:700;}

/* =========================================================================
   チケット購入ガイド（event/ticket/）— .tg-*
   ========================================================================= */
.tg-container{max-width:920px;margin:0 auto;}
.tg-lead{font-size:1.02em;line-height:1.9;margin:0 0 1.4em;}
.tg-notice{background:#fbf7ee;border:1px solid #e6dcc4;border-radius:8px;padding:1.1em 1.4em;margin:0 0 1.8em;}
.tg-notice h3{margin:0 0 .5em;border:none;font-size:1.15em;color:var(--mi-primary-d);}
.tg-notice ul{margin:0;padding-left:1.2em;line-height:1.85;}
.tg-notice li{margin:.35em 0;}
.tg-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;margin:1em 0 2em;}
.tg-method{position:relative;background:#fff;border:1px solid var(--mi-line);border-radius:10px;padding:1.3em 1.2em 1.1em;box-shadow:0 1px 5px rgba(0,0,0,.05);}
.tg-method-no{position:absolute;top:-14px;left:16px;width:30px;height:30px;border-radius:50%;background:var(--mi-primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;}
.tg-method h4{margin:.3em 0 .6em;font-size:1.08em;color:var(--mi-primary-d);}
.tg-method p{line-height:1.75;margin:.4em 0;font-size:.95em;}
.tg-note{color:#777;font-size:.85em !important;}
.tg-table{width:100%;border-collapse:collapse;margin:.5em 0;font-size:.92em;}
.tg-table th,.tg-table td{border:1px solid var(--mi-line);padding:.5em .7em;text-align:left;vertical-align:top;}
.tg-table th{background:var(--mi-bg-soft);white-space:nowrap;width:6.5em;font-weight:700;}
.tg-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--mi-primary);color:#fff;padding:.7em 1.3em;border-radius:2em;text-decoration:none;font-weight:700;font-size:.95em;transition:opacity .15s;}
.tg-btn:hover{opacity:.85;color:#fff;}
.tg-btn i{font-size:.85em;}
.tg-link{color:var(--mi-primary-d);font-weight:700;text-decoration:none;}
.tg-link:hover{text-decoration:underline;}
.tg-guides{list-style:none;display:flex;flex-wrap:wrap;gap:.6em;padding:0;margin:.6em 0 1.4em;}
.tg-guides li{background:var(--mi-bg-soft);border:1px solid var(--mi-line);border-radius:.35em;padding:.45em 1em;font-weight:500;}
.tg-plain{line-height:1.9;padding-left:1.2em;margin:.4em 0 1.4em;}
.tg-contact{background:var(--mi-bg-soft);border-radius:8px;padding:1.1em 1.4em;margin-top:1.6em;}
.tg-contact h3{margin:0 0 .5em;border:none;}
@media (max-width:800px){
  .tg-methods{grid-template-columns:1fr;gap:1.6em;}
}

/* 施設抽選会など汎用（.mi-steps / .mi-notes / .mi-contact-line） */
.mi-steps{line-height:1.9;padding-left:1.3em;margin:.5em 0 1.5em;}
.mi-steps li{margin:.3em 0;}
.mi-notes{line-height:1.9;padding-left:1.2em;margin:.5em 0 1.5em;}
.mi-notes li{margin:.25em 0;}
.mi-contact-line{margin-top:1.6em;padding:.9em 1.2em;background:var(--mi-bg-soft);border-radius:8px;font-weight:500;}

/* お知らせ詳細（news/detail.php）— .mi-news-detail */
.mi-news-detail{max-width:820px;margin:0 auto;}
.mi-nd-meta{display:flex;align-items:center;gap:.7em;margin:0 0 .6em;}
.mi-nd-date{font-weight:700;color:#555;font-family:"Barlow","Noto Sans JP",sans-serif;}
.mi-news-detail .mi-nd-title{font-size:1.5em;line-height:1.55;margin:0 0 1em;border:none;font-family:"Noto Sans JP",sans-serif;padding:0 0 .55em;border-bottom:2px solid var(--mi-line);color:var(--mi-ink);}
.mi-news-detail .mi-nd-title::after{content:none;display:none;}
.mi-nd-body{line-height:1.95;margin:1em 0;color:#333;}
.mi-nd-body p{margin:0 0 1em;}
.mi-nd-body a{color:var(--mi-primary);font-weight:500;}
.mi-nd-body img{max-width:100%;height:auto;border-radius:4px;}

/* お知らせ本文・フリーテキストの箇条書き／見出しをエディタ(Summernote)と同じ見え方に揃える。
   reset.css の *{padding:0;margin:0} で弾丸が本文の左外にはみ出し、見出し余白も消えるためここで補う。 */
.mi-nd-body ul,.mi-nd-body ol,
.event-content ul,.event-content ol,
.event-column ul,.event-column ol{padding-left:2.4em;margin:.4em 0 1em;}
.mi-nd-body ul,.event-content ul,.event-column ul{list-style:disc outside;}
.mi-nd-body ol,.event-content ol,.event-column ol{list-style:decimal outside;}
.mi-nd-body ul ul,.event-content ul ul,.event-column ul ul{list-style:circle outside;}
.mi-nd-body li,.event-content li,.event-column li{margin:.3em 0;line-height:1.9;}
.mi-nd-body h1,.event-content h1{font-size:1.5em;font-weight:700;line-height:1.5;margin:1.1em 0 .5em;}
.mi-nd-body h2,.event-content h2{font-size:1.3em;font-weight:700;line-height:1.5;margin:1.1em 0 .5em;}
.mi-nd-body h3,.event-content h3{font-size:1.13em;font-weight:700;line-height:1.5;margin:1em 0 .45em;}
.mi-nd-body h4,.event-content h4{font-size:1.02em;font-weight:700;line-height:1.5;margin:1em 0 .4em;}
.mi-nd-body>:first-child,.event-content>:first-child{margin-top:0;}
.mi-nd-files{margin:1.4em 0 .4em;}

/* 月間カレンダーPDF ダウンロードボタン（event/calendar.php） */
.cal-pdf-link{text-align:center;margin:1.5em 0 .3em;}
.cal-pdf-link a{display:inline-flex;align-items:center;gap:.6em;background:#fff;border:2px solid var(--mi-primary);color:var(--mi-primary);padding:.7em 1.7em;border-radius:2em;text-decoration:none;font-weight:700;transition:all .15s;}
.cal-pdf-link a:hover{background:var(--mi-primary);color:#fff;}
.cal-pdf-link i{font-size:1.1em;}

/* =========================================================================
   トップ 公演スライダー：発売ステータスタグのバランス（最大2行・縦中央）＋会場表示
   ========================================================================= */
.slide-box .event-tag{
  display:flex;
  align-items:center;                 /* 1行でも縦中央でバランス良く */
  min-height:2.7em;                   /* 2行分の高さを確保 */
  max-height:2.9em;
  line-height:1.3 !important;
  overflow:hidden;                    /* 3行以上ははみ出さない */
  height:auto;
}
.slide-box .slide-meta{
  line-height:1.55;                   /* 開催日・会場の2行が高さ50pxの枠に収まる */
  overflow:hidden;
}
/* 公演名は約2行を想定（高さ80px固定→2行分に。短いタイトルでも開催日との間が空きすぎない／長くても2行でクランプ） */
.slide-box h4{
  height:2.9em;
  line-height:1.45;
  margin-top:.6rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
/* チラシ画像：A4縦（基本チラシ）に枠を合わせ、全体を切らずに表示（上下クロップ解消） */
.slide-thumbnail2-parts .slide-box .event-slide-img{
  aspect-ratio:210/297;               /* A4縦 */
  background:#f3f7f6;                  /* 余白部分の色（比率が違うチラシ用） */
}
.slide-thumbnail2-parts .slide-box .event-slide-img img{
  object-fit:contain;                 /* チラシ全体を表示（切らない） */
}

/* 公演スライダーのタグを公演一覧（.ev-cat/.ev-host）に統一 */
.slide-box .slide-taglist{ margin:.5rem 0 .1rem; line-height:1.9; }

/* 公演スライダー：スワイプ/ドラッグ操作のカーソル・選択抑止 */
.slide-thumbnail2-parts{cursor:grab;user-select:none;-webkit-user-select:none;}
.slide-thumbnail2-parts img{-webkit-user-drag:none;user-drag:none;}
.slide-thumbnail2-parts a,.slide-thumbnail2-parts button{cursor:pointer;}
.slide-thumbnail2-parts.mi-grabbing,.slide-thumbnail2-parts.mi-grabbing *{cursor:grabbing !important;}

/* 「本文へスキップ」リンク（キーボード操作でのバイパスブロック。フォーカス時のみ表示） */
.mi-skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--mi-primary,#17957f);color:#fff;padding:.7em 1.4em;font-weight:700;text-decoration:none;border-radius:0 0 .4em 0;}
.mi-skip:focus{left:0;outline:3px solid #fff;outline-offset:-3px;}
#mi-maincontent{position:absolute;}

/* 公演詳細ページの自由ブロック（画像・ギャラリー・スライダー） */
.ev-media{margin:1.6em auto;text-align:center;}
.ev-media img{max-width:100%;height:auto;}
.ev-size-sm{max-width:360px;}
.ev-size-md{max-width:560px;}
.ev-size-lg{max-width:820px;}
.ev-size-full{max-width:100%;}
.ev-caption{font-size:.86em;color:#555;margin-top:.5em;line-height:1.6;}
.ev-gallery{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.ev-gallery .ev-gallery-item{flex:1 1 240px;margin:0;max-width:100%;}
.ev-gallery .ev-gallery-item img{width:100%;object-fit:cover;border-radius:4px;}

/* 画像スライダー（統一）：切替方法＝fade/switch、サムネイル有無・位置＝bottom/side を組み合わせ */
.ev-slider2{line-height:0;}
.ev-s2-main{position:relative;}
.ev-s2-img{width:100%;height:auto;border-radius:4px;}
/* 切替：フェード（重ねてクロスフェード） */
.tr-fade .ev-s2-img{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease;}
.tr-fade .ev-s2-img.active{position:relative;opacity:1;}
/* 切替：パッと切替（瞬時） */
.tr-switch .ev-s2-img{display:none;}
.tr-switch .ev-s2-img.active{display:block;}
/* 左右矢印（サムネイル無しのとき） */
.ev-s2-prev,.ev-s2-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2;}
.ev-s2-prev{left:10px;}
.ev-s2-next{right:10px;}
.ev-s2-prev:hover,.ev-s2-next:hover{background:rgba(0,0,0,.72);}
/* サムネイル */
.ev-s2-thumbs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.ev-s2-thumb{padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;line-height:0;overflow:hidden;transition:border-color .2s;flex:0 0 auto;}
.ev-s2-thumb img{width:82px;height:56px;object-fit:cover;display:block;transition:opacity .2s;}
.ev-s2-thumb:hover img{opacity:.8;}
.ev-s2-thumb.active{border-color:var(--mi-primary,#17957f);}
/* サムネイル位置：下 */
.tp-bottom .ev-s2-thumbs{margin-top:10px;}
/* サムネイル位置：横（大画像の右にスクロール可能な縦並び） */
.ev-slider2.tp-side{display:flex;gap:12px;align-items:flex-start;text-align:left;}
.ev-slider2.tp-side .ev-s2-main{flex:1 1 auto;min-width:0;}
.ev-slider2.tp-side .ev-s2-thumbs{flex:0 0 auto;flex-direction:column;flex-wrap:nowrap;max-height:100%;}
@media (max-width:600px){
  .ev-s2-thumb img{width:56px;height:40px;}
  /* 横並びは画面が狭いと窮屈なので下並びへ回す */
  .ev-slider2.tp-side{flex-direction:column;}
  .ev-slider2.tp-side .ev-s2-thumbs{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:10px;}
}

/* キーボード操作時のフォーカス表示
   reset.css が全要素の outline を消していたため、キーボードだけで操作すると
   現在位置が一切分からない状態だった（WCAG 2.4.7 不適合）。その削除とあわせて
   ここで可視のリングを定義する。
   :focus-visible を使い、マウスクリック時には出さずキーボード操作時のみ出す。
   対応していないブラウザ向けに :focus のフォールバックも置く。 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus{
  outline:3px solid var(--mi-brand);
  outline-offset:2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible){
  outline:none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--mi-brand);
  outline-offset:2px;
}
/* 濃い背景の上（ヘッダー・フッター・ヒーロー）は白のリングにして視認性を確保 */
header a:focus-visible,
footer a:focus-visible,
.slide7-parts a:focus-visible,
#menubar a:focus-visible,
.sh a:focus-visible{
  outline-color:#fff;
}

/* グローバルメニューのドロップダウンをキーボードでも開けるようにする。
   従来は jQuery の .hover() だけで開いており、Tabキーでは決して開かなかった。
   jQuery が display:none をインラインで書くため、!important で上書きする。 */
.ddmenu_parent:focus-within > ul{
  display:block !important;
}

/* ハンバーガーを div から button に変えたことによる既定スタイルの打ち消し。
   見た目は従来どおり（青地に3本バー）を維持する。 */
#menubar_hdr{
  border:none;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
}

/* スライドショーの停止／再生ボタン（WCAG 2.2.2 対応）
   自動で切り替わるものは利用者が止められる必要がある。
   邪魔にならないよう右下に小さく置き、フォーカス時とホバー時に濃くする。 */
.mi-slide-toggle{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:12;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.mi-slide-toggle:hover,
.mi-slide-toggle:focus-visible{background:rgba(0,0,0,.78);}
/* 位置の基準を作る（ヒーロー・公演スライダーとも） */
.slide7-parts,
.slide-thumbnail2-parts{position:relative;}
@media (max-width:600px){
  .mi-slide-toggle{width:36px;height:36px;right:8px;bottom:8px;}
}

/* WebP配信のために inc/bootstrap.php の出力フィルタが <img> を <picture> で包む。
   display:contents にすると picture 自身がレイアウトから消えるので、
   「.slide-parts img{...}」のような既存の指定が今までどおりそのまま効く。 */
picture{display:contents;}

/* CSS背景の大きな写真だけ WebP を優先する（画像は tools/webp.php が生成）。
   image-set は対応していないブラウザでは丸ごと無視されるので、
   直前の url() が従来どおりの受け皿として残る。 */

/* 固定ヘッダーに隠れないよう、ページ内リンクの着地点を下げる。
   「本文へ」で #contents に飛ぶと、着地点がヘッダーの真下ではなく
   ヘッダーの裏（120px ぶん上）に来ていた。高さは --mi-header-h（JSが実測値を入れる）。 */
:target,
#contents { scroll-margin-top: calc(var(--mi-header-h, 120px) + 16px); }