@charset "UTF-8";
:root {
	--font-san-serif: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic", "游ゴシック", sans-serif;
	--font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Yu Mincho", "游明朝", serif;
	--font-weight-light: 200;
	--font-weight-normal: 400;
	--font-weight-bold: 600;
	--font-size-minimum: 0.75em;
	--font-size-caption: 0.875em;
	--font-size-base: 1em;
	--font-size-regular: 1.125em;
	--font-size-medium: 1.25em;
	--font-size-large: 1.5em;
	--font-size-xlarge: 1.75em;
	--font-size-headline: 2em;
	--font-size-pagetitle: 3em;
	--line-base: 1;
	--line-text: 1.5;
	--line-paragraph: 2;
	--color-black: rgba(0, 0, 0, 1);
	--color-white: rgba(255, 255, 255, 1);
	--color-black-main: rgba(0, 0, 0, 1);
	--color-black-sub: rgba(0, 0, 0, 0.8);
	--color-black-half: rgba(0, 0, 0, 0.6);
	--color-black-caption: rgba(0, 0, 0, 0.4);
	--color-black-button: rgba(0, 0, 0, 0.05);
	--color-black-bg: rgba(0, 0, 0, 0.025);
	--color-black-border: rgba(0, 0, 0, 0.1);
	--color-white-main: rgba(255, 255, 255, 1);
	--color-white-sub: rgba(255, 255, 255, 0.8);
	--color-white-half: rgba(255, 255, 255, 0.6);
	--color-white-caption: rgba(255, 255, 255, 0.4);
	--color-white-button: rgba(255, 255, 255, 0.1);
	--color-white-bg: rgba(255, 255, 255, 0.05);
	--color-white-border: rgba(255, 255, 255, 0.15);
	--color-access-blue: #003b83;
	--color-light-navy: #99a9ce;
	--color-opacity-main: 0.8;
	--color-opacity-sub: 0.6;
	--color-opacity-caption: 0.4;
	--transition: 0.2s;
}
* {box-sizing: border-box;}
*:hover {transition: var(--transition);}


html {
	color: var(--color-black);
	font-size: var(--font-size-base);
	font-family: var(--font-san-serif);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-base);
	background-color: var(--color-white);
	scroll-behavior: smooth;
	scroll-padding-top: 4em;	/* = header height */
	text-autospace: normal;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, figcaption, img, svg, blockquote {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: var(--font-size-pagetitle);
}
h2 {
	font-size: var(--font-size-headline);
}
h3 {
	font-size: var(--font-size-large);
}
h4 {
	font-size: var(--font-size-medium);
	font-weight: bold;
}
h5, h6 {
	font-size: var(--font-size-base);
	font-weight: bold;
}
h1, h2, h3, h4, h5, h6, p {
	line-height: 1.5;
}
section p {
	line-height: 2;
	margin-top: 1em;
}
section p:first-child,
.main-column article section p:first-child {
	margin-top: 0;
}
.title {
	line-height: 1.5;
}
figure {
	line-height: 0;
	overflow: hidden;
}
figcaption {
	font-size: var(--font-size-minimum);
	line-height: 1.25;
	text-align: center;
	margin-top: 0.5em;
	opacity: 0.5;
}
img {
	width: 100%;
	height: auto;
}
img, svg {
	line-height: 0;
	border: 0;
	display: inline-block;
}
iframe {
	border: 0;
	overflow: hidden;
}
body, header, main, footer {
	width: 100%;
}
body, main, section, article, aside, footer, .content {
	position: relative;
}
a {
	color: var(--color-black);
}
a:hover {
	text-decoration: none;
}


.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.inner {
	margin: 0 auto;
	max-width: 1280px;
	padding: 0 2rem;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.media {
	display: flex;
	justify-content: center;
	align-items: center;
}
.action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	width: 100%;
}
.scrim:before {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}


