:root{
	  --ink:#232733;
	  --sub:#5a6172;
	  --blue:#3f5bc0;      /* wwppロゴブルー系。実ロゴから採色して差し替え可 */
	  --blue-dark:#31479a;
	  --navy:#1b2a5c;      /* 紺帯 */
	  --alt:#f4f6fb;       /* 交互背景 */
	  --line:#e3e7f2;
	  --mark:rgba(63,91,192,.07); /* ウォーターマーク */
	}
	*{margin:0;padding:0;box-sizing:border-box}
	html{scroll-behavior:smooth}
	@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
	body{
	  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
	  color:var(--ink);
	  line-height:1.9;
	  font-size:16px;
	  background:#fff;
	}
	a{color:var(--blue)}
	a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
	.inner{max-width:860px;margin:0 auto;padding:0 24px}
	
	/* ヘッダー: 本体とは別扱い。ロゴ画像に差し替え想定 */
	header{border-bottom:1px solid var(--line);background:#fff}
	.hd{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:14px 24px}
	.hd .logo{font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:.02em}
	.hd .logo small{display:block;font-size:.68rem;font-weight:400;color:var(--sub);letter-spacing:.05em}
	.hd .cta{background:var(--blue);color:#fff;text-decoration:none;padding:9px 20px;border-radius:3px;font-size:.9rem}
	.hd .cta:hover{background:var(--blue-dark)}
	
	/* セクション共通: 交互背景 + 大判ウォーターマーク */
	section{position:relative;overflow:hidden;padding:72px 0}
	section.alt{background:var(--alt)}
	.mark{
	  position:absolute;top:8px;right:-8px;
	  font-size:clamp(64px,12vw,140px);
	  font-weight:700;letter-spacing:.02em;
	  color:var(--mark);
	  user-select:none;pointer-events:none;
	  line-height:1;white-space:nowrap;
	}
	section:nth-of-type(even) .mark{right:auto;left:-8px}
	h2{font-size:1.45rem;margin-bottom:18px;line-height:1.5}
	p{max-width:40em}
	.reflink{display:inline-block;margin-top:10px;font-size:.95rem}
	
	/* ヒーロー */
	.hero{padding:96px 0 80px;border-bottom:1px solid var(--line)}
	.hero h1{font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.5;margin-bottom:22px}
	.hero .brand{color:var(--sub);font-size:.95rem;margin-bottom:22px}
	.hero .lead{font-size:1.05rem;max-width:36em;margin-bottom:34px}
	.hero .cta{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;padding:13px 36px;border-radius:3px;font-size:1rem}
	.hero .cta:hover{background:var(--blue-dark)}
	/* デモCTAは初版なし。デモ刷新後にヒーローへ追加 */
	
	/* CASES */
	.case{display:block;border-left:4px solid var(--blue);background:#fff;padding:18px 22px;margin-bottom:14px;text-decoration:none;color:var(--ink)}
	section.alt .case{background:#fff}
	.case:hover{background:#eef1fa}
	.case span{display:block;font-size:.85rem;color:var(--sub);margin-top:2px}
	
	/* 紺帯（山場） */
	.band{background:var(--navy);color:#fff;padding:88px 0}
	.band h2{color:#fff;font-size:1.5rem;margin-bottom:14px}
	.band p{color:#dfe4f5}
	.band .pair + .pair{margin-top:52px}
	
	/* フォーム置き場 */
	.formbox{border:1px dashed var(--line);background:#fff;padding:32px;color:var(--sub);text-align:center}
	
	footer{border-top:1px solid var(--line);padding:28px 0;font-size:.85rem;color:var(--sub)}
	footer a{color:var(--sub)}
	footer .inner{display:flex;flex-wrap:wrap;gap:6px 18px}
	
	@media(max-width:640px){
	  section{padding:56px 0}
	  .hero{padding:72px 0 60px}
	  .band{padding:64px 0}
	}
	
	/* 文＋帯スクショの上下組（帯は横長なので左右でなく縦積み・文が先） */
	.duo .shot{margin-top:26px;max-width:640px}
	.duo .shot img{width:100%;border:1px solid var(--line);display:block}
	
	/* ②ウォーターマーク弱化: 一段小さく・薄く */
	.mark{font-size:clamp(48px,9vw,104px);color:rgba(63,91,192,.05)}
	

	/* ② 帯を1.25倍: 640→800px */
	.duo .shot{max-width:800px}
	

	/* CASES: 横並びカード2枚（左罫行スタイルを置き換え） */
	.cases{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:800px}
	.case{display:block;padding:0;border:1px solid var(--line);border-left:1px solid var(--line);
	      background:#fff;text-decoration:none;color:var(--ink)}
	.case img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:0}
	.case>span{display:block;padding:14px 18px 18px;font-weight:700;line-height:1.6}
	.case>span>span{font-weight:400;font-size:.85rem;color:var(--sub);margin-top:4px}
	.case:hover{border-color:var(--blue)}
	@media(max-width:640px){.cases{grid-template-columns:1fr}}



	/* 一覧ページ限定の追い足し（共通CSSはinc_header_wwpp2内） */
	.art-hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
	.art-hero h1{font-size:clamp(1.5rem,3.5vw,2rem);line-height:1.5;margin-bottom:12px}
	.art-hero p{color:var(--sub)}
	.art-list{list-style:none}
	.art-list li{border-bottom:1px solid var(--line);padding:26px 0}
	.art-list time{display:block;font-size:.82rem;color:var(--sub)}
	.art-list h2{font-size:1.1rem;margin:4px 0 6px;line-height:1.6}
	.art-list h2 a{color:var(--ink);text-decoration:none}
	.art-list h2 a:hover{color:var(--blue);text-decoration:underline}
	.art-list p{font-size:.92rem;color:var(--sub)}
	.art-pager{display:flex;gap:8px;list-style:none;margin-top:36px}
	.art-pager li a{display:block;padding:6px 12px;border:1px solid var(--line);color:var(--blue);text-decoration:none;border-radius:3px}
	.art-pager li.active a{background:var(--blue);border-color:var(--blue);color:#fff}
	.art-pager li.disabled a{color:var(--sub);pointer-events:none}
	
	/* 記事ページ限定の追い足し（共通CSSはinc_header_wwpp2内） */
	.art-head{padding:72px 0 40px;border-bottom:1px solid var(--line)}
	.art-head .crumb{font-size:.82rem;margin-bottom:18px}
	.art-head .crumb a{color:var(--sub);text-decoration:none}
	.art-head .crumb a:hover{text-decoration:underline}
	.art-head h1{font-size:clamp(1.5rem,3.5vw,2rem);line-height:1.6;margin-bottom:12px}
	.art-head time{font-size:.85rem;color:var(--sub)}
	.art-lead{margin-top:18px;padding-left:16px;border-left:4px solid var(--blue);color:var(--sub)}
	.art-body{padding:48px 0 24px}
	.art-body h2{margin-top:2.2em}
	.art-body h3{font-size:1.1rem;margin:1.8em 0 .6em;padding-left:.6em;border-left:4px solid var(--blue)}
	.art-body ul,.art-body ol{margin:.6em 0 .6em 1.6em}
	.art-body p{margin:.8em 0}
	.art-back{padding:8px 0 56px}
	.art-cta{background:var(--alt);border-left:4px solid var(--blue);padding:26px 30px;margin:24px 0 64px}
	.art-cta strong{display:block;margin-bottom:6px}
	.art-cta p{font-size:.92rem;margin-bottom:12px}
	.art-cta a.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;padding:9px 24px;border-radius:3px;font-size:.9rem}
	.art-cta a.btn:hover{background:var(--blue-dark)}

	/* ===== 記事画面 二段組化（2026-09-11・現行/partner-portal/実測合わせ） ===== */
	:root{
	  --art-wrap:1140px;   /* 全体幅=現行実測 */
	  --art-side:262px;    /* サイドメニュー幅=現行実測 */
	  --art-gap:30px;      /* カラム間ガター=現行実測 */
	  --art-fs:15px;       /* 本文文字サイズ=現行実測近似（微調整はここ） */
	  --art-lh:1.75;       /* 行間=現行実測近似（行送り約26px） */
	}
	/* ヘッダーも全体幅に合わせる（LP側は幅が60px広がるのみ） */
	.hd{max-width:var(--art-wrap)}
	.hd-nav{display:flex;align-items:center;gap:14px}
	.hd .articles-link{font-size:.88rem;color:var(--ink);text-decoration:none;border:1px solid var(--line);padding:8px 14px;border-radius:3px;white-space:nowrap}
	.hd .articles-link:hover{color:var(--blue);border-color:var(--blue)}

	/* 二段組の器 */
	.art-layout{
	  max-width:var(--art-wrap);margin:0 auto;
	  display:grid;grid-template-columns:minmax(0,1fr) var(--art-side);
	  gap:0 var(--art-gap);align-items:start;
	  font-size:var(--art-fs);line-height:var(--art-lh);
	  padding:36px 0 56px;
	}
	.art-main{min-width:0}
	.art-layout p{max-width:none}/* 共通CSSのp{max-width:40em}を解除しカラム幅で読ませる */
	@media(max-width:1188px){.art-layout{padding-left:24px;padding-right:24px}}
	@media(max-width:900px){
	  .art-layout{display:block}
	  .side{margin-top:48px}
	}

	/* 一覧・詳細の余白詰め（section+innerの72px体制を上書き） */
	.art-layout .art-hero{padding:0 0 22px;border-bottom:1px solid var(--line)}
	.art-layout .art-hero h1{font-size:1.5rem;margin-bottom:8px}
	.art-layout .art-list li{padding:18px 0}
	.art-layout .art-list h2{font-size:1.05rem;margin:3px 0 5px}
	.art-layout .art-pager{margin-top:28px}

	.art-layout .art-head{padding:0 0 22px;border-bottom:1px solid var(--line)}
	.art-layout .art-head .crumb{margin-bottom:14px}
	.art-layout .art-head h1{font-size:1.5rem}
	.art-layout .art-lead{margin-top:14px}
	.art-layout .art-body{padding:28px 0 8px}
	.art-layout .art-body h2{margin-top:2em;font-size:1.25rem}
	.art-layout .art-body h3{margin:1.6em 0 .5em}
	.art-layout .art-body p{margin:.7em 0}
	.art-layout .art-cta{margin:20px 0 36px}
	.art-layout .art-back{padding:0 0 8px}

	/* サイドメニュー */
	.side-menu{border:1px solid var(--line);margin-bottom:24px}
	.side-menu-title{display:block;background:var(--blue);color:#fff;padding:10px 14px;font-size:.92rem;font-weight:700;text-decoration:none}
	.side-menu-title:hover{background:var(--blue-dark);color:#fff}
	.side-menu ul{list-style:none}
	.side-menu li{border-top:1px solid var(--line)}
	.side-menu li a{display:block;padding:10px 14px;font-size:.85rem;line-height:1.55;color:var(--ink);text-decoration:none}
	.side-menu li a:hover{background:#eef1fa;color:var(--blue)}
	.side-menu li.current a{background:var(--alt);font-weight:700;pointer-events:none}

	/* サイドのLP誘導カード */
	.side-box{background:var(--alt);border:1px solid var(--line);padding:18px;margin-bottom:24px;font-size:.88rem;line-height:1.7}
	.side-box strong{display:block;margin-bottom:8px;line-height:1.5}
	.side-box p{margin-bottom:12px}
	.side-box a.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;padding:8px 18px;border-radius:3px;font-size:.85rem}
	.side-box a.btn:hover{background:var(--blue-dark)}


	/* ===== 赤入れ反映（2026-09-11）: 日付→カテゴリ・リード下の余白詰め ===== */
	.art-cat{display:inline-block;font-size:.78rem;color:var(--blue);border:1px solid var(--blue);border-radius:2px;padding:1px 10px;line-height:1.7}
	.art-list li .art-cat{margin-bottom:3px}
	.art-head .art-cat{margin-top:2px}

	/* 詳細: リード（QUOTE）と本文の距離を詰める */
	.art-layout .art-head{padding-bottom:10px}
	.art-layout .art-lead{margin-top:12px}
	.art-layout .art-body{padding-top:8px}
	.art-layout #_ww_main_contents > *:first-child{margin-top:0 !important}/* 目次ブロックの持ち込みマージンを殺す */

	/* H2/H3のメリハリ: h2は大きく罫線で区切り・h3は小さく締める */
	.art-layout .art-body h2{font-size:1.3rem;margin-top:2.1em;padding-bottom:.35em;border-bottom:1px solid #9aa4c0}
	.art-layout .art-body h3{font-size:.95rem;font-weight:700;color:#000;margin:1.7em 0 .5em;padding-left:.6em;border-left:4px solid var(--blue)}


	/* ===== 解説ページ（パートナーポータルとは）専用 .ppabout（2026-09-11） =====
	   静的最終版のstyleを共通CSSへ移設。LP・記事画面に影響しないよう全て.ppaboutで限定 */
	.ppabout .inner{max-width:1140px;padding:0 32px}
	.ppabout p{max-width:none}
	.ppabout section{padding:52px 0}
	.ppabout .mark{color:rgba(63,91,192,.035)}
	.ppabout h2{font-size:2.1rem;font-weight:800;margin-bottom:20px;line-height:1.4;letter-spacing:.01em}
	.ppabout h3{font-size:1.05rem;margin:1.8em 0 .5em;padding-left:.6em;border-left:4px solid var(--blue)}

	.ppabout .hero{padding:80px 0 64px;border-bottom:1px solid var(--line)}
	.ppabout .hero h1{font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1.45;margin-bottom:20px;max-width:26em}
	.ppabout .hero .before{margin:0 0 18px;padding-left:16px;border-left:3px solid var(--line);color:var(--sub)}
	.ppabout .hero .before p{margin:.15em 0}
	.ppabout .hero .lead{font-size:1.05rem;margin:14px 0 30px}

	.ppabout .runs{margin:.6em 0 1em}
	.ppabout .runs p{margin:.15em 0}
	.ppabout .runs.pale{padding-left:16px;border-left:3px solid var(--line);color:var(--sub)}
	.ppabout .voices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:.9em 0}
	.ppabout .voices span{background:var(--alt);padding:8px 14px;font-size:.95rem;display:flex;align-items:center}
	.ppabout section.alt .voices span{background:#fff;border:1px solid var(--line)}
	.ppabout .ww{border-left:4px solid var(--blue);background:var(--alt);padding:16px 22px;margin:18px 0}
	.ppabout section.alt .ww{background:#fff}
	.ppabout .ww p{margin:.4em 0}
	.ppabout .key{border-left:4px solid var(--navy);padding:2px 0 2px 18px;margin:18px 0}
	.ppabout .key p{margin:.3em 0;font-size:1.02rem}
	.ppabout .ex{list-style:none;margin:.8em 0 1em}
	.ppabout .ex li{padding:4px 0 4px 1.5em;position:relative}
	.ppabout .ex li::before{content:"▸";position:absolute;left:2px;color:var(--blue)}
	.ppabout .bul{list-style:none;margin:.6em 0 1em}
	.ppabout .bul li{padding:3px 0 3px 1.1em;position:relative}
	.ppabout .bul li::before{content:"・";position:absolute;left:0;color:var(--sub)}
	.ppabout .chips{display:flex;flex-wrap:wrap;gap:8px;margin:.9em 0}
	.ppabout .chips span{border:1px solid var(--line);background:#fff;padding:4px 14px;font-size:.9rem;border-radius:2px}

	.ppabout .scatter{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:12px;margin:20px 0 26px}
	.ppabout .scatter div{background:#fff;border:1px solid var(--line);padding:14px 16px;font-size:.92rem;line-height:1.65}
	.ppabout .scatter div b{display:block;font-size:1.02rem;margin-bottom:2px;color:var(--ink)}

	.ppabout .ba{display:grid;grid-template-columns:1fr 52px 1fr;align-items:stretch;margin:22px 0}
	.ppabout .ba .pane{border:1px solid var(--line);background:#fff;padding:18px 22px}
	.ppabout .ba .pane .tag{display:inline-block;font-size:.8rem;padding:2px 12px;margin-bottom:10px;border:1px solid var(--sub);color:var(--sub)}
	.ppabout .ba .pane.after{border-color:var(--blue)}
	.ppabout .ba .pane.after .tag{border-color:var(--blue);color:var(--blue)}
	.ppabout .ba .pane ul{list-style:none;font-size:.95rem}
	.ppabout .ba .pane li{padding:3px 0 3px 1.1em;position:relative}
	.ppabout .ba .pane li::before{content:"・";position:absolute;left:0;color:var(--sub)}
	.ppabout .ba .arrow{display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:1.5rem}

	.ppabout .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
	.ppabout .seg .cell{background:#fff;border:1px solid var(--line);padding:14px 18px;font-size:.92rem}
	.ppabout .seg .cell b{display:block;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:8px}
	.ppabout .seg .cell ul{list-style:none}
	.ppabout .seg .cell li{padding:2px 0;display:flex;justify-content:space-between;gap:8px}
	.ppabout .seg .on{color:var(--blue);font-weight:700}
	.ppabout .seg .off{color:#c2c8d6}

	.ppabout .formfig{display:grid;grid-template-columns:1fr 52px 300px;gap:0;align-items:center;margin:22px 0}
	.ppabout .fcards{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px}
	.ppabout .fcards span{background:#fff;border:1px solid var(--line);padding:10px 8px;font-size:.9rem;text-align:center;display:flex;align-items:center;justify-content:center}
	.ppabout .formfig .arrow{display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:1.5rem}
	.ppabout .mbox{border:1px solid var(--blue);background:#fff;padding:16px 20px;font-size:.92rem}
	.ppabout .mbox b{display:block;color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:8px}
	.ppabout .mbox p{margin:.25em 0}

	.ppabout .steps{display:grid;grid-template-columns:repeat(5,1fr);margin:22px 0;padding:0;counter-reset:st;list-style:none}
	.ppabout .steps li{counter-increment:st;position:relative;text-align:center;padding:36px 10px 0;font-size:.93rem;line-height:1.6}
	.ppabout .steps li::before{content:counter(st);position:absolute;top:0;left:50%;transform:translateX(-50%);
	  width:27px;height:27px;border:1px solid var(--blue);color:var(--blue);background:#fff;border-radius:50%;
	  display:flex;align-items:center;justify-content:center;font-size:.8rem;z-index:1}
	.ppabout .steps li::after{content:"";position:absolute;top:13px;left:calc(50% + 18px);width:calc(100% - 36px);border-top:1px solid #c3cade}
	.ppabout .steps li:last-child::after{display:none}

	.ppabout .design{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px;margin:22px 0}
	.ppabout .design .blk{background:#fff;border:1px solid var(--line);padding:20px 24px;position:relative}
	.ppabout .design .blk::before{content:attr(data-n);position:absolute;top:10px;right:16px;font-size:2rem;font-weight:800;color:#dfe4f5;line-height:1}
	.ppabout .design .blk h3{margin:0 0 10px}
	.ppabout .design .blk p{font-size:.95rem}

	.ppabout .shot{margin:36px 0 40px;max-width:820px}
	.ppabout .shot .cap{font-size:.8rem;color:var(--sub);margin-bottom:8px;letter-spacing:.02em}
	.ppabout .shot .cap::before{content:"■";color:var(--blue);font-size:.55rem;margin-right:7px;vertical-align:2px}
	.ppabout .shot img{width:100%;border:1px solid var(--line);display:block}

	.ppabout .band{padding:72px 0}
	.ppabout .band h2{font-size:2.15rem;font-weight:800;margin-bottom:18px}
	.ppabout .band .runs.pale{border-left-color:#3a4a85;color:#c6cfec}
	.ppabout .band .ww{background:rgba(255,255,255,.06);border-left-color:#8fa2e0}
	.ppabout .band .ww p{color:#fff}

	.ppabout .cta-mid{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;padding:11px 32px;border-radius:3px;font-size:.95rem;margin-top:6px}
	.ppabout .cta-mid:hover{background:var(--blue-dark)}
	.ppabout .refnote{font-size:.95rem;color:var(--sub)}

	@media(max-width:760px){
	  .ppabout .scatter{grid-template-columns:repeat(2,1fr)}
	  .ppabout .ba{grid-template-columns:1fr}
	  .ppabout .ba .arrow{transform:rotate(90deg);padding:6px 0}
	  .ppabout .seg{grid-template-columns:1fr}
	  .ppabout .formfig{grid-template-columns:1fr}
	  .ppabout .formfig .arrow{transform:rotate(90deg);padding:6px 0}
	  .ppabout .steps{grid-template-columns:1fr;gap:6px}
	  .ppabout .steps li{text-align:left;padding:2px 0 2px 38px}
	  .ppabout .steps li::before{left:0;top:4px;transform:none}
	  .ppabout .steps li::after{display:none}
	  .ppabout .design{grid-template-columns:1fr}
	}
	@media(max-width:640px){
	  .ppabout section{padding:44px 0}
	  .ppabout .hero{padding:60px 0 48px}
	  .ppabout .band{padding:56px 0}
	  .ppabout .inner{padding:0 20px}
	  .ppabout h2{font-size:1.5rem}
	  .ppabout .band h2{font-size:1.55rem}
	  .ppabout .voices{grid-template-columns:1fr}
	}