/* feature-block.css — feature_block.jspの内蔵styleを外部化（2026-08-13） */
/* 配置: /ww2017/css/feature-block.css */

:root{--ww-accent:#F28C00;--ww-accent-ink:#7a3f00;--ww-text:#1f2937;--ww-muted:#6b7280;--ww-bg:#fff;--ww-bg-alt:#fafafa;--ww-border:#e5e7eb;--ww-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);--ww-radius:14px;--ww-gap:24px;--ww-max:1170px}
		.container{max-width:var(--ww-max);margin:0 auto;}.section{padding:28px 0}.section.bg-alt{background:var(--ww-bg-alt)}
		/**.hero.hero--sub{background:linear-gradient(180deg,#fff,#fff 60%,var(--ww-bg-alt));padding:0px 0 20px}*/
		.hero.hero--sub{background_____:#F5F7FA;;padding___:0px 0 20px}
		
		.hero .eyebrow{font-size:14px;font-weight:700;;letter-spacing:.08em;color:#000;margin:0 0 10px}
		.page-title{line-height:1.35;margin:.2rem 0 1rem;color:var(--ww-text)}
		.lead ,.intros{font-size:15px;color:#555;font-weight: normal;}.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
		
		.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:600;border:1px solid transparent;text-decoration:none}
		.btn-primary{background:var(--ww-accent);color:#fff;border-color:var(--ww-accent)}.btn-primary:hover{filter:brightness(.95)}
		.btn-outline{background:#fff;color:#000;border-color:#ffe0bf}.btn-outline:hover{background:#fff6eb}
		.pz-headline-l0{margin:0 0 18px}.pz-headline-l0 h2{font-weight:500; font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.3;margin:0;padding-bottom:15px;border-bottom:2px solid var(--ww-accent)}
		.grid{display:grid;gap:var(--ww-gap)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}
		@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
		.card,.feature{background:#fff;border:1px solid var(--ww-border);border-radius:var(--ww-radius);padding:18px;box-shadow:var(--ww-shadow)}
		.card h3,.feature h3{font-size:1.05rem;margin:.2rem 0 .5rem}.card p,.feature p{margin:0;color:#000;font-size: 14px;}
		.kpi-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.kpi{background:#fff;border:1px dashed #f3c892;border-radius:12px;padding:14px 16px;text-align:center}
		.kpi strong{display:block;font-size:1.05rem;color:#b45309}.kpi span{display:block;color:#6b7280;font-size:.9rem}
		@media (max-width:740px){.kpi-3{grid-template-columns:1fr}}
		.steps{counter-reset:stp;list-style:none;margin:12px 0 0;padding:0}
		.steps li{counter-increment:stp;position:relative;padding-left:48px;margin:10px 0;min-height:32px}
		.steps li::before{content:counter(stp);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ww-accent);color:#fff;font-weight:700}
		.list-check,.list-dot{margin:12px 0 0;padding-left:0;list-style:none}
		.list-check li,.list-dot li{position:relative;padding-left:28px;margin:9px 0;color:#000}
		.list-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ww-accent);font-weight:700}
		.list-dot li::before{content:"•";position:absolute;left:6px;top:-1px;color:var(--ww-accent);font-size:1.2rem}
		.note{color:#4b5563;margin-top:10px}

		.faq{border-top:1px solid var(--ww-border)}.faq dl{margin:0}.faq dt{position:relative;margin:0;padding:16px 16px 10px 44px;font-weight:700;border-bottom:1px dashed var(--ww-border);cursor:pointer}.faq dt::before{content:"Q";position:absolute;left:12px;top:14px;width:22px;height:22px;border-radius:50%;background:#fff3e6;color:#b45309;display:grid;place-items:center;font-weight:700;font-size:.85rem}.faq dd{margin:0;max-height:0;overflow:hidden;padding:0 16px 0 44px;color:#000;border-bottom:1px solid var(--ww-border);transition:max-height .25s ease,padding .25s ease}.faq dt.is-open+dd{max-height:1000px;padding:12px 16px 16px 44px}.faq dt::after{content:"+";position:absolute;right:12px;top:50%;transform:translateY(-50%)}.faq dt.is-open::after{content:"-"}
		.cta .cta-title{font-size:2.3rem;margin:0 0 .6rem}.related-links{margin-top:14px;color:#000}
		.related-links a{color:#1f2937;text-decoration:underline dotted}.related-links a:hover{color:var(--ww-accent)}
		.kpi-grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
		.kpi-grid .kpi{border-style:solid}.kpi-grid .kpi .kpi-num{display:block;font-weight:800;color:#b45309}
		.kpi-grid .kpi .kpi-cap{display:block;color:#6b7280;font-size:.9rem}
		@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.kpi-grid{grid-template-columns:1fr}}
		@media (max-width:640px){.section{padding:40px 0}.lead ,.intros{font-size:1rem}}
		
		p {color: #555}p strong{color: #000;font-weight: 500}
		b, strong {font-weight: 500}
		.section.cta{margin-bottom: 40px}

		/* 見出しの最小サイズをpxで保証（rootのrem設定に左右されないように） */
		.pz-has-side-menu .page-title{ font-size: clamp(22px, 2.6vw, 34px) !important; }
		.pz-has-side-menu .card h3,
		.pz-has-side-menu .feature h3{ font-size: 14px;font-weight: 600;line-height: 20px !important; }

		/* KPIの中身も固定（好みで微調整OK） */
		.pz-has-side-menu .kpi strong{ font-size: 16px !important; }
		.pz-has-side-menu .kpi span{ font-size: 14px !important; }
  
		/* === KPI 3カラムの落ち対策（他CSSに勝つ） === */
		.pz-has-side-menu .kpi-3{display: grid !important;grid-template-columns: repeat(3, minmax(0, 1fr)) !important;gap: 16px !important;align-items: stretch;}

		/* 子要素に残っている幅指定やfloat/inline-blockを無効化 */
		.pz-has-side-menu .kpi-3 > *{box-sizing: border-box;width: auto !important;max-width: none !important;float: none !important;display: block !important;margin: 0 !important;}
		/* 中身が低すぎると高さ差でズレるので揃える */
		.pz-has-side-menu .kpi{height: 100%;padding: 16px;}

		/* 画面幅に応じて可変（必要なら数値は調整） */
		@media (max-width: 980px){.pz-has-side-menu .kpi-3{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}}
		@media (max-width: 600px){.pz-has-side-menu .kpi-3{grid-template-columns: 1fr !important;}}
		/* H1: デスクトップ30px & 黒 */
		.pz-has-side-menu .hero .page-title{color: #000 !important;line-height: 1.25 !important;}
		/* 980px以上（デスクトップ）で30px固定 */
		@media (min-width: 980px){.pz-has-side-menu .hero .page-title{  font-size: 30px !important;}}
		/* 〜979px（タブレット/モバイル）は読みやすく可変。不要なら削ってOK */
		@media (max-width: 979.98px){.pz-has-side-menu .hero .page-title{font-size: clamp(22px, 4.2vw, 28px) !important;}}
		.pz-has-side-menu .pz-headline-l0 h2 { font-size: 135%;}
		
		.feature_detail h3, a.inc-col-h2, .inc-col-h2 ,a.inc-col-h2:visited {font-size: 16px; margin-bottom: 5px;font-weight: 500;color: #000 !important}
		.btn-primary:hover { color: #fff; background-color: #d35400; border-color: #d35400;}
		.label-headline {font-size: 12px;}

		.hero-flex{display:flex;align-items:flex-start;gap:12px;}.hero-thumb{flex:0 0 250px;width:250px}.hero-thumb img{display:block;width:100%;height:auto}.hero-body{flex:1 1 auto;min-width:0}.lead--desktop{display:block}.lead--mobile{display:none}
		@media (max-width:767.98px){.hero-flex{flex-direction:row;align-items:flex-start}.hero-thumb{flex:0 0 120px;width:120px!important;margin-right:0!important}.hero-thumb img{width:120px!important;height:auto}.lead--desktop{display:none}.lead--mobile{display:block;margin-top:12px;margin-bottom:12px!important}}
		
		.pz-has-side-menu .inc-col .col_head{font-size: 15px;font-weight: 500;line-height: 20px !important;}
		.label-headline___ {display: none;}
		.lead{margin-bottom: 0px;}

		.table thead > tr > th {vertical-align: top;}
		
		.ww-section-lead { margin-top: 8px;line-height: 1.8;}

		.lead.intros {color:#000;}
		@media (max-width:640px){.lead.intros{font-size:1rem}}

		.ww-svg-title ,.ww-svg-t{
			display: none;
		}
		
		.ww-fck-body h3{font-size:14px;font-weight:600;color:#111;margin:1.4em 0 .4em;padding-left:12px;border-left:3px solid var(--ww-accent);line-height:1.5}.ww-fck-body h3:first-child{margin-top:0}.ww-fck-body p{font-size:14px;line-height:1.9;color:#555;margin:0 0 1em}.ww-fck-body p:last-child{margin-bottom:0}
		
		.ww-visual-section{display:flex;gap:24px;align-items:flex-start;margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--ww-border)}.ww-visual-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.ww-visual-section__img{flex:0 0 35%;width:35%}.ww-visual-section__img img{width:100%;height:auto;border-radius:8px;border:1px solid var(--ww-border)}.ww-visual-section__body{flex:1 1 auto;min-width:0}.ww-visual-section__body h3{font-size:15px;font-weight:600;color:#111;margin:0 0 8px;line-height:1.5}.ww-visual-section__body p{font-size:14px;line-height:1.8;color:#555;margin:0}
		@media(max-width:640px){.ww-visual-section{flex-direction:column}.ww-visual-section__img{width:100%;flex:none}}


/* =========================================
   目次（TOC）バー
   ========================================= */
.ww-toc-v2 {
  position: sticky;
  top: var(--toc-top, 72px);
  z-index: 2;

  display: flex;
  flex-wrap: wrap;              /* PCデフォルトは折り返し */
  gap: 10px 12px;
  padding: 12px 6px;
  margin: 14px 0;
  /**border-top: 1px solid #eee;*/
  border-bottom: 1px solid #eee;
  background: #fff;
}

.ww-toc-v2 {
  max-width: var(--ww-max);
  margin-left: auto;
  margin-right: auto;
}

.ww-toc-v2.is-stuck {
  padding: 16px 6px;
}

.ww-toc-v2 a {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.2;
  padding: 8px 14px;
  border: 1px solid #e9ecef;
  border-radius: 9999px;
  color: #111;
  text-decoration: none;
  background: #fff;
  transition: .15s;
}

.ww-toc-v2 a:hover {
  background: #fff6ec;
  border-color: #f5c089;
}

.ww-toc-v2 a.is-active {
  background: #e67e22;
  border-color: #e67e22;
  color: #fff;
}

/* PC：2行目だけ余白をつけるハック */
@media (min-width: 1025px) {
  .ww-toc-v2 a {
    margin-top: 10px;          /* 2行目の行間。好みで 8〜16px くらいに調整 */
  }
  .ww-toc-v2 a:nth-child(-n+5) {
    margin-top: 0;             /* 1〜5番目（1行目）は0に戻す */
  }
}

/* タブレット〜小さめPC：1行＋横スクロールにする */
@media (max-width: 1024px) {
  .ww-toc-v2 {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
  }

  .ww-toc-v2 a {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .ww-toc-v2::-webkit-scrollbar {
    height: 6px;
  }
  .ww-toc-v2::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
  }
}

/* スマホ：stickyをやめて普通に流す＋少しコンパクトに */
@media (max-width: 640px) {
  .ww-toc-v2 {
    position: static;
    top: auto;
    overflow: visible;
    gap: 8px 10px;
    padding: 10px 4px;
  }

  .ww-toc-v2 a {
    font-size: 12.5px;
    padding: 7px 12px;
  }

  /* SPではオフセット少なめ（ヘッダー分だけ） */
  :root {
    --toc-offset: 72px;
  }
}

.feature-block .inc-col .label-headline {
	position: relative;
	font-size: 12px;
	color: #333;
	background: #fff;
	padding-left: 14px;
	font-weight: 600!important;
	border-radius: 3px!important;
}

.feature-block .inc-col .label-headline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 20px;
	background: #333;
	border-radius: 3px;
}

.feature-block .inc-col .inc-col-h2 {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px !important;
	margin: .2rem 0 .5rem;
}
.feature-block .inc-col small {
	margin: 0;
	color: #000;
	font-size: 14px;
}

.feature-block .card {
border: 1px solid #eee;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: none !important;
}

.feature-block .inc-col .inc-col-grid {
	gap: 16px;
	/**margin-top: 24px;*/
}

.feature-block .inc-col .inc-col-grid .card {
	padding: 16px;
	border-radius: 8px;
	box-shadow: none;
	border: 1px solid #eee;
	background: #fff;
	min-height: auto;
}

.feature-block .inc-col .inc-col-grid .card h3 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.feature-block .inc-col .inc-col-grid .card p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #555;
}

.feature-block .inc-col .inc-col-grid .card p + p {
	margin-top: 8px;
}

.feature-block .inc-col .inc-col-grid .card {
	padding: 16px;
	border-radius: 8px;
	box-shadow: none;
	border: 1px solid #eee;
	background: #fff;
	min-height: auto;
}

.feature-block .inc-col .inc-col-grid .card h3 {
	font-size: 14px;
	margin: 0 0 8px;
	padding-left: 8px;
	border-left: 4px solid #f29c2b;
	font-weight: 600;
	line-height: 1.6;
	color: #111;
}

.feature-block .inc-col .inc-col-grid .card p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #555;
}

.feature-block .inc-col .inc-col-grid .card p + p {
	margin-top: 8px;
}

.feature-block .inc-col .card h3 {
	display: flex;
	align-items: center;
}
.feature-block .inc-col .inc-col-grid .card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.feature-block .inc-col .inc-col-grid .card p:last-child {
	/**margin-top: auto;*/
}
.feature-block .inc-col .inc-col-grid .card {
	transition: 0.15s ease;
}

.feature-block .inc-col .inc-col-grid .card:hover {
	border-color: #ddd;
	transform: translateY(-2px);
}
.feature-block .inc-col .inc-col-grid .card p:last-child {
	/**margin-top: auto;*/
	min-height: 20px;
}

.card {
	display: flex;
	flex-direction: column;
}

.card-footer {
	margin-top: auto;
	min-height: 20px;
}

.card-footer.dummy {
	visibility: hidden;
}


.card {
	display: flex;
	flex-direction: column;
}

.card-body {
	flex: 1;
}

.card-footer {
	margin-top: auto;
}


/* =========================================
   アンカー位置（TOCで飛んだときのズレ防止）
   ========================================= */

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* PC用のデフォルトオフセット（必要ならここだけ数値調整） */
:root {
  --toc-offset: 120px;
}

/* scroll-margin-top + ::before ハック（元の動いていた形に戻す） */
:where(h1[id], h2[id], h3[id], h4[id], [data-anchor]) {
  scroll-margin-top: var(--toc-offset);
}

:where(h1[id], h2[id], h3[id], h4[id], [data-anchor])::before {
  content: "";
  display: block;
  height: var(--toc-offset);
  margin-top: calc(var(--toc-offset) * -1);
}
.hero .lead.intros{ margin-top: 1.2em; }

/* FAQ 表玄関5件リンク（トップ9ページ用） 2026.7.8 add kouda */
.feature-block .faq-link-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--ww-border)}
.feature-block .faq-link-list li{position:relative;margin:0;padding:14px 12px 14px 44px;border-bottom:1px solid var(--ww-border)}
.feature-block .faq-link-list li::before{content:"Q";position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:50%;background:#fff3e6;color:#b45309;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.feature-block .faq-link-list a{color:#1f2937;text-decoration:none}
.feature-block .faq-link-list a:hover{color:var(--ww-accent);text-decoration:underline}
.feature-block .faq-link-more{margin-top:12px;text-align:right}
.feature-block .faq-link-more a{color:#1f2937;text-decoration:underline dotted}
.feature-block .faq-link-more a:hover{color:var(--ww-accent)}

/* WWBFAD[ID] 2026.7.10 add kouda - 機能ページのスクショ画像 */
#_ww_main_contents img[src^="/images/sc/"] {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px 0 40px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.feature-block .ww-refs-group{margin-bottom:28px}
.feature-block .ww-refs-group:last-child{margin-bottom:0}
.feature-block .ww-refs-group__title{font-size:15px;font-weight:600;color:#111;margin:0 0 12px;padding-left:10px;border-left:3px solid var(--ww-accent);line-height:1.5}
 
.feature-block .ww-refs-grid{
	display:grid !important;
	grid-template-columns:repeat(3, minmax(0,1fr)) !important;
	gap:16px !important;
	align-items:stretch;
	margin:0;padding:0;
}
/* 子要素に外から来る幅・float・displayを無効化（kpi-3対策と同型） */
.feature-block .ww-refs-grid > *{
	box-sizing:border-box;
	width:auto !important;max-width:none !important;
	float:none !important;display:block !important;
	margin:0 !important;
}
.feature-block .ww-refs-card{
	background:#fff;
	border:1px solid #eee !important;
	border-radius:8px;
	padding:16px !important;
	box-shadow:none !important;
	height:100%;
	transition:.15s ease;
}
.feature-block .ww-refs-card:hover{border-color:#ddd !important;transform:translateY(-2px)}
.feature-block .ww-refs-card__title{font-size:14px !important;font-weight:600;line-height:1.6;margin:0 0 6px !important;padding:0;display:block}
.feature-block .ww-refs-card__title a{color:#111 !important;text-decoration:none}
.feature-block .ww-refs-card__title a:hover{color:var(--ww-accent) !important;text-decoration:underline}
.feature-block .ww-refs-card__desc{font-size:13px !important;line-height:1.6;color:#555 !important;margin:0 !important}
 
@media (max-width:980px){.feature-block .ww-refs-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important}}
@media (max-width:640px){.feature-block .ww-refs-grid{grid-template-columns:1fr !important}}