@charset "UTF-8";
/* ============================================================
   brandmanufacturing.html 専用
   色はサイトの stcss.css に合わせる：文字 #727171 ／ 罫線 #d5d5d5 ／ 赤 #e1001e（h1下線・h2の赤バーと同じ）
   製造業の現状を示す統計ブロック（.mfg-stats）
   既存CSSには手を入れず、このファイルだけで完結
   ============================================================ */

.mfg-stats{
	float: left; clear: both;
	font-family: "FOT-セザンヌ Pro M", sans-serif;   /* サイトは全ブロックfloat:left。合わせないと右に流れる */
	--mfg-ink: #727171;
	--mfg-sub: #a0a0a0;
	--mfg-line: #d5d5d5;
	--mfg-fill: #727171;
	--mfg-rest: #e5e5e5;
	--mfg-aka: #e1001e;
	--mfg-ease: cubic-bezier(.22,.61,.36,1);
	box-sizing: border-box;
	width: 100%;
	margin: 30px 0 40px;
	padding: 0;
	color: var(--mfg-ink);
	letter-spacing: 0.04em;
	line-height: 1.6;
}
.mfg-stats *,
.mfg-stats *::before,
.mfg-stats *::after{ box-sizing: border-box; }

/* 見出し行 */
.mfg-stats__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--mfg-ink);
	position: relative;
}
.mfg-stats__head::after{
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	height: 1px; width: 100%;
	background: var(--mfg-ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.2s var(--mfg-ease);
}
.mfg-stats.is-in .mfg-stats__head::after{ transform: scaleX(1); }
.mfg-stats__head{ border-bottom-color: var(--mfg-line); }

.mfg-stats__title{
	margin: 0;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 0.12em;
}
.mfg-stats__title small{
	display: block;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--mfg-sub);
	margin-bottom: 4px;
}
.mfg-stats__year{
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--mfg-sub);
	white-space: nowrap;
}

/* グリッド */
.mfg-stats__grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* カード */
.mfg-card{
	position: relative;
	margin: 0;
	padding: 26px 26px 22px;
	border: 1px solid var(--mfg-line);
	background: #fff;
	min-height: 236px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .9s var(--mfg-ease),
		transform .9s var(--mfg-ease),
		border-color .4s,
		box-shadow .4s;
}
.mfg-stats.is-in .mfg-card{ opacity: 1; transform: none; }
.mfg-stats.is-in .mfg-card:nth-child(1){ transition-delay: .05s; }
.mfg-stats.is-in .mfg-card:nth-child(2){ transition-delay: .18s; }
.mfg-stats.is-in .mfg-card:nth-child(3){ transition-delay: .31s; }
.mfg-stats.is-in .mfg-card:nth-child(4){ transition-delay: .44s; }

.mfg-card:hover{
	border-color: var(--mfg-ink);
	box-shadow: 0 10px 30px -18px rgba(0,0,0,.35);
}
/* 左上の短い罫線がカードの通し番号と一緒に伸びる */
.mfg-card::before{
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 2px;
	background: var(--mfg-ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1s var(--mfg-ease) .4s;
}
.mfg-stats.is-in .mfg-card::before{ transform: scaleX(1); }

.mfg-card__no{
	position: absolute;
	top: 12px; right: 16px;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--mfg-sub);
}
.mfg-card__label{
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--mfg-sub);
	margin: 0 0 10px;
}
.mfg-card__num{
	margin: 0;
	font-size: 54px;
	line-height: 1;
	letter-spacing: -0.01em;
	font-weight: normal;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.mfg-card__num .unit{
	font-size: 20px;
	letter-spacing: 0.06em;
	margin-left: 2px;
}
.mfg-card__note{
	margin: 10px 0 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--mfg-sub);
}
.mfg-card__note .aka{ color: var(--mfg-aka); }

