@font-face {
	font-family: 'NotoSansJP';
	src: url(/font/NotoSansJP-Regular.ttf);
}

@font-face {
	font-family: 'NotoSansJPBold';
	src: url(/font/NotoSansJP-Bold.ttf);
}
body{
	text-align: center;
	margin: 0;
	font-family: NotoSansJP;
	touch-action: manipulation;
}

img{
//	width: 100%;
//	height: auto;
	vertical-align: bottom;
}

#content {
	width:100%;
	text-align:center;
	margin: 0px auto;
	max-width:1920px;
	background:url("/image/new/bg.png");
	background-attachment: fixed;
	background-size: cover;
	background-position: top center;
}

#menu {
	margin-top:-15%;
}

.sp{
	display: none;
}

.pc{
	display: block;
}

.footer{
	margin-top:5%;
}

#youtube{
	width: 80%;
	padding-top: 10%;
	position: absolute;
	bottom: 10%;
	left: 10%;
}
#youtube iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

.youtube{
	width: 52%;
	padding-top: 29.3%;
	position: absolute;
	top: 15%;
	left: 24%;
}

.youtube iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

#chara {
	position:relative;
	margin-top:10%;
	background:url(/image/new/chara.png);
	background-size:contain;
	width:100%;
	padding-top:104.323%;
}

#chara div{
	position:absolute;
	width:90%;
	top:12%;
	left:5%;
}

#chara div img{
	width:17%;
	margin:1%;
}

#syouhin {
	position:relative;
	margin-top:10%;
	background:url(/image/new/syouhin.png);
	background-size:contain;
	width:100%;
	padding-top:59.07%;
}

#syouhin img{
	width:30%;
}
/*
#pck_btn {
	position:absolute;
	top:30%;
	right:5%;
}
*/

#pck_btn {
	position:absolute;
	top:45%;
	right:5%;
}

#dl_btn {
	position:absolute;
	top:55%;
	right:5%;
}

#menu_nav {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:100;
	display:none;
}

#layer {
	width:100%;
	height:100%;
	background-color:#000000;
	position:fixed;
	top:0px;
	left:0px;
	z-index:-10;
}

.popup {
	position:fixed;
	top:50%;
	left:50%;
	width:800px;
	height:400px;
	margin-left:-350px;
	margin-top:-200px;
	background-color:#D5CFC1;
	z-index:-9;
}

#cast_img {
	height:400px;
	float:left;
}

#close_img{
	position:absolute;
	top:0px;
	right:0px;
	width:50px;
	cursor: pointer;
}

#cast_name {
	position:absolute;
	top:80px;
	left:350px;
	color:#57310F;
	font-weight:bold;
	font-size:27px;
}

#cast_info {
	position:absolute;
	top:125px;
	left:350px;
	color:#57310F;
	font-size:14px;
}

#cast_drama{
	position:absolute;
	top:200px;
	left:350px;
	color:#464644;
	font-size:16px;
	line-height:30px;
	text-align:left;
}

#cast_bk {
	display: none;
}

.cast__icon {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2%;
	width: 60%;
	max-width: 850px;
	margin: 4% auto;
}

.cast__icon_pic {
	width: 100%;
	cursor: pointer;
}

.cast__icon_pic img {
	width: 100%;
}

@media only screen and (max-width:750px){
	.pc{
		display: none;
	}

	.sp{
		display: block;
	}

	#menu {
		margin-top:-20%;
	}

	.footer{
		margin-top:8%;
	}

	#youtube{
		left: 5%;
		width: 90%;
		padding-top: 10%;
	}

	.youtube{
		left: 11.5%;
		width: 76%;
		padding-top: 42.5%;
		top:15%;
	}

	#chara {
		position:relative;
		margin-top:10%;
		background:url(/image/new/sp/chara.png);
		background-size:contain;
		width:100%;
		padding-top:261.667%;
	}

	#chara div{
		position:absolute;
		width:90%;
		top:7%;
		left:5%;
	}

	#chara div img{
		width:29%;
		margin:1%;
	}

	#syouhin {
		position:relative;
		margin-top:10%;
		background:url(/image/new/sp/syouhin.png);
		background-size:contain;
		width:100%;
		padding-top:103.438%;
	}

	#syouhin img{
		width:40%;
	}