.button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	padding: 1em 1.5em;
	border-radius: 99px;
	overflow: hidden;
}
.button.icon {
	padding-right: 1.25em;
}
.button.icon:after {
	font-family: "Material Icons";
	line-height: 0;
	margin-left: 0.5em;
	opacity: 0.5;
	vertical-align: -0.1em;
}
.button.icon.new:after {
	content: "\e89e";
}
.button.icon.scroll:after {
	content: "\e5db";
}
.button.icon.forward:after {
	content: "\e5c8";
}
.button.dark {
	color: var(--color-black);
	background-color: var(--color-black-button);
}
.button.light {
	color: var(--color-white);
	background-color: var(--color-white-button);
}
.button.outline {
	background-color: transparent;
	padding: calc(1em - 1px) calc(1.5em - 1px);
}
.button.outline.dark {
	border: 1px solid var(--color-black);
}
.button.outline.light {
	border: 1px solid var(--color-white);
}
.button.large {
	font-size: var(--font-size-medium);
	width: 100%;
}
.button.dark:hover {
	color: var(--color-white);
	background-color: var(--color-black);
}
.button.light:hover {
	color: var(--color-black);
	background-color: var(--color-white);
}
nav .button:hover, footer .button:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
.button-caption {
	display: block;
	font-size: 1rem;
	opacity: var(--color-opacity-sub);
	margin-top: 0.75em;
}


.trademark {
	font-weight: normal;
	margin-left: 0.1em;
}


header {
	position: sticky;
	inset: 0;
	z-index: 9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	color: var(--color-white);
	background-color: var(--color-black);
	padding: 0.5em 1em 0.5em 2em;
	height: 4em;
}
header a {
	color: var(--color-white);
	text-decoration: none;
}
header .site-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
header .site-logo:hover {
	opacity: var(--color-opacity-main);
}
header .access-logo {
	fill: var(--color-white);
	height: 2.5em;
}
header .site-title {
	font-size: var(--font-size-minimum);
	font-weight: var(--font-weight-bold);
}
nav .menu {
	display: flex;
}
nav .menu-item {
	display: inline-block;
}
nav .header-icon {
	width: 2.5em;
	height: 2.5em;
	padding: 0.5em;
}
nav .menu-icon {
	position: absolute;
	top: 0.75em;
	right: 1em;
	display: none;
}
nav .menu-icon .material-icons {
	font-size: 1.5em;
}
nav .button, 
footer .button {
	padding: 0.75em 1em;
}
nav .button.icon, 
footer .button.icon {
	padding-right: 0.75em;
}


footer {
	color: var(--color-white);
	background-color: var(--color-black);
}
.footer-menu {
	padding: 0.75em 2em;
	height: 4em;
	background-color: var(--color-white-bg);
}
.footer-menu .menu {
	display: flex;
	justify-content: center;
}
.footer-menu .menu-item {
	display: inline-block;
}
.footer-menu .menu-item a {
	color: var(--color-white);
	text-decoration: none;
}


main {
	min-height: calc(100vh - (4em + 4em + 6em));	/* 100 - (header + footer-menu + brand-footer) */
}
main.archive {
	background-color: var(--color-black-bg);
	padding-bottom: 4rem;
}

main.archive .headline-title {
	font-size: 1.5em;
	margin-top: 3rem;
	margin-bottom: 0.25em;
}
main.archive .headline-text {
	color: var(--color-black-half);
}
main.archive .article-list {
	margin-top: 2em;
}


