@charset "utf-8";
/* -----------------------------------------------
= fv
----------------------------------------------- */
.fv {
	position: relative;
	margin: 0 15px 45px;
}
.fv .page_title {
	position: absolute;
	top: 15px;
	left: 15px;
	color: #fff;
	font-size: calc(12 / 375 * 100vw);
}
.fv .page_title span {
	display: block;
	margin: 8px 0 0 -5px;
	font-size: calc(58 / 375 * 100vw);
	font-style: italic;
	letter-spacing: -.06em;
}
.fv .lead {
	margin: 8px 0 0 -5px;
	font-size: 4rem;
	font-style: italic;
	letter-spacing: -.04em;
}
@media print, screen and (min-width: 768px) {/* PC */
.fv {
	max-width: 144rem;
	height: calc(100vh - 90px);
	max-height: 81rem;
	margin: 0 auto 4rem;
	padding: 0 3rem;
}
.fv img {
	height: calc(100vh - 90px);
	max-height: 81rem;
	object-fit: cover;
	object-position: 50% 0;
}
.fv .page_title {
	top: 2rem;
	left: 5rem;
	font-size: 2rem;
}
.fv .page_title span {
	font-size: 11.6rem;
}
.fv .lead {
	position: absolute;
	left: 4rem;
	bottom: 2rem;
	margin: 0;
	color: #fff;
	font-size: 9.4rem;
	font-style: italic;
	letter-spacing: -.1em;
}
}/* @media */
/* -----------------------------------------------
= profile
----------------------------------------------- */
.profile {
	position: relative;
	padding: 0 15px;
}
.profile .num {
	margin-bottom: 10px;
	font-size: 1.4rem;
}
.profile .en {
	position: absolute;
	top: 0;
	right: 15px;
}
.profile .name {
	margin-bottom: 10px;
	font-size: 3.4rem;
}
.profile .dev {
	margin-bottom: 5px;
	font-size: 1.4rem;
	line-height: 2.2rem;
	letter-spacing: .04em;
}
.profile .img {
	padding-top: 20px;
	border-top: 1px solid #000;
}
.profile .img img {
	height: 278px;
	object-fit: cover;
}
@media print, screen and (min-width: 768px) {/* PC */
.profile {
	max-width: 144rem;
	margin: 0 auto;
	padding: 0 3rem;
}
.profile .num {
	margin: 1rem 0 3.5rem;
	font-size: 2.4rem;
}
.profile .en {
	right: 3rem;
}
.profile .set {
	display: flex;
	margin-bottom: 1.5rem;
}
.profile .name {
	margin: 0 3rem 0 0;
	font-size: 4.8rem;
}
.profile .dev {
	margin-bottom: 0;
	font-size: 1.8rem;
	line-height: 2.4rem;
}
.profile .img {
	padding-top: 3.6rem;
}
.profile .img img {
	height: auto;
	object-fit: fill;
}
}/* @media */
/* -----------------------------------------------
= contents
----------------------------------------------- */
@media print, screen and (min-width: 768px) {/* PC */
.contents {
	display: flex;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 3rem;
}
.contents .side_nav {
	width: 51rem;
	margin-top: 50px;
	margin-bottom: 50px;
}
.contents .side_nav dl {
	position: sticky;
	top: 140px;
	width: 38rem;
	font-size: 1.8rem;
	line-height: 2.2rem;
	letter-spacing: .04em;
}
.contents .side_nav ul {
	margin-top: 10px;
	border-top: 1px solid #858585;
	font-weight: 500;
}
.contents .side_nav li {
	border-bottom: 1px solid #858585;
}
.contents .side_nav li a {
	display: inline-block;
	position: relative;
	padding: 8px 0 8px 2.2rem;
}
.contents .side_nav li a::before {
	content: '▶';
	position: absolute;
	top: 6px;
	left: 0;
	color: #32713a;
	opacity: 0;
	transition: opacity .3s;
}
.contents .side_nav li.is-current a::before {
	opacity: 1;
}
.contents .inner {
	flex: 1;
}
}/* @media */
/* -----------------------------------------------
= article
----------------------------------------------- */
.article {
	padding: 30px 15px;
}
.article .title {
	margin-bottom: 30px;
	font-size: 3.3rem;
	font-style: italic;
	letter-spacing: -.04em;
}
.article .text {
	font-size: 1.4rem;
	line-height: 2.2rem;
	letter-spacing: .04em;
}
.article .text + .text {
	margin-top: 1em;
}
.img_l {
	padding: 0 15px;
}
.img_l img {
	height: 278px;
	object-fit: cover;
}
@media print, screen and (min-width: 768px) {/* PC */
.article {
	max-width: 70rem;
	padding: 50px 0;
}
.article .title {
	margin-bottom: 5rem;
	font-size: 6.6rem;
}
.article .text {
	font-size: 2rem;
	line-height: 3.6rem;
}
.img_l {
	max-width: 1440px;
	margin-left: -51rem;
	padding: 0;
}
.img_l.last {
	margin: 0 auto;
	padding: 0 3rem;
}
.img_l img {
	height: auto;
	object-fit: fill;
}
}/* @media */
/* -----------------------------------------------
= others
----------------------------------------------- */
.others {
	margin: 65px 15px 0;
}
.others .title {
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
	font-size: 2.2rem;
	font-style: italic;
	text-align: center;
	letter-spacing: .04em;
}
.others ul {
	margin-bottom: 20px;
}
.others li {
	margin-bottom: 14px;
}
.others li a {
	display: block;
	position: relative;
	color: #fff;
}
.others li p {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	font-size: 2rem;
	letter-spacing: .12em;
}
.others li p span {
	display: block;
	margin-bottom: 10px;
	font-size: 3.6rem;
	font-style: italic;
	letter-spacing: .04em;
}
.others .link {
	text-align: center;
}
.others .link a {
	padding-bottom: 3px;
	border-bottom: 2px solid #000;
	font-size: 1.8rem;
	letter-spacing: .04em;
}
@media print, screen and (min-width: 768px) {/* PC */
.others {
	max-width: 1440px;
	margin: 0 auto;
	padding: 7rem 3rem 9rem;
}
.others .title {
	margin-bottom: 3rem;
	padding-bottom: 1.5rem;
	font-size: 3.2rem;
}
.others ul {
	display: flex;
	margin: 0 -1.5rem 3rem;
}
.others li {
	width: calc(1 / 3 * 100% - 3rem);
	margin: 0 1.5rem;
}
.others li a {
	display: block;
	position: relative;
	overflow: hidden;
}
.others li a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../../img/shared/contents_img_hover.png);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity .3s;
}
.others li a:hover::after {
	opacity: 1;
}
.others li a img {
	transition: transform .3s;
}
.others li a:hover img {
	transform: scale(1.1);
}
.others li p {
	font-size: 2rem;
}
.others li p span {
	margin-bottom: 10px;
	font-size: 4.8rem;
}
.others .link a {
	padding-bottom: 3px;
	font-size: 2.4rem;
}
}/* @media */