@charset "utf-8";

/* Google Fonts：しっぽり明朝（明朝体の変数 --font-mincho で使用） */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');

/* ============================================================
   テーマカラー（年ごとのカラー）
   ここを書き換えると、見出し・ナビ・フッター・SNSアイコンの色がまとめて変わります。
   ============================================================ */
:root {
  /* --theme-main: #990000;    メインカラー：見出し・ナビ・フッター・SNSアイコン（2026年：赤） */
  --theme-main: #d99f00;    /* メインカラー：見出し・ナビ・フッター・SNSアイコン（2027年：黄色） */
  --theme-accent: #2e9e52;  /* アクセント：ナビのホバー・タップ時 */
  --theme-on-main: #fff;    /* メインカラーの上に乗る文字・枠線の色 */
  --logo-brown: #683d1f;    /* ロゴの茶色：ハンバーガーボタンの背景 */
  /* 明朝体（見出し・メニュー・座談会の見出しなど）：Google Fonts「しっぽり明朝」。読み込みはこのファイル冒頭の @import */
  --font-mincho: "Shippori Mincho", "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* =========================================================
   1. リセット・ベース
   要素の初期化、文字・画像・リンクなどサイト全体の基本
   ========================================================= */
body {
  padding: 0px;
  margin: 0;
  background-color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-feature-settings: "palt";
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 2.2;
  color: #000000;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: #000;
}

a img:hover {
  opacity: 0.8;
  color: #fff;
}

ul {
  list-style: none;
}

hr {
  border: 1px solid #000000;
  margin: 20px 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

a:focus {
  outline: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

a:active,
a:hover {
  outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

p,
pre {
  margin: 0;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: '';
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

dl,
menu,
ol,
ul {
  margin: 0;
}

dd {
  margin: 0;
}

menu,
ol,
ul {
  padding: 0;
}

nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

form {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0;
  padding: 0;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* HTML5（標準モード）化に伴う調整：旧 HTML4.01 Transitional と同じ見た目にする */
img,
iframe {
  vertical-align: bottom;
}

/* 背景（旧 WordPress カスタム背景） */
body {
  background-image: url("../../images/common/back2.jpg");
  background-position: center center;
  background-size: auto;
  background-repeat: repeat;
  background-attachment: scroll;
}

/* <picture>（PC/SP 画像の切り替え） */
picture {
  display: block;
}

@media (min-width: 1081px) {

  /* 中央寄せのサブメニューが画面右へはみ出しても横スクロールを出さない */
  html {
    overflow-x: clip;
  }

}

/* =========================================================
   2. パーツ
   コンテンツ幅の箱（.inner）・ボックス・グリッド・アイコンリンク・バッジ・余白などのユーティリティ
   ========================================================= */
/* コンテンツ幅の箱（PC 1080px・中央寄せ／スマホは画面幅＋左右 16px） */
.inner {
  width: 1080px;
  margin: 0 auto;
}

.panel {
  width: 100%;
  background-color: #fff;
  padding: 32px;
}

.panel-alt {
  width: 100%;
  background-color: #fff;
  padding: 35px 35px;
}

.panel--spacious {
  padding: 64px 80px;
}

.panel-alt--padded {
  padding: 5% 2%;
}

.panel-alt {
  width: 100%;
  background-color: #fff;
  padding: 35px 35px;
}

.grid3 {
  display: flex;
  max-width: 100%;
  margin: 0px 0 0 0;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid3__item {
  width: 32%;
  margin-bottom: 1.5%;
  font-size: 10px;
  text-align: left;
  letter-spacing: 0.03em;
  line-height: 2.5em;
}

.grid2 {
  display: flex;
  max-width: 100%;
  margin: 20px 0 0 0;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid2__item {
  width: 49%;
  margin-bottom: 1.5%;
  font-size: 18px;
  text-align: left;
  letter-spacing: 0.15em;
  line-height: 1.8em;
}

.icon-link--home {
  font-size: 1em;
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
  background-image: url("../../images/common/icon-home.png");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  padding: 0px 0px 10px 35px;
}

.icon-link--instagram {
  font-size: 1em;
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
  background-image: url("../../images/cast/shiruvupure/icon-Instagram.png");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  padding: 0px 0px 10px 35px;
}

.icon-link--x {
  font-size: 1em;
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
  background-image: url("../../images/cast/sankyu-tezuka/icon-twitter.png");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  padding: 0px 0px 10px 35px;
}

.first-badge {
  position: relative;
  top: -0.15em;
  background: #ffff00;
  color: #ff5700;
  font-weight: bold;
  font-size: 0.7em;
  padding: 0.3em 0.3em 0.3em 0.4em;
  margin-left: 0.3em;
  border-radius: 10px;
  display: inline-block;
  line-height: 1;
}

.u-text-sky {
  color: #00a0e9;
}

.u-text-red {
  color: #d13839;
}

.u-bold {
  font-weight: bold;
}

.u-text-center {
  text-align: center;
  text-align: center;
}

.u-fz16 {
  font-size: 16px;
  line-height: 2.2em;
}

.u-fz18 {
  font-size: 18px;
}

.u-fz24 {
  font-size: 24px;
}

/* 内容の中の余白（セクション同士の余白は .l__section で指定） */
.u-mt20 {
  margin-top: 20px;
}

.u-mb30 {
  margin-bottom: 30px;
}

.u-my-2p {
  margin: 2% auto;
}

.u-w80 {
  width: 80%;
  height: auto;
  margin: 0 auto;
}

.u-text-red {
  color: #ff6347;
}

/* 本文中の画像の配置（旧 WordPress の aligncenter） */
.u-align-center {
  clear: both;
}

/* =========================================================
   3. ヘッダー（l__header）
   ロゴ・開催日時・グローバルナビゲーション（assets/inc/header.php）
   ========================================================= */
.l__header {
  width: 100%;
  background: #fff;
}

.l__header__inner {
  width: 100%;
  margin: 0 auto;
}

.l__header__box {
  display: flex;
  width: 1080px;
  margin: 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
}

.l__header__left {
  width: 46%;
  margin-top: 0.5%;
  text-align: left;
}

.l__header__logo {
  width: 100%;
  text-align: left;
  padding: 30px 0;
}

/* 開催日＋SNS を横並び（SNS の左に区切り線） */
.l__header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  width: 54%;
  text-align: right;
}

.l__header__date {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 0;
}

.l__header__date img {
  width: 100%;
}

.l__header__sns {
  flex: none;
  padding-left: 22px;
  border-left: 1px solid rgba(0, 0, 0, .12);
}

/* グローバルナビの箱（PC はコンテンツと同じ 1080px） */
.l__header__nav {
  width: 1080px;
  margin: 0 auto;
}

/* SNS アイコンリンク（X / Instagram / Facebook・assets/inc/sns.php）
   テーマカラーの丸に白アイコン。ホバーでアクセント色にして少し浮かせる */
.sns-list {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sns-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--theme-main);
  color: var(--theme-on-main);
  transition: background-color .25s ease, transform .25s ease;
}

.sns-list__link:hover {
  background: var(--theme-accent);
  transform: translateY(-2px);
}

.sns-list__link:focus-visible {
  outline: 2px solid var(--theme-main);
  outline-offset: 3px;
}

.sns-list__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* =========================================================
   4. グローバルナビゲーション
   PC の横並びメニュー・サブメニュー、スマホのハンバーガーボタン
   ========================================================= */
/* グローバルナビゲーション（PC・スマホ共通マークアップ：assets/inc/nav.php） */
/* 子メニューを持つ項目の見出し（ボタン）：ブラウザ標準のボタン装飾を消し、リンクと同じ見た目にする */
.global-nav__toggle {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* PC：横並びメニュー＋ホバーでサブメニュー */
.global-nav ul {
  display: block;
  margin: 0;
  padding: 0;
}

nav.global-nav > ul.global-nav__list {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
}

.global-nav .global-nav__list > li {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  list-style: none;
  margin: 0;
}

.global-nav .global-nav__list > li > a,
.global-nav .global-nav__list > li > .global-nav__toggle {
  display: block;
  padding: 14px 0;
  font-size: 14px;
  color: #fff;
  background: var(--theme-main);
  text-decoration: none;
  letter-spacing: 2px;
  white-space: nowrap;
  transition: background-color 0.4s ease;
}

.global-nav .global-nav__list > li + li {
  border-left: none;
}

.global-nav .global-nav__list > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.9);
}

.global-nav .global-nav__list > li > a:hover,
.global-nav .global-nav__list > li > .global-nav__toggle:hover {
  background: var(--theme-accent);
}

.global-nav .global-nav__list .global-nav__sub-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: rgba(255,255,255,0.9);
  z-index: 9999;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
  padding: 6px 0;
  margin: 0;
  transition: background-color 0.3s ease;
}

.global-nav .global-nav__list .global-nav__sub-list li {
  list-style: none;
}

.global-nav .global-nav__list .global-nav__sub-list a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--theme-main);
  background: transparent;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.global-nav .global-nav__list .global-nav__sub-list a:hover {
  background: rgba(0,0,0,0.05);
}

.global-nav .global-nav__list li:hover > .global-nav__sub-list,
.global-nav .global-nav__list li:focus-within > .global-nav__sub-list {
  display: block;
}

/* ハンバーガーボタン（スマホのみ表示・画面の右上に固定）
   位置や大きさを変えたら、スマホ用 .global-nav の padding-top（メニューの開始位置）も合わせる */
.menu-trigger {
  --mt-size: 50px;   /* ボタンの大きさ */
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10010;
  width: var(--mt-size);
  height: var(--mt-size);
  padding: 0;
  border: 1px solid var(--logo-brown);
  background: var(--logo-brown);  /* ロゴの茶色に白抜き */
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* 開いているときはテーマカラーで塗りつぶし */
.menu-trigger--active {
  border-color: var(--theme-main);
  background: var(--theme-main);
  color: var(--theme-on-main);
}

/* 3本線 → 開いているときは × */
.menu-trigger__bar {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}

.menu-trigger__bar:nth-of-type(1) {
  top: 11px;
}

.menu-trigger__bar:nth-of-type(2) {
  top: 18px;
}

.menu-trigger__bar:nth-of-type(3) {
  top: 25px;
}

.menu-trigger--active .menu-trigger__bar:nth-of-type(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-trigger--active .menu-trigger__bar:nth-of-type(2) {
  opacity: 0;
}

.menu-trigger--active .menu-trigger__bar:nth-of-type(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 「MENU」／開いているときは「CLOSE」 */
.menu-trigger__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  font-family: var(--font-mincho);
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-indent: .12em;
  text-align: center;
}

.menu-trigger__label::before {
  content: "MENU";
}

.menu-trigger--active .menu-trigger__label::before {
  content: "CLOSE";
}

body.is-nav-open {
  overflow: hidden;
  touch-action: none;
}

/* グローバルナビ：カミングスーン（.global-nav__item--coming-soon）
   クラスを付けた項目は文字を薄くして「COMING SOON」ラベルを表示し、リンクを無効化（common.js）。
   クラスを外せば通常のリンクに戻る */
.global-nav .global-nav__list > li.global-nav__item--coming-soon > a {
  pointer-events: none;
  cursor: default;
  color: rgba(255, 255, 255, .55);
  color: color-mix(in srgb, var(--theme-on-main) 55%, transparent);
}

.global-nav .global-nav__list > li.global-nav__item--coming-soon > a::after {
  content: "COMING SOON";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  padding: 2px 6px 2px 7px;
  background: var(--theme-on-main);
  color: var(--theme-main);
  font-family: var(--font-mincho);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .15em;
  white-space: nowrap;
}

@media (min-width: 1081px) {

  /* 背景を左右へ画面端まで伸ばす。border-image の outset は描画だけなので、
       横スクロールが出ず、マウスオンで出るサブメニューも切り取られない */
  nav.global-nav {
    background: var(--theme-main);
    border-image-source: linear-gradient(var(--theme-main), var(--theme-main));
    border-image-slice: 0 fill;
    border-image-outset: 0 100vmax;
  }

  .global-nav .global-nav__list .global-nav__sub-list {
    display: block;
    top: calc(100% + 14px);
    left: 50%;  /* 親の項目の中央に合わせる */
    right: auto;
    min-width: 290px;
    padding: 8px 0;
    background: #fff;
    border: 0;
    border-top: 3px solid var(--theme-main);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }

  .global-nav .global-nav__list li:hover > .global-nav__sub-list,
  .global-nav .global-nav__list li:focus-within > .global-nav__sub-list {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* 帯とサブメニューの間の隙間でマウスが外れないようにする（見えない橋） */
  .global-nav .global-nav__list .global-nav__sub-list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 17px;
  }

  /* 親の項目の真下を指す三角（カードの中央） */
  .global-nav .global-nav__list .global-nav__sub-list::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -9px;
    bottom: calc(100% + 3px);
    border: 9px solid transparent;
    border-bottom-color: var(--theme-main);
  }

  .global-nav .global-nav__list .global-nav__sub-list li + li a {
    border-top: 1px solid #efefef;
  }

  .global-nav .global-nav__list .global-nav__sub-list a {
    position: relative;
    padding: 13px 22px 13px 36px;
    color: #222;
    font-size: 14px;
    letter-spacing: .08em;
    background: #fff;
    transition: background-color .2s ease, color .2s ease;
  }

  /* 左：テーマカラーの短い線 */
  .global-nav .global-nav__list .global-nav__sub-list a::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--theme-main);
  }

  .global-nav .global-nav__list .global-nav__sub-list a:hover {
    color: var(--theme-main);
    background: #fafafa;
    background: color-mix(in srgb, var(--theme-main) 8%, #fff);
  }

}

/* =========================================================
   5. メインビジュアル（l__mv）
   ページ上部の画像
   ========================================================= */
.l__mv {
  background: #fff;
  text-align: center;
  padding: 0;
}

.l__mv img {
  height: auto;
}

/* =========================================================
   6. セクション（l__section）
   「見出し＋内容」のまとまり。セクション同士の余白はここで指定する
   メインビジュアル → 余白多め → 見出し → 余白少なめ → コンテンツ
   ========================================================= */
.l__section {
  margin-top: 50px;
}

/* 見出し（旧：見出し画像 mid-t*.webp ほか を CSS で再現）
   帯の色はテーマカラー（--theme-main）、内側の白線は四隅を逆R（内側にえぐった角）にした枠 */
.l__section__headline {
  --heading-bg: var(--theme-main);
  --heading-line: var(--theme-on-main);
  --heading-inset: 6px;
  --heading-corner: 9px;  /* 四隅の逆R（内側にえぐった角）の半径 */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin: 0 0 20px;
  padding: 10px 40px;
  background: var(--heading-bg);
  color: var(--theme-on-main);
  font-family: var(--font-mincho);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .15em;
  text-indent: .15em;
  text-align: center;
}

.l__section__headline::before,
.l__section__headline::after {
  content: "";
  position: absolute;
  inset: var(--heading-inset);
  z-index: -1;
  /* 四隅を、枠の角を中心にした四分円でくり抜く（--r: 半径 / --o: 中心のずれ） */
  --heading-mask:
      radial-gradient(circle at var(--o) var(--o), transparent var(--r), #000 calc(var(--r) + .6px)) top left / 51% 51% no-repeat,
      radial-gradient(circle at calc(100% - var(--o)) var(--o), transparent var(--r), #000 calc(var(--r) + .6px)) top right / 51% 51% no-repeat,
      radial-gradient(circle at var(--o) calc(100% - var(--o)), transparent var(--r), #000 calc(var(--r) + .6px)) bottom left / 51% 51% no-repeat,
      radial-gradient(circle at calc(100% - var(--o)) calc(100% - var(--o)), transparent var(--r), #000 calc(var(--r) + .6px)) bottom right / 51% 51% no-repeat;
  -webkit-mask: var(--heading-mask);
  mask: var(--heading-mask);
}

.l__section__headline::before {
  --r: var(--heading-corner);
  --o: 0px;
  background: var(--heading-line);
}

.l__section__headline::after {
  --r: calc(var(--heading-corner) + 1px);
  --o: -1px;
  inset: calc(var(--heading-inset) + 1px);
  background: var(--heading-bg);
}

/* 左右に添える小さな英字（トップの出演者一覧） */
.l__section__headline__side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .6em;
  text-indent: 0;
}

.l__section__headline__side--left {
  left: 30px;
}

.l__section__headline__side--right {
  right: 30px;
}

/* =========================================================
   7. トップページの一覧
   トップメニュー・出演者一覧
   ========================================================= */
.top-menu {
  display: flex;
  max-width: 100%;
  margin: 20px 0 0 0;
  justify-content: space-between;
  flex-wrap: wrap;
}

.top-menu__item {
  width: 49%;
  margin-bottom: 1.5%;
  font-size: 10px;
  text-align: left;
  letter-spacing: 0.03em;
  line-height: 2.5em;
}

.top-menu__item img {
  text-align: center;
  width: 100%;
  height: auto;
}

.performer-list {
  display: flex;
  max-width: 100%;
  margin: 20px 0 0 0;
  justify-content: space-between;
  flex-wrap: wrap;
}

.performer-list:before {
  content: "";
  display: block;
  width: 23%;
  height: 0;
  order: 1;
}

.performer-list:after {
  content: "";
  display: block;
  width: 23%;
  height: 0;
}

.performer-list__item {
  width: 23%;
  margin-bottom: 1.5%;
  font-size: 10px;
  text-align: left;
  letter-spacing: 0.03em;
  line-height: 2.5em;
}

.performer-list__item img {
  text-align: center;
  width: 100%;
  height: auto;
}

/* =========================================================
   8. 出演者ページ
   本文・タグ・前後リンク・サイドバー
   ========================================================= */
.sidebar__box {
  width: 100%;
  margin-top: 0%;
  padding: 2em 2em 2em 2em;
  background-color: #fff;
  text-align: left;
  letter-spacing: 0.15em;
  line-height: 2.4em;
}

.sidebar__banner {
  width: 100%;
  margin-top: 0px;
}

.post__tags {
  padding: 10px 0;
  margin-bottom: 30px;
  overflow: hidden;
  border-bottom: solid 1px;
}

.post__title {
  margin-top: 0px;
  font-size: 28px;
  font-weight: bold;
}

.post__tags {
  padding: 10px 0;
  overflow: hidden;
  border-bottom: solid 1px;
}

.post-nav__prev {
  float: left;
}

.post-nav__next {
  float: right;
}

.post-nav {
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
  padding-bottom: 10px;
}

.post-nav a {
  text-decoration: none;
  color: #000;
  font-size: 15px;
}

.post-nav a:hover {
  text-decoration: underline;
}

.post {
  display: flex;
  width: 1080px;
  margin-top: 0px;
  margin: 0 auto 30px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
  letter-spacing: 0.18em;
  line-height: 2.2;
}

.post__main {
  width: 75%;
  margin-bottom: 0.5%;
  text-align: left;
}

/* =========================================================
   9. 座談会・インタビュー
   2019 / 2023 / 2025 の座談会・インタビュー
   ========================================================= */
.talk {
  width: 100%;
  font-size: 18px;
  padding: 40px 80px;
  background-color: #fff;
}

.talk__heading {
  font-size: 18px;
  font-weight: bold;
  color: #00a1b3;
  border-top: solid 2px #00a1b3;
  border-bottom: solid 2px #00a1b3;
  padding: 2% 0;
  margin: 8% 0;
}

.talk__heading a {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: #00a1b3;
}

.talk__speaker--1 {
  color: #615ea8;
  font-weight: bold;
}

.talk__speaker--2 {
  color: #e95377;
  font-weight: bold;
}

.talk__speaker--3 {
  color: #3eb335;
  font-weight: bold;
}

.talk__speaker--4 {
  color: #ff8617;
  font-weight: bold;
}

.talk2023 {
  width: 100%;
  font-size: 1em;
  padding: 40px 80px;
  background-color: #fff;
}

.talk2023__top {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  padding: 5%;
  background: #FFFF00;
}

.talk2023__body {
  overflow: auto;
  padding: 5% 0;
}

.talk2023__speaker--1 {
  color: #E88018;
  font-weight: bold;
}

.talk2023__speaker--2 {
  color: #3758E2;
  font-weight: bold;
}

.talk2023__speaker--3 {
  color: #D13839;
  font-weight: bold;
}

.talk2023__speaker--4 {
  color: #8D3FAA;
  font-weight: bold;
}

.talk2023__speaker--5 {
  color: #683D1F;
  font-weight: bold;
}

.talk2023__heading {
  font-family: var(--font-mincho);
  font-size: 2.2em;
  font-weight: bold;
  margin: 5% auto;
  text-align: center;
  line-height: 1.5em;
}

.talk2023__subheading {
  font-family: var(--font-mincho);
  font-size: 2em;
  margin: 2% auto;
  text-align: center;
  line-height: 1.8em;
}

.talk2023__cols {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
}

.talk2025 {
  width: 100%;
  font-size: 1.1em;
  padding: 40px 80px;
  background-color: #fff;
}

.talk2025__top {
  width: 100%;
  height: auto;
  margin: -0.5% auto 0 auto;
  text-align: center;
  color: #fff;
  padding: 5%;
  background: #ff243f;
}

.talk2025__figure {
  width: 90%;
  height: auto;
  margin: 2% auto;
  display: block;
}

.talk2025__body {
  overflow: auto;
  padding: 5% 0;
}

.talk2025__speaker--1 {
  color: #29b200;
  font-weight: bold;
}

.talk2025__speaker--2 {
  color: #0063ea;
  font-weight: bold;
}

.talk2025__speaker--3 {
  color: #faa709;
  font-weight: bold;
}

.talk2025__heading-wrap {
  margin: 1em 0 1em 0;
}

.talk2025__heading {
  font-family: var(--font-mincho);
  font-size: 2.2em;
  font-weight: bold;
  margin: 5% auto;
  line-height: 1.5em;
  color: #fff;
  background: #71bebf;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .1em .3em;
}

.talk2025__subheading {
  font-family: var(--font-mincho);
  font-size: 1.6em;
  margin: 2% auto;
  text-align: center;
  line-height: 1.8em;
}

.talk2025__cols {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
}

.talk2025__figure-float {
  float: right;
  width: 50%;
  margin: 5% 0 2% 2%;
  display: block;
}

.flag {
  position: relative;
  margin: 5% auto;
  padding: clamp(28px,5vw,56px) 0;
}

.flag__inner {
  max-width: 50%;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 24px);
  text-align: center;
}

.flag__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto clamp(28px,4vw,40px);
}

.flag__button {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .6em 1.6em;
  border-radius: 999px;
  background: #71bebf;
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* =========================================================
   10. タイムテーブル
   会場名と番号マーク
   ========================================================= */
.venue-title__mark {
  width: 40px;
  height: 40px;
  position: relative;
  transform: rotate(45deg);
  margin: 0 0 0 2%;
  padding: 5px;
  box-sizing: border-box;
}

.venue-title__num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 1.4em;
  color: #fff;
}

.venue-title__mark--1 {
  background-color: #ec85b4;
  border: solid 4px #ec85b4;
}

.venue-title__mark--2 {
  background-color: #e7443a;
  border: solid 4px #e7443a;
}

.venue-title__mark--3 {
  background-color: #f08001;
  border: solid 4px #f08001;
}

.venue-title__mark--4 {
  background-color: #f3ab00;
  border: solid 4px #f3ab00;
}

.venue-title__mark--5 {
  background-color: #72ae2d;
  border: solid 4px #72ae2d;
}

.venue-title__mark--6 {
  background-color: #09a2de;
  border: solid 4px #09a2de;
}

.venue-title__mark--7 {
  background-color: #4c4297;
  border: solid 4px #4c4297;
}

.venue-title__text {
  font-size: 1.6em;
  line-height: 1.4;
  margin: 3% 0 3% 3%;
}

.venue-title {
  display: flex;
  align-items: center;
  margin: 2% auto;
}

/* =========================================================
   11. フッター（l__footer）
   会場マップ・コピーライト（assets/inc/footer.php）※SNS アイコンはヘッダー
   ========================================================= */
.l__footer {
  width: 100%;
  overflow: hidden;
}

.l__footer__body {
  width: 100%;
  margin: 60px 0 0 0;  /* コンテンツとフッターの間（スマホは 40px） */
  background-color: var(--theme-main);  /* 帯は画面幅いっぱい */
}

.l__footer__inner {
  width: 1080px;
  margin: 0 auto;
  padding: 32px 48px;  /* 帯の内側の余白（会場マップと帯の端との間） */
}

.l__footer__map {
  width: 100%;
  margin: 0 0 10px;
  text-align: center;
}

.l__footer__copyright {
  text-align: center;
}

.l__footer__copyright p {
  margin-top: 5px;
  color: #fff;
  font-size: 11px;
  line-height: 2.8;
  letter-spacing: 1px;
}

.l__footer__copyright span {
  font-weight: bold;
  color: #fff;
}

/* =========================================================
   12. TOPへ戻るボタン
   ========================================================= */
/* TOPへ戻るボタン（見出し・カードと同じ、四隅が逆Rの枠のデザイン）
   色はテーマカラー（--theme-main / --theme-on-main）、文字はしっぽり明朝 */
.page-top {
  position: fixed;
  bottom: 2%;
  right: 2%;
  z-index: 10;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
  /* 700px 以上スクロールで表示（common.js が .page-top--visible を付け外し） */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}

.page-top--visible {
  opacity: 1;
  visibility: visible;
}

.page-top__link {
  --pt-size: 64px;    /* ボタンの大きさ */
  --pt-cut: 8px;      /* 外側の四隅をくり抜く半径 */
  --pt-inset: 4px;    /* 内側の枠線の位置 */
  --pt-corner: 6px;   /* 内側の枠線の四隅の逆R の半径 */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--pt-size);
  height: var(--pt-size);
  padding-top: 6px;
  background: var(--theme-main);
  color: var(--theme-on-main);
  text-decoration: none;
  transition: transform .2s ease;
  -webkit-mask:
    radial-gradient(circle at 0px 0px, transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) 0px, transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0px calc(100% - 0px), transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) calc(100% - 0px), transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0px 0px, transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) 0px, transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0px calc(100% - 0px), transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) calc(100% - 0px), transparent var(--pt-cut), #000 calc(var(--pt-cut) + .6px)) bottom right / 51% 51% no-repeat;
}

