/* Clapless-Studio LP — 生成物です。直接編集しないでください（tools/build_lp.py） */
/* 既定は /pro（と /pro-b）のテーマ。
   /event と /beginner は body のクラスで上書きします（下）。
   **色を直に書かないこと。**新しい色が要るときは、まずここに変数を足す。 */
:root{
  --bg:#121214; --card:#222226; --line:#35353b;   /* G（8/28）：card を +6 明るく */
  --card-shadow:none;
  --ink:#f2f2f4; --ink-soft:#9a9aa0; --ink-dim:#8a8a91;   /* G（8/28）：card を明るくしたぶん dim も上げ AA を維持 */
  --acc:#0a84ff; --acc-hi:#3395ff; --acc-bg:rgba(10,132,255,.14);
  --acc-ink:#fff;                       /* アクセント地の上に載る文字 */
  --note-line:#2f6fb5;                  /* 注記ボックスの囲み線（9/4）。地 #121214 に対し 3.58:1 */
  --fig-1:#1c1c1f; --fig-2:#161618;     /* ヒーロー図の下地 */
  --r:12px; --shadow:0 8px 24px rgba(0,0,0,.35);
  --maxw:1080px;
  --sec-pad:120px; --fs-body:17px; --fs-h1:56px;
  /* S7（明色面）。ダークの中で料金だけを明るくして区切っています */
  --lt-bg:#f5f5f7; --lt-card:#fff; --lt-line:#e2e2e6;
  --lt-ink:#1d1d1f; --lt-soft:#6e6e73;
  --lt-acc:#0062cc;                     /* 白地＋白文字で AA を満たす青 */
  --lt-acc-bg:rgba(0,98,204,.08);
  --lt-btn2-line:#d0d0d5; --lt-off-bg:#f5f5f7; --lt-off-ink:#8e8e93;
}

/* /event：式典・パーティの質感。**シャンパンの明るいベージュ基調**。
   はじめは温かいダークにしていたが、`pro` と明度がほぼ同じで差が出なかったため
   2026年8月27日に明るい基調へ変更した（伊藤様の判断）。
   `beginner` の白（無彩色 #fbfaf8）とは色味で分ける。 */
.t-event{
  --bg:#f9f4e8; --card:#fffefa; --line:#e0d3b6;   /* G（8/28）：地を沈めず card 側を白へ寄せた */
  --card-shadow:0 1px 2px rgba(90,72,28,.06), 0 10px 24px rgba(90,72,28,.07);
  --ink:#241d10; --ink-soft:#5f5744; --ink-dim:#786d52;   /* 8/28：13px の補足文で AA を満たす濃さへ */
  --acc:#8a6d1f;                        /* 白文字を載せて AA を満たす金茶 */
  --acc-hi:#6f5716; --acc-bg:rgba(138,109,31,.10);
  --acc-ink:#fff;
  --note-line:var(--acc);               /* 明るい地では金茶がそのまま馴染む（4.46:1） */
  --fig-1:#fffcf5; --fig-2:#f5efe0;
  --shadow:0 8px 24px rgba(60,48,20,.12);
  --r:14px; --sec-pad:132px; --fs-h1:52px;
  --lt-bg:#efe7d3; --lt-card:#fffcf5; --lt-line:#e0d5bd;
  --lt-ink:#241d10; --lt-soft:#5f5744;
  --lt-acc:#8a6d1f; --lt-acc-bg:rgba(138,109,31,.10);
  --lt-btn2-line:#d3c8ad; --lt-off-bg:#e8e0cb; --lt-off-ink:#8d8163;
}

/* /beginner：はじめての方に向けた白基調。余白と文字を大きく、角丸も大きく。
   **ここだけ地が明るいので、料金セクション（S7）は逆にわずかに沈めて区切ります。** */
