/* ===== 2026-09-02 ヒーローに3行を載せる（指摘⑩） ここから ===== */

/* 岡田さん指摘⑩＋決定「A＝写真（動画）のまま、3行だけ配色を白系に振り替えて載せる」（2026-09-01）。
 * モック：C:\oka\work\_claude\HP_poc\app\src\pages\Index.tsx の HeroSection（361〜420行）。
 * HTMLは functions.php の同名マーカーブロックが出している。
 *
 * ■ 配色の考え方（ここを外すと読めなくなる）
 * ヒーローの背景は**写真ではなく動画**（top.css 290行で写真は opacity:0）。さらに
 * mix-blend-mode:screen の fx レイヤーが明るい画素を足す（top.css 375-389行）ので、
 * **背景の明るさに上限が無い**。よって「この写真なら読める」という測り方は成立しない。
 *   → **背後が純白（L=1.0）でもAAを満たす**ように、各要素に自前の地（幕）を持たせる。
 *
 * 幕の不透明度の逆算（白文字の場合。背後が純白のときの比）：
 *   黒 rgba(0,0,0,α)      … 4.5:1 に α≧0.51 ／ 3:1 に α≧0.40
 *   紺 rgba(20,28,58,α)   … 4.5:1 に α≧0.61 ／ 3:1 に α≧0.47
 * 採用＝**紺 0.65**。9/1に確定したコーポレート地色 #141c3a と同じ色なので色を増やさずに済み、
 * 純白背景でも 5.25:1 を確保する。
 *
 * ■ 破ってはいけない規則2つ
 * 1. **半透明の文字色を使わない。** 弱めたい要素は「地」と「枠」で弱め、文字は常に不透明
 *    （#fff か #141c3a）。非選択タブを白78%にすると地に対して約3.9:1 まで落ちてAA割れする。
 * 2. **アクセント青 #9ec1ff を紺幕の上に置かない。** 紺幕0.65に対して 2.88:1 で3:1を割る。
 *    #9ec1ff は不透明な紺地（#141c3a・9.2:1）専用。
 *
 * ■ 場所の確保に ResizeObserver を使っていない理由
 * .main_slider .wp-block-cover は **height:100vh の固定**（top.css 24-25行。min-heightではない）。
 * よって cover に padding-bottom を足しても**ヒーローの高さは1pxも変わらず、
 * 上下中央の中身が padding の半分だけ上へ逃げる**だけ。＝「帯の高さを測って親に伝える」対象が無い。
 * 帯の高さが変わるのは折返しが変わるとき＝**幅が変わるときだけ**なので、幅ごとの定数で足りる。
 * 定数は勘ではなく**実測した帯の高さ＋24px**を入れている（値は下の各段のコメント）。
 *
 * ■ 戻し方
 * このファイルを削除し、functions.php と top.js の同名マーカーブロックを削除する（3箇所）。
 * 帯だけ止めるなら add_filter( 'gasp_hero_actions_enabled', '__return_false' );
 */

/* --- 帯そのもの --- */
.gasp-hero-actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2; /* .swiper-wrapper は z-index:1、pagination/矢印は 2（top.css 286-321行）。同じ層に置く */
	display: flex;
	flex-direction: column;
	gap: var(--gasp-sp-16);
	box-sizing: border-box;
	padding: 0 max(24px, calc(50% - 512px)) 32px;
	pointer-events: none; /* 帯の余白部分でスライダーの操作を邪魔しない */
	/* 帯の縦位置は top.js が本文（詳しく見る →）の下端に合わせて入れる。
	   本文の高さはスライドごとに違うので切り替えのたびに動く。
	   フェードが2秒かかるので、その中で一緒に動かして跳ねて見えないようにする。 */
	transition: top .6s ease;
}
.gasp-hero-actions > * {
	pointer-events: auto;
}

/* 中央寄せにしている理由＝**モックは左寄せだが、このヒーローの本文は中央寄せ**
 * （h1・リード3段落・「詳しく見る →」がすべて has-text-align-center）。
 * A案は「写真ヒーローはそのままで3行だけ載せる」なので、
 * モックの配置ではなく**載せる先の型に合わせる**。左寄せに戻すなら justify-content を消す。 */
