/* =================================
	TBS Reset CSS
================================= */
@import url("/um/v7/css/reset.css");
@import url("animate.css");
/*	Web Fonts
============================== */
.mgb1em { margin-bottom: 1em;}
.mgb2em { margin-bottom: 2em;}
.mgb3em { margin-bottom: 3em;}
.mgb4em { margin-bottom: 4em;}
.mgb5em { margin-bottom: 5em;}
.txt {line-height: 1.8;}
.wbr {
	white-space: nowrap;
	display: inline-block;
}
.add {
	font-size: 80%;
	color: #959595;
	margin-top: 1em;
}
.lazy-done {
	-webkit-animation: fadeIn 500ms;
	animation: fadeIn 500ms;
}
.nolink {
	opacity: 0.5;
	cursor: default!important;
}
.fs50 {font-size: 50%;}
.fs60 {font-size: 60%;}
.fs70 {font-size: 70%;}
.fs80 {font-size: 80%;}
.fs90 {font-size: 90%;}
.fs110 {font-size: 110%;}
.fs120 {font-size: 120%;}
.fs130 {font-size: 130%;}
.fs140 {font-size: 140%;}
.fs150 {font-size: 150%;}
.fs160 {font-size: 160%;}
.fs170 {font-size: 170%;}
.fs180 {font-size: 180%;}
.fs190 {font-size: 190%;}

