@charset "utf-8";

.p-pagetitle {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	height: 320px;
	padding-top: 48px;
	background: linear-gradient(to right, #f6aad4, #b5e1f3);
}
.p-pagetitle .title,
.p-pagetitle .title_s {
	display: flex;
	align-items: center;
	z-index: 1;
	position: relative;
}
.p-pagetitle .title .main {
	position: relative;
	padding: 0 .7em .1em;
	border-left: 4px solid #c69ab2;
	border-right: 4px solid #b1ccd7;
	font-size: 36px;
	font-weight: 700;
}
.p-pagetitle .title .main .to {
	font-size: 80%;
}
.p-pagetitle .title .main::before,
.p-pagetitle .title .main::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #c69ab2, #b1ccd7);
}
.p-pagetitle .title .main::before {
	top: 0;
}
.p-pagetitle .title .main::after {
	bottom: 0;
}
.p-pagetitle .title .sub {
	margin: .1em 0 0 .5em;
	padding-bottom: .1em;
	font-size: 30px;
	font-weight: 400;
}
.p-pagetitle .bg {
	position: absolute;
	right: 0;
	top: calc(50% - 160px);
	opacity: .4;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.p-pagetitle .bg img {
	width: auto;
	height: 400px;
}
.p-pagetitle .title_s {
	flex-direction: column;
	line-height: 1.5;
}
.p-pagetitle .title_s .main {
	font-size: 30px;
	font-weight: 700;
}
.p-pagetitle .title_s .sub {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .3em;
}
@media print, (min-width: 1400px) {
	.p-pagetitle .bg {
		right: calc(50% - 700px);
	}
}
@media print {
	.p-pagetitle {
		height: 6cm;
		padding-top: 1cm;
	}
	.p-pagetitle .title .main {
		font-size: calc(36px / 1.5);
	}
	.p-pagetitle .title .sub,
	.p-pagetitle .title_s .main {
		font-size: calc(30px / 1.5);
	}
	.p-pagetitle .title_s .sub {
		font-size: calc(14px / 1.5);
	}
}
@media screen and (max-width: 767px) {
	.p-pagetitle .title {
		flex-direction: column;
	}
}
@media screen and (max-width: 479px) {
	.p-pagetitle {
		height: 280px;
	}
	.p-pagetitle .title .main {
		font-size: 30px;
	}
	.p-pagetitle .title .sub {
		font-size: 20px;
	}
}

.p-intro {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 214px;
	padding: 24px;
	font-size: 15px;
	background: white;
}
.p-intro p {
	max-width: 860px;
}
@media print, (min-width: 768px) {
	.p-intro {
		text-align: center;
	}
}
@media print {
	.p-intro {
		height: 4cm;
		font-size: calc(15px / 1.5);
	}
}
@media screen and (max-width: 767px) {
	.p-intro {
		font-size: 14px;
	}
}

.p-tableofcontents {
	display: flex;
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 72px 24px 96px;
}
@media print {
	.p-tableofcontents {
		padding: 1cm 24px;
		break-inside: avoid;
		page-break-inside: avoid;
	}
}
.p-tableofcontents::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	background: #f3f3f3;
}
.hasScrollbar .p-tableofcontents::before {
	right: calc(50% - 50vw + var(--scroll-bar-width) / 2);
	left: calc(50% - 50vw + var(--scroll-bar-width) / 2);
}
@media screen and (max-width: 767px) {
	.p-tableofcontents {
		flex-direction: column;
	}
}
.p-tableofcontents .column {
	flex-grow: 1;
	flex-basis: 33.333%;
	display: flex;
	flex-direction: column;
}
.p-tableofcontents.-digital .column {
	flex-basis: 50%;
}
.p-tableofcontents .toc_head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 152px;
	padding: 24px;
	color: white;
	background: #ff8989;
}
.p-tableofcontents.-space .toc_head { background: #ff8989; }
.p-tableofcontents.-space .-c2 .toc_head { background: #f05e5e; }
.p-tableofcontents.-digital .toc_head { background: #7cb9f3; }
.p-tableofcontents.-digital .-c2 .toc_head { background: #4b97df; }
.p-tableofcontents.-earth .toc_head { background: #66c258; }
.p-tableofcontents.-earth .-c2 .toc_head { background: #25ae16; }
.p-tableofcontents .toc_head .main {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
}
.p-tableofcontents .toc_head .sub {
	margin-top: 1em;
	font-size: 11px;
	line-height: 1.5;
}
@media screen and (-ms-high-contrast: none) {
	.p-tableofcontents .toc_head .sub {
		max-width: 100%;
	}
}
.p-tableofcontents .toc_list {
	flex-grow: 1;
	padding: 48px 24px;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
}
.p-tableofcontents .toc_list li + li {
	margin-top: 16px;
}
.p-tableofcontents .toc_list_list {
	padding-left: 28px;
	font-size: 11px;
	font-weight: 400;
}
.p-tableofcontents .toc_list_list li {
	padding-left: .5em;
	text-indent: -.5em;
}
.p-tableofcontents .toc_list_list li + li {
	margin: 0;
}
.p-tableofcontents .toc_list_list li::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -.1em;
	width: .2em;
	height: .2em;
	border-radius: .2em;
	background: currentcolor;
	margin-right: .3em;
	vertical-align: middle;
}
.p-tableofcontents.-digital .toc_list {
	padding: 48px 40px;
}
.p-tableofcontents.-space .toc_list { background: #fcc; }
.p-tableofcontents.-space .-c2 .toc_list { background: #ffebeb; }
.p-tableofcontents.-digital .toc_list { background: #c1d9ef; }
.p-tableofcontents.-digital .-c2 .toc_list { background: #dfefff; }
.p-tableofcontents.-earth .toc_list { background: #c5e2c0; }
.p-tableofcontents.-earth .-c2 .toc_list { background: #d9ecd5; }
@media (hover: hover) {
	.p-tableofcontents.-space .toc_list a:hover { color: #f05e5e; }
	.p-tableofcontents.-digital .toc_list a:hover { color: #4b97df; }
	.p-tableofcontents.-earth .toc_list a:hover { color: #25ae16; }
}
@media print {
	.p-tableofcontents .toc_head .main {
		font-size: calc(20px / 1.5);
	}
	.p-tableofcontents .toc_head .sub {
		font-size: calc(11px / 1.5);
	}
	.p-tableofcontents .toc_list {
		font-size: calc(13px / 1.5);
	}
}
@media screen and (max-width: 479px) {
	.p-tableofcontents.-digital .toc_list {
		padding: 48px 24px;
	}
}

.p-relation {
	max-width: 800px;
	margin: 0 auto;
	padding: 104px 20px 168px;
	text-align: center;
}
.p-relation .title {
	font-size: 24px;
}
.relation_list {
	margin-top: 32px;
}
.relation_list .image {
	max-width: 320px;
	margin: 0 auto;
}
.relation_list .text {
	margin-top: 24px;
	text-align: left;
}
.relation_list .text dt {
	justify-content: center;
}
.relation_list .text dd {
	margin-top: 16px;
	font-size: 13px;
	text-align: left;
}
.relation_list .c-button {
	margin-top: 24px;
}
@media print, (min-width: 768px) {
	.relation_list {
		display: flex;
		justify-content: space-between;
	}
	.relation_list li {
		flex-basis: calc(50% - 40px);
	}
}
@media print {
	.p-relation {
		max-width: 16cm;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.p-relation .title {
		font-size: calc(24px / 1.5);
	}
	.relation_list .text dd {
		font-size: calc(13px / 1.5);
	}
}
@media screen and (max-width: 767px) {
	.p-relation {
		padding: 56px 20px 80px;
	}
	.relation_list li + li {
		margin-top: 48px;
	}
}
@media screen and (max-width: 479px) {
	.p-relation .title {
		font-size: 20px;
	}
}

/**
 * 技術マップ
 * ---------------------------------------- */
.page-techmap {
	padding-bottom: 160px;
}
.techmap_section {
	max-width: 1000px;
	margin: 104px auto 0;
	padding: 0 24px;
}
.techmap_title {
	padding-bottom: 40px;
	border-bottom: 1px solid #cacaca;
}
.techmap_title .main {
	font-size: 26px;
}
.techmap_title .main .to {
	font-size: 80%;
}
.techmap_title .sub {
	font-size: 21px;
}
.techmap_toc {
	margin-top: 40px;
}
.techmap_toc .title {
	font-size: 24px;
	font-weight: 600;
}
.techmap_toc .list {
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
}
.techmap_toc .list li {
	flex-basis: calc(50% - 16px);
	margin-top: 16px;
}
@media print, (min-width: 480px) {
	.techmap_toc .list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
}
@media print {
	.techmap_title .main {
		font-size: calc(26px / 1.5);
	}
	.techmap_title .sub {
		font-size: calc(21px / 1.5);
	}
	.techmap_toc .title {
		font-size: calc(24px / 1.5);
	}
	.techmap_toc .list {
		font-size: calc(13px / 1.5);
	}
}
@media screen and (max-width: 767px) {
	.page-techmap {
		padding-bottom: 64px;
	}
	.techmap_section {
		margin-top: 64px;
	}
	.techmap_title {
		justify-content: center;
		padding-bottom: 32px;
	}
	.techmap_title .sub {
		max-width: 9em;
	}
	.techmap_toc {
		margin-top: 32px;
	}
}
@media screen and (max-width: 479px) {
	.techmap_title .main {
		font-size: 21px;
	}
	.techmap_title .sub {
		font-size: 15px;
	}
	.techmap_toc .title {
		font-size: 20px;
	}
}

/**
 * 詳細ページ
 * ---------------------------------------- */
.page-article {
	text-align: center;
}
.article_footer,
.page-article > .c-button {
	margin-top: 64px;
}
.article_footer {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.article_footer .c-button:nth-child(n+2) {
	margin-top: 40px;
}
@media screen and (max-width: 767px) {
	.page-article > .c-button {
		margin-top: 48px;
	}
}

.js-insertContents.is-standby .image {
	opacity: 0;
}
.js-insertContents.is-anim .image {
	transition: opacity .3s;
}

.p-articletitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 160px 20px 0;
}
.p-articletitle::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 540px;
	background: linear-gradient(to right, #f6aad4, #b5e1f3);
}
.p-articletitle .title {
	font-size: 36px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: .1em;
}
.p-articletitle .image {
	margin-top: 32px;
	max-width: 1000px;
	background: white;
}
.p-articletitle .image video {
	height: auto;
}
@media print {
	.p-articletitle .title {
		font-size: calc(36px / 1.5);
	}
}
@media screen and (max-width: 767px) {
	.p-articletitle::before {
		height: calc(540vw / 7.68);
	}
}
@media screen and (max-width: 479px) {
	.p-articletitle {
		padding-top: 80px;
	}
	.p-articletitle .title {
		font-size: 24px;
	}
}

/* :::::: レイアウト :::::: */
.article_contents {
	max-width: 1040px;
	margin: 64px auto 0;
	padding: 0 20px;
}
.article_contents .article_main {
	text-align: left;
}
.article_contents .c-note {
	display: inline-block;
	font-size: 12px;
}
@media print, (min-width: 768px) {
	.article_contents {
		display: grid;
		grid-template: auto / 1fr 300px;
	}
	.article_contents .article_main {
		grid-area: 1 / 1 / 2 / 2;
		margin-right: 64px;
		text-align: left;
	}
	.article_contents .article_side {
		grid-area: 1 / 2 / 2 / 3;
	}
	.article_contents .article_solution {
		grid-area: 2 / 1 / 3 / 3;
	}
}
@media print {
	.article_contents .c-note {
		font-size: calc(12px / 1.5);
	}
}
@media print, (min-width: 768px) and (-ms-high-contrast: none) {
	.article_contents {
		display: -ms-grid;
		-ms-grid-columns: 1fr 300px;
	}
	.article_contents .article_main {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
	.article_contents .article_side {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
	}
	.article_contents .article_solution {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
	}
}
@media screen and (max-width: 767px) {
	.article_contents {
		margin-top: 24px;
	}
	.article_contents .article_side {
		max-width: 360px;
		margin: 24px auto 0;
	}
}

/* :::::: 記事メイン :::::: */
.article_head {
	display: flex;
	align-items: center;
}
.article_head + .article_head {
	margin-top: 1em;
}
.article_head .category,
.article_head .label {
	margin: 0;
}
.article_head .category {
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
}
.article_head .category .to {
	font-size: 80%;
}
.article_head .label {
	display: inline-flex;
	align-items: center;
	height: 30px;
	margin-left: 1em;
	padding: 0 1em;
	border-radius: 3em;
	color: white;
	font-size: 13px;
	background: #4b97df;
}
.article_head.-space .category { color: #f05e5e; }
.article_head.-space .label { background: #f05e5e; }
.article_head.-digital .category { color: #4b97df; }
.article_head.-digital .label { background: #4b97df; }
.article_head.-earth .category { color: #25ae16; }
.article_head.-earth .label { background: #25ae16; }
.article_title {
	margin-top: 24px;
	font-size: 36px;
	line-height: 1.5;
}
.article_main p {
	margin-top: 24px;
}
@media screen and (max-width: 767px) {
	.article_title,
	.article_main p {
		margin-top: 12px;
	}
}
@media print {
	.article_head .category {
		font-size: calc(24px / 1.5);
	}
	.article_head .label {
		font-size: calc(13px / 1.5);
	}
	.article_title {
		font-size: calc(36px / 1.5);
	}
}
@media screen and (max-width: 479px) {
	.article_head .category {
		font-size: 16px;
	}
	.article_head .label {
		font-size: 10px;
	}
	.article_title {
		font-size: 24px;
	}
	.article_main p {
		font-size: 14px;
	}
}

/* :::::: アイコン群 :::::: */
.icons_scene,
.icons_sdgs {
	display: flex;
	flex-wrap: wrap;
}
.icons_sdgs {
	margin-top: 24px;
}
.article_icons dt {
	flex-basis: 100%;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}
.article_icons dd {
	flex-basis: calc(25% - 18px / 4);
}
.article_icons dd:not(:nth-of-type(4n+1)) {
	margin-left: 6px;
}
.article_icons dd:nth-of-type(n+5) {
	margin-top: 6px;
}
.article_icons dd .ico {
	width: 100%;
	height: auto;
	background: #2f2f2f;
	fill: white;
}
@media screen and (-ms-high-contrast: none) {
	.article_icons dd .ico {
		max-height: 72px;
	}
}
.article_icons dd figcaption {
	margin-top: .3em;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0;
}
@media print {
	.article_icons dt {
		font-size: calc(15px / 1.5);
	}
	.article_icons dd figcaption {
		font-size: calc(11px / 1.5);
	}
}

/* :::::: ソリューション :::::: */
.article_solution {
	margin-top: 64px;
	padding: 64px 0;
	border-top: 1px solid #cacaca;
	border-bottom: 1px solid #cacaca;
}
.article_solution .title {
	font-size: 24px;
}
.article_solution .theme {
	margin-top: 64px;
	padding: 1em;
	border: 1px solid currentcolor;
	font-size: 20px;
	line-height: 1.5;
}
.article_solution .wrap {
	margin-top: 40px;
	text-align: left;
}
.article_solution p {
	line-height: 1.8;
}
.article_solution .topic {
	padding-left: 1em;
	border-left: 9px solid #c4c4c4;
	font-size: 18px;
}
.article_solution dd,
.article_solution .links {
	font-size: 14px;
	line-height: 1.8;
}
.article_solution .text dd,
.article_solution .text p:nth-child(n+2) {
	margin-top: 1em;
}
.article_solution .list li {
	padding-left: 1em;
	text-indent: -1em;
}
.article_solution .list li + li {
	margin-top: 1em;
}
.article_solution .list li::before {
	content: "・";
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1em;
	text-indent: 0;
}
.article_solution .links dd {
	margin-top: .2em;
	padding-left: 1em;
	text-indent: -1em;
}
.article_solution .list li *,
.article_solution .links dd * {
	text-indent: 0;
}
.article_solution dd + .topic {
	margin-top: 24px;
}
.article_solution .image {
	display: flex;
}
.article_solution .image img {
	width: 100%;
}
.article_solution .image iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}
.article_solution .image figcaption {
	margin-top: .5em;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.article_solution .image .fix {
	white-space: nowrap;
}
.c-textlink,
.article_solution a {
	color: #a63162;
	word-break: break-word;
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
.article_solution .c-button {
	margin-top: 1em;
	color: white;
	background: black;
}
@media (hover: hover) {
	.c-textlink,
	.article_solution a {
		transition: background-size .4s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.c-textlink:hover,
	.article_solution a:hover {
		background-position: right bottom;
		background-size: 0 1px;
	}
}
@media print, (min-width: 480px) {
	.article_solution .image {
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
	}
	.article_solution .image .label {
		flex-basis: 100%;
		margin-bottom: .5em;
		font-weight: 700;
		text-align: center;
	}
	.article_solution .nowrap {
		flex-wrap: nowrap;
	}
	.article_solution .image figure {
		flex-basis: 100%;
		max-width: 100%;
	}
	.article_solution .image .half {
		flex-basis: calc(50% - 4px);
		max-width: calc(50% - 4px);
	}
	.article_solution .image .auto {
		flex-basis: auto;
		max-width: none;
	}
	.article_solution .image .mc {
		margin: 0 auto;
	}
	.article_solution .image .mt {
		margin-top: 16px;
	}
	.article_solution .image figcaption {
		flex-basis: 100%;
	}
}
@media print {
	.article_solution .image img {
		height: fit-content;
	}
}
@media print, (min-width: 768px) {
	.article_solution .l-h {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.article_solution .l-h > * {
		flex-basis: calc(50% - 24px);
		max-width: calc(50% - 24px);
	}
	.article_solution .l-v .image,
	.article_solution .image + .image,
	.article_solution .image .image:nth-child(n+2) {
		margin-top: 24px;
	}
	.article_solution .links {
		margin-top: 24px;
	}
	.article_solution .l-grid {
		display: grid;
		grid-template: repeat(2, auto) / repeat(2, calc(50% - 24px));
	}
	.article_solution .l-grid .text {
		grid-area: 1 / 1;
	}
	.article_solution .l-grid .image {
		grid-area: 1 / 2;
		margin-left: 48px;
	}
	.article_solution .l-grid .links {
		grid-area: 2 / 1 / 3 / 3;
	}
}
@media print {
	.article_solution .title {
		font-size: calc(24px / 1.5);
	}
	.article_solution .topic {
		font-size: calc(18px / 1.5);
	}
	.article_solution .image figcaption {
		font-size: calc(14px / 1.5);
	}
}
@media print, (min-width: 768px) and (-ms-high-contrast: none) {
	.article_solution .l-grid {
		display: -ms-grid;
		-ms-grid-rows: (auto)[2];
		-ms-grid-columns (calc(50% - 24px))[2];
	}
	.article_solution .l-grid .text {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
	.article_solution .l-grid .image {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
	}
	.article_solution .l-grid .links {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
	}
}
@media screen and (max-width: 767px) {
	.article_solution {
		padding: 32px 0 48px;
	}
	.article_solution .theme {
		margin-top: 32px;
	}
	.article_solution .wrap {
		margin-top: 24px;
	}
	.article_solution .image {
		margin-top: 16px;
	}
}
@media screen and (max-width: 479px) {
	.article_solution .title {
		font-size: 20px;
	}
	.article_solution .theme {
		font-size: 16px;
	}
	.article_solution .wrap {
		margin-top: 40px;
	}
	.article_solution .topic {
		font-size: 16px;
	}
	.article_solution .image {
		flex-direction: column;
	}
	.article_solution .image .half + .half,
	.article_solution .image .auto + .auto {
		margin-top: 16px;
	}
	.article_solution .image img {
		width: 100%;
	}
	.article_solution .image img:nth-child(n+2) {
		margin-top: 8px;
	}
}

/* ページ個別 */
.page-4 .article_solution .image,
.page-5 .article_solution .image,
.page-10 .article_solution .image,
.page-22 .article_solution .image {
	justify-content: center;
	white-space: nowrap;
}
@media print, (min-width: 768px) {
	.page-19 .article_solution .image .half:first-child {
		margin-left: 0;
	}
	.page-21 .article_solution .l-h .text {
		flex-basis: calc(43.6% - 48px);
		max-width: calc(43.6% - 48px);
	}
	.page-21 .article_solution .l-h .image {
		flex-basis: 56.4%;
		max-width: 56.4%;
	}
}
@media screen and (max-width: 479px) {
	.page-3 .article_solution .image + .image {
		margin-top: 24px;
	}
}

/* :::::: この技術の詳細が分かるイベントはこちら :::::: */
.p-induction {
	width: calc(100% - 40px);
	max-width: 1000px;
	margin: 120px auto 0;
	padding: 48px 24px 64px;
	background: linear-gradient(to right, #f6aad4, #b5e1f3);
}
.p-induction .induction_lead {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 600;
}
.p-induction .induction_banner {
	margin-top: 24px;
}
@media print {
	.p-induction .induction_lead {
		font-size: calc(24px / 1.5);
	}
}
@media screen and (max-width: 767px) {
	.p-induction {
		margin-top: 64px;
	}
}


/**
 * 個別 (イレギュラー)
 * ---------------------------------------- */
.page-25 .icons_sdgs dd:nth-of-type(3) {
	margin-right: 20%;
}
.page-25 .icons_sdgs dd:nth-of-type(4) {
	margin-left: 0;
}
.page-25 .icons_sdgs dd:nth-of-type(5) {
	margin-left: 6px;
}
.page-25 .icons_sdgs dd:nth-of-type(n+4) {
	margin-top: 16px;
}