.gasp-hero-ctas,
.gasp-hero-badges,
.gasp-hero-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gasp-sp-12);
	margin: 0;
}

/* --- アイコン（mask-image。本文にSVGを埋めない既存方式に合わせる） --- */
.gasp-hero-ico::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --- CTA 3個（2026-10-01 から2行目。並び順は functions.php の出力順＝タブ → CTA → バッジ） --- */
.gasp-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--gasp-sp-8);
	min-height: 44px; /* タップ領域。8/28に「ボタンが小さすぎる」指摘があるので下限を切る */
	box-sizing: border-box;
	padding: var(--gasp-sp-12) var(--gasp-sp-24);
	border: 1px solid rgba(255, 255, 255, 0.60);
	border-radius: var(--gasp-r-12);
	background: rgba(20, 28, 58, 0.65); /* 純白背景でも 5.25:1 */
	color: #ffffff;
	font-size: var(--gasp-fs-16);
	font-weight: 500;
	line-height: var(--gasp-lh-tight);
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.gasp-hero-cta:hover,
.gasp-hero-cta:focus-visible {
	background: rgba(20, 28, 58, 0.82);
	color: #ffffff;
}
/* 第1ボタンだけ不透明な青で塗る＝背景に一切依存せず 4.83:1 */
.gasp-hero-cta--primary {
	border-color: #216be9;
	background: #216be9;
}
.gasp-hero-cta--primary:hover,
.gasp-hero-cta--primary:focus-visible {
	background: #1a56bb;
	border-color: #1a56bb;
}

/* --- バッジ 3個（2026-10-01 から3行目） --- */
.gasp-hero-badges {
	gap: var(--gasp-sp-8);
}
.gasp-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--gasp-sp-8);
	padding: var(--gasp-sp-8) var(--gasp-sp-12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--gasp-r-pill);
	background: rgba(20, 28, 58, 0.65);
	color: #ffffff;
	font-size: var(--gasp-fs-12);
	line-height: var(--gasp-lh-normal);
	white-space: nowrap;
}
.gasp-hero-badge.gasp-hero-ico::before {
	width: 14px;
	height: 14px;
}

/* --- スライドタブ 6個（2026-10-01 から1行目） --- */
.gasp-hero-tabs {
	gap: var(--gasp-sp-8);
}
.gasp-hero-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--gasp-sp-8);
	min-height: 40px;
	box-sizing: border-box;
	padding: var(--gasp-sp-8) var(--gasp-sp-12);
	border: 1px solid transparent;
	border-radius: var(--gasp-r-8);
	background: rgba(20, 28, 58, 0.65);
	color: #ffffff; /* 半透明の文字色にしない（規則1） */
	font-size: var(--gasp-fs-14);
	line-height: var(--gasp-lh-tight);
	text-decoration: none;
	overflow: hidden; /* 進捗バーを角丸で切る */
	transition: background-color .2s ease;
}
.gasp-hero-tab:hover,
.gasp-hero-tab:focus-visible {
	background: rgba(20, 28, 58, 0.82);
	color: #ffffff;
}
.gasp-hero-tab.gasp-hero-ico::before {
	width: 14px;
	height: 14px;
}
/* 選択中は不透明な白で塗る＝背景に一切依存せず 16.7:1 */
.gasp-hero-tab.is-active {
	background: #ffffff;
	border-color: #ffffff;
	color: #141c3a;
}
.gasp-hero-tab.is-active:hover,
.gasp-hero-tab.is-active:focus-visible {
	background: #ffffff;
	color: #141c3a;
}

/* 進捗バー。
 * Swiper 8.4.5 には autoplayTimeLeft イベントが無い（Swiper 9 で追加）ので、
 * 50msのJSタイマーではなく **CSSアニメーションを本物のイベントで毎回リセット**して動かす。
 * duration は top.js が CSS変数 --gasp-hero-tab-dur に入れる（delay + speed から算出）。
 * transform だけを動かすのでレイアウトを起こさない。 */
