/* =========================================================================
   トップ（/）だけで使う部品。2026-10-09 の作り直しで足した
   誰が使うか → 約束 → コンテキスト → 選ぶ理由 → 導入事例 → リリースノートとお知らせ
   箱と影は使わず、上の罫線と余白で区切る
   ========================================================================= */

/* ---------- 誰が使うか ---------- */
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--part)}
.who{border-top:2px solid var(--n900);padding-top:var(--s-16)}
.who h3{font-family:var(--f-ja);font-weight:600;font-size:22px;line-height:1.5;color:var(--n900);letter-spacing:.01em}
.who .one{margin-top:var(--s-4);font-size:15px;color:var(--n600);line-height:1.85}
.who .lab{margin-top:var(--s-24);font-size:13px;font-weight:600;color:var(--n600);letter-spacing:.04em}
.who .qs{list-style:none;margin-top:var(--s-8);display:flex;flex-direction:column;gap:var(--s-12)}
.who .qs li{padding-left:var(--s-12);border-left:2px solid var(--p200);font-size:15px;line-height:1.85;color:var(--n900)}
.who .fix{margin-top:var(--s-16);padding-top:var(--s-16);border-top:1px solid var(--n200);font-size:14px;line-height:1.7;color:var(--n800)}
.who .fix b{display:block;font-size:13px;font-weight:600;color:var(--n600);letter-spacing:.04em}
.who .pre{margin-top:var(--s-8);font-size:13px;color:var(--n600);line-height:1.7}
.who .go{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-24);margin-top:var(--s-16)}


/* ---------- 約束 ---------- */
.promise + .promise{margin-top:var(--topic)}
.promise-copy{max-width:760px}
.promise-copy h3{font-family:var(--f-ja);font-weight:600;font-size:clamp(22px,2.4vw,26px);line-height:1.5;color:var(--n900);letter-spacing:.01em}
.promise-copy p{margin-top:var(--s-12);font-size:17px;line-height:1.85;color:var(--n800);letter-spacing:.02em}


/* ---------- コンテキスト ---------- */
/* 説明文を左、動画を右に並べる。動画は 960×540 の紙を 0.75 倍以上で置く（製品の 12px が 9px を下回らない）。
   列の 722px は枠線の 1px ずつを含む。列が取れない幅では、文の下に全幅で置く。並べるかは画面の幅ではなく、本文の列の幅で決める */
.ctx-row{container-type:inline-size}
@container (min-width:1062px){
  .ctx-row-in{display:grid;grid-template-columns:minmax(0,1fr) 722px;gap:var(--part);align-items:center}
  .ctx-row-in .sec-head{margin-bottom:0}
  .ctx-row-in .feat-motion{margin-top:0}
}
.ctx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--part);margin-top:var(--block)}
.ctx h3{font-family:var(--f-ja);font-weight:600;font-size:19px;line-height:1.5;color:var(--n900);padding-bottom:var(--s-12);border-bottom:2px solid var(--n900)}
.ctx dl{display:grid;grid-template-columns:8em minmax(0,1fr)}
.ctx dt,.ctx dd{padding:var(--s-16) 0;border-bottom:1px solid var(--n200);font-size:15px;line-height:1.85}
.ctx dt{font-weight:600;color:var(--n900)}
.ctx dd{color:var(--n800)}

/* ---------- 選ぶ理由 ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--part)}
.why{border-top:2px solid var(--n900);padding-top:var(--s-16)}
.why .k{font-size:13px;font-weight:600;color:var(--p600);letter-spacing:.06em}
.why h3{margin-top:var(--s-8);font-family:var(--f-ja);font-weight:600;font-size:20px;line-height:1.5;color:var(--n900);letter-spacing:.01em}
.why p{margin-top:var(--s-12);font-size:15px;line-height:1.85;color:var(--n800)}
.why .add{margin-top:var(--s-16);padding-top:var(--s-16);border-top:1px solid var(--n200);font-size:14px;line-height:1.7;color:var(--n800)}
.why .add b{display:block;font-size:13px;font-weight:600;color:var(--n600);letter-spacing:.04em}
.why .src{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;margin-top:var(--s-4);font-family:var(--f-en);font-size:14px;color:var(--n900)}
.why .src li:not(:last-child)::after{content:'／';margin:0 var(--s-4);color:var(--n400);font-family:var(--f-ja)}
.why .arrow-link{margin-top:var(--s-16)}

/* ---------- 導入事例（カードの中に複数のリンクを置くため、カード全体はリンクにしない） ---------- */
.case-card .case-body{display:flex;flex-direction:column;flex:1}
.case-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12);margin-top:var(--s-16);padding-top:var(--s-16);border-top:1px solid var(--n100)}
.case-nums .v{font-family:var(--f-en);font-weight:600;font-size:22px;line-height:1.3;color:var(--n900)}
.case-nums .v small{margin-left:2px;font-family:var(--f-ja);font-size:13px;font-weight:500;color:var(--n600)}
.case-nums .l{margin-top:var(--s-4);font-size:12.5px;line-height:1.7;color:var(--n600)}
.case-body .case-when{line-height:1.6;margin-top:var(--s-8);font-size:12px;color:var(--n400)}
.case-go{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-24);margin-top:auto;padding-top:var(--s-24)}

