@charset "UTF-8";
/* ==========================================================================
節の見出し（3段構成）とページ見出しの h1
--------------------------------------------------------------------------
これは「一番最後に読み込む」前提のファイル。順序を変えないこと。
head.php の読み込み順は
style → page-legacy → common → $pl_css（ページ個別）→ これ
なぜ最後でなければならないか。
ページ個別CSS（page-claude-code.css など）や page-legacy.css に
.hero h2 のような要素セレクタ付きの指定があり、詳細度 (0,1,1) で
.pl-sec-h2 (0,1,0) より強い。後に置いて「後勝ち」で上書きする。
セレクタに #pl-main を付けているのも同じ理由（Tailwind のユーティリティが
同じ要素に付いたままでも、こちらが勝つようにするため）。
--------------------------------------------------------------------------
直している問題（2026-08）
改修前は2段構成で、情報と訴求の優先度が逆さまだった。
研修内容
14px ← 何の節かを伝えている
聞く時間より、手を動かす時間を。
40px ← キャッチコピー
読み手が流し読みで知りたいのは「研修内容」の方なのに、そちらが最小だった。
かといってキャッチコピーは書き手の資産なので捨てない。格を1段下げて残す。
h2 研修内容 28〜40px 何の節か
lead 聞く時間より、手を動かす… 18〜24px 訴求
desc 参加者が実際にパソコンを… 16px 本文
旧Tailwind世代のページでは、ここが英語（PRICING / SERVICE / AI ACTIVATION）
だった。情報量がないので日本語の節見出しに置き換える。英語を意匠として
残したい場合だけ .pl-sec-en を添える（読み上げ対象から外している）。
========================================================================== */
/* ==========================================================================
見出しフォント（2026-08-15、全ページへ拡大）
--------------------------------------------------------------------------
もとはトップページだけの試し（css/page-index.css）だった。本文の
Noto Sans JP は太いウェイトだと字面が詰まって重く見えるという指摘を受け、
見出し（h1〜h4）だけ Zen Kaku Gothic New に替えて字面を軽くしている。
本文（p・li など）は引き続き Noto Sans JP のまま。
共通ヘッダー / フッター（.pl-header / .pl-footer）には当てない。
ページ間を移動したときに書体がチラつくのを避けるため。
========================================================================== */
main h1,
main h2,
main h3,
main h4,
main .pl-heading-font {
font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans",
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
/* Zen Kaku Gothic New は字面が少し大きいので、字間をわずかに詰めて
Noto Sans JP のときと同じ行数に収まるようにしている。 */
letter-spacing: -0.012em;
}
/* --------------------------------------------------------------------------
節見出しのまとまり
-------------------------------------------------------------------------- */
#pl-main .pl-sec-head {
margin-block-end: var(--pl-gap-lg);
max-width: 46rem;
}
#pl-main .pl-sec-head-center {
margin-inline: auto;
text-align: center;
}
/* 節の中に置く小さめの見出し（写真の隣など、節の頭ではない場所）。
大きさを一段落として、下の余白も詰める。 */
#pl-main .pl-sec-head-compact {
margin-block-end: var(--pl-gap);
}
#pl-main .pl-sec-head-compact .pl-sec-h2 {
font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
}
#pl-main .pl-sec-head-compact .pl-sec-lead {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
}
/* 左に見出し・右にリードを置く2段組。独自CSS世代のページが使っていた形。 */
#pl-main .pl-sec-head-row {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
gap: var(--pl-gap-lg);
align-items: end;
max-width: none;
}
#pl-main .pl-sec-head-row .pl-sec-desc {
margin-block-start: 0;
}
@media (max-width: 900px) {
#pl-main .pl-sec-head-row {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
}
/* --------------------------------------------------------------------------
1段目 ― 何の節か。ここが一番大きい
-------------------------------------------------------------------------- */
#pl-main .pl-sec-h2 {
margin: 0;
color: var(--pl-ink);
font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.5rem);
/* 2026-08-15、900→700。Zen Kaku Gothic New への変更とあわせて、
最大ウェイトだと大見出しが重く見えるという指摘を受けて一段落とした。 */
font-weight: 700;
line-height: 1.38;
letter-spacing: -0.02em;
}
/* ページ見出し（h1）として使うとき。h2 より一回り大きい。 */
#pl-main .pl-sec-h1 {
font-size: clamp(2rem, 1.3rem + 2.6vw, 2.9rem);
}
/* 小見出し（h3相当）として使うとき。カード内の節など。 */
#pl-main .pl-sec-h3 {
font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
line-height: 1.5;
}
/* --------------------------------------------------------------------------
2段目 ― 訴求。もとの大見出しだったキャッチコピーがここに来る
-------------------------------------------------------------------------- */
#pl-main .pl-sec-lead {
margin: 0.7em 0 0;
color: var(--pl-body);
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
font-weight: 700;
line-height: 1.65;
letter-spacing: -0.01em;
}
/* --------------------------------------------------------------------------
3段目 ― 本文
-------------------------------------------------------------------------- */
#pl-main .pl-sec-desc {
margin: 1.1em 0 0;
color: var(--pl-muted);
font-size: 1rem;
font-weight: 400;
line-height: 1.95;
}
/* --------------------------------------------------------------------------
英字ラベル（意匠として残す場合のみ）
-------------------------------------------------------------------------- */
#pl-main .pl-sec-en {
display: block;
margin-block-end: 0.6em;
color: var(--pl-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
line-height: 1;
}
/* --------------------------------------------------------------------------
濃い背景の上に置くとき
-------------------------------------------------------------------------- */
#pl-main .pl-sec-head-dark .pl-sec-h2,
#pl-main .pl-sec-head-dark .pl-sec-h1 {
color: #fff;
}
#pl-main .pl-sec-head-dark .pl-sec-lead {
color: rgba(255, 255, 255, 0.92);
}
#pl-main .pl-sec-head-dark .pl-sec-desc,
#pl-main .pl-sec-head-dark .pl-sec-en {
color: rgba(255, 255, 255, 0.72);
}
/* ==========================================================================
ページ最上部の h1（サービス名を主役にする）
--------------------------------------------------------------------------
改修前は 生成AI実践研修社員が操作し、…
という形で、
サービス名が14pxの に埋もれ、ページを開いた瞬間に何のページか
分からなかった。サービス名を主、キャッチコピーを従に入れ替える。
========================================================================== */
#pl-main .pl-hero-h1 {
display: flex;
flex-direction: column;
gap: 0.45em;
margin: 0;
}
#pl-main .pl-hero-service {
color: var(--pl-ink);
font-size: clamp(2rem, 1.35rem + 2.5vw, 2.75rem);
/* 2026-08-15、900→700。理由は .pl-sec-h2 と同じ。 */
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.025em;
}
#pl-main .pl-hero-catch {
color: var(--pl-body);
font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
font-weight: 700;
line-height: 1.6;
letter-spacing: -0.01em;
}
#pl-main .pl-hero-h1-dark .pl-hero-service {
color: #fff;
}
#pl-main .pl-hero-h1-dark .pl-hero-catch {
color: rgba(255, 255, 255, 0.9);
}
/* page-header.php は中央寄せのページ見出しなので、そちらでは中央に揃える。 */
#pl-main .pl-hero-h1-center {
align-items: center;
text-align: center;
}
/* ==========================================================================
短い日本語が語中で折り返されるのを防ぐ
--------------------------------------------------------------------------
バッジや見出しで「相談窓／口」「オンライン対応／可」のように途中で切れると、
一瞬読み止まる。CJKでは既定でどこでも改行されるため、単語単位に切り替える。
長文には掛けない（かえって行が溢れる）。
========================================================================== */
/* overflow-wrap は付けないこと。付けるとどこでも折り返せるようになり、
keep-all の意味が消える。
2026-08-14、.pl-sec-h2 をここから外した。サービスページ4枚の節見出しを
一括で section-head.php に置き換えたところ、375px幅で "こんな困りごとは
ありませんか" のような句読点の無い長い一文が折り返せず、右にはみ出た。
keep-all は「区切りの無い文字の並びを途中で折り返さない」指定であって、
助詞の位置で折り返してくれるわけではない（コメントの前提が誤りだった）。
短いラベル（.pl-hero-service など）では意味があるが、.pl-sec-h2 は文章の
見出しなので、日本語の既定の折り返し（文字間どこでも可）に任せるべき。 */
#pl-main :is(.pl-hero-service, .pl-flow-title, .pl-worry-title),
#pl-main :is([class*="rounded-full"], [class*="rounded-lg"])[class*="px-"] {
word-break: keep-all;
}
/* サービス名の下に置く補足（対象地域・提供形態など）。
もとは緑の小さなラベルとして見出しの「上」にあったが、
見出しより先に読ませる情報ではないので下に移した。 */
#pl-main .pl-hero-meta {
margin: 1em 0 0;
color: var(--pl-muted);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* --------------------------------------------------------------------------
パンくず（page-header.php 用）
独自ヒーローのサービスページが自前で持っていたものを共通化した。
-------------------------------------------------------------------------- */
#pl-main .pl-page-crumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5em;
margin-block-end: 1.5em;
color: var(--pl-muted);
font-size: 14px;
line-height: 1.6;
}
#pl-main .pl-page-crumbs a {
color: var(--pl-muted);
text-decoration: none;
}
#pl-main .pl-page-crumbs a:hover,
#pl-main .pl-page-crumbs a:focus-visible {
color: var(--pl-link);
text-decoration: underline;
text-underline-offset: 0.2em;
}
#pl-main .pl-page-crumbs [aria-current="page"] {
color: var(--pl-body);
font-weight: 700;
}
/* 左寄せのヒーロー（page-header.php を使わないページ）用。
.pl-page-crumbs より後に置くこと（同じ詳細度なので後勝ちで効かせている）。 */
#pl-main .pl-page-crumbs-left {
justify-content: flex-start;
}
@media (max-width: 1023px) {
/* ヒーローが中央寄せに切り替わる幅では、パンくずも中央に戻す。 */
#pl-main .pl-page-crumbs-left {
justify-content: center;
}
}