.t-beginner{
  --bg:#f4f2ee; --card:#fff; --line:#dedbd4;      /* G（8/28）：白い card を出すため地を沈めた */
  --card-shadow:0 1px 2px rgba(20,20,25,.05), 0 10px 24px rgba(20,20,25,.06);
  --ink:#1a1a1c; --ink-soft:#55555c; --ink-dim:#6e6e75;   /* 8/28：13px の補足文で AA を満たす濃さへ */
  --acc:#0a68ca; --acc-hi:#0959ad; --acc-bg:rgba(10,104,202,.09);  /* G で地を沈めたぶん、青も濃くして AA（4.88:1）を確保 */
  --acc-ink:#fff;
  --note-line:var(--acc);               /* 同上（4.88:1） */
  --fig-1:#fff; --fig-2:#f7f6f3;
  --shadow:0 8px 24px rgba(20,20,25,.10);
  --r:16px; --sec-pad:132px; --fs-body:18px; --fs-h1:48px;
  --lt-bg:#f0eee9; --lt-card:#fff; --lt-line:#dedbd4;
  --lt-ink:#1a1a1c; --lt-soft:#55555c;
  --lt-acc:#0062cc; --lt-acc-bg:rgba(0,98,204,.08);
  --lt-btn2-line:#cfccc5; --lt-off-bg:#e8e5df; --lt-off-ink:#8a8780;
}
/* 地が明るいページ（event / beginner）は、背景色の差だけでは料金の区切りが弱い。
   **明るくして区切る**が使えないので、逆にわずかに沈めて罫線で挟みます。 */
.t-beginner .sec-light,
.t-event .sec-light{border-top:1px solid var(--lt-line);
                    border-bottom:1px solid var(--lt-line)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium",
    "Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:var(--fs-body); line-height:1.8; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--acc); text-decoration:none}
a:hover{color:var(--acc-hi); text-decoration:underline}
b,strong{font-weight:700}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}
.sec{padding:var(--sec-pad) 0}
.sec + .sec{padding-top:var(--sec-pad)}
/* A（8/28）：中黒（・）の前後が空いて見えるので、和文の字幅を詰めます。
   本文には掛けません（長文で字送りが不揃いに見えるため、見出し系だけ）。 */
h1,h2,h3,.hd-logo,.btn,.price-name,.price-amt{font-feature-settings:"palt" 1}
h1,h2,h3{margin:0; font-weight:700}
/* B（8/28）：H1 は行ごとに `.nb`（折り返し禁止）で括っています。そのままだと
   狭い画面ではみ出すので、**1行の最大文字数（13.4字）から上限を計算**します。
   これで中黒の直後で折れることも、横スクロールが出ることもありません。 */
h1{font-size:min(var(--fs-h1), calc((100vw - 80px) / 13.4));
   line-height:1.35; letter-spacing:-.02em; text-wrap:balance}
.nb{white-space:nowrap}
/* `.hero p` に負けるので、必ず `.hero` を前に付けること（2026年9月9日）。 */
.hero .hero-eyebrow{color:var(--acc); font-size:14px; letter-spacing:.04em;
  font-weight:600; margin:0 0 14px}
.stories{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:32px}
.story h3{font-size:19px; margin:0 0 14px}
.story p{color:var(--ink-soft); line-height:1.95; margin:0 0 14px}
.story .story-lead{color:var(--ink); font-weight:500}
@media (max-width:760px){.stories{grid-template-columns:1fr; gap:32px}}
h2{font-size:36px; line-height:1.4; letter-spacing:-.01em; margin-bottom:24px}
h3{font-size:20px; line-height:1.5; margin-bottom:8px}
p{margin:0 0 16px}
.cap{font-size:13px; line-height:1.7; color:var(--ink-soft)}

/* ヘッダー */
/* **背景を必ず敷くこと。**透明のままだと、料金セクション（明色面）の上に
   重なったときにロゴと項目が白文字のまま白地に載って読めなくなります。
   1行目の background は color-mix 非対応ブラウザ向けの控えです。 */
.hd{position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center;
    background:var(--bg);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line); transition:background .2s}
.hd-in{max-width:var(--maxw); margin:0 auto; padding:0 40px; width:100%;
       display:flex; align-items:center; gap:32px}
.hd-logo{font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.01em}
.hd-logo:hover{text-decoration:none}
.hd-nav{display:flex; gap:24px; margin-left:auto}
.hd-nav a{color:var(--ink-soft); font-size:15px}
.hd-nav a:hover{color:var(--ink); text-decoration:none}
.hd-cta{margin-left:24px}

/* ボタン */
.btn{display:inline-flex; align-items:center; justify-content:center; height:56px;
     padding:0 32px; border-radius:var(--r); font-size:17px; font-weight:700;
     border:1px solid transparent; cursor:pointer; white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--acc); color:var(--acc-ink)}
