/* FirstSeed手帳（日本語）
   ヘッダー・フッター・書体は ../css/home.css（TOPと共通）を継承し、
   ここでは配色・スクショの額縁・このページのレイアウトだけを定義する。
   元は tmp5/shared.css + tmp5/planner-01.css（python3 tmp5/deploy.py で再生成） */
.planner-page { background: #f8fafc; --accent: #2666bb; --tint: #e9f2ff; --card: #fff; --card-line: #e6ebf0; --dark: #1f3d6b; --dark-muted: #c9d5e6; --paper: #fbf8f1; --paper-line: #ece5d6; }
.planner-page main { min-width: 0; }

/* フッター（TOPと同じ見た目） */
.planner-page .site-footer { grid-template-columns: 1fr auto; gap: 24px; }
.planner-page .footer-message p { margin: 0 0 12px; }
.planner-page .footer-message small { display: block; color: var(--muted); font-size: .75rem; }
.planner-page .footer-languages { gap: 22px; align-items: center; }
.planner-page .footer-languages [aria-current="page"] { font-weight: 600; }

/* アプリ名ブロック（TOPと同じ） */
.planner-page .identity { flex-wrap: wrap; }
.planner-page .identity > span:not(.badge) { min-width: 0; }
.planner-page .identity strong { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.5; letter-spacing: -.035em; }
.planner-page .app-icon { box-shadow: 0 1px 3px #0000001f, 0 0 0 1px #0000000f; }
.planner-page .badge { color: var(--accent); }

/* ---------------------------------------------------------------------
   スクショの額縁 .shot
   - fit    : 端まで写っている合成画像（全端末）。比率 --ar の額縁に余白を取って中央に
   - window : 画面の一部を切り出した画像。四辺を額縁の縁に合わせ「窓」として見せる
              （--ar は画像そのものの比率。--pos で見せる位置）
   - rise   : 下が切れている画像。額縁の下辺からせり上がる。高さは画像＋わずかな余白
   額縁の中の画像の幅は --w（PCでの値）。狭い画面では下の media query で広げる
   --------------------------------------------------------------------- */
.shot { display: block; position: relative; overflow: hidden; border-radius: 18px; background: var(--tint); min-width: 0; isolation: isolate; }
.shot picture { display: contents; }
.shot img { display: block; max-width: none; max-height: none; height: auto; }
.shot.fit { aspect-ratio: var(--ar, 3/2); }
.shot.fit img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--inset, 5%); box-sizing: border-box; object-fit: contain; object-position: center; }
.shot.window { aspect-ratio: var(--ar, 4/3); }
.shot.window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center top); }
.shot.rise { display: flex; justify-content: center; align-items: flex-end; padding-top: clamp(22px, 3.6%, 44px); }
.shot.rise img { width: var(--w, 72%); height: auto; flex-shrink: 0; }
@media (max-width: 1000px) { .shot.rise { --w: 84% !important; } }
@media (max-width: 700px) { .shot.rise { --w: 92% !important; } }
/* peek : 端まで写っている縦長の画像を大きく置き、上半分だけ見せて下は額縁の縁で切る（--w で幅、--top で上の余白） */
.shot.peek { aspect-ratio: var(--ar, 4/3); }
.shot.peek img { position: absolute; top: var(--top, 7%); left: 50%; transform: translateX(-50%); width: var(--w, 70%); height: auto; }
@media (max-width: 700px) { .shot.peek { --w: 80% !important; } }
/* スクショの置き場所（画像はあとで差し替える）。何を置く予定かをラベルで書いておく */
.shot.blank { aspect-ratio: var(--ar, 4/3); display: flex; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed var(--blank-line, #b7c7dd); background: var(--tint); }
.shot.blank span { font-size: .8125rem; line-height: 1.7; color: var(--muted); padding: 0 18px; }

/* デバイス選択（カレンダーのページと同じ型） */
.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #e6ecf3; max-width: 100%; }
.segmented button { border: 0; background: transparent; border-radius: 10px; padding: 9px 22px; font-size: .9375rem; font-weight: 500; color: #4b5966; line-height: 1.5; transition: background .2s, color .2s; }
.segmented [aria-selected="true"] { background: #fff; color: #172327; box-shadow: 0 1px 3px #0000001f; }
.device-copy h3 { font-size: 1.3rem; margin: 0 0 6px; font-weight: 500; letter-spacing: -.02em; line-height: 1.45; }
.device-copy h3 strong { font-weight: 650; }
.device-copy .tagline { font-size: 1rem; margin: 0 0 18px; }
.price-note { display: block; color: var(--muted); font-size: .75rem; margin-top: 10px; }

.ordinal { color: var(--accent); }
.overline { display: flex; align-items: center; gap: 12px; font-size: .75rem; letter-spacing: .08em; color: var(--muted); }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 44px; width: auto; display: block; }
.store-badge:hover { text-decoration: none; opacity: .85; }
.text-link { color: var(--accent); }

/* 箇条書き（その他の機能・ウィジェットの種類） */
.dot-list { list-style: none; margin: 0 0 18px; padding: 0; }
.dot-list li { position: relative; padding-left: 18px; font-size: .9375rem; line-height: 1.9; color: var(--muted); margin-bottom: 6px; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .7; }
.closing { font-size: .9375rem; margin-bottom: 18px; }

/* 無料と Pro の比較表 */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plan { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; padding: 26px 28px; min-width: 0; }
.plan.pro { border-color: var(--accent); box-shadow: 0 16px 50px #1f3d6b0d; }
.plan-name { display: block; font-size: .8125rem; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.plan-price { display: block; font-size: 1.6rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.3; margin-bottom: 4px; }
.plan-note { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: 16px; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { position: relative; padding-left: 24px; font-size: .9375rem; line-height: 1.8; margin-bottom: 6px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.plan.free li::before { border-color: #8a97a3; }

/* ほかのFirstSeedアプリ */
.family { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.family a { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-line); color: inherit; min-width: 0; }
.family a:hover { text-decoration: none; border-color: var(--accent); }
.family .app-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.family strong { display: block; font-size: 1rem; letter-spacing: -.02em; }
.family small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.6; margin-top: 2px; }

/* ページ内ナビ */
.section-nav { display: flex; gap: 6px; flex-wrap: wrap; font-size: .8125rem; }
.section-nav a { padding: 7px 13px; border-radius: 30px; color: #4b5966; }
.section-nav a:hover { text-decoration: none; background: #e6ecf3; }
.section-nav a[aria-current="true"] { background: var(--dark); color: #fff; }


@media (max-width: 1000px) {
  .family { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .planner-page .site-footer { grid-template-columns: 1fr; }
  .planner-page .footer-languages { gap: 24px; }
  .plans { grid-template-columns: 1fr; }
  .section-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a { flex-shrink: 0; }
}
@media print { .section-nav { display: none; } }

/* レイアウト「見開き」— 章ごとに左ページ＝文章、右ページ＝図版の見開き。紙の色に青いインク */
.planner-page { background: var(--paper); --tint: #f0eadb; --card-line: var(--paper-line); --blank-line: #d9cfb8; }
.planner-page .section-nav { position: sticky; top: 0; z-index: 20; padding: 12px 0; margin-bottom: 8px; background: #fbf8f1dd; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.planner-page .section-nav a:hover { background: #efe9da; }
.planner-page .hero { padding: 34px 0 10px; }
.planner-page .hero-copy { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.planner-page .hero-copy .identity { justify-content: center; }
.planner-page .hero h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); margin: 14px 0 20px; }
.planner-page .hero h1 .kw { display: inline-block; }
.planner-page .hero-copy .lead { margin: 0 auto 28px; font-size: 1.0625rem; }
.planner-page .hero-copy .devices { margin-top: 16px; }
.planner-page .hero-shot { border-radius: 28px; }

.planner-page .story { padding: 40px 0 10px; }
.planner-page .story-inner { max-width: 720px; margin: auto; }
.planner-page .story p { font-size: 1.0625rem; line-height: 2.05; }

.planner-page .book { margin-top: 44px; display: grid; gap: 22px; }
.planner-page .spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--paper-line); border-radius: 22px; overflow: hidden; box-shadow: 0 16px 50px #5a43121a; }
/* ノド（中央の綴じ目）: 広くやわらかい影 ＋ 中央の細く濃い影の2層で、紙が谷に落ち込む感じを出す */
.planner-page .spread::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 120px; margin-left: -60px; background: linear-gradient(to right, #00000000 0%, #00000007 30%, #00000018 50%, #00000007 70%, #00000000 100%); pointer-events: none; z-index: 1; }
.planner-page .spread::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; margin-left: -7px; background: linear-gradient(to right, #00000000, #0000001c 45%, #0000002a 50%, #00000012 55%, #00000000); pointer-events: none; z-index: 1; }
.planner-page .page { padding: 40px 44px 44px; min-width: 0; }
.planner-page .page.left { display: flex; flex-direction: column; justify-content: center; }
.planner-page .page.right { background: var(--tint); display: flex; align-items: center; justify-content: center; padding: 30px; }
.planner-page .page-tab { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: .75rem; letter-spacing: .06em; color: var(--muted); padding: 5px 12px; border: 1px solid var(--paper-line); border-radius: 30px; margin-bottom: 20px; }
.planner-page .page h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); margin-bottom: 16px; }
.planner-page .page p { font-size: .9375rem; }
.planner-page .page p:last-child { margin-bottom: 0; }
.planner-page .spread-shot { width: 100%; max-width: 460px; border-radius: 16px; background: #fff; border-color: #d9cfb8; }
.planner-page .spread-shot.fit { background: transparent; --inset: 4%; }
.planner-page .spread-shot.fit:not([style*="4/5"]), .planner-page .spread-shot.peek { max-width: none; }
/* 02 のような peek は額縁を透過し、右ページの下辺で端末が切れるように置く（画像そのものは切らない） */
/* peek は右ページいっぱいを額縁にし、画像を上から少し下げて置く。下は右ページの縁で切れる（上半分〜2/3が見える） */
.planner-page .spread-shot.peek { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; background: transparent; border: 0; border-radius: 0; }
.planner-page .spread-shot.peek img { top: 30px; }
.planner-page .page.right:has(.peek) { padding: 0; }
/* 03 のような window は右ページいっぱいに敷き、比率を保ったまま、はみ出した分は見えなくする */
.planner-page .page.right { position: relative; }
/* 08・09 のように左右とも文章の見開き。右ページも白い紙で、上に寄せず中央に */
.planner-page .page.right.text { background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 40px 44px 44px; }
.planner-page .page.right:has(.window) { padding: 0; }
.planner-page .spread-shot.window { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
/* 02・04・05（端末の合成画像）は PC では左右の空きを半分にして、画像を大きく見せる */
@media (min-width: 1001px) {
  .planner-page #calendar .page.right, .planner-page #views .page.right, .planner-page #ipad .page.right { padding-left: 15px; padding-right: 15px; }
  .planner-page #calendar .spread-shot.fit, .planner-page #views .spread-shot.fit, .planner-page #ipad .spread-shot.fit { --inset: 2%; }
  /* 01 と 03 は同じ高さにそろえる（01 は iPhone の高さ、03 はその高さぶん画面を見せる） */
  .planner-page #page { min-height: 620px; }
  /* 03 は文章の高さのままにし、iPad は 01 の iPhone と同じ位置・大きさで上から置いて、下は右ページの縁で切る */
  .planner-page #note { min-height: 440px; }
  .planner-page #note .page.right { padding: 0; overflow: hidden; }
  .planner-page #note .spread-shot.fit { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); width: min(444px, calc(100% - 16px)); }
  /* 08・09 の文章だけの見開きは、少し高さを持たせる */
  .planner-page .text-spread { min-height: 460px; }
}
/* iPad・PC では 01 の iPhone を少し小さくして、見開きを 20px 低くする */
@media (min-width: 701px) {
  .planner-page .spread-shot.fit[style*="4/5"] { max-width: 444px; width: calc(100% - 16px); }
}

.planner-page .more, .planner-page .plans-section { padding: 64px 0 10px; }
.planner-page .more .page-tab, .planner-page .plans-section .page-tab { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; letter-spacing: .06em; color: var(--muted); padding: 5px 12px; border: 1px solid var(--paper-line); border-radius: 30px; margin-bottom: 18px; }
.planner-page .more-grid .dot-list { columns: 2; column-gap: 40px; }
.planner-page .more-grid .dot-list li { break-inside: avoid; }
.planner-page .plans-section > p { max-width: 720px; }
.planner-page .plans { margin-top: 24px; }

.planner-page .download { margin-top: 60px; background: var(--dark); color: #fff; border-radius: 28px; padding: 50px; }
.planner-page .download-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.planner-page .download h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 10px; }
.planner-page .download p { color: var(--dark-muted); margin: 0; }

@media (max-width: 1000px) {
  .planner-page .page, .planner-page .page.right.text { padding: 30px 30px 34px; }
  .planner-page .more-grid .dot-list { columns: 1; }
  .planner-page .download { padding: 36px; }
}
@media (max-width: 700px) {
  .planner-page .section-nav { margin: 0 -20px 4px; padding: 10px 20px; }
  .planner-page .hero { padding-top: 22px; }
  .planner-page .hero h1 { font-size: 2.6rem; }
  .planner-page .hero-shot { border-radius: 18px; }
  .planner-page .story { padding-top: 24px; }
  .planner-page .book { margin-top: 30px; gap: 16px; }
  .planner-page .spread { grid-template-columns: 1fr; border-radius: 18px; }
  .planner-page .spread::before, .planner-page .spread::after { display: none; }
  .planner-page .page.right { order: -1; padding: 20px; }
  .planner-page .page.right.text { order: 0; padding: 24px 22px 28px; border-top: 1px solid var(--paper-line); }
  .planner-page .page.right:has(.window) { padding: 0; }
  .planner-page .spread-shot.window { position: static; aspect-ratio: var(--ar, 4/3); height: auto; }
  .planner-page .page.right:has(.peek) { padding: 0; }
  .planner-page .spread-shot.peek { position: relative; inset: auto; aspect-ratio: var(--ar, 3/2); height: auto; }
  .planner-page .page { padding: 24px 22px 28px; }
  .planner-page .more, .planner-page .plans-section { padding-top: 44px; }
  .planner-page .download { padding: 28px 22px; border-radius: 20px; margin-top: 44px; }
  .planner-page .download-inner { grid-template-columns: 1fr; gap: 22px; }
}

/* iPad・PCでは右ページも白い紙にする */
@media (min-width: 701px) {
  .planner-page .page.right { background: #fff; }
  .planner-page .spread-shot.blank { background: var(--tint); }
}