:root{
  color-scheme: dark;
  /* base — cool near-black（ブランドのロックアップ背景 #1A1B1E 系に整合）。
     2026-07-10 全体の重たさ解消のため 1 段明るく（比較 4 案から Jun 選定＝旧 提案 A）：
     bg #15171A→#1C1F22 / surface #1E2125→#262A2D / surface-2 は WORKFLOW アイコンタイル用に
     さらに 1 段上げて #2E3338。 */
  --bg:#1C1F22; --surface:#262A2D; --surface-2:#2E3338;
  --ink:#F1ECE4; --muted:#9AA0A7; --line:#353B42; /* line は 2026-07-10 の bg/surface 明化に追随して 1 段明るく（#2B3036→） */
  --ink-soft:#D8D4CC; /* 見出し（Hero/Concept）：純白(--ink)より少し落として馴染ませる */
  --text-body:#CAC6BD; /* 大見出し直下の本文/リード（Hero/Concept 本文・各 section-lead）：見出しより僅暗。小見出し(h3)下の本文は --muted で更に一段落として階層確保 */
  /* brand accents — faded teal & orange（不変） */
  --teal:#1C8C92; --teal-300:#38B6BD; --rose:#B25E73; --rose-300:#CC7E92;
  --orange:#DE8B3E; --orange-300:#F0A95F;
  --grade:linear-gradient(135deg,#38B6BD 0%,#CC7E92 52%,#F0A95F 100%);
  --shadow:0 30px 80px rgba(0,0,0,.45);
  /* 英字は DM Sans、日本語は Zen Kaku Gothic New が担当（ブラウザがコードポイントごとに
     glyph を持つ最初のフォントを選ぶ挙動）。fallback は system の Hiragino / Segoe UI 系。 */
  --heading-sans:"DM Sans","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,system-ui,"Segoe UI",sans-serif;
  --body-sans:"DM Sans","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,system-ui,"Segoe UI",sans-serif;
  --serif:"Fraunces","Zen Old Mincho","Hiragino Mincho ProN",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body-sans);font-size:1.0625rem;font-weight:500;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* 既定はゴシック（機能の明快さ・信頼）。明朝は Hero / Concept のみ（写真観・クラシカルな価値） */
h1,h2{margin:0;font-family:var(--heading-sans);font-weight:700;letter-spacing:0;line-height:1.2;overflow-wrap:normal;color:var(--ink-soft)}
/* Fraunces は 400 で display させる（700 だとタイトルが重すぎ・Jun 判断 2026-07-10） */
.hero h1,.concept h2,.concept-pull{font-family:var(--serif);font-weight:400;letter-spacing:.012em}
h3{margin:0 0 8px;font-family:var(--heading-sans);font-size:1.06rem;line-height:1.4;color:var(--ink-soft)}
p{overflow-wrap:anywhere}

/* Zen Kaku Gothic New はかなが少しゆったり見えるため、英数字とかなだけ微調整する。漢字は標準の字間を保つ。 */
.latin-token{
  letter-spacing:.018em;
}
.kana-token{
  letter-spacing:-.014em;
}

.accent{background:var(--grade);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{margin:0 0 18px;color:var(--teal-300);font-family:var(--heading-sans);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  padding:15px clamp(20px,5vw,64px);background:rgba(18,20,23,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;width:fit-content}
.brand-wm{height:46px;width:auto;display:block}
.nav-links{display:flex;gap:22px;color:var(--muted);font-size:.92rem;font-weight:700;justify-self:end}
.nav-links a:hover{color:var(--teal-300)}
.language-switch{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.language-button{min-width:64px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:800;cursor:pointer}
.language-button.active{background:var(--teal);color:#fff}

/* ===== Sections ===== */
.section{padding:clamp(64px,8vw,116px) clamp(20px,6vw,80px);border-top:1px solid var(--line)}
/* セクションは --bg で統一。カード類を --surface にして浮かせる（Concept のみ別デザイン） */
.section-heading{max-width:820px;margin:0 auto clamp(34px,4vw,52px)}
.section-heading h2{font-size:clamp(1.8rem,3.3vw,2.9rem)}
.section-lead{margin:18px 0 0;color:var(--text-body);font-size:clamp(1.04rem,1.4vw,1.2rem);max-width:680px}
/* WORKFLOW セクションのみ、下部 safety-note と横幅を揃える（Jun 指示 2026-07-10） */
.workflow .section-lead{max-width:840px}

/* ===== Hero（明朝見出し） ===== */
.hero{padding:clamp(46px,6vw,84px) clamp(20px,6vw,80px) clamp(56px,6vw,96px)}
.hero-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.05fr);gap:clamp(36px,5vw,72px);align-items:start;margin-top:clamp(30px,4vw,46px)}
.hero-copy{max-width:600px}
.hero-title-row{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.hero-icon{width:clamp(72px,7vw,96px);height:auto;flex:0 0 auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.4))}
.hero h1{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.18;color:var(--ink-soft)}
.hero h1 > span{display:inline-block;white-space:nowrap}
/* 英語版ヒーロー：日本語版に近い font-size で 1 行表示。hero-copy の max-width:600px 制約を
   撤去して h1 が 1fr カラム全幅を使えるように（.hero-lead は個別に max-width を維持）。
   1 行に収まらなければ自然折り返し許容（Jun 判断）。 */
html[lang="en"] .hero-copy{max-width:none}
html[lang="en"] .hero-copy .hero-lead{max-width:580px}
html[lang="en"] .hero h1{font-size:clamp(2rem,3.9vw,3.6rem);line-height:1.25}
html[lang="en"] .hero h1 > span{display:inline;white-space:normal}
html[lang="en"] .hero h1 > span:nth-child(2)::before{content:" "}
/* 英語版コンセプト見出し：小文字が多く日本語より小さく見えるため font-size を約 15% 引き上げ */
html[lang="en"] .concept h2{font-size:clamp(2.2rem,3.9vw,3.4rem)}
.hero-lead{max-width:580px;margin:16px 0 0;color:var(--text-body);font-size:clamp(1.08rem,1.5vw,1.24rem)}
.hero-copy .hero-lead:first-child{margin-top:0}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;margin-top:34px}
.app-store-badge{display:inline-flex;border-radius:9px}
.app-store-badge img{height:52px;width:auto;display:block}
.app-store-badge:hover{opacity:.86}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:34px}
/* trust ピルを .safety-note と同じ色使いに揃える（背景・ボーダー・タイトル文字色）：
   border rgba(56,182,189,.34) / background rgba(56,182,189,.07) / color var(--teal-300)
   ＝ safety-note h3 と同じティール系（Jun 指示 2026-07-10） */