.btn-primary:hover{background:var(--acc-hi); color:var(--acc-ink)}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-secondary:hover{color:var(--ink); border-color:var(--ink-dim)}
.btn-sm{height:40px; padding:0 20px; font-size:15px}
.btn-off{background:var(--card); color:var(--ink-dim); border-color:var(--line); cursor:default}
.btn-off:hover{background:var(--card); color:var(--ink-dim)}

/* ヒーロー */
.hero{padding:64px 0 72px}
/* 8/28：ヒーローの写真（`/event` `/beginner`）。**背景には敷きません。**
   一度スクリムで沈める形にしたところ「何の写真か分からない」となったため、
   **文字の隣に、原寸の濃さで置く**形に変えました（伊藤様の判断）。
   **写真の上に文字を載せないこと。**載せると、また薄くする必要が出ます。 */
.hero-photos{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:40px}
.hero-photos img{width:100%; height:150px; object-fit:cover; display:block;
                 border-radius:var(--r); box-shadow:var(--card-shadow)}
.hero-photos img:first-child{grid-column:1 / -1; height:230px}
.hero p{color:var(--ink-soft); margin:24px 0 0; max-width:620px}
/* C（8/28）：サブコピーは3行とも同じ強さだった。**1行目＝主張、2行目以降＝補足**に分ける。
   2行目以降も `--ink-dim` は使わない（明るい地で AA を割るため `--ink-soft` まで）。 */
.hero .hp{margin-top:20px}
.hero .hp .l1{display:block; color:var(--ink); font-size:1.06em; font-weight:500;
              line-height:1.7; margin-bottom:6px}
.hero .hp .l2{display:block; color:var(--ink-soft); font-size:.94em; line-height:1.75}
.hero .cap{max-width:620px}
.hero .btns{display:flex; gap:16px; margin:32px 0 20px; flex-wrap:wrap}
.hero-fig{margin:44px 0 0; padding:28px 32px 24px; border:1px solid var(--line);
  border-radius:var(--r); background:linear-gradient(180deg,var(--fig-1) 0%,var(--fig-2) 100%);
  box-shadow:var(--shadow)}

/* 1024px 以上でだけ、文字と写真を左右に分けます。
   **H1 は 42px 固定。**`.nb`（折り返し禁止）の1行が左カラムからはみ出さない上限です
   （左カラム約547px ÷ 12.4字）。ここを大きくするなら、カラム幅も広げること。 */
@media (min-width:1024px){
  .hero.has-photos > .wrap{display:grid; grid-template-columns:1.15fr .85fr;
                           gap:48px; align-items:center}
  .hero.has-photos h1{font-size:42px}
  .hero.has-photos .hero-photos{margin-top:0}
  .hero.has-photos .hero-fig{grid-column:1 / -1; margin-top:36px}
}

/* Before / After のタイムライン図（設計書 5-4） */
.wf{width:100%; height:auto; display:block; overflow:visible}

/* デモ動画（S4） */
.demo{margin-top:48px}
.demo video,.demo img{border-radius:var(--r); box-shadow:var(--shadow); width:100%}
.demo-poster{display:none}
.demo .cap{margin-top:12px}

/* カード */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:32px;
       box-shadow:var(--card-shadow)}
.card p{color:var(--ink-soft); margin:0}
.card .sub{display:block; margin-top:12px; font-size:13px; color:var(--ink-dim); line-height:1.7}

/* S3 */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px 48px}
.grid2 .t{font-weight:700; margin-bottom:4px}
.grid2 .d{color:var(--ink-soft); margin:0}

/* S4（9/9：画面図が入ったので、1ステップ1行・文と画像を左右交互にした）*/
.steps{display:block}
.step{display:grid; grid-template-columns:1fr 600px; gap:40px; align-items:center; margin-top:48px}
.step:first-child{margin-top:32px}
.step:nth-child(even){grid-template-columns:600px 1fr}
.step:nth-child(even) .step-txt{order:2}
.step .no{font-size:13px; font-weight:700; color:var(--acc); letter-spacing:.08em; margin-bottom:8px}
.step p{color:var(--ink-soft); margin:0}
.step-img{width:100%; height:auto; display:block;
          border-radius:var(--r); box-shadow:var(--shadow)}

