@charset "utf-8";

/**
 * Home
 * ---------------------------------------- */
.home_visual {
	display: grid;
	position: relative;
	height: max(640vw / 14, 480px);
	padding: 0 calc(80vw / 14);
}
.home_visual .slideshow {
	z-index: -1;
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.home_visual .image * {
	width: 100%;
	height: 100%;
}
.home_visual .image img {
	object-fit: cover;
	height: calc(100% + 60px);
	margin-top: -30px;
}
.home_visual .title {
	z-index: 1;
	position: relative;
	width: calc(473vw / 14);
	pointer-events: none;
}
.home_visual .title img,
.home_visual .title svg {
	width: 100%;
	height: auto;
}
.home_visual .title img {
	oapcity: 0; /* MEMO: js で svg に置き換えるので */
}

@media print, (min-width: 768px) {
	.home_visual {
		align-items: center;
	}
}
@media screen and (max-width: 767px) {
	.home_visual {
		align-items: end;
		height: calc(460vw / 3.75);
	}
	.home_visual .title {
		width: calc(218vw / 3.75);
	}
	.home_visual .image img {
		height: calc(100% + 20vw / 3.75);
		margin-top: calc(-20vw / 3.75);
	}
	.home_visual .title {
		margin-bottom: calc(24vw / 3.75);
	}
}

/* :::::: Graph Objects :::::: */
.home_visual.is-anim svg {
	overflow: visible;
}
.home_visual .obj-circlegraph,
.home_visual .obj-bargraph,
.home_visual .obj-pointgraph {
	z-index: 1;
}
.home_visual .obj-circlegraph {
	backface-visibility: visible;
}
.home_visual .obj-circlegraph .obj {
	--start: inherit;
	--end: inherit;
}
.home_visual .obj-bargraph .obj,
.home_visual .obj-pointgraph .obj {
	width: 100%;
	height: 100%;
}
.home_visual .obj-circlegraph.-o1 {
	/* --start: 72%;
	--end: 86%; */
	--size: calc(290vw / 14);
}
.home_visual .obj-circlegraph.-o2 {
	/* --start: 85%;
	--end: 91%; */
	--size: calc(220vw / 14);
}
.home_visual .obj-circlegraph.-o4 {
	/* --start: 56%;
	--end: 73%; */
	--size: calc(80vw / 14);
}
.home_visual .obj-bargraph {
	width: calc(184vw / 14);
	height: calc(288vw / 14);
}
.home_visual .obj-pointgraph {
	width: calc(200vw / 14);
}
.home_visual .obj-pointgraph.-o1 use {
	transform: rotate(180deg);
}
.home_visual .obj-pointgraph.-o2 use {
	transform: rotate(150deg);
}

@media print, (min-width: 768px) {
	.home_visual .obj-circlegraph.-o1 { top: -10%; right: 6%; }
	.home_visual .obj-circlegraph.-o2 { bottom: -18%; left: 20%; }
	.home_visual .obj-circlegraph.-o4 { top: 50%; right: 20%; }
	.home_visual .obj-bargraph        { right: 8%; bottom: 0; }
	.home_visual .obj-pointgraph.-o1  { top: -2%; left: 5%; }
	.home_visual .obj-pointgraph.-o2  { bottom: -10%; right: 0; }
	
	/* MEMO: デスクトップのみ */
	.home_visual .obj-circlegraph.-o3 {
		/* --start: 26%;
		--end: 47%; */
		--size: calc(90vw / 14);
		top: -8%;
		left: 25%;
	}
	.home_visual .obj-circlegraph.-o5 {
		/* --start: 60%;
		--end: 75%; */
		--size: calc(34vw / 14);
		top: 12%;
		left: 34%;
	}
	/* scrollTrigger 分ズラす */
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o1 { top: calc(-10% - 40px); }
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o2 { bottom: calc(-18% + 40px); }
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o4 { top: calc(50% - 40px); }
	body:not(.is-smooth) .home_visual .obj-bargraph        { bottom: 40px; }
	body:not(.is-smooth) .home_visual .obj-pointgraph.-o1  { top: calc(-2% - 40px); }
	body:not(.is-smooth) .home_visual .obj-pointgraph.-o2  { bottom: calc(-10% + 40px); }
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o3 { top: calc(-8% - 40px); }
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o5 { top: calc(12% - 40px); }
}
@media screen and (max-width: 767px) {
	.home_visual .obj-circlegraph.-o3,
	.home_visual .obj-circlegraph.-o5 { display: none; }
	.home_visual .obj-circlegraph.-o1 { --size: calc(100vw / 3.75); }
	.home_visual .obj-circlegraph.-o2 { --size: calc(48vw / 3.75); }
	.home_visual .obj-circlegraph.-o4 { --size: calc(29vw / 3.75); }
	.home_visual .obj-bargraph { width: calc(99vw / 3.75); height: calc(152vw / 3.75); }
	.home_visual .obj-pointgraph.-o1 { width: calc(98vw / 3.75); }
	.home_visual .obj-pointgraph.-o2 { width: calc(134vw / 3.75); }
	
	.home_visual .obj-circlegraph.-o1 { top: 10%; left: 4%; }
	.home_visual .obj-circlegraph.-o2 { top: 48%; left: 25%; }
	.home_visual .obj-circlegraph.-o4 { top: 58%; right: 4%; }
	.home_visual .obj-bargraph { right: 8%; bottom: 0; }
	
	.home_visual .obj-pointgraph.-o1 { top: 40%; left: 4%; }
	.home_visual .obj-pointgraph.-o2 { top: 96%; right: 6%; }
	.home_visual .obj-pointgraph.-o1 use { transform: rotate(160deg); }
	.home_visual .obj-pointgraph.-o2 use { transform: rotate(200deg); }
	
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o1 { top: calc(10% - 40px); }
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o2 { top: calc(48% - 40px); }
	body:not(.is-smooth) .home_visual .obj-circlegraph.-o4 { top: calc(58% - 40px); }
	body:not(.is-smooth) .home_visual .obj-bargraph        { bottom: 40px; }
	body:not(.is-smooth) .home_visual .obj-pointgraph.-o1  { top: calc(40% - 40px); }
	body:not(.is-smooth) .home_visual .obj-pointgraph.-o2  { top: calc(96% - 40px); }
}


/** Motion
 * MEMO: obj-circlegraph の transform は GSAP で制御してるのでマスクアニメーションのみ
 * -------------------------------------------------- */

/* :::::: 出現前 :::::: */
.home_visual.is-standby .slideshow img {
	opacity: 0;
	transform: scale(1.08);
	filter: brightness(2);
}
.home_visual.is-standby .obj-circlegraph,
.home_visual:not(.is-standby) .obj-circlegraph {
	--end: 100%; /* --end はアニメーションしない */
}
.home_visual.is-standby .obj-circlegraph {
	--start: 0%;
}
.home_visual.is-standby .obj-circlegraph .obj {
	opacity: 0;
	transform: scale(1.2) rotate(180deg);
}
.home_visual.is-standby .obj-circlegraph.-o3 .obj {
	transform: scale(1.2) rotate(90deg);
}
.home_visual.is-standby .obj-bargraph .obj {
	opacity: 0;
	transform-origin: 50% 100%;
	transform: scaleY(0);
}
.home_visual.is-standby .obj-pointgraph.-o1 .obj,
.home_visual.is-standby .obj-pointgraph.-o2 .obj {
	opacity: 0;
	transform: scale(.9);
}

/* :::::: 出現後 :::::: */
.home_visual:not(.is-standby) .obj-circlegraph.-o1 { --start: 86%; }
.home_visual:not(.is-standby) .obj-circlegraph.-o2 { --start: 94%; }
.home_visual:not(.is-standby) .obj-circlegraph.-o4 { --start: 83%; }

.home_visual:not(.is-standby) .obj-circlegraph.-o3 { --start: 79%; }
.home_visual:not(.is-standby) .obj-circlegraph.-o5 { --start: 85%; }

/* MEMO: てっぺんから左方向に割れ目を作るので、正しい角度に割れ目が来るよう、円グラフ自体を回転＋中身の画像を逆回転 */
.home_visual:not(.is-standby) .obj-circlegraph.-o1 .obj { transform: rotate(calc(36deg * -1.4)); } /* 1.4 = 100% - var(--end) */
.home_visual:not(.is-standby) .obj-circlegraph.-o1 .obj use { transform: rotate(calc(36deg * 1.4)); }
.home_visual:not(.is-standby) .obj-circlegraph.-o2 .obj { transform: rotate(calc(36deg * -.9)); }
.home_visual:not(.is-standby) .obj-circlegraph.-o2 .obj use { transform: rotate(calc(36deg * .9)); }
.home_visual:not(.is-standby) .obj-circlegraph.-o4 .obj { transform: rotate(calc(36deg * -2.7)); }
.home_visual:not(.is-standby) .obj-circlegraph.-o4 .obj use { transform: rotate(calc(36deg * 2.7)); }

.home_visual:not(.is-standby) .obj-circlegraph.-o3 .obj { transform: rotate(calc(36deg * -5.3)); }
.home_visual:not(.is-standby) .obj-circlegraph.-o3 .obj use { transform: rotate(calc(36deg * 5.3)); }
.home_visual:not(.is-standby) .obj-circlegraph.-o5 .obj { transform: rotate(calc(36deg * -2.5)); }
.home_visual:not(.is-standby) .obj-circlegraph.-o5 .obj use { transform: rotate(calc(36deg * 2.5)); }

/* :::::: アニメーションするプロパティ :::::: */
.home_visual.is-anim .slideshow img {
	transition: opacity 1s, transform 2s var(--easeOut), filter 1.4s var(--easeOut);
	will-change: opacity, transform, filter;
}
.home_visual.is-anim .obj-circlegraph .obj {
	transform-origin: 50% 50%;
	transition: opacity .8s, transform 1s var(--easeGraph), --start 1s var(--easeGraph);
	will-change: opacity, transform, -webkit-mask, mask;
}
.home_visual.is-anim .obj-circlegraph .obj use {
	transition: transform 1.2s var(--easeGraph);
	will-change: transform;
}
.home_visual.is-anim .obj-bargraph .obj,
.home_visual.is-anim .obj-pointgraph.-o1 .obj,
.home_visual.is-anim .obj-pointgraph.-o2 .obj {
	transition: opacity .8s, transform 1.2s var(--easeOut);
}

/* タイミング */
.home_visual.is-anim .slideshow img { transition-delay: 1.6s;}
.home_visual.is-anim .obj-circlegraph.-o1 .obj,
.home_visual.is-anim .obj-circlegraph.-o1 .obj use { transition-delay: 1.2s; }
.home_visual.is-anim .obj-circlegraph.-o2 .obj,
.home_visual.is-anim .obj-circlegraph.-o2 .obj use { transition-delay: 1.4s; }
.home_visual.is-anim .obj-circlegraph.-o3 .obj,
.home_visual.is-anim .obj-circlegraph.-o3 .obj use { transition-delay: 1.6s; }
.home_visual.is-anim .obj-circlegraph.-o4 .obj,
.home_visual.is-anim .obj-circlegraph.-o4 .obj use { transition-delay: 1.7s; }
.home_visual.is-anim .obj-circlegraph.-o5 .obj,
.home_visual.is-anim .obj-circlegraph.-o5 .obj use { transition-delay: 1.8s; }
.home_visual.is-anim .obj-bargraph .obj,
.home_visual.is-anim .obj-pointgraph.-o1 .obj,
.home_visual.is-anim .obj-pointgraph.-o2 .obj {
	transition-delay: 1.8s;
}

/* タイトル */
.home_visual .title {
	--easeExpo: cubic-bezier(.13,1,.3,1);
}
.home_visual .title svg {
	overflow: visible;
}
.home_visual .title .colon1 .-c1 { transform-origin: 8px 218px; }
.home_visual .title .colon1 .-c2 { transform-origin: 25px 218px; }
.home_visual .title .colon2 .-c1 { transform-origin: 423px 207px; }
.home_visual .title .colon2 .-c2 { transform-origin: 441px 207px; }

.home_visual.is-anim .title path,
.home_visual.is-anim .title circle,
.home_visual.is-anim .title polygon,
.home_visual.is-anim .title polyline {
	transition: opacity .4s, transform 1.2s var(--easeExpo);
	transition-delay: .1s;
	will-change: opacity, transform;
	backface-visibility: hidden;
}
.home_visual.is-anim .title circle {
	transition-duration: .2s, .4s;
	transition-timing-function: cubic-bezier(.1,1.6,.6,1);
}
.home_visual.is-anim .title .from g {
	transition: transform .8s var(--easeExpo);
	will-change: transform;
}
.home_visual.is-standby .title path,
.home_visual.is-standby .title circle,
.home_visual.is-standby .title polygon,
.home_visual.is-standby .title polyline { opacity: 0; }

/* Surprise */
.home_visual .title .surprise .S path { transform-origin: 51px 49px; }
.home_visual .title .surprise .u path:nth-child(1) { transform-origin: 152px 37px; }
.home_visual .title .surprise .u path:nth-child(2) { transform-origin: 142px 83px; }
.home_visual .title .surprise .r1 polyline { transform-origin: 179px 100px; }
.home_visual .title .surprise .r1 path { transform-origin: 184px 65px; }
.home_visual .title .surprise .p path:nth-child(1) { transform-origin: 224px 37px; }
.home_visual .title .surprise .p path:nth-child(2) { transform-origin: 230px 69px; }
.home_visual .title .surprise .r2 polyline { transform-origin: 292px 100px; }
.home_visual .title .surprise .r2 path { transform-origin: 296px 65px; }
.home_visual .title .surprise .i path { transform-origin: 340px 100px; }
.home_visual .title .surprise .i circle { transform-origin: 340px 26px; }
.home_visual .title .surprise .s path { transform-origin: 384px 69px; }
.home_visual .title .surprise .e path:nth-child(1) { transform-origin: 448px 69px; }
.home_visual .title .surprise .e path:nth-child(2) { transform-origin: 473px 69px; }

.home_visual.is-standby .title .surprise .S path:nth-child(1) { transform: rotateX(45deg) rotateY(60deg) translate(-240px, 60px); }
.home_visual.is-standby .title .surprise .S path:nth-child(2) { transform: rotateX(60deg) rotateY(60deg) translate(100px, -200px); }
.home_visual.is-standby .title .surprise .u path:nth-child(1) { transform: translateY(-100%); }
.home_visual.is-standby .title .surprise .u path:nth-child(2) { transform: rotateX(-50deg) rotateY(50deg) translate(-100px, 200px); }
.home_visual.is-standby .title .surprise .r1 polyline { transform: scaleY(0); }
.home_visual.is-standby .title .surprise .r1 path { transform: rotateX(-45deg) rotateY(20deg) translate(-80px, -200px); }
.home_visual.is-standby .title .surprise .p path:nth-child(1) { transform: scaleY(0); }
.home_visual.is-standby .title .surprise .p path:nth-child(2) { transform: rotateX(-30deg) rotateY(-30deg) translate(40px, -300px); }
.home_visual.is-standby .title .surprise .r2 polyline { transform: scaleY(0); }
.home_visual.is-standby .title .surprise .r2 path { transform: rotateX(-40deg) rotateY(-45deg) translate(200px, 30px); }
.home_visual.is-standby .title .surprise .i circle { transform: scale(0); }
.home_visual.is-standby .title .surprise .i path { transform: translateY(100%); }
.home_visual.is-standby .title .surprise .s path:nth-child(1) { transform: rotateX(-40deg) rotateY(-40deg) translate(240px, 80px); }
.home_visual.is-standby .title .surprise .s path:nth-child(2) { transform: rotateX(20deg) rotateY(80deg) translate(60px, -240px); }
.home_visual.is-standby .title .surprise .e path:nth-child(1) { transform: rotateX(60deg) rotateZ(-41deg) translate(20px, 100px); }
.home_visual.is-standby .title .surprise .e path:nth-child(2) { transform: translateX(60%); }

/* from */
.home_visual.is-standby .title .from g { transform: translateY(104%); }

/* Analyze */
.home_visual .title .analyze .A path { transform-origin: 34px 256px; }
.home_visual .title .analyze .A polygon { transform-origin: 60px 256px; }
.home_visual .title .analyze .n path:nth-child(1) { transform-origin: 118px 287px; }
.home_visual .title .analyze .n path:nth-child(2) { transform-origin: 135px 287px; }
.home_visual .title .analyze .a path { transform-origin: 207px 256px; }
.home_visual .title .analyze .l path { transform-origin: 252px 256px; }
.home_visual .title .analyze .y path { transform-origin: 301px 268px; }
.home_visual .title .analyze .z polygon { transform-origin: 359px 256px; }
.home_visual .title .analyze .e path:nth-child(1) { transform-origin: 418px 256px; }
.home_visual .title .analyze .e path:nth-child(2) { transform-origin: 407px 256px; }

.home_visual.is-standby .title .A path { transform: translateX(-100%); }
.home_visual.is-standby .title .A polygon { transform: rotateX(60deg) rotateY(60deg) translate(-200px, -60px); }
.home_visual.is-standby .title .analyze .n path:nth-child(1) { transform: translateY(100%); }
.home_visual.is-standby .title .analyze .n path:nth-child(2) { transform: rotateX(50deg) rotateY(20deg) translate(-200px, -80px); }
.home_visual.is-standby .title .analyze .a path { transform: rotateX(-60deg) rotateY(60deg) translate(-160px, 160px); }
.home_visual.is-standby .title .analyze .l path { transform: rotateX(-60deg) rotateY(20deg) translate(100px, 240px); }
.home_visual.is-standby .title .analyze .y path { transform: rotateY(-45deg) translate(-200px, -120px); }
.home_visual.is-standby .title .analyze .z polygon { transform: rotateX(-60deg) rotateY(-60deg) translate(80px, -180px); }
.home_visual.is-standby .title .analyze .e path:nth-child(1) { transform: rotateX(40deg) rotateY(-40deg) translate(200px, -200px); }
.home_visual.is-standby .title .analyze .e path:nth-child(2) { transform: translateX(50%); }

.home_visual.is-anim .title .surprise .S path              { transition-delay: .1s; }
.home_visual.is-anim .title .surprise .u path:nth-child(1) { transition-delay: .2s; }
.home_visual.is-anim .title .surprise .u path:nth-child(2) { transition-delay: .3s; }
.home_visual.is-anim .title .surprise .r1 polyline         { transition-delay: .5s; } /* bar */
.home_visual.is-anim .title .surprise .r1 path             { transition-delay: .4s; }
.home_visual.is-anim .title .surprise .p path:nth-child(1) { transition-delay: .6s; } /* bar */
.home_visual.is-anim .title .surprise .p path:nth-child(2) { transition-delay: .1s; }
.home_visual.is-anim .title .surprise .r2 polyline         { transition-delay: .7s; } /* bar */
.home_visual.is-anim .title .surprise .r2 path             { transition-delay: .2s; }
.home_visual.is-anim .title .surprise .i path              { transition-delay: .8s; }
.home_visual.is-anim .title .surprise .i circle            { transition-delay: .9s; }
.home_visual.is-anim .title .surprise .s path              { transition-delay: .6s; }
.home_visual.is-anim .title .surprise .e path:nth-child(1) { transition-delay: .6s; }
.home_visual.is-anim .title .surprise .e path:nth-child(2) { transition-delay: .4s; }

.home_visual.is-anim .title .from .f { transition-delay: .4s; }
.home_visual.is-anim .title .from .r { transition-delay: .5s; }
.home_visual.is-anim .title .from .o { transition-delay: .6s; }
.home_visual.is-anim .title .from .m { transition-delay: .7s; }

.home_visual.is-anim .title .analyze .A path               { transition-delay: .5s; }
.home_visual.is-anim .title .analyze .A polygon            { transition-delay: .6s; }
.home_visual.is-anim .title .analyze .n path:nth-child(1)  { transition-delay: .7s; }
.home_visual.is-anim .title .analyze .n path:nth-child(2)  { transition-delay: .8s; }
.home_visual.is-anim .title .analyze .a path               { transition-delay: .9s; }
.home_visual.is-anim .title .analyze .l path               { transition-delay: .5s; }
.home_visual.is-anim .title .analyze .y path               { transition-delay: .6s; }
.home_visual.is-anim .title .analyze .z polygon            { transition-delay: .7s; }
.home_visual.is-anim .title .analyze .e path:nth-child(1)  { transition-delay: .8s; }
.home_visual.is-anim .title .analyze .e path:nth-child(2)  { transition-delay: .9s; }

/* colon */
.home_visual.is-standby .title .colon1 path,
.home_visual.is-standby .title .colon2 path {
	opacity: 0;
	transform: rotate(-90deg);
}
.home_visual.is-anim .title .colon1 path,
.home_visual.is-anim .title .colon2 path {
	transition-timing-function: cubic-bezier(.2,1.6,.6,1);
}
.home_visual.is-anim .title .colon1 .-c1 { transition-delay: 1.1s; }
.home_visual.is-anim .title .colon1 .-c2 { transition-delay: 1.2s; }
.home_visual.is-anim .title .colon2 .-c1 { transition-delay: 1.3s; }
.home_visual.is-anim .title .colon2 .-c2 { transition-delay: 1.4s; }


/**
 * Intro
 * ---------------------------------------- */
.home_intro {
	display: grid;
	position: relative;
	max-width: calc(1080px + var(--sidegap) * 2);
	margin: 0 auto;
	padding: 200px var(--sidegap) 160px;
	border-image: linear-gradient(to top, #bebebd4c, #cacaca4c) 0 fill / 0 / 0 50vw;
}
.intro_title,
.intro_lead {
	z-index: 1;
	position: relative;
}
.intro_title .js-icosahedron {
	width: 240px;
	height: 240px;
}
.intro_title .js-icosahedron canvas {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.intro_lead {
	padding: 64px 48px;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: .1em;
}
.intro_lead p + p {
	margin-top: 1em;
}
.intro_lead .c-bracket {
	left: calc(var(--hshift) * -1);
}

@media print, (min-width: 768px) {
	.home_intro {
		grid-template-columns: 5fr 4fr;
		grid-auto-flow: dense;
		align-items: center;
	}
	.intro_title {
		grid-column: 2;
		padding-right: calc(24vw / 7.68);
	}
	.intro_title .js-icosahedron {
		margin: 0 auto 40px;
	}
	.intro_lead {
		grid-column: 1;
		line-height: 2.2;
		white-space: nowrap;
	}
}
@media screen and (max-width: 1199px) {
	.intro_lead {
		padding: max(64vw / 12, 32px) max(48vw / 12, 24px);
		font-size: max(20vw / 12, .75rem);
	}
}
@media screen and (max-width: 767px) {
	.home_intro {
		padding-block: calc(80vw / 3.75);
	}
	.intro_title {
		grid-row: 2;
		display: grid;
		grid-template-columns: calc(120vw / 3.75) 1fr;
		align-items: center;
		gap: calc(24vw / 3.75);
		max-width: calc(100% - 24vw / 3.75);
		margin: 0 auto;
	}
	.intro_title .js-icosahedron {
		width: calc(120vw / 3.75);
		height: calc(120vw / 3.75);
	}
	.intro_lead {
		width: fit-content;
		margin: 0 auto;
		font-size: max(20vw / 7.68, .75rem);
	}
}
@media screen and (max-width: 480px) {
	.intro_lead {
		padding-inline: 0;
	}
	.intro_lead .c-bracket {
		--v: 72px;
		--vshift: calc(-40vw / 3.75);
		top: -2em;
	}
}
@media screen and (max-width: 359px) {
	.intro_lead {
		letter-spacing: 0;
	}
}

/* Inview */
.intro_lead .l {
	opacity: 0;
	transform: translateY(1em);
}
.intro_lead .is-inview {
	display: inline-block;
	transition: opacity .8s, transform .8s var(--easeOut);
}

/* :::::: Bg graph :::::: */
.home_intro .bg {
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 90%;
	height: 80%;
	opacity: .3;
}
.home_intro .bg rect {
	fill: url(#intrograd);
	transform-origin: 50% 0%;
}

@media screen and (max-width: 767px) {
	.home_intro .bg {
		width: 80%;
		height: 50%;
	}
}

/* Inview */
.home_intro.js-inview:not(.is-inview) .bg rect {
	transform: scaleY(0);
}
.home_intro.is-inview .bg rect {
	transition: transform 1s var(--easeOut);
	will-change: transform;
}
.home_intro.is-inview .bg rect:nth-child(1) { transition-delay: .1s; }
.home_intro.is-inview .bg rect:nth-child(2) { transition-delay: .15s; }
.home_intro.is-inview .bg rect:nth-child(3) { transition-delay: .2s; }
.home_intro.is-inview .bg rect:nth-child(4) { transition-delay: .25s; }
.home_intro.is-inview .bg rect:nth-child(5) { transition-delay: .3s; }
.home_intro.is-inview .bg rect:nth-child(6) { transition-delay: .35s; }
.home_intro.is-inview .bg rect:nth-child(7) { transition-delay: .4s; }
.home_intro.is-inview .bg rect:nth-child(8) { transition-delay: .45s; }
.home_intro.is-inview .bg rect:nth-child(9) { transition-delay: .5s; }
.home_intro.is-inview .bg rect:nth-child(10) { transition-delay: .55s; }
.home_intro.is-inview .bg rect:nth-child(11) { transition-delay: .6s; }
.home_intro.is-inview .bg rect:nth-child(12) { transition-delay: .65s; }
.home_intro.is-inview .bg rect:nth-child(13) { transition-delay: .7s; }
.home_intro.is-inview .bg rect:nth-child(14) { transition-delay: .75s; }
.home_intro.is-inview .bg rect:nth-child(15) { transition-delay: .8s; }
.home_intro.is-inview .bg rect:nth-child(16) { transition-delay: .85s; }
.home_intro.is-inview .bg rect:nth-child(17) { transition-delay: .9s; }
.home_intro.is-inview .bg rect:nth-child(18) { transition-delay: .95s; }
.home_intro.is-inview .bg rect:nth-child(19) { transition-delay: 1s; }
.home_intro.is-inview .bg rect:nth-child(20) { transition-delay: 1.05s; }
.home_intro.is-inview .bg rect:nth-child(21) { transition-delay: 1.1s; }


/**
 * Section
 * ---------------------------------------- */
.home_section {
	max-width: calc(980px + var(--sidegap) * 2);
	padding: 100px var(--sidegap);
	margin: 100px auto 0;
}
.home_section > .hgroup {
	position: relative;
}
.home_section .hgroup .c-bracket {
	top: -64px;
	left: -80px;
}
.home_section .lead {
	margin-top: 2em;
	font-weight: 700;
}
.home_section .c-more {
	margin-top: 1.25em;
}

@media screen and (max-width: 767px) {
	.home_section {
		width: fit-content;
		width: calc(312vw / 3.75);
		padding: calc(40vw / 3.75) 0;
		margin-block: calc(80vw / 3.75);
	}
	.home_section .hgroup .c-bracket {
		--v: 56px;
		left: calc(var(--sidegap) * -1);
	}
	.home_section .lead {
		font-size: max(16vw / 3.75, .75rem);
	}
}

/* :::::: About Us :::::: */
.home_about {
	display: grid;
	z-index: 0;
	position: relative;
	margin-bottom: 100px;
}
.home_about .c-slider {
	position: relative;
}
.home_about .c-slider .label {
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: min(22vw / 10.8, 1.375rem);
	letter-spacing: .18em;
}
.home_about .num {
	width: auto;
	height: 2.4em;
	fill: currentcolor;
}

@media print, (min-width: 768px) {
	.home_about {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}
	.home_about .hgroup .title {
		width: min(429vw / 10.8, 429px);
	}
	.home_about .c-slider {
		max-width: 100%;
		width: min(490vw / 10.8, 490px);
	}
}
@media screen and (max-width: 767px) {
	.home_about {
		gap: calc(24vw / 3.75);
	}
	.home_about .title {
		width: calc(224vw / 3.75);
	}
	.home_about .c-slider .label {
		font-size: max(20vw / 3.75, 1.25rem);
	}
}

/* Graph Objects */
.home_about .obj-circlegraph.-o1 {
	/* --start: 85%;
	--end: 91%; */
	--size: min(380vw / 10.8, 380px);
}
.home_about .obj-circlegraph.-o2 {
	z-index: 1;
	/* --start: 56%;
	--end: 85%; */
	--size: 150px;
}
.home_about .obj-circlegraph.-o3 {
	z-index: 1;
	/* --start: 55%;
	--end: 70%; */
	--size: 90px;
}
.home_about .obj-bargraph .obj {
	width: 124px;
	height: 290px;
}
.home_about .obj-pointgraph .obj {
	width: 216px;
}

@media print, (min-width: 768px) {
	.home_about .obj-circlegraph.-o1 { top: -160px; right: calc(var(--sidegap) * -2); }
	.home_about .obj-circlegraph.-o2 { bottom: 40px; left: 41%; }
	.home_about .obj-circlegraph.-o3 { bottom: -24px; left: 58%; }
	.home_about .obj-bargraph { top: 34%; right: -112px; }
	.home_about .obj-pointgraph { bottom: 0; right: -40px; }
}
@media screen and (max-width: 767px) {
	.home_about .obj-circlegraph.-o1 { --size: calc(136vw / 3.75); }
	.home_about .obj-circlegraph.-o2 { --size: calc(136vw / 3.75); }
	.home_about .obj-circlegraph.-o3 { --size: calc(54vw / 3.75); }
	.home_about .obj-circlegraph.-o1 { right: calc(-16vw / 3.75); bottom: calc(100% - 24vw / 3.75); }
	.home_about .obj-circlegraph.-o2 { bottom: 0; left: -16%; }
	.home_about .obj-circlegraph.-o3 { top: 96%; left: 38%; }
	.home_about .obj-bargraph {
		right: 0;
		bottom: 10%;
		width: calc(124vw / 3.75);
		height: calc(290vw / 3.75);
	}
	.home_about .obj-pointgraph {
		right: 0;
		bottom: 0;
		width: calc(120vw / 3.75);
	}
}

/* Inview */
.home_about .obj-circlegraph .obj {
	--end: 100%;
}
.home_about .obj-circlegraph.js-inview:not(.is-inview) .obj {
	--start: 0%;
	opacity: 0;
	transform: scale(.6) rotate(-180deg);
}
.home_about .obj-bargraph.js-inview:not(.is-inview) .obj,
.home_about .obj-pointgraph.js-inview:not(.is-inview) .obj {
	opacity: 0;
	transform: translateY(40px);
}
.home_about .obj-circlegraph .obj use {
	transition: transform 1.5s var(--easeGraph);
	will-change: transform;
}
.home_about .obj-circlegraph.-o1 .obj { --start: 94%; } /* MEMO: 94% = 100% + (var(--start) - var(--end)) */
.home_about .obj-circlegraph.-o2 .obj { --start: 71%; }
.home_about .obj-circlegraph.-o3 .obj { --start: 85%; }
.home_about .obj-circlegraph.-o1 .obj { transform: rotate(calc(36deg * -.9)); } /* MEMO: -.9 = var(--end) - 100% */
.home_about .obj-circlegraph.-o2 .obj { transform: rotate(calc(36deg * -1.5)); }
.home_about .obj-circlegraph.-o3 .obj { transform: rotate(calc(36deg * -3)); }
.home_about .obj-circlegraph.-o1 .obj use { transform: rotate(calc(36deg * .9)); }
.home_about .obj-circlegraph.-o2 .obj use { transform: rotate(calc(36deg * 1.5)); }
.home_about .obj-circlegraph.-o3 .obj use { transform: rotate(calc(36deg * 3)); }
.home_about .obj-circlegraph.js-inview.is-inview .obj {
	transition: opacity 1s, transform 1s var(--easeGraph), --start 1s var(--easeGraph);
	will-change: opacity, background, -webkit-mask, mask;
}
.home_about .obj-bargraph.js-inview.is-inview .obj,
.home_about .obj-pointgraph.js-inview.is-inview .obj {
	transition: opacity 1s, transform 1s var(--easeOut);
	will-change: opacity, transform;
}
.home_about .obj-circlegraph.-o1.js-inview.is-inview .obj { transition-delay: .1s; }
.home_about .obj-circlegraph.-o2.js-inview.is-inview .obj { transition-delay: .3s; }
.home_about .obj-circlegraph.-o3.js-inview.is-inview .obj { transition-delay: .5s; }
.home_about .obj-bargraph.js-inview.is-inview .obj { transition-delay: .6s; }
.home_about .obj-pointgraph.js-inview.is-inview .obj { transition-delay: .8s; }

/* :::::: Interview :::::: */
.home_interview {
	position: relative;
}
.home_interview .hgroup .title {
	padding-left: .5em;
}

@media print, (min-width: 768px) {
	.home_interview .hgroup .c-bracket {
		--v: 156px;
		--h: 300px;
		--vshift: -88px;
	}
	.home_interview .hgroup .title {
		width: min(609vw / 10.8, 609px);
	}
}

/* Graph Objects */
.home_interview .obj-bargraph {
	width: 266px;
	height: 510px;
	opacity: .8;
}
.home_interview .obj-bargraph .obj {
	width: 100%;
	height: 100%;
}

@media print, (min-width: 768px) {
	.home_interview .obj-bargraph {
		right: 2%;
		bottom: 16%;
	}
	.home_interview .obj-pointgraph {
		right: 32%;
		bottom: 8%;
	}
}
@media screen and (max-width: 767px) {
	.home_interview {
		margin-bottom: calc(40vw / 3.75);
	}
	.home_interview .obj-bargraph {
		right: 20%;
		bottom: 16%;
		width: calc(160vw / 3.75);
		height: calc(240vw / 3.75);
	}
	.home_interview .obj-pointgraph {
		right: 10%;
		bottom: -4%;
		width: calc(120vw / 3.75);
	}
}

/* Photo Graph Object */
.home_interview .decoration {
	position: relative;
	height: 480px;
	filter: drop-shadow(4px 8px 10px #0002);
}
.home_interview .deco {
	position: absolute;
	-webkit-mask: conic-gradient(#fff var(--start), #fff0 var(--start) var(--end), #fff var(--end));
	mask: conic-gradient(#fff var(--start), #fff0 var(--start) var(--end), #fff var(--end));
}
.home_interview .deco.-d1 {
	--start: 36%;
	--end: 43%;
	width: 380px;
}
.home_interview .deco.-d2 {
	--start: 5%;
	--end: 10%;
	width: 280px;
}
.home_interview .deco.-d3 {
	--start: 28%;
	--end: 42%;
	width: 190px;
}
.home_interview .deco.-d4 {
	--start: 56%;
	--end: 66%;
	width: 110px;
}
.home_interview .deco {
	border-radius: 100%;
}

@media print, (min-width: 768px) {
	.home_interview .deco.-d1 { top: -6%; right: 30%; }
	.home_interview .deco.-d2 { bottom: 0; right: 0; }
	.home_interview .deco.-d3 { top: -32%; left: 70%; }
	.home_interview .deco.-d4 { top: 12%; left: 71%; }
}
@media screen and (max-width: 767px) {
	.home_interview .deco.-d1 { bottom: 0; left: 0; }
	.home_interview .deco.-d2 { top: -4%; right: 8%; }
	.home_interview .deco.-d3 { top: 12%; left: 6%; }
	.home_interview .deco.-d4 { bottom: 43%; right: 2%; }
	
	.home_interview .decoration { height: calc(400vw / 3.75); }
	.home_interview .deco.-d1 { width: calc(240vw / 3.75); }
	.home_interview .deco.-d2 { width: calc(160vw / 3.75); }
	.home_interview .deco.-d3 { width: calc(96vw / 3.75); }
	.home_interview .deco.-d4 { width: calc(72vw / 3.75); }
}

/* Inview */
.home_interview .decoration .deco {
	--end: 100%;
}
.home_interview .deco.js-inview:not(.is-inview) {
	--start: 0%;
	opacity: 0;
}
.home_interview .obj-bargraph.js-inview:not(.is-inview) .obj,
.home_interview .obj-pointgraph.js-inview:not(.is-inview) .obj {
	opacity: 0;
	transform: translateY(40px);
}
.home_interview .deco.-d1 { --start: 93%; transform: rotate(calc(36deg * -5.7)); } /* MEMO: 93% = 100% - (var(--end_ - var(--start)) */
.home_interview .deco.-d2 { --start: 95%; transform: rotate(calc(36deg * -9)); }   /* MEMO: -9 = var(--end) - 100% */
.home_interview .deco.-d3 { --start: 86%; transform: rotate(calc(36deg * -5.8)); }
.home_interview .deco.-d4 { --start: 90%; transform: rotate(calc(36deg * -3.4)); }
.home_interview .deco.-d1 img { transform: rotate(calc(36deg * 5.7)); }
.home_interview .deco.-d2 img { transform: rotate(calc(36deg * 9)); }
.home_interview .deco.-d3 img { transform: rotate(calc(36deg * 5.8)); }
.home_interview .deco.-d4 img { transform: rotate(calc(36deg * 3.4)); }
.home_interview .deco.js-inview.is-inview {
	transition: opacity 1s, --start 1s var(--easeGraph);
	will-change: -webkit-mask, mask;
}
.home_interview .obj-bargraph.js-inview.is-inview .obj,
.home_interview .obj-pointgraph.js-inview.is-inview .obj {
	transition: opacity 1s, transform 1s var(--easeOut);
	will-change: opacity, transform;
}
.home_interview .deco.-d1.js-inview.is-inview { transition-delay: .1s; }
.home_interview .deco.-d2.js-inview.is-inview { transition-delay: .3s; }
.home_interview .deco.-d3.js-inview.is-inview { transition-delay: .5s; }
.home_interview .deco.-d4.js-inview.is-inview { transition-delay: .4s; }
.home_interview .obj-bargraph.js-inview.is-inview .obj { transition-delay: .6s; }
.home_interview .obj-pointgraph.js-inview.is-inview .obj { transition-delay: .8s; }

/* :::::: Project story :::::: */
.home_project {
	position: relative;
	margin-top: 0;
}
.home_project::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0 var(--breakout);
	background: linear-gradient(to top, #fff5 1px, #fff0 1px) center / 16px 16px,
		linear-gradient(to left, #fff5 1px, #fff0 1px) center / 16px 16px;
	background-color: #bebebd4c;
}
.home_project > .hgroup {
	margin-top: 80px;
}
.home_project .lead {
	margin-top: 1em;
}

@media print, (min-width: 768px) {
	.home_project::after {
		content: "";
		display: block;
		clear: both;
	}
	.home_project > .hgroup .c-bracket {
		--v: 136px;
		--h: 276px;
		--vshift: -64px;
		--hshift: 88px;
		left: -120px;
	}
}
@media screen and (max-width: 767px) {
	.home_project {
		padding-bottom: calc(80vw / 3.75);
	}
	.home_project > .hgroup .title {
		width: calc(232vw / 3.75);
	}
}

/* Graph Objects */
.home_project .obj-circlegraph.-o1 {
	/* --start: 85%;
	--end: 91%; */
	--size: min(380vw / 10.8, 380px);
}
.home_project .obj-circlegraph.-o2 {
	/* --start: 56%;
	--end: 85%; */
	--size: 150px;
}
.home_project .obj-pointgraph {
	opacity: .5;
}
.home_project .obj-bargraph {
	top: -14%;
	left: calc(50% - 218px);
	width: 436px;
	height: 386px;
	opacity: .5;
}
.home_project .obj-bargraph .obj {
	width: 100%;
	height: 100%;
}

@media print, (min-width: 768px) {
	.home_project .obj-circlegraph.-o1 {
		right: calc(var(--sidegap) * -1);
		bottom: 2%;
	}
	.home_project .obj-circlegraph.-o2 {
		top: 93%;
		right: 34%;
	}
	.home_project .obj-pointgraph {
		bottom: 10%;
		right: 32%;
	}
	.home_project .obj-pointgraph use {
		transform: rotate(180deg);
	}
}
@media screen and (max-width: 767px) {
	.home_project .obj-circlegraph.-o1 {
		--size: calc(136vw / 3.75);
		z-index: 1;
		right: calc(-16vw / 3.75);
		top: calc(-16vw / 3.75);
	}
	.home_project .obj-circlegraph.-o2 {
		--size: calc(136vw / 3.75);
		bottom: calc(-24vw / 3.75);
		right: 0;
	}
	.home_project .obj-pointgraph {
		top: calc(120vw / 3.75);
		right: 0;
		width: calc(120vw / 3.75);
	}
}

/* Inview */
.home_project .obj-circlegraph .obj {
	--end: 100%;
}
.home_project .obj-circlegraph.js-inview:not(.is-inview) .obj {
	--start: 0%;
	opacity: 0;
	transform: scale(.6) rotate(-180deg);
}
.home_project .obj-bargraph.js-inview:not(.is-inview) .obj,
.home_project .obj-pointgraph.js-inview:not(.is-inview) .obj {
	opacity: 0;
	transform: translateY(40px);
}
.home_project .obj-circlegraph .obj use {
	transition: transform 1.5s var(--easeGraph);
	will-change: transform;
}
.home_project .obj-circlegraph.-o1 .obj { --start: 94%; }
.home_project .obj-circlegraph.-o2 .obj { --start: 71%; }
.home_project .obj-circlegraph.-o1 .obj { transform: rotate(calc(36deg * -.9)); }
.home_project .obj-circlegraph.-o2 .obj { transform: rotate(calc(36deg * -1.5)); }
.home_project .obj-circlegraph.-o1 .obj use { transform: rotate(calc(36deg * .9)); }
.home_project .obj-circlegraph.-o2 .obj use { transform: rotate(calc(36deg * 1.5)); }
.home_project .obj-circlegraph.js-inview.is-inview .obj {
	transition: opacity 1s, transform 1s var(--easeGraph), --start 1s var(--easeGraph);
	will-change: opacity, transform, -webkit-mask, mask;
}
.home_project .obj-bargraph.js-inview.is-inview .obj,
.home_project .obj-pointgraph.js-inview.is-inview .obj {
	transition: opacity 1s, transform 1s var(--easeOut);
	will-change: opacity, transform;
}
.home_project .obj-circlegraph.-o1.js-inview.is-inview .obj { transition-delay: .1s; }
.home_project .obj-circlegraph.-o2.js-inview.is-inview .obj { transition-delay: .3s; }
.home_project .obj-bargraph.js-inview.is-inview .obj { transition-delay: .6s; }
.home_project .obj-pointgraph.js-inview.is-inview .obj { transition-delay: .8s; }

/* Story */
.project_story {
	display: grid;
	justify-items: center;
	position: relative;
}
.project_story .num {
	position: absolute;
	top: 0;
}
.project_story.-s1 .num,
.project_story.-s3 .num {
	left: 0;
}
.project_story.-s2 .num {
	right: 0;
}
.project_story .story_title {
	margin-top: 1em;
	font-size: min(20vw / 10.8, 1.25rem);
	line-height: 1.6;
	font-weight: 500;
}
.project_story .hgroup {
	order: 1;
}
.project_story:not(.-s2) .hgroup {
	margin-left: 10%;
}
.project_story .image,
.project_story .people,
.project_story .image .inner {
	display: grid;
	align-items: end;
}
.project_story .image {
	z-index: 0;
	position: relative;
}
.project_story .image .inner {
	grid-area: 1 / 1;
	position: relative;
	top: 1px;
}
.project_story .people,
.project_story .image .inner {
	z-index: 1;
	height: 100%;
}
.project_story .people,
.project_story .person {
	grid-area: 1 / 1;
}
.project_story .person.-p1 { z-index: 5; }
.project_story .person.-p2 { z-index: 4; }
.project_story .person.-p3 { z-index: 3; }
.project_story .person.-p4 { z-index: 2; }
.project_story .person.-p5 { z-index: 1; }

@media print, (min-width: 768px) {
	.home_project::after {
		content: "";
		display: block;
		clear: both;
	}
	.home_project > .hgroup,
	.project_story.-s2  {
		float: right;
	}
	.home_project > .hgroup {
		width: min(400vw / 10.8, 400px);
	}
	.project_story {
		width: calc(50% - 32px);
	}
	.project_story.-s1,
	.project_story.-s3 {
		float: left;
	}
	.project_story.-s2 {
		margin-top: 24px;
	}
	.project_story.-s3 {
		margin-top: 96px;
	}
}
@media screen and (max-width: 767px) {
	.home_project > .hgroup .title {
		width: calc(232vw / 3.75);
	}
	.project_story {
		margin-top: calc(40vw / 3.75);
	}
	.project_story.-s2 {
		margin-top: calc(12vw / 3.75);
	}
	.project_story .story_title {
		font-size: max(16vw / 3.75, .75rem);
	}
}
@media screen and (max-width: 520px) {
	.project_story .num {
		width: auto;
		height: calc(85vw / 5.2);
	}
}

/* 円グラフ */
.project_story .image.-circle {
	width: min(420vw / 10.8, 420px);
	height: min(420vw / 10.8, 420px);
	margin-top: 72px;
}
.project_story .image.-circle .-mask {
	clip-path: circle(50%);
}
.project_story.-s1 .image.-circle .-clip {
	clip-path: polygon(-10% 0, 100% 0, 100% 74%, 7% 74%, -10% 84%);
}
.project_story.-s2 .image.-block .-clip {
	clip-path: inset(0);
}
.project_story.-s3 .image.-circle .-clip {
	clip-path: polygon(0 0, 110% 0, 110% 70%, 0 30%);
}
.project_story .image.-circle .graph {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background: conic-gradient(#fff var(--start), #fff0 var(--start) var(--end), #fff var(--end));
}
.project_story.-s1 .image .graph { --start: 0%; --end: 10%; }
.project_story.-s3 .image .graph { --start: 90%; --end: 100%; }

@media print, (min-width: 768px) {
	.project_story .image.-circle {
		justify-self: end;
	}
}
@media screen and (max-width: 767px) {
	.project_story .image.-circle {
		width: calc(420vw / 7.68);
		height: calc(420vw / 7.68);
		margin-top: calc(72vw / 7.68);
	}
}
@media screen and (max-width: 560px) {
	.project_story .image.-circle {
		width: calc(420vw / 5.6);
		height: calc(420vw / 5.6);
		margin-top: calc(72vw / 5.6);
	}
}

/* 棒グラフ */
.project_story .image.-block {
	width: min(460vw / 10.8, 460px);
	height: min(420vw / 10.8, 420px);
	margin-top: 80px;
}
.project_story .image.-block .graph {
	content: "";
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: end;
	position: absolute;
	inset: 0;
}
.project_story .image.-block .graph .g {
	height: 100%;
	background: white;
	transform-origin: center bottom;
}
.project_story .image.-block .graph .g:nth-child(2) { height: 86%; }
.project_story .image.-block .graph .g:nth-child(3) { height: 72%; }
.project_story .image.-block .graph .g:nth-child(4) { height: 64%; }
.project_story .image.-block .graph .g:nth-child(5) { height: 40%; }

@media screen and (max-width: 767px) {
	.project_story .image.-block {
		width: calc(460vw / 7.68);
		height: calc(460vw / 7.68);
		margin-top: calc(80vw / 7.687);
	}
}
@media screen and (max-width: 560px) {
	.project_story .image.-block {
		width: calc(460vw / 5.6);
		height: calc(460vw / 5.6);
		margin-top: calc(80vw / 5.6);
	}
}

/* 01 人物 */
.project_story.-s1 .person.-p1 {
	justify-self: center;
	width: min(488vw / 23.8, 488px / 2.2);
	margin-left: -10%;
}
.project_story.-s1 .person.-p2,
.project_story.-s1 .person.-p3 {
	-webkit-mask: linear-gradient(to top, #fff0, #fff 8%);
	mask: linear-gradient(to top, #fff0, #fff 8%);
}
.project_story.-s1 .person.-p2 {
	width: min(440vw / 23.8, 440px / 2.2);
	margin-left: -4%;
}
.project_story.-s1 .person.-p3 {
	justify-self: end;
	width: min(453vw / 23.8, 453px / 2.2);
	margin-right: 2%;
}

@media screen and (max-width: 767px) {
	.project_story .person {
		--aspect: 16.8;
	}
	.project_story.-s1 .person.-p1 {
		width: calc(488vw / var(--aspect));
	}
	.project_story.-s1 .person.-p2 {
		width: calc(440vw / var(--aspect));
	}
	.project_story.-s1 .person.-p3 {
		width: calc(453vw / var(--aspect));
		margin-right: 0;
	}
}
@media screen and (max-width: 560px) {
	.project_story .person {
		--aspect: 10.4;
	}
}

/* 02 人物 */
.project_story.-s2 .person.-p1 {
	/* justify-self: center;
	width: min(348vw / 23.8, 348px / 2.2);
	margin-left: -22%; */
}
.project_story.-s2 .person.-p2 {
	justify-self: center;
	width: min(402vw / 23.8, 402px / 2.2);
	margin-right: -18%;
}
.project_story.-s2 .person.-p3 {
	width: min(372vw / 23.8, 372px / 2.2);
	margin-left: 5%;
}
.project_story.-s2 .person.-p4 {
	justify-self: end;
	width: min(370vw / 23.8, 370px / 2.2);
	margin-right: 5%;
}
.project_story.-s2 .person.-p5 {
	justify-self: center;
	width: min(354vw / 23.8, 354px / 2.2);
	margin-right: 2%;
}

@media screen and (max-width: 767px) {
	.project_story.-s2 .person.-p1 {
		width: calc(348vw / var(--aspect));
	}
	.project_story.-s2 .person.-p2 {
		width: calc(402vw / var(--aspect));
	}
	.project_story.-s2 .person.-p3 {
		width: calc(372vw / var(--aspect));
		margin-left: 3%;
	}
	.project_story.-s2 .person.-p4 {
		width: calc(370vw / var(--aspect));
		margin-right: 3%;
	}
	.project_story.-s2 .person.-p5 {
		width: calc(354vw / var(--aspect));
	}
}

/* 03 人物 */
.project_story.-s3 .person.-p1 {
	justify-self: center;
	width: min(649vw / 23.8, 649px / 2.2);
}
.project_story.-s3 .person.-p2,
.project_story.-s3 .person.-p3 {
	-webkit-mask: linear-gradient(to top, #fff0, #fff 8%);
	mask: linear-gradient(to top, #fff0, #fff 8%);
}
.project_story.-s3 .person.-p2 {
	width: min(524vw / 23.8, 524px / 2.2);
	margin-left: -14%;
}
.project_story.-s3 .person.-p3 {
	justify-self: end;
	width: min(532vw / 23.8, 532px / 2.2);
	margin-right: -10%;
}

@media screen and (max-width: 767px) {
	.project_story.-s3 .person.-p1 {
		width: calc(649vw / var(--aspect));
	}
	.project_story.-s3 .person.-p2 {
		width: calc(524vw / var(--aspect));
		margin-left: -15%;
	}
	.project_story.-s3 .person.-p3 {
		width: calc(532vw / var(--aspect));
	}
}

/* Inview */
.project_story .image.js-inview:not(.is-inview) .people {
	opacity: 0;
}
.project_story .image.js-inview:not(.is-inview) .person {
	transform: translateY(6%);
}
.project_story .image.js-inview:not(.is-inview) .person.-p1,
.project_story.-s2 .image.js-inview:not(.is-inview) .person.-p2 {
	transform: translateY(12%);
}
.project_story .image.js-inview:not(.is-inview) .graph {
	opacity: 0;
}
.project_story.-s1 .image.js-inview:not(.is-inview) .graph {
	--end: 100%;
}
.project_story.-s2 .image.js-inview:not(.is-inview) .graph .g {
	transform: scaleY(0);
}
.project_story.-s3 .image.js-inview:not(.is-inview) .graph {
	--start: 0%;
}
.project_story .image.js-inview.is-inview .people {
	transition: opacity .6s .6s;
	will-change: opacity;
}
.project_story .image.js-inview.is-inview .person {
	transition: transform 1s .6s var(--easeOut);
	will-change: transform;
}
.project_story .image.js-inview.is-inview .person.-p1 { transition-delay: .5s; }
.project_story .image.js-inview.is-inview .person.-p2 { transition-delay: .55s; }
.project_story .image.js-inview.is-inview .person.-p3 { transition-delay: .6s; }
.project_story .image.js-inview.is-inview .person.-p4 { transition-delay: .65s; }
.project_story .image.js-inview.is-inview .person.-p5 { transition-delay: .7s; }

.project_story.-s1 .image.js-inview.is-inview .graph {
	transition: opacity 1s, --end 1s var(--easeGraph);
	will-change: opacity, -webkit-mask, mask;
}
.project_story.-s2 .image.js-inview.is-inview .graph .g {
	transition: opacity 1s, transform 1s var(--easeGraph);
	will-change: opacity, transform;
}
.project_story.-s2 .image.js-inview.is-inview .graph .g:nth-child(2) { transition-delay: .1s; }
.project_story.-s2 .image.js-inview.is-inview .graph .g:nth-child(3) { transition-delay: .2s; }
.project_story.-s2 .image.js-inview.is-inview .graph .g:nth-child(4) { transition-delay: .3s; }
.project_story.-s2 .image.js-inview.is-inview .graph .g:nth-child(5) { transition-delay: .4s; }
.project_story.-s3 .image.js-inview.is-inview .graph {
	transition: opacity 1s, --start 1s var(--easeGraph);
	will-change: opacity, -webkit-mask, mask;
}

/* :::::: Work field :::::: */
.home_work {
	display: grid;
	position: relative;
}
.home_work .num {
	width: auto;
	height: 1.4em;
}
.home_work .c-slider {
	position: relative;
}
.home_work .deco {
	z-index: 1;
	position: relative;
	width: calc(382px / 2);
}
.home_work .c-slider .label {
	align-self: center;
	margin-bottom: -.3em;
	padding-bottom: .6em;
	font-size: min(37vw / 10.8, 2.3125rem);
}
.home_work .c-slider .slide:first-child .label {
	font-family: var(--fontEn);
}
.home_work .c-slider .label::after {
	content: "";
	position: absolute;
	bottom: -3px;
	left: -2px;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background: currentcolor;
}

@media print, (min-width: 768px) {
	.home_work {
		grid-template-columns: 41fr 59fr;
		align-items: center;
		gap: 16px;
	}
	.home_work .hgroup .c-bracket {
		--v: 156px;
		--h: 224px;
		--vshift: -88px;
	}
	.home_work .hgroup {
		grid-area: 1 / 1;
	}
	.home_work .c-slider,
	.home_work .deco {
		grid-area: 1 / 2;
	}
	.home_work .c-slider {
		width: 100%;
		max-width: min(568vw / 10.8, 568px);
	}
	.home_work .deco {
		align-self: end;
		margin: 0 0 -64px -92px;
	}
}
@media screen and (max-width: 767px) {
	.home_work {
		gap: calc(24vw / 3.75);
		margin-bottom: 0;
		padding-bottom: calc(40vw / 3.75);
	}
	.home_work .hgroup .title {
		width: calc(184vw / 3.75);
	}
	.home_work .hgroup {
		grid-area: 1 / 1;
	}
	.home_work .c-slider,
	.home_work .deco {
		grid-area: 2 / 1;
	}
	.home_work .deco {
		align-self: end;
		width: calc(120vw / 3.75);
		margin-bottom: min(-32vw / 3.75, 32px);
		margin-left: min(-46vw / 3.75, 46px);
	}
	.home_work .c-slider .label {
		/* width: fit-content; */
		font-size: calc(20vw / 3.75);
	}
}

/* Graph Objects */
.home_work .obj-bargraph .obj {
	height: 100%;
}
.home_work .obj-pointgraph {
	width: 160px;
	opacity: .5;
}
.home_work .obj-pointgraph use {
	transform: rotate(160deg);
}
.home_work .obj-bargraph {
	width: 124px;
	height: 290px;
	opacity: .35;
}
@media print, (min-width: 768px) {
	.home_work .obj-pointgraph {
		bottom: 12%;
		right: -64px;
	}
	.home_work .obj-bargraph {
		bottom: 30%;
		right: -48px;
	}
}
@media screen and (max-width: 767px) {
	.home_work .obj-pointgraph {
		top: 16%;
		right: 0;
		width: calc(120vw / 3.75);
	}
	.home_work .obj-bargraph {
		right: 0;
		bottom: 20%;
		width: calc(124vw / 3.75);
		height: calc(290vw / 3.75);
	}
}

/* Inview */
.home_work .obj-pointgraph.js-inview:not(.is-inview),
.home_work .obj-bargraph.js-inview:not(.is-inview) {
	opacity: 0;
	transform: translateY(40px);
}
.home_work .obj-pointgraph.js-inview.is-inview,
.home_work .obj-bargraph.js-inview.is-inview {
	transition: opacity 1s, transform 1s var(--easeOut);
	will-change: opacity, transform;
}

/* :::::: 数字アニメーション :::::: */
.home_work .js-survey {
	background: var(--themegrad);
}
.home_work .js-survey::after {
	opacity: 0;
}
.home_work .js-survey > * {
	position: absolute;
	color: var(--themecolor);
	opacity: .5;
	line-height: 1;
	font-weight: 700;
}

/* Size */
.home_work .js-survey .parsent { font-size: 7.2rem; }
.home_work .js-survey .parsent .num { font-size: 120%; }
.home_work .js-survey .number1 { font-size: 15rem; }
.home_work .js-survey .number2 { font-size: 10rem; }
.home_work .js-survey .fraction { font-size: 4.8rem; }
.home_work .js-survey .ratio { font-size: 7rem; }
.home_work .js-survey .number3 { font-size: 15.5rem; }

@media screen and (max-width: 1079px) {
	.home_work .js-survey { --v: 10.8; }
	.home_work .js-survey .parsent { font-size: calc(115.2vw / var(--v)); }
	.home_work .js-survey .number1 { font-size: calc(240vw / var(--v)); }
	.home_work .js-survey .number2 { font-size: calc(160vw / var(--v)); }
	.home_work .js-survey .fraction { font-size: calc(76.8vw / var(--v)); }
	.home_work .js-survey .ratio { font-size: calc(112vw / var(--v)); }
	.home_work .js-survey .number3 { font-size: calc(248vw / var(--v)); }
}
@media screen and (max-width: 767px) {
	.home_work .js-survey { --v: 6.8; }
}

/* Layout */
.home_work .js-survey .parsent {
	top: 1rem;
	left: 2%;
}
.home_work .js-survey .number1 {
	bottom: 6%;
	left: 2%;
	letter-spacing: -.025em;
}
.home_work .js-survey .number2 {
	top: 3%;
	left: 45%;
	transform: rotate(-90deg);
}
.home_work .js-survey .fraction {
	display: grid;
	place-items: center;
	top: 39%;
	left: 37%;
}
.home_work .js-survey .fraction > * {
	grid-row: 1;
}
.home_work .js-survey .fraction .tot {
	grid-column: 1;
	align-self: start;
	margin-top: -.1em;
	padding: 0 .3em;
}
.home_work .js-survey .fraction .mom {
	grid-column: 3;
	align-self: end;
	padding: 0 .3em;
}
.home_work .js-survey .fraction .bar {
	grid-column: 1 / 4;
	width: 1.25em;
	height: 1.5em;
	fill: none;
	stroke: currentcolor;
	stroke-width: 7;
}
.home_work .js-survey .ratio {
	bottom: 7%;
	left: 39%;
}
.home_work .js-survey .number3 {
	bottom: 6%;
	left: 100%;
	transform-origin: left bottom;
	transform: rotate(-90deg);
}
.home_work .js-survey .number3 .num {
	letter-spacing: -.02em;
}

/**
 * Slider
 * ---------------------------------------- */
.c-slider {
	position: relative;
	filter: drop-shadow(4px 8px 10px #0001);
}
.c-slider .slide {
	display: grid;
	position: relative;
}
.c-slider:not(.swiper-initialized) .slide:not(:first-child) {
	z-index: -1;
	position: absolute;
	inset: 0;
}
.c-slider .slide .img,
.c-slider .slide .label {
	grid-area: 1 / 1;
}
.c-slider .slide .img {
	z-index: -1;
	border-radius: calc(var(--radius) * 2.4);
	aspect-ratio: 960 / 680;
}
.c-slider .slide .img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #00000019;
}
.c-slider .slide .img *,
.c-slider .slide .img::after {
	border-radius: inherit;
}
.c-slider .label {
	place-self: end;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2em .8em;
	margin-bottom: 3em;
	padding-bottom: .8em;
	padding-right: 1em;
	border-bottom: 1px solid currentcolor;
	color: white;
	font-size: 1.375rem;
	line-height: 1.4;
	font-weight: 700;
}
.c-slider .label .num {
	fill: currentcolor;
}
.c-slider .label a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.c-slider.swiper {
	padding-bottom: 2em;
}
.c-slider.swiper .swiper-pagination {
	--swiper-pagination-bottom: 0;
	--swiper-pagination-bullet-horizontal-gap: 1em;
	height: 1em;
	line-height: 0;
}
.c-slider.swiper .swiper-pagination-bullet {
	width: 1em;
	height: 1em;
	border-radius: 1em;
	background: #ccc9c9;
	opacity: inherit;
	transition: background .4s;
}
.c-slider.swiper .swiper-pagination-bullet-active {
	background: #3e3a39;
	transition-duration: .2s;
}

@media screen and (max-width: 767px) {
	.c-slider {
		width: calc(312vw / 3.75);
		max-width: calc(100vw - var(--sidegap) * 2);
	}
	.c-slider .label {
		width: fit-content;
		padding-right: .8em;
		font-size: max(18vw / 3.75, 1.125rem);
	}
}