@charset "UTF-8";
/* 雇用クリーンプランナー 承認LP専用。既存テーマstyle.cssは上書きしない。
 * 前半：基本/各セクション。後半：承認済み改訂・改行・タッチ対応。
 * .chunk/.phrase とnative-caseの関係を維持してください。 */

:root {
	--ink:#273c42;
	--body:#41565c;
	--plum:#81364f;
	--action:#953f5b;
	--pale:#f7eff1;
	--paper:#fffdfa;
	--line:#d4c3c9;
	--cream:#f3f1ea;
	--white:#fff;
	--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
	--serif:"Hiragino Mincho ProN","Yu Mincho",serif
}
* {
	box-sizing:border-box
}
body {
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font:18px/1.9 var(--sans);
	-webkit-font-smoothing:antialiased
}
html {
	scroll-padding-top:108px
}
h1,h2,h3,h4,p,figure,dl,dd {
	margin:0
}
h1,h2,h3,h4 {
	line-height:1.5
}
ul,ol {
	margin:0;
	padding:0
}
img {
	display:block;
	max-width:100%;
	height:auto
}
button,input {
	font:inherit
}
button,a,summary {
	touch-action:manipulation
}
button,summary {
	cursor:pointer
}
a {
	color:inherit;
	text-decoration:none
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
	outline:3px solid var(--plum);
	outline-offset:4px
}
svg {
	width:24px;
	height:24px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.6;
	flex-shrink:0
}
.wrap {
	width:calc(100% - 40px);
	max-width:1160px;
	margin:auto
}
.chunk {
	display:inline-block
}
.review {
	font-size:12px;
	background:#eee8ea;
	text-align:center;
	padding:7px 16px;
	color:#5a454e
}
.header-shell {
	position:sticky;
	top:0;
	z-index:30;
	background:#fffdfaf5;
	backdrop-filter:blur(12px);
	border-bottom:1px solid var(--line)
}
.header {
	min-height:80px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px
}
.brand {
	font-weight:700;
	font-size:20px;
	line-height:1.6
}
.brand small {
	display:block;
	font-size:12px;
	font-weight:400
}
.nav {
	display:flex;
	gap:24px;
	align-items:center;
	font-size:15px
}
.nav>a {
	min-height:44px;
	display:flex;
	align-items:center
}
.button {
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	background:var(--action);
	color:#fff;
	border:1px solid var(--action);
	border-radius:4px;
	padding:17px 24px;
	min-height:64px;
	font-size:19px;
	font-weight:700;
	line-height:1.6;
	box-shadow:0 3px 0 #65243c;
	cursor:pointer
}
.button:hover {
	background:#743048
}
.nav .button {
	font-size:15px;
	min-height:48px;
	padding:10px 18px
}
.arrow {
	font-size:25px
}
.small {
	font-size:14px;
	color:var(--body);
	line-height:1.8
}
.hero {
	padding:40px 0 0;
	background:linear-gradient(120deg,#fffdfa,#f7eff1)
}
.hero-inner {
	display:grid;
	gap:32px
}
.identity {
	font-size:25px;
	font-weight:700;
	color:var(--plum);
	padding-left:16px;
	border-left:4px solid var(--plum);
	margin-bottom:24px;
	line-height:1.55
}
.hero h1 {
	font-size:36px;
	letter-spacing:.01em;
	line-height:1.5;
	font-weight:700
}
.hero h1 em {
	font-style:normal;
	color:var(--plum);
	position:relative;
	background:linear-gradient(transparent 84%,#e7c7d2 84%)
}
.hero-desc {
	margin-top:24px;
	font-size:18px;
	max-width:35em
}
.hero-desc strong {
	display:block;
	color:var(--plum);
	font-size:23px;
	margin-bottom:12px
}
.hero-action {
	margin-top:28px
}
.hero-action .button {
	width:100%;
	max-width:400px
}
.hero-action .small {
	margin-top:14px
}
.hero-photo {
	position:relative;
	align-self:center;
	border:1px solid var(--line);
	padding:10px;
	background:#fff;
	box-shadow:12px 12px 0 #ebdce1
}
.hero-photo img {
	width:100%;
	aspect-ratio:1.05;
	object-fit:cover;
	object-position:65% 42%
}
.hero-photo figcaption {
	padding:16px 12px 6px;
	font-size:20px;
	font-weight:700;
	line-height:1.6
}
.hero-photo small {
	display:block;
	font-size:12px;
	color:var(--body);
	font-weight:400;
	margin-top:6px
}
.hero-facts {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:14px;
	margin-top:36px;
	padding:24px 0;
	border-top:1px solid var(--line)
}
.hero-facts div {
	border-left:1px solid #bca7ae;
	padding-left:14px
}
.hero-facts dt {
	font-size:14px
}
.hero-facts dd {
	font-size:23px;
	font-weight:700;
	line-height:1.6
}
.hero-facts b {
	font-size:32px
}
.section {
	padding:64px 0
}
.eyebrow {
	font-size:19px;
	font-weight:700;
	color:var(--plum);
	margin-bottom:18px
}
.title {
	font-size:34px;
	letter-spacing:.015em;
	color:var(--plum);
	line-height:1.5
}
.title:after {
	content:'';
	display:block;
	width:64px;
	height:3px;
	background:var(--plum);
	margin-top:24px
}
.lead {
	font-size:21px;
	line-height:1.8;
	margin-top:24px;
	max-width:42em
}
.experience {
	background:#fff
}
.experience-grid {
	display:grid;
	gap:18px;
	margin-top:32px
}
.reason {
	border:1px solid var(--line);
	border-top:3px solid var(--plum);
	padding:24px;
	background:var(--paper)
}
.reason>span {
	font-size:15px;
	color:var(--plum);
	font-weight:700;
	display:block;
	margin-bottom:18px
}
.reason h3 {
	font-size:24px;
	margin-bottom:14px
}
.reason p {
	font-size:17px
}
.keyline {
	margin-top:32px;
	border-left:4px solid var(--plum);
	padding:20px 24px;
	background:var(--pale);
	font-size:23px;
	font-weight:700;
	line-height:1.7
}
.learn {
	background:var(--cream)
}
.case-grid {
	display:grid;
	gap:28px;
	margin-top:36px
}
.case-photo {
	background:white;
	padding:20px;
	border:1px solid var(--line)
}
.case-photo img {
	width:100%;
	height:auto
}
.case-photo figcaption {
	font-size:17px;
	margin-top:16px;
	font-weight:700
}
.image-open {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
	border:0;
	border-bottom:1px solid var(--line);
	padding:12px 0;
	background:transparent;
	font-size:16px;
	color:var(--plum);
	min-height:48px
}
.case-heading {
	font-size:25px;
	line-height:1.65;
	margin-bottom:20px
}
.case-heading span {
	color:var(--plum)
}
.case-tabs {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px
}
.case-tabs button {
	background:#fff;
	border:1px solid var(--plum);
	color:var(--plum);
	font-weight:700;
	font-size:18px;
	min-height:52px;
	padding:10px
}
.case-tabs button[aria-selected=true] {
	background:var(--plum);
	color:white
}
.case-panel {
	padding:24px;
	background:white;
	border:1px solid var(--line);
	margin-top:12px;
	min-height:182px
}
.case-panel[hidden] {
	display:none
}
.case-panel h4 {
	font-size:23px;
	color:var(--plum);
	margin-bottom:12px
}
.case-panel p {
	font-size:18px
}
.case-note {
	font-size:13px;
	margin-top:14px;
	color:var(--body)
}
.themes {
	display:grid;
	gap:12px;
	list-style:none;
	margin-top:32px
}
.themes li {
	padding:20px;
	background:white;
	border:1px solid var(--line)
}
.themes strong {
	font-size:23px;
	display:block;
	line-height:1.5
}
.themes span {
	font-size:17px;
	display:block;
	margin-top:8px
}
.method-grid {
	display:grid;
	gap:32px;
	margin-top:36px
}
.study-photo {
	position:relative;
	padding-bottom:46px
}
.study-photo img {
	width:100%;
	height:340px;
	object-fit:cover;
	object-position:center 45%
}
.study-photo figcaption {
	position:absolute;
	right:0;
	bottom:0;
	padding:18px 24px;
	background:var(--paper);
	border:4px double var(--plum);
	font-family:var(--serif);
	font-size:23px;
	line-height:1.55
}
.study-photo figcaption span {
	display:block
}
.study-photo figcaption strong {
	color:var(--plum)
}
.method-list {
	list-style:none;
	display:grid;
	gap:16px
}
.method-list li {
	display:grid;
	grid-template-columns:48px 1fr;
	gap:16px;
	border:1px solid var(--line);
	border-top:3px solid var(--plum);
	padding:24px
}
.method-list li>span {
	font-size:36px;
	color:var(--plum);
	font-weight:700;
	line-height:1.35
}
.method-list h3 {
	font-size:24px
}
.method-list p {
	margin-top:10px;
	font-size:17px
}
.lecture-band {
	display:grid;
	gap:24px;
	margin-top:32px;
	background:var(--cream);
	padding:24px
}
.lecture-band h3 {
	font-size:27px;
	margin:12px 0
}
.lecture-band .portrait-role {
	color:var(--plum);
	font-weight:700;
	font-size:18px
}
.lecture-band img {
	width:100%
}
.method-outcome {
	margin-top:28px;
	font-size:22px;
	font-weight:700;
	line-height:1.75
}
.mid-cta {
	margin-top:32px;
	display:flex;
	gap:24px;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	padding-top:24px;
	border-top:1px solid var(--line)
}
.mid-cta strong {
	font-size:22px
}
.qualification {
	background:var(--pale)
}
.course-grid {
	display:grid;
	gap:32px;
	margin-top:32px
}
.course-facts {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px
}
.course-facts>div {
	padding:24px 16px;
	background:white;
	border:1px solid var(--line)
}
.course-facts dt {
	font-size:16px
}
.course-facts dd {
	font-size:21px;
	font-weight:700;
	white-space:nowrap
}
.course-facts b {
	font-size:48px
}
.steps {
	list-style:none;
	display:grid;
	gap:12px;
	margin-top:20px
}
.steps li {
	background:white;
	border:1px solid var(--line);
	padding:18px 20px;
	display:flex;
	gap:20px;
	align-items:center
}
.steps span {
	font-size:32px;
	line-height:1.3;
	color:var(--plum)
}
.steps strong {
	font-size:21px
}
.cert {
	text-align:center
}
.cert img {
	width:220px;
	margin:0 auto 20px
}
.cert h3 {
	font-size:24px
}
.cert p {
	margin-top:14px
}
.cert .small {
	margin-top:14px
}
.press {
	margin-top:36px;
	border:1px solid #cbb56d;
	border-top:5px solid #ad8b2b;
	background:#fffaf0;
	padding:24px;
	display:grid;
	gap:24px;
	align-items:center
}
.press h3 {
	font-size:29px;
	color:#725619
}
.press p {
	margin-top:16px
}
.press img {
	width:100%;
	max-width:455px;
	margin:auto
}
.law {
	margin-top:24px;
	font-size:16px
}
.law summary {
	padding:12px 0;
	min-height:48px;
	font-weight:700
}
.law p {
	margin-top:12px
}
.law a {
	text-decoration:underline;
	display:inline-block;
	padding:12px 0
}
.gifts-grid {
	display:grid;
	gap:24px;
	margin-top:32px
}
.gift {
	border:1px solid var(--line);
	padding:24px;
	background:var(--pale)
}
.gift-top {
	display:flex;
	gap:12px;
	justify-content:space-between;
	align-items:center;
	font-weight:700;
	color:var(--plum);
	font-size:21px
}
.gift-top small {
	font-size:14px;
	background:#fff;
	padding:6px 10px;
	color:var(--ink);
	font-weight:400
}
.gift-picture {
	margin-top:20px;
	background:#eee9e1;
	padding:20px;
	height:300px;
	display:flex;
	align-items:center;
	justify-content:center
}
.gift-picture img {
	width:100%;
	height:100%;
	object-fit:contain;
	filter:drop-shadow(0 5px 7px #0002)
}
.gift h3 {
	font-size:24px;
	margin-top:24px;
	line-height:1.6
}
.gift p {
	font-size:17px;
	margin-top:16px
}
.gift-action {
	margin-top:28px;
	display:flex;
	gap:24px;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap
}
.faq {
	margin-top:56px
}
.faq h3 {
	font-size:29px;
	color:var(--plum);
	margin-bottom:24px
}
.faq details {
	border-top:1px solid var(--line)
}
.faq summary {
	font-weight:700;
	min-height:60px;
	padding:18px 0;
	font-size:19px
}
.faq details p {
	padding-bottom:24px;
	font-size:17px
}
.request {
	background:var(--cream)
}
.request-grid {
	display:grid;
	gap:32px
}
.request-intro .lead {
	margin-bottom:24px
}
.request-points {
	list-style:none;
	display:grid;
	gap:12px;
	margin-top:24px
}
.request-points li {
	padding:16px 20px;
	border:1px solid var(--line);
	background:white;
	font-size:18px
}
.request-points li:before {
	content:'✓';
	color:var(--plum);
	margin-right:12px;
	font-weight:700
}
.form-panel {
	background:white;
	border:1px solid var(--line);
	padding:24px
}
.form-preview,.nojs {
	font-size:13px;
	padding:12px;
	background:var(--pale);
	line-height:1.8;
	margin-bottom:24px
}
.fields {
	display:grid;
	gap:20px
}
.field label {
	display:block;
	font-size:17px;
	font-weight:700;
	margin-bottom:8px
}
.required {
	font-size:12px;
	font-weight:400;
	color:var(--plum);
	border:1px solid var(--plum);
	padding:2px 6px;
	margin-left:8px
}
.field input {
	width:100%;
	border:1px solid #829297;
	border-radius:3px;
	min-height:52px;
	padding:12px;
	font-size:16px
}
.privacy {
	font-size:14px;
	margin-top:24px
}
.privacy summary {
	padding:12px 0;
	min-height:44px
}
.privacy p {
	margin-top:12px
}
.consent {
	display:flex;
	gap:12px;
	align-items:start;
	font-size:15px;
	margin:20px 0
}
.consent input {
	min-width:20px;
	min-height:20px;
	margin-top:5px
}
.submit-area .button {
	width:100%;
	font-size:18px
}
.submit-area .small {
	margin-top:16px
}
.footer {
	padding:36px 0;
	font-size:14px
}
.footer p {
	margin-top:12px
}
.footer a {
	display:inline-block;
	text-decoration:underline;
	min-height:44px;
	padding:10px 0;
	margin-right:24px
}
.dialog,.material-dialog {
	width:calc(100% - 32px);
	max-width:740px;
	border:1px solid var(--line);
	padding:24px;
	background:var(--paper);
	color:var(--ink);
	max-height:85vh;
	overflow:auto
}
.dialog::backdrop,.material-dialog::backdrop {
	background:#1d293bb3
}
.dialog h2,.material-dialog h2 {
	font-size:26px
}
.dialog>p {
	font-size:16px;
	margin:16px 0
}
.dialog dl {
	margin-bottom:24px
}
.dialog dl>div {
	padding:12px 0;
	border-bottom:1px solid var(--line);
	overflow-wrap:anywhere
}
.dialog dt {
	font-size:15px;
	font-weight:700
}
.dialog dd {
	font-size:17px
}
.dialog .button {
	margin:8px 8px 8px 0
}
.dialog .clear {
	background:white;
	color:var(--plum)
}
.material-dialog-head {
	display:flex;
	gap:20px;
	justify-content:space-between;
	align-items:center;
	margin-bottom:16px
}
.material-dialog-head button {
	padding:10px;
	border:1px solid var(--line);
	background:white;
	color:var(--ink);
	min-height:44px;
	white-space:nowrap
}
.material-scroll {
	overflow:auto
}
.material-scroll img {
	width:100%;
	min-width:640px;
	max-width:none
}
.sticky {
	display:none
}
.button[disabled] {
	opacity:.65
}

@media(min-width:900px) {
	.wrap {
		width:calc(100% - 96px)
	}
	.section {
		padding:76px 0
	}
	.hero {
		padding-top:48px
	}
	.hero-inner {
		grid-template-columns:1.05fr 1fr;
		gap:48px;
		align-items:center
	}
	.hero h1 {
		font-size:46px
	}
	.identity {
		font-size:28px
	}
	.hero-desc {
		font-size:19px
	}
	.hero-photo img {
		aspect-ratio:.94
	}
	.hero-facts {
		gap:32px;
		margin-top:48px
	}
	.hero-facts dd {
		font-size:26px
	}
	.title {
		font-size:42px
	}
	.lead {
		font-size:23px
	}
	.experience-grid,.themes {
		grid-template-columns:repeat(3,1fr)
	}
	.reason {
		padding:28px 24px
	}
	.case-grid {
		grid-template-columns:1fr 1fr;
		gap:36px;
		align-items:center
	}
	.method-grid {
		grid-template-columns:1fr 1.15fr;
		gap:40px;
		align-items:center
	}
	.study-photo img {
		height:470px
	}
	.study-photo figcaption {
		font-size:25px
	}
	.lecture-band {
		grid-template-columns:1.15fr 1fr;
		align-items:center;
		padding:32px;
		gap:36px
	}
	.course-grid {
		grid-template-columns:1.15fr 1fr;
		gap:56px;
		align-items:center
	}
	.course-facts b {
		font-size:56px
	}
	.press {
		grid-template-columns:1fr 1fr;
		gap:40px;
		padding:32px
	}
	.gifts-grid {
		grid-template-columns:1fr 1fr
	}
	.gift {
		padding:28px
	}
	.gift-picture {
		height:330px
	}
	.gift h3 {
		min-height:78px
	}
	.request-grid {
		grid-template-columns:1fr 1.12fr;
		gap:48px
	}
	.fields {
		grid-template-columns:1fr 1fr
	}
	.field.full {
		grid-column:1/-1
	}
	.form-panel {
		padding:28px
	}
	.request-intro {
		align-self:start;
		position:sticky;
		top:110px
	}
	
}

@media(min-width:1200px) {
	.hero h1 {
		font-size:49px
	}
	.identity {
		font-size:30px
	}
	
}

@media(max-width:899px) {
	.nav>a:not(.button) {
		display:none
	}
	.header {
		min-height:76px;
		gap:16px
	}
	.brand {
		font-size:17px
	}
	.brand small {
		font-size:11px
	}
	.nav .button {
		font-size:14px;
		padding:10px 12px;
		gap:12px
	}
	.hero-photo {
		margin-right:12px
	}
	.hero-photo img {
		aspect-ratio:1.45;
		object-position:center 42%
	}
	.case-photo {
		order:-1
	}
	.request-intro {
		position:static
	}
	
}

@media(max-width:599px) {
	.brand {
		font-size:15px
	}
	.brand small {
		display:none
	}
	.nav .button {
		font-size:13px;
		gap:8px;
		padding:10px
	}
	.header {
		gap:10px
	}
	.identity {
		font-size:24px
	}
	.hero {
		padding-top:28px
	}
	.hero h1 {
		font-size:34px
	}
	.hero-desc strong {
		font-size:22px
	}
	.hero-facts {
		gap:10px
	}
	.hero-facts div {
		padding-left:10px
	}
	.hero-facts dt {
		font-size:12px
	}
	.hero-facts dd {
		font-size:19px
	}
	.hero-facts b {
		font-size:27px
	}
	.title {
		font-size:31px
	}
	.lead {
		font-size:20px
	}
	.course-facts b {
		font-size:45px
	}
	.course-facts dd {
		font-size:18px
	}
	.gift-picture {
		height:280px
	}
	.gift h3 {
		font-size:23px
	}
	.keyline {
		font-size:21px
	}
	.method-list li {
		padding:22px 18px;
		grid-template-columns:40px 1fr;
		gap:14px
	}
	.method-list h3 {
		font-size:22px
	}
	.form-panel {
		padding:20px
	}
	.material-dialog-head h2 {
		font-size:22px
	}
	
}

@media(max-width:359px) {
	.brand {
		font-size:13px
	}
	.nav .button {
		font-size:12px;
		gap:6px
	}
	.identity {
		font-size:22px
	}
	.hero h1 {
		font-size:30px
	}
	.title {
		font-size:28px
	}
	.button {
		font-size:17px;
		padding:16px 18px
	}
	.hero-facts {
		gap:8px
	}
	.hero-facts dd {
		font-size:17px
	}
	.hero-facts b {
		font-size:23px
	}
	.reason h3 {
		font-size:22px
	}
	.case-tabs button {
		font-size:17px
	}
	.case-panel {
		padding:20px
	}
	.course-facts>div {
		padding:18px 10px
	}
	.course-facts b {
		font-size:40px
	}
	.course-facts dt {
		font-size:14px
	}
	.steps strong {
		font-size:19px
	}
	.gift {
		padding:20px
	}
	.gift-top {
		font-size:20px
	}
	.study-photo figcaption {
		font-size:21px
	}
	
}

@media(max-width:899px) {
	.hero-copy {
		display:contents
	}
	.hero-inner {
		gap:24px
	}
	.hero .identity {
		order:0;
		margin-bottom:0
	}
	.hero h1 {
		order:1
	}
	.hero-photo {
		order:2
	}
	.hero-desc {
		order:3;
		margin-top:0
	}
	.hero-action {
		order:4;
		margin-top:0
	}
	
}


/* 学ぶ理由の3項目にも写真を配置し、冒頭からの文字の連続を解消 */
.reason {
	padding:0;
	overflow:hidden
}
.reason-photo {
	margin:0 0 24px;
	background:var(--cream)
}
.reason-photo img {
	width:100%;
	height:auto;
	aspect-ratio:3/2;
	object-fit:cover;
	object-position:center top
}
.reason-photo.listen img {
	object-position:50% 25%
}
.reason>span,.reason>h3,.reason>p {
	margin-left:24px;
	margin-right:24px
}
.reason>p {
	margin-bottom:24px
}
.reason-image-note {
	font-size:13px;
	color:var(--body);
	margin-top:12px
}

@media(max-width:899px) {
	.reason-photo img {
		aspect-ratio:1.65;
		max-height:340px
	}
	.reason-photo.listen img {
		object-position:50% 25%
	}
	
}

.hero-photo img {
	object-position:50% 40%
}
@media(max-width:899px) {
	.hero-photo img {
		object-position:50% 40%
	}
	
}

.social {
	background:#f2f4f0;
	border-top:1px solid #d9ded7;
	border-bottom:1px solid #d9ded7
}
.policy-timeline {
	list-style:none;
	display:grid;
	gap:16px;
	margin-top:32px
}
.policy-timeline li {
	border:1px solid var(--line);
	border-top:3px solid #a2949a;
	background:#fff;
	padding:24px
}
.policy-timeline .policy-next {
	border:2px solid var(--plum);
	border-top-width:5px;
	background:var(--pale);
	padding-top:22px
}
.policy-year {
	font-size:42px;
	font-weight:700;
	color:var(--plum);
	line-height:1.3;
	display:block;
	margin-bottom:20px
}
.policy-year small {
	font-size:19px;
	margin-left:6px
}
.policy-timeline h3 {
	font-size:23px;
	line-height:1.6
}
.policy-timeline p {
	margin-top:16px;
	font-size:16px;
	color:var(--body)
}
.policy-source {
	font-size:14px;
	color:var(--body);
	margin-top:16px;
	line-height:1.9
}
.policy-source a {
	display:inline-block;
	text-decoration:underline;
	text-underline-offset:4px;
	min-height:44px;
	padding:8px 0
}
.social-purpose {
	display:grid;
	gap:28px;
	margin-top:36px;
	align-items:center
}
.social-purpose figure {
	background:#fff
}
.social-purpose img {
	width:100%;
	height:auto
}
.social-purpose figcaption {
	border-left:4px solid var(--plum);
	padding:18px 22px;
	font-weight:700;
	font-size:23px;
	line-height:1.6
}
.social-purpose figcaption small {
	display:block;
	font-size:12px;
	color:var(--body);
	font-weight:400;
	margin-top:8px
}
.social-purpose h3 {
	font-size:29px;
	line-height:1.65;
	color:var(--plum)
}
.social-purpose p {
	margin-top:20px;
	font-size:18px
}
.social-roles {
	list-style:none;
	display:grid;
	gap:10px;
	margin-top:24px
}
.social-roles li {
	border:1px solid var(--line);
	background:#fff;
	padding:12px 18px;
	font-weight:700;
	font-size:19px
}
.social-roles li:before {
	content:'✓';
	margin-right:12px;
	color:var(--plum)
}
.social-bridge {
	font-size:23px;
	line-height:1.8;
	margin:32px 0 18px;
	padding-top:24px;
	border-top:1px solid var(--line)
}
.social-bridge strong {
	color:var(--plum)
}
.career-paths {
	display:grid;
	gap:16px;
	margin-top:32px
}
.career-paths article {
	padding:24px;
	border:1px solid var(--line);
	border-top:3px solid var(--plum);
	background:#fff
}
.career-paths span {
	display:block;
	color:var(--plum);
	font-size:16px;
	font-weight:700;
	margin-bottom:12px
}
.career-paths h3 {
	font-size:23px
}
.career-paths p {
	font-size:17px;
	margin-top:14px
}

@media(min-width:900px) {
	.policy-timeline,.career-paths {
		grid-template-columns:repeat(3,1fr)
	}
	.social-purpose {
		grid-template-columns:1fr 1fr;
		gap:40px
	}
	.social-purpose h3 {
		font-size:30px
	}
	.social-purpose img {
		aspect-ratio:1.2;
		object-fit:cover;
		object-position:center top
	}
	
}

@media(max-width:359px) {
	.policy-timeline h3,.career-paths h3 {
		font-size:21px
	}
	.social-purpose h3 {
		font-size:25px
	}
	.social-bridge {
		font-size:21px
	}
	
}


/* 社会的背景と活用場面を図解する */
.policy-caption {
	margin-top:36px;
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap
}
.policy-caption>span {
	background:var(--plum);
	color:white;
	padding:7px 15px;
	font-size:17px;
	font-weight:700
}
.policy-caption strong {
	font-size:23px
}
.policy-timeline {
	gap:28px;
	margin-top:24px
}
.policy-timeline li {
	position:relative;
	padding:24px;
	display:flex;
	flex-direction:column
}
.policy-timeline .policy-next {
	padding-top:22px
}
.policy-visual {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	border-bottom:1px solid var(--line);
	padding-bottom:16px;
	margin-bottom:20px
}
.scene-icon {
	width:120px;
	height:80px;
	flex-shrink:0;
	color:var(--plum)
}
.policy-phase {
	font-size:17px;
	font-weight:700;
	color:var(--plum);
	line-height:1.6
}
.policy-timeline li:not(:last-child):after {
	content:'↓';
	position:absolute;
	bottom:-31px;
	left:calc(50% - 14px);
	background:#f2f4f0;
	color:var(--plum);
	font-size:25px;
	font-weight:700;
	width:28px;
	text-align:center;
	z-index:1;
	line-height:30px
}
.policy-year {
	font-size:46px;
	margin-bottom:14px
}
.policy-timeline h3 {
	font-size:23px
}
.policy-timeline li>p {
	margin-top:auto;
	padding-top:16px
}
.social-purpose {
	align-items:start
}
.social-purpose h3 {
	margin-top:0
}
.social-roles {
	gap:12px
}
.social-roles article {
	display:flex;
	gap:16px;
	align-items:center;
	padding:18px 20px;
	background:white;
	border:1px solid var(--line);
	border-left:4px solid var(--plum)
}
.social-roles .scene-icon {
	width:72px;
	height:60px
}
.role-number {
	font-size:17px;
	font-weight:700;
	color:var(--plum);
	letter-spacing:.08em
}
.social-roles h4 {
	font-size:23px;
	line-height:1.5
}
.social-roles article p {
	font-size:16px;
	margin-top:6px;
	line-height:1.7
}
.social-bridge {
	padding:24px;
	background:white;
	border:3px double var(--plum);
	text-align:center;
	position:relative
}
.bridge-label {
	display:block;
	font-size:18px;
	font-weight:700;
	color:var(--plum);
	margin-bottom:12px
}
.career-paths article {
	padding:0 24px 24px;
	overflow:hidden
}
.career-visual {
	position:relative;
	margin:0 -24px 24px;
	padding:24px;
	background:#fbf4f6;
	display:flex;
	align-items:center;
	justify-content:center;
	border-bottom:1px solid var(--line)
}
.career-visual .scene-icon {
	width:180px;
	height:112px
}
.career-visual b {
	position:absolute;
	top:16px;
	left:24px;
	font-size:30px;
	font-weight:500;
	color:var(--plum)
}
.career-paths article:nth-child(2) .career-visual {
	background:#f0f5f2
}
.career-paths article:nth-child(3) .career-visual {
	background:#fdf7ed
}
.career-paths h3 {
	line-height:1.6
}
.career-paths p {
	line-height:1.9
}

@media(min-width:900px) {
	.policy-timeline li:not(:last-child):after {
		content:'→';
		bottom:auto;
		top:50%;
		left:auto;
		right:-30px
	}
	.policy-visual {
		min-height:108px
	}
	.policy-timeline h3 {
		min-height:111px
	}
	.career-paths h3 {
		min-height:74px
	}
	.social-purpose {
		grid-template-columns:1fr 1fr
	}
	.social-purpose figure {
		position:relative
	}
	.social-purpose img {
		aspect-ratio:1.2;
		object-position:center
	}
	.social-purpose figcaption {
		font-size:26px
	}
	
}

@media(min-width:1200px) {
	.policy-timeline h3 {
		min-height:74px
	}
	.career-paths h3 {
		min-height:37px
	}
	
}

@media(max-width:599px) {
	.policy-caption strong {
		font-size:21px
	}
	.policy-visual {
		justify-content:flex-start;
		gap:16px
	}
	.policy-visual .scene-icon {
		width:80px;
		height:64px
	}
	.social-roles article {
		padding:16px 12px;
		gap:12px
	}
	.social-roles .scene-icon {
		width:58px
	}
	.social-roles h4 {
		font-size:22px
	}
	.social-bridge {
		padding:22px 16px;
		text-align:left
	}
	.social-bridge br {
		display:none
	}
	.social-bridge strong {
		display:block
	}
	.career-visual .scene-icon {
		height:124px;
		width:190px
	}
	
}

@media(min-width:900px) and (max-width:1199px) {
	.policy-visual .scene-icon {
		width:64px;
		height:64px
	}
	.policy-visual {
		gap:8px
	}
	
}

/* Keep meaningful Japanese phrases together without reducing text size. */
.phrase {
	display:inline-block;
	white-space:nowrap;
	vertical-align:baseline
}

.keyline,.social-bridge,.social>.wrap>.eyebrow,.press h3 {
	word-break:normal;
	overflow-wrap:normal
}

@media(max-width:599px) {
	.social-bridge .bridge-label {
		margin-bottom:18px
	}
	.social-bridge>strong {
		margin-top:12px
	}
	.press h3 .phrase {
		display:block
	}
	
}


.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
	border:0
}

.native-case {
	border:0;
	padding:0;
	margin:0;
	min-width:0;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;
	position:relative
}

.case-choice {
	position:absolute;
	opacity:0;
	width:1px;
	height:1px;
	pointer-events:none
}

.case-choice-label {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:56px;
	padding:10px 8px;
	border:1px solid var(--plum);
	background:#fff;
	color:var(--plum);
	font-size:20px;
	font-weight:700;
	cursor:pointer;
	touch-action:manipulation
}

.case-choice:checked+.case-choice-label {
	background:var(--plum);
	color:#fff
}
.case-choice:focus-visible+.case-choice-label {
	outline:3px solid #1e667b;
	outline-offset:3px
}

.native-case .case-panel {
	display:none;
	grid-column:1/-1;
	margin-top:2px;
	min-width:0
}

#choice-words:checked~#panel-words,#choice-situation:checked~#panel-situation,#choice-context:checked~#panel-context {
	display:block
}

.material-expand {
	margin-top:12px;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	min-width:0;
	width:100%
}

.material-expand summary {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	list-style:none;
	cursor:pointer;
	min-height:56px;
	padding:14px 0;
	font-size:17px;
	color:var(--plum);
	touch-action:manipulation
}

.material-expand summary::-webkit-details-marker {
	display:none
}
.expand-mark:before {
	content:'＋';
	font-size:22px
}
.material-expand[open] .expand-mark:before {
	content:'−'
}

.material-expand>.small {
	padding:4px 0 12px
}
.material-native-scroll {
	max-width:100%;
	width:100%;
	overflow-x:auto;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	background:#fff;
	border:1px solid var(--line);
	margin-bottom:16px;
	touch-action:pan-x pan-y
}

.material-native-scroll img {
	display:block;
	width:900px!important;
	max-width:none!important;
	height:auto!important;
	min-width:900px;
	object-fit:contain!important;
	aspect-ratio:auto!important
}

.case-grid>*,.lecture-band>*,.lecture-band figure {
	min-width:0
}