/* 配当みくじ 今日の運試し(高配当株カルテ)。生成物のため直接編集しない */
/* 配色: 札の画像(assets/omikuji/*.png)の臙脂 #7a2048・生成り #f6f1e4 と、
   サイトの子テーマの紙色(--cream-bg #fdfcf7・--paper-border #e8e2d0)に合わせた */
.hk-omikuji, .hk-omikuji *, .hk-omikuji *::before, .hk-omikuji *::after { box-sizing: border-box; }
.hk-omikuji [hidden] { display: none !important; }
.hk-omikuji {
  --hko-accent: #7a2048;
  --hko-accent-dark: #5c1636;
  --hko-accent-soft: #f6eaef;
  --hko-paper: #fffaf2;
  --hko-cream: #f6f1e4;
  --hko-bg: #fdfcf7;
  --hko-border: #e8e2d0;
  --hko-border-strong: #d8cfb5;
  --hko-ink: #2a2a2a;
  --hko-ink-soft: #4f4a42;
  --hko-focus: #1b5fbf;
  --hko-wood-1: #b7894c;
  --hko-wood-2: #dcb983;
  --hko-wood-3: #94682f;
  --hko-serif: var(--serif, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif);
  --hko-sans: var(--sans, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif);
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  background: var(--hko-bg);
  border: 1px solid var(--hko-border);
  border-top: 4px solid var(--hko-accent);
  border-radius: 8px;
  color: var(--hko-ink);
  font-family: var(--hko-sans);
  font-size: 1em;
  line-height: 1.7;
  text-align: left;
  overflow-wrap: anywhere;
}
.hk-omikuji p { margin: 0; padding: 0; }

/* 見出し */
.hk-omikuji .hk-omikuji__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.hk-omikuji .hk-omikuji__kicker { font-size: .8125em; font-weight: 700; letter-spacing: .12em; color: var(--hko-accent); }
.hk-omikuji .hk-omikuji__title {
  font-family: var(--hko-serif); font-size: 1.375em; font-weight: 700; line-height: 1.35;
  letter-spacing: .04em; color: var(--hko-ink);
}
.hk-omikuji .hk-omikuji__title-sub {
  display: inline-block; margin-left: .5em; font-size: .72em; font-weight: 700;
  letter-spacing: .06em; color: var(--hko-ink-soft);
}

