@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&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,#c8102e);
  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,#c8102e); }
.pu-ep-row.v2 .no .new{ margin-left:8px; background:var(--dz-accent,#c8102e); 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,#c8102e); 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 #c8102e; 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:#ffffff; --dz-surface:#ffffff; --dz-hover:#ffffff;
  --dz-text:#c8102e; --dz-muted:#c8102e; --dz-line:#c8102e;
  --dz-accent:#c8102e; --dz-heading:#c8102e; --dz-button:#c8102e;
  --dz-bar-bg:#c8102e; --dz-bar-text:#ffffff;
  --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:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",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; }
.gh-chips a.gh-chip-accent{ background:var(--dz-accent); color:#fff; }   /* v5.1：強調メニュー（旧 inline style を class 化。スキンから上書き可） */
.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:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",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:#0f0f0f; --dz-button:#0f0f0f; --dz-bar:#000000; }
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 > 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 ══ */


/* ============================================================
   コントラスト強化 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; }
/* 見出しブロックの先端の点は廃止（v2.5.0）。文字の頭に重なって、ゴミのように見えていたため。点のために空けていた左の余白も無くす */
.blk-h{ position:relative; padding-left:0; }
/* ボタン：キレのある押し心地（沈み込み） */
.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: jinja ═══ */
:root{--dz-g1:#c8102e;--dz-g2:#c8102e;--dz-g3:#c8102e;--dz-grad:linear-gradient(120deg,#c8102e,#c8102e 55%,#c8102e);}
/* ── 紙面：まっ白。色は朱の一色だけ。柄・影・グラデーションは使わない ── */
html body{background:#fff !important;background-image:none !important;color:#c8102e !important;}
html body,html body p,html body li,html body td{letter-spacing:.04em !important;}
html body .article-body,html body .page-body{line-height:2.05 !important;}
html body *{text-shadow:none !important;}
html body ::selection{background:#c8102e;color:#fff;}
/* ── ヘッダー＝鳥居。上に朱の笠木と貫（二本の横木）、下に注連縄と紙垂 ── */
html body .gh,html body header.gh,html body header#gh.gh,html body .site-top{background-color:#fff !important;background-image:linear-gradient(#c8102e,#c8102e),linear-gradient(#c8102e,#c8102e),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Crect y='1' width='120' height='5' fill='%23c8102e'/%3E%3Cg stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M4 6l4-5M16 6l4-5M28 6l4-5M40 6l4-5M52 6l4-5M64 6l4-5M76 6l4-5M88 6l4-5M100 6l4-5M112 6l4-5'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%23c8102e' stroke-width='1.2' stroke-linejoin='miter'%3E%3Cpath d='M24 6h8v6h4v6h4v6h-8v-6h-4v-6h-4z'/%3E%3Cpath d='M84 6h8v6h4v6h4v6h-8v-6h-4v-6h-4z'/%3E%3C/g%3E%3Cg stroke='%23c8102e' stroke-width='1.4'%3E%3Cpath d='M58 6v8M60 6v11M62 6v8'/%3E%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat,no-repeat,repeat-x !important;background-size:100% 7px,100% 2px,120px 26px !important;background-position:0 0,0 11px,left bottom !important;padding-top:15px !important;padding-bottom:28px !important;border:0 !important;border-bottom:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;overflow:visible !important;}
html body .gh::after{content:none !important;}
html body #gh .gh-search,html body #gh .gh-search *,html body #gh .gh-sug{box-shadow:none !important;}
html body #gh .gh-sug{border:1.5px solid #c8102e !important;border-radius:0 !important;background:#fff !important;}
html body .hb-drawer{z-index:1300 !important;}
html body .gh.scrolled{box-shadow:none !important;}
html body .gh-logo,html body .gh-logotype,html body .hb-title,html body .gf-logo{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;font-weight:700 !important;letter-spacing:.28em !important;color:#c8102e !important;}
html body .gh-logotype::before{content:"";display:inline-block;width:26px;height:23px;margin-right:10px;vertical-align:-4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
html body .gh-cross{display:none !important;}
/* ハンバーガー＝鳥居のしるし */
html body .gh-burger{background:#fff !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;}
html body .gh-burger .hb-lines{display:block !important;width:28px !important;height:24px !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;}
html body .gh-burger .hb-lines i{display:none !important;}
/* 検索・丸ボタン＝朱の枠。押すと朱で塗る */
html body .gh-search input{background:#fff !important;border:1.5px solid #c8102e !important;border-radius:0 !important;color:#c8102e !important;}
html body .gh-search input::placeholder{color:#c8102e !important;opacity:.55;}
html body .gh-search input:focus{box-shadow:inset 0 0 0 1px #c8102e !important;outline:none !important;}
html body .gh-search button,html body .gh-iconbtn{background:#fff !important;color:#c8102e !important;border:0 !important;box-shadow:none !important;}
html body .gh-pill{border-radius:0 !important;border:1.5px solid #c8102e !important;background:#fff !important;color:#c8102e !important;box-shadow:none !important;font-weight:700 !important;letter-spacing:.1em;}
html body .gh-pill:hover,html body .gh-pill.gh-accent{background:#c8102e !important;color:#fff !important;}
/* メニュー＝木札（千社札）。上に紐の穴。現在地は朱で塗った札 */
html body .gh-chips{background:#fff !important;border:0 !important;gap:8px !important;padding:8px 12px 12px !important;}
html body .gh-chips a{position:relative;border-radius:0 !important;background:#fff !important;color:#c8102e !important;border:1.5px solid #c8102e !important;padding:13px 14px 7px !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;font-weight:700 !important;letter-spacing:.16em !important;font-size:13px !important;box-shadow:none !important;}
html body .gh-chips a::before{content:"" !important;position:absolute;left:50%;top:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#c8102e;}
html body .gh-chips a:hover,html body .gh-chips a.active,html body .gh-chips a.gh-chip-accent{background:#c8102e !important;color:#fff !important;}
html body .gh-chips a:hover::before,html body .gh-chips a.active::before,html body .gh-chips a.gh-chip-accent::before{background:#fff;}
/* 告知帯＝朱の幟（のぼり） */
html body .ticker{background:#c8102e !important;color:#fff !important;border:0 !important;letter-spacing:.2em !important;font-size:12px !important;}
html body .ticker a{color:#fff !important;}
/* ── 見出し＝頭に鳥居、下に朱の二重線 ── */
html body .bar,html body .official-bar{background:#c8102e !important;color:#fff !important;border:0 !important;border-radius:0 !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;letter-spacing:.2em !important;font-weight:700 !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;padding-top:10px !important;padding-bottom:10px !important;}
html body .bar::before,html body .official-bar::before{content:"" !important;display:inline-block !important;width:20px;height:18px;margin-right:10px;vertical-align:-3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;border:0 !important;}
html body .bar > span:first-child::before,html body .official-bar > span:first-child::before{content:none !important;}
html body .bar .more,html body .bar a{color:#fff !important;}
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;color:#c8102e !important;font-weight:700 !important;letter-spacing:.14em !important;background:none !important;}
html body .wrap > h2,html body .page-body h2,html body .article-body h2,html body .blk-h h2,html body .blk-h h3,html body .pu-sec h2,html body .section-head h2{display:block;padding:0 0 9px 32px !important;margin-bottom:14px !important;border:0 !important;border-bottom:4px double #c8102e !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") left 2px/24px 21px no-repeat !important;}
html body .wrap > h2::before,html body .wrap > h2::after,html body .page-body h2::before,html body .page-body h2::after,html body .article-body h2::before,html body .article-body h2::after,html body .blk-h h2::before,html body .blk-h h2::after,html body .blk-h h3::before,html body .blk-h h3::after,html body .pu-sec h2::before,html body .pu-sec h2::after,html body .section-head h2::before,html body .section-head h2::after,html body .blk-h::before,html body .blk-h::after{content:none !important;display:none !important;}
html body .pu-sec,html body .section-head{border:0 !important;background:transparent !important;padding-left:0 !important;align-items:baseline !important;}
html body .pu-sec h2 small{background:none !important;color:#c8102e !important;font-weight:400 !important;letter-spacing:.3em !important;font-size:10.5px !important;margin-left:12px !important;transform:none !important;padding:0 !important;}
html body .pu-sec .more,html body .ez-head a{color:#c8102e !important;font-weight:700 !important;}
html body .pu-side-box h3,html body .side-menu h3,html body .ez-head b{color:#c8102e !important;border:0 !important;border-bottom:1.5px solid #c8102e !important;padding:0 0 6px 0 !important;background:none !important;letter-spacing:.22em !important;}
html body .pu-side-box h3::before,html body .pu-side-box h3::after{content:none !important;}
/* ── 面＝白い札。朱の枠、上辺だけ太く（笠木）。影なし ── */
html body .of-card,html body .honpen-card,html body .card,html body .panel,html body .pu-side-box,html body .notice,html body .music-item,html body .box,html body .side-menu,html body .pu-empty,html body .ec-card,html body .mk-card,html body .official-zone,html body .empty-note{background:#fff !important;background-image:none !important;color:#c8102e !important;border:1.5px solid #c8102e !important;border-top:5px solid #c8102e !important;border-radius:0 !important;box-shadow:none !important;outline:0 !important;}
html body .of-card::before,html body .honpen-card::before,html body .card::before,html body .pu-side-box::before,html body .of-card::after,html body .card::after,html body .pu-side-box::after{content:none !important;display:none !important;}
html body .of-card:hover,html body .honpen-card:hover,html body .card:hover,html body .ec-card:hover{transform:none !important;box-shadow:inset 0 0 0 2px #c8102e !important;}
html body .of-card .t,html body .honpen-card .t{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;font-weight:700 !important;color:#c8102e !important;}
html body .of-card .m,html body .muted,html body .hb-sub,html body .hb-sec,html body .oz-sub{color:#c8102e !important;opacity:.7;}
html body .of-card .frame img,html body .honpen-card img,html body .blk-img img,html body .blk-banner img,html body .blk-video iframe,html body .dz-slides,html body .gf-shop-item .c{border-radius:0 !important;}
/* しるし＝朱印（丸い判） */
html body .of-new{background:#fff !important;color:#c8102e !important;border:2px solid #c8102e !important;border-radius:50% !important;width:38px;height:38px;display:flex !important;align-items:center;justify-content:center;font-size:9.5px !important;font-weight:800 !important;letter-spacing:0 !important;transform:rotate(-8deg) !important;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #c8102e !important;padding:0 !important;}
html body .of-cat,html body .of-snd,html body .of-cat-label.on{background:#c8102e !important;color:#fff !important;border-radius:0 !important;border-color:#c8102e !important;letter-spacing:.12em;}
html body .of-cat-label{border-radius:0 !important;border:1.5px solid #c8102e !important;background:#fff !important;color:#c8102e !important;box-shadow:none !important;}
/* 引用＝朱の縦線。区切り＝注連縄と紙垂 */
html body blockquote{background:#fff !important;border:0 !important;border-left:5px solid #c8102e !important;border-radius:0 !important;padding:6px 18px !important;color:#c8102e !important;box-shadow:none !important;}
html body blockquote::before{content:none !important;}
html body hr{border:0 !important;height:26px !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Crect y='1' width='120' height='5' fill='%23c8102e'/%3E%3Cg stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M4 6l4-5M16 6l4-5M28 6l4-5M40 6l4-5M52 6l4-5M64 6l4-5M76 6l4-5M88 6l4-5M100 6l4-5M112 6l4-5'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%23c8102e' stroke-width='1.2' stroke-linejoin='miter'%3E%3Cpath d='M24 6h8v6h4v6h4v6h-8v-6h-4v-6h-4z'/%3E%3Cpath d='M84 6h8v6h4v6h4v6h-8v-6h-4v-6h-4z'/%3E%3C/g%3E%3Cg stroke='%23c8102e' stroke-width='1.4'%3E%3Cpath d='M58 6v8M60 6v11M62 6v8'/%3E%3C/g%3E%3C/svg%3E") center top/120px 26px repeat-x !important;margin:30px auto !important;opacity:1 !important;}
html body hr::before,html body hr::after{content:none !important;}
/* ── ボタン＝朱印。朱の地に白い内枠。枠だけボタンは白地に朱の二重枠 ── */
html body .btn.primary,html body .pu-btn:not(.ghost),html body .blk-btn,html body .btn.official,html body button[type=submit]:not(.gh-search button):not(.hb-x){background:#c8102e !important;color:#fff !important;border:1.5px solid #c8102e !important;border-radius:0 !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;font-weight:700 !important;letter-spacing:.2em !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;padding-left:22px !important;padding-right:22px !important;}
html body .btn.primary:hover,html body .pu-btn:not(.ghost):hover,html body .blk-btn:hover,html body .btn.official:hover{background:#fff !important;color:#c8102e !important;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #c8102e !important;filter:none !important;transform:none !important;}
html body .pu-btn.ghost,html body .btn:not(.primary):not(.danger):not(.official),html body .oz-more,html body .rx-rbtn{background:#fff !important;color:#c8102e !important;border:4px double #c8102e !important;border-radius:0 !important;box-shadow:none !important;font-weight:700 !important;letter-spacing:.14em !important;}
html body .pu-btn.ghost:hover,html body .btn:not(.primary):not(.danger):not(.official):hover,html body .oz-more:hover{background:#c8102e !important;color:#fff !important;}
html body input,html body select,html body textarea{background:#fff !important;border:1.5px solid #c8102e !important;border-radius:0 !important;color:#c8102e !important;box-shadow:none !important;}
html body input:focus,html body textarea:focus,html body select:focus{outline:none !important;box-shadow:inset 0 0 0 1px #c8102e !important;}
html body a{color:#c8102e;}
html body a:hover{color:#c8102e;text-decoration:underline;}
html body .side-menu a,html body .pu-side-list a{color:#c8102e !important;}
html body .pu-side-list li{border-bottom:1px solid #c8102e !important;}
/* ── フッター＝玉垣（社を囲む朱の柵）の内側。白地に朱の文字 ── */
html body .gf,html body footer.gf,html body .site-footer{background-color:#fff !important;background-image:linear-gradient(#c8102e,#c8102e),linear-gradient(#c8102e,#c8102e),repeating-linear-gradient(90deg,#c8102e 0 7px,transparent 7px 18px) !important;background-repeat:no-repeat !important;background-size:100% 3px,100% 3px,100% 30px !important;background-position:0 6px,0 18px,0 0 !important;padding-top:46px !important;color:#c8102e !important;border:0 !important;box-shadow:none !important;}
html body .gf::before,html body .site-footer::before{content:none !important;}
html body .gf a,html body .gf .gf-desc,html body .gf-col h3,html body .gf-bottom,html body .gf-cnt{color:#c8102e !important;}
html body .gf-col h3{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;letter-spacing:.26em !important;border:0 !important;border-bottom:1.5px solid #c8102e !important;padding:0 0 6px !important;font-size:12px !important;}
html body .gf-logo::before{content:"";display:inline-block;width:24px;height:21px;margin-right:8px;vertical-align:-3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
html body .gf-bottom{border-top:1.5px solid #c8102e !important;font-size:11.5px !important;letter-spacing:.1em;}
html body .gf-museum,html body .gf-shop{background:#fff !important;border-top:1.5px solid #c8102e !important;}
html body .gf-museum{padding-top:16px !important;}
html body .gf-museum a{border-radius:0 !important;border:1.5px solid #c8102e !important;background:#fff !important;color:#c8102e !important;letter-spacing:.12em;}
html body .gf-museum a:hover{background:#c8102e !important;color:#fff !important;text-decoration:none;}
html body .gf-shop-eyebrow,html body .gf-shop-item,html body .gf-shop-item .p{color:#c8102e !important;}
html body .gf-shop-item .c{border:1.5px solid #c8102e !important;background:#fff !important;}
html body .gf-shop-item .so{background:#c8102e !important;}
/* ── ドロワー（スマホのメニュー）＝参道。頭に大きな鳥居、行は朱の線で区切る ── */
html body .hb-scrim{background:rgba(255,255,255,.82) !important;backdrop-filter:none !important;}
html body .hb-panel{background:#fff !important;color:#c8102e !important;border-radius:0 !important;border-right:7px solid #c8102e !important;box-shadow:none !important;}
html body .hb-crest{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center 18px/74px 64px no-repeat !important;padding-top:96px !important;border:0 !important;border-bottom:4px double #c8102e !important;text-align:center;}
html body .hb-cross{display:none !important;}
html body .hb-sec{letter-spacing:.3em !important;font-size:10.5px !important;}
html body .hb-links{gap:0 !important;}
html body .hb-links .hb-link,html body .hb-link{background:#fff !important;border:0 !important;border-bottom:1.5px solid #c8102e !important;border-radius:0 !important;color:#c8102e !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;font-weight:700 !important;letter-spacing:.16em !important;}
html body .hb-link .hb-lt{color:#c8102e !important;}
html body .hb-links .hb-link:hover,html body .hb-links .hb-link.active{background:#c8102e !important;color:#fff !important;box-shadow:none !important;}
html body .hb-link:hover .hb-lt,html body .hb-link.active .hb-lt{color:#fff !important;}
html body .hb-link .hb-li{border-color:#c8102e !important;}
html body .hb-link:hover .hb-li,html body .hb-link.active .hb-li{border-color:#fff !important;}
html body .hb-link .hb-li{background:transparent !important;}
html body .hb-link .hb-li svg{color:#c8102e !important;}
html body .hb-link:hover .hb-li svg,html body .hb-link.active .hb-li svg{color:#fff !important;}
html body .hb-x{border-radius:50% !important;border:2px solid #c8102e !important;color:#c8102e !important;background:#fff !important;box-shadow:none !important;}
html body .hb-login{background:#c8102e !important;color:#fff !important;border-radius:0 !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;}
html body .hb-login *{color:#fff !important;}
html body .hb-foot,html body .hb-ext a{color:#c8102e !important;font-size:10.5px !important;line-height:1.9;}
/* 画像のない大型ヒーロー＝白い境内に大きな鳥居（赤いベタ塗りにしない）。写真があるときは写真が主役 */
html body .xfgh-grad{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center 42%/min(46vw,300px) auto no-repeat !important;opacity:1 !important;}
html body .xfgh-grad ~ .xfgh-shade,html body .xfgh-grad ~ .xfgh-motes,html body .xfgh-grad ~ .xfgh-beam{display:none !important;}
html body .xfgh-media:has(.xfgh-grad) ~ .xfgh-in,html body .xfgh-media:has(.xfgh-grad) ~ .xfgh-in *,html body .xfgh-media:has(.xfgh-grad) ~ .xfgh-cue{color:#c8102e !important;}
html body .xfgh{border-bottom:7px solid #c8102e !important;background:#fff !important;}
html body .xfgh-tt{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;letter-spacing:.3em !important;font-weight:700 !important;}
html body .zk-hero{background:#fff !important;color:#c8102e !important;border:1.5px solid #c8102e !important;border-top:7px solid #c8102e !important;border-radius:0 !important;}
html body .zk-hero::before{content:none !important;}
html body .zk-hero *{color:#c8102e !important;}
html body .kb-btn,html body .wrap a[class$="-btn"],html body .wrap button[class$="-btn"]{border-radius:0 !important;background:#fff !important;color:#c8102e !important;border:4px double #c8102e !important;box-shadow:none !important;font-weight:700 !important;letter-spacing:.14em !important;}
html body .kb-btn:hover,html body .wrap a[class$="-btn"]:hover{background:#c8102e !important;color:#fff !important;border:1.5px solid #c8102e !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;}
html body .gf-col h3::before,html body .gf-col h3::after{content:none !important;}
/* ── 大型ヒーロー・固定ボタン ── */
html body .xf-hero-slot h1,html body .pu-hero-over h1,html body .hh-hero h1{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;letter-spacing:.32em !important;}
html body .pu-hero-over{background:#fff !important;border:1.5px solid #c8102e !important;border-top:7px solid #c8102e !important;color:#c8102e !important;}
html body .pu-hero-over *{color:#c8102e !important;}
html body .to-top{border-radius:0 !important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/26px 23px no-repeat !important;border:1.5px solid #c8102e !important;box-shadow:none !important;}
html body .to-top svg{display:none !important;}
html body .ec-fab{border-radius:50% !important;background:#c8102e !important;color:#fff !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;}
html body .official-zone .oz-head{background:transparent !important;border:0 !important;border-bottom:4px double #c8102e !important;}
html body .oz-logo{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;letter-spacing:.26em !important;color:#c8102e !important;}
html body .main-col,html body .main-col p,html body .main-col li,html body .main-col td,html body .main-col th,html body .main-col b,html body .main-col strong,html body .main-col a,html body .side,html body .side a{color:#c8102e !important;}
html body .main-col .btn.primary,html body .main-col .pu-btn:not(.ghost),html body .main-col .blk-btn,html body .main-col .btn.official,html body .main-col .bar a,html body .main-col .bar b,html body .main-col .of-cat-label.on,html body .main-col .kb-btn:first-child{color:#fff !important;}
html body .main-col .btn.primary:hover,html body .main-col .pu-btn:not(.ghost):hover,html body .main-col .blk-btn:hover,html body .main-col .btn.official:hover{color:#c8102e !important;}
html body .panel,html body .panel.dotted,html body .dotted{border-radius:0 !important;}
html body .side-empty{border:1.5px dashed #c8102e !important;color:#c8102e !important;background:#fff !important;}
/* ════════ v5.3 作りこみ：参道の余白・見出しの格・本文の組み・高札の屋根 ════════ */
html{scrollbar-color:#c8102e #fff;}
html body{font-size:16.5px !important;}
html body :focus-visible{outline:3px double #c8102e !important;outline-offset:3px !important;}
/* ── 余白＝参道。鳥居（ヘッダー）をくぐってから本文まで、ひと呼吸おく ── */
html body .layout{padding-top:48px !important;padding-bottom:84px !important;}
html body .main-col .wrap{padding-left:clamp(16px,3vw,36px) !important;padding-right:clamp(16px,3vw,36px) !important;}
html body .main-col p{line-height:2.05 !important;margin-bottom:1.5em;}
html body .of-grid,html body .honpen-grid{gap:30px 24px !important;}
html body .pu-cols3{gap:clamp(20px,3vw,44px) !important;}
html body .pu-side-box,html body .side-menu{padding:22px 20px 20px !important;margin-bottom:38px !important;}
html body .explore-zone{margin-top:72px !important;padding-top:8px !important;}
/* ── 章見出し（トップの各区画）＝中央に鳥居、その下に見出し、結びに注連縄 ── */
html body .pu-sec,html body .section-head{display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;gap:10px !important;margin:84px 0 34px !important;padding:0 !important;border:0 !important;background:none !important;position:relative;}
html body .wrap > .pu-sec:first-child,html body .pu-col > .pu-sec:first-child{margin-top:8px !important;}
html body .pu-sec::before,html body .section-head::before{content:"" !important;display:block !important;width:44px;height:39px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
html body .pu-sec::after,html body .section-head::after{content:"" !important;display:block !important;position:static !important;width:120px !important;height:26px !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Crect y='1' width='120' height='5' fill='%23c8102e'/%3E%3Cg stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M4 6l4-5M16 6l4-5M28 6l4-5M40 6l4-5M52 6l4-5M64 6l4-5M76 6l4-5M88 6l4-5M100 6l4-5M112 6l4-5'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%23c8102e' stroke-width='1.2' stroke-linejoin='miter'%3E%3Cpath d='M24 6h8v6h4v6h4v6h-8v-6h-4v-6h-4z'/%3E%3Cpath d='M84 6h8v6h4v6h4v6h-8v-6h-4v-6h-4z'/%3E%3C/g%3E%3Cg stroke='%23c8102e' stroke-width='1.4'%3E%3Cpath d='M58 6v8M60 6v11M62 6v8'/%3E%3C/g%3E%3C/svg%3E") center/120px 26px no-repeat !important;margin-top:4px;}
html body .pu-sec h2,html body .section-head h2{display:block !important;background:none !important;border:0 !important;padding:0 !important;margin:0 !important;font-size:clamp(21px,2.6vw,27px) !important;letter-spacing:.36em !important;text-indent:.36em;line-height:1.6 !important;}
html body .pu-sec h2 small{display:block !important;margin:8px 0 0 !important;font-size:10px !important;letter-spacing:.46em !important;text-indent:.46em;opacity:.8;}
html body .pu-sec .more,html body .section-head .more{order:9;margin-top:6px !important;border:1.5px solid #c8102e !important;padding:6px 16px !important;font-size:11.5px !important;letter-spacing:.2em !important;color:#c8102e !important;background:#fff !important;text-decoration:none !important;}
html body .pu-sec .more:hover{background:#c8102e !important;color:#fff !important;}
/* ── 頁の題（h1）＝両脇に紙垂。上に鳥居 ── */
html body .of-title,html body .wrap > h1,html body .page-title,html body .zk-hero h1{display:block !important;text-align:center !important;font-size:clamp(24px,3.4vw,34px) !important;letter-spacing:.3em !important;text-indent:.3em;line-height:1.7 !important;margin:10px 0 18px !important;padding:56px 0 20px !important;border:0 !important;border-bottom:4px double #c8102e !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center top/50px 44px no-repeat !important;}
html body .of-meta,html body .zk-eyebrow{text-align:center !important;letter-spacing:.24em !important;font-size:11.5px !important;margin-bottom:34px !important;}
/* ── 本文の組み：読む幅をしぼり、見出しに格をつける ── */
html body .of-body,html body .article-body,html body .page-body{max-width:44em;margin-left:auto !important;margin-right:auto !important;counter-reset:jsec;font-size:16.5px;}
html body .of-body h2,html body .article-body h2,html body .page-body h2{counter-increment:jsec;display:flex !important;align-items:center;gap:14px;background:none !important;padding:0 0 12px !important;margin:76px 0 26px !important;font-size:22px !important;letter-spacing:.2em !important;line-height:1.6 !important;border:0 !important;border-bottom:4px double #c8102e !important;}
html body .of-body h2::before,html body .article-body h2::before,html body .page-body h2::before{content:counter(jsec,japanese-formal) !important;display:flex !important;flex:none;align-items:center;justify-content:center;width:38px;height:38px;background:#c8102e;color:#fff;font-size:17px;letter-spacing:0;font-weight:700;box-shadow:inset 0 0 0 2px #c8102e,inset 0 0 0 3px #fff;position:static !important;}
html body .of-body h3,html body .article-body h3,html body .page-body h3{position:relative;display:block !important;background:none !important;margin:52px 0 18px !important;padding:0 0 9px 24px !important;font-size:18.5px !important;letter-spacing:.16em !important;border:0 !important;border-bottom:1.5px solid #c8102e !important;}
html body .of-body h3::before,html body .article-body h3::before,html body .page-body h3::before{content:"" !important;display:block !important;position:absolute !important;left:3px;top:.55em;width:9px;height:9px;background:#c8102e;transform:rotate(45deg);}
html body .of-body h3::after,html body .article-body h3::after,html body .page-body h3::after{content:none !important;}
html body .of-body h4,html body .article-body h4,html body .page-body h4{margin:38px 0 12px !important;font-size:16.5px !important;letter-spacing:.14em !important;padding-left:14px !important;border-left:5px double #c8102e !important;}
html body .of-body p,html body .article-body p,html body .page-body p{margin:0 0 1.7em !important;text-align:justify;}
html body .of-body a,html body .article-body a,html body .page-body a{text-decoration:underline dotted !important;text-underline-offset:5px;}
html body .of-body ul,html body .article-body ul,html body .page-body ul{list-style:none !important;padding-left:0 !important;margin:0 0 1.8em !important;}
html body .of-body ul > li,html body .article-body ul > li,html body .page-body ul > li{position:relative;padding:7px 0 7px 26px !important;border-bottom:1px dotted #c8102e;line-height:1.95;}
html body .of-body ul > li::before,html body .article-body ul > li::before,html body .page-body ul > li::before{content:"";position:absolute;left:5px;top:1.05em;width:8px;height:8px;border:2px solid #c8102e;border-radius:50%;}
html body .of-body ol,html body .article-body ol,html body .page-body ol{list-style:cjk-ideographic !important;padding-left:2.6em !important;margin:0 0 1.8em !important;}
html body .of-body ol > li,html body .article-body ol > li,html body .page-body ol > li{padding:6px 0 6px 6px !important;line-height:1.95;}
html body .of-body ol > li::marker{font-weight:700;color:#c8102e;}
/* 引用＝御神籤の紙。朱の二重枠、左上に紙垂 */
html body .of-body blockquote,html body .article-body blockquote,html body .page-body blockquote,html body .main-col blockquote{border:4px double #c8102e !important;border-left:4px double #c8102e !important;padding:22px 24px 20px 58px !important;margin:34px 0 !important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M2 1h8v7h4v7h4v8h-8v-7h-4v-7h-4z' fill='%23ffffff' stroke='%23c8102e' stroke-width='1.3'/%3E%3C/svg%3E") 18px -1px/24px 28px no-repeat !important;line-height:2.05;}
/* 表＝朱の罫。見出し行は朱で塗る */
html body .main-col table{border-collapse:collapse !important;width:100%;margin:30px 0 !important;border:1.5px solid #c8102e !important;background:#fff !important;}
html body .main-col th{background:#c8102e !important;color:#fff !important;font-weight:700 !important;letter-spacing:.14em;padding:11px 14px !important;border:1px solid #c8102e !important;}
html body .main-col td{padding:11px 14px !important;border:1px solid #c8102e !important;background:#fff !important;}
/* 本文の画像＝白い余白をとった朱の額 */
html body .of-body img,html body .article-body img,html body .page-body img,html body .of-eyecatch img{padding:8px !important;background:#fff !important;border:1.5px solid #c8102e !important;box-sizing:border-box;max-width:100%;height:auto;}
html body .of-eyecatch{margin:0 auto 40px !important;max-width:52em;}
/* ── 高札の屋根：箱の上に、左右へ張り出す朱の笠木をのせる ── */
html body .pu-side-box,html body .side-menu,html body .official-zone,html body .of-panel,html body .official-post,html body .zk-hero,html body .ab-plate{position:relative !important;overflow:visible !important;margin-top:16px !important;}
html body .pu-side-box::before,html body .side-menu::before,html body .official-zone::before,html body .of-panel::before,html body .official-post::before,html body .zk-hero::before,html body .ab-plate::before{content:"" !important;display:block !important;position:absolute !important;inset:auto !important;top:-13px !important;left:-9px !important;right:-9px !important;height:6px !important;width:auto !important;background:#c8102e !important;opacity:1 !important;z-index:1;border-radius:0 !important;}
html body .official-post,html body .of-panel,html body .ab-plate{background:#fff !important;border:1.5px solid #c8102e !important;border-top:5px solid #c8102e !important;border-radius:0 !important;box-shadow:none !important;padding:clamp(20px,3.4vw,44px) !important;}
html body .pu-side-box h3,html body .side-menu h3{text-align:center !important;border:0 !important;border-bottom:4px double #c8102e !important;padding:0 0 12px !important;margin:0 0 14px !important;font-size:14.5px !important;letter-spacing:.34em !important;text-indent:.34em;}
html body .pu-side-list li,html body .side-menu li{padding:9px 2px !important;}
/* 札（カード）：題と日付に余白。日付の頭に小さな鳥居 */
html body .of-card .t,html body .honpen-card .t{padding:14px 14px 4px !important;line-height:1.75 !important;font-size:14.5px !important;letter-spacing:.08em !important;}
html body .of-card .m{padding:0 14px 14px !important;font-size:11px !important;letter-spacing:.14em;opacity:1 !important;}
html body .of-card .m::before{content:"";display:inline-block;width:13px;height:11px;margin-right:6px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
/* 空の区画＝まだ何も奉じられていない社。点線の枠に小さな鳥居 */
html body .pu-empty,html body .empty-note{border:1.5px dashed #c8102e !important;border-top:1.5px dashed #c8102e !important;text-align:center !important;padding:66px 20px 30px !important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center 22px/34px 30px no-repeat !important;letter-spacing:.14em;}
/* 幟（告知帯）：上下に白い細線 */
html body .ticker{box-shadow:inset 0 3px 0 #c8102e,inset 0 4px 0 #fff,inset 0 -3px 0 #c8102e,inset 0 -4px 0 #fff !important;padding-top:9px !important;padding-bottom:9px !important;}
/* 分類の札・ページ送り＝小さな木札 */
html body .of-cat-label,html body .pager a,html body .pagination a,html body .tag,html body .chip{padding:6px 12px !important;letter-spacing:.12em !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;}
/* ── フッターの結び：玉垣の内に列、いちばん下に鳥居 ── */
html body .gf-in{padding-top:26px !important;padding-bottom:26px !important;}
html body .gf-cols{gap:clamp(24px,4vw,56px) !important;}
html body .gf-col a{display:block !important;padding:8px 0 !important;border-bottom:1px dotted #c8102e !important;letter-spacing:.1em;text-decoration:none !important;}
html body .gf-col a:hover{padding-left:8px !important;text-decoration:none !important;}
html body .gf-desc{line-height:2.1 !important;letter-spacing:.12em;}
html body .gf-bottom{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px;text-align:center !important;margin-top:44px !important;padding-top:26px !important;border-top:4px double #c8102e !important;letter-spacing:.22em !important;}
html body .gf-bottom::before{content:"";display:block;width:54px;height:47px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;margin-bottom:6px;}
/* 画像のない大型ヒーロー：題を鳥居の下、まん中へ */
html body .xfgh-media:has(.xfgh-grad) ~ .xfgh-in{left:0 !important;right:0 !important;width:100% !important;max-width:none !important;text-align:center !important;align-items:center !important;padding-bottom:60px !important;}
html body .xfgh-media:has(.xfgh-grad) ~ .xfgh-in .xfgh-tag{letter-spacing:.5em !important;font-size:11px !important;}
html body .xfgh-media:has(.xfgh-grad) ~ .xfgh-in .xfgh-tt{font-size:clamp(26px,4.6vw,48px) !important;letter-spacing:.4em !important;text-indent:.4em;}
/* v5.3 仕上げ：ほかの層に負けていたボタン・題・フッター下段を確定させる */
html body .layout a.pu-btn,html body .layout button.pu-btn,html body .layout a.kb-btn,html body .layout a.btn,html body .layout button.btn,html body .explore-zone a.btn,html body .explore-zone a.pu-btn{border-radius:0 !important;background:#fff !important;background-image:none !important;color:#c8102e !important;border:4px double #c8102e !important;box-shadow:none !important;font-weight:700 !important;letter-spacing:.16em !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;text-decoration:none !important;transform:none !important;filter:none !important;}
html body .layout a.pu-btn:not(.ghost),html body .layout button.pu-btn:not(.ghost),html body .layout a.btn.primary,html body .layout button.btn.primary,html body .layout a.btn.official,html body .layout a.kb-btn:first-child,html body .explore-zone a.btn.official{background:#c8102e !important;color:#fff !important;border:1.5px solid #c8102e !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;padding-top:11px !important;padding-bottom:11px !important;}
html body .layout a.pu-btn:hover,html body .layout a.kb-btn:hover,html body .layout a.btn:hover,html body .layout button.btn:hover{background:#c8102e !important;color:#fff !important;}
html body .layout a.pu-btn:not(.ghost):hover,html body .layout a.btn.primary:hover,html body .layout a.btn.official:hover,html body .layout a.kb-btn:first-child:hover{background:#fff !important;color:#c8102e !important;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #c8102e !important;}
html body .of-title::before,html body .of-title::after,html body .wrap > h1::before,html body .wrap > h1::after{content:none !important;display:none !important;}
html body .of-body h2,html body .article-body h2,html body .page-body h2,html body .main-col h1,html body .main-col h2,html body .main-col h3{box-shadow:none !important;border-radius:0 !important;}
html body .gf-bottom,html body .gf-in,html body .gf-cols,html body .gf-brand,html body .gf-col{background:#fff !important;background-image:none !important;color:#c8102e !important;}
html body .gf-bottom *{color:#c8102e !important;}
/* プロダクトUI層（html[data-pui]…）は詳細度が高く、角丸・色を上書きしてくる。神社スキンではここで確定させる */
html:not(#_):not(#__) body .btn,html:not(#_):not(#__) body .pu-btn,html:not(#_):not(#__) body .kb-btn,html:not(#_):not(#__) body .blk-btn,html:not(#_):not(#__) body .gh-pill,html:not(#_):not(#__) body .gh-chips a,html:not(#_):not(#__) body .of-card,html:not(#_):not(#__) body .card,html:not(#_):not(#__) body .panel,html:not(#_):not(#__) body .pu-side-box,html:not(#_):not(#__) body .ec-card,html:not(#_):not(#__) body input:not([type=radio]):not([type=checkbox]),html:not(#_):not(#__) body select,html:not(#_):not(#__) body textarea,html:not(#_):not(#__) body .of-cat-label,html:not(#_):not(#__) body .gf-museum a,html:not(#_):not(#__) body .hb-link,html:not(#_):not(#__) body .hb-panel,html:not(#_):not(#__) body .notice,html:not(#_):not(#__) body .pu-empty,html:not(#_):not(#__) body .empty-note,html:not(#_):not(#__) body .to-top{border-radius:0 !important;}
html:not(#_):not(#__) body .gf-bottom{background:#fff !important;background-image:none !important;color:#c8102e !important;}
html:not(#_):not(#__) body .kb-blk-h,html:not(#_):not(#__) body .blk-h{border-left:0 !important;padding-left:0 !important;color:#c8102e !important;}
html:not(#_):not(#__) body .main-col svg{color:#c8102e;}
@media(max-width:680px){
html body{font-size:16px !important;}
html body .layout{padding-top:30px !important;padding-bottom:56px !important;}
html body .pu-sec,html body .section-head{margin:60px 0 26px !important;}
html body .of-body h2,html body .article-body h2,html body .page-body h2{margin-top:56px !important;font-size:19.5px !important;}
html body .of-body blockquote,html body .main-col blockquote{padding-left:50px !important;}
html body .pu-side-box::before,html body .official-zone::before,html body .of-panel::before,html body .official-post::before,html body .zk-hero::before,html body .ab-plate::before{left:-5px !important;right:-5px !important;}
html body .main-col table{display:block;overflow-x:auto;}
}
@media(max-width:680px){html body .gh-logotype::before{width:22px;height:19px;margin-right:7px;}html body .gh-chips a{padding:12px 11px 6px !important;font-size:12px !important;}}
/* ════════ v5.4 整理：間隔を一つの寸法（24px）にそろえ、枠を一重にし、列をきっちり割る ════════ */
html body .layout{padding-top:32px !important;padding-bottom:56px !important;}
html body .pu-sec,html body .section-head{margin:52px 0 22px !important;gap:6px !important;}
html body .wrap > .pu-sec:first-child,html body .pu-col:not(.pu-col-c) > .pu-sec:first-child{margin-top:0 !important;}
html body .pu-sec::before,html body .section-head::before{width:34px;height:30px;}
html body .pu-sec::after,html body .section-head::after{margin-top:2px;height:22px !important;background-size:100px 22px !important;width:100px !important;}
html body .pu-sec h2,html body .section-head h2{font-size:clamp(19px,2.2vw,23px) !important;letter-spacing:.3em !important;text-indent:.3em;line-height:1.5 !important;}
html body .pu-sec h2 small{margin-top:4px !important;}
html body .pu-sec .more,html body .section-head .more{margin-top:8px !important;padding:5px 14px !important;}
html body .of-grid,html body .honpen-grid{gap:20px !important;}
html body .explore-zone{margin-top:48px !important;}
html body .main-col p{margin-bottom:1.1em;}
/* 三列：左・中・右をきっちり割る（広い画面のみ。せまい画面は元の一列のまま） */
@media(min-width:1000px){
html body .pu-cols3{display:grid !important;grid-template-columns:minmax(0,236px) minmax(0,1fr) minmax(0,236px) !important;gap:28px !important;align-items:start !important;}
html body .pu-cols3 > .pu-col{min-width:0 !important;width:auto !important;max-width:none !important;margin:0 !important;padding:0 !important;}
}
html body .pu-col:not(.pu-col-c) > *,html body .pu-col:not(.pu-col-c) .blk-area > *,html body .side .blk-area > *{margin-left:0 !important;margin-right:0 !important;max-width:100% !important;box-sizing:border-box !important;}
/* 左右の箱：どの中身でも同じ器（上に朱の笠木、朱の一重枠、同じ内側の余白、同じ間隔） */
html body .pu-col:not(.pu-col-c) .blk-area > *:not(.pu-side-box):not(.jj-box):not(style):not(script),html body .side .blk-area > *:not(.pu-side-box):not(.jj-box):not(style):not(script){background:#fff !important;border:1.5px solid #c8102e !important;border-top:5px solid #c8102e !important;border-radius:0 !important;box-shadow:none !important;padding:16px 14px 14px !important;margin-top:0 !important;margin-bottom:24px !important;overflow:hidden;}
html:not(#_):not(#__) body .pu-side-box,html:not(#_):not(#__) body .side-menu,html:not(#_):not(#__) body .jj-box{border:1.5px solid #c8102e !important;border-top:5px solid #c8102e !important;padding:16px 14px 14px !important;margin:0 0 24px !important;background:#fff !important;position:relative !important;overflow:visible !important;}
html body .pu-side-box::before,html body .side-menu::before{content:none !important;display:none !important;}
html body .pu-col:not(.pu-col-c) h2,html body .pu-col:not(.pu-col-c) h3,html body .side h2,html body .side h3,html body .jj-box h3{display:block !important;text-align:center !important;font-size:14px !important;line-height:1.5 !important;letter-spacing:.3em !important;text-indent:.3em;margin:0 0 12px !important;padding:0 0 9px !important;background:none !important;border:0 !important;border-bottom:1.5px solid #c8102e !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;color:#c8102e !important;}
html body .pu-col:not(.pu-col-c) h2::before,html body .pu-col:not(.pu-col-c) h2::after,html body .pu-col:not(.pu-col-c) h3::before,html body .pu-col:not(.pu-col-c) h3::after{content:none !important;display:none !important;}
html body .pu-col:not(.pu-col-c) p,html body .side p{font-size:12.5px !important;line-height:1.85 !important;margin:0 0 8px !important;}
html body .pu-col:not(.pu-col-c) ul,html body .side ul{margin:0 !important;padding:0 !important;list-style:none !important;}
html body .pu-col:not(.pu-col-c) li,html body .side li,html body .pu-side-list li{padding:7px 0 !important;border-bottom:1px dotted #c8102e !important;font-size:12.5px !important;line-height:1.6 !important;}
html body .pu-col:not(.pu-col-c) li:last-child,html body .side li:last-child{border-bottom:0 !important;}
html body .pu-col:not(.pu-col-c) table,html body .side table{margin:0 !important;font-size:12.5px;}
html body .pu-col:not(.pu-col-c) td,html body .side td,html body .pu-col:not(.pu-col-c) th,html body .side th{padding:7px 8px !important;}
/* ボタン：枠は一重に。包みの箱に枠をつけない（入れ子の二重枠をやめる） */
html body .layout a.pu-btn,html body .layout button.pu-btn,html body .layout a.kb-btn,html body .layout a.btn,html body .layout button.btn,html body .explore-zone a.btn,html body .explore-zone a.pu-btn,html body .pu-btn.ghost,html body .btn:not(.primary):not(.danger):not(.official),html body .oz-more,html body .rx-rbtn,html body .kb-btn{border:1.5px solid #c8102e !important;padding:8px 16px !important;line-height:1.5 !important;letter-spacing:.12em !important;font-size:13px !important;display:inline-block;height:auto !important;min-height:0 !important;vertical-align:middle;}
html body .layout a.pu-btn.small,html body .layout a.btn.small{padding:5px 11px !important;font-size:11.5px !important;margin:0 6px 6px 0 !important;}
html body .wrap a[class$="-btn"],html body .wrap button[class$="-btn"]{border:1.5px solid #c8102e !important;}
html body .wrap p[class],html body .wrap div[class*="btns"],html body .wrap div[class*="btnrow"],html body .wrap div[class*="tabs"],html body .wrap nav[class*="tabs"]{border:0 !important;box-shadow:none !important;outline:0 !important;background:none !important;}
html body .wrap div[class*="tabs"],html body .wrap nav[class*="tabs"]{display:flex !important;gap:8px !important;justify-content:center;flex-wrap:wrap;padding:0 !important;margin:0 0 20px !important;}
html:not(#_):not(#__) body [class*="chip"],html:not(#_):not(#__) body [class*="pill"],html:not(#_):not(#__) body [class*="badge"],html:not(#_):not(#__) body [class*="tag"]:not(html):not(body):not(.xfgh-tag){border-radius:0 !important;}
/* 写真のある大型ヒーロー：文字は写真に直接のせず、白い札にのせる */
html body .xfgh-media:not(:has(.xfgh-grad)) ~ .xfgh-in{background:#fff !important;border-top:5px solid #c8102e !important;padding:14px 18px 16px !important;left:16px !important;right:auto !important;bottom:16px !important;max-width:min(560px,calc(100% - 32px)) !important;width:auto !important;box-sizing:border-box;}
html body .xfgh-media:not(:has(.xfgh-grad)) ~ .xfgh-in *{color:#c8102e !important;text-shadow:none !important;}
html body .xfgh-media:not(:has(.xfgh-grad)) ~ .xfgh-in .xfgh-tt{font-size:clamp(17px,2.4vw,24px) !important;letter-spacing:.12em !important;line-height:1.6 !important;margin:4px 0 !important;}
/* カードの上に文字を重ねる型：文字の下に白い札 */
html body [class*="card"] [class*="over"],html body [class*="hero"] [class*="cap"]{background:#fff !important;color:#c8102e !important;}
/* フッター：列を自動で折り返し、左が切れないようにする */
html body .gf-in{max-width:1200px !important;margin:0 auto !important;padding:24px 20px !important;box-sizing:border-box !important;overflow:hidden;}
html body .gf-cols{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:24px 28px !important;margin:0 !important;}
html body .gf-brand{grid-column:1 / -1 !important;margin:0 0 4px !important;padding:0 !important;min-width:0;}
html body .gf-logo img{max-width:220px;height:auto;}
html body .gf-bottom{margin-top:28px !important;padding-top:20px !important;}
html body .gf-museum{padding:16px 12px !important;gap:8px !important;}
/* 右下の固定ボタンが重ならないよう、縦に並べる */
html body .to-top{right:18px !important;bottom:84px !important;width:44px !important;height:44px !important;}
html body .ec-fab{right:18px !important;bottom:22px !important;}
/* ── 追加の箱（暦・参道・新着・おみくじ・音・さがす） ── */
html body .jj-box{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif;color:#c8102e;text-align:center;}
html body .jj-koyomi .y{font-size:11.5px;letter-spacing:.3em;}
html body .jj-koyomi .d{font-size:44px;line-height:1.15;font-weight:700;letter-spacing:.06em;margin:6px 0 2px;}
html body .jj-koyomi .m{font-size:13px;letter-spacing:.34em;}
html body .jj-koyomi .w{display:inline-block;margin-top:10px;padding:3px 12px;border:1.5px solid #c8102e;font-size:11.5px;letter-spacing:.3em;}
html body .jj-fuda{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
html body .jj-fuda a{position:relative;display:block;border:1.5px solid #c8102e;padding:13px 4px 7px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:#c8102e !important;text-decoration:none !important;background:#fff;}
html body .jj-fuda a::before{content:"";position:absolute;left:50%;top:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#c8102e;}
html body .jj-fuda a:hover{background:#c8102e;color:#fff !important;}
html body .jj-fuda a:hover::before{background:#fff;}
html body .jj-list{text-align:left;}
html body .jj-list a{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px dotted #c8102e;font-size:12.5px;line-height:1.6;color:#c8102e !important;text-decoration:none !important;}
html body .jj-list a:last-child{border-bottom:0;}
html body .jj-list a .n{flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:#c8102e;color:#fff;font-size:11.5px;font-weight:700;}
html body .jj-list a:hover .t{text-decoration:underline;}
html body .jj-kuji .r{height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid #c8102e;margin:0 0 10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/40px 35px no-repeat;}
html body .jj-kuji .r.on{background-image:none;}
html body .jj-kuji .r b{font-size:30px;letter-spacing:.2em;text-indent:.2em;line-height:1.2;}
html body .jj-kuji .r span{font-size:11.5px;letter-spacing:.1em;margin-top:6px;padding:0 8px;}
html body .jj-kuji button,html body .jj-find button{font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif;cursor:pointer;background:#c8102e !important;color:#fff !important;border:1.5px solid #c8102e !important;border-radius:0 !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;padding:9px 14px !important;font-size:12.5px !important;font-weight:700;letter-spacing:.2em;width:100%;}
html body .jj-find form{display:flex;flex-direction:column;gap:8px;}
html body .jj-find input{width:100%;box-sizing:border-box;padding:9px 10px !important;font-size:13px;}
@media(max-width:999px){html body .jj-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px;margin-top:24px;}}
/* ════════ v5.5 注連縄をヘッダーの外へ垂らす／神社の品書き（メニュー）と開く動き ════════ */
/* 注連縄：ヘッダーの下端に張り、紙垂と房はヘッダーの外（本文の上）へ垂れてゆれる */
html body .gh,html body header.gh,html body header#gh.gh,html body .site-top{background-image:linear-gradient(#c8102e,#c8102e),linear-gradient(#c8102e,#c8102e) !important;background-repeat:no-repeat !important;background-size:100% 7px,100% 2px !important;background-position:0 0,0 11px !important;padding-bottom:6px !important;overflow:visible !important;}
html body header#gh.gh::after,html body .gh::after{content:"" !important;display:block !important;position:absolute !important;left:0 !important;right:0 !important;top:100% !important;bottom:auto !important;width:auto !important;height:44px !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cstyle%3E%40keyframes a%7Bfrom%7Btransform:rotate(-5deg)%7Dto%7Btransform:rotate(5deg)%7D%7D%40keyframes b%7Bfrom%7Btransform:rotate(4deg)%7Dto%7Btransform:rotate(-4deg)%7D%7D.a%7Banimation:a 3.6s ease-in-out infinite alternate%7D.b%7Banimation:b 4.4s ease-in-out infinite alternate%7D.c%7Banimation:a 2.8s ease-in-out infinite alternate%7D%40media (prefers-reduced-motion:reduce)%7B.a,.b,.c%7Banimation:none%7D%7D%3C/style%3E%3Crect y='0' width='120' height='9' fill='%23c8102e'/%3E%3Cpath d='M4 9l5-8M16 9l5-8M28 9l5-8M40 9l5-8M52 9l5-8M64 9l5-8M76 9l5-8M88 9l5-8M100 9l5-8M112 9l5-8' stroke='%23fff' stroke-width='1.5'/%3E%3Cg class='a' style='transform-origin:26px 8px'%3E%3Cpath d='M22 8h8v9h5v9h5v10h-9v-9h-5v-9h-4z' fill='%23fff' stroke='%23c8102e' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/g%3E%3Cg class='c' style='transform-origin:60px 8px' stroke='%23c8102e' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M57 8v11M60 8v15M63 8v11'/%3E%3C/g%3E%3Cg class='b' style='transform-origin:86px 8px'%3E%3Cpath d='M82 8h8v9h5v9h5v10h-9v-9h-5v-9h-4z' fill='%23fff' stroke='%23c8102e' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E") left top/120px 44px repeat-x !important;pointer-events:none !important;z-index:2;opacity:1 !important;transform:none !important;border:0 !important;}
html body .ticker{margin-top:48px !important;}
html body .layout{padding-top:60px !important;}
html body .ticker ~ .layout{padding-top:32px !important;}
html body .xf-hero-slot{margin-top:0 !important;}
/* メニューの札：朱の札に白い三本線と「案内」。開くと三本線が鳥居に組み上がる */
html body .gh-burger,html body #hb-btn{display:inline-flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:3px !important;width:50px !important;height:50px !important;min-width:50px !important;padding:0 !important;background:#c8102e !important;border:1.5px solid #c8102e !important;border-radius:0 !important;box-shadow:inset 0 0 0 3px #c8102e,inset 0 0 0 4px #fff !important;transform:none !important;cursor:pointer;}
html body .gh-burger::after{content:"案内";display:block;color:#fff;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-indent:.24em;line-height:1;}
html body .gh-burger .hb-lines{display:block !important;position:relative !important;width:24px !important;height:18px !important;background:none !important;}
html body .gh-burger .hb-lines::before,html body .gh-burger .hb-lines::after{content:"" !important;display:block !important;position:absolute !important;top:3px;width:3px;height:0;background:#fff;transition:height .32s cubic-bezier(.22,1,.36,1) .12s;}
html body .gh-burger .hb-lines::before{left:5px;}
html body .gh-burger .hb-lines::after{right:5px;}
html body .gh-burger .hb-lines i{display:block !important;position:absolute !important;left:0 !important;right:0 !important;width:auto !important;height:3px !important;background:#fff !important;border-radius:0 !important;opacity:1 !important;transform:none !important;transition:top .3s cubic-bezier(.22,1,.36,1),left .3s,right .3s,height .3s,border-radius .3s,opacity .2s !important;}
html body .gh-burger .hb-lines i:nth-child(1){top:1px !important;}
html body .gh-burger .hb-lines i:nth-child(2){top:8px !important;}
html body .gh-burger .hb-lines i:nth-child(3){top:15px !important;}
html.hb-open body .gh-burger .hb-lines i:nth-child(1){top:0 !important;left:-2px !important;right:-2px !important;height:4px !important;border-radius:0 0 60% 60%/0 0 100% 100% !important;}
html.hb-open body .gh-burger .hb-lines i:nth-child(2){top:7px !important;left:2px !important;right:2px !important;height:2.5px !important;}
html.hb-open body .gh-burger .hb-lines i:nth-child(3){opacity:0 !important;}
html.hb-open body .gh-burger .hb-lines::before,html.hb-open body .gh-burger .hb-lines::after{height:16px;}
/* 開く動き：白い幕が上から下り、笠木が走り、鳥居が立ち、品書きが一行ずつ現れる */
html:not(#_):not(#__) body .hb-scrim{background:rgba(255,255,255,.86) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;opacity:0;transition:opacity .35s ease !important;}
html.hb-open body .hb-scrim{opacity:1 !important;}
html:not(#_):not(#__) body .hb-panel{left:0 !important;right:auto !important;top:0 !important;bottom:0 !important;width:min(86vw,340px) !important;max-width:none !important;height:auto !important;max-height:none !important;margin:0 !important;border-radius:0 !important;background:#fff !important;border:0 !important;border-right:7px solid #c8102e !important;box-shadow:none !important;transform:none !important;opacity:1 !important;clip-path:inset(0 0 100% 0);-webkit-clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.22,1,.36,1),-webkit-clip-path .55s cubic-bezier(.22,1,.36,1) !important;overflow-y:auto !important;overflow-x:hidden !important;padding:0 0 28px !important;}
html.hb-open:not(#_):not(#__) body .hb-panel{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);}
html:not(#_):not(#__) body .hb-panel::before{content:"" !important;width:auto !important;right:auto !important;border-radius:0 !important;opacity:1 !important;display:block !important;position:sticky;top:0;left:0;height:52px;margin:0 0 -8px;background:linear-gradient(#c8102e,#c8102e) left top/100% 8px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cstyle%3E%40keyframes a%7Bfrom%7Btransform:rotate(-5deg)%7Dto%7Btransform:rotate(5deg)%7D%7D%40keyframes b%7Bfrom%7Btransform:rotate(4deg)%7Dto%7Btransform:rotate(-4deg)%7D%7D.a%7Banimation:a 3.6s ease-in-out infinite alternate%7D.b%7Banimation:b 4.4s ease-in-out infinite alternate%7D.c%7Banimation:a 2.8s ease-in-out infinite alternate%7D%40media (prefers-reduced-motion:reduce)%7B.a,.b,.c%7Banimation:none%7D%7D%3C/style%3E%3Crect y='0' width='120' height='9' fill='%23c8102e'/%3E%3Cpath d='M4 9l5-8M16 9l5-8M28 9l5-8M40 9l5-8M52 9l5-8M64 9l5-8M76 9l5-8M88 9l5-8M100 9l5-8M112 9l5-8' stroke='%23fff' stroke-width='1.5'/%3E%3Cg class='a' style='transform-origin:26px 8px'%3E%3Cpath d='M22 8h8v9h5v9h5v10h-9v-9h-5v-9h-4z' fill='%23fff' stroke='%23c8102e' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/g%3E%3Cg class='c' style='transform-origin:60px 8px' stroke='%23c8102e' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M57 8v11M60 8v15M63 8v11'/%3E%3C/g%3E%3Cg class='b' style='transform-origin:86px 8px'%3E%3Cpath d='M82 8h8v9h5v9h5v10h-9v-9h-5v-9h-4z' fill='%23fff' stroke='%23c8102e' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E") left 8px/120px 44px repeat-x;transform-origin:left center;transform:scaleX(0);transition:transform .5s cubic-bezier(.22,1,.36,1) .12s;z-index:3;pointer-events:none;}
html.hb-open:not(#_):not(#__) body .hb-panel::before{transform:scaleX(1) !important;}
html:not(#_):not(#__) body .hb-panel::after{content:none !important;display:none !important;}
html body .hb-panel > *{animation:none !important;opacity:1 !important;transform:none !important;}
html body .hb-crest{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center 14px/84px 73px no-repeat !important;padding:100px 16px 16px !important;margin:0 14px !important;border:0 !important;border-bottom:4px double #c8102e !important;text-align:center !important;position:relative;}
html body .hb-title{font-size:19px !important;letter-spacing:.32em !important;text-indent:.32em;}
html body .hb-sub{letter-spacing:.2em !important;margin-top:4px;}
html body .hb-sec{margin:20px 14px 6px !important;padding:0 !important;text-align:center;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;font-weight:700;font-size:11px !important;letter-spacing:.5em !important;text-indent:.5em;opacity:1 !important;display:flex;align-items:center;gap:10px;}
html body .hb-sec::before,html body .hb-sec::after{content:"";flex:1;height:1.5px;background:#c8102e;}
html body .hb-links{margin:0 14px !important;padding:0 !important;gap:0 !important;}
html:not(#_):not(#__) body .hb-links .hb-link{position:relative;display:flex !important;align-items:center;gap:12px;padding:14px 6px !important;margin:0 !important;font-size:15.5px !important;border:0 !important;border-bottom:1.5px solid #c8102e !important;background:linear-gradient(#c8102e,#c8102e) left center/0 100% no-repeat #fff !important;transition:background-size .28s cubic-bezier(.22,1,.36,1),color .2s !important;}
html:not(#_):not(#__) body .hb-links .hb-link:hover,html:not(#_):not(#__) body .hb-links .hb-link.active{background-size:100% 100% !important;}
html:not(#_):not(#__) body .hb-link .hb-li{flex:none;box-shadow:none !important;outline:0 !important;width:26px !important;height:23px !important;border:0 !important;border-radius:0 !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;}
html body .hb-link .hb-li svg{display:none !important;}
html body .hb-link:hover .hb-li,html body .hb-link.active .hb-li{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") !important;}
html body .hb-x{position:absolute !important;top:14px !important;right:8px !important;width:38px !important;height:38px !important;font-size:20px !important;line-height:1 !important;transition:transform .4s cubic-bezier(.22,1,.36,1) !important;}
html.hb-open body .hb-x{transform:rotate(180deg);}
html:not(#_):not(#__) body .to-top{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M1 2.5Q16 7 31 2.5L30 7Q16 10.5 2 7Z'/%3E%3Crect x='5' y='12' width='22' height='2.6'/%3E%3Crect x='8' y='7' width='3' height='20.5'/%3E%3Crect x='21' y='7' width='3' height='20.5'/%3E%3Crect x='14.7' y='8' width='2.6' height='4.5'/%3E%3C/g%3E%3C/svg%3E") center/26px 23px no-repeat !important;border:1.5px solid #c8102e !important;box-shadow:none !important;}
@keyframes jjRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes jjRow{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
html.hb-open body .hb-crest{animation:jjRise .6s cubic-bezier(.22,1,.36,1) .22s both !important;}
html.hb-open body .hb-sec,html.hb-open body .hb-foot,html.hb-open body .hb-ext,html.hb-open body .hb-login{animation:jjRise .5s cubic-bezier(.22,1,.36,1) .4s both !important;}
html.hb-open body .hb-links .hb-link{animation:jjRow .5s cubic-bezier(.22,1,.36,1) both !important;}
html.hb-open body .hb-links .hb-link:nth-child(1){animation-delay:.34s !important;}
html.hb-open body .hb-links .hb-link:nth-child(2){animation-delay:.40s !important;}
html.hb-open body .hb-links .hb-link:nth-child(3){animation-delay:.46s !important;}
html.hb-open body .hb-links .hb-link:nth-child(4){animation-delay:.52s !important;}
html.hb-open body .hb-links .hb-link:nth-child(5){animation-delay:.58s !important;}
html.hb-open body .hb-links .hb-link:nth-child(6){animation-delay:.64s !important;}
html.hb-open body .hb-links .hb-link:nth-child(7){animation-delay:.70s !important;}
html.hb-open body .hb-links .hb-link:nth-child(n+8){animation-delay:.76s !important;}
@media(max-width:680px){
html body header#gh.gh::after,html body .gh::after{height:36px !important;background-size:98px 36px !important;}
html body .layout{padding-top:48px !important;}
html body .ticker{margin-top:40px !important;}
html body .ticker ~ .layout{padding-top:26px !important;}
}
@media (prefers-reduced-motion:reduce){
html body .hb-panel,html body .hb-panel::before,html body .gh-burger .hb-lines i,html body .gh-burger .hb-lines::before,html body .gh-burger .hb-lines::after{transition:none !important;}
html.hb-open body .hb-crest,html.hb-open body .hb-sec,html.hb-open body .hb-foot,html.hb-open body .hb-links .hb-link{animation:none !important;}
}
/* ════════ v5.7 記事の札＝鳥居。上に反った笠木と貫、左右に柱、足もとに台石。二列で、題は切らない ════════ */
html:not(#_):not(#__) body .of-grid,html:not(#_):not(#__) body .honpen-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:44px 26px !important;padding:22px 8px 6px !important;counter-reset:jcard;}
html:not(#_):not(#__) body .of-card,html:not(#_):not(#__) body .honpen-card{counter-increment:jcard;position:relative !important;display:flex !important;flex-direction:column !important;background:#fff !important;border:0 !important;border-left:4px solid #c8102e !important;border-right:4px solid #c8102e !important;border-radius:0 !important;box-shadow:none !important;padding:26px 0 0 !important;margin:0 !important;overflow:visible !important;transform:none !important;text-decoration:none !important;transition:none !important;animation:none !important;min-width:0;}
html:not(#_):not(#__) body .of-card:hover,html:not(#_):not(#__) body .honpen-card:hover{box-shadow:none !important;transform:none !important;animation:none !important;}
/* 笠木（両端が反り上がる）と貫 */
html:not(#_):not(#__) body .of-card::before,html:not(#_):not(#__) body .honpen-card::before{content:"" !important;display:block !important;position:absolute !important;left:-14px !important;right:-14px !important;top:-14px !important;bottom:auto !important;width:auto !important;height:34px !important;margin:0 !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q100 9 200 0L196 12Q100 18 4 12Z' fill='%23c8102e'/%3E%3C/svg%3E") center top/100% 18px no-repeat,linear-gradient(#c8102e,#c8102e) center 26px/calc(100% - 12px) 4px no-repeat !important;opacity:1 !important;border:0 !important;transform:none !important;inset:auto;pointer-events:none;z-index:2;transition:transform .3s cubic-bezier(.22,1,.36,1);}
html:not(#_):not(#__) body .of-card:hover::before{transform:translateY(-3px) !important;}
/* 台石（柱の足もと） */
html:not(#_):not(#__) body .of-card::after,html:not(#_):not(#__) body .honpen-card::after{content:"" !important;display:block !important;position:absolute !important;left:-9px !important;right:-9px !important;top:auto !important;bottom:-6px !important;width:auto !important;height:6px !important;margin:0 !important;background:linear-gradient(#c8102e,#c8102e) left top/14px 6px no-repeat,linear-gradient(#c8102e,#c8102e) right top/14px 6px no-repeat !important;opacity:1 !important;border:0 !important;transform:none !important;animation:none !important;pointer-events:none;}
/* 扁額（笠木と貫のあいだの額）＝分類 */
html:not(#_):not(#__) body .of-card .of-cat{position:absolute !important;left:50% !important;top:-36px !important;right:auto !important;bottom:auto !important;transform:translateX(-50%) !important;z-index:3;background:#fff !important;color:#c8102e !important;border:2px solid #c8102e !important;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #c8102e !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.16em !important;text-indent:.16em;line-height:1.3 !important;padding:5px 10px !important;border-radius:0 !important;max-width:74%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 絵＝白い余白をとった朱の額。右下に奉納の番号（漢数字の朱印） */
html:not(#_):not(#__) body .of-card .frame{position:relative !important;display:block !important;margin:0 10px !important;padding:5px !important;border:1.5px solid #c8102e !important;background:#fff !important;border-radius:0 !important;overflow:visible !important;aspect-ratio:auto !important;height:auto !important;width:auto !important;max-width:none !important;min-width:0 !important;box-sizing:border-box !important;}
html:not(#_):not(#__) body .of-card .frame img{display:block !important;width:100% !important;height:auto !important;aspect-ratio:16 / 10 !important;object-fit:cover !important;border:0 !important;padding:0 !important;border-radius:0 !important;transform:none !important;}
html:not(#_):not(#__) body .of-card .frame::after{content:counter(jcard,japanese-formal) !important;display:flex !important;align-items:center;justify-content:center;position:absolute !important;right:-7px !important;bottom:-9px !important;left:auto !important;top:auto !important;width:30px !important;height:30px !important;background:#c8102e !important;color:#fff !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif;font-size:13.5px;font-weight:700;letter-spacing:0;box-shadow:inset 0 0 0 2px #c8102e,inset 0 0 0 3px #fff !important;border:0 !important;opacity:1 !important;z-index:2;}
html:not(#_):not(#__) body .of-card .of-new{position:absolute !important;left:-7px !important;top:-9px !important;right:auto !important;bottom:auto !important;z-index:2;}
/* 題は切らない */
html:not(#_):not(#__) body .of-card .t,html:not(#_):not(#__) body .honpen-card .t{display:block !important;-webkit-line-clamp:unset !important;line-clamp:unset;overflow:visible !important;white-space:normal !important;text-overflow:clip !important;max-height:none !important;height:auto !important;min-height:0 !important;flex:1 0 auto;padding:16px 12px 12px !important;margin:0 !important;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif !important;font-size:15px !important;font-weight:700 !important;line-height:1.75 !important;letter-spacing:.05em !important;color:#c8102e !important;word-break:break-word;overflow-wrap:anywhere;}
/* 日付の段：初（はじめて出した日）と更（直した日）を朱印つきで並べる */
html:not(#_):not(#__) body .of-card .m{display:flex !important;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 10px !important;padding:9px 2px 12px !important;border-top:4px double #c8102e !important;font-size:11.5px !important;letter-spacing:.08em !important;color:#c8102e !important;opacity:1 !important;font-variant-numeric:tabular-nums;}
html:not(#_):not(#__) body .of-card .m::before{content:none !important;display:none !important;}
html:not(#_):not(#__) body .of-card .m .jd{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
html:not(#_):not(#__) body .of-card .m .jd i{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;font-style:normal;font-family:"Shippori Mincho","Shippori Mincho B1","Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho",serif;font-size:11px;font-weight:700;letter-spacing:0;background:#c8102e;color:#fff;}
html:not(#_):not(#__) body .of-card .m .jd-u i{background:#fff;color:#c8102e;box-shadow:inset 0 0 0 1.5px #c8102e;}
@media(max-width:680px){
html:not(#_):not(#__) body .of-grid,html:not(#_):not(#__) body .honpen-grid{gap:40px 20px !important;padding:20px 8px 6px !important;}
html:not(#_):not(#__) body .of-card,html:not(#_):not(#__) body .honpen-card{border-left-width:3px !important;border-right-width:3px !important;padding-top:24px !important;}
html:not(#_):not(#__) body .of-card::before{left:-10px !important;right:-10px !important;height:30px !important;background-size:100% 15px,calc(100% - 8px) 3px !important;background-position:center top,center 23px !important;}
html:not(#_):not(#__) body .of-card .of-cat{top:-32px !important;font-size:9px !important;padding:4px 7px !important;max-width:80%;}
html:not(#_):not(#__) body .of-card .frame{margin:0 6px !important;padding:3px !important;}
html:not(#_):not(#__) body .of-card .frame img{aspect-ratio:1 / 1 !important;}
html:not(#_):not(#__) body .of-card .frame::after{width:24px !important;height:24px !important;font-size:11px;right:-5px !important;bottom:-7px !important;}
html:not(#_):not(#__) body .of-card .t{padding:12px 7px 10px !important;font-size:13.5px !important;line-height:1.7 !important;letter-spacing:.02em !important;}
html:not(#_):not(#__) body .of-card .m{margin:0 6px !important;padding:8px 0 10px !important;flex-direction:column;align-items:flex-start;gap:5px;font-size:10.5px !important;letter-spacing:.04em !important;}
html:not(#_):not(#__) body .of-card .m .jd i{width:17px;height:17px;font-size:10px;}
html:not(#_):not(#__) body .of-card .of-new{width:28px !important;height:28px !important;font-size:7.5px !important;left:-5px !important;top:-7px !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;}
/* ══════════════════════════════════════════════════════════════════
   背景画像 ─ スマホで重くならない描き方
   ------------------------------------------------------------------
   従来は body に background-attachment:fixed を当てていたが、これは
   スクロールのたびにブラウザが画面全体を描き直す。スマホでは
   1フレームごとに大きな画像を貼り直すため、極端に重くなる。
   代わりに position:fixed の固定レイヤーを1枚だけ敷く。合成レイヤーに
   載るので、スクロール中の再描画がゼロになる。
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   透け・ぼかしの停止（誤デザインの修正・最終適用）
   ・ぼかし（backdrop-filter）は、UIの枠では一切使わない
   ・半透明の面は、すべて不透明の面に置き換える
   ・「覆い（スクリム）」だけは、透けてよいので残す
   ══════════════════════════════════════════════════════════════ */
/* いちばん根もとを止める：商品UI（product_ui）の「ガラス」設定。
   ぼかし0・透明度100%にすると、ヘッダーも検索の候補も、設定画面の値に関係なく不透明になります。 */
html, html[data-pui="1"], html body, :root{
  --pui-blur:0px !important;
  --pui-sat:100% !important;
  --pui-alpha:100 !important;
  --pui-glass:#ffffff !important;
  --pui-glass-strong:#ffffff !important;
}
html[data-pui="1"] .gh, html[data-pui="1"] .gh-sug, html[data-pui="1"] .gh-search,
html[data-pui="1"] .to-top, html[data-pui="1"] .pu-drawer, html[data-pui="1"] .gh-drop,
html[data-pui="1"] [data-pui-header]:not([data-pui-header="static"]) .gh{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background-color:#ffffff !important; background-image:none !important;
}

html body .gh, html body .gh-chips, html body .gh-search, html body .gh-sub, html body .gh-drop, html body .gh-sug,
html body .gf, html body .gf-bottom, html body .bar, html body .official-bar, html body .ticker,
html body header, html body footer, html body nav, html body .nav, html body .navbar, html body .topbar,
html body .hb-head, html body .hb-nav, html body .hn2, html body .hn2-bar, html body .hn2-tab,
html body .pu-head, html body .pu-nav, html body .pu-foot, html body .ec-bar, html body .ea-top,
html body .card, html body .panel, html body .of-card, html body .honpen-card, html body .pu-side-box,
html body .music-item, html body .notice, html body .menu, html body .dropdown, html body .suggest,
html body .search-suggest, html body .sg, html body .ac, html body .autocomplete, html body .popover,
html body .modal, html body .dialog, html body .sheet, html body .drawer, html body .side, html body .sidebar,
html body .tooltip, html body .toast, html body .fab, html body .cart-fab, html body [class*="fab"],
html body .tabbar, html body .bottombar, html body .bottom-nav, html body .hcb-float{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* 面は不透明に。背景のイラストが文字の裏に出ないようにする */
html body .gh, html body .gh-sub, html body .gh-drop, html body .gh-search,
html body .menu, html body .dropdown, html body .suggest, html body .search-suggest, html body .gh-sug,
html body .sg, html body .ac, html body .autocomplete, html body .popover,
html body .modal, html body .dialog, html body .sheet, html body .drawer,
html body .side, html body .sidebar, html body .tooltip, html body .toast{
  background-color:#ffffff !important;
  opacity:1 !important;
}
html body .gf, html body .gf-bottom, html body .pu-foot,
html body .tabbar, html body .bottombar, html body .bottom-nav{
  background-color:#c8102e !important;
  color:#ffffff !important;
  opacity:1 !important;
}
html body .card, html body .panel, html body .of-card, html body .honpen-card,
html body .pu-side-box, html body .music-item, html body .notice{
  background-color:#ffffff !important;
  opacity:1 !important;
}

/* 検索の候補リスト：ここが透けていたせいで、裏の絵と文字が重なって読めなかった */
html body .gh-search, html body .gh-drop, html body .gh-sug, html body .suggest, html body .search-suggest,
html body .sg, html body .ac, html body .autocomplete,
html body [role="listbox"], html body [role="menu"], html body datalist{
  background-color:#ffffff !important;
  border:1px solid #c8102e !important;
  box-shadow:0 8px 28px rgba(0,0,0,.16) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html body [role="listbox"] > *, html body .suggest > *, html body .search-suggest > *,
html body .sg > *, html body .ac > *, html body .autocomplete > *{
  background-color:#ffffff !important;
}
html body [role="listbox"] li:hover, html body [role="listbox"] [aria-selected="true"],
html body .suggest li:hover, html body .search-suggest li:hover{
  background-color:#c8102e !important;
}

/* 固定表示の帯は、必ず背景より前に出す（重なり順の事故も同時に直す） */
html body .gh, html body header[class*="fix"], html body .topbar{ z-index:1200 !important; }
html body .gf-bottom, html body .tabbar, html body .bottombar, html body .bottom-nav{ z-index:1150 !important; }

/* 背景の絵は、いちばん後ろへ。UIの上に乗り上げない */
html body .bgfx, html body .bg-slideshow, html body .dz-bg, html body .site-bg,
html body #dzBg, html body .hero-bg{ z-index:0 !important; }

/* 覆い（スクリム）はそのまま：ここは透けてよい。ただし、ぼかしはやめる */
html body .scrim, html body .hb-scrim, html body .nx-scrim, html body .overlay, html body .backdrop{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* 見出しブロックの先端の点：どのスキンでも出さない（いちばん最後に出るここで、確実に止める） */
html body .blk-h::before, html body h2.blk-h::before, html body .blk.blk-h::before{ content:none !important; display:none !important; }
html body .blk-h{ padding-left:0 !important; }

/* 文字を影でごまかしていた箇所も戻す（読みにくさの原因） */
html body .gh *, html body .gf *, html body .gh-search *{ text-shadow:none !important; }
/* ══ タッチ端末・小さい画面の描画負荷対策（全スキン共通・最終適用） ══
   スキン側の柄背景も含め、固定貼り付けをすべて解除する。 */
@media (max-width:900px), (pointer:coarse){
  *,html,html body{ background-attachment:scroll !important; }
}