/* generated by 1. movie-project scripts/article_mockup.py --wp — edit config/article_mockup.css */
#hoo-article :where(*) {all: revert !important}
#hoo-article {--green: #2f5d34 !important; --blue: #4f86ad !important; --water: #e7f1f7 !important; --water-deep: #c6d6e4 !important; --ink: #555 !important; --ink-sub: #777 !important; --maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important; --goth: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif !important}
#hoo-article * {box-sizing: border-box !important}
#hoo-article .ep, #hoo-article .midashi {word-break: auto-phrase !important; text-wrap: balance !important}
#hoo-article {margin: 0 !important; color: var(--ink) !important; font-family: var(--goth) !important; background-color: var(--water) !important; background-image:
    radial-gradient(rgba(47,93,52,.07) 1px, transparent 1.2px),
    linear-gradient(170deg, #f4f9fc 0%, #e7f1f7 45%, #dcebe0 100%) !important; background-size: 12px 12px, 100% 100% !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important}
#hoo-article .wrapper {max-width: 640px !important; margin: 0 auto !important; overflow-x: hidden !important}
#hoo-article p {margin: 0 !important}
#hoo-article .head {position: relative !important; padding: 22px 6% 8px !important}
#hoo-article .brand {display: block !important; width: 76px !important; margin: 0 auto !important}
#hoo-article .brand img {width: 100% !important; display: block !important}
#hoo-article .series {font-family: var(--maru) !important; font-weight: 900 !important; margin: 22px 0 0 !important; font-size: 50px !important; line-height: 1.18 !important; letter-spacing: .02em !important; text-shadow: 0 0 0 #fff, 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff,
               0 3px 0 #fff, 0 -3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff !important}
#hoo-article .series .a {color: var(--blue) !important; display: block !important}
#hoo-article .series .b {color: var(--green) !important; display: block !important; padding-left: 1.1em !important}
#hoo-article .hero {margin: 18px -2% 0 8% !important; border-radius: 58% 42% 52% 48% / 46% 54% 46% 54% !important; overflow: hidden !important; border: 6px solid #fff !important; box-shadow: 0 10px 28px rgba(47,93,52,.15) !important; aspect-ratio: 1.25 / 1 !important}
#hoo-article .hero img {width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 40% 50% !important; display: block !important}
#hoo-article .yodogawa {width: 88% !important; margin: 0 auto !important; padding: 30px 0 38px !important; font-family: var(--maru) !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: .1em !important; line-height: 1.9 !important; color: #4a4a4a !important}
#hoo-article .yodogawa p + p {margin-top: 1.9em !important}
#hoo-article .border {border-top: 1px dashed #888 !important}
#hoo-article .white {background: rgba(255,255,255,.82) !important; padding: 10px 0 20px !important}
#hoo-article .title {width: 90% !important; margin: 0 auto !important; padding: 34px 0 14px !important; text-align: center !important}
#hoo-article .kai {display: inline-block !important; font-family: var(--maru) !important; font-weight: 900 !important; color: var(--green) !important; font-size: 19px !important; letter-spacing: .12em !important; padding: 14px 26px 12px !important; background: var(--water-deep) !important; border-radius: 55% 45% 60% 40% / 55% 60% 40% 45% !important}
#hoo-article .ep {font-family: var(--maru) !important; font-weight: 700 !important; color: var(--green) !important; font-size: 22px !important; line-height: 1.6 !important; letter-spacing: .1em !important; margin: 18px 0 0 !important}
#hoo-article .conv {width: 90% !important; margin: 0 auto !important; padding: 16px 0 5px !important}
#hoo-article .conv dl {margin: 0 !important; padding-bottom: 14px !important}
#hoo-article .conv dt {font-family: var(--maru) !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.4 !important; padding-top: 5px !important; letter-spacing: .08em !important; display: flex !important; align-items: center !important; gap: 7px !important}
#hoo-article .conv dt::before {content: "" !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: currentColor !important; flex: none !important}
#hoo-article .conv dd {margin: 0 0 0 10px !important; padding-top: 5px !important; font-size: 16px !important; letter-spacing: .1em !important; line-height: 1.9 !important; text-align: justify !important; line-break: strict !important}
#hoo-article .conv dd p + p {margin-top: 1.9em !important}
#hoo-article dl.jean dt {color: var(--green) !important}
#hoo-article dl.jean dd {color: var(--ink) !important}
#hoo-article dl.irene dt {color: var(--blue) !important}
#hoo-article dl.irene dd {color: var(--ink-sub) !important}
#hoo-article .midashi {font-family: var(--maru) !important; font-weight: 700 !important; color: var(--green) !important; font-size: 17px !important; line-height: 1.8 !important; letter-spacing: .1em !important; margin: 0 !important; padding: 30px 0 16px !important; break-after: avoid !important; page-break-after: avoid !important}
#hoo-article .midashi::before {content: "" !important; display: block !important; width: 28px !important; height: 3px !important; border-radius: 2px !important; background: var(--green) !important; opacity: .55 !important; margin-bottom: 10px !important}
#hoo-article .photo {margin: 16px 0 34px !important; break-inside: avoid !important; page-break-inside: avoid !important}
#hoo-article .photo img {display: block !important; width: 100% !important; height: auto !important}
#hoo-article .photo.pair img {width: 84% !important; margin: 0 auto !important}
#hoo-article .photo.pair img + img {margin-top: 12px !important}
#hoo-article .end {text-align: center !important; font-size: 14px !important; letter-spacing: .1em !important; line-height: 1.9 !important; padding: 26px 0 40px !important; color: var(--ink) !important}
#hoo-article .movie {padding: 0 0 36px !important}
#hoo-article .movie .midashi {padding-top: 6px !important}
#hoo-article .movie .yt {position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; background: #000 !important}
#hoo-article .movie .yt iframe {position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important}
#hoo-article .foot {text-align: center !important; padding: 34px 0 44px !important}
#hoo-article .foot img {width: 64px !important; opacity: .85 !important}
@media (min-width: 700px) {
#hoo-article .series {font-size: 64px !important}
#hoo-article .conv, #hoo-article .title {width: 540px !important}
#hoo-article .yodogawa {width: 480px !important}
}
@media print {
#hoo-article .wrapper {max-width: 600px !important}
#hoo-article .series {font-size: 56px !important}
#hoo-article .conv dl {orphans: 3 !important; widows: 3 !important}
}
#hoo-article .pq {margin: 22px 4% 34px !important; padding: 20px 4px !important; border-top: 1px solid var(--water-deep) !important; border-bottom: 1px solid var(--water-deep) !important; text-align: center !important; break-inside: avoid !important}
#hoo-article .pq p {font-family: var(--maru) !important; font-weight: 700 !important; color: var(--green) !important; font-size: 18px !important; line-height: 1.9 !important; letter-spacing: .1em !important; word-break: auto-phrase !important; text-wrap: balance !important}
#hoo-article .hero {position: relative !important}
#hoo-article .hwrap {position: relative !important}
#hoo-article .holder {position: absolute !important; left: 10px !important; top: 10px !important; background: #c0392b !important; color: #fff !important; font: 700 20px/1.2 'Noto Sans JP', sans-serif !important; padding: 6px 12px !important; border-radius: 6px !important; z-index: 5 !important}
#hoo-article .holder small {display: block !important; font-size: 12px !important; font-weight: 500 !important}
#hoo-article .hero .holder {left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; text-align: center !important}
#hoo-article {background: #f7f3ea !important; background-image: radial-gradient(rgba(120,100,60,.05) 1px, transparent 1.2px) !important; background-size: 6px 6px !important}
#hoo-article .white {background: #fbf9f3 !important}
#hoo-article .series {text-shadow: none !important; font-weight: 900 !important}
#hoo-article .kai {background: none !important; border-top: 1px solid var(--green) !important; border-bottom: 1px solid var(--green) !important; border-radius: 0 !important; padding: 8px 10px !important}
#hoo-article .midashi {text-align: center !important}
#hoo-article .midashi::before {content: "─ ◆ ─" !important; width: auto !important; height: auto !important; background: none !important; opacity: .6 !important; font-size: 12px !important; letter-spacing: .3em !important}
#hoo-article .pq {border-color: rgba(47,93,52,.3) !important}
#hoo-article .pq p {quotes: auto !important}
#hoo-article .pq p::before {content: open-quote !important}
#hoo-article .pq p::after {content: close-quote !important}
/* en */
#hoo-article[lang="en"] .yodogawa, #hoo-article[lang="en"] .conv dd, #hoo-article[lang="en"] .end {letter-spacing: .01em !important}
#hoo-article[lang="en"] .conv dd {text-align: left !important}
#hoo-article[lang="en"] .ep, #hoo-article[lang="en"] .midashi, #hoo-article[lang="en"] .pq p, #hoo-article[lang="en"] .kai, #hoo-article[lang="en"] .conv dt {letter-spacing: .03em !important}
#hoo-article[lang="en"] .series {letter-spacing: 0 !important}
/* ko */
#hoo-article[lang="ko"] {--maru: "Noto Sans KR", sans-serif !important; --goth: "Noto Sans KR", sans-serif !important}
#hoo-article[lang="ko"] .yodogawa, #hoo-article[lang="ko"] .conv dd, #hoo-article[lang="ko"] .ep, #hoo-article[lang="ko"] .midashi, #hoo-article[lang="ko"] .pq p, #hoo-article[lang="ko"] .end {word-break: keep-all !important; overflow-wrap: anywhere !important}
#hoo-article[lang="ko"] .conv dd {text-align: left !important}
/* zh-TW */
#hoo-article[lang="zh-TW"] {--maru: "Noto Sans TC", sans-serif !important; --goth: "Noto Sans TC", sans-serif !important}
#hoo-article[lang="zh-TW"] .ep, #hoo-article[lang="zh-TW"] .midashi, #hoo-article[lang="zh-TW"] .pq p {word-break: keep-all !important; overflow-wrap: anywhere !important}