@charset "utf-8";
/* =========================================================
   サービス個別ページ 共通デザイン（2026-09-18 新規）
   --------------------------------------------------------
   出自：page-web-support.php にインライン実装されていたデザインを
         汎用スコープ .pg_svc に移植したもの。
   方針：
     - 既存サイトのカラートーン（#005b9f / #111 / #F4F4F4 / 白カード）は変えない
     - すべて .pg_svc 配下。ページ外・既存ページには一切影響させない
     - web-support（.pg_websupport）は従来どおりインラインCSSのまま。本CSSとは独立
   読み込み：各 page-web-*.php が wp_head priority 100 で <link> 出力
   ========================================================= */

/* 和文書体（At-Land Design System）。集客販促系4本でのみ使用 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

/* ---------------------------------------------------------
   トークン（既存サイト × At-Land Design System の折衷）
   ・骨格／主アクセント＝既存サイト（/web-support/ との連続性）
   ・インクの黒／第2アクセント／英字書体＝At-Land Design System
   ・--ws-accent2 は各ページ側で上書きする（Web系=青／販促系=橙）
   --------------------------------------------------------- */
.pg_svc{
	/* 既存サイト由来 */
	--ws-accent:#005b9f;
	--ws-accent-lt:#0a7bd0;
	--ws-accent-bg:#eef4fa;
	/* At-Land Design System 由来 */
	--ws-ink:#0B0B0B;
	--al-blue:#2B6CFF;
	--al-purple:#7A4DFF;
	--al-orange:#FF6A1F;
	--al-green:#1FB26B;
	--al-brown:#704030;
	--ws-accent2:var(--al-blue);
	--ws-accent2-bg:rgba(43,108,255,.08);
	--ws-font-en:"Inter","Helvetica Neue",Arial,sans-serif;
	/* 共通 */
	--ws-ink-2:#3d444b;
	--ws-ink-3:#6d757d;
	--ws-line:#e4e7ea;
	--ws-line-2:#eef0f2;
	--ws-surface:#ffffff;
	--ws-shadow:0 1px 2px rgba(11,11,11,.04), 0 14px 36px rgba(11,11,11,.06);
	--ws-shadow-lift:0 2px 4px rgba(11,11,11,.05), 0 22px 48px rgba(11,11,11,.10);
	--ws-r:2rem;
	--ws-r-sm:1.2rem;
	--ws-ease:cubic-bezier(.22,.61,.36,1);
}
/* 第2アクセント：ドロワーの既存2分類に合わせる */
.pg_svc--web{ --ws-accent2:var(--al-blue);   --ws-accent2-bg:rgba(43,108,255,.08); }
.pg_svc--promo{ --ws-accent2:var(--al-orange); --ws-accent2-bg:rgba(255,106,31,.08); }

/* ---- 英字・数字は Inter（At-Land Design System） ---- */
.pg_svc .ws_eyebrow,
.pg_svc .ws_num,
.pg_svc .ws_fvStats dt,
.pg_svc .ws_fvStats dd,
.pg_svc .ws_toc a:before,
.pg_svc .ws_cycle_step,
.pg_svc .ws_cycle_title em,
.pg_svc .ws_roles_label,
.pg_svc .ws_values > li:before,
.pg_svc .ws_case_meta,
.pg_svc .ws_case_ba_lb,
.pg_svc .ws_case_ba_num,
.pg_svc .ws_faq_item summary:before,
.pg_svc .ws_faq_item .ws_faq_a:before,
.pg_svc .ws_hpair_en{
	font-family:var(--ws-font-en);
	font-feature-settings:"tnum" 1,"cv05" 1;
}

/* ---- .h-pair：英大見出し＋和文サブ（At-Land Design System の看板型） ---- */
.pg_svc .ws_hpair{ margin:0 0 3.2rem; }
.pg_svc .ws_hpair_en{
	display:block; margin:0 0 1rem;
	font-size:1.3125rem; font-weight:600; letter-spacing:.2em; line-height:1.4;
	color:var(--ws-accent2); text-transform:uppercase;
}

/* ---- スクロール装飾の主張を抑える ---- */
.pg_svc .pg_whoweare_vision > .js_scrollTxt{ opacity:.25; }

/* ---- 見出し内の字送りを締める ---- */
.pg_svc .ws_title,
.pg_svc .ws_h3,
.pg_svc .ws_num{ letter-spacing:.01em; }

/* =========================================================
   FV
   ========================================================= */
/* FV は .bl_subFv01_description が flex-wrap。タイトル枠とリード文が別行に折り返すが、
   リード文の <strong> は行高が大きく親 <p> の上端より 6.7px はみ出すため、
   間隔ゼロだと和文サブタイトル（.subtile）と重なる。行間の隙間で逃がす。 */
.pg_svc .bl_subFv01_description{ row-gap:1.6rem; }
.pg_svc .bl_subFv01 .ws_fvLead{
	margin:0; font-size:1.5313rem; line-height:2.1; letter-spacing:.05em;
}
.pg_svc .bl_subFv01 .ws_fvLead strong{
	display:block; margin-bottom:1.6rem;
	font-size:2.0125rem; font-weight:700; line-height:1.75;
}
.pg_svc .ws_fvStats{
	position:relative; z-index:100;
	list-style:none; margin:6.4rem 0 0; padding:3.2rem 0 0;
	display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem;
	border-top:1px solid rgba(17,17,17,.12);
}
.pg_svc .ws_fvStats > div{ position:relative; }
.pg_svc .ws_fvStats > div:not(:first-child)::before{
	content:"";
	position:absolute; left:-1.2rem; top:.3rem; bottom:.3rem;
	width:1px; background:rgba(17,17,17,.12);
}
.pg_svc .ws_fvStats > div:first-child dd{ color:var(--ws-accent); }
.pg_svc .ws_fvStats dt{
	display:flex; align-items:center; gap:.6rem;
	margin:0 0 .8rem; font-size:1.225rem; letter-spacing:.14em;
	color:rgba(17,17,17,.45); text-transform:uppercase;
}
.pg_svc .ws_fvStats dt::before{
	content:"";
	width:.5rem; height:.5rem; border-radius:999px; flex-shrink:0;
	background:var(--ws-accent);
}
.pg_svc .ws_fvStats dd{
	margin:0; color:var(--ws-ink); font-size:2.275rem; font-weight:700; line-height:1.3;
	font-feature-settings:"tnum" 1; letter-spacing:.01em;
}
.pg_svc .ws_fvStats dd small{
	display:block; margin-top:.6rem;
	font-size:1.225rem; font-weight:400; letter-spacing:.06em;
	color:rgba(17,17,17,.55);
}
@media screen and (max-width:560px){
	.pg_svc .bl_subFv01 .ws_fvLead{ font-size:1.3563rem; line-height:2; }
	.pg_svc .bl_subFv01 .ws_fvLead strong{ font-size:1.7063rem; }
	.pg_svc .ws_fvStats{ grid-template-columns:1fr; gap:2rem; margin-top:4.4rem; padding-top:2.4rem; }
	.pg_svc .ws_fvStats dd{ font-size:1.925rem; }
	.pg_svc .ws_fvStats > div:not(:first-child)::before{ display:none; }
}

/* ---- FV 背景をグレイ化（ダーク → 既存サイトのグレイトーン #F4F4F4） ---- */
.pg_svc .bl_subFv01.cl_black{
	background-color:#f4f4f4;
	position:relative;
	overflow:hidden;
}
.pg_svc .bl_subFv01.cl_black::before{
	content:"";
	position:absolute;
	top:-18rem; right:-14rem;
	width:46rem; height:46rem;
	background:radial-gradient(circle at center, rgba(0,91,159,.10), rgba(0,91,159,0) 70%);
	pointer-events:none;
}
.pg_svc .bl_subFv01.cl_black .bl_subFv01_description{ color:var(--ws-ink); }
.pg_svc .bl_subFv01.cl_black .subtile{
	position:relative;
	display:inline-block;
	margin-top:.4rem;
	padding-left:2rem;
	color:var(--ws-ink-3);
	letter-spacing:.08em;
}
.pg_svc .bl_subFv01.cl_black .subtile::before{
	content:"";
	position:absolute;
	left:0; top:.9em;
	width:1.4rem; height:2px;
	background:var(--ws-accent);
}
.pg_svc .bl_subFv01 .ws_fvLead strong{ color:var(--ws-ink); }
.pg_svc .bl_subFv01 .ws_fvLead span{ color:var(--ws-ink-2); }
.pg_svc .ws_fvLead_hl{
	color:var(--ws-accent);
	background:linear-gradient(transparent 64%, var(--ws-accent-bg) 64%);
}

/* =========================================================
   パンくず
   ========================================================= */
