/* =========================================================
   技術・開発体制ページ専用（共通部分は design-base.css 側）
   ブロック構成：ヒーロー（白）→ AI Native（白）→ AI in Product（薄い青緑）→ 技術スタック（白）
   → 開発フロー（薄い青緑）→ 開発環境（白）→ CTA（薄いグレー）
========================================================= */

/* タイトル帯：h1の開始位置を本文(.wrap)にそろえる（文字サイズは common.css で全ページ共通） */
body:not(.home) main .wrapper-h1 h1{max-width:var(--max);padding-left:var(--pad);padding-right:var(--pad)}

/* ラベル：ページ内すべて（ヒーロー＋各セクション）をティールの小さい太字にそろえる */
.eyebrow{font-size:14.5px;font-weight:700;letter-spacing:.18em;line-height:20px;color:#17808a}
/* 左の線：ほかのページのラベルと同じ形（線が伸びる動きもそのまま）で、色だけティールに */
.eyebrow::before{background:#17808a}
@media(max-width:720px){.eyebrow{font-size:13.5px;letter-spacing:.16em}}

/* セクション見出し：大きめ・濃いめ */
.sec-title{font-size:clamp(24px,3vw,34px);line-height:1.5;color:#1c2b33}

/* セクションの余白・背景色（色で区切るので線は使わない） */
main section{padding:clamp(72px,9vw,120px) 0;border-top:none}
.tech-ai-native,.tech-stack,.tech-env{background:#fff}
.tech-ai-product,.tech-flow{background:linear-gradient(120deg,#eef7f8 0%,#eef3fa 100%)}

/* =========================================================
   ヒーロー：キャッチコピーを2行の大きな見出しにし、下に実績の数字カードを3つ並べる
========================================================= */
.page-hero{background:#fff;border-bottom:none;padding:clamp(56px,7vw,104px) 0 clamp(24px,3vw,40px)}
.page-hero .ptag{margin-top:20px;font-family:var(--sans);font-size:clamp(30px,4.6vw,52px);font-weight:700;line-height:1.4;letter-spacing:.02em;color:#1c2b33;word-break:auto-phrase}
.page-hero .plead{margin-top:24px;font-size:16.5px;line-height:2;color:var(--sub)}
.tech-stats{list-style:none;margin:clamp(36px,4.5vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tech-stats li{background:#f1f6f8;border-radius:8px;padding:24px 22px 26px}
.ts-num{display:block;font-size:clamp(34px,3.6vw,42px);font-weight:700;line-height:1;letter-spacing:0;color:#17808a}
.ts-num small{margin-left:4px;font-size:16.5px;font-weight:700;letter-spacing:.02em}
.ts-text{display:block;margin-top:16px;font-size:14.5px;line-height:1.8;color:var(--sub)}
@media(max-width:720px){
  .page-hero .ptag{margin-top:16px}
  .tech-stats{grid-template-columns:1fr;gap:12px}
  .tech-stats li{padding:20px 20px 22px}
  .ts-text{margin-top:12px}
}

/* =========================================================
   AI Native：左に見出し・本文・2枚のカード、右に写真
========================================================= */
.ai-native-intro{display:grid;grid-template-columns:1.1fr .9fr;column-gap:clamp(32px,6vw,88px);row-gap:32px;align-items:start}
.ai-native-text .sec-lead{margin-top:22px}
/* 補足の1文はリード文の続きとして読ませる */
.ai-native-note{margin-top:0;max-width:640px;font-size:16.5px;line-height:1.9;color:var(--sub)}
.ai-native-photo{width:100%;height:auto;aspect-ratio:6/5;object-fit:cover;object-position:62% 50%;border-radius:8px}
/* AIが支える工程：白いカードに「設計 → 実装 → レビュー」を1行で */
.ai-flow-card{margin-top:32px;padding:20px 24px 22px;border:1px solid #dfe7eb;border-radius:8px;background:#fff}
.ai-flow-label{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--sub)}
.ai-steps,.ai-focus{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:clamp(17px,1.8vw,20px);font-weight:700;letter-spacing:.04em;line-height:1.6}
.ai-steps li{color:#1c2b33}
.ai-steps li + li::before{content:"→";margin:0 .5em;font-weight:400}
/* 人が集中すること：ティール→青のグラデーションのカード */
.ai-focus-card{margin-top:14px;padding:20px 24px 22px;border-radius:8px;background:linear-gradient(90deg,#17808a 0%,#2f6fb0 100%);color:#fff}
.ai-focus-card .ai-flow-label{color:rgba(255,255,255,.9)}
.ai-focus li + li{margin-left:1em}
@media(max-width:820px){.ai-native-intro{grid-template-columns:1fr}}

/* =========================================================
   AI in Product：左に見出し、右に本文と引用、下に3つのポイントカード
========================================================= */
.ai-build{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,6vw,88px);row-gap:clamp(40px,5vw,56px);align-items:start}
.ai-build-body{font-size:16.5px;color:var(--sub);line-height:1.9}
.ai-build-body strong{color:var(--ink);font-weight:700}
.ai-build-quote{margin-top:24px;padding:18px 22px;border-radius:8px;background:#fff;font-size:16.5px;font-weight:700;line-height:1.8;color:#17808a}
.ai-build-list{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:ai-build}
.ai-build-list li{padding:28px 26px 30px;border-radius:8px;background:#fff;font-size:15px;color:var(--sub);line-height:1.85;counter-increment:ai-build}
.ai-build-list li::before{content:counter(ai-build,decimal-leading-zero);display:block;margin-bottom:14px;font-size:22px;font-weight:700;line-height:1;color:#17808a}
.ai-build-list span{display:block;margin-bottom:10px;font-size:17px;font-weight:700;letter-spacing:.04em;color:#1c2b33}
@media(max-width:820px){
  .ai-build{grid-template-columns:1fr}
  .ai-build-list{grid-template-columns:1fr;gap:12px}
}

/* =========================================================
   技術スタック：左に見出し、右に言語を大きな文字で並べ、下に開発領域のタグ
========================================================= */
.tech-stack .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,6vw,88px);row-gap:28px;align-items:start}
.stack{font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.7;letter-spacing:.02em;color:#1c2b33}
.stack span:not(:last-child):not(:nth-last-child(2))::after{content:" / "}
.stack span:last-child{margin-left:.4em;font-size:14px;font-weight:500;color:var(--sub)}
.tech-scope-label{margin-top:28px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--sub)}
.tech-scope{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tech-scope li{padding:10px 14px;border-radius:4px;background:#f1f5f7;font-size:13.5px;font-weight:500;line-height:1.6;color:#1c2b33}
@media(max-width:820px){
  .tech-stack .wrap{grid-template-columns:1fr}
  .tech-scope{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   開発フロー：白いカードを4つ横並び（STEPの数字を大きく）
========================================================= */
.flow{margin-top:48px;list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow li{padding:28px 24px 30px;border-radius:8px;background:#fff}
.flow .f-num{display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#17808a}
.flow .f-num b{font-size:30px;line-height:1;letter-spacing:0}
.flow h4{margin-top:16px;padding:0;background:none;font-size:18px}
.flow p{margin-top:10px;font-size:14.5px;line-height:1.85;color:var(--sub)}
@media(max-width:860px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.flow{grid-template-columns:1fr;gap:12px}}

/* =========================================================
   開発環境：項目ごとの写真（写真を区切りにするため上罫線は外す）
========================================================= */
.env-grid{grid-template-columns:repeat(3,1fr)}
.env-cell,.env-cell:first-child{border-top:none;padding-top:0}
.env-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:20px}
@media(max-width:860px){.env-grid{grid-template-columns:1fr}}

/* =========================================================
   CTA：ボタンはトップの「パートナーシップのご相談」・採用ページと同じアウトライン型
========================================================= */
.cta-band h2{font-size:clamp(23.5px,3vw,34px)}
.cta-band .btn{position:relative;background:#fff;color:#3786CD !important;border:1px solid #3786CD;border-radius:999px;padding:16px 56px 16px 46px;font-size:16px;transition:background .3s,color .3s}
.cta-band .btn::after{content:'>';position:absolute;top:50%;right:1.4rem;line-height:1;transform:translateY(-50%) scale(.6,1.2)}
.cta-band .btn:hover{background:#3786CD;color:#fff !important}

/* unique.css の b（マーカー風の背景）・span の文字指定を打ち消す */
.flow .f-num b{padding:0;background:none;color:inherit;font-weight:700}
.stack span{font-weight:700;color:#1c2b33}
.stack span:last-child{font-weight:500;color:var(--sub)}