/*-----------
color
-----------*/

:root {
	--bg-color: #000;
	--text-color: #fff;
	--text-size: 20px;
	--link-color: #fff;
	--link-hover-color: red;
	--link-no-color: #b2b2b2;
  }

/* @media screen and ( max-width:1000px ) {
	:root {
		--box-size: 150px;
	  }
}

@media screen and ( max-width:768px ) {
	:root {
		--box-size: 100px;
		--text-size: 15px;
	  }
} */

/*-----------
reset
-----------*/
* {margin: 0;padding: 0;box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}


/*-----------
body
-----------*/
body {color: var(--text-color); font-size:var(--text-size) ;background: var(--bg-color); position: relative;overflow-x: hidden;font-family: 'Noto Serif JP', serif;}
/* body.en{font-family: 'Cabin', sans-serif;}
body.zh{font-family: 'Noto Serif TC', serif;} */
img {
	height: auto;
	display: block;
}

@media screen and (max-width: 800px){
	body{width: 100%;}
	img{width: 100%;}
}

@media screen and (max-width: 768px){
	body{font-size: 20px;}
}


/*-----------
common
-----------*/
/*article*/
article {width: 100%;position: relative;margin: 0 auto;overflow: hidden;}
section{width: 100%;margin: 0 auto;}

/*link*/
a:hover img{filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9;}

/*flex box*/
.flex{display: flex; align-items: flex-start;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}

@media screen and ( max-width:768px ) {
	.flex{flex-wrap: wrap;}
}

/*btn_link*/
.btn_link{display: block;position: relative; border:1px solid var(--text-color); color: var(--link-color); text-decoration: none; font-size: 1.3em; text-align: center;line-height: 1.1; padding: .5em 2em;font-weight:700; max-width: 500px;}
.btn_link::after{content: '';display: block; position: absolute; right: -15px; top: 50%; width: 30px; height: 1px; background: var(--text-color);transition: all 0.2s linear;}
.btn_link:hover:after{content: '';display: block; position: absolute; right: -25px; top: 50%; width: 30px; height: 1px; background: var(--text-color);}
.btn_link span .small{font-size: .6em;}
.btn_link.en{font-size: .9em; padding: 1em;}

@media screen and ( max-width:768px ) {
	.btn_link{max-width: 100%; width: 90%; margin: 0 auto;}
	.btn_link br{display: block;}
	/* .btn_link.en{font-size: .4em;}*/
}  
@media screen and ( max-width:600px ) {
	.btn_link{font-size: 1em;}
} 

/*東リベ共通*/
section h3{font-weight: 800;font-size: 2em;}
section p{font-weight: 400; font-size: 1.3em;}
.content{margin-bottom: 5em;}

@media screen and ( max-width:1200px ) {
	section h3{font-size: 2.5vw;}
	section p{font-size: 1.7vw;}
} 


@media screen and ( max-width:768px ) {
	section h3{font-size: 5vw;}
	section p{font-size: 3vw;}
} 

.product_name{line-height: .8;}
.product_name .scale{font-weight: 600; font-size: .4em; line-height: 2.8;}
.product_name .version{font-size: .4em; line-height: .9;}
.product_name.en {line-height: 1;}
.product_name.en .scale{line-height: 2;}

@media screen and ( max-width:768px ) {
	.product_name .scale{font-size: .5em;}
} 
/*ここまで*/


