@charset "UTF-8";
/*
 * 今トーク LP
 *
 * 構成の考え方（2026-09-17 オーナー確定）:
 *   セクションは素材の画像をそのまま置く。書体・字詰め・色の塗り分けが
 *   カンプと完全に一致することを優先する。
 *   操作できる必要があるものだけを HTML で重ねる:
 *     - ヘッダー（sticky・常時表示）
 *     - 下部に浮かせたストアバッジ（fixed・常時表示）
 *     - 素材に描かれたバッジの上に重ねる透明リンク
 *     - フッターのリンク
 *
 *   SEO は別施策で行う前提のため、本文テキストの検索可能性は追わない
 *   （X・広告からの流入先として使う）。読み上げには alt で対応する。
 *
 * 配色は apps/mobile/src/theme.ts の color から取っている。
 * Web ページから theme.ts は読めないので手で写す。変えるときは両方直すこと。
 *
 * デザインの正本:
 *   ai-conpany/projects/A-007-imatalk/lp/mock/selected-mobile.png
 */

:root {
  --ink: #12262C;          /* theme.ts color.ink */
  --ink-sub: #5A6068;      /* color.inkSub */
  --ink-faint: #9AA0A6;    /* color.inkFaint */
  --card: #FFFFFF;         /* color.card */
  --line: #ECEEF0;         /* color.line */
  --primary: #FF6B5E;      /* color.primary */

  --page: 430px;           /* スマホ向け幅。PCでもこの幅で中央に置く */
  --gut: 16px;
  --sticky-h: 76px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  /* 下部の固定CTAに本文・フッターが隠れないよう余白を確保する */
  padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
nav { padding: 0; }

/* ページ全体をスマホ幅で中央に置く（PCでも横に広げない） */
.header__inner, main, .footer { max-width: var(--page); margin-inline: auto; }

/* ============ ヘッダー（常時表示） ============ */
.header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px var(--gut);
}
.header__logo { width: auto; height: 28px; }
.header__x {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--ink); transition: background .2s;
}
.header__x:hover { background: #F6F7F8; }

/* ============ セクション（素材をそのまま置く） ============ */
/*
 * 素材どうしが継ぎ目なく続くようにする。
 * 画像は inline 要素なので、font-size/line-height を殺さないと
 * ベースライン分の隙間が入り、そこが横線になって「切れ目」に見える。
 */
.sec { position: relative; font-size: 0; line-height: 0; }
.sec__h { font-size: 0; line-height: 0; margin: 0; }
/*
 * picture も inline 要素なので img と同じく block にする。
 * これが無いと、WebP 化のために img を picture で包んだ時点で
 * ベースライン分の隙間が戻り、セクションの継ぎ目に横線が出る。
 */
.sec__h picture { display: block; }
.sec__h img { width: 100%; display: block; }
main { font-size: 0; line-height: 0; }

/*
 * 素材に描かれたストアバッジの上に重ねる透明リンク。
 * 位置は素材(1044x1230)内のバッジ位置を割合で指定している。
 * 素材を差し替えたらこの4値も合わせ直すこと。
 */
.hot {
  position: absolute; z-index: 2;
  display: block;
  border-radius: 8px;
}
/* 素材 sec-hero.png(1024x1260) 内のバッジ位置を実測した値 */
.hot--ios { left: 4.39%;  top: 41.11%; width: 19.73%; height: 5.71%; }
.hot--and { left: 24.80%; top: 41.11%; width: 21.19%; height: 5.71%; }
/* 押せることが分かるよう、触れたときだけ薄く反応させる */
@media (hover: hover) {
  .hot:hover { background: rgba(255,107,94,.14); }
}

/* ============ 末尾のストアボタン ============ */
.bottom-cta { padding: 26px var(--gut) 8px; }
.bottom-cta__stores { display: flex; justify-content: center; gap: 10px; }
.bottom-cta__badge {
  display: grid; place-items: center;
  width: 148px; height: 44px;          /* 固定CTAと同じ枠 */
  transition: transform .18s;
}
.bottom-cta__badge img { height: 100%; width: auto; max-width: 100%; }
.bottom-cta__badge:hover { transform: translateY(-1px); }

/* ============ フッター ============ */
.footer { padding: 20px var(--gut) 24px; text-align: center; }
.footer__brand {
  padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 15px; font-weight: 700; letter-spacing: .16em; color: var(--ink-faint);
}

/* ============ 下部に浮かせた固定CTA ============ */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 9px var(--gut) calc(9px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
}
/*
 * 2つのバッジは公式素材の時点で縦横比が違う（Apple 2.72 / Google 3.37）。
 * 高さを揃えると横が 120px と 148px でずれる。
 *
 * **バッジ自体は引き伸ばさない。** 縦横比の改変は Apple / Google 双方の
 * 商標ガイドラインで禁止されており、審査のリジェクト対象になる。
 * 自作バッジも同じ理由で不可（依頼の禁止事項にも明記）。
 *
 * 代わりに、同じ寸法の枠を与えて中の画像を中央に置く。
 * 両社とも「バッジの周囲に余白(clear space)を確保すること」を求めているので、
 * この余白はガイドラインに沿った使い方になる。
 */
.sticky__badge {
  display: grid; place-items: center;
  width: 148px; height: 44px;          /* 広い方(Google)に合わせた共通の枠 */
  transition: transform .18s, opacity .18s;
}
.sticky__badge img { height: 100%; width: auto; max-width: 100%; }
.sticky__badge:hover { transform: translateY(-1px); }
/*
 * 端末に合う方を主役にする。もう片方も押せるままにして、
 * 「Android で見ているが iOS 版のリンクが欲しい」場合を塞がない。
 */
.sticky__badge[data-primary] { width: 168px; height: 50px; }
.sticky:has([data-primary]) .sticky__badge:not([data-primary]) { opacity: .55; width: 135px; height: 40px; }

/* ============ 動きを抑える設定を尊重 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============ 狭い端末 ============ */
@media (max-width: 380px) {
  :root { --gut: 12px; --sticky-h: 68px; }
  .sticky__badge { width: 128px; height: 38px; }
  .sticky__badge[data-primary] { width: 145px; height: 43px; }
  .sticky:has([data-primary]) .sticky__badge:not([data-primary]) { width: 118px; height: 35px; }
  .bottom-cta__badge { width: 132px; height: 39px; }
}