.gasp-hero-tab-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #216be9; /* 白地に対して 4.83:1（図形の3:1を満たす） */
	transform: scaleX(0);
	transform-origin: left center;
}
.gasp-hero-tab.is-active.is-running .gasp-hero-tab-bar {
	animation: gasp-hero-tab-progress var(--gasp-hero-tab-dur, 7500ms) linear forwards;
}
@keyframes gasp-hero-tab-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* --- 既存の丸ドットは帯があるときだけ隠す ---
 * 「帯があるとき」の判定に body.gasp-hero-actions-on を使っている理由＝
 * 当初は .main_slider:has(.gasp-hero-actions) と書いていたが、**:has() 非対応のブラウザで
 * 壊れ方が悪い**（padding-bottom が効かず本文と帯が重なる／ドットが消えず帯の上でクリックを奪う）。
 * どちらも「少し崩れる」ではなく操作できなくなる類なので、ブラウザ対応に依存しない
 * body クラス（functions.php の gasp_hero_actions_body_class）に変えた。2026-09-02 点検指摘。
 *
 * 理由＝ドットは bottom:30px で**帯のど真ん中に重なり、クリックを奪う**。
 * 役割もタブ（名前＋残り時間つき）の下位互換。
 * DOMもSwiperのpagination設定も触らないので、Swiper側は何も知らずに更新を続ける＝エラー経路を作らない。
 * 戻すときはこの1ルールを消す。左右矢印は帯と衝突しないので残している。 */
body.gasp-hero-actions-on .main_slider .swiper-pagination {
	display: none;
}

/* 2026-10-07 タンさん指摘 S1②：下の cover の padding-bottom 4か所を var(--gasp-hero-pad, 固定値) にした。
 * 767px以下だけ top.js の placeActions() が「帯の実高＋GAP(28)」を --gasp-hero-pad に入れる（10/1 にタブを「まず相談」の上へ移したあと、
 * 幅ごとの固定値では帯が下端で切れ、取引企業のバッジが見えなかった）。JSが動かないとき・768px以上は var() の第2引数＝従来の固定値のまま。
 * 戻し方：4か所を元の固定値（200/200/200/285px）に戻し、top.js の placeActions() にある同日マーカーの if…else ブロック（12行）を削除。 */
/* --- 幅ごとの場所の確保 ---
 * cover は height:100vh 固定なので、padding-bottom は中身を上へ逃がすだけ（高さは不変）。
 * 値＝**実測した帯の高さ ＋ 24px**。勘の値ではない。
 *
 * 帯の高さの実測（ビューポート800px・11幅・2026-09-02）：
 *   1920/1440/1024px … 176px（3行とも1段に収まる）
 *   900/768/700/640px … 172px（タブがアイコンのみになる）
 *   600/480px         … 164px（CTAが2段に折れる）
 *   420/400/375/320px … 257px（CTA・バッジ・タブがそれぞれ2〜3段に折れる）
 * 全11幅で本文と帯の重なりゼロを確認済み。 */
body.gasp-hero-actions-on .main_slider .wp-block-cover {
	/* 高さを内容に合わせる（top.css 24-25行の height:100vh を上書き）。
	 *
	 * 固定高のままだと**帯に本文が食い込む**。理由＝cover の中身は上下中央寄せなので、
	 * 本文の高さが「100vh − padding-bottom」を超えると上下に均等にはみ出し、
	 * 下へはみ出したぶんが帯に重なる。しかも**本文の高さはスライドごとに大きく違う**
	 * （実測・640px幅：一番短いスライド 523px ／ 一番高いスライド 800px ＝1.5倍）。
	 * 表示中のスライドだけを見て「重なっていない」と判断すると取りこぼす。
	 * 実際 640px では 108px 食い込んでいた（2026-09-02 実測）。
	 *
	 * min-height:100vh を残すので、本文が短いときの見た目（画面いっぱいのヒーロー）は変わらない。
	 *
	 * ※切替のたびに高さが跳ねないか＝**跳ねない**。effect:fade は全スライドをDOMに同時に置くので、
	 *   コンテナの高さは「一番高いスライド」で決まり、どのスライドを表示しても同じ。
	 *   640px幅で6スライドすべてに切り替えて高さ1143px一定・重なりゼロを実測で確認済み。 */
	height: auto;
	min-height: 100vh;
	padding-bottom: var(--gasp-hero-pad, 200px); /* 実測した帯の高さ176 + 24 */
}

