@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;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}

/* -----------------------------------------------------------
   COMMON
------------------------------------------------------------*/

/*/TEXT/*/
.blue{ color:#0bc1f5 !important;}
.green{ color:#52b145 !important;}
.turquoise{ color:#2fbdb5 !important;}
.yellow{ color:#d6d414 !important;}
.orange{ color:#ee8020 !important;}
.pink{ color:#e4007f !important;}
.red{ color:#eb3434 !important;}
.purple{ color:#9362dd !important;}
.brown{ color:#a05f37 !important;}
.navy{color:#1a44ad !important;}

.tCenter{ text-align:center !important;}
.tLeft{ text-align:left !important;}
.tRight{ text-align:right !important;}

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


/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/
@font-face {
	font-family: fot-klee-pro, sans-serif;
	font-style: normal;
	font-weight: 500;
}
@font-face {
	font-family: fot-klee-pro, sans-serif;
	font-style: normal;
	font-weight: 600;
}

body {
	font-family: 'Lato', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
}
.wrap{
	background-color: #838b83;
	color: #fff;
	}
	.wrap h2{
		text-indent:110%;
		white-space:nowrap;
		overflow:hidden;
	}
	.wrap p{
		font-family: fot-klee-pro, sans-serif;
		font-weight: 500;
		font-style: normal;
	}
	.btm-area{
		background-color: #949b94;
	}
	.txt-area{
		background-color: #63636e;
	}

	.lazy img{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

@media all and (min-width: 768px) {
	body{
		letter-spacing: 0.05em;
	}
	.wrap{
		padding-top: 40px;
	}
	.btm-area{
		padding-top: 40px;
	}
	#container{
		width:970px;
		margin:0 auto;
		box-sizing: border-box;
		padding-bottom: 40px;
	}

	#container #l-box{
		float:left;
		width:640px;
		margin-right:30px;
		}

			.unit{
				box-sizing: border-box;
				padding:35px 45px;
				border: solid 1px #fff;
				outline: solid 1px #fff;
				outline-offset: 3px;
			}
			.unit2{
				box-sizing: border-box;
				padding:20px 30px;
			}

			.wrap p.txt{
				font-size: 110%;
				line-height: 1.8;
			}
			.wrap p.cau{
				font-size: 90%;
				padding-top: 20px;
			}


	#container #r-box{
		float:left;
		width:300px;
		}
		#container #r-box #rBanner{
			width:300px;
			margin: 0 auto 20px;
			}

	.block{
		width: 970px;
		margin: 0 auto;
	}
}

@media all and (max-width: 767px) {
	body{
		letter-spacing: 0.04em;
	}
	.wrap{
		padding-top:10px;
	}
	.btm-area{
		padding-top: 20px;
	}
	#container{
		width:92%;
		margin:0 auto;
		padding-top: 10px;
		}

		#container #l-box{
			width:100%;
			}
			.unit{
				box-sizing: border-box;
				padding:15px 3%;
				border: solid 1px #fff;
				outline: solid 1px #fff;
				outline-offset: 3px;
			}
			.unit2{
				box-sizing: border-box;
				padding:15px 3%;
			}
			.wrap p.txt{
				font-size: 100%;
				line-height: 1.5;
				padding: 0 5px;
			}
			.wrap p.cau{
				font-size: 90%;
				padding-top: 20px;
			}
		#container #r-box{
			width:100%;
			text-align: center;
			padding: 20px 0;
			}
	.block{
		width: 92%;
		margin: 0 auto;
	}



}
/* -----------------------------------------------------------
   HEADER
------------------------------------------------------------*/
header h1 a{
	display: block;
}
header h1 a:hover{
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}

@media all and (min-width: 768px) {
	header h1{
		margin:0 auto 30px;
	}
	header h1 , header h1 img{
		width: 970px;
		height: 540px;
	}
}

@media all and (max-width: 767px) {
	header h1{
		width:94%;
		margin:0 auto 1%;
	}
	header h1 img{
		width:100%;
		height: 0;
		padding-top: 55.67%;
		background-size:cover;
	}
}


/* -----------------------------------------------------------
   NEXT
------------------------------------------------------------*/
#Next h2{
	background-image: url(../img/h_next.png);

}
#Next h3{
	background-color: #595968;
	border-radius: 6px;
	text-align: center;
	font-weight: normal;
	font-family: fot-klee-pro, sans-serif;
	font-weight: 500;
	font-style: normal;
}
#Next #yMovie{
	box-sizing: border-box;
	margin: 0 auto;
}


@media all and (min-width: 768px) {
	#Next h2{
		width: 50%;
		height: 0;
		padding-top: 10.41%;
		background-size: cover;
		margin: 0 auto 25px;
	}
	#Next h3{
		font-size: 140%;
		padding:15px;
		margin: 30px auto;
	}
	#Next .inner .lazy{
		display: block;
		width: 550px;
		height: 308px;
		margin: 25px auto 0;
		position: relative;
	}
	#Next #yMovie{
		width: 550px;
		height: 309px;
	}
}