.trust-row > span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid rgba(56,182,189,.34);border-radius:999px;background:rgba(56,182,189,.07);color:var(--teal-300);font-size:.86rem;font-weight:700;white-space:nowrap}
.hero-visual{position:relative;display:grid;place-items:center}
/* MacBook モックアップ（CSS・横長／画面アスペクトは実機 14" の 3024:1964≈3:2） */
.macbook{position:relative;width:100%;max-width:700px;margin:0 auto;filter:drop-shadow(0 26px 54px rgba(0,0,0,.5))}
.mb-bezel{display:block;width:100%;height:auto;position:relative;z-index:2;pointer-events:none}
/* 画面カットアウト（macbook-bezel.png 実測％）に背後からスクショ/プレースホルダを敷く */
.mb-screen{position:absolute;left:9.02%;top:2.76%;width:81.96%;height:87.35%;z-index:1;overflow:hidden;border-radius:6px;display:grid;place-items:center;background:
  radial-gradient(120% 100% at 20% 0%, rgba(56,182,189,.22), transparent 55%),
  radial-gradient(120% 100% at 100% 100%, rgba(222,139,62,.26), transparent 55%),
  linear-gradient(160deg,#1a2226,#221d1a)}
.mb-screen img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Concept（明朝・アイブローなし・風景写真を薄く敷く別デザイン） ===== */
.concept{position:relative;overflow:hidden;background:#0E1417;
  background-image:url(assets/concept-bg.jpg);background-size:cover;background-position:76% center;
  min-height:820px;display:flex;flex-direction:column}
/* 狭幅では右端固定（サーファー・夕焼けを残す）＝position:right。黒フェードは約30%＝空の光を残しつつ、テキストは下の text-shadow で可読性を確保。 */
.concept::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg, rgba(12,17,20,.29) 0%, rgba(12,17,20,.26) 48%, rgba(12,17,20,.19) 80%, rgba(12,17,20,.14) 100%),
  linear-gradient(180deg, rgba(12,17,20,.17) 0%, rgba(12,17,20,.09) 30%, rgba(12,17,20,.17) 100%)}
