@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:#fff;
	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;
}

@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%;
					}
					


					
}



@media only screen and (max-width:900px){


			.popup {
				position:fixed;
				top:50%;
				left:50%;
				width:300px;
				height:430px;
				margin-left:-150px;
				margin-top:-215px;
				background-color:#fff;
				z-index:-9;
			}

			#cast_bk {
				position:absolute;
				width:180px;
				height:215px;
				background-color:#FD92B1;
				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;
			}
			

}


/* -------------------------------------
	KV
----------------------------------------*/
.header_kv {
	width: 100%;
}
.header_kv img {
	width: 100%;
	vertical-align: bottom;
}

/* -------------------------------------
	INTRODUCTION
----------------------------------------*/
.introduction__container {
	width: 100%;
	margin-bottom: 8%;
}
.introduction__container img {
	width: 100%;
	vertical-align: bottom;
}

.introduction__area {
	position: relative;
}

.introduction__bg1,
.introduction__bg2 {
	width: 50%;
}
.introduction__bg1 {
	position: absolute;
	top: 0;
	left: 0;
}
.introduction__bg2 {
	position: absolute;
	top: 0;
	right: 0;
}

.introduction__bg_sp {
	position: absolute;
	top: 0;
}

.introduction__title {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
	padding-top: 7%;
}

.introduction__text1 {
	width: 63%;
	margin: auto;
	padding-top: 5%;
}
@media only screen and (max-width:750px){
	.introduction__text1 {
		width: 90%;
	}
}

.introduction__photo_obi {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8vw;
	margin-top: 7%;
}

.introduction__photo_obi1,
.introduction__photo_obi2 {
	width: 100%;
}

.introduction__text2 {
	width: 63%;
	margin: auto;
	padding-top: 5%;
}
@media only screen and (max-width:750px){
	.introduction__text2 {
		width: 93%;
	}
}

.introduction__slide {
	background-image: url(/image/twenty_your_life_on2/introduction_slide_bg.png);
	background-size: cover;
	height: 320px;
	padding: 7% 0;
}
@media only screen and (max-width:750px){
	.introduction__slide {
		height: 160px;
	}
}


/* -------------------------------------
	MOVIE
----------------------------------------*/
.movie__container {
	width: 100%;
	margin-bottom: 8%;
}

.movie__area {
	position: relative;
}
@media only screen and (max-width:750px){
	.movie__area {
		    margin-bottom: 17%;
	}
}

.movie__bg {
	position: relative;
	width: 100%;
}
.movie__bg img {
	width: 100%;
	vertical-align: bottom;
}

.movie__title {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	width: 8%;
}
@media only screen and (max-width:750px){
	.movie__title {
		top: 4%;
		width: 18%;
	}
}

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

.movie__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
}
@media only screen and (max-width:750px){
	.movie__frame {
		width: 90%;
	}
}

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

.movie__box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
	aspect-ratio: 16 / 9;
}
@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__photo {
	width: 100%;
}
.movie__photo img {
	width: 100%;
	vertical-align: bottom;
}

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

.movie__youtube {
	opacity: 0;
}
.movie__youtube.active {
	opacity: 1;
}
.movie__chapter {
	position: absolute;
	top: 77%;
	left: 50%;
	transform: translate(-50%, -50%);
#	width: 60%;
	width: 20%;
	display: grid;
#	grid-template-columns: repeat(3, 1fr);
	grid-template-columns: repeat(1, 1fr);
	gap: 1.4vw;
}
@media only screen and (max-width:750px){
	.movie__chapter {
		top: 100%;
#		width: 90%;
#		grid-template-columns: repeat(2, 1fr);
		width: 50%;
		grid-template-columns: repeat(1, 1fr);
		gap: 1.4vw;
	}
}
.movie__chapter-button {
	background: #FCFFB8;
	cursor: pointer;
	transition: 1s;
	font-size: 1.3vw;
	color: #8B8D7A;
	font-weight: bold;
}
@media only screen and (max-width:750px){
	.movie__chapter-button {
		padding: 6%;
		font-size: 3.1vw;
	}
}
.movie__chapter-button.active {
	background: #FFDC68;
}


/* -------------------------------------
	CASTCHART
----------------------------------------*/
.castchart__container {
	width: 100%;
	margin-bottom: 8%;
}

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