.gray { color: #7b7b7b;}
.black { color: #171717;}
.purple { color: #940094;}
.blue { color: #0047a3;}
.lightblue { color: #21a5f1;}
.deepgreen { color: #060;}
.green { color: #179917;}
.kubotagreen { color: #009fa8}
.yellowgreen { color: #4eb200;}
.yellow { color: #ffba00;}
.orange { color: #eb6100;}
.pink { color: #ff2d85;}
.vermilion { color: #ff4e4e;}
.red { color: #e60012;}
.carmine { color: #e09966;}
.magenta { color: #ea33b2;}
.brown { color: #6a3906;}
.yellowocher { color: #b27b17;}
.gold { color: #c93;}
.silver { color: #b2b2b2;}
.bluegreen { color: #0b9d9b;}

.center { text-align: center; display: inline-block; width: 100%;}
.left { text-align: left;}
.right { text-align: right;}
.bold { font-weight: bold;}
a {
	text-decoration: none;
	color: #e84134;
}
/*	background
============================== */
html, body, div#con-body {
	background-color:#FFFFFF;/* デフォルトのグレーを白に上書き */
}
body {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
}
div#page-top {
	font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	-ms-text-size-adjust: 100%;
	font-kerning: normal;
	font-feature-settings: "palt";	text-align: justify; /* 両端揃え */
	text-justify: inter-ideograph; /* 両端揃えの種類 */
	color: #3b3b3b;
	letter-spacing: 0.05em;
}
@media all and (min-width: 768px) {
   .pcnone {
      display: none;
   }
}
@media all and (max-width: 767px) {
	.smpnone {
		 display: none;
	}
}
/*	header
============================== */
header {
	background-image: url(../img/d_line.jpg);
	background-position: top;
	background-repeat: repeat-x;
}
@media all and (min-width: 768px) {
	header {
		padding-top: 43px;
	}
}
@media all and (max-width: 767px) {
	header {
		background-size: auto 15px;
		padding-top: 15px;
	}
}
/*	nav
============================== */
div.contents div.menu nav {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
div.contents {
	position:relative;
}
div.contents div.menu {
	background-color: hsla(0, 0%, 100%, 0.70);
	left:0;
	top:0;
	width:100%;
	z-index:5;
	-webkit-box-shadow:0 10px 0 0 hsla(0,0%,0%,0.1);
	box-shadow:0 10px 0 0 hsla(0,0%,0%,0.1);
}
.idx div.contents div.menu {
	-webkit-box-shadow: none;
	box-shadow:none;
}

div.contents div.menu-on {
	-webkit-animation: slideInDown 700ms;
	animation: slideInDown 700ms;
	position:fixed;
	z-index:5;
}
div.contents div.menu nav ul li a {
	display: block;
	text-decoration:none;
	border-radius: 5px;
}
@media all and (min-width: 768px) {
.idx div.contents {
	padding-top:113px;
	top: 0;
}
body:not(.idx) div.contents {
	height: 113px;
}
div.contents div.menu {
	position: absolute;
}
div.contents div.menu nav {
	text-align:left;
	background-image:url(../img/menu.png?2);
	background-repeat:no-repeat;
	width:980px;
	padding: 9px 0;
	margin:0 auto;
}
div.contents div.menu-on {
	background-color:hsla(198, 100%, 45%, 0.9);
	height:113px;
	-webkit-box-shadow:0 10px 0 0 hsla(0,0%,0%,0.1);
	box-shadow:0 10px 0 0 hsla(0,0%,0%,0.1);
}
div.contents div.menu nav ul li {
	float:left;
}
div.contents div.menu nav ul li:not(:last-child) {
	margin-right:8px;
}
div.contents div.menu nav ul li.m-intro {
	width:100px;
}
div.contents div.menu nav ul li.m-news {
	width:99px;
}
div.contents div.menu nav ul li.m-story {
	width:105px;
}
div.contents div.menu nav ul li.m-caststaff {
	width:148px;
}
div.contents div.menu nav ul li.m-chart {
	width:112px;
}
div.contents div.menu nav ul li.m-movie {
	width:102px;
}
div.contents div.menu nav ul li.m-message {
	width:148px;
}
div.contents div.menu nav ul li.m-paravi {
	width:110px;
}
div.contents div.menu nav ul li a {
	height:95px;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.contents div.menu nav ul li a:not(.nolink):hover {
	background-color: hsla(56, 100%, 50%, 0.1);
	border: 1px solid #000;
	box-sizing: border-box;
}
}
@media all and (max-width: 767px) {
div.contents {
	/* padding-top:15px; */
	/* padding-bottom: 15px; */
}
div.contents div.menu nav {
	background-color:#fff9e3;
}
div.contents div.menu-on nav {
	-webkit-box-shadow:0 5px 0 0 hsla(0,0%,0%,0.1);
	box-shadow:0 5px 0 0 hsla(0,0%,0%,0.1);
}
div.contents div.menu nav ul {
	text-align: center;
	padding: 1%;
	border-bottom: 1px solid #000;
 }
div.contents div.menu nav ul li {
	box-sizing: border-box;
	font-weight: bold;
	white-space: nowrap;
	float: left;
	width: 24.25%;
	border: 1px solid #000;
	border-radius: 5px;
}
div.contents div.menu nav ul li:nth-child(3) {
	margin-bottom: 1%;
}
div.contents div.menu nav ul li a {
	display: block;
	background-color: #fff;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 110%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	height: 0;
	padding-top: 78.33333333333333%;
}
div.contents div.menu nav ul li a span {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
div.contents div.menu nav ul li.m-intro a {
	background-image: url(../img/m-intro.png);
}
div.contents div.menu nav ul li.m-news a {
	background-image: url(../img/m-news.png);
}
div.contents div.menu nav ul li.m-story a {
	background-image: url(../img/m-story.png);
}
div.contents div.menu nav ul li.m-caststaff a {
	background-image: url(../img/m-caststaff.png);
}
div.contents div.menu nav ul li.m-chart a {
	background-image: url(../img/m-chart.png?1);
}
div.contents div.menu nav ul li.m-movie a {
	background-image: url(../img/m-movie.png);
}
div.contents div.menu nav ul li.m-message a {
	background-image: url(../img/m-message.png);
}
div.contents div.menu nav ul li.m-paravi a {
	background-image: url(../img/m-paravi.png?1);
}
div.contents div.menu nav ul li:not(:nth-child(4n)) {
	margin-right: 1%;
}
}
/*	mainpic
============================== */
@media all and (min-width: 768px) {
	.idx div.mainpic p {
		width: 980px;
		height: 693px;
		margin: 0 auto 30px;
		overflow: hidden;
		text-indent: 110%;
		white-space: nowrap;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -490px;
	}
	.idx header div.inner {
		height: 837px;
		margin: 0 auto;
		position: relative;
	}

}
@media all and (max-width: 767px) {
	div.mainpic p {
		display: block;
		background-color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-indent: 110%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		height: 0;
		padding-top: 70.7142857142857%;
	}
	div.mainpic p img {
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
}
/*	wrap
============================== */
@media all and (min-width: 768px) {
	div.wrap {
		width: 980px;
		margin: 0 auto;
	}
}
/*	spot
============================== */
#spot {
  width: 530px;
  display: inline-block;
  position: relative;
	margin-bottom: 40px;
}
#spot h2 {
  width: 188px;
  height: 42px;
	background-size: 100%!important;
  background: url(../img/top/story.png);
  margin: 0 0 9px;
}
#spot #trailer {
  position: relative;
  width: 530px;
  background-color: #fff;
  padding: 0 0 3em;
	border: solid 1px #000;
	box-sizing: border-box;
}
@media all and (min-width: 768px) {
	#spot #trailer p.trailer_off, #spot #trailer iframe {
	  width: 528px;
	  height: 297px;
	}
}
#spot #trailer p.trailer_off {
	background-image: url(../img/trailer_off.jpg?191119);
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
	background-size: 100%;
	padding: 0;
	position: relative;
	z-index: 5;
}
#spot .oadate {
  color: #e92828;
  font-size: 160%;
  margin: 0 0 0 1em;
}
#spot .oadate .epnum {
  line-height: 40px;
  margin: 0 .4em 0 0;
  color: #fff;
  background-color: #e92828;
  padding: 1em 0.5em 0.5em;
}
#spot p {
  padding: .5em 1.5em 0;
  color: #000;
  line-height: 1.5;
}
#spot ul#movlist {
  text-align: right;
  margin: 0;
  position: absolute;
  top: 6px;
  right: 0;
  padding: 0;
  width: 100%;
}
#spot ul#movlist li {
  display: inline-block;
  margin: 0 0 0 .05em;
  font-size: 95%;
  line-height: 125%;
  text-align: center;
}
#spot ul#movlist li a {
  display: block;
  color: #000;
  padding: 0.5em 2em 0.5em 0.7em;
  border: 1px solid #000;
	background-color: #fff9e3;
	text-decoration: none;
}
#spot ul#movlist li a:hover {
  opacity: 0.5;
  transition: 0.4s;
}
a.btn {
  background-color: #000;
  color: #fff;
  display: block;
  padding: 1em 0;
  margin: 0 auto 0;
  text-align: center;
	position: relative;
  left: 0;
  right: 0;
  box-shadow: 0 10px 20px rgba(3, 47, 63, 0.1);
}
#spot a.btn {
	bottom: -1em;
	position: absolute;
	width: 40%;
}
a.btn span:before {
	display: block;
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	top: 3px;
	background-color: #fff;
}
a.btn span:after {
	display: block;
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 3px;
	background-color: #fff;
}
#spot ul#movlist li a:before {
	content: '';
	width: 5px;
	height: 5px;
	border: 0px;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 3%;
	margin-top: -3px;
}
a.btn:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 8%;
  margin-top: -5px;
}
@media all and (max-width: 767px) {
	#spot {
    width: 100%;
    margin: 0 auto;
    height: auto;
		padding: 2% 2% 0;
		box-sizing: border-box;
  }

  #spot .oadate {
    margin: 0 0 0 2%;
    font-size: 5vw;
		font-weight: bold;
  }

  #spot ul#movlist {
    font-size: 0;
		margin-right: 2%;
		top: 2.5%;
  }

  #spot ul#movlist li {
    font-size: 3.3vw;
  }

  #spot p {
    padding: .5em 2.5% 0;
    font-size: 3.3vw;
  }

  #spot #trailer {
    width: 100%;
    margin: .2em auto .5em;
    box-shadow: none;
  }

  #spot #trailer div {
    width: 100%;
    position: relative;
    padding: 56.25% 0 0;
    height: 0;
    overflow: hidden;
  }

  #trailer iframe, .emb iframe, #spot #trailer p.trailer_off {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

  #spot h2, #topics h2 {
    width: 40%;
    height: 100%;
    padding: 9% 0 0;
    background-size: 100%;
		background-repeat: no-repeat;
  }
#spot a.btn {
		width: 50%;
	}