/* ---------- リリースノートとお知らせ ---------- */
.feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--part)}
.feed h3{font-family:var(--f-ja);font-weight:600;font-size:19px;line-height:1.5;color:var(--n900);padding-bottom:var(--s-12);border-bottom:2px solid var(--n900)}
.feed ol{list-style:none}
.feed li a{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:var(--s-12);padding:var(--s-16) 0;border-bottom:1px solid var(--n200);transition:color .15s ease}
.feed li a:hover{color:var(--p500)}
.feed time{font-family:var(--f-mono);font-size:13px;line-height:1.85;color:var(--n600);letter-spacing:.02em}
.feed .t{font-size:15px;line-height:1.85;color:inherit}
.feed .arrow-link{margin-top:var(--s-16)}

@media (max-width:960px){
  .who-grid,.why-grid{grid-template-columns:1fr;gap:var(--part)}
  .ctx-grid,.feed-grid{grid-template-columns:1fr;gap:var(--part)}
}
@media (max-width:760px){
  .promise + .promise{margin-top:var(--topic)}
  .ctx dl{grid-template-columns:6.5em minmax(0,1fr)}
  .case-nums{grid-template-columns:1fr;gap:var(--s-8)}
  .feed li a{grid-template-columns:1fr;gap:0}
}

/* =====================================================================
   静止の見本: proof-sql（トップの選ぶ理由「正しいか」のカードの中）
   見せること: 答えに付く思考プロセスを開いたところ。どのデータを参照し、どう集計したかが SQL で見える
   製品の事実（2026-10-08 時点の製品の画面）:
     - 思考プロセスの見出しは、時計の印・「思考プロセス」・「N ステップ · 完了」・開閉の印（開いていると上向き）。
       開くと右上に「すべて展開 / すべて閉じる」、その下に縦の線と手順の行（印の丸・札・一文・開閉の印）
     - 手順の行の札と印の色は、思考・ナレッジ検索・SQL 実行の3種で製品と同じ。一文は1行に収まらない分を「…」で切る
     - SQL 実行の行を開くと、「SQL」と「コピー」の帯、色付きの SQL（11.5px・行の高さ 1.75）、下の帯に「返却行数 N」。
       参照した表の名前や実行した場所は、SQL の中にしか出ない
   動画と同じく実行時間は出さない。例は約束の動画（ask-answer）と同じ営業の質問への答えで、
   返却行数 6 は受注予定月3つ×2時点（9月9日と10月9日）。確度 A・B を受注見込みとする定義は、この見本のための例
   段落と見出しの要素（p・h3）は使わない。置き場所のページの CSS が中に効くため
   ===================================================================== */
.ps{--ps-ink:#1d1a2e;--ps-mute:#6e6a80;--ps-line:#e7e5ee;--ps-soft:#f6f5f9;
  margin-top:20px;overflow:hidden;border:.5px solid rgba(0,0,0,.12);border-radius:9px;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.03);
  font-family:'Noto Sans JP',sans-serif;font-size:13px;line-height:1.5;color:var(--ps-ink);text-align:left;}
