/* ちいかわおみくじ（/omikuji）の見た目。build.py が src/page.css から作る（直接直さない）。
   見本の指定は、すべて .cb-omikuji の中だけに効くようにしてある。 */
.cb-omikuji { --green: #2F855A; --green-dk: #216446; --ink: #1B2A22; --ink-soft: rgba(27, 42, 34, .74); --paper: #FBF7EE; --card: #FFFDF8; --line: rgba(27, 42, 34, .16); --shu: #B83A24; --sun: #FFCF4A; --mark: #D9480F; --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif; }
.cb-omikuji, .cb-omikuji * { box-sizing: border-box; }
.cb-omikuji { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.75; }
.cb-omikuji a { color: var(--green-dk); }
.cb-omikuji button { font: inherit; }
.cb-omikuji .nw { white-space: nowrap; }
.cb-omikuji .lead, .cb-omikuji .note, .cb-omikuji .message, .cb-omikuji .sub, .cb-omikuji .next, .cb-omikuji .status, .cb-omikuji .shared-banner, .cb-omikuji .items dd, .cb-omikuji .ep-meta, .cb-omikuji .howto p { word-break: auto-phrase; }
.cb-omikuji .lead, .cb-omikuji .note, .cb-omikuji .message, .cb-omikuji .sub, .cb-omikuji .next, .cb-omikuji .shared-banner { text-wrap: balance; }
.cb-omikuji .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-omikuji .wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.cb-omikuji .crumb { margin: 0; padding: 14px 0 4px; font-size: 13px; color: var(--ink-soft); }
.cb-omikuji .crumb a { display: inline-block; margin: -13px -6px; padding: 13px 6px; color: inherit; }
.cb-omikuji .intro h1 { margin: 6px 0 6px; font-family: var(--round); font-weight: 700; font-size: 30px; line-height: 1.3; letter-spacing: .02em; }
.cb-omikuji .lead { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }
.cb-omikuji .btn-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 8px 20px; border: 0; border-radius: 999px; background: var(--green-dk); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 #163F2C; }
.cb-omikuji .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #163F2C; }
.cb-omikuji .btn-primary[aria-disabled="true"] { opacity: .75; cursor: progress; }
.cb-omikuji .btn-sub { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 6px 10px; white-space: nowrap; border: 1.33px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.cb-omikuji .btn-x { background: #111; border-color: #111; color: #fff; }
.cb-omikuji .btn-primary:focus-visible, .cb-omikuji .btn-sub:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.cb-omikuji .paper:focus { outline: none; }
.cb-omikuji .stage { margin: 6px 0 20px; padding: 18px 16px 16px; background: var(--card); border: 1.33px solid var(--line); border-radius: 24px; text-align: center; }
.cb-omikuji .box { display: block; width: 136px; height: 184px; margin: 0 auto 10px; overflow: visible; }
.cb-omikuji .box .body { transform-box: fill-box; transform-origin: 50% 100%; }
.cb-omikuji .box .stick { transition: transform .35s ease-out; }
.cb-omikuji .box.is-shaking .body { animation: cb-omikuji-shake .9s ease-in-out; }
.cb-omikuji .box.is-out .stick { transform: translateY(-62px); }
@keyframes cb-omikuji-shake {0%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); }}
.cb-omikuji .note { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.cb-omikuji .shared-banner { margin: 6px 0 12px; padding: 10px 14px; background: #FFF4D6; border: 1.33px solid #EFD27E; border-radius: 16px; font-size: 14px; font-weight: 700; }
.cb-omikuji .paper { margin: 6px 0 20px; background: var(--card); border: 1.33px solid var(--line); border-top: 6px solid var(--shu); border-radius: 24px; }
.cb-omikuji .paper.is-new { animation: cb-omikuji-unfold .45s ease-out; }
@keyframes cb-omikuji-unfold {from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; }}
.cb-omikuji .paper-head { padding: 14px 16px 16px; text-align: center; border-bottom: 1.5px dashed rgba(184, 58, 36, .35); }
.cb-omikuji .kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); }
.cb-omikuji .fortune { margin: 2px 0 4px; font-family: var(--round); font-weight: 900; font-size: 64px; line-height: 1.1; letter-spacing: .08em; color: var(--shu); }
.cb-omikuji .tone-mid .fortune { color: var(--green-dk); }
.cb-omikuji .tone-low .fortune { color: #475569; }
.cb-omikuji .message { margin: 0; font-size: 16px; font-weight: 700; }
.cb-omikuji .ep { padding: 14px 16px 16px; }
.cb-omikuji .ep-title { margin: 2px 0 2px; font-family: var(--round); font-weight: 700; font-size: 26px; line-height: 1.35; overflow-wrap: anywhere; }
.cb-omikuji .ep-meta { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.cb-omikuji .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.cb-omikuji .chips li { padding: 3px 10px; border-radius: 999px; background: rgba(47, 133, 90, .1); color: var(--green-dk); font-size: 13px; font-weight: 700; white-space: nowrap; }
.cb-omikuji .chips li.is-gray { background: rgba(27, 42, 34, .07); color: var(--ink-soft); }
.cb-omikuji .sub { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.cb-omikuji .items { margin: 0; padding: 2px 16px 4px; border-top: 1px solid var(--line); }
.cb-omikuji .items > div { display: grid; grid-template-columns: 6.4em 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.cb-omikuji .items > div:last-child { border-bottom: 0; }
.cb-omikuji .items dt { font-size: 14px; font-weight: 700; color: var(--shu); }
.cb-omikuji .items dd { margin: 0; font-size: 15px; }
.cb-omikuji .items small { font-size: 12.5px; color: var(--ink-soft); }
.cb-omikuji .share { padding: 14px 16px 14px; border-top: 1px solid var(--line); }
.cb-omikuji .share .kicker { margin-bottom: 8px; text-align: center; }
.cb-omikuji .share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cb-omikuji .status { min-height: 1.6em; margin: 8px 0 0; font-size: 13px; color: var(--green-dk); text-align: center; }
.cb-omikuji .copy-box { width: 100%; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.cb-omikuji .next { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--line); border-radius: 0 0 23px 23px; background: rgba(47, 133, 90, .06); font-size: 14px; text-align: center; }
.cb-omikuji .next .btn-primary { margin-top: 2px; }
.cb-omikuji .howto h2 { margin: 0 0 10px; font-family: var(--round); font-weight: 700; font-size: 22px; line-height: 1.4; }
.cb-omikuji .howto p { margin: 0 0 12px; }
.cb-omikuji .rates { width: 100%; margin: 2px 0 14px; border-collapse: collapse; font-size: 14px; background: var(--card); }
.cb-omikuji .rates th, .cb-omikuji .rates td { padding: 6px 2px; border: 1px solid var(--line); text-align: center; white-space: nowrap; }
.cb-omikuji .rates thead th { background: rgba(47, 133, 90, .08); }
.cb-omikuji .howto .btn-sub { margin-top: 6px; }
@media (max-width: 359px) {
  .cb-omikuji .box { width: 112px; height: 152px; }
}
@media (min-width: 768px) {
  .cb-omikuji .crumb { padding-top: 20px; }
  .cb-omikuji .intro h1 { font-size: 34px; }
  .cb-omikuji .lead { font-size: 16px; }
  .cb-omikuji .stage, .cb-omikuji .paper, .cb-omikuji .shared-banner { max-width: 600px; margin-left: auto; margin-right: auto; }
  .cb-omikuji .stage { padding: 24px 32px 20px; }
  .cb-omikuji .btn-primary { max-width: 420px; margin-left: auto; margin-right: auto; }
  .cb-omikuji .fortune { font-size: 76px; }
  .cb-omikuji .ep, .cb-omikuji .paper-head, .cb-omikuji .share, .cb-omikuji .next { padding-left: 28px; padding-right: 28px; }
  .cb-omikuji .items { padding-left: 28px; padding-right: 28px; }
  .cb-omikuji .ep-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-omikuji .box.is-shaking .body, .cb-omikuji .paper.is-new { animation: none; }
  .cb-omikuji .box .stick { transition: none; }
}
.cb-omikuji [hidden] { display: none !important; }
.cb-omikuji .items dd { font-size: 16px; }
.cb-omikuji .items dt { font-size: 15px; }
.cb-omikuji .items > div { padding: 7px 0; }
.cb-omikuji .items .lucky { display: block; }
.cb-omikuji .items .lucky dt { display: inline; margin-right: 8px; }
.cb-omikuji .items .lucky dd { display: inline; overflow-wrap: anywhere; }
.cb-omikuji .ep summary { min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 16px; }
.cb-omikuji .ep details { margin-bottom: 6px; }
.cb-omikuji .ep .kicker { font-size: 12px; letter-spacing: 0; }
.cb-omikuji .image-buttons { margin-top: 10px; }
.cb-omikuji #rImagePreview { display: block; width: 100%; height: auto; margin: 12px auto; border-radius: 12px; }
.cb-omikuji #rSharedNext { padding: 12px 16px 16px; }
body.is-shared .cb-omikuji .intro .lead, body.is-shared .cb-omikuji .crumb { display: none; }
body.is-shared .cb-omikuji .intro h1 { font-size: 24px; margin: 12px 0 6px; }
body.is-shared .cb-omikuji .shared-banner { margin: 6px 0 8px; padding: 8px 12px; }
.cb-omikuji .items > div { grid-template-columns: 4.3em 1fr; }
.cb-omikuji .ep summary { min-height: 48px; }
body.is-shared .cb-omikuji .intro { display: none; }
body.is-shared .cb-omikuji .fortune { font-size: 52px; }
body.is-shared .cb-omikuji .paper-head { padding: 8px 16px; }
body.is-shared .cb-omikuji .items small { display: none; }
body.is-shared .cb-omikuji .items > div { padding: 5px 0; }
.cb-omikuji .tone-verylow .fortune { color: #475569; }
.cb-omikuji .image-buttons { grid-template-columns: 1fr; }
.cb-omikuji .tweet-embed { width: 100%; margin: 12px auto 0; overflow-wrap: anywhere; }
.cb-omikuji .tweet-mount { max-width: 550px; margin: 0 auto; }
.cb-omikuji .tweet-mount iframe { max-width: 100% !important; }
.cb-omikuji .tweet-status { margin: 8px 0; color: var(--ink-soft); font-size: 14px; }
.cb-omikuji .tweet-status:empty { display: none; }
.cb-omikuji .tweet-fallback { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px; font-size: 16px; }

/* ---- ここから WordPress（AFFINGER）の中で使うための追加（wp-src/extra.css） ---- */

/* AFFINGER の全体の指定（style.css 20240520）を、このページの中だけ見本と同じに戻す */
.cb-omikuji .wrap { background-color: transparent !important; color: inherit; border: 0; border-radius: 0; } /* main { color:#333; border-radius:4px }、テーマ設定の body:not(.front-page) main { background-color:#fff !important }・枠線 */
.cb-omikuji * { font-family: var(--sans); }                                       /* テーマ設定の書体（例：Noto Sans JP）に左右されず、見本と同じ書体にする（丸ゴシックの指定はこれより強い） */
.cb-omikuji section { margin-bottom: 0; }                                         /* section { margin-bottom:3em } */
.cb-omikuji p { font-size: inherit; line-height: inherit; margin-bottom: 0; }    /* p { font-size:18px; line-height:30px; margin-bottom:20px } */
.cb-omikuji p:empty { display: block; }                                           /* p:empty { display:none }（「コピーしました」の場所が消え、押すと下がずれる） */
.cb-omikuji a { transition: none; }                                               /* a { transition: all .5s } */
.cb-omikuji summary { display: list-item; }                                       /* summary { display:block }（開閉の三角が消える） */
.cb-omikuji .box text, .cb-omikuji .box tspan { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 900; font-size: 17px; } /* テーマの書体・太さの指定が、SVG の文字の指定（見本と同じ値）より強い */
.cb-omikuji .rates th, .cb-omikuji .rates td { font-size: inherit; line-height: inherit; vertical-align: middle; word-break: normal; position: static; z-index: auto; } /* table th（15px・太字なし）、thead th（固定表示・z-index 99997） */
.cb-omikuji .rates th { font-weight: 700; color: var(--ink); }                  /* table thead tr th { color:#fff }（薄い緑の上に白い字になる） */

/* テーマの見出し・リストの飾りを、このページの中だけ外す */
.cb-omikuji h1, .cb-omikuji h2 { border: 0; background: none; box-shadow: none; padding: 0; color: var(--ink); text-align: start; }
.cb-omikuji h1::before, .cb-omikuji h1::after, .cb-omikuji h2::before, .cb-omikuji h2::after { content: none; display: none; }
.cb-omikuji .chips li::before, .cb-omikuji .chips li::after { content: none; display: none; }
.cb-omikuji img { max-width: 100%; }

/* 結果の下の広告（1つだけ）。結果が出るまでは ad.js が隠す */
.cb-omikuji-ad { max-width: 728px; margin: 56px auto 32px; text-align: center; clear: both; }
.cb-omikuji-ad__label { margin: 0 0 6px; color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; }
.cb-omikuji-ad__dummy { display: grid; place-items: center; min-height: 250px; padding: 12px; border: 1.5px dashed rgba(27, 42, 34, .25); border-radius: 12px; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(27, 42, 34, .03) 10px 20px); color: rgba(27, 42, 34, .55); font-size: 13px; }
@media (min-width: 768px) {
  .cb-omikuji-ad__dummy { min-height: 120px; }
}