/* -----------------------------------------------
= kv
----------------------------------------------- */
.kv {
	position: relative;
	height: 123px;
	margin: 0 12px 20px;
	color: #fff;
}
.kv .category {
	position: absolute;
	top: 5px;
	left: 5px;
	font-family: var(--en);
	font-size: calc(1rem / 1.6);
	font-weight: 400;
}
.kv h1 {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 1;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}
.kv h1 span {
	display: block;
}
.kv h1 .jp {
	font-size: calc(1.4rem / 1.6);
	letter-spacing: .08em;
}
.kv h1 .en {
	font-family: var(--en);
	font-size: calc(2.2rem / 1.6);
	font-weight: 400;
}
.kv img {
	height: 100%;
	object-fit: cover;
	object-position: 80% 50%;
}
@media print, screen and (min-width: 768px) {/* PC */
.kv {
	max-width: 1200px;
	height: 247px;
	margin: 0 auto 50px;
}
.kv .category {
	top: 10px;
	left: 15px;
	font-size: calc(1.8rem / 1.6);
}
.kv h1 .jp {
	font-size: calc(2.4rem / 1.6);
}
.kv h1 .en {
	font-size: calc(4.4rem / 1.6);
}
}/* @media */
/* -----------------------------------------------
= lead note
----------------------------------------------- */
.lead {
	margin: 0 12px 15px;
	font-size: calc(1.6rem / 1.6);
	text-align: center;
}
.note {
	margin: 0 12px 40px;
	font-size: calc(1rem / 1.6);
	text-align: center;
}
@media print, screen and (min-width: 768px) {/* PC */
.lead {
	max-width: 1200px;
	margin: 0 auto 40px;
	font-size: calc(1.8rem / 1.6);
}
.note {
	max-width: 1200px;
	margin: 0 auto 100px;
	font-size: calc(1.4rem / 1.6);
}
}/* @media */
/* -----------------------------------------------
= index
----------------------------------------------- */
.index {
	max-width: 270px;
	margin: 0 auto 60px;
}
.index .item + .item {
	margin-top: 40px;
}
.index .item a {
	display: block;
}
.index .item .img {
	position: relative;
	margin-bottom: -15px;
}
.index .item .img::before,
.index .item .img::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 45px;
	height: 45px;
	z-index: 1;
}
.index .item .img::before {
	background: var(--blue);
}
.index .item.theme .img::before {
	background: var(--red);
}
.index .item .img::after {
	background: url(../../img/work/index_arrow.svg) no-repeat 50% / 28.5px auto;
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(200deg) brightness(103%) contrast(102%);
}
.index .item .category {
	position: absolute;
	top: 3px;
	left: 6px;
	z-index: 1;
	font-size: calc(1.8rem / 1.6);
	font-weight: 700;
	letter-spacing: .12em;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-feature-settings: "vert";
}
.index .item .resume {
	display: inline-block;
	position: relative;
	margin: 0 0 8px 18px;
	color: #fff;
	background: var(--blue);
	font-size: calc(.9rem / 1.6);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .15em;
}
.index .item.theme .resume {
	background: var(--red);
}
.index .item .resume::before {
	content: "";
	position: absolute;
	top: 0;
	left: -18px;
	width: 14px;
	height: 100%;
	background: var(--blue);
	clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
}
.index .item.theme .resume::before {
	background: var(--red);
}
.index .item .resume span {
	display: block;
	position: relative;
	padding: 0 20px 0 10px;
}
.index .item .resume span::before,
.index .item .resume span::after {
	content: "";
	position: absolute;
	top: 0;
	width: 4px;
	height: 100%;
	background: var(--blue);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.index .item.theme .resume span::before,
.index .item.theme .resume span::after {
	background: var(--red);
}
.index .item .resume span::before {
	left: -4px;
}
.index .item .resume span::after {
	right: -4px;
	transform: rotate(180deg);
}
.index .item .text {
	margin-bottom: 12px;
	font-family: var(--min);
	font-size: calc(1.8rem / 1.6);
	line-height: calc(24 / 18);
	font-weight: 300;
}
.index .item .type {
	display: inline-block;
	min-width: 150px;
	margin-bottom: 5px;
	padding: 0 5px;
	color: #fff;
	background: linear-gradient(90deg, #3a74d1 78%, #fff);
	font-size: calc(1.1rem / 1.6);
	letter-spacing: .04em;
}
.index .item.theme .type {
	background: linear-gradient(90deg, #f13a54 78%, #fff);
}
.index .item .division {
	font-size: calc(1.1rem / 1.6);
}
@media print, screen and (min-width: 768px) {/* PC */
.index {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto 60px;
	padding: 0 40px;
}
.index .item + .item {
	margin-top: 0;
}
.index .item .img img {
	filter: grayscale(100%);
}
.index .item .img::before,
.index .item .img::after {
	width: 60px;
	height: 60px;
}
.index .item .img::before,
.index .item.theme .img::before {
	background: #fff;
}
.index .item .img::after {
	filter: invert(0%) sepia(82%) saturate(7499%) hue-rotate(22deg) brightness(97%) contrast(103%);
}
.index .item .category {
	font-size: calc(2.4rem / 1.6);
}
.index .item .resume {
	margin: 0 0 10px 30px;
	font-size: calc(1.2rem / 1.6);
}
.index .item .resume::before {
	left: -28px;
	width: 22px;
	clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%);
}
.index .item .resume span::before,
.index .item .resume span::after {
	width: 8px;
}
.index .item .resume span::before {
	left: -8px;
}
.index .item .resume span::after {
	right: -8px;
}
.index .item .text {
	margin-bottom: 20px;
	font-size: calc(2.4rem / 1.6);
}
.index .item .type {
	min-width: 204px;
	margin-bottom: 10px;
	font-size: calc(1.4rem / 1.6);
}
.index .item .division {
	font-size: calc(1.4rem / 1.6);
}
}/* @media */
@media print, screen and (max-width: 1023px) and (min-width: 768px) {/* TABLET */
.index {
	grid-template-columns: repeat(2, 1fr);
}
}/* @media */
@media (hover:hover) {
.index .item a .img img {
	transition: filter .3s;
}
.index .item a:hover .img img {
	filter: grayscale(0);
}
.index .item a .img::before {
	transition: background .3s;
}
.index .item a:hover .img::before {
	background: var(--blue);
}
.index .item.theme a:hover .img::before {
	background: var(--red);
}
.index .item a:hover .img::after {
	filter: invert(97%) sepia(84%) saturate(2%) hue-rotate(172deg) brightness(105%) contrast(100%);
}
}/* @media */