@media all and (max-width: 767px) {
	#Next h2{
		width: 60%;
		height: 0;
		padding-top: 12.5%;
		background-size: cover;
		margin: 0 auto;
	}
	#Next h3{
		font-size: 110%;
		padding:10px;
		margin: 15px auto ;
	}
	#Next .inner .lazy {
		display: block;
		width: 100%;
		height: 0;
		padding-top: 56%;
		margin: 15px auto 0;
		position: relative;
		background-size: cover;
	}
	#Next #yMovie{
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		}
	#Next #yMovie iframe{
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
		}
}
/* -----------------------------------------------------------
   NEWS
------------------------------------------------------------*/
#News{
	background-color: #595968;
	margin-bottom: 20px;
}
#News p{
	color: #fff;
	font-weight: 600 !important;
}

/* -----------------------------------------------------------
   LINK AREA
------------------------------------------------------------*/
#Link-area{
	background-color: #666f66;
}
	#Link-area ul{
		list-style: none;
	}

	#Link-area #odm #paravi a{background-image: url(../img/paravi.png);}
	#Link-area #odm #tbsfree a{background-image: url(../img/tbsfree.png);}
	#Link-area #sns #tw a{background-image: url(../img/btn_tw.png);}
	#Link-area #sns #ig a{background-image: url(../img/btn_ig.png);}


@media all and (min-width: 768px) {
	#Link-area{
		padding: 35px 0;
	}
	#Link-area .inner{
		justify-content: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}
	#Link-area ul{
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}
	#Link-area ul#odm{
		margin-right: 40px;
	}
	#Link-area ul#odm li a{
		display: block;
		width: 300px;
		height: 0;
		padding-top: 31.25%;
		background-size: cover;
		text-indent: -9999px;
	}
	#Link-area #odm #paravi{
		margin-right: 20px;
	}
	#Link-area ul#sns{
		padding-top: 12px;
	}
	#Link-area ul#sns li a{
		display: block;
		width: 74px;
		height: 0;
		padding-top: 100%;
		background-size: cover;
		text-indent: -9999px;
	}
	#Link-area #sns #tw{
		margin-right: 15px;
	}
	#Link-area a:hover{
		filter: alpha(opacity=80);
		-moz-opacity:0.80;
		opacity:0.80;
	}
}
@media all and (max-width: 767px) {
	#Link-area{
		padding: 20px 0;
	}
	#Link-area .inner{
		width: 100%;
	}
	#Link-area ul#odm{
		width: 60%;
		margin: 0 auto 15px;
	}
	#Link-area ul#odm li#paravi{
		margin-bottom: 5px;
	}
	#Link-area ul#odm li a{
		display: block;
		width: 100%;
		height: 0;
		padding-top: 31.25%;
		background-size: cover;
		text-indent: -9999px;
	}
	#Link-area ul#sns{
		width: 60%;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		justify-content:center;
	}
	#Link-area ul#sns li{
		width:30%;
		margin: 0 2.5px;
	}
	#Link-area ul#sns li a{
		display: block;
		width: 100%;
		height: 0;
		padding-top: 100%;
		background-size: cover;
		text-indent: -9999px;
	}
}

/* -----------------------------------------------------------
   BACKNUMBER
------------------------------------------------------------*/
#Backnumber h2{
	background-image: url(../img/h_bknum.png);
	height: 0;
	background-size: cover;
}