/* 演出の舞台(札の画像と同じ 1200:630) */
.hk-omikuji .hk-omikuji__stage {
  position: relative; width: 100%; aspect-ratio: 1200 / 630; margin-bottom: 14px;
  background: var(--hko-cream); border: 1px solid var(--hko-border); border-radius: 6px;
  overflow: hidden; perspective: 900px; container-type: inline-size;
}
@supports not (aspect-ratio: 1 / 1) {
  .hk-omikuji .hk-omikuji__stage { height: 0; padding-top: 52.5%; }
}
/* おみくじ筒 */
.hk-omikuji .hk-omikuji__tube {
  position: absolute; left: 41%; width: 18%; bottom: 7%; height: 74%;
  transform-origin: 50% 100%;
}
.hk-omikuji .hk-omikuji__tube-body {
  position: absolute; left: 0; right: 0; top: 16%; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(90deg, var(--hko-wood-3) 0%, var(--hko-wood-1) 18%, var(--hko-wood-2) 44%,
                              var(--hko-wood-1) 72%, var(--hko-wood-3) 100%);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), 0 6px 10px rgba(60, 40, 10, .18);
}
.hk-omikuji .hk-omikuji__tube-body::before,
.hk-omikuji .hk-omikuji__tube-body::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6%; background: var(--hko-accent);
}
.hk-omikuji .hk-omikuji__tube-body::before { top: 12%; }
.hk-omikuji .hk-omikuji__tube-body::after { bottom: 12%; }
.hk-omikuji .hk-omikuji__tube-label {
  writing-mode: vertical-rl; padding: .45em .2em; background: var(--hko-paper); color: var(--hko-ink);
  font-family: var(--hko-serif); font-weight: 700; font-size: 12px; font-size: 3.4cqw; line-height: 1;
  letter-spacing: .15em; border-radius: 2px;
}
.hk-omikuji .hk-omikuji__stick {
  position: absolute; left: 43%; width: 14%; top: 16%; height: 42%; z-index: 0;
  background: linear-gradient(90deg, #e3d3b2, #f8f0de 50%, #e3d3b2);
  border-radius: 3px 3px 0 0;
  transform: translateY(20%);
  transition: transform .3s ease-out;
}
.hk-omikuji.is-stick-out .hk-omikuji__stick { transform: translateY(-36%); }
@keyframes hko-shake {
  0% { transform: rotate(0deg); }
  12% { transform: rotate(-13deg); }
  26% { transform: rotate(11deg); }
  40% { transform: rotate(-9deg); }
  54% { transform: rotate(7deg); }
  68% { transform: rotate(-5deg); }
  82% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
.hk-omikuji.is-shaking .hk-omikuji__tube { animation: hko-shake 1s ease-in-out both; }
/* 札(裏 → めくれて表)。表は札の画像(1200×630)の左の縦長の札の部分だけを見せる
   (札は x 32〜362・y 32〜598。枠線が欠けないよう上下左右に 2px 広げ x 30〜364・y 30〜600 = 334×570。
   広げた分は画像の地色 = 舞台の地色 #f6f1e4 なので目立たない)。右側(ひとこと・注意)は下に文字で出すので
   重ねない。画像の配置を変えたらここも直す(札の画像の余白 32px・札の幅 330px)。
   札の高さ = 舞台の 90%、幅 = 高さ × 334/570 = 舞台の幅の 27.687%、左右の中央 */
.hk-omikuji .hk-omikuji__card {
  position: absolute; top: 5%; height: 90%; left: 36.157%; width: 27.687%;
  visibility: hidden; opacity: 0; transition: opacity .15s;
}
.hk-omikuji.is-card .hk-omikuji__card { visibility: visible; opacity: 1; }
.hk-omikuji.is-card .hk-omikuji__tube { visibility: hidden; }
.hk-omikuji .hk-omikuji__card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .3, 1);
}
.hk-omikuji.is-flipped .hk-omikuji__card-inner { transform: rotateY(180deg); }
.hk-omikuji .hk-omikuji__card-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 8px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.hk-omikuji .hk-omikuji__card-back {
  display: flex; align-items: center; justify-content: center;
  background: var(--hko-accent); box-shadow: 0 4px 10px rgba(60, 40, 10, .18);
}
.hk-omikuji .hk-omikuji__card-back::before {
  content: ""; position: absolute; inset: 6%; border: 2px solid rgba(255, 250, 242, .7); border-radius: 4px;
}
.hk-omikuji .hk-omikuji__card-back-text {
  writing-mode: vertical-rl; color: var(--hko-paper); font-family: var(--hko-serif); font-weight: 700;
  font-size: 14px; font-size: 4.2cqw; letter-spacing: .25em;
}
.hk-omikuji .hk-omikuji__card-front {
  display: flex; align-items: center; justify-content: center;
  background: var(--hko-cream); border-radius: 0; transform: rotateY(180deg);
}
/* 縮小すると札の 2px の枠線が細くなりすぎるので、札の縁(上下左右の 2px の余白の内側)に線を重ねる */
.hk-omikuji .hk-omikuji__card-front::after {
  content: ""; position: absolute; top: .351%; bottom: .351%; left: .599%; right: .599%; z-index: 1;
  border: 1.5px solid var(--hko-accent); border-radius: 4px; pointer-events: none;
}
.hk-omikuji .hk-omikuji__card-alt {
  font-family: var(--hko-serif); font-weight: 700; font-size: 32px; font-size: 9cqw; line-height: 1; color: var(--hko-ink);
}
.hk-omikuji .hk-omikuji__card-img {
  position: absolute; left: -8.982%; top: -5.263%; display: block; width: 359.281%; height: auto; max-width: none;
  margin: 0; border: 0; box-shadow: none;
}
/* 結果を再表示するとき(演出なし)は動きを付けない */
.hk-omikuji.is-static .hk-omikuji__card,
.hk-omikuji.is-static .hk-omikuji__card-inner,
.hk-omikuji.is-static .hk-omikuji__stick { transition: none; }

/* 操作(生まれ年・短い注意・抽選ボタン) */
.hk-omikuji .hk-omikuji__controls { display: flex; flex-direction: column; gap: 8px; }
.hk-omikuji .hk-omikuji__label { display: block; font-size: .9375em; font-weight: 700; }
.hk-omikuji .hk-omikuji__optional { margin-left: .25em; font-size: .9em; font-weight: 400; color: var(--hko-ink-soft); }
.hk-omikuji .hk-omikuji__select {
  display: block; width: 100%; max-width: 100%; min-height: 44px; margin: 0; padding: 8px 10px;
  font: inherit; font-size: 1em; color: var(--hko-ink);
  background: #fff; border: 1px solid var(--hko-border-strong); border-radius: 6px;
}
.hk-omikuji .hk-omikuji__help { font-size: .8125em; line-height: 1.6; color: var(--hko-ink-soft); }
.hk-omikuji .hk-omikuji__notice {
  padding: 8px 10px; font-size: .9375em; font-weight: 700; line-height: 1.55; color: var(--hko-accent-dark);
  background: var(--hko-paper); border: 1px solid #e3cbd5; border-left: 4px solid var(--hko-accent); border-radius: 4px;
}
.hk-omikuji .hk-omikuji__draw {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px;
  font: inherit; font-size: 1.0625em; font-weight: 700; letter-spacing: .06em; line-height: 1.4;
  color: #fff; background: var(--hko-accent); border: 2px solid var(--hko-accent); border-radius: 8px;
  cursor: pointer; white-space: normal; text-align: center;
}
.hk-omikuji .hk-omikuji__draw:hover { background: var(--hko-accent-dark); border-color: var(--hko-accent-dark); }
.hk-omikuji .hk-omikuji__draw[aria-disabled="true"] {
  color: var(--hko-ink-soft); background: #efe9dc; border-color: var(--hko-border-strong); cursor: default;
}
.hk-omikuji .hk-omikuji__rule { font-size: .8125em; color: var(--hko-ink-soft); }
.hk-omikuji .hk-omikuji__storage { font-size: .875em; font-weight: 700; color: var(--hko-accent-dark); }
.hk-omikuji button:focus-visible,
.hk-omikuji select:focus-visible,
.hk-omikuji a:focus-visible { outline: 3px solid var(--hko-focus); outline-offset: 2px; }

