/* General */

@font-face {
	font-family: 'fzm Old Typewriter';/*要素に指定するときに使うフォント名*/
	src:url("http://takashi-masubuchi.com/tetsumineta/fonts/fzm-Old.Typewriter.woff2") format('woff2'),
	url("http://takashi-masubuchi.com/tetsumineta/fonts/fzm-Old.Typewriter.woff") format('woff') ,
	url("http://takashi-masubuchi.com/tetsumineta/fonts/fzm-Old.Typewriter.ttf")  format('truetype'), /* Safari, Android, iOS */
	url("http://takashi-masubuchi.com/tetsumineta/fonts/fzm-Old.Typewriter.otf")  format('opentype');
	font-display: swap;
}

body {
	background-color:#0f0800;
	font-family:"fzm Old Typewriter";
}

#wrapper {
	display:flex;
	font-family:"fzm Old Typewriter";
	}
	
#foot {
	position:fixed;
	bottom: 0px;
	width:100%;
	text-align:center;
	padding:5px 0;
	height:20px;
	font-size:9px;
	background-color:#fff;
	color:#666;
	}

p {
	line-height:22px;
	letter-spacing:2px;
	}	
	
h1{
	font-size:2.0em;
	line-height:22px;
	font-family:"fzm Old Typewriter";
	color: #FFF;
	text-shadow: 1px 1px 2px #333;
	text-align:left;!important
 }

h1 a{
	color:#FFF;
	font-family:"fzm Old Typewriter";
	text-shadow: 1px 1px 2px #333;
	}
	
h2 {
	text-align:center;
	margin:0 auto 50px;
	font-size:1.5em;
	padding:0 0 10px 0;
	border-bottom:double 1px #fff;
}

h3 {
	font-size:1.3em;
	padding:0 0 10px 0;
	font-weight:bold;
}

h4 {
	text-align:center;
	font-weight:bold;
	font-size:1.2em;
	padding:10px 0;
}

h4 a{
	color:#FFF;
}

p a{ color:#FFF;
   }

p small {
	font-size:0.5em;
	}	
	
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color:#FFF;
  transition: transform .3s;
}

a:hover{
	color:#a48668;
}

main a{
  border-bottom: 1px solid #a48668;
}

a::after {
  position: absolute;
  bottom: 7px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #a48668;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

a:hover::after {
  transform: scale(1, 1);
}
main a:hover::after{
  transform: scale(0, 0);
}

small {
	font-size:9px;
	letter-spacing:0.3px;
}

small a{
	color:#fff;
}

.smalll-tetter{
	font-size:0.8em;
	letter-spacing:1px;
}

.center_pack{
	text-align:center;
}
.right_pack{
	text-align:right;
}


#main_bg{
	background-color:#0f0800;
	height:100%;
	width:100vw;
}

#main_box_w600{
	max-width:600px;
	padding:20px;
	margin:0 auto;
	transition: 0.8s ease-in;
}

#main_box_w800{
	max-width:800px;
	padding:20px;
	margin:0 auto;
	transition: 0.8s ease-in;
}

.cont_box{
	border-bottom:1px dotted #fff;
	padding:20px 0 60px 0;
}

.leftside{
	background-color:#000;
	width:350px;
	min-height:100vh;
}


/* release */

.release{
	display:flex;
	flex-wrap:wrap;
}

.release li{
	width:225px;
	margin:0 40px 100px 0px;
}

.release li:nth-of-type(3n){ 
	margin:0 0px 100px 0px;
}

.release li img{
	margin:0 auto;
	display:block;
	width:200px;
}

.tooltip_display{
position: relative;
}

.tooltip_display::before {
	position:absolute;
	top: 20px;
	transform:rotate(-25deg);
	content: "RECOMMEND";
	margin: 0 auto;
	padding: 0 10px 0 10px;
	border: #fff 1px solid;
	border: #813636 2px solid;
	background-color: #813636;
	color:#ffffff ;
	animation-name:fadeDownAnime;
	animation-duration:1.3s;
	animation-fill-mode:forwards;
	opacity:0;	
}
	
	@keyframes fadeDownAnime{
	  from {
		opacity: 0;
	  transform: translateY(400px);
	  }
	
	  to {
		opacity: 1;
		transform:rotate(-25deg);
	  }
	}

/* movie */
.movie{
	display:flex;
	flex-wrap:wrap;
}

.movie li{
	width:350px;
	display:block;
	margin:0 50px 100px 0px;
	text-align:center;
}

.movie li:nth-of-type(2n){ 
	margin:0 0px 100px 0px;
}
/* schedule */


/* article */

.readmore{
	border:1px solid #FFF;
	display:block;
	padding:5px;
	width:150px;
	text-align:center;
	margin:15px 0 0 auto;
}

.readmore a{
	display:block;
	color:#FFF;
	border-bottom:0px;
}

.writer{
	margin:0 0 10px 0;
}

.active {
        margin-left:-200px;
        opacity: 0
        }
		
.active .gn {
		left:-200px;
        }	


/* gn */	

@media screen and ( min-width:913px )
{	
.gn	{
	position: fixed;
    bottom: 20px;
    left: 20px;
	letter-spacing:3px;
	line-height:35px;
	}
}
	
.gn li {
	text-shadow: 1px 1px 2px #333;
	font-family:"fzm Old Typewriter";
	margin-right: 25px;
}
	

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




#gn_box{
	position: absolute;
    bottom: 80px;
}
.gn li {
	line-height:35px;
	padding:5px 0 0 20px;
}

}
	
/* Ohter */




/* Header */
.title_box{
 position: fixed;	
 top:40vh;	
 padding:20px;
 font-family:"fzm Old Typewriter";
	}