.ps *{box-sizing:border-box;}
.ps-h{display:flex;align-items:center;gap:8px;padding:8px 12px;}
.ps-clock{flex:none;opacity:.5;}
.ps-t{font-size:12px;font-weight:500;}
.ps-s{font-size:11px;color:var(--ps-mute);}
.ps-chev{flex:none;width:12px;height:12px;margin-left:auto;fill:none;stroke:var(--ps-mute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ps-h .ps-chev{width:14px;height:14px;}
.ps-chev.is-open{transform:rotate(180deg);}
.ps-b{padding:12px;border-top:1px solid rgba(0,0,0,.06);}
.ps-all{display:flex;justify-content:flex-end;gap:8px;margin-bottom:4px;font-size:11px;color:var(--ps-mute);}
.ps-steps{position:relative;padding-left:36px;}
.ps-steps::before{content:"";position:absolute;left:17px;top:16px;bottom:16px;width:1px;background:var(--ps-line);}
.ps-st{position:relative;margin-bottom:2px;}
.ps-st.is-open{margin:2px 0 6px;}
.ps-dot{position:absolute;z-index:1;left:-28px;top:7px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:1.5px solid;border-radius:50%;font-size:9px;line-height:1;}
.ps-row{display:flex;align-items:center;gap:6px;padding:7px 10px;}
.ps-cat{flex:none;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.02em;white-space:nowrap;}
.ps-m{flex:1;min-width:0;overflow:hidden;font-size:12px;color:var(--ps-mute);white-space:nowrap;text-overflow:ellipsis;}
.ps-dot.is-think{background:#EEEDFE;border-color:#AFA9EC;color:#534AB7;}.ps-cat.is-think{background:#EEEDFE;color:#3C3489;}
.ps-dot.is-kn{background:#E6F1FB;border-color:#85B7EB;color:#185FA5;}.ps-cat.is-kn{background:#E6F1FB;color:#0C447C;}
.ps-dot.is-sql{background:#EAF3DE;border-color:#97C459;color:#3B6D11;}.ps-cat.is-sql{background:#EAF3DE;color:#27500A;}
/* 開いた手順（製品と同じく枠で囲み、行の下に詳細） */
.ps-open{overflow:hidden;border:1px solid var(--ps-line);border-radius:8px;background:#fff;}
.ps-open .ps-row{padding:8px 12px;border-bottom:1px solid var(--ps-line);}
.ps-d{padding:10px 12px;}
.ps-sql{overflow:hidden;border:1px solid var(--ps-line);border-radius:5px;}
.ps-bar,.ps-meta{display:flex;align-items:center;gap:16px;padding:6px 10px;background:var(--ps-soft);}
.ps-bar{justify-content:space-between;border-bottom:1px solid var(--ps-line);}
.ps-meta{border-top:1px solid var(--ps-line);font-size:11px;color:var(--ps-mute);}
.ps-meta b{font-weight:500;color:rgba(29,26,46,.8);}
.ps-lang{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:10px;letter-spacing:.05em;color:var(--ps-mute);}
.ps-copy{font-size:10px;color:var(--ps-mute);}
/* SQL（製品の色付けの配色に合わせた） */
.ps-code{margin:0;padding:10px 12px;overflow-x:auto;background:#fafafa;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11.5px;line-height:1.75;color:#383a42;white-space:pre;}
.ps-code .ps-k{color:#a626a4;}
.ps-code .ps-f{color:#4078f2;}
.ps-code .ps-str{color:#50a14f;}
.ps-code .ps-n{color:#b76b01;}
.ps-code .ps-o{color:#4078f2;}
.ps-code .ps-u{color:#383a42;}
/* カードの列が狭いとき（3列のまま画面が 961〜1100px 前後）は、SQL を 10px にし、縦の線の字下げを詰める。
   見本なので横のスクロールバーは出さない */
.ps{container-type:inline-size;}
.ps-code{overflow:hidden;}
@container (max-width:330px){
  .ps-code{font-size:10px;padding:8px 10px;}
  .ps-steps{padding-left:28px;}
  .ps-steps::before{left:13px;}
  .ps-dot{left:-24px;}
  .ps-d{padding:8px;}
}
/* =====================================================================
   トップだけの装丁（共通の装丁は site.css の .deco。トップの body は "home deco"）
   ヒーローの上はドット（文字の周りは薄く）、下へ行くと方眼（/updates と同じ間隔）。ぼかし2つは使わない
   導入事例だけは枠をまたぐ帯にする
   ===================================================================== */
/* 導入事例: 枠をまたいで画面の端まで届く帯。左右の縦線もここで途切れる */
.home #cases{
  background-color:var(--surf-2);background-image:var(--grain);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.home #cases::before{display:none}
.home #cases::after{--lab-base:linear-gradient(var(--surf-1) 50%,var(--surf-2) 50%)}

/* ヒーロー: ぼかしの代わりに、上はドット、下へ行くと方眼。どちらも枠の中だけ。
   ドットは見出しと説明文の周りを薄くし、文字のない上の余白と左右で濃く見せる */
.home .hero::before,.home .hero::after{
  top:0;bottom:0;right:auto;left:50%;width:var(--frame);height:auto;transform:translateX(-50%);
  z-index:0;
}
.home .hero::before{
  background:radial-gradient(#c2bcda 1.2px,transparent 1.5px) center top/18px 18px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 20%,transparent 44%),radial-gradient(ellipse 50% 190px at 50% 235px,rgba(0,0,0,.14) 60%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 20%,transparent 44%),radial-gradient(ellipse 50% 190px at 50% 235px,rgba(0,0,0,.14) 60%,#000 100%);
  mask-composite:intersect;
}
.home .hero::after{
  background-image:linear-gradient(to right,rgba(29,26,46,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(29,26,46,.055) 1px,transparent 1px);
  background-size:48px 48px;background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,transparent 26%,#000 62%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 26%,#000 62%,#000 100%);
}
@media (max-width:960px){
  /* 見出しと説明文が縦に並ぶので、ドットを薄くする範囲を縦に広げる */
  .home .hero::before{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 12%,transparent 46%),radial-gradient(ellipse 70% 300px at 40% 300px,rgba(0,0,0,.14) 60%,#000 100%);
    mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 12%,transparent 46%),radial-gradient(ellipse 70% 300px at 40% 300px,rgba(0,0,0,.14) 60%,#000 100%);
  }
}