/*
	#pck_btn {
		position:absolute;
		top:75%;
		right:7%;
	}
*/

	#pck_btn {
		position:absolute;
		top:75%;
		right:30%;
	}

	#dl_btn {
		position:absolute;
		top:75%;
		left:7%;
	}

	.cast__icon {
		width: 92%;
	}

}


@media only screen and (max-width:900px){
	.popup {
		position:fixed;
		top:50%;
		left:50%;
		width:300px;
		height:400px;
		margin-left:-150px;
		margin-top:-200px;
		background-color:#D5CFC1;
		z-index:-9;
	}

	#cast_bk {
		position:absolute;
		width:180px;
		height:215px;
		background-color:#946645;
		top:0px;
		left:0px;
		display:block;
	}

	#cast_img {
		position:absolute;
		height:220px;
		left:0px;
		top:-20px;
	}

	#close_img{
		position:absolute;
		top:0px;
		right:0px;
		width:50px;
	}

	#cast_name {
		position:absolute;
		top:230px;
		left:10px;
		color:#57310F;
		font-weight:bold;
		font-size:20px;
	}

	#cast_info {
		position:absolute;
		top:260px;
		left:10px;
		color:#57310F;
		font-size:13px;
	}

	#cast_drama{
		position:absolute;
		top:300px;
		left:10px;
		color:#464644;
		font-size:14px;
		line-height:19px;
		text-align:left;
	}

}


/* -------------------------------------
	MENU
----------------------------------------*/

/* PC
==================*/
.menu__container {
	background: #946645;
	width: 100%;
	padding: 1.5% 0;
}
.menu__area {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.4vw;
	width: 60%;
	margin: auto;
}
.menu_item {
	width: 100%;
	cursor: pointer;
	position: relative;
}
.menu_item img {
    width: 100%;
}
.menu_item .menu_item-on{
	opacity: 0;
}
.menu_item .menu_item-off{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
}
.menu_item:hover .menu_item-on{
	opacity: 1;
}
.menu_item:hover .menu_item-off{
	opacity: 0;
}

/* SP
==================*/
.fab__button {
	position: fixed;
	width: 10%;
	top: 3%;
	right: 3%;
	z-index: 3;
}
.fab__button img {
	width: 100%;
}

.menu__modal-pop{
	width: 100vw;
	height: 100vh;
	position:fixed;
	top: 0;
	left:0;
	z-index:2!important;
	display: none;
}
.menu__modal-pop-bg{
	background-color: #1119;
	width: 100%;
	height: 100%;
	position:fixed;
	z-index:2!important;
}
.menu__modal-pop-main {
	position: relative;
	background: #8F6648;
	width: 70%;
	height: 100%;
	top: 0%;
	left: 0%;
	z-index: 3;
	padding: 10px;
	box-sizing: border-box;
	overflow-y: auto;
	opacity: 0;
	transform: translateX(-100%);
	transition: .4s;
}
.menu__modal-pop-main.active {
	transform: translateX(0);
	opacity: 1;
}

.menu__modal-content {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	row-gap: 3vw;
	place-items: center;
	padding-top: 10%;
}
.menu__sp {
	width: 70%;
}
.menu__sp a {
	display: block;
}
.menu__sp img {
	width: 100%;
}

.fab__button {
	display: none;
}
.fab__button.active {
	display: block;
}


/* -------------------------------------
	MOVIE
----------------------------------------*/
.movie__title {
	width:70%;
	max-width:500px;
	margin-top:7%;
	margin: 7% auto 0;
}
@media only screen and (max-width:750px){
	.movie__title {
	}
}