/* 比較表 */
.cmp{width:100%; border-collapse:collapse; margin-top:32px; font-size:16px}
.cmp th,.cmp td{padding:16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.cmp thead th{font-size:14px; color:var(--ink-soft); font-weight:400; border-bottom:1px solid var(--line)}
.cmp td:nth-child(2){color:var(--ink-dim)}
.cmp th:nth-child(3),.cmp td:nth-child(3){background:var(--card); border-left:2px solid var(--acc)}
.cmp thead th:nth-child(3){color:var(--ink); font-weight:700}
.cmp-wrap{overflow-x:auto}

/* S5b */
.box{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:32px}
.box p{margin:0; color:var(--ink-soft)}

/* S6 */
.env{display:grid; grid-template-columns:180px 1fr; gap:16px 24px; margin-top:8px}
.env dt{color:var(--ink-soft); font-size:15px}
.env dd{margin:0}

/* S7（明色面） */
.sec-light{background:var(--lt-bg); color:var(--lt-ink)}
.sec-light h2{color:var(--lt-ink)}
.sec-light .lead{color:var(--lt-soft); margin-bottom:40px}
.prices{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}   /* 8/28：start だと高さが揃わず、下端と購入ボタンの位置がばらつく。`.price .btn{margin-top:auto}` はこの stretch を前提にした指定 */
.price{background:var(--lt-card); border:1px solid var(--lt-line); border-radius:var(--r); padding:32px;
       display:flex; flex-direction:column; min-height:100%}
.price.reco{border-color:var(--lt-acc)}   /* 8/28：8px 持ち上げるのをやめた（上端が揃わずズレて見えるため）。強調は枠色とバッジで足りる */
.price .badge{display:inline-block; background:var(--lt-acc-bg); color:var(--lt-acc);
              font-size:13px; font-weight:700; border-radius:999px; padding:4px 12px; margin-bottom:12px}
.price .name{font-weight:700; font-size:20px; margin-bottom:8px}
.price .amt{font-weight:700; font-size:48px; line-height:1.1; letter-spacing:-.02em}
.price .amt .u{font-size:17px; font-weight:400; letter-spacing:0}
.price .tax{font-size:13px; color:var(--lt-soft); margin-bottom:20px}
/* プランの一言。**どの機能が付くかではなく、どんな撮り方の人かを書く。**
   箱書きだけでは、どちらを選ぶ人なのかが読み取れない（2026年9月14日）。 */
.price .for{font-size:13.5px; color:var(--lt-soft); line-height:1.6; margin:-4px 0 14px}
.price ul{list-style:none; padding:0; margin:0 0 24px; font-size:16px}
.price li{padding-left:20px; position:relative; margin-bottom:8px; line-height:1.7}
.price li::before{content:"・"; position:absolute; left:0; color:var(--lt-soft)}
.price .btn{margin-top:auto; width:100%}
.sec-light .btn-secondary{color:var(--lt-ink); border-color:var(--lt-btn2-line)}
.sec-light .btn-primary{background:var(--lt-acc); color:#fff}
.sec-light .btn-primary:hover{background:var(--lt-acc); color:#fff; filter:brightness(1.12)}
.sec-light .btn-off{background:var(--lt-off-bg); color:var(--lt-off-ink); border-color:var(--lt-line)}
.notes{margin-top:32px; font-size:13px; line-height:1.9; color:var(--lt-soft)}
.notes p{margin:0}

/* S8 */
.points{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.points .t{font-weight:700; margin-bottom:8px}
.points p{color:var(--ink-soft); margin:0}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
             font-weight:700; font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; position:absolute; right:0; top:20px; color:var(--ink-soft);
                    font-weight:400}
.faq details[open] summary::after{content:"－"}
.faq .a{color:var(--ink-soft); padding:0 40px 20px 0; margin:0}

/* S10 */
.cta{text-align:center}
.cta p{color:var(--ink-soft)}
.cta .btn{margin:8px 0 16px}
.cross{margin-top:48px; padding-top:32px; border-top:1px solid var(--line);
       font-size:15px; color:var(--ink-soft); display:flex; gap:24px; justify-content:center;
       flex-wrap:wrap}

/* フッター */
.ft{border-top:1px solid var(--line); padding:64px 0 80px; font-size:15px; color:var(--ink-soft)}
.ft-links{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:32px}
.ft-name{font-weight:700; color:var(--ink); margin-bottom:16px}
.ft-sns{display:flex; gap:24px; flex-wrap:wrap; align-items:baseline; margin:-16px 0 32px}
.ft-sns-h{font-size:13px; color:var(--ink-dim)}
.ft-info{margin-bottom:32px; line-height:1.9}
.ft-note{display:block; margin-top:6px; font-size:13px; color:var(--ink-dim)}
.ft-tm{font-size:13px; line-height:1.9; color:var(--ink-dim)}
.ft-cr{margin-top:32px; font-size:13px; color:var(--ink-dim)}

/* 法務ページ */
.doc{padding:64px 0 96px}
.doc h1{font-size:36px; margin-bottom:40px}
.doc h2{font-size:22px; margin:48px 0 16px}
.doc h3{font-size:18px; margin:32px 0 12px}
.doc p,.doc li{color:var(--ink-soft)}
.doc ol,.doc ul{padding-left:1.4em; margin:0 0 16px}
.doc li{margin-bottom:8px}
.doc table{width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:16px}
.doc th,.doc td{border:1px solid var(--line); padding:12px 16px; text-align:left; vertical-align:top}
.doc th{background:var(--card); color:var(--ink); font-weight:700; white-space:nowrap}
.doc td{color:var(--ink-soft)}
/* 9/4：左辺だけのアクセント線＋カード地をやめ、四辺を細い青線で囲む形にした
   （伊藤様のご指摘。地を残すと囲みが弱く見えるため、地は外して線だけで見せる）。
   線の色は --acc を直に使わず、地に馴染む濃さの --note-line。 */
.doc .note{border:1px solid var(--note-line);
           border-radius:var(--r); padding:20px 24px; margin:16px 0 24px}
.doc .note p:last-child{margin-bottom:0}
.doc figure.shot{margin:24px 0 32px}
.doc figure.shot img{display:block; width:100%; height:auto;
                     border:1px solid var(--line); border-radius:var(--r)}
.doc figure.shot figcaption{margin-top:8px; font-size:14px; color:var(--ink-dim)}
.doc hr{border:0; border-top:1px solid var(--line); margin:48px 0}
.todo{background:rgba(240,180,81,.14); color:#f0b451; border-radius:4px; padding:2px 6px}
.doc-back{margin-top:64px}

/* タブレット */
@media (max-width:1080px){
  .wrap,.hd-in{padding:0 32px}
  .sec{padding:96px 0}
  h1{font-size:44px}
  h2{font-size:32px}
  .cards,.points{grid-template-columns:repeat(2,1fr); gap:20px}
  .step,.step:nth-child(even){grid-template-columns:1fr 52%; gap:32px}
  .step:nth-child(even){grid-template-columns:52% 1fr}
  .prices{grid-template-columns:repeat(2,1fr); gap:20px}
  .price-free{grid-column:1 / -1}
}
/* 更新履歴（2026-10-13）。本編の最後・フッターの手前に置く小さな欄 */
.news{padding:56px 0}
.news h2{font-size:22px; margin-bottom:12px}
.news ul{list-style:none; margin:0; padding:0}
.news li{display:grid; grid-template-columns:9.5em 1fr; gap:16px; padding:14px 0;
  border-top:1px solid var(--line); font-size:14px; line-height:1.8}
.news time{color:var(--ink-soft)}
.news a{color:var(--acc)}
/* モバイル */
@media (max-width:720px){
  .news li{grid-template-columns:1fr; gap:2px}
  body{font-size:16px}
  .wrap,.hd-in{padding:0 20px}
  .sec{padding:72px 0}
  h1{font-size:min(28px, calc((100vw - 40px) / 13.4))}
  h2{font-size:26px; margin-bottom:20px}
  h3{font-size:18px}
  .hd-nav{display:none}
  .hd-cta{margin-left:auto}
  .hero{padding:40px 0 64px}
  .hero .btns{flex-direction:column; gap:12px}
  .hero .btns .btn{width:100%}
  .hero-fig{margin-top:40px; padding:16px 16px 12px}
  .hero-photos img{height:110px}
  .hero-photos img:first-child{height:180px}
  .demo video{display:none}
  .demo-poster{display:block}
  .cards,.points,.grid2,.prices{grid-template-columns:1fr; gap:16px}
  .step,.step:nth-child(even){grid-template-columns:1fr; gap:16px; margin-top:32px}
  .step:nth-child(even) .step-txt{order:0}
  .card,.box,.price{padding:24px}
  .env{grid-template-columns:1fr; gap:4px 0}
  .env dd{margin-bottom:12px}
  .cta .btn{width:100%}
  .price-free{grid-column:auto}
  .doc h1{font-size:28px}
  .doc th{white-space:normal}
}