/* 基本設定 */
:root { color-scheme:light; --ink:#211833; --muted:#625d6c; --purple:#6a3caf; --orange:#ffad63; --month-height:680px; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(ellipse at 100% 0%,rgba(255,140,55,.30),transparent 42%),radial-gradient(ellipse at 0% 45%,rgba(143,75,240,.38),transparent 55%),linear-gradient(150deg,#29133f,#191126 65%,#352044); background-color:#191126; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:1rem; line-height:1.7; }
a { color:inherit; text-underline-offset:4px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--purple); outline-offset:5px; }
.skip { position:absolute; top:-100px; left:16px; z-index:10; padding:10px 16px; color:var(--ink); background:#fff; }
.skip:focus { top:12px; }
/* ヘッダー */
.brand-header { color:#fff; background:rgba(24,13,39,.45); border-top:4px solid #ffac60; border-bottom:1px solid rgba(255,255,255,.14); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1184px; margin:0 auto; padding:28px 32px; }
.official { display:block; margin-top:9px; color:#edcaff; font-size:.75rem; letter-spacing:.24em; }
.artists { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0; color:#fff1e8; font-size:.875rem; }
.artists b { color:var(--orange); font-weight:400; }
/* 見出しと、装飾画像のための独立した領域 */
main { max-width:1184px; margin:0 auto; padding:24px 32px 32px; }
.intro { display:grid; grid-template-columns:minmax(0,1fr) 180px; align-items:center; gap:24px; margin-bottom:22px; }
.intro-copy { min-width:0; }
.eyebrow { display:inline-block; margin:0 0 12px; padding:4px 13px; color:#35152e; background:linear-gradient(110deg,#ffd49d,#ffa958); border-radius:6px; font-size:.8125rem; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; color:#fff; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.4; letter-spacing:.02em; overflow-wrap:anywhere; text-shadow:0 4px 24px rgba(153,86,221,.22); }
.lead { margin:12px 0 0; color:#f0e5fa; line-height:1.85; }
.timezone { margin:12px 0 0; color:#e4d3f1; font-size:.875rem; }
.character-slot { display:flex; align-items:center; justify-content:center; min-width:0; height:210px; padding:14px; pointer-events:none; user-select:none; }
.intro-character { height:194px; }
.character-slot img { display:block; width:100%; height:100%; max-width:240px; object-fit:contain; transform:rotate(var(--art-tilt,0deg)) scale(var(--art-scale,1)); filter:drop-shadow(0 8px 12px rgba(8,3,19,.28)); }
.character-strip { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:28px; }
/* カレンダー */
.calendar-card { min-width:0; overflow:hidden; color:var(--ink); border:2px solid transparent; border-radius:20px; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#ffb76b,#c49aff 60%,#9061e8) border-box; box-shadow:0 22px 65px rgba(0,0,0,.25),0 0 32px rgba(168,106,244,.12); }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:linear-gradient(110deg,#fff3e6,#f3edff); border-bottom:1px solid #e8dcef; }
.view-controls { display:flex; gap:4px; padding:4px; background:#e8dff1; border-radius:10px; }
.view-controls[hidden] { display:none; }
.view-controls button { min-height:44px; padding:9px 20px; color:var(--muted); background:transparent; border:0; border-radius:7px; font:inherit; font-size:.9375rem; font-weight:700; line-height:1.5; cursor:pointer; }
.view-controls button[aria-pressed="true"] { color:#fff; background:linear-gradient(115deg,#6932a7,#913777); box-shadow:0 3px 10px rgba(105,50,167,.22); }
.view-controls button:hover:not([aria-pressed="true"]) { color:#442466; background:#dccce9; }
.external { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#62318e; font-size:.875rem; font-weight:600; }
.external svg { flex-shrink:0; width:16px; height:16px; }
.calendar-window { position:relative; width:100%; max-width:100%; min-width:0; padding:0; overflow:auto; background:#fff; -webkit-overflow-scrolling:touch; }
.calendar-window:focus-visible { outline:3px solid var(--purple); outline-offset:-3px; }
#calendar { display:block; width:100%; height:640px; border:0; background:#fff; }
.calendar-window[data-view="MONTH"] #calendar { min-width:640px; height:var(--month-height); }
.calendar-window[data-view="MONTH"].is-fitted { height:var(--fit-height); overflow:hidden; }
.calendar-window[data-view="MONTH"].is-fitted #calendar { position:absolute; top:0; left:0; width:var(--fit-width); min-width:0; max-width:none; height:var(--month-height); transform:scale(var(--fit-scale)); transform-origin:top left; }
.calendar-window[data-view="AGENDA"] { padding:12px 4px; }
.calendar-window[data-view="AGENDA"] #calendar { width:100%; min-width:0; height:640px; }
.calendar-hint { margin:0; padding:12px 16px; color:var(--muted); background:#fff; font-size:.875rem; }
.calendar-hint[hidden] { display:none; }
.below-calendar { padding:14px 22px; background:linear-gradient(110deg,#fff8f0,#f8f4fc); border-top:1px solid #eee3f1; }
.below-calendar p { margin:0; color:var(--muted); font-size:.875rem; }
.help { margin-top:20px; color:#e3d6ef; font-size:.875rem; }
.help summary { width:fit-content; padding:6px 0; cursor:pointer; }
.help summary:focus-visible { outline-color:#ffba79; }
.help p { max-width:720px; margin:8px 0 0; }
footer { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1120px; margin:0 auto; padding:24px 0 32px; color:#dbcee8; border-top:1px solid rgba(255,255,255,.18); font-size:.8125rem; }
@media(max-width:700px) {
  .header-inner { padding:22px 20px; }
  .artists { flex-direction:column; align-items:flex-end; gap:2px; font-size:.8125rem; }
  .artists b { display:none; }
  main { padding:22px 16px 24px; }
  .intro { grid-template-columns:minmax(0,1fr) 92px; gap:8px; margin-bottom:20px; }
  .intro-character { height:140px; padding:6px; }
  h1 { font-size:clamp(1.55rem,5.5vw,1.9rem); }
  .lead { font-size:.9375rem; }
  .timezone { font-size:.8125rem; }
  .calendar-card { border-radius:15px; }
  .toolbar { gap:7px; padding:12px; }
  .view-controls button { padding:9px 16px; }
  .external { font-size:.8125rem; }
  .below-calendar { padding:14px 16px; }
  .character-strip { gap:12px; margin-top:20px; }
  .character-strip .character-slot { height:170px; padding:12px; }
  footer { margin:0 16px; padding:20px 0 26px; }
}
@media(prefers-reduced-motion:no-preference) {
  .view-controls button { transition:background .15s,color .15s; }
}
/* 写真はヘッダー内の独立したバナーとして表示。上に他の画像を重ねない。 */
.header-visual { width:calc(100% - 64px); max-width:1120px; margin:0 auto 24px; overflow:hidden; border-radius:16px; }
.header-visual img { display:block; width:100%; height:clamp(180px,32vw,360px); object-fit:cover; object-position:center 65%; }
/* ロゴと立ち絵は写真のない領域に配置 */
.brand-lockup { display:flex; align-items:center; gap:20px; }
.brand-logo { display:block; width:92px; height:102px; padding:8px; background:#fff; border-radius:10px; object-fit:contain; }
.brand-lockup .official { margin:0; font-size:.875rem; }
.header-inner { padding-top:18px; padding-bottom:18px; }
.character-strip { padding:24px; border:1px solid #ffffff26; border-radius:20px; gap:8px 32px; background:linear-gradient(120deg,#372044,#251835); }
.strip-brand { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:22px; }
.lamp-logo { width:220px; max-width:65%; height:110px; object-fit:contain; }
.lamp-mark { width:64px; height:64px; object-fit:contain; }
.footer-logo { display:block; width:58px; height:64px; padding:5px; border-radius:7px; background:#fff; object-fit:contain; }
@media(max-width:700px) {
 .brand-logo { width:68px; height:76px; padding:6px; }
 .brand-lockup { gap:12px; }
 .brand-lockup .official { font-size:.75rem; letter-spacing:.16em; }
 .header-inner { gap:12px; padding:16px; }
 .header-visual { width:calc(100% - 32px); margin:0 16px 16px; border-radius:12px; }
 .character-strip { padding:12px; gap:4px 12px; border-radius:15px; }
 .lamp-logo { width:180px; height:90px; }
 .lamp-mark { width:48px; height:48px; }
 .strip-brand { gap:12px; }
}

/* 左右の背景：中央のコンテンツと重ならない余白に収める */
.page-art {
  position:fixed;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  pointer-events:none;
  user-select:none;
}
.page-art-side {
  width:calc((100% - 1184px) / 2 - 16px);
  height:calc(100vh - 32px);
  height:calc(100svh - 32px);
  max-height:760px;
  min-width:0;
  opacity:.20;
}
.page-art-side img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
/* 狭い画面では専用の背景帯に切り替え、顔とカレンダーの両方を見せる */
@media(max-width:1439px) {
  .page-art {
    position:relative;
    inset:auto;
    max-width:1184px;
    margin:0 auto;
    padding:16px 32px 0;
    gap:24px;
  }
  .page-art-side {
    width:calc(50% - 12px);
    height:clamp(140px,24vw,240px);
    opacity:.24;
  }
  .page-art-side:first-child img { object-position:left center; }
  .page-art-side:last-child img { object-position:right center; }
}
@media(max-width:700px) {
  .page-art { padding:12px 16px 0; }
}

/* 全幅の写真ヘッダー */
.brand-header {
  position:relative;
  background:linear-gradient(90deg,rgba(24,13,39,.65),rgba(24,13,39,.12) 60%,rgba(24,13,39,.5)),url("assets/noko-header.webp") center 72% / cover no-repeat;
}
.header-inner { min-height:clamp(220px,26vw,380px); align-items:flex-end; padding-top:32px; padding-bottom:32px; }
.brand-logo,.footer-logo { background:transparent; border-radius:0; padding:0; }
.official,.artists { text-shadow:0 2px 6px #000; }
.page-art-side { display:flex; align-items:center; justify-content:center; }
.page-art-side img { flex:none; max-width:100%; object-fit:contain; }
@media(max-width:700px) {
  .header-inner { min-height:240px; padding:20px 16px; }
  .brand-header { background-position:center,67% 72%; }
}

/* 写真の左右を切らず、二人が収まる比率で全幅表示 */
.brand-header { background:linear-gradient(90deg,rgba(24,13,39,.48),transparent 55%),url("assets/noko-header.webp") center / 100% 100% no-repeat; aspect-ratio:1320 / 500; }
.header-inner { min-height:0; height:100%; align-items:flex-end; padding:24px 32px; }
.content-stage { position:relative; isolation:isolate; }
/* ヘッダーの下から始まる背景。中央の枠とは重ねない */
.page-art { position:absolute; inset:24px 0 auto; max-width:none; margin:0; padding:0 12px; gap:0; align-items:flex-start; z-index:-1; }
.page-art-side { width:300px; height:580px; max-height:none; opacity:.28; }
.page-art-side img { max-width:none; }
.content-stage main { width:calc(100% - 640px); max-width:1184px; }
@media(max-width:1199px) {
 .page-art { position:relative; inset:auto; padding:24px 20px 0; gap:20px; z-index:0; }
 .page-art-side { width:calc(50% - 10px); height:340px; opacity:.30; }
 .content-stage main { width:100%; }
}
@media(max-width:700px) {
 /* 写真は比率を保持。文字とロゴは写真の下に置き、二人を隠さない */
 .brand-header { aspect-ratio:auto; padding-top:37.8788%; background-color:#211833; background-size:100% auto; background-position:center top; }
 .header-inner { height:auto; min-height:0; padding:16px; background:#211833; }
 .page-art { padding:20px 12px 0; gap:12px; }
 .page-art-side { width:calc(50% - 6px); height:240px; }
}

/* 低い写真ヘッダー。上端を固定し、二人の顔を残す */
.brand-header { aspect-ratio:auto; height:max(180px,25vw); padding-top:0; background-size:100% 100%,100% auto; background-position:center,center top; }
.header-inner { height:100%; min-height:0; padding:18px 32px; }
.content-stage { overflow-x:clip; }
.page-art { overflow:visible; }
.page-art-side { --character-height:620; height:740px; }
.page-art-side:first-child img { transform:translateX(-65px); }
.page-art-side:last-child img { transform:translateX(65px); }
@media(max-width:1199px) {
 .page-art-side { --character-height:380; height:460px; }
 .page-art-side:first-child img { transform:translateX(-50px); }
 .page-art-side:last-child img { transform:translateX(50px); }
}
@media(max-width:700px) {
 .brand-header { height:180px; background-size:100% 100%,auto 180px; background-position:center,right top; }
 .header-inner { height:100%; padding:12px 16px; background:transparent; }
 .brand-logo { width:48px; height:54px; }
 .brand-lockup { gap:8px; }
 .artists { font-size:.75rem; }
 .page-art-side { --character-height:280; height:340px; }
 .page-art-side:first-child img { transform:translateX(-28px); }
 .page-art-side:last-child img { transform:translateX(28px); }
}

/* 顔の実寸を基準に拡大し、顔の中心を画面内に揃える */
.page-art-side { position:relative; --face-height:120; height:1500px; }
.page-art-side img { position:absolute; transform:none!important; }
@media(max-width:1199px) {
 .page-art-side { --face-height:90; height:1100px; }
}
@media(max-width:700px) {
 .page-art-side { --face-height:64; height:800px; }
}

/* 写真ヘッダーはサイド装飾より前面に固定 */
.brand-header { z-index:10; isolation:isolate; background-color:#211833; height:max(160px,22vw); }
.content-stage { z-index:0; }
.brand-lockup .official,.artists {
 text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 7px rgba(255,245,224,.35);
}
.brand-logo {
 filter:drop-shadow(0 0 2px rgba(255,248,230,.95)) drop-shadow(0 0 7px rgba(255,220,169,.38));
}
.header-inner { padding-top:12px; padding-bottom:12px; }
@media(max-width:700px) {
 .brand-header { height:160px; background-size:100% 100%,auto 160px; }
}

/* 白いぼかしは使わず、細い縁と暗い影でロゴの輪郭を保つ */
.brand-logo { filter:drop-shadow(1px 0 0 #f3d4a0) drop-shadow(-1px 0 0 #f3d4a0) drop-shadow(0 1px 0 #f3d4a0) drop-shadow(0 -1px 0 #f3d4a0) drop-shadow(0 2px 2px rgba(0,0,0,.75)); }
.intro-character img { transform:none; object-fit:contain; }
.intro-character img.pixel-art { image-rendering:pixelated; }

/* 控えめな半透明の白い縁。広い光彩は使わない */
.brand-logo { filter:drop-shadow(1px 0 0 rgba(255,255,255,.6)) drop-shadow(-1px 0 0 rgba(255,255,255,.6)) drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 -1px 0 rgba(255,255,255,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.65)); }
img { -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
.brand-header { -webkit-touch-callout:none; }

/* スマホでは装飾用の高さを確保せず、予定の背面へ配置 */
@media(max-width:700px) {
 .page-art { position:absolute; inset:16px 0 auto; margin:0; padding:0; gap:0; z-index:-1; }
 .page-art-side { width:50%; height:800px; opacity:.18; }
 .content-stage main { position:relative; width:100%; padding-top:22px; }
 .content-stage footer { position:relative; }
}

/* スマホの背景はランダムに選ばれた1体のみ */
@media(max-width:700px) {
 .page-art { justify-content:flex-end; }
 .page-art-side:first-child { display:none; }
 .page-art-side:last-child { width:65%; }
}

@media(max-width:700px) {
 .intro { display:block; }
 .content-stage > .intro-character { position:relative; width:160px; height:180px; margin:0 auto 20px; padding:12px; }
}

@media(max-width:700px) {
 .content-stage > .intro-character { width:80px; height:90px; padding:6px; }
}

.intro-character[hidden],.lucky-slot[hidden] { display:none; }
.lucky-slot { position:relative; margin:0 auto 24px; padding:12px; width:min(100% - 32px,320px); color:#f6edff; text-align:center; }
.slot-label { margin:0 0 8px; font-size:.8125rem; letter-spacing:.1em; }
.slot-reels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:8px; border:1px solid #ffffff35; border-radius:12px; background:#211833aa; }
.slot-reel { height:90px; padding:6px; border-radius:7px; background:#ffffff0d; }
.slot-reel img { width:100%; height:100%; object-fit:contain; }
.slot-reel .pixel-art { image-rendering:pixelated; }
.slot-result { margin:10px 0 0; font-size:.8125rem; }
.slot-hint { margin:5px 0 0; font-size:.6875rem; color:#d7c9e3; }
.is-jackpot .slot-reels { border-color:#ffad63; }
.is-jackpot .slot-result { color:#ffd29a; font-weight:700; }

/* カレンダー直下のバナー広告。未設定時は領域ごと非表示 */
.banner-ad[hidden] { display:none; }
.banner-ad { margin:24px 0 0; padding:12px; border:1px solid #ffffff24; border-radius:12px; background:#21183399; }
.banner-ad-label { margin:0 0 8px; color:#d7c9e3; text-align:center; font-size:.6875rem; }
#banner-ad-content { display:flex; justify-content:center; align-items:center; min-width:0; }
#banner-ad-content img { display:block; max-width:100%; height:auto; }
@media(max-width:700px) { .banner-ad { padding:10px 0; } }