/* 結果 */
.hk-omikuji .hk-omikuji__result {
  display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 14px;
  background: #fff; border: 1px solid var(--hko-border); border-radius: 8px;
}
.hk-omikuji .hk-omikuji__cap { font-size: .8125em; letter-spacing: .08em; color: var(--hko-ink-soft); }
.hk-omikuji .hk-omikuji__rank {
  margin-bottom: 6px; font-family: var(--hko-serif); font-size: 2.5em; font-weight: 700;
  line-height: 1.15; letter-spacing: .08em; color: var(--hko-accent);
}
.hk-omikuji .hk-omikuji__hitokoto {
  margin-bottom: 6px; font-family: var(--hko-serif); font-size: 1.1875em; font-weight: 700; line-height: 1.5;
}
.hk-omikuji .hk-omikuji__compat {
  padding: 6px 10px; font-weight: 700; background: var(--hko-accent-soft); border-radius: 4px;
}
.hk-omikuji .hk-omikuji__hint { font-size: .8125em; color: var(--hko-ink-soft); }
.hk-omikuji .hk-omikuji__extra { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.hk-omikuji .hk-omikuji__extra[hidden], .hk-omikuji .hk-omikuji__extras-note[hidden] { display: none; }
.hk-omikuji .hk-omikuji__habit, .hk-omikuji .hk-omikuji__color { font-weight: 700; line-height: 1.6; }
.hk-omikuji .hk-omikuji__extras-note { margin-top: 6px; font-size: .8125em; line-height: 1.6; color: var(--hko-ink-soft); }
.hk-omikuji .hk-omikuji__notice--result { margin-top: 8px; }
.hk-omikuji .hk-omikuji__share {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--hko-border-strong);
}
.hk-omikuji .hk-omikuji__share-cap { font-size: .8125em; color: var(--hko-ink-soft); }
.hk-omikuji .hk-omikuji__share-text {
  padding: 8px 10px; font-size: .875em; line-height: 1.6; white-space: pre-line;
  background: var(--hko-cream); border-radius: 4px;
}
.hk-omikuji .hk-omikuji__share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.hk-omikuji .hk-omikuji__share-buttons button {
  flex: 1 1 9em; min-height: 44px; margin: 0; padding: 8px 12px;
  font: inherit; font-size: .9375em; font-weight: 700; line-height: 1.4;
  color: var(--hko-accent); background: #fff; border: 2px solid var(--hko-accent); border-radius: 8px;
  cursor: pointer; white-space: normal;
}
.hk-omikuji .hk-omikuji__share-buttons button:hover { background: var(--hko-accent-soft); }
.hk-omikuji .hk-omikuji__copy-status { font-size: .8125em; color: var(--hko-ink-soft); }

/* 今週の相場カレンダーへのリンク */
.hk-omikuji .hk-omikuji__calendar { margin-top: 16px; }
.hk-omikuji .hk-omikuji__calendar-main,
.hk-omikuji .hk-omikuji__calendar-fallback { display: flex; flex-direction: column; gap: 2px; }
.hk-omikuji .hk-omikuji__calendar-link,
.hk-omikuji .hk-omikuji__calendar-list {
  display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-weight: 700;
  color: var(--hko-accent); text-decoration: underline; text-underline-offset: 3px;
}
.hk-omikuji .hk-omikuji__calendar-cap { font-size: .8125em; color: var(--hko-ink-soft); }

/* 末尾の補足文と免責(折り畳まない) */
.hk-omikuji .hk-omikuji__legal {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--hko-border-strong);
  font-size: .8125em; line-height: 1.65; color: var(--hko-ink-soft);
}
.hk-omikuji .hk-omikuji__disclaimer { display: flex; flex-direction: column; gap: 4px; }
.hk-omikuji .hk-omikuji__disclaimer p:first-child { font-weight: 700; color: var(--hko-ink); }

/* 読み上げ用(画面には出さない) */
.hk-omikuji .hk-omikuji__sr, .hk-omikuji .hk-omikuji__vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 動きを減らす設定の人には、揺れ・めくりを出さない */
@media (prefers-reduced-motion: reduce) {
  .hk-omikuji *, .hk-omikuji *::before, .hk-omikuji *::after {
    animation: none !important;
    transition: none !important;
  }
}