@charset "UTF-8";

/* 全画面共通 */

/* ヘッダー */
.blogsy-header-nav-wrapper .menu-item a,
.blogsy-header-v-nav-wrapper .menu-item a {
	line-height: normal;
}
.blogsy-header-nav-wrapper .menu-item p,
.blogsy-header-v-nav-wrapper .menu-item p {
    margin-bottom: 0;
    margin-left: 2rem;
    color: #8a8ea6;
}
.pt-header-container a.icon_chat::before {
	content: "";
	width: 24px;
    height: 24px;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--gasp-sp-12);
	background-image: url(../images/icon/chat.svg);
}
@media (max-width: 767px) {
	.pt-logo.pt-header-element {
		max-width: 80%;
	}
	/* 2026-10-08 タンさん指摘 S4（ヘッダーの画面占有率が高い）。岡田さん「スマホサイズの時はロゴを小さくしたい。高さ半分くらい。」
	 * 親テーマ dynamic-styles.css の #site-header .pt-logo img{max-height:60px}（カスタマイザーの値）を半分に。
	 * クラスを1つ足して詳細度で勝たせる（読み込み順に頼らない）。コーポレート・採用（header-recruit2.php）とも同じロゴ出力なので両方に効く。
	 * 戻し方：この規則を削除。 */
	#site-header .pt-logo img.blogsy-logo-image,
	#site-sticky-header .pt-logo img.blogsy-logo-image {
		max-height: 30px;
		width: auto;
	}
	.pt-header-sticky .blogsy-offcanvas .offcanvas-content {
		display: flex;
		flex-direction: column;
		gap: var(--gasp-sp-48);
		padding: var(--gasp-sp-64) var(--gasp-sp-24);
	}
	.pt-header-sticky .blogsy-header-v-nav-wrapper ul>li {
		margin: var(--gasp-sp-8) 0;
	}
	.content-wrapper {
		margin-top: var(--gasp-sp-32);
	}
}

/* フッター */
@media (max-width: 767px) {
	.default-footer-main {
		padding-bottom: 0px;
	}
	#blogsy-footer-widgets {
		text-align: center;
	}
	#blogsy-footer-widgets  li.menu-item-has-children>a {
		margin-top: 3rem;
		margin-left: 0.8rem;
	}
}

#blogsy-footer-widgets  li.menu-item-has-children>a {
    /* 2026-10-01 Poppins → メイリオ（font.css の変数。岡田さん「サイト全て…フォントはメイリオに」）。
       ID 付きのセレクタで body の指定に勝つので、ここも同じ変数にしないとフッター見出しだけ Poppins が残る */
    font-family: var(--gasp-font-family, "Meiryo", "メイリオ", sans-serif);
    font-size: var(--gasp-fs-28);
}

/* ===== 2026-10-01 フッターをヘッダーと同じメニューに ここから =====
   岡田さん原文：「あと、ヘッダとフッタの内容は同じにしたほうがいいとのこと」→「フッターをヘッダーに（推奨）」。
   フッター右欄はヘッダーと同じメニュー（6列）を1本のウィジェットで出す（functions.php の同名ブロックが ul に
   .gasp-footer-main-menu を付ける）。何もしないと6列が縦に積まれるので grid にする
   （1280px 以上は6列を1行・1024〜1279px は 3列×2段・768〜1023px は 2列×3段＝下の規則）。
   ロゴ列 1/3 のまま6列を横1段にすると、見出しを縮めても収まらない（10/1 実測。下の 1280px の規則のコメント参照）。
   767px 以下は今までどおり縦1列・中央寄せ（上の @media の規則がそのまま効く）。
   ヘッダーのサブ項目には説明文（<p>「基本情報」など）が項目名の中に入っているので、フッターでは隠す。
   ※説明文を隠すのは**リードの判断**（岡田さんの発言・回答には無い。今までのフッターに説明文が無かったので見た目を寄せた）。
     出すならこの規則（.sub-menu p の display:none）を消すだけ。岡田さんに確認中
   戻し方＝このブロックを削除し、functions.php の同名ブロックを削除し、tools/footer_use_header_menu.php --revert で DB を戻す */