.movie__title img {
	width: 100%;
	vertical-align: bottom;
}
.movie__area {
	margin-top: 2%;
	position: relative;
}
.movie__frame {
	position: relative;
	width: 60%;
	margin: auto;
}
@media only screen and (max-width:750px){
	.movie__frame {
		width: 93%;
	}
}

.movie__frame img {
	width: 100%;
	vertical-align: bottom;
}

.movie__box {
	width: 90%;
	aspect-ratio: 16 / 9;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media only screen and (max-width:750px){
	.movie__box {
		width: 90%;
	}
}
.movie__box iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 1s;
}
.movie__youtube {
	opacity: 0;
}
.movie__youtube.active {
	opacity: 1;
	z-index: 1;
}


.movie__chapter {
	width: 55%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4vw;
	margin: 2% auto;
}
@media only screen and (max-width:750px){
	.movie__chapter {
		top: 100%;
		width: 90%;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4vw;
	}
}
.movie__chapter-button {
	background: #A58C87;
	cursor: pointer;
	transition: 1s;
	font-size: 1.3vw;
	color: #fff;
	font-weight: bold;
	padding: 3%;
}
@media only screen and (max-width:750px){
	.movie__chapter-button {
		padding: 6%;
		font-size: 3.1vw;
	}
}
.movie__chapter-button.active {
	background: #946645  ;
}


/* -------------------------------------
	STORY
----------------------------------------*/
.story__container {
	width: 100%;
	margin-bottom: 8%;
}
.story__title {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:750px){
	.story__title {
		width: 70%;
	}
}
.story__title img {
	width: 100%;
	vertical-align: bottom;
}
.story__category_menu {
	width: 55%;
	margin: 3% auto;
}
@media only screen and (max-width:750px){
	.story__category_menu {
		width: 90%;
	}
}

.story__category {
	width: 70%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4%;
	margin: auto;
}

@media only screen and (max-width:750px){
	.story__category {
		width: 100%;
	}
}

.story__category_item {
	padding: 4%;
	background: #A58C87;
	color: #fff;
	font-size: 1.1vw;
	cursor: pointer;
	transition: 1s;
}
@media only screen and (max-width:750px){
	.story__category_item {
		padding: 3%;
		font-size: 2.7vw;
	}
}
.story__category_item.active {
	background: #946645;
	color: #fff;
}

.story__category_item.disable {
	background: gray;
	cursor: unset;
	color: #fff;
	border: 1px solid gray;
}

.story__episodes-list {
	list-style: none;
	margin: 0 0 5% 0;
	padding: 0;
	display: table;
	width: 100%;
}

.story__episodes-list li {
	display: table-cell;
	vertical-align: middle;
	font-size: 1.1vw;
}
@media only screen and (max-width:750px){
	.story__episodes-list li {
		font-size: 3.0vw;
	}
}

.story__episodes-list li:nth-child(1) {
	width: 15%;
}
.story__episodes-list li:nth-child(2) {
	width: 85%;
}
@media only screen and (max-width:750px){
	.story__episodes-list li:nth-child(1) {
		width: 22%;
		vertical-align: top;
	}
	.story__episodes-list li:nth-child(2) {
	    width: 78%;
	}
}

.episodes_bt {
	color: #fff;
	background: #A58C87;
	cursor: pointer;
}

.episodes_bt.active {
	background: #946645;
}

.episodes_bt.disable {
	background: gray;
	cursor: unset;
}

.story__episodes-intoro {
	padding: 10%;
	width: 92%;
	box-sizing: border-box;
}
@media only screen and (max-width:750px){
	.story__episodes-intoro {
		width: 89%;
		padding: 8.8%;
	}
}

.story__episodes-chapter-cell {
	padding: 22%;
}
@media only screen and (max-width:750px){
	.story__episodes-chapter-cell {
	    padding: 15%;
	}
}

