/* 下層ページのスタイル
2026年9月18日：ai-support.html から作り始めた。
ヘッダー・フッター・ボタン・波・面の色は top-design.css をそのまま使う。
このファイルには、下層にしか出ない部品だけを書く。
（パンくず、ページ先頭、目次、活用例の切り替え、含む／別途、料金、よくある質問）
トップと下層の両方に出る部品を足すときは、このファイルではなく top-design.css へ書く。 */
/* ── ページ先頭 ───────────────────────────────
トップのヒーローとは別の型。見出しは1つ、絵は右に小さく添えるだけにする。
トップのヒーローほど背を高くしない。下層は本文を読みに来た人が見るため。 */
.page-head{position:relative;z-index:2;padding:26px 0 40px}
.page-head>.wrap{max-width:1280px}
.page-head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);gap:40px;align-items:center}
.page-head h1{font-family:var(--f-head,inherit);font-size:clamp(28px,3vw,42px);color:var(--head);line-height:1.5;letter-spacing:.005em;margin:14px 0 20px}
.page-head .lead{font-size:16px;line-height:1.95;color:var(--ink);max-width:40em}
.page-head-pic{position:relative}
.page-head-pic img{width:100%;height:auto;display:block;position:relative;z-index:2}
/* 絵の下に敷く淡い板。トップのヒーローと同じ考え方だが、円は重ねない。 */
.page-head-pic .back{position:absolute;left:6%;right:6%;top:12%;bottom:6%;border-radius:36px;background:rgba(46,167,224,.10);z-index:1}
/* パンくず。文字は小さく、現在地だけ色を落とさない。 */
.breadcrumb{font-size:13px;color:#7a736c;margin:0}
.breadcrumb a{color:var(--blue-d);text-decoration:none;display:inline-block;padding:13px 8px;margin:-13px -8px}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--ink)}
.breadcrumb i{font-style:normal;margin:0 8px;color:#c7bfb4}
/* ── 目次 ─────────────────────────────────
節が多いページなので先頭に置く。飾らず、行き先だけを並べる。 */
.toc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 26px;box-shadow:0 4px 16px rgba(21,84,124,.07);position:relative;z-index:2}
.toc h2{font-size:14px;font-weight:700;color:var(--blue-d);margin:0 0 14px;letter-spacing:.04em}
.toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:6px 26px;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:flex;align-items:flex-start;gap:12px;text-decoration:none;color:var(--ink);font-size:16px;font-weight:600;line-height:1.7;padding:11px 6px;border-radius:10px;min-height:44px;box-sizing:border-box}
.toc a:before{content:counter(toc,decimal-leading-zero);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--amber);flex:none;line-height:1.96}
.toc a:hover{background:var(--blue-l);color:var(--blue-d)}
/* ── 節の見出し（下層共通） ─────────────────────
トップの .slash を使い回すので、ここでは余白だけ決める。 */
.sec-head{text-align:center;margin-bottom:34px}
.sec-head h2{font-size:clamp(25px,2.8vw,36px);color:var(--head);margin:12px 0 12px;line-height:1.5}
.sec-head p{color:var(--ink2,#6b6560);font-size:16px;line-height:1.9;max-width:44em;margin:0 auto}
/* ── 活用例の切り替え ────────────────────────
仕事の名前を選ぶと、その下の1枚だけが入れ替わる。
JavaScriptが動かない環境では、全部の枚が縦に並んで読める形にしてある。 */
.case-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px}
.case-tabs button{font:inherit;font-size:15px;font-weight:700;color:var(--blue-d);background:#fff;border:1.6px solid var(--line);border-radius:999px;padding:12px 22px;min-height:44px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.case-tabs button:hover{border-color:var(--blue)}
.case-tabs button[aria-selected="true"]{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.case-panel{background:#fff;border-radius:26px;padding:34px 34px 30px;box-shadow:0 6px 22px rgba(21,84,124,.09)}
.case-panel .lab{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--amb-d);margin:0 0 10px}
.case-panel h3{font-size:clamp(20px,2.2vw,26px);color:var(--head);line-height:1.55;margin:0 0 14px}
.case-panel>p{font-size:16px;line-height:1.95;color:var(--ink);margin:0 0 24px}
.case-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:32px;align-items:start}
/* 左：見直す中身。右：時間の目安。 */
.case-do{margin:0;padding:0;list-style:none}
.case-do li{position:relative;padding:11px 0 11px 30px;font-size:16px;line-height:1.85;border-bottom:1px dashed var(--line)}
.case-do li:last-child{border-bottom:0}
.case-do li:before{content:'';position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.case-time{background:var(--cream2);border-radius:20px;padding:22px 24px}
.case-time h4{font-size:14px;font-weight:700;color:var(--blue-d);margin:0 0 16px;letter-spacing:.02em}
.case-row{display:flex;align-items:baseline;gap:12px;padding:9px 0}
.case-row .k{font-size:14px;color:#7a736c;width:4.5em;flex:none}
.case-row .v{font-family:'Outfit',sans-serif;font-size:26px;font-weight:700;color:var(--head);line-height:1}
.case-row .v em{font-style:normal;font-family:var(--f-body,inherit);font-size:14px;font-weight:700;margin-left:3px}
.case-row.after .v{color:var(--grn-d)}
.case-sum{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16px;line-height:1.9;color:var(--ink)}
.case-sum b{color:var(--amb-d)}
/* ── お願いできること／別途になること ──────────────
2列。含むものを左、別途を右。どちらも同じ見た目にして、
別途のほうを注意書きのように小さく見せない。 */
.inout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}
.inout>div{background:#fff;border-radius:22px;padding:28px 28px 24px;box-shadow:0 4px 16px rgba(21,84,124,.08)}
.inout h3,.inout h4{display:flex;align-items:center;gap:12px;font-size:20px;color:var(--head);margin:0 0 18px}
.inout h3 i,.inout h4 i{font-style:normal;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex:none}
.inout .in h3 i,.inout .in h4 i{background:var(--blue-l);color:var(--blue-d)}
.inout .ex h3 i,.inout .ex h4 i{background:#FCF3E7;color:var(--amb-d)}
.inout ul{margin:0;padding:0;list-style:none}
.inout li{position:relative;padding:10px 0 10px 22px;font-size:16px;line-height:1.85;border-bottom:1px dashed var(--line)}
.inout li:last-child{border-bottom:0}
.inout li:before{content:'';position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.inout .ex li:before{background:var(--amber)}
/* ── ご相談いただける支援 ─────────────────────
2026年9月19日：ai-support.html で追加。
区分ページの中で、依頼できる個別サービスを2つに分けて置く。
同じ形のカードを2枚並べるのではなく、1枚ずつ縦に置き、
中身（含む／別途の2列、渡すものの番号つき一覧）で性格の違いを出す。 */
.offer{display:grid;gap:26px}
.offer-item{background:#fff;border-radius:26px;padding:32px 34px 30px;box-shadow:0 6px 22px rgba(21,84,124,.09)}
/* 頭は小イラスト＋名前＋説明句。説明句は03のブランド方針で決めた一文。 */
.offer-head{display:flex;gap:22px;align-items:center;margin:0 0 20px}
.offer-head .ic{width:104px;flex:none}
.offer-head .ic img{width:100%;height:auto;display:block}
.offer .lab{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--amb-d);margin:0 0 6px}
.offer h3{font-size:clamp(21px,2.1vw,26px);color:var(--head);line-height:1.5;margin:0 0 8px}
.offer .say{font-size:17px;font-weight:700;line-height:1.8;color:var(--blue-d);margin:0}
.offer-item>p{font-size:16px;line-height:1.95;color:var(--ink);margin:0 0 22px}
/* 白いカードの中に白い箱を重ねない。含む／別途は生成りの下地に変える。 */
.offer .inout>div{background:var(--cream);border:1px solid var(--line);box-shadow:none;padding:24px 24px 20px}
.offer .inout h4{font-size:18px;margin-bottom:14px}
.offer-h{font-size:16px;font-weight:700;color:var(--head);margin:0 0 10px}
.offer-give{margin:0 0 20px;padding:0;list-style:none;counter-reset:og}
.offer-give li{counter-increment:og;position:relative;padding:12px 0 12px 42px;font-size:16px;line-height:1.85;border-bottom:1px dashed var(--line)}
.offer-give li:last-child{border-bottom:0}
.offer-give li:before{content:counter(og);position:absolute;left:2px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--blue-l);color:var(--blue-d);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.offer-give b{color:var(--head)}
.offer-note{font-size:15px;line-height:1.9;color:#6b6560;margin:0;padding-top:16px;border-top:1px dashed var(--line)}
/* ── 料金 ───────────────────────────────
金額は幅で示す。1行ずつ、何にいくらかを並べる。 */
.price{background:#fff;border-radius:24px;padding:12px 30px;box-shadow:0 4px 16px rgba(21,84,124,.08)}
.price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 26px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
/* どの場面の費用かを、プラン名の上に小さく置く。同じ場面の行は同じ文字にする。 */
.price-row .grp{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--blue-d);margin:0 0 5px}
.price-row .nm{font-size:20px;font-weight:700;color:var(--head);margin:0 0 6px}
.price-row .ds{font-size:15px;line-height:1.8;color:#6b6560;margin:0}
.price-row .amt{font-family:'Outfit',sans-serif;font-size:clamp(22px,2.4vw,28px);font-weight:700;color:var(--blue-d);white-space:nowrap;text-align:right}
.price-row .amt em{font-style:normal;font-family:var(--f-body,inherit);font-size:14px;font-weight:700;margin-left:2px}
/* 初回相談は無料なので、他の行と見た目を変えて先頭に置く。 */
/* 2026年9月19日：上に白い帯が残り、角の丸みも枠と違っていたので、
カードの内側の余白（上12px・左右30px）を打ち消して、枠と同じ24pxの丸みにした。 */
.price-row.free{background:var(--blue-l);margin:-12px -30px 0;padding:22px 30px;border-radius:24px 24px 0 0;border-bottom:0}
.price-row.free .amt{color:var(--grn-d)}
.price-foot{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:20px;font-size:14px;color:#6b6560}
.price-foot .mark{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-weight:600;color:var(--blue-d)}
/* ── よくある質問 ──────────────────────────
開閉する。最初はすべて閉じておき、見出しだけを拾い読みできるようにする。 */
.faq{display:grid;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.faq summary{display:flex;align-items:flex-start;gap:14px;cursor:pointer;list-style:none;padding:20px 24px;font-size:16px;font-weight:700;color:var(--head);line-height:1.7;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:'Q';font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:#fff;background:var(--blue);width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
/* 開いているかどうかを、記号の向きで示す。 */
.faq summary:after{content:'';width:11px;height:11px;border-right:2px solid var(--blue-d);border-bottom:2px solid var(--blue-d);transform:rotate(45deg);margin:5px 0 0 auto;flex:none;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(225deg);margin-top:9px}
.faq .a{display:flex;gap:14px;padding:0 24px 22px;font-size:16px;line-height:1.95;color:var(--ink)}
.faq .a:before{content:'A';font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--amb-d);background:#FCF3E7;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.faq .a p{margin:0 0 10px}
.faq .a p:last-child{margin-bottom:0}
/* ── 実績への導線 ─────────────────────────
このページには事例をまだ載せていないので、一覧へ送る。 */
.link-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 28px;background:#fff;border-radius:24px;padding:28px 32px;box-shadow:0 4px 16px rgba(21,84,124,.08);text-align:center}
.link-band p{margin:0;font-size:16px;line-height:1.85;color:var(--ink)}
/* ── 画面が狭いとき ───────────────────────── */
@media(max-width:900px){
.page-head-grid{grid-template-columns:1fr;gap:24px}
/* 絵を先に出すと本文が下がりすぎるので、文章を上に置いたままにする。 */
.page-head-pic{max-width:380px;margin:0 auto}
.case-body{grid-template-columns:1fr;gap:24px}
}
@media(max-width:860px){
/* トップと同じで、860px以下はヘッダーが浮くので先頭に余白を足す。 */
.page-head{padding-top:104px}
}
/* ── 相談ボタンの補足 ─────────────────────────
2026年9月19日：初回相談の条件をボタンのすぐ下に置く。
紺地なので、本文と同じ淡い水色にして白い見出しと区別する。 */
.cta-main{display:flex;flex-direction:column;gap:10px}
.cta-note{font-size:14px;color:#BFD8E6;margin:0}
@media(max-width:620px){
.page-head{padding-bottom:28px}
.offer-item{padding:26px 20px 22px;border-radius:22px}
.offer-head{gap:14px;align-items:flex-start}
.offer-head .ic{width:72px}
.offer .inout>div{padding:20px 18px 18px}
.toc{padding:20px 20px}
.case-panel{padding:26px 20px 24px;border-radius:22px}
.inout>div{padding:24px 20px 20px}
.price{padding:10px 20px}
.price-row{grid-template-columns:1fr;gap:10px;padding:18px 0}
.price-row .amt{text-align:left}
.price-row.free{margin:-10px -20px 0;padding:18px 20px}
.faq summary{padding:18px 18px;font-size:16px}
.faq .a{padding:0 18px 20px}
.link-band{padding:24px 20px}
}
/* ── 進め方の役割 ───────────────────────────
トップの .step をそのまま使い、下層では「どちらが何をするか」を足す。
誰の担当かが一目で分かるように、名前を小さな札にする。 */
.step .role{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.75;color:#5c5754;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line)}
.step .role b{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--blue-d);background:var(--blue-l);border-radius:999px;padding:4px 10px;white-space:nowrap}
.step .role+.role{border-top:0;padding-top:0;margin-top:8px}
.step .role+.role b{color:var(--amb-d);background:#FCF3E7}
/* ── 問いかけカード（下層での調整） ─────────────────
トップのカードは見出しを
で折っているので番号と重ならないが、
下層は見出しが長く、右上の番号の下へ文字が回り込む。
このファイルは下層ページしか読まないので、ここで逃がす。 */
.qc h3{padding-right:46px}
/* ── 3枚並びのカード ────────────────────────
2026年9月19日：web.html で追加。同じ形を2か所で使う。
「どんな役割を持たせるか」（コーポレート／採用／LP）と、
「公開したあとに確かめること」（届く／伝わる／成果）。
小イラストを頭に置き、見出しと本文、その下に補足を並べる。 */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.cards3>div{background:#fff;border-radius:22px;padding:26px 26px 24px;box-shadow:0 4px 16px rgba(21,84,124,.08);display:flex;flex-direction:column}
.cards3 .ic{height:86px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:14px}
.cards3 .ic img{height:100%;width:auto;display:block}
.cards3 .lab{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--blue-d);margin:0 0 8px;text-align:center}
.cards3 h3{font-size:20px;color:var(--head);line-height:1.55;margin:0 0 12px;text-align:center}
.cards3>div>p{font-size:16px;line-height:1.9;color:var(--ink);margin:0}
/* 補足は罫線で区切って下にそろえる。カードの高さが違っても位置が合う。 */
.cards3 .sub{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line)}
.cards3 .sub dt{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--amb-d);margin:10px 0 4px}
.cards3 .sub dt:first-child{margin-top:0}
.cards3 .sub dd{font-size:15px;line-height:1.85;color:#5c5754;margin:0}
@media(max-width:620px){
.cards3>div{padding:22px 20px 20px}
.cards3 .ic{height:74px}
}
/* ── 保守プランの比較 ───────────────────────
2026年9月19日：maintenance.html で追加。
2つのプランを同じ項目で並べ、何が違うかを行ごとに見比べられるようにする。
どちらかを勧める見せ方にはしない（「いちばん人気」などは使わない）。 */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px}
.plans>div{background:#fff;border-radius:24px;padding:30px 30px 26px;box-shadow:0 4px 16px rgba(21,84,124,.08);display:flex;flex-direction:column}
.plans .ttl{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--blue-d);margin:0 0 6px}
.plans h3{font-size:20px;color:var(--head);margin:0 0 16px;line-height:1.5}
.plans .amt{display:flex;align-items:baseline;gap:4px;margin:0 0 22px;padding-bottom:22px;border-bottom:2px solid var(--blue-l)}
.plans .amt .v{font-family:'Outfit',sans-serif;font-size:38px;font-weight:700;color:var(--blue-d);line-height:1}
.plans .amt em{font-style:normal;font-size:15px;font-weight:700;color:var(--blue-d)}
.plans .amt .tax{font-size:13px;color:#7a736c;margin-left:6px;font-weight:400}
/* 項目は左に名前、右に中身。行ごとに見比べられるようにそろえる。 */
.plans dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 18px}
.plans dt{font-size:14px;color:#6b6560;padding:11px 0;border-top:1px dashed var(--line);display:flex;align-items:center}
.plans dd{font-size:15.5px;line-height:1.7;color:var(--ink);margin:0;padding:11px 0;border-top:1px dashed var(--line);text-align:right;font-weight:600}
.plans dt:first-of-type,.plans dl>dt:first-child{border-top:0}
.plans dl>dt:first-child+dd{border-top:0}
/* 含まないものは、無いことが分かるように色を落とす。 */
.plans dd.no{color:#9a938c;font-weight:400}
/* クラス名に .foot は使わない。top-design.css のサイトフッター（display:grid）と
ぶつかり、中の文章がグリッドに巻き込まれて細く折り返す。 */
.plans .pnote{margin-top:auto;padding-top:18px;font-size:14px;line-height:1.85;color:#7a736c}
/* 共通の条件は、プランの外に札で置く。 */
.plan-marks{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;margin-top:26px}
/* inline-flex だと、狭い画面で折り返したときに数字と単位が別の行に離れる。
文章として流したいので inline-block にし、離したくない部分は nowrap で守る。 */
.plan-marks span{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:14px;line-height:1.75;font-weight:600;color:var(--blue-d)}
/* 件数などの数字は他と同じく Outfit で少し大きく見せる。 */
.plan-marks span b{font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;margin:0 3px 0 6px}
@media(max-width:620px){
.plans>div{padding:24px 20px 20px}
.plans .amt .v{font-size:32px}
.plans dl{grid-template-columns:1fr;gap:0}
.plans dt{padding:11px 0 2px;border-top:1px dashed var(--line)}
.plans dd{padding:0 0 11px;border-top:0;text-align:left}
.plans dl>dt:first-child+dd{border-top:0}
}
/* ── PCだけで効かせる改行 ───────────────────
2026年9月19日：maintenance.html の見出しで追加。
見出しの改行をPCで整えると、狭い画面では短い行が残る。
.sp-br（狭い画面だけ改行）の対になる指定。 */
.pc-br{display:inline}
@media(max-width:860px){.pc-br{display:none}}
/* ── 5つ並べる進め方（training.html） ───────────
2026年9月20日：研修で扱う内容が5項目あるため追加。
.flow は最小幅230pxで、1160pxの版面には4つまでしか並ばない。
最小幅を196pxまで下げて、広い画面で5つ横に並ぶようにする。
数字の色は .flow の「4つ目だけアンバー」ではなく、5つ目に移す。 */
.flow.five{grid-template-columns:repeat(auto-fit,minmax(min(196px,100%),1fr));gap:18px}
.flow.five .step{padding:24px 20px}
.flow.five .step h3{font-size:19px}
.flow.five .step:nth-child(4) .n{background:var(--blue-d);color:#fff}
.flow.five .step:nth-child(5) .n{background:var(--amber);color:var(--head)}
/* ── 実績の一覧（works.html） ───────────────
2026年9月20日：制作実績25件、支援事例5件を1ページに置くために追加。
絞り込みのボタンは .case-tabs と同じ見た目を使い回す。
ただし切り替えるタブではなく絞り込みなので、状態は aria-pressed で持つ。 */
.case-tabs button[aria-pressed="true"]{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.filter-note{text-align:center;font-size:14px;color:#7a736c;margin:-12px 0 24px}
.wcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.wcards article{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 4px 16px rgba(21,84,124,.08);display:flex;flex-direction:column}
/* img の height 属性（600）がそのままCSSの height になるので、height:auto で打ち消す。
これを入れないと画像が 600px の高さで表示され、カードが極端に縦長になる。 */
/* 2026-09-24: 画像を で包んだので、直下の img だけでなく picture 越しも拾う。 */
.wcards article>img,.wcards article>picture>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top center;display:block;background:var(--blue-l);border-bottom:1px solid var(--line)}
.wcards .bd{padding:20px 22px 20px;display:flex;flex-direction:column;flex:1}
.wcards .tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.wcards .tags span{font-size:12px;font-weight:700;color:var(--blue-d);background:var(--blue-l);border-radius:999px;padding:5px 11px;line-height:1.5}
.wcards .tags .kind{color:var(--amb-d);background:#FCF3E7}
.wcards h3{font-size:18px;color:var(--head);line-height:1.6;margin:0 0 8px}
.wcards p{font-size:15px;line-height:1.85;color:#5c5754;margin:0}
.wcards .go{margin-top:auto;padding-top:18px;font-size:14px;font-weight:700;color:var(--blue-d);text-decoration:none;display:inline-flex;align-items:center;gap:7px;min-height:26px}
.wcards .go span{transition:transform .2s}
.wcards .go:hover span{transform:translateX(3px)}
/* 支援事例。ご相談から結果までを1枚にまとめる。 */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));gap:24px}
.cases article{background:#fff;border-radius:22px;padding:28px 30px 26px;box-shadow:0 4px 16px rgba(21,84,124,.08)}
.cases .meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.cases .meta span{font-size:12px;font-weight:700;color:var(--blue-d);background:var(--blue-l);border-radius:999px;padding:5px 11px}
.cases h3{font-size:19px;color:var(--head);line-height:1.6;margin:0}
.cases dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 18px;margin:18px 0 0}
.cases dt{font-size:12.5px;font-weight:700;color:var(--blue-d);background:var(--blue-l);border-radius:999px;padding:6px 13px;white-space:nowrap;justify-self:start;align-self:start;margin-top:3px}
.cases dt.res{color:var(--amb-d);background:#FCF3E7}
.cases dd{font-size:15.5px;line-height:1.9;color:#5c5754;margin:0}
@media(max-width:560px){
.cases article{padding:24px 20px 22px}
.cases dl{grid-template-columns:1fr;gap:0}
.cases dt{margin:14px 0 6px}
}
/* ── 会社概要（company.html） ───────────────
2026年9月20日追加。代表のあいさつと、会社の基本情報の表。 */
.greet{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:36px;align-items:start;background:#fff;border-radius:26px;padding:34px 38px 32px;box-shadow:0 6px 22px rgba(21,84,124,.09)}
.greet figure{margin:0;border-radius:20px;overflow:hidden;background:var(--blue-l)}
.greet figure img{width:100%;height:auto;display:block}
.greet h3{font-size:23px;color:var(--head);line-height:1.6;margin:0 0 18px}
.greet p{font-size:16px;line-height:2;color:#5c5754;margin:0 0 15px}
.greet .sign{margin:22px 0 0;padding-top:18px;border-top:1px dashed var(--line);font-size:14px;color:#7a736c}
.greet .sign b{display:block;font-size:19px;color:var(--head);font-weight:700;margin-top:5px;letter-spacing:.04em}
@media(max-width:760px){
.greet{grid-template-columns:1fr;gap:24px;padding:28px 22px 26px}
.greet figure{max-width:220px}
.greet h3{font-size:20px}
}
/* 会社の基本情報。左が項目名、右が中身。 */
.cdata{background:#fff;border-radius:24px;padding:8px 34px;box-shadow:0 4px 16px rgba(21,84,124,.08);display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 34px;margin:0}
.cdata dt{font-size:15px;font-weight:700;color:var(--blue-d);padding:20px 0;border-top:1px solid var(--line);white-space:nowrap}
.cdata dd{font-size:16px;line-height:1.9;color:var(--ink);margin:0;padding:20px 0;border-top:1px solid var(--line)}
.cdata>dt:first-child,.cdata>dt:first-child+dd{border-top:0}
/* 電話番号は押せるので、指で触れる高さ（44px）を確保する。 */
.cdata dd a{color:var(--blue-d);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.cdata dd small{display:block;font-size:14px;color:#7a736c;margin-top:2px}
@media(max-width:620px){
.cdata{grid-template-columns:1fr;padding:6px 22px}
.cdata dt{padding:18px 0 2px}
.cdata dd{padding:0 0 18px;border-top:0}
.cdata>dt:first-child+dd{border-top:0}
}
/* ── お問い合わせフォーム（contact.html） ──────
2026年9月20日追加。入力欄は指で触れる高さ（52px）を確保する。 */
.iform{background:#fff;border-radius:26px;padding:34px 38px 32px;box-shadow:0 6px 22px rgba(21,84,124,.09);max-width:840px;margin:0 auto}
.iform .fld{margin-bottom:22px}
.iform .row{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.iform label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--head);margin:0 0 9px}
.iform .req{font-size:11.5px;font-weight:700;color:#fff;background:var(--act);border-radius:999px;padding:4px 10px;letter-spacing:.04em}
.iform .opt{font-size:11.5px;font-weight:700;color:#7a736c;background:var(--cream2);border-radius:999px;padding:4px 10px;letter-spacing:.04em}
.iform input,.iform select,.iform textarea{font:inherit;font-size:16px;width:100%;box-sizing:border-box;min-height:52px;padding:13px 16px;border:1.6px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);line-height:1.7}
.iform textarea{min-height:180px;resize:vertical}
.iform select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 16px center;background-size:20px}
.iform input:focus,.iform select:focus,.iform textarea:focus{outline:3px solid rgba(46,167,224,.35);outline-offset:1px;border-color:var(--blue)}
.iform .help{font-size:14px;line-height:1.8;color:#7a736c;margin:0 0 9px}
.iform .consent{display:flex;align-items:flex-start;gap:13px;background:var(--blue-l);border-radius:16px;padding:16px 18px;font-size:15px;line-height:1.85;font-weight:400;color:#4a4643;margin:4px 0 22px}
.iform .consent input{width:22px;height:22px;min-height:22px;flex:none;margin:3px 0 0;padding:0;border-radius:5px;accent-color:var(--blue-d)}
/* 文中のリンクも指で触れるように、上下へ余白を足して高さを稼ぐ。
negative margin で行の高さは変えない（.breadcrumb a と同じやり方）。 */
.iform .consent a{color:var(--blue-d);font-weight:700;display:inline-block;padding:12px 3px;margin:-12px -3px}
.iform button.btn{font:inherit;font-size:17px;font-weight:700;border:0;cursor:pointer;width:100%;justify-content:center}
.iform .after{font-size:14px;line-height:1.9;color:#7a736c;margin:18px 0 0;text-align:center}
.iform .caution{font-size:14px;line-height:1.85;color:#7a736c;margin:0 0 22px}
/* 送信後の見本 */
.sent{background:#fff;border-radius:26px;padding:44px 38px;box-shadow:0 6px 22px rgba(21,84,124,.09);max-width:840px;margin:0 auto;text-align:center}
.sent h3{font-size:24px;color:var(--head);margin:0 0 14px}
.sent p{font-size:16px;line-height:1.95;color:#5c5754;margin:0 0 10px}
@media(max-width:700px){
.iform{padding:26px 20px 24px}
.iform .row{grid-template-columns:1fr;gap:0}
.sent{padding:34px 22px}
}
/* ── 研修中に作るもの（training.html） ─────────
2026年9月21日：ワイヤーにあった「実習イメージ」を戻した。
ワイヤーはテーマごとに大きな箱を置いていたが、縦に伸びるため
1枚の面にまとめ、手順の最後の「自分の仕事で試すことを決める」は
3つとも同じなので繰り返さず、下に1行だけ置く。 */
.drills{background:#fff;border-radius:22px;padding:26px 30px 22px;box-shadow:0 4px 16px rgba(21,84,124,.07);margin-top:30px}
.drills .hd{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:700;color:var(--blue-d);margin:0 0 20px}
.drills .hd:before{content:'';width:22px;height:2px;background:var(--amber);flex:none}
.drills .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:22px 32px}
.drills h4{font-size:16.5px;color:var(--head);margin:0 0 10px;line-height:1.55}
.drills ol{list-style:none;margin:0;padding:0;counter-reset:d}
.drills li{counter-increment:d;position:relative;padding:5px 0 5px 27px;font-size:14.5px;line-height:1.75;color:#5c5754}
.drills li:before{content:counter(d);position:absolute;left:0;top:7px;width:19px;height:19px;border-radius:50%;background:var(--blue-l);color:var(--blue-d);font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.drills .close{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--line);font-size:15px;line-height:1.85;color:#5c5754}
@media(max-width:620px){.drills{padding:24px 20px 20px}.drills .cols{gap:18px}}
/* ── 研修・講師の実績の一覧（training.html） ────
2026年9月21日：3枚のカードから、行を足すだけで増やせる一覧に変えた。
1行＝時期／内容／主催者。増えても形が崩れない。 */
.rec{list-style:none;margin:0;padding:0;background:#fff;border-radius:22px;box-shadow:0 4px 16px rgba(21,84,124,.08);overflow:hidden}
.rec>li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:4px 24px;padding:20px 30px;border-top:1px solid var(--line);align-items:baseline}
.rec>li:first-child{border-top:0}
.rec .when{font-family:'Outfit',sans-serif;font-size:15.5px;font-weight:700;color:var(--blue-d);margin:0;letter-spacing:.01em}
/* これから行う研修の印。実績と同じ一覧に並べるので、時期の横で区別する。 */
.rec .when em{font-family:var(--pl-font);font-style:normal;display:inline-block;
font-size:11.5px;font-weight:700;color:var(--blue-d);background:var(--blue-l);
border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:1.5px;white-space:nowrap}
/* 進行中のものは「予定」と色を分ける。 */
.rec .when em.now{color:var(--amb-d);background:#FCF3E7}
.rec h3{font-size:18px;color:var(--head);line-height:1.65;margin:0;font-weight:700}
/* 主催者は見出しの中に置くが、研修名より軽く見せる。 */
.rec h3 span{font-size:15px;font-weight:400;color:#5c5754}
/* 新聞などに載ったものは、見出しの最後に小さな札で添える。 */
.rec h3 i{font-style:normal;display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--amb-d);background:#FCF3E7;border-radius:999px;padding:4px 11px;margin-left:10px;white-space:nowrap;vertical-align:2px}
@media(max-width:620px){
.rec>li{grid-template-columns:1fr;gap:5px;padding:18px 20px}
.rec h3 span{display:block}
.rec h3 i{margin:6px 0 0}
}
/* ── コースの中身（training.html） ───────────
2026年9月21日：2コースを項目ごとに突き合わせる表（dl）をやめた。
人数・訪問／オンライン・事前の聞き取りなど、両コースで同じ行が多く、
比べる意味がなかった。カードには違いが出る4つだけを残し、
共通の条件はカードの外へ出した。 */
.plans .blk{padding:15px 0;border-top:1px dashed var(--line)}
.plans .blk:first-of-type{border-top:0;padding-top:0}
.plans .blk:last-of-type{padding-bottom:0;margin-top:auto}
.plans .k{display:inline-block;font-size:12.5px;font-weight:700;color:var(--blue-d);background:var(--blue-l);border-radius:999px;padding:5px 12px;margin:0 0 10px}
.plans .blk p{font-size:15.5px;line-height:1.85;color:#5c5754;margin:0}
.plans .blk .hours{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--head)}
.plans .blk ul{margin:0;padding:0;list-style:none}
.plans .blk li{position:relative;padding:4px 0 4px 20px;font-size:15.5px;line-height:1.8;color:#5c5754}
.plans .blk li:before{content:'';position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
/* ── お問い合わせの電話（2026-09-21 作り直し）──────────────
お電話とフォームを2枚のカードで並べていたのをやめ、電話の案内だけを1枚にした。
フォームはすぐ下にあるので、そこへ送るためのカードは要らない。 */
.tel-box{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;
padding:34px 32px 30px;text-align:center;box-shadow:0 4px 16px rgba(21,84,124,.07)}
.tel-box h3{font-size:20px;color:var(--head);margin:0 0 12px;line-height:1.6}
.tel-box p{font-size:16px;line-height:1.9;color:var(--ink);margin:0}
.tel-box .num{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(30px,4.2vw,40px);
color:var(--blue-d);text-decoration:none;letter-spacing:.01em;margin-top:18px}
.tel-box .num:hover{text-decoration:underline}
.tel-box .hours{font-size:14px;color:var(--ink2);margin-top:4px}
@media(max-width:560px){
.tel-box{padding:28px 20px 24px;border-radius:18px}
.tel-box h3{font-size:18px}
}
/* ── 個人情報の取り扱い（2026-09-21 追加）──────────────
長めの文章を通して読ませるページ。白いカード1枚に節を並べ、節の境に線を引く。
節ごとにカードを分けると、どこまでが一続きの文書か分からなくなるため。 */
.legal{background:#fff;border:1px solid var(--line);border-radius:26px;padding:40px 46px 34px;
max-width:920px;margin:0 auto;box-shadow:0 4px 16px rgba(21,84,124,.07)}
.legal .intro{font-size:16px;line-height:1.95;color:var(--ink);margin:0}
.legal>section{padding:30px 0 4px;border-top:1px solid var(--line);margin-top:26px}
.legal h2{font-size:20px;color:var(--head);margin:0 0 14px;line-height:1.6;letter-spacing:.01em}
.legal p{font-size:16px;line-height:1.95;color:var(--ink);margin:0 0 15px}
.legal>section>p:last-child{margin-bottom:0}
.legal ul{margin:0 0 15px;padding-left:1.35em}
.legal li{font-size:16px;line-height:1.9;color:var(--ink);margin-bottom:5px}
/* 会社概要の表を流用する。すでに白いカードの中なので、下地と影は消す。 */
.legal .cdata{margin:0;background:none;box-shadow:none;border-radius:0;padding:0}
.legal .cdata dt:first-of-type,.legal .cdata dd:first-of-type{border-top:0;padding-top:0}
.legal .rev{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line);
font-size:14px;color:var(--ink2);text-align:right}
@media(max-width:700px){
.legal{padding:26px 20px 24px;border-radius:20px}
.legal h2{font-size:18px}
.legal>section{padding-top:26px;margin-top:22px}
}
/* ===== AI活用レベル診断（2026-09-24、旧 ai-introduction.php から移設）=====
旧ページのCSS 515行は作り直した。新サイトの色・書体・角丸・影に合わせ、
押せる要素は44px以上、選択肢は指で押しても取り違えない間隔を取る。 */
.diag{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;
padding:36px 38px 32px;box-shadow:0 4px 18px rgba(21,84,124,.08)}
.diag-start{text-align:center}
.diag-lead{font-size:16px;line-height:1.9;color:var(--ink);margin:0 0 20px}
.diag-note{font-size:13.5px;color:var(--ink2);margin:16px 0 0}
/* 設問 */
.diag-prog{margin-bottom:22px}
.diag-meta{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;
color:var(--blue-d);margin:0 0 8px}
.diag-track{height:5px;border-radius:999px;background:var(--blue-l);overflow:hidden}
.diag-bar{display:block;height:100%;width:0;border-radius:999px;background:var(--blue);transition:width .28s}
.diag-quiz h3{font-size:21px;line-height:1.6;color:var(--head);margin:0 0 20px;outline:none}
.diag-options{display:flex;flex-direction:column;gap:10px}
.diag-option{font:inherit;font-size:16px;line-height:1.7;text-align:left;cursor:pointer;
display:flex;align-items:center;gap:13px;min-height:56px;padding:12px 18px;
border:1.6px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);
transition:border-color .18s,background .18s}
.diag-option:before{content:'';flex:none;width:19px;height:19px;border-radius:50%;
border:1.8px solid var(--control-border,#68717C);transition:border-color .18s,box-shadow .18s}
.diag-option:hover{border-color:var(--blue);background:#F7FCFF}
.diag-option[aria-checked="true"]{border-color:var(--blue-d);background:var(--blue-l)}
.diag-option[aria-checked="true"]:before{border-color:var(--blue-d);box-shadow:inset 0 0 0 4.5px var(--blue-d)}
.diag-back{font:inherit;font-size:14.5px;color:var(--blue-d);background:none;border:0;cursor:pointer;
min-height:44px;padding:0 4px;margin-top:16px}
.diag-back:hover{text-decoration:underline}
.diag-ready{text-align:center}
.diag-ready p{font-size:17px;color:var(--head);font-weight:700;margin:0 0 20px}
/* 結果 */
.diag-result{outline:none}
.diag-lv{text-align:center;padding-bottom:26px;border-bottom:1px solid var(--line)}
.diag-lv-label{display:inline-block;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;
letter-spacing:.08em;color:#fff;background:var(--blue-d);border-radius:999px;padding:5px 16px;margin:0 0 12px}
.diag-lv h3{font-size:25px;line-height:1.5;color:var(--head);margin:0 0 20px}
.diag-meter{max-width:520px;margin:0 auto 18px}
.diag-meter-track{display:flex;gap:5px}
.diag-meter-seg{flex:1;height:7px;border-radius:999px;background:var(--line)}
.diag-meter-seg.is-on{background:var(--blue)}
.diag-meter-labels{display:flex;gap:5px;margin-top:7px}
.diag-meter-labels span{flex:1;font-size:11.5px;line-height:1.4;color:var(--ink2);text-align:center}
.diag-meter-labels span.is-here{color:var(--blue-d);font-weight:700}
.diag-state{font-size:16px;line-height:1.95;color:var(--ink);margin:0;text-align:left}
.diag-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;padding:26px 0}
.diag-cols h4{font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--amb-d);margin:0 0 12px}
.diag-next ol{margin:0;padding-left:1.3em}
.diag-next li{font-size:15.5px;line-height:1.85;color:var(--ink);margin-bottom:9px}
.diag-plan{background:var(--blue-l);border-radius:18px;padding:20px 22px}
.diag-plan-name{font-size:18px;font-weight:700;color:var(--head);line-height:1.55;margin:0 0 8px}
.diag-plan-why{font-size:15px;line-height:1.85;color:var(--ink);margin:0 0 14px}
.diag-plan-link{display:inline-flex;align-items:center;min-height:44px;gap:7px;
font-size:15px;font-weight:700;color:var(--blue-d);text-decoration:none;
border-bottom:1px solid rgba(21,84,124,.4)}
.diag-plan-link:hover{border-bottom-color:var(--blue-d)}
.diag-sub{font-size:13.5px;line-height:1.75;color:var(--ink2);margin:14px 0 0}
.diag-sub b{color:var(--head)}
.diag-tip{background:#FCF3E7;border-radius:18px;padding:22px 24px;margin-bottom:26px}
.diag-tip h4{font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--amb-d);margin:0 0 10px}
.diag-tip p{font-size:15.5px;line-height:1.9;color:var(--ink);margin:0}
.diag-prompt{margin-top:14px !important;padding:14px 16px;background:#fff;border-radius:12px;
font-size:15px;line-height:1.8;color:var(--head)}
.diag-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.diag-restart{font:inherit;font-size:14.5px;color:var(--ink2);background:none;border:0;cursor:pointer;
min-height:44px;padding:0 4px}
.diag-restart:hover{color:var(--blue-d);text-decoration:underline}
@media(max-width:700px){
.diag{padding:26px 20px 24px;border-radius:20px}
.diag-quiz h3{font-size:19px}
.diag-option{font-size:15.5px;padding:11px 15px;min-height:54px}
.diag-lv h3{font-size:22px}
.diag-cols{grid-template-columns:1fr;gap:22px;padding:22px 0}
.diag-meter-labels span{font-size:10.5px}
.diag-tip{padding:18px 18px}
}
/* 問い合わせページ側：診断結果が引き継がれたときだけ出す帯 */
.diag-attached{display:none;align-items:flex-start;gap:12px;background:var(--blue-l);
border-radius:16px;padding:16px 18px;margin-bottom:22px}
.diag-attached.is-on{display:flex}
.diag-attached .lb{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff;
background:var(--blue-d);border-radius:999px;padding:4px 11px;margin-top:2px}
.diag-attached p{font-size:14.5px;line-height:1.8;color:var(--ink);margin:0}
.diag-attached b{color:var(--head)}
.diag-attached button{font:inherit;font-size:13.5px;color:var(--ink2);background:none;border:0;
cursor:pointer;min-height:44px;padding:0 4px;text-decoration:underline}
/* ===== 自社での使い方（2026-09-24、company.html）=====
「これまで → いま」を並べて示す。数字はすべて自社の仕事の実測値。 */
.practice{list-style:none;margin:34px 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.practice>li{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 26px 24px;
box-shadow:0 4px 16px rgba(21,84,124,.07);display:flex;flex-direction:column}
.practice .lab{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.06em;
color:var(--blue-d);margin:0 0 9px}
.practice h3{font-size:19px;line-height:1.55;color:var(--head);margin:0 0 16px}
.practice .ba{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;
padding:13px 16px;background:var(--blue-l);border-radius:14px}
.practice .before{font-size:14px;color:var(--ink2);text-decoration:line-through;text-decoration-color:rgba(122,115,108,.5)}
.practice .ba i{font-style:normal;color:var(--blue-d);font-weight:700}
.practice .after{font-size:15.5px;font-weight:700;color:var(--blue-d)}
.practice .after b{font-family:'Outfit',sans-serif;font-size:24px;margin-right:2px}
.practice .ds{font-size:15px;line-height:1.9;color:var(--ink);margin:0}
.practice-more{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 26px}
.practice-more .ttl{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--amb-d);margin:0 0 12px}
.practice-more ul{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:6px 26px}
.practice-more li{font-size:15px;line-height:1.85;color:var(--ink);display:flex;gap:9px}
.practice-more li:before{content:'';flex:none;width:5px;height:5px;border-radius:50%;
background:var(--amber);margin-top:.75em}
@media(max-width:560px){
.practice>li{padding:22px 20px 20px;border-radius:18px}
.practice h3{font-size:18px}
.practice-more{padding:18px 20px}
}