@charset "UTF-8";

/* 2026年専用です。旧年度のCSSとは共有しません。 */
body.ehon2026-page {
  margin: 0;
  padding: 0;
  background: #fdf3dc;
  color: #5a3a28;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

#ehon2026 {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #5a3a28;
  background: #fdf3dc url("img/bg-paper.jpg") center top / 100% auto repeat-y;
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 1.8;
}

#ehon2026 *,
#ehon2026 *::before,
#ehon2026 *::after {
  box-sizing: border-box;
}

#ehon2026 :where(h1, h2, h3, p, ul, ol) {
  margin: 0;
  color: inherit;
  font-family: inherit;
}

#ehon2026 :where(h1, h2, h3) {
  text-transform: none;
}

#ehon2026 img {
  display: block;
  max-width: 100%;
  height: auto;
}

#ehon2026 a {
  color: #2f8a4c;
}

#ehon2026 a:hover {
  color: #1f6b39;
}

#ehon2026 a:focus-visible,
#ehon2026 summary:focus-visible,
.ehon2026-skip:focus-visible {
  outline: 3px solid #5a3a28;
  outline-offset: 5px;
}

/* 応募手順の列数は、元デザインと同じく表示領域の幅で切り替えます。 */
#ehon2026 .ehon2026-steps-wrap {
  container-type: inline-size;
}

#ehon2026 .ehon2026-steps {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 500px) {
  #ehon2026 .ehon2026-steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
}

@container (min-width: 760px) {
  #ehon2026 .ehon2026-steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

#ehon2026 .ehon2026-line-button:hover,
#ehon2026 .ehon2026-line-button:focus-visible {
  background: #05b54d !important;
  color: #fff !important;
  text-decoration: none;
}

#ehon2026 .ehon2026-line-button:active {
  transform: translateY(1px);
}

#ehon2026 .ehon2026-rules {
  width: 100%;
  margin: 0;
  padding: 0;
}

#ehon2026 .ehon2026-additional {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px;
  overflow-wrap: anywhere;
}

#ehon2026 .ehon2026-rules details {
  border: 1px solid #94b58b;
  border-radius: 24px;
  background: #fffbee;
}

#ehon2026 .ehon2026-rules summary {
  padding: 20px 24px;
  color: #2f6b3b;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

#ehon2026 .ehon2026-rules details[open] > summary {
  border-bottom: 1px solid #d8e0c6;
}

#ehon2026 .ehon2026-terms-content {
  padding: 0 24px 24px;
  font-size: 13px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

#ehon2026 .ehon2026-terms-content h3 {
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 700;
}

#ehon2026 .ehon2026-terms-content ul,
#ehon2026 .ehon2026-terms-content ol {
  padding-left: 1.7em;
}

#ehon2026 .ehon2026-terms-content li + li {
  margin-top: 0.5em;
}

#ehon2026 .ehon2026-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}

#ehon2026 .ehon2026-footer-links a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ehon2026-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  padding: 12px 20px;
  transform: translateY(-200%);
  border-radius: 8px;
  background: #fffbee;
  color: #5a3a28;
}

.ehon2026-skip:focus {
  transform: translateY(0);
}

#ehon2026.ehon2026-password {
  min-height: 100vh;
  padding: 64px 24px;
}

#ehon2026 .post-password-form {
  max-width: 600px;
  margin: 0 auto;
}

#ehon2026 .post-password-form p + p {
  margin-top: 24px;
}