#Backnumber ul#bklist li , #Backnumber ul#eplist li{
	box-sizing: border-box;
	position: relative;
	font-family: fot-klee-pro, sans-serif;
	font-weight: 500;
	font-style: normal;
}
	#Backnumber ul#bklist li{
		padding-bottom: 20px;
	}
	#Backnumber ul#eplist li{
		padding-bottom: 10px;
	}
	#Backnumber ul#eplist li:last-child{padding-bottom: 0;}

	#Backnumber #bklist a{
		display: block;
		color: #fff;
	}
	#Backnumber #bklist .lazy{
		width: 100%;
		height: 0;
		padding-top: 56%;
		background-size: cover;
	}
	#Backnumber #bklist a:hover{
		filter: alpha(opacity=80);
		-moz-opacity:0.80;
		opacity:0.80;
		text-decoration: none;
		transition: .4s;
	}

	#Backnumber ul#eplist li a{
		display: block;
		background-color: #63636e;
		border-radius: 10px;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}



@media all and (min-width: 768px) {
	.wrap > #Backnumber{
		width: 970px;
		margin: 40px auto;
	}
	.wrap > #Backnumber h2{
		width: 30%;
		padding-top: 6.25%;
		margin: 0 auto 25px;
	}
	#l-box > #Backnumber h2{
		width: 50%;
		padding-top: 10.41%;
		margin: 0 auto 25px;
	}
	#Backnumber ul#bklist , #Backnumber ul#eplist{
		list-style: none;
		display:flex;
		flex-wrap:wrap;
	}
	/* -----3列----*/
	.wrap > #Backnumber #bklist li , .wrap > #Backnumber #eplist li{
		width: 32%;
		margin-right: 2%;
	}
		.wrap > #Backnumber #bklist li:nth-child(3n) , .wrap > #Backnumber #eplist li:nth-child(3n){
			margin-right:0;
		}
	/* -----2列----*/
	#l-box > #Backnumber #bklist li , #l-box > #Backnumber #eplist li{
		width: 48%;
		margin-right: 2%;
	}
		#l-box > #Backnumber #bklist li:nth-child(2n) , #l-box > #Backnumber #eplist li:nth-child(2n){
			margin-right:0;
		}


	#Backnumber #bklist li figure{
		margin-bottom: 5px;
	}
	#Backnumber #bklist li{
		font-size: 100%;
		text-align: center;
	}
	#Backnumber #eplist li{
		font-size: 110%;
	}
		#Backnumber ul#eplist li a{
			padding: 15px;
			line-height: 1.8;
			text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
			transition: .4s;
		}
		#Backnumber ul#eplist li a:hover{
			text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
			transition: .4s;
		}
}

@media all and (max-width: 767px) {
	.wrap > #Backnumber{
		width: 92%;
		margin: 20px auto;
	}
	#Backnumber{
		padding:15px 3%;
		box-sizing: border-box;
	}
	#Backnumber h2{
		width: 60%;
		padding-top: 12.5%;
		margin: 0 auto 25px;
	}
	#Backnumber #bklist li , #Backnumber #eplist li{
		width: 100%;
		text-align: center;
		font-size: 110%;
	}
	#Backnumber #bklist li figure{
		margin-bottom: 10px;
	}
	#Backnumber ul#eplist li a{
		padding: 10px;
		line-height: 1.5;
	}
}

/* -----------------------------------------------------------
   BACKNUMBER POPUP
------------------------------------------------------------*/

#Story {
	position: absolute;
	z-index: 5000;
	background-color: #838b83;
}
	#Story main{
		color: #fff;
	}
	#Story h1{
		background-color: #595968;
		border-radius: 6px;
		text-align: center;
		font-weight: normal;
	}
		#Story main p{
			line-height: 1.8;
		}
		#Story .fbox{
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
		}
		#Story .fbox .photo{
			width: 49.5%;
		}
		#Story .fbox .ph1{
			margin-right: 1%;
		}
		#Story .fbox .photo img{
			width: 100%;
			height: 0;
			padding-top: 56%;
			background-size: cover;
		}
		#Story .btn-close a{
			display: block;
			box-sizing: border-box;
			position: relative;

			text-align: center;
			text-decoration: none;
			color: #fff;
			background: #838b83;
			border:1px solid #fff;
		}
			#Story .btn-close a:hover{
				background: #fff;
			  color: #838b83;
				cursor: pointer;
				text-decoration: none;
			}
			#Story .btn-close a span.alt{
				position: relative;
				top:0;
				left: 0;
			}