/*-----------
言語切替・SNS
-----------*/
.fixed{padding: 15px 5px 5px 5px;position: absolute;z-index: 1000;right: 30px;/* background: rgba(255,2552,255,.6); */top: 30px; }
.language,.social {display: flex;flex-wrap: wrap;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;}
.language li,.social li {font-size: .8em;font-weight: 800;color: #000;}
.language li:first-of-type,
.social li:first-of-type {margin: 0 0 40px 0;position: relative;}
.language li:first-of-type:after ,
.social li:first-of-type:after {content: "";width: 1px;height: 20px;position: absolute;
background: #000;left: 0;right: 0;margin: auto;bottom: -30px;}
.language li a,.social li a {color: #000;text-decoration: none;line-height: 0;font-size: .8em;margin: 5px 0;padding: 10px 0;}
.social li.icon{ width: 28px;/* padding: 0; margin: 0 .5em 0 .5em; */ margin-top: .5em;}
.social li.icon.tw{margin-top: 0;}
.social li.icon a{padding: 0; margin: 0;}
/* .social li.icon img{width: 20px;} */
.social li a svg{width: 100%;height: auto;}
.language a:hover,.language a.active {color: #fff;background: #000;padding: 10px 0;}

@media screen and ( max-width:768px ) {
	.fixed{display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; height: 170px; width: 100%; top: -170px; left: 0;z-index: 15;transition: all 0.6s; background: rgba(0,0,0,.8);padding:50px 0 0 0;}
	.social{margin-top: .5em;}
	.language,
	.social{-ms-writing-mode:  horizontal-tb;writing-mode: horizontal-tb;width: 100%;font-size: 1em;justify-content: center;}
	.language li,
	.social li{color: #fff;}
	.language li:first-of-type,
	.social li:first-of-type {margin: 0 40px 0 0;}
	.language li:first-of-type:after,
	.social li:first-of-type:after {display: none;}
	.language li:first-of-type:before ,
	.social li:first-of-type:before {content: "";width: 20px;height: 1px;position: absolute;background: #fff;right: -30px;top: 50%;}
	.language li a,
	.social li a {margin:  0 5px;padding: 0 10px;color: #fff;}
	.language a:hover,.language a.active {padding: 0 10px; color: #000; background: #fff;}

	.fixed.active{ top: 0; }
	.language.flex,.social.flex{justify-content: center; width: 100%;flex-direction: column-reverse;}
	.language a,.social a{text-decoration: none; line-height: 0; margin-top: 0; margin-left: 1em;}

}

/*SP用ボタン*/
.menu_btn{display: none;}

@media screen and ( max-width:768px ) {
	.menu_btn{position: relative; z-index: 100;position: absolute; top: 10px; right: 10px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #000;border: 1px solid #fff;} 
	.menu_btn:hover{cursor: pointer;}
	.menu_btn span{font-size: .8em; background: #fff;position: relative; height: 3px;display: block; width: 65%;}
	.menu_btn span::after,.menu_btn span::before{content: ""; display: block; height: 3px ; width: 100%; background: #fff;left: 0; position: absolute;}
	.menu_btn span::after{top: -.8em;}
	.menu_btn span::before{bottom: -.8em;}
	/* .menu_btn span */
	.menu_btn.active span{background: rgba(0,255,255,0);}
	.menu_btn.active span::after{top: 0; transform:rotate(45deg);}
	.menu_btn.active span::before{bottom: 0; transform:rotate(-45deg);}
	.social li.icon{margin-top: 0; line-height: 0; margin-left: .5em}
	.social li a{display: block;}
	path.cls-1{fill: #fff; }

}

/*-----------
header
-----------*/
header {position: absolute;top: 0; left: 0; width: 100%; padding: .5em; box-sizing: border-box;justify-content:space-between; z-index: 20; padding: .5em 1em;}
header a{display: block; line-height: 0;}
header .tokyo_revengers{max-width: 264px; width: 20%;}
header .or{max-width: 120px; width: 10%;}

@media screen and ( max-width:800px ) {
	header .tokyo_revengers{max-width: 100%; width: 28%;}
} 


@media screen and ( max-width:768px ) {
	header .or{max-width: 100%; width: 50px;}
} 

/*-----------
#Top
-----------*/
#top {background: #f2f2f2; color: #000;;box-sizing: border-box;position: relative;}
#top::before{content: ""; display: block; width: 100%; height: 50%; position: absolute; bottom: 0; left: 0;background: linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(0,0,0,1) 100%);}
#top::after{content: ""; background: url(../images/bg_img_top.png) no-repeat ; background-position: bottom center; background-size: 100% auto; display: block; width: 100%; height: 50%; position: absolute; bottom: 0; left: 0;}

#top .flex{box-shadow:0 8px 10px -10px #000 inset, -8px 0 10px -10px #000 inset, 8px 0 10px -10px #000 inset; position: relative; z-index: 10;padding: 1em 0 10em;justify-content: center;}

#top .text_area{width: 50%; align-self: center; margin-top: -5%; position: relative;z-index: 10; padding-bottom: 10em;}
#top h1{font-weight: 900; font-size: 7vw;text-align: center; margin-top: -.3em;}
#top h1.en{font-size: 5vw; margin-top: .1em;}
#top p{text-align: center;width: 80%; margin: 0 auto;}
#top .img{width: 35%;}
#top a.btn_link{color: #000;border-color: #000; margin: 1.5em auto 0;}
#top .btn_link::after{background: #000;}


@media screen and ( max-width:1500px ) {
	#top .text_area{margin-top: 10%;}
	#top a.btn_link{width: 80%;}
} 


@media screen and ( max-width:850px ) {
	#top a.btn_link{font-size: 1em;}
} 

@media screen and ( max-width:768px ) {
	#top::before{height: 17em;}
	#top::after{height: 17em;}

	#top .flex{flex-direction: column-reverse;padding: 1em 0 3em 0;}
	#top .text_area{width: 100%; margin-top: 1em; padding-bottom: 8em;}
	#top .img{width: 60%; margin: 0 auto;}
	#top h1 {font-size: 12vw;}
	#top h1.en{font-size: 10vw;}
	#top h1 br{display: block;}

	#top a.btn_link{width: 80%;max-width: 100%; font-size: 5vw;}
	#top a.btn_link.en{font-size: 3vw;}
} 

/*-----------
#scalefigure
-----------*/
#scalefigure{padding: 2em 0 5em; max-width:2000px; width: 100%; margin: 0 auto;overflow: hidden;}
#scalefigure section{background-position: center top; background-size: contain;}

@media screen and ( max-width:768px ) {
	#scalefigure{padding: 1em 0 3em;}
	#scalefigure h2{width: 140%; margin-left: -20%;}
} 

/*-----------
#mickey
-----------*/
#mickey{max-width: 2000px;width: 100%;margin: 0 auto;}

/*paint*/
#paint .img{width: 59.5%;}
#paint section{width: 50.2%; margin-left: -13.3%;margin-top: 5em;}
#paint section p{text-shadow: 0 0 10px #000;}

@media screen and ( max-width:1700px ) {
	#paint section br{display: none;}
}

@media screen and ( max-width:768px ) {
	#paint .img{width: 80%;}
	#paint section{width: 85%; margin-left: 10%;margin-top: -3em;}
	#paint section br{display: none;}
}

/*detai*/
#detail {position: relative;}
#detail section{position: absolute; top: 3%; left: 3%; width: 53%;}
#detail .img1{width: 50.6%;margin-left:49.4%; box-sizing: border-box;}
#detail .img2{width: 55.2%;margin-left:3%; margin-top: -4%;}
#detail .img3{width: 50.6%;margin-left:44.5%;margin-top: -15%;}
#detail section p{text-shadow: 0 0 10px #000;}

@media screen and ( max-width:768px ) {
	#detail section{position: relative;width: 90%; top: auto;
	left: auto;}

	#detail .img1{width: 85%;margin-left:0; margin-top: 1em; box-sizing: border-box;}
	#detail .img2{width: 85%;margin-left:15%; margin-top: -4%;}
	#detail .img3{width: 100%;margin-left:0;margin-top: 1em;}
}

/*gold*/
#gold img{width: 63.2%;}
#gold section{width: 35.2%;margin-left: -2.2%; margin-top: 20%;}
#gold section p{text-shadow: 0 0 10px #000;}

@media screen and ( max-width:768px ) {
	#gold img{width: 70%;}
	#gold section{width: 60%;margin-left: 35%; margin-top: -30%;}
	#gold section br{display: none;}
}


/*back*/
#back{width: 80%; margin-left: auto;margin-right: auto;}

@media screen and ( max-width:768px ) {
	#back{width: 90%;}
	#back section br{display: none;}
}
/*comment*/
#comment .img{width: 54.5%;}
#comment section{width: 50.3%; margin-left: -10%; align-self: center;}
#comment section p{text-shadow: 0 0 10px #000;}

@media screen and ( max-width:768px ) {
	#comment .img{width: 100%;}
	#comment section{width: 90%; margin-left: 5%; align-self: center;}
}

/*-----------
#doraken
-----------*/
.bg_doraken{background: url(../images/bg_doraken.png) no-repeat; background-size: 100% auto;background-position: top center; max-width: 2000px; margin: 0 auto;}

#doraken{position: relative;}
#doraken .text_area{padding: 5em 0 5em .5em; font-weight: 900; font-size: 2em; width: 50%;}
#doraken h3{font-size: 3em;text-align: center;}
#doraken h3.en{font-size: 2em;}
#doraken p{text-align: center;font-size: 1.2em;}

#doraken .img_sp{display: none;}
@media screen and ( max-width:1200px ) {
	#doraken h3{font-size: 9vw;text-align: center;}
	#doraken h3.en{font-size: 6vw;}
	#doraken p{text-align: center;font-size:4vw;}
	#doraken p.en{font-size: 3vw;}
} 

@media screen and ( max-width:768px ) {
	.bg_doraken{background: none;}
	#doraken .img_sp{display: block;}
	#doraken .text_area{padding: 0;margin: -80% auto 3em; width: 90%;}
	#doraken h3{font-size: 13vw; text-shadow: 0 0 10px #000;}
	#doraken h3 br{display: block;}
	#doraken h3.en{font-size: 10vw;}
	#doraken p.en{font-size: 4vw;}
} 

/*-----------
release
-----------*/
#release{padding: 5em 0;}
#release .inner{max-width: 2000px; width: 90%;margin: 0 auto;}
#release .img_mickey{width: 50%;}
#release .text_area{width: 45%;margin:0 0 0 5%;}
#release .text_area h3{font-size: 6vw;text-align: left; margin-top: -.5em;}
#release .text_area h3.en{font-size: 5vw;}
#release .text_area .partner,#release .text_area .partner_shop{text-align: center; margin-top: 1em; font-size: .7em;}
#release .text_area .partner a,#release .text_area .partner_shop a{color: var(--link-color);}
/* #release .text_area h3 .pc{display: block;}
#release .text_area h3 .version{margin-left: 0;} */

#release .date{text-align: center; margin: 1em 0; font-size:1.2vw;font-weight: 700;line-height: 1.5;}
#release .date.en{line-height: 1.8;}
#release .date span{font-size: 1.5em;}
#release.en .date{width: 80%; margin: 1em auto 0;}
#release .date .pc{display: block;}
#release .date .sp{display: none;}

section .date span{font-size: 1.5em;}

#release .spec{width: 100%; margin: 1.5em 0; font-size: .9em;}
#release dl,#release dt,#release dd{box-sizing: border-box;}
#release dt,#release dd{padding: .5em .5em 0 .5em;}
#release dt{width: 150px;float: left;}
#release dd {margin-left: 150px;padding-left: 1em;border-left: 1px solid #fff;}
#release dd:after {content: ''; display: block;clear: both;}

#release a.btn_link{margin: 1em auto 0;}

@media screen and ( max-width:1200px ) {
	#release .date{font-size: .9em;}
} 
@media screen and ( max-width:900px ) {
	#release .img_mickey{width: 45%;}
	#release .text_area{width: 50%;margin:0 0 0 5%;}
	#release .text_area h3{font-size: 5vw;}
	#release .text_area h3.en{font-size: 8vw;}
	#release .spec{font-size: .8em;}
} 


@media screen and ( max-width:768px ) {
	#release{padding: 0em 0 5em;}
	#release .flex{justify-content: center;}
	#release .img_mickey{width: 80%;}
	#release .text_area{width: 80%;margin: 1em auto 0;}
	#release .text_area h3{font-size: 10vw;text-align: center;}
	#release .text_area h3 br{display: block;}
	/* #release .text_area h3 .pc{display: block;}
	#release .text_area h3 .version{margin-left: 0;} */
	#release .text_area .partner,#release .text_area .partner_shop{font-size: .9em;}
	#release .spec{width: 90%; margin: 2em auto;}
} 

@media screen and ( max-width:600px ) {
	#release .text_area{width: 90%;}
	#release .spec{width: 100%;}
	#release dt{width: 120px;}
	#release dd {margin-left: 120px;}
	#release .date{font-size: .8em;}
} 

/*-----------
aside
-----------*/
/* aside .bnr_matome{width: 80%;max-width: 700px; margin: 5rem auto 0; display: block; line-height: 1;} */
/* aside .social{ margin: 5% 0 0;} */
aside .social_bottom p{ font-size: 1.1em;text-align: center;font-weight: 700;}
aside .social_bottom .flex{justify-content: center;}
aside .social_bottom .flex a{width: 50px;margin: .5em .5em}
aside .social_bottom .flex a:first-child{margin-right: .5em;}


@media screen and ( max-width:768px ) {
	aside .social_bottom{margin-top: 10%;}
	aside .social_bottom .flex a{width: 50px;}
	/* aside .social_bottom .flex a:first-child{margin-right: 1em;} */
} 

/*-----------
footer
-----------*/
footer{position: relative;z-index: 10; /* background: url(../images/bg_img_footer.png) no-repeat; background-size: 100% auto; background-position: top center;padding-bottom: 10em; */}
footer p{font-size: .8em; margin: 1em 0; text-align: center;color: #fff;}