/* home.css — ホーム（DEC-WEB-002）: 上 = テイマーの手帳（めくる）／ 下 = スクロールの紹介と入口（手書きの注記・テープの写真）。
   色は t2（空の青・草の緑・白）と紙。太い黒の縁取り・カードの格子・英字の小見出しは使わない（no_ai_look.md） */
:root { --ink: #1D2A22; --sub: #45564B; --grass: #2F7D4A; --grass-d: #1F5F36; --sky: #2D6FA3; --paper: #FDFBF4; --grid: rgba(45, 111, 163, .12); --brown: #5B4330; }
* { box-sizing: border-box; }
body { color: var(--ink); background: #F5F9F1; font: 17px/1.8 'Zen Kaku Gothic New', system-ui, sans-serif; }
a { color: var(--grass-d); }
img { max-width: 100%; display: block; }
.hand { font-family: 'Klee One', cursive; }

/* ---- 手帳の机（キービジュアルの風景の上 — ヘッダーの帯の下から始まる） ---- */
.desk { position: relative; padding: 34px 16px 30px; background: url(../../img/home/kv_hidamari.webp) center 70% / cover no-repeat; }
.desk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(245, 249, 241, .18), rgba(245, 249, 241, .32)); }
.desk-in { position: relative; max-width: 1080px; margin: 0 auto; }
.nb-frame { position: relative; padding: 10px; background: #F1EBDA; border-radius: 8px; box-shadow: 0 26px 50px rgba(30, 50, 40, .35); }
#nb { aspect-ratio: 1000 / 620; font-size: calc(var(--pf-W, 500px) / 30); }
#nb.pf-single { aspect-ratio: 500 / 860; font-size: calc(var(--pf-W, 360px) / 21); }
.pf-book:focus-visible { outline: 3px solid var(--grass); outline-offset: 4px; }
.nb-tabs { position: absolute; right: -44px; top: 70px; display: flex; flex-direction: column; gap: 5px; }
.nb-tabs button { writing-mode: vertical-rl; width: 42px; min-height: 84px; padding: 8px 0; border: 0; border-radius: 0 8px 8px 0; color: #fff; font: 700 14px/1.1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .08em; cursor: pointer; box-shadow: 2px 2px 6px rgba(0, 0, 0, .18); transform: translateX(-2px); transition: transform .15s; }
.nb-tabs button[aria-current="true"], .nb-tabs button:hover { transform: translateX(4px); }
.nb-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.nb-nav button { min-height: 46px; padding: 0 18px; border-radius: 10px; border: 1px solid #A3BDAA; background: #fff; color: var(--ink); font: 700 16px/1 'Zen Kaku Gothic New', sans-serif; cursor: pointer; }
.nb-nav button.go { background: var(--grass); border-color: var(--grass); color: #fff; }
.nb-nav button:disabled { opacity: .45; cursor: default; }
.nb-nav span { min-width: 120px; text-align: center; font-weight: 700; padding: 4px 12px; background: rgba(255, 255, 255, .9); border-radius: 8px; }

/* 手帳のページ（方眼・綴じの影） */
.np { position: absolute; inset: 0; padding: 1.6em 1.9em 1.4em; background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 1.25em 1.25em; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; gap: .6em; }
.pf-at-L .np { box-shadow: inset -1.6em 0 1.6em -1.4em rgba(60, 50, 30, .35); }
.pf-at-R .np { box-shadow: inset 1.6em 0 1.6em -1.4em rgba(60, 50, 30, .35); }
.np .head { font-size: .78em; color: var(--sub); border-bottom: 1px solid rgba(45, 111, 163, .35); padding-bottom: .2em; display: flex; justify-content: space-between; }
.np h3 { margin: 0; font-size: 1.5em; line-height: 1.35; }
.np p { margin: 0; font-size: .95em; line-height: 1.75; }
.np .hand { color: var(--sky); font-size: 1.05em; line-height: 1.6; }
.np .logo { width: 72%; }
.np .catch { font-size: 1.3em; color: var(--ink); }
.np .hint { margin-top: auto; font-size: .85em; color: var(--brown); }
.np .photo { position: relative; background: #fff; padding: .45em .45em 1.8em; box-shadow: 0 .4em .9em rgba(40, 40, 40, .22); }
.np .photo img.pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.np .photo .cap { position: absolute; left: .7em; bottom: .25em; font-size: .85em; color: var(--brown); }
.np .tape { position: absolute; width: 2.3em; height: auto; opacity: .9; pointer-events: none; z-index: 2; }
.np .cut { width: auto; object-fit: contain; filter: drop-shadow(0 .3em .4em rgba(30, 40, 30, .25)); }
.np .note { position: relative; font-size: .9em; color: var(--sky); }
.np .note svg { position: absolute; }
.np ul { margin: 0; padding-left: 1.1em; font-size: .92em; line-height: 1.7; }
.np .open { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9em; border-radius: .4em; background: var(--grass); color: #fff; font-weight: 700; text-decoration: none; pointer-events: auto; }
.np .row3 { display: flex; align-items: flex-end; justify-content: space-around; gap: .4em; flex: 1; min-height: 0; }
.np .row3 figure { margin: 0; text-align: center; font-size: .8em; color: var(--brown); }
.np .folio { position: absolute; bottom: .5em; font-size: .78em; color: var(--sub); }
.pf-at-L .np .folio { left: 1.9em; } .pf-at-R .np .folio { right: 2.4em; }

/* ---- 草花のペン画の線（風景と紹介の境目） ---- */
.meadow { height: 70px; margin-top: -34px; position: relative; z-index: 2; background: url(../../img/home/ink_meadow.webp) center bottom / auto 100% repeat-x; }

/* ---- スクロールの紹介と入口 ---- */
.intro { padding: 30px 16px 40px; }
.intro-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; align-items: center; }
.sheet { position: relative; padding: 34px 38px 30px; background: #FFFDF6; box-shadow: 0 10px 24px rgba(60, 40, 20, .12); transform: rotate(-.8deg); }
.sheet .tape { position: absolute; top: -22px; left: -26px; width: 92px; transform: rotate(-32deg); }
.sheet h2 { margin: 0 0 10px; font-size: 28px; line-height: 1.4; }
.sheet p { margin: 0; font-size: 18px; }
.specimen { margin: 0; }
.specimen img { width: min(300px, 70%); margin: 0 auto; }
.specimen figcaption { margin: 6px 0 0; text-align: center; font-size: 18px; color: var(--brown); line-height: 1.5; }
.block { padding: 36px 16px 44px; }
.block.alt { background: #EEF5EC; }
.block-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.block-in.rev .words { order: 2; }
.words h2 { margin: 0 0 8px; font-size: 30px; line-height: 1.4; }
.words p { margin: 0 0 16px; color: var(--sub); }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 18px; color: var(--grass-d); text-decoration: none; border-bottom: 2px solid var(--grass); }
.photo { position: relative; display: block; background: #fff; padding: 10px; box-shadow: 0 16px 32px rgba(30, 50, 30, .22); }
.tilt-r { transform: rotate(1.6deg); } .tilt-l { transform: rotate(-1.4deg); }
.photo .tape, .letter .tape, .polaroid .tape { position: absolute; width: 92px; z-index: 2; }
.t1 { top: -24px; left: -28px; transform: rotate(-32deg); } .t2 { top: -24px; right: -28px; transform: rotate(30deg); } .t3 { top: -24px; right: -26px; transform: rotate(28deg); }
.letter { position: relative; margin: 0; padding: 30px 30px 22px; background: #FFFDF6; box-shadow: 0 12px 26px rgba(40, 60, 40, .16);
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(45, 111, 163, .2) 33px 34px); background-position: 0 62px; }
.letter p { margin: 0 0 10px; font-size: 21px; line-height: 34px; color: var(--ink); white-space: pre-line; }
.letter figcaption { font-size: 15px; color: var(--sub); }
.polaroid { position: relative; margin: 0; background: #fff; padding: 12px 12px 44px; box-shadow: 0 12px 26px rgba(40, 40, 40, .18); }
.polaroid .screen { aspect-ratio: 16 / 9; background: #DDE6DF; display: flex; align-items: center; justify-content: center; color: var(--sub); }
.polaroid figcaption { position: absolute; left: 16px; bottom: 10px; font-size: 18px; color: var(--brown); }

@media (max-width: 860px) {
  .nb-tabs { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
  .nb-tabs button { writing-mode: horizontal-tb; width: auto; min-height: 44px; padding: 0 12px; border-radius: 8px; transform: none; }
  .intro-in, .block-in { grid-template-columns: 1fr; }
  .block-in.rev .words { order: 0; }
  .sheet { padding: 28px 22px 24px; }
}

/* 角に貼ったテープが スマホで画面の外へ出ないように（page_check PC-04） */
.intro, .block { overflow-x: clip; }

/* 動画の所は準備中（DEC-WEB-006 — 埋め込みは公開の後） */
.soon-note { margin: 10px 0 0; font-weight: 700; color: #45564B; }
.polaroid a.screen { display: block; overflow: hidden; }
.polaroid a.screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 手帳の「図鑑」のページ: 図鑑の見開きを 2 枚 少しずらして重ねる（2026-10-30 マスター — 図鑑ってこういう感じ が分かるように） */
.spreads { position: relative; flex: 1; min-height: 0; margin-top: .3em; }
.spreads .sp { position: absolute; width: 86%; display: block; background: #fff; padding: 4px; box-shadow: 0 6px 16px rgba(40, 40, 40, .22); }
.spreads .sp img { display: block; width: 100%; height: auto; }
.spreads .sp1 { left: 0; top: 2%; transform: rotate(-2.2deg); }
.spreads .sp2 { right: 0; bottom: 3%; transform: rotate(1.8deg); }