@media all and (min-width: 768px) {
	#Story{
		left: 50%;
		width: 800px;
		margin-left: -400px;
	}
	#Story main{
		padding: 30px;
	}
	#Story h1{
		font-size: 120%;
		padding:15px;
		margin: 20px auto;
	}
	#Story .btn-close a{
		border-radius: 6px;
		margin: 20px auto 0;
		padding: 15px;
	}
}
@media all and (max-width: 767px) {
	#Story{
		width: 100%;
	}
	#Story main{
		padding: 20px;
	}
	#Story h1{
		font-size: 90%;
		padding:8px;
		margin:10px auto;
	}
	#Story p.txt{
		font-size: 80%;
		line-height: 1.5;
	}
	#Story .btn-close a{
		border-radius: 3px;
		font-size: 80%;
		margin: 10px auto 0;
		padding: 8px;
	}
}

/* -----------------------------------------------------------
   HIGHLIGHT
------------------------------------------------------------*/

#Highlight h2{
	background-image: url(../img/h_hl.png);
	height: 0;
	background-size: cover;
}


@media all and (min-width: 768px) {
	#Highlight{
		overflow: hidden;
		padding-bottom: 40px;
	}
	#Highlight h2{
		width: 30%;
		padding-top: 6.25%;
		margin: 0 auto 25px;
	}
	#Highlight .inner{
		width: 970px;
		margin: 0 auto;

	}
	#Highlight .inner .lazy{
		display: block;
		width: 550px;
		height: 308px;
		float: left;
		position: relative;
		margin-right: 30px;
	}
	#Highlight p.txt{
		overflow: hidden;
	}
}

@media all and (max-width: 767px) {
	#Highlight{
		padding-bottom: 30px;

	}
	#Highlight h2{
		width: 60%;
		padding-top: 12.5%;
		margin: 0 auto 15px;
	}
	#Highlight .inner .lazy{
		display: block;
		width:100%;
		height: 0;
		padding-top: 56%;
		position: relative;
		margin-bottom: 10px;
		background-size: cover;
	}
}

/* -----------------------------------------------------------
   CAST
------------------------------------------------------------*/
#Cast-vtr .txt-area h2{background-image: url(../img/h_cast.png);}
#Cast-std .txt-area h2{background-image: url(../img/h_scast.png);}

#Cast-std .txt-area dl{
	font-family: fot-klee-pro, sans-serif;
	font-style: normal;
}
	#Cast-std .txt-area dt{font-weight: 600;}
	#Cast-std .txt-area dd{font-weight: 500;}

@media all and (min-width: 768px) {

	#Cast-vtr , #Cast-std{
		display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
		margin-bottom: 40px;
	}
	#Cast-vtr .txt-area h2 , #Cast-std .txt-area h2{
		width: 55%;
		height: 0;
		padding-top: 11.45%;
		background-size: cover;
		margin: 0 auto 25px;
	}
	#Cast-vtr .txt-area , #Cast-std .txt-area{
		width: 420px;
		padding: 30px 0;
		display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
	}
	#Cast-vtr .txt-area > div , #Cast-std .txt-area > div{
		width: 100%;
		text-align: center;
	}
	#Cast-std .txt-area dl{
		font-size: 110%;
	}
	#Cast-std .txt-area dd{
		margin-bottom: 20px;
		line-height: 1.8;
	}

	#Cast-vtr .lazy{
		display: block;
		width: 550px;
		height: 308px;
		position: relative;
	}
		#Cast-vtr figure{
			-webkit-box-ordinal-group:2;
			-ms-flex-order:2;
			-webkit-order:2;
			order:2;
		}
		#Cast-vtr .txt-area{
			-webkit-box-ordinal-group:1;
			-ms-flex-order:1;
			-webkit-order:1;
			order:1;
		}

	#Cast-std .lazy{
		display: block;
		width: 550px;
		height: 366px;
		position: relative;
	}
}
@media all and (max-width: 767px) {
	#Cast-vtr , #Cast-std{
		margin-bottom: 20px;
	}
	#Cast-vtr .txt-area , #Cast-std .txt-area{
		padding: 20px 0;
		text-align: center;
	}
	#Cast-vtr .txt-area h2 , #Cast-std .txt-area h2{
		width: 50%;
		height: 0;
		padding-top: 10.41%;
		background-size: cover;
		margin: 0 auto 25px;
	}
	#Cast-vtr .lazy{
		display: block;
		width: 100%;
		height: 0;
		padding-top: 56%;
		background-size: cover;
		position: relative;
	}
	#Cast-std .lazy{
		display: block;
		width: 100%;
		height: 0;
		padding-top: 66.54%;
		background-size: cover;
		position: relative;
	}
	#Cast-std .txt-area dt{
		line-height: 1.8;
	}
	#Cast-std .txt-area dd{
		margin-bottom: 15px;
		line-height: 1.6;
	}
}