.page-top__link:hover {
  transform: translateY(-3px);
}

/* 内側の枠線：白い面の上に、1px 内側へずらしたテーマカラーの面を重ねて線にする */
.page-top__link::before,
.page-top__link::after {
  content: "";
  position: absolute;
  inset: var(--pt-inset);
  z-index: -1;
}

.page-top__link::before {
  background: var(--theme-on-main);
  -webkit-mask:
    radial-gradient(circle at 0px 0px, transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) 0px, transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0px calc(100% - 0px), transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) calc(100% - 0px), transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0px 0px, transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) 0px, transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0px calc(100% - 0px), transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 0px) calc(100% - 0px), transparent var(--pt-corner), #000 calc(var(--pt-corner) + .6px)) bottom right / 51% 51% no-repeat;
}

.page-top__link::after {
  inset: calc(var(--pt-inset) + 1px);
  background: var(--theme-main);
  -webkit-mask:
    radial-gradient(circle at -1px -1px, transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - -1px) -1px, transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at -1px calc(100% - -1px), transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - -1px) calc(100% - -1px), transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at -1px -1px, transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - -1px) -1px, transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at -1px calc(100% - -1px), transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - -1px) calc(100% - -1px), transparent calc(var(--pt-corner) + 1px), #000 calc(calc(var(--pt-corner) + 1px) + .6px)) bottom right / 51% 51% no-repeat;
}

