/* ルートページ（LP）専用。style.css を読んだうえで重ねる。
   法務・サポートページはこのファイルを読まないので、ここの指定は届かない。

   文字組みとスクリムは store/tools/template.html（App Store スクリーンショットの合成
   テンプレート）に合わせてある。製品ページから来た人に、同じ見え方で続くようにするため。

   揃えの規則はひとつ。セクションは中央軸で、見出しも本文ブロックも中央に置く
   （文章そのものは読みやすさのため左揃えのまま）。左揃えの島を作らない。
   見出しは2段だけ。マーケティングの見出し（h2）と、締めのブロックの小見出し（.privacy h2）。 */

body.lp {
    /* style.css は文書ページ向けに本文の余白を body に持たせている。
       LPはヒーローを全幅に敷くので、余白は各ブロックの内側が持つ。 */
    padding: 0;

    /* セクションの縦リズム。上下の両方に持たせると隣接セクションで二重に空くので、
       上側だけに入れて、最後のセクションだけ下を足す。
       例外は地色を持つセクション（.night）で、あれは帯の縁が前後の中身に接するため、
       上（margin）と下（padding）を自分で持つ。 */
    --lp-gap: clamp(3.5rem, 7vw, 6rem);
    /* レールは2本だけ。見出しと本文は 42rem、画像と機能ラベルは 52rem に載せる。
       ブロックごとに幅を変えない（中身の量で幅が決まると、縦に並べたとき左端が揃わない）。 */
    --lp-wide: 42rem;
    --lp-stage: 52rem;
    /* カレンダーと夜間画像の縦横比。4:3のまま敷くと1280pxで1枚960px、1600pxでは1200pxになり、
       1枚で1画面を超える。下端を基準に切って抑える
       （時計・カレンダーはどのカットも左下にあるので、切るのは常に上側）。
       画面の高さ（svh）ではなく比で持つのは、切り取る割合を画面サイズで変えないため。
       ウィンドウが低いときだけ人物の頭が切れる、という事故を防ぐ。
       8:5 は上を16.7%落とす。02_calendar の男の子の頭は上から20%の位置にあり、収まる。 */
    --lp-band: 8 / 5;
    /* 夜のカットは上半分がほぼ暗部。2:1 で上を33%落とすが、灯籠と時計はどちらも下側に残る。 */
    --lp-band-night: 2 / 1;
}

/* style.css の main は本文幅42remで中央に寄せる。LPでは各ブロックが自分のレールを持つので外す。 */
.lp main {
    max-width: none;
    margin: 0;
}

