/* 冒頭のすぐ下の「今からほんや」。この欄だけ、今からほんやの緑と絵と書体にする（なつさん 2026-10-29「背景色は緑」「バナーのグラフィックも使って」）。HTML は imahon_section.py
   PC は左に文字、右に本物の今からほんや（スマホの枠）と手書きの添え書き。下にムービー。狭い画面は 文字 → 枠 → ムービー の順 */
.ih{--ih-green:#02A3A4;--ih-deep:#0B7D7E;--ih-ink:#16263F;--ih-cream:#FFFBF5;--ih-butter:#F7E58A;--ih-lamp:#FFF1C2;
 position:relative;overflow-x:clip;overflow-y:visible;isolation:isolate;color:var(--ih-cream);font-family:'Zen Maru Gothic',var(--sans);
 background:radial-gradient(55% 50% at 72% 46%,#0AB3B3 0%,#02A3A400 100%),var(--ih-green);
 padding:clamp(80px,9vw,140px) 0 clamp(72px,8vw,120px)}
/* 上下の端は、紙の色から緑へ粒でつなぐ（なつさん 2026-10-30「粒状のグラデで色繋ぎたい」「グラデは1ページ分の外」）。
   粒の帯は欄の外（上と下）に置き、欄の中はぜんぶ緑。粒は site/img/imahon/dither-*.png（緑の 2px の粒、欄に近いほど濃い） */
.ih::before,.ih::after{content:'';position:absolute;left:0;right:0;z-index:0;height:420px;pointer-events:none;background-repeat:repeat-x;background-size:720px 420px;image-rendering:pixelated}
.ih::before{top:-420px;background-image:url(img/imahon/dither-top.png)}
.ih::after{bottom:-420px;background-image:url(img/imahon/dither-bottom.png)}
.ih-in,.ih-movie{position:relative;z-index:1}
.ih{margin:420px 0}
/* 今からほんやの絵（本の上の街）。地の緑と同じ色なので、そのまま溶け込む。スマホの枠がその街の中に立つように、枠の後ろに置く */
.ih-art{position:absolute;z-index:-1;right:-12vw;top:clamp(330px,30vw,500px);width:min(66vw,1000px);height:auto;opacity:.9;pointer-events:none;
 -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.ih-stars i{position:absolute;z-index:-1;width:6px;height:6px;background:var(--ih-lamp);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.9;animation:ih-tw 3.6s ease-in-out infinite}
.ih-stars i:nth-child(1){left:8%;top:12%;transform:scale(1.6)}.ih-stars i:nth-child(2){left:46%;top:8%;animation-delay:.8s}.ih-stars i:nth-child(3){left:38%;top:52%;transform:scale(1.3);animation-delay:1.6s}
.ih-stars i:nth-child(4){left:92%;top:6%;transform:scale(2);animation-delay:2.2s}.ih-stars i:nth-child(5){left:4%;top:70%;animation-delay:1.1s}
@keyframes ih-tw{50%{opacity:.25}}
.ih-in{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:'head play' 'copy play';column-gap:clamp(32px,5vw,80px);row-gap:0;align-items:center}
/* PC：左に題と説明、右に本物の今からほんや。狭い画面は 題 → 今からほんや → 説明 の順（なつさん 2026-10-29） */
.ih-head{grid-area:head;align-self:end}.ih-copy{grid-area:copy;align-self:start}.ih-play{grid-area:play}
.ih-k{display:flex;align-items:center;gap:12px;margin:0;min-height:44px;font:700 13px/1.5 'Zen Maru Gothic',var(--sans);letter-spacing:.08em;color:var(--ih-lamp)}
.ih-k img{width:44px;height:44px;border-radius:12px;box-shadow:0 8px 18px -8px #00000055}
.ih-t{margin:16px 0 0;font:500 clamp(42px,4.4vw,68px)/1.2 'Zen Old Mincho',var(--serif);letter-spacing:.16em;white-space:nowrap;color:#fff;text-shadow:0 2px 0 #0000001a}
.ih-lead{margin:22px 0 0;word-break:auto-phrase;font:500 clamp(15px,1.25vw,18px)/2 'Zen Maru Gothic',var(--sans);letter-spacing:.04em}
.ih-ai{margin:16px 0 0;font:700 clamp(15px,1.25vw,18px)/1.8 'Zen Maru Gothic',var(--sans);color:var(--ih-ink)}
.ih-ai span{background:var(--ih-butter);padding:.15em .5em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* 今からほんやのバナーの丸い札（全国の本屋 8,000軒以上）に合わせた形 */
.ih-badge{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:132px;height:132px;margin:0;border-radius:50%;background:var(--ih-butter);color:var(--ih-ink);transform:rotate(-8deg);box-shadow:0 14px 26px -14px #00000066;text-align:center}
.ih-badge small{font:700 12.5px/1.3 'Zen Old Mincho',var(--serif)}
.ih-badge b{font:500 30px/1.15 'Zen Old Mincho',var(--serif);letter-spacing:.02em}
.ih-badge b span{font-size:18px}
html[lang="en"] .ih-badge small{font-size:11px;line-height:1.25;max-width:100px}
.ih-badge i{position:absolute;left:50%;top:100%;margin-top:14px;transform:translateX(-50%) rotate(8deg);white-space:nowrap;font:500 10.5px/1.4 'Zen Maru Gothic',var(--sans);font-style:normal;color:#d6f2f1}
/* 札と「ぜんぶ自分とAIで」を横に並べる */
.ih-did{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(20px,2.4vw,34px);align-items:center;margin:32px 0 0}
.ih-did-t p{margin:0;word-break:auto-phrase;font:500 clamp(14px,1.1vw,15.5px)/1.9 'Zen Maru Gothic',var(--sans)}
.ih-did-t b{display:block;margin-top:4px;font:700 clamp(16px,1.35vw,19px)/1.6 'Zen Maru Gothic',var(--sans);color:var(--ih-lamp)}
.ih-role{display:flex;flex-wrap:wrap;gap:6px 5px;margin:14px 0 0;padding:0;list-style:none}
.ih-role li{font:700 12.5px/1 'Zen Maru Gothic',var(--sans);padding:8px 12px;border-radius:999px;border:1.5px solid #ffffffcc;color:#fff}
.ih-wide{margin:34px 0 0;word-break:auto-phrase;font:500 clamp(20px,1.9vw,27px)/1.6 'Zen Old Mincho',var(--serif);letter-spacing:.06em;color:#fff}
.ih-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:26px 0 0}
.ih-ask{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--ih-butter);color:var(--ih-ink);font:700 15px/1 'Zen Maru Gothic',var(--sans);letter-spacing:.06em;cursor:pointer;box-shadow:0 14px 26px -14px #00000077;transition:transform .2s}
.ih-ask:hover{transform:translateY(-2px)}
.ih-ask:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ih-go{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:transparent;border:1.5px solid var(--ih-cream);color:var(--ih-cream);text-decoration:none;font:700 15px/1 'Zen Maru Gothic',var(--sans);letter-spacing:.04em;box-shadow:0 14px 26px -14px #00000077;transition:transform .2s}
.ih-go:hover{transform:translateY(-2px)}
.ih-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#fff;font:700 13.5px/1 'Zen Maru Gothic',var(--sans);text-underline-offset:5px}
.ih-go:focus-visible,.ih-more:focus-visible,.ih-movie video:focus-visible,.ih-screen iframe:focus-visible{outline:2px solid var(--ih-butter);outline-offset:3px}
/* 本物の今からほんや：スマホの枠に入れる。切り替えは今からほんや自身の下のナビで */
.ih-play{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,28px)}
.ih-phone{margin:0;padding:9px;border-radius:44px;background:var(--ih-ink);box-shadow:0 50px 80px -40px #00000099,0 0 0 1px #ffffff22}
.ih-screen{position:relative;width:min(380px,76vw);height:min(780px,82vh);border-radius:36px;overflow:hidden;background:var(--ih-cream)}
.ih-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ih-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;transition:opacity .5s}
.ih-screen.ready iframe{opacity:1}
/* 下のナビのうち、お知らせ・マイ本屋・案内は、この枠ではふさぐ（ナビは5等分・高さ60px）。押しても何も起きず、薄く見せる */
.ih-off{position:absolute;z-index:2;right:0;bottom:0;width:60%;height:60px;background:#FFFBF5c7;cursor:not-allowed}
.ih-screen:not(.ready) .ih-off{display:none}
/* 手書きの添え書き（Klee One）と矢印 */
.ih-hand{order:2;flex:none;width:clamp(250px,21vw,320px);margin-top:-30%;color:var(--ih-lamp);transform:rotate(-4deg);text-shadow:0 1px 10px #027a7b}
.ih-hand p{margin:0;white-space:nowrap;font:600 clamp(26px,2.3vw,34px)/1.4 'Klee One',cursive;letter-spacing:.02em}
.ih-hand small{display:block;white-space:nowrap;margin-top:12px;font:600 clamp(17px,1.4vw,20px)/1.65 'Klee One',cursive;color:#e3f7f6}
.ih-hand svg{display:block;width:120px;height:auto;margin:10px 0 0 -30px}
/* 紹介ムービー（埋め込み。見えている間だけ、音なしで流す） */
.ih-movie{max-width:960px;margin:clamp(56px,7vw,96px) auto 0;padding:0 clamp(20px,4vw,56px);box-sizing:content-box}
.ih-movie video{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:18px;background:#028E90;box-shadow:0 40px 70px -40px #00000088}
.ih-movie figcaption{margin:12px 0 0;text-align:center;font:500 12px/1.6 'Zen Maru Gothic',var(--sans);color:#d6f2f1}
@media(max-width:1100px){
 .ih-in{grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'play' 'copy'}
 .ih-copy{margin-top:36px}
 .ih-play{padding-right:0;margin-top:20px;flex-direction:column;align-items:center}
 .ih-hand{width:auto;margin-top:0;text-align:center;transform:none;order:-1;margin-bottom:8px;display:flex;flex-direction:column;align-items:center}
 .ih-hand svg{transform:rotate(-70deg) scaleY(-1);width:70px;margin:2px 0 -6px}
 .ih-art{width:120vw;right:-44vw;top:auto;bottom:22%;opacity:.5}
}
@media(max-width:760px){
 .ih{padding:72px 0 64px}
 .ih::before,.ih::after{height:260px;background-size:446px 260px}
 .ih::before{top:-260px}.ih::after{bottom:-260px}
 .ih{margin:260px 0}
 .ih-t{letter-spacing:.12em}
 .ih-wide{font-size:19px}
 .ih-badge b{font-size:24px}.ih-badge small{font-size:11px}
 .ih-screen{width:min(340px,84vw);height:min(680px,78svh)}
 .ih-cta .ih-ask,.ih-cta .ih-go{flex:1 1 100%;justify-content:center}
 .ih-did{grid-template-columns:108px minmax(0,1fr);gap:18px}
 .ih-badge{width:108px;height:108px}
}
@media(prefers-reduced-motion:reduce){.ih-stars i{animation:none}}

/* PC：この欄はちょうど1画面の高さ。スクロールが近くで止まったら、欄の頭に合わせる（imahon.js）。中身は画面の高さに合わせて縮める（なつさん 2026-10-30） */
@media(min-width:1101px){
 .ih{--ih-hd:84px;height:100svh;min-height:640px;box-sizing:border-box;padding:calc(var(--ih-hd) + 40px) 0 72px;display:flex;align-items:center}
 .ih-in{width:100%}
 .ih-screen{height:calc(100svh - var(--ih-hd) - 150px);max-height:760px;min-height:430px;width:auto;aspect-ratio:380/780}
 .ih-art{top:auto;bottom:0;right:-10vw;width:min(56vw,900px)}
}
@media(min-width:1101px) and (max-height:860px){
 .ih-t{font-size:clamp(38px,3.6vw,54px)}
 .ih-lead{margin-top:14px;line-height:1.85}
 .ih-did{margin-top:20px}
 .ih-wide{margin-top:34px;font-size:21px}
 .ih-cta{margin-top:18px}
}
@media(min-width:1101px) and (max-height:740px){
 .ih-k{display:none}
 .ih-badge{width:112px;height:112px}.ih-did{grid-template-columns:112px minmax(0,1fr)}.ih-badge b{font-size:25px}
 .ih-role{display:none}
}
html.ih-over #inkc{opacity:0!important;visibility:hidden}