@media (max-width: 599px) {
  /* 画像は左寄せにし、下の見出しテキストは中央寄せを保ちます。 */
  #ehon2026 .ehon2026-entry-heading {
    display: block !important;
  }

  #ehon2026 .ehon2026-entry-heading > img {
    margin: 0 0 10px;
  }

  #ehon2026 .ehon2026-entry-heading > span {
    display: block;
  }

  /* 作家名の途中で改行せず、紹介文は行の長さを揃えます。 */
  #ehon2026 .ehon2026-author-name {
    white-space: nowrap;
  }

  #ehon2026 .ehon2026-feature-caption {
    text-wrap: balance;
  }

  #ehon2026 .ehon2026-feature-caption > span {
    display: inline-block;
  }

  #ehon2026 .ehon2026-info-card {
    flex-direction: column;
    text-align: center;
  }

  /* 書影は縦横比を保ちながら、2列で高さを揃えます。 */
  #ehon2026 .ehon2026-books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
    align-items: start !important;
  }

  #ehon2026 .ehon2026-books-grid > li {
    min-width: 0;
  }

  #ehon2026 .ehon2026-books-grid > li > img {
    width: 100% !important;
    height: clamp(130px, 40vw, 180px) !important;
    object-fit: contain;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(90, 58, 40, 0.15));
  }

  #ehon2026 .ehon2026-books-grid > li > span {
    min-height: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  /* 作者近影の横幅を、紹介文の幅に合わせます。 */
  #ehon2026 .ehon2026-author-photo {
    flex: 0 1 100% !important;
    width: 100% !important;
  }

  /* スマートフォンではロゴを先頭の中央へ配置します。 */
  #ehon2026 .ehon2026-footer-layout {
    flex-direction: column;
    align-items: stretch !important;
  }

  #ehon2026 .ehon2026-footer-copy {
    flex: 0 1 auto !important;
    min-width: 0;
  }

  #ehon2026 .ehon2026-footer-logo {
    order: -1;
    align-self: center;
  }
}

/* 文字は画像の外で読みやすく表示し、画像だけを拡大します。 */
#ehon2026 .ehon2026-presents {
  padding: clamp(36px, 5vw, 64px) 20px clamp(36px, 5vw, 56px);
  border-radius: 50% 50% 0 0 / clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0;
  background: #fff;
  text-align: center;
}
#ehon2026 .ehon2026-presents-inner { max-width: 960px; margin: 0 auto; }
#ehon2026 .ehon2026-presents-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.3em;
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900;
  line-height: 1.4;
}
#ehon2026 .ehon2026-presents-count { color: #e9547a; white-space: nowrap; }
#ehon2026 .ehon2026-presents-count strong { font-size: clamp(54px, 6vw, 68px); line-height: 1.1; }
#ehon2026 .ehon2026-presents-figure { margin: 0; }
#ehon2026 .ehon2026-presents-zoom { display: block; position: relative; cursor: zoom-in; }
#ehon2026 .ehon2026-presents-zoom img { width: 100%; }
#ehon2026 .ehon2026-presents-figure figcaption { margin-top: 20px; font-size: 13px; line-height: 1.8; }
#ehon2026 .ehon2026-present-hint { margin-top: 8px; color: #2f8a4c; font-size: 12px; }
#ehon2026 .ehon2026-present-desktop-hint { display: none; }
#ehon2026 .ehon2026-present-lens:not([hidden]) {
  display: block;
  position: absolute;
  width: 160px;
  height: 160px;
  border: 3px solid #e9547a;
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 3px 16px #5a3a2840;
  pointer-events: none;
}
html.ehon2026-viewer-open { overflow: hidden; }
#ehon2026 .ehon2026-present-dialog {
  position: fixed;
  inset: 0;
  width: calc(100% - 24px);
  max-width: 1180px;
  height: min(860px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 16px;
  border: 0;
  border-radius: 20px;
  background: #fffbee;
  color: #5a3a28;
  font-family: inherit;
  text-align: left;
  overflow: hidden;
}
#ehon2026 .ehon2026-present-dialog:not([open]) { display: none; }
#ehon2026 .ehon2026-present-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
#ehon2026 .ehon2026-present-dialog::backdrop { background: #2c241dcc; }
#ehon2026 .ehon2026-present-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#ehon2026 .ehon2026-present-toolbar h2 { font-size: 18px; font-weight: 700; }
#ehon2026 .ehon2026-present-controls { display: flex; gap: 6px; }
#ehon2026 .ehon2026-present-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid #94b58b;
  border-radius: 10px;
  background: #fff;
  color: #2f6b3b;
  font: 700 14px/1.4 "Zen Maru Gothic", sans-serif;
  cursor: pointer;
}
#ehon2026 .ehon2026-present-controls button:disabled { opacity: 0.4; cursor: default; }
#ehon2026 .ehon2026-present-controls [data-present-close] { border-color: #2f6b3b; background: #2f6b3b; color: #fff; }
#ehon2026 .ehon2026-present-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  touch-action: none;
  user-select: none;
}
#ehon2026 .ehon2026-present-viewport img { position: absolute; top: 50%; left: 50%; max-width: none; transform-origin: center; }
#ehon2026 #ehon2026-present-help { font-size: 12px; line-height: 1.7; }
#ehon2026 :is(.ehon2026-present-controls button, .ehon2026-present-viewport):focus-visible { outline: 3px solid #5a3a28; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  #ehon2026 .ehon2026-present-mobile-hint { display: none; }
  #ehon2026 .ehon2026-present-desktop-hint { display: inline; }
}
@media (max-width: 599px) {
  #ehon2026 .ehon2026-presents-title > span:last-child { flex-basis: 100%; }
  #ehon2026 .ehon2026-present-dialog { padding: 12px; border-radius: 14px; }
  #ehon2026 .ehon2026-present-toolbar h2 { font-size: 16px; }
}