.lp .wrap {
    max-width: var(--lp-wide);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* 各セクションの説明は一段落だけ。用語＋説明のリストにしないこと。

   以前は3セクションに計8個の「短いラベル＋一文」を並べていたが、
   画像1枚の下にメッセージが3つ積まれる形になり、密度が高すぎた。
   参考にした minto（https://mintotodo.app/）は1画像＝1機能＝1文で、
   総文字数はほぼ同じでも1画面あたりのメッセージは1つ。こちらもそれに合わせている。

   結果、3つのマーケティングセクションはすべて
   「見出し ＋ サブ ＋ 画像 ＋ 一段落」の同じ形になった。ここを崩さないこと。

   級数と濃度はページの本文に揃える。--text-secondary（白地で 5.2:1）だと
   他の本文（17.0:1）の3分の1の濃さになり、内容ではなく注釈に見える。
   #48484a は 9.1:1。**実値なので、ダークと夜間帯の分を下のほうで必ず上書きすること。** */
.lp .detail {
    /* レール（42rem）と左右の余白は親の .wrap が持つ。ここは見え方だけ。 */
    color: #48484a;
    /* セクションは見出しもサブも画像も中央軸なので、2〜3行の説明もそこに乗せる。
       左揃えにすると、中央揃えの構図の中で最終行の短さだけが目立つ。
       これは短い説明だからで、Proのパネルとプライバシー（長文）は左揃えのまま。 */
    text-align: center;
    text-wrap: balance;
}

/* 見出しは日本語だと既定でどこでも折れ、「フォトフ / レーム」のような語中改行が起きる。
   template.html と同じく keep-all で禁じる。英語は空白で折れるので影響を受けない。

   overflow-wrap: anywhere は保険。keep-all は「CJKは句読点でしか折らない」という強い指定で、
   句読点のない長い一続きが1行に収まらないと、折らずにそのまま横に溢れる。
   anywhere は「どうしても収まらないときだけ」折るので、通常の見え方は変わらない。
   現在の文言はどれも iPhone の幅に収まっているが、伸ばしたときに黙って崩れないようにしてある。 */
.lp h1,
.lp h2,
.lp .tagline,
.lp .section-sub {
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: anywhere;
    text-wrap: balance;
    letter-spacing: -0.02em;
}

/* リード文には keep-all を掛けない。**掛けると崩れる。**
   ここは見出しではなく本文で、「ふと目をやるたびに思い出が流れていくフォトフレームです」のように
   句読点のない一続きが26文字続く。keep-all だとこれが1行扱いになり、iPhoneの幅（390px）で
   documentが509pxまで広がって、ページ全体が横スクロールする状態になっていた。

   anywhere の保険で溢れは止まるが、緊急の折り返しは禁則処理を飛ばすので、
   「なが / ら、」や「フ / ォトフレーム」のように小書き仮名が行頭に来る。
   keep-all が防ぎたかったものより悪い。

   本文は既定の折り返し（+ line-break: strict の禁則処理）に任せるのが日本語として正しい。
   日本語の本文で語中改行が起きるのは普通のことで、見出しとは扱いが違う。 */
.lp .intro p {
    line-break: strict;
    text-wrap: balance;
    letter-spacing: -0.02em;
}

/* ---- ヒーロー: 実画面を全幅に敷き、上部のスクリムに見出しを重ねる ---- */

.lp .hero {
    position: relative;
    /* 縦に伸びすぎないよう上限を置く。svh はアドレスバーの出入りで高さが跳ねないため。 */
    height: min(78svh, 44rem);
    min-height: 22rem;
    overflow: hidden;
    background: #000;
}

.lp .hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 4:3 の実画面を横長に切るので上下が落ちる。上の人物と左下の時計は両立できないため、
       人物を採る。時計とカレンダーは次のセクションの画像で全体が見える。 */
    object-position: 50% 42%;
}

.lp .hero-scrim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 62%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.62) 38%,
        rgba(0, 0, 0, 0.3) 72%,
        rgba(0, 0, 0, 0) 100%
    );
}

.lp .hero-text {
    position: relative;
    padding-top: clamp(2.5rem, 7vh, 5rem);
    text-align: center;
}