/* 水平線（=セクション縦中央）基準：上段中央に見出し・下段中央に本文 */
.concept-inner{position:relative;z-index:1;flex:1;display:grid;grid-template-rows:1fr 1fr;
  width:100%;max-width:900px;margin:0;align-self:flex-start;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.concept h2{font-size:clamp(1.9rem,3.4vw,3rem);color:var(--ink-soft);align-self:end;margin-bottom:clamp(18px,3vw,42px)}
.concept h2 > span{display:inline-block}
.concept-body{color:var(--text-body);font-size:clamp(1.08rem,1.5vw,1.24rem);margin:clamp(10px,2vw,24px) 0 0;max-width:min(560px,48vw);align-self:start;justify-self:start}
.concept-pull{margin:30px 0 4px;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.45;max-width:820px;color:var(--ink-soft)}

/* ===== Workflow（ゴシック） ===== */
/* WORKFLOW A案：カード枠を全撤去したタイポ主体の流れ。
   LrC ブロック（自作 LrC バッジ + 見出し + 本文 + 3 サブステップ）と Filmator ブロック
   （Filmator ロゴ + 見出し + 本文）を対に配置。バッジは同サイズ 56px の角丸で、
   LrC は Lucide と同じ色使い（teal-300）テキスト、Filmator は自社ロゴ画像。
   順序矢印は撤去し、縦の並びだけで LrC → Filmator の流れを示す。 */
.workflow-flow{max-width:720px;margin:0 auto;display:grid;gap:clamp(36px,5vw,56px)}
.wf-app{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.wf-app-badge{width:56px;height:56px;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);border:1px solid rgba(255,255,255,.14);color:var(--teal-300);flex-shrink:0;font-family:var(--heading-sans);font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.wf-app-badge.filmator{padding:0;overflow:hidden}
.wf-app-badge.filmator img{width:100%;height:100%;display:block;object-fit:cover}
.wf-app-body > h3{margin:6px 0 8px;font-family:var(--heading-sans);font-weight:700}
.wf-app-body > p{margin:0;color:var(--muted)}
.wf-substeps{display:grid;gap:clamp(18px,2.6vw,26px);margin-top:clamp(20px,3vw,32px)}
.wf-sub{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
/* アイコンタイルは Filmator アイコン（リキッドグラスの縁の光）に寄せて明るめボーダー */
.wf-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);border:1px solid rgba(255,255,255,.14);color:var(--teal-300);flex-shrink:0}
.wf-icon svg{width:20px;height:20px}
.wf-sub-text h4{margin:0 0 4px;font-family:var(--heading-sans);font-weight:700;font-size:1rem}
.wf-sub-text p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.safety-note{max-width:840px;margin:clamp(48px,6vw,72px) auto 0;padding:22px 24px;border:1px solid rgba(56,182,189,.34);border-radius:14px;background:rgba(56,182,189,.07)}
.safety-note h3{margin:0 0 8px;color:var(--teal-300)}
.safety-note p{margin:0;color:var(--muted)}

/* ===== App screenshot（Workflow / Features）
   背景色を surface-2 に上げて「本文背景（--bg 黒）→ 板（--surface-2）→ ダークな Filmator UI」の
   繋ぎ役に。ドロップシャドウは撤去してレイヤー感を軽くする（Jun 指示 2026-07-09）。 */
.app-shot{position:relative;max-width:1040px;margin:0 auto clamp(32px,4vw,48px);border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--surface-2)}
.app-shot img{display:block;width:100%;height:auto}
/* FEATURES 3 グループの .app-shot にティール色グロー + 淡いティール border。
   border-color は初期 .featured-plan .4 の 75% ＝ .3、box-shadow は Pro プラン初期と同値 .12
   に落ち着かせる（Jun 確定 2026-07-10）。WORKFLOW セクションのスクショは撤去したため、
   .workflow .app-shot への指定は削除。 */
/* グローは背景明化（2026-07-10）で広がりすぎに見えたため範囲半分・強さ弱めに */
.feature-group .app-shot{border-color:rgba(56,182,189,.3);box-shadow:0 12px 30px rgba(28,140,146,.09)}

/* ===== Features（ゴシック・3 画面 × 3 ボックス／グループ） =====
   各 .feature-group は「スクショ + 3 カード」の 1 セット。Export は書き出しダイアログのみで
   縦横比が縦長のため .feature-group.export で .app-shot の max-width を狭くする。 */
.feature-group{max-width:1080px;margin:0 auto clamp(56px,7vw,88px)}
.feature-group:last-child{margin-bottom:0}
/* 各グループのスクショ左上に置く小見出し（ブラウズ / エディット / 書き出し）。
   max-width をスクショと揃え margin auto で中央寄せ→視覚的にはスクショ左端に整列 */
