/* Flickami の紹介ページと素材ページだけの見た目。土台は ../style.css（色の言葉・書体・ふちの線）。
   外の書体・解析・埋め込み動画は読まない（サイトの方針）。 */
.hero { margin: 0; background: #0d1420; }
.hero img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; }
.wide { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.intro { padding-top: 28px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 14px; letter-spacing: 0.08em; }
.intro h1 { font-size: clamp(24px, 4.2vw, 34px); margin: 4px 0 12px; word-break: auto-phrase; }
.intro p { margin: 0 0 16px; max-width: 38em; }
.cta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 18px 0 8px; }
.soon { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; }
.soon small { font-weight: 400; opacity: 0.8; font-size: 13px; }
/* App Store のバッジ（Apple 公式の SVG。高さ 40px 以上・まわりに あきを取る ── App Store マーケティングガイドライン） */
.appstore { display: inline-block; line-height: 0; border-radius: 9px; }
.appstore img { display: block; height: 48px; width: auto; }
.appstore:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.devices { font-size: 13px; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts li { border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--muted); background: var(--card); }
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 14px; margin: 28px auto 0; max-width: 980px; }
.shots img { width: 100%; height: auto; border-radius: 14px; scroll-snap-align: start; display: block;
  box-shadow: 0 1px 0 var(--rule), 0 6px 18px rgba(0, 0, 0, 0.18); }
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; }
.features section { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.features h3 { margin: 0 0 6px; font-size: 17px; word-break: auto-phrase; }
.features p { margin: 0; font-size: 15px; }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
table.spec th { width: 34%; color: var(--muted); font-weight: 600; }
.tablewrap { overflow-x: auto; }
.wide h2 { margin-top: 44px; }
.pagefoot { max-width: 980px; margin: 48px auto 0; padding: 12px 16px 40px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pagefoot a { color: var(--muted); }
header.site.wide { margin: 0 auto; padding: 16px 16px 12px; max-width: 980px; }
/* 素材ページ */
.assets { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.assets a { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; font-size: 13px; color: var(--muted); }
.assets img { display: block; width: 100%; height: 150px; object-fit: contain; background: #2a3242; border-radius: 6px; margin-bottom: 6px; }
.assets a:hover, .assets a:focus-visible { border-color: var(--accent); }
.download { display: inline-block; padding: 12px 20px; border-radius: 10px; background: var(--accent); color: #1d1f24; font-weight: 800; text-decoration: none; }
.two { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.two > div { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
.two h3 { margin: 0 0 6px; font-size: 15px; color: var(--muted); }
.two p { margin: 0 0 8px; }
@media (prefers-reduced-motion: no-preference) { .shots { scroll-behavior: smooth; } }
.sub { display: block; font-size: 0.6em; color: var(--muted); font-weight: 600; }
@media (max-width: 600px) { .hero img { aspect-ratio: 4 / 3; object-position: 42% 50%; } }
main.wide > h1:first-child { margin-top: 28px; }
table.spec th span[lang="en"] { display: block; font-weight: 400; font-size: 13px; }
table.spec td { overflow-wrap: anywhere; }