/* FirstSeedカレンダー（日本語）
   ヘッダー・フッター・書体・配色は ../css/home.css（TOPと共通）を継承し、
   ここではスクショの額縁と、このページのレイアウトだけを定義する。 */
.calendar-page { background: #f8fafc; --accent: #405fa8; --tint: #edf2fc; --card: #fff; --card-line: #e6ebf0; }
.calendar-page main { min-width: 0; }

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

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

/* ---------------------------------------------------------------------
   スクショの額縁 .shot
   途中で切れているスクショは、切れている辺を必ず額縁の縁に揃える。
   - fit    : 端まで写っている完全な画像。余白を取って中央に収める
   - cover  : 画面の一部を切り出した画像。四辺すべてを額縁の縁に合わせる
   - rise   : 下が切れている画像。額縁の下辺から「せり上がる」ように置く
   - hang   : 上が切れている画像。額縁の上辺から「ぶら下がる」ように置く
   - corner : 右と下が切れている画像。左上に寄せ、右下を額縁の外へ逃がす
   --------------------------------------------------------------------- */
.shot { position: relative; overflow: hidden; border-radius: 18px; background: var(--tint); aspect-ratio: var(--ar, 4/3); min-width: 0; isolation: isolate; }
.shot img { display: block; max-width: none; max-height: none; height: auto; }  /* home.css の max-height:440px を解除 */
.shot.fit img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; object-fit: contain; object-position: center; }
.shot.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center top); }
.shot.rise img, .shot.hang img { position: absolute; left: 50%; transform: translateX(-50%); width: auto; height: auto; max-width: var(--w, 90%); max-height: var(--h, 88%); }
.shot.rise img { bottom: 0; }
.shot.hang img { top: 0; }
.shot.corner img { position: absolute; left: var(--inset, 8%); top: var(--inset, 8%); width: var(--w, 100%); height: auto; border-radius: 12px 0 0 0; box-shadow: 0 14px 44px #16365626; }

/* デバイス選択（横並びのセグメント） */
.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 20px; font-size: .9375rem; font-weight: 500; color: #4b5966; display: flex; align-items: center; white-space: nowrap; line-height: 1.5; transition: background .2s, color .2s; }
.segmented button .ordinal, .segmented button small, .segmented button .tab-arrow { display: none; }
.segmented [aria-selected="true"] { background: #fff; color: #172327; box-shadow: 0 1px 3px #0000001f; }
.tab-label small { display: block; }

/* 対応デバイスのチップ */
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; }
.chips li { font-size: .75rem; letter-spacing: .02em; color: #3f4f5c; background: #e9eff8; border-radius: 30px; padding: 4px 11px; line-height: 1.5; }

.ordinal { color: var(--accent); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 12px; background: #203f66; color: #fff; font-weight: 600; font-size: .9375rem; line-height: 1.4; }
.button:hover { background: #172f4d; text-decoration: none; }
.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; }

/* デバイスごとの説明 */
.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; }

/* その他の機能カード（画面の一部を切り出したスクショなので cover で四辺を揃える） */
.sub-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.sub-card .shot { border-radius: 0; }
.sub-copy { padding: 20px 22px 22px; }
.sub-copy h3 { font-size: 1.05rem; margin: 0 0 8px; line-height: 1.5; }
.sub-copy p { font-size: .9rem; margin: 0; line-height: 1.8; }
.tag { display: inline-block; font-size: .7rem; color: #24519a; border: 1px solid currentColor; border-radius: 30px; padding: 2px 9px; margin-bottom: 10px; line-height: 1.6; }
.closing { margin-top: 28px; font-size: .9375rem; }

/* 価格 */
.price-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.price-label { font-size: .875rem; color: var(--muted); }
.price { font-size: 1.7rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.3; margin-bottom: 12px; }

/* FirstSeed手帳のお知らせ */
.promo { display: flex; gap: 20px; align-items: flex-start; padding: 28px 30px; border-radius: 20px; background: #fff5df; margin-top: 44px; }
.promo .app-icon { flex-shrink: 0; }
.promo .badge { display: inline-block; color: #956115; margin: 0 0 8px; }
.promo h2 { font-size: 1.25rem; margin: 0 0 8px; }
.promo p { font-size: .9375rem; margin: 0 0 6px; max-width: none; }
.promo .text-link { color: #956115; }

/* ページ内ナビ */
.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: #203f66; color: #fff; }


@media (max-width: 700px) {
  .calendar-page .site-footer { grid-template-columns: 1fr; }
  .calendar-page .footer-languages { gap: 24px; }
  .segmented { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; gap: 3px; }
  .segmented button { padding: 9px 4px; font-size: .8125rem; justify-content: center; }
  .promo { flex-direction: column; padding: 24px; }
  .price { font-size: 1.5rem; }
}
@media print { .section-nav { display: none; } }

/* ---------------------------------------------------------------------
   レイアウト … 中央揃えのヒーローと、章立てで読み進める構成。見出しは追従（sticky）
   --------------------------------------------------------------------- */
.calendar-page .section-nav { position: sticky; top: 0; z-index: 20; padding: 12px 0; margin-bottom: 8px; background: #f8fafcdd; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.calendar-page .hero { padding: 34px 0 20px; }
.calendar-page .hero-copy { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.calendar-page .hero-copy .identity { justify-content: center; }
.calendar-page .hero h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); margin: 14px 0 20px; }
.calendar-page .hero-copy p { margin: 0 auto; font-size: 1.0625rem; }

.calendar-page .device-section { text-align: center; }
.calendar-page .stage { margin-top: 26px; text-align: left; }
.calendar-page .stage-panel { background: #fff; border: 1px solid #e6ebf0; border-radius: 26px; padding: 30px; display: grid; grid-template-columns: 1fr 1.7fr; gap: 34px; align-items: center; box-shadow: 0 16px 50px #213e5f08; }
.calendar-page .device-copy h3 { font-size: 1.45rem; }
.calendar-page .device-shot { border-radius: 18px; }

.calendar-page .chapters { margin-top: 70px; }
.calendar-page .chapter { display: grid; grid-template-columns: .95fr 1.45fr; gap: 56px; padding: 64px 0; border-top: 1px solid var(--line); }
.calendar-page .chapter-head { position: sticky; top: 76px; align-self: start; min-width: 0; }
.calendar-page .chapter-head .ordinal { display: block; font-size: 3.2rem; font-weight: 200; line-height: 1; letter-spacing: -.04em; margin-bottom: 18px; }
.calendar-page .chapter-head h2 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin-bottom: 18px; }
.calendar-page .chapter-body { min-width: 0; }
.calendar-page .chapter-body p { font-size: 1rem; }
.calendar-page .chapter-shot { margin-top: 30px; border-radius: 22px; box-shadow: 0 16px 50px #213e5f0d; }
.calendar-page .chapter-shot.fit { max-width: 560px; }

/* 03 まったく新しい週カレンダー
   右が切れているMacのスクショ。切れている右辺を額縁の右端に合わせ、
   左に余白を残して窓の左端（サイドバー）が詰まって見えないようにする */
.calendar-page #week .chapter-shot img { left: auto; right: 0; top: 50%; width: 90%; transform: translateY(-50%); border-radius: 12px 0 0 12px; }

/* 05 自然言語で予定を作成
   縦長のiPhone。額縁の幅は他の章と揃え（max-width を外す）、正方形の中に左右中央で置く */
.calendar-page #natural .chapter-shot.fit { max-width: none; }
.calendar-page .chapter-shot.fit img { left: 0; top: 0; width: 100%; height: 100%; padding: 5%; box-sizing: border-box; }

/* 06 外部キーボード
   元画像が右端で切れているので、少し小さく収めたうえで切れている右辺を額縁の右端に合わせ、
   残りの左・上・下に地色を見せる（03と同じ扱い。中央に浮かせると切れ目が目立つ） */
.calendar-page #keyboard .chapter-shot img { object-fit: contain; object-position: right center; padding: 6% 0 6% 12%; box-sizing: border-box; }

.calendar-page .more { padding: 64px 0 20px; border-top: 1px solid var(--line); }
.calendar-page .more-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 24px; align-items: baseline; margin-bottom: 30px; }
.calendar-page .more-head .ordinal { font-size: 3.2rem; font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.calendar-page .more-head h2 { margin: 0; }
.calendar-page .sub-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 44px 18px; margin: 0 -44px; scroll-padding: 0 44px; }
.calendar-page .sub-strip .sub-card { scroll-snap-align: start; }
/* スクショの背景が白いとテキストとの境目が消えるので、本文側に薄い地色と境界線を敷く */
.calendar-page .sub-card .sub-copy { background: #f4f7fc; border-top: 1px solid #e6ebf0; flex: 1; }

.calendar-page .download { margin-top: 60px; background: #203f66; color: #fff; border-radius: 26px; padding: 50px; }
.calendar-page .download-inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center; }
.calendar-page .download h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 10px; }
.calendar-page .download p { color: #c9d5e6; margin: 0; }
.calendar-page .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.calendar-page .price-card { background: #ffffff14; border-radius: 18px; padding: 22px 24px; }
.calendar-page .price-label { color: #c9d5e6; }

@media (max-width: 1000px) {
  .calendar-page .stage-panel { grid-template-columns: 1fr 1.4fr; gap: 24px; padding: 24px; }
  .calendar-page .chapter { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
  .calendar-page .chapter-head { position: static; }
  .calendar-page .chapter-head .ordinal, .calendar-page .more-head .ordinal { font-size: 2.4rem; }
  .calendar-page .sub-strip { padding-left: 30px; padding-right: 30px; margin: 0 -30px; scroll-padding: 0 30px; }
  .calendar-page .download { padding: 36px; }
  .calendar-page .download-inner { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 700px) {
  .calendar-page .section-nav { margin: 0 -20px 4px; padding: 10px 20px; }
  .calendar-page .hero { padding-top: 22px; }
  .calendar-page .hero h1 { font-size: 2.6rem; }
  .calendar-page .hero-copy p br { display: none; }
  .calendar-page .stage-panel { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .calendar-page .stage-panel .device-copy { order: 2; }
  .calendar-page .stage-panel .device-shot { order: 1; }
  .calendar-page .chapters { margin-top: 44px; }
  .calendar-page .chapter { padding: 38px 0; }
  .calendar-page .chapter-shot { margin-top: 20px; border-radius: 16px; }
  .calendar-page .more-head { grid-template-columns: auto 1fr; }
  .calendar-page .more-head .text-link { grid-column: 2; }
  .calendar-page .sub-strip { grid-auto-columns: 64%; padding-left: 20px; padding-right: 20px; margin: 0 -20px; scroll-padding: 0 20px; }
  .calendar-page .sub-copy { padding: 14px 16px 16px; }
  .calendar-page .sub-copy h3 { font-size: .95rem; }
  .calendar-page .sub-copy p { font-size: .8125rem; line-height: 1.7; }
  .calendar-page .download { padding: 28px 22px; border-radius: 20px; }
  .calendar-page .price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .calendar-page .section-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .calendar-page .section-nav::-webkit-scrollbar { display: none; }
  .calendar-page .section-nav a { flex-shrink: 0; }
}