#blogsy-footer-widgets .gasp-footer-main-menu .sub-menu p {
	display: none;
}
/* RECRUIT の「職種一覧」は子（エンジニア職・営業職…）を持つ2段目の項目。上の見出しの規則
   （li.menu-item-has-children>a＝28px・スマホでは上に余白）が2段目にも当たり、見出しと同じ大きさになっていた（10/1 実測）。
   2段目以降は周りの項目と同じ大きさ・余白に戻す（3段目の職種はそのまま下に並ぶ＝ヘッダーと同じ中身） */
#blogsy-footer-widgets .gasp-footer-main-menu .sub-menu li.menu-item-has-children > a {
	font-size: inherit;
	margin-top: 0;
	margin-left: 0;
}
@media (min-width: 768px) {
	#blogsy-footer-widgets .gasp-footer-main-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--gasp-sp-32, 32px);
		row-gap: var(--gasp-sp-24, 24px);
	}
}
/* 768〜1023px は2列×3段。3列だと幅768で見出し「RESOURCES」が列からはみ出した（10/1 実測。幅1024 以上の3列でははみ出しなし） */
@media (min-width: 768px) and (max-width: 1023px) {
	#blogsy-footer-widgets .gasp-footer-main-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* 1280px 以上は6列を1行に。岡田さん「ここは幅いっぱいに使っていいから、文字を縮小して一行に収まるように」
   → リードの問い（ロゴを上へ回すか）に「ロゴは左のまま」。
   ロゴ列 1/3・メニュー列 2/3（親テーマの段組）のままだと、窓1920でも見出し18px・項目13pxではみ出した（10/1 実測）。
   ロゴ列 25%・メニュー列 75%・見出し 20px（他の幅は 28px）・項目 14px（同 15px）・列の間 12px・字下げ 12px（同 20px）で
   窓1280／1366 とも収まることを実測した。メニュー列の幅いっぱいに広げる（space-between）。
   ロゴ列を 25% に詰めると社名（26px・幅363px）が2行に折れ、紹介文も幅1280で1行増えた（撮影して気づいた）ので、
   この幅だけ社名 20px・紹介文 14px にした（1280／1300／1366／1920 で社名1行・紹介文は改行どおりの3行を実測）。
   1280px 未満は上の 3列×2段／2列×3段／縦1列のまま。この値のままだと 1260 で 10px・1200 で 55px・1100 で 130px はみ出す（1279 は収まる・10/1 実測）。
   もっと文字を小さくした場合は幅1024 でしか試していない（見出し18px・項目13pxでも約120px はみ出した）。1100〜1279 で小さい文字なら収まる幅があるかは未実測。
   ※次の3点は**リードの判断・岡田さんに確認中**（岡田さんの指示は「文字を縮小して一行に」「ロゴは左のまま」まで）：
     ロゴ列を 1/3 から 25% に詰めたこと／社名・紹介文も縮めたこと／1280px 未満は1行にしないこと（しきい値 1280px もリードが置いた値）
   ロゴ列・メニュー列の特定は :has（メニュー列＝この ul を含む列・ロゴ列＝その直前の列）。:has 非対応のブラウザでは
   列の幅が変わらず6列だけが1行になってはみ出すので、6列の指定も :has の付いたセレクタにまとめた（非対応なら上の 3列×2段のまま） */
@media (min-width: 1280px) {
	#blogsy-footer-widgets .blogsy-footer-column:has(+ .blogsy-footer-column .gasp-footer-main-menu) {
		flex: 0 0 25%;
		max-width: 25%;
	}
	#blogsy-footer-widgets .blogsy-footer-column:has(+ .blogsy-footer-column .gasp-footer-main-menu) h3 {
		font-size: 20px;
	}
	#blogsy-footer-widgets .blogsy-footer-column:has(+ .blogsy-footer-column .gasp-footer-main-menu) p {
		font-size: 14px;
	}
	#blogsy-footer-widgets .blogsy-footer-column:has(.gasp-footer-main-menu) {
		flex: 0 0 75%;
		max-width: 75%;
	}
	#blogsy-footer-widgets .blogsy-footer-column:has(.gasp-footer-main-menu) .gasp-footer-main-menu {
		grid-template-columns: repeat(6, auto);
		justify-content: space-between;
		column-gap: 12px;
	}
	#blogsy-footer-widgets .blogsy-footer-column:has(.gasp-footer-main-menu) .gasp-footer-main-menu > li > a {
		font-size: 20px;
	}
	#blogsy-footer-widgets .blogsy-footer-column:has(.gasp-footer-main-menu) .gasp-footer-main-menu .sub-menu {
		font-size: 14px;
		padding-left: 12px;
		white-space: nowrap;
	}
}
/* ===== 2026-10-01 フッターをヘッダーと同じメニューに ここまで ===== */