/* 図版エリア */
.mfg-card__fig{
	margin-top: 18px;
	width: 100%;
}
.mfg-card__fig svg{
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* 01 就業者数：折れ線が引かれ、点が打たれ、減少幅が落ちる */
.mfg-fig-line .axis{ stroke: var(--mfg-line); stroke-width: 1; }
.mfg-fig-line .path{
	stroke: var(--mfg-ink); stroke-width: 2; fill: none;
	stroke-linecap: round;
	stroke-dasharray: 400; stroke-dashoffset: 400;
	transition: stroke-dashoffset 1.6s var(--mfg-ease) .6s;
}
.mfg-fig-line .dot{
	fill: #fff; stroke: var(--mfg-ink); stroke-width: 2;
	transform-box: fill-box; transform-origin: center;
	transform: scale(0);
	transition: transform .5s var(--mfg-ease);
}
.mfg-fig-line .dot.d1{ transition-delay: .7s; }
.mfg-fig-line .dot.d3{ transition-delay: 2.0s; fill: var(--mfg-aka); stroke: var(--mfg-aka); }
.mfg-fig-line .lbl{ font-size: 10px; fill: var(--mfg-sub); letter-spacing: .1em; }
.mfg-fig-line .drop{
	font-size: 11px; fill: var(--mfg-aka); letter-spacing: .08em;
	opacity: 0; transform: translateY(-6px);
	transition: opacity .6s var(--mfg-ease) 2.2s, transform .6s var(--mfg-ease) 2.2s;
}
.mfg-stats.is-in .mfg-fig-line .path{ stroke-dashoffset: 0; }
.mfg-stats.is-in .mfg-fig-line .dot{ transform: scale(1); }
.mfg-stats.is-in .mfg-fig-line .drop{ opacity: 1; transform: none; }

/* 02 価格転嫁率：横バーが39.9%まで満ち、残りは斜線 */
.mfg-fig-bar{ position: relative; height: 34px; }
.mfg-fig-bar .track{
	position: absolute; inset: 0;
	border: 1px solid var(--mfg-line);
	background:
		repeating-linear-gradient(135deg,
			transparent 0 6px,
			var(--mfg-rest) 6px 7px);
}
.mfg-fig-bar .fill{
	position: absolute; top: 0; left: 0; bottom: 0;
	width: var(--v, 0%);
	background: var(--mfg-fill);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.8s var(--mfg-ease) .6s;
}
.mfg-stats.is-in .mfg-fig-bar .fill{ transform: scaleX(1); }
.mfg-fig-bar .tick{
	position: absolute; top: 100%; margin-top: 6px;
	font-size: 10px; letter-spacing: .1em; color: var(--mfg-sub);
}
.mfg-fig-bar .tick.t0{ left: 0; }
.mfg-fig-bar .tick.t100{ right: 0; }
.mfg-fig-bar .tick.tv{
	left: var(--v, 0%);
	transform: translateX(-50%);
	color: var(--mfg-ink);
	opacity: 0;
	transition: opacity .6s var(--mfg-ease) 2.2s;
}
.mfg-stats.is-in .mfg-fig-bar .tick.tv{ opacity: 1; }
.mfg-fig-bar .tick.tv::before{
	content: "";
	position: absolute; left: 50%; top: -8px;
	width: 1px; height: 6px; background: var(--mfg-ink);
}
.mfg-card--bar .mfg-card__fig{ margin-bottom: 18px; }

/* 03 後継者不在率：リング */
.mfg-fig-ring{ display: flex; align-items: center; gap: 18px; }
.mfg-fig-ring svg{ width: 84px; height: 84px; flex: 0 0 84px; }
.mfg-fig-ring .bg{ fill: none; stroke: var(--mfg-rest); stroke-width: 7; }
.mfg-fig-ring .arc{
	fill: none; stroke: var(--mfg-ink); stroke-width: 7;
	stroke-linecap: butt;
	stroke-dasharray: var(--c, 220);
	stroke-dashoffset: var(--c, 220);
	transform: rotate(-90deg);
	transform-origin: center;
	transition: stroke-dashoffset 1.8s var(--mfg-ease) .6s;
}
.mfg-stats.is-in .mfg-fig-ring .arc{ stroke-dashoffset: var(--o, 0); }
.mfg-fig-ring .cap{
	font-size: 11px; letter-spacing: .1em; color: var(--mfg-sub); line-height: 1.8;
}
.mfg-fig-ring .cap b{ font-weight: normal; color: var(--mfg-ink); }

/* 04 技能継承：3社のうち1社だけが塗られる */
.mfg-fig-three{ display: flex; gap: 10px; align-items: flex-end; }
.mfg-fig-three .co{
	flex: 1 1 0;
	height: 44px;
	border: 1px solid var(--mfg-ink);
	position: relative;
	overflow: hidden;
}
.mfg-fig-three .co::after{
	content: "";
	position: absolute; inset: 0;
	background: var(--mfg-ink);
	transform: translateY(100%);
	transition: transform 1s var(--mfg-ease);
}
.mfg-fig-three .co.on::after{ transition-delay: 1.2s; }
.mfg-stats.is-in .mfg-fig-three .co.on::after{ transform: translateY(0); }
.mfg-fig-three .co.off{
	background:
		repeating-linear-gradient(135deg,
			transparent 0 6px,
			var(--mfg-rest) 6px 7px);
	border-color: var(--mfg-line);
}
.mfg-fig-three__lbl{
	display: flex; justify-content: space-between;
	margin-top: 6px;
	font-size: 10px; letter-spacing: .1em; color: var(--mfg-sub);
}

/* 出典 */
.mfg-stats__src{
	margin: 14px 0 0;
	font-size: 10px;
	line-height: 1.9;
	letter-spacing: .08em;
	color: var(--mfg-sub);
}
.mfg-stats__src a{ color: inherit; text-decoration: underline; }

/* 減速モーション設定の人には最初から出しておく */
@media (prefers-reduced-motion: reduce){
	.mfg-stats *{ transition: none !important; }
	.mfg-card{ opacity: 1; transform: none; }
	.mfg-card::before,
	.mfg-stats__head::after{ transform: scaleX(1); }
	.mfg-fig-line .path{ stroke-dashoffset: 0; }
	.mfg-fig-line .dot{ transform: scale(1); }
	.mfg-fig-line .drop{ opacity: 1; transform: none; }
	.mfg-fig-bar .fill{ transform: scaleX(1); }
	.mfg-fig-bar .tick.tv{ opacity: 1; }
	.mfg-fig-ring .arc{ stroke-dashoffset: var(--o, 0); }
	.mfg-fig-three .co.on::after{ transform: translateY(0); }
}

/* スマホ */
@media only screen and (max-width: 767px){
	.mfg-stats__grid{ grid-template-columns: 1fr; gap: 12px; }
	.mfg-card{ min-height: 0; padding: 22px 20px 20px; }
	.mfg-card__num{ font-size: 44px; }
	.mfg-stats__head{ flex-direction: column; gap: 6px; align-items: flex-start; }
}




/* ============================================================
   共通：サイトのfloatレイアウトに合わせる
   ============================================================ */
.mfg-needs, .mfg-chart, .mfg-point, .mfg-faq, .mfg-photo{
	float: left; clear: both; width: 100%; box-sizing: border-box;
	font-family: "FOT-セザンヌ Pro M", sans-serif;   /* #mtitlemain1 の外に置くブロックはサイトのフォント指定が届かないので明示 */
	--mfg-ink:#727171; --mfg-sub:#a0a0a0; --mfg-line:#d5d5d5; --mfg-aka:#e1001e;
	--mfg-ease: cubic-bezier(.22,.61,.36,1);
}
.mfg-needs *, .mfg-chart *, .mfg-point *, .mfg-faq *{ box-sizing: border-box; }
.mfg-photo{ margin: 0 0 30px; }
.mfg-photo img, .mfg-point__photo img{ display:block; width:100%; height:auto; }

/* ============================================================
   冒頭：大阪信金の経営課題グラフ（.mfg-chart）
   ============================================================ */
.mfg-chart{
	margin: 30px 0 90px; padding: 0 0 36px; border-bottom: 1px solid var(--mfg-line);
	color: var(--mfg-ink); letter-spacing: .08em;
}
.mfg-chart__src-top{ margin:10px 0 18px; font-size:10px; letter-spacing:.14em; color:var(--mfg-sub); }
.mfg-chart__big{
	margin:24px 0 0; font-size:58px; line-height:1; letter-spacing:0; color:var(--mfg-ink);
	font-variant-numeric: tabular-nums; display:flex; align-items:baseline; gap:4px;
}
.mfg-chart__big .unit{ font-size:22px; }
.mfg-chart__lead{ margin:14px 0 30px; font-size:14px; line-height:1.9; color:var(--mfg-ink); }
.mfg-chart__bars{ list-style:none; margin:0; padding:0; }
.mfg-chart__bars li{
	display:grid; grid-template-columns: 190px 1fr 56px; align-items:center; gap:14px;
	margin:0 0 12px; padding:0;
	opacity:0; transform:translateY(8px);
	transition: opacity .6s var(--mfg-ease), transform .6s var(--mfg-ease);
}
.mfg-chart.is-in .mfg-chart__bars li{ opacity:1; transform:none; }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(1){ transition-delay:.1s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(2){ transition-delay:.2s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(3){ transition-delay:.3s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(4){ transition-delay:.4s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(5){ transition-delay:.5s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(6){ transition-delay:.6s }
.mfg-chart__bars .l{ font-size:12px; line-height:1.5; color:var(--mfg-ink); }
.mfg-chart__bars .b{ display:block; height:14px; background:#efefef; position:relative; }
.mfg-chart__bars .b i{
	position:absolute; left:0; top:0; bottom:0; width:var(--v,0%); background:#727171;
	transform:scaleX(0); transform-origin:left center;
	transition: transform 1.4s var(--mfg-ease);
}
.mfg-chart__bars li:first-child .b i{ background:var(--mfg-aka); }
.mfg-chart.is-in .mfg-chart__bars .b i{ transform:scaleX(1); }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(1) .b i{ transition-delay:.3s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(2) .b i{ transition-delay:.4s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(3) .b i{ transition-delay:.5s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(4) .b i{ transition-delay:.6s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(5) .b i{ transition-delay:.7s }
.mfg-chart.is-in .mfg-chart__bars li:nth-child(6) .b i{ transition-delay:.8s }
.mfg-chart__bars .v{ font-size:12px; text-align:right; font-variant-numeric:tabular-nums; color:var(--mfg-ink);
	opacity:0; transition: opacity .5s var(--mfg-ease) 1.5s; }
.mfg-chart.is-in .mfg-chart__bars .v{ opacity:1; }
.mfg-chart__bars li:first-child .v{ color:var(--mfg-aka); }
.mfg-chart__note{ margin:28px 0 0; font-size:13px; line-height:2; color:var(--mfg-ink); }
.mfg-chart__note b{ font-weight:normal; color:var(--mfg-aka); }
.mfg-chart__src{ margin:16px 0 0; font-size:10px; line-height:1.9; letter-spacing:.1em; color:var(--mfg-sub); }
.mfg-chart__src a{ color:inherit; }

/* --- 比較グラフ（赤＝製造業／今年度、灰＝全業種／前年度） --- */
.mfg-chart__legend{ margin:-14px 0 22px; font-size:11px; letter-spacing:.12em; color:var(--mfg-ink); display:flex; gap:22px; }
.mfg-chart__legend span{ display:inline-flex; align-items:center; gap:8px; }
.mfg-chart__legend span::before{ content:""; display:inline-block; width:18px; height:8px; background:var(--mfg-aka); }
.mfg-chart__legend .k2::before{ height:4px; background:var(--mfg-sub); }
.mfg-chart--pair .mfg-chart__bars .b{ height:auto; background:linear-gradient(#efefef,#efefef) left top / 100% 12px no-repeat; }
.mfg-chart--pair .mfg-chart__bars .b i{ position:relative; display:block; height:12px; background:var(--mfg-aka); }
.mfg-chart--pair .mfg-chart__bars .b i.w{ width:var(--w,0%); height:5px; margin-top:4px; background:var(--mfg-sub); }
.mfg-chart--pair .mfg-chart__bars .v{ color:var(--mfg-aka); line-height:1.3; }
.mfg-chart--pair .mfg-chart__bars .v small{ display:block; font-size:10px; color:var(--mfg-sub); }
.mfg-chart--pair .mfg-chart__bars li{ margin-bottom:16px; }
/* --- 強調したい項目だけ赤（先頭以外を強調する場合） --- */
.mfg-chart--key .mfg-chart__bars li:first-child .b i{ background:#727171; }
.mfg-chart--key .mfg-chart__bars li:first-child .v{ color:var(--mfg-ink); }
.mfg-chart--key .mfg-chart__bars li.is-key .b i{ background:var(--mfg-aka); }
.mfg-chart--key .mfg-chart__bars li.is-key .v{ color:var(--mfg-aka); }

/* ============================================================
   7つのポイント（.mfg-point）写真＋小ラベル＋見出し＋本文
   ============================================================ */
.mfg-point{
	margin: 10px 0 50px; padding: 0 0 50px; border-bottom: 1px solid var(--mfg-line);
	letter-spacing:.08em; color:var(--mfg-ink);
}
.mfg-point:last-of-type{ border-bottom:0; }
.mfg-point__photo{
	margin:0 0 26px; overflow:hidden;
}
.mfg-point__photo img{
	transform:scale(1.04); opacity:0;
	transition: transform 1.4s var(--mfg-ease), opacity 1s var(--mfg-ease);
}
.mfg-point.is-in .mfg-point__photo img{ transform:none; opacity:1; }
.mfg-point__title{
	font-family: "FOT-セザンヌ Pro M", sans-serif;
	margin:26px 0 22px; padding:0; border:0; background:none;
	font-size:18px; font-weight:normal; line-height:1.7; letter-spacing:.1em; color:var(--mfg-ink);
}
.mfg-point__title, .mfg-point__lead, .mfg-point__body, .mfg-point__more{
	opacity:0; transform:translateY(10px);
	transition: opacity .8s var(--mfg-ease), transform .8s var(--mfg-ease);
}
.mfg-point.is-in .mfg-point__title{ opacity:1; transform:none; transition-delay:.3s; }
.mfg-point.is-in .mfg-point__lead{ opacity:1; transform:none; transition-delay:.4s; }
.mfg-point.is-in .mfg-point__body{ opacity:1; transform:none; transition-delay:.5s; }
.mfg-point.is-in .mfg-point__more{ opacity:1; transform:none; transition-delay:.6s; }
.mfg-point__lead{ margin:0 0 24px; font-size:13px; line-height:2; color:var(--mfg-aka); }
.mfg-point__body p{ margin:0 0 2.6em; font-size:13px; line-height:2.2; }
.mfg-point__body p:last-child{ margin-bottom:0; }
.mfg-point__more{ margin:30px 0 0; font-size:13px; }
.mfg-point__more a{ color:var(--mfg-ink); }

/* ============================================================
   よくある疑問（.mfg-faq）details/summary・JS不要
   ============================================================ */
.mfg-faq{
	margin: 30px 0 50px; letter-spacing:.08em; color:var(--mfg-ink);
	border-top:1px solid var(--mfg-line);
}
.mfg-faq__item{
	border-bottom:1px solid var(--mfg-line); margin:0;
	opacity:0; transform:translateY(8px);
	transition: opacity .7s var(--mfg-ease), transform .7s var(--mfg-ease);
}
.mfg-faq.is-in .mfg-faq__item{ opacity:1; transform:none; }
.mfg-faq.is-in .mfg-faq__item:nth-child(2){ transition-delay:.08s } .mfg-faq.is-in .mfg-faq__item:nth-child(3){ transition-delay:.16s }
.mfg-faq.is-in .mfg-faq__item:nth-child(4){ transition-delay:.24s } .mfg-faq.is-in .mfg-faq__item:nth-child(5){ transition-delay:.32s }
.mfg-faq summary{
	list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:14px;
	padding:20px 40px 20px 0; position:relative; font-size:13px; line-height:1.9;
}
.mfg-faq summary::-webkit-details-marker{ display:none; }
.mfg-faq summary:hover .mfg-faq__qt{ color:var(--mfg-aka); }
.mfg-faq__q, .mfg-faq__al{ flex:0 0 auto; width:22px; font-size:15px; line-height:1.6; letter-spacing:0; color:var(--mfg-ink); }
.mfg-faq__al{ color:var(--mfg-aka); }
.mfg-faq__qt{ flex:1 1 auto; transition:color .3s; }
.mfg-faq__ic{ position:absolute; right:4px; top:50%; width:14px; height:14px; margin-top:-7px; }
.mfg-faq__ic::before, .mfg-faq__ic::after{ content:""; position:absolute; background:var(--mfg-ink); transition: transform .4s var(--mfg-ease), opacity .3s; }
.mfg-faq__ic::before{ left:0; top:6px; width:14px; height:1px; }
.mfg-faq__ic::after{ left:6px; top:0; width:1px; height:14px; }
.mfg-faq__item[open] .mfg-faq__ic::after{ transform:rotate(90deg); opacity:0; }
.mfg-faq__a{ display:flex; gap:14px; padding:0 40px 24px 0; animation: mfgFaqIn .5s var(--mfg-ease); }
.mfg-faq__a p{ margin:0; font-size:13px; line-height:2.1; }
.mfg-faq__a a{ color:var(--mfg-ink); }
@keyframes mfgFaqIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce){
	.mfg-chart__bars li, .mfg-chart__bars .v, .mfg-point__photo img, .mfg-point__label, .mfg-point__title,
	.mfg-point__lead, .mfg-point__body, .mfg-point__more, .mfg-faq__item{ opacity:1; transform:none; transition:none; }
	.mfg-chart__bars .b i{ transform:scaleX(1); transition:none; }
	.mfg-faq__a{ animation:none; }
}

@media only screen and (max-width: 767px){
	.mfg-chart__big{ font-size:44px; }
	.mfg-chart__bars li{ grid-template-columns: 1fr 48px; grid-template-areas:"l v" "b b"; gap:6px 10px; margin-bottom:14px; }
	.mfg-chart__bars .l{ grid-area:l; } .mfg-chart__bars .b{ grid-area:b; } .mfg-chart__bars .v{ grid-area:v; }
	.mfg-point{ margin:30px 0 40px; padding-bottom:36px; }
	.mfg-point__title{ font-size:16px; margin-top:20px; }
	.mfg-faq summary{ padding-right:30px; }
	.mfg-faq__a{ padding-right:0; }
}


/* ============================================================
   これから増える7つの需要（.mfg-needs）
   行全体がリンク。ホバー／タップで黒に反転
   ============================================================ */
.mfg-needs{ margin: 36px 0 70px; letter-spacing:.08em; color:var(--mfg-ink); }
.mfg-needs__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
.mfg-needs__title{
	margin:0; display:inline-block; padding:5px 12px 4px 14px;
	background:var(--mfg-aka); color:#fff; font-size:15px; letter-spacing:.14em; line-height:1.6;
}
.mfg-needs__sub{ margin:0; font-size:10px; letter-spacing:.14em; color:var(--mfg-sub); }
.mfg-needs__cols{
	display:grid; grid-template-columns: 96px 22% 28% 1fr; gap:0 20px;
	padding:0 0 10px 18px; border-bottom:1px solid var(--mfg-ink);
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--mfg-sub);
}
.mfg-needs__list{ list-style:none; margin:0; padding:0; }
.mfg-needs__list li{ margin:0; padding:0; }
.mfg-needs__row{
	display:grid; grid-template-columns: 96px 22% 28% 1fr; gap:0 20px; align-items:center;
	position:relative; padding:24px 18px 30px; min-height:96px;
	border-bottom:1px solid var(--mfg-line);
	color:var(--mfg-ink) !important; text-decoration:none !important; border-top:0; outline:0;
	background:#fff;
	opacity:0; transform:translateY(10px);
	transition: opacity .6s var(--mfg-ease), transform .6s var(--mfg-ease),
	            background-color .35s var(--mfg-ease), color .35s var(--mfg-ease);
}
.mfg-needs__row *{ text-decoration:none !important; border-bottom:0; }
.mfg-needs.is-in .mfg-needs__row{ opacity:1; transform:none; }
.mfg-needs.is-in li:nth-child(1) .mfg-needs__row{ transition-delay:.05s,.05s,0s,0s } .mfg-needs.is-in li:nth-child(2) .mfg-needs__row{ transition-delay:.15s,.15s,0s,0s }
.mfg-needs.is-in li:nth-child(3) .mfg-needs__row{ transition-delay:.25s,.25s,0s,0s } .mfg-needs.is-in li:nth-child(4) .mfg-needs__row{ transition-delay:.35s,.35s,0s,0s }
.mfg-needs.is-in li:nth-child(5) .mfg-needs__row{ transition-delay:.45s,.45s,0s,0s } .mfg-needs.is-in li:nth-child(6) .mfg-needs__row{ transition-delay:.55s,.55s,0s,0s }
.mfg-needs.is-in li:nth-child(7) .mfg-needs__row{ transition-delay:.65s,.65s,0s,0s }

/* 番号：太い「01」｜細線｜細い「1」（参考資料の見出し意匠） */
.mfg-needs__num{
	display:flex; align-items:baseline; gap:10px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; line-height:1; letter-spacing:-.02em;
}
.mfg-needs__num b{ font-size:34px; font-weight:bold; }
.mfg-needs__num i{ display:block; width:1px; height:22px; background:currentColor; opacity:.5; align-self:center; }
.mfg-needs__num small{ font-size:32px; font-weight:200; opacity:.7; }
.mfg-needs__need{ display:flex; flex-direction:column; gap:2px; }
.mfg-needs__need strong{ font-weight:normal; font-size:14px; line-height:1.6; letter-spacing:.1em; }
.mfg-needs__need em{
	font-style:normal; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:9px; letter-spacing:.22em; text-transform:uppercase; opacity:.55;
}
.mfg-needs__pain{ font-size:12px; line-height:1.9; opacity:.8; }
.mfg-needs__work{ font-size:12px; line-height:1.9; }
.mfg-needs .lb{ display:none; }
.mfg-needs .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mfg-needs .chips span{
	display:inline-block; padding:3px 9px; border:1px solid currentColor; border-radius:2px;
	font-size:11px; line-height:1.6; letter-spacing:.06em; opacity:.85;
	transition: border-color .3s, color .3s;
}
/* 右下の黒いタブ（参考資料の斜めのタグ） */
.mfg-needs__tab{
	position:absolute; right:0; bottom:-1px;
	padding:3px 12px 3px 22px; background:var(--mfg-ink); color:#fff;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:9px; letter-spacing:.2em; text-transform:uppercase; line-height:1.6;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
	transition: background-color .35s, color .35s;
}
/* 反転 */
.mfg-needs__row:hover, .mfg-needs__row:active, .mfg-needs__row:focus-visible{
	background:var(--mfg-aka); color:#fff !important;
}
.mfg-needs__row:hover .mfg-needs__tab, .mfg-needs__row:active .mfg-needs__tab{ background:var(--mfg-ink); color:#fff; }
.mfg-needs__row:hover .mfg-needs__num small, .mfg-needs__row:hover .mfg-needs__need em{ opacity:.85; }
.mfg-needs__row:hover .mfg-needs__pain, .mfg-needs__row:active .mfg-needs__pain{ opacity:1; }
.mfg-needs__row:hover .chips span{ opacity:1; }
.mfg-needs__row:hover .mfg-needs__pain{ opacity:.9; }

@media (prefers-reduced-motion: reduce){
	.mfg-needs__row{ opacity:1; transform:none; transition:none; }
}
@media only screen and (max-width: 767px){
	.mfg-needs{ margin-bottom:60px; }
	.mfg-needs__head{ flex-direction:column; gap:4px; }
	.mfg-needs__cols{ display:none; }
	.mfg-needs__list{ border-top:1px solid var(--mfg-ink); }
	.mfg-needs__row{ display:block; padding:20px 14px 36px; min-height:0; }
	.mfg-needs__num{ float:left; margin:0 14px 0 0; }
	.mfg-needs__num b{ font-size:30px; }
	.mfg-needs__num i{ height:20px; } .mfg-needs__num small{ font-size:26px; }
	.mfg-needs__need{ min-height:34px; justify-content:center; margin-bottom:12px; }
	.mfg-needs__need strong{ font-size:14px; }
	.mfg-needs__pain{ display:block; clear:both; margin-bottom:10px; }
	.mfg-needs__work{ display:flex; align-items:flex-start; }
	.mfg-needs .lb{ display:inline-block; font-size:9px; letter-spacing:.2em; opacity:.6; margin-right:8px; flex:0 0 auto; padding-top:5px; }
	.mfg-needs__pain .lb{ padding-top:0; }
	.mfg-needs__tab{ bottom:0; }
}

/* ============================================================
   各ポイントの頭（.mfg-head）：需要の表と同じ番号の組み方＋タブ
   ============================================================ */
.mfg-head{
	display:flex; align-items:center; gap:18px; position:relative;
	padding:22px 0 26px; border-top:2px solid var(--mfg-ink); border-bottom:1px solid var(--mfg-line);
	letter-spacing:.08em;
}
.mfg-head__num{
	display:flex; align-items:baseline; gap:10px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; line-height:1; letter-spacing:-.02em;
	opacity:0; transform:translateX(-10px); transition: opacity .7s var(--mfg-ease), transform .7s var(--mfg-ease);
}
.mfg-point.is-in .mfg-head__num{ opacity:1; transform:none; }
.mfg-head__num b{ font-size:46px; font-weight:bold; color:var(--mfg-ink); }
.mfg-head__num i{ display:block; width:1px; height:30px; background:var(--mfg-ink); opacity:.4; align-self:center; }
.mfg-head__num small{ font-size:44px; font-weight:200; color:var(--mfg-ink); opacity:.75; }
.mfg-head__name{
	display:flex; flex-direction:column; gap:2px;
	opacity:0; transition: opacity .7s var(--mfg-ease) .2s;
}
.mfg-point.is-in .mfg-head__name{ opacity:1; }
.mfg-head__name strong{ font-weight:normal; font-size:14px; letter-spacing:.12em; color:var(--mfg-ink); }
.mfg-head__name em{
	font-style:normal; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--mfg-sub);
}
.mfg-head__tab{
	position:absolute; right:0; bottom:-1px;
	padding:3px 12px 3px 22px; background:var(--mfg-aka); color:#fff;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:9px; letter-spacing:.2em; text-transform:uppercase; line-height:1.6;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
	transform:translateY(6px); opacity:0; transition: opacity .6s var(--mfg-ease) .35s, transform .6s var(--mfg-ease) .35s;
	/* 右へずらすと、表示前にスマホで横スクロールが出るため縦方向で動かす */
}
.mfg-point.is-in .mfg-head__tab{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
	.mfg-head__num, .mfg-head__name, .mfg-head__tab{ opacity:1; transform:none; transition:none; }
}
@media only screen and (max-width: 767px){
	.mfg-head{ padding:18px 0 28px; gap:14px; }
	.mfg-head__num b{ font-size:38px; } .mfg-head__num small{ font-size:32px; } .mfg-head__num i{ height:24px; }
	.mfg-head__name strong{ font-size:13px; }
}

/* 1つ目のポイントの中に置いたグラフ：写真と同じ位置・同じ間隔に */
.mfg-point .mfg-chart{ float:none; margin:0 0 30px; padding:0 0 30px; }

/* 著者・日付（バイライン） */
.mfg-byline{
	float:left; clear:both; width:100%; box-sizing:border-box;
	margin:0 0 6px; font-family:"FOT-セザンヌ Pro M", sans-serif;
	font-size:11px; line-height:1.9; letter-spacing:.1em; color:#a0a0a0;
}
.mfg-byline span{ margin-left:1.6em; white-space:nowrap; }
@media only screen and (max-width: 767px){
	.mfg-byline span{ display:inline-block; margin:0 1.2em 0 0; }
	.mfg-byline span:first-of-type{ margin-left:0; }
}

/* 子ページ：未執筆の箇所（公開前に必ず差し替え） */
.mfg-todo{
	float:left; clear:both; width:100%; box-sizing:border-box;
	margin:20px 0 40px; padding:14px 18px;
	border:1px dashed #e1001e; background:#fff;
	font-size:12px; line-height:1.9; letter-spacing:.08em; color:#e1001e;
}
/* 子ページ下部：他の6項目への一覧（悩み・デザイン列なしの簡易版） */
.mfg-needs--mini{ margin-top:20px; }
.mfg-needs--mini .mfg-needs__list{ border-top:1px solid #727171; }
.mfg-needs__row--mini{ grid-template-columns: 96px 1fr; min-height:0; padding:18px 18px 26px; }
@media only screen and (max-width: 767px){
	.mfg-needs__row--mini{ padding:16px 14px 30px; }
	.mfg-needs__row--mini .mfg-needs__need{ margin-bottom:0; }
}

/* ============================================================
   制作事例のビフォー・アフター（.mfg-ba）
   ============================================================ */
.mfg-ba{ box-sizing:border-box; display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; margin:10px 0 40px; color:var(--mfg-ink); letter-spacing:.08em; }
.mfg-ba__col{ display:flex; flex-direction:column; gap:10px; padding:26px 28px; border:1px solid var(--mfg-line);
	opacity:0; transform:translateY(10px); transition:opacity .7s var(--mfg-ease), transform .7s var(--mfg-ease); }
.mfg-ba__col--after{ border-color:var(--mfg-aka); transition-delay:.35s; }
.mfg-ba.is-in .mfg-ba__col{ opacity:1; transform:none; }
.mfg-ba__lbl{ font-size:10px; letter-spacing:.2em; color:var(--mfg-sub); }
.mfg-ba__col--after .mfg-ba__lbl{ color:var(--mfg-aka); }
.mfg-ba__name{ font-size:15px; line-height:1.6; }
.mfg-ba__name small{ display:block; font-size:11px; color:var(--mfg-sub); }
.mfg-ba__price{ margin-top:auto; font-size:40px; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums; }
.mfg-ba__price small{ font-size:12px; margin-left:4px; letter-spacing:.08em; }
.mfg-ba__col--after .mfg-ba__price{ color:var(--mfg-aka); }
.mfg-ba__arrow{ position:relative; align-self:center; justify-self:center; width:24px; height:24px; }
.mfg-ba__arrow::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--mfg-ink); }
.mfg-ba__arrow::after{ content:""; position:absolute; right:0; top:50%; width:8px; height:8px; margin-top:-4px;
	border-top:1px solid var(--mfg-ink); border-right:1px solid var(--mfg-ink); transform:rotate(45deg); }
@media (prefers-reduced-motion: reduce){ .mfg-ba__col{ opacity:1; transform:none; transition:none; } }
@media only screen and (max-width: 767px){
	.mfg-ba{ grid-template-columns:1fr; }
	.mfg-ba__col{ padding:20px; }
	.mfg-ba__price{ font-size:34px; }
	.mfg-ba__arrow{ transform:rotate(90deg); margin:10px 0; }
}

/* --- ポイント内の制作事例（.mfg-case） --- */
.mfg-case{ margin:50px 0 0; padding:40px 0 0; border-top:1px solid var(--mfg-line); color:var(--mfg-ink); }
.mfg-case__title{ margin:0 0 18px; padding:0; border:0; background:none; text-align:left; text-decoration:none; font-family:inherit; font-weight:normal; font-size:14px; line-height:1.8; letter-spacing:.08em; color:var(--mfg-ink); }
.mfg-case__title span{ display:inline-block; margin-right:14px; padding:2px 10px; font-size:11px; letter-spacing:.14em; color:#fff; background:var(--mfg-aka); vertical-align:1px; }
.mfg-case__catch{ margin:0 0 40px; font-size:17px; line-height:2.6; letter-spacing:.12em; color:var(--mfg-ink); }
/* 1行ずつ赤いアンダーライン。折り返した行にも1本ずつ引かれ、上の文から順に出る */
.mfg-case__catch .ln{ padding-bottom:7px;
	background:linear-gradient(var(--mfg-aka), var(--mfg-aka)) left bottom / 0% 2px no-repeat;
	-webkit-box-decoration-break:clone; box-decoration-break:clone;
	transition:background-size 1s var(--mfg-ease); }
.mfg-case.is-in .mfg-case__catch .ln{ background-size:100% 2px; }
.mfg-case.is-in .mfg-case__catch .ln:nth-of-type(1){ transition-delay:.4s; }
.mfg-case.is-in .mfg-case__catch .ln:nth-of-type(2){ transition-delay:.9s; }
.mfg-case.is-in .mfg-case__catch .ln:nth-of-type(3){ transition-delay:1.4s; }
@media (prefers-reduced-motion: reduce){ .mfg-case__catch .ln{ background-size:100% 2px; transition:none; } }
/* ビフォー・アフターの2枚目（パッケージ） */
.mfg-case__fig .mfg-case__img.mfg-case__img--sub{ aspect-ratio:3 / 2; margin-top:12px; }
.mfg-case__fig .mfg-case__img--sub img{ object-fit:contain; background:#efefef; }
.mfg-case__pics--one{ grid-template-columns:1fr; }
.mfg-case__pics--one .mfg-case__img{ aspect-ratio:16 / 9; background:#9a9a9a; }
.mfg-case__pics--one .mfg-case__img img{ object-fit:contain; }
.mfg-case__img{ display:block; overflow:hidden; background:#efefef; }
.mfg-case__img img{ display:block; width:100%; height:100%; object-fit:cover; }

.mfg-case__compare{ display:grid; grid-template-columns:1fr 72px 1fr; align-items:start; margin:0 0 40px; container-type:inline-size; }
.mfg-case__compare .mfg-ba__arrow{ align-self:start; margin-top:150px; }
.mfg-case__fig{ margin:0; position:relative;
	opacity:0; transform:translateY(12px); transition:opacity .8s var(--mfg-ease), transform .8s var(--mfg-ease); }
.mfg-case__fig--after{ transition-delay:.35s; }
.mfg-case.is-in .mfg-case__fig{ opacity:1; transform:none; }
.mfg-case__fig .mfg-case__img{ aspect-ratio:1 / 1; border:1px solid var(--mfg-line); }
.mfg-case__fig--before .mfg-case__img img{ filter:grayscale(.15); }
.mfg-case__fig--after .mfg-case__img{ border-color:var(--mfg-aka); }
.mfg-case__tag{ position:absolute; left:0; top:0; z-index:1; padding:4px 12px; font-size:10px; letter-spacing:.2em; color:#fff; background:var(--mfg-ink); }
.mfg-case__fig--after .mfg-case__tag{ background:var(--mfg-aka); }
.mfg-case__fig figcaption{ margin:18px 0 10px; font-size:11px; line-height:1.7; color:var(--mfg-sub); }
.mfg-case__price{ display:block; margin-bottom:6px; font-size:26px; line-height:1; letter-spacing:0; color:var(--mfg-ink); font-variant-numeric:tabular-nums; }
.mfg-case__price small{ font-size:12px; margin-left:4px; letter-spacing:.08em; }
.mfg-case__fig--after .mfg-case__price{ color:var(--mfg-aka); }
.mfg-case__fig ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--mfg-line); }
.mfg-case__fig li{ padding:9px 0; font-size:12px; line-height:1.7; border-bottom:1px solid var(--mfg-line); }

.mfg-case__nums{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 44px; padding:0;
	border-top:1px solid var(--mfg-line); border-bottom:1px solid var(--mfg-line); }
.mfg-case__nums li{ padding:22px 20px; border-left:1px solid var(--mfg-line); }
.mfg-case__nums li:first-child{ border-left:0; padding-left:0; }
.mfg-case__nums .n{ display:flex; align-items:baseline; gap:4px; color:var(--mfg-aka); }
.mfg-case__nums b{ font-weight:normal; font-size:44px; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums; }
.mfg-case__nums i{ font-style:normal; font-size:14px; }
.mfg-case__nums .t{ display:block; margin-top:12px; font-size:11px; line-height:1.8; letter-spacing:.04em; color:var(--mfg-ink); }

.mfg-case .mfg-point__body{ margin-bottom:40px; }
.mfg-case .mfg-point__body:last-of-type{ margin-bottom:0; }
.mfg-case__pics{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 30px; }
.mfg-case__pics .mfg-case__img{ aspect-ratio:4 / 3; }
.mfg-case__work{ list-style:none; margin:0 0 44px; padding:0; border-top:1px solid var(--mfg-line); }
.mfg-case__work li{ display:grid; grid-template-columns:160px 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--mfg-line); }
.mfg-case__work .k{ font-size:13px; color:var(--mfg-aka); }
.mfg-case__work .d{ font-size:12px; line-height:2; }

@media (prefers-reduced-motion: reduce){ .mfg-case__fig{ opacity:1; transform:none; transition:none; } }
@media only screen and (max-width: 767px){
	.mfg-case__title span{ display:table; margin:0 0 8px; }
	.mfg-case__catch{ font-size:14px; line-height:2.4; letter-spacing:.06em; margin-bottom:28px; }
	.mfg-case__catch .ln{ padding-bottom:5px; }
	.mfg-case__pics--one .mfg-case__img{ aspect-ratio:auto; }
	.mfg-case__compare{ grid-template-columns:1fr; }
	.mfg-case__compare .mfg-ba__arrow{ align-self:center; margin:18px auto; transform:rotate(90deg); }
	.mfg-case__price{ font-size:22px; }
	.mfg-case__nums{ grid-template-columns:1fr; }
	.mfg-case__nums li{ border-left:0; padding:18px 0; border-top:1px solid var(--mfg-line); }
	.mfg-case__nums li:first-child{ border-top:0; }
	.mfg-case__nums b{ font-size:38px; }
	.mfg-case__pics{ grid-template-columns:1fr; gap:10px; }
	.mfg-case__pics .mfg-case__img{ aspect-ratio:auto; }
	.mfg-case__pics .mfg-case__img img{ height:auto; }
	.mfg-case__work li{ grid-template-columns:1fr; gap:4px; }
}

/* --- 機能の伝え方 比較表（.mfg-case__table） --- */
.mfg-case__sub{ margin:10px 0 20px; padding:0 0 0 14px; border:0; text-align:left; text-decoration:none; border-left:2px solid var(--mfg-aka); background:none;
	font-family:inherit; font-weight:normal; font-size:17px; line-height:1.6; letter-spacing:.1em; color:var(--mfg-ink); }
.mfg-case__table{ list-style:none; margin:0 0 40px; padding:0; border-top:1px solid var(--mfg-ink); }
.mfg-case__table li{ display:grid; grid-template-columns:130px 1fr 1fr; gap:0 24px; padding:16px 0; border-bottom:1px solid var(--mfg-line);
	opacity:0; transform:translateY(8px); transition:opacity .6s var(--mfg-ease), transform .6s var(--mfg-ease); }
.mfg-case.is-in .mfg-case__table li{ opacity:1; transform:none; }
.mfg-case__table .k{ font-size:12px; line-height:1.9; color:var(--mfg-ink); }
.mfg-case__table .b{ font-size:12px; line-height:1.9; color:var(--mfg-sub); }
.mfg-case__table .a{ font-size:12px; line-height:1.9; color:var(--mfg-ink); padding-left:16px; border-left:2px solid var(--mfg-aka); }
.mfg-case__table em{ display:none; font-style:normal; }
.mfg-case__table-head{ padding:10px 0 !important; }
.mfg-case__table-head .b, .mfg-case__table-head .a{ font-size:11px; letter-spacing:.14em; }
.mfg-case__table-head .a{ color:var(--mfg-aka); border-left-color:transparent; }
@media (prefers-reduced-motion: reduce){ .mfg-case__table li{ opacity:1; transform:none; transition:none; } }
@media only screen and (max-width: 767px){
	.mfg-case__sub{ font-size:15px; }
	.mfg-case__table-head{ display:none !important; }
	.mfg-case__table li{ grid-template-columns:1fr; gap:8px; padding:18px 0; }
	.mfg-case__table .k{ font-size:13px; color:var(--mfg-aka); }
	.mfg-case__table em{ display:block; font-size:10px; letter-spacing:.14em; margin-bottom:2px; }
	.mfg-case__table .b em{ color:var(--mfg-sub); }
	.mfg-case__table .a em{ color:var(--mfg-aka); }
}

/* ============================================================
   POINT枠（.mfg-pt）ポイント見出し直下の要点
   ============================================================ */
.mfg-pt{ position:relative; margin:24px 0 40px; padding:64px 60px 50px; border:1px solid var(--mfg-aka); text-align:center; color:var(--mfg-ink); }
.mfg-pt__lbl{ position:absolute; left:-1px; top:-1px; padding:6px 22px; font-size:12px; letter-spacing:.3em; color:#fff; background:var(--mfg-aka); }
.mfg-pt__title{ margin:0 0 30px; padding:0 0 24px; border-bottom:1px solid var(--mfg-aka); font-size:22px; line-height:1.6; letter-spacing:.42em; color:var(--mfg-ink); }
.mfg-pt__text{ margin:0; font-size:14px; line-height:2.3; letter-spacing:.16em; color:var(--mfg-aka); }
.mfg-pt__arrow{ position:relative; display:block; width:1px; height:56px; margin:20px auto 22px; background:var(--mfg-aka);
	transform:scaleY(0); transform-origin:top center; transition:transform .8s var(--mfg-ease) .5s; }
.mfg-pt__arrow::after{ content:""; position:absolute; left:-4px; bottom:0; width:0; height:0;
	border-left:4.5px solid transparent; border-right:4.5px solid transparent; border-top:8px solid var(--mfg-aka); }
.mfg-pt.is-in .mfg-pt__arrow{ transform:scaleY(1); }
.mfg-pt__ans{ display:inline-block; margin:0; padding:22px 40px; font-size:21px; line-height:2.3; letter-spacing:.38em; color:#fff; background:var(--mfg-aka);
	opacity:0; transform:translateY(10px); transition:opacity .8s var(--mfg-ease) 1.1s, transform .8s var(--mfg-ease) 1.1s; }
.mfg-pt.is-in .mfg-pt__ans{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
	.mfg-pt__arrow{ transform:none; transition:none; }
	.mfg-pt__ans{ opacity:1; transform:none; transition:none; }
}
@media only screen and (max-width: 767px){
	.mfg-pt{ padding:52px 18px 30px; margin:20px 0 30px; }
	.mfg-pt__lbl{ font-size:11px; padding:5px 16px; }
	.mfg-pt__title{ font-size:15px; letter-spacing:.06em; margin-bottom:22px; padding-bottom:18px; }
	.mfg-pt__text{ font-size:12px; letter-spacing:.06em; line-height:2.1; }
	.mfg-pt__arrow{ height:40px; margin:16px auto; }
	.mfg-pt__ans{ display:block; padding:16px 10px; font-size:16px; letter-spacing:.14em; line-height:2.1; }
}

/* 冒頭リードの一行（「しかし、順番が違う。」） */
.mfg-lead-big{ display:inline-block; font-family:"FOT-セザンヌ Pro M", sans-serif; font-size:22px; line-height:1.8; letter-spacing:.24em; color:#727171; }
@media only screen and (max-width: 767px){ .mfg-lead-big{ font-size:18px; letter-spacing:.12em; } }

/* ============================================================
   ビフォー → アフター（3段）。各段の間にシンプルな矢印
   ============================================================ */
.mfg-case .mfg-case__compare{ display:block; margin:0 0 40px; }
.mfg-case__row{ display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; margin:0 0 14px;
	opacity:0; transform:translateY(10px); transition:opacity .8s var(--mfg-ease), transform .8s var(--mfg-ease); }
.mfg-case.is-in .mfg-case__row{ opacity:1; transform:none; }
.mfg-case.is-in .mfg-case__row:nth-child(2){ transition-delay:.15s; }
.mfg-case.is-in .mfg-case__row:nth-child(3){ transition-delay:.3s; }
.mfg-case__row .mfg-case__img{ position:relative; aspect-ratio:1 / 1; border:1px solid var(--mfg-line); }
.mfg-case__row .mfg-case__img--after{ border-color:var(--mfg-aka); }
.mfg-case__row--sub .mfg-case__img{ aspect-ratio:3 / 2; }
#content .mfg-case__row .mfg-case__img img{ width:100%; height:100%; object-fit:cover; }
#content .mfg-case__row--sub .mfg-case__img img{ object-fit:contain; }
.mfg-case__caps{ display:grid; grid-template-columns:1fr 64px 1fr; margin-top:4px; }
.mfg-case__cap{ margin:14px 0 10px; font-size:11px; line-height:1.7; color:var(--mfg-sub); }

/* 矢印：細い線が伸び、先端がゆっくり前へ呼吸する */
.mfg-case__arrow{ position:relative; justify-self:center; width:30px; height:11px; }
.mfg-case__arrow i{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--mfg-ink);
	transform:scaleX(0); transform-origin:left center; transition:transform .8s var(--mfg-ease) .5s; }
.mfg-case__arrow i::after{ content:""; position:absolute; right:0; top:-3.5px; width:7px; height:7px;
	border-top:1px solid var(--mfg-ink); border-right:1px solid var(--mfg-ink); transform:rotate(45deg); }
.mfg-case.is-in .mfg-case__arrow i{ transform:scaleX(1); }
.mfg-case.is-in .mfg-case__arrow{ animation:mfgArrowNudge 2.8s var(--mfg-ease) 1.4s infinite; }
.mfg-case.is-in .mfg-case__row:nth-child(2) .mfg-case__arrow{ animation-delay:1.6s; }
.mfg-case.is-in .mfg-case__row:nth-child(3) .mfg-case__arrow{ animation-delay:1.8s; }
@keyframes mfgArrowNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce){
	.mfg-case__row{ opacity:1; transform:none; transition:none; }
	.mfg-case__arrow i{ transform:none; transition:none; }
	.mfg-case.is-in .mfg-case__arrow{ animation:none; }
}

@media only screen and (max-width: 767px){
	.mfg-case__row{ grid-template-columns:1fr; margin-bottom:26px; }
	.mfg-case__arrow{ margin:14px auto; transform:rotate(90deg); }
	@keyframes mfgArrowNudgeV{ 0%,100%{ transform:rotate(90deg) translateX(0); } 50%{ transform:rotate(90deg) translateX(5px); } }
	.mfg-case.is-in .mfg-case__arrow{ animation-name:mfgArrowNudgeV; }
	#content .mfg-case__row--sub .mfg-case__img{ aspect-ratio:3 / 2; }
	.mfg-case__caps{ grid-template-columns:1fr; }
	.mfg-case__caps > span{ display:none; }
	.mfg-case__caps .mfg-case__fig--after{ margin-top:18px; }

	/* 冒頭3行：スマホは枠で囲み、1文ずつ区切る（下線はPCのみ） */
	.mfg-case__catch{ border:2px solid var(--mfg-aka); padding:6px 16px; line-height:1.9; }
	.mfg-case__catch br{ display:none; }
	.mfg-case__catch .ln{ display:block; position:relative; padding:14px 0 14px 16px; background:none !important; }
	.mfg-case__catch .ln:not(:first-of-type){ border-top:1px solid var(--mfg-line); }
	.mfg-case__catch .ln::before{ content:""; position:absolute; left:0; top:26px; width:6px; height:6px; background:var(--mfg-aka); }
}
.mfg-case__img--after .mfg-case__tag{ background:var(--mfg-aka); }

/* 事例本文の前の写真3枚（.mfg-case__trio） */
.mfg-case__trio{ display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 44px; }
.mfg-case__trio .mfg-case__img{ aspect-ratio:3 / 2;
	opacity:0; transform:translateY(10px); transition:opacity .8s var(--mfg-ease), transform .8s var(--mfg-ease); }
.mfg-case.is-in .mfg-case__trio .mfg-case__img{ opacity:1; transform:none; }
.mfg-case.is-in .mfg-case__trio .mfg-case__img:nth-child(2){ transition-delay:.15s; }
.mfg-case.is-in .mfg-case__trio .mfg-case__img:nth-child(3){ transition-delay:.3s; }
#content .mfg-case__trio .mfg-case__img img{ width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: reduce){ .mfg-case__trio .mfg-case__img{ opacity:1; transform:none; transition:none; } }
@media only screen and (max-width: 767px){
	.mfg-case__trio{ gap:8px; margin-bottom:30px; }
	.mfg-case__trio .mfg-case__img{ aspect-ratio:3 / 2; }
}

/* ============================================================
   事例の結果（.mfg-result）シンプル版
   ============================================================ */
.mfg-result{ margin:10px 0 44px; padding:0; border-top:1px solid var(--mfg-ink); border-bottom:1px solid var(--mfg-line); color:var(--mfg-ink); }
.mfg-result__lbl{ display:inline-block; margin:0; padding:5px 14px; background:var(--mfg-aka); color:#fff;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase; }
.mfg-result__price{ display:grid; grid-template-columns:auto 60px auto 1fr; align-items:end; gap:0 10px; padding:30px 0 28px; border-bottom:1px solid var(--mfg-line); }
.mfg-result__p{ margin:0; }
.mfg-result__p .k{ display:block; margin-bottom:8px; font-size:11px; letter-spacing:.12em; color:var(--mfg-sub); }
.mfg-result__p .v{ font-size:30px; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums; }
.mfg-result__p .v small{ font-size:11px; margin-left:3px; letter-spacing:.06em; }
.mfg-result__p--before .v{ color:var(--mfg-sub); }
.mfg-result__p--after .k, .mfg-result__p--after .v{ color:var(--mfg-aka); }
.mfg-result__ar{ position:relative; align-self:end; justify-self:center; width:30px; height:30px; }
.mfg-result__ar i{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--mfg-ink);
	transform:scaleX(0); transform-origin:left center; transition:transform .8s var(--mfg-ease) .4s; }
.mfg-result__ar i::after{ content:""; position:absolute; right:0; top:-3.5px; width:7px; height:7px; border-top:1px solid var(--mfg-ink); border-right:1px solid var(--mfg-ink); transform:rotate(45deg); }
.mfg-case.is-in .mfg-result__ar i{ transform:scaleX(1); }
.mfg-result__x{ justify-self:end; margin:0; display:flex; align-items:baseline; gap:4px; color:var(--mfg-aka); font-size:14px; letter-spacing:.1em; }
.mfg-result__x b{ font-weight:normal; font-size:56px; line-height:.9; letter-spacing:0; font-variant-numeric:tabular-nums; }
.mfg-result__dl{ display:grid; grid-template-columns:64px 1fr; margin:0; padding:16px 0; gap:10px 0; font-size:13px; line-height:1.8; letter-spacing:.08em; }
.mfg-result__dl dt{ margin:0; font-size:11px; letter-spacing:.2em; color:var(--mfg-sub); line-height:2.1; }
.mfg-result__dl dd{ margin:0; }
.mfg-result__dl dd span{ white-space:nowrap; }
.mfg-result__dl dd span + span::before{ content:"／"; margin:0 .6em; color:var(--mfg-line); }
@media (prefers-reduced-motion: reduce){ .mfg-result__ar i{ transform:none; transition:none; } }
@media only screen and (max-width: 767px){
	.mfg-result__price{ grid-template-columns:auto 40px auto; gap:14px 6px; padding:22px 0; }
	.mfg-result__p .v{ font-size:22px; }
	.mfg-result__p .k{ font-size:10px; letter-spacing:.04em; }
	.mfg-result__ar{ width:24px; }
	.mfg-result__x{ grid-column:1 / -1; justify-self:start; margin-top:12px; padding-top:14px; border-top:1px dotted var(--mfg-line); width:100%; }
	.mfg-result__x b{ font-size:44px; }
	.mfg-result__dl{ grid-template-columns:48px 1fr; font-size:12px; letter-spacing:.04em; }
}

/* ============================================================
   詳しく読む バナー（.mfg-more）：子ページ・事例ページへ
   ============================================================ */
.mfg-point__more{ margin:36px 0 0; }
.mfg-point__more a.mfg-more{ position:relative; display:grid; grid-template-columns:1fr 52px; align-items:center; gap:4px 24px;
	padding:26px 28px 26px 32px; border:1px solid var(--mfg-ink); color:var(--mfg-ink); text-decoration:none; overflow:hidden; isolation:isolate; }
.mfg-more::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--mfg-aka);
	transform:scaleX(0); transform-origin:left center; transition:transform .55s var(--mfg-ease); }
.mfg-more::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--mfg-aka); }
.mfg-more__k{ grid-column:1; display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.24em; color:var(--mfg-aka); transition:color .4s; }
.mfg-more__k::after{ content:""; width:28px; height:1px; background:currentColor; }
.mfg-more__t{ grid-column:1; font-size:15px; line-height:1.7; letter-spacing:.1em; transition:color .4s; }
.mfg-more__ar{ grid-column:2; grid-row:1 / 3; position:relative; width:52px; height:52px; border:1px solid var(--mfg-ink); border-radius:50%; transition:border-color .4s, background .4s; }
.mfg-more__ar::before{ content:""; position:absolute; left:15px; right:15px; top:50%; height:1px; background:var(--mfg-ink); transition:background .4s, transform .4s var(--mfg-ease); }
.mfg-more__ar::after{ content:""; position:absolute; right:15px; top:50%; width:7px; height:7px; margin-top:-4px;
	border-top:1px solid var(--mfg-ink); border-right:1px solid var(--mfg-ink); transform:rotate(45deg); transition:border-color .4s; }
.mfg-point__more a.mfg-more:hover, .mfg-point__more a.mfg-more:focus-visible{ color:#fff; border-color:var(--mfg-aka); }
.mfg-more:hover::before, .mfg-more:focus-visible::before{ transform:scaleX(1); }
.mfg-more:hover .mfg-more__k, .mfg-more:hover .mfg-more__t{ color:#fff; }
.mfg-more:hover .mfg-more__ar{ border-color:#fff; background:#fff; }
.mfg-more:hover .mfg-more__ar::before{ background:var(--mfg-aka); }
.mfg-more:hover .mfg-more__ar::after{ border-color:var(--mfg-aka); }
.mfg-more .mfg-more__ar{ animation:mfgMoreNudge 2.6s var(--mfg-ease) infinite; }
@keyframes mfgMoreNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce){ .mfg-more .mfg-more__ar{ animation:none; } .mfg-more::before{ transition:none; } }
@media only screen and (max-width: 767px){
	.mfg-point__more a.mfg-more{ grid-template-columns:1fr 40px; gap:4px 14px; padding:20px 16px 20px 20px; }
	.mfg-more__t{ font-size:13px; letter-spacing:.06em; }
	.mfg-more__ar{ width:40px; height:40px; }
	.mfg-more__ar::before{ left:11px; right:11px; } .mfg-more__ar::after{ right:11px; }
	.mfg-more:active::before{ transform:scaleX(1); }
}