@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}

/* -----------------------------------------------------------
   COMMON
------------------------------------------------------------*/
a { text-decoration:none;}
a:hover { text-decoration:underline;}
a:visited { text-decoration:none;}

.alt{
	position: absolute;
	top: -5000px;
	left: -9999px;
}
.lazy img{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.small{
	font-size: 80%;
}

@media all and (min-width: 768px) {
	.smp-br{
		display: none;
	}
}
/* -----------------------------------------------------------
   FONT
------------------------------------------------------------*/

@font-face {
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	font-style: normal;
}


/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/
html{
  scroll-behavior: smooth;
}

body {
	font-family: noto-sans-cjk-jp,sans-serif;
	-webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
	font-feature-settings: "palt";
	letter-spacing: 0.04em;
}


.wrap{
	background: linear-gradient(#fbd98c, #fdefce);
}

#container p{
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 400;
	color: #472a01;
}
#container h2 , #container h3{
	font-family: noto-sans-cjk-jp,sans-serif;
}

#left-box section h2{
	border-radius: 10px 10px 0 0;
	background-color: #f79205;
}
#left-box section#Twitter h2{
	background-color: #1da1f2;
}

#left-box section#Twitter h2 span{background-image: url(../img/h_twitter.png);}
#left-box section#Present h2 span{background-image: url(../img/h_present.png);}
#left-box section#About h2 span{background-image: url(../img/h_about.png);}
#left-box section#Cast h2 span{background-image: url(../img/h_cast.png);}
#left-box section#Topics h2 span{background-image: url(../img/h_topics.png);}


@media all and (min-width: 768px) {
	#container{
		width: 980px;
		margin: 0 auto;
	}
	#left-box{
		width: 650px;
		float: left;
		margin-right: 30px;
	}
	#left-box > section{
		margin-bottom: 30px;
	}
	#left-box section h2{
		padding: 10px 0;
	}
	#left-box section h2 span{
		display: block;
		width: 26%;
		height: 0;
		padding-top: 5.4%;
		margin: 0 auto;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		text-indent: -9999px;
		white-space: nowrap;
		overflow: hidden;
	}
	#left-box section#Twitter h2 span{
		width: 30%;
		padding-top: 5.25%;
	}
	#left-box .inner{
		background-color: #fef9ee;
		padding: 35px;
	}
	#right-box{
		width: 300px;
		float: left;
	}
}

@media all and (max-width: 767px) {
	main#con-main{
		padding: 10px 0 20px;
	}
	#container{
		width: 95%;
		padding-bottom: 0;
		margin: 0 auto;
	}
	#left-box > section{
		margin-bottom: 20px;
	}
	#left-box section h2{
		padding: 10px 0;
	}
	#left-box section h2 span{
		display: block;
		width: 40%;
		height: 0;
		padding-top: 7.2%;
		margin: 0 auto;
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		text-indent: -9999px;
		white-space: nowrap;
		overflow: hidden;
	}
	#left-box section#Twitter h2 span{
		width: 45%;
		padding-top: 6.75%;
	}
	#left-box .inner{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		margin: 0 auto;
		background-color: #fef9ee;
	}
	#right-box #rBanner{
		width: 300px;
		margin: 0 auto;
	}
}

/* -----------------------------------------------------------
   NAVIGATION
------------------------------------------------------------*/
nav#menu{
	background-repeat: no-repeat;
}
nav#menu ul{
	list-style:none;
	display: flex;
	flex-wrap: wrap;

}
nav#menu a{
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	width: 100%;
	padding-top: 24.1379%;
	height: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}


nav#menu #m2 a{background-image: url(../img/nav_present.png);}
nav#menu #m3 a{background-image: url(../img/nav_cast.png);}
nav#menu #m4 a{background-image: url(../img/nav_about.png);}

@media all and (min-width: 768px) {
	nav#menu{
		padding: 20px 0;
	}
	nav#menu ul{
		width: 980px;
		margin: 0 auto;
	}
	nav#menu li{
		width: 30%;
		margin-right: 0.75%;
	}
	nav#menu a{
		opacity: 1;
		transition: 0.6s ;
	}
	nav#menu a:hover{ opacity: 0.5;}

	nav#menu li#m1{
		width: 7%;
	}
	nav#menu li#m1 a{
		padding-top:100%;
		background-image: url(../img/nav_top_pc.png);
	}
}
@media all and (max-width: 767px) {
	nav#menu{
		width: 100%;
	}
	nav#menu ul{
		width: 96%;
		margin: 0 auto;
	}
	nav#menu li{
		width: 49.5%;
		margin:0 1% 0 0;
		position: relative;
	}
	nav#menu li#m1{margin:0 1% 1% 0;}
	nav#menu li#m2{margin:0 0 1% 0;}
	nav#menu li:nth-of-type(2n){margin-right: 0;}
	nav#menu li#m1 a{
		background-image: url(../img/nav_top_smp.png);
	}
}

/* -----------------------------------------------------------
   FOOTER
------------------------------------------------------------*/
footer{
	width:100%;
	background-color: #814e02;
}
p.copyright {
	color:#fff;
	font-size:75%;
	line-height:1.25;
	font-weight: 700;
}
p.copyright a{
	font-weight:bold;
	color:#fff;
	}
@media all and (min-width: 768px) {
	footer{
		padding:30px 0;
		}
	p.copyright {
		text-align:center;
		}
	}
@media all and (max-width: 767px)  {
	footer{
		position: relative;
	}
	p.copyright{
		padding:20px 10px;
		text-align:center;
		}
}



/* -----------------------------------------------------------
   PAGETOP
------------------------------------------------------------*/
#pagetop{
	z-index: 100;
}
#pagetop a{
	display: block;
	z-index: 100;
	position: relative;
	transition: 0.6s ;
	opacity: 1.0;
	}
	#pagetop a:hover{
		opacity: 0.8;
	}

@media all and (min-width: 768px) {
	#pagetop {
	  position:fixed;
	  bottom:20px;
	  right:20px;
	}
	#pagetop a {
		background-image:url(../img/pagetop.png);
	  width:82px;
		height:0;
		padding-top: 100%;
		overflow:hidden;
		text-indent:-9999px;
		background-size: cover;
	}
}
@media all and (max-width: 767px)  {
	#pagetop{
		width:100%;
		text-align: center;
		font-size: 80%;
	}
	#pagetop a {
		width:100%;
		background-color:#f6b332;
		color: #fff;
		font-weight: 700;
		padding: 8px 0;
	}
	#pagetop a:hover{
		text-decoration: none;
	}
}