/* odd（奇数） */
.section-alternately section:nth-child(odd) {	
	background-color: var(--color-white);
}
.section-alternately section:nth-child(odd) article {
	background-color: var(--color-black-bg);
}
.section-alternately section:nth-child(odd) article:hover {
	background-color: var(--color-white);
}
/* even（偶数） */
.section-alternately section:nth-child(even) {
	background-color: var(--color-black-bg);
}
.section-alternately section.screen-black {
	color: var(--color-white);
	background-color: var(--color-black);
}
.section-alternately section {
	padding: 6rem 0;
}
.section-alternately .action {
	margin-top: 2em;
}
main .headline .section-title {
	display: inline-block;
	margin-bottom: 1em;
	opacity: var(--color-opacity-sub);
}
main .headline h2 {
	margin-bottom: 1em;
}
#main-visual {
	letter-spacing: 2px;
	min-height: 480px;
}
#main-visual .ruby {
	font-weight: bold;
	line-height: 1.5;
	margin-top: 0;
}
#main-visual .catchphrase {
	line-height: 2em;
	margin-top: 2em;
}
#main-visual .action {
	margin-top: 2em;
}
#about .flex {
	gap: 6rem;
}
#about .flex-item {
	width: calc((100% - 6em) / 2);
}
.overview .flex {
	margin-top: 4rem;
	gap: 1rem;
}
.overview .flex-item {
	border-radius: 1rem;
	width: calc((100% - 1rem) / 2);
	background-color: var(--color-white-bg);
}
.engineering-development {
	background: linear-gradient(150deg, rgba(255, 200, 0, 0.2), rgba(200, 100, 100, 0.1));
}
.engineering-operation {
	background: linear-gradient(150deg, rgba(200, 100, 100, 0.2), rgba(0, 200, 255, 0.1));
}
.consulting-analysis {
	background: linear-gradient(150deg, rgba(0, 200, 255, 0.2), rgba(100, 100, 255, 0.1));
}
.consulting-design {
	background: linear-gradient(150deg, rgba(100, 100, 255, 0.2), rgba(200, 100, 100, 0.1));
}
.overview .item-title {
	padding: 3em 3em 1em 3em;
	opacity: var(--color-opacity-sub);
}
.overview .item-body:after {
	content: "";
	display: block;
	background-color: var(--color-black-border);
	width: calc(100% - 6em);
	height: 1px;
	margin: 0 3em;
}
.overview .item-body:last-child:after {
	height: 0;
	margin: 1em 3em 0;
}
#consulting.overview .item-body:after {
	background-color: var(--color-white-border);
}
.overview .content {
	margin: 2em 3em;
}
.overview .action {
	padding: 0 3em 2em;
}
.overview .content p {
	margin-top: 1em;
	opacity: var(--color-opacity-main);
}