/* 応募の仕組みを先に伝え、画像の下に対象・応募先をまとめます。 */
#ehon2026 .ehon2026-campaign-lead {
  margin-bottom: clamp(24px, 4vw, 36px);
}

#ehon2026 .ehon2026-campaign-label {
  display: inline-block;
  margin-bottom: clamp(18px, 3vw, 28px);
  padding: 5px 18px;
  border-radius: 999px;
  background: #fff3bd;
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 700;
}

#ehon2026 .ehon2026-campaign-route {
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.6;
}

#ehon2026 .ehon2026-campaign-route > span {
  color: #2f8a4c;
  font-weight: 900;
}

#ehon2026 #ehon2026-campaign-title {
  margin: 6px 0 12px;
  color: #e9547a;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 900;
  line-height: 1.5;
  text-wrap: balance;
}

#ehon2026 #ehon2026-campaign-title > span {
  display: inline-block;
}

#ehon2026 .ehon2026-campaign-target {
  font-size: clamp(13px, 1.8vw, 15px);
  line-height: 1.8;
  text-wrap: balance;
}

#ehon2026 .ehon2026-campaign-overview {
  max-width: 860px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #ecdcb8;
  border-radius: 24px;
  background: #fffbee;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.9;
  text-align: left;
  overflow-wrap: anywhere;
}

#ehon2026 .ehon2026-campaign-overview h3 {
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 5px solid #f8d566;
  color: #2f6b3b;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.5;
}

#ehon2026 .ehon2026-campaign-overview p + p {
  margin-top: 10px;
}

#ehon2026 .ehon2026-campaign-note {
  font-size: 12px;
}

#ehon2026 .ehon2026-campaign-details {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

#ehon2026 .ehon2026-campaign-nowrap {
  white-space: nowrap;
}

/* 参加書店は、既存ページの色と書体で簡潔にまとめます。 */
#ehon2026 .ehon2026-stores {
  padding: clamp(40px, 6vw, 64px) 20px;
  background: #fffdf6;
}

#ehon2026 .ehon2026-stores-inner {
  max-width: 1040px;
  margin: 0 auto;
}

#ehon2026 .ehon2026-stores h2 {
  margin-bottom: 12px;
  color: #2f6b3b;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  line-height: 1.5;
  text-wrap: balance;
}

#ehon2026 .ehon2026-stores-finder {
  margin-top: 24px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid #ecdcb8;
  border-radius: 20px;
  background: #fffbee;
}

#ehon2026 .ehon2026-stores-finder label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

