@charset "UTF-8";
/*
 * ヒントページ専用スタイル。
 * トークン（:root 変数）・.index-logos・.index-credits は style.css を流用。
 * 表紙（菱形＋縦書きタイトル＋瑞雲）、金枠、謎カード、答えマスは会場配布チラシの
 * デザインデータ（PDF）から抜き出した SVG/PNG（assets/img/hint/）で構成する。
 */
:root {
  --hint-gap-xs: min(0.8rem, 1.9047619048vw);
  --hint-gap-sm: min(1.2rem, 2.8571428571vw);
  --hint-gap-md: min(1.6rem, 3.8095238095vw);
  --hint-gap-lg: min(2.4rem, 5.7142857143vw);
  --hint-gold: #cbbb87;          /* 表紙の金線 */
  --hint-gold-card: #ecbd7f;     /* 謎カードの枠 */
  --hint-teal: #0f6362;          /* チラシ下部のティール */
  --hint-teal-mid: #2f8583;
  --hint-teal-light: #a9dbd8;
  --hint-ink: #231916;
  --hint-paper: #fbf4e4;         /* 謎カードのクリーム */
  --hint-frame-inset: min(1rem, 2.3809523810vw);
}

.page-hint .main {
  position: relative;
  padding-bottom: 0;
}

/* ===== 外枠（金線＋角飾り）===== */
/*
 * 枠は 1 枚の SVG を border-image で 9 分割して貼る（四隅はそのまま・四辺だけ伸ばす）。
 * 角飾りと線が同じ画像の中でつながっているので、画面幅が変わっても継ぎ目や段差が出ない。
 * slice 24 を 24px で描くので原寸（線の太さ 1.8px）のまま表示される。
 */
.hint-frame {
  position: absolute;
  inset: var(--hint-frame-inset);
  z-index: 20;
  pointer-events: none;
  border: 24px solid transparent;
  border-image: url("../img/hint/page-frame.svg") 24 / 24px stretch;
}

/* ===== 表紙 ===== */
.hint-hero {
  position: relative;
  z-index: 1;
  padding-top: min(3.2rem, 7.6190476190vw);
}
.hint-hero__art {
  position: relative;
  width: min(27rem, 64.2857142857vw);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.hint-hero__diamond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hint-hero__cloud {
  position: absolute;
  height: auto;
  z-index: 2;
}
.hint-hero__cloud--right {
  width: 62%;
  right: -26%;
  top: 27%;
}
.hint-hero__cloud--left {
  width: 82%;
  left: -34%;
  bottom: 9%;
}
.hint-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--hint-ink);
  font-family: var(--text-primary);
  font-weight: 600;
  font-size: min(3.15rem, 7.5vw);
  letter-spacing: 0.16em;
  line-height: 1.45;
  white-space: nowrap;
}
.hint-hero__title-line {
  display: block;
}
.hint-hero__title-line + .hint-hero__title-line {
  margin-inline-start: 2.3em;
  margin-block-start: 0.15em;
}
.hint-hero__logos {
  margin-top: min(2.4rem, 5.7142857143vw);
}

/* ===== あらすじ動画（YouTube 埋め込み・16:9）===== */
.hint-movie {
  position: relative;
  z-index: 1;
  margin-top: min(2.4rem, 5.7142857143vw);
  padding-inline: calc(var(--content-padding) + min(0.8rem, 1.9047619048vw));
}
.hint-movie__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border: 1px solid var(--hint-gold);
}
.hint-movie .hint-movie__heading {
  margin-bottom: var(--hint-gap-md);
}
.hint-movie__note {
  margin-top: min(1rem, 2.3809523810vw);
  color: var(--hint-ink);
  font-size: min(1.344rem, 3.2vw);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.hint-movie__disclaimer {
  font-size: 0.9em;
  font-weight: 400;
}
.hint-movie__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== 本文（クリーム→ティールのグラデーション面）===== */
.hint-body {
  position: relative;
  z-index: 1;
  margin-top: min(1.6rem, 3.8095238095vw);
  padding: min(4.8rem, 11.4285714286vw) calc(var(--content-padding) + min(0.8rem, 1.9047619048vw)) min(3.6rem, 8.5714285714vw);
  background: linear-gradient(180deg, rgba(251, 244, 228, 0) 0%, var(--hint-teal-light) 9%, var(--hint-teal-mid) 24%, var(--hint-teal) 46%, #0b5857 100%);
}

.hint-heading {
  display: flex;
  align-items: center;
  gap: min(1.2rem, 2.8571428571vw);
  margin: 0;
  color: var(--hint-ink);
  font-family: var(--text-primary);
  font-weight: 700;
  font-size: min(2.016rem, 4.8vw);
  letter-spacing: 0.22em;
}
.hint-heading::before,
.hint-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-brown);
}
.hint-heading__text {
  padding: 0 min(1rem, 2.3809523810vw);
  border-inline: 1px solid var(--color-brown);
  line-height: 1.5;
}