.castchart__title {
	width: 20%;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:750px){
	.castchart__title {
		width: 45%;
	}
}

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

.castchart__list_area {
	position: relative;
}

.castchart__list_bg1 {
	position: absolute;
	width: 20%;
	top: 0;
}

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

.castchart__list_bg2 {
	position: absolute;
	width: 50%;
	top: 7%;
	right: 0;
}

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

.castchart__list_bg_sp {
	position: relative;
	width: 100%;
}

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

.castchart__list {
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1vw;
	position: relative;
	padding: 7% 0 3%;
}
@media only screen and (max-width:750px){
	.castchart__list {
		width: 90%;
		position: absolute;
		top: 58%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.castchart__list img {
	width: 100%;
	vertical-align: bottom;
	cursor: pointer;
}

.castchart__area {
	position: relative;
}

.castchart__bg1,
.castchart__bg2 {
	width: 50%;
}

.castchart__bg1 {
	position: absolute;
	top: 0;
	left: 0;
}

.castchart__bg2 {
	position: absolute;
	top: 0;
	right: 0;
}
.castchart__bg_sp {
	position: absolute;
	top: 0;
	z-index: -1;
	transform: translateY(-27%);
}

.castchart__chart {
	width: 83%;
	margin: auto;
	padding-top: 5%;
}
@media only screen and (max-width:750px){
	.castchart__chart {
		width: 95%;
	}
}

.castchart__staff {
	width:80%;
	max-width:1000px;
	margin:5% auto;
	text-align:left;
	font-size:1rem;
	color:#6D6D6D;
	line-height:1.3rem;
	letter-spacing: 2px;
}
@media only screen and (max-width:750px){
	.castchart__staff {
		width: 90%;
	}
}

.castchart__staff span {
	font-size:1.3rem;
	font-weight:bold;
}
.popup {
	display: none;
}
.popup.active {
	display: block;
}


/* -------------------------------------
	STORY
----------------------------------------*/
.story__container {
	width: 100%;
	margin-bottom: 8%;
}
.story__title {
	width: 10%;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:750px){
	.story__title {
	    width: 17%;
	}
}
.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: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1%;
}

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

.story__category_item {
	padding: 4%;
	background: #FBFF9E;
	color: #6C6C6C;
	border-radius: 15px;
	font-size: 1.1vw;
	cursor: pointer;
	transition: 1s;
}
@media only screen and (max-width:750px){
	.story__category_item {
		padding: 3%;
		font-size: 3.2vw;
	}
}
.story__category_item.active {
	background: #FED266;
}

.story__category_item.disable {
	background: gainsboro;
	cursor: unset;
}

.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: #6C6C6C;
	background: #F0F497;
	cursor: pointer;
}

.episodes_bt.active {
	background: #FED266;
}

.episodes_bt.disable {
	background: gainsboro;
	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%;
}
@media only screen and (max-width:750px){
	.story__image-bg {
	}
}

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

.story__image-pic {
	width: 97%;
	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: #6C6C6C;
	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);
}


/* -------------------------------------
	ON AIR
----------------------------------------*/
.onair__container {
	width: 100%;
	margin-bottom: 10%;
	position: relative;
}
@media only screen and (max-width:750px){
	.onair__container {
		margin-bottom: 30%;
	}
}

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

.onair__area {
	background: #F5EBEA;
	padding: 5% 0px 8% 0;
}

.onair__head {
	position: relative;
}