/* 上向きの細い矢印 */
.page-top__arrow {
  width: 12px;
  height: 12px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: translateY(3px) rotate(45deg);
}

.page-top__text {
  font-family: var(--font-mincho);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2em;
  text-indent: .2em;
}

/* =========================================================
   13. ポップアップ
   トップページのお知らせ表示中のスクロール固定
   ========================================================= */
html.is-popup-open,
html.is-popup-open body {
  overflow: hidden;
}

/* #########################################################
   スマホレイアウト（1080px 以下）
   上と同じ並び（リセット → パーツ → 各セクション）
   ######################################################### */
/* ---------- リセット・ベース（スマホ） ---------- */
@media (max-width: 1080px) {

  body,
  html {
    width: 100%;
  }

  iframe {
    max-width: 100%;
  }

}

/* ---------- パーツ（スマホ） ---------- */
@media (max-width: 1080px) {

  /* 左右の余白 16px（メインビジュアルは負の余白で画面幅いっぱい） */
  .inner {
    width: 100%;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
  }

  .panel--spacious {
    padding: 24px;
  }

}

@media screen and (max-width: 768px) {

  .panel-alt {
    width: 100%;
    padding: 5% 0;
  }

}

@media (max-width: 1080px) {

  .grid3 {
    margin: 10px 10px 10px 10px;
  }

  .grid3__item {
    width: 100%;
    margin-bottom: 2%;
  }

  .grid2 {
    margin: 10px 10px 10px 10px;
  }

  .grid2__item {
    width: 100%;
    margin-bottom: 2%;
  }

  /* 本文中の長い URL は折り返して余白からはみ出さないようにする */
  .icon-link a {
    overflow-wrap: anywhere;
  }

}