a.btn:before {
	  content: '';
	  width: 5px;
	  height: 5px;
	  border: 0px;
	  border-top: solid 2px #fff;
	  border-right: solid 2px #fff;
	  -ms-transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
	  position: absolute;
	  top: 50%;
	  right: 10%;
	  margin-top: -5px;
	}
}
@media all and (min-width: 768px) {
}
/*	topics
============================== */
#topics {
  width: 420px;
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 20px;
  position: relative;
}
#topics h2 {
  width: 410px;
  height: 116px;
	background-image: url("../img/top/whatsnew.png")
}
#topics ul#topicslist li {
  position: relative;
  margin: 0 0 25px 0;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 7px 0px rgba(3, 47, 63, 0.15);
}
#topics ul#topicslist li span.thum {
  width: 178px;
  height: 100px;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  vertical-align: top;
  margin: 0 2% 0 0;
}
#topics ul#topicslist li span.thum img {
	width: 150px;
  height: 100px;
}
#topics ul#topicslist li p {
  display: inline-block;
  line-height: 1.4;
  padding: .8em 0 0;
  font-size: 90%;
  width: 48%;
}
#topics ul#topicslist li a {
  display: block;
  width: 100%;
  color: #000;
}
#topics ul#topicslist li a:hover {
  opacity: 0.5;
  transition: 0.4s;
}
#topics ul#topicslist li span.ymd {
  color: #e92828;
  font-size: 120%;
}
#topics ul#topicslist li span.tag {
  display: inline-block;
  position: absolute;
  top: -6px;
  right: 10px;
  margin: 0;
  z-index: 2;
  text-align: center;
  color: white;
  border-radius: 2px 0 0 0;
	font-size: 90%;
  position: absolute;
  font-family: Trebuchet MS, Avenir;
  padding: .3em .5em .2em;
  z-index: 1;
  box-shadow: 3px 5px 2px rgba(3, 47, 63, 0.15);
  }