.lp .hero h1 {
    margin: 0;
    font-size: clamp(2rem, 6.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.lp .hero .tagline {
    margin: 0.75rem 0 0;
    font-size: clamp(1rem, 2.4vw, 1.375rem);
    font-weight: 400;
    line-height: 1.35;
    /* 写真の上なので変数ではなく実値で持つ。
       store/tools/template.html の .sub は 66% だが、ここは 80% にしてある。
       スクリムの薄い側と写真の明るい部分が重なると、66%では実測で 4.1:1 まで落ち、
       通常サイズの文字の基準（4.5:1）を割るため。テンプレート側は画像なので据え置き。 */
    color: rgba(255, 255, 255, 0.8);
}

/* 言語切り替え。写真の上にあるので style.css の .lang とは別に色を持つ。 */
.lp .hero .lang {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 1;
    margin: 0;
    font-size: 0.9375rem;
}

.lp .hero .lang a {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- セクション ---- */

.lp section {
    padding-top: var(--lp-gap);
}

/* style.css の .lead は法務ページの囲みボックスなので、その名前は使えない。
   同じ名前にすると背景色と角丸が付いてしまう。 */
.lp .intro {
    text-align: center;
    font-size: clamp(1.125rem, 2.6vw, 1.5rem);
    line-height: 1.6;
}

.lp .intro p {
    margin: 0;
}

.lp h2 {
    /* style.css の h2 は文書用に区切り線を持つ。LPでは写真が区切りになるので外す。 */
    margin: 0;
    padding-top: 0;
    border-top: none;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.3;
}

.lp .section-sub {
    margin: 0.625rem 0 0;
    color: var(--text-secondary);
    font-size: clamp(1rem, 2.2vw, 1.1875rem);
}

.lp .section-head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.lp section p {
    margin: 0 0 1rem;
}

.lp section p:last-child {
    margin-bottom: 0;
}

/* ---- 画像 ---- */

.lp figure {
    margin: 0;
}

.lp main figure {
    padding: 0 1.25rem;
}

.lp figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* 本文画像は余白・角丸・影でヒーローより一段控えめに置く。
   カレンダー画像は広いレール、夜間画像は下の指定で本文レールに載せる。
   どちらも人物と左下の表示を残すため、下端を基準に上側を切る。
   比を変えたら alt の記述と食い違わないか確認すること（web/README.md）。 */
.lp main figure img {
    max-width: var(--lp-stage);
    margin: 0 auto;
    border-radius: 0.75rem;
    aspect-ratio: var(--lp-band);
    object-fit: cover;
    object-position: 50% 100%;
    box-shadow:
        0 1.25rem 3rem rgba(66, 54, 40, 0.18),
        0 0 0 1px var(--rule);
}

/* 画像の直後に本文が続くセクションでは、間を詰めすぎない。
   .wrap は margin を 0 で持つので、ここで足さないと画像に貼り付く。
   画像のあとに .wrap 以外のブロックを置くようになったら、この一覧にも足すこと。 */
.lp figure + .wrap {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---- 夜間の帯。写真が暗いので、セクションごと暗くして地続きに見せる ---- */

.lp .night figure img {
    max-width: var(--lp-wide);
    aspect-ratio: var(--lp-band-night);
    /* 帯はライト/ダークのどちらでも #000 なので、輪郭は常に明るい側で引く。
       既定の `0 0 0 1px var(--rule)` はライトだと rgba(60,60,67,.18) で、黒地では消える。
       夜のカットは中身も暗いため、輪郭がないと写真がどこまでか読めなくなる。
       落ち影も暖色（本文の白地向け）では見えないので、黒に沈む影に差し替える。
       この規則は `.lp main figure img`（ダークモードの上書きも含む）より詳細度が高い。 */
    box-shadow:
        0 1.25rem 3rem rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* 狭い画面ではカレンダーと夜間の写真を素材どおりの 4:3 に戻す＝切らない。
   8:5 と 2:1 は「広い画面で1枚が1画面を占める」のを防ぐための指定で、狭い画面では役目がない。
   390pxだと夜間が195pxまで縮み、時計も灯籠も潰れてしまう。
   ブレークポイントは 44rem（狭い画面の境界として他でも使っている値）。
   この規則は上の2つと詳細度が同じなので、必ずあとに置くこと。 */
@media (max-width: 44rem) {
    .lp main figure img,
    .lp .night figure img {
        aspect-ratio: 4 / 3;
    }
}

.lp .night {
    background: #000;
    color: #f2f2f7;
    /* 「余白は padding-top の片側だけ」の唯一の例外。地色を持つセクションは、
       内側の padding だけでは帯の“縁”が前後の中身と接してしまうので、上下とも自分で持つ。

       margin-top: 帯の上端は直前のセクションの最終行にそのまま接する。padding-top は
       帯の内側に効くので、外の余白にはならない。これがないと本文が黒に食われて見える。
       padding-bottom: 帯の下端が中身の下端と重なる。中身が写真なので、これがないと
       境目が写真を断ち切り、角丸の下2つと落ち影が次の白いセクションにはみ出す。

       結果、帯の上は「外に1つ分＋内に1つ分」空く。全幅の黒はページ内で最も強い区切りなので、
       ここだけリズムが倍になるのは意図どおり。 */
    margin-top: var(--lp-gap);
    padding-bottom: var(--lp-gap);
}

.lp .night h2 {
    color: #fff;
}

.lp .night .section-sub {
    color: rgba(235, 235, 245, 0.62);
}

/* 帯はライト/ダークのどちらでも #000 なので、ここは配色に関係なく常にこの値。
   白地の .detail（ライト 9.1:1）と同じ「本文からの距離」に合わせて 0.78 →
   実効 #b7b7bf で 10.5:1。副見出しは意図的に一段下げたままにする。 */
.lp .night .detail {
    color: rgba(235, 235, 245, 0.78);
}

.lp .night figure {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---- Pro ---- */

/* 見出しは他のセクションと同じ中央。囲みは購入内容の短い説明だけを包む。 */
.lp .panel {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: 0.875rem;
    background: var(--surface);
}

/* 字下げはパネル自身の padding だけが持つ。以前ここに max-width: 34rem を重ねていたが、
   padding と合わせて二重の字下げになり、パネルの本文だけ 32字/行 と
   ページ内で最も狭い measure になっていた（`.detail` は37字/行）。
   その狭さのせいで2文目が3行に折れ、最終行が「ます。」だけの孤立行になっていた。

   text-wrap は指定しない。`pretty` は日本語の最終行を詰められず（未指定と同じ結果になる）、
   `balance` はこの行数だと全行が刈り込まれてパネルの右側が大きく空く。
   孤立行が出たら**文を詰めること**。ここは文言が固定なので、それがいちばん確実。 */
.lp .panel > p {
    margin-left: auto;
    margin-right: auto;
}

.lp .panel > p:last-child {
    margin-bottom: 0;
}

/* ---- App Store への導線 ---- */

/* バッジは Apple 配布のSVGをそのまま置く（改変不可）。
   Identity Guidelines の規定は、画面表示での最小の高さが40px、
   クリアスペース（周囲に他の要素を置かない余白）がバッジ高さの1/4以上。
   ここでは高さ48pxにして、a の padding 12px でクリアスペースを確保している。
   この padding はタップ領域も兼ねる（48 + 12*2 = 72px 角）。 */
.lp .cta {
    margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
    text-align: center;
}

.lp .cta a {
    display: inline-block;
    padding: 0.75rem;
    text-decoration: none;
}

.lp .cta img {
    display: block;
    height: 3rem;
    width: auto;
}

/* ---- 締めのブロック（プライバシーとお問い合わせ） ---- */

/* ここはマーケティングのセクションではなく注記と連絡先なので、本文と同じ左揃えにする。 */

.lp .privacy h2 {
    margin: 2rem 0 0.5rem;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.lp .privacy h2:first-child {
    margin-top: 0;
}

/* ---- フッター ---- */

.lp footer {
    margin-top: var(--lp-gap);
    padding: 2rem 1.25rem 4rem;
    border-top: 1px solid var(--rule);
    text-align: center;
}

.lp footer > * {
    max-width: var(--lp-wide);
    margin-left: auto;
    margin-right: auto;
}

/* Apple商標の帰属表記。目立たせる必要はないが省略もできない。 */
.lp .attribution {
    margin-top: 1rem;
    font-size: 0.8125rem;
}

/* ---- ダークモード ---- */

/* style.css の変数でページ全体が黒になるため、LP側で2か所だけ手当てする。
   変数そのものは触らない（法務・サポートの6ページに波及するため）。 */
@media (prefers-color-scheme: dark) {
    /* .detail は実値（#48484a）で持っているので、黒地では沈む。ここで置き換える。
       #b9b9be は黒地で 10.8:1。ライトの 9.1:1 と、本文（18.8:1 / 17.0:1）からの距離が揃う。
       夜間帯の .detail はこれより詳細度が高い規則で別に持っているので、ここでは触らない。 */
    .lp .detail {
        color: #b9b9be;
    }

    /* 夜間の帯は #000。ページの地も #000 になるので境目が消える。
       写真の上下にヘアラインを引いて、帯として読めるようにする。 */
    .lp .night {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* 本文画像を黒地に置くと、暖色の落ち影は見えない。
       輪郭のリングと、地に沈む影に差し替える。 */
    .lp main figure img {
        box-shadow:
            0 1.25rem 3rem rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.14);
    }
}