/* -----------------------------------------------------------
   SONG
------------------------------------------------------------*/
#Song{
	background-color: #707870;
	text-align: center;
	box-sizing: border-box;
}
#Song h2{
	background-image: url(../img/h_song.png);
	height: 0;
	background-size: cover;
}
#Song .txt p{
	line-height: 1.8;
	padding-bottom: 30px;
}

@media all and (min-width: 768px) {
	#Song{
		padding: 30px;
		margin-bottom: 40px;
	}
	#Song h2{
		width: 25%;
		padding-top: 5.2%;
		margin: 0 auto 40px;
	}
}
@media all and (max-width: 767px) {
	#Song{
		width: 92%;
		margin: 0 auto;
		padding: 20px 0;
		margin-bottom: 20px;
	}
	#Song h2{
		width: 50%;
		padding-top: 10.41%;
		margin: 0 auto 20px;
	}
}

/* -----------------------------------------------------------
   STAFF
------------------------------------------------------------*/
#Staff{
	background-color: #707870;
	text-align: center;
	box-sizing: border-box;
}
#Staff h2{
	background-image: url(../img/h_staff.png);
	height: 0;
	background-size: cover;
}
#Staff .fbox dl{
	font-family: fot-klee-pro, sans-serif;
	font-style: normal;

}

@media all and (min-width: 768px) {
	#Staff{
		padding: 30px;
	}
	#Staff h2{
		width: 25%;
		padding-top: 5.2%;
		margin: 0 auto 40px;
	}
	#Staff .fbox{
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
	}
	#Staff .fbox dl{
		font-size: 110%;
	}
	#Staff .fbox dl.director{
		padding: 0 40px 0 100px;
	}
	#Staff .fbox dt{
		font-weight: bold;
		padding-bottom: 5px;
	}
	#Staff .fbox dd{
		margin-bottom: 30px;
		line-height: 1.8;
	}
}
@media all and (max-width: 767px) {
	#Staff{
		width: 92%;
		margin: 0 auto 20px;
		padding: 20px 0;
	}
	#Staff h2{
		width: 50%;
		padding-top: 10.41%;
		margin: 0 auto 20px;
	}
	#Staff .fbox dl{
		padding: 0 20px;
		font-size: 100%;
	}
	#Staff .fbox dt{
		font-weight: bold;
		padding-bottom: 5px;
	}
	#Staff .fbox dd{
		margin-bottom: 20px;
		line-height: 1.8;
	}
}

/* -----------------------------------------------------------
   FOOTER
------------------------------------------------------------*/
footer{
	width:100%;
}
p.copyright {
	color:#fff;
	font-size:75%;
	line-height:1.25;
}
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)  {
	p.copyright{
		padding:10px 10px;
		text-align:center;
		}
}
/* -----------------------------------------------------------
   PAGETOP
------------------------------------------------------------*/
#pagetop a{
	display: block;
	overflow:hidden;
	background-image:url(../img/pagetop.png);
	}
@media all and (min-width: 768px) {
	#pagetop {
	  position:fixed;
	  bottom:40px;
	  right:20px;
	}
	#pagetop a {
	  width:70px;
		height:70px;
		top:0;
		position: relative;
		text-indent:-9999px;
		background-size: cover;
	}
}
@media all and (max-width: 767px)  {
	#pagetop{
		width:15%;
		margin: 0 auto;
		}
	#pagetop a {
		width:100%;
		height:0;
		padding-top: 100%;
		text-indent:-9999px;
		background-size: cover;
	}
}