@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');
/* =====================================================================
   修道社 - 『生命物語』公式・創作コミュニティ
   聖堂テーマ：象牙のベージュ × 深紅の祭服 × 金の祭具 × 十字架
   見た目はエレガントな大聖堂、中身はFlex/Gridの完全レスポンシブ。
   PCは3カラム（左：広告／中央：本文／右：大メニュー）、スマホは1カラム。
   ===================================================================== */
/* ---- パレット ----
   深紅（緋の祭服）   #0f0f0f / 濃 #333333 / 明 #0f0f0f
   薔薇紅（可憐）     #606060
   金（祭具・燭台）   #e5e5e5 / 明金 #e5e5e5
   象牙（聖堂の壁）   #f9f9f9 / 明 #ffffff
   羊皮紙             #f2f2f2
   文字（黒檀）       #0f0f0f
*/
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: #f9f9f9;
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(0,0,0, .35), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(0,0,0, .05), transparent 70%);
  background-attachment: fixed;
  color: #0f0f0f;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "MS PGothic", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  overflow-x: hidden;
}
a { color: #0f0f0f; }
a:hover { color: #606060; }
img { max-width: 100%; height: auto; }
.mono { font-family: "Courier New", monospace; }

/* =====================================================================
   3カラムレイアウト（PC）：左=広告塔／中央=本文／右=大メニュー
   ===================================================================== */
.layout {
  display: grid;
  /* v3.5: PC(>=1024px)は常に3カラム。列幅は画面に合わせて伸縮 */
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) minmax(220px, 300px);
  gap: 22px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 18px;
  align-items: start;
}
.main-col { min-width: 0; }
.wrap { max-width: 100%; margin: 0 auto; padding: 0 0 60px; }
.side { position: sticky; top: 8px; padding: 14px 0 40px; }
.side-title {
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  border: 1px solid #333333; border-top-color: #e5e5e5;
  box-shadow: 0 0 0 1px #e5e5e5;
  color: #ffffff; font-size: 12px; font-weight: bold; letter-spacing: .12em;
  text-align: center; padding: 5px 8px; margin: 14px 0 8px; border-radius: 2px;
}
.side-title::before { content: "\271D\00A0"; color: #606060; }

/* 広告スロット（左カラム：横長の小バナー置き場） */
.ad-stack { display: flex; flex-direction: column; gap: 8px; }
.ad-slot {
  width: 100%; min-height: 52px;
  background: #ffffff;
  border: 1px dashed #e5e5e5;
  color: #b09a72; font-size: 10.5px; letter-spacing: .1em;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px; text-decoration: none; border-radius: 2px;
}
.ad-slot:hover { background: #f2f2f2; color: #0f0f0f; }
.ad-slot img { display: block; width: 100%; height: auto; }
.ad-note { font-size: 10px; color: #b09a72; text-align: center; margin: 4px 0 0; }

/* 右カラム：大メニュー */
.side-menu { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 2px; box-shadow: 1px 2px 0 #e5e5e5; }
.side-menu a {
  display: block; padding: 7px 12px; font-size: 12.5px; color: #5e4438;
  text-decoration: none; border-bottom: 1px dashed #e5e5e5;
}
.side-menu a:last-child { border-bottom: none; }
.side-menu a:hover { background: #f2f2f2; color: #0f0f0f; }
.side-menu a b { color: #0f0f0f; }
.side-mini { font-size: 11px; color: #606060; line-height: 1.7; padding: 8px 10px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 2px; }

@media (max-width: 1023px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  /* 右の大メニューはハンバーガーに集約するので隠す */
  .side-right { display: none; }
  /* 左の広告塔は本文の下にカードとして表示 */
  .side-left {
    position: static; order: 9;
    margin: 18px 10px 0; padding: 12px 12px 14px;
    background: #ffffff; border: 1px solid #e5e5e5; border-radius: 10px;
  }
  .side-left .side-title { text-align: center; margin-bottom: 10px; }
  /* バナーは中央寄せの縦積み・幅をそろえる */
  .side-left .ad-stack {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  .side-left .ad-slot {
    width: 100%; max-width: 320px; margin: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; text-align: center;
  }
  .side-left .ad-slot img { width: auto; max-width: 100%; height: auto; }
  .side-left .side-mini, .side-left .ad-note { text-align: center; max-width: 320px; margin-left: auto; margin-right: auto; }
  .side-left .side-title + .ad-stack { margin-bottom: 6px; }
}

/* =====================================================================
   サイトヘッダー：大聖堂のファサード
   ===================================================================== */
.site-top {
  text-align: center;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(0,0,0, .3), transparent 70%),
    linear-gradient(180deg, #ffffff, #f9f9f9);
  border-bottom: 3px double #0f0f0f;
  box-shadow: 0 1px 0 #e5e5e5, 0 2px 0 #f2f2f2;
  padding: 18px 10px 12px;
  position: relative;
}
.site-top::before {
  content: "\271D";
  display: block;
  font-size: 20px; line-height: 1;
  color: #0f0f0f;
  text-shadow: 0 1px 0 #e5e5e5, 0 0 14px rgba(0,0,0, .6);
  margin-bottom: 2px;
}
.site-top .logo {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 32px; letter-spacing: .4em; color: #0f0f0f;
  text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 #e5e5e5;
  margin: 0;
}
.site-top .logo a { color: #0f0f0f; text-decoration: none; }
.site-top .sub { font-size: 12px; color: #606060; letter-spacing: .26em; margin: 2px 0 0; }
.site-top .sub::before, .site-top .sub::after { content: "\2014\00A0\2720\00A0\2014"; color: #fff; margin: 0 8px; }
.site-top .counter {
  display: inline-block; margin-top: 7px; font-size: 12px; color: #606060;
  background: #ffffff; border: 1px solid #e5e5e5; border-radius: 2px; padding: 2px 14px;
  box-shadow: inset 0 0 0 2px #f9f9f9;
}
.site-top .counter b { font-family: "Courier New", monospace; color: #0f0f0f; letter-spacing: 2px; }

/* お知らせティッカー：緋のリボン */
.ticker {
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  border-top: 1px solid #e5e5e5; border-bottom: 1px solid #333333;
  box-shadow: 0 1px 0 #e5e5e5;
  overflow: hidden; white-space: nowrap; font-size: 13px; color: #ffffff;
}
.ticker span {
  display: inline-block; padding: 5px 0; padding-left: 100%;
  animation: tick 26s linear infinite;
  text-shadow: 0 1px 2px rgba(70, 8, 28, .5);
}
@keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ナビ：聖堂の回廊 */
.retro-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  background: #ffffff; border-bottom: 2px solid #e5e5e5;
  box-shadow: 0 1px 0 #f2f2f2;
  padding: 8px 6px;
  font-size: 13px;
}
.retro-nav a {
  text-decoration: none; padding: 5px 11px; border-radius: 2px;
  border: 1px solid transparent; white-space: nowrap; color: #5e4438;
}
.retro-nav a:hover, .retro-nav a.active {
  background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f;
}
.retro-nav a.nav-post {
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f); color: #ffffff;
  border: 1px solid #e5e5e5; font-weight: bold;
  box-shadow: 0 0 0 1px #0f0f0f;
}
.retro-nav a.nav-post:hover { background: linear-gradient(180deg, #0f0f0f, #0f0f0f); }
.retro-nav a.nav-mypage {
  background: #ffffff; color: #0f0f0f; border: 1px solid #e5e5e5; font-weight: bold;
}
.retro-nav a.nav-mypage:hover { background: #f2f2f2; }
.retro-nav a.nav-official {
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f) !important;
  color: #ffffff !important; border: 1px solid #e5e5e5 !important; font-weight: bold;
}
.retro-nav a.nav-official::before { content: "\271D\00A0"; color: #606060; font-weight: normal; }
.retro-nav a.nav-official:hover { background: linear-gradient(180deg, #0f0f0f, #0f0f0f) !important; }
.login-line { text-align: center; font-size: 12px; color: #606060; background: #ffffff; padding: 4px 8px 8px; border-bottom: 1px solid #e5e5e5; }

/* =====================================================================
   見出し・パネル：祭壇と羊皮紙
   ===================================================================== */
.bar {
  background: linear-gradient(180deg, #0f0f0f 0%, #0f0f0f 60%, #333333 100%);
  border: 1px solid #333333; border-top: 1px solid #e5e5e5;
  box-shadow: 0 0 0 1px #e5e5e5, 2px 2px 0 1px #e5e5e5;
  border-radius: 2px;
  color: #ffffff; font-weight: bold; font-size: 15px;
  padding: 7px 14px; margin: 26px 0 12px;
  text-shadow: 0 1px 2px rgba(70, 8, 28, .55);
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px;
}
.bar > span:first-child::before { content: "\271D\00A0"; color: #606060; font-weight: normal; }
.bar .more { font-size: 12px; font-weight: normal; }
.bar a { color: #f2f2f2; }
.bar a:hover { color: #fff; }

.panel {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  outline: 1px solid #e5e5e5; outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 2px 2px 0 #e5e5e5;
  padding: 14px 16px; margin-bottom: 14px;
}
.panel.dotted { border-style: dashed; }

/* トップバナー：祭壇画の額 */
.top-banner {
  border: 1px solid #e5e5e5; outline: 3px double #0f0f0f; outline-offset: 4px;
  background: #ffffff; padding: 6px; margin: 18px 0 8px;
  text-align: center; border-radius: 2px;
}
.top-banner img { display: block; width: 100%; border: 1px solid #e5e5e5; }
.top-banner .caption { font-size: 12px; color: #606060; padding: 6px 2px 1px; letter-spacing: .06em; }

.blink { animation: blink 1.1s step-start infinite; color: #606060; font-weight: bold; }
@keyframes blink { 50% { opacity: 0; } }

/* =====================================================================
   サムネイルギャラリー：聖画の小窓
   ===================================================================== */
.thumb-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.thumb-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  outline: 1px solid #e5e5e5; outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 2px 2px 0 #e5e5e5;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .15s;
}
.thumb-card:hover {
  background: #ffffff; text-decoration: none;
  box-shadow: 0 0 0 2px #e5e5e5, 0 0 14px rgba(0,0,0, .45);
}
.thumb-card .frame {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-bottom: 1px solid #e5e5e5;
  background: linear-gradient(135deg, #f9f9f9, #ffffff 50%, #f2f2f2);
}
.thumb-card .frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.t-badge {
  position: absolute; left: 0; top: 0; color: #fff; font-size: 10px; padding: 1px 8px;
  border-bottom-right-radius: 8px; opacity: .96;
  border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
}
.t-bgm {
  position: absolute; right: 3px; bottom: 3px;
  background: rgba(0,0,0, .85); color: #f2f2f2;
  border: 1px solid #e5e5e5;
  font-size: 10px; padding: 0 6px; border-radius: 8px;
}
.t-cmt {
  position: absolute; left: 3px; bottom: 3px;
  background: rgba(253, 250, 243, .92); color: #606060;
  border: 1px solid #e5e5e5;
  font-size: 9.5px; padding: 0 6px; border-radius: 8px; white-space: nowrap;
}
.t-new {
  position: absolute; right: 3px; top: 3px;
  background: #ffffff; color: #0f0f0f; border: 1px solid #e5e5e5;
  font-size: 9px; font-weight: bold; padding: 1px 6px; border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0, .55);
}
.thumb-card .t-title {
  display: block; padding: 6px 7px 2px; font-size: 12px; font-weight: bold; color: #5e2a3a;
  line-height: 1.35; word-break: break-word;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.thumb-card .t-author { padding: 0 7px 7px; font-size: 11px; color: #a2826a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 700px) {
  .thumb-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ---- タグ・チップ：金縁の聖標 ---- */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ptag {
  background: #ffffff; border: 1px solid #e5e5e5; border-radius: 11px;
  color: #0f0f0f; font-size: 12px; padding: 3px 12px; text-decoration: none;
  box-shadow: inset 0 0 0 1px #f9f9f9;
}
.ptag:hover { background: #f2f2f2; text-decoration: none; }
.ptag.on {
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  border-color: #e5e5e5; color: #ffffff;
  box-shadow: 0 0 6px rgba(0,0,0, .45);
}

/* ---- ボタン：聖具 ---- */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, #ffffff, #f2f2f2);
  border: 1px solid #e5e5e5; border-radius: 3px;
  color: #0f0f0f; font-family: inherit; font-size: 14px; font-weight: bold;
  padding: 8px 18px;
  box-shadow: inset 0 0 0 1px #ffffff, 1px 1px 0 #e5e5e5;
}
.btn:hover { background: #f2f2f2; color: #333333; text-decoration: none; box-shadow: 0 0 0 1px #e5e5e5; }
.btn.primary {
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  border-color: #e5e5e5; color: #ffffff;
  box-shadow: 0 0 0 1px #0f0f0f, 1px 1px 0 #e5e5e5;
}
.btn.primary:hover { background: linear-gradient(180deg, #0f0f0f, #0f0f0f); color: #fff; }
.btn.small { font-size: 12px; padding: 4px 12px; font-weight: normal; }
.btn.gray { color: #606060; border-color: #c8b89e; background: linear-gradient(180deg, #ffffff, #f9f9f9); }
.btn.danger { color: #ffffff; background: linear-gradient(180deg, #b03030, #8a1f1f); border-color: #e5e5e5; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- フォーム：写本台 ---- */
.form-table { width: 100%; border-collapse: collapse; }
.form-table th {
  width: 170px; text-align: left; vertical-align: top;
  background: #f2f2f2; border: 1px solid #e0cfae;
  color: #6e3a2a; font-size: 13px; padding: 10px 12px;
}
.form-table td { border: 1px solid #e0cfae; padding: 10px 12px; background: #ffffff; }
input[type=text], input[type=password], select, textarea {
  width: 100%; max-width: 520px;
  background: #fffdf8; border: 1px solid #c8a87e; border-radius: 2px;
  color: #0f0f0f; font-family: inherit; font-size: 15px; padding: 8px 10px;
}
textarea { min-height: 110px; }
input[type=file] { font-size: 13px; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #e5e5e5; border-color: #0f0f0f; }
.note { font-size: 12px; color: #a2826a; margin-top: 4px; }
label.check { display: inline-flex; align-items: center; gap: 5px; margin: 0 12px 6px 0; font-size: 13.5px; white-space: nowrap; }
.error-box { background: #fbe9e7; border: 1px solid #d9a097; border-radius: 2px; color: #8a1f1f; font-size: 14px; padding: 9px 13px; margin: 10px 0; border-left: 4px solid #8a1f1f; }
.ok-box { background: #f3f7e9; border: 1px solid #b9cf9a; border-radius: 2px; color: #4a6a2a; font-size: 14px; padding: 9px 13px; margin: 10px 0; border-left: 4px solid #6a8a4a; }

/* ---- レス（祈りの記帳）＋アイコン＋管理人バッジ ---- */
.res-list { display: flex; flex-direction: column; gap: 0; }
.res-item { border-bottom: 1px dashed #e5e5e5; padding: 10px 4px; }
.res-item:last-child { border-bottom: none; }
.res-head { font-size: 12px; color: #a2826a; display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; }
.res-name { color: #1f6b2a; font-weight: bold; font-size: 13.5px; }
.trip { color: #1f6b2a; font-size: 12px; font-family: "Courier New", monospace; }
.res-body { margin-top: 4px; font-size: 14.5px; word-break: break-word; }
.spoiler { background: #5a4a50; color: #5a4a50; border-radius: 2px; cursor: pointer; padding: 0 4px; }
.spoiler.revealed, .spoiler:hover { color: #fff; }

.author-chip { display: inline-flex; align-items: center; gap: 6px; }
.author-link { text-decoration: none; }
.author-link:hover .res-name { color: #0f0f0f; }
.mini-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid #e5e5e5; background: #ffffff; object-fit: cover;
  box-shadow: 0 0 0 1px #f9f9f9;
}
.owner-badge {
  display: inline-block;
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  color: #f2f2f2; border: 1px solid #e5e5e5; border-radius: 9px;
  font-size: 10.5px; font-weight: bold; letter-spacing: .04em;
  padding: 0 8px; line-height: 1.7;
  box-shadow: 0 0 6px rgba(0,0,0, .5);
  text-shadow: none;
}

/* ---- 音楽室：聖歌隊席 ---- */
.music-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---- 音楽室：詰めたリスト（Spotify風・カード枠なし） ---- */
.music-list2 { display: flex; flex-direction: column; gap: 14px; }
.m2-row {
  background: #fffdf8;
  border: 1px solid #e0cfae;
  border-left: 4px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px 14px 10px;
  box-shadow: 0 1px 3px rgba(110,15,44,.08);
}
.m2-comment {
  font-size: 13px; color: #5e4438; margin: 9px 0 0; padding: 7px 11px;
  background: #f7f7f7; border-left: 3px solid #e5e5e5; border-radius: 0 4px 4px 0;
}
.m2-tags { margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.m2-tags .tag-mini { text-decoration: none; cursor: pointer; }
.m2-tags .tag-mini:hover { background: #f0dcc0; }
/* 作曲者・日付は曲に密着（上に区切り線、次の曲と混同しない） */
.m2-foot {
  margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed #e5e5e5;
  font-size: 12px;
}
.m2-edit { margin-top: 8px; }
.m2-edit > summary { cursor: pointer; font-size: 12px; color: #0f0f0f; }
.music-item {
  background: #ffffff; border: 1px solid #e5e5e5;
  outline: 1px solid #e5e5e5; outline-offset: 2px;
  border-radius: 2px; box-shadow: 2px 2px 0 #e5e5e5;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.music-title { font-weight: bold; color: #333333; font-size: 14.5px; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.tag-mini { display: inline-block; background: #f2f2f2; border: 1px solid #e5e5e5; border-radius: 9px; color: #0f0f0f; font-size: 11px; padding: 0 8px; margin: 0 4px 4px 0; }
audio { width: 100%; height: 34px; }

/* =====================================================================
   聖堂デザイン・本格オーディオプレイヤー（.ca2／Spotify風カード）
   ジャケット＋再生・シーク・時間・ミュート。スマホ最適化。
   ===================================================================== */
.ca2 {
  display: flex; align-items: stretch; gap: 12px;
  background: linear-gradient(135deg, #fffdf8 0%, #f7efe0 100%);
  border: 1px solid #e5e5e5;
  outline: 1px solid #e5e5e5; outline-offset: 1px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(110,15,44,.12), inset 0 1px 0 #fffdf8;
  padding: 10px;
}
/* ジャケット（正方形・CD風） */
.ca2-cover {
  position: relative; flex-shrink: 0;
  width: 76px; height: 76px; border-radius: 8px; overflow: hidden;
  border: 1px solid #e5e5e5; box-shadow: 0 1px 4px rgba(70,8,28,.25);
  background: #0f0f0f;
}
.ca2-cover img, .ca2-cover .ca2-autocover { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca2-coverbtn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; padding: 0;
  background: rgba(70,8,28,.32); color: #fff; opacity: 0; transition: opacity .15s;
}
.ca2-cover:hover .ca2-coverbtn, .ca2.is-playing .ca2-coverbtn { opacity: 1; }
.ca2-cover-ico { display: flex; align-items: center; justify-content: center; }
.ca2-coverbtn .ca-icon-pause { display: none; }
.ca2.is-playing .ca2-coverbtn .ca-icon-play { display: none; }
.ca2.is-playing .ca2-coverbtn .ca-icon-pause { display: flex; }
.ca2-kind {
  position: absolute; left: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(163,27,68,.92), rgba(138,21,56,.92));
  color: #f2f2f2; font-size: 9px; letter-spacing: .04em;
  padding: 1px 7px 1px 5px; border-top-right-radius: 8px; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
}

.ca2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ca2-head { line-height: 1.3; }
.ca2-title { font-weight: bold; color: #333333; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 14px; }
.ca2-by { font-size: 11px; color: #a2826a; margin-left: 6px; }

/* オーディオスペクトラム（canvas） */
.ca-spectrum {
  display: block; width: 100%; height: 34px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(138,21,56,.06), rgba(201,162,39,.04));
}

/* CSS図形アイコン（端末フォント非依存・豆腐化しない） */
.ca-ico { display: inline-block; }
.ca-ico-play {
  width: 0; height: 0; border-style: solid;
  border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}
.ca-ico-pause {
  width: 13px; height: 15px; position: relative;
}
.ca-ico-pause::before, .ca-ico-pause::after {
  content: ""; position: absolute; top: 0; width: 4px; height: 15px; background: currentColor; border-radius: 1px;
}
.ca-ico-pause::before { left: 1px; }
.ca-ico-pause::after { right: 1px; }
/* スピーカー（音あり／ミュート）をCSSで */
.ca-ico-vol, .ca-ico-muted { width: 16px; height: 14px; position: relative; }
.ca-ico-vol::before, .ca-ico-muted::before {
  content: ""; position: absolute; left: 0; top: 3px;
  border-style: solid; border-width: 4px 6px 4px 0; border-color: transparent currentColor transparent transparent;
}
.ca-ico-vol::after {
  content: ""; position: absolute; left: 8px; top: 1px; width: 5px; height: 10px;
  border: 2px solid currentColor; border-left: none; border-radius: 0 8px 8px 0;
}
.ca-ico-muted::after {
  content: ""; position: absolute; left: 7px; top: 0; width: 12px; height: 2px;
  background: currentColor; transform: rotate(45deg); transform-origin: left center;
}

.ca2-controls { display: flex; align-items: center; gap: 8px; }
.ca2-play {
  position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #b8264f, #0f0f0f 70%);
  color: #f2f2f2; box-shadow: 0 2px 6px rgba(110,15,44,.4), inset 0 1px 0 rgba(255,233,176,.4);
  transition: transform .12s, box-shadow .15s;
}
.ca2-play:hover { transform: scale(1.07); box-shadow: 0 3px 10px rgba(110,15,44,.5), 0 0 12px rgba(201,162,39,.55); }
.ca2-play:active { transform: scale(.95); }
.ca2-play .ca-icon-play, .ca2-play .ca-icon-pause { display: flex; align-items: center; justify-content: center; }
.ca2-play .ca-icon-pause { display: none; }
.ca2.is-playing .ca2-play .ca-icon-play { display: none; }
.ca2.is-playing .ca2-play .ca-icon-pause { display: flex; }
.ca2.is-playing .ca2-play { animation: ca2-glow 2.4s ease-in-out infinite; }
@keyframes ca2-glow {
  0%,100% { box-shadow: 0 2px 6px rgba(110,15,44,.4), inset 0 1px 0 rgba(255,233,176,.4); }
  50%     { box-shadow: 0 2px 6px rgba(110,15,44,.4), 0 0 16px rgba(231,207,142,.9); }
}

.ca2-cur, .ca2-dur { font-family: "Courier New", monospace; font-size: 11px; color: #8a6a55; flex-shrink: 0; min-width: 30px; text-align: center; }

/* シークバー：金レール×緋の充填、つまみは聖盤 */
.ca-seek { position: relative; flex: 1; min-width: 60px; height: 18px; display: flex; align-items: center; }
.ca-seek::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 5px; border-radius: 3px; background: #e7d8bf; box-shadow: inset 0 1px 1px rgba(110,15,44,.15);
}
.ca-seek-fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 5px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #0f0f0f, #606060); pointer-events: none;
}
.ca-seek-range { position: relative; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; height: 18px; cursor: pointer; }
.ca-seek-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffdf8, #e5e5e5 70%, #e5e5e5);
  border: 1px solid #0f0f0f; box-shadow: 0 0 5px rgba(201,162,39,.75);
}
.ca-seek-range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffdf8, #e5e5e5 70%, #e5e5e5);
  border: 1px solid #0f0f0f; box-shadow: 0 0 5px rgba(201,162,39,.75);
}
.ca-seek-range::-webkit-slider-runnable-track { background: transparent; }
.ca-seek-range::-moz-range-track { background: transparent; }

/* ミュート */
.ca2-mute {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #e5e5e5; background: #ffffff; color: #0f0f0f; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ca2-mute:hover { background: #f2f2f2; }
.ca2-mute .ca-ico-muted { display: none; }
.ca2.is-muted .ca2-mute .ca-ico-vol { display: none; }
.ca2.is-muted .ca2-mute .ca-ico-muted { display: inline-block; }
.ca2.is-muted .ca2-mute { color: #b08a72; }

/* music-list2 の行内ではプレイヤーの枠を消す（カードの二重枠を防ぐ） */
.m2-row .ca2 { border: none; outline: none; box-shadow: none; background: transparent; padding: 0; }

@media (max-width: 700px) {
  .ca2 { gap: 10px; padding: 9px; }
  .ca2-cover { width: 64px; height: 64px; }
  .ca2-play { width: 38px; height: 38px; }
  .ca2-cur, .ca2-dur { min-width: 26px; font-size: 10px; }
  .ca-spectrum { height: 28px; }
}
.muted { color: #a2826a; font-size: 12px; }

/* ---- 作品ビューア ---- */
.viewer-v { max-width: 100%; margin: 0 auto; }
.viewer-v img { display: block; width: 100%; border: 1px solid #e5e5e5; background: #fff; margin-bottom: 2px; }
.viewer-h { text-align: center; }
.viewer-h img { max-width: 100%; width: 100%; max-height: 90vh; cursor: pointer; border: 1px solid #e5e5e5; background: #fff; }

/* 漫画・作品閲覧ページ用ワイドラッパー（.wrapを上書き） */
.wrap.viewer-wrap,
.viewer-wrap { max-width: 1400px; margin: 0 auto; padding: 0 0 60px; }
.page-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* ---- 聖堂デザインの再生バー（独自オーディオプレイヤー） ---- */
.cathedral-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 11px;
  color: #f2f2f2;
  background:
    radial-gradient(ellipse 50% 120% at 50% 0%, rgba(231,207,142,.18), transparent 70%),
    linear-gradient(180deg, #0f0f0f 0%, #0f0f0f 55%, #333333 100%);
  border-top: 2px solid #e5e5e5;
  box-shadow: 0 -1px 0 #e5e5e5, 0 -6px 18px rgba(70,8,28,.35);
}
.cathedral-player::before,                /* 左右に金の燭台ライン */
.cathedral-player::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #e5e5e5, transparent);
}
.cathedral-player::before { left: 0; }
.cathedral-player::after { right: 0; }

/* 再生トグル：金縁の聖盤。十字→再生記号がフェードで切替 */
.cp-toggle {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #e5e5e5;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f0c6d1 60%, #606060 100%);
  cursor: pointer; padding: 0;
  box-shadow: 0 0 0 3px rgba(110,15,44,.5), 0 0 12px rgba(201,162,39,.55);
  transition: transform .15s, box-shadow .15s;
}
.cp-toggle:hover { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(110,15,44,.6), 0 0 18px rgba(231,207,142,.8); }
.cp-toggle .cp-cross, .cp-toggle .cp-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #0f0f0f; transition: opacity .2s;
}
.cp-toggle .cp-cross { font-size: 22px; opacity: 1; }
.cp-toggle .cp-play { font-size: 16px; opacity: 0; padding-left: 2px; }
.cathedral-player.playing .cp-toggle .cp-cross { opacity: 0; }
.cathedral-player.playing .cp-toggle .cp-play  { opacity: 0; }   /* 再生中は停止記号を出す */
.cathedral-player.playing .cp-toggle::after {
  content: "\25A0"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #0f0f0f; font-size: 15px;
}
.cathedral-player.playing .cp-toggle {
  background: radial-gradient(circle at 50% 38%, #fffdf8 0%, #e5e5e5 60%, #e5e5e5 100%);
  animation: cp-glow 2.4s ease-in-out infinite;
}
@keyframes cp-glow {
  0%,100% { box-shadow: 0 0 0 3px rgba(110,15,44,.5), 0 0 12px rgba(201,162,39,.5); }
  50%     { box-shadow: 0 0 0 3px rgba(110,15,44,.5), 0 0 22px rgba(231,207,142,.95); }
}

.cp-body { flex: 1; min-width: 0; }
/* 曲名：枠内に収まれば中央寄せ、はみ出れば流れる（マーキー） */
.cp-info {
  font-size: 13.5px; line-height: 1.5; overflow: hidden; white-space: nowrap;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(70,8,28,.6);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.cp-info .cp-track { display: inline-block; padding-left: 0; will-change: transform; }
.cp-info.is-marquee .cp-track { animation: cp-marquee 11s linear infinite; }
@keyframes cp-marquee {
  0%   { transform: translateX(8px); }
  12%  { transform: translateX(8px); }       /* 最初に少し止めて読ませる */
  100% { transform: translateX(-100%); }
}
.cp-eqbar { height: 14px; margin-top: 1px; opacity: 0; transition: opacity .3s; }
.cathedral-player.playing .cp-eqbar { opacity: 1; }
.eq { color: #ffd98e; letter-spacing: -1px; font-family: monospace; font-size: 13px; }
.cp-ornament { flex-shrink: 0; color: #e5e5e5; font-size: 16px; opacity: .85; text-shadow: 0 0 8px rgba(201,162,39,.6); }

@media (max-width: 700px) {
  .cp-ornament { display: none; }
  .cp-toggle { width: 42px; height: 42px; }
  .cp-info { font-size: 13px; }
}

/* =====================================================================
   音声ピッカー（検索付き・大きめクラシックメニュー）
   ===================================================================== */
.cue-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cue-no {
  flex-shrink: 0; min-width: 56px; text-align: center;
  font-size: 12.5px; font-weight: bold; color: #ffffff;
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  border: 1px solid #333333; box-shadow: 0 0 0 1px #e5e5e5;
  border-radius: 2px; padding: 5px 8px;
}
.cue-page { font-size: 12px; color: #606060; white-space: nowrap; }
.cue-pageno { width: 54px; max-width: 54px; text-align: center; display: inline-block; padding: 6px 4px; }

.sound-picker { position: relative; display: block; width: 100%; min-width: 0; flex: 1 1 240px; }
.sp-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: linear-gradient(180deg, #fffdf8, #f2f2f2);
  border: 1px solid #e5e5e5; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #fffdf8, 0 1px 0 #e5e5e5;
  color: #5e2a3a; font-family: inherit; font-size: 14px; text-align: left;
  padding: 11px 14px; min-height: 46px; cursor: pointer;
}
.sp-trigger:hover { background: #f2f2f2; }
.sound-picker.is-open .sp-trigger { border-color: #0f0f0f; box-shadow: 0 0 0 2px rgba(201,162,39,.5); }
.sp-current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.sp-caret { color: #0f0f0f; flex-shrink: 0; transition: transform .15s; font-size: 12px; }
.sound-picker.is-open .sp-caret { transform: rotate(180deg); }

.sp-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70;
  background: #fffdf8;
  border: 1px solid #e5e5e5; outline: 3px double #0f0f0f; outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(70,8,28,.32);
}
.sp-menu::before {                         /* メニュー上辺の十字飾り */
  content: "\271D"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  color: #0f0f0f; font-size: 17px; text-shadow: 0 0 6px rgba(201,162,39,.7);
  background: #fffdf8; padding: 0 7px;
}
/* 検索ボックス（虫眼鏡アイコン付き・大きめ） */
.sp-search-wrap { position: relative; padding: 12px 12px 10px; border-bottom: 1px solid #e5e5e5; background: #f7f7f7; }
.sp-search-icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); font-size: 15px; color: #b08a52; pointer-events: none; }
.sp-search {
  width: 100%; max-width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #c8a87e; border-radius: 3px;
  font-size: 15px; padding: 10px 12px 10px 38px; min-height: 44px;
  -webkit-appearance: none; appearance: none;
}
.sp-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.sp-search:focus { outline: 2px solid #e5e5e5; border-color: #0f0f0f; }
.sp-list { list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sp-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 12px; border-bottom: 1px dashed #eeeeee; border-radius: 2px;
  cursor: pointer; font-size: 14px; color: #0f0f0f; min-height: 46px;
}
.sp-item:last-child { border-bottom: none; }
.sp-item:hover, .sp-item:active { background: #f2f2f2; }
.sp-item.is-selected { background: #ffffff; box-shadow: inset 4px 0 0 #0f0f0f; }
.sp-item.sp-none { color: #a2826a; font-style: italic; }
.sp-mark { color: #e5e5e5; flex-shrink: 0; font-size: 15px; }
.sp-title { font-weight: bold; color: #333333; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.sp-by { font-size: 12px; color: #a2826a; }
.sp-tags { font-size: 11px; color: #1f6b2a; width: 100%; padding-left: 23px; }
.sp-empty { text-align: center; color: #a2826a; font-size: 13px; padding: 18px 8px; margin: 0; }

/* スマホ：選びやすいよう画面下からせり出すシート風に */
@media (max-width: 700px) {
  .sound-picker { width: 100%; }
  .sound-picker.is-open .sp-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    border-radius: 12px 12px 0 0; outline: none;
    border: none; border-top: 3px solid #e5e5e5;
    box-shadow: 0 -10px 30px rgba(70,8,28,.4);
    z-index: 200;
  }
  .sound-picker.is-open .sp-menu::before { display: none; }
  .sound-picker.is-open .sp-list { max-height: 52vh; }
  /* シート表示中の背景オーバーレイ */
  .sound-picker.is-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(70,8,28,.35); z-index: 150;
  }
  .sp-search { font-size: 16px; }   /* iOSのズーム防止に16px */
}

/* ---- テーブル ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.list { width: 100%; border-collapse: collapse; background: #ffffff; font-size: 13px; }
table.list th, table.list td { border: 1px solid #e5e5e5; padding: 7px 9px; text-align: left; vertical-align: top; }
table.list th { background: #f2f2f2; color: #6e3a2a; white-space: nowrap; }
table.list tr:nth-child(even) td { background: #faf5ea; }
.admin-red { color: #8a1f1f; }

/* ---- マイページ：聖人の間 ---- */
.author-head {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid #e5e5e5; outline: 3px double #0f0f0f; outline-offset: 4px;
  border-radius: 3px; padding: 16px 18px; margin-top: 8px;
}
.author-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: #f2f2f2; border: 2px solid #e5e5e5; color: #0f0f0f;
  display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: bold;
  overflow: hidden;
  box-shadow: 0 0 0 3px #ffffff, 0 0 10px rgba(0,0,0, .4);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-head .pen { font-size: 19px; font-weight: bold; color: #333333; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.author-head .attrs { font-size: 12.5px; color: #a2826a; }

/* ---- フッター：地下聖堂 ---- */
.site-footer {
  border-top: 3px double #0f0f0f;
  box-shadow: 0 -1px 0 #e5e5e5;
  background: linear-gradient(180deg, #ffffff, #f2f2f2);
  color: #606060; font-size: 12px; text-align: center; padding: 20px 12px 26px; margin-top: 44px;
}
.site-footer::before { content: "\2720\00A0\271D\00A0\2720"; display: block; color: #e5e5e5; letter-spacing: .5em; font-size: 12px; margin-bottom: 6px; }
.site-footer .home-banner {
  display: inline-block; border: 1px solid #e5e5e5; background: #ffffff;
  font-size: 11px; padding: 2px 16px; margin-bottom: 8px; color: #0f0f0f; text-decoration: none;
  border-radius: 2px;
}
.empty-note {
  background: #ffffff; border: 2px dashed #e5e5e5; border-radius: 3px;
  color: #a2826a; padding: 26px 14px; text-align: center; font-size: 14px;
}
.center { text-align: center; }

/* ---- 互換エイリアス（管理画面等） ---- */
.section-head {
  background: linear-gradient(180deg, #0f0f0f 0%, #0f0f0f 60%, #333333 100%);
  border: 1px solid #333333; border-top: 1px solid #e5e5e5;
  box-shadow: 0 0 0 1px #e5e5e5;
  border-radius: 2px;
  color: #ffffff; padding: 7px 14px; margin: 26px 0 12px;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px;
  text-shadow: 0 1px 2px rgba(70, 8, 28, .55);
}
.section-head h2 { margin: 0; font-size: 15px; color: #ffffff; }
.section-head h2::before { content: "\271D\00A0"; color: #e5e5e5; font-weight: normal; }
.section-head .more { font-size: 12px; }
.section-head a { color: #f2f2f2; }
.card {
  background: #ffffff; border: 1px solid #e5e5e5;
  outline: 1px solid #e5e5e5; outline-offset: 2px;
  border-radius: 2px; box-shadow: 2px 2px 0 #e5e5e5;
  padding: 14px 16px; margin-bottom: 14px;
}

/* ---- レスポンシブ（共通） ---- */
@media (max-width: 700px) {
  body { font-size: 14px; }
  .site-top .logo { font-size: 24px; letter-spacing: .25em; }
  .retro-nav { gap: 2px; padding: 6px 4px; font-size: 12.5px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td { display: block; width: 100%; border: none; }
  .form-table th { background: #f2f2f2; border-left: 3px solid #0f0f0f; padding: 7px 10px; }
  .form-table td { padding: 9px 2px 14px; background: transparent; }
  .bar { font-size: 14px; }
}

/* =====================================================================
   公式エリア（修道社公式『生命物語』）：最も荘厳な区画
   ===================================================================== */
.official-zone {
  position: relative;
  background-color: #fffdf8;
 
  border: 4px double #0f0f0f;
  outline: 1px solid #e5e5e5;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #ffffff, 2px 4px 0 7px #e5e5e5;
  border-radius: 2px;
  padding: 18px 16px 20px;
  margin: 26px 0 14px;
}
.official-zone .oz-head {
  position: relative; text-align: center;
  border-bottom: none;
  padding: 26px 8px 14px; margin-bottom: 14px;
  background:
    linear-gradient(180deg, transparent calc(100% - 3px), #e5e5e5 calc(100% - 3px), #e5e5e5 calc(100% - 2px), transparent calc(100% - 2px)),
    linear-gradient(180deg, transparent calc(100% - 1px), #0f0f0f calc(100% - 1px));
}
.official-zone .oz-head::before {
  content: "\271D";
  display: block; font-size: 24px; line-height: 1; color: #0f0f0f;
  text-shadow: 0 1px 0 #e5e5e5, 0 0 14px rgba(0,0,0, .6);
  margin-bottom: 4px;
}
.official-zone .oz-head .oz-logo {
  margin: 0; font-size: 23px; letter-spacing: .34em; font-weight: bold; color: #0f0f0f;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  text-shadow: 1px 1px 0 #fffdf8, 2px 2px 0 #e5e5e5;
}
.official-zone .oz-head .oz-sub { margin: 4px 0 0; font-size: 11px; letter-spacing: .26em; color: #606060; }
.official-zone .oz-head .oz-sub::before,
.official-zone .oz-head .oz-sub::after { content: "\2014\00A0\2720\00A0\2014"; color: #e5e5e5; margin: 0 8px; }

.official-bar {
  background: linear-gradient(180deg, #0f0f0f 0%, #0f0f0f 55%, #333333 100%);
  color: #fffdf8; font-weight: bold; font-size: 14px; letter-spacing: .06em;
  padding: 7px 14px; margin: 18px 0 12px;
  border: 1px solid #5e0e26; border-top: 1px solid #e5e5e5;
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, .25), 0 0 0 1px #e5e5e5, 2px 2px 0 1px #ffffff;
  border-radius: 2px;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px;
  text-shadow: 0 1px 2px rgba(70, 8, 28, .6);
}
.official-bar > span:first-child::before { content: "\271D\00A0"; color: #606060; font-weight: normal; }
.official-bar a { color: #f2f2f2; text-decoration: underline; }
.official-bar a:hover { color: #fff; background: transparent; }
.official-bar .more { font-size: 11.5px; font-weight: normal; }
.official-bar .more::after { content: "\00A0\2720"; color: #606060; }

.of-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
.of-card {
  border: 1px solid #e5e5e5;
  outline: 1px solid #f0c6d1; outline-offset: 2px;
  background: linear-gradient(180deg, #fffdf8, #ffffff);
  padding: 6px 6px 4px;
  text-decoration: none; color: #6b4450; display: block;
  border-radius: 3px;
  box-shadow: 2px 2px 0 #f6dde4;
  transition: box-shadow .15s;
}
.of-card:hover {
  text-decoration: none; color: #0f0f0f; background: #fffdf8;
  box-shadow: 0 0 0 2px #e5e5e5, 0 0 14px rgba(0,0,0, .45);
}
.of-card .frame {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid #e5e5e5;
  border-top-left-radius: 999px 340px;
  border-top-right-radius: 999px 340px;
  background: linear-gradient(135deg, #ffffff 0%, #fff 45%, #fdeef2 100%);
}
.of-card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-cat {
  position: absolute; left: 0; top: 0;
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  color: #fffdf8; font-size: 9.5px; letter-spacing: .04em;
  padding: 2px 9px 2px 7px;
  border-bottom-right-radius: 10px;
  border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
}
.of-new {
  position: absolute; right: 4px; top: 4px;
  background: #fffdf8; color: #0f0f0f;
  border: 1px solid #e5e5e5; border-radius: 9px;
  font-size: 9px; font-weight: bold; padding: 1px 6px;
  box-shadow: 0 0 6px rgba(0,0,0, .6);
}
.of-snd {
  position: absolute; right: 4px; bottom: 4px;
  background: rgba(0,0,0, .88); color: #f2f2f2;
  border: 1px solid #e5e5e5; border-radius: 9px;
  font-size: 10px; padding: 0 7px;
}
/* アーチ型サムネではバッジを内側に寄せる（角丸で切れないように） */
.honpen-card .of-new { top: 30%; right: 8px; }
.honpen-card .of-snd { bottom: 8px; right: 8px; }
.of-card .t {
  font-size: 12px; font-weight: bold; color: #6b2138; margin-top: 5px; line-height: 1.45;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.of-card .m { font-size: 10.5px; color: #ad7d8a; font-family: "Courier New", monospace; }
.of-card .m::before { content: "\2720\00A0"; color: #e5e5e5; }

.of-list {
  border: 1px solid #e5e5e5;
  outline: 1px solid #f0c6d1; outline-offset: 2px;
  background: #fffdf8; font-size: 13px; border-radius: 2px;
}
.of-list .row { padding: 7px 12px; border-bottom: 1px dashed #e8b9c4; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.of-list .row:last-child { border-bottom: none; }
.of-list .row:hover { background: #ffffff; }
.of-list .time { font-family: "Courier New", monospace; font-size: 11px; color: #606060; flex-shrink: 0; }
.of-list a { color: #0f0f0f; }
.of-list a:hover { color: #606060; background: transparent; }

.of-cat-label {
  display: inline-block;
  border: 1px solid #e5e5e5; background: #fffdf8; color: #0f0f0f;
  font-size: 10.5px; letter-spacing: .04em; padding: 1px 10px; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #fdeef2;
}
a.of-cat-label:hover, .of-cat-label.on {
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  color: #fffdf8; border-color: #e5e5e5;
  box-shadow: 0 0 6px rgba(0,0,0, .5);
}

article.official-post { max-width: 100%; margin: 0 auto; color: #50393f; }
article.official-post .of-title {
  position: relative;
  font-size: 24px; line-height: 1.55; color: #0f0f0f;
  text-align: center; padding: 10px 6px 14px; margin: 10px 0 6px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: .08em;
  text-shadow: 1px 1px 0 #fffdf8;
  border-bottom: 3px double #e5e5e5;
  background: linear-gradient(180deg, transparent calc(100% - 6px), #ffffff calc(100% - 6px));
}
article.official-post .of-title::before {
  content: "\2720\00A0\271D\00A0\2720";
  display: block; font-size: 13px; letter-spacing: .5em; color: #e5e5e5;
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(0,0,0, .5);
}
.of-meta { font-size: 12px; font-family: "Courier New", monospace; color: #606060; text-align: center; margin-bottom: 16px; }

.of-eyecatch {
  border: 1px solid #e5e5e5;
  outline: 3px double #0f0f0f; outline-offset: 4px;
  margin: 6px 0 22px; padding: 5px;
  background: linear-gradient(180deg, #fffdf8, #ffffff);
  border-top-left-radius: 999px 130px;
  border-top-right-radius: 999px 130px;
  overflow: hidden;
}
.of-eyecatch img {
  display: block; width: 100%;
  border-top-left-radius: 999px 124px;
  border-top-right-radius: 999px 124px;
}

.of-body { font-size: 15.5px; color: #50393f; background: transparent; }
.of-body h2 {
  font-size: 19px; color: #0f0f0f;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  border-left: none; border-bottom: 2px solid #e5e5e5;
  background: linear-gradient(90deg, #ffffff, transparent 80%);
  padding: 5px 12px 4px; margin: 28px 0 12px;
  letter-spacing: .05em;
}
.of-body h2::before { content: "\271D\00A0"; color: #e5e5e5; font-size: 15px; }
.of-body h3 {
  font-size: 16px; color: #0f0f0f;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  border-bottom: 1px dashed #e5e5e5; padding-bottom: 3px; margin: 22px 0 9px;
}
.of-body h3::before { content: "\2720\00A0"; color: #e5e5e5; font-size: 12px; }
.of-body p { margin: 0 0 1.25em; }
.of-body a { color: #0f0f0f; }
.of-body blockquote {
  margin: 1.1em 0; padding: 10px 16px;
  border-left: 4px solid #e5e5e5;
  background: #ffffff;
  border-top: 1px dashed #e8b9c4; border-bottom: 1px dashed #e8b9c4;
  color: #6b2138;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.of-body hr { border: none; height: 18px; margin: 26px 0; background: none; text-align: center; }
.of-body hr::before {
  content: "\2720\00A0\00A0\271D\00A0\00A0\2720";
  color: #e5e5e5; font-size: 13px; letter-spacing: .4em;
}

figure.of-photo {
  margin: 20px 0; padding: 6px;
  border: 1px solid #e5e5e5;
  outline: 1px solid #f0c6d1; outline-offset: 3px;
  background: #fffdf8;
  box-shadow: 2px 2px 0 #f6dde4; border-radius: 2px;
}
figure.of-photo img { display: block; width: 100%; }

.of-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 14px 0; }
.of-gallery a {
  border: 1px solid #e5e5e5; display: block; padding: 4px; background: #fffdf8;
  border-top-left-radius: 999px 220px; border-top-right-radius: 999px 220px;
  overflow: hidden;
  box-shadow: 2px 2px 0 #f6dde4;
}
.of-gallery a:hover { box-shadow: 0 0 0 2px #e5e5e5, 0 0 12px rgba(0,0,0, .45); }
.of-gallery img {
  display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-top-left-radius: 999px 214px; border-top-right-radius: 999px 214px;
}

.of-panel {
  background: #fffdf8;
  border: 1px solid #e5e5e5;
  outline: 1px solid #f0c6d1; outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 2px 2px 0 #f6dde4;
  padding: 14px 16px; margin-bottom: 14px; color: #50393f;
}
.of-filled {
  background: linear-gradient(180deg, #0f0f0f, #333333);
  color: #f2f2f2; text-align: center; font-size: 13px;
  border: 1px solid #5e0e26; box-shadow: 0 0 0 1px #e5e5e5;
  padding: 12px; margin: 10px 0; border-radius: 2px;
}
.of-filled::before { content: "\271D"; display: block; color: #e5e5e5; font-size: 16px; margin-bottom: 2px; }
.of-comment-aborn { opacity: .5; font-style: italic; }

.btn.official {
  border: 1px solid #e5e5e5; box-shadow: 0 0 0 1px #fdeef2 inset, 1px 1px 0 #f3cdd6;
  color: #0f0f0f; background: linear-gradient(180deg, #fffdf8, #ffffff);
  border-radius: 3px;
}
.btn.official:hover { background: #ffffff; color: #333333; box-shadow: 0 0 0 1px #e5e5e5; }
.btn.official-primary {
  border: 1px solid #e5e5e5;
  background: linear-gradient(180deg, #0f0f0f, #0f0f0f);
  color: #fffdf8; box-shadow: 0 0 0 1px #0f0f0f, 1px 1px 0 #f3cdd6;
  border-radius: 3px; font-weight: bold; letter-spacing: .04em;
}
.btn.official-primary:hover { background: linear-gradient(180deg, #0f0f0f, #0f0f0f); color: #fff; }
.btn.official-primary::before { content: "\2720\00A0"; color: #e5e5e5; font-weight: normal; }

@media (max-width: 700px) {
  .of-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  article.official-post .of-title { font-size: 19px; letter-spacing: .05em; }
  .official-zone { padding: 14px 10px 16px; box-shadow: 0 0 0 5px #ffffff, 2px 3px 0 5px #e5e5e5; }
  .official-zone .oz-head .oz-logo { font-size: 18px; letter-spacing: .22em; }
  .of-eyecatch { border-top-left-radius: 999px 70px; border-top-right-radius: 999px 70px; }
  .of-eyecatch img { border-top-left-radius: 999px 66px; border-top-right-radius: 999px 66px; }
}
/* --- 該当箇所を以下のように書き換えてください --- */

.of-grid { 
  display: grid; 
  gap: 10px; 
  /* ★ここを修正：PCでは画面幅に合わせて4列、5列、6列と綺麗に正方形で横並びにする設定 */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
}

.of-card { 
  border: 1px solid #000; 
  background: #fff; 
  padding: 4px; 
  text-decoration: none; 
  color: #000; 
  display: flex;         /* ★追加：縦長化を防ぐ */
  flex-direction: column;/* ★追加：縦長化を防ぐ */
}

.of-card:hover { outline: 2px solid #000; text-decoration: none; color: #000; background: #fff; }

.of-card .frame {
  position: relative;
  width: 100%;            /* ★追加：幅を100%に */
  aspect-ratio: 1 / 1;    /* ★追加：PCでも絶対に1:1の正方形にする */
  overflow: hidden;
  border: 1px solid #000;
  background: #fff;
}
.of-card .frame img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

/* =====================================================================
   V15：本編ゾーン／メディアカード（動画・ゲーム）／埋め込みステージ
   モバイル・ボトム固定ナビ／メニューシート
   ===================================================================== */

/* 本編（Web漫画）ゾーン：公式より格上の見せ方 */
.honpen-zone {

  border: 1px solid #e5e5e5; outline: 2px solid #0f0f0f; outline-offset: 3px;
  border-radius: 10px; padding: 16px 16px 14px; margin: 4px 0 26px;
  box-shadow: 0 4px 14px rgba(110,15,44,.14);
}
.hz-head { text-align: center; margin-bottom: 12px; }
.hz-logo {
  font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-weight: bold;
  font-size: 21px; color: #0f0f0f; margin: 0; letter-spacing: .06em;
}
.hz-logo::before, .hz-logo::after { content: "\271D"; color: #e5e5e5; margin: 0 .5em; font-size: .8em; vertical-align: 2px; }
.hz-sub { font-size: 11.5px; color: #9a7a52; margin: 2px 0 0; letter-spacing: .08em; }
.honpen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.honpen-card {
  display: flex; flex-direction: column; text-decoration: none; color: #5e2a3a;
  background: #fffdf8; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden;
  transition: transform .12s, box-shadow .15s;
}
.honpen-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(110,15,44,.2); }
.honpen-card .frame {
  position: relative; aspect-ratio: 3/4; background: #f2f2f2; overflow: hidden;
  /* 教会のアーチ窓：上部を半円に */
  border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px;
  border: 1px solid #d8b87a;
  box-shadow: inset 0 0 0 2px #fffdf8, inset 0 0 0 3px #e5e5e5;
}
.honpen-card .frame img { width: 100%; height: 100%; object-fit: cover; }
/* アーチ頂部に小さな十字の装飾 */
.honpen-card .frame::after {
  content: "\271D"; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  color: #fffdf8; font-size: 13px; text-shadow: 0 1px 3px rgba(70,8,28,.6); z-index: 2;
}
.honpen-card .t { font-weight: bold; font-size: 13px; padding: 7px 9px 2px; line-height: 1.35; }
.honpen-card .m { font-size: 11px; color: #a2826a; padding: 0 9px 8px; }

/* メディアカード共通グリッド（動画・ゲーム） */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 8px; }
.media-card {
  display: flex; flex-direction: column; text-decoration: none; color: #5e2a3a;
  background: #fffdf8; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden;
  transition: transform .12s, box-shadow .15s;
}
.media-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(110,15,44,.18); }
.mc-thumb {
  position: relative; width: 100%;
  background: radial-gradient(circle at 50% 40%, #b8264f, #0f0f0f 75%);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
/* サムネ画像があるときは再生ボタンを半透明オーバーレイに */
.mc-thumb[style*="background-image"] .mc-play { background: rgba(253,250,243,.85); }
.mc-thumb.ar-16-9 { aspect-ratio: 16/9; }
.mc-thumb.ar-4-3  { aspect-ratio: 4/3; }
.mc-thumb.ar-1-1  { aspect-ratio: 1/1; }
.mc-thumb.ar-3-4  { aspect-ratio: 3/4; }
.mc-play {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(253,250,243,.92); color: #0f0f0f;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.mc-kind {
  position: absolute; left: 0; bottom: 0;
  background: rgba(110,15,44,.92); color: #f2f2f2; border-top-right-radius: 8px;
  font-size: 9px; letter-spacing: .1em; padding: 2px 8px; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
}
.mc-title { font-weight: bold; font-size: 13px; padding: 7px 9px 1px; line-height: 1.35; color: #333333; }
.mc-by { font-size: 11px; color: #a2826a; padding: 0 9px 8px; }

/* 埋め込みステージ（iframe・比率維持） */
.game-stage, .video-stage {
  position: relative; width: 100%; margin: 4px auto 0;
  background: #1a0810; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(70,8,28,.35);
}
.game-stage.ar-4-3  { aspect-ratio: 4/3; max-width: 720px; }
.game-stage.ar-16-9 { aspect-ratio: 16/9; max-width: 900px; }
.game-stage.ar-1-1  { aspect-ratio: 1/1; max-width: 620px; }
.game-stage.ar-3-4  { aspect-ratio: 3/4; max-width: 540px; }
.video-stage.ar-16-9 { aspect-ratio: 16/9; max-width: 900px; }
.game-stage iframe, .video-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.g-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.g-tags .tag-mini { text-decoration: none; }

/* =====================================================================
   モバイル・ボトム固定ナビ（PCでは非表示）
   ===================================================================== */
/* =====================================================================
   V19：モバイル教会風ハンバーガーメニュー（ボトムナビ廃止）
   ===================================================================== */
.hb-btn { display: none; }
.hb-drawer { display: none; }

@media (max-width: 1080px) {
  /* 旧ボトムナビの余白は不要 */
  body { padding-bottom: 0; }

  /* 右上に固定するハンバーガーボタン（金枠の聖印） */
  .hb-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 12px; right: auto; z-index: 340;
    width: 46px; height: 46px; border: none; cursor: pointer;
    border-radius: 50% 50% 12px 12px;
    background: radial-gradient(circle at 50% 32%, #f2f2f2, #e5e5e5 80%);
    box-shadow: 0 3px 12px rgba(180,140,0,.35), 0 0 0 2px #fff, 0 0 0 3px #e5e5e5;
    transition: transform .15s, box-shadow .2s;
  }
  .hb-btn:active { transform: scale(.93); }
  .hb-lines { position: relative; width: 22px; height: 16px; display: block; }
  .hb-lines i {
    position: absolute; left: 0; width: 100%; height: 2.4px; border-radius: 2px;
    background: #606060; transition: transform .35s cubic-bezier(.7,0,.3,1), opacity .25s, top .35s;
  }
  .hb-lines i:nth-child(1) { top: 0; }
  .hb-lines i:nth-child(2) { top: 7px; }
  .hb-lines i:nth-child(3) { top: 14px; }
  /* 開いている間は×印に変形（CSSアニメ） */
  .hb-open .hb-lines i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .hb-open .hb-lines i:nth-child(2) { opacity: 0; }
  .hb-open .hb-lines i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .hb-open .hb-btn { border-radius: 12px; }

  /* ドロワー本体 */
  .hb-drawer { display: block; position: fixed; inset: 0; z-index: 335; pointer-events: none; }
  .hb-scrim {
    position: absolute; inset: 0; background: rgba(90,66,0,.4);
    opacity: 0; transition: opacity .4s ease; backdrop-filter: blur(2px);
  }
  .hb-panel {
    position: absolute; top: 0; left: 0; right: auto; height: 100%; width: min(86%, 360px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(ellipse 120% 40% at 30% 0%, rgba(255,214,30,.3), transparent 60%),
      linear-gradient(170deg, #fffef8 0%, #ffffff 55%, #ffffff 100%);
    border-right: 1px solid #e5e5e5;
    box-shadow: 14px 0 40px rgba(180,140,0,.28);
    transform: translateX(-105%);
    transition: transform .5s cubic-bezier(.22,1,.36,1);
    padding-bottom: 28px;
  }
  .hb-open .hb-drawer { pointer-events: auto; }
  .hb-open .hb-scrim { opacity: 1; }
  .hb-open .hb-panel { transform: translateX(0); }

  /* 中身は開いたとき順番にふわっと（スタッガー） */
  .hb-panel > * { opacity: 0; transform: translateY(10px); }
  .hb-open .hb-panel > * { animation: hb-in .5s cubic-bezier(.22,1,.36,1) forwards; }
  .hb-open .hb-panel > *:nth-child(1) { animation-delay: .10s; }
  .hb-open .hb-panel > *:nth-child(2) { animation-delay: .16s; }
  .hb-open .hb-panel > *:nth-child(3) { animation-delay: .22s; }
  .hb-open .hb-panel > *:nth-child(4) { animation-delay: .27s; }
  .hb-open .hb-panel > *:nth-child(5) { animation-delay: .31s; }
  .hb-open .hb-panel > *:nth-child(6) { animation-delay: .35s; }
  .hb-open .hb-panel > *:nth-child(7) { animation-delay: .39s; }
  .hb-open .hb-panel > *:nth-child(8) { animation-delay: .43s; }
  .hb-open .hb-panel > *:nth-child(9) { animation-delay: .47s; }
  @keyframes hb-in { to { opacity: 1; transform: translateY(0); } }

  /* 上部：サイトの紋章 */
  .hb-crest {
    position: relative; text-align: center;
    padding: 22px 16px 18px;
    background:
      radial-gradient(ellipse 90% 80% at 50% 0%, rgba(255,255,255,.55), transparent 70%),
      linear-gradient(180deg, #f2f2f2, #e5e5e5);
    color: #606060;
    border-bottom: 2px solid #e5e5e5;
  }
  .hb-x {
    position: absolute; top: 8px; right: 10px; background: none; border: none;
    color: #606060; font-size: 26px; line-height: 1; cursor: pointer; opacity: .85;
  }
  .hb-cross { font-size: 22px; color: #606060; margin-bottom: 2px; }
  .hb-title {
    font-family: "Hiragino Mincho ProN","Yu Mincho",serif; font-weight: bold;
    font-size: 28px; letter-spacing: .28em; text-indent: .28em;
    color: #fff; text-shadow: 0 1px 0 #e5e5e5, 0 2px 8px rgba(160,120,0,.5);
  }
  .hb-sub { font-size: 10.5px; color: #7a5c00; letter-spacing: .08em; margin-top: 6px; }

  /* アカウント */
  .hb-acct, .hb-login { margin: 14px 14px 0; display: block; }
  .hb-acct {
    background: #fffef8; border: 1px solid #e5e5e5; border-radius: 10px;
    padding: 11px 13px; font-size: 13px; color: #0f0f0f;
  }
  .hb-acct-name { display: block; margin-bottom: 8px; }
  .hb-acct-act { display: flex; gap: 8px; }
  .hb-acct-act a {
    flex: 1; text-align: center; text-decoration: none; font-weight: bold; font-size: 12.5px;
    padding: 8px 0; border-radius: 6px; background: #ffffff; color: #606060; border: 1px solid #e5e5e5;
  }
  .hb-acct-act a.ghost { background: #fff; color: #8a6a55; }
  .hb-login {
    text-decoration: none; text-align: center; border-radius: 10px;
    padding: 12px; background: linear-gradient(180deg,#f2f2f2,#e5e5e5);
    border: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(232,181,0,.3);
  }
  .hb-login-t { display: block; color: #606060; font-weight: bold; font-size: 14px; }
  .hb-login-d { display: block; color: #606060; font-size: 10.5px; margin-top: 3px; }

  /* セクション見出し */
  .hb-sec {
    margin: 18px 18px 8px; font-size: 11px; letter-spacing: .18em; color: #606060;
    font-family: "Hiragino Mincho ProN","Yu Mincho",serif; position: relative;
  }
  .hb-sec::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
    background: linear-gradient(90deg, #e5e5e5, transparent);
  }

  /* 導線リンク */
  .hb-links { margin: 0 12px; display: flex; flex-direction: column; gap: 2px; }
  .hb-link {
    display: flex; align-items: center; gap: 13px; text-decoration: none;
    padding: 12px 12px; border-radius: 9px; color: #0f0f0f;
    transition: background .15s, transform .1s;
  }
  .hb-link:active { background: #fff3c4; transform: scale(.99); }
  .hb-link.active { background: #ffffff; box-shadow: inset 3px 0 0 #e5e5e5; }
  .hb-li {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50% 50% 9px 9px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 36%, #fffef2, #fff2c4);
    box-shadow: inset 0 0 0 1px #e5e5e5; color: #606060;
  }
  .hb-li svg { width: 21px; height: 21px; fill: currentColor; }
  .hb-li svg [stroke] { fill: none; }
  .hb-lt { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
  .hb-lt small { display: block; font-size: 10.5px; color: #606060; font-weight: normal; margin-top: 1px; }

  /* 投稿3カード */
  .hb-post3 { margin: 0 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .hb-pcard {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
    padding: 12px 4px; border-radius: 10px; color: #606060; font-size: 11.5px; font-weight: bold;
    background: #fffef8; border: 1px solid #e5e5e5; border-top: 3px solid #e5e5e5;
  }
  .hb-pcard:active { background: #ffffff; }
  .hb-pi {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 36%, #fffef2, #fff2c4);
    box-shadow: inset 0 0 0 1px #e5e5e5; color: #606060;
  }
  .hb-pi svg { width: 22px; height: 22px; fill: currentColor; }
  .hb-pi svg [stroke] { fill: none; }

  .hb-mini { text-align: center; margin: 16px 14px 0; font-size: 12px; }
  .hb-mini a { color: #606060; text-decoration: none; }
  .hb-mini span { color: #d8c88e; margin: 0 6px; }

  /* 下部：著作権 */
  .hb-foot {
    margin: 18px 14px 0; padding: 14px 12px;
    border-top: 1px solid #e5e5e5; text-align: center;
    font-size: 10.5px; line-height: 1.7; color: #606060;
  }
  .hb-foot-mark { color: #e5e5e5; font-size: 16px; margin-bottom: 6px; }
  .hb-foot-c { display: block; margin-top: 8px; color: #b0a072; letter-spacing: .04em; }
}

/* PC ではハンバーガーもドロワーも出さない */
@media (min-width: 1081px) {
  .hb-btn, .hb-drawer { display: none !important; }
}

/* =====================================================================
   V16/V17：視聴回数（目）＆複数リアクション（すてき/お気に入り/祈り/感動）
   ===================================================================== */
.rx-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 10px 0 2px; padding: 6px 0;
}
.rx-views {
  display: inline-flex; align-items: center; gap: 5px;
  color: #8a6a55; font-size: 13px; font-family: "Courier New", monospace;
}
.rx-eye { width: 19px; height: 19px; fill: #b08a72; }
.rx-views .rx-num { color: #6e4a38; }

/* リアクションボタン群 */
.rx-react { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.rx-rform { margin: 0; }
.rx-rbtn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fffdf8; border: 1px solid #e0cfae; border-radius: 999px;
  padding: 7px 13px 7px 11px; font-family: inherit; font-size: 12.5px; color: #8a6a55;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
}
.rx-rbtn:hover { background: #f7f7f7; border-color: #e5e5e5; }
.rx-rbtn:active { transform: scale(.93); }
.rx-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: fill .15s, stroke .15s; }
.rx-rbtn .rx-rlabel { font-size: 12px; }
.rx-rbtn .rx-num { font-family: "Courier New", monospace; font-weight: bold; }

/* 押下済み：種別ごとに色を変えてアイコンを塗る */
.rx-rbtn.active { color: #fff; border-color: transparent; }
.rx-rbtn.active .rx-ico { fill: currentColor; stroke: #fff; stroke-width: 1; }
.rx-heart.active, .rx-rbtn.rx-heart.active { background: linear-gradient(180deg,#606060,#0f0f0f); }
.rx-rbtn.rx-star.active  { background: linear-gradient(180deg,#d8a72a,#b3851a); }
.rx-rbtn.rx-pray.active  { background: linear-gradient(180deg,#8a6db8,#5f4a8c); }
.rx-rbtn.rx-bravo.active { background: linear-gradient(180deg,#606060,#0f0f0f); }
/* 各種別の通常時のアイコン色 */
.rx-rbtn.rx-heart .rx-ico { stroke: #606060; }
.rx-rbtn.rx-star  .rx-ico { stroke: #e5e5e5; }
.rx-rbtn.rx-pray  .rx-ico { stroke: #7c5fae; }
.rx-rbtn.rx-bravo .rx-ico { stroke: #606060; }

/* メディアカードのメタ（視聴・反応） */
.mc-meta {
  display: flex; align-items: center; gap: 10px; padding: 0 9px 8px;
  font-size: 11px; color: #a2826a; font-family: "Courier New", monospace;
}
.mc-meta .rx-views { font-size: 11px; }
.mc-meta .rx-eye { width: 14px; height: 14px; }
.mc-react { display: inline-flex; align-items: center; gap: 3px; }
.mc-react .rx-ico { width: 13px; height: 13px; fill: #606060; stroke: none; }

@media (max-width: 700px) {
  .rx-rbtn { padding: 8px 14px 8px 12px; font-size: 13px; }  /* 指で押しやすく */
  .rx-react { gap: 7px; }
}

/* V19：いいね押下時のポップ（その場フィードバック） */
.rx-rbtn.rx-pop { animation: rx-pop .22s ease; }
@keyframes rx-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ===== 全ページ共通：今日のおすすめ＆公式コンテンツ（フッター上） ===== */
.explore-zone {
  max-width: 100%; margin: 32px auto 0; padding: 20px 16px 4px;
  border-top: 3px double #0f0f0f;
}
.explore-zone .bar { margin-top: 0; }
.ez-block { margin-bottom: 18px; }
.ez-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; margin: 0 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid #e5e5e5;
}
.ez-head b { font-size: 14px; color: #7c2840; }
.ez-head a { font-size: 11px; color: #0f0f0f; }
.card-grid.mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 700px) {
  .card-grid.mini { grid-template-columns: repeat(2, 1fr); }
}

/* ===== マイページ：X/Twitter風プロフィール ===== */
.xp { max-width: 640px; margin: 0 auto; }
.xp-cover {
  height: 170px; background: linear-gradient(135deg, #0f0f0f, #e5e5e5);
  background-size: cover; background-position: center;
  border-radius: 12px 12px 0 0; margin: 0 0 0;
}
.xp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 16px; margin-top: -42px;
}
.xp-avatar {
  width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff;
  background: #fff; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.xp-actions { display: flex; gap: 8px; padding-bottom: 6px; }
.xp-editbtn {
  font-size: 13px; font-weight: 700; color: #0f0f0f; background: #fff;
  border: 1px solid #e5e5e5; border-radius: 999px; padding: 7px 16px; cursor: pointer;
  text-decoration: none;
}
.xp-editbtn:hover { background: #fdf1dd; color: #0f0f0f; }
.xp-editbtn.ghost { color: #8a6a55; border-color: #e5e5e5; }
.xp-id { padding: 8px 16px 0; }
.xp-name { font-size: 20px; font-weight: 800; color: #0f0f0f; }
.xp-bio { padding: 8px 16px 0; font-size: 14px; line-height: 1.7; color: #0f0f0f; }
.xp-link { padding: 6px 16px 0; font-size: 13px; }
.xp-link a { color: #0f0f0f; }
.xp-stats { padding: 10px 16px 0; font-size: 13px; color: #8a6a55; }
.xp-stats b { color: #0f0f0f; }
.xp-edit { display: none; margin: 12px 16px 0; padding: 14px; border: 1px solid #e0cfae; border-radius: 12px; background: #fffdf8; }
.xp-edit.open { display: block; }
.xp-tabbar { display: flex; border-bottom: 1px solid #e0cfae; margin: 16px 0 0; }
.xp-tabbar span { padding: 12px 18px; font-weight: 700; font-size: 14px; color: #0f0f0f; position: relative; }
.xp-tabbar span.on::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; background: #0f0f0f; border-radius: 2px; }
.xp-timeline { display: flex; flex-direction: column; }
.xp-post {
  display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f0e4d4;
  color: #0f0f0f; transition: background .12s;
}
.xp-post:hover { background: #fdf8f0; color: #0f0f0f; }
.xp-post-thumb { flex-shrink: 0; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #f3e6d8; }
.xp-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.xp-post-body { min-width: 0; flex: 1; }
.xp-post-title { font-weight: 700; font-size: 15px; line-height: 1.4; }
.xp-post-desc { font-size: 13px; color: #8a6a55; margin-top: 3px; }
.xp-post-meta { font-size: 12px; color: #a3835a; margin-top: 6px; }
.xp-post .t-badge { position: static; display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 4px; color: #fff; vertical-align: 1px; }

/* 右下の丸い＋固定ボタン（FAB） */
.fab-post {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #0f0f0f, #0f0f0f); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 300; line-height: 1; text-decoration: none;
  box-shadow: 0 4px 14px rgba(110,15,44,.5), 0 0 0 3px #fff, 0 0 0 4px #e5e5e5;
  transition: transform .15s;
}
.fab-post:hover { transform: scale(1.06); color: #fff; }
.fab-post:active { transform: scale(.94); }
@media (max-width: 700px) {
  .xp-cover { height: 130px; border-radius: 0; }
  .fab-post { right: 16px; bottom: 76px; }
}
/* ===== X風 統合投稿画面（post.php） ===== */
.xc { max-width: 600px; margin: 0 auto; background: #fff; min-height: 60vh; }
.xc-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #efe3d0; position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); z-index: 5; }
.xc-back { font-size: 22px; color: #0f0f0f; text-decoration: none; line-height: 1; }
.xc-ttl { font-size: 18px; font-weight: 800; color: #0f0f0f; }
.xc-userrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.xc-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #f0e4d4; }
.xc-uname { font-weight: 700; color: #0f0f0f; }
.xc-uname .trip { margin-left: 4px; }
.xc-tabs { display: flex; gap: 4px; padding: 4px 10px 0; border-bottom: 1px solid #efe3d0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xc-tab { flex: 0 0 auto; padding: 12px 14px; font-size: 14px; font-weight: 700; color: #8a6a55; text-decoration: none; position: relative; white-space: nowrap; }
.xc-tab.on { color: #0f0f0f; }
.xc-tab.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 2px; background: #0f0f0f; }
.xc-form { padding: 14px 16px 28px; display: flex; flex-direction: column; gap: 12px; }
.xc-textarea { width: 100%; border: none; outline: none; resize: vertical; font-family: inherit; font-size: 18px; line-height: 1.6; min-height: 120px; color: #0f0f0f; background: transparent; }
.xc-textarea.sm { font-size: 15px; min-height: 70px; }
.xc-textarea::placeholder { color: #b9a892; }
.xc-input { width: 100%; border: none; border-bottom: 1px solid #e0cfae; outline: none; font-family: inherit; font-size: 16px; padding: 10px 2px; color: #0f0f0f; background: transparent; }
.xc-input:focus { border-bottom-color: #0f0f0f; }
.xc-imgpick { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px dashed #e5e5e5; border-radius: 12px; color: #8a6a55; font-size: 14px; cursor: pointer; background: #fffdf8; }
.xc-imgpick:hover { background: #f7f7f7; border-color: #e5e5e5; }
.xc-imgico { font-size: 18px; }
.xc-typetoggle { display: inline-flex; background: #f3e6d8; border-radius: 999px; padding: 3px; gap: 2px; align-self: flex-start; }
.xc-seg { position: relative; cursor: pointer; }
.xc-seg input { position: absolute; opacity: 0; }
.xc-seg span { display: block; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #8a6a55; transition: background .15s, color .15s; }
.xc-seg input:checked + span { background: #0f0f0f; color: #fff; }
.xc-tagwrap { display: flex; flex-wrap: wrap; gap: 7px; }
.xc-chip { cursor: pointer; }
.xc-chip input { position: absolute; opacity: 0; }
.xc-chip span { display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; border: 1px solid #e0cfae; color: #8a6a55; background: #fff; transition: .12s; }
.xc-chip input:checked + span { background: #fdf1dd; border-color: #e5e5e5; color: #0f0f0f; font-weight: 700; }
.xc-actions { display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid #f0e4d4; margin-top: 4px; }
.xc-postbtn { background: linear-gradient(135deg,#0f0f0f,#0f0f0f); color: #fff; border: none; border-radius: 999px; font-size: 16px; font-weight: 800; padding: 11px 30px; cursor: pointer; box-shadow: 0 2px 8px rgba(110,15,44,.3); transition: transform .12s, opacity .15s; }
.xc-postbtn:hover { opacity: .92; }
.xc-postbtn:active { transform: scale(.96); }

/* マイページのつぶやきタイムライン */
.xp-tweet { padding: 14px 16px; border-bottom: 1px solid #f0e4d4; }
.xp-tweet-body { font-size: 15px; line-height: 1.7; color: #0f0f0f; white-space: pre-wrap; word-break: break-word; }
.xp-tweet-img { margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid #efe3d0; max-width: 420px; }
.xp-tweet-img img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.xp-tweet-meta { font-size: 12px; color: #a3835a; margin-top: 8px; }

/* マイページのタブ（ポスト／作品） */
.xp-tabbar .xp-tabitem { padding: 12px 18px; font-weight: 700; font-size: 14px; color: #8a6a55; position: relative; text-decoration: none; }
.xp-tabbar .xp-tabitem.on { color: #0f0f0f; }
.xp-tabbar .xp-tabitem.on::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; background: #0f0f0f; border-radius: 2px; }

/* ===== トップ：注目作品スライドショー（1:1・横幅100%・左→右スライド） ===== */
.hero-slider { position: relative; width: 100%; max-width: 100%; margin: 0 auto 14px; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(110,15,44,.18); background: #2a0c16; }
.hs-viewport { width: 100%; overflow: hidden; }
.hs-track { display: flex; width: 100%; transition: transform .5s cubic-bezier(.4,.0,.2,1); }
.hs-slide { position: relative; flex: 0 0 100%; width: 100%; aspect-ratio: 1 / 1; display: block; }
.hs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); color: #fff; }
.hs-badge { display: inline-block; align-self: flex-start; background: #e5e5e5; color: #3a2410; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 999px; }
.hs-title { font-size: 18px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hs-by { font-size: 12.5px; opacity: .92; }
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(20,5,10,.5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.hs-arrow:hover { background: rgba(138,21,56,.85); }
.hs-arrow.prev { left: 10px; } .hs-arrow.next { right: 10px; }
.hs-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 7px; justify-content: center; z-index: 3; }
.hs-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.hs-dot.on { background: #fff; transform: scale(1.2); }
@media (max-width: 700px) { .hs-title { font-size: 15px; } .hs-arrow { width: 34px; height: 34px; font-size: 22px; } }

/* 投稿画面のルール注記 */
.xc-rule { font-size: 12.5px; line-height: 1.6; color: #0f0f0f; background: #fdf1dd; border: 1px solid #e5e5e5; border-radius: 10px; padding: 10px 12px; }

/* ===== 最新本編ヒーロー（top.jpg廃止・画像のアスペクト比そのまま・最大表示） ===== */
.honpen-hero {
  display: block; position: relative; width: 100%; margin: 0 0 18px;
  border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  box-shadow: 0 3px 16px rgba(110,15,44,.25); border: 1px solid #e5e5e5; background: #2a0c16;
}
.honpen-hero:hover { color: #fff; box-shadow: 0 4px 22px rgba(201,162,39,.45); }
.hh-imgwrap { position: relative; display: block; width: 100%; }
.hh-imgwrap img { width: 100%; height: auto; display: block; }  /* ★画像本来の比率で最大表示 */
.hh-new { position: absolute; left: 12px; top: 12px; background: #e5e5e5; color: #3a2410; font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.hh-snd { position: absolute; right: 12px; top: 12px; background: rgba(138,21,56,.9); color: #f2f2f2; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.hh-cap { display: flex; flex-direction: column; gap: 4px; padding: 22px 18px 16px; background: linear-gradient(to top, rgba(20,5,10,.92), rgba(20,5,10,.55) 60%, transparent); position: absolute; left: 0; right: 0; bottom: 0; }
.hh-series { font-size: 12.5px; color: #e5e5e5; letter-spacing: .04em; }
.hh-title { font-size: 22px; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hh-date { font-size: 12.5px; opacity: .9; }
@media (max-width: 700px) { .hh-title { font-size: 18px; } .hh-cap { padding: 18px 14px 12px; } }

/* スライドショー：アクティブ以外はクリック不可（誤リンク防止） */


/* ===== ファンアートmini grid：なるべく多く詰める ===== */
.explore-zone .thumb-grid.mini { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
@media (max-width: 700px) { .explore-zone .thumb-grid.mini { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; } }
.explore-zone .thumb-grid.mini .t-title { font-size: 11.5px; padding: 3px 4px 0; }
.explore-zone .thumb-grid.mini .t-author { font-size: 10px; padding: 0 4px 4px; }

/* ===== つぶやきタイムライン（X風） ===== */
.tweet-zone .tw-compose {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid #e0cfae; border-radius: 14px; background: #fffdf8; text-decoration: none; color: #8a6a55;
}
.tweet-zone .tw-compose:hover { background: #f7f7f7; border-color: #e5e5e5; }
.tw-compose .tw-avatar { width: 40px; height: 40px; }
.tw-compose-ph { flex: 1; font-size: 14px; color: #b9a892; }
.tw-compose-btn { background: linear-gradient(135deg,#0f0f0f,#0f0f0f); color: #fff; font-weight: 800; font-size: 13px; padding: 7px 18px; border-radius: 999px; }
.tw-timeline { display: flex; flex-direction: column; border: 1px solid #efe3d0; border-radius: 14px; overflow: hidden; background: #fff; }
.tw-item { display: flex; gap: 11px; padding: 13px 14px; border-bottom: 1px solid #f0e4d4; }
.tw-item:last-child { border-bottom: none; }
.tw-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f0e4d4; flex-shrink: 0; }
.tw-ava-link { flex-shrink: 0; }
.tw-main { min-width: 0; flex: 1; }
.tw-head { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 13px; }
.tw-name { font-weight: 800; color: #0f0f0f; text-decoration: none; }
.tw-name:hover { text-decoration: underline; }
.tw-head .trip { font-size: 11px; }
.tw-time { color: #a3835a; font-size: 12px; }
.tw-body { font-size: 14.5px; line-height: 1.65; color: #0f0f0f; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.tw-img { margin-top: 9px; border-radius: 14px; overflow: hidden; border: 1px solid #efe3d0; max-width: 380px; }
.tw-img img { width: 100%; max-height: 460px; object-fit: cover; display: block; cursor: zoom-in; }

/* ===== ファンアート：エリアごとに列数を固定（4列詰め込み防止） ===== */
.fan-grid { display: grid; gap: 12px; }
.fan-grid.cols-1 { grid-template-columns: 1fr; }
.fan-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.fan-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .fan-grid { gap: 9px; }
  .fan-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .fan-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .fan-grid.cols-1 { grid-template-columns: 1fr; }
}
.fan-grid .thumb-card { width: 100%; }
.fan-grid .thumb-card .frame { aspect-ratio: 1 / 1; }
.fan-grid .thumb-card .t-title { font-size: 13px; }
.fan-grid .thumb-card .t-author { font-size: 11px; }
.fan-grid.cols-1 .thumb-card { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; border: 1px solid #e5e5e5; border-radius: 12px; padding: 8px; background: #fffdf8; }
.fan-grid.cols-1 .thumb-card .frame { width: 132px; height: 132px; border-radius: 10px; }
.fan-grid.cols-1 .thumb-card .t-title { font-size: 16px; font-weight: 800; }
.fan-grid.cols-1 .thumb-card .t-author { font-size: 12.5px; }
@media (max-width: 700px) {
  .fan-grid.cols-1 .thumb-card { grid-template-columns: 96px 1fr; }
  .fan-grid.cols-1 .thumb-card .frame { width: 96px; height: 96px; }
  .fan-grid.cols-1 .thumb-card .t-title { font-size: 14px; }
}
/* =====================================================================
   vatican.css ─ Betlemme 光の聖堂テーマ（バチカンの黄と白）
   style.css の後に読み込む上書きテーマ。
   神聖な白を土台に、希望のバナナイエローを主役として、
   ごく小さな赤を差し色に。明るく、あたたかく、清らかに。
   ===================================================================== */

:root {
  --v-white: #ffffff;
  --v-paper: #ffffff;          /* 温かみのある白 */
  --v-cream: #ffffff;          /* ごく淡い黄 */
  --v-banana: #f2f2f2;         /* 希望のバナナイエロー */
  --v-yellow: #e5e5e5;         /* 主役の黄 */
  --v-gold:   #e5e5e5;         /* 濃い金の縁 */
  --v-deep:   #606060;         /* 黄の上でも読める深い金茶 */
  --v-ink:    #0f0f0f;         /* 本文の墨（読みやすい暖色系ダーク） */
  --v-soft:   #606060;
  --v-muted:  #606060;
  --v-line:   #e5e5e5;         /* 淡い金の罫線 */
  --v-red:    #0f0f0f;         /* わずかに差す赤 */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
}

/* ---------- 土台：光に満ちた白 ---------- */
html { background: var(--v-white); }
body {
  background:
    radial-gradient(ellipse 70% 46% at 50% -8%, rgba(255, 214, 30, .22), transparent 60%),   /* 天から差す黄金の光 */
    radial-gradient(ellipse 50% 60% at 0% 40%, rgba(255, 233, 140, .18), transparent 65%),
    radial-gradient(ellipse 50% 60% at 100% 44%, rgba(255, 233, 140, .18), transparent 65%),
    var(--v-paper);
  background-attachment: fixed;
  color: var(--v-ink);
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 2;
  letter-spacing: .03em;
}
a { color: var(--v-deep); }
a:hover { color: #b28a00; }
b, strong { color: #3d3423; }

/* ---------- ヘッダー：黄金の光のファサード ---------- */
.site-top {
  background:
    radial-gradient(ellipse 70% 140% at 50% -40%, rgba(255, 255, 255, .85), transparent 60%),
    linear-gradient(180deg, #f2f2f2 0%, #e5e5e5 100%);
  border-bottom: 2px solid var(--v-gold);
  box-shadow: 0 1px 0 #fff inset, 0 6px 20px rgba(0,0,0, .25);
}
.site-top::before { opacity: .35; }
.site-top .logo, .site-top .logo a {
  color: #fff;
  text-shadow: 0 1px 0 var(--v-gold), 0 2px 8px rgba(160, 120, 0, .45);
}
.site-top .sub { color: #7a5c00; }
.site-top .sub::before, .site-top .sub::after { color: #fff; }
.site-top .counter { color: #7a5c00; background: rgba(255, 255, 255, .6); border: 1px solid #fff; }
.site-top .counter b { color: var(--v-red); }

.ticker {
  background: var(--v-cream);
  border-top: 1px solid var(--v-line);
  border-bottom: 1px solid var(--v-line);
  color: var(--v-soft);
}

/* ---------- ナビ ---------- */
.retro-nav {
  background: var(--v-white);
  border-bottom: 2px solid var(--v-yellow);
}
.retro-nav a { color: var(--v-ink); border-color: transparent; }
.retro-nav a:hover, .retro-nav a.active {
  background: var(--v-cream);
  color: var(--v-deep);
  border-color: var(--v-yellow);
}
.retro-nav a.nav-official {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  color: #606060; border: 1px solid var(--v-gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.retro-nav a.nav-post, .retro-nav a.nav-post:hover {
  background: var(--v-red); color: #fff; border: 1px solid #a53125;
}
.retro-nav a.nav-mypage { background: var(--v-cream); color: var(--v-deep); border: 1px solid var(--v-line); }
.login-line {
  background: var(--v-paper); color: var(--v-soft);
  border-bottom: 1px solid var(--v-line);
}

/* ---------- 見出し：黄金の光の帯 ---------- */
.bar, .official-bar {
  position: relative;
  background: linear-gradient(180deg, #f2f2f2 0%, #e5e5e5 55%, #e5e5e5 100%);
  border: 1px solid var(--v-gold);
  border-top: 1px solid #fff6cf;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -8px 16px rgba(0,0,0, .25),
    0 2px 8px rgba(0,0,0, .25);
  color: #606060;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.bar::after, .official-bar::after { content: none; }
.bar .more, .official-bar .more { color: #7a5c00; }
.bar .more:hover, .official-bar .more:hover { color: #4a3800; }

/* ---------- パネル・カード ---------- */
.panel, .empty-note, .note {
  background: var(--v-white);
  border-color: var(--v-line);
  color: var(--v-ink);
  box-shadow: 0 2px 10px rgba(220, 190, 80, .14), inset 0 1px 0 #fff;
}
.muted, .note { color: var(--v-muted); }
.error-box { background: #fdf0ee; border-color: #e5b6b0; color: #a53125; }
.ok-box { background: #ffffff; border-color: #e5e5e5; color: #606060; }

.thumb-card, .of-card, .honpen-card, .media-card, .blog-card {
  background: var(--v-white);
  border-color: var(--v-line);
  box-shadow: 0 2px 8px rgba(220, 190, 80, .16);
}
.thumb-card:hover, .of-card:hover, .honpen-card:hover, .media-card:hover {
  border-color: var(--v-yellow);
  box-shadow: 0 4px 16px rgba(0,0,0, .3);
}
.thumb-card .frame, .of-card .frame, .honpen-card .frame {
  background: radial-gradient(circle at 50% 30%, #fffef8, var(--v-cream) 80%);
  border-color: var(--v-line);
}
.t-title, .of-card .t, .honpen-card .t { color: var(--v-ink); }
.t-author, .of-card .m, .honpen-card .m { color: var(--v-muted); }
.t-new { background: var(--v-red) !important; color: #fff !important; }

/* ---------- サイド ---------- */
.side-title {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  border: 1px solid var(--v-gold);
  color: #606060;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.side-menu a { color: var(--v-ink); border-bottom: 1px dashed var(--v-line); }
.side-menu a:hover { color: var(--v-deep); background: var(--v-cream); }
.side-mini { color: var(--v-soft); background: var(--v-white); border-color: var(--v-line); }
.ad-slot, .fb-slot { background: var(--v-white); color: var(--v-muted); border-color: #e8d98e; }
.ad-note { color: var(--v-muted); }

/* ---------- ボタン ---------- */
.btn {
  background: var(--v-white);
  border: 1px solid var(--v-gold);
  color: var(--v-deep);
  box-shadow: 0 1px 0 rgba(0,0,0, .35), inset 0 1px 0 #fff;
}
.btn:hover { background: var(--v-cream); color: #606060; box-shadow: 0 0 10px rgba(0,0,0, .5); }
.btn.primary {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  color: #606060; border-color: var(--v-gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.btn.primary:hover { background: linear-gradient(180deg, #f2f2f2, #e5e5e5); }
.btn.gray { background: #f2f2f2; color: var(--v-muted); border-color: #e5e5e5; }
.btn.danger { background: #fdf0ee; border-color: #d98d82; color: var(--v-red); }
.btn.official { border-color: var(--v-gold); color: var(--v-deep); background: var(--v-cream); }

/* ---------- タグ ---------- */
.ptag, .tag-mini { background: var(--v-cream); border-color: var(--v-line); color: var(--v-deep); }
.ptag:hover { background: var(--v-banana); color: #606060; border-color: var(--v-gold); }

/* ---------- 記事本文（読みやすさ最優先） ---------- */
.of-body, .pd-desc, .res-body {
  color: var(--v-ink);
  font-size: 16px;
  line-height: 2.15;
}
.of-body p { margin: 0 0 1.6em; }
.of-body h2 {
  font-family: var(--serif);
  color: #606060;
  font-size: 21px; letter-spacing: .12em;
  padding: 10px 14px;
  margin: 2.2em 0 1em;
  background: linear-gradient(180deg, #f7f7f7, var(--v-banana));
  border: 1px solid var(--v-gold);
  border-left: 5px solid var(--v-gold);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(0,0,0, .2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.of-body h3 {
  color: var(--v-deep);
  font-size: 17.5px; letter-spacing: .1em;
  margin: 2em 0 .8em;
  padding: 0 0 6px 2px;
  border-bottom: 2px solid var(--v-yellow);
}
.of-body blockquote {
  margin: 1.4em 0; padding: 12px 18px;
  background: var(--v-cream);
  border-left: 4px solid var(--v-yellow);
  color: var(--v-soft);
  border-radius: 0 3px 3px 0;
}
.of-body ul, .of-body ol { margin: 1.2em 0; padding-left: 1.8em; }
.of-body li { margin: .4em 0; }
.of-body hr {
  border: none; height: 2px; margin: 2.4em auto; width: 70%;
  background: linear-gradient(90deg, transparent, var(--v-yellow), transparent);
}
.of-body img { border: 1px solid var(--v-line); border-radius: 3px; }
.of-body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 音楽・レス ---------- */
.music-item { background: var(--v-white); border-color: var(--v-line); }
.music-title { color: var(--v-ink); }
.res-item { border-color: var(--v-line); }
.res-head { color: var(--v-muted); }
.cathedral-player {
  background: var(--v-cream); border-top-color: var(--v-gold);
  color: var(--v-ink);
}
.cathedral-player::before, .cathedral-player::after {
  background: linear-gradient(180deg, var(--v-gold), transparent);
}
.cathedral-player .cp-toggle { border-color: var(--v-gold); }
.cathedral-player .eq { color: #a8842e; }
.cathedral-player .cp-ornament { color: var(--v-gold); text-shadow: 0 0 8px rgba(201,162,39,.4); }

/* ---------- フォーム ---------- */
input[type=text], input[type=password], input[type=number], input[type=email],
textarea, select {
  background: #fff !important;
  color: var(--v-ink) !important;
  border: 1px solid #e0d29a !important;
  border-radius: 3px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--v-gold) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0, .3);
}
::placeholder { color: #b8ab8a !important; }

/* ---------- テーブル ---------- */
table th { background: var(--v-cream) !important; color: #606060 !important; border-color: var(--v-line) !important; }
table td { background: #fff !important; color: var(--v-ink) !important; border-color: var(--v-line) !important; }
.admin-list th { background: linear-gradient(180deg, var(--v-banana), var(--v-yellow)) !important; color: #606060 !important; }

/* ---------- フッター ---------- */
.site-footer {
  background: var(--v-cream);
  border-top: 2px solid var(--v-yellow);
  color: var(--v-soft);
}
.site-footer a { color: var(--v-deep); }
.home-banner {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  border: 1px solid var(--v-gold);
  color: #606060 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

/* ---------- ドロワー（光の回廊） ---------- */
.hb-btn {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow)) !important;
  border-color: var(--v-gold) !important;
}
.hb-btn .hb-lines i { background: #606060 !important; }
.hb-panel {
  background:
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(255, 214, 30, .25), transparent 60%),
    linear-gradient(170deg, #fffef8 0%, var(--v-paper) 60%, var(--v-cream) 100%) !important;
  border-color: var(--v-gold) !important;
}
.hb-crest { border-bottom-color: var(--v-line) !important; }
.hb-cross { color: var(--v-gold) !important; }
.hb-title { color: var(--v-deep) !important; }
.hb-sub, .hb-sec { color: var(--v-muted) !important; }
.hb-link, .hb-lt { color: var(--v-ink) !important; }
.hb-link:hover { background: var(--v-cream) !important; }
.hb-lt small { color: var(--v-muted) !important; }
.hb-li { background: var(--v-cream) !important; border-color: var(--v-line) !important; color: var(--v-deep) !important; }
.hb-x { color: var(--v-deep) !important; }
.hb-foot { color: var(--v-muted) !important; }
.hb-foot-mark { color: var(--v-gold) !important; }
.hb-acct, .hb-login { background: var(--v-white) !important; border-color: var(--v-line) !important; color: var(--v-ink) !important; }

/* ---------- 読みやすさの微調整 ---------- */
.wrap { font-size: 15.5px; }

/* =====================================================================
   pub.css ─ 一般社団法人IHSベツレヘム修道会 公式サイト（非営利有志）
   白背景・黒文字。講談社の博と重さ／集英社の本気感／小学館の親しみ。
   差し色はボルドー #7a1024 を最小限に。ムラのない一貫設計。
   ===================================================================== */

:root {
  --ink: #1b1b1b;
  --sub: #555;
  --faint: #8a8a8a;
  --line: #e3e3e3;
  --line2: #cfcfcf;
  --paper: #ffffff;
  --shade: #f6f6f6;
  --accent: #7a1024;          /* ボルドー（最小限） */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body.pub {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }

/* ---------- 幅 ---------- */
.pu-util-in, .pu-head-in, .pu-nav-in, .pu-main, .pu-foot-in, .pu-foot-btm {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.pu-main { padding-top: 26px; padding-bottom: 70px; min-height: 60vh; }

/* ---------- ユーティリティバー ---------- */
.pu-util { background: var(--shade); border-bottom: 1px solid var(--line); font-size: 12px; }
.pu-util-in { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.pu-util-l { color: var(--sub); letter-spacing: .06em; }
.pu-util-r a { color: var(--sub); margin-left: 18px; }
.pu-util-r a:hover { color: var(--accent); }
@media (max-width: 640px) { .pu-util-l { display: none; } .pu-util-in { justify-content: flex-end; } }

/* ---------- ロゴブロック ---------- */
.pu-head { background: var(--paper); }
.pu-head-in { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 26px; padding-bottom: 18px; }
.pu-logo { display: inline-flex; flex-direction: column; line-height: 1; }
.pu-logo-jp {
  font-family: var(--serif); font-weight: bold;
  font-size: 44px; letter-spacing: .34em; color: var(--ink);
}
.pu-logo-en { margin-top: 8px; font-size: 10.5px; letter-spacing: .5em; color: var(--faint); }
.pu-head-copy {
  font-family: var(--serif); font-size: 15px; color: var(--sub); letter-spacing: .18em;
  border-left: 2px solid var(--accent); padding-left: 14px;
}
@media (max-width: 760px) {
  .pu-logo-jp { font-size: 32px; }
  .pu-head-copy { display: none; }
  .pu-head-in { padding-top: 18px; padding-bottom: 12px; }
}

/* ---------- グローバルナビ（黒帯） ---------- */
.pu-nav { background: var(--ink); }
.pu-nav-in { display: flex; flex-wrap: wrap; }
.pu-nav a {
  display: block; color: #fff; font-size: 14px; font-weight: 600;
  padding: 13px 20px; letter-spacing: .1em;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.pu-nav a:first-child { border-left: 1px solid rgba(255, 255, 255, .12); }
.pu-nav a:hover { background: #333; color: #fff; }
.pu-nav a.on { background: var(--accent); }
.pu-nav a.pu-nav-comm { margin-left: auto; background: #333; }
.pu-nav a.pu-nav-comm:hover { background: #4a4a4a; }
@media (max-width: 900px) { .pu-nav { display: none; } }

/* ---------- ティッカー ---------- */
.pu-ticker {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden; white-space: nowrap;
  font-size: 12.5px; color: var(--sub); height: 34px; line-height: 34px;
}
.pu-ticker span { display: inline-block; padding-left: 100%; animation: pu-tick 42s linear infinite; }
@keyframes pu-tick { to { transform: translateX(-100%); } }

/* ---------- お知らせ帯 ---------- */
.pu-notice {
  background: var(--shade); border: 1px solid var(--line);
  padding: 12px 16px; margin-bottom: 22px; font-size: 13.5px;
}

/* ---------- セクション見出し ---------- */
.pu-sec {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  margin: 44px 0 20px; padding-bottom: 10px;
}
.pu-sec:first-child { margin-top: 6px; }
.pu-sec h2 {
  margin: 0; font-family: var(--serif);
  font-size: 22px; letter-spacing: .14em; font-weight: bold;
  min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
@media (max-width: 760px) {
  .pu-sec { flex-wrap: wrap; row-gap: 4px; }
  .pu-sec h2 { font-size: 17px; letter-spacing: .06em; }
  .pu-sec h2 small { display: block; margin: 3px 0 0; letter-spacing: .22em; }
}
.pu-sec h2 small {
  font-family: var(--sans); font-size: 10.5px; color: var(--faint);
  letter-spacing: .32em; margin-left: 14px; font-weight: normal;
}
.pu-sec .more { font-size: 12.5px; color: var(--sub); }
.pu-sec .more:hover { color: var(--accent); }

/* ---------- ヒーロー ---------- */
.pu-hero {
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  padding: 46px 30px;
  text-align: center;
  background:
    linear-gradient(180deg, #fff, #fafafa);
  margin-bottom: 8px;
}
.pu-hero h1 {
  margin: 0; font-family: var(--serif);
  font-size: 30px; letter-spacing: .22em; font-weight: bold;
}
.pu-hero p { margin: 14px auto 0; max-width: 640px; color: var(--sub); font-size: 14px; }
.pu-hero .pu-hero-btns { margin-top: 22px; }
@media (max-width: 640px) { .pu-hero { padding: 30px 16px; } .pu-hero h1 { font-size: 22px; } }

/* ---------- ボタン ---------- */
.pu-btn {
  display: inline-block; padding: 10px 26px; margin: 0 5px 8px;
  background: var(--ink); color: #fff !important; font-size: 13.5px; font-weight: 600;
  letter-spacing: .12em; border: 1px solid var(--ink);
}
.pu-btn:hover { background: var(--accent); border-color: var(--accent); }
.pu-btn.ghost { background: #fff; color: var(--ink) !important; }
.pu-btn.ghost:hover { color: var(--accent) !important; border-color: var(--accent); }
.pu-btn.small { padding: 6px 16px; font-size: 12px; }
.pu-btn.danger { background: #fff; color: #b03030 !important; border-color: #d9a0a0; }

/* ---------- ニュース一覧 ---------- */
.pu-news { border-top: 1px solid var(--line); }
.pu-news-row {
  display: flex; gap: 18px; align-items: baseline;
  padding: 13px 6px; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.pu-news-row:hover { background: var(--shade); }
.pu-news-row .d { flex-shrink: 0; font-size: 12.5px; color: var(--faint); font-family: "Courier New", monospace; letter-spacing: 0; }
.pu-news-row .c {
  flex-shrink: 0; font-size: 10.5px; letter-spacing: .1em;
  border: 1px solid var(--line2); color: var(--sub);
  padding: 1px 10px; min-width: 86px; text-align: center;
}
.pu-news-row .c.rel { border-color: var(--accent); color: var(--accent); }
.pu-news-row .t { font-size: 14px; }
@media (max-width: 640px) {
  .pu-news-row { flex-wrap: wrap; gap: 8px; }
  .pu-news-row .t { width: 100%; }
}

/* ---------- 記事本文 ---------- */
.pu-article {
  max-width: 760px; margin: 0 auto;
  font-size: 15.5px; line-height: 2.15;
}
.pu-article-head { max-width: 760px; margin: 0 auto 26px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.pu-article-head h1 { font-family: var(--serif); font-size: 26px; letter-spacing: .08em; margin: 8px 0 0; line-height: 1.6; }
.pu-article-head .meta { font-size: 12.5px; color: var(--faint); }
.pu-article p { margin: 0 0 1.7em; }
.pu-article h2 {
  font-family: var(--serif); font-size: 21px; letter-spacing: .1em;
  margin: 2.4em 0 1em; padding: 8px 0 8px 16px;
  border-left: 4px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.pu-article h3 {
  font-family: var(--serif); font-size: 17.5px; letter-spacing: .08em;
  margin: 2em 0 .8em; padding-bottom: 6px;
  border-bottom: 2px solid var(--line2);
}
.pu-article blockquote {
  margin: 1.6em 0; padding: 14px 20px;
  background: var(--shade); border-left: 3px solid var(--line2); color: var(--sub);
}
.pu-article ul, .pu-article ol { margin: 1.2em 0; padding-left: 1.8em; }
.pu-article hr { border: none; border-top: 1px solid var(--line2); margin: 2.6em 0; }
.pu-article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 雑誌 ---------- */
.pu-period {
  display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line2); margin: 0 0 22px;
}
.pu-period a {
  flex: 1; min-width: 90px; text-align: center; padding: 11px 4px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  border-right: 1px solid var(--line2); color: var(--sub);
}
.pu-period a:last-child { border-right: none; }
.pu-period a:hover { background: var(--shade); color: var(--ink); }
.pu-period a.on { background: var(--ink); color: #fff; }

.pu-mag-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 1000px) { .pu-mag-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pu-mag-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.pu-mag {
  display: block; border: 1px solid var(--line); background: #fff;
  transition: box-shadow .15s;
}
.pu-mag:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, .12); color: var(--ink); }
.pu-mag .cov {
  aspect-ratio: 3 / 4; background: var(--shade);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden; position: relative;
}
.pu-mag .cov img { width: 100%; height: 100%; object-fit: cover; }
.pu-mag .cov .nocov {
  font-family: var(--serif); color: var(--faint); font-size: 15px; letter-spacing: .2em;
  writing-mode: vertical-rl; padding: 10px;
}
.pu-mag .cov .free {
  position: absolute; top: 8px; left: 8px;
  background: var(--accent); color: #fff; font-size: 10px; letter-spacing: .1em;
  padding: 2px 9px;
}
.pu-mag .b { padding: 11px 12px 13px; }
.pu-mag .mt { font-size: 13.5px; font-weight: 700; line-height: 1.55; }
.pu-mag .mm { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.pu-mag .mc { display: inline-block; margin-top: 7px; font-size: 10.5px; color: var(--sub); border: 1px solid var(--line2); padding: 1px 9px; }

/* 号の目次 */
.pu-toc { border: 1px solid var(--line); }
.pu-toc-row { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: baseline; }
.pu-toc-row:last-child { border-bottom: none; }
.pu-toc-row .no { flex-shrink: 0; font-family: var(--serif); color: var(--faint); font-size: 13px; min-width: 2em; }
.pu-toc-row a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 連載・話数リスト ---------- */
.pu-series-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .pu-series-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pu-series-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.pu-ep-list { border-top: 2px solid var(--ink); }
/* ── v3.7 話数リスト v2：サムネ付きの分かりやすいカード行 ── */
.pu-ep-list.v2{ border-top:0; display:flex; flex-direction:column; gap:10px; }
.pu-ep-row.v2{
  display:flex; gap:14px; align-items:center; padding:10px;
  border:1px solid var(--dz-line,#e3e3e3); border-radius:12px;
  background:var(--dz-surface,#fff); text-decoration:none;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.pu-ep-row.v2:hover{ transform:translateY(-2px); border-color:var(--dz-accent,#ffffff);
  box-shadow:0 8px 20px rgba(10,12,30,.10); background:var(--dz-surface,#fff); }
.pu-ep-row.v2 .th{ flex:0 0 72px; width:72px; height:96px; border-radius:8px; overflow:hidden;
  border:1px solid var(--dz-line,#e3e3e3); background:var(--dz-hover,#f4f4f4); }
.pu-ep-row.v2 .th img{ width:100%; height:100%; object-fit:cover; display:block; }
.pu-ep-row.v2 .th-ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-family:var(--serif); font-weight:bold; color:var(--dz-muted,#8a8a8a); font-size:13px; }
.pu-ep-row.v2 .bd{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pu-ep-row.v2 .no{ font-family:var(--serif); font-weight:bold; font-size:13px; color:var(--dz-accent,#ffffff); }
.pu-ep-row.v2 .no .new{ margin-left:8px; background:var(--dz-accent,#ffffff); color:#fff;
  font-family:var(--sans); font-size:10px; padding:1px 8px; border-radius:99px; letter-spacing:.1em; vertical-align:1px; }
.pu-ep-row.v2 .t{ font-size:15px; font-weight:700; color:var(--dz-text,#222);
  overflow:hidden; text-overflow:ellipsis; }
.pu-ep-row.v2 .d{ font-size:11.5px; color:var(--dz-muted,#8a8a8a); }
.pu-ep-row.v2 .go{ flex:0 0 auto; font-size:12.5px; font-weight:800; color:#fff;
  background:var(--dz-accent,#ffffff); border-radius:99px; padding:8px 16px; white-space:nowrap; }
@media (max-width:560px){
  .pu-ep-row.v2{ gap:10px; }
  .pu-ep-row.v2 .th{ flex-basis:56px; width:56px; height:76px; }
  .pu-ep-row.v2 .go{ padding:7px 12px; font-size:11.5px; }
}
.pu-ep-row {
  display: flex; gap: 16px; align-items: center;
  padding: 13px 8px; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.pu-ep-row:hover { background: var(--shade); }
.pu-ep-row .no {
  flex-shrink: 0; font-family: var(--serif); font-weight: bold;
  font-size: 15px; min-width: 74px;
}
.pu-ep-row .t { flex: 1; font-size: 14.5px; }
.pu-ep-row .d { flex-shrink: 0; font-size: 12px; color: var(--faint); font-family: "Courier New", monospace; }
.pu-ep-row .new {
  flex-shrink: 0; background: var(--accent); color: #fff;
  font-size: 10px; padding: 1px 8px; letter-spacing: .1em;
}
.pu-series-head { display: flex; gap: 26px; margin-bottom: 26px; flex-wrap: wrap; }
.pu-series-head .cov { width: 220px; flex-shrink: 0; border: 1px solid var(--line); }
.pu-series-head .cov img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pu-series-head .inf { flex: 1; min-width: 260px; }
.pu-series-head h1 { font-family: var(--serif); font-size: 26px; letter-spacing: .1em; margin: 0 0 4px; }
.pu-series-head .au { color: var(--sub); font-size: 14px; }
.pu-series-head .st { display: inline-block; margin: 10px 0; font-size: 11px; border: 1px solid var(--ink); padding: 2px 12px; letter-spacing: .14em; }
.pu-series-head .ds { font-size: 14px; color: var(--sub); }

/* ---------- リーダー ---------- */
.pu-reader { max-width: 860px; margin: 0 auto; }
.pu-reader img { display: block; width: 100%; margin: 0 auto; }
.pu-reader-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 22px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pu-reader-title { text-align: center; margin: 4px 0 20px; }
.pu-reader-title .s { font-size: 13px; color: var(--sub); display: block; }
.pu-reader-title h1 { font-family: var(--serif); font-size: 22px; letter-spacing: .08em; margin: 4px 0 0; }

/* ---------- ストア ---------- */
.pu-store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .pu-store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pu-store-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.pu-item { display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; }
.pu-item:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, .12); }
.pu-item .cov { aspect-ratio: 3/4; background: var(--shade); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.pu-item .cov img { width: 100%; height: 100%; object-fit: contain; }
.pu-item .cov .cat { position: absolute; left: 0; top: 8px; background: var(--ink); color: #fff; font-size: 10px; padding: 2px 10px; letter-spacing: .08em; }
.pu-item .cov .st-out { position: absolute; right: 8px; bottom: 8px; background: #888; color: #fff; font-size: 10px; padding: 1px 8px; }
.pu-item .b { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.pu-item .it { font-size: 13.5px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.pu-item .ia { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.pu-item .ip { margin-top: 8px; font-family: var(--serif); font-weight: bold; font-size: 16px; }
.pu-item .ip small { font-size: 10px; color: var(--faint); font-weight: normal; }
.pu-item .act { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); text-align: center; }

.pu-item-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; }
@media (max-width: 860px) { .pu-item-detail { grid-template-columns: 1fr; } }
.pu-item-main { border: 1px solid var(--line); background: var(--shade); padding: 20px; display: flex; justify-content: center; }
.pu-item-main img { max-height: 560px; object-fit: contain; }
.pu-item-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pu-item-thumbs img { width: 60px; height: 60px; object-fit: cover; border: 2px solid var(--line); cursor: pointer; }
.pu-item-thumbs img.on, .pu-item-thumbs img:hover { border-color: var(--ink); }
.pu-buy { border: 1px solid var(--line2); border-top: 3px solid var(--ink); padding: 22px; position: sticky; top: 14px; background: #fff; }
@media (max-width: 860px) { .pu-buy { position: static; } }
.pu-buy h1 { font-family: var(--serif); font-size: 21px; margin: 0 0 2px; line-height: 1.6; letter-spacing: .04em; }
.pu-buy .au { color: var(--sub); font-size: 13px; }
.pu-buy .pr { font-family: var(--serif); font-weight: bold; font-size: 28px; margin: 12px 0 2px; }
.pu-buy .pr small { font-size: 11px; color: var(--faint); font-weight: normal; }
.pu-buy table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.pu-buy th { width: 30%; text-align: left; font-weight: normal; color: var(--sub); background: var(--shade); border: 1px solid var(--line); padding: 6px 10px; }
.pu-buy td { border: 1px solid var(--line); padding: 6px 10px; }
.pu-pay { margin-top: 12px; border: 1px solid var(--line2); padding: 14px 12px 10px; text-align: center; }
.pu-pay .lb { font-size: 11.5px; letter-spacing: .12em; color: var(--sub); margin: 0 0 10px; font-weight: 600; }
.pu-pay .nt { font-size: 10.5px; color: var(--faint); margin: 8px 0 0; }
.pp-wrap, .cart-add { display: block; max-width: 420px; margin: 0 auto; }
.pu-soldout { margin-top: 12px; padding: 14px; text-align: center; background: var(--shade); border: 1px solid var(--line2); color: var(--faint); letter-spacing: .12em; font-weight: 600; }

/* ---------- カートFAB ---------- */
.cart-fab {
  position: fixed; top: 8px; right: 12px; z-index: 400;
  background: #fff; border: 1px solid var(--ink);
  padding: 4px 8px; min-width: 52px; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* ---------- 会社案内・問い合わせ ---------- */
.pu-company th { width: 26%; text-align: left; font-weight: 600; background: var(--shade); border: 1px solid var(--line); padding: 10px 14px; vertical-align: top; }
.pu-company td { border: 1px solid var(--line); padding: 10px 14px; line-height: 1.9; }
.pu-company { width: 100%; border-collapse: collapse; font-size: 14px; }
@media (max-width: 560px) { .pu-company, .pu-company tr, .pu-company th, .pu-company td { display: block; width: 100%; } }

.pu-form th { width: 200px; text-align: left; font-weight: 600; background: var(--shade); border: 1px solid var(--line); padding: 9px 12px; vertical-align: top; }
.pu-form td { border: 1px solid var(--line); padding: 9px 12px; }
.pu-form { width: 100%; border-collapse: collapse; font-size: 14px; }
.pu-form input[type=text], .pu-form input[type=number], .pu-form input[type=password], .pu-form input[type=date],
.pu-form select, .pu-form textarea, .pu-inline-input {
  width: 100%; max-width: 100%;
  border: 1px solid var(--line2); background: #fff; color: var(--ink);
  padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.pu-form input:focus, .pu-form textarea:focus, .pu-form select:focus { outline: 2px solid var(--ink); }
.pu-form th em { display: block; font-size: 10px; color: var(--accent); font-style: normal; }
@media (max-width: 640px) { .pu-form, .pu-form tbody, .pu-form tr, .pu-form th, .pu-form td { display: block; width: 100%; } }

.pu-ok { background: #f2f8f2; border: 1px solid #bcd8bc; color: #2f5d2f; padding: 12px 16px; margin: 0 0 18px; font-size: 13.5px; }
.pu-err { background: #fbf1f1; border: 1px solid #ddb3b3; color: #8a2525; padding: 12px 16px; margin: 0 0 18px; font-size: 13.5px; }
.pu-muted { color: var(--faint); font-size: 12.5px; }
.pu-empty { border: 1px dashed var(--line2); background: var(--shade); text-align: center; padding: 40px 16px; color: var(--faint); font-size: 14px; }
.pu-center { text-align: center; }

/* ---------- 管理室 ---------- */
.pu-admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.pu-admin-nav a { border: 1px solid var(--line2); padding: 6px 14px; font-size: 12.5px; }
.pu-admin-nav a:hover { background: var(--ink); color: #fff; }
.pu-table-scroll { overflow-x: auto; border: 1px solid var(--line); }
.pu-list { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; }
.pu-list th { background: var(--ink); color: #fff; padding: 8px 10px; border: 1px solid #000; white-space: nowrap; font-weight: 600; }
.pu-list td { border: 1px solid var(--line); padding: 7px 10px; background: #fff; vertical-align: middle; }
.pu-list td.tt { min-width: 220px; }
.pu-list td.ops { white-space: nowrap; }
.pu-list td.ops form { display: inline-block; margin: 0 2px 0 0; }
.pu-admin-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pu-admin-imgs label { font-size: 11px; color: var(--sub); text-align: center; }
.pu-admin-imgs img { width: 68px; height: 68px; object-fit: cover; display: block; border: 1px solid var(--line); }

/* ---------- モバイルメニュー ---------- */
.pu-hb { display: none; }
.pu-drawer { display: none; }
@media (max-width: 900px) {
  .pu-hb {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    position: fixed; top: 8px; left: 12px; z-index: 400;
    width: 44px; height: 44px; background: var(--ink); border: none; cursor: pointer;
  }
  .pu-hb i { display: block; width: 20px; height: 2px; background: #fff; transition: transform .3s, opacity .2s; }
  .pu-open .pu-hb i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pu-open .pu-hb i:nth-child(2) { opacity: 0; }
  .pu-open .pu-hb i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .pu-drawer { display: block; position: fixed; inset: 0; z-index: 390; pointer-events: none; }
  .pu-dw-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s; }
  .pu-dw-panel {
    position: absolute; top: 0; left: 0; height: 100%; width: min(84%, 340px);
    background: #fff; border-right: 1px solid var(--ink);
    transform: translateX(-105%); transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    overflow-y: auto; padding-bottom: 40px;
  }
  .pu-open .pu-drawer { pointer-events: auto; }
  .pu-open .pu-dw-scrim { opacity: 1; }
  .pu-open .pu-dw-panel { transform: translateX(0); }
  .pu-dw-head {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--ink); color: #fff; padding: 16px 18px;
  }
  .pu-dw-title { font-family: var(--serif); font-size: 20px; letter-spacing: .3em; }
  .pu-dw-x { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
  .pu-dw-sec { font-size: 11px; letter-spacing: .2em; color: var(--faint); padding: 20px 18px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .pu-dw-panel > a { display: block; padding: 13px 22px; font-size: 14.5px; border-bottom: 1px solid var(--line); color: var(--ink); }
  .pu-dw-panel > a:active { background: var(--shade); }
  .pu-main { padding-top: 18px; }
}

/* ---------- フッター ---------- */
.pu-foot { background: var(--ink); color: #ccc; margin-top: 40px; }
.pu-foot-in {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 26px; padding-top: 42px; padding-bottom: 34px;
}
@media (max-width: 900px) { .pu-foot-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pu-foot-in { grid-template-columns: 1fr; } }
.pu-foot-logo { font-family: var(--serif); font-size: 26px; letter-spacing: .3em; color: #fff; }
.pu-foot-logo span { display: block; font-size: 9px; letter-spacing: .5em; color: #888; margin-top: 6px; }
.pu-foot-desc { font-size: 12.5px; line-height: 2; color: #aaa; margin: 14px 0 0; }
.pu-foot-t { font-size: 12px; letter-spacing: .2em; color: #888; margin-bottom: 12px; border-bottom: 1px solid #3a3a3a; padding-bottom: 8px; }
.pu-foot-col a { display: block; color: #ddd; font-size: 13px; padding: 4px 0; }
.pu-foot-col a:hover { color: #fff; }
.pu-foot-btm { border-top: 1px solid #3a3a3a; text-align: center; font-size: 11.5px; color: #888; padding-top: 18px; padding-bottom: 18px; }


/* =====================================================================
   v2 追補：固定追尾ヘッダー／雑誌マーキーヒーロー
   ===================================================================== */

/* ---------- 固定追尾ヘッダー ---------- */
.pu-fix {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: #fff; border-bottom: 2px solid var(--ink);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
}
.pu-fix-in {
  max-width: 1280px; margin: 0 auto; padding: 0 14px;
  display: flex; align-items: center; gap: 14px; height: 58px;
}
.pu-fix-logo { display: inline-flex; align-items: baseline; gap: 10px; line-height: 1; flex-shrink: 0; }
.pu-fix-logo .jp {
  font-family: var(--serif); font-weight: bold;
  font-size: 25px; letter-spacing: .26em; color: var(--ink);
}
.pu-fix-logo .en { font-size: 8.5px; letter-spacing: .34em; color: var(--faint); }
.pu-fix-nav { display: flex; align-items: center; margin-left: 6px; min-width: 0; overflow: hidden; }
.pu-fix-nav a {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  padding: 8px 11px; color: var(--ink); white-space: nowrap;
}
.pu-fix-nav a:hover { color: var(--accent); }
.pu-fix-nav a.on { border-bottom: 2px solid var(--ink); }
.pu-fix-nav a.comm { background: var(--ink); color: #fff; margin-left: 4px; }
.pu-fix-nav a.comm:hover { background: var(--accent); }

/* カート：ヘッダー内スロット（固定FABをやめて重なり解消） */
.pu-fix .cart-fab {
  position: static; margin-left: auto; flex-shrink: 0;
  background: #fff; border: 1px solid var(--ink);
  box-shadow: none; padding: 3px 6px; min-width: 50px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
}

/* 固定ヘッダーぶんの余白 */
body.pub { padding-top: 58px; }

/* モバイル：ハンバーガーはヘッダー内（固定位置をやめて重なり解消） */
.pu-hb { display: none; }
@media (max-width: 980px) {
  .pu-fix-nav { display: none; }
  .pu-hb {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    position: static; width: 42px; height: 42px; flex-shrink: 0;
    background: var(--ink); border: none; cursor: pointer;
  }
  .pu-fix-logo .jp { font-size: 21px; letter-spacing: .2em; }
  .pu-fix-logo .en { display: none; }
}
@media (max-width: 980px) {
  .pu-hb i { display: block; width: 20px; height: 2px; background: #fff; transition: transform .3s, opacity .2s; }
  .pu-open .pu-hb i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pu-open .pu-hb i:nth-child(2) { opacity: 0; }
  .pu-open .pu-hb i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .pu-drawer { display: block; position: fixed; inset: 0; z-index: 490; pointer-events: none; }
  .pu-dw-panel { padding-top: 0; }
}
/* PCでもドロワーは非表示のまま（既存定義踏襲） */
@media (min-width: 981px) { .pu-drawer { display: none !important; } }

/* ---------- 雑誌マーキーヒーロー／フルワイド／3カラム ----------
   ※統合版では、これらの定義は下部の PRESS BRIDGE セクションに一本化しました。
     （旧 pub.css の width:100vw 全ブリード・sticky top:74px・二重ブレークポイントが
       モバイルで横スクロールを誘発していたため撤去）              */

/* サイドボックス */
.pu-side-box {
  border: 1px solid var(--line); background: var(--paper);
  padding: 16px 16px 18px; margin: 0 0 18px;
}
.pu-side-box h3 {
  margin: 0 0 10px; font-family: var(--serif); font-size: 14.5px;
  letter-spacing: .12em; border-bottom: 2px solid var(--ink); padding-bottom: 7px;
}
.pu-side-g {
  margin: 12px 0 4px; font-size: 11px; letter-spacing: .18em; color: var(--faint);
}
.pu-side-g:first-of-type { margin-top: 2px; }
.pu-side-list { list-style: none; margin: 0; padding: 0; }
.pu-side-list li { border-bottom: 1px dotted var(--line); }
.pu-side-list li:last-child { border-bottom: 0; }
.pu-side-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 2px; font-size: 13px; line-height: 1.6;
}
.pu-side-list a:hover { background: var(--shade); }
.pu-side-list a .n {
  flex-shrink: 0; font-size: 10.5px; color: #fff; background: var(--ink);
  min-width: 18px; text-align: center; padding: 0 5px; border-radius: 9px;
}
.pu-side-list a .c { flex-shrink: 0; font-size: 10.5px; color: var(--faint); }
.pu-side-list.eps a { justify-content: flex-start; }
.pu-side-list.eps .d { flex-shrink: 0; font-size: 11px; color: var(--faint); font-family: "Courier New", monospace; margin-right: 8px; }

/* 右カラムのストア小窓 */
.pu-side-store .row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px dotted var(--line);
}
.pu-side-store .row:last-child { border-bottom: 0; }
.pu-side-store img { width: 52px; height: 68px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.pu-side-store .b { min-width: 0; }
.pu-side-store .t { display: block; font-size: 12.5px; line-height: 1.55; }
.pu-side-store .p { display: block; margin-top: 3px; font-size: 12.5px; font-weight: bold; }
.pu-side-store .p small { font-weight: normal; color: var(--faint); font-size: 10px; }

/* 中央カラム内の書影グリッドは3列に */
.pu-mag-grid.cols3c { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .pu-mag-grid.cols3c { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 閲覧室 ---------- */
.pu-libcat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.pu-libcat a {
  border: 1px solid var(--line2); padding: 7px 16px; font-size: 13px; letter-spacing: .04em;
}
.pu-libcat a:hover { background: var(--shade); }
.pu-libcat a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pu-libcat.sub { display: block; font-size: 12px; line-height: 2.4; margin: 0 0 6px; }
.pu-libcat.sub .g { color: var(--faint); letter-spacing: .1em; margin-right: 4px; }
.pu-libcat.sub a {
  display: inline-block; border: 1px solid var(--line); padding: 2px 10px; margin: 0 4px 4px 0; font-size: 11.5px;
}
.pu-libcat.sub a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pu-libcat.sub .off {
  display: inline-block; border: 1px dashed var(--line); color: #c2c2c2;
  padding: 2px 10px; margin: 0 4px 4px 0; font-size: 11.5px;
}

.pu-lib-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 640px) { .pu-lib-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.pu-lib-card { border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; }
.pu-lib-card .cov { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--shade); }
.pu-lib-card .cov img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.pu-lib-card .cov:hover img { transform: scale(1.03); }
.pu-lib-card .cov .nocov {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--faint); font-family: var(--serif); writing-mode: vertical-rl; letter-spacing: .2em;
}
.pu-lib-card .cov .free {
  position: absolute; left: 0; top: 10px; background: var(--accent); color: #fff;
  font-size: 10.5px; letter-spacing: .1em; padding: 3px 10px;
}
.pu-lib-card .b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.pu-lib-card .mm { font-size: 11.5px; color: var(--faint); }
.pu-lib-card .mm em { font-style: normal; border: 1px solid var(--line); padding: 0 6px; font-size: 10px; margin-left: 4px; }
.pu-lib-card .mt { font-family: var(--serif); font-size: 15.5px; font-weight: bold; line-height: 1.5; }
.pu-lib-card .act { margin-top: 8px; display: flex; gap: 8px; }

/* ---------- 誌面リーダー（reader.php） ---------- */
.pu-pagejump { text-align: center; margin: 0 0 14px; font-size: 12.5px; color: var(--sub); }
.pu-pagejump select { border: 1px solid var(--line2); padding: 5px 10px; font-size: 13px; background: #fff; }
.pu-ipage { margin: 0 auto 6px; max-width: 860px; text-align: center; }
.pu-ipage img { display: block; width: 100%; border: 1px solid var(--line); }
.pu-ipage figcaption { font-size: 10.5px; color: var(--faint); letter-spacing: .1em; padding: 3px 0 10px; font-family: "Courier New", monospace; }

/* =====================================================================
   編集部管理室 2.0（サイドバー＋ダッシュボード）
   ===================================================================== */
.pu-adm {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start;
}
@media (max-width: 900px) { .pu-adm { grid-template-columns: 1fr; } }

.pu-adm-side {
  position: sticky; top: 70px;
  border: 1px solid var(--line); background: var(--paper);
}
@media (max-width: 900px) { .pu-adm-side { position: static; } }
.pu-adm-side .hd {
  padding: 13px 16px; font-family: var(--serif); font-size: 14px; letter-spacing: .14em;
  border-bottom: 2px solid var(--ink); background: var(--shade);
}
.pu-adm-side a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--line);
}
.pu-adm-side a:last-child { border-bottom: 0; }
.pu-adm-side a:hover { background: var(--shade); }
.pu-adm-side a .n {
  font-size: 10.5px; color: #fff; background: var(--ink);
  min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 10px;
}
.pu-adm-side a .n.alert { background: var(--accent); }
.pu-adm-side .grp { padding: 9px 16px 4px; font-size: 10.5px; letter-spacing: .2em; color: var(--faint); background: #fbfbfb; border-bottom: 1px solid var(--line); }

/* ダッシュボード統計カード */
.pu-dash {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 26px;
}
@media (max-width: 900px) { .pu-dash { grid-template-columns: repeat(2, 1fr); } }
.pu-dash .card {
  border: 1px solid var(--line); border-top: 3px solid var(--ink);
  background: var(--paper); padding: 14px 16px 12px;
}
.pu-dash .card.acc { border-top-color: var(--accent); }
.pu-dash .card .k { font-size: 11px; letter-spacing: .12em; color: var(--faint); }
.pu-dash .card .v { font-family: var(--serif); font-size: 30px; font-weight: bold; line-height: 1.2; }
.pu-dash .card .v small { font-size: 12px; font-weight: normal; color: var(--sub); margin-left: 3px; }
.pu-dash .card .s { font-size: 11px; color: var(--sub); margin-top: 2px; }
.pu-dash .card a { text-decoration: underline; }

/* クイックアクション */
.pu-quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }

/* パネル（各セクションをカード化） */
.pu-panel {
  border: 1px solid var(--line); background: var(--paper);
  padding: 20px 22px 24px; margin: 0 0 30px;
  scroll-margin-top: 80px;
}
.pu-panel > .pu-sec:first-child { margin-top: 0; }
.pu-panel .pu-sec h2 { font-size: 18px; }
.pu-panel .hint {
  background: var(--shade); border-left: 3px solid var(--ink);
  padding: 9px 14px; font-size: 12.5px; color: var(--sub); margin: 0 0 14px; line-height: 1.9;
}

/* 管理室のテーブルを見やすく */
.pu-panel .pu-list tr:nth-child(even) td { background: #fafafa; }
.pu-panel .pu-list tr:hover td { background: var(--shade); }

/* 号ページのサムネ一覧（削除チェック） */
.pu-admin-imgs.ipages { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.pu-admin-imgs.ipages label {
  width: 84px; font-size: 10.5px; text-align: center; color: var(--sub);
}
.pu-admin-imgs.ipages img {
  width: 84px; height: 112px; object-fit: cover; border: 1px solid var(--line); display: block; margin-bottom: 3px;
}

/* ---------- 創作ひろば：検索フォーム・タグ・つぶやき小窓 ---------- */
.c-search { border: 1px solid var(--line); background: var(--shade); padding: 14px 16px; margin: 0 0 14px; }
.c-search.hero { margin: 26px 0 6px; }
.c-search .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c-search .row.sub { margin-top: 10px; font-size: 13px; color: var(--sub); }
.c-search input[type=search] {
  flex: 1; min-width: 220px; border: 1px solid var(--line2); background: #fff;
  padding: 10px 14px; font-size: 14px;
}
.c-search select { border: 1px solid var(--line2); background: #fff; padding: 9px 10px; font-size: 13px; }
.c-genres { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.c-genres a { border: 1px solid var(--line); padding: 4px 12px; font-size: 12px; }
.c-genres a:hover { background: var(--shade); }
.c-genres a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.c-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.c-tagcloud a { border: 1px solid var(--line); padding: 2px 10px; font-size: 11.5px; color: var(--sub); }
.c-tagcloud a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.c-side-tweets .tw { padding: 8px 0; border-bottom: 1px dotted var(--line); }
.c-side-tweets .tw:last-child { border-bottom: 0; }
.c-side-tweets .m { display: block; font-size: 11px; color: var(--faint); }
.c-side-tweets .b { display: block; font-size: 12.5px; line-height: 1.7; }
.pu-series-grid.cols3c { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .pu-series-grid.cols3c { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 誌面ブロックエディタ（管理室・号） ---------- */
.ib-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; }
.ib {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--line); background: #fff; padding: 8px 10px;
}
.ib.drag { opacity: .55; border-style: dashed; }
.ib-grip {
  cursor: grab; user-select: none; touch-action: none;
  color: var(--faint); font-size: 15px; letter-spacing: -2px;
  padding: 6px 8px; border: 1px solid var(--line); background: var(--shade);
  align-self: stretch; display: flex; align-items: center;
}
.ib img { width: 74px; height: 98px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.ib-no { font-size: 11px; color: var(--sub); font-family: "Courier New", monospace; min-width: 30px; padding-top: 4px; }
.ib.txt textarea { flex: 1; border: 1px solid var(--line2); padding: 8px 10px; font-size: 13px; line-height: 1.8; min-width: 0; }
.ib-ops { margin-left: auto; display: flex; gap: 5px; align-items: flex-start; flex-shrink: 0; }
.ib-ops button {
  border: 1px solid var(--line2); background: #fff; font-size: 11.5px; padding: 4px 9px; cursor: pointer;
}
.ib-ops button:hover { background: var(--ink); color: #fff; }
.ib-ops .ib-del:hover { background: #b03030; border-color: #b03030; }

/* ---------- リーダーのテキストブロック（ブログ風本文） ---------- */
.pu-itext {
  max-width: 720px; margin: 22px auto 26px; padding: 4px 6px;
  font-size: 15px; line-height: 2.15; letter-spacing: .03em;
}
.pu-itext p { margin: 0 0 1.4em; }
.pu-itext h2 {
  font-family: var(--serif); font-size: 19px; letter-spacing: .08em;
  border-left: 4px solid var(--ink); padding: 3px 0 3px 13px; margin: 1.6em 0 .9em;
}
.pu-itext h3 { font-family: var(--serif); font-size: 16px; margin: 1.4em 0 .7em; }
.pu-itext blockquote {
  margin: 1.2em 0; padding: 8px 18px; border-left: 3px solid var(--line2);
  color: var(--sub); background: var(--shade);
}
.pu-itext a { text-decoration: underline; }
.pu-itext hr { border: 0; border-top: 1px solid var(--line); margin: 2em auto; width: 40%; }
/* =====================================================================
   c.css ─ 創作ひろば 2.0（pub.css の追補・白黒統一）
   ===================================================================== */

/* ヘッダー右側：通知ベル＋作家スタジオ */
.c-me { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pu-fix-nav a.pubside { color: var(--faint); }
.c-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--line2); color: var(--ink);
}
.c-bell:hover { border-color: var(--ink); }
.c-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: bold;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.c-studio {
  display: inline-block; background: var(--ink); color: #fff !important;
  font-size: 12.5px; font-weight: 600; padding: 9px 16px; letter-spacing: .08em;
  white-space: nowrap;
}
.c-studio:hover { background: var(--accent); }
.c-studio.ghost { background: #fff; color: var(--ink) !important; border: 1px solid var(--ink); }
.c-studio.ghost:hover { color: var(--accent) !important; border-color: var(--accent); }
@media (max-width: 980px) { .c-me { gap: 7px; } .c-studio { padding: 8px 10px; font-size: 11.5px; } }

/* いいね（コンパクトなピル） */
.c-like {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line2); background: #fff; color: var(--ink);
  font-size: 12.5px; padding: 5px 13px; cursor: pointer; font-family: inherit;
  border-radius: 15px; line-height: 1;
}
.c-like svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.c-like:hover { border-color: var(--accent); color: var(--accent); }
.c-like.done { border-color: var(--accent); color: var(--accent); background: #fdf5f6; }
.c-like.done svg { fill: var(--accent); }
.c-like b { font-weight: 600; }

/* ランキング変動 */
.rk-up { color: #b03018; font-size: 11px; font-weight: bold; }
.rk-dn { color: #2a5a8a; font-size: 11px; font-weight: bold; }
.rk-kp { color: #b5b5b5; font-size: 11px; }
.rk-new { background: var(--accent); color: #fff; font-size: 9.5px; padding: 1px 6px; letter-spacing: .08em; }
.rk-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 8px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.rk-row:hover { background: var(--shade); }
.rk-row .rk-no {
  flex-shrink: 0; width: 44px; text-align: center;
  font-family: var(--serif); font-weight: bold; font-size: 19px;
}
.rk-row.top1 .rk-no { color: #b08a00; font-size: 24px; }
.rk-row.top2 .rk-no { color: #8a8a8a; font-size: 22px; }
.rk-row.top3 .rk-no { color: #a05a2a; font-size: 21px; }
.rk-row .rk-mv { flex-shrink: 0; width: 40px; text-align: center; }
.rk-row .rk-cov { flex-shrink: 0; width: 46px; }
.rk-row .rk-cov img { width: 46px; height: 62px; object-fit: cover; border: 1px solid var(--line); display: block; }
.rk-row .rk-t { flex: 1; min-width: 0; }
.rk-row .rk-t .tt { font-size: 14.5px; font-weight: 700; }
.rk-row .rk-t .au { font-size: 11.5px; color: var(--faint); }
.rk-row .rk-sc { flex-shrink: 0; font-family: "Courier New", monospace; font-size: 12px; color: var(--sub); }
@media (max-width: 560px) { .rk-row { gap: 9px; } .rk-row .rk-sc { display: none; } }

/* 作品ページのランクバッジ */
.c-rankbadges { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.c-rankbadges span {
  font-size: 11px; border: 1px solid var(--line2); color: var(--sub); padding: 2px 10px;
}
.c-rankbadges span.in3 { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* 章見出し */
.c-chapter {
  font-family: var(--serif); font-size: 15.5px; letter-spacing: .1em;
  background: var(--shade); border-left: 4px solid var(--ink);
  padding: 7px 14px; margin: 22px 0 0;
}

/* コメント */
.c-com { border: 1px solid var(--line); padding: 12px 16px; margin: 0 0 10px; background: #fff; }
.c-com .m { font-size: 11.5px; color: var(--faint); margin-bottom: 4px; }
.c-com .m b { color: var(--ink); font-size: 12.5px; }
.c-com .b { font-size: 13.5px; line-height: 1.9; }

/* 通知 */
.c-ntf { display: flex; gap: 12px; align-items: baseline; padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.c-ntf.unread { background: #fdf9f0; }
.c-ntf .d { flex-shrink: 0; font-size: 11.5px; color: var(--faint); font-family: "Courier New", monospace; }
.c-ntf .ty { flex-shrink: 0; font-size: 10.5px; border: 1px solid var(--line2); padding: 1px 8px; color: var(--sub); }

/* スタジオ：ページ並べ替え */
.c-sort { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px dashed var(--line2); background: var(--shade); min-height: 90px; }
.c-sort .pg {
  position: relative; width: 76px; cursor: grab; user-select: none; touch-action: none;
  background: #fff; border: 1px solid var(--line2); padding: 3px;
}
.c-sort .pg img { display: block; width: 100%; height: 96px; object-fit: cover; pointer-events: none; }
.c-sort .pg .n {
  position: absolute; left: 3px; top: 3px; background: var(--ink); color: #fff;
  font-size: 10px; padding: 1px 6px;
}
.c-sort .pg.drag { opacity: .35; border-color: var(--accent); }
.c-sort .pg .del { display: block; text-align: center; font-size: 10px; color: #b03030; padding-top: 2px; }
.c-sort-note { font-size: 11.5px; color: var(--faint); margin: 6px 0 0; }

/* スタジオ：作品カード */
.c-mywork { display: flex; gap: 16px; border: 1px solid var(--line); padding: 14px; margin: 0 0 14px; background: #fff; flex-wrap: wrap; }
.c-mywork .cov { width: 84px; flex-shrink: 0; }
.c-mywork .cov img { width: 84px; height: 112px; object-fit: cover; border: 1px solid var(--line); }
.c-mywork .inf { flex: 1; min-width: 240px; }
.c-mywork .inf h3 { margin: 0 0 4px; font-size: 16px; }
.c-mywork .st { font-size: 11.5px; color: var(--sub); }

/* つぶやきルール帯 */
.c-rule {
  border: 1px solid var(--line2); border-left: 4px solid var(--accent);
  background: #fff; padding: 12px 16px; font-size: 13px; margin: 0 0 16px; line-height: 1.9;
}

/* =====================================================================
   PRESS BRIDGE ─ 統合レイヤー
   pub.css / c.css の全部品を、CMS土台のテーマ変数（--dz-*）へ橋渡し。
   これにより出版社コンポーネントも管理室のスキン/カラーピッカーで
   一括着せ替え可能になります（既存クローム規則は該当要素が無いため不活性）。
   ===================================================================== */
:root{
  --ink:   var(--dz-text);
  --sub:   var(--dz-muted);
  --faint: var(--dz-muted);
  --line:  var(--dz-line);
  --line2: var(--dz-line);
  --paper: var(--dz-bg);
  --shade: var(--dz-hover);
  --accent:var(--dz-accent);
}
html{ background: var(--dz-bg); }

/* ---- ロゴタイプ：出版社らしい明朝の背骨（本文はテーマフォントのまま） ---- */
.gh-logotype{
  font-family: var(--serif);
  font-weight: 600; letter-spacing: .22em; font-size: 20px;
}
.pu-hero-over h1, .press-shelf h1{ font-family: var(--serif); }

/* ---- ワイドモード v3.6：全ページ3カラム化。
   旧仕様（wide＝両サイドを畳んで全幅）を廃止し、wideは「最大幅を広げる」
   だけの意味に変更。左右カラム（side_left / side_right）のブロックが
   トップ・ひろば・ギャラリー等すべてのページで表示されます。
   列数の増減は .no-l / .no-r（ヘッダー側の判定）が引き続き制御。 ---- */
.layout.wide{ max-width: 1800px; }
.layout.wide .wrap{ padding-top: 4px; }

/* =====================================================================
   本棚ヒーロー（右→左へ流れる本）── 統合版シグネチャ
   pu-heroband を「棚板の上に立つ本」へ再解釈：
   ・薄い棚板ライン＋本ごとの微妙な高さゆらぎ・傾き・背表紙影
   ・ホバーで流れが止まり、その一冊がすっと持ち上がる
   ・reduced-motion では静止した棚として成立
   ===================================================================== */
.pu-heroband{
  position: relative; overflow: hidden;
  background: var(--dz-surface);
  border: 1px solid var(--dz-line); border-radius: var(--dz-radius);
  min-height: 300px; margin: 0 0 26px;
}
.pu-heroband--full{ min-height: 340px; }
.pu-mq{ position:absolute; inset:0; display:flex; align-items:flex-end; opacity:1; }
.pu-mq::after{ /* 棚板 */
  content:""; position:absolute; left:0; right:0; bottom:56px; height:2px;
  background: var(--dz-line);
  box-shadow: 0 10px 18px -12px rgba(0,0,0,.35);
}
.pu-mq-track{
  display:flex; align-items:flex-end; gap:22px;
  padding: 0 20px 58px;
  animation: pu-flow 70s linear infinite;
  will-change: transform;
}
.pu-heroband:hover .pu-mq-track{ animation-play-state: paused; }
.pu-mq-track img{
  height: 168px; width:auto; flex:0 0 auto;
  border:1px solid var(--dz-line);
  background:#fff;
  box-shadow: -6px 8px 14px -8px rgba(20,20,26,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
/* 本ごとの“棚のゆらぎ”：高さ・傾きをわずかに散らす */
.pu-mq-track img:nth-child(4n+1){ transform: translateY(0)    rotate(-.5deg); }
.pu-mq-track img:nth-child(4n+2){ transform: translateY(-5px) rotate(.4deg); height:176px; }
.pu-mq-track img:nth-child(4n+3){ transform: translateY(-2px) rotate(-.2deg); }
.pu-mq-track img:nth-child(4n)  { transform: translateY(-7px) rotate(.6deg); height:160px; }
.pu-mq-track img:hover{
  transform: translateY(-16px) rotate(0deg) !important;
  box-shadow: -10px 18px 24px -10px rgba(20,20,26,.45);
}
.pu-hero-over{
  position:relative; z-index:2;
  max-width: 620px;
  margin: 34px 0 0 38px;
  padding: 22px 26px;
  background: color-mix(in srgb, var(--dz-surface) 88%, transparent);
  backdrop-filter: blur(2px);
  border: 1px solid var(--dz-line); border-radius: var(--dz-radius);
}
.pu-hero-over h1{ margin:0 0 8px; font-size: 27px; letter-spacing:.06em; color: var(--dz-heading); }
.pu-hero-over p{ margin:0 0 6px; font-size: 13.5px; color: var(--dz-muted); line-height: 2; }
.pu-hero-btns{ margin-top: 12px !important; display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width: 760px){
  .pu-hero-over{ margin: 22px 14px 0; padding: 16px; }
  .pu-hero-over h1{ font-size: 21px; }
  .pu-mq-track img{ height: 128px; }
  .pu-mq-track img:nth-child(4n+2){ height:134px; } .pu-mq-track img:nth-child(4n){ height:122px; }
  .pu-mq::after{ bottom: 40px; }
  .pu-mq-track{ padding-bottom: 42px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .pu-mq-track{ animation: none; }
  .pu-mq-track img{ transition: none; }
}

/* ---- セクション見出し（pu-sec）をテーマ帯色に同調 ---- */
.pu-sec{ border-bottom: 2px solid var(--dz-bar-bg); }
.pu-sec h2 small{ color: var(--dz-muted); }

/* ---- 創作ひろば：タブ帯（旧c_headerの機能を1本のストリップに凝縮） ---- */
.hiroba-tabs{
  display:flex; align-items:center; gap: 4px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 8px 10px;
  background: var(--dz-surface); border:1px solid var(--dz-line);
  border-radius: var(--dz-radius);
}
.hiroba-tabs .ht-label{
  font-family: var(--serif); font-size: 13px; letter-spacing:.18em;
  color: var(--dz-heading); padding: 4px 10px 4px 4px; margin-right: 2px;
  border-right: 1px solid var(--dz-line);
}
.hiroba-tabs a{
  font-size: 13px; padding: 6px 12px; border-radius: 99px;
  color: var(--dz-text); text-decoration: none;
}
.hiroba-tabs a:hover{ background: var(--dz-hover); }
.hiroba-tabs a.on{ background: var(--dz-text); color: var(--dz-surface); }
.hiroba-tabs .ht-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.hiroba-tabs .c-studio{ border-radius: 99px; padding: 7px 14px; }
.hiroba-tabs .c-bell{ border-radius: 50%; }
@media (max-width: 700px){ .hiroba-tabs .ht-label{ display:none; } }

/* ---- カートFAB：PC＝右上固定／スマホ＝左下固定 ----
   前方の 329行・462行の定義に勝つよう、位置は !important で確定させる。 */
.cart-fab{
  position: fixed !important;
  top: 8px !important; right: 12px !important;
  bottom: auto !important; left: auto !important;
  z-index: 400;
  background: var(--dz-surface); border:1px solid var(--dz-line);
  border-radius: 12px; padding: 5px 8px;
  min-width: 52px; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px -10px rgba(20,20,26,.35);
}

/* カート：PCはタブ非表示・中身そのまま */
.cart-fab .cart-tab{ display:none; }
.cart-fab .cart-body{ display:contents; }

/* ---- お知らせ行・雑誌カードのアクセント同調（ボルドー固有値の残滓を回収） ---- */
.pu-news-row .c.rel{ background: var(--dz-accent); }
.pu-mag .free{ background: var(--dz-accent); }

/* ---- 3カラム（トップ）：段階的にたたむ ---- */
.pu-cols3{
  display:grid;
  /* v3.5: PC(>=1024px)は必ず3カラム。列幅は伸縮して画面に収める */
  grid-template-columns: minmax(200px,240px) minmax(0,1fr) minmax(225px,290px);
  gap: clamp(14px, 1.8vw, 26px); align-items:start;
}
.pu-col-l, .pu-col-r{ position: static; min-width: 0; }
.pu-col-c{ min-width: 0; }
/* タブレット：左サイド（カテゴリー）を下段の全幅グリッドへ、中央＋右の2列 */
@media (max-width: 1023px){
  .pu-cols3{ grid-template-columns: minmax(0,1fr) 280px; }
  .pu-col-l{
    grid-column: 1 / -1; order: 3;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  }
  .pu-col-r{ order: 2; }
}
/* モバイル：完全1列（左サイドも通常の縦積みに戻す） */
@media (max-width: 760px){
  .pu-cols3{ grid-template-columns: 1fr; gap: 20px; }
  .pu-col-l{ display: block; order: 3; }
  .pu-col-r{ order: 2; }
}
/* スマホ（≤760px）：右端中央の極小タブ → タップで左へスライド展開 */
@media (max-width: 760px){
  .cart-fab{
    top: 50% !important; right: 0 !important;
    left: auto !important; bottom: auto !important;
    transform: translateY(-50%);
    display: flex !important; align-items: center;
    padding: 0 !important; min-width: 0 !important; min-height: 0 !important;
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; z-index: 400;
    max-width: calc(100vw - 16px);
  }
  .cart-fab .cart-tab{
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 48px; flex: 0 0 auto;
    border: 1px solid var(--dz-line, #ddd); border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--dz-surface, #fff);
    box-shadow: -3px 3px 12px rgba(20,20,26,.2);
    font-size: 14px; line-height: 1; padding: 0; cursor: pointer;
  }
  .cart-fab .cart-body{
    display: block; width: 0; overflow: hidden;
    background: var(--dz-surface, #fff);
    border: 0 solid var(--dz-line, #ddd);
    box-shadow: -3px 3px 12px rgba(20,20,26,.2);
    transition: width .28s ease, padding .28s ease;
    padding: 0; border-radius: 0 0 0 12px;
  }
  .cart-fab.open .cart-body{
    width: 170px; padding: 10px 10px 10px 12px;
    border-width: 1px 0 1px 0;
  }
  .cart-fab.open .cart-tab{ border-radius: 10px 0 0 10px; }
}

/* ============================================================
   XF BLOCKS v3.1 — 体感する音楽ステージ / ブロック表現拡張
   ============================================================ */

/* --- 流れる本：復活（keyframes欠落の修正） --- */
@keyframes pu-flow { to { transform: translateX(-50%); } }

/* --- カートFAB × 漫画音楽バーの衝突解消 --- */
body.has-cplayer .xfp-bar { bottom: 76px; }

/* --- ビジュアライザー・ステージ --- */
.xfv {
  position: relative; border-radius: var(--dz-radius, 14px); overflow: hidden;
  background: radial-gradient(ellipse 90% 120% at 50% -20%, #1d2440 0%, #0b0e1a 55%, #07080f 100%);
  border: 1px solid #23283d; box-shadow: 0 10px 34px rgba(5,8,20,.45);
  margin: 14px 0 18px; color: #e8eaf4;
}
.xfv canvas { display: block; width: 100%; height: 100%; }
.xfv .xfv-stage { position: relative; z-index: 0; }
.xfv .xfv-meta {
  position: absolute; left: 16px; bottom: 12px; right: 16px; z-index: 6;
  display: flex; align-items: flex-end; gap: 12px; pointer-events: none;
}
.xfv .xfv-cover { width: 58px; height: 58px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); flex: 0 0 auto; background:#141828; }
.xfv .xfv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xfv .xfv-tt { min-width: 0; }
.xfv .xfv-tt b { display: block; font-size: 15px; letter-spacing: .04em;
  color: #ffffff !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.xfv .xfv-tt span { font-size: 11px; color: #eef1ff !important; letter-spacing: .12em;
  text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.xfv .xfv-play {
  pointer-events: auto; margin-left: auto; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1); backdrop-filter: blur(6px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background .18s ease;
}
.xfv .xfv-play:hover { transform: scale(1.07); background: rgba(255,255,255,.2); }
.xfv .xfv-play .tri { width: 0; height: 0; border-left: 16px solid #fff;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.xfv.is-playing .xfv-play .tri { border: 0; width: 14px; height: 16px; margin: 0;
  border-left: 5px solid #fff; border-right: 5px solid #fff; }
.xfv .xfv-badge { position: absolute; top: 10px; left: 14px; font-size: 10px;
  letter-spacing: .28em; color: #ffffff; opacity: .92; z-index: 6;
  text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.xfv .xfv-ctl {
  position: absolute; top: 8px; right: 10px; display: flex; gap: 6px;
  z-index: 7; pointer-events: auto;
}
.xfv .xfv-ctl button {
  font-size: 10px; letter-spacing: .1em; padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); color: #dfe4ff;
  background: rgba(255,255,255,.08); cursor: pointer;
}
.xfv .xfv-ctl button:hover { background: rgba(255,255,255,.2); }

/* --- Spotify風アルバム棚 --- */
.xfal { margin: 6px 0 20px; }
.xfal .xfal-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 158px;
  gap: 14px; overflow-x: auto; padding: 6px 2px 12px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.xfal .xfal-card {
  scroll-snap-align: start; background: var(--dz-surface, #fff);
  border: 1px solid var(--dz-line, #ddd); border-radius: 12px; padding: 10px;
  transition: transform .18s ease, box-shadow .18s ease; position: relative;
}
.xfal .xfal-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,24,48,.14); }
.xfal .xfal-cv { position: relative; border-radius: 9px; overflow: hidden; aspect-ratio: 1/1; background: #eceef4; }
.xfal .xfal-cv img, .xfal .xfal-cv svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.xfal .xfal-pl {
  position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--dz-accent, #24486e);
  box-shadow: 0 6px 16px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px); transition: all .18s ease;
}
.xfal .xfal-card:hover .xfal-pl, .xfal .xfal-card.is-playing .xfal-pl { opacity: 1; transform: none; }
.xfal .xfal-pl .tri { width: 0; height: 0; border-left: 13px solid #fff;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.xfal .xfal-card.is-playing .xfal-pl .tri { border: 0; width: 11px; height: 13px;
  border-left: 4px solid #fff; border-right: 4px solid #fff; margin: 0; }
.xfal .xfal-tt { margin: 9px 2px 0; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfal .xfal-sub { margin: 2px 2px 0; font-size: 11px; color: var(--dz-muted, #888); letter-spacing: .06em; }
.xfal .xfal-rel { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.xfal .xfal-rel a {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--dz-line, #ddd); color: var(--dz-muted, #777); text-decoration: none;
}
.xfal .xfal-rel a:hover { border-color: var(--dz-accent); color: var(--dz-accent); }

/* --- プレイリスト（トラックリスト）ブロック --- */
.xftl { margin: 6px 0 18px; border: 1px solid var(--dz-line,#ddd); border-radius: 12px; overflow: hidden; }
.xftl .xftl-r {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-top: 1px solid var(--dz-line,#eee); background: var(--dz-surface,#fff);
}
.xftl .xftl-r:first-child { border-top: 0; }
.xftl .xftl-r:hover { background: var(--dz-hover, #f6f7fb); }
.xftl .xftl-no { width: 22px; text-align: right; font-size: 12px; color: var(--dz-muted,#999); font-variant-numeric: tabular-nums; }
.xftl .xftl-cv { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background:#eceef4; flex:0 0 auto; }
.xftl .xftl-cv img, .xftl .xftl-cv svg { width:100%; height:100%; object-fit:cover; display:block; }
.xftl .xftl-t { min-width: 0; flex: 1; }
.xftl .xftl-t b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xftl .xftl-t span { font-size: 11px; color: var(--dz-muted,#888); }
.xftl .xftl-rel { display: flex; gap: 4px; flex-wrap: wrap; max-width: 40%; justify-content: flex-end; }
.xftl .xftl-rel a { font-size: 10px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--dz-line,#ddd); color: var(--dz-muted,#777); text-decoration: none; }
.xftl .xftl-rel a:hover { border-color: var(--dz-accent); color: var(--dz-accent); }
.xftl .xftl-pl { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--dz-line,#ccc);
  background: #fff; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.xftl .xftl-pl:hover { border-color: var(--dz-accent); }
.xftl .xftl-pl .tri { width: 0; height: 0; border-left: 10px solid var(--dz-accent,#24486e);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.xftl .xftl-r.is-playing .xftl-pl .tri { border: 0; width: 8px; height: 10px;
  border-left: 3px solid var(--dz-accent); border-right: 3px solid var(--dz-accent); margin: 0; }

/* --- スポットライト（大型フィーチャー） --- */
.xfsp { position: relative; border-radius: var(--dz-radius,14px); overflow: hidden;
  margin: 14px 0 18px; border: 1px solid var(--dz-line,#ddd); min-height: 200px;
  display: flex; align-items: flex-end; background:#10131f; }
.xfsp img.xfsp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.xfsp .xfsp-in { position: relative; padding: 26px 22px 20px; width: 100%;
  background: linear-gradient(180deg, transparent, rgba(8,10,20,.82) 70%); color: #fff; }
.xfsp.tone-light .xfsp-in { background: linear-gradient(180deg, transparent, rgba(255,255,255,.9) 70%); color: var(--dz-text,#222); }
.xfsp h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: .04em; }
.xfsp p { margin: 0 0 12px; font-size: 13px; opacity: .92; }
.xfsp .xfsp-btn { display: inline-block; font-size: 12.5px; letter-spacing: .08em;
  padding: 8px 18px; border-radius: 999px; background: var(--dz-accent,#24486e); color: #fff; text-decoration: none; }

/* --- 最新○○ジャンプカード --- */
.xflt { display: flex; align-items: center; gap: 14px; margin: 10px 0 18px;
  border: 1px solid var(--dz-line,#ddd); border-left: 4px solid var(--dz-accent,#24486e);
  border-radius: 10px; padding: 12px 14px; background: var(--dz-surface,#fff); }
.xflt .xflt-cv { width: 54px; height: 72px; border-radius: 6px; overflow: hidden; background:#eceef4; flex:0 0 auto; }
.xflt .xflt-cv img { width:100%; height:100%; object-fit:cover; display:block; }
.xflt .xflt-k { font-size: 10px; letter-spacing: .24em; color: var(--dz-muted,#888); }
.xflt b { display: block; font-size: 14.5px; margin: 2px 0; }
.xflt a.xflt-go { margin-left: auto; flex: 0 0 auto; font-size: 12px; padding: 7px 14px;
  border-radius: 999px; border: 1px solid var(--dz-accent); color: var(--dz-accent); text-decoration: none; }
.xflt a.xflt-go:hover { background: var(--dz-accent); color: #fff; }

/* --- 流れる本：ブロック版ラッパ --- */
.blk-heroband .pu-heroband { margin: 10px 0 18px; }

/* --- グローバル・ミニプレイヤー（xf_player） --- */
.xfp-bar {
  position: fixed; right: 12px; bottom: 12px; z-index: 380;
  width: min(360px, calc(100vw - 20px));
  background: linear-gradient(180deg, #171b2c, #0d1020);
  color: #e9ecf8; border: 1px solid #262c48; border-radius: 14px;
  box-shadow: 0 14px 38px rgba(5,8,20,.5);
  display: none; align-items: center; gap: 10px; padding: 9px 12px;
}
body.has-xfplayer .xfp-bar { display: flex; }
.xfp-bar .xfp-cv { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background:#232842; flex:0 0 auto; }
.xfp-bar .xfp-cv img, .xfp-bar .xfp-cv svg { width:100%; height:100%; object-fit:cover; display:block; }
.xfp-bar .xfp-t { min-width: 0; flex: 1; }
.xfp-bar .xfp-t b { display:block; font-size: 12.5px; color: #ffffff !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfp-bar .xfp-t span { font-size: 10px; color: #c7cdea !important; letter-spacing: .08em; }
.xfp-bar .xfp-rel { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.xfp-bar .xfp-rel a { font-size: 9.5px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid #3a4166; color: #c9d1f2 !important; text-decoration: none; }
.xfp-bar .xfp-rel a:hover { border-color: #7f8ac4; color: #fff; }
.xfp-bar button { border: 0; background: transparent; color: #fff !important; cursor: pointer; padding: 4px; }
.xfp-bar .xfp-pv, .xfp-bar .xfp-nx { font-size: 14px; padding: 2px 3px; color: #dfe4ff !important; }
.xfp-bar .xfp-al { font-size: 13px; padding: 2px 3px; }
.xfp-bar .xfp-pv:hover, .xfp-bar .xfp-nx:hover, .xfp-bar .xfp-al:hover { color: #fff !important; }
.xfp-bar .xfp-pp { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.xfp-bar .xfp-pp:hover { background: rgba(255,255,255,.22); }
.xfp-bar .xfp-pp .tri { width: 0; height: 0; border-left: 12px solid #fff;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.xfp-bar.is-playing .xfp-pp .tri { border: 0; width: 10px; height: 12px;
  border-left: 4px solid #fff; border-right: 4px solid #fff; margin: 0; }
.xfp-bar .xfp-x { font-size: 15px; line-height: 1; color: #8b93bb; }
.xfp-bar .xfp-x:hover { color: #fff; }
@media (max-width: 760px) {
  .xfp-bar { right: 10px; left: auto; bottom: 10px; }
}

/* --- Sound一覧ページャー --- */
.xf-pager{ display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; margin:6px 0 20px; }
.xf-pager .xf-pgno{ font-size:12px; color:var(--dz-muted,#888); letter-spacing:.06em; }

/* --- 最新話/Newsの3カラム化（index） --- */
.pu-news.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pu-news.cols3 .pu-news-row{ display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; height:100%; }
@media (max-width:900px){ .pu-news.cols3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pu-news.cols3{ grid-template-columns:repeat(2,1fr); gap:8px; } }

/* --- 過去作ギャラリー --- */
.xfg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:640px){ .xfg-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.xfg-item{ margin:0; border:1px solid var(--dz-line,#ddd); border-radius:10px;
  overflow:hidden; background:var(--dz-surface,#fff); }
.xfg-item img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#eef0f4;
  transition:transform .2s ease; }
.xfg-item a:hover img{ transform:scale(1.03); }
.xfg-item figcaption{ padding:7px 9px; font-size:11.5px; color:var(--dz-muted,#777);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xfg-lb{ position:fixed; inset:0; z-index:600; background:rgba(8,10,18,.92);
  display:flex; align-items:center; justify-content:center; }
.xfg-lb img{ max-width:92vw; max-height:86vh; border-radius:6px;
  box-shadow:0 18px 60px rgba(0,0,0,.6); }
.xfg-lb .xfg-x{ position:absolute; top:12px; right:16px; font-size:30px; line-height:1;
  border:0; background:transparent; color:#fff; cursor:pointer; }
.xfg-lb .xfg-nav{ position:absolute; top:50%; transform:translateY(-50%);
  font-size:42px; line-height:1; border:0; background:rgba(255,255,255,.12);
  color:#fff; cursor:pointer; width:52px; height:72px; border-radius:10px; }
.xfg-lb .xfg-prev{ left:10px; } .xfg-lb .xfg-next{ right:10px; }
.xfg-lb .xfg-cap{ position:absolute; bottom:14px; left:0; right:0; text-align:center;
  color:#dfe4f5; font-size:13px; margin:0; padding:0 60px; }

/* ============================================================
   XF BLOCKS v3.2 — 紹介・画像・音楽・回遊 表現ブロック
   ============================================================ */
.xf-eyebrow{ display:block; font-size:10px; letter-spacing:.3em;
  color:var(--dz-muted,#888); margin:0 0 6px; }

/* --- サイト紹介ヒーロー --- */
.xfin{ position:relative; overflow:hidden; border-radius:var(--dz-radius,14px);
  background:linear-gradient(160deg,#141a30,#0a0d18); color:#fff;
  border:1px solid #23283d; margin:14px 0 18px; min-height:220px;
  display:flex; align-items:center; }
.xfin.tone-light{ background:linear-gradient(160deg,#fdfcf9,#eef0f6);
  color:var(--dz-text,#222); border-color:var(--dz-line,#ddd); }
.xfin .xfin-bg{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.5; }
.xfin.tone-light .xfin-bg{ opacity:.28; }
.xfin .xfin-in{ position:relative; width:100%; padding:38px 26px; text-align:center; }
.xfin.al-left .xfin-in{ text-align:left; }
.xfin .xfin-tag{ margin:0 0 8px; font-size:11px; letter-spacing:.34em; opacity:.85; }
.xfin .xfin-tt{ margin:0 0 10px; font-family:var(--serif,serif); font-size:30px; letter-spacing:.08em; }
.xfin .xfin-sub{ margin:0 auto 16px; max-width:620px; font-size:13.5px; line-height:1.9; opacity:.94; }
.xfin.al-left .xfin-sub{ margin-left:0; }
@media(max-width:640px){ .xfin .xfin-tt{ font-size:23px; } .xfin .xfin-in{ padding:28px 16px; } }

/* --- 作品ガイド --- */
.xfab{ display:flex; gap:20px; align-items:flex-start; margin:14px 0 18px;
  border:1px solid var(--dz-line,#ddd); border-radius:14px; padding:20px;
  background:var(--dz-surface,#fff); }
.xfab .xfab-cv{ flex:0 0 150px; border-radius:10px; overflow:hidden; }
.xfab .xfab-cv img{ width:100%; display:block; }
.xfab h3{ margin:0 0 8px; font-family:var(--serif,serif); font-size:20px; letter-spacing:.06em; }
.xfab .xfab-lead{ margin:0 0 8px; font-weight:700; font-size:14px; color:var(--dz-accent,#24486e); }
.xfab .xfab-body{ margin:0 0 12px; font-size:13.5px; line-height:2; }
@media(max-width:640px){ .xfab{ flex-direction:column; } .xfab .xfab-cv{ flex-basis:auto; width:60%; } }

/* --- 作者カード --- */
.xfau{ display:flex; gap:18px; align-items:center; margin:14px 0 18px;
  border:1px solid var(--dz-line,#ddd); border-left:4px solid var(--dz-accent,#24486e);
  border-radius:12px; padding:16px 18px; background:var(--dz-surface,#fff); }
.xfau .xfau-cv{ flex:0 0 84px; width:84px; height:84px; border-radius:50%;
  overflow:hidden; background:#eef0f6; display:flex; align-items:center; justify-content:center; }
.xfau .xfau-cv img{ width:100%; height:100%; object-fit:cover; }
.xfau .xfau-ph{ font-size:30px; color:var(--dz-accent,#24486e); }
.xfau h3{ margin:0 0 2px; font-size:17px; }
.xfau .xfau-role{ margin:0 0 6px; font-size:11px; letter-spacing:.14em; color:var(--dz-muted,#888); }
.xfau .xfau-bio{ margin:0 0 8px; font-size:13px; line-height:1.9; }

/* --- コンセプト3本柱 --- */
.xfms{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0 18px; }
@media(max-width:640px){ .xfms{ grid-template-columns:1fr; } }
.xfms .xfms-c{ border:1px solid var(--dz-line,#ddd); border-radius:12px; padding:18px 16px;
  background:var(--dz-surface,#fff); text-align:center; }
.xfms .xfms-i{ display:block; font-size:24px; margin:0 0 8px; }
.xfms b{ display:block; font-size:14.5px; margin:0 0 6px; letter-spacing:.06em; }
.xfms p{ margin:0; font-size:12.5px; line-height:1.9; color:var(--dz-muted,#666); }

/* --- 3ステップ --- */
.xfst{ margin:14px 0 18px; border:1px solid var(--dz-line,#ddd); border-radius:14px;
  padding:16px 18px; background:var(--dz-surface,#fff); }
.xfst .xfst-r{ display:flex; gap:14px; align-items:flex-start; padding:12px 4px;
  border-top:1px dashed var(--dz-line,#e5e5e5); text-decoration:none; color:inherit; }
.xfst .xfst-r:first-of-type{ border-top:0; }
.xfst a.xfst-r:hover b{ color:var(--dz-accent,#24486e); }
.xfst .xfst-no{ flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  background:var(--dz-accent,#24486e); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:14px; }
.xfst b{ display:block; font-size:14px; margin:3px 0 3px; }
.xfst p{ margin:0; font-size:12.5px; color:var(--dz-muted,#666); line-height:1.8; }
.xfst .xfst-go{ margin-left:auto; align-self:center; color:var(--dz-accent,#24486e); }

/* --- 数字で見る --- */
.xfsn{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 18px; }
.xfsn .xfsn-c{ flex:1; min-width:110px; text-align:center; border:1px solid var(--dz-line,#ddd);
  border-radius:12px; padding:16px 8px 14px; background:var(--dz-surface,#fff); }
.xfsn .xfsn-i{ display:block; font-size:18px; margin-bottom:4px; }
.xfsn b{ font-size:26px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.xfsn span:last-child{ display:block; font-size:11px; color:var(--dz-muted,#888);
  letter-spacing:.2em; margin-top:2px; }

/* --- 年表 --- */
.xftm{ margin:14px 0 18px; padding-left:6px; }
.xftm .xftm-r{ display:flex; gap:14px; padding:8px 0 12px; position:relative; }
.xftm .xftm-r::before{ content:''; position:absolute; left:76px; top:0; bottom:0;
  width:2px; background:var(--dz-line,#e5e5e5); }
.xftm .xftm-w{ flex:0 0 66px; text-align:right; font-size:12px; font-weight:700;
  color:var(--dz-accent,#24486e); padding-top:2px; }
.xftm p{ margin:0 0 0 22px; font-size:13px; line-height:1.8; position:relative; }
.xftm p::before{ content:''; position:absolute; left:-27px; top:7px; width:8px; height:8px;
  border-radius:50%; background:var(--dz-accent,#24486e); }

/* --- FAQ --- */
.xffq{ margin:14px 0 18px; border:1px solid var(--dz-line,#ddd); border-radius:12px;
  overflow:hidden; background:var(--dz-surface,#fff); }
.xffq details{ border-top:1px solid var(--dz-line,#eee); }
.xffq details:first-child{ border-top:0; }
.xffq summary{ padding:13px 16px; cursor:pointer; font-size:13.5px; font-weight:700;
  list-style:none; position:relative; }
.xffq summary::after{ content:'＋'; position:absolute; right:16px; color:var(--dz-muted,#999); }
.xffq details[open] summary::after{ content:'−'; }
.xffq p{ margin:0; padding:0 16px 14px; font-size:13px; line-height:1.9; color:var(--dz-muted,#555); }

/* --- 引用 --- */
.xfqt{ margin:16px 0 20px; padding:22px 26px; border-radius:12px; position:relative; }
.xfqt.tone-ink{ background:var(--dz-surface,#fff); border:1px solid var(--dz-line,#ddd);
  border-left:4px solid var(--dz-text,#222); }
.xfqt.tone-gold{ background:linear-gradient(135deg,#fdf8ec,#f7edd6); border:1px solid #e2cf9e; }
.xfqt.tone-night{ background:linear-gradient(150deg,#171c30,#0b0e1a); color:#e8eaf4; border:1px solid #262c48; }
.xfqt p{ margin:0; font-family:var(--serif,serif); font-size:15.5px; line-height:2.1; letter-spacing:.04em; }
.xfqt cite{ display:block; margin-top:10px; font-size:12px; font-style:normal; opacity:.75; text-align:right; }

/* --- CTA帯 --- */
.xfct{ margin:16px 0 20px; border-radius:14px; padding:24px 22px; text-align:center; }
.xfct.tone-accent{ background:var(--dz-accent,#24486e); color:#fff; }
.xfct.tone-ink{ background:#15181f; color:#fff; }
.xfct.tone-soft{ background:var(--dz-hover,#f2f4f9); border:1px solid var(--dz-line,#ddd); }
.xfct b{ display:block; font-size:18px; letter-spacing:.06em; margin-bottom:4px; }
.xfct p{ margin:0 0 4px; font-size:13px; opacity:.9; }
.xfct .xfct-b{ margin:12px 0 0; }
.xfct.tone-accent .pu-btn{ background:#fff; color:var(--dz-accent,#24486e); border-color:#fff; }
.xfct.tone-accent .pu-btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }

/* --- 額装画像 --- */
.xffr{ margin:16px auto 20px; width:var(--w,70%); max-width:100%; }
.xffr.al-left{ margin-left:0; } .xffr.al-right{ margin-right:0; }
.xffr img{ width:100%; display:block; }
.xffr.st-simple img{ border:1px solid var(--dz-line,#ccc); border-radius:6px; }
.xffr.st-gold img{ border:10px solid #ffffff; outline:1px solid #8a6d1a;
  box-shadow:0 8px 26px rgba(80,60,10,.28); }
.xffr.st-polaroid{ background:#fff; padding:12px 12px 34px; box-shadow:0 8px 22px rgba(20,20,30,.18);
  transform:rotate(-1.2deg); }
.xffr.st-shadow img{ border-radius:8px; box-shadow:0 16px 38px rgba(20,24,48,.28); }
.xffr figcaption{ margin-top:8px; font-size:11.5px; color:var(--dz-muted,#777); text-align:center; }
.xffr.st-polaroid figcaption{ margin-top:10px; font-family:var(--serif,serif); }

/* --- 2枚ならべ --- */
.xfdu{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 18px; }
.xfdu figure{ margin:0; }
.xfdu img{ width:100%; object-fit:cover; border-radius:10px; border:1px solid var(--dz-line,#ddd); }
.xfdu.r-1-1 img{ aspect-ratio:1/1; } .xfdu.r-3-4 img{ aspect-ratio:3/4; }
.xfdu.r-4-3 img{ aspect-ratio:4/3; } .xfdu.r-16-9 img{ aspect-ratio:16/9; }
.xfdu figcaption{ margin-top:6px; font-size:11.5px; color:var(--dz-muted,#777); text-align:center; }

/* --- 帯写真 --- */
.xfbn{ margin:16px 0 20px; border-radius:14px; overflow:hidden; background-size:cover;
  background-position:center; display:flex; align-items:flex-end; }
.xfbn.is-fixed{ background-attachment:fixed; }
@media(max-width:760px){ .xfbn.is-fixed{ background-attachment:scroll; } }
.xfbn .xfbn-in{ width:100%; padding:22px 20px 16px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,10,20,.72)); }
.xfbn.tone-light .xfbn-in{ color:var(--dz-text,#222);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.85)); }
.xfbn b{ display:block; font-size:19px; letter-spacing:.08em; font-family:var(--serif,serif); }
.xfbn span{ font-size:12px; opacity:.9; }

/* --- コラージュ --- */
.xfcl{ display:grid; gap:10px; margin:14px 0 18px; }
.xfcl.ly-grid{ grid-template-columns:repeat(3,1fr); }
.xfcl.ly-mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:110px; }
.xfcl.ly-mosaic a:first-child{ grid-column:span 2; grid-row:span 2; }
.xfcl a{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--dz-line,#ddd); }
.xfcl img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.xfcl a:hover img{ transform:scale(1.04); }
.xfcl.ly-grid img{ aspect-ratio:3/4; }
@media(max-width:640px){ .xfcl.ly-mosaic{ grid-auto-rows:84px; } }

/* --- ギャラリー帯 --- */
.xfgs{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; margin:12px 0 16px;
  scroll-snap-type:x mandatory; }
.xfgs a{ flex:0 0 auto; scroll-snap-align:start; border-radius:10px; overflow:hidden;
  border:1px solid var(--dz-line,#ddd); }
.xfgs img{ height:100%; width:auto; display:block; }
.xfgs .xfgs-more{ display:flex; align-items:center; justify-content:center;
  min-width:110px; background:var(--dz-hover,#f2f4f9); color:var(--dz-accent,#24486e);
  font-size:13px; font-weight:700; text-decoration:none; }

/* --- 1曲フィーチャー --- */
.xfmh{ display:flex; gap:20px; align-items:center; margin:14px 0 18px;
  border:1px solid var(--dz-line,#ddd); border-radius:14px; padding:18px;
  background:var(--dz-surface,#fff); }
.xfmh.ly-top{ flex-direction:column; text-align:center; }
.xfmh.ly-bg{ position:relative; overflow:hidden; color:#fff; border-color:#23283d; min-height:230px; }
.xfmh.ly-bg .xfmh-cv{ position:absolute; inset:0; width:100%; height:100%; }
.xfmh.ly-bg .xfmh-cv img,.xfmh.ly-bg .xfmh-cv svg{ width:100%; height:100%; object-fit:cover;
  filter:brightness(.5) saturate(1.1); }
.xfmh.ly-bg .xfmh-in{ position:relative; padding:6px 4px; }
.xfmh .xfmh-cv{ position:relative; flex:0 0 150px; width:150px; height:150px;
  border-radius:12px; overflow:hidden; background:#eceef4; }
.xfmh.ly-top .xfmh-cv{ width:190px; height:190px; }
.xfmh .xfmh-cv img,.xfmh .xfmh-cv svg{ width:100%; height:100%; object-fit:cover; display:block; }
.xfmh .xfmh-pl{ position:absolute; right:10px; bottom:10px; width:46px; height:46px;
  border-radius:50%; border:0; cursor:pointer; background:var(--dz-accent,#24486e);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.35); }
.xfmh .xfmh-pl .tri{ width:0; height:0; border-left:14px solid #fff;
  border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:3px; }
.xfmh.is-playing .xfmh-pl .tri{ border:0; width:12px; height:14px;
  border-left:4px solid #fff; border-right:4px solid #fff; margin:0; }
.xfmh h3{ margin:0 0 4px; font-size:20px; font-family:var(--serif,serif); letter-spacing:.05em; }
.xfmh .xfmh-sub{ margin:0 0 8px; font-size:12px; letter-spacing:.12em; color:var(--dz-muted,#888); }
.xfmh.ly-bg .xfmh-sub{ color:#cfd6ee; }
.xfmh .xfmh-rel{ margin:0; display:flex; gap:6px; flex-wrap:wrap; justify-content:inherit; }
.xfmh .xfmh-rel a{ font-size:10.5px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--dz-line,#ccc); color:var(--dz-muted,#666); text-decoration:none; }
.xfmh.ly-bg .xfmh-rel a{ border-color:rgba(255,255,255,.4); color:#e6eaff; }
@media(max-width:640px){ .xfmh{ flex-direction:column; text-align:center; } }

/* --- 曲カードグリッド --- */
.xfmg{ display:grid; gap:14px; margin:14px 0 18px; }
.xfmg.cols-2{ grid-template-columns:repeat(2,1fr); }
.xfmg.cols-3{ grid-template-columns:repeat(3,1fr); }
.xfmg.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:640px){ .xfmg{ grid-template-columns:repeat(2,1fr) !important; } }
.xfmg .xfmg-c b{ display:block; margin-top:8px; font-size:12.5px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xfmg .xfmg-cv{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#eceef4;
  border:1px solid var(--dz-line,#ddd); }
.xfmg.sh-square .xfmg-cv{ border-radius:4px; }
.xfmg.sh-round .xfmg-cv{ border-radius:14px; }
.xfmg.sh-circle .xfmg-cv{ border-radius:50%; }
.xfmg .xfmg-cv img,.xfmg .xfmg-cv svg{ width:100%; height:100%; object-fit:cover; display:block; }
.xfmg .xfmg-pl{ position:absolute; inset:auto 8px 8px auto; width:38px; height:38px;
  border-radius:50%; border:0; cursor:pointer; background:rgba(15,18,30,.72);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s; }
.xfmg.sh-circle .xfmg-pl{ inset:0; margin:auto; background:rgba(15,18,30,.55); }
.xfmg .xfmg-c:hover .xfmg-pl,.xfmg .xfmg-c.is-playing .xfmg-pl{ opacity:1; }
.xfmg .xfmg-pl .tri{ width:0; height:0; border-left:12px solid #fff;
  border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }
.xfmg .xfmg-c.is-playing .xfmg-pl .tri{ border:0; width:10px; height:12px;
  border-left:3.5px solid #fff; border-right:3.5px solid #fff; margin:0; }

/* --- 曲名ティッカー --- */
.xfmq{ overflow:hidden; margin:12px 0 16px; border-top:1px solid var(--dz-line,#ddd);
  border-bottom:1px solid var(--dz-line,#ddd); padding:9px 0; }
.xfmq .xfmq-t{ display:inline-flex; align-items:center; gap:16px; white-space:nowrap;
  animation:pu-flow linear infinite; will-change:transform; }
.xfmq a{ color:inherit; text-decoration:none; font-size:13px; letter-spacing:.1em; }
.xfmq a:hover{ color:var(--dz-accent,#24486e); }
.xfmq i{ font-style:normal; color:var(--dz-accent,#24486e); opacity:.7; }

/* --- 連載ショーケース --- */
.xfsc{ display:flex; gap:20px; align-items:center; margin:14px 0 18px;
  border:1px solid var(--dz-line,#ddd); border-radius:14px; padding:18px;
  background:var(--dz-surface,#fff); }
.xfsc .xfsc-cv{ flex:0 0 120px; border-radius:10px; overflow:hidden;
  box-shadow:0 8px 20px rgba(20,24,48,.16); }
.xfsc .xfsc-cv img{ width:100%; display:block; }
.xfsc h3{ margin:0 0 4px; font-size:19px; font-family:var(--serif,serif); }
.xfsc .xfsc-meta{ margin:0 0 10px; font-size:12px; color:var(--dz-muted,#888); letter-spacing:.08em; }
@media(max-width:560px){ .xfsc{ flex-direction:column; text-align:center; } }

/* --- 話数リスト --- */
.xfel{ margin:12px 0 18px; border:1px solid var(--dz-line,#ddd); border-radius:12px;
  overflow:hidden; background:var(--dz-surface,#fff); }
.xfel .xfel-h{ margin:0; padding:11px 14px; font-size:12px; letter-spacing:.16em;
  color:var(--dz-muted,#888); border-bottom:1px solid var(--dz-line,#eee); }
.xfel .xfel-r{ display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-top:1px solid var(--dz-line,#f0f0f0); text-decoration:none; color:inherit; }
.xfel .xfel-r:hover{ background:var(--dz-hover,#f6f7fb); }
.xfel .xfel-no{ flex:0 0 auto; font-size:11px; font-weight:700; color:var(--dz-accent,#24486e); }
.xfel b{ flex:1; min-width:0; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xfel .xfel-go{ color:var(--dz-muted,#aaa); }

/* --- バッジ列 --- */
.xfbd{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 16px; }
.xfbd .xfbd-c{ font-size:11.5px; letter-spacing:.06em; padding:6px 14px; border-radius:999px;
  border:1px solid var(--dz-line,#ccc); background:var(--dz-surface,#fff);
  color:var(--dz-text,#333); text-decoration:none; }
.xfbd a.xfbd-c:hover{ border-color:var(--dz-accent,#24486e); color:var(--dz-accent,#24486e); }

/* --- 2カラム文章 --- */
.xf2c{ display:grid; gap:22px; margin:14px 0 18px; font-size:13.5px; line-height:2; }
.xf2c.r-1-1{ grid-template-columns:1fr 1fr; }
.xf2c.r-2-1{ grid-template-columns:2fr 1fr; }
.xf2c.r-1-2{ grid-template-columns:1fr 2fr; }
@media(max-width:640px){ .xf2c{ grid-template-columns:1fr !important; } }

/* --- お知らせ帯 --- */
.xfnt{ display:flex; align-items:center; gap:10px; margin:12px 0 16px;
  padding:11px 16px; border-radius:10px; font-size:13px; text-decoration:none; color:inherit; }
.xfnt.tone-info{ background:#eef4fd; border:1px solid #c4d8f2; }
.xfnt.tone-gold{ background:#fdf6e4; border:1px solid #ebd9a6; }
.xfnt.tone-alert{ background:#fdf0f0; border:1px solid #eec3c3; }
.xfnt .xfnt-i{ flex:0 0 auto; }
.xfnt .xfnt-go{ margin-left:auto; color:var(--dz-accent,#24486e); }
a.xfnt:hover{ filter:brightness(.98); }

/* --- トップ下部：3カラム統一（Latest Posts / From the Shop） --- */
.of-grid.cols3x{ grid-template-columns:repeat(3,1fr) !important; }
@media (max-width:640px){ .of-grid.cols3x{ grid-template-columns:repeat(2,1fr) !important; } }
.pu-store-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:640px){ .pu-store-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.pu-store-grid .pu-item .cov{ position:relative; display:block; border-radius:10px; overflow:hidden;
  border:1px solid var(--dz-line,#ddd); aspect-ratio:3/4; background:#f2f3f7; }
.pu-store-grid .pu-item .cov img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 本編シリーズ・グリッドも3列固定（スマホ2列） */
.honpen-grid{ grid-template-columns:repeat(3,1fr) !important; }
@media (max-width:640px){ .honpen-grid{ grid-template-columns:repeat(2,1fr) !important; } }

/* ============================================================
   🎉 体感・あそびブロック
   ============================================================ */
/* ふる演出 */
.xffx{ position:relative; overflow:hidden; border-radius:14px; margin:14px 0 18px;
  background:linear-gradient(180deg,#0b1026,#1a2244); border:1px solid #262c48;
  display:flex; align-items:center; justify-content:center; }
.xffx.tone-day{ background:linear-gradient(180deg,#eef3fb,#dfe8f6); border-color:#c9d6ea; }
.xffx canvas{ position:absolute; inset:0; }
.xffx .xffx-in{ position:relative; text-align:center; color:#fff; padding:0 16px; }
.xffx.tone-day .xffx-in{ color:#22304a; }
.xffx b{ display:block; font-family:var(--serif,serif); font-size:24px; letter-spacing:.14em;
  text-shadow:0 2px 14px rgba(0,0,0,.4); }
.xffx.tone-day b{ text-shadow:none; }
.xffx span{ font-size:12px; letter-spacing:.2em; opacity:.85; }

/* 一曲ガチャ */
.xfgc{ margin:14px 0 18px; border:1px solid var(--dz-line,#ddd); border-radius:14px;
  padding:20px; background:var(--dz-surface,#fff); text-align:center; }
.xfgc .xfgc-head b{ display:block; font-size:18px; font-family:var(--serif,serif);
  letter-spacing:.08em; margin-bottom:12px; }
.xfgc .xfgc-card{ max-width:280px; margin:16px auto 0; opacity:0; transform:translateY(8px) scale(.96);
  transition:all .35s cubic-bezier(.2,.9,.3,1.2); }
.xfgc.has .xfgc-card{ opacity:1; transform:none; }
.xfgc.spin .xfgc-cv{ animation:xfgc-pop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes xfgc-pop{ 0%{transform:rotate(-6deg) scale(.7);} 60%{transform:rotate(3deg) scale(1.06);} 100%{transform:none;} }
.xfgc .xfgc-cv{ position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:linear-gradient(140deg,#1a2143,#0d1128); border:1px solid var(--dz-line,#ddd); }
.xfgc .xfgc-cv img{ width:100%; height:100%; object-fit:cover; }
.xfgc .xfgc-pl{ position:absolute; right:10px; bottom:10px; width:44px; height:44px; border-radius:50%;
  border:0; cursor:pointer; background:var(--dz-accent,#24486e); display:flex;
  align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.xfgc .xfgc-pl .tri{ width:0; height:0; border-left:13px solid #fff;
  border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }
.xfgc .xfgc-tt{ margin:10px 0 0; font-weight:700; font-size:14px; }

/* カウントダウン */
.xfcd{ margin:14px 0 18px; border-radius:14px; padding:24px 18px; text-align:center;
  background:linear-gradient(160deg,#101736,#070a18); color:#fff; border:1px solid #262c48; }
.xfcd.is-card{ background:var(--dz-surface,#fff); color:var(--dz-text,#222);
  border:1px solid var(--dz-line,#ddd); }
.xfcd .xfcd-h{ margin:0 0 12px; font-size:13px; letter-spacing:.3em; opacity:.85; }
.xfcd .xfcd-grid{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.xfcd .xfcd-grid span{ min-width:74px; }
.xfcd b{ display:block; font-size:34px; font-variant-numeric:tabular-nums; letter-spacing:.04em;
  font-family:var(--serif,serif); }
.xfcd i{ font-style:normal; font-size:10px; letter-spacing:.3em; opacity:.7; }
.xfcd .xfcd-done{ margin:6px 0 0; font-size:18px; font-family:var(--serif,serif); letter-spacing:.1em; }

/* タイプライター */
.xftw{ margin:14px 0 18px; text-align:center; font-family:var(--serif,serif);
  letter-spacing:.1em; min-height:1.8em; }
.xftw .xftw-c{ animation:blink 1s step-end infinite; color:var(--dz-accent,#24486e); }

/* おみくじ */
.xfom{ margin:14px 0 18px; border:1px dashed var(--dz-line,#ccc); border-radius:14px;
  padding:20px; text-align:center; background:var(--dz-surface,#fff); }
.xfom .xfom-h{ margin:0 0 10px; font-size:14px; letter-spacing:.24em; }
.xfom .xfom-r{ max-height:0; overflow:hidden; opacity:0; transition:all .4s ease; }
.xfom.drawn .xfom-r{ max-height:220px; opacity:1; margin-top:14px; }
.xfom .xfom-l{ display:inline-block; font-family:var(--serif,serif); font-size:30px;
  letter-spacing:.2em; color:var(--dz-accent,#24486e); animation:xfom-in .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes xfom-in{ from{transform:scale(.4) rotate(-8deg); opacity:0;} }
.xfom .xfom-t{ margin:8px auto 0; max-width:420px; font-size:13px; line-height:1.9; }

/* チルトカード */
.xftc{ display:block; margin:16px auto 20px; width:var(--w,60%); max-width:100%;
  perspective:800px; text-decoration:none; color:inherit; }
.xftc .xftc-in{ position:relative; border-radius:14px; overflow:hidden;
  transform-style:preserve-3d; transition:transform .18s ease;
  box-shadow:0 18px 44px rgba(15,18,40,.3); }
.xftc img{ width:100%; display:block; }
.xftc .xftc-g{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.28), transparent 55%); }
.xftc figcaption{ margin-top:8px; text-align:center; font-size:11.5px; color:var(--dz-muted,#777); }

/* 鐘 */
.xfbl{ margin:14px 0 18px; text-align:center; }
.xfbl button{ font:inherit; font-weight:700; letter-spacing:.08em; cursor:pointer;
  border:1px solid var(--dz-accent,#24486e); color:var(--dz-accent,#24486e);
  background:var(--dz-surface,#fff); border-radius:99px; padding:12px 28px; font-size:14px; }
.xfbl button:hover{ background:var(--dz-hover,#f2f4f9); }
.xfbl .xfbl-i{ display:inline-block; transform-origin:top center; }
.xfbl.ring .xfbl-i{ animation:xfbl-swing 1.6s ease; }
@keyframes xfbl-swing{ 15%{transform:rotate(24deg);} 35%{transform:rotate(-18deg);}
  55%{transform:rotate(10deg);} 75%{transform:rotate(-5deg);} }

/* ============================================================
   Pinterest型マソンリー・ギャラリー
   ============================================================ */
.xfm-mas{ display:flex; gap:12px; align-items:flex-start; }
.xfm-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.xfm-it{ display:block; border-radius:12px; overflow:hidden;
  background:var(--dz-surface,#fff); border:1px solid var(--dz-line,#e2e2e2);
  opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; }
.xfm-it.in{ opacity:1; transform:none; }
.xfm-it img{ width:100%; height:auto; display:block; }
.xfm-it:active img{ opacity:.85; }
@media(min-width:800px){ .xfm-it:hover img{ transform:scale(1.02); transition:transform .25s; } }
.xfm-more{ text-align:center; padding:22px 0 30px; color:var(--dz-muted,#888); font-size:12.5px;
  visibility:hidden; }
.xfm-more.on{ visibility:visible; }
.xfm-spin{ display:inline-block; width:14px; height:14px; border:2px solid var(--dz-line,#ccc);
  border-top-color:var(--dz-accent,#24486e); border-radius:50%; vertical-align:-2px;
  animation:xfm-rot .8s linear infinite; margin-right:6px; }
@keyframes xfm-rot{ to{ transform:rotate(360deg); } }
.xfm-end{ letter-spacing:.2em; }

/* 拡大ビューアは hidden 属性を最優先で尊重（開くまで完全非表示） */
.xfg-lb[hidden]{ display:none !important; }

/* ============================================================
   📣 広告・収益ブロック
   ============================================================ */
.xfad{ position:relative; margin:14px 0 18px; text-align:center; }
.xfad .xfad-pr{ position:absolute; top:-8px; left:8px; z-index:2; font-size:9px;
  letter-spacing:.18em; background:var(--dz-muted,#999); color:#fff;
  padding:2px 8px; border-radius:99px; }
.xfad .xfad-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.xfad .xfad-a{ display:block; border-radius:10px; overflow:hidden;
  border:1px solid var(--dz-line,#ddd); max-width:100%; }
.xfad .xfad-a img{ display:block; max-width:100%; height:auto; }
.xfad .sz-rect img{ width:300px; height:250px; object-fit:cover; }
.xfad .sz-banner img{ width:728px; max-width:100%; height:auto; aspect-ratio:728/90; object-fit:cover; }
.xfad .sz-mobile img{ width:320px; max-width:100%; aspect-ratio:320/100; object-fit:cover; }
.xfad-html{ display:inline-block; max-width:100%; }
.xfad-gg{ margin:14px 0 18px; min-height:50px; }

/* インフィード広告（記事カード擬態） */
.xfad-feed{ display:flex; gap:14px; align-items:center; margin:12px 0 16px;
  border:1px solid var(--dz-line,#ddd); border-radius:12px; padding:12px 14px;
  background:var(--dz-surface,#fff); text-decoration:none; color:inherit; }
.xfad-feed .th{ flex:0 0 96px; height:64px; border-radius:8px; overflow:hidden; background:#eee; }
.xfad-feed .th img{ width:100%; height:100%; object-fit:cover; display:block; }
.xfad-feed .tx b{ display:block; font-size:14px; margin-bottom:4px; }
.xfad-feed .tx i{ font-style:normal; font-size:10px; letter-spacing:.16em;
  color:var(--dz-muted,#999); border:1px solid var(--dz-line,#ddd);
  border-radius:99px; padding:1px 8px; }
.xfad-feed:hover{ background:var(--dz-hover,#f6f7fb); }

/* 追従バナー */
.xfad-stk{ position:fixed; left:50%; transform:translateX(-50%); bottom:8px; z-index:360;
  background:var(--dz-surface,#fff); border:1px solid var(--dz-line,#ccc);
  border-radius:12px; box-shadow:0 8px 26px rgba(10,12,24,.25); padding:4px; }
.xfad-stk.lift{ bottom:84px; }
.xfad-stk a img{ display:block; max-width:min(360px, 86vw); max-height:80px;
  border-radius:9px; }
.xfad-stk button{ position:absolute; top:-10px; right:-10px; width:24px; height:24px;
  border-radius:50%; border:1px solid var(--dz-line,#ccc); background:#fff;
  cursor:pointer; font-size:14px; line-height:1; color:#555; }


@media (max-width: 840px) {
    .pu-lib-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 14px;
    }
}
:root{
  --dz-bg:#000000; --dz-surface:#0a0a0a; --dz-hover:#1a1a1a;
  --dz-text:#ffffff; --dz-muted:#9a9a9a; --dz-line:#ffffff;
  --dz-accent:#ffffff; --dz-heading:#ffffff; --dz-button:#ffffff;
  --dz-bar-bg:#ffffff; --dz-bar-text:#000000;
  --dz-radius:0px; --dz-gap:24px;
  --yt-bg:var(--dz-bg); --yt-surface:var(--dz-surface); --yt-hover:var(--dz-hover);
  --yt-text:var(--dz-text); --yt-muted:var(--dz-muted); --yt-line:var(--dz-line);
}
/* ══ YouTube風レイヤー：フォント・余白・フラット化（全ページ一括） ══ */
body{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif !important;
  font-size:17px !important; line-height:1.6 !important;
  background-color:var(--dz-bg) !important; background-image:none !important;
  color:var(--dz-text) !important; letter-spacing:0 !important;
}
a{ color:var(--dz-accent); }
.layout{ gap:var(--dz-gap) !important; padding:var(--dz-gap) !important; }
.wrap{ padding:22px !important; }
/* 装飾の抑制：飾り罫・グラデ照り・レトロ影をフラットに */
.site-top{ background:var(--dz-surface) !important; border-bottom:1px solid var(--dz-line) !important; box-shadow:none !important; }
.site-top::before{ display:none !important; }
.site-top .sub::before,.site-top .sub::after{ content:"" !important; margin:0 !important; }
.site-top .logo a{ color:var(--dz-text) !important; letter-spacing:.02em !important; }
.site-top .counter{ border-radius:99px !important; }
.retro-nav{ background:var(--dz-surface) !important; border-bottom:1px solid var(--dz-line) !important; }
.retro-nav a{ border-radius:99px !important; border-color:transparent !important; color:var(--dz-text) !important; background:transparent !important; font-weight:500; }
.retro-nav a:hover{ background:var(--dz-hover) !important; color:var(--dz-text) !important; }
.retro-nav a.nav-on,.retro-nav a.nav-official,.retro-nav a.nav-post{ background:var(--dz-text) !important; color:var(--dz-surface) !important; }
.login-line{ background:var(--dz-bg) !important; border-bottom:1px solid var(--dz-line) !important; color:var(--dz-muted) !important; }
.ticker{  background:var(--dz-surface) !important; color:var(--dz-muted) !important; border-bottom:1px solid var(--dz-line) !important; }
.side-menu,.side-mini,.of-card,.card,.box,.panel{ border-radius:var(--dz-radius) !important; box-shadow:none !important; }
.btn,.rx-rbtn,.oz-more{ border-radius:99px !important; box-shadow:none !important; background:var(--dz-surface); }

img{ border:0; }
.fb-slot img{ border-radius:8px; }
.section-head h2,h1,h2,h3{ letter-spacing:.01em !important; }
hr{ border:none; border-top:1px solid var(--dz-line); }
input,select,textarea,button{ font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif !important; }
.site-footer{ background:var(--dz-surface) !important; color:var(--dz-muted) !important; border-top:1px solid var(--dz-line) !important; box-shadow:none !important; }
.site-footer a{ color:var(--dz-muted) !important; }
/* ══ 背景画像はファイル末尾で描画する（スキンより後に置くため） ══ */
/* ══ ブロック・スライドショー部品 ══ */
.blk-area{ margin:0 0 var(--dz-gap); }
.blk{ margin:0 0 12px; }
.blk-h{ margin:6px 0 10px; }
.blk-img img,.blk-banner img{ max-width:100%; height:auto; border-radius:var(--dz-radius); }
.blk-img figcaption{ font-size:12px; color:var(--dz-muted); margin-top:4px; }
.blk-btn{ display:inline-block; background:var(--dz-accent); color:#fff !important; text-decoration:none; font-weight:700; border-radius:99px; padding:10px 26px; }
.blk-btn:hover{ opacity:.9; }
.blk-video{ position:relative; width:100%; aspect-ratio:16/9; }
.blk-video iframe{ position:absolute; inset:0; width:100%; height:100%; border-radius:var(--dz-radius); }
.blk-hr{ border:none; border-top:1px solid var(--dz-line); margin:14px 0; }
.dz-slides{ position:relative; overflow:hidden; border-radius:var(--dz-radius); margin:0 0 var(--dz-gap); background:#000; }
.dz-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s; }
.dz-slide.on{ opacity:1; }
.dz-cap.ink-black{ color:#151515; text-shadow:0 1px 2px rgba(255,255,255,.8); background:linear-gradient(to top, rgba(255,255,255,.84), rgba(255,255,255,0)); }
.dz-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.dz-cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px; color:#fff; font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.6)); font-size:15px; }
.dz-dots{ position:absolute; bottom:8px; right:12px; display:flex; gap:6px; }
.dz-dots button{ width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.5); cursor:pointer; padding:0; }
.dz-dots button.on{ background:#fff; }
/* ══════════════════════════════════════════════════════════
   グローバルヘッダー / フッター（信頼・安心・コンパクト）
   ══════════════════════════════════════════════════════════ */
.gh{ position:sticky; top:0; z-index:120; background:var(--dz-surface);
  border-bottom:1px solid var(--dz-line);
  transition:box-shadow .25s ease, backdrop-filter .25s ease; }
.gh.scrolled{ box-shadow:0 1px 10px rgba(0,0,0,.08);
  background:color-mix(in srgb, var(--dz-surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); }
.gh-in{ display:flex; align-items:center; gap:10px; height:56px;
  max-width:1500px; margin:0 auto; padding:0 12px; }
/* バーガー（ドロワー起動）: 旧固定ボタンをバー内アイコンに変換 */
.gh .hb-btn{ position:static !important; width:40px; height:40px; border-radius:50%;
  background:transparent !important; border:none !important; box-shadow:none !important;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .18s ease; flex:none; }
.gh .hb-btn:hover{ background:var(--dz-hover) !important; }
.gh .hb-btn .hb-lines{ display:flex; flex-direction:column; gap:4px; width:18px; }
.gh .hb-btn .hb-lines i{ display:block; height:2px; border-radius:2px; background:var(--dz-text); transition:transform .2s; }
.gh-logo{ display:flex; align-items:center; text-decoration:none; flex:none; min-width:0; }
.gh-logo img{ max-height:34px; width:auto; display:block; }
.gh-logotype{ font-size:19px; font-weight:700; letter-spacing:.01em; color:var(--dz-text); white-space:nowrap; }
/* 検索（中央・フォーカスで広がる） */
.gh-search{ flex:1; max-width:560px; margin:0 auto; display:flex; height:38px; min-width:0; }
.gh-search input{ flex:1; min-width:0; border:1px solid var(--dz-line); border-right:none;
  border-radius:99px 0 0 99px; padding:0 16px; font-size:14px; background:var(--dz-surface);
  color:var(--dz-text); outline:none; transition:border-color .18s, box-shadow .18s; }
.gh-search input:focus{ border-color:var(--dz-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dz-accent) 16%, transparent); }
.gh-search button{ width:56px; border:1px solid var(--dz-line); border-radius:0 99px 99px 0;
  background:var(--dz-hover); color:var(--dz-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s; }
.gh-search button:hover{ background:var(--dz-line); color:var(--dz-text); }
/* 右側アクション */
.gh-actions{ display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
.gh-iconbtn{ width:40px; height:40px; border-radius:50%; border:none; background:transparent;
  color:var(--dz-text); display:none; align-items:center; justify-content:center; cursor:pointer;
  transition:background .18s; }
.gh-iconbtn:hover{ background:var(--dz-hover); }
.gh-pill{ display:flex; align-items:center; gap:7px; height:36px; padding:0 15px; border-radius:99px;
  text-decoration:none; font-size:13.5px; font-weight:600; color:var(--dz-text);
  background:var(--dz-hover); border:1px solid transparent;
  transition:transform .15s ease, background .18s, box-shadow .18s; }
.gh-pill:hover{ background:var(--dz-line); }
.gh-pill:active{ transform:scale(.96); }
.gh-pill.gh-outline{ background:transparent; border-color:var(--dz-line); color:var(--dz-accent); }
.gh-pill.gh-outline:hover{ background:color-mix(in srgb, var(--dz-accent) 8%, transparent); border-color:var(--dz-accent); }
.gh-pill.gh-accent{ background:var(--dz-accent); color:#fff; }
.gh-pill.gh-accent:hover{ box-shadow:0 3px 12px color-mix(in srgb, var(--dz-accent) 40%, transparent); }
/* チップナビ（横スクロール） */
.gh-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 12px 10px; max-width:1500px; margin:0 auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.gh-chips::-webkit-scrollbar{ display:none; }
.gh-chips a{ flex:none; padding:7px 14px; border-radius:8px; font-size:13.5px; font-weight:600;
  text-decoration:none; color:var(--dz-text); background:var(--dz-hover);
  transition:background .16s ease, color .16s ease, transform .15s ease; }
.gh-chips a:hover{ background:var(--dz-line); }
.gh-chips a:active{ transform:scale(.96); }
.gh-chips a.active{ background:var(--dz-text); color:var(--dz-surface); }
@media (max-width:720px){
  .gh-search{ display:none; }
  .gh-iconbtn{ display:flex; }
  .gh.search-open .gh-in > *:not(.gh-search){ display:none; }
  .gh.search-open .gh-search{ display:flex; margin:0; max-width:none; animation:ghSearchIn .22s ease; }
  .gh-pill span{ display:none; }
  .gh-pill{ width:40px; padding:0; justify-content:center; border-radius:50%; }
}
@keyframes ghSearchIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.ticker{ font-size:12px; }
/* ── フッター ── */
.gf{ background:var(--dz-surface); border-top:1px solid var(--dz-line); margin-top:28px;
  color:var(--dz-muted); font-size:13px; }
.gf-in{ max-width:1200px; margin:0 auto; padding:34px 18px 20px; }
.gf-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:26px; }
@media (max-width:820px){ .gf-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .gf-cols{ grid-template-columns:1fr; } }
.gf-logo{ font-size:18px; font-weight:700; color:var(--dz-text); text-decoration:none; }
.gf-logo img{ max-height:40px; width:auto; }
.gf-desc{ margin:10px 0 14px; line-height:1.9; }
.gf-sns{ display:flex; gap:10px; }
.gf-sns a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--dz-line);
  display:flex; align-items:center; justify-content:center; color:var(--dz-muted);
  transition:transform .18s ease, color .18s, border-color .18s, box-shadow .18s; }
.gf-sns a:hover{ color:var(--dz-text); border-color:var(--dz-text); transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(0,0,0,.08); }
.gf-col h3{ font-size:12px; letter-spacing:.08em; color:var(--dz-text); margin:4px 0 10px; }
.gf-col a{ display:block; color:var(--dz-muted); text-decoration:none; padding:5px 0;
  transition:color .15s, transform .15s; }
.gf-col a:hover{ color:var(--dz-accent); transform:translateX(3px); }
.gf-bottom{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between;
  border-top:1px solid var(--dz-line); margin-top:26px; padding-top:16px; font-size:11.5px; }
.gf-cnt{ font-variant-numeric:tabular-nums; }
/* トップへ戻る */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:110; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--dz-line); background:var(--dz-surface); color:var(--dz-text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .2s; box-shadow:0 2px 10px rgba(0,0,0,.10); }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ box-shadow:0 6px 16px rgba(0,0,0,.16); transform:translateY(-2px); }
/* 旧ハンバーガー既定(固定右上)の打ち消しは .gh .hb-btn で実施済み */
:root{ --dz-heading:#8f1d23; --dz-button:#c3272e; --dz-bar:#a8306f; }
h1,h2,h3,h4,h5,h6,.section-head h2{ color:var(--dz-heading) !important; }
/* 見出し②X風：極太・つまった字間・無装飾 */
h1,h2,h3,h4,h5,h6,.section-head h2{ font-weight:800 !important; letter-spacing:-.01em !important;
  border:none !important; background:none !important; padding-left:0 !important; }
/* vatican.css のCSS変数を白黒に再定義（黄の根絶・全ページ一括） */
:root{
  --v-white:#ffffff; --v-paper:var(--dz-surface); --v-cream:var(--dz-surface);
  --v-banana:var(--dz-hover); --v-yellow:var(--dz-hover); --v-gold:var(--dz-line);
  --v-deep:var(--dz-muted); --v-ink:var(--dz-text); --v-soft:var(--dz-muted);
  --v-muted:var(--dz-muted); --v-line:var(--dz-line); --v-red:var(--dz-text);
}
/* 十字オーナメント(✝/)の全滅 */
.side-title::before,.site-top .sub::before,.site-top .sub::after,
.retro-nav a.nav-official::before,.bar > span:first-child::before,
.official-zone .oz-head .oz-sub::before,.official-zone .oz-head .oz-sub::after,
.oz-head .oz-sub::after,.oz-head .oz-sub::before,
.hb-title::before,.section-head h2::before{ content:none !important; }
.official-zone .oz-head::before{ display:none !important; content:none !important; }
.official-zone .oz-head{ background-image:none !important; background:var(--dz-surface) !important; }
/* 破線・空欄ノートの白化 */
.empty-note{ background:var(--dz-surface) !important; border:1px dashed var(--dz-line) !important; color:var(--dz-muted) !important; }
/* セクション見出し帯: 白カード+左バー(可読・黒帯事故防止) */
.section-head{ background:var(--dz-surface) !important; border:1px solid var(--dz-line) !important;
  border-left:4px solid var(--dz-bar) !important; border-radius:10px !important; box-shadow:none !important; }
.section-head h2{ color:var(--dz-heading) !important; text-shadow:none !important; }
.section-head h2::before{ content:none !important; }
.section-head a,.section-head .more{ color:var(--dz-muted) !important; text-shadow:none !important; }
/* 旧オーナメント(†)装飾の無効化 */
.hz-logo::before,.hz-logo::after{ content:none !important; }
.hz-logo{ color:var(--dz-heading) !important; text-shadow:none !important; }
.hz-sub{ color:var(--dz-muted) !important; }
/* 見出し・区切りの「横棒」（旧・金の帯）を管理色に統一 */
.section-head{ border-bottom-color:var(--dz-bar) !important; }
.oz-head .oz-sub::after,.oz-head .oz-sub::before{ color:var(--dz-bar) !important; }
/* お知らせヒーローの黒グラデーション(不気味)を撤去 → 白の帯に */
.hs-cap{ background:color-mix(in srgb, var(--dz-surface) 92%, transparent) !important;
  color:var(--dz-text) !important; text-shadow:none !important;
  border-top:1px solid var(--dz-line); padding-top:12px !important; }
.hs-cap *{ color:var(--dz-text) !important; }
/* 検索サジェスト */
.gh-sug{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--dz-surface);
  border:1px solid var(--dz-line); border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.14);
  overflow:hidden; z-index:130; display:none; }
.gh-sug.on{ display:block; animation:ghSearchIn .16s ease; }
.gh-sug a{ display:flex; gap:10px; align-items:center; padding:10px 14px; text-decoration:none;
  color:var(--dz-text); font-size:13.5px; }
.gh-sug a:hover,.gh-sug a.sel{ background:var(--dz-hover); }
.gh-sug .k{ flex:none; font-size:10.5px; color:var(--dz-muted); border:1px solid var(--dz-line);
  border-radius:20px; padding:2px 9px; }
.gh-search{ position:relative; }
/* 空のサイドカラム（管理人にだけ薄い案内） */
.side-empty{ border:1px dashed var(--dz-line); border-radius:12px; padding:18px 10px;
  text-align:center; color:var(--dz-muted); font-size:11.5px; line-height:1.9; }
/* ボタン色（主要ボタンを一括） */
.btn,.rx-rbtn,.oz-more,.blk-btn,.gh-pill.gh-accent{
  background:var(--dz-button) !important; color:#fff !important;
  border-color:var(--dz-button) !important; background-image:none !important; }
.btn:hover,.rx-rbtn:hover,.oz-more:hover,.blk-btn:hover,.gh-pill.gh-accent:hover{
  background:var(--dz-button) !important; color:#fff !important; filter:brightness(1.35); }

:root{ --hb-bg:#ffffff; --hb-text:#3f1a34; --hb-muted:#7a4062;
       --hb-hover:#fef5ec; --hb-active:#a8306f; }
/* 共通：骨組み（vatican.css の旧装飾を全上書き） */
.hb-drawer{ position:fixed; inset:0; z-index:200; pointer-events:none;
  visibility:hidden; transition:visibility 0s .32s; } /* v3.6：閉時は完全非表示（開きっぱなし不具合の根本ガード） */
.hb-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0;
  transition:opacity .28s ease; }
html.hb-open .hb-drawer{ pointer-events:auto; visibility:visible; transition:visibility 0s 0s; }
html.hb-open .hb-scrim{ opacity:1; }
html.hb-open{ overflow:hidden; }
.hb-panel{ position:absolute; background:var(--hb-bg) !important; color:var(--hb-text) !important;
  overflow-y:auto; -webkit-overflow-scrolling:touch; border:none !important; box-shadow:none; }
.hb-crest{ position:sticky; top:0; z-index:2; background:var(--hb-bg);
  padding:16px 18px 12px; border-bottom:1px solid var(--hb-hover); text-align:left !important; }
.hb-title{ font-size:17px; font-weight:700; color:var(--hb-text) !important; letter-spacing:.01em; }
.hb-sub{ font-size:11px; color:var(--hb-muted) !important; margin-top:2px; }
.hb-x{ position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%;
  border:none !important; background:transparent !important; color:var(--hb-text) !important;
  font-size:21px; cursor:pointer; transition:background .18s; }
.hb-x:hover{ background:var(--hb-hover) !important; }
.hb-sec{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--hb-muted) !important;
  padding:16px 18px 6px; background:none !important; border:none !important; }
.hb-links{ padding:0 8px; }
.hb-link{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:10px;
  text-decoration:none !important; color:var(--hb-text) !important; background:none !important;
  border:none !important; transition:background .16s ease, transform .12s ease; }
.hb-link:hover{ background:var(--hb-hover) !important; }
.hb-link:active{ transform:scale(.98); }
.hb-link.active{ background:color-mix(in srgb, var(--hb-active) 12%, transparent) !important;
  color:var(--hb-active) !important; font-weight:700; }
.hb-link.active .hb-li svg{ fill:var(--hb-active); stroke:var(--hb-active); }
.hb-li{ flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.hb-li svg{ width:20px; height:20px; fill:currentColor; }
.hb-lt{ font-size:14px; line-height:1.35; }
.hb-lt small{ display:block; font-size:10.5px; color:var(--hb-muted); font-weight:400; }
.hb-login{ display:block; margin:6px 14px; padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--hb-active) 10%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--hb-active) 30%, transparent) !important;
  text-decoration:none !important; transition:background .18s; }
.hb-login:hover{ background:color-mix(in srgb, var(--hb-active) 18%, transparent) !important; }
.hb-login-t{ display:block; font-weight:700; color:var(--hb-active) !important; font-size:13.5px; }
.hb-login-d{ display:block; font-size:11px; color:var(--hb-muted) !important; margin-top:2px; }
.hb-ext{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 26px; }
.hb-ext a{ font-size:12px; font-weight:600; color:var(--hb-muted) !important; text-decoration:none;
  border:1px solid var(--hb-hover); border-radius:99px; padding:6px 13px;
  transition:color .16s, border-color .16s, background .16s; background:var(--hb-bg); }
.hb-ext a:hover{ color:var(--hb-active) !important; border-color:var(--hb-active); }
/* 型①② 左スライド（YouTube風／ダークは色だけ変更） */
.hb-panel{ top:0; bottom:0; left:0; width:min(310px, 86vw);
  border-radius:0 16px 16px 0 !important; transform:translateX(-102%);
  transition:transform .28s cubic-bezier(.32,.72,.25,1); box-shadow:6px 0 30px rgba(0,0,0,.16); }
html.hb-open .hb-panel{ transform:none; }

/* ══ アニメーション（スクロールでふわっと出現・管理画面から3段階） ══ */
.rv{ opacity:0; transform:translateY(22px); 
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,.7,.3,1); }
.rv.rv-fade{ transform:none; }
.rv.rv-zoom{ transform:scale(.94); }
.rv.in{ opacity:1; transform:none; }
.rv:nth-child(1){ transition-delay:0ms; }
.rv:nth-child(2){ transition-delay:90ms; }
.rv:nth-child(3){ transition-delay:180ms; }
.rv:nth-child(4){ transition-delay:270ms; }
.rv:nth-child(5){ transition-delay:360ms; }
.rv:nth-child(6){ transition-delay:450ms; }
.section-head,.blk-img img,.blk-banner img,.sr-item,.of-card,.admsec{ transition:transform .25s ease, box-shadow .25s ease; }
.blk-img img:hover,.blk-banner img:hover{ transform:translateY(-3px) scale(1.01); box-shadow:0 10px 26px rgba(0,0,0,.14); }
.sr-item:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1 !important; transform:none !important; transition:none !important; } }
.bar, .official-bar{
  display:flex; align-items:center; gap:6px;
  background:#a31f26 !important; background-image:none !important;
  color:#fdf4e2 !important; text-shadow:none !important;
  border:none !important; box-shadow:none !important; border-radius:99px !important; padding:8px 18px !important;
}
.bar a, .official-bar a, .bar .more, .official-bar .more{ color:#fdf4e2 !important; }
.bar .more::after, .official-bar .more::after{ color:#fdf4e2 !important; }
.bar > span:first-child::before, .official-bar > span:first-child::before{
  content:"" !important; display:inline-block; width:1.5em; height:1.5em; margin-right:.45em;
  vertical-align:-.4em; background:url("uploads/img/20260801142553a65a8c.jpg") center/contain no-repeat;
}
/* ══ プラグインエリア：自由CSS ══ */
/* ========================================
   .tw-main
   すべての文字を白に統一
======================================== */

html body .tw-main,
html body .tw-main *,
html body .tw-main a,
html body .tw-main a *,
html body .tw-main span,
html body .tw-main span *,
html body .tw-main p,
html body .tw-main p *,
html body .tw-main strong,
html body .tw-main strong *,
html body .tw-main b,
html body .tw-main b *,
html body .tw-main em,
html body .tw-main i,
html body .tw-main small,
html body .tw-main label,
html body .tw-main h1,
html body .tw-main h2,
html body .tw-main h3,
html body .tw-main h4,
html body .tw-main h5,
html body .tw-main h6,
html body .tw-main li,
html body .tw-main dt,
html body .tw-main dd,
html body .tw-main th,
html body .tw-main td,
html body .tw-main blockquote,
html body .tw-main figcaption {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   追補：タグの黒つぶれ・ヒーローのグラデ・案内枠の色
   ═══════════════════════════════════════════════════════════ */

/* タグの入れ物には地を塗らない（子だけ塗る） */
html body .tag-row:not(#_),
html body .c-tagcloud:not(#_),
html body .c-genres:not(#_){
  background: transparent !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}


/* ── ① タグ・展示番号プレートが黒地に黒文字で消える ──
   要素側が color:#fff を !important 無しで書いているため、
   スキンの一括指定に負けて中身が沈む。地ごと塗り直す。 */
html body a[class*="tag"]:not(#_),
html body span[class*="tag"]:not(#_),
html body button[class*="tag"]:not(#_),
html body a[class*="tag"]:not(#_) *,
html body span[class*="tag"]:not(#_) *,
html body .ptag:not(#_), html body .ptag:not(#_) *,
html body .cue-no:not(#_), html body .cue-no:not(#_) *,
html body .c-badge:not(#_), html body .c-badge:not(#_) *,
html body .mc-kind:not(#_), html body .mc-kind:not(#_) *,
html body .ca2-kind:not(#_), html body .ca2-kind:not(#_) *{
  background: var(--k-ink) !important;
  color: var(--k-acc) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* 選択中のタグだけは反転させて、押した状態が分かるように */
html body a[class*="tag"].on:not(#_),
html body a[class*="tag"].active:not(#_),
html body .c-genres a.on:not(#_),
html body .c-tagcloud a.on:not(#_){
  background: var(--k-acc) !important;
  color: var(--k-ink) !important;
  border: 2px solid var(--k-ink) !important;
}


/* 表紙の上に重なる小さな番号プレート */
html body .cov [class*="no"]:not(#_),
html body .cov [class*="plate"]:not(#_),
html body [class*="card"] > [class*="no"]:not(#_){
  background: var(--k-ink) !important;
  color: var(--k-acc) !important;
  border-radius: 999px !important;
  padding: 2px 12px !important;
  font-weight: 900 !important;
  font-size: 11px !important;
}

/* ── ② ヒーロー：黒一色・黄色い縁取りなし ── */

html body .xfin:not(#_),
html body .xfin-in:not(#_),
html body [class*="hero"] [style*="linear-gradient"]:not(#_),
html body .blk-html [style*="linear-gradient"]:not(#_) {
  background-image: none !important;
  background: var(--k-ink, #111) !important;
}

/* ヒーロー内の文字 */
html body .xfin:not(#_) *,
html body .xfin-in:not(#_) *,
html body [class*="hero"] [style*="linear-gradient"]:not(#_) * {
  color: #fff !important;
}

/* ヒーロー内のラベル */
html body .xfin-tag:not(#_),
html body [class*="hero"] [class*="tag"]:not(#_) {
  background: transparent !important;
  color: var(--k-acc, #ffe44d) !important;

  /* 黄色い枠を完全に削除 */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  border-radius: 999px !important;
}

/* ── ③ 案内枠（notice）の淡い青を、この配色に合わせる ── */
html body .blk-notice:not(#_),
html body [class*="notice"]:not(#_){
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
  border: 3px solid var(--k-ink) !important;
  border-radius: 0 !important;
}
html body [class*="notice"]:not(#_) *{ color: var(--k-ink) !important; }
html body [class*="notice"]:not(#_) a{
  box-shadow: inset 0 -.14em 0 var(--k-acc) !important;
}

@media (max-width: 768px) {
  .pu-reader-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px;
    margin: 18px 0;
    padding: 12px 0;
    overflow: hidden;
  }

  .pu-reader-nav > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pu-reader-nav a,
  .pu-reader-nav button {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   KIBOJO ─ 自由CSS（整理版 v2）
   管理室 > デザイン管理 > ④ スクリプト・自由CSS/JS に、全部置き換えて貼る
   -------------------------------------------------------------------
   色を変えるときは、下の --k-acc を1行差し替えるだけで全体が動きます。
     黄 #ffe000 ／ 緑 #00d26a ／ 桃 #ff4fa3 ／ 赤 #ff3b30 ／ 青 #00b0ff
   -------------------------------------------------------------------
   v2 の変更
     ・表を黒く塗るのをやめた（ログイン等のフォームが表組みのため、
       ラベル列が黒地に黒文字で消えていた）
     ・入力欄・選択欄の枠と大きさを明示（薄くて見えなかった）
     ・カートの中のアイコンまで黒く塗っていたのを修正
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --k-ink:   #000000;   /* 黒：濃いブロックの地・文字 */
  --k-acc:   #ffe000;   /* 配色の色：黒の上に置く文字・強調 */
  --k-paper: #ffffff;   /* 白：紙面 */
}


/* ═══ 1. 基本の文字組み ════════════════════════════════════════ */

a{ color: var(--acc); text-underline-offset: 3px; }
a:hover{ background: var(--bg); }
blockquote{ border-left: 4px solid var(--line); color: var(--muted); padding-left: 1em; }
hr{ border: 0; border-top: 1px solid var(--line); }


/* ═══ 2. ヘッダー ══════════════════════════════════════════════ */

#gh::before{ content: none !important; animation: none !important; }
.gh-top{ background: var(--k-paper) !important; }

/* 選択中のボタンが白地に白文字になる不具合の修正。
   #gh を含めないと ID を持つルールに詳細度で負ける。 */
html body #gh .gh-chips a.active,
html body #gh .gh-chips a.active *,
html body .gh .gh-chips a.active,
html body .gh .gh-chips a.active *{
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-paper) !important;
}
html body #gh .gh-chips a.active svg{ fill: currentColor !important; }


/* ═══ 3. 見出し帯の飾りを消す ══════════════════════════════════ */

.bar::after,
.official-bar::after,
.pu-sec h2::after,
.section-head h2::after,
.gf::after{ display: none !important; }


/* ═══ 4. 濃い地の上にあるヒーロー ══════════════════════════════
   見出しを白にするのは「暗い地の上」だけに限定する。
   全体に h1〜h4 を白くすると、黄色の紙面で本文見出しが消える。 */

.xfgh .xfgh-tag,
.xfgh .xfgh-tt,
.xfgh .xfgh-sub,
.zk-hero h1{
  color: var(--k-paper) !important;
}
.zk-hero h1{
  margin: 0 0 8px;
  font-size: clamp(22px, 4.4vw, 34px);
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.xfgh .xfgh-btns .pu-btn{ color: var(--k-paper) !important; }
.xfgh .xfgh-btns .pu-btn.ghost{
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
}
.zk-ticket .zk-hero .zk-eyebrow{
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
  border: 1.5px dashed rgba(0,0,0,.25) !important;
}


/* ═══ 5. ボタン ════════════════════════════════════════════════
   「全部白文字」にすると白いボタンの文字が消える。
   塗りの濃さで文字色を分ける。 */

/* 5-1 黒で塗るボタン → 文字は配色の色 */
html body a.pu-btn,
html body a.pu-btn *,
html body .pu-btn:not(.ghost):not(.danger),
html body .pu-btn:not(.ghost):not(.danger) *,
html body .ryf-send button,
html body .ryf-send button *{
  background: var(--k-ink) !important;
  color: var(--k-acc) !important;
  border: 3px solid var(--k-ink) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  box-shadow: none !important;
}
html body .ryf-send button{ font-size: 15px !important; padding: 15px 44px !important; }
html body a.pu-btn{ padding: 13px 30px !important; }

html body a.pu-btn:hover,
html body .pu-btn:not(.ghost):not(.danger):hover,
html body .ryf-send button:hover{
  background: var(--k-ink) !important;
  color: var(--k-acc) !important;
  transform: translate(-2px,-2px) !important;
  box-shadow: 5px 5px 0 var(--k-paper) !important;
}

/* 5-2 白で塗るボタン → 文字は黒 */
html body .pu-btn.ghost,
html body .pu-btn.ghost *{
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
  border: 3px solid var(--k-ink) !important;
}
html body .pu-btn.danger,
html body .pu-btn.danger *{
  background: var(--k-acc) !important;
  color: var(--k-ink) !important;
  border: 3px dashed var(--k-ink) !important;
}

/* 5-3 EC のボタン → 配色の色で塗り、文字は黒 */
html body .ec-add,
html body .ec-add *,
html body .ec-btn,
html body .ec-btn *{
  background: var(--k-acc) !important;
  color: var(--k-ink) !important;
  border: 3px solid var(--k-ink) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* 5-4 ボタン内のアイコンは文字色に追従させる */
html body .btn svg,
html body .pu-btn svg,
html body .blk-btn svg,
html body .ec-btn svg,
html body .to-top svg{ fill: currentColor !important; }


/* ═══ 6. FAQ アコーディオン（.hc-faq）══════════════════════════ */

html body .hc-faq details{
  background: var(--k-paper) !important;
  border: 3px solid var(--k-ink) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
}
html body .hc-faq summary{
  list-style: none !important;
  position: relative !important;
  padding: 15px 52px 15px 18px !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  color: var(--k-ink) !important;
  cursor: pointer !important;
}
html body .hc-faq summary::-webkit-details-marker{ display: none !important; }

/* ＋ は擬似要素の背景で描く。フォント依存を避けるため。 */
html body .hc-faq summary::after{
  content: "" !important;
  position: absolute !important;
  right: 14px !important; top: 50% !important;
  width: 26px !important; height: 26px !important;
  margin-top: -13px !important;
  border-radius: 50% !important;
  background:
    linear-gradient(var(--k-acc),var(--k-acc)) center/12px 3px no-repeat,
    linear-gradient(var(--k-acc),var(--k-acc)) center/3px 12px no-repeat,
    var(--k-ink) !important;
}
html body .hc-faq details[open] summary::after{
  background:
    linear-gradient(var(--k-acc),var(--k-acc)) center/12px 3px no-repeat,
    var(--k-ink) !important;
}
html body .hc-faq details[open] summary{
  background: var(--k-acc) !important;
  border-bottom: 3px solid var(--k-ink) !important;
}
html body .hc-faq p{
  margin: 0 !important;
  padding: 15px 18px !important;
  color: var(--k-ink) !important;
  font-weight: 700 !important;
}


/* ═══ 7. 表 ════════════════════════════════════════════════════
   このサイトはログインなどのフォームを表組みで作っているため、
   表全体を黒く塗るとラベル列が黒地に黒文字で消える。
   紙は白のまま、見出しセルだけ黒く塗る。 */

html body table{
  background: var(--k-paper) !important;
  border: 3px solid var(--k-ink) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html body table th{
  background: var(--k-ink) !important;
  border-bottom: 2px solid var(--k-ink) !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
  padding: 12px 15px !important;
}
html body table th,
html body table th *{ color: var(--k-acc) !important; }

html body table td{
  background: var(--k-paper) !important;
  border-bottom: 2px solid var(--k-ink) !important;
  padding: 12px 15px !important;
}
html body table td,
html body table td *{ color: var(--k-ink) !important; }
html body table tr:last-child th,
html body table tr:last-child td{ border-bottom: 0 !important; }


/* ═══ 8. 入力欄 ════════════════════════════════════════════════
   枠が薄くて見えなかったので、黒の太枠で明示する。 */

html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"],
html body input[type="url"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="date"],
html body textarea,
html body select{
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
  border: 3px solid var(--k-ink) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 16px !important;      /* スマホで勝手に拡大されないよう16px以上 */
  padding: 12px 14px !important;
  box-shadow: none !important;
}
html body input:focus,
html body textarea:focus,
html body select:focus{
  outline: 3px solid var(--k-ink) !important;
  outline-offset: 2px !important;
}
html body ::placeholder{ color: rgba(0,0,0,.45) !important; font-weight: 700 !important; }

/* 表の中の入力欄は、セル幅いっぱいに伸ばす */
html body table input[type="text"],
html body table input[type="email"],
html body table input[type="password"],
html body table textarea,
html body table select{ width: 100% !important; box-sizing: border-box !important; }

html body label{ font-weight: 900 !important; color: var(--k-ink) !important; }
html body input[type="checkbox"],
html body input[type="radio"]{ accent-color: var(--k-ink) !important; }


/* ═══ 9. カード ════════════════════════════════════════════════ */

.xfcd{
  margin: 14px 0 18px;
  padding: 24px 18px;
  border: 3px solid var(--k-ink);
  border-radius: 0;
  text-align: center;
  background: var(--k-paper) !important;
}
.xfcd *{ color: var(--k-ink) !important; background: transparent !important; }

.ca2{ background: var(--k-paper) !important; }
.ec-hero{ background: var(--k-paper) !important; }
.hcb-b{ --hcbc: var(--k-paper) !important; --hcbi: var(--k-paper) !important; }


/* ═══ 10. スマホ：固定要素の重なりを解消 ═══════════════════════
   下部ナビ .holy-appnav は 58px ＋ セーフエリア。
   上へ戻る → ナビのすぐ上／カート → さらに1段上、と段違いにする。 */

@media (max-width: 900px){
  html body .to-top{
    right: 14px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    z-index: 9985 !important;
  }
  html body .ec-fab,
  html body .cart-fab{
    right: 14px !important;
    bottom: calc(130px + env(safe-area-inset-bottom)) !important;
    z-index: 9985 !important;
  }
  html body .xf-bgmfix{
    left: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    z-index: 9985 !important;
    max-width: calc(100vw - 92px) !important;
  }

  /* 中央の「＋投稿」。白い丸に黄色い＋だと見えないので、
     配色の色の丸に黒い＋にする。 */
  html body .holy-an-post svg{
    background: var(--k-acc) !important;
    color: var(--k-ink) !important;
    fill: currentColor !important;
    stroke: none !important;
    border: 3px solid var(--k-ink) !important;
    box-shadow: none !important;
  }
  html body .holy-an-post svg *{ fill: currentColor !important; stroke: none !important; }
  html body .holy-an-post span{ color: var(--k-ink) !important; }
}

/* ═══ 11. ショップのカートボタン ═══════════════════════════════
   丸は黒のまま、中のカートマークだけ白にする。
   中の要素に background を指定するとマークを塗りつぶすので、
   地は外側だけ、中には色（currentColor）だけを渡す。 */

html body .ec-fab:not(#_),
html body .cart-fab:not(#_) .cart-tab{
  background: var(--k-ink) !important;
  color: #ffffff !important;
  border: 3px solid var(--k-ink) !important;
  box-shadow: none !important;
}
html body .ec-fab:not(#_) *,
html body .cart-fab:not(#_) .cart-tab *{
  background: transparent !important;
  color: #ffffff !important;
}

/* 塗りの図形は塗り、線の図形は線だけ、それぞれ白に追従させる */
html body .ec-fab:not(#_) svg,
html body .cart-fab:not(#_) svg{ fill: currentColor !important; }
html body .ec-fab:not(#_) svg [fill="none"],
html body .cart-fab:not(#_) svg [fill="none"]{ fill: none !important; }
html body .ec-fab:not(#_) svg [stroke],
html body .cart-fab:not(#_) svg [stroke]{ stroke: currentColor !important; }

/* 個数バッジが付く場合は反転させて読めるように */
html body .ec-fab:not(#_) .ec-fab-n,
html body .ec-fab:not(#_) [class*="count"],
html body .ec-fab:not(#_) [class*="badge"]{
  background: #ffffff !important;
  color: var(--k-ink) !important;
}


/* ═══ 12. 非表示 ═══════════════════════════════════════════════ */

.kg-zoom{ display: none !important; }
body.has-xfplayer .xfp-bar{ display: none !important; }

@media (max-width: 1260px){
  .xfp-bar{ right: 10px; left: auto; bottom: 510px; }
}

/* ═══ 7. 表とフォーム ══════════════════════════════════════════
   自由CSSはスキンより先に出力されるため、同じ強さではスキンに負ける。
   :not(#_) で詳細度をID相当まで上げ、順序に関係なく勝たせる。
   ラベル列は黒く塗らない（黒地に黒文字で消えるため）。 */

html body table:not(#_){
  background: var(--k-paper) !important;
  border: 3px solid var(--k-ink) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ラベル列：配色の色に黒文字。黒で塗ると中身が消える */
html body table th:not(#_),
html body table th:not(#_) *{
  background: var(--k-acc) !important;
  color: var(--k-ink) !important;
  font-weight: 900 !important;
}
html body table th:not(#_){
  text-align: left !important;
  padding: 12px 15px !important;
  border-bottom: 3px solid var(--k-ink) !important;
}

/* 入力列：白に黒文字 */
html body table td:not(#_),
html body table td:not(#_) *{
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
}
html body table td:not(#_){
  padding: 12px 15px !important;
  border-bottom: 3px solid var(--k-ink) !important;
}

/* セル内のラベルはセルの地を活かす */
html body table label:not(#_){
  background: transparent !important;
  color: inherit !important;
}


/* ═══ 8. 入力欄 ════════════════════════════════════════════════ */

html body input[type="text"]:not(#_),
html body input[type="email"]:not(#_),
html body input[type="password"]:not(#_),
html body input[type="search"]:not(#_),
html body input[type="url"]:not(#_),
html body input[type="tel"]:not(#_),
html body input[type="number"]:not(#_),
html body input[type="date"]:not(#_),
html body textarea:not(#_),
html body select:not(#_){
  background: var(--k-paper) !important;
  color: var(--k-ink) !important;
  border: 3px solid var(--k-ink) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
html body table input:not(#_),
html body table textarea:not(#_),
html body table select:not(#_){
  width: 100% !important;
  box-sizing: border-box !important;
}
html body input:focus:not(#_),
html body textarea:focus:not(#_),
html body select:focus:not(#_){
  outline: 3px solid var(--k-ink) !important;
  outline-offset: 2px !important;
}
html body ::placeholder{ color: rgba(0,0,0,.45) !important; font-weight: 700 !important; }
html body label:not(#_){ font-weight: 900 !important; }
html body input[type="checkbox"]:not(#_),
html body input[type="radio"]:not(#_){ accent-color: var(--k-ink) !important; }


html body .xfgh-btns .pu-btn:first-child,
html body .xfgh-btns .pu-btn:first-child * {
  background: #ffffff !important;
  color: #000000 !important;
}




/* ═══ 検索候補：ヘッダーの白文字指定から切り離す ═══════════════
   #gh * が (1,0,2) なので、#gh を含めて上回る必要がある。 */
html body #gh .gh-sug,
html body #gh .gh-sug *,
html body .gh .gh-sug,
html body .gh .gh-sug *{
  color: var(--k-ink) !important;
}
html body #gh .gh-sug{
  background: var(--k-paper) !important;
  border: 3px solid var(--k-ink) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.25) !important;
  overflow: hidden !important;
}
html body #gh .gh-sug a{
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid var(--k-ink) !important;
}
html body #gh .gh-sug a:last-child{ border-bottom: 0 !important; }
html body #gh .gh-sug a:hover,
html body #gh .gh-sug a.sel{ background: var(--k-acc) !important; }
html body #gh .gh-sug .k{
  background: var(--k-ink) !important;
  color: var(--k-acc) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  flex: none !important;
}
html body #gh .gh-sug .tt{ font-weight: 900 !important; }
html body #gh .gh-sug .gh-sug-im{
  flex: none !important;
  width: 40px !important; height: 40px !important;
  object-fit: cover !important;
  border: 2px solid var(--k-ink) !important;
  background: var(--k-paper) !important;
}

/* ═══ ハンバーガーメニュー ═════════════════════════════════════ */
@media (max-width: 1080px){
  html body .hb-btn:not(#_){
    background: var(--k-paper) !important;
    background-image: none !important;
    border: 3px solid var(--k-ink) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }
  /* 3本線は color ではなく background で描かれている */
  html body .hb-btn:not(#_) .hb-lines i{
    background: var(--k-ink) !important;
    height: 3px !important;
  }
  html body .hb-open .hb-btn:not(#_){
    background: var(--k-ink) !important;
    border-radius: 12px !important;
  }
  html body .hb-open .hb-btn:not(#_) .hb-lines i{ background: var(--k-acc) !important; }

  /* ドロワー本体 */
  html body .hb-panel:not(#_){
    background: var(--k-paper) !important;
    background-image: none !important;
    border-right: 5px solid var(--k-ink) !important;
    box-shadow: none !important;
  }
  html body .hb-panel:not(#_) *{ color: var(--k-ink) !important; }
  html body .hb-panel:not(#_) a{
    border-bottom: 2px solid var(--k-ink) !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }
  html body .hb-panel:not(#_) a:hover{ background: var(--k-acc) !important; }
  html body .hb-scrim:not(#_){ background: rgba(0,0,0,.55) !important; }
}

.tk-play{
  width:72px;
  height:72px;
  border-radius:50%;
  flex:none;
  cursor:pointer;
  border:none;

  /* ボタンを黒に */
  background:#000 !important;

  /* SVGを白に */
  color:#fff !important;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* SVG本体 */
.tk-play svg{
  width:28px;
  height:28px;
  color:#fff !important;
  fill:#fff !important;
  stroke:#fff !important;
}

/* SVG内のpathなども白 */
.tk-play svg path,
.tk-play svg polygon,
.tk-play svg circle{
  fill:#fff !important;
  stroke:#fff !important;
}





/* ✦ Stella AI start */
a { color: var(--acc); text-underline-offset: 3px; }
a:hover { background: var(--bg); }
blockquote { border-left: 4px solid var(--line); color: var(--muted); padding-left: 1em; }
hr { border: 0; border-top: 1px solid var(--line); }
/* ✦ Stella AI end */

#gh::before{content:none !important; animation:none !important;}

/* ヒーロー（.xfgh）のテキストとボタン文字だけ白に */
.xfgh .xfgh-tag,
.xfgh .xfgh-tt,
.xfgh .xfgh-sub{
  color:#fff !important;
}
.xfgh .xfgh-btns .pu-btn,
.xfgh .xfgh-btns .pu-btn.ghost{
  color:#fff !important;
}

.xfgh .xfgh-btns .pu-btn.ghost{
  color:#000000 !important;
}


.bar::after, .official-bar::after, .pu-sec h2::after, .section-head h2::after{
display: none;
}





@media (max-width: 900px) {

  /* 投稿ボタン本体 */
  html body .holy-an-post {
    background: #fff !important;
    color: #ffe000 !important;
   
    box-shadow: none !important;
  }

  /* SVG本体 */
  html body .holy-an-post svg {
    background: #fff !important;
    color: #ffe000 !important;
    fill: #ffe000 !important;
    stroke: #ffe000 !important;
    box-shadow: none !important;
  }

  /* SVG内部 */
  html body .holy-an-post svg * {
    fill: #ffe000 !important;
    stroke: #ffe000 !important;
  }

}




/* ═══════════════════════════════════════════════════════════
   HERO：読みやすいダークオリーブ仕様
   ═══════════════════════════════════════════════════════════ */

/* Hero本体 */
html body .zk-hero {
  position: relative !important;
  overflow: hidden !important;

  /* 黒一色ではなく、深いオリーブから黒へ */
  background:
    linear-gradient(
      110deg,
      #5f5600 0%,
      #3e3b00 42%,
      #181800 72%,
      #080808 100%
    ) !important;

  color: #fff !important;
  padding: 34px 26px 30px !important;
}

/* うっすらした光をHero右側に入れる */
html body .zk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.07) 24%,
      transparent 55%
    ) !important;
}

/* Heroの中身を前面へ */
html body .zk-hero > * {
  position: relative;
  z-index: 1;
}

/* 英字小見出し */
html body .zk-hero p:first-child {
  color: #f6df70 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
}

/* メインタイトル */
html body .zk-hero h1 {
  color: #ffffff !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,.65),
    0 1px 2px rgba(0,0,0,.9) !important;
}

/* 説明文 */
html body .zk-hero p {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.75) !important;
}

/* Hero内の小さなラベル */
html body .zk-hero .zk-ticket {
  background: rgba(0,0,0,.22) !important;
  color: #ffe878 !important;
  border: 2px solid #ffe878 !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

html body .zk-filter a.on {
  background: var(--k-ink, #111) !important;
  color: var(--k-acc, #ffe44d) !important;
  border-color: var(--k-ink, #111) !important;
  font-weight: 900 !important;
}

html body .zk-filter a.on * {
  color: var(--k-acc, #ffe44d) !important;
}









/* ========================================
   保存・登録ボタン 色反転防止
======================================== */

/* 保存ボタン */
button[type="submit"],
button.save,
button.save-btn,
.btn-save,
.save-button,
input[type="submit"] {
  color: #fff !important;
  background: #111 !important;
  border-color: #111 !important;
}


/* 登録ボタン */
button.register,
button.register-btn,
.btn-register,
.register-button,
button[type="button"].register {
  color: #fff !important;
  background: #111 !important;
  border-color: #111 !important;
}


/* ボタン内部の文字も強制 */
button[type="submit"] *,
button.save *,
button.save-btn *,
.btn-save *,
.save-button *,
button.register *,
button.register-btn *,
.btn-register *,
.register-button * {
  color: #fff !important;
}


/* ========================================
   ホバー
======================================== */

button[type="submit"]:hover,
button.save:hover,
button.save-btn:hover,
.btn-save:hover,
.save-button:hover,
button.register:hover,
button.register-btn:hover,
.btn-register:hover,
.register-button:hover {
  color: #111 !important;
  background: #fff !important;
  border-color: #111 !important;
}


/* ホバー時の内部文字 */
button[type="submit"]:hover *,
button.save:hover *,
button.save-btn:hover *,
.btn-save:hover *,
.save-button:hover *,
button.register:hover *,
button.register-btn:hover *,
.btn-register:hover *,
.register-button:hover * {
  color: #111 !important;
}


/* ========================================
   クリック中
======================================== */

button[type="submit"]:active,
button.save:active,
button.save-btn:active,
.btn-save:active,
.save-button:active,
button.register:active,
button.register-btn:active,
.btn-register:active,
.register-button:active {
  color: #fff !important;
  background: #111 !important;
}


/* ========================================
   無効状態
======================================== */

button[type="submit"]:disabled,
button.save:disabled,
button.save-btn:disabled,
.btn-save:disabled,
.save-button:disabled,
button.register:disabled,
button.register-btn:disabled,
.btn-register:disabled,
.register-button:disabled {
  color: #fff !important;
  background: #777 !important;
  border-color: #777 !important;
}


/* ========================================
   aタグで作られた保存・登録ボタンにも対応
======================================== */

a.save,
a.save-btn,
a.btn-save,
a.save-button,
a.register,
a.register-btn,
a.btn-register,
a.register-button {
  color: #fff !important;
  background: #111 !important;
  border-color: #111 !important;
}


a.save:hover,
a.save-btn:hover,
a.btn-save:hover,
a.save-button:hover,
a.register:hover,
a.register-btn:hover,
a.btn-register:hover,
a.register-button:hover {
  color: #111 !important;
  background: #fff !important;
}


/* ========================================
   inputボタン
======================================== */

input.save,
input.save-btn,
input.btn-save,
input.register,
input.register-btn,
input.btn-register {
  color: #fff !important;
  background: #111 !important;
  border-color: #111 !important;
}


input.save:hover,
input.save-btn:hover,
input.btn-save:hover,
input.register:hover,
input.register-btn:hover,
input.btn-register:hover {
  color: #111 !important;
  background: #fff !important;
}


/* ========================================
   文字の反転・フィルター防止
======================================== */

button.save *,
button.save-btn *,
.btn-save *,
.save-button *,
button.register *,
button.register-btn *,
.btn-register *,
.register-button * {
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}


/* ========================================
   ダークモード等による自動反転防止
======================================== */

button.save,
button.save-btn,
.btn-save,
.save-button,
button.register,
button.register-btn,
.btn-register,
.register-button {
  -webkit-text-fill-color: #fff !important;
  forced-color-adjust: none !important;
}


/* ========================================
   ホバー時は黒文字
======================================== */

button.save:hover,
button.save-btn:hover,
.btn-save:hover,
.save-button:hover,
button.register:hover,
button.register-btn:hover,
.btn-register:hover,
.register-button:hover {
  -webkit-text-fill-color: #111 !important;
}

button.save:hover *,
button.save-btn:hover *,
.btn-save:hover *,
.save-button:hover *,
button.register:hover *,
button.register-btn:hover *,
.btn-register:hover *,
.register-button:hover * {
  -webkit-text-fill-color: #111 !important;
}

html body .xr-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 9999;

  background: #0f0f0f !important;
  color: #ffffff !important;

  border-radius: 999px;
  padding: 11px 22px;

  font-size: 13.5px;
  font-weight: 800;

  opacity: 0;
  pointer-events: none;

  transition: opacity .2s;

  -webkit-text-fill-color: #ffffff !important;
}

html body .xr-toast * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


html body .holy-reg.on {
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .holy-reg.on * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ========================================
   特に相談フォームボタン
======================================== */

html body .holy-reg.on {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

html body .holy-reg.on * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}





/* ========================================
   .ca2 全体の文字色を黒に固定
======================================== */

html body .ca2,
html body .ca2 *,
html body .ca2 a,
html body .ca2 button,
html body .ca2 input,
html body .ca2 textarea,
html body .ca2 select,
html body .ca2 label,
html body .ca2 span,
html body .ca2 p,
html body .ca2 h1,
html body .ca2 h2,
html body .ca2 h3,
html body .ca2 h4,
html body .ca2 h5,
html body .ca2 h6,
html body .ca2 strong,
html body .ca2 b {
  color: #000 !important;
}





html body .pu-buy h1,
html body .pu-buy h2,
html body .pu-buy h3,
html body .pu-buy h4,
html body .pu-buy h5,
html body .pu-buy h6,
html body .pu-buy p,
html body .pu-buy h1 *,
html body .pu-buy h2 *,
html body .pu-buy h3 *,
html body .pu-buy h4 *,
html body .pu-buy h5 *,
html body .pu-buy h6 *,
html body .pu-buy p * {
  color: #000 !important;
}


/* .gh-top-in 内の文字をすべて黒に */
html body .gh-top-in,
html body .gh-top-in *,
html body .gh-top-in a,
html body .gh-top-in span,
html body .gh-top-in p,
html body .gh-top-in strong,
html body .gh-top-in b {
  color: #000 !important;
}


/* .of-panel 内の文字をすべて黒に */
html body .of-panel,
html body .of-panel *,
html body .of-panel a,
html body .of-panel span,
html body .of-panel p,
html body .of-panel strong,
html body .of-panel b,
html body .of-panel h1,
html body .of-panel h2,
html body .of-panel h3,
html body .of-panel h4,
html body .of-panel h5,
html body .of-panel h6,
html body .of-panel label {
  color: #000 !important;
}

/* .explore-zone の文字だけ黒に */
html body .explore-zone,
html body .explore-zone *,
html body .explore-zone a,
html body .explore-zone span,
html body .explore-zone p,
html body .explore-zone strong,
html body .explore-zone b,
html body .explore-zone h1,
html body .explore-zone h2,
html body .explore-zone h3,
html body .explore-zone h4,
html body .explore-zone h5,
html body .explore-zone h6,
html body .explore-zone label {
  color: #000 !important;
}

html body .t {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}


html body .of-new {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body .tweet-zone {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

html body .tweet-zone *,
html body .tweet-zone span,
html body .tweet-zone p,
html body .tweet-zone a,
html body .tweet-zone strong,
html body .tweet-zone b,
html body .tweet-zone h1,
html body .tweet-zone h2,
html body .tweet-zone h3,
html body .tweet-zone h4,
html body .tweet-zone h5,
html body .tweet-zone h6 {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}


/* 検索ボタン内のアイコンを白に */
.search button svg,
.search-btn svg,
button[type="submit"] svg,
form[role="search"] button svg {
  fill: #fff;
  stroke: #fff;
  color: #fff;
}

/* currentColor で描かれている線画アイコン用 */
.search button,
.search-btn,
form[role="search"] button {
  color: #fff;
}

b {
  color: #000 !important;
}
/* 閲覧室カードを黒背景に */
.pu-mag {
  background: #000;
}

.res-body,
.res-body * {
  color: #000;
}

/* コメント本文を黒に */
.res-body,
.res-body p,
.res-body span,
.res-body div,
.res-body li {
  color: #111;
}

/* リンクだけは区別できる色に */
.res-body a {
  color: #0645ad;
}
.res-body,
.res-body * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}


/* =========================================
   全画像：白黒2値風フィルター
   ========================================= */

img,
picture img,
video {
filter: grayscale(100%) contrast(110%);
}

/* ============================================================
   コントラスト強化 v3.3 — メニュー・文字・背景の同色ダブり防止
   （どのスキンでも：ヘッダー文字=テキスト色／選択中=反転／
     ドロワー・ドロップダウン=surface地＋text文字＋line境界）
   ============================================================ */
.gh, .gh .gh-in{ color:var(--dz-text) !important; }
.gh a, .gh .gh-nav a, .gh-chips a, .retro-nav a{
  color:var(--dz-text) !important; }
.gh a:hover, .gh-chips a:hover, .retro-nav a:hover{
  background:var(--dz-hover) !important; color:var(--dz-text) !important; }
.gh-chips a.active, .gh .gh-nav a.on, .retro-nav a.nav-on{
  background:var(--dz-text) !important; color:var(--dz-surface) !important; }
.gh .gh-logo, .gh .gh-title{ color:var(--dz-heading) !important; }
.gh input, .gh select, .gh-search input{
  background:var(--dz-bg) !important; color:var(--dz-text) !important;
  border:1px solid var(--dz-line) !important; }
.gh input::placeholder{ color:var(--dz-muted) !important; }
/* ハンバーガー・ドロワー */
.pu-dw, .pu-dw-panel, .hb-panel, .gh-drawer{
  background:var(--dz-surface) !important; color:var(--dz-text) !important;
  border-color:var(--dz-line) !important; }
.pu-dw a, .hb-panel a, .gh-drawer a{ color:var(--dz-text) !important; }
.pu-dw a:hover, .hb-panel a:hover{ background:var(--dz-hover) !important; }
.pu-dw .hb-lines i, .gh .hb-lines i{ background:var(--dz-text) !important; }
/* ドロップダウン・サブメニュー汎用 */
.gh .dropdown, .gh .submenu, .nav-drop{
  background:var(--dz-surface) !important; color:var(--dz-text) !important;
  border:1px solid var(--dz-line) !important; box-shadow:0 10px 28px rgba(0,0,0,.18) !important; }
/* フッターナビ */
.site-footer a{ color:var(--dz-muted) !important; }
.site-footer a:hover{ color:var(--dz-text) !important; }
/* カート開閉タブ（モバイル） */
.cart-tab{ background:var(--dz-accent) !important; color:#fff !important; }
.cart-body{ background:var(--dz-surface) !important; color:var(--dz-text) !important;
  border:1px solid var(--dz-line) !important; }

/* ============================================================
   モバイル余白の正規化＋横ゆれ根絶 v3.4（全スキン共通・最終適用）
   ============================================================ */
/* ① 横ガクガク根絶（v3.4強化）：clipで横スクロール自体を発生させない */
html, body{ overflow-x:clip; max-width:100%; }
@supports not (overflow: clip){ html, body{ overflow-x:hidden; } }
body{ position:relative; }
/* レイアウトの各段は必ず親幅の中に収める（grid/flex子の min-width 罠も封じる） */
.layout, .main-col, .wrap, .side, .blk-area, .explore-zone, .gf, .gh{ max-width:100%; min-width:0; }
.wrap > *, .blk-area > *{ max-width:100%; }
/* メディア・埋め込みは常に親幅まで */
.wrap :is(img, video, canvas, svg, embed, object, iframe),
.blk-html :is(img, video, iframe, table){ max-width:100% !important; }
/* 表・整形済みテキストは自枠内で横スクロール（ページ全体を広げない） */
.wrap table{ display:block; max-width:100%; overflow-x:auto; }
.wrap pre{ max-width:100%; overflow-x:auto; }
/* 長い英数字・URLでの突き抜け防止 */
.wrap, .gf{ overflow-wrap:break-word; }
/* フッター列：列数はCSS変数で受け、モバイルでは必ず1〜2列に畳む */
.gf-cols{ grid-template-columns:1.4fr repeat(var(--gf-n,3), minmax(0,1fr)); }
.gf-cols > *{ min-width:0; }
@media (max-width:820px){ .gf-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .gf-cols{ grid-template-columns:1fr; } }
/* v3.5 3カラム制御：サイド列が無いページは中央を広く（indexなど） */
.layout.no-l:not(.no-r){ grid-template-columns:minmax(0,1fr) minmax(220px,300px); }
.layout.no-r:not(.no-l){ grid-template-columns:minmax(180px,250px) minmax(0,1fr); }
.layout.no-l.no-r{ grid-template-columns:minmax(0,1fr); }
@media (max-width:1023px){
  .layout, .layout.no-l, .layout.no-r, .layout.no-l.no-r{ grid-template-columns:minmax(0,1fr) !important; }
}
/* 横スクロールUI（チップ・棚・帯）は自分の枠内で完結させる */
.gh-chips, .retro-nav, .xfal-shelf, .xfgs, .pu-mq, .xfmq, .ix-gal, .gf-shop-row, .xfyt-strip{ max-width:100%; }

/* ② スマホの左右余白：スキン差（wabi等の padding:28px など）を圧縮し、
     コンテンツをできるだけ幅広く */
@media (max-width: 680px){
  .wrap{ padding-left:10px !important; padding-right:10px !important; }
  .gh-in{ padding-left:10px !important; padding-right:10px !important; }
  .gh-chips{ padding-left:10px !important; padding-right:10px !important; }
  .layout{ padding-left:0 !important; padding-right:0 !important; }
  .main-col, .side{ padding-left:0 !important; padding-right:0 !important; }
  /* スキンが盛りがちなカード内余白も控えめに（読みやすさは維持） */
  .panel, .card, .of-card, .honpen-card, .notice{
    padding-left:14px !important; padding-right:14px !important; }
  .pu-sec h2{ font-size:19px; }
  /* フルブリード系は画面幅ちょうどに */
  .pu-heroband, .xfbn, .xffx{ border-radius:10px; }
}

/* ════════════════════════════════════════════════════════════
   v3.4 ① 御来光ヒーロー（全幅・大型・アニメーション看板）
   ・〜1280px（1カラム時）は画面幅100%のフルブリード
   ・Ken Burns／光の粒／光線スイープ／見出しトラッキング演出
   ════════════════════════════════════════════════════════════ */
.xf-hero-slot{ width:100%; margin:0; }
.xf-hero-slot .pu-heroband{ border-radius:0; border-left:none; border-right:none; margin:0; }
.xfgh{ position:relative; overflow:hidden; width:100%;
  height:var(--xfgh-h, clamp(520px, 92svh, 900px));
  margin:0; border-radius:0;
  background:#101018; isolation:isolate; }
.xfgh-media{ position:absolute; inset:0; z-index:0; }
.xfgh-img{ width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:52% 42%;
  animation:xfghKen 18s ease-in-out infinite alternate; }
.xfgh-grad{ position:absolute; inset:0; display:block;
  background:linear-gradient(135deg, var(--dz-g1,var(--dz-accent)), var(--dz-g2,var(--dz-button)) 55%, var(--dz-g3,var(--dz-accent)));
  background-size:220% 220%; animation:xfghGrad 14s ease-in-out infinite alternate; }
.xfgh-shade{ position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,8,14, calc(var(--xfgh-sh,.55) * .55)) 0%,
    rgba(6,8,14, 0) 34%,
    rgba(6,8,14, 0) 52%,
    rgba(6,8,14, var(--xfgh-sh,.55)) 100%); }
/* 光線スイープ（7秒に一度、画面を斜めに走る） */
.xfgh-beam{ position:absolute; top:-30%; bottom:-30%; left:-45%; width:34%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.34) 48%, transparent 100%);
  transform:rotate(10deg); filter:blur(2px); mix-blend-mode:overlay; pointer-events:none;
  animation:xfghBeam 7.2s ease-in-out infinite; }
/* 立ちのぼる光の粒 */
.xfgh-motes{ position:absolute; inset:0; pointer-events:none; }
.xfgh-motes i{ position:absolute; bottom:-6%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:0; animation:xfghMote linear infinite; }
.xfgh-motes i:nth-child(1){ left:6%;  width:7px;  height:7px;  animation-duration:9s;  animation-delay:.2s; }
.xfgh-motes i:nth-child(2){ left:14%; width:4px;  height:4px;  animation-duration:12s; animation-delay:2.4s; }
.xfgh-motes i:nth-child(3){ left:23%; width:9px;  height:9px;  animation-duration:10s; animation-delay:1.1s; }
.xfgh-motes i:nth-child(4){ left:32%; width:5px;  height:5px;  animation-duration:13s; animation-delay:3.6s; }
.xfgh-motes i:nth-child(5){ left:41%; width:6px;  height:6px;  animation-duration:9.5s; animation-delay:.9s; }
.xfgh-motes i:nth-child(6){ left:50%; width:8px;  height:8px;  animation-duration:11s; animation-delay:2.1s; }
.xfgh-motes i:nth-child(7){ left:59%; width:4px;  height:4px;  animation-duration:14s; animation-delay:4.4s; }
.xfgh-motes i:nth-child(8){ left:67%; width:7px;  height:7px;  animation-duration:9.8s; animation-delay:1.7s; }
.xfgh-motes i:nth-child(9){ left:75%; width:5px;  height:5px;  animation-duration:12.5s; animation-delay:.4s; }
.xfgh-motes i:nth-child(10){left:83%; width:9px;  height:9px;  animation-duration:10.6s; animation-delay:3.1s; }
.xfgh-motes i:nth-child(11){left:90%; width:4px;  height:4px;  animation-duration:13.4s; animation-delay:5.2s; }
.xfgh-motes i:nth-child(12){left:96%; width:6px;  height:6px;  animation-duration:11.8s; animation-delay:2.8s; }
/* 文字レイヤー */
.xfgh-in{ position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:0 clamp(16px, 5vw, 46px) clamp(26px, 6svh, 52px);
  color:#fff; max-width:920px;
  text-shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 26px rgba(0,0,0,.35); }
.xfgh-tag{ margin:0 0 8px; font-size:11px; letter-spacing:.34em; font-weight:800;
  color:rgba(255,255,255,.92); animation:xfghUp .8s .15s cubic-bezier(.22,.7,.3,1) backwards; }
.xfgh-tt{ margin:0 0 10px; font-family:var(--serif, Georgia, serif);
  font-size:clamp(30px, 7.4vw, 58px); line-height:1.14; color:#fff !important;
  background:none !important; border:none !important; padding:0 !important;
  animation:xfghTt 1.05s .05s cubic-bezier(.19,.75,.28,1) backwards; }
.xfgh-sub{ margin:0 0 14px; font-size:clamp(13px, 3.5vw, 15.5px); line-height:1.95;
  color:rgba(255,255,255,.95); max-width:640px;
  animation:xfghUp .8s .4s cubic-bezier(.22,.7,.3,1) backwards; }
.xfgh-btns{ margin:0; display:flex; flex-wrap:wrap; gap:10px;
  animation:xfghUp .8s .55s cubic-bezier(.22,.7,.3,1) backwards; }
.xfgh .pu-btn{ background:#fff; color:#111 !important; border:none; box-shadow:0 6px 22px rgba(0,0,0,.28); }
.xfgh .pu-btn.ghost{ background:rgba(255,255,255,.14); color:#fff !important;
  border:1.5px solid rgba(255,255,255,.85); backdrop-filter:blur(3px); }
/* 下スクロール手がかり */
.xfgh-cue{ position:absolute; z-index:2; left:50%; bottom:8px; transform:translateX(-50%);
  color:rgba(255,255,255,.9); animation:xfghCue 1.9s ease-in-out infinite; pointer-events:none; }
@keyframes xfghKen { from{ transform:scale(1.0); } to{ transform:scale(1.06) translate(-0.8%, -0.6%); } }
@keyframes xfghGrad{ from{ background-position:0% 0%; } to{ background-position:100% 100%; } }
@keyframes xfghBeam{ 0%{ left:-45%; opacity:0; } 12%{ opacity:1; } 46%{ left:115%; opacity:0; } 100%{ left:115%; opacity:0; } }
@keyframes xfghMote{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:.9; } 82%{ opacity:.5; } 100%{ transform:translateY(-108svh) translateX(8px); opacity:0; } }
@keyframes xfghUp  { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes xfghTt  { from{ opacity:0; transform:translateY(20px); letter-spacing:.42em; }
                     60%{ opacity:1; } to{ opacity:1; transform:none; letter-spacing:.04em; } }
@keyframes xfghCue { 0%,100%{ transform:translate(-50%,0); opacity:.85; } 50%{ transform:translate(-50%,7px); opacity:.4; } }
@media (max-width:680px){
  .xfgh-in{ padding-bottom:34px; }
}
@media (prefers-reduced-motion: reduce){
  .xfgh-img, .xfgh-grad, .xfgh-beam, .xfgh-motes i, .xfgh-cue,
  .xfgh-tag, .xfgh-tt, .xfgh-sub, .xfgh-btns{ animation:none !important; }
  .xfgh-beam, .xfgh-motes{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   v3.4 ② アニメーション（YouTube軽量プレイヤー・帯・グリッド）
   ════════════════════════════════════════════════════════════ */
.xfyt{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--dz-radius,14px); background:#0c0c12; cursor:pointer;
  border:1px solid var(--dz-line,#e5e5e5); }
.xfyt img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, opacity .3s; }
.xfyt:hover img{ transform:scale(1.04); }
.xfyt-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(12,12,18,.72); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.4); transition:transform .2s, background .2s; }
.xfyt:hover .xfyt-play{ transform:translate(-50%,-50%) scale(1.1); background:var(--dz-accent); }
.xfyt-tt{ position:absolute; left:0; right:0; bottom:0; padding:26px 14px 10px;
  color:#fff; font-size:13px; font-weight:700; line-height:1.5;
  background:linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events:none; }
.xfyt.on iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.xfyt-big .xfyt-play{ width:78px; height:78px; }
.xfyt-big .xfyt-tt{ font-size:15px; padding:34px 18px 14px; }
/* サムネイルが取得できない場合の意匠プレースホルダー */
.xfyt.noimg{ background:
  radial-gradient(120% 130% at 20% 0%, color-mix(in srgb, var(--dz-g1,var(--dz-accent)) 30%, #14141d), #14141d); }
.xfyt.noimg::before{ content:"MOVIE"; position:absolute; left:14px; bottom:12px;
  font-size:10px; font-weight:800; letter-spacing:.32em; color:rgba(255,255,255,.55); }
/* 新着動画の横スクロール帯 */
.xfyt-strip{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.xfyt-strip .xfyt{ flex:0 0 240px; }
@media (max-width:680px){ .xfyt-strip .xfyt{ flex-basis:200px; } }
/* 動画グリッド（アニメーションページ） */
.xfyt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
@media (max-width:560px){ .xfyt-grid{ grid-template-columns:1fr 1fr; gap:10px; } }

/* ════════════════════════════════════════════════════════════
   v3.4 ③ SVGアイコン共通・ミュージアム帯の調整
   ════════════════════════════════════════════════════════════ */
.xfic{ color:var(--dz-accent); }
.ix-mw .i svg, .zk-wing .zk-wi svg{ display:inline-block; }
.zk-wing .zk-wi{ color:var(--dz-accent); }
.gf-museum a svg{ margin-right:4px; color:var(--dz-accent); }
.gf-museum a:hover svg{ color:inherit; }

/* ════════════════════════════════════════════════════════════
   v3.6 ブロック・パワーアップ層（フューチャー・マジカル）
   ・すべてのブロック／カードを「丸っこいだけ」から
     エレガント×シャープ×未来的に底上げする共通レイヤー。
   ・角丸はスキン値を尊重しつつ上限14pxでキリッと絞る。
   ・上辺にアクセントの光ライン、多層の浮遊シャドウ、
     ホバーで静かに浮くマイクロインタラクション。
   ・スキン固有デコ（下の層）が最終適用され個性はそのまま。
   ════════════════════════════════════════════════════════════ */
.of-card,.honpen-card,.card,.panel,.box,.pu-side-box,.side-menu,.side-mini,.notice,.music-item{
  border-radius:min(var(--dz-radius),14px) !important;
  position:relative;
  box-shadow:0 1px 2px rgba(10,12,30,.05),0 6px 18px rgba(10,12,30,.06) !important;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .18s ease;
}
/* 上辺の光：アクセント色のグラデ・ヘアライン（未来的なエッジ） */
.of-card::after,.honpen-card::after,.card::after,.pu-side-box::after{
  content:""; position:absolute; left:10%; right:10%; top:0; height:2px;
  border-radius:0 0 2px 2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--dz-accent) 65%,transparent),transparent);
  opacity:.75;
}
.of-card:hover,.honpen-card:hover,.card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(10,12,30,.06),0 14px 30px rgba(10,12,30,.10) !important;
}
/* 見出しマークの重なり対策（v3.7）：
   ・旧✝インラインマークは designer層で全滅済みだが、二重保険で無効化。
   ・スキンが左マーク（::before絶対配置）を付ける見出しは、
     文字との間隔を必ず確保。small副題も潰れないように。 */
.pu-sec h2 small{ white-space:nowrap; }
.pu-sec{ align-items:baseline; }
.section-head h2::before{ margin-right:0 !important; }
/* 見出しブロック：先端にアクセントの発光ドット */
.blk-h{ position:relative; padding-left:14px; }
.blk-h::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:2px; background:var(--dz-accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--dz-accent) 60%,transparent); }
/* ボタン：キレのある押し心地（沈み込み） */
.btn,.blk-btn,.pu-btn{ transition:transform .12s ease,box-shadow .15s ease,filter .15s ease; }
.btn:active,.blk-btn:active,.pu-btn:active{ transform:translateY(1px) scale(.99); }
/* 画像・動画ブロックの角もシャープ側へ */
.blk-img img,.blk-banner img,.blk-video iframe{ border-radius:min(var(--dz-radius),12px); }

/* ════════════════════════════════════════════════════════════
   v3.6 レイアウト自由化の補助CSS（スキンに依存しない・全スキン共通）
   ・右カラムにユーザーのブロックがある場合は、スマホでも隠さず
     本文の下にカードとして表示（左カラムと同じ扱い）。
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px){
  .side-right.has-blocks{
    display:block; position:static; order:10;
    margin:18px 10px 0; padding:12px 12px 14px;
    background:var(--dz-surface,#fff); border:1px solid var(--dz-line,#e5e5e5); border-radius:10px;
  }
}


/* ═══ designer deco: brand ═══ */
:root{--dz-g1:#000000;--dz-g2:#ffffff;--dz-g3:#000000;--dz-grad:linear-gradient(120deg,#000000,#ffffff 55%,#000000);}
/* ══════════════════════════════════════════════════════════════════
   BRAND v2 ─ 単色の地 ＋ 紙 ＋ 反転ブロック。柄は一切使わない。
   詳細度の勝負に勝つため、すべて html body … の形で書く。
   ══════════════════════════════════════════════════════════════════ */

/* ── ① 装飾を落とす ─────────────────────────────────────────── */
html body #gh,html body .gh,html body .gf,html body .site-top,html body .retro-nav,
html body .login-line,html body .ticker,html body .wrap,html body .layout,html body .frame,
html body .side-left,html body .side-menu,html body .side-mini,html body .official-zone,
html body .fan-grid,html body .explore-zone,html body .blk-area,html body .main-col,
html body .pu-sec,html body .pu-dash,html body .hiroba-tabs{
  background-image:none !important; box-shadow:none !important; text-shadow:none !important;
}
html body .site-top::before,html body .gh::before,html body .gh::after{ display:none !important; }

/* ── ② 文字色をいったん倒す。[class] を挟んで詳細度を稼ぐ ────── */
html body,
html body [class],
html body [class] *{ color:#ffffff !important; }

/* ── ③ 地：完全な単色。網点・グラデ・輪は置かない ───────────── */
html{ color-scheme:light; background:#000000; background-image:none; }
html body{
  background:transparent !important; background-image:none !important;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif !important;
  font-weight:700 !important; letter-spacing:.005em !important; line-height:1.8 !important;
  font-synthesis-weight:none;
}
html body::before,html body::after{ content:none !important; }
::selection{ background:#ffffff; color:#000000; }
*{ scrollbar-width:thin; scrollbar-color:#ffffff #000000; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#000000; }
::-webkit-scrollbar-thumb{ background:#ffffff; border:3px solid #000000; border-radius:0; }
:focus-visible{ outline:3px solid #ffffff; outline-offset:3px; }

/* ── ④ 見出し：本文欄の寸法。文脈ごとに⑤で絞り直す ─────────── */
html body h1,html body h2,html body h3,html body h4,
html body .bar,html body .official-bar,html body .pu-sec h2,html body .section-head h2,
html body .site-top .logo a,html body .gh-logotype{
  font-family:"Dela Gothic One","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-weight:900 !important; letter-spacing:.012em !important; line-height:1.28 !important;
}

/* 表示系（ナビ・ボタン・ロゴ）も同じ字面に寄せる。
   Dela Gothic One は 400 のみだが見た目が極太。body の
   font-synthesis-weight:none により偽ボールドは掛からない。 */
html body .btn,html body .pu-btn,html body .blk-btn,html body .rx-rbtn,html body .oz-more,
html body .gh-chips a,html body .retro-nav a,html body .holy-an-item,
html body .bnl-more,html body .gf .gf-logo,html body .gf .gf-brand,
html body .of-cat-label{
  font-family:"Dela Gothic One","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  letter-spacing:.02em !important;
}
html body h1{ font-size:clamp(28px,3.8vw,50px) !important; margin:.4em 0 .5em !important; }
html body h2{ font-size:clamp(22px,2.7vw,34px) !important; margin:1.5em 0 .6em !important;
  padding-bottom:.34em !important; position:relative; }
html body h3{ font-size:clamp(17px,1.8vw,22px) !important; }
html body h4{ font-size:15px !important; letter-spacing:.06em !important; }

/* 本文欄の h2 だけ、下に二色の分割線を敷く（この配色の署名） */
html body h2::after{
  content:""; display:block; position:absolute; left:0; right:0; bottom:0;
  height:9px; border:2px solid #ffffff;
  background:linear-gradient(90deg,#000000 0 38%,#0a0a0a 38%);
}

/* ── ⑤ 文脈別の寸法。ここで巨大化を止める ───────────────────── */
/* ヒーローだけは大きく残す */
html body .hh-hero h1,html body .blk-heroband h1,html body .xfmh h1,html body .hero h1{
  font-size:clamp(34px,5.6vw,78px) !important; line-height:1.06 !important; }
/* 脇の欄：小さく、分割線も出さない */
html body .side-menu h1,html body .side-menu h2,html body .side-menu h3,
html body .side-mini h2,html body .side-mini h3,html body .pu-side-box h2,
html body .pu-side-box h3,html body .side-left h2,html body aside h2,html body aside h3{
  font-size:17px !important; line-height:1.5 !important; margin:0 0 .6em !important; }
html body .side-menu h2::after,html body .side-mini h2::after,
html body .pu-side-box h2::after,html body .side-left h2::after,html body aside h2::after{ display:none !important; }
/* カードの中：本文と同じ目線に落とす */
html body .of-card h2,html body .of-card h3,html body .card h2,html body .card h3,
html body .panel h3,html body .pu-item h3,html body .pu-lib-card h3,html body .thumb-card h3{
  font-size:15.5px !important; line-height:1.55 !important; letter-spacing:0 !important; }
html body .of-card h2::after,html body .of-card h3::after,html body .card h2::after{ display:none !important; }

html body p,html body li,html body td{ font-weight:700 !important; }
html body .muted,html body small.muted,html body .note,html body .hint,
html body .of-body,html body .pu-itext,html body time,html body .date{ color:#9a9a9a !important; }
html body a{ text-decoration:none !important; font-weight:900 !important; }
html body .wrap p a,html body .pu-article a,html body .article-body a,html body .page-body a{
  box-shadow:inset 0 -.14em 0 #000000; }
html body .wrap p a:hover,html body .pu-article a:hover{ box-shadow:inset 0 -1.05em 0 #000000; }
html body hr{ border:0 !important; height:6px !important; background:#ffffff !important; margin:44px 0 !important; }
html body blockquote{
  background:#0a0a0a !important; border:3px solid #ffffff !important;
  border-left:14px solid #ffffff !important; border-radius:0 !important;
  padding:18px 22px !important; font-weight:700 !important;
}

/* ── ⑥ 面 ───────────────────────────────────────────────────── */
html body .of-card,html body .honpen-card,html body .card,html body .box,html body .panel,
html body .notice,html body .music-item,html body .empty-note,html body .thumb-card,
html body .pu-item,html body .pu-lib-card,html body .pu-side-box,html body .pu-article,
html body .side-menu,html body .side-mini,html body .cathedral-player{
  background:#0a0a0a !important; border:3px solid #ffffff !important;
  border-radius:0 !important; box-shadow:none !important;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s;
}
html body .of-card:hover,html body .honpen-card:hover,html body .card:hover,
html body .thumb-card:hover,html body .pu-item:hover,html body .pu-lib-card:hover{
  background:#1a1a1a !important; transform:translate(-3px,-3px); box-shadow:8px 8px 0 #ffffff !important;
}
html body .wrap,html body .layout,html body .frame,html body .side-left,
html body .official-zone,html body .fan-grid,html body .explore-zone,html body .blk-area{
  background:transparent !important;
}
html body .pu-news-row,html body .pu-ep-row,html body .rk-row{
  background:transparent !important; border:0 !important;
  border-bottom:3px solid #ffffff !important; border-radius:0 !important;
}
html body .pu-news-row:hover,html body .pu-ep-row:hover,html body .rk-row:hover{ background:#1a1a1a !important; }

/* ── ⑦ ヘッダ ───────────────────────────────────────────────── */
html body #gh,html body .gh,html body .site-top{
  background:#ffffff !important; border:0 !important;
  border-bottom:8px solid #000000 !important; padding:16px 0 !important;
}
html body #gh,html body #gh *,html body .gh,html body .gh *,
html body .site-top,html body .site-top *{ color:#000000 !important; }
html body .gh-logotype,html body .site-top .logo a{
  font-size:clamp(20px,2.4vw,30px) !important; letter-spacing:-.03em !important; }
html body .site-top .sub{ color:#000000 !important; font-weight:900 !important; letter-spacing:.22em !important; }
html body .site-top .sub::before,html body .site-top .sub::after{ content:"" !important; margin:0 !important; }
html body .site-top .counter,html body .site-top .counter *{
  background:transparent !important; border:3px solid #000000 !important;
  color:#000000 !important; border-radius:999px !important; font-weight:900 !important; }

/* 白ピル：中の文字まで指定しないと同色でつぶれる */
html body .gh-chips a,html body .gh-chips a *,
html body .hiroba-tabs a,html body .hiroba-tabs a *,
html body .hiroba-tabs button,html body .hiroba-tabs button *{
  background:transparent !important; color:#000000 !important;
  border-color:#000000 !important; font-weight:900 !important; box-shadow:none !important;
}
html body .gh-chips a,html body .hiroba-tabs a,html body .hiroba-tabs button{
  border:3px solid #000000 !important; border-radius:999px !important; padding:8px 20px !important; }
html body .gh-chips a.active,html body .gh-chips a.active *,
html body .hiroba-tabs a.on,html body .hiroba-tabs a.on *{
  background:#000000 !important; color:#ffffff !important; }

/* ナビ帯は紙の色に反転させて、黒→白→地 の三段を作る */
html body .retro-nav{ background:#0a0a0a !important; border:0 !important;
  border-bottom:8px solid #ffffff !important; padding:10px 0 !important; }
html body .retro-nav a,html body .retro-nav a *{ background:transparent !important; color:#ffffff !important; }
html body .retro-nav a{ border:3px solid transparent !important; border-radius:999px !important;
  font-weight:900 !important; padding:8px 20px !important; }
html body .retro-nav a:hover{ border-color:#ffffff !important; }
html body .retro-nav a.nav-on,html body .retro-nav a.nav-on *,
html body .retro-nav a.nav-official,html body .retro-nav a.nav-official *,
html body .retro-nav a.nav-post,html body .retro-nav a.nav-post *{
  background:#ffffff !important; color:#0a0a0a !important; border-color:#ffffff !important; }

html body .login-line{ background:#ffffff !important; border:0 !important; font-weight:900 !important; }
html body .login-line,html body .login-line *{ color:#000000 !important; }
html body .ticker{ background:#ffffff !important; border:0 !important;
  font-weight:900 !important; letter-spacing:.08em !important; }
html body .ticker,html body .ticker *{ color:#000000 !important; }

/* ── ⑧ 見出し帯 ─────────────────────────────────────────────── */
html body .bar,html body .official-bar{
  background:#ffffff !important; border:0 !important; border-radius:0 !important;
  padding:13px 20px !important; letter-spacing:0 !important;
  font-size:clamp(16px,1.9vw,22px) !important;
}
html body .bar,html body .bar *,html body .official-bar,html body .official-bar *{ color:#000000 !important; }

/* ── ⑨ ボタン：子要素まで色を指定して同色つぶれを防ぐ ────────── */
html body .btn,html body .rx-rbtn,html body .oz-more,html body .pu-btn,html body .blk-btn{
  border-radius:999px !important; font-weight:900 !important; letter-spacing:.03em !important;
  padding:12px 26px !important; box-shadow:none !important;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s;
}
html body .btn:not(.primary):not(.danger),html body .btn:not(.primary):not(.danger) *,
html body .pu-btn.ghost,html body .pu-btn.ghost *,
html body .rx-rbtn,html body .rx-rbtn *,html body .oz-more,html body .oz-more *{
  background:#0a0a0a !important; color:#ffffff !important; border-color:#ffffff !important; }
html body .btn:not(.primary):not(.danger),html body .pu-btn.ghost,
html body .rx-rbtn,html body .oz-more{ border:3px solid #ffffff !important; }
html body .btn:not(.primary):not(.danger):hover,html body .pu-btn.ghost:hover,
html body .rx-rbtn:hover,html body .oz-more:hover{
  background:#000000 !important; transform:translate(-2px,-2px); box-shadow:5px 5px 0 #ffffff !important; }

html body .btn.primary,html body .btn.primary *,
html body .pu-btn:not(.ghost),html body .pu-btn:not(.ghost) *,
html body .blk-btn,html body .blk-btn *{
  background:#ffffff !important; color:#000000 !important; border-color:#ffffff !important; }
html body .btn.primary,html body .pu-btn:not(.ghost),html body .blk-btn{
  border:3px solid #ffffff !important; }
html body .btn.primary:hover,html body .pu-btn:not(.ghost):hover,html body .blk-btn:hover{
  transform:translate(-2px,-2px); box-shadow:5px 5px 0 #0a0a0a !important; }
html body .btn.danger,html body .btn.danger *{ background:#000000 !important; color:#ffffff !important; }
html body .btn.danger{ border:3px dashed #ffffff !important; }

/* ── ⑩ 固定の丸ボタン：アイコンが currentColor なので色を明示する ─ */
html body .to-top,html body .to-top *{
  background:#ffffff !important; color:#000000 !important; border:3px solid #ffffff !important; }
html body .to-top svg{ fill:currentColor !important; }
html body .cart-fab{ background:transparent !important; border:0 !important; box-shadow:none !important; }
html body .cart-fab .cart-tab,html body .cart-fab .cart-tab *{
  background:#ffffff !important; color:#000000 !important;
  border:3px solid #ffffff !important; border-radius:50% !important; }
html body .xf-bgmfix{ background:#0a0a0a !important; border:3px solid #ffffff !important; }
html body .xf-bgmfix .cp-toggle,html body .xf-bgmfix .cp-toggle *{
  background:#ffffff !important; color:#000000 !important; border:0 !important; }
html body .xf-bgmfix .cp-info{ color:#ffffff !important; }
html body .xf-bgmfix .cp-eqbar,html body .xf-bgmfix .cp-eqbar *{ color:#ffffff !important; }

/* ── ⑪ 記事タグ・カテゴリ・お知らせ一覧 ─────────────────────── */
html body .tag-row{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; }

/* タグ本体：反転色のピル。子要素まで色を指定してつぶれを防ぐ */
html body .tag-mini,html body .tag-mini *,
html body .of-cat,html body .of-cat *,
html body .pu-libcat,html body .pu-libcat *,
html body .bnl-cat,html body .bnl-cat *,
html body .sp-tags,html body .sp-tags *,
html body .xfin-tag,html body .xfin-tag *,
html body .xfv-badge,html body .xfv-badge *,
html body .owner-badge,html body .owner-badge *{
  background:#ffffff !important; color:#000000 !important; border-color:#ffffff !important;
}
html body .tag-mini,html body .of-cat,html body .pu-libcat,html body .bnl-cat,
html body .sp-tags,html body .xfin-tag,html body .xfv-badge,html body .owner-badge{
  display:inline-block !important; border:0 !important; border-radius:999px !important;
  font-size:11.5px !important; font-weight:900 !important; letter-spacing:.08em !important;
  line-height:1.95 !important; padding:2px 14px !important; margin:0 6px 6px 0 !important;
  white-space:nowrap !important; text-decoration:none !important; box-shadow:none !important;
  transition:background .14s, color .14s;
}
html body a.tag-mini:hover,html body a.of-cat:hover,html body a.bnl-cat:hover,
html body a.pu-libcat:hover,html body .bnl-list li:hover .bnl-cat{
  background:#000000 !important; color:#ffffff !important; }
html body a.tag-mini:hover *,html body a.of-cat:hover *,
html body .bnl-list li:hover .bnl-cat *{ color:#ffffff !important; }

/* 区分ラベル：塗らずに枠だけ。タグと役割を分ける */
html body .of-cat-label,html body .of-cat-label *{
  background:transparent !important; color:#ffffff !important; }
html body .of-cat-label{
  display:inline-block !important; border:2px solid #ffffff !important; border-radius:999px !important;
  font-size:11px !important; font-weight:900 !important; letter-spacing:.14em !important;
  padding:2px 13px !important; }

/* NEW：紙の色に落として、地からもタグからも独立させる */
html body .of-new,html body .of-new *{
  background:#0a0a0a !important; color:#ffffff !important; }
html body .of-new{
  border:2px solid #ffffff !important; border-radius:999px !important;
  font-size:11px !important; font-weight:900 !important; letter-spacing:.1em !important;
  padding:1px 12px !important; }

/* お知らせ一覧：日付は等幅、見出しは太く、行は太い罫線で刻む */
html body .bnl-date{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace !important;
  font-size:11.5px !important; letter-spacing:.06em !important;
  font-weight:700 !important; color:#9a9a9a !important; display:block !important; }
html body .bnl-ttl{ font-weight:900 !important; line-height:1.6 !important; display:block !important; }
html body .bnl-list li{ border-bottom:3px solid #ffffff !important; padding:12px 2px !important; }
html body .bnl-list li:last-child{ border-bottom:0 !important; }
html body .bnl-list li:hover{ background:#1a1a1a !important; }
html body .bnl-list li a{ display:block !important; box-shadow:none !important; }
html body .bnl-head h2,html body .bnl-head h3{ font-size:17px !important; margin:0 !important;
  padding-bottom:0 !important; }
html body .bnl-head h2::after{ display:none !important; }
html body .bnl-more{ font-size:12px !important; font-weight:900 !important;
  border-bottom:2px solid #ffffff !important; opacity:1 !important; }


/* ── ⑫ フッタ：PCで巨大化しないよう寸法を固定する ───────────── */
html body .gf{
  background:#ffffff !important; border:0 !important;
  border-top:12px solid #000000 !important; padding:52px 0 44px !important;
}
html body .gf,html body .gf *{ color:#000000 !important; }
html body .gf h1,html body .gf h2,html body .gf h3,html body .gf h4,html body .gf strong{
  font-family:"Dela Gothic One","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:15px !important; line-height:1.6 !important; letter-spacing:.1em !important;
  margin:0 0 .9em !important; white-space:normal !important; writing-mode:horizontal-tb !important;
}
html body .gf h2::after,html body .gf h3::after,html body .gf h4::after{ display:none !important; }
html body .gf .gf-logo,html body .gf .gf-brand{ font-size:clamp(20px,2.2vw,28px) !important; }
html body .gf a{ box-shadow:none !important; border-bottom:2px solid #000000 !important;
  font-size:13.5px !important; font-weight:700 !important; }
html body .gf a:hover{ background:#000000 !important; color:#ffffff !important; }
html body .gf .gf-desc{ color:#000000 !important; font-weight:900 !important;
  letter-spacing:.12em !important; font-size:12px !important; }

/* ── ⑬ 入力欄 ───────────────────────────────────────────────── */
html body input,html body textarea,html body select{
  background:#0a0a0a !important; color:#ffffff !important;
  border:3px solid #ffffff !important; border-radius:0 !important;
  font-weight:700 !important; padding:12px 14px !important;
}
html body input:focus,html body textarea:focus,html body select:focus{
  background:#1a1a1a !important; outline:3px solid #ffffff !important; outline-offset:2px; }
html body ::placeholder{ color:#9a9a9a !important; font-weight:700 !important; }
html body input[type=checkbox],html body input[type=radio]{ accent-color:#ffffff; }

/* ── ⑭ 表 ───────────────────────────────────────────────────── */
html body table{ background:#0a0a0a !important; border:3px solid #ffffff !important;
  border-radius:0 !important; overflow:hidden; }
html body th{ background:#ffffff !important; border-bottom:0 !important;
  font-weight:900 !important; letter-spacing:.08em !important; font-size:13px !important; }
html body th,html body th *{ color:#000000 !important; }
html body td{ border-bottom:2px solid #ffffff !important; font-weight:700 !important; }
html body tbody tr:hover td{ background:#1a1a1a !important; }

html body .xfp-bar,html body .xfv,html body .sound-picker{
  background:#0a0a0a !important; border:3px solid #ffffff !important; }

/* ══════════════════════════════════════════════════════════════════
   ⑮ 反転セクション ─ 好きなブロックに class を足すだけで黒地×白文字
      .inv         … 反転させる
      .inv-bleed   … さらに画面幅いっぱいまで広げる（.inv と併用）
      .swap        … 地と文字を入れ替える（黒地 × 配色の色の文字）
   ══════════════════════════════════════════════════════════════════ */
html body .inv,html body [data-inv]{
  background:#ffffff !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; padding:52px 28px !important;
}
html body .inv,html body .inv *,html body [data-inv],html body [data-inv] *{ color:#000000 !important; }
html body .inv .muted,html body .inv .of-body,html body .inv time,
html body [data-inv] .muted,html body [data-inv] .of-body{ color:#000000 !important; }
html body .inv h2::after,html body [data-inv] h2::after{
  border-color:#000000 !important;
  background:linear-gradient(90deg,#000000 0 38%,#000000 38%) !important; }
html body .inv hr,html body [data-inv] hr{ background:#000000 !important; }
html body .inv .of-card,html body .inv .card,html body .inv .panel,html body .inv .box,
html body .inv .pu-item,html body .inv .thumb-card,html body .inv .notice,
html body [data-inv] .of-card,html body [data-inv] .card,html body [data-inv] .panel{
  background:#ffffff !important; border-color:#000000 !important; }
html body .inv .of-card:hover,html body .inv .card:hover,html body .inv .pu-item:hover{
  background:#000000 !important; box-shadow:8px 8px 0 #000000 !important; }
html body .inv .of-card:hover *,html body .inv .card:hover *{ color:#ffffff !important; }
html body .inv .pu-news-row,html body .inv .pu-ep-row,html body .inv .rk-row{
  border-bottom-color:#000000 !important; }
html body .inv .tag-mini,html body .inv .tag-mini *,html body .inv .of-cat,
html body .inv .of-cat *,html body .inv .bnl-cat,html body .inv .bnl-cat *{
  background:#000000 !important; color:#ffffff !important; }
html body .inv .of-cat-label,html body .inv .of-cat-label *,
html body .inv .of-new,html body .inv .of-new *{
  background:transparent !important; color:#000000 !important; border-color:#000000 !important; }
html body .inv .bnl-date{ color:#000000 !important; }
html body .inv .bnl-list li{ border-bottom-color:#000000 !important; }
html body .inv a,html body [data-inv] a{ box-shadow:none !important; border-bottom:2px solid #000000 !important; }
html body .inv .btn:not(.primary),html body .inv .btn:not(.primary) *{
  background:transparent !important; color:#000000 !important; border-color:#000000 !important; }
html body .inv .btn.primary,html body .inv .btn.primary *,
html body .inv .blk-btn,html body .inv .blk-btn *{
  background:#000000 !important; color:#ffffff !important; border-color:#000000 !important; }
html body .inv input,html body .inv textarea,html body .inv select{
  background:#ffffff !important; color:#000000 !important; border-color:#000000 !important; }
html body .inv table{ background:#ffffff !important; border-color:#000000 !important; }
html body .inv td{ border-bottom-color:#000000 !important; }
html body .inv-bleed{
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  padding-left:calc(50vw - 50% + 22px) !important; padding-right:calc(50vw - 50% + 22px) !important;
}
html body .swap{ background:#ffffff !important; background-image:none !important;
  border:0 !important; padding:52px 28px !important; }
html body .swap,html body .swap *{ color:#000000 !important; }
html body .swap .btn,html body .swap .btn *{
  background:#000000 !important; color:#ffffff !important; border-color:#000000 !important; }

/* ── ⑱ 「濃い地に白文字」で書かれていた要素の復旧 ────────────────
   元CSSは color:#fff を !important 無しで指定しているため、②の一括指定に
   負けて「黒地に黒文字」になり、表紙の無料バッジ・区分タグ・現在地の
   ハイライトなどが消える。ここで地ごと塗り直す。 */
html body .c-badge,html body .c-genres a.on,html body .c-sort .pg .n,
html body .c-tagcloud a:hover,html body .ca2-kind,html body .cue-no,html body .hh-snd,
html body .mc-kind,html body .of-cat-label.on,html body .of-filled,html body .of-snd,
html body .ptag.on,html body .pu-adm-side a .n,html body .pu-admin-nav a:hover,
html body .pu-dw-head,html body .pu-dw-x,html body .pu-ep-row .new,
html body .pu-ep-row.v2 .go,html body .pu-ep-row.v2 .no .new,html body .pu-fix-nav a.comm,
html body .pu-item .cov .cat,html body .pu-item .cov .st-out,
html body .pu-lib-card .cov .free,html body .pu-mag .cov .free,
html body .pu-libcat a.on,html body .pu-libcat.sub a.on,html body .pu-list th,
html body .pu-nav a:hover,html body .pu-period a.on,html body .pu-side-list a .n,
html body .rk-new,html body .side-title,html body .t-bgm,html body .tw-compose-btn,
html body .xc-postbtn,html body .xc-seg input:checked + span,html body .xfad .xfad-pr,
html body .xfct.tone-accent,html body .xfct.tone-ink,html body .xflt a.xflt-go:hover,
html body .xfsp .xfsp-btn,html body .xfst .xfst-no,
html body .c-badge *,
html body .c-genres a.on *,
html body .c-sort .pg .n *,
html body .c-tagcloud a:hover *,
html body .ca2-kind *,
html body .cue-no *,
html body .hh-snd *,
html body .mc-kind *,
html body .of-cat-label.on *,
html body .of-filled *,
html body .of-snd *,
html body .ptag.on *,
html body .pu-adm-side a .n *,
html body .pu-admin-nav a:hover *,
html body .pu-dw-head *,
html body .pu-dw-x *,
html body .pu-ep-row .new *,
html body .pu-ep-row.v2 .go *,
html body .pu-ep-row.v2 .no .new *,
html body .pu-fix-nav a.comm *,
html body .pu-item .cov .cat *,
html body .pu-item .cov .st-out *,
html body .pu-lib-card .cov .free *,
html body .pu-mag .cov .free *,
html body .pu-libcat a.on *,
html body .pu-libcat.sub a.on *,
html body .pu-list th *,
html body .pu-nav a:hover *,
html body .pu-period a.on *,
html body .pu-side-list a .n *,
html body .rk-new *,
html body .side-title *,
html body .t-bgm *,
html body .tw-compose-btn *,
html body .xc-postbtn *,
html body .xc-seg input:checked + span *,
html body .xfad .xfad-pr *,
html body .xfct.tone-accent *,
html body .xfct.tone-ink *,
html body .xflt a.xflt-go:hover *,
html body .xfsp .xfsp-btn *,
html body .xfst .xfst-no *,
html body .holy-an-post svg{
  background:#ffffff !important; color:#000000 !important;
  border-color:#ffffff !important; text-shadow:none !important;
}
html body .c-badge,html body .c-genres a.on,html body .c-sort .pg .n,
html body .c-tagcloud a:hover,html body .ca2-kind,html body .cue-no,html body .hh-snd,
html body .mc-kind,html body .of-cat-label.on,html body .of-filled,html body .of-snd,
html body .ptag.on,html body .pu-adm-side a .n,html body .pu-admin-nav a:hover,
html body .pu-dw-head,html body .pu-dw-x,html body .pu-ep-row .new,
html body .pu-ep-row.v2 .go,html body .pu-ep-row.v2 .no .new,html body .pu-fix-nav a.comm,
html body .pu-item .cov .cat,html body .pu-item .cov .st-out,
html body .pu-lib-card .cov .free,html body .pu-mag .cov .free,
html body .pu-libcat a.on,html body .pu-libcat.sub a.on,html body .pu-list th,
html body .pu-nav a:hover,html body .pu-period a.on,html body .pu-side-list a .n,
html body .rk-new,html body .side-title,html body .t-bgm,html body .tw-compose-btn,
html body .xc-postbtn,html body .xc-seg input:checked + span,html body .xfad .xfad-pr,
html body .xfct.tone-accent,html body .xfct.tone-ink,html body .xflt a.xflt-go:hover,
html body .xfsp .xfsp-btn,html body .xfst .xfst-no{
  border-radius:999px !important; font-weight:900 !important;
  letter-spacing:.08em !important; box-shadow:none !important;
}
/* 画像やグラデーションの上に重なるものは、地を残して文字だけ白に戻す */
html body .xfbn .xfbn-in,html body .hs-cap,html body .hs-arrow,
html body .ca2-coverbtn,html body .ca2-play,html body .xfg-lb .xfg-nav,
html body .xfg-lb .xfg-x,html body .xfsp .xfsp-in,
html body .xfbn .xfbn-in *,
html body .hs-cap *,
html body .hs-arrow *,
html body .ca2-coverbtn *,
html body .ca2-play *,
html body .xfg-lb .xfg-nav *,
html body .xfg-lb .xfg-x *,
html body .xfsp .xfsp-in *{
  color:#ffffff !important; text-shadow:0 1px 6px rgba(0,0,0,.65) !important;
}
/* 表紙が無いときの代替面 */
html body .cov .nocov,html body .cov .nocov *{ background:#0a0a0a !important; color:#9a9a9a !important; }
/* 号の区分（.mc）は枠だけにしてタグと役割を分ける */
html body .pu-mag .mc,html body .pu-lib-card .mc{
  background:transparent !important; color:#ffffff !important;
  border:2px solid #ffffff !important; border-radius:999px !important; font-weight:900 !important; }

/* 決済ウィジェットは触らない。PayPal は自前の見た目を持っているので、
   こちらが地や文字色を塗ると「黒地に黒文字」の空ボタンになる。 */
html body .cart-add,html body .cart-add *,
html body .cart-body,html body .cart-body *,
html body paypal-add-to-cart-button,html body paypal-cart-button,
html body [class*="paypal"],html body [class*="paypal"] *{
  background:transparent !important; background-image:none !important;
  color:#ffffff !important; border-color:#ffffff !important; box-shadow:none !important;
}

/* ボタン内のアイコンは currentColor に揃える */
html body .btn svg,html body .pu-btn svg,html body .blk-btn svg,
html body .to-top svg,html body .holy-an-item svg{ fill:currentColor !important; }

/* ── ⑲ スマホ：下部固定ナビと浮き要素の重なりを解消 ──────────────
   .holy-appnav は max-width:900px で高さ 58px + セーフエリアの固定ナビ。
   アルバム再生ボックス・カート・上へ戻るボタンがその下に潜るため、
   ナビの高さぶん持ち上げ、重ね順もナビより下に固定する。 */
@media (max-width:900px){
  html body .holy-appnav{
    background:#0a0a0a !important; border-top:5px solid #ffffff !important; box-shadow:none !important; }
  html body .holy-an-item,html body .holy-an-item *{
    color:#ffffff !important; font-weight:900 !important; }
  html body .holy-an-item.on,html body .holy-an-item.on *{ color:#ffffff !important; }
  html body .holy-an-post svg{
    background:#ffffff !important; color:#000000 !important;
    border:3px solid #ffffff !important; box-shadow:none !important; }

  html body .to-top{
    bottom:calc(72px + env(safe-area-inset-bottom)) !important;
    right:14px !important; z-index:9985 !important; }
  html body .cart-fab{
    bottom:calc(128px + env(safe-area-inset-bottom)) !important;
    right:14px !important; z-index:9985 !important; }
  html body .xf-bgmfix{
    bottom:calc(72px + env(safe-area-inset-bottom)) !important;
    left:10px !important; z-index:9985 !important;
    max-width:calc(100vw - 92px) !important; }
}

/* ── ⑳ KIBOJO COMMERCE（.ec-*）─────────────────────────────────
   ec_lib.php は「濃い地に白文字」を !important 無しで書いているため、
   ②の一括指定に負けて黒地に黒文字になる。地ごと作り直す。 */

/* 塗りのボタン：黒地にアクセント色 */
html body .ec-btn,html body .ec-btn *,
html body .ec-add,html body .ec-add *{
  background:#ffffff !important; color:#000000 !important;
  border:3px solid #ffffff !important; border-radius:999px !important;
  font-weight:900 !important; letter-spacing:.03em !important; box-shadow:none !important;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
}
html body .ec-btn:hover,html body .ec-add:hover{
  transform:translate(-2px,-2px); box-shadow:5px 5px 0 #0a0a0a !important; }
html body .ec-btn.ghost,html body .ec-btn.ghost *{
  background:#0a0a0a !important; color:#ffffff !important; border-color:#ffffff !important; }
html body .ec-btn.ghost:hover{ background:#000000 !important; box-shadow:5px 5px 0 #ffffff !important; }
html body .ec-btn.lg{ padding:14px 30px !important; font-size:15px !important; }

/* 右下のカート：丸は黒、マークは白 */
html body .ec-fab{
  background:#ffffff !important; color:#ffffff !important;
  border:3px solid #ffffff !important; box-shadow:none !important; }
html body .ec-fab *{ background:transparent !important; color:#ffffff !important; }
html body .ec-fab svg{ fill:currentColor !important; }
html body .ec-fab svg [fill="none"]{ fill:none !important; }
html body .ec-fab svg [stroke]{ stroke:currentColor !important; }
html body .ec-fab-count,html body .ec-fab-count *{
  background:#000000 !important; color:#ffffff !important;
  border:2px solid #ffffff !important; font-weight:900 !important; }

/* 商品カード */
html body .ec-card{
  background:#0a0a0a !important; border:3px solid #ffffff !important;
  border-radius:0 !important; box-shadow:none !important;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s; }
html body .ec-card:hover{
  background:#1a1a1a !important; transform:translate(-3px,-3px); box-shadow:8px 8px 0 #ffffff !important; }
html body .ec-price,html body .ec-price *{ color:#ffffff !important; font-weight:900 !important; }
html body .ec-compare{ color:#9a9a9a !important; }

/* バッジ・タグ・帯 */
html body .ec-badge,html body .ec-badge *,
html body .ec-sold,html body .ec-sold *,
html body .ec-banner,html body .ec-banner *,
html body .ec-toast,html body .ec-toast *,
html body .ec-coltile span,html body .ec-coltile span *,
html body .ec-cathero .in,html body .ec-cathero .in *{
  background:#ffffff !important; color:#000000 !important; border:0 !important; }
html body .ec-badge,html body .ec-sold{
  border-radius:999px !important; font-weight:900 !important; letter-spacing:.08em !important; }
html body .ec-tag,html body .ec-tag *{
  background:#000000 !important; color:#ffffff !important;
  border:2px solid #ffffff !important; border-radius:999px !important;
  font-weight:900 !important; text-decoration:none !important; }
html body a.ec-tag:hover{ background:#ffffff !important; color:#000000 !important; }

/* 見出し・ヒーロー・区画 */
html body .ec-hero,html body .ec-hero *{ color:#000000 !important; }
html body .ec-hero{ background:#ffffff !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; }
html body .ec-sec,html body .ec-featured,html body .ec-story,html body .ec-proof,
html body .ec-home,html body .ec-grid,html body .ec-colgrid,html body .ec-carousel,
html body .ec-morewrap,html body .ec-viewed{
  background:transparent !important; background-image:none !important; }
html body .ec-sec h2::after{ display:none !important; }

/* ストア内検索 */
html body .ec-search input{
  background:#0a0a0a !important; color:#ffffff !important;
  border:3px solid #ffffff !important; border-radius:0 !important; font-weight:700 !important; }
html body .ec-search button,html body .ec-search button *{
  background:#ffffff !important; color:#000000 !important;
  border:3px solid #ffffff !important; font-weight:900 !important; }

html body [class^="ea-"],html body [class*=" ea-"],
html body [class^="ea-"] *,html body [class*=" ea-"] *{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif !important;
  letter-spacing:normal !important; font-size:revert !important;
}
html body [class^="ea-"] h1,html body [class^="ea-"] h2,html body [class^="ea-"] h3{
  font-size:revert !important; letter-spacing:normal !important; }
html body [class^="ea-"] h2::after{ display:none !important; }

/* ── ㉑ ボタンは触れた瞬間に色を反転させる ──────────────────
   地の色とボタンの色が近いスキンでも、文字とアイコンが必ず読める。
   管理シェルと決済ウィジェットは対象外。 */
html body .btn:hover,html body .pu-btn:hover,html body .blk-btn:hover,
html body .rx-rbtn:hover,html body .oz-more:hover,
html body .ec-btn:hover,html body .ec-add:hover,html body .ec-fab:hover,
html body .tag-mini:hover,html body .bnl-cat:hover,html body .of-cat:hover{
  filter:invert(1) !important;
}
/* 地が透明なナビは invert が効かない（透明を反転しても透明のまま＝文字だけ消える）。
   地と文字を直接入れ替える。 */
html body #gh .gh-chips a:hover,html body #gh .gh-chips a:hover *,
html body .gh .gh-chips a:hover,html body .gh .gh-chips a:hover *{
  background:#000000 !important; color:#ffffff !important; border-color:#000000 !important;
  filter:none !important;
}
html body #gh .gh-chips a.active:hover,html body #gh .gh-chips a.active:hover *{
  background:#ffffff !important; color:#000000 !important; border-color:#000000 !important;
}
html body .retro-nav a:hover,html body .retro-nav a:hover *{
  background:#ffffff !important; color:#0a0a0a !important; border-color:#ffffff !important;
  filter:none !important;
}
html body .btn:active,html body .pu-btn:active,html body .blk-btn:active,
html body .ec-btn:active,html body .ec-add:active{ filter:invert(1) !important; }
html body [class^="ea-"]:hover,html body [class^="xfwp"]:hover,
html body [class*="paypal"]:hover{ filter:none !important; }

/* ── ⑯ 管理シェル（.xfwp-*）はスキンの影響を受けないよう戻す ─── */
html body [class^="xfwp"],html body [class*=" xfwp"],
html body [class^="xfwp"] *,html body [class*=" xfwp"] *{
  color:#ffffff !important;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif !important;
  font-weight:500 !important; letter-spacing:normal !important;
  font-size:revert !important; text-transform:none !important;
}
html body .xfwp-gh,html body .xfwp-foot,html body .xfwp-gh *,html body .xfwp-foot *{ color:#7a80a8 !important; }
html body [class^="xfwp"] a,html body [class*=" xfwp"] a{ box-shadow:none !important; border:0 !important; }
html body [class^="xfwp"] h1,html body [class^="xfwp"] h2,html body [class^="xfwp"] h3{
  font-size:revert !important; letter-spacing:normal !important; }
html body [class^="xfwp"] h2::after{ display:none !important; }
html body [class^="xfwp"] input,html body [class^="xfwp"] button{
  border-width:1px !important; border-radius:6px !important; padding:revert !important; }

/* ── ⑰ 端末対応・配慮 ───────────────────────────────────────── */
@media (max-width:680px){
  html body h1{ font-size:clamp(24px,6.4vw,32px) !important; }
  html body h2{ font-size:clamp(20px,5.6vw,26px) !important; }
  html body h2::after{ height:7px; border-width:2px; }
  html body .hh-hero h1,html body .blk-heroband h1,html body .hero h1{ font-size:clamp(26px,8vw,40px) !important; }
  html body .bar,html body .official-bar{ padding:11px 14px !important; font-size:16px !important; }
  html body .btn,html body .pu-btn,html body .blk-btn{ padding:11px 18px !important; }
  html body #gh,html body .gh,html body .site-top{ padding:12px 0 !important; border-bottom-width:6px !important; }
  html body .gf{ padding:36px 0 32px !important; border-top-width:8px !important; }
  html body .inv,html body .swap{ padding:32px 18px !important; }
  html body .inv-bleed{ padding-left:calc(50vw - 50% + 16px) !important;
    padding-right:calc(50vw - 50% + 16px) !important; }
}
@media (prefers-reduced-motion:reduce){
  html body .of-card:hover,html body .honpen-card:hover,html body .card:hover,
  html body .thumb-card:hover,html body .btn:hover,html body .pu-btn:hover,
  html body .blk-btn:hover{ transform:none !important; }
}
@media (max-width:680px){
  .of-card,.honpen-card,.card,.panel,.pu-side-box{box-shadow:none !important;transform:none !important;}
  body{background-attachment:scroll !important;}
}
@media (prefers-reduced-motion:reduce){
  .of-card,.honpen-card{transition:none !important;transform:none !important;}
}/* ══ Customize Factory 層（工房設定・最終適用＝最優先） ══ */

/* ═══ Customize Factory（工房レイヤー v1.1・色はスキン継承のみ） ═══ */
[hidden]{display:none !important;}
.mk1{background:linear-gradient(transparent 45%,#ffe37a 45%);padding:0 .12em;}
.mk2{border-bottom:3px solid #c3272e;padding-bottom:1px;}
.mk3{background:linear-gradient(transparent 40%,color-mix(in srgb,#d9a441 55%,transparent) 40%);box-shadow:inset 0 -2px 0 color-mix(in srgb,#d9a441 80%,transparent);padding:0 .12em;}
mark{background:linear-gradient(transparent 45%,#ffe37a 45%);padding:0 .12em;}
mark{color:inherit;}
.site-top,.gh{position:relative;border-bottom:0 !important;box-shadow:0 4px 18px color-mix(in srgb,#000000 40%,transparent) !important;}
.site-top,.gh::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px;background:#000000;-webkit-mask:radial-gradient(7px 8px at 7px 0,#000 97%,transparent) 0 0/14px 8px repeat-x;mask:radial-gradient(7px 8px at 7px 0,#000 97%,transparent) 0 0/14px 8px repeat-x;pointer-events:none;opacity:.9;}
@keyframes dfFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.wrap,main{animation:dfFade .5s ease backwards;}
@keyframes dfGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.wrap h2:not(.bar)::after,.article-body h2::after{animation:dfGrow .7s .15s cubic-bezier(.2,.7,.2,1) both;transform-origin:left;}
.of-card:hover,.card:hover,.honpen-card:hover{box-shadow:0 2px 4px rgba(10,12,30,.06),0 14px 30px rgba(10,12,30,.10),0 0 0 1px color-mix(in srgb,#000000 55%,transparent) !important;}
@keyframes dfGlint{0%{transform:translateX(-130%) skewX(-18deg);}100%{transform:translateX(240%) skewX(-18deg);}}
.of-card,.card,.honpen-card{overflow:hidden;}
.of-card:hover::after,.card:hover::after{content:"" !important;position:absolute;top:0;bottom:0;width:34%;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent) !important;height:auto !important;border-radius:0 !important;animation:dfGlint .8s ease;}
.of-card:hover,.honpen-card:hover,.card:hover{transform:translateY(-5px) !important;}
@media (prefers-reduced-motion:reduce){.wrap,main,.of-card,.card{animation:none !important;transition:none !important;}}
/* ══════════════════════════════════════════════════════════════════
   背景画像 ─ スマホで重くならない描き方
   ------------------------------------------------------------------
   従来は body に background-attachment:fixed を当てていたが、これは
   スクロールのたびにブラウザが画面全体を描き直す。スマホでは
   1フレームごとに大きな画像を貼り直すため、極端に重くなる。
   代わりに position:fixed の固定レイヤーを1枚だけ敷く。合成レイヤーに
   載るので、スクロール中の再描画がゼロになる。
   ══════════════════════════════════════════════════════════════════ */
html::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),
    url("uploads/img/20260831174735c13997.jpg");
  background-repeat:no-repeat; background-size:cover; background-position:center;
  transform:translateZ(0);          /* 合成レイヤーへ隔離してスクロール時の再描画をなくす */
  backface-visibility:hidden;
}
html body{ background-color:transparent !important; background-image:none !important; }

/* ══ タッチ端末・小さい画面の描画負荷対策（全スキン共通・最終適用） ══
   スキン側の柄背景も含め、固定貼り付けをすべて解除する。 */
@media (max-width:900px), (pointer:coarse){
  *,html,html body{ background-attachment:scroll !important; }
}