#topics ul#topicslist li span.tag:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-right: solid 6px transparent;
}
.tag1 {
  background-color: #e92828;
}
#topics ul#topicslist li span.tag1:before {
	border-bottom: solid 6px #741414;
}
.tag2 {
  background-color: #0047a3;
}
#topics ul#topicslist li span.tag2:before {
	border-bottom: solid 6px #002351;
}
.tag3 {
  background-color: #6a3906;
}
#topics ul#topicslist li span.tag3:before {
	border-bottom: solid 6px #351c03;
}
.tag4 {
  background-color: #eb6100;
}
#topics ul#topicslist li span.tag4:before {
	border-bottom: solid 6px #753000;
}
< !--#include virtual="topics.css"-->.triangle::before {
  content: "";
  top: 0;
  right: 0;
  border-bottom: 5em solid transparent;
  border-right: 5em solid rgba(254, 209, 0, 0.8);
  position: absolute;
  z-index: 10;
}
@media all and (min-width: 768px) {
/*#topics ul#topicslist{width:420px; height:380px; padding:6px 15px 0; overflow-y:hidden; overflow-x: visible;}
#topics ul#topicslist li:nth-child(3){margin:0 0 3em 0;}*/
#tpcs {
	width: 400px;
	height: 375px;
	overflow: hidden;
	position: relative;
	padding: 17px 0 0 10px;
	background-color: hsla(0, 0%, 100%, 0.5);
}
#topics ul#topicslist li {
	width: 390px;
	border: 1px solid #000;
}
.tp_csr {
	text-align: right;
	margin-top: 10px;
	margin-right: 20px;
}
.tp_csr ul li {
	display: inline-block;
	margin: 0 .2em 0;
	width: 11%;
}
.tp_csr ul li img {
	width: 100%;
}
.tp_csr #next, .tp_csr #prev {
	cursor: pointer;
}
#topics h2 {
  border-bottom: 1px solid;
	background-size: 100%;
}

}
@media all and (max-width: 767px) {
#spot h2, #topics h2 {
	width: 40%;
	height: auto;
	padding: 9% 0 0;
	background-size: 100%;
	background-repeat: no-repeat;
}
#topics h2 {
	width: 100%;
	padding: 7.333333% 0 0;
	/* margin-left: 2%; */
}
#topics {
	width: 100%;
	margin: 0 auto;
}
#topics:before {
	left: 0;
	top: 10%;
	height: 95%;
}
#topics ul#topicslist {
	margin: 0;
	height: auto;
	display: flex;
	padding: 4% 0;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	background-color: #fed6b9;
	background-image: url(../img/ptn.png?2);
	background-size: 50%;
}
#topics ul#topicslist li {
	/*width:35%;*/
	margin: 0 .6% 0;
	vertical-align: top;
	white-space: normal;
	word-wrap: break-word;
	flex: 0 0 40%;
	box-shadow: 0 3px 5px rgba(3, 47, 63, 0.15);
}
#topics ul#topicslist li span.thum {
	width: 100%;
	height: auto;
	padding: 60% 0 0;
	display: block;
	position: relative;
}
#topics ul#topicslist li span.thum img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#topics ul#topicslist li p {
	display: block;
	padding: 5%;
	font-size: 90%;
	font-size: 3vw;
	width: auto;
}
#topics ul#topicslist li a {
	width: 100%;
	height: 100%;
}
#topics ul#topicslist li span.ymd {
	font-weight: bold;
}
#topics ul#topicslist li span.tag {
	top: -6px;
	right: 8px;
}
.tp_csr {
	display: none;
}
}
/*	firstarea
============================== */
@media all and (min-width: 768px) {
	section.firstarea {
		background-color: #fed6b9;
		background-image: url(../img/ptn.png?2);
		background-size: 50%;
	}
}
section.firstarea:before {
display: block;
content: "";
width: 100%;
height: 300px;
margin-bottom: -300px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(185deg, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 62%);
background: -webkit-gradient(left top, right bottom, color-stop(49%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,0)), color-stop(62%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(185deg, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 62%);
background: -o-linear-gradient(185deg, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 62%);
background: -ms-linear-gradient(185deg, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 62%);
background: linear-gradient(185deg, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 62%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
/*	copyright
============================== */
p.copyright {
	font-size: 80%;
	color: #fff;
	text-align: center;
	padding: 30px;
	background-image: url(../img/ptn_red.jpg);
	line-height: 1.5;
}
p.copyright a {
	color: #fbcf00;
}
/*	back to top
============================== */
p.backtotop {
	z-index:20;
	-webkit-transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:300ms;
	transition-timing-function:ease-in-out;
}
p.backtotop a, p.backtotop span {
	display:block;
}
p.btot-on, p.btot-off {
	position:fixed;
}
@media all and (min-width: 768px) {
p.backtotop {
	transition-property:bottom;
}
p.btot-on {
	right:30px;
	bottom:30px;
}
p.btot-off {
	right:30px;
	bottom:-200px;
}
p.backtotop a {
	background-image: url(../img/backtotop.png);
	background-repeat:no-repeat;
	background-position:left top;
	width:113px;
	height:200px;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
}
@media all and (max-width: 767px) {
p.backtotop {
	min-width:320px;
	transition-property:bottom;
}
p.btot-on, p.btot-off {
	width:100%;
}
p.btot-on {
	bottom:0;
}
p.btot-off {
	bottom:-40px;
}
p.backtotop a {
	line-height: 1;
	z-index:20;
	position:relative;
	text-decoration:none;
	color:#fff;
	text-shadow:0 2px 2px hsla(0, 0%, 0%, .5);
	background-color:#e84134;
	height:40px;
	letter-spacing: 0;
}
p.backtotop a span {
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-0.5em;
	margin-left:-2.5em;
	font-weight:bold;
}
p.backtotop a span:before {
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-8px;
	margin-left:-5.5em;
	display:block;
	content:"";
	background-image:url(../img/arrow16.svg);
	background-repeat:no-repeat;
	background-position:left top;
	background-size:16px 100px;
	width:16px;
	height:16px;
	background-color:#fff;
	border-radius:8px;
}
}
/*	smenu
============================== */
div.smenu {
	position: relative;
	z-index: 1;
}
div.smenu:before {
	display: block;
	content: "";
	height: 100%;
	position: absolute;
	background-image: url(../img/top/sc_bg.jpg);
	background-size: 35%;
	background-repeat: no-repeat;
	background-position: right bottom;
	z-index: -1;
}
div.smenu div.wrap .box > p {
	display: inline-block;
}
div.smenu div.wrap .box > p.topics {
	position: relative;
}
div.smenu div.wrap .box > p.topics::after {
	display:block;
	content: "9.10 UP";
	background-color: #fff;
	padding: 0.5em;
	border: 1px solid #000;
	text-align: center;
	z-index: 5;
	width: 6em;
	vertical-align: top;
	position: absolute;
	bottom: 6%;
	left: 50%;
	box-sizing: border-box;
	margin-left: -3em;
	font-size: 80%;
	font-weight: bold;
}
@media all and (max-width: 767px) {
	div.smenu div.wrap .box > p.topics::after {
		bottom: 10%;
		font-size: 3vw;
	}
}
div.smenu div.wrap .box > p a {
	display: block;
	text-indent: 110%;
	white-space: nowrap;
	background-size: 100%;
}
@media all and (min-width: 768px) {
	div.smenu {
		text-align: center;
		position: relative;
		width: 980px;
		margin: 0 auto;
		background-image: url(../img/top/sc_bg.jpg);
		background-repeat: no-repeat;
	}
	div.smenu div.wrap .box {
		width: 750px;
	}

	div.smenu div.wrap .box > p {
		overflow: hidden!important;
		box-shadow:0px 10px 0px 0px #e92828;
		border: 1px solid #000;
		box-sizing: border-box;
		border-radius: 50%;
		margin-bottom: 0.5em;
		background-color: #fff;
	}
	div.smenu div.wrap .box > p:nth-last-of-type(2n) {
		box-shadow:0px 10px 0px 0px #0047a3;
	}
	div.smenu div.wrap .box > p {
		margin-right: 20px;
	}
	div.smenu {
		padding: 0 0 40px;
	}
div.smenu div.wrap .box > p a {
		width: 224px;
		height: 224px;
		float: left;
		position: relative;
	}
	div.smenu:before {
		margin: 0 auto;
		background-position: right bottom;
	}
}
@media all and (max-width: 767px) {
	div.smenu:before {
		background-size: 80%;
		background-position: left bottom;
		width: 120%;
	}
	div.smenu div.wrap .box > p {
		box-shadow:0px 5px 0px 0px #e92828;
	}
	div.smenu div.wrap .box > p:nth-last-of-type(2n) {
		box-shadow:0px 5px 0px 0px #0047a3;
	}
	div.smenu div.wrap .box > p {
		width: 49%;
		border: 1px solid #000;
		box-sizing: border-box;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 0.5em;
	}
	div.smenu div.wrap .box > p a {
		display: block;
		background-color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-indent: 110%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		height: 0;
		padding-top: 100%;
		border-radius: 50%;
	}
	div.smenu div.wrap .box > p a span {
		display: block;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
}
/*	footer
============================== */
footer {
	position: relative;
	z-index: 1!important;
	text-align: center;
	vertical-align: top;
	padding: 20px 0;
	background-color: #fed6b9;
	background-image: url(../img/ptn.png?2);
	background-size: 50%;
}
/*	sns TL
============================== */
.sns_tl {
	padding: 20px 0;
	background-color: #d9dcef;
	background-image: url(../img/ptn.png?2);
	background-size: 50%;
}
#twTL, #igTL {
	width: 314px;
	height: 350px;
	/* display: inline-block; */
	background-color: #fff;
	border: 1px solid #000;
}
#twTL .tline,
#igTL .tline {
	width: 294px;
	height: 275px;
	overflow: hidden;
	margin: 0 auto;
}
#twTL h3 img, #igTL h3 img {
	display: block;
	width: 298px;
	margin: 10px auto;
}
#twTL h3 img {
	margin: 10px auto;
}
#igTL h3 img {
	margin: 10px auto 5px;
}
div#rect {
	display: inline-block;
}
div#rect p {
	margin-bottom: 20px;
}
div.snsbtn {
	margin-left: 60px;
}
@media all and (min-width: 768px) {
	#twTL, #igTL {
		float: left;
	}
	#twTL, #igTL {
		margin-right: 20px;
	}
	.sns_tl {
		margin-bottom: 30px;
	}
	/* .sns_tl div.wrap {
		width: 671px;
	} */
}
@media all and (max-width: 767px) {
	#twTL, #igTL {
		margin: 0 auto 20px;
	}
}
/*	ph_cut
============================== */
.ph_cut, .ph_cut_l {
	border: 0.5em solid #fff;
	outline: 1px solid #000;
	box-shadow: 12px 12px #e60012;
}
.ph_cut span, .ph_cut_l span {
	display: block;
	position: relative;
}
.ph_cut span, .ph_cut_l span {
	background-size: 100%;
}
@media all and (min-width: 768px) {
	.ph_cut,
	.ph_cut span {
	  width: 600px;
	  height: 400px;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-position: center center;
	}
	.ph_cut {
	  margin: 2em auto;
	}
	.ph_cut_l,
	.ph_cut_l span {
	  width: 400px;
	  height: 600px;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-position: center top;
	}
	.ph_cut_l {
		margin: 2em auto;
	}
}
@media all and (max-width: 767px) {
.ph_cut span img, .ph_cut_l span img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.ph_cut {
	width: 94%;
	margin: 1em 0;
}
.ph_cut span {
	height: 0;
	padding: 66.66666% 0 0;
	position: relative;
}
.ph_cut_l {
	width: 60%;
	margin: 1em auto;
}
.ph_cut_l span {
	height: 0;
	padding: 150% 0 0;
	position: relative;
}
.ph_cut, .ph_cut_l {
	box-shadow: 7px 7px #e60012;
}
}
p.box {
  padding: 0.5em 1em 1em;
  background-color: #fff9e3;
  border: 1px solid #000;
  margin: 0.7em 0 1em;
}
p.box strong {
  text-align: center;
  font-size: 1.1em;
  color: #e92828;
  display: block;
  padding: 0 0 0.3em;
  border-bottom: 1px solid #000;
  margin-bottom: 0.5em;
}
/*	LINE
============================== */
p.line a,
p.line a span {
	display: block;
	white-space: nowrap; overflow: hidden; text-indent: 110%;
	background-repeat: no-repeat;
}
@media all and (min-width: 768px) {
p.line a,
p.line a span {
	width: 305px;
	height: 372px;
	margin: 0 0 -44px 0;
  background-image: url(../img/top/line.png?2);
}

p.line a {
	display: block;
	float: left;
}
p.line a span {
	opacity: 1;
	transition: opacity 0.3s ease 0s;
}
/*p.line a span:hover {
	opacity: 0;
}*/
.sns-btns {
	margin-right: 25px;
	float: left;
}
}
@media all and (max-width: 767px) {
	p.line a {
		background-image: url(../img/top/line_smp.png);
		background-position: center;
		background-size: contain;
		width: 100%;
		height: 86px;
		display: none;
	}
	.sns-btns {
		margin-bottom: 20px;
	}
}