.default-footer-copyright ul {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1rem;
	line-height: 1.8rem;
}

/* プリローダー */
.site-preloader .preloader-inner .logo{
	background-image: url(../images/logo/logp.webp);
	background-size: contain;
}
.site-preloader .preloader-inner .spinner {
	--b: 8px;
	background: conic-gradient(#0000 10%,#f71081) content-box;
	mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
		radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
	mask-composite: intersect;
	animation:spinner_animation 0.5s infinite steps(10);
	mix-blend-mode: plus-lighter;
}
@keyframes spinner_animation {
	to{
		transform: rotate(1turn)
	}
}

.site-main-preloader {
	align-items: center;
    background: var(--pt-body-bg-color);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
	opacity: 0;
    visibility: hidden;
}


/* パンくずリスト */
.breadcrumbs {
    padding-left: var(--gasp-sp-24);
}
.breadcrumbs a,
.breadcrumbs p {
	 font-size: var(--gasp-fs-16);
}
.breadcrumbs a {
    text-decoration: underline;
}
@media (max-width: 767px) {
    .breadcrumbs {
        padding-left: 0px;
    }
}

.breadcrumbs .is-layout-flex {
    gap: inherit;
}

.breadcrumbs p:nth-child(2)::before,
.breadcrumbs p:nth-child(3)::before,
.breadcrumbs p:nth-child(4)::before {
	content: ">";
	margin: 0px var(--gasp-sp-12);
}

.breadcrumbs a {
	color: var(--pt-body-color);
}
.breadcrumbs a:hover {
	color: var(--pt-accent-color);
}

/* ポスト一覧 */
@media (max-width: 767px) {
    .block-post-list-item .image-container img {
        height: fit-content !important;
    }
    .block-post-list-item .image-container figure,
    .block-post-list-item .image-container a {
        height: unset !important;
    }
} 

/* テーブル表示 */
.wp-block-table table,
.wp-block-table table td {
	border: none;
}
.wp-block-table table tr {
	border-top: solid 1px #8a8ea6;
}
.wp-block-table table tr:nth-child(1) {
	border-top: none;
}

/* お問い合わせボタン */
.contact_button a.wp-block-button__link {
	background: transparent none;
    border-color: currentColor;
    border-width: 2px;
    border-style: solid;
    color: currentColor;
    padding-top: 0.8rem;
    padding-right: 2.2rem;
    padding-bottom: 0.8rem;
    padding-left: 2.2rem;
}
.contact_button a.wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent) !important;
    color: #ffffff !important;
    border-color: var(--wp--preset--color--accent) !important;
}
.wp-block-button.icon a::before {
	content: "";
	width: 24px;
    height: 24px;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--gasp-sp-4);
}
.wp-block-button.icon.icon_chat a::before {
	background-image: url(../images/icon/chat.svg);
}
.wp-block-button.icon.icon_moving a::before {
	background-image: url(../images/icon/moving.svg);
}
.wp-block-button.icon.icon_school a::before {
	background-image: url(../images/icon/school.svg);
}
@media (max-width: 767px) {
   .contact_button{
		width: 100%;
	}
}