.onair__title {
	width: 9%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
@media only screen and (max-width:750px){
	.onair__title {
		width: 20%;
	}
}

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

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

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

.onair__line2 {
	width: 94%;
	margin: auto;
}
@media only screen and (max-width:750px){
	.onair__line2 {
		width: 100%;
	}
}

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

.onair__area_wrap {
	width: 70%;
	margin: 4% auto 6%;
}
@media only screen and (max-width:750px){
	.onair__area_wrap {
		width: 90%;
		margin: 4% auto 4%;
	}
}

.onair__area_heading {
	border-bottom: 1.9px solid #847E7E;
	margin-top: 2%;
	margin-bottom: 2%;
	font-size: min(2.1vw, 22px);
	text-align: left;
	color: #847E7E;
}
@media only screen and (max-width:750px){
	.onair__area_heading {
		font-size: 4vw;
	}
}

.onair__area_box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.onair__area_box a.active {
	background: #CD9AA1;
}

.onair__area_box a {
	background: #676767;
	padding: 1% 2%;
	margin: 1% 1%;
	font-size: 1.3rem;
	color: #fff;
	line-height: 1.7rem;
	text-decoration: none;
}
@media only screen and (max-width:750px){
	.onair__area_box a {
		margin: 1.5% 2%;
		font-size: 0.9rem;
	}
}

.onair__pic {
	position: absolute;
	top: 92%;
	left: 84%;
	width: 26%;
	transform: translate(-50%, -50%);
}
@media only screen and (max-width:750px){
	.onair__pic {
		width: 47%;
		top: 117%;
		left: 73%;
	}
}


/* -------------------------------------
	LINK
----------------------------------------*/
.link__title {
	width: 8%;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:750px){
	.link__title {
		width: 15%;
	}
}

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

.link__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.9vw;
	width: 60%;
	margin: 4% auto;
}
@media only screen and (max-width:750px){
	.link__list {
		grid-template-columns: repeat(1, 1fr);
		gap: 6vw;
		width: 80%;
	}
}

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


/* -------------------------------------
	FOOTER
----------------------------------------*/
.footer__container {
	position: relative;
	width: 100%;
}

.footer__bg {
	width: 100%;
	position: relative;
}

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

.footer__copyright {
	font-size: min(2vw, 18px);
	color: #7C6F70;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media only screen and (max-width:750px){
	.footer__copyright {
		font-size: min(2.1vw, 22px);
	}
}

.footer__x {
	position: absolute;
	top: 60%;
	left: 90%;
	transform: translate(-50%, -50%);
	width: 4vw;
}
@media only screen and (max-width:750px){
	.footer__x {
		width: 6vw;
	}
}
.footer__x img {
	width: 100%;
	vertical-align: bottom;
}


/* -------------------------------------
	POPUP
----------------------------------------*/
.modal-pop{
	width: 100vw;
	height: 100vh;
	position:fixed;
	top: 0;
	left:0;
	z-index:9997!important;
	display: none;
}

.modal-pop-bg{
	background-color: #FD92B1;
	width: 100%;
	height: 100%;
	position:fixed;
	z-index:9998!important;
}

.modal-pop-main {
	position: relative;
	# height: 70%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	box-sizing: border-box;
}

@media screen and (max-width: 750px) {
	.modal-pop-main {
		top: 50%;
	}
}

.modal-content{
	line-height: 28px;
	color: #777777;
}
@media screen and (max-width: 750px) {
	.modal-content{
		line-height: 150%;
		font-size: 14px;
	}
}

.modal-hint-title {
	background: #FF9900;
	font-weight: bold;
	color: #ffffff;
	padding: 5px;
	margin-bottom: 15px;
}

.modal-hint-text {
	overflow-y: scroll;
	max-height: min(50vh, 500px);
	text-align: left;
	font-size: 14px;
}
@media screen and (max-width: 750px) {
	.modal-hint-text {
		max-height: min(50vh, 400px);
	}
}

.modal-hint-comp {
	text-align: right;
}

.modal-close {
	display: block;
	margin: 10px auto 0;
	background: #fff;
	width: 40%;
	text-align: center;
	border: 2px solid #BFBFBF;
	border-radius: 10px;
	padding: 5px;
	color: #BFBFBF;
	font-weight: bold;
}

/* -------------------------------------
	MENU
----------------------------------------*/
/* PC
==================*/
.menu__container {
	background: #F9FF69;
	width: 100%;
	padding: 1% 0;
	height: 3.4vw;
}
.menu__area {
	width: 60%;
	height: 100%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	transform: translateX(-2.3%);
}
.menu_item {
	cursor: pointer;
	position: relative;
	height: 80%;
}
.menu_item img {
	height: 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:9997!important;
	z-index:2!important;
	display: none;
}
.menu__modal-pop-bg{
	background-color: #1119;
	width: 100%;
	height: 100%;
	position:fixed;
#	z-index:9998!important;
	z-index:2!important;
}
.menu__modal-pop-main {
	position: relative;
	background: #FD92B1;
	width: 70%;
	height: 100%;
	top: 0%;
	left: 0%;
#	z-index: 9999;
	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;
}


/* -------------------------------------
	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;
}


/* -------------------------------------
	XXXXX
----------------------------------------*/