@charset "UTF-8";
/**
 *
 * page-about.scss
 *
 */
/* ------------------------------------------------------------
 about-page
------------------------------------------------------------ */
.about-page {
	--color-bg: var( --color-brand-cream );
	--color-header-bg: var( --color-white );
}

@media screen and (min-width: 1024px) {
	.about-hero .about-hero__visual img {
		top: -1.5598rem ;
		left: -2.495316%;
		width: 104.990632%;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero .about-hero__visual img {
		top: -0.8341rem ;
		left: 50%;
		width: auto;
		height: 75.8341rem ;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------------
 about-intro
------------------------------------------------------------ */
.about-intro {
	position: relative;
}

.about-intro__inner {
	position: relative;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.about-intro__inner {
		max-width: 150rem ;
		padding: 17.8rem 0 18.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__inner {
		max-width: 60rem ;
		padding: 7.8rem 0 6.6rem ;
	}
}

.about-intro__title {
	position: relative;
	white-space: nowrap;
	font-family: var(--font-gothic2);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 400;
	letter-spacing: -0.06em;
}

.about-intro__title::before, .about-intro__title::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.about-intro__title::before {
	margin-top: var(--font-gothic2-top);
}

.about-intro__title::after {
	margin-bottom: var(--font-gothic2-bottom);
}

@media screen and (min-width: 1024px) {
	.about-intro__title {
		width: 43%;
		font-size: var(--font-size56);
		--line-height: 1.28571;
		margin-left: 55.7%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__title {
		display: flex;
		width: -webkit-max-content;
		width: max-content;
		height: 23.3rem ;
		font-size: var(--font-size30);
		--line-height: 1.5;
		margin-left: auto;
		margin-right: 13.15%;
		-webkit-font-feature-settings: 'vpal' 1;
		font-feature-settings: 'vpal' 1;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__title::before, .about-intro__title::after {
		content: none;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__title .about-text-crop-v {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		height: inherit;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__title .about-text-crop-v > span {
		display: block;
		margin-right: 0;
	}
}

.about-intro__title .about-text-crop-v > span:first-child {
	display: block;
}

.about-intro__title .about-text-crop-v > span:nth-child(2) {
	margin-right: -.25em;
}

.about-intro__message {
	position: relative;
	font-weight: 500;
}

@media screen and (min-width: 1024px) {
	.about-intro__message {
		width: 37.333333%;
		font-size: var(--font-size18);
		--line-height: 2.33333;
		margin-left: 56%;
		margin-top: 6.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__message {
		width: 80.75%;
		font-size: var(--font-size13);
		--line-height: 1.76923;
		margin-inline: auto;
		margin-top: 9.4rem ;
		padding-bottom: 31.5rem ;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.about-intro__message.is-revealing {
		-webkit-animation: about-reveal .9s both;
		animation: about-reveal .9s both;
	}
}

.about-intro__copy {
	letter-spacing: -0.025em;
}

.about-intro__copy p {
	line-height: inherit;
}

.about-intro__signature {
	font-weight: 700;
}

@media screen and (min-width: 1024px) {
	.about-intro__signature {
		white-space: pre-wrap;
		--line-height: 1.44444;
		margin-top: 7.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__signature {
		text-align: right;
		white-space: normal;
		--line-height: 1.76923;
		margin-top: 4rem ;
	}
}

.about-intro__photo {
	position: absolute;
	overflow: hidden;
	/* 支給aiの写真枠と配置画像から算出したトリミング。 */
}

@media screen and (min-width: 1024px) {
	.about-intro__photo {
		border-radius: 1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__photo {
		border-radius: 0.5rem ;
	}
}

.about-intro__photo img {
	position: absolute;
	max-width: none;
}

.about-intro__photo.-work {
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.about-intro__photo.-work {
		top: 49.49401rem ;
		left: 30.764687%;
		width: 17.333333%;
		height: 34rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__photo.-work {
		bottom: 14.4rem ;
		top: auto;
		left: 5.000000%;
		width: 37.920412%;
		height: 19.77422rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-intro__photo.-work img {
		top: -0.739775%;
		left: -83.394753%;
		width: 230.781395%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__photo.-work img {
		top: -0.893082%;
		left: -83.385861%;
		width: 230.765985%;
	}
}

@media screen and (min-width: 1024px) {
	.about-intro__photo.-market {
		top: 79.32256rem ;
		left: 6.178567%;
		width: 37.333333%;
		height: 38rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__photo.-market {
		bottom: 6.6rem ;
		top: auto;
		left: 23.960213%;
		width: 80.854050%;
		height: 21.88531rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-intro__photo.-market img {
		top: -5.006157%;
		left: -5.333891%;
		width: 106.926502%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__photo.-market img {
		top: -5.715097%;
		left: -5.891821%;
		width: 108.004615%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.about-intro__photo.is-revealing {
		-webkit-animation: about-reveal .9s both;
		animation: about-reveal .9s both;
	}
}

@media screen and (min-width: 1024px) {
	.about-intro__photo.-president {
		top: 13.93628rem ;
		left: 4.703673%;
		width: 28.800000%;
		height: 50rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__photo.-president {
		top: 5.38964rem ;
		left: 0.000000%;
		width: 63.143113%;
		height: 29.22514rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-intro__photo.-president img {
		top: -33.476137%;
		left: -34.142722%;
		width: 236.478156%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__photo.-president img {
		top: -33.311798%;
		left: -33.954690%;
		width: 235.949737%;
	}
}

.about-intro__coral {
	position: absolute;
	bottom: -8.4rem ;
	left: calc(50% + 51.2rem);
	width: 36rem ;
	pointer-events: none;
}

@media screen and (max-width: 1023px) {
	.about-intro__coral {
		display: none;
	}
}

/* スクロールの進行中は舞台と四隅の文字を固定する。 */
.about-values {
	position: relative;
	--values-edge-gap: 6vh;
	--values-end-space: 0px;
	background-color: var(--color-about-blue);
	background-image: none;
	color: var(--color-white);
}

@supports (height: 100svh) {
	.about-values {
		--values-edge-gap: 6svh;
	}
}

@media screen and (min-width: 1024px) {
	.about-values {
		--values-wave-height: 1.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-values {
		--values-wave-height: 0.9rem ;
		--values-people-gap: 6.1454rem ;
		--values-challenge-gap: 5.6194rem ;
		--values-edge-gap: min(5.5vh, 4rem);
		--values-end-space: calc(var( --values-people-gap ) - var( --values-edge-gap ) - 1px);
		padding-bottom: var(--values-end-space);
	}
	@supports (height: 100svh) {
		.about-values {
			--values-edge-gap: min(5.5svh, 4rem);
		}
	}
}

.about-values__wave {
	position: absolute;
	inset-inline: 0;
	pointer-events: none;
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.about-values__wave {
		height: 1.8rem ;
		top: -1.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__wave {
		top: -0.8rem ;
		height: 0.9rem ;
	}
}

.about-values__wave::before {
	content: '';
	position: absolute;
	inset: 0;
	width: calc(100% + 40rem);
	background-color: transparent;
	background-image: url(../img/about/wave-blue.svg);
	background-position: left top;
	background-repeat: repeat-x;
}

@media screen and (min-width: 1024px) {
	.about-values__wave::before {
		background-size: 1600px 100%;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__wave::before {
		background-size: 800px 100%;
	}
}

.about-values__end {
	position: absolute;
	inset-inline: 0;
	pointer-events: none;
	bottom: -1px;
	z-index: 2;
	background-color: transparent;
	background-image: url(../img/about/wave-cream.svg);
	background-position: center top;
	background-repeat: repeat-x;
}

@media screen and (min-width: 1024px) {
	.about-values__end {
		height: 1.8rem ;
		background-size: 1600px 100%;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__end {
		height: 0.9rem ;
		background-size: 800px 100%;
	}
}

.about-values__stage {
	position: relative;
	min-height: 84rem ;
}

.about-values__frame {
	position: relative;
	margin-inline: auto;
	padding: 18vh 0 24vh;
	padding-block: 18svh 24svh;
}

@media screen and (min-width: 1024px) {
	.about-values__frame {
		max-width: 192rem ;
	}
}

.about-values__characters img {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.about-values__characters .-sea {
		max-width: 581.404px;
		top: 12.8rem ;
		left: 2.65%;
		width: 19.38%;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__characters .-sea {
		top: 9.6%;
		left: 3.5%;
		width: 30%;
	}
}

@media screen and (min-width: 1024px) {
	.about-values__characters .-dream {
		max-width: 570.044px;
		top: 13.6rem ;
		right: 2.39%;
		width: 19%;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__characters .-dream {
		top: 10%;
		right: 4.5%;
		width: 29%;
	}
}

.about-values__characters .-people {
	bottom: calc(var( --values-wave-height ) + var( --values-edge-gap ));
}

@media screen and (min-width: 1024px) {
	.about-values__characters .-people {
		max-width: 551.34px;
		left: 3.28%;
		width: 18.38%;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__characters .-people {
		left: 4.7%;
		width: 28%;
	}
}

.about-values__characters .-challenge {
	bottom: calc(var( --values-wave-height ) + var( --values-edge-gap ));
}

@media screen and (min-width: 1024px) {
	.about-values__characters .-challenge {
		max-width: 614.94px;
		right: 1.91%;
		width: 20.5%;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__characters .-challenge {
		bottom: calc(var( --values-wave-height ) + var( --values-edge-gap ) + var( --values-challenge-gap ) - var( --values-people-gap ));
		right: 4.5%;
		width: 31%;
	}
}

.about-values__heading {
	position: relative;
	display: flex;
	width: -webkit-max-content;
	width: max-content;
	font-family: var(--font-gothic2);
	font-weight: 400;
	margin-left: auto;
	margin-right: auto;
	-webkit-font-feature-settings: 'vpal' 1;
	font-feature-settings: 'vpal' 1;
	white-space: nowrap;
	letter-spacing: -0.09em;
}

@media screen and (min-width: 1024px) {
	.about-values__heading {
		font-size: var(--font-size38);
		--line-height: 1.55263;
		height: 30.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__heading {
		height: 18rem ;
		font-size: 2.25rem ;
		--line-height: 1.51111;
	}
}

.about-values__heading .about-text-crop-v {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	height: inherit;
}

.about-values__heading .about-text-crop-v > span {
	display: block;
}

.about-values__needle {
	display: block;
	-webkit-transform: rotate(var(--compass-rotation, 0deg));
	transform: rotate(var(--compass-rotation, 0deg));
}

@media screen and (min-width: 1024px) {
	.about-values__needle {
		width: 3.6614rem ;
		height: 12.4546rem ;
		margin: 2.5rem 0 4rem ;
		margin-inline: auto;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__needle {
		width: 1.8307rem ;
		height: 6.2273rem ;
		margin: 3rem 0 2.3rem ;
		margin-inline: auto;
	}
}

.about-values__panels {
	position: relative;
}

.about-values__panel {
	position: relative;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.about-values__panel {
		transition: none;
	}
}

@media screen and (min-width: 1024px) {
	.about-values__panel + .about-values__panel {
		margin-top: 13rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-values__panel + .about-values__panel {
		margin-top: 10rem ;
	}
}

.about-values__panel[data-value='value'] .about-values__copy {
	text-align: left;
}

.about-values__name {
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 400;
	--line-height: 1;
	letter-spacing: 0.06em;
}

.about-values__name::before, .about-values__name::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.about-values__name::before {
	margin-top: var(--font-sans-serif-top);
}

.about-values__name::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.about-values__name {
		font-size: var(--font-size86);
	}
}

@media screen and (max-width: 1023px) {
	.about-values__name {
		font-size: var(--font-size43);
	}
}

.about-values__copy {
	width: -webkit-max-content;
	width: max-content;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.about-values__copy {
		max-width: 90%;
		font-family: var(--font-gothic2);
		padding-top: 0.1px;
		padding-bottom: 0.1px;
		font-weight: 400;
		font-size: var(--font-size26);
		--line-height: 1.53846;
		margin-top: 4.7rem ;
	}
	.about-values__copy::before, .about-values__copy::after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		font-size: inherit;
	}
	.about-values__copy::before {
		margin-top: var(--font-gothic2-top);
	}
	.about-values__copy::after {
		margin-bottom: var(--font-gothic2-bottom);
	}
}

@media screen and (max-width: 1023px) {
	.about-values__copy {
		padding-top: 0.1px;
		padding-bottom: 0.1px;
		font-family: var(--font-gothic);
		font-weight: 700;
		font-size: var(--font-size13);
		--line-height: 1.46154;
		margin-top: 3rem ;
	}
	.about-values__copy::before, .about-values__copy::after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		font-size: inherit;
	}
	.about-values__copy::before {
		margin-top: var(--font-gothic2-top);
	}
	.about-values__copy::after {
		margin-bottom: var(--font-gothic2-bottom);
	}
}

@media screen and (max-width: 1023px) {
	.about-values__copy::before, .about-values__copy::after {
		content: none;
	}
}

.about-values__copy .about-text-crop > span {
	display: block;
}

.has-about-scroll .about-values {
	height: calc(var( --values-scroll-height ) + var( --values-end-space ));
}

.has-about-scroll .about-values__stage {
	position: sticky;
	top: 0;
	min-height: 0;
}

.has-about-scroll .about-values__frame {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 8vh 0;
	padding-block: 8svh;
	--values-unit: min(0.1rem, 0.1vh);
}

@supports (height: 100svh) {
	.has-about-scroll .about-values__frame {
		--values-unit: min(0.1rem, 0.1svh);
	}
}

.has-about-scroll .about-values__content {
	width: 100%;
}

/* 短いPC画面でも中央の一式を収め、本文の読みやすさは維持する。 */
@media screen and (min-width: 1024px) {
	.has-about-scroll .about-values__heading {
		font-size: max(24px, calc(38 * var(--values-unit)));
		height: max(192px, calc(304 * var(--values-unit)));
	}
}

@media screen and (max-width: 1023px) and (max-height: 650px) {
	.has-about-scroll .about-values__heading {
		font-size: calc(30 * var( --values-unit ));
		height: calc(240 * var( --values-unit ));
	}
}

@media screen and (min-width: 1024px) {
	.has-about-scroll .about-values__needle {
		width: auto;
		height: calc(124.546 * var( --values-unit ));
		margin-top: calc(25 * var( --values-unit ));
		margin-bottom: calc(40 * var( --values-unit ));
	}
}

@media screen and (max-width: 1023px) and (max-height: 650px) {
	.has-about-scroll .about-values__needle {
		width: auto;
		height: calc(75 * var( --values-unit ));
		margin-top: calc(20 * var( --values-unit ));
		margin-bottom: calc(27 * var( --values-unit ));
	}
}

@media screen and (min-width: 1024px) {
	.has-about-scroll .about-values__name {
		font-size: max(48px, calc(86 * var(--values-unit)));
	}
}

@media screen and (min-width: 1024px) {
	.has-about-scroll .about-values__copy {
		font-size: max(16px, calc(26 * var(--values-unit)));
		margin-top: calc(47 * var( --values-unit ));
	}
}

@media screen and (max-width: 1023px) and (max-height: 650px) {
	.has-about-scroll .about-values__copy {
		margin-top: calc(30 * var( --values-unit ));
	}
}

@media screen and (max-width: 1023px) and (max-height: 650px) {
	.has-about-scroll .about-values__characters .-sea,
	.has-about-scroll .about-values__characters .-dream {
		top: 12%;
	}
}

.has-about-scroll .about-values__panels {
	display: grid;
}

.has-about-scroll .about-values__panel {
	grid-area: 1 / 1;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(1.5rem);
	transform: translateY(1.5rem);
	transition: opacity var(--transition-values-opacity), visibility var(--transition-panel), -webkit-transform var(--transition-panel);
	transition: opacity var(--transition-values-opacity), transform var(--transition-panel), visibility var(--transition-panel);
	transition: opacity var(--transition-values-opacity), transform var(--transition-panel), visibility var(--transition-panel), -webkit-transform var(--transition-panel);
}

@media screen and (min-width: 1024px) {
	.has-about-scroll .about-values__panel {
		margin-top: 0;
	}
}

@media screen and (max-width: 1023px) {
	.has-about-scroll .about-values__panel {
		margin-top: 0;
	}
}

.has-about-scroll .about-values__panel.is-current {
	opacity: 1;
	visibility: visible;
	-webkit-transform: none;
	transform: none;
}

/* ------------------------------------------------------------
 about-projects
------------------------------------------------------------ */
.about-projects {
	grid-template-columns: minmax(0, 450fr) minmax(0, 800fr);
	align-items: start;
	-webkit-column-gap: 5rem ;
	-moz-column-gap: 5rem ;
	column-gap: 5rem ;
}

@media screen and (min-width: 1024px) {
	.about-projects {
		display: grid;
		max-width: calc(100% - 8rem);
		width: 130rem ;
		margin: 24.2rem 0 8.4rem ;
		margin-inline: auto;
	}
}

@media screen and (max-width: 1023px) {
	.about-projects {
		display: block;
		width: 90%;
		margin: 11.6rem 0 13rem ;
		margin-inline: auto;
	}
}

.about-projects__heading {
	top: 14.5rem ;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.about-projects__heading {
		position: sticky;
	}
}

@media screen and (max-width: 1023px) {
	.about-projects__heading {
		position: static;
	}
}

.about-heading__en {
	display: block;
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 400;
	--line-height: 1;
	letter-spacing: 0.06em;
}

.about-heading__en::before, .about-heading__en::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.about-heading__en::before {
	margin-top: var(--font-sans-serif-top);
}

.about-heading__en::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.about-heading__en {
		font-size: var(--font-size18);
	}
}

@media screen and (max-width: 1023px) {
	.about-heading__en {
		font-size: var(--font-size11);
	}
}

.about-heading__ja {
	display: block;
	font-family: var(--font-gothic2);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 400;
}

.about-heading__ja::before, .about-heading__ja::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.about-heading__ja::before {
	margin-top: var(--font-gothic2-top);
}

.about-heading__ja::after {
	margin-bottom: var(--font-gothic2-bottom);
}

@media screen and (min-width: 1024px) {
	.about-heading__ja {
		font-size: var(--font-size42);
		--line-height: 1.2381;
		margin-top: 2.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-heading__ja {
		font-size: var(--font-size20);
		--line-height: 1.3;
		margin-top: 1rem ;
	}
}

.about-projects__link {
	align-items: center;
	justify-content: center;
	gap: 2.4rem ;
	width: 26rem ;
	min-height: 6rem ;
	border-radius: 4rem ;
	border: var(--solid-about-blue);
	background-color: var(--color-about-blue);
	background-image: none;
	color: var(--color-white);
	font-weight: 800;
	font-size: var(--font-size20);
	--line-height: 1;
	margin: 3.8rem 0 0 ;
	margin-inline: auto;
	padding: 1.8rem 2.6rem ;
	transition: background var(--transition-button), color var(--transition-button);
}

@media screen and (min-width: 1024px) {
	.about-projects__link {
		display: flex;
	}
	.about-projects__link.-mobile {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.about-projects__link {
		display: none;
		width: 21.6667rem ;
		min-height: 5rem ;
		gap: 2.2rem ;
		margin-top: 6rem ;
		padding: 1.5rem 3rem ;
		font-size: var(--font-size15);
	}
	.about-projects__link.-mobile {
		display: flex;
	}
}

@media (hover: hover) {
	.about-projects__link:hover:where(body[data-hover-enabled="true"] *, [data-hover-enabled="true"]) {
		background-color: var(--color-white);
		background-image: none;
		color: var(--color-about-blue);
	}
}

.about-projects__link:focus-visible {
	background-color: var(--color-white);
	background-image: none;
	color: var(--color-about-blue);
	outline: 2px solid var(--color-about-blue);
	outline-offset: 0.4rem ;
}

/* ------------------------------------------------------------
 about-project
------------------------------------------------------------ */
.about-project {
	position: relative;
	grid-template-columns: minmax(0, 220fr) minmax(0, 500fr);
	align-items: center;
	-webkit-column-gap: 1.5rem ;
	-moz-column-gap: 1.5rem ;
	column-gap: 1.5rem ;
	background-color: var(--color-white);
	background-image: none;
}

@media screen and (min-width: 1024px) {
	.about-project {
		display: grid;
		border-radius: 4rem ;
		padding: 7.2rem 4rem 5.6rem 3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project {
		display: block;
		border-radius: 3rem ;
		padding: 7rem 2.75rem 3.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-project:last-child .about-project__illustration {
		width: 94%;
	}
}

@media screen and (max-width: 1023px) {
	.about-project:last-child .about-project__illustration {
		width: 16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project:first-child .about-project__illustration {
		width: 14.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project:first-child .about-project__body {
		margin-top: 4.2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-project + .about-project {
		margin-top: 7.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project + .about-project {
		margin-top: 5.4rem ;
	}
}

.about-project__badge {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.about-project__badge {
		top: -2.2rem ;
		left: 9.2rem ;
		width: 9.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project__badge {
		top: -3rem ;
		left: 50%;
		width: 7.4rem ;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 1024px) {
	.about-project__illustration {
		width: 75%;
		margin-inline: auto;
		margin-top: 1.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project__illustration {
		display: block;
		width: 12.8rem ;
		margin: 0 auto;
	}
}

.about-project__title {
	color: var(--color-about-blue);
	font-family: var(--font-gothic2);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 400;
}

.about-project__title::before, .about-project__title::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.about-project__title::before {
	margin-top: var(--font-gothic2-top);
}

.about-project__title::after {
	margin-bottom: var(--font-gothic2-bottom);
}

@media screen and (min-width: 1024px) {
	.about-project__title {
		font-size: var(--font-size44);
		--line-height: 1.36364;
		letter-spacing: -0.025em;
		white-space: nowrap;
	}
}

@media screen and (max-width: 1023px) {
	.about-project__title {
		text-align: center;
		font-size: var(--font-size29);
		--line-height: 1.27586;
		letter-spacing: -0.02em;
		margin-inline: -1rem;
	}
}

.about-project__title small {
	white-space: nowrap;
}

@media screen and (min-width: 1024px) {
	.about-project__title small {
		font-size: var(--font-size30);
		letter-spacing: -0.145em;
	}
}

@media screen and (max-width: 1023px) {
	.about-project__title small {
		display: block;
		font-size: var(--font-size24);
		letter-spacing: -0.02em;
	}
}

.about-project__title small.-separate {
	display: block;
}

.about-project__copy {
	font-weight: 500;
}

@media screen and (min-width: 1024px) {
	.about-project__copy {
		font-size: var(--font-size18);
		--line-height: 2;
		letter-spacing: -0.025em;
		margin-top: 3.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project__copy {
		font-size: var(--font-size13);
		--line-height: 1.76923;
		letter-spacing: -0.025em;
		margin-top: 3.2rem ;
	}
}

/* ------------------------------------------------------------
 about-company
------------------------------------------------------------ */
.about-company {
	background-color: var(--color-white);
	background-image: none;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.about-company {
		max-width: calc(100% - 8rem);
		width: 130rem ;
		border-radius: 4rem ;
		padding: 13rem 8.8rem 17.6rem 13.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-company {
		width: 90%;
		border-radius: 2.2rem ;
		padding: 4.2rem 2rem 8rem ;
	}
}

/* ------------------------------------------------------------
 about-profile
------------------------------------------------------------ */
.about-profile {
	grid-template-columns: minmax(0, 324fr) minmax(0, 750fr);
	align-items: start;
}

@media screen and (min-width: 1024px) {
	.about-profile {
		display: grid;
	}
}

@media screen and (max-width: 1023px) {
	.about-profile {
		display: block;
	}
}

/* ------------------------------------------------------------
 about-history
------------------------------------------------------------ */
.about-history {
	grid-template-columns: minmax(0, 324fr) minmax(0, 750fr);
	align-items: start;
}

@media screen and (min-width: 1024px) {
	.about-history {
		display: grid;
		margin-top: 14.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-history {
		margin-top: 6.6rem ;
		display: block;
	}
}

@media screen and (max-width: 1023px) {
	.about-history .about-table {
		margin-top: 5.3rem ;
	}
}

/* ------------------------------------------------------------
 about-table
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.about-table {
		font-size: var(--font-size18);
		--line-height: 2;
	}
}

@media screen and (max-width: 1023px) {
	.about-table {
		font-weight: 400;
		font-size: var(--font-size13);
		--line-height: 1.76923;
		letter-spacing: -0.025em;
	}
}

@media screen and (min-width: 1024px) {
	.about-table.-history dd .about-text-crop {
		white-space: pre-line;
	}
}

@media screen and (max-width: 1023px) {
	.about-table.-history dd .about-text-crop {
		white-space: normal;
	}
}

@media screen and (min-width: 1024px) {
	.about-table.-history .about-table__row {
		padding-top: 2.7rem ;
		padding-bottom: 2.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-table.-history .about-table__row {
		padding-top: 1.3rem ;
		padding-bottom: 1.2rem ;
	}
}

.about-table.-history .about-table__row:first-child {
	padding-top: 0;
}

.about-table.-history .about-table__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.about-table__row {
	display: grid;
	grid-template-columns: var(--table-label-width) minmax(0, 1fr);
	border-bottom: var(--solid-about);
}

@media screen and (min-width: 1024px) {
	.about-table__row {
		--table-label-width: 14rem ;
		padding: 2.8rem 2rem 2.7rem 2.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-table__row {
		--table-label-width: 6.3rem ;
		border-bottom-width: .5px;
		padding: 1.2rem 0 1.2rem 1.1rem ;
	}
}

.about-table__row:first-child {
	padding-top: 0;
}

.about-table__row dt {
	font-weight: 700;
}

.about-table__row dd {
	min-width: 0;
	overflow-wrap: anywhere;
}

.about-table__row a {
	transition: opacity var(--transition-hover);
}

@media (hover: hover) {
	.about-table__row a:hover:where(body[data-hover-enabled="true"] *, [data-hover-enabled="true"]) {
		opacity: var(--hover-opacity);
	}
}

@media screen and (max-width: 1023px) {
	.about-table__row.-business {
		--line-height: 1.38462;
	}
}

/* ------------------------------------------------------------
 about-businesses
------------------------------------------------------------ */
.about-businesses {
	list-style: none;
}

.about-businesses li {
	display: inline;
}

@media screen and (min-width: 1024px) {
	.about-businesses li:not(:last-child)::after {
		content: '　';
	}
}

@media screen and (max-width: 1023px) {
	.about-businesses li:not(:last-child)::after {
		content: '';
	}
}

@media screen and (max-width: 1023px) {
	.about-businesses li::before {
		content: '・';
	}
}

/* ------------------------------------------------------------
 about-gallery
------------------------------------------------------------ */
.about-gallery {
	position: relative;
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.about-gallery {
		border-radius: 1.8rem ;
		margin-top: 4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-gallery {
		border-radius: 0.9rem ;
		margin-top: 1.9rem ;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.about-gallery {
		width: 100%;
		margin-inline: auto;
	}
}

.about-gallery:focus-visible {
	outline: 2px solid var(--color-about-blue);
	outline-offset: 0.4rem ;
}

.about-gallery button:focus-visible {
	outline-color: var(--color-white);
	outline: 2px solid var(--color-about-blue);
	outline-offset: 0.4rem ;
}

.about-gallery__slides {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-gallery__slides {
		aspect-ratio: 750 / 420;
	}
}

@media screen and (max-width: 1023px) {
	.about-gallery__slides {
		aspect-ratio: 638.717 / 420.487;
	}
}

.about-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-reveal), visibility var(--transition-reveal);
}

@media (prefers-reduced-motion: reduce) {
	.about-gallery__slide {
		transition: none;
	}
}

.about-gallery__slide.is-current {
	opacity: 1;
	visibility: visible;
}

.about-gallery__slide img {
	position: absolute;
	max-width: none;
}

@media screen and (min-width: 1024px) {
	.about-gallery__slide[data-slide="0"] img {
		top: -43.095855%;
		left: -19.028101%;
		width: 142.397498%;
	}
}

@media screen and (max-width: 1023px) {
	.about-gallery__slide[data-slide="0"] img {
		top: -29.190784%;
		left: -19.028103%;
		width: 142.397507%;
	}
}

@media screen and (min-width: 1024px) {
	.about-gallery__slide[data-slide="1"] img {
		top: -26.301378%;
		left: -20.975200%;
		width: 124.928732%;
	}
}

@media screen and (max-width: 1023px) {
	.about-gallery__slide[data-slide="1"] img {
		top: -14.904780%;
		left: -20.975202%;
		width: 124.928740%;
	}
}

.about-gallery__controls {
	position: absolute;
	display: none;
	align-items: center;
}

@media screen and (min-width: 1024px) {
	.about-gallery__controls {
		bottom: 0.5442rem ;
		left: 1.5176rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-gallery__controls {
		bottom: 0.0067rem ;
		left: 0.996rem ;
	}
}

.about-gallery.js-slider.is-set .about-gallery__controls {
	display: flex;
}

.about-gallery__dot {
	display: grid;
	place-items: center;
	color: var(--color-white);
	cursor: pointer;
}

@media screen and (min-width: 1024px) {
	.about-gallery__dot {
		width: 1.6496rem ;
		height: 2.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-gallery__dot {
		width: 0.8248rem ;
		height: 1.6rem ;
	}
}

.about-gallery__dot::before {
	content: '';
	border-radius: 50%;
	background-color: var(--color-white);
	background-image: none;
}

@media screen and (min-width: 1024px) {
	.about-gallery__dot::before {
		width: 0.8rem ;
		height: 0.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-gallery__dot::before {
		width: 0.4rem ;
		height: 0.4rem ;
	}
}

.about-gallery__dot[aria-pressed='true']::before {
	background-color: var(--color-about-blue);
	background-image: none;
}

/* ------------------------------------------------------------
 about-heading
------------------------------------------------------------ */
@media screen and (max-width: 1023px) {
	.about-heading {
		text-align: center;
	}
}

@media screen and (max-width: 1023px) {
	.about-projects__list {
		margin-top: 8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-project__body {
		margin-top: 2.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-profile__body {
		margin-top: 3.7rem ;
	}
}

@-webkit-keyframes about-reveal {
	from {
		opacity: 0;
		-webkit-transform: translateY(2rem);
		transform: translateY(2rem);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes about-reveal {
	from {
		opacity: 0;
		-webkit-transform: translateY(2rem);
		transform: translateY(2rem);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}