/* Hero-only clock. Layer order: water / clock (0–1), logo (2), artwork (3).
   The "次回開催まで" clock and the page-mast clocks are the .hc-feature variant below. */
.hero { isolation:isolate; }
.hero > .hero-title { z-index:2; }
.hero > .hero-person { z-index:3; }
.hero > .hero-clock {
  --hc-size:610px;
  --hc-ink:#497f9d;
  --hc-fine:#70a9c4;
  --hc-line:#8cb8cf80;
  --hc-rim-light:#f4fcff;
  --hc-rim-mid:#badcea;
  --hc-rim-dark:#74a6bf;
  --hc-face:#f3fcffb3;
  --hc-reflection:#ffffffcf;
  --hc-water:#6dc9eb;
  --hc-hour:305deg;
  --hc-minute:52deg;
  --hc-second:228deg;
  position:absolute;
  top:-18px;
  left:50%;
  width:var(--hc-size);
  height:var(--hc-size);
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
  z-index:1;
  contain:layout style;
}
.hero-clock *, .hero-clock *::before, .hero-clock *::after { box-sizing:border-box; }
.hero-clock > span, .hero-clock > div { position:absolute; border-radius:50%; }
.hc-aura {
  inset:-7%;
  background:radial-gradient(circle,transparent 45%,#f5fdff70 54%,#8dd4ee19 63%,transparent 72%);
}
.hc-orbit {
  inset:0;
  border:1px solid var(--hc-line);
  opacity:.72;
  animation:hc-orbit-turn 180s linear infinite;
  box-shadow:inset 0 0 0 8px #f5fdff1c;
}
.hc-orbit::before, .hc-orbit::after {
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  top:calc(50% - 3.5px);
  border:1px solid var(--hc-rim-dark);
  background:var(--hc-rim-light);
  border-radius:50%;
  box-shadow:0 0 0 4px #e3f7ff80;
}
.hc-orbit::before { left:-4px; }
.hc-orbit::after { right:-4px; }
.hc-orbit-secondary {
  inset:2.2%;
  border:1px dashed var(--hc-line);
  opacity:.52;
  animation:hc-orbit-turn 240s linear infinite reverse;
}
.hc-case {
  inset:4.2%;
  border:1px solid var(--hc-rim-dark);
  background:conic-gradient(from 140deg,var(--hc-rim-mid),var(--hc-rim-light) 12%,var(--hc-rim-dark) 27%,var(--hc-rim-light) 41%,var(--hc-rim-mid) 60%,var(--hc-rim-light) 73%,var(--hc-rim-dark) 88%,var(--hc-rim-mid));
  box-shadow:0 3px 12px #367d9c16,inset 0 0 0 2px #f4fcffcc;
  opacity:.72;
}
.hc-case::before {
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  border:1px solid var(--hc-rim-mid);
  background:radial-gradient(circle at 42% 28%,var(--hc-face),#caeaf83d 76%);
  box-shadow:inset 0 0 0 3px #f3fcff8c,inset 0 -12px 22px #80bfd025;
}
.hc-chapter {
  inset:8%;
  border:1px solid var(--hc-line);
  box-shadow:0 0 0 4px #f4fcff40,inset 0 0 0 5px #f4fcff45;
}
.hc-minute-track {
  inset:6.8%;
  background:repeating-conic-gradient(from -.35deg,var(--hc-fine) 0deg .7deg,transparent .7deg 6deg);
  -webkit-mask-image:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  mask-image:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  opacity:.72;
}
.hc-hour-track {
  inset:6.7%;
  background:repeating-conic-gradient(from -.7deg,var(--hc-ink) 0deg 1.4deg,transparent 1.4deg 30deg);
  -webkit-mask-image:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px));
  mask-image:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px));
  opacity:.68;
}
.hc-numerals { inset:10.5%; color:var(--hc-ink); opacity:.69; }
.hc-numeral { position:absolute; inset:0; transform:rotate(var(--hc-index)); }
.hc-numeral > b {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%) rotate(calc(-1 * var(--hc-index)));
  font:500 16px/1 "Outfit",sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:.035em;
}
.hc-numeral:nth-child(1) { --hc-index:0deg; }
.hc-numeral:nth-child(2) { --hc-index:30deg; }
.hc-numeral:nth-child(3) { --hc-index:60deg; }
.hc-numeral:nth-child(4) { --hc-index:90deg; }
.hc-numeral:nth-child(5) { --hc-index:120deg; }
.hc-numeral:nth-child(6) { --hc-index:150deg; }
.hc-numeral:nth-child(7) { --hc-index:180deg; }
.hc-numeral:nth-child(8) { --hc-index:210deg; }
.hc-numeral:nth-child(9) { --hc-index:240deg; }
.hc-numeral:nth-child(10) { --hc-index:270deg; }
.hc-numeral:nth-child(11) { --hc-index:300deg; }
.hc-numeral:nth-child(12) { --hc-index:330deg; }
.hc-inner-track {
  inset:16%;
  border:1px solid #7bb6cf55;
  box-shadow:0 0 0 4px #e5f7fe57,inset 0 0 0 4px #e5f7fe42;
}
.hc-water {
  inset:16.8%;
  overflow:hidden;
  opacity:.38;
  /* The center stays pale: the original logo remains the visual foreground. */
  background:radial-gradient(ellipse at 50% 35%,#f5fdff80,transparent 75%);
}
.hc-water::before, .hc-water::after {
  content:"";
  position:absolute;
  left:-30%;
  bottom:-119%;
  width:160%;
  height:160%;
  border-radius:43%;
  border:1px solid var(--hc-reflection);
  background:linear-gradient(150deg,var(--hc-water),#b4e8f977 50%);
  animation:hc-water-turn 32s linear infinite;
}
.hc-water::after {
  bottom:-123%;
  left:-32%;
  border-radius:46%;
  opacity:.65;
  animation-duration:43s;
  animation-direction:reverse;
}
.hc-hands { inset:8%; opacity:.45; }
.hc-hand { position:absolute; inset:0; transform-origin:50% 50%; }
.hc-hand::before {
  content:"";
  position:absolute;
  left:calc(50% - 2.5px);
  bottom:50%;
  width:5px;
  height:30%;
  background:linear-gradient(90deg,var(--hc-rim-light),var(--hc-ink));
  clip-path:polygon(50% 0,100% 16%,72% 90%,50% 100%,28% 90%,0 16%);
}
.hc-hand-hour { transform:rotate(var(--hc-hour)); }
.hc-hand-minute { transform:rotate(var(--hc-minute)); }
.hc-hand-minute::before { height:39%; width:4px; left:calc(50% - 2px); }
.hc-hand-second { transform:rotate(var(--hc-second)); opacity:.65; }
.hc-hand-second::before {
  height:45%;
  bottom:43%;
  width:1px;
  left:calc(50% - .5px);
  background:var(--hc-ink);
  clip-path:none;
}
.hc-hand-second::after {
  content:"";
  position:absolute;
  top:54%;
  left:calc(50% - 3px);
  width:6px;
  height:6px;
  border:1px solid var(--hc-ink);
  border-radius:50%;
}
.hc-pin {
  inset:calc(50% - 5px);
  border:2px solid var(--hc-rim-light);
  background:var(--hc-rim-dark);
  opacity:.65;
}
.hc-glass {
  inset:5.5%;
  background:conic-gradient(from 200deg,transparent 0deg 65deg,#fbfeff9c 73deg,transparent 100deg 236deg,#f9fdff63 250deg,transparent 280deg);
  -webkit-mask-image:radial-gradient(farthest-side,transparent 83%,#000 86% 96%,transparent 98%);
  mask-image:radial-gradient(farthest-side,transparent 83%,#000 86% 96%,transparent 98%);
  opacity:.72;
  animation:hc-glass-breathe 12s ease-in-out infinite;
}
.hero-clock *, .hero-clock *::before, .hero-clock *::after { animation-play-state:paused; }
.hero-clock[data-hc-running=true] *, .hero-clock[data-hc-running=true] *::before, .hero-clock[data-hc-running=true] *::after { animation-play-state:running; }
.hero-clock[data-hc-running=true] .hc-hand { transition:transform .95s linear; }
.hero-clock[data-hc-running=false] .hc-hand { transition:none; }

[data-theme=dark] .hero > .hero-clock {
  --hc-ink:#b4dceb;
  --hc-fine:#87bfd6;
  --hc-line:#7fb4cc52;
  --hc-rim-light:#b1d5e4;
  --hc-rim-mid:#477992;
  --hc-rim-dark:#244f6b;
  --hc-face:#224764a8;
  --hc-reflection:#99dcf783;
  --hc-water:#397ca5;
}
[data-theme=dark] .hero-clock .hc-case { opacity:.62; box-shadow:0 3px 16px #061f3033,inset 0 0 0 2px #b1d5e448; }
[data-theme=dark] .hero-clock .hc-case::before { background:radial-gradient(circle at 42% 28%,var(--hc-face),#17385299 76%); box-shadow:inset 0 0 0 3px #8ad8f018,inset 0 -12px 22px #4c91b91a; }
[data-theme=dark] .hero-clock .hc-aura { opacity:.24; }
[data-theme=dark] .hero-clock .hc-water { opacity:.22; background:radial-gradient(ellipse at 50% 35%,#2a566c25,transparent 75%); }
[data-theme=dark] .hero-clock .hc-glass { opacity:.35; }
[data-theme=dark] .hero-clock .hc-hands { opacity:.27; }
[data-contrast=high] .hero-clock { opacity:.32; }
[data-contrast=high] .hero-clock .hc-aura,
[data-contrast=high] .hero-clock .hc-glass,
[data-contrast=high] .hero-clock .hc-water,
[data-contrast=high] .hero-clock .hc-hands,
[data-contrast=high] .hero-clock .hc-pin { display:none; }
[data-motion=off] .hero-clock *, [data-motion=off] .hero-clock *::before, [data-motion=off] .hero-clock *::after { animation:none!important; transition:none!important; }

@keyframes hc-orbit-turn { to { transform:rotate(360deg); } }
@keyframes hc-water-turn { to { transform:rotate(360deg); } }
@keyframes hc-glass-breathe { 50% { opacity:.38; transform:rotate(8deg); } }

/* Container queries also support the existing phone/tablet preview selector. */
@container site (max-width:1100px) {
  .hero > .hero-clock { --hc-size:550px; top:-19px; }
  .hc-numeral > b { font-size:15px; }
}
@container site (max-width:900px) {
  .hero > .hero-clock { --hc-size:490px; top:-16px; }
  .hc-numeral > b { font-size:14px; }
}
@container site (max-width:600px) {
  .hero > .hero-clock { --hc-size:370px; top:-3px; }
  .hc-numeral > b { font-size:11px; }
  .hc-case::before { inset:4px; }
  .hc-orbit { opacity:.55; }
  .hc-orbit-secondary { display:none; }
  .hc-minute-track { opacity:.6; }
  .hc-water { opacity:.28; }
  .hc-glass { animation:none; opacity:.55; }
}
@container site (max-width:350px) {
  .hero > .hero-clock { --hc-size:332px; top:-1px; }
  .hc-numeral > b { font-size:10px; }
  .hc-hour-track { opacity:.58; }
}
/* preferences.js resolves the system setting; an explicit user "on" wins. */
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion=on]) .hero-clock *,
  html:not([data-motion=on]) .hero-clock *::before,
  html:not([data-motion=on]) .hero-clock *::after { animation:none!important; transition:none!important; }
}
@media(forced-colors:active) { .hero-clock { display:none; } }
@media print { .hero-clock { display:none; } }

/* Feature variant: the same clock, used as the "次回開催まで" clock (rich.js clones the
   hero markup and adds .hc-feature + .hc-bubbles). Gold case, gold numerals and second
   hand, and water filling the lower half. The hero clock above is not affected. */
.hero-clock.hc-feature {
  --hc-ink:#2f5f7e;
  --hc-fine:#7fb0c6;
  --hc-line:#c6a36b80;
  --hc-gold-light:#fff0c8;
  --hc-gold:#e0c387;
  --hc-gold-mid:#c6a36b;
  --hc-gold-dark:#9b7a43;
  --hc-numeral:#7d5b22;
  --hc-hand:#24446d;
  --hc-face-light:#f7fdff;
  --hc-face-mid:#d4eff8;
  --hc-face-deep:#a8d9ec;
  --hc-water-top:#69d1ec70;
  --hc-water-deep:#2a9acaa8;
  container-type:inline-size;
}
.clock-assembly > .hero-clock.hc-feature {
  position:relative;
  display:block;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:1;
  transform:none;
  container-type:inline-size;
}
/* Ticks, numerals and hands stay above the water so they remain readable. */
.hc-feature .hc-minute-track, .hc-feature .hc-hour-track, .hc-feature .hc-numerals { z-index:1; }
.hc-feature .hc-hands, .hc-feature .hc-pin, .hc-feature .hc-glass { z-index:2; }
.hc-feature .hc-aura { inset:-2%; background:radial-gradient(circle,transparent 46%,#f5fdffa0 54%,#8dd4ee2a 63%,transparent 72%); }
.hc-feature .hc-orbit { border-color:var(--hc-line); opacity:.9; }
.hc-feature .hc-orbit::before, .hc-feature .hc-orbit::after { border-color:var(--hc-gold-dark); background:var(--hc-gold); box-shadow:0 0 0 3px #fff6dc99; }
.hc-feature .hc-orbit-secondary { border-color:#7fb0c670; opacity:.7; }
.hc-feature .hc-case {
  opacity:1;
  border-color:var(--hc-gold-dark);
  background:conic-gradient(from 140deg,var(--hc-gold-mid),var(--hc-gold-light) 12%,var(--hc-gold-dark) 27%,var(--hc-gold) 41%,var(--hc-gold-mid) 60%,var(--hc-gold-light) 73%,var(--hc-gold-dark) 88%,var(--hc-gold-mid));
  box-shadow:0 10px 26px #235b9924,inset 0 0 0 2px #fff6dccc;
}
.hc-feature .hc-case::before {
  inset:2.6%;
  border:3px solid #e5faff;
  background:radial-gradient(circle at 38% 26%,var(--hc-face-light),var(--hc-face-mid) 72%,var(--hc-face-deep));
  box-shadow:inset 0 0 0 1px #9cc8da80,inset 0 -18px 30px #4fa7cc2e;
}
.hc-feature .hc-chapter { border-color:#c6a36b66; box-shadow:none; }
.hc-feature .hc-minute-track { opacity:.85; }
.hc-feature .hc-hour-track {
  background:repeating-conic-gradient(from -.9deg,var(--hc-gold-dark) 0deg 1.8deg,transparent 1.8deg 30deg);
  opacity:1;
}
.hc-feature .hc-numerals { inset:12.5%; opacity:1; color:var(--hc-numeral); }
.hc-feature .hc-numeral > b { font:600 clamp(11px,5.2cqi,22px)/1 "Outfit",sans-serif; text-shadow:0 1px 0 #ffffffb3; }
.hc-feature .hc-inner-track { border-color:#7bb6cf40; box-shadow:none; }
.hc-feature .hc-water {
  inset:7.2%;
  opacity:1;
  background:radial-gradient(ellipse at 40% 28%,#ffffff8c,transparent 62%);
}
.hc-feature .hc-water::before, .hc-feature .hc-water::after { bottom:-115%; border:1.5px solid #ffffffc0; background:linear-gradient(180deg,var(--hc-water-top),var(--hc-water-deep)); }
.hc-feature .hc-water::after { bottom:-119%; opacity:.75; }
.hc-feature .hc-bubbles { inset:7.2%; overflow:hidden; }
.hc-bubbles > i {
  position:absolute;
  width:2.6%;
  aspect-ratio:1;
  border:1px solid #ffffffd9;
  border-radius:50%;
  background:#c8f3ff59;
  animation:hc-bubble 9s ease-in-out infinite;
}
.hc-bubbles > i:nth-child(1) { left:28%; top:72%; }
.hc-bubbles > i:nth-child(2) { left:62%; top:80%; width:1.8%; animation-delay:-3s; }
.hc-bubbles > i:nth-child(3) { left:55%; top:64%; width:2.2%; animation-delay:-6s; }
.hc-bubbles > i:nth-child(4) { left:40%; top:86%; width:1.5%; animation-delay:-4.5s; }
/* Rotated hand boxes would widen the page on phones; the hands all fit inside this circle. */
.hc-feature .hc-hands { opacity:1; overflow:hidden; }
.hc-feature .hc-hand::before { background:linear-gradient(90deg,#4a7ea6,var(--hc-hand)); filter:drop-shadow(1px 2px 1px #21517e30); }
.hc-feature .hc-hand-hour::before { width:7px; left:calc(50% - 3.5px); height:27%; }
.hc-feature .hc-hand-minute::before { width:5px; left:calc(50% - 2.5px); height:38%; background:linear-gradient(90deg,#5b9bc6,#2777ab); }
.hc-feature .hc-hand-second { opacity:1; }
.hc-feature .hc-hand-second::before { width:1.5px; left:calc(50% - .75px); background:var(--hc-gold-mid); }
.hc-feature .hc-hand-second::after { border-color:var(--hc-gold-mid); background:var(--hc-gold-light); }
.hc-feature .hc-pin { inset:calc(50% - 7px); border:2px solid #fff1d5; background:var(--hc-gold-mid); opacity:1; box-shadow:0 0 0 3px #335a7a; }
.hc-feature .hc-glass { inset:5%; opacity:.9; }
@keyframes hc-bubble { 0%,100% { transform:translateY(8px); opacity:.35; } 50% { transform:translateY(-14px); opacity:.95; } }

[data-theme=dark] .hero-clock.hc-feature {
  --hc-ink:#b4dceb;
  --hc-fine:#87bfd6;
  --hc-numeral:#f0d395;
  --hc-hand:#e1effb;
  --hc-face-light:#244d6b;
  --hc-face-mid:#183a55;
  --hc-face-deep:#194862;
  --hc-water-top:#3f9dc670;
  --hc-water-deep:#1f6f9aa8;
}
[data-theme=dark] .hero-clock.hc-feature .hc-case { opacity:1; box-shadow:0 0 30px #56bee51b,inset 0 0 0 2px #fff6dc55; }
[data-theme=dark] .hero-clock.hc-feature .hc-case::before { border-color:#8cd6f159; background:radial-gradient(circle at 38% 26%,var(--hc-face-light),var(--hc-face-mid) 72%,var(--hc-face-deep)); }
[data-theme=dark] .hero-clock.hc-feature .hc-aura { opacity:.3; }
[data-theme=dark] .hero-clock.hc-feature .hc-water { opacity:.85; background:none; }
[data-theme=dark] .hero-clock.hc-feature .hc-glass { opacity:.35; }
[data-theme=dark] .hero-clock.hc-feature .hc-hands { opacity:1; }
[data-theme=dark] .hero-clock.hc-feature .hc-numeral > b { text-shadow:none; }
[data-theme=dark] .hero-clock.hc-feature .hc-hand::before { background:linear-gradient(90deg,#93d3f6,var(--hc-hand)); }
/* High contrast keeps the feature clock readable instead of fading it like the hero. */
[data-contrast=high] .hero-clock.hc-feature { opacity:1; }
[data-contrast=high] .hero-clock.hc-feature .hc-hands,
[data-contrast=high] .hero-clock.hc-feature .hc-pin { display:block; }
[data-contrast=high] .hero-clock.hc-feature .hc-numerals { color:var(--ink,#14394f); }
[data-contrast=high] .hero-clock.hc-feature .hc-bubbles,
[data-contrast=high] .hero-clock.hc-feature .hc-water { display:none; }

/* Page-mast clock on the other pages: the same gold feature clock, decorative only
   (motion-rich.js builds it into the existing .mast-clock ring). */
.mast-clock.has-clock { border:0; box-shadow:none; }
.mast-clock > .hero-clock.hc-feature { position:absolute; inset:0; opacity:.9; pointer-events:none; }
/* Phones: smaller and tucked into the top-right corner so it stays clear of the title text. */
@container site (max-width:600px) {
  .mast-clock.has-clock { width:250px; height:250px; right:-80px; top:-95px; }
  .mast-clock > .hero-clock.hc-feature { opacity:.45; }
}
[data-contrast=high] .mast-clock > .hero-clock.hc-feature { display:none; }
/* 2026-10-20 601〜1100px：時計を300pxにして右へ寄せる（見えるのは右端から210px）。見出しの文字幅の上限は site.css。 */
@container site (min-width:601px) and (max-width:1100px) {
  .mast-clock { width:300px; height:300px; right:-90px; top:-80px; }
}