/*	data li
============================== */
div.data li {
	position: relative;
	padding-left: 1.5em;
}
div.data li:before {
  font-family: "Font Awesome 5 Free";
  content: "●";/*アイコン種類*/
  position: absolute;
  left : 0; /*左端からのアイコンまで*/
  color: #e92828; /*アイコン色*/
}
ul.kome li:before {
	content:"※";
	float:left;
}
ul.kome li span {
	display:block;
}

/*	topicsbtn
============================== */
.topicsbtn a,
.gallerybtn a {
	border-radius: 50%;
	display: block;
	display: inline-block;
	position: relative;
	overflow: hidden;
}
.topicsbtn,
.gallerybtn {
	border-radius: 50%;
	border: 1px solid #000;
	box-sizing: border-box!important;
	overflow: hidden;
	background-size: 100%;
}
.topicsbtn {
	background-image: url(../img/top/topics.jpg?2);
}
.gallerybtn {
	background-image: url(../img/top/gallery.jpg?2);
}
.topicsbtn a::after,
.gallerybtn a::after {
	display: block;
	background-color: #fff;
	padding: 0.5em;
	border: 1px solid #000;
	text-align: center;
	z-index: 5;
	width: 6em;
	vertical-align: top;
	position: absolute;
	bottom: 6%;
	left: 50%;
	box-sizing: border-box;
	margin-left: -3em;
	font-size: 80%;
	font-weight: bold;
}
.topicsbtn a::after {
	content: "9.10 UP";
}
.gallerybtn a::after {
	content: "最終話"!important;
}

