@charset "utf-8";
/* -----------------------------------------------
= common
----------------------------------------------- */
body {
	position: relative;
	opacity: 0;
	transition: opacity .8s;
}
body.visible {
	opacity: 1;
}
/* -----------------------------------------------
= main
----------------------------------------------- */
.main {
	position: relative;
	background: #fff;
}
.main .set {
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	aspect-ratio: 750 / 872;
	display: block;
	position: relative;
}
.main .category {
	color: #ff1100;
	left: 1.8rem;
	top: 7.7rem;
	position: absolute;
}
.main .category .en {
	display: block;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.9rem;
	font-weight: 300;
	line-height: 2.2rem;
	letter-spacing: 0.03em;
}
.main .category .jp {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4rem;
}
.main .inner {
	padding: 0 2rem;
	position: relative;
}
.main .pagetitle {
	padding: 1.6rem 0 1.1rem;
	font-family: "Noto Serif JP", serif;
	font-size: 2rem;
	font-weight: 400;
	line-height: 2.6rem;
}
.main .name_en {
	color: #ff1100;
	font-family: "Noto Serif JP", serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: 0.04em;
}
.main .tag {
	margin: 0 0 2.8rem;
	padding: 2.2rem 0 0.8rem;
	border-bottom: .1rem solid #b3b3b3;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.main .tag.visible {
	opacity: 1;
	transform: translateY(0);
}
.main .tag dt {
	margin: 0 0 0.4rem;
	font-family: "Noto Serif JP", serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2rem;
	text-align: left;
	letter-spacing: 0.04em;
}
.main .tag .sort_list {
	flex-wrap: wrap;
	display: flex;
	gap: 0.4rem 0.6rem;
}
.main .tag .sort_list li {
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 2.4rem;
	letter-spacing: 0.02em;
}
.main .tag .sort_list li a {
	color: #000;
	padding: 0 0.5rem;
	border: .1rem solid #000;
	border-radius: .2rem;
	transition: .3s;
}
.main .tag .sort_list li a:hover {
	color: #ff1100;
	border-color: #ff1100;
}
.main .profile {
	padding: 0 0 2.4rem;
	border-bottom: .1rem solid #b3b3b3;
}
.main .profile dt {
	margin: 0 0 1.2rem;
	font-family: "Noto Serif JP", serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2rem;
	text-align: left;
	letter-spacing: 0.04em;
}
.main .profile .name {
	margin: 0 0 2rem;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 2rem;
}
.main .profile .dev {
	margin: 0 0 2rem;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2.2rem;
}
.main .profile .text {
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2.2rem;
}
.main .profile .text_note {
	margin: 2.2rem 0 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 2rem;
}
.main .profile .movie {
	margin-top: 2.2rem;
}
.main .profile .movie iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}
@media print, screen and (min-width: 768px) {/* PC */
.main .set {
	height: 72rem;
	aspect-ratio: auto;
}
.main .category {
	left: 6rem;
	top: 12.6rem;
}
.main .category .en {
	font-size: 3.4rem;
	line-height: 3.7rem;
}
.main .category .jp {
	font-size: 1.2rem;
	line-height: 2rem;
}
.main .inner {
	margin: 0 auto;
	padding: 0;
	width: calc(100% - 17.2rem);
	max-width: 132.8rem;
}
.main .pagetitle {
	margin: 0 0 0.8rem;
	padding: 7.4rem 0 0;
	border-bottom: .1rem solid #b3b3b3;
	font-size: 4.4rem;
	line-height: 6.2rem;
}
.main .name_en {
	font-size: 2.4rem;
	line-height: 3.2rem;
}
.main .tag { 
	margin: 0 0 3.6rem;
	padding: 5rem 0 0.8rem;
	display: flex;
}
.main .tag dt {
	margin: 0;
	width: 6.2rem;
	font-size: 1.6rem;
	line-height: 2.8rem;
}
.main .tag dd {
	flex: 1;
}
.main .tag .sort_list {
	gap: 0.6rem 0.8rem;
}
.main .tag .sort_list li {
	font-size: 1.4rem;
	line-height: 2.8rem;
}
.main .profile {
	padding: 0 0 4.2rem;
	display: flex;
}
.main .profile .profile_head {
	flex: 1;
}
.main .profile .profile_body {
	width: 69rem;
}
.main .profile dt {
	margin: 0 0 2.4rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.main .profile .name {
	margin: 0 0 3rem;
	font-size: 2rem;
	line-height: 2.8rem;
}
.main .profile .dev {
	margin: 0;
	font-size: 1.6rem;
	line-height: 2.8rem;
}
.main .profile .text {
	font-size: 1.6rem;
	line-height: 2.8rem;
}
.main .profile .text_note {
	margin: 2.8rem 0 0;
	font-size: 1.2rem;
	line-height: 1.8rem;
}
.main .profile .movie {
	margin-top: 4.2rem;
}
}/* @media */
@media print, screen and (max-width: 1500px) and (min-width: 768px) {/* TABLET */
.main .set {
	height: auto;
	aspect-ratio: 150 / 72;
}
}/* @media */
/* -----------------------------------------------
= intro
----------------------------------------------- */
.intro {
	padding: 2.5rem 0 6.3rem;
	background: #fff;
}
.intro .inner {
	padding: 0 2rem;
}
.intro .turning_point {
	padding: 1.5rem 1.5rem 0.1rem;
	border: 1px solid #eae5e3;
}
.intro .turning_point .subtitle {
	margin-bottom: 2rem;
	border-bottom: 1px solid #eae5e3;
	font-family: "Noto Serif JP", serif;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: 0.04em;
}
.intro .turning_point .subtitle,
.intro .turning_point ol {
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.intro .turning_point .subtitle.visible,
.intro .turning_point ol.visible {
	opacity: 1;
	transform: translateY(0);
}
.turning_point li {
	margin-bottom: 2rem;
}
.turning_point li .num {
	font-family: "Noto Serif JP", serif;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: 0.04em;
}
.turning_point li .title {
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2rem;
}
.turning_point a {
	color: #000;
	transition: color .3s;
}
.turning_point a:hover {
	color: #ff1100;
}
@media print, screen and (min-width: 768px) {/* PC */
.intro {
	padding: 4.2rem 0 14rem;
	position: relative;
}
.intro .inner {
	margin: 0 auto;
	padding: 0;
	width: calc(100% - 17.2rem);
	max-width: 132.8rem;
}
.intro .turning_point {
	margin: 0 0 0 auto;
	padding: 3rem 4rem 2.4rem;
	width: 69rem;
	box-sizing: border-box;
}
.intro .turning_point .subtitle {
	margin-bottom: 4.5rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.turning_point li {
	margin-bottom: 2.4rem;
}
.turning_point li .num {
	font-size: 1.4rem;
	line-height: 2.4rem;
}
.turning_point li .title {
	font-size: 1.6rem;
	line-height: 2.8rem;
}
}/* @media */
/* -----------------------------------------------
= illust
----------------------------------------------- */
.illust {
	margin: 5.7rem auto 0;
	width: 33.4rem;
}
@media print, screen and (min-width: 768px) {/* PC */
.illust {
	margin: 11.2rem auto 0;
	width: 80.7rem;
}
}/* @media */
/* -----------------------------------------------
= article
----------------------------------------------- */
.article {
	background: #fff;
	padding: 0 2rem;
}
.article .img {
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .img img {
	width: 100%;
}
.article .img.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .point {
	margin: 0 0 4rem;
}
.article .point .subtitle {
	margin: 1.7rem 0 1.5rem;
	padding: 0 0 0 0.6rem;
	border-left: 0.2rem solid #ff1100;
	font-family: "Noto Serif JP", serif;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: 0.04em;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .point .subtitle.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .point .item {
	margin: 0 0 2.4rem;
	padding: 1.2rem 1.5rem;
	border: 1px solid #eae5e3;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2.2rem;
}
.article .item dt,
.article .item dd {
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .item.visible dt,
.article .item.visible dd {
	opacity: 1;
	transform: translateY(0);
}
.article .item dt {
	margin-bottom: 2.2rem;
	color: #ff1100;
}
.article .point .title {
	margin: 0 0 2rem;
	font-family: "Noto Serif JP", serif;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 2.6rem;
	letter-spacing: 0.04em;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .point .title.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .point .text {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 2.4rem;
}
.article .text {
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .text.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .project {
	margin: 0 0 4rem;
	padding: 0 0 1.6rem;
	border-bottom: 1px solid #eae5e3;
}
.article .project .subtitle {
	margin: 0 0 2.7rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid #eae5e3;
	font-family: "Noto Serif JP", serif;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.8rem;
	letter-spacing: 0.04em;
	text-align: center;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .project .subtitle.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .project .item {
	margin-bottom: 3rem;
}
.article .project .title {
	margin: 0 auto 1.2rem;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 2rem;
	letter-spacing: 0.2em;
	text-align: center;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .project .title.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .project .img img {
	width: 100%;
}
.article .project .caption {
	margin-top: 1rem;
	font-size: 1.2rem;
}
.article .column {
	padding: 0 0 1.6rem;
	border-bottom: 1px solid #eae5e3;
}
.article .column .subtitle {
	margin: 0 0 2.7rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid #eae5e3;
	font-family: "Noto Serif JP", serif;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.8rem;
	letter-spacing: 0.04em;
	text-align: center;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .column .subtitle.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .column .item {
	margin-bottom: 3.8rem;
}
.article .column .item {
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.article .column .item.visible {
	opacity: 1;
	transform: translateY(0);
}
.article .column .question {
	position: relative;
	margin-bottom: 1.4rem;
	padding-bottom: 1.6rem;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2rem;
	text-align: center;
	letter-spacing: 0.02em;
}
.article .column .question::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 6.4rem;
	height: 0;
	margin-left: -3.2rem;
	border-top: 0.2rem solid #ff1100;
}
.article .column .answer {
	margin-bottom: 1.8rem;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.4rem;
	text-align: center;
}
.article .column .text {
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 2.2rem;
}
@media print, screen and (min-width: 768px) {/* PC */
.article {
	padding: 0 0 2rem;
}
.article .detail_set {
	margin: 0 auto;
	width: calc(100% - 17.2rem);
	max-width: 132.8rem;
}
.article .point {
	margin: 0 0 19rem;
	display: flex;
}
.article .point .point_body {
	width: 69rem;
}
.article .point > .img {
	flex: 1;
}
.article .point#point02,
.article .point#point04 {
	flex-direction: row-reverse;
}
.article .point#point01 > .img,
.article .point#point03 > .img,
.article .point#point05 > .img {
	transform: translate(-12.6rem, 0);
}
.article .point#point01 > .img.visible,
.article .point#point03 > .img.visible,
.article .point#point05 > .img.visible {
	transform: translate(-8.6rem, 0);
}
.article .point#point02 > .img,
.article .point#point04 > .img {
	transform: translate(12.6rem, 0);
}
.article .point#point02 > .img.visible,
.article .point#point04 > .img.visible {
	transform: translate(8.6rem, 0);
}
.article .point .subtitle {
	margin: 0 0 2.4rem;
	padding: 0 0 0 0.8rem;
	border-left-width: 0.4rem;
	font-size: 1.8rem;
	line-height: 2.4rem;
}
.article .point .item {
	margin: 0 0 3.6rem;
	padding: 1.6rem 2rem;
	font-size: 1.4rem;
	line-height: 2.2rem;
}
.article .item dt {
	margin-bottom: 2.2rem;
}
.article .point .title {
	margin: 0 0 4rem;
	font-size: 2.4rem;
	line-height: 3.6rem;
}
.article .point .text {
	font-size: 1.6rem;
	line-height: 2.8rem;
}
.article .project {
	margin: 0 0 10rem;
	padding: 2rem 0 4.2rem;
}
.article .project .subtitle {
	margin: 0 0 4rem;
	padding: 0 0 2rem;
	font-size: 2rem;
	line-height: 2.4rem;
}
.article .project .project_body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6rem 3rem;
	padding-inline: 3rem;
}
.article .project .item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 0;
	margin: 0;
}
.article .project .title {
	display: grid;
	align-items: center;
	margin: 0 auto 2.4rem;
	font-size: 1.8rem;
	line-height: 2.4rem;
}
.article .column {
	padding: 0 0 4rem;
}
.article .column .subtitle {
	margin: 0 0 6.4rem;
	padding: 0 0 2rem;
	font-size: 2rem;
	line-height: 2.4rem;
}
.article .column .column_body {
	display: flex;
}
.article .column .item {
	margin: 0;
	padding: 0 7rem;
	flex: 1;
}
.article .column .question {
	margin-bottom: 2.4rem;
	padding-bottom: 2.6rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.article .column .question::after {
	width: 6.4rem;
	margin-left: -3.2rem;
	border-top-width: 0.2rem;
}
.article .column .answer {
	margin-bottom: 3.6rem;
	font-size: 2.2rem;
	line-height: 2.8rem;
}
.article .column .text {
	font-size: 1.6rem;
	line-height: 2.8rem;
}
}/* @media */
/* -----------------------------------------------
= category_nav
----------------------------------------------- */
.category_nav {
	padding: 6rem 0 11rem;
	background: #fff;
}
.category_nav .title {
	margin: 0 auto 4rem;
	color: #ff1100;
	text-align: center;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.category_nav .title.visible {
	opacity: 1;
	transform: translateY(0);
}
.category_nav .title .en {
	display: block;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.9rem;
	font-weight: 300;
	line-height: 2.1rem;
}
.category_nav .title .jp {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2rem;
}
.category_nav .list {
	overflow: hidden;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.category_nav .list.visible {
	opacity: 1;
	transform: translateY(0);
}
.category_nav .list {
	margin-bottom: 4.5rem;
	padding: 0 2rem;
}
.category_nav .list .item {
	width: 24.9rem;
	margin: 0 auto 4rem;
}
.category_nav .list .item a {
	display: block;
	position: relative;
	overflow: hidden;
}
.category_nav .list .item .img {
	aspect-ratio: 498 / 348;
	display: block;
	overflow: hidden;
}
.category_nav .list .item .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.category_nav .list .item .set {
	padding: 0.8rem 0 0.4rem;
}
.category_nav .list .item .dev {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 2rem;
}
.category_nav .list .item .name,
.category_nav .list .item .year {
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 2rem;
}
.category_nav .list a {
	transition: opacity .3s;
}
.category_nav .list a:hover {
	opacity: .8;
}
.category_nav .list .swiper-scrollbar {
	margin: 0 auto;
	position: static;
	width: 29.4rem;
	height: .2rem;
	background: #cccccc;
}
.swiper-scrollbar-drag {
	height: .2rem;
	background: #999999;
}
.category_nav .btn {
	position: relative;
	padding: 0 7.5rem;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.category_nav .btn.visible {
	opacity: 1;
	transform: translateY(0);
}
.category_nav .btn a {
	display: block;
	color: #fff;
	background: #000;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 5rem;
	letter-spacing: 0.02em;
	text-align: center;
	transition: background .3s;
}
.category_nav .btn a:hover {
	background: #ed0000;
}
@media print, screen and (min-width: 768px) {/* PC */
.category_nav {
	padding: 12.4rem 0 9rem;
}
.category_nav .title {
	margin: 0 auto 6rem;
}
.category_nav .title .en {
	font-size: 3.4rem;
	line-height: 4rem;
}
.category_nav .title .jp {
	font-size: 1.2rem;
	line-height: 1.8rem;
}
.category_nav .list {
	margin-bottom: 7.4rem;
	padding: 0 4rem;
}
.category_nav .list .item {
	width: 33.2rem;
	margin: 0 auto 6.4rem;
}
.category_nav .list .item .img {
	aspect-ratio: 332 / 232;
}
.category_nav .list .item .set { 
	padding: 1.2rem 0 0.8rem;
}
.category_nav .list .item .dev {
	margin: 0 0 0.8rem;
	font-size: 1.6rem;
	line-height: 2.8rem;
}
.category_nav .list .item .name,
.category_nav .list .item .year {
	font-size: 1.4rem;
	line-height: 2rem;
}
.category_nav .list .swiper-scrollbar {
	width: 54rem;
	height: .4rem;
}
.swiper-scrollbar-drag {
	height: .4rem;
}
.category_nav .btn {
	padding: 0;
}
.category_nav .btn a {
	margin: 0 auto;
	width: 20rem;
}
}/* @media */

/* -----------------------------------------------
= print
----------------------------------------------- */
@media print {
body,
.intro .graph dt,
.intro .graph dd,
.intro .turning_point .subtitle,
.intro .turning_point ol,
.article .img_set,
.article .img,
.article .item,
.article .text,
.article .point .subtitle,
.article .point .title,
.article .project .subtitle,
.article .project .title,
.article .column .subtitle,
.article .column .logo,
.article .column .item,
.category_nav .title,
.category_nav .list,
.category_nav .btn {
	opacity: 1;
	transform: translateY(0);
}
}/* @media */