@charset "utf-8";
/* -----------------------------------------------
= common
----------------------------------------------- */
body {
	position: relative;
	opacity: 0;
	transition: opacity .8s;
}
body.visible {
	opacity: 1;
}
body::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	background: linear-gradient(#DDAEC8 0,#5EBAC4 60%,#A989B8 100%);
}
@media print, screen and (min-width: 768px) {/* PC */
body::before {
	background: linear-gradient(#D8B0C7 0,#6CB8C1 50%,#A58AB5 100%);
}
}/* @media */
/* -----------------------------------------------
= main_contents
----------------------------------------------- */
.main_contents {
	position: relative;
	margin-bottom: -14rem;
	padding-bottom: 14rem;
}
.main_contents::before,
.main_contents::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.main_contents::before {
	z-index: -2;
	background: url(../../img/nanimono/interview_bg01.png) repeat-y 50% 0;
}
.main_contents::after {
	z-index: -1;
	background: url(../../img/shared/bg01.png?230130);
	mix-blend-mode: multiply;
}
.main_contents .bg {
	position: absolute;
	z-index: -2;
	width: 28.6rem;
	height: 50.1rem;
	background: #262626;
	mix-blend-mode: overlay;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.main_contents .bg.type01 {
	top: 61rem;
	right: 0;
}
.main_contents .bg.type02 {
	top: calc(61rem + 110rem);
	left: 0;
	transform: rotate(180deg);
}
.main_contents .bg.type03 {
	top: calc(61rem + 110rem + 110rem);
	right: 0;
}
.main_contents .bg.type04 {
	top: calc(61rem + 110rem + 110rem + 110rem);
	left: 0;
	transform: rotate(180deg);
}
.main_contents .bg.type05 {
	top: calc(61rem + 110rem + 110rem + 110rem + 110rem);
	right: 0;
}
.main_contents .bg.type06 {
	top: calc(61rem + 110rem + 110rem + 110rem + 110rem + 110rem);
	left: 0;
	transform: rotate(180deg);
}
@media print, screen and (min-width: 768px) {/* PC */
.main_contents {
	margin-bottom: -28.6rem;
	padding-bottom: 28.6rem;
}
.main_contents .bg {
	width: 49.3rem;
	height: 86.4rem;
}
.main_contents .bg.type01 {
	top: 44.4rem;
}
.main_contents .bg.type02 {
	top: 154.6rem;
	width: 91.4rem;
	height: 160.2rem;
}
.main_contents .bg.type03 {
	top: 240.8rem;
}
.main_contents .bg.type04,
.main_contents .bg.type05,
.main_contents .bg.type06 {
	display: none;
}
}/* @media */
/* -----------------------------------------------
= pagetitle
----------------------------------------------- */
.pagetitle {
	position: relative;
	height: 20.6rem;
	padding: 9.7rem 0 0;
	overflow: hidden;
}
.pagetitle::before {
	content: '';
	position: absolute;
	top: 9.3rem;
	left: 27rem;
	width: 24.87rem;
	height: 22.517rem;
	background: url(../../img/nanimono/index_bg01.png) no-repeat 0 / cover;
	mix-blend-mode: multiply;
}
.pagetitle h1 {
	position: absolute;
	top: 10rem;
	left: 0;
	width: 100%;
	color: #fff;
	text-align: center;
	letter-spacing: .06em;
}
.pagetitle h1 .en {
	display: block;
	position: relative;
	z-index: 2;
	padding: 7.3rem 0 1.7rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 2.4rem;
}
.pagetitle h1 .jp {
	display: block;
	position: relative;
	z-index: 2;
	padding: 0 0 1.2rem;
	font-size: 1.4rem;
}
.pagetitle .random {
	position: absolute;
	top: 9.7rem;
	left: 0;
	width: 100%;
	height: 100%;
}
.pagetitle .random::before,
.pagetitle .random::after {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
}
.pagetitle .random::before {
	top: .1rem;
	left: 0;
	width: 50%;
	height: 14.6rem;
	margin-right: -4rem;
	clip-path: polygon(0 100%, 0 0, 100% 0, 64.3% 100%);
}
.pagetitle .random::after {
	top: 3.5rem;
	left: 2.5rem;
	width: calc(100% - 2.5rem);
	height: 14.6rem;
	clip-path: polygon(0 100%, 22.6% 0, 100% 0, 100% 100%);
}
.pagetitle .random.type1::before,
.pagetitle .random.type1::after {
	background-image: url(../../img/nanimono/index_pagetitle_ishii.jpg);
}
.pagetitle .random.type2::before,
.pagetitle .random.type2::after {
	background-image: url(../../img/nanimono/index_pagetitle_otsuka.jpg);
}
.pagetitle .random.type3::before,
.pagetitle .random.type3::after {
	background-image: url(../../img/nanimono/index_pagetitle_oba.jpg);
}
.pagetitle .random.type4::before,
.pagetitle .random.type4::after {
	background-image: url(../../img/nanimono/index_pagetitle_obayashi.jpg);
}
.pagetitle .random.type5::before,
.pagetitle .random.type5::after {
	background-image: url(../../img/nanimono/index_pagetitle_goto.jpg);
}
.pagetitle .random.type6::before,
.pagetitle .random.type6::after {
	background-image: url(../../img/nanimono/index_pagetitle_kobayashi.jpg);
}
.pagetitle .random.type7::before,
.pagetitle .random.type7::after {
	background-image: url(../../img/nanimono/index_pagetitle_komeda.jpg);
}
.pagetitle .random.type8::before,
.pagetitle .random.type8::after {
	background-image: url(../../img/nanimono/index_pagetitle_takeoka.jpg);
}
.pagetitle .random.type9::before,
.pagetitle .random.type9::after {
	background-image: url(../../img/nanimono/index_pagetitle_tei.jpg);
}
.pagetitle .random.type10::before,
.pagetitle .random.type10::after {
	background-image: url(../../img/nanimono/index_pagetitle_nagaseki.jpg);
}
.pagetitle .random.type11::before,
.pagetitle .random.type11::after {
	background-image: url(../../img/nanimono/index_pagetitle_ban.jpg);
}
.pagetitle .random.type12::before,
.pagetitle .random.type12::after {
	background-image: url(../../img/nanimono/index_pagetitle_jessica.jpg);
}
.pagetitle .random.type13::before,
.pagetitle .random.type13::after {
	background-image: url(../../img/nanimono/index_pagetitle_yamaki.jpg);
}
.pagetitle .random.type14::before,
.pagetitle .random.type14::after {
	background-image: url(../../img/nanimono/index_pagetitle_yamamoto.jpg);
}
.pagetitle .random.type15::before,
.pagetitle .random.type15::after {
	background-image: url(../../img/nanimono/index_pagetitle_watanabe.jpg);
}
.pagetitle .random.type16::before,
.pagetitle .random.type16::after {
	background-image: url(../../img/nanimono/index_pagetitle_ikeda.jpg);
}
.pagetitle .random.type17::before,
.pagetitle .random.type17::after {
	background-image: url(../../img/nanimono/index_pagetitle_kamada.jpg);
}
@media print, screen and (min-width: 768px) {/* PC */
.pagetitle {
	height: 59.2rem;
	padding: 11.3rem 0 0;
}
.pagetitle::before {
	top: 14.2rem;
	left: 50%;
	margin-left: -12.7rem;
	width: 59.1rem;
	height: 53.5rem;
}
.pagetitle h1 .en {
	padding: 25rem 0 2.8rem;
	font-size: 5.7rem;
}
.pagetitle h1 .jp {
	padding: 0 0 1.8rem;
	font-size: 1.8rem;
}
.pagetitle .random {
	top: 11.3rem;
}
.pagetitle .random::before {
	top: 0;
	width: calc(50% + 8.5rem);
	height: 51.2rem;
	margin-right: -8.5rem;
}
.pagetitle .random::after {
	top: 7.1rem;
	left: 50%;
	width: calc(50% + 65rem);
	height: 52.1rem;
	margin-left: -65rem;
}
.pagetitle .random.type1::before {
	background-position: 0;
}
.pagetitle .random.type1::after {
	background-position: 50% 85%;
}
}/* @media */
/* -----------------------------------------------
= search
----------------------------------------------- */
.search {
	position: relative;
	z-index: 3;
	margin: 0 2rem 6rem;
	padding: 3rem 1.8rem 7rem;
	color: #fff;
	background: url(../../img/nanimono/index_bg02.png) no-repeat 50% 0 / cover;
	opacity: 0;
	transform: translateY(4rem);
	transition: .8s .4s;
}
.search.visible {
	opacity: 1;
	transform: translateY(0);
}
.search button {
	color: #fff;
}
.search .reset {
	position: absolute;
	bottom: 3rem;
	left: 50%;
	transform: translateX(-50%);
}
.search .reset button {
	width: 12rem;
	height: 3.4rem;
	padding-right: 1rem;
	color: #9B7E9C;
	background: #fff;
	border-radius: .2rem;
	font-size: 1.3rem;
	letter-spacing: .02em;
	transition: opacity .3s;
}
.search .reset button:hover {
	opacity: .8;
}
.search .reset button::before,
.search .reset button::after {
	content: '';
	position: absolute;
	top: 50%;
	right: .8rem;
	width: 1rem;
	height: .1rem;
	background: #9B7E9C;
	text-align: left;
}
.search .reset button::before {
	transform: rotate(-45deg);
}
.search .reset button::after {
	transform: rotate(45deg);
}
.search .subtitle {
	display: flex;
	align-items: flex-end;
	margin-bottom: 4rem;
	padding-bottom: 1rem;
	border-bottom: .1rem solid rgba(255,255,255,.3);
	letter-spacing: .06em;
}
.search .subtitle .en {
	margin-right: 1em;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
}
.search .subtitle .jp {
	font-size: 1.2rem;
}
.search dt {
	margin-bottom: 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.7rem;
	letter-spacing: .02em;
}
.search dd {
	margin: 0 -.5rem 2rem 0;
}
.search dd li {
	display: inline-block;
	margin: 0 .5rem 1rem 0;
}
.search dd li button {
	padding: 0 .5rem;
	border: .1rem solid #fff;
	border-radius: .2rem;
	font-size: 1.2rem;
	line-height: 2.4rem;
	letter-spacing: .02em;
	transition: .3s;
}
.search dd li button.is-selected {
	color: #918eb1;
	background: #fff;
}
.search dd li button:hover {
	color: #918eb1;
	background: #fff;
}
@media print, screen and (min-width: 768px) {/* PC */
.search {
	max-width: 109.6rem;
	margin: -6.5rem auto 8rem;
	padding: 5rem 3rem 2.41rem;
}
.search .reset {
	position: static;
	max-width: 96rem;
	margin: 0 auto;
	overflow: hidden;
	transform: translateX(0);
}
.search .reset button {
	float: right;
	position: relative;
	width: 16.8rem;
	height: 3.1rem;
	padding-right: 2rem;
	font-size: 1.4rem;
}
.search .subtitle {
	max-width: 96rem;
	margin: 0 auto 1.6rem;
	padding-bottom: 2rem;
}
.search .subtitle .en {
	margin-right: 1em;
	font-size: 3rem;
}
.search .subtitle .jp {
	font-size: 1.5rem;
}
.search dl {
	display: flex;
	max-width: 96rem;
	margin: 0 auto 2.6rem;
}
.search dt {
	width: 24rem;
	margin: .6rem 0;
	font-size: 1.8rem;
	line-height: 2.4rem;
}
.search dl:nth-last-child(3) dt {
	margin-top: -.4rem;
}
.search dd {
	flex: 1;
	margin: 0 -.5rem 0 0;
}
.search dd li {
	margin: 0 .5rem 1rem 0;
}
.search dd li button {
	font-size: 1.4rem;
	line-height: 2.8rem;
}
}/* @media */
/* -----------------------------------------------
= index_wrap
----------------------------------------------- */
.index_wrap {
	position: relative;
	padding: 0 2rem 2rem;
	overflow: hidden;
}
.index_wrap .item {
	margin: 0 0 4rem;
}
.index_wrap .item a {
	display: block;
	position: relative;
	letter-spacing: .02em;
}
.index_wrap .item a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 32.8rem;
	background: url(../../img/nanimono/index_item_bg01_sp.png) no-repeat 50% / cover;
}
.index_wrap .item .dev {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.index_wrap .item .dev span {
	display: inline-block;
	margin-bottom: .4rem;
	padding: 0 .5rem;
	color: #fff;
	background: rgba(155,126,156,.9);
	font-family: 'Montserrat', sans-serif;
	font-size: 1.3rem;
	line-height: 2.6rem;
}
.index_wrap .item .img {
	margin-right: 1.7rem;
}
.index_wrap .item .set {
	padding: 1.9rem 1.7rem;
}
.index_wrap .item .name {
	margin-bottom: 1.5rem;
}
.index_wrap .item .name .jp {
	margin-right: 1rem;
	font-size: 1.8rem;
	font-weight: 500;
}
.index_wrap .item .name .en {
	color: rgba(28,28,28,.6);
	font-family: 'Montserrat', sans-serif;
	font-size: 1.3rem;
}
.index_wrap .item .year {
	font-size: 1.4rem;
	line-height: 2.24rem;
}
.index_wrap .item .movie .img {
	position: relative;
}
.index_wrap .item .movie .img::before,
.index_wrap .item .movie .img::after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
	opacity: .8;
}
.index_wrap .item .movie .img::before {
	top: calc(50% - 1.7rem);
	width: 3.4rem;
	height: 3.4rem;
	margin-left: -1.7rem;
	background: #ed0000;
	border-radius: 50%;
}
.index_wrap .item .movie .img::after {
	top: calc(50% - .3rem);
	margin-left: -.1rem;
	border: solid transparent;
	border-width: .3rem .5rem;
	border-left-color: #fff;
}
@media print, screen and (min-width: 768px) {/* PC */
.index_wrap {
	display: flex;
	flex-wrap: wrap;
	max-width: 129.6rem;
	margin: 0 auto;
	padding: 0;
}
.index_wrap .item {
	width: calc(50% - 4.2rem);
	height: 21rem;
	margin: 0 2.1rem 3.2rem;
	padding: 2.5rem 0 0;
}
.index_wrap .item a {
	height: 100%;
}
.index_wrap .item a::before {
	top: 0;
	bottom: auto;
	height: 21rem;
	background: url(../../img/nanimono/index_item_bg01.png) no-repeat 50% / 100% auto;
}
.index_wrap .item .dev {
	position: static;
}
.index_wrap .item .dev span {
	padding: 0 1rem;
	font-size: 1.5rem;
	line-height: 3rem;
}
.index_wrap .item .dev span.is-pc_inline {
	padding-right: 0;
}
.index_wrap .item .dev br.is-sp + span {
	padding-left: 0;
}
.index_wrap .item .img {
	position: absolute;
	top: -2.5rem;
	right: 0;
	width: 25rem;
	margin-right: 0;
}
.index_wrap .item .set {
	padding: 2rem 0 0 5rem;
}
.index_wrap a img {
	filter: grayscale(100%);
	transition: filter .5s;
}
.index_wrap a:hover img {
	filter: grayscale(0);
}
.index_wrap .item .movie .img {
	position: absolute;
}
.index_wrap .item .movie .img::before {
	top: calc(50% - 3rem);
	width: 6rem;
	height: 6rem;
	margin-left: -3rem;
}
.index_wrap .item .movie .img::after {
	top: calc(50% - .8rem);
	margin-left: -.4rem;
	border-width: .8rem 1.4rem;
}
}/* @media */
/* -----------------------------------------------
= modal
----------------------------------------------- */
.modal.fade .modal_in {
	padding: 7.5rem 2.5rem 0;
}
.modal_btn_close {
	top: 4rem;
	right: 2.5rem;
}
.modal .embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	margin-bottom: 2.5rem;
}
.modal .embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media print, screen and (min-width: 768px) {/* PC */
.modal.fade .modal_in {
	max-width: 72rem;
	margin: 0 auto;
	padding: 12rem 4rem 0;
}
.modal_btn_close {
	top: 8rem;
	right: 4rem;
}
}/* @media */
/* -----------------------------------------------
= print
----------------------------------------------- */
@media print {
body,
.search {
	opacity: 1;
	transform: translateY(0);
}
}/* @media */