.topicsbtn {
	box-shadow: 0px 5px 0px 0px #0047a3;
}
.gallerybtn {
	box-shadow: 0px 5px 0px 0px #e92828;
}
@media all and (min-width: 768px) {
	.topicsbtn,
	.gallerybtn {
		display: inline-block;
		width:224px;
		height: 224px;
		vertical-align: top;
		margin-right: 20px;
}
	.topicsbtn a,
	.gallerybtn a {
		width: 100%;
		height: 100%;
	}
	.topicsbtn p.pic span,
	.gallerybtn p.pic span {
		display: block;
		background-size: 100%;
		width: 224px;
		height: 146px;
		position: absolute;
		bottom: 0;
	}
}
@media all and (max-width: 767px) {
	.topicsbtn,
	.gallerybtn {
    width: 49%;
		float: left;
		margin-right: 2%;
	}
	.topicsbtn {
		box-shadow: 0px 5px 0px 0px #0047a3;
	}
	.gallerybtn {
		box-shadow: 0px 5px 0px 0px #e92828;
	}
	.topicsbtn a,
	.gallerybtn a {
		display: block;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		height: 0;
		padding-top: 100%;
	}
	.topicsbtn a .inner,
	.gallerybtn a .inner {
		border-radius: 50%;
		overflow: hidden!important;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
	}
	.topicsbtn a::after,
	.gallerybtn a::after {
    bottom: 10%;
    font-size: 3vw;
	}
	.topicsbtn p.pic,
	.gallerybtn p.pic {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.topicsbtn p.pic span,
	.gallerybtn p.pic span {
		display: block;
		background-color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-indent: 110%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		height: 0;
		padding-top: 65.1785714285714%;
	}
	.topicsbtn p.pic span img,
	.gallerybtn p.pic span img {
		display: block;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
}

/*	banner_area
============================== */
div.banner_area p a {
	display: block;
	text-indent: 110%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	background-size: 100%;
}
@media all and (min-width: 768px) {
	div.banner_area {
		width: 980px;
		margin: 0 auto;
	}
	div.banner_area p a {
		float: left;
		margin-bottom: 30px;
	}
	div.banner_area p.karakuchi a {
		width: 476px;
		height: 113px;
}
	div.banner_area p.illust a {
		width: 476px;
		height: 113px;
		margin-right: 28px;
	}
	div.banner_area p.ishop a {
		width: 476px;
		height: 113px;
		margin-right: 28px;
	}
	div.banner_area p.linestamp a {
		width: 476px;
		height: 113px;
	}
	div.banner_area p.dvdbox a {
		width: 476px;
		height: 113px;
		float: none;
		margin: 0 auto 30px!important;
	}

	div.banner_area p.paravi a {
		width: 476px;
		height: 113px;
		margin-right: 28px;
		float: none;
		margin: 0 auto 40px;
	}
	div.banner_area p.tbsfree a {
		width: 476px;
		height: 113px;
}
	div.banner_area p.spin-off a {
		width: 726px;
		height: 140px;
	}
	div.banner_area p.doraje a {
		width: 234px;
		height: 140px;
		margin-left: 20px;
		background-size: 100%;
	}
}
@media all and (max-width: 767px) {
	div.banner_area {
		padding: 0 10px;
		z-index: 5;
		position: relative;
	}
	div.banner_area p a {
		display: block;
		background-color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-indent: 110%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		height: 0;
		padding-top: 23.7394957983193%;
	}
	div.banner_area p a {
		padding-top: 23.7394957983193%;
		margin-bottom: 0.4em;
	}
	div.banner_area p.spin-off a {
		padding-top: 96%;
	}
	div.banner_area p.doraje a {
		padding-top: 59.8290598290598%;
	}
	div.banner_area p.linestamp a {
		padding-top: 34.8%;
	}
	div.banner_area p.spin-off a.lazy-done {
		background-image: url(../img/top/spin-off_smp.jpg?2)!important;
	}
	div.banner_area p.linestamp a.lazy-done {
		background-image: url(../img/top/linestamp_smp.jpg)!important;
	}
	div.banner_area p.ishop a span {
		display: block;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
}
.lazy img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.marker {
	background: linear-gradient(transparent 40%, #ffff66 40%);
}
/*	cap
============================== */
.cap {
  text-align: center;
  margin: -0.5em auto 4em;
  width: 500px;
  padding: 0 !important;
  line-height: 1.5;
	color: red;
}
.cap span {
  /* background-color: rgba(124, 196, 213, 0.2); */
  padding: .1em;
  background-color: #fff9e3;
}
@media all and (max-width: 767px) {
  .cap span {
    font-size: 1.2rem;
  }
  .cap {
    width: 95%;
    margin: .8em auto 1em;
  }
  .cap span {
    font-size: 100%;
  }
}