@charset "utf-8";
/*
 * TUTURIGACHI 2026 / 総務部
 * Copyright (C) 2026 Tuturigachi Language Solutions Corp. All Rights Reserved.
 * hyakunin.css  百人一首 英訳試行  2026.10.23
 */
.hy { --hy-ink: #26211d; --hy-faint: #8b827a; --hy-shu: #b4472f; }
.hy-count { margin: 6px 0 14px; font-size: 12.5px; color: #555; }
.hy-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #ddd5c8; }
.hy-list a { display: grid; grid-template-columns: 5.5em 9em minmax(0, 1fr) 6.5em; gap: 4px 12px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid #ece6db; text-decoration: none; color: var(--hy-ink); }
.hy-list a:hover { background: #faf6ee; }
.hy-list__no { color: var(--hy-shu); font-weight: bold; }
.hy-list__first { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
.hy-list__day { font-size: 11px; color: var(--hy-faint); text-align: right; font-family: var(--font-dates, monospace); }

.hy-poem { margin: 18px -12px 0; padding: 26px 16px 30px;
  background-color: #f6f1e6;
  background-image: url("ryoshi_gold.png"),
    radial-gradient(70% 300px at 18% -40px, rgba(66, 92, 146, 0.30), rgba(66, 92, 146, 0) 70%),
    radial-gradient(55% 260px at 70% -60px, rgba(66, 92, 146, 0.18), rgba(66, 92, 146, 0) 72%),
    radial-gradient(65% 320px at 84% calc(100% + 60px), rgba(112, 88, 140, 0.20), rgba(112, 88, 140, 0) 70%),
    linear-gradient(180deg, #efeadf 0, #f7f2e7 22%, #f8f3e8 70%, #f1ebe2 100%);
  background-size: 384px 384px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.hy-spread { margin: 0 auto 22px; max-width: 740px; }
.hy-spread__hint { display: none; }
.hy-spread__scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; direction: rtl; scrollbar-width: none;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.18), 0 18px 48px -18px rgba(40, 30, 20, 0.35); }
.hy-spread__scroll::-webkit-scrollbar { display: none; }
.hy-spread__inner { direction: ltr; width: 100%; }
.hy-spread__inner img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.hy-spread figcaption { margin-top: 10px; font-size: 11.5px; color: #6f665e; text-align: center; letter-spacing: 0.06em; }
.hy-text__h { grid-column: 1 / -1; margin: 0 0 6px; font: 500 14px/1 'Hiragino Mincho ProN', 'Yu Mincho', serif; letter-spacing: 0.5em; text-align: center; color: #6f665e; }
.hy-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: start; max-width: 720px; margin: 30px auto 0; padding: 30px clamp(16px, 5vw, 48px) 36px; background: rgba(250, 247, 240, 0.9); border-top: 1px solid rgba(70, 58, 44, 0.16); border-bottom: 1px solid rgba(70, 58, 44, 0.16); }
.hy-uta { writing-mode: vertical-rl; height: 20em; padding: 4px 0 4px 6px; font: 17px/1.9 'Hiragino Mincho ProN', 'Yu Mincho', serif; color: var(--hy-ink); border-left: 1px solid #ddd5c8; }
.hy-uta p { margin: 0 0 0 4px; }
.hy-uta__no { font-size: 12px; color: var(--hy-shu); letter-spacing: 0.1em; }
.hy-uta__shimo { padding-top: 2em; }
.hy-uta__poet { padding-top: 6em; font-size: 14px; color: #4b443e; }
.hy-uta__yomi { font-size: 11px; color: var(--hy-faint); letter-spacing: 0.06em; }
.hy-tries { margin: 0; padding: 0; list-style: none; font: 15px/1.65 Georgia, 'Times New Roman', serif; color: var(--hy-ink); }
.hy-tries li { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px dotted #ddd5c8; }
.hy-tries__date { margin: 0 0 3px; font: 11px/1 var(--font-dates, monospace); color: var(--hy-faint); }
.hy-tries__lines { display: block; margin: 0; text-decoration: none; }
.hy-tries__lines span { display: block; }
.hy-tries .is-struck .hy-tries__lines { color: #7d756e; text-decoration: line-through; text-decoration-color: rgba(60, 50, 45, 0.6); }
.hy-tries__retry { margin: 6px 0 0; font: 12px/1 'Hiragino Mincho ProN', 'Yu Mincho', serif; color: var(--hy-shu); letter-spacing: 0.1em; }
.hy-note { grid-column: 2; margin: 0; font-size: 12.5px; line-height: 1.8; color: #4b443e; }
.hy-note span { color: var(--hy-faint); margin-right: 4px; }
.hy-words { grid-column: 1 / -1; margin: 18px 0 0; padding: 16px 12px; text-align: center; font: 17px/1.9 'Hiragino Mincho ProN', 'Yu Mincho', serif; letter-spacing: 0.08em; color: var(--hy-ink); border-top: 1px solid #ddd5c8; border-bottom: 1px solid #ddd5c8; }
.hy-nav { margin: 24px 0 0; }
@media (max-width: 640px) {
  .hy-list a { grid-template-columns: 4.5em minmax(0, 1fr); }
  .hy-list__first { grid-column: 1 / -1; }
  .hy-list__day { display: none; }
  .hy-text { grid-template-columns: minmax(0, 1fr); }
  .hy-uta { height: 17em; justify-self: center; }
  .hy-note { grid-column: 1; }
  .hy-poem { margin: 14px -10px 0; padding: 16px 10px 24px; }
  .hy-spread__inner { width: 194vw; }
  .hy-spread__inner img { cursor: default; }
  .hy-spread__hint { display: block; margin: 0 0 6px; text-align: center; font-size: 11.5px; color: #8b827a; }
}