.story__episodes-chapter {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 10px;
	width: 100%;
}
@media only screen and (max-width:750px){
	.story__episodes-chapter {
		grid-template-columns: repeat(5, 1fr);
	}
}

.story__episodes-list li:nth-child(2) {
	position: relative;
}
.epi.defo {
}
.epi {
	position: absolute;
	width: 100%;
	top: 0px;
	opacity: 0;
}
.epi.active {
	opacity: 1;
	position: relative;
	z-index: 1;
}

.story__image {
    position: relative;
}

.story__image-bg {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5%;
	visibility: hidden;
}
@media only screen and (max-width:750px){
	.story__image-bg {
	}
}

.story__image-bg img {
	width: 100%;
	vertical-align: bottom;
}

.story__image-pic {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media only screen and (max-width:750px){
	.story__image-pic {
		width: 95%;
	}
}

.story__image-pic img {
	width: 100%;
	vertical-align: bottom;
}

.episodes_image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: .7s;
}
.episodes_image.active {
	opacity: 1;
}

.story__text {
	position: relative;
	text-align: left;
	color: #040000;
	font-size: min(1.8vw, 18px);
}
@media only screen and (max-width:750px){
	.story__text {
		font-size: min(4vw, 16px);
	}
}

.story__text-area {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.story__text-area.active {
	position: relative;
	opacity: 1;
}

.story__intro {
	color: #2E2E2E;
	font-weight: bold;
	position: relative;
	padding-left: 7%;
	font-size: 1.8vw;
	font-size: min(1.9vw, 19px);
}
@media only screen and (max-width:750px){
	.story__intro {
		font-size: min(5vw, 18px);
	}
}

.story__intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 2%;
	width: 2%;
	height: 100%;
	background: #2E2E2E;
	transform: skew(20deg);
}


.footer__container {
	position: relative;
	width: 100%;
	margin-top: 8%;
	padding-bottom: 2%;
}
@media only screen and (max-width:750px){
	.footer__container {
		margin-top: 15%;
	}
}

.footer__x {
	width: 4vw;
	position: relative;
	left: 90%;
	transform: translate(-50%, 0%);

}
@media only screen and (max-width:750px){
	.footer__x {
		width: 6vw;
	}
}
.footer__x img {
	width: 100%;
	vertical-align: bottom;
}

.footer__copyright {
	font-size: 13px;
	color: #ffffff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media only screen and (max-width:750px){
	.footer__copyright {
		font-size: min(2.8vw, 13px);
	}
}


.footer__container {
	position: relative;
	width: 100%;
	margin-top: 8%;
	padding-bottom: 2%;
}
@media only screen and (max-width:750px){
	.footer__container {
		margin-top: 15%;
	}
}

.footer__x {
	width: 4vw;
	position: relative;
	left: 90%;
	transform: translate(-50%, 0%);

}
@media only screen and (max-width:750px){
	.footer__x {
		width: 6vw;
	}
}
.footer__x img {
	width: 100%;
	vertical-align: bottom;
}

.footer__copyright {
	font-size: 13px;
	color: #ffffff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media only screen and (max-width:750px){
	.footer__copyright {
		font-size: min(2.8vw, 13px);
	}
}


/* -------------------------------------
	FAB
----------------------------------------*/
.page-top-fab {
	position: fixed;
	bottom: 1%;
	right: 2%;
	width: 13%;
	max-width: 72px;
	z-index: 4;
	transition: 0.8s ease-in-out;
	transform: translateY(30px);
	opacity: 0;
}
.page-top-fab a {
	display: block;
	text-decoration: none;
}

.page-top-fab svg:hover {
	opacity: 0.75;
}
.page-top-fab svg{
	width: 100%;
}

.page-top-fab.activeFub {
	transform: translateY(0);
	opacity: 1.0;
}