/* ---------- ヘッダー（スマホ） ---------- */
@media (max-width: 1080px) {

  .l__header__inner {
    overflow: hidden;
    padding: 0;
    background: #fff;
  }

  .l__header__box {
    width: 100%;
    margin:0;
    text-align: center;
  }

  .l__header__left {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }

  .l__header__left img {
    width: auto;
    /* max-width: min(300px, 100%);  最大 300px。狭い画面では左右の余白の内側に収める */
  }

  /* ロゴ：中央配置。右上のメニューボタンと重ならないよう左右を同じ幅だけ空ける */
  .l__header__logo {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 80px 8px 16px;
  }

  /* 開催日の下に SNS を1行で（中央寄せ） */
  .l__header__right {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0 16px 12px;
    text-align: center;
  }

  .l__header__sns {
    margin-top: 8px;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, .12);
  }

  .l__header .sns-list__link {
    width: 34px;
    height: 34px;
  }

  .l__header__nav {
    width: 100%;
  }

}

/* ---------- グローバルナビゲーション（スマホ） ---------- */
@media (max-width: 1080px) {

  .menu-trigger {
    display: inline-block;
  }

  .global-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: auto;
    background: #dcdcdc;
    padding-top: 80px;  /* 上端のボタンの高さ（--mt-size）と同じ。ボタンの真下からメニューを始める */
    text-align: left;
    opacity: 0;
    transition: opacity .2s;
  }

  .global-nav.global-nav--open {
    display: block;
  }

  .global-nav.global-nav--visible {
    opacity: 1;
  }

  nav.global-nav > ul.global-nav__list {
    display: block;
  }

  .global-nav .global-nav__list > li {
    text-align: left;
  }

  .global-nav .global-nav__list > li + li::before {
    content: none;
  }

  .global-nav .global-nav__list > li > a,
  .global-nav .global-nav__list > li > .global-nav__toggle {
    padding: 16px 20px;
    font-size: inherit;
    letter-spacing: .2em;
    white-space: normal;
    transition: background-color .25s ease;
    border-bottom: 1px solid rgba(255,255,255,.25);
  }

  .global-nav .global-nav__list > li > a:hover,
  .global-nav .global-nav__list > li > .global-nav__toggle:hover {
    background: var(--theme-main);
  }

  .global-nav .global-nav__list > li > a:active,
  .global-nav .global-nav__list > li > .global-nav__toggle:active {
    background: var(--theme-accent);
  }

  .global-nav .global-nav__list .global-nav__sub-list {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: rgba(0,0,0,.05);
  }

  .global-nav .global-nav__list .global-nav__sub-list a {
    padding: 12px 24px 12px 28px;
    font-size: inherit;
    letter-spacing: .05em;
    white-space: normal;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  .global-nav .global-nav__list .global-nav__sub-list a:hover {
    background: transparent;
  }

  .global-nav .global-nav__list > li.global-nav__item--parent > a::after,
  .global-nav .global-nav__list > li.global-nav__item--parent > .global-nav__toggle::after {
    content: "－";
    float: right;
    font-weight: 700;
    transform: translateY(1px);
  }

  .global-nav .global-nav__list > li.global-nav__item--closed > a::after,
  .global-nav .global-nav__list > li.global-nav__item--closed > .global-nav__toggle::after {
    content: "＋";
  }

  .global-nav .global-nav__list > li.global-nav__item--closed > .global-nav__sub-list {
    display: none;
  }

  .global-nav .global-nav__list > li.global-nav__item--coming-soon > a::after {
    position: static;
    display: inline-block;
    transform: none;
    margin-left: 12px;
    vertical-align: 2px;
  }

  .global-nav {
    background: #fff;
  }

  .global-nav .global-nav__list .global-nav__sub-list {
    background: #fff;
  }

  .global-nav .global-nav__list .global-nav__sub-list a {
    position: relative;
    padding: 15px 44px 15px 38px;
    color: #222;
    font-weight: 500;
    letter-spacing: .05em;
    border-bottom: 1px solid #e6e6e6;
  }

  /* 左：テーマカラーの短い線 */
  .global-nav .global-nav__list .global-nav__sub-list a::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--theme-main);
  }

  /* 右：矢印 */
  .global-nav .global-nav__list .global-nav__sub-list a::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-top: 1.5px solid #999;
    border-right: 1.5px solid #999;
    transform: rotate(45deg);
  }

  .global-nav .global-nav__list .global-nav__sub-list a:hover {
    background: #fff;
  }

  .global-nav .global-nav__list .global-nav__sub-list a:active {
    background: #f2f2f2;
    background: color-mix(in srgb, var(--theme-main) 12%, #fff);
  }

  /* 上の階層のリンク（TOP・高知大道芸フェスとは など） */
  .global-nav .global-nav__list > li:not(.global-nav__item--coming-soon):not(.global-nav__item--parent) > a {
    position: relative;
    padding-right: 60px;
  }

  .global-nav .global-nav__list > li:not(.global-nav__item--coming-soon):not(.global-nav__item--parent) > a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M7.5 12h8.5M12.8 8.8 16 12l-3.2 3.2' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M7.5 12h8.5M12.8 8.8 16 12l-3.2 3.2' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* 座談会の開閉ボタン：＋／－ */
  .global-nav .global-nav__list > li.global-nav__item--parent > .global-nav__toggle {
    position: relative;
    padding-right: 60px;
  }

  .global-nav .global-nav__list > li.global-nav__item--parent > .global-nav__toggle::after {
    content: "";
    float: none;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    transform: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M7.5 12h9' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M7.5 12h9' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .global-nav .global-nav__list > li.global-nav__item--closed > .global-nav__toggle::after {
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M12 7.5v9M7.5 12h9' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M12 7.5v9M7.5 12h9' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* 座談会のサブメニュー：テーマカラーの丸枠の矢印 */
  .global-nav .global-nav__list .global-nav__sub-list a {
    padding-left: 20px;
    padding-right: 60px;
  }

  .global-nav .global-nav__list .global-nav__sub-list a::before {
    content: none;
  }

  .global-nav .global-nav__list .global-nav__sub-list a::after {
    right: 20px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border: 0;
    transform: none;
    background-color: var(--theme-main);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M7.5 12h8.5M12.8 8.8 16 12l-3.2 3.2' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11.25' stroke-width='1'/%3E%3Cpath d='M7.5 12h8.5M12.8 8.8 16 12l-3.2 3.2' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

}

/* ---------- メインビジュアル（スマホ） ---------- */
@media (max-width: 1080px) {

  /* .inner の左右の余白を打ち消して画面幅いっぱいに */
  .inner > .l__mv {
    margin-left: -16px;
    margin-right: -16px;
  }

}

/* ---------- セクション（スマホ） ---------- */
@media (max-width: 1080px) {

  .l__section {
    margin-top: 32px;
  }

  .l__section__headline {
    --heading-inset: 4px;
    --heading-corner: 6px;
    min-height: 11vw;  /* 旧画像（1281×141）と同じ比率で画面幅に合わせる */
    margin-bottom: 16px;
    padding: 4px 24px;
    font-size: clamp(16px, 4.6vw, 26px);
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .l__section__headline__side {
    display: none;
  }

}

/* ---------- トップページの一覧（スマホ） ---------- */
@media (max-width: 1080px) {

  .top-menu {
    margin: 10px 10px 10px 10px;
  }

  .top-menu__item {
    width: 100%;
    margin-bottom: 2%;
  }

  .performer-list {
    margin: 10px 10px 10px 10px;
  }

  .performer-list__item {
    width: 48.8%;
    margin-bottom: 2%;
  }

  /* 一覧の左右の余白は上の 16px に統一 */
  .top-menu,
  .performer-list,
  .grid2,
  .grid3 {
    margin-left: 0;
    margin-right: 0;
  }

}

/* ---------- 出演者ページ（スマホ） ---------- */
@media (max-width: 1080px) {

  .post__title {
    margin-top: 20px;
    font-size: 21px;
    font-weight: bold;
  }

}

/* ---------- 座談会・インタビュー（スマホ） ---------- */
@media (max-width: 768px) {

  .talk {
    font-size: 1em;
    padding: 5% 7%;
  }

  .talk__heading {
    font-size: 1em;
    margin: 15% 0;
  }

}

@media screen and (max-width: 768px) {

  .talk2023 {
    font-size: 1em;
    padding: 5% 7%;
  }

  .talk2023__heading {
    font-size: 1.8em;
    margin: 15% auto 5% auto;
  }

  .talk2023__subheading {
    font-size: 1.5em;
    margin: 5% auto;
  }

  .talk2025 {
    font-size: 1em;
    padding: 5% 7%;
  }

  .talk2025__heading {
    font-size: 1.5em;
    margin: 15% auto 5% auto;
  }

  .talk2025__subheading {
    font-size: 1.2em;
    margin: 5% auto;
  }

  .talk2025__figure-float {
    float: none;
    width: 100%;
    margin: 0 0 12px 0;
  }

  .flag {
    position: relative;
    margin: 10% auto;
    padding: clamp(28px, 5vw, 56px) 0;
  }

  .flag__inner {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

}

/* ---------- タイムテーブル（スマホ） ---------- */
@media screen and (max-width: 768px) {

  .venue-title__text {
    font-size: 1.2em;
    margin: 3% 0 3% 6%;
  }

}

/* ---------- フッター（スマホ） ---------- */
@media (max-width: 1080px) {

  .l__footer__body {
    margin-top: 40px;  /* コンテンツとフッターの間 */
  }

  .l__footer__inner {
    width: 100%;
    overflow: hidden;
    padding: 30px 15px;
  }

  .l__footer__map {
    margin-bottom: 2%;
    height: 200px;
  }

  .l__footer__map iframe {
    height: 100%;
  }

}

/* ---------- TOPへ戻るボタン（スマホ） ---------- */
@media (max-width: 1080px) {

  .page-top__link {
    --pt-size: 54px;
    --pt-cut: 7px;
    gap: 4px;
  }

}