/* 汎用 */
.wp-block-post-title a:focus,
.wp-block-heading a:focus {
	text-decoration: none;
}

.margin_top_0_ {
	margin-top: 0px;
}
.margin_top_5_ {
	margin-top: var(--gasp-sp-4);
}
.margin_top_10_ {
	margin-top: var(--gasp-sp-12);
}

@media (max-width: 767px) {
   .flex_gap_min_ {
		gap: 1rem;
	}
}

/* ===== 2026-08-25 バグ修正（段階A）ここから ===== */

/* [A-3] 投稿カードのWPブログ既定メタ（作成者アバター・コメント数・読了時間）を非表示
   ※祖先スコープ無し＝アーカイブ・検索結果など全一覧に効く。日付・カテゴリラベルは対象外の構造 */
.meta-details {
	display: none !important;
}

/* ===== 2026-08-25 バグ修正（段階A）ここまで ===== */

/* ===== 2026-09-02 日本語の改行位置 ここから ===== */

/* 岡田さん指摘⑧「各パネルの文章は改行位置が妥当になるようにして」。
 *
 * 実測した悪い改行（トップ／1382px・Range で1文字ずつ矩形を取って行を復元した結果）と、
 * このブロックを入れたあとの状態：
 *   「…システムを「設計・実装・運 / 用」まで…」   ← 熟語「運用」を割る       → **直った**
 *   「Japan Microsoft … 公式スポンサ / ー」        ← 長音記号が行頭に落ちる   → **直った**
 *   「HAL東京校 インターンシ / ップ制度」          ← 外来語を割る             → **直った**
 *   「インプリム認 / 定パートナー」                ← 熟語「認定」を割る       → **直っていない**
 *     ← チップ（ラベル）なので、下の「例外」で対象から外した。理由はそこに書いた。
 *       未解決のまま残している項目なので、消さないこと。
 *
 * 日本語は単語間に空白が無いので、既定（word-break:normal）ではどの文字の間でも改行できる。
 * 対処は2つに分かれる。
 *
 * (1) word-break: auto-phrase … 文節（ぶんせつ）の切れ目でだけ改行する。
 *     ブラウザ側が形態素解析して切れ目を決めるので、CSSに語彙を書く必要が無い。
 *     ※対応は **Chrome / Edge 119以降のみ**。Safari・Firefox は未対応で、
 *       宣言ごと捨てられて既定の改行に戻る（＝今と同じ見え方になるだけで壊れない）。
 *       行数が変わるので、Chrome系と Safari/Firefox で1行ぶん高さが違うことがある。
 *       カードは中身に合わせて伸びる作りなので、はみ出しや重なりにはならない。
 *     ※1行に収まらない長い語（URL等）は auto-phrase でも従来どおり途中で折れる
 *       （文節優先だが、収まらない場合はフォールバックする仕様）。
 *
 * (2) line-break: strict … 禁則を厳しくする。長音符「ー」・小書き仮名「ゃゅょっ」・
 *     繰り返し記号「々」を行頭に置かせない。**全ブラウザ対応**なので、
 *     上の「公式スポンサ / ー」はこちらだけで直る。
 *
 * (3) 見出しは text-wrap: balance で行の長さを揃える（Chrome114+/Safari17.5+/Firefox121+）。
 *     「1語だけ2行目に落ちる」形を防ぐ。既に top.css:223 で個別に当てているものがあるが、
 *     同じ値なので競合しない。
 *
 * :where() で包んで**詳細度を0**にしてある。理由＝**親テーマ blogsy**（子テーマ blogsy_gasp ではない。
 * 実体は wp-content/themes/blogsy/assets/css/style.css の 2835/3414/7663行）が
 *   .single-page-title / .default-post-list-item .title a / .post-wrapper .title a
 * の3箇所に word-break: break-word を明示していて、これは「長いタイトルを枠内に収める」
 * ための意図的な指定。詳細度0なら親テーマ側が勝つので、そこだけは今までどおりになる。
 *
 * 戻し方＝「ここから」〜「ここまで」の間を削除する。 */

