/* tifg.css — 2026-10-30 構成整理（D-225）でこのページに足した部品の見た目。共通の custom.css の後に読む（content.json の page_meta.tifg.css）
   既存の custom.css の #hm-tifg の節（色の変数 --night --teal --cyan --line --muted と tf- の部品）に合わせ、足した部品だけをここに書く。 */

/* ヒーロー：右の「チームの地図」は各節への飛び先（行をリンクにした） */
#hm-tifg a.tf-pipe-row{color:#fff;transition:background .18s}
#hm-tifg a.tf-pipe-row:hover{background:#ffffff08}
#hm-tifg a.tf-pipe-row:focus-visible{outline-offset:2px}
#hm-tifg .tf-hero-back{margin-top:18px}
/* 下の帯（FDE / ENGINEERING / ADOPTION / AX）は、前の版ではヒーローの背景（:before）の下に隠れて見えていなかった。前へ出す */
#hm-tifg .tf-strip{position:relative;z-index:2}
#hm-tifg .tf-hero-back .tf-link{color:#d9eff0;border-color:#4a626a}

/* 01 チームの役割：前の版の FDE・工程・AX・自社で使う を 3 枚に縮めた要約（#fde・#path はここ） */
#hm-tifg .tf-roles{background:#ecefe9}
#hm-tifg .tf-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#hm-tifg .tf-role-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);background:#fff}
#hm-tifg .tf-role-card .tf-kicker{color:var(--teal)}
#hm-tifg .tf-role-card h3{font-size:22px;line-height:1.6;margin:14px 0 10px!important}
#hm-tifg .tf-role-card p{font-size:12px;color:var(--muted)}
#hm-tifg .tf-role-card .tf-link{margin-top:auto;align-self:flex-start;padding-top:22px}
#hm-tifg .tf-role-card.dark{background:var(--night);border-color:#304a53;color:#fff}
#hm-tifg .tf-role-card.dark .tf-kicker{color:var(--cyan)}
#hm-tifg .tf-role-card.dark p{color:#abc1c6}
#hm-tifg .tf-role-card.dark .tf-link{border-color:#4f706f}

/* 02 窓口：代表の社外での役割（MAiZM は役割紹介に要る範囲だけ。詳細は projects） */
#hm-tifg .tf-front-role{display:grid;grid-template-columns:230px 1fr;gap:20px;margin-top:18px;padding:24px;border:1px solid #cad8d3;background:#fff}
#hm-tifg .tf-front-role .tf-kicker{color:var(--teal)}
#hm-tifg .tf-front-role strong{display:block;font-size:17px;line-height:1.65;margin-top:6px}
#hm-tifg .tf-front-role p{font-size:12px;color:var(--muted)}
#hm-tifg .tf-front-links{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:10px}

/* 04 開発体制：SAMI Japan との写真と協働の経緯 */
#hm-tifg .tf-origin{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}
#hm-tifg .tf-origin-photo{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:#16343c}
#hm-tifg .tf-origin-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
#hm-tifg .tf-origin-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;background:linear-gradient(180deg,transparent,#07151dd9);color:#e8f3f1;font-size:11px;font-weight:700}
#hm-tifg .tf-origin-side{display:grid;gap:16px}
#hm-tifg .tf-origin .tf-evidence-card{background:#fff}
#hm-tifg .tf-origin-note{margin-top:14px!important;font-size:10px!important;color:#5d726d!important}

/* 開発メンバーの組の見出し：英字の小見出しと日本語がくっついて見えていたので、英字を上の行へ */
#hm-tifg .tf-team-label>div>small{display:block;margin-bottom:4px}

/* 960px 以下では節の見出しと説明を縦に積む（custom.css は 760px 以下だけで、768px 前後で見出しが細く折れていた）。
   また 960px 以下では 写真 → SAMI Japan の事例 → 2024年7月 の順に並べる（下の @media） */

/* 05 相談：4 枚（相談を主に） */
#hm-tifg .tf-next-grid.tf-next-4{grid-template-columns:repeat(4,1fr)}
#hm-tifg .tf-next-main{background:var(--night);border-color:#304a53;color:#fff}
#hm-tifg .tf-next-main small,#hm-tifg .tf-next-main span{color:var(--cyan)}
#hm-tifg .tf-next-main p{color:#abc1c6}

@media(max-width:1200px){#hm-tifg .tf-next-grid.tf-next-4{grid-template-columns:1fr 1fr}}
@media(max-width:960px){#hm-tifg .tf-head{display:block}#hm-tifg .tf-head>p{margin-top:19px;max-width:none}#hm-tifg .tf-origin-side{display:contents}#hm-tifg .tf-origin-photo{order:1}#hm-tifg .tf-origin>.tf-evidence-card{order:2}#hm-tifg .tf-origin-side>.tf-evidence-card{order:3}#hm-tifg .tf-role-grid{grid-template-columns:1fr}#hm-tifg .tf-front-role,#hm-tifg .tf-origin{grid-template-columns:1fr}}
@media(max-width:640px){#hm-tifg .tf-next-grid.tf-next-4{grid-template-columns:1fr}#hm-tifg .tf-role-card{padding:22px}#hm-tifg .tf-front-role{padding:20px}}