@media (max-width: 1023px) {
	.gasp-hero-actions {
		padding-left: var(--gasp-sp-24);
		padding-right: var(--gasp-sp-24);
		gap: var(--gasp-sp-12);
	}
	/* タブはアイコンだけにする（6個×約140px＝約880pxが入らなくなるため） */
	.gasp-hero-tab-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.gasp-hero-tab {
		padding: var(--gasp-sp-8) var(--gasp-sp-8);
	}
	body.gasp-hero-actions-on .main_slider .wp-block-cover {
		padding-bottom: var(--gasp-hero-pad, 200px); /* 実測172 + 24 = 196。1段目と同じ値に丸めた */
	}
}

@media (max-width: 639px) {
	.gasp-hero-actions {
		padding-bottom: var(--gasp-sp-24);
	}
	.gasp-hero-cta {
		font-size: var(--gasp-fs-14);
		padding: var(--gasp-sp-12) var(--gasp-sp-16);
	}
	/* height:auto は上の既定側で全幅に当てているのでここでは書かない（重複させない）。 */
	body.gasp-hero-actions-on .main_slider .wp-block-cover {
		padding-bottom: var(--gasp-hero-pad, 200px); /* 実測164 + 24 = 188。1段目と同じ値に丸めた */
	}
}

/* 420px以下は3行がそれぞれ2〜3段に折れて帯が257pxまで伸びる（実測）。
 * 640px以下と同じ200pxでは本文に食い込むので、この幅だけ別に確保する。 */
@media (max-width: 439px) {
	body.gasp-hero-actions-on .main_slider .wp-block-cover {
		padding-bottom: var(--gasp-hero-pad, 285px); /* 実測257 + 24 = 281。他の段と同じく5px単位に丸めて285 */
	}
}

/* 動きを減らす設定のときはバーを動かさない。
 * ただし**選択状態（白い塗り）は残す**＝どのスライドを見ているかは分かる。 */
@media (prefers-reduced-motion: reduce) {
	.gasp-hero-tab.is-active.is-running .gasp-hero-tab-bar {
		animation: none;
		transform: scaleX(1);
	}
	.gasp-hero-cta,
	.gasp-hero-tab,
	.gasp-hero-actions {
		transition: none;
	}
}


/* --- アイコン12種（lucide 由来）---
 * tools/lucide_to_css.py で lucide-react の定義から生成した data URI。
 * 生成コマンド：
 *   python tools/lucide_to_css.py ".gasp-hero-ico--{k}::before" \
 *     phone:phone download:download users:users badge-check:partner shield:isms \
 *     building-2:clients code-xml:appdev cloud:azure server:ops database:data \
 *     file-text:ms365 briefcase:saas
 * lucide は ISC ライセンス（node_modules/lucide-react/dist/esm/icons/*.js の冒頭に表記）。
 * 手で書き換えず、変えるときは上のコマンドを実行し直す。 */