:where(p, li, dt, dd, th, td, figcaption, blockquote, .wp-block-button__link) {
	word-break: auto-phrase;
	line-break: strict;
	overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6) {
	word-break: auto-phrase;
	line-break: strict;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* overflow-wrap: break-word を必ずセットで置く理由
 * auto-phrase は「文節の切れ目でしか折らない」ので、枠より長い文節が来ると
 * 行が枠からはみ出す。overflow-wrap は**他に折れる場所が無いときだけ**
 * 文字単位で折る指定なので、通常時は auto-phrase の見た目を一切変えず、
 * はみ出す場合にだけ従来の折り返しに戻る（安全弁）。 */

/* 例外：チップ・ラベル類には auto-phrase を当てない
 *
 * 実測した実害（トップ／1382px）：COMPANY節「パートナー・アライアンス」の
 * .gasp-partner-chips は display:grid で、**列幅が中身の min-content で決まる**。
 * auto-phrase を当てると「インプリム認定パートナー」全体が1つの塊になり
 * min-content が 180px に増えて、403px の枠に対して 502px 必要になった
 * （＝ページ全体に横スクロールが 8px → 84px に増えた。実測）。
 * overflow-wrap は**intrinsic sizing（min-content の計算）には効かない**ので、
 * この安全弁では直らない。
 *
 * そもそもチップは「文章」ではなく短いラベルなので、⑧の対象外。
 * 詳細度が 0,1,0 で上の :where()（0,0,0）に勝つ。 */
.gasp-partner-chips :where(p),
.gasp-solution-tab,
.gasp-case-chip,
.gasp-rsc-chip,
.recruit-tag,
.recruit-card-label,
.recruit-role-badge {
	word-break: normal;
}

/* ===== 2026-09-02 日本語の改行位置 ここまで ===== */

/* ===== 2026-09-02 カードの幅が行によって変わる問題 ここから =====
 *
 * 岡田さん「パネルの大きさがそろってない。」（投稿3011「当社のアプローチ」の5枚）
 *
 * ■ 実測（画面幅1536px・投稿3011）
 *   1行目（3枚）… カード幅 **414px** ／ 2行目（2枚）… カード幅 **430px**
 *   どちらの行も `.wp-block-columns`（flex）で、各列に本文側から
 *   `style="flex-basis:33.33%"` が直接書かれている。行の幅は 1290px、列の間隔は 24px。
 *
 * ■ 原因＝**flexbox の縮みが、行の埋まり具合で変わる**
 *   3枚の行 … 430×3 ＝ 1290 に、間隔 24×2 ＝ 48 が加わって 1338 > 1290。
 *             入りきらないので**3枚とも縮んで 414** になる。
 *   2枚の行 … 430×2 ＝ 860 に、間隔 24×1 ＝ 24 を足しても 884 < 1290。
 *             **縮まないので 430 のまま**。
 *   ＝「3枚並ぶ行だけが縮んでいる」ので、隣の2枚の行と幅が揃わない。
 *
 * ■ 直し方＝**最初から間隔のぶんを引いた幅**にする
 *   1列あたりが負担する間隔＝ 24px × 2本 ÷ 3列 ＝ **16px**。
 *   `flex-basis: calc(33.3333% - 16px)` にすると
 *     3枚の行 … 414×3 ＋ 48 ＝ 1290（ちょうど収まる＝**いまと同じ414のまま。見た目は変わらない**）
 *     2枚の行 … 414×2 ＋ 24 ＝ 852（**430→414 になり、3枚の行と揃う**）
 *   つまり**変わるのは「埋まっていない行」だけ**。
 *
 * ■ 対象を「列が全部3分の1の行」に限定している理由
 *   `:has()` を使って、**33.33%以外の列が1つでも混ざっている行は除外**している。
 *   実測：投稿3024（物流WMS導入）などに **33.33% と 66.66% を組み合わせた1:2の行**があり、
 *   そこに当てると意図した比率が崩れる。
 *   また固定ページ2（COMPANY）には **33.33%の列が4つ並ぶ行**があるが、
 *   こちらは計算しても 414×4＋72 ＝ 1728 > 1290 で結局縮むため、**結果は変わらない**（実測で確認）。
 *
 * ■ 前提にしている値
 *   ・列の間隔 24px … サイト内の `.wp-block-columns` すべてで 24px（実測）
 *   ・本文に書かれた `flex-basis` は 33.33%（55箇所・26ページ）のほか
 *     50/25/66.66/75/100/… があり、**33.33%だけを対象にしている**
 *
 * ■ 揃わないまま残るもの（CSSでは直せない）
 *   **行をまたいだ「高さ」は揃わない**（1行目390px・2行目414px）。
 *   行ごとに別の flex コンテナなので、CSSからは互いの高さを参照できない。
 *   揃えるには本文側で1つのグリッドにまとめる必要がある（＝post_content の変更）。
 *
 * 戻し方＝このブロックを消す。
 */
/* ★782px 以上に限定すること（2026-09-03 追記）
 *
 * WordPress標準は `@media (max-width: 781px)` で
 * `.wp-block-column { flex-basis: 100% !important }` を当てて**列を縦に積む**。
 * ここの `!important` はそれと同じ強さで、**後に読まれるぶんだけ勝ってしまう**ため、
 * 囲いを付けないとスマホでも 33.33% が残り、**3列が横並びのまま潰れる**。
 * 実測（375px幅・採用トップの「3つの約束」）：**カード幅 99px**（縦に積めば335px）。
 *
 * 9/2 にこのブロックを入れた時点から入っていた不具合で、
 * 9/3 にカードの地を動画にして高さを固定したときに目に見える形で出た。 */
@media (min-width: 782px) {
	.wp-block-columns:not(:has(> .wp-block-column:not([style*="flex-basis:33.33%"]))) > .wp-block-column {
		flex-basis: calc(33.3333% - 16px) !important;
	}
}
/* ===== 2026-09-02 カードの幅が行によって変わる問題 ここまで ===== */

/* ===== 2026-09-04 ボタンのアイコンをボタンの文字色で描く ここから =====
 *
 * 岡田さん指摘「ボタンのアイコンが消えてる」（人を知る 3792 の「詳しく見る」ボタン）。
 *
 * ■ 原因（実測）
 *   このファイルの上の `.wp-block-button.icon a::before` は
 *   **SVGを画像として敷いている**（`background-image`）。
 *   その SVG（`assets/images/icon/*.svg`）は **`fill="#FFFFFF"`＝白で塗られている**。
 *   コーポレートのボタンは紺地に白文字なので見えるが、
 *   **採用ページのボタンは白いカードの上の枠線ボタン（文字色 #282424）**なので、
 *   白いアイコンが白い面に重なって**見えなくなる**。
 *   `::before` 自体は生きていて、24px の空きだけが文字の左に残っていた。
 *   `icon_moving` を使っているのは 37 / 3693 / 3772 / 3786 / 3792 / 3853 / 3855 ＝**全部採用側**。
 *
 * ■ 直し方＝**画像で敷くのをやめて、マスクにして `currentColor` で塗る**
 *   こうするとアイコンは常に**ボタンの文字と同じ色**になる。
 *   ・紺地に白文字のボタン（コーポレート）… currentColor が白＝**今までと同じ見え方**
 *     **実測：ページ97のお問い合わせボタン（`icon_chat`）でアイコンの色が rgb(251,251,251)。**
 *     このボタンは本文側で `color:#fbfbfb` を明示しているので、白のまま変わらない。
 *     `icon_chat` はコーポレートの多くのページで使われているので、ここを確かめずに変えないこと。
 *   ・白地に濃い文字のボタン（採用）      … アイコンも濃い色になり**見えるようになる**
 *   SVGファイルは差し替えない（`fill` の値はマスクでは使われない）。
 *
 * ■ 上の元の規則は消していない
 *   同じ強さ（`.wp-block-button.icon.icon_xxx a::before`）で後から上書きする形にしてある。
 *   このブロックを削除すれば、元の「白い画像で敷く」挙動に戻る。
 */
.wp-block-button.icon a::before {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 24px 24px;
	        mask-size: 24px 24px;
}
.wp-block-button.icon.icon_chat a::before {
	background-image: none;
	-webkit-mask-image: url(../images/icon/chat.svg);
	        mask-image: url(../images/icon/chat.svg);
}
.wp-block-button.icon.icon_moving a::before {
	background-image: none;
	-webkit-mask-image: url(../images/icon/moving.svg);
	        mask-image: url(../images/icon/moving.svg);
}
.wp-block-button.icon.icon_school a::before {
	background-image: none;
	-webkit-mask-image: url(../images/icon/school.svg);
	        mask-image: url(../images/icon/school.svg);
}
/* 2026-10-08 タンさん指摘 K11-2（エントリーの符号に違和感＝ボタンの ↗ アイコン）。岡田さん「アイコンを外す。」
 * Excel のリード案「アイコンを外す（他のボタンに合わせる）」＝ icon_moving の ↗ をすべて出さない。
 * 使っているのは採用の7ページ・15個（2026-10-08 実測：37・3693・3772・3786・3792・3853・3855。エントリー4個のほか
 * 「人を知る」「詳しく見る」「中途採用エントリー」等も同じアイコン）。本文（DB）のクラスは触らず、表示だけ消す（24px の空きも消える）。
 * 戻し方：この規則を削除 */
.wp-block-button.icon.icon_moving a::before {
	display: none;
}
/* ===== 2026-09-04 ボタンのアイコンをボタンの文字色で描く ここまで ===== */

/* ===== 2026-09-25 CTAの2本目「資料をダウンロード」のアイコン ここから =====
 * 岡田さん「あれ、資料をダウンロードは？」（モックのトップ末尾CTAはボタン2本。1本目「無料相談を予約」を
 * 入れたあとに2本目が無いことへの指摘）。
 * 上の 2026-09-04 ブロックと同じ仕組み（currentColor をマスクで塗る）で `icon_download` を足す。
 * SVG＝ `../images/icon/download.svg`。中身はヒーロー帯の `.gasp-hero-ico--download`（hero-actions.css 331行）と
 * 同じ lucide の download（ISC ライセンス）を、data URI ではなくファイルにしたもの。
 * 戻し方＝このブロックと download.svg を削除する（DB側のボタンは update_cta_download_button_corp.php の戻し方参照）。 */
.wp-block-button.icon.icon_download a::before {
	background-image: none;
	-webkit-mask-image: url(../images/icon/download.svg);
	        mask-image: url(../images/icon/download.svg);
}
/* ===== 2026-09-25 CTAの2本目「資料をダウンロード」のアイコン ここまで ===== */

/* ===== 2026-09-22 寸法の段（両サイト共通の尺度） ここから =====

  岡田さん「コーポレートサイトと採用サイトがそろってない。細かいところまで、仕様を揃えて欲しい。
            余白とかパネルサイズとか、文字のサイズとか。」（2026-09-22）

  ここが**両サイトの寸法の正**。top.css も recruit.css も、この変数を読む。
  値を変えるときは**ここだけ**を直す（各ファイルの実数は変換済みで、もう直接書かれていない）。

  段の案＝ChatGPT(gpt-5.6-luna) 2026-09-22。当て方（どの値をどの段に寄せるか）は
  tools\scale_map.json が正。変換は tools\apply_scale.mjs（undo で1件ずつ戻せる）。

  単位は px に統一している。rem を使わないのは、このテーマのルート font-size が
  親テーマの Customizer で 62.5%/53%/50%（＝10px/8.48px/8px）と**画面幅で変わる**ため。
  px と rem が混在すると、幅を跨いだ瞬間に両者がずれる（2026-09-18 に特定した「揃わない」の原因）。

  ブレークポイントは 1024px と 600px の2つだけ。親テーマが使っている値に乗せてある
  （子テーマ側で別の境界を作ると、切り替わりが2回起きて同じ症状を作り直すため）。

  ★対象外＝パネル・帯・カードの大きさとコンテンツ幅。
    値の近さで段に寄せると意味が壊れるため（帯430px/410px は最も近い段が480pxで、
    当てると両方70px高くなる。読み物パネル980pxは1200pxへ220px広がる）。
    この10種は1つずつ決める。scale_map.json の _size_excluded 参照。

  戻し方：node tools\apply_scale.mjs undo  ＋ このブロックを削除。
  （まるごと戻すなら _taihi\blogsy_gasp_20260922_phase0\ からフォルダを戻す）
*/
:root {
	/* 文字サイズ 6段。数字は「PCでの値」。狭い幅では下の @media で段ごと下がる */
	--gasp-fs-12: 12px;
	--gasp-fs-14: 14px;
	--gasp-fs-16: 16px;   /* 本文 */
	--gasp-fs-20: 20px;   /* 小見出し */
	--gasp-fs-28: 28px;   /* 中見出し */
	--gasp-fs-40: 40px;   /* 大見出し */

	/* 行間 4段。単位なし＝文字サイズに追従する。
	   ★ここだけ ChatGPT の案を採っていない。向こうの案は px 指定（本文16px→行間28px、
	     大見出し40px→48px のように文字サイズごとの絶対値）だった。px にすると、
	     上の @media で文字サイズが段ごと下がったときに**行間が追従せず**、
	     狭い幅で行が間延びする。単位なしなら文字サイズに比例して縮むので、
	     段を1つ動かすだけで両方そろう。＝リードの判断（2026-09-22）で、岡田さんの指示ではない */
	--gasp-lh-1: 1;          /* ボタン・タブなど1行のもの */
	--gasp-lh-tight: 1.4;    /* 見出し */
	--gasp-lh-normal: 1.6;   /* 短い本文・カードの中 */
	--gasp-lh-loose: 1.8;    /* 読ませる本文（日本語は広めが読みやすい） */

	/* 余白 4px刻みの10段 */
	--gasp-sp-4: 4px;
	--gasp-sp-8: 8px;
	--gasp-sp-12: 12px;
	--gasp-sp-16: 16px;
	--gasp-sp-24: 24px;
	--gasp-sp-32: 32px;
	--gasp-sp-48: 48px;
	--gasp-sp-64: 64px;
	--gasp-sp-96: 96px;
	--gasp-sp-128: 128px;

	/* 角丸 4段 */
	--gasp-r-4: 4px;
	--gasp-r-8: 8px;
	--gasp-r-12: 12px;
	--gasp-r-pill: 9999px;   /* 丸ボタン。999px と 9999px の2通りがあったのを1つにした */
}

@media screen and (max-width: 1024px) {
	:root {
		--gasp-fs-20: 18px;
		--gasp-fs-28: 24px;
		--gasp-fs-40: 36px;
	}
}

@media screen and (max-width: 600px) {
	:root {
		--gasp-fs-16: 15px;
		--gasp-fs-20: 18px;
		--gasp-fs-28: 22px;
		--gasp-fs-40: 32px;
	}
}
/* ===== 2026-09-22 寸法の段（両サイト共通の尺度） ここまで ===== */