.article-list {
	margin-top: 4rem;
}
.article-list article a {
	display: flex;
}
.article-list article .title, 
.article-list article .sub-title, 
.article-list article .lead {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-height: 1.5;
}
.article-list article .title {
	-webkit-line-clamp: 3;
	font-size: var(--font-size-regular);
}
.article-list article .sub-title {
	-webkit-line-clamp: 1;
	font-size: 0.875em;
	color: var(--color-black-half);
	margin-top: 0.5em;
}
.article-list article .lead {
	-webkit-line-clamp: 3;
	font-size: 0.875em;
	color: var(--color-black-sub);
	margin-top: 1em;
}
.article-list .article-item {
	list-style: none;
}
.article-list .card {
	width: calc((100% - (1rem * 2)) / 3);
}
.article-list .card article {
	background-color: var(--color-white);
	border-radius: 1rem;
	overflow: hidden;
	height: 100%;
	border: 1px solid transparent;
}
.article-list .card article:hover {
	border-color: var(--color-black);
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
.article-list .card a {
	flex-direction: column;
	height: 100%;
}
.article-list article a {
	color: var(--color-black);
	text-decoration: none;
}
.article-list article figure img {
	object-fit: cover;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 100%;
}
.article-list article:hover img {
	transform: scale(1.1);
	transition: var(--transition);
}
.article-list .card article .content,
.article-list .card article .action {
	padding: 1em;
}
.article-list .card article .action {
	justify-content: right;
}
.article-list .card article:hover .button.dark {
	color: var(--color-white);
	background-color: var(--color-black);
	transition: var(--transition);
}
.article-list .thumb {
	width: calc((100% - (1em * 3)) / 4);
}
.article-list .thumb article {
	border-radius: 0.5rem;
}
.article-list .thumb article a {
	flex-direction: column;
	gap: 0.5rem;
}
.article-list .thumb article figure {
	border-radius: 0.5rem;
}
.article-list .thumb article h3 {
	font-size: 1em;
	font-weight: normal;
}
.article-list .thumb article:hover h3 {
	text-decoration: underline;
}
.article-list .thumb article .sub-title, 
.article-list .thumb article .lead {
	display: none;
}
.article-list .label {
	margin-top: auto;
	padding: 1em;
	gap: 0.25rem;
}
.article-list .label span {
	font-size: 0.75em;
	color: var(--color-black-sub);
	padding: 0.75em 1em;
	border-radius: 0.5rem;
	background-color: var(--color-black-bg);
}
.article-list .label-external-link article::after {
	font-family: "Material Icons";
	content: "\e89e";
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: var(--color-white);
	font-size: 1rem;
	padding: 0.5em;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 0.5rem;
}
.article-list .label-external-link article:hover::after {
	background-color: var(--color-black);
}
.article-list .label-recommend-flag article::after {
	content: "おすすめ";
	position: absolute;
	top: 1rem;
	left: 1rem;
	color: var(--color-white);
	font-size: 0.75em;
	padding: 0.75em 1em;
	background-color: var(--color-black-sub);
	border-radius: 0.5rem;
}


.page-headline {
	position: relative;
	color: var(--color-white);
	background-color: var(--color-black);
	padding: 4rem 0;
	min-height: 20em;
}
.page-headline .page-title {
	display: inline-block;
	font-size: 3em;
	font-weight: bold;
	line-height: 1.5;
}
.page-headline .page-description {
	color: var(--color-white-sub);
	line-height: 2;
	margin-top: 2rem;
}


.single .scrim:before {
	background: rgba(0, 0, 0, 0.5);
}
.single .flex.container {
	gap: 4rem;
	margin: 4em 0;
}
.single .main-column {
	width: calc((100% - 4em) * 0.75);
}
.single .sub-column {
	width: calc((100% - 4em) * 0.25);
}


.label {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.label a {
	display: block;
	color: var(--color-black);
	text-decoration: none;
	padding: 0.75em 1em;
	background-color: var(--color-black-button);
	border-radius: 0.5rem;
}
.label a:hover {
	color: var(--color-white);
	background-color: var(--color-black);
}


.main-column article section {
	margin: 4rem 0;
}
.main-column article section:first-child {
	margin-top: 0;
}
.main article section:nth-child(n+2):before {
	content: "";
	display: block;
	background-color: var(--color-black-border);
	width: 100%;
	height: 1px;
	margin-bottom: 4em;
}
.main-column .article-headline h1 {
	font-size: 2em;
	font-weight: normal;
	margin-bottom: 3rem;
}
.main-column .article-headline .lead {
	color: var(--color-black-sub);
}
.main-column .article-headline .date {
	color: var(--color-black-half);
	text-align: right;
}
.main-column .article-headline .label {
	margin-top: 1rem;
}

/* article components */
.main-column article section {
	clear: both;
}
.main-column article section h2 {
	font-size: 1.5em;
	font-weight: normal;
	padding: 1.5rem 0;
	border-top: 1px solid var(--color-black);
	border-bottom: 1px solid var(--color-black);
	margin: 3rem 0 2rem;
}
.main-column article section h3 {
	font-size: 1.25em;
	margin: 2.5rem 0 1rem;
}
.main-column article section h4 {
	margin: 2rem 0 1rem;
}
.main-column article section ul,
.main-column article section ol {
	padding-left: 1.5em;
	margin-top: 1rem;
}
.main-column article section ul {
	list-style-type: disc;
}
.main-column article section ol {
	list-style-type: decimal;
}
.main-column article section li {
	display: list-item;
	margin: 0.5em 0;
	line-height: 1.5;
}
.main-column .figure-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	padding: 1em;
	border-radius: 1rem;
	width: 100%;
	margin: 2rem 0;
}
.main-column .figure-container figure,
.main-column .figure-container-align figure {
	margin: 0;
}
.main-column .figure-container.screen-dark {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7));
}
.main-column .figure-container.screen-light {
	border: 1px dashed var(--color-black-half);
}
.main-column .figure-container img {
	max-width: 800px;
}
.main-column .figure-container-align {
	max-width: 400px;
}
.main-column .figure-container-align figure {
	margin-bottom: 1rem;
}
.main-column .figure-container-align.figure-align-right {
	float: right;
	margin-left: 4rem;
}
.main-column .figure-container-align.figure-align-left {
	float: left;
	margin-right: 4rem;
}
.main-column .figure-container-single {
	margin: 2rem 0;
}