.gasp-hero-ico--phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--download::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpolyline%20points%3D%277%2010%2012%2015%2017%2010%27%2F%3E%3Cline%20x1%3D%2712%27%20x2%3D%2712%27%20y1%3D%2715%27%20y2%3D%273%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpolyline%20points%3D%277%2010%2012%2015%2017%2010%27%2F%3E%3Cline%20x1%3D%2712%27%20x2%3D%2712%27%20y1%3D%2715%27%20y2%3D%273%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--users::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--partner::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.85%208.62a4%204%200%200%201%204.78-4.77%204%204%200%200%201%206.74%200%204%204%200%200%201%204.78%204.78%204%204%200%200%201%200%206.74%204%204%200%200%201-4.77%204.78%204%204%200%200%201-6.75%200%204%204%200%200%201-4.78-4.77%204%204%200%200%201%200-6.76Z%27%2F%3E%3Cpath%20d%3D%27m9%2012%202%202%204-4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.85%208.62a4%204%200%200%201%204.78-4.77%204%204%200%200%201%206.74%200%204%204%200%200%201%204.78%204.78%204%204%200%200%201%200%206.74%204%204%200%200%201-4.77%204.78%204%204%200%200%201-6.75%200%204%204%200%200%201-4.78-4.77%204%204%200%200%201%200-6.76Z%27%2F%3E%3Cpath%20d%3D%27m9%2012%202%202%204-4%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--isms::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--clients::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%27%2F%3E%3Cpath%20d%3D%27M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2%27%2F%3E%3Cpath%20d%3D%27M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2%27%2F%3E%3Cpath%20d%3D%27M10%206h4%27%2F%3E%3Cpath%20d%3D%27M10%2010h4%27%2F%3E%3Cpath%20d%3D%27M10%2014h4%27%2F%3E%3Cpath%20d%3D%27M10%2018h4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%27%2F%3E%3Cpath%20d%3D%27M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2%27%2F%3E%3Cpath%20d%3D%27M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2%27%2F%3E%3Cpath%20d%3D%27M10%206h4%27%2F%3E%3Cpath%20d%3D%27M10%2010h4%27%2F%3E%3Cpath%20d%3D%27M10%2014h4%27%2F%3E%3Cpath%20d%3D%27M10%2018h4%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--appdev::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m18%2016%204-4-4-4%27%2F%3E%3Cpath%20d%3D%27m6%208-4%204%204%204%27%2F%3E%3Cpath%20d%3D%27m14.5%204-5%2016%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m18%2016%204-4-4-4%27%2F%3E%3Cpath%20d%3D%27m6%208-4%204%204%204%27%2F%3E%3Cpath%20d%3D%27m14.5%204-5%2016%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--azure::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17.5%2019H9a7%207%200%201%201%206.71-9h1.79a4.5%204.5%200%201%201%200%209Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17.5%2019H9a7%207%200%201%201%206.71-9h1.79a4.5%204.5%200%201%201%200%209Z%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--ops::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2720%27%20height%3D%278%27%20x%3D%272%27%20y%3D%272%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Crect%20width%3D%2720%27%20height%3D%278%27%20x%3D%272%27%20y%3D%2714%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Cline%20x1%3D%276%27%20x2%3D%276.01%27%20y1%3D%276%27%20y2%3D%276%27%2F%3E%3Cline%20x1%3D%276%27%20x2%3D%276.01%27%20y1%3D%2718%27%20y2%3D%2718%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2720%27%20height%3D%278%27%20x%3D%272%27%20y%3D%272%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Crect%20width%3D%2720%27%20height%3D%278%27%20x%3D%272%27%20y%3D%2714%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Cline%20x1%3D%276%27%20x2%3D%276.01%27%20y1%3D%276%27%20y2%3D%276%27%2F%3E%3Cline%20x1%3D%276%27%20x2%3D%276.01%27%20y1%3D%2718%27%20y2%3D%2718%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--data::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%275%27%20rx%3D%279%27%20ry%3D%273%27%2F%3E%3Cpath%20d%3D%27M3%205V19A9%203%200%200%200%2021%2019V5%27%2F%3E%3Cpath%20d%3D%27M3%2012A9%203%200%200%200%2021%2012%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%275%27%20rx%3D%279%27%20ry%3D%273%27%2F%3E%3Cpath%20d%3D%27M3%205V19A9%203%200%200%200%2021%2019V5%27%2F%3E%3Cpath%20d%3D%27M3%2012A9%203%200%200%200%2021%2012%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--ms365::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%27%2F%3E%3Cpath%20d%3D%27M14%202v4a2%202%200%200%200%202%202h4%27%2F%3E%3Cpath%20d%3D%27M10%209H8%27%2F%3E%3Cpath%20d%3D%27M16%2013H8%27%2F%3E%3Cpath%20d%3D%27M16%2017H8%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%27%2F%3E%3Cpath%20d%3D%27M14%202v4a2%202%200%200%200%202%202h4%27%2F%3E%3Cpath%20d%3D%27M10%209H8%27%2F%3E%3Cpath%20d%3D%27M16%2013H8%27%2F%3E%3Cpath%20d%3D%27M16%2017H8%27%2F%3E%3C%2Fsvg%3E");
}
.gasp-hero-ico--saas::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%27%2F%3E%3Crect%20width%3D%2720%27%20height%3D%2714%27%20x%3D%272%27%20y%3D%276%27%20rx%3D%272%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%27%2F%3E%3Crect%20width%3D%2720%27%20height%3D%2714%27%20x%3D%272%27%20y%3D%276%27%20rx%3D%272%27%2F%3E%3C%2Fsvg%3E");
}

/* ===== 2026-09-02 ヒーローに3行を載せる（指摘⑩） ここまで ===== */