#ehon2026 .ehon2026-stores-finder select {
  width: 100%;
  max-width: 420px;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid #94b58b;
  border-radius: 12px;
  background: #fff;
  color: #5a3a28;
  font: inherit;
  font-size: 16px;
}

#ehon2026 .ehon2026-stores-finder select:focus-visible {
  outline: 3px solid #5a3a28;
  outline-offset: 3px;
}

#ehon2026 #ehon2026-stores-status {
  margin-top: 12px;
  font-size: 14px;
}

#ehon2026 .ehon2026-stores-pref {
  margin-top: 20px;
  border: 1px solid #d8e0c6;
  border-radius: 16px;
  background: #fff;
  overflow-wrap: anywhere;
}

#ehon2026 .ehon2026-stores-pref summary {
  padding: 16px 20px;
  color: #2f6b3b;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

#ehon2026 .ehon2026-stores-pref ul {
  margin: 0;
  padding: 0 20px 12px;
  list-style: none;
}

#ehon2026 .ehon2026-stores-pref li {
  display: flex;
  align-items: baseline;
  gap: 8px 12px;
  padding: 14px 0;
  border-top: 1px solid #ecdcb8;
}

#ehon2026 .ehon2026-store-type {
  flex: 0 0 6em;
  color: #2f6b3b;
  font-size: 12px;
}

#ehon2026 .ehon2026-stores-pref li > span:last-child {
  min-width: 0;
}

#ehon2026 .ehon2026-stores-notes {
  margin-top: 24px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

#ehon2026 .ehon2026-stores-notes p + p {
  margin-top: 8px;
}

#ehon2026 :is(.ehon2026-stores-finder, .ehon2026-stores-pref)[hidden] {
  display: none;
}

/* この年度のページ内リンクだけを、標準のスムーズスクロールにします。 */
html:has(body.ehon2026-page) {
  scroll-behavior: smooth;
  scroll-padding-top: calc(20px + var(--wp-admin--admin-bar--height, 0px));
}

/* displayとoverlayも遷移させ、閉じるときのフェードも保ちます。 */
#ehon2026 .ehon2026-present-dialog {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    display 220ms allow-discrete,
    overlay 220ms allow-discrete;
}

#ehon2026 .ehon2026-present-dialog[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#ehon2026 .ehon2026-present-dialog::backdrop {
  opacity: 0;
  transition: opacity 220ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete;
}

#ehon2026 .ehon2026-present-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  #ehon2026 .ehon2026-present-dialog[open] {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  #ehon2026 .ehon2026-present-dialog[open]::backdrop {
    opacity: 0;
  }
}

/* 動きを減らす設定では、即時に表示・移動します。 */
@media (prefers-reduced-motion: reduce) {
  html:has(body.ehon2026-page) {
    scroll-behavior: auto;
  }

  #ehon2026 .ehon2026-present-dialog,
  #ehon2026 .ehon2026-present-dialog::backdrop {
    transition: none;
  }

  #ehon2026 .ehon2026-present-dialog[open] {
    transform: none;
  }
}

/* 装飾だけを動かし、本文や書影の位置は変えません。 */
#ehon2026 [data-ehon-motion] {
  pointer-events: none;
}

#ehon2026 [data-ehon-motion="sway"] {
  transform-origin: 50% 100%;
}

#ehon2026 .ehon2026-deco-branch {
  transform-origin: 100% 50%;
}

/* 見出しと説明をひとまとまりにし、絵との間の余白を保ちます。 */
#ehon2026 .ehon2026-feature-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#ehon2026 .ehon2026-feature-lead {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40em;
  margin: 0 auto;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.9;
  text-align: center;
  text-wrap: balance;
  background: radial-gradient(closest-side, rgba(253, 243, 220, .92) 60%, rgba(253, 243, 220, 0));
}

#ehon2026 .ehon2026-feature-lead > span {
  display: block;
}

/* 文節ごとに折り返し、拡大表示時にも横へはみ出さないようにします。 */
#ehon2026 .ehon2026-feature-phrase {
  display: inline-block;
  max-width: 100%;
}