.main-column .last-paragraph {
	margin-top: 2rem;
}
.main-column .index,
.main-column .caption,
.main-column .writer {
	padding: 1.5em;
	border-radius: 0.5rem;
}
.main-column .index {
	background-color: var(--color-black-bg);
	padding-left: 2.5em;
}
.main-column .textbox-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2em 0;
	padding: 0;
}
.main-column .textbox-item {
	width: 100%;
	margin: 0;
}
.main-column .textbox-item.column-2 {
	width: calc((100% - 1em) / 2);
}
.main-column .textbox {
	background-color: var(--color-black-bg);
	padding: 2em;
	border-radius: 1rem;
	width: 100%;
	height: 100%;
}
.main-column .textbox-title {
	font-size: var(--font-size-regular);
	margin-top: 0;
}
.main-column .textbox-text {
	color: var(--color-black-sub);
	line-height: 1.75;
}
.main-column .textbox-subtitle {
	color: var(--color-black-sub);
	font-size: 0.875em;
	margin-bottom: 0.25em;
}
.main-column .caption {
	color: var(--color-black-half);
	font-size: 0.875em;
	border: none;
}
.main-column .caption-title,
.main-column .caption-text,
.main-column .cite-text {
	color: var(--color-black-half);
	line-height: 1.5;
}
.main-column .caption-container {
	margin-top: 2em;
}
.main-column .caption-container .textbox {
	margin-top: 1em;
}
.main-column dl .caption-title {
	margin-bottom: 0.5em;
}
.main-column .caption-text,
.main-column .cite-text {
	margin-top: 0.5em;
}
.main-column .cite-text {
	font-style: normal;
}
.main-column .caption .cite a {
	color: var(--color-black-half);
}
.main-column .caption .cite:after {
	font-family: "Material Icons";
	content: "\e89e";
	margin-left: 0.25em;
	vertical-align: -0.1em;
}
.main-column hr {
	border: 1px dashed var(--color-black-border);
	margin: 3rem 0 2rem 0;
}
.main-column .ordered-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 2em;
	padding: 2em;
	background-color: var(--color-black-bg);
	border-radius: 1rem;
}
.main-column .ordered-list-item {
	display: flex;
	gap: 2rem;
}
.main-column .ordered-list-number {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border: 1px solid var(--color-black);
	border-radius: 1rem;
	margin-top: 0.5em;
}
.main-column .ordered-list-content .sub-text {
	color: var(--color-black-sub);
	line-height: 1.5;
	margin-top: 0.5em;
}
.main-column .before-after {
	margin-top: 2em;
}
.main-column .solution {
	position: relative;
	margin: 2em 0;
	padding: 2em;
	background-color: var(--color-black-bg);
	border-radius: 1rem;
}
.main-column .solution h4 {
	margin: 0;
}
/* /article components */


.main-column aside {
	margin-top: 4em;
}
.main-column .headline {
	margin: 2em 0;
}
.main-column .headline h2 {
	font-size: 1.5em;
}
.main-column .article-list {
	margin-top: 0;
}


.sidebar .headline {
	padding: 1.5em 2em 0;
}
.sidebar .headline .title {
	font-size: 1.25em;
	margin-bottom: 0;
}
.sidebar .headline .sub-title {
	font-size: 0.875em;
	margin-top: 0.25em;
	opacity: var(--color-opacity-caption);
}
.sidebar a {
	color: var(--color-black);
	text-decoration: none;
}
.sidebar ul {
	padding: 1em;
}
.sidebar ul.children {
	padding: 0 0 0 1em;
}
.sidebar-menu {
	background-color: var(--color-black-bg);
	margin-bottom: 1em;
	border-radius: 1rem;
}
.sidebar-menu.menu-recently .article-list {
	padding: 1em;
	margin-top: 0;
}
.sidebar-menu.menu-recently .article-list.flex {
	gap: 0;
}
.sidebar-menu.menu-recently .article-item {
	width: 100%;
	padding: 0.75em 1em;
}
.sidebar-menu.menu-taxonomy li {
	display: inline-block;
	width: 100%;
}
.sidebar-menu.menu-taxonomy li a {
	padding: 0.75em 1em;
	border-radius: 0.5rem;
	display: block;
	width: 100%;
}
.sidebar-menu.menu-taxonomy li a:hover {
	color: var(--color-white);
	background-color: var(--color-black);
}
.sidebar-menu.menu-inquiry .content {
	color: var(--color-black-sub);
	padding: 1em 2em;
}
.sidebar-menu.menu-inquiry .action {
	padding: 0 2em 2em 2em;
}
.sidebar-menu.menu-inquiry .button {
	width: 100%;
}