.pg_svc .ws_breadcrumb{
	margin:0 auto; padding:2.8rem 0 0;
	width:min(100% - 3.2rem, 120rem);
}
.pg_svc .ws_breadcrumb ol{
	list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
}
.pg_svc .ws_breadcrumb li{ font-size:1.225rem; color:var(--ws-ink-3); letter-spacing:.06em; }
.pg_svc .ws_breadcrumb li + li > a:before{ content:"/"; margin-right:.9rem; color:#c3c9cf; }
.pg_svc .ws_breadcrumb li[aria-current]:before{ content:"/"; margin-right:.9rem; color:#c3c9cf; }
.pg_svc .ws_breadcrumb a{ color:var(--ws-ink-3); text-decoration:none; transition:color .2s var(--ws-ease); }
.pg_svc .ws_breadcrumb a:hover{ color:var(--ws-accent); }

/* =========================================================
   カード（既存 .pg_whoweare_vision_mission を上書き）
   ========================================================= */
.pg_svc .pg_whoweare_vision_mission{
	margin-top:4.8rem;
	align-items:stretch;
	padding:6.4rem 6.4rem;
	border-radius:var(--ws-r);
	box-shadow:var(--ws-shadow);
}
.pg_svc .pg_whoweare_vision_mission:first-child{ margin-top:7.2rem; }
@media screen and (max-width:960px){
	.pg_svc .pg_whoweare_vision_mission{ padding:5.2rem 4rem; }
}
@media screen and (max-width:560px){
	.pg_svc .pg_whoweare_vision_mission{
		margin-top:2.8rem; padding:3.6rem 2.4rem; border-radius:1.6rem;
	}
	.pg_svc .pg_whoweare_vision_mission:first-child{ margin-top:4rem; }
}

/* ---- セクション見出し ---- */
.pg_svc .ws_head{ margin:0 0 3.2rem; }
.pg_svc .ws_eyebrow{
	display:flex; align-items:center; gap:1.4rem;
	margin:0 0 1.6rem; font-size:1.225rem; letter-spacing:.18em;
	color:var(--ws-ink-3); text-transform:uppercase;
}
.pg_svc .ws_num{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:3.4rem; height:3.4rem; padding:0 .8rem;
	border-radius:999px; background:var(--ws-accent); color:#fff;
	font-size:1.225rem; font-weight:700; letter-spacing:.06em;
	font-feature-settings:"tnum" 1;
}
.pg_svc .ws_eyebrow:after{
	content:""; flex:1; height:1px; background:var(--ws-line);
}
.pg_svc .ws_title{
	margin:0; font-size:2.625rem; font-weight:700; line-height:1.55; color:var(--ws-ink);
}
.pg_svc .ws_h3{
	margin:4rem 0 1.6rem; font-size:1.75rem; font-weight:700; line-height:1.6; color:var(--ws-ink);
	display:flex; align-items:center; gap:1.2rem;
}
.pg_svc .ws_h3:before{
	content:""; width:2.4rem; height:2px; background:var(--ws-accent); flex-shrink:0;
}
@media screen and (max-width:560px){
	.pg_svc .ws_head{ margin-bottom:2.4rem; }
	.pg_svc .ws_title{ font-size:2.0125rem; line-height:1.6; }
	.pg_svc .ws_h3{ font-size:1.6188rem; }
}

/* ---- 本文（14px下限を確実に守る） ---- */
.pg_svc .ws_body,
.pg_svc .ws_block p,
.pg_svc .ws_block li,
.pg_svc .ws_block dt,
.pg_svc .ws_block dd,
.pg_svc .ws_block th,
.pg_svc .ws_block td,
.pg_svc .ws_block summary,
.pg_svc .ws_block label{
	font-size:1.4438rem; line-height:2.05; color:var(--ws-ink-2);
}
.pg_svc .ws_body{ margin:0 0 1.8rem; }
.pg_svc .ws_body:last-child{ margin-bottom:0; }
.pg_svc .ws_body--lead{
	font-size:1.6188rem; font-weight:500; line-height:1.95; color:var(--ws-ink);
}
.pg_svc .ws_block small{ font-size:1.225rem; }
@media screen and (max-width:560px){
	.pg_svc .ws_body,
	.pg_svc .ws_block p,
	.pg_svc .ws_block li{ font-size:1.3563rem; line-height:1.95; }
	.pg_svc .ws_body--lead{ font-size:1.4875rem; }
}

/* =========================================================
   目次
   ========================================================= */
.pg_svc .ws_toc ol{
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(2,1fr); gap:0 4.8rem; counter-reset:ws-toc;
}
.pg_svc .ws_toc li{ counter-increment:ws-toc; border-top:1px solid var(--ws-line-2); }
.pg_svc .ws_toc li:nth-child(1),
.pg_svc .ws_toc li:nth-child(2){ border-top:0; }
.pg_svc .ws_toc a{
	display:flex; align-items:center; gap:1.6rem;
	min-height:5.2rem; padding:1.2rem 0;
	color:var(--ws-ink); text-decoration:none; line-height:1.6;
	transition:color .2s var(--ws-ease), padding-left .2s var(--ws-ease);
}
.pg_svc .ws_toc a:before{
	content:counter(ws-toc,decimal-leading-zero);
	color:var(--ws-accent); font-weight:700; font-size:1.225rem;
	font-feature-settings:"tnum" 1; letter-spacing:.08em; flex-shrink:0;
}
.pg_svc .ws_toc a:hover{ color:var(--ws-accent); padding-left:.6rem; }
@media screen and (max-width:560px){
	.pg_svc .ws_toc ol{ grid-template-columns:1fr; gap:0; }
	.pg_svc .ws_toc li:nth-child(2){ border-top:1px solid var(--ws-line-2); }
}

/* =========================================================
   既存 service_* パーツの再調整（このページ配下のみ）
   ========================================================= */
.pg_svc .el_textBlock_txt4_wrapper .service_catch{
	margin:0 0 2.8rem; font-size:1.75rem;
}
.pg_svc .el_textBlock_txt4_wrapper .service_catch span{
	display:inline-block; padding:.9rem 2.2rem;
	border-radius:999px; background:var(--ws-ink); color:#fff;
	font-size:1.4875rem; font-weight:700; line-height:1.7; letter-spacing:.04em;
}
.pg_svc .el_textBlock_txt4_wrapper .service_question{
	margin:0; padding:3.2rem 3.2rem;
	border-radius:var(--ws-r-sm); background:var(--ws-accent-bg); border:1px solid #dce7f1;
}
.pg_svc .el_textBlock_txt4_wrapper .service_question_label{
	margin:0 0 .8rem; font-size:1.2688rem; font-weight:500; line-height:1.8;
	letter-spacing:.1em; color:var(--ws-accent);
}
.pg_svc .el_textBlock_txt4_wrapper .service_question_title{
	margin:0 0 2.4rem; font-size:1.6625rem; font-weight:700; line-height:1.7; color:var(--ws-ink);
}
.pg_svc .el_textBlock_txt4_wrapper .service_choice{
	display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none;
}
.pg_svc .el_textBlock_txt4_wrapper .service_choice li{
	display:flex; align-items:flex-start; gap:1.4rem;
	padding:1.4rem 0; border-top:1px solid rgba(0,91,159,.12);
	font-size:1.4rem; line-height:1.9; color:var(--ws-ink-2); border-radius:0;
}
.pg_svc .el_textBlock_txt4_wrapper .service_choice li:first-child{ border-top:0; padding-top:0; }
.pg_svc .el_textBlock_txt4_wrapper .service_choice li:last-child{ padding-bottom:0; }
.pg_svc .el_textBlock_txt4_wrapper .service_choice_key{
	width:2.8rem; height:2.8rem; margin-top:.25rem; flex-shrink:0;
	background:var(--ws-accent); color:#fff; border-radius:999px;
	display:inline-flex; align-items:center; justify-content:center;
	font-size:1.225rem; font-weight:700; letter-spacing:0;
}
.pg_svc .pg_whoweare_vision_mission .img{
	background:#fafbfc; border-radius:var(--ws-r-sm); overflow:hidden;
	box-shadow:var(--ws-shadow);
	width:28rem; height:28rem;
}
.pg_svc .pg_whoweare_vision_mission .img .earth{ width:11rem; height:11rem; }
.pg_svc .row_set{ gap:4.8rem; align-items:flex-start; }
.pg_svc .row_set .cont{ flex:1; min-width:0; }
@media screen and (max-width:960px){
	.pg_svc .row_set{ flex-direction:column; gap:3.2rem; }
	.pg_svc .pg_whoweare_vision_mission .img{ width:100%; height:20rem; }
}
@media screen and (max-width:560px){
	.pg_svc .el_textBlock_txt4_wrapper .service_question{ padding:2.4rem 2rem; }
	.pg_svc .el_textBlock_txt4_wrapper .service_catch span{ font-size:1.3563rem; padding:.8rem 1.8rem; }
	.pg_svc .el_textBlock_txt4_wrapper .service_question_title{ font-size:1.4875rem; }
	.pg_svc .el_textBlock_txt4_wrapper .service_choice li{ font-size:1.3125rem; }
	.pg_svc .pg_whoweare_vision_mission .img{ height:16rem; }
	.pg_svc .pg_whoweare_vision_mission .img .earth{ width:8rem; height:8rem; }
}

/* =========================================================
   2カラム対比（ws_roles）
   ========================================================= */
.pg_svc .ws_roles{
	display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:2.4rem;
	margin:3.2rem 0 0;
}
.pg_svc .ws_roles_col{
	position:relative; padding:3.2rem 3.2rem 2.8rem;
	border:1px solid var(--ws-line); border-radius:var(--ws-r-sm); background:#fff;
	display:flex; flex-direction:column;
}
.pg_svc .ws_roles_col:before{
	content:""; position:absolute; inset:0 auto auto 0;
	width:100%; height:3px; border-radius:var(--ws-r-sm) var(--ws-r-sm) 0 0;
	background:var(--ws-ink-3);
}
.pg_svc .ws_roles_col--atland:before{ background:var(--ws-accent); }
.pg_svc .ws_roles_label{
	margin:0 0 1.2rem; font-size:1.225rem!important; letter-spacing:.16em;
	color:var(--ws-ink-3); text-transform:uppercase;
}
.pg_svc .ws_roles_col--atland .ws_roles_label{ color:var(--ws-accent); }
.pg_svc .ws_roles_title{
	margin:0 0 2rem; font-size:1.8375rem; font-weight:700; line-height:1.6; color:var(--ws-ink);
}
.pg_svc .ws_roles_col ul{ list-style:none; margin:0 0 2.4rem; padding:0; flex:1; }
.pg_svc .ws_roles_col li{
	position:relative; padding:1rem 0 1rem 2.2rem; border-top:1px solid var(--ws-line-2);
	font-size:1.4rem!important; line-height:1.85;
}
.pg_svc .ws_roles_col li:first-child{ border-top:0; }
.pg_svc .ws_roles_col li:before{
	content:""; position:absolute; left:.2rem; top:1.85rem;
	width:.7rem; height:.7rem; border-radius:999px; background:var(--ws-ink-3);
}
.pg_svc .ws_roles_col--atland li:before{ background:var(--ws-accent); }
.pg_svc .ws_roles_note{
	margin:0; padding-top:1.8rem; border-top:1px dashed var(--ws-line);
	font-size:1.2688rem!important; line-height:1.9; color:var(--ws-ink-3);
}
.pg_svc .ws_roles_join{
	display:flex; align-items:center; justify-content:center; position:relative;
}
.pg_svc .ws_roles_join span{
	width:4.4rem; height:4.4rem; border-radius:999px;
	border:1px solid var(--ws-line); background:#fff; color:var(--ws-ink-3);
	display:inline-flex; align-items:center; justify-content:center;
	font-size:1.575rem; line-height:1;
}
.pg_svc .ws_roles_result{
	grid-column:1 / -1; position:relative;
	margin:1.2rem 0 0; padding:2.8rem 3.2rem;
	border-radius:var(--ws-r-sm); background:var(--ws-ink); color:#fff;
	font-size:1.6625rem!important; font-weight:700; line-height:1.8; text-align:center;
}
.pg_svc .ws_roles_result:before{
	content:""; position:absolute; top:-1.2rem; left:50%; margin-left:-.9rem;
	width:0; height:0; border-left:.9rem solid transparent; border-right:.9rem solid transparent;
	border-bottom:1.2rem solid var(--ws-ink);
}
@media screen and (max-width:960px){
	.pg_svc .ws_roles{ grid-template-columns:1fr; gap:1.6rem; }
	.pg_svc .ws_roles_join{ padding:.4rem 0; }
}
@media screen and (max-width:560px){
	.pg_svc .ws_roles_col{ padding:2.4rem 2rem 2rem; }
	.pg_svc .ws_roles_title{ font-size:1.6188rem; }
	.pg_svc .ws_roles_result{ font-size:1.4438rem!important; padding:2.2rem 2rem; }
}

/* =========================================================
   縦の導線でつなぐステップ（ws_cycle）＝運用サイクル／導入の流れ 兼用
   ========================================================= */
.pg_svc .ws_cycle{
	list-style:none; margin:3.2rem 0 0; padding:0; position:relative;
}
.pg_svc .ws_cycle:before{
	content:""; position:absolute; left:2.1rem; top:2.4rem; bottom:2.4rem;
	width:1px; background:linear-gradient(180deg,var(--ws-accent),rgba(0,91,159,.15));
}
.pg_svc .ws_cycle > li{
	position:relative; padding:0 0 4rem 7.2rem;
}
.pg_svc .ws_cycle > li:last-child{ padding-bottom:0; }
.pg_svc .ws_cycle_step{
	position:absolute; left:0; top:0;
	width:4.2rem; height:4.2rem; border-radius:999px;
	background:#fff; border:1px solid var(--ws-accent); color:var(--ws-accent);
	display:inline-flex; align-items:center; justify-content:center;
	font-size:1.225rem!important; font-weight:700; letter-spacing:.04em;
	font-feature-settings:"tnum" 1;
}
.pg_svc .ws_cycle_title{
	margin:.6rem 0 1.6rem; font-size:1.8375rem; font-weight:700; line-height:1.5; color:var(--ws-ink);
}
.pg_svc .ws_cycle_title em{
	display:block; margin-bottom:.5rem; font-style:normal;
	font-size:1.225rem; letter-spacing:.16em; color:var(--ws-ink-3); text-transform:uppercase;
}
.pg_svc .ws_cycle ul{
	list-style:none; margin:0 0 1.6rem; padding:0;
	display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 3.2rem;
}
.pg_svc .ws_cycle ul li{
	position:relative; padding-left:1.8rem; font-size:1.3563rem!important; line-height:1.9;
}
.pg_svc .ws_cycle ul li:before{
	content:""; position:absolute; left:0; top:1.35rem;
	width:.9rem; height:1px; background:var(--ws-accent);
}
.pg_svc .ws_cycle_note{
	margin:0; padding:1.4rem 1.8rem; border-radius:.8rem; background:#f7f8f9;
	font-size:1.2688rem!important; line-height:1.85; color:var(--ws-ink-3);
}
@media screen and (max-width:560px){
	.pg_svc .ws_cycle:before{ left:1.8rem; }
	.pg_svc .ws_cycle > li{ padding:0 0 3.2rem 5.4rem; }
	.pg_svc .ws_cycle_step{ width:3.6rem; height:3.6rem; font-size:1.225rem!important; }
	.pg_svc .ws_cycle_title{ font-size:1.6188rem; }
	.pg_svc .ws_cycle ul{ grid-template-columns:1fr; }
}

/* =========================================================
   カード群（ws_cards）＝サービス内容・4本柱 等
   ========================================================= */
.pg_svc .ws_cards{
	list-style:none; margin:3.2rem 0 0; padding:0;
	display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem;
}
.pg_svc .ws_cards--3{ grid-template-columns:repeat(3,1fr); }
.pg_svc .ws_cards > li{
	padding:3rem 3rem 2.6rem; border:1px solid var(--ws-line); border-radius:var(--ws-r-sm);
	background:#fff; transition:border-color .25s var(--ws-ease), transform .25s var(--ws-ease);
}
.pg_svc .ws_cards > li:hover{ border-color:var(--ws-accent); transform:translateY(-2px); }
.pg_svc .ws_cards_title{
	display:flex; align-items:center; gap:1.2rem;
	margin:0 0 1.8rem; font-size:1.6188rem; font-weight:700; line-height:1.5; color:var(--ws-ink);
}
.pg_svc .ws_cards_title i{
	width:.6rem; height:2.2rem; border-radius:999px; background:var(--ws-accent); flex-shrink:0;
}
.pg_svc .ws_cards ul{ list-style:none; margin:0; padding:0; }
.pg_svc .ws_cards ul li{
	position:relative; padding:.9rem 0 .9rem 2rem; border-top:1px solid var(--ws-line-2);
	font-size:1.3563rem!important; line-height:1.85;
}
.pg_svc .ws_cards ul li:first-child{ border-top:0; }
.pg_svc .ws_cards ul li:before{
	content:""; position:absolute; left:.2rem; top:1.75rem;
	width:.6rem; height:.6rem; border-radius:999px; background:var(--ws-accent);
}
.pg_svc .ws_cards_txt{ margin:0; font-size:1.3563rem!important; line-height:1.9; color:var(--ws-ink-2); }
@media screen and (max-width:960px){
	.pg_svc .ws_cards--3{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:560px){
	.pg_svc .ws_cards,
	.pg_svc .ws_cards--3{ grid-template-columns:1fr; gap:1.6rem; }
	.pg_svc .ws_cards > li{ padding:2.4rem 2rem 2rem; }
	.pg_svc .ws_cards_title{ font-size:1.4875rem; }
}

/* =========================================================
   価値の一覧（ws_values）
   ========================================================= */
.pg_svc .ws_values{
	list-style:none; margin:3.2rem 0 0; padding:0;
	display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
	background:var(--ws-line); border:1px solid var(--ws-line); border-radius:var(--ws-r-sm); overflow:hidden;
	counter-reset:ws-val;
}
.pg_svc .ws_values > li{
	background:#fff; padding:2.6rem 2.4rem;
	display:flex; gap:1.4rem; align-items:flex-start;
	font-size:1.4rem!important; line-height:1.85; color:var(--ws-ink-2);
	counter-increment:ws-val;
}
.pg_svc .ws_values > li:before{
	content:counter(ws-val,decimal-leading-zero);
	color:var(--ws-accent); font-size:1.225rem; font-weight:700; letter-spacing:.08em;
	font-feature-settings:"tnum" 1; flex-shrink:0; padding-top:.45rem;
}
@media screen and (max-width:960px){
	.pg_svc .ws_values{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:560px){
	.pg_svc .ws_values{ grid-template-columns:1fr; }
	.pg_svc .ws_values > li{ padding:2rem 1.8rem; font-size:1.3125rem!important; }
}

/* =========================================================
   まとめ（引用調のブロック）
   ========================================================= */
.pg_svc .ws_summary{
	margin:4.8rem 0 0; padding:3.6rem 4rem;
	border-radius:var(--ws-r-sm); background:#fafbfc; border-left:3px solid var(--ws-accent);
}
.pg_svc .ws_summary_lead{
	margin:0 0 1.8rem; font-size:1.8375rem!important; font-weight:700; line-height:1.75; color:var(--ws-ink);
}
.pg_svc .ws_summary_cycle{
	display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin:2.4rem 0 0;
}
.pg_svc .ws_summary_cycle span{
	padding:.7rem 1.8rem; border-radius:999px; background:#fff; border:1px solid var(--ws-accent);
	color:var(--ws-accent); font-size:1.3125rem; font-weight:700; letter-spacing:.04em;
}
.pg_svc .ws_summary_cycle i{ color:#b9c1c8; font-style:normal; font-size:1.225rem; }
@media screen and (max-width:560px){
	.pg_svc .ws_summary{ padding:2.6rem 2rem; }
	.pg_svc .ws_summary_lead{ font-size:1.575rem!important; }
	.pg_svc .ws_summary_cycle span{ font-size:1.225rem; padding:.6rem 1.4rem; }
}

/* =========================================================
   FAQ
   ========================================================= */
.pg_svc .ws_faq{ margin:3.2rem 0 0; border-top:1px solid var(--ws-line); }
.pg_svc .ws_faq_item{ border-bottom:1px solid var(--ws-line); }
.pg_svc .ws_faq_item summary{
	list-style:none; cursor:pointer; position:relative;
	display:flex; align-items:flex-start; gap:1.6rem;
	padding:2.4rem 5.6rem 2.4rem 0; min-height:4.4rem;
	font-size:1.575rem!important; font-weight:700; line-height:1.75; color:var(--ws-ink);
	transition:color .2s var(--ws-ease);
}
.pg_svc .ws_faq_item summary::-webkit-details-marker{ display:none; }
.pg_svc .ws_faq_item summary:hover{ color:var(--ws-accent); }
.pg_svc .ws_faq_item summary:before{
	content:"Q"; flex-shrink:0; color:var(--ws-accent);
	font-size:1.3125rem; font-weight:700; letter-spacing:.06em; padding-top:.3rem;
}
.pg_svc .ws_faq_item summary:after{
	content:""; position:absolute; right:1.2rem; top:3rem;
	width:1.1rem; height:1.1rem; margin-top:-.6rem;
	border-right:2px solid var(--ws-accent); border-bottom:2px solid var(--ws-accent);
	transform:rotate(45deg); transition:transform .25s var(--ws-ease);
}
.pg_svc .ws_faq_item[open] summary:after{ transform:rotate(-135deg); margin-top:0; }
.pg_svc .ws_faq_item .ws_faq_a{
	display:flex; gap:1.6rem; margin:0; padding:0 4rem 2.8rem 0;
	font-size:1.4rem!important; line-height:2.05; color:var(--ws-ink-2);
}
.pg_svc .ws_faq_item .ws_faq_a:before{
	content:"A"; flex-shrink:0; color:var(--ws-ink-3);
	font-size:1.3125rem; font-weight:700; letter-spacing:.06em;
}
@media screen and (max-width:560px){
	.pg_svc .ws_faq_item summary{ font-size:1.4rem!important; padding:2rem 3.6rem 2rem 0; gap:1.2rem; }
	.pg_svc .ws_faq_item summary:after{ right:.4rem; top:2.6rem; }
	.pg_svc .ws_faq_item .ws_faq_a{ font-size:1.3125rem!important; padding:0 0 2.2rem; gap:1.2rem; }
}

/* =========================================================
   CTA
   ========================================================= */
.pg_svc .ws_cta{
	margin:3.6rem 0 0; padding:3.6rem 4rem;
	border-radius:var(--ws-r-sm); background:var(--ws-accent-bg); border:1px solid #dce7f1;
	display:flex; align-items:center; justify-content:space-between; gap:3.2rem; flex-wrap:wrap;
}
.pg_svc .ws_cta_body{ flex:1; min-width:28rem; }
.pg_svc .ws_cta_title{
	margin:0 0 .8rem; font-size:1.75rem!important; font-weight:700; line-height:1.7; color:var(--ws-ink);
}
.pg_svc .ws_cta_text{ margin:0; font-size:1.3563rem!important; line-height:1.9; color:var(--ws-ink-3); }
.pg_svc .ws_cta_btn{
	display:inline-flex; align-items:center; justify-content:center; gap:1.2rem;
	min-height:5.6rem; padding:1.6rem 3.2rem; border-radius:999px; flex-shrink:0;
	background:var(--ws-accent); color:#fff; border:none; cursor:pointer;
	font-size:1.4438rem; font-weight:700; letter-spacing:.04em; text-decoration:none;
	transition:background .25s var(--ws-ease), transform .25s var(--ws-ease), box-shadow .25s var(--ws-ease);
}
.pg_svc .ws_cta_btn:after{
	content:""; width:.9rem; height:.9rem; border-top:2px solid currentColor; border-right:2px solid currentColor;
	transform:rotate(45deg); transition:transform .25s var(--ws-ease);
}
.pg_svc .ws_cta_btn:hover{
	background:var(--ws-accent-lt); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,91,159,.28);
}
.pg_svc .ws_cta_btn:hover:after{ transform:rotate(45deg) translate(2px,-2px); }

/* 最終CTA（黒面で締める） */
.pg_svc .ws_cta--final{
	margin-top:4.8rem; padding:6.4rem 6.4rem; border:none; background:var(--ws-ink);
	flex-direction:column; text-align:center; gap:2.8rem;
}
.pg_svc .ws_cta--final .ws_cta_body{ min-width:0; }
.pg_svc .ws_cta--final .ws_cta_title{ font-size:2.45rem!important; color:#fff; margin-bottom:1.6rem; }
.pg_svc .ws_cta--final .ws_cta_text{ color:rgba(255,255,255,.7); font-size:1.4438rem!important; }
.pg_svc .ws_cta--final .ws_cta_btn{ background:#fff; color:var(--ws-ink); min-width:32rem; }
.pg_svc .ws_cta--final .ws_cta_btn:hover{ background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.pg_svc .ws_cta_note{
	margin:0; font-size:1.225rem!important; line-height:1.9; letter-spacing:.06em; color:rgba(255,255,255,.5);
}
@media screen and (max-width:960px){
	.pg_svc .ws_cta{ flex-direction:column; align-items:flex-start; gap:2.4rem; }
	.pg_svc .ws_cta_btn{ width:100%; }
}
@media screen and (max-width:560px){
	.pg_svc .ws_cta{ padding:2.6rem 2rem; }
	.pg_svc .ws_cta--final{ padding:4rem 2.4rem; }
	.pg_svc .ws_cta_title{ font-size:1.575rem!important; }
	.pg_svc .ws_cta--final .ws_cta_title{ font-size:1.8375rem!important; }
	.pg_svc .ws_cta--final .ws_cta_btn{ min-width:0; }
}

/* =========================================================
   関連ページ
   ========================================================= */
.pg_svc .ws_related{
	list-style:none; margin:3.2rem 0 0; padding:0;
	display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem;
}
.pg_svc .ws_related a{
	display:flex; flex-direction:column; height:100%;
	padding:2.8rem 2.8rem; min-height:4.4rem;
	border:1px solid var(--ws-line); border-radius:var(--ws-r-sm); background:#fff;
	text-decoration:none; color:var(--ws-ink);
	transition:border-color .25s var(--ws-ease), transform .25s var(--ws-ease), box-shadow .25s var(--ws-ease);
}
.pg_svc .ws_related a:hover{
	border-color:var(--ws-accent); transform:translateY(-3px); box-shadow:var(--ws-shadow-lift);
}
.pg_svc .ws_related_ttl{
	display:flex; align-items:center; gap:1rem;
	font-size:1.575rem; font-weight:700; line-height:1.5; margin-bottom:1.2rem;
}
.pg_svc .ws_related_ttl:after{
	content:""; width:.8rem; height:.8rem; border-top:2px solid var(--ws-accent); border-right:2px solid var(--ws-accent);
	transform:rotate(45deg); margin-left:auto; transition:transform .25s var(--ws-ease);
}
.pg_svc .ws_related a:hover .ws_related_ttl:after{ transform:rotate(45deg) translate(2px,-2px); }
.pg_svc .ws_related_txt{
	display:block; font-size:1.3125rem; line-height:1.9; color:var(--ws-ink-3);
}
@media screen and (max-width:560px){
	.pg_svc .ws_related{ grid-template-columns:1fr; gap:1.6rem; }
	.pg_svc .ws_related a{ padding:2.2rem 2rem; }
}

/* =========================================================
   放置リスク／時系列（ws_risk）
   ========================================================= */
.pg_svc .ws_risk{ list-style:none; margin:0; padding:0; border-left:2px solid var(--ws-line); }
.pg_svc .ws_risk_item{ position:relative; padding:0 0 3.2rem 3rem; }
.pg_svc .ws_risk_item:last-child{ padding-bottom:0; }
.pg_svc .ws_risk_item:before{
	content:""; position:absolute; left:-.6rem; top:.3rem;
	width:1.1rem; height:1.1rem; border-radius:999px; background:var(--ws-accent); border:2px solid #fff; box-shadow:0 0 0 1px var(--ws-line);
}
.pg_svc .ws_risk_item dt{ font-size:1.225rem; font-weight:800; color:var(--ws-accent); margin-bottom:.4rem; }
.pg_svc .ws_risk_item dd{ margin:0; font-size:1.3125rem; line-height:1.85; color:var(--ws-ink-2); }

/* =========================================================
   表（料金プラン／他社比較 共用）
   ========================================================= */
.pg_svc .ws_priceTable{ width:100%; border-collapse:separate; border-spacing:0; background:var(--ws-surface); border-radius:var(--ws-r-sm); overflow:hidden; box-shadow:var(--ws-shadow); }
.pg_svc .ws_priceTable th, .pg_svc .ws_priceTable td{ border-bottom:1px solid var(--ws-line-2); padding:1.6rem 1.8rem; font-size:1.225rem; text-align:left; vertical-align:top; }
.pg_svc .ws_priceTable thead th{ background:var(--ws-ink); color:#fff; font-size:1.225rem; font-weight:800; }
.pg_svc .ws_priceTable thead th.is-main{ background:var(--ws-accent); }
.pg_svc .ws_priceTable tbody th{ font-weight:700; color:var(--ws-ink); width:22%; background:var(--ws-line-2); }
.pg_svc .ws_priceTable td.is-main{ background:var(--ws-accent-bg); }
.pg_svc .ws_priceTable .ws_planPrice{ font-size:1.6625rem; font-weight:800; color:var(--ws-accent); margin-top:.4rem; }
.pg_svc .ws_priceTable .ws_planPrice small{ font-size:1.05rem; font-weight:400; color:var(--ws-ink-3); }
.pg_svc .ws_priceNote{ font-size:1.1375rem; color:var(--ws-ink-3); margin-top:1.4rem; line-height:1.8; }
.pg_svc .ws_tentative{ font-size:1.0938rem; color:var(--ws-ink-3); }
.pg_svc .ws_cards_note{ margin:1rem 0 0; font-size:1.1375rem; color:var(--ws-ink-3); }
@media screen and (max-width:560px){
	.pg_svc .ws_priceTable{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* =========================================================
   ▼ここから下は本CSSで新規追加（web-support には無かった汎用パーツ）
   ========================================================= */

/* ---- 実績カード（社名を伏せ、業種・規模・変化で見せる） ---- */
.pg_svc .ws_cases{
	list-style:none; margin:3.2rem 0 0; padding:0;
	display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem;
}
.pg_svc .ws_cases > li{
	padding:3rem 3rem 2.6rem; border:1px solid var(--ws-line); border-radius:var(--ws-r-sm); background:#fff;
}
.pg_svc .ws_case_meta{
	margin:0 0 1.4rem!important; font-size:1.1375rem!important; letter-spacing:.14em;
	color:var(--ws-ink-3); text-transform:uppercase;
}
.pg_svc .ws_case_ttl{
	margin:0 0 1.8rem!important; font-size:1.6188rem!important; font-weight:700; line-height:1.6; color:var(--ws-ink);
}
.pg_svc .ws_case_ba{
	display:flex; align-items:center; gap:1.6rem; margin:0 0 1.6rem; padding:1.8rem 2rem;
	border-radius:.8rem; background:var(--ws-accent-bg);
}
.pg_svc .ws_case_ba_col{ flex:1; min-width:0; }
.pg_svc .ws_case_ba_lb{ display:block; margin-bottom:.4rem; font-size:1.1375rem!important; letter-spacing:.12em; color:var(--ws-ink-3); }
.pg_svc .ws_case_ba_num{ display:block; font-size:1.925rem!important; font-weight:800; line-height:1.3; color:var(--ws-ink); font-feature-settings:"tnum" 1; }
.pg_svc .ws_case_ba_col--after .ws_case_ba_num{ color:var(--ws-accent); }
.pg_svc .ws_case_ba_arrow{ flex-shrink:0; color:#b9c1c8; font-style:normal; font-size:1.575rem; }
.pg_svc .ws_case_txt{ margin:0!important; font-size:1.3563rem!important; line-height:1.9; color:var(--ws-ink-2); }
@media screen and (max-width:560px){
	.pg_svc .ws_cases{ grid-template-columns:1fr; gap:1.6rem; }
	.pg_svc .ws_cases > li{ padding:2.4rem 2rem 2rem; }
	.pg_svc .ws_case_ba{ padding:1.4rem 1.6rem; gap:1.2rem; }
	.pg_svc .ws_case_ba_num{ font-size:1.6625rem!important; }
}

/* ---- 注記バー（先行案内・仮置き・要相談などの断り書き） ---- */
.pg_svc .ws_notice{
	margin:2.4rem 0 0; padding:1.8rem 2.2rem;
	border-left:3px solid var(--ws-ink-3); border-radius:0 .8rem .8rem 0; background:#f7f8f9;
	font-size:1.2688rem!important; line-height:1.9; color:var(--ws-ink-3);
}
.pg_svc .ws_notice strong{ color:var(--ws-ink); font-weight:700; }

/* ---- 番号なしの定義リスト（対応範囲・用語解説など） ---- */
.pg_svc .ws_defs{ margin:3.2rem 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ws-line); border:1px solid var(--ws-line); border-radius:var(--ws-r-sm); overflow:hidden; }
.pg_svc .ws_defs > div{ background:#fff; padding:2.6rem 2.4rem; }
.pg_svc .ws_defs dt{ margin:0 0 .8rem; font-size:1.4875rem!important; font-weight:700; line-height:1.6; color:var(--ws-ink); }
.pg_svc .ws_defs dd{ margin:0; font-size:1.3563rem!important; line-height:1.9; color:var(--ws-ink-2); }
@media screen and (max-width:560px){
	.pg_svc .ws_defs{ grid-template-columns:1fr; }
	.pg_svc .ws_defs > div{ padding:2rem 1.8rem; }
}

/* ---- タグ列（対応カート・対応サーバー等の羅列） ---- */
.pg_svc .ws_tags{ list-style:none; margin:2.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.8rem 1rem; }
.pg_svc .ws_tags li{
	padding:.7rem 1.6rem; border-radius:999px; border:1px solid var(--ws-line); background:#fff;
	font-size:1.2688rem!important; line-height:1.6; color:var(--ws-ink-2);
}

/* =========================================================
   At-Land Design System の第2アクセント適用（小面積のみ）
   主アクセント #005b9f は既存サイトとの連続性のため据え置き。
   識別・強調の点だけを DS の色に置き換える。
   ========================================================= */
.pg_svc .ws_num{ background:var(--ws-accent2); }
.pg_svc .ws_cycle_step{ border-color:var(--ws-accent2); color:var(--ws-accent2); }
.pg_svc .ws_cards_title i{ background:var(--ws-accent2); }
.pg_svc .ws_summary{ border-left-color:var(--ws-accent2); }
.pg_svc .ws_summary_cycle span{ border-color:var(--ws-accent2); color:var(--ws-accent2); }
.pg_svc .ws_roles_col--atland:before{ background:var(--ws-accent2); }
.pg_svc .ws_values > li:before{ color:var(--ws-accent2); }
.pg_svc .ws_fvLead_hl{
	color:var(--ws-accent2);
	background:linear-gradient(transparent 64%, var(--ws-accent2-bg) 64%);
}
/* 改善後の数値は緑（DS の成功色） */
.pg_svc .ws_case_ba_col--after .ws_case_ba_num{ color:var(--al-green); }
.pg_svc .ws_case_ba{ background:var(--ws-accent2-bg); }

/* =========================================================
   DS 強化（2026-09-19）
   ・セクション見出しを看板型（英大見出し＋和文サブ）にする
   ・第2アクセント（Web系=青 #2B6CFF ／集客販促系=橙 #FF6A1F）を
     見出し罫・CTA・セクション背景・FVの色面まで広げる
   骨格（FVレイアウト・カード・余白）と主アクセント #005b9f は据え置き。
   ========================================================= */
.pg_svc{
	--ws-accent2-soft:rgba(43,108,255,.22);
	--ws-accent2-dk:#1B4FD6;
}
.pg_svc--web{
	--ws-accent2-soft:rgba(43,108,255,.22);
	--ws-accent2-dk:#1B4FD6;
}
.pg_svc--promo{
	--ws-accent2-soft:rgba(255,106,31,.26);
	--ws-accent2-dk:#DF5410;
}

/* ---- 看板型見出し（英字を主役に・和文をサブに） ----
   🔴 セレクタは .ws_head を挟んで3階層にする。
      2階層だと本文の .pg_svc .ws_block p（詳細度 0,3,0）に負けて効かない。 */
.pg_svc .ws_head{ margin:0 0 3.6rem; }
.pg_svc .ws_head .ws_eyebrow{
	gap:1.6rem; margin:0 0 1.2rem;
	font-family:var(--ws-font-en);
	font-size:2.45rem; font-weight:700; line-height:1.25; letter-spacing:.04em;
	color:var(--ws-accent2);
}
.pg_svc .ws_head .ws_eyebrow:after{
	height:2px;
	background:linear-gradient(90deg, var(--ws-accent2-soft), rgba(11,11,11,0));
}
.pg_svc .ws_head .ws_title{
	font-size:2.1rem; line-height:1.65; letter-spacing:.02em;
}
.pg_svc .ws_head .ws_num{
	min-width:3.8rem; height:3.8rem;
	font-size:1.3563rem; letter-spacing:.04em;
	background:var(--ws-accent2);
}
.pg_svc .ws_h3:before{ background:var(--ws-accent2); }
@media screen and (max-width:560px){
	.pg_svc .ws_head .ws_eyebrow{ font-size:1.85rem; gap:1.2rem; margin-bottom:1rem; }
	.pg_svc .ws_head .ws_num{ min-width:3.2rem; height:3.2rem; font-size:1.225rem; }
	.pg_svc .ws_head .ws_title{ font-size:1.7rem; line-height:1.7; }
}

/* ---- セクション背景（カード上端に第2アクセントの色面） ---- */
.pg_svc .pg_whoweare_vision_mission{
	border-top:3px solid var(--ws-accent2);
	background-image:linear-gradient(180deg, var(--ws-accent2-bg) 0, rgba(255,255,255,0) 16rem);
}

/* ---- CTA ----
   🔴 :not(.ws_cta--final) を外さない。最終CTAの黒面（--ws-ink）を
      同詳細度・後勝ちで塗りつぶしてしまい、白文字が読めなくなる。 */
.pg_svc .ws_cta:not(.ws_cta--final){
	background:var(--ws-accent2-bg);
	border-color:var(--ws-accent2-soft);
}
.pg_svc .ws_cta_btn{ background:var(--ws-accent2); }
.pg_svc .ws_cta_btn:hover{
	background:var(--ws-accent2-dk);
	box-shadow:0 10px 26px var(--ws-accent2-soft);
}
/* 🔴 最終CTA（黒面）の上端に色線を戻さない。2026-09-19 にユーザー指示で削除。
      黒面そのものが十分な区切りになっており、線が足されると黒帯の上に
      浮いた1本の棒に見える。他のセクションの上端線を外したのと同じ理由。 */
.pg_svc .ws_cta--final{ border-top:0; }
.pg_svc .ws_cta--final .ws_cta_btn{ color:var(--ws-accent2-dk); }

/* ---- FV の色面 ---- */
.pg_svc .bl_subFv01.cl_black::before{
	background:radial-gradient(circle at center, var(--ws-accent2-bg), rgba(255,255,255,0) 70%);
}
.pg_svc .bl_subFv01.cl_black .subtile::before{ background:var(--ws-accent2); }

/* =========================================================
   At-Land Design System 本適用：集客販促系の4本だけ（2026-09-19）
   対象：web-ad / web-branding / web-ec / web-recruit（.pg_svc--promo）
   ・主アクセントごと DS の橙 #FF6A1F に置き換える（既存の青は残さない）
   ・和文は Zen Kaku Gothic New、英字・数字は Inter
   🔴 Web系5本（.pg_svc--web）は従来どおり主アクセント #005b9f のまま。
      ヘッダー・フッター・トップは対象外（共通パーツなので触らない）。
   ========================================================= */
.pg_svc--promo{
	--ws-accent:var(--al-orange);
	--ws-accent-lt:#FF8A4D;
	--ws-accent-bg:rgba(255,106,31,.08);
	--ws-accent2:var(--al-orange);
	--ws-accent2-bg:rgba(255,106,31,.08);
	font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
/* 青がベタ書きで残っている箇所を DS 側へ寄せる */
.pg_svc--promo .el_textBlock_txt4_wrapper .service_choice li{
	border-top-color:rgba(255,106,31,.14);
}
.pg_svc--promo .ws_cycle:before{
	background:linear-gradient(180deg,var(--ws-accent),rgba(255,106,31,.15));
}
.pg_svc--promo .ws_cta_btn:hover{
	box-shadow:0 10px 26px rgba(255,106,31,.30);
}

/* ---- スクロール表示（JS が .ws-js を付けたときだけ効かせる） ---- */
.pg_svc.ws-js .ws-reveal{
	opacity:0; transform:translateY(1.6rem);
	transition:opacity .7s var(--ws-ease), transform .7s var(--ws-ease);
	will-change:opacity, transform;
}
.pg_svc.ws-js .ws-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
	.pg_svc.ws-js .ws-reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* =========================================================
   図版レイヤー（2026-09-19）
   ・線画アイコン（SVG を mask で塗る＝色はアクセント変数に追従）
   ・カード／ステップ／比較表を「図」として読める形に組み直す
   ・外部画像を1枚も使わない（追加リクエストゼロ・表示遅延なし）
   対象は9本すべて。Web系は青、集客販促系は橙が自動で入る。
   ========================================================= */

/* ---- アイコンの器 ----
   i[data-icon] を丸い色面にして、中の ::before を SVG マスクで塗る。
   🔴 mask は -webkit- 付きも必ず書く（Safari で塗りが消える）。 */
.pg_svc i[data-icon]{
	width:4.6rem; height:4.6rem; flex-shrink:0;
	border-radius:999px; background:var(--ws-accent2-bg);
	display:inline-flex; align-items:center; justify-content:center;
}
.pg_svc i[data-icon]::before{
	content:""; display:block; width:2.4rem; height:2.4rem;
	background:var(--ws-accent2);
	-webkit-mask:var(--ic) center / contain no-repeat;
	        mask:var(--ic) center / contain no-repeat;
}

/* ---- アイコン定義（線画・24px グリッド） ---- */
.pg_svc [data-icon="megaphone"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h3l6 4V6l-6 4H3z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M19 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="layout"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M9 10v9'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="search"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="trend"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16l5.5-5.5 3.5 3.5L21 5'/%3E%3Cpath d='M15 5h6v6'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="clipboard"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6v17h12V4h-3'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1'/%3E%3Cpath d='M9 13l2.4 2.4L16 11'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="blocks"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.2'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="code"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6'/%3E%3Cpath d='M15 6l5 6-5 6'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="spark"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3l1.7 4.3L16 9l-4.3 1.7L10 15l-1.7-4.3L4 9l4.3-1.7z'/%3E%3Cpath d='M17.5 14l.9 2.3 2.3.9-2.3.9-.9 2.3-.9-2.3-2.3-.9 2.3-.9z'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="refresh"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 4v5h-5'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="factory"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l5.5 3.2V10L14 13.2V10l5.5 3.2V21z'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="receipt"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-1.8-3 1.8-3-1.8L6 21z'/%3E%3Cpath d='M9.5 8h5M9.5 12h5'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="briefcase"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M3 12.5h18'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="key"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Cpath d='M11 12h10'/%3E%3Cpath d='M17.5 12v3.5'/%3E%3Cpath d='M20.5 12v2.5'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="mappin"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="cart"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='19.5' r='1.3'/%3E%3Ccircle cx='18' cy='19.5' r='1.3'/%3E%3Cpath d='M2 3h3l2.6 12h11L21 7H6.2'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="package"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="image"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="wifi"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5a15 15 0 0 1 19 0'/%3E%3Cpath d='M6 12a10 10 0 0 1 12 0'/%3E%3Cpath d='M9.2 15.4a5.5 5.5 0 0 1 5.6 0'/%3E%3Ccircle cx='12' cy='19' r='.8'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="network"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Crect x='2' y='16' width='6' height='5' rx='1'/%3E%3Crect x='16' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M5 16v-4h14v4'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="building"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1.5'/%3E%3Cpath d='M8 7h2.5M13.5 7H16M8 11h2.5M13.5 11H16'/%3E%3Cpath d='M10 21v-3.5h4V21'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="sliders"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h4M12 7h8M4 12h10M18 12h2M4 17h6M14 17h6'/%3E%3Cpath d='M10 5v4M16 10v4M12 15v4'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="chat"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h3v4l5-4h8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="mail"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="question"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.7.3-.9.8-.9 1.4v.4'/%3E%3Ccircle cx='12' cy='17' r='.8'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="calendar"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="bell"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16.5V11a6 6 0 1 0-12 0v5.5L4 19h16z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="gear"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="shield"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v5.5c0 4.8-3.4 8.3-8 9.5-4.6-1.2-8-4.7-8-9.5V6z'/%3E%3Cpath d='M9.2 12l2 2 3.6-3.8'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="alert"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L21.5 20h-19z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Ccircle cx='12' cy='17.4' r='.8'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="lock"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="server"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.5'/%3E%3Ccircle cx='7' cy='7' r='.8'/%3E%3Ccircle cx='7' cy='17' r='.8'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="globe"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.4 3.8 5.5 3.8 9S14.5 18.6 12 21c-2.5-2.4-3.8-5.5-3.8-9S9.5 5.4 12 3z'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="certificate"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M8.5 13L7 21l5-2.4L17 21l-1.5-8'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="route"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M9 6h6a3 3 0 0 1 3 3v6'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="users"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 5.2a3.5 3.5 0 0 1 0 6.6'/%3E%3Cpath d='M18.5 20a6 6 0 0 0-2.8-5'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="target"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="pen"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4.2L16.8 4l3.2 3.2L8.2 19z'/%3E%3Cpath d='M14 6.8l3.2 3.2'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="doc"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12.5h6M9 16h6'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="bulb"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-3.4 10.9c.6.5.9 1.2.9 1.9v.2h5v-.2c0-.7.3-1.4.9-1.9A6 6 0 0 0 12 3z'/%3E%3Cpath d='M9.5 19h5M10.5 21.5h3'/%3E%3C/svg%3E"); }
.pg_svc [data-icon="checklist"]{ --ic:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5l2 2 3.5-3.5'/%3E%3Cpath d='M3.5 16l2 2 3.5-3.5'/%3E%3Cpath d='M12.5 8h8M12.5 16.5h8'/%3E%3C/svg%3E"); }

/* ---- カード見出しのアイコン ----
   旧デザインの縦棒（i を .6rem 幅の bar にしていた）を丸アイコンへ差し替える。
   🔴 797-799行の後置ブロックが i の background を上書きするため、
      ここは同詳細度・後勝ちで丸の地色に戻している。 */
.pg_svc .ws_cards_title i[data-icon]{
	width:4.6rem; height:4.6rem; border-radius:999px;
	background:var(--ws-accent2-bg);
}
.pg_svc .ws_cards_title{ gap:1.6rem; align-items:center; }
.pg_svc .ws_cards > li{ padding:2.8rem 3rem 2.6rem; }
.pg_svc .ws_cards > li:hover i[data-icon]{ background:var(--ws-accent2); }
.pg_svc .ws_cards > li:hover i[data-icon]::before{ background:#fff; }
.pg_svc i[data-icon], .pg_svc i[data-icon]::before{
	transition:background-color .25s var(--ws-ease);
}

/* ---- 「まず見るのは、この3つ」＝番号つきカード図 ----
   旧：1px の隙間で罫線を作る grid（項目が奇数だと最後のマスが灰色で残る）
   新：独立したカードを並べる（余りマスが出ない・図として読める） */
.pg_svc .ws_defs{
	margin:3.2rem 0 0; gap:2rem; background:transparent;
	border:0; border-radius:0; overflow:visible;
	grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));
	counter-reset:ws-def;
}
.pg_svc .ws_defs > div{
	position:relative; counter-increment:ws-def;
	padding:6.4rem 2.6rem 2.6rem;
	border:1px solid var(--ws-line); border-radius:var(--ws-r-sm); background:#fff;
}
.pg_svc .ws_defs > div::before{
	content:counter(ws-def,decimal-leading-zero);
	position:absolute; left:2.6rem; top:2.6rem;
	width:3.4rem; height:3.4rem; border-radius:999px;
	background:var(--ws-accent2); color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-family:var(--ws-font-en); font-size:1.225rem; font-weight:700; letter-spacing:.04em;
}

/* ---- 進め方＝フロー ----
   🔴 カード化も横N列も行わない。縦1本のタイムライン（左＝番号とアイコン／
      右＝英字ラベル・見出し・箇条書き2列・説明）が正。2026-09-19 にカード＋
      横4列を試したが、説明文が50〜70字あるため1行10文字ほどで折り返して
      読めなくなった。レール（.ws_cycle:before の縦線）も消さない。 */

/* ---- できること／できないこと＝◯×の対比 ---- */
.pg_svc .ws_roles_label{ display:flex; align-items:center; gap:.8rem; }
.pg_svc .ws_roles_label::before{
	content:""; width:1.8rem; height:1.8rem; flex-shrink:0;
	background:var(--ws-ink-3);
	-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg_svc .ws_roles_col--atland .ws_roles_label::before{
	background:var(--ws-accent2);
	-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
	        mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
}
.pg_svc .ws_roles_col li{ padding-left:2.8rem; }
.pg_svc .ws_roles_col li:before{
	left:0; top:1.5rem; width:1.5rem; height:1.5rem; border-radius:0;
	background:var(--ws-ink-3);
	-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg_svc .ws_roles_col--atland li:before{
	background:var(--ws-accent2);
	-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
	        mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
}

/* 黒帯の結論文が灰色で沈んでいた。`.pg_svc .ws_block p`(0,3,0) が
   `.ws_roles_result`(0,2,0) に勝っていたのが原因なので、同じ形で上書きする。 */
.pg_svc .ws_block p.ws_roles_result{ color:#fff; }

/* ---- CHECK LIST の見出しにアイコン ---- */
.pg_svc .el_textBlock_txt4_wrapper .service_question_label{
	display:flex; align-items:center; gap:.8rem;
}
.pg_svc .el_textBlock_txt4_wrapper .service_question_label::before{
	content:""; width:1.8rem; height:1.8rem; flex-shrink:0;
	background:var(--ws-accent2);
	-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5l2 2 3.5-3.5'/%3E%3Cpath d='M3.5 16l2 2 3.5-3.5'/%3E%3Cpath d='M12.5 8h8M12.5 16.5h8'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5l2 2 3.5-3.5'/%3E%3Cpath d='M3.5 16l2 2 3.5-3.5'/%3E%3Cpath d='M12.5 8h8M12.5 16.5h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- まとめブロックに電球 ---- */
.pg_svc .ws_summary{ position:relative; padding-left:8.4rem; }
.pg_svc .ws_summary::before{
	content:""; position:absolute; left:3.6rem; top:3.8rem;
	width:2.8rem; height:2.8rem;
	background:var(--ws-accent2);
	-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-3.4 10.9c.6.5.9 1.2.9 1.9v.2h5v-.2c0-.7.3-1.4.9-1.9A6 6 0 0 0 12 3z'/%3E%3Cpath d='M9.5 19h5M10.5 21.5h3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-3.4 10.9c.6.5.9 1.2.9 1.9v.2h5v-.2c0-.7.3-1.4.9-1.9A6 6 0 0 0 12 3z'/%3E%3Cpath d='M9.5 19h5M10.5 21.5h3'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media screen and (max-width:560px){
	.pg_svc .ws_summary{ padding-left:2rem; padding-top:6.4rem; }
	.pg_svc .ws_summary::before{ left:2rem; top:2.6rem; }
}

/* ---- 地元に頼む理由＝番号バッジつきカード ----
   あわせて縦つぶれを直す。原因は flex の子が min-width:auto で
   縮まない一方、grid 側が3列固定で幅を割り当てていたこと。 */
.pg_svc .ws_values{
	gap:2rem; background:transparent; border:0; border-radius:0; overflow:visible;
	grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));
}
.pg_svc .ws_values > li{
	flex-direction:column; gap:1.4rem; min-width:0;
	padding:2.6rem 2.6rem 2.4rem;
	border:1px solid var(--ws-line); border-radius:var(--ws-r-sm);
}
.pg_svc .ws_values > li > *{ min-width:0; }
.pg_svc .ws_values > li:before{
	width:3.4rem; height:3.4rem; border-radius:999px; padding-top:0;
	background:var(--ws-accent2); color:#fff;
	display:flex; align-items:center; justify-content:center;
}
.pg_svc .ws_values .ws_h3{ margin:0; }

/* ---- FVの3項目：縦1文字になる崩れを止める ----
   .bl_subFv01_description が親テーマ側で flex-wrap:nowrap のため、
   dl が 231px まで潰されて1文字ずつ折り返していた（実測）。 */
.pg_svc .bl_subFv01_description{ flex-wrap:wrap; }
.pg_svc .ws_fvStats{
	flex:0 0 100%; width:100%; max-width:100%;
	grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
}
.pg_svc .ws_fvStats > div{ min-width:0; }
.pg_svc .ws_fvStats dd{ overflow-wrap:anywhere; }

/* ---- 目次にもアイコン（現在地が分かる小さな手がかり） ---- */
.pg_svc .ws_toc{ position:relative; }
.pg_svc .ws_toc .ws_eyebrow::before{
	content:""; display:inline-block; vertical-align:-.2em;
	width:1.8rem; height:1.8rem; margin-right:.8rem;
	background:var(--ws-accent2);
	-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 6h3M4 12h3M4 18h3M10 6h10M10 12h10M10 18h10'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 6h3M4 12h3M4 18h3M10 6h10M10 12h10M10 18h10'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media screen and (max-width:560px){
	.pg_svc i[data-icon]{ width:4rem; height:4rem; }
	.pg_svc i[data-icon]::before{ width:2.1rem; height:2.1rem; }
	.pg_svc .ws_defs > div{ padding:5.6rem 2rem 2.2rem; }
	.pg_svc .ws_defs > div::before{ left:2rem; top:2rem; }
}

/* =========================================================
   ボックスの強弱（2026-09-19b）
   ① セクション上端の色線を外す。区切りは番号バッジと英字見出しで足りている。
   ② 数字の見た目を階層ごとに変える。
        中カテゴリ（セクション 01〜08）＝塗りつぶしの円バッジ（従来どおり）
        小カテゴリ（STEP / POINT）＝塗らないアクセント色の英字ラベル
        箇条（LOCAL）＝大きい淡色の数字
      🔴 小カテゴリを円バッジに戻さない。中カテゴリと同じ形になり階層が読めなくなる。
   ③ 文章量で段組を変えて強弱をつける。
        短い箇条書き＝カードを並べる（ws_cards）
        長い説明文＝1カラムの横長ボックス（ws_defs / ws_values）
   ========================================================= */

/* ---- ① セクション上端の線（面のグラデーションだけ残す） ---- */
.pg_svc .pg_whoweare_vision_mission{ border-top:0; }

/* ---- ② FLOW：縦1本のタイムライン。左レールに番号とアイコンを積む ----
   番号の表記が実装ごとに "01" と "STEP 01" で割れているので、
   カウンタで採り直して見た目を揃える（元テキストは font-size:0 で隠すだけ＝読み上げは残る）。 */
.pg_svc .ws_cycle{ counter-reset:ws-step; }
.pg_svc .ws_cycle > li{ counter-increment:ws-step; }
.pg_svc .ws_cycle_step{ font-size:0!important; }
.pg_svc .ws_cycle_step::before{
	content:counter(ws-step,decimal-leading-zero);
	font-size:1.225rem; font-weight:700; letter-spacing:.04em;
	font-feature-settings:"tnum" 1; white-space:nowrap;
}
/* アイコンは見出しの左に、丸の地を敷かずグリフだけで置く。
   🔴 レール上（番号バッジの下）に丸で置くと、番号の丸と二重丸になって汚い。
      丸はレールに1つだけ＝番号バッジ、という状態を保つ。 */
.pg_svc .ws_cycle > li > i[data-icon]{
	position:absolute; left:7.2rem; top:.5rem;
	width:2.6rem; height:2.6rem;
	background:none; border-radius:0;
}
.pg_svc .ws_cycle > li > i[data-icon]::before{
	width:2.6rem; height:2.6rem; background:var(--ws-accent2);
}
/* アイコンのぶんだけ見出しと本文を同じ量だけ送る（左端を揃える）
   🔴 :not(.ws_cycle_step) を外さない。番号バッジ自体も li 直下の <p> なので、
      外すとバッジに padding が乗って番号が円からはみ出し縦2文字に折り返す。 */
.pg_svc .ws_cycle_title,
.pg_svc .ws_cycle ul,
.pg_svc .ws_cycle > li > p:not(.ws_cycle_step){ padding-left:3.8rem; }
/* 英字ラベル（Listen / Strategy …）は和文見出しの下に小さく。
   em が見出しの直後にあるぶん、見出し側の下マージンは詰める。 */
.pg_svc .ws_cycle_title{ margin:.2rem 0 1rem; }
.pg_svc .ws_cycle_title em{ margin-bottom:0; font-size:1.2rem; letter-spacing:.16em; color:var(--ws-ink-3); }
/* 本文は面に載せない。9本とも1ステップ＝本文1段落だけなので、
   全段落を灰色ボックスにすると全部が同じ重さになって強弱が消える。 */
.pg_svc .ws_cycle > li > p:not(.ws_cycle_step){ margin:0; }

/* ---- ③-1 POINT（ws_defs）：長文なので1カラムの横長ボックスにする ---- */
.pg_svc .ws_defs{ grid-template-columns:1fr; gap:1.6rem; }
.pg_svc .ws_defs > div{
	display:grid; grid-template-columns:minmax(22rem,30%) 1fr;
	gap:1rem 4rem; align-items:start;
	padding:3rem 3.4rem;
}
.pg_svc .ws_defs > div::before{
	content:"POINT " counter(ws-def,decimal-leading-zero);
	position:static; grid-column:1; grid-row:1;
	display:block; width:auto; height:auto; padding:0;
	background:none; border-radius:0; color:var(--ws-accent2);
	font-size:1.3rem; letter-spacing:.14em; text-align:left;
}
.pg_svc .ws_defs dt{ grid-column:1; grid-row:2; margin:0; }
.pg_svc .ws_defs dd{ grid-column:2; grid-row:1 / span 2; margin:0; }

/* ---- ③-2 LOCAL（ws_values）：1カラム横長・数字は大きく淡く ---- */
.pg_svc .ws_values{ grid-template-columns:1fr; gap:1.4rem; }
.pg_svc .ws_values > li{
	display:grid; grid-template-columns:auto 1fr; gap:.6rem 2.6rem;
	align-items:start; padding:2.8rem 3.2rem;
}
.pg_svc .ws_values > li:before{
	/* 🔴 span を付けない。暗黙の行が span ぶん作られ、gap ぶんの空白が
	      ボックスの下にごっそり残る（2026-09-19 に span 20 で実際に踏んだ）。 */
	grid-column:1; grid-row:1;
	display:block; width:auto; height:auto; padding:0;
	background:none; border-radius:0;
	color:var(--ws-accent2); opacity:.32;
	font-size:3.4rem; line-height:1;
}
.pg_svc .ws_values > li > *{ grid-column:2; }

/* ---- ③-3 サービスカード：アイコンを見出しの上に置く ---- */
.pg_svc .ws_cards_title{ display:block; margin:0 0 1.8rem; }
.pg_svc .ws_cards_title i[data-icon]{ display:flex; margin:0 0 1.4rem; }
.pg_svc .ws_cards > li{ padding:3rem 3rem 2.8rem; }

@media screen and (max-width:860px){
	.pg_svc .ws_defs > div{ grid-template-columns:1fr; gap:.8rem; padding:2.8rem 2.6rem; }
	.pg_svc .ws_defs dt{ grid-column:1; grid-row:2; }
	.pg_svc .ws_defs dd{ grid-column:1; grid-row:3; }
}
@media screen and (max-width:560px){
	.pg_svc .ws_defs > div{ padding:2.4rem 2rem; }
	.pg_svc .ws_defs > div::before{ position:static; }
	/* モバイルは本文の左余白が 5.4rem に縮むので、アイコンの起点も合わせる */
	.pg_svc .ws_cycle > li > i[data-icon]{ left:5.4rem; top:.3rem; width:2.2rem; height:2.2rem; }
	.pg_svc .ws_cycle > li > i[data-icon]::before{ width:2.2rem; height:2.2rem; }
	.pg_svc .ws_cycle_title,
	.pg_svc .ws_cycle ul,
	.pg_svc .ws_cycle > li > p:not(.ws_cycle_step){ padding-left:3.2rem; }
	.pg_svc .ws_values > li{ gap:.5rem 1.8rem; padding:2.2rem 2rem; }
	.pg_svc .ws_values > li:before{ font-size:2.6rem; }
}

/* =========================================================
   セクション見出しの統一（2026-09-30）
   白背景・和文は黒で大きく・英字は小さくグレー。
   ピル型の連番とヘアラインをやめ「01 ／ PROBLEM」の並びに揃える。
   ※上の「看板型見出し」ブロックを後勝ちで上書きする（同じ詳細度・後置き）。
   ========================================================= */
.pg_svc .ws_head{ margin:0 0 3.2rem; }
.pg_svc .ws_head .ws_eyebrow{
	display:flex; align-items:baseline; gap:0;
	margin:0 0 1.2rem;
	font-family:var(--ws-font-en);
	font-size:1.3rem; font-weight:700; line-height:1.4;
	letter-spacing:.2em; text-transform:uppercase;
	color:var(--ws-ink-3);
}
.pg_svc .ws_head .ws_eyebrow:after{ content:none; }
.pg_svc .ws_head .ws_num{
	display:inline; min-width:0; height:auto; padding:0;
	background:none; border-radius:0; color:inherit;
	font-size:inherit; font-weight:inherit; letter-spacing:inherit;
}
.pg_svc .ws_head .ws_num:after{ content:"／"; margin:0 .15em 0 .3em; color:#bdbdb8; }
.pg_svc .ws_head .ws_title{
	margin:0; font-size:3.4rem; font-weight:700; line-height:1.5;
	letter-spacing:.01em; color:var(--ws-ink); text-wrap:pretty;
}
/* 目次アイコンは英字が小さくなったぶん縮め、色も英字に合わせる */
.pg_svc .ws_toc .ws_head .ws_eyebrow:before{
	width:1.5rem; height:1.5rem; margin-right:.6rem; vertical-align:-.15em;
	background:currentColor;
}
@media screen and (max-width:960px){
	.pg_svc .ws_head .ws_title{ font-size:2.8rem; }
}
@media screen and (max-width:560px){
	.pg_svc .ws_head{ margin-bottom:2.4rem; }
	.pg_svc .ws_head .ws_eyebrow{ font-size:1.2rem; margin-bottom:1rem; }
	.pg_svc .ws_head .ws_title{ font-size:2.2rem; line-height:1.6; }
}