/*	lower css
============================== */

#page-top{
    font-family: ten-mincho-text, serif;
	font-weight: 400;
	font-style: normal;
	/**/
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	overflow:hidden;
	color: #fff;
}

@media all and (min-width: 768px) {
	#page-top{
	background-image: url(../img/bg_pc.jpg?1);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: top center;
}

}

@media all and (max-width: 767px) {
	#page-top::before {
  content: "";
  width: 100vw;
  height: 100vh;
  background-image: url(../img/bg_sp.jpg?1);
  position: fixed;
		background-size: cover;
  top: 0px;
  left: 0px;
  z-index: -1; 
}
}

@media all and (min-width: 768px) {
	#contentsArea { padding-top: 30px;}
	.low .contents {background-image: -webkit-gradient(linear, center left, center right, from(transparent), color-stop(0.15, transparent), color-stop(0.15, hsla(210, 20%, 40%, 0.5)), to(hsla(210, 20%, 40%, 0.2)));
		background-image: linear-gradient(90deg, transparent 15%, hsla(210, 20%, 40%, 0.2) 15%);}
	.low.story .contents {background-image: -webkit-gradient(linear, center left, center right, from(transparent), color-stop(0.3, transparent), color-stop(0.3, hsla(210, 20%, 40%, 0.5)), to(hsla(210, 20%, 40%, 0.2)));
		background-image: linear-gradient(90deg, transparent 30%, hsla(210, 20%, 40%, 0.2) 30%);
	margin-bottom: 2em;}
}
@media all and (max-width: 767px) {
	#contentsArea { padding-top: 18px;}
	.low .contents {background-image: -webkit-gradient(linear, center left, center right, from(transparent), color-stop(0.1, transparent), color-stop(0.1, hsla(210, 20%, 40%, 0.5)), to(hsla(210, 20%, 40%, 0.2)));
		background-image: linear-gradient(90deg, transparent 10%, hsla(210, 20%, 40%, 0.2) 10%);}
	.low.story .contents {margin-bottom: 2em;}
	
}

/*	header
============================== */
#headerArea header {margin: 0 auto; position: relative; 

}
header#title div a {
display: block; text-indent: -9999px;
  background-position: center center;
  background-image: url(../img/header.png);
  background-repeat: no-repeat;
}

@media all and (min-width: 768px) {
	#headerArea header { width: 100%;}
	header#title div {width:100%; height: 230px; margin: 0 auto;}
	header#title div a {
	width:100%; height: 230px;
	background-size: auto 230px;
	}
}
@media all and (max-width: 767px) {
	#headerArea header { width:100%;}
	header#title div a {
	width:100%; height:0; padding-top: 32.857%;
	background-size:cover;
	}
}



/*	low h1
============================== */
h1 {
    margin: 0 auto;
    position: relative; text-indent: -9999px; background-repeat: no-repeat; background-size: contain; background-position:left top;
}
body.about h1 {
    background-image: url(../img/about/h1.png);
  }
body.story h1 {
    background-image: url(../img/story/h1.png);
  }
body.news h1 {
    background-image: url(../img/news/h1.png);
  }
body.chart h1 {
    background-image: url(../img/chart/h1.png);
  }
body.caststaff h1 {
    background-image: url(../img/caststaff/h1.png);
  }
body.original h1 {
    background-image: url(../img/original/h1.png);
  }

@media all and (min-width: 768px) {
  h1 {
	  width: 1000px;
	  height: 100px; margin: 0 auto 35px;
  }

}
@media all and (max-width: 767px) {
  h1 {height:60px; margin:0 3% 15px;
  }
}

/*	txtArea
============================== */
section.txtArea { padding: 10px 0px;}
section.txtArea .txt {line-height: 2.0em; padding: 0.5em 0;}
.txt {line-height: 2.0em;}

@media all and (max-width: 767px) {
section.txtArea .txt { font-size: 0.9em;  line-height: 1.8em;}
.txt { font-size: 0.9em;  line-height: 1.8em;}
}