.marker-attention {
	font-weight: bold;
	background: linear-gradient(transparent 50%, #ff9 50%); /* yellow */
}
.marker-cation {
	font-weight: bold;
	background: linear-gradient(transparent 50%, #fdd 50%); /* red */
}
.marker-safe {
	font-weight: bold;
	background: linear-gradient(transparent 50%, #dfd 50%); /* green */
}
.marker-positive {
	font-weight: bold;
	background: linear-gradient(transparent 50%, #dff 50%); /* cyan */
}
.marker-gray {
	font-weight: bold;
	background: linear-gradient(transparent 50%, #ddd 50%);
}
.main-column .textbox.surface-attention {
	background-color: #fffff5;
}
.main-column .textbox.surface-cation {
	background-color: #fff5f5;
}
.main-column .textbox.surface-safe {
	background-color: #f5fff5;
}
.main-column .textbox.surface-positive {
	background-color: #f5ffff;
}


.inquiry {
	padding: 4rem 0;
}
.include-inquiry {
	width: 75%;
	margin: 0 auto;
}
.include-inquiry .action {
	justify-content: center;
	margin-top: 0;
}
.include-inquiry .button.dark:hover {
	background:
		linear-gradient(to right, rgb(200, 100, 100, 0.4), rgb(255, 200, 0, 0.2), #000000, rgb(0, 200, 255, 0.2), rgb(100, 100, 255, 0.4)), #000000;
}
.include-inquiry .button.large {
	font-size: 1.5em;
}
.include-inquiry .title {
	color: var(--color-black-main);
	font-size: 1.25em;
	text-align: center;
	margin-top: 1.5em;
}
.include-inquiry .content {
	color: var(--color-black-half);
	margin-top: 1em;
}
.single .inquiry {
	padding: 2em 0;
	border-top: 1px solid var(--color-black-border);
	border-bottom: 1px solid var(--color-black-border);
}
.single .include-inquiry {
	width: 100%;
}





.form {
	padding: 4em 0;
}



.canvas {
	padding: 4em 0;
}
.canvas section {
	margin-top: 4em;
}
.canvas section:first-child {
	margin-top: 0;
}
.canvas h1 {
	font-size: 2em;
}
.canvas h2 {
	font-size: 1.5em;
}
.canvas h3 {
	font-size: 1.25em;
}
.canvas a:hover {
	text-decoration: none;
}
.canvas .material-icons {
	font-size: 1em;
	line-height: 0;
	margin-left: 0.25em;
	vertical-align: -0.1em;
}
.canvas .content {
	width: 50%;
	margin: auto;
}

main.document h3 {
	margin-top: 1.5em;
}
main.document h3 + p {
	margin-top: 1em;
}
main.document dl {
	margin-top: 1em;
	line-height: 1.5;
}
main.document dt {
	margin-top: 1em;
}
main.document dt:first-child {
	margin-top: 0;
}



.canvas .page-title {
	text-align: center;
	margin-bottom: 2em;
}
.canvas .description {
	color: var(--color-black-half);
	margin-top: 1em;
}
.canvas .text {
	color: var(--color-black-sub);
	margin-top: 4em;
}
.canvas .action {
	flex-direction: column;
	text-align: center;
	margin-top: 4em;
}
.canvas .button {
	width: 100%;
}
.canvas .button:hover {
	color: var(--color-white);
	background-color: var(--color-black);
}


.canvas.not-found .page-title h1 {
	color: var(--color-black-half);
	font-size: 8em;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 4px;
}




/* 〜960 */
@media screen and (max-width: 960px) {
	.scroll-media {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.scroll-media figure {
		width: 100%;
		min-width: 960px;
		border-collapse: collapse;
	}
	nav .menu-icon {
		display: block;
	}
	nav .header-menu {
		position: fixed;
		top: 0;
		right: -75%;
		opacity: 0;
		overflow: scroll;
		width: 75%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.95);
		backdrop-filter: blur(16px);
		box-shadow: 0 0 32px rgba(0, 0, 0, 0.25);
		transition: var(--transition);
	}
	nav .header-menu.open {
		right: 0;
		opacity: 1;
	}
	nav .menu, 
	footer .menu {
		flex-direction: column;
		gap: 1rem;
	}
	header nav .menu {
		margin: 5em 1em 1em;
	}
	nav .menu a, 
	footer .menu a {
		text-align: left;
		width: 100%;
		background-color: var(--color-white-button);
		padding: 1.25em;
	}
	
	.single .main-column,
	.single .sub-column,
	#about .flex-item, 
	.overview .flex-item {
		width: 100%;
	}
	#about .content figure {
		width: 75%;
		margin: 0 auto;
	}
	.include-inquiry .inner {
		width: 75%;
	}
	aside.recent-posts {
		display: none;
	}
	.sidebar-menu.menu-recently .article-item {
		width: 50%;
	}
	.footer-menu {
		height: auto;
	}
	footer nav .menu {
		padding: 1em 0;
	}
	br.tb {display: none;}
}

/* 〜440 */
@media screen and (max-width: 440px) {
	header,
	.footer-menu{
		padding: 1.5em;
	}
	.button {
		width: 100%;
	}
	h1,
	.page-headline .page-title {
		font-size: 2em;
		line-height: 1.25;
	}
	h2 {
		font-size: var(--font-size-xlarge);
	}
	main.archive {
		padding-bottom: 3rem;
	}
	#main-visual .catchphrase {
		margin-top: 3em;
	}
	#main-visual .button.outline {
		background-color: var(--color-black);
	}
	.scrim:before {
		background: linear-gradient(135deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	}
	.inner {
		padding: 0 1rem;
	}
	#main-visual .ruby {
		margin-top: 1em;
	}
	.section-alternately section, 
	section#main-visual, 
	section#about, 
	section.overview,
	.page-headline,
	.inquiry {
		padding: 3rem 0;
	}
	.form {
		padding: 1em 0;
	}
	#about .content figure,
	.article-list .card {
		width: 100%;
	}
	#about .flex {
		gap: 3rem;
	}
	.overview .headline {
		margin: 0;
	}
	.overview .flex {
		margin-top: 3em;
	}
	.overview .item-title {
		padding: 3em 2em 1em 2em;
	}
	.overview h3 {
		text-align: center;
	}
	.overview .content {
		margin: 2em;
	}
	.overview .item-body:after {
		width: calc(100% - 4em);
		margin: 0 2em;
	}
	.overview .action {
		padding: 0 2em 2em;
	}
	.overview .item-body:last-child:after {
		margin: 0;
	}
	.include-inquiry {
		width: 100%;
	}
	.article-list {
		margin-top: 3em;
	}
	.article-list .card article {
		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
	}
	.article-list article .title, 
	.article-list article .lead {
		-webkit-line-clamp: 3;
		height: auto;
	}
	.single .scrim:before {
		content: none;
	}
	.single .flex.container {
		margin: 2em 0;
		gap: 1rem;
	}
	.single .page-headline {
		aspect-ratio: 16 / 9;
		min-height: auto;
	}
	.article-list article .label,
	.single .page-headline .content {
		display: none;
	}
	.main-column .article-headline h1 {
		font-size: 1.75em;
	}
	.main-column article section h2 {
		font-size: 1.25em;
	}
	.main-column .figure-container img {
		max-width: 100%;
	}
	.main-column .figure-container-align.figure-align-right,
	.main-column .figure-container-align.figure-align-left {
		float: none;
		margin: 0;
	}
	.main-column .figure-container-align {
		max-width: 100%;
	}
	.main-column .figure-container-align figure {
		margin: 2rem auto;
	}
	.main-column .textbox {
		padding: 1.5rem;
	}
	.main-column .textbox-item.column-2 {
		width: 100%;
	}
	.sidebar .headline {
		padding: 1.5rem 1rem 0;
	}
	.sidebar-menu.menu-recently .article-list,
	.sidebar ul {
		padding: 1rem 0;
	}
	.sidebar-menu.menu-inquiry .content {
		padding: 1em;
	}
	.sidebar .article-item {
		width: 100%;
	}
	br.sp {display: none;}
}