.feature-group-label{max-width:1040px;margin:0 auto clamp(12px,1.4vw,16px);font-family:var(--heading-sans);font-weight:700;font-size:clamp(1.3rem,1.9vw,1.55rem);line-height:1.3;color:var(--ink-soft);letter-spacing:.01em}
.feature-group .app-shot{margin-bottom:clamp(24px,3vw,36px)}
/* テキストカード 3 枚の合計幅をスクショ（.app-shot max-width:1040px）と左右揃えに */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1040px;margin:0 auto}
.feature-card{padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.feature-card h3{margin:0 0 10px}
.feature-card p{margin:0;color:var(--muted)}

/* ===== Pricing（ゴシック） ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:840px;margin:0 auto}
.plan-card{padding:clamp(26px,4vw,38px);background:var(--surface);border:1px solid var(--line);border-radius:16px}
.featured-plan{border-color:rgba(56,182,189,.4);box-shadow:0 24px 60px rgba(28,140,146,.12)}
/* Pro が 1 行になったため 2 行分の min-height 予約を撤去（Free と説明文位置が揃う） */
.plan-name{font-family:var(--heading-sans);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.3;margin:0 0 14px;white-space:pre-line}
/* Pro の価格は同一行の右端に寄せる（プラン名 左 / 価格 右） */
.plan-name-priced{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.plan-body{margin:0;color:var(--muted)}

/* ===== FAQ（ゴシック） ===== */
.qa-list{max-width:820px;margin:0 auto;display:grid;gap:10px}
.qa-list details{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.qa-list summary{position:relative;display:block;padding:18px 52px 18px 20px;font-family:var(--heading-sans);font-weight:700;line-height:1.5;cursor:pointer;list-style:none;color:var(--ink-soft)}
.qa-list summary::-webkit-details-marker{display:none}
.qa-list summary::after{position:absolute;top:50%;right:20px;width:9px;height:9px;border-right:2px solid var(--teal-300);border-bottom:2px solid var(--teal-300);content:"";transform:translateY(-60%) rotate(45deg);transition:transform .16s ease}
.qa-list details[open] summary::after{transform:translateY(-35%) rotate(225deg)}
.qa-list p{margin:0;padding:0 20px 20px;color:var(--muted)}
.inline-mail-link{color:var(--teal-300);font-weight:800;margin-left:.3em}

/* ===== Privacy（ゴシック・1 段。真実の源 = Filmator/docs/09 §6・JT-250） ===== */
.policy-panel{max-width:820px;margin:clamp(28px,4vw,40px) auto 0;padding:clamp(28px,4vw,40px);background:var(--surface);border:1px solid var(--line);border-radius:14px}
.policy-panel h3{margin:0 0 8px;color:var(--ink-soft)}
.policy-panel h3 + p{margin:0 0 24px}
.policy-panel p{margin:0;color:var(--muted)}
.policy-panel p:last-child,.policy-panel p.updated{margin-bottom:0}
.policy-panel p.updated{margin-top:28px;font-size:.84rem;color:var(--muted)}

/* ===== Footer ===== */
.site-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:32px clamp(20px,6vw,80px);background:#101216;border-top:1px solid var(--line)}
.footer-left{display:flex;align-items:center;gap:clamp(24px,5vw,52px)}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-wm{height:30px;width:auto;opacity:.92}
.site-footer small{color:var(--muted);font-size:.82rem}
.footer-social{display:inline-flex;gap:16px}
.footer-social-link{color:var(--muted);font-size:.9rem;font-weight:700}
.footer-social-link:hover{color:var(--teal-300)}
.footer-links{display:inline-flex;flex-wrap:wrap;gap:18px;justify-content:flex-end;color:var(--muted);font-size:.9rem;font-weight:700}
.footer-links a:hover{color:var(--teal-300)}

/* ===== Responsive ===== */
@media (max-width:920px){
  .site-header{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .hero-body{grid-template-columns:1fr;gap:32px}
  /* 1 カラム積みでは見出し直後に MacBook を見せ、テキスト・CTA・ピルを後ろへ（Jun 指示 2026-07-12） */
  .hero-visual{order:-1}
  .hero-copy,.hero-lead{max-width:none}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-header{padding:12px 16px;gap:10px}
  .brand-wm{height:38px}
  .hero h1{font-size:clamp(2rem,8.6vw,2.9rem)}
  /* Concept 本文は右端まで使う（サーファーへの重なりは許容・text-shadow で可読性確保済み） */
  .concept-body{max-width:none}
  /* Concept / WORKFLOW 見出しは明示改行をやめて自然折り返しに＝本文と同じく右端まで使う
     （狭幅で 1 行目が入り切らず改行が乱れる・左半分に寄るため） */
  #workflow-title br,#concept-title br{display:none}
  #workflow-title > span:last-child::before,#concept-title > span:last-child::before{content:" "}
  #concept-title > span{display:inline}
  /* 全幅は保ちつつ最終行の 1 文字ぶら下がり（「す」等）だけ回避（非対応ブラウザは自然折り返し） */
  #workflow-title,#concept-title{text-wrap:pretty}
  .feature-grid{grid-template-columns:1fr}
  .workflow-step{padding:18px}
  .app-store-badge{width:100%;justify-content:center}
  .site-footer{flex-direction:column}
  .footer-left{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-links{justify-content:flex-start}
  .policy-panel{padding:24px}
}