.hint-notice {
  margin-top: var(--hint-gap-md);
  color: var(--hint-ink);
  font-size: min(1.344rem, 3.2vw);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.hint-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: min(3.6rem, 8.5714285714vw);
  margin-top: var(--hint-gap-lg);
}

/* ===== 謎カード（クリーム地・金の二重枠・雷文の角飾り）===== */
.hint-card {
  position: relative;
  min-width: 0;
  padding: min(2.8rem, 6.6666666667vw) min(1.8rem, 4.2857142857vw) min(1.4rem, 3.3333333333vw);
  background-color: var(--hint-paper);
}
/* 二重枠（外 2px・内 1px、内側の線は四隅を切り欠き）。外枠と同じく 1 枚の SVG を border-image で貼る */
.hint-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 16px solid transparent;
  border-image: url("../img/hint/card-frame.svg") 16 / 16px stretch;
  pointer-events: none;
}

.hint-card__title {
  margin: 0 0 var(--hint-gap-sm);
  color: var(--hint-ink);
  font-family: var(--text-primary);
  font-weight: 800;
  font-size: min(3.4rem, 8.0952380952vw);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
}
.hint-card__title-no {
  font-size: 0.62em;
}

/* ===== アコーディオン ===== */
.hint-item {
  border-top: 1px solid rgba(74, 47, 27, 0.25);
}
.hint-item:first-child {
  border-top: 1px solid rgba(74, 47, 27, 0.25);
}
.hint-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hint-gap-sm);
  padding-block: var(--hint-gap-sm);
  cursor: pointer;
  list-style: none;
}
.hint-item__summary::-webkit-details-marker { display: none; }
.hint-item__summary::marker { content: ""; }

.hint-item__label {
  color: var(--color-brown);
  font-size: min(1.568rem, 3.7333333333vw);
  font-weight: 700;
}
.hint-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
}
.hint-item__icon::before,
.hint-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-brown);
  transition: transform 0.25s ease;
}
.hint-item__icon::before { width: 1em; height: 2px; transform: translate(-50%, -50%); }
.hint-item__icon::after { width: 2px; height: 1em; transform: translate(-50%, -50%) scaleY(1); }
.hint-item[open] .hint-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.hint-item__content { overflow: hidden; }
.hint-item__text {
  padding-bottom: var(--hint-gap-md);
  color: var(--hint-ink);
  font-size: min(1.568rem, 3.7333333333vw);
  line-height: 1.9;
}

/* 文中の空欄マス（縦シマ3マス）と矢印 */
.hint-cells {
  display: inline-block;
  height: 1.7em;
  width: auto;
  vertical-align: middle;
  margin-inline: 0.05em 0.1em;
}
.hint-arrow {
  display: inline-block;
  height: 1.05em;
  width: auto;
  vertical-align: -0.14em;
  margin-inline: 0.12em;
}

/* 答え：チラシの答えマスに文字を重ねる */
.hint-answer {
  position: relative;
  margin: var(--hint-gap-xs) auto var(--hint-gap-lg);
}
.hint-answer--3 { width: min(19rem, 45.2380952381vw); }
.hint-answer--4 { width: min(23rem, 54.7619047619vw); }
.hint-answer--7 { width: min(33rem, 78.5714285714vw); }
.hint-answer__cells {
  display: block;
  width: 100%;
  height: auto;
}
.hint-answer__letters {
  position: absolute;
  inset: 4% 2%;
  display: grid;
  place-items: center;
  color: var(--hint-ink);
  font-family: var(--text-primary);
  font-weight: 700;
  line-height: 1;
}
.hint-answer--3 .hint-answer__letters { grid-template-columns: repeat(3, 1fr); font-size: min(3.2rem, 7.6190476190vw); }
.hint-answer--4 .hint-answer__letters { grid-template-columns: repeat(4, 1fr); font-size: min(3.2rem, 7.6190476190vw); }
.hint-answer--7 .hint-answer__letters { grid-template-columns: repeat(7, 1fr); font-size: min(2.6rem, 6.1904761905vw); }

/* ===== 権利表記（ティール地なので明色）===== */
.hint-credits {
  margin-top: min(3.2rem, 7.6190476190vw);
  padding-bottom: min(1.6rem, 3.8095238095vw);
  color: #f3ecdc;
}

/* 最終問題ヒント(1)の折り手順記号：用紙の❶に合わせティール地の丸＋白数字 */
.hint-step {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.15em;
  border-radius: 50%;
  background-color: #fff;
  color: var(--hint-teal);
  font-size: 0.92em;
  line-height: 1.15em;
  text-align: center;
  vertical-align: -0.12em;
  font-weight: 700;
}