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

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

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

/* ---------------------------------------------------------------------
   スクショの額縁 .shot
   途中で切れているスクショは、切れている辺を必ず額縁の縁に揃える。
   - fit  : 端まで写っている画像（全端末）。比率 --ar の額縁に余白を取って中央に
   - rise : 下が切れている画像（ボード・タイムライン・検索・マイタスク・カレンダー連携・ウィジェット）
            額縁の下辺からせり上がる。額縁の高さは「画像の高さ＋わずかな余白」で決まる
   - hang : 上が切れている画像（その他の機能）。額縁の上辺からぶら下がる
   - bleed-right : 上・下・右が切れている画像（同期）。上下と右辺を額縁の縁に合わせ、地色は左だけに出す
   画像の幅は --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, 16/10); }
.shot.fit img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 5%; box-sizing: border-box; object-fit: contain; object-position: center; }
.shot.rise, .shot.hang { display: flex; justify-content: center; --pad: clamp(26px, 4.6%, 60px); }
.shot.rise { align-items: flex-end; padding-top: var(--pad); }
.shot.hang { align-items: flex-start; padding-bottom: var(--pad); }
.shot.rise img, .shot.hang img { width: var(--w, 76%); height: auto; flex-shrink: 0; }
/* 上下が切れているので額縁の高さ＝画像の高さ。右の切れ目を額縁の右辺に合わせ、地色は左だけ */
.shot.bleed-right { display: flex; justify-content: flex-end; }
.shot.bleed-right img { width: var(--w, 82%); height: auto; flex-shrink: 0; }
/* AIエージェントの紹介は現行ページと同じ動画をそのまま置く */
.shot.video { aspect-ratio: 16/9; }
.shot.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 画面が狭くなるほど、額縁に対する画像の割合を上げる（カレンダーのページと同じ考え方） */
@media (max-width: 1000px) {
  .shot.rise, .shot.hang, .shot.bleed-right { --w: 84% !important; --pad: 30px; }
}
@media (max-width: 700px) {
  .shot.rise, .shot.hang, .shot.bleed-right { --w: 92% !important; --pad: 22px; }
}

.ordinal { color: var(--accent); font-weight: 600; }
.text-link { color: var(--accent); }
.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; }
.devices { display: block; color: var(--muted); font-size: .8125rem; }

/* 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: var(--accent); color: #fff; }

@media (max-width: 700px) {
  .tasks-page .site-footer { grid-template-columns: 1fr; }
  .tasks-page .footer-languages { gap: 24px; }
  .promo { flex-direction: column; padding: 24px; }
}
@media print { .section-nav { display: none; } }

/* ---------------------------------------------------------------------
   レイアウト … 1カラムの読み物。図版はキャプション付きの「図」として置く
   余白の刻み（章の上下・図版の上下・地色の内側・画面幅ごとの左右）は
   カレンダーのページと同じ値に揃えている
   --------------------------------------------------------------------- */
.tasks-page main { max-width: none; padding: 0; }
.tasks-page .section-nav { position: sticky; top: 0; z-index: 20; max-width: 1148px; margin: 0 auto; padding: 12px 24px; background: #f8fafcdd; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tasks-page .journal { max-width: 1148px; margin: auto; padding: 8px 24px 64px; }   /* 本文カラム = 1100px */

.tasks-page .hero { padding: 30px 0 10px; }
.tasks-page .hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); margin: 16px 0 18px; line-height: 1.35; }
.tasks-page .hero h1 .kw { display: inline-block; }
.tasks-page .lead { font-size: 1.0625rem; margin-bottom: 14px; }
.tasks-page .lead-sub { margin-bottom: 14px; }
.tasks-page .hero .devices { margin-top: 16px; }
.tasks-page .hero-shot { margin: 36px 0 56px; background: var(--tint); border-radius: 24px; padding: 40px 56px; }
.tasks-page .hero-shot img { width: 100%; height: auto; display: block; }

.tasks-page .overline { display: flex; align-items: center; gap: 12px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.tasks-page .overline .ordinal { font-size: .875rem; letter-spacing: 0; }
.tasks-page h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 18px; }

.tasks-page .chapter { padding: 52px 0; border-top: 1px solid var(--line); }
.tasks-page .chapter p { font-size: 1rem; }
.tasks-page .chapter figure { margin-top: 30px; }
.tasks-page .chapter-shot { border-radius: 22px; }
.tasks-page figcaption { font-size: .8125rem; color: var(--muted); margin-top: 12px; }

/* その他の機能 … 箇条書きとスクショを左右に並べる */
.tasks-page .more { padding: 52px 0 40px; border-top: 1px solid var(--line); }
.tasks-page .more > p { margin-bottom: 26px; }
.tasks-page .more > p .text-link { margin-left: 16px; }
.tasks-page .more-body { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; }
.tasks-page .other-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.tasks-page .other-list li { font-size: .9375rem; line-height: 1.7; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--line); position: relative; }
.tasks-page .other-list li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tasks-page .other-shot { border-radius: 22px; }

.tasks-page .download { padding: 52px 0 10px; border-top: 1px solid var(--line); }
.tasks-page .download p { margin-bottom: 26px; }
.tasks-page .price-list { border-top: 1px solid var(--line); }
.tasks-page .price-card { display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.tasks-page .price-label { width: 160px; font-size: 1rem; }
.tasks-page .price { flex: 1; margin: 0; font-size: 1.35rem; font-weight: 650; letter-spacing: -.03em; }

/* iPad … 左右は24pxのまま、章の間と地色の内側だけ少し詰める */
@media (max-width: 1000px) {
  .tasks-page .hero-shot { margin: 30px 0 46px; padding: 28px 30px; }
  .tasks-page .chapter { padding: 44px 0; }
  .tasks-page .chapter figure { margin-top: 26px; }
  .tasks-page .more, .tasks-page .download { padding-top: 44px; }
  .tasks-page .more-body { grid-template-columns: 1fr 320px; gap: 32px; }
}
@media (max-width: 700px) {
  .tasks-page .section-nav { padding: 10px 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tasks-page .section-nav::-webkit-scrollbar { display: none; }
  .tasks-page .section-nav a { flex-shrink: 0; }
  .tasks-page .journal { padding: 4px 20px 44px; }
  .tasks-page .hero h1 { font-size: 2.3rem; }
  .tasks-page .hero-shot { margin: 24px 0 40px; padding: 18px 14px; border-radius: 18px; }
  .tasks-page .chapter, .tasks-page .more, .tasks-page .download { padding: 38px 0; }
  .tasks-page .chapter figure { margin-top: 20px; }
  .tasks-page .chapter-shot, .tasks-page .other-shot { border-radius: 14px; }
  .tasks-page .more-body { grid-template-columns: 1fr; gap: 24px; }
  .tasks-page .other-shot { max-width: 300px; }
  .tasks-page .price-card { flex-wrap: wrap; gap: 8px 16px; }
  .tasks-page .price-label { width: auto; }
  .